comparte el articulo 

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

Actualizado el 30/08/2012 < > 1 Comentario

Resumen: Segunda y última parte de un artículo donde ponemos en práctica distintas formas de desplegar páginas con jQuery Mobile, en esta ocasión explicamos distintas formas de personalizar el uso de múltiples páginas.

En la primera parte de “Trabajando con páginas elaboradas con jQuery Mobile”, tuvimos la oportunidad de crear un sitio móvil compuesto por varias páginas, a las cuales pudimos acceder mediante dos formas distintas, utilizando enlaces internos y archivos múltiples.

Como se ha podido apreciar hasta el momento, trabajar con varias páginas en jQuery Mobile es bastante sencillo, tanto que incluso se puede llegar a pensar que podemos empezar a armar un sitio web adaptado para móvil con tan sólo lo que hemos estudiado en los tres primeros artículos de este manual. Pero esto tan sólo empieza, ahora es tiempo de profundizar un poco más en el tema de las páginas múltiples y aprender algunos trucos interesantes que puedes llegar a tener en consideración el momento de desarrollar.

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

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

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:

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

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:

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

Publicado el 30/08/2012, última actualización 30/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. Ricardo

    Hola, tengo un sitio basado en wp, y estoy buscando para poder hacer la transición a móviles. Trateré de leer el artículo a ver si algo sale. Tu web es interesante para los que estamos iniciando en esto del diseño. PuertoArial

    Sábado, 1 de septiembre 2012

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras