HTML5

Co to je, jak vzniká, co přináší a čím se liší od předchozí verze?

Webová interaktivní prezentace
Klávesa "?" zobrazí krátkou nápovědu
Tisk jako obvykle
Pro pokračování stiskněte mezerník
ondrej.zara@firma.seznam.cz

Obsah

Co je HTML5
Vývoj standardu
Přechod z HTML4
Osm technologických tříd HTML5

Co je HTML5

Aktuální verze standardu HTML (nástupce HTML4)
Značkovací jazyk, Javascriptová rozhraní
Přidružené technologie
Doplňování chybějících rozhraní pro klienta
http://www.diveintohtml5.net/
http://caniuse.com/

Vývoj standardu

+ (Web Hypertext Application Technology Working Group)
Mnoho rozdílných požadavků na standard:
- Zpětná kompatibilita
- Zpracování chyb
- Jednoduchost použití
- Podpora pro skriptování

Standardizační proces

Ian Hickson

Editor Ian Hickson
Aktuálně Working Draft / Editor's Draft
5.8MB, >100k řádek
Vývoj pomocí mailinglistu whatwg@whatwg.org
Dozorčí rada (WHATWG members)
2004 – ~~2022~~ 2014

Co zmizelo

14 značek (big, center, font, frame, …)
41 atributů (align, width, height, …)

Co se změnilo

Doctype: <!doctype html>
Zpracování chyb: podrobně specifikováno, jak reagovat na chybný zápis

Co nezmizelo

Absence jmenných prostorů (html, svg, math)
Některé prezentační / nesémantické značky (b, i, small, …)
The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.

Nepovinné značky

<!doctype html>
<title>This is a title</title>
<p>This is a paragraph.

Osm technologických tříd

Definuje pro snazší kategorizaci

Sémantika
Offline & Storage
Device access
Connectivity
Performance and integration
Multimedia
3D, Graphics, Effects
CSS3

Sémantika

Nové HTML značky

<canvas>, <audio>, <video>, ...
<article>, <nav>, <header>, <footer>, ...
<keygen>, <ruby>, ...

Nové formulářové prvky

<input type="text" autofocus />
<input type="date" min="2011-03-01" max="2011-03-31" value="2011-03-01" />
<input type="range" min="0" max="50" value="25" />
<input type="search" results="10" placeholder="Hledat..." />
<input type="text" pattern="[a-z]*" required />

Atribut data-*

<pre data-syntax="xml"> ukázka <!-- komentář --></pre>

Microdata

<!-- RDFa -->
<p xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person"> 
	<span property="v:name">Ondřej Žára</span> 
	<span property="v:affiliation">Seznam.cz</span> 
	<span property="v:title">Webmaster</span> 
</p>

<!-- Microformats -->
<p class="vcard"> 
	<span class="fn">Ondřej Žára</span> 
	<span class="org">Seznam.cz</span> 
	<span class="title">Webmaster</span> 
</p>

<!-- Microdata -->
<p itemscope itemtype="http://data-vocabulary.org/Person"> 
	<span itemprop="name">Ondřej Žára</span> 
	<span itemprop="affiliation">Seznam.cz</span> 
	<span itemprop="role">Webmaster</span> 
</p>

Offline & Storage

App Cache
- Webová aplikace specifikuje, jak ji lze použít offline (pomocí cache prohlížeče)

File API

Přístup k datům uživatelem vybraných souborů

Drag'n'drop, <input type="file" />

/* první soubor vybraný uživatelem */
var file = document.getElementById("fileinput").files[0]; 

var reader = new FileReader();
/* čtení je asynchronní */
reader.addEventListener("load", function() {  
	alert(reader.result);
});

reader.readAsDataURL(file);
/* readAsText(), readAsBinaryString(), readAsArrayBuffer() */

Storage – Web Storage

Key-value persistentní úložiště dat
Hodnoty převedeny na řetězec
Vzdálená podoba s HTTP cookies
sessionStorage – pro origin (scheme + host + port)
localStorage – jako sessionStorage, ale data zůstávají i po vypnutí prohlížeče

