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

Az előadások a következő témára: "Irányelvek webfejlesztéshez (Bártházi András) – Nagy Gusztáv PHP Konferencia RoadShow Kecskemét."— Előadás másolata:

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

2 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 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 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 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 6 Alternatív ötletek  Vizuális  Komplett CSS megoldás van http://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 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 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 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 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 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 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 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 http://weblabor.hu/cikkek/diszkretjavascript

14 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 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 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 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 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 19 15. 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)

20 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 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 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 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 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 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 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 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 helyezni pl. Listamatic http://css.maxdesign.com.au/listamatic/

28 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 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 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 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 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 33 29. Elérhető formátumok  Lehetőleg platformfüggelten formátumokon publikáljunk  PDF (ugyanezt TXT-ben is)  RTF  stb

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

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