![Page 1: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/1.jpg)
DESARROLLO DE VIDEOJUEGOS CON HTML5, CSS3 Y JS EN EL MUNDO REAL
MARIO ANDRES PAGELLA
HTTP://WWW.ANDRESPAGELLA.COM
@MAPAGELLA
![Page 2: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/2.jpg)
![Page 3: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/3.jpg)
(NUEVO LIBRO “COMING SOON”)
![Page 4: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/4.jpg)
“LET’S RECAP”(ESTO ES LO QUE NOS PROMETIERON)
![Page 5: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/5.jpg)
![Page 6: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/6.jpg)
PCs iOS BlackBerryOS Android WinMo Win8 MeeGoC++ X X XC# X X X
Java X X X XObj-C Dep. X
Act.Scr. X Dep. Dep.
![Page 7: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/7.jpg)
PCs iOS BlackBerryOS Android WinMo Win8 MeeGoC++ X X XC# X X X
Java X X X XObj-C Dep. X
Act.Scr. X Dep. Dep.JS X! X X X X X X
![Page 8: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/8.jpg)
“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, 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
![Page 9: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/9.jpg)
![Page 10: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/10.jpg)
![Page 11: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/11.jpg)
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...
![Page 12: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/12.jpg)
![Page 13: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/13.jpg)
ESO QUISIERA…PERO NO LO TENGO EN STOCK
![Page 14: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/14.jpg)
![Page 15: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/15.jpg)
“DIVERSIDAD DE DISPOSITIVOS”
![Page 16: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/16.jpg)
DEMASIADO DIVERSO…
![Page 17: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/17.jpg)
![Page 18: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/18.jpg)
![Page 19: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/19.jpg)
![Page 20: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/20.jpg)
HTML5 APIs
Canvas WebStorage Offline Storage
WebGL Drag and Drop Fullscreen
Audio WebSQL / IndexedDB Browser History
WebSockets File MouseLock
WebWorkers Filesystem Touch/Orientation
Video WebAudio Joystick
![Page 21: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/21.jpg)
¿Y AHORA?
![Page 22: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/22.jpg)
![Page 23: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/23.jpg)
HACER DINERO… HACIENDO VIDEO JUEGOS
http://www.marketjs.com/ https://www.fgl.com/
http://www.kongregate.com http://clay.io
http://www.scirra.com http://corp.playspan.com/
etc.
![Page 24: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/24.jpg)
![Page 25: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/25.jpg)
![Page 26: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/26.jpg)
“A DIFERENCIA DE FLASH, NUESTROS JUEGOS FUNCIONAN EN MOBILE TAMBIEN”
¿…NO?
![Page 27: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/27.jpg)
PROGRESSIVE ENHANCEMENT
GRACEFUL DEGRADATION
VS.
PROGRESSIVE ENHANCEMENT
![Page 28: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/28.jpg)
“FUTURE READY”
PROGRESSIVE ENHANCEMENT
![Page 29: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/29.jpg)
¿PARECE DESARROLLO DE FRONTEND?PARECE NO. ES.
![Page 30: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/30.jpg)
“ RESPONSIVE GAME DEVELOPMENT ”
¡LITERALMENTE!
![Page 31: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/31.jpg)
var w = 320, h = 480, ar = Math.min(window.innerHeight / h, window.innerWidth / w), aw = (w * ar), // Adjusted width (w/aspect ratio) ah = (h * ar); // Adjusted height (w/aspect ratio)
![Page 32: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/32.jpg)
WEBGL CANVAS DOM + CSS3
SVG
MÉTODOS DE RENDERING
![Page 33: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/33.jpg)
WEBGL CANVAS DOM + CSS3
SVG
MÉTODOS DE RENDERING
WEBGL
![Page 34: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/34.jpg)
WEBGL CANVAS DOM + CSS3
SVG
MÉTODOS DE RENDERING
CANVAS
![Page 35: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/35.jpg)
WEBGL CANVAS DOM + CSS3
SVG
MÉTODOS DE RENDERING
![Page 36: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/36.jpg)
WEBGL CANVAS DOM + CSS3
SVG
MÉTODOS DE RENDERING
![Page 37: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/37.jpg)
HERRAMIENTAS
![Page 38: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/38.jpg)
![Page 39: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/39.jpg)
![Page 40: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/40.jpg)
![Page 41: Desarrollo de videojuegos con HTML5, CSS3 y JavaScript en el Mundo Real](https://reader034.vdocuments.pub/reader034/viewer/2022052310/554ca7c9b4c905c10d8b583d/html5/thumbnails/41.jpg)
¡GRACIAS!
HTTP://WWW.ANDRESPAGELLA.COM
@MAPAGELLA