A ‘Programozás’ kategória arhívuma

Űrlapok készítése és formázása: CSS és jQuery trükkök

Sokaknak a mai napig gondot vagy fejtörést okoz az (X)HTML űrlapok készítése. Régen táblázatokkal volt megoldva a formázás, természetesen ez nem helyes szemantikailag. Ha kinézetre nem is feltétlenül változtak a régebbi form-ok, jópár éve már az úgynevezett float-olt technikát használják. Az egyik legnagyobb előnye, hogy az űrlap kódja logikailag is helyes lesz, így az oldalunk elérhetőbb lesz a fogyatékos internetezők számára is (például a látássérülteknek, akik képernyő felolvasót használnak). Ez a leírás megmutatja, hogyan lehet egyszerű és mégis helyes form-okat készíteni, illetve néhány hasznos trükkre is felhívja a figyelmet, ami nem feltétlen a fogyatékos felhasználókat célozza meg, de az átlagfelhasználó életét nagyban megkönnyítheti, felgyorsíthatja annak munkáját.

El nem tüntethető reklám

Kérésre érkezett ez a leírás, amiben bemutatok egy egyszerű trükköt, hogyan készíthetsz olyan popup (felugró) vagy overlay (eltakaró) reklámot, ami egészen addig nem tűnik el, amíg egy reklámra rá nem kattint az olvasó. Tudom, hogy nem szép dolog, de legyünk naívak és gondoljunk arra, hogy ennek akár jószándékú felhasználásai is lesznek.

Induljunk ki abból, hogy senki sem szereti, ha a már meglévő weboldalukat át kell írni egy kis ráncfelvarrásért.

Mennyien követik a Feedburner hírcsatornád?

Ez egy rövid, de annál érdekesebb bejegyzés. Külföldi oldalak egész seregén látni, hogy különféle formában van kiírva a weboldal valamely részére, hogy hányan iratkoztak fel az oldal RSS-ére. A Feedburner alapból ugyan biztosít lehetőséget, hogy egy kis kép formájában (amit ő generál) megmutasd az oldaladon ezt a számot, de legyünk őszinték, ez nem egyedi. Akit érdekelt a dolog, annak nagy titkot nem árulok el, évesnél is régebbi módszer, hogy a Feedburner („újonnan” Google-n keresztűl működő) web service-ét használva hozzajuthatunk ehhez az információhoz. Az elérési URL nem más, mint

https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=webpillango

A webpillango-t cseréld le a saját azonosítoddal. A lekérés eredménye egy XML dokumentumot térit vissza. Ebben a circulation attribútum alatt találjuk a keresett számot.

Yoast írt egy bejegyzést (angol), hogy miként nyerhetjük ki ezt a számot cURL-t használva (ami manapság minden szolgáltatónál megtalálható).

Színvilág a webdesignban

Ez egy rendhagyó leírás! Nem szoktam hosszú leírásokat írni vagy ha igen, akkor azokat több bejegyzésre bontva teszem közzé. Ennek több oka is van, például jobb hatékonyabb több, rövidebb, leírás, mint egy hosszú, amit sokan megunnak és nem olvasnak végig. Ezért meg is kérlek, ha nem olvasod végig, el se kezd! Igen, ezt nyugodtan provokálásnak tekintheted!

Firebug: Firefox, Internet Explorer és társai

Minden webfejlesztő rémálma, tisztelet a kivételnek, hogy az elkészült weboldalt Internet Explorer összeférhetővé tegye. Bár a Microsoft webböngészőjének újabb változatai már eléggé standard követőek és szépen jelenítik meg a weboldalak túlnyomó többségét, mégis szükség van a weboldalak trükkös kódokkal való teleszúrkálására, mivel sokan használnak régebbi böngészőket.

10 hasznos dolog weboldal fejlesztőknek

Összegyűjtöttem néhány eszközt, ami szükséges lehet, de minden esetre megkönnyíti a weboldal fejlesztők és weboldal tulajdonosok dolgát. Röviden szó lesz böngésző független designolástól, logógeneráláson keresztül a legtöbb fejfájást okozó dolgokról.

Google kulcsszó kinyerése a refererből

Ha valamelyik keresőből érkezik a látogatónk, akkor fontos lehet megtudni milyen kulcsszóra keresve jutott el hozzánk. Wordpress és hasonló CMS-ekhez már régen vannak pluginek, de ha valami egyedit akarunk, vagy saját weboldal motrunk van, akkor érdemes megtudni, hogyan lehet értékes információt szerezni a hivatkozó oldal linkjéből!

Fájlok feltöltése PHP használatával

A leírásban azt fogom bemutatni, hogy hogyan lehet elkészíteni egy egyszerű képfeltöltő rendszert PHP-ban. Először is, készítsük el az alábbi mappastruktúrát:

az “upload_files” mappa fogja tárolni a feltöltő rendszert, kód szempontjából mindegy, hogy mi a neve.
Az “uploads” mappa ad helyet a feltöltött fájljainknak, az “upload.php” pedig a rendszer motorjaként szolgál.

Internet Explorer height probléma

Bizonyára már többen is belefutottak abba a problémába, hogy míg a legtöbb böngésző helyesen kezeli azt a megszorítást miszerint egy elem magassága nulla, addig az Internet Explorer különféle bajokat okoz. Hol is vehetjük hasznát egy nulla magasságú elemnek? Például van, hogy több float-olt elemet el szeretnénk választani az oldal egy lebegés mentes részétől: a tartalom és az oldalléc lebeg és elszeretnénk választani a lábléctől.

Egy elméleti megoldás az elválasztási problémára, hogy készítünk egy CSS osztályt, ami magassága nulla és clear: both tulajdonsággal bír. A gond az, hogy bár a Firefox és az IE 8 helyesen kezel minden esetet, ahol a height paramétert valamiféleképpen lenulláztuk, az IE 6 és IE 7 különbözően viselkednek.

Accessibility és SEO: alternatív szövegek

A probléma

Egy weboldal grafikai tervezésénél, ha a SEO és Accessibility szempotokat is figyelembe veszünk, nem használunk olyan szöveges elemeket, melyeket majd képként kell megjelentíteni. Nem használunk például élsimítást a szöveghez, hogy az a valóságban is szövegként (pl: <h1>Lorem Ipsum</h1>) jelenhessen meg.

Ez azért fontos, ha a keresők ráfutnak az oldalra, akkor a hasonló elemeket valóban szövegnek ismerje fel, mert ugye ha az egy kép (főleg alternatív szöveg hiányában), akkor nem “látja”. Mitöbb a látássérülteknek készült olvasóprogramok sem tudják megfelelően kezelni,  magyarán nem tudja felolvasni a látássérült ember számára.

Ám nem mindíg tudjuk elkerülni ezek használatát, például egy a fejlécben levő logó esetében.

Elolvasom a teljes bejegyzést »