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 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 KarAlkalmazott 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: Weboldal szerkesztése és üzemeltetése

A szakdolgozat címe: 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 való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)

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 témavezet®(k)

2. A feladat kidolgozását ellen®riztem:

témavezet® (dátum, aláírás): konzulens (dátum, aláírás):

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3. A szakdolgozat beadható:

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

dátum témavezet®(k)

4. A szakdolgozat . . . . . . . . . . . . . . . . . . . szövegoldalt

. . . . . . . . . . . . . . . . . . . program protokollt (listát, felhasználói leírást)

. . . . . . . . . . . . . . . . . . . elektronikus adathordozót (részletezve)

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . egyéb mellékletet (részletezve)

. . . . . . . . . . . . . . . . . . .tartalmaz.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

dátum témavezet®(k)5.

bocsátható

A szakdolgozat bírálatra

nem bocsátható

A bíráló neve: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

dátum szakfelel®s

6. A szakdolgozat osztályzata

a témavezet® javaslata: . . . . . . . . . . . . . . . .

a bíráló javaslata: . . . . . . . . . . . . . . . .

a szakdolgozat végleges eredménye: . . . . . . . . . . . . . . . .

Miskolc, . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

a Záróvizsga Bizottság Elnöke

3

Tartalomjegyzék

1. Bevezetés 8

2. Téma elméleti kifejtése 102.1. Gra�kus és Multimédiás elemek használata . . . . . . . . . . . . . . . . 10

2.1.1. Képek és háttér . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.1.2. Animációk . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.1.3. 3D-s elemek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.1.4. Hangok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.1.5. Videók . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.1.6. Keretek és Framek . . . . . . . . . . . . . . . . . . . . . . . . . 132.1.7. Metaforák . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.2. Tartalom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142.2.1. Honlap(ok) és az oldalak . . . . . . . . . . . . . . . . . . . . . . 142.2.2. Hitelesség . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152.2.3. Helyes nyelvezet . . . . . . . . . . . . . . . . . . . . . . . . . . . 152.2.4. Nyomtathatóság - a PDF . . . . . . . . . . . . . . . . . . . . . . 162.2.5. Dokumentáció . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

2.3. Oldalak linkelés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172.3.1. Linkelés jelent®sége és f®bb típusai . . . . . . . . . . . . . . . . 172.3.2. Linkek megadása és tulajdonságai . . . . . . . . . . . . . . . . . 182.3.3. WEB-oldal, mint információs csomópont . . . . . . . . . . . . . 18

2.4. Oldalak URL címzése és a fejléc . . . . . . . . . . . . . . . . . . . . . . 192.4.1. URL cím . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192.4.2. Aktuális oldal címe . . . . . . . . . . . . . . . . . . . . . . . . . 19

2.5. Navigáció . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202.5.1. Hiperszöveg hivatkozás típusai . . . . . . . . . . . . . . . . . . . 202.5.2. Szélességi navigáció és mélységi navigáció . . . . . . . . . . . . . 212.5.3. Felhasználó viszonya a navigációhoz . . . . . . . . . . . . . . . . 212.5.4. Könnyebb navigáció eléréséhez tanácsok . . . . . . . . . . . . . 212.5.5. Navigáció appletekkel . . . . . . . . . . . . . . . . . . . . . . . . 22

2.6. Keresés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222.7. Könyvjelz®k . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242.8. Intranet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

2.8.1. Az intranet tulajdonságai és felhasználása . . . . . . . . . . . . 242.8.2. Bevétel növekedés megfelel® intranet által . . . . . . . . . . . . 252.8.3. Intranet portálok . . . . . . . . . . . . . . . . . . . . . . . . . . 252.8.4. Intranet karbantartása . . . . . . . . . . . . . . . . . . . . . . . 262.8.5. Infrastruktúra összetev®i . . . . . . . . . . . . . . . . . . . . . . 26

4

2.8.6. Az intranetes design szabványai . . . . . . . . . . . . . . . . . . 262.9. Extranet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

2.9.1. Extranetr®l általában . . . . . . . . . . . . . . . . . . . . . . . . 272.9.2. Az Extranet és az Intranet közötti különbségek . . . . . . . . . 272.9.3. Az Extranet és az Internet közötti különbségek . . . . . . . . . 27

2.10. Nemzetköziség . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282.11. Hátrányos helyzet¶ek támogatása . . . . . . . . . . . . . . . . . . . . . 28

2.11.1. Látáskárosultak megsegítése . . . . . . . . . . . . . . . . . . . . 282.11.2. Halláskárosultak megsegítése . . . . . . . . . . . . . . . . . . . . 292.11.3. Mozgáskárosultak megsegítése . . . . . . . . . . . . . . . . . . . 292.11.4. Egyéb nehézségekkel küzd®k megsegítése . . . . . . . . . . . . . 29

2.12. Hardveres függ®ség . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302.12.1. Letöltési sebesség és Válaszid® . . . . . . . . . . . . . . . . . . . 302.12.2. Képerny®méretek . . . . . . . . . . . . . . . . . . . . . . . . . . 31

2.13. Szoftveres függ®ség . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312.13.1. Böngész®k . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312.13.2. Új verziók használata . . . . . . . . . . . . . . . . . . . . . . . . 32

2.14. Top10 Design-hibák . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332.14.1. Rossz keresési rendszer . . . . . . . . . . . . . . . . . . . . . . . 332.14.2. PDF fájlok on-line olvasásra . . . . . . . . . . . . . . . . . . . . 332.14.3. A meglátogatott linkek színe . . . . . . . . . . . . . . . . . . . . 332.14.4. Átláthatatlan szöveg . . . . . . . . . . . . . . . . . . . . . . . . 332.14.5. Rögzített méret¶ bet¶k . . . . . . . . . . . . . . . . . . . . . . . 332.14.6. Oldalak nem megfelel® címzése . . . . . . . . . . . . . . . . . . 342.14.7. Minden, ami reklámnak nézhet ki . . . . . . . . . . . . . . . . . 342.14.8. Design konvenciók megsértése . . . . . . . . . . . . . . . . . . . 342.14.9. Új oldalak és fülek megnyitása . . . . . . . . . . . . . . . . . . . 342.14.10.Nem válaszolni meg a felhasználók kérdéseit . . . . . . . . . . . 34

2.15. Oldalak tesztelése . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352.15.1. Tesztelés lényege . . . . . . . . . . . . . . . . . . . . . . . . . . 352.15.2. Miket akarunk tesztelni? . . . . . . . . . . . . . . . . . . . . . . 352.15.3. Kikkel végezzük el a tesztet? . . . . . . . . . . . . . . . . . . . . 362.15.4. Tesztre való felkészülés . . . . . . . . . . . . . . . . . . . . . . . 362.15.5. Teszt elvégzése . . . . . . . . . . . . . . . . . . . . . . . . . . . 362.15.6. Tesztelés után . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

2.16. Véleményeim más WEB-áruházakról . . . . . . . . . . . . . . . . . . . 372.16.1. WEB Áruház: http://www.webaruhaz.hu/ . . . . . . . . . . . . 372.16.2. ChipLand: http://www.chipland.hu/chipland.php . . . . . . . . 38

3. Fejleszt®i dokumentáció 393.1. Felhasznált technológiák . . . . . . . . . . . . . . . . . . . . . . . . . . 39

3.1.1. HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393.1.2. CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393.1.3. JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403.1.4. PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403.1.5. SQL és MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

3.2. JavaScript és PHP függvények . . . . . . . . . . . . . . . . . . . . . . . 413.2.1. htmlheader és goTo - includes.php . . . . . . . . . . . . . . . . . 41

5

3.2.2. getpost - includes.php . . . . . . . . . . . . . . . . . . . . . . . 423.2.3. fejlec - includes.php . . . . . . . . . . . . . . . . . . . . . . . . . 423.2.4. iranyitopanel1 - includes.php . . . . . . . . . . . . . . . . . . . . 443.2.5. iranyitopanel2 - includes.php . . . . . . . . . . . . . . . . . . . . 453.2.6. GETFokategoria - feltoltes.php és modositas.php . . . . . . . . 463.2.7. kiszamit - modositas.php . . . . . . . . . . . . . . . . . . . . . . 463.2.8. torol - regisztracio.php . . . . . . . . . . . . . . . . . . . . . . . 463.2.9. ellenoriz - regisztracio.php . . . . . . . . . . . . . . . . . . . . . 47

3.3. Minden oldalra érvényes tulajdonságok . . . . . . . . . . . . . . . . . . 483.4. Publikus oldalak . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

3.4.1. Baloldali irányítópanel . . . . . . . . . . . . . . . . . . . . . . . 483.4.2. Tartalmi rész . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483.4.3. Jobboldali irányítópanel . . . . . . . . . . . . . . . . . . . . . . 49

3.5. Privát oldalak . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493.6. Kiegészít® oldalak . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493.7. Jogosultságok, korlátozások . . . . . . . . . . . . . . . . . . . . . . . . 49

3.7.1. Be nem jelentkezett felhasználó . . . . . . . . . . . . . . . . . . 493.7.2. Vásárló . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493.7.3. Raktáros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503.7.4. Üzemeltet® . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

3.8. Oldalak legális elérhet®sége az Áruházon belül . . . . . . . . . . . . . . 503.8.1. aru.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503.8.2. index.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523.8.3. fokategoria.php . . . . . . . . . . . . . . . . . . . . . . . . . . . 523.8.4. alkategoria.php . . . . . . . . . . . . . . . . . . . . . . . . . . . 523.8.5. kereses.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523.8.6. terkep.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523.8.7. informacio.php . . . . . . . . . . . . . . . . . . . . . . . . . . . 523.8.8. regisztracio.php . . . . . . . . . . . . . . . . . . . . . . . . . . . 533.8.9. bejelentkezes.php . . . . . . . . . . . . . . . . . . . . . . . . . . 533.8.10. elfelejtett.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . 533.8.11. kijelentkezes.php . . . . . . . . . . . . . . . . . . . . . . . . . . 533.8.12. kosar.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 533.8.13. vasarlasok.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . 533.8.14. termekek.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . 533.8.15. feltoltes.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 533.8.16. modositas.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . 533.8.17. eredmeny.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . 533.8.18. regisztraltak.php . . . . . . . . . . . . . . . . . . . . . . . . . . 543.8.19. sajat.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

3.9. Elérhet® funkciók . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543.9.1. Regisztráció . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543.9.2. Bejelentkezés . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553.9.3. Vásárlás . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553.9.4. Új termék felvitele . . . . . . . . . . . . . . . . . . . . . . . . . 563.9.5. Termék módosítása . . . . . . . . . . . . . . . . . . . . . . . . . 563.9.6. Regisztráció módosítása . . . . . . . . . . . . . . . . . . . . . . 573.9.7. Keresés az áruk között . . . . . . . . . . . . . . . . . . . . . . . 58

6

3.9.8. Vélemény nyílvánítás egy áruval kapcsolatban . . . . . . . . . . 583.9.9. Elfelejtett jelszó lekérdezése . . . . . . . . . . . . . . . . . . . . 59

3.10. Néhány szó a Designról . . . . . . . . . . . . . . . . . . . . . . . . . . . 593.10.1. A meglátogatott linkek színe . . . . . . . . . . . . . . . . . . . . 593.10.2. Átlátható szöveg . . . . . . . . . . . . . . . . . . . . . . . . . . 593.10.3. Relatív méret¶ bet¶k . . . . . . . . . . . . . . . . . . . . . . . . 603.10.4. Oldalak címzése . . . . . . . . . . . . . . . . . . . . . . . . . . . 603.10.5. Reklám . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603.10.6. Oldalak megnyitása . . . . . . . . . . . . . . . . . . . . . . . . . 60

3.11. Megjelenés különböz® kijelz®n . . . . . . . . . . . . . . . . . . . . . . . 603.12. Megjelenés különböz® böngész®n . . . . . . . . . . . . . . . . . . . . . . 61

3.12.1. Mozilla Firefox . . . . . . . . . . . . . . . . . . . . . . . . . . . 613.12.2. Opera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613.12.3. Google Chrome . . . . . . . . . . . . . . . . . . . . . . . . . . . 623.12.4. Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . 63

3.13. Felhasznált szerkeszt®programok . . . . . . . . . . . . . . . . . . . . . . 643.13.1. Amaya 11.3.1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 643.13.2. NotePad++ 5.6.8. . . . . . . . . . . . . . . . . . . . . . . . . . 64

4. Összefoglalás 65

Irodalomjegyzék 66

Adathordozó használati útmutató 674.1. ER-diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674.2. Adatbázis-diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684.3. Fájlszerkezet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

7

1. fejezet

Bevezetés

Habár az internetes tömeges elterjedése alig egy évtizede zajlik, de már így is többszázmillió azon oldalaknak és webes alkalmazásoknak a száma, amik bárki számáraeléreht®ek és használhatóak, de ezenkívül rengeteg olyan oldal is létezik, amik privátkezelés alatt állnak - ezeket hívják intranetes oldalaknak. Egy óriási cégen belül akártö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 ésbevezetni 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újtsonezen alapvet® design-szabályokról, hogy ezáltal bárki el tudja majd készíteni a sajátkisebb vagy nagyobb oldalait, webalkalmazásait ami képes legyen fennmaradni ebbena kaotikus weboldal-halmazban. Valamint mivel a mai rohanó világban az embereknekegyre kevesebb szabadidejük van, így manapság a kisebb-nagyobb vásárlásaikat isa világhálón intézik, ezért ne is csodálkozzunk azon, hogy jelenleg is az egyiklegelterjedtebb 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ésekö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óltetszet®s és információban gazdag legyen. Lesz szó arról is, hogy az oldalaknak milyencímeket is adjunk, hogy például a könyvjelz®k használatánál is könnyen be lehessenazonosítani az oldalunkat, vagy például milyen struktúrát próbáljunk létrehozni azoldalak 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, aholgyakorlatban be is mutatom azokat a szabályokat és el®írásokat, amiket egywebalkalmazás készítése közben illik be is tartani egy tervez®nek. Az oldalakat PHPformátumban írtam meg, adatbáziskezelésre My_SQL-t használok. A teljes rendszerfelhasználására megfele® jogosultság szükséges, ami könynen megszerezhet® azáltal, haa NEPTUN-kódom (vagyis:IEDBZO) kerül beírásna a felhasználói név és jelszó eseténa bejelentkezés során. Az áruházat igyekeztem úgy kialakítani, hogy minél gyorsabb éskönnyebb legyen a felhasználása és kinézetileg is minél igényesebben nézzen ki, ezáltalmind 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ékeltwebáruház felhasználásához, és sok sikert kívánok minden leend® webalkalmazás-

8

fejleszt®nek és remélem, hogy az írásommal sokat segítettem nekik a terveik sikeresmegvaló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 azoldal betöltése se legyen lassú és a tartalom is a látogató számára olvasható és élvezeteslegyen.

Ha gyorsan betölthet® képeket alkalmazunk, akkor lehet®leg kerüljük atúlzsúfoltságot is, így ennek az elkerülése érdekében ajánlott üresen hagyott helyeketalkalmazni, amik segíthetik a felhasználót az átláthatóságban. Továbbá célszer¶ olyanelemeket elhelyezni, amik nem �x méret¶ek, hanem a nagyságukat százalékban vannakmegadva, így biztosítva azt, hogy megfelel® arányok mellett tudjon az oldal elemeimegjelenni 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, hogyilyen feltételek mellett sem tudunk egy jobb küllem¶ oldalt létrehozni. Különböz® képekhelyett ajánlott azonos képeket felhasználni, mivel ezáltal egy eleve betöltött kép márgyorsabban fog megjelenni, mivel a felhasználó helyi gyorsító tárából könnyebben fogbetölt®dni.

