Introducción

¿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

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

/* Start with core styles outside of a media query that apply to mobile and up */
/* Global typography and design elements, stacked containers */
body { font-family: Helvetica, san-serif; }
H1 { color: green; }
a:link { color:purple; }
 
/* Stack the two content containers */
.main,
.sidebar { display:block; width:100%; }
 
/* First breakpoint at 576px */
/* Inherits mobile styles, but floats containers to make columns */
@media all and (min-width: 36em){
	.main { float: left; width:60%; }
	.sidebar { float: left; width:40%; }
}
 
/* Second breakpoint at 800px */
/* Adjusts column proportions, tweaks base H1 */
@media all and (min-width: 50em){
	.main { width:70%; }
	.sidebar { width:30%; }
 
	/* You can also tweak any other styles in a breakpoint */
	H1 { color: blue; font-size:1.2em }
}

Plantilla html

• Visitar página jQueryMobile para su descarga.
• Mejor utilizar un CDN:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>