Software pro výuku písma Comenia Script. Jakub Wagner

České vysoké učení technické v Praze Fakulta elektrotechnická Katedra počítačů

Bakalářská práce

Software pro výuku písma Comenia Script Jakub Wagner

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

Studijní program: Softwarové technologie a management, Bakalářský Obor: Softwarové inženýrství 25. května 2011

iv

v

Poděkování Děkuji své rodině za pomoc a oporu. Dále děkuji všem, kteří mi s prací jakkoliv pomohli.

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 25. 5. 2011

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

viii

Abstract The goal of this Bachelor thesis was to create Comenia Script educational software. There were a lot of requirements and recommendations thanks to the user research made with the first grade teachers. Also the user interface design, which was consulted with the author of Comenia Script, was prepared. During the development there was the emphasis to create userfriendly application, and to create it from the pure source code. After the first development process ended, the application undertook a lot of extensive tests, including user test on pupils in the model school. The Bachelor thesis takes the reader through the process of creating Comenia Script educational application starting with the analysis and drafts, ending with the implementation and application testing.

Abstrakt Cílem této bakalářské práce bylo vytvořit software pro výuku písma Comenia Script. V rámci tohoto úkolu byl proveden uživatelský průzkum ve školách, díky kterému se podařilo získat některé další požadavky na aplikaci. Během práce byl připraven návrh uživatelského rozhraní, který byl konzultován s autorkou písma. Při tvoření programu byl kladen největší důraz na jednoduchost ovládání a intuitivnost. Při realizaci bylo také velmi dbáno na čistotu zdrojového kódu. V rámci práce se podařilo aplikaci otestovat přímo ve škole s dětmi. Tato bakalářská práce tedy provádí čtenáře procesem tvorby výukové aplikace písma Comenia Script od analýzy a návrhu až k implementaci a testování aplikace.

ix

x

Obsah 1 Úvod 1.1 Comenia Script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Analýza a návrh řešení 2.1 Uživatelský průzkum . . . . . 2.1.1 Příprava interview . . 2.1.2 Průběh interview . . . 2.1.3 Respondenti . . . . . . 2.1.4 Analýza výsledků . . . 2.2 Návrh software . . . . . . . . 2.2.1 Softwarové požadavky 2.2.1.1 Funkční . . . 2.2.1.2 Nefunkční . . 2.3 Návrh architektury . . . . . . 2.3.1 Popis . . . . . . . . . 2.3.2 Použité frameworky . 2.3.3 Navržený diagram tříd

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

3 Návrh uživatelského rozhraní 3.1 Hlavní menu . . . . . . . . . . . 3.2 Kroky nastavení nácviku písem 3.3 Nácvik písmen s linkami . . . . 3.4 Osmisměrka . . . . . . . . . . . 3.5 Tajenka . . . . . . . . . . . . . 3.6 Psaní slov . . . . . . . . . . . .

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

. . . . . .

4 Realizace 4.1 Adobe Flash . . . . . . . . . . . . 4.1.1 Krátce o Flashi . . . . . . 4.1.2 Proč právě Flash? . . . . 4.2 Implementace . . . . . . . . . . . 4.2.1 Popis FLA souborů . . . . 4.2.1.1 main.fla . . . . . 4.2.1.2 letterLibrary.fla . 4.2.2 Popis důležitých tříd . . .

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

xi

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

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

. . . . . .

. . . . . . . .

1 1

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

3 3 3 4 4 5 6 6 6 9 10 10 10 10

. . . . . .

13 14 14 16 17 17 18

. . . . . . . .

21 21 21 21 22 22 22 23 23

xii

OBSAH

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

24 24 25 25 26 26 26 26 27 27 27 29 29 29 29

. . . . .

33 33 34 34 36 37

6 Závěr 6.1 Pokračování práce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.2 Zhodnocení splnění cílů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.3 Přínos práce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

39 39 40 40

A Seznam použitých zkratek

43

4.3

4.2.2.1 Letter . . . . . . . . . . . . . 4.2.2.2 LetterModel . . . . . . . . . 4.2.2.3 LetterFactory . . . . . . . . . 4.2.2.4 LetterLayoutBase . . . . . . 4.2.2.5 LetterLayout . . . . . . . . . 4.2.2.6 LetterLayoutFactory . . . . . 4.2.2.7 Screen . . . . . . . . . . . . . 4.2.2.8 ScreenController . . . . . . . 4.2.2.9 DrawLayer . . . . . . . . . . 4.2.3 Vybrané problémy . . . . . . . . . . . 4.2.3.1 Tvorba Bézierovy křivky . . 4.2.3.2 Tlačítka v kantorské liště . . 4.2.3.3 Tvoření tajenky . . . . . . . 4.2.3.4 Přizpůsobení obsahu velikosti Výsledná aplikace . . . . . . . . . . . . . . . .

5 Testování 5.1 Příprava na testování . . . . 5.2 Průběh testování . . . . . . 5.2.1 Testovaný subjekt 1 5.2.2 Testovaný subjekt 2 5.3 Závěr testování . . . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

B Manuál k aplikaci B.1 Požadavky pro běh aplikace . . . . B.1.1 Platforma PC: . . . . . . . B.1.2 Platforma Android (ARM): B.2 Pokyny ke spuštění z CD-ROM . . B.3 Pokyny k instalaci . . . . . . . . . C Obsah přiloženého CD-ROM

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . rozlišení . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

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

. . . . .

. . . . .

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

. . . . .

. . . . .

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

. . . . .

. . . . .

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

. . . . .

. . . . .

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

. . . . .

. . . . .

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

. . . . .

. . . . .

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

. . . . .

. . . . .

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

. . . . .

. . . . .

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

. . . . .

. . . . .

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

. . . . .

. . . . .

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

. . . . .

. . . . .

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

. . . . .

. . . . .

. . . . .

45 45 45 45 46 46 47

Seznam obrázků 1.1

Comenia Script Universal – velká a malá abeceda . . . . . . . . . . . . . . . .

2.1 2.2 2.3

Ukázka tajenky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Ukázka osmisměrky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Navržený diagram tříd . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10 3.11 3.12 3.13

Příklad všech různých nastavení . . . . . . . . . . Návrh uživatelského rozhraní – hlavní menu . . . Návrh uživatelského rozhraní – krok nastavení 1 . Návrh uživatelského rozhraní – krok nastavení 2 . Návrh uživatelského rozhraní – krok nastavení 3 . Návrh uživatelského rozhraní – krok nastavení . . Návrh uživatelského rozhraní – nácvik písmen . . Návrh uživatelského rozhraní – nácvik písmen pro Návrh uživatelského rozhraní – osmisměrka . . . Návrh uživatelského rozhraní – tajenka . . . . . . Návrh uživatelského rozhraní – psaní slov . . . . Skica ze schůzek s Radanou Lencovou 1 . . . . . Skica ze schůzek s Radanou Lencovou 2 . . . . .

4.1 4.2 4.3 4.4 4.5 4.6 4.7

. . . . . . . . . . . . . . . . . . . . . dva . . . . . . . . . . . . . . .

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

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

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

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

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

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

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

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

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

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

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

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

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

Realizace – program FlashDevelop . . . . . . . . . . . . . . . . . . . . . . . . Realizace – nalinkování souboru main.fla na třídu Main a jeho knihovna objektů Realizace – pět jednotlivých částí písmene M . . . . . . . . . . . . . . . . . . Realizace – knihovna objektů v souboru lettersLibrary.fla . . . . . . . . . . . Realizace – záchytné body písmene „A“ . . . . . . . . . . . . . . . . . . . . . . Realizace – ukázka vypočítané Bézierovy křivky . . . . . . . . . . . . . . . . . Realizace – zobrazená (běžně neviditelná) aktivní plocha (červeně) v horní kantorské liště . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4.8 Realizace – snímek obrazovky – nastavení – kroky 1 a 3 . . . . . . . . . . . . 4.9 Realizace – snímek obrazovky – „nácvik písmen“ . . . . . . . . . . . . . . . . 4.10 Realizace – snímek obrazovky – „nácvik písmen s motýlem“ . . . . . . . . . . 4.11 Realizace – snímek obrazovky – tajenka . . . . . . . . . . . . . . . . . . . . . 4.12 Realizace – aplikace spuštěná na tabletu s Android OS . . . . . . . . . . . . . 5.1 5.2

2

13 14 14 15 15 15 16 16 17 17 18 19 20 22 23 23 24 25 28 29 30 30 30 31 31

Testování – přestávka před plánovaným testováním . . . . . . . . . . . . . . . 34 Testování – úvodní slovo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

xiii

xiv

SEZNAM OBRÁZKŮ

5.3 5.4 5.5 5.6

Testování Testování Testování Testování

– – – –

dítě u obrazovky . . . . . . . . . . . . . . . . . . . zkouška aplikace na interaktivní tabuli SmartBoard úvodní slovo 2 . . . . . . . . . . . . . . . . . . . . . hlasící se děti . . . . . . . . . . . . . . . . . . . . .

C.1 Obsah přiloženého CD-ROM

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

35 36 36 37

. . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Kapitola 1

Úvod V létě roku 2010 jsem se setkal s Radanou Lencovou a poprvé jsem byl seznámen s typografickým systémem písem Comenia. Radana Lencová, autorka písma Comenia Script mě tehdy při zkoušení dotykové obrazovky oslovila, zda by nebylo možné vytvořit výukovou aplikaci pro interaktivní tabule. Jak písmo, tak i myšlenka tvorby výukové aplikace mě velmi zaujala. Proto jsem se pokusil spojit tvorbu zajímavého software s bakalářskou prací.

