Csegezi Noémi Gi Szakdolgozat [624399]

BABE Ș–BOLYAI TUDOM ÁNYEGYETEM KOLOZSVÁR
KÖZGAZDASÁG – ÉS GAZDÁLKODÁSTUDOMÁNYI KAR
KÖZGAZDASÁG – ÉS GAZDÁLKODÁSTUDOMÁNYI
MAGYAR INTÉZET

SZAKDOLGOZAT

Végzős hallgató:
Csegezi Noémi Szidónia

Kolozsvár, 2017

BABE Ș–BOLYAI TUDOM ÁNY EGYETEM KOLOZSVÁR
KÖZGAZDASÁG – ÉS GAZDÁLKODÁSTUDOMÁNYI KAR
GAZDASÁGI INFORMATIKA SZAKIRÁNY

Reszponzív webdesign és felhasználói élmény
egy utazási weboldal esetén

Témavezető:
Dr. Kovács Gyöngyvér adjunktus

Végzős hallgató:
Csegezi No émi Szidónia

2017

UNIVERSITATEA „BABE Ș–BOLYAI” CLUJ -NAPOCA
FACULTATEA DE ȘTIINȚE ECONOMICE ȘI GESTIUNEA
AFACERILOR
SPECIALIZAREA INFORMATICĂ ECONOMICĂ

LUCRARE DE DIPLOMĂ

Designul responsive și experința utilizatorului
în cazul unui site turistic

Conducător științific:
Lector universitar Dr. Kov ács Gyöngyvér

Absolvent: [anonimizat]émi Szidónia

Cluj -Napoca, 2017

2
Tartalomjegyzék
Ábrák jegyzéke ………………………….. ………………………….. ………………………….. …………………….. 3
1 Bevezetés ………………………….. ………………………….. ………………………….. ………………………. 5
2 Reszponzív w ebdesign ………………………….. ………………………….. ………………………….. ……. 7
2.1 A reszponzív design története ………………………….. ………………………….. ………………… 8
2.2 A mobileszközök fontossága ………………………….. ………………………….. ………………….. 9
2.3 A reszponzív webdesign előnyei és korlátai ………………………….. ……………………….. 10
2.4 Reszponzív vagy adaptív webdesign ………………………….. ………………………….. ……… 10
2.5 A reszponzív design megvalósításának alapelemei ………………………….. ……………… 11
2.5.1 Folyékony rácsszerkezet ………………………….. ………………………….. ……………….. 11
2.5.2 Folyékony média ………………………….. ………………………….. ………………………….. 13
2.5.3 Média lekérdezések ………………………….. ………………………….. ………………………. 14
2.5.4 Viewport ………………………….. ………………………….. ………………………….. ………… 16
3 A felhasználói élmény ………………………….. ………………………….. ………………………….. …… 18
3.1 A felhasználói élmény története ………………………….. ………………………….. ……………. 18
3.2 Felhaszn álói élménytervezés webes környezetben ………………………….. ………………. 19
3.3 Színek és képek a felhasználói élménytervezésben ………………………….. ……………… 22
3.4 User Experience (UX) design és User Interface (UI) design ………………………….. …. 24
4 Utazási weboldalak elemzése ………………………….. ………………………….. ……………………… 25
4.1 2016 legjobb turisztikai weboldalai ………………………….. ………………………….. ………. 25
4.2 Turisztikai oldalak Romániában ………………………….. ………………………….. ……………. 33
5 Egy utazási weboldal létrehozása ………………………….. ………………………….. ………………… 35
5.1 Felhasznált eszközök és technológiák ………………………….. ………………………….. ……. 35
5.1.1 Felhasznált eszközök ………………………….. ………………………….. ……………………. 35
5.1.2 Felhasznált technológiák ………………………….. ………………………….. ……………….. 35
5.2 Implementáció ………………………….. ………………………….. ………………………….. ……….. 37
5.2.1 Reszponzív oldalváz és navigáció létrehozása ………………………….. ……………… 37
5.2.2 Reszponzív képgaléria létrehozása ………………………….. ………………………….. …. 40
5.2.3 Keresőfunkció létrehozása ………………………….. ………………………….. …………….. 43
5.2.4 Felhasználói élménynövelés a kurzor segítségével ………………………….. ………… 46
5.2.5 Térkép beágyazása ………………………….. ………………………….. ……………………….. 46
6 Következtetések ………………………….. ………………………….. ………………………….. ……………. 50
7 Irodalomjegyzék ………………………….. ………………………….. ………………………….. …………… 52

3

Ábrák jegyzéke
2.1: ábra: Reszponzív webdesign szemléltetése. ………………………….. ………………………….. ……. 8
2.2 ábra : Desktop -ról és mobilról történő internethasználat 2009 októbere és 2016 ok tóbere
között. ………………………….. ………………………….. ………………………….. ………………………….. ……… 9
2.3 ábra: Folyékony rácsszerkezet koncepciója, egy fejléccel és két oszloppal …………………. 12
2.4 ábra: Folyékony rácsszerkezet CSS ………………………….. ………………………….. ………………. 13
2.5ábra: Reszponzív kép a szélesség értékének állításával, csak width használatával ………… 13
2.6 ábra: Reszponzív kép a max -width használatával ………………………….. ……………………….. 14
2.7 ábra: Média típusok ………………………….. ………………………….. ………………………….. ………… 15
2.8 ábra: Viewport ………………………….. ………………………….. ………………………….. ………………. 17
3.1 ábra: F alakú tekintet hőtérképes megjelenítése ………………………….. ………………………….. 20
3.2 ábra: Különböző színek használata ugyanazon a weboldalon ………………………….. ……….. 23
3.3 ábra: Tekintetek arcok jelenlétében és nélkülük ………………………….. ………………………….. 24
4.1ábra: SimilarWeb kezelőfelülete ………………………….. ………………………….. ……………………. 26
4.2 ábra: a SEMRush kezelőfelülete ………………………….. ………………………….. …………………… 27
4.3 ábra: Time -lapse A NYC weboldalán ………………………….. ………………………….. ……………. 28
4.4 ábra: Fehér területek a Visit California weboldán ………………………….. ……………………….. 28
4.5 ábra: Az Experience Columbus weboldal hibás mobilverziója ………………………….. ……… 29
4.6 ábra: A Discover Los Angeles weboldal térképe ………………………….. …………………………. 30
4.7 ábra: Időjárásjelzés a Visit Dallas weboldalán ………………………….. ………………………….. .. 30
4.8 ábra: A Visit Stockholm weboldal galériája ………………………….. ………………………….. …… 31
5.1 ábr a: A saját fejlesztésű weboldal menüsora és borítóképe ………………………….. …………… 38
5.2 ábra: Legördülő menü iPhone 6 Plus -ról tekintve az oldalt ………………………….. …………… 39
5.3 ábra: Legördülő menülista ………………………….. ………………………….. ………………………….. . 40
5.4 ábra: A weboldal lábléce ………………………….. ………………………….. ………………………….. …. 40
5.5 ábra: Képgaléria számítógép képernyőjéről ………………………….. ………………………….. ……. 41
5.6 ábra: A galéria tabletes képernyőfelbontás esetén ………………………….. ……………………….. 42
5.7 ábra: A képgalé ria mobilos változata ………………………….. ………………………….. …………….. 42
5.8 ábra: Galéria media lekérdezések nélkül ………………………….. ………………………….. ……….. 43
5.9 ábra: Kereső form ………………………….. ………………………….. ………………………….. ………….. 43
5.10 ábra: A Hotels tábla szerkezete phpMyAdmin -t használva ………………………….. …………. 44
5.11 ábra: Találatok a tordai szálláshelyek esetén ………………………….. ………………………….. … 45

4
5.12 ábra: Képek interaktívvá tétele hover -rel ………………………….. ………………………….. ……… 46
5.13 ábra: Romániát ábrázoló térkép ………………………….. ………………………….. ………………….. 48
5.14 ábra: Szövegdoboz megjelenítése egy turisztikai központ helyszínén ………………………. 49

5
1 Bevezetés
Napjainkban a világháló életünk részét képezi . Rengeteg információhoz juthatunk,
kikapcsolódhatunk , vásárolhatunk vagy akár pénzügyi ügyeinket is elintézhetjük az online
közeget használva. Viszont az internet nem c sak az egyénekre van döntő hatá ssal, hanem a
vállal atok életciklusát is jelentősen befolyásolhatja. Egy vállalkozás esetén a siker kulcsa a
legtöbb esetben a megfelelő marketingben rejlik, egy jól elkészített weboldal áttörő
eredményeket hozhat. A technoló gia fejlődése elengedhetetlenné tette a reszponzív webdesign
létrejöttét, hisz a weboldalakat már nem csak asztali gépről, hanem mobiltelefonról illetve
táblagépről is egyre nagyobb arányban látogatják. A webdesigne reknek pedig kihívást jelentett
a különbö ző eszközökön is esztétikus nak bizonyuló weboldalak létrehozása.
Dolgozatom témája a reszponzív we bdesign és felhasználói élmény. Leend ő
gazdaságinformatikusként felkeltette figyelmemet az említett témakör, hisz az informatikát és
az online marketinget tö kéletesen ötvözi. A reszponzívitás egy újszerű, folyamatosan
fejlődésben levő technika, aminek igényét nap mint nap érzékelem. Az interneten való
böngészéskor is arra számítok, hogy egy cég mobilos, tablettes weboldala is legalább
ugyanolyan jó, mint a des ktopos verzió. Fontos, hogy a mobilos weboldalak extra funkciókkal
bővüljenek. Ha egy korábban számítógépen használt weboldalt nem tudunk a telefon ról a
megszokott módon használni csökken a felhasználói élményünk. Nagyon szeretek utazni s
néhányszor már ut aztam utazási iroda segítségével. Ilyenkor mindig az iroda kiválasztásánál a
weboldaluk volt a döntő érv, hisz ott jutottam hozzá az ajánlatokhoz, információkhoz. Zavaró
volt ha nem találtam valamit, de főleg az, ha telefonról használhatatlan volt az oldal . Azt
sugallta, hogy ilyen nehézségteli lesz majd az utazás is, negatív volt a felhasználói élményem
és persze nem választottam az illető iroda mellett.
Dolgozatom a reszponzív weboldalak jelentőségéről, fontosságáról, illetve a reszponzív design
és a fel használói élmény tervezése közti kapcsolatról szól. A témával kapcsolatos összkép
kialakítása érdekében a világ 10 legjobbnak minősített turisztikai weboldalát fogom elemezni,
főleg a látoga tottságra, a különböző eszközökről történő látogatás arányára illetve a
felhasználói élménytervezésre helyezve a hangsúlyt. Kiemelem az oldalak azon tulajdonságait
melyek mobilos készüléket alkalmazva is képesek élményt teremteni a felhasználók számára.
Ezek után a Romániában közismert irodák weboldala iról lesz szó, kité rve arra, hogy mennyire
felelnek meg a szakirodalmi követelményeknek, révén, hogy ezek az oldalak többsége nem is
reszponzív. Összegezve azt, hogy milyen turisztikai illetve utazási weboldalakat ismertek el

6
világszinten, s melyek azok a funcionalitások mel yek nélkülözhetetlenek, egy weboldalt fogok
elkészíteni, mely a Visit Romania címet fogja viselni. A weboldal témájának ötletét, mármint
azt, hogy Romániát fogja bemutatn i, az általam megvizsgált weboldala k adták. A Romániában
elterjedt turisztikai webolda lak belföldi és külföldi utazásokat is támogatnak, viszont olyan
oldal még nincs, ami kizárolag a román turisztikai központokat népszerűsítené. Április 11 -én
vált nyilvánossá a Vola.ro szándéka, miszerint szeretne létrehozni egy olyan oldalt ami csak a
helyi turizmusra épül és ahol romániai utazási csomagokat lehet majd foglalni. Ekkor
méginkább örültem annak, hogy ezt a témát választottam, hisz igény van rá a piacon és aktuális.
Mindenképp egy olyan weboldalt szeretnék kivitelezni, mely minden egyes eszköz ről
megtekintve élményt nyújt a felhasználó k számára, tehát reszponzív. A weboldal egy olyan
turisztikai honlap lesz, amely kizárólag Romániáról szól s próbálja felhívni a látogatók
figyelmét az ország szépségeire. A különböző látnivalók megtekintése melle tt
szálláslehetőséget is javasolni fog az oldal, s átirányítja az érdeklődöket a szálláshelyek
hivatalos honlapjára . Az egyik legfontosabb funkció a kereső lesz, ahol szűrni lehet a
szálláslehe tőségek közül , illetve egy térkép, mely a jellegzetes turisztik ai központok at
szemlélteti .

