APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

42
www.interlat.co – [email protected] - http://www.facebook.com/interlat - www.twitter.com/interlat - PBX: 57(1) 658 2959 - Bogotá - Colombia Aula Virtual: http://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

description

Conoce como construir y publicar la primera APPS multiplataforma con Carlos Perez de España, docente de la diplomatura en Aplicaciones móviles.

Transcript of APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

Page 1: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

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

Miércoles de Profundización en e-business

Tema : Construyendo y publicando nuestra primera App multiplataforma.

Conferencista: Carlos Alonso PérezPaís: España

Page 2: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

Índice de la presentación

• Planeando nuestra aplicación

• Construcción

• Publicación

• Conclusiones

Page 3: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

Planeando nuestra aplicación

• Objetivos

• Problemas

• Soluciones

• Viabilidad

• Decisión final

Page 13: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

Fragmentación: Conclusión

Equilibrio

Capacidades utilizadas

Clientes Potenciales

vs

Page 14: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

Solución: Una única aplicación multiplataforma.

Page 15: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

Estudio de la solución: Tecnologías disponibles

Page 16: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

HTML 5. Potencia y capacidades para tu browser

Etiquetas semánticas

<header>

<nav> <section>

<article>

<figure>

<footer>

<menu>

Acceso Hardware

Filesystem SensoresAlmacenamiento local

Funcionamiento offline

Comunicaciones en tiempo real

Notificaciones

WebSockets

Web workers

Multimedia y Gráficoscanvas 2D y 3D

gráficos vectoriales (SVG)

audio y vídeo

Page 17: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

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

prototype

eval

isFunction

typeof

instanceof

Object

new Function()

Object.isPrototypeOf()

Clases y objetos

Page 18: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

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

Selectores

Tipografías personalizadas

Efectos en textos

Organización en columnasSemi Transparencias

Colores personalizados

Esquinas redondeadas

GradientesSombras

Animaciones

Transformaciones

Page 19: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

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

Page 20: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

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/

Page 22: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

Construyendo nuestra aplicación multiplataforma

• Primeros pasos

• Componentes UI

• Capacidades HTML 5

• Diseño personalizado

• Demos

Page 23: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

Primeros pasos. El documento

<!DOCTYPE html> <html> <head><meta charset="utf-8" />

<title>HTML 5 Demo</title> <!-- CSS --><link rel="stylesheet"

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

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

Page 24: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

Primeros pasos. El viewport

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

<!-- Sin Zoom --><meta .... user-scalable=no”>

Page 25: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

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>

Page 30: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

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>

Page 31: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

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>

Page 32: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

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();

Page 33: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

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 ...

Page 34: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

Diseño personalizado.

• CSS

• jQuery Theme Roller

• Fireworks Theme

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

Page 36: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

Publicando nuestra aplicación multiplataforma

• Como aplicación nativa

• Como aplicación híbrida

• Como aplicación web

Page 39: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

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>

Page 40: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

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>

Page 41: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

Conclusión

Buena solución, pero no definitiva.

Page 42: APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

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

Gracias!

Carlos Alonso PérezSenior Developer - [email protected]: @calonsohttp://www.linkedin.com/in/calonsoperez