Trabajar con páginas hechas con jQuery Mobile

En el artículo anterior, pudimos apreciar la facilidad con la que jQuery Mobile puede ser agregado a una página HTML, con el fin de optimizarla para que pueda ser visualizada adecuadamente en un dispositivo móvil. Ahora es tiempo de pasar a integrar la librería a una sitio completo, compuesto por varias páginas conectadas a través de links, y para ello haremos uso de las distintas formas que nos provee jQuery Mobile, para crear y enlazar páginas.

A lo largo del artículo, practicaremos cómo añadir varias páginas a un solo archivo, analizaremos la forma en que los links son modificados por la librería y explicaremos cómo poder deshabilitar esta funcionalidad, así mismo mencionaremos cómo la librería hace un manejo automático de URLs para permitir su fácil adhesión a marcadores y demostraremos como añadir y enlazar archivos adicionales en un sitio realizado con jQuery Mobile.

Uso de múltiples páginas

Anteriormente estuvimos trabajando con un archivo sencillo al cual le agregamos jQuery Mobile para desplegar adecuadamente su contenido; tomaremos dicho código como base para continuar nuestra explicación. La primera modificación que haremos, será añadir una nueva página al archivo y establecer un enlace que redirige a ella.

Para iniciar esta práctica, tendremos que volver a hacer énfasis en la importancia del uso de atributos de data; como puedes recordar, jQuery Mobile siempre busca entre el código al elemento que lleve entre sus atributos el rol de “página” (data-role=”page”), esto es para saber que contenido debe ser desplegado en el marco principal. Gracias a la sencillez de la librería, si quisiéramos agregar más páginas en un mismo archivo bastaría con añadir más capas con el mismo atributo y formato, como se muestra en el siguiente código:

<div data-role="page" id="inicio">
   
<div data-role="header">Hola!</div>

   
<div data-role="content">
      

         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, así que te dejamos nuestra
         sección <a href="#acerca_de">"Acerca de"</a>.
      

   </div>

   
<div data-role="footer">
      <i>2006 - 2012 &copy; LaWebera.es</i>
   </div>

</div>


<div data-role="page" id="acerca_de">
   
<div data-role="header">Acerca de</div>

   
<div data-role="content">
      

         <a href="#inicio">LaWebera.es</a>, sitio dedicado al diseño y desarrollo de páginas web.
         En estas páginas encontrarás cantidad de información para aprender 
         a hacer tus páginas web, además de amplios servicios de diseño web profesional
         para empresas y particulares. Diseños web adaptados a cada cliente, 
         optimizados para el SEO, autogestionables y con las técnicas CSS y XHTML más actuales.
      

   </div>

   
<div data-role="footer">
      <i>2006 - 2012 &copy; LaWebera.es</i>
   </div>

</div>

Como se puede apreciar tomamos el mismo código del artículo anterior y añadimos exactamente las mismas secciones para crear una nueva página, la diferencia radica en el contenido y en el ID de cada capa con el rol “page”. De igual manera añadimos al texto un par de links internos, los cuales redirigen hacia cada una de las páginas, esto lo hacemos con la finalidad de establecer un vínculo de navegación y se logra añadiendo la etiqueta “a” con el identificador como valor del atributo “href”, el lugar donde comúnmente se coloca la dirección URL.

Al momento de que el usuario de clic sobre esos enlaces, el navegador se desplazará hacia la parte donde se encuentra la sección. En una página tradicional, esto luciría como dos simples bloques de texto unidos en una misma página; sin embargo, jQuery Mobile se encarga de desplegar este código de manera distinta, mostrando únicamente un div a la vez.

Cuando se despliega esta página en un dispositivo móvil, únicamente se puede observar el primer div que se encuentra con el rol de página. Si quisiéramos ver el contenido del resto de los bloques, tendríamos que dar clic en un enlace que lleve a ellos, sólo entonces podremos visualizarlos como una nueva página y si decidiéramos utilizar el botón de “regresar” del navegador, nos llevaría al bloque que observamos anteriormente.

