A la hora de programar webs para móvil el framework de javascript jQueryMobile, basado en jQuery, nos ofrece una gran productividad, simplificando profundamente las cuestiones de maquetación. Si ya conoces jQuery y jQueryUI la curva de aprendizaje será muy pequeña.
Este framework es compatible con todos los navegadores y sistemas operativos móviles actuales, es ligero (20kb), casi no utiliza imágenes, se puede combinar con PhoneGAP para realizar aplicaciones nativas y es libre y gratuito.
A la hora de crear la estructura, como en cualquier web, lo primero es empezar por la cabecera (la etiqueta HEAD). Ahí agregamos las referencias necesarias a jQuery, jQuery Mobile y el theme básico de CSS. Para definir el ancho de pantalla utilizamos meta viewport, lo dejaremos definido con la constante width=device-width y la escala mínima y máxima a 1; initial-scale=1.0 maximum-scale=1.0.
Una vez que hemos terminado de referenciar las librerías necesarias, creamos la estructura de la plantilla principal de la página utilizando HTML5, y luego definimos las areas de contenido (content region) que proporciona jQueryMobile. El atributo data-role nos permitirá maquetar con comodidad y estructurar la página. Especificaremos la página (data-role=”page”), el encabezado (data-role=”header”), el contenido (data-role=”content”) y el pié (data-role=”footer”). Estos data-role los utiliza jQueryMobile para en Widgets funcionales y con los estilos del theme utilizado las secciones definidas.
Creo que lo mejor es un ejemplo que ilustre lo comentado:
<!DOCTYPE html>
<html>
<head>
<title>Página prueba</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
<!-- Página principal -->
<section data-role="page" data-title="Página de inicio">
<header data-role="header">
<h1>HW</h1>
</header>
<!-- end header -->
<section data-role="content">
<p>Hello world!</p>
</section>
<!-- end content -->
<footer data-role="footer">
<p>DonnieRock 2012</p>
</footer>
<!-- end footer -->
</section>
<!-- end page -->
</body>
</html>
Pero el verdadero cambio respecto a la programación web tradicional es el concepto «page within page». Dentro del mismo documento están incrustadas todas las páginas. De ahí que en el ejemplo de arriba utilizaramos el atributo data-role=page, porque tendremos que definir varias páginas, que se diferenciarán entre ellas por su atributo id, que será obligatorio para poder navegar entre ellas.
La navegación entre distintas páginas de un mismo documento es bastante sencilla, tenemos que poner en el ‘href’ del enlace el ‘id’ de la página destino y ya está. Podemos especificar el tipo de transición con el atributo data-transition, la transición por defecto es slide pero existen varias que puedes consultar en la página de jQuery. También podemos definir la dirección de la transición con el atributo data-direction.
Recuperaré el código del primer ejemplo, con alguna modificacación, para explicar esto:
<!DOCTYPE html>
<html>
<head>
<title>Página prueba</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
<!-- Página principal -->
<section data-role="page" id="page1" data-title="Página de inicio">
<header data-role="header">
<h1>HW</h1>
</header>
<!-- end header -->
<section data-role="content">
<p>Hello world!</p>
</section>
<!-- end content -->
<footer data-role="footer">
<p>
DonnieRock 2012
<a href="#page2" data-role="button" data-transition="slidedown">Ir a la página 2</a>
</p>
</footer>
<!-- end footer -->
</section>
<!-- end page 1-->
<!-- Segunda página -->
<section data-role="page" id="page2" data-title="Página 2">
<header data-role="header">
<h1>HW2</h1>
</header>
<!-- end header -->
<section data-role="content">
<p>Hello, again, world!</p>
</section>
<!-- end content -->
<footer data-role="footer">
<p>
DonnieRock 2012
<a href="#page1" data-role="button" data-transition="slidedown" data-direction="reverse">Ir a la página 1</a>
</p>
</footer>
<!-- end footer -->
</section>
<!-- end page 2-->
</body>
</html>
Finalmente nos queda por elegir el «theme». Podemos crearlo fácilmente con el ThemeRoller que hay en la web de jQueryMobile, con multitud de themes que podemos crear y asignar a cada componente que usemos en nuestra aplicación. También hay themes ya predefinidos, si no queremos rompernos la cabeza. Los themes son diferenciados por una letra identificativa, gracias a la cual podemos identificar el theme y aplicarlo a cualquier componente que queramos, usando el atributo data-theme. Tienes información sobre los distintos themes en la página de jQueryMobile. El theme además puede ser modificado con facilidad tocando los archivos css.
<section data-role="page" id="page1" data-title="Página de inicio" data-theme="b">
<header data-role="header">
<h1>HW</h1>
</header>
<!-- end header -->
<section data-role="content">
<p>Hello world!</p>
</section>
<!-- end content -->
<footer data-role="footer">
<p>
DonnieRock 2012
<a href="#page2" data-role="button" data-transition="slidedown">Ir a la página 2</a>
</p>
</footer>
<!-- end footer -->
</section>
Bueno, espero con esto ya tienes unas nociones básicas de cómo empezar. Más adelante tocaré otros temas, como los formularios o la integración con PhoneGAP, de momento podéis ir ojeando esto.
DonnierocK 