HTML5

APÍčka bez trička

Martin Hassman (@hassmanm)

23. 3. 2011, Drupal setkání, HUB Praha

Prostor pro poznámky

Proč to přednáší tenhle člověk?

Být první k ničemu není, ale můžete se s tím vytahovat na konferencích. Série obrázků bez trička.

Proč to přednáší tenhle člověk?

Proč to přednáší tenhle člověk?

Proč to přednáší tenhle člověk?

HTML5 API

HTML5 je nejen markup...

...ale i API

Podpora v prohlížečích není černobílá

Slečna, na kterou nikdo nekreslil. Snad příště pozvou někoho rozumného. Život je krutý, zvykněte si. Bude takové min. 5 let. A možná napořád. Důraz na testování. Důraz na frameworky. Emulace. Nic z toho, co vám ukážu nefunguje všude perfektně. (Mohli byste jít domů.)

Graceful degradation

Umřít? Proboha jen to ne. Staří weboví vývojáři neumírají, ti jen ... degrade gracefully...

HTML5 API

canvas

Ajax s historií

localStorage

geolokace

...

Canvas

Canvas aneb malířské plátno

Kreslení bez kaskádových stylů

Značka canvas

<canvas></canvas>

Fallback content

<canvas>
  <img href="obrazek.png" alt="...desc...">
</canvas>

Hello world

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillRect(10, 10, 20, 20);

Canvas metody

Canvas metody 2

Canvas metody 3

Interaktivní hry

http://www.nihilogic.dk/labs/wolf/

Nové renderovací možnosti

http://www.nihilogic.dk/labs/prettyfloat/example.htm

Grafy

http://bluff.jcoglan.com/

Budoucnost

3D

Už ne v HTML5, nýbrž WebGL (OpenGL pro Web)

http://www.youtube.com/watch?v=xn8Y3wzLrXo

Podpora

Jakžtakž: IE8-9, Firefox, Safari, Chrome, Opera

Ale v IE lze emulovat asi 90 % metod pomocí http://excanvas.sourceforge.net/

(Pomalé, ale často stačí.)

Ajax s historií

Proč? - Tlačítko BACK.

Ukázka

http://www.mapy.cz/#x=132762624@y=135826432@z=10@mm=ZP

Kód

<body
  onhashchange="..."
>

Serializovaný stav

http://www.mapy.cz/#x=132762624@y=135826432@z=10@mm=ZP

Varianta beze změny URL

history.pushState(obj)

Varianta beze změny URL

history.pushState(obj)
obj = {'x':132762624, 'y':135826432, 'z':10, 'mm':'ZP'}

Varianta beze změny URL

history.pushState(obj)
obj = {'x':132762624, 'y':135826432, 'z':10, 'mm':'ZP'}

Event popstate

Podpora

onhashchange ujde: IE8-9, Firefox, Safari, Chrome, Opera

pushState horší: Firefox, Safari, Chrome, Opera

Ve starších prohlížečích lze emulovat (černá magie).

Lokální úložiště

Když server nestíhá, tak cookies nestačí.

Příklad

localStorage.username = 'Fenchurch';
localStorage.answer   = 42;

Příklad

localStorage.username = 'Fenchurch';
localStorage.answer   = 42;

if (localStorage.answer == 42)
  alert(localStorage.username + ' knows!';);

LocalStorage

Převádí se na text.

Pro datové struktury použijte JSON.

Dva druhy úložišť

http://a.met.cz/drupal/storage.html

Podpora

Velmi dobrá: IE8-9, Firefox, Safari, Chrome, Opera

Geolokace

(Psst! Není z HTML5, ale chybně se tam počítá.)

Geolokace

http://maps.google.cz/

Geolokace

navigator.geolocation.getCurrentPosition(callback)

Ukázka

Ukázka...

http://htmlex.met.cz/#%3Cscript%3E%0Afunction%20callback%28obj%29%20{%0A%20%20document.body.innerHTML%20%3D%20%22Lat%3A%20%22%20%2B%20obj.coords.latitude%20%2B%20%22%20lon%3A%22%20%2B%20obj.coords.longitude%20%2B%20%22%20accur%3A%22%20%2B%20obj.coords.accuracy%3B%0A}%0A%0Afunction%20errorback%28obj%29%20{%0A%20%20document.body.innerHTML%20%3D%20%22Error%3A%20%22%20%2B%20obj.code%3B%0A}%0A%0Awindow.onload%20%3D%20function%28%29%20{%0A%20%20if%20%28navigator.geolocation%29%20{%0A%20%20%20%20navigator.geolocation.getCurrentPosition%28callback%2C%20errorback%29%3B%0A%20%20%20%20document.body.innerHTML%20%3D%20%22Loading...%22%3B%0A%20%20}%0A}%0A%3C%2Fscript%3E0

Podpora

Velmi dobrá: IE8-9, Firefox, Safari, Chrome, Opera

...

Blíží se závěr 8-)

Další zdroje

Zdroje fotek a obrázků

Bazinga!

Děkuji za pozornost!