Your SlideShare is downloading. ×
0
MISE EN BOUCHE A
HTML5
PETIT TOUR RAPIDES DES PRINCIPALES API (WEB-WORKERS,
AUDIO/VIDEO, CANVAS)
LaurentTonon/@laurent_ton...
HTML5 C'EST QUOI?
UN RAPIDE HISTORIQUE
HTML telqu'on le connaissaitne suffisaitplus au besoins du
web...
XHTML pointaitson nez mais n'apport...
En 2004, Des professionels du web, le WHATWG (Web
HypertextApplication WorkingGroup) commence atravailler
sur HTML5
Etsont...
LES ACTEURS MAJEURS
WHATWG(groupes de personnes travaillantpour Apple,
Mozilla, Google etOpera): Developpementetcollaborat...
UNE RAPIDE DEFINITION
Successeur de HTML 4.01
Dans le langage courant:
HTML 5 + CSS3 + JavaScript
Nouveaux elements etAPIs (Audio, Video, Canvas, etc...)
Nouvelles fonctionalites JavaScript(Web Workers, Web
Sockets, etc....
NOTRE EXEMPLE
Des bookmarks video
DEMO
AUDIO, VIDEO (DISCO)
Nous avons les plugins (Flash parmile plus connu), mais ces
derniers peuvent:
Etre indisponible sur l...
AUDIO ET VIDEO (TAGS)
Supportnatif avec les tags <audio> et<video>
Simplement
<videosrc="myvideo.webm"width="320"height="2...
AUDIO ET VIDEO (API)
Pimp myplayer!
Attributs: autoplay, loop, mute, preload, control, etc…
Events: play, pause, seeking, ...
DEMO
RESOURCES
Video for everybody:
Video.js:
MediaElement.js:
http://camendesign.com/code/video_for_everybody
http://videojs.c...
STOCKAGE (LOCAL)
Cookies
Limitations
Taille (env4Ko)
Sontenvoyes achaquerequete HTTP
20 cookies par domaine
Pas d'API de t...
LOCALSTORAGE ET SESSIONSTORAGE
Partagentlameme API
interfaceStorage{
readonlyattributeunsignedlonglength;
getterDOMStringkey(inunsignedlongindex);
getter...
DEMO
CANVAS
PLEIN LES YEUX
Des applications de dessin:
Une magnifique demo base sur Twitter API:
Un globe avec WebGL:
Gaming
ImpactJS:...
RAPIDE PRESENTATION DE L'API
Toutcommence ici... dans le code HTML
<canvaswidth="500px"height="300px"id="myCanvas">
<!--Fa...
POSSIBILITES DU CANVAS
Donnez libre cours avotre imagination ;)
Lignes, Rectangles, Cercles
Courbes complexes (courbes de ...
DEMO
WEB WORKERS
Web Workers alarescousse
WEB WORKERS: DEFINITION
Un web worker c'est:
Un thread quis'execute en parallele du main thread (UI)
Un fichier contenantl...
UN SIMPLE WEB WORKER
Dans votre code JavaScript:
varmyWorker=newWorker('myWorker.js');
myWorker.postMessage('HelloWebWorke...
WEB WORKERS: CAS D'UTILISATIONS
"Toute"longue operation
“Workers (as these background scripts are called
herein) are relat...
WEB WORKERS: LIMITATIONS
Le Web Worker n'apas acces
au DOM
al'objectwindow
al'objectdocument
al'objectparent
DEMO
PLUS D'HTML5
HTML5 estassez vaste
Geo localisation
Web Sockets
Web application offline
Forms API
Server sentevents
Etbien ...
RESOURCES
Dive into HTML5: (Mark Pilgrim)
HTML5 demos:
HTML5 rocks:
HTML5 please:
Modernizr (feature detection):
HTML5 tes...
Mise en bouche a html5
Upcoming SlideShare
Loading in...5
×

Mise en bouche a html5

41

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
41
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Mise en bouche a html5"

  1. 1. MISE EN BOUCHE A HTML5 PETIT TOUR RAPIDES DES PRINCIPALES API (WEB-WORKERS, AUDIO/VIDEO, CANVAS) LaurentTonon/@laurent_tonon
  2. 2. HTML5 C'EST QUOI?
  3. 3. UN RAPIDE HISTORIQUE HTML telqu'on le connaissaitne suffisaitplus au besoins du web... XHTML pointaitson nez mais n'apportaitaucune solution...
  4. 4. En 2004, Des professionels du web, le WHATWG (Web HypertextApplication WorkingGroup) commence atravailler sur HTML5 Etsontrejointpar le W3C en 2006 2008: Premier "workingdraft"pour HTML5
  5. 5. LES ACTEURS MAJEURS WHATWG(groupes de personnes travaillantpour Apple, Mozilla, Google etOpera): Developpementetcollaboration avec les navigateurs W3C etplus particulierementle HTML workinggroup: Specification HTML5 IETF(InternetEngineeringTask Force): Protocoles (Web sockets par exemple)
  6. 6. UNE RAPIDE DEFINITION Successeur de HTML 4.01 Dans le langage courant: HTML 5 + CSS3 + JavaScript
  7. 7. Nouveaux elements etAPIs (Audio, Video, Canvas, etc...) Nouvelles fonctionalites JavaScript(Web Workers, Web Sockets, etc...) Nouvelles fonctionalites CSS3 (Transforms, web fonts, etc...)
  8. 8. NOTRE EXEMPLE Des bookmarks video
  9. 9. DEMO
  10. 10. AUDIO, VIDEO (DISCO) Nous avons les plugins (Flash parmile plus connu), mais ces derniers peuvent: Etre indisponible sur l'OS cible Etre impossible ainstaller dans un contexte d'entreprise Presenter des problemes d'affichage
  11. 11. AUDIO ET VIDEO (TAGS) Supportnatif avec les tags <audio> et<video> Simplement <videosrc="myvideo.webm"width="320"height="240"controls=""></video> Ou bien <videowidth="640"height="360"controls=""> <sourcesrc="myvideo.MP4"type="video/mp4"> <sourcesrc="myvideo.OGV"type="video/ogg"> <objectwidth="640"height="360"type="application/x-shockwave-flash"data="__FLASH__ <param...=""> <param...=""> <param...=""> </object> </video>
  12. 12. AUDIO ET VIDEO (API) Pimp myplayer! Attributs: autoplay, loop, mute, preload, control, etc… Events: play, pause, seeking, timeupdate, ended, etc… Methods: play(), pause(), load(), etc…
  13. 13. DEMO
  14. 14. RESOURCES Video for everybody: Video.js: MediaElement.js: http://camendesign.com/code/video_for_everybody http://videojs.com http://mediaelementjs.com
  15. 15. STOCKAGE (LOCAL) Cookies Limitations Taille (env4Ko) Sontenvoyes achaquerequete HTTP 20 cookies par domaine Pas d'API de type "CRUD"
  16. 16. LOCALSTORAGE ET SESSIONSTORAGE
  17. 17. Partagentlameme API interfaceStorage{ readonlyattributeunsignedlonglength; getterDOMStringkey(inunsignedlongindex); getteranygetItem(inDOMStringkey); settercreatorvoidsetItem(inDOMStringkey,inanydata); deletervoidremoveItem(inDOMStringkey); voidclear(); };
  18. 18. DEMO
  19. 19. CANVAS
  20. 20. PLEIN LES YEUX Des applications de dessin: Une magnifique demo base sur Twitter API: Un globe avec WebGL: Gaming ImpactJS: 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/
  21. 21. RAPIDE PRESENTATION DE L'API Toutcommence ici... dans le code HTML <canvaswidth="500px"height="300px"id="myCanvas"> <!--Fallbackgoeshereifcanvasisnotsupported--> </canvas> Interagir avec le canvas varcanvas=document.getElementById('myCanvas'); varctx=canvas.getContext('2d');
  22. 22. POSSIBILITES DU CANVAS Donnez libre cours avotre imagination ;) Lignes, Rectangles, Cercles Courbes complexes (courbes de Bezier par exemple) Transformation (translation, rotation, echelonnage) Manipulation de pixel Image cropping Convertion en image
  23. 23. DEMO
  24. 24. WEB WORKERS Web Workers alarescousse
  25. 25. WEB WORKERS: DEFINITION Un web worker c'est: Un thread quis'execute en parallele du main thread (UI) Un fichier contenantles intructions JavaScriptaexecuter Le thread UI etle worker communiquententre eux
  26. 26. UN SIMPLE WEB WORKER Dans votre code JavaScript: varmyWorker=newWorker('myWorker.js'); myWorker.postMessage('HelloWebWorker'); myWorker.onmessage=function(e){ console.log(e.data); }; Dans votre Web Worker: self.onmessage=function(e){ self.postMessage('Yousaid:'+e.data); };
  27. 27. WEB WORKERS: CAS D'UTILISATIONS "Toute"longue operation “Workers (as these background scripts are called herein) are relatively heavy-weight, and are not intended to be used in large numbers. For example, itwould be inappropriate to launch one worker for each pixel of afour megapixel image... Generally, workers are expected to be long-lived, have ahigh start-up performance cost, and ahigh per-instance memory cost...”
  28. 28. WEB WORKERS: LIMITATIONS Le Web Worker n'apas acces au DOM al'objectwindow al'objectdocument al'objectparent
  29. 29. DEMO
  30. 30. PLUS D'HTML5 HTML5 estassez vaste Geo localisation Web Sockets Web application offline Forms API Server sentevents Etbien plus :)
  31. 31. RESOURCES Dive 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×