1.1

Comenia Script

MgA. Radana Lencová, Ph.D., se narodila v roce 1975. Věnuje se grafickému designu, volné tvorbě a tanci. Radana vystudovala mezi lety 1994 a 2000 Vysokou školu uměleckoprůmyslovou v Praze v ateliéru písma a typografie u prof. akad. mal. Jana Solpery. 1 Comenia Script je součástí typografického projektu „Comenia – České školní písmo“. Kromě písma psacího jsou zde další písma typografická – Comenia Sans Tomáše Brousila a Comenia Serif Františka Štorma, která jsou speciálně navrženy pro sazbu učebnic, knih a textových materiálů pro žáky a studenty. Jejich charakteristikou jsou dobré optické vlastnosti, skvělá čitelnost a další detaily, které při čtení a studiu minimálně unavují zrak. Tím, že je psací písmo Comenia Script nespojené, na první pohled může připomínat písmo tiskové. Je tomu ale jinak – písmo jako celek vychází z principu renesančního psaní, kde malou abecedu tvořila humanistická polokurzíva 2 a velkou abecedu renesanční forma římské kapitály. Velká abeceda Comenia Scriptu však vychází přímo z tvarů staré římské kapitály. Písmena celé abecedy jsou tvarově jednoduchá, neobsahují žádné zbytečné okrasné prvky, tak jako tomu bylo například v barokním a klasicistním písmu. Písmo je založené na jednoduchém nácviku psaní, čitelnosti a lepší použitelnosti v praktickém životě. Psací písmo Comenia Script bylo po jeho vzniku představeno Pedagogické fakultě Univerzity Karlovy v Praze, která písmo začala ve školách testovat. Poté zažádala Ministerstvo školství a tělovýchovy o možnost pokusného ověřování písma na školách. Dvouletý projekt pokusného ověřování Comenia Scriptu (v řezu Universal) se realizuje od září 2010 se 33 školami v celé České republice. 1

Jan Solpera (* 26. prosince 1939 Jindřichův Hradec) je český typograf, grafik a pedagog.[7] Kaligrafické latinské písmo z poloviny 15. století v Itálii, charakteristické sklonem vpravo a prodlouženými dříky středních liter. Užívána k psaní literárních textů a slavnostních listin. 2

1

2

KAPITOLA 1. ÚVOD

Comenia Script je součást typografického systému písem Comenia. Součástí tohoto systému jsou například Comenia Sans a Comenia Serif, která jsou navržena tak, aby co nejméně unavovala oči, a proto jsou vhodná pro učebnice a knihy pro žáky. [9]

Obrázek 1.1: Comenia Script Universal – velká a malá abeceda

Kapitola 2

Analýza a návrh řešení 2.1

Uživatelský průzkum

Autor práce, jakožto programátor analytik, a Radana Lencová, jakožto grafička, nemají takové zkušenosti z kantorské praxe. Od uživatelského průzkumu bylo proto očekáváno získání důležitých informací přímo z centra dění – od kantorů z prvních tříd. Průzkum byl prováděn během prosince roku 2010. Pro vytvoření uživatelského průzkumu byla zvolena metoda částečně strukturovaného interview [2]. Byli osloveni učitelé prvních tříd emailem a s těmi, kteří měli zájem, byla sjednána osobní schůzku přímo u nich ve škole.

2.1.1

Příprava interview

Interview bylo rozděleno na dvě části. V první se autor práce zajímal o interaktivní výuku ve škole, jejím aktuálním stavem a využitím. Byla snaha zjistit, jak moc interaktivní techniku využívají a jak s ní jsou spokojeni. Byl kladen důraz na to, aby sdělovali i ty nejdrobnější problémy, které s ní mají. V druhé části interview byl již zájem přímo o výuku písma a byla snaha zjistit, zda by měli případně zájem o aplikaci, která by jim s výukou jakýmkoliv způsobem mohla pomoci. I proto byl respondentům nechán prostor pro případné návrhy, co by aplikace mohla umět (s čím by jim mohla pomoci). Pro účely interview byla připravena malá osnova. Ta však nebyla strikně dodržována, jednalo se spíše o nápovědu, kdyby rozhovor utichl. Interaktivní výuka • Mají ve škole interaktivní tabuli nebo obrazovku? • Jsou spokojeni? Případně: co jim vadí? • Co jim chybí? • Jak často ji využívají? Případně: myslí si, že by ji využívali?

3

4

KAPITOLA 2. ANALÝZA A NÁVRH ŘEŠENÍ

Výuka písma • Jak učí písmo? • Dokážou si představit, že by se interaktivní technika dala spojit s výukou písma? • Co by mohlo zefektivnit výuku písma? Co by mohlo uspořit čas nebo peníze? • Nechat prostor pro jejich nápady – jaké vlastnosti by měl software mít?

2.1.2

Průběh interview

Interview probíhalo ve škole, vždy v klidné místnosti (kabinet, sborovna nebo prázdná třída), kromě jedné výjimky, kdy ze zdravotních důvodů respondenta interview proběhlo formou telefonického rozhovoru.

2.1.3

Respondenti

Všichni respondenti byly ženy středního věku. Jednalo se o 5 učitelek prvních tříd na základních školách v Praze a okolí. Vždy se jednalo o učitelky, které se zapojily do pilotního programu ověřování Comenia Script – to znamená, že psaní v první třídě probíhá s písmem Comenia Script. V následujících popisech jednotlivých respondentek byla snaha vypíchnout ty nejzajímavější informace z rozhovoru. Ve třídě je používána metoda frontální výuky dle standardních osnov, pokud není uvedeno jinak. Opakované a zajímavější informace byly shrnuty v části Analýza výsledků. Respondentka 1 Věk 30–40 let, lokalita Dejvice v Praze. Děti jsou často cizinci a z bohatších rodin. Ve třídě má interaktivní tabuli zakoupenou za prostředky rodičů. Interaktivní tabuli využívá velmi často, minimálně jednou denně. Děti prý výuka na interaktivní tabuli baví. Materiály stahuje na internetu. Výukový program pro čtení a psaní by uvítala. Jako obrovskou výhodu vidí možnosti využití již předpřipravených podkladů pro děti – proto jako požadavek na takovou aplikaci vznesla rychlé spuštění požadované úlohy bez nutnosti jakéhokoliv nastavování. Požaduje, aby bylo možné změnit velikost písma. Respondentka 2 Věk 40–50 let, lokalita Dejvice v Praze. Interaktivní tabuli ve třídě má. Na třídu není aplikována standardní frontální výuka, ale speciální metoda výuky s důrazem na týmovou spolupráci. Děti mají sraženy lavice k sobě dle potřeb. Interaktivní tabuli používá méně často – cca jednou za 14 dní. Stěžuje si na nepřesnost interaktivní tabule (odhaduji to na uvolněný projektor – posunutý obraz mimo aktivní plochu) a na to, že ji musí složitě zapojovat (tabule je na pojezdu). Kdyby byly peníze na interaktivní tabuli, prý by je raději investovala do jiných pomůcek pro děti. U programu by ocenila jednoduchost ovládání a příjemné prostředí pro děti.

2.1. UŽIVATELSKÝ PRŮZKUM

5

Respondentka 3 Věk 30–40 let, lokalita Horní Počernice v Praze. Po vyučování je vychovatelkou v družině. Interaktivní tabuli ve třídě má a velmi si ji vychvaluje. Stěžuje si, že dostali tabuli před několika lety z grantů ale bez školení. S tabulí se naučila pracovat sama. Navrhuje, aby se výukový program velmi jednoduše ovládal a měl rychlý přístup ke všem jeho částem. V programu pro výuku by kromě psaní znaků ocenila možnost tvorby tajenek a doplňovaček. Respondentka 4 Věk 30–40 let, lokalita Vinohrady v Praze. Interaktivní tabuli ve třídě tento rok nemá. Na příští rok se škola chystá její třídu interaktivní tabulí vybavit. Předchozí roky učila na jiné základní škole, kde interaktivní tabuli ve třídě měla a využívala ji každý den. Na novou tabuli se těší a prý respondentce i chybí, protože se ji naučila využívat a šetřila jí čas. V programu by ocenila jednoduché tajenky a různé doplňovačky, kvůli úspoře času, který běžně stráví nad jejich přípravou a kreslením na normální tabuli. Pak by uvítala možnost „přetahování písmenek“ – jakési skládání slov z písmenek, které by rozšířilo stávající vzdělávací metodu („přetahováním písmenek“ je myšlena metoda, kdy děti mají v deskách nastříhané písmenka a pak z nich skládají slabiky a slova). Určitě nechce při použití v hodině nic nastavovat – jakékoliv nastavování zdržuje a ubírá čas určený pro výuku. Respondentka 5 Věk 30–40 let, lokalita Řevnice u Prahy. Menší škola. Interaktivní tabuli nemá ani ve třídě, ani jinde ve škole. Účastnila se ale několika seminářů a školení, jak s těmito zařízeními pracovat, protože se škola chystá brzy třídy interaktivními tabulemi vybavit. Myslí si, že bude interaktivní obrazovku využívat často, protože ví, kolik času jí muže ušetřit. U programu by ocenila rychlé spuštění, možnost psát přes celou plochu tabule a rychlé vymazání plochy. Dále by ocenila přítomnost linek, jejich různé velikosti a možnost psát písmo dle předlohy.