Al momento de cambiar de página, podrás notar que existe una pequeña transición, si no es de tu agrado, puedes configurarla pero esto será un tema que veremos más adelante.

Links con jQuery Mobile

Cuando jQuery Mobile encuentra dentro del código un link sencillo, automáticamente captura todos los clics que se dan sobre ese enlace y los convierte en peticiones AJAX. De esa manera detecta si el enlace esta apuntando a una sección de la misma página, un archivo distinto dentro del mismo servidor o hacia un objetivo externo.

Si el enlace es interno simplemente añade una transición, si es hacia un archivo diferente dentro del mismo servidor utilizará AJAX para cargar la página y reemplazar el contenido actual, mientras que si es hacia un lugar externo jQuery Mobile simplemente activará el comportamiento normal. En caso de que no desees alguno de estos comportamientos, puedes desactivar la funcionalidad de jQuery Mobile sobre tus links, para ello basta con establecer como falso el valor del atributo de data llamado “data-ajax”.

<a href="lawebera.html" data-ajax="false">Este link funcionará normalmente</a>

Uso de múltiples archivos

En el código anterior agregamos dos páginas dentro del mismo archivo, como se pudo apreciar es un proceso bastante sencillo y accesible, pero qué pasaría si tenemos que crear 10, 20 o 30 páginas, ¿Crees que sería buena idea seguir usando el mismo archivo?. Desgraciadamente cuando cuentas con un proyecto demasiado grande no puedes recurrir a trabajar con un solo archivo, manejar mucho código dentro de un solo archivo causaría confusión, demasiado tiempo de búsqueda y haría más lenta la descarga.

Para trabajar con múltiples archivos, basta con agregar enlaces que dirijan a las distintas locaciones del servidor donde se encuentran. Podemos combinar ambas técnicas y tener enlaces internos utilizando identificadores, y a la vez haciendo referencias a archivos localizados dentro del mismo servidor:

<div data-role="page" id="inicio">
   
<div data-role="header">Hola!</div>

   
<div data-role="content">
      

         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 <a href="contenido.html">contenido</a>,
         por el momento no tenemos más que decir, así que te dejamos nuestra
         sección <a href="#acerca_de">"Acerca de"</a>.
      

   </div>

   
<div data-role="footer">
      <i>2006 - 2012 &copy; LaWebera.es</i>
   </div>

</div>


<div data-role="page" id="acerca_de">
   
<div data-role="header">Acerca de</div>

   
<div data-role="content">
      

         <a href="#inicio">LaWebera.es</a>, sitio dedicado al diseño y desarrollo de páginas web.
         En estas páginas encontrarás cantidad de información para aprender 
         a hacer tus páginas web, además de amplios servicios de diseño web profesional
         para empresas y particulares. Diseños web adaptados a cada cliente, 
         optimizados para el SEO, autogestionables y con las técnicas CSS y XHTML más actuales.
      

   </div>

   
<div data-role="footer">
      <i>2006 - 2012 &copy; LaWebera.es</i>
   </div>

</div>

Como se puede apreciar agregamos un nuevo link que dirige hacia el archivo “contenido.html”, para que este enlace funcione tenemos que crear un nuevo archivo que lleve ese nombre y que, para este caso, contenga una lista del contenido del sitio.

Títulos de página

Si has llevado a la práctica alguno de los ejemplos que describimos en los artículos anteriores, podrás haber notado que cuando cambiamos de un archivo a otro, al momento de desplegar la página, el título en el navegador cambia automáticamente dependiendo del valor que se le da a la etiqueta “title” dentro de nuestro código HTML. Esto es un comportamiento completamente normal, pero no ocurre cuando se utilizan enlaces internos; es decir, si damos clic en algún enlace hacia una sección que se encuentra dentro del mismo archivo, el título sigue siendo el que se declaró en “title”, ya que sigue siendo el mismo código HTML.

