Introduction to HTML5 Mobile Applications and Games

1. <!HTML5>
The mobile revolution
César Trigo Esteban
Backend Development Director
Francisco Santos Belmonte
Mobile Teach Lead / Development Manager
www.gigigo.com

2. Introducción al HTML5
La historia
1
World Wide Web Consortium - Febrero 2009
El grupo de trabajo de HTML publicó el primer borrador
sobre HTML5 y diferencias entre HTML5 y HTML4

3. Sencha desarrolla Fastbook, un clon de
Facebook más veloz basado en HTML5
El 34% de las websites del TOP 100 de Alexa
usan HTML5
Steve Jobs: “Flash fue diseñado para PCs usando
un ratón, no para pantallas táctiles usadas con los
dedos”
Se abre la Chrome Web Store
Introducción al HTML5
La historia
2
Twitter publica versión HTML5 para iPad
Adobe abandona el desarrollo de Flash para
dispositivos móviles
2011:
2010:
flickr usa un gestor de subidas basado en HTML5
LinkedIn crea su App para iPad basada en un
95% HTML5
Facebook para iOS y Android se pasa a nativo
y abandona HTML5
2012:
1 billón de móviles soportan HTML5
Entre 100k -500k juegos son desarrollados
usando canvas
2013:
2014:
W3C terminará la especificación para la
estandarización del HTML5

4. OK! pero...
...qué es realmente HTML5?
HTML5 CSS3JavaScript
+ +

5. Introducción al HTML5
Compatibilidad y soporte de exploradores móviles
4
Android 4.4
76%
Chrome 32
88%
Safari iOS 7
74%
Firefox 25
83%
Opera Mobile 16
84%
Windows Phone 8
69%
Fuente: http://html5test.com/results/mobile.html | 3 de Febrero, 2014
+ = 93,9% penetración en el mercado

6. 2 Introducción al HTML5
Capacidades
ALMACENAMIENTO Y
ACCESO
- Aplicaciones 100% Offline
- Almacenamiento interno
temporal y persistente
- Funciones de geolocalización
MULTIMEDIA
- Etiquetas de Audio y Video
- Manipulación de subtítulos
- Control de la pista de video
3D, EFECTOS Y GRÁFICOS
- Canvas 2D
- WebGL/OpenGL 2D y 3D
CSS3
- Transformaciones 3D
- Animaciones
- Transiciones
5

7. Aplicaciones HTML5
Características principales
6
★ Desarrollo único para soporte multiplataforma
★ Mismo comportamiento y apariencia que en las aplicaciones nativas
★ Responsive Design: adaptación a cualquier tamaño de pantalla
★ Frameworks que facilitan el desarrollo de aplicaciones HTML5
★ AtomJS: Framework para el desarrollo ágil de aplicaciones
HTML5
★ Encapsuladores que permiten construir aplicaciones nativas basadas
en código HTML5 y permiten acceder a funcionalidades nativas como las
notificaciones push o las compras In-App

8. <canvas>
La solución para juegos Móvil y Web

9. Juegos HTML5
Qué es el elemento <canvas>
El elemento <canvas> es como un lienzo en blanco y se utiliza para
dibujar en web vía javascript:
● Líneas, cuadrados, círculos y formas
● Texto
● Imágenes
El elemento <canvas> es compatible con:
8
Funciona tanto en PCs de sobremesa como en móviles

10. Juegos HTML5
Empezando a desarrollar juegos - Eligiendo un framework
Características a tener en cuenta:
● Rápido
● Ligero
● Multiplataforma
● Sin apoyo de librerías externas
● Gestión de hojas de sprites
● Gestión de animaciones
● Soporte táctil
● Integración básica de físicas
● Soporte para audio
● Soporte para mapa de tiles
● Fácil de aprender
9

11. Juegos HTML5
Frameworks populares
Algunos de los frameworks más populares:
★ Molecule - www.moleculejs.net: Rápido,
ligero, simple y potente Framework para
desarrollar juegos HTML5 multiplataforma
de forma fácil y eficiente. Es totalmente
gratuito y de código libre
★ Phaser - www.phaser.io: Rápido, gratis, y
divertido Framework de código libre que
soporta tanto JavaScript como TypeScript
10

12. CocoonJS:
● Es un encapsulador creado por Ludei que te permite crear
juegos nativos para iOS, Android y Windows utilizando tu código
HTML5
● Añade características nativas como compras in-app o
notificaciones push
● Optimiza tu juego hasta 10x
● Te permite probar tu juego de forma instantánea
● Molecule Framework es totalmente compatible con CocoonJS
Juegos HTML5
Optimizando tus juegos con CocoonJS
11

13. </HTML5>
César Trigo Esteban
Twitter: @CesarTrigoEs
Email Profesional cesar.trigo@gigigo.com
Email Personal: cesartrigo@gmail.com
Francisco Santos Belmonte
Twitter: @moleculejs
Email Profesional: francisco.santos@gigigo.com
Email Personal: fjsantosb@gmail.com
www.gigigo.com