Your SlideShare is downloading. ×
0
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Webinar interlat apps_2012_carlos_a-perez_españa
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Webinar interlat apps_2012_carlos_a-perez_españa

158

Published on

Webinar interlat apps_2012_carlos_a-perez_españa

Webinar interlat apps_2012_carlos_a-perez_españa

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
158
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×