Webové technologie (VŠCHT – LS 2023/2024)
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. 2024-02-13:
    • Povídání o historii webu a technologiích na něm používaných.
  2. 2024-02-20:
  3. 2024-02-27:
    zobrazení XML (data poskytl kolega Vlasák)
  4. 2024-03-05:
  5. 2024-03-12:
  6. 2024-03-19:
  7. 2024-03-26:
  8. 2024-04-02:
  9. 2024-04-09:
  10. 2024-04-16:
  11. 2024-04-23:
  12. 2024-04-30:
    • ...

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. WebAudio API:
          ~ WebAudio API @ MDN
          ~ příklady od MDN na WebAudio
          ~ ...
  11. …
  12. Knihovna D3.js:
          a) úvod do práce
          b) vstupní data aneb JSON
          c) stromový „layout“
  13. Knihovny A-Frame a ThreeJS:
          a) A-Frame
          b) ThreeJS
  14. Knihovna X3DOM:
          a) X3DOM
  15. 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í: …