En este artículo vamos a iniciarnos en la creación de sitios para dispositivos móviles (smartphones, tablets, etc.) con el nuevo framework de desarrollo Jquery Mobile.
Jquery Mobile es el nuevo framework de desarrollo creado específicamente para implementar aplicaciones web en dispositivos móviles, es compatible con una amplia gama de dispositivos y navegadores, recientemente fue liberada la versión 1.1 Final.
Obviamente, esta basado en la archi-conocida librería Jquery pero fue implementado de forma que los desarrolladores puedan aprenderlo fácil y rápidamente; como veremos más adelante, es posible comenzar a desarrollar con sólo tener conocimientos de HTML básico.

Instalación y configuración

Lo primero que debemos hacer es descargarnos el framework desde el sitio web oficial de Jquery Mobile, la última versión estable es la 1.1.0; una vez que tengamos el archivo zip debemos descomprimirlo en nuestra carpeta de trabajo y con eso finalizamos la instalación.

Lo que tenemos que hacer ahora es crear nuestra primera página, para eso escribimos el siguiente código y lo guardamos como index.html.

 
 
	 
	 
	 
	
	
	
 
 


	

		
Inicio
	


	
	
		
Hola Mundo!!
		
	

Lo importante es referenciar en el header a las librerías de Jquery, Jquery UI y los estilos CSS; se recomienda linkear los archivos de la Jquery CDN para mejorar la performance, pero de todas formas es posible usar tus archivos locales.
Otro detalle a tener en cuenta es la primera línea, que indica que vamos a usar HTML5, los navegadores más viejos ignorarán esa etiqueta sin problemas.

Además, tenemos que agregar una etiqueta «meta viewport» para indicar que el ancho de la página se ajuste al ancho del dispositivo y para completar nuestra primera página debemos agregar, una «página», esto lo logramos con la etiqueta div y un atributo data-role=»page».

Creando páginas internas

En caso de querer más páginas bastaría con agregar div’s con data-role=»page», de esta forma generamos «páginas internas» ya que físicamente están las dos en un mismo archivo HTML, para poder identificarlas debemos anexar un atributo ID a cada página y así podremos referenciarlas y navegar entre ellas, veamos el ejemplo:

 
 
	 
	 
	 
	
	
	
 
 



	

		
Pagina inicio
	


	
	
		
Hola Mundo!!
	
		
Ir a la 2da pagina: 2da pagina interna
		
	





	

		
Extra
	


	
	
		
Contenido de la 2da pagina.....
		
		
Volver a Inicio
	
	


	

		
Pie de pagina
	

Así quedaría nuestro sitio básico.

Antes de terminar, simplemente comentar que cada página (div) se divide en secciones internas que representan el cabezal, el contenido y el pie de la página, esto se hace mediante atributos data-role, «header», «content» y «footer» respectivamente, con estas divisiones podemos organizar el contenidos de nuestras páginas de forma mas sencilla.

Para finalizar, mencionar que existe muy buena documentación en el sitio oficial de Jquery Mobile pero por ahora sólo en inglés, de todas formas remarcar que Jquery Mobile es un framework muy completo, poderoso y de fácil uso que en nuestra opinión ofrece grandes posibilidades a los desarrolladores de sitios y aplicaciones web.

Más información:

Sitio Oficial Jquery Mobile

Lista de dispositivos compatibles con Jquery Mobile

Créditos de fotografía: reticulating via photo pin cc