Irányelvek webfejlesztéshez

(Bártházi András) – Nagy GusztávPHP Konferencia RoadShow

Kecskemét

2

Mit veszünk figyelembe?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?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ása1. 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ég2. 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 ötletekAlternatív ötletek

VizuálisKomplett CSS megoldás van

http://weblogs.asp.net/fmarguerie/archive/2003/07/18/10263.aspx http://annevankesteren.nl/2004/07/fixed-positioning

FunkcionálisMenü frame helyett

script-ből generált oldal

Újratöltés nélküli adatcsere XmlHttpRequest objektummal

7

3. Töltelék képek 3. Töltelék képek használatahaszná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ágokHa mégis használjuk, legyen egy

  alt tulajdonság (felolvasó szoftverek)

8

4. Image map-ek 4. Image map-ek használatahasználata

Szerver oldali megoldásNehezen elérhető

Minden esetben újratöltést igényel

Kliens oldali megoldásA title tulajdonság fontos

„CSS sprite”http://js.hu/web/sprites/

9

5. CSS nélkül is 5. CSS nélkül is használható oldalhaszná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ág6. Szabványosság

Általában nem köti meg a kezünket:CSS 2XHTML 1.0Szabványos JavaScript/DOM

ElőnyeiE nélkül nincs akadálymentességÁtláthatóbbEllenőrizhetőbbPlatformfüggetlenebb

11

7. Képek hozzáférhetősége7. 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 8. Tartalmak alternatív formában közzétételeformá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ó9. Navigáció

Ne legyen Flash, Javascript, Java alapú

Ha mégis, legyen alternatívapl. diszkrét JavaScript-es menü a

Weblabor oldalánhttp://weblabor.hu/cikkek/diszkretjavascript

14

10. Zavaró elemek 10. Zavaró elemek mellőzésemellő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 11. Javascript nélkül is használható oldalhaszná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 adDiszkrét JavaScript:

http://weblabor.hu/cikkek/diszkretjavascript

16

12. Hang nélküli oldal12. 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 13. Formázás ne hordozzon információtinformá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. Oldalszerkezet14. Oldalszerkezet

A HTML-beli sorrendben is értelmezhető legyen a tartalompl. A cikk és a kapcsolódó linkajánló

egymáshoz közel legyen

ElőnyösCSS nélkül, pl. felolvasó szoftverrel

robotok

CSS Zen Garden (http://www.csszengarden.com/tr/magyar/)

19

15. Helyes 15. Helyes szabványhasználat 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ép16. 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ázatok17. 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. Linkek18. Linkek

A linkek ne nyissanak új ablakot (főleg JavaScripttel ne)a felhasználó dönthessenpl. www.lap.hu pozitívan változott

Ha mégis nyitnakdiszkrét JavaScript-el (XHTML Strict) ikonnal jelezzük (pl. nagygusztav.hu)

Aláhúzva csak link legyen, más neA link A elem legyen (ne JavaScript!)

23

19. Háttérszín19. Háttérszín

Lehetőleg egyszínű, nem képfigyeljünk a kontrasztraha kép, hozzá hasonló háttérszín is

célszerű

gyengén-látóknak olvashatatlanmásoknak zavaró

24

20. Űrlapok választási 20. Űrlapok választási lehetőségeilehetőségei

választható elemek eseténha 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ő 21. Mindig a megfelelő elemetelemet

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 22. Designt ne karakterrel valósítsunk megvaló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 23. Navigációs elemek helyzetehelyzete

Navigációs menüt felsorolással adjunk megA 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 24. Csak az aktuális almenüpontokalmenü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űk25. Átméretezhető betűk

Ne pixelméretet adjunk meg, hanem relatív mértékegységet

Ekkor a felhasználó átméretezhetmenüből

felhasználói CSS-el

JavaScripttel

30

26. Jól olvasható betűk26. 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őknekhttp://www.mek.iif.hu/porta/szint/muszaki/szamtech/wan/techno/wpdhun/html/wpdtypo.htm

31

27. Navigáció és tartalom 27. Navigáció és tartalom arányaaránya

Ne legyen túl hosszú egy oldalA 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ás28. 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átumok29. Elérhető formátumok

Lehetőleg platformfüggelten formátumokon publikáljunkPDF (ugyanezt TXT-ben is)

RTF

stb

34

30. Képek30. 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ásokAjánlott források

Bártházi András: Irányelvek webfejlesztőknekhttp://weblabor.hu/cikkek/iranyelvek

paramedia.hu