3. UN RAPIDE HISTORIQUE
HTML telqu'on le connaissaitne suffisaitplus au besoins du
web...
XHTML pointaitson nez mais n'apportaitaucune solution...
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. 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)
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. 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>
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. 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. 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
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. 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. 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. WEB WORKERS: LIMITATIONS
Le Web Worker n'apas acces
au DOM
al'objectwindow
al'objectdocument
al'objectparent
