Création dune applicationHTML5 utilisant Canvas,SVG et les animations CSS3David CATUHE - @deltakoshMicrosoft – davca@micro...
Du web de présentation vers le web applicatif
Quelques fonctionnalités clés   Accélération matérielle   Audio/Vidéo   CSS3 grid, flexible box   ECMAScript 5   Multi-col...
DémonstrationPrésentation de l’application SnapX
Audio/Vidéo
Audio/Vidéo  Permet de lire un fichier audio ou vidéo sans plug-in
DémonstrationUtilisation de la vidéo pour le Splash Screen
CSS3 Grid   &Flexbox
CSS3 Grid par l’exemple  Une planche de jeu
HTML & CSS de la planche dejeu type="text/css">  <style  #grid { display: grid;        grid-columns: auto 1fr;        grid...
Couplage Grid & Media Queries <style type="text/css">  @media (orientation: landscape) {     #title    { grid-column: 1; g...
CSS3 Flexbox Approche courante : Floats   Peu amener à des conséquences non souhaitées Nouvelle approche : Flexbox!   Le...
CSS3 Flexbox <style type="text/css">   #flexbox    {        display: box;        box-orient: horizontal;        box-align:...
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émonstrationDémo ultra simple de CSS3 GridCSS3 Grid & Flexbox dans SnapX
Canvas   SVG
Retour rapide aux bases  SVG pour Scalable Vector Graphics      Format vectoriel décrit en XML      Couplage à CSS     ...
Comment faire son choix ?
DémonstrationQuelques scénarios clés pour SVG en actionDocuments complexes, Animation, Rapports & Accessibilité
SVG : les scénarios clés  Documents vectoriels « complexes »  Graphiques / Rapports / Cartographie      Soulage le serveu...
DémonstrationQuelques scénarios clés pour Canvas en actionRaytracer, manipulation vidéo, rapports plus “complexes”
Canvas : les scénarios clés  Manipulation des pixels      RayTracing, traitement d’images  Affichage de données en temps ...
SVG vs Canvas : choix simples
Scénarios de recouvrement  Rapports et Graphiques interactifs     SVG meilleur pour l’interaction, chargement      XML & ...
DémonstrationUtilisation de SVG Filters dans SnapX
CSS3 Transitions & Animations  Transitions      Animations fluides de propriétés CSS depuis       une valeur d’origine ve...
Définition d’une transition transition-property: all; transition-duration: 0.5s; transition-timing-function: ease; transit...
Définition d’une animation @keyframes nom_de_l_animation {   from { propriété_à_animer: valeur_initiale; }   50% { proprié...
DémonstrationTransitions avec Fallback JSAnimations avec Fallback JSIntégration dans SnapX pour une expérience Fast & Fluid
<Questions/>
palais descongrèsParis7, 8 et 9février 2012
Création d'une application html5 utilisant canvas, svg et les animations css3
Prochain SlideShare
Chargement dans…5
×

Création d'une application html5 utilisant canvas, svg et les animations css3

4 070 vues

Publié le

Techdays 2012

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
4 070
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 197
Actions
Partages
0
Téléchargements
51
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • DavRous fais la démo de SnapyX
  • T + 5minDavCa
  • DavCa
  • 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.
  • T + 10 minDavrous
  • Davrous
  • Davrous
  • Davrous
  • Davrous
  • Davrous
  • Davrous
  • Davrous
  • Davrous
  • Davrous
  • DavCa
  • T + 25 minDavCa
  • T + 33 minDavRous
  • T + 43 minDavCa
  • DavCa / DavRous
  • DavCa / Davrous
  • T + 45 min
  • DavCa
  • DavCa
  • DavCa
  • Création d'une application html5 utilisant canvas, svg et les animations css3

    1. 1. Création dune applicationHTML5 utilisant Canvas,SVG et les animations CSS3David CATUHE - @deltakoshMicrosoft – davca@microsoft.comhttp://blogs.msdn.com/eternalcodingDavid ROUSSET - @davrousMicrosoft – davrous@microsoft.comhttp://blogs.msdn.com/davrous
    2. 2. Du web de présentation vers le web applicatif
    3. 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. 4. DémonstrationPrésentation de l’application SnapX
    5. 5. Audio/Vidéo
    6. 6. Audio/Vidéo Permet de lire un fichier audio ou vidéo sans plug-in
    7. 7. DémonstrationUtilisation de la vidéo pour le Splash Screen
    8. 8. CSS3 Grid &Flexbox
    9. 9. CSS3 Grid par l’exemple Une planche de jeu
    10. 10. HTML & CSS de la planche dejeu 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. 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. 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. 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. 14. Le résultat en images Jeu sur une tablette 1366x768 en portait
    15. 15. Le résultat en images Jeu sur une tablette 1366x768 en paysage
    16. 16. Le résultat en images Jeu sur une tablette 1024x768 en paysage
    17. 17. Le résultat en images Jeu sur l’équivalent d’un smartphone
    18. 18. DémonstrationDémo ultra simple de CSS3 GridCSS3 Grid & Flexbox dans SnapX
    19. 19. Canvas SVG
    20. 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. 21. Comment faire son choix ?
    22. 22. DémonstrationQuelques scénarios clés pour SVG en actionDocuments complexes, Animation, Rapports & Accessibilité
    23. 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. 24. DémonstrationQuelques scénarios clés pour Canvas en actionRaytracer, manipulation vidéo, rapports plus “complexes”
    25. 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. 26. SVG vs Canvas : choix simples
    27. 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. 28. DémonstrationUtilisation de SVG Filters dans SnapX
    29. 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. 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. 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. 32. DémonstrationTransitions avec Fallback JSAnimations avec Fallback JSIntégration dans SnapX pour une expérience Fast & Fluid
    33. 33. <Questions/>
    34. 34. palais descongrèsParis7, 8 et 9février 2012

    ×