7
2 Reszponzív webdesign
Mára rengeteg eszköz van amely webes böngészésre alkalmas. Az asztali keresés és a mobilos
keresés különvált, a platformokat más típusú keresésre használjuk. A mélyebb
információkutatást még to vábbra is asztali gépen végezzük, míg a kisebb, ám kulcsfontosságú
információkra már mobilról és tabletről keresünk rá. A korábbi fix s zélességű elrendezéssel
készült weboldalak már nem tudtak optimálisan megfelelni a mobileszközök által támasztott
igények nek. Néhány weboldal esetén abban látták a megoldást, hogy külön mobilra szánt
weboldalt készítettek, viszont ezt az eljárást nem minden cég engedhette meg magának, hisz
nagy mennyiségű idő és munkaigényt jelentett a fejlesztés, karbantartás, illetve a SEO
optimalizálást is megnehezítette. Tehát az egyik legnagyobb kihívást az jelentette , hogy olyan
weboldalt készítse nek, mely minden eszköz kijelzőjén jól olvasható módon jelenik meg, a
weboldal funkcionalitása megmarad . Erre nyújt megoldást a reszponzív des ign, melynek
alkotója Ethan Marcotte híres webdesigner é s webfejlesztő, aki először 2010 -ben vezette be
ezt a technikát az A List Apart honlapon közzétett, Responsive Web Design címet viselő
cikkben , ahol a web világát az építészettel hasonlította össze .
“A reszpon zív web design a layoutra vonatkozó te chnikák összessége, melyek lehetővé teszik
az eszköz kijelzőjéhez való alkalmazkodást. ” (Harb et al., 2011: 5 o.)
“A reszponzív webdesign (RWD) olyan weboldal készítési technika, mely képes az oldalt arra
optimalizálni, hogy megfelelően működjön bármilyen eszközről történne a megtekintés. A
RWD egy olyan tervezési megközelítés, melynek célja egy olyan weboldal fejlesztés e mel y a
felhasználói élményt pozití van növeli. ” (Fielding , 2014: 13 o.)
A reszponzív desig n tehát a weboldalnak egy olyan kialakítása, mely képes alkalmazkodni a
böngészők képernyőjének méretéhez, s ezáltal egy esztétikus oldalt nyújtani a felhaszn álók
számára. A reszponzív design célja a legjobb felhasználói élmény biztosítá sa a weboldal
látog atóinak . Minimálisra szeretné csökkenteni a görgetés, illetve az átmér etezés
szükségességét egy weboldal böngészése alatt, bármilyen eszközről is történne a látogatás.
Lehetővé teszi a felhasználók számára egy optimális élmény megélését, megkímélve az olda l
készítőjét attól, hogy külön élményt tervezzen a különböző méretű eszközökre. Megoldást
nyújt arra a problémára ami abból adódik, hogy sosem tudhatjuk, hogy a webes aplikációnk
hol és milyen eszközön kerül használatra. A reszponzív design hatással van a felhasználói
élményre, kényelmes i nformációhozzáférést bizto sít. Kényelmes olvasást, navigálást tesz
lehetővé kisebb kijelzőjű eszközökről is a lehető legkevesebb méretmódosítással, gördítéssel.

8
Tehát egy responzív weboldal alkalmazkodik az adott eszköz ki jelzőméretéhez és egy honlap
ezen készsége nagyon egyszerűen tesztelhető asztali gépről is. Mindössze annyit kell tenni,
hogy lekicsinyítjük, összehúzzuk a böngésző méretét, s amennyiben nem változik a weboldal
megjelenése akkor az oldal nem reszponzív.
A 2.1-es ábra pont a reszponzivitás lényegét szemlélteti, hisz ugyanaz a weboldal különböző
eszközről is tekintve ugyanolyan jól néz ki.
2.1: ábra: Reszponzív webdesign szemléltetése.

Forrás: http://jump_start _responsive_web_design.pdf
2.1 A reszponzív design története
A reszponzív webdesign nevének eredete Ethan Marcotte webdesigner és webfejlesztőtől
szárm azik. 2010. május 25 -én jelent meg a Responsive Web Design című cikkje, melyben a
reszpon zivitás megvalósítá sának három építőkövéről, a folyékony rácsszerkezetről (fluid grid),
a média lekérdezésekről (media querie s) illetve a z adaptív képekről (flexible images) ír. A
designer k ülönleges érdeklősést mutatott az építészet irányába s a 2011 -ben írt, Responsive
web design című könyve egy ú j arhitektúra felfedezéséről szól t. A reszponzív arhitekturának
elnevezett találmány az építkezési me gszorítások eltörlésén alapszik : változó színű falak,
mozgó szerkezetek. Ebből a gondolkodásmódból született meg a reszponzív webd esign, mint
egy fel használóhoz alkalmazkodó technika.
A reszponzív design sikere többnyire az okos telefonok elterjedésének köszönhető. Az elmúlt
években a mobiltelefonhasználat exponenciálisan nőtt. De mégis mivel magyarázhatjuk a
telefonról internetezők s zámának növekedését? Valaminek történnie kellett ami jelentős
áttörést okozott. Talán a válasz az lehetne, hogy 2007 . június 29 -én Steve Jobs piacra dobta az
első iPhonet. Ez volt az első olyan okostelefon , mely igazán élvezhetővé tette a róla való
netezés t, s élményt nyújtott használója számára. Viszont az okostelefonhasználat nem csupán
annak tudható be, hogy az eszközök egyre jobb minőségűek, hanem az is közrejátszott, hogy
olcsóbbak lettek , illetve az internet sebessége is nőtt . Az okoselefonok képesek voltak

9
megjeleníteni a weboldalakat ugyanabban a formában mint a számítógépek, viszont nehezen
voltak navigálható k. A betöltési idők nagyok voltak s a felhasználóknak folyamatosan
zoomolniuk kellett ha az oldal tartalmára voltak kiváncsiak. A RWD erre a problémára is
megoldást adott.
2.2 A mobileszközök fontossága
Napjainkban az okostelefonok, táblagépek és egyéb mobilos eszközök használóinak száma
egyre növekszik. Az említett eszközök növekedési trendjét a Google is támogatja, hisz
folyamatosan optimalizálja a keresési algoritmusait annak érdekében, hogy valóban releváns
találatokat nyújtson a felhasználoknak. A Google előnyt nyújt a mobilra is optimalizált
weboldalaknak mivel manapság a legtöbb felhasználó mobiltelefonról keres az interneten. A
mobilról történő keresések bizonyos országokban, mint Japán vagy az Amerikai Egyesült
Államok, 2015 -ben meghaladták az asztali gépekről történő keresések számát.
2016 novemberében a StatCounter webanalitikával foglalkozó vállalat közzétette a hírt,
miszerint 2016 októbere volt ez első olyan hónap amikor a mobilról történő internetezés
világszinten is felülmúlta az asztali számítógépekről vagy laptopokról történő böngészést.
(Margea & Margea, 2017)

2.2 ábra : Desktop -ról és mobilról történő internethasználat 2009 októbere és 2016 októbere között.

Forrás: statcounter.com
2016 októberében a weboldalak 51,3% -a mobilos eszközről volt betöltve, a fennmaradt 48,7%
pedig asztali gépről vagy laptopról. Az 51,3% -ból 46,6% az okostelefonokat illeti, 4,7% pedig
a táblagépekről történő internethasználatra vonatkozik. (Margea & Margea, 2017)

10
2.3 A reszponzív webdesign előnyei és korlátai
A reszponzív weboldalakkal rendelkező vállaltok számos előnynek örvendhetnek, melyek
kihatnak a felhasználói élményre és ezáltal a bevételszerzésre is.
• Egy külön elkészített mobiloldalhoz k épest gyorsabb lesz a weboldal, hisz nem
tartalmaz átirányítá sokat a mobilos oldalakra .
• Időtakarékos, mert egy tartalmat csak egyszer kell feldolgozni.
• Jobb teljesítményű, mert mobilon, tableten, netbookon, laptopon vagy PC -n, HD TV -n
is veszteségmentes és esztétikus megjelenést biztosít.
• Keresőbarát, mert csak egyetlen HTML kódot generál.
• A Google támogatja a reszponzív oldalakat, a keresőkön kedvezőbb poziciót jelent.
• Csökken a hibalehetőség.
• Egyszerűbb a felhasználók szá mára az oldal megosztása, hisz egyetlen URL címre van
szükség.
• Más megoldásoknál költséghatékonyabb.
• Egyszerű SEO szempontból az oldal kezelése.
A pozitivumok mellett néhány negatív vonzat is megjelenik. Viszont kellő szekértelemmel és
odafigyeléssel a pr oblémák kiküszöbölhetőek.
• A webdesignerek csak a felhasználói viselkedés ismeretében tudnak hosszabb távon
eredményes reszponzív weboldalakat tervezni , tehát meg kell vizsgálni a felhasználók
viselkedését.
• Gyakran előfordul, hogy bizonyos tartalmak rejtve maradnak a felhasználók elől, a
kisebb mérethez való igazodás miatt.
• Mivel a technika még fiatal, még akadnak megoldásra váró hibák. Ezek közül a
legkomolyabb talán a képek méretéből ered.
• Nem lehet csak a jelenleg létező méretekben gondolkodni a töréspont ok esetén.
2.4 Reszponzív vagy adaptív webdesign
Úgy a reszponzív, mint az adaptív design esetében is a cél olyan weboldalak készítése, melyek
egyaránt jól jelennek meg okostelefonokon és asztali gépeken. Ha a felhasználók
szempontjából nézzük, akkor adott egy weboldal, mely egy URL -ről elérhető, és használható
mobilon, tableten, laptopon is, vagyis felhasználói szemszögből nem sok különbség van a két
megoldás között. De másképp áll a helyzet ha a vállalat szempont kából tekintjük a dolgokat.

11
Az egyik legalapvet őbb különbs ég a két megoldás között, hogy a reszponzív design egy
kliensoldali megoldást jelent, az adapt ív esetében egy szerveroldalit .
A reszponz ív oldalak esetén a felhasználó a teljes oldalt megkapja, adaptív design esetén
viszont a szerver azonosítj a az esz közt s az annak megfelelő weboldalt tölti be. A reszponzív
weboldal alapja egy r ács, ami alkalmazkodik a képernyő felbontástól függően. Az adaptív
design az előre beállított képernyőfelbontásokhoz igazodik, tehát va n egy oldal az asztali
gépre, van egy a táblagépre és van egy mobilra de akár lehet külön egy TV -re is. Ennek a
megoldásnak több változata van amellyel pontosabban ki lehet szolgálni a különböző
eszközöket , míg a reszponzív oldalak egyetlen változattal dolgoznak . A reszpozív design
esetén betöltődik a teljes weboldal okostelefonokon, táblagépen is, és csak a böngészőhöz
érkezve dől el, hogy milyen formában jelenik meg az oldal a felhasználó számára. Ebből adódik
a tesztelés legkézenfekvőbb eszköze is, hogy ahogy változtatjuk a böngészőabla k méretét, úgy
változik a weboldal mérete, elrendezése is. Az adaptív esetében a szerver egyszer azonosítja
be az eszközt egy szkript lefuttatásával, és az annak megfelelő verziót tölti be .
A kérdés már csak az, hogy mikor melyiket érdemes használni. Abban az esetben használjunk
adaptív designt, ha nagyobb testreszabottságot szeretnénk elérni a mobilos weboldal esetén
azáltal, hogy bizonyos tartalmakat elrejtünk, illetve olyan tartalmakkal szeretnénk bővíteni az
oldalt amelyek az asztali megoldásban felesle gesek lennének. Reszponzív oldalt olyan esetben
érdemes készíteni, ha alacsonyabb költségű, egyszerűen karbantartható megoldást keresünk,
egyszerű, átlátható weboldalt szeretnén k s fontos, hogy az oldal minden eszközön hasonlóan
nézzen ki.
2.5 A reszponzív des ign megvalósításának alapelemei
Amint már a Reszponzív webdesign története alfejezetben is említettem Ethan Marcotte a
Responsive Web Design című cikkjében a reszponzivitás három alapelemére fektette a
hangsúlyt. A folyékony rácsszerkezet (fluid grids), a média lekérdezések (media queries) és az
adaptív képek (flexible images) alapozzák meg a reszponzív design megvalósítását. Ezek
mellett a töréspont fogalmát is megemlíte m.
2.5.1 Folyékony rácsszerkezet
A reszponzív design megvalósításának egyik alappilére a foly ékony rácsszerkezet használata.
Elterjedésük előtt a legtöbb weboldal egy fix szélességű oldalszerkezetre épült, mivel az
eszközök képernyőmérete nagyjából azonos volt. Viszont napjaink világában, annyi különböző
képernyőméret használatával mindez lehetetl en. Erre nyújtanak megoldást a folyékony

12
rácsszerkezetek, melyek lényege egy olyan oldalszerkezet létrehozása, melyen belül minden
egyes elem helye százalékos értéket használva van kifejezve és mindegyikük átméretezhető és
alkalmazkodik a többi elemhez. Pi xelek helyett százalékokban kell gondolkodni. (Harb et al.,
2011)
Annak érdekében, hogy kiszámoljuk egy elem relatív méretének értékét az elem szélességének
pixelbeli értékét el kell osszuk a szülő elem (parent element) szélességével.
Képlet: (aktuális el em pixelben / befoglaló elem pixe lben) x 100 = elem szélessége %
Ezzel a képlettel pontosan kitudjuk számolni az egyes elemek viszonyát, azaz a pontos
százalékos értékét. Tegyük fel, hogy egy olyan weboldalon dolgozunk, mely egy illető elemet
maximum 960 pi xel nagyságban képes megjeleníteni, a böngészőablak mérete pedig 1280
pixel, akkor a relatív arány 960 px / 1280 px = 75%. A képletet Ethan Marcotte vezette be a
Dan Cederholm -mal együtt írt Handcrafted CSS című könyvének a folyékony rácsszerkezetről
szóló fejezetében . A folyékony rácsszerkezet előnye, hogy beállíthatunk egy maximális
szélességet (max -width) és a design hatása nagy méretű képernyőkön is meglesz. A rács több
oszlopra oszlik a szerkezet egyszerű kezelésének érdekébe n. A szerkezet kialakítása során nagy
népszerűségnek örvendenek a keretrendszerek, mint a Bootstrap , vagy a Fundation . Ezeket
nagyon jól tes tre szabhatjuk és nagyon egyszerűen hozhatunk létre velü k szinte bármilyen
szerkezetet.
Példa folyékony rácsszerkezetre :
2.3 ábra: Folyékony rácsszerkezet koncepciója, egy fejléccel és két oszloppal

Forrás: http://courses.iicm.tugraz.at/iaweb/surveys/ws2011/g3 -survey-resp-web-design.pdf
A 2.4. ábrán szemléltetett CSS kódban használt szélességértékeket a 3. ábrán feltüntetett
pixelbeli értékek arányaként, a bemutatott képlettel számolták ki. A rács maximális szélessége
60em, mely megakadályozza az oldal elnyúló szé lességének kialakulását nagyobb felbontású

13
képernyők esetén. A tartalomdoboz 68% -os szélessége a képlettel kiszámolt 70% -2% a szegély
számára.

2.4 ábra: Folyékony rácsszerkezet CSS

