České vyssoké učení technické v Praze Fakkulta elektro otechnická Katedra po očítačů
Bakalářská á práce Webovvé řešení prro cestovateele Švanda Pavel P
Vedoucí ppráce: Ing. Miroslav Macík M
Studijnní program: Elektrotechhnika a info ormatika, strrukturovanýý, Bakalářsk ký Oboor: Výpočetn ní technika 2 květen 2011
Poděkování Rád bych poděkoval vedoucímu bakalářské práce panu Ing. Miroslavu Macíkovi za cenné rady, připomínky a čas, který mi věnoval při vypracování této práce. Dále bych rád poděkoval všem, kteří mě podporovali a jakkoliv pomáhali během studia a psaní této práce.
iii
Prohlášení Prohlašuji, že jsem práci vypracoval samostatně a použil jsem pouze podklady uvedené v přiloženém seznamu. Nemám závažný důvod proti užití tohoto školního díla ve smyslu §60 Zákona č. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o změně některých zákonů (autorský zákon). V Novém Městě na Moravě dne 27. 5. 2011 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
iv
Abstract This bachelor work deals with a proposal and realization of a web solution determined for travelers. The proposed solution is based on the previous user research. Within the frame of user research was examined not only with what kind of inconvenience users encounter during the travels, but also how they manage their experiences, such as photographs of the already made trips. With a help of thus obtained information, a proposal of web solution was made. Proposal was made with a help of a prototpe of which were tested cognitive passage. This proposal of an aplication was subsequently implemented and eventually verified by the test of usability.
Abstrakt Tato bakalářská práce se zabývá návrhem a realizací webového řešení určeného pro cestovatele. Návrh řešení je proveden na základě předchozího uživatelského výzkumu. V rámci uživatelského výzkumu se zjišťovalo, nejenom s jakými nepříjemnostmi se uživatelé během svých cest setkávají, ale i jakým způsobem spravují své zážitky, například v podobě fotografií, z již uskutečněných cest. Pomocí takto získaných informací byl proveden návrh webového řešení. Návrh byl proveden pomocí prototypu, nad nímž byl proveden test kognitivním průchodem. Tento návrh aplikace byl následně implementován a nakonec ověřen pomocí testu použitelnosti.
v
Obsah Poděkování....................................................................................................................... iii Prohlášení......................................................................................................................... iv Abstract ............................................................................................................................. v Abstrakt ............................................................................................................................. v Obsah ............................................................................................................................... vi Seznam obrázků ............................................................................................................... ix Seznam tabulek ................................................................................................................. x Kapitola 1. Úvod ............................................................................................................... 1 1.1
Motivace ............................................................................................................. 1
1.2
Cíle práce ........................................................................................................... 2
Kapitola 2. Analýza .......................................................................................................... 3 2.1
Uživatelský výzkum ............................................................................................. 3
2.1.1
Plán výzkumu ............................................................................................. 4
2.1.2
Vymezení cílové skupiny uživatelů ............................................................ 4
2.1.3
Popis cílové skupiny uživatelů ................................................................... 5
2.1.4
Kvalitativní studie ....................................................................................... 5
2.1.5
Vyhodnocení informací získaných při rozhovorech ................................... 6
2.1.6
Kvantitativní studie ..................................................................................... 8
2.2
Rozbor stávajících řešení ..................................................................................... 9
2.2.1
Facebook.com ............................................................................................. 9
2.2.2
Flickr.com ................................................................................................... 9
2.2.3
Picasaweb.google.com .............................................................................. 10
2.2.4
Blog.cz ...................................................................................................... 10
2.2.5
Odlišnost naší aplikace ............................................................................. 11
2.3
Analýza vývojových prostředků ........................................................................ 11
2.3.1
Zend framework ........................................................................................ 11
2.3.2
Nette framework ....................................................................................... 11
2.3.3
Symfony .................................................................................................... 12
2.3.4
Doctrine 2 ................................................................................................. 12
2.4
Vyhodnocení analýzy ......................................................................................... 12 vi
Obsah 2.4.1
Persony...................................................................................................... 12
Kapitola 3. Návrh ............................................................................................................ 16 3.1
Požadavky na aplikaci ........................................................................................ 16
3.2
Shrnutí požadavků na aplikaci ........................................................................... 17
3.2.1
Funkční požadavky ................................................................................... 17
3.2.2
Nefunkční požadavky ............................................................................... 17
3.3
Použité technologie a výsledná architektura aplikace ........................................ 18
3.3.1
Volba použitých frameworků ................................................................... 18
3.3.2
Architektura aplikace ................................................................................ 19
3.3.3
Použité technologie ................................................................................... 19
3.4 Model datového skladu ...................................................................................... 20 3.5
Uživateské role ................................................................................................... 21
3.5.1
Role Host .................................................................................................. 22
3.5.2
Role Uživatel ............................................................................................ 22
3.5.3
Role Administrátor ................................................................................... 22
3.6
Návrh uživatelského rozhraní ............................................................................ 22
3.7
Závěry návrhu .................................................................................................... 23
Kapitola 4. Implementace ............................................................................................... 24 4.1
Adresářová struktura .......................................................................................... 24
4.2
Přístupová práva uživatelů ................................................................................. 25
4.3
Hromadné nahrávání souborů ............................................................................ 26
4.3.1
Nastavení Uploadify ................................................................................. 26
4.3.2
Nahrávaná data ......................................................................................... 27
4.4
Technologie AJAX............................................................................................. 27
4.4.1
Metody AJAX dotazů ............................................................................... 27
4.4.2
Příklady použití technologie AJAX .......................................................... 28
4.5
Vkládání obrázků do editoru .............................................................................. 29
4.6
Závěry implementace ......................................................................................... 29
Kapitola 5. Testování ...................................................................................................... 31 5.1
Kognitivní průchod ............................................................................................ 31
5.1.1
Scénář kognitivního průchodu .................................................................. 33
5.1.2
Výsledky kognitivního průchodu.............................................................. 35
5.2
Test použitelnosti ............................................................................................... 36 vii
Obsah 5.2.1
Volba uživatelů k testu použitelnosti ........................................................ 37
5.2.2
Průběh testu............................................................................................... 37
5.2.3
Vyhodnocení testu .................................................................................... 37
5.3
Vyhodnocení testování ....................................................................................... 38
Kapitola 6. Závěr ............................................................................................................ 39 6.1
Shrnutí práce ...................................................................................................... 39
6.2
Budoucí práce..................................................................................................... 40
Seznam použité literatury ............................................................................................... 41 Slovník pojmů ................................................................................................................. 43 A Seznam použitých zkratek .......................................................................................... 46 B Dotazník - screener ..................................................................................................... 47 C Dotazník - kvantitativní studie .................................................................................... 49 D Otázky pokládané během rozhovorů .......................................................................... 53 E Faktoidy ....................................................................................................................... 54 F Skeletony ..................................................................................................................... 57 G Hypotézy ..................................................................................................................... 59 H Výsledky kognitivního průchodu ................................................................................ 61 I Výsledky testu použitelnosti......................................................................................... 70 J Instalační příručka ........................................................................................................ 74 K Obsah přiloženého CD ................................................................................................ 76
viii
Seznam obrázků obr. 1 Plán výzkumu s jednotlivými kroky ....................................................................... 4 obr. 2 Josef Zcestovalý ................................................................................................... 13 obr. 3 Karel Nebojácný ................................................................................................... 14 obr. 4 Model architektury ............................................................................................... 19 obr. 5 Model datového skladu......................................................................................... 20 obr. 6 Přehled uživatelských rolí a umožněných akcí .................................................... 21 obr. 7 Prototyp uživatelského rozhraní - fotogalerie ...................................................... 22 obr. 8 Hotové uživatelské rozhraní - fotogalerie ............................................................ 23 obr. 9 Ukázka aplikace - Vkládání článků ...................................................................... 29 obr. 10 Ukázka aplikace - Deník .................................................................................... 30 obr. 11 Ukázka aplikace - Náhled fotogalerie ................................................................ 30 obr. 12 Ukázka aplikace - Cizojazyčné fráze ................................................................. 30 obr. 13 Prototyp aplikace - první kognitivní průchod ................................................... 32 obr. 14 Prototyp aplikace – druhý kognitivní průchod ................................................... 33 obr. 15 Testovaná aplikace ............................................................................................. 36
ix
Seznam tabulek tab. 1 Srovnání existujících řešení s naší aplikací .......................................................... 10 tab. 2 Splnění požadavků jednotlivými frameworky ...................................................... 18 tab. 3 První kognitivní průchod - úkol č. 1 ..................................................................... 33 tab. 4 Druhý kognitivní průchod - úkol č. 1.................................................................... 35
x
Kapitola 1 Úvod Tato kapitola se zabývá motivaci k napsání této práce. Dále jsou zde shrnuty jednotlivé cíle, které musí být splněny k naplnění obsahu práce.
1.1 Motivace Nyní se nacházíme v době, kdy se počítač stává nedílnou součástí lidského života. Mnoho lidí zde tráví většinu svého času. Někteří ho zde tráví pracovně, jiní naopak pro zábavu. Ale ať je to člověk jedné nebo druhé skupiny, vždy si najde chvíli, kdy se od počítače odpoutá a hledá možnost jak si od něj odpočinout. Jednou z možností, jak si od něj odpočinout, je možnost cestovat. Každý člověk cestuje trochu jinak. Jeden se rád vydává do zahraničí k moři, druhý zase rád cestuje po České republice a navštěvuje památky. Ale ať je to jeden nebo druhý způsob cestování, u obou se setkáváme s podobnými problémy. Jedním takovým problémem je například naplánovat, kam se na cestu vydáme. Pokud podnikáme cestu do zahraničí, plánujeme ji jinak, než když cestujeme po České republice. Po úspěšném naplánování a vydání se na cestu, snaží se každý cestovatel si svoji cestu co nejvíce užít a mít na ni hezké vzpomínky. Tyto 1
Kapitola 1. Úvod
vzpomínky mohou být například v podobě fotografií nebo ve formě cestovního deníku. Ale ať je to jakákoliv forma vzpomínek, snažíme se je nějakým způsobem spravovat. Jedni si například ke svým fotografiím píší poznámky, jiní je zase sdílejí s přáteli. A toto jsou opět situace, kdy se mohou vyskytnout další problémy. Takovým to problémem může být například, kam si ony poznámky vlastně psát. Ale jak již bylo zmíněno na začátku, nacházíme se v době, kdy se počítač stal nedílnou součástí našeho života, proto by bylo nevhodné, kdybychom této skutečnosti nevyužili a některé problémy pomocí něj nevyřešili.
1.2 Cíle práce Cílem této práce je navrhnout a implementovat řešení pro cestovatele v podobě webové aplikace. Toto řešení by mělo uživatelům jednak usnadňovat plánování jejich cest, ale také pomoci při spravování zážitků v podobě fotografií nebo zápisků, například v podobě cestovního deníku, z cest již uskutečněných. Toto a mnohem více bychom měli být schopni navrhnout na základě potřeb uživatelů, které zjistíme pomocí provedeného uživatelského výzkumu. Takto navržené a následně implementované řešení ověříme pomocí testu použitelnosti, abychom získali aplikaci, která bude co nejvíce uživatelsky přívětivá.
2
Kapitola 2 Analýza Tato kapitola se zabývá prováděným uživatelským výzkumem, díky němuž získáme představu o potřebách uživatelů. Dále jsou zde rozebrány již existující řešení řešící podobné problémy, které bychom chtěli pomocí naší aplikace vyřešit, ale zároveň pomocí této studie se můžeme vyvarovat vytvoření aplikace již existující. V neposlední řadě je zapotřebí porozhlédnout se po již hotovém řešení usnadňující celý vývoj aplikace, kterému se říká framework.
2.1 Uživatelský výzkum Následující kapitola popisuje námi provedený uživatelský výzkum. Tento výzkum byl prováděn za účelem získání informací o potřebách uživatelů. Na základě tohoto výzkumu budeme schopni navrhnout aplikaci, která bude přizpůsobena potřebám uživatelů. 3
K Kapitola 2. Analýza
2..1.1
Plán výzkumu
Před návrrhem a im mplementacíí provedem me výzkum mezi budo doucími užiivateli – ceestovateli. Výzkum V jssme rozděliili do něko olika kroků ů. Jednotlivvé kroky zobrazuje obbrázek níže (obr. 1 Plán výzkumu v s jednootlivými kroky)). Na konci tohoto výzk kumu bych hom měli doostat výsleddný design našeho n webuu.
obr. 1 Pláán výzkumu s jeednotlivými kro oky
2..1.2
Vymeezení cílovéé skupiny u uživatelů
Naším pláánem je vytv vořit web prro cestovateele. Jelikož každý cestoovatel je tro ochu jiný a vyhovět vššem je téměěř nemožnéé, je potřeba se zaměřiit pouze naa konkrétní skupinu ceestovatelů, na n kterou bu udeme cílit náš produk kt. 4
Kapitola 2. Analýza 2.1.2.1
Screener
Na jakou skupinu cestovatelů se zaměříme, určíme pomocí prvotního výzkumu mezi lidmi - cestovateli, pomocí něhož se budeme schopni rozhodnout na jakou skupinu, případně skupiny cestovatelů se zaměříme. Tento výzkum (viz obr. 1 bod 6) provedeme pomocí dotazníku k tomuto účelu sestavenému – screeneru (viz příloha – Dotazník - screener). Takto sestavený dotazník necháme vyplnit potenciálním uživatelům na internetu. 2.1.2.2
Vyhodnocení
Na základě vyhodnocení prvotního výzkumu jsme získali profily uživatelů, na které se v našem výzkumu zaměříme. Rozhodli jsme se zaměřit na dvě cílové skupiny uživatelů. Skupina cestovatelů cestujících výhradně s cestovní kanceláří a skupina cestovatelů cestujících samostatně. Na takto definovaných cílových skupinách provedeme výzkum. 2.1.3
Popis cílové skupiny uživatelů
Následující část popisuje charakteristiky skupin uživatelů, na které jsme se rozhodli cílit náš produkt a na niž provedeme uživatelský výzkum. Cílové skupiny byly vybrány na základě screeneru a doménové studie. 2.1.3.1
Cestovatel cestující s cestovní kanceláří
Věk cestovatele je mezi 25 až 45 lety a dosáhl typicky středoškolského vzdělání. Cestuje hlavně po České republice a jednou do roka se vydá s cestovní kanceláří do zahraničí. Jeho cesty jsou cílené převážně za poznáním, částečně za rekreací. Svoje cesty si vybírá především po Evropě případně blízkých státech okolních kontinentů. 2.1.3.2
Cestovatel cestující sám
Cestovatel, který se vydává na své cesty sám, je ve věku 20 až 35 let a buď ještě studuje na vysoké škole, nebo ji již dokončil. Své cesty si plánuje a podniká sám a to převážně po Čechách, některý vyráží do zahraničí. Jeho cesty jsou nejčastěji za poznáním a turistikou. Tyto profily uživatelů jsou následně použity při definici skeletonu Skeleton) a tvorbě person (viz slovník pojmů - Persony). 2.1.4
(viz slovník pojmů -
Kvalitativní studie
Po výběru cílové skupiny uživatelů můžeme zahájit kvalitativní studii. Tohoto docílíme pomocí rozhovorů (viz obr. 1 bod 8) se zástupci jednotlivých cílových skupin. Během rozvorů budeme zjišťovat, jakým způsobem se uživatelé připravují na cestu a jak ji plánují, jak samotná cesta probíhá, zdali si pořizují nějakou dokumentaci z cest a jak ji spravují, atd. Cílem rozhovoru je zjistit s jakými nepříjemnostmi se při cestách a jejich plánování uživatelé setkávají, a jak by se toto dalo zpříjemnit pomocí našeho produktu a také jak jim usnadnit správu jejich dokumentů z cest. 5
Kapitola 2. Analýza 2.1.4.1
Nejvýznamnější témata rozhovorů
Za účelem získání námi potřebných informací jsme uživatelům položili několik otázek. Tyto otázky byly zvoleny tak, abychom získali potřebné informace. Příklad pokládaných otázek se nachází v následující části.
Jak často cestujete? Jakého charakteru jsou Vaše cesty? Jak jste cestoval? Na jak dlouho cestujete? Fotografujete na dovolené? Zasíláte nebo sdílíte fotografie s přáteli? Píšete si nějaký cestovní deník?
Úplný seznam pokládaných otázek je k dispozici v příloze – Otázky pokládané během rozhovorů. 2.1.4.2
Vybraní uživatelé k rozhovorům
Rozhovory kvalitativní studie byly vedeny se zástupci definovaných skupin (viz obr. 1 bod číslo 7). První dva rozhovory byly vedeny se zástupci skupiny cestovatelů cestujících samostatně a další dva se zástupci skupiny cestovatelů cestujících s cestovní kanceláří. První rozhovor byl veden s mužem studující vysokou školu ve věku přibližně 25 let (označován jako P1). Druhý rozhovor byl veden taktéž s mužem studujícím na vysoké škole ve věku asi 20 let (označován jako P2). Třetí rozhovor byl veden s ženou ve věku přibližně 35 let s dokončenou střední školou (označována jako P3). Poslední rozhovor byl uskutečněn s mužem ve věku přibližně 40 let, který vystudoval střední školu (označován jako P4). 2.1.5
Vyhodnocení informací získaných při rozhovorech
Nyní můžeme přejít k vyhodnocení rozhovorů. Postupně z rozhovorů vybereme faktoidy (viz slovník pojmů - Faktoid) hodící se pro jednotlivé skupiny cestovatelů (viz obr. 1 bod 9). Z faktoidů sestavíme skeleton jednotlivých skupin, z něhož vytvoříme persony představující ideálního zástupce jednotlivých skupin. Nakonec stanovíme hypotézy (viz slovník pojmů - Hypotéza), jak by měl přibližně vypadat design webu. 2.1.5.1
Faktoidy
Z uskutečněných rozhovorů jsme vybrali seznam faktoidů, které jsme následně roztřídili na faktoidy jednotlivých skupin, na které je zaměřen náš výzkum, a na faktoidy, které lze přiřadit oběma skupinám. V následující části se nachází krátká ukázka z nalezených faktoidů. Úplný seznam je k dispozici v příloze - Faktoidy. U jednotlivých faktoidů je uvedeno pomocí informací P1 až P4, kterému uživateli - participantovi daný faktoid přísluší. 1. Do zahraničí jezdíme, tak na půl za poznáním a napůl za koupáním (P3). 2. Do zahraničí cestujeme s cílem koupaní v moři (P2). 6
Kapitola 2. Analýza
3. Když jsme u moře, uděláme si výlet po okolí (P2). 4. Párkrát jsem byl na dovolené v Africe (P4). 5. Cestuji několikrát do roka (P1, P2). 6. Cestuji hodně po Čechách (P1, P2). 7. Převážně cestuji za poznáním a turistikou (P1, P4). 8. Cesty s přáteli do zahraničí si organizuji sám (P1). 9. Jednou do roka se vydám do zahraničí (P1, P2, P4). 10. Jednou za dva roky jedu do zahraničí a druhý rok zůstávám v Čechách (P3). 11. Z důvodu dostupnosti cestuji převážně po Evropě (P1, P2, P3, P4). 12. Informace k cestě hledám na různých vyhledávačích (P1, P2, P3, P4). 2.1.5.2
Skeleton
Z takto získaných faktoidů můžeme nyní sestavit profily jednotlivých skupin – skeleton. Tento skeleton bude popisovat vlastnosti námi vybrané skupiny uživatelů. Z takto sestaveného skeletonu následně vytvoříme personu, která nám bude představovat ideálního uživatele této skupiny. Sestavené profily skupin jsou umístěny v příloze - Skeletony. Zde se nachází krátká ukázka ze sestaveného skeletonu pro skupinu uživatelů cestujících s cestovní kanceláří. U jednotlivých bodů skeletonu je uvedeno v závorce, ze kterého faktoidu vychází. 1. 2. 3. 4. 5. 6. 7. 8.
2.1.5.3
Věk: 25 - 45 let Vzdělání: alespoň středoškolské Uživatelé cestují převážně jednou do roka do zahraničí (27, 28). Jejich cesty jsou směrovány hlavně za poznáním (1, 3), částečně za rekreací (1, 2). Cesty podnikají převážně po Evropě (29) a blízkých státech ostatních kontinentů jako je např. Egypt v Africe (4). Uživatelé dají hodně na doporučení přátel a na zkušenosti. Proto důvěřuji cestovním kancelářím, které jsou nějakým způsobem ověřené (7). S cestovní kanceláří cestují kvůli pohodlnosti a také kvůli pocitu jistoty (8, 9, 10). Část cestujících hovoří částečně angličtinou, kterou se domluví. (14) Ostatní jazykové problémy řeší pomocí slovníku a nejčastějších frází (39), případně za sebe nechají promluvit části těla (13, 14). Hypotézy
Hypotézy byly stanoveny (viz obr. 1 bod 12) na základě vyhodnocení screeneru a vyhodnoceni následných rozhovorů se zástupci vybraných cílových skupin. Po rozboru rozhovorů jsme došli k závěrům (hypotézám), s čím se cestovatelé během svých cest setkávají a jak bychom jim případně mohli pomoci naším produktem.
7
Kapitola 2. Analýza
Hypotézy mající vliv na výsledný design jsou doplněny o příslušnou informaci, kterou část designu ovlivňují. V následující části je krátká ukázka ze stanovených hypotéz. Úplný seznam hypotéz je k dispozici v příloze - Hypotézy. 1. Typický cestovatel, který cestuje sám, je ve věku 20 – 35 let, jeho vzdělání je zpravidla vysokoškolské. 2. Cestující upřednostňující služby cestovní kanceláře je ve věku 25 - 45 let a má typicky středoškolské vzdělání. 3. Průměrná cesta trvá 7 až 14 dní. 4. Cestující své fotografie rozdělují do alb reprezentovány složkami, ke kterým si píší poznámky. Případně si dělají poznámky ke každé fotografii zvlášť. Implementace fotogalerie a její členění na alba s možností psaní poznámek k albu jako celku a k samostatným fotografiím. 5. Hodně cestovatelů si dělá poznámky ke svým cestám. Buď přímo jako cestovní deník, ale převážně jako poznámky k fotografiím, které jim toto nahrazují. Implementace cestovního deníku.
Takto stanovené hypotézy je ještě zapotřebí ověřit, zdali byly stanoveny správně či nikoliv. Ověření provedeme pomoci kvantitativní studie. 2.1.6
Kvantitativní studie
Pomocí kvantitativní studie (viz obr. 1 bod 13) si ověříme naše hypotézy, zdali jsou správné či nikoliv. K ověření hypotéz použije dotazník k tomuto účelu sestavený (viz příloha – Dotazník – kvantitativní studie). V sestaveném dotazníku se na hypotézy zeptáme pomocí jedné nebo více otázek, a tak můžeme pravdivost jednotlivých hypotéz potvrdit či vyvrátit. Vytvořený dotazník necháme vyplnit přes internet budoucím uživatelům. Po ukončení kvantitativní studie provedeme vyhodnocení výsledků, z nichž budeme schopni definovat výsledný design webu. 2.1.6.1
Vyhodnocení kvantitativní studie
Po vyhodnocení kvantitativní studie, pomocí níž jsme ověřovali pravdivost jednotlivých hypotéz, a po dalších úvahách (po rozhovorech, dojmech cestovatelů, atd. – viz obr. 1 Plán výzkumu s jednotlivými kroky) jsme došli k závěrům, že by bylo vhodné na našem webu implementovat následující design. U jednotlivých položek je uvedeno v závorce, z jaké hypotézy jsme k danému závěru došli. 1. Po zaregistrování bude uživatel mít možnost si nahrávat na web vlastní fotografie a videa (10, 13).
8
Kapitola 2. Analýza
2. Fotografie a videa si uživatel bude moci třídit do jednotlivých složek a psát si k nim krátký komentář. Komentář si bude moci psát nejenom k jednotlivým fotografiím a videím, ale i k celé složce (10). 3. Uživatel si bude moci psát vlastní deník, který bude dělen do jednotlivých záznamů (11). 4. Fotografie, videa a cestovní deník budou přístupné pouze jeho osobě případně dalším registrovaným uživatelům, kterým předem uživatel zašle pozvánku ke sdílení, pokud uživatel neurčí jinak (12). 5. Uživatelé dále budou moci přispívat do kategorie „Cizojazyčné fráze“ a kategorie „Užitečné odkazy“, které budou přístupné i neregistrovaným uživatelům (8, 14). 6. Uživatel bude moci psát články, které budou členěny do kategorií. Tyto články budou také přístupny i neregistrovaným uživatelům (9). 7. Jelikož většina uživatelů při hledání informaci na internetu vyhledává pomocí vyhledávačů, je potřeba věnovat část našeho úsilí optimalizaci stránek pro vyhledávače – SEO (7). Přestože byl uživatelský výzkum zaměřen na dvě cílové skupiny uživatelů, vytvořili jsme pouze jeden návrh webové aplikace. Důvod vedoucí ke vzniku jednoho návrhu je ten, že chceme vytvořit obecný web sloužící oběma skupinám dohromady. Tento návrh byl proveden na základě požadavků cílových skupin. Jelikož požadavky jedné skupiny uživatelů nejsou na škodu druhé skupině uživatelů a naopak, mohli jsme proto navrhnout jeden obecný web.
2.2 Rozbor stávajících řešení V následující části je shrnuto několik již hotových řešení sloužící ke sdílení fotografií případně psaní článků na internetu. U každého řešení je v krátkosti napsána hlavní funkčnost a co uživateli umožňuje. 2.2.1
Facebook.com
Pomocí sociální sítě Facebook může uživatel mimo mnoha jiných možností také sdílet své fotografie s přáteli. Uživatel si jednotlivé fotografie vkládá do vytvářených alb, u kterých si může definovat oprávnění pro přístup ostatních uživatelů. Mezi základní nastavení oprávnění přístupu jsou uživateli nabízena tato nastavení: Všichni, Přátelé přátel, Pouze přátele, popřípadě si může uživatel definovat vlastní přístupová práva. Definicí vlastních přístupových práv se rozumí, možnost určit komu je album zpřístupněno nebo naopak komu album zpřístupněno není. Po vložení fotografie do alba je umožněno uživatelům psát komentáře k vloženým fotografiím. 2.2.2
Flickr.com
Webová služba Flickr byla na rozdíl od služby Facebook navržena pouze ke skladování a sdílení fotografií mezi více uživateli. Přístupová práva k fotografiím jsou 9
Kapitola 2. Analýza
definována na úrovni jednotlivých fotografií nikoliv na úrovni alb. Při nahrávání fotografií si může uživatel vybrat ze dvou možností ochrany fotografie a to fotografie soukromá nebo veřejná. Přičemž u soukromých fotografií si může uživatel definovat možnost přístupu přátel nebo rodiny. K vloženým fotografiím je uživateli umožněno psát komentáře nebo si může fotografie přiřazovat k místům na mapě. 2.2.3
Picasaweb.google.com
Podobnou službou jako je Flickr je i služba Picasaweb od společnosti Google. Picasaweb umožňuje uživateli kromě skladování a sdílení fotografií také fotografie editovat a to pomocí integrované funkce Picknik. Pomocí této funkce může uživatel u fotografie měnit například směr natočení fotografie, velikost fotografie popřípadě může do fotografie vkládat text, přiřazovat fotografii rámeček a mnoho jiného. 2.2.4
Blog.cz
Tato služba umožňuje uživateli vytvořit si vlastní blog, na kterém si může psát vlastní články. Jednotlivé články si uživatel může třídit do kategorií. Do vytvářeného článku si může uživatel vkládat obrázky, které si předtím nahraje do galerie obrázků. Takto vytvořené články jsou zpřístupněny ostatním uživatelům, kteří si je mohou přečíst. Tabulka níže (tab. 1 Srovnání existujících řešení s naší aplikací) shrnuje hlavní funkcionalitu existujících řešení, která je z našeho pohledu zajímavá, a porovnává jí s návrhem naší aplikace. Tato řešení mají i jinou funkcionalitu, která je ale v tento okamžik pro nás nezajímavá. Možností Editace fotografie, která je uvedena v tabulce (tab. 1 Srovnání existujících řešení s naší aplikací) se rozumí možnost s fotografií nějakým způsobem manipulovat. Například možnost fotografií otáčet, nebo ji doplňovat o rámeček nebo text. tab. 1 Srovnání existujících řešení s naší aplikací
funkčnost Vkládání fotografií Definovat přístupová práva k fotografii Editovat fotografie Sdílení fotografií Vkládání článků Vytváření deníků Vkládání cizojazyčných frází
Naše řešení ANO
Facebook ANO
Flickr ANO
Picasaweb ANO
Blog ANO
ANO
ANO
ANO
ANO
NE
NE ANO ANO ANO
NE ANO NE NE
NE ANO NE NE
ANO ANO NE NE
NE NE ANO NE
ANO
NE
NE
NE
NE
10
Kapitola 2. Analýza
2.2.5
Odlišnost naší aplikace
Výše je popsáno několik možností sdílení fotografií, případně psaní článků na internetu. U všech služeb je uživateli umožněno nahrávat vlastní fotografie na internet. Tyto fotografie může dále uživatel sdílet s přáteli, psát k nim poznámky, případně je upravovat. Naším cílem, ale není vytvořit aplikaci, která má obdobné možnosti, jako již existující řešení, ale aplikaci, která by uživateli přinesla něco nového, čím by se od ostatních aplikací odlišovala a byla tak pro uživatele zajímavá. Jelikož se jedná o aplikaci určenou pro cestovatele, která jim má pomoci při plánování cest a sdílení zážitků, chtěli bychom jim tyto činnosti co nejvíce usnadnit. Na základě uživatelského výzkumu jsme se rozhodli v naší aplikaci implementovat galerii, do níž si uživatelé budou moci vkládat fotografie a budou je moci mezi sebou sdílet. Toto však není nic, čím bychom se od ostatních aplikací odlišovali. Abychom se odlišili od ostatních, přidali jsme uživateli možnost vytvářet si vlastní deník, do kterého si bude moci vkládat nahrané fotografie. Takto vytvořený deník bude uživatel moci následně vkládat do článku, kterým bude přispívat do kategorie článků. Možnost vytváření článků, ale má například řešení Blog.cz. Toto řešení však neposkytuje například možnost vytvářet a sdílet deník, čímž se od něj touto možností odlišujeme. Tyto možnosti jsme u žádné ze jmenovaných služeb nenašli, a proto se domníváme, že by mohly být pro uživatele něčím novým a zároveň něčím zajímavým, co by je mohlo k naší službě přitáhnout.
2.3 Analýza vývojových prostředků V této části se nachází krátký přehled možných frameworků Framework), které můžeme využit k implementaci naši aplikace. 2.3.1
(viz slovník pojmů -
Zend framework
Zend framework (dále jen Zend) je vyvíjen společností Zend Technologies Ltd. [ref. 4] Okolo Zendu vznikla po celém světě široká komunita uživatelů, kteří nejen přispívají k jeho rychlému vývoji, ale představují významnou podporu pro budoucí vývojáře využívající tento nástroj. Zend nabízí vývojáři širokou škálu komponent řešící stále se opakující úlohy. Tyto komponenty lze použít samostatně nebo s využitím s některým z jiných frameworků a tak není vývojář nijak omezován. Zend implementuje mnoho návrhových vzorů mimo jiné i MVC (viz slovník pojmů - MVC návrhový vzor) ve variantě front controller. [ref. 5] 2.3.2
Nette framework
Nette framework (dále jen Nette) je framework českého původu. Nette začal vyvíjet český programátor David Grudl, ale dnes se na jeho vývoji podílí komunita lidí, kterou zastřešuje společnost Nette Foundation. [ref. 6] 11
Kapitola 2. Analýza
Nette klade důraz na bezpečnost aplikací, a proto používá technologie pro eliminaci vzniku bezpečnostních děr a jejich zneužití jako je například Cross-site scripting (viz slovník pojmů - Cross-site scripting). Dále podporuje mnoho ladících nástrojů pro odhalení chyb vzniklých při vývoji, obsahuje množství komponent usnadňující vývoj a mnoho dalších. I tento framework implementuje návrhový vzor MVC. [ref. 7] 2.3.3
Symfony
Symfony je webový aplikační framework za jehož vývojem stojí francouzská firma Sensio Labs. Celý framework je z velké části inspirován jinými aplikačními frameworky jako jsou například Ruby on Rails, Django nebo Spring. Symfony ve svém základu využívá několik cizích projektů. Například Propel nebo Doctrine jako ORM vrstvu (viz slovník pojmů - ORM), komponenty ze Zend frameworku – například Zend_Logger, Zend_Cache, Mojavi implementující návrhový vzor MVC a mnoho jiných. [ref. 8] 2.3.4
Doctrine 2
Doctrine 2 (dále jen Doctrine) je zástupcem ORM frameworku vyvíjen komunitou lidí podporovaných francouzskou firmou Sensio Labs, která kromě projektu Doctrine dále podporuje například vývoj Symfony frameworku. [ref. 10] Doctrine je čisté ORM, které zajišťuje mapování databázových tabulek na entity pomocí návrhového vzoru Data Mapper (viz slovník pojmů - Data Mapper). Aplikace vytvořená nad tímto ORM je zcela nezávislá na použité databázi, a tak můžeme pro vývoj aplikace použít jiný databázový systém, než který použijeme pro její nasazení do praxe. [ref. 11]
2.4 Vyhodnocení analýzy Díky uživatelskému výzkumu jsme získali mimo informací o návrhu aplikace, také představu o cílových skupinách uživatelů, kteří budou naši aplikaci používat. Abychom měli v případě problémů během návrhu a vývoje vlastní aplikace k dispozici představitele jednotlivých skupin, vytvořili jsme si jako náhradu uživatele, personu, která jej představuje. Díky této personě můžeme například ve fázi návrhu aplikace, lépe přizpůsobovat aplikaci dané cílové skupině uživatelů. Dále je například možné personu využívat také při testování aplikace. 2.4.1
Persony
Persony byly vytvořeny dle skeletonů, získaných během uživatelského výzkumu. U jednotlivých částí vycházejících ze skeletonu je poznamenáno, z kterého konkrétního bodu se vycházelo.
12
K Kapitola 2. Analýza 2.4.1.1
Joseef Zcestovalý ý – cestovateel cestující s cestovní ka anceláří
oobr. 2 Josef Zccestovalý
Narodil see před 35 leety v malém m městečku u poblíž Brn na. Zde vyrrůstal a nav vštěvoval záákladní škollu. Na střed dní školu zaačal dojížděět do Brna na Střední školu techn nickou s obborem Mechhanik seřizo ovač. Zde sttrávil další 4 roky. Po absolvování a ní střední ško oly chtěl zkkusit své štěěstí na vyso oké škole, alle po prvním m půlroce stráveném nna škole zjisstil, že to neení ono a takk odešel do o praxe. Mezi jehoo největší zááliby a koníččky patřilo vždy cestov vání. Když navštěvovaal střední škkolu, cestovval převážněě po Čechácch. V současnosti raději vyrazí jeddnou do rok ka někam zaa hranice Čeeské republliky (3). Jeliikož je Joseef povahy nejisté, n radějji cestuje s cestovní kaanceláří (7)). Vždy říkáá „Já bych se ztratil u nás domaa natož někkde za hran nicemi.“, prroto raději vyhledává v služby, s kde ho dovezou u na místo, kam by si ppřál, a má svůj klid. N Nejvíce cestuuje po staréém kontinenntu (5). Nav vštívil mnoho zemí a jjednou se podíval p i dáále než po Evropě E a to o konkrétněě do Egyptaa v Africe, kde k se mu zzatím nejvííce líbilo (55). Na Africce se mu nejvíce n líbilli pyramidy y a obdivujee, jak takovvé obrovskéé stavby byyly lidé schhopni postav vit bez těžkké techniky. Evropské státy si vybbírá převážžně kvůli finnanční dosttupnosti. Josef si svvé cesty vyb bírá vždy sáám a pak hleedá cestovn ní kancelář, která by mu u splnila jeeho požadavvky. Cestov vní kancelářř nikdy nev volí náhodn ně, ale vždyy se raději pořádně innformuje jakké má kvallity. Buď sse poptá přřátel, jestli s ní již jelli a jestli by b mu ji dooporučili, případně p hleedá informaace o cesto ovní kancelááři na interrnetu (6). Nerad N by tootiž někde odcestoval o a pak zjistil , že cestovn ní kancelář zkrachovalla. Vždy než někam jeede, má předdstavu, co by b chtěl navvštívit (16). Pak hledá na internetu tu nejvíce in nformací o místě, kam m by chtěl jeet, aby se o něm co neejvíce dozv věděl a příppadně, kteráá místa v bllízkosti by mohl ještě navštívit. JJelikož nezná žádné sttránky, kdee by mohl potřebné p innformace naajít, zkouší své štěstí nna vyhledáv vačích, před devším pak na nejznám mějším – 13
K Kapitola 2. Analýza
G Google (17).. Ale jeliko ož se neradd prodírá spoustou s vy yhledaných stránek, prohlídne p prrvní dvě strránky a pak k případně zkouší vyh hledat něco o jiného. Jaakmile si naplánuje m místa, která by b chtěl nav vštívit, plánnuje, v jakém m pořadí je bude prohllížet, a jak se s k nim doostane. Takkto zvolenou u cestu, příppadně mapu u k místům si vytisknee, aby ji měl u sebe, ažž bude na cestě (18). A jelikož see angličtinu učil chvilk ku na střednní škole a taaké neví, jeestli lidé, ktteré potká, budou anggličtinou ho ovořit, vyh hledá si párr klíčových h frází v jaazyce, ve ktterém by se mohl s nim mi případněě domluvit. Pokud mu nepostačí ani a takto naalezené frázze musí se domlouvat, d jjak jen to jd de – pomocíí rukou a noohou (8). Josef při svých s cestáách hodně ffotografuje (19). Jednaak aby měl vzpomínky y, a také abby se mohl přátelům po ochlubit, ktterá místa navštívil. n Bo ohužel, jelikkož u sebe nemá n při ceestách počíttač, nemůžee si fotograafie třídit a okomento ovat již na místě a tak k si píše krrátké poznáámky na pap pír. Vždy kkdyž se vrátí z dovolen né, stáhne vvyfocené fo otografie doo počítače (19). ( Fotogrrafie si uložží do složky y s názvem místa, kde bbyl a pak sii do téže složky přidá přepsané poznámky v podobě tex xtového sou uboru (22). Do poznám mek dále přřidá ještě nějaké n inforrmace o fottografiích, aby a až bud de starší, si lépe vzpom mněl, na ktterém místěě to vlastně byl. Nakonnec vybere pár p nejlepších fotografi fií a ty rozeššle svým přřátelům, abyy se jim mo ohl pochlubbit, a také aby a se moh hli případně inspirovat na další ceestu, jako too dělá on, kd dyž mu někkdo nějaké fotografie f uk káže (21). Vždy koleem Vánoc, když je nejjvětší klid v roce, začííná Josef uvvažovat o své s další ceestě, kam že by se to příští léto m mohl podív vat, a také aby a měl doostatek času u si svou ceestu pořádněě promyslett.
2.4.1.2
Karel Nebojácn ný – cestovattel cestující sám
oobr. 3 Karel Nebojácný
14
Kapitola 2. Analýza
Narodil se před 23 lety ve Žďáru nad Sázavou na Vysočině. Zde navštěvoval základní školu a později i střední průmyslovou školu s oborem Elektrotechnika. Průmyslovou školu dokončil před čtyřmi roky, kde odmaturoval s vyznamenáním. Po studiu na průmyslové škole se rozhodl zkusit své štěstí na fakultě Elektrotechniky a komunikačních technologii VUT v Brně. Štěstí mu ve studiu přálo a tak se za tři roky po odmaturování stal bakalářem v oboru Řídící technika a kybernetika a v současné době pokračuje v magisterské etapě. Zanedlouho by měl dokončit svá studia a stát se inženýrem, což bylo nejen jeho přání, ale i přání jeho rodičů Ve svém volném čase Karel rád cestuje. Převážně cestuje po Čechách (11), ale jednou do roka se vydá s přáteli do zahraničí (14). Cestu do zahraničí vždy podnikají na vlastní pěst. Předtím než někam vyrazí, musí se rozhodnou, kam vlastně pojedou. Jakmile se dohodnou na místě, kam vyrazí, začnou plánovat vlastní cestu. Každý si vyhledá informace o místě, kam cestují, sám, a pak tyto informace dávají společně dohromady. Karel hledá informace vždy na internetu. Obecné informace o místě, kam cestují, většinou vyhledává pomocí vyhledávačů. Mezi obecné informace považuje například možnost ubytování, kulturní památky v okolí a jiné. Konkrétní informace, jako jsou rychlostní limity a jiné, si pak najde na specializovaných stránkách, které zná už z dřívějška (17). Jakmile si najde informace o místě, začne plánovat cestu, jak se tam vlastně dostat. Cestu si naplánuje doma na internetu a pak si ji vytiskne (12). Jelikož při cestách nemívají u sebe počítač, využijí vytisknuté informace a pro případ jistoty si vezmou sebou ještě papírovou mapu (13). I když se Karel učí angličtinu už poměrně dlouho, bere s sebou pro jistotu nějaký slovník. Pro případ jistoty si ještě vyhledá nejčastější fráze v jazyce, ve kterém se hovoří v zemi, kam cestují (15). Na dovolené Karel s přáteli vždy hodně fotografuje (20). Každý fotografuje sám a pak si fotografie předávají. Jelikož mají fotografií hodně, předávají si to pomocí flash disků případně přes webová uložiště (21). Karel si pak doma fotografie třídí do složek podle dovolených a dovolenou ještě podle autora fotografie. K fotografiím si pak napíše krátké poznámky, aby věděl, s kým na dovolené byl a co všechno viděli (22).
15
Kapitola 3 Návrh Tato kapitola se zabývá nejenom návrhem vlastní aplikace, ale i například výběrem programovacího jazyka nebo výběrem technologií, které použijeme k vývoji aplikace. V rámci návrhu aplikace provedeme návrh architektury, na které bude aplikace stavěna. Dále provedeme návrh datového skladu, kam budeme ukládat uživatelská data nebo také provedeme návrh uživatelského rozhraní.
3.1
Požadavky na aplikaci
Po vyhodnocení uživatelského výzkumu jsme došli k závěrům, jaký návrh by měla naše aplikace implementovat. Tyto závěry byly již shrnuty v kapitole 2.1.6.1 – Vyhodnocení kvantitativní studie. Jelikož bude zapotřebí evidovat velké množství údajů, které budou uživatelé vkládat, využijeme k těmto účelům služeb databázového systému. Databázového systému mimo jiné využijeme, protože poskytuje transakce, které nám zajistí, aby se naše aplikace nedostala do nekonzistentního stavu (viz slovník 16
Kapitola 3. Návrh pojmů - Nekonzistentní stav).
Dalším požadavkem je možnost oddělení aplikační logiky od presentační logiky. Tento požadavek může být splněn například pomocí návrhového vzoru MVC. Jedním z posledních požadavků na naši aplikaci je, volba programovacího jazyka. V zadání je požadavek na tvorbu webového řešení, čímž dostáváme kritérium pro výběr jazyka. Díky tomuto kritériu a dalším okolnostem (autorovy znalosti) je zapotřebí použít jazyka PHP. Tímto jsme dostali několik požadavků na aplikaci a nyní je zapotřebí vybrat vhodné již hotové řešení – framework, které nám usnadní celý vývoj. Frameworků existuje celá řada. Jednotlivé frameworky jsou vhodné pro různá použití, nebo se od sebe liší poskytovanými službami. Proto je zapotřebí vybrat ty nejvhodnější pro naši aplikaci. Krátký výčet a představení jednotlivých frameworků se nachází v kapitole Analýza v části Analýza vývojových prostředků.
3.2 Shrnutí požadavků na aplikaci V následující části jsou shrnuty jednotlivé požadavky, které nám vznikly v průběhu analýzy nebo již při návrhu aplikace. Jednotlivé požadavky byly rozděleny podle vlivu na funkčnost aplikace. 3.2.1
Funkční požadavky
Zde se nachází seznam požadavků mající vliv na funkčnost aplikace. Tyto požadavky vycházejí především z předchozí analýzy.
implementace kategorie fotogalerie a videogalerie implementace kategorie deníku implementace kategorie článků implementace kategorie cizojazyčné fráze implementace kategorie odkazů možnost sdílení soukromých fotogalerií a deníku mezi více uživateli možnost zaslání emailu s informacemi o registraci a sdílení dat mezi uživateli
Takto stanovené požadavky budeme v rámci implementace realizovat. 3.2.2
Nefunkční požadavky
Mezi nefunkční požadavky řadíme požadavky, které přímo neovlivňují funkčnost aplikace, ale jsou důležité například při výběru frameworku a také při návrhu celé aplikace.
implementace návrhového vzoru MVC podpora přístupu k databázi podpora transakcí možnost autorizace (viz slovník pojmů - Autorizace) a autentizace (viz slovník pojmů - Autentizace) uživatelů 17
Kapitola 3. Návrh
validace vstupních dat programovací jazyk PHP široká podpora z řad uživatelů
Díky takto stanoveným požadavkům můžeme nyní přejít k výběru frameworků a technologií, které využijeme při tvorbě aplikace, a také návrhu architektury aplikace.
3.3 Použité technologie a výsledná architektura aplikace Návrh aplikace začneme u výběru vývojových prostředků. Po jejich vybrání pokročíme k výběru dalších technologií, které během vývoje využijeme. Po výběru potřebných nástrojů k vývoji můžeme začít navrhovat architekturu vlastní aplikace. 3.3.1
Volba použitých frameworků
Tabulka níže (tab. 2 Splnění požadavků jednotlivými frameworky) ukazuje splnění jednotlivých nefunkčních požadavků naší aplikace jednotlivými frameworky. Z tabulky je patrné, že jednotlivé frameworky splňují většinu požadavků. Jejich odlišnost je především v realizaci jednotlivých požadavků a množství dalších komponent, které poskytují. Jejich hlavní odlišnost, ale spočívá především v podpoře z řad uživatelů. Po prostudování materiálů na internetu, jsme došli k závěrům odpovídající obsahu tabulky, a to že největší podporu v současnosti má Zend Framework. tab. 2 Splnění požadavků jednotlivými frameworky
Požadavek Implementace návrhového vzoru MVC
Zend Framework
Nette Framework
Symfony
Splňuje
Splňuje
Splňuje
Přístup k databázi
Splňuje
Splňuje
Splňuje
Podpora transakcí
Splňuje
Splňuje
Splňuje
Možnost autorizace a autentizace uživatelů
Splňuje
Splňuje
Splňuje
Validace vstupních dat
Splňuje
Splňuje
Splňuje
Programovací jazyk PHP
Splňuje
Splňuje
Splňuje
Široká podpora z řad uživatelů
Splňuje
Nesplňuje
Nesplňuje
Pro základ naši aplikace jsme tedy zvolili Zend framework. Důvody vedoucí k tomuto výběru jsou široká podpora z řad uživatelů z celého světa, díky níž je možné případné vzniklé problémy pří vývoji rychle odstranit. Dále také jak již bylo zmíněno při jeho představení, obsahuje velké množství komponent umožňující rychlý vývoj celé aplikace.
18
Kapitola 3. 3 Návrh
Zend posskytuje pro o přístup k datům ulo ožených v databázi vvlastní kom mponentu Zeend_Db, ale my jsm me se rozhhodli využíít pro tuto o činnost ORM fram meworku Doctrine 2. Velká V výhoda Doctrinee 2 oproti Zend_Db Z jee použití DQ QL (viz slovnník pojmů DQ QL). Díky DQL dostáváme mo difikované SQL, kterré je nezá ávislé na použitém p daatabázovém m systému, a díky něm mu získávám me velké množství dottazů, které můžeme poomocí tohotto nástroje vytvořit. v 3..3.2
Architektura ap plikace
Zend nám m umožnuje celou archhitekturu apllikace rozdělit celkem m do čtyř částí (obr. 4 Mo Model architektuury). První čá ástí je frontt controller,, který zajiššťuje řízení společné pro p celou applikaci. Vešškeré dotazy y mířené nna aplikaci jsou j přesměěrovány sem m. Zde se vykonají v sppolečné akce pro celou aplikaci a ppak se před dá řízení acttion controllleru, který zajišťuje z řízzení dané části aplikaace. Actionn controllerr provede akce nezbyytné pro zobrazení strránky jakoo je napříkllad uloženíí a načteníí dat z mod delu, které předá view w, nebo vaalidace form mulářů a jiné. View se pak staará o samotné zobrazzení dat na výstup. [ref. 20]
ob br. 4 Model arcchitektury
3..3.3
Použiité technolo ogie
Aplikace na straně serveru s budde vyvíjena pomocí programovacíího jazyku PHP za poomoci hotovvých řešeníí Zend Fram mework a Doctrine D 2. Pro P uložení dat bude pro p účely výývoje použiit databázov vý systém společnostii MySQL, který k díky Doctrine 2 lze pro úččely nasazenní do praxe velice rychhle změnit na n jakýkoliv v jiný. O zobrazzení uživattelských daat na straaně klienta se nám starají náásledující teechnologie: HTML pro o zobrazení textové a obrazové o infformace, CSSS pro form mátování zoobrazovanýcch informaací a JavaS Script pro kontrolu a manipulacci s daty na n straně kllienta. Jelikkož Zend framework im mplementujje podporu validace daat na straněě klienta poomocí knihoovny Dojo, je tato knihhovna také k tomuto úččelu využitaa. 19
Kapitola 3. 3 Návrh
3..4 Modell datového o skladu Na obrázkku níže (obrr. 5 Model daatového skladu) u) vidíme konkrétní m model naší aplikace. a Jeedná se o třřídy (entity y), na které nám Docttrine 2 map puje databázzové tabulk ky. Díky Doctrine 2 jsou tyto tříídy poslednní, o které se musíme postarat. O vytvoření relační daatabáze se postará samotné s Dooctrine 2. Relační schéma s dattabáze Docctrine 2 vyygeneruje pomocí in nformací – komentářových ano otací, kteréé jsou uveedeny u jeednotlivých tříd doméno ového modeelu.
obr.. 5 Model dato ového skladu
20
Kapitola 3. 3 Návrh
Tímto jsm me navrhli datový skllad pro nám mi navrhov vanou aplikkaci. Nyní budeme pookračovat v návrhu jed dnotlivých uuživatelskýcch rolí a jejich možnosttí.
3..5 Uživatteské role V naší apllikaci se bu udou vyskyttovat celkem tři uživaatelské role.. Každé užiivatelské rooli jsou pooskytnuty příslušné akce. Přeh hled konkrrétních užiivatelských rolí a jeednotlivých akcí je zob brazeno na obrázku nííže (obr. 6 Přřehled uživatellských rolí a umožněných u akkcí).
obr. o 6 Přehled u uživatelských rolí a umožněn ných akcí
21
Kapitola 3. 3 Návrh
Toto bylo znázorněníí jednotlivýcch uživatelsských rolí a jejích možžností. V náásledující čáásti jsou jeddnotlivé rolee podrobnějii popsány. 3..5.1
Role Host
Hostem jee každý, kd do se v aplikkaci vyskyttuje jako neepřihlášen. T Tomuto užiivateli je um možněno čííst články, prohlížet vveřejné gallerie nebo prohlížet p vvložené cizo ojazyčné fráze nebo oddkazy. 3..5.2
Role Uživatel
Uživatel, který se přřihlásí, dosttává roli Užživatel. Tom muto uživatteli jsou um možněny stejné akce jako j uživateli nepřihláášenému. Uživatel U se od Hosta oodlišuje tím m, že má m mimo možnoosti čtení a prohlížení jednotlivýcch záznamů ů, možnost jjednotlivé záznamy z taaké vytvářett a mazat. Registrovan R nému uživatteli je dále umožněno vytvářet so oukromé gaalerie, kteréé může sdíllet s jinými registrovan nými uživaateli nebo sii může psáát vlastní deeník. 3..5.3
Role Administrá átor
Administrrátorem aplikace se sttává uživateel, který prrojde instalaací aplikacee. Tento užživatel má na n starosti vkládání v jazyykových kaategorií a kaategorií frázzí.
3..6 Návrh h uživatelského rozh hraní Uživatelskké rozhraní bylo navržženo dle pro ototypu použitého u tesstování kognitivním prrůchodem (viz ( kapitola 5.1 5 Kognitivní průchod). Návrh N byl prováděn p s ohledem na cílové skkupiny, prooto jsme zvolili z rozhhraní, kteréé bude veelice jedno duché a intuitivní k ovládání. Ukázku U přeedlohy v poodobě proto otypu zobraazuje obrázzek obr. 7 Prototyp P vé uživatelsské rozhraníí zobrazuje obrázek užživatelskéhoo rozhraní - fotogaleriee a již hotov obbr. 8 Hotovéé uživatelsk ké rozhraní - fotogalerie.
obr. o 7 Prototyp p uživatelského o rozhraní - fotogalerie
22
Kapitola 3. 3 Návrh
obr. 8 Hotovvé uživatelské rozhraní r - fotogalerie
Další ukázzka z vytvořřené aplikacci se nacházzí v závěru kapitoly k 4 - Implementtace.
3..7
Závěrry návrhu
V rámci této t kapitoly y jsme vybbrali nástroj oje a techno ologie, kterré budeme dále při reealizaci využívat. Zárov veň jsme prrovedli návrrh důležitýcch částí apliikace, které budeme náásledovně im mplementov vat.
23
Kapitola 4 Implementace Tato kapitola se zabývá implementací vlastní aplikace. Jelikož celá aplikace je postavená na Zend frameworku, snažili jsme se co nejvíce tohoto využít a používat komponenty z jeho široké nabídky. Ale i přes tento široký výběr jsme narazili na situace, kdy jsme museli využít alternativní řešení v podobě vlastních knihoven nebo knihoven jiných autorů. Části aplikace, kde se odlišujeme od Zend frameworku nebo jsou použita jiná řešení, jsou popsána v následující části.
4.1 Adresářová struktura Jako adresářová struktura byla zvolena doporučená struktura samotným Zend frameworkem, kterou jsme si mohli pomocí komponenty Zend_Tool vygenerovat. Takto vygenerovanou strukturu jsme rozšířili o adresáře, které jsme potřebovali pro naši aplikaci. Ukázka námi použité adresářové struktury je uvedena níže. Adresáře, které jsme nepoužili, a jsou generovány pomocí Zend_Tool, nejsou v této ukázce zobrazeny. 24
Kapitola 4. Implementace
Adresářová struktura
\public \css \images \js \uploads index.php \application \configs \controllers \data \forms \langs \layout \models \Entity \MyAcl \view \library \Zend \Cestovatele \Doctrine
Z názvů adresářů je patrné, k čemu jsou využívány. V případě adresářů Data, Entity, MyAcl a Cestovatele tomuto tak možná není. V adresáři Data se nacházejí adresáře jednotlivých galerií, ve kterých jsou uloženy fotografie nahrány uživateli. Adresář Entity obsahuje PHP soubory s jednotlivými třídami, na které nám použitý framework Doctrine 2 mapuje databázové tabulky. V adresáři MyAcl je obsažena třída, ve které jsou definována přístupová práva jednotlivých rolí uživatelů. Poslední ze jmenovaných adresářů slouží k rozšíření komponent frameworku, které museli být přizpůsobeny našemu použití.
4.2 Přístupová práva uživatelů Přístupová práva uživatelů jsou kontrolována na dvou úrovních. První úroveň kontroly je ověření, zdali uživatel nepřistupuje na stránku jemu nepřístupnou. Druhou úrovní kontroly je ověření vlastnictví samotných galerií, deníků a fotografií. Druhá úroveň kontroly probíhá v samotném kontroléru zpracovávající požadavek na zobrazení stránky. První úroveň kontroly probíhá pomocí komponenty Zend_Acl. Tato kontrola se provádí při spuštění aplikace, tedy při přístupu ke stránce, pomocí pluginu Cestovatele_Controller_Plugin_Auth. Abychom měli při kontrole s čím porovnávat, je zapotřebí udržovat informace o uživateli v session (viz slovník pojmů - Session). V session jsou udržovány informace jako například uživatelské jméno uživatele, id uživatele nebo jeho role. Abychom zajistili vždy aktuálnost těchto informací, provádíme před ověřováním aktualizaci session nahráním dat z databáze. Poté je provedena kontrola porovnáním role uživatele a stránky, kam přistupuje, se seznamem uloženým ve třídě nacházející se v adresáři MyAcl. 25
Kapitola 4. Implementace
4.3 Hromadné nahrávání souborů Jelikož HTML element sloužící k nahrávání souborů neumožňuje vybrat více souborů najednou a tím pádem vybrat například obsah celé složky s fotografiemi, rozhodli jsme se využít zásuvného modulu Uploadify. [ref. 29] Tento modul nám po jeho použití umožňuje vybrat více souborů najednou, čímž se nahrávání souborů stává méně nepříjemnou záležitostí. Tento modul ke své činnosti využívá technologie JavaScript a Flash player. I v případě nepřítomnosti těchto technologií se nahrávání souborů pro uživatele nestává nedostupnou funkcí. V tomto případě jejich činnost zastupuje HTML element k nahrávání souborů, ale bohužel s již zmíněnou nepříjemnou vlastností a to nahrávání souborů každého zvlášť. 4.3.1
Nastavení Uploadify
Abychom mohli Uploadify používat musíme provést několik nastavení. Tato nastavení se předávají obslužné funkci, která zajistí nahrání souborů na server. Mezi nastavení nahrávání se uvádí například, jakého typu jsou nahrávané soubory, jakou mohou mít maximální velikost nebo také jaká funkce se zavolá po úspěšném nahrání souboru na server. Zkrácený výpis kódu sloužící k nastavení Uploadify
$(function () { $('#custom_file_upload').uploadify({ //skript zajištující nahrávání 'uploader': '/js/Uploadify/uploadify.swf', //skript na straně serveru zpracující nahraná data 'script': '/fotografie/nahrat', //složka, do které se data nahrávají 'folder': '/uploads', //data přenášena společně se souborem 'scriptData': { 'GALERIE': ReadCookie('GALERIE'), 'PHPSESSID': ReadCookie('PHPSESSID'), 'ajax':'true' }, //povolené datové typy souboru 'fileExt': '*.jpg;*.jpeg*.gif;*.png', //maximální velikost souboru 'sizeLimit': 5242880, //maximální počet vybraných souborů 'queueSizeLimit': 50, //počet současně nahrávaných souborů 'simUploadLimit': 5, 'onComplete': function (event, data) { //zde se nachází tělo funkce volené při úspěšném nahrání souboru na server } }); });
26
Kapitola 4. Implementace
4.3.2
Nahrávaná data
Data, která budou společně přenášena s nahrávaným souborem - fotografií, můžeme definovat v parametru scriptData. V našem případě přenášíme společně s fotografií také id galerie, do které se má fotografie uložit. Tento parametr jsme si předtím uložili do cookies (viz slovník pojmů - Cookies), odkud si jej načteme. Dalším parametrem je session id, které je taktéž uložené v cookies a pomocí něhož přistupujeme k datům uložených v session. Bohužel Uploadify cookies s nahrávaným souborem nepřenáší, musíme tedy zajistit, aby se na server session id také dostalo, abychom mohli ověřit totožnost uživatele. Jako poslední parametr, který zasíláme na server je informace o tom, zdali je nahrávání prováděno pomocí Uploadify nebo pomocí HTML elementu. S tímto parametrem je spojeno, jakým způsobem zobrazíme uživateli fotografii zpět v prohlížeči. Pokud je soubor nahráván pomocí Uploadify, je fotografie do stránky přidána pomocí AJAXu. O této možnosti je pojednáno v následující kapitole 4.4.2.1 Vkládání a úprava fotografií. V případě nahrávání pomocí HTML elementu je stránka znovu celá načtena a tím pádem se nám zobrazí i nahrávaná fotografie.
4.4 Technologie AJAX Aby se nemusela stránka při každém dotazu znovu stahovat a překreslovat je využita na několika místech aplikace technologie AJAX (Asynchronous JavaScript and XML). Tuto technologii využíváme například ke vkládání nových fotografii do stránky po jejich nahrání na server nebo také například při sdílení galerie nebo deníku, kde je využita v jednoduchém našeptávači uživatelských jmen. 4.4.1
Metody AJAX dotazů
Knihovna Dojo, která je použita Zend frameworkem k validaci formulářů na straně klienta, již obsahuje metody ke snadnému vytvoření AJAX dotazu. Tyto metody jsou dvě. První metoda slouží k vytváření dotazů pomocí HTTP metody GET a druhá pomocí HTTP metody POST. Přesto jsme těchto metod nevyužili a rozhodli jsme použít metod vlastních. Důvody vedoucí k použití vlastních metod byly dva. Prvním a možná hlavním důvodem byla nutnost se naučit tyto metody využívat. A tím druhým důvodem byla ta skutečnost, že jsme měli tyto metody již z dřívějška připravené, a proto jsme je také využili. Jako ukázka je zde uvedena metoda pro vytvoření AJAX dotazu pomocí HTTP metody GET. Při volání metody jsou jí předány tří parametry. Adresa obslužného skriptu na straně serveru, funkce ke zpracování odpovědi a typ dotazu. Technologie AJAX rozlišuje dva typy dotazu a to asynchronní (hodnota true) a synchronní (hodnota false). V případě asynchronního typu dotazu, který je v naší aplikaci využíván, nedochází k pozastavení chodu programu, dokud dotaz nedostane odpověď od serveru, jako je tomu v případě synchronního typu dotazu. K využívání AJAX dotazů je zapotřebí vytvořit AJAX objekt, který celou komunikaci zprostředkuje. Aby byla zajištěna funkčnost ve většině moderních prohlížečů, je tento objekt připraven pomocí funkce pripravaAJAXu(). 27
Kapitola 4. Implementace Ukázka vlastní AJAX metody pro GET dotaz
function pripravaAJAXu() { try { return new XMLHttpRequest(); } catch (e) { try { return new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { return new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { return false; } } } } function ajaxGet(adresa, funkce, typ) { var xhr = pripravaAJAXu(); if (xhr) { xhr.open("GET", adresa, typ); xhr.onreadystatechange = function ajax() { if (xhr.readyState == 4) { if (xhr.status == 200) { funkce(this.responseText); } } } xhr.send(null); } }
4.4.2
Příklady použití technologie AJAX
V následující části je v krátkosti popsáno, kde jsme například technologii AJAX využili. 4.4.2.1
Vkládání a úprava fotografií
Jedno z využití technologie AJAX je při vkládání a úpravě fotografií. Po nahrání fotografie na server se jako odpověď vrátí id fotografie, které slouží k vytvoření adresy právě nahrané fotografie. Po vytvoření adresy fotografie je do stránky umístěn nový element obrázku s adresou odkazující na tuto fotografii. Po kliknutí na fotografii se uživateli zobrazí náhled fotografie s možností volby Úprava fotografie nebo Smazání fotografie. Jak smazání fotografie, tak odesílání nových úprav fotografie se zasílá na server, který zpracovává požadavek, pomocí AJAX technologie. 4.4.2.2
Našeptávač uživatelských jmen
Jako další využití AJAXu je vytvoření jednoduchého našeptávače uživatelských jmen sloužící při sdílení galerií nebo deníků. Uživatel postupně zadává písmena z klávesnice a při každém uvolnění klávesy se odešle na server dotaz s požadavkem na 28
Kapitolla 4. Impleementace
vyyhledání užživatelských h jmen dle zzadaných píísmen. Jako o návratová hodnota je vráceno poole prvních deseti naleezených jmeen, která se shodují s vloženým v teextem, a ta jsou j pak užživateli zobrrazena.
4..5 Vklád dání obrázků do edittoru K vytváření článků a záznamů ddeníku byl použit WYSIWYG („W What you seee is what yoou get“ – „Co „ vidíš, to dostanešš“) editor z knihovny Dojo. Tentto editor um možňuje vkkládat fotoggrafie nebo odkazy zaadáním adreesy URL. Abychom A uušetřili uživ vatele od zaadávání UR RL adresy, museli m jsmee provést rozzšíření toho oto editoru. Uživateli jsme dali naa výběr z dostupných d h fotografií,, galerií a deníků a po výběruu, kdy uživ vatel na poožadovanouu položku klikne k levýým tlačítkem m myši, vlo ožíme jehoo výběr do editoru. V Vkládání proovádíme volláním funkcce editoru, která sloužží ke vkládáání do edito oru. Této fuunkci předááme jako parametr p řettězec vytváářeného eleementu obrrázku nebo odkazu s nnastaveným m atributem zdroje vedooucí k položžce vybranéé uživatelem m. Ukázkaa vkládání obrázku do editorru
var editor = dijitt.byId(“obsah h_zaznamu-Ed ditor”); var obrazek = “<
”; editor.execCom mmand(‘inserth html’, obrazek k);
4..6
Závěrry implemeentace
Po analýzze, kde jsm me zjišťovaali, co kon nkrétně bud deme navrhhovat, a náásledném náávrhu realizzovaného produktu, p jssme proved dli implementaci vlastnní aplikace.. Během im mplementace se nám bohužel neepodařilo stihnout s im mplementovaat vše, co jsme si stanovili, ale o tomto je pojednáno vvíce v kapittole Závěr. V následuj ující části see nachází kkrátká ukázzka z implementované aplikace v podobě obbrázků.
obr. 9 Ukáázka aplikace - Vkládání článků
29
Kapitolla 4. Impleementace
obr. 110 Ukázka apllikace - Deník
obr. 11 Ukáázka aplikace - Náhled fotogalerie
obr. 12 Ukáázka aplikace - Cizojazyčné fráze
Toto byla krátká ukázzka z námi nnavržené ap plikace.
30
Kapitola 5 Testování Tato kapitola se zabývá testováním námi navrhované a implementované aplikace. Při testování jsme se zaměřili především na testování námi navrženého uživatelského rozhraní. Testování probíhalo ve dvou fázích. V první fázi jsme aplikaci testovali pomocí kognitivního průchodu nad jejím prototypem. V druhé fázi probíhalo testování již nad hotovou aplikací a to pomocí testu použitelnosti. Průběhy a výsledky testů jsou zachyceny v podkapitolách, které se věnují jednotlivým testům.
5.1 Kognitivní průchod Kognitivní průchod nám umožňuje testovat aplikaci bez nutnosti přítomnosti budoucích uživatelů. Průchod je prováděn nad prototypem aplikace. Ukázka prototypu aplikace je uvedena níže (obr. 13 Prototyp aplikace – první kognitivní průchod a obr. 14 Prototyp aplikace – druhý kognitivní průchod), úplný prototyp se nachází na přiloženém CD. Díky tomuto 31
Kaapitola 5. Testování T
teestování jseem schopnii odhalit přřípadné chy yby před zahájením z samotného vývoje. V průběhu teestování se prochází sccénářem ko ognitivního průchodu ddané části aplikace, a přři každém kroku k si pok kládáme nássledující otáázky.
Zvvolí uživateel správný cííl? Poozná uživateel, že má k dispozici sp právnou akcci? Zvvolí uživateel tuto správvnou akci? Pooskytne akcce zpětnou vvazbu?
Pokud jsm me schopni si na otázzku odpověědět kladně, můžeme pokročit k dalšímu krroku. V opaačném přípaadě je pravdděpodobně chyba v pro ototypu apliikace a je zapotřebí z ji odstranit. Pokud P jsem schopni takkto projít ceelým scénářeem je daná část v pořád dku.
ob br. 13 Prototyp p aplikace - první p kognitivn ní průchod
32
Kaapitola 5. Testování T
ob br. 14 Prototyp p aplikace – drruhý kognitivn ní průchod
5..1.1
Scénáář kognitiv vního průch hodu
Jednotlivéé úkoly scén náře s výsleedky jsou um místěny v přříloze - Výssledky kogn nitivního prrůchodu. V následujícíí části se naachází krátk ká ukázka z připravenného scénářře a jeho vyyhodnocení. V fotogalerie f a vložení fo otografií Úkol č 1. Vytvoření Cíl: Vytvoořit novou fotogalerii f s názvem „n nová fotogalerie“ a vlasstností „nev veřejná“. Do takto vyytvořené fo otogalerie vvložit alesp poň dvě nové n fotogrrafie. U vlložených Nakonec up pravit fotogalerii a změěnit její vlasstnost na footografií pozzměnit názeev a popis. N „vveřejná“. tab. 3 Prvvní kognitivní průchod p - úkoll č. 1
Podúkooly
Zvolí Z uživattel správný cíl??
Otevřít fotoogalerii
ANO
Zvolit „V Vložit fotogaleerii“
NE
Přihlásiit se
ANO
Je požaadovaná ak kce k disp pozici?
Zvolí uživaatel správnouu akci?
Posskytne akce zpětnou vaazbu?
AN NO NE (u uživatel mussí být přihllášen) AN NO
ANO
ANO A
NE
ANO A
ANO
ANO A
33
Kapitola 5. Testování
Zvolit „Vložit fotogalerii“ Vyplnit požadované položky a zvolit „Vložit“ pro potvrzení Vstoupit do fotogalerie Vložit fotografie Zvolit „Upravit fotografii“ Upravit fotografii a zvolit „Upravit“ pro potvrzení Návrat do fotogalerie a zvolit „Upravit fotogalerii“ Upravit fotogalerii a zvolit „Upravit“ pro potvrzení
ANO
ANO (uživatel je nyní přihlášen)
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
NE
ANO
ANO
ANO
ANO
ANO
ANO
ANO
NE
ANO
ANO
ANO
ANO
ANO
Nálezy: Po kognitivním průchodu prototypem aplikace jsme narazili na problém se správnou volbou „Úprava fotogalerie“ případně „Úprava fotografie“. Tyto akce byly umístěny nad náhledem fotogalerie nebo fotografie v podobě loga tužky znamenající úpravu položky. Uživatel by pravděpodobně na tomto místě a za tímto znázorněním možnost úpravy nehledal. Doporučení: Přesunout možnost úpravy k výpisu fotogalerie případně k podrobnějšímu zobrazení fotografie a celou akci doplnit o popis „Úprava fotogalerie“ případně „Úprava fotografie“.
Po vyhodnocení předchozího průchodu jsme upravili prototyp na základě doporučení. V důsledku změn v prototypu jsme museli poupravit i jednotlivé úkoly scénáře pro kognitivní průchod. Po úpravách jsme provedli nový test s následujícími výsledky.
34
Kapitola 5. Testování tab. 4 Druhý kognitivní průchod - úkol č. 1
Je požadovaná akce k dispozici?
Zvolí uživatel správnou akci?
Poskytne akce zpětnou vazbu?
ANO NE (uživatel musí být přihlášen) ANO ANO (uživatel je nyní přihlášen)
ANO
ANO
NE
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
Podúkoly
Zvolí uživatel správný cíl?
Otevřít fotogalerii
ANO
Zvolit „Vložit fotogalerii“
NE
Přihlásit se
ANO
Zvolit „Vložit fotogalerii“
ANO
Vyplnit požadované položky a zvolit „Vložit“ pro potvrzení Vstoupit do fotogalerie Vložit fotografie Otevřít nově vloženou fotografii Zvolit „Upravit fotografii“ Upravit fotografii a zvolit „Upravit“ pro potvrzení Návrat do vytvořené fotogalerie a zvolit „Upravit fotogalerii“ Upravit fotogalerii a zvolit „Upravit“ pro potvrzení
Nálezy: Při průchodu tímto scénářem jsme již nenarazili na žádné potíže.
5.1.2
Výsledky kognitivního průchodu
Celkem byly provedeny dva průchody nad aplikací. Po prvním průchodu, kde jsme nalezli chyby v návrhu uživatelského prostředí, jsme prototyp opravili dle doporučení a průchod jsme zopakovali. Po provedení druhého průchodu jsme již nenarazili na chybu, se kterou by si uživatel neměl nevědět rady. Tudíž jsme mohli prohlásit tento prototyp 35
Kaapitola 5. Testování T
zaa vhodný k implemento ování. Shrnuutí jednotliv vých nálezů ů a doporučeení je zaznaamenáno v následující části. 5.1.2.1
Náleezy a doporu učení
Seznam níže n zobrazu uje jednotlivvé nálezy. Každému nálezu n odpoovídá doporučení k jeeho odstraněění.
Prroblematick ké nalezení vvoleb týkajíící se fotogaalerie. o Přemíístit volby ttýkající se fotogalerie f z náhledu ffotogalerií k výpisu fotogaalerie a dopplnit příslušn ným popisem. Prroblematick ké nalezení vvoleb týkajíící se fotogrrafie. o Přemíístit volbyy týkající se foto ografie z nnáhledu fotografií fo k pod drobnějšímuu zobrazení fotografie. Prroblematick ké nalezení vvoleb týkajíící se deníku u a záznamu mu. o Přemíístit volby tý týkající se deníku d z náh hledu deníků ků k výpisu deníku a dopln nit příslušnýým textem. Obdobné O řešení praktikkovat u zázn namu.
Na základdě doporuččení byl prrototyp aplikace uprav ven. Dle takto vytv vořeného prrototypu jsm me následněě provedli im mplementacci vlastní ap plikace.
5..2 Test použitelnos p sti Test pouužitelnosti slouží nejeenom k ov věření úpln nosti impleementace navržené n applikace, ale také k ověřření, zdali jje rozhraní aplikace užživatelsky ppřívětivé. Tento test see provádí nad n již im mplementovaanou aplikaací za příto omnosti buudoucích uživatelů. U Ukázka rozhhraní aplikace se nacháází na obráázku níže (oobr. 15 Testovvaná aplikace). Během teestu dostáváá uživatel jednotlivé úkkoly a my po ozorujeme, jak se uživvateli daří daaný úkol vyyřešit. Seznnam jednotliivých úkolůů je uveden n v příloze - Výsledky testu použiitelnosti. Slledujeme přředevším, zdali uživateel nemá pottíže při volb bě akce, kteerou má pro ovést pro vyykonání danného úkolu.. Pokud by takováto siituace nastaala, znamenná to, že je aplikace užživatelsky nepřívětivá n a tudíž, že j sme udělalii při návrhu u rozhraní chhybu.
ob br. 15 Testovan ná aplikace
36
Kapitola 5. Testování
5.2.1
Volba uživatelů k testu použitelnosti
Uživatele k testu použitelnosti jsme volili dle charakteru skupin, na něž byl mířen uživatelský výzkum. Náš výzkum byl zaměřen na skupinu cestovatelů, kteří cestují sami, a na skupinu cestovatelů cestující s cestovní kanceláří. Z těchto skupin jsme tedy vybírali i pro test použitelnosti. Profily jednotlivých uživatelů, kteří prošli testem: 5.2.2
muž, 22 let, studující vysokou školu, cestující převážně sám republice muž, 27 let, vystudoval střední školu, cestuje převážně sám republice, ale i do zahraničí žena, 35 let, vystudovala střední školu, do zahraničí cestuje kanceláří, po Čechách cestuje sama muž, 40 let, vystudoval střední školu, cestuje převážně do s cestovní kanceláří
po České po České s cestovní zahraničí
Průběh testu
Celý test byl rozdělen do tří částí. V první části jsme si ověřili, do které skupiny cestovatelů uživatel patří. Během této části byly uživateli pokládány otázky vybrané z dotazníku použitého při screeneru a otázky pokládané během kvalitativní studie. Po ověření, do jaké skupiny uživatel patří, jsme přešli k hlavní části testu. Při této části testu byl uživatel požádán o provedení několika úkolů dle připraveného scénáře. Během tohoto testu jsme převážně sledovali, jakým způsobem uživatel k aplikaci přistupuje, zdali se mu daří nalézt volby k provedení dané akce nebo jak dlouho mu trvá, než správnou akci vybere. Po provedení všech úkolů proběhla poslední část testu. V této části testu jsme zjišťovali například informace, jak se uživateli s aplikací pracovalo, nebo zdali nenastala během testu situace při, které by si nevěděl rady a nevěděl jak dále pokračovat. 5.2.3
Vyhodnocení testu
Výsledky jednotlivých testů provedených uživateli jsou uvedeny příloze - Výsledky testu použitelnosti. V této části jsou uvedeny pouze shrnuté výsledky celkového testování. Výsledky byly rozděleny na nálezy a doporučení k jejich odstranění. 5.2.3.1
Nálezy a doporučení
V následující části jsou shrnuty nejčastější problémy - nálezy, se kterými se uživatelé během testů setkávali. K jednotlivým nálezům jsou přiřazeny doporučení k jejich odstranění.
Informace o odesilateli požadavku ke sdílení není dobře rozpoznatelná. o Přemístit informaci o odesilateli požadavku před zprávu požadavku. 37
Kapitola 5. Testování
U náhledu fotogalerie chybí informace o typu fotogalerie – veřejná nebo soukromá. U náhledu záznamů deníku chybí informace o typu záznamu. o U jednotlivých fotogalerií a záznamů deníku zobrazit informaci o jejich typu. Při vkládání deníku do článku by uživatel očekával možnost výběru zveřejněných záznamů. o Umožnit uživateli, aby si mohl při vkládání deníku do článku vybrat, jaké záznamy chce u deníku zobrazovat. Při vkládání fotografií do deníku nebo článku je informace malá, střední a velká velikost matoucí. Uživatel neví, co si má pod těmito pojmy představit. o U vkládání fotografií doplnit informaci o velikosti fotografie přibližnými rozměry. Uživatel nenalézá za možností loga tužky, možnost úpravy fráze nebo odkazu. o Logo tužky sloužící k úpravám doplnit vhodným textem.
Na základě doporučení byla aplikace upravena. Bohužel z časových důvodů nedošlo k opravení všech nálezů, proto neopravené nálezy jsou doporučeny k příštímu pokračování uvedené v kapitole Závěr.
5.3 Vyhodnocení testování Byly provedeny dva různé testy, které se zaměřují na testování uživatelského rozhraní. Výstupem těchto testů byl seznam doporučení k vylepšení rozhraní aplikace. Zatím co v případě testu kognitivním průchodem jsme dostali seznam doporučení k vylepšení prototypu aplikace, v případě testu použitelnosti jsme získali seznam doporučení k vylepšení již hotové aplikace. Na základě těchto doporučení byl prototyp aplikace i samotná aplikace upravena.
38
Kapitola 6 Závěr V následující kapitole se nachází shrnutí námi provedené práce. Dále jsou zde doporučeny příklady implementace, ve kterých je možné pokračovat při budoucích pracích na implementaci.
6.1 Shrnutí práce Cílem této práce (viz kapitola 1. Úvod – Cíle práce) bylo navrhnout a realizovat webové řešení pro cestovatele. Návrh řešení měl být proveden na základě potřeb uživatelů zjištěných během uživatelského výzkumu. Takto navržené řešení jsme měli nakonec ověřit pomocí testu použitelnosti. Na základě analýzy, kde jsme provedli uživatelský výzkum, jsme zjistili, jaký návrh je zapotřebí implementovat. Tento návrh zahrnuje například realizaci deníku, fotogalerie a videogalerie, ať už v podobě veřejné nebo soukromé, kterou mohou uživatelé mezi sebou sdílet, nebo kategorie článků, která například slouží pro inspiraci ostatním uživatelům při plánování jejich cest. Kompletní 39
Kapitola 6. Závěr
návrh je uveden v kapitole 2.1.6.1 – Vyhodnocení kvantitativní studie. Z takto získaného návrhu jsme pro účely testování pomocí kognitivního průchodu vytvořili prototyp aplikace. Pomocí tohoto testování jsme nalezli některé nedostatky, které byly opraveny ještě před zahájením vlastní implementace. Dle takto vytvořeného prototypu jsme následně provedli implementaci vlastní aplikace. Během implementace jsme provedli realizaci celkového návrhu aplikace vyjma videogalerie, jejíž implementace se ukázala časově náročná. Takto implementovanou aplikaci jsme podrobili testu použitelnosti, který odhalil některé nedostatky, které jsme nedokázali odhalit ani pomocí testu kognitivním průchodem. Nedostatky zjištěné během testu použitelnosti jsme se pokusili opravit. Bohužel pro nedostatek času se nám nepodařilo opravit vše. Tyto neopravené části jsou doporučeny k budoucí práci na aplikaci.
6.2 Budoucí práce Při pokračování v realizaci aplikace by bylo zapotřebí implementovat nerealizovanou videogalerii a dále také napravit neopravené nedostatky identifikované během testu použitelnosti. Nenapraveným nedostatkem je například možnost výběru záznamů, které uživatel vloží do článku nebo zobrazení informace o typu záznamu nebo galerie. Jako nově přidaná funkčnost by mohla být například možnost nějakého exportu vytvořených deníků a článků do PDF souboru nebo umožnit uživateli, aby si mohl například stáhnout obsah celé fotogalerie do počítače pomocí jednoho kliknutí. Toto jsou naše doporučení k pokračování v aplikaci. Jistě se však najdou, ale i další zajímavé nápady na další pokračování realizace webového řešení pro cestovatele.
40
Seznam použité literatury [1]
Wikipedia – Factoid, en.wikipedia.org/wiki/Factoid, stav k 30. 1. 2011
[2]
Pruitt J. & Adlin T., The persona lifecycle: keeping people in mind throughout product design., 2006, Morgan Kaufmann Publisher, ISBN 978-0-12-566251-2
[3]
Wikipedia – Hypotéza, http://cs.wikipedia.org/wiki/Hypot%C3%A9za, stav k 9. 5. 2011
[4]
Wikipedia – Zend Framework, http://cs.wikipedia.org/wiki/Zend_Framework, stav ke 12. 3. 2011
[5]
Martin Böhmer, Zend Framework Programujeme webové aplikace v PHP, 2010, Computer Press, ISBN 978-80-251-2965-4
[6]
Wikipedia – Nette Framework, http://cs.wikipedia.org/wiki/Nette_Framework, stav ke 12. 3. 2011
[7]
Nette framework, http://nette.org/cs/hlavni-prednosti, stav ke 12. 3. 2011
[8]
Wikipedia – Symfony, http://cs.wikipedia.org/wiki/Symfony, stav ke 12. 3. 2011
[9]
Root – ORM frameworky pro PHP, http://zdrojak.root.cz/clanky/ormframeworky-pro-php5-obecny-uvod/, stav ke 12. 3. 2011
[10] Doctrine projekt, http://www.doctrine-project.org/about, stav ke 12. 3. 2011 [11] Root – seriál Doctrine 2, http://zdrojak.root.cz/clanky/doctrine-2-uvod-dosystemu/, stav ke 12. 3. 2011 [12] Wikipedia – Cross-site scripting, http://cs.wikipedia.org/wiki/Cross-site_scripting, stav ke 12. 3. 2011 [13] Nette framework, http://nette.org/cs/hlavni-prednosti/bezpecnost, stav k 19. 3. 2011 [14] Wikipedia – Data Mapper, http://cs.wikipedia.org/wiki/Data_Mapper, stav ke 12. 3. 2011 [15] ABC linuxu, http://www.abclinuxu.cz/slovnik/crud, stav ke 12. 3. 2011 [16] Wikipedia – Framework, http://cs.wikipedia.org/wiki/Framework, stav ke 12. 3. 2011 [17] Osobní stránky Vojtěcha Hordějčuka, http://voho.cz/wiki/vzor-model-viewcontroller, stav k 13. 2. 2011 41
Seznam použité literatury [18] Wikipedia – Návrhový vzor, http://cs.wikipedia.org/wiki/Framework, stav ke 12. 3. 2011 [19] Root – seriál Doctrine 2, http://zdrojak.root.cz/clanky/doctrine-2-dql, stav k 19. 3. 2011 [20] Martin Klíma, Přednáškové slajdy k předmětu X39WWW, stav k 15. 11. 2010 [21] Steve Suehring, Java Script krok za krokem, 2008, Computer Press, ISBN 97880-251-2241-9 [22] Martin Domes, CSS sbírka nejužitečnějších návodů pro váš web, 2009, Computer Press, ISBN 978-80-251-2360-7 [23] Miloslav Ponkrác, PHP a MySQL bez předchozích znalostí, 2007, Computer Press, ISBN 978-80251-1758-3 [24] Michal Kubíček, Velký průvodce SEO, 2010, Computer Press, ISBN 978-80-2512195-5 [25] Zend framework, http://framework.zend.com/, stav k 15. 5. 2011 [26] Zend framework CZ, http://www.zendframework.cz/, stav k 15. 5. 2011 [27] Zend framework fórum, http://forum.zendframework.cz/, stav k 15. 5. 2011 [28] Doctrine, http://www.doctrine-project.org/, stav k 15. 5. 2011 [29] Uploadify, http://www.uploadify.com/, stav k 15. 5. 2011 [30] Dojo toolkit, http://dojotoolkit.org/, stav k 15. 5. 2011 [31] Alena Červenková a Michal Hořava, Uživatelsky přívětivá rozhraní, 2009, Horava & Associates, ISBN 978-80-254-5295-0 [32] Microsoft – Co je soubor cookies?, http://www.microsoft.com/cze/athome/security/computer/whatis/whatiscookies.m spx, stav k 23. 5. 2011 [33] Jan Tichý, Autentizace a správa uživatelů, http://www.jantichy.cz/diplomka/pozadavky/autentizace, stav k 23. 5. 2011 [34] Jan Tichý, Autorizace a přístupová práva, http://ww.jantichy.cz/diplomka/pozadavky/autorizace, stav k 23. 5. 2011
42
Slovník pojmů 1. Autentizace Autentizace je proces, při kterém se ověřuje, zdali uživatel je ten, za koho se vydává. Toto ověření se provádí například při přihlašování kontrolou uživatelského jména a hesla. [ref. 33]
2. Autorizace Při autorizaci se kontroluje, zdali má uživatel dostatečná oprávnění pro přístup k určitému souboru nebo provedení dané akce. [ref. 34]
3. Cookies Cookies jsou malé soubory, které si webové stránky ukládají na pevný disk v počítači. V takto uložených souborech mohou být například uloženy informace o poslední návštěvě webové stránky, nebo informace potřebné k udržování informací o přihlášení na některé z webových stránek. [ref. 32]
4. Context-aware escaping Context-aware escaping je technologie zabraňující vzniku Cross-site scriptingu. Context-aware escaping automaticky ošetří veškeré výstupy, a tak se nemůže stát, že by autor některý z výstupů zapomněl ošetřit. [ref. 13]
5. Cross-site scripting (převzato z wikipedie)
Cross – site scripting (XSS) je metoda narušení WWW stránek využitím bezpečnostních chyb ve skriptech (především neošetřené vstupy). Útočník díky těmto chybám v zabezpečení webové aplikace dokáže do stránek podstrčit svůj vlastní javascriptový kód, což může využít buď pouze k poškození vzhledu stránky, jejímu znefunkčnění anebo dokonce k získávání citlivých údajů návštěvníků stránek. [ref. 12]
6. CRUD (převzato z ABC linuxu)
CRUD je zkratka značící čtyři základní operace používané při práci s daty: Create vytvoření nového záznamu, Read (někdy uváděné jako retrieve) - přečtení (a zobrazení) záznamu, Update - úprava existujícího záznamu, Delete (někdy uváděné jako destroy) Smazání (zničení) záznamu. V SQL těmto akcím odpovídají příkazy: Create – INSERT, Read – SELECT, Update – UPDATE, Delete – DELETE. [ref. 15] 43
Slovník pojmů
7. Data Mapper (převzato z wikipedie)
Architektonicky návrhový vzor pro práci s datovými zdroji. Podle tohoto vzoru neobsahuje doménový objekt žádné CRUD (viz slovník pojmů - CRUD) nebo vyhledávací operace a o vytváření, úpravu a mazání doménových objektů z databáze se stará oddělený (mapovací) objekt. Doménový objekt je tedy zcela nezávislý na databázi. Zatímco mapovací objekt má přístup jak k doménovému objektu, tak k databázovému systému. Výhodou tohoto vzoru je právě nezávislost doménového objektu na datovém modelu, kdy je veškerá zodpovědnost za persistenci přesunuta na mapovací objekt. [ref. 14]
8. DQL Doctrine Query Language je silnou zbraní frameworku Doctrine 2. Svou strukturou se podobá dotazovacímu jazyku SQL, který se používá u databázových systémů, avšak je zcela nezávislý na použité databázi. Zatím co u SQL používáme konkrétní názvy tabulek a jmena sloupců u DQL se odkazujeme pomocí entit, na něž nám Doctrine 2 mapuje skutečné databázové tabulky. [ref. 19]
9. Faktoid Faktoid je diskutabilní nebo podvržené - neověřené, nesprávné nebo zhotovené prohlášení prezentováno jako fakt, ale s žádnou věrohodností. Slovo může být také používáno k popisování zvlášť významné nebo nové skutečnosti, v případě neexistence nejvíce relevantních souvislostí. [ref. 1]
10. Framework (převzato z wikipedie)
Framework je softwarová struktura, která slouží jako podpora při programování a vývoji a organizaci jiných softwarových projektů. Může obsahovat podpůrné programy, návrhové vzory nebo doporučené postupy při vývoji. [ref. 16]
11. Hypotéza Hypotéza je domněnka, jejíž platnost se pouze předpokládá, ale zároveň je formulována tak, aby ji bylo možno potvrdit nebo vyvrátit. [ref. 3]
12. ORM ORM (Object Relational Mapping) je metoda mapování relační databáze na objekty vyšších programovacích jazyků. [ref. 9]
13. Persony Nejčastěji jsou persony popisovány jako fiktivní postavy, které zastupují jednotlivé skupiny cílových uživatelů produktu. Díky svému detailnímu popisu cílů, potřeb, schopností a ostatních osobních charakteristik jednotlivých skupin uživatelů umožňují 44
Slovník pojmů designérům navrhovat rozhraní šité na míru jejich cílovým uživatelům. Přesný popis cílového uživatele, kterým by persona měla určitě být, také významně zjednodušuje plánování produktu a komunikaci uvnitř organizace, neboť zúčastnění již nejsou odkázáni na své často individuálně odlišné představy a domněnky o uživatelích. [ref. 31]
14. Návrhový vzor (převzato z wikipedie)
Návrhový vzor představuje obecné řešení problému, které se využívá při návrhu programů. Návrhový vzor není knihovnou nebo částí zdrojového kódu, která by se dala přímo vložit do našeho programu. Jedná se o popis řešení problému nebo šablonu, která může být použita v různých situacích. [ref. 18]
15. MVC návrhový vzor Model-View-Controller (MVC) je jeden z nejpoužívanějších a nejobecnějších návrhových vzorů (viz slovník pojmů - Návrhový vzor), který rozděluje program do tří hlavních částí: Model – data s tzv. business logikou, View – prezentace dat (např. uživatelské prostředí) - obsahuje přímý odkaz na model, aby mohl prezentovat jeho data vnějšímu světu, Controller – řadič s tzv. aplikační logikou, který řídí tok událostí v programu - obsahuje přímý odkaz na model, aby mohl modifikovat jeho data. [ref. 17]
16. Nekonzistentní stav Nekonzistentním stavem se rozumí takový stav, který by vedl ke skutečnosti, že v databázi se nacházejí neúplná (špatná) data. Do takovéhoto stavu se můžeme dostat ze stavu konzistentního, při neúplném provedení transakce, která manipulujeme s daty, například při vkládání nebo mazání. Na konci každé transakce se musíme vždy dostat do konzistentního stavu. Pokud tomu tak není, databáze zařídí návrat dat do stavu před transakcí.
17. Session Session je mechanismus pomocí něhož si můžeme na serveru s webovou stránkou zapamatovat různé informace podobně jako pomocí cookies. Rozdílem mezi cookies je ten, že pamatované informace jsou uloženy na serveru nikoliv na pevném disku počítače. K těmto informacím se následně můžeme dostat například pomocí session id, které je uležené v cookies. [ref. 23]
18. Skeleton Skeleton je krátký, typicky odrážkami tvořený, seznam rozlišující rozsah dat pro každou podkategorii uživatelů. Skeleton pomáhá týmu k přechodu od uvažování o kategoriích uživatelů k soustředění se na konkrétní detaily. Umožňují také týmu prezentovat klíčové závěry přizpůsobené zúčastněným stranám. [ref. 2]
45
Příloha A Seznam použitých zkratek ACL
-
Access control list
AJAX
-
Asynchronous JavaScript and XML
CD
-
Compact disc
CSS
-
Cascading Style Sheets
CRUD
-
Create, Read, Update and Delete
DQL
-
Doctrine Query Language
HTML
-
HyperText Markup Language
HTTP
-
Hypertext transfer Protocol Secure
JS
-
JavaScript
MVC
-
Model-view-controller
ORM
-
Object-relational mapping
PDF
-
Portable Document Format
PHP
-
PHP: Hypertext Preprocessor
SEO
-
Search Engine Optimization
SQL
-
Structured Query Language
URL
-
Uniform Resource Locator
VUT
-
Vysoké učení technické
WWW
-
World Wide Web
WYSIWYG -
What you see is what you get
46
Příloha B Dotazník - screener Vaše pohlaví? vyberte jednu z následujících odpovědí
o muž o žena Váš věk? vyberte jednu z následujících odpovědí
o o o o o o
méně než 15 let 15 - 20 21 - 25 26 - 30 30 - 40 40 a více
Jaké jsou cíle Vašeho cestování? vyberte jednu i více z následujících odpovědí
□ □ □ □
pracovní cesta poznávací cesty – památky, atd. rekreace – moře, atd. jiné - …………………
Vzdělání? vyberte jednu z následujících odpovědí
o o o o o o
bez vzdělání základní středoškolské probíhající středoškolské vysokoškolské probíhající vysokoškolské
47
Příloha B Dotazník - screener Kam převážně cestujete? vyberte jednu i více z následujících odpovědí
□ □ □ □ □
Tuzemsko Evropa Amerika Exotika jiné - …………………
Kolikrát jste byl(a) za posledních 5 let v zahraničí? vyberte jednu z následujících odpovědí
o o o o o
ani jednou 1 – 2 krát 3 – 5 krát 6 – 8 krát 9 a více
Jak dlouho trval Váš nejdelší pobyt v zahraničí? vyberte jednu z následujících odpovědí
o o o o o
méně než 5 dní 5 – 9 dní 10 – 19 dní 20 – 30 dní více jak 30 dní
Jaký je podíl Vaších cest, které jste podnikl(a) s cestovní kanceláří? vyberte jednu z následujících odpovědí
o o o o o o
žádná méně než 25% 25 % - 49 % 50 % - 75 % více jak 75 % všechny
48
Příloha C Dotazník - kvantitativní studie Vaše pohlaví? vyberte jednu z následujících odpovědí
o muž o žena Váš věk? vyberte jednu z následujících odpovědí
o o o o o o
méně než 15 let 15 - 20 21 - 25 26 - 30 30 - 40 40 a více
Vzdělání? vyberte jednu z následujících odpovědí
o o o o o o
bez vzdělání základní středoškolské probíhající středoškolské vysokoškolské probíhající vysokoškolské
Jaké jsou cíle Vašeho cestování? vyberte jednu i více z následujících odpovědí
□ □ □ □
pracovní cesta poznávací cesty – památky, atd. rekreace – moře, atd. jiné - …………………
Kam převážně cestujete? vyberte jednu i více z následujících odpovědí
□ □ □ □ □
Tuzemsko Evropa Amerika Exotika jiné - ………………… 49
Příloha C Dotazník - kvantitativní studie
Kolikrát jste byl(a) za posledních 5 let v zahraničí? vyberte jednu z následujících odpovědí
o o o o o
ani jednou 1 – 2 krát 3 – 5 krát 6 – 8 krát 9 a více
Jak dlouho trval Váš nejdelší pobyt v zahraničí? vyberte jednu z následujících odpovědí
o o o o o
méně než 5 dní 5 – 9 dní 10 – 19 dní 20 – 30 dní více jak 30 dní
Jaký je podíl Vaších cest, které jste podnikl(a) s cestovní kanceláří? vyberte jednu z následujících odpovědí
o o o o o o
žádná méně než 25% 25 % - 49 % 50 % - 75 % více jak 75 % všechny
Podle čeho si vybíráte cestovní kancelář? vyberte jednu i více z následujících odpovědí
□ □ □ □ □
cestuji sám dle zkušeností dle doporučení dle nabídky (cena, místo) jiné - …………………
Kde sháníte informace o místě, kam cestujete? vyberte jednu i více z následujících odpovědí
□ □ □ □
na internetu od přátel v knížkách, cestovních průvodcích jiné - …………………
Sháníte informace na internetu? vyberte jednu i více z následujících odpovědí – souvisí s předchozí odpovědí
□ □ □ □
nesháním mám oblíbené stránky vyhledávám pomocí vyhledávačů (google, seznam, …) jiné - ………………… 50
Příloha C Dotazník - kvantitativní studie
Která elektronická zařízení na cestách používáte? vyberte jednu i více z následujících odpovědí
□ □ □ □ □ □
počítač mobilní telefon fotoaparát kamera GPS navigace jiné - …………………
Připojujete se na cestách k internetu? vyberte jednu z následujících odpovědí
o o o o
ne, nemám přístup k internetu ne, na cestě se k internetu nepřipojuji, i když mohu ano, občas se připojím k internetu ano, každou volnou chvíli
Píšete si cestovní deník? vyberte jednu i více z následujících odpovědí
□ □ □ □
nepíši dělám si poznámky vedu si cestovní deník na PC jiné - …………………
Jak mnoho na cestách fotografujete? vyberte jednu z následujících odpovědí
o o o o
na cestách nefotografuji na cestách nefotografuji, když fotografují ostatní míně jak 100 foto za cestu 100 a více foto za cestu
Jak skladujete fotografie? vyberte jednu i více z následujících odpovědí
□ □ □ □ □
v PC nijak neřazena v PC uspořádaná do podsložek internetová uložiště (uložto,….) sociální sítě (facebook, twitter,…) jiné - …………………
Sdílíte své fotografie s přáteli? vyberte jednu i více z následujících odpovědi
□ □ □ □ □ □
nesdílím předáme si fotografie přes flash disk nebo jiná pevná media zasíláme si fotografie emailem přes internetová uložiště (uložto,…) pomocí sociálních sítí (facebook, twitter,….) jiné - ………………… 51
Příloha C Dotazník - kvantitativní studie
Děláte si poznámky k fotografiím? vyberte jednu i více z následujících odpovědi
□ □ □ □ □
nedělám v cestovním deníku jeden textový soubor ke všem u každé zvlášť jiné - …………………
Shromažďujete fotografie od více autorů? Co s nimi případně děláte? vyberte jednu i více z následujících odpovědi
□ □ □ □
neshromažďuji shromažďuji, ale nic s nimi nedělám shromažďuji, třídím si je pak podle autorů do podsložek jiné - …………………
Natáčíte na cestách video? vyberte jednu z následujících odpovědí
o o o o
na cestách video nenatáčím na cestách video nenatáčím, když natáčejí ostatní natočím méně jak půl hodiny videa natočím více jak půl hodiny videa
Sdílíte své video s přáteli? vyberte jednu i více z následujících odpovědi
□ □ □ □ □ □ □
nesdílím předáme si video přes flash disk nebo jiná pevná media zasíláme si video emailem přes internetová uložiště (uložto,…) pomocí sociálních sítí (facebook, twitter,…) vystavuji své video na youtube jiné - …………………
Hovoříte nějakým světovým jazykem? vyberte jednu i více z následujících odpovědi
žádným angličtina němčina ruština španělština francouzština □ jiné - ………………… □ □ □ □ □ □
52
Příloha D Otázky pokládané během rozhovorů
Jak často cestujete? Cestujete do zahraničí nebo po Čechách? Jakého charakteru jsou Vaše cesty? o Jak trávíte dovolenou? o Jaké místa nejraději na dovolené navštěvujete? o Kde jste byl na poslední dovolené? Jak jste cestoval? o sám Jak jste si plánoval cestu? Kde jste získával potřebné informace? Používal jste nějaké průvodce, mapy? Využíváte při cestách elektroniku? o cestovka Jak jste si vybíral cestovku? Byla cesta s cestovkou podle Vašich představ? Co se Vám na ní líbilo a co ne? Proč necestujete sami? Na jak dlouho cestujete? Jak jste spokojeni s ubytováním? Máte nějakou špatnou zkušenost nebo naopak nějakou veselou příhodu s ubytováním? Jak jste to řešil? Měl jste problémy se domluvit? Měl jste nějaký jiný problém? Jak jste je na místě vyřešil? Už víte, jak budete plánovat Vaši příští dovolenou? Neuděláte nějakou změnu oproti poslední dovolené? Fotografujete na dovolené? o Kolik nafotíte fotografií? o Co pak s fotografiemi děláte? Jak je “skladujete”? Zasíláte nebo sdílíte fotografie s přáteli? Píšete si nějaký cestovní deník? o Elektronický nebo papírový?
53
Příloha E Faktoidy Cestovatelé, kteří cestují s cestovní kanceláří 1. 2. 3. 4. 5. 6. 7.
Do zahraničí jezdíme, tak na půl za poznáním a napůl za koupáním (P3). Do zahraničí cestujeme s cílem koupaní v moři (P2). Když jsme u moře, uděláme si výlet po okolí (P2). Párkrát jsem byl na dovolené v Africe (P4). Cesty do zahraničí jsme podnikli s cestovkou až na dvě výjimky (P2). Cesty s rodinou do zahraničí podnikám pouze s cestovkou (P1). Cestovku si vybírám podle zkušeností nebo podle doporučení známých (P1, P2, P3, P4). 8. Do zahraničí cestuji výhradně s cestovkou, protože je to pro mě pohodlnější (P2, P3, P4). 9. Cestuji s cestovkou, protože mám strach, že bych se mohl ztratit (P3). 10. Cestování s cestovkou je pro mě pohodlnější z důvodu, že se nemusím starat o to, jak se na místo dovolené dostanu (P4). 11. Na cestu mapy nepotřebuji a na místo dovolené si mapu buď koupím, nebo půjčím (P4). 12. Ubytování za mě řeší cestovka (P1, P2, P3, P4). 13. Jelikož neumím žádné cizí jazyky, tak se domlouvám tak jak to jde – rukama, nohama (P3). 14. Umím částečně cizí jazyky, tak se nějak domluvím a zbytek řeším tak nějak pomocí rukou a nohou (P4). 15. Veškeré problémy na dovolené za mě řeší delegát cestovky (P2, P3). 16. Svoji dovolenou dopředu neplánuji. Využívám „last minuty“, mimo jiné i z důvodů ceny (P2). Cestovatelé, kteří cestují sami 17. Cestuji několikrát do roka (P1, P2). 18. Cestuji hodně po Čechách (P1, P2). 19. Převážně cestuji za poznáním a turistikou (P1, P4). 20. Cesty s přáteli do zahraničí si organizuji sám (P1). 21. Veškeré cesty po Čechách si organizuji sám (P1, P2, P3). 22. Při plánování cest po Čechách mám představu, kam chci jet a zbytek si dohledám na internetu (P3). 54
Příloha E Faktoidy 23. Cesty plánuji za pomoci internetových map, případně pomocí průvodců (P1). 24. Když jsme jeli sami do zahraničí, řídili jsme se pomocí mapy (P2). 25. Pokud cestuji sám, vyhledávám středně drahé penziony převážně na venkově (P1). 26. Při svých cestách uplatním znalost angličtiny, kterou se na většině míst domluvím (P1, P2). Informace platící pro obě skupiny 27. Jednou do roka se vydám do zahraničí (P1, P2, P4). 28. Jednou za dva roky jedu do zahraničí a druhý rok zůstávám v Čechách (P3). 29. Z důvodu dostupnosti cestuji převážně po Evropě (P1, P2, P3, P4). 30. Informace k cestě hledám na různých vyhledávačích (P1, P2, P3, P4). 31. Místo, kam chci jet do zahraničí, si předem vytipuji a pak hledám na internetu bližší informace a to pomocí vyhledávačů (P4). 32. Mé oblíbené místo pro vyhledávání informací je na Wikipedii (P2). 33. Při cestách po místech, která chci navštívit, dám hodně na doporučení přátel (P1). 34. Při cestách používám papírové mapy a průvodce (P3). 35. Při cestách u sebe nemívám žádnou elektroniku (P4). 36. Při cestách nemívám u sebe počítač (P3). 37. Pro informace, která vyhledávám často např. povolené rychlosti, poplatky atd., se vracím na již ověřené stránky (P1). 38. Při své poslední cestě jsem se setkal hodně s ruštinou (P2, P3). 39. Pokud se nedomluvíme anglicky, tak využíváme slovníky a stažené fráze z internetu (P1). 40. Svou další cestu začnu plánovat kolem Vánoc (P1). 41. Na dovolené moc nefotografuji, převážně fotografují kamarádi (P1). 42. Na dovolené fotografuji poměrně dost (P2, P3). 43. Na dovolené je více lidí, kteří fotografují. Fotografie si poté předáváme (P2). 44. Fotografie, které nafotíme, si pak s přáteli předáváme pomocí flash disku (P1, P2). 45. Fotografie sdílím pomocí internetových uložišť (P2). 46. Pokud sdílím fotografie přes internetová uložiště, štve mě, že je nemohu snadno stáhnout (P2). 47. U fotografií se snažím je se synchronizovat pomocí času vyfocení (P1). 48. Fotografie si pak po popiskuji, abych věděl, co která znamená, kde to bylo atd. (P1). 49. Fotografie uložím do PC, ty pak třídím do složek podle akce a dovolené (P1, P2, P3, P4). 50. K fotografiím si píši poznámky, kde a kdy to bylo a co jsme tam viděli. Tyto poznámky mi slouží jako cestovní deník (P3, P4). 51. Fotografie jednou za čas zálohuji na DVD (P4). 52. Pár vybraných fotografii zašlu přátelům přes email (P4). 55
Příloha E Faktoidy 53. Cestovní deník si nepíši, někdy ho píší ostatní a pak mi jej zašlou (P2). 54. Pokud je cesta většího rozměru, píši si cestovní deník, abych nezapomněl, co jsem zažil (P1). 55. Deník si píši na papír a pak ho přepisuji do počítače (P1).
56
Příloha F Skeletony Cestovatelé, kteří cestují s cestovní kanceláří 1. 2. 3. 4. 5. 6. 7. 8.
Věk: 25 - 45 let Vzdělání: alespoň středoškolské Uživatelé cestují převážně jednou do roka do zahraničí (27, 28). Jejich cesty jsou směrovány hlavně za poznáním (1, 3), částečně za rekreací (1, 2). Cesty podnikají převážně po Evropě (29) a blízkých státech ostatních kontinentů jako je např. Egypt v Africe (4). Uživatelé dají hodně na doporučení přátel a na zkušenosti. Proto důvěřuji cestovním kancelářím, které jsou nějakým způsobem ověřené (7). S cestovní kanceláří cestují kvůli pohodlnosti a také kvůli pocitu jistoty (8, 9, 10). Část cestujících hovoří částečně angličtinou, kterou se domluví (14). Ostatní jazykové problémy řeší pomocí slovníku a nejčastějších frází (39), případně za sebe nechají promluvit části těla (13, 14).
Cestovatelé, kteří cestují sami 9. Věk: 20 – 35 let 10. Vzdělání: většinou vysokoškolské probíhající 11. Cestovatelé si plánují cesty sami (20, 21). Cestují převážně po Čechách (21), ale někteří vyráží i do zahraničí (20). 12. Cesty plánují pomocí map a internetových průvodců (23). 13. Při cestách se řídí pomocí map, které mají u sebe (24). 14. Cestující cestují ve skupině s přáteli (20). 15. Cestující ovládají alespoň jeden cizí jazyk (26). Případné jazykové problémy řeší pomocí slovníku a frází (39). Informace platící pro obě skupiny 16. Svou cestu si většina cestujících vytipuje předem a pak o daném místě hledá informace (31).
57
Příloha F Skeletony 17. Většinu informací o cestě, které hledají, tak hledají na různých vyhledávačích (30, 31). Pouze minimum informací hledají na nějakých konkrétních místech (32, 37). 18. Při svých cestách většina cestovatelů používá papírové mapy (34) z důvodu nepřítomnosti počítače u sebe (35, 36). 19. Snad každý cestovatel na cestě fotografuje (42). Své fotografie poté skladuje na PC (49). 20. Někteří cestovatelé fotí ve skupinkách a poté se snaží své fotografie skládat dohromady (41, 43, 44). Poskládané fotografie případně synchronizují podle času vyfotografování (47). 21. Někteří uživatelé své fotografie sdílí na internetu (45), případně zasílá přes email (52). 22. Hodně uživatelů si píše informace k fotografiím jako náhradu cestovního deníku (54, 55).
58
Příloha G Hypotézy 1. Typický cestovatel, který cestuje sám, je ve věku 20 – 35 let, jeho vzdělání je zpravidla vysokoškolské. 2. Cestující upřednostňující služby cestovní kanceláře je ve věku 25 - 45 let a má typicky středoškolské vzdělání. 3. Cestovatelé upřednostňují státy ležící v Evropě. Případně cestují po České republice. 4. Průměrná cesta trvá 7 až 14 dní. 5. Hodně cestovatelů cestuje s cestovkou z důvodu pohodlnosti a bezpečnosti dopravy. Veškeré problémy jim pomáhá řešit delegát cestovky. 6. Velká část cest je za poznáním a turistikou. Zbytek cest je za odpočinkem u moře. Jen minimum cest je jiného charakteru. 7. Nejvíce informací cestující zjišťují pomocí vyhledávačů. Mezi nalezenými výsledky projdou pár prvních odkazů a pak případně hledají něco jiného. Jaké je potřeba věnovat úsilí optimalizaci pro vyhledávače? 8. Některé informace, které cestovatelé vyhledávají, jsou jinde přehledně zpracovány. Implementace kategorie „užitečných odkazů“. 9. Cestovatelé dají na doporučení a zkušenosti svých přátel a známých. Většina z nich ráda své zkušenosti předává dál. Implementace veřejné kategorie článků, kde cestovatelé píší své zážitky z cest. 10. Cestující své fotografie rozdělují do alb reprezentovány složkami, ke kterým si píší poznámky. Případně si dělají poznámky ke každé fotografii zvlášť. Implementace fotogalerie a její členění na alba s možností psaní poznámek k albu jako celku a k samostatným fotografiím. 11. Hodně cestovatelů si dělá poznámky ke svým cestám. Buď přímo jako cestovní deník, ale převážně jako poznámky k fotografiím, které jim toto nahrazují. Implementace cestovního deníku. 12. Hodně cestovatelů si zasílá své fotografie. Možnost sdílení dat mezi uživateli navzájem. 13. Cestovatelé na svých cestách fotografují, proto se dá předpokládat, že by mohli někteří na cestách i natáčet video. Implementace video galerie.
59
Příloha G Hypotézy 14. Cestovatelé hovoří převážně angličtinou, část cestovatelů, převážně starší, hovoří pouze ruštinou. Proto před cestou do zahraničí si vyhledají pár základních frází. Implementace kategorie „frází cizích jazyků“.
60
Příloha H Výsledky kognitivního průchodu Průchod číslo 1. Úkol č. 1 Vytvoření fotogalerie a vložení fotografií Cíl: Vytvořit novou fotogalerii s názvem „nová fotogalerie“ a vlastností „neveřejná“. Do takto vytvořené fotogalerie vložit alespoň dvě nové fotografie. U vložených fotografií pozměnit název a popis. Nakonec editovat fotogalerii a změnit její vlastnost na „veřejná“. Je požadovaná akce k dispozici? ANO NE (uživatel musí být přihlášen) ANO ANO (uživatel je nyní přihlášen)
Zvolí uživatel správnou akci? ANO
Poskytne akce zpětnou vazbu? ANO
NE
NE
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
NE
ANO
ANO
ANO
ANO
ANO
ANO
ANO
NE
ANO
ANO
ANO
ANO
ANO
Podúkoly
Zvolí uživatel správný cíl?
Otevřít fotogalerii
ANO
Zvolit „Vložit fotogalerii“
NE
Přihlásit se
ANO
Zvolit „Vložit fotogalerii“
ANO
Vyplnit požadované položky a zvolit „Vložit“ pro potvrzení Vstoupit do fotogalerie Vložit fotografie Zvolit „Upravit fotografii“ Upravit fotografii a zvolit „Upravit“ pro potvrzení Návrat do fotogalerie a zvolit „Upravit fotogalerii“ Upravit fotogalerii a zvolit „Upravit“ pro potvrzení
61
Příloha H Výsledky kognitivního průchodu Nálezy: Po kognitivním průchodu prototypem aplikace jsme narazili na problém se správnou volbou „Úprava fotogalerie“ případně „Úprava fotografie“. Tyto akce byly umístěny nad náhledem fotogalerie nebo fotografie v podobě loga tužky znamenající úpravu položky. Uživatel by pravděpodobně za tímto znázorněním možnost úpravy nehledal. Doporučení: Přesunout možnost úpravy k výpisu fotogalerie případně k podrobnějšímu zobrazení fotografie a celou akci doplnit o popis „Úprava fotogalerie“ případně „Úprava fotografie“.
Úkol č. 2 Sdílet soukromou fotogalerii s jiným uživatelem Cíl: U existující fotogalerie nastavit sdílení jinému uživateli. Podúkoly Otevřít fotogalerii U vybrané fotogalerie zvolit „Sdílet“ Přihlásit se Otevřít fotogalerii U vybrané fotogalerie zvolit „Sdílet“ Vyplnit uživatelské jméno druhého uživatele Zvolit „Sdílet“ pro potvrzení změn
Je požadovaná akce k dispozici? ANO
Zvolí uživatel správnou akci? ANO
Poskytne akce zpětnou vazbu? ANO
NE (uživatel není přihlášen)
NE
ANO
ANO ANO ANO (Uživatel je nyní přihlášen)
ANO ANO
ANO ANO
NE
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
Zvolí uživatel správný cíl? ANO NE ANO ANO NE
Nálezy: Uživatel pravděpodobně nezvolí správnou akci ke sdílení, která je zde znázorněna jako obrázek dopisu. Doporučení: Přesunout akci sdílet dovnitř fotogalerie a příslušný obrázek doplnit vhodným popisem.
Úkol č. 3 Vytvořit nový deník a vložit do něj záznam Cíl: Vytvořit nový deník s názvem „nový deník“. Do vytvořeného deníku vložit alespoň dva záznamy. První záznam s názvem „veřejný“ bude mít vlastnost veřejného záznamu, druhý záznam s názvem „neveřejný“ bude mít vlastnost neveřejného záznamu.
62
Příloha H Výsledky kognitivního průchodu
Podúkoly
Zvolí uživatel správný cíl?
Otevřít Deník
NE
Přihlásit se
ANO
Otevřít Deník
ANO
Zvolit „Vložit deník“ Vyplnit název deníku a zvolit „Vložit“ pro uložení Vstoupit do deníku Zvolit „Vložit záznam“ Vyplnit požadované položky a zvolit „Vložit“ pro potvrzení Krok volby nového záznamu opakovat pro druhý záznam
ANO
Je požadovaná Zvolí uživatel akce správnou k dispozici? akci? NE (uživatel NE není přihlášen) ANO ANO ANO (uživatel je nyní ANO přihlášen) ANO ANO
Poskytne akce zpětnou vazbu? ANO ANO ANO ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
Nálezy: Při průchodu tímto scénářem jsme nenarazili na žádné potíže.
Úkol č. 4 Vytvoření cizojazyčné fráze do kategorie frází Cíl: Vytvořit novou cizojazyčnou frází v kategorii frází Angličtina.
Podúkoly Otevřít Cizojazyčné fráze Vstoupit do cizojazyčné kategorie Angličtina Zvolit „Vložit cizojazyčnou frázi“ Přihlásit se Otevřít Cizojazyčné fráze Vstoupit do cizojazyčné kategorie Angličtina
Zvolí uživatel správný cíl?
Je požadovaná akce k dispozici?
Zvolí uživatel správnou akci?
Poskytne akce zpětnou vazbu?
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
NE
ANO
ANO
NE (uživatel není přihlášen) ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
NE
63
Příloha H Výsledky kognitivního průchodu
Zvolit „Vložit cizojazyčnou frázi“
ANO
ANO (Uživatel je nyní přihlášen)
Vyplnit originál a překlad nové fráze a zvolit „Vložit“ pro uložení
ANO
ANO
ANO
ANO
ANO
ANO
Nálezy: Při průchodu tímto scénářem jsme nenarazili na žádné potíže.
Úkol č. 5 Vložení nového odkazu Cíl: Vložit do kategorie odkazů alespoň jeden nový odkaz. Podúkoly
Zvolí uživatel správný cíl?
Otevřít Odkazy
ANO
Zvolit „Vložit odkaz“
NE
Přihlásit se Otevřít Odkazy Zvolit „Vložit odkaz“ Vyplnit adresu nového odkazu a zvolit „Vložit“ pro potvrzení
ANO ANO ANO
Je požadovaná Zvolí uživatel akce správnou k dispozici? akci? ANO ANO NE (uživatel není NE přihlášen) ANO ANO ANO ANO ANO ANO
ANO
ANO
ANO
Poskytne akce zpětnou vazbu? ANO ANO ANO ANO ANO ANO
Nálezy: Při průchodu tímto scénářem jsme nenarazili na žádné potíže.
Úkol č. 6 Vytvořit novou kategorii článků a vložit do ní nový článek Cíl: Vytvořit novou kategorii článků s názvem „nové články“. Do nové kategorie vložit alespoň jeden nový článek s názvem „první článek“ obsahující odkaz na deník, a fotogalerii. Podúkoly
Zvolí uživatel správný cíl?
Otevřít Články
ANO
Zvolit „Vložit kategorii“
NE
Přihlásit se
ANO
Je požadovaná akce k dispozici? ANO NE (uživatel musí být přihlášen) ANO 64
Zvolí uživatel správnou akci? ANO
Poskytne akce zpětnou vazbu? ANO
NE
ANO
ANO
ANO
Příloha H Výsledky kognitivního průchodu Otevřít Články
ANO
Zvolit „Vložit kategorii“
ANO
Vyplnit požadované položky a zvolit „Vložit“ Vstoupit do nové kategorie Zvolit „Vložit článek“ Vyplnit požadované položky nového článku Zvolit „Vložit deník“ Z nabízeného seznamu vybrat deník a poklikem jej vložit Zvolit „Vložit fotogalerii“ Z nabízeného seznamu vybrat fotogalerii a poklikem ji vložit Zvolit „Vložit“ pro uložení článku
ANO ANO (uživatel musí být přihlášen)
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
Nálezy: Při průchodu tímto scénářem jsme nenarazili na žádné potíže.
Průchod číslo 2. Úkol 1 Vytvoření fotogalerie a vložení fotografií Cíl: Vytvořit novou fotogalerii s názvem „nová fotogalerie“ a vlastností „neveřejná“. Do takto vytvořené fotogalerie vložit alespoň dvě nové fotografie. U vložených fotografií pozměnit název a popis. Nakonec editovat fotogalerii a změnit její vlastnost na „veřejná“. Podúkoly
Zvolí uživatel správný cíl?
Otevřít fotogalerii
ANO
Zvolit „Vložit fotogalerii“
ANO
Přihlásit se
ANO
Je požadovaná akce k dispozici? ANO NE (uživatel musí být přihlášen) ANO 65
Zvolí uživatel správnou akci? ANO
Poskytne akce zpětnou vazbu? ANO
ANO
ANO
ANO
ANO
Příloha H Výsledky kognitivního průchodu Zvolit „Vložit fotogalerii“ Vyplnit požadované položky a zvolit „Vložit“ pro potvrzení Vstoupit do fotogalerie Vložit fotografie Otevřít nově vloženou fotografii Zvolit „Upravit fotografie“ Upravit fotografie a zvolit „Upravit“ pro potvrzení Návrat do vytvořené fotogalerie a zvolit „Upravit fotogalerii“ Upravit fotogalerii a zvolit „Upravit“ pro potvrzení
ANO
ANO (uživatel je nyní přihlášen)
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
Nálezy: Během průchodu jsme nenarazili na nic, s čím by si uživatel neměl vědět rady.
Úkol č. 2 Sdílet soukromou fotogalerii s jiným uživatelem Cíl: U existující fotogalerie nastavit sdílení s jiným uživatelem. Podúkoly Otevřít Fotogalerii Vybrat soukromou fotogalerii pro sdílení a vstoupit do ní U vybrané fotogalerie zvolit „Sdílet fotogalerii“ Vyplnit uživatelské jméno druhého uživatele Zvolit „Sdílet“ pro potvrzení změn
ANO
Je požadovaná akce k dispozici? ANO
Zvolí uživatel správnou akci? ANO
Poskytne akce zpětnou vazbu? ANO
ANO
ANO
ANO
ANO
ANO
ANO (uživatel je přihlášen)
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
Zvolí uživatel správný cíl?
66
Příloha H Výsledky kognitivního průchodu Nálezy: Při průchodu tímto scénářem jsme nenarazili na žádné potíže.
Úkol č. 3 Vytvořit nový deník a vložit do něj záznam Cíl: Vytvořit nový deník s názvem „nový deník“. Do vytvořeného deníku vložit alespoň dva záznamy. První záznam s názvem „veřejný“ bude mít vlastnost veřejného záznamu, druhý záznam s názvem „neveřejný“ bude mít vlastnost neveřejného záznamu. Zvolí uživatel správnou akci?
Poskytne akce zpětnou vazbu?
ANO
ANO
ANO
Je požadovaná akce k dispozici? ANO (uživatel je přihlášen) ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
Podúkoly
Zvolí uživatel správný cíl?
Otevřít Deník
ANO
Zvolit „Vložit deník“ Vyplnit název deníku a zvolit „Vložit“ pro uložení Vstoupit do deníku Zvolit „Vložit záznam“ Vyplnit požadované položky a zvolit „Vložit“ pro potvrzení Krok volby nového záznamu opakovat pro druhý záznam
Nálezy: Při průchodu tímto scénářem jsme nenarazili na žádné potíže.
Úkol č. 4 Vytvoření cizojazyčné fráze do kategorie frází Cíl: Vytvořit novou cizojazyčnou frází v kategorii frází Angličtina.
Podúkoly Otevřít Cizojazyčné fráze Vstoupit do nové cizojazyčné kategorie Zvolit „Vložit cizojazyčnou frázi“
Zvolí uživatel správný cíl?
Je požadovaná akce k dispozici?
Zvolí uživatel správnou akci?
Poskytne akce zpětnou vazbu?
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO (uživatel je přihlášen)
ANO
ANO
67
Příloha H Výsledky kognitivního průchodu Vyplnit originál a překlad nové fráze a zvolit „Vložit“ pro uložení
ANO
ANO
ANO
ANO
Nálezy: Při průchodu tímto scénářem jsme nenarazili na žádné potíže. Úkol č. 5 Vložení nového odkazu Cíl: Vložit do kategorie odkazů alespoň jeden nový odkaz. Podúkoly Otevřít Odkazy Zvolit „Vložit odkaz“ Vyplnit adresu nového odkazu a zvolit „Vložit“ pro potvrzení
Zvolí uživatel správný cíl? ANO ANO
Je požadovaná akce k dispozici? ANO ANO (uživatel je přihlášen)
Zvolí uživatel správnou akci? ANO
Poskytne akce zpětnou vazbu? ANO
ANO
ANO
ANO
ANO
ANO
ANO
Nálezy: Při průchodu tímto scénářem jsme nenarazili na žádné potíže.
Úkol č. 6 Vytvořit novou kategorii článků a vložit do ní nový článek Cíl: Vytvořit novou kategorii článků s názvem „nové články“. Do nové kategorie vložit alespoň jeden nový článek s názvem „první článek“ obsahující odkaz na deník, a fotogalerii. Podúkoly Otevřít Články Zvolit „Vložit kategorii“ Vyplnit požadované položky a zvolit „Vložit“ Vstoupit do nové kategorie Zvolit „Vložit článek“ Vyplnit požadované položky nového článku Zvolit „Vložit deník“
Je požadovaná akce k dispozici? ANO ANO (uživatel je přihlášen)
Zvolí uživatel správnou akci? ANO
Poskytne akce zpětnou vazbu? ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
Zvolí uživatel správný cíl? ANO ANO
68
Příloha H Výsledky kognitivního průchodu Z nabízeného seznamu vybrat deník a poklikem jej vložit Zvolit „Vložit fotogalerii“ Z nabízeného seznamu vybrat fotogalerii a poklikem ji vložit Zvolit „Vložit“ pro uložení článku
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
ANO
Nálezy: Při průchodu tímto scénářem jsme nenarazili na žádné potíže.
69
Příloha I Výsledky testu použitelnosti Scénář prováděného testu 1. Vytvořte fotogalerii a vložte do ní fotografie Představte si následující situaci. Vrátil(a) jste se z dovolené, na které jste si nafotografoval(a) velké množství fotografií. Nyní byste chtěl(a) tyto fotografie ukázat svým přátelům, ale bohužel jsou velmi daleko a jinak než přes internet se s nimi nespojíte. Proto Vás napadlo tyto fotografie umístit na náš web a napsat jim k nim pár poznámek. Fotografie si vložíte do nově vložené fotogalerie. 1. Vaším úkolem je vytvořit si novou fotogalerii. Jelikož nechcete, aby fotografie viděl někdo jiný než Vy a Vaši přátelé, musíte zajistit, aby fotogalerie nebyla veřejná. 2. Po vytvoření fotogalerie začnete nahrávat fotografie. U některých z nich si napíšete krátkou poznámku. 3. Jelikož jste se rozhodl vytvořit fotogalerii, která je neveřejná (soukromá), musíte zajistit, aby vaši přátelé měli k této fotogalerii přístup – musíte ji přátelům nasdílet.
2. Vytvořte deník a vložte do něj záznam pro první dva dny cesty Nyní máme trochu jinou situaci. Na svou cestu jste se rozhodl(a) vzít počítač, a jelikož máte přístup k internetu, můžete si svůj cestovní deník psát na našem webu. Proto si vytvoříte nový deník, do kterého si budete vkládat nové záznamy. 1. Vytvořte si nový deník. 2. Do nově vytvořeného cestovního deníku vložte nový záznam. Do vytvářeného záznamu vložte fotografie z fotogalerie. Jako fotogalerii použijte fotogalerii vytvořenou v předchozím úkolu.
3. Vytvořte nový článek o své cestě, vložte do něj odkaz na deník a fotogalerii Po předvedení fotografií a odvyprávění příběhu z Vaší cesty přátelům, jste sklidil(a) velký úspěch, protože se všem Vaše volba cesty líbila a chtěli by se tam také podívat. Proto jste se rozhodl(a) napsat o své cestě nový článek, abyste jej mohl prezentovat i jiným lidem. 70
Příloha I Výsledky testu použitelnosti 1. Vytvořte novou kategorii článků, do které později vložíte nový článek. 2. Do vytvořené kategorie vytvořte článek o Vaší cestě. 3. Při vytváření článku využijte fotografie ve fotogalerii vytvořenou v prvním úkolu. 4. Do vytvářeného článku vložte mimo jiné také odkaz na fotogalerii a odkaz na deník. 4. Vložte nový odkaz do kategorie odkazů Při plánování své nové cesty jste narazil(a) na zajímavý odkaz, na kterém jste našel(a) zajímavé informace. Jelikož se Vám zpracování informací na dané stránce moc líbilo, rozhodl(a) jste se podělit se o něj i s jinými uživateli. 1. Vložte nový odkaz.
5. Vložte novou frázi do kategorie cizojazyčných frází Při poslední cestě do zahraničí jste narazil(a) na situaci, při které Vám Vaše jazykové znalosti nevystačily. Proto jste musel(a) rychle následující situaci řešit a začal(a) jste hledat slovíčka ve slovníku, abyste se domluvil(a). Po vyřešení této situace jste se rozhodl(a), že si pro jistotu tuto větu, která Vám pomohla z nepříjemné situace, zapamatujete. Pro jistotu si ji ještě někde poznamenáte a takovým vhodným místem je naše kategorie cizojazyčných frází. 1. Vložte novou frázi do kategorie cizojazyčné fráze a to do jazykové kategorie odpovídající jazyku fráze. 2. Po vložení jste zjistil, že jste udělal(a) překlep ve vložené frázi, a proto nově vloženou frázi opravte.
Vyhodnocení testů Uživatel č. 1 Nálezy a doporučení:
Informace o odesilateli požadavku ke sdílení není dobře rozpoznatelná. o Přemístit informaci o odesilateli požadavku pře zprávu požadavku. U náhledu fotogalerie chybí informace o typu fotogalerie – veřejná nebo soukromá. U náhledu záznamů deníku opět chybí informace o typu záznamu. o U jednotlivých fotogalerií a záznamů deníku zobrazit informaci o jejich typu. Při vkládání deníku do článku by uživatel očekával možnost výběru zveřejněných záznamů. 71
Příloha I Výsledky testu použitelnosti
o Umožnit uživateli, aby si mohl při vkládání deníku do článku vybrat, které záznamy chce u deníku zobrazovat. Při vkládání fotografii do deníku nebo článku je informace malá, střední a velká velikost matoucí. Uživatel neví co si má pod tímto představit. o U vkládání fotografii doplnit informaci o velikosti fotografie přibližnými rozměry.
Uživatel č. 2 Nálezy a doporučení:
Uživatel špatně chápe možnost „Vybrat fotografie“. o Možnost „Vybrat fotografie“ vhodně přejmenovat například na „Vložit fotografie“. Uživatel si nevšiml informace o autorovi požadavku. o Informaci o autorovi požadavku přesunout před vzkaz požadavku. Uživatel nehledá možnost úprav cizojazyčné fráze za ikonou tužky. o Ikonu pro možnost úprav a mazání doplnit ještě vhodným textem. Uživatel nechápe rozdíl mezi kategorii a článkem. o Do stránky zobrazující výběr jednotlivých kategorii vložit například nadpis „Kategorie článků“
Uživatel č. 3 Nálezy a doporučení:
Uživatel si není jist možností veřejná fotogalerie. o U možnosti veřejná fotogalerie lépe vysvětlit pojem veřejná fotogalerie. Uživatel u požadavku opět nenalézá jméno odesilatele. o Jméno odesilatele u požadavku přesunout před vzkaz požadavku. Přehlídnutí možnosti veřejného záznamu. o Možnost veřejného záznamu přesunout před obsah záznamu. Není zcela jisté, co se nachází po otevření záložky články. o Napsat výstižný nadpis před výpis jednotlivých kategorii článků. Uživatel přehlíží varování u vkládání fotografií o potřebě, že fotogalerie musí být veřejná. o Varování u vkládání článků lépe zvýraznit například větším písmem. Uživatel delší dobu hledá možnost editace cizojazyčné fráze. o Ikonku tužky sloužící k editaci doplnit textovou informací.
Uživatel č. 4 Nálezy a doporučení
Uživatel nemůže nalézt jméno odesilatele požadavku. 72
Příloha I Výsledky testu použitelnosti
o Zvýraznit a přesunout odesilatele požadavku. Špatné znázornění možností smazat a upravit u odkazu. o Doplnit možnosti smazat a upravit odkaz o nějakou textovou informaci. Přehlídnutí možnosti veřejného záznamu. o Přemístit možnost veřejného záznamu před samotný obsah záznamu.
73
Příloha J Instalační příručka Zde jsou uvedeny jednotlivé kroky, které musí být podniknuty ke správné funkčnosti aplikace. Aplikace vyžaduje PHP ve verzi 5.3 nebo vyšší. Níže popsaný postup instalace je pro použitý operační systému Windows 7 a balíček WampServer obsahující webový server Apache 2.2.11 a relační databázi MySQL 5.1.36. Postup instalace 1. Zkopírovat adresář s aplikací do DocumentRoot webového serveru. Výsledek bude vypadat například takto. C:\wamp\www\Web_pro_cestovatele\
2. Povolit vytváření virtuálního hostitele ve webovém severu. Povolení provedeme v souboru httpd.conf umístěném v adresáři conf webového serveru Apache. Výsledek by měl vypadat takto. #Virtual hosts Include conf/extra/httpd-vhosts.conf
3. Vytvořit virtuálního hostitele ve webovém serveru v souboru httpd.conf v podadresáři conf\extra webového serveru Apache. Výsledek vypadá například takto.
SetEnv APPLICATION_ENV “production” DocumentRoot “C:/wamp/www/Web_pro_cestovatele/public/” ServerName webprocestovatele.cz
4. Povolit u webového serveru Apache modul mod_rewrite. Po provedení kroků 2, 3 a 4 je nutné webový server restartovat.
74
Příloha J Instalační příručka 5. Přidat nový DNS záznam do souboru v adresáři C:\windows\system32\drivers\etc\hosts. Výsledek vypadá například takto. 127.0.0.1 webprocestovatele.cz
6. Vytvořit databázi v databázovém systému MySQL například pomocí phpMyAdmin. U vytvářené databáze nastavit porovnání na utf8_czech_ci. 7. Zadat údaje k přístupu do databáze. Potřebné údaje zapíšeme do souboru Web_pro_cestovatele\library\databaze.php. 8. Spustit ve webovém prohlížeči adresu webprocestovatele.cz/instalace (adresa je shodná s adresou zadanou jako ServerName v bodě 3). Po spuštění této stránky se provede vygenerování relační databáze a načte se stránka pro registraci administrátora aplikace. Po zaregistrování administrátora aplikace není tato stránka již přístupná.
75
Příloha K Obsah přiloženého CD Níže je popsána adresářová struktura přiloženého CD s popisem obsahu jednotlivých adresářů. CD | |- Prototyp aplikace|– Prototyp – první kognitivní průchod | | (prototyp aplikace sloužící pro | | první kognitivní průchod) | |– Prototyp – druhý kognitivní průchod | (prototyp aplikace sloužící pro | druhý kognitivní průchod) |- Web_pro_cestovatele (výsledná aplikace) |- Bakalářská_práce.pdf (digitální podoba odevzdané bakalářské práce)
76