html5 - the mobile revolution
DESCRIPTION
Introduction to HTML5 Mobile Applications and GamesTRANSCRIPT
<!HTML5>The mobile revolution
César Trigo EstebanBackend Development Director
Francisco Santos BelmonteMobile Teach Lead / Development Manager
www.gigigo.com
Introducción al HTML5La historia
1
World Wide Web Consortium - Febrero 2009El grupo de trabajo de HTML publicó el primer borrador sobre HTML5 y diferencias entre HTML5 y HTML4
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 HTML5La 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 HTML5LinkedIn 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
OK! pero... ...qué es realmente HTML5?
HTML5 CSS3JavaScript
+ +
Introducción al HTML5Compatibilidad 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
2 Introducción al HTML5Capacidades
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
Aplicaciones HTML5Caracterí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
<canvas>La solución para juegos Móvil y
Web
Juegos HTML5Qué 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
Juegos HTML5Empezando 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
Juegos HTML5Frameworks 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
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 HTML5Optimizando tus juegos con CocoonJS
11
</HTML5>
César Trigo EstebanTwitter: @CesarTrigoEsEmail Profesional [email protected] Personal: [email protected]
Francisco Santos BelmonteTwitter: @moleculejsEmail Profesional: [email protected] Personal: [email protected]
www.gigigo.com