¿Qué es jQuery Mobile?
jQuery Mobile es un framework para desarrollo de aplicaciones y sitios web optimizados para smartphones y tablets.
Es el framework que estamos utilizando en Facultia para el desarrollo de la versión móvil de la aplicación.
¿Por qué utilizarlo?
Con el lema “write less, do more” podemos desarrollar una sola aplicación que funcione en las plataformas más populares de smarthphones y tablets, en vez de tener que escribir aplicaciones nativas para cada dispositivo móvil o sistema operativo, siempre teniendo en cuenta las limitaciones del navegador utilizado.
Plaformas compatibles con jQueryMobile
Además, no es necesario que el programador reciba formación específica como en el caso de Objective-C para iOS/iPhone o Java para Android y únicamente sabiendo HTML puede realizar el trabajo.
Para definir el grado de compatibilidad con los dispositivos, jQueryMobile nos ofrece el siguiente sistema de clasificación:
- Sistema completo o de grado-A, con animaciones entre transiciones de páginas basado en Ajax.
- Sistema completo menos Ajax o de grado-B.
- Sistema básico o de grado-C, para smartphones antiguos.
- Sistema no soportado oficialmente. Funciona en el dispositivo aunque no está testeado.
Se puede consultar el grado de compatibilidad para cada dispositivo en la documentación oficial.
Versión actual
Actualmente está en versión beta 1.0b2.
Para utilizar el framework podemos descargar todos los ficheros a nuestro servidor o utilizar uno de los CDN que hay disponibles.
Si queremos utilizar el CDN incluiremos este fragmento de código en nuestra etiqueta head.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" /> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
En cambio, si queremos servir los ficheros desde nuestro servidor:
<link rel="stylesheet" href="[carpeta_CSS]jquery.mobile-1.0b2.min.css" /> <script src="[carpeta_JS]jquery-1.6.2.min.js"></script> <script src="[carpeta_JS]jquery.mobile-1.0b2.min.js"></script>
En este caso debemos copiar también el directorio con las imágenes para poder cargar los iconos, etc.
Para el funcionamiento de jQueryMobile, además del CSS y la propia librería, es necesario incluir jQuery.
Tamaños y tiempos de carga de los ficheros
En la siguiente captura podemos ver que todo lo necesario ocupa alrededor de 205 Kb, aunque comprimido en gzip son únicamente 63 Kb. Una de las ventajas que tenemos al utlizar el CDN es que si el usuario ha visitado anteriormente algún otro sitio que utilice jQuery Mobile, no será necesario descargar ninguno de los ficheros.
Ejemplo
Veamos un ejemplo sencillo que contiene dos páginas:
- Home: contiene un header con dos botones (un enlace externo al blog y otro al login), un content con un listview de grupos que nos permite introducir un filtro y un footer con una navbar con posición fija.
- Login: un formulario de login con header y footer básicos (en el header, a la derecha, podemos ver un botón sin texto que nos permite ir al home).
Por último, vemos el código del ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo jQuery Mobile para el post en el blog de Facultia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<!-- HOME -->
<div data-role="page" id="home" data-title="Home">
<div data-role="header" data-position="inline" data-theme="a">
<a href="http://www.facultia.com/blog" data-icon="arrow-u" data-theme="b" rel="external">Blog</a>
<h1>Grupos</h1>
<a href="#login" data-icon="check" data-theme="b">Login</a>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-filter="true" data-theme="a" data-dividertheme="b" data-inset="true">
<li data-role="list-divider">Internacionales</li>
<li><a href="#">The Beatles</a></li>
<li><a href="#">The Rolling Stones</a></li>
<li><a href="#">Bob Dylan</a></li>
<li><a href="#">Nick Drake</a></li>
<li><a href="#">The Beach Boys</a></li>
<li><a href="#">The Byrds</a></li>
<li><a href="#">Spoon</a></li>
<li><a href="#">Yo La Tengo</a></li>
<li data-role="list-divider">Nacionales</li>
<li><a href="#">Los Planetas</a></li>
<li><a href="#">La Casa Azul</a></li>
<li><a href="#">La Buena Vida</a></li>
<li><a href="#">La Estrella De David</a></li>
<li><a href="#">Los Brincos</a></li>
<li><a href="#">Manos de topo</a></li>
<li><a href="#">Papa Topo</a></li>
</ul>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active" data-icon="refresh" data-theme="b">Actualizar</a></li>
<li><a href="#" data-icon="search" data-theme="b">Buscar</a></li>
<li><a href="#" data-icon="gear" data-theme="b">Ajustes</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page home -->
<!-- LOGIN -->
<div data-role="page" id="login" data-title="Login">
<div data-role="header" data-theme="b">
<h1>Login</h1>
<a href="#home" data-icon="home" data-iconpos="notext" class="ui-btn-right"></a>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<form action="#" method="post" id="login">
<div data-role="fieldcontain">
<label for="username">Usuario</label>
<input type="text" name="_username" id="username" placeholder="Nombre de usuario" autofocus required/>
</div>
<div data-role="fieldcontain">
<label for="password">Password</label>
<input type="password" name="_password" id="password" value="" placeholder="Introduzca password" required />
</div>
<div class="ui-grid-a">
<div class="ui-block-a">
<button type="submit" data-theme="e">Login</button>
</div>
<div class="ui-block-b">
<a data-role="button" href="#home">Cancel</a>
</div>
</div>
</form>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
<h4>© Facultia</h4>
</div><!-- /footer -->
</div><!-- /page login -->
</body>
</html>
Publicado el segundo artículo de la serie “Introducción a jQuery Mobile”: Introducción a jQuery Mobile (II)
Contenido relacionado
If you enjoyed this article, please consider sharing it!
Buena introducción. Una pregunta, ¿qué emulador utilizas para probarlo en el PC?
Puedes utilizar el Opera Mobile Emulator. También puedes probarlo en Chrome o Firefox. Gracias por el comentario.
Desde Safari opción para desarrolladores iPhone
Buen artículo.
Si deseo compilarlo e instalarlo para ejecutarlo en diferentes sistemas operativos móviles simbian, android, windows mobile, etc. cómo lo hacen?
Con jQuery Mobile desarrollas aplicaciones web por lo que cualquier dispositivo con navegador podrá acceder. No son aplicaciones nativas. Hay frameworks como PhoneGap que a partir de HTML5 si te permiten generar aplicaciones nativas para distintas plataformas como symbian, iOS, Android… pero la idea de jQuery Mobile no es esa. Un saludo.
[...] jQuery Mobile [...]
[...] Introducción a jQuery Mobile (I) [...]
Gracias por la información, me ha sido muy útil ^^