html5 - the mobile revolution
DESCRIPTION
Introduction to HTML5 Mobile Applications and GamesTRANSCRIPT
![Page 1: HTML5 - The Mobile Revolution](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a0f9eb4c9055c598b4a54/html5/thumbnails/1.jpg)
<!HTML5>The mobile revolution
César Trigo EstebanBackend Development Director
Francisco Santos BelmonteMobile Teach Lead / Development Manager
www.gigigo.com
![Page 2: HTML5 - The Mobile Revolution](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a0f9eb4c9055c598b4a54/html5/thumbnails/2.jpg)
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
![Page 3: HTML5 - The Mobile Revolution](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a0f9eb4c9055c598b4a54/html5/thumbnails/3.jpg)
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
![Page 4: HTML5 - The Mobile Revolution](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a0f9eb4c9055c598b4a54/html5/thumbnails/4.jpg)
OK! pero... ...qué es realmente HTML5?
HTML5 CSS3JavaScript
+ +
![Page 5: HTML5 - The Mobile Revolution](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a0f9eb4c9055c598b4a54/html5/thumbnails/5.jpg)
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
![Page 6: HTML5 - The Mobile Revolution](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a0f9eb4c9055c598b4a54/html5/thumbnails/6.jpg)
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
![Page 7: HTML5 - The Mobile Revolution](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a0f9eb4c9055c598b4a54/html5/thumbnails/7.jpg)
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
![Page 8: HTML5 - The Mobile Revolution](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a0f9eb4c9055c598b4a54/html5/thumbnails/8.jpg)
<canvas>La solución para juegos Móvil y
Web
![Page 9: HTML5 - The Mobile Revolution](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a0f9eb4c9055c598b4a54/html5/thumbnails/9.jpg)
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
![Page 10: HTML5 - The Mobile Revolution](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a0f9eb4c9055c598b4a54/html5/thumbnails/10.jpg)
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
![Page 11: HTML5 - The Mobile Revolution](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a0f9eb4c9055c598b4a54/html5/thumbnails/11.jpg)
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
![Page 12: HTML5 - The Mobile Revolution](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a0f9eb4c9055c598b4a54/html5/thumbnails/12.jpg)
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
![Page 13: HTML5 - The Mobile Revolution](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a0f9eb4c9055c598b4a54/html5/thumbnails/13.jpg)
</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