Creación de una página básica en jQuery Mobile
06/07/2017

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

Programación y Diseño Web

Jquery framework es una herramienta que ya he mencionado otras veces, por lo que estamos familiarizados con el nombre. Pese a eso, existe una parte de ella modificada específicamente para el uso en dispositivos móviles. ¿Por qué querríamos usarla? Esto es lo en lo que quiero centrarme hoy: veremos para qué se usa jQuery mobile y cómo podemos implementar dicho framework a nuestro documento HTML y así beneficiarnos de ello.

 

Jquery mobile, tu aliado en la paginación web móvil

Antes de nada debemos entender qué es Jquery: se trata de un grupo de bibliotecas JavaScript las cuales podemos usar en nuestros ficheros HTML, normalmente enfocadas a crear animaciones, entre muchas otras cosas, de transición, adornar visualmente la página, etc. Por ejemplo, podemos llegar a crear un texto por encima de una imagen para comunicar a qué hace referencia en el caso que sea un enlace, como ocurre en este portafolio. Es una forma muy resumida de describir Jquery, pero su potencial se extiende a la posibilidad de crear aplicaciones móviles web que funcionarán en la gran mayoría de dispositivos modernos. Esto es debido a que el motor que mueve todo esto es en realidad HTML, CSS y Javascript, no son lenguajes nativos ni específicos de cada fabricante/sistema operativo.

Bien, antes de ver qué podemos llegar a hacer con Jquery veremos los distintos métodos que tenemos para incluir estas bibliotecas a nuestro proyecto. Existen dos formas, como ocurre también con su contraparte de escritorio, o incluso con Bootstrap:

  • Descargando todo el paquete y gestionarlo en local. Se entiende con esto el tenerlo en el servidor donde hospedamos nuestra página web.
  • Enlazando el CDN, o Content Delivery Network. Este es más sencillo dentro de lo que cabe ya que lo único que debemos hacer es poner un enlace en nuestro "head" y el mismo documento se encargará de ir a buscar la versión que nos ofrece la propia organización JQuery.

¿Qué ventajas e inconvenientes existen en usas un método u otro? Simple, y es que al igual que si accedemos de forma remota no debemos preocuparnos de lo que pasa con todo el código, si queremos realizar algún cambio en los estilos, por ejemplo, deberemos hacerlo en línea, ya que, como dice la teoría de CSS, los estilos en línea tienen prevalencia por encima de los estilos externos, y es una práctica un poco incómoda. Si nos lo descargamos, en cambio, tendremos un control total y directo sobre Jquery.

Vamos a ver cómo usar estos dos métodos.

 

Enlazar a Jquery CDN

Debemos poner el siguiente código en el head de nuestro documento HTML:

<head>

  <!-- Incluye el metadata para asegurar que funciona bien los gestos en pantallas táctiles -->

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

  <!-- Incluye los estilos de JQuery -->

  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

  <!-- Incluye la biblioteca Jquery -->

  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

  <!-- Incluye la biblioteca Jquery mobile -->

  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

Si nos fijamos en las anotaciones que he dejado nos damos cuenta que JQuery no sólo es código en JavaScript, también estamos cargando unos estilos.

 

Descarga de Jquery

En este caso nos descargamos todos los ficheros de su página web y lo guardamos en nuestro servidor, o en nuestra máquina local. Una vez hecho eso, en el head también, pondremos lo siguiente:

<head>

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

<link rel="stylesheet" href="jquery.mobile-1.4.5.css">

<script src="jquery.js"></script>

<script src="jquery.mobile-1.4.5.js"></script>

</head>

Aquí ya debemos preocuparnos de poner correctamente la ruta, pero en realidad el principio es el mismo. Eso sí, obteniendo el poder de modificar directamente en la fuente lo que necesitamos.

 

Únicamente con esto ya estamos listos para usar JQuery, y el modo de hacerlo es tan simple como llamar a las clases CSS que nos otorga del mismo modo que haríamos con Bootstrap. Por ejemplo, si queremos crear un botón ya tenemos una clase que se encarga de ello, únicamente debemos llamarla de la forma con la que requerimos estos elementos en HTML. Si vamos a este ejemplo y miramos la etiqueta <button>, la clase CSS asignada se llama “ui-btn”. Eso es lo que le comunica a Jquery que en esa etiqueta queremos que, a nivel visual, aparezca un botón como el del ejemplo de W3C.

En una segunda parte de este post construiremos una página web simple de presentación, o landing page, usando JQuery Mobile, para que futuros clientes o empresas puedan visitar y conocernos un poco más. Os daréis cuenta que con las indicaciones adecuadas podréis dominar esta biblioteca y empezar a realizar paginación web óptima para la visualización en dispositivos móviles.

 

Curso relacionadoCurso 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.

Guía básica de protocolo en un evento
23/08/2017

Guía básica de protocolo en un evento

La organización de un evento es una herramienta de comunicación bàsica para una

10 medidas para fomentar la igualdad de género en las empresas
22/08/2017

10 medidas para fomentar la igualdad de género en las empresas

De manera esporádica, en muchas ocasiones, no se da una igualdad de géneros en las empresas.

Claves para gestionar la información personal en redes sociales, ¿cuánto saben sobre mí?
21/08/2017

Claves para gestionar la información personal en redes sociales, ¿cuánto saben sobre mí?

Las redes sociales juegan un papel muy importante en nuestras vidas: la realidad virtual complementa y, en ocasio

Comentarios

No hay comentarios.

Añadir nuevo comentario