1 Szakdolgozat Miskolci Egyetem A Web design haszna Web áruházak üzemeltetésében Készítette: Er s Tamás Mihály 3. Évfolyam. Programtervez Informatikus...
Készítette: Er®s Tamás Mihály 3. Évfolyam. Programtervez® Informatikus Szak
Témavezet®: Dr. Pance Miklós (egyetemi docens)
Konzulens: Dr. Házy Attila (egyetemi adjunktus)
Miskolc, 2010
Miskolci Egyetem
Gépészmérnöki és Informatikai Kar Alkalmazott Matematikai Tanszék
Szám:
Szakdolgozat Feladat
Er®s Tamás Mihály programozó informatikus jelölt részére. A szakdolgozat tárgyköre: A szakdolgozat címe:
Weboldal szerkesztése és üzemeltetése
A Web design haszna Web áruházak üzemeltetésében
A feladat részletezése:
Ismerje meg a Web design általános elveit. Készítsen mintaalkalmazást ezen elvek meghatározott területen alkalmazhatóságának bemutatására nyílt forrású Web fejleszt® eszközzel. Dolgozzon ki tesztelési stratégiát.
Témavezet®(k):
Dr. Pance Miklós (egyetemi docens)
Konzulens(ek):
Dr. Házy Attila (egyetemi adjunktus)
való
A feladat kiadásának ideje:
................................. szakfelel®s 2
1.
szükséges (módosítás külön lapon) A szakdolgozat feladat módosítása nem szükséges
...................... dátum 2. A feladat kidolgozását ellen®riztem: témavezet® (dátum, aláírás): ............................ ............................ ............................ 3. A szakdolgozat beadható: ...................... dátum
Habár az internetes tömeges elterjedése alig egy évtizede zajlik, de már így is többszáz millió azon oldalaknak és webes alkalmazásoknak a száma, amik bárki számára eléreht®ek és használhatóak, de ezenkívül rengeteg olyan oldal is létezik, amik privát kezelés alatt állnak - ezeket hívják intranetes oldalaknak. Egy óriási cégen belül akár több, mint egymillió az intranetes oldalak száma! Szerintem bárki számára így érthet®, hogy miért is szükséges rendet teremteni ezen nagymennyiség¶ oldalak között és bevezetni szabályokat, amiket célszer¶en alkalmazni lehet a rend látszólagos fenntartása érdekében. Ezen szakdolgozatom ezért azzal a céllal született, hogy tájékoztatást nyújtson ezen alapvet® design-szabályokról, hogy ezáltal bárki el tudja majd készíteni a saját kisebb vagy nagyobb oldalait, webalkalmazásait ami képes legyen fennmaradni ebben a kaotikus weboldal-halmazban. Valamint mivel a mai rohanó világban az embereknek egyre kevesebb szabadidejük van, így manapság a kisebb-nagyobb vásárlásaikat is a világhálón intézik, ezért ne is csodálkozzunk azon, hogy jelenleg is az egyik legelterjedtebb webalkalmazás a netes áruházak, ezért itt külön ki is fogok térni arra, hogy milyen el®írásokat és tanácsokat érdemes betartani egy webáruház készítése közben, hogy ezáltal mégjobban garantálva legyen ezen wealkalmás hosszú és sikeres életbenmaradása. Az alábbiakban kdierül, hogy hogyan is kell elkészíteni egy webalkalmazást úgy, hogy lehet®leg minden szabálynak megfeleljen, kinlézeti és tartalmi szempontból tetszet®s és információban gazdag legyen. Lesz szó arról is, hogy az oldalaknak milyen címeket is adjunk, hogy például a könyvjelz®k használatánál is könnyen be lehessen azonosítani az oldalunkat, vagy például milyen struktúrát próbáljunk létrehozni az oldalak között, hogy a felhasználó számára minél könyebb legyen a megfelel® navigáció. Végezetül mellékeltem egy általam készített webáruház modellt is, ahol gyakorlatban be is mutatom azokat a szabályokat és el®írásokat, amiket egy webalkalmazás készítése közben illik be is tartani egy tervez®nek. Az oldalakat PHP formátumban írtam meg, adatbáziskezelésre My_SQL-t használok. A teljes rendszer felhasználására megfele® jogosultság szükséges, ami könynen megszerezhet® azáltal, ha a NEPTUN-kódom (vagyis:IEDBZO) kerül beírásna a felhasználói név és jelszó esetén a bejelentkezés során. Az áruházat igyekeztem úgy kialakítani, hogy minél gyorsabb és könnyebb legyen a felhasználása és kinézetileg is minél igényesebben nézzen ki, ezáltal mind egy megjelenésben, mind egy felhasználásban igényes alkalmazás legyen. További kellemes id®töltést kívánok ezen szakdolgozat elolvasásához és a mellékelt webáruház felhasználásához, és sok sikert kívánok minden leend® webalkalmazás8
fejleszt®nek és remélem, hogy az írásommal sokat segítettem nekik a terveik sikeres megvalósítsához.
9
2. fejezet Téma elméleti kifejtése
2.1. Gra kus és Multimédiás elemek használata 2.1.1. Képek és háttér
Egy megfelel® design kialakítása során fontos szerepe vannak a megfelel® mennyiség¶ és min®ség¶ képek használatának, valamint a megfelel® háttérnek ügyelve arra, hogy az oldal betöltése se legyen lassú és a tartalom is a látogató számára olvasható és élvezetes legyen. Ha gyorsan betölthet® képeket alkalmazunk, akkor lehet®leg kerüljük a túlzsúfoltságot is, így ennek az elkerülése érdekében ajánlott üresen hagyott helyeket alkalmazni, amik segíthetik a felhasználót az átláthatóságban. Továbbá célszer¶ olyan elemeket elhelyezni, amik nem x méret¶ek, hanem a nagyságukat százalékban vannak megadva, így biztosítva azt, hogy megfelel® arányok mellett tudjon az oldal elemei megjelenni különböz® platformok esetén. Célszer¶ a gra kát visszafogottan használni, és lehet®leg kevés gra kai elemet jelenítsünk meg, bár ez nem még jelenti azt, hogy ilyen feltételek mellett sem tudunk egy jobb küllem¶ oldalt létrehozni. Különböz® képek helyett ajánlott azonos képeket felhasználni, mivel ezáltal egy eleve betöltött kép már gyorsabban fog megjelenni, mivel a felhasználó helyi gyorsító tárából könnyebben fog betölt®dni. Ha a kép esetleg még nem tölt®dött be, akkor is próbálkozzuk meg az oldalt úgy kialakítani, hogy az oldal fels® része értelmes legyen, ezáltal a felhasználó már el®re tudni fogja, hogy milyen oldalra is lépett és hogy az adott oldal kinek a tulajdonában is áll. Képek esetén ajánlott az ALT szöveges attribútum használata, ami lényegében egy olyan szöveg, ami a képkereten belül akkor íródik ki, amikor még a kép nem tölt®dött be. Ezáltal a kép nélkül is meg lehet állapítani, hogy mi fog majd a kijelz®n megjelenni. Minden képhez és táblázathoz kötelez®en meg kell adni a WIDTH és a HEIGHT attribútumokat, hogy a lassabb betöltés esetén egyfajta vázat a böngész® el®re meg tudjon jeleníteni, így betöltés közben a szöveg eleve stabil helyzetben fog majd maradni és nem fog össze-vissza ugrándozni. Továbbá ajánlott a bonyolult táblázatokat sok kisebb táblázatra bontani. Fontos, hogy több képpel is szolgáljunk egy termék kapcsán, mivel a vásárlók sajna nem tudják él®ben megnézni az adott termékeket, és így legalább több képet szemügyre véve azt a terméket el tudják jobban képzelni. De lehet®leg az összes képeket a termékkel kapcsolatos oldalon helyezzük el, a többi oldalon, ahol a termékek említésre kerülnek, ott elég egy olyan képet is elhelyezni, ahol az adott termék a legjobban látszódik. 10
2.1. Gra kus és Multimédiás elemek használata Próbáljunk ellentétes színeket használjuk a szöveg és a háttér elkülönítésére. A háttér színe lehet®leg legyen nagyon nom mintázatú, nem túl "kiemelked®" vagy inkább legyen egyszín¶, mivel egy felel®tlenül választott háttér zavaró lehet az olvasás szempontjából, f®leg olyan esetekben, amikor a háttér annyira észrevehet®, hogy a szemünk inkább a háttérre próbál fókuszálni, és nem a szövegre. Továbbá kerüljük el azt is, hogy a háttér egyes színeibe beleolvadjon a szöveg, mert akkor még nehezebb kikövetkeztetni, hogy mi is van odaírva. 2.1.2. Animációk
Lehet®ség van továbbá animációk elhelyezésére, viszont ezek túlzott használata a weboldalon nagy felel®tlenség lenne, mivel ezek egy elég zavaró és túlzsúfolt felhasználói felületet eredményezhet. A legtöbb ilyen multimédiás kiegészít®k nagyságuk miatt a letöltést is lelassíthatják, ezért inkább a lassan letölt®d® fájlok esetén jelezzük az adott fájl nagyságát és video-, valamint egyéb multimédiás fájl esetén az id®beli hosszát. Minden multimédiás fájl esetén célszer¶ egy rövid szöveges ismertet®t is elhelyezni, hogy ezáltal is tudja majd a felhasználó, hogy mit is fog letölteni, ha az adott multimédiás fájlt jobban akarja megismerni. Próbáljunk csak akkor használni animációkat az oldalunkon, ha tényleg szükség van rájuk, mivel ezekre az emberi agy jobban oda gyel, mint a szövegre, így az olvasást nagyon megnehezíti abban, ha az agyunk közbe nem is a szövegre koncentrál, ezért ha van rá lehet®ség, akkor az animáció helyett mozgó képet, esetleg szöveget elhelyezzünk el. Különösen zavaró az az eset, amikor a szöveg egy animációban jelenik meg, vagy szalagfolyam formájában közöljük le az információ egy részét. Ha egyes folyamatoknak több állapottal rendelkeznek, akkor viszont célszer¶ ezt gra kailag szemléltetni, így jobban fel lehet majd fogni, hogy milyen ütemben is következnek be a változások, és hogy egyes ütemekben milyen folyamatok játszódnak le. Térben lejátszódó folyamatokat célszer¶ animált térképek segítségével jelezni. Animált kereteket érdemes akkor felhasználni, ha a szöveg egyes része van épp kiemelve, ezáltal a fontos részek elkülöníthet®ek a többi szövegrészt®l. Ikonsorok esetén csak az az ikon legyen animált, amit éppen kijelöltünk. Kezdeti animációt használhatunk olyan szövegek esetén, amikor valamire fel akarjuk hívni az olvasó gyelmét, de utána már az animációt állítsuk is le, mivel az animált szövegek olvasása is elég nagy nehézséggel járhat. Ne terheljük le az olvasók gyelmét felesleges animált reklámokkal, mert úgysem az érdekli ®ket. 2.1.3. 3D-s elemek
Noha térbeli objektumok ábrázolására van lehet®ség, esetleg 3D-s oldalt is készíthetünk, viszont ilyenkor biztosítsuk a megfelel® mozgathatóságot, hogy az adott objektumokat mindig megfelel®en tudjuk látni és lehet®leg a megjelenítés is tiszta legyen. A gond viszont ott van, hogy egy 3D-s térben eléggé bonyolultan tudunk mozogni, mivel az általunk használt egereket és billenty¶zeteket is csak a 2D-s mozgásra lettek tervezve. Ha ráadásul gyenge a min®sége a gra kának, akkor a távolban lév® objektumokat nagyon nehezen tudjuk felismerni, viszont ha meg túl pontosan ábrázoljuk a dolgokat, akkor meg a mozgás sebessége lehet kínzatóan lassú. Továbbá kerüljük el a 3D-s navigációs felületek használatát, mivel a kezelését elég nehéz 11
2.1. Gra kus és Multimédiás elemek használata elsajátítani, mivel egyes esetekben nehéz annak a kikövetkeztetése, hogy ha valamilyen pontra rákattintunk, akkor az a pont most melyik navigációs testhez tartozik. Eleve sokkal egyszer¶bb a felülnézeti 2D-s rendszerben mozogni és észrevenni a dolgokat, mintsem egy 3D-s hálózatban mászkálnánk, mivel ilyenkor nagyon sok elem eshet épp más elemek által takarás alatt. 2.1.4. Hangok
Érdemes a hangokat magyarázásra vagy segítésre felhasználni, ahol lehet®leg elég legyen az emberi beszéd arra, hogy el tudjuk magyarázni egyes dolgok m¶ködését, és ezáltal ne kelljen videókat használni, amik a hangokkal ellentétben a képerny® nagy részét foglalják le. Esetleg egy jobb hangulat elérésére érdekében használhatunk háttér zenét is, ami az olvasó kedvét jobban megnövelheti és számára így még élvezetesebb lehet az oldalunk meglátogatása. Ha mondjuk egy operáról vagy egyéb zenem¶r®l van szó a honlapunkon, akkor ajánlott egy rövid részletet is elhelyezni az adott m¶r®l vagy a m¶ tartalmát néhány mondatban leírni, hogy ezáltal is biztosítsuk a megfelel® tájékoztatást a látogatónak. Olyan szavak esetén ajánlott a hangokat használni, amiknél a felhasználó nem tudja eldönteni, hogy most hogyan is kell az adott szót kiejteni. Esetleges állapotváltozásokat is kísérhetik különböz® hangok, például egy hang jelezze számunkra azt a tényt, hogy valamilyen dokumentum letöltése befejez®dött, vagy azt, hogy egyes mez®ket nem megfelel®képpen töltöttünk ki. A képekhez hasonlóan a hangi elemek esetén is a megfelel® min®ségre kell törekedni, és célszer¶ olyan hangeekteket használni, amik nem túl hangosak de mégis jól észrevehet®ek. 2.1.5. Videók
A videó felvételek használata esetén próbáljuk meg a videók számát csökkenteni, mivel a megfelel® min®ség¶ videók letöltési sebessége elég nagy lehet, viszont a nagyon zavaros, noha elég kicsi és gyorsan letölthet® videók pedig kevésbé hasznosak. Egy rövid videó formájában megadhatunk egy zikai termék ismertet®jét is, ezáltal könnyebben lehet majd elképzelni, hogy hogyan is kell az adott terméket megfelel®en használni. Megint felhívom arra a gyelmet, hogy ügyeljünk a megfelel® min®ség¶ videók felrakására, mivel általában egy felhasználó a legjobb min®ségben és részletességben akarja látnia dolgokat. Továbbá videók esetén ajánlott megfelel® feliratozást is használni, mivel egyes nyelvek egy azon nyelvet nem nagyon ért® számára elég gyors lehet, így esetleg a szöveg nagy részét ezen ok miatt nem tudja majd felfogni. Ajánlott a feliratot a videó alján, egy külön feketével kiemelt mez®be fehér és lehet®leg vastag bet¶kkel elhelyezni, hogy rosszabb min®ség¶ gra ka esetén is olvashatónak maradjon meg. A videók nagysága is legyen minél rövidebb, mivel a video nézése nem jár semmilyen interakcióval a gyel® számára, így feleslegesen pazarolhatjuk a hosszú videókkal az idejüket, ha közbe nem is olyan információra van szüksége, ami a videónkon van rajta. Hosszabb videók esetén célszer¶ a videó alá egy rövid átiratot is írni, hogy mindenki tisztában legyen azzal, hogy a megnézend® videó mir®l is fog szólni. Esetleg a nagyon hosszú videókat célszer¶ feldarabolni, és úgy helyezni el, vagy a videó egyes elemeit apróbb miniat¶rök formájában megjeleníteni, ezáltal is több információt tudunk nyújtani a videóval kapcsolatban.
Egy linknek kijelölt résznek ajánlott rövidnek és tömörnek lennie, mivel gyakran el®fordulhat az is, hogy a felhasználó csak a különböz® linkekre kíváncsi. Hipertext-linkké kizárólag a legfontosabb szöveget célszer¶ alakítani. Ajánlott a linkekhez magyarázatot is írni, hogy a felhasználó minél könnyebben tudja azonosítani, hogy egy adott link milyen típusú oldalra mutat. Ilyenkor ezen magyarázat akkor jelenik meg a képerny®n, ha a kurzor segítségével a megfelel® linkre állunk. Ilyen magyarázatot az alábbi módon lehet írni: Linknek kijelölt szöveg Természetesen a TITLE attribútumot más elemek megmagyarázására is lehet használni, például képek vagy idegen szavak megmagyarázása esetén is hasznos segítség. Egy linkcímbe érdemes megadni azon oldalnak vagy site-résznek a nevét, ahová az adott hivatkozás mutat. Továbbá igyekezzünk a céloldalról leírni mindazon fontos tudnivalókat, hogy ott milyen információkra is lehet majd számítani és hogy milyen a kapcsolata a kiemelt résszel és a jelenlegi oldal tartalmával. És gyelmeztetés is szerepeljen abban az esetben, ha az új oldalt csak bizonyos korlátozások mellett lehet felhasználni, például csak a regisztrált felhasználók léphetnek oda be. Ügyelni kell arra, hogy a linkcímek különböz® böngész®k esetén eltér®ek lehetnek, így csak akkor érdemes linkcímet használni, ha nem egyértelm¶ az, hogy a kijelölt link milyen oldalra is fog majd vezetni. A weboldalakon általában két színt szoktak használni a linkek megkülönböztetése esetén: külön jelölik az olyan linkeket, amiket még nem látogattunk meg és külön azokat, amiket már el®z®leg megnyitottunk. Ajánlott a linkszíneknél a default színeket használni, vagyis a már látott oldalak esetén a piros vagy bordó szín használata, s a még nem látogatott oldalak esetén pedig a kék szín használata terjedt el. Ezen színeknek a honlap többi színéhez ill®en különböz® árnyalataikat is használhatunk, de fontos az, hogy könnyen meg lehessen különböztetni, hogy mi a link és mi nem az. Más színek használatát lehet®leg kerüljük, mivel a felhasználó számára nehezebb lehet a keresést és akár a nem megfelel® színek zavaróak lehetnek annak felismerésében, hogy mely oldalon járt-e már az adott felhasználó, ezáltal a tájékozódás is nagy mértékben romolhat. Sok id® veszhet kárba olyan esetben is, ha valaki véletlenül többször ugyanarra az oldalra téved. Egy oldalra mindig ugyanazzal a linkkel hivatkozzunk! Figyelni kell arra, hogy pl: www.pelda.hu, www.pelda.hu/index.html és egyes esetekben még a pelda.hu is ugyanarra az oldalra mutat, így meg kell azt oldani, hogyha az egyik megnyitódik, akkor a többit is már utána látogatott oldalként jelz®djenek. Nem ajánlott olyan weboldalt tervezni, ami nem engedi meg a felhasználónak azt, hogy az oldalt elhagyja és az sem ajánlott igazán, ha a kilépéskor megjelenít egy olyan ablak, ami az oldal elhagyására gyelmeztet. 2.3.3. WEB-oldal, mint információs csomópont
Felhasználók számára hasznos lehet egy olyan oldal, ahol csak a számukra fontos linkek vannak elhelyezve. Az ilyeneket akár kiindulópontként is használhatják abban az esetben, ha más számukra fontos és hasonló témájú helyekre is el akarnak jutni. Ezáltal is növelhetjük a weboldalunk látogatottságát, hogy lényegében fontos csomópontként is üzemelj az oldalunk. Ajánlott a küls® linkek elhelyezésénél a megfelel® mennyiséget elhelyezni, mivel a túl sok link már zavaró és riasztó lehet a felhasználó számára. Szintén célszer¶ belinkelni az olyan weboldalakat (az úgynevezett supersite-okat) 18
2.4. Oldalak URL címzése és a fejléc is, amik több linket is tartalmaznak de rendezetten elhelyezve. Továbbá minden oldalnak saját és állandó URL-t kell megadni, ezáltal is tudjuk támogatni a bejöv® linkelést, vagyis így más tulajdonban lév® honlap könnyedén tudja reklámozni a mi honlapjainkat, amiért cserébe akár pénzzel is jutalmazhatunk. Abban az esetben, ha megsz¶nne valamelyik oldalunk, akkor azt fontos a felhasználókkal közöltetni és az olyan honlap-tulajdonosokkal is, akik felrakták a linkünket az ®k honlapjára.
2.4. Oldalak URL címzése és a fejléc 2.4.1. URL cím
A gépnek szóló helyzete a oldalaknak az URL címben van leírva. Egy URL f®bb szerkezetét a következ® példa mutatja: http://www.google.hu. Manapság a http:// részt le is szokták hagyni, bár egyes helyeken a www is lehagyható. Az URL legfontosabb eleme a domain-név, amit a http:// után de az els® / el®tt helyezkedik el, ami maga a honlap címe. A többi aloldal a / jel után kell felsorolni. Itt is az oldalak között hierarchikus kapcsolat van. Ajánlott olyan URL nevet adni egy oldalnak, amire ránézve a felhasználónak már legyen valamilyen elképzelése arról, hogy milyen témájú oldalról is szól az adott URL. továbbá az is ajánlott, hogy a URL hierarchia és a navigációs hierarchia elemei között ugyanaz a kapcsolat legyen, vagyis a fentebb említett "CCC Cég -> Output eszközök -> Egerek -> Optikai Egerek -> XXX Egér"-nek megfelel® URL cím legyen a http://www.ccc.org/output/egerek/optikai/xxx. Ezáltal is jobban segíthetjük a felhasználót a navigálásban, mivel így az URL cím is funkcionálhat egyfajta navigációs elemként. Ügyeljünk viszont arra, hogy legtöbbször a URL esetén fellép a kis és nagybet¶ érzékenység, így a nagybet¶kkel óvatosan kell bánni és kerüljük a kevert kisnagybet¶s címeket is, mert akkor sokkal nehezebb lehet az adott címet meghatározni. Továbbá abban az esetben, ha esetleg valamelyik oldalunk megsz¶nne, akkor az adott oldal URL-jének beírásakor valamilyen gyelmeztet® szöveget jelenítsünk meg, ami tájékoztatást nyújt majd az adott oldal megsz¶nésével kapcsolatban, ami esetleg leírja az oldal megsz¶nésesnek az okát és esetleg felajánlást tesz más, hasonló témájú oldalakra. Ha meg például az adott oldal más helyre költözött, akkor egyb®l az-az új helyen lév® oldal tölt®djön be. Lehetséges egy oldalnak több URL-t is megadni. Ez abban az esetben jó, ha bizonyos id®közönként új információs honlapokat készítünk, és minden id®szaknak készítünk egy saját weboldalt saját állandó URL-címmel és lesz egy olyan állandó URL-cím is, ami mindig az aktuális oldalra mutat. 2.4.2. Aktuális oldal címe
Minden egyes HTML dokumentum esetén a fejlécben meg lehet adni az aktulális oldal címét. Erre a célra szolgál a HEAD részben szerepl® TITLE parancs, aminek a használata egyszer¶: <TITLE>A weboldal címe<TITLE> Ezzel a megadott címmel szoktunk általában hivatkozni az oldalakra ezért lényeges, hogy ez a cím megfelel® is legyen. Legjobb egy olyan oldalcím lehet, ami lehet®leg kevés, kb 2-6 szóból áll, de ebb®l már lehessen következtetni az oldal tartalmára. Ezen címek szoktak megjelenni abban az esetben is, amikor egy oldal felkerül a könyvjelz®k közé. Ennek a ténynek köszönhet®en minden egyes oldalunknak legyen saját címe, 19
2.5. Navigáció ami a megfelel® navigáció esetén is hasznos lehet. A cím legels® szava mindig legyen olyan, hogy megfeleljen a felhasználók igényeinek és a cím eleje hordozza a megfelel® információt az oldallal kapcsolatban. Ajánlott a címek elejér®l lehagyni a nével®ket (A, Az, Egy), mivel ezek a könyvjelz®k használata során elég nagy gondot jelenthetnek, mivel így rendezetlenül fognak az oldalak címe megjelenni, mert sokhelyütt a könyvjelz®k listája ABC- sorrendben jelenik meg, és így sok oldal fog az 'A' vagy az 'E' kezdés¶ részhez tartozni. Elég gyakori az olyan oldalcímek, amik az oldalon belüli szövegkörnyezetb®l van kiragadva. Sokszor a felhasználók inkább végigfutnak a f®címeken, és csak azon oldalakat olvassák el, ami számukra érdekes lehet, ezért is jó az, ha az olvasó minél többet tud meg az oldal tartalmáról kapcsolatban a f®cím segítségével. A f®címeknek például e-mailek esetén is nagy jelent®sége van, ahol a tárgy részben kell ezen f®címet megadni, mivel elég sok e-mailt szokott egy felhasználó naponta kapni, és sokszor ha számukra érdektelen tárgy-cím¶ e-maillel találkoznak, akkor inkább egyb®l kitörlik, mintsem elolvassák. A megadott f®cím legyen értelmes, és ne valamilyen nehezen felfogható vagy kétértelm¶ szöveg. A f®cím els® szava legyen a cég vagy egy személy neve, vagy azzal a fogalommal, amir®l az oldalunk szól.
2.5. Navigáció A világháló egy óriási és világméret¶ navigációs rendszer. Fontos, hogy valamelyik oldalunkra kattintva a felhasználó tudja azt, hogy épp milyen honlapon is van. Minden egyes oldalt ezért ajánlott a megfelel®képpen azonosítani, aminek a legegyszer¶bb formája a cég logójának, esetleg még a cég nevének a feltüntetése. Ajánlott olyan elrendezés¶ oldalakat létrehozni, amik a mások által üzemeltetett oldalakhoz hasonlítanak, mivel így minden felhasználó számára egyb®l világossá válhat, hogy hogyan is kell a honlapunkat használni, mivel elég lesz nekik a mindennapi rutinokat alkalmazni és nem kell semmi olyan dologgal összetalálniuk magukat, amit esetleg nem tudnak megoldani, ezáltal elhagyásra késztetni ®ket az oldalainkról. Hogy a felhasználó már el®re tudja, hogy milyen oldalakon járt már, így ezt a megfelel®, és lehet®leg szabványos linkszínekkel próbáljuk számára egyértelm¶vé tenni. 2.5.1. Hiperszöveg hivatkozás típusai
a) Beágyazott linkek, amik a szövegben aláhúzott szövegrészekr®l adnak további fontos információt b) Struktúrális linkek: az oldalaink közötti hierarchiában az adott oldal "gyerekeire" és "testvéreire" mutatnak. Minden oldalon azonos szerkezeti linkek szerepeljenek, hogy a felhasználó tudja, hogy milyen szerkezeti navigációs lehet®ségekre számíthat. Ajánlott olyan linkeket használni, amelyek a felhasználó számára megadják az aktuális és a céloldal viszonyát a site szerkezetéhez képest c) Asszociatív linkek: abban nyújt a felhasználónak segítséget, hogy az aktuális oldalhoz hasonló vagy ahhoz kapcsolódó oldalakra jusson Minden egyes navigációs módszernek a szerepe az, hogy megjelenítse a felhasználó jelenlegi helyzetét és és a továbbhaladási lehet®ségeit is megmutassa. Ajánlott a hierarchikus szerkezet¶ oldalakat alkalmazni, vagyis minél lentebb vagyunk a hierarchiában, annál részletesebb információt tudhatunk meg egyes dolgokról. Ajánlott 20
2.5. Navigáció minden egyes új oldalt a már régebben létrehozott szerkezetbe beilleszteni, különben káoszhoz vezethet ennek a hiánya. A hierarchia legfels®bb pontja legyen maga a Honlap, a második szinten pedig a f®kategóriák legyenek. A harmadik szinten legyenek a különböz® f®kategóriákon belüli termékcsaládok, és az azt követ® szinten pedig maguk a termékek legyenek. Az ötödik szinten egy-egy termékr®l szóló fontos információknak érdemesszerepelnie, például az a speci kációjának vagy a pontos árának. 2.5.2. Szélességi navigáció és mélységi navigáció
Els® esetben jobbára egy baloldali színes sávban a site legfels®bb szintjeinek a felsorolása történik. Ezáltal a felhasználók minden egyes oldal esetén már el®re megismerhetik az oldalunk összes f®bb szolgáltatásait. Mélységi navigáció esetén a honlap és az aktuális oldal közötti "úton" lév® összes bels® elem fel van tüntetve, mint különböz® linkek, így ezáltal is könnyebb lehet az aktuális oldalt beazonosítani és a hierarchiában is könnyebb lehet a tájékozódás. Ezen navigáció kezelése nagyon egyszer¶en elsajátítható, és minimális helyigénnyel is rendelkezik. Viszont ilyen navigáció csak a hierarchikus oldal-szerkezetnél lehet felhasználni. Nagy méret¶ de hasonló szerkezet¶ oldalak esetén is elég lehet egy egyszer¶ navigációs felület használata, de ha már különböz® méret¶ és egymástól elüt® tartalmú oldalaink vannak ,akkor célszer¶bb mégis egy bonyolultabb navigációnak a használata. 2.5.3. Felhasználó viszonya a navigációhoz
Navigáció esetén a legfontosabb dolog, hogy egy olyan navigációs rendszert hozzunk létre, ahol a felhasználó számára biztosított a szabad mozgás az oldalak között és rugalmas is legyen az. Figyelni kell arra, hogy akár a tervez® által el®re nem is gondolt útvonalon is akarhat a felhasználó közlekedni! Ha a felhasználó számára nem megfelel® a navigáció, akkor akár a könyvjelz®k felhasználásával saját maga is létrehozhat egy kis oldalt, ahol már könnyebben tud majd eligazodni, hisz eleve ® határozza meg, hogy hogyan is tudjon haladni a számára legpraktikusabb módon. Elég ritka az olyan eset, ahol a felhasználók néhány percnél tovább maradnak egy oldalon, inkább újabb és újabb lehet®ségek után néznek. A felhasználó sosem akarja azt megtanulni, hogy hogyan is kell egy másképp m¶köd® navigációs rendszert használni és a súgó el®hívása és a benne való keresés pedig nagyon sok idejét veszi el feleslegesen. Számára a navigáció lehet®leg legyen egyértelm¶, így ezért is célszer¶ olyan navigációs rendszert létrehozni, ami nagyban hasonlít a mások által készített oldalak navigációihoz, hogy ezáltal is rutinosabb legyen a felhasználó az oldalaink közötti mozgás során. 2.5.4. Könnyebb navigáció eléréséhez tanácsok
Elég sok olyan oldal van, ahol feleslegesen sok linket ajánlanak, amik lehet, hogy nem is nagyon a felhasználó által keresett információkkal foglalkoznak. Sokszor még a navigáció is hiányos lehet egy oldal esetén, esetleg a navigáció használata lehet, hogy nem egyértelm¶ vagy bonyolult, esetleg nem fedi le teljesen az oldalak közötti kapcsolatokat. Eligazodás könnyítésére néhány tanács:
21
2.6. Keresés a) Használjunk aggregációt, ahol egyetlen egységet jelenítünk meg, ami több kisebb egység összességét jelöli. Ennek a megoldása elég könny¶ egy oldalon belül, viszont oldalak között az ilyen fajta összevonás már nehézkes lehet. b) Összegzés, aminél a nagy mennyiség¶ adatokat mutatjuk be kevesebbel. Ilyenkor használható például az, amikor nagyobb képeket jelölnek kisebb képek vagy teljes dokumentumokat kisebb kivonatok jelölnek. c) Sz¶rés, amikor a nem fontos töltelékeket inkább kihagyjuk, hogy csak a lényegesebb dolgok legyenek meg. d) Rövidítés, amikor mindent az információ bevezet®jén kívül hagyjunk ki és az információ többi részét egy "Folytatás..." linkre kattintva lehessen elérni. e) Reprezentáció, amikor csak a reprezentatív példákat jelenítsük meg, és utána írásban jelezzük, hogy további objektum is van. Nagyon fontos az, hogy ha egy tetsz®leges helyr®l jutottunk el egy oldalra, akkor eleve tudjuk, hogy most milyen oldalon is vagyunk, és hogy az adott oldal tulajdonosa által még milyen oldalak vannak fenntartva, és az oldalak rendszerében épp hol is járunk. A legjobb megoldás erre a már régebben említett hierarchikus elrendezése az oldalaknak. Például ha egy XXX egérr®l szóló weboldalt akarunk elhelyezni a hierarchiába, akkor ajánlott a következ® utat használni: CCC Cég -> Output eszközök -> Egerek -> Optikai Egerek -> XXX Egér. Ezt az alábbi példát esetleg mint navigációs részt fel is lehet tüntetni a fejléc alá, úgy, hogy minden egyes elem egy-egy különálló honlap legyen. Egy másik megoldás lehet a rész-site-ok használata, ami olyan oldalak halmaza, amelyek designja és navigációs mechanizmusa megegyezik. Minden egyes rész-site csoportosulásnak ajánlott, hogy legyen egy kitüntetett honlapja, ami a navigáció során is gyökérelemenek számít. Az is egy elvárt feladat, hogy minden egyes rész-site oldal esetén a fejlécen legyen megadva mind a rész-site honlapjának, mind a f®-site honlapjának a címe. Minden egyes rész-site a felhasználók egyes rétegeihez szóljon abban az esetben, ha maga az oldalak több különböz® témákra sorolhatók, így minden egyes témához lenne egy saját rész-site együttes saját egyedi kinézettel és egy megfelel® navigációval. 2.5.5. Navigáció appletekkel
Az appleteknek két f® kategóriájuk ismert, amiket akár navigáció el®segítésére is fel lehet használni. Ezek a: a) Funkcionális appletek, amelyek mindent®l független mini-alkalmazások, saját állapotátmenetekkel és többszörös rátekintéssel. Ezek sokszor olyan valós adatokkal dolgoznak, amelyek a weboldaltól függetlenül léteznek. Ilyen például különböz® ügyintézések, leltárellen®rzések esetleg szerver-adminisztráció. b) Tartalom appletek, amelyek egy weboldal tartalmával vannak szoros összefüggésben. Például navigációs segít®k is ebbe a kategóriába tartoznak. Az ilyen appleteket célszer¶ azzal az oldallal együtt megjeleníteni, amelyekkel foglalkoznak, a funkcionális appleteket pedig inkább egy külön lapon/oldalon jelenítsük meg.
2.6. Keresés Egyes felhasználók körében elterjedt az a viselkedés, hogy egy honlap megnézése során el®ször egyb®l a keres®felületet keresik meg és inkább oda írják be a keresend® dolgot, 22
2.7. Könyvjelz®k mintsem átfussák az oldalakat és a linkeket. Ezért minden egyes oldal esetén ez a funkció legyen könnyen elérhet®. Keres®felület esetén világosan fel kell tüntetni, hogy épp milyen információk fellelhet®ségére lehet használni. Ezt ajánlott mind a keres®, mind az eredményoldal tetején feltüntetni. Kerüljük a Boole-logikán alapuló keresést, mivel a felhasználók többsége ezzel a keresési móddal nem nagyon tudnak boldogulni. Sajnos elég sokszor fordul az el®, hogy a felhasználók nem tudják rendesen használni a keres®t, sokszor hibásan írják be a keresend® dolgokat. Hozzunk létre egy részletes keres® felültetet, ahol különféle dolgok beállításával tudhatjuk korlátozni a keresést, így maga a keres®program számára is könnyebb lesz majd a m¶velet, mert így sokkal pontosabban fog keresés során üzemelni, mintsem maga a felhasználó adta volna meg a keresend® dolgok egy részét, és nem egy b®vebb csoportját, amit a beállítások segítségével adhat meg. A keres®rendszernek helyesírás ellen®rzést is végeznie kell, így az esetleg hibásan leírt szavak esetén is tudnia kell, hogy mire is gondoltak a szavak megadása során és a keresés közbe jelezni kell a felhasználónak, hogy milyen hibás szó esetén milyen, a keres® számára helyesnek gondolt helyesbítést végzett. Esetleg ha a keres® valamilyen helyesírási hibát vett észre, és több helyes megoldást is tudna ajánlani, akkor ezt az ajánlatott fel is kell tüntetni a felhasználónak, és így a felhasználóra hagyhatja annak a tényét, hogy most melyik helyes megoldást kell felhasználnia a keresés során. Így a keresési találatok száma is kevesebb lesz, mert a sok lehetséges megoldás helyett csak a konkrét megoldásokkal fog dolgozni. Esetleg olyat is meg lehetne oldani ilyen esetekre, hogy ha idegen szavak vagy kifejezések közül lehetne választani, akkor egy kis értelmez® szöveget is megjelenítene a keres®, hogy a felhasználó ezáltal is jobban tudja eldönteni, hogy tényleg a megfelel® szavakra gondolt-e. Minden egyes találat során el®ször a találatok listáját a legjobb oldalakkal kell kezdeni és utána kell haladni a kevésbé biztos oldalak felé. Itt érdemes oda gyelni arra, hogy egy oldalnak különböz® URL címe is lehet, így ilyen esetekben csak egy eredményt ajánlott megjeleníteni. Találatok sorrendbeállítása közben a két legfontosabb ténynek annak kell lennie, hogy a talált oldalak mennyire témába vágóak és hogy milyen min®ség¶ információkat nyújtanak. Esetleg egy oldal látogatása után meg lehetne kérdezni a felhasználótól, hogy milyennek is értékelné az oldalt, így további keresések közben ezt a tényt a keres® gyelembe venné, mikor a találatokat sorrendbe helyezi. Ajánlott olyan esetekben összevonni a találatokat, ha azok egy rész-site-on belül helyezkednek el, ezáltal is rövidebb és könnyebben áttekinthet®bb lenne a keresési lista. Minden oldal esetén célszer¶ egy összefoglaló szöveget megjeleníteni, hogy a keresés után a felhasználó ezáltal is megtudja azt, hogy az adott adott oldal mir®l is szól, és hogy így érdemes-e megnézni külön az oldalt, vagy inkább a következ® keresési találatot nézze meg. Egy ilyen összegzést az oldal fejlécében kell megadni, a következ® formátumban: <META NAME="description" CONTENT="Az oldal tartalmának összegzése"> Vigyázni kell, hogy nehogy túl hosszú legyen ez az összegzés, mivel általában egy keres®program kb. 150-200 karaktert tud megjeleníteni. A fejlécben akár kulcsszavakat is adhatunk meg, amiket a keres®programok fel fognak használni a keresés közben. Elég gyakori szokás a felhasználók körében, hogy csak egy-két szavas dolgokra keresnek rá, így a tervez® által megadott kulcsszavaknak lehet®leg rövideknek, tömöreknek és lényegre tör®eknek kell lennie. Esetleg ha egy szónak több alternatív formája is van, akkor azokat is adjuk meg, mert nem lehet tudni, hogy egy adott fogalmat egy felhasználó konkrétan milyen szavakkal fogja leírni.
23
2.8. Intranet
2.7. Könyvjelz®k Az web-böngész®k egyik nagy hibája az, hogy a jelenlegi felhasználói felületek stílusában készültek. Egyik f® gond az, hogy a könyvjelz®k használatakor eléggé nehézkes megoldás az, hogy legördül® menü segítségével kapjuk meg a könyvjelz®ket. Vagy manapság kezd elterjedni az olyan kezd®ablakok, ahol egyes kedvenc oldalaknak mutatják be a kicsinyített másolatát és azok közül lehet választani, hogy melyik induljon el, természetesen a kis képekre való kattintással. Ilyen felülettel rendelkezik az Opera és a Google Chrome. A Google Chrome esetén még kiemelt könyjelz®k elhelyezésére is van egy külön sáv a fejléc alatt. Opera alatt meg egy külön könyvjez® ablak is megnyitható, ahol a könyvjelz®ket lehet rendezni és megnyitni. Ott a könyvjelz®k esetén a fájlrendszerekhez hasonló Mappa-Fájl szerkezet van.
2.8. Intranet Az internetes oldalak a világon bárki számára elérhet®ek, globálisak, habár néha el®nyös olyan oldalakat is üzemeltetni, amiket csak egy zárt kör¶ csoport tud használni. Erre a célra fejlesztették ki a privát intranetes oldalakat, és ezek kicsit publikus kiterjesztését, az extranetet. Amíg az el®bbit a cég alkalmazottjai használnak fel a munkájuk során, addig az utóbbiakat a regisztrált felhasználók számára van fenntartva, ahol majd részletesen tudnak tájékozódni a számukra fontos és hasznos információk között. 2.8.1. Az intranet tulajdonságai és felhasználása
Bár sok hasonlóság van egy intranetes és egy internetes oldal tervezése között, viszont nem szabad elfeledni azt a tényt is, hogy amíg az internet a világban él® embereknek szól, addig az intranet meg az adott cég dolgozóinak nyújt hasznos információkat a munkájukkal kapcsolatban. Szintén a cégeknél alkalmazott és kedvelt hálózati típus az extranet, ahol meg a hivatalos ügyek intézése történik. Aki intranetes oldalt készít, akkor annak be kell tartania minden olyasfajta el®írást, ami web-tervezéssel kapcsolatos. Ráadásul azt is gyelembe kell venniük, hogy a tervezésükkel jobban el®segíthetik a dolgozói termelékenységet és a dolgozó számára minél el®nyösebb lehet az oldal használata. El®nyös kinézeti szempontból elkülöníteni a cég internetes és intranetes oldalait, hogy a dolgozó ránézésre meg tudja állapítani, hogy most publikus oldalt néz-e, vagy egy olyat, ami kimondottan neki szól. Ezért is ajánlott, ha külön stílus és sablongy¶jteményt hozunk létre a két esetre, de azért törekednünk kell, hogy mindkét stílus benne legyen a vállalat általános designjába. Hiába fontos, hogy különböz® típusú stílus legyen a két esetben, de el®nyös lehet az, ha legalább megegyezik a menedzsment, így sokkal könnyebb lesz a két gárdának összedolgoznia, ha közös vezetés alá kerülnek. A projektek közötti er®forrásátcsoportosítás és a túlterhelés elkerülése szempontjából is el®nyös az ilyen típusú "együttélése" a két oldalak készítésével foglalkozó csoportnak. Mivel az intranetes oldalak a cég különböz® dolgozóinak szól, így általában egy cégnek akár százszor vagy ezerszer több intranetes oldala lehet, mint internetes. Több részb®l álló cégek esetén minden egyes saját oldalaknak a stílusai és elrendezése különbözhet, viszont létezni kell egy gyökér-honlapnak, ahonnét a cég különböz® részeinek az oldalai elérhet®ek, így egy egységesen megtervezett oldal-rendszernek t¶nhet az majd egész. 24
2.8. Intranet Internetes oldalaktól eltér®en itt kevésbé vannak nagy különbségek az oldalak között. Amíg a világon elég széles skálán mozoghat a különböz® típusú internet kapcsolatok, felhasználók által használt böngész®k és képerny®méretek száma, addig egy cégen belül el lehet azt érni, hogy a cég minden egyes alkalmazottjának ugyanolyan felszereltség¶ gépei legyenek, így ezáltal is könnyebb lehet egy intranetes oldal tervezése, mivel a tervez® számára adottak lesznek azok a tények, hogy milyen platformú gépekhez igazodjon a tervezés során. Ezáltal azt is el lehet érni, hogy mindenkinek ugyanolyan verziójú böngész®je legyen, és ha esetleg valamilyen változás következne be netes szempontból, akkor könnyebb lehet így értesíteni a dolgozókat a változásokról és akár egy adott határid®n belül már mindenkinek az aktuális készlete lenne az adott fontos dolgokból. Intranetes oldalaknál már ajánlott azt is megtenni, hogy a cég szervezeti felosztását tükröz® leírások készüljenek, mivel a dolgozóknak amúgy is ismerniük kellene a szervezet felépítését. Viszont számítani kell arra, hogy lesznek olyan felhasználók, akiknél valamilyen oknál fogva nem lehet azt megoldani, hogy a szoftver vagy hardver az el®írtak legyenek, mivel lehet például olyan eset is, hogy nem minden platformra lehet felrakni egy bizonyos böngész®t. Továbbá olyan is megeshet, hogy valaki az intranetes oldalakat a saját hordozható számítógépén vagy mobilján nézi meg, amik esetében megjelenési vagy egyéb különbségek is el®fordulhatnak. 2.8.2. Bevétel növekedés megfelel® intranet által
Ajánlott minél felhasználó-barátabb intranetes oldalakat létrehozni, mivel ezáltal is növelhetjük a dolgozóink hatékonyságát, ami nagyobb bevételt hozhat a cégünknek. Becsüljük meg a felhasználók drága idejét és ne higgyük azt, hogy jót teszünk azáltal, hogy a felhasználónak hosszú idejébe telik, míg normálisan meg tudja csinálni a feladatát, amit kit¶zött saját maga elé. Noha az intranet használata szinte kötelez® a felhasználó számára, vagyis nincs más lehet®sége, mint az általunk tervezett oldalt felhasználni, de azért próbáljunk törekedni arra, hogy legalább ez az egy lehet®ség is megfelel® legyen számukra és ezáltal is segítsük el® a munkájukat. Így lehet®leg a küls® megjelenés is olyan legyen, ami számukra elfogadható és könnyen kezelhet®. Próbáljunk hatékonyak lenni, az oldalunk tartalma legyen megjegyezhet® és lehet®leg minél kevesebb hibát ejtsük el. Ha esetleg egy legapróbb változtatás is el®nyös lehet a dolgozók számára, akkor inkább tegyük is meg ezt a designba, mivel a sok felhasználó miatt még a legkisebb id®megtakarítás is sok el®nnyel járhat és sok id®t takaríthatunk meg vele összesen. 2.8.3. Intranet portálok
A vállalat f® információs infrastruktúrája az intranet. Ez a leghasználhatóbb hely arra, hogy a dolgozó a munkája során szükséges fontos információkat beszerezze, és az intranet rengeteg valós munkafolyamat kiszolgálására képes. Különböz® osztályok közötti kommunikációs és ismeretszerzés céljára is lehet ezzel a lehet®séggel élni, ezáltal is lehet a vállalatunk hatékonyságát lényegesen megnövelni, hogy így a sok információ mellett elkerülhetjük azt, hogy a dolgozók esetleg véletlenül mást csináljanak, ami aztán sok idejüket fogja elvenni. Egy alacsonyabb szinten lév® dolgozó is sok információhoz tud jutni magasabban lév® szinten, hisz elég lesz neki a megfelel® hipertextre rámenni és máris a fontos dolgok között kutathat. Az ügyvezet®i irányvonalak eredeti változatához is hozzáférést nyújt az intranet, 25
2.8. Intranet ami sokkal hatékonyabb egy ügyvezet® által tartott el®adásnál, mivel eleve sokáig elérhet® lesznek az adatok és nekünk meg szinte semmit sem kell megjegyeznünk ,ami szóban hangzott el. A különböz® szervezetek számára is jobb kommunikációs lehet®ség áll fenn ezen intranet felhasználásával. A cégen belüli információk elérésére kiváló lehet®séget kínálnak a hipertext-linkek. Ajánlott minden dolgozónak intranetes oldallal rendelkeznie, ahonnét meg lehet tudni, hogy épp a cég mely részlegén dolgozik, mi a feladata és eddig milyen munkákat végzett el és milyen eredményeket ért el. Ezen dolgokat is különböz® linkeken keresztül lehessen elérni. Ezeken kívül a dolgozó személyes adatai is legyenek feltüntetve fényképes kiegészítéssel. Egy projektnek szintén ajánlott, ha saját honlapja van, ahol a projekttel kapcsolatos összes lényeges információ fel van tüntetve, például a projekt vezet®inek a neve, a projekt részvev®i, a projekt leírása és el®története, és az ezekr®l szóló oldalak linkjei. Továbbá hasonló módon egy szervezeti egységnek is legyen egy saját honlapja. 2.8.4. Intranet karbantartása
Minden egyes intranetes oldalt ajánlott karbantartani, még a dolgozókról szóló oldalakat is! Nem szabad hagyni, hogy valamelyik csoportnál lemaradás legyen az intranet oldalban, mert ezáltal fél®, hogy nem a legfrissebb információk lesznek elérhet®ek, amik kés®bb nagy zavart okozhatnak az egyes rész m¶ködésében. Ezért is ajánlott a napi karbantartás elvégzése, hogy lehet®leg minden információ a lehet® legfrissebb legyen. Továbbá egy intranetes rendszer m¶ködésének elengedhetetlen feltétele egy megfelel®en m¶köd® keres®rendszer, hogy a kívánt adatokat egyszer¶en tudjuk megkeresni anélkül, hogy most különböz® oldalakat kell átkutatni hosszadalmasan. Továbbá szükségünk van katalógusokra és hírekre is. 2.8.5. Infrastruktúra összetev®i
Az intraneten található összes információt megszerkeszt® könyvtár-hierarchiának fontos szerepe van. Sokat lehet tanulni a Yahoo vagy épp a Look-Smart katalógusszerkezetéb®l, mivel ott elég sok pénzt költenek a megfelel® ergonómiára. Egy intranet összes oldalát indexel® keres®programhoz kapcsolódó keres®mez® is szükséges lehet. Hivatalos oldalakat akár valamilyen speciális ikonnal is lehet jelölni. továbbá az aktuális hírek is fontosak a cégen belül történt dolgokról, vagy akár egy dolgozóval kapcsolatban is. A friss hírekkel el lehet kerülni, hogy sok dolgozó inkább az e-mailt használja új információk szerzésére, mivel ilyenkor elég nehéz az összes üzenetre válaszolni, így viszont mindenki számára minden egy helyen elérhet®vé válik. 2.8.6. Az intranetes design szabványai
El®ször is az egy céghez tartozó intranetes oldalak esetén ajánlott egy minden oldalra kiterjedt design szabvány használata és azt ajánlott ezt be is vezettetni. Érdemes err®l a szabványról minden egyes alkalmazottat értesíteni és továbbá példákon keresztüli elmagyarázás is sokat segíthet számukra megérteni, hogy miért is van szükség ezen szabvány használatára és hogy milyen interakciókat képesek elvégezni, hogy ezáltal a jöv®ben már elég jól tudjanak elboldogulni a intranet rendszer kezelésében. Ilyen szabvány esetén ajánlott eltérni az internetes szabványoktól, hogy ezáltal is jobban meg lehessen különböztetni a cég internetes és intranetes oldalait egymástól. 26
2.10. Nemzetköziség További javaslat egy külön intranetes logó bevezetése, amit minden oldalon feltüntetünk. Ezen logóra rákattintva pedig el lehessen érni a intranet hálózatunk honlapját, ami a navigációs hierarchia csúcsa is egyben, ezenkívül mivel elég nagyméret¶ egy intranetes rendszer, így ajánlott elhelyezni egy keres®felületet is a fontos információk gyorsabb megkeresése végett. Egy cégnél ajánlott, ha van egy mindenki által elérhet® szabványszakért®, aki új designokat is képes átnézni a formális szabályoknak megfelel®en és tud a tervez®kkel konzultálni abban az esetben, ha valamelyiknek esetleg problémái lennének a designnal kapcsolatban. Esetleg fel kell keresni minden egyes projekteket, hogy át lehessen vizsgálni az ® intranet oldalaikat az esetleges hibák elkerülése véget és közbe nom szavakkal az oldalaikat is értékeljük. A szabványt fejleszt®eszközökkel és sablonokkal kell támogatnunk, hogy könnyebb legyen a betartása. Az extranetet fel lehet használni arra a célra, hogy a web-tervez®k onnét el tudják érni és le tudják tölteni az intanet-design szabványt és sablonokat.
2.9. Extranet 2.9.1. Extranetr®l általában
Az extranet az intranet kiterjesztése küls® felhasználók körébe, akiknek különféle speciális hozzáférési jogai vannak és használhatnak különböz® rész-site-okat. Általában vállalati adatok lekérdezésére vagy különböz® termék-ismertet®k miatt érdekl®d® tanácsadók és alvállalkozók kapnak jogosultságot az extranet használatához. Stílusban az extranet inkább az internethez hasonlít és nem az intranethez, mivel ez is részben egy publikus oldal, ahol a vásárlók is gyakran el®fordulhatnak, mint honlap-használók, de azért az internetes és az extranetes oldalak között azért valamiféle megkülönböztetésnek ajánlott lennie. 2.9.2. Az Extranet és az Intranet közötti különbségek
Változatos hardverek és szoftverek fordulhatnak el® a felhasználók között, ezáltal a befolyás az extranet-felhasználó kon gurációjára kisebb. A sávszélesség is lassabb, mivel a kapcsolat a felhasználó gépe és a cég szervergépe között az internet által történik és nem saját hálózaton. A távoli felhasználó élményének nem a központi része az extranet oldalunk, köszönhet®en annak, hogy a sok vev® és beszállító cég más céggel is kapcsolatot szokott tartani, így ®k más extranetet is szoktak használatba venni. 2.9.3. Az Extranet és az Internet közötti különbségek
A cégr®l egy extranet felhasználó már eleve többet fog tudni, mivel az adott céggel már régóta kapcsolatban állhat, ezáltal az üzleti modellt is magába hordozza egy extranet oldal, emiatt még hirdetések feltételére sincsen nagyon szükség. Egy extranetet akár csak egyszer, de speciális célra fogja egy felhasználó használni, vagy akár többször ugyanarra a célra. Az interakciók is egy extranet oldalon sokkal összetettebb lehetnek, köszönhet®en annak, hogy a jobb felhasználás reményében az oldalt használó jobban igyekszik megismerkedni az oldal által nyújtott lehet®ségekr®l.
27
2.11. Hátrányos helyzet¶ek támogatása
2.10. Nemzetköziség A világhálón a vásárló bármely áruházból megrendelheti a termékeket, ha a házhozszállítás számára nem jelent különösebb gondot, így készüljünk fel arra, hogy az áruházunkat a világ bármely tájáról felkereshetik az érdekl®d®k. Ennek értelmében a szöveg nyelvezete legyen egyszer¶, ne legyenek félreérthet®ek a mondanivalók és ne használjunk félreérthet® hasonlatokat sem. Próbáljunk meg az írásunkkal senkit sem megsérteni és mások kultúráit se bántsuk meg, mivel ilyenkor elég nagy felháborodást is okozhat egy vagy több ember számára, vagy akár egy nagyobb csoport nemtetszését is elérhetjük ezzel, ami meg már akár nemzetközi perhez is vezethet. Szerencsére már a kezdetek óta gondoltak a nemzetköziségre, így már a legels® HTML verzióba bele voltak már építve a nemzetközi karakterek, és egy oldalon akár japán és kínai karakterek megjelenítése sem okozhat gondot. A különböz® id®zónák miatt ha megadunk egy id®pontot, akkor tüntessük fel, hogy melyik id®zónáról is van szó, esetleg azt is kiírathatjuk, hogy egyes id®zónáktól mekkora az eltérés. Mivel a dátumot is több féleképpen szokás leírni (például külön verzió van az angoloknál és külön az amerikaiaknál), ezért a félreértések elkerülése végett írjuk ki a hónap nevét szövegesen. Ajánlott minden egyes oldalt a világon legtöbbet beszélt nyelvekre lefordítani (például angolra, spanyolra, franciára...), valamint ha más nyelvterületekr®l is érkeznek nagyobb számban vásárlók, akkor az ® nyelvükre is célszer¶ egy fordítást elvégezni. Bár sokszor egy nagyobb cég sem engedheti meg magának, hogy minden oldalt lefordít, így általános eset az, hogy csak a lényegesebb oldalak kerülnek lefordításra. Három mód létezik arra az esetre, ha tájékoztatni akarjuk a vásárlókat, hogy milyen nyelven is érthetik el az oldalakat. Az egyik ilyen mód, ha egy bevezet® oldalon válaszhatóak ki a különféle nyelvek. Ezt a megoldást akkor ajánlott használni, ha nem tudjuk eldönteni, hogy most melyik legyen a f®nyelv. Egy másik ilyen megoldás, ha csak a honlapon elhelyezünk egy nyelvválasztó menüt, de harmadik alternatívaként akár az összes oldalra elhelyezhetünk egy ilyen menüsort. Elég gyakori mód a nyelvek feltüntetésére a zászlók alkalmazása, viszont sajnos egyes esetekben nem egyértelm¶, hogy milyen zászlóval is jelöljük meg az adott nyelvet, így inkább a zászlók helyett/mellett tüntessük fel az adott nyelv nevét is, hogy így elkerüljük az ezekb®l származható félreértéseket. A többnyelv¶ségre a keresés során is ajánlott oda gyelni, így olyan megoldás is születhet, hogy be lehessen állítani a keresés nyelvét is. Szintén oda kell gyelni, hogy nem minden egyes helyen gyártják a termékeket és forgalmazzák, így szóljunk a nagyközösségnek arról is, hogy bizonyos termékeket csak mely üzletben forgalmaznak.
Mivel a legtöbb weboldal inkább vizuális, így egy látáskárosult vagy egy megvakult ember számára nagy hátrányt jelent az internetezés. Sajna olyan eset is el®fordulhat, hogy egy oldalnak olyan hátter-, és bet¶szín kombinációi vannak, ami egy színtéveszt® ember számára gyakorlatilag olvashatatlan. Az információt lehet®leg jól különböztessük meg a háttért®l így ajánlott a nagy kontrasztok használni a háttér és a bet¶k színei között. Továbbá kerüljük a mintás hátterek használatát, ami még egy normál látású ember 28
2.12. Hardveres függ®ség esetén is zavart okozhat az olvasás közben, mivel el®fordulhat, hogy a szem jobban a háttérre koncentrál. Címsorok esetén a
,
,... tagek használata a célszer¶, és egyes honlapok esetén a képerny®olvasót lehet utasítani arra, hogy csak az egyes szinten lév® információkat olvassa fel a látáskárosult számára. Minden egyes elem nagysága legyen százalékba megadva, mivel ilyenkor a nagyítás során az elemek a megfelel®képpen nagyítódnak, hogy ezáltal az oldal egyensúlya ne sz¶njön meg és nagyítás során ne legyen zavaros és olvashatatlan az oldalunk. Az ALT tag használata hasznos lehet azok számára is, akik nem tudják rendesen látni ami a képen van, így legalább az ALT szövegben leírtakból erre tud következtetni és akár a felolvasó is fel tudja ezt olvasni. Az ALT szövegnek szintén ajánlott rövidnek, tömörnek és lényegre tör®nek lennie, habár a dekorációt szolgáló képek esetén kivételesen inkább ezt az attribútumot ne használjuk, vagy inkább csak ALT="" legyen megadva, mivel a képolvasók lehet, hogy a felhasználót gyelmeztetni fogja egy ALT-ot nem tartalmazó kép esetén. 2.11.2. Halláskárosultak megsegítése
Habár az internetes oldalak inkább vizuálisak, viszont olyan is el®fordulhat, hogy valakinek hang-, vagy videó formájában is van közölnivalója. Ilyenkor elég nagy gondot okozhat azoknak, akiknek a hallása károsult vagy éppen teljesen süket. Ebben az esetben ajánlott a multimédiás és videós fájlok vagy ablakok esetén szöveges formában is leírni, hogy éppen mit lehet az adott fájlon vagy ablakon látni és hallani. Videók esetén a megfelel® feliratozás is el®nyös lehet. A feliratozás ahogy már régebben is írtam, a videó alatti részen helyezkedjen el, a háttér fekete szín¶ legyen és a bet¶k legyenek fehér szín¶ek és lehet®leg félkövérek vagy kövérek, hogy rossz képmin®ség esetén is olvasható legyen a felirat. 2.11.3. Mozgáskárosultak megsegítése
Vegyük gyelembe, hogy egyes emberek esetén sajna nehézséget okozhat a billenty¶zet vagy az egér használata, így próbáljunk lehet®leg olyan interakciókat készíteni, ami nem igényli a bonyolult és ki nomult input-eszköz használatt, így az ilyen emberek számára is a megfelel® m¶veletek elvégezhet®ek lesznek. Továbbá nagy segítség lehet az is, ha az oldalunk minden egyes funkcióját kizárólag a billenty¶zet használatával már meg lehet oldani. 2.11.4. Egyéb nehézségekkel küzd®k megsegítése
El®fordulhatnak olyan emberek is, akiknek nem megfelel® a térlátásbeli képességük vagy túl rövid memóriával rendelkeznek, így számukra nehéz lehet a tájékozódás az oldalainkon vagy nehezen tudnak egyes információkat megjegyezni. Ilyenkor ajánlott, ha a könnyebb tájékozódás érdekében egy jól használható site-térképet is elhelyezünk, jelölve az aktuális pozíciót, és a bonyolultabb kifejezések esetén egy mindenki számára érthet® magyarázatott megjeleníteni a hipertextként kijelölt idegen kifejezésnél, amit a TITLE attribútumban adunk meg. Továbbá az írászavarosak támogatására olyan keres®t helyezzünk el, ami a rosszul leírt kifejezések esetén is tudja, hogy a felhasználó épp melyik helyes kifejezésre gondol, így azt vegye gyelembe a keresés során.
29
2.12. Hardveres függ®ség
2.12. Hardveres függ®ség 2.12.1. Letöltési sebesség és Válaszid®
A világon eléggé nagy különbségek fordulnak el® a különböz® sávszélességek esetén, amik befolyásolhatják egy weboldal letöltésének az idejét és sebességét. Tanácsos úgy megalkotni egy weboldalt, hogy az lehet®leg minden platform esetén hasonlóképpen jelenjen meg és lehet®leg a honlap is megfelel® sebességgel tölt®djön le. A gyorsabb letölthet®ség eléréséhez ajánlott minél kevesebb gra kai elemet használni, mivel f®kén a nagy méretük miatt az ilyenek tölt®dnek le a leglassabban. Lehet®leg egy weboldalat célszer¶ úgy megírni, hogy a letöltési id® ne legyen nagyobb 10 másodpercnél, de a legcélszer¶bb egy olyan weboldal megírása lenne, ami a másodperc törtrésze alatt tölt®dik be, ami így nem okoz a felhasználó számára kellemetlenséget. Ajánlott a válaszid®t is úgy kiszámítani, hogy minden megnyitás esetén a felhasználónál lehet®leg a válaszid® ugyanakkora legyen, hogy így újbóli használat során a felhasználó már el®re tudhassa azt, hogy egy kívánt oldal milyen sebességgel is fog letölt®dni. Nagyobb weboldalak vagy multimédiás fájlok esetén ajánlott a link mellett jelezni azt is, hogy mekkora méret¶ is az adott fájl, így ilyen esetben is a lassabb letöltésre fel tudjon készülni az oldalunk felhasználója. Válaszid®t befolyásoló tényez®k: a) El®fordulhat olyan eset, hogy egy adott webhelynek elég magas a forgalmat bonyolít le, viszont a szervergépek fejlesztése és/vagy cserélése eléggé lassú lefolyása miatt ezen szervergépek a megnövekedett forgalmat nem bírják el. b) Sok site-tulajdonos sajnálatos módon nem hajlandó módosítani a szerver és az internet közötti kapcsolatban, ami szintén akadályozhatja a gyorsabb letöltést. c) Sokszor el®fordulhat az is, hogy egy f®keretre vagy adatbázis rendszerre is be kell jelentkezni egy oldal el®állítása közben, ami szintén id®t vehet el, bár léteznek olyan eljárások is, amikor ezen id®t le lehet csökkenteni. d) Hiába fejlesztik gyorsan az Internetet, viszont kontinensek közötti összeköttetés f®leg zika vagy szerkezeti okok miatt még mindig lassú lehet. e) Sok felhasználó különböz® okok miatt csak lassú vagy közepesen gyors kapcsolattal tud rendelkezni és sokáig ezen nem tud változtatni. F®leg olyan is el®fordulhat, hogy egy felhasználó inkább kivárja az adott netkiszolgáló esetén a h¶ségnyilatkozat lejárását (mivel ellenkez® esetben komoly pénzösszeggel járhat a leválás), és csak utána próbál meg egy másik kiszolgálóhoz csatlakozni, viszont így újabb h¶ségnyilatkozatot kényszerül aláíratni, így lényegében eléggé lassú az a folyamat, hogy valaki megpróbál a számára megfelel® kiszolgálóra rátalálni. Hiába is lehet megtudni, hogy egy adott kiszolgáló milyen gyors kapcsolatot is tud biztosítani és mennyi korlátozott a letöltés, viszont el®fordulhat olyan is, hogy id®közben módosul a hálózat és a lehet®ség. f) Egyszer¶ platformok esetén nehézségeket okozhat az összetettebb honlapok elemeinek a megjelenítése, ilyenkor olvashatatlan oldalak is létrejöhetnek ahol esetleg a megjelenített tartalmak egymás is csúszhatnak. Az is eredményezhet gyorsabb válaszid®t, ha ezen elemeket együttesen próbáljuk továbbfejleszteni, mivel akár egy elem lassú mivolta is okozhat komolyabb növekedést a válaszid®ben. A felhasználókat a nagy válaszid® arra késztetni, hogy az ügyeiket inkább máshol intézzék el, így ez óriási veszteség lehet egy weboldal üzemeltetése esetén. A HTTP 1.1-verzióban történ® újítást vezetésével ugyanazon kapcsoltat mindaddig nyitva marad, amíg további dokumentumok tölt®dnek le róla, ezáltal a sebesség 30
2.13. Szoftveres függ®ség nagyságrendekkel tud gyorsabb lenni. 2.12.2. Képerny®méretek
Felhasználók által használt képerny®méretek az utóbbi id®ben: Majd itt gra konok lesznek 2003 2004 2005 2006 2008 2009 800*600 48% 37% 30% 20% 6,16% 4,19% 1024*786 40% 47% 52% 57% 42,26% 33,82% Nagyobb 5% 10% 12% 18% 40,21% 45,63% Egyéb méretek 7% 6% 6% 5% 11,29% 14,35% Az internetet a felhasználók már nem csak asztali számítógépükön keresztül tudják elérni, hanem notebook-on, palmtop-on való elérés is lehetséges számukra, és ezen kívül még elég gyakori továbbá az, hogy mobiltelefonon keresztül is használják a hálózatot. Ezáltal akár többszörös méretkülönbségek lehetnek a különböz® platformokon történ® megjelenítéskor. Ezért is az oldalak tervezése közben külön gyelmet kell fordítani arra, hogy különböz® képerny®kön való megjelenítés során az oldal elemei esetleg más pozícióban fognak megjelenni, ezáltal az általunk esetlegesen létrehozott kényes szimmetria is megtörhet és az egész oldalnak rendezetlen küls®t adhat annak ellenére, hogy a mi kijelz®nkön való megjelenítés közben ezek a gondok nem mutatkoztak. Az alábbi gra konok és az azokon szerepl® adatok leolvasásával az általam létrehozott táblázat segítségével ezért is segítségképpen szeretném tájékoztatni az olvasót arról, hogy manapság milyen képerny®nagyságot használnak az internetez®k, hogy ezen információk ismeretével az esetleges ilyen okból okozott megjelenítési hibák gyakorisága lecsökkenjen. Az gra konokról leolvasható, hogy az utóbbi 6 évben er®sen lecsökkent a felhasználók körében a 800*600-as képerny®nagyságú kijelz®k használata, 2003-r®l 2009-re ez a szám a tizedére csökkent le. Viszont az 1024*786 és annál nagyobb méret¶ monitorok egészen az elmúlt évekig már a felhasználók felénél elterjedtek lettek, bár látható, hogy az ilyen nagyságú monitorok is már egyre kevésbé kezdenek elterjedtek lenni, a számuk drasztikusan lezuhant, és már ebben az évben még a 2003-as szintet sem éri el. Mostanság inkább az 1280*800-as méret¶ kijelz®k kezdenek egyre dominánsabbak lenni, így belátható id®n belül az ilyen méret¶ kijelz®k lesznek a legelterjedtebbek, bár nem lehet tudni, hogy meddig lesz majd vezet® szerepben és hogy a jöv®ben mennyire fognak elterjedni az ennél is nagyobb méretek, vagy inkább az emberek megmaradnak ennél a méreteknél különböz® okok miatt. Az egyéb méret¶ kijelz®k elterjedése el®ször lassan és alig észrevehet®en következett be, de mára már ezek is egyre kedveltek kezdenek lenni a netes mobiltelefonok és kis méret¶, akár zsebbe dugható számítógépek népszer¶sége miatt.
2.13. Szoftveres függ®ség 2.13.1. Böngész®k
Számítógépes felhasználók körében elterjedtebb böngész®k Majd itt gra konok lesznek Sajnos még a legegyszer¶bben megírt oldalak esetén is el®fordulhat, hogy a böngész®k másként fogják megjeleníteni az oldalt mivel eleve egyes dolgokat másként értelmeznek vagy más algoritmus segítségével oldanak meg. Itt is segítségképpen statisztikai adattokkal szeretném önöket tájékoztatni, hogy az elmúlt években milyen mértékben változott meg az egyes böngész®k népszer¶sége a világon és 31
2.14. Top10 Design-hibák Magyarországon. A fels® két gra kon megmutatja, hogy 2008-ban és 2009-ben mely böngész®k voltak a legelterjedtebbek az egész világon, amíg az alattuk lév® gra konok a Magyarországon használatos böngész®k százalékos eloszlását mutatja ebben a két évben. Ezen ábrákról jól látható, hogy az élen az Internet Explorer és a FireFox áll, és azok közül is inkább az utóbbi kezd egyre népszer¶bb lenni a jobb kontabilitása miatt. A többi böngész®k, azok is legf®bbként a Google Chrome, a Safari és az Opera összesen csak a netez®k alig 5-6 Magyarországon is hasonló a helyzet, mint a világ egészén, vagyis itt is a FireFox van kiemelked® helyen és utána pedig az egyre kevésbé népszer¶ Internet Explorer. Hiába bizonyult a legfeltörhetetlenebb böngész®nek a nemrégiben megjelen® Google Chrome, viszont az elterjedése úgy látszik még sokat várat magára. Nekem személy szerint az operával van a legkevesebb bajom, aminek szerintem a legnagyobb a hibat¶rése is. Habár egyetlen dolog, ami az operában nem tetszik nekem az, hogy ha egymás alá kerülnek a képek, akkor a legtöbb böngész®vel ellentétben nem hagy üres helyett az egymás alatt lév® képek között. Azt is észrevettem, hogy ha például egymás mellett van négy mez® egy táblázatban és mellettük van egy négy mez® nagyságú egyesített mez®, akkor ha csak a bal oldalon lév® mez®kb®l az alsónak nem állítjuk be a magasságát a stílus lapon, de a többiekét igen, akkor ha böngészés közbe változik az egyesített mez® nagysága, akkor sajnálatos módon az els® három eredetileg meghatározott méret¶ mez®k nagysága is változik. Továbbá ha az over ow meg van adva egy mez®nél és az adott mez®ben túlcsordulás keletkezik, akkor az Internet Explorer valamiért nem jeleníti meg a görget®sávot vagy ha mégis, akkor meg inaktívan és a mez® beállított nagysága is változik, alkalmazkodva a szöveghez. 2.13.2. Új verziók használata
Manapság eléggé gyors fejl®désnek indult az internet és egyre több és több funkció válik elérhet®vé az internetez®k körében. Viszont óvakodjunk ezekt®l az új verziós dolgok használatától, mivel sok felhasználó körében megszokás miatt még a régebbi verziót támogató böngész®ket használják és elég ritkán szoktak áttérni valami újra. Ezért is kell törekednünk egy olyan weboldalt létrehozni, amit még a régi vagy csökkentett verziójú böngész®k is akadálymentesen meg tudnak jeleníteni így tervezés során ajánlott a HTML 1.0-s speci kációnak megfelel® kódolást használni, mivel azt a különböz® web böngész®k számára eleve kontabilisnak lett elfogadva. Béta-verziójú böngész®k használatát érdemes szintén elkerülni, mivel ezen verziók esetén még gyakoriak lehetnek a lefagyások, amik kellemetlenek lehetnek az esetleges fontos böngészés közben. Az új verziójú dolgokat csak akkor érdemes felhasználni, ha a hibái már eléggé ismertek és kijavítottak és a felhasználók körében is egyre népszer¶bbé válnak, valamint a felhasználtság és a megfelel® megjelenés is biztosított. Ha a tervez® mégis az újabban megjelen® dolgokat is szeretne felhasználni egy weboldal tervezése során, akkor ajánlott egy olyan alternatívát is elkészítenie a f®verzió mellett, ami még a régi elemeket tartalmazza, hogy azon felhasználók is tudják élvezni a weboldal használatát, akik böngész®je bizonyos oknál fogva még nem tudják megjeleníteni az új verziójú dolgokat.
32
2.14. Top10 Design-hibák
2.14. Top10 Design-hibák 2.14.1. Rossz keresési rendszer
Sajnos a mostani keres®rendszerek is nehezen tudják kezelni az olyan szavakat, amelyeket véletlenül elírtunk vagy valamilyen egyéb nyelvtani hibák fordulnak el® bennük. Legf®bbként egy id®s embernek esik nehezére felidézni azt, hogy épp milyen szabály szerint kell leírni az adott szavakat. Továbbá szintén nagy gondot szoktak okozni a régies írásmódban íródott szavak és a külföldi kifejezések pontos leírása. A találatok kiírásánál is legtöbbször nem az a f® szempont, hogy mennyire hasznos azaz oldal a netez®k számára, hanem inkább más szempontok szerint írják ki a keresési találatokat, legtöbbször azokat az oldalakat írják el®re, amik a leggyakrabban látogatottak. 2.14.2. PDF fájlok on-line olvasásra
Sokan megfeledkeznek róla, hogy a PDF fájlokat arra a célra szokták felhasználni az emberek, hogy az oldalt teljes tartalmát, vagy az oldal jelent®s részét ki tudják normálisan nyomtatni. Egy PDF fájl éppen hogy nem az interneten való olvasásra ajánlott, mivel a linkelés során nyújtott el®nyök itt nem tudnak teljesülni és a használó is rá van így kényszerítve, hogy az egész dokumentációt tövir®l-hegyire elolvassa, amit pedig több weboldalban és a weboldalak közötti megfelel® kapcsolatokkal könnyebben meg lehet oldani, így csak azon információk olvasódjanak el, amikr®l a felhasználó többet akar megtudni és nem kell felesleges id®ket elpocsékolni a számára nem fontos információk elolvasására. 2.14.3. A meglátogatott linkek színe
Mivel a felhasználó a keresése közben megannyi oldalakat néz át naponta, így számára fontos lehet azon információ, hogy mely oldalakat járta már be. Ezért is fontos megváltozatni az olyan linkek színét, ahol már el®z®leg járt már a felhasználó. Egy ilyen linknek a színe általában lila vagy piros szokott lenni, de a designtól függ®en ezen két szín árnyalatai is el®fordulhatnak. Ne próbáljunk ezen kívül más színeket és árnyalataikat használni, mivel ilyenkor nem lehet majd ránézésre megállapítani, hogy mely link volt már el®z®leg meglátogatva. A még nem látogatott linkek színét is hagyjuk meg kékre, vagy annak az eseteleges árnyalataira. 2.14.4. Átláthatatlan szöveg
Egy hosszas és terjeng®s szöveget elég nehéz olvasni képerny®r®l és az emberei szem is hamar tönkre tud menni az állandó képerny®bámulástól. Ezért is ajánlott egy szöveget megfelel®képpen formázni, a megfelel® helyekre bekezdéseket rakni, a szöveget kisebbnagyobb fejezetekre bontani, a fontos szavakat kiemelni, esetleg hipettextté átalakítani. A szöveg nyelvezete is legyen olvasható, követhet®, legyen minden rövid, tömör és lényegre tör®! 2.14.5. Rögzített méret¶ bet¶k
Abban az esetben, ha egy meghatározott pixel¶ bet¶méretet használunk az oldalaink esetén, azok a képerny®k változatos nagyságaik miatt különböz® méretben fognak 33
2.14. Top10 Design-hibák megjelenni, minél nagyobb képerny® méretet használunk, annál kisebb méretben fognak ezen bet¶k megjelenni. Ezért is ajánlott a bet¶méretet relatívnak, esetleg százalékosan megadni, mivel ilyenkor a monitoroktól és egyéb megjelenít®kt®l függetlenül a megfelel® nagyságba jelennek azok meg, és ha a képek és táblázatok nagyságai is ilyesféleképpen van megadva, akkor az egész oldal sokkal olvashatóbbá válik bármely platformon, mivel akkor minden elem mérete alkalmazkodni fog a megjelenít®höz, és így az általunk létrehozott harmónia is meg fog jelenni bárhol is használjuk az oldalainkat. 2.14.6. Oldalak nem megfelel® címzése
A keresés legfontosabb módja annak, hogy az általunk keresett oldalakat fel tudjuk kutatni. Egy keres®rendszer általában az oldal <TITLE> tagjában leírt címet és a szöveg els® részét írja ki az eredményrészben, ezért is szükségszer¶, hogy azon részeknél minél több információt lehessen megtudni az oldalunkkal kapcsolatban. Az oldalak címe szokott lenni az alapértelmezett neve a hivatkozásnak ha az adott oldalt a könyvjelz®k közé felveszik, bár az a név a felhasználó által változtatható. Soha ne kezdjük el egy címet nével®vel és egyéb lényegtelen szavakkal. 2.14.7. Minden, ami reklámnak nézhet ki
Mivel elég idegesít®ek mostanság a felhasználók számára a reklámok, amik már egyenesen undorítóak lehetnek (lásd: a kövér n® mennyi kilótól fogyott meg, és mutatják, hogy mennyire hájas volt el®tte) és a nyelvi hibáktól is hemzsegnek (lásd: "Leloni 5 kaca" vagy a "Te nem is neki?"), ráadásul eléggé értelmetlenek, így a lehet®ségekhez képest próbáljuk meg elkerülni minden olyan helyre való kiíratását az információknak, amelyeknek a kinézete egy reklámra emlékeztet, mivel az ilyen részeket általában a felhasználók próbálják nem észrevenni, esetleg le is tilthatják a megjelenítésüket. Az animációkat is lehet®leg kerüljük el, mivel az agy nagyobb gyelmet szokott szentelni egy mozgó képre, mint egy statikus szövegre, így az olvasás eléggé nagy nehézségekkel járhat az agy nem oda gyelése miatt. 2.14.8. Design konvenciók megsértése
Próbáljuk meg betartani az összes fontos design-szabályt, hogy ezáltal is el®segítsük a gyors és könnyed használatát az oldalunknak. Ne feledjük, hogy a rossz hír gyorsan terjed, és ha az oldalainkat nem tartják megfelel®nek, akkor egyre kevesebb és kevesebb felhasználó fogja ®ket látogatni, ami nemcsak nekik, de nekik is hátrányos lehet. 2.14.9. Új oldalak és fülek megnyitása
Célszer¶ úgy összeállítani az oldalainkat, hogy a közöttük való közlekedés során ne kelljen új ablakokat megnyitni, mivel ilyen esetben a felhasználók által elég gyakran és jogosan használt "Vissza" gomb és az oldalaink navigációs felülete nem tud rendesen vagy nem is fog egyáltalán m¶ködni. 2.14.10. Nem válaszolni meg a felhasználók kérdéseit
Egy vásárló szempontjából fontos, hogy egy adott termékr®l minél több fontos információt lehessen megtudni, mivel ezek által fogja megtudni, hogy az adott 34
2.15. Oldalak tesztelése termékeinket meg fogja-e vásárolni a honlapunkról. Legtöbb információ a számukra legf®bbként a különböz® méretek, a kapacitás, a termékek ára és a garancia, valamint a házhozszállítás költségeit és az esetleges szerelési költséget se feledjük el a tudtukra hozni.
Mindennapi ember életében fontos, hogy az általa elérend® célt minél könnyebben el tudja érni, ezért is fontos, hogy az internetes oldalak a felhasználók számára tetsz®sek legyenek, az oldalak között könny¶ legyen a navigáció és hogy a szükséges információkat belátható id®n belül meg tudják szerezni. Ezért is fontos, hogy az oldalak készítése közben minél többször hajtsunk végre teszteket, hogy az egyes kellemetlenségeket és hibákat még az oldalak végleges üzemeltetése során tudomásunkra jusson és a szükséges problémamegszüntet® lépéseket még idejében elvégezzük. Egy oldalnak több fontos min®ségi komponenssel kell rendelkeznie. El®ször is fontos, hogy az alapvet® m¶veletek a felhasználó számára könnyen betanulhatóak legyenek, hogy kés®bb az információszerzés és a tájékozódás szempontjából ne kelljen sok id®t elvesztegetnie. Következ® fontos szempont az, hogy mennyire tökéletesen lehet felhasználni az oldalakat azután, hogy a felhasználó megtanulta használni a design minden lehet®ségeit. Szintén fontos, hogy ezen megszerzett tudást és tapasztalatokat azután is tudja újra alkalmazni, ha esetleg csak sokkal kés®bb tudna újra az oldalainkra belépni és használni. Az esetlegesen felmerül® hibák felderítése és orvoslása is jelent®s mértékben hozzájárulhat egy megfelel® design eléréséhez. Végezetül arról is szerezzünk információt, hogy mennyire okozott élményt a designunk és hogy mennyire vannak megelégedve. Egy megfelel® tesztelés során ilyen és ehhez hasonló kérdésekre és ismeretekre tehetünk szert a teszteket elvégz® személyekt®l. 2.15.2. Miket akarunk tesztelni?
Els® lépésként ajánlott azokat az elemeket, problémaköröket meghatározni, amiket a tesztelés során akarunk elemezni. Ajánlott inkább csak néhány, viszont a honlap szempontjából kulcsfontosságú dolgokkal foglalkozni. Egy web áruház esetén fontos, hogy a vásárlók könnyen meg tudjanak keresni egy olyan terméket vagy termékeket, amikr®l minél több dolgot szeretnének megtudni ahhoz, hogy eldöntsék, érdemese az adott terméket/termékeket megvásárolni. Érdemes egy tesztelés során olyan m¶veleteket elvégeztetni a tesztalanyokkal, amiket egy szokványos vásárlás során hajtódnak végre. Például el®ször érdemes megkérdezni t®lük, hogyha a f®oldalt nyitják meg, akkor szerintük milyen lépéseket kell elvégezniük ahhoz, hogy az általuk h®n áhított terméket a web-áruházunkon belül meg tudják találni. Utána kérjük meg a tesztel®ket, hogy adják hozzá a kívánt terméket a kosárba, érdekl®djenek afel®l, hogy az esetleges kiszállítás a tesztel®k lakóhelyére mennyibe is fog kerülni és hogy milyen és mennyi ideig érvényes garanciát kaphat a termékre.
35
2.15. Oldalak tesztelése 2.15.3. Kikkel végezzük el a tesztet?
Érdemes lehet®leg minél több rétegb®l származó embereket választani tesztelésre, hisz a web-áruházakat is a világ különböz® helyeir®l származó vásárlók fogják mindennap felhasználni. Gy¶jtsük össze a tesztel®k lényeges adatait, járjunk utána, hogy milyen tapasztalataik vannak a számítógépes alkalmazások és az internet használatában. Egy megfelel® tesztelést szerencsére nem kell sok emberrel elvégezni, elég körülbelül 8-10 ember ahhoz, hogy az elegend® információt megtudjunk az oldalaink használhatóságával kapcsolatban. Ha többször is elvégezzük a teszteléseket, akkor el®nyös lehet olyanokat felkérni az újabb tesztelésre, akik már régebben is részt vettek az adott oldalaink tesztelésénél de ilyenkor is ajánlott új embereket toborozni, hisz olyan hibákat is észre tudnak venni, amit az el®z® teszteléseken már részt vett embereknek nem t¶nt fel, vagy olyan dolgokat tarthatnak nem megfelel®nek, amit régebben elhangzott ajánlás során módosítottunk. Tesztelésre meghívottakat a fáradozásukért illik megjutalmazni valami kis csekélységgel vagy esetleg pénzzel. 2.15.4. Tesztre való felkészülés
Ajánlott a tesztet egy olyan környezetben elvégezni, ahol a tesztelés közben az emberek nyugodtan tudnak érvényesülni és semmi sem zavarja ®ket az általuk el®állított feladatok elvégzésében. Tesztelés során próbáljon úgy elhelyezkedni, hogy minél nagyobb rálátása legyen arra, hogy miket m¶velnek a tesztel®k a teszt alatt. Célszer¶ felvételeket is készíteni az eseményr®l, hogy kés®bb a videót többszöri elemzése során még nagyobb képünk legyen a tesztel®k reakciójával kapcsolatban. De még miel®tt elkezdené a tesztelést, nézze át pontosan, hogy minden fontos témával kapcsolatban kérdezz rá a teszt során és próbálja meg maga is elvégezni a tesztet, hogy megbizonyosodjon, tényleg minden megfelel®en m¶ködik-e és minden kérdés esetén adható-e jó válasz vagy a kérdésben megadott m¶veletek akadálymentesen elvégezhet®ek-e és hogy minden egyes hivatkozás m¶köd®képes. 2.15.5. Teszt elvégzése
Még miel®tt elindítani a tényleges tesztet, a tesztelést elvégz®knek ismertesse röviden az ön oldalát, hogy ®k már el®re fel tudjanak készülni, hogy milyen témájú kérdéseket és instrukciókat keljen majd elvégezniük. Hozassa a tudtukra, hogy a tesztelés során nem lesz olyan feladat, amikre rosszul tudnának válaszolni és kérjük meg ®ket, hogy a tesztelés alatt is ugyanúgy böngésszenek, ahogy a mindennapi életben szoktak. Próbálja a tesztelés során az esetlegesen felmerül® kérdésekre pontos választ adni, de úgy, hogy közbe ne segítsen nekik, hisz eleve a mindennapi életben sincs senki mellett egy olyan ember, aki magát az oldalak tervezésében részt vett és tudja az összes lehet®ségeit az oldalnak. Kérje meg a tesztel®ket, hogy próbáljanak a teszt alatt hangosan dolgozni. Tesztelés alatt próbálja gyelni a jelenlév®k reakciót is. Ha például észreveszi, hogy valaki sokat tétovázik, kérdezze meg t®le, hogy épp min gondolkodik. Ha esetleg valaki egy olyan oldalra tévedett, amely nem egyezett meg az ® elvárásaival, akkor érdekl®djön meg t®le afel®l, hogy milyen oldalra is számított a tesztel® akkor, amikor rákattintott az adott hivatkozásra. Esetleges elakadásokra is fény derülhet egy ilyen teszt során és ilyen esetben ezen hibákat ki is kell majd javítani, amihez nagy segítség lehet a tesztel®k véleménye afel®l, hogy ®k hogyan is oldanák meg a problémát. Próbáljon meg az egész teszt alatt a többiekhez nyitott lenni és jusson eszébe, hogy 36
2.16. Véleményeim más WEB-áruházakról az ®k által mondott visszajelzésekkel nem kritizálni akarnak, hanem az esetleges hibák megoldásában akarnak segítséget nyújtani és az ön oldalainak akarnak jót. 2.15.6. Tesztelés után
A teszt végezetével kérje meg a tesztel®ket, hogy mondják el véleményüket a tesztelt oldalakkal kapcsolatban, összességében mit tekintettek ®k el®nyösnek és mi volt az, ami nem felelt meg az ízléseiknek, mennyire tartották ®k az oldalakat hasznosnak információszerzés szempontjából és hogy mennyire tudtak elboldogulni a teszt során kérdezett feladatokkal. Aztán érdekl®djön afel®l is, hogy mennyire emlékeznek az oldalakból, milyen funkciókra és lehet®ségekre emlékeznek, amit az oldalak nyújtani tudnak. Végezetül köszönje meg a teszt résztvev®it, hogy szakítottak id®t arra, hogy az oldalaink tesztelésén részt tudtak venni.
2.16. Véleményeim más WEB-áruházakról Különböz® magyarországi számítógépes webáruházak: BoltÉrtékel®.hu honlapról összegy¶jtött webáruházak listája (Netes kategória): http://www.boltertekelo.hu/katalogus/számítógép,_szoftver.html 2.16.1. WEB Áruház: http://www.webaruhaz.hu/
Els® látásra meg lehet állapítani, hogy a honlapot túl nagyméret¶re tervezték. Az én monitoromon (1024*768-as méretre beállított) nemhogy csak függ®legesen, hanem vízszintesen is kell görgetnem. Továbbá feleslegesnek tartom, hogy két helyen is lehet bejelentkezni valamint regisztrálni. Szerintem elegend® a jobb oldali mez® megtartása erre a célra, felesleges szerintem egyb®l ezzel kezdeni az oldal szövegét. Valamint szintén túlzásnak tartom azt, hogy a tartalom részben is elérhet® a keresés, és ráadásul túl nagy méretben tüntették fel. Els® ránézésre azt hittem, hogy ez az oldal csak nyomtatókkal foglalkozik, mivel a címb®l is ez derül ki, de lentebbre érvén észre lehet venni, hogy más dolgok árusításával is foglalkozik a cég, bár nem kellett volna ilyen óriási méret¶ képeket berakni, amit még a vak is könnyen meglát! Továbbá szintén feleslegesnek tartom az új termékek feltüntetését a f®oldalon, mivel szerintem ilyen célra akár egy külön oldalt lehetne létrehozni, vagy olyan helyen feltüntetni, ahol a nyomtatók vannak feltüntetve. Noha igyekeznek megfelel® méret¶ képben megjeleníteni a nyomtatókat az ajánlóban, viszont egyes termékek esetén ez valamilyen oknál fogva elmarad. Itt is a bal fels® sarokban megjelenik az áruház neve és logója, amire rákattintva maga a honlap jelenik meg. A fejléc alatt megjelenik a mélységi navigáció, így könnyen be lehet azonosítani, hogy a hierarchiában az adott oldal és a f®oldal között milyen csomópontok voltak, így azt feltételezem, hogy az oldalak között hierarchia van. A mélységi navigáció alatt, a bal oldalon a szélességi navigáció is megjelenik, ahol a f®kategóriák vannak feltüntetve. Továbbá egy b®vebb kategóriakeres® valamint egy gyártó szerinti keres® is el van helyezve. A navigáció szerencsére itt nem foglal el sok helyet, bár sok felesleges vagy redundáns elemmel van a honlap telezsúfolva. A többi oldalakat én megfelel®nek tartom. A második szinten az adott kategóriában lév® termékek nevei, árai és képei vannak felsorolva, és itt is megjelenik a legkedveltebb metafora, a bevásárlókocsi. Tetsz®leges termékre rákattintva b®vebb információt tudhatunk meg az adott termékr®l. A nettó és bruttó ár mellett itt még az Euróban 37
2.16. Véleményeim más WEB-áruházakról megadott árat is megadják. Valamint feltüntetik, hogy épp készleten kb. mennyi van és hogy mennyi garancia jár az adott termékre. Valamint alul további termékek megvásárlására tesz ajánlatot, de olyanokra, amiket ezen termék mellett szoktam még megvásárolni. Minden oldal tetején megegyezik a fejléc és a mélységi navigáció is megfelel®en észrevehet® és m¶köd®képes. A két oldalon a navigáció mellett gyártói információ megnézésére, kosár megtekintésére, ügyfélszolgálatra és további ajánlatok megnézésére van lehet®ség, legalul pedig feltüntetik, hogy milyen képerny®méretre van az oldal optimalizálva, kik a támogatók és itt is van egy navigációs rész, ahonnét a legfontosabbnak tartott oldalakra lehet elugrani. Valamint reklámok is találhatók az oldalakon, de azok nem foglalnak el jelent®s területeket. Összegezve,inkább a F®oldalt rendezném át, hogy ne tartalmazzon sok azonos elemeket, és a f®kategóriás képek méreteit is lényegesen lecsökkenteném. 2.16.2. ChipLand: http://www.chipland.hu/chipland.php
Amíg az el®z® cég honlapját túl szélesnek tartottam, addig itt épp az ellenkez®je, túl keskeny. Másodszor nem tudom, hogy a mondanivalót mért éppen hírekkel kezdik. A navigáció itt nem túl meggy®z®, lényegében csak a két hosszadalmas oldalsó felületek nyújtanak némi navigációs lehet®séget. Semmi jelét nem látom annak, hogy mely oldalakon voltam már, vagy melyeken nem, mert csak azon linkeket jelöli vastaggal, amit épp nézek. Az oldalak URL-jeir®l sem lehet megállapítani, hogy épp melyik a cég oldalain belül éppen melyiken vagyunk. Bár egyetlen még hasznos navigációs elemnek itt fel lehet fogni a fejléc alatti sz¶r®ket. Ha megnézem az egyes termékekr®l szóló információs oldalakat, észre lehet venni, hogy vagy túl keveset árulnak el egy adott cikkr®l, vagy ha sokat, akkor meg nagyon rendezetlen formában jelenítik meg, szinte rossz olvasni, hogy a nagy kép miatt sz¶k helyre szorították a fontos szöveget. Továbbá nem értem ,hogy milyen megfontolásból lehet minden egyes termék esetén véleményt megadni és miért nem lehet erre egy külön fórumoldalt létrehozni, ahol a vásárlók szabadon megoszthatnák egymással az egyes termékekr®l való véleményüket. Esetleg ennek a fórumoldalnak elég lenne termékenként megadni a linkjét, és jelezni azt is, hogy az adott termékr®l mennyi vélemény gy¶lt össze és ha a linkre rákattintunk, akkor az adott termékr®l kapcsolatos fórumtéma jönne be. Ennél a cégnél is minden oldal bal fels®(nek mondható) sarkában megjelenik a cég logója, mellette pedig a név és az elérhet®ség.
38
3. fejezet Fejleszt®i dokumentáció
3.1. Felhasznált technológiák 3.1.1. HTML
A HTML nyelvvel szokás létrehozni az oldalak vázát, amit kés®bb más nyelvek által használt szolgáltatásokkal egészítünk ki. Ez egy olyan statikus nyelv, ahol az elemeket tagekként kell megadni, vagyis van egy nyitótag [[<elemnév attríbutum="érték">]], valamint egy zárótag [[]]. Az elemnevek egy el®re meghatározott HTML parancskészlet elemei, az attríbutumok is kötöttek. Egy elemen belül több elem is el®fordulhat, amik az elem nyitó-, és zárótagja között helyezkednek el. A megjegyzést tagek közé kell írni. A HTML nyelv esetén nem kötelez® a zárótag egyes elemek esetén, valamint az elemek átfedhetik egymást. Ha XHTML-t használunk, akkor viszont minden tag-et kötelez® jelleggel le kell zárni, vagy a gyerekkel nem rendelkez® elemek esetén az <elemnév attríbutum="érték" /> jelölést kell alkalmazni, és az elemek közötti átfedés sem megengedett. Egy HTML fájl két f® részb®l áll, egy fejrészb®l, ahol az adott oldal tulajdonságai vannak megadva, és egy törzsb®l áll, ahol a megjelenített elemek kódjai helyezkedik el. Az oldalak vázát a design szabályainak megfelel®en olyan HTML kódban készítettem el, ahol az elemek stílusainak a tulajdonságai nem HTML nyelven vannak beállítva, hanem csak ID vagy NAME tagekkel ellátottak, amiket a CSS fájlok használnak fel azonosítás céljára és ezen elemek tulajdonságai is külön a CSS fájlokban vannak leírva. 3.1.2. CSS
A CSS nyelv segítségével lehet beállítani a HTML elemek stílusát. Minden elemet, amit a HTML kódban be akarunk állítani, azonosítóval kell ellátni, egy elem esetén ID, több elem esetén CLASS attríbutumok használatával. Itt a parancsokat névvel ellátott blokkba kell rendezni, ahol a nevek megegyeznek annak a HTML elem(ek) azonosítójával, amit be szeretnénk állítani. Ha egy elemr®l van szó, akkor a blokk neve elé #, több elem esetén pedig . jelet kell elhelyezni. A blokk neve után a parancsok és között helyezkednek el. Ezen parancsok el®re meghatározott névvel kezd®dnek, amit : után követi a parancs értékei. Minden parancs ;-el végz®dik. A megjegyzéseket /* és */ jelek közé kell elhelyezni, de egysoron megjegyzés is lehetséges, 39
3.1. Felhasznált technológiák ahol a sorban lév® // jelek utáni rész egészen a sor végéig megjegyzés. Bár általában elég egy CSS fájl használata, de mivel tekintettel voltam arra, hogy egyesek széles képerny®j¶ kijelz®t is használnak, így 1280px-nél szélesebbre nem engedtem magának a webalkalmazásomhoz tartozó oldalaknak a szélességét. Ennél kisebb képerny® esetén a szélességet 100%-ra állítottam. Ezen okból kifolyólag 3 CSS fájt hoztam létre, kett®t olyan elemek tárolására, amelyekre az el®bb megemlített korlátozás érvényes (egyik fájlban a 1280px-nél nem nagyobb, a másiknál pedig az 1280px-nél nagyobb kijelz®kre érvényes beállítások vannak. A harmadik CSS fájlban lév® beállításokra már nem érvényesek ezen korlátozás. 3.1.3. JavaScript
A JavaScript az egyik olyan nyelv, amivel az oldalak tartalmait dinamikussá lehet tenni. A JavaScript kódot a HTML fejlécbe kell helyezni, a <script type="text/javascript"> és a elemek közé. Objektum-alapú nyelv, vagyis a JAVA-val ellentétben nem objektum-orientált. A futása a kliens oldalon történik, így például szerver oldalon futó PHP kódokat nem tartalmazhat! Ez a nyelv gyengén típusos, vagyis nem kell típust rendelni a változókhoz és egy változó akár több típust is felvehet. Különböz® DOM objektumokat lehet kezelni, valamint egyes eseményekre is be lehet állítani további események generálását, például egy gombra való kattintás során egy új ablak fog megjelenni. Továbbá HTML elemeket lehet azonosítani a document.getElementById parancs seítségével, így azon elemeket képesek vagunk az oldal futása közben módostani. Az oldalaimon belül JavaScript kódot az adatok ellen®rzésére és a nyomógombok esetén az új lap megnyitására használok. 3.1.4. PHP
A PHP szintén egy olyan nyelv, amit a hálózaton található oldalak dinamikussá való tételére fejlesztették ki. PHP kódot a HTML bármelyik részén belül el lehet helyezni, a jelek közé elhelyezve. JavaScripttel ellentétben a PHP a szerver oldalon fut le. Minden olyan HTML fájlt, ami PHP kódot tartalmaz, azt .php kiterjesztéssel kell elmenteni. Itt a kifejezések C-szer¶ek, az operátorok viszont ugyanazok, mint a Java esetén. A változók $ jellel kezd®dnek, kis-, és nagybet¶ érzékenység van érvényben! Itt nincsenek el®re megadott típusok. PHP-n keresztül lehet akár SQL parancsokat is alkalmazni, így alkalmas adatbázisok kezelésére is, ha a MySQL parancsokat használjuk fel. Ezen kívül ideiglenes adatbázisokat is létre lehet hozni és alkalmzni, mint például a COOKIE-k, vagy aár az URL-be rakhatunk ki adataokat, vagy onnét olvashatjuk le azokat. Különböz® információkat kérdezhetünk le vagy állíthatunk be a klienssel és a szerverrel kapcsolatban. Az el®bb leírt funkciók közül szinte mindegyiket felhasználom a webalkalmazásom során. 3.1.5. SQL és MySQL
Az SQL nyelvet az adatbázisok könny¶ kezelésére hozták létre. 40
3.2. JavaScript és PHP függvények Ezen programozási nyelv segítségével képesek vagyunk adatbázist létehozni, táblákkal ellátni az, majd fel is tudjuk törteni adatokkal ezeket a táblákat, képesek vagyunk akár komplexebb lekérdezések végrehajtására és más egyébre. Viszont az SQLt feldolgozó felületek nem alkalmasak arra, ha több adatot is akarunk egyszerre bevinni, ha el®zetes el®számításokra van szükség, ha felhasználóbarát adatmegjelenítést akarunk megvalósítani, esetleg a bevitelre kerül® értékek egy listából választjuk ki. Erre a célra lettek kés®bb kifejlesztve a testreszabott, rugalmasan m¶köd® alkalmazói programok, amik a képerny®n akár ¶rlap vagy egyéb formában jelenítik meg az adatokat és mi akár különböz® tulajdonságok megadásásval tudjuk manipulálni az adatok megadását és lekérdezését, és magukat az SQL utasításokat az oldalon megadott információk alapján maga az alkalmazói program állítja el® és küldi el az adatbázisba és ez is fogja megjeleníteni az adatbázisból megadott információt, valamint hibakezelkéssel is foglalkozik. Például a webalkalmazás esetén maga a webalkalmazás lesz ezen alkalmazói program. Továbbá lehet®ség van a PHP-n keresztül is használni az SQL parancsokat a MySQL-t használva. Adatbázis használat el®tt el®ször be kell lépni az adatbázisrendszerbe, majd azon belül a használni kívánt adatbázist is meg kell adni. Ennek a megvalósítására például a következ®képpen lehetséges: $kapcsolat = mysql_connect(Adatbázisok elérhet®sége, Felhasználói név, Jelszó); if (!$kapcsolat) die("Nem sikerült kapcsolódni az adatbázishoz!"); mysql_select_db(Használni kívánt adatbázis neve, $kapcsolat) or die("Nem sikerült kiválasztani az adatbázist!"); Ezt a megoldást használva nemcsak az adtbázis válik elérhet®vé, de hiba esetén ki is íródik a hibaüzenet. Az adatbázishoz való kilépéshez a mysql_close($kapcsolat); parancsot kell kiadni. SQL lekérdezést az alábbi módon lehet megadni: $parancs = mysql_query(SQL utasítás,Általunk használt adatbázis neve); SELECT x1, x2, ..., xn utasítás esetén az eredmény nagyságát a $nagysag = mysql_num_rows($parancs) segítségével lehet megtudni, ami szükséges lehet a teljes eredmény kiiratásához, mivel egyenként lehet kiirattatni az eredményt, de ezt berakhatjuk egy $nagysag-szor lefutó ciklusba. Magának aza adatok lekérdezéséhez a $lekerdezes = mysql_fetch_array($parancs) utasítást kell kiadni, ami után az x1 adatbázisban lév® értékét a $lekerdezes[0] fogja tárolni, majd az x2 értékét a $lekerdezes[1] és így tovább...
3.2. JavaScript és PHP függvények 3.2.1. htmlheader és goTo - includes.php
A htmlheader nev¶ PHP feladata az, hogy létrehozza a HTML fájl fejlécét, beállítsa a címet, amit a $cim paraméter értéke lesz. Ezen belül megadja a szükséges META információkat és a linkek színét is, valamint a CSS fájl linkelése is megtörténik. Továbbá tartalmaz egy goTo nev¶ JavaScript függvényt is, aminek a meghívása biztosítja azt, ha valaki az áruház egyik oldaláról a másikra akar átlépni, akkor az új tartalom ugyanazon oldalon vagy lapon jelenjen meg. Erre a JavaScript document.location parancsát használja fel, és a goTo függvény paramétereként meg kell adni, hogy melyik új oldal is jelenjen meg a kijelz®n. 41
3.2. JavaScript és PHP függvények function htmlheader($cim) { /* OLDALAK BEVEZET */ ECHO " <meta http-equiv=\"Content-Language\" content=\"hu\"> <meta http-equiv=\"content-type\" content=\"text/html; charset=iso-8859-2\"> $cim - EROS TEAM Informatikai Áruház <script type=\"text/javascript\"> if (screen.width > 1280) { document.write(\"\"); } if (screen.width <= 1280) { document.write(\"\"); } function goTo(a) { document.location=a; } "; } 3.2.2. getpost - includes.php
Ebben a részben megadjuk, hogy a FORM-on belül megadott adatokat mely oldal fogja a POST segítségével lekérdezni function getpost($cim) { echo "
