www.interlat.co  –  info@interlat.co  -­‐    h2p://www.facebook.com/interlat  -­‐  www.twi2er.com/interlat  -­‐  PBX:  57(1)  658  2959    -­‐  Bogotá  -­‐  Colombia  Aula  Virtual:  h2p://www.interlat.co/moodle/

Conferencista:  Carlos Alonso Pérez  

País: España

Módulo IV:  Móvil Apps Desarrollo con HTML5

Índice  de  contenidos

• La  Web  • Caso  prácPco  de  desarrollo  • jQuery  Mobile  • HTML5

La  web:  Evolución

• Inicialmente:  Herramienta  para  visualizar  archivos  remotos  que  cambiaban  muy  ocasionalmente.  

• El  contenido  se  genera  dinámicamente  en  los  servidores.  • Se  añade  interacPvidad  a  los  siPos  web.  • Pasan  unos  años  en  blanco...  • Se  permite  comunicar  a  la  web  con  los  servidores  sin  

necesidad  de  recargar  la  página  al  completo.  • Se  añade  soporte  naPvo  y  estándar  para  muchas  

caracterísPcas  mulPmedia  y  de  gráficos.  Se  aumentan  las  prestaciones  con  caracterísPcas  como  geolocalización,  almacenamiento  local  de  datos,  etc...

La  web

• La  web  es  un  entorno  completo  de  programación  de  aplicaciones  que  uPliza:  

• HTML  para  definir  su  estructura  • CSS  para  definir  la  presentación  • JS  para  la  lógica

Desarrollo  web:  Evolución

• El  desarrollo  es  simplemente  maquetación.  

• Se  añade  interacPvidad  con  JS,  pero  solo  como  elemento  “decoraPvo”,  nada  importante.  Nadie  se  plantea  que  JS  valga  para  otra  cosa.  

• Aparecen  DOM  y  AJAX.  Las  páginas  web  ya  pueden  comunicarse  con  servidores  sin  recargar  la  página.  Son  mucho  más  usables  y  úPles.  

• 2007:  Aparece  Google  Gears:  Extensión  para  navegadores  que  añadía  capacidades  como  almacenamiento  local,  threads  en  background,  etc...  

• Actualmente  podemos  desarrollar  aplicaciones  web  prácPcamente  como  si  se  tratase  de  aplicaciones  de  escritorio.

Aplicaciones  Web:  Ventajas

• Para  el  usuario:  – No  Pene  necesidad  de  instalar  la  aplicación  ni  desinstalarla  si  no  

le  gusta.  – Actualizaciones  transparentes.  

• Para  el  desarrollador:  – Ventajas  de  sus  usuarios:  

• No  hay  que  escribir  código  de  instaladores/desinstaladores  • Desarrollar  una  aplicación  con  pequeños  incrementos  y  saber  que  todos  los  usuarios  estarán  actualizados  siempre.  

– La  web  es  mulPplataforma,  por  tanto,  las  aplicaciones  web  son  mulPplataforma.

Aplicaciones  Web:  Desventajas

• Se  ejecuta  en  el  navegador  

• Los  datos  se  deben  descargar  del  servidor.

Rendimiento

Caso  PrácPco

• ObjePvos  

• Problemas  

• Soluciones  

• Viabilidad  

• Decisión  final

ObjePvos:  Triunfar

ObjePvos:  Triunfar

¿Qué  hace  falta  para  triunfar?

¿Qué  hace  falta  para  triunfar?

¿Qué  hace  falta  para  triunfar?

¿Qué  hace  falta  para  triunfar?

Y ...

Llegar  a  todos  los  públicos

Fragmentación

Fragmentación  en   Sistemas  OperaPvos

Fragmentación  en  pantallas

Fragmentación  método  de  entrada

Fragmentación  hardware

Fragmentación  errores  soqware

Fragmentación  conclusión

Equilibrio

Capacidades utilizadas

Clientes Potenciales

vs

Solución:  Desarrollo  mulPplataforma

Solución:  Tecnologías

Viabilidad

• Geolocalización  (GPS)  • Reproducción  mulPmedia  • Sensores  de  movimiento  • Almacenar  datos  locales  • Acceso  offline

• Otros  sensores  • Cámara  • NoPficaciones  • Web  GL  • Alto  rendimiento

h2p://mobilehtml5.org/

SI NO

Decisión  final

jQuery-­‐Mobile

