Embed Size (px)
DESCRIPTION
Techdays 2012
Citation preview
palais des congrès Paris
7, 8 et 9 février 2012
David Roussethttp://blogs.msdn.com/davrous @davrousMicrosoft France
Nouveautés HTML5 et CSS3 dans Internet
Explorer 10
Les nouveautés pures CSS3 CSS3 3DT, Transition, Animation, Text Shadow,
Multi-columns, Positioned Floats, Grid, FlexboxLes 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
Agenda
Les nouveautés pures CSS3 CSS3 3DT, Transition, Animation, Text Shadow,
Multi-columns, Positioned Floats, Grid, FlexboxLes 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
Agenda
IE10 arrivera sur Windows 8 ET Windows 7
Sur Windows 8, IE10 aura 2 modes de fonctionnement :Un mode « desktop » avec support des plug-
insUn mode « metro » sans support des plug-ins
Il y a un correcteur orthographique intégré
Avant de parler HTML5…
Les nouveautés pures CSS3
DEMO
CSS3 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.htm
http://
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
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
CSS3 Transitions
Démo site web CSS3 Animationshttp://
ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_animations.htm
Caractéristiques d’une animation Délai Durée Fonction « d’easing »
Keyframes Sur quelles propriétés travailler, valeurs et temps
Evènements
CSS3 Animations
Démo site web CSS3 Gridhttp://
ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_animations.htm
Nouvelle spécification proposée par MS
Pour l’instant –ms-grid uniquement sous IE10
La base du design METRO de Windows 8
CSS3 : Grid
Démo CSS3 Multicolumns, Region & co http://
david.blob.core.windows.net/techdays2012/ie10/layout/layout.html
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
CSS3 : nouveautés pour le flux
Les nouveautés pour les « web apps »
Mise en cache basée sur un manifestPermet les scénarios déconnectésAugmente les performancesAugmente la disponibilité au-delà du
cache HTTP local
Resynchronisez les fichiers en mettant à jour le manifest
HTML5 App Cache
Exemple de manifest<html manifest=“test.appcache"> <head>…</head> <body>
<img src=“logo.png” …></img>…<video … src=“fish.mp4”
…></video>…<img src=“kid.png” … />
</body></html> Fichier HTML
Cache Manifest#7/20/2011 v3Cache:logo.png
Network:fish.mp4
Fallback:kid.png noImg.png
Fichier Manifest
MIME Type: text/cache-manifest
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
IndexedDB
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.
File API
2 sessions pour aller plus loin
Demain à 11h et à 17h30
Nouveautés interactions utilisateurs
Démo site web Drag’n’drophttp://
ie.microsoft.com/testdrive/Graphics/MagneticPoetry/Default.html
Démo site web Touchhttp://ie.microsoft.com/testdrive/Graphics/TouchEffects
/
Une seule façon de gérer le touch, la souris et/ou un stylet
MSPointerDown, MSPointerMove, MSPointerUp, etc.
MSGestureStart, MSGestureChange, et MSGestureEnd.
Touch events
Démo site web HTML5 Formshttp://
ie.microsoft.com/testdrive/HTML5/Forms/Default.html
SnapyX : un parfum de notre futur proche
Nouveautés performances applicatives
Démo site web WebSocketshttp://
ie.microsoft.com/testdrive/HTML5/WebSocketsFlipbook/Default.html
Permet d’obtenir plus efficace que ça :
WebSockets
Polling
Serveur
Client
LongPolling
Serveur
Client
Polling interval
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
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
WebWorkers
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 8Où vous aurez de belles démos HTML5 !
Conclusion
palais des congrès Paris
7, 8 et 9 février 2012
