Primeros pasos con jQuery Mobile

jQuery ya es un framework muy usado para la elaboración de sitios web dinámicos, y ahora también nos presenta la primera versión de jQuery Mobile, un framework que usa jQuery para crear sitios web para móviles, lo que habla que ya tenemos una nueva herramienta y forma de crear sitios web muy fácil.

En este post vamos a dar los primeros pasos con jQuery Mobile, vamos a ver que si sabes HTML prácticamente ya tienes hecho un sitio web para un smartphone, aunque si hay algunas reglas que debemos seguir para tener el sitio hecho.

Nivel del tutorial: principiante (aunque es requerido saber HTML)
Resultado: Tutorial terminado

Cabecera

Lo primero que tenemos que saber es que como es un framework que trabaja con jQuery forzosamente necesitamos la librería de jQuery. Pero además de esta librería necesitamos también la librería propia de jQuery Mobile y una de hojas de estilos.

También hay que aclarar que por defecto los estilos no son imágenes, son degradados y formas hechas con CSS3, por lo que por teoría no debería haber ningún problema ya que los navegadores de los dispositivos móviles aceptan este estándar.

Por cierto, los archivos los pueden bajar de la página principal de jQuery Móvil, excepto la de jQuery, que esa la tienen que bajar del portal de jQuery normal.

HTML

Una vez que ya hemos incluido las librerías adecuadas podemos ahora si, ver cómo se forma un sitio web para móviles. El siguiente ejemplo ilustra muy bien

Página 1

Lo que tenemos es que hay que ver todo como una página, ésta página está encapsulada en una capa principal, y si queremos que nuestra página tenga una cabecera y un pié de página tenemos que agregar una capa para la cabecera y otra para el pié de página. También el contenido tiene una capa única.

Lo importante es eso, y además otra cosa es que tenemos que usar referenciadores especiales para indicarle a jQuery que la capa de cabecera se convierta en cabecera, y no nada más quede en blanco. Si se fijan tiene “data-role=’page’ “ para decirle que trate esa capa como una página.

Tenemos “data-role=’header’” para decirle que la capa será un header o cabecera, y usamos “content” y “footer” para especificar los demás. Estos parámetros son obligatorios y únicos, por lo que no les puedes cambiar el nombre esperando que funcionen igual.

En cuanto a lo demás es lo mismo, si queremos insertar un link usamos la etiqueta “<a>”  para hacerlo, aunque como veremos, podemos navegar por páginas en un mismo archivo.

Página 2

Esta es una nueva página, igual, empezamos con la capa contenedora con el identificador de ‘page’ para decirle que es una nueva página. Ojo porque el código está directamente abajo del código de la página 1, todo en el mismo archivo, para que no se confundan, todo el código es en un mismo archivo.

Ahora,en la capa del header agregamos dos links que servirán para poder navegar entre páginas, automáticamente se convierten en botones en la cabecera, por lo que no tenemos nada que hacer más que declarar los botones con dirección apuntando a los ID de las páginas o capas contenedoras.

Por último si se fijan inserté un link pero le incluí un parámetro que hace que se convierta en botón, y no en un link, para evitarnos la molestia de declarar literalmente una etiqueta <button>, con este parámetro es más fácil controlar todo.

Página 3

Por último declaro otra capa que actuará como página 3, y a esta página lo único que le cambio es que ahora añado una lista desplegable, para ver su funcionamiento.

Como ven es la misma estructura que una lista desplegable normal, solo que le decimos que queremos que la transforme usando los parámetros que como ven son muy fáciles de usar. Eso si, en este caso pueden ver que la lista tiene una clase asignada, para que se convierta en una clase de botón con las opciones desplegables.

Conclusiones

Como podemos ver en realidad lo que hace nuestro framework es dejar intacto la estructura, y a base de javascript y CSS se encarga de crear el ambiente, pero como les repito, dejando intacta la estructura principal.

Muy fácil diría yo, además de que literalmente nos facilita todo, como transiciones, estilos, tamaños, redimensionamiento, rapidez, portabilidad, etc., por lo que es más que recomendable usar estas librerías si lo que quieres es ya tener algo qué usar y sólo necesites rellenar con contenido.