Forrás: http://courses.ii cm.tugraz.at/iaweb/surveys/ws2011/g3 -survey -resp-web-design.pdf
A megfelelő HTML file segítségével a várt végeredmény megszületik, hisz az oldal
alkalmazkodik a képernyő méretéhez.
2.5.2 Foly ékony média
Folyékony mé dián a képek, videók reszponzív an történő k ezelését értjük. A képek
reszponzívan való kezelésének legegyszerűbb módja, ha CSS -t használva beállítjuk a kép
maximális szélességét 100% -ra, vagyis az img { max-width: 100%;} utasítást használjuk.
A width tulajdonság 100% -ra való állítása által a kép res zponzívvá válik és az eredeti méreténél
kisebb és nagyobb méreteket is felvehet (2.5. ábra) . Amennyiben a max -width tulajdonságot
Forrás www.w3schools.com 2.5ábra: Reszponzív kép a szélesség értékének állításával, csa k width használatával

14
használjuk a kép nem vehet fel eredeti méreténél nagyobb értéket (2.6. ábra) . Ha a konténernél
nagyobb méretet próbál felvenni akkor a konténer méretét fogja felvenni, mert nagyobb
méretűvé válása nem lehetséges. (Marcotte, 2011)
2.6 ábra: Reszponzív kép a max -width használatával

. Forrás: www.w3schools.com
A max -width : 100% szabályt nem csak képek, hanem videók vagy más médiabel i elemek
esetén is használhatjuk : img, embed, object, video {max -width:100%;} .
Ha több kép közül szeretnénk választani és HTML5 -t használunk akkor a picture tag
használatával megadhatjuk a különböző forrásokat:
<picture>
<source media="(min -width: 40em)" s rcset="big.jpg 1x, big -hd.jpg 2x">
<source srcset="small.jpg 1x, small -hd.jpg 2x">
<img src="fallback.jpg" alt="">
</picture>
Ugyanakkor akár a böngészőre hagyhatjuk a legmegfelelőbb kép kiválasztását a következő
kódrészlettel:
<img src="small.jpg" srcset= "large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
sizes="(min -width: 36em) 33.3vw, 100vw"alt="A rad wolf">
2.5.3 Média lekérdezések
„A média lekérdezések a reszponzív webdesign alapjait képezik lehetővé téve a weboldal
megjelenítésének megváltoztatását egy leké rdezés által. “ (Fielding, 2014 : 68 o. ) A média
lekérdezés egy CSS technika, melyet a CSS3 bevezetése óta használnak. A médialekérdezések
média típusokból és média tulajdonságokból állnak. A média típusok lehetővé teszik
különböző stíluslapok használatát kü lönböző eszközök számára, mint például:

15
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

2.7 ábra: Média típusok

Forrás: www.w3schools.com
A média lekérdezések szerkezete:
@media not|only mediatype and (media feature) {
CSS-Code;
}
Annak érdekében, hogy bizonyos CSS tulajdonság ok csak akkor legyenek alkalmazva ha
bizonyos feltételek teljesülnek a @media kulcsszót használjuk. Példa nyomtatásra szánt
stílusra : @media print { background: white }. A médiatípus me gnevezésének több előnye is
van, melyek közül m egemlíteném azt, hogy csökkenti a HTTP kérések számát, ami segít a
weboldal betöltési idejének csökkentésében . (Fielding, 2014)
A következő média lekérdezés egy oldal háttérszínét változtatja meg, ha képernyőr ől van
megtekintve az oldal. Ebben az es etben a háttérszín világoskék lesz amennyiben az oldal 500
pixelnél kisebb méretű lesz.
@media only screen and (max -width: 500px) {
body {
background -color: lightblue;
}
}
A stíluslapokat a @import utasítás segítségével is meghívhatjuk a CSS fájljainkban:

16
@import url(color.css) screen and (width: 500px ). A média lekérdezés feltételeit tagadhatjuk
is, ha a NOT kulcsszót használjuk. Tehát, a következő stílus lap akkor töltődik be, ha a média
típusa nem nyomtató és nagyobb a szélessége 500px -nél. (Laki , 2016)
<link href="example.css" rel="stylesheet" media ="not print and (min -width: 500px)" />
Amint már említettem a médialekérdezés eket a médiatípusokon kívül a mé dia tulajdonságok
is alkotják. Az egyik leg fontosabb médiatulajdonság a width (szélesség) , mellyel megadhatjuk
a viewport (megjelenítési felület) szélességét a görgetési sávot is beszámítva akárcsak a
világoskékké változó háttér példa esetén . Egy másik jelentős tulajdonság a height (hosszúság) ,
mellyel az aktuális megjelenítési felület magasságát adhatjuk meg. Az orientation
tulajdonsággal a kép irányát adhatjuk meg, portrait vagy landscape értékekkel.
A médialekérdezések esetén fontos szerep et játszanak a töréspontok (breakpoints). A
töréspontok olyan értékek amelyeknél változást szeretnénk látni. A kékhátteres példa esetén a
töréspont 500 px. A gyakorlatban ezek az értékek általában megfelelnek a legelterjedtebb
eszközök kijelzőjének méretei nek, mégpedig 76 8px, 992px és 1200 px értékek használatosak.
(Laki , 2016)
2.5.4 Viewport
Megjelenítési felületnek (viewportnak) nevezzük a böngésző azon területét ahol a weboldalak
megjelennek. A viewport mérete eszközfüggő, például okostelefonokon sokkal kisebb mint
egy számítógép kijelzőjén. Ha mobilról tekintünk meg egy weboldalt akkor csak a viewportnak
megfelelő részt fogjuk látni az oldalból, ami alapesetben a kijelző mérete. A HTML5
megjelenése óta a viewport a <meta> tagen belül irányítható. A <meta name= "viewport"
content="width=device -width, initial -scale=1.0"> kódrészlet beállításával weboldalunk
megjelenítési felülete megfelelően viszonyul a kijelző méretéhez.

17
2.8 ábra: Viewport

Forrás www.w3schools.com
A 2.8. ábrán szemléltetett kép az oldal viewport meta tag nélküli és a meta tag -es változatát
szemlélteti. A meta tag -ben szereplő width=device -width tulajdonság /érték páros a viewport
szélességét szabályozza. Ha több felbontású eszközre készítettük az old alunkat, akkor
választhatjuk a dinamikus érték megadást, az eszkö z fizikai kijelzőmérete alapján (device –
width), de egyedi értéket is megadhatunk. Az initial -scale tulajdonsággal manipulálni tudjuk a
nagyítás mértékét . Beállítja az alapértelmezett nagyítás mértékét a böngészőbe való első
betöltéskor.

18
3 A felhasználói élmény
Az élmények s egyben a különböző dolgok hatása ránk , emberekre mind életünk jelentős részét
képezik. De m i is az élmény? Milyen érzelmeket válthat ki az emberekben?
Mindannyian eltudunk képzelni egy kora reggeli ébredést. De mindegy az, hogy hogyan
ébredünk? Egyáltalán. Hatalmas a különbség egy csergőóra által megzavart álom és egy
napsugaras meg madárcsicsergéssel ellátott ébredés között. Ám ez utóbbi már a technológ ia
segítségével is megvalósítható. A könyvek egy bizonyos Philips “Wake -Up Light ”-ról írnak,
mely tulajdonképpen egy ébresztőórával ellátott lámpa. Különös képessége, hogy fél órával a
beállított időpont előtt napsugarat szimulálva kigyúl, majd madárcsicse rgéssel árasztja el a
szobát. Mennyivel másabb ez az ébredés a hagyományosnál. Az eszköz maga képes arra, hogy
az ébredés emberre gyakorolt hatását megváltoztassa. Képes az élmény megváltoztatására. S
épp ez képezi a felhasználói élmény célját. A felhaszná lói élmény nem a jó ipari tervezésről
vagy fantáziadús interfészekről szól, hanem azt sugallja, hogy túl kell lépni a materiális
dolgokon és élményt kell nyújtani az eszközök által. (Hassenzahl , 2014 )
“Felhasználói élménynek (user e xperience) nevezzük azo kat a benyomásokat (élményeket),
amik a felhasználót egy felület vagy termék használata közben érik. A user experience design
pedig egy olyan folyamat ami javítja a felhasználói elégedettséget a felhasználó és a termék
között, a használhatóság, a hozzáférh etőség és az élmény növelésével. ” (Bakos , 2017) Tehát a
felhasználói élmény a termékek használói által megélt érzelmek összessége amikor épp az adott
terméket használják. Képes egy sikeres terméket megkülönböztetni egy kevésbé sikerestől. A
termék belső mű ködése nem lényeges, a felhasználói élmény a termék külvilággal való
kapcsolatát tükrözi. Minden egyes termék amit valaki használ képes élményt teremteni.
3.1 A felhasználói élmény története
A felhasználói élmény fogalmát E.C. Edwards és D.J. Kasik haszná lta e lőször a “User
Experience W ith the CYBER Gra phics Terminal” című írásukban. Ám a koncepció igazán Don
Norman, pszichológus és tervező által vált népszerűvé. Ő volt az első olyan ember, akinek a
pozíciója User Experience Architect volt, amikor a z 1990 -es év ek elején az Apple fejlesztésén
dolgozott. “Azért találtam ki ezt a kifejezést, mert úgy gondoltam, hogy a humán interfész és
a használhatóság túl specifikus kifejezések: Egy személy minden, a rendszerrel szerzett
tapasztalatát le akartam fedni, beleértve az ipari formatervezést, a grafikát, az interfészt, a
fizikai interakciót és a használati útmutatót is.” (Don Norman )

19
Don Norman a “The design of Everyday Things” című köny vében arról írt, hogy a designnak
nem csak esztétikai szerepe van, helyette sokkal inkább funkcionális és használhatósági
szempontoknak kell megfelelnie. Ez a gondolatmenet irányelvvé vált a designerek számára. Ő
fogalmazta meg azt is, hog y a felh asználó -központú design fontos tényező , a felhasz nálói
igények alapján kell dönt éseket hozni a design -folyamatokban.
3.2 Felhaszn álói élménytervezés webes környezetben
A felhasználói élmény léte minden termék, szolgáltatástípus esetén létfontosságú. A
weboldalak esetén sem áll másképp a helyzet, hisz a felhasználói élmény mérésével
kulcsfontosságú kérdésekre kaphatunk válaszokat.
Ha egy felhasználó egy rosszul megtervezett oldalt látogat s esetleg böngészés közben nem
találja a keresett információkat, hirtelen magát kezdi el hibáztatni. Az lesz az érzése, hogy nem
volt elég figyelmes, nem képes kérdései megválaszolására. Felhasználói élménye amellett,
hogy negatív lesz, még önbecsülését is lesújtja. Épp emiatt nagyon fontos megfelelő időt szánni
a felhasználói élmény megtervezésére a weboldalak esetén .
Rengeteg weboldal k észült azzal az elgondolással, hogy a siker kulcsa elsőnek lenni az adott
piacon. Például a YAHOO! s a hozzá hasonló oldalak korai előnyre tettek szert a website -ok
piacán , viszont később nagy erőfeszítést igényelt a piacon való maradásuk. Számos vállalat
weboldalkészítésbe kezdett, mert nagy teljes ítményre s haszonra szamítottak. Viszont arra csak
utólag gondoltak h ogy a weboldal ten yleg pozitív élményt nyújtott -e a látogatóknak. Kudarcok
miatt e gyre nyilvánvalóbbá vált , hogy a felhasználói élmény az ami kialakítja a felhasználók,
vásárlók véleményét az illető vállalatról, ami képes egyik vállalatot megkülönböztetni egy
másiktól illet ve meghatározza ha a felhasználók visszatérnek -e a jövőben is. (Garrett, 2011: 12
o.)
Amint már korábban is említettem a felhasználói élmény határozza meg azt, hogy ha egy illető
személy visszatér -e még w eboldalunkra, igénybeveszi -e a továbbiakban is szolg áltatásainkat.
Egy weboldal tervezésekor figyelembe kell venni bizonyos szempontokat, melyek a
felhasználói élményt növelik. A felhasználók főleg információ szerzés céljából látogatnak meg
egy weboldalt. Éppen emiatt olyan fontos az , hogy mit hova helyezünk el, milyen színnel,
milyen betűméretet vagy típust használva. A weboldalak célja pedig az, hogy olyan formában
adja át az információt, amely a felhasználói szokásoknak megfelel elérve azt, hogy a
felhasználó jól és biztonságban érezze magát a felületen. Ennek tükrében összeállítottam egy
listát azokkal az elemekkel melyekre érdemes odafigyelni.

20
Oldaltervezés : Amikor egy weboldal vázát tervezzük oda kell fig yelni a létező szabványokra
is melyek megkönnyítik a felhasználók információszerzését. Ilyen például a linkként működő
logó bal felső sarokba való helyezése, a keresődoboz nyitóoldalra helyezése, webáruházak
esetén a bevásárlókosár job b felső sarokba tétele, a navigációs sémák felső sávban vagy egy
baloldali oszlopban való feltüntetése. (Leiszter , 2011)
Design : Egy website esetén a hangsúlyt a tartalomra kell fektetni , viszont a design sem
elhanyagolható . A designnak összhangban kell lenni e a tartalommal. A weboldal minden oldala
illetve különböző eszközökről tekintett változata is ugyanúgy kell design sz empontjá ból
kinézzel. Ezáltal egy egységes , konzisztens stílust lehet biztosítani a weboldalnak. A
konzisztencia pedig segít a felhasználó biztonságérzetének növelésében, hisz már sokkal
könnyebben navigál az oldalak között, könnyebben megtalálja a kereset t információkat.
Egyszerűség : A modern design egyszerű. Fontos szem előtt tartani azt, hogy a legtöbb
felhasználó nem az oldal kinézetét megcsodálni érkezett a honlapra , hanem információszerzés
céljából. Épp emiatt nem kell felesleges elemekkel ellátni az oldalakat. Azt, h ogy egy funkció
felesleges -e a webanalitika segítségével lehet kideríteni , melyről később esik szó.
Tartalom: Egy weboldalon csupán a felhasználók számára érdekes tartalmat kell megjeleníteni.
„A felhasználók először a tartalomról tesznek észrevételeket; h a a tartalom nem releváns, a lap
további felépítésével nem törődnek.” (Leiszter , 2011: 35 o.) Jakob Nielsen vizs gálatai
ébresztették rá a weboldal fejlesztőket arra, hogy a felhasználók a weben nem olvasnak , hanem
„scannelnek”, azaz csak végigpásztázzák az oldalt kulcsszavakat és fontos információkat. A
felhasználók többnyire F alakban olva snak a weben, ezért a leglény egesebb információkat a
látókörükbe kell helyezni. Lényegretörően, egyszerűen fogalmazott mondatokba kell átadni az
információt. (Leiszter , 2011)
3.1 ábra: F alakú tek intet hőtérképes megjelenítése