• MulPplataforma,  mulPdisposiPvo  y  mulPnavegador  • Interfaz  opPmizada  para  disposiPvos  tácPles  • Diseño  comletamente  personalizable  • HTML5  no  intrusivo  • Carga  contenido  dinámico  a  través  de  AJAX  • Construido  sobre  el  ya  conocido  jQuery  • Ligero  • Mejora  progresiva  • ...

Probando  nuestras  aplicaciones

• Apache  HTTP  Web  Server  +  

• DisposiPvos  • DisposiPvos  reales  • Navegadores  remotos  • h2p://www.deviceanywhere.com  

• Emuladores  y  Simuladores  • Amigos

Construyendo  una  app  mulPplataforma

• h2p://diplomado-­‐test.herokuapp.com/demos

Primeros  pasos

<!DOCTYPE html> <html><head> <meta charset="utf-8" /> <title>Your Title</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>

<script src="http://code.jquery.com/jquery-1.8.2.min.js"> </script>

<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>

<meta name="viewport" content="width=device-width, initial-scale=1"></head> <body> </body></html>

Primeros  pasos

<!DOCTYPE html> <html><head> ... <meta name="viewport" content="width=device-width, initial-scale=1"> ...</head> <body> </body></html>

• Inicialmente  no  debería  estar  escalado  ni  ser  más  ancho  que  el  disposiPvo.

Arquitectura

• Unidad  básica:  page  • Cada  página  es  un  div  con  un  role  específico  • Un  documento  HTML  puede  contener  varias  páginas,  pero  sólo  una  será  visible.

Arquitectura

• Cada  página  está  compuesta  de  otras  secciones  • Cada  sección  es  un  div  con  un  role  específico

Role Descripción Role Descripción

page Define  una  página header Cabecera  de  página

content Contenido  de  página footer Pie  de  página

navbar Barra  de  navegación. button Un  botón

controlgroup Un  componente collapsible Panel  de  contenido  colapsable

collapsible-set Grupo  de  paneles  colapsables fieldcontain Contenedor  de  campos  de  

formulario

listview Una  lista dialog Cuadro  de  diálogo

slider Control  de  valores  booleanos

La  página

• La  única  sección  obligatoria  es  content

<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>

Navegación

• Se  uPlizan  enlaces  HTML  <a>• Tipos  de  enlaces:  • A  otra  página  del  mismo  documento  • A  una  página  en  otro  documento  • Absolutos,  a  otra  página  web  • Especiales  (SMS,  llamada,  etc...)  

• jQuery  Mobile  se  encarga  de  manejar  el  historial  para  poder  volver  atrás.

Navegación• Enlace  a  otra  página  del  mismo  documento

<body> <div data-role="page" data-title="Pagina 1"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <p>Go to page <a href="#page2">2</a></p> </div> <div data-role="footer" data-position="fixed"> <h4>Footer</h4> </div> </div> <div data-role="page" id="page2" data-title="Pagina 2" data-add-back-btn="true" data-back-btn-text="Previous"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <p>Content of page 2</p> </div> <div data-role="footer" data-position="fixed"> <h4>Footer</h4> </div> </div></body>

Navegación• El  enlace  una  otra  página  de  otro  documento  es  un  enlace  normal,  

el  framework  detectará  que  se  trata  de  un  documento  jQM  y  lo  usará  como  tal.  

• jQM  descarga  el  nuevo  documento  con  AJAX.  

• Reglas:  • El  desPno  del  enlace  debe  ser  un  documento  jQM  

• El  desPno  debe  estar  alojado  en  el  mismo  dominio.  

• El  desPno  debe  ser  un  documento  jQM  de  una  sola  página.  

• El  enlace  no  debe  declarar  atributo  target.  

• jQM  permite  precargar  (prefetch)  enlaces  con  alta  probabilidad  de  ser  visitados  para  reducir  Pempos  de  espera.

<a href=‘page2.html’ data-prefetch>Go to page 2</a>

Navegación• Enlaces  a  páginas  externas  a  nuestra  aplicación.  

• Reglas:  • Añadiendo  el  atributo  data-­‐rel=”external”  al  elemento  <a>  

• Definiendo  el  atributo  target=”_blank”  al  elemento  <a>  

• Cuando  el  dominio  enlazado  es  disPnto  al  de  nuestro  documento.

<a href=‘http://www.google.com’ data-rel=”external”>Go to Google</a>

<a href=‘http://www.google.com’ target=”_blank”>Go to Google</a>

<a href=‘http://www.google.com’>Go to Google</a>

Navegación• Enlaces  especiales  son  enlaces  que  desencadenan  acciones  

especiales  dependiendo  del  protocolo  que  uPlizan.

