<!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 cesar.trigo@gigigo.comEmail Personal: cesartrigo@gmail.com

Francisco Santos BelmonteTwitter: @moleculejsEmail Profesional: francisco.santos@gigigo.comEmail Personal: fjsantosb@gmail.com

www.gigigo.com