Webový editor obrázkového kalendá e. Jaroslav Tesa. ƒeské vysoké u ení technické v Praze Fakulta elektrotechnická Katedra po íta ové graky a interakce

eské vysoké u£ení technické v Praze Fakulta elektrotechnická Katedra po£íta£ové graky a interakce

Bakalá°ská práce

Webový editor obrázkového kalendá°e Jaroslav Tesa°

Vedoucí práce: Ing. Adam Sporka, Ph.D.

Studijní program: Softwarové technologie a management, Bakalá°ský Obor: Web a multimedia 19. kv¥tna 2012

iv

v

Pod¥kování Rád bych pod¥koval vedoucímu bakalá°ské práce, Ing. Adamu Sporkovi, Ph.D. za jeho p°ipomínky a nám¥ty. D¥kuji i panu Ing. Martinu Va¬kovi za zprovozn¥ní a poskytnutí hostingu na ²kolním serveru. Za pomoc p°i testování aplikace v Ulabu, pod¥kování zasluhují kolegové z oboru Marek Fajfr, Václav Trpák, Matou² Zítko a dobrovolníci, kte°í se test· zú£astnili.

vi

vii

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 Praze dne 20. 5. 2012

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

viii

Abstract The goal of this work was to implement web application, enabling registred users to create PDF calendar with their own photographs and events. After search of the existing implementations has been assembled design and analysis of solution. The application has been implemented with PHP, Nette Framework, PDF creator library TCPDF and some HTML5 and CSS3 technologies. The most important parts of the implementation are described in this work. Part of work is usability test with users. It took place in Ulab at Karlovo nám¥stí. Test results has been used to correct some design or logical errors. Users guide is attached.

Abstrakt Cílem této práce bylo implementovat webovou aplikaci, která umoºní registrovaným uºivatel·m vytvo°it PDF kalendá° s vlastními fotograemi a událostmi. Po re²er²i existujících prací byl sestaven návrh a analýza °e²ení. Aplikace byla implementována pomocí jazyka PHP, Frameworku Nette, knihovny pro generování PDF soubor· TCPDF a n¥kolika technologií HTML5 a CSS3. V práci jsou nejd·leºit¥j²í £ásti implementace popsány. Po pilotní implementaci byl web podroben testu pouºitelnosti s uºivateli v laborato°i Ulab na Karlov¥ nám¥stí a na základ¥ testování bylo provedeno n¥kolik úprav. Sou£ástí práce je i uºivatelská p°íru£ka.

ix

x

Obsah 1 Úvod

1

1.1

Popis problému . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

1.2

Specikace cíle

1

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

2 Re²er²ní zpracování existujících implementací

3

2.1

lulu.com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

2.2

mycalendarmaker.com

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

5

2.3

info.24print.eu/cze/ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6

2.4

vlastni-kalendar.cz/ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

2.5

fotolab.cz/fotodarky/vizitky.html . . . . . . . . . . . . . . . . . . . . . . . . .

2.6

vistaprint.cz/

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

10

2.7

Obecné shrnutí a návrhy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

3 Analýza a návrh °e²ení

8

13

3.1

Návrh

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

13

3.2

P°íprava implementace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14

3.2.1

Výb¥r technologií . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14

3.2.2

Jazyk PHP

14

3.2.3

Nette framework

3.2.4

Drag and Drop a HTML5

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

16

3.2.5

TCPDF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

16

3.2.6

Modernizr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

17

Analýza databáze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

17

3.3

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

4 Vlastnosti a funkcionalita aplikace

15

21

4.1

Registrace a p°ihlá²ení nového uºivatele

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

21

4.2

Správa uºivatelského ú£tu

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

22

4.3

Nahrávání, otá£ení a mazání fotograí, správa adresá°· . . . . . . . . . . . . .

22

4.4

Vlastní události uºivatele

4.5

Vytvo°ení kalendá°e

4.6

Vytvo°ení PDF souboru

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

23

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

23

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

5 Pilotní implementace

24

25

5.1

Adresá°ová struktura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5.2

Formulá°e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

5.3

Drag and Drop s HTML5

29

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

xi

25

xii

OBSAH

5.4

CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

31

5.5

ablonovací systém . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

31

5.6

Vytvá°ení dat pro kalendá° . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

32

6 Testování s uºivateli

35

6.1

Popis cílové skupiny a screener

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

35

6.2

Neve°ejná £ást screeneru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

36

6.3

Pozvaní ú£astníci k testu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

37

6.4

Otázky pro Pre-test dotazník

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

37

6.5

Otázky pro Post-test dotazník . . . . . . . . . . . . . . . . . . . . . . . . . . .

38

6.6

Úkoly pro participanty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

38

6.7

Nastavení testu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

39

6.8

Hardwarové a softwarové prost°edky

6.9

Pr·b¥h testování

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

39

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

39

6.10 Nálezy a návrhy jejich °e²ení . . . . . . . . . . . . . . . . . . . . . . . . . . . .

40

6.11 Záv¥r testování

42

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

7 Úprava implementace

43

7.1

Moje obrázky a kalendá°e

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

43

7.2

Moje události . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

44

7.3

Tvorba kalendá°e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

44

7.4

Zm¥na nastavení kalendá°e

45

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

8 Záv¥r

47

8.1

Porovnání se zadáním

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

47

8.2

Návrhy roz²í°ení aplikace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

47

8.3

Porovnání s existujícími aplikacemi . . . . . . . . . . . . . . . . . . . . . . . .

48

9 P°ílohy

49

9.1

Vypln¥ný Pre-test dotazník

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

49

9.2

Vypln¥ný Post-test dotazník . . . . . . . . . . . . . . . . . . . . . . . . . . . .

49

9.3

Diagram databáze

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

50

9.4

Ukázky aplikace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

50

10 Instala£ní a uºivatelská p°íru£ka

57

11 Seznam pouºitých zkratek

59

12 Obsah p°iloºeného CD

61

Seznam obrázk· 2.1

Moºnosti nahrání fotek na Lulu.com. . . . . . . . . . . . . . . . . . . . . . . .

4

2.2

Nedostate£n¥ odd¥lené dny, mizející £ísla pod obrázky na Lulu.com.

. . . . .

4

2.3

Reklama a nadbyte£n¥ generovaný °ádek tabulky na mycalendarmaker.com. .

5

2.4

Týden musí za£ínat ned¥lí a popisky musí být v angli£tin¥ na mycalendarmaker.com. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6

2.5

Ukazatel kvality, p°íjemné rozhraní a snadná práce na 24print.eu. . . . . . . .

7

2.6

Dynamický ukazatel kvality p°i úprav¥ konkrétní fotky. . . . . . . . . . . . . .

7

2.7

Barevné rozli²ení a vlastní popisky,gracká chyba p°i dlouhém popisku na vlastni-kalendar.cz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2.8

Do prostor kde je na pravém obrázku ikona B, bylo na levém obrázku kliknuto na webu fotolab.cz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2.9

8

Náhled výsledného produktu na webu fotolab.cz.

9

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

9

2.10 Informace o pouºitých fotograích na vistaprint.cz. . . . . . . . . . . . . . . .

11

2.11 Zp·soby nahrávání fotograí a kvalitní informovanost uºivatele na vistaprint.cz. 11 3.1

Debbuger Bar.

3.2

Pilotní návrh rozsahu aplikace. (£ást 1.)

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

18

3.3


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

19

3.4


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

20

4.1

Volitelné obrázky události. Ukázka tooltipu, který se zobrazí u kurzoru po jeho zji²t¥ní na prvku INFO.

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

15

23

5.1

Adresá° app obsahující nejd·leºit¥j²í t°ídy. . . . . . . . . . . . . . . . . . . . .

26

5.2

Ukázka funkce Drag and Drop mezi prvky. . . . . . . . . . . . . . . . . . . . .

31

6.1

Rozvrºení místností laborato°e ur£ené k testování softwaru s uºivateli, ULAB. Laborato° se nachází v budov¥ VUT na Karlov¥ nám¥stí na kated°e Graky a interakce. [13] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7.1

37

Ukázka adresá°e, který lze p°ejmenovat, odstranit nebo odstranit i s obsahem. Fotograe lze otá£et, p°esouvat mezi adresá°i a odstra¬ovat. . . . . . . . . . .

43

7.2

Nové ikony na stránce s obrázky a adresá°i.

44

7.3

Stav p°i za²krtnutém a neza²krtnutém checkboxu u volby obrázku události

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

dává dostate£nou zp¥tnou vazbu uºivateli. Obdobn¥ je °e²ená volba vloºení roku narození a pouºití pozadí stránek.

xiii

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

44

xiv

SEZNAM OBRÁZK

7.4

P°i°azenou fotograi lze nyní odstranit.

7.5

Adresá° lze minimalizovat klikem na poml£ku v pravém horním rohu, obdobn¥

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

45

jako opera£ních systémech Windows. Informa£ní zna£ky o p°i°azení fotograe vºdy odpovídají. 7.6

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

45

Stránka s nastavením nyní rozli²uje, zda je provád¥na úprava nebo první vloºení nastavení a podle toho za²krtává checkboxy.

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

45

9.1

Finální model databáze.

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

51

9.2

Správa obrázk· a adresá°·, ukázka. . . . . . . . . . . . . . . . . . . . . . . . .

52

9.3

Správa událostí, ukázka.

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

53

9.4

Vytvá°ení kalendá°e, ukázka. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

54

10.1 Hlavní naviga£ní menu aplikace. . . . . . . . . . . . . . . . . . . . . . . . . . .

57

10.2 Dotaz od aplikace.

58

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

Seznam tabulek 4.1

Registrace a p°ihlá²ení nového uºivatele

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

21

4.2

Správa uºivatelského ú£tu

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

22

4.3

Nahrávání, otá£ení a mazání fotograí, správa adresá°· . . . . . . . . . . . . .

22

4.4

Vlastní události uºivatele

4.5

Vytvo°ení kalendá°e

9.1

Vypln¥ný Pre-test dotazník

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

49

9.2

Vypln¥ný Post-test dotazník . . . . . . . . . . . . . . . . . . . . . . . . . . . .

50

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

23

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

24

xv

xvi

SEZNAM TABULEK

Kapitola 1

Úvod 1.1 Popis problému Existuje mnoho webových aplikací a sluºeb, které umoº¬ují uºivatel·m zve°ej¬ovat fotograe, hodnotit je a spoustu dal²ího. Také ale stoupá poptávka po tiskovinách. Lidí se vracejí ke klasické fotograi, která se musela nechat vyvolat nap°íklad z lmu a své digitáln¥ po°ízené obrázky si nyní nechávají vytisknout taktéº. S touto moºností se za£alo objevovat mnoho zp·sob·, jak takto vyti²t¥né fotky vyuºít a s tím se i na trhu za£aly objevovat sluºby poskytující z vlastních fotograí vytvo°it nást¥nný nebo jiný kalendá°. Tato sluºba se postupn¥ za£ala p°ená²et i na internet. Od aplikací, kde její provozovatelé shromaº¤ují fotograe a hotový kalendá° podle vzoru za²lou po²tou, aº po ty s interaktivním rozhraním s moºností si kalendá° upravit podle svých p°edstav se v oblasti internetu za£alo objevovat moºná aº p°íli². Se sloºitostí t¥chto sluºeb, ale nar·stá moºnost výskytu chyb. Cílem této práce je vytvo°it internetovou aplikaci, pomocí které by si její uºivatel vytvo°il vlastní kalendá°. Cílem je také získat ty uºivatele, kte°í si podobný produkt vytvá°í pomocí kancelá°ských systém·, jejichº funkcionalita není na tuto tvorbu kalendá°· orientovaná. Uºivatel by si mohl nahrát vlastní fotograe a vytvo°it vlastní události.

•

Re²er²e existujících implementací, záv¥ry (kapitola 2)

•

Analýza a návrh °e²ení, p°íprava implementace (kapitola 3)

•

Vlastnosti aplikace po pilotní implementaci (kapitola 4)

•

Testování stránek s uºivateli, záv¥ry (kapitola 6)

•

Úprava implementace na základ¥ testování (kapitola 7)

1.2 Specikace cíle Aplikace bude webová, takºe její hlavní funkcionalita bude probíhat na serveru, který bude uºivateli poskytovat výsledky p°es prohlíºe£e internetu. Hlavními problémy bude zpracování fotograí a generování PDF soubor· podle nastavení uºivatele. Generování bude dynamické,

1

2

KAPITOLA 1. ÚVOD

tedy poºadovaná data uºivatel· se budou muset ukládat do databáze. Poºadovaného výsledku se bude moci dosáhnout r·znými zp·soby a p°i výb¥ru nov¥j²ích technologií tak bude moºné omezení pouºití webových prohlíºe£·.

Funk£ní poºadavky: •

P°ihla²ování k ú£tu.

•

Ukládání kalendá°· a PDF soubor·.

•

Nahrání vlastních fotograí z po£íta£e a jejich správa.

•

Moºnost t°íd¥ní fotograí do adresá°·.

•

Upravení formátu jednotlivých stran kalendá°e.

•

P°idání vlastních d·leºitých událostí, správa.

•

P°evod do PDF souboru pro moºnost tisku.

•

Moºnost úpravy vytvo°eného kalendá°e.

Nefunk£ní poºadavky: •

Nutný p°ístup k internetu.

•

Internetová aplikace spustitelná z webového klienta.

•

Podle pouºité technologie moºnost omezení prohlíºe£·.

Kapitola 2

Re²er²ní zpracování existujících implementací V této £ásti se zam¥°ím na jiº existující internetové aplikace, které nabízí tvorbu vlastního kalendá°e s moºností nahrávání vlastních fotograí jakoukoliv formou anebo jinou aplikaci zabývající se akciden£ním tiskem. Hlavním cílem by m¥l být pr·zkum nabízených sluºeb a zvlá²t¥ pak zp·sob jejich pouºití pro uºivatele. Na základ¥ t¥chto informací bych m¥l být schopen sestavit podobu své internetové aplikace.

2.1 lulu.com Zahrani£ní server, který jako internetový obchod nabízí knihy, eBooky, foto knihy. Uºivatel si m·ºe vytvo°it vlastní ro£enku, kucha°ku, svatební knihu. Jedna z mnoha sluºeb je tvorba vlastního kalendá°e. [7]

•

Výb¥r mezi dv¥ma velikostmi: Premium a Standard. Rozdíl v cen¥ a typu.

•

Strana s cenami za po£et kus·, popisy sluºeb a nástinem postupu tvorby.

•

Po na£tení aplikace se objeví výzva ke zvolení tématu. Z°ejm¥ se nem·ºe upravovat vlastní pozadí, fonty apod.

•

Objeví se okno, kde mám zvolit obrázky, se kterými budu dále pracovat. Mezi záloºkami jsou i moºnosti Flickr, Facebook, Photobucket a SmugMug. (2.1)

•

Status bar a dialogové okno, které nabízí moºnost sou£asn¥ s nahráváním pracovat na tvorb¥ kalendá°e.