Forrás: http://www.useit.com/alertbox/reading_pattern.html

21
Betöltési sebesség : Nagy hangsúlyt érdemes fektetni a weboldal betöltési sebességére, melyne k
elhanyagolása nagy mértékben képes rontani a felhasználói élményen. A felhasználók nem
szeretnek várakozni, türelmük véges és gyorsan távoznak az oldalról. Épp emiatt fontos a
gyorsan betöltődő oldalak fejlesztése.
Mobilbarát weboldal : A felhasználói él ményt jelentősen növeli ha egy weboldal több eszközről
is ugyanolyan minőségben elérhető . „A felbontásfüggetlen megjele nítés fő alapelve, hogy soha
ne használjunk kötött képpontszélességet táb lázatok, keretek vagy bármilyen más képelem
megjelenítésére, ink ább a képernyőn adott hely százalékában határozzuk meg a méreteket! ”
(Leiszter , 2011: 37 o.)
Képek használata : A képeknek UX szempontból is fontos szerepük van hisz hitelességet
nyújthatnak. Erre jó példa egy amerikai költöztetéssel foglalkozó vállalat ese ttanulmánya.
Eredetileg a Harrington Movers nevű cég weboldalát egy boldog modellalkatú pár képe
díszítette akik dobozokat fogtak a kezükben a költözést jelképezve. Le szerették volna váltani
a képet s így a vállalat a Visual Website Optimizer -t használta, hogy tesztelje a képek
hatékonyságát két különböző verzióval, egy olyan képpel amely a vállalkozás csapatát
ábrázolja, illetve eg y cég birtokában levő teherautó képével. Mindkettő sokkal nagyobb
sikernek örvendett, mint az eredeti kép, hisz növelte a felh asználók bizalmát. Tehát
mindenképp érdemes tesztelni a weboldalakat különböző opciókat véve figyelembe illetve
érdemes hiteles, a vállalatot ábrázoló képeket alkalmazni .
Kereső : Vannak olyan weboldalak amelyek esetén nélkülözhetetlenek a keresők, mint a
webshopok, turisztikai oldalak. Ha szűrni, keresni szeretnénk nagyon fontos és egyben
időtakaré kos is egy jól működő keres ő létrehozása.
Fehér területek : A fehér területeknek is megvan a maga szerepük (például tipográf iai szerep) .
A zsúfolt információk túlterhelik az emberi agyat s épp emiatt a paragrafusok, oldalszélek közti
fehér területek elősegítik a felhasználó felfogók épességét.
A felhasználókkal való kommunikáció : A kommunikáció a legjobb eszköz arra, hogy
megismerjük felhasználóinkat. Épp ezért ajánlatos közzé tenni a gyakori kérdések
gyűjteményét, illetve rövid, lényegretörő kérdőíveket helyezni el az oldalon, melye kből a
felhasználók elvárásai kiderülhetnek.
A felsorolt elemekre való odafigyelés növelheti a felhasználók élményét , viszont manapság
szakemberek, úgynev ezett webanalitikusok véleményének kikérésére is lehetőség van.

22
A webanalitika célja a felhasználói tevékenységek számszerűsít ése. Többek között i nformációt
nyújt a látogatások számával, a kattintások mennyiségével, a honlap legnépszerűbb oldalával
kapcsolatban. A webanalitikusok feladata pedig a webanalitika által nyújtott adathalmazból
való hasznos inf ormációk kinyerése technikai elemzések által. Fontos kérdés például, hogy
végig szokták -e a látogatók olvasni a bejegyzéseket, honnan érkeznek a felhasználók, milyen
tartalmakat olvasnak szívesen. Manapság számos olyan analitikai eszköz közül választhatnak
a weboldal ak tulajdonosai, melyek segíthetnek az oldal hatékonyságának vizsgálatában s a
felesleges funkciók kiküszöbölésében. A legelterjedtebb ilyen eszköz a Google Anal ytics, mely
ingyenesen szolgáltat adatokat a látogatók forgalmáról , szokásaikról. A legnépszerűbb 10 000
weboldal közül 57% a Google Analytics szolgáltatásait használja. Regisztráció után
rendelkezésünkre bocsát egy kódrészletet melyet minden követni kívánt oldal kódjába bele kell
építeni. A továbbiakban lehetőséget nyújt a felhasználók k attintásainak megtekintésére, látni
lehet, hogy melyek azok a weboldalelemek melyek a legtöbb kattintásban részesültek. A
felhasználói élmény mérésére szakosodott másik webanalitikai eszköz a Hotjar . Erőssége a
hőtérképek, felvételek s űrlapo kra vonatkozó funkciók. A hőtérképek, amint a 3.1 -es ábra is
szemléltette egérmozgatásokból kirajzolt térképek melyek választ adnak arra, hogy melyek a
weboldal azon pontjai ahova a felhasználók leggyakrabban kattintanak, melyek azok a
területek ahol leggyakrabban törté nnek egérmozgások. A dolgozat kutatási részében a Similar
Web eszközt használtam, melyről bővebben a 4. fejezetben lesz szó.
3.3 Színek és ké pek a felhasználói élménytervezé sben
A hatékony weboldalak élvezetet nyújtanak a felhasználóknak, elégedettséget érnek el a
látogatók körében s ezálta l bizalmat nyernek. Olyan elemekre van szükség melyek
megragadják a felhasználókat s élvezetesebbé teszik az információszerzést. A színek és képek
nem csak egy weboldal kinézetének meghatározásában játszanak fontos szerepet, hanem
kultúrális jelentőségük is van. A elkövetkezőkben egy általános képet fogok nyújtani a
színek ről, kitérve arra, hogy a felhasználók preferenciái országonként változnak, majd a
képekről is szó lesz .
A színek is képesek érzelmek kiváltására, s összefüggnek a z emberek érzelmi világával.
Pszichológiai kutatások támasztják alá azt, hogy bizonyos színek nyugtató hatással vannak,
mások meg érdeklődésfelkeltésre alkalmasak. A szakemberek évekig a színek erejére
támaszkodva alkodták meg a vállalatok logóit a felhasz nálók bizalmának elnyerésére törekedve
s közben márkaimázst építve. 2011 -ben készült egy kutatás a színek érzelmekre gyakorolt

23
hatásának tesztelésére melyben egy weboldal színeit változtatták s arra voltak kiváncsiak, hogy
melyik színű design nyeri el legi nkább a felhasználók tetszését (3.2 ábra) .
3.2 ábra: Különböző színek has znála ta ugyanazon a weboldalon

Forrás: Emotion and website design, Dianne Cyr
A tesztelés során kiderült, hogy a kék volt a legkedvelte bb szín, a szürke pedig a legkevésbé
kedvelt. Az is kiderült, hogy a különböző színű oldalakon a felhasználók más -más módon
navigáltak. (Cyr, 2016)
Weboldalkészítéskor szükség van a honlap lokaliz álására, mely a tartalom nyelvének
meghatározását, a va luta és színek meghatározását jelenti, melynél mindenképp figyelembe
kell venni a célközönséget. A színek jelentése országonként különbözik. A piros szín
boldogságot jelent Kínában, de veszélyt Amerikában. A kék színnel kapcsolatban ugyanaz a
koncepció a világo n, hisz nyugalmat s békét sugall. A fekete és barna szomorúságra utal.
Felmérés készült az amerikai és indiai weboldalak összevetéséről is. Az összehasonlítás alapjai
a nyelv, képek, szimbólumok és színek voltak. Érdekes eredmény született, miszerint az indiai
portálok túlnyomó része fehér hátteren használt színes design -t alkalmaz, az amerikaiak pedig
főleg kék és pios színeket használnak, melyek a amerikai nemzeti zászló színei.
A tanulmányból is kiderült, hogy a színek használata jelentős hatással van a felhasználók
bizalmának elnyerésében s érdeklődésének felkeltésében. ( Cyr, 2016)
A sz ínek mellett fontos design elemet képviselnek a képek is. Használhatósági szempontból
vitatott kérdés a képek használhata, mivel lassítják az oldalakat illetve zavarhatják a
funkcionalitást. Viszont a képek mellett egy ennél erősebb érv áll, mégpedig az, hogy vonzák
a látogatók figyelmét és növelik a hitelességet. Az online közegben gyakran használnak
embereket ábrázoló képeket azzal a céllal, hogy növeljék a weboldalak esztétikus megjelenését.
A barátságos arcokat illusztráló képek pozitívan hatnak a látogatókra s növelik bizalmukat az
illető termékben, szolgáltatásban. Egy brit szupermarketlánc weboldaláról is készült egy
felmérés, melyben két majdnem egyforma oldalt teszteltek. A különbség csupán annyiból állt,

24
hogy az egyik oldalon egy emb eri arcot ábrázoló kép volt jelen, a másik oldalon pedig egy
ugyanakkora méretű szövegdoboz. A képet tartalmazó oldal sokkal nagyobb sikernek
örvendett. Korábban említettem már, hogy a felhasználók „scannelnek” a weben, de erre a
képek is hatással vannak. A webanalitika eszközeivel figyelni lehet a felhasználók viselkedését.
Amint a 3.3 ábra is szemlélteti a látogatók tekintete jobban szétszoródik az arcok jelenlétében,
a tekintetek az arcok megfigyelésétől, a címek elolvasásáig majd a szöveg „scanneléséig”
terjedt ek. Látható az ábrán, hogy az oldalak középső részére fókuszálnak leginkább a tekintetek
s amennyiben hiányoznak a képek a felhasználói tekintetek koncentráltabbak.
3.3 ábra: Tekintetek arcok jelenlétében és nélkülük

Forrás: Emotion and website design, Dianne Cyr
A képek esetében is beszélhetünk kultúrális vonzatról, hisz például Indiában a weboldalakon
található képek indiai személyeket ábrázolnak vagy pedig kultúrabeli elemeket. Elmondható
tehát, h ogy a képek és színek használatára is figyelni kell s mindenképp meg kell határozni
weboldalkészítéskor a célközönséget.
3.4 User Experience (UX) design és User Interface (UI) design
A két fogalmat gyakran keverik a kevésbé érintettek épp ezért tartom fontosn ak az UX és UI
közti különbségek kiemelését, a két design bemutatása által.
A UX webes/mobil felületek felhasználó centrikus tervezéséért, a felhasználói élmény
optimalizálásáért felelős. Az UX designer külön szakma, nem egyenlő a webdesignerrel. Az
UX sz akember mér, tesztel, elemez és adatokkal dolgozik. Egy cég és termékének felhasználói
élményét építi fel, azt elemzi és optimalizálja. Emellett a versenytársakat és az ügyfeleket
elemzi, a terméket felépíti és a tartalmilag fejleszti. Ugyanakkor UX-felada t a fejlesztők és a
UI designerek munkájának összehangolása is, a célok követése, majd az elemzések.
Az UI webes/mobil felületek esztétikai és funkcionalitásbeli tervezéséért felelős. Az UI
szakembert webdesignernek nevezik. Feladata az ügyfelek elemzése, grafikai tervezés,

25
animáció és interaktivitás biztosítása a weboldal számára. Emellett pedig a weboldalak
bővítése az eszközök képernyőjéhez alkalmazkodó funkcióval, azaz a reszponzivitás
megvalósítása is az ők feladatuk.
4 Utazási weboldalak elemzése
A továbbiakban a vilászinten elismert weboldalakról lesz szó. Egy összehasonlító elemzést
készítettem a 2016. évi 10 legjobbnak minősített weboldaláról. A website -ok látogatottságát,
telefonról történő nézettségét foglaltam össze táblázatos formában. Emellett pedig felhasználói
szemmel is megvizsgáltam az oldalakat, figyelve a felhasználói élményt befolyásoló
tényezőkre. Az aktuális weboldal “divatok” ismerete nagyon fontos ha weboldal készítést
tervezünk. Az internet változó világával nehéz lépést tartani s min dig naprakész
információkkal kell rendelkeznünk.
4.1 2016 legjobb turisztikai weboldalai
Az elemzők számára egyre nehezebbé válik kiválasz tani, de főleg ra ngsorolni a világ legjobb
weboldal ait mivel a front -end részen nagyon leegyszerűsödtek a modern oldalak. A legjobb
weblapok mindegyike teljes szélességgel rendelkező szerkezetet és egyszerű n avigációs
struktúrát alkalmaz a mobilról történő látogatások sebességének és hatékonyságának
érdekében. Viszont ez nem azt jelenti, hogy napjaink weblapjai nem elég kifi nomultak és
kivállóak, hanem azt, hogy az igazi kihívás a back -end részen, háttérben történik. Ugyanakkor
a turisztikai irodák honlapjai a mobile -first moduláris design -ra, a tartalom látogatófüggő
megjelenítésére illetve a teljes képernyőszélességet kihas ználó képek és videók jelenlétére
fektetik a hangsúlyt.
Nagyon fontos szerepet t öltenek be a turisztikai oldalak esetén a térképek. Fontos, hogy
mobilbarát térképeket alkalmazzunk, a Google Maps design szempontjából korlátozott
funkciói helyett. Pontosan meg kell határozni a célközösséget és nekik kell élményt tervezni,
weboldalt készíteni. Emellett pedig fontos megismerni a látogatókat és az összegyűjtött
információk szem előtt tartásával tervezni meg a tartalmat. Teret nyertek a weboldalakon
feltüntetett hosszabb videók, ahol a helyi lakosok szólalnak meg és büszkén népszerűsítik
lakóhelyüket.
2016 júliusában a www.skift.com weboldal munká sai kutatást készített ek és közzétették a top
25 turisztikai weboldal listáját . A rangsorolás nem kifejezetten a vizuális tervezésnek
köszönhető, hanem előnyt élvezt ek azok a weboldalak amelyek emelett felhasználói élményt

