Slides da palestra apresentada no Front in Rio sobre o alternativas ao canvas para desenvolvimento de animações e jogos em html5

1. animações e jogos além
do canvas
Sunday, June 19, 2011

2. andrews medina
#cobrateam founder
djangobrasil.org / python.org.br
desenvolvedor @ globo.com
Sunday, June 19, 2011

3. Proprietary software is the disease.
Meet the cure.
Sunday, June 19, 2011

4. jogos
Sunday, June 19, 2011

5. Sunday, June 19, 2011

6. Sunday, June 19, 2011

7. Sunday, June 19, 2011

8. Sunday, June 19, 2011

9. Sunday, June 19, 2011

10. web
Sunday, June 19, 2011

11. Sunday, June 19, 2011

12. Sunday, June 19, 2011

13. Sunday, June 19, 2011

14. jogos vs web
Sunday, June 19, 2011

15. Sunday, June 19, 2011

16. Sunday, June 19, 2011

17. html5 + css3 + js
Sunday, June 19, 2011

18. Sunday, June 19, 2011

19. Sunday, June 19, 2011

20. Sunday, June 19, 2011

21. Sunday, June 19, 2011

22. Sunday, June 19, 2011

23. <canvas>
Sunday, June 19, 2011

24. css3
Sunday, June 19, 2011

25. transform
• rotate - transform: rotate(7deg);
• skew - transform: skew(-25deg);
• scale -transform: scale(0.5);
Sunday, June 19, 2011

26. transitions
• transition: transform .5s ease-in;
Sunday, June 19, 2011

27. animations
@-webkit-keyframes 'animated-sprite' {
0% { background-position: 0px 0px; }
25% { background-position: -1px 0px; }
50% { background-position: -2px 0px; }
75% { background-position: -3px 0px; }
100% { background-position: -7px 0px; }
}
Sunday, June 19, 2011

28. animations
div.animated-sprite {
background-image: url(animated-sprite.png);
-webkit-animation-name: 'animated-sprite';
-webkit-animation-duration: 1s;
}
Sunday, June 19, 2011

29. anigma
• http://icefox.net/anigma/
Sunday, June 19, 2011

30. cubescape
• http://www.themaninblue.com/experiment/
Cubescape/load.php?id=1156
Sunday, June 19, 2011

31. pacman
• https://github.com/andrewsmedina/pacman
Sunday, June 19, 2011

32. Show me the game
Sunday, June 19, 2011

33. device orientation
Sunday, June 19, 2011

34. Show me the game
Sunday, June 19, 2011

35. canvas + css3
Sunday, June 19, 2011

36. obrigado!
Andrews Medina
andrewsmedina.com
@andrewsmedina
andrewsmedina@gmail.com
Sunday, June 19, 2011