Unidad 24. jQuery Mobile (I)

24.1. Introducción

Como hemos visto, existen diversas técnicas para crear una página web apta para las pantallas de los dispositivos móviles, como los smartphones y las tablets. Entre ellas, los diseños de cuadrícula fluida, las consultas de medios y los diseños sensibles (responsive design). En todos estos casos, sin embargo, de lo que se trata es de conseguir un diseño de página web que se adapte a los distintos tipos de pantalla que un usuario puede utilizar, desde monitores de gran tamaño hasta los móviles más pequeños.

Pero existe un método para crear páginas web específicas para móviles cuya característica no es sólo simplificar el trabajo de diseño, sino además, enriquecer la experiencia del usuario al navegar, al hacer que se asemejen a las aplicaciones de sistemas operativos como iOS y Android. Se trata de jQuery Mobile.

De modo similar a jQuery UI que vimos en la unidad anterior, jQuery Mobile es un conjunto de pequeñas aplicaciones elaboradas en jQuery (y éste a su vez en Javascript) con el que podemos crear un sitio para móviles con diversas páginas en un solo archivo HTML5 fácil y rápidamente, con apariencia de una app y lista, además, para funcionar en navegadores de escritorio tradicionales, tal y como puedes observar en esta página.

Puedes hacer clic aquí para ver un ejemplo que te resultará bastante familiar si has seguido este curso.

Puedes conocer la página oficial de jQuery Mobile haciendo clic aquí.

Además, Dreamweaver CC lo ha incorporado a sus características, de modo que, como es usual, puedes usarlo aún cuando no domines jQuery o Javascript. En el momento en el que comenzamos a crear páginas con esta herramienta, Dreamweaver se ocupa de añadir las librerías necesarias a nuestro sitio y hacer los ajustes adecuados al código. Recuerda que las librerías de jQuery deben añadirse al sitio al momento de publicar tu página para que el conjunto funcione.

Las opciones de jQuery Mobile de Dreamweaver se encuentran en el menú Insertar, opción jQuery Mobile.

  

También encontramos estas opciones en el panel Insertar, en la categoría del mismo nombre.

Es importante añadir que una vez creada la estructura de una página con esta herramienta y sus métodos de navegación, podemos insertar en ella otros elementos, de modo que no estamos restringidos a los widgets de jQuery Mobile solamente. Podemos añadir imágenes, comportamientos CSS, estilos personalizados, elementos dinámicos para presentar información de bases de datos, etc.

Comencemos pues a revisar jQuery Mobile.