Webfejlesztés Szempontok
A webfejlesztés alapjai Miért készülnek weboldalak? Valamit nyújtani szeretnénk a felhasználónak. A webfejlesztés során elsősorban a felhasználók igényeit vesszük figyelembe. Nevezhetjük az önkifejezés eszközének, egyesek már-már művészeti ágnak tartják. A webfejlesztés egy összetett feladat. A weboldal egy multimédiás eszköz, több médiumot is magában hordoz (foglal): szöveg, kép, mozgókép, hang, animáció
Tervezési fejlesztési szempontok Egy színvonalas weboldal elkészítését komoly tervezés előzi meg. Végcél: felhasználók kiszolgálása, ezért is fontos az előbb már említett felhasználók igényeinek kielégítése. A fejlesztés során 7 fontos dologra kell figyelni: 1. Honlaptervezés 2. Navigációs struktúra 3. Oldaltervezés 4. Figyeljünk a látogatók visszajelzéseire 5. Milyen monitort használnak a látogatók 6. Milyen böngészőt használnak a látogatók 7. Az oldal akadálymentesítése, sérültek
1. Honlaptervezés Célok megfogalmazásával kezdődik: kinek szól, mit szeretnénk közölni, mit szeretnénk átadni, a felhasználónak van-e lehetősége interakciókra Látogató fejével gondolkodjunk, kérjünk segítséget (véleményt) ismerőseinktől a tervezés során. Pl.: egy oktatási célú weblap (információ), egy kormányzati oldal (struktúra) vagy pl. egy webáruház között lényeges eltérés van Pl.: egy főiskolai, egyetemi oldal kialakítása során fontos szempontok: Szervezeti felépítés Letölthető dokumentumok Események Hallgatói információk Stb. Jól látható, hogy egy ilyen általános oldal tervezése a legnehezebb
2. Navigációs struktúra Az egyik legfontosabb szempont a tartalmi szerkezet, az oldalak közötti navigáció és az egyes oldalakon belüli navigációs lehetőségek egységet alkossanak. Legyen letisztult és egyszerű, könnyen nyomon követhető. Zavaros struktúra: Célszerű a faszerkezetű struktúra kialakítása:(egyszintű felépítés)
2. Navigációs struktúra Azonban ezzel is vigyázni kell:(többszintű felépítés) Pl. a blog oldalak egyrészt azért is olyan népszerűek, mert ott egy oldalon belül többféle navigáció is megtalálható
2. Navigációs struktúra Fontos többirányú navigáció az oldal rugalmas használatához: Hibás navigáció: Egy lehetséges navigáció: Gondoskodni kell tehát a vízszintes és függőleges mozgás lehetőségéről!
3. Oldaltervezés Ha az eddigi szempontok körvonalazódtak, az egyes oldalakra helyeződik át a hangsúly (részleteire bontás) Az olvasók pásztáznak: a felhasználók kevés időt töltenek az oldalon, amennyiben valami megragadja őket, akkor maradnak. Ezért is fontos az egyértelmű felépítés, és az egyes oldalak lényegre törősége.
3. Oldaltervezés Mi segíti az oldal gyors áttekintését: Kifejező fő és alfejezetcímek Rövid összefoglaló a cím után (ezt a részt szokás kiemelni: félkövér, dőlt) Linkekkel és egyéb jelölésekkel kiemelt kulcsszavak, gondolatok A bekezdéseink legyenek rövidek és lényegre törők A fejezetek legyenek rövidek és áttekinthetők Hagyjunk megfelelő távolságot az egyes bekezdések, fejezetek és címek között A sorok ne legyenek túl zsúfoltak Amennyiben hosszú az oldalunk, segítsük a navigációt linkekkel, kiemelésekkel
3. Oldaltervezés / oldalnavigáció A honlap minden oldalán jól áttekinthető és egységes menürendszer legyen. Ezt általában jól látható helyre rakjuk, az oldal tetejére vagy valamelyik oldalsó részen. Ez az egyes oldalakon ne változzon! Szokás némely esetekben egy helyzetjelző felirat megjelenítése, amely a főoldaltól viszonyított utat írja le, ezt nevezik halszálkás menünek.
3. Oldaltervezés / oldalnavigáció Pl. a weblabor.hu oldalt vizsgálva: A WL logó mindig a kezdőoldalra visz Kétszintű főmenü segíti az eligazodást Halszálkás menü
3. Oldaltervezés Megoszlanak a vélemények az oldal szövegében (tartalmi részében) található linkekről: a fontos dolgok elhelyezkedhetnek a szövegben linkként, vagy legyenek azok is elkülönítve a szövegtől Az oldal aljára fontos hivatkozást ne rakjunk! Alternatív navigáció: blog típusú oldalaknál címkék vagy kulcsszavak használata. A betűméretnek is szerepe van.
3. Oldaltervezés / letöltési sebesség Hiba: fejlesztő saját gépén készíti az oldalt, nem veszi figyelembe az oldal méretét Napjainkban ez már nem olyan nagy probléma, de ezt is figyelembe kell venni. Mobil böngészés egy fontos tényező Egy felmérés szerint a látogatók 7 mp után elhagyják az oldalt, ha az még nem töltődött volna be. Tippek a lassú kapcsolattal rendelkező látogatók megtartásához: Ne használjunk képeket szövegek megjelenítésére, a képek betöltéséig is így olvasható lesz az oldal. Képek méretének megadása az oldal szerkesztésekor Amennyiben táblázatos oldalfelépítést használunk, figyeljünk arra, hogy ne legyen nagy méretű a táblázat, mert az oldal csak a teljes táblázat betöltődésekor fog összeállni.
Oldaltervezés 4. Figyeljünk a látogatók visszajelzéseire Komolyabb weboldalaknál célszerű ilyen lehetőséget biztosítani a felhasználóknak 5. Milyen monitort használnak a látogatók A www.ektf.hu/ oldalt alapul véve, a látogatók 43%-a 1024 x 768-as felbontásban nézi az oldalt, 30%-a 1280 x 1024-es felbontásban, 25%-a 1280 x 960-as felbontásban, a maradék egyéb felbontásban. Ezt is figyelembe kell venni. 6. Milyen böngészőt használnak a látogatók A felhasználók különböző böngészőket használnak: IE (6,7), Firefox, Safari, Opera, stb. Figyelni kell, hogy a különböző böngészőkben megfelelően nézzen ki az oldal
Weblapok ergonómiája Letöltési méret: lélektani határ (<200 KB) Letöltési idő: szakirodalmak szerint < 2 mp Méret nagyságának okai: információk szöveges formában HTML kód mérete: csökkenthető a CSS kiváltásával, táblázatos oldalfelépítés elhagyásával Rögzített oldalszélesség: egy-egy oldalt sokan, sokféle eszközön néznek meg az oldalnak alkalmazkodnia kell a különböző felbontásokhoz Oldalhosszúság: nagy tartalom esetén kategorizáljunk Rögzített méretű szöveg: a méret változtatása miatt se rakjunk szöveget a képekre Keretek használatának hátrányai: Nehéz nyomtatás Nem rugalmas (sok eszközön rosszul jelenhet meg) A webcím nem ír le állapotot (nem lehet címezni az oldalt link)
Irányelvek weboldal kialakításakor (forrás: weblabor.hu) A következő pontok hasonlóak az USA-ban kötelező szempontokhoz az állami weboldalak fejlesztésekor, nagy hangsúlyt fektetnek a vakok, gyengénlátók, színtévesztők segítésére. 1. Kezdőlap kialakítása: kerüljük a Flash,Java,Javascript használatát amennyiben mégis használunk, biztosítsunk lehetőséget a továbblépésre visszatérve az oldalra fárasztó (unalmas) az állandó kikerülés keresőrobotok: legyen HTML link az oldalon, hogy a robotok indexelni tudják a tartalmat
Irányelvek weboldal kialakításakor 2. Keret (frame) mentesség Beléptetés bonyolult (Get, Post változók) Felépítés kusza lesz Webcím nem ír le állapotot 3. Töltelék képek használata nem javasolt Pl. táblázatos oldalszerkezet kialakításánál, helyette CSS használata Használata esetén: alt= tulajdonság felolvasó szoftverek figyelmen kívül hagyják 4. Image map-eket ne használjunk A nem látó felhasználók számára használhatatlan lesz az oldal 5. CSS nélkül is használható oldal (extrém esetekben ) Egyes felolvasó szoftverek nem támogatják a CSS formázó elemeit
Irányelvek weboldal kialakításakor 6. Szabványosság Igényeseknek: CSS 2, XHTML 1.0 7. Képek hozzáférhetősége Képeknél kötelező az alt tulajdonság használata Amennyiben a kép szöveget tartalmaz, azt ide kell beírni. Ha a kép nem elérhető, vagy karakteres böngészőt (Linux: Lynx) használunk, azt alt fog megejelenni 8. Tartalmak alternatív formában való közzététele A Flash videók, PowerPoint bemutatók, stb. szöveges információit tegyük elérhetővé karakteres formában is. Videóknál rövid összefoglaló szöveget írjunk.
Irányelvek weboldal kialakításakor 9. Navigáció Navigációs elemek ne szerepeljenek Flash formában, vagy ne legyen Javascriptes legördülő menü formában 10. Zavaró elemek mellőzése Fényújság (margue), villogó szövegek (blink), egyéb figyelemelterelő ábrák 11. Javascript nélkül is használható oldal 12. Hang nélküli oldal Ne legyen háttérzenéje az oldalnak, vagy hang alapú visszajelzés zavaró, ill. felolvasó szoftvert nem lehet érteni 13. Formázás ne hordozzon információt Az aktív menüt ne csak színnel jelöljük gyengén látók számára valamilyen plusz karakterrel
Irányelvek weboldal kialakításakor 14. Oldalszerkezet Ne csak vizuálisan jelenjenek meg egymás mellett az egymáshoz kapcsolódó tartalmak, hanem a forrást tekintve is kapcsolódjanak 15. Helyes kód Az űrlapelemek logikailag kapcsolódjanak egymáshoz, pl.: <label for="name">név:</label> <input type="text" name="name" id="name"/> A szövegre kattintva a fókusz a beviteli mezőbe ugrik Pl.: példa(munkahelyi adatok megadása) és ellenpélda (szállás) AgriaMedia 16. Oldaltérkép A honlap oldalainak logikai struktúráját szemlélteti 17. Táblázatok Oldal kialakításánál kerüljük táblázatok használatát