Cómo es la estructura de la página más básica que podríamos hacer con el framework jQuery Mobile.
A continuación vamos a realizar nuestra primera página básica, por un lado incluiremos los scripts para instalar el framework, y por otro veremos también cuál es la estructura de código HTML que debemos implementar para crear esta primera página. Todo esto nos servirá para apreciar como se puede hacer una página para móviles con estructura fundamental de cabecera, cuerpo y pie y cómo jQuery Mobile les coloca automáticamente unos estilos básicos.
Código HTML de la página básica
En este primer ejercicio, en lugar de comentar paso a paso como construir la página, quiero mostrar directamente cuál sería el código HTML necesario para crearla. Esto nos dará una idea global sobre esta estructura de documento y luego comentaré las distintas partes del código.
<!DOCTYPE html>
<html>
<head>
<title>Probando jQuery Mobile</title>
<meta charset="utf-8">
<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>
<div data-role="page">
<div data-role="header">
Página para móviles
</div>
<div data-role="content">
Esta es la versión para móviles de mi sitio web
</div>
<div data-role="footer">
Contacta y lo que sea...
</div>
</div>
</body>
</html>
A continuación podemos ver, parte por parte, comentado todo el anterior código HTML.
Esto es HTML5!
Como se dijo en el artículo anterior, jQuery Mobile funciona con HTML5. Es decir, para poder disponer de todas las funcionalidades del framework debemos escribir código HTML5.Por ello, podremos apreciar como se define el doctype de HTML5 en la primera línea de código.
<!DOCTYPE html>
Etiqueta META Viewport
El segundo punto que nos salta a la vista es la etiqueta META "viewport", que sirve para decirle a jQuery que debe mostrar la página a escala 1.<meta name="viewport" content="width=device-width, initial-scale=1">
Esta etiqueta se debe indicar porque algunos dispositivos realizan un escalado automático de la página para mostrarla a unas dimensiones que no tienen por qué ser las deseadas. En algunos casos se utiliza una anchura virtual de 900 píxeles aproximadamente, con lo que nuestra página podría verse escalada. Con esta etiqueta la anchura de la página será igual a la anchura de la pantalla del dispositivo.
Sin embargo, esta definición no entrará en conflicto con la posibilidad de hacer zoom a la página, lo que es interesante desde el punto de vista de la accesibilidad. El único problema de esta etiqueta es que en iOS no se actualiza automáticamente la anchura de la página al cambiar la orientación del dispositivo (de horizontal para vertical o viceversa), con lo que las dimensiones pueden no ajustarse a la pantalla cuando alteramos la posición del móvil. Según comentan en la documentación, queda pendiente corregir este asunto en versiones venideras del framework.
Incluir los scripts del framework
A continuación vemos todas las etiquetas para instalar jQuery Mobile en nuestra página. Consiste en un link a una hoja de estilos CSS y la inclusión de los scripts Javascript de jQuery y jQuery Mobile.
<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>
En la documentación del framework nos recomiendan hacer los enlaces con los scripts alojados en el CDN (Content Delivery Network) de jQuery, para un mejor desempeño. Pero si lo preferimos también podemos tenerlos alojados en nuestro propio servidor.
Definir la estructura de página y los data-role
A continuación podemos fijarnos en el cuerpo de la página, dentro de la etiqueta BODY. Veremos que la página básica incluye diversas divisiones DIV con distintas utilidades, definidas por los atributos data-role. Estas forman la estructura de la página básica en jQuery Mobile.Para comenzar veremos que existe una división que engloba toda la estructura de la página básica, con el data-role="page".
<div data-role="page">
Dentro de esa división tendremos otros DIV con los tres roles fundamentales de toda página jQuery Mobile: cabecera, cuerpo y pie.
La cabecera se indica con el data-role="header".
<div data-role="header">
El cuerpo de la página lo colocamos con un data-role="content".
<div data-role="content">
Finalmente, el pie de página se indica con un data-role="footer".
<div data-role="footer">
Con esto hemos terminado con la página básica. Podemos ver el ejemplo en funcionamiento.
Conclusión
Lo más seguro es que no te haya sorprendido mucho esta primera página jQuery Mobile. Realmente no tiene nada en especial y ciertamente, si la vemos en un navegador, no observaremos nada que resulte espectacular. No obstante, en el siguiente artículo que publicaremos en DesarrolloWeb.com modificaremos esta página básica, para aprender cómo es la estructura de la página multipágina de jQuery Mobile, que ya nos permitirá mostrar algunas de las características interesantes de este framework.No obstante, quiero que se aprecie que jQuery Mobile ya nos ha alterado un poco el aspecto de nuestra página básica a partir de unos estilos en la cabecera y pie, que son meramente automáticos. Nuevamente, os pido un poco de paciencia para conocer en detalle todas las bondades anunciadas de este framework en futuros artículos.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...