Dans cette session, vous découvrirez les nouveaux standards supportés par Internet Explorer 10. Coté CSS3, on verra ainsi des choses comme grid layout, animations ou transitions. Coté nouvelles APIs, nous passerons un peu de temps sur la gestion du drag-n-drop, IndexedDB, la gestion de l'Application Cache ou bien encore la gestion du tactile. Pour découvrir tout cela, nous verrons à chaque fois de petits exemples d'illustration ainsi que des sites plus « complexes » les mettant en oeuvre. Présentation jouée pendant les MS Techdays 2013: http://www.microsoft.com/france/mstechdays/programmes/2013/fiche-session.aspx?ID=4a174b26-32b7-4d4c-8523-ad3a3228ef53 Retrouvez tous les exemples de code sur mon blog ici: http://blogs.msdn.com/b/davrous/archive/2012/11/03/demos-links-amp-articles-associated-to-htm5-amp-css3-latest-features-in-action-build-3-114.aspx

1. Donnez votre avis !
Depuis votre smartphone, sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toutes les heures !!!
Claviers, souris et jeux Microsoft…
Merci de nous aider à améliorer les TechDays
http://notes.mstechdays.fr

2. Les dernières avancées HTML5
& CSS3 en action !
David Rousset
Technical Evangelist
Microsoft France
@davrous
http://blogs.msdn.com/davrous
Code / Développement

3. Vous allez voir que…

4. Agenda
• Animations et autres nouveautés CSS3 25’
• Nouvelles APIs HTML5 25’
Agenda
• Support du Touch 10’

5. Animations et autres
nouveautés CSS3

6. Internet Explorer 10 : nouveaux layouts CSS et
SVG
CSS 2D Transforms CSS Media Queries
CSS 3D Transforms CSS Multi-column Layout
CSS Animations CSS Namespaces
CSS Backgrounds & CSS OM Views
Borders CSS Positioned Floats (Exclusions)
CSS Color CSS Selectors
CSS Transitions
CSS Flexbox
CSS Values and Units
CSS Fonts ICC Color Profiles
CSS Grid Alignment SVG Filter Effects
CSS Hyphenation SVG, standalone and in HTML
CSS Image Values
(Gradients)

7. CSS Grid Layout pour une planche de jeu

8. HTML & CSS de la planche de jeu
<style type="text/css">
#grid { display: -ms-grid;
-ms-grid-columns: auto 1fr;
-ms-grid-rows: auto 1fr auto;
}
#title { -ms-grid-column: 1; -ms-grid-row: 1 }
#score { -ms-grid-column: 1; -ms-grid-row: 3 }
#stats { -ms-grid-column: 1; -ms-grid-row: 2; -ms-grid-row-align: start }
#board { -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 2 }
#controls { -ms-grid-column: 2; -ms-grid-row: 2; -ms-grid-column-align: center } </style>
<div id="grid">
<div id="title">Game Title</div>
<div id="score">Score</div>
<div id="stats">Stats</div>
<div id="board">Board</div>
<div id="controls">Controls</div>
</div>

9. Démo: usage simple du
CSS Grid Layout

10. Mélangeons Grid & Media Queries
@media (orientation: landscape) {
#title { -ms-grid-column: 1; -ms-grid-row: 1 }
#score { -ms-grid-column: 1; -ms-grid-row: 3 }
#stats { -ms-grid-column: 1; -ms-grid-row: 2;
-ms-grid-row-align: start }
#board { -ms-grid-column: 2; -ms-grid-row: 1;
-ms-grid-row-span: 2 }
#controls { -ms-grid-column: 2; -ms-grid-row: 2;
-ms-grid-column-align: center }
}
@media (orientation: portrait) {
#title { -ms-grid-column: 1; -ms-grid-row: 1 }
#score { -ms-grid-column: 1; -ms-grid-row: 2 }
#stats { -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 2 }
#board { -ms-grid-column: 1; -ms-grid-row: 3; -ms-grid-column-span: 2 }
#controls {-ms-grid-column: 1; -ms-grid-row: 4; -ms-grid-column-span: 2;
-ms-grid-column-align: center }
}

11. Démo: CSS Grid Layout
et Media Queries

12. CSS3 pour les transformations et le flux
• CSS3 3D Transform
– Simplement une extension de CSS Transform en 3
dimensions
• CSS3 Multi-columns & Hyphenaton
– Reparti le texte en colonnes & gère la césure pour
améliorer la lisibilité
• CSS3 Positionated Floats
– Fait couler le contenu autour d’elements positionnés

13. Démo: CSS 3-D transforms,
columns & positionated
floats

14. Les animations avec CSS3
Spécification Transitions Animations
Délai Délai
Durée Durée
Caractéristiques Fonction sur le temps Fonction sur le temps
Propriétés à animer
transitionend animationstart
Évènements animationend
animationiteration
Changez la valeur d’une Keyframes: définit quelles
Comment ça propriété et le navigateur propriétés à animer, vers
marche ? s’occupe de tout. Mode “Fire & quelles valeurs précisément
Forget” dans l’échelle de temps.

15. Démo: CSS3 animations &
transforms

16. Idée d’intégration dans un jeu

17. Nouvelles APIs
HTML5

