![Page 1: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/1.jpg)
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: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/2.jpg)
Índice de la presentación
• Planeando nuestra aplicación
• Construcción
• Publicación
• Conclusiones
![Page 3: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/3.jpg)
Planeando nuestra aplicación
• Objetivos
• Problemas
• Soluciones
• Viabilidad
• Decisión final
![Page 4: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/4.jpg)
Objetivo: Triunfar
![Page 5: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/5.jpg)
¿Qué hace falta para triunfar?
Y ...
![Page 6: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/6.jpg)
Llegar a todos los públicos
![Page 7: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/7.jpg)
Problema: La fragmentación
![Page 8: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/8.jpg)
Fragmentación: Sistemas Operativos.
![Page 9: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/9.jpg)
Fragmentación: Tamaño de pantalla.
![Page 10: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/10.jpg)
Fragmentación: Método de entrada.
![Page 11: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/11.jpg)
Fragmentación: Hardware.
![Page 12: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/12.jpg)
Fragmentación: Errores software.
![Page 13: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/13.jpg)
Fragmentación: Conclusión
Equilibrio
Capacidades utilizadas
Clientes Potenciales
vs
![Page 14: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/14.jpg)
Solución: Una única aplicación multiplataforma.
![Page 15: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/15.jpg)
Estudio de la solución: Tecnologías disponibles
![Page 16: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/16.jpg)
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: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/17.jpg)
Javascript. El lenguaje de programación de la web.
prototype
eval
isFunction
typeof
instanceof
Object
new Function()
Object.isPrototypeOf()
Clases y objetos
![Page 18: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/18.jpg)
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: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/19.jpg)
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: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/20.jpg)
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: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/22.jpg)
Construyendo nuestra aplicación multiplataforma
• Primeros pasos
• Componentes UI
• Capacidades HTML 5
• Diseño personalizado
• Demos
![Page 23: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/23.jpg)
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: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/24.jpg)
Primeros pasos. El viewport
<head>.... <meta name=”viewport” content=”width=device-width, initial-scale=1”></head>
<!-- Sin Zoom --><meta .... user-scalable=no”>
![Page 25: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/25.jpg)
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: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/30.jpg)
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: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/31.jpg)
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: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/32.jpg)
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: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/33.jpg)
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: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/34.jpg)
Diseño personalizado.
• CSS
• jQuery Theme Roller
• Fireworks Theme
editor<head>...<link rel="stylesheet" href="css/custom_css.min.css" />...</head>
![Page 36: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/36.jpg)
Publicando nuestra aplicación multiplataforma
• Como aplicación nativa
• Como aplicación híbrida
• Como aplicación web
![Page 37: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/37.jpg)
Como aplicación nativa
... ...
![Page 38: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/38.jpg)
Como aplicación híbrida
... ...
![Page 39: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/39.jpg)
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: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/40.jpg)
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: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/41.jpg)
Conclusión
Buena solución, pero no definitiva.
![Page 42: Webinar interlat apps_2012_carlos_a-perez_españa](https://reader033.vdocuments.site/reader033/viewer/2022051817/5492bee8b479599e768b4b91/html5/thumbnails/42.jpg)
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