2.1.4

Analýza výsledků

Všechny učitelky se již někdy setkaly s interaktivní tabulí, ovšem jen některé ji mají ve třídě, ty ostatní ji využívají v jiné třídě. Z toho plyne, jak často interaktivní techniku k výuce používají. Častěji a intenzivněji ji pochopitelně používají ty, které ji mají ve třídě. První názor je používat tuto techniku pouze jako zpestření výuky – například jednou týdně nebo jednou za 14 dní, ale vždy na celou hodinu. Druhý názor, který převládal, je používat interaktivní tabuli každou hodinu, ale jen krátce – například 5–10 minut. Názory se ovšem rozcházely i z jiných důvodů než je přítomnost interaktivní tabule ve třídě. Například kvůli nevhodnosti systému (zapojování kabelů a podobně) nebo absenci výukových materiálů. Respondentky si ve většině případů interaktivní tabuli velmi chválí, jakožto celé zařízení, ovšem méně spokojeny jsou s jednotlivými části zařízení – způsobenými spíše možnostmi hardware (například vysoká latence a malá přesnost zařízení). Kantorkám také často chybí možnost spolupráce dětí a možnost využití tabule více dětmi najednou, způsobené hardwarovým omezením zařízení – jen některé tabule umí obsluhovat více dotyků. Respondentky se jednoznačně shodly na tom, že by interaktivní technika mohla zjednodušit jejich práci. Učitelky například nebudou

6


muset na křídovou tabuli opakovaně předkreslovat zadání a podobně. Dále se také shodly, že by se výuka mohla zefektivnit, zpestřit, a že postrádají výukový program přímo pro výuku písma. Učitelky nechtějí nic nastavovat – během rozhovorů se respondentky často zmiňovaly o přítomnosti různých nastavení programu, avšak samy nerady něco nastavují. Během rozhovorů jsem obdržel spousty nápadů od respondentek, co by aplikace mohla obsahovat. Některé nápady budou zaneseny do výsledné aplikace a je je možné najít již v návrhu.

2.2 2.2.1

Návrh software Softwarové požadavky

Softwarové požadavky se jistě budou ještě velmi upravovat. Zde je seznam těch, které jsou požadovány za důležité a které vycházejí z uživatelského průzkumu. Další požadavky budou určitě přibývat – například po další konzultaci s autorkou písma. 2.2.1.1

Funkční

Funkční požadavky kladou požadavky na funkce programu. Dále by měly jednoznačně požadavek popsat a určit jeho důležitost. [8] Obecné: Název požadavku: Možnost práce více dětí zároveň ID požadavku: SR0-01 Popis požadavku: V částech programu, kde to má smysl, bude možnost ovládat program více uživateli najednou za pomocí technologie multi-touch. Požadavek vychází z výsledků UR. Priorita: MUST-HAVE Název požadavku: Modulárnost aplikace ID požadavku: SR0-02 Popis požadavku: Aplikace by měla být modulární, přidání dalších vlastností aplikace by mělo být snadné. Priorita: MUST-HAVE Název požadavku: Konfigurační soubory ID požadavku: SR0-03 Popis požadavku: Aplikace by měla obsahovat konfigurační soubory, aby byla snadno modifikovatelná. Konfigurační soubory by měly mít standardizovaný formát – například jazyk XML. Priorita: MUST-HAVE Název požadavku: Systém spouštění jednotlivých výukových objektů ID požadavku: SR0-04 Popis požadavku: Aplikace bude obsahovat speciální systém pro spouštění všech objektů s různými nastaveními jedním klikem. Tím bude odstraněna nutnost častých nastavení a nutnost používat část pro nastavení aplikace. Požadavek vychází z výsledků UR. Priorita: MUST-HAVE

2.2. NÁVRH SOFTWARE

7

Ovládací prvky programu: Název požadavku: Ovládací prvky budou velké ID požadavku: SR1-01 Popis požadavku:Ovládací prvky budou dostatečně velké, aby byly jednoduše ovladatelné na dotykovém zařízení. Priorita: MUST-HAVE Název požadavku: Důležité ovládací prvky pro děti budou umístěny dole ID požadavku: SR1-02 Popis požadavku: Důležité ovládací prvky, které budou ovládat děti, budou umístěny ve spodní části programu, tak aby k nim byl snadný přístup. Priorita: MUST-HAVE Název požadavku: Důležité ovládací prvky pro kantory budou umístěny nahoře ID požadavku: SR1-03 Popis požadavku: Důležité ovládací prvky, které budou ovládat kantoři, budou umístěny v horní části programu, tak aby k nim byl snadný přístup a byl znesnadněn přístup dětmi. Priorita: MUST-HAVE Název požadavku: Možnost vymazat jakoukoliv kreslící/psací plochu jedním stiskem ID požadavku: SR1-04 Popis požadavku: Uživatel bude moci smazat celou plochu stiskem jednoho tlačítka. Priorita: MUST-HAVE

Procvičování jemné motoriky dítěte: Název požadavku: Možnost kreslit po prázdné ploše ID požadavku: SR2-01 Popis požadavku: Uživateli bude zpřístupněna plocha pro volné kreslení. Priorita: MUST-HAVE Procvičování psaní písmen: Název požadavku: Možnost nastavení velikosti psaného písmene ID požadavku: SR3-01 Popis požadavku: Kantor bude moci nastavit velikost psaného písma. Priorita: MUST-HAVE Název požadavku: Nastavení viditelnosti linek ID požadavku: SR3-02 Popis požadavku: Kantor bude moci nastavit zobrazení linek. Priorita: MUST-HAVE

8


Název požadavku: Nastavení pomocných vrstev ID požadavku: SR3-03 Popis požadavku: Kantor bude moci zvolit jednu z pomocných vrstev – například vytečkovaná písmena nebo naznačení tahů a podobně. Priorita: MUST-HAVE Název požadavku: Vytvoření zábavné formy výuky písma ID požadavku: SR3-04 Popis požadavku: Aplikace bude obsahovat část, která bude využívat audiovisuální techniku k zábavné formě výuky tvaru a tahů písmen. Priorita: MUST-HAVE Čtení slov a skládání slov: Název požadavku: Skládání slov ID požadavku: SR4-01 Popis požadavku: Aplikace bude obsahovat část na skládání slov. To bude probíhat taháním písmenek z hromádek. Požadavek vychází z výsledků UR. Priorita: SHOULD-HAVE Název požadavku: Opisování slov ID požadavku: SR4-02 Popis požadavku: Aplikace bude obsahovat část na opisování slov. To bude probíhat buď opsáním slova z obrázku nebo opsaním již napsaného slova. Požadavek vychází z výsledků UR. Priorita: SHOULD-HAVE

Další požadavky: Název požadavku: Tajenky ID požadavku: SRx-01 Popis požadavku: Kantor bude moci zvolit jednu z připravených tajenek. Systém tajenek bude ještě konzultován s autorkou písma. Požadavek vychází z výsledků UR. Jak by taková tajenka mohla vypadat znázorňuje obrázek 2.1. Priorita: SHOULD-HAVE

Obrázek 2.1: Ukázka tajenky

2.2. NÁVRH SOFTWARE

9

Název požadavku: Vlastní tajenky ID požadavku: SRx-02 Popis požadavku: Kantor bude moci vygenerovat vlastní tajenku dle zadání. Systém tajenek bude ještě konzultován s autorkou písma. Požadavek vychází z výsledků UR. Priorita: NICE-TO-HAVE Název požadavku: Osmisměrky ID požadavku: SRx-03 Popis požadavku: Kantor bude moci zvolit jednu z připravených osmisměrek. Systém osmisměrek bude ještě konzultován s autorkou písma. Požadavek vychází z výsledků UR. Pro představu obrázek 2.2. Priorita: SHOULD-HAVE

Obrázek 2.2: Ukázka osmisměrky

Název požadavku: Vlastní osmisměrky ID požadavku: SRx-04 Popis požadavku: Kantor bude moci vygenerovat vlastní osmisměrku dle zadání. Systém osmisměrek bude ještě konzultován s autorkou písma. Požadavek vychází z výsledků UR. Priorita: NICE-TO-HAVE 2.2.1.2

Nefunkční

Nefunkční požadavky (non-functional requirements) jsou požadavky, které kladou například požadavky na výkonnost, kvality, nebo design. [8] Jsou kladeny tyto nefunkční požadavky: • Aplikace musí bezproblémově běžet na Windows 7 a podporovat multi-touch. • Aplikace musí být schopna pracovat s tabulemi JAWIQ Proedu Board, SMART Smartboard, Active Inspire a dalšími rozšířenými typy tabulí. • Aplikace musí být intuitivně ovladatelná. • Aplikace by měla být multiplatformní pro budoucí použití na jiných zařízeních (Android, iPad, BlackBerry Playbook a podobné).

10

2.3 2.3.1


Návrh architektury Popis

K návrhu jsem použil program Enterprise Architect. Bylo potřeba připravit takový systém, aby se zbytečně neduplikoval kód a aby bylo jednuduché připravovat moduly, které budou potřebovat modely písmen. „Enterprise Architect od společnosti Sparx Systems je kompletní nástroj pro systémovou analýzu a návrh, který pokrývá celý životní cyklus vývoje systému, tzn. od zadání požadavků přes analýzu stavů, návrh modelů, testování a údržbu, vše s využitím diagramů v UML.“ [5]

