Les moteurs JavaScript récents sont ultra-rapides, on commence à pouvoir faire de vraies animations en CSS, on peut dessiner en bitmap comme en vectoriel dans plein de navigateurs, et la vraie 3D accélérée sans plugin est en train de poindre le bout de son nez… En somme, Flash n’a plus guère d'argument côté effets visuels. D'autant qu'il prend, au final, beaucoup plus de ressources que ses alternatives. Alors, qu'est-ce que vous attendez pour vous y mettre ? Cet atelier fera un tour d'horizon des possibilités, exemples à l'appui, afin de vous mettre le pied à l'étrier.

1. Comment ça c’est pas
du Flash ?!
Christophe Porteneuve • Paris Web 2010

2. Christophe qui ?
• @porteneuve + @gitattitude
• 33 ans, Paris, CTO @ Ciblo
• Prototype, script.aculo.us / Scripty2,
Rails, Basecamp, Freckle
• Bouquins chez Eyrolles & Pragmatic
Bookshelf

3. Alors déjà, Flash…
• Ça suce la machine jusqu’au sang
• Même quand ça fout pas grand chose
• Ça ne sera jamais sur iOS
• Ça a beaucoup de mal sur les autres
périphériques mobiles
• Ça fait pas tant de choses que ça !

4. Et donc…?
Les standards du Web nous fournissent
une térachiée™ de technologies plus
ouvertes, plus puissantes et moins
gourmandes.

5. http://bit.ly/not-in-flash-anymore

6. L’idée de cet atelier
1.On fait le tour du web et vous en
prenez plein les mirettes
2.On fait quelques essais en live
3.Vous sortez remontés à bloc et allez
pondre un truc qui tue dès ce soir !
4.Profit !

7. Leçon 1

8. CSS roxxe des Pimms

9. Leçon 2

10. Canvas arrache le slip

11. Leçon 3

12. SVG met une branlée

13. Leçon 4

14. Web Fonts FTW!

15. Leçon 5

16. A/V Cæsar !

17. Leçon 6

18. WebGL — Waoôoouh !

19. Accélération matérielle
• CSS3 Transforms 3D, WebGL,
Canvas…
• Safari : partout (OSX, iOS, Windows)
• FF4 Windows (dont XP)
• IE9 (pas XP, mais sinon à fond !)
• Chrome/Opera y travaillent

20. Quand est-ce qu’on
se goinfre mange ?
• FF3.5+ (boost perfs avec FF4)
• Safari 4+ (5, Webkit… = perfs ↗)
• Chrome 5+ (6, 7 = perfs ↗)
• Opera 10.6
• IE9

21. Travaux Pratiques

22. Merci.
• @porteneuve + @gitattitude
• tdd@tddsworld.com
• http://www.slideshare.net/tdd