construyendo y publicando nuestra primera app

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/

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


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

@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: [email protected] Twitter: @calonso

@calonso


GRACIAS. CARLOS ALONSO PÉREZ @CALONSO


SINTONIZA INTERLAT.TV PARA PRÓXIMAS EMISIONES…