Irányelvek webfejlesztéshez (Bártházi András) – Nagy Gusztáv PHP Konferencia RoadShow Kecskemét

2 Mit veszünk figyelembe?  a megrendelő kívánságai  rendelkezésre álló idő és erőforrásaink  szakmai szempontok Ezek egymásnak ellentmondhatnak.

3 Kinek lesz jobb?  Vakok, gyengén látók  Színtévesztők  Nem túl rutinos felhasználók Mindenki másnak is!

4 1. Kezdőlap kialakítása  Ne legyen Flash, DHTML, Java applet alapú  nem mindenkinél működik  le lehet tiltva  robotok sem tudják használni  Ha mégis, akkor legyen alternatíva (pl. egy link formájában)

5 2. Frame mentesség  Bonyolult programozói fogások lehetnek szükségesek  (pl. munkamenet-kezelésnél csak az egyik frame lépett be)  Könyvjelző nehezen alkalmazható  Felolvasó program, karakteres böngésző nehezen kezeli  Néhol mégis indokolt lehet  (pl. adminisztrációs felületek)

6 Alternatív ötletek  Vizuális  Komplett CSS megoldás van  Funkcionális  Menü frame helyett script-ből generált oldal  Újratöltés nélküli adatcsere XmlHttpRequest objektummal

7 3. Töltelék képek használata Pozícionálásra használják  a forráskódot átláthatatlanná teszi  bonyolult lehet a szerkesztése  margin és padding CSS tulajdonságok  Ha mégis használjuk, legyen egy alt tulajdonság (felolvasó szoftverek)

8 4. Image map-ek használata  Szerver oldali megoldás  Nehezen elérhető  Minden esetben újratöltést igényel  Kliens oldali megoldás  A title tulajdonság fontos  „CSS sprite”

9 5. CSS nélkül is használható oldal  Böngészők, felolvasó szoftverek csak részben vagy egyáltalán nem ismerik  Legyen ilyenkor is elérhető  Nem a megjelenés, hanem a tartalom a fontos

10 6. Szabványosság  Általában nem köti meg a kezünket:  CSS 2  XHTML 1.0  Szabványos JavaScript/DOM  Előnyei  E nélkül nincs akadálymentesség  Átláthatóbb  Ellenőrizhetőbb  Platformfüggetlenebb

11 7. Képek hozzáférhetősége  Minden funkcionális képhez legyen alt tulajdonság  Előnyös:  Lassú kapcsolat  Felolvasó szoftver  Robotok  Lehet a title tulajdonságot is használni

12 8. Tartalmak alternatív formában közzététele  Flash  videók  PowerPoint bemutatók  Java alkalmazások  PDF-ek  Jelöljük a formátumot és a méretet  Legalább kivonatosan szövegesen is legyenek elérhetők

13 9. Navigáció  Ne legyen Flash, Javascript, Java alapú  Ha mégis, legyen alternatíva  pl. diszkrét JavaScript-es menü a Weblabor oldalán

Zavaró elemek mellőzése  Fényújság  Villogás  Animált GIF  Flash  DHTML animációk Először lehet tetszetős, de már tizedszerre is idegesítő Egyes reklámok fordítva sülhetnek el (ha zavar, másik lapot keresek)

Javascript nélkül is használható oldal  Sokan kikapcsolják  A böngésző nem támogatja  Robotok nem ismerik  Nélküle is 100%-ig legyen használható  Legyen a hab a tortán, ami pluszt ad  Diszkrét JavaScript:

Hang nélküli oldal  Egy idő után a legszebb háttérzene is zavaró (főleg ha én mást hallgatnék)  A funkcionális hangok idegesítőek lehetnek  Néhol hasznos lehet  (pl. gyermekoldal)  Tegyük kikapcsolhatóvá!

Formázás ne hordozzon információt  Ne a HTML színekkel, dőlt, félkövér formázásokkal, betűmérettel stb. jelezzünk  HTML-ben egész sor jelentéssel bíró elem van:  ABBR, ACRONYM, CITE, CODE, DEL, DFN, EM, INS, KBD, SAMP, STRONG, VAR  Ezeket már formázhatjuk CSS-el

