<!HTML5>
The mobile revolution
César Trigo Esteban
Backend Development Director
Francisco Santos Belmonte
Mobile Teach Lea...
Introducción al HTML5
La historia
1
World Wide Web Consortium - Febrero 2009
El grupo de trabajo de HTML publicó el primer...
Sencha desarrolla Fastbook, un clon de
Facebook más veloz basado en HTML5
El 34% de las websites del TOP 100 de Alexa
usan...
OK! pero...
...qué es realmente HTML5?
HTML5 CSS3JavaScript
+ +
Introducción al HTML5
Compatibilidad y soporte de exploradores móviles
4
Android 4.4
76%
Chrome 32
88%
Safari iOS 7
74%
Fi...
2 Introducción al HTML5
Capacidades
ALMACENAMIENTO Y
ACCESO
- Aplicaciones 100% Offline
- Almacenamiento interno
temporal ...
Aplicaciones HTML5
Características principales
6
★ Desarrollo único para soporte multiplataforma
★ Mismo comportamiento y ...
<canvas>
La solución para juegos Móvil y Web
Juegos HTML5
Qué es el elemento <canvas>
El elemento <canvas> es como un lienzo en blanco y se utiliza para
dibujar en web...
Juegos HTML5
Empezando a desarrollar juegos - Eligiendo un framework
Características a tener en cuenta:
● Rápido
● Ligero
...
Juegos HTML5
Frameworks populares
Algunos de los frameworks más populares:
★ Molecule - www.moleculejs.net: Rápido,
ligero...
CocoonJS:
● Es un encapsulador creado por Ludei que te permite crear
juegos nativos para iOS, Android y Windows utilizando...
</HTML5>
César Trigo Esteban
Twitter: @CesarTrigoEs
Email Profesional cesar.trigo@gigigo.com
Email Personal: cesartrigo@gm...
Próxima SlideShare
Cargando en…5
×

HTML5 - The Mobile Revolution

563 visualizaciones

Publicado el

Introduction to HTML5 Mobile Applications and Games

Publicado en: Tecnología
0 comentarios
1 recomendación
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
563
En SlideShare
0
De insertados
0
Número de insertados
44
Acciones
Compartido
0
Descargas
9
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.

HTML5 - The Mobile Revolution

  1. 1. <!HTML5> The mobile revolution César Trigo Esteban Backend Development Director Francisco Santos Belmonte Mobile Teach Lead / Development Manager www.gigigo.com
  2. 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. 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. 4. OK! pero... ...qué es realmente HTML5? HTML5 CSS3JavaScript + +
  5. 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. 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. 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. 8. <canvas> La solución para juegos Móvil y Web
  9. 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. 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. 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. 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. 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

×