Úvodní přednáška

• přehled technologií používaných na webu

• principy jednotlivých technologií a možnosti jejich vzájemného kombinování

• program přednášek

• zaměřeno zejména na „frontendové“ technologie

• na předmět navazuje kurz 4IZ278 – Webové aplikace

• praktické zvládnutí nejpoužívanějších technologí:

  • HTML

  • kaskádové styly (CSS)

  • JavaScript

• Povinná:

  • Mark Pilgrim: Ponořme se do HTML5

  • Martin Michálek: CSS – moderní layout

  • Martin Michálek: Vzhůru do (responzivního) webdesignu

  • Axel Rauschmayer: JavaScript for impatient programmers

• „Téměř povinná:“

  • aktuální publikace o HTML, CSS, Web designu a JavaScript

• Doplňková:

  • dokumentace k jednotlivým nástrojům (HTML editory, grafické programy apod.)

  • doporučení konsorcia W3C

• zdrojak.cz

• jakpsatweb.cz

• msdn.microsoft.com/ie/

• developer.mozilla.org

• další se dozvíte během výkladu

Je založena na třech technologiích

• jazyk HTML

• protokol HTTP

• adresování objektů pomocí URL adres

• značkovací jazyk pro popis struktury webových stránek

• nezávislý na platformě

• protokol pro přenos stránek mezi webovým serverem a prohlížečem

• jednoduchý aplikační protokol vystavený nad protokolem TCP

• bezstavový protokol modelu požadavek/odpověď – přináší problémy pro webové aplikace

• webové stránky a aplikace

• pro mnoho platforem lze psát „nativní“ aplikace pomocí webových technologií

• elektronické knihy (EPUB) jsou jen zabalené HTML+CSS

• mnoho tištěných knih se dnes generuje přímo pomocí HTML+CSS

• …

• první formální specifikace

• základní formátování a strukturování dokumentu, obrázky, formuláře

• 1995

• ambiciózní návrh

• matematické vzorce, tabulky, obtékání obrázků, styly dokumentů

• HTML 3.0 nebylo nikdy přijato jako standard, protože bylo příliš složité a žádná firma nebyla schopna naprogramovat jeho podporu ve svém prohlížeči

• 1996

• výrobci prohlížečů přidávají nestandardní rozšíření HTML

• konsorcium W3C proto vybírá společnou podmnožinu rozšíření a schvaluje HTML 3.2

• především lepší možnosti formátování dokumentu

• 1997

• velký skok vpřed

• podpora kaskádových stylů

• skripty vložené do stránky

• multimediální objekty

• rozšířené možnosti tabulek

• i18n (podpora více jazyků, tok textu zleva doprava)

• rozšíření formulářů

• rámy

• některé z funkcí HTML 4.0 nepodporují prohlížeče dodnes

• prosinec 1999

• opravy drobných chyb ve specifikaci HTML 4.0

• HTML 4.01 se striktnější syntaxí XML

• XHTML dokumenty lze psát tak, aby jim rozuměly i prohlížeče bez podpory XML

• snahou bylo opustit „tag-soup“ syntaxi spojenou s HTML a vynutit psaní syntakticky zcela korektního kódu

• striktnější syntaxe byla motivována možností psát jednodušší parsery použitelné na málo výkonných zařízení (např. mobily v dané době)

• XHTML bohužel nepřineslo nic nového z funkčního hlediska a tak se příliš neujalo

• webové aplikace mají stále větší požadavky na interaktivitu

  • lze to vyřešit použitím proprietárních technologií jako je Flash nebo kombinací HTML + DOM + JavaScript + CSS

  • specifikace HTML + DOM + JavaScript + CSS a jejich vzájemná interakce nebyla dlouhou dobu přesně definována

  • některé věci nebyly specifikovány vůbec (XHR)

  • bylo obtížné psát aplikace, které fungují ve všech prohlížečích

