les dernières avancées html5 & css3 en action !
TRANSCRIPT
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 Rousset
Technical Evangelist
Microsoft France
Code / Développement
@davrous
http://blogs.msdn.com/davrous
Vous allez voir que…
• 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 Transforms
CSS 3D Transforms
CSS Animations
CSS Backgrounds & Borders
CSS Color
CSS Flexbox
CSS Fonts
CSS Grid Alignment
CSS Hyphenation
CSS Image Values (Gradients)
CSS Media Queries
CSS Multi-column Layout
CSS Namespaces
CSS OM Views
CSS Positioned Floats (Exclusions)
CSS Selectors
CSS Transitions
CSS Values and Units
ICC Color Profiles
SVG Filter Effects
SVG, 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 CSS3
Spécification Transitions Animations
Caractéristiques
Délai
Durée
Fonction sur le temps
Propriétés à animer
Délai
Durée
Fonction sur le temps
Évènementstransitionend animationstart
animationend
animationiteration
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 Frames
Data URI
DOM Element Traversal
DOM HTML
DOM Level 3 Core
DOM Level 3 Events
DOM Style
DOM Traversal and Range
DOMParser and
XMLSerializer
ECMAScript 5
File Reader API
File Saving
FormData
HTML5 Application Cache
HTML5 async
HTML5 Canvas
HTML5 Drag and drop
HTML5 Forms and Validation
HTML5 Geolocation
HTML5 History API
HTML5 Parser
HTML5 Sandbox
HTML5 Selection
HTML5 Semantic elements
HTML5 Video and audio
ICC Color Profiles
IndexedDB
Page Visibility
Pointer (Mouse, Pen, and Touch) Events
Resource Timing
Selectors API Level 2
Timing callbacks
Web Messaging
Web Sockets
Web Workers
XHTML/XML
XMLHttpRequest (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
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
// Obtain input element through DOM.
var
if
function
var new
// Read file into memory as UTF-16
"UTF-16"
// Handle progress, success, and errors
• 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éveloppeurs
www.microsoftvirtualacademy.comhttp://aka.ms/generation-app
http://aka.ms/evenements-
developpeurshttp://aka.ms/itcamps-france
Les accélérateurs
Windows Azure, Windows Phone,
Windows 8
http://aka.ms/telechargements
La Dev’Team sur MSDN
http://aka.ms/devteam
L’IT Team sur TechNet
http://aka.ms/itteam