89 lines
6.8 KiB
TeX
89 lines
6.8 KiB
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 a kód pro zpracování generátorem. Název HTML souboru definuje název vlastního filtru. Vytvoříme-li uvitř této složky soubor nazvaný \texttt{video.html}, budeme schopni využívat vlastní filtr s názvem \texttt{video}.
|
|
|
|
\begin{lstlisting}[label=lst:jednoduchy-filtr,caption=Příklad jednoduchého filtru s jedním atributem]
|
|
<video controls><source src="{{ src }}"></video>
|
|
\end{lstlisting}
|
|
|
|
V příkladu \ref{lst:jednoduchy-filtr} bude filtr očekávat atribut \texttt{src} a bude vracet jednoduchý HTML kód pro vložení videa do stránky. Tento filtr lze vyvolat kdekoliv v obsahu, tedy v kterémkoliv souboru s koncovkou \texttt{.md}. Za názvem filtru se do závorky uvádí parametry oddělené čárkou. U posledního parametru se čárky nevuvádí, což platí i v případě, kdy se uvádí pouze jeden parametr, jako je tomu v příkladu \ref{lst:vyvolani-filtru}.
|
|
|
|
\begin{lstlisting}[label=lst:vyvolani-filtru,caption=Vyvolání vlastního filtru s jedním parametrem]
|
|
{{ video(src="video.webm") }}
|
|
\end{lstlisting}
|
|
|
|
V rámci vybraného generátoru není nutné specifikovat atributy na jeden řádek a lze je pro přehlednost vypisovat na více řádků, jako tomu je například u programu \ref{lst:formatovani-atributu}, zůstane-li dodržena koncepce oddělení atributů čárkou, tedy že poslední atribut vždy zůstane bez čárky. Výstupem této direktivy bude následující HTML kód.
|
|
|
|
\begin{lstlisting}[caption=Výstup direktivy z příkladu \ref{lst:jednoduchy-filtr}]
|
|
<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. Atributy ošetřené podmínkami tedy nejsou povinné, zatímco nevyplněný atribut \texttt{src} by při generování vyvolal chybu. 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}[label=lst:filtr-s-podminkami,caption=Filtr pro vkládání videa s využitím podmínek]
|
|
{% 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}
|
|
|
|
Filtr je možné opět vyvolat pomocí stejné direktivy kdekoliv v obsahu, ovšem nyní lze libovolně přidat parametry pro metadata.
|
|
|
|
\begin{lstlisting}[label=lst:formatovani-atributu,caption=Vyvolání filtru \ref{lst:filtr-s-podminkami} s formátováním na řádky]
|
|
{{ video(
|
|
src="video.webm",
|
|
title="Název videa",
|
|
author="Jméno autora",
|
|
date="2020-03-22"
|
|
) }}
|
|
\end{lstlisting}
|
|
|
|
Protože byly zadány všechny povinné i nepovinné atributy, výtupem toho filtru budou i části kódu s metadaty.
|
|
|
|
\begin{lstlisting}[caption=Výstup direktivy z příkladu \ref{lst:formatovani-atributu}]
|
|
<div class="title">Název videa</div>
|
|
<video controls><source src="video.webm"></video>
|
|
<div class="metadata">Jméno autora</div>
|
|
<div class="metadata">2020-03-22</div>
|
|
\end{lstlisting}
|
|
|
|
\todo[inline]{Přidat příklad filtru pro soubory.}
|
|
|
|
\todo[inline]{Přidat popis možnosti procházení assetů ve složce a proč e to v této implementaci nevhodné.}
|
|
|
|
\section{Optimalizace}
|
|
|
|
|
|
|
|
\cite{calomel_optimization}
|
|
|
|
\section{Správa obsahu a verzování}
|
|
|