MISE EN BOUCHE AHTML5

PETIT TOUR RAPIDES DES PRINCIPALES API (WEB-WORKERS,AUDIO/VIDEO, CANVAS)

Laurent Tonon / @laurent_tonon

HTML5 C'EST QUOI?

UN RAPIDE HISTORIQUEHTML tel qu'on le connaissait ne suffisait plus au besoins du

web...

XHTML pointait son nez mais n'apportait aucune solution...

En 2004, Des professionels du web, le WHATWG (WebHypertext Application Working Group) commence a travaillersur HTML5Et sont rejoint par le W3C en 20062008: Premier "working draft" pour HTML5

LES ACTEURS MAJEURSWHATWG (groupes de personnes travaillant pour Apple,Mozilla, Google et Opera): Developpement et collaborationavec les navigateursW3C et plus particulierement le HTML working group:Specification HTML5IETF (Internet Engineering Task Force): Protocoles (Websockets par exemple)

UNE RAPIDE DEFINITIONSuccesseur de HTML 4.01

Dans le langage courant:

HTML 5 + CSS 3 + JavaScript

Nouveaux elements et APIs (Audio, Video, Canvas, etc...)Nouvelles fonctionalites JavaScript (Web Workers, WebSockets, etc...)Nouvelles fonctionalites CSS3 (Transforms, web fonts, etc...)

NOTRE EXEMPLEDes bookmarks video

DEMO

AUDIO, VIDEO (DISCO)Nous avons les plugins (Flash parmi le plus connu), mais ces

derniers peuvent:

Etre indisponible sur l'OS cibleEtre impossible a installer dans un contexte d'entreprisePresenter des problemes d'affichage

AUDIO ET VIDEO (TAGS)Support natif avec les tags <audio> et <video>

Simplement<video src="myvideo.webm" width="320" height="240" controls=""></video>

Ou bien<video width="640" height="360" controls=""> <source src="myvideo.MP4" type="video/mp4"> <source src="myvideo.OGV" type="video/ogg"> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF" <param ...=""> <param ...=""> <param ...=""> </object></video>

AUDIO ET VIDEO (API)Pimp my player!

Attributs: autoplay, loop, mute, preload, control, etc…Events: play, pause, seeking, timeupdate, ended, etc…Methods: play(), pause(), load(), etc…

DEMO

RESOURCESVideo for everybody:

Video.js: MediaElement.js:

http://camendesign.com/code/video_for_everybodyhttp://videojs.com

http://mediaelementjs.com

STOCKAGE (LOCAL)Cookies

Limitations

Taille (env 4Ko)Sont envoyes a chaque requete HTTP20 cookies par domainePas d'API de type "CRUD"

LOCALSTORAGE ET SESSIONSTORAGE

Partagent la meme APIinterface Storage { readonly attribute unsigned long length; getter DOMString key(in unsigned long index); getter any getItem(in DOMString key); setter creator void setItem(in DOMString key, in any data); deleter void removeItem(in DOMString key); void clear();};

DEMO

CANVAS

PLEIN LES YEUXDes applications de dessin: Une magnifique demo base sur Twitter API:

Un globe avec WebGL:

GamingImpactJS: JSGlib (Adrien Gueret):

http://muro.deviantart.com/

http://9elements.com/io/projects/html5/canvas/http://data-arts.appspot.com/globe-

search

http://impactjs.com/http://jsglib.no-ip.org/

RAPIDE PRESENTATION DE L'APITout commence ici... dans le code HTML

<canvas width="500px" height="300px" id="myCanvas"> <!-- Fallback goes here if canvas is not supported --></canvas>

Interagir avec le canvasvar canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');

POSSIBILITES DU CANVASDonnez libre cours a votre imagination ;)

Lignes, Rectangles, CerclesCourbes complexes (courbes de Bezier par exemple)Transformation (translation, rotation, echelonnage)Manipulation de pixelImage croppingConvertion en image

DEMO

WEB WORKERS

Web Workers a la rescousse

WEB WORKERS: DEFINITIONUn web worker c'est:

Un thread qui s'execute en parallele du main thread (UI)Un fichier contenant les intructions JavaScript a executer

Le thread UI et le worker communiquent entre eux

UN SIMPLE WEB WORKERDans votre code JavaScript:

var myWorker = new Worker('myWorker.js');

myWorker.postMessage('Hello Web Worker');

myWorker.onmessage = function(e){ console.log(e.data);};

Dans votre Web Worker:self.onmessage = function(e){ self.postMessage('You said:' + e.data);};

WEB WORKERS: CAS D'UTILISATIONS"Toute" longue operation

“Workers (as these background scripts are calledherein) are relatively heavy-weight, and are not

intended to be used in large numbers. Forexample, it would be inappropriate to launchone worker for each pixel of a four megapixel

image... Generally, workers are expected to belong-lived, have a high start-up performancecost, and a high per-instance memory cost...”

WEB WORKERS: LIMITATIONSLe Web Worker n'a pas acces

au DOMa l'object windowa l'object documenta l'object parent

DEMO

PLUS D'HTML5HTML5 est assez vaste

Geo localisationWeb SocketsWeb application offlineForms APIServer sent eventsEt bien plus :)

RESOURCESDive into HTML5: (Mark Pilgrim)HTML5 demos: HTML5 rocks: HTML5 please: Modernizr (feature detection): HTML5 test:

http://diveintohtml5.org/http://html5demos.com/

http://www.html5rocks.com/http://html5please.com

http://modernizr.com/http://html5test.com/