2.3.2

Použité frameworky

Jediný použitý framework je GreenSock Tweening Platform [1]. Jedná se o framework starající se o tweening (z anglického slova between). Tweening zajistí animaci určitých vlastností mezi dvěma hodnotami za daný čas. Například tento Tweening zajistí pohyb mého objektu po ose X z aktuálního místa na bod 200. TweenMax . t o ( o b j e k t , 1 , { x : 200} ) ;

Dále již je využito pouze čistého ActionScriptu 3.

2.3.3

Navržený diagram tříd

Navržený diagram tříd (vygenerovaný model z aplikace Enterprise Architect na obrázku 2.3) neodpovídá skutečnému stavu tříd po implementaci. Během implementace jsem narazil na několik drobných překážek, popřípadě jsem některé problémy vyřešil elegantněji. Více o třídách v kapitole 4.

2.3. NÁVRH ARCHITEKTURY

Obrázek 2.3: Navržený diagram tříd

11

12


Kapitola 3

Návrh uživatelského rozhraní Návrh uživatelského rozhraní vychází jak z uživatelského průzkumu, tak i z požadavků Radany Lencové a zkušeností autora práce z oblasti interaktivní techniky. Hlavní myšlenka spočívá v jednoduchosti ovládání na dotykovém zařízení a ve snadnosti nastavení celé aplikace pro aktuální potřeby kantora či rodiče. Učitelky během interview neustále opakovaly, že nechtějí žádný složitý program, a že nechtějí a ani nemají čas během hodiny nic zbytečně nastavovat. To ale bylo v konfliktu s velkým množství různých nastavení (obrázek 3.1) v režimu nácviku písma.

Obrázek 3.1: Příklad všech různých nastavení

Proto byl navržen systém obrazovek, který umožňuje spustit libovolné nastavení během několika vteřin. Tím bylo dosaženo toho, že aplikace neobsahuje žádnou lištu a ani žádné speciální menu s nastavením. Autor práce se nechal inspirovat dotykovými zařízeními, jako jsou například Apple iPhone nebo Apple iPad, kde funguje nastavování aplikací a her velmi podobně. Dalším důležitým prvkem aplikace jsou dvě nabídky s akcemi. Jedná se o menu pro kantora, které obsahuje tlačítka, jako jsou například „zpět do menu“ a „vymazání plochy“. Tato lišta je umístěna v horní části obrazovky (interaktivní tabule), díky čemuž je méně

13

14

KAPITOLA 3. NÁVRH UŽIVATELSKÉHO ROZHRANÍ

dostupná dětem – tím se snižuje šance, že by děti během práce na dotykové tabuli omylem zasáhly do běhu aplikace, což se může stát jak úmyslně, tak i omylem. Druhá lišta obsahuje důležité prvky pro dítě, například výběr nástroje pro psaní. Proto je umístěna v dolní části obrazovky, aby jim byla lépe dostupná. Na obrázcích 3.12 a 3.13 se skici jsou vidět první náznaky systému menu a nastavení. Jsou památkou na řešení v jaké posloupnosti jednotlivé obrazovky budou a proč.

3.1

Hlavní menu

Hlavní menu obsahuje rozcestí na všechny funkce programu. Tlačítka musí být dostatečně velká a jejich názvy musí být zvoleny tak, aby byly jednoznačné. Obrazovka bude později obohacena o ilustrace a animace. Měla by být poutavá. Návrh na obrázku 3.2.

Obrázek 3.2: Návrh uživatelského rozhraní – hlavní menu

3.2

Kroky nastavení nácviku písem

Jde o to, že v každém následujícím kroku jsou v náhledech dalších možností nastavení již aplikována předem vybraná nastavení. Například pokud bylo v prvním kroku vybráno písmeno „A“, tak v dalších krocích je v náhledu již vidět písmeno „A“ v různých kombinacích nastavení. Návrhy jednotlivých kroků na obrázcích 3.3, 3.4, 3.5 a 3.6.

Obrázek 3.3: Návrh uživatelského rozhraní – krok nastavení 1

3.2. KROKY NASTAVENÍ NÁCVIKU PÍSEM

15



Obrázek 3.6: Návrh uživatelského rozhraní – krok nastavení

Tyto čtyři obrázky zaznamenávají tento postup: v prvním kroku byla vybrána druhá možnost, v druhém kroku byla vybrána první možnost a ve třetím kroku byla vybrána opět možnost druhá. V tomto návrhu byl krok „výběr písmene“ ještě jako krok čtvrtý. To bylo přehodnoceno a tento krok byl umístěn na první místo. Nejdříve byl zamýšlen krok „výběr písmene“ jako krok poslední, aby byl dostupný i z režimu nácviku pomocí tlačítka „zpět“. Režim „nácvik písmene“ nyní obsahuje v horní „kantorské“ liště tlačítko pro výběr písmene, které tento krok zpětně vyvolá. V jednotlivých krocích je již v náhledech zobrazeno vybrané písmeno, čímž je celý systém intuitivnější a uživatel má větší představu o průběhu nastavování.

16

3.3


Nácvik písmen s linkami

Na tomto návrhu je znázorněno rozložení obrazovky při nácviku tvaru písmene. Jaký je konkrétní vzor a jaký je styl linek závisí na výběru z předchozích nastavovacích kroků. Jak již bylo zmíněno, lišta s ovládacími tlačítky je umístěna v horní části obrazovky, aby k ní učitelé měli snazší přístup a naopak děti přístup obtížnější. Lišta s výběrem pastelky nebo gumy je umístěna ve spodní části, aby k ní naopak nejlepší přístup měly děti. Pokud byla vybrána možnost takzvaného „splitscreenu“ (rozdělení obrazovky na dvě samostatné části), je tato lišta zobrazena dvakrát – pro každé dítě zvlášť. Všimněte si, že každé dítě může mít vybráno vlastní nástroj. Tato možnost je ale specifická pro různý hardware – zařízení musí být vícedotykové (podporovat technologii multitouch). Návrh na obrázku 3.7, pro režim „splitscreen“ návrh na obrázku 3.8.

Obrázek 3.7: Návrh uživatelského rozhraní – nácvik písmen

Obrázek 3.8: Návrh uživatelského rozhraní – nácvik písmen pro dva

3.4. OSMISMĚRKA

3.4

17

Osmisměrka

Návrh osmisměrky najdeme na obrázku 3.9. Kantorská lišta v tomto režimu obsahuje tlačítka pro návrat do hlavního menu, tlačítko pro vytvoření nové osmisměrky a tlačítko, které k osmisměrce zobrazí nápovědu. Uprostřed obrazovky se zobrazuje matice písmen skrývající názvy obrázků obklopujících tuto matici. Zobrazením nápovědy je u osmisměrky myšleno zvýraznění prvního písmene náhodného neobjeveného slova.

Obrázek 3.9: Návrh uživatelského rozhraní – osmisměrka

3.5

Tajenka

Návrh tajenky je na obrázku 3.10. V horní kantorské liště je opět tlačítko pro návrat zpět do menu, tlačítko pro zobrazení další (nové) tajenky a tlačítko pro zobrazení nápovědy. Zobrazením nápovědy je v tomto případě myšleno zobrazení náhodných písmenek ve hledaných slovech. Uprostřed jsou již zmíněná slova, skrývající tajenku. Ve spodní části obrazovky je umístěna lišta s nástroji pro kreslení.

Obrázek 3.10: Návrh uživatelského rozhraní – tajenka

18

3.6


Psaní slov

Návrh psaní slov je na obrázku 3.11. V kantorské liště je kromě tlačítka pro návrat zpět do menu i tlačítko pro vyvolání dalšího slova a tlačítko pro rychlé vymazání kreslící plochy. Uprostřed obrazovky je obrázek slova, které má být napsáno na připravenou linku pod ním. Lišta s kreslícími nástroji je opět umístěna v dolní části, aby byla lépe dostupná dětem u tabule.

Obrázek 3.11: Návrh uživatelského rozhraní – psaní slov

3.6. PSANÍ SLOV

Obrázek 3.12: Skica ze schůzek s Radanou Lencovou 1

19

20


Obrázek 3.13: Skica ze schůzek s Radanou Lencovou 2

Kapitola 4

Realizace 4.1 4.1.1

Adobe Flash Krátce o Flashi

Adobe Flash (dříve Macromedia Flash) je multimediální platforma původně vlastněná společností Macromedia a v současnosti vyvíjená a distribuována firmou Adobe Systems. Už od představení v roce 1996 se Flash stal oblíbenou metodou, jak rozanimovat webové stránky a tím je udělat více interaktivní. [6] Flash je běžně používán k tvorbě animací, reklam a k různým webovým komponentám (integrace videa, hudby do webu) a v dnešní době také stále častěji k tvorbě celé webové aplikace a stránky (RIA). Flash umí pracovat jak s vektorovou, tak i rastrovou grafikou a podporuje obousměrný streaming audia i videa. Jako programovací jazyk se používá ActionScript. K tvorbě aplikací (webové stránky, hry, animace, mobilní aplikace) se používá Adobe Flash Professional (dnes nejnovější verze 11.5, pod označením CS 5.5 ). Zdrojové soubory mají koncovku *.fla, zdrojové kódy mají koncovku *.as. Vykompilované soubory mají ve většině případů příponu *.swf, a například právě tyto soubory mohou být vloženy jako objekt do webových stránek, a nebo je můžeme přehrát přímo ve Flash Playeru. Flash muže být vykompilován i jako takzvaná standalone Flash Player, označovaný jako Projector. Jedná se o spustitelný soubor (*.exe pro Microsoft Windows, nebo *.app pro Macintosh), který v sobě obsahuje i Flash Player, takže je tento soubor možné spustit i tam, kde není nainstalován. Dnes je díky Adobe AIR možné aplikace provozovat jako nativní aplikace i na mobilních zařízeních s operačním systémem Android OS, Apple iOS a v nejbližší době i v BlackBerry Tablet OS.