Ha a kép esetleg még nem tölt®dött be, akkor is próbálkozzuk meg az oldalt úgykialakítani, hogy az oldal fels® része értelmes legyen, ezáltal a felhasználó már el®retudni 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 egyolyan szöveg, ami a képkereten belül akkor íródik ki, amikor még a kép nem tölt®döttbe. 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 HEIGHTattribútumokat, hogy a lassabb betöltés esetén egyfajta vázat a böngész® el®re megtudjon 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 sokkisebb 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ábbtö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 atermékek említésre kerülnek, ott elég egy olyan képet is elhelyezni, ahol az adott terméka 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. Aháttér színe lehet®leg legyen nagyon �nom mintázatú, nem túl "kiemelked®" vagyinkább legyen egyszín¶, mivel egy felel®tlenül választott háttér zavaró lehet az olvasásszempontjából, f®leg olyan esetekben, amikor a háttér annyira észrevehet®, hogy aszemünk inkább a háttérre próbál fókuszálni, és nem a szövegre. Továbbá kerüljük elazt is, hogy a háttér egyes színeibe beleolvadjon a szöveg, mert akkor még nehezebbkikö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 aweboldalon nagy felel®tlenség lenne, mivel ezek egy elég zavaró és túlzsúfolt felhasználóifelü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ájlesetén célszer¶ egy rövid szöveges ismertet®t is elhelyezni, hogy ezáltal is tudja majda felhasználó, hogy mit is fog letölteni, ha az adott multimédiás fájlt jobban akarjamegismerni. Próbáljunk csak akkor használni animációkat az oldalunkon, ha ténylegszükség van rájuk, mivel ezekre az emberi agy jobban oda�gyel, mint a szövegre, így azolvasá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övegetelhelyezzünk el. Különösen zavaró az az eset, amikor a szöveg egy animációban jelenikmeg, 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¶ eztgra�kailag szemléltetni, így jobban fel lehet majd fogni, hogy milyen ütemben iskö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áltkereteket érdemes akkor felhasználni, ha a szöveg egyes része van épp kiemelve, ezáltala fontos részek elkülöníthet®ek a többi szövegrészt®l. Ikonsorok esetén csak az azikon legyen animált, amit éppen kijelöltünk. Kezdeti animációt használhatunk olyanszövegek esetén, amikor valamire fel akarjuk hívni az olvasó �gyelmét, de utána máraz animációt állítsuk is le, mivel az animált szövegek olvasása is elég nagy nehézséggeljárhat. Ne terheljük le az olvasók �gyelmét felesleges animált reklámokkal, mert úgysemaz érdekli ®ket.

2.1.3. 3D-s elemek

Noha térbeli objektumok ábrázolására van lehet®ség, esetleg 3D-s oldalt iskészíthetünk, viszont ilyenkor biztosítsuk a megfelel® mozgathatóságot, hogy az adottobjektumokat mindig megfelel®en tudjuk látni és lehet®leg a megjelenítés is tisztalegyen.

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ásralettek tervezve. Ha ráadásul gyenge a min®sége a gra�kának, akkor a távolbanlé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 valamilyenpontra rákattintunk, akkor az a pont most melyik navigációs testhez tartozik. Elevesokkal 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 éppmá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 legyenaz emberi beszéd arra, hogy el tudjuk magyarázni egyes dolgok m¶ködését, és ezáltalne kelljen videókat használni, amik a hangokkal ellentétben a képerny® nagy részétfoglalják le. Esetleg egy jobb hangulat elérésére érdekében használhatunk háttér zenétis, ami az olvasó kedvét jobban megnövelheti és számára így még élvezetesebb lehetaz oldalunk meglátogatása. Ha mondjuk egy operáról vagy egyéb zenem¶r®l van szó ahonlapunkon, 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ásta 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ámunkraazt a tényt, hogy valamilyen dokumentum letöltése befejez®dött, vagy azt, hogyegyes mez®ket nem megfelel®képpen töltöttünk ki. A képekhez hasonlóan a hangielemek esetén is a megfelel® min®ségre kell törekedni, és célszer¶ olyan hange�ektekethaszná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 amegfelel® 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éketmegfelel®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 ésrészletességben akarja látnia dolgokat.

Továbbá videók esetén ajánlott megfelel® feliratozást is használni, mivel egyesnyelvek egy azon nyelvet nem nagyon ért® számára elég gyors lehet, így esetleg a szövegnagy 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, hogyrosszabb 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 semmilyeninterakcióval a �gyel® számára, így feleslegesen pazarolhatjuk a hosszú videókkal azidejüket, ha közbe nem is olyan információra van szüksége, ami a videónkon vanrajta. Hosszabb videók esetén célszer¶ a videó alá egy rövid átiratot is írni, hogymindenki tisztában legyen azzal, hogy a megnézend® videó mir®l is fog szólni. Esetlega 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óttudunk nyújtani a videóval kapcsolatban.

12

2.2. Tartalom

2.1.6. Keretek és Framek

El®ször ajánlom minden weboldaltervez®nek, hogy lehet®leg kerüljük a keretekhasználatát, de ha mégis akarjuk ®ket használni, akkor lehet®leg hozzunk létre egykeret nélküli verziót is az oldalainkról.

A keretek legnagyobb hibája az, hogy a web egységesített modelljét sértik meg,mivel újfajta adatmegjelenítési módot vezet be és a web többi aspektusával mégnem integrálódott kell®képpen. Továbbá a navigáció szempontjából is nagy hátránytokozhat, mivel a megjelenés egységével nem egyezik meg a használatuk miatt anavigáció egysége. Az is gondot okozhat, hogy például az adott frame-mel rendelkez®oldalt vennénk fel a könyvjelz®k közé, akkor az szokott gondot okozni, hogy újbólimegjelenés esetén másképp fog az oldal megjelenni, mivel a könyvjelz® eleve nemtartalmazza a frame-k állapotát az adott oldalon. Továbbá az ilyen oldalnak azURL címe a keretcsoport kiindulási helyére mutat és nem a felhasználó számárakívánt helyre vagyis nem az aktuális nézetre. Szintén sok gondot tud az okozni,hogy a framek elrendezése kijelz®kként különböz® lehet. Nyomtatás során a keretáltalában nem szokott kinyomtatódni vagy csak a nyomtatás során látható framek.Eleve sok tervez®nek okoz gondot egy normális keret összeállítása mivel egy keretprogramozása sokkal nagyobb feladat, mint például a normál HTML nyelv kiismerése.A keres®programok szintén nem tudják rendesen kezelni a frameket, mert nem tudjákeldönteni, hogy mely részét tekintsék navigációs egységnek az indexben.

Abban az esetben, ha a weboldalt keretek nélkül akarjuk megnyitni, az <AHREF=""> parancs egyik attribútumaként meg kell adni a TARGET="_top"-ot,mivel ilyenkor a böngész® az összes frame-t letörli és új keretcsoporttal is látja el azegész ablakot, ezáltal az URL cím újra a valóságot fogja tükrözni és a könyvjelz®khasználatánál sem fog semmilyen gond sem fellépni habár a böngész® új URL-t kér azúj keretcsoport részére.

Viszont ne használjuk ezt az attríbutumot akkor, ha olyan weboldallal van dolgunk,ahol a keretet mint állandóan látható navigációs eszközt lehet felhasználni, mertilyenkor a keret a weboldalon való eligazodás szempontjából nagyon hasznos lehet. Ezenkívül egy másik el®nyös felhasználási módja a kereteknek az úgynevezett beillesztettkeret, amikor a keret az anyaoldalaik részeként szerepelnek és lehet®leg elkerülve azt,hogy a zavarják a felhasználó navigációját. Ilyenkor az történik, hogy az oldal egykijelölt részét egy másik oldalról származó tartalom tölt®dik be.

2.1.7. Metaforák

A metaforák egy olyan szöveges részt helyettesít® kis képei elemek, amikr®l afelhasználók egyértelm¶en el tudják dönteni, hogy miért is vannak ott és mirehasználhatók.

Próbáljunk csak olyan metaforákat használni, amik már a elterjedtek, például egyikilyen kedvelt metafora a bevásárlókocsi szimbólum. Amikor egy ilyen szimbólumotvalaki meglát, akkor egyb®l tudni fogják, hogy rákattintva valamilyen vásárlássalkapcsolatos funkciót érhetnek el. Ha például a vásárló éppen valamilyen terméketrendelt meg elektronikusan, akkor a kosár ikonja is üres állapotból teli állapotbamutasson, így a felhasználó már tudhatja azt is, hogy már ezel®tt valamelyik termékvásárlásának az igényét elintézte. Esetleg ha megfelel® méret¶ a kosár, akkor a kosárbanlév® számmal jelezheti azt is, hogy hány terméket vásárolt már meg a felhasználó, ésaz ikonra kattintva meg a már megvásárolt dolgok listája jelenhet meg egy új oldalon.

13

2.2. Tartalom

2.2. Tartalom

2.2.1. Honlap(ok) és az oldalak

Az eddigi oldalakhoz képes a honlapot ajánlott egy kicsit másképp megtervezni, deazért itt is ajánlott a többi oldallal megegyez® stílus használata. Célszer¶ nagyobbcéglogót feltüntetni és a cég teljes neve is szerepeljen. Egy honlapnak lehet®leg megkell válaszolnia a felhasználó azon kérdéseit, hogy mely csoport által üzemelt honlaponis van épp és mire is lehet az onnét elérhet® oldalakat felhasználni. A honlapon olyanhíreket is érdemes megjeleníteni, amikre lehet®leg minél több felhasználó �gyelmétakarjuk felkelteni, de azért ez a rész legyen minél kisebb, hogy a navigációs résznekis legyen elegend® hely. A legtöbb oldalnak legyen megfelel® keres®rendszere, mivela felhasználó számára egyszer¶bb, ha beírja az általa fontosnak vélt dolgot, mintsemhivatkozásokat követve találja meg azokat. Ezt keres®mez®t a honlap tetejére célszer¶elhelyezni, közel a navigációs részhez és a fejléchez, hogy így oldal oldal fels® részeminél több alapfunkcióval tudjon szolgálni.

Minden oldalunk esetén legyen egy olyan hivatkozás, ami a honlapunkra mutat.Ilyen esetre a legmegfelel®bb, ha a cégünk logójára kattintva juthatunk el ahonlapunkra. Ha sikerül egy weboldalnak csak egy témára összpontosítani és a weboldalmegfelel®en tervezett, akkor ez is el®segíti azt, hogy minél több más honlap hivatkozzonmajd a miénkre.

Felhasználók számára sokszor zavaró lehet az olyan eset, ha valamelyik oldalrabe kell regisztrálni és azt követ®en bejelentkezni, hogy a tartalom megjelenjen, ígylehet®leg az ilyen oldalakat készítését érdemes elkerülni, és ez a bels® linkelés esetén isnagyon rosszul jöhet, hisz ilyen oldalakat többnyire nem szoktak máshol reklámozni. Hamégis el®�zetéses oldalt akarunk csinálni, akkor el®ször is érdemes egy olyan ingyenesoldalt létrehozni, ami tájékoztatja a felhasználókat arról, hogy el®�zetés esetén mirelehet számítani és milyen el®nyei lehetnek egy el®�zet®nek. Ezáltal a tájékoztató általérthetjük el azt, hogy minél több felhasználó �zessen el® az oldalunkra. De ehhezaz is kell, hogy tényleg olyan legyen a csak el®�zet®knek szánt oldalaink, ahogyarról az ingyenes oldalban a felhasználót már el®re tájékoztattuk. Továbbá �gyelnikell azt, ha valamelyik termékünkre feltüntetjük a címünket, hogy ezáltal is b®vebbinformációt tudjon meg a vásárló, akkor a termék esetén a megfelel® linket közöljük,ami tényleg azzal a termékkel foglalkozik. Eléggé célszer¶tlen az, ha csak a f®oldalunkcímét adjuk meg, mert ha még a tájékozódás is rossz a honlap-rendszerünkön, akkorez elégedetlenséget okozhat a felhasználónak, így akár a termékünket is emiatt egyrekevesebben vehetik.

Lehet®leg több csomópontra próbáljuk elhelyezni az információkat, melyekreegyenként linkekkel hivatkozunk és ne használjuk arra a hiper-textet, hogy egyadott oldalon belül ugarhassunk. Igyekezzünk az oldalon csak a f®bb információkatmegjeleníteni és az egyéb, de szintén hasznos háttér információt pedig a különböz®aloldalakra, hogy azok, akiknek kevés idejük vagy vagy netalán sietnek, akkor ne kelljenelolvasni nekik az egész terjeng®s szöveget, hanem csak a hasznosabb információklegyenek a szeme el®tt. Ha meg valaki több id®vel rendelkezik, akkor is csak arrólolvasson többet az egyes aloldalakban, ami tényleg ®t érdekli és ne kényszerítsük olyandolgok elolvasására, amikr®l ® nem is szeretne tudni, mivel ha a felhasználó számárasok felesleges dolgot talál egy oldalon, akkor azt az oldalt könny¶szerrel el is hagyja ésinkább mások által üzemelt oldalakon próbálkozhat meg az információszerzéssel. Perszeezen aloldalak is lehet®leg egyenként egy témáról szóljanak, ezáltal is megkönnyítve

14

2.2. Tartalom

annak a lehet®ségét, hogy az olvasó utána ki is nyomtassa az oldal tartalmát. Próbáljukelkerülni azt, hogy túl sok aloldalt hozunk létre, amikben szerepl® szöveg meg túlrövidre fogott, mert ilyenkor nyomtatás során elég fárasztó lehet az, ha valakinek egyoldal helyett többet kell kinyomtatnia.

2.2.2. Hitelesség

Mostanság egyre több és több weboldal jön létre a világhálón, csak sajna ezen oldalakrólnem lehet tudni, hogy információtartalmuk szempontjából mennyire is hitelesek vagymennyire is frissek, szóval nagyon nehéz annak a ténynek eldöntése, hogy egy adottoldalon az igazság van-e leírva vagy valami idétlen hülyeség.

Tervezés során próbáljuk meg elkerülni az idétlen dolgok megjelenítését, mivel ezekcsökkenhetik az oldalunk megbízhatóságát. Ha valamit egyszer megígérünk a honlapon,például hogy egyes esetekben milyen lépéseket teszünk (például a fórumon való trágármegjegyzéseket kitöröljük és a trágár felhasználót ideiglenesen vagy örökre kitiltjuk ahonlapunkról), akkor ezt kötelez®en tartsuk is be, különben mások rossz néven vehetikezen ígéretek hiányát és ezen felhasználóktól esetleg örökre el is búcsúzhatunk. Továbbátörekedjünk egyszer¶ kinézetet produkálni, hogy a kell® információ a felhasználószámára egyértelm¶ és olvasható legyen. Nem illik sok oda nem ill® dologgal telerakniegy weboldalt, ha az közben zavarja a felhasználó számára fontos dolgok megjelenítését.

2.2.3. Helyes nyelvezet

Egyik legfontosabb dolog egy weboldal megírásánál az, hogy próbáljunk meg tömörenés lényegre tör®en fogalmazni.

Az olvashatóság érdekében próbáljuk meg megfelel®képpen tagolni a szövegeketbekezdésekkel, alcímekkel és pontokba szedett felsorolással. Nem szabad arrólelfeledkezni, amit már el®bb is említettem, hogy a képerny®r®l való olvasás kellemetlenés ártalmas az emberi szem számára, így ajánlott elkerülni a hosszú és feleslegesenterjeng®s szövegek használatát, továbbá a görgetés sem kedvelt egyes felhasználókesetében. Az ilyen szövegeket általában nem szóról-szóra szokták elolvasni, hanemáltalában az olvasók csak gyorsan átfutnak rajta, közbe meg csak a számukrafontos dolgokat próbálják megkeresni és kisz¶rni a szövegb®l, vagyis számukra fontoskulcsszavakat és kulcsfontosságú mondatokat keresnek miközben a tartalom többirészével nem is foglalkoznak.

