Upload
laurentt
View
135
Download
0
Embed Size (px)
DESCRIPTION
Introduction a HTML5. Les sujets abordés sont la video et l'audio, le localStorage et sessionStorage, le canvas et les web workers.
Citation preview
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/