Page 1
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
Índice de la presentación
• Planeando nuestra aplicación
• Construcción
• Publicación
• Conclusiones
Page 3
Planeando nuestra aplicación
• Objetivos
• Problemas
• Soluciones
• Viabilidad
• Decisión final
Page 4
Objetivo: Triunfar
Page 5
¿Qué hace falta para triunfar?
Y ...
Page 6
Llegar a todos los públicos
Page 7
Problema: La fragmentación
Page 8
Fragmentación: Sistemas Operativos.
Page 9
Fragmentación: Tamaño de pantalla.
Page 10
Fragmentación: Método de entrada.
Page 11
Fragmentación: Hardware.
Page 12
Fragmentación: Errores software.
Page 13
Fragmentación: Conclusión
Equilibrio
Capacidades utilizadas
Clientes Potenciales
vs
Page 14
Solución: Una única aplicación multiplataforma.
Page 15
Estudio de la solución: Tecnologías disponibles
Page 16
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
Javascript. El lenguaje de programación de la web.
prototype
eval
isFunction
typeof
instanceof
Object
new Function()
Object.isPrototypeOf()
Clases y objetos
Page 18
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
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
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
Construyendo nuestra aplicación multiplataforma
• Primeros pasos
• Componentes UI
• Capacidades HTML 5
• Diseño personalizado
• Demos
Page 23
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
Primeros pasos. El viewport
<head>.... <meta name=”viewport” content=”width=device-width, initial-scale=1”></head>
<!-- Sin Zoom --><meta .... user-scalable=no”>
Page 25
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
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
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
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
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
Diseño personalizado.
• CSS
• jQuery Theme Roller
• Fireworks Theme
editor<head>...<link rel="stylesheet" href="css/custom_css.min.css" />...</head>
Page 36
Publicando nuestra aplicación multiplataforma
• Como aplicación nativa
• Como aplicación híbrida
• Como aplicación web
Page 37
Como aplicación nativa
... ...
Page 38
Como aplicación híbrida
... ...
Page 39
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
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
Conclusión
Buena solución, pero no definitiva.
Page 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/
Gracias!
Carlos Alonso PérezSenior Developer - [email protected] : @calonsohttp://www.linkedin.com/in/calonsoperez