Webové technologie (VŠCHT – LS 2024/2025)
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. 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:
  4. 2025-03-04:
  5. 2025-03-11:
  6. 2025-03-18:
  7. 2025-03-25:
  8. 2025-04-01:
    • práce na projektech
  9. 2025-04-08:
    • HTTP metody GET a POST pomocí WSGI a formulářů
  10. 2025-04-15:
  11. 2025-04-22:
  12. 2025-04-29:
    • ...
  13. 2025-05-06:
    • VŠCHT má čtvrtek!
  14. 2025-05-13:
    • ...

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. 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. 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. (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 dvojicích)