Webové technologie (VŠCHT – LS 2022/2023)
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

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

Soubory z hodin

  1. 2023-02-14:
    • Povídání o historii webu a technologiích na něm používaných.
    • nákres z tabule
  2. 2023-02-21:
    • Hodina odpadá jak z důvodu nemoci, tak pro možnost navštívit 1. české chemoinformatické setkání spolupořádané naším ústavem.
  3. 2023-02-28:
  4. 2023-03-07:
    • Hodina odpadá plánovaně, místo ní máte delší domácí úkol z minula.
  5. 2023-03-14:
  6. 2023-03-21:
  7. 2023-03-28:
  8. 2023-04-04:
  9. 2023-04-11:
    • Z důvodu rozbitého notebooku, malé účasti a opakovacího charakteru přednášky nahrazeno samostudiem.
  10. 2023-04-18:
    • Přednáška odpadá z důvodu nemoci, místo toho si dostudujte formuláře v HTML, protokol HTTP a především (nově předělanou) přednášku na WSGI.
  11. 2023-04-25: PS: Chrome je strašně pomalý a Firefoxu zase musíte povolit moduly ve WebWorkeru.
  12. 2023-05-02:
    • VŠCHT má pondělí.
  13. 2023-05-09:
    • Z technických důvodů přednáška odpadá. (Stejně jsme to letos kvůli/díky docházce vzali tak rychle, že jsme prakticky všechno důležité už probrali…)
  14. 2023-05-16:
    • Přednáška odpadá – z časových důvodů se přesouvají některé předměty na jiné časy.

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
  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. hraní si s D3.js
  11. …
  12. hrátky se SVG
  13. hraní si s X3DOM
  14. PWA a její instalace v mobilu
  15. 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. Knihovna D3.js:
          a) úvod do práce
          b) vstupní data aneb JSON
          c) stromový „layout“
  11. …
  12. Knihovny A-Frame a ThreeJS:
          a) A-Frame
          b) ThreeJS
  13. Knihovna X3DOM:
          a) X3DOM
  14. Aplikace typu PWA a jejich instalace

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í: …