Sémantika – HTML značky #1

`<section>`, `<article>`	sémantické označení částí stránky
`<header>`, `<footer>`	hlavička a patička (stránky)
`<hgroup>`	sloučení navazujících nadpisů
`<nav>`	označení oblasti s navigací
`<aside>`	doplňkové informace (slovníček, reklama, …)
`<figure>`, `<figcaption>`	sloučení popisku s obrázkem (či obrázky)
`<time datetime="15:00">`	označení časového údaje

Sémantika – HTML značky #2

<input type="text" list="browsers" /> <!-- "našeptávání" -->
<datalist id="browsers">
	<option value="Internet Explorer" />
	<option value="Firefox" />
	<option value="Chrome" />
</datalist>

datalist

<!-- hodnocení -->
<meter min="0" max="100" low="50" high="90" optimum="100" value="70">dobře</meter>

meter

Sémantika – HTML značky #3

<progress>...operace probíhá...</progress> <!-- ukazatele postupu -->
<progress value="75" max="100">...skoro hotovo...</progress>

progress

<menu type="toolbar"> <!-- lišta nástrojů -->
	<li><menu label="File" /></li>
	<li><menu label="Edit">
		<button type="button">Copy</button>
		<button type="button">Cut</button>
		<button type="button">Paste</button>
	</menu></li>
	<li><menu label="Help" /></li>
</menu>

Sémantika – 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 />

inputs

Sémantika – RDFa, mikroformáty, mikrodata

Různé techniky pro označování sémantických dat v HTML

<p>
	<span>Ondřej Žára</span> 
	<span>Seznam.cz</span>
	<span>Webmaster</span>
</p>

google snippet

Sémantika – RDFa, mikroformáty, mikrodata

<!-- 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 – App Cache

Webová aplikace poskytuje tzv. offline manifest, výčet souborů pro použití offline
```
<html manifest="mysite.manifest">
```
Pokud je uživatel offline a pokusí se přistoupit na adresu webové aplikace, prohlížeč mu poskytne soubory definované v manifestu
Webová aplikace má navíc k dispozici JS API, které informuje o stavu připojení
- navigator.onLine
- window.addEventListener("online", ...)
- window.addEventListener("offline", ...)
- applicationCache – objekt popisující stav offline cache, též možnost explicitně cache obnovit

Offline – App Cache

Ukázka manifestu

CACHE MANIFEST
	
# soubory určené k použití offline
offline/index.html
offline/style.css
offline/code.js

# tyto soubory se nikdy nesmí cachovat
NETWORK
remote.cgi

# tyto soubory, pokud nedostupné, budou nahrazeny jinými
FALLBACK
images/large offline/sorry.jpg

Storage – Web Storage

Key-value ú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();

Storage – IndexedDB

Tvorba databáze a zápis

indexedDB.open("eshop").onsuccess = function(e) { /* veškeré operace jsou asynchronní */
	var db = e.result; 
	db.createObjectStore("item");
}

indexedDB.open("eshop").onsuccess = function(e) { /* vkládání dat */
	var item = { name: "Sample", price: 100 };
	var store = e.result.objectStore("item"); 
	store.add(item);
}

Storage – IndexedDB

Čtení z databáze

indexedDB.open("eshop").onsuccess = function(e) { /* čtení dat */
	var store = e.result.objectStore("item"); 
	var request = store.openCursor();
	
	request.onsuccess = function(e) {
		var cursor = e.result;
		if (!cursor) { return; }                  /* žádné další záznamy */
		alert(JSON.stringify(cursor.value));
		cursor.continue();                        /* chceme další záznam, stejný callback */
	}
}

Storage – File API

Přístup k obsahu souborů na klientu
Omezeno jen na soubory, které uživatel vybral (drag'n'drop, <input type="file" />)

Definuje několik JS rozhraní:

`Blob`	obecná binární data
`File`	uživatelem vybraný soubor, resp. jeho metadata (název, velikost, čas, typ)
`FileReader`	asynchronní načítání obsahu souboru
`URL`	tvorba identifikátoru Blobu
`FileError`, `FileException`, `FileList`	pomocná rozhraní

Storage – File API

Náhled souboru a přečtení jeho obsahu