26
képesek nyújtani, többek között t elefonos készülékről is . Moder n elrendezés, könnyed
navigáció és hatásos látvány jellemzi ezeket az oldalakat.
A top 25 weboldal közül 10 -et én is be fogok mutatni, kiemelve legfontosabb
funkcionalitásukat. Az elemzésre elsősorban a SimilarWeb weboldalát használtam. A
SimilarWeb egy statisztikai és adatbányászati cég, amely fontos információkat szolgáltat
különböző weboldalakról s segít megismerni a fehasználók viselkedését. Az említett oldalról
szereztem a különböző weboldalak látogatóinak számát, illetv e azt is, hogy a látogatások hány
százaléka történt számítógépről és hány százaléka mobiltelefonról. Emellett pedig az oldalon
töltött átlagos időre vonatkozó információt és a keresőben történő rangsorolás számát is az
adott oldal szolgáltatta. Az ingyenes információkhoz egyszerű hozzáférni, regisztrálni kell az
oldalra s csak meg kell adni a vizsgálni kívánt weboldal doméniumát vagy egy olyan kulcsszót
ami jellemzi az oldalt s rá lehet találni általa.

4.1ábra : SimilarWeb kezelőfelülete
Emellett a SEMRush elemző funkcióit is használtam, ami a SimilarWeb -hez hasonlóan
ingyenes en is hozzáférhetővé tesz különböző adatokat . A SEMRush főleg a versenytársak
keresőmarketing, illetve hirdetés i kampányra vonatkozó strat égiáinak felderítésére
szakosodott. Emellett pedig a ku lcsszavakat tekinti erősségének. Erről az oldalról szereztem az
organikus illetve fizetett keresésből származó forgalom mennyiségének értékeit.

27

4.2 ábra: a SEM Rush kezelőfelülete
A rangsorolás első helyezettje a Nashville Music City weboldal, mely a várost ismerteti.
Különlegessége, hogy e gy 43 perces videó által nyerhetnek betekintést a látogatók az ottani
életbe és a country zene világába. 2017 januárja és márciusa között 955 489 felhasználó
látogatta meg a weboldalt, amiből 51.67% mobilos felületről 48.33% pedig desktopos
felületről. A megoszlás is azt bizonyítja, hogy a weboldal reszponzív és a mobilos verzió
könnyen használható. Ha mobilról látogatjuk az oldalt nem sok különbség et észlelünk. A menü
legördülő listává válik, a képek viszont ugyanolyan jó minőségű ek, csak méretük változott és
scroll layoutot használtak.
A második helyezés a NYC & Company weboldalt illeti amely káprázatos módon ábrázolja
New Yorkot. A főoldalt több vide ó tölti ki, melyeknek különlegessége, hogy time -lapse módot
használva készülte (4 .3 ábra). A weboldalt 2017 januárja és márciusa között 2 958 000
felhasználó látogatta meg. 41.78% -ban mobilról, 58.22% -ban pedig desktopos kész ülékről
történt a látogatás. Az oldal m obilról való megtekintés esetén is élményt nyújt a felhasználónak,
az alsó részen felbuk kanó ikonokból álló menüszalag és a scroll layout egyszerűvé teszik a
böngészést. A Time -Lapse videó helyett azonban egy statikus kép van jelen. A videók felkeltik
a felhasználók érdeklődését, kívánkoznak a bemutatott helyszínekre. Az oldal betartja a
navigációra vonatkozó ergonómiai standardokat, hisz egy hagyományos, jobb felső részben
elhelyezett menüszalag, bal oldalon található linkként működő logó is köszönti a
felhasználókat. Mindez könnyíti a navigálást s növeli a felhasználók élményét. A képek helyi
jellegzetességeket szemléltetnek, egy egyszerű, fekete -fehér oldalvázat díszítve.

28

4.3 ábra: Time -lapse A NYC weboldalán
Harma dik helyen a Visit California weboldal található. Az oldal tartalomtervezése kiválló, hisz
feltünésmentesen irányítja a forgalmat a partne r website -ok oldalára. A Visit California 2015
januárjában újult meg, s a hosszú görgetőlap, kép orientáció, tartalomközpontúság illetve a
mobile -first megközelítés vette át a weboldal on az uralmat. 2013 -ban a oldalt mindössze 150
000 -n látogatták hónaponta, az újulás után pedig 2016 máju sában 1.5 millió lett a látogató k
szám a. Idei l átogatottsága januártól márciusig 5 289 000 fő, s az eszközök aránya : 67.16%
mobil, 32.84% számítógépről történő látogatás. Ha telefonról tekintjük meg az oldalt azt
észleljük, hogy szinte változatlan a desktopos verzióhoz képest. Ugyanaz az elre ndezés köszön
vissza, csak kisebb méretben. Ami a felhasználói élménykeltést illeti az egyszerű navigáció s
képek sokasága megragadja a felhasználók figyelmét. Az oldal világoskék designja békét és
nyugalmat sugall. Ugyanakkor a weboldal tökéletes példája a 3.2. alfejezetben említett fehér
területek használatának, hisz nem szabad túlzsúfolni egy oldalt, arányosan kell alkalmazni az
elemek és fehér területek mértékét.

4.4 ábra: Fehér területek a Visit Californi a weboldán

29
Egy újabb említésre méltó website az Experience Columbus nevet viseli. Az Ohioban található
Columbus várost mutatja be az oldal az ot t található szállodák, éttermek , látnivalók által. Az
oldal különlegessége a gyorsaság. 2017 -ben márciusig 253 5 81 fő látogatta meg az oldalt,
58.46% telefonról, 41.54% pedig számítógépről. Az arányok ellenére, amikor telefonról
próbáltam elérni az oldalt a lap szerkezete nem alkalmazkadott a készülékhez egy újonnal
hozzáadott szövegdoboz miatt valószínűleg (4.5. áb ra). Ha valaki épp mobilról próbálta elérni
a weboldalt felhasználói élménye csökkent. Ahoz, hogy így tájékozódni lehessen az oldalon be
kell nagyítani a lapot. A reszponzív design pedig többek között épp ennek az élménycsökkentő
műveletnek a kiküszöbölésé re jött létre.

4.5 ábra: A z Experience Columbus weboldal hibás mobilverziója
Az ötödik helyen a Visit Seattle weboldal áll. Egyedis ége abban rejlik, hogy helyi b randeket
reklámoz , valamint a VisitSeattle.tv v ideóstudióját is tartalmazza az oldal. 2017 januárjától
márciusig 44 2 181 fő látogatta meg , 47.99% telefont, 52.01% pedig desktopos készüléket
használva. Az oldal könnyen használható mobilról is, a legördülő menülista megkönnyíti a
navigációt, a képek pedi g ugyanolyan jó minőségben köszönnek vissza. A UX növelésének
egyik érdekes technikáját, a CSS nyelv :hover tulajdonságát gyakran használták képelemeknél .
A következő helyezett a Discover Los Angeles weboldal. A honlap több nyelven is elérhető, s
különlege ssége egy nagyszerű térkép (4.6. ábra) , mely Los Angelest és környékét ábrázolja. A
térkép érd ekessége, hogy bármely városrész re, környéken található település re kattintva
megjelenik egy ablak mely a település történetét s látnivalóit sorolja fel. A térkép célja, hogy a
turisták a városon keresztül érkezzenek , minél több látnivalót elérve. Támogatják a Groovy
Get Lost In L.A. kampányt, melynek célja, hogy a nevezetes látnivalókon kívül más
érdekességeket is felfedjenek a turisták. 2017 -ben 4 109 M fő látoga tta meg az oldalt márciusig .
Telefonról 73.54%, számítógépről pedig 26,46%. Az arányok érthetőek is, hisz a térkép s egyéb
funkcói is ugyanolyan jól működik telefonról is, mint asztali gépről tekintve. A térkép maga

30
képes élményt teremteni a látogatók szám ára, hisz megkönnyíti keresési eljárásukat a
szolgáltatott információk által.

4.6 ábra: A Discover Los Angeles weboldal térképe
Hetedik helyen a Visit Dallas honlap található. A weboldal főoldalán eg y videó köszönti a
látogatókat. N em hiányzik egy jól megtervezett térkép sem, mely sokat könnyít a
tájékozódáson s az oldal erősségét képviseli . Látogatottsága idén 494 722 fő, a telefonos és
desktopo s látogatások pedig a következő képpen oszlanak meg: 63.19% telefon, 36.81%
desktop. Ha mobilról tekintjük meg az oldalt, videó helyett egy kép vár ránk a főoldalon, illetve
a térkép sincs kiemelve. Ha az oldalt egyszerű felhasználóként tekintjük meg, elemzési szándék
nélkül , megakad a szemünk a jobb sarokban levő ikono n (4.7. ábra) , mely az időjárást s a Dallas
jelenlegi hőmérsékletét mutatja. Az időjárás jelzése mindenképp pozitívan hat a felhasználókra
s az utazási weboldala knál nagy jelentősége lehet .

4.7 ábra: Időjárás jelzés a Visit Dallas weboldalán
Érdemes még megemlíteni a San Francisco Travel webo ldalát is, mely a környék egyedi ségére
mutat rá. A főoldalon szintén megtalálható egy térkép, melynek részeire rákattintva információt
kaphatunk a vár osrészekről. Az oldalt 2017 januárjától márciusig 1 381M fő látogatta meg,
55.58% telefonról, 44.42% desktopos készülékről. A mobilról megtekintett honlap nagyon
hasonlít a számítógépről megtekintetthez. Ugyanazok az elemek jelennek meg a főoldalon,
kisebb méretben, s kicsit á trendezve. Az oldal többnyelvűséget biztosít s így a felhasználók
összesen 10 nyelv közül választhatnak. A felhasználók elégedettségét s kényelemérzetét növeli
ha saját nyelvükön is böngészhetnek, ezért ajánlott a több nyelven elérhető oldalak kivitelezése .

31
Kilencedik helyen a Visit Finland weboldal áll. A gy önyörű képek és videók felkeltik a
látogatók figyelmét s Finnország legszebb helyei által csalogatják a turistákat. Az oldalt 2017 –
ben márciusig 1 388 millió felhasználó látogatta meg. Ebből 58.21 % mobi los készülékről,
41.79 % pedig desktopról. Ha mobiltelefonról tekintjük meg a Finn ország csodáit bemutató
website -ot feltűnik, hogy a köszöntésre szánt videó helyét egy kép veszi át, viszont a képek
sokasága és szépsége ugyanaz marad. Az oldal felső részébe n dominál a szürke szín, viszont
az általa okozott negatív hatást kárpótolják az oldal közepén található színes, vidámságot
tükröző és mosolygó embereket ábrázoló képek.
Tízedikként a Visit Stoc kholm weboldalt említeném meg. A színes weboldal a svéd főváro s
sokoldalúságára helyezi a hangsúlyt. Az oldal 2 nyelven is elérhető, s különleges képsorozat,
kolázsok határozzák meg a designját. Stockholm oldalát a látogatók 34.47% -a telefonról, a fent
maradt 65.26% pedig desktopos készülékről látogatta meg. Az oldal mobilos verziója csak
angolul érhető el, legördülő menülistát használ. Viszont a navigáció egyszerűsítésének
érdekében a legfontosabb menüpontok külön is megjelennek az oldal fejlécében. Az oldalt
képgalériák (4. 8. ábra) sokasága jellemzi, melyek a helyi szépségeket illusztrálják.

4.8 ábra: A Visit Stockholm weboldal galériája
Az elemzésből kiderült, hogy a turiszikai oldalak sikeréhez hozzájárulnak a képek, videók,
színek használata s aránya. A jól elkészíte tt mobilbarát weboldalakat a felhasználók többnyire
telefonról látogatják. A turisztikai weboldalak esetén kulcsfontosságú egy jól elkészített térkép
is, amely segíti a turistát a tájékozódásban. Az elemzett oldalak túlnyomó részében a mobilról
történő lát ogatások jóval meghaladták a destopos készülékekről történő látogatások arányát.
Ez is azt bizonyítja, hogy fontos, s érdemes időt, pénzt szánni egy olyan weboldal
létrehozására, mely bármilyen készülékről jól mutat. Egy másik fontos elem amellyel ez utazá si
honlapok előnyre tehetnek szert a többnyelvűség. A felhasználók kényelmét s bizalmát is

32
növeli. Érdekességnek számított az egyik oldalon feltüntetett időjárás is, melynek célja a
felhasználó tájékoztatása egy olyan információval kapcsolatban melyet norm ál esetben úgyis
megkeresett volna egy másik weboldalon. De az információhalmaz sokszínűsége megkönnyíti
a webes felhasználók keresési folyamatát.
A számszerű összehasonlítás szemléltetésének érdekében az említett webanalitikai eszközök
segítsésével nyert információkat egy táblázatban is összesítettem. A 4.1. táblázat az egyes
weboldalak forgalmát és az oldalon töltött átlagos látogatási időt szemlélteti. A legtöbb
látogatónak 2017. januárja és márciusa között a Visit California weboldal örvendett (5 289 M ).

Weboldal
elneve zése Látogatottság
(2017. január-2017.
márc ius) Mobil
látogatási arány Desktop
látogatási
arány Átlagos
látogatási idő

Nashville Music City 955 489 61.67% 48.33% 00:02:35
NYC & CO 2 958 M 41.78% 58.22% 00:03:28
Visit California 5 289 M 67.16% 32.84% 00:01:01
Experience Columbus 253 581 58.46% 41.54% 00:01:27
Visit Seattle 442 181 47.99% 52.01% 00:01:48
Discover Los Angeles 4 109 M 73.54% 26.46% 00:01:28
Visit Dallas 494 722 63.19% 36.81% 00:03:28
San Francisco Travel 1 381 M 55.58% 44.42% 00:01:24
Visit Finland 1 388 M 58.21% 41.79% 00:01:42
Visit Stockholm 595 402 34.74% 65.26% 00:03:03
4.1 táblázat: 10 weboldal forgalmának összehasonlítása 2017. január és 2017. március között. Forrás: saját szerkesztés
Ahogyan a 4.1. táblázat is szemlélteti nagyon kicsi a különbség az egyes oldalak mob ilról
történő látogatási aránya és desktopról történő aránya között. A 10-ből 7 esetben, azaz az
adatok 70% -ban több látogató érkezett mobilos ké szülékről, mint desktoposról. Ez a reszponzív
design használatának tudható be.
Az elemzés során megvizsáltam az oldalak keresési találataira vonatkozó adatokat is. A Google
találati listáját két egység alkotja: organikus találatok és fizetett találatok. Az organikus
találatok azok a honlapcímek melyekért a tulajdonosok nem fizetnek. A fizetett találatok ban

33
megjelenő hirdetéseket a honlapok tulajdonosai adták fel és kattintásonként fizetnek érte a
Googlenak. A 4.2. táblázatban összefoglaltam a keresésekre vo natkozó információkat. Látható,
hogy vannak olyan weboldalak melyek organikus keresési találatai is nagyok, illetve a fizetéses
keresési találatok száma is nagy . Ilyen például a NYC & CO weboldal. Ugyanakkor olyan
weboldalak is vannak melyek tulajdonosai e gyáltalán nem fizetnek a keresési találatokért , mint
például a Visit Stockholm vagy a Visit Seattle oldalak.

Weboldal
Elneve zése Organikus keresés Fizetéses keresés
Nashville Music City 617 000 2900
NYC & CO 729 000 6 600
Visit California 408 000 84 400
Experience Columbus 104 000 576
Visit Seattle 51 000 0
Discover Los Angeles 29 000 26 200
Visit Dallas 29 000 592
San Francisco Travel 78 400 6
Visit Finland 11 700 7
Visit Stockholm 6 400 0
4.2 táblázat: Organikus és fizetéses keresések száma 10 utazási honlap esetén. Forrás: saját szerkesztés.
4.2 Turisztikai oldalak Romániában
A felhasználók viselkedésének megértése kulcsfonto sságú egy vállalkozás életében. A
továbbiakban a ro mániai turisztikai i rodák weboldala iról lesz szó. Az volt a kérdés, hogy
mennyire felelnek meg az itthon elterjedt honlapok a nemzetközi elvárásoknak, illetve, hogy
mennyire hasonlítanak a 10 elemzett website -hoz. A Romániában ismert turisztikai irodák
közül a Christian 76 Tour, Happy Tour, ZTour , Cocktail Holidays, illetve a Blue Travel
weboldalait elemeztem és hasonlítottam össze. Egy 2016 -os felm érés szerint Románia
legsikeresebb és legnagyobb bevétellel rendelkező utazási irodája a Christian tour. Ezt követi
a Happy tour. Az elemzésre a már említett SimilarWeb weboldalát használtam. Főleg a
reszponzívitás vizsgálatára helyeztem a hangsúlyt. Vajon Romániában is többen látogatják

34
telefonos készülékről az utazási honlapokat? Hogyan oszlanak meg ezek az arányok?
Mennyien látoga tják a hazai oldalakat? A 4.3. táblázat az összesített adatokat tartalmazza az öt
Romániában elterjedt irodára vonatkozóan.

Christian
76 Tour Ztour Happy Tour Cocktail
Holidays Blue Travel
Látogatottság
2017. janu ár
– 2017.
március 998 259 94 164 41 794 102 727 5 000
Desktopról
érkező
látogatók 63.86% 59.47% 60.98% 71.73% 86.72%
Telefonról
érkező
látogatók 36.17% 10.53% 39.02% 28.27% 13.28%
Reszponzív -e
az oldal Igen Nem,
viszont
van
telefonos
aplikáció igen nem Nem
4.3 táblázat: Romániai weboldalak forgalma. Forrás: saját szerkesztés
Az elemzésből főképpen az de rül ki, hogy Romániában a legtöbb személy számítógépről
látogatja a weboldalakat, de azon oldalak esetén ahol reszponzív a weboldal vagy kü lön
telefonos aplikációt fejlesztettek a telefonról történő látogatottság 35 %-nál nagyobb. E gy
turisztikai oldal esetén nagyon fontos egy használhatósági szempontból teljesen megfelelő
kereső jelenléte, ahol különböző szűrési feltételek adhatóak meg.
A Romániá ban elterjedt turisztikai honlap ok nagyon eltérnek a világszinten nagyra értékelt
weboldalaktól. Nem uralják teljes oldalszélességű képek, videók az oldalakat, nem használnak
térképeket és a reszponzív design is kevés oldal esetén található meg. Többe k között az említett
tényezők hiányának is köszönhető, hogy Romániában a legtöbb utazási iroda weboldalát nagy
arányban desktopról látogatják, míg külföldön ez pont fordítva van. A színvonalas turisztikai
oldalakat főleg mobilos készülékről látogatják. Külföldön nagyon elterjedtek a bemutatkozó
oldalak, ahol egy ország, város helyi látnivalói kerülnek középpontba, s szállásfoglalásra is
lehetőség van. Amint már a dolgozatom első részében is említettem o lyan oldal , mely Romániát
mutatná be jelenleg nincs.

35
5 Egy utazási weboldal létrehozása
Dolgozatom további részében egy Romániát bemutató reszponzív turisztikai oldal létrehozását
fogom bemutatni mely a Visit Romania címet fogja viselni. Modern designot szeretnék
alkalmazni, teljes szélességű képekkel, vid eókkal és scroll layouttal. A hangsúly a reszponzív
megvalósításon lesz, illetve a 3.2 alfejezetben leírt felhasználói élménytervezés módszereinek
alkalmazásán.
5.1 Felhasznált eszközök és technológiák
Ebben a z alfejezetben a weboldal létrehozásánál használt eszközöket és programozási
nyelveket fogom ismertetni egy rövid áttekintés által , kiemelve mindegyik szerepét a webes
applikáció létrehozásánál.
5.1.1 Felhasznált eszközök
Sublime text
Kódszerkeztésre a Sublime Text 2 szövegszerke sztőt használtam. A Sublime T ext a TextMate
Mac-ra szánt népszerű szövegszerkesztő ötletére épül. Elérhető ingyenesen is, így én is az
ingyenes verziót használtam. A front -end fejlesztésben egyre elterjedtebb , s kezdő
fejlesztőknek is ajánlott az egyszerű kezelőfelülete miatt . Projekt kezelésre, bővítmények
telepítésére (például Emmet, melyet a HTML/CSS munka menet gyorsítására alkalmaznak) ,
témák kiválasztására is lehetőséget ad . Ha HTML kódot írunk s egít a hibák kiküszöbölésében
is, hisz a zárótageket automatikusan megjeleníti. Ugyanak kor a CSS és JavaScript esetén sem
elhanyagolható a segítsége, hisz mindig felvázolja a választási lehetőségeket egy -egy
tulajdonság vagy akár függvény használatakor.
Apache HTTP szerver
Az Apache HTTP szerver nyílt forráskódú webszerver, mely lehetővé te szi a weboldalak
elérését HTTP protokollon keresztül. Népszerűségét annak is köszönheti, hogy ingyenesen
használható, míg a konkurens szerverek (mint a Windows Server) licenszköteles ek.
Lehetőséget nyújt webtárhelyek üzemeltet ésére, valamint támogatja a sz erver oldali nyelveket.
5.1.2 Felhasznált technológiák
HyperText Markup Language (HTML)
A HTML a weboldalak vázát képező kódnyelv, mellyel minden fejlesztőnek meg kell
ismerkednie. A HTML a tartalom, szerkezet megjelenítésére szolgál. „A HTML állomány
egyszerű szövegállomány, amely rövid jelölő tagokat tartalmaz. A jelölő tagok alapján tudja a
böngésző, hogyan kell me gjelenítenie az oldalt.” (Nagy, 2011: 33 o.) HTML -t használtam a

36
weboldalo n szereplő adatok megjelenítésére illetve a szerkezet kialakításáért. Emellett pedig a
HTML kó don belül definiáltam a használt stíluslapot, illetve a HTML kódba ágyaztam bele a
PHP kódot is.
Cascading Style Sheets (CSS)
A CSS egy stílusleíró nyelv, melyet bármilyen XML alapú dokumentum stílusleírására
használhatunk (HTML, XML ). Meghatározza, hogy hogyan is jelenjenek meg a HTML tagek.
A CSS célja a megjelenítés elválasztása a tartalomtól . A CSS kódot a HTML dokumentumon
belül is megadhatjuk, de célszerűbb egy .css kiterjesztésű fájlba külön tárolni, mert így
újrahasznosíthatju k a stíluslapokat. Az el készített honlap stílusának kialakítására használtam
CSS-t, mint a betűtípus, szín, képméretek és az elrendezés. Viszont a CSS központi szerepet
játszik a reszponzív design megvalósításában, hisz birtokolja a média lekérdezéseket, m elyek
a weboldal reszponzív jellegének alappilérei.
Javascript
A Javascript egy kliens oldali szkriptnyelv, mely interaktivitást biztosít a weboldal számára.
Kiemelkedő szerepe van a felhasználói élmény növelésében , az űrlapvalidálásnál, sütik
kezelésénél , eseménykezelésnél . A Javascript kód a HTML dokumentumba beágyazható, de
egy külső fájlban is tárolható. Szintak tikailag a C nyelvhez hasonlít. A Javascript egy objektum
alapú nyelv, ami azt jelenti, hogy lehetőséget ad objektumok létrehozására, viszont o sztály -,
típusdefiniálásra nem. A Visit Romania weboldal esetén a felhasználói élmény növelése
érdekében használtam néhány Javascript függvényt. Javascriptet használtam a reszponzív
módban felbukkanó legördülő menülista esetén, ahol kat tintásra a menüikon X-re változik át.
PHP
A PHP egy szerveroldali szkriptnyelv . A HTML oldalakba az oldal minden megnyitásakor
lefutó PHP kódot ágyazhatunk. A PHP kódot a webszerver értelmezi és egy megtekinthető
kimenetet hoz létre. A PHP számos webszerverrel és adatbázis -kezelő rendszerrel képes
együttműködni, viszont jellemző szoftverkörnyezete az Apache webszerver és a MySQL
adatbázi s. (Welling & Thomson, 2010)
MySQL
A MySQL egy nyílt forráskódú relációs adatbázis -kezelő rendszer. Egy weboldalon
megjelenítet t adatok forrá saként használják, hisz az adatbázisok lehetőséget adnak az adatok
tárolására, keresésére, rendezésére és kinyerésére. Lehetőség van kapcsolódni a kívánt

37
adatbázishoz, adatokat feltölteni illetve lekérdezni. A MySQL szabályozza az adatokhoz való
hozzáférés t, ezáltal biztosítva az egyidejű adathozzáférést. A MySQL a struktúrált lekérdező
nyelvet (SQL) használja. (Welling & Thomson, 2010)
5.2 Implementáció
A tov ábbiakban a weboldal fejlesztéséről lesz szó. Egy weboldal létrehozása előtt nagyon
fontos meghatározni a célközönséget. A Visit Romania webes aplikáció kalandra és utazni
vágyó felnőtteket és fiatalokat is egyaránt megszólít. Minden egyes társadalmi rétegbe tartozó
személy számára kínál utazási csomagokat. Az oldalon ötvözöm a klasszikus elemeket, mint
például a borítókép, melyek az idősebb korosztály megszólításának eszközei, a modern
elemekkel, mint a Facebook, Instagram logók, elérhetőségek. Egyszerű f ehér hátteret
alkalmaztam, fekete színű tartalommal. Embereket ábrázoló képek is jelen vannak az oldalon ,
az utazási csomagok részben. A színekről és képekről szóló alfejezetben leírtak alapján az
embereket ábrázo ló képek hitelessé teszik weboldal unkat.
5.2.1 Reszponzív oldalváz és navigáció létrehozása
Az oldal vázát a HTML kód szolgáltatja. Amikor egy reszponzív oldalt hozunk létre fontos a
<head> tag-be beírni a <meta name="viewport" content="width=device -width, initial –
scale=1.0"/> kódot , mely biztosítja a design esztétikus megjelenését minden eszközön és
képernyőfelbontás esetén . A viewport -ról és az inicial s cale-ről már volt szó, de
megismételném, hogy a viewport meta tag határozza meg azt, hogy egy weboldal hogyan fog
megjelenni a képernyőn. Viszont vannak olyan vélemények is melyek a használatának
nélkülözésére utasítanak. Egyes vélemények szerint az initia l-scale használata problémákat
okozhat ha iOS operációs rendszert használunk. A probléma akkor szokott felmerülni amikor
a felhasználók a képernyő álló (portrait) és fekvő (landscape) helyzete között váltogatnak. A
saját fejlesztésű oldal esetén alkalmazta m az említett kódrészletet. A stílus meghatározására
egyetlen CSS állományt használtam. A Javascript kódot is külön állományba mentettem.
Javasol t a külön állományok használata, mert elkülöníthetjük a megjelenítést, funkcionalitást.
A weboldal strukt úráját a <body >-ban kell defini álni. A HTML5 újításai közül is felhasználtam
néhányat, mint a <header>, <footer> tag-ek. A weboldal fejrésze a menüt és a bor ítóképet
tartalmazza.
Amint a Felhaszn álói élménytervezés webes környezetben című alfejezetben is említe ttem a
felhasználók figyelme főleg a tartalomra irányul, viszont egy könnyen nyomonkövethető menü
létrehozása elősegítheti a látogatók információkeresési folyamatát . A navigáció fontos szerepet

38
tölt be a fe lhasználói élmény kialakításában is, hisz a felhas ználónak egyértelmű kell legyen,
hogy az aktuális oldalról milyen további oldalakra juthat, milyen további információkat érhet
el. Mindebben a linkek is fontos szerepet játszanak. A saját fej lesztésű weboldal menüsora
négy linket tartalmaz, a kezdőlap, látnivalók, hotelek illetve utazási csomagok linket. Így a
látogatók számára világossá válik, hogy Románia látnivalóiról, az országban található
szálláshelyekről illetve ajánlott utazási csomagokról tudhatnak meg részleteket. 992 pixelnél
nagyobb képernyők es etén a menüpontok az oldal j obb felső részében találhatóak. A position:
fixed; CSS utasítás által elérhető, hogy görgetés után is ott maradjanak. A szabványoknak
megfelelően az oldal bal felső sarkában ebben az esetben logó helyett az oldal címe látható,
mely szintén linkként működik s visszavezeti a látogatókat a főoldalra.

