El documento describe las nuevas características y capacidades de HTML5 como una plataforma para el desarrollo de juegos en la web, incluyendo nuevas API para almacenamiento, geolocalización, WebSockets y controladores de juegos. También recomienda bibliotecas como Processing.js que permiten el desarrollo de juegos visuales en HTML5 sin plugins. El documento concluye con una invitación a hacer preguntas y referencias adicionales sobre el tema.

1. La web en HTML5: Una
nueva plataforma de
juegos
Willy Aguirre
willy@mozilla.pe

2. Plataforma: web HTML5
Últimas tendencias:
- Dispositivos móviles
- Una web = un solo desarrollo
- No plugins
- Nuevo vector de seguridad
- Sobrecarga de procesador (Web Workers)
- Accesibilidad

3. Plataforma: web HTML5
Processing.js lleva esto al siguiente nivel, permitiendo que el código de procesamiento
para ser ejecutado por cualquier navegador compatible con HTML 5, incluyendo las
versiones actuales de Firefox, Safari, Chrome, Opera e Internet Explorer. Processing.js
trae lo mejor de la programación visual de la web, tanto para su procesamiento y
desarrolladores web.

4. Plataforma: web HTML5
Entonces, ¿qué trae HTML5?

5. Plataforma: web HTML5
HTML5 Seguridad
HTML5 aporta múltiples ventajas de seguridad, como la
eliminación de la necesidad de add-ons de riesgo, la
validación de inputs del lado del cliente o librerías que
ayudan a solucionar los problemas relacionados con
'inyección SQ'..

6. Plataforma: web HTML5
Web Workets
Web Workers, los cuales permiten ejecutar scripts en
paralelo (background). Por ejemplo, tenemos un proceso
costoso en recursos que no es interrumpible, podemos
utilizar un Worker y evitar que el navegador se nos colapse.

7. Plataforma: web HTML5
Accesibilidad
Sports Illustrated - HTML5
Drag and Drop
Video

8. Plataforma: web HTML5
Video de Demostración

9. Plataforma: web HTML5
<canvas>
- provee un área de dibujo en una página web
- provee interfaces básicas de composición,
trazado, grabación de estado, interacción con
otros elementos de la págia
- interfaz 2D
- interfaz 3D: WebGL, basado en OpenGL

10. Plataforma: web HTML5
<canvas> fue introducido por Apple para el Mac OS X
Dashboard y posteriormente implementado en Safari.
Los navegadores basados en Gecko 1.8, como Firefox
1.5, son compatibles también con este nuevo elemento.

11. Plataforma: web HTML5
un canvas es un lienzo de mapa de bits dependiente de la
resolución de pantalla que se puede utilizar para
representar gráficos, imágenes de juegos o cualquier otra
información de este tipo sobre la marcha.

12. Plataforma: web HTML5

13. Plataforma: web HTML5
http://caniuse.com

14. Plataforma: web HTML5

15. Plataforma: web HTML5
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

16. Plataforma: web HTML5
Demos!!

17. Plataforma: web HTML5
Processing JS

18. Plataforma: web HTML5
Processing.js es el proyecto de la hermana del lenguaje
de programación Processing populares visual, diseñado
para la web. Processing.js hace que sus visualizaciones de
datos, arte digital, animaciones, gráficos interactivos,
educativos, videojuegos, etc de trabajo utilizando los
estándares web y sin ningún tipo de plug-ins.

19. Plataforma: web HTML5

20. Plataforma: web HTML5

21. Plataforma: web HTML5
Demos!!
http://processingjs.org/exhibition/

22. Plataforma: web HTML5
Almacenamiento
IndexedDB, permite almacenar grandes cantidades de
información en pares de valor/clave
Offline web apps, permite acceder a aplicaciones aun sin
conectividad

23. Plataforma: web HTML5
Geolocalizacion
Básicamente quien recoge la información de localización
no es un servicio web o una base de datos como las
aplicaciones existentes, sino que es el propio navegador
quien detecta la latitud y longitud.

24. Plataforma: web HTML5
Demo de Geolocalizacion con Jquery Mobile

25. Plataforma: web HTML5
WebSockets

26. Plataforma: web HTML5
Los WebSockets forman parte de una nueva tecnología que
provee un canal de comunicación bidireccional entre el
navegador y el servidor web aprovechando el protocolo TCP, lo
que permite crear sesiones interactivas sin consumir mayores
recursos o ancho de banda.

27. Plataforma: web HTML5
¿Qué viene?
WebAPI: acceso al teléfono, cámara, contactos, bateria
GamepadAPI

28. Plataforma: web HTML5
No tienen que partir de cero:
Impact.js
Crafty
Limejs
Box2d
Melonjs

29. Plataforma: web HTML5
Contacto:
¿Preguntas?
Willy Aguirre, willy@mozilla.pe
http://mozilla.pe

30. Plataforma: web HTML5
Referencias
http://www.mrspeaker.net/2012/01/03/gamepad-navigator/
http://www.flashuser.net/html5/30-best-html5-games.html
http://processingjs.org/articles/jsQuickStart.html
https://wiki.mozilla.org/GamepadAPI
http://www.youtube.com/watch?v=tz3pPz3C9fY
http://www.mrspeaker.net/2012/01/03/gamepad-navigator/
http://techcrunch.com/2010/05/19/sports-illustrated-html5/
http://browserquest.mozilla.org/
https://www.mozilla.org/en-US/apps/