Les dernières avancées html5 & css3 en action !

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

Les dernières avancées HTML5 & CSS3 en action !

David RoussetTechnical Evangelist

Microsoft France

Code / Développement

@davroushttp://blogs.msdn.com/davrous

Vous allez voir que…

• Microsoft est vraiment engagé dans les standards

• IE10 fournit une expérience immersive• IE10 fonctionne très bien au tactile

• Bonus : les mêmes technologies seront utilisées pour construire des applications Windows 8

• Animations et autres nouveautés CSS3 25’

• Nouvelles APIs HTML5 25’

• Support du Touch 10’

Agenda

Agenda

Animations et autres nouveautés CSS3

Internet Explorer 10 : nouveaux layouts CSS et SVGCSS 2D TransformsCSS 3D TransformsCSS AnimationsCSS Backgrounds & BordersCSS ColorCSS FlexboxCSS FontsCSS Grid AlignmentCSS HyphenationCSS Image Values (Gradients)

CSS Media QueriesCSS Multi-column LayoutCSS NamespacesCSS OM ViewsCSS Positioned Floats (Exclusions)CSS SelectorsCSS TransitionsCSS Values and UnitsICC Color ProfilesSVG Filter EffectsSVG, standalone and in HTML

CSS Grid Layout pour une planche de jeu

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

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

HTML & CSS de la planche de jeu

Démo: usage simple du CSS Grid Layout

@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 } }

Mélangeons Grid & Media Queries

Démo: CSS Grid Layout et Media Queries

• 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

CSS3 pour les transformations et le flux

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

Les animations avec CSS3Spécification Transitions Animations

Caractéristiques DélaiDuréeFonction sur le tempsPropriétés à animer

DélaiDuréeFonction sur le temps

Évènementstransitionend animationstart

animationendanimationiteration

Comment ça marche ?

Changez la valeur d’une propriété et le navigateur s’occupe de tout. Mode “Fire & Forget”

Keyframes: définit quelles propriétés à animer, vers quelles valeurs précisément dans l’échelle de temps.

Démo: CSS3 animations & transforms

Idée d’intégration dans un jeu

Nouvelles APIs HTML5

Internet Explorer 10 : nouvelles APIs HTML5 Animation FramesData URIDOM Element TraversalDOM HTMLDOM Level 3 CoreDOM Level 3 EventsDOM StyleDOM Traversal and RangeDOMParser and XMLSerializerECMAScript 5File Reader APIFile SavingFormData

HTML5 Application CacheHTML5 asyncHTML5 CanvasHTML5 Drag and dropHTML5 Forms and ValidationHTML5 GeolocationHTML5 History APIHTML5 ParserHTML5 SandboxHTML5 SelectionHTML5 Semantic elementsHTML5 Video and audioICC Color Profiles

IndexedDBPage VisibilityPointer (Mouse, Pen, and Touch) EventsResource TimingSelectors API Level 2Timing callbacksWeb MessagingWeb SocketsWeb WorkersXHTML/XMLXMLHttpRequest (Level 2)

• 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

HTML5 application cache

<html manifest=“test.appcache">

<head>

...

<link href="yourstyles.css“ rel="stylesheet"> <script src="yourcode.js"></script> </head> <body>

...

<video … src=“yourvideo.mp4” …>

</video>

...

</body>

</html>

L’usage d’app cache via le fichier de manifest

Cache Manifest#12/02/2013 v10Cache:index.htmlyourstyles.cssyourcode.js...yourvideo.mp4

Network:*

Fichier HTML Fichier de manifest

MIME Type: text/cache-manifest

• 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

File API

Lire du texte avec l’objet FileReaderfunction startRead() {

// Obtain input element through DOM. var file = document.getElementById('file').files[0];

if (file) { getAsText(file); }}

function getAsText(readFile) { var reader = new FileReader();

// Read file into memory as UTF-16 reader.readAsText(readFile, "UTF-16");

// Handle progress, success, and errors reader.onprogress = updateProgress; reader.onload = loaded; reader.onerror = errorHandler;}

• 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

Drag-n-drop & formulaires HTML5

Démo: formulaires HTML5

Idée d’intégration dans un jeu

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

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

Single page web application

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

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

Nouvelles APIs HTML5

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

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/

Démo: utilisation des Pointer Events

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

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 session

et des liens vers des articles

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)

Questions ?

Formez-vous en ligne

Retrouvez nos évènements

Faites-vous accompagner gratuitement

Essayer gratuitement nos solutions IT

Retrouver nos experts Microsoft

Pros de l’ITDéveloppeurswww.microsoftvirtualacademy.com

http://aka.ms/generation-app

http://aka.ms/evenements-developpeurs

http://aka.ms/itcamps-france

Les accélérateursWindows Azure, Windows Phone,

Windows 8

http://aka.ms/telechargements

La Dev’Team sur MSDNhttp://aka.ms/devteam

L’IT Team sur TechNethttp://aka.ms/itteam