Página básica en jQuery Mobile Framework

  • Por
Cómo es la estructura de la página más básica que podríamos hacer con el framework jQuery Mobile.
En el anterior artículo donde presentamos jQuery Mobile me cansé de decir lo sencillo que es desarrollar con este framework y cómo con poco código podemos hacer grandes cosas. Realmente en este artículo no vamos a explotar las enormes posibilidades que nos ofrecen estas librerías, puesto que vamos a hacer una página muy básica, pero al menos servirá para comenzar a apreciar algunas de sus características comentadas anteriormente.

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.

Nota: Como acabas de ver, la página básica de este framework para móviles incluye, no solo los scripts jQuery y el componente jQuery Mobile, con sus CSS, sino también un bloque de código HTML para crear las partes fundamentales de toda página jQuery Mobile. Esto es porque jQuery mobile, como verás a lo largo de los siguientes artículos, no es solo un framework para crear dinamismos del lado del cliente -como podríamos entender a jQuery-, sino todo un paquete de utilidades que van desde la maquetación de contenidos para móviles, mejoras en la presentación e interfaces de usuario, hasta una serie de métodos para realizar dinamismos e interacción con el usuario.

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>

Nota: Los entendidos de HTML5 verán también que hemos definido una etiqueta META para especificar el juego de caracteres UTF-8, necesario en esta versión del lenguaje HTML. Recordar que se debe guardar el archivo con ese formato, UTF-8, con vuestro editor de texto para que todo vaya correctamente.

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>

Nota: Como se puede ver, estamos incluyendo la versión 1.0 del framework, pero quizás en el momento que leas este artículo estén en una release más moderna, por lo que atento al copiar y pegar.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir