Web Móvil 
Álvaro Brito 
3 Comentario Maquetación Móvil con jQuery Mobile
En la era de los dispositivos móviles, el interés por el desarrollo web móvil cada vez es mayor.
Actualmente lo más utilizado es aplicar el “diseño responsivo (responsive design)” en las web que desarrollemos, para que se visualice o se adapten correctamente en los dispositivos móviles (smartphone, tablet, etc). Esto lo conseguimos haciendo uso de Media Queries CSS3.
Por otro lado tenemos los Frameworks JavaScript orientados exclusivamente para el desarrollo de aplicaciones y sitios web para móvil. Hoy hablaremos de uno de los más útiles, prácticos y que conlleva menor esfuerzo en el desarrollo de aplicaciones web:
jQuery Mobile
¿Qué es jQuery Mobile?
Es un framework de Javascript basado en jQuery y jQuery UI, para el desarrollo de aplicaciones web y de escritorio (nativas) en dispositivos móviles. Soportando una amplia variedad de dispositivos.
¿Por qué nos interesa?
- Está basado en jQuery, por lo tanto la curva de aprendizaje será mínima para aquellas personas que hayan utilizado jQuery.
- Compatible con las principales plataformas móviles y de escritorio: iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook y todos los navegadores modernos. Ver todas las plataformas soportadas
- Su peso de (20kb) y el uso mínimo de imágenes en sus componentes.
- Uso de marcado HTML5 en la estructura de las páginas y componentes, utilizando los diferentes atributos para “disparar” automáticamente los Widgets de jQueryMobile. Además podemos aplicar los diferentes comportamientos que trae cada componente sin tener que aplicar ningún script adicional.
- Enfocado tanto a aplicaciones web como a aplicaciones nativas. Combinando jQuery Mobile con PhoneGap.
- Accesibilidad en sus componentes, basados en la especificación WAI-ARIA y haciendo uso de los ‘roles’. De tal manera que trabaje con los lectores de pantalla. Accesibilidad en jQuery Mobile
- Proporciona una potente herramientas para crear diferentes temas (themes): ThemeRoller.
¿Cómo lo utilizamos?
jQuery Mobile proporciona un cojunto de widgets de fácil implementación y un sistema de navegación con AJAX para la transición entre páginas. A continuación veremos como crear fácilmente nuestra primera página:
“EL ESQUELETO”
HEAD
Primero agregamos las referencias necesarias a jQuery, jQuery Mobile y el theme básico de CSS. En el siguiente paso agregaremos nuestro propio theme personalizado.
Una vez que hemos terminado de referenciar las librerías necesarias, creamos la estructura de la plantilla principal de la página utilizando HTML5, y luego definimos las areas de contenido (content region) que proporciona jQueryMobile.
Utilizamos el meta viewport, con el que podemos establecer el ancho del dispositivo y definir la escala . Por defecto, lo podemos dejar definido con la constante width=device-width y definir la escala mínima y máxima a 1; initial-scale=1.0 maximum-scale=1.0. Podemos añadir más reglas en el meta viewport, por ejemplo si queremos permitir que el usuario pueda escalar la página.
BODY
En el cuerpo del documento HTML, especificamos la Página (data-role=”page”), la Cabecera (data-role=”header”), el Contenido (data-role=”content”) y el Pié (data-role=”footer”) de la misma, añadiendo los atributos data- HTML5, que utiliza jQuery Mobile para transformarlo en Widgets funcionales y con los estilos del theme utilizado.
<!DOCTYPE html> <html> <head> <title>Título página</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.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.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> </head> <body> <!-- Página principal --> <section data-role="page"> <header data-role="header"> <h1>Título</h1> </header><!-- /banner --> <section data-role="content"> <p>Hola Mundo</p> </section><!-- /content --> <footer data-role="footer"> <p><abbr lang="en" title="Copyright">©</abbr> 2012</p> </footer><!-- /footer --> </section><!-- /page --> </body> </html>
Añadiendo tu propio contenido
Puedes añadir contenido HTML dentro del data-role=”content”, de esta manera usará el estilo del theme asignado.
Si queréis añadir contenido HTML propio, sin que contenga funcionalidad de jQuery Mobile, tendréis que omitir el atributo data- y utilizar el role adecuado para cada contenido HTML (si no queréis utilizar roles omitir este paso).
<section role="main"> <p>Hola Mundo</p> </section><!-- /content -->
Múltiples páginas
Todas las páginas estarán incrustadas en el mismo documento. Como hemos visto anteriormente, cada página del sitio estará representada con el atributo data-role=”page”, también podemos añadirle un título a cada página con el atributo data-title=”Título página 1″.
Por último debemos añadir el atributo id a cada página, de esta manera podemos interactuar con ella, por ejemplo para poder navegar de una página a otra.
<!-- Página principal --> <section data-role="page" data-title="Página de inicio" id="page1"> <header data-role="header"> <h1>Título</h1> </header><!-- /banner --> <section data-role="content"> <p>Hola Mundo</p> </section><!-- /content --> <footer data-role="footer"> <p><abbr lang="en" title="Copyright">©</abbr> 2012</p> </footer><!-- /footer --> </section><!-- /page --> <!-- Segunda página --> <section data-role="page" data-title="Segunda página" id="page2"> <header data-role="header"> <h1>Título</h1> </header><!-- /banner --> <section data-role="content"> <p>Hola Mundo</p> </section><!-- /content --> <footer data-role="footer"> <p><abbr lang="en" title="Copyright">©</abbr> 2012</p> </footer><!-- /footer --> </section><!-- /page -->
Ver Múltiples páginas en jQuery Mobile
Navegación entre páginas
La navegación es muy sencilla, solo tenemos que poner en el ‘href’ del enlace el ‘id’ de la página destino. El código HTML quedaría de la siguiente forma:
<a href="#page2" data-role="button">Ir a la página 2</a>
Podemos especificar el tipo de transición con el atributo data-transition, la transición por defecto es slide pero existen varios tipos de transiciones jQuery Mobile.
Las que podemos usar en la versión actual de jQuery Mobile son las siguientes
- slide
- slideup
- slidedown
- pop
- fade
- flip
También puedes definir la dirección de la transición con el atributo data-direction, por ejemplo: data-direction=”reverse” para invertir la dirección.
Themes jQuery Mobile
Podemos crear nuestros propios themes de forma sencilla y rápida con el ThemeRoller que nos ofrece jQueryMobile. Una de las principales características de esta herramienta, es la multitud de themes que podemos crear y asignar cada componente que usemos en nuestra aplicación.
Cada theme o tema tiene asignado una letra, con la que podemos identificar el theme y aplicarlo a cualquier componente que queramos, usando el atributo data-theme. Veamos un sencillo ejemplo:
<!-- Página principal --> <section data-role="page" data-title="Página de inicio" data-theme="b" id="page1">
En la documentación oficial podemos ver más sobre el uso de themes en jQuery Mobile y las opciones posibles para cada uno de los componentes.
Debemos tener en cuenta que jQuery Mobile genera clases para cada uno de sus componentes usando el prefijo ui-.
Formularios
Los componentes de formulario de jQuery Mobile, nos aportan multitud de funciones ya definidas y diferentes tipos de elementos propios. Todos los formularios deben estar dentro de la etiqueta form y con el action y method asignados para procesar la información en servidor:
<form action="form.php" method="post"> ... </form>
Existen varios tipos de controles, que son mas que suficientes para poder crear formularios complejos. Con galería de elementos de formularios jQuery Mobile podemos ver de un vistazo todos los elementos y la funcionalidad de cada uno de ellos.
También nos da la opción de crear un formulario con una versión mini de sus controles, útil para formularios extensos o para aprovechar espacio en la pantalla del dispositivo. Para ello debemos añadir el atributo data-mini=”true” en el controlgroup:
<form action="form.php" method="post" id="form"> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-mini="true"> <legend>Opciones:</legend> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" /> <label for="radio-choice-1">Opción 1</label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" /> <label for="radio-choice-2">Opción 2</label> </fieldset> </div> </form>
Accesibilidad en formularios
Si se requiere ocultar la etiqueta label por motivos de accesibilidad y que los lectores de pantalla puedan leerla, podemos ayudarnos de la clase ui-hidden-accessible y añadir el atributo placeholder para usar el elemento de formulario como label:
<label for="nombreusuario" class="ui-hidden-accessible">Usuario:</label> <input type="text" name="nombreusuario" id="nombreusuario" value="" placeholder="Usuario" />
Si tenemos un contenedor de jQuery Mobile para controles de formularios le asignamos la clase al propio contenedor:
<div data-role="fieldcontain" class="ui-hide-label"> <label for="nombreusuario">Usuario:</label> <input type="text" name="nombreusuario" id="nombreusuario" value="" placeholder="Usuario" /> </div>
Ambos ejemplos se verían de la siguiente forma:
Nota: Si necesitamos deshabilitar ciertos elementos del formulario, usaremos el atributo disabled. En el caso de que necesitemos aplicar el estilo disabled a un elemento que no sea un control de formulario, podemos utilizar la clase ui-disabled sobre el elemento.
Conluyendo
Hemos analizado de forma rápida las nociones básicas que debemos saber de jQuery Mobile y sus principales componentes, podéis ver la información técnica más detallada en la documentación oficial.
Para concluir os dejo una Guía de referencia de jQuery Mobile
Información Bitacoras.com…
Valora en Bitacoras.com: En la era de los dispositivos móviles, el interés por el desarrollo web móvil cada vez es mayor. Actualmente lo más utilizado es aplicar el “diseño responsivo (responsive design)” en las web que desarrollemos, para q……
Excelente post, muy intuitivo y adecuado a la materia. Me ha encantado!
Muy buen post, una fácil introducción a jQuery Mobile, y los enlaces que nos aportas a jquerymobile.com nos permiten ampliar información si lo necesitamos.
De todas formas muchas gracias por esta entrada, nos anima a iniciarnos en esta tecnología!