Irányelvek webfejlesztéshez

1. Irányelvek webfejlesztéshez (Bártházi András) – Nagy Gusztáv PHP Konferencia RoadShowKecskemé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 vanhttp://weblogs.asp.net/fmarguerie/archive/2003/07/18/10263.aspx http://annevankesteren.nl/2004/07/fixed-positioning • 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”http://js.hu/web/sprites/

9. 5. CSS nélkül is használható oldal • Böngészők, felolvasó szoftverekcsak 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ánhttp://weblabor.hu/cikkek/diszkretjavascript

14. 10. 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)

15. 11. 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:http://weblabor.hu/cikkek/diszkretjavascript

16. 12. 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á!

17. 13. 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

18. 14. 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 (http://www.csszengarden.com/tr/magyar/)

19. 15. Helyes szabványhasználat • Az űrlapelemek logikailag kapcsolódjanak <label for="id_keresztnev">Keresztnév</label> <input type="text" name="keresztnev"id="id_keresztnev" /> • A felolvasó szoftver felismeri • A böngésző is kezeli (a szövegre klikkelve a mezőre ugrik a fókusz)

20. 16. 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 (https://www.google.com/webmasters/sitemaps/login)

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

22. 18. Linkek • A linkek ne nyissanak új ablakot (főleg JavaScripttel ne)a felhasználó dönthessen • pl. www.lap.hu 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!)

23. 19. 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ó

24. 20. Ű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ő

25. 21. 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

26. 22. 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: ' ::'; }

27. 23. 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 helyeznipl. Listamatichttp://css.maxdesign.com.au/listamatic/

28. 24. 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!)

29. 25. Á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

30. 26. 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 http://www.mek.iif.hu/porta/szint/muszaki/szamtech/wan/techno/wpdhun/html/wpdtypo.htm

31. 27. 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

32. 28. 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 http://www.coggeshall.org/oss/tidy/

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

34. 30. 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őknekhttp://weblabor.hu/cikkek/iranyelvek • paramedia.hu