animações e jogos além do canvas

2,699 views

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,699
On SlideShare
0
From Embeds
0
Number of Embeds
689
Actions
Shares
0
Downloads
15
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

animações e jogos além do canvas

  1. 1. animações e jogos além do canvasSunday, June 19, 2011
  2. 2. andrews medina #cobrateam founder djangobrasil.org / python.org.br desenvolvedor @ globo.comSunday, June 19, 2011
  3. 3. Proprietary software is the disease. Meet the cure.Sunday, June 19, 2011
  4. 4. jogosSunday, June 19, 2011
  5. 5. Sunday, June 19, 2011
  6. 6. Sunday, June 19, 2011
  7. 7. Sunday, June 19, 2011
  8. 8. Sunday, June 19, 2011
  9. 9. Sunday, June 19, 2011
  10. 10. webSunday, June 19, 2011
  11. 11. Sunday, June 19, 2011
  12. 12. Sunday, June 19, 2011
  13. 13. Sunday, June 19, 2011
  14. 14. jogos vs webSunday, June 19, 2011
  15. 15. Sunday, June 19, 2011
  16. 16. Sunday, June 19, 2011
  17. 17. html5 + css3 + jsSunday, June 19, 2011
  18. 18. Sunday, June 19, 2011
  19. 19. Sunday, June 19, 2011
  20. 20. Sunday, June 19, 2011
  21. 21. Sunday, June 19, 2011
  22. 22. Sunday, June 19, 2011
  23. 23. <canvas>Sunday, June 19, 2011
  24. 24. css3Sunday, June 19, 2011
  25. 25. transform • rotate - transform: rotate(7deg); • skew - transform: skew(-25deg); • scale -transform: scale(0.5);Sunday, June 19, 2011
  26. 26. transitions • transition: transform .5s ease-in;Sunday, June 19, 2011
  27. 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. 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. 29. anigma • http://icefox.net/anigma/Sunday, June 19, 2011
  30. 30. cubescape • http://www.themaninblue.com/experiment/ Cubescape/load.php?id=1156Sunday, June 19, 2011
  31. 31. pacman • https://github.com/andrewsmedina/pacmanSunday, June 19, 2011
  32. 32. Show me the gameSunday, June 19, 2011
  33. 33. device orientationSunday, June 19, 2011
  34. 34. Show me the gameSunday, June 19, 2011
  35. 35. canvas + css3Sunday, June 19, 2011
  36. 36. obrigado! Andrews Medina andrewsmedina.com @andrewsmedina andrewsmedina@gmail.comSunday, June 19, 2011

×