4.1.2

Proč právě Flash?

Autor práce přišel s Flashem do styku někdy v roce 2000, a to konkrétně s verzí 5, kdy si v něm vytvářel interaktivní animace pro své první webové stránky. V té době netušil, že

21

22

KAPITOLA 4. REALIZACE

mu to vydrží až dodnes. Za posledních 11 let se Flash vyvinul ve velmi pokročilé vývojové prostředí a jeho oblíbenost a rozšířenost stále roste. I proto byl Flash považován za ideálního kandidáta pro vývoj této aplikace - za to nejdůležitější ale byla považována nativní podpora vektorové grafiky a multiplatformnost.

4.2

Implementace

S implementací se začalo v první polovině dubna a s posledními úpravami se skončilo těsně před odevzdáním bakalářské práce. Za nejdůležitější část autor práce považuje generování podkladů pro nácvik písem a nácvik tahů a tvarů za pomocí hry s motýlem. Prvním krokem bylo vygenerování namodelovaných tříd z aplikace Enterprise Architect. To určitě ušetřilo několik desítek minut s vytvářením jednotlivých tříd. Tyto třídy a další vytvořené soubory byly již upravovány v opensource aplikaci FlashDevelop [3]. Ta obsahuje velké množství generátorů a pomocníků při psaní kódu. Například, kromě automatického doplňování a automatického formátování, obsahuje generátor funkcí, event listenerů, proměnných a spousty dalších skvělých funkcí.

Obrázek 4.1: Realizace – program FlashDevelop

XML soubory byly vytvářeny a editovány v programu PSPad. Ten sice nemá takové vlastnosti, jaké mají jiné textové editory, ale v tomto případě byl použit pouze ze zvyku.

4.2.1

Popis FLA souborů

FLA soubory obsahují veškerou grafiku, animace, fonty, zvuky, videa a komponenty. FLA soubor může obsahovat i kód. Stage FLA souboru může být svázaná s nějakou třídou, totéž platí pro jednotlivé objekty uvnitř FLA souboru. 4.2.1.1

main.fla

Tento soubor je hlavním FLA souborem. Zkompilovaný je spustitelný. Obsahuje prvky menu a prvky k jednotlivým „režimům“ aplikace. Dále obsahuje všechny zvuky a font Comenia Script. Stage je nalinkována na třídu com.comenia.Main, která je zároveň třídou hlavní.

4.2. IMPLEMENTACE

23

Obrázek 4.2: Realizace – nalinkování souboru main.fla na třídu Main a jeho knihovna objektů 4.2.1.2

letterLibrary.fla

Tento FLA soubor není samostatně spustitelný. Jedná se pouze o knihovnu písmen – jejich jednotlivých vzorů a obrázků. Takto vykompilovaný soubor je načítán do hlavního souboru. Každé písmeno má vždy pět části. Každá část je z knihovny nalinkována pro použití v kódu. Například malé písmeno „p“ má tyto části 1 : • LetterPSmallModel – model písmene • LetterPSmallDottedModel – vytečkovaný model písmene • LetterPSmallDot – prvotní „tečka“ písmene • LetterPSmallPicture – Comenia Picture pro toto písmeno • LetterPSmallHints – nápověda tahů pro toto písmeno

Obrázek 4.3: Realizace – pět jednotlivých částí písmene M

4.2.2

Popis důležitých tříd

Do této části práce byly zahrnuty nejdůležitější a nejzajímavější třídy. 1

Na obrázku 4.3 si všimněte bodu počátku (křížek) jednotlivých částí. Umístění počátku vlevo dole usnadnilo skládání výsledného zobrazení na lince.

24


Obrázek 4.4: Realizace – knihovna objektů v souboru lettersLibrary.fla

4.2.2.1

Letter

Letter je třída obsahující jeden řádek daného písmene (nebo číslice), který má vzhled podle zavolaných metod. Příklad užití: var l e t t e r A : L e t t e r = new L e t t e r ( LettersEnum .A ) ; letterA . createPicture ( ) ; letterA . createLines ( ) ; letterA . createDottedLettersPattern ( ) ; l e t t e r A . setUsableWidth ( 3 0 0 ) ;

V příkladu zmíněná metoda createPicture() do instance letter umístí Comenia Picture, a posune linku a vzory znaků po ose x o jeho šířku. Druhá metoda vytvoří linky. Třetí zmíněná metoda createDottedLettersPattern() vytvoří vzory vytečkovaných znaků po šířce linky. Čtvrtá metoda rozšíří instanci letter tak, aby byl horizontální prostor pro vzory 300px.

4.2.2.2

LetterModel

Jedná se o třídu, která je pouze použita jako rodič modelů znaků. Vyhledává v modelu umístěné záchytné body a vytváří z nich položky ve více rozměrném poli. Pokud již pro daný model bylo pole vytvořeno, tak aby se nemusely body hledat znovu, pole je předáno z cache. Záchytné body jsou editovatelné v lettersLibrary.fla a jsou prezentovány jako instance cuePoint. Každá tato instance je pojmenována – například písmeno „A“ obsahuje tyto záchytné body: a1, a2, a3, a4, a5, b1, b2, b3, b4, b5, c1, c2, c3. Písmeno značí tah, číslice pořadí záchytného bodu v tahu.

4.2. IMPLEMENTACE

25

Obrázek 4.5: Realizace – záchytné body písmene „A“

4.2.2.3

LetterFactory

LetterFactory, podle vzoru FactoryMethod, slouží ke generování instancí třídy Letter. Místo několika řádků kódu proto stačí pouze jeden jediný. LetterFactory umí vytvářet instanci Letter podle zadaného typu. • Typ 1 – V levé části je zobrazen Comenia Picture. Jsou zobrazeny všechny linky, pomocná květina a na lince jsou zobrazeny vytečkované vzory. • Typ 2 – Jsou zobrazeny všechny linky a pomocná květina. Na lince jsou zobrazeny tečky počátků znaku. • Typ 3 – Obdobné jako typ 2, ale bez vzorů. • Typ 4 – Je zobrazena jen spodní linka a horní nebo střední pomocná linka. • Typ 5 – Je zobrazena jen spodní linka.

Příklad užití: var l e t t e r : L e t t e r ; l e t t e r = L e t t e r F a c t o r y . c r e a t e L e t t e r ( LettersEnum .A_ACUTE, LetterTypesEnum .TYPE_1 ) ; l e t t e r . setUsableWidth ( 3 0 0 ) ;

Uvedený příklad vytvoří řádek s písmenem „Á“. Jelikož byl vybrán typ 1, bude zobrazen obrázek Comenia Picture (v tomto případě anděl) a na lince budou předtečkované vzory. 4.2.2.4

LetterLayoutBase

LetterLayoutBase je třída starající se o rozložení řádků na obrazovce. Může obsahovat instanci DrawLayer.

26


Příklad užití: var l e t t e r L a y o u t B a s e : L e t t e r L a y o u t B a s e = new L e t t e r L a y o u t B a s e ( ) ; var p r o t o t y p e : L e t t e r ; var l i n e s C o u n t : i n t = 3 ; p r o t o t y p e = L e t t e r F a c t o r y . c r e a t e L e t t e r ( LettersEnum .A_ACUTE, LetterTypesEnum .TYPE_1 ) ; while ( l i n e s C o u n t −−) { l e t t e r L a y o u t B a s e . a d d L e t t e r ( p r o t o t y p e . copy ( ) ) ; } letterLayoutBase . s e t S i z e (1024 , 768);

Uvedený příklad vytvoří rozložení tří řádků s písmenem „Á“ podle typu 1 pro rozlišení 1024x768. 4.2.2.5

LetterLayout

LetterLayout je třída obsahující jednu nebo dvě instance LetterLayoutBase. Umožňuje vytvořit takzvaný „split-screen“ mód. Dále obsahuje obslužné metody, které reagují na přítomnost druhého LetterLayoutBase. 4.2.2.6

LetterLayoutFactory

LetterLayoutFactory je opět podle vzoru FactoryMethod. Tato třída slouží ke generování instancí LetterLayout. Opět se tím šetří množství napsaného kódu. Příklad užití: var p r o t o t y p e : L e t t e r ; var l e t t e r L a y o u t : L e t t e r L a y o u t ; p r o t o t y p e = L e t t e r F a c t o r y . c r e a t e L e t t e r ( LettersEnum .A_ACUTE, LetterTypesEnum .TYPE_1 ) ; l e t t e r L a y o u t = L e t t e r L a y o u t F a c t o r y . c r e a t e F r o m P r o t o t y p e ( p r o t o t y p e , 2 , true ) ;

Uvedený příklad vytvoří rozložení dvou řádků s písmenem „Á“ podle typu 1 v režimu „splitscreen“. 4.2.2.7

Screen