•

Nelze zm¥nit rozsah, kalendá° je pouze ro£ní.

•

Státní svátky jdou zvolit pouze na n¥které státy. Z evropských jde pouze o francouzské, n¥mecké a anglické.

•

Svoje události mohu editovat nebo mazat.

3

4

KAPITOLA 2. REERNÍ ZPRACOVÁNÍ EXISTUJÍCÍCH IMPLEMENTACÍ

•

P°ehledné rozhraní pro tvorbu kalendá°e. Na první pohled je jasné, ºe v²echny volby lze libovoln¥ m¥nit.

•

Rozhraní s funkcí Drag and Drop.

•

Moºnost kliknutí do konkrétního dne a p°idání události.

•

Moºnost p°idání obrázku do kolonky dne. P°i tmavé fotograi je ²patn¥ viditelné £íslo. (2.2)

•

Funkce Undo / Rendo. (jeden krok)

•

Rozsáhlá nápov¥da k celé aplikaci.

•

Moºnost uloºení rozpracovaného projektu na sv·j prol po registraci na server.

•

Moºnost zve°ejn¥ní kalendá°e pro ostatní uºivatele. (public, private)

•

Náhled p°ed potvrzením tisku, platby a doru£ení.

Obrázek 2.1: Moºnosti nahrání fotek na Lulu.com.

Obrázek 2.2: Nedostate£n¥ odd¥lené dny, mizející £ísla pod obrázky na Lulu.com.

2.2. MYCALENDARMAKER.COM

5

2.2 mycalendarmaker.com Zahrani£ní server, který se specializuje p°ímo na tvorbu vlastního kalendá°e, který má být zdarma. Nabízí moºnost exportu do PDF, staºení a tisku. Na domácí stránce je slibována i jiná neº anglická lokalizace, ale není tomu tak. [8]

•

Stránky vyºadují registraci, jinak nelze v práci ani za£ít.

•

Následuje výb¥r typu kalendá°e. (trhací, A4 po m¥sících)

•

Výb¥r rozsahu kalendá°e v m¥sících. Rozsah tak není daný, jako tomu bylo u p°ede²lého webu.

•

Otev°e se první m¥síc, kde kaºdý den má 4 input pole pro vlastní události. Na stejné stránce je input le pro vloºení fotograe, kterou nelze nijak upravovat. (velikost, pozice apod.)

•

Vºdy se p°i p°echodu na dal²í m¥síc dlouho ukládají vloºená data. Uºivatel není informován o stavu zpracování.

•

Status bar není dynamický, uºivatel pouze ví, ºe má £ekat.

•

Aplikace uºivatele provede zdlouhavým postupem p°es kaºdý m¥síc.

•

Nelze nijak upravovat velikost polí dn· v kalendá°i.

•

V PDF se generují nadbyte£né prázdné kolonky dní, aby byl zachován rozsah. (2.3)

•

Na kaºdé stránce se vygeneruje reklama, v²ude ta samá. (2.3)

•

Podporována je pouze angli£tina. (2.4)

•

Týden za£íná ned¥lí, není jiné volby. (2.4)

Obrázek 2.3: Reklama a nadbyte£n¥ generovaný °ádek tabulky na mycalendarmaker.com.

6


Obrázek 2.4: Týden musí za£ínat ned¥lí a popisky musí být v angli£tin¥ na mycalendarmaker.com.

2.3 info.24print.eu/cze/ eský web, který nabízí tvorbu vlastního kalendá°e, fotoalba, fotograe, obrazu, plakátu, scrapy (tisk na plátno), pohlednice, letáku, vizitky a obálky. Stránky jsou i p°es velký obsah p°ehledné, díky záloºkovému menu, které barevn¥ rozli²uje jednotlivé odkazy. P°i tvorb¥ kalendá°e si mohu vybrat nást¥nný, stolní, kalendá°ík kapesní, ²kolní a scrap 30x30 cm. Kalendá° není zdarma. [9]

•

Uºivatel si m·ºe vybrat z n¥kolika formát·, vºdy ale na konkrétní £asové období.

•

Je nabízeno n¥kolik motiv· pro kalendá°e na vý²ku a ²í°ku.

•

Kaºdý m¥síc má sv·j prostor v podob¥ £tvere£ku s ikonou, slouºící k nahrání obrázku z po£íta£e. (2.5)

•

Pod obrázkem kaºdého m¥síce je ukazatel kvality fotograe. (2.6)

•

Kaºdou stranu lze upravovat. Po nahrání fotograe s ní lze libovoln¥ pohybovat po stránce, zv¥t²ovat a zmen²ovat, p°idávat upravovatelný text.

•

Fotograe lze mezi stránkami p°esouvat tla£ítky ²ipek u kaºdého £tvere£ku, ale není podporována funkce Drag and Drop.

•

Po opu²t¥ní stránky z·stane rozpracovaný kalendá° uloºený i s obrázky a to i v p°ípad¥, ºe uºivatel pracoval nep°ihlá²ený. (po 24 hodinách se vymaºe)

•

Pro celý proces vytvá°ení kalendá°e není registrace vyºadována.

•

Chybí funkce Drag and Drop. Práce je i tak jednoduchá a p°íjemná.

•

Uºivatel nemusí v·bec zjistit, ºe jsou jednotlivé stránky editovatelné. Tato skute£nost není nikde popsána ani nazna£ena.

•

P°i upravování jednotlivé strany v novém okn¥ je dynamický ukazatel kvality, který se m¥ní p°i úprav¥ velikosti fotograe.

•

Pro samotný nákup registrace vyºadována je.

•

Stránky nemají export do PDF, ale nákup p°es objednávku kus· na dodací adresu.

2.4. VLASTNI-KALENDAR.CZ/

7

Obrázek 2.5: Ukazatel kvality, p°íjemné rozhraní a snadná práce na 24print.eu.

Obrázek 2.6: Dynamický ukazatel kvality p°i úprav¥ konkrétní fotky.

2.4 vlastni-kalendar.cz/ Tento web je ur£en pouze pro tvorbu kalendá°e. Je zcela v £eském jazyce. Na domácí stránce je uºivatel vyzván k výb¥ru typu kalendá°e. V horní £ásti je p°esné £íslo letos vyti²t¥ných kalendá°·, ur£it¥ zajímá informace. [10]

•

Výb¥r mezi t°emi typy: 13 listový kalendá° na A4, Ro£ní stolní kalendá° a ro£ní dení£ek miminka.

•

Výb¥r z 11 motiv·,ale pouze dva jsou na ²í°ku.

•

Objeví se formulá°, kde má uºivatel vyplnit údaje jako formát list·, rok kalendá°e, zobrazení roku, font pro celý dokument, barvu (není uvedeno £eho a zda bude moºnost zm¥ny), p°idání svátk·, p°idání pozadí, roztaºení do okraj·. Dále je uºivatel povinen vyplnit sv·j email.

•

P°i tvorb¥ je obrazovka rozd¥lená na dva logické oddíly. Menu s jednotlivými m¥síci a úvodní stránkou, druhý blok je zobrazení konkrétního m¥síce.

•

V kalendá°i jsou upravovatelné dny a po zm¥n¥ se bu¬ka barevn¥ odli²í a tím zvýrazní od ostatních. P°i dlouhém popisku text nesedí v ráme£ku. Chyba se projevuje i po vygenerování do PDF. (2.7)

8


•

Fotograe lze pouze nahrávat z po£íta£e a nelze je jakkoliv upravovat.

•

Lze p°idat vlastní popisek k m¥síci a vlastní zápatí na kaºdou stranu.

•

Web nabízí náhled ve formátu PDF s nápisem DEMO zasahujícím do nahraných obrázk·.

•

PDF lze stáhnout bez nápisu DEMO po zaplacení p°es SMS, p°es sluºby PaySec, PayPal nebo p°evodem na ú£et.

•

Dokon£ený kalendá° lze nechat vytisknout u provozovatele stránek a zaslat na domácí adresu.

•

Video tutoriál tvorby kalendá°e a sekce £asto kladené dotazy. (FAQ)

Obrázek 2.7: Barevné rozli²ení a vlastní popisky,gracká chyba p°i dlouhém popisku na vlastni-kalendar.cz.

2.5 fotolab.cz/fotodarky/vizitky.html V sou£asnosti první výsledek p°i dotazu vlastní vizitky ve vyhledáva£i Google. Stránky mimo jiné nabízí tvorbu vlastní vizitky, podle p°edem daných návrh·. Ty jsou logicky rozd¥leny do kategorií Kv¥tiny, Vzor, Více a Pro podnikatele. Nejde o stránky s p°evodem nálního produktu do PDF, ale s objednávkou a zasláním nebo osobním odb¥rem zboºí na prodejn¥. [12]

•

Výb¥r z n¥kolika motiv·, ale kategorie Pro podnikatele neobsahuje ani jeden.

•

Jen malá £ást motiv· obsahuje prostor pro fotograi.

•

Editace vizitky je rozd¥lena na dva celky, nabídky pro editaci prvk· a dynamický náhled.

•

Náhled se automaticky p°ekreslí po krat²ím £asovém úseku, kdy se p°estane psát na klávesnici.

2.5. FOTOLAB.CZ/FOTODARKY/VIZITKY.HTML

•

9

Náhled obsahuje i vyhodnocení kvality fotograe, zde 3 úrovn¥. (Ideální, dobrá, nevhodná)

•

V²em nápis·m lze m¥nit barvu, velikost a druh písma (font).

•

Fotograi není moºné nijak gracky sladit se zbytkem designu.

•

Webová aplikace pracuje celá s JavaScriptem.

•

Neobjevil jsem nápov¥du nebo alespo¬ pomoc s postupem tvorby.

•

Dobrý a p°ehledný náhled produktu. (2.9)

•

N¥kolik tla£ítek v nabídkách pro editaci textu je neviditelných. Nap°íklad ComboBox nemá postranní ²ipku pro rozbalení menu, tak se jeví jako klasický vstup z klávesnice. (pozn.: testováno na více webových prohlíºe£ích), (2.8)

Obrázek 2.8: Do prostor kde je na pravém obrázku ikona B, bylo na levém obrázku kliknuto na webu fotolab.cz.

Obrázek 2.9: Náhled výsledného produktu na webu fotolab.cz.

10


2.6 vistaprint.cz/ Stránky, které mají podporu p°es 25 jazyk·. Nabízí tisk na propisky, p°es kalendá°e aº po tri£ka. Pro stálé zákazníky jsou k dispozici i produkty zdarma. [11]

•

Výb¥r z n¥kolika p°eddenovaných návrh·.

•

Moºnost nahrání fotek z Facebooku, Flickru, Picasy a z disku po£íta£e. (2.11)

•

K fotograím je moºné p°idat popisky.

•

Pozadí lze zm¥nit, ale pouze z vybraných témat z nabídky na webu.

•

Lze upravovat události jednotlivých dn· s moºnosti p°idání ikon z výb¥ru.

•

Uºivatel není nucen zadávat svoji emailovou adresu p°i objednávání zboºí.

•

Nápov¥da je rozsáhlá, ale p°i výb¥ru tak velkého mnoºství jazyk· pro práci pouze v angli£tin¥ nesta£í.

•

Rozhraní pro tvorbu je velice p°ehledné a jde zde op¥t o rozd¥lení do dvou celk·. Nabídky a náhled.

•

Obecn¥ je aplikace propracovaná, nabízí velké mnoºství funkcí, ale stále chybí v¥t²í volnost uºivatele.

•

Zákazník je pr·b¥ºn¥ informován o pouºití svých fotograí v kalendá°i, coº vysoce zvy²uje intuitivnost prost°edí. (2.10)

•

Fungující Drag and Drop pro p°i°azování fotograí.

2.7. OBECNÉ SHRNUTÍ A NÁVRHY

11

Obrázek 2.10: Informace o pouºitých fotograích na vistaprint.cz.

Obrázek 2.11: Zp·soby nahrávání fotograí a kvalitní informovanost uºivatele na vistaprint.cz.

2.7 Obecné shrnutí a návrhy Stránky, které nabízejí své sluºby zdarma, jsou vºdy nedotaºené nebo poskytují jen nízké moºnosti editace kalendá°e. V mnoha p°ípadech p°idávají i reklamu na kaºdou stranu výsledného PDF. (2.3) Také uºivatelské rozhraní nespl¬uje v mnoha p°ípadech ani základní standardy, nap°íklad podle Nielsenových heuristik. (2.8) Rozhraní bývá nep°ehledné, práce v n¥m zdlouhavá a nep°íjemná. Editace fotograe v¥t²inou zcela chybí a nemyslí se ani na rozli²ování fotograí na vý²ku a na ²í°ku. U placených aplikací jsem se setkával s p°íjemným uºivatelským rozhraním, dostate£nou nápov¥dou a spoustou funkcí, které ale uºivateli jistým zp·sobem ubírali na volnosti. (2.5) Vºdy jsem si mohl vybrat z mnoha vzhled· a návrh· kalendá°e (vizitky), ale nikde jsem se nesetkal s moºností si pozadí stránek upravit sám. Také editace text· u jednotlivých dní byla omezená na velikost a barvu. (2.7) Tyto stránky v¥t²inou lákají zákazníky s tím, ºe za 10 minut budou mít hotový a odeslaný kalendá° k tisku. Uº i to, vypovídá o nízkých moºnostech editace. Ve své práci bych se tedy m¥l rozhodn¥ vyhnout p°idávání prvk· do výsledného PDF, které uºivatel sám v rozhraní nep°idal. Stránky musí mít dostate£nou a nejlépe intuitivní nápov¥du. Rozhraní pro tvorbu musí být p°ehledné. Aplikaci podrobím test·m pouºitelnosti s £asovou rezervou na p°ípadné úpravy. Aplikace by m¥la dávat uºivateli ur£itou volnost, aby si

12


mohl s tvorbou kalendá°e vyhrát, ale zárove¬ nesmí nutit do zdlouhavých proces·. Zmi¬oval jsem rozli²ování fotograí na vý²ku a na ²í°ku. V p°ípad¥, ºe na stránku uºivatel p°idá fotograi na vý²ku, m¥l by mít moºnost p°idat je²t¥ druhou, aby se vyplnil prázdný prostor. Funkce Drag and Drop mi vºdy velice uleh£ila práci a obecn¥ napomáhá k p°ehlednosti rozhraní, do své práce ji tedy zkusím p°ipojit.

•

P°evod do PDF pouze toho, co uºivatel sám vytvo°il.

•

P°ehledné uºivatelské rozhraní dodrºující standardy.

•

Dostate£ná a intuitivní nápov¥da.

•

Tvorba by nem¥la být svazující.

•

Fotograe na vý²ku budou moci na jedné stran¥ být dv¥.

•

Funkce Drag and Drop.

Kapitola 3

Analýza a návrh °e²ení 3.1 Návrh Doprovod ke grackému návrhu v bodech. Odpovídající obrázky jsou 3.2, 3.3 a 3.4.

