Usuario:Juanda/jqueryMobile/Introducción

= Introducción =

¿Qué es jQuery Mobile

 * Framework para crear intefaces de usuario basadas en HTML5
 * Construido a partir de la librería jQuery y de jQueryUI
 * Orientado especificamente para móviles
 * Algunos ejemplos:
 * Web móvil de Ikea
 * Disney World
 * Moulin Rouge
 * Universidad de Stanford
 * Y muchos más

Diseño responsivo

 * Uso de CSS media queries: hojas de estilo css especificas para dispositivos según anchura de pantalla, resolución o características.
 * Grid fluido, especificando sus elementos mediante unidades relativas.
 * Imágenes y media también en unidades relativas.

Diseño responsable

 * Se utiliza el criterio "mobile first":
 * Diseños sencillos
 * Diseños más complejos mediante media queries y siempre con un min-width
 * Se evita llevar un diseño pesado y aligerarlo para conseguir un time load aceptable para la red 3G.


 * Imágenes específicas para el tamaño de pantalla de los móviles, tanto por ancho de banda como por tamaño de pantalla, ver ejemplo
 * Uso de versiones minified y gzip

Ejemplo CSS Mobile First

 * Las media queries en ems en vez de pixeles para asegurarnos que el layout se adaptará al cambio del tamaño de las fuentes, además de al ancho de pantalla.
 * Para calcular la anchura en ems, se divide en ancho de nuestro objetivo entre 16px (tamaño de letra por defecto)
 * Aplicaciones Web accesibles via navegador

Tipo de aplicaciones Web con PhoneGap

 * PhoneGap sirve para realizar aplicaciones que utilicen las características del dispositivo:
 * Camara, GPS, libreta de teléfonos....


 * La mayoría de las aplicaciones web basadas en PhoneGap consumirán mediante javascript servicios web
 * Ejemplos de aplicaciones de este tipo serían Google Maps, FourSquare...

Necesidades en desarrollos web para móviles

 * Desarrollo de la aplicación para varias plataformas
 * La experiencia de usuario en la aplicación debe ser consistente entre plataformas:
 * Un usuario puede migrar de SO incluso utilizar varios
 * La experiencia de usuario podría variar entre dispositivos en función de las características y capacidades de los dispositivos


 * Varios equipos de desarrollo no siempre es la mejor opción, por las necesidades de coordinación inherentes.



PhoneGap

 * Se basa en la parte común de todos los dispositivos móviles: el navegador
 * Los nuevos navegadores se adhieren a estándares como HTML5/CSS3.
 * HTML5 nos da mucha funcionalidad: procesos en background mediante web workers, soporte offline, base de datos...
 * CSS3 permite que nos despidamos de flash para realizar gradientes, bordes redondeados, páginas responsivas, vistas de impresión, etc.
 * Todas las plataformas móviles excepto Windows 7 Phone utilizan un navegador basado en webkit



Webviews

 * Piensa en una aplicación PhoneGap como un navegador embebido dentro de la aplicación y que ejecuta HMTL5/CSS.
 * Estos navegadores embebidos es lo que se conoce como webview
 * Cada una de las pantallas de nuestra aplicación será un webview.
 * Desde el webview ejecutaremos código JavaScript que comunicará con código nativo del dispositivo.
 * Todos los dispositivos permiten al código en JavaScript hacer llamadas a código nativo en Java/C++/Objective C y al revés.