Empezando con jQueryMobile

Para empezar vamos a hablar un poco de cómo está estructurado jQuery Mobile.

Debo decir que es uno de los frameworks que más me ha gustado para móviles, es sencillo de usar y tiene la mayoría de los componentes que en un móvil podríamos llegar a necesitar.
El sitio es http://jquerymobile.com/ y lo más interesante es que su documentación es para móviles, bueno, también se puede ver en un PC pero lo interesante se lo veo porque muchas cosas ya están ahí implementadas y podemos ir a ver cómo funcionan con el famoso "Click derecho - Ver código fuente".

la documentación está en este link http://jquerymobile.com/demos/1.1.1/

Lo primero que hay que saber es que está construido en HTML5, por lo tanto el doctype hay que dejarlo así < !DOCTYPE html > como en cualquier otra página que vaya a incluir etiquetas de HTML5, lo siguiente es agregar la estructura de las etiquetas así:

< html >
< head >
< title > Mi titulo < / title>
< / head >

Esta es la misma que hay que escribir para cualquier página web, y además debemos incluir un META nuevo para que nuestra página se pueda ver en dispositivos móviles cómodamente porque evita el zoom que normalmente hace un navegador móvil. El meta es el siguiente:

< meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" >

Como les decía, este hace que el ancho de nuestra página sea el mismo del dispositivo y que la escala inicial sea 1 al igual que la escala inicial y la escala máxima y que el usuario no pueda escalar el sitio, en otras palabras limita el "pinchToZoom", que tan popular hizo el iPhone, que viene por defecto en las páginas web.
Esto es importante porque sino nuestra página no se verá como una para dispositivos móviles, sino que parecerá una página de escritorio común y corriente abierta desde un teléfono.

Lo siguiente que deben de hacer es incluír el archivo CSS y los JS necesarios:

< link rel="stylesheet" href="lib/jquery.mobile-1.1.0.min.css" / >
< script src="lib/jquery-1.7.2.min.js">< / script >
< script src="lib/jquery.mobile-1.1.0.min.js" >< / script >

La ubicación depende de dónde tengan los archivos, yo los guardo casi siempre en una carpeta llamada "lib".

Todo lo demás lo debemos incluir en el body de nuestra pagina.
Es muy importante mencionar que jQuery Mobile usa como base los atributos personalizados que nos permite tener HTML5 para interactuar facilmente con Javascript, por lo tanto lo que nosotros escribiremos para la interfaz de jQuery Mobile es html solamente.
¿Cómo funciona? pues para un header en la página necesitamos un div como el siguiente:

< div data-role="header" data-position="fixed" >
< h1 >Mi primera pagina< / h1 >
< / div >

El atributo personalizado es "data-role" que es donde se ubica qué tipo de componente será ese div, en este caso será un header y tiene otro atributo llamado data-position que al estar en "fixed" hace que nuestro header siempre esté hasta arriba, y el footer siempre esté abajo. Dentro tiene un H1, que es el que sirve para escribir el título a la página.

Para el contenido de la página podemos poner lo siguiente:

< div data-role="content" >
< h2 > Hola Mundo < / h2 >
< / div >

Ahora quitamos el "data-position" y sólo cambiamos el "data-role", esto formará parte del contenido de la página que podría ser "scrollable".

Para poner un footer necesitamos lo siguiente:

< div data-role="footer" data-position="fixed" >
< h3 > Mi barra inferior < / h3 >
< / div >

Volvemos a escribir el "data-position" y nuevamente cambiamos el "data-role" y el contenido.

Este código nos puede generar nuestra primera página, pero falta algo muy importante y una de las mejores cosas que tiene jQuery Mobile, los data-role="page".
Nuestro código de la página debe de estar dentro de uno, y por qué? pues simplemente porque en un mismo archivo podemos tener más de una "pantalla" y con anclas podemos hacer que jQuery Mobile nos oculte y muestre las "pantallas" que querrámos, pero esto lo mostraré más adelante.

Para ver el código del ejemplo dirígete hacia aquí

Si quieren verlo como se vería en un dispositivo móvil pueden hacer pequeña la ventana o usar este script, solo arrastrenlo a la barra de "bookmarks" en su navegador, es un script para probar sitios optimizados con "Responsive Design" y jQuery Mobile usa esa tecnología.

Responsive Test