Screen je třída, která má naimplementované metody show(), hide() a assignTopMenu(). První dvě se starají o jednoduchý fade-in a fade-out efekt. Třetí metoda přiřazuje instanci Screen vybrané TopMenu. Jedná se svým způsobem o abstraktní třídu s některými předdefinovanými funkcemi. Tuto třídu dědí všechny třídy, jejiž instance chceme zobrazit na stage pomocí ScreenControlleru. Příklad užití: ... public c l a s s B u t t e r f l y G a m e S c r e e n extends S c r e e n ...

4.2.2.8

ScreenController

ScreenController je kontrolér, který spravuje zobrazovaný a schovávaný Screen. Postará se jak o fade-in, tak i a fade-out animace a rovnou Screen přidá nebo odebere ze stage, se

4.2. IMPLEMENTACE

27

kterou byl ScreenController inicializován. ScreenController se automaticky stará i o fade-in a fade-out animace TopMenu. Příklad užití: private f u n c t i o n o n S o m e I n t e r a c t i o n ( ) : void { S c r e e n C o n t r o l l e r . g e t I n s t a n c e ( ) . showScreen (new LetterMenuStep0 ( ) ) ; }

4.2.2.9

DrawLayer

Instance DrawLayer je kreslící vrstvou. Kreslící vrstva je obohacena lištou s nástroji. Jelikož flashové třídy nemají nativně implementované smazání části kreslení (gumu), bylo potřeba tuto vlastnost doimplementovat. Řešeno je to relativně jednoduchým způsob. Jsou zobrazeny dvě vrstvy – jedna vrstva je Bitmap, druhá vrstva je standardní Sprite. Aktuální tah je vždy zakreslován nativním kreslením ve flashi. Jakmile se tah ukončí (MouseEvent.MOUSE_UP nebo TouchEvent.TOUCH_END) je Sprite (IBitmapDrawable) překreslen do bitmapy. Pokud je vybrán nástroj guma, je při překreslování použit BlendMode.ERASE. Implementace ukončení tahu: /∗ ∗ ∗ Draws g r a p h i c s t o bitmap − i n c a s e o f e r a s e r , d e l e t e s t h a t p a r t s . ∗/ private f u n c t i o n endDraw ( ) : void { i f ( t o o l b a r . s e l e c t e d T o o l == ToolsEnum .CRAYON) { drawingBitmap . bitmapData . draw ( d r a w S p r i t e ) ; } e l s e i f ( t o o l b a r . s e l e c t e d T o o l == ToolsEnum .ERASER) { drawingBitmap . bitmapData . draw ( d r a w S p r i t e , null , null , BlendMode . ERASE ) ; } drawSprite . graphics . c l e a r ( ) ; }

4.2.3 4.2.3.1

Vybrané problémy Tvorba Bézierovy křivky

V režimu „nácvik písmen s motýlem“ bylo třeba motýlka animovat tak, aby jeho pohyb mezi dvěma body vypadal přirozeně. Proto byl naimplementován pohyb po Bézierově2 křivce. „Bézierova křivka je jednou z mnoha parametrických křivek. Umožňuje interaktivní vytváření a modifikaci jejího tvaru.“ [4] Tyto informace byly známy: • Bod a úhel, ze kterého bodu má motýl přiletět. • Bod a úhel, do kterého bodu má motýl přiletět. Křivka byla vytvářena na základě těchto známých informací a dalších tří, které musely být dopočítány. 2

Bézierova křivka, pojmenovaná po francouzském inženýru Pierru Bézierovi. [4]

28


Obrázek 4.6: Realizace – ukázka vypočítané Bézierovy křivky

Na obrázku 4.6 jsou znázorněny známé informace (černě), dopočítané body (zeleně) a načrtnutá Bézierova křivka (červeně). Pro pohyb objektu po bézierově křivce byl použit plugin BezierPlugin pro platformu TweenMax. Tak se jednoduše může regulovat délka animace a detekovat její konec. Díky parametru orientToBezier se rotace motýla sama mění podle směrnice tečny ke křivce. Implementace metody Butterfly::animateTo(): public f u n c t i o n animateTo (_x : Number , _y : Number , _ r o t a t i o n : Number , time : Number = 3 ) : void { _animationLock = true ; // s motylem nebude mozne po dobu animace h y b a t var r a d i a n 1 : Number = _ r o t a t i o n ; var r a d i a n 2 : Number = ( r o t a t i o n / 1 8 0 ) ∗ Math . PI − Math . PI ; // bod , do k t e r e h o l e t i z m i s t a kde p r a v e j e − pod uhlem j a k y p r a v e ma var f i r s t P o i n t : P o i n t = new P o i n t ( ) ; f i r s t P o i n t . x = x − DISTANCE∗Math . c o s ( r a d i a n 2 ) ; f i r s t P o i n t . y = y − DISTANCE∗Math . s i n ( r a d i a n 2 ) ; // druhy bod , z a c a t e k o t o c k y k m i s t u kam ma l e t e t var s e c o n d P o i n t : P o i n t = new P o i n t ( f i r s t P o i n t . x + 5 , f i r s t P o i n t . y + 5 ) ; // t r e t i bod , aby p r i l e t e l do bodu kam l e t i pod spravnym uhlem ( _ r o t a t i o n ) var t h i r d P o i n t : P o i n t = new P o i n t ( ) ; t h i r d P o i n t . x = _x − 2∗DISTANCE∗Math . c o s ( r a d i a n 1 ) ; t h i r d P o i n t . y = _y − 2∗DISTANCE∗Math . s i n ( r a d i a n 1 ) ; TweenMax . t o ( this , time , { bezier : [ { { { {

x: firstPoint .x, y: firstPoint .y }, x : secondPoint . x , y : secondPoint . y } , x : thirdPoint . x , y : thirdPoint . y } , x : _x , y : _y }

], o r i e n t T o B e z i e r : true , onComplete : onComplete } ); animationMoving ( ) ; }

4.3. VÝSLEDNÁ APLIKACE

4.2.3.2

29

Tlačítka v kantorské liště

Tlačítka v menu dědí třídu TopMenuItemBase. Ta se postará o rozšíření aktivní plochy tlačítka přidáním aktivního rámečku. Během testování se ukázalo, že je tento rámeček potřeba zvětšit. Toho se dá docílit lehce změnou konstanty MARGIN. Implementace rozšíření aktivní plochy u tlačítka: graphics . beginFill (0 , 0); g r a p h i c s . drawRect ( −MARGIN, −MARGIN, width + 2 ∗ MARGIN, h e i g h t + 2 ∗ MARGIN) ; graphics . endFill ( ) ;

Obrázek 4.7: Realizace – zobrazená (běžně neviditelná) aktivní plocha (červeně) v horní kantorské liště

4.2.3.3

Tvoření tajenky

Slova, která jsou pro tvorbu tajenky použita, jsou názvy věcí, které jsou na obrázcích Comenia Pictures. Proto jich je relativně omezené množství. Tvorba tajenek proto obsahuje jednoduchý algoritmus, který využívá seřazené četnosti písmen ze slov, ze kterých lze tajenku složit. Tím je zamezeno tomu, aby slovo, které obsahuje málo četné písmeno, bylo použito do tajenky pro písmeno velmi četné. Například při tvorbě tajenky „ŠUNKA“ je slovo „PAPOUŠEK“ svým způsobem rezervováno pro písmeno „Š“, protože písmeno „Š“ zatím žádné jiné slovo neobsahuje. Přitom by mohlo být do tajenky použito pro písmeno „U“ a třeba i „A“. 4.2.3.4

Přizpůsobení obsahu velikosti rozlišení

Celá aplikace se přizpůsobuje v závislosti na rozlišení. Jsou automaticky zarovnávány prvky a obsah aplikace se zvětšuje nebo zmenšuje. Aplikace se spouští v režimu „full-screen“.

4.3

Výsledná aplikace

Výsledná aplikace obsahuje možnost nácviku písmen, cvičení tvarů a tahů zábavnou formou a obsahuje generátor tajenek. Aplikace je multiplatformní – je bezproblémově spustitelná ve Windows, Mac OSx, Linux nebo i na tabletech s operačním systémem Android. Podporuje multi-touch (záleží na OS a HW). Aplikace byla otestována na několika interaktivních tabulích a se všemi bezvadně fungovala. Součástí přílohy je CD-ROM obsahující nejnovější verzi aplikace.

30


Takto (obrázek 4.8) v tuto chvíli vypadají nastavující obrazovky režimu „nácvik písma“. Oproti návrhu je horní lišta zvýrazněna šedým pásem a inverzní barvou textu.

Obrázek 4.8: Realizace – snímek obrazovky – nastavení – kroky 1 a 3 Obrázky 4.9 zachycují režim „nácvik písem“. Konkrétně obrázek vlevo zobrazuje režim s nastavením písmene „p“ na jednom řádku a obrázek vpravo nastavení písmene „s“ na dva řádky pro dvě děti (režim „split-screen“).

Obrázek 4.9: Realizace – snímek obrazovky – „nácvik písmen“ Na obrázku 4.11 je zachycen režim „nácvik písmen s motýlem“. V horní kantorské liště jsou tlačítka pro rychlou změnu písma a tlačítko pro návrat zpět do menu. Uprostřed je velký model písmene, na kterém jsou umístěny kytičky s čísly. Úkolem dítěte je táhnutím motýlka sesbírat všechny květiny. Tento režim nebyl zahrnut v návrhu uživatelského rozhraní.

Obrázek 4.10: Realizace – snímek obrazovky – „nácvik písmen s motýlem“

