Tento web pro studenty nepíšu přímo v jazyce HTML, ale používám mnohem jednodušší věc, jazyk AsciiDoc. Na pracovní stanici potřebuji obyčejný textový editor (používám xed), terminál, na editaci bitmapových obrázků Gimp, na tvorbu vektorových obrázků Inkscape a do jazyka HTML to překládám pomocí programu Asciidoctor. Veškerou práci dělám na Linuxu.

Co jsem se musel naučit

Pár jednoduchých značek. Nový odstavec se dělá jednoduše, v dokumentu udělám prázdný řádek. Nadpis druhé úrovně udělám tak že na začátku řádku napíšu dvakrát znak rovná se a nadpis. Když chci něco mít tučným písmem, tak to uzavřu mezi hvězdičky. A tak dále.

== Nadpis druhé úrovně.

Lorem ipsum dolor sit amet, *consectetur adipiscing elit*, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Nový odstavec.
Sagittis vitae et leo duis ut diam quam nulla porttitor.
Justo laoreet sit amet cursus sit amet dictum.
Diam sit amet nisl suscipit adipiscing bibendum.
Vitae tortor condimentum lacinia quis vel eros. At volutpat diam ut venenatis.
Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue.
Nisl rhoncus mattis rhoncus urna neque viverra justo nec.

Obrázek vložím pomocí této syntaxe: image:jmeno_obrazku.png[].

Odkaz na jinou web stánku udělám pomocí link:odkaz_na_jinou_stranku.html[Jak stránka bude vypadat v textu] atd.

Rozpracovaná tato stránka v editoru xed

rozpracovana stranka

Jak to mám zorganizované

Na pracovní stanici mám adresář vyuka_sspvc v něm podadresáře pro jednotlivé předměty a případně další podadresáře pro témata.

Tento konkrétní soubor je v adresáři
jirka@jirka-Precision-T3610:~/vyuka_sspvc/operacni_systemy/os-2.rocnik/html$ ls -l | grep svg_legrace
-rw-rw-r-- 1 jirka jirka    2288 čen 19 01:04 svg_legrace.adoc (1)
-rw-rw-r-- 1 jirka jirka    2292 čen 19 01:03 svg_legrace.adoc~ (2)
1 Rozpracovaný soubor
2 Záloha z předchozího uložení

Postup práce

Napíšu si celý dokument svg_legrace.adoc, povkládám do něj obrázky a přeložím asciidoctorem a vznikne mi svg_legrace.html

jirka@jirka-Precision-T3610:~/vyuka_sspvc/operacni_systemy/os-2.rocnik/html$ asciidoctor svg_legrace.adoc
jirka@jirka-Precision-T3610:~/vyuka_sspvc/operacni_systemy/os-2.rocnik/html$ ls -l | grep svg_legrace
-rw-rw-r-- 1 jirka jirka    2288 čen 19 01:04 svg_legrace.adoc
-rw-rw-r-- 1 jirka jirka    2292 čen 19 01:03 svg_legrace.adoc~
-rw-rw-r-- 1 jirka jirka   39624 čen 19 01:13 svg_legrace.html (1)
1 Tady je hotová HTML stránka.

Nakopíruju to na web mx3.lixis.cz pomocí programů ssh a rsync. rsync mi zajistí, že lokální adresář vyuka_sspvc s veškerým jeho obsahem se sesynchronizuje s web serverem.

Potom už jenom zbývá načíst stránku Firefoxem, zkontrolovat a opravit chyby a je to.

Abych se moc nenadřel, tak jsme si překlad a synchronizaci s webem dal do shellového skriptu sync.sh, který to udělá všechno najednou.

Jak vypadá postup práce pomocí animovaného SVG

postup prace

A to je vše.

Zdroje a odkazy

Instalace a použití
# Create virtualenv named '.venv'
python3 -m venv .venv
# Activate virtualenv
source .venv/bin/activate
pip3 install termtosvg

$ termtosvg
Recording started, enter "exit" command or Control-D to end