Cómo funciona jQuery Mobile

Valora este artículo

¿Qué es jQuery Mobile?

Es un framework orientado al desarrollo de aplicaciones web para móviles creado por el equipo de proyectos de jQuery. El objetivo principal del framework es la compatibilidad con el mayor número posible de dipositivos móviles para conseguir una misma sensación de navegación por parte del usuario.

jQuery Mobile funciona transformado en el navegador las páginas html creadas por el programador para que tengan un aspecto más adecuado a las dimensiones de pantalla de los dispositivos móviles.

Programación en jQuery Mobile

Desde el punto de vista del diseño y desarrollo de aplicaciones web, jQuery proporciona dos métodos de creación de páginas:

  • Método tradicional donde cada página está en un fichero html y se enlazan unas a otras.
  • Un único fichero html que contiene todas las páginas con enlaces internos entre ellas.

Independientemente del método elegido para desarrollar la aplicación, la estructura básica de una página con jQuery Mobile es la siguiente:

El DOCTYPE debe ser el de html5.

La etiqueta meta viewport se utiliza para que los navegadores ajusten el zoom al tamaño de la página.

A continuación se cargan las librerias de jQuery Mobile, jQuery y los estilos básicos.

El contenido en jQuery se define dentro de los elementos div con el atributo data-role. El atributo principal es la página (data-role=”page”) que a su vez se compone de una cabecera (data-role=”header”), el contenido (data-role=”content”) y un pie (data-role=”footer”).

Cuando optamos por programar todas las páginas en un único fichero html, tenemos varios elementos div con data-role=”page” que se diferencian por el atributo id. Para enlazar las distintas páginas dentro del mismo fichero, se utiliza <a href=”#id_pagina>Texto enlace</a>.

Carga de las páginas

jQuery Mobile utiliza por defecto llamadas AJAX en todos los enlaces y llamadas dentro de una página. Cuando no es posible hacerlas (por ejemplo en llamadas a otros dominios) se realizan con con una petición http normal.

Cada vez que se pulsa en un enlace o se envía un formulario se envía una solicitud AJAX basada en la acción href o el botón submit del formulario. Mientras que se la respuesta AJAX, se muestra una ventana con el mensaje de “Cargando página”.

Cuando se carga la página solicitada, jQuery Mobile analiza el documento buscando el elemento div con el atributo data-role=”page” e inserta ese código en el DOM de la página original. De esta manera, cada nueva página se añade en el DOM a las ya existentes.

Para forzar a que los enlaces no se soliciten por AJAX se pueden utilizar los atributos rel=”external” o data-ajax=”false”. De esta forma se cargará la página completa.

Precarga de páginas

En las aplicaciones con múltiples ficheros html es posible precargar las páginas a las que apuntan los enlaces simplemente añadiendo el atributo data-prefetch.

Una vez que la página principal se ha cargado completamente, jQuery Mobile busca los enlaces con el atributo data-prefetch y carga automáticamente su contenido. De esta manera la transición entre páginas es más fluida y la experiencia de usuario es mejor.

Como contra, hay que tener en cuenta que es posible que junto con la página principal se carguen muchas otras páginas a las que el usuario finalmente no acceda.

Caché de páginas

Conforme el usuario va navegando por las páginas de la aplicación, estas se van añadiendo al DOM lo que puede repercutir en el rendimiento de la aplicación.

Para solucionar esto jQuery Mobile añade un flag a las páginas ya visitadas de forma que cuando se vuelven a visitar se intenta cargar primero de la Caché, y en caso de no existir se vuelve a solicitar al servidor.

Conclusión

En este artículo he querido hacer un pequeño resumen de como funciona la gestión de páginas en jQuery Mobile. Espero vuestros comentarios con mejoras y sugerencias.

Saber más: http://jquerymobile.com/

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *