Matinale du 6 Mai 2012www.xprimegroupe.com                       SVG et Canvas
SVG & CanvasBy l’équipe intégration !
Au programme :             Graphismes vectoriels                 Images animées            Animations interactives        ...
4
Qualités :                   Puissant et rapide         Plugin installé sur 99% des ordinateurs       Expérience homogène ...
Défauts :                      "                      ‪ Boîte noire"     N     ‪ on modifiable si on ne possède pas la sou...
7
iOS (sans Flash) domine les visites sur mobile                                                 8
HTML5 VS Flash                 9
Problématiquesactuelles
Responsive design                    11
Écrans « retina » et densité de pixels                                         12
13
Navigateurs sans Flash                         14
SVGScalable Vector Graphics
Format d’image vectorielJPG, GIF, PNG : pixel      SVG : vectoriel                                             16
Exemples           17
Permet d’éviter ça :                       18
Logo classique                 19
Logo SVG           20
Format d’image vectoriel en XML                                  21
RaphaelJS : framework pour SVG                                 22
Support du SVG par les navigateurs                                     23
Fallbacks            A            ‪ nimations interactives : Flash              I              ‪ cônes, pictos, logos : PN...
Canvas
Canvas         Z         ‪ one de « dessin » (2D ou 3D)            M            ‪ anipulation de pixels           P       ...
A quoi ça ressemble ? Testez-le !                                    27
KineticJS : framework pour Canvas                                    28
Canvas 3D
A quoi ça ressemble ? Démo simple                                    30
Quake III : Démo avancée                           31
Three.js : framework pour Canvas 3d                                      32
Support du Canvas par les navigateurs                                        33
Fallbacks            F            ‪ lash ?                       34
35
www.xprimegroupe.com               contact@xprimegroupe.com                   Follow us - @xprimeJoin us on Facebook - www...
Prochain SlideShare
Chargement dans…5
×

Flash, SVG et Canvas

1 348 vues

Publié le

Malgré ses qualités, Flash tombe aujourd'hui en désuétude... 2 solutions pour le remplacer : SVG et Canvas.

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

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

Aucune remarque pour cette diapositive

Flash, SVG et Canvas

  1. 1. Matinale du 6 Mai 2012www.xprimegroupe.com SVG et Canvas
  2. 2. SVG & CanvasBy l’équipe intégration !
  3. 3. Au programme : Graphismes vectoriels Images animées Animations interactives Jeux vidéos 3
  4. 4. 4
  5. 5. Qualités : Puissant et rapide Plugin installé sur 99% des ordinateurs Expérience homogène entre les navigateurs 5
  6. 6. Défauts : " ‪ Boîte noire" N ‪ on modifiable si on ne possède pas la source P ‪ as un standard W3C A ‪ bsent sur la plupart des mobiles S ‪ EO, accessibilité... 6
  7. 7. 7
  8. 8. iOS (sans Flash) domine les visites sur mobile 8
  9. 9. HTML5 VS Flash 9
  10. 10. Problématiquesactuelles
  11. 11. Responsive design 11
  12. 12. Écrans « retina » et densité de pixels 12
  13. 13. 13
  14. 14. Navigateurs sans Flash 14
  15. 15. SVGScalable Vector Graphics
  16. 16. Format d’image vectorielJPG, GIF, PNG : pixel SVG : vectoriel 16
  17. 17. Exemples 17
  18. 18. Permet d’éviter ça : 18
  19. 19. Logo classique 19
  20. 20. Logo SVG 20
  21. 21. Format d’image vectoriel en XML 21
  22. 22. RaphaelJS : framework pour SVG 22
  23. 23. Support du SVG par les navigateurs 23
  24. 24. Fallbacks A ‪ nimations interactives : Flash I ‪ cônes, pictos, logos : PNG 24
  25. 25. Canvas
  26. 26. Canvas Z ‪ one de « dessin » (2D ou 3D) M ‪ anipulation de pixels P ‪ as d’arborescence DOM 26
  27. 27. A quoi ça ressemble ? Testez-le ! 27
  28. 28. KineticJS : framework pour Canvas 28
  29. 29. Canvas 3D
  30. 30. A quoi ça ressemble ? Démo simple 30
  31. 31. Quake III : Démo avancée 31
  32. 32. Three.js : framework pour Canvas 3d 32
  33. 33. Support du Canvas par les navigateurs 33
  34. 34. Fallbacks F ‪ lash ? 34
  35. 35. 35
  36. 36. www.xprimegroupe.com contact@xprimegroupe.com Follow us - @xprimeJoin us on Facebook - www.facebook.com/xprimegroupe 36

×