HTML5

HTML5
Jirka Kosek
Přednáška v rámci GDG Spaghetti Code Liberec6. ledna 2015

Slidy: http://www.kosek.cz/xml/2015html5tul/

Copyright © 2015 Jiří Kosek

Proč a jak vzniklo HTML 5

Vývoj a verze HTML

  • HTML 4.0 (prosinec 1997) – poslední nová funkcionalita

  • HTML 4.01 (prosinec 1999) – pouze „stylistické“ úpravy

  • XHTML 1.0 (leden 2000) – stejné jako HTML 4.01, ale založeno na XML syntaxi

  • XHTML 1.1 (květen 2001) – modularizace specifikace, kromě Ruby žádná nová funkcionalita

  • XHTML 2 – kvůli nepřijetí trhem zastavuje W3C práce na této specifikaci ke konci roku 2009

  • HTML 5 – od roku 2004 vyvíjeno v rámci WHATWG, od roku 2007 pak společně s W3C

  • 28. října 2014 – HTML 5 vydáno jako doporučení W3C

Požadavky webových aplikací

  • po roce 2000 se vyvíjejí stále více interaktivní aplikace

    • kombinace HTML + DOM + JavaScript + CSS

      • specifikace a jejich vzájemná interakce nebyla vždy přesně definována

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

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

    • Flash, SilverLight, JavaFX, …

      • speciální prostředí

      • pro spuštění je vyžadován plugin

      • psaní aplikací je snazší a možnosti větší

Jak dál?

  • klasická kombinace HTML + DOM + JavaScript by brzy na psaní aplikací přestala stačit

  • cíle HTML5

    • zpřesnit definici HTML a DOM tak, aby byla jednoznačná a odpovídala skutečnému chování prohlížečů

    • přidat do standardního jazyka některá dosud proprietární, ale užitečná rozšíření prohlížečů

    • přidat některé nové užitečné funkce

    • rozdělení HTML a XHTML byla chyba a příliš revoluční krok

Novinky v HTML5

  • nové elementy pro lepší popis struktury a sémantiky stránek

  • lepší podpora multimédií a grafiky

  • vylepšení DOM

  • vylepšení formulářů

  • nová API

HTML × XHTML

Podoba dokumentu

  • specifikace definuje elementy a atributy a jejich reprezentaci v paměti pomocí rozhraní DOM

  • dokument je možné uložit ve dvou formátech

    • XML serializace (někdy označovaná jako XHTML5) – odpovídá XHTML dokumentům

    • HTML serializace – odpovídá běžnému HTML formátu

    • DOM je v obou případech stejný kvůli lepší kompatibilitě skriptů

    • parser se vybírá podle typu média (text/html × application/xhtml+xml)

Výhody HTML syntaxe

  • zpětně kompatibilní i se starými prohlížeči

  • autoři stránek ji znají

  • nevadí v ní syntaktické chyby

  • krátší zápis (lze vynechávat koncové tagy, uvozovky kolem hodnot atributů, …)

  • není formálně založena na SGML jako u předchozích verzí HTML

Příklad 1. Kostra stránky v HTML5
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

Výhody XHTML syntaxe

  • lze ji zpracovávat pomocí XML nástrojů

  • lepší rozšiřitelnost pomocí jmenných prostorů

  • XHTML lze kombinovat s libovolnými dalšími jazyky, HTML zatím podporuje pouze kombinování s SVG a MathML

  • striktní syntaxe (výhoda i nevýhoda)

  • je nutné posílat s MIME typem application/xml nebo application/xhtml+xml

Příklad 2. Kostra stránky v XHTML5
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

Polyglot markup

  • průnik HTML a XML syntaxe, který produkuje stejný DOM při načítání pomocí HTML i XML parseru

  • dovoluje posílat XHTML5 s MIME typem text/html

  • omezení

    • vždy používá kódování UTF-8 (ideálně s BOM)

    • musí obsahovat !DOCTYPE

    • názvy elementů/atributů jsou malými písmeny

    • nepoužívá element noscript

    • styly a skripty jsou vždy uloženy externě a načítány pomocí link

    • používají se vždy oba dva atributy lang a xml:lang

    • …

  • nicméně pořád zůstává otázka, proč používat „polyglot“

Struktura a sémantika stránek

Nové elementy pro strukturování stránky

  • section – sekce stránky (např. kapitola knihy, obsah jedné záložky, …)

  • nav – označení navigace

  • article – článek, příspěvek v diskusi, …

  • aside – samostatný obsah související s okolním textem (třeba anketa k článku)

  • main – hlavní obsah stránky

  • header – hlavička stránky nebo části

  • footer – patička stránky nebo části

Další nové elementy

  • time – zápis data a času 

    <time datetime="2007-08-05T20:00:00Z">5. srpna 2007 v osm večer</time>

  • meter – zápis jednotek, počítadel, ukazatelů, … 

    <meter>42%</meter>
<meter value="90" min="0" max="200" low="90" high="140">nízké IQ</meter>
<meter value="20" max="30">20 nepřečtených mailů ze 30</meter>

  • progress – ukazatel průběhu nějaké akce 

    Průběh načítání dat <progress>20%</progress>

  • mark – vyznačení textu (například výsledek hledání) 

    <p>Chyba v následujícím kódu je zvýrazněna:</p>
<pre><code>var i: Integer;
begin
   i := <mark>1.1</mark>;
end.</code></pre>

Další nové elementy

  • figure – ilustrace/příklad/… s volitelným popiskem (figcaption) 

    <figure>
  <pre>Průběh načítání dat &lt;progress>20%&lt;/progress></pre>
  <figcaption>Ukázka použití elementu <code>progress</code></figcaption>
</figure>

  • template – obsah elementu se nezobrazuje, ale je přístupný ze skriptů

  • wbr – označení místa možného zalomení řádky

  • output – místo, kam se bude vkládat výstup skriptu

  • ruby, rt, rp, rb a rtc – elementy pro zápis Ruby anotací

  • bdi – označení textu, na který se nemá vztahovat bi-di algoritmus

  • keygen – generování soukromého a veřejného klíče

  • embed – „staronový“ element pro vkládání obsahu pomocí pluginů

Přístupnost

  • specifikace HTML v mnoha ohledech usnadňuje a doporučuje tvorbu přístupného obsahu (nové „sémantické“ elementy, možnost fallbacku u nových multimediálních elementů)

  • navíc lze u každého elementu použít další atributy ARIA – role a aria-*

  • ARIA = Accessible Rich Internet Applications

  • atributy ARIA popisují skutečný význam prezentačního kódu 

    <ul role="menubar">
  <li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel">
    <span id="fileLabel">File</span>
    <ul role="menu">
      <li role="menuitem">New</li>
      <li role="menuitem">Open…</li>
    </ul>
  </li>
</ul>

Multimédia

Vložení videa a audia

  • element object je málo specifický a každý prohlížeč jej podporuje trochu jinak

  • pro vkládání audia/videa se proto dlouho nejvíce používal Flash

  • nové elementy audio a video umožňují přímočaré vložení zvuku či videa 

    <video src="film.mov" width="320" height="200">
  Ve vašem starém prohlížeči video neuvidíte
</video>

  • DOM rozhraní nabízí metody pro ovládání přehrávání

  • kvůli licenčním problém není zatím shoda na jednom kodeku, který by podporovali všichny prohlížeče

  • stejný obsah proto lze zadat v několika různých formátech

    <video>
  <source src='video.mp4' type='video/mp4'>
  <source src='video.webm' type='video/webm'>
  <source src='video.ogv' type='video/ogg'>
  Váš prohlížeč neumí video přehrát
</video>

