Primera página web utilizando jQuery Mobile

Una vez que nos hemos sumergido en la teoría de la librería con el primer artículo de este manual, es tiempo de pasar a la práctica y preparar nuestro primer proyecto con jQuery Mobile.

Este proyecto consistirá en una sencilla página desarrollada con HTML simple, a la cual le añadiremos jQuery Mobile para que tome la funcionalidad móvil, permitiéndonos trabajar con atributos de data.

Construyendo el HTML

El primer paso de esta práctica será elaborar el código de nuestra página HTML, el cual se mantendrá sencillo y sin alguna optimización para móvil. Vale aclarar, que cualquier página web que realicemos puede ser vista mediante un móvil, pero no necesariamente será usable, ya que muchos de los sitios son diseñados en base a un layout enorme, con links pequeños, imágenes de gran tamaño o incluso con partes dependientes totalmente de Flash.

Factores como estos hacen de la página un elemento bastante difícil para interactuar, imposible de leer sin zoom, demasiado ancho para desplegarse completo y con poca compatibilidad con el modo de uso de los dispositivos móviles. Partes tan básicas como un formulario puede caer en el estorbo si no se les da una funcionalidad adecuada en base a los estándares móviles, por ejemplo, si nuestro form no trabaja bien con una pantalla táctil, el usuario no podrá avanzar más en su intento de petición.

Pero antes de preocuparnos por la compatibilidad móvil, tenemos que realizar la estructura sobre la cual crecerá nuestro proyecto, para ello iniciaremos con el siguiente código:

<h1>Hola!</h1>
<p>
   Bienvenido a la primera página de la Webera.
   Este es un sitio de prueba y en esta sección debería ir más contenido,
   por el momento no tenemos más que decir.
</p>
<p>
   <i>2006 - 2012 &copy; LaWebera.es</i>
</p>

Como dijimos un código bastante sencillo, el cual simplemente nos servirá para establecer una base sobre la cul trabajaremos. Como se puede apreciar hasta el momento nuestra página esta compuesta por un encabezado y dos párrafos, nada del otro mundo, pero aún siendo tan sencilla podemos apreciar diferencias en su despliegue en dispositivos móviles.

Si observamos el resultado en un navegador no encontremos problema alguno, pero una vez que se analiza la misma página con un dispositivo móvil podremos apreciar que los elementos se reducen considerablemente por lo que es necesario recurrir al zoom del dispositivo. En si esta operación no es un problema, pero es preferible que el sitio sea desplegado correctamente desde el principio, es ahí donde jQuery Mobile entra en función.

Obtener jQuery Mobile

Para utilizar jQuery Mobile no es necesario instalar algún programa, tener herramientas especiales, correr servicios o configurar algún servidor, basta con descargar el paquete con el conjunto de archivos que componen la librería, colocarlos dentro de tu proyecto y añadirlos a tu código mediante una sola línea de código.

Si esto aún representa mucho trabajo para ti, entonces puedes recurrir al CDN (Content Delivery Network) que jQuery te provee para llamar a la librería desde la nube y así no tengas que descargar absolutamente nada. La ventaja de hacer uso del CDN, es que muchas páginas ya utilizan estos archivos, entonces si el usuario visitó alguno de esos sitios antes que el tuyo, ya contará con la librería dentro de sus archivos en caché, por lo que no consume recursos de petición ni tiempo de descarga.

A lo largo de este manual, por cuestiones de practicidad, haremos uso de la dirección proporcionada por el CDN para cargar la librería en nuestro código, pero en esta ocasión haremos la descarga, en caso de que tú decidas utilizar los archivos de manera local. Lo primero que debes hacer es ir a http://jquerymobile.com/download/ y descargar el archivo Zip con la versión más reciente de la librería.

Dentro de este Zip podrás apreciar que existen dos carpetas, una con ejemplos de uso de la librería y una segunda con seis imágenes que son utilizadas por los CSS al momento de generar las páginas optimizadas para móviles. El resto esta compuesto por los archivos de estilo y el JavaScript de la librería, con sus respectivas versiones miniaturizadas, las cuales debemos utilizar en nuestro servidor de producción para que consuma menos tiempo de descarga.

Si aún no cuentas con el framework de jQuery dentro de tu proyecto, entonces también debes de añadirlo al código para que la librería Mobile funcione correctamente. Para ello, cuentas con los mismos caminos, descargar la última versión desde la página de jQuery o utilizar un servidor de contenido que te proporcione el código desde la nube.

Implementación de jQuery Mobile