18. Internet Explorer 10 : nouvelles APIs
HTML5 HTML5 Application IndexedDB
Animation Frames
Data URI Cache Page Visibility
HTML5 async
DOM Element Traversal Pointer (Mouse, Pen,
HTML5 Canvas
DOM HTML and Touch) Events
HTML5 Drag and drop
DOM Level 3 Core Resource Timing
HTML5 Forms and
DOM Level 3 Events Validation Selectors API Level 2
DOM Style HTML5 Geolocation Timing callbacks
DOM Traversal and Range HTML5 History API
DOMParser and
Web Messaging
HTML5 Parser
XMLSerializer HTML5 Sandbox Web Sockets
ECMAScript 5 HTML5 Selection Web Workers
File Reader API HTML5 Semantic elements XHTML/XML
File Saving HTML5 Video and audio XMLHttpRequest (Level
FormData ICC Color Profiles 2)

19. HTML5 application cache
• Cache basé sur un manifeste pour des scenarios
déconnectés
• Choisissez les fichiers à cacher: HTML, CSS, JS
& vos ressources
• Permet de rendre disponible vos ressources au
delà du cache local HTTP
• Resynchronisez les fichiers via une MAJ du
manifeste

20. L’usage d’app cache via le fichier de
manifest
<html manifest=“test.appcache">
<head>
...
<link href="yourstyles.css“ rel="stylesheet">
<script src="yourcode.js"></script>
</head>
<body>
...
<video … src=“yourvideo.mp4” …>
</video>
...
</body> MIME Type: text/cache-manifest
</html>

21. File API
• Permet de lire les donnes fournies par l’utilisateur
• Nouveaux objets pour représenter les données:
– Blob, File, FileReader
• Nouvelles méthodes d’accès aux données:
• readAsArrayBuffer
• readAsBinaryString
• readAsText
• readAsDataURL

22. Lire du texte avec l’objet FileReader
function function
var new
// Obtain input element through
DOM. // Read file into memory as UTF-16
var "UTF-
16"
if // Handle progress, success, and
errors

23. Drag-n-drop & formulaires HTML5
• Drag-n-drop HTML5
– Vous pouvez rendre n’importe quel élément déplaçable
– Glissez/déposez des fichiers depuis le bureau vers le navigateur
• Formulaires HTML5
– Remplace les validations de formulaires JavaScript
– Utilisez les interfaces utilisateurs natives du navigateur ou
personnalisez-les

24. Démo: formulaires HTML5

25. Idée d’intégration dans un jeu

26. AuriculaireDB 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

27. Démo: utilisation
d’IndexedDB pour stocker
des images

28. Single page web application

29. WebWorkers
• L’approche JavaScript vers le multi-
threading
• Libère le UI thread en envoyant des
requêtes aux workers
• Communication avec les workers via
postMessage()
• Pas d’accès DOM

30. Démo: utilisation des
WebWorkers pour appliquer
des filtres aux images

31. Nouvelles APIs
HTML5

32. Pointer Events (touch, stylet, souris)
• Ecrivez votre code une seule fois pour le tactile, le
stylet et la souris
• Les sites écrits uniquement pour la souris fonctionne
automatiquement
• Patterns connus d’évènements DOM de la souris, avec
des extensions pour le touch

33. Pour faire de belles applications web
tactiles
• Évènements MSPointer pour cibler le tactile, la souris
et le stylet de manière unifiée
• Évènements MSGesture pour facilement reconnaitre
certaines manipulation (zoom, rotation, hold, etc.)
• Propriétés CSS -ms-touch-action pour indiquer
comment chaque zone doit se comporter face au touch
• Microsoft a soumis la spécification au W3C:
– http://www.w3.org/Submission/pointer-events/

34. Démo: utilisation des
Pointer Events

35. Démo: Modern.IE – un
super outil pour vous rendre
la vie plus heureuse

36. Pour aller plus loin…
• Pleins de démos ici: ie.microsoft.com/testdrive
 Hands On: Windows 8 HTML5 Platform:
ie.microsoft.com/testdrive/Graphics/hands-on-
css3/
 Certaines démos expliquées ici:
blogs.msdn.com/ie
• http://modern.ie avec 3 mois offerts à Browser Stack !
• Mon blog: blogs.msdn.com/davrous
 Vous retrouverez toutes les démos de cette

37. Pour aller plus loin sur HTML5 aux
Techdays…
Introduction au dev Win8 avec HTML5 et JavaScript (Mardi
13h)
Développer pour tous les navigateurs (Mardi 14h30)
Coding for Fun (Mardi 17h30)
Techniques d'accélération des pages Web (Mercredi 11h)
Concevoir des interfaces tactiles à destination de Windows
8 et du web (Mercredi 14h30)
HTML5 pour les développeurs WP8 (Mercredi 16h)
Tout sur les SPA (Mercredi 17h30)

38. Questions ?

39. Développeurs Pros de l’IT
http://aka.ms/generation-app Formez-vous en ligne www.microsoftvirtualacademy.com
http://aka.ms/evenements-
developpeurs Retrouvez nos évènements http://aka.ms/itcamps-france
Les accélérateurs
Faites-vous accompagner
Windows Azure, Windows Phone,
gratuitement
Windows 8
Essayer gratuitement nos http://aka.ms/telechargements
solutions IT
La Dev’Team sur MSDN Retrouver nos experts L’IT Team sur TechNet
http://aka.ms/devteam Microsoft http://aka.ms/itteam