Construyendo y publicando nuestra primera app multiplataforma

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

¿Qué hace falta para triunfar?

¿Qué hace falta para triunfar?
Y ...

Fragmentación: Sistemas Operativos.

Fragmentación: Tamaño de pantalla.

Fragmentación: Método de entrada.

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 Sensores
Almacenamiento
local
Funcionamiento
offline
Comunicaciones
en

"empo
real
NoQficaciones
WebSockets
Web
workers
Mul"media
y
Gráficos
canvas
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
Gradientes
Sombras
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
oﬄine
NO
•
Otros
sensores

•
Cámara

•
NoQﬁcaciones

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

<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. Menu y Toolbar
<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 ...
<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 ...
<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/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="ofﬂine.appcache">
...
</html>

Conclusión
Buena solución...

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

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

Senior Developer - Unkasoft
info@mrcalonso.com
Twitter: @calonso
https://www.linkedin.com/in/mrcalonso

Construyendo y publicando nuestra primera app multiplataforma

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (11)

Similar a Construyendo y publicando nuestra primera app multiplataforma

Similar a Construyendo y publicando nuestra primera app multiplataforma (20)

Construyendo y publicando nuestra primera app multiplataforma