5.1 ábra: A saját fejlesztésű weboldal menüsora és borítóképe
Viszont ha táblagépről vagy telefonról tekintjük meg az oldalt a menüsáv e gy más formá t ölt.
A felhasználói élmény növelésének érdekében egy legördülő menüt hoztam létre, melyet a
felhasználók által ismert s lassan szabvánnyá vált három csíkból álló menüikon jelez. Az ikon
létrehozására nem képet használtam hanem három téglalapb ól raktam össze CSS -st használva.
A men üikon viszont csak akkor jelenik meg ha 992 pixelnél kisebb felbontású képernyőről
nézzük meg az oldal t. Alapesetben az ikon display: none; -ra van állítva, mely elrejti ezt. A
megjelenítésére média lekérdezést haszná ltam. Az ikon létrehozására a következő HTML és
CSS kódot használtam:
.bar1, .bar2, .bar3 {
width: 30px;
height: 4px;
background -color: #333;
margin: 4px 0;
transition: 0.4s; }
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>

39
Média le kérdezés az ikon megjelenítéséhez :
@media screen and (max -width:992px) {
ul.topnav li {display: none;}
ul.topnav li.icon {
float: right;
display: inline -block;
}}
Amint az 5.2. ábrán is látható létrejött a menu ikonja ha kisebb képernyőről nézzük meg az
oldalt.

5.2 ábra: Legördülő menü iPhone 6 Plus -ról tekintve az oldalt
Ha rákattintunk az ikonra megjelennek a men üpontok illetve a menüikon X -é változik növelve
a felhasználói élményt s jelezve a felhasználónak azt , hogy hol tud kilépni a menübő l. A
kattintás ra történő esemény kiváltására J avascript függvényeket használtam. Amikor az ikonra
kattintunk két függvény is meghívódik. A myNavigation függvény a menüpontok
megjelenítéséért felelős, a change függvény pedig az ikon X -é változtatásáért. A m ásodik
függvény érvénybe juttatja a change osztály CSS kódját. A függvények és az ikonváltozás
kódja:
function myNavigation() {
var x = docum ent.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive"; }
else {
x.classNa me = "topnav";
}}
function change(x) {
x.classList.toggle("change");
}
@media screen and (max -width:992px) {
.change .bar1 {
-webkit -transform: rotate( -45deg)
translate( -9px, 6px) ;
transform: rotate( -45deg) translate( -9px,
6px) ;
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit -transform: rotate(45deg)
translate( -8px, -8px) ;
transform: rotate(46deg) translate( -1px, –
5px)
}

40
Az 5.3. ábra az így létrejött legördülő menülistát szemlélteti. A szürke háttér jelzi a
kiválasztott menüpontot.

5.3 ábra: Legördülő me nülista
A top 10 weboldal elemzésekor kiderült, hogy a webdesignerek mennyire gyakran
alkalmaznak maximális szélességű képeket és videókat . Ezt a tech nikát én is alkalmaztam
első sorban a borítókép esetén.
.headerImage {
max-width: 100%;
height: auto;
border -style: none;
padding -top: 40px;
}
A max-width: 100% tulajdonság -érték páros által lehet elérni a képek, videók reszponzív
megjelenítését. Bővebben A reszponzív design megvalósításának alapelemei című alfejezet
folyékony médiáról szóló részében volt szó a médiaelemek reszponzívvá tételéről.
A weboldalak fejléce mellett a lábléc jelenléte is fontos. A designerek úgy emlegetik a láblécet
mint egy utolsó esélyt a felhasználók figyelmének megragadására. A fejlesztett honlap láblécét
az 5.4. ábra szemlél teti. A lábléc a közösségi média általi elérhetőségeket tartalmazza, mely
nagyon fontos a felhasználó kkal való kommunikáció megvalósításában.

5.4 ábra: A weboldal lábléce
5.2.2 Reszponzív képgaléria létrehozása
Egy reszponzív képgaléria kivitelezéséhez szintén média lekérdezésekre van szükség. A képek
nem mar adhatnak ugyanolyan méretűek mobilos készülékről nézve az oldalt, illetve a galéria
szerkezete se maradhat változatlan. Minden kép egy külön <div> tag-ben szer epel. Egy másik

41
megoldás az lett volna ha táblázatot készítek. Régebb az oldalvázak létrehozásánál is
táblázatokat használtak de kiderült, hogy ez nem a legjobb megoldás. A <table> tag nem
szerkezet építésre volt kitalálva hanem adatok táblázatos formájú m egjelenítésére. Ha
táblázatos szerkezetre építünk később sokkal nehezebb átszervezni a weboldal alakját. A
dolgozat alapját képező web oldal szerkezetének létrehozásakor <div> tag-eket és a float
tulajdonságot használtam, mely szintén egy oldaltervezési tec nika. Előnye, hogy könnyen
megtanulható és egyszerűen használható. Hátránya pedig a rugal matlanság. Egy modernebb
tecnika a CSS f lexbox használata, melyet a CSS3 óta vezettek be. A flexbox használata
biztosítja, hogy az elemek a képernyőméretnek illetve ol dalelrendezésnek megfelelően
viselkedjenek. A képgaléria egy képének HTML kódja:
<div class="responsive">
<div class="gallery">
<a href="danubedelta.html">
<img src="delta.jpg" class="picture" >
</a>
<div class=" desc">Danube Delta</div>
</div>
</div>
A galéria esetén két töréspontot is alkalmaztam, 992 pixelt (tablet képernyője) és 400 pixelt
(telefon képernyő) . A szélességet százalékban adtam meg a médialekérdezéseken belül is, a
képek elrendezését pedig s zintén a float tulajdonság segítette elő.

5.5 ábra: Képgaléria számítógép képernyőjéről

42

5.6 ábra: A galéria tabletes képernyőfelbontás esetén
5.7 ábra: A képgaléria mobilos
változata Az 5.5-ös ábrán a képgaléria látható ha sz ámítógépről nézzük az oldalt. Ebben az esetben négy
kép kerül egymás mellé. A képek egymás mellé helyezénének több módja is van annak
függvényében, hogy hány képet szeretnénk egymással egyvonalba helyezni . Használhatjuk a
float tulajdonságot, a képek align attribútumát vagy a display: inline tulajdonság -érték párost.
Az 5.6 -os ábra és CSS kód a 992 pixelnél kisebb és 400 pixelnél nagyobb képernyőbontás
esetén lép érvénybe. Ebben ez esetben két kép kerül egymás mellé.

Amennyiben telefonról tekintjük meg az oldalt a galéria teljes oldalszélességű képekből áll, ezt
tükrözi a következő ábra:
@media only screen and (max -width: 400px){
.responsive {
width: 100%;
}
div.gallery img {
height: auto;
}
#video {
display: none;
}
}
@media only screen and (max –
width: 992px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
div.gallery i mg {
height: 300px;
}}

43

5.8 ábra: Galéria media lekérdezések
nélkül A médialekérdezések használata ebben az esetben nagyon fontos, hisz ha csak a 100% -os
képszélességet használjuk a képek elnyúlnak és következő ábrán szemléltetett negatív
eredményt érjük el:

5.2.3 Keresőfunkció létrehozása
A weboldalon szállásajánlatok is szerepelnek . A felhasználói élményt s egyben kényelmet is
növeli egy kereső megléte, mivel a látogatóknak nem egy adathalmazban kell keresniük, hanem
csak a nekik megfelelő kritériumú találatok között. A weboldal egy olyan keresőt tartalmaz
amely egy helység vagy turisztikai célpont megnevezése által szűri ki a megfele lő
szálláshelyeket. A cél az volt, hogy ha a felhasználó beírja a látogatni kívánt város nevét akkor
az űrlap elküldése után egy olyan oldalra kerüljön ahol az adot t város szálláshelyei jelennek
meg a szállodák nevével, az árral és a hivatalos oldalukra mutató linkkel ahol majd az
érdeklődők szobát is foglalhatnak. Kliens oldalon csak egy formra van szükségünk, mely így
néz ki:

5.9 ábra: Kereső form
Az űrlapok esetében nagyon fontos a validálás, az adatellenőr zés. Gyakran találkozunk a
weben olyan űrlapokkal melyek kötelezően kitöl tendő szövegmezőket tartalmaznak. A

44
hotel kereső űrlap esetén is elküldés előtt kötelezően ki kell tölteni a szövegmezőt. Ha üresen
hagyjuk s úgy kattintunk a Search gombra akkor a dob oz szegélye pirossá válik, jelezve a
felhasználónak, hogy k i kell tölteni az adott mezőt. Ennek megvalósítására a required
tulajdonság alkalmazására van szükség: <input type="text" name="search"
required="required"> . Viszont ez még nem elegendő hisz nem zá rja ki annak a lehetőségét,
hogy a felhasználó egy üres oldalra érkezzen. Szervez oldalon ellenőríztem ha a beírt helység
neve létezik -e az adatbázisban s amennyiben nem , hibaüzenettel tájékoztatom a felhasználót
arról, hogy az illető helység szálláshelyei ről nincs ajánlatunk. A felhasználói élmény
növelésének fontos eszköze a felhasználóval való kommunikáció.
Webes adatbázis létrehozása és adatok lekérdezése
Az adatokat tárolni kellett valahol, hogy a keresés megtörténhessen. Egy olyan adatbázist
hoztam létre mely egyetlen táblából áll , mégpedig a hotelek szemléltetésére alkalmas
információk összességéből. A tábla sémája: Hotels ( HotelID , HotelName, Price, City, Picture,
Link) . A tábla létrehozására s adatokkal való feltöltésére a phpMyAdmin kezelőfelület et
használtam . A phpMyAdmin egy nyílt forráskódú eszköz, melyet PHP -ben írtak és a MySQL
adatbázisok kezelésére alkalmas az interneten keresztül. Adatbáziskészítésre, törlésre, táblák
létrehozására, módosítására, törlésére, mezőkre vonatkozó műveletek végr ehajtására illetve
SQL parancsok futtatására is alkalmas. Az 5.10 . ábra a a Hotels tábla szerkezetét illusztrálja a
phpMyAdmin kezelőfelületén.

5.10 ábra: A Hotels tábla szerkezete phpMyAdmin -t használva
A következő lépés az adatok lekérése . Ehez egy adatbáziskapcsolat létrehozására volt szükség.
A MySQL kiszolgálóhoz az alábbi kóddal kapcsolódunk: $abkapcs =
mysqli _connect("localhost","root","") .

45
Amikor parancssori felületről használjuk a MySQL -t mindenképp közölnünk kell, hogy melyik
adatbázissal szeretnénk dolgozni. Erre szolgált a mysqli_select_db($abkapcs,"hotel") kód. Az
adatbázis lekérdezésére a mysqli _query() függvényt használjuk.
A $sorok=mysqli_query ($abkapcs,"SELECT HotelName, Price, City, Picture , Link FROM
Hotels WHERE City = '$value'") kód segítségével létrehozzuk a lekérdezést. Ebben az esetben
a $value változó értékével egyenlő helységhez tartozó hotelekre vonatkozó tulajdonságok
kerülnek tárolásra. A $value változó értéke ebben az esetben a f elhasználó által kitöltött
szövegdoboz tartalmával egyenlő. Ezt az értéket POST metódus általi paraméterátadás
segítségével állítottam be, mégpedig a következőképpen: $value=$_POST['search'] , ahol a
search az input mező neve. A lekérdezés eredményét egy wh ile ciklus segítségével kerestem
vissza s irattam ki . Erre vonatkozik az alábbi kód:
while($sor=mysqli_fetch_array($sorok)){
echo '<div><div class="pictureContainer">
<img src= "'.$sor["Picture"].'" style= "width: 100% "></div>';
echo "<div class='textCon tainer'><h3>".$sor['HotelName']."</h3>
<h3>Price in lei (night/adult):".$sor['Price']."</h3>
<h3>Hotel website:<a
href=".$sor['Link'].">".$sor['Link']."</a></h3></div></div>";
}
Mindezek után az adatbáziskapcsolatot bontani is kell a mysqli_close () függvé ny által. A
függvény használata mindenképp ajánlatos, de igazi jelentősége abban az esetben van amikor
egy PHP szkript végrehajtódása sok időbe telik. Visszatérve a weboldalhoz, elmondható, hogy
a PHP-ban írt kód hatásaként a kereső működőképessé válik , am int a következő ábrán is
látható, kiszűri a feltételnek megfelelő szállásokat.

5.11 ábra: Találatok a tordai szálláshelyek esetén

46

5.2.4 Felhasználói élmény növelés a kurzor segítségével
A CSS :hover kiválasztóját ak kor szokták használni ha valamilyen változást szeretnén ek
kiváltani amikor a kurzor az adott elem fölé kerül. A 4.1-es alfejezetben bemutatot t oldalak
között is akadt néhány amely alkalmazta ezt a technikát. Elég vitatott kérdés , hogy az
érintőképernyős es zközök világában érdemes -e élni ezzel a lehetőséggel , hisz abban az esetben
a kattintás és a kurzor eszközre való helyezés e egybeesik . A legtanácsoltabb mód a külön
élménytervezés a hagyományos és érintőképernyős eszközökre. Amennyiben a z
érintőképernyős l aptopokat elhanyagoljuk és főleg a tableteket meg a telefonokat soroljuk be
az érintőképernyős eszközök kategóriá jába az élménytervezés megoldható a reszponzivitás
alapját képező média lekérdezések segítsé gével is. A fejlesztett weboldal utazási csomagokra
vonatkozó rész ében használtam a :hover kiválasztót, viszont csak a 992pxnél nagyobb
kijelzőméretű elemekre. Amint a következő képek is szemléltetik interaktivitást biztosít a
felhasználók számára s érdeklődésfelkeltő szerepe is van.

5.12 ábra: Képek interaktívvá tétele hover -rel
5.2.5 Térkép beágyazása
A legjobb weboldalak elemzéséből is látszodt, hogy a felhasználói élményre pozitívan hat egy
térkép jelenléte, főleg ha utazási oldalról van szó. A weboldalon levő térképet a Google Maps
API segítségével hoztam létre. Az API az alkalmazásprogramozási felület rövidítése, mely
lehetővé teszi egy programrendszer szolgáltatásainak használatát anélkül, hogy annak bels ő
működését ismernénk. Metódusok és eszközök halmaza m elyeket szoftverkészítésnél fel lehet
használni. A Google Maps API a térképek weboldalakon való megjelenítését segíti elő. A
térkép létrehozásához egy HTML oldalra, Javascriptben írt kódra és egy API kulcsra van
szükségünk. A térkép oldalbeli helyzeténenek meghatározására HTML -t és CSS -t használtam .
A már létező HTML file -ba csak egy div -et kellett létrehozni, melynek id-t állítottam be, hogy
majd elérhető legyen a get ElementById() Javascript függvénnyel. Kitérnék kicsit az id és class
(osztá ly) közti külön bségre is. Az id azonosítja azt az elemet melyhez hozzá van rendelve.
Fontos, hogy e gyedinek kell lennie az oldalon. Az osztályokat azokhoz az elemekhez

47
használjuk amelyek nem egyediek, azaz többször is előfordulnak a lapon. A térkép egyedi,
egyszer fordul elő a weblapon, így azonosítására id-t alkalmaztam.
A térképre vonatkozó CSS és HTML kód:
<div id="map"></div>
#map {
width: 100%;
height: 400px;
margin -top: 30px;
margin -bottom: 30px;
}
A fenti kód csak előkész íti a térkép helyét. A Google Maps API weboldalra való betöltéséért
Javascriptet kell használnunk. A kód a következő:
<script>
function initMap() {
var salina Coord = { lat:46.588833, lng: 23.787632 };
var map = new google.maps.Map(document. getElementById('map'), {
zoom: 6,
center: salina Coord
});
var marker = new google.maps.Marker({
position: salina Coord ,
map: map
}); }
</script>
<script async defer
src="https://map s.googleapis.com/maps/api/js?key=
AIzaSyB9aGT7ajTbZftXwW7Y3F8VCly76Fy1BcY&callback=initMap">
</script>
Egy f üggvényre van szükség, mely ebben az esetben az initMap() függvény. A salinaCoord
változóban a fókuszálni, megjeleníteni kívánt terület földrajz i koordinátáit tároltam el. A new
google.maps.Map() kódrészlet egy Google térkép objektumot hoz létre a paraméterként
megadott helyre. A paramétert a document.getElemen tById( ‘map’ ) paranccsal adtam meg,
melynek funkiója a map id -jú div megtalálása az oldal on. A center tulajdonság mutatja meg az
API-nak, hogy milyen földrajzi térségre közelítse be a térképet. A fent látható értékek Torda
földrajzi helyzetének megfelelő szélesség és hosszúságértékek. A zoom tulajdonság által a

