création d'une application html5 utilisant canvas, svg et les animations css3
DESCRIPTION
Techdays 2012TRANSCRIPT
Création d'une application HTML5 utilisant Canvas, SVG et les animations CSS3
David CATUHE - @deltakoshMicrosoft – [email protected]://blogs.msdn.com/eternalcoding
David ROUSSET - @davrousMicrosoft – [email protected]://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