jQuery Mobile proporciona una manera sencilla de resolver esto, y para lograrlo una vez más tendremos que recurrir a los maravillosos atributos de data. En el siguiente código, hacemos uso de los atributos para poder personalizar el título que se desplegará en el navegador al dar clic sobre el enlace:

<div data-role="page" id="prueba_title" data-title="Probando el título">
   

<div data-role="header">Hola!</div>


   

<div data-role="content">
      

         Bienvenido a la página 'PRUEBA TITLE' de <a href="#inicio">La Webera</a>.
         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.
      

   </div>


   

<div data-role="footer">
      <i>2006 - 2012 &copy; LaWebera.es</i>
   </div>


</div>

Gracias al uso del atributo “data-title”, ahora cuando se de clic en el enlace el título sobre el navegador se actualizará, y desplegará la leyenda “Probando el título”.

Precarga de contenido

Al momento de iniciar un proyecto, siempre existe la duda de si se debe optar por un sistema lento en su primera descarga pero rápido el resto del tiempo o por un sistema más equilibrado que consuma un tiempo promedio cada vez que se abra una página. Por ello muchos desarrolladores no saben si depositar todo el contenido dentro de un solo archivo o utilizar una estructura de múltiples archivos.

Los beneficios de incluir todo tu contenido en un solo archivo de HTML, es que todas las páginas estarán disponibles inmediatamente, al momento de acceder a alguna mediante algún enlace interno, el contenido se desplegará de manera rápida ya que todo se encuentra cargado. Lo negativo de esta práctica, es que su descarga inicial puede resultar muy lenta, y cuando se maneja un sitio con gran cantidad de páginas puede resultar muy abrumador manejarlas en un solo archivo.

Es por esta desventaja, que la mayoría de las aplicaciones desarrolladas con jQuery Mobile se desarrollan utilizando una estructura de múltiples archivos, donde generalmente sólo se incluyen dos o tres páginas por cada uno. Esto puede sonar mal para aquellos que buscan rápidez, ya que el hecho de tener todo cargado desde el inicio suena más tentador que tener que esperar la carga cada vez que se da clic sobre un enlace.

Sin embargo, existe una opción que nos permite acelerar el tiempo de descarga de nuestras páginas, mejorando de esta manera la experiencia del usuario. Para ello se hace uso de otro atributo de data, este lleva por nombre “data-prefetch” y se encarga de cargar el contenido de algún enlace externo dentro de nuestro contenido principal, de esa manera cuando el usuario da clic sobre el enlace el contenido ya fue descargado y se accede de manera rápida.

Bienvenido a la página de <a href="lawebera.html" data-prefetch>La Webera</a>

Tan sólo con incluir este atributo, jQuery Mobile sabe que debe cargar su contenido, no lleva ningún valor y no es necesario adherir algo más al código. Por obvias razones, esta técnica debe de ser usada con cuidado, no busques cargar todas las páginas de un sitio muy grande, trata de utilizarlo sólo cuando sea necesario, ya sea con algún par de las páginas más populares de tu sitio, o con una página en específico que sea muy relevante.

Cambiar las transiciones entre páginas

Anteriormente ya habíamos mencionado que existe una técnica para poder cambiar las transiciones que por defecto jQuery Mobile añade al cambio de páginas. Esto se puede hacer de manera global, pero en esta ocasión únicamente estudiaremos la manera de hacerlo para un enlace específico.

Para lograrlo basta con agregar el atributo “data-transition” dentro del elemento de anclaje que contiene nuestro enlace, así como se muestra en el siguiente código:

Bienvenido a la página de <a href="lawebera.html" data-transition="pop">La Webera</a>

Con esta sentencia estamos agregando un efecto “pop” a la transición entre páginas, tenemos otras opciones como lo son “flip”, “fade” para desvanecer, o “slide”, “slidedown”, “slideup” si queremos utilizar un efecto de cortina. Algunas de estas transiciones también soportan una acción de reversa, y para especificarla se hace uso del atributo “data-direction” de la siguiente manera:

Bienvenido a la página de <a href="lawebera.html" data-transition="pop" data-direction="reverse">La Webera</a>