jQuery Mobile Framework es un producto que sin duda va a dar mucho que hablar en los próximos años. Estamos asistiendo a la revolución de los dispositivos móviles de acceso a Internet y este framework, basado en el popular jQuery, se va a convertir en el mejor aliado para el desarrollo de sitios web orientados para al segmento de consumidores web en movilidad.

En esta introducción a jQuery Mobile voy a ofrecer las claves o características de este framework, de modo que las personas puedan saber qué tipo de ayudas nos ofrece para el desarrollo y por qué va a significar una revolución a la hora de crear aplicaciones web compatibles con la mayoría de las plataformas móviles.

jQuery se reinventa a si mismo

Quizás recordemos el lema o slogan de jQuery: "Write Less, Do More". Pues jQuery Mobile Framework es esa misma idea, pero elevado a la siguiente potencia.

Para explicar esto quiero antes preguntar a los lectores ¿Para qué sirve un framework? Supongo que la mayoría lo sabrá de sobra, pero comento básicamente estas dos situaciones:

1. No tener que lidiar con las particularidades de cada navegador. Desarrollar una vez con código jQuery y que se vea correctamente en todos los navegadores del mercado. Incluso, cuando saquen otro navegador, o versiones nuevas de los existentes, que no tengas que retocar tu código para adaptarlo también a ellos.
2. También sirve para escribir menos código fuente y hacer cosas más espectaculares.

Ahora ¿Por qué jQuery Mobile es otra vuelta de tuerca?

1. Porque con los dispositivos móviles se han multiplicado el número de navegadores y de plataformas. Tenemos muchos fabricantes, de tablets y smartphones y diversos dispositivos con características distintas, como tamaños de pantallas, sistemas operativos diferentes y diversos navegadores basados en cada uno de ellos. Vamos, que si antes con los navegadores para PCs había problemas de compatibilidad, cuando teníamos apenas 3 sistemas operativos y 3 navegadores populares, ahora con los móviles la cosa todavía se hace más complicada.
2. Porque el desarrollo de sitios web con jQuery Mobile es todavía más automático de lo que era trabajar con jQuery. Con mucho menos código haces muchas más cosas.

Como te puedes figurar, con los dispositivos móviles todavía se hace más necesario usar un framework, que te facilite desarrollar una vez y ejecutar de manera compatible en todos los dispositivos. Además de ello, con jQuery Mobile reducirás drásticamente el tiempo de desarrollo de tu sitio web para dispositivos de movilidad.

Características de jQuery Mobile

Lo primero que debe quedarnos claro para describir jQuery Mobile es que no se trata de un nuevo framework creado desde cero. En absoluto. Podemos entender a jQuery Mobile como un plugin para jQuery puesto que es un producto que está basado en el propio framework Javascript jQuery. Por tanto, aquellas personas que ya conocen jQuery no van a tener que aprender nada nuevo, sino aplicar sus conocimientos y desarrollar fácilmente aplicaciones para móviles. Esto significa una gran ventaja, puesto que hay muchas personas que conocen jQuery y que van a poder pasarse sin prácticamente ningún problema al desarrollo para dispositivos.

Lo segundo que quiero señalar es que, si bien jQuery nos sirve para desarrollo de funcionalidades Javascript compatibles con todos los navegadores, jQuery Mobile va un poco más allá. No se trata simplemente de una capa para realizar código Javascript que funcione en todos los navegadores, sino un conjunto de herramientas que simplificará el proceso de crear páginas para móviles, desde la escritura del propio código HTML, la maquetación con CSS y la creación de efectos dinámicos con Javascript.

Un momento: ¿como nos va a ayudar a hacer HTML jQuery Mobile? No es que vayas a escribir código HTML desde jQuery, sino que, al incluir jQuery Mobile tu código HTML básico será optimizado para realizar diversos comportamientos dinámicos en los navegadores móviles, de manera automática. Además, muchas cosas del propio framework las vas a poder configurar directamente a través de atributos HTML.

