Construyendo y publicando nuestra primera app multi plataforma (II)

www.interlat.co  –  [email protected]  -­‐    h2p://www.facebook.com/interlat  -­‐  www.twi2er.com/interlat  -­‐  PBX:  57(1)  658  2959    -­‐  Bogotá  -­‐  Colombia  Aula  Virtual:  h2p://www.interlat.co/moodle/

Miércoles de Profundización en  e-business  

Tema : Construyendo y publicando nuestra primera App multiplataforma.  

Conferencista: Carlos Alonso Pérez  País: España

Índice de la presentación

• Planeando nuestra aplicación

• Construcción

• Publicación

• Conclusiones

Planeando nuestra aplicación

• Objetivos

• Problemas

• Soluciones

• Viabilidad

• Decisión final

Objetivo: Triunfar

Objetivo: Triunfar

¿Qué hace falta para triunfar?

¿Qué hace falta para triunfar?

¿Qué hace falta para triunfar?

¿Qué hace falta para triunfar?

Y ...

Llegar a todos los públicos

Problema:

Problema: La fragmentación

Fragmentación: Sistemas Operativos.

Fragmentación: Tamaño de pantalla.

Fragmentación: Método de entrada.

Fragmentación: Hardware.

Fragmentación: Errores software.

Fragmentación: Conclusión

Equilibrio

Capacidades utilizadas

Clientes Potenciales

vs

Solución: Una única aplicación

Solución: Una única aplicación multiplataforma

Estudio de la solución: Tecnologías disponibles

HTML 5. Potencia y capacidades para tu browser

E"quetas  semán"cas

<header>

<nav> <section>

<article>

<figure>

<footer>

<menu>

Acceso  Hardware

Filesystem SensoresAlmacenamiento  local

Funcionamiento  offline

Comunicaciones  en  "empo  realNoQficaciones

WebSockets

Web  workers

Mul"media  y  Gráficoscanvas  2D  y  3D

gráficos  vectoriales  (SVG)

audio  y  vídeo

Javascript. El lenguaje de programación de la web.

prototype

eval

isFunction

typeof

instanceof

Object

new Function()

Object.isPrototypeOf()

Clases y objetos

CSS 3. Experiencia de usuario de última generación

Selectores

TipograZas  personalizadas

Efectos  en  textos  

Organización  en  columnasSemi  Transparencias

Colores  personalizados

Esquinas  redondeadas

GradientesSombras

Animaciones

Transformaciones

jQuery Mobile. Desarrollo móvil rápido y sencillo

Javascript  no  intrusivo

Plugins

Máxima  compaQbilidad

Muy  ligero

Ampliamente  usado‘write  less,  do  more’

Documentación

Viabilidad técnica

SI•  Geolocalización  (GPS)  •  Reproducción  mulQmedia  •  Sensores  de  movimiento  •  Almacenar  datos  locales  •  Acceso  offline

NO•  Otros  sensores  •  Cámara  •  NoQficaciones  •  Web  GL    •  Alto  rendimiento

h2p://mobilehtml5.org/

Decisión final

Construyendo nuestra aplicación multiplataforma

• Demo

• Primeros pasos

• Componentes UI

• Capacidades HTML 5

• Diseño personalizado

http://js-interlat-demo.herokuapp.com

Primeros pasos. El documento

Primeros pasos. El viewport

Primeros pasos. Estructura de la aplicación

Componentes UI

Componentes UI.

Componentes UI

Componentes UI

Diseño personalizado.

• CSS

• jQuery Theme Roller

Publicando nuestra aplicación multiplataforma

• Como aplicación nativa

• Como aplicación híbrida

• Como aplicación web

Como aplicación nativa

... ...

Como aplicación híbrida

... ...

Como aplicación web. Instalación

Como aplicación web. Instalación II

Conclusión

Buena solución...

Conclusión

Buena solución...

... pero no definitiva.

www.interlat.co  –  [email protected]  -­‐    h2p://www.facebook.com/interlat  -­‐  www.twi2er.com/interlat  -­‐  PBX:  57(1)  658  2959    -­‐  Bogotá  -­‐  Colombia  Aula  Virtual:  h2p://www.interlat.co/moodle/

Gracias!

Carlos Alonso Pérez  Web Developer - OffsideGaming

Site: http://mrcalonso.com Email: [email protected] Twitter: @calonso