AMDEV: Graphismes avec html5 grâce à canvas et svg
Création d'une application html5 utilisant canvas, svg et les animations css3
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
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
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
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)
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
!
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
30. 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
31. 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
32. 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;
}
Davrous : Montrer la page loader.html et indiquer que l’on ne supporte que mp4 donc pas FF ni OperaMontrer post blog : http://blogs.msdn.com/b/davrous/archive/2012/01/06/amdev-slides-et-exemples-de-code-de-notre-session-svg-et-canvas.aspx avec utiliser librairie videojs.
