Miércoles de Profundización en                                     e-business                                     Tema : C...
Í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    EquilibrioCapacidades 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 browserEtiquetas semánticas      Multimedia y Gráficos          Comunicaciones en  ...
Javascript. El lenguaje de programación de la web.                          Object           isFunction                   ...
CSS 3. Experiencia de usuario de última generación        Selectores              Efectos en textos                       ...
jQuery Mobile. Desarrollo móvil rápido y sencillo    Javascript no intrusivo              Máxima compatibilidad    Plugins...
Viabilidad técnica           SI                         NO• Geolocalización (GPS)     • Otros sensores• Reproducción multi...
Decisión final
Construyendo nuestra aplicación multiplataforma• Primeros pasos• Componentes UI• Capacidades HTML 5• Diseño personalizado•...
Primeros pasos. El documento    <!DOCTYPE html>    <html>        <head>    <meta charset="utf-8" />                   <tit...
Primeros pasos. El viewport<head>....    <meta name=”viewport”        content=”width=device-width, initial-scale=1”></head...
Primeros pasos. Estructura de la aplicación                <body>                    <div data-role="page">               ...
Componentes UI
Componentes UI.
Componentes UI
Componentes UI
Componentes UI. Menu y Toolbar<div data-role="content">  <ul data-role="listview">    <li><a href="#geolocation">Geolocati...
Capacidades HTML5. Geolocalización<script type="text/javascript">  $(#geolocation).live(pageinit, function(){   navigator....
Capacidades HTML5. Canvasvar context = $(#theCanvas)[0].getContext(2d);context.beginPath();context.rect(20, 20, 200, 100);...
Capacidades HTML5. Almacenamiento de datosvar $input = $(#item);var arr = localStorage.items ? JSON.parse(localStorage.ite...
Diseño personalizado.• CSS• jQuery Theme Roller• Fireworks Theme editor<head>...<link rel="stylesheet" href="css/custom_cs...
Demos
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="app...
Como aplicación web. Funcionamiento offline CACHE MANIFEST: # version 1.0 # Archivos jQuery http://code.jquery.com/jquery-...
Conclusión        Buena solución, pero no definitiva.
Carlos Alonso Pérez                                                     Senior Developer - Unkasoft                       ...
Upcoming SlideShare
Loading in …5
×

APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

444 views
368 views

Published on

Conoce como construir y publicar la primera APPS multiplataforma con Carlos Perez de España, docente de la diplomatura en Aplicaciones móviles.

Published in: Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
444
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

APPS Aplicaciones móviles: Construyendo y publicando nuestro primera APPS multiplataforma

  1. 1. 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
  2. 2. Índice de la presentación• Planeando nuestra aplicación• Construcción• Publicación• Conclusiones
  3. 3. Planeando nuestra aplicación• Objetivos• Problemas• Soluciones• Viabilidad• Decisión final
  4. 4. Objetivo: Triunfar
  5. 5. ¿Qué hace falta para triunfar? Y ...
  6. 6. Llegar a todos los públicos
  7. 7. Problema: La fragmentación
  8. 8. Fragmentación: Sistemas Operativos.
  9. 9. Fragmentación: Tamaño de pantalla.
  10. 10. Fragmentación: Método de entrada.
  11. 11. Fragmentación: Hardware.
  12. 12. Fragmentación: Errores software.
  13. 13. Fragmentación: Conclusión EquilibrioCapacidades utilizadas vs Clientes Potenciales
  14. 14. Solución: Una única aplicación multiplataforma.
  15. 15. Estudio de la solución: Tecnologías disponibles
  16. 16. HTML 5. Potencia y capacidades para tu browserEtiquetas 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. 17. Javascript. El lenguaje de programación de la web. Object isFunction Clases y objetos prototype typeof eval instanceof new Function() Object.isPrototypeOf()
  18. 18. CSS 3. Experiencia de usuario de última generación Selectores Efectos en textos AnimacionesTipografías personalizadas Esquinas redondeadas Transformaciones Semi Transparencias Organización en columnas Gradientes Sombras Colores personalizados
  19. 19. 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
  20. 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. 21. Decisión final
  22. 22. Construyendo nuestra aplicación multiplataforma• Primeros pasos• Componentes UI• Capacidades HTML 5• Diseño personalizado• Demos
  23. 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>
  24. 24. Primeros pasos. El viewport<head>.... <meta name=”viewport” content=”width=device-width, initial-scale=1”></head><!-- Sin Zoom --><meta .... user-scalable=no”>
  25. 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>
  26. 26. Componentes UI
  27. 27. Componentes UI.
  28. 28. Componentes UI
  29. 29. Componentes UI
  30. 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>
  31. 31. 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>
  32. 32. Capacidades HTML5. Canvasvar 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"> <canvasid=”theCanvas”></canvas> </div> ... Footer ...</div>
  33. 33. Capacidades HTML5. Almacenamiento de datosvar $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. 34. Diseño personalizado.• CSS• jQuery Theme Roller• Fireworks Theme editor<head>...<link rel="stylesheet" href="css/custom_css.min.css" />...</head>
  35. 35. Demos
  36. 36. Publicando nuestra aplicación multiplataforma• Como aplicación nativa• Como aplicación híbrida• Como aplicación web
  37. 37. Como aplicación nativa ... ...
  38. 38. Como aplicación híbrida ... ...
  39. 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. 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. 41. Conclusión Buena solución, pero no definitiva.
  42. 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

×