comparte el articulo 

Trabajando con páginas elaboradas con jQuery Mobile – Parte 1

Actualizado el 16/08/2012 < > 1 Comentario

Resumen: Primera parte de un artículo donde ponemos en práctica distintas formas de desplegar páginas con jQuery Mobile, en esta ocasión explicamos como añadir varias páginas en un solo archivo, así como enlazar varios archivos en un mismo servidor.

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">
      <p>
         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>.
      </p>
   </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">
      <p>
         <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.
      </p>
   </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 comunmente 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">
      <p>
         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>.
      </p>
   </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">
      <p>
         <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.
      </p>
   </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.

Publicado el 16/08/2012, última actualización 16/08/2012.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

Añadir Comentario (Subir al texto)

1 Comentario

  1. Toni

    De momento me gusta mucho.

    Domingo, 9 de septiembre 2012

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras