Upload
emery-flores
View
29
Download
0
Embed Size (px)
DESCRIPTION
Irányelvek webfejlesztéshez. (Bártházi András) – Nagy Gusztáv PHP Konferencia RoadShow Kecskemét. Mit veszünk figyelembe?. a megrendelő kívánságai rendelkezésre álló idő és erőforrásaink szakmai szempontok Ezek egymásnak ellentmondhatnak. Kinek lesz jobb?. Vakok, gyengén látók - PowerPoint PPT Presentation
Citation preview
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