localStorage.setItem("name", "Jan");
localStorage.setItem("age", 30);
localStorage.length;                              /* 2 */
localStorage.getItem("age") == localStorage.age;  /* "30" */
localStorage.key(0);                              /* "name" */
localStorage.removeItem("name");
localStorage.clear();

Device access

Geolocation

var callback = function(position) {
	alert(position.coords.longitude); /* zeměpisná délka */
	alert(position.coords.latitude);  /* zeměpisná šířka */
};
navigator.geolocation.getCurrentPosition(callback);

Connectivity

Web Sockets

Persistentní TCP spojení
Obousměrná komunikace

var socket = new WebSocket("ws://example.com/server.cgi");

socket.addEventListener("message", function(e) { /* příjem dat */
    alert(e.data);
});

socket.send("data"); /* odeslání dat */

socket.close();      /* ukončení spojení */

Server Sent Events
- Mechanismus notifikací ze strany serveru
- Komunikace jen směrem ke klientu

Performance and integration

XMLHttpRequest 2
- Obohacení současného XHR o novou funkcionalitu
- Přenos binárních dat
- Monitorování uploadu a downloadu pomocí událostí
- Řešení cross-origin požadavků
Web Workers
- Možnost vykonávání JS v odděleném vlákně
- Žádné sdílení paměťového prostoru
- Žádné sdílení DOMu

Performance – ukázka Web Workers

Ukázka výpočetního vlákna

Rodič:

var w = new Worker("factorial.js");
w.onmessage = function(e) { alert(e.data); }       /* až přijde zpráva od vlákna */
w.postMessage(10);                                 /* poslat zprávu vláknu */

factorial.js:

var onmessage = function(e) {                      /* až přijde zpráva od rodiče  */
    var result = 1, current = parseInt(e.data);
    while (current) { result *= current--; }
    postMessage(result);                           /* dáme vědět zpátky */
}

Multimédia

HTML Audio a Video

<video controls poster="image.png">
	<source src="video-small.mp4" 
		type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'" 
		media="screen and (max-width:500px)" 
	/>
	<source src="video.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'" />
	<source src="video.ogv" type="video/ogg; codecs='theora, vorbis'"/>
	<source src="video.webm" type="video/webm; codecs='vp8, vorbis'" />
	<!-- embed flash jako fallback -->
</video>

var a = new Audio("song.mp3");
a.canPlayType("audio/mpeg"); /* "", "maybe", "probably" */
a.play();

Graphics

Canvas
- Rastrová kreslící plocha
- Ovládání voláním JS funkcí
- Čáry, křivky, plochy, text, per-pixel access
WebGL
- Rozšíření canvasu o vykreslování 3D scén v OpenGL
- Stále silně experimentální
SVG
- Vkládání vektorové grafiky přímo do stránky
- Možnost ovládání Javascriptem

CSS 3

Media Queries

<source src="video.mp4" media="screen and (color) and (min-device-width: 600px)" />

Selektory
```
:checked, :not(), :nth-child(2n+1), ...
```
Transformace

Adds +3 to your HTML skills
- Posun, natočení, zkosení, změna velikosti
@font-face
- Možnost specifikovat vlastní soubor s řezem písma
Efekty
- Kulaté rohy, barevné přechody, stíny boxů a písem, průhlednost

HTML5

Co to je, jak vzniká, co přináší a čím se liší od předchozí verze?

Obsah

Co je HTML5

Vývoj standardu

Standardizační proces

Co zmizelo

Co se změnilo

Co nezmizelo

Osm technologických tříd

Definuje pro snazší kategorizaci

Sémantika

Microdata

Offline & Storage

Storage – Web Storage

Device access

Geolocation

Connectivity

Performance and integration

Performance – ukázka Web Workers

Ukázka výpočetního vlákna

Multimédia

HTML Audio a Video

Graphics

CSS 3

Prostor pro otázky