construyendo y publicando nuestra primera app

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

Construyendo y publicando nuestra primera aplicación multiplataforma Carlos Alonso Pérez

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

ESTE WEBINAR ES REALIZADO GRACIAS A

TU NUEVO CANAL DE NEGOCIOS EN INTERNET.

Índice de la presentación

•  Planeando nuestra aplicación

•  Construcción

•  Publicación

•  Conclusiones

@calonso

Planeando nuestra aplicación

•  Objetivos

•  Problemas

•  Soluciones

•  Viabilidad

•  Decisión final

@calonso

Objetivo: Triunfar

@calonso

¿Qué hace falta para triunfar?

Y ...

@calonso

Llegar a todos los públicos

@calonso

Problema: La fragmentación

@calonso

Fragmentación: Sistemas Operativos.

@calonso

Fragmentación: Tamaño de pantalla.

@calonso

Fragmentación: Método de entrada.

@calonso

Fragmentación: Hardware.

@calonso

Fragmentación: Errores software.

@calonso

Fragmentación: Conclusión

Equilibrio

Capacidades utilizadas

Clientes Potenciales

vs

@calonso

Solución: Una única aplicación multiplataforma

@calonso

Estudio de la solución: Tecnologías disponibles

@calonso

HTML 5. Potencia y capacidades para tu browser

Etiquetas semánticas

<header>!

<nav>! <section>!

<article>!

<figure>!

<footer>!

<menu>!

Acceso Hardware Filesystem Sensores

Almacenamiento local Funcionamiento offline

Comunicaciones en tiempo real

Notificaciones

WebSockets

Web workers

Multimedia y Gráficos canvas 2D y 3D

gráficos vectoriales (SVG)

audio y vídeo

@calonso

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

prototype!

eval!

isFunction!

typeof!

instanceof!

Object!

new Function()!

Object.isPrototypeOf()!

Clases y objetos!

@calonso

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

Selectores

Tipografías personalizadas

Efectos en textos

Organización en columnas Semi Transparencias

Colores personalizados

Esquinas redondeadas

Gradientes Sombras

Animaciones

Transformaciones

@calonso

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

Javascript no intrusivo

Plugins

Máxima compatibilidad

Muy ligero

Ampliamente usado ‘write less, do more’

Documentación

@calonso

Viabilidad técnica

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

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

http://mobilehtml5.org/

@calonso

Decisión final

@calonso

Construyendo nuestra aplicación multiplataforma

•  Demo

•  Primeros pasos

•  Componentes UI

•  Capacidades HTML 5

•  Diseño personalizado

@calonso

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

@calonso

Primeros pasos. El documento

@calonso

Primeros pasos. El viewport

@calonso

Primeros pasos. Estructura de la aplicación

@calonso

Componentes UI

@calonso

Componentes UI.

@calonso

Componentes UI

@calonso

Componentes UI

@calonso

@calonso

@calonso

@calonso

@calonso

Diseño personalizado.

•  CSS

•  jQuery Theme Roller

@calonso

Publicando nuestra aplicación multiplataforma

•  Como aplicación nativa

•  Como aplicación híbrida

•  Como aplicación web

@calonso

Como aplicación nativa

...   ...  

@calonso

Como aplicación híbrida

...   ...  

@calonso

Como aplicación web. Instalación

@calonso

Como aplicación web. Instalación II

@calonso

Conclusión

Buena solución... ... pero no definitiva.

@calonso

Carlos Alonso Pérez  Web Developer - OffsideGaming Site: http://mrcalonso.com Email: info@mrcalonso.com Twitter: @calonso

@calonso

www.interlat.co  –  info@interlat.co  -­‐    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 @CALONSO

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

SINTONIZA INTERLAT.TV PARA PRÓXIMAS EMISIONES…