Start presentation

Představení HTML5

Martin Hassman (www.zdrojak.cz)

22. 11. 2008, Junior Internet, Praha

Web se vyvíjí

  1. Sdílení dokumentů
  2. Webové stránky
  3. Webové aplikace, RIA

Co je HTML5?

Co HTML5 obsahuje?

  • Příklady standardizace proprietárních řešení: innerHTML, contenteditable, designMode, getElementsByClassName, drag & drop
  • Specifikace reálného HTML, HTML z ulice (HTML as she spoke)

Rozšíření formulářů - WebForms2

Rozšíření formulářů - pokračování

Sémantické značky

Bezpečný iframe

  • Možné hodnoty: allow-same-origin, allow-forms, a allow-scripts
  • Zakazuje pluginy, opuštění kontextu (vyvoření oken, změna top URL apod.)
  • Další variantou je seamless - dědičný iframe

Web Workers

Komunikace mezi okny

    frame1.postMessage('data', 'http://www.example.com/');
  • Komunikace mezi aplikacemi
  • Ve starších prohlížečích emulovatelné
  • ONLINE: http://achau.appspot.com/demo/html5/crossdoc/index.html

Offline webové aplikace

<html manifest="Aplikace.manifest">

Data Storage

  • ONLINE: http://a.met.cz/prowas/html5-november/src/storage.html
  • ONLINE: http://webkit.org/misc/DatabaseExample.html

localStorage + sessionStorage

localStorage.setItem('key', data);
localStorage.getItem('key');

localStorage.setItem('key', data);
globalStorage["www.example.cz"].setItem('key', data);

AJAX s historií

<body
  onhashchange="..."
>
  • Alternativou v HTML5 je history.pushState() a PopStateEvent

Audio, video

Ukázka videa 1

<embed type="application/x-shockwave-flash"
src="/static/cz/shared/app/MediaCenter.swf"
quality="high"
wmode="transparent"
allowfullscreen="true"
flashvars="media_id=431380&bit=1225473403624233743826
&color=#000000&autostart=true&config_file_append="
width="440"
height="288">

Ukázka videa 2

<!--[if !IE]>-->
<object type="application/x-ms-wmp"
width="320" height="305">
  <param name="src" value="/services/playlist.asx">
  <param name="autostart" value="1" id="autoStart">
<!--<![endif]-->
  <param name="mute" value="0">
  <param name="autostart" value="1" id="autoStart2">
  <param name="autosize" value="0">
  <param name="stretchtofit" value="0">
  <param name="uimode" value="full">
</object>

Nešlo by to lépe?

Šlo

<video src="soubor.ogg"></video>

Canvas

Značka canvas

<canvas></canvas>

Fallback content

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

Context 2d

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

Implementován v :

Metody 2d

Metody 2d - pokračování

Metody 2d - pokračování 2

Excanvas - emulace pro IE (VML)

Ukázky canvasu

Canvas vs Flash?

Gears

Plugin od Google
inklinuje k HTML5

Gears implementuje

Validátor

Další informace

5 > 4

5 > 3

5 > 2

5 > 1

Otázky?