Webinar interlat apps_2012_carlos_a-perez_españa

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

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

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

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
vs

Clientes Potenciales

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

Estudio de la solución: Tecnologías disponibles

HTML 5. Potencia y capacidades para tu browser

Etiquetas semánticas Multimedia y Gráficos Comunicaciones en
<nav> <section> canvas 2D y 3D tiempo real
<header> <figure> audio y vídeo Notificaciones
<footer> <article> gráficos vectoriales (SVG) WebSockets
<menu> Web workers

Acceso Hardware Funcionamiento offline
Almacenamiento local
Filesystem Sensores

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

Object
isFunction Clases y objetos

prototype
typeof
eval instanceof

new Function()
Object.isPrototypeOf()

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

Selectores Efectos en textos
Animaciones
Tipografías personalizadas Esquinas redondeadas
Transformaciones
Semi Transparencias Organización en columnas
Gradientes
Sombras Colores personalizados

jQuery Mobile. Desarrollo móvil rápido y sencillo

Javascript no intrusivo Máxima compatibilidad

Plugins ‘write less, do more’ Ampliamente usado

Muy ligero Documentación

Viabilidad técnica

SI NO
• Geolocalización (GPS) • Otros sensores
• Reproducción multimedia • Cámara
• Sensores de movimiento • Notificaciones
• Almacenar datos locales • Web GL
• Acceso offline • Alto rendimiento
http://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

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

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

Capacidades HTML5. Canvas

var context = $('#theCanvas')
[0].getContext('2d');context.beginPath();context.rect(20, 20, 200, 100);
context.fillStyle = context.createLinearGradient(20, 20, 220,
120);context.fill();

<div data-role="page" id="canvas" data-add-back-btn="true">
... Header ... <div data-role="content"> <canvas
id=”theCanvas”></canvas> </div>

Capacidades HTML5. Almacenamiento de datos

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

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

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
<html manifest="offline.appcache">
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
</html>
icons/*

NETWORK:
# Archivos que no se deben cachear

Conclusión

Buena solución, pero no definitiva.

Carlos Alonso Pérez
Senior Developer - Unkasoft
calonso@unkasoft.com
Twitter: @calonso
http://www.linkedin.com/in/calonsoperez

Gracias!
Aula Virtual: http://www.interlat.co/moodle/
www.interlat.co – info@interlat.co - http://www.facebook.com/interlat - www.twitter.com/interlat - PBX: 57(1) 658 2959 - Bogotá - Colombia

Webinar interlat apps_2012_carlos_a-perez_españa

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (7)

Similar to Webinar interlat apps_2012_carlos_a-perez_españa

Similar to Webinar interlat apps_2012_carlos_a-perez_españa (20)

Webinar interlat apps_2012_carlos_a-perez_españa