alternativní scéná°, moºnost volby. (Scéná° tvorby kalendá°e):

ALT -

1. P°ihlá²ení do systému. (a) ALT: Pokra£ování bez p°ihlá²ení. Skok na bod 3. (b) ALT: Registrace. Vytvo°ení ú£tu nového uºivatele. 2. Zobrazení uloºených kalendá°·. (a) ALT: Editace: Získání pot°ebných uloºených dat a pokra£ování editací.Skok na 7. (b) ALT: Vybrání moºnosti vytvo°ení nového kalendá°e. Skok na 3. 3. Vloºení a výb¥r moºností kalendá°e. (rok, po£et m¥síc·, první m¥síc, zobrazení úvodní a záv¥re£né strany, první den týdne, zobrazení £ísel týdn· a roku u názvu m¥síce) (a) ALT: Výb¥r p·vodního nastavení. Vede k obnovení údaj· v bod¥ 3. (b) ALT: Hotovo. Zpracování dat a pokra£ování bodem £íslo 4. 4. Nahrání fotek, které budou pouºity p°i tvorb¥ kalendá°e. (a) ALT: Nahrání fotek p°es sociální sí´ Facebook. (b) Autorizace p°ístupu p°ihlá²ení na FB povolení aplikace na Facebooku výb¥r alba a fotograí. Skok na 5. (c) ALT: Nahrání fotograí z po£íta£e. (Pomocí Drag and Drop pole nebo input le pole) Skok na 5. 5. Dynamický status bar. Fotograe se nahrají a zobrazí se jejich náhledy. (a) ALT: Nahrát dal²í. Skok na 4. (b) ALT: Pokra£ovat. Skok na 6.

13

14

KAPITOLA 3. ANALÝZA A NÁVRH EENÍ

6. P°i°azení fotograí konkrétním m¥síc·m. Funkce Drag and Drop pro umíst¥ní obrázk·. Fotograe na vý²ku budou 2 na jednom listu. (a) ALT: Nahrát dal²í. Skok na 4. (b) ALT: Pokra£ovat. Skok na 7. 7. Hlavní obrazovka pro tvorbu/editaci kalendá°e, rozd¥lená na 3 celky. (vlevo nabídky pro konkrétní stranu, uprost°ed náhled, vpravo moºnosti pro události nální operace) (a) ALT: P°edchozí/dal²í zobrazí p°edchozí nebo následující stranu. (b) ALT: Zp¥t na fotky. Skok na 6. (c) ALT: Tla£ítko P°idat zobrazí okno pro p°idání události pro konkrétní den. Skok na 8. (d) ALT: Tla£ítko Uloºit, které se zobrazí pouze p°ihlá²eným uºivatel·m, dovoluje uloºit rozpracovaný kalendá°. Zobrazí informativní hlá²ení o uloºení. (e) ALT: Tla£ítko Tisk do PDF vyvolá náhled, ze kterého je také moºné kalendá° p°evést do formátu PDF. (f ) ALT: Nápov¥da. Skok na 9. 8. Vytvo°ení nové události pro konkrétní den v m¥síci. Uºivatel vloºí datum, text a zvolí obrázek události. (dárek, dort, hv¥zdi£ka, smajlík apod.) (a) ALT: Vloºit. Zpracuje data a vrátí se k hlavní obrazovce. Skok na 7. (b) ALT: Storno zru²í akci. Skok na 7.

3.2 P°íprava implementace 3.2.1

Výb¥r technologií

Mým cílem vytvá°ení práce bylo nau£it se n¥co nového, poznat novou technologii postupu výroby webové aplikace. Dosud jsem stránky vytvá°el pomocí jazyka PHP. Vybral jsem si tedy skriptovací programovací jazyk PHP ve spojení s £eským Frameworkem Nette verze 2.0. Projekt byl i dobrou p°íleºitostí na vlastní k·ºi poznat n¥které prvky HTML5. V mém p°ípad¥ Drag and Drop a n¥které novinky stylování stránek. Tyto technologie je²t¥ nemají plnou podporu ve v²ech prohlíºe£ích a tak bylo nutné uºivatele o podpo°e jejich webového prohlíºe£e informovat. K tomu dopomohla knihovna Modernizr, vytvo°ená práv¥ pro tyto ú£ely.

3.2.2

Jazyk PHP

Jde o skriptovací programovací jazyk, ur£ený p°edev²ím pro vytvá°ení dynamických internetových stránek a aplikací, ale lze ho pouºít i k tvorb¥ desktopových aplikací. Skripty jsou provád¥ny na stran¥ serveru s výpo£etním modulem PHP, který generuje poºadované webové stránky p°ená²ené ke klientovi.

3.2. PÍPRAVA IMPLEMENTACE

15

Za tv·rce jazyka je povaºován Rasmus Lerdorf, který si jeho základ napsal v jazyce Perl, kdyº si vytvá°el nástroj pro svoji domovskou internetovou stránku v roce 1995. Odsud vznikla zkratka PHP (Personal Home Page), která se dnes vykládá jako Hypertext Preprocessor. Poslední stabilní verze vydaná 1. b°ezna 2012 má ozna£ení 5.4.0. [1]

3.2.3

Nette framework

Tento nástroj pro vytvá°ení webových aplikací v poslední stabilní verzi 2.0 pracuje práv¥ s PHP 5. Framework mi práci velice uleh£il a mohl jsem se tak více v¥novat vývoji aplikace. Webové aplikace se p°i jeho pouºití stanou bezpe£n¥j²í, protoºe °e²í bezpe£ností problémy, na které se zapomíná, velice elegantní formou. [2] Framework p°ichází s technologií Context-aware escaping, která odstra¬uje nebezpe£í neo²et°ených vstup·, takzvaného Cross Site scriptingu. Útok·m Cross-Site Request Forgery s pouºitím Nette lze zabránit p°idáním jediného °ádku k formulá°·m. URL a stejn¥ tak útoky na session jsou °e²eny zcela automaticky, vývojá° nemusí nastavovat a o²et°ovat v·bec nic. Nette vychází vst°íc vývojá°·m svojí takzvanou lad¥nkou. P°i vytvá°ení aplikace na lokálním serveru má programátor dobrý p°ehled o vyuºití pam¥ti, rychlosti dotazu a vykonaných dotazech oproti databázi. (3.1) Do Debbuger Baru lze p°idávat i dal²í panely.

Obrázek 3.1: Debbuger Bar.

Framework vyuºívá architekturu MVP (Model-View-Presenter), která se velice podobá architektu°e MVC (Model-View-Controler). Hlavní rozdíl je u Presenteru, který se chová jako prost°edník a jeho úkolem je volat model a výsledky p°edávat ²ablonám pro view. Nap°íklad komunikace s databází se tak velice zleh£uje. P°i vytvá°ení modelu se vytvo°í pro jednu databázovou tabulku jedna t°ída, která jí bude reprezentovat. T°ída pot°ebuje pouze název tabulky a objekt typu Connection, který zajistí p°ipojení k databázi. Tyto t°ídy se dále nastaví v souboru cong.neon a zbytek ud¥lá Nette za vývojá°e sám. P°íklad databázového dotazu v presenteru. $ t h i s −>t e m p l a t e −>t a s k s = $ t h i s −>c o n t e x t −>c r e a t e T a s k s ( )

