¿QUE ES JQUERY MOBILE?
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
- 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.
ESTRUCRTURA EJEMPLO
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”.