Bueno ¿Y qué hay de CSS? Pues tampoco es que tengas que escribir tu código CSS desde jQuery Mobile, sino que este framework dispondrá diversas herramientas CSS, también de manera automática, que podrás utilizar en tus desarrollos. Por poner dos ejemplos, con este framework tus componentes de formularios se estilizarán de manera automática, sustituyendo los feos elementos nativos de los navegadores de dispositivos móviles. Además, dispondrás de un pequeño framework CSS para poder hacer cosas como la maquetación a partir de una rejilla.

Aparte de todo lo comentado hasta ahora, que opino es clave para entender bien qué es jQuery Mobile Framework, aquí van otra serie de características rápidas del producto:

• Creado sobre jQuery con arquitectura de jQueryUI: Los propios creadores de jQuery usaron su experiencia para desarrollar el framework para móviles y además implementaron la arquitectura diseñada para las librerías de interfaces de usuario jQueryUI. Por tanto se trata de un producto muy bien pensando, en base a la experiencia de años.
• Está desarrollado para trabajar con HTML5: de hecho, estamos obligados a hacer páginas HTML5 para aprovechar todas las características del framework.
• Repleto de automatismos: Si ya era fácil hacer Ajax en jQuery, todavía es más fácil en jQueryMobile. De hecho, si el framework capta que puede hacer una conexión Ajax en lugar de una convencional, lo hace automática por Ajax. Y eso es solo un ejemplo, también son automáticas las transiciones entre páginas, la personalización del aspecto de la página, etc.
• Preparado para dispositivos táctiles: Los dispositivos táctiles tienen cambios en la gestión de eventos y jQuery Mobile nos facilita la labor de adaptarnos a ellos.
• Personalización de temas: Igual que ocurría con las jQueryUI, el jQuery Mobile podemos elegir entre varios temas gráficos ya listos para aplicar al aspecto de nuestra página. Además, podemos crear nuestros propios temas personalizados.

Compatible con el mayor número de plataformas

Los creadores del framework comentan entre sus características que se han esforzado para cubrir el mayor número de plataformas de dispositivos móviles posible. Dicen que el target que han buscado es mayor que el del resto de frameworks disponibles en el mercado.

En la siguiente imagen podemos ver los logos de los sistemas operativos que jQuery Mobile soporta.

No obstante, cabe señalar existen diversos grados de compatibilidad para cada sistema, o mejor dicho, para cada navegador dentro de cada familia de dispositivos. En la documentación del framework, en la sección de “Supported Platforms” veremos que el grado de compatibilidad está dividido en tres niveles distintos, desde Grado-A (donde están la mayoría navegadores para iOS y Android, así como BlackBerry, Palm WebOS, los navegadores de ordenadores de escritorio, etc.) a Grado-B (donde encontramos a Symbian, Opera Mini 5.0 y 6.0 para iOS o Balckberry 5.0) o Grado-C (con el resto de los smartphones, entre los que se encuentra Windows Mobile o Blackberry 4).

En resumen, que según apuntan en la documentación, solo se ha dejado sin soporte deliberadamente en esta versión 1.0 del framework el sistema Samsung Bada (El sistema operativo propietario de Samsumg para smartphones), aunque dicen que probablemente funcione relativamente bien incluso sin haberla probado, pues todavía no hay dispositivos o emuladores.

En los próximos artículos de DesarrolloWeb.com empezaremos a desarrollar con jQuery Mobile, comenzando por las explicaciones sobre cómo hacer una primera página básica. De momento os dejo un par de enlaces que puedan complementar esta información:

• Como no, es imprescidible dar el enlace a este framework, para que podáis ir conociéndolo: http://jquerymobile.com
• Además, una referencia interesante a un sitio donde se puede ver una galería de sitios creados con jQuery Mobile.

Introducción a jQuery Mobile en vídeo

Hemos realizado una retransmisión en directo que puede servir para poder tener una visión general de jQuery Mobile y para dar los primeros pasos con este framework para el desarrollo de sitios para dispositivos móviles. En la introducción se explican cosas importantes como qué es jQuery Mobile, cómo insertarlo en una página web o qué relación tiene con el proyecto jQuery global. Además se comienza a codear con diversos ejemplos en los que se puede apreciar la estructura de la página básica, la estructura multipágina y la personalización de elementos del HTML con distintos roles.