Construyendo y publicando nuestra primera app multiplataforma

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

http://www.interlat.co/

http://communitymanagerslatam.com/

http://www.upb.edu.co/

Í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?













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/




http://mobilehtml5.org

Decisión final




Construyendo nuestra aplicación multiplataforma

• Primeros pasos

• Componentes UI

• Capacidades HTML 5

• Diseño personalizado

• Demos




Primeros pasos. El documento

<!DOCTYPE html> <html> <head>

<meta charset="utf-8" /><title>HTML 5 Demo</title> <link rel="stylesheet"

href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /><script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript"

src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"> </script> </head> <body> </body></html>




Primeros pasos. El viewport

<head>....

<meta name=”viewport” content=”width=device-width, initial-scale=1”></head>

<meta .... user-scalable=no”>




Primeros pasos. Estructura de la aplicación

<body> <div data-role="page">

<div data-role="header"> <h1>Header</h1></div><div data-role="content"> <p>Content</p></div><div data-role="footer"

data-position="fixed"> <h4>Footer</h4></div>

</div></body>




Componentes UI




Componentes UI.




Componentes UI




Componentes UI




Componentes UI. Menu y Toolbar

<div data-role="content"> <ul data-role="listview"> <li><a href="#geolocation">Geolocation API</a></li> <li><a href="#canvas">Canvas</a></li> <li><a href="#storage">Offline Storage</a></li> </ul></div>

<div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#main-menu">Home</a></li> <li><a href="#geolocation">GPS</a></li> <li><a href="#canvas">Canvas</a></li> <li><a href="#storage">Storage</a></li> </ul> </div></div>




Capacidades HTML5. Geolocalización

<div data-role="page" id="geolocation" data-add-back-btn="true">

... Header ...

<div data-role="content">

<p>Wait for the map...</p>

</div>

... Footer ...

</div>

<script type="text/javascript">

$('#geolocation').live('pageinit', function(){

navigator.geolocation.getCurrentPosition (function(pos) {

var lat = pos.coords.latitude;

var lng = pos.coords.longitude;

... Lógica de invocación del mapa Google ...

</script>




Capacidades HTML5. Canvas

<div data-role="page" id="canvas" data-add-back-btn="true">

... Header ...

<div data-role="content">

<canvas id=”theCanvas”></canvas>

</div>

... Footer ...

</div>

var context = $('#theCanvas')[0].getContext('2d');

context.beginPath();

context.rect(20, 20, 200, 100);

context.fillStyle = context.createLinearGradient(20, 20, 220, 120);

context.fill();




Capacidades HTML5. Almacenamiento de datos

<div data-role="page" id="storage" data-add-back-btn="true">

... Header ...

<input type="text" id="item" placeholder="Add Item..." value=""/>

<input type="button" id="add_btn" value="Add Item" data-icon="plus"/>

<ol data-role="listview" data-inset="true"></ol>

... Footer ...

</div>

var $input = $('#item');

var arr = localStorage.items ? JSON.parse(localStorage.items) : [];

arr.push($input.val());

localStorage.items = JSON.stringify(arr);

... Lógica jQuery para refrescar la lista ...




Diseño personalizado.

• CSS

• jQuery Theme Roller

• Fireworks Theme editor

<head>...<link rel="stylesheet" href="css/custom_css.min.css" />...</head>




Demos




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

<head>

...

<link rel="apple-touch-icon" href="icons/icon57.png" sizes="57x57"> <link rel="apple-touch-icon" href="icons/icon114.png" sizes="114x114"> <link rel="apple-touch-icon" href="icons/icon72.png" sizes="72x72"> <link rel="apple-touch-icon" href="icons/icon80.png" sizes="80x80" > <link rel="apple-touch-icon-precomposed" href="icons/icon57.png" sizes="android-only">

...

</head>




Como aplicación web. Funcionamiento offline

CACHE MANIFEST: # version 1.0

# Archivos jQuery http://code.jquery.com/jquery-1.6.1.min.js http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js ...

# Archivos de la aplicación icons/*

NETWORK:# Archivos que no se deben cachear

<html manifest="offline.appcache">

...

</html>




http://code.jquery.com/jquery-1.6.1.min.js

http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css

http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js

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 Senior Developer - Unkasoft [email protected] Twitter: @calonso https://www.linkedin.com/in/mrcalonso




https://www.linkedin.com/in/mrcalonso