Una vez que tenemos los archivos en nuestro servidor, es tiempo de pasar a implementar la librería dentro de nuestro código, y darle el soporte necesario. Para ello basta con seguir una serie de pasos sencillos que nos permiten crear un entorno adecuado para que la página sea desplegada adecuadamente.

Primero debemos añadir un DOCTYPE a nuestro sitio, esta es una costumbre muy poco utilizada por aquellos acostumbrados a desarrollar de manera genérica, ya que como en muchas ocasiones no es necesario especificar un tipo de estandarización el desarrollador tiende a omitir este paso. En esta ocasión utilizaremos una declaración de DOCTYPE como lo dictan las nuevas reglas de HTML5.

<!DOCTYPE html>

Esto ayuda a informarle al navegador, que el contenido que esta a punto de ser desplegado será de tipo HTML. Como se puede apreciar, con esta nueva semántica no es necesario especificar más detalles como se solía hacer con el DOCTYPE de XHTML.

Después de esto pasamos a establecer un viewport para la página, el cual se encargará de indicar la configuración default para cuando el sitio es visto desde un dispositivo móvil. El metatag viewport le especifica al navegador que ancho debe tomar y deshabilita la escala inicial.

< meta name="viewport" content="width=device-width, initial-scale="1">

Finalmente tenemos que incluir el framework de jQuery, la hoja de estilo y el script la librería de jQuery Mobile dentro de nuestra etiqueta “head” de nuestro código.

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

Con el código anterior estamos cargando los archivos desde el servidor de contenido proporcionado por jQuery, si tu decidiste bajar los archivos y almacenarlos localmente, entonces debes de cambiar las URLs por el path donde tengas almacenado el archivo correspondiente.

Al momento de agregar estos cambios a nuestro código, podemos pasar a revisar una vez más nuestra página en el navegador de un dispositivo móvil y podremos notar algunos cambios significativos inmediatamente, resaltando que el tamaño de la letra ha cambiado, haciéndolo más fácil de leer. Ahora la página es usable desde un dispositivo móvil, pero debido a su misma sencillez quizás no lo podamos apreciar en este momento.

Uso de atributos de data

Si bien nuestra página ha quedado lista para desplegarse en cualquier dispositivo móvil, el trabajo no ha terminado, existen otros factores a considerar para prepararla para un funcionamiento adecuado. A lo largo de este manual haremos uso de varios atributos para marcar nuestros elementos de una manera que jQuery Mobile comprenda, a estos atributos se les da el tipo de data.

Los atributos de data es un concepto introducido por HTML5 para añadir valores complementarios al DOM de un elemento. Por ejemplo podemos tener un div contendor, al cual le queremos agregar una información mediante un atributo:

<div id="principal" data-saludo="hola">Contenido</div>

Como puede deducirse el atributo “data-saludo” no existe dentro de las convenciones de HTML, nosotros lo inventamos para añadir un valor, y debido a que cuenta con el prefijo “data-” es totalmente válido. ¿Y de qué sirve esto? En este momento de nada, porque si vemos la página no notaremos cambio alguno, pero nos será de gran ayuda si en cierto momento necesitamos encasillar ciertos elementos.

jQuery Mobile hace uso de estos atributos tanto en el marcado para crear widgets, como para controlar el comportamiento de los elementos en el sitio. Una de las principales funciones de estos atributos es definir secciones, encabezados, contenido y pies de página, si tomamos como base nuestro código obtenemos lo siguiente:

<div data-role="page">
   <div data-role="header">Hola!</div>
   <div data-role="content">
      <p>
         Bienvenido a la primera página de la Webera.
         Este es un sitio de prueba y en esta sección debería ir más contenido,
         por el momento no tenemos más que decir.
      </p>
   </div>
   <div data-role="footer">
      <i>2006 - 2012 &copy; LaWebera.es</i>
   </div>
</div>

Como se puede apreciar, utilizamos el atributo “data-role” para definir cada parte del layout, quitamos el encabezado e hicimos uso de divs para dividir. Este atributo en sí no significa nada para el navegador, pero jQuery Mobile se encarga de utilizarlo para saber como desplegar los elementos en el dispositivo móvil, de esa manera si tu abres la página en uno podrás notar la diferencia.

Ahora el encabezado y el pie de página contarán con un fondo negro, además el contenido se ve menos amontonado ya que se agrega espacio a los alrededores. Este es el tema default de jQuery Mobile y lo verás repetidamente a lo largo de este curso, simplemente basto con agregar dichos atributos para poder aplicarlo.