Ajánlott egy weboldalt publikálása el®tt egy komplett helyesírás ellen®rzésnek isalávetni, hogy nehogy használat során találjanak nyelvi hibát, ami egyes esetekbenelég kínos lehet. Továbbá a helyes fogalmazásra is ügyelni kell, nehogy több értelm¶mondatok értelmezése okozzon a felhasználó számára gondot. Két vagy három szinteselrendezés er®sen javasolt a címek esetén, amik lehet®leg egy f®cím, egy alcím és egyébcím formájában jelenjen meg. A látásban károsultak számára is sokkal könnyebb egy jólmegoldott egymásba ágyazott címsorokkal ellátott oldal olvasása. Ajánlott a f®címnekértelmesnek lennie, hogy miután a felhasználó elolvassa azt, már el®re tudja is azt,hogy az oldal többi részén mire számíthat. Próbáljuk kerülni a jól hangzó, de valójábansemmit mondó f®címeket.

Fontos szavak megkülönböztetése érdekében használjuk kiemelést és hangsúlyozást,mint például a hipertext-linkek használata vagy esetleg a szövegt®l elüt® szín¶ háttérés/vagy bet¶szín is el®nyös lehet a fontos dolgok kiemelésénél. Továbbá ajánlott minden

15

2.2. Tartalom

hosszabb oldal elején egy rövidebb összefoglalást is írni a felhasználó számára. El®szörmindig a legfontosabb dologgal kezdjük a szövegünket és csak utána fokozatosan kella kevésbé fontos dolgok felé haladni, ezáltal is több id®t tud spórolni az olvasó abbanaz esetben, ha csak a fontosabb dolgokért keresi fel a website-unkat. Nem célszer¶rákésztetni az olvasót arra, hogy görgessen.

Kerüljük a nyakatekert fogalmazást is és inkább az egyszer¶ mondatszerkezeteketrészesítsük el®nyben. Egy bekezdésen belül célszer¶ csak egy témával foglalkozni,különben egy hosszú bekezdés esetén az olvasást megunhatja az olvasó és inkább továbbugrik, és közbe lehet, hogy a bekezdésben lév® másik téma érdekelte volna ®t, amihezviszont lehet, hogy nem is ért el. Metaforák használatát is lehet®leg kerüljük el, nehogyaz olvasó aztán szó szerint vegye, esetleg megsért®dne miatta.

Próbáljunk egy olyan oldalt írni, ami csak a tényeket közöl, érthet® a nyelvezete,viszont azért próbáljunk egy kis humort is bekeverni, nehogy aztán az olvasók túlkomolynak és száraznak tartsák az írásunkat. Látáskárosult vagy gyengén látók miattmegfelel®en nagy bet¶típus használata is ajánlott. Minden egyes szöveget próbáljunkbalra rendezni, vagy olyan országok esetén, ahol jobbról-balra olvasnak, akkor megajánlott jobbra rendezni a szöveget, mivel az ember az olvasást mindig ugyanarrólaz oszlopról szokta kezdeni, hogy így a szeme számára ne okozzon kényelmetlenségetabban, hogy minden egyes sor esetén más helyzetb®l induljon ki a mozgás során. Kisebbbet¶j¶ szövegek esetén ajánlatos a talp nélküli bet¶típusok használta, de ha elég nagyoka bet¶k, akkor már elég képpont lesz ahhoz, hogy a talpat is meg tudjuk jeleníteni.Kerüljük el az olyan szövegeket, amiket csupa nagy bet¶vel van írva, mivel az olvasószámára ez elég zavaró lehet, és az olvasási sebesség is elég lelassulhat ilyen esetekben,továbbá ilyen szövegeket elég nehéz értelmezni.

2.2.4. Nyomtathatóság - a PDF

Mivel szinte minden típusú információ megtalálható az interneten, így elég sokfelhasználó él azzal a lehet®séggel, hogy ezen információkat ki is nyomtassa.

Habár a világháló azzal a céllal jött létre, hogy a nyomtatott verziójúinformációforrásokat tegye feleslegessé, viszont mivel a honlapokon lév® információkelég gyakran frissülnek, így nem lehet tudni, hogy egy adott dolog mennyi ideig leszelérhet® a neten, így mégis ajánlott az ilyen dolgokat lementeni, esetleg kinyomtatni.

Sokszor hasznos az, ha egy terjedelmes weboldalt inkább kinyomtat az ember, mivelegy ilyen nyomtatott szöveget sokkal könnyebben tud elolvasni, mintsem állandóana monitort bámulná, ami eléggé kényelmetlen lehet, s®t zavaró az emberi szemszámára. Akkor is ajánlott kinyomtatni a weboldalt, ha esetleg másoknak is szeretnénkmegmutatni azt és esetleg éppen abban a pillanatban nincsen elérhet® közelségben egyszámítógép vagy egyéb olyan eszköz, amivel meg lehetne a weboldalt jeleníteni.

Egyetemeken elég gyakori az az eset, hogy a tanárok a saját weboldalaikrafelrakják az adott anyag el®adásainak a diát, esetleg további fontos olvasmányoklinkjeit is feltüntetik, amik még hasznosabbak lehetnek a diákok számára. Tervezésszempontjából nagyon ajánlott hosszabb és nagyobb terjedelm¶ oldalak esetén egynyomtatható verziót is készíteni, ezáltal is megkönnyíthetjük a felhasználók dolgát.Mivel nyomtatás esetén más bet¶típusok a legelterjedtebbek, így ajánlott ezt anyomtatóbarát oldalt is abban a bet¶típusban megírni. Továbbá míg megtehetjükazt, hogy a normál oldal esetén több állományra is oszthatjuk az információt, esetlegegyes dolgokat hiperlinken csatlakoztatjuk a weboldalhoz, addig a nyomtatható verzió

16

2.3. Oldalak linkelés

esetén a teljes információt egy oldalon igyekezzünk megjeleníteni. A HTML fájlfejlécében megadhatjuk a nyomtatóbarát verzió speci�kációját s következ®képpen:<LINK REL="alternate" MEDIA="print" HREF="nyomtatobarat_verzio.ps"TYPE="application/postscript"> Ez a speci�káció azt fogja jelenteni a böngész®kszámára, hogy bármilyen nyomtatási parancsot ezen a nyomtatható verzión kellelvégezni és nem a megjelenített verzión. Az ilyen nyomtatóbarát oldalaknak vagyPostScript, vagy a mostanság kedvelt PDF formátumúnak ajánlott lennie, és fontosjelezni azt is, hogy ezen verziókat csak és kizárólag nyomtatás céljára tartjuk fenn. APostScript-nézeget®k azt a célt szolgálják, hogy általa eldöntsük azt, hogy érdemes-e azadott oldalt kinyomtatni, vagy sem. PostScript és PDF nyelvek esetén ha megnyitjuk®ket, akkor olyan elrendezésben fog a weboldal megjelenni, amilyen formában fogkinyomtatódni. Nyomtatóbarát oldalak esetén lehet®leg úgy rendezzük el a dolgokat,hogy azt A4-es papíron bárminem¶ hiányosság nélkül ki is lehessen nyomtatni.

2.2.5. Dokumentáció

El®ször is a felhasználók jobban kedvelik az olyan oldalakat, amik esetén nem kellsemmilyen segítség ahhoz, hogy a használatukat elsajátítsák, mert nincs rá elég idejük,hogy a segítséget is külön elolvassák.

De ha mégis bonyolult dolgok vannak az oldalunkon elhelyezve, akkor egymegfelel® magyarázó dokumentációt is próbáljunk mellékelni. Általában az ilyendokumentációk inkább extraneten vagy intraneten használatosak, viszont internetesetén inkább próbáljuk olyan oldalt írni, amihez nem kell dokumentáció, hogy neraboljuk feleslegesen a felhasználók idejét. Lehet®leg ezen dokumentáció gyorsanelérhet® legyen a felhasználó számára abban az esetben, ha tényleg szüksége van rá,továbbá minél több példát is tartalmazzon, mert ezzel is el®segítjük az oldalunk egyesrészeinek könnyebb használatát.

A feladatok elmagyarázása történjen lépésr®l-lépésre, és ne a felhasználónak kelljenkikövetkeztetnie, hogy most hogyan is kell egy feladatot elvégezni. Továbbá legyen egykülön szótároldal is, ami a szövegben szerepl® idegen szavakat tartalmazza, és erre aszótárra hipertext linkek segítségével hivatkozzunk, ahol a link maga legyen az idegenkifejezés. Ha erre a linkre kattintunk, akkor lehet®leg egyb®l ennek a kifejezésnek amagyarázata legyen a képerny® fels® részét®l kezdve. Dokumentáció esetén is lehet®legminél rövidebben fogalmazzunk.

2.3. Oldalak linkelés

2.3.1. Linkelés jelent®sége és f®bb típusai

A felhasználók a web új és izgalmasabb helyeire linkeken keresztül juthatnak el. Alinkeknek három típusa ismeretes. Az egyik típus a strukturált navigációs linkek, amikaz információs tér felépítését határozzák meg, ezen keresztül tud a felhasználó eljutni atér egy tetsz®leges pontjára. Tipikus példa az olyan linkek, amik a f®oldalra mutatnak,illetve az olyanok ,amikor egy aktuális oldalról elérhet® aloldalra mutatnak. Továbbitípusa a linkeknek az asszociációs linkek, amelyek célja az, hogy egy oldalon belüliszövegben lév® elemekr®l nyújtanak b®vebb információt. Végezetül a harmadik típusaz ajánlójegyzék, ami a felhasználó által használt oldalhoz hasonló oldalakra mutat,ahol esetleg megtalálhatja azt is, amit nem tudott megszerezni az aktuális oldalon.

17

2.3. Oldalak linkelés

2.3.2. Linkek megadása és tulajdonságai

Egy linknek kijelölt résznek ajánlott rövidnek és tömörnek lennie, mivel gyakranel®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ánlotta linkekhez magyarázatot is írni, hogy a felhasználó minél könnyebben tudjaazonosítani, hogy egy adott link milyen típusú oldalra mutat. Ilyenkor ezenmagyará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: <A HREF="link.html"TITLE="Magyarázószöveg">Linknek kijelölt szöveg</A> Természetesen a TITLEattribútumot más elemek megmagyarázására is lehet használni, például képek vagyidegen szavak megmagyarázása esetén is hasznos segítség. Egy linkcímbe érdemesmegadni 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 milyeninformációkra is lehet majd számítani és hogy milyen a kapcsolata a kiemelt résszel ésa jelenlegi oldal tartalmával. És �gyelmeztetés is szerepeljen abban az esetben, ha az újoldalt csak bizonyos korlátozások mellett lehet felhasználni, például csak a regisztráltfelhaszná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öltlink milyen oldalra is fog majd vezetni. A weboldalakon általában két színt szoktakhasználni a linkek megkülönböztetése esetén: külön jelölik az olyan linkeket, amiket mégnem látogattunk meg és külön azokat, amiket már el®z®leg megnyitottunk. Ajánlott alinkszíneknél a default színeket használni, vagyis a már látott oldalak esetén a piros vagybordó szín használata, s a még nem látogatott oldalak esetén pedig a kék szín használataterjedt el. Ezen színeknek a honlap többi színéhez ill®en különböz® árnyalataikat ishaszná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áranehezebb lehet a keresést és akár a nem megfelel® színek zavaróak lehetnek annakfelismerésében, hogy mely oldalon járt-e már az adott felhasználó, ezáltal a tájékozódásis nagy mértékben romolhat.

Sok id® veszhet kárba olyan esetben is, ha valaki véletlenül többször ugyanarra azoldalra 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 isugyanarra az oldalra mutat, így meg kell azt oldani, hogyha az egyik megnyitódik, akkora többit is már utána látogatott oldalként jelz®djenek. Nem ajánlott olyan weboldalttervezni, ami nem engedi meg a felhasználónak azt, hogy az oldalt elhagyja és az semajá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 fontoslinkek vannak elhelyezve. Az ilyeneket akár kiindulópontként is használhatják abban azesetben, ha más számukra fontos és hasonló témájú helyekre is el akarnak jutni. Ezáltalis növelhetjük a weboldalunk látogatottságát, hogy lényegében fontos csomópontkéntis üzemelj az oldalunk. Ajánlott a küls® linkek elhelyezésénél a megfelel® mennyiségetelhelyezni, 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á mindenoldalnak 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 mihonlapjainkat, amiért cserébe akár pénzzel is jutalmazhatunk. Abban az esetben, hamegsz¶nne valamelyik oldalunk, akkor azt fontos a felhasználókkal közöltetni és azolyan 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 islehagyható. Az URL legfontosabb eleme a domain-név, amit a http:// után deaz els® / el®tt helyezkedik el, ami maga a honlap címe. A többi aloldal a / jelután kell felsorolni. Itt is az oldalak között hierarchikus kapcsolat van. Ajánlottolyan URL nevet adni egy oldalnak, amire ránézve a felhasználónak már legyenvalamilyen 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 elemeiközött ugyanaz a kapcsolat legyen, vagyis a fentebb említett "CCC Cég -> Outputeszközök -> Egerek -> Optikai Egerek -> XXX Egér"-nek megfelel® URL címlegyen a http://www.ccc.org/output/egerek/optikai/xxx. Ezáltal is jobban segíthetjüka felhasználót a navigálásban, mivel így az URL cím is funkcionálhat egyfajta navigációselemként. Ügyeljünk viszont arra, hogy legtöbbször a URL esetén fellép a kis ésnagybet¶ érzékenység, így a nagybet¶kkel óvatosan kell bánni és kerüljük a kevert kis-nagybet¶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 azadott 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 esetlegleí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 újhelyen lév® oldal tölt®djön be.

Lehetséges egy oldalnak több URL-t is megadni. Ez abban az esetben jó, ha bizonyosid®közönként új információs honlapokat készítünk, és minden id®szaknak készítünk egysaját weboldalt saját állandó URL-címmel és lesz egy olyan állandó URL-cím is, amimindig 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álisoldal címét. Erre a célra szolgál a HEAD részben szerepl® TITLE parancs, amineka használata egyszer¶: <HEAD> <TITLE>A weboldal címe<TITLE> </HEAD>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®legkevés, kb 2-6 szóból áll, de ebb®l már lehessen következtetni az oldal tartalmára. Ezencímek szoktak megjelenni abban az esetben is, amikor egy oldal felkerül a könyvjelz®kkö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 legyenolyan, 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®khasználata során elég nagy gondot jelenthetnek, mivel így rendezetlenül fognak azoldalak címe megjelenni, mert sokhelyütt a könyvjelz®k listája ABC- sorrendben jelenikmeg, és így sok oldal fog az 'A' vagy az 'E' kezdés¶ részhez tartozni. Elég gyakori azolyan oldalcímek, amik az oldalon belüli szövegkörnyezetb®l van kiragadva. Sokszor afelhasználók inkább végigfutnak a f®címeken, és csak azon oldalakat olvassák el, amiszámukra érdekes lehet, ezért is jó az, ha az olvasó minél többet tud meg az oldaltartalmáról kapcsolatban a f®cím segítségével. A f®címeknek például e-mailek eseténis nagy jelent®sége van, ahol a tárgy részben kell ezen f®címet megadni, mivel elégsok e-mailt szokott egy felhasználó naponta kapni, és sokszor ha számukra érdektelentárgy-cím¶ e-maillel találkoznak, akkor inkább egyb®l kitörlik, mintsem elolvassák. Amegadott 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éppenazonosítani, aminek a legegyszer¶bb formája a cég logójának, esetleg még a cég nevéneka 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®lvilágossá válhat, hogy hogyan is kell a honlapunkat használni, mivel elég lesz nekika mindennapi rutinokat alkalmazni és nem kell semmi olyan dologgal összetalálniukmagukat, amit esetleg nem tudnak megoldani, ezáltal elhagyásra késztetni ®ket azoldalainkról. Hogy a felhasználó már el®re tudja, hogy milyen oldalakon járt már, ígyezt 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 fontosinformá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, hogya felhasználó tudja, hogy milyen szerkezeti navigációs lehet®ségekre számíthat. Ajánlottolyan linkeket használni, amelyek a felhasználó számára megadják az aktuális és acé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álisoldalhoz 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ánlotta hierarchikus szerkezet¶ oldalakat alkalmazni, vagyis minél lentebb vagyunk ahierarchiá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önbenká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 akülönböz® f®kategóriákon belüli termékcsaládok, és az azt követ® szinten pedig maguka 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 afelsorolása történik. Ezáltal a felhasználók minden egyes oldal esetén már el®remegismerhetik az oldalunk összes f®bb szolgáltatásait. Mélységi navigáció esetén ahonlap é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 nagyonegyszer¶en elsajátítható, és minimális helyigénnyel is rendelkezik. Viszont ilyennavigá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ülethaszná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 hozzunklétre, ahol a felhasználó számára biztosított a szabad mozgás az oldalak között ésrugalmas is legyen az.

