Mise en bouche a html5
description
Transcript of Mise en bouche a html5
![Page 1: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/1.jpg)
MISE EN BOUCHE AHTML5
PETIT TOUR RAPIDES DES PRINCIPALES API (WEB-WORKERS,AUDIO/VIDEO, CANVAS)
Laurent Tonon / @laurent_tonon
![Page 2: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/2.jpg)
HTML5 C'EST QUOI?
![Page 3: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/3.jpg)
UN RAPIDE HISTORIQUEHTML tel qu'on le connaissait ne suffisait plus au besoins du
web...
XHTML pointait son nez mais n'apportait aucune solution...
![Page 4: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/4.jpg)
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
![Page 5: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/5.jpg)
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)
![Page 6: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/6.jpg)
UNE RAPIDE DEFINITIONSuccesseur de HTML 4.01
Dans le langage courant:
HTML 5 + CSS 3 + JavaScript
![Page 7: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/7.jpg)
Nouveaux elements et APIs (Audio, Video, Canvas, etc...)Nouvelles fonctionalites JavaScript (Web Workers, WebSockets, etc...)Nouvelles fonctionalites CSS3 (Transforms, web fonts, etc...)
![Page 8: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/8.jpg)
NOTRE EXEMPLEDes bookmarks video
![Page 9: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/9.jpg)
DEMO
![Page 10: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/10.jpg)
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
![Page 11: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/11.jpg)
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>
![Page 12: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/12.jpg)
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…
![Page 13: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/13.jpg)
DEMO
![Page 14: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/14.jpg)
RESOURCESVideo for everybody:
Video.js: MediaElement.js:
http://camendesign.com/code/video_for_everybodyhttp://videojs.com
http://mediaelementjs.com
![Page 15: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/15.jpg)
STOCKAGE (LOCAL)Cookies
Limitations
Taille (env 4Ko)Sont envoyes a chaque requete HTTP20 cookies par domainePas d'API de type "CRUD"
![Page 16: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/16.jpg)
LOCALSTORAGE ET SESSIONSTORAGE
![Page 17: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/17.jpg)
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();};
![Page 18: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/18.jpg)
DEMO
![Page 19: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/19.jpg)
CANVAS
![Page 20: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/20.jpg)
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/
![Page 21: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/21.jpg)
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');
![Page 22: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/22.jpg)
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
![Page 23: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/23.jpg)
DEMO
![Page 24: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/24.jpg)
WEB WORKERS
Web Workers a la rescousse
![Page 25: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/25.jpg)
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
![Page 26: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/26.jpg)
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);};
![Page 27: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/27.jpg)
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...”
![Page 28: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/28.jpg)
WEB WORKERS: LIMITATIONSLe Web Worker n'a pas acces
au DOMa l'object windowa l'object documenta l'object parent
![Page 29: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/29.jpg)
DEMO
![Page 30: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/30.jpg)
PLUS D'HTML5HTML5 est assez vaste
Geo localisationWeb SocketsWeb application offlineForms APIServer sent eventsEt bien plus :)
![Page 31: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/31.jpg)
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/
![Page 32: Mise en bouche a html5](https://reader030.fdocument.pub/reader030/viewer/2022013121/55514fb7b4c905f2288b543c/html5/thumbnails/32.jpg)