HTML5

S důrazem na graficky zajímavé části

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, jak se vyvíjí
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
http://diveintohtml5.org/
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
4.7MB, 72k řádek
Vývoj pomocí mailinglistu whatwg@whatwg.org
Dozorčí rada (WHATWG members)
2004 – ~~2022~~ 2014

Přechod z HTML4

Nový doctype: <!doctype html>
Zrušení značek a atributů (big, center, font, frame, align, width, height, …)
Nové značky, atributy a technologie: vše volitelné

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 I

Nové HTML značky

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

meter progress

Microdata

Sémantika II

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 />

inputs

Offline & Storage

App Cache
- Webová aplikace specifikuje, jak ji lze použít offline (pomocí cache prohlížeče)
Web Storage
- Úložiště dat v prohlížeči
- Stránka si může "zapamatovat" až 5MB dat bez nutnosti jejich ukládání (na server)
File API
- Přístup k datům uživatelem vybraných souborů
- Drag'n'drop, <input type="file" />

Device access

Geolocation

Skript může prohlížeč požádat o zjištění zeměpisné pozice
Tento požadavek musí vždy odsouhlasit uživatel
Prohlížeč negarantuje, že pozici dokáže určit

Connectivity

Web Sockets, Server Sent Events

Nové techniky pro pružnější komunikaci se serverem (odstranění chyb současného AJAXu)
Nízká podpora prohlížečů
Nutnost podpory na serveru

Performance and integration

Web Workers
- Možnost vykonávání JS v odděleném vlákně
- Možnost provádět složité (zdlouhavé) výpočty bez blokování UI
XMLHttpRequest 2
- Obohacení současného XHR o novou funkcionalitu
- Přenos binárních dat
- Řešení cross-origin požadavků
- Monitorování uploadu a downloadu pomocí událostí

Multimédia

HTML Audio a Video

<audio controls>
	<source src="sound.ogg" type="audio/ogg" />
	<source src="sound.mp3" type="audio/mpeg" />
	<source src="sound.wav" type="audio/wave" />
	Smůla :-(
</audio>

<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>

Graphics

Canvas
- Rastrová kreslící plocha
- Ovládání voláním JS funkcí
- Čáry, křivky, plochy, text, per-pixel access
- Možnost přenesení dat z obrázku, videa, jiného canvasu
- Uživatel má možnost uložit jako obrázek
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 I

Media Queries

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

Použitelné pro stylopisy, audio, video, odkazy

Selektory
```
:checked, :not(), :nth-child(2n+1), ...
```
@font-face
- Možnost specifikovat vlastní soubor s řezem písma
- Ve formátu TTF, OTF, WOFF

CSS 3 II

Efekty

Kulaté rohy, barevné přechody, stíny boxů a písem, průhlednost

pre {
	text-shadow: 2px 2px 5px red;
	opacity: 0.75;

	box-shadow: 0px 0px 15px 5px blue;
	border-radius: 30px;

	background-image: linear-gradient(top, #ffee88, #88ff88);
}

Transformace

Adds +3 to your HTML skills
- Posun, natočení, zkosení, změna velikosti

HTML5

S důrazem na graficky zajímavé části

Obsah

Co je HTML5

Vývoj standardu

Standardizační proces

Přechod z HTML4

Osm technologických tříd

Definuje pro snazší kategorizaci

Sémantika I

Sémantika II

Nové formulářové prvky

Offline & Storage

Device access

Geolocation

Connectivity

Web Sockets, Server Sent Events

Performance and integration

Multimédia

HTML Audio a Video

Graphics

CSS 3 I

CSS 3 II

Prostor pro otázky