Figyelni kell arra, hogy akár a tervez® által el®re nem is gondolt útvonalon is akarhata felhasználó közlekedni! Ha a felhasználó számára nem megfelel® a navigáció, akkorakár a könyvjelz®k felhasználásával saját maga is létrehozhat egy kis oldalt, ahol márkönnyebben tud majd eligazodni, hisz eleve ® határozza meg, hogy hogyan is tudjonhaladni a számára legpraktikusabb módon. Elég ritka az olyan eset, ahol a felhasználóknéhány percnél tovább maradnak egy oldalon, inkább újabb és újabb lehet®ségek utánnéznek. A felhasználó sosem akarja azt megtanulni, hogy hogyan is kell egy másképpm¶köd® navigációs rendszert használni és a súgó el®hívása és a benne való keresés pedignagyon 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ó azoldalaink 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, hogynem is nagyon a felhasználó által keresett információkkal foglalkoznak. Sokszor méga 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öttikapcsolatokat.

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 kisebbegység összességét jelöli. Ennek a megoldása elég könny¶ egy oldalon belül, viszontoldalak 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. Ilyenkorhasználható például az, amikor nagyobb képeket jelölnek kisebb képek vagy teljesdokumentumokat kisebb kivonatok jelölnek.

c) Sz¶rés, amikor a nem fontos töltelékeket inkább kihagyjuk, hogy csak alényegesebb dolgok legyenek meg.

d) Rövidítés, amikor mindent az információ bevezet®jén kívül hagyjunk ki és azinformá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, akkoreleve 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 isjárunk. A legjobb megoldás erre a már régebben említett hierarchikus elrendezéseaz oldalaknak. Például ha egy XXX egérr®l szóló weboldalt akarunk elhelyezni ahierarchiá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ósré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-sitecsoportosulá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-siteoldal esetén a fejlécen legyen megadva mind a rész-site honlapjának, mind a f®-sitehonlapjának a címe. Minden egyes rész-site a felhasználók egyes rétegeihez szóljonabban az esetben, ha maga az oldalak több különböz® témákra sorolhatók, így mindenegyes 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 fellehet 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 adatokkaldolgoznak, 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 ilyenappleteket célszer¶ azzal az oldallal együtt megjeleníteni, amelyekkel foglalkoznak, afunkcioná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ánel®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 éppmilyen információk fellelhet®ségére lehet használni. Ezt ajánlott mind a keres®, mindaz eredményoldal tetején feltüntetni. Kerüljük a Boole-logikán alapuló keresést, mivela felhasználók többsége ezzel a keresési móddal nem nagyon tudnak boldogulni. Sajnoselé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 magaa keres®program számára is könnyebb lesz majd a m¶velet, mert így sokkal pontosabbanfog 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 adhatmeg. A keres®rendszernek helyesírás ellen®rzést is végeznie kell, így az esetleg hibásanleírt szavak esetén is tudnia kell, hogy mire is gondoltak a szavak megadása során ésa keresés közbe jelezni kell a felhasználónak, hogy milyen hibás szó esetén milyen, akeres® számára helyesnek gondolt helyesbítést végzett. Esetleg ha a keres® valamilyenhelyesírási hibát vett észre, és több helyes megoldást is tudna ajánlani, akkor ezt azajánlatott fel is kell tüntetni a felhasználónak, és így a felhasználóra hagyhatja annaka tényét, hogy most melyik helyes megoldást kell felhasználnia a keresés során. Ígya keresési találatok száma is kevesebb lesz, mert a sok lehetséges megoldás helyettcsak a konkrét megoldásokkal fog dolgozni. Esetleg olyat is meg lehetne oldani ilyenesetekre, 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 tudjaeldönteni, hogy tényleg a megfelel® szavakra gondolt-e. Minden egyes találat soránel®ször a találatok listáját a legjobb oldalakkal kell kezdeni és utána kell haladni akevé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ókatnyú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 isrövidebb és könnyebben áttekinthet®bb lenne a keresési lista. Minden oldal eseténcé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-emegnézni külön az oldalt, vagy inkább a következ® keresési találatot nézze meg. Egyilyen összegzést az oldal fejlécében kell megadni, a következ® formátumban: <METANAME="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ása 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®eknekkell lennie. Esetleg ha egy szónak több alternatív formája is van, akkor azokat is adjukmeg, mert nem lehet tudni, hogy egy adott fogalmat egy felhasználó konkrétan milyenszavakkal 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ületekstí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 oldalaknakmutatják be a kicsinyített másolatát és azok közül lehet választani, hogy melyikinduljon el, természetesen a kis képekre való kattintással. Ilyen felülettel rendelkezikaz Opera és a Google Chrome. A Google Chrome esetén még kiemelt könyjelz®kelhelyezé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 akö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ösolyan oldalakat is üzemeltetni, amiket csak egy zárt kör¶ csoport tud használni. Erre acé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 majdré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, viszontnem szabad elfeledni azt a tényt is, hogy amíg az internet a világban él® embereknekszól, addig az intranet meg az adott cég dolgozóinak nyújt hasznos információkat amunkájukkal kapcsolatban. Szintén a cégeknél alkalmazott és kedvelt hálózati típus azextranet, 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 atervezésükkel jobban el®segíthetik a dolgozói termelékenységet és a dolgozó számáraminél el®nyösebb lehet az oldal használata. El®nyös kinézeti szempontból elkülönítenia 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értis ajánlott, ha külön stílus és sablongy¶jteményt hozunk létre a két esetre, de azérttö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öslehet az, ha legalább megegyezik a menedzsment, így sokkal könnyebb lesz a kétgá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 intranetesoldalak a cég különböz® dolgozóinak szól, így általában egy cégnek akár százszor vagyezerszer több intranetes oldala lehet, mint internetes. Több részb®l álló cégek eseténminden egyes saját oldalaknak a stílusai és elrendezése különbözhet, viszont létezni kellegy gyökér-honlapnak, ahonnét a cég különböz® részeinek az oldalai elérhet®ek, így egyegysé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 oldalakközött. Amíg a világon elég széles skálán mozoghat a különböz® típusú internetkapcsolatok, felhasználók által használt böngész®k és képerny®méretek száma, addigegy cégen belül el lehet azt érni, hogy a cég minden egyes alkalmazottjának ugyanolyanfelszereltsé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épekhezigazodjon a tervezés során. Ezáltal azt is el lehet érni, hogy mindenkinek ugyanolyanverziójú böngész®je legyen, és ha esetleg valamilyen változás következne be netesszempontból, akkor könnyebb lehet így értesíteni a dolgozókat a változásokról és akáregy adott határid®n belül már mindenkinek az aktuális készlete lenne az adott fontosdolgokból. Intranetes oldalaknál már ajánlott azt is megtenni, hogy a cég szervezetifelosztását tükröz® leírások készüljenek, mivel a dolgozóknak amúgy is ismerniük kellenea 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 azel®írtak legyenek, mivel lehet például olyan eset is, hogy nem minden platformra lehetfelrakni egy bizonyos böngész®t. Továbbá olyan is megeshet, hogy valaki az intranetesoldalakat a saját hordozható számítógépén vagy mobilján nézi meg, amik esetébenmegjelené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 isnö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 afeladatá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 oldaltfelhasználni, de azért próbáljunk törekedni arra, hogy legalább ez az egy lehet®ségis megfelel® legyen számukra és ezáltal is segítsük el® a munkájukat. Így lehet®lega 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®legminél kevesebb hibát ejtsük el. Ha esetleg egy legapróbb változtatás is el®nyös lehet adolgozó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íthatunkmeg 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áraképes. Különböz® osztályok közötti kommunikációs és ismeretszerzés céljára is lehetezzel a lehet®séggel élni, ezáltal is lehet a vállalatunk hatékonyságát lényegesenmegnövelni, hogy így a sok információ mellett elkerülhetjük azt, hogy a dolgozók esetlegvéletlenül mást csináljanak, ami aztán sok idejüket fogja elvenni. Egy alacsonyabbszinten lév® dolgozó is sok információhoz tud jutni magasabban lév® szinten, hisz eléglesz 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áigelé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óslehet®ség áll fenn ezen intranet felhasználásával. A cégen belüli információk elérésérekiváló lehet®séget kínálnak a hipertext-linkek. Ajánlott minden dolgozónak intranetesoldallal 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énajá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 projektleírása és el®története, és az ezekr®l szóló oldalak linkjei. Továbbá hasonló módon egyszervezeti 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 azintranet oldalban, mert ezáltal fél®, hogy nem a legfrissebb információk lesznekelé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énekelengedhetetlen feltétele egy megfelel®en m¶köd® keres®rendszer, hogy a kívántadatokat 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ánakfontos szerepe van. Sokat lehet tanulni a Yahoo vagy épp a Look-Smartkatalógusszerkezetéb®l, mivel ott elég sok pénzt költenek a megfelel® ergonómiára. Egyintranet összes oldalát indexel® keres®programhoz kapcsolódó keres®mez® is szükségeslehet. Hivatalos oldalakat akár valamilyen speciális ikonnal is lehet jelölni. továbbá azaktuális hírek is fontosak a cégen belül történt dolgokról, vagy akár egy dolgozóvalkapcsolatban is. A friss hírekkel el lehet kerülni, hogy sok dolgozó inkább az e-mail-t használja új információk szerzésére, mivel ilyenkor elég nehéz az összes üzenetrevá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 oldalrakiterjedt design szabvány használata és azt ajánlott ezt be is vezettetni. Érdemes err®la szabványról minden egyes alkalmazottat értesíteni és továbbá példákon keresztülielmagyarázás is sokat segíthet számukra megérteni, hogy miért is van szükség ezenszabvány használatára és hogy milyen interakciókat képesek elvégezni, hogy ezáltala jöv®ben már elég jól tudjanak elboldogulni a intranet rendszer kezelésében. Ilyenszabvány esetén ajánlott eltérni az internetes szabványoktól, hogy ezáltal is jobbanmeg 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 oldalonfeltüntetünk. Ezen logóra rákattintva pedig el lehessen érni a intranet hálózatunkhonlapját, ami a navigációs hierarchia csúcsa is egyben, ezenkívül mivel elégnagyméret¶ egy intranetes rendszer, így ajánlott elhelyezni egy keres®felületet is afontos információk gyorsabb megkeresése végett. Egy cégnél ajánlott, ha van egymindenki által elérhet® szabványszakért®, aki új designokat is képes átnézni a formálisszabályoknak megfelel®en és tud a tervez®kkel konzultálni abban az esetben, havalamelyiknek esetleg problémái lennének a designnal kapcsolatban. Esetleg fel kellkeresni minden egyes projekteket, hogy át lehessen vizsgálni az ® intranet oldalaikat azesetleges hibák elkerülése véget és közbe �nom szavakkal az oldalaikat is értékeljük. Aszabványt fejleszt®eszközökkel és sablonokkal kell támogatnunk, hogy könnyebb legyena betartása. Az extranetet fel lehet használni arra a célra, hogy a web-tervez®k onnétel 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élespeciális hozzáférési jogai vannak és használhatnak különböz® rész-site-okat. Általábanvá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ílusbanaz extranet inkább az internethez hasonlít és nem az intranethez, mivel ez is részben egypublikus oldal, ahol a vásárlók is gyakran el®fordulhatnak, mint honlap-használók, deazért az internetes és az extranetes oldalak között azért valamiféle megkülönböztetésnekajá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 abefolyá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 általtörténik és nem saját hálózaton. A távoli felhasználó élményének nem a központi részeaz extranet oldalunk, köszönhet®en annak, hogy a sok vev® és beszállító cég más céggelis 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árrégóta kapcsolatban állhat, ezáltal az üzleti modellt is magába hordozza egy extranetoldal, emiatt még hirdetések feltételére sincsen nagyon szükség. Egy extranetet akárcsak egyszer, de speciális célra fogja egy felhasználó használni, vagy akár többszörugyanarra 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ó jobbanigyekszik 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 ahá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®eka 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 ilyenkorelég nagy felháborodást is okozhat egy vagy több ember számára, vagy akár egynagyobb csoport nemtetszését is elérhetjük ezzel, ami meg már akár nemzetközi perhezis vezethet. Szerencsére már a kezdetek óta gondoltak a nemzetköziségre, így már alegels® HTML verzióba bele voltak már építve a nemzetközi karakterek, és egy oldalonaká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, hogymelyik id®zónáról is van szó, esetleg azt is kiírathatjuk, hogy egyes id®zónáktól mekkoraaz eltérés. Mivel a dátumot is több féleképpen szokás leírni (például külön verzió vanaz angoloknál és külön az amerikaiaknál), ezért a félreértések elkerülése végett írjuk kia 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 érkezneknagyobb számban vásárlók, akkor az ® nyelvükre is célszer¶ egy fordítást elvégezni. Bársokszor 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ódlé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 akü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 honlaponelhelyezünk egy nyelvválasztó menüt, de harmadik alternatívaként akár az összesoldalra elhelyezhetünk egy ilyen menüsort. Elég gyakori mód a nyelvek feltüntetésérea zászlók alkalmazása, viszont sajnos egyes esetekben nem egyértelm¶, hogy milyenzászlóval is jelöljük meg az adott nyelvet, így inkább a zászlók helyett/mellett tüntessükfel 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 isszü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 anagyközösségnek arról is, hogy bizonyos termékeket csak mely üzletben forgalmaznak.

2.11. Hátrányos helyzet¶ek támogatása

2.11.1. Látáskárosultak megsegítése

Mivel a legtöbb weboldal inkább vizuális, így egy látáskárosult vagy egy megvakultember 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ínkombiná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 nagykontrasztok 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 aháttérre koncentrál. Címsorok esetén a <H1>, <H2>,... tagek használata a célszer¶,és egyes honlapok esetén a képerny®olvasót lehet utasítani arra, hogy csak az egyesszinten lév® információkat olvassa fel a látáskárosult számára. Minden egyes elemnagysága legyen százalékba megadva, mivel ilyenkor a nagyítás során az elemek amegfelel®képpen nagyítódnak, hogy ezáltal az oldal egyensúlya ne sz¶njön meg ésnagyí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 rendesenlá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ánlottrövidnek, tömörnek és lényegre tör®nek lennie, habár a dekorációt szolgáló képek eseténkivételesen inkább ezt az attribútumot ne használjuk, vagy inkább csak ALT="" legyenmegadva, mivel a képolvasók lehet, hogy a felhasználót �gyelmeztetni fogja egy ALT-otnem 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, hogyvalakinek hang-, vagy videó formájában is van közölnivalója. Ilyenkor elég nagy gondotokozhat azoknak, akiknek a hallása károsult vagy éppen teljesen süket. Ebben azesetben ajánlott a multimédiás és videós fájlok vagy ablakok esetén szöveges formábanis leírni, hogy éppen mit lehet az adott fájlon vagy ablakon látni és hallani. Videókeseté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¶klegyenek fehér szín¶ek és lehet®leg félkövérek vagy kövérek, hogy rossz képmin®ségeseté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¶zetvagy az egér használata, így próbáljunk lehet®leg olyan interakciókat készíteni, aminem igényli a bonyolult és ki�nomult input-eszköz használatt, így az ilyen emberekszámára is a megfelel® m¶veletek elvégezhet®ek lesznek. Továbbá nagy segítség lehetaz is, ha az oldalunk minden egyes funkcióját kizárólag a billenty¶zet használatávalmá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ükvagy túl rövid memóriával rendelkeznek, így számukra nehéz lehet a tájékozódás azoldalainkon 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, amita TITLE attribútumban adunk meg. Továbbá az írászavarosak támogatására olyankeres®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énhasonló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®legegy weboldalat célszer¶ úgy megírni, hogy a letöltési id® ne legyen nagyobb 10másodpercnél, de a legcélszer¶bb egy olyan weboldal megírása lenne, ami a másodperctö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állehet®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 aztis, hogy mekkora méret¶ is az adott fájl, így ilyen esetben is a lassabb letöltésre feltudjon 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ásamiatt 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 azinternet 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 kelljelentkezni egy oldal el®állítása közben, ami szintén id®t vehet el, bár léteznek olyaneljá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ésf®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 gyorskapcsolattal tud rendelkezni és sokáig ezen nem tud változtatni. F®leg olyan isel®fordulhat, hogy egy felhasználó inkább kivárja az adott netkiszolgáló esetén ah¶ségnyilatkozat lejárását (mivel ellenkez® esetben komoly pénzösszeggel járhat alevá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 afolyamat, hogy valaki megpróbál a számára megfelel® kiszolgálóra rátalálni. Hiába islehet 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ódosula hálózat és a lehet®ség.

f) Egyszer¶ platformok esetén nehézségeket okozhat az összetettebb honlapokelemeinek a megjelenítése, ilyenkor olvashatatlan oldalak is létrejöhetnek ahol esetlega megjelenített tartalmak egymás is csúszhatnak.