Acción Protocolo Ejemplo

Llamada  telefónica tel <a  href=”tel:+18002233544”>...</a>

Llamada  facePme facetime <a  href=”facePme:101010”>...</a>

Llamada  Skype skype <a  href=”skype:skype_user?call”>...</a>

Mandar  email mailto <a  href=”mailto:a@example.com”>...</a>

Mandar  SMS sms <a  href=”sms://+18002233544”>...</a>

h2p://www.iana.org/assignments/uri-­‐schemes.html

Navegación• Podemos  decidir  con  qué  transición  se  cambiará  de  página.  

• jQM  implementa  las  transiciones  usando  CSS3,  que,  en  la  mayoría  de  los  disposiPvos  está  acelerado  por  hardware,  si  está  disponible.  

• jQM  aplicará,  por  defecto,  la  animación  inversa  para  el  evento  de  vuelta  atrás.

• Creamos  una  página  para  cada  sección  y  las  enlazamos  desde  la  página  principal.  

• Cada  página  Pene  un  script  .js  asociado,  que  se  enlaza  desde  la  página  principal.

Navegación

... <script src="js/storage.js"></script> <script src="js/canvas.js"></script> <script src="js/video.js"></script></head> <body> <div data-role="page" id="main-menu"> <div data-role="header"> <h1 id="header-title">HTML 5 Catalog</h1> </div> <div data-role="content"> <a href="#geolocation">Geolocation</a> <a href="pages/canvas.html">Canvas</a> <a href="pages/storage.html">Offline Storage</a> <a href="pages/video.html">Video Player</a> </div>...

Componentes

Componentes

Componentes

Componentes

Componentes

<div data-role="page" id="main-menu"> <div data-role="header"> <h1 id="header-title">HTML 5 Catalog</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#geolocation">Geolocation</a></li> <li><a href="pages/canvas.html">Canvas</a></li> <li><a href="pages/storage.html">Offline Storage</a></li> <li><a href="pages/video.html">Video Player</a></li> </ul> </div> <div data-role="footer" data-position="fixed"> <h1>&nbsp;</h1> </div></div>

• El  enlace  a  geolocaPon  es  interno,  porque  en  algunos  navegadores  no  funciona  la  geolocalización  si  se  enlaza  de  forma  externa.

Javascript  API:  Eventos• Del  document  (aplicación):  

• mobileinit,  ready,  load,  orientaPonchange    

• De  cada  página:  

• pagebeforecreate,  pagecreate,  pageinit,  pageremove  

• pagebeforeload,  pageload,  pageloadfailed  +  argumento  

• De  cada  elemento  del  DOM  

• tap,  taphold,  swipeleq,  swiperight

