Création d'une application HTML5 utilisant Canvas, SVG et les animations CSS3

David CATUHE - @deltakoshMicrosoft – davca@microsoft.comhttp://blogs.msdn.com/eternalcoding

David ROUSSET - @davrousMicrosoft – davrous@microsoft.comhttp://blogs.msdn.com/davrous

Du web de présentation vers le

web applicatif

Quelques fonctionnalités clés

Accélération matérielle

CSS3 grid, flexible box

Multi-columns

Stockage client

Audio/Vidéo

Accès au système de fichiers

Blobs

Mode offline

Drag’n’drop

ECMAScript 5

Geolocation

Websockets

Webworkers

Hit testing / touch / gestures

Canvas, SVG, animations

…

Démonstration

Présentation de l’application SnapX

Audio/Vidéo

Permet de lire un fichier audio ou vidéo sans plug-in

Audio/Vidéo

Démonstration

Utilisation de la vidéo pour le Splash Screen

CSS3 Grid &

Flexbox

Une planche de jeu

CSS3 Grid par l’exemple

HTML & CSS de la 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: 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>

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

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

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>

Le résultat en images

Jeu sur une tablette 1366x768 en portait

Le résultat en images

Jeu sur une tablette 1366x768 en paysage

Le résultat en images

Jeu sur une tablette 1024x768 en paysage

Le résultat en images

Jeu sur l’équivalent d’un smartphone

Démonstration

Démo ultra simple de CSS3 GridCSS3 Grid & Flexbox dans SnapX

Canvas SVG

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

Retour rapide aux bases

Comment faire son choix ?

Démonstration

Quelques scénarios clés pour SVG en action

Documents complexes, Animation, Rapports & Accessibilité

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)

SVG : les scénarios clés

Démonstration

Quelques scénarios clés pour Canvas en action

Raytracer, manipulation vidéo, rapports plus “complexes”

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

!

Jeux vidéo

Canvas : les scénarios clés

SVG vs Canvas : choix simples

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

Scénarios de recouvrement

Démonstration

Utilisation de SVG Filters dans SnapX

CSS3 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

CSS3 Transitions & Animations

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

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

Définition d’une animation

Démonstration

Transitions avec Fallback JSAnimations avec Fallback JSIntégration dans SnapX pour une expérience Fast & Fluid

<Questions/>

palais des congrès Paris

7, 8 et 9 février 2012