Az is eredményezhet gyorsabb válaszid®t, ha ezen elemeket együttesen próbáljuktovábbfejleszteni, mivel akár egy elem lassú mivolta is okozhat komolyabb növekedést aválaszid®ben. A felhasználókat a nagy válaszid® arra késztetni, hogy az ügyeiket inkábbmá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 mindaddignyitva 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�konoklesznek�

2003 2004 2005 2006 2008 2009 800*600 48% 37% 30% 20% 6,16% 4,19% 1024*78640% 47% 52% 57% 42,26% 33,82% Nagyobb 5% 10% 12% 18% 40,21% 45,63% Egyébmé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ákelérni, hanem notebook-on, palmtop-on való elérés is lehetséges számukra, és ezen kívülmé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ítaniarra, hogy különböz® képerny®kön való megjelenítés során az oldal elemei esetlegmás pozícióban fognak megjelenni, ezáltal az általunk esetlegesen létrehozott kényesszimmetria 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. Azalábbi gra�konok és az azokon szerepl® adatok leolvasásával az általam létrehozotttá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 ezeninformációk ismeretével az esetleges ilyen okból okozott megjelenítési hibák gyakoriságalecsökkenjen.

Az gra�konokról leolvasható, hogy az utóbbi 6 évben er®sen lecsökkent afelhasználók körében a 800*600-as képerny®nagyságú kijelz®k használata, 2003-r®l2009-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árlátható, hogy az ilyen nagyságú monitorok is már egyre kevésbé kezdenek elterjedteklenni, 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ánsabbaklenni, így belátható id®n belül az ilyen méret¶ kijelz®k lesznek a legelterjedtebbek, bárnem lehet tudni, hogy meddig lesz majd vezet® szerepben és hogy a jöv®ben mennyirefognak elterjedni az ennél is nagyobb méretek, vagy inkább az emberek megmaradnakennél a méreteknél különböz® okok miatt. Az egyéb méret¶ kijelz®k elterjedése el®szörlassan és alig észrevehet®en következett be, de mára már ezek is egyre kedveltekkezdenek lenni a netes mobiltelefonok és kis méret¶, akár zsebbe dugható számítógépekné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�konoklesznek� Sajnos még a legegyszer¶bben megírt oldalak esetén is el®fordulhat, hogya 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éppenstatisztikai adattokkal szeretném önöket tájékoztatni, hogy az elmúlt évekbenmilyen 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 melyböngész®k voltak a legelterjedtebbek az egész világon, amíg az alattuk lév® gra�konoka 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 azokközül is inkább az utóbbi kezd egyre népszer¶bb lenni a jobb kontabilitása miatt. Atöbbi böngész®k, azok is legf®bbként a Google Chrome, a Safari és az Opera összesencsak a netez®k alig 5-6

Magyarországon is hasonló a helyzet, mint a világ egészén, vagyis itt is a FireFox vankiemelked® helyen és utána pedig az egyre kevésbé népszer¶ Internet Explorer. Hiábabizonyult 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 azoperá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 azegymás alatt lév® képek között. Azt is észrevettem, hogy ha például egymás mellett vanné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áta stílus lapon, de a többiekét igen, akkor ha böngészés közbe változik az egyesítettmez® 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 ésaz adott mez®ben túlcsordulás keletkezik, akkor az Internet Explorer valamiért nemjeleníti meg a görget®sávot vagy ha mégis, akkor meg inaktívan és a mez® beállítottnagysá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álikelérhet®vé az internetez®k körében. Viszont óvakodjunk ezekt®l az új verziós dolgokhasználatától, mivel sok felhasználó körében megszokás miatt még a régebbi verzióttámogató böngész®ket használják és elég ritkán szoktak áttérni valami újra. Ezért is kelltö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 aHTML 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®khasználatát érdemes szintén elkerülni, mivel ezen verziók esetén még gyakoriak lehetneka lefagyások, amik kellemetlenek lehetnek az esetleges fontos böngészés közben. Az újverzió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 afelhasználtság és a megfelel® megjelenés is biztosított. Ha a tervez® mégis az újabbanmegjelen® dolgokat is szeretne felhasználni egy weboldal tervezése során, akkor ajánlottegy olyan alternatívát is elkészítenie a f®verzió mellett, ami még a régi elemekettartalmazza, hogy azon felhasználók is tudják élvezni a weboldal használatát, akikbö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 milyenszabály szerint kell leírni az adott szavakat. Továbbá szintén nagy gondot szoktak okoznia régies írásmódban íródott szavak és a külföldi kifejezések pontos leírása. A találatokkiírásánál is legtöbbször nem az a f® szempont, hogy mennyire hasznos azaz oldal anetez®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álniaz emberek, hogy az oldalt teljes tartalmát, vagy az oldal jelent®s részét ki tudjáknormálisan nyomtatni. Egy PDF fájl éppen hogy nem az interneten való olvasásraajá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, amitpedig több weboldalban és a weboldalak közötti megfelel® kapcsolatokkal könnyebbenmeg 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 fontosinformá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árafontos lehet azon információ, hogy mely oldalakat járta már be. Ezért is fontosmegváltozatni az olyan linkek színét, ahol már el®z®leg járt már a felhasználó. Egyilyen linknek a színe általában lila vagy piros szokott lenni, de a designtól függ®enezen 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, hogymely link volt már el®z®leg meglátogatva. A még nem látogatott linkek színét is hagyjukmeg 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 ishamar tönkre tud menni az állandó képerny®bámulástól. Ezért is ajánlott egy szövegetmegfelel®képpen formázni, a megfelel® helyekre bekezdéseket rakni, a szöveget kisebb-nagyobb 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 éslé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 oldalainkeseté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 fognakezen bet¶k megjelenni. Ezért is ajánlott a bet¶méretet relatívnak, esetleg százalékosanmegadni, 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éppenvan megadva, akkor az egész oldal sokkal olvashatóbbá válik bármely platformon, mivelakkor minden elem mérete alkalmazkodni fog a megjelenít®höz, és így az általunklé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 tudjukkutatni. Egy keres®rendszer általában az oldal <TITLE> tagjában leírt címet és aszöveg els® részét írja ki az eredményrészben, ezért is szükségszer¶, hogy azon részeknélminél több információt lehessen megtudni az oldalunkkal kapcsolatban. Az oldalak címeszokott lenni az alapértelmezett neve a hivatkozásnak ha az adott oldalt a könyvjelz®kközé felveszik, bár az a név a felhasználó által változtatható. Soha ne kezdjük el egycí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áregyenesen undorítóak lehetnek (lásd: a kövér n® mennyi kilótól fogyott meg, ésmutatjá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 alehet®ségekhez képest próbáljuk meg elkerülni minden olyan helyre való kiíratásátaz információknak, amelyeknek a kinézete egy reklámra emlékeztet, mivel az ilyenrészeket általában a felhasználók próbálják nem észrevenni, esetleg le is tilthatjáka 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áselé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üka gyors és könnyed használatát az oldalunknak. Ne feledjük, hogy a rossz hír gyorsanterjed, és ha az oldalainkat nem tartják megfelel®nek, akkor egyre kevesebb és kevesebbfelhaszná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 nekelljen új ablakokat megnyitni, mivel ilyen esetben a felhasználók által elég gyakran ésjogosan használt "Vissza" gomb és az oldalaink navigációs felülete nem tud rendesenvagy 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 fontosinformá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ámukralegf®bbként a különböz® méretek, a kapacitás, a termékek ára és a garancia, valaminta házhozszállítás költségeit és az esetleges szerelési költséget se feledjük el a tudtukrahozni.

2.15. Oldalak tesztelése

2.15.1. Tesztelés lényege

Mindennapi ember életében fontos, hogy az általa elérend® célt minél könnyebben eltudja érni, ezért is fontos, hogy az internetes oldalak a felhasználók számára tetsz®seklegyenek, az oldalak között könny¶ legyen a navigáció és hogy a szükséges információkatbelátható id®n belül meg tudják szerezni. Ezért is fontos, hogy az oldalak készítésekö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 aszükséges problémamegszüntet® lépéseket még idejében elvégezzük. Egy oldalnak többfontos 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 azinformá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 azoldalakat 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®smértékben hozzájárulhat egy megfelel® design eléréséhez. Végezetül arról is szerezzünkinformációt, hogy mennyire okozott élményt a designunk és hogy mennyire vannakmegelégedve. Egy megfelel® tesztelés során ilyen és ehhez hasonló kérdésekre ésismeretekre 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, amiketa tesztelés során akarunk elemezni. Ajánlott inkább csak néhány, viszont a honlapszempontjá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, érdemes-e az adott terméket/termékeket megvásárolni. Érdemes egy tesztelés során olyanm¶veleteket elvégeztetni a tesztalanyokkal, amiket egy szokványos vásárlás soránhajtódnak végre. Például el®ször érdemes megkérdezni t®lük, hogyha a f®oldalt nyitjákmeg, 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 atesztel®ket, hogy adják hozzá a kívánt terméket a kosárba, érdekl®djenek afel®l, hogyaz 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ákmindennap 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 internethaszná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 azoldalaink 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 isrészt vettek az adott oldalaink tesztelésénél de ilyenkor is ajánlott új emberekettoborozni, hisz olyan hibákat is észre tudnak venni, amit az el®z® teszteléseken márré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 afá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 azemberek nyugodtan tudnak érvényesülni és semmi sem zavarja ®ket az általukel®állított feladatok elvégzésében. Tesztelés során próbáljon úgy elhelyezkedni, hogyminé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örielemzése során még nagyobb képünk legyen a tesztel®k reakciójával kapcsolatban. Demég miel®tt elkezdené a tesztelést, nézze át pontosan, hogy minden fontos témávalkapcsolatban 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ésesetén adható-e jó válasz vagy a kérdésben megadott m¶veletek akadálymentesenelvé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övidenaz ö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ánnem lesz olyan feladat, amikre rosszul tudnának válaszolni és kérjük meg ®ket, hogya 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 senkimellett 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 alatthangosan 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 egyilyen teszt során és ilyen esetben ezen hibákat ki is kell majd javítani, amihez nagysegí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ákmegoldá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 teszteltoldalakkal 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 hasznosnakinformációszerzés szempontjából és hogy mennyire tudtak elboldogulni a teszt soránkérdezett feladatokkal. Aztán érdekl®djön afel®l is, hogy mennyire emlékeznek azoldalakból, milyen funkciókra és lehet®ségekre emlékeznek, amit az oldalak nyújtanitudnak. Végezetül köszönje meg a teszt résztvev®it, hogy szakítottak id®t arra, hogyaz 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®.huhonlapró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, hanemvízszintesen is kell görgetnem. Továbbá feleslegesnek tartom, hogy két helyen is lehetbejelentkezni valamint regisztrálni. Szerintem elegend® a jobb oldali mez® megtartásaerre a célra, felesleges szerintem egyb®l ezzel kezdeni az oldal szövegét. Valamint szinténtúlzásnak tartom azt, hogy a tartalom részben is elérhet® a keresés, és ráadásul túl nagyméretben tüntették fel. Els® ránézésre azt hittem, hogy ez az oldal csak nyomtatókkalfoglalkozik, mivel a címb®l is ez derül ki, de lentebbre érvén észre lehet venni, hogymá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 feleslegesnektartom az új termékek feltüntetését a f®oldalon, mivel szerintem ilyen célra akár egykülön oldalt lehetne létrehozni, vagy olyan helyen feltüntetni, ahol a nyomtatók vannakfeltüntetve. Noha igyekeznek megfelel® méret¶ képben megjeleníteni a nyomtatókat azajá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ákattintvamaga a honlap jelenik meg. A fejléc alatt megjelenik a mélységi navigáció, így könnyenbe lehet azonosítani, hogy a hierarchiában az adott oldal és a f®oldal között milyencsomópontok voltak, így azt feltételezem, hogy az oldalak között hierarchia van. Amélységi navigáció alatt, a bal oldalon a szélességi navigáció is megjelenik, ahol af®kategóriák vannak feltüntetve. Továbbá egy b®vebb kategóriakeres® valamint egygyártó szerinti keres® is el van helyezve. A navigáció szerencsére itt nem foglal el sokhelyet, 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ábanlév® termékek nevei, árai és képei vannak felsorolva, és itt is megjelenik a legkedveltebbmetafora, a bevásárlókocsi. Tetsz®leges termékre rákattintva b®vebb információttudhatunk 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. mennyivan és hogy mennyi garancia jár az adott termékre. Valamint alul további termékekmegvásárlására tesz ajánlatot, de olyanokra, amiket ezen termék mellett szoktam mégmegvásárolni. Minden oldal tetején megegyezik a fejléc és a mélységi navigáció ismegfelel®en észrevehet® és m¶köd®képes. A két oldalon a navigáció mellett gyártóiinformáció megnézésére, kosár megtekintésére, ügyfélszolgálatra és további ajánlatokmegnézésére van lehet®ség, legalul pedig feltüntetik, hogy milyen képerny®méretre vanaz oldal optimalizálva, kik a támogatók és itt is van egy navigációs rész, ahonnét alegfontosabbnak tartott oldalakra lehet elugrani. Valamint reklámok is találhatók azoldalakon, de azok nem foglalnak el jelent®s területeket. Összegezve,inkább a F®oldaltrendezném át, hogy ne tartalmazzon sok azonos elemeket, és a f®kategóriás képekmé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úlkeskeny. Másodszor nem tudom, hogy a mondanivalót mért éppen hírekkel kezdik. Anavigáció itt nem túl meggy®z®, lényegében csak a két hosszadalmas oldalsó felületeknyújtanak némi navigációs lehet®séget. Semmi jelét nem látom annak, hogy melyoldalakon 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égoldalain belül éppen melyiken vagyunk. Bár egyetlen még hasznos navigációs elemnekitt 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 nagyonrendezetlen formában jelenítik meg, szinte rossz olvasni, hogy a nagy kép miatt sz¶khelyre szorították a fontos szöveget. Továbbá nem értem ,hogy milyen megfontolásbóllehet minden egyes termék esetén véleményt megadni és miért nem lehet erre egy különfórumoldalt létrehozni, ahol a vásárlók szabadon megoszthatnák egymással az egyestermékekr®l való véleményüket. Esetleg ennek a fórumoldalnak elég lenne termékenkéntmegadni 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églogó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 általhasznált szolgáltatásokkal egészítünk ki.

Ez egy olyan statikus nyelv, ahol az elemeket tagekként kell megadni, vagyis vanegy nyitótag [[<elemnév attríbutum="érték">]], valamint egy zárótag [[</elemnév>]].Az elemnevek egy el®re meghatározott HTML parancskészlet elemei, az attríbutumokis kötöttek. Egy elemen belül több elem is el®fordulhat, amik az elem nyitó-, észárótagja között helyezkednek el. A megjegyzést <!- - és - -> 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évattríbutum="érték" /> jelölést kell alkalmazni, és az elemek közötti átfedés semmegengedett. Egy HTML fájl két f® részb®l áll, egy fejrészb®l, ahol az adott oldaltulajdonságai vannak megadva, és egy törzsb®l áll, ahol a megjelenített elemek kódjaihelyezkedik el.

Az oldalak vázát a design szabályainak megfelel®en olyan HTML kódbankészítettem el, ahol az elemek stílusainak a tulajdonságai nem HTML nyelven vannakbeállítva, hanem csak ID vagy NAME tagekkel ellátottak, amiket a CSS fájlokhasználnak fel azonosítás céljára és ezen elemek tulajdonságai is külön a CSS fájlokbanvannak 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 aparancsokat névvel ellátott blokkba kell rendezni, ahol a nevek megegyeznek annaka HTML elem(ek) azonosítójával, amit be szeretnénk állítani. Ha egy elemr®l vanszó, akkor a blokk neve elé #, több elem esetén pedig . jelet kell elhelyezni. A blokkneve után a parancsok és között helyezkednek el. Ezen parancsok el®re meghatározottnévvel kezd®dnek, amit : után követi a parancs értékei. Minden parancs ;-el végz®dik. Amegjegyzé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 nemengedtem magának a webalkalmazásomhoz tartozó oldalaknak a szélességét. Ennélkisebb képerny® esetén a szélességet 100%-ra állítottam. Ezen okból kifolyólag 3 CSSfájt hoztam létre, kett®t olyan elemek tárolására, amelyekre az el®bb megemlítettkorlátozás érvényes (egyik fájlban a 1280px-nél nem nagyobb, a másiknál pedig az1280px-nél nagyobb kijelz®kre érvényes beállítások vannak. A harmadik CSS fájlbanlé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á lehettenni.

A JavaScript kódot a HTML fejlécbe kell helyezni, a <scripttype="text/javascript"> és a </script> elemek közé. Objektum-alapú nyelv,vagyis a JAVA-val ellentétben nem objektum-orientált. A futása a kliens oldalontörténik, így például szerver oldalon futó PHP kódokat nem tartalmazhat! Ez anyelv 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, valamintegyes eseményekre is be lehet állítani további események generálását, például egygombra való kattintás során egy új ablak fog megjelenni. Továbbá HTML elemeketlehet azonosítani a document.getElementById parancs seítségével, így azon elemeketké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ógombokeseté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 <?php valaminta ?> 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 kellelmenteni. Itt a kifejezések C-szer¶ek, az operátorok viszont ugyanazok, mint a Javaeseté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 isalkalmazni, így alkalmas adatbázisok kezelésére is, ha a MySQL parancsokat használjukfel. Ezen kívül ideiglenes adatbázisokat is létre lehet hozni és alkalmzni, mint példáula COOKIE-k, vagy aár az URL-be rakhatunk ki adataokat, vagy onnét olvashatjuk leazokat. Különböz® információkat kérdezhetünk le vagy állíthatunk be a klienssel és aszerverrel kapcsolatban.

Az el®bb leírt funkciók közül szinte mindegyiket felhasználom a webalkalmazásomsorá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épesekvagyunk akár komplexebb lekérdezések végrehajtására és más egyébre. Viszont az SQL-t 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 akarunkmegvalósítani, esetleg a bevitelre kerül® értékek egy listából választjuk ki. Erre a célralettek 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 miaká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ókalapján maga az alkalmazói program állítja el® és küldi el az adatbázisba és ez isfogja megjeleníteni az adatbázisból megadott információt, valamint hibakezelkéssel isfoglalkozik. Például a webalkalmazás esetén maga a webalkalmazás lesz ezen alkalmazóiprogram.

Továbbá lehet®ség van a PHP-n keresztül is használni az SQL parancsokat aMySQL-t használva. Adatbázis használat el®tt el®ször be kell lépni az adatbázis-rendszerbe, majd azon belül a használni kívánt adatbázist is meg kell adni. Enneka 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 kiis í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 ateljes eredmény kiiratásához, mivel egyenként lehet kiirattatni az eredményt, de eztberakhatjuk egy $nagysag-szor lefutó ciklusba. Magának aza adatok lekérdezéséheza $lekerdezes = mysql_fetch_array($parancs) utasítást kell kiadni, ami után azx1 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ítsaa címet, amit a $cim paraméter értéke lesz. Ezen belül megadja a szükséges METAinformá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 tartalomugyanazon oldalon vagy lapon jelenjen meg. Erre a JavaScript document.locationparancsá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 "<!-- Dokumentum típusának megadása --><!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"\"http://www.w3.org/TR/html4/loose.dtd\"><html><head><!-- Meta-adatok beállítása és a CSS fájl linkelése --><meta http-equiv=\"Content-Language\" content=\"hu\"><meta http-equiv=\"content-type\" content=\"text/html;charset=iso-8859-2\"><title>$cim - EROS TEAM Informatikai Áruház</title><link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\"><script type=\"text/javascript\">if (screen.width > 1280) {document.write(\"<link rel='stylesheet' type='text/css'href='stylenagy.css'>\");}if (screen.width <= 1280) {document.write(\"<link rel='stylesheet' type='text/css'href='stylenormal.css'>\");}function goTo(a){document.location=a;}</script></head><body link=\"cyan\" vlink=\"red\">";}

