Juegos html5

La web en HTML5: Una
nueva plataforma de
juegos
Willy Aguirre

willy@mozilla.pe

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


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.


Entonces, ¿qué trae 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'..


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.


Accesibilidad

Sports Illustrated - HTML5

Drag and Drop
Video


Video de Demostración


<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


<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.


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.


http://caniuse.com


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


Demos!!


Processing JS


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.


Demos!!

http://processingjs.org/exhibition/


Almacenamiento

IndexedDB, permite almacenar grandes cantidades de
información en pares de valor/clave

Offline web apps, permite acceder a aplicaciones aun sin
conectividad


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.


Demo de Geolocalizacion con Jquery Mobile


WebSockets


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.


¿Qué viene?

WebAPI: acceso al teléfono, cámara, contactos, bateria

GamepadAPI


No tienen que partir de cero:

Impact.js

Crafty

Limejs

Box2d

Melonjs


Contacto:

¿Preguntas?
Willy Aguirre, willy@mozilla.pe

http://mozilla.pe


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/

Juegos html5

Más contenido relacionado

La actualidad más candente

Similar a Juegos html5

Más de Willy Aguirre

Juegos html5