<script> $(document).bind("mobileinit", function(){ // Place for global configuration of jQM });</script>

Javascript  API:  UPlidades• UPlidades  data-*  

• Filtro  :jqmData  

• Métodos  jqmData  y  jqmRemoveData  

• UPlidades  de  página  • $.mobile.activePage  referencia  la  página  (div)  acPva  • $.mobile.pageContainer  referencia  la  div  content  de  la  página  

acPva.  • $.mobile.changePage()  cambio  de  página  programáPcamente  • $.mobile.loadPage()  carga  una  página,  pero  no  la  muestra

Javascript  API:  Contenido  dinámico

• Debemos  indicar  a  jQM  que  vamos  a  añadir  contenido  para  que  aplique  los  esPlos  CSS,  transiciones,  etc...  necesarios.  

• Creación  • $(‘#new_page’).page();

• $(‘#new_a’).button();

• Actualización  • $(‘#checkbox’).val(‘true’).checkboxradio(‘refresh’);

• $(‘#list’).listview(‘refresh’);

• $(‘#changed_page’).trigger(‘create’);

E3quetas  semán3cas

Acceso  HardwareAlmacenamiento  local

Conec3vidad

Mul3media

Gráficos

Acceso  Hardware:  Geolocalización

• El  API  de  Geolocalización  permite  a  los  programas  JS  acceder  a  la  posición  en  el  mundo  del  usuario.  

• Los  navegadores  que  soportan  geolocalización  definen  el  objeto  navigator.geolocation,  que  Pene  tres  métodos:  • getCurrentPosition():  Solicita  la  posición  del  usuario  

• watchPosition():  Solicita  la  posición  del  usuario  y  monitoriza  los  cambios  

• clearWatch():  Indica  que  quiere  dejar  de  monitorizar  la  posición  del  usuario.  

• El  navegador  puede  acceder  a  la  posición  de  tres  maneras:  • Sensor  GPS  

• IP  

• WIFI  

• Cualquier  método  requiere  comunicación  con  servidores  o  satélites,  por  tanto,  este  API  será  siempre  asíncrono.

Acceso  Hardware:  Geolocalización

<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

$('#geolocation').live('pageinit', function(){ navigator.geolocation.getCurrentPosition (function(pos) { var lat = pos.coords.latitude; var lng = pos.coords.longitude; var latlng = new google.maps.LatLng (lat, lng); var options = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var $content = $("#geolocation div:jqmData(role=content)"); $content.height (screen.height - 100); var map = new google.maps.Map ($content[0], options); new google.maps.Marker ({ map: map, animation: google.maps.Animation.DROP, position: latlng }); }, function(e) { alert("Error: " + e.message); }, {maximumAge: 30000, timeout: 30000, enableHighAccuracy: true});});

Gráficos

$('#canvas').live('pageinit', function() { var context = $('#theCanvas')[0].getContext('2d'); context.beginPath(); context.rect(20, 20, 200, 100); var grd = context.createLinearGradient(20, 20, 220, 120); grd.addColorStop(0, '#8ED6FF'); grd.addColorStop(1, '#004CB3'); context.fillStyle = grd; context.fill(); context.stroke(); context.beginPath(); context.arc(70, 200, 50, 0, 2 * Math.PI, false); grd = context.createLinearGradient(30, 150, 120, 250); grd.addColorStop(0, '#000000'); grd.addColorStop(1, '#BC2920'); context.fillStyle = grd; context.fill(); context.stroke();});

Almacenamiento  local

• localStorage  y  sessionStorage  son  objetos  JS  persistentes  que  guardan  datos  serializados  (cadenas)  

• localStorage  guarda  los  datos  hasta  que  se  borran  explícitamente,  sessionStorage  hasta  que  el  navegador  se  cierra  

• Same-­‐origin  policy

var name = localStorage.username;if (!name) {

localStorage.username = “Carlos”;}

var point = { x: 1, y: 2 };localStorage.point = JSON.stringify(point);var readPoint = JSON.parse(localStorage.point);

delete localStorage.point;

Almacenamiento  local

<script> $('#storage').bind('pageinit', function(){ refreshList(); $('#add_btn').bind('click', function() { var $input = $('#item'); if (!$input.val()) { alert("You have to add some text!"); } else { var arr = localStorage.items ? JSON.parse(localStorage.items) : []; arr.push($input.val()); localStorage.items = JSON.stringify(arr); } refreshList(); }); }); function refreshList() { var $list = $("#storage ol:jqmData(role=listview)").empty(); var arr = localStorage.items ? JSON.parse(localStorage.items) : []; if (arr.length) { $.each(arr, function(index, value) { var $li = $('<li>').text(value); $list.append($li); }); } $list.listview("refresh"); }</script>... <div data-role="content"> <input type="text" id="item" placeholder="Add Item..." value=""/> <input type="button" id="add_btn" value="Add Item" data-icon="plus" data-inline="true"/> <ol data-role="listview" data-inset="true"> <ol></div>

MulPmedia$('#video').live('pageinit', function(){ var player = $('#theVideo'); var status = $('#status'); player.bind('loadStart', function(event) { status.val("Loading..."); }); ... $('#play_btn').bind('click', function() { var video = $('#theVideo').get(0); var playables = VIDEO_RESOURCES.filter(function(videoObj) { return video.canPlayType(videoObj.type); }); if (playables.length) { video.src = playables[0].path; video.load(); video.play(); } else { alert("No compatible video format provided!"); } });}); var VIDEO_RESOURCES = [ {type: 'video/mp4', path: '/html5catalog/resources/141.mp4' }, {type: 'video/webm', path: '/html5catalog/resources/movements_ES.webm' }, {type: 'video/ogg', path: '/html5catalog/resources/movements_ES.ogg' }];

• Dependiendo  de  cada  navegador  y  plataforma  se  soportará  un  formato  de  vídeo  u  otro,  por  tanto  debemos  proporcionar  varios.

www.interlat.co  –  info@interlat.co  -­‐    h2p://www.facebook.com/interlat  -­‐  www.twi2er.com/interlat  -­‐  PBX:  57(1)  658  2959    -­‐  Bogotá  -­‐  Colombia  Aula  Virtual:  h2p://www.interlat.co/moodle/

Gracias!Carlos Alonso Pérez Developer

Twitter: @calonso LinkedIn: mrcalonso Mail: info@mrcalonso.com