1.
Création d'une application
HTML5 utilisant Canvas,
SVG et les animations CSS3
David CATUHE - @deltakosh
Microsoft – davca@microsoft.com
http://blogs.msdn.com/eternalcoding
David ROUSSET - @davrous
Microsoft – davrous@microsoft.com
http://blogs.msdn.com/davrous

2.
Du web de présentation
vers le web applicatif

3.
Quelques fonctionnalités clés
Accélération matérielle Audio/Vidéo
CSS3 grid, flexible box ECMAScript 5
Multi-columns Geolocation
Stockage client Websockets
Drag’n’drop Webworkers
Accès au système de
Hit testing / touch / gestures
fichiers
Mode offline Canvas, SVG, animations
Blobs …

4.
Démonstration
Présentation de l’application SnapX

5.
Audio/Vidéo

6.
Audio/Vidéo
Permet de lire un fichier audio ou vidéo sans plug-in

7.
Démonstration
Utilisation de la vidéo pour le Splash Screen

8.
CSS3 Grid &
Flexbox

9.
CSS3 Grid par l’exemple
Une planche de jeu

10.
HTML & CSS de la planche de
jeu type="text/css">
<style
#grid { display: grid;
grid-columns: auto 1fr;
grid-rows: auto 1fr auto;
}
#title { grid-column: 1; grid-row: 1 }
#score { grid-column: 1; grid-row: 3 }
#stats { grid-column: 1; grid-row: 2; grid-row-align: start }
#board { grid-column: 2; grid-row: 1; grid-row-span: 2 }
#controls { grid-column: 2; grid-row: 2; 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>

11.
Couplage Grid & Media Queries
<style type="text/css">
@media (orientation: landscape) {
#title { grid-column: 1; grid-row: 1 }
#score { grid-column: 1; grid-row: 3 }
#stats { grid-column: 1; grid-row: 2;
grid-row-align: start }
#board { grid-column: 2; grid-row: 1;
grid-row-span: 2 }
#controls { grid-column: 2; grid-row: 2;
grid-column-align: center }
}
@media (orientation: portrait) {
#title { grid-column: 1; grid-row: 1 }
#score { grid-column: 1; grid-row: 2 }
#stats { grid-column: 2; grid-row: 1; grid-row-span: 2 }
#board { grid-column: 1; grid-row: 3; grid-column-span: 2 }
#controls { grid-column: 1; grid-row: 4; grid-column-span: 2;
grid-column-align: center }
}

12.
CSS3 Flexbox
Approche courante : Floats
 Peu amener à des conséquences non souhaitées
Nouvelle approche : Flexbox!
 Les éléments remplissent harmonieusement l’espace
disponible
 Contrôle de l’empilage sur une unique dimension

13.
CSS3 Flexbox
<style type="text/css">
#flexbox
{
display: box;
box-orient: horizontal;
box-align: middle;
box-pack: justify;
}
<div id="flexbox">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
<div id="five">5</div>
</div>

14.
Le résultat en images
Jeu sur une tablette 1366x768 en portait

15.
Le résultat en images
Jeu sur une tablette 1366x768 en paysage

16.
Le résultat en images
Jeu sur une tablette 1024x768 en paysage

17.
Le résultat en images
Jeu sur l’équivalent d’un smartphone

18.
Démonstration
Démo ultra simple de CSS3 Grid
CSS3 Grid & Flexbox dans SnapX

19.
Canvas SVG

20.
Retour rapide aux bases
SVG pour Scalable Vector Graphics
 Format vectoriel décrit en XML
 Couplage à CSS
 Conserve le graphe d’objet en mémoire dans le
DOM
 Géré nativement par les derniers parseurs HTML5
<canvas>
 Bitmap dynamique adressée par des primitives JS
 On gère chacun des pixels
 Dessine dans une résolution donnée
 Mode « Fire & Forget »
 Unique nœud dans le DOM en mode boîte noire

21.
Comment faire son choix ?

22.
Démonstration
Quelques scénarios clés pour SVG en action
Documents complexes, Animation, Rapports & Accessibilité

23.
SVG : les scénarios clés
Documents vectoriels « complexes »
Graphiques / Rapports / Cartographie
 Soulage le serveur pour la production de graphismes haute qualité
 Interactivité possible et mise à jour des données via Ajax
Utilisation plus générique
 CSS ou images de fond
 Posters (excellent pour l’impression)
 Animation avec JavaScript
Jeux vidéo
Meilleur SEO & Accessibilité (couplage avec ARIA)

24.
Démonstration
Quelques scénarios clés pour Canvas en action
Raytracer, manipulation vidéo, rapports plus “complexes”

25.
Canvas : les scénarios clés
Manipulation des pixels
 RayTracing, traitement d’images
Affichage de données en temps réel
 Scènes complexes, animations mathématiques
(météo, etc.)
Remplacement de pixels
 A vous les effets d’écran bleu/vert à la StarWars
!

26.
SVG vs Canvas : choix simples

27.
Scénarios de recouvrement
Rapports et Graphiques interactifs
 SVG meilleur pour l’interaction, chargement
XML & l’impression
 Canvas peut être un choix plus rapide pour
certains navigateurs
Jeux Vidéo 2D
 Canvas propose une expérience connue aux
développeurs de jeux (APIs bas niveau, mode
immédiat comme XNA, etc.)
 SVG : beaucoup d’opérations DOM & coût
mémoire supérieur

28.
Démonstration
Utilisation de SVG Filters dans SnapX

29.
CSS3 Transitions & Animations
Transitions
 Animations fluides de propriétés CSS depuis
une valeur d’origine vers une valeur cible
 Peut être utilisées avec les pseudo-classes
comme :hover
Animations
 A voir comme une série de transitions définies
par des « keyframes »
 Permet des animations plus riches que les
CSS Transitions

30.
Définition d’une transition
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease;
transition-delay: 0s;
Puis appliquez la transition par une règle
CSS
Note : attention aux préfixes (-ms chez

31.
Définition d’une animation
@keyframes nom_de_l_animation {
from { propriété_à_animer: valeur_initiale; }
50% { propriété_à_animer: valeur_intermédiaire; }
to { propriété_à_animer: valeur_finale; }
}
#id_de_l_element_html {
animation-name: nom_de_l_animation;
animation-duration: nombre_de_secondes s;
animation-iteration-count: nombre | infinite;
}

32.
Démonstration
Transitions avec Fallback JS
Animations avec Fallback JS
Intégration dans SnapX pour une expérience Fast & Fluid

33.
<Questions/>

34.
palais des
congrès
Paris
7, 8 et 9
février 2012