−>w h e r e ( a r r a y ( ' done '

=>

f a l s e ))−> o r d e r ( ' c r e a t e d

ASC ' ) ;

Prom¥nná task se vytvo°í pro ²ablonu (template), ve které se dá pouºít pomocí Latte makra upravit její zobrazení, která jsou v Nette podporována. Protoºe jsou v²echny modely obsaºeny v kontejneru p°ístupném p°es atribut context, vytvo°í se zavoláním create() nad objektem kontejneru. Dále se vytvá°í dotaz °et¥zením funkcí. Podporovány jsou tém¥° v²echny aspekty jazyka SQL. V p°íkladu vý²e vytvo°íme vzestupn¥ se°azený výsledek z tabulky task, kde sloupce done, odpovídají hodnot¥ false. Výsledkem bude pole, které se dá jednodu²e vypsat v ²ablon¥, pomocí makra foreach.

16


3.2.4

Drag and Drop a HTML5

Bez moºností HTML5 bylo vytvo°ení rozhraní pro p°etahování prvk· v rámci stránky velice sloºité. Prvku, který mohl být p°etahován, se umoº¬ovalo reagovat na za£átek akce poslucha£em na událost. P°i samotném taºení se sledoval pohyb my²i a upravovala se pozice prvku nebo jeho klonu. P°i pu²t¥ní tla£ítka my²i se kontrolovala správná pozice kurzoru a aº poté se vyhodnotila následující akce. S HTML5 je to podstatn¥ jednodu²²í. Element·m, které mohou být p°etahovány, nastavíme v HTML atribut draggable na hodnotu true a denujeme poslucha£e dragStart a dragEnd. P°i za£átku taºení denujeme p°ená²ená data a cílové oblasti denujeme akci po ukon£ení taºení. Asi nejv¥t²í problém je ten, ºe k p°etahování prvk· na stránce p°istupuje kaºdý prohlíºe£ jinak. I tomu se dá zabránit, nap°íklad pomocí p°íkazu preventDefault(). Navíc jsou podporovány i dal²í poslucha£e.

•

DragEnter událost vzniká na cílovém prvku taºení ve chvíli, kdy se nad n¥j taºený prvek dostane.

•

DragLeave vzniká p°i opu²t¥ní cílového prvku p°i taºení.

•

Drop vzniká na prvku, na kterém se taºení ukon£ilo.

•

DragOver událost uvnit° cílového prvku p°i taºení.

S HTML5 a CSS3 p°ichází nové moºnosti kaskádových styl·. Ve své práci vyuºívám vlastnost border-radius, která zaoblí rohy u blokových prvk·, nap°íklad typu div. V minulosti se zaoblených roh· nedalo docílit jinak, neº umíst¥ním vhodných obrázk· na správné pozice. [4] Dal²ím novým grackým prvek, který nahrazuje nutnost obrázk· na webu je vytvá°ení takzvaných gradientních pozadí. Jedná se o pozvolné p°echody mezi barvami. P°echodu se dá nastavit v¥t²í po£et barev specikovaných funkcí rgb a sm¥r.

3.2.5

TCPDF

Knihovna TCPDF vytvá°í soubory PDF pomocí jazyka PHP. U této knihovny se mi jako u jediné poda°ilo zprovoznit podporu £eského jazyka, coº rozhodlo o jejím vyuºití v mém projektu. Její pouºití je velice jednoduché. Na za£átku PHP souboru, ve kterém chceme generování souboru PDF realizovat, p°ipojíme jeden soubor PHP pro specikaci pouºitého jazyka a druhý obsahující funkce knihovny. [3] Knihovna má velké mnoºství rozmanitých funkcí, u kterých je mnoho nastavitelných parametr·. TCPDF se od ostatních knihoven li²í také podporou HTML tag·, které si p°ekládá do jazyka, kterému rozumí. Podporuje také kaskádové styly aº na poslední novinky, které nelze vytvo°it ani pouºitím p°íkaz· knihovny. HTML podporu knihovny jsem pouºil p°i vytvá°ení tabulek m¥síc·. Výsledný soubor se m·ºe nechat uloºit do konkrétního adresá°e, zobrazit v novém panelu prohlíºe£e nebo se m·ºe vynutit jeho staºení. Protoºe je generování náro£ná £innost pro server, vºdy uºivatelem vytvo°ený soubor ukládám na serveru a pozd¥ji ho zobrazuji klasickým odkazem. P°íklad pouºití knihovny:

3.3. ANALÝZA DATABÁZE

17

$ p d f −>AddPage ( ) ; $ p d f −>S e t F o n t ( ' f r e e s e r i f ' , //

nastavi

font ,

$ p d f −>writeHTMLCell ( 0 , //

3.2.6

vytiskne

'B' ,

text

' ' ,

bunku

' ' , s

20);

bude

tucny

a

10 ,

$txt ,

0,

velikosti 0,

0,

20

true ,

'C ' ,

true ) ;

$ t x t HTML obsahem

Modernizr

Modernizr

1 je malá knihovna napsaná v jazyce JavaScript, která detekuje podporu nových

webových technologií v prohlíºe£i. Základní pouºití spo£ívá v rozhodnutí p°ipojení externího souboru na základ¥ detekce podpory konkrétní vlastností. Aplikace se pak snadno dá optimalizovat i pro star²í prohlíºe£e, které nepodporují vybrané prvky technologií HTML5 nebo CSS3. Protoºe moje aplikace staví na technologii Drag and Drop, která je sou£ástí práv¥ HTML5, pouºil jsem zobrazení hlá²ení o podpo°e prohlíºe£e. [16]

3.3 Analýza databáze Databáze bude obsahovat tabulku registrovaných uºivatel·, ponese jejich p°ihla²ovací jméno, email a heslo v ²ifrovaném tvaru jedním z algoritm· SHA-2. Pro vy²²í bezpe£nost pouºiji takzvaného solení, kdy se k hashovanému heslu na vstup p°idá n¥jaký dal²í °et¥zec. P°idávaný °et¥zec by m¥l být pro kaºdého uºivatele jiný, pro stejné heslo tak bude i hash u kaºdého uºivatele jiný. [14] [15] Dal²í tabulka bude obsahovat v²echny kalendá°e, vytvo°ené uºivateli. Pro jejich rozli²ování bude mít sloupec id uºivatele, sloupec nesoucí unixový £as z doby vytvo°ení kalendá°e, typ a rok konkrétního kalendá°e. Uºivatel bude mít moºnost tvorbu kalendá°e po ur£itých krocích opou²t¥t a tak bude tabulka obsahovat i sloupec se sou£asným stavem kalendá°e. Uºivatel bude moci nahrávat fotograe, takºe databáze bude obsahovat tabulku s informacemi o fotograích. Dal²í tabulky budou slouºit pro ukládání informací o vytvo°ených pdf souborech, vytvo°ených uºivatelských ro£ních událostech, nastavení konkrétního kalendá°e pro generování pdf a p°i°azení fotograí jednotlivým m¥síc·m. Vytvo°ím si je²t¥ dal²í tabulku, která ponese moje úkoly, kde webovou funkci jí p°íslu²nou budu moci zobrazit pouze já s konkrétním uºivatelským id. Návrh rozsahu databáze:

• calendar • user

v²echny kalendá°e (typ, rok, stav, id uºivatele)

tabulka uºivatel· (username, heslo, email, jméno)

• event

uºivatelské události (m¥síc, den, obrázek, id uºivatele)

• photo

nahrané fotograe (p·vodní název, název v aplikaci, id uºivatele)

• directory • pdf 1

adresá°e uºivatel· (název, barva, po£et, id uºivatele)

vytvo°ené soubory PDF (jméno, id kalendá°e, vytvo°eno, id uºivatele)

http://modernizr.com/

18


• rocni

typ ro£ních kalendá°· (m¥síce pro p°i°azení fotograí, id uºivatele)

• skolni

typ ²kolních kalendá°· (m¥síce pro fotograe, id uºivatele)

• setting

nastavení vzhledu (pouºít události, pouºít rok, pouºít pozadí, pouºít svátky

eské republiky,. . . )

• todolist

úkoly ke spln¥ní (úkol, £as vloºení, zna£ka)

Pro implementaci bude nejjednodu²²í pouºít cizích klí£·, proto vyuºiji úloºi²t¥ InnoDB, které je podporuje na rozdíl od MyISAM. Budu pracovat v databázovém systému MySQL, pomocí internetového prost°edí MyPHPadmin pro správu. Diagram je sou£ástí p°ílohy 9.1.

Obrázek 3.2: Pilotní návrh rozsahu aplikace. (£ást 1.)

3.3. ANALÝZA DATABÁZE


19

20



Kapitola 4

Vlastnosti a funkcionalita aplikace V této kapitole popí²u základní vlastnosti a funkce aplikace. Pro lep²í orientaci kaºdá podkapitola obsahuje tabulku s vypsanými odpovídajícími presentery a ²ablonami. D·leºité je také automaticky tvo°ené URL kaºdého presenteru.

4.1 Registrace a p°ihlá²ení nového uºivatele Pro p°ístup k aplikaci je nutné se registrovat. V návrhu jsem se zmi¬oval o moºnosti p°ístupu nep°ihlá²ených uºivatel·, coº bych zkusil °e²it pomocí HTML5 storage, který dovoluje u klienta ukládat výrazn¥ v¥t²í objemy dat. Protoºe je registrce vyºadována, tuto funkci aplikace nenabízí, ale je jejím moºným roz²í°ením. Registrace vyºaduje zadání jména, pomocí kterého se bude uºivatel p°ihla²ovat. Aplikace kontroluje existenci a p°ípadnou shodu. Dále je nutné dvakrát zadat heslo, které musí mít alespo¬ 6 znak· a musí obsahovat £íslici. Vkládá se i email, pro dal²í moºné roz²í°ení informování uºivatele. Email se také kontroluje oproti existujícím záznam·m a p°ípadná shoda vyvolá chybu. Posledním údajem je celé jméno uºivatele, které se po p°ihlá²ení pouze zobrazuje jako informativní prvek na uºivatelském panelu. Moºným výsledkem vypln¥ní a odeslání formulá°e je vyvolání chybového hlá²ení, po kterém z·stanou vypln¥né údaje ve formulá°i (krom¥ hesel). Správné vypln¥ní údaj·, automatické vytvo°ení adresá°ové struktury a vytvo°ení registra£ního údaje bez chyby se projeví p°esm¥rováním na domácí stránku obsahující p°ihla²ovací formulá° a zobrazením informativního hlá²ení o úsp¥chu. Následující tabulka ukazuje strukturu aplikace na internetu. 4.1

Akce

Presenter

ablona (latte)

URL 1

Registrace:

RegisterPresenter.php

Register/register.latte

root/register/register

P°ihlá²ení:

SignPresenter.php

Sign/in.latte

root/sign/in

Tabulka 4.1: Registrace a p°ihlá²ení nového uºivatele

1

kde root je http://ley.felk.cvut.cz/pdfcalendar/

21

22

KAPITOLA 4. VLASTNOSTI A FUNKCIONALITA APLIKACE

4.2 Správa uºivatelského ú£tu Následující funkce aplikace v£etn¥ této vyºadují p°ihlá²ení. Uºivatel má moºnost si zm¥nit heslo nebo jméno, které se zobrazuje v uºivatelském panelu. Práv¥ vedle jména se nachází odkaz Správa ú£tu, pod kterým se funkce skrývá. Stránka obsahuje dva jednoduché formulá°e, kde první slouºí k vytvo°ení nového hesla a druhý ke zm¥n¥ jména. Heslo má stejná omezení jako p°i registraci, tedy minimální po£et ²esti znak· s minimáln¥ jednou £íslicí. 4.2

Akce

Presenter

ablona (latte)

URL 2

Zm¥na hesla, jména:

UserPresenter.php

User/password.latte

root/user/password

Tabulka 4.2: Správa uºivatelského ú£tu

4.3 Nahrávání, otá£ení a mazání fotograí, správa adresá°· Uºivatel má moºnost si nahrát aº 22 fotograí. Velikost jedné fotograe je omezena velikostí 4 MB. Nahrané fotograe bude p°i vytvá°ení kalendá°e p°i°azovat k jednotlivým m¥síc·m. Stránku, kde se nachází formulá° pro nahrání fotograí, lze nalézt v hlavním menu po levé stran¥ pod odkazem Moje obrázky. Formulá° obsahuje jeden vstup pro výb¥r obrázk· klasickým zp·sobem po otev°ení okna s pr·zkumníkem. Po výb¥ru fotograí se na stránce zobrazí výpis s názvy, typy a velikostí fotograí a informací o nutnosti pokra£ovat nahráním fotograí. Uºivatel má moºnost vytvo°it adresá°e a nahrávané obrázky spravovat v nich. Mezi adresá°i lze fotograe voln¥ p°esouvat. Adresá°e lze p°ejmenovat, mazat s obsahem i bez obsahu, kdy se obsaºené fotograe p°esunou mezi neza°azené. Po zpracování obrázk· na stran¥ serveru se objeví pod formulá°em a uºivatel je o úsp¥chu informován hlá²kou. Fotograe lze otá£et v obou sm¥rech. U kaºdého nahraného obrázku jsou p°íslu²né ²ipky pro provedení operace oto£ení. Fotograi lze p°esunout mezi adresá°i nebo odstranit. P°esm¥ruje se na speciální stránku s náhledem fotograe a dotazem, zda si je uºivatel svoji akcí jistý. 4.3

Akce Správa

Presenter

ablona (latte)

URL

a

UploadPresenter.php

Upload/default.latte

root/upload/

adre-

UploadPresenter.php

Upload/rename.latte

root/upload/-

UploadPresenter.php

Upload/move.latte

fotograí

adresá°·: P°ejmenování sá°e:

rename?directory

P°esun fotograe:

root/upload/move?item

Tabulka 4.3: Nahrávání, otá£ení a mazání fotograí, správa adresá°·

2


4.4. VLASTNÍ UDÁLOSTI UIVATELE

23

4.4 Vlastní události uºivatele Stránky dovolují vytvo°it vlastní událost, která se bude v kalendá°i u konkrétního dne zobrazovat. P°i ukládání podrobností o kalendá°i má uºivatel moºnost svoje vytvo°ené události do vytvá°eného PDF nevloºit. Na stránce s událostmi je formulá°, slouºící pro jejich tvorbu. Povinnými údaji jsou název ve tvaru, ve kterém bude vloºen do kalendá°e, dále m¥síc a den události. Nepovinn¥ lze p°i°adit obrázek (4.1) a ozna£it událost za narozeniny. Události s tímto ozna£ením se bude automaticky vypo£ítávat v¥k oslavence, který se bude zobrazovat u názvu. Pod formulá°em je p°ehledný výpis v²ech záznam·, které uºivatel vytvo°il. Jeden den m·ºe mít pouze jednu událost a tak je moºné záznamy mazat. Zde by bylo vhodným roz²í°ením p°idání moºnosti více událostí v jeden den a pozd¥j²í specikace vzhledu kolonky dne událostí. 4.4

Obrázek 4.1: Volitelné obrázky události. Ukázka tooltipu, který se zobrazí u kurzoru po jeho zji²t¥ní na prvku INFO.

Akce

Presenter

ablona (latte)

URL 3

Správa událostí:

EventPresenter.php

Event/default.latte

root/event/

Tabulka 4.4: Vlastní události uºivatele

4.5 Vytvo°ení kalendá°e Samotná tvorba je rozd¥lena na n¥kolik krok·, kdy se po úsp¥²ném pr·chodu kteréhokoliv zm¥ní stav kalendá°e. Uºivatel se tak m·ºe vrátit k rozpracovanému kalendá°i nebo p°ed samotným generováním PDF p°idat dal²í události. Po vytvo°ení nálního souboru je moºné kalendá° upravit a vytvo°it dal²í PDF soubor. Nyní jiº k samotné tvorb¥. První krokem je vypln¥ní prvních informací o kalendá°i do formulá°e. Jde o název, který je pouze informativního charakteru pro p°ehled na domácí stránce. Nutné je zvolit typ kalendá°e. V sou£asnosti je moºné vytvo°it ro£ní kalendá° o 12 m¥sících. Moºným roz²í°ením 3


24

KAPITOLA 4. VLASTNOSTI A FUNKCIONALITA APLIKACE

je p°idání ²kolního desetim¥sí£ního kalendá°e nebo kalendá°e s volitelným rozsahem m¥síc·. Posledním údajem je rok. Zde je pouze nutné vyplnit poºadované informace a o úsp¥chu je uºivatel informován p°esm¥rováním na dal²í krok s informativním hlá²ením o úsp¥chu. Ve druhém kroku je tv·rce kalendá°e vyzván k p°etaºení fotograí jednotlivým m¥síc·m. Na stránce je dvanáct polí, kaºdé pro jeden m¥síc a pod nimi jsou náhledy v²ech fotograí náleºících konkrétnímu uºivateli. P°i taºení se fotograe zpr·hlední a její klon je vid¥t pod kurzorem. Po poloºení obrázku na konkrétní m¥síc se v kolonce náleºící m¥síci zobrazí náhled a u obrázku ze seznamu pod m¥síci se zobrazí zelená zna£ka informující o pouºití fotograe. Kdyº se k m¥síci, který jiº obrázek má, p°i°adí jiná fotograe, upraví se informativní zelené zna£ky, aby odpovídaly skute£nosti. P°i°azenou fotograi lze i odstranit k°íºkem u náhledu. Kaºdý m¥síc musí mít p°i°azenou fotograi, aby bylo moºné pokra£ovat. Kdyº n¥který z·stane bez obrázku, zobrazí se informativní hlá²ka chybového charakteru a jiº p°i°azené fotograe z·stanou u svých m¥síc·. T°etí krok umoº¬uje nastavit podrobnosti týkající se nálního vzhledu kalendá°e. Uºivatel se práv¥ zde rozhodne, zda se p°i generování PDF pouºijí jeho vloºené události, zda se u názv· m¥síc· bude zobrazovat rok nebo jestli se budou víkendy od v²edních dní odli²ovat podbarvením. Dále má moºnost pouºít svátky eské republiky, které si m·ºe pro daný rok zobrazit v nápov¥d¥. Dal²ím prvkem je výb¥r pozadí stránek. K výb¥ru jsou t°i r·zná pozadí. Zde se nabízí dal²í moºnost roz²í°ení, kdy by si uºivatel mohl nahrát vlastní vytvo°enou graku v podob¥ obrázku, který by se na pozadí pouºil. Na této stránce si lze zobrazit náhled prvního m¥síce pro r·zná pozadí. V prohlíºe£i se otev°e nový panel s jednou stranou PDF souboru. Po uloºení nastavení se p°esm¥ruje na dal²í stánku, která má spí²e informativní charakter. Zobrazuje kaºdý m¥síc s p°i°azenou fotograí a zobrazuje po£et dní a první den v týdnu kaºdého m¥síce. Z této stránky si jiº lze vytvo°it PDF soubor. 4.5

Akce

Presenter

ablona (latte)

URL 4

1) první info

FirstInfoPresenter.php

FirstInfo/default.latte

root/rst-info/

2) p°i°azení fotek

CreatePresenter.php

Create/default.latte

root/create/

3) nální podoba

RocniSettings-

RocniSettings/-

root/rocni-

Presenter.php

default.latte

settings/

Tabulka 4.5: Vytvo°ení kalendá°e

4.6 Vytvo°ení PDF souboru Vytvo°it PDF si uºivatel m·ºe ze stránky s podrobnostmi o kalendá°i nebo na domácí stránce obsahující seznam kalendá°·. Následkem bude vytvo°ení souboru, který se uloºí na serveru, takºe jeho smazání nemá vliv na kalendá° ve webové podob¥ a naopak. U kaºdého kalendá°e lze m¥nit podrobnosti vzhledu a vygenerovat nový soubor PDF. O vytvo°ení PDF se stará presenter TryPdfPresenter.php.

4


Kapitola 5

Pilotní implementace Název kapitoly obsahuje slovo pilotní a to proto, ºe popisuje strukturu a vlastnosti aplikace p°ed testováním s uºivateli. Po testování (kapitola 6) se implementace zm¥nila, av²ak charakter práce z·stal zachován. Logika se zm¥nila jen velmi málo, ale uºivatelské rozhraní, které se implementace týká také, doznalo n¥kolika zm¥n, které popisuji v kapitole Úprava testování. (kapitola 7)

5.1 Adresá°ová struktura Jak jsem se jiº zmi¬oval, framework Nette podporuje MVP (Model-View-Presenter) architekturu. Aplikace tedy má n¥jaké modely, které reprezentují kaºdý jednu tabulku v databázi a dále má kaºdá stránka sv·j presenter a jemu odpovídající ²ablonu nebo také template. Adresá°ová struktura celého projektu je následující:

• app Obsahuje hlavní logiku aplikace, modely, presentery, ²ablony a zavád¥jící soubor bootstrap.php.

cong, models, presenters, templates (obrázek 5.1)

• libs

Adresá° ur£ený výhradn¥ podp·rným knihovnám. V mém p°ípad¥ soubory fra-

meworku Nette a knihovny pro tvorbu PDF soubor·, TCPDF.

• log

Aplikace do toho adresá°e ukládá záznamy nap°íklad o chybách a výjimkách.

• temp Zde se ukládají do£asné soubory, nap°íklad cache, ale také zm¥ny v samotném frameworku. Proto je po zm¥nách ob£as nutné tento adresá° promazat.

• test

Adresá° slouºí pro ukládání unit test·.

• www

Jediná sloºka p°ístupná z webu, vystupuje jako root webového serveru, takºe

obsahuje index.php, který zavádí pot°ebné soubory.

Postup celé inicializace je tedy následující. Server si na£te soubor index.php z ko°enového adresá°e www, který pouze obsahuje denice nejd·leºit¥j²ích adresá°· (zmín¥ných vý²e) a

25

26

KAPITOLA 5. PILOTNÍ IMPLEMENTACE

cestu k souboru bootstrap.php. Ten p°edstavuje nejhlavn¥j²í konguraci aplikace. Na£ítá soubory Nette a konguraci databáze, která se primárn¥ vypl¬uje do souboru cong/cong.neon. Soubor také nastavuje routování, coº je mechanismus, který se stará o správný p°eklad URL adresy na vnit°ní logiku aplikace a naopak. To také dovoluje pouºití hezkých URL adres. Kongurace PHP také vyºaduje zapnutý mod rewrite. Routováním také aplikaci sd¥líme, do kterého presenteru se má na£íst p°i spu²t¥ní aplikace na webu. V mém p°ípad¥ jde o presenter Homepage, template default.

