Webové technologie (VŠCHT – LS 2025/2026)
Jiří tečka Znamenáček plus IP zavináč gmail tečka com

Pomůcky

Nástroje
~ Blábot (generátor pseudočeského textu)
~ Libxml2 včetně xmllint (univerzální XML-validátor)
~ XPath vizualizer

Pomůcky
~ test formulářů pro Python 3.x (CGI-based, tj. Python <= 3.12)

K připomenutí
~ základy Mercurial'u
~ základy Git'u

Soubory z hodin

1. 2026-02-17:
   • Povídání o historii webu a technologiích na něm používaných.
   • ukázka z praxe – HTML-parser si musí poradit se vším
2. 2026-02-24:
   • jakýkoli text se značkami ještě není XML
   • přidání kořenového elementu už z toho ale udělá stromeček, a tím pádem i XML
   • správně by se ale XML mělo zobrazit takhle – textové listy bez jekéhokoliv formátování vypsané za sebou jako jedna dlouhá řádka
   • atributy elementů se nezobrazují
   • někdo ale atributy nemá rád a zakazuje je používat, pak se musí struktura XML upravit
   • v XML na velikosti písmen záleží (koncový a počáteční element se musí jmenovat úplně stejně)
   • tabulka v HTML – prázdné textové listy mezi řádky a buňkami dokonce ani nemají žádný význam
   • pár příkladů ke komentářům v XML
3. 2026-03-03:
   • XML-dokument s prázdným stylopisem
   • XML-dokument s neprázdným stylopisem
   • víc CSS-pravidel
4. 2026-03-03:
   • …

Příklady

1. návrh XML pro jídelní lístek (úlohy 1 a 3, 2 při zájmu)
2. zobrazení jídelního lístku pomocí CSS (úlohy 4-5)
3. parsování XML pomocí SAXu a eTree (příklady 2 a 3)
4. aplikace CSS Media Queries
5. první pokusy s HTML5 a DOMem
6. Mandelbrotova množina (pokročilejší JS)
7. hrátky s formuláři
8. kreslení do kanvasu v HTML5
9. generování zvuku v HTML5
10. práce s MIDI v HTML5
11. …
12. hraní si s D3.js
13. hrátky se SVG
14. hraní si s X3DOM
15. PWA a její instalace v mobilu
16. L-systémy (Python, JavaScript, pomocí A-Frame a ThreeJS)

Domácí úkoly

Přednášky

1. Úvodní slovo & organizace předmětu.
   Ukázka – tento výukový web.
2. Význam (sémantika) v textových souborech:
         a) základy XML
         b) více o XML
         c) popis struktury XML-souborů a jejich validace
         d) jmenné prostory v XML
3. Navigace po stromečkové struktuře:
         a) navigace po XML pomocí XPath(1)
         b) selektory v CSS (plus úvod do CSS vůbec)
   Reprezentace XML pro potřeby zpracování:
         a) XML/HTML & DOM
         b) eTree v Python'u
         c) SAX v Python'u
4. Intermezzo o kódování aneb Od binárních dat k textu:
         a) kódování, Unicode
         b) kódování HTML a XML, znakové entity
5. HTML5 – jazyk webu:
         ~ přehled HTML5 (včetně souvisejících technologií)
         ~ základní elementy HTML5
   Objektová reprezentace webu – ECMAScript & DOM:
         a) JavaScript z rychlíku [TODO]
         b) nápověda k psaní webových skriptů
         c) použití objektu console
         d) „Jak odbroukovávat webové aplikace na mobilu“ [TODO]
         e) javascriptí WebAPI (připravili Dominika Zumrová a Martin Engst)
         f) stylopisové CSS API (připravily Kateřina Večerková a Martina Zoubková)
         g) datový formát JSON
6. Pokročilejší JS:
         ~ vlastní objekty
         ~ rozšiřování vlastností vestavěných objektů
         ~ WebWorkers a ServiceWorkers
         ~ moduly
         ~ …
         ~ formát pro přenos dat JSON
7. HTTP – skrytý jazyk webu:
         a) Jemný úvod do TCP/IP aneb „Co všechno se musí (a může) stát, aby prohlížeč zobrazil vyžádanou stránku“
         b) protokol HTTP
   WSGI v Python'u
8. Formuláře v HTML:
         a) obecně o formulářích v HTML (připravil Jiří Novotný)
         b) element <input> (připravil Jiří Novotný)
         c) další formulářové prvky [TODO]
         PS připomenutí: databáze SQLite v Pythonu
9. Aplikace typu PWA a jejich instalace
10. …
11. Úvod do SVG:
          a) úvodní přehled
          b) základy
          c) základní prvky [TODO]
12. WebAudio API:
          ~ zvuky v prohlížečích
          ~ WebAudio API @ MDN
          ~ příklady od MDN na WebAudio
          ~ stručný úvod do protokolu MIDI
          ~ MIDI v prohlížečích
13. Knihovna D3.js:
          a) úvod do práce
          b) vstupní data aneb JSON
          c) stromový „layout“
14. Knihovny A-Frame a ThreeJS:
          a) A-Frame
          b) ThreeJS
15. Knihovna X3DOM:
          a) X3DOM

Zápočet a zkouška

Je třeba odevzdat všechny domácí úkoly a vyřešit semestrální práci.

Semestrální práce

Zadání: Navážeme na semestrální projekt z Python'u – vyrobíme jednoduchou webovou aplikaci pro úpravu obrázků pomocí základních grafických transformací a filtrů. Hlavním úkolem bude prostudovat práci s binárními daty pomocí JavaScriptu, přičemž data nahrajeme na web pomocí formuláře v HTML. Funkční aplikace pro telefon je nepovinná třešnička na dortu.