Webové aplikace (VŠCHT – ZS 2019/2020)
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

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

Příklady

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

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) 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
  4. HTML5 – jazyk webu:
          ~ přehled HTML (včetně souvisejících technologií)
    Objektová reprezentace webu – ECMAScript & DOM:
          a) JavaScript z rychlíku [TODO]
          b) nápověda k psaní webových skriptů
          c) „Jak odbroukovávat webové aplikace na mobilu“ [TODO]
  5. 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
  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
    Formuláře:
          a) obecně o formulářích v HTML (připravil Jiří Novotný)
          b) element <input> (připravil Jiří Novotný)
          c) další formulářové prvky [TODO]
    WSGI v Python'u
  7. Pokročilejší JS:
          ~ vlastní objekty
          ~ rozšiřování vlastností vestavěných objektů
          ~ WebWorkers a ServiceWorkers
          ~ formát pro přenos dat JSON
          ~ moduly
          …
    Aplikace typu PWA a jejich instalace
  8. Velmi letmý úvod do SVG
  9. Knihovna D3.js:
          a) úvod do práce
          b) vstupní data aneb JSON
          c) stromový „layout“
  10. Knihovny A-Frame a ThreeJS:
          a) …
  11. Knihovna X3DOM:
          a) …

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.