Webové technologie (VŠCHT – LS 2024/2025)
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. 2025-02-11:
   • Z důvodu nemoci hodina odpadá :-(
2. 2025-02-18:
   • Povídání o historii webu a technologiích na něm používaných.
3. 2025-02-25:
   • XML v prohlížečích – dnešní výchozí zobrazení (klikatelná stromová struktura), simulace správného zobrazení pomocí chybějícího stylopisu, špatně naformátované XML
   • zobrazení XML/HTML pomocí CSS – XML se stylopisem, HTML se stylopisem
   • parser HTML5 v praxi – běžný HTML-dokument vs HTML-dokument s chybou
4. 2025-03-04:
   • CSS v XML
   • ukázka použití CSS-funkce counter()
   • HTML5-parser neumí „naroubovat“ stylopisové vlastnosti na XML pomocí JavaScriptu, ačkoli ostylovat XML pomocí CSS umí (viz doplněk ke standardu CSS2)
5. 2025-03-11:
   • zjišťování informací z XML pomocí standardu SAX v Pythonu (všimněte si především chování vůči bílým znakům!)
   • zpracování XML jako HTML
   • jako první úloha, ale tentokrát přímo ze souboru pomocí JavaScriptu
6. 2025-03-18:
   • HTML5-parser zvládne libovolně ořezaný vstup, pokud v něm nejsou chyby
   • kanvas a transformace souřadnic
   • objekty v JavaScriptu a zavedení komplexních čísel
7. 2025-03-25:
   • náročnost kreslení do canvasu
   • Mandelbrotova množina černobíle
   • barevné fraktály
   • workery aneb vlákna v JavaScriptu
   • moduly v JavaScriptu
8. 2025-04-01: ...

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. hrátky s formuláři
7. Mandelbrotova množina (pokročilejší JS)
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. 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
4. Navigace po stromečkové struktuře:
         a) selektory v CSS (plus úvod do CSS vůbec)
         b) navigace po XML pomocí XPath(1)
   Reprezentace XML pro potřeby zpracování:
         a) XML/HTML & DOM
         b) eTree v Python'u
         c) SAX v Python'u
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. Úvod do SVG:
         a) úvodní přehled
         b) základy
         c) základní prvky [TODO]
7. 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
8. 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
9. 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
10. 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
11. Aplikace typu PWA a jejich instalace
12. …
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. (Bude upřesněna.)

Semestrální práce

Zadání: Přednáška na vybranou javascriptí knihovnu pro 3D-grafiku. (možno řešit i po dvojcích)