Web App con jQuery Mobile I

Web App con jQuery Mobile I

Hoy vamos a ver cómo enfrentarnos por primera vez a una Web App con jQuery Mobile. Se trata de un pequeño tutorial en el que podrás hacer tu primer diseño web para movil. Es básico, pero puede ser la base de grandes diseños futuros.

Vamos a empezar paso a paso definiendo cada uno de los códigos que componen la Web App y vamos a explicarlos.

ESTRUCTURA

<!DOCTYPE html>
<html>
<head>
<title>Mi primer Web App</title>
<meta name=»viewport» content=»width=device-width, initial-scale=1″>
<link rel=»stylesheet» href=»http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css» />
<script type=»text/javascript» src=»http://code.jquery.com/jquery-1.6.4.min.js»></script>
<script type=»text/javascript» src=»http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js»></script>
</head>
<body> …contenido de mi App… </body>
</html>

Vemos que en principio, podría tratarse de un HTML básico, pero al menos hay un detalle que nos puede llamar la atención, la etiqueta VIEWPORT.

  • VIEWPORT – La etiqueta viewport indica al navegador coómo debe mostrar el nivel de zoom de la página y sus dimensiones.
    Si no definimos esta etiqueta, muchos navegadores utilizarán un «virtual» ancho de página, en torno a los 900px. Al establecer los atributos de la etiqueta, le estamos obligando a que se adapte al dispositivo con el que estamos viendo la web App. De este modo, en el código que estamos utilizando, le obligamos a que el ancho de pantalla se adapte al ancho del dispositivo, y que el grado de escala inicial sea 1.

Estos ajustes, no anulan la capacidad del usuario de poder hacer zoom en la página, con lo cual no perjudicamos en modo alguno la accesibilidad de las páginas.

 

 DEFINIR LAS PÁGINAS DE LA WEB APP

Como en cualquier código HTML, será dentro del <body> donde definamos todo el contenido. De igual manera, aquí es donde vamos a definir cada una de las páginas que componen nuestra Web App.

Para crear cada una de las páginas utilizaremos etiquetas <div> y para definir cada una de ellas, lo haremos con el atributo data-role=»nombredelapágina»

 <div data-role="page">
 <div data-role="header"><h1>Título de la Página</h1></div>
 <div data-role="content"><p>Aquí va el contenido de esta página</p></div>
 <div data-role="footer"><h4>Pie de página</h4></div>
 </div> 

Bien, ya tenemos definida una página, pero vamos a hacerlo algo más divertido, vamos a crear un par de páginas y a navegar entre ellas. Para ello, en el mismo documento HTML vamos a definir una página más, tal y como hicimos con la primera, con un data-role.

 

DESPLAZAMIENTO ENTRE PÁGINAS

El nombre de la página, lo definimos en el data-role. Para luego navegar entre páginas, es tan simple como hacer un hipervínculo con el nombre de la página destino del modo #nombrepaginadestino.

<body>

<!– Definimos pag 1 –>
<div data-role=»page» id=»pagina1″>

<div data-role=»header»>
<h1>P&Aacute;GINA 1</h1>
</div><!– /header –>

<div data-role=»content»>
<p>Este es el contenido de la primera p&aacute;gina.</p>
<p>Desplazarme a la p&aacute;gina <a href=»#pagina2″>2</a></p>
</div><!– /content –>

<div data-role=»footer»>
<h4>Pie de p&aacute;gina 1</h4>
</div><!– /footer –>
</div><!– /fin pag 1 –>

<!– Definimos pag 2 –>
<div data-role=»page» id=»pagina2″>

<div data-role=»header»>
<h1>P&Aacute;GINA 2</h1>
</div><!– /header –>

<div data-role=»content»>
<p>Este es el contenido de la segunda p&aacute;gina.</p>
<p>Desplazarme a la p&aacute;gina <a href=»#pagina1″>1</a></p>
</div><!– /content –>

<div data-role=»footer»>
<h4>Pie de p&aacute;gina 2</h4>
</div><!– /footer –>
</div><!– /fin pag 2 –>
</body>

Como hemos visto es muy fácil crear páginas dentro del documento HTML, basta con que cada una de ellas tenga un id único con su nombre, de este modo además también podremos desplazarnos entre páginas con un simple enlace que busque al «id» concreto de la página destino.