Princip statické webové stránky sahá až ke vzniku WWW, kdy existovaly pouze stránky statické, tedy stránky nevytvářené dynamicky na základě různých proměnných a na uživatelském vstupu. U~statických webových stránek dochází k~vytvoření HTML kódu ve chvíli, kdy je změněn zdrojový obsah, nebo kdy autor ručně spustí generátor. \citep{pcmag_static}
Princip statické webové stránky sahá až ke vzniku WWW, kdy existovaly pouze stránky statické, tedy stránky nevytvářené dynamicky na základě různých proměnných a na uživatelském vstupu. U~statických webových stránek dochází k~vytvoření HTML kódu ve chvíli, kdy je změněn zdrojový obsah nebo kdy autor ručně spustí generátor. \citep{pcmag_static}
Dynamické stránky jsou generovány speciálně pro každého uživatele na základě jeho nastavení, různých vstupů, proměnných a dalších vlastností ovlivňujících výslednou podobu či obsah stránky. Ke generování dochází ve chvíli, kdy si uživatel stránku vyžádá, nikoliv předem, jako je tomu u~staticky generovaných stránek. \citep{pcmag_dynamic}
@ -15,16 +15,16 @@ Eliminováním dynamického obsahu se také předchází nevyžádaným vstupům
Sledování a analýze nejčastějších chyb webových aplikací a serverů se věnuje organizace OWASP\footnote{The Open Web Application Security Project (\url{https://owasp.org/}).}, která vydává aktualizované seznamy a statistiky. Podle \cite{owasp2017} se v~roce 2017 objevovaly nejčastěji tyto chyby a bezpečnostní nedostatky:
\begin{enumerate}
\item{Injekce}
\item{Rozbitá autentizace}
\item{Odhalení citlivých dat}
\item{XML External Entities (XXE)}
\item{Nefunkční řízení přístupu}
\item{Špatná konfigurace zabezpečení}
\item{Cross-Site Scripting (XSS)}
\item{Nezabezpečená deserializace}
\item{Užívání komponent se známými zranitelnostmi}
\item{Nedostatečné logování a monitorování}
\item injekce,
\item rozbitá autentizace,
\item odhalení citlivých dat,
\item XML External Entities (XXE),
\item nefunkční řízení přístupu,
\item špatná konfigurace zabezpečení,
\item Cross-Site Scripting (XSS),
\item nezabezpečená deserializace,
\item užívání komponent se známými zranitelnostmi,
\item nedostatečné logování a monitorování.
\end{enumerate}
Většina těchto chyb se vztahuje právě k~dynamickým webovým aplikacím. Bezpečnost tedy závisí nejen na programátorovi, jenž aplikaci vytváří, ale také na tom, že programovací jazyk je bezpečně implementován. To nelze tvrdit o~nejpoužívanějším jazyce PHP, který obsahuje mnoho chyb, viz statistika nalezených bezpečnostních děr na serveru \cite{cve_php}, který se tímto tématem zabývá. Jazyk zároveň nevede programátora k~psaní bezpečného kódu, což má za následek nebezpečené aplikace, pokud si autor nedá pozor na správné ošetření vstupů a dalších bezpečnostních aspektů programu.
@ -39,12 +39,12 @@ Jako každý jiný systém, i statické generátory mají své nevýhody. Hlavn
Ekosystém generátoru statického obsahu je tvořen ze tří hlavních složek.
První částí jsou soubory šablon, jež popisují rozložení stránky, vizuální vlastnosti, typografii, ale také vstupní a výstupní kódování a formáty. V~podstatě definují jak a kam se bude obsah vkládat.
První částí jsou soubory šablon, jež popisují rozložení stránky, vizuální vlastnosti, typografii, ale také vstupní a výstupní kódování a formáty. V~podstatě definují, jak a kam se bude obsah vkládat.
Druhou částí je obsah samotný, napsaný v~některém ze značkovacích jazyků, jež jsou dále popsány v~kapitole \ref{kap:znackovaci-jazyky}. Obsah bývá strukturován do sekcí a souborů, aby bylo snadné rozlišit, do které části výsledné stránky patří.
Třetí a poslední složkou je samotné jádro generátoru, jež zpracovává obsah, vkládá ho do šablon a generuje statickou webovou stránku.
Většina generátorů zároveň umí pracovat s~konfiguračními soubory, pomcí nichž lze nastavit globální chování generátoru. Část z~nich také integruje jednoduchý webserver, který umožňuje autorovi náhled výstupních stránek, zatím co tvoří obsah.
Většina generátorů zároveň umí pracovat s~konfiguračními soubory, pomocí nichž lze nastavit globální chování generátoru. Část z~nich také integruje jednoduchý webserver, který umožňuje autorovi náhled výstupních stránek, zatím co tvoří obsah.
@ -4,17 +4,22 @@ Tato kapitola se zabývá analýzou nejběžnějších jazyků pro popis obsahu
\section{Principy značkovacích jazyků}
Definici konceptu značkovacích jazyků neboli \uv{markup jazyků}, můžeme najít napří\-klad v~RFC 7764\footnote{Jako \textit{RFC} se označují standardy vydané organizací IETF (Internet Engineering Task Force).}, tedy že v~počítačových systémech jsou kontextuální data ukládána a zpracována několika technikami. Informaci lze kódovat jako čistý text bez speciálních formátovacích znaků. Tento přístup je jednoduchý pro implementaci i použití, ovšem neumožňuje složitější formátování textu.
Definici konceptu značkovacích jazyků nebo-li \uv{markup jazyků}, můžeme najít napří\-klad v~RFC 7764\footnote{Jako \textit{RFC} se označují standardy vydané organizací IETF (Internet Engineering Task Force).}, tedy, že v~počítačových systémech jsou kontextuální data ukládána a zpracovávána několika technikami. Informaci lze kódovat jako čistý text bez speciálních formátovacích znaků. Tento přístup je jednoduchý pro implementaci i použití, ovšem neumožňuje složitější formátování textu.
Kódovat můžeme i do binárních formátů určených ke zpracování a interpretaci specia\-lizovaným programem, jimiž mohou být například LibreOffice Writer, či proprietární software\footnote{Software nerespektující základní svobody uživatele, které jsou popsány na adrese \url{https://www.gnu.org/philosophy/free-sw.html}} Microsoft Word. Zřejmou nevýhodou je to, že zdroj není čitelný bez programu určeného pro jeho interpretaci.
Kódovat můžeme i do binárních formátů určených ke zpracování a interpretaci specia\-lizovanými programy, jimiž mohou být například LibreOffice Writer, či proprietární software\footnote{Software nerespektující základní svobody uživatele, které jsou popsány na adrese \url{https://www.gnu.org/philosophy/free-sw.html}} Microsoft Word. Zřejmou nevýhodou je to, že zdroj není čitelný bez programu určeného pro jeho interpretaci.
Markup jazyky se snaží o~spojení nejlepšího z~obou světů, tedy o~obsah s~možností formátování, který je jednoduše čitelný jak pro člověka, tak pro stroj. Toho je dosaženo tím, že v~je v~běžných textových souborech přiřazen vybraným znakům speciální význam. Uživatel je schopen tyto znaky psát bez potřeby speciálních nástrojů, a tím jednoduše tento speciální význam vyjádřit. Například v~rámci jazyka Markdown, jenž je popsán v~následujích sekcích, se význam znaku \texttt{\#} na začátku řádku mění z~běžného křížku na definování nadpisu první úrovně. \citep{rfc7764}
\section{Nejběžnější jazyky}
V~současnosti existuje nespočet značkovacích jazyků, z~nichž nejčastěji používaným je nepochybně HTML, ovšem tato práce se věnuje těm nejpoužívanějším jazykům, jenž mají uživateli usnadnit psaní a sázení obsahu. Uživatel se tedy nemusí při jeho tvorbě nutně zabývat typografií a formátováním obsahu, což jsou aspekty, o~které se později stará generátor pomocí šablon. U~HTML je tomu naopak, uživatel řeší samotný obsah i formátování v~jednu chvíli skrze různé druhy formátovacích tagů. O~vyplňování obsahu do HTML se v~případě staticky generovaných webových stránek stará právě samotný generátor.
V~současnosti existuje nespočet značkovacích jazyků, z~nichž nejčastěji používaným je nepochybně HTML, ovšem tato práce se věnuje těm nejpoužívanějším jazykům, jež mají uživateli usnadnit psaní a sázení obsahu. Uživatel se tedy nemusí při jeho tvorbě nutně zabývat typografií a formátováním obsahu, což jsou aspekty, o~které se později stará generátor pomocí šablon. U~HTML je tomu naopak, uživatel řeší samotný obsah i formátování v~jednu chvíli skrze různé druhy formátovacích tagů. O~vyplňování obsahu do HTML se v~případě staticky generovaných webových stránek stará právě samotný generátor.
Vybrané jazyky jsou zároveň cílené na čitelnost samotného zdrojového obsahu v~čistém textu bez nutnosti jeho interpretace speciálním prostředím či zpracováním do jiných formátů, jimiž mohou být PDF, DjVu, PostScript apod. Například podtržení textu je v~nějakém pseudo-jazyce reprezentováno opravdovým podtržením pomocí spojovníků, nikoliv obalením nadpisu ve speciální deklaraci, jako je tomu právě u~jazyka HTML. Podtržení je poté pro čtenáře mnohem jasnější, jelikož nemusí přemýšlet, co v~kontextu HTML daný tag znamená, kdežto podtržení z~kontextu souboru vyplývá.
Vybrané jazyky jsou zároveň cílené na čitelnost samotného zdrojového obsahu v~čistém textu bez nutnosti jeho interpretace speciálním prostředím či zpracováním do jiných formátů, jimiž mohou být PDF, DjVu, PostScript apod. Například podtržení textu je v~nějakém pseudo-jazyce reprezentováno opravdovým podtržením pomocí rovnítek, viz příklad \ref{lst:pseudo-jazyk}, nikoliv obalením nadpisu ve speciální deklaraci, jako je tomu právě u~jazyka HTML. Podtržení je poté pro čtenáře mnohem jasnější, jelikož nemusí přemýšlet, co v~kontextu HTML daný tag znamená, kdežto podtržení z~kontextu souboru vyplývá.
\begin{lstlisting}[label=lst:pseudo-jazyk,caption=Příklad podtržení nadpisu ve značkovacím pseudo-jazyce]
Nadpis
======
\end{lstlisting}
Následující jazyky byly vybrány základě jejich výskytu u~generátorů vybraných v~předchozí kapitole a také podle aktuálních statistik ze serveru \cite{slant}, který se věnuje obecnému určení oblíbenosti na základě hodnocení ze strany uživatelů.
@ -22,13 +27,13 @@ Následující jazyky byly vybrány základě jejich výskytu u~generátorů vyb
Tento jazyk se vzdaluje od původního konceptu čitelnosti zdroje, ovšem ve statických generátorech ho lze stále efektivně využít. Je jedním z~nejrozšířenějších sázecích jazyků se spoustou možností a funkcionalit, z~nichž velmi zajímavým rozšířením je prostředí pro psaní matematických formulí, díky němuž se jazyk stal velmi populárním v~oblasti technických publikací. Tyto funkcionality se často objevují i v~jiných jazycích a jsou efektivně využívány pro jejich rozšíření.
Většina uživatelů se setkala spíše s~jazykem \LaTeX, tedy s~nadstavbou původního \TeX{}u, která má uživateli zjednodušit práci svými makry a rozšířeními. Realita je ovšem taková, že \LaTeX{} dělá celou práci složitější, jak popisuje doktor Olšák:
Většina uživatelů se setkala spíše s~jazykem \LaTeX, tedy s~nadstavbou původního \TeX{}u, která má uživateli zjednodušit práci svými makry a rozšířeními. Realita je ovšem taková, že \LaTeX{} dělá celou práci složitější, jak popisuje RNDr. Olšák:
\begin{quote}
Představte si, že si nějaký uživatel přečte \LaTeX{}ovou příručku a nabude doj\-mu, že mu bude stačit rozumět problematice sazby na úrovni této příručky. Pak se jednou překlepne třeba při sestavování tabulky a na terminálu na něj \TeX{} křičí: {\tt Extra alignment tab has been changed to "\verb|\cr|".} Uživatel začne znovu listovat ve své příručce a zjistí, že tam o~žádném "\verb|\cr|"{} není jediná zmínka. Má pak tři možnosti: (1)~Zmáčkne Enter a podobně se zachová i u~dalších chyb. Pomyslí si, že ten \LaTeX{} je něco tajemného a mys\-tického. (2)~Propadne zoufalství a jde od toho. Dojde k~závěru, ľe je lepší zůstat u~Wordu. Vždyť stačí vzít tabulku v~Excelu a jednoduše ji přemístit do Wordu a jaképak smolení se s~nějakým podezřelým "\verb|\cr|". (3)~Pořídí si \TeX{}book a po intenzivním studiu nakonec řekne: \uv{aha}. V~tuto chvíli ale už nepotřebuje, aby mu \LaTeX{} zakrýval složitost \TeX{}u. \citep{nolatex}
\end{quote}
Ve výsledku je tedy lepší, z~různých důvodů popsaných doktorem Olšákem v~jeho publikaci, použít samotný plain \TeX{} na úkor vyšší vstupní úrovně pro používání jazyka.
Ve výsledku je tedy lepší, z~různých důvodů popsaných RNDr. Olšákem v~jeho publikaci, použít samotný plain \TeX{} na úkor vyšší vstupní úrovně pro používání jazyka.
\subsection{Troff}
@ -44,24 +49,24 @@ Jazyk Markdown vznikl 19. března roku 2004, když John Gruber vydal první popi
Hlavním z~cílů syntaxe jazyka je vytvářet co možná nejčitelnější obsah podobě čistého textu. Dokument psaný v~Markdownu by měl být publikovatelný jako textový soubor bez dalších úprav a zpracování. Jazyk byl ovlivněn několika již existujícími specifikacemi jiných jazyků, ovšem největším zdrojem inspirace pro jeho vznik jsou čisté e-mailové korespondence\footnote{E-mail, který není formátován pomocí HTML.}. \citep{daringfireball}
První specifikaci Gruber vydal společně s~referenční implementací v~jazyce Perl, která prováděla konverzi zdrojového souboru popsaného v~jazyce Markdown do HTML. Tento program je také pojmenován jako \uv{Markdown}, ovšem mluvíme-li o~\uv{Markdownu}, máme nejčastěji na mysli samotnou syntaxi. Ta má dnes mnoho implementací v~různých programovacích jazycích. Gruberova specifikace ovšem není formálním standardem, kvůli čemuž vznikl veliký počet alternativních a více či méně pozměněných implementací, jenž nemusí být navzájem kompatibilní. Nejčastějšími z~nich jsou například Github Markdown, CommonMark, RMarkdown a mnoho dalších. \citep{commonmark}
První specifikaci Gruber vydal společně s~referenční implementací v~jazyce Perl, která prováděla konverzi zdrojového souboru popsaného v~jazyce Markdown do HTML. Tento program je také pojmenován \textit{Markdown}, ovšem mluvíme-li o~\textit{Markdownu}, máme nej\-častěji na mysli samotnou syntaxi. Ta má dnes mnoho implementací v~různých programovacích jazycích. Gruberova specifikace ovšem není formálním standardem, kvůli čemuž vznikl veliký počet alternativních a více či méně pozměněných implementací, jež nemusí být navzájem kompatibilní. Nejčastějšími z~nich jsou například Github Markdown, CommonMark, RMarkdown a mnoho dalších. \citep{commonmark}
Nevyužívanější formální specifikací je právě CommonMark\footnote{\url{https://commonmark.org/}}, jenž slouží jako pevný základ většiny rozšíření. \citep{github_formal_markdown_spec}
Podobně jako je tomu u~specifikací, existuje velké množství programů, které tyto různé specifikace překládají. Švýcarským nožem mezi nimi je program Pandoc\footnote{\url{https://pandoc.org/}}, jenž umí překládat Markdown do enormního výběru jiných formátů, nebo z~jiných formátů zpět. Tato funkcionalita se nevztahuje pouze na jazyk Markdown, Pandoc dokáže operovat mezi všemi podporovanými formáty, například dokáže konvertovat obsah z~HTML do \TeX{}u. Na druhou stranu existují i velmi jednoduché překladače, například program smu\footnote{\url{https://github.com/Gottox/smu}}, který umí překládat Markdown do HTML nebo čistého textu a neobsahuje více než šest set řádků kódu hlavního programu.
Podobně, jako je tomu u~specifikací, existuje velké množství programů, které tyto různé specifikace překládají. Švýcarským nožem mezi nimi je program Pandoc\footnote{\url{https://pandoc.org/}}, jenž umí překládat Markdown do enormního výběru jiných formátů, nebo z~jiných formátů zpět. Tato funkcionalita se nevztahuje pouze na jazyk Markdown, Pandoc dokáže operovat mezi všemi podporovanými formáty, například dokáže konvertovat obsah z~HTML do \TeX{}u. Na druhou stranu existují i velmi jednoduché překladače, například program smu\footnote{\url{https://github.com/Gottox/smu}}, který umí překládat Markdown do HTML nebo čistého textu a neobsahuje více než šest set řádků kódu hlavního programu.
Užitečným rozšířením je, mimo jiné, také integrace matematického prostředí z~jazyka \TeX, viz sekce \ref{kap:tex}.
\subsection{Org-mode}
Org-mode vznikl jako jeden z~módů pro editor Emacs\footnote{\url{https://www.gnu.org/software/emacs/}}. Funguje podobně jako ostatní markup jazyky, tedy jako jeden centrální systém pro správu obsahu, ze kterého lze vytvářet jiné formáty, například HTML, \LaTeX, Open Document, Markdown, PDF a podobně s~možností přidání libovolného nového backendu. Cílem Org-mode je možnost ho používat i s~minimální úrovní jeho znalosti, ovšem jeho funkcionalita je vždy přístupná. Vše je realizováno pouze na čistých textových souborech, nejlépe přenositelným typem souboru. Editor Emacs je zároveň velmi často portován na různé druhy systémů a je tedy možné ho využívat v~podstatě kdekoliv. \citep{orgmanual}
Org-mode vznikl jako jeden z~módů pro editor Emacs\footnote{\url{https://www.gnu.org/software/emacs/}}. Funguje podobně jako ostatní markup jazyky, tedy jako jeden centrální systém pro správu obsahu, ze kterého lze vytvářet jiné formáty, například HTML, \LaTeX, Open Document, Markdown, PDF a podobně s~možností přidání libovolného nového backendu. Cílem Org-mode je možnost ho používat i s~minimální úrovní jeho znalosti, ovšem jeho funkcionalita je vždy přístupná. Vše je realizováno pouze na čistých textových souborech, nejlépe přenositelným typem souboru. Editor Emacs je zároveň velmi často portován na různé druhy systémů, a je tedy možné ho využívat v~podstatě kdekoliv. \citep{orgmanual}
Podporuje také \uv{literate programming} a \uv{reproducible research}, tedy že Org soubory mohou obsahovat plně funkční bloky s~kódem, které lze hodnotit v~rámci systému, a výstup bloků lze automaticky vkládat přímo do dokumentu. \citep{environment_for_literate_programming}
Podporuje také \uv{literate programming} a \uv{reproducible research}, tedy, že Org soubory mohou obsahovat plně funkční bloky s~kódem, které lze hodnotit v~rámci systému, a výstup bloků lze automaticky vkládat přímo do dokumentu. \citep{environment_for_literate_programming}
Jak popisuje \cite{carsten_dominik} ve svém krátkém technickém popisu, Org-mode umí navrhování, psaní poznámek, hypertextové odkazy, tabulky, seznamy, plánování projektů, GTD, HTML a \LaTeX{}, a to všechno v~čistých textových souborech v~editoru Emacs.
\subsection{reStructuredText}
Tento jazyk, známý také jako ReST, je, stejně jako Markdown, zároveň syntaxí i parsovacím systémem syntaxe pro tvorbu dokumentů a webových stránek. Svou oblibu získal hlavně v~komunitě jazyka Python. Ve své dokumentaci\footnote{\url{https://docutils.sourceforge.io/rst.html}} je popisován jako syntaxe pro využití ke psaní \textit{Python docstrings} a dalších druhů dokumentace, která je spolehlivá a jednoduchá. ReST vznikl v~návaznosti na jazyk StructuredText, jenž trpěl mnoha nedostatky. Cílem jazyka reStructuredText je tyto nedostatky opravit a doplnit. \citep{problems_with_structuredtext}
Tento jazyk, známý také jako ReST, je, stejně jako Markdown, zároveň syntaxí i parsovacím systémem syntaxe pro tvorbu dokumentů a webových stránek. Svou oblibu získal hlavně v~komunitě jazyka Python. Ve své dokumentaci\footnote{\url{https://docutils.sourceforge.io/rst.html}} je popisován jako syntax pro využití ke psaní \textit{Python docstrings} a dalších druhů dokumentace, která je spolehlivá a jednoduchá. ReST vznikl v~návaznosti na jazyk StructuredText, jenž trpěl mnoha nedostatky. Cílem jazyka reStructuredText je tyto nedostatky opravit a doplnit. \citep{problems_with_structuredtext}
S~jazykem se lze setkat u~značné části existujících generátorů statických webových stránek, z~nichž některé jsou zmíněny v~kapitole \ref{kap:paradigmata}.
@ -8,7 +8,7 @@ Modelový systém se skládá ze dvou částí, a to z~verzovacího systému pro
\subsection{Verzovací systém pro správu obsahu}\label{kap:vyber-vhodneho-systemu-verzovani}
Pro správu obsahu i šablon a statických souborů byl zvolen distribuovaný verzovací systém Git, jenž má v~porovnání s~jinými verzovacími systémy, zejména centralizovanými, spousty výhod. Hlavní jeho výhodou je rozšířené využití v~praxi a snadné používání. Díky svým decentralizovaným vlastnostem ho lze využívat v~mnoha odlišných pracovních postupech. S~naklonovaným repozitářem lze pracovat i bez připojení k~síti, což lze považovat i za druh zálohy. Git také umožňuje slučování různých změn od mnoha uživatelů a dovoluje jednoduše řešit potenciální konflikty. \citep{why_is_git_better_than_x}
Pro správu obsahu i šablon a statických souborů byl zvolen distribuovaný verzovací systém Git, jenž má v~porovnání s~jinými verzovacími systémy, zejména centralizovanými, spousty výhod. Jeho hlavní výhodou je rozšířené využití v~praxi a snadné používání. Díky svým decentralizovaným vlastnostem ho lze využívat v~mnoha odlišných pracovních postupech. S~naklonovaným repozitářem lze pracovat i bez připojení k~síti, což lze považovat i za druh zálohy. Git také umožňuje slučování různých změn od mnoha uživatelů a dovoluje jednoduše řešit potenciální konflikty. \citep{why_is_git_better_than_x}
Skvěle využitelnou funkcí pro modelovou implementaci je také to, že po provedení změn v~repozitáři lze pomocí Gitu spouštět skripty, které mohou provádět automatické gene\-rování obsahu a další užitečné operace. Tato funkcionalita je implementována v~rámci modelové implementace v~sekci \ref{kap:automaticke-generovani-obsahu}.
@ -16,23 +16,23 @@ Skvěle využitelnou funkcí pro modelovou implementaci je také to, že po prov
Protože forma modelového webu odpovídá paradigmatu webové prezentace ze sekce \ref{kap:paradigmata-webova-prezentace}, byl pro jeho generování použit program Zola\footnote{\url{https://www.getzola.org/}}.
Vybraný generátor splňuje všechny požadavky z~kapitoly \ref{kap:taxonomie-pozadavku} a oproti jiným systémům je výhodný tím, že je napsaný v~jazyce Rust. Je tedy mnohem rychlejší a bezpečnější, než většina jeho alternativ \citep{benchmarks_game}. Tato výhoda v~rychlosti se znatelně projevuje při zpracování obsáhlých webových stránek či mnoha obrázků.
Vybraný generátor splňuje všechny požadavky z~kapitoly \ref{kap:taxonomie-pozadavku} a oproti jiným systémům je výhodný tím, že je napsaný v~jazyce Rust. Je tedy mnohem rychlejší a bezpečnější než většina jeho alternativ \citep{benchmarks_game}. Tato výhoda v~rychlosti se znatelně projevuje při zpracování obsáhlých webových stránek či mnoha obrázků.
V~rámci generátoru je využíván značkovací jazyk Markdown, který je snadný a velmi rozšířený. Kromě těchto výhod si zachovává většinu funkcí a rysů, jež lze najít v~ostatních složitých systémech. Zároveň je možné generátor zkompilovat\footnote{Spustitelné programy musí být převedeny do strojového kódu procesem zvaným \textit{kompilace}.} do jednoho staticky linkovaného\footnote{Spustitelný soubor má všechny potřebné knihovny integrované v~sobě.} binárního souboru, se nímž se pracuje mnohem lépe než se složitým frameworkem.
V~rámci generátoru je využíván značkovací jazyk Markdown, který je snadný a velmi rozšířený. Kromě těchto výhod si zachovává většinu funkcí a rysů, jež lze najít v~ostatních složitých systémech. Zároveň je možné generátor zkompilovat\footnote{Spustitelné programy musí být převedeny do strojového kódu procesem zvaným \textit{kompilace}.} do jednoho staticky linkovaného\footnote{Spustitelný soubor má všechny potřebné knihovny integrované v~sobě.} binárního souboru, s~nímž se pracuje mnohem lépe než se složitým frameworkem.
\section{Tvorba šablony}
Jak se uvádí v~dokumentaci\footnote{\url{https://www.getzola.org/documentation/content/overview/}}, Zola pracuje s~několika druhy stránek, primárně s~tak\-zvanou \textit{sekcí} a \textit{stránkou}.
Stránka slouží pouze k~předání obsahu a nikoliv k~dalšímu větvení struktury. Dá se tedy říci, že stránka v~rámci stromové struktury reprezentuje konec větve.
\textit{Stránka} slouží pouze k~předání obsahu a nikoliv k~dalšímu větvení struktury. Dá se tedy říci, že stránka v~rámci stromové struktury reprezentuje konec větve.
Každá sekce může mít vlastní obsah, ovšem může obsahovat i další subsekce, pomocí nichž lze obsah ve stromové struktuře větvit. Kořenem celého stromu je speciální sekce s~názvem \textit{index}.
Každá \textit{sekce} může mít vlastní obsah, ovšem může obsahovat i další subsekce, pomocí nichž lze obsah ve stromové struktuře větvit. Kořenem celého stromu je speciální sekce s~názvem \textit{index}.
Pro každou část se obvykle používá vlastní HTML šablona, ovšem není to pravidlem a každá část větve může využívat šablonu jinou. To je užitečné například u~stránek s~různými druhy obsahu. V~rámci modelového webu zůstává druh obsahu stejný a není tedy třeba odchylovat se od standardní struktury.
Pro každou část se obvykle používá vlastní HTML šablona, ovšem není to pravidlem a každá část větve může využívat šablonu jinou. To je užitečné například u~stránek s~různými druhy obsahu. V~rámci modelového webu zůstává druh obsahu stejný a není tedy třeba se odchylovat od standardní struktury.
Soubory se šablonami se nachází ve složce \texttt{templates/}, ve které generátor vždy očekává šablonu \texttt{index.html}. Ta se využívá jak k~vykreslení úvodní kořenové stránky, tak jako základ, jež mohou ostatní šablony rozšiřovat. Tato kořenová šablona tedy obsahuje základní strukturu celé stránky, přičemž navazující šablony jen mění určité její části a nedefinují celou strukturu znovu.
Generátor Zola v~šablonách hledá vlastní řídící sekvence, jenž se popisují kombinací složených závorek a dalších znaků. Existují tři druhy kombinací, které lze použít:
Generátor Zola v~šablonách hledá vlastní řídící sekvence, jež se popisují kombinací složených závorek a dalších znaků. Existují tři druhy kombinací, které lze použít:
\begin{itemize}
\item\texttt{\{\%\%\}} -- Metoda, funkce, cykly, podmínky, práce s~proměnnou atd.
@ -40,7 +40,7 @@ Generátor Zola v~šablonách hledá vlastní řídící sekvence, jenž se popi
\item\texttt{\{\#\#\}} -- Komentář
\end{itemize}
Generátor také vyžaduje konfigurační soubor \texttt{config.toml} v~kořenové složce projektu, jenž obsahuje různé nastavení stránky, globální proměnné a chování generátoru.
Generátor také vyžaduje konfigurační soubor \texttt{config.toml} v~kořenové složce projektu, jenž obsahuje různá nastavení stránky, globální proměnné a chování generátoru.
\begin{lstlisting}[label=lst:jednoducha-konfigurace,caption=Příklad jednoduché konfigurace v~souboru \texttt{config.toml}]
# Adresa pro kterou se generují odkazy
@ -69,7 +69,7 @@ Systém vždy zpracuje úvodní šablonu \texttt{index.html}, ze které pak lze
V~příkladu \ref{lst:zakladni-sablona} je název stránky mezi tagy \texttt{<title></title>} vyplněn generátorem. Ten do šablony vloží hodnotu konstanty \texttt{config.title}, která je nastavena v~konfiguračním souboru \texttt{config.toml} z~příkladu \ref{lst:jednoducha-konfigurace}. Názvem stránky bude tedy řetězec \uv{Učitel online}. Generátor dokáže převzít kteroukoliv konstantu z~kontextu konfiguračního souboru.
Všechny tyto řídící sekvence, nebo také \textit{direktivy}, lze v~rámci generátoru navazovat na sebe, podobně jako je tomu v~Unixových systémech. Spojování funkcí a filtrů se provádí znakem \texttt{|}, stejně jako v~POSIX\footnote{Portable Operating System Interface -- Rodina standardů Unixových systémů} shellu, kde výstup jednoho příkazu se stane vstupem příkazu navazujícího. Například je možné název stránky vypsat ve velkých písmenech i přesto, že v~konfiguračním souboru je řetězec s~názvem formátován pouze s~velkým písmenem na začátku. K~převedení na velká písmena slouží filtr \texttt{upper}. Názvem stránky bude po zpracování programem \ref{lst:filtr-upper} řetězec \uv{UČITEL ONLINE}.
Všechny tyto řídící sekvence, nebo také \textit{direktivy}, lze v~rámci generátoru navazovat na sebe, podobně jako je tomu v~unixových systémech. Spojování funkcí a filtrů se provádí znakem \texttt{|}, stejně jako v~POSIX\footnote{Portable Operating System Interface -- Rodina standardů unixových systémů} shellu, kde se výstup jednoho příkazu stane vstupem příkazu navazujícího. Například je možné název stránky vypsat ve velkých písmenech i přesto, že v~konfiguračním souboru je řetězec s~názvem formátován pouze s~velkým písmenem na začátku. K~převedení na velká písmena slouží filtr \texttt{upper}. Názvem stránky bude po zpracování programem \ref{lst:filtr-upper} řetězec \uv{UČITEL ONLINE}.
\begin{lstlisting}[label=lst:filtr-upper,caption=Základní šablona s~filtrem pro přepsání názvu na velká písmena]
<!DOCTYPE html>
@ -100,7 +100,7 @@ Generátor umožnuje v~šabloně vytvářet speciální bloky, jejichž obsah lz
</html>
\end{lstlisting}
Název stránky zůstane stejný a v~jejím těle přibude text \uv{Ahoj, světe!}. Vytvoříme-li novou šablonu s~názvem \texttt{section.html}, generátor nám umožní rozšířit ji o~původní šablonu \texttt{index.html} a měnit pouze definované bloky. Není tedy nutné znovu definovat celou strukturu stránky. Pro importování neboli rozšíření šablony slouží direktiva \texttt{extends}.
Název stránky zůstane stejný a v~jejím těle přibude text \uv{Ahoj, světe!}. Vytvoříme-li novou šablonu s~názvem \texttt{section.html}, generátor nám umožní rozšířit ji o~původní šablonu \texttt{index.html} a měnit pouze definované bloky. Není tedy nutné znovu definovat celou strukturu stránky. Pro importování nebo-li rozšíření šablony slouží direktiva \texttt{extends}.
\begin{lstlisting}[label=lst:sablona-section,caption=Definice nové šablony \texttt{section.html} rozšiřující šablonu z~příkladu \ref{lst:bloky}]
{% extends "index.html" %}
@ -112,7 +112,7 @@ Název stránky zůstane stejný a v~jejím těle přibude text \uv{Ahoj, světe
Šablona \texttt{section.html} se v~rámci generátoru Zola implicitně využívá pro všechny existující sekce\footnote{\url{https://www.getzola.org/documentation/content/section/}}. Názvem stránky v~této šabloně bude, podobně jako u~hlavní šablony, název stránky z~konstanty \texttt{config.title} definované v~konfiguračním souboru, ale také spojovník a název dané sekce. Za modelový výstup lze považovat například \uv{UČITEL ONLINE -- základní a střední škola}, bude-li se uživatel nacházet v~sekci pro základní a střední školy.
V~bloku s~obsahem bude původní obsah \uv{Ahoj, světe!} nahrazen za řetězec \uv{Toto je obsah kategorie}. Ten ovšem nechceme definovat přímo v~šabloně, nýbrž cílem generátoru je vyplňovat obsah ze zdrojových souborů v~sázecím jazyce, viz. sekce \ref{kap:princip-generatoru}. Zola pro vkládání obsahu využívá stejný princip jako v~ostatních případech, tedy vypsání obsahu proměnné, v~tomto případě proměnné \texttt{section.content}, která obsahuje zkompilované HTML z~daného Markdown souboru. Zároveň je dobrou praktikou provést vyčištění vstupu filtrem \texttt{safe}\footnote{\url{https://tera.netlify.com/docs/\#safe}}.
V~bloku s~obsahem bude původní obsah \uv{Ahoj, světe!} nahrazen za řetězec \uv{Toto je obsah kategorie}. Ten ovšem nechceme definovat přímo v~šabloně, nýbrž cílem generátoru je vyplňovat obsah ze zdrojových souborů v~sázecím jazyce, viz sekce \ref{kap:princip-generatoru}. Zola pro vkládání obsahu využívá stejný princip jako v~ostatních případech, tedy vypsání obsahu proměnné, v~tomto případě proměnné \texttt{section.content}, která obsahuje zkompilované HTML z~daného Markdown souboru. Zároveň je dobrou praktikou provést vyčištění vstupu filtrem \texttt{safe}\footnote{\url{https://tera.netlify.com/docs/\#safe}}.
\begin{lstlisting}[label=lst:sablona-section-vlozeni-obsahu,caption=Vkládání obsahu ze zdrojového Markdown souboru]
@ -123,7 +123,7 @@ V~bloku s~obsahem bude původní obsah \uv{Ahoj, světe!} nahrazen za řetězec
{% endblock %}
\end{lstlisting}
Z~důvodu přenositelnosti systému a principu staticky generovaných stránek by žádný obsah neměl být definován přímo v~šabloně, nýbrž by měl být do stránky vkládán generátorem z~proměnných, nebo ze sázeného obsahu. V~rámci modelové implementace je toto nepsané pravidlo dodržováno.
Z~důvodu přenositelnosti systému a principu staticky generovaných stránek by žádný obsah neměl být definován přímo v~šabloně, nýbrž by měl být do stránky vkládán generátorem z~proměnných nebo ze sázeného obsahu. V~rámci modelové implementace je toto nepsané pravidlo dodržováno.
@ -134,7 +134,7 @@ Obsah modelové implementace je dělen do stromové datové struktury o~potenci
\caption{Diagram průběhu generování vícevrstvé navigace}
\end{figure}
První vrstvou struktury jsou hlavní sekce, v~rámci implementace pojmenované jako $L_1$, které jsou vždy vypsány ve vlastní navigaci. Pod touto navigací je zobrazen seznam všech kategorií, které vybraná položka v~$L_1$ obsahuje. Pokud uživatel zvolí kteroukoliv položku v~$L_2$, v~navigaci se objeví další sloupec, který obsahuje všechny podkategorie vybrané položky, tedy všechny podkategorie ve vrstvě $L_3$. Takto lze stromem procházet potenciálně donekonečna. Styly modelové šablony ovšem počítají s~maxi\-mální hloubkou čtyř subkategorií.
První vrstvou struktury jsou hlavní sekce, v~rámci implementace pojmenované jako $L_1$, které jsou vždy vypsány ve vlastní navigaci. Pod touto navigací je zobrazen seznam všech kategorií, které vybraná položka v~$L_1$ obsahuje. Pokud uživatel zvolí kteroukoliv položku v~$L_2$, v~navigaci se objeví další sloupec, který obsahuje všechny podkategorie vybrané položky, tedy všechny podkategorie ve vrstvě $L_3$. Takto lze stromem procházet potenciálně donekonečna. Styly modelové šablony ovšem počítají s~maxi\-mální hloubkou čtyř subkategorií.
Tato funkcionalita je implementována pomocí tří cyklů, z~nichž jeden je vložený. První cyklus (příklad \ref{lst:obsah-cyklus1}) se provádí pro všechny rodiče aktivní kategorie vrstev $L_2,L_3,\dotsc,L_n$, kde $n$ je aktuální vrstva. V~každé iteraci se mění kontext, ve kterém generátor pracuje. Z~daného kontextu generátor vypisuje pomocí vnořeného cyklu všechny subkategorie. Ve druhém cyklu (příklad \ref{lst:obsah-cyklus2}) se vypisují všichni potomci dané stránky, tedy potomci ve vrstvě $L_{n+1}$.
@ -172,9 +172,9 @@ Tato funkcionalita je implementována pomocí tří cyklů, z~nichž jeden je vl
Ve výchozím stavu generátor neumí zpracovávat nic jiného, než co je uvedeno ve specifikaci CommonMark, viz. sekce \ref{kap:markdown}. Dle požadavků modelového webu je nutné, aby generátor uměl vkládat videa přímo do stránky. Taková funkcionalita není součástí specifikace CommonMark, a je tedy potřeba rozšířit generátor. Nejvhodnějším způsobem přidání vlastních funkcionalit je využití filtrů, jež se v~rámci generátoru nazývají \textit{shortcode}.
Ve výchozím stavu neumí generátor zpracovávat nic jiného, než co je uvedeno ve specifikaci CommonMark, viz sekce \ref{kap:markdown}. Dle požadavků modelového webu je nutné, aby generátor uměl vkládat videa přímo do stránky. Taková funkcionalita není součástí specifikace CommonMark, a je tedy potřeba rozšířit generátor. Nejvhodnějším způsobem přidání vlastních funkcionalit je využití filtrů, jež se v~rámci generátoru nazývají \textit{shortcode}.
Principem vlastních filtrů je to, že si uživatel vytvoří vlastní šablonu, kterou lze vyvolat pomocí speciální řídící sekvence 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. Dá se tedy říci, že shortcode je v~své podstatě funkce, jež umí pracovat s~parametry.
Principem vlastních filtrů je to, že si uživatel vytvoří vlastní šablonu, kterou lze vyvolat pomocí speciální řídící sekvence 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. Dá se tedy říci, že shortcode je ve své podstatě funkce, jež umí pracovat s~parametry.
Pro tvorbu těchto filtrů je v~generátoru Zola určena složka \texttt{templates/shortcodes} obsahující jejich HTML šablony a kód pro zpracování generátorem. Název HTML souboru definuje název vlastního filtru. Vytvoříme-li uvnitř této složky soubor nazvaný \texttt{video.html}, budeme v~obsahu schopni využívat vlastní filtr s~názvem \texttt{video}.
@ -276,7 +276,7 @@ Filtr lze vyvolat stejně, jako je tomu u~filtru pro vkládání videa. Název f
) }}
\end{lstlisting}
V~příkladu \ref{lst:vyvolani-filtru-souboru} je definován i nepovinný atribut \texttt{title}, který pro přehlednost umožňuje nastavit název. Atribut \texttt{filename} definuje název souboru ve složce bez koncovky. Všechny soubory, jež chce uživatel vypsat, musí tedy mít stejný název a musí se lišit pouze koncovkou. Jsouli ve složce soubory s~názvem \texttt{pracovni-list} a koncovkami \texttt{pdf}, \texttt{odt}, \texttt{djvu} a \texttt{ps}, bude výstupem filtru následující HTML.
V~příkladu \ref{lst:vyvolani-filtru-souboru} je definován i nepovinný atribut \texttt{title}, který pro přehlednost umožňuje nastavit název. Atribut \texttt{filename} definuje název souboru ve složce bez koncovky. Všechny soubory, jež chce uživatel vypsat, musí tedy mít stejný název a musí se lišit pouze koncovkou. Jsou-li ve složce soubory s~názvem \texttt{pracovni-list} a koncovkami \texttt{pdf}, \texttt{odt}, \texttt{djvu} a \texttt{ps}, bude výstupem filtru následující HTML.
@ -294,7 +294,7 @@ Optimalizace je provedena na základě článku ze serveru \cite{calomel_optimiz
Jak se na webu Calomel píše, provozování webserveru může být hodnotnou zkušeností, ale zároveň může být i zkouškou trpělivosti. Chcete svým uživatelům předávat všechny vaše stránky a obrázky, ovšem máte jen omezenou šířku pásma, pomocí které můžete data přenášet. Pokud přetížíte své připojení, klienti navštěvující váš web server si budou myslet, že je pomalý a neresponzivní. Je tedy třeba webový server nastavit tím nejlepším možným způsobem s~cílem získat co nejvíce návštěv a zlepšit zážitek vašim návštěvníkům. Následující rady slouží ke snížení zátěže serveru, ke zrychlení odesílání stránek a k~zastavení nechtěného a škodlivého provozu.
Práce se věnuje pouze technickým optimalizacím spojených s~tvorbou samotné webové stránky, nikoliv však optimalizacím sítě, web serveru a vizuálního návrhu. Nenačítá-li se stránka během několika vteřin, většina uživatelů jednoduše odejde. Cílem této sekce je provést optimalizace, které urychlí načítání modelové implementace.
Práce se věnuje pouze technickým optimalizacím spojeným s~tvorbou samotné webové stránky, nikoliv však optimalizacím sítě, web serveru a vizuálního návrhu. Nenačítá-li se stránka během několika vteřin, většina uživatelů jednoduše odejde. Cílem této sekce je provést optimalizace, které urychlí načítání modelové implementace.
\subsection{Typy a kvalita obrázků}
@ -333,7 +333,7 @@ Připojením externího CSS přímo do hlavičky je umožněno progresivní vykr
\subsection{Optimalizace videa}
Protože v~modelové implementaci jsou do stránky vkládána i videa, je nutné provádět jejich optimalizaci podobně jako je tomu u~obrázků. Důležité je používat kvalitní kompresi, pouze nutné rozlišení a renderovat videa ve správném poměru stran a bez zbytečných černých okrajů. Při zpracování videa je dobré neprovádět jeho transkódování do jiného formátu z~původního, ovšem zároveň je třeba dbát na kompatibilitu s~prohlížeči, které různé formáty a kontejnery neumí vždy nativně přehrát.
Protože v~modelové implementaci jsou do stránky vkládána i videa, je nutné provádět jejich optimalizaci podobně, jako je tomu u~obrázků. Důležité je používat kvalitní kompresi, pouze nutné rozlišení a renderovat videa ve správném poměru stran a bez zbytečných černých okrajů. Při zpracování videa je dobré neprovádět jeho transkódování do jiného formátu z~původního, ovšem zároveň je třeba dbát na kompatibilitu s~prohlížeči, které různé formáty a kontejnery neumí vždy nativně přehrát.
\section{Správa obsahu a verzování}
@ -351,7 +351,13 @@ Tato část práce se věnuje samotné implementaci automatického generování
Jak bylo zmíněno v~sekci \ref{kap:vyber-vhodneho-systemu-verzovani}, git umožňuje nastavení takzvaných \textit{Git hooks}, jež se v~určité chvíli spustí. Jak uvádí dokumentace\footnote{\url{https://git-scm.com/docs/githooks}}, existuje spousta druhů hooků, které jsou vyvolány v~různé části zpracování požadavku. V~případě této implementace je nejvhodnější hook \textit{post-receive}, jenž je spouštěn až po nahrání a zpracování všech změn v~repozitáři.
Následující skript po vyvolání Gitem provede veškeré potřebné operace ke zpracování nového obsahu na web serveru.
Skript \ref{lst:git-hook-skript} po vyvolání Gitem provede veškeré potřebné operace ke zpracování nového obsahu na web serveru Je složen z~několika částí.
Jako první probíhá na řádcích 1--3 nastavení proměnných, ve kterých se ukládá odkaz na vzdálený Git repozitář, název složky, do níž se obsah má klonovat, a název složky, do které se má kopírovat výstup čili vygenerované HTML. Dále se skript na řádku 5 přepíná do složky, v~níž se sám nachází --- aby skript fungoval vždy, ať je spuštěný ze kteréhokoliv místa v~souborovém systému.
V~další části skriptu probíhá na řádku 7 kontrola, zda již existuje složka s~naklonovaným Git repozitářem. Pokud složka neexistuje, provede se naklonování vzdáleného repozitáře a tím i vytvoření složky.
Třetí část provádí generování statického obsahu. Nejprve se skript přepne do repozitáře, v~němž provede příkaz \texttt{git pull}, který do složky stáhne poslední změny ze vzdáleného repozitáře: synchronizuje obsah na poslední verzi. Po synchronizaci repozitáře proběhne samotné spuštění generátoru, jenž z~obsahu vygeneruje statické HTML, které vloží do složky \texttt{./public}. Poté na řádcích 12--14 probíhá kopírování nově vygenerovaného obsahu do složky \texttt{/srv/www/ucitelonline} včetně nastavení unixových práv souborů na bezpečné hodnoty, které se liší pro složky a pro soubory.
Skript \ref{lst:git-hook-skript} je složen z~několika částí. Jako první probíhá na řádcích 1--3 nastavení proměnných, ve kterých se ukládá odkaz na vzdálený Git repozitář, název složky, do níž se obsah má klonovat a název složky, do které se má kopírovat výstup čili vygenerované HTML. Dále se skript na řádku 5 přepíná do složky, v~níž se sám nachází --- aby skript fungoval vždy, ať je spuštěný ze kteréhokoliv místa v~souborovém systému.
V~další části skriptu probíhá na řádku 7 kontrola, zda již existuje složka s~naklonovaným Git repozitářem. Pokud složka neexistuje, provede se naklonování vzdáleného repozitáře a tím i vytvoření složky.
Třetí část provádí generování statického obsahu. Nejprve se skript přepne do repozitáře, v~němž provede příkaz \texttt{git pull}, který do složky stáhne poslední změny ze vzdáleného repozitáře: synchronizuje obsah na poslední verzi. Po synchronizaci repozitáře proběhne samotné spuštění generátoru, jenž z~obsahu vygeneruje statické HTML, které vloží do složky \texttt{./public}. Poté na řádcích 12--14 probíhá kopírování nově vygenerovaného obsahu do složky \texttt{/srv/www/ucitelonline} včetně nastavení Unixových práv souborů na bezpečné hodnoty, které se liší pro složky a pro soubory.
Skript spoléhá na to, že systém má již předem správně nakonfigurované uživatele, uživatelské skupiny a web server, a že jsou nainstalované potřebné programy Git, Rsync a generátor Zola. Systémový uživatel, pod kterým je vyvolán Git hook, musí být ve skupině \textit{www-data}, nebo v~jiné skupině společně s~uživatelem, pod nímž je spuštěn web server. Zároveň musí mít uživatel práva pro zápis do cílové složky, tedy kořenové složky web serveru: \texttt{/srv/www/ucitelonline}.
Ve většině případů by bylo vhodné klonovat a generovat obsah v~dočasné složce, napří\-klad v~\texttt{/tmp}, a po zkopírování souborů do složky web serveru opět zdrojové soubory smazat. To se ovšem v~této implementaci nehodí, protože repozitář se zdrojovými soubory může být velký a jeho klonování může potenciálně zabrat zbytečné množství času, na rozdíl od~příkazu \texttt{git pull}, který pouze stáhne změny. Generátor zároveň při generování zpracuje pouze nutné změny, zatímco po čistém naklonování musí zpracovat celý obsah znovu, což může také trvat dlouho, obzvlášť při zpracování mnoha obrázků. V~této implementaci se tedy zachováním naklonovaného repozitáře výrazně zkracuje čas celého skriptu.
Ve světě webových stránek se setkáváme se spoustou forem a paradigmat, jež se hodí pro zpracování různých druhů informací. Neexistuje žádné formální zařazení druhů webových stránek do skupin, ovšem některé webové portály se pokouší určit základní druhy webových stránek, které se na Internetu objevují. Na základě těchto portálů a jejich rozřazení do skupin\footnote{\url{http://www.xislegraphix.com/website-types.html}}\footnote{\url{https://www.hostgator.com/blog/popular-types-websites-create}}\footnote{\url{https://www.quora.com/What-are-the-different-types-of-websites}}, jež jsou často mířené na specifický obsah, lze vytvořit pět základních paradigmat. Jsou jimi:
\begin{itemize}
\item{Webová prezentace}
\item{Index všeobecných informací}
\item{Technická dokumentace}
\item{Galerie}
\item{Sociální sítě a fóra}
\item webová prezentace,
\item index všeobecných informací,
\item technická dokumentace,
\item galerie,
\item sociální sítě a fóra.
\end{itemize}
V~této práci bylo ke každému z~paradigmat vybráno několik existujících generátorů, které jsou vhodné pro generování a správu daného druhu obsahu. Výjimkou je skupina sociálních sítí a fór, kde staticky generovaný obsah není z~důvodu často se měnícího obsahu vhodným řešením.
Nejbližší původním webovým stránkám z~dob vzniku WWW jsou webové prezentace, tedy stránky s~jednoduchým obsahem, sloužící k~předání informací čtenáři například formou článků. Do této skupiny lze zařadit portfolia, blog, online noviny a časopisy, firemní stránky a podobně, jenž se skvěle hodí ke statickému generování obsahu.
Nejbližší původním webovým stránkám z~dob vzniku WWW jsou webové prezentace, tedy stránky s~jednoduchým obsahem sloužící k~předání informací čtenáři, například formou článků. Do této skupiny lze zařadit portfolia, blog, online noviny a časopisy, firemní stránky a podobně, jež se skvěle hodí ke statickému generování obsahu.
Generátory pro tento typ webové stránky jsou často univerzální, a je možné aplikovat většinu těchto generátorů i na ostatní formy stránek. Většina existujících generátorů je zaměřena právě na toto paradigma, a lze z~čeho vybírat. Každým dnem vznikají nové implementace a svět staticky generovaných stránek se rapidně mění.
Generátory pro tento typ webové stránky jsou často univerzální a je možné aplikovat většinu těchto generátorů i na ostatní formy stránek. Většina existujících generátorů je zaměřena právě na toto paradigma, a lze z~čeho vybírat. Každým dnem vznikají nové implementace a svět staticky generovaných stránek se rapidně mění.
\begin{longtable}[c]{|l|l|l|}
\caption{Vybrané generátory pro webové prezentace}
Za obecného zástupce tohoto druhu stránek lze považovat Wikipedii, která podnítila vznik spousty jiných takzvaných \uv{Wiki systémů} a stránek. Jde o~formu stránky, jenž obsahuje velké množství informací s~různou provázaností. Nejde o~lineární dokumentaci projektu, nýbrž o~encyklopedii obecných informací.
Za obecného zástupce tohoto druhu stránek lze považovat Wikipedii, která podnítila vznik spousty jiných takzvaných \textit{Wiki systémů} a stránek. Jde o~formu stránky, jež obsahuje velké množství informací s~různou provázaností. Nejde o~lineární dokumentaci projektu, nýbrž o~encyklopedii obecných informací.
Jak již bylo řečeno, tuto formu stránek lze implementovat jakýmkoliv generátorem. Existují ale generátory vytvořené přímo pro účel tohoto paradigmatu. Takových generátorů je ovšem málo, jelikož jedním ze základních znaků wiki je to, že její obsah tvoří komunita uživatelů, což nemusí být vždy vhodné pro systém statického generování obsahu. Jedním takovým programem je ikiwiki\footnote{\url{https://ikiwiki.info/}}, který funguje stejně jako ostatní sta\-tické generátory. Další programy, například MDwiki\footnote{\url{https://dynalon.github.io/mdwiki}}, zpracovávají Markdown přímo v~prohlížeči a HTML obsah tedy není předgenerován na serveru.
@ -18,7 +18,7 @@ Specifická kritéria jsou vytvořena na základě požadavků autorů obsahu, t
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. Hlavním požadavkem pro strukturu stránky 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ů.
Do samotného obsahu musí být možné vkládat přílohy ke stažení v~různých formátech, obrázky a videa s~možností jejich ocitování, tedy uvedení autora, názvu díla apod. Všechny přiložené soubory musí být distribuovatelné přímo z~webových stránek, nikoliv z~externích zdrojů. Všechna videa je nutné vložit do stránky a musí je být možné přehrát v~nativním přehrávači prohlížeče bez nutnosti otevírání externích webových stránek či programů. V~hlavičce každé stránky musí být možné specifikovat následující informace: autora či seznam autorů obsahu, skupinu, pro kterou je obsah určen, a časovou dotaci.
Do samotného obsahu musí být možné vkládat přílohy ke stažení v~různých formátech, obrázky a videa s~možností jejich ocitování, tedy uvedení autora, názvu díla apod. Všechny přiložené soubory musí být distribuovatelné přímo z~webových stránek, nikoliv z~externích zdrojů. Všechna videa je nutné vložit do stránky a musí je být možné přehrát v~nativním přehrávači prohlížeče bez nutnosti otevírání externích webových stránek či programů. V~hlavičce každé stránky musí být možné specifikovat následující informace: autora či seznam autorů obsahu, skupinu, pro kterou je obsah určen a časovou dotaci.
Obsah stránek musí být možné spravovat předem pověřenými uživateli a jeho změny musí být zaznamenávány v~decentralizovaném verzovacím systému. Generování static\-kého webu na základě změn obsahu je nutné řešit automatizovaně --- bez dalších zásahů správce či manuálního nahrání nového obsahu na webserver.
@ -10,5 +10,5 @@ Skript \ref{lst:git-hook-skript} pro automatické generování obsahu ze sekce \
\section{Vyhodnocení implementace vlastních rozšíření}
Do systému v~modelové implementaci byla přidána vlastní rozšíření, tedy filtry pro vkládání souborů a videí do obsahu stránky, viz \ref{kap:rozsireni-sablony}. Tyto filtry splňují původní požadavky, avšak jejich použití v~obsahu se vymyká původnímu principu jazyka Markdown: že obsah je čitelný i v~čistém textu. Pro vyvolání filtrů je třeba vyplňovat různé jejich atributy, což se může zdát nepřehledné někomu, kdo si fungování filtrů neprostudoval. Zároveň je pak obsah nepřenositelný do jiných systémů, které neumí tyto filtry zpracovat a v~nichž by se kód pro vyvolání filtrů v~takovém případě mohl interpretovat jako čistý text.
Do systému v~modelové implementaci byla přidána vlastní rozšíření, tedy filtry pro vkládání souborů a videí do obsahu stránky, viz \ref{kap:rozsireni-sablony}. Tyto filtry splňují původní požadavky, avšak jejich použití v~obsahu se vymyká původnímu principu jazyka Markdown: že obsah je čitelný i v~čistém textu. Pro vyvolání filtrů je třeba vyplňovat jejich různé atributy, což se může zdát nepřehledné někomu, kdo si fungování filtrů neprostudoval. Zároveň je pak obsah nepřenositelný do jiných systémů, které neumí tyto filtry zpracovat a v~nichž by se kód pro vyvolání filtrů v~takovém případě mohl interpretovat jako čistý text.
Od statických stránek, které se používaly při vzniku WWW\footnote{World Wide Web -- Celosvětová síť pro prohlížení, ukládání a sdílení dokumentů}, se trend posunul ke složitým webovým aplikacím a frameworkům, jako jsou například Wordpress, Joomla, nebo Drupal. Dnes se opět trend obrací směrem ke tvorbě statyckých webových stránek, které jsou mnohem lepší z~hlediska rychlosti a bezpečnosti.
Od statických stránek, které se používaly při vzniku WWW\footnote{World Wide Web -- Celosvětová síť pro prohlížení, ukládání a sdílení dokumentů}, se trend posunul ke složitým webovým aplikacím a frameworkům, jako jsou například Wordpress, Joomla, nebo Drupal. Dnes se opět trend obrací směrem ke tvorbě statických webových stránek, které jsou mnohem lepší z~hlediska rychlosti a bezpečnosti.
Práce se zabývá problematikou generátorů statických webových stránek. Za statické webové stránky se pouvažují stránky, jejichž obsah je předem vygenerován do HTML\footnote{Hypertext Markup Language -- Sázecí jazyk používaný k~popisu obsahu a struktury webové stránky} pomocí daného generátoru, tedy programu, který z~obsahu napsaném v~libovolném značkovacím jazyce vygeneruje validní webovou stránku.
Práce se zabývá problematikou generátorů statických webových stránek. Za statické webové stránky se považují stránky, jejichž obsah je předem vygenerován do HTML\footnote{Hypertext Markup Language -- Sázecí jazyk používaný k~popisu obsahu a struktury webové stránky} pomocí daného generátoru, tedy programu, který z~obsahu napsaného v~libovolném značkovacím jazyce vygeneruje validní webovou stránku.
\section{Cíle práce}
Hlavním cílem práce je vysvětlit čtenáři fungování a sestavení automatizovaného systému pro generování statických webových stránek. Čtenář porozumí problematice sta\-tických webových stránek, jejich generátorů, značkovacích jazyků a implementaci těchto konceptů prakticky v~modelové implementaci. Tento hlavní cíl je dále rozpracován cíli dílčími.
Hlavním cílem práce je vysvětlit čtenáři fungování a sestavení automatizovaného systému pro generování statických webových stránek. Čtenář porozumí problematice sta\-tických webových stránek, jejich generátorů, značkovacích jazyků a implementaci těchto konceptů prakticky v~modelové implementaci. Tento hlavní cíl je dále rozpracován cíli dílčími:
\begin{itemize}
\itemSeznámit čtenáře se systémy pro generování statických webů.
\itemAnalyzovat základní funkce mapovaných systémů.
\itemSestavit taxonomii požadavků na systém pro generování statického webu.
\itemNavrhnout modelovou implementaci s~užitím vybraného systému.
\itemVyhodnotit funkce daného systému a navrhnout jeho rozšíření.
\itemseznámit čtenáře se systémy pro generování statických webů,
\itemanalyzovat základní funkce mapovaných systémů,
\itemsestavit taxonomii požadavků na systém pro generování statického webu,
\itemvyhodnotit funkce daného systému a navrhnout jeho rozšíření.
\end{itemize}
\section{Struktura práce}
Struktura práce je koncipována do čtyř základních částí; v~první části je pojednáváno o~konceptu statických webových stránek, jejich výhodách a o~roli statických generátorů. Další část navazuje analýzou nejčastějších webových paradigmat, které se ve světe WWW objevují, a jsou v~ní vybrány nejvhodnější systémy pro generování jejich static\-kého obsahu. Dále navazuje kapitola popisující nejběžnější značkovací jazyky, kterými se popisuje obsah pro vybrané generátory. V~další praktické části jsou definována kritéria požadavků pro modelovou implementaci, která je poté realizována včetně ukázek kódu a popisu celého principu fungování systému. V~závěrečné kapitole je modelová implementace vyhodnocena a jsou zde určeny návrhy na její další rozšíření.
Struktura práce je koncipována do čtyř základních částí; v~první části je pojednáváno o~konceptu statických webových stránek, jejich výhodách a o~roli statických generátorů. Další část navazuje analýzou nejčastějších webových paradigmat, která se ve světe WWW objevují, a jsou v~ní vybrány nejvhodnější systémy pro generování jejich static\-kého obsahu. Dále následuje kapitola pojednávající o~nejběžnějších značkovacích jazycích, kterými je popisován obsah pro vybrané generátory.
V~další, praktické části jsou definována kritéria požadavků pro modelovou implementaci, která je poté realizována včetně ukázek kódu a popisu celého principu fungování systému. V~závěrečné kapitole je modelová implementace vyhodnocena a jsou zde určeny návrhy na její další rozšíření.
