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

1. Matinale du 6 Mai 2012
www.xprimegroupe.com
SVG et Canvas

2. SVG & Canvas
By l’équipe intégration !

3. Au programme :
Graphismes vectoriels
Images animées
Animations interactives
Jeux vidéos
3

4. 4

5. Qualités :
Puissant et rapide
Plugin installé sur 99% des ordinateurs
Expérience homogène entre les navigateurs
5

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

8. iOS (sans Flash) domine les visites sur mobile
8

9. HTML5 VS Flash
9

10. Problématiques
actuelles

11. Responsive design
11

12. Écrans « retina » et densité de pixels
12

13. 13

14. Navigateurs sans Flash
14

15. SVG
Scalable Vector Graphics

16. Format d’image vectoriel
JPG, GIF, PNG : pixel SVG : vectoriel
16

17. Exemples
17

18. Permet d’éviter ça :
18

19. Logo classique
19

20. Logo SVG
20

21. Format d’image vectoriel en XML
21

22. RaphaelJS : framework pour SVG
22

23. Support du SVG par les navigateurs
23

24. Fallbacks
A
‪ nimations interactives : Flash
I
‪ cônes, pictos, logos : PNG
24

25. Canvas

26. Canvas
Z
‪ one de « dessin » (2D ou 3D)
M
‪ anipulation de pixels
P
‪ as d’arborescence DOM
26

27. A quoi ça ressemble ? Testez-le !
27

28. KineticJS : framework pour Canvas
28

29. Canvas 3D

30. A quoi ça ressemble ? Démo simple
30

31. Quake III : Démo avancée
31

32. Three.js : framework pour Canvas 3d
32

33. Support du Canvas par les navigateurs
33

34. Fallbacks
F
‪ lash ?
34

35. 35

36. www.xprimegroupe.com
contact@xprimegroupe.com
Follow us - @xprime
Join us on Facebook - www.facebook.com/xprimegroupe
36