3.2.2. getpost - includes.php

Ebben a részben megadjuk, hogy a FORM-on belül megadott adatokat mely oldal fogjaa POST segítségével lekérdezni

function getpost($cim){echo "<form method=\"post\" action=\"$cim\"enctype=\"multipart/form-data\">";}

3.2.3. fejlec - includes.php

Ezzel a függvénnyel lehet ténylegesen magának az oldal fejlécét beállítani. Itt az alábbiparamétereknek kell értéket adni:$tipus: Az oldal milyen típusú (publikus vagy privát)

42

3.2. JavaScript és PHP függvények

$tipus2: Mélységi navigáció beállítása$szoveg: Milyen szöveg jelenjen meg az Áruház neve alatt$szint: Hanyadik szinten helyezkedik el az oldal a hierarchiában$nev1: Hierarchia 1. elemének a neve$nev2: Hierarchia 2. elemének a neve$nev3: Hierarchia 3. elemének a neve

function fejlec($tipus,$tipus2,$szoveg,$szint,$nev1,$nev2,$nev3){echo "<table id=\"tablehead\"><tbody>$aktualisAl<!-- Szimbólum kirakása és az Áruház nevének valamintaz oldal szövegének a kiiratása --><tr>";if ($tipus=="Publikus") {echo "<td id=\"cimsor\" colspan=\"2\">";}if ($tipus=="Privát") {echo "<td id=\"cimsorEX\" colspan=\"2\">";}echo "<a href=\"index.php\"><img alt=\"Szimbólum\"src=\"pics/Symbol.jpg\" align=\"left\"></a>EROS TEAM Informatikai Webáruház<br><small>$szoveg</small></td></tr><!-- Mélységi navigáció --><tr>";if ($szint>0) {if ($tipus=="Publikus") {echo "<td id=\"mely_navi\">Hely: <a href=\"index.php\">Honlap</a>";}if ($tipus=="Privát") {echo "<td id=\"mely_naviEX\">Hely: <a href=\"index.php\">Honlap</a>";}}if ($szint>1) {if ($tipus2=="1") {echo " &gt;&gt;<a href=\"fokategoria.php?kategorianev=$nev1\">$nev1</a>";}if ($tipus2=="2") {echo " &gt;&gt;<a href=\"$nev1\">$szoveg</a>";}if ($tipus2=="3") {echo " &gt;&gt;<a href=\"termekek.php?lap=1\">Raktár</a>";}}if ($szint>2) {if ($tipus2!="3") {echo " &gt;&gt;<a href=\"alkategoria.php?fokategorianev=$nev1&alkategorianev=$nev2&lap=1\">$nev2</a>";}

43

3.2. JavaScript és PHP függvények

if ($tipus2=="3") {echo " &gt;&gt; <a href=\"$nev1\">$szoveg</a>";}}if ($szint>3) {echo " &gt;&gt;<a href=\"aru.php?fokategorianev=$nev1&alkategorianev=$nev2&terkod=$nev3\">$nev3</a>";}echo "</td><!-- Keresés --><td id=\"search01"; if ($tipus=="Privát") echo "EX"; echo"\"><input value=\"Keresés...\" type=\"button\"onclick=\"goTo('kereses.php')\")></td></tr></tbody></table>";}

3.2.4. iranyitopanel1 - includes.php

Létrehozza egy publikus oldal bal oldali irányítópaneljét.

function iranyitopanel1($tipus){global $fotemak_szama, $fotema_nev, $fotema_cim;if ($tipus=="Publikus") {echo "<td class=\"menu\" valign=\"top\">";}if ($tipus=="Privát") {echo "<td class=\"menuEX\" valign=\"top\">";}echo "<u>F®bb kategóriák:</u><br>";for ($i=0;$i<$fotemak_szama;$i++) {echo "<input type=\"button\" value=\"$fotema_nev[$i]\"style=\"width: 90%\" onclick=\"goTo('$fotema_cim[$i]')\"><br>";}

echo "<hr><u>B®vebb információk:</u><br><input type=\"button\" value=\"Információs oldal\"style=\"width: 90%\" onclick=\"goTo('informacio.php')\"><input type=\"button\" value=\"Honlaptérkép\"style=\"width: 90%\" onclick=\"goTo('terkep.php')\"><hr><u>WEB-alkalmazást készítette:</u><br>Er®s Tamás Mihály (IEDBZO)<br>

44

3.2. JavaScript és PHP függvények

/Miskolci Egyetem hallgatója/<p><u>Felhasznált WEB-szerkeszt®k:</u><br>Amaya 11.3.1. (nyílt forráskódú)<br>NotePad++ 5.6.8. (nyílt forráskódú)<hr><small style=\"color: maroon;\">Figyelem: Ez az alkalmazás csakegy model, amit a Szakdolgozat keretén belül készítettem!<br>Tényleges vásárlásra itt nincs lehet®ség!<br>Ilyen áruház valójában nem létezik!</small></td>";}

3.2.5. iranyitopanel2 - includes.php

Létrehozza egy publikus oldal jobb oldali irányítópaneljét.Szükséges paraméterek$regnev: Bejelentkezett tag felhasználói neve$regszint: Bejelentkezett tag jogosultsági szintje

function iranyitopanel2($regnev,$regszint){echo "<td class=\"menu\" valign=\"top\" align=\"center\">";if ($regnev=="") {print "\t\t\tRegisztráció és Bejelentkezés:\t\t\t<input value=\"Regisztráció\" type=\"button\"style=\"width: 90%\" onclick=\"goTo('regisztracio.php')\">\t\t\t<input value=\"Bejelentkezés\" type=\"button\"style=\"width: 90%\" onclick=\"goTo('bejelentkezes.php')\">\t\t\t<input value=\"Elfelejtett jelszó\" type=\"button\"style=\"width: 90%\" onclick=\"goTo('elfelejtett.php')\">";}else {print "\t\t\tÜdvözöllek $regnev az oldalon\n";print "\t\t\t<input value=\"Saját oldal megtekintése\" type=\"button\"style=\"width: 90%\" onclick=\"goTo('sajat.php')\">";print "\t\t\t<input value=\"Kijelentkezés\" type=\"button\"style=\"width: 90%\" onclick=\"goTo('kijelentkezes.php')\">";}echo "<input value=\"Panaszkönyv\" type=\"button\"onclick=\"goTo('forum.php?atw_rnd=168741642&tema=Panaszkönyv')\"style=\"width: 90%\"><!-- Akciós termékek felsorolása --><hr><u>TOP 5 Akciós termékek<br>Az egész áruházban:</u><br>";$parancs = mysql_query("SELECT Kod,Ar,Valtozas,Kep01,Fokategoria,Alkategoria FROM Termekek WHERE

45

3.2. JavaScript és PHP függvények

Valtozas < '100'AND Valtozas > '0' ORDER BY Valtozas");for ($i=1;$i<=5;$i++){$lekerdezes = mysql_fetch_array($parancs);if ($lekerdezes[0]!=""){$cim = "aru.php?fokategorianev=$lekerdezes[4]&alkategorianev=$lekerdezes[5]&terkod=$lekerdezes[0]";$akcio = 100 - $lekerdezes[2];echo "Termék kódja = $lekerdezes[0]<br>Termék ára = $lekerdezes[1] Ft<br>Akció nagysága = $akcio %<br><a href=\"$cim\"><img src=\"$lekerdezes[3]\" alt=\"$lekerdezes[0]\"title=\"$lekerdezes[0] kódú termék megnézése\" width=\"40%\"></a><p>";}}echo "</td>";}

3.2.6. GETFokategoria - feltoltes.php és modositas.php

Egy megadott termék f®kategóriájának a beállítása

function GETFokategoria(a){document.getElementById("fokategoriaID").value=a;}

3.2.7. kiszamit - modositas.php

Kiszámítja egy termék új árát, valamint engedélyezi a SUBMIT gomb használatát

function kiszamit(){document.getElementById("ujar").innerHTML =Math.round(document.getElementById("terregiarID").value *document.getElementById("tervaltozasID").value / 100);document.getElementById("ujarHidden").value =document.getElementById("ujar").innerHTML;document.getElementById("submitGomb").disabled=false;}

3.2.8. torol - regisztracio.php

Ha rálépünk az ¶rlap valamelyik mez®jére, akkor annak az értékét automatikus törli.

46

3.2. JavaScript és PHP függvények

function Torol(i){document.getElementById("Mezo"+i).value="";}

3.2.9. ellenoriz - regisztracio.php

Leellen®rzi, hogy megfelel®képpen lett-e kitöltve az ¶rlap. Azon mez®k esetén ahonnem, ott a mez® neve mellé egy Hiba! fog megejelnni, különben OK!. Ha midnenmez® megfelel®képppen lett kitöltve, akkor megjelenik az adatvédelmi nyilatkozat,ahol el lehet dönteni, hogy az alábbi nyilatkozatot elfogadjuk és folytatjuk továbba regisztrációt, vagy elutasítjuk, így nem lépünk tovább.

function Ellenoriz(){error="0";for (i=0;i<=13;i++){if ((i!=2)&&(i!=3)&&(i!=4)&&(i!=12)){if (document.getElementById("Mezo"+i).value == ""){document.getElementById("hiba"+i).innerHTML=" Hiba!";error="1";}else{document.getElementById("hiba"+i).innerHTML=" OK!";}}}for (i=15;i<=17;i++){if (document.getElementById("Mezo"+i).value.length < 6){document.getElementById("hiba"+i).innerHTML=" Hiba!"; error="1";} else{document.getElementById("hiba"+i).innerHTML=" OK!";}}Szev=document.getElementById("Mezo2").value;Szhonap=document.getElementById("Mezo3").value;Sznap=document.getElementById("Mezo4").value;if (((Szhonap=="2")&&(Sznap=="29"))||((Szhonap=="2")&&(Sznap=="30"))||((Szhonap=="2")&&(Sznap=="31"))||((Szhonap=="4")&&(Sznap=="31"))||((Szhonap=="6")&&(Sznap=="31"))||((Szhonap=="9")&&(Sznap=="31"))||((Szhonap=="11")&&(Sznap=="30"))||((Szev % 4 != 0)&&(Szhonap=="2")&&(Sznap=="28"))){document.getElementById("hibaev").innerHTML=" Hiba!"; error="1";} else{document.getElementById("hibaev").innerHTML=" OK!";}if (error == "0") {document.getElementById("SubmitGomb").type="submit";document.getElementById("ElutasitGomb").type="button";document.getElementById("EllenorizGomb").type = "hidden";document.getElementById("VisszaGomb").type="hidden";document.getElementById("regisztracio").style.display="none";

47

3.4. Publikus oldalak

document.getElementById("nyilatkozat").style.display="block";}}

3.3. Minden oldalra érvényes tulajdonságok

