EVA 2011 - Desarrollo de Videojuegos con HTML5, CSS3 and JavaScript
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

EVA 2011 - Desarrollo de Videojuegos con HTML5, CSS3 and JavaScript

on

  • 1,830 views

 

Statistics

Views

Total Views
1,830
Views on SlideShare
1,826
Embed Views
4

Actions

Likes
1
Downloads
37
Comments
0

2 Embeds 4

http://www.linkedin.com 2
https://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

EVA 2011 - Desarrollo de Videojuegos con HTML5, CSS3 and JavaScript Presentation Transcript

  • 1. 11/8/11
  • 2. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript Andrés Pagella11/8/11
  • 3. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript 11/8/11
  • 4. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript 11/8/11
  • 5. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript 11/8/11
  • 6. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript 11/8/11
  • 7. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript PCs iOS BlackBerryOS Android WinMo MeeGoC++ X X XC# X XJava X X X XObj-C Dep. XAct.Scr. X Dep. Dep . 11/8/11
  • 8. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript PCs iOS BlackBerryOS Android WinMo MeeGoC++ X X XC# X XJava X X X XObj-C Dep. XAct.Scr. X Dep. Dep.JavaScript X X X X X X 11/8/11
  • 9. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript 11/8/11
  • 10. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript “Flash to Focus on PC Browsing and Mobile Apps; Adobe to More Aggressively Contribute to HTML5” (9 Nov, 2011) Fuente: http://blogs.adobe.com/conversations/2011/11/flash-focus.html 11/8/11
  • 11. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript “Flash to Focus on PC Browsing and Mobile Apps; Adobe to More Aggressively Contribute to HTML5” (9 Nov, 2011) Fuente: http://blogs.adobe.com/conversations/2011/11/flash-focus.html “Microsoft may halt development work on Silverlight plugin after next release” (9 Nov, 2011) Fuente: http://www.theverge.com/2011/11/9/2548975/microsoft-may-halt-development- work-on-silverlight-after-next-release, Mary Jo Foley 11/8/11
  • 12. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript “Flash to Focus on PC Browsing and Mobile Apps; Adobe to More Aggressively Contribute to HTML5” (9 Nov, 2011) Fuente: http://blogs.adobe.com/conversations/2011/11/flash-focus.html “Microsoft may halt development work on Silverlight plugin after next release” (9 Nov, 2011) Fuente: http://www.theverge.com/2011/11/9/2548975/microsoft-may-halt-development- work-on-silverlight-after-next-release, Mary Jo Foley “For the web to move forward and for consumers to get the most out of touch-first browsing, the Metro style browser in Windows 8 is as HTML5-only as possible, and plug-in free.” (14 Sep, 2011) Fuente: http://blogs.msdn.com/b/b8/archive/2011/09/14/metro-style-browsing-and-plug- in-free-html5.aspx 11/8/11
  • 13. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript 11/8/11
  • 14. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript 11/8/11
  • 15. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript 11/8/11
  • 16. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript “Pero aparte de validar formularios, hacer pequeñas animaciones y requests con AJAX, ¿JavaScript sirve para hacer algo mas?” 11/8/11
  • 17. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript 11/8/11
  • 18. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript 11/8/11
  • 19. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 APIs 11/8/11
  • 20. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 APIs Canvas WebStorage Offline Storage WebGL Drag and Drop Fullscreen Audio WebSQL / IndexedDB Browser History WebSockets File MouseLock WebWorkers Filesystem Touch/Orientation Video Joystick y muchas mas... 11/8/11
  • 21. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 APIs Canvas WebStorage Offline Storage WebGL Drag and Drop Fullscreen Audio WebSQL / IndexedDB Browser History WebSockets File MouseLock WebWorkers Filesystem Touch/Orientation Video Joystick y muchas mas... 11/8/11
  • 22. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 APIs Canvas WebStorage Offline Storage WebGL Drag and Drop Fullscreen Audio WebSQL / IndexedDB Browser History WebSockets File MouseLock WebWorkers Filesystem Touch/Orientation Video Joystick y muchas mas... 11/8/11
  • 23. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 APIs Canvas WebStorage Offline Storage WebGL Drag and Drop Fullscreen Audio WebSQL / IndexedDB Browser History WebSockets File MouseLock WebWorkers Filesystem Touch/Orientation Video Joystick y muchas mas... 11/8/11
  • 24. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 APIs Canvas WebStorage Offline Storage WebGL Drag and Drop Fullscreen Audio WebSQL / IndexedDB Browser History WebSockets File MouseLock WebWorkers Filesystem Touch/Orientation Video Joystick y muchas mas... 11/8/11
  • 25. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 APIs Canvas WebStorage Offline Storage WebGL Drag and Drop Fullscreen Audio WebSQL / IndexedDB Browser History WebSockets File MouseLock WebWorkers Filesystem Touch/Orientation Video Joystick y muchas mas... 11/8/11
  • 26. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 APIs Canvas WebStorage Offline Storage WebGL Drag and Drop Fullscreen Audio WebSQL / IndexedDB Browser History WebSockets File MouseLock WebWorkers Filesystem Touch/Orientation Video Joystick y muchas mas... 11/8/11
  • 27. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 APIs Canvas WebStorage Offline Storage WebGL Drag and Drop Fullscreen Audio WebSQL / IndexedDB Browser History WebSockets File MouseLock WebWorkers Filesystem Touch/Orientation Video Joystick y muchas mas... 11/8/11
  • 28. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 APIs Canvas WebStorage Offline Storage WebGL Drag and Drop Fullscreen Audio WebSQL / IndexedDB Browser History WebSockets File MouseLock WebWorkers Filesystem Touch/Orientation Video Joystick y muchas mas... 11/8/11
  • 29. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 APIs Canvas WebStorage Offline Storage WebGL Drag and Drop Fullscreen Audio WebSQL / IndexedDB Browser History WebSockets File MouseLock WebWorkers Filesystem Touch/Orientation Video Joystick y muchas mas... 11/8/11
  • 30. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 APIs Canvas WebStorage Offline Storage WebGL Drag and Drop Fullscreen Audio WebSQL / IndexedDB Browser History WebSockets File MouseLock WebWorkers Filesystem Touch/Orientation Video Joystick y muchas mas... 11/8/11
  • 31. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 APIs Canvas WebStorage Offline Storage WebGL Drag and Drop Fullscreen Audio WebSQL / IndexedDB Browser History WebSockets File MouseLock WebWorkers Filesystem Touch/Orientation Video Joystick y muchas mas... 11/8/11
  • 32. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 APIs Canvas WebStorage Offline Storage WebGL Drag and Drop Fullscreen Audio WebSQL / IndexedDB Browser History WebSockets File MouseLock WebWorkers Filesystem Touch/Orientation Video Joystick y muchas mas... 11/8/11
  • 33. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 APIs Canvas WebStorage Offline Storage WebGL Drag and Drop Fullscreen Audio WebSQL / IndexedDB Browser History WebSockets File MouseLock WebWorkers Filesystem Touch/Orientation Video Joystick y muchas mas... 11/8/11
  • 34. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 APIs Canvas WebStorage Offline Storage WebGL Drag and Drop Fullscreen Audio WebSQL / IndexedDB Browser History WebSockets File MouseLock WebWorkers Filesystem Touch/Orientation Video Joystick y muchas mas... 11/8/11
  • 35. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 APIs Canvas WebStorage Offline Storage WebGL Drag and Drop Fullscreen Audio WebSQL / IndexedDB Browser History WebSockets File MouseLock WebWorkers Filesystem Touch/Orientation Video Joystick y muchas mas... 11/8/11
  • 36. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 APIs Canvas WebStorage Offline Storage WebGL Drag and Drop Fullscreen Audio WebSQL / IndexedDB Browser History WebSockets File MouseLock WebWorkers Filesystem Touch/Orientation Video Joystick y muchas mas... 11/8/11
  • 37. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 APIs Canvas WebStorage Offline Storage WebGL Drag and Drop Fullscreen Audio WebSQL / IndexedDB Browser History WebSockets File MouseLock WebWorkers Filesystem Touch/Orientation Video Joystick y muchas mas... 11/8/11
  • 38. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript Angry Birds: WebGL con fallback a Canvas y Flash 11/8/11
  • 39. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript Quake 3 + WebGL 11/8/11
  • 40. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript WebGL + Team Fortress (solo el mapa) 11/8/11
  • 41. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript WebGL + Kinect 11/8/11
  • 42. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript Canvas (2D) 11/8/11
  • 43. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript Canvas (2D) Modo “inmediato” (no quedan referencias) 11/8/11
  • 44. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript Canvas (2D) Modo “inmediato” (no quedan referencias) Permite manipulación de píxeles 11/8/11
  • 45. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript Canvas (2D) Modo “inmediato” (no quedan referencias) Permite manipulación de píxeles Performance “aceptable” 11/8/11
  • 46. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript Canvas (2D) Modo “inmediato” (no quedan referencias) Permite manipulación de píxeles Performance “aceptable” Fácil de usar 11/8/11
  • 47. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript Canvas (WebGL) 11/8/11
  • 48. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript Canvas (WebGL) Gráficos 3D en un navegador sin usar plugins 11/8/11
  • 49. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript Canvas (WebGL) Gráficos 3D en un navegador sin usar plugins Basado en OpenGL ES 2.0 11/8/11
  • 50. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript Canvas (WebGL) Gráficos 3D en un navegador sin usar plugins Basado en OpenGL ES 2.0 No está soportado universalmente 11/8/11
  • 51. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript Canvas (WebGL) Gráficos 3D en un navegador sin usar plugins Basado en OpenGL ES 2.0 No está soportado universalmente Ejecuta código en el GPU 11/8/11
  • 52. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript Canvas (WebGL) Gráficos 3D en un navegador sin usar plugins Basado en OpenGL ES 2.0 No está soportado universalmente Ejecuta código en el GPU Alta performance 11/8/11
  • 53. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript Canvas (WebGL) Gráficos 3D en un navegador sin usar plugins Basado en OpenGL ES 2.0 No está soportado universalmente Ejecuta código en el GPU Alta performance Complejo de usar, pero existen frameworks 11/8/11
  • 54. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript SVG (Scalable Vector Graphics) 11/8/11
  • 55. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript SVG (Scalable Vector Graphics) Gráficos vectoriales 11/8/11
  • 56. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript SVG (Scalable Vector Graphics) Gráficos vectoriales Performance “aceptable” 11/8/11
  • 57. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript SVG (Scalable Vector Graphics) Gráficos vectoriales Performance “aceptable” Complejo de usar pero existen frameworks 11/8/11
  • 58. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript DOM (Document Object Model) 11/8/11
  • 59. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript DOM (Document Object Model) Método tradicional de animación con JS 11/8/11
  • 60. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript DOM (Document Object Model) Método tradicional de animación con JS Performance “muy buena” 11/8/11
  • 61. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript DOM (Document Object Model) Método tradicional de animación con JS Performance “muy buena” Fácil de usar, pero “desprolijo” 11/8/11
  • 62. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 Audio y Video 11/8/11
  • 63. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 Audio y Video Problemas de patentes 11/8/11
  • 64. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 Audio y Video Problemas de patentes Performance pobre, poco confiable 11/8/11
  • 65. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 Audio y Video Problemas de patentes Performance pobre, poco confiable Extremadamente fácil de usar 11/8/11
  • 66. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 Audio Data API 11/8/11
  • 67. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 Audio Data API Manipulación y generación de sonidos con JS 11/8/11
  • 68. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 Audio Data API Manipulación y generación de sonidos con JS Muy baja latencia, excelente performance 11/8/11
  • 69. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 Audio Data API Manipulación y generación de sonidos con JS Muy baja latencia, excelente performance No está soportado en dispositivos móviles 11/8/11
  • 70. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript HTML5 Audio Data API Manipulación y generación de sonidos con JS Muy baja latencia, excelente performance No está soportado en dispositivos móviles Fácil de usar 11/8/11
  • 71. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript ¿Qué está incompleto o en camino? 11/8/11
  • 72. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript ¿Qué está incompleto o en camino? Fullscreen 11/8/11
  • 73. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript ¿Qué está incompleto o en camino? Fullscreen MouseLock 11/8/11
  • 74. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript ¿Qué está incompleto o en camino? Fullscreen MouseLock JoyStick API 11/8/11
  • 75. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript ¿Qué está incompleto o en camino? Fullscreen MouseLock JoyStick API Orientation Lock 11/8/11
  • 76. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript “Odio el lenguaje JavaScript” 11/8/11
  • 77. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript 11/8/11
  • 78. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript Emscripten 11/8/11
  • 79. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript Emscripten CoffeeScript 11/8/11
  • 80. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript Emscripten CoffeeScript JS.NEXT 11/8/11
  • 81. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript Emscripten CoffeeScript JS.NEXT NaCl: Native Client (solo Chrome) 11/8/11
  • 82. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript Emscripten CoffeeScript JS.NEXT NaCl: Native Client (solo Chrome) Dart 11/8/11
  • 83. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript Emscripten CoffeeScript JS.NEXT NaCl: Native Client (solo Chrome) Dart Java (vía GWT) 11/8/11
  • 84. Desarrollo de Videojuegos con HTML5, CSS3 y JavaScript ¿Preguntas? 11/8/11