Techdays 2012

1. palais des
congrès
Paris
7, 8 et 9
février 2012

2. Nouveautés HTML5 et
CSS3 dans Internet
Explorer 10
David Rousset
http://blogs.msdn.com/davrous
@davrous
Microsoft France

3. Agenda
Les nouveautés pures CSS3
 CSS3 3DT, Transition, Animation, Text Shadow,
Multi-columns, Positioned Floats, Grid, Flexbox
Les nouveautés permettant de faire des « web apps »
 IndexedDB, Offline APIs, File APIs
Les nouveautés orientées interactions utilisateurs
 Drag’n’drop, Touch, HTML5 Forms
Les nouveautés orientées performance applicative
 WebSockets & WebWorkers

4. Agenda
Les nouveautés pures CSS3
 CSS3 3DT, Transition, Animation, Text
Shadow, Multi-columns, Positioned
Floats, Grid, Flexbox
Les nouveautés permettant de faire des « web apps »
 IndexedDB, Offline APIs, File APIs
Les nouveautés orientées interactions utilisateurs
 Drag’n’drop, Touch, HTML5 Forms
Les nouveautés orientées performance applicative
 WebSockets & WebWorkers

5. Avant de parler HTML5…
IE10 arrivera sur Windows 8 ET Windows 7
Sur Windows 8, IE10 aura 2 modes de
fonctionnement :
 Un mode « desktop » avec support des plug-ins
 Un mode « metro » sans support des plug-ins
Il y a un correcteur orthographique intégré

6. Les nouveautés pures CSS3

7. DEMO
CSS3 2D & 3D Transforms
CSS3 Animations

8. Effet de transition : fondu

9. Effet de transition : slide

10. Effet : « slide & grow »

11. Effet : « rails »

12. Démo site web CSS3 2DT & 3DT
http://ie.microsoft.com/testdrive/Graphics/hands-on-
css3/hands-on_2d-transforms.htm
http://ie.microsoft.com/testdrive/Graphics/hands-on-
css3/hands-on_3d-transforms.htm

13. Démo site web CSS3 Transitions
http://ie.microsoft.com/testdrive/Graphics/hands-on-
css3/hands-on_transitions.htm

14. CSS3 Transitions
Caractéristiques d’une transition
 Délai
 Durée
 Fonction « d’easing »
 Propriétés à animer
Changez la valeur de la propriété et laissez le
navigateur bosser pour effectuer la transition en
douceur
Evènements

15. Démo site web CSS3 Animations
http://ie.microsoft.com/testdrive/Graphics/hands-on-
css3/hands-on_animations.htm

16. CSS3 Animations
Caractéristiques d’une animation
 Délai
 Durée
 Fonction « d’easing »
Keyframes
 Sur quelles propriétés travailler, valeurs et temps
Evènements

17. Démo site web CSS3 Grid
http://ie.microsoft.com/testdrive/Graphics/hands-on-
css3/hands-on_animations.htm

18. CSS3 : Grid
Nouvelle spécification proposée par MS
Pour l’instant –ms-grid uniquement sous IE10
La base du design METRO de Windows 8

19. Démo CSS3 Multicolumns, Region & co
http://david.blob.core.windows.net/techdays2012/ie1
0/layout/layout.html

20. CSS3 : nouveautés pour le flux
CSS3 Multi-column & Hyphenation
 Permet de ventiler le texte sur plusieurs colonnes
 Utilisation des césures pour la lisibilité
CSS3 Positioned Floats
 Permet de faire couler le contenu autour d’éléments
CSS3 Regions
 Permet de faire déborder le contenu dynamiquement
d’un élément vers l’autre

21. Les nouveautés pour les « web apps »

22. HTML5 App Cache
Mise en cache basée sur un manifest
 Permet les scénarios déconnectés
 Augmente les performances
 Augmente la disponibilité au-delà du cache
HTTP local
Resynchronisez les fichiers en mettant à jour le
manifest

23. Exemple de manifest
MIME Type: text/cache-manifest
Fichier HTML Fichier Manifest

24. IndexedDB
Stockage, Indexation et recherche de données
Stockage de paires « clé-valeur » à la NoSQL
Indexation en utilisant un attribut objet
Pas de dépendances vis-à-vis de l’implémentation
du navigateur

25. File API
Permet de lire les données du disque local
 Après autorisation de l’utilisateur
De nouveaux objets pour représenter les données
 Blob, File, FileReader
Nouvelles méthodes pour accéder à la donnée
 readAsArrayBuffer, readAsText, readAsDataURL, etc.

26. 2 sessions pour aller plus
loin
Demain à 11h et à 17h30

27. Nouveautés interactions utilisateurs

28. Démo site web Drag’n’drop
http://ie.microsoft.com/testdrive/Graphics/MagneticP
oetry/Default.html

29. Démo site web Touch
http://ie.microsoft.com/testdrive/Graphics/TouchEffe
cts/

30. Touch events
Une seule façon de gérer le touch, la souris et/ou
un stylet
MSPointerDown, MSPointerMove, MSPointerUp,
etc.
MSGestureStart,
MSGestureChange, et
MSGestureEnd.

31. Démo site web HTML5 Forms
http://ie.microsoft.com/testdrive/HTML5/Forms/Defa
ult.html

32. SnapyX : un parfum de notre futur
proche

33. Nouveautés performances applicatives

34. Démo site web WebSockets
http://ie.microsoft.com/testdrive/HTML5/WebSockets
Flipbook/Default.html

35. WebSockets
Permet d’obtenir plus efficace que ça :
Polling
Polling interval
Long
Polling

36. Démo site web WebWorkers
http://blogs.msdn.com/b/davrous/archive/2011/07/08/
introduction-aux-web-workers-d-html5-le-
multithreading-version-javascript.aspx

37. WebWorkers
Le multi-threading version JavaScript
Permet de transférer une partie des traitements
vers des « threads »
Pas d’accès au DOM
Communication par messages

38. Conclusion
Le support d’HTML5 & cie dans IE10 est
particulièrement complet
HTML5 est prêt à créer des expériences identiques
aux applications dites « natives »
3 sessions sur le développement Metro Windows 8
 Où vous aurez de belles démos HTML5 !

39. palais des
congrès
Paris
7, 8 et 9
février 2012