Az oldalak szélessége 100%-os, de 1280px-nél nagyobb szélesség¶ kijelz®k esetén ez �xen1280px. Az oldal háttere fekete. Minden oldal rendelkezik fejléccel és tartalmi résszel,továbbá a publikus oldalak a tartalmi rész két oldalán egy-egy irányítópanellel. A fejléckét részre tagolódik. El®ször a bal fels® sarokban az áruház emblémája jelenik meg, amiegyben az áruház honlapjára mutató hiperlink. Az embléma után a cég neve jelenik meg250%-os nagyságban, alatta pedig az oldal neve <small> tagek között. A szöveg középrevan rendezve. A második rész már nem mintás, hanem sima háttérrel van ellátva, ésfehér, 1px szélesség¶ kerettel van ellátva, amíg az egész fejléc keret nélküli. Ebbena részben helyezkedik el a mélységi navigáció, vagyis az oldalak között egy egyfajtahierarchia létezik, aminek a gyökere maga a honlap. A mélységi navigációs résznél azadott oldal, valamint az index oldal és a hierarchia szerint a közöttük lév® oldalakravezet® hiperlinkek helyezkednek el, az elemek egymástól � jellel vannak elhatárolva. Anavigációs rész után a Keresés gomb található. A tartalmi rész háttere enyhén sötétszürke, és nem mintás.

3.4. Publikus oldalak

A publikus oldalak bárki számára elérhet®ek, belépésükhöz nincs semmilyen feltételkötve. Ezen oldalak fejlécének a színe világoskék, valamint a mélységi navigációvalamint a keresés gomb mögötti rész háttere pedig tengerészkék szín¶. A fejléc alattiterület három részre tagolódik: baloldali irányítópanel, tartalmi rész és jobboldaliirányítópanel, szélességük 20%, 60% és 20%.

3.4.1. Baloldali irányítópanel

Három f® részre tagolódik, amiket egymástól vízszintes vonalak választanak el.Az irányítópanelben a szöveg középre rendezett, a háttér világosbarna, mintás, anyomógombok 90%-os szélesség¶ek, a bet¶k 100%-os nagyságúak és fekete szín¶ek. Azels® részben az áruházon belül lév® termékek f®kategóriáihoz vezet® gombok vannakegymás alatt el elhelyezve navigációs célból, így a látogató ha más terméket is megakar keresni, akkor nem kell neki visszatérnie a f®oldalra és onnét kiválasztania el®szöra megfelel® f®kategóriát, majd az alkategóriát. Az irányítópanel középs® részén ab®vebb infromációkra, valamint a honlaptérképre vezet® gombok helyezkednek el. Azutolsó részben az oldal készít®jének a neve és neptun-kódja, valamint a felhasználtwebszerkeszt® neve helyezkedik el.

3.4.2. Tartalmi rész

Ebben a részben jelennek meg az oldalak tényleges tartalma. A háttér szine közepesensötét szürke. Oldlatól függ, hogy balra, vagy középre van a megjelenítend® elemekrendezve.

48

3.7. Jogosultságok, korlátozások

3.4.3. Jobboldali irányítópanel

Kinézetben megegyezik a baloldali társával, bár itt csak két egymástól vonallalelválasztott rész van. Az els® rész tartalma függ attól, hogy valaki az adott pillanatbanbe van-e jelentkezve, vagy sem. Ha nincs bejentkezve, akkor a Regisztráció és aBejelentkezés érhet® el innen, ha már bejelentkezett, akkor pedig a saját oldaltekinthewt® meg, ahol a jogosultsági szintt®l függ®en az áruház elérhet® funkcióiközül lehet választani. Az irányítópanel másik részén a TOP5 akciós termékekr®linformálódhat a felhasználó.

3.5. Privát oldalak

Itt a fejlécen a világoskék valamint a tengerészkék színek helyett a bordó szín a dominál.Ezen oldalak meglátogatása jogosultság-függ®, irányítópanelek itt már nincsenek, atartalmi rész szélessége 100%-os.

3.6. Kiegészít® oldalak

Ezen oldalak kinézetileg szegényesebbek, csak egy kezdetleges fejléccel rendelkeznek,ahol az áruház neve helyezkedik el, bár ez egyben egy hiperlink, ami az áruházhonlapjára mutat. Ezen oldalak közé tartozik az eredmeny.php, a bejelentkezes.phpés a kijelentkezes.php.

3.7. Jogosultságok, korlátozások

Az áruház publikus oldalon kívül privát oldalakkal is rendelkezik, amik csak amegfelel® jogosultsággal rendelkez® felhasználók számára érhet®ek el. Az, hogy ki milenjogosultsággal rendelkezik, azt a regisztráció adatait tartalmazó táblázatból derül ki.Bejelentkezés során a felhasználó azonosítója, jelszava valamint a jogosultsági szintjeegy 1 óráig él® sütiben tárolódik, és ezen információkat minden oldal lekérdezi a&_COOKIE[""] nev¶ PHP függvény segítségével. A süti a bejelentkezés során jönlétre és tölt®dik fel. Nem megfelel® jogosultság esetén az oldal nem jelenik meg, mivela DIE nev¶ parancs fog végrehajtódni.

3.7.1. Be nem jelentkezett felhasználó

A publikus oldalak az ilyen egyén számára elérhet®ek, viszont egyik privát oldalra seléphet be, valamint nem tud az áruk oldalán a kosárba terméket rakni, mivel ez alehet®ség számára meg se fog jelenni.

3.7.2. Vásárló

Lehet®ség van számára a termékek Kosárba való helyezésére, valamint a Kosárhasználatára, továbbá az eddigi megtörtént vásárlásait is megnézheti a vasarlasok.phpoldalon, viszont a kosárban lév® termékeket itt nem láthatja. Valamint esetlegespanasz esetén a Panaszkönyvet is használhatja, valamint megváltoztathatja a sajátregisztrációs adatait, kivéve a felhasználói nevét és a regisztrációjának az indokát.

49

3.8. Oldalak legális elérhet®sége az Áruházon belül

3.7.3. Raktáros

Ugyanazon oldalak elérhet®ek számára, mint egy vásárlónak, de ezen kívül még aRaktárba is beléphet, ahol termékeket rakhat fel a raktárba, valamint módosíthatjaa már raktáron lév® termékek adatait.

3.7.4. Üzemeltet®

Az áruház összes oldala elérhet® számára. A vasarlasok.php résznél minden eddigivásárlás adatait megtekintheti, valamint az épp a kosárba lév® termékeket ismegtekintheti. Képes mások regisztrációját módosítani, esetleg a regisztrált tagok aktívvagy inaktív státuszba helyezni, vagy legvégs® esetben törölni magát a felhasználót! AFórum esetén pedig automatikusan moderátori szerepkört is ellát, vagyis megtekinthetiaz eddigi üzeneteket egy helyen és módosíthatja azokat, esetleg általa nem tetsz®üzenetet törölhet!

3.8. Oldalak legális elérhet®sége az Áruházon belül

Mivel egy oldalak közötti rendszerr®l van szó, így érdemes említést tenni arról, hogyaz egyes oldalak mely más oldalakról érhet®ek el, vagyis érdemes egy kicsit b®vebbenfoglalkozni az oldalak közötti naviációs lehet®ségr®l. Ez a fejezet felsorolja az összesoldalt, amiket az áruház felhasznál, és azt is leírja egy-egy oldal esetén, hogy honnétérhet®ek el, és milyen feltételekkel. Az includes.php-t nem említem meg, mivel ezt azoldalt minden más oldal magába inlcudálja, így külön nem érhet® el sehol, valamintazt a lehet®séget sem említem meg az oldalak esetén, hogy elérhet®ek a terkep.phphelyr®l, mivel ez szinte minden esetben igaz, de arról fogok említést tenni, ha mégisolyan oldalról lenne szó, ahol nincs meg ez a lehet®ség.

3.8.1. aru.php

Mivel egy áruház legf®bb oldala maga a terméket leíró oldal, ezért el®ször részletesenismertetem azt a négy elérhet®ségi lehet®séget, amit az áruházam navigációs rendszereenged. Minden egyes lépésben szerepl® elemr®l egy hosszabb ismertetést is készítettem,mivel ezen oldalak lesznek el®re láthatólag az áruházam legforgalmasabbjai. Az ittszerepl® oldalak mindegyike a megjelenítéshez szükséges adatokat az adatbázisbólSELECT utasítással szerzik meg.

50

3.8. Oldalak legális elérhet®sége az Áruházon belül

Egy tetsz®leges áru oldalának elérése az Áruházon belül

Számok magyarázata:1) Az honlapon egy 3 oszlopos és páros soros, határvonal nélküli táblázatban jelenikmeg a lehet®ségek úgy, hogy a páratlan sorú mez®kben íródik ki a f®kategória neve,és a név alatti páros sorú mez®ben pedig egy hiperlinkként funkcionáló, tájékoztatójelleg¶ kép jelenik meg.2) Hasonló elven történik, mint az 1)-es esetben, csak itt az alkategóriák felsorolásatörténik. Ha csak 2 db alkategóriát tartalmaz egy f®kategória, akkor a táblázat is csakkét oszlopos3) Ez az oldal több lapból áll, laponként 10 db termék f®bb adatai vannak megjelenítve.Ezen f®bb adatok a következ®ek: termék neve, ára, raktáron lév® mennyisége és egykép a termékr®l. Az adatok a kép mellett jelenik meg. Mind a kép, mind az adatok utánlév® "B®vebb információ" szöveg rákattintásával lehet elérni egy kiválasztott termékoldalát. Lehet®ség van a lapok közötti lépegetésre a felül és alul elhelyezked® lépeget®ksegítségével, vagy a SELECT mez®ben kiválasztom, hogy melyik lapra szeretnék lépni,és ezen a résznél a lapon lév® els® és utolsó termék neveinek az els® hat bet¶je ismegjelenik, hogy így a felhasználónak így legyen valamilyen elképzelése arról, hogy egyadott lapon milyen termékek lehetnek.4) Lásd kés®bb...5) Publikus oldalak esetén a bal oldali irányítópanelen jelenik meg a TOP5-ös akciójútermékek listája. Itt fel van tüntetve a termék neve, ára és az akció nagysága, valamintezek után egy kép a termékr®l, ami egyben egy link, ami az adott termék oldaláramutat

51

3.8. Oldalak legális elérhet®sége az Áruházon belül

6) El®ször ABC sorrendben megjelennek a f®kategóriák, azokon belül szintén ABCsorrendben az alkategóriák (ebben a két esetben a linkek normál szövegek), és azalkategórián belül ha ott termék is van, akkor a termék nevei vannak felsorolva egySELECT mez®ben. Az utóbbi esetben az OPTION-ok funkcionálnak link gyanánt.Ezen hosszú felsorolás után pedig az egyéb funkciók sorolódnak fel, de itt jogosultságszerint rendezve, és ha valamelyik funkcióhoz nincs jogosultság, akkor a honlaptérképensem fog megjelenni, mint lehet®ség.7) A termék oldalán a termék alábbi adatai jelenik meg:

- Termék neve és kódja- Raktáron lév® mennyiség- Jelenlegi és a régebbi ár- Akció nagysága (csak ha akciós a termék!)- Kategóriás besorolás (F®kategória � Alkategória)- A termék hosszabb-rövidebb leírása- 3db kép a termékr®l- Vásárolandó mennyiség kiválasztása (csak ha be vagyunk jelentkezve és van araktáron termék)- Kosárba helyezés gombja (csak ha be vagyunk jelentkezve és van a raktárontermék)- Kosár (csak ha be vagyunk jelentkezve)- Vélemény-nyílvánítási lehet®ség (csak ha be vagyunk jelentkezve)

3.8.2. index.php

Mivel ez a honlap, ezért bármely oldalról elérhet® mind a fejlécben lév® céglogóra, minda mélységi navigációban lév® els® elemre való kattintással.

3.8.3. fokategoria.php

Minden publikus oldal esetén a szélességi navigációt használva, valamint a honlapona tartalmi rész végén a képek egyikére kattintva, de a rákövetkez® oldalak esetén amélységi navigációt felhasználva lehet ezen oldalak valamelyikére lépni.

3.8.4. alkategoria.php

Csak a fokategoria.php esetén a képek egyikére, valamint az aru.php esetén a mélységinavigációt felhasználva lehet egy adott alkategória oldalra ugrani.

3.8.5. kereses.php

Minden oldalról elérhet®, a mélységi navigáció mellett helyezkedik el a gombja.

3.8.6. terkep.php

Minden irányítófelületet tartalmazó oldalról elérhet® a B®vebb információ résznél

3.8.7. informacio.php

lásd: terkep.php

52

3.8. Oldalak legális elérhet®sége az Áruházon belül

3.8.8. regisztracio.php

Ha a felhasználó nincs még bejelentkezve, akkor a jobb oldali irányítópanelr®lelérhet® a "Regisztráció" gomb megnyomásával, vagy Üzemeltet®i jogosultág eseténa regisztraltak.php oldalon keresztül

3.8.9. bejelentkezes.php

Csak a jobb oldali irányítópanelr®l érhet® el abban az esetben, ha a felhasználó mégnincs bejelentkezve

3.8.10. elfelejtett.php

lásd: bejelentkezes.php

3.8.11. kijelentkezes.php

Bejelentkezés után a bejelentkezes.php helyett/helyén (Csak bejelentkezettfelhasználóknak!)

3.8.12. kosar.php

Jobboldali irányítópanel "Kosár" gombjának a megnyomása, vagy az aru.php-n belüla kosár szimbólumra való kattintással (Csak bejelentkezett felhasználóknak!)

3.8.13. vasarlasok.php

Szintén a jobboldali irányítópanelnél, az "Eddigi vásárlások" gomb megnyomásával.(Csak bejelentkezett felhasználóknak!)

3.8.14. termekek.php

Jobboldali irányítópanel "Raktár" gombjának a megnyomásával (Csak üzemeltet®knekés raktárosoknak!)

3.8.15. feltoltes.php

Csak a termekek.php oldalról érhet® el (Csak üzemeltet®knek és raktárosoknak!)

3.8.16. modositas.php

lásd: feltoltes.php

3.8.17. eredmeny.php

Csak a regisztracio.php oldalról érhet® el (Még a Honlaptérképen sem érhet® el a linkje!)

53

3.9. Elérhet® funkciók

3.8.18. regisztraltak.php

Jobboldali irányítópanel "Eddigi regisztráltak" gombjára való kattintással (Csak éskizárólag üzemeltet®k számára!)

3.8.19. sajat.php

Bejelentkezés után a jobb oldali irányítópanelr®l érhet® el.

3.9. Elérhet® funkciók

3.9.1. Regisztráció

Lépések:1. A felhasználó belép a regisztracio.php oldalra, ott megadja az adatait,

leellen®rízteti azokat, és ha minden rendben van, akkor megnyomja az adatok elküldésegombot

2. A regisztracio.php elküldi a felhasználó által megadott adatokat az eredmeny.php,ami közbe megnyitódik.

3. Az eredmeny.php felrakja az adatokat az adatbázisba egy INSERT parancssegítségével

4. A megadott adatokat az adatbázisból lekérdezi az eredmeny.php egy SELECTutasítás segítségével

5. Az eredmeny.php kiirattatja az adatbázisból lekérdezett adatokat, vagy hibaesetén az esetleges gondról informál

54

3.9. Elérhet® funkciók

3.9.2. Bejelentkezés

Lépések:1. A felhasználó megnyitja a bejelentkezes.php oldalt, és megadja a felhasználói

nevét és jelszavát, majd megnyomja a SUBMIT gombot2. A bejelentkezes.php egy SELECT segítségével leellen®rzi az adatbázisból, hogy

jó adatok lettek-e megadva, és ha igen, akkor a felhasználó regisztrációjának az indokátis lekérdezi

3. Informálja a felhasználót a bejelentkezés sikerességér®l, vagy sikertelenségér®l.Siker esetén létrehoz három COOKIE-t, egyet a felhasználói név, egyet a jelszó ésegyet az indok tárolására. Ezen COOKIE-k élettartalma 1 óra.

3.9.3. Vásárlás

Lépések:1. A vásárló kiválasztja valamelyik terméket a kínálatból.2. Az aru.php lekérdezi az adatbázisból az adott áruval kapcsolatos információkat

