création d'une application html5 utilisant canvas, svg et les animations css3
DESCRIPTION
Techdays 2012TRANSCRIPT
![Page 1: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/1.jpg)
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
![Page 2: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/2.jpg)
Du web de présentation vers le
web applicatif
![Page 3: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/3.jpg)
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
…
![Page 4: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/4.jpg)
Démonstration
Présentation de l’application SnapX
![Page 5: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/5.jpg)
Audio/Vidéo
![Page 6: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/6.jpg)
Permet de lire un fichier audio ou vidéo sans plug-in
Audio/Vidéo
![Page 7: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/7.jpg)
Démonstration
Utilisation de la vidéo pour le Splash Screen
![Page 8: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/8.jpg)
CSS3 Grid &
Flexbox
![Page 9: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/9.jpg)
Une planche de jeu
CSS3 Grid par l’exemple
![Page 10: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/10.jpg)
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>
![Page 11: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/11.jpg)
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 } }
![Page 12: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/12.jpg)
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
![Page 13: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/13.jpg)
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>
![Page 14: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/14.jpg)
Le résultat en images
Jeu sur une tablette 1366x768 en portait
![Page 15: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/15.jpg)
Le résultat en images
Jeu sur une tablette 1366x768 en paysage
![Page 16: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/16.jpg)
Le résultat en images
Jeu sur une tablette 1024x768 en paysage
![Page 17: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/17.jpg)
Le résultat en images
Jeu sur l’équivalent d’un smartphone
![Page 18: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/18.jpg)
Démonstration
Démo ultra simple de CSS3 GridCSS3 Grid & Flexbox dans SnapX
![Page 19: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/19.jpg)
Canvas SVG
![Page 20: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/20.jpg)
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
![Page 21: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/21.jpg)
Comment faire son choix ?
![Page 22: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/22.jpg)
Démonstration
Quelques scénarios clés pour SVG en action
Documents complexes, Animation, Rapports & Accessibilité
![Page 23: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/23.jpg)
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
![Page 24: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/24.jpg)
Démonstration
Quelques scénarios clés pour Canvas en action
Raytracer, manipulation vidéo, rapports plus “complexes”
![Page 25: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/25.jpg)
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
![Page 26: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/26.jpg)
SVG vs Canvas : choix simples
![Page 27: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/27.jpg)
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
![Page 28: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/28.jpg)
Démonstration
Utilisation de SVG Filters dans SnapX
![Page 29: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/29.jpg)
CSS3 Animations
![Page 30: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/30.jpg)
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
![Page 31: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/31.jpg)
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)
![Page 32: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/32.jpg)
@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
![Page 33: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/33.jpg)
Démonstration
Transitions avec Fallback JSAnimations avec Fallback JSIntégration dans SnapX pour une expérience Fast & Fluid
![Page 34: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/34.jpg)
<Questions/>
![Page 35: Création d'une application html5 utilisant canvas, svg et les animations css3](https://reader033.vdocuments.mx/reader033/viewer/2022061114/545ca033b1af9f460a8b47b5/html5/thumbnails/35.jpg)
palais des congrès Paris
7, 8 et 9 février 2012