Titulky

  • pro audio a video záznamy lze přidat odkaz na titulky

  • titulky jsou ve formátu WebVTT

  • lze zadat několik vatiant titulků

  • zobrazení titulků lze ovládat pomocí JS a stylovat pomocí CSS

  • <video src="brave.webm">
 <track kind="subtitles" src="brave.en.vtt" srclang="en" label="English">
 <track kind="captions" src="brave.en.hoh.vtt" srclang="en" 
        label="English for the Hard of Hearing">
 <track kind="subtitles" src="brave.fr.vtt" srclang="fr" 
        lang="fr" label="Français">
 <track kind="subtitles" src="brave.de.vtt" srclang="de" 
        lang="de" label="Deutsch">
</video>

Canvas

  • element canvas definuje virtuální plochu, ve které lze pomocí skriptování kreslit

  • v současné době je široce podporována podporována 2D grafika

  • postupně prohlížeče začínají podporovat i 3D variantou – WebGL (obdoba OpenGL)

  • podporovány jsou všechny běžné grafické operace – čáry, křivky, texty, vkládání bitmap, transformace, …

  • není zde objektový model a model propagace událostí

Ukázka canvasu

  • vytvoření oblasti na stránce pomocí elementu canvas

    <canvas id="platno" width="600" height="300"></canvas>

  • v Javascriptu je potřeba vybrat správné plátno a získat jeho kontext 

    var context = document.getElementById('platno').getContext("2d");

context.beginPath();
context.moveTo(10, 10);
context.lineTo(100, 100);
context.stroke();

  • hra

  • demo – mapování videa na canvas

  • grafický editor

SVG

Scalable Vector Graphics

  • vektorový grafický formát využívající pro zápis XML syntaxi

  • obrázek se skládá ze základních grafických elementů jako úsečka, kružnice, text, …

  • může být načten ze samostatného souboru (img, object) nebo vložen přímo do kódu stránky

  • možnost zvětšování/zmenšování bez ztráty kvality, transformace a animace

  • s obrázkem lze manipulovat pomocí rozhraní DOM a JavaScriptu

  • lze stylovat pomocí CSS

Ukázka vložení SVG do stránky

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ukázka SVG obrázku</title>
  </head>
  <body>
    <h1>Vektorový obrázek v SVG</h1>
    <svg width="400" height="400">
      <circle style="fill: blue; stroke: red" cx="200" cy="200" r="150"/>
      <text x="100" y="200" 
            style="font-size: 36px; font-family: Verdana">Ahoj světe</text>
    </svg>
  </body>
</html>

Srovnání Canvas vs. SVG

  Canvas SVG
Výhody

  • rychlý prostředek pro vykreslení jakéhokoliv 2D rastrového objektu

  • výsledek může být uložen jako obrázek (PNG/JPEG)

  • nezávislé na rozlišení

  • přímá podpora animací

  • možnost manipulace přes DOM a obsluha událostí
Nevýhody

  • operace jako animace nebo obsluha událostí je potřeba udělat „ručně“

  • horší přístupnost

  • složitější scény se vykreslují pomaleji

Formuláře

Stav před HTML5

  • formuláře z HTML4 jsou velice omezené

  • nenabízejí potřebnou interaktivitu

  • kontrola vstupů se musí pracně programovat v Javascriptu

  • HTML5 přidává několik nových typů a deklarativní validaci vstupů

Nové datové typy

  • pohodlnější zadávání data a času

    <input type="date" name="…"/>
<input type="time" name="…"/>

  • speciální typy pro čísla

    <input type="number"/>
<input type="range" min="1" max="20" step="2"/>

  • emaily, telefonní čísla a URL

    <input type="email"/>
