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 ue 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.5.1.min.js
-
JS de JQuery Mobile – jquery.mobile-1.0a3.min.js
-
Hoja de estilos (CSS) de Jquery Mobile – jquery.mobile-1.0a3.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:
<!DOCTYPE html>
<html> <head> <title>JQueryMobile: Introducción al desarrollo web para móviles</title> <script src=“jquery-1.5.1.min.js”></script> <script src=“jquery.mobile-1.0a3.min.js”></script> <link rel=“stylesheet” href=“jquery.mobile-1.0a3.min.css” />
</head>
<body> <div data-role=“page”> <div data-role=“header”> <h1>Mi empresa</h1> </div> <div data-role=“content”> <p>Contenido</p> </div> <div data-role=“footer”> <h4>Copyright</h4> </div> </div>
</body>
</html>
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>
<html> <head> <title>JQueryMobile: Introducción al desarrollo web para móviles</title> <script src=“jquery-1.5.1.min.js”></script> <script src=“jquery.mobile-1.0a3.min.js”></script> <link rel=“stylesheet” href=“jquery.mobile-1.0a3.min.css” />
</head>
<body> <div data-role=“page” id=“principal”> <div data-role=“header”> <h1>Mi empresa</h1> </div> <div data-role=“content”> <p>Contenido</p> <p><a href=”#principal”>Inicio</a></p> <p><a href=”#productos”>Productos</a></p> <p><a href=”#contacto”>Contacto</a></p> </div> <div data-role=“footer”> <h4>Copyright</h4> </div> </div> <div data-role=“page” id=“productos”> <div data-role=“header”> <h1>Mi empresa</h1> </div> <div data-role=“content”> <p>Contenido</p> </div> <div data-role=“footer”> <h4>Copyright</h4> </div> </div> <div data-role=“page” id=“contacto”> <div data-role=“header”> <h1>Mi empresa</h1> </div> <div data-role=“content”> <p>Formulario de contacto</p> </div> <div data-role=“footer”> <h4>Copyright</h4> </div> </div>
</body>
</html>
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 “pagina” de nuestro propio sitio, el mismo framework lo reconoce y añade el botón de volver atrás sin tener que diseñarlo.
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.