egy SELECT utasítás segítségével3. A kiválasztott áru adatai megjelenik a vásárló kijelz®jén.4. A vásárló kiválasztja a neki szükséges mennyiséget és a kosárba helyezi.5. Az aru.php felrakja a vásárlást az adatbázisba egy INSERT során6. Belép a vásárló a kosar.php7. A nem véglegesített vásárlások adatait lekéri a kosar.php az adatbázisból egy

SELECT utasítás elvégzésével

55

3.9. Elérhet® funkciók

8. Az aru.php-n megjelenik a lekérdezett adatok9. A vásárló kijelöli az elvégzend® feladatot (Nem véglegesített vásárlás véglegesítése

vagy törlése)10. Az aru.php az adatbázist módosítva elvégzi a feladatot11. A friss adatokat lekéri a kosar.php az datbázisból12. A frissített tartalom jelenik meg a vásárló számára

3.9.4. Új termék felvitele

Lépések:1. A felhasználó megnyitja a feltoltes.php oldalt, kitölti az új termék adatrait, utána

megnyomja a SUBMIT gombot2. A feltoltes.php INSERT segítségével felrakja az adatbázisba az új adatokat3. Megjelenítés céljából a nemrég feltöltött adatokat SELECT segítségével

lekérdez®dik4. A feltoltes.php megjeleníti a felhasználónak az adatbázisban lév® adatokat, vagy

hiba esetén a hibaüzenetet

3.9.5. Termék módosítása

Lépések:1. A felhasználó kiválasztja a módosítandó terméket.2. A modositas.php lekérdezi a módosítandó termék adatait egy SELECT

segítségével.3. A felhasználó kijelz®jén megjelennnek a lekérdezett adatok.4. Az adatok módosításra kerülnek a felhasználó által.5. Az adatokat az adatbázisban módosulnak egy UPDATE segítségével, amit a

modositas.php futtat le

56

3.9. Elérhet® funkciók

6. A frissített adatok lekérdez®dnek egy SELECT utasítással az adatbázisból7. A frissítés eredménye, vagy esetleges hibaüzenet, megjelenik a felhasználó

monitorán

3.9.6. Regisztráció módosítása

Lépések:1. Az üzemeltet® megnyitja a regisztracio.php fájt, aminek az URL-jébe megadja

azon regisztrált tagnak az azonosítóját, akinek az adatait akarja módosítani2. A regisztracio.php lekérdezi egy SELECT segítségével a megadott személy adatait

az adatbázisból3. A regiszisztracio.php megmutatja a lekérdezett adatokat az üzemeltet®nek4. Az üzemeltet® módosítja a regisztrációs lapot, leelen®rízteti és elküldi5. A regisztracio.php elküldi az adatokat az eredmeny.php-nek6. Az eredmeny.php letörli az el®z® adatokat a felhasználóról, majd egy INSERT

segítségével felrakja az újakat7. Egy SELECT segítségével az eredmeny.php lekérdezi az adatbázisból a frissen

megadott információkat8. Az üzemltet® el®tt megjelenik a m¶velet vagy az esetleges hiba eredménye9. Ha az üzemeltet® kéri, akkor az eredmeny.php elküldi a regisztráció

aktivizálásáról az üzenetet a regisztrált tagnak

57

3.9. Elérhet® funkciók

3.9.7. Keresés az áruk között

Lépések:1. A felhasználó megnyitja a kereses.php oldalt, ott megadja, hogy milyen megadott

tulajdonságok alapján történjen a keresés. Ezen tulajdonságokat egy el®re megadott¶rlap kitöltésével hajtja végre.

2. A kereses.php ezen adatok alapján végrehajta a keresést, vagyis el®re megadottlehet®ségenként egy-egy SELECT utasítással megkeresi, hogy van-e találat azadatbázisban

3. Lehet®ségekre bontva a felhasználó el®tt a kereses.php kiiratja az eredményt.Ha van találat, akkor egy SELECT input mez®ben ezeket megjeleníti, és alul kiírtja alehet®ségen belül a találat számát is. Ha nincs találat, akkor azt is kiírja.

4. Találat esetén a felhasználó kiválasztja az általa keresett terméket a SELECTmez®b®l és rákattint

5. A kereses.php oldal megnyitja a keresett áru oldalát6. A felhasználó el®tt megjelenik a keresett áru adatai, ahol aztán a vásárlást vagy

a vélemény-nyílvánítást is megteheti a termékkel kapcsolatban

3.9.8. Vélemény nyílvánítás egy áruval kapcsolatban

Lépések:1. A felhasználó megnyitja az áru oldalát. Ha be van jelentkezve, akkor rákattint a

FÓRUM képre.2. Az ablakon megnyitódik a forum.php3. A forum.php lekérdezi az eddigi hozzászólásokat és a hozzászólók f®bb adatait

az adatbázisból egy SELECT végrehajtásával

58

3.10. Néhány szó a Designról

4. Megjelenik az eddigi hozzászólások, ha volt, az ablakon. Ha nem volt eddighozzászólás, akkor err®l fog informálódni a felhasználó.

5. A Felhasználó elolvassa az eddigi hozzászólásokat, majd ® is ír egy újat6. Az új hozzászólást egy INSERT segítségével behelyezi a forum.php az adatbázisba7. A forum.php oldal tartalma frissül, és megjelenik az új hozzászólás is a többi

mellett8. Ha a felhasználó egyben moderátor, akkor kitörlésre kijelölhet egy üzenetet9. A kitörlésre jelölt üzenetet a forum.php egy DELETE elvégzésével kitörli az

adatbázisból10. A forum.php tartalma megint frissül, de már a kitörölt üzenet nem fog

megjelenni

3.9.9. Elfelejtett jelszó lekérdezése

Lépések1. A felhasználó megnyitja az elfelejtett.php-t, ahol megadja a felhasználói nevét,

az e-mail címét és a bankkártya számát.2. Az oldal megnézi egy SELECT segítségével, hogy van-e olyan regisztráció, ahol

ezen adatok is szerepelnek.3. Ha van, akkor egy SELECT segítségével lekérdezi a jelszót. Ha nincs, akkor nem

lép kapcsolatba az adatbázissal.4. Találat esetén az elfelejtett.php megjeleníti a jelszavat, ha nincs találat, akkor

meg az eredménytelenségr®l informálja a felhasználót.

3.10. Néhány szó a Designról

3.10.1. A meglátogatott linkek színe

Én a meglátogatott linkek esetén színnek a pirosat használok, meg nem látogatottszínek esetén pedig a türkizkékek. Ezek a szinek megfelelnek a design-alapszabályainak,mivel az el®írt színeket, vagy azok árnyalatait alkalmazom.

3.10.2. Átlátható szöveg

Egyedüli nagyobb szöveg az áruházamban a b®vebb információkat tartalmazó oldal, dea tartalmi részben egyb®l <h1>-el kedtem, ahol megint leírtam az oldal nevét, utána 3fejezetre osztottam a szöveget: Elérhet®ség, Szállítás, Regisztráció. Ezen részek f®címeitpedig <h2> elemek közé írtam. A címek alá még külön egy navigációs részt helyeztemel, ahol csak ezen az oldalon belül lehet lépegetni, és csak ezen három fejezetnek a neve

59

3.11. Megjelenés különböz® kijelz®n

van megadva, plusz el®ször a fejléc is, és ezen megadott szövegek egyben hiperlinkek is,vagyis ezen navigációs felület segítségével a fejezetek közötti valamint az oldal tetejérevaló ugrás lehetséges. A publikus oldalakon lév® jobb irányítópanelnél is �gyelembevettem ezt a lehet®séget, ezért ott nem mint egy idehivatkozó gombot helyeztem el,hanem külön-külön gombokat fejezetenként, így ha valakit csak egy fejezet érdekel,akkor egyb®l oda fog kerülni a publikus oldalakról, és nem kell külön keresgélnie.

3.10.3. Relatív méret¶ bet¶k

A CSS fájlban de�niált bet¶méret egyik helyen sem �x, hanem mindenhol abet¶méretet %-ban adtam meg, vagyis mint egy relatív érték. Mivel a legtöbb esetben100%-os bet¶nagyságot használok, ezért a CSS fájlban ezt úgy adtammeg, hogymagának az oldalak body részében adtam ezt az információt meg.

3.10.4. Oldalak címzése

Minden oldal címének az eleje változó, a holnap esetén Honlap, a f®-, és alkategóriásoldalak esetén az adott kategória neve, az áruk oldala esetén az adott áru kódja, a többiesetben is olyan nevet adtam meg, amir®l lényegében az oldal szól. A címek másodikfele egy szóközök közötti - után az áruház neve, így a felhasználó például valamelyikoldalt a könyvjelz®k közé rakja, akkor is tudni fogja, hogy azon oldal az én áruházamegyik oldala.

3.10.5. Reklám

A webalkalmazásomban az egyedüli reklámnak kinéz® dolog az akciós termékekkiiratása publikus oldalak esetén.

3.10.6. Oldalak megnyitása

Minden egyes gomb, képes vagy szöveges hiperlink esetén az új tartalom ugyanabban afülben nyitódik meg. Hieprlinkként kijelölt képek és szövegek esetén az kijelölt dolgokataz <a> elemek közé raktam, gombok esetén pedig az onclick attríbutumnak egyáltalam létrehozott goTo függvény hívása történik, amibe partaméterként a meghívandóoldal URL-je van megadva, és ezen goTo függvény valójában egy document.locationparancsnak a paraméterezett meghívása, amely függvény az includes.php tartalmaz,így minden egyes oldalamról elérhet®

3.11. Megjelenés különböz® kijelz®n

60

3.12. Megjelenés különböz® böngész®n

3.12. Megjelenés különböz® böngész®n

3.12.1. Mozilla Firefox

Verzió: 3.6.3

Kíválóan jelenik meg Firefox alatt az áruházam. A hiperlinkként megjelölt képeketkerettel is ellátta, így könnyen lehet tudni el®re, hogy mely oldalon járt már afelhasználó el®z® alkalommal. Abban az esetben, ha a kép nem tölt®dik be, akkoraz ALT attríbutumban megadott szöveg jelenik meg.

3.12.2. Opera

Verzió: 10.51

61

3.12. Megjelenés különböz® böngész®n

A Firefox-hoz hasonlóan itt sincs semmi probléma a megjelenéssel, bár itt egyfontosnak mondható dolog hiányzik, mégpedig a hiperlinkként megjelölt képek eseténa keret megjelenítése itt nem történik meg. Nem betöltött kép esetén itt is megjelenikaz ALT attríbútum értéke.

3.12.3. Google Chrome

Verzió: 4.1.249.1045

A hiperlinkként megjelölt képek esetén a képeknek ez a böngész® sem jelenít megkeretet. Sajnos itt nem m¶ködik az ALT funkció, ha nem tölt®dik be a kép, helyetteegy "szakadt kép" ikon jelenik meg.

62

3.12. Megjelenés különböz® böngész®n

3.12.4. Internet Explorer

Verzió: 8.0.7600.16385

Hát mit mondjak... Itt látszik meg a legjobban, hogy miért is lett az Explorer egyrenépszer¶tlenebb. A megjelenés pocsék! Amíg a többi böngész® megfelel®en értelmezteazt, ha a képeknek százalékban adtam meg a nagyságukat, addig az Explorer még erreis képtelen. Úgy, mint a Mozilla esetén, a hiperlinkként megjelölt képeknek linkszín¶kereteik vannak, valamint az ALT attríbutum értéke is kiíródik, de itt a szöveg el®ttegy hibát jelz® fehér alapon piros X jelzés itt kikerült.

63

3.13. Felhasznált szerkeszt®programok

3.13. Felhasznált szerkeszt®programok

Az webalkalmazás forráskódját a szakdolgazat feladatában el®írt módon nyíltforráskódú szerkeszt®vel írtam meg.

3.13.1. Amaya 11.3.1.

Az Amaya a W3C által támogatott nyílt forráskódú weboldal szerkeszt® program,ami C nyelven íródott és UNIX, Mac OS, valamint Windows rendszeren képesm¶ködni. Ez a webfejleszt® el®ször kizárólag HTML és CSS fájlok készítésére jöttlétre, de az XML egyre nagyobb népszer¶sége végett XML és XHTML dokumentumokkészítésére is alkalmassá tették, valamint támogatja a MathML és az SVG formátumotis. A szerkesztés során szükséges elemeket a menüsorbólm valamint a jobb oldalieszköztárból lehet elérni, ezáltal az Amaya-n való könny¶ szerkesztés biztosítvavan. Továbbá a WYSIWYG szerkesztésre is van itt lehet®ség, így akár egy kezd®honlapszerkeszt®nek sem esik majd problémának a legels® egyszer¶, vagy márbonyolultabb webalkalmazásának a megírására. Sjanálatos módon az Amaya nemtudja értelmezni a PHP nyelvi elemek a megjelenítés során, így ha meg akarjuk nézniaz elkészült oldalunkat, akkor azt sajnos más, PHP-t már értelmez® böngész®n kellmegnézni.

Jelenlegi verziója a 11.3.1-es, amit 2009. December 9.-én hoztak a nyilvánosságra.Ez a verzió támogatja már a HTML 4.01-t, XHTML 1.0-t, XHTML Basic-et, XHTML1.1-t, HTTP 1.1-t, MathML 2.0-t, továbbá CSS 2-t, és SVG-t.

3.13.2. NotePad++ 5.6.8.

A NotePad++ szintén egy nyílt forráskódú szerkeszt®, de ez már nem csak internetesoldalak létrehozására lehet felhasználni, mivel nem internetes nyelveket is támogat.Ez az alkalmazás kizárólag Windows környezetben fut. A program alapját a Scintillaszövegszerkeszt® komponens képezi amit C++ programnyelven írtak win32 api-ra és aszabványos STL-re (amik biztosítják a program gyorsaságát, valamint kis méretét), aprogramot a GPL Licence védi.

NotePad++ által támogatott nyelvek: C, C++, Java, C#, XML, HTML, PHP,CSS, make�le, ASCII, art (.nfo), doxygen, ini �le, batch �le, Javascript, ASP, VB/VBS,SQL, Objective-C, RC, resource �le, Pascal, Perl, Python, Lua, TeX, TCL, Assembler,Ruby, Lisp, Scheme, Properties, Di�, Smalltalk, Postscript, VHDL, Ada, Caml,AutoIt, KiXtart, Matlab, Verilog, Haskell, InnoSetup, CMake, YAML, COBOL, D,R, PowerShell, Gui4Cli, vagyis a weboldal szerkesztéshez nélkülözhetetlen nyelveketszinte egyt®l-egyig elfogadja!

Jelenlegi verziója az 5.6.8., ami magyar nyelven is elérhet®, de ezen kívül más emberáltal beszélt nyelven is letölthet® ezen verzió.

64

4. fejezet

Összefoglalás

65

Irodalomjegyzék

[1] Jakob Nielsen: Web-design, Typotex Kiadó, Budapest, 2002.

[2] Matt Zandstra: Tanuljuk meg a PHP5 használatát 24 óra alatt, Kiskapu Kiadó,Budapest, 2005.

[3] Michael Moncur: Tanuljuk meg a JavaScript használatát 24 óra alatt, KiskapuKiadó, Budapest, 2006.

66

Adathordozó használati útmutató

4.1. ER-diagram

67

4.3. Fájlszerkezet

4.2. Adatbázis-diagram

4.3. Fájlszerkezet

A CD Forráskód nev¶ jegyzékében foglal helyet a PHP, valamint a CSS fájlok. Ezekközül ajánlott az index.php-t elindítani. Ezen jegyzékben van egy további jegyzék ispics névvel, ahol a kategóriák képei, valamint a hátterek képei vannak elhelyezve.Itt minden képfájl formátuma JPG. A CD-n ott van továbbá a Dokumentációnev¶ jegyzék is, ahol a szakdolgozat szövegének LATEX-es forrását tartalmazzaegy report.zip névvel, valamint szakdolgozat.pdf névvel külön kiszedve a teljesdokumentáéciót tartalmazó PDF fájl.

68