České vysoké učení technické v Praze Fakulta elektrotechnická
Bakalářská práce Nástroj na tvorbu multimodálních aplikací Filip Ornstein
Vedoucí práce: Ing. Adam Sporka
Studijní program: Elektrotechnika a informatika Obor: Informatika a výpočetní technika Srpen 2007
Prohlášení Prohlašuji, že jsem svou bakalářskou 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 22.8. 2007 . . . . . . . . . . . . . . . . . .
iii
Abstract The project deal with proposal and implementation of web application based on Web 2.0 principles. Application serves to fast prototyping of multi-modal applications with voice interface (RApid Multimodal Application DEvelopment Tool, RAMADET). The fundamental structure of the application is formed by lectures and quizes. The lecture is quided by voice synthesis and the knowledge quiz utilizes speech recognition. The markup language XHTML + Voice is used for the implementation of voice interface. Final web application is placed at http://ramadet.com. Abstrakt Práce se zabývá návrhem a implementací webové aplikace založené na principech Web 2.0. Aplikace slouží k rychlému prototypování multimodálních aplikací využívajících hlasové rozhraní (RApid Multimodal Application DEvelopment Tool, RAMADET). Nosnou strukturou aplikace byly zvoleny lekce a kvízy. Výklad ve výukové části lekce je veden syntézou řeči a následné ověření znalostí kvízem využívá rozpoznávání řečových příkazů. Pro implementaci hlasového rozhraní je použit značkovací jazyk XHTML + Voice. Výsledná webová aplikace je umístěna na adrese http://ramadet.com.
v
Obsah 1 Úvod..................................................................................................................................11 1.1 Multimodální rozhraní...............................................................................................11 1.2 Co se děje ve světě.....................................................................................................11 1.3 Cíle práce...................................................................................................................12 2. Analýza problému...........................................................................................................13 2.1 Současný trend webových aplikací............................................................................13 2.2 Web 2.0......................................................................................................................13 2.2.1 Wikipedia...........................................................................................................14 2.2.2 Flickr..................................................................................................................14 2.2.3 YouTube.............................................................................................................15 2.3 Podpora hlasu v prohlížeči........................................................................................15 3 Návrh řešení.....................................................................................................................16 3.1 Klíčová slova.............................................................................................................16 3.2 Navigační mapa.........................................................................................................18 3.3 Vzhled........................................................................................................................20 3.3.1 Požadavky..........................................................................................................20 3.3.2 Návrh..................................................................................................................20 3.4 Přidání atomu.............................................................................................................21 3.4.1 Uvedení údajů o atomu......................................................................................21 3.4.2 Přiřazení mediálních souborů............................................................................21 3.4.3 Úprava náhledů..................................................................................................22 3.5 Vytvoření lekce..........................................................................................................23 3.6 Výuková lekce...........................................................................................................24 3.7 Kvíz...........................................................................................................................24 3.8 Výběr technických prostředků...................................................................................25 3.8.1 Programovací jazyk...........................................................................................26 3.8.2 Framework.........................................................................................................26 3.8.3 Využití knihoven................................................................................................27 4 Implementace...................................................................................................................28 4.1 Webová aplikace........................................................................................................28 4.2 Databázové schéma...................................................................................................30 4.3 Použité knihovny.......................................................................................................32 4.4 Využívané služby.......................................................................................................33 4.5 Hlasové rozhraní........................................................................................................33 4.5.1 Výuková lekce....................................................................................................34 4.5.2 Kvíz....................................................................................................................34 5 Uživatelský test................................................................................................................37 5.1 Cíle.............................................................................................................................37 5.2 Typický uživatel.........................................................................................................37 5.3 Scénář........................................................................................................................37 5.4 Dotazník.....................................................................................................................38 5.5 Data............................................................................................................................39 5.6 Vyhodnocení..............................................................................................................40 6 Závěr.................................................................................................................................41 Seznam zdrojů....................................................................................................................42 vii
Příloha A – Seznam použitých zkratek.............................................................................44 Příloha B – Adresářová struktura aplikace.....................................................................46 Příloha C – Obsah přiloženého CD...................................................................................47
ix
1 Úvod 1.1 Multimodální rozhraní Dnešnímu běžnému uživatelskému rozhraní počítačového systému dominuje vizuální modalita: obrazovka, klávesnice a myš. Tato základní trojice tvoří standard ovládání počítače tak, jak ho chápe naprostá většina uživatelů. Zatím často opomíjeným principem je řečová modalita využívající hlasové rozpoznávání [1] – vstup a řečovou syntézu [2] v kombinaci s připravenou zvukovou nahrávkou – výstup. Všechny zmíněné modality jsou nejsilnějšími principy konceptu multimodálního ovládání, který má zvýšit použitelnost a přívětivost uživatelských rozhraní. Uživatelé díky různým způsobům zadávání příkazu mohou kompenzovat technické nedostatky použitého zařízení, např. malé klávesnice na mobilním telefonu nebo jiná omezení vyplývající z prostředí a pracovních procesů. Dobrým příkladem je hlasová navigace řidiče. Další velkou motivací je, že vhodně navržená multimodální aplikace může zpřístupnit technologie osobám s různými hendikepy.
1.2 Co se děje ve světě Masové rozšíření hlasové modality rozhraní je v nedohlednu, přesto je myšlenka velmi živá na poli výzkumu a vývoje. Bylo napsáno mnoho studií o využitelnosti, vznikají standardy a obecná doporučení. Existují první úspěšné multimodální aplikace s využitím hlasu a mnoho společností pracuje na samotných systémech rozpoznávání a syntézy lidské řeči, mimo jiné i zadavatel této práce IBM Česká republika, spol. s r.o. Nedílnou součástí systému podporujícího více modalit je řečový modul. Moderní syntéza řeči dosáhla obecně použitelné kvality a podle nedávného zjištění byla částí uživatelů označena pro určitý typ interpretovaných informací za vhodnější, než přirozené lidské slovo. Použitelnost strojového rozpoznávání řeči je problematičtější. Sice již vykazuje značnou míru přesnosti i rychlosti při mluvených diktátech [3], ale na druhou stranu se na ni nelze zcela spolehnout v případech, kdy je třeba vyloučit rizika vyplývající z chybné interpretace mluveného slova. Proto se hodí pouze ke specifickým nekritickým aplikacím.
11
Pro další rozvoj těchto systémů je zapotřebí hledat taková využití, která díky své atraktivitě umožní rozšíření mezi běžné uživatele. V komerčně úspěšné oblasti to jsou mobilní telefony s možností vyvolání funkce hlasem, aplikace pro navigaci určené do automobilu, interaktivní systémy na telefonním rozhraní apod. World wide web zůstává v tomto ohledu stále na okraji zájmu.
1.3 Cíle práce Cílem projektu bylo navrhnout a implementovat webovou aplikaci založenou na principech Web 2.0 sloužící k rychlému prototypování multimodálních aplikací využívajících hlasové rozhraní (RApid Multimodal Application DEvelopment Tool, RAMADET). Klíčový cíl Ramadetu je tak dát komunitě uživatelů možnost vytvoření pevně strukturované řečové aplikace bez znalosti programování. Jako nosnou strukturou aplikace jsem zvolil multimodální lekce a kvízy. Tento druh aplikace určitě najde využití při výuce cizích jazyků, historie umění, biologie, geografie atp. Jinak řečeno všude, kde lze efektivní formou spojit zrakový a sluchový vjem se slovní interpretací. Aplikace zahrnuje nástroje pro rychlou tvorbu výukových lekcí a pro následné přezkoušení. Kvůli danému zaměření na podporu médií a komunitní charakter bylo třeba při návrhu sledovat směr, kterým se ubírají úspěšné komunitní webové projekty na správu a publikaci obrázků a videa. Aplikace není omezena na konkrétní téma zpracovávané látky a využívá poznatků z tvorby předchozí verze aplikace, je však od základů přepsána. Pro implementaci byl využit framework umožňující abstrakci nad elementárními problémy webového programování. Podpora pokročilých akcí uživatelského rozhraní a rozdíly v implementaci různých webových prohlížečů jsou vyřešeny použitím dostupných knihoven. Závěrem byl proveden krátký uživatelský test. Uživatelům bylo zadáno několik úkolů k provedení a zpětná vazba byla získána prostřednictvím dotazníku. Pozornost byla soustředěna na použitelnost multimodálního ovládání a na přehlednost uživatelského rozhraní. Při vyhodnocení jsem přihlédl k usability testu, kterým prošla první verze aplikace.
12
2. Analýza problému 2.1 Současný trend webových aplikací World wide web je dnes nedílnou součástí komunikace. Dřívější technické limity se výrazně posunuly, nebo zcela vymizely. Pokrytí internetem se stále zvyšuje a zdá se, že mu kromě autoritativních režimů netvoří překážku téměř nic. Z vlastní zkušenosti vím, že dnes není problém nalézt internetovou kavárnu ani na menších městech v zemích třetího světa. Rychlost připojení běžné domácnosti dnes dalece převyšuje hodnoty na páteřní síti před deseti lety [4]. Díky tomu pro běžného uživatele přestává být rozlišitelná rychlost přenosu dat z internetu a z pevného disku, i když zůstává řádově rozdílná. Je těžké odlišit důsledek a příčinu expanze internetu. Lepší kvalita připojení generuje větší přenášené objemy a naopak. Tyto vlivy stírají rozdíl mezi klasickou desktopovou aplikací a internetovou prezentací. Internetové aplikace převzaly mnoho rysů typických pro aplikace vybudované na API jednotlivých operačních systémů, navíc bývají kompatibilní napříč počítačovými platformami. Ačkoliv je nejpoužívanější webový protokol HTTP bezstavový, byl zaveden způsob, jak udržet a synchronizovat informace po celou dobu sezení. Postupy využívající DOM, CSS a Javascript se postaraly o funkčnost podobnou konvenčním aplikacím. Je možné relativně věrně a hlavně funkčně napodobit akce klasického uživatelského rozhraní, jako je drag & drop, překreslení obsahu konkrétního prvku, ořez obrázku apod.
2.2 Web 2.0 Za otce termínu Web 2.0 bývá považován Tim O'Reilly. V článku Co je Web 2.0 [16] O'Reilly popisuje nové směry, kterými se vyvíjely internetové prezentace. Díky své autoritě pomohl přitáhnout více pozornosti k tomuto tématu. Z hlavních rysů fenoménu Web 2.0 vybírám pár bodů, které inspirovaly i tuto práci: Web je nezávislá platforma. Uživatel je spolutvůrce. Uživatel má pod kontrolou svá vlastní data. Důvěřuj svým uživatelům. Využití kolektivní inteligence. Bohatá uživatelská zkušenost. A v neposlední řadě – Trvalá betaverze.
13
Obr.1: Web 2.0 Meme Map; zdroj [http://www.oreillynet.com]
Nejviditelnější inspirací pro mou práci jsou servery Wikipedia [13], Flickr [14] a YouTube [15]. Každý z nich v detailech těží z odlišných principů, zatímco mají společné to, že jejich obsah je unikátním zdrojem informací vytvořeným samotnými uživateli. Všechny tyto servery se nebrání anonymnímu uživateli. Anonymní uživatel má pro prohlížení, procházení a vyhledávání často stejné podmínky, jako ten registrovaný. 2.2.1 Wikipedia Wikipedie je encyklopedie, kterou může kdokoliv upravovat a rozšiřovat. Dokazuje, že komunita uživatelů má v dobře nastaveném systému dostatečnou schopnost seberegulace a autocenzury a především schopnost vytvořit hodnotný výsledek. V anglické verzi obsahuje téměř dva miliony setříděných a často ilustrovaných pojmů. 2.2.2 Flickr Flickr slouží ke správě, sdílení a prezentaci fotografií. Úvodní stránka pobízí uživatele Sdílej své fotky. Pozoruj svět. Aplikace zjednodušuje publikaci fotografií na internetu. 14
Sama vytváří náhledy různých velikostí včetně čtvercových výřezů. Od ostatních uživatelů autor získává zpětnou vazbu prostřednictvím slovních komentářů v diskusi pod každou fotografií. 2.2.3 YouTube Heslem YouTube je Vysílej sám sebe. Uživatel může nahrávat svá videa. Získává podobně jako v na Flickru diváky a cennou vazbu prostřednictvím komentářů. Navíc může sledovat bodové ohodnocení svého díla. Za popularitu server YouTube vděčí tzv. Viral marketingu [17]. Odkaz na zajímavé nebo zábavné video se sítí šíří podobně jako virová nákaza. Myslím, že snad každý, kdo používá internet, už nějaký odkaz na video umístěné právě na YouTube dostal a podělil se o něj s někým dalším.
2.3 Podpora hlasu v prohlížeči Pro implementaci multimodálních webových stránek se v současné době nejčastěji využívá značkovací jazyk XHTML + Voice [8] zkráceně zvaný X+V. Vychází z modularizace XHTML [9], která přinesla konzistentní způsob rozšiřování dokumentů rodiny XHTML. Profil X+V obohacuje jazyk XHTML předně o moduly VoiceXML 2.0 a XMLEvents. Formát XHTML + Voice iniciovaly společnosti IBM, Motorola a Opera Software [10]. Je snahou o standardizovaný otevřený formát, který není v důsledku zatížen patenty [11]. Zatím jedinou volně dostupnou implementaci X+V obsahuje prohlížeč Opera ve verzi 9.x pro Microsoft Windows. Dodavatelem hlasového modulu je IBM. V současné době to znamená výrazné omezení na prohlížeč i na platformu. Jak jsem předeslal, X+V je otevřený formát a lze do budoucna očekávat jeho další implementace.
15
3 Návrh řešení Při návrhu postupuji od vymezení klíčových slov. Návrh uživatelského rozhraní se odvíjí od předpokládané navigační mapy stránek k návrhu rozložení obecné stránky. Následuje vytvoření jednotlivých podstránek. Velkou pozornost vyžadují procesy přidání nového atomu a nové lekce, protože se skládají z mnoha dílčích kroků. Do učebních lekcí a kvízu je potřeba zapojit zvukovou modalitu. Na závěr vyberu vhodnou technologii pro realizaci návrhu.
3.1 Klíčová slova Aplikace je založena na myšlence multimediálně ilustrovaného slovníku pojmů. Pro snazší orientaci a vyhledávání v obsahu jsou pojmy navzájem asociovány pomocí tagů, jednoslovných výrazů. Díky tagům může uživatel při tvorbě lekce snáze vybírat příbuzné pojmy k zařazení. Jako příklad dobře poslouží vytváření lekce „Savci“. Uživatel napřed zkusí vyhledat výraz „Savec“, případně „Zvíře“. Nenajde-li všechny požadované savce, tak přidá do slovníku pouze ty savce, které v něm postrádá. Nyní má k disposici všechny zamýšlené savce a může přistoupit k vytváření lekce. Výhodou společného slovníku pojmů je, že až se bude v budoucnu kdokoliv zabývat vytvářením lekce na téma „Domácí zvířata“, tak bude mít již část materiálu připravenou.
Obr. 2: Obrázek zobrazuje hierarchii hlavních pojmů.
16
Atom Základním stavebním kamenem je tzv. Atom. Atom lze nejsnáze připodobnit k pojmu ve výkladovém slovníku. Obsahuje samotný termín, jeho stručný popis, seznam synonym a je ilustrován různými typy medií. Media Médium je obrázek ve formátu JPEG nebo PNG, video záznam ve formátu FLV nebo audio záznam ve formátu MP3. Tag Tagy neboli nálepky určují bližší zařazení atomu, např. atom kočka se váže s tagy: zvíře, savec, domácí, dravec, šelma atd. Vztah mezi tagy a atomy je n:m. Atom může být označen více tagy a tag může být přiřazen více atomům. Lecture Lekce jsou těžištěm aplikace. Každá lekce obsahuje dvě interaktivní části – výukovou část a kvíz. Lekce se komponuje vybráním souvisejících atomů. Každému zařazenému atomu uživatel vytvoří výkladovou frázi vycházející z kontextu lekce. Pro účely kvízu zvolí vhodné otázky a upraví příslušné odpovědi. Learn Learn je zmíněnou výukovou částí lekce. Uživatel se v ní naučí rozpoznávat atomy a vyslovovat jejich jména, případně se dozví další informace potřebné ke splnění kvízu. Quiz Kvíz slouží k ověření získaných znalostí. V časovém limitu musí uživatel postupně odpovědět na všechny otázky. Na konci se zobrazí výsledky testu a správné odpovědi.
17
3.2 Navigační mapa
Obr. 3: Zjednodušená mapa stránek.
Home Domovská stránka tvoří první dojem na nově příchozího návštěvníka. Měla by upoutat pozornost a nabídnout informace důležité pro pochopení smyslu aplikace. Zároveň musí zůstat přehledná. Vedle náhodného výběru lekcí obsahuje krátký text o aplikaci. Pozornost přihlášeného uživatele je nasměrována k tvorbě lekcí a je doplněna o možnost personalizace. Atoms Výchozím pohledem je seznam nejnovějších atomů s možností seřazení podle abecedy. Zobrazení každého atomu sestává z titulku, náhledu a prvních zhruba 70ti znaků popisu. Zobrazení celého textu popisu je zajištěno pomocí AJAXu a není k němu potřeba znovu načítat stránku. Lectures Výchozím pohledem je vylistování všech dostupných lekcí s možností jejich seřazení podle stáří, abecedy, hodnocení a obtížnosti. Každá lekce je reprezentována jménem, náhledem a úryvkem zhruba 150ti prvních znaků popisu. Navíc obsahuje informaci o oblíbenosti a obtížnosti (vyhodnocenou z dosavadních výsledků).
18
Learn Zobrazí se všechny začleněné atomy s náhledy přiřazených médií. Uživatel prochází jednotlivé položky a kliknutím na příslušnou ikonu si nechá hlasovou syntézou přeříkat připravenou repliku. Quiz Krok po kroku je uživatel dotazován připravenými otázkami. K tomu mu jsou zobrazovány související obrázky, přehrávána videa a reprodukovány audio záznamy. Reagovat je možné jak napsáním odpovědi na klávesnici, tak zadáním hlasového příkazu. Pro zvýšení komfortu jsou odpovědi porovnávány s celým seznamem synonym a alternativ. Před porovnáním navíc dojde k odstranění všech ne alfa-numerických znaků. Na konci kvízu je zobrazeno vyhodnocení. Úspěšný přihlášený uživatel je automaticky zapsán do tabulky deseti nejlepších. People Každý registrovaný uživatel si ve svém profilu může vyplnit informace o sobě. Na stejném místě je možné si nahrát svůj avatar. Pro podporu komunitního charakteru je v seznamu uživatelů zobrazováno kolik atomů a lekcí již přidali. To by mohlo motivovat aktivní uživatele v další činnosti. Tags Každý atom může být označen libovolným počtem tagů. Lekce jsou v důsledku kategorizovány přes jim příslušející atomy. Tagy slouží k lepší orientaci uživatele a především ke snazšímu vyhledávání. Výchozím pohledem na tagy je jejich seznam, kde velikost fontu každého tagu je odvozena od násobnosti jeho zastoupení v systému. Search Výsledek vyhledávání je tematicky rozdělen na lekce, atomy, tagy a registrované uživatele. První místa odpovídají přesné shodě v názvu, na dalších místech jsou výsledky pocházející z fulltextu a související položky. K vyhledávání souvislostí se používají tagy. Díky systému tagů by měly být výsledky relativně přesné a s ohledem na vyhledávaný výraz zajímavé.
19
3.3 Vzhled 3.3.1 Požadavky Hlavním požadavkem je jednoduchost a přímočarost designu. Design by neměl uživatele omezovat a zároveň by neměl být zbytečně rozsáhlý. Před komplexní nabídkou plnou voleb upřednostňuji jejich zobrazení až v místě, kde mají smysl a kde jsou očekávány. 3.3.2 Návrh Na obrázku č.4 je možné vidět finální návrh vzhledu webové prezentace. Základem rozvržení je menu (1), stav přihlášení s možností registrace (2) a pole pro vyhledávání (3). Tato část oddělená zespoda horizontální čarou se zobrazuje na každé podstránce. Dále můžeme na obrázku vidět, jak vypadá domovská stránka nepřihlášeného uživatele. Po levé straně je stručný popis aplikace (4). Samotný obsah stránky začíná krátkým výčtem (5), ten obsahuje informaci o tom, kolik bylo přidáno lekcí, atomů, tagů, médií a kolik se zaregistrovalo uživatelů. Na následujícím řádku jsou výraznější odkazy na náhodně vybraný kvíz a učební lekci (6). Pro větší názornost následuje náhodný výběr dvou lekcí (7) a několika atomů (na této ilustraci nejsou zobrazeny).
Obr. 4: Návrh vzhledu aplikace s vyznačením jednotlivých prvků.
20
3.4 Přidání atomu Přidání nového atomu se skládá ze tří hlavních kroků. Nejdříve uživatel vyplní formulář s údaji o atomu. Následně vybere vhodná média pro reprezentaci atomu. V posledním nepovinném kroku je možné provést úpravu automaticky určených čtvercových náhledů. 3.4.1 Uvedení údajů o atomu U Atomu jsou vedeny tyto údaje: název atomu (např. kočka), synonyma (např. kočka domácí), stručný popis pojmu a tagy (např. kočka, domácí, savec, zvíře, dravec). Pro zjednodušené zadávání synonym je využit modul thesauru, který nabízí příbuzné pojmy (více viz. 4.4 Využívané služby). V popisu atomu je možné používat značkovací jazyky Textile a HTML. Tagy jsou v seznamu oddělovány mezerou. 3.4.2 Přiřazení mediálních souborů Aplikace umožňuje dva způsoby nahrání nového média. Jak nahráním souboru přes webové rozhraní, tak i vyhledáním souborů (jen obrázky) prostřednictvím webové služby Yahoo Image Search [33]. Z výsledků vyhledávání je možné vybraný obrázek přiřadit k atomu přetáhnutím myší (drag & drop).
Obr. 5: Na obrázku lze vidět proces přiřazení vyhledaného obrázku na místo náhledu atomu.
21
3.4.3 Úprava náhledů Každý obrázek používaný aplikací má čtvercový náhled. Jeho kompozici a velikost určuje aplikace při nahrání sama. Automatické určení náhledu závisí hlavně na poměru stran originálního obrázku. Nevyhovuje-li uživateli výsledek, může jej ručně upravit. Ořezový nástroj je podobný těm, které lze vidět v běžných grafických editorech.
Obr. 6: Na obrázku lze vidět způsob, jakým může uživatel změnit ořez obrázku pro náhled.
22
3.5 Vytvoření lekce Přidání nové lekce se skládá ze tří hlavních kroků. Napřed uživatel vyplní jméno a popis lekce. V druhém kroku vybere z existujících atomů ty, které nejlépe reprezentují zpracovávané téma. Zvolené atomy je možné přidat do lekce tažením myši (drag & drop), podobně jako v případě přiřazení obrázku k atomu. Třetím a posledním krokem je formulování otázek na základě zařazených atomů. Každá otázka obsahuje samotný dotaz, seznam možných odpovědí (existuje-li více správných). K otázce vždy přísluší i text sloužící jako zdroj pro výkladovou část lekce. Uživateli je umožněno tato pole upravovat, nebo je ponechat na výchozích hodnotách. Rozhraní pro vytváření lekcí je analogické s přidáváním nových atomů. Zásadní odlišností od procesu tvorby atomu je pouze krok formulování otázek, ten detailně ilustruje obrázek č. 7.
Obr. 7: Úprava výchozí otázky a odpovědi atomu přiřazeného do nové lekce.
23
3.6 Výuková lekce Výuková lekce je organizována jako výpis všech atomů obsahujících obrazový náhled a ikonu reproduktoru. Po kliknutí na náhled se zobrazí obrázek v plné velikosti, resp. se přehraje video, nebo zvuková nahrávka. Kliknutím na ikonu reproduktoru se prostřednictvím hlasové syntézy přehraje výklad. Vylistované atomy jsou pomocí CSS nastaveny jako plovoucí prvky. Při změně šířky stránky díky tomu dojde k přeskupení zobrazených prvků, konkrétně ke změně počtu prvků v jednom řádku. To zajišťuje efektivní využití zobrazené plochy a nezávislost na rozlišení monitoru a šířce okna prohlížeče.
Obr. 8: Z obrázku je patrný vzhled výukové lekce.
3.7 Kvíz Sezení kvízu je sledem ilustrovaných otázek. Stránce dominuje aktivní otázka sestávající z připravené tázací věty, formuláře pro odpověď a ilustrace médiem. Odpovědět lze buď ručním vyplněním textu pomocí klávesnice nebo hlasem. Rozpoznaný hlasový příkaz automaticky vyplní pole pro odpověď. Další otázka se zobrazí potvrzením odpovědi příslušným tlačítkem. Po stranách aktivní otázky jsou malé náhledy na předchozí a následující otázku. Po posledním kroku se zobrazí seznam všech otázek s náhledem média, samotnou otázkou a správnou odpovědí. Správnost odpovědí je označena podbarvením příslušných otázek. Na obrázku č.9 lze vidět typický pohled na právě zodpovídanou otázku. Na obrázku č.10 pak zobrazení výsledku kvízu.
24
Obr. 9: Na obrázku je vidět pohled na právě zodpovídanou otázku. Malý čtverec na pravé straně je náhled na další otázku. Čtverec na levé straně je prázdný, protože tato otázka je první v pořadí.
Obr. 10: Způsob zobrazení výsledků kvízu (zkráceno na první dva výsledky). První otázka byla zodpovězena správně, druhá nikoliv.
3.8 Výběr technických prostředků Pro implementaci jsem vybíral takové prostředky, abych dokázal co možná nejlépe využít téma zadání. Z předchozích školních i mimoškolních zkušeností jsem vybíral z 25
možností použít PHP a nalézt k němu vhodný framework, napsat aplikaci v Javě Enterprise, nebo v Ruby on Rails, které znám nejlépe. Pro poslední variantu jsem se rozhodl i proto, že bylo v Ruby on Rails napsáno několik úspěšných projektů s podobným zaměřením. Ruby on Rails [18] je model-view-controller framework pro tvorbu webových aplikací. Vychází z výhod objektového jazyka Ruby [19]. Ruby je vydáváno pod vlastní Ruby licencí, Ruby on Rails pod licencí MIT. V obou případech jde o open-source produkty. Nejčastěji používanou databází je ve světě Ruby on Rails MySQL. Pro rozsáhlou podporu a popularitu jsem si jí vybral také. Díky propracovanému systému db:migrations v Ruby on Rails však není problém i v pokročilých stádiích projektu relační databázi změnit za jinou – v úvahu pak může přijít např. PostgreSQL, Oracle nebo DB2. 3.8.1 Programovací jazyk Ruby [19] je dynamicky typovaný interpretovaný jazyk se zaměřením na produktivitu programování. Syntaxe se vyznačuje přiměřenou volností a program zapsaný v Ruby je relativně jednoduché jak číst, tak psát. Jazyk vznikl v Japonsku a jeho tvůrcem je Yukihiro Matsumuto. Autor návrhu vycházel z jazyků Perl, Smalltalk, Eifell, Ada a Lisp. Nejvýraznějším rysem Ruby je, že všechno včetně primitivních datových typů jsou objekty. Největší slabinou aktuálních verzí Ruby (v době psaní této práce verze 1.8.6) je nízká rychlost, která je cenou za jeho vlastnosti. To se má v budoucnu výrazně změnit dopracováním a začleněním projektu virtuálního stroje YARV do verze 2.0. Alternativou přinášející vyšší výkon a skutečný multithreading na více procesorech již dnes je JRuby, interpreter jazyka Ruby přepsaný do Javy. Ten těží především z nativní přítomnosti virtuálního stroje v jazyku Java. Tvoří-li konkrétní výkonnostní problém některá z uživatelem definovaných procedur, je možné jí přepsat na Ruby-C rozšíření. 3.8.2 Framework Ruby on Rails [18] je MVC framework určený na vývoj webových aplikací vycházející z filosofie jazyka Ruby vytvořený Dánem Davidem Heinemeierem Hanssonem. Umožňuje psát dobře strukturovaný a optimální kód už tím, že preferuje konvenci před konfigurací. Karel Minařík na svém blogu [20] výstižně shrnul vlastnosti tohoto frameworku slovy: „Rails obsahují téměř nejucelenější soubor best practices pro webový vývoj a design.“
26
Ačkoliv si s sebou Rails nesou hendikep v podobě nízkého výkonu jazyka Ruby, tak při vhodném sestavení a optimalizaci aplikačního serveru lze dosáhnout rozhodně zajímavých výsledků. Často zmiňovaným příkladem jsou stránky Twitter.com a Shopify.com hostované u společnosti Joyent. V článku [21] na jejich blogu Joyeur.com je popsáno, jak lze provozovat web postavený na Ruby on Rails se čtyřmi tisíci dotazů za vteřinu. 3.8.3 Využití knihoven Pro realizaci některých zamýšlených postupů jsem se rozhodl použít již předpřipravené knihovny třetích stran. Podmínkou bylo, že se nesmí jednat o funkcionalitu danou přímo zadáním práce. Rozsah práce neumožňuje vytvářet vlastní knihovny pro práci s obrázky, přehrávání flash videa, obsluhu AJAX událostí atd., natož je odladit pro správnou funkci v nepřeberném množství možných stavů v různých prohlížečích. Použití stabilních opensource knihoven šetří čas, který lze věnovat přímo aplikaci. Díky zpětné kompatibilitě většiny použitých řešení lze snadno opravovat chyby zvýšením verze knihovny. Neopravíli chybu autor knihovny, je možné ji opravit bez jeho asistence.
27
4 Implementace 4.1 Webová aplikace Typická aplikace postavená na frameworku Ruby on Rails [18] je rozdělena na kontrolery podle druhu obsluhovaných stránek, každý kontroler je samostatným souborem a obsahuje několik akcí. Akce je jedna zobrazená stránka, nebo v případě AJAXu její část. Bližší pohled na strukturu Ruby on Rails aplikace je obsažen v příloze B. Odděleně od logiky aplikace jsou uloženy tzv. Views. Views jsou šablony napsané v XHTML s vnořeným embedded Ruby. Ruby v šablonách se přímo odvolává na proměnné nastavené v právě zobrazované akci, resp. kontroleru. Následuje výčet kontrolerů a jejich nejdůležitějších akcí: Account – Správa a prohlížení uživatelských účtů. Home – Domovská stránka. List – Seznam uživatelských účtů. Login – Přihlášení do systému. Logout – Odhlášení ze systému. My – Zobrazení vlastního profilu přihlášeným uživatelem. Profile – Zobrazeni profilu libovolného uživatele. Search – Prohledávání seznamu uživatelů. Signup – Formulář pro založení nového účtu. Atoms – Sdružuje akce nad atomy. Add – Přidání nového atomu. Create – Uložení nového atomu. Destroy – Smazání existujícího atomu. List – Seznam všech atomů. My – Seznam atomů přihlášeného uživatele. Search – Prohledávání seznamu atomů. Show – Zobrazení detailu určitého atomu. User – Zobrazení seznamu atomu určitého uživatele.
28
Learn – Výkladový mód lekce. Random – Vybere náhodnou lekci. Start – Vybere určitou lekci. Lectures (Sets) – Sdružuje akce nad lekcemi. Add – Přidání nové lekce. Create – Uložení nové lekce. Destroy – Smazaní existující lekce. List – Seznam všech lekcí. My – Seznam lekcí přihlášeného uživatele. Show – Zobrazení detailu určité lekce. User – Zobrazení seznamu lekcí určitého uživatele. Media – Obsluha mediálního obsahu. Crop – Vytvoří náhled oříznutím obrázku podle zadaných hodnot. Player – Zobrazí WM Media Player pro audio/video, nebo obrázek s Lightboxem. Quiz – Kvízový mód. Next – AJAX akce odpovídající dalšímu kroku v kvízu. Random – Vybere a spustí náhodnou lekci. Start – Vybere a spustí určitou lekci. Search – Vyhledá a zobrazí výsledky pro určité klíčové slovo. Tag – Sdružuje akce nad atomy. List – Zobrazí mapu tagů. Velikost písma tagu je ovlivněna jeho četností výskytu. Show – Zobrazí atomy a lekce související s určitým tagem. Upload – Obsluha nahrávání souborů. Avatar – Nahraje novou ikonku uživatele. Media – Nahrání nového mediálního souboru. Progress – AJAX akce pro zjištění aktuálního stavu nahrávání.
29
4.2 Databázové schéma Vazbu na relační databázi obstarávají následující třídy typu Model: Atoms, Media, Questions, Ratings, Score, Session, Sets, Tags a Users. Každá třída Model dědí metody obsluhující čtení a zápis do/z databáze. Navíc definuje vazby na ostatní tabulky databáze, obsahuje validační podmínky pro uložení / úpravu záznamu a lze v ní nalézt uživatelské metody. Většina tabulek obsahuje informaci o vytvoření a změně záznamu, tyto pole automaticky obsluhuje framework. Tabulka Users slouží k uchování informací o uživatelích aplikace. Obsahuje přihlašovací jméno, jméno určené k zobrazení, text o uživateli, kontaktní informace a md5 otisk hesla. Pole activated a prompt slouží pouze pro aktivaci nově vytvořeného účtu. Základním kamenem veškeré činnosti jsou atomy, ty jsou uloženy v tabulce Atoms. Každý atom obsahuje informaci o názvu, popisu a počtu zobrazení. Protože různé atomy mohou navzájem sdílet stejná média a tagy, tak jsou k tabulce Atoms připojeny tabulky Media a Tags vazbou m:n přes pomocné tabulky Atoms_has_media, resp. Atoms_has_tags. Tabulka Tags je velmi jednoduchá a uchovává jen záznam o názvu tagu. Tabulka Media udržuje pro každý multimediální soubor informaci o zdroji, jménu originálního souboru, velikosti souboru, typu souboru a kontrolním md5 součtu. Md5 součet slouží k vyloučení vícenásobného nahrání jednoho souboru a k případné kontrole integrity datového úložiště. Skutečné jméno a umístění souboru je dáno identifikátorem databázového záznamu a typem média. Lekce je sestavena z takzvaných otázek, ty mají spojit existující atomy s informacemi specifickými pro konkrétní lekci. Tabulka Questions pro tyto účely obsahuje samotnou otázku, odpověď, výkladovou frázi a pořadí otázky v kvízu. Navíc udává, na základě kterého atomu (tabulka Atoms) je vytvořena a v které lekci je zařazena (tabulka Sets). Tabulka Sets udržuje informace o vytvořených lekcích, díky přenesení hlavní informační váhy na tabulku Question v ní je pouze informace o nadpisu, popisu a počtu prohlédnutí. K lekci potom ještě patří informace o hodnocení (tabulka Ratings) a tabulka nejvyššího skóre dosaženého v kvízu (Scores). Každému uživateli je po úspěšném přihlášení vytvořen nový záznam v tabulce Sessions. Tyto záznamy obsahují dostupné informace o prohlížeči, požadované a odkazující adrese apod. Informace o sezení jsou ukládány z preventivních důvodů, protože mohou pomoci 30
řešit případné problémy s přihlašováním, nebo s neoprávněným průnikem do systému.
Obr. 11: Databázové schéma.
31
4.3 Použité knihovny Prototype [22] Framework napsaný v JavaScriptu pro abstrakci AJAX akcí a manipulaci s DOM. Prostřednictvím XHttpRequestů zajišťuje natažení nového obsahu a posléze jeho výměnu přímo v určeném elementu DOM aktivního XHTML dokumentu. Prototype je dodáván mimo jiné s Ruby on Rails. Script.aculo.us [23] Nadstavba frameworku Prototype, opět napsaná v Javascriptu, přináší rozšíření o vizuální efekty, drag & drop a řazení elementů pomocí drag & drop. Script.aculo.us je dodáván mimo jiné s Ruby on Rails. RMagick [24] Náhledy a různé velikosti použitých obrázků jsou vytvářeny knihovnou RMagick, která je Ruby rozhraním k souboru knihoven pro manipulaci s obrázky ImageMagick, resp. GraphicsMagick. Mongrel Upload Progress Plugin [25] Jedná se o plugin sloužící k zobrazení aktuálního stavu nahrávání souboru na web. V nastavitelných intervalech obnovuje informace o aktuální rychlosti, přenesených datech a procentuálním postupu. Jde o kombinaci Ruby, XHTML, CSS a Javascript kódu. JavaScript image cropper UI [26] Grafické rozhraní pro snadné určení ořezu obrázku kliknutím a tažením myší. Je napsané v JavaScriptu a využívá knihovnu Script.aculo.us. JW Media Player [27] Díky tomuto Flash modulu lze přehrávat různá média přímo na webových stránkách. Lightbox 2 [28] Lightbox efektně řeší otevírání obrázků. Obrázek je zobrazen v plovoucím prvku nad aktivní prezentací, zatímco tato je překryta poloprůhlednou vrstvou. Uživatel tak neztrácí přehled a může se snadno vrátit. Knihovna je tvořená kombinací Javascriptu, CSS a několika obrázků. Ke svému běhu potřebuje knihovnu Script.aculo.us.
32
Textile Editor Helper [29] Textile Editor Helper je tzv. WYSIWYG editor. Rozšiřuje běžný XHTML element textarea o základní funkcionalitu běžných textových editorů. Výsledek je překládán do formátu Textile. Textile má oproti (X)HTML výhodu, že je díky nenáročné syntaxi snadno pochopitelný i pro běžného koncového uživatele. RedCloth [30] Ruby knihovna pro překlad dokumentu z formátu Textile a Markdown do běžného XHTML určeného pro zobrazení na webových stránkách. Spiffy Corners [31] Kaskádové styly verze 2 přímo nepodporují oblé hrany prvků. Spiffy Corners je řešení pro oblé rohy založené čistě na XHTML + CSS2 bez použití vložených obrázků. Výsledku je dosaženo kombinací různých zdánlivě nesouvisejících technik založených přímo na principu vykreslování webové stránky v samotném prohlížeči. CSS Tabs 2.0 [32] Tato knihovna simuluje okno se záložkami. Jde o kombinaci XHTML, JavaScriptu a CSS kódu.
4.4 Využívané služby DICTD Thesaurus Pro vyhledávání alternativ k zadaným klíčovým slovům aplikace pracuje se slovníkem Moby Thesaurus na veřejném DICTD serveru. Komunikace se serverem probíhá prostřednictvím knihovny dict.rb (autor Dave Pearson). Yahoo Image Search API [33] Kromě přímého nahrání souboru je v aplikaci začleněna možnost stažení a použití obrázku nalezeného přes Yahoo Image Search API. S webovou službou Yahoo komunikuje program prostřednictvím knihovny yahoo-ruby.rb (autor Premshree Pillai).
4.5 Hlasové rozhraní Webová stránka s podporou hlasu musí být ve formátu XHTML + Voice, ten vyžaduje specifický DOCTYPE a načtení potřebných modulů.
33
První řádek dává najevo, že jde o XML s kódováním znaků UTF-8. Direktiva DOCTYPE odkazuje na příslušnou DTD definici. V uvozujícím tagu html lze vidět načtení modulů XHTML, VoiceXML, XML-Events a Syntézy řeči. 4.5.1 Výuková lekce Implementace výukové lekce je jednoduchá. VoiceXML formulář má jediný úkol – po aktivování přeříká větu uvedenou mezi tagy block.
Následující kód vloží do dokumentu ikonu reproduktoru. Kliknutím na ikonu je aktivován formulář s příslušným identifikátorem (learn_38) uvedeným v atributu ev:handler.
4.5.2 Kvíz Implementace kvízu byla náročnější. Ukázalo se, že prohlížeč Opera kód načtený AJAX voláním pouze zobrazí. Vůbec nebere v úvahu případné nově načtené XML-Events a VoiceXML direktivy. Průchod kvízem zajišťuje právě AJAX, díky kterému jsou postupně načítány a zobrazovány další otázky. Každá otázka sestává ze dvou formulářů. Jednoho VoiceXML formuláře v hlavičce a jednoho standardního formuláře v těle dokumentu. Z předchozího odstavce plyne, že 34
všechny VoiceXML formuláře a sdružené XML-Events musejí být načteny v části dokumentu, která se již v průběhu kvízu nebude měnit. XML-Event je nastaven na odeslání XHTML formuláře a způsobí přechod k dalšímu VoiceXML formuláři. Přiložený kód ukazuje listener čekající na akci odeslání formuláře s identifikátorem quiz_form_38. <listener ev:event="submit" ev:observer="quiz_form_38" ev:handler="#quiz_39" />
Rozpoznávání řeči podle VoiceXML je vázané na zadanou gramatiku, která popisuje rozpoznatelné příkazy. Navíc ve výchozím nastavení stačí vydat prakticky jakýkoliv zvuk a hned je rozpoznávacím algoritmem nabídnuto nějaké ze slov. Princip kvízu ale je, že se zpracovává i nesprávná odpověď a k vyhodnocení má dojít až na konci. Pro tento postup neexistuje ve VoiceXML přímá podpora. Původně jsem zvažoval rozšíření gramatiky o další náhodné výrazy. Tento postup by vyžadoval dynamicky provádět užší výběr z nějakého připraveného korpusu, navíc za podmínky vyloučení foneticky podobných slov. Nakonec jsem použil způsob jednodušší, který také nabízí vhodné chování. V gramatice jsem ponechal jen správné odpovědi, ale snížil jsem vlastnost confidencelevel na minimum. Díky tomu je vyžadována velká přesnost shody řečeného slova se slovem v gramatice a nechtěné napovídání systémem je tak téměř vyloučeno. Mezi tagy prompt se nachází otázka, kterou je uživatel dotázán hlasovou syntézou. Catch element na řádce č. 5 zajišťuje obsluhu případů, kdy nebylo nic zadáno, rozpoznáno, nebo uživatel požádal hlasem o nápovědu. V takových situacích je přehrána informace daná globální konfigurací a posléze je zopakována otázka. Mezi řádky 9 až 13 je přijímaná gramatika ve formátu Java Speech Grammar Format, jejím základem je zápis v rozšířené Backus-Nautově formě. Chování při rozpoznaném výrazu definují řádky 14 až 18 nacházející se uvnitř tagu filled. Řádek 15 nastaví do proměnné voice_result rozpoznanou hodnotu, řádek 16 zajistí zopakování rozpoznaného slova hlasovou syntézou a nakonec řádek 17 zapíše rozpoznané slovo do textového vstupního pole v přidruženém XHTML formuláři. 1:
36
5 Uživatelský test Na přelomu roku 2006 a 2007 proběhla v rámci soutěže IBM - ČVUT Student Research Projects 2006 [34] série usability testu předchozí verze této aplikace. Usability testy tehdy připravovalo a realizovalo šest skupin studentů. Z testování vzniklo mnoho zajímavých poznatků a samozřejmě bylo odhaleno mnoho nejasností a chyb. První verze byla na základě zjištěných poznatků kompletně přepracována a proto je potřeba novou verzi opět vyzkoušet novým uživatelským testem.
5.1 Cíle Jedním z cílů nového uživatelského testu je pojmenovat nejasnosti a odhalit chyby. Rád bych získal materiál pro srovnání dříve odhalených nedostatků se současným řešením. Další motivací je hledání témat a inspirace pro další pokračování ve vývoji aplikace. S tím souvisí zjištění zájmu ze strany uživatelů. Předpokládám, že test a diskuse o aplikaci přinese řadu podnětných poznámek i „mimo záznam“.
5.2 Typický uživatel Aplikace má v podstatě dva různé typické uživatele, kteří se můžou a nemusí spojit v jedné osobě. První z nich, uživatel který chce využívat pouze výukové lekce a kvízy, by měl mít alespoň základní pasivní znalost angličtiny. Tvůrce atomů a lekcí by měl angličtinu používat aktivně. Běžný uživatel často používá počítač a disponuje kvalitním připojením k internetu. Díky doufejme prozatímnímu platformnímu omezení má typický uživatel Windows XP a vyšší v kombinaci s prohlížečem Opera verze 9.0+.
5.3 Scénář Respondent se pokusí splnit úkoly předložené scénářem v daném pořadí. 1. Nainstalujte si prohlížeč Opera a aktivujte v něm hlasové ovládání. 2. Vyzkoušejte si funkce hlasového rozhraní podle instrukcí na stránce http://www.opera.com/products/desktop/voice/index.dml 3. Založte
si
uživatelský
účet
na
webu
aplikace
http://ramadet.com
a
přihlaste se. Po registraci očekávejte e-mail s aktivačním odkazem. 4. Volitelně můžete upravit informace o sobě a nahrát si svoji ikonu. 5. Najděte lekci Savci a prohlédněte si výukovou část. Vyzkoušejte si přehrávání připravených frází klikáním na ikony reproduktoru. 6. Následně si projděte kvíz k lekci Savci. Zkuste odpovídat hlasem.
37
7. Zvolte si libovolné nezadané téma, které zpracujete v aplikaci (např. hudební nástroje, doprava, ptáci, květiny, počítače…) 8. Přidejte do aplikace potřebné atomy pro sestavení nové lekce (alespoň 5).
Média
nahrajte
vlastní
nebo
využijte
zakomponovanou
službu
pro
vyhledávání obrázků na Yahoo.com. 9. Z přidaných atomů sestavte novou lekci. 10. Ověřte, zda výsledek odpovídá vašemu očekávání.
5.4 Dotazník Po splnění úkolu respondent odpoví na následující dotazník. Není-li uvedeno jinak, odpovídá se číselnou hodnotou od jedné do pěti. Jedna znamená skvělý/výborný, pět špatný/nedostatečný. a) Věk (zaokrouhlete na 5 let): __________________________________ b) Pohlaví (muž/žena): _____________ c) Znalost angličtiny: ________ d) Zkušenosti s hlasovým ovládáním: ________ e) Povolání (slovní odpověď): ________
1. Vyjmenujte možná využití aplikace. (slovní odpověď) 2. Inovativnost aplikace: ________ 3. Vzhled aplikace: ________ 4. Intuitivní ovládání: ________ 5. Rozpoznávání hlasu: ________ 6. Řečová syntéza: ________ 7. Poutavost aplikace: ________ 8. Kvalita zpracování: ________ 9. Jak odpovídá výsledek strávenému času: ________ 10. Celková spokojenost s ovládáním: ________ 11. Celkové hodnocení aplikace: ________ 12. Měl(a) byste o používání aplikace v budoucnu zájem? (ano/ne) 13. Doporučil(a) byste aplikaci dalším lidem (ano/ne)? 14. Jaké komplikace jste zaznamenal(a)? (slovní odpověď) 15. Napadá Vás způsob, jak by bylo možné aplikaci vylepšit? (slovní odpověď) 16. Další poznámky. (slovní odpověď)
38
5.5 Data Uživatelského testu se zúčastnilo devět osob. Všichni dotázaní ohodnotili svoji zkušenosti s hlasovým ovládáním stupněm 4 až 5. Respondenti a) žena, 25 let, studentka architektury, úroveň angličtiny dobrá b) muž, 25 let, student filosofie a zaměstnanec v IT, úroveň angličtiny velmi dobrá c) žena, 50 let, vedoucí v neziskovém sektoru, úroveň angličtiny velmi dobrá d) muž, 55 let, ředitel soukromé školy, úroveň angličtiny dobrá e) muž, 25 let, student strojní fakulty, úroveň angličtiny velmi dobrá f) muž, 25 let, student zemědělské fakulty, úroveň angličtiny dobrá g) žena, 45 let, úřednice, úroveň angličtiny dobrá h) muž, 20 let, student, úroveň angličtiny dobrá i) muž, 30 let, programátor, úroveň angličtiny velmi dobrá Odpovědi 1. Respondenti odpověděli: kvízy, výukový program, angličtina pro školy, alternativa Wikipedie, Flickru a YouTube, vyhledávání, získávání informací, bystření paměti a sebevzdělávání, příjemnou formou podané informace, encyklopedie, hudební lekce. Tabulka odpovědí na otázky 2 až 13: 2. 3. 4. 5. 6. a) 1 1 3 4 1 b) 2 2 3 3 2 c) 1 2 3 4 3 d) 1 1 3 2 1 e) 1 3 2 1 1 f) 1 2 4 g) 2 1 2 2 2 h) 1 1 4 3 3 i) 2 2 2 2 1 průměr 1,11 1,67 2,89 2,63 1,75
7. 2 1 2 1 3 3 2 1 3 2
8. 9. 1 1 3 3 2 2 1 1 2 1 2 1 2 2 1 2 1 2 1,67 1,67
10. 2 3 3 2 2 2 2 2 2 2
11. 1 2 2 1 3 2 2 2 1 1,78
12. ano ano ano ano ne ne ano ano ano
13. ano ano ano ano ne ne ano ano ano
14. Nejčastější komplikace byly: Nepochopení vztahu atom – lekce při prvním setkání s aplikací. Problémy s výslovností složitějších slov. Chybějící možnost editace atomů a lekcí. Zrychlené přehrávání mp3 souborů s nízkým bitrate. Chybné rozpoznávání řeči. 15. Návrhy na vylepšení: Přidat podrobný návod na tvorbu atomů a lekcí, případně video ukázku. Přidat diskusní fórum. Zpřístupnit editaci atomů a lekcí. 39
5.6 Vyhodnocení Dotazovaný počet devět osob samozřejmě není dostatečně reprezentativní vzorek. Zejména pak díky tomu, že všichni dotazovaní byli české národnosti. I tak testování odhalilo několik chyb, nedostatků a přineslo zajímavý materiál v podobě mnohých poznámek. V první řadě se ukázalo, že nutnost instalace prohlížeče Opera společně s aktivací a nastavením hlasového rozhraní tvoří pro běžného uživatele vysokou vstupní bariéru. Souvisejícím problémem bylo, že většina dotazovaných nikdy předtím tento prohlížeč nepoužívala a měla problémy s jeho ovládáním. Nejčastější výtky směřovaly k přesnosti hlasového rozpoznávání a k jeho občasné nestabilitě. Nejednou se uživatelům stalo, že rozpoznávání přestalo zcela reagovat. To je však záležitostí prohlížeče a nevidím zde v tuto chvíli velký prostor pro případná zlepšení z mé strany. Když jsem srovnával tyto výsledky s usability testováním první verze, tak jsem nenašel žádné výrazné shody. Dá se tedy říct, že jsem většinu dříve označených problémů úspěšně vyřešil. Společným jmenovatelem však byla složitost vazeb a pojmů. Nemyslím si, že by použité termíny a principy byly příliš náročné na pochopení, spíše to přičítám prvnímu kontaktu s aplikací. Několika uživatelům např. dalo zpočátku práci pochopit vztah atom – lekce, případně atom – tag. Nakonec však tuto překážku každý překonal. Nejvíce si uživatelé přáli hlasové rozhraní v českém jazyce a možnost editace již vytvořených atomů a lekcí. Nebudu-li se teď již zabývat hlasovým rozhraním, tak aplikace byla v testu označena za inovativní. Do průměru dva celých se vešlo hodnocení poutavosti a zpracování aplikace, taktéž uživatelé vyjádřili spokojenost nad poměrem stráveného času vzhledem k výsledku jejich snažení. Výrazněji vybočuje intuitivnost ovládání. Toto společně s možností editace atomů a lekcí musí být prvními kroky v budoucí práci.
40
6 Závěr Navrhl jsem a vytvořil nástroj v podobě webové aplikace umístěný na adrese http://ramadet.com. Nástroj je určený k přípravě malých multimodálních lekcí, které se zakládají na spojení textové informace s multimediální ilustrací. Výklad ve výukové části lekce je veden syntézou řeči a následné ověření nabytých znalostí pro interakci s uživatelem navíc využívá rozpoznávání řečových příkazů. Aplikace obsahuje prvky uživatelského rozhraní, které byly ještě nedávno výsadou programů postavených přímo na API jednotlivých operačních systémů. Výsledná aplikace je naprogramována v jazyce Ruby a postavena je na frameworku Ruby on Rails. Kód webového rozhraní je z větší části napsán v XHTML, kód multimodálních stránek v XHTML + Voice. Samozřejmostí je využití CSS a JavaScriptu. Doufám, že myšlenka kombinující principy moderních webových aplikací s hlasovým ovládáním přiláká dostatek uživatelů. Cílem do budoucna je nadále vylepšovat jak uživatelské rozhraní, tak aplikaci jako takovou. Zejména chci hledat optimální způsoby začlenění zvukové modality do zažitého konceptu webové prezentace. Tomu by mohla pomoci případná širší uživatelská základna, která by zajistila potřebnou zpětnou vazbu k vývoji. S případným růstem uživatelské základny souvisí vyšší nároky na provoz aplikace. Jako první bude nutné zamyslet se nad optimalizací dotazů na databázi a nad jejich redukcí využitím cache paměti pro časté dotazy. V pořadí další otázkou je příprava aplikace pro škálování, která by měla zajistit správnou synchronizaci a konzistentní běh při distribuci výpočtu a datových skladů mezi několik nezávislých počítačů.
41
Seznam zdrojů [1] Speech synthesis http://en.wikipedia.org/wiki/Speech_synthesis [2] Speech recognition http://en.wikipedia.org/wiki/Speech_recognition [3] Is Speech Recognition Finally 'Good Enough'? http://slashdot.org/article.pl?sid=07/05/18/1958213 [4] Lupa.cz: Českému Internetu je 15 let http://www.lupa.cz/clanky/internet-je-v-cesku-jiz-15-let [5] Multimodal interaction http://en.wikipedia.org/wiki/Multimodal_interaction [6] Multimodal integration http://en.wikipedia.org/wiki/Multimodal_integration [7] W3C, XHTML + Voice Profile 1.0 http://www.w3.org/TR/xhtml+voice/ [8] VoiceXML.org, XHTML + Voice Profile 1.2 http://www.voicexml.org/specs/multimodal/x+v/12/ [9] W3C, XHTML Modularization 1.1 http://www.w3.org/TR/xhtml-modularization/ [10] W3C, Submission request to the W3C – XHTML + Voice http://www.w3.org/Submission/2001/13/ [11] W3C, Patent statements related to XHTML+Voice 1.1 http://www.w3.org/2003/04/xhtml-voice-statements.html [12] W3C, Multimodal Interaction Activity http://www.w3.org/2002/mmi/ [13] Wikipedia http://wikipedia.com [14] Flickr http://flickr.com [15] YouTube http://youtube.com [16] What Is Web 2.0 http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html [17] Viral Marketing http://en.wikipedia.org/wiki/Viral_marketing [18] framework Ruby on Rails http://rubyonrails.org 42
[19] jazyk Ruby http://ruby-lang.org [20] Blog Karla Minaříka o Ruby on Rails http://blog.karmi.cz [21] Joyent, Článek o škálování Ruby on Rails http://joyeur.com/2007/02/04/a-brief-update-with-some-numbers-for-hardware-loadbalanced-mongrels [22] Prototype http://www.prototypejs.org/ [23] Script.aculo.us http://script.aculo.us/ [24] RMagick http://rmagick.rubyforge.org/ [25] Mongrel Upload Progress Plugin http://mongrel.rubyforge.org/docs/upload_progress.html [26] JavaScript image cropper UI http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototypescriptaculous/ [27] WM Media Player http://www.jeroenwijering.com/?item=Flash_Media_Player [28] Lightbox 2 http://www.huddletogether.com/projects/lightbox2/ [29] Textile Editor Helper http://slateinfo.blogs.wvu.edu/plugins/textile_editor_helper [30] RedCloth http://whytheluckystiff.net/ruby/redcloth/ [31] Spiffy Corners http://www.spiffycorners.com/ [32] Css Tabs 2.0 http://unraveled.com/projects/html/css_tabs/ [33] Yahoo – Image Search API http://developer.yahoo.com/search/image/V1/imageSearch.html [34] IBM - CVUT Student Research Projects http://ibm-cvut.felk.cvut.cz/srp3/projects.html
43
Příloha A – Seznam použitých zkratek AJAX (Asynchronous JavaScript and XML) je obecné označení pro technologie vývoje interaktivních webových aplikací, které mění obsah svých stránek bez nutnosti jejich opětovnému načítání. API (Application Programming Interface) – jde o sbírku procedur, funkcí či tříd nějaké knihovny (ale třeba i jiného programu nebo jádra operačního systému), které může využívat programátor, který knihovnu využívá. CSS (Cascading Style Sheets) je jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML. DOM (Document Object Model) je objektově orientovaná reprezentace XML nebo HTML dokumentu. DOM je API umožňující přístup či modifikaci obsahu, struktury, nebo stylu dokumentu, či jeho částí. DTD (Document Type Definition) je jazyk pro popis struktury XML případně SGML dokumentu. Omezuje množinu přípustných dokumentů spadajících do daného typu nebo třídy. DTD tak například vymezuje jazyky HTML a XHTML. FLV (FLash Video) je formát souboru určený k ukládání videa. HTTP (Hyper Text Transfer Protocol) je internetový protokol určený původně pro výměnu hypertextových dokumentů ve formátu HTML. Používá obvykle port TCP/80, verze 1.1 protokolu je definována v RFC 2616. HTML (HyperText Markup Language) je značkovací jazyk pro tvorbu hypertextových dokumentů v prostředí WWW vyvinutý konsorciem W3C. JPEG (Joint Photographic Experts Group) je standardní metoda ztrátové komprese používané pro ukládání počítačových obrázků ve fotorealistické kvalitě. MD5 (Message-Digest algorithm 5) je rozšířená hašovací funkce s otiskem o velikosti 128 bitů.
44
MP3 (MPEG-1 Layer 3) je formát ztrátové komprese zvukových souborů, založený na kompresním algoritmu MPEG (Motion Picture Experts Group). MVC (Model-View-Controller) je softwarová architektura, která rozděluje datový model aplikace, uživatelské rozhraní a řídicí logiku do tří nezávislých komponent tak, že modifikace některé z nich má minimální vliv na ostatní. MySQL je databázový systém, vytvořený švédskou firmou MySQL AB. PHP (rekurzivní zkratka PHP: Hypertext Preprocessor) je skriptovací programovací jazyk určený především pro programování dynamických internetových stránek. PNG (Portable Network Graphics) je grafický formát určený pro bezeztrátovou kompresi rastrové grafiky. PostgreSQL je plnohodnotným relačním databázovým systémem s otevřeným zdrojovým kódem. UTF-8 (UCS Transformation Format) je způsob kódování řetězců znaků Unicode/UCS do sekvencí bajtů. WYSIWYG (What You See Is What You Get) zkratka označuje způsob editace dokumentů v počítači, při kterém je verze zobrazená na obrazovce vzhledově totožná s výslednou verzí dokumentu. XHTML (Extensible HyperText Markup Language) je značkovací jazyk pro tvorbu hypertextových dokumentů v prostředí WWW vyvinutý konsorciem W3C. XML (eXtensible Markup Language) je obecný značkovací jazyk, který byl vyvinut a standardizován konsorciem W3C. Umožňuje snadné vytváření konkrétních značkovacích jazyků pro různé účely a široké spektrum různých typů dat. YARV (Yet Another Ruby VM) je virtuální stroj pro jazyk Ruby.
45
Příloha B – Adresářová struktura aplikace Adresářová struktura aplikace vychází z typické kostry, kterou vytváří framework Ruby on Rails. Je doplněna pouze v adresáři public o adresáře icons a media. / |_app/
- celé jádro MVC aplikace
| |_controllers/
- kontrolery
| |_helpers/
- pomocné metody pro zobrazování, def. uživatelem
| |_models/
- třídy odpovídající tabulkám databáze
| |_views/
- šablony stránek
|_config/
- konfigurační soubory
|_db/
- skripty a data pro vytvoření databáze
|_doc/
- dokumentace k aplikaci
|_lib/
- knihovny třetích stran
|_log/
- log soubory
|_public/
- soubory dostupné webserveru
| |_icons/
- ikony
| |_images/
- grafika a obrázky
| |_javascripts/
- JavaScriptové knihovny
| |_media/
- uživatelská média
| | |_audio/
- zvukové nahrávky
| | |_image/
- fotky, obrázky atp.
| | |_video/
- video nahrávky
| |_stylesheets/
- kaskádové styly
| |_users/
- domovské adresáře uživatelů
|_script/
- obslužné skripty
|_tmp/
- dočasné soubory
|_vendor/ |_plugins/
- Ruby on Rails pluginy
46
Příloha C – Obsah přiloženého CD / |_README.txt |_INSTALL.txt
- popis instalace
|_app/ | |_ramadet.com/
- aplikace (vnitřní struktura viz. příloha B)
| |_ramadet.sql
- SQL skripty pro vytvoření DB struktury
|_text/ |_prace.pdf
- finální text práce, formát PDF
|_prace.odt
- zdrojový text práce, formát ODT (OpenOffice)
47