Oldalszerkezet  A HTML-beli sorrendben is értelmezhető legyen a tartalom  pl. A cikk és a kapcsolódó linkajánló egymáshoz közel legyen  Előnyös  CSS nélkül, pl. felolvasó szoftverrel  robotok  CSS Zen Garden (

Helyes szabványhasználat  Az űrlapelemek logikailag kapcsolódjanak Keresztnév  A felolvasó szoftver felismeri  A böngésző is kezeli (a szövegre klikkelve a mezőre ugrik a fókusz)

Teljes oldaltérkép  Időnként el lehet veszni a navigációban  A site egyes oldalairól (oldalkategóriáiról) legyen egy lista, ahonnan mindent meg lehet találni  Google Sitemaps (

Táblázatok  Csak akkor használjunk táblázatot, ha tényleg arra van szükség (design-hoz ne)  (  Legyen mindig összefoglaló (summary)  A táblázatok lineárisan is értelmezhetők legyenek  (pl. alapvetően baloldalt legyen a fejléc információ)

Linkek  A linkek ne nyissanak új ablakot (főleg JavaScripttel ne) a felhasználó dönthessen  pl. pozitívan változott  Ha mégis nyitnak  diszkrét JavaScript-el (XHTML Strict)  ikonnal jelezzük (pl. nagygusztav.hu)  Aláhúzva csak link legyen, más ne  A link A elem legyen (ne JavaScript!)

Háttérszín  Lehetőleg egyszínű, nem kép  figyeljünk a kontrasztra  ha kép, hozzá hasonló háttérszín is célszerű  gyengén-látóknak olvashatatlan  másoknak zavaró

Űrlapok választási lehetőségei  választható elemek esetén  ha kevés opció van, akkor listaszerűen (több soros lista, vagy rádió gombos megjelenéssel)  ellenkező esetben egysoros select-tel (combobox, lenyíló menü) jelenjen meg  A nagyon nagy méretű lista nagyon nehezen kezelhető

Mindig a megfelelő elemet  Használjunk megfelelő címeket (H1-6)  Használjuk listához UL-t  stb.  a későbbiekben is könnyebb lesz az oldalt újraszervezni

Designt ne karakterrel valósítsunk meg  pl. a » díszítő elemet  HTML entity-k segítségével  nem ismétlődő háttérképpel  CSS segítségével: li:after { content: ' ::'; }

Navigációs elemek helyzete  Navigációs menüt felsorolással adjunk meg  A felolvasó szoftverek jobban kezelik  CSS-el lehet akár egymás mellé is helyezni pl. Listamatic

Csak az aktuális almenüpontok  csak az aktuális almenüpontok jelenjenek meg, ne az összes  egyértelműbb lesz a navigáció (a kevesebb néha több!)

Átméretezhető betűk  Ne pixelméretet adjunk meg, hanem relatív mértékegységet  Ekkor a felhasználó átméretezhet  menüből  felhasználói CSS-el  JavaScripttel

Jól olvasható betűk  képernyőn jobban olvashatók a talp nélküli betűtípusok (kis méret)  dőlt betűket ne használjunk folyó szövegben (kis méretben nagyon darabos)  legyen elég nagy a sortávolság pl. Web Page Design tervezőknek

Navigáció és tartalom aránya  Ne legyen túl hosszú egy oldal  A nagyobb tartalmat oldalakra is tördelhetjük  A tartalmi rész előtt levő szöveg ne legyen túl nagy

HTML forrás  Érdemes logikusan tagolni (nekem is könnyebb lesz módosítani)  Lebegő objektumot logikus helyre (pl. bekezdés elejére) érdemes rakni  Szabványos, jól formázott kimenet automatikusan pl. Tidy for PHP

Elérhető formátumok  Lehetőleg platformfüggelten formátumokon publikáljunk  PDF (ugyanezt TXT-ben is)  RTF  stb

Képek  A tartalomhoz tartozó képek és a háttérképek a maguk helyén legyenek  IMG  background-image

35 Ajánlott források  Bártházi András: Irányelvek webfejlesztőknek  paramedia.hu