bakalarka/kap-modelova-implementace.tex

\chapter{Modelová implementace}

\section{Požadavky na modelový web}

K této práci byl jako modelová implementace zvolen web pro distribuci výukových materiálů. Webové stránky byly objednány Ústavem výzkumu a rozvoje vzdělávání Pedagogické fakulty Univerzity Karlovy za účelem usnadnění práce již aktivních učitelů a jsou tedy plně využívány v praxi mnoha učiteli z celé republiky. Materiály jsou určeny pro učitele během vyhlášeného stavu nouze v době šíření viru COVID-19 a mají učitelům pomoci s přípravou distanční výuky a úkolů pro studenty během karantény. Tuto implementaci lze ovšem použít na distribuci jakýchkoliv jiných výukových materiálů.

Hlavním požadavkem je možnost dělit obsah na sekce dle druhu školy (základní škola, střední škola, vysoká škola atd.) a dále pak na subsekce podle předmětů a oborů. Obsah každé stránky s obsahem je třeba dělit na sekci odkazů, sekci se soubory a sekci s videi. Všechny tyto soubory musí být distribuovatelné přímo z webových stránek, nikoliv s externích zdrojů. Všechna videa je nutné vložit do stránky a musí je být možné přehrát přímo v nativním přehrávači prohlížeče bez nutnosti otevírání externích webů.

Stránky musí být staticky generované a není tedy žádoucí v rámci webu řešit uživatelské účty, přihlašování apod. Zároveň je důležité, aby byl obsah zobrazitelný na každém druhu zařízení, tedy jak na monitorech s nadstandardní velikostí, tak na mobilních zařízeních. Z důvodu potencionálního vytížení sítě je nutné, aby byl celý obsah optimalizován za účelem předejití  vysoké latence, a to z důvodů probíraných v předchozích částech práce.


\section{Výběr vhodného systému}

Pro správu obsahu i šablon a statických souborů byl zvolen systém Git. Hlavní výhodou tohoto verzovacího systému ...

\section{Tvorba šablony}

\section{Rozšíření šablony}

Ve výchozím stavu generátor neumí vklládat nic jiného, než je uvedeno ve specifikaci CommonMark\footnote{\url{https://commonmark.org/}}. Dle požadavků modelového webu je nutné, aby generátor uměl vkládat videa přímo do stránky. Taková funkce není soušástí specifikace CommonMark a je tedy potřeba rozšířit funkcionalitu generátoru. Nejvhodnějším způsobem přidání vlastní funkce je využití vlastních filtrů, které se v rámci generátoru nazývají \uv{shortcode}.

Principem vlastních filtrů je to, že uživatel si vytvoří vlastní šablonu, kterou lze vyvolat speciální řídící sekvencí přímo z obsahu. Každý tento shortcode může pracovat s libovolným množstvím proměnných a po zpracování vloží do místa vyvolání zkompilovaný HTML kód. Lze tedy tvrdit, že shortcode je v své podstatě imperativní funkce, která umí pracovat  s parametry.

Pro tvorbu těchto filtrů je v generátoru Zola určena složka \texttt{templates/shortcodes}, která obsahuje jejich HTML šablony. Název HTML souboru definuje název vlastního filtru. Vytvoříme-li soubor \texttt{templates/shortcodes/video.html}, budeme schopni využívat vlastní filtr s názvem \texttt{video}.

V následujícím příkladu bude filtr očekávat atribut \texttt{src} a bude vracet jednoduchý HTML kód pro vložení videa do stránky.
\begin{lstlisting}
<video controls><source src="{{ src }}"></video>
\end{lstlisting}

Tento filtr lze vyvolat kdekoliv v obsahu, tedy v kterémkoliv souboru s koncovkou \texttt{.md}.

\begin{lstlisting}
{{ video(src="video.webm") }}
\end{lstlisting}

Výstupem této direktivy bude následující HTML kód.

\begin{lstlisting}
<video controls><source src="video.webm"></video>
\end{lstlisting}

Součástí požadavků pro modelový web jsou i citace přiložených souborů a videí. Existující filtr je tedy třeba rozšířit o možnost přiložení různých metadat. Tato metadata ovšem nejsou pro vložení videa povinná. Ve specifikaci vlastních filtrů lze využívat všechny operátory, které generátor nabízí. Nejlepším přístupem k tomuto problému je tedy využití jednoduchých podmínek, které kontrolují, zda je každá z hodnot zadána jako parametr a v případě že ano, vepíše se do obsahu. V následujícím příkladu jsou přidány tři podmínky pro kontrolu a případné vložení, jimiž jsou název videa (\texttt{title}), jméno autora (\texttt{author}) a datum vytvoření (\texttt{date}).

\begin{lstlisting}
{% if title %}
	<div class="title">{{ title }}</div>
{% endif %}
	<video controls><source src="{{ src }}"></video>
{% if author %}
	<div class="metadata">{{ author }}</div>
{% endif %}
{% if date %}
	<div class="metadata">{{ date }}</div>
{% endif %}
\end{lstlisting}

Pouze atribut \texttt{src} je podle tohoto filtru povinný. Filtr lze opět vyvolat pomocí stejné direktivy kdekoliv v obsahu, ovšem nyní lze libovolně přidat parametry pro metadata.

\begin{lstlisting}
{{ video(
	src="video.webm",
	title="Nazev videa",
	author="Jmeno autora",
	date="2020-03-22"
) }}
\end{lstlisting}
\todo[inline]{Opravit háčky a čárky v blocích kódu.}

Výtupem toho filtru bude tedy následující HTML.

\begin{lstlisting}
<div class="title">Nazev videa</div>
<video controls><source src="video.webm"></video>
<div class="metadata">Jmeno autora</div>
<div class="metadata">2020-03-22</div>
\end{lstlisting}

\section{Optimalizace}

\section{Požadavky na rozšíření}