Interlat Group Estudio Latinoamericano de Comercio Electronico 2015
Webinar interlat apps_2012_carlos_a-perez_españa
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/ 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
jerilee-duenas-rengifo -
Category
Documents
-
view
152 -
download
2
description
Webinar interlat apps_2012_carlos_a-perez_españa
Transcript of Webinar interlat apps_2012_carlos_a-perez_españa
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
Í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
¿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 multiplataforma.
Estudio de la solución: Tecnologías disponibles
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
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
Tipografías 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 compatibilidad
Muy ligero
Ampliamente usado‘write less, do more’
Documentación
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/
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, pero no definitiva.
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
