View, tedy pohled, je vrstva aplikace, která má na starost zobrazení výsledku požadavku (43). Obvykle používá nějaký šablonovací systém, přičemž jeden z nejznámějších je Smarty. Nette framework využívá svůj systém Latte. Taková šablona obsahuje nejen tagy HTML, ale i tagy specifické pro tento šablonovací systém, které například umožňují do šablony vkládat proměnné, případně provádět cykly a podmínky (46). Zde je ukázka zdrojového kódu:
<p>Celkem máte ve své kolekci <strong>{$total}</strong>
kartiček, z nichž <strong>{$old + $new}</strong> byste si měli dnes <a n:href="Aplikace:procvicovani">procvičit</a>
2 http://simplehtmldom.sourceforge.net/
45 V ukázce výše jsou klasické HTML tagy ve špičatých závorkách a tagy „šablonovací“
v závorkách složených. Za zmínku stojí také generování odkazů v Nette, kdy se používá tzv. n:makro n:href, jehož hodnotou není URL, jak by tomu bylo v případě atributu href, ale přímo akce presenteru (43).
Aplikace využívá nejnovější verzi značkovacího jazyka HTML5 a těží především z přímé podpory přehrávání multimédií v prohlížeči. Uživatel si tak bez použití dalších pluginů může přehrát audio nahrávku výslovnosti. Dále jsou využity některé vlastnosti nejnovější verze kaskádových stylů CSS3. Do třetice je použitý i skriptovací jazyk JavaScript. V dnešní době se bez této trojice technologií málokterá webová aplikace obejde.
V aplikaci jsou rovněž využity dva webové fonty. První, v návrhu zmíněný Source Sans Pro, je do stránek vložen pomocí služby Google Fonts. Druhý je Font Awesome, což je ikonový font, který místo klasických znaků obsahuje přes 500 grafických symbolů. Důvodem jeho využití je snaha usnadnit uživatelům průchod webovou aplikací a vylepšit tzv. user experience. Využití ikonových fontů s sebou nese spoustu výhod. Jelikož využívají vektory, můžou být velmi snadno a rychle přizpůsobeny pomocí CSS – velikostí, barvou nebo vraženým stínem.
7.3.1 Bootstrap
Při implementaci uživatelské části byl zvolen framework Bootstrap, zastřešující zmiňované technologie HTML, CSS a JavaScript. Bootstrap slouží k vytváření responsivních webových aplikací, což znamená, že webová stránka se automaticky přizpůsobí a vypadá dobře na jakémkoliv zařízení od chytrých telefonů po širokoúhlé monitory. Bootstrap je také kompatibilní se všemi moderními prohlížeči, čímž urychluje a ulehčuje vývoj.
Responsivnost je v Bootstrapu řešena pomocí tzv. plovoucí mřížky, která má 12 sloupců a libovolný počet řádků. Pro každý prvek se pak určí, jak velkou část daného řádku má zabírat. Tato šířka se udává v počtu sloupců a může být pro různá zařízení odlišná.
V Bootstrapu se rozlišují celkem čtyři různé druhy zařízení (48):
Extra small (<768px) pro telefony má zkratku xs
Small (≥768px) pro tablety má zkratku sm
Medium (≥992px) pro notebooky má zkratku md
46
Large (≥1200px) pro velké monitory má zkratku lg
Pokud například chceme, aby prvek zabíral čtvrtinu šířky řádku pro velké displeje a polovinu pro malé, můžeme napsat následující kód:
<div class="row"> <!-- začátek řádku -->
<div class="col-lg-3 col-sm-6">...</div>
</div> <!-- konec řádku -->
Dále je důležité nezapomenout na vložení „responzivního“ meta-tagu do hlavičky stránky, který zajišťuje správné vykreslování na různých zařízeních:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
Tato informace webovému prohlížeči říká, aby jako šířku stránky použil skutečnou šířku displeje konkrétního zařízení a ne předdefinovanou hodnotu v CSS. Dále je také možné nastavit, aby nebylo možné stránku na mobilních zařízeních dále přibližovat pomocí zápisu user-scalable = no.
Bootstrap také obsahuje předem nastylované HTML prvky od nadpisů, přes tlačítka až po drobečkovou navigaci3. Vzhled lze ovšem velice rychle a snadno změnit pomocí dynamického jazyka pro tvorby kaskádových stylů LESS, který rozšiřuje CSS o prvky jako jsou proměnné, mixiny4, výpočty a funkce. LESS může běžet jak na klientské straně, tak na straně serveru (47). V praxi to znamená, že framework Bootstrap obsahuje soubor variables.less, který v sobě má všechny proměnné (například barvy, velikost písma atp.) Stačí tedy modifikovat pouze tento soubor a následně si nechat vygenerovat nový soubor CSS, který se následně vloží do webových stránek. Zde je ukázka:
@niceblue: #1e8ee4; // proměnná s barvou
@font-size-base: 18px; // proměnná s velikostí písma
h1 {color: @niceblue; font-size: @font-size-base} // aplikace
3 Navigace znázorňující pozici aktuální stránky v hierarchii webu. Např.: Úvod > Slovíčka > Breadcrumb
4 Mixiny umožňují vložit všechny CSS vlastnosti třídy do jiné třídy, a to jednoduše specifikací jejího názvu uvnitř jiné třídy (57).
47 Následné použití Bootstrap frameworku by se dalo shrnout tak, že se do webových stránek vloží CSS a JavaScript soubor a poté se jen jednotlivým HTML prvkům přiřazují správné třídy podle dokumentace, která je dostupná na webových stránkách frameworku.
7.3.2 JavaScript
Aplikace na několika místech využívá JavaScript a některé jeho knihovny. Jeden z příkladů je validace na straně klienta, kdy JavaScript v aplikaci předchází dotazům, které by server zbytečně zatěžovaly. V aplikaci jsou využity validační skripty pro formuláře, které jsou poskytovány přímo frameworkem Nette. V presenteru lze velmi snadno nastavit, jaká validační pravidla chceme pro daný formulářový prvek nastavit. Například:
$form->addPassword('password') ->setRequired()
->addRule(Form::MIN_LENGTH,'Heslo musí mít min. %d znaků',6);
Kód výše přidá do formuláře pole pro heslo, nastaví ho jako povinné a požaduje po uživateli, aby heslo bylo alespoň šest znaků dlouhé.
Validační pravidla se na stranu JavaScriptu přenášejí v HTML atributech data-nette-rules, které obsahují JSON popisující jednotlivá pravidla nebo podmínky. Samotnou validaci pak provádí skript, který odchytí událost odeslání formuláře, projde jednotlivé prvky a vykoná příslušnou validaci (49).
V aplikaci je také použita populární knihovna jQuery, která práci s JavaScriptem velmi usnadňuje. Její konkrétní využití se týkalo různých efektů, animací, AJAX a výběru DOM elementů. Následující kód ukazuje, co se stane po stisknutí tlačítka „Zobrazit odpověď“ při procvičování:
$('#showAnswer').click(function () { $(this).fadeOut(); // skryje tlačítko
$("#answer, #feedback").fadeIn(); // zobrazí odpověď $("#ok").focus(); // nastaví známku 2 jako aktivní });
Následující tři JavaScriptové knihovny mají, na rozdíl od jQuery, celkem specifické použití.
Po přihlášení se uživatelům zobrazuje stránka se statistikami o kartičkách a jejich studiu.
48 Právě v této části byla použita knihovna Chart.js5, která po předání patřičných dat vykreslí do HTML tagu canvas responsivní koláčový graf. Kromě tohoto typu grafu, lze pomocí knihovny vytvářet i pět jiných typů.
Další knihovnou je jQuery Hotkeys6, která usnadňuje vytváření klávesových zkratek v prostředí webových aplikací. Toho je využito v procvičování, kde uživatel může velmi snadno a rychle zobrazit druhou stranu kartičky pomocí mezerníku nebo enteru a oznámkovat se klávesami 1, 2 nebo 3 podle toho jak správná či špatná jeho odpověď byla. Tato funkcionalita sice může být realizována i v nativním HTML pomocí vlastnosti accesskey, problém ovšem je, že různé prohlížeče a různé operační systémy často vyžadují odlišné inicializační klávesy (50).
Poslední knihovnou, která byla v aplikaci využita je Summernote.js7, která je svými tvůrci označována jako „velmi jednoduchý WYSIWYG editor pro Bootstrap“ (51). Tento editor je dostupný uživatelům jak při přidávání nových významů, tak při jejich editaci. Především těm, kteří mají vizuálně-prostorovou inteligenci, umožňuje formátovat různé části ukázkových vět tak, aby si je mohli lépe zapamatovat.