Continuamos dando nuestros primeros pasos para el desarrollo de páginas orientadas a dispositivos móviles con jQuery Mobile. En esta ocasión nos vamos a dedicar a la estructura de las páginas "multipágina", lo que nos dará ocasión de ver ya algún efectillo interesante en nuestro navegador.

En el anterior artículo del Manual de jQuery Mobile explicamos cuál es la estructura de la página básica y ahora veremos que la multipágina no es más que la unión de varias páginas básicas en un mismo archivo HTML.

Quizás alguna persona con conocimientos avanzados de jQuery pueda estar decepcionada, al ver como en este manual de jQuery Mobile no hemos utilizado todavía ningún código Javascript. Si es así lo siento, pero ya advierto que esta situación va a mantenerse al menos durante bastantes artículos más. Pues, si bien es cierto que en esta ocasión vamos a poder ver en marcha efectos dinámicos, no es necesario utilizar Javascript para nada, porque muchos de los comportamientos básicos de este framework se configuran directamente sobre el código HTML, por medio de diversos atributos con el prefijo "data-".

Para hacer la página básica ya vimos que las divisiones tenían un atributo "data-role" para indicar la estructura de la página, con su cabecera, cuerpo y pie. Ahora veremos otros atributos parecidos para indicar otras cosas sobre las páginas que estamos desarrollando.

Multipágina es la unión de varias páginas básicas

En el mismo código HTML podemos incluir varios bloques de página básica y tendremos un archivo HTML con diversas páginas que se conoce como Multipágina. Pero tranquilos, esto no quiere decir que en jQuery Mobile tengamos que desarrollar siempre todas las páginas del sitio web en el mismo archivo HTML, podemos organizarlas si lo deseamos en archivos aparte, o hacer una mezcla entre páginas multipágina y páginas básicas en diferentes archivos HTML.

La página básica vimos que incluía una serie de scripts Javascript y estilos CSS del framework, además de una declaración META para definir la escala o zoom con la que se debería presentar. Todo eso permanece igual, lo único que cambiará será el cuerpo de la página, donde colocaremos varios bloques data-role="page".

Veamos una unión de varios bloques de páginas básicas.

<!-- PORTADA -->
<div data-role="page" id="portada">
   <div data-role="header">
      <h1>Titular de página portada</h1>
   </div>
   <div data-role="content">   
      <p>Fabrico guitarras de todos los colores</p>      
      <p>Puedes ver <a href="#galeria">mis guitarras</a></p>   
      <p>Puedes <a href="#comprar" data-rel="dialog">comprar una guitarra</a></p>
   </div>
   <div data-role="footer">
      Pie de página
   </div>
</div>
<!-- /PORTADA -->

<!-- GALERIA -->
<div data-role="page" id="galeria" data-title="Galería de guitarras">
   <div data-role="header">
      <h1>Galería de fotos de mis guitarras</h1>
   </div>
   <div data-role="content">   
      <p>Puedes ver todas mis guitarras</p>      
      <p><a href="#portada">volver</a></p>   
   </div>
   <div data-role="footer">
      Pie de página
   </div>
</div>
<!-- /GALERIA -->

<!-- COMPRAR -->
<div data-role="page" id="comprar" data-title="Comprar guitarras">
   <div data-role="header">
      <h1>Comprar guitarras</h1>
   </div>
   <div data-role="content">   
      <p>Servicio temporalmente indisponible</p>      
      <p><a href="#portada">volver</a></p>   
   </div>
   <div data-role="footer">
      Pie de página
   </div>
</div>
<!-- /COMPRAR -->

Este sitio estaría formado por tres páginas distintas: "portada", "galeria" y "comprar". A pesar que están escritas en el mismo archivo HTML, jQuery se encargará de mostrarlas como si fueran páginas independientes. La navegación entre ellas está realizada por enlaces, como veremos a continuación.

Enlaces entre las páginas de la estructura multipágina

Cada una de las páginas básicas del esquema multipágina tienen un identificador, que se pone en el DIV principal de la página, el que tiene data-role="page". Veamos a continuación el código HTML de la división general de la página de portada.

<div data-role="page" id="portada">

Como vemos, se le ha colocado id="portada", con lo que ya tiene un nombre asignado. Ahora, si queremos hacer enlaces dirigidos hacia esta portada, los creamos simplemente como si fueran enlaces internos. Para ello colocamos el href="#portada", es decir, tal como se hace con los enlaces dentro de la misma página que conocemos del HTML.

<a href="#portada">Ir a la portada</a>

Lo genial de estos enlaces es que, para pasar de una página a otra, jQuery Mobile produce una transición automática, que hace que una página actual desaparezca y entre la enlazada con un efecto suavizado. Más adelante explicaremos cómo configurar las transiciones entre páginas.

Títulos de las páginas

Como todas las páginas de esta estructura multipágina están en el mismo archivo HTML, ocurre que todas comparten un mismo TITLE, que fue indicado en el HEAD de la página. Sin embargo los desarrolladores probablemente querrán que cada página tenga un título independiente. Para hacer posible ese caso de uso, jQuery Mobile dispone de un atributo data-title que se coloca en el DIV principal de cada una de las páginas.

En data-title podemos indicar el título que tiene cada página del esquema de multipágina y jQuery Mobile se encargará de actualizarlo automáticamente cuando se navegue a esa página. Podemos ver el título de la sub-página de galería:

<div data-role="page" id="galeria" data-title="Galería de guitarras">

Así vemos que, cuando el usuario pulse un enlace que le lleve a esta página, se cambiará de manera automática el titular de la ventana del navegador a lo indicado mediante data-title="Galería de guitarras".

En resumen. La primera de las páginas podrá tener el título que indiquemos en el TITLE del documento HTML, pero si queremos asignar otros títulos diferentes a otras páginas de la estructura multipágina, deberemos hacerlo a través de los atributos data-title.

Atributos data-X

Quiero hacer una mención aparte a estos atributos especiales de jQuery Mobile. Como has podido ver, al desarrollar para este framework se utilizan diversos atributos "data-X", como los mencionados data-role o data-title.

<a href="#comprar" data-rel="dialog">comprar una guitarra</a>

Todos estos atributos con prefijo data- son perfectamente válidos en la sintaxis HTML5, ya que las especificaciones del lenguaje permiten cualquier número de atributos que comiencen por la cadena "data-". En HTML5 se utilizan para embeber datos de las aplicaciones web en las propias etiquetas del HTML y jQuery Mobile los utiliza, como has podido comprobar, para configurar el funcionamiento de las páginas desarrolladas con estas librerías.

Más adelante veremos otros usos de esta técnica para implementar diversos componentes de interfaces de usuario, configurar las transiciones entre páginas, el comportamiento de los enlaces, etc.

Conclusión

De momento dejamos por aquí estas explicaciones, ofreciendo el enlace al ejemplo en marcha donde puedes ver la estructura multipágina.

Como podrás comprobar al ver el ejemplo en marcha, se han realizado dos tipos de comportamientos dinámicos. Primero las transiciones entre páginas, con un efecto de desplamiento suavizado. Luego el cambio automático del TITLE del documento, al pasar de una página a otra. Es simplemente una pequeña muestra de las posibilidades del framework y de como, a partir de mero código HTML, se pueden configurar diversos dinamismos. Ni hace falta decir que, si no basásemos nuestras aplicaciones en jQuery Mobile, realizar estos comportamientos dinámicos exigiría usar bastante Javascript y lidiar con las particularidades de cada dispositivo y navegador.