48
beközelítés fokát lehet szabályo zni. A marker objektum egy bélyeget helyez el a térképen
jelezve a kerese tt helyszínt .
Ahoz, hogy az eddig le írtak működjenek az API betöltésér e is szükség van. Az async defer -t
tartalmazó szkript tölti be az API -t a megadott URL címről. A callback paramé ter végrehajtja
az initMap függvényt . Az async kulcsszó lehetővé teszi az oldal megtekintését az az idő alatt
is amikor az API töltődik. A key paraméter az API kulcsunkat tartalmazza melyet a Google
API Console -ra való regisztrálással kaphatunk meg. Így má r megmutatkozik a térkép is s a
megfelelő bélyegek is megjelennek, melyek néhány turisztikai központra mutatnak.

5.13 ábra: Romániát ábrázoló térkép
Már említettem korábban is, hogy a felhasználói élmény kia lakításának alapja az interakció.
Épp emiatt a térkép interaktívvá tétele volt a következő lépés. Ha azt akarjuk, hogy amikor a
felhasználó egy helyszínt jelző bélyegre kattint az illető terület beközeledjen egy
eseménykezelőt kell hozzárendelnünk a bélyeg hez. Ennek megvalósítására a következő
kódrészlet alkalmas:
google.map s.event.addListener(marker ,'click',function() {
map.setZoom(13);
map.setCenter(marker .getPosition());
});
A funkció az addListener() eseménykezelő használatával jön létre, ami egy olyan metód us
melynek egy objektumra, egy eseményre és egy függvényre van szüksége amit akkor hívjon
meg amikor az illető esemény kiváltódik.

49
Más eredményeket is el lehet érni eseménykiváltásra, például egy szövegdoboznak a
megjelenítését, mely információkat sz olgáltat az illető turisztikai célpontról. Fel lehet tüntetni
a belépő díj értékét, a nyitvatartási időintervallumot vagy ha épp javítás alatt van az illető hely
akkor azt is ha látogatható -e s további hasznos információkat. A szövegdoboz létrehozásához
szintén Javascriptet használtam:
google.maps.event.addListener(markerSalina,'click',function() {
var infowindow = new google.maps.InfoWindow({
content:"Program: Monday – Sunday 9.00 -16.00; Tickets: 30 lei/adult, 15 lei/children."
});
infowindo w.open(map,markerSalina);
});
A szövegdoboz a helységbélyeg fölött jelenik meg a következőképpen:

5.14 ábra: Szövegdoboz megjelenítése egy turisztikai központ helyszínén
Mostmár elmondható, hogy a z elkészít ett weboldal tartalmazza a legalapvetőbb funckióit egy
utazási oldalnak. Felhasználtam a top 10 turisztikai oldal elemzése során kiemelt
tulajdonságokat . Összességében a Visit Romania egy olyan bemutatkozó honlap lett mely
lehetővé teszi a látogatók számár a a helyi látványosságok gyűjteményének megtekintését,
szálláslehetőséget javasol, keresőfunkcióval rendelkezik és egy térképpel segíti elő a
tájékozódást. Mindezek mellett a legfontosabb tulajdonsága az, hogy reszponzív és esztétikus
megjelenést biztosít bármilyen képernyőfelbontásban.

50
6 Következtetések
Szakdolgozatomban a reszponzív webdesign és a felhasználói élménytervezés fontosságát
szemléltettem. A vállalatok műkédésére egyre nagyobb hatással van a weboldaluk. A technika
fejlődésével, főleg a mobi leszközök elterjedésének köszönhetően egyre nagyobb teret
hódít anak a reszponzív oldalak . A számítógépek világát lassan a mobileszközök világa váltja
fel s életünk számos területét befolyásolj a az internet . Épp emiatt érdemes befektetni egy
reszponzív és é lményt teremtő weboldal kivitelezésébe. Ismertettem a reszponzivitás
megvalósításána k alapjait, valamint azokat az elemeket melyek hatással lehetnek a felhasználói
élményre, s egyben arra is, ha egy felhasználóból vásárló lesz -e. Legyen szó színek
kiválász tásáról, képek használatáról, nyelvezetről vagy bármi másról, a cél mindig ugyanaz :
élményt teremteni a felhasználók számára és elérni azt, hogy visszatérjenek weboldalunkra.
Napjainkban egyre több ember kíván kitörni mindennapjaiból utazások révén. Ez mag yarázza
a turisztikai irodák sikerét. De a siker elérésé hez egy jól működő weboldalra is szükség van.
Weboldalkészítés előtt szükség van a piac felmérésére s er re volt hasznos a 10 legjobb
turisztikai weboldal elemzése is. Tisztába lettem az értékelt desig n elemekkel és a
nélkülözhetetlen funkciókkal. Ugyanakkor egyértelűvé vált, hogy a moder n weboldalak is
alkalmazkodnak a szakirodal mi követ elménye khez, többnyire a szabvályoknak megfelelően
néznek ki és az ergonómiai szabályokat is betartják. Az internet v áltozó világában újabb és
újabb lehetőségek adódnak, de a weboldalak alapkoncepciója ugyanaz marad.
A dolgozat elkészítése során létrehoztam egy Romániát bemutató turisztikai weboldalt .
Alkalmaztam a szakirodalmakban bemutatott technikákat s igazolódott a z, hogy elegendő egy
minimális CSS ismeret egy website reszponzívvá tételéhez. A gondok meg valóban a
képfelbontásokból , térképe khasználatból s navigáció ból eredtek . A weboldal kódjának szerver
oldali része még javításra, bővítésre szorul. A hotelekre vona tkozó adatokat tartalmazó tábla
nagyon kevés információt tartalmaz, az adatbázis pedig csak egyetlen táblából áll. A rendszer
működéséhez egy jól megtervezett adatbázisra és egy hoteleket tartalmazó API -ra lett volna
szükség. Mindemellett az oldalról törté nő szállásfoglalás is egy lehetőség az általam használt
főoldalra való átirányítás helyett. Az oldalváz, navigáció, képek reszponzívvá tétele sikerült,
viszont az oldalon használt térkép ne m reszponzív. Lehetőségem volt gyakorlatban is
felhasználni a bemut atott iradal mat s megtapasztalni a webfejlesztés szépségeit s egyben
nehézségeit is.

51
Kitérnék a további kutatási és fejlesztési lehetőségekre is. Az elemzett weboldalak adatait
mindössze három hónapra gyűjtöttem össze. További kutatási lehetőségként megeml íteném a
hosszabb időszakra vonatkozó adatgyűjtést, több weboldal vizsgálatát és elsősorban a
Romániában elterjedt honlapok részletesebb kutatását. Az általam vizsgált adatok mellett
szükségesnek tartom a hőtérképes megjelenítéseket is, melyek segítenek a felhasználói
szokások megismerésében. Ilyen felvételek megszerzésére én is tettem kísérleteket, viszont az
elemzést akadályozta a hőtérképeket generáló eszközök működése . Az ilyen jellegű eszközök,
mint például a Hotjar egy kódrészletet szolgáltat nak, mely et a weboldal kódjába be kell ágyazni
ahoz, hogy a viselkedések követhetőek legyenek. Így lehetetlen egy olyan weboldal elemzése
mely forráskódjához nincs hozzáférésünk. Egy másik lehetőség a webes környezetben
kialakult felhasználói élmény mélyebb kutatá sa, hisz az elkészített elemzések kissé hiányosak
a felhasználói élmény területén. Nehéz pontosan meghatározni azt, hogy melyek is azok az
elemek amelyek növelik a felhasználói élményt. Vannak olyan website tulajdonságok
melyekről általánosan is ki lehet j elenteni, hogy rontják a felhasználók élményét, mint például
a lassú betöltési sebesség. De a legtöbb elem jelenlétének értékelése egyénfüggő. Ami a
fejlesztést illeti a legtöbb lehetőség szerintem a térképpel kapcsolatos, hisz még távol áll az
elemzés sor án bemutatott személyreszabott térképektől. Régiók szerinti csoportosítást lehetne
alkalmazni, a térkép külalakján változtatni és használni az útvonalkiválasztó funkciót. Emellett
a keresőt is ki lehetne bővíteni úgy, hogy ár szerint rendezett adatokat kap junk illetve más
szűrési feltételeket is meg lehessen adni.
Mindigis kiváncsi voltam arra, hogy miért is változnak bizonyos dolgok egy weboldalon ha
kisebb képernyőről tekintjük az oldalt. Most választ kaptam erre: a felhasználói élmény és
kényelem növelé se miatt. Érdemes mobilbarát oldalakat tervezni és érdemes felhasználói
élménytervezéssel foglalkozni, hisz a legjobb honlapok mind ide tartozó tulajdonságokkal
rendelkeznek. Napjainkban a reszponzivitás kihívását már nem csak az eszközök jelentik,
hanem a z is, hogy a weboldal esztétikusan jelenjen meg bármilyen böngészőről tekintve. Ez is
további lehetőségekre utal s alátámasztja azt, hogy a responzív design még nem egy teljesen
kimerített téma és érdemes vele foglalkozni.

52
7 Irodalomjegyzék
Bakos , Sz. ( 2017), Felhasználói élmény tervezés, elérhető:
http://www.newconcept.hu/blog/felhasznaloi -elmeny -tervezes -ux-design , letöltés időpontja :
2017.02.17.
Craig, S. & Fisher, A . (2013), Jump start responsive web design , elérhető:
https://htchttp.s3.amazonaws.com/books/jump_start_responsive_web_design.pdf ,
letöltés időpontja: 2017.03.09.
Cyr, D. (2015), Emotion and website design , elérhető : https://www.interaction -design.org ,
letölt és időpontja: 2017.03.09.
Fielding , J. (2014), Beginning Responsive Web Design with HTML5 and CSS3, Apress
Garrett, J.J. (2011), Elements of User Experience, The: User -Centered Design for the Web
and Beyond , elérhető:
http://ptgmedia.pearsoncmg.com/images/9780321683687 /samplepages/0321683684.pdf ,
letöltés időpontja: 2017.04.22 .
Harb, E., Kapellari, P., Luong, S., Spot, N. (2011), Responsive Web Design , elérhető:
http://co urses.iicm.tugraz.at/iaweb/surveys/ws2011/g3 -survey -resp-web-design.pdf ,
letöltés időpontja: 2017.04.22.
Hassenzahl, M. (2014), User Experience and Experience Design , elérhető:
https://www.interaction -design.org , letöltés időpontja: 2017.05.18.
Laki, Á. (2016), Bevezetés a reszponzív tervezésbe , elérhető: https://adamlaki.com
Leiszter, A. (2011), Webergon ómia – Jakob Nielsen nyomán , Typotex
Marcotte, E. (2 011), Respo nsive Web Design, el érhető:
http://www.reprosol.be/sites/reprosol.beta.the -aim.be/files/responsive -webdesign(ethan –
marcotte).pdf , letöltés időpontja: 2017.05.18.
Margea, R. & Margea, C. (2017), Considerations for the Mobile Web. Paradigm Shift,
Informatică economică , vol. 21, no. 1/2017: 22
Nagy, G. (2011), Web programozás , Ad Librum

53
Oates, G. (2016), The 25 Best Tourism Websites in the Worl d in 2016 , elérhető:
https://skift.com/2016/07/13/the -25-best-tourism -websites -in-the-world -in-2016
Welling, L. & Thomson, L. (2010), PHP és MySQL webfejlesztő knek, Perfact -pro