Descargar para leer sin conexión
![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>
... Footer ...</div>](https://image.slidesharecdn.com/webinarinterlatapps2012carlosa-perezespaa-120907184611-phpapp02/85/Webinar-interlat-apps_2012_carlos_a-perez_espana-32-320.jpg)
![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>
... Footer ...</div>](https://image.slidesharecdn.com/webinarinterlatapps2012carlosa-perezespaa-120907184611-phpapp02/85/Webinar-interlat-apps_2012_carlos_a-perez_espana-33-320.jpg)
Subido porCommunity Managers Latam
Webinar interlat apps_2012_carlos_a-perez_españa
La presentación se centra en la construcción y publicación de una aplicación multiplataforma, abordando la planificación, desarrollo y soluciones a la fragmentación de sistemas y dispositivos. Se destacan tecnologías como HTML5, CSS3 y jQuery Mobile para mejorar la experiencia del usuario y facilitar el desarrollo. Finalmente, se discuten varias opciones de publicación, incluyendo aplicaciones nativas, híbridas y web, con recomendaciones para obtener un funcionamiento offline.
Más contenido relacionado
Similar a Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
- 1. Miércoles de Profundizaciónen 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
- 2. Índice de lapresentación • Planeando nuestra aplicación • Construcción • Publicación • Conclusiones
- 3. Planeando nuestra aplicación •Objetivos • Problemas • Soluciones • Viabilidad • Decisión final
- 4.
- 5. ¿Qué hace faltapara triunfar? Y ...
- 6. Llegar a todoslos públicos
- 7.
- 8.
- 9. Fragmentación: Tamaño depantalla.
- 10. Fragmentación: Método deentrada.
- 11.
- 12.
- 13. Fragmentación: Conclusión Equilibrio Capacidades utilizadas vs Clientes Potenciales
- 14. Solución: Una únicaaplicación multiplataforma.
- 15. Estudio de lasolución: Tecnologías disponibles
- 16. HTML 5. Potenciay 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
- 17. Javascript. El lenguajede programación de la web. Object isFunction Clases y objetos prototype typeof eval instanceof new Function() Object.isPrototypeOf()
- 18. CSS 3. Experienciade 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
- 19. jQuery Mobile. Desarrollomóvil rápido y sencillo Javascript no intrusivo Máxima compatibilidad Plugins ‘write less, do more’ Ampliamente usado Muy ligero Documentación
- 20. 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/
- 21.
- 22. Construyendo nuestra aplicaciónmultiplataforma • Primeros pasos • Componentes UI • Capacidades HTML 5 • Diseño personalizado • Demos
- 23. Primeros pasos. Eldocumento <!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>
- 24. Primeros pasos. Elviewport <head> .... <meta name=”viewport” content=”width=device-width, initial-scale=1”> </head> <!-- Sin Zoom --> <meta .... user-scalable=no”>
- 25. Primeros pasos. Estructurade 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>
- 26.
- 27.
- 28.
- 29.
- 30. Componentes UI. Menuy 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>
- 31. Capacidades HTML5. Geolocalización <scripttype="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>
- 32. Capacidades HTML5. Canvas varcontext = $('#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> ... Footer ...</div>
- 33. Capacidades HTML5. Almacenamientode 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> ... Footer ...</div>
- 34. Diseño personalizado. • CSS •jQuery Theme Roller • Fireworks Theme editor <head> ... <link rel="stylesheet" href="css/custom_css.min.css" /> ... </head>
- 35.
- 36. Publicando nuestra aplicaciónmultiplataforma • Como aplicación nativa • Como aplicación híbrida • Como aplicación web
- 37. Como aplicación nativa ... ...
- 38. Como aplicación híbrida ... ...
- 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>
- 40. 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
- 41. Conclusión Buena solución, pero no definitiva.
- 42. 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