juegos html5
DESCRIPTION
Html5 y los juegos por la comunidad de Mozilla PeruTRANSCRIPT
![Page 2: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/2.jpg)
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
![Page 3: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/3.jpg)
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.
Plataforma: web HTML5
![Page 4: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/4.jpg)
Entonces, ¿qué trae HTML5?
Plataforma: web HTML5
![Page 5: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/5.jpg)
HTML5 SeguridadHTML5 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'..
Plataforma: web HTML5
![Page 6: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/6.jpg)
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.
Plataforma: web HTML5
![Page 7: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/7.jpg)
Video de Demostración
Plataforma: web HTML5
![Page 8: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/8.jpg)
<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
Plataforma: web HTML5
![Page 9: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/9.jpg)
<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.
Plataforma: web HTML5
![Page 10: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/10.jpg)
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.
Plataforma: web HTML5
![Page 11: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/11.jpg)
Plataforma: web HTML5
![Page 12: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/12.jpg)
http://caniuse.com
Plataforma: web HTML5
![Page 13: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/13.jpg)
Plataforma: web HTML5
![Page 14: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/14.jpg)
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Plataforma: web HTML5
![Page 15: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/15.jpg)
Demos!!
Plataforma: web HTML5
![Page 16: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/16.jpg)
Processing JS
Plataforma: web HTML5
![Page 17: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/17.jpg)
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.
Plataforma: web HTML5
![Page 18: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/18.jpg)
Plataforma: web HTML5
![Page 19: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/19.jpg)
Plataforma: web HTML5
![Page 20: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/20.jpg)
Demos!!
http://processingjs.org/exhibition/
Plataforma: web HTML5
![Page 21: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/21.jpg)
Almacenamiento
IndexedDB, permite almacenar grandes cantidades de información en pares de valor/clave
Offline web apps, permite acceder a aplicaciones aun sin conectividad
Plataforma: web HTML5
![Page 22: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/22.jpg)
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.
Plataforma: web HTML5
![Page 23: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/23.jpg)
Demo de Geolocalizacion con Jquery Mobile
Plataforma: web HTML5
![Page 24: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/24.jpg)
WebSockets
Plataforma: web HTML5
![Page 25: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/25.jpg)
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.
Plataforma: web HTML5
![Page 26: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/26.jpg)
¿Qué viene?
WebAPI: acceso al teléfono, cámara, contactos, bateria
GamepadAPI
Plataforma: web HTML5
![Page 27: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/27.jpg)
No tienen que partir de cero:
Impact.js
Crafty
Limejs
Box2d
Melonjs
Plataforma: web HTML5
![Page 29: Juegos html5](https://reader033.vdocuments.pub/reader033/viewer/2022061212/54954578b47959071d8b4603/html5/thumbnails/29.jpg)
Plataforma: web HTML5
Referenciashttp://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/