4.3. VÝSLEDNÁ APLIKACE

31

Na obrázku 4.11 je snímek obrazovky aplikace při spuštěném režimu tajenky.

Obrázek 4.11: Realizace – snímek obrazovky – tajenka

Obrázek 4.12 demonstruje funkčnost aplikace na tabletu s operačním systémem Android.

Obrázek 4.12: Realizace – aplikace spuštěná na tabletu s Android OS

32


Kapitola 5

Testování Během dubna roku 2011 byly za pomoci Radany Lencové osloveny dvě vybrané učitelky, které se zúčastnily uživatelského průzkumu, za účelem uspořádání testování aplikace přímo ve třídě s dětmi. Obě učitelky souhlasily. Pro potřeby testování se podařilo zajistit zapůjčení mobilní varianty interaktivní tabule JAWIQ. Testováním se mělo ověřit, zda navržené uživatelské rozhraní je přívětivé a intuitivní. Dále se mělo otestovat, jestli navržený systém nastavovacích obrazovek nebude kantorky příliš zatěžovat, a tím jim bude šetřit čas.

5.1

Příprava na testování

Aby aplikace mohla být otestována, muselo být vytvořeno funkční menu a navigační část aplikace. To ovšem nebylo nic složitého, díky dobře připravenému jádru aplikace. Pro průběh testování byl připraven jednoduchý scénář:

Úkol 1 Spusťte psací režim s písmenem „A“ s obrázkem a tečkovanou předlohou písmena A na třech řádcích pro jedno dítě. Při vykonávání tohoto úkolu učitelkou se ověřovalo, zda bude dobře porozuměno nastavovacím krokům předcházejícím režimu „Nácvik písmen s linkami“.

Úkol 2 Navraťte se zpět do hlavní navigace a spusťte psací režim s písmenem „m“ bez předlohy na dvou řádcích s rozdělenou obrazovkou pro 2 děti. Tento úkol měl ověřit, zda testovaný rozumí nastavovacím krokům, a zda jsou testovanému z náhledů srozumitelné všechny kombinace nastavení, včetně rozložení pro dva žáky.

33

34

KAPITOLA 5. TESTOVÁNÍ

Úkol 3 Během práce s dětmi v režimu „Nácvik písmen s linkami“ vymažte psací plochu. Tímto úkolem se ověřovala orientace v kantorské liště a zároveň byla sledována reakce testovaného, kde se snaží tuto funkci hledat.

Úkol 4 Změňte písmeno na písmeno „j“. Tímto úkolem mělo být ověřeno, jakou možnost testovaný použije. Zda správně použije tlačítko „výběr písmene“ nebo chybně „zpět do menu“. Druhá varianta sice není zcela chybná, ale jedná se pomalejší postup, jelikož není zachována již vybraná kombinace nastavení.

Úkol 5 Spusťte dětem režim „Nácvik písmen hrou s motýlem“ a vyberte písmeno „A“. Při vykonávání tohoto úkolu bylo sledováno, jakým způsobem si testovaný poradí s již spuštěným režimem, a zda vybere správný postup pro spuštění zadaného režimu.

5.2 5.2.1

Průběh testování Testovaný subjekt 1

Do první školy jsme dorazili přibližně ve čtvrt na 9. Radana Lencová již byla na místě a s paní učitelkou nás již očekávaly. Přibližně ve tři čtvrtě na 9 jsme už měli ve třídě zapojenou a připravenou mobilní interaktivní tabuli. V tu chvíli se rozezněl zvonek a dětem začala desetiminutová přestávka. Během přestávky se děti začaly shromažďovat okolo interaktivní obrazovky s již zapnutou aplikací a překvapivě si během okamžiku byly samy schopny spustit režim nácviku písmene „m“ pro dva (režim „split-screen“). Tím, že se obrazovky dotýkalo několik dětí najednou, docházelo k „multi-touch chybám“. Ty jsou bohužel programátorsky neodstranitelné, jedná se o HW omezení. Paní učitelka dětem vysvětlila, že se mohou dotýkat obrazovky v jednu chvíli pouze dvě, tak již k této chybě téměř nedocházelo – docházelo k ní pouze tehdy, když některé z dětí udělalo nechtěný více-dotyk.

Obrázek 5.1: Testování – přestávka před plánovaným testováním

5.2. PRŮBĚH TESTOVÁNÍ

35

Obrázek 5.2: Testování – úvodní slovo

Obrázek 5.3: Testování – dítě u obrazovky

Po přestávce se děti vrátily zpět do lavic a slova se opět ujala učitelka. Představila nás a vysvětlila dětem důvod naší návštěvy. Testování mohlo začít. Během testování paní učitelka několikrát oznámila, že se omlouvá, že je velmi nervózní. Vždy byla uklidňována, že o nic nejde. Všechny úkoly nakonec s drobnou pomocí úspěšně zvládla. Poté s dětmi pokračovala v práci v programu dle svého uvážení. Během toho bylo opět sledováno chování a reakce jak kantorky, tak i dětí a byly tvořeny poznámky o nastalých problémech. Paní učitelka před ukončením testování před dětmi projevila zájem, zda by si nemohla i tuto nefinální aplikaci ve třídě nechat a nainstalovat ji do jejich interaktivní tabule. Po odsouhlasení se ve třídě ozval dětský jásot. Hodina skončila a dětem opět začala přestávka. Během této doby byla nainstalována aplikace do počítače ve třídě. Děti se po jejím spuštění opět začaly shromažďovat, tentokrát okolo jejich vlastní interaktivní tabule, a aplikaci si opět i během přestávky chtěly vyzkoušet. Interaktivní tabule SmartBoard má ve své dolní části čtyři držáky na různobarevná pera. Tyto držáky v sobě mají speciální sensor zjišťující přítomnost pera, a tak je počítač schopen rozeznat, jakou barvou je na tabuli psáno. Bohužel tuto informaci není možné ze systému zjistit. Jednou z funkcí obslužného programu pro toto zařízení je automatické otevření kreslící plochy přes spuštěné programy právě při vyndání pera z držáku. Kdykoliv je pero z držáku

36


Obrázek 5.4: Testování – zkouška aplikace na interaktivní tabuli SmartBoard

vyndáno, je vyvolána tato kreslící vrstva a právě otevřenou aplikaci není možné ovládat. Takto vznikla jediná nepříjemná situace celého testování. Jedno z dětí se rozplakalo, protože bylo vyrušeno při nácviku písmene s motýlem (jeho práce byla v tu chvíli zkažena) a dokonce otevření této vrstvy způsobil pád aplikace.

5.2.2

Testovaný subjekt 2

Jelikož ve třídě druhé školy, do které se za testováním vyrazilo, měli interaktivní tabuli jako čerstvou novinku (týden před naší návštěvou ji instalovali), tak paní učitelka navrhla, zda by test nemohl probíhat přímo na ní. Po příchodu do třídy paní učitelka seděla s dětmi v zadní části na koberci u interaktivní tabule a probíhala výuka matematiky. Po několika minutách začala přestávka a děti začaly ve svých lavicích svačit. Třída neměla standardní frontální rozložení lavic, ale měla je sražené k sobě po šesti žácích. Jednalo se totiž o třídu se speciálním zaměřením na týmovou práci.

Obrázek 5.5: Testování – úvodní slovo 2 Po přestávce (okolo 11 hodiny) se začalo s testováním. Děti opět seděly na koberci okolo interaktivní tabule v zadní části učebny a paní učitelka se ujala slova. Načež velmi překvapila, protože se nedržela scénáře. Namísto toho začala sama zjišťovat, co aplikace umí a zdálo

5.3. ZÁVĚR TESTOVÁNÍ

37

se, jako kdyby ji neovládala poprvé. Ve třídě byla nainstalována opět interaktivní tabule SmartBoard obsahující stejnou poličku s držáky, tudíž docházelo ke stejným problémům jako v první škole. Zde ale byly děti učeny po sobě pera uklízet zpět do držáků, a proto je paní učitelka několikrát napomenula, aby je do držáku nevracely.

Obrázek 5.6: Testování – hlasící se děti Paní učitelka všechny úkoly bez problémů splnila, i když s drobnými změnami a v jiném pořadí. Nakonec se omluvila, že na seznam s úkoly během práce s dětmi naprosto zapomněla. To ale vůbec nevadilo. Byli jsme velmi překvapeni, s jakou chutí se do ovládání programu pustila a jak u toho byla klidná. Paní učitelce bylo na základě zkušeností z první školy navrženo, že pokud má zájem, může si tuto testovací verzi v počítači nechat. To oznámila dětem a děti stejně jako v první škole zajásaly.

5.3

Závěr testování

Testování proběhlo až na jedinou nepříjemnost s rozplakanou holčičkou nad očekávání. Děti daly najevo obrovský zájem o testovanou výukovou aplikaci a dokonce se velmi líbila i učitelkám. Navíc bylo zjištěno několik věcí, které jsou potřeba doopravit nebo doladit. Velmi se na testování projevil rozdíl technologií snímání a technologií použitých pro zobrazování. Jejich vliv na funkci programu byl opravdu velký. Například tabule SmartBoard se dětem lépe ovládala, ale naopak velmi nepříjemné bylo to, že si děti často stíní, a to někdy i na důležitou část obrazu (obraz je promítán projektorem). Dalším jejím problém je, že nemá multi-touch, a proto nebylo možné využít všech funkcí programu. Oproti tomu tabule JAWIQ, díky své vyšší citlivosti zaznamenávala i nechtěné pohyby, a jelikož na ní děti nebyly zvyklé, dalo se to v tu chvíli považovat za nevýhodu. Aplikace se dětem ovládala lépe na obou tabulích stylusem. Zjištěné problémy • Nejistota funkčnosti tlačítek (obrázků) při prvním kroku nastavování. • Nejistota funkčnosti tlačítek při třetím kroku – rozdělení obrazovky ve dví není z náhledu jasné.

