palais descongrèsParis7, 8 et 9février 2012
Nouveautés HTML5 et    CSS3 dans Internet       Explorer 10David Roussethttp://blogs.msdn.com/davrous@davrousMicrosoft Fra...
Agenda  Les nouveautés pures CSS3    CSS3 3DT, Transition, Animation, Text Shadow,     Multi-columns, Positioned Floats, ...
Agenda  Les nouveautés pures CSS3    CSS3 3DT, Transition, Animation, Text     Shadow, Multi-columns, Positioned     Floa...
Avant de parler HTML5…  IE10 arrivera sur Windows 8 ET Windows 7  Sur Windows 8, IE10 aura 2 modes de  fonctionnement :   ...
Les nouveautés pures CSS3
DEMOCSS3 2D & 3D TransformsCSS3 Animations
Effet de transition : fondu
Effet de transition : slide
Effet : « slide & grow »
Effet : « rails »
Démo site web CSS3 2DT & 3DThttp://ie.microsoft.com/testdrive/Graphics/hands-on-          css3/hands-on_2d-transforms.htmh...
Démo site web CSS3 Transitionshttp://ie.microsoft.com/testdrive/Graphics/hands-on-            css3/hands-on_transitions.htm
CSS3 Transitions  Caractéristiques d’une transition   Délai   Durée   Fonction « d’easing »   Propriétés à animer  Cha...
Démo site web CSS3 Animationshttp://ie.microsoft.com/testdrive/Graphics/hands-on-            css3/hands-on_animations.htm
CSS3 Animations  Caractéristiques d’une animation   Délai   Durée   Fonction « d’easing »  Keyframes    Sur quelles pr...
Démo site web CSS3 Gridhttp://ie.microsoft.com/testdrive/Graphics/hands-on-            css3/hands-on_animations.htm
CSS3 : Grid  Nouvelle spécification proposée par MS  Pour l’instant –ms-grid uniquement sous IE10  La base du design METRO...
Démo CSS3 Multicolumns, Region & cohttp://david.blob.core.windows.net/techdays2012/ie1                 0/layout/layout.html
CSS3 : nouveautés pour le flux  CSS3 Multi-column & Hyphenation   Permet de ventiler le texte sur plusieurs colonnes   U...
Les nouveautés pour les « web apps »
HTML5 App Cache  Mise en cache basée sur un manifest   Permet les scénarios déconnectés   Augmente les performances   A...
Exemple de manifest                      MIME Type: text/cache-manifest     Fichier HTML         Fichier Manifest
IndexedDB  Stockage, Indexation et recherche de données  Stockage de paires « clé-valeur » à la NoSQL  Indexation en utili...
File API  Permet de lire les données du disque local   Après autorisation de l’utilisateur  De nouveaux objets pour repré...
2 sessions pour aller plusloin     Demain à 11h et à 17h30
Nouveautés interactions utilisateurs
Démo site web Drag’n’drophttp://ie.microsoft.com/testdrive/Graphics/MagneticP                   oetry/Default.html
Démo site web Touchhttp://ie.microsoft.com/testdrive/Graphics/TouchEffe                         cts/
Touch events  Une seule façon de gérer le touch, la souris et/ou  un stylet  MSPointerDown, MSPointerMove, MSPointerUp,  e...
Démo site web HTML5 Formshttp://ie.microsoft.com/testdrive/HTML5/Forms/Defa                       ult.html
SnapyX : un parfum de notre futurproche
Nouveautés performances applicatives
Démo site web WebSocketshttp://ie.microsoft.com/testdrive/HTML5/WebSockets                Flipbook/Default.html
WebSockets     Permet d’obtenir plus efficace que ça :Polling          Polling intervalLongPolling
Démo site web WebWorkershttp://blogs.msdn.com/b/davrous/archive/2011/07/08/       introduction-aux-web-workers-d-html5-le-...
WebWorkers  Le multi-threading version JavaScript  Permet de transférer une partie des traitements  vers des « threads »  ...
Conclusion  Le support d’HTML5 & cie dans IE10 est  particulièrement complet  HTML5 est prêt à créer des expériences ident...
palais descongrèsParis7, 8 et 9février 2012
Upcoming SlideShare
Loading in …5
×

Nouveautés html5 et css3 dans internet explorer 10

4,129
-1

Published on

Techdays 2012

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

No Downloads
Views
Total Views
4,129
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
32
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Nouveautés html5 et css3 dans internet explorer 10

  1. 1. palais descongrèsParis7, 8 et 9février 2012
  2. 2. Nouveautés HTML5 et CSS3 dans Internet Explorer 10David Roussethttp://blogs.msdn.com/davrous@davrousMicrosoft France
  3. 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. 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. 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. 6. Les nouveautés pures CSS3
  7. 7. DEMOCSS3 2D & 3D TransformsCSS3 Animations
  8. 8. Effet de transition : fondu
  9. 9. Effet de transition : slide
  10. 10. Effet : « slide & grow »
  11. 11. Effet : « rails »
  12. 12. Démo site web CSS3 2DT & 3DThttp://ie.microsoft.com/testdrive/Graphics/hands-on- css3/hands-on_2d-transforms.htmhttp://ie.microsoft.com/testdrive/Graphics/hands-on- css3/hands-on_3d-transforms.htm
  13. 13. Démo site web CSS3 Transitionshttp://ie.microsoft.com/testdrive/Graphics/hands-on- css3/hands-on_transitions.htm
  14. 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. 15. Démo site web CSS3 Animationshttp://ie.microsoft.com/testdrive/Graphics/hands-on- css3/hands-on_animations.htm
  16. 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. 17. Démo site web CSS3 Gridhttp://ie.microsoft.com/testdrive/Graphics/hands-on- css3/hands-on_animations.htm
  18. 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. 19. Démo CSS3 Multicolumns, Region & cohttp://david.blob.core.windows.net/techdays2012/ie1 0/layout/layout.html
  20. 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. 21. Les nouveautés pour les « web apps »
  22. 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. 23. Exemple de manifest MIME Type: text/cache-manifest Fichier HTML Fichier Manifest
  24. 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. 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. 26. 2 sessions pour aller plusloin Demain à 11h et à 17h30
  27. 27. Nouveautés interactions utilisateurs
  28. 28. Démo site web Drag’n’drophttp://ie.microsoft.com/testdrive/Graphics/MagneticP oetry/Default.html
  29. 29. Démo site web Touchhttp://ie.microsoft.com/testdrive/Graphics/TouchEffe cts/
  30. 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. 31. Démo site web HTML5 Formshttp://ie.microsoft.com/testdrive/HTML5/Forms/Defa ult.html
  32. 32. SnapyX : un parfum de notre futurproche
  33. 33. Nouveautés performances applicatives
  34. 34. Démo site web WebSocketshttp://ie.microsoft.com/testdrive/HTML5/WebSockets Flipbook/Default.html
  35. 35. WebSockets Permet d’obtenir plus efficace que ça :Polling Polling intervalLongPolling
  36. 36. Démo site web WebWorkershttp://blogs.msdn.com/b/davrous/archive/2011/07/08/ introduction-aux-web-workers-d-html5-le- multithreading-version-javascript.aspx
  37. 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. 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. 39. palais descongrèsParis7, 8 et 9février 2012
  1. A particular slide catching your eye?

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

×