jQuery Mobile es la unificación basada en el sistema de interfaz de usuario más popular para todas las plataformas de dispositivos móviles, construido sólidamente sobre la fundación jQuery y jQuery UI. Su código es ligero, está construido con un mejoramiento progresivo y flexible así como un diseño fácilmente modificable.

Mientras tanto, Adobe Dreamweaver CS6 ofrece un flujo de trabajo racionalizado para la creación de un proyecto de jQuery Mobile. En este artículo, crearemos una aplicación de jQuery Mobile en Dreamweaver CS6.

El vídeo explica las características de la plantilla de Dreamweaver para jQuery Mobile.

Aplicación Movil con jQuery Mobile
Figura 1. Aplicación móvil que crearas en este tutorial.

Figura 1 - jQuery Mobile

En Dreamweaver simplemente selecciona File > New > Page from Sample > jQuery Mobile with theme (local) y da clic en Create. Al guardar el archivo, Dreamweaver crea todos los archivos necesarios, incluidos el CSS y HTML, para crear un sitio web básico con jQuery Mobile.

Figura 2 - jQuery Mobile
Figura 2. Crea un nuevo sitio web móvil en Dreamweaver CS6.

Una vez que hayas creado tu sitio web móvil, estás listo para empezar a personalizar el CSS y HTML para moldear el proyecto a tu expectativa. Los ejemplos que siguen a continuación explican algunos de los aspectos más avanzados de esta plantilla y te proporcionan un contexto para iniciar la modificación de aspectos más profundos del framework de jQuery Mobile.

Flexibilidad a través de CSS

Uno de los aspectos más ventajosos del framework jQuery Mobile es su dependencia de CSS para la maquetación y diseño. Dado que el núcleo del framework utiliza pequeñas cantidades de HTML para crear la estructura, sólo es necesario aplicar pequeñas cantidades de CSS para modificar el diseño.

En la implementación de varias páginas, puedes usar individualmente las etiquetas DIV para "páginas", y utilizar las vistas de lista para crear la navegación de la página principal. Para obtener más información sobre la estructura de la página consulta el articulo Introducción al diseño personalizable para jQuery Mobile. Ya que puedes hacer el listview desde una lista desordenada, puedes crear reglas de CSS que tengan como objetivo esa lista y re-definir ciertos aspectos para crear botones más grandes para la página principal.

El formato estándar de un listview incluye un atributo data-role asignado a la etiqueta exterior <ul>. Observa el siguiente código:

Usando una técnica llamada inyección, el framework de jQuery agrega el CSS adicional dentro de un elemento HTML <ul> y convierte el código anterior en este:

Además de agregar los elementos <div> y <span> inyectados dentro de los elementos <li>, el proceso también inyecta una clase llamada ui-listview en el elemento <ul>, en tiempo de ejecución con JavaScript. Esto le da una ruta para apuntar con tus reglas CSS. Por último, tener la vista de lista dentro de un <div> con un id dentro de la página principal, para lo cual puedes utilizar la siguiente regla CSS para apuntar específicamente a la vista de lista de la página principal:

La siguiente figura muestra la lista re-estilizada.

Figura 3 - jQuery Mobile
Figura 3. Lista re-estilizada.

Usando una hoja de Sprite y la clase personalizada asignada a cada <li>, puedes ajustar la posición x del gráfico de fondo para crear gráficos de botones individuales de una sola imagen. Además de una imagen de fondo, también puedes asignar un padding-top a las etiquetas <a> para dar espacio vertical a los gráficos de botones como se muestra en la siguiente imagen.

Figura 4 - jQuery Mobile
Figura 4. Hoja de Sprite

La combinación de las reglas CSS y código HTML transforma una lista desordenada en un sistema de navegación basado en iconos.

Combinar ThemeRoller con CSS

El sitio de jQuery Mobile incluye una herramienta para crear temas, llamada ThemeRoller. Esta es una herramienta basada en web que permite diseñar esquemas de color para personalizar sitios web con jQuery. El framework de jQuery Mobile está construido sobre la noción de los temas, que son los estilos predefinidos para el aspecto de tu sitio móvil. Cada tema incluye un grupo de estilos llamados swatches, que se pueden aplicar a todas las páginas de jQuery Mobile, o sólo a una parte de una página. Aunque ciertamente puedes remplazar muchas de las reglas CSS dentro de un swatch, que es más eficiente para crear nuevos temas utilizando ThemeRoller.

Figura 5 - jQuery Mobile
Figura 5. Creación de temas con ThemeRoller.

La herramienta en línea, ThemeRoller, permite crear, modificar y guardar los temas para que los uses en tus proyectos. Una vez que descargas y descomprimes el tema, copia los archivos en la carpeta de tu proyecto y enlaza el CSS. El sitio de ThemeRoller ofrece incluso algo de HTML dentro de la ventana de descarga.

Agrega algunos scripts personalizados de jQuery

Si consideras el hecho de que jQuery Mobile está construido sobre jQuery, tengo que señalar que puedes utilizar algunas secuencias de comandos para agregar más funcionalidades a tu sitio móvil. La plantilla incluida con este tutorial que puedes descargar aquí, incluye un sencillo script HTML que permite cambiar dinámicamente el contenido de la página Contact Us. Usando solo la página Contact Us, aprenderás cómo cambiar información de la página basada en HTML agregada a cada enlace.

Los enlaces de listview contienen un atributo adicional en la etiqueta <a> llamado data-phone. En este fragmento de código, coloca el número telefónico de la oficia de ese país. Junto con el texto vinculado a la etiqueta <a> tenemos suficiente información para inyectar datos personalizados en una sola página (Contact Us) y dar al usuario la experiencia de muchas páginas personalizadas de contacto.

Al conectar el archivo personalizado de JavaScript, puedes bloquear muchos aspectos de jQuery, y además manipular la experiencia de usuario. En esta plantilla he incluido un sencillo conjunto de instrucciones jQuery que inyectan los datos en la página de contacto (Contact Us) como se muestra en la siguiente figura.

Figura 6 - jQuery Mobile
Figura 6. Inyección de datos dentro de la página Contáctanos (Contact Us)

Cuando el usuario da tap o hace clic en un vínculo dentro de la lista, la aplicación utiliza jQuery para recoger el enlace activado, leer el atributo personalizado, la etiqueta del enlace, y revisar los elementos de la página Contact Us con estos elementos. Esto da la capacidad de crear la ilusión de páginas personalizadas de Contact Us, cuando en realidad, es la misma página con los datos inyectados dinámicamente en la página antes de que sea animada.

A donde ir desde aquí

Además del diseño y las capacidades de carga de las páginas, jQuery Mobile proporciona una serie de mejora de forma interactiva. Usando HTML básico, puedes transformar elementos como radio buttons y menús dropdown en experiencias móviles agradebles para el usuario.Lo que es más, el Panel de Inserción de Dreamweaver contiene muchos objetos relacionados a jQuery Mobile, que puedes agregar a tu sitio web móvil con un solo clic.

La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Margarita García.