Start presentation

HTML5 is happening

Martin Hassman (http://zdrojak.root.cz)

6. 11. 2008, PROWAS, Praha

Co je HTML5?

Co obsahuje?

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

Novinky HTML5

Novinky HTML5 - pokračování

Novinky HTML5 - pokračování II

AJAX s historií

Implementován v IE8
emulace v dalších prohlížečích

Událost hashchange

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

Data storage

Implementováno ve Firefoxu 2, nightly WebKitu a IE8,
emulovatelné Flashem

Dvě storage

  • HTML5 obsahuje i SQL storage pro řádově GB

Použití

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

Na co dát pozor

  • globalStorage (FF3) vs. localStorage (FF3.x, IE8)
  • Čas ukládání FF vs. IE
localStorage.setItem('key', data);
globalStorage["www.example.cz"].setItem('key', data);
  • Mám univerzální demo storage.html

Komunikace mezi okny

Implementován ve Firefoxu, nightly WebKitu, IE8

Komunikace mezi aplikacemi

  • Posílání: window.postMessage()
  • Příjem: onmessage=""
    frame1.postMessage('data', 'http://www.example.com/');
  • Ve starších prohlížečích emulovatelné ošklivými hacky

Canvas

Implementován v Safari, Opeře,
Firefoxu, Chrome
Částečná emulace v IE

Co canvas umožňuje

  • Vykreslování 2D grafiky
  • Modifikaci obrázků, fotek
  • Interaktivní hry, grafy
  • Rozšíření možností prohlížečů

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

Metody 2d

  • moveTo
  • lineTo
  • quadraticCurveTo
  • bezierCurveTo
  • arcTo
  • rect
  • fillRect

Metody 2d - pokračování

  • fill
  • createLinearGradient
  • createRadialGradient
  • drawImage

Metody 2d - pokračování 2

  • scale
  • rotate
  • translate
  • transform

Canvas ukázka 3

Bluff

Excanvas - emulace pro IE (VML)

Excanvas - kdy zafunguje

  • 2d (ANO) - 3D (POMALU)
  • statické (ANO) - dynamické (POMALEJŠÍ)
  • práce s fotkami (NE)

Canvas vs Flash?

  • Vývojář webový vs specializovaný
  • Aplikace neinteraktivní vs interaktivní

Gears

Plugin od Google
inklinuje k HTML5

Gears implementuje

  • SQL storage
  • Pracovní vlákna
  • Offline aplikace

Další informace

5 > 4

5 > 3

5 > 2

5 > 1

Otázky?