var file = $("fileinput").files[0];           /* první soubor vybraný uživatelem */
var img = document.createElement("img");
img.src = URL.createObjectURL(file);          /* automatický identifikátor */
document.body.appendChild(img);

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

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

Device access – Geolocation

Jednoduché API pro zjištění zeměpisné polohy

if (navigator.geolocation) { ... }

var callback = function(position) {
	alert(position.coords.longitude); /* zeměpisná délka */
	alert(position.coords.latitude);  /* zeměpisná šířka */
	alert(position.coords.altitude);  /* nadmořská výška */
	alert(position.timestamp);        /* čas v msec */
};
navigator.geolocation.getCurrentPosition(callback);

navigator.geolocation.watchPosition(callback);

Connectivity – Web Sockets

Obousměrný komunikační kanál
Vlastní protokol nad TCP, komunikaci začíná HTTP Upgrade handshake
Jednoduché asynchronní JS API
Nestandardní handshake v revizi 76 specifikace
- Bezpečnostní riziko u serverů (proxy), které neimplemementují WebSockets
- Důsledek: Web Sockety dočasně vypnuty ve Firefoxu a Opeře

Connectivity – Web Sockets

Ukázka JS API

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

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

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

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

Connectivity – Server Sent Events

Mechanismus notifikací ze strany serveru

Asynchronní JS API:

var source = new EventSource("/events.cgi");
source.addEventListener("message", function(e) {
	console.log(e.data);  /* jakmile přijde blok dat ze serveru */
	/* ... */
	source.close();       /* uzavřít spojení */
});

Jednoduchý textový formát:

data: foo
data: bar

id: 123456
data: baz

data: něco úplně jiného

Performance – Web Workers

Jednoduchá a bezpečná realizace více vláken
Worker představuje JS soubor vykonávaný v novém vlákně

Worker má k dispozici silně omezený globální objekt:

`setTimeout`, `setInterval`
`XMLHttpRequest`, `navigator`
`Worker`	vznik dalšího vlákna
`postMessage`	komunikace s okolním světem
`importScripts`	(synchronní) načtení dalších skriptů

Komunikace je striktně omezená na zasílání textových zpráv (rodič ↔ Worker, Worker ↔ Worker)

Performance – 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 */
}

Performance – XMLHttpRequest 2

Obohacení XHR o další funkcionalitu

Jasně definovány povolené hlavičky požadavku
Podpora pro CORS
AnonXMLHttpRequest – cross-domain požadavek bez citlivých dat (cookies, http auth, …)
Monitorování stahování/odesílání: loadstart, progress, abort, error, load, timeout, loadend
Formáty přijímaných dat: arraybuffer, blob, document, text
Odesílání binárních dat: send(input.files[0])

Performance – XMLHttpRequest 2

Doplňková funkcionalita XHR2

overrideMimeType()
timeout – přerušení po uplynutí zadaného času

Odesílání formulářových dat:

var fd = new FormData();
fd.append("name1", "value1");
fd.append("name2", "value2");
xhr.send(fd);

HTML5 – balík technologií

Obsah

Osm "technologických tříd" HTML5 (dle )

Sémantika – HTML značky #1

Sémantika – HTML značky #2

Sémantika – HTML značky #3

Sémantika – formulářové prvky

Sémantika – RDFa, mikroformáty, mikrodata

Různé techniky pro označování sémantických dat v HTML

Sémantika – RDFa, mikroformáty, mikrodata

Offline – App Cache

Offline – App Cache

Ukázka manifestu

Storage – Web Storage

Storage – IndexedDB

Tvorba databáze a zápis

Storage – IndexedDB

Čtení z databáze

Storage – File API

Storage – File API

Náhled souboru a přečtení jeho obsahu

Device access – Geolocation

Jednoduché API pro zjištění zeměpisné polohy

Connectivity – Web Sockets

Connectivity – Web Sockets

Ukázka JS API

Connectivity – Server Sent Events

Performance – Web Workers

Performance – Web Workers

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

Performance – XMLHttpRequest 2

Obohacení XHR o další funkcionalitu

Performance – XMLHttpRequest 2

Doplňková funkcionalita XHR2

Prostor pro otázky