Flash, SVG et Canvas

1 355 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 355
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

×