JQueryMobile es un Framework javaScript para el desarrollo rápido y fácil de sitios webs optimizados para teléfonos móviles. Con este framework, aceleramos la velocidad de desarrollo de aplicaciones, encapsulando muchas tareas comunes que se realizan cuando usamos el lenguaje JavaScript. Agrega una capa más a JQuery e intenta suplir algunas necesidades que los programadores de dispositivos móviles padecen.
En el pasado, un desarrollador tenía que programar según para qué dispositivo concreto, lo que alargaba los tiempos de desarrollo y mantenimiento de los sitios webs. Ahora con JQueryMobile, evitamos conocer la lógica específica de cada dispositivo y nos centramos en la programación para un solo fin, el navegador de un teléfono móvil.
JQueryMobile, es un framework bastante jóven, desde el 13 de Agosto de 2010, aunque promete bastante como framework de desarrollo para web para móviles.
Características de JQueryMobile
- Themes personalizados: El framework permite el uso de themes ya creados y da la posibilidad de crear nuevos themes y trabajar con ellos.
- Tamaño reducido: Toda la librería comprimida pesa menos de 12K.
- Facilidad de uso: Destaca la facilidad para el desarrollo de interfaces de usuario de dispositivos móviles.
- Múltiples plataformas: IOS, Android, Blackberry, Palm WebOS, Symbian, Windows Mobile, etc.
- Soporte HTML5: Como su nombre indica, soporta las nuevas etiquetas HTML5.
Como comenzar con JQueryMobile
Para comenzar, como cualquier framework, tenemos que insertar en la cabecera de nuestro html unos ficheros:
- JS de JQuery (base) – jquery-1.10.2.min.js o jquery-2.0.3.min.js
- JS de JQuery Mobile – jquery.mobile-1.3.2.min.js
- Hoja de estilos (CSS) de Jquery Mobile – jquery.mobile-1.3.2.css
Estructura de las páginas
Con JQueryMobile, hay que destacar un cambio en referencia al desarrollo web. En el desarrollo normal de páginas webs, asociamos a cada contenido en una página distinta, pero en este framework no es así y se usa todo en la misma página. Para diferenciar entre páginas distintas, se usa el atributo data-*.
De esta forma podemos tener dentro del mismo fichero, varias páginas y lo que conseguimos es más rapidez a la carga de la web.
Un ejemplo de una estructura básica podría ser:
JQueryMobile: Introducción al desarrollo web para móviles
Mi empresa
Contenido
Copyright
Como podemos ver, disponemos de una página y dentro diferenciamos entre el “header”, el “content” y el “footer”.
Enlaces internos y sitio con varias páginas
Tal y como hemos visto en el punto anterior, podemos tener varias páginas por lo que el código quedaría así:
< !DOCTYPE html>
JQueryMobile: Introducción al desarrollo web para móviles
Mi empresa
Contenido
Copyright
Mi empresa
Formulario de contacto
Copyright
En este segundo ejemplo ya tenemos páginas para poder navegar en la aplicación. Como vemos, es una página sencilla de hacer y el resultado es bastante bueno. Una cosa a destacar es que cuando hacemos un enlace a una “página” de nuestro propio sitio, el mismo framework lo reconoce y añade el botón de volver atrás sin tener que diseñarlo.
Ejemplo de los distintos componentes que ofrece JQueryMobile
El framework además nos ofrece unos componentes al estilo JQuery UI ya implementado que son muy simples de incluir en la web en al que se esté desarrollando. Simplemente incluyendo una líneas de código en nuestro html ya tendremos completamente integrada en la web dichos elementos que pueden ser cosas simples como botones, checkboxes o iconos y links hasta componentes más complejos los cuales harían que tardásemos horas en implementar y que usando JQueryMobile no tardaremos apenas, como por ejemplo los grids, navbars, sliders o los propios efectos de transición.
Podéis encontrar todos los componentes con sus ejemplos y el código necesarios para incluirlos en la página de demos de JQueryMobile
Conclusión
Viendo este tipo de frameworks y lo que agilizan el trabajo de desarrollo, es preferible usar un framework para adaptar nuestra página web a un dispositivo móvil. JQueryMobile, con el poco tiempo que tiene de desarrollo, es uno de los frameworks que más se están usando por su facilidad de desarrollo y su gran resultado.