Construyendo y publicando nuestra primera app multiplataforma
49
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
-
Upload
carlos-alonso-perez -
Category
Mobile
-
view
143 -
download
0
Transcript of 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
Í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: 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/
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> <!-- 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>
Primeros pasos. El viewport
<head>....
<meta name=”viewport” content=”width=device-width, initial-scale=1”></head>
<!-- Sin Zoom --><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. 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>
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>
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
