Nouveautés html5 et css3 dans internet explorer 10

palais descongrèsParis7, 8 et 9février 2012

Nouveautés HTML5 et CSS3 dans Internet Explorer 10David Roussethttp://blogs.msdn.com/davrous@davrousMicrosoft France

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

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é

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.htmhttp://ie.microsoft.com/testdrive/Graphics/hands-on- css3/hands-on_3d-transforms.htm

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 Changez la valeur de la propriété et laissez le navigateur bosser pour effectuer la transition en douceur Evènements

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 propriétés travailler, valeurs et temps Evènements

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 de Windows 8

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  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

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  Augmente la disponibilité au-delà du cache HTTP local Resynchronisez les fichiers en mettant à jour le manifest

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 utilisant un attribut objet Pas de dépendances vis-à-vis de l’implémentation du navigateur

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.

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, etc. MSGestureStart, MSGestureChange, et MSGestureEnd.

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- multithreading-version-javascript.aspx

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

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 !

palais descongrèsParis7, 8 et 9février 2012

http://blogs.msdn.com	1057
http://www.5z5.com	23
http://www.avaedos.com	6
https://blogs.msdn.com	4
http://207.46.192.232	2
http://www.netvibes.com	2
http://mob.avaedos.com	2
http://www.acomputerportal.com	2
http://www.hanrss.com	1
http://translate.googleusercontent.com	1
http://webcache.googleusercontent.com	1
http://i1.blogs.msdn.com	1

Nouveautés html5 et css3 dans internet explorer 10

by davrous on Feb 20, 2012

Accessibility

Categories

Upload Details

Usage Rights

12 Embeds 1,102

Statistics

Nouveautés html5 et css3 dans internet explorer 10 Presentation Transcript