Tutorial: creación de una página básica en jQuery Mobile Framework (Parte 2)
14/09/2017

Tutorial: creación de una página básica en jQuery Mobile Framework (Parte 2)

Programación y Diseño Web

Previamente habíamos introducido Jquery Mobile en el blog, un framework para poder realizar páginas web reactivas dedicadas a los dispositivos móviles. Hoy vamos a crear una página muy sencilla, la cual tendrá una cabecera, un cuerpo y un pie de página, todo realizado con jquery. El proceso es muy parecido a hacerlo con html puro, pero gracias al framework, tareas como la adaptación al tamaño de pantalla, partes que llevarían más código del necesario se simplifica muchísimo, de modo que es un buen aliado. Si no has leído la primera parte es muy necesario que lo hagas ya que allí hablamos de la integración de los scripts encargados de enlazar nuestro producto con Jquery. Puedes revisarlo con este enlace.

Página simple con Jquery Mobile que te ayudará a seguir avanzando

Antes de añadir la cabecera en el head con los enlaces a los distintos scripts que cargan el código necesario para poder usar jquery, ya sea con CDN o si os lo habéis descargado, recordemos que debemos añadir la etiqueta doctype. Esto es la manera que tenemos nosotros de comunicarle al navegador web, sea cual sea, que nuestro contenido tiene elementos de HTML5. Esto es importante ya que en el momento en que los buscadores indexen nuestra web penalizan las páginas que no tengan dicha etiqueta, ya que sin ella interpreta que es anterior a HTML5 y no es verdad, por supuesto. Después de esto ya podemos poner la cabecera mencionada en la primera parte de esta serie.

Bien, nosotros vamos a realizar este contenido, muy simple:

Como se puede observar tenemos la composición únicamente tiene tres elementos y un enlace. ¿Cómo lo logramos? Os animo a tratar de reproducir lo mismo sin integrar JQuery para que veáis las diferencias en el resultado final. Bien, ¿por donde empezamos? Antes de pasar al cuerpo de la página, nos mantendremos aún en el head porqué debemos poner una etiqueta que no fue mencionada anteriormente: viewport meta. Esta etiqueta se encarga de hacer algo muy específico. Recordemos que nuestra web se podrá visualizar también en dispositivos móviles, de hecho ese es el principal motivo por el cual usamos el framework. A causa de eso, el navegador debe encargarse de poder pintar en pantalla de forma correcta el contenido, tratando de mantener la coherencia entre un equipo de escritorio y uno móvil. Uno de los aspectos que debemos tener en cuenta es el zoom de la página, y aquí entra en juego viewport. Si no la ponemos el navegador tomará en cuenta una medida virtual de unos 900 píxeles para hacer esta visualización correcta, pero no siempre nos puede interesar esto ya que perdemos el control directo del zoom. Es por ello que pondremos, dentro del head de la web, la siguiente línea:

Si analizamos la linea vemos que definimos viewport como nombre, y en content asignamos que vaya a buscar el ancho de los píxeles del dispositivo, con un escalado inicial a 1. Ahora tenemos un control directo en ese aspecto y además no estamos desactivando la posibilidad de poder hacer zoom por parte del usuario. Digamos que es una medida preventiva para que el contenido se visualice bien, como he mencionado, para olvidarnos de ello y curarnos en salud. De hecho esto llega al punto que podemos quitar el zoom. ¿Cuando nos interesa esto? Por ejemplo con un juego HTML5 en el que siempre queremos que los elementos se visualicen de un modo muy concreto, o en una página web que necesitamos que todo se mantenga fijo. Existe un pequeño problema con dispositivos iOS ante la etiqueta meta provocando que no se ajuste de forma exacta a lo que definimos, pero no debe preocuparnos especialmente. Recordad que en CSS y paginación web en general, el aspecto no es absoluto y depende del navegador, ya sea safari, Microsoft Edge, Chrome o Firefox.

Finalmente, vamos a definir la página. Este paso es necesario porqué con JQuery nuestro objetivo es realizar aplicaciones web, las cuales pueden tener varias páginas para la navegación, comportándose como una app móvil. Aquí entra en juego un viejo conocido de CSS, el div. Como sabréis, un div puede contener varias propiedades, desde el ancho, el alto o el color de fondo. Nosotros le vamos a dar uno que no hemos visto aún en este blog: el rol. Con data-role definimos su comportamiento, en este caso page. Lo que ocurre una vez hacemos esto es que todo lo que esté dentro de ese div va a ser relacionado con la página. El resultado es el siguiente:

<div data-role="page">

     <div data-role="header">

          <h1>Título</h1>

     </div><!-- /cabecera -->

     <div data-role="content">

          <p>El contenido de tu página va aquí.</p>     

     </div><!-- /contenido -->

     <div data-role="footer">

          <h4>Pie</h4>

     </div><!-- /pie de página -->

</div>

Si quisiéramos hacer una web con múltiples páginas, debemos definir más roles en nuestro código, añadiendo un id al div

<div data-role=“page" id=“nuevaPagina”>

Y en el botón que deseamos que nos lleve a nuevaPagina le añadimos un enlace corriente con la etiqueta “a”.

Si lo juntamos todo, nuestro código quedaría así:

<!DOCTYPE html>

<html>

     <head>

     <title>Page Title</title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.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.1/jquery.mobile-1.1.1.min.js"></script>

</head>

<body>

<div data-role="page">

     <div data-role="header">

          <h1>Page Title</h1>

     </div><!-- /header -->

     <div data-role="content">

          <p>Page content goes here.</p>      

     </div><!-- /content -->

     <div data-role="footer">

          <h4>Page Footer</h4>

     </div><!-- /footer -->

</div><!-- /page -->

</body>

</html>

Y esto es todo, espero que os ayude a comprender cómo funciona Jquery. Como podéis comprobar el resultado está más sintetizado y con muchas menos líneas.

Curso relacionado: Curso Superior de Creación y Desarrollo de Páginas Web

Comparte en:

Grado Superior de Desarrollo de Aplicaciones informáticas en la Salle de Barcelona. Trabaja actualmente como desarrollador de aplicaciones para móviles, especialidad en videojuegos.

Mejores plataformas para crear un ecommerce
21/05/2020
Carlos Yañez

Mejores plataformas para crear un ecommerce

En el post de hoy veremos cuales son las plataformas de ecommerce más adecuadas para crear una tienda on-line para que, si estás interesado, puedas desarrollar tu pr...

Consejos para detectar un ciberataque
21/05/2020
Rubén Bellido

Consejos para detectar un ciberataque

Estamos en un momento de pleno auge digital, es por ello que también estamos en un punto que los ciberataques van en aumento exponencialmente y así lo demuestran dif...

claves web exito
09/05/2020
Carlos Yañez

6 consejos para hacer una web exitosa

En el post de hoy te daremos las claves para que tu web sea realmente exitosa. Veamos en qué apoyarnos para conseguir el éxito.