Usuario:Juanda/phonegap/jquerymobile

= jQuery Mobile =

¿Qué es jQuery Mobile

 * Framework para crear intefaces de usuario basadas en HTML5
 * -Nos abstrae de las diferencias para el desarrollo entre los distintos navegadores.
 * -Write less, do more (jQuery)
 * -Diseño atractivo "out of the box": hacen diseñador al programador.


 * 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


 * Para ver las páginas correctamente:
 * Instala la extensión para Chrome Google Chrome to Phone para ver las páginas en el móvil
 * Cambia el user-agent del navegador (lo más fácil es mediante las Chrome Developer Tools).

Diseños 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

Ficheros y documentación

 * Visitar página jQueryMobile para su descarga.
 * Leer el tutorial que incluye.
 * Utilizaremos un CDN:

Atributo data-role

 * Utilizaremos el atributo data-role para definir las distintas partes de nuestra aplicación o sitio web.
 * Mira el siguiente código y analiza su comportamiento:

Estructura aplicación

 * Una aplicación tiene varias páginas y cajas de diálogo.
 * Mediante jQuery Mobile se definirán todas en la misma página html.
 * Cada página se puede abrir mediante un botón, que definirá su comportamiento mediante los atributos data-rel y data-transition:
 * Mira el siguiente código y analiza su comportamiento:

Formularios

 * Los toolbars en header y footer se crean simplemente añadiendo botones
 * Los botones son enlaces con los atributos data-role="button" y data-icon="delete"
 * El class="ui-bar" en el footer ha servido para añadir padding (ver api de jQueryMobile).
 * Los elementos del formulario son los habituales elementos HTML para formularios.
 * Cada elemento y su label se agrupan en un data-role="fieldcontain"


 * Mira el siguiente código y analiza su comportamiento:


 * Otro ejemplo de formulario:

Sin jQuery Mobile

 * Normalmente definimos los eventos mediante algún framework, por ejemplo jQuery.
 * Evitamos el uso de javascript directamente debido a las diferencias entre navegadores.
 * Mira el siguiente código y analiza su comportamiento:

Con jQuery Mobile

 * Los touch events son distintos a los eventos tradicionales del ratón:
 * Tap
 * Taphold (al menos 1s)
 * Swipe (Swipeleft y Swiperight)
 * Mira el siguiente código y analiza su comportamiento (es útil la extensión para Chrome Google Chrome to Phone).