<input type="url"/>
<input type="tel"/>

  • pohodlný výběr barvy (vrací #RRGGBB notaci)

    <input type="color"/>

  • seznam napovídaných hodnot

    Titul: <input list="tituly"/>
    <datalist id="tituly">
      <option value="Ing."/>
      <option value="Bc."/>
      <option value="Mgr."/>
    </datalist>

Kontrola vstupních dat

  • pro číselné typy lze určit minimální a maximální hodnotu

    <input type="number" min="1" max="20" …>

  • pro řetězcové typy lze určit minimální a maximální délku

    <input type="password" minlength="8" maxlength="20" …>

  • pro řetězcové typy lze určit i regulární výraz pomocí atributu pattern

    <input name="psc" pattern="[0-9]{3} [0-9]{2}"
       title="Poštovní směrovací číslo ve tvaru 123 45">

  • pomocí DOM+JS lze zpracovávat chyby nalezené ve formuláři

Další zajímavé formulářové elementy

  • element output se používá k vytvoření místa, kam se vkládá výstup generovaný klientským skriptem 

    <form oninput="result.value = a.valueAsNumber + b.valueAsNumber">
 <input name="a" type="number" step="any"> +
 <input name="b" type="number" step="any"> =
 <output name="result">
</form>

  • pomocí elementu keygen lze vygenerovat dvojici soukromý/veřejný klíč

DOM a nová API

Reorganizace DOM

  • DOM2 byl přímo integrován do specifikace HTML5

  • důvodem je větší důraz na tvorbu aplikací v HTML5

  • nejdůležitější nová API

    • přehrávání audio/video

    • validace formulářů

    • podpora offline aplikací

    • podpora WYSIWYG editace (contenteditable)

    • práce s historií (History) a adresním řádkem (Location) pro AJAXové aplikace

Další související API

  • některá API, která byla ve WHATWG součástí návrhu Web Applications 1.0, se nyní vyvíjejí samostatně nebo budou až součástí HTML5.1

  • mnoho z nich je již dobře podporováno prohlížeči

  • Drag'n'Drop

  • Zasílání zpráv – push notifikace, Web sockets, zasílání zpráv mezi dokumenty a kontexty

  • Device APIs – práce s externími zařízeními (např. webová kamera)

  • Web Storage – klientské úložiště klíč/hodnota

  • IndexedDB – jednoduchá databáze přímo v prohlížeči

  • Web Workers – podpora více vláken v Javascriptu

  • Geolocation API – práce s údaji o aktuální geografické poloze

  • File API – přístup k lokálním souborům

„Horké“ novinky

Service Worker

  • nový model pro psaní offline aplikací

  • AppCache v HTML5 je dobře použitelná jen pro práci se statickými zdroji

  • skutečná offline aplikace musí transparentně pracovat s lokálním úložištěm, když je uživatel offline, a pak provést synchronizaci

  • Service Worker je nízkoúrovňové API

    • může interceptovat požadavky HTTP a transparentně nabízet nakešovaná data, když je uživatel offline

    • nabízí API pro práci s cache

    • psát aplikace je snazší, protože rozdíl mezi online/offline stavem lze řešit v Service Workeru

  • popis aplikačních scénářů využívajících Service Worker

Web Components

Web Audio API

  • API pro zpracování a syntézu zvuku

  • míchání zvuků z více zdrojů

  • generování nových zvuků

  • vhodné např. pro generování zvukových efektů ve hrách

  • ukázky Web Audio API

Responzivní obrázky

  • media queries celkem dobře řeší responzivní design z hlediska layoutu a zobrazování/skrývání informací

  • pro různá zařízení je však potřeba používat různé obrázky

  • pro vektorovou grafiku lze řešit pomocí SVG, které se snadno škáluje

  • pro bitmapové obrázky lze použít elemenet picture

    <picture>
  <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
  <source srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="fallback.jpg" alt="">
</picture>

  • http://responsiveimages.org/

Další informace

Podpora v prohlížečích

  • různé části návrhu jsou různě vyzrálé

  • Chrome a Firefox jsou většinou tahouni nových funkcí, IE a Safari některé věci nepodporují

  • CanIUse.com – srovnání podpory v jednotlivých prohlížečích

  • podporu některých chybějících elementů/API lze nasimulovat v Javascriptu pomocí polyfillu

Odkazy

Otázky?

http://www.kosek.cz/xml/2015html5tul/