Egy szabadon választott cég weboldalának elemzése (http://educatio.hu) 1. Vizsgálat az általános webergonómiai alapelvek szempontjából 1.1. Megjelenés, nyitóoldal, menürendszer (navigáció) Az educatio.hu weboldalát választottam a weblapelemzési feladat tárgyául. Nagyon tetszik, hogy első megtekintésre végtelenül egyszerű felépítésű az oldal és vizuális megjelenését tekintve nem harsány, nem túlzsúfolt, nem használnak rajta sokféle színt, mégis kitűnően elkülönülnek egymástól az egyes tartalmi egységek. Mikor egy böngésző címsorába begépeljük a weboldal URL-jét: http://edcatio.hu, akkor nagy meglepetésemre nyitóoldalként egyetlen kép kerül a böngészőablakba, melynek egész felülete ugyanarra a linkre mutat. Ugyanarra a linkre, mint a kép jobb alsó sarkában lévő belépés gomb, ami tulajdonképpen nem is egy gomb, csak a képre rá van rajzolva, pontosabban valamilyen grafikus programmal rá van szerkesztve. Egyetlen választási lehetősége a felhasználónak az, hogy belép az oldalra, vagy elhagyja azt a címsorba egy másik URL-t begépelve. A képen a cég neve, egy szlogen pár lelkes diák és a fake belépésgomb található. Az Educatio (http://educatio.hu) weboldal nyitóképe Ma már lejárt az ideje azoknak a nyitóoldalaknak, ahol nem jut a felhasználó a weblapra lépés után közvetlen az első oldalon információhoz. Ergonómiai és használhatósági szempontok szerint ez az oldal teljes mértékben kiküszöbölhető volna, semmi szükség nincsen rá, nem tölt be szerepet, nincsen funkciója, leginkább minden felhasználónak egy szükségesen felesleges kattintást jelent csupán ennek az oldalnak a léte. Gyanítom sok felhasználónak, akik ezt az oldalt rendszeresen látogatják, bosszúságot okoz ez az oldal. A képről a linkre mutató oldal lehetne maga a kezdőlap, a http://educatio.hu/nyilvanossag/hirek_kozlemenyek URL alatti oldal. Ennél jobb választás nem is lehetne nyitóoldalnak, hiszen ezen a lapon találhatóak a hírek és a legfontosabb közlemények.
Talán a szlogen miatt tartják fent a 0. oldalt, viszont annak a belső oldalakon szépen megvolna a helye az Educatio emblémája (logója) melletti üres fehér területen, ha nem is olyan nagy méretben, mit a főoldalon. Az Educatio hír és közlemény oldala Az oldal vizuális megjelenése letisztult, egyszerű, áttekinthető. Két, egymástól vizuálisan (színeiben, folthatásában és elrendezésében egyaránt) jól elkülönített menüt tartalmaz: egy vízszinteset és egy függőlegeset. Kis navigálással kiderül, hogy a fenti vízszintes sávban a fő menüpontok helyezkednek el, s a függőlegesben pedig a fő menüpontokon belül megjelenő almenüpontok. A képen bal oldalon látható menü tehát kizárólag a Nyilvánosság pont kiválasztásakor látszódik és választható. A menük gyönyörűen mutatják, hogy a felhasználó éppen melyik főmenüpontban, és azon belül, melyik almenüben tartózkodik. A menüpontok darabszáma sem sok az oldalon (maximum 9 az elfogadott mennyiség, azaz amennyi még könnyedén áttekinthető a felhasználók számára), teljesen jól áttekinthető a tartalom, a menüpontok elnevezései mögött valóban az arra utaló tartalmak találhatóak. A kenyérmorzsa navigáció megjelenítést nem tartalmaz a rendszer, bár szerencsés lett volna ilyet beépíteni, hiszen vannak almenüpontok és azzal átláthatóbb lett volna az, hogy éppen hol áll a felhasználó, másfelől látszódott a bejárt útvonal is ez esetben. 1.2. Tesztelés különböző böngészőkben A weboldalt Google Chrome-ban, Internet Explorer-ben, Mozilla Firefoxban és Opera böngészőben teszteltem. (Érdemes lett volna még Safari-ban és egy korábbi Internet Explorerben is tesztelnem az oldalt, idő hiányában maradt el mindez.) Találtam egy hibát, amely az eltérő böngészőkben eltérő módon mutatkozik meg.
Google Chromban megtekintve az oldalt Google Chromban egy feleslegesnek tűnő téglalap látható a Szolgáltatás menüpont alatt, első rátekintésre egy form beviteli mezőjének tűnik, de valójában egy linkkel ellátott terület, amire, ha rákattintunk eljutunk az Nemzeti Fejlesztési Ügynökség (http://nfu.hu) weboldalára. Firefoxban szépen látható a link. Firefox-ban megtekintve az oldalt szépen megjelenik a link
Explorerben megtekintve szintén hibásan látszódik a hivatkozás Operában megtekintve szintén hibás a hivatkozás megjelenítése Összességében azonban maga a link, minden böngészőben működik, és valami féle képpen látszik, hogy azon a területen van valami, ez még mindig zerencsésebb, mint ha a kívánt oldal nem volna elérhető. (Érdemes, és fontos volna minden böngészőben úgy ellenőrizni a megjelenést, hogy kikapcsoljuk a stílusokat (ezzel láthatóvá válna, mennyire akadálymentesen olvasnák fel a karakterolvasók a szöveget és az, hogy minden érdemi információ szöveges formában is megjelenik-e az oldalon, nem csak esetleg képeken. (A mailcím jó, ha képen jelenik meg, mert úgy nem találnak rá a keresőrobotok.), majd kikapcsoljuk a JavaScriptek alkalmazását. Idő hiányában, most ezt sem végeztem el.) 2. Ellenőrzések 2.1. FireBuggal a design felépítésének az ellenőrzése A weboldal dizájnjának felépítése sajnos táblázatos módszerrel történik. Ami a Firefox Firebug kiegészítőjével tisztán látható.
Hiba, hogy a táblázatban nincsen summary, azaz tartalmi összefoglaló, de hát másfelől érthető is, hiszen mi volna a címe? Design?. Mivel a dizájn felépítésére szolgál a táblázat így nem volna értelme a fejlécek jelzésének sem <th> tag-gel. FireBug használata Firefox alatt Emellett megállapítható, hogy a weboldal dizájnja fix szélességre lett tervezve. Manapság viszont érdemesebb lenne a liquid vagy a responsible megoldások használata, melyek megjelenése alkalmazkodik az adott eszközök illetve az adott böngészőablak szélességének méreteihez. A liquid optimálisan kihasználja (amennyiben a kód helyesen van megírva) a számára rendelkezésre álló helyet szélességében, a responsible, pedig a rendelkezésére álló szélességnek megfelelően változtatja a megjelenítést, ha szükséges például kevesebb és/vagy keskenyebb oszlopokba szervezi a tartalmat, vagy a számítógépen megjelenő vízszintes menüket függőleges menüként jeleníti meg, és így tovább. A különbözőségek a böngészőablakok méretének lekérdezésére kapott eredményektől függ, különböző.css-sel oldják meg a különböző féle megjelenítéseket. 2.2. A Firebuggal a kód ellenőrzése Css-ben látható a h1 definiálása, viszont a HTML kódban nincsen használva, helyette a címek sajnos <p> class-ok megadásával van létrehozva. Ez nem jó, mert szemantikusan nincsen megfelelően tagolva a szöveg. Továbbá a Jaws és más karakter-felolvasók így nem fogják megtalálni a headereket, azaz nem lehet kigyűjteni az oldalakon a címeket.
Létezik a <h1> definiálása a css-ben, viszont a HTML-ben mást használnak A <strong> tag-gel való kiemelést helyesen használják az oldalon, jó, hogy nem a <b> tag van erre a célra alkalmazva. Előbbi szemantikus kiemelést is jelent! Bár sokkal inkább szerencsés lett volna, ha a Közoktatási szolgáltatások: pont nem stronggal, hanem valamely címsorral (pl. <h2-vel>) lett volna megvalósítva. Az <em> szintakszis-kiemelést nem alkalmazzák az oldalon.
Helyes a kiemelés használata 2.3. W3C HTML validátor Meglepő volt számomra, hogy a letisztult, szép dizájn mögött nem állnak helyes kódok. A W3C HTML validátorában megtekintve az oldalt összesen 31 hiba található. Ezek nagyon alapvető hibák, p.: hiányzik a DOCTYPE bejegyzés, elmaradnak gyakran a jelölők utáni a záró jelek (nagyobb jel), rendszeresen elmaradnak a paraméterek értékei előtt a nyitó idézőjel, így azok rendszeresen páratlanul szerepelnek. A <hr /> üres tag esetében például hiányzik a lezáró per jelzés: /. Továbbá a <div> tageken belül megadott id attribútumok értéke is pontatlan! Kíváncsi voltam, hogy a szájt egy másik, egyszerűbb oldalán található-e hiba a validátor szerint, hiszen lehetséges, hogy a 31 hiba csak a két menü együttes megjelenése okán került elő. A másik, validátornak megadott cím a http://educatio.hu/cegunk egyszerű oldal volt, ahol nincsenek almenüpontok, csak emblémák egymás alatt. Sajnos ezen az oldalon 37 hiba volt található.
A w3c.org HTML validátora a weboldal ellenőrzése utáni eredmény kijelzésével A w3c.org HTML validátora a hibákat lebontva mutatja 2.4. W3C CSS validátora Tekintsük meg, hogy a W3C CSS validátora szerint miként fest, azaz mennyiben helyes az oldalhoz tartozó stílusállományok kódja. Kitűnő. Nincsenek hibák!
A CSS validátor szerint megfelelő az oldal 2.4. Achecker, akadálymentesség ellenőrző Az achecker amely oldallal akadálymentességi szempontból vizsgálhatóak a weboldalak szerint 21 hiba található az oldalon, ezek zömét az adja, hogy az <img> tagekhez tartozó alt attribútumoknak nincsenek értékek megadva, azaz képekhez nem tartoznak alternatív szövegek. Probléma az is, hogy a HTML-kódban, vannak a megjelenítést szolgáló tartalmak is, azaz a <body> tag attribútumaiként van megadva a weboldal háttérszíne, szövegszíne, margói, ezeket.css állományokban kellett volna megadni, nem pedig a HTML kódban. Hasonló problémát talált még az achecker: a HTML kódban <div> és <span> elemek szerepelnek. Nem helyes, ha a tartalomért (HTML) és a megjelenésért (CSS) felelős kódok össze vannak keverve, ezeket minden esetben fontos elválasztani egymástól.
2.5. Colour Contrast ellenőrző Achecker akadálymentesség ellenőrző működésének eredménye 2.6. Wave Tekintsük meg afirefox akadálymenteség ellenőrző szolgáltatásainak kijelzését az alábbiakban. 2.7. Jaws Firefox Wave használata közben