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

http://studuj.bioinformatiku.cz

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:
  2. 2026-02-24:
  3. 2026-03-03:
  4. 2026-03-10:
  5. 2026-03-17:
  6. 2026-03-24:
  7. 2026-03-31:
  8. 2026-04-07:
  9. 2026-04-14:
    • aplikace rotace na kanvas (bez ošetření kontextu, takže pozor na navazující operace)
    • manipulace s kanvasem na úrovni jednotlivých pixelů na příkladu inverze barev (negativu) doplněná výpočtem ve vedlejším vlákně (pomocí objektu worker)
  10. 2026-04-21:
  11. 2026-04-28:
  12. 2026-05-05:
    • …
  13. 2026-05-12:
    • …
  14. 2026-05-19:
    • …

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 (příklady 1 až 3)
  4. aplikace CSS Media Queries
  5. hrátky s formuláři
  6. první pokusy s HTML5 a DOMem
  7. Mandelbrotova množina (pokročilejší JS)
  8. kreslení do kanvasu v HTML5
  9. PWA, její instalace a debugování v mobilu
  10. konvoluční filtry v grafice: příklady, implementace v Python'u
  11. …
  12. generování zvuku v HTML5
  13. práce s MIDI v HTML5
  14. …
  15. hraní si s D3.js
  16. hrátky se SVG
  17. hraní si s X3DOM
  18. 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
  6. 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
  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]
  8. Objektová reprezentace webu – ECMAScript (JavaScript) & 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) přenos dat v adrese zdroje pomocí DataURL
          h) univerzální formát pro přenos dat – JSON (specifická podmnožina JavaScriptu)
  9. Pokročilejší JS:
          ~ vlastní objekty
          ~ rozšiřování vlastností vestavěných objektů
          ~ WebWorkers a ServiceWorkers
          ~ moduly
          ~ …
  10. Aplikace typu PWA a jejich instalace
          ~ manifest aplikace
          ~ použití ServiceWorkers k síťové komunikaci a práci s cacheí
          ~ debugování webových aplikací na mobilu, nástroj adb
          ~ instalace PWA, resp. A2HS
  11. …
  12. Úvod do SVG:
          a) úvodní přehled
          b) základy
          c) základní prvky [TODO]
  13. 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
  14. Knihovna D3.js:
          a) úvod do práce
          b) vstupní data aneb JSON
          c) stromový „layout“
  15. Knihovny A-Frame a ThreeJS:
          a) A-Frame
          b) ThreeJS
  16. 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ářových prvků v HTML.

Kromě vestavěných filtrů a transformací z CSS bude aplikace obsahovat alespoň dva netriviální konvoluční filtry, které spočítá ve vedlejším vlákně pomocí workeru nad binárními daty z kanvasu (viz příklad na Mandelbrotovu množinu a Pixel manipulation with canvas).

PS: Součástí výstupu bude funkční aplikace pro telefon typu PWA. Jelikož sejmout obrázek z kamery je pomocí HTML5 triviální, mohlo by to snad sloužit jako motivace dotáhnout semestrálku do konce ^_~

Poznámky: