Introducción
jQuery Mobile es un framework desarrollado por jQuery que combina HTML5 y jQuery para la creación de portales web móviles. Nos permite generar aplicaciones cuya apariencia será siempre la misma independientemente del dispositivo desde el que acceda un usuario siempre que este usuario acceda desde un dispositivo que acepte HTML5.
Este framework nos provee de ciertas herramientas que nos hacen la tarea de crear una página mucho más sencilla. Con unas pocas asignaciones de atributos HTML podremos generar inoreíbles interfaces muy usables y accesibles.
¿Qué tal con la accesibilidad?
Un punto a favor para este framework es que las aplicaciones generadas a través de él cumplen con los estandares de accesibilidad 1.0.
Muchos de los componentes de jQuery Mobile utilizan técnicas como el control del foco, la navegación a través del teclado o los atributos HTML especificados por la especificación W3C WAI-ARIA.
Actualmente estan trabajando para cumplir absolutamente con los entandares de accesibilidad, y su objetivo es que todos su componentes cumplan con las normas de accesibilidad 1.0.
¿Ha cambiado algo en cuanto a Javascript?
Como es lógico, la respuesta es sí. Su sintaxis sigue siendo la misma pero han ampliado el número de funciones y métodos para dar cabida a todas las nuevas funcionalidades de HTM5 como la geolocalizacion, acelerometro, o eventos que detecten el control con el dedo sobre la pantalla. Cada componente tiene sus propias funcionalidades Javascript y sus propios métodos de control. Si accedéis a la documentación de cada elemento podréis ver como cada uno tiene 2 pestañas de métodos y eventos donde podréis ver que soportan.
¿Cómo puedo empezar a usarlo?
La forma de utilizarlo es tan simple como descargarse la librería desde la siguiente url:http://jquerymobile.com/download/
Otra forma de utilizarlo es incluyendo en nuestro proyecto las siguientes líneas de código en el head de la aplicación:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
Una vez incluido sólo nos queda empezar a utilizar su sintaxis cuya documentación podemos encontrarla en la siguiente url: http://jquerymobile.com/demos/1.1.0-rc.1/
A la hora de utilizarlo generaremos la apariencia en forma, color, iconos, etc de cada elemento a partir de ciertos atributos añadidos al elemento en la declaración de la tag. Por ejemplo:
<a href="index.html" data-role="button" *data-icon="delete"*>Delete</a>
Con el código anterior generamos a partir de un link un botón con el data-role="button" y además le añadimos un icono al botón mediante data-icon"delete". La apariencia final sería la siguiente:
Al igual que con el elemento anterior, podemos generar decenas de elementos diferentes con decenas de configuraciones diferentes,y lo más importante, siempre los veremos con la misma apariencia, sea el dispositivo que sea.
Con esto conseguimos que, sin tocar absolutamente nada de CSS, generemos maquetaciones estables y fiables para dispositivos móviles cumpliendo, además, con los estándares de Accesibilidad 1.0.
¿Qué plataformas lo soportan?
En el siguiente enlace podemos ver todas las plataformas que soportan jQuery Mobile divididas en 3 niveles según el grado de compatibilidad de la misma: http://jquerymobile.com/demos/1.1.0-rc.1/#/demos/1.1.0-rc.1/docs/about/platforms.html
¿Qué alternativas tenemos?
Una de las posibles alternativas que tenemos para desarrollar aplicaciones móviles es LungoJS. Es un framework bastante potente , y al igual que jQuery Mobile, esta todavía en fases beta, incorporando cada día que pasa nuevas funcionalidades. Esta creado para aprovechar al máximo todas las nuevas capacidades de HTML5, javascript y CSS3.