• HTML5 upřesňuje definici HTML a DOM tak, aby byla jednoznačná a odpovídala skutečnému chování prohlížečů

• přidává do jazyka některá rozšíření prohlížečů, která jsou užitečná

• přidává některé další nové užitečné funkce (validace formulářů, canvas, příma podpora multimédií, …)

• rozdělení HTML a XHTML byla chyba a příliš revoluční krok, nadále bude jen jeden jazyk se dvěma alternativními syntaxemi

• až do verze HTML4.01 je syntaxe založena na SGML

  • prohlížeče nicméně pro čtení nepoužívají parser SGML

  • každá verze je formálně definována pomocí DTD – to vyjmenovává jaké elementy/atributy jsou v dokumentu použitelné

  • odkaz na příslušnou verzi DTD se dělá pomocí deklarace typu dokumentu (!DOCTYPE)

• XHTML – syntaxe je založena na XML

• HTML5 – syntaxe vychází z HTML4 a toho, jak prohlížeče reálně kód načítají

  • HTML5 stránky lze zapisovat i pomocí XML syntaxe podobně jako XHTML (tzv. XHTML5)

• HTML 4.01 definuje tři DTD:

  Transitional

  DTD obsahuje všechny elementy a atributy HTML kromě těch, které se používají pro rozdělení okna prohlížeče na rámy.

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

  Strict

  DTD je již striktnější než Transitional. Neobsahuje žádné elementy a atributy, které slouží pro definici vizuálního vzhledu dokumentu (např. elementy font, center a atributy jako align a color).

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">

  Frameset

  DTD se používá na stránkách, které rozdělují okno prohlížeče do několika rámů pomocí elementu frameset.

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

• HTML5 nepoužívá DTD, nabízí jednu sadu elementů/atributů

  <!DOCTYPE HTML>

  !DOCTYPE se používá zejména pro přepnutí do zobrazovacího režimu respektujícího standard CSS

• !DOCTYPE by na stránkách nemělo chybět. Identifikuje použitou verzi HTML, přepíná prohlížeč do správného vykreslovacího režimu CSS a umožňuje automaticky zkontrolovat syntaxi stránky pomocí validátoru.

• na cvičení a v literatuře

• stažení HTML stránky

  • z URL se získá doménové jméno, to se pomocí DNS převede na IP adresu

  • na zjištěné IP adrese na naváže TCP spojení a pošle se požadavek HTTP

  • server pomocí protokolu HTTP vrátí obsah HTML stránky

• zpracování HTML stránky

  • načítaný HTML kód se parsuje

  • průběžně se buduje objektový model elementů na stránce (DOM)

  • obsahuje-li stránka odkazy na další důležité objekty (obrázky, CSS, JS), tak se také začnou stahovat a zpracovávat

• vykreslení HTML stránky

  • z načteného CSS se vybuduje rovněž objektový model (CSSOM)

  • DOM (co se má zobrazit) a CSSOM (jak se to má zobrazit) se zkombinují a vykreslí

• interaktivita

  • stránka může obsahovat i programový kód (JavaScript), který zajišťuje interakci s uživatelem

  • tím, kdy a jak se tak děje, si prozatím nebudeme kazit den 😊

• Dive Into HTML5 – elektronická verze knihy o HTML5 (český překlad)

• Architektura WWW (český překlad)

• Relaxed – nový validátor XHTML kódu – pojednání o tom, co je to validita stránek a co shoda s normou HTML

• XHTML je mrtvé! Ať žije HTML5! Nebo ne? – článek o vývoji syntaxe HTML/XHTML

• RFC 3986 – Obecná syntaxe URI adres

• Populating the page: how browsers work

• Doporučení W3C

• Specifikace HTML 4.01

• Specifikace XHTML 1.0

• Specifikace HTML5

• Užitečné postřehy ohledně webových technologií od J. Korpely

• Základy HTML v češtině