Použití představených technologií se ve výsledku ukázalo jako velmi efektivní oproti vývoji základními technologiemi v tom smyslu, že vedly k rychlejšímu a kvalitnějšímu vývoji. Čas šetří tím, že vývojáři umožňují používat předpřipravené moduly (nemusí takzvaně znovu vynalézat kolo) a může se soustředit na důležitější části vývoje. Výsledná aplikace by měla
50 být i kvalitnější, jelikož frameworky vedou k čistšímu kódu a kladou důraz na budoucí rozšiřitelnost a udržitelnost.
51
8 Testování a zhodnocení aplikace
Po dokončení implementace by každá webová aplikace měla projít procesem testování a ani Sršeň není výjimkou. Obecně se doporučuje testovat následující: korektní vykreslování v různých prohlížečích, zařízeních a operačních systémech, použitelnost, přístupnost, funkčnost, validitu kódu, rychlost a samotný obsah (56).
V průběhu celého vývoje byla aplikace testována v nejpoužívanějších webových prohlížečích, tedy v Google Chrome, Firefoxu, a Internet Exploreru. V nejnovějších verzích zmiňovaných prohlížečů funguje aplikace téměř bezchybně (Google Chrome verze 42, Firefox verze 37 a Internet Explorer verze 11), lze ovšem očekávat, že by měla aplikace fungovat i o pár verzí zpět. Možné problémy by mohla způsobovat nedostatečná kompatibilita s moderními technologiemi, které jsou v aplikaci využity. Konkrétně se může jednat o některé vlastnosti CSS3 (transition, media queries, box shadow), některé prvky HTML 5 (audio) a jQuery.
Podle informací, které jsou dostupné na serveru caniuse.com a jquery.com nebude aplikace správně fungovat v Internet Exploreru verze 9 a nižší, a v mobilním prohlížeči Opera Mini. Podle nejnovějších statistik se však Internet Explorer ve verzi 7 a nižší téměř nepoužívá a následující dvě verze v České republice používá necelých pět procent uživatelů. U Opery Mini se počet tuzemských uživatelů pohybuje pod jedním procentem (55). V součtu tedy aplikace nebude korektně fungovat přibližně u pěti procent uživatelů, lze však předpokládat, že se bude počet uživatelů, kteří mají prohlížeč podporující moderní technologie, postupem času zvyšovat.
Kromě různých webových prohlížečů byla aplikace také testována na různých zařízeních, aby se zjistilo, zda webové stránky správně reagují na různou šířku displeje, tj. zda jsou responsivní. Toto testování bylo prováděno na pěti různých zařízeních: na monitoru s HD rozlišením 1920×1080, na monitoru notebooku s rozlišením 1280×768, na tabletu iPad Air 2 s retina displejem, chytrých telefonech iPhone 4S a Nexus 4. Na všech zmiňovaných zařízeních se aplikace vykresluje, až na některá místa (např. prohlížeč kartiček) správně.
Co se týče operačních systémů, testování pro desktopová zařízení proběhlo pro operační systémy Windows 7 a Windows 8.1 a pro mobilní zařízení pro operační systémy
52 iOS 8 a Android Lollipop. Existují tři základní problémy, které se mohou v souvislosti s operačními systémy objevit: různé vykreslování fontů a kerningu, různé vykreslení formulářových prvků a problémy s pluginy (57). Na žádný z problémů jsem ovšem nenarazil, jelikož aplikace využívá webový font třetí strany a Bootstrap, který různé vykreslování formulářových prvků eliminuje. Také není závislá na zásuvných modulech prohlížeče.
Aplikace bohužel není schopna vyhovět všem pravidlům přístupnosti, jelikož zcela přístupný web by měl být použitelný i bez stylů a JavaScriptu (58). Na druhou stranu se zobrazuje správně v naprosté většině prohlížečů a na různých zařízeních. Navíc je použitelný i bez obrázků a písmo lze libovolně zvětšovat. S přístupností souvisí i validita kódu. V případě HTML je v souladu s požadavky W3C. CSS kód bohužel validní není, například kvůli prefixům –moz a -webkit. Důvodem je různé vykreslování prohlížečů, které nevalidní CSS vlastnosti řeší. Z praktického hlediska je ovšem validní HTML důležitější než CSS, jelikož nese samotný obsah. Například různé pomůcky pro nevidomé jsou vyloženě závislé na standardizovaném a dobře strukturovaném kódu.
Rychlost aplikace byla měřena nástrojem PageSpeed od společnosti Google, který dokáže analyzovat webovou stránku a navrhnout řešení pro její zrychlení. V testech dosahovala aplikace hodnocení kolem 90 bodů ze 100. K dosažení plného skóre nástroj radil minifikovat CSS a JavaScript kód, aktivovat kompresi na straně serveru aj. Zrychlení by zasloužil i proces procvičování. Jednou z cest by mohlo být přednačítání dalších kartiček v denní dávce pomocí technologie AJAX ještě před tím, než uživatel ohodnotí aktuální kartičku.
Pro zjištění použitelnosti, dostatečné funkčnosti a srozumitelného obsahu jsem poprosil pět spolužáků s převážně anglickým jazykem v oborové kombinaci o otestování aplikace.
Bez jakýchkoliv instrukcí se dokázali sami registrovat, přidat si do kolekce nová slovíčka a začít si je procvičovat. Z hlediska použitelnosti a obsahu by tedy aplikace měla být dostačující, ačkoliv by pro takové tvrzení mělo proběhnout řádné uživatelské testování.
Co se týče funkčnosti, získal jsem od spolužáků několik cenných připomínek, které by bylo možné do aplikace implementovat, a povýšily by ji o řád výše:
53
Napojení na službu Google Translate (nebo jakoukoliv jinou službu, která umožňuje uživatelům rychle ukládat neznámá slovíčka napříč zařízeními)
Implementovat API i britského slovníku, jelikož Merriam Webster poskytuje zpravidla americkou výslovnost a nedává informaci o synonymech
Nastavení hodiny nebo aspoň denní doby (ráno, poledne, večer) pro notifikační e-maily
Zobrazovat pole pro vyhledávání slovíček i u výběru jednotlivých významů (uživateli se nemusí žádný z významů líbit)
Obrátit postup u výběru významů, tj. zaškrtávat významy, které chce uživatel umět a ne odškrtávat ty, které se mu nehodí (pokročilí studenti často hledají jeden konkrétní význam)
Podle zpětné vazby při procvičování zobrazovat, kolik kartiček uživatel zapomněl a kolik si jich pamatoval
Já sám bych chtěl aplikaci do budoucna obohatit o následující funkcionality: vytvořit administraci pro nově vznikající překlady, umožnit uživatelům export dat (například ve formátu pro Anki), resetovat si zapomenuté heslo, přihlásit se přes Google nebo Facebook a možnost zrušit si účet.
Celkově byla aplikace mezi spolužáky přijata dobře. Líbil se především design, intuitivní prostředí, napovídání slov při překlepu, automatické vyplňování definice, statistiky na úvodní stránce, možnost studovat na cestách v telefonu díky responsivnímu designu a klávesové zkratky.
54
9 Závěr
Cílem této bakalářské práce bylo vytvoření funkčního prototypu aplikace, která bude pomáhat českým studentům s rozšiřováním anglické slovní zásoby a bude založená na přelomové e-learningové technice Spaced Repetition. Webová aplikace je v současnosti dostupná na adrese www.srs-en.cz a uživatelům je poskytována zcela zdarma.
Teoretická část měla za úkol představit teoretický základ z oblasti učení a paměti.
Samostatnou kapitolu v této části měla i zmiňovaná technika Spaced Repetition, jakožto hlavní charakteristika, která aplikaci odlišuje od ostatních českých webových aplikací sloužících k procvičování anglické slovní zásoby.
Při vytváření aplikace jsem zvolil doporučovaný postup analýza–návrh–implementace–
testování. Jako podklady pro počáteční analýzu mi posloužily informace z teoretické části.
Dalším důležitým zdrojem pro analýzu bylo srovnání současných e-learningových aplikací včetně specifik slovní zásoby. Na základě provedené analýzy vzešel návrh, který dal dostatečné základy pro samotnou implementaci aplikace. Výsledné uživatelské testování přineslo několik podnětných požadavků na možné budoucí rozšíření.
V teoretické části této bakalářské práce jsem si rozšířil obzory v oblasti lidské paměti a učení. V praktické části jsem uplatnil své znalosti webových technologií a jejich frameworků. Doufám, že navržená aplikace bude pro uživatele použitelná a bude jim v budoucnu efektivně pomáhat s anglickým jazykem. Přinejmenším může sloužit jako odrazový můstek do vod Spaced Repetition systémů. V rozvoji aplikace mám určitě v plánu dál pokračovat. Z toho důvodu je v patičce webových stránek umístěn odkaz na kontaktní formulář pro sdělení případných připomínek k aplikaci.
55
Seznam použitých informačních zdrojů
1. Leitner system. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, 2014 [cit. 2015-02-13]. Dostupné z: http://en.wikipedia.org/wiki/Leitner_system 2. WOZNIAK, Piotr. Memory and Learning: Myths and Facts. SuperMemo [online]. 2003 [cit.
2015-02-13]. Dostupné z: http://www.supermemo.com/articles/myths.htm
3. Paměť a učení. Katedra psychologie Filozofické fakulty Univerzity Karlovy v Praze [online].
2009 [cit. 2015-02-13]. Dostupné z: http://psychologie.ff.cuni.cz/studium/prf/pamet.pdf 4. STUCHLÍK, Aleš. Experimentální studium učení a paměti. Fyziologický ústav AV ČR: oddělení
Neurofyziologie paměti [online]. 2010 [cit. 2015-02-13].
Dostupné z: http://industry.biomed.cas.cz/332/www332_CZ/dokumenty/PGS.pdf 5. Učební typy. Metodický portál RVP [online]. 2011 [cit. 2015-02-13].
Dostupné z: wiki.rvp.cz/Knihovna/1.Pedagogicky_lexikon/U/U%C4%8Debn%C3%AD_typ 6. GARDNER, Howard. Frames of mind: the theory of multiple intelligences. 10th anniversary ed.
New York, NY: BasicBooks, c1993, xxxii, 440 p. ISBN 04-650-2510-2.
7. Overview of Learning Styles. Learning Styles [online]. 2014 [cit. 2015-02-13].
Dostupné z: http://learning-styles-online.com/overview/
8. RANPURA, Ashish. How We Remember, and Why We Forget. Brain Connection [online]. 2013 [cit. 2015-02-13].
Dostupné z: http://brainconnection.brainhq.com/2013/03/12/how-we-remember-and-why-we-forget/
9. MORRIS, R. G. M. Episodic-like memory in animals: psychological criteria, neural mechanisms and the value of episodic-like tasks to investigate animal models of neurodegenerative disease. Philosophical Transactions of the Royal Society B: Biological Sciences[online]. 2001-09-29, vol. 356, issue 1413, s. 1453-1465 [cit. 2015-02-16]. DOI: 10.1098/rstb.2001.0945.
Dostupné z: http://rstb.royalsocietypublishing.org/cgi/doi/10.1098/rstb.2001.0945 10. THOMPSON, Richard F a Stephen A MADIGAN. Memory: the key to consciousness.
Washington, D.C.: Joseph Henry Press, 2005, vii, 280 p. ISBN 03-095-4949-3.
11. MASTIN, Luke. Memory Recall. The Human Memory [online]. 2010 [cit. 2015-02-16].
Dostupné z: http://www.human-memory.net/processes_recall.html
12. HANUŠOVÁ, Marie, Drahomíra OUDOVÁ a Jiří VOTAVA. Paměť a učení. In: Česká zemědělská univerzita v Praze: Institut vzdělávání a poradenství [online]. 2007 [cit. 2015-02-16].
Dostupné z: http://etext.czu.cz/img/skripta/64/pamet-1.pdf
56 13. ELMES, Damien. Anki 2.0 User Manual. Anki [online]. 2013 [cit. 2015-02-17].
Dostupné z: http://ankisrs.net/docs/manual.html
14. MASTIN, Luke. Sensory Memory. The Human Memory [online]. 2010 [cit. 2015-02-17].
Dostupné z: http://www.human-memory.net/types_sensory.html
15. Millerovo magické číslo. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA):
Wikimedia Foundation, 2001- [cit. 2015-02-17].
Dostupné z: http://cs.wikipedia.org/wiki/Millerovo_magick%C3%A9_%C4%8D%C3%ADslo 16. MASTIN, Luke. Short-Term Memory. The Human Memory [online]. 2010 [cit. 2015-02-17].
Dostupné z: http://www.human-memory.net/types_short.html
17. MASTIN, Luke. Long-Term Memory. The Human Memory [online]. 2010 [cit. 2015-02-17].
Dostupné z: http://www.human-memory.net/types_long.html
18. Paměťový palác. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, 2001- [cit. 2015-02-17].
Dostupné z: http://cs.wikipedia.org/wiki/Pam%C4%9B%C5%A5ov%C3%BD_pal%C3%A1c 19. SCHACTER, Daniel. The seven sins of memory: Insights from psychology and cognitive
neuroscience. American Psychologist. 1999, č. 54.
Dostupné z: http://scholar.harvard.edu/files/schacterlab/files/schacter_american_psychologi st_1999.pdf
20. Sedm hříchů paměti. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA):
Wikimedia Foundation, 2001- [cit. 2015-02-19].
Dostupné z: http://cs.wikipedia.org/wiki/Sedm_h%C5%99%C3%ADch%C5%AF_pam%C4%9Bti 21. Hermann Ebbinghaus. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA):
Wikimedia Foundation, 2001- [cit. 2015-02-19].
Dostupné z: http://en.wikipedia.org/wiki/Hermann_Ebbinghaus
22. ROBERTSON, Grant. A Brief History of the Mathematical Definition of Forgetting Curves. Ideationizing [online]. 2009 [cit. 2015-02-19].
Dostupné z: http://www.ideationizing.com/2009/06/brief-history-of-mathematical.html 23. Forgetting curve. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia
Foundation, 2001- [cit. 2015-02-19].
Dostupné z: http://en.wikipedia.org/wiki/Forgetting_curve
24. WOZNIAK, Piotr. Building memory stability through rehearsal. SuperMemo [online]. 2005 [cit.
2015-02-19]. Dostupné z: http://www.supermemo.com/articles/stability.htm
57 25. WOZNIAK, Piotr. Effective learning: Twenty rules of formulating
knowledge. SuperMemo [online]. 1999 [cit. 2015-02-21].
Dostupné z: http://www.supermemo.com/articles/20rules.htm
26. WOZNIAK, Piotr. General principles of SuperMemo. SuperMemo [online]. 2003 [cit. 2015-02-22]. Dostupné z: http://www.supermemo.com/english/princip.htm
27. Active recall. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, 2001- [cit. 2015-02-24].
Dostupné z: http://en.wikipedia.org/wiki/Active_recall
28. SÁNCHEZ, Aquilino a Rosa MANCHÓN. Research on Second Language Vocabulary Acquisition and Learning: An Introduction. International Journal Of English Studies [online]. 2007, 7(2) [cit. 2015-02-28].
Dostupné z: http://digitum.um.es/xmlui/bitstream/10201/2582/1/2595023.pdf
29. Lingua franca. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, 2001- [cit. 2015-02-28].
Dostupné z: http://cs.wikipedia.org/wiki/Lingua_franca
30. Knowledge of English. Language knowledge in EU27 [online]. 2012 [cit. 2015-02-28].
Dostupné z: http://languageknowledge.eu/languages/english
31. NATION, Paul. New Ways in Teaching Vocabulary. Alexandria: TESOL, 1994. ISBN ISBN-0-939791-51-X.
32. ZECHMEISTER, Eugene, Andrea CHRONIS, William CULL, Catherine D'ANNA a Noreen HEALY.
Growth of a Functionally Important Lexicon. Journal of Reading Behavior [online]. 1995, č. 27 [cit. 2015-02-28].
Dostupné z: http://jlr.sagepub.com/content/27/2/201.full.pdf
33. SZYNALSKI, Tomasz. Introduction to spaced-repetition software (SRS). Antimoon [online].
2001 [cit. 2015-02-28].
Dostupné z: http://www.antimoon.com/how/supermemo.htm
34. MCCARTHY, Michael a Felicity O'DELL. English vocabulary in use: advanced. 1st pub.
Cambridge: Cambridge University Press, 2002, 315 s. ISBN 978-0-521-67746-2-.
35. SZYNALSKI, Tomasz. Example sentences in dictionaries: More important than definitions. Antimoon [online]. 2001 [cit. 2015-02-28].
Dostupné z: http://www.antimoon.com/how/examplesent.htm
36. MATUCHOVÁ, Klára. Working with Words [prezentace]. Praha : Katedra anglického jazyka a literatury, UK, [cit. 2015-03-01].
58 37. Použitelnost. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia
Foundation, 2001- [cit. 2015-03-01].
Dostupné z: http://cs.wikipedia.org/wiki/Pou%C5%BEitelnost
38. WOZNIAK, Piotr. History of SuperMemo. SuperMemo [online]. 2013 [cit. 2015-02-22].
Dostupné z: http://www.supermemo.com/english/history.htm
39. Definition of accession in English from the Oxford dictionary. Oxford Dictionaries [online].
2015 [cit. 2015-03-07].
Dostupné z: http://www.oxforddictionaries.com/definition/english/accession
40. WOZNIAK, Piotr. Application of a computer to improve the results obtained in working with the SuperMemo method. SuperMemo [online]. 1990 [cit. 2015-02-22].
Dostupné z: http://www.supermemo.com/english/ol/sm2.htm
41. Linguistic Diversity. European Commission [online]. 2015 [cit. 2015-04-13].
Dostupné z: http://ec.europa.eu/languages/policy/linguistic-diversity/index_en.htm 42. Source Sans Pro. ADOBE. Adobe Fonts [online]. 2012 [cit. 2015-04-13].
Dostupné z: https://store1.adobe.com/cfusion/store/html/index.cfm?event=displayFontPack age&code=1959
43. MVC aplikace & presentery. Nette Framework [online]. 2012 [cit. 2015-04-13].
Dostupné z: http://doc.nette.org/cs/2.3/presenters
44. Model–view–controller. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA):
Wikimedia Foundation, 2001- [cit. 2015-04-13].
Dostupné z: http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller 45. Velký test PHP frameworků: Zend, Nette, PHP a RoR. DANĚK, Petr. Root.cz [online]. 2008 [cit.
2015-04-13].
Dostupné z: http://www.root.cz/clanky/velky-test-php-frameworku-zend-nette-php-a-ror/
46. ČÁPKA, David. MVC architektura. ITnetwork.cz [online]. 2013 [cit. 2015-04-13].
Dostupné z: http://www.itnetwork.cz/mvc-architektura-navrhovy-vzor
47. SELLIER, Alexis. Features of the Less language. Less.js [online]. 2014 [cit. 2015-04-13].
Dostupné z: http://lesscss.org/
48. CSS. Bootstrap [online]. 2015 [cit. 2015-04-16].
Dostupné z: http://getbootstrap.com/css/
49. Formuláře. Nette Framework [online]. 2015 [cit. 2015-04-16].
Dostupné z: http://doc.nette.org/cs/2.3/forms
50. HTML accesskey Attribute. W3Schools [online]. 2015 [cit. 2015-04-16].
Dostupné z: http://www.w3schools.com/tags/att_global_accesskey.asp
59 51. Summernote. Summernote [online]. 2015 [cit. 2015-04-16].
Dostupné z: http://summernote.org/
52. Merriam-Webster's Learner's Dictionary with Audio. Merriam-Webster Developer Center [online]. 2015 [cit. 2015-04-17].
Dostupné z: http://www.dictionaryapi.com/products/api-learners-dictionary.htm
53. PHP accelerator. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, 2001- [cit. 2015-04-18].
Dostupné z: http://en.wikipedia.org/wiki/PHP_accelerator
54. GRUDL, David. Návrh struktury presenters/views. PhpFashion [online]. 2008 [cit. 2015-04-18].
Dostupné z: http://phpfashion.com/navrh-struktury-presenters-views
55. Web browsers groups – details. GemiusRanking [online]. 2015 [cit. 2015-04-19].
Dostupné z: http://www.rankings.cz/en/rankings/web-browsers-groups.html
56. Web Design Process - Testing. The University of Texas at Austin [online]. 2006 [cit. 2015-04-19]. Dostupné z: https://www.utexas.edu/learn/designprocess/test.html
57. ELLIS, David. How much of an effect can different operating systems have on displaying web pages?. Stack Overflow [online]. 2012 [cit. 2015-04-19].
Dostupné z: http://stackoverflow.com/posts/9855806/revisions
58. Přístupnost a použitelnost. Pěstujeme Web [online]. 2010 [cit. 2015-04-19].
Dostupné z: http://www.pestujemeweb.cz/obsah/ruzne/pristupnost-a-pouzitelnost.php
60
Seznam tabulek, obrázků a grafů
Obrázky
Obrázek 1 – Schéma vztahu mezi jednotlivými typy paměti podle doby trvání ... 15
Obrázek 2 – Schéma fungování Leitnerova Systému (1) ... 24
Obrázek 3 – Snímek obrazovky aplikace SuperMemo ... 31
Obrázek 4 – Snímek obrazovky aplikace Anki ... 32
Obrázek 5 – Černobílá varianta loga aplikace ... 39
Obrázek 6 – Schéma fungování architektury MVC ... 40
Obrázek 7 – Porovnání rychlostí jednotlivých PHP frameworků (45) ... 41
Obrázek 8 – Entitně-relační diagram modelu (návrh) ... 61
Obrázek 9 – Entitně-relační diagram modelu (implementace) ... 61
Obrázek 10 – Grafický návrh úvodní stránky ... 62
Obrázek 11 – Grafický návrh samotné studijní aplikace se zobrazenou navigací ... 63
Tabulky
Tabulka 1 – Ukázka dvou řad, které je stejně obtížné si zapamatovat ... 14Tabulka 2 – Jednoduchá ukázka kartiček pro výuku cizího slova ... 23
Tabulka 3 – Příklad kartičky obsahující synonyma ... 29
Tabulka 4 – Srovnání aplikací pro procvičování anglické slovní zásoby ... 33
Tabulka 5 – Příklady vyhovujících a nevyhovujících kartiček. Zdroj dat: (39) ... 35
Tabulka 6 – Vysvětlení pojmů vyskytujících se v algoritmu SM-2 ... 36
Tabulka 7 – Hodnoty EF pro jednotlivé známky ... 37
Grafy
Graf 1 – Původní Ebbinghausova křivka sestavená z experimentálních hodnot (22) ... 20Graf 2 – Exponenciální křivka zapomínání pro S=2 ... 21
Graf 3 – Znázornění výpočtu optimálního intervalu pro opakování ... 25
61
Přílohy
Obrázek 8 – Entitně-relační diagram modelu (návrh)
Obrázek 9 – Entitně-relační diagram modelu (implementace)
62
Obrázek 10 – Grafický návrh úvodní stránky