38


• Při výběru již označeného nástroje ve spodní liště se nástroj odznačí a již nejde znovu vybrat. • Plocha tlačítek v kantorské liště je příliš malá. Na učitelce byla vidět nejistota, zda se na tlačítko trefila či nikoliv. • V režimu „Nácvik písmen hrou s motýlem“ je v některých situacích vyhodnocování příliš přísné. • V některých chvílích děti nedosáhly (kvůli výšce) na vrchní část písmene. Navrhovaná řešení • Umístit pod obrázky a náhledy ve všech nastavovacích krocích textový popisek. • Na již vybraný nástroj nebude možno podruhé kliknout. • Zvětšit aktivní plochu tlačítek. Popřípadě vytvořit zpětnou vazbu v podobě podkreslení tlačítka. • V režimu „Nácvik písmen hrou s motýlem“ snížit citlivost opravování. • Přidat do kantorské lišty možnost zmenšit a umístit písmeno níž.

Kapitola 6

Závěr 6.1

Pokračování práce

Během uživatelského průzkumu vzniklo několik zajímavých požadavků, které se nestihly naimplementovat. Jsou zde ale i jiné nedokončené práce, které z důvodu své časové náročnosti nebyly zpracovány. Pro tyto potřeby byl vytvořen takzvaný TODO list.

Implementační TODO Díky navrženým třídám se vlastně jedná o naprogramování modulů a jejich zapracování do menu. • Naimplementování systému osmisměrek – viz požadavek SRx-03 • Naimplementování systému skládání slov – viz požadavek SR4-01 • Naimplementování systému psaní slov – viz požadavek SR4-02 a návrh UR 3.6. • Zapracovat všechny navrhované řešení problémů z testování.

Manuální TODO Zde se jedná spíše o manuální práce – například u přidávání písmen je potřeba každé zvlášť naimportovat a nastavit k němu všechny potřebné informace (záchytné body, letter spacing a obrázek). • Přidat všechna písmena a číslice

Grafické práce TODO Tyto práce hlavně záleží na Radaně Lencové, jakožto ilustrátorce celého projektu. • Minimálně menu programu je potřeba osadit hezkou ilustrací a nejlépe ji i rozanimovat.

39

40

6.2

KAPITOLA 6. ZÁVĚR

Zhodnocení splnění cílů

V rámci bakalářské práci se podařilo analyzovat, navrhnout, implementovat a otestovat výukový software pro výuku písma Comenia Script. Byl tak splněn hlavní cíl bakalářské práce – vytvořit software pro výuku písma Comenia Script. Oproti očekávání byl velký prostor věnován analýze a návrhu. V prvopočátku autor práce vůbec nepředpokládal, že bude jezdit po základních školách a dělat interview s učitelkami prvních tříd. Ani neočekával tak velký přínos informací, které během všech interview získal. Největší prioritou se stala jednoduchost ovládání a nastavení. Díky konzultacím s Radanou Lencovou dosáhl dobrého výsledku. Tyto konzultace se staly velmi cennou zkušeností, protože ne vždy má člověk možnost komunikovat s tak šikovnými lidmi. Implementace nebyla pro autora práce nijak těžká, protože má s flashem letité zkušenosti, takže i z tohoto pohledu dosáhl relativně dobrých výsledků.

6.3

Přínos práce

Program jako nástroj usnadní učitelům výuku písma Comenia Script. Samozřejmě bez zkušeností kantora není možné, aby sama aplikace byla schopna děti učit. Citace e-mailu jedné z učitelek po testování: „Vysvětluju-li já metodiku psaní písmen, nemá to ten efekt jako hra s motýlem a práce na IT. Děti jsou nadšené. A Komenský by byl taky. Bylo by skvělé, aby se Váš program brzo dostal do škol / počítáte s tím ? /. Třeba si v září připomenout , jak se jednotlivá písmena píší. Jednoduché a velmi efektní.“ Autorovi práce osobně práce přinesla zkušenosti z oblasti návrhu uživatelského rozhraní. Tím, že si prošel celou fázi od sběru dat až po implementaci, a že byl na celý projekt sám, má povědomí o tom, co všechno návrh a tvorba takovéhoto software obnáší.

Odkazy [1] Greensock. GreenSock Tweening Platform [online]. 2011. [cit. 12. 5. 2011]. Dostupné z: http://www.greensock.com. [2] Jakub Franz. Přednáška Jakuba Franze na téma UR [online]. 2011. [cit. 20. 5. 2011]. Dostupné z: http://soundcloud.com/nur2010/prednaska-jakuba-france-30-09-2010. [3] Mika Palmu. Flash Develop [online]. 2011. [cit. 19. 5. 2011]. Dostupné z: http://www.flashdevelop.org/. [4] Přispěvatelé Wikipedie. Bézierova křivka [online]. 2011. [cit. 20. 5. 2011]. Dostupné z: http://cs.wikipedia.org/wiki/Bézierova_křivka. [5] Přispěvatelé Wikipedie. Enterprise Architect [online]. 2011. [cit. 20. 5. 2011]. Dostupné z: http://cs.wikipedia.org/wiki/Enterprise_Architect. [6] Přispěvatelé Wikipedie. Adobe Flash [online]. 2011. [cit. 20. 5. 2011]. Dostupné z: http://en.wikipedia.org/wiki/Adobe_Flash. [7] Přispěvatelé Wikipedie. Jan Solpera [online]. 2011. [cit. 12. 5. 2011]. Dostupné z: http://cs.wikipedia.org/wiki/Jan-Solpera. [8] Přispěvatelé Wikipedie. SW požadavky [online]. 2011. [cit. 12. 5. 2011]. Dostupné z: http://cs.wikipedia.org/wiki/Analýza_požadavků. [9] Radana Lencová. Comenia Script [online]. 2011. [cit. 12. 5. 2011]. Dostupné z: http://www.lencova.eu.

41

42

ODKAZY

Příloha A

Seznam použitých zkratek SWF ShockWave Flash AS Action Script RIA Rich Internet Application CS Creative Suite UR User research HW Hardware

43

44

PŘÍLOHA A. SEZNAM POUŽITÝCH ZKRATEK

Příloha B

Manuál k aplikaci B.1 B.1.1

Požadavky pro běh aplikace Platforma PC:

Minimální požadavky: • 1.6GHz Intel Atom, 128MB RAM, minimální rozlišení 800x480 • Prohlížeč s nainstalovaným Flash Playerem 10.1 nebo vyšším, nebo nainstalované prostředí Adobe AIR 2.6 nebo vyšší. Doporučené požadavky: • 2.33GHz Intel Pentium 4, AMD Athlon 64 2800+, 256MB RAM, rozlišení 1280x720 a vyšší. • Prohlížeč s nainstalovaným Flash Playerem 10.1 nebo vyšším, nebo nainstalované prostředí Adobe AIR 2.6 nebo vyšší.

B.1.2

Platforma Android (ARM):

Minimální požadavky: • Dedicated Cortex A8 (ARMv7) 800MHz App Processor, Hardware Vector FPU, 128MB RAM a rozlišení minimálně 800x480. Úhlopříčka 7". • Android 2.2 s prostředím Adobe AIR 2.6. Doporučené požadavky: • Dvoujádrový ARM Cortex - A9 MPCore 1GHz, 256MB RAM a rozlišení 1024x600. Úhlopříčka 10.1". • Android 3.0 s prostředím Adobe AIR 2.6.

45

46

PŘÍLOHA B. MANUÁL K APLIKACI

B.2

Pokyny ke spuštění z CD-ROM

Pokud si nepřejete aplikaci instalovat, je ji možné spustit přímo z přiloženého CD-ROM. Program lze spustit prostřednictvím prohlížeče s pluginem Flash Player nebo přes vytvořené spustitelné soubory. • /run/ComeniaScript.exe - Verze pro Microsoft Windows. • /run/ComeniaScript.app - Verze pro Mac OS. • /run/ComeniaScript.html - Verze pro jakýkoliv prohlížeč s nainstalovaným pluginem Flash Player 10.1 a vyšší.

B.3

Pokyny k instalaci

Pokud si chcete aplikaci nainstalovat, použijte instalátory ve složce /install/. • /install/ComeniaScript.air - Instalační soubor pro všechny platformy. Vyžaduje prostředí Adobe AIR 2.6. • /install/ComeniaScript.exe - Instalační soubor pro platformu Windows. Vyžaduje prostředí Adobe AIR 2.6, pokud není nainstalováno, nabídne jeho stažení a instalaci. • /install/ComeniaScript.apk - Instalační soubor pro platformu Android OS. Vyžaduje v tabletu mít nainstalováno prostředí Adobe AIR 2.6, které je zdarma k dispozici v obchodu Android Market.

Příloha C

Obsah přiloženého CD-ROM

Obrázek C.1: Obsah přiloženého CD-ROM

47

Software pro výuku písma Comenia Script. Jakub Wagner

Recommend Documents