Obrázek 5.1: Adresá° app obsahující nejd·leºit¥j²í t°ídy.

Soubor @layout.latte je jakýmsi hlavním indexem pro HTML. Obsahuje hlavní rozd¥lení stránky z hlediska blok·, nap°íklad div, a pomocí p°íkaz· include p°ipojuje kusy kódu ostatních ²ablon latte. Také zobrazí naviga£ní menu, pokud bude uºivatel p°ihlá²ený v systému.

5.2. FORMULÁE

27

5.2 Formulá°e Velká £ást aplikace pracuje s formulá°i. Popí²i nap°íklad tvorbu formulá°e pro vkládání událostí, který obsahuje v¥t²inu prvk·. Zkrácen¥: use

N e t t e \ A p p l i c a t i o n \ UI \Form ;

protected

function

createComponentEventForm ( )

{ $ f o r m = new Form ( ) ; $ f o r m −>a d d P r o t e c t i o n ( ' V y p r s e l odeslete

prosim

formular

$ f o r m −>addText ( ' eventName ' , −>a d d R u l e ( Form : : MAX_LENGTH, %d

ochranny

jeste

znaku . ' ,

casovy

limit ,

jednou ' ) ;

' Nova ' Nazev

udalost : ' , udalosti

25) muze

mit

nanejvys

14)

−>a d d R u l e ( Form : : FILLED , ' J e n u t n e z a d a t n a z e v u d a l o s t i . ' ) ; $ f o r m −>addCheckbox ( ' c h e c k ' , ' N a r o z e n i n y ? ' ) ; $ f o r m −>addText ( ' b i r t h Y e a r ' , ' Rok n a r o z e n i : ' , 1 2 ) −>a d d C o n d i t i o n O n ( $ f o r m [ ' c h e c k ' ] , Form : : EQUAL, TRUE) −>a d d R u l e ( Form : : FILLED , ' Rok n a r o z e n i m u s i b y t v y p l n e n . N e c h c e t e − l i dynamicky v y p o c i t a v a t vek , z r u s t e p o l o z k u n a r o z e n i n y . −>a d d R u l e ( Form : : RANGE, ' Z a d e j t e p l a t n y r o k . ' , a r r a y ( 0 , 2 0 5 0 ) ) −>a d d R u l e ( Form : : INTEGER, ' Rok n a r o z e n i m u s i b y t c i s l o . ' ) ;

')

... $ f o r m −>addSubmit ( ' sub ' , $ f o r m −>o n S u c c e s s [ ] return

' Ulozit ' ) ;

= callback ( $this ,

' eventFormSubmitted ' ) ;

$form ;

} Aby se mohlo vyuºít volání new Form(), musí se na za£átku souboru vyuºít deklarace, tedy use Nette/Application/UI/Form. Funkce createComponentEventForm() je speciální tovární funkcí na komponenty. Kdyº n¥jak poºádám o instanci komponenty EventForm(), presenter si v p°ípad¥, ºe komponenta je²t¥ není vytvo°ena, zavolá práv¥ tuto funkci. Funkce je tovární funkcí a ty jsou volány presentery, které se k nim musí dostat, proto je protected. ádek s addProtection °e²í ochranu proti CSRF útok·m. Pro p°idání klasického textového vstupu od uºivatele vyuºívám addText s n¥kterými pravidly, nap°íklad addRule s hodnotou Form::FILLED sám zajistí, ºe bude hodnota na uºivateli vyºadována. Framework m·ºe kontrolu provést i u klienta za pomoci JavaScriptového souboru netteForms. Dal²í zajímavostí je napojování prvk· na sebe. V tomto formulá°i jsem pouºil checkbox, který kdyº má logickou hodnotu TRUE, tak dal²í prvek je povinné vyplnit. Této funkcionality lze docílit pouºitím addCondition. Formulá°e podporují automatické kontroly za pomocí dal²ích hodnot, nap°íklad RANGE zjistí, zda je vloºená hodnota v poºadovaném £íselném rozsahu a dále INTEGER zji²úje, jestli je hodnota celé £íslo. Obsluhu úsp¥²n¥ odeslaného formulá°e vyvoláme pomocí události onSuccess, která °íká, ºe se má vykonat metoda eventFormSubmitted z objektu this, tedy z aktuálního presenteru. Po odeslání, kontroluji zmín¥nou funkcí existenci události s poºadovaným dnem, protoºe pro

28


jeden den m·ºe mít uºivatel vytvo°enou pouze jednu událost. Zde bych mohl vytvo°it dal²í roz²í°ení. Uºivatel by si mohl upravovat jednotlivé dny a ur£ovat, která událost se vykreslí ve výsledném PDF souboru. Metoda dále vytvo°í záznam v databázi, vytvo°í informativní hlá²ku a p°esm¥ruje na stránku s událostmi, £ímº se zamezí op¥tovnému odeslání hodnot po obnovení stránky. Formulá°ové prvky na stránce m·ºu zobrazit bu¤ pomocí jednoduchého p°íkazu echo form, coº se hodí hlavn¥ p°i pouºití stejného formulá°e vícekrát nebo si m·ºu pomocí ²ablonovacího systému latte sám zvolit jeho vzhled. V prvním p°ípad¥ se prvky vykreslí automaticky do HTML tabulky i s danými styly, které si m·ºu pomocí kaskádových styl· upravit dle svého. Já volil druhý zp·sob vykreslení pomocí ²ablony. ást kódu pak m·ºe vypadat nap°íklad takto: { form

even tForm }

{ control
$form

errors }

c l a s s =" p a i r ">

{ label

eventName

/}

c l a s s =" i n p u t ">{ i n p u t

c l a s s =" t o o l t i p "

<s p a n
a u t o f o c u s => TRUE}

h r e f ="#">INFO

c l a s s ="c u s t o m

h e l p ">

s r c ="{ $ b a s e P a t h }/ i m a g e s / H e l p . png "

w i d t h ="48" bude

a l t ="H e l p "

h e i g h t ="48"

c l a s s ="png " />

<em>I n f o Nazev tvaru

eventName ,

vlozen

udalosti do

zvolte

co

nejkratsi .

V zadanem

k a l e n d a r e .

...
c l a s s =" p a i r ">

c l a s s =" i n p u t ">{ i n p u t

s u b }

{/ f o r m }

Vytvo°ená tovární komponenta má automaticky denované jméno, pomocí kterého také komponentu v ²ablon¥ volám. Výhodou vykreslování pomocí ²ablony je, ºe si mohu sám zvolit, kde se bude jaký prvek vykreslovat, jaký bude mít styl, a pop°ípad¥ mohu doplnit dal²í elementy. Zde jsem pouºil specikaci vypisování chyb formulá°e, které odchytávám v presenteru pomocí control form errors. Zmi¬oval jsem pouºití takzvaných tooltip·. Prvek span vykresluji na absolutní pozici pomocí kaskádových styl· po zji²t¥ní kurzoru na textu. V kódu je také vid¥t pouºití ²ablonovacího systému latte. Nap°íklad prom¥nná basePath, kterou pouºívám u vykreslení obrázku, automaticky obsahuje cestu ke ko°enovému adresá°i na serveru, tedy adresá°i www. P°i psaní formulá°· pomocí Nette jsem se tedy vyhnul nutnosti ru£ního psaní dvojí validace na stran¥ serveru i klienta. Automaticky je také postaráno o bezpe£nost p°i jejich zpracovávání a odesílání. Ov¥°uje se validita vstup·, v¥rohodnost poloºek vybraných v select boxech a také se ze vstup· odstra¬ují kontrolní znaky. Framework myslí na ochranu p°ed útoky Cross Site Scripting a Cross Site Request Forgery.

5.3. DRAG AND DROP S HTML5

29

5.3 Drag and Drop s HTML5 Tato technologie je hlavn¥ JavaScriptovou záleºitostí, která je pln¥ funk£ní pouze na webovém prohlíºe£i Google Chrome a slu²nou podporu má i Mozilla Firefox v posledních verzích. Jist¥ je spoustu dal²ích prohlíºe£·, které se s tímto prvkem HTML5 vypo°ádají, nap°íklad Opera. Protoºe práci povaºuji za studijní, optimalizací jsem se prakticky také nezabýval. Vhodným roz²í°ením by tedy byla alternativa za tento prvek pro ostatní prohlíºe£e, nap°íklad bych mohl k jednotlivým m¥síc·m p°i°adit select box. [5] Nejprve je nutné denovat, které prvky budou mít vlastnost p°etahování po stránce povolenou. Prohlíºe£e mají pro n¥které prvky tuto vlastnost standardn¥. Jde nap°íklad o obrázky a ozna£ený text. Nový atribut typu boolean draggable, dovoluje tuto vlastnost p°i°adit nebo naopak zakázat i dal²ím prvk·m, jako bloky div a podobn¥. U obrázk· jsem tedy p°idal atribut draggable true a pomocí kaskádových styl· zm¥nil kurzor na cursor move. Prvku kam se mají fotograe p°esouvat, jsem p°i zji²t¥ní kurzoru a taºení p°idal dal²í styl pomocí JS události dragEnter, který ho rozli²uje a uºivatel tak m·ºe vid¥t, ºe se s prvkem opravdu má n¥co dít. [6] V²echny události je pot°eba registrovat, jak na prvcích, které mají být taºeny, tak na prvcích, na kterých má být taºení ukon£eno. Protoºe jich je více, zvolil jsem querrySelectorAll následovn¥: window . c o l s

= document . q u e r y S e l e c t o r A l l

( '# c o n t a i n e r #c o n t e n t

. hejbejSe ' ) ;

[ ] . f o r E a c h . c a l l ( window . c o l s ,

function ( col )

c o l . addEventListener ( ' dragstart ' , c o l . a d d E v e n t L i s t e n e r ( ' dragend ' ,

{

handleDragStart ,

handleDragEnd ,

false );

false );

});

Na kaºdém prvku, který v DOM (Document Object Model) odpovídá vypsané denici, se zaregistroval poslucha£ dragstart a dragend. Jde o obrázky, ur£ené k p°etahování. Obdobn¥ jsem registroval dal²í pot°ebné poslucha£e na prvcích, kde má být p°etahování ukon£eno. Jde o události dragenter, dragover, dragleave a drop. Stru£n¥ popí²i, o jaké metody jde. První Event handler (dále metoda) DragStart obhospoda°uje za£átek taºení. Nastavuje globální prom¥nou, která ur£í prvek taºení, a nastavuje, jaká data se vlastn¥ p°enesou. Také sniºuje nepr·hlednost prvku, aby m¥l uºivatel n¥jakou zp¥tnou odezvu o provád¥né akci. function

handleDragStart ( e )

this . style . opacity = window . d r a g S r c E l =

{

'0.4 '

this ;

e . dataTransfer . effectAllowed =

' move ' ;

e . d a t a T r a n s f e r . s e t D a t a ( ' t e x t / html ' ,

this . alt );

}

Stejné prvky, tedy obrázky ur£ené k taºení, mají jednu dal²í metodu DragEnd, která spravuje ukon£ení taºení. Nastavuje zp¥t úplnou nepr·hlednost a odebírá kaskádový styl cílovému prvku. Styl podbarvil prvek, kdyº se táhlo nad cílovým prvkem.

30


function

handleDragEnd ( e )

this . style . opacity = var

{

'1.0 ';

end = document . q u e r y S e l e c t o r A l l ( '# c o n t a i n e r #c o n t e n t

. nadDropTarget

. dropTarget ' ) ;

[ ] . f o r E a c h . c a l l ( end ,

function

( col )

{

c o l . c l a s s L i s t . remove ( ' o v e r ' ) ; });

}

Nastavení zmín¥ného kaskádového stylu bylo také funkcí metod DragEnter a DragLeave, kdy se p°i taºení nad cílovým prvkem styl p°idal pomocí classList.add a p°i opu²t¥ní prvku zase odebral pomocí classList.remove. Protoºe prohlíºe£e internetu standardn¥ podporují taºení prvk·, nap°íklad lze táhnout ozna£ený text do poznámkového bloku a tím jej zkopírovat, musí se tyto akce n¥jak zakázat. N¥které p°i ukon£ení taºení nebo pu²t¥ní prvku do stránky p°esm¥rují. function if

handleDragOver ( e )

( e . preventDefault )

{

{

e . preventDefault ; } e . dataTransfer . dropEffect = return

false ;

' move ' ;

}

Nejzajímav¥j²í je metoda handleDrop, která cílovému prvku p°idá náhled p°etaºeného obrázku, do formulá°ového prvku hidden vloºí p°ená²enou hodnotu a zdrojovému obrázku p°i°adí malý zelený informa£ní obrázek, také informující o úsp¥chu p°etaºení. Metoda také zji²úje na cílovém prvku moºnou p°ítomnost jiného obrázku. Pokud jiº n¥jaký obsahuje, p°epí²e jej a u odpovídajícího zdroje odebere zmín¥ný informativní obrázek. ... if {

( window . d r a g S r c E l var

last

=

if ( last )

!=

t h i s && window . d r a g S r c E l . d r a g g a b l e == t r u e )

t h i s . p a r e n t N o d e . q u e r y S e l e c t o r ( ' . dropCopy ' ) . v a l u e ; {

document . g e t E l e m e n t B y I d ( l a s t ) . p a r e n t N o d e . q u e r y S e l e c t o r ( ' . d r o p S p o u r c e C h a n g e ' ) . innerHTML =

' ';

} ... var

o b s a h = e . d a t a T r a n s f e r . g e t D a t a ( ' t e x t / html ' ) ;

t h i s . innerHTML = ( ' < img ' / thumb / '+ o b s a h + '"

s r c ="'+ b a s e P a t h + '/ u s e r _ p i c t u r e s / '+ userName+

d r a g g a b l e =" f a l s e "

a l t ="'+ o b s a h + '"

h e i g h t ="45"/>

'); ... Prom¥nná obsah reprezentuje p°ená²ená data, obsahuje tedy hodnotu atributu alt od zdrojového obrázku. Co se má p°ená²et nastavuje metoda DragStart pomocí setData. Hodnota prom¥nné obsah se pouºije také p°i zm¥n¥ hidden

1 prvku a p°i vykreslování informa-

tivního obrázku u zdroje. (5.2) 1

kaºdá kolonka m¥síce má sv·j hidden prvek formulá°e, který jí zrcadlí

5.4. CSS3

31

Obrázek 5.2: Ukázka funkce Drag and Drop mezi prvky.

5.4 CSS3 Ve své práci pouºívám n¥které vzhledové prvky CSS3, konkrétn¥ kulaté rohy, barevné p°echody, stíny textu i blokových prvk· a p°echody mezi vlastnostmi. Kaºdý prohlíºe£ zatím t¥mto vlastnostem rozumí po svém, a proto se musí pro kaºdý specikovat zvlá²´ a navíc u kaºdého prvku jiným zp·sobem. Nap°íklad zmín¥né p°echody:

−moz− t r a n s i t i o n : w i d t h 2 s l i n e a r , b o r d e r 2 s ; / ∗ F i r e f o x ∗ / −w e b k i t − t r a n s i t i o n : w i d t h 2 s l i n e a r , b o r d e r 2 s ; / ∗ S a f a r i −o− t r a n s i t i o n : w i d t h 2 s l i n e a r , b o r d e r 2 s ; / ∗ Opera ∗ /

a

Chrome ∗ /

Prvek s t¥mito vlastnostmi m¥ní dynamicky t°ídu stylu pomocí JavaScriptu a kaºdá t°ída má jinou hodnotu vlastnosti width a border. Kód zp·sobí pozvolný p°echod, takºe zm¥na velikosti prvku prob¥hne za 2 sekundy, jak je uvedeno u vlastnosti. Obdobn¥ i zm¥na ráme£ku. Touto vlastností se dá docílit zajímavých efekt· u jednoduchých prvk·. Vlastnosti transition vyuºívám pro zvýrazn¥ní tla£ítka Nahrát na stránce s obrázky uºivatele. Zmi¬oval jsem, jak bylo sloºité docílit kulatých roh· v minulosti. Pomocí CSS3 se tento problém vy°e²í jedním °ádkem kódu. b o r d e r −r a d i u s :

3 ex

3 ex

0 ex

0 ex ;

V tomto p°ípad¥ bude zakulacený horní levý a horní pravý roh konkrétní hodnotou.

5.5 ablonovací systém Framework Nette má ²ablonovací systém Latte, který staví na Smarty. Celkov¥ zjednodu²uje práci a sám zabezpe£í výstupy p°ed zranitelnostmi. PHP samotné je p·vodn¥ ²ablonovací jazyk, ale k úprav¥ výstup· se p°íli² nehodí. Pouºití systému Latte p°idá na dynami£nosti a data z presenter· lze pak velice efektivn¥ p°edávat do výsledných pohled·. V presenteru

32


nap°íklad naplním prom¥nou výsledky dotazu na databázi a o vzhled výstupu dat na stránce se postarám v ²ablon¥, které data p°edám. $ t h i s −>t e m p l a t e −>c a l e n d a r s −>w h e r e ( a r r a y ( ' u s e r _ i d ' =>

= $ t h i s −>c o n t e x t −>c r e a t e C a l e n d a r s ( ) $ t h i s −>u s e r −>i d ))−> o r d e r ( ' c r e a t e d

ASC ' ) ;

Databázový dotaz v presenteru. Z databázové tabulky kalendá°· získá ty °ádky, kde odpovídá jednozna£ný identikátor práv¥ p°ihlá²eného uºivatele a se°adí je podle £asové známky sestupn¥. Výsledek se p°edá prom¥nné, která se dá zpracovat v ²ablon¥ (template). { foreach

$calendars

as

$calendar }

{ $ c a l e n d a r −>c r e a t e d | d a t e : ' j .

n.

Y'}

{ $ c a l e n d a r −>name} ...
$ c a l e n d a r −>t i m e "> P o d r o b n o s t i

n : h r e f ="Sumary :

n : h r e f ="markRemove !

$ c a l e n d a r −>t i m e "

o n c l i c k =" j a v a s c r i p t : r e t u r n kalendar

c o n f i r m ( ' Opravdu

chcete

odstranit

{ $ c a l e n d a r −>name } ? ' ) " > o d s t r a n i t

{/ f o r e a c h } V Latte ²ablon¥ odpovídající konkrétnímu presenteru vypisuji výsledek databázového dotazu pomocí speciálních zna£ek ve sloºených závorkách. Zde nap°íklad foreach. Uvnit° cyklu p°istupuji k jednotlivým hodnotám a vyuºívám i takzvané helpery (modikátory). Nap°íklad date za svislou £árkou mi £asovou zna£ku ve tvaru unixového £asu p°evede do £itelné podoby p°esn¥ tak, jak si sám specikuji. Dal²í makro, které £asto pouºívám je jednoduchá klasická podmínka if.
c l a s s =" d r o p T a r g e t "> $ o l d V a l u e s [ ' uno r ' ]

!=

null }

s r c= "{ $ b a s e P a t h } / u s e r _ p i c t u r e s /{ $userName }/ thumb /

{ $ o l d V a l u e s [ ' u nor ' ] } "

d r a g g a b l e =" f a l s e "

a l t ="{ $ o l d V a l u e s [ ' un or ' ] } "

h e i g h t ="45"/> {/ i f } Podmínku pouºívám nap°íklad na stránce, kde se p°etahováním p°i°azují fotograe k m¥síc·m. Kdyº se uºivatel pokusí p°ejít na dal²í stránku, ale nep°i°adil fotograe ke v²em m¥síc·m, tedy k n¥kterým jiº ano, tak se podmínkou kontroluje, na kterých uº obrázek byl. Poté se zobrazí u svého m¥síce a uºivatel tak nep°ijde o vloºená data.

5.6 Vytvá°ení dat pro kalendá° Presenteru, který vytvá°í PDF, se musí n¥jak p°edat pot°ebná data, slouºící k výpo£tu d·leºitých informací pro tvorbu kalendá°e p°es v²echny m¥síce. Sta£í k tomu pouze rok. Aby

5.6. VYTVÁENÍ DAT PRO KALENDÁ

33

ale bylo moºné vykreslovat tabulky jednotlivých m¥síc·, je pot°eba zjistit, kterým dnem m¥síc za£íná a kolik dní má. PHP má mnoho funkcí pro práci s datem a £asem obecn¥. V následujícím kódu uvedu obecné °e²ení tohoto problému.

$ t h i s −>dny = a r r a y ( ' Mon ' 'Wed '

=>

' streda ' ,

' Fri '

=>

' patek ' ,

=>

' Thu ' ' Sat '

' p o n d e l l ' , ' Tue '

=> =>

=>

' utery ' ,

=>

' nedele ' ) ;

' ctvrtek ' , ' sobota ' ,

' Sun '

f o r ( $ i =1; $ i < 1 3 ; $ i ++) { $ f i r s t _ d a y = mktime ( 0 , 0 , 0 , $ i , $title

= date ( ' n ' ,

$first_day ) ;

= $ t h i s −>dny [ $day_of_week ] ;

$days_in_month = d a t e ( ' t ' , $pocty_dni [ $ i ]

$ t h i s −>c a l e n d a r [ ' y e a r ' ] ) ;

$first_day ) ;

$day_of_week = d a t e ( ' D' , $prvni_dny [ $ i ]

1,

$first_day ) ;

= $days_in_month ;

} Do prom¥nné rst day uloºím £asovou známku prvního dne pro konkrétní m¥síc v roce. Konkrétní den zjistím pomocí funkce date, kde vstupem bude práv¥ poºadovaná £asová známka. Získám anglickou zkratku dne. Pomocí prohledání pole, ve kterém má kaºdá anglická zkratka p°i°azený £eský ekvivalent, naplním pole hodnot, které pozd¥ji pouºiji v ²ablon¥ pro vypsání na obrazovku. Op¥t pomocí funkce date získám po£et dní v konkrétním m¥síci. Tento kód po opakování cyklem vytvo°í pole prvních dní a po£t· dní v m¥sících.

34


Kapitola 6

Testování s uºivateli Testování mi umoºní zjistit, jak se s p°edem danými úkoly vypo°ádají uºivatelé, kte°í budou reprezentovat cílovou skupinu. Na základ¥ testu budu schopný aplikaci upravit tak, aby zji²t¥né chyby nem¥li moºnost znovu nastat. Testování s uºivateli má vysoký p°ínos, protoºe jako tv·rce aplikace nemohu posoudit orientaci potencionálních uºivatel· v prost°edí.

6.1 Popis cílové skupiny a screener Aplikace umoº¬uje vytvá°et PDF kalendá° s vlastními fotograemi a událostmi. Do cílové skupiny tedy pat°í ti, kte°í rádi pracují s fotograemi, a´ uº jde o jejich po°izování nebo následnou úpravu, která nemusí být nutn¥ digitální. Uºivatel ale musí mít n¥jakou zku²enost s prací na po£íta£i a p°edev²ím pak s internetem. S kalendá°em v libovolné podob¥ musí pracovat v²ichni. Podle této charakteristiky jsem sestavil formulá°, takzvaný screener, který slouºil pro výb¥r vhodných kandidát·, kte°í by se testu zú£astnili. V závorkách jsou uvedeny poºadované odpov¥di, neve°ejná £ást formulá°e.

Vá² v¥k? •

Mén¥ jak 20 let.

•

20-30 let.

•

Více jak 30 let.

Jak £asto pouºíváte po£íta£? •

Kaºdý den. (v¥t²ina odpov¥dí)

•

2-5x za týden. (zbytek odpov¥dí)

•

Po£íta£ tém¥° nepouºívám. (neºádoucí)

•

Jiná odpov¥¤. (uve¤te) (podle odpov¥di, max. 1)

Jaký prohlíºe£ internetu pouºíváte nej£ast¥ji? 35

36

KAPITOLA 6. TESTOVÁNÍ S UIVATELI

•

Internet Explorer. (podle ostatních odpov¥dí, ale max. 1)

•

Mozilla Firefox. (£ást odpov¥dí)

•

Google Chrome. (£ást odpov¥dí)

•

Internet tém¥° nepouºívám. (neºádoucí)

•


Vlastníte fotoaparát? •

Digitální kompakt. (£ást odpov¥dí)

•

Digitální zrcadlovku. (£ást odpov¥dí)

•

Pouze na mobilním telefonu. (neºádoucí)

•

Nevlastním fotoaparát. (neºádoucí)

•


Jaký typ kalendá°e preferujete? •

V ti²t¥né podob¥. (men²í £ást odpov¥dí)

•

Oine kalendá° v mobilu. (men²í £ást odpov¥dí)

•

Webový kalendá°. (v¥t²í £ást odpov¥dí)

•

Kalendá° nepouºívám. (neºádoucí)

•


6.2 Neve°ejná £ást screeneru U screeneru v závorkách jsou uvedeny poºadované odpov¥di, které tvo°í neve°ejnou £ást formulá°e. Otázka na pouºívání po£íta£e má vylou£it ty, kte°í s po£íta£em tém¥° nepracují. Vhodným kandidátem není ani ten uºivatel, který nej£ast¥ji jako prohlíºe£ internetu pouºívá Internet Explorer, protoºe práv¥ tento prohlíºe£ nezvládá v¥t²inu prvk· aplikace, av²ak podle ostatních odpov¥dí bych mohl k testu pozvat jednoho uºivatele. Uºivatel by m¥l vlastnit fotoaparát. Z této odpov¥di poznám, jaký má k fotograi vztah a ve spojení s poslední otázkou, která se týká p°ímo kalendá°e, je nejd·leºit¥j²í.

6.3. POZVANÍ ÚASTNÍCI K TESTU

37

6.3 Pozvaní ú£astníci k testu K testu jsem pozval p¥t ú£astník· ve v¥ku dvacet aº t°icet let, kde kaºdý ve screeneru uvedl, ºe pouºívá po£íta£ kaºdý den. Dva ú£astníci uvedli jako nejpouºívan¥j²í prohlíºe£ Mozillu Firefox a zbylí Google Chrome. T°i ú£astníci uvedli, ºe vlastní kompaktní digitální fotoaparát, jeden digitální zrcadlovku a poslední participant uvedl fotoaparát na lm. Kalendá° ú£astníci preferují webový, v ti²t¥né podob¥ a jeden v mobilním telefonu. Ú£astníky (participanty) jsem v testu vedl, jako Host1 pro prvního ú£astníka, Host2 pro druhého atd. Ú£astníci si p°áli z·stat v anonymit¥, takºe na po£íta£i v Observer room (6.1) z·staly pouze logy, video záznamy nikoliv.

Obrázek 6.1: Rozvrºení místností laborato°e ur£ené k testování softwaru s uºivateli, ULAB. Laborato° se nachází v budov¥ VUT na Karlov¥ nám¥stí na kated°e Graky a interakce. [13]

6.4 Otázky pro Pre-test dotazník Tento dotazník vyplnil kaºdý ú£astník p°ed samotným testem. Pomáhá lépe poznat ú£astníka.

•

Zabýváte se úpravou fotograí v po£íta£i?

•

Zve°ej¬ujete svoje fotograe na internetu? (picasa, facebook, icker, raj£e, ...)

•

Pouºil/a jste n¥kdy internetovou aplikaci, která umoº¬uje vytvo°it nap°íklad kalendá° z vlastních fotograí? (nebo jiný produkt vhodný k vyti²t¥ní)

•

Uº jste n¥kdy pro²el/la testováním s uºivateli?

•

Pouºíváte nást¥nný nebo kancelá°ský kalendá°?

38


6.5 Otázky pro Post-test dotazník Tento dotazník vyplnil ú£astník po testu. Pomáhá lépe zjistit, jaký m¥l z aplikace pocit.

•

Který prvek vás na aplikaci nejvíce zaujal? Pro£?

•

Který úkol vám d¥lal nejv¥t²í potíºe vy°e²it? Pro£?

•

Jak hodnotíte vzhled stránek?

•

D¥lalo vám problém najít n¥který prvek na stránce (odkaz, tla£ítko,...)?

•

Jakou dal²í funkcionalitu byste na stránkách uvítali?

(Vypln¥né dotazníky jsou sou£ástí p°ílohy pod názvy Tabulka 9.1 a Tabulka 9.2.)

6.6 Úkoly pro participanty Úkoly jsem vybíral tak, aby utvá°ely logický celek, tedy postup p°i vytvá°ení nového PDF kalendá°e. V závorkách jsou uvedeny d·vody vybrání úkol·.

Úkol 1: •

Na stránkách se zaregistrujte. (Úkol mi pom·ºe zjistit, zda uºivatelé £tou informativní hlá²ky ve formulá°ových polích.)

•

P°ihlaste se. Uºivatelské jméno a heslo oznámí moderátor. (Pro zrychlení testu jsem p°ipravil ú£et pro kaºdého uºivatele, který má vytvo°ené dva adresá°e a má nahráno n¥kolik fotograí.)

Úkol 2: •

Vytvo°te nový, libovoln¥ barevný adresá° pro fotograe. Pojmenujte ho "stavby".

•

Do adresá°e "stavby"nahrajte fotograe, které jsou uloºeny na plo²e v adresá°i test pictures/budovy.

•

Adresá° "stavby"p°ejmenujte na "budovy".

•

V adresá°i "auta"je fotograe s lyºa°em. P°esu¬te ji do adresá°e "lyze".

•

Odstra¬te libovolnou fotograi.

Úkol 3: •

Vytvo°te událost svých narozenin. Pojmenujte ji podle svého k°estního jména, p°i°a¤te jí libovolný obrázek a vloºte rok narození.

•

Vytvo°te událost "Pavel svátek"ke dni 29.6. Události nep°i°azujte ani obrázek, ani rok.

6.7. NASTAVENÍ TESTU

39

Úkol 4: •

Vytvo°te nový ro£ní kalendá° pro rok 2013 s libovolným názvem. Fotograe k m¥síc·m p°i°a¤te libovoln¥. V kalendá°i nepouºijte vloºené události, ostatní nastavení nem¥¬te

•

Zobrazte vytvo°ené PDF.

•

Zm¥¬te nastavení tak, aby se pouºili va²e vytvo°ené události a vytvo°te nový soubor PDF.

•

Odstra¬te starý soubor PDF.

Úkol 5: •

Zm¥¬te heslo k ú£tu, libovoln¥.

6.7 Nastavení testu P°i kaºdém testu byl v Participants room (6.1) spole£n¥ s ú£astníkem moderátor, který ho celým testem vedl. Ve vedlej²í místnosti byl zbytek týmu, který m¥l na starosti zaznamenávání akcí p°i testu, spravování nahrávacího systému a ve²kerého hardwaru. P°i kaºdém testu bylo zaznamenáváno video a zvuk z webkamery umíst¥né v Participants room, která snímala obli£ej ú£astníka testu. Zaznamenávala se také obrazovka v této místnosti. P°i testu byl vytvá°en takzvaný log, který zjednodu²í práci p°i zji²óvání chyb aplikace z videí po testu. [13]

6.8 Hardwarové a softwarové prost°edky •

Stolní PC, MS Windows 7 OS, nástroj Morae, prohlíºe£ Google Chrome.

•

Intel Core 2 4300 1.8GHz, 2 GB RAM.

•

Monitor Dell, rozli²ení 1280x960 px.

•

Klávesnice, my², reproduktory, mikrofon.

6.9 Pr·b¥h testování • Úkol 1:

Registrace a p°ihlá²ení.

U registrace se v¥t²ina participant· potýkala s problémem formátu hesla. P°i prvním pokusu o jeho vypln¥ní a odeslání dostaly výzvu k zadání hesla ve správném formátu a aº poté si p°e£etly informativní hlá²ení. Jiný problém nenastal.

S p°ihlá²ením na stránky nem¥l ºádný participant potíºe.

• Úkol 2:

Správa adresá°· a fotograí.

40


P°i vytvá°ení adresá°e m¥l v podstat¥ kaºdý uºivatel problém nalézt, kde tak m·ºe u£init. Ve t°ech p°ípadech musel poradit moderátor. Na stránce ur£ené ke správ¥ fotograí a adresá°· se kaºdý sloºit¥ orientoval a pletl si formulá° pro nahrávání fotograí s formulá°em pro vytvo°ení adresá°e. Po vytvo°ení adresá°e stavby participant·m do²lo rozvrºení stránky. Host1 a Host4 dlouho hledali, kde lze adresá° p°ejmenovat. S p°esunutím a odstran¥ním fotograe nem¥l ºádný ú£astník problém.

• Úkol 3:

Správa událostí.

Na stránku správy událostí se nem¥l ºádný ú£astník problém dostat. Host2 a Host3 byli nejistí p°i p°i°azování obrázku události, protoºe netu²ili, ºe je nutné za²krtnout checkbox, aby se vybrání obrázk· zviditelnilo. Dále Host1 a Host5 nechápali význam zadání roku narození k události, i kdyº u poloºky je moºnost zobrazení informativního hlá²ení.

• Úkol 4:

Vytvo°ení nového kalendá°e, správa.

Se zaloºením kalendá°e nem¥l ºádný participant problémy. Tla£ítko, které k tomu vede, nalezli rychle a bez váhání. P°i°azování fotograí také ned¥lalo nikomu potíºe, ale sledované chování se musí brát s rezervou, protoºe uºivatel·m nezáleºelo na po°adí fotograí. Host3 a Host4 zkou²eli p°i°azenou fotograi odstranit, ale vºdy nakonec museli p°i°azování provézt znovu.

Host1,Host2 a Host5 netu²ili, kde se dá vygenerované PDF zobrazit. S nastavením podrobností také nebyl problém. Kdyº ale m¥li participanti zm¥nit nastavení kalendá°e, v²echny checkboxy byly za²krtnuté, i kdyº tomu tak být nem¥lo. Vedlo to ke zmatení a nepochopení následující akce ú£astník·.

Odstran¥ní starého PDF souboru také ned¥lalo ºádnému ú£astníkovi potíºe.

• Úkol 5:

Správa ú£tu.

Zm¥nu hesla provedl kaºdý ú£astník bez potíºí.

6.10 Nálezy a návrhy jejich °e²ení Popis priorit:

• Nejvy²²í

- Systémové chyby, které znemoº¬ují práci programu, ukazují citlivá data

apod.

• Vysoká

- Chyby neo£ekávaného chování aplikace, které mohou ohrozit její b¥h.

• St°ední

- Chyby, které vedou ke zmatení uºivatel·. (chybné popisky apod.)

• Nízká

- Gracké chyby, p°eklepy v textech apod.

6.10. NÁLEZY A NÁVRHY JEJICH EENÍ

•

41

Poloºka v menu Moje obrázky obsahuje i adresá°e. Tato skute£nost není z°ejmá.

e²ení P°ejmenovat poloºku v menu na Moje obrázky a adresá°e. Priorita St°ední •

Není jasné, kde se dá zobrazit vytvo°ený PDF soubor. Ikona je nedosta£ující.

e²ení Zv¥t²it ikonu nebo p°idat k odkazu text typu: Zobrazit PDF. Priorita St°ední •

Pouze slovní pojmenování m¥síc· událostí vede ke zpomalení práce. Obrázky událostí jsou aº moc schované.

e²ení

K m¥síc·m p°idat odpovídající £ísla a zm¥nit zp·sob schování obrázk·

události, kdyº je uºivatel nechce pouºít.

Priorita St°ední •

Orientace uºivatel· v sekci Obrázky je nízká. Vede k ní celková nep°ehlednost.

e²ení Zm¥nit nadpisy tak, aby odpovídaly obsahu. P°idat doprovodnou graku k akcím, která dopom·ºe celkové p°ehlednosti. Adresá°·m ponechat barvu pouze v nadpisové hlavi£ce. Fotograím p°i°adit barvu patky odpovídajícího adresá°e.

Priorita St°ední •

Po p°esunutí fotograe do jiného adresá°e se zobrazuje hlá²ka, týkající se databáze systému.

e²ení Odebrat toto hlá²ení. Priorita Vysoká •

P°ihlá²ený uºivatel m·ºe zobrazit p°ihla²ovací formulá°.

e²ení Nezobrazovat p°ihla²ovací formulá° jiº p°ihlá²enému uºivateli. Priorita Vysoká •

P°i°azenou fotograi k m¥síci nelze nijak odstranit a uºivatel neví, ºe lze k tomuto m¥síci p°i°adit fotograi jinou.

e²ení Umoºnit uºivateli odstran¥ní fotograe. Priorita St°ední •

P°i upravování kalendá°e se nezobrazuje sou£asné nastavení, v²echny checkboxy jsou za²krtnuté.

e²ení Ukázat uºivateli sou£asné nastavení. Priorita St°ední - vysoká

42


6.11 Záv¥r testování Testování odhalilo n¥kolik grackých chyb, které vedly ke zmatení uºivatel· a celkové nep°ehlednosti aplikace. Bylo objeveno také pár závaºn¥j²ích chyb, které si ºádají nutnou opravu. Pro podrobn¥j²í a d·kladn¥j²í výsledky by bylo nutné testování provést na n¥kolika nejb¥ºn¥j²ích prohlíºe£ích internetu, protoºe aplikace pracuje s mnoha prvky HTML5, které nejsou zdaleka podporovány v²emi prohlíºe£i. Na základ¥ testování bylo provedeno n¥kolik úprav, které jsou popsány v kapitole 7.

Kapitola 7

Úprava implementace Na základ¥ testování s uºivateli doznala aplikace n¥kolika zm¥n. Krom¥ nález· z test·, které jsou uvedeny v sekci Nálezy a návrhy jejich °e²ení, byly opraveny dal²í prvky, které se nález· nep°ímo týkaly. Zm¥ny rozt°ídím a uvedu v odpovídajících sekcích.

7.1 Moje obrázky a kalendá°e První zm¥nou je samotný název sekce, coº se projevilo pouze v menu aplikace. Tato stránka obsahuje správu fotograí a adresá°·. Hlavní zm¥ny se týkají vzhledu stránky. Formulá°e pro p°idávání fotograí a pro vytvá°ení adresá°· byly lépe odd¥leny a p°ibyly odpovídající ikony. (7.2) Po vybrání fotograí ur£ených k nahrání se zobrazí hlá²ka informující o nutné dal²í akci uºivatele. Také akce spojené s adresá°i nyní mají vlastní odpovídající ikony a barevnost fotograí nyní odpovídá barv¥ adresá°e. Fotograe lze nyní p°esouvat mezi adresá°i, které lze mazat samotné, coº náleºité fotograe p°esune do neza°azeného adresá°e. Ty lze mazat i s obsahem nebo je lze p°ejmenovat. (7.1)

Obrázek 7.1: Ukázka adresá°e, který lze p°ejmenovat, odstranit nebo odstranit i s obsahem. Fotograe lze otá£et, p°esouvat mezi adresá°i a odstra¬ovat.

43

44

KAPITOLA 7. ÚPRAVA IMPLEMENTACE

Obrázek 7.2: Nové ikony na stránce s obrázky a adresá°i.

7.2 Moje události Na této stránce si m·ºe uºivatel vytvo°it události, které má moºnost pouºít v kalendá°i. Zm¥ny se týkají hlavn¥ vzhledu formulá°e pro vytvá°ení události. P°i vstupu na stránku je prvek pod checkboxem ozna£eným jako Obrázek? jen málo viditelný a aº po za²krtnutí se prvek zviditelní pln¥. P·vodn¥ nebyl prvek vid¥t v·bec, coº ú£astníky testu mátlo. Mén¥ viditelné prvky jsou stále aktivní, ale kdyº se ode²lou bez za²krtnutého odpovídajícího checkboxu, nijak se neprojeví. Obrázky události jsou nyní rovnou viditelné ve formulá°i. (7.3)

Obrázek 7.3: Stav p°i za²krtnutém a neza²krtnutém checkboxu u volby obrázku události dává dostate£nou zp¥tnou vazbu uºivateli. Obdobn¥ je °e²ená volba vloºení roku narození a pouºití pozadí stránek.

7.3 Tvorba kalendá°e Hlavní zm¥na se týká p°i°azování fotograí. Participanti £asto zkou²eli, jak jiº p°i°azenou fotograi odstranit. To je nyní moºné kliknutím na ikonu £erveného k°íºku u odpovídající fotograe. (7.4) Fotograe jsou také rozt°íd¥ny podle odpovídajících adresá°·. P°i velkém mnoºství fotek by bylo p°etahování s nutností posunu po stránce nepohodlné a tak je moºné adresá°e minimalizovat a získat tak pot°ebné místo. (7.5) Nejnáro£n¥j²í zm¥na z hlediska tvorby aplikace je zachování p°i°azených fotograí u svého m¥síce po chybném odeslání poºadavku. Pro správné pokra£ování je totiº nutné p°i°adit fotograe ke v²em m¥síc·m.

7.4. ZMNA NASTAVENÍ KALENDÁE

45

Obrázek 7.4: P°i°azenou fotograi lze nyní odstranit.

Obrázek 7.5: Adresá° lze minimalizovat klikem na poml£ku v pravém horním rohu, obdobn¥ jako opera£ních systémech Windows. Informa£ní zna£ky o p°i°azení fotograe vºdy odpovídají.

7.4 Zm¥na nastavení kalendá°e Kdyº d°íve uºivatel provád¥l zm¥nu v kalendá°i, aplikace mu neukázala sou£asné nastavení a v²echny checkboxy na stránce byly za²krtnuté. Po testování jiº tento nedostatek aplikace nemá. Odpovídající stránka také m¥ní dynamicky nadpis podle provád¥né akce. (7.6)

Obrázek 7.6: Stránka s nastavením nyní rozli²uje, zda je provád¥na úprava nebo první vloºení nastavení a podle toho za²krtává checkboxy.

46

KAPITOLA 7. ÚPRAVA IMPLEMENTACE

Kapitola 8

Záv¥r 8.1 Porovnání se zadáním Seznamte se s prost°edky (sluºbami £i aplikacemi) pro akciden£ní sazbu v prost°edí webu (nap°. pro typograckou p°ípravu tiskových zakázek jako vizitky, tri£ka, apod.) Tato £ást zadání byla dodrºena. N¥kolik prací bylo podrobeno re²er²nímu testování v kapitole 2. Výsledky ohledání, a´ uº kladné £i záporné, byly zohledn¥ny p°i vytvá°ení aplikace.

Realizujte webovou aplikaci, která bude umoº¬ovat vytvo°ení obrázkového kalendá°e s moºností p°idání vlastních fotograí a následného exportu do PDF souboru. Aplikace vytvá°ející PDF soubory z vlastních fotograí je p°ístupná z http://ley.felk.cvut.cz/pdfcalendar/. Popis analýzy a návrhu je obsahem kapitoly 3.

Kalendá° bude editovatelný, tedy bude poskytovat moºnost upravovat vlastní d·leºitá data jako nap°íklad narozeniny nebo výro£í. Uºivatel má v aplikaci moºnost vytvá°et vlastní události, které mohou být sou£ástí výsledného PDF souboru. Tato funk£nost je zachycena na obrázku 9.3, který je sou£ástí p°ílohy. Vlastnosti této £ásti aplikace jsou zachyceny v kapitole 4.4.

Aplikaci podrobte test·m pouºitelnosti. Rozsah konzultujte s vedoucím práce.

Aplikace

byla testována v laborato°i Ulab na Karlov¥ nám¥stí v Praze. Pozvání k testu p°ijalo celkem 5 potencionálních uºivatel· z cílové skupiny a s jejich pomocí se poda°ilo objevit chyby a problémy. Testování je obsahem kapitoly 6. Na základ¥ testování bylo provedeno n¥kolik zásah· do implementace. Úpravy jsou sou£ástí kapitoly 7.

8.2 Návrhy roz²í°ení aplikace Post-test dotazník 9.2 zachycuje názory participant· bezprost°edn¥ po testu aplikace. Nej£ast¥ji uºivatel·m chyb¥la moºnost pouºít vlastní graku. Vhodným roz²í°ením by byla funkce nahrání vlastních obrázk· pro události a graky, která by se pouºila na pozadí kalendá°e. Chybí i editace jednotlivých stran kalendá°e, coº by zlep²ilo charakter celé aplikace.

47

48

KAPITOLA 8. ZÁVR

8.3 Porovnání s existujícími aplikacemi Výsledná aplikace se od ostatních odli²uje mali£kostmi, které jí d¥lají v jistém slova smyslu výjime£nou. Samotná tvorba se odli²uje. Uºivatel si m·ºe po registraci na stránkách uloºit fotograe, které lze opakovan¥ pouºít a podobnou moºnost má u událostí. Není tak nucen p°i editaci jednotlivých list· procházet nahráváním fotograe, kterou jiº pouºil nebo plánuje pouºít u jiného kalendá°e. Stránky si také pamatují stav tvorby kalendá°e, takºe kdyº uºivatel po n¥jakém kroku opustí web, m·ºe se k tvorb¥ pozd¥ji vrátit. Hotový kalendá° je také moºné upravit a vytvo°it znovu s tím, ºe kaºdé takto zhotovené PDF se také ukládá na stránkách.

Výpis funk£ních poºadavk· z úvodu se záv¥ry. • P°ihla²ování k ú£tu.

Spln¥no. Registrace i p°ihla²ování je sou£ástí aplikace.

• Ukládání kalendá°· a PDF soubor·.

Kalendá°e a vygenerované PDF soubory se uklá-

dají na serveru.

• Nahrání vlastních fotograí z po£íta£e a jejich správa.

Uºivatel má moºnost fotograe

z po£íta£e nahrát.

• Moºnost t°íd¥ní fotograí do adresá°·. Adresá°e jsou pouºity i p°i p°i°azování fotograí pomocí Drag and Drop.

• Upravení formátu jednotlivých stran kalendá°e.

Tato funkcionalita chybí, je vhodným

roz²í°ením.

• P°idání vlastních d·leºitých událostí, správa. Sekce s vlastními událostmi a jejich správou nechybí.

• Moºnost úpravy vytvo°eného kalendá°e. také na stránkách uloºí.

Vytvo°ený kalendá° lze upravit a nové PDF se

Kapitola 9

P°ílohy 9.1 Vypln¥ný Pre-test dotazník •

Zabýváte se úpravou fotograí v po£íta£i?

•

Zve°ej¬ujete svoje fotograe na internetu? (picasa, facebook, icker, raj£e, ...)

•

Pouºil/a jste n¥kdy internetovou aplikaci, která umoº¬uje vytvo°it nap°íklad kalendá° z vlastních fotograí? (nebo jiný produkt vhodný k vyti²t¥ní)

•

Uº jste n¥kdy pro²el/la testováním s uºivateli?

•

Pouºíváte nást¥nný nebo kancelá°ský kalendá°?

1. 2. 3. 4. 5.

otázka otázka otázka otázka otázka

Host1

Host2

Host3

Host4 Host5

Ano (2 roky)

Ano (2 roky)

Ano (5 let)

Ne

Ano

Ano (FB)

Ano, hojn¥

Minimáln¥

Ano

Ano

Ne

Ne

Ne

Ne

Ne

Ano

Ano

Ne

Ano

Ano

Ne

Ano

Ano

Ne

Ne

Tabulka 9.1: Vypln¥ný Pre-test dotazník

9.2 Vypln¥ný Post-test dotazník •

Který prvek vás na aplikaci nejvíce zaujal? Pro£?

•

Který úkol vám d¥lal nejv¥t²í potíºe vy°e²it? Pro£?

•

Jak hodnotíte vzhled stránek?

•

D¥lalo vám problém najít n¥který prvek na stránce (odkaz, tla£ítko,...)?

49

50

KAPITOLA 9. PÍLOHY

•

Jakou dal²í funkcionalitu byste na stránkách uvítali?

Poloºky ozna£ené k°íºkem v tabulce zna£í, ºe ú£astník nem¥l problém s úkolem nebo nev¥d¥l jak odpov¥d¥t.

1. otázka

Host1

Host2

Host3

Host4

Host5

Správa ú£tu

Design +

Drag-and-Drop

Funkce Drag-and-

Drag-and-

není v²ude (-)

Drop (+)

drop (+)

P°idání adresá°e

x

Úkol

na

2. otázka

dobrém

míst¥ Úkol 2

Úkol 2

4,

zm¥na

3. otázka 4. otázka 5. otázka

nastavení Zlep²it font

Adresá°e

a vzhled ka-

moc barev

-

Líbí se (+)

x

Moderní design (+)

lendá°e Zobrazení

x

x

Zobrazení PDF

x

x

P°idat vlastní ob-

P°i°azování

Zm¥nit font

rázky k událostem

rozd¥lit

PDF x

podle

v kalendá°i

adresá°·

Tabulka 9.2: Vypln¥ný Post-test dotazník

9.3 Diagram databáze K vygenerování diagramu byl pouºit open source software MySQL Workbench 5.2.39 CE. [17] (obrázek 9.1)

9.4 Ukázky aplikace K vygenerování obrázk· webové aplikace byl pouºit dopln¥k do prohlíºe£e Mozilla Firefox, FireShot 0.98.2.

1

1 (obrázky 9.2, 9.3, 9.4 )

https://addons.mozilla.org/cs/refox/addon/reshot/

9.4. UKÁZKY APLIKACE

Obrázek 9.1: Finální model databáze.

51

52

KAPITOLA 9. PÍLOHY

Obrázek 9.2: Správa obrázk· a adresá°·, ukázka.

9.4. UKÁZKY APLIKACE

Obrázek 9.3: Správa událostí, ukázka.

53

54

KAPITOLA 9. PÍLOHY

Obrázek 9.4: Vytvá°ení kalendá°e, ukázka.

Literatura [1] GUTMANS, Andi. Mistrovství v PHP 5. Vyd. 2. Brno: Computer Press, 2007, 655 s. ISBN 978-80-251-1519-0. [2] Nette Framework. David Grudl.

http://nette.org/cs/

[online]. [cit. 2012-05-12].

Dostupné z: http://doc.nette.org/cs/ [3] TCPDF. Nicola Asuni.

tcpdf.org

[online]. [cit. 2012-05-12].

Dostupné z: http://http://www.tcpdf.org [4] HTML5 Tutorial. W3C.

w3schools.com

[online]. [cit. 2012-05-12].

Dostupné z: http://www.w3schools.com/html5/default.asp http://dev.w3.org/html5/spec/single-page.html [5] HTML5 Rocks. Eric Bidelman.

html5rocks.com

[online]. [cit. 2012-05-12].

Dostupné z: http://www.html5rocks.com/en/tutorials/le/dndles/ [6] Drag and Drop. Zoltan Du Lac Hawryluk.

useragentman.com

[online]. [cit. 2012-05-12].

Dostupné z: http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/ [7] Lulu.com. Lulu Enterprises, Inc..

lulu.com

[online]. [cit. 2012-05-12].

Dostupné z: https://www.lulu.com [8] My Calendar Maker, LLC.

mycalendarmaker.com

[online]. [cit. 2012-05-12].

Dostupné z: http://www.mycalendarmaker.com/index.jsp [9] 24print.eu.

24print.eu

[online]. [cit. 2012-05-12].

Dostupné z: http://info.24print.eu/cze [10] Vlastní kalendá°.

Vlastni-kalendar.cz

[online]. [cit. 2012-05-12].

Dostupné z: http://www.vlastni-kalendar.cz/ [11] Vistaprint 2001 2012.

vistaprint.ce

[online]. [cit. 2012-05-12].

Dostupné z: http://www.vistaprint.cz/ [12] Fotolab. CEWE COLOR, a.s.,

fotolab.cz

[online]. [cit. 2012-05-12].

Dostupné z: http://www.fotolab.cz/fotodarky/vizitky.html [13] ULAB. Usability lab at CTU in Prague.

ulab.cz

Dostupné z: http://ulab.cz/index.php?id=home

55

[online] [cit. 2012-05-12].

56

LITERATURA

[14] PHP Guru. Jan Tichý.

phpguru.cz

[online] [cit. 2012-05-12].

Dostupné z: http://www.phpguru.cz/clanky/soleni-hesel [15] NET-VOR. Michal Singr.

/blok.net-vor.cz

[online] [cit. 2012-05-12].

Dostupné z: http://blok.net-vor.cz/bezpecnost-hesel-v-php/ [16] Modernizr. Faruk Ate³, Paul Irish, Alex Sexton, Ryan Seddon, Alexander Farkas.

dernizr.com/

[online] [cit. 2012-05-12].

Dostupné z: http://modernizr.com/ [17] Workbench. Oracle.

mysql.com

[online] [cit. 2012-05-12].

Dostupné z: http://www.mysql.com/products/workbench/

mo-

Kapitola 10

Instala£ní a uºivatelská p°íru£ka Aplikace je p°ístupná z adresy

http://ley.felk.cvut.cz/pdfcalendar. Registrace je pro pouºití

vyºadována. P°i registraci je sice poºadovaný email, ale pro ú£el testování a kontroly práce je do£asn¥ neaktivní. Na stránkách je vytvo°ený ú£et s uºivatelským jménem

kontrola1,

kontrola

a heslem

který obsahuje ukázky vytvo°ených adresá°·, nahraných obrázk· a vytvo°ených

PDF soubor·. Heslo musí obsahovat £íslici. Stránky bezchybn¥ fungují na prohlíºe£i Google Chrome. Prohlíºe£ Mozilla Firefox ani v posledních verzích nepodporuje atribut draggable, coº m·ºe vyvolat neo£ekávané chování na stránce s Drag and Drop. Ten Internet Explorer zcela nepodporuje, tedy nespl¬uje minimální poºadavky pro správný chod aplikace. O podpo°e prohlíºe£e se vypisuje informativní hlá²ení po p°ístupu na stránky. Po p°ihlá²ení se p°esm¥ruje na stránku, kde je seznam v²ech vytvo°ených kalendá°· a PDF soubor·, av²ak po prvním p°ihlá²ení budou seznamy samoz°ejm¥ prázdné. Hlavní naviga£ní menu je na levé stran¥ aplikace. (10.1)

Obrázek 10.1: Hlavní naviga£ní menu aplikace.

Poloºka "Moje kalendá°e"odpovídá sou£asné stránce, která se tak dá ozna£it za domácí. Odkaz "Moje obrázky a adresá°e"vede na stránku, kde si lze vytvo°it a spravovat adresá°e a nahrávat fotograe z po£íta£e. Ty lze mezi adresá°i také p°esouvat. Dal²í odkaz "Moje události"p°esm¥ruje na stránku, kde si lze vytvo°it vlastní události, které se v kalendá°i

57

58

KAPITOLA 10. INSTALANÍ A UIVATELSKÁ PÍRUKA

pouºijí. Poloºka "asto kladené dotazy"obsahuje zatím jen základní informace, konkrétn¥ ty, které uznal autor za vhodné zve°ejnit. Nejd·leºit¥j²ím odkazem je "Vytvo°it nový kalendá°", který se odli²uje od ostatních i stylem. Obrázek (7.1) ukazuje, jaké moºnosti adresá°e nabízí. Akce p°ejmenování p°esm¥ruje na formulá° s jedním vstupem od uºivatele, kde je vyºadován nový název adresá°e. Ob¥ akce odstran¥ní vedou k dotazu od aplikace, zda-li si je uºivatel jistý a opravdu chce pokra£ovat. (10.2) Odstran¥ní konkrétního obrázku také vede k dotazu od aplikace. Na stránce je p°ipravený adresá° bez za°azení, kam se p°esunou fotograe poté, co uºivatel zvolí volbu odstran¥ní jiného adresá°e bez obsahu. Tento adresá° se nedá nijak spravovat.

Obrázek 10.2: Dotaz od aplikace.

Po zvolení "Vytvo°it nový kalendá°"se zobrazí formulá°, vyºadující na uºivateli název (ten se v samotném PDF neprojeví) a zvolení roku a typu kalendá°e. Po úsp¥²ném odeslání se p°esm¥ruje na stránku s náhledy fotograí, které jsou set°íd¥ny podle d°íve vytvo°ených adresá°· a s m¥síci, na které se má p°etaºením fotograe p°emístit. Adresá°e lze minimalizovat a získat tak místo, p°i v¥t²ím po£tu fotograí. (7.5) P°i°azenou fotograi lze bu¤ odstranit kliknutím na £ervený k°íºek (7.4) nebo lze konkrétnímu m¥síci p°i°adit fotograi novou bez mazání. Toho se docílí p°etaºením nové fotograe na m¥síc, který jiº n¥jakou má. Pro pokra£ování je nutné, aby m¥ly v²echny m¥síce fotograe p°i°azeny. Nebude-li tomu tak, stránka vypí²e hlá²ení a v²em m¥síc·m z·stanou náhledy p°i°azené. Po správném p°i°azení se p°esm¥ruje na stránku s formulá°em, týkajícím se nastavení nálního PDF. Uºivatel má moºnost si zvolit, zda se pouºijí vytvo°ené události. Jestli se má u nadpis· m¥síc· zobrazovat rok, zda-li se mají podbarvovat víkendy a má moºnost i pouºít státní svátky eské republiky. Do kalendá°e m·ºe vloºit pozadí, kde je na výb¥r ze t°í p°ipravených motiv·. Náhled zobrazí první stranu PDF. Náhled je pouze informativní, co se pozadí tý£e, nezohled¬uje práv¥ upravovaná nastavení. Po úsp¥²ném odeslání formulá°e lze jiº vygenerovat výsledný PDF soubor, který se zobrazí v seznamu vytvo°ených kalendá°· na domácí stránce. Kaºdý kalendá° lze upravit a vytvo°it mu nové PDF.

Kapitola 11

Seznam pouºitých zkratek PDF

Portable Document Format

HTML5 CSS3

Cascading Style Sheets v. 3

ULAB DaD JS

HyperText Markup Language

Usability lab

Drag and Drop

JavaScript

A4

Formát papíru 210 x 297 mm

SMS

Short Message Service

FAQ

Frequently Asked Questions

FB

Facebook

URL

Uniform Resource Locator

MVP

Model-View-Presenter

MVC

Model-View-Controller

SQL

Structured Query Language

SHA2 MB

Secure Hash Algorithm

Megabyte

DOM

Document Object Model

59

60

KAPITOLA 11. SEZNAM POUITÝCH ZKRATEK

Kapitola 12

Obsah p°iloºeného CD • documentation phpDoc

- vygenerovaná dokumentace zdrojových kód·,

index.html

• pdfcalendar

app

- obsahuje kongura£ní soubory, zdrojové soubory presenter·, ²ablon a mo-

del·

libs - obsahuje pouºité knihovny Nette, Nella a TCPDF log - adresá° je prázdný, ale pro správný chod aplikace je vyºadován temp - adresá° je prázdný, ale pro správný chod aplikace je vyºadován www ∗ ∗ ∗ ∗

css - obsahuje ve²keré pouºité kaskádové styly images - obsahuje pouºitou graku webu js - v adresá°i jsou soubory JavaScriptu pro DragAndDrop, upload, inits apod. user pictures - zde se ukládají obrázky a kalendá°e uºivatel·

• text

latex - obsahuje zdrojové kódy této dokumentace v jazyce LaTex tesarjar bp.pdf - tato dokumentace v PDF • readme.txt

- nese informace o spu²t¥ní aplikace

61

Webový editor obrázkového kalendá e. Jaroslav Tesa. ƒeské vysoké u ení technické v Praze Fakulta elektrotechnická Katedra po íta ové graky a interakce

Recommend Documents