You are here
Primeros pasos utilizando jQuery Mobile Sin categoría 

Primeros pasos utilizando jQuery Mobile

Primeros pasos utilizando jQuery Mobile

 

Este proyecto consistirá en una sencilla página desarrollada con HTML simple, a la cual le añadiremos los primeros pasos utilizando jQuery Mobile para que tome la funcionalidad móvil, permitiéndonos trabajar conatributos de data.

Construyendo el HTML

El primer paso de esta práctica será elaborar el código de nuestra página HTML, el cual se mantendrá sencillo y sin alguna optimización para móvil.

Vale aclarar, que cualquier página web que realicemos puede ser vista mediante un móvil, pero no necesariamente será usable, ya que muchos de los sitios son diseñados en base a un layout enorme, con links pequeños, imágenes de gran tamaño o incluso con partes dependientes totalmente de Flash.

Factores como estos hacen de la página un elemento bastante difícil para interactuar, imposible de leer sin zoom, demasiado ancho para desplegarse completo y con poca compatibilidad con el modo de uso UNEWEB 5 JQUERY MOBILE de los dispositivos móviles.

Partes tan básicas como un formulario puede caer en el estorbo si no se les da una funcionalidad adecuada en base a los estándares móviles, por ejemplo, si nuestro form no trabaja bien con una pantalla táctil, el usuario no podrá avanzar más en su intento de petición.

Pero antes de preocuparnos por la compatibilidad móvil, tenemos que realizar la estructura sobre la cual crecerá nuestro proyecto, para ello iniciaremos con el siguiente código:

<h1>Hola!</h1>
<p>
Bienvenido a la primera página de la Uneweb.
Este es un sitio de prueba y en esta sección debería ir más contenido,
por el momento no tenemos más que decir.
</p>
<p>
<i>2015 &copy; Uneweb</i>
</p>

Como dijimos un código bastante sencillo, el cual simplemente nos servirá para establecer una base sobre la cual trabajaremos.

Como se puede apreciar hasta el momento nuestra página está compuesta por un encabezado y dos párrafos, nada del otro mundo, pero aun siendo tan sencilla podemos apreciar diferencias en su despliegue en dispositivos móviles.

Si observamos el resultado en un navegador no encontremos problema alguno, pero una vez que se analiza la misma página con un dispositivo móvil podremos apreciar que los elementos se reducen considerablemente por lo que es necesario recurrir al zoom del dispositivo.

En si esta operación no es un problema, pero es preferible que el sitio sea desplegado correctamente desde el principio, es ahí donde jQuery Mobile entra en función.

Obtener jQuery Mobile Para utilizar jQuery Mobile no es necesario instalar algún programa, tener herramientas especiales, correr servicios o configurar algún servidor, basta con descargar el paquete con el conjunto de archivos que componen la librería, colocarlos dentro de tu proyecto y añadirlos a tu código mediante una sola línea de código.

Si esto aún representa mucho trabajo para ti, entonces puedes recurrir al CDN (Content Delivery Network) que jQuery te provee para llamar a la librería desde la nube y así no tengas que descargar absolutamente nada.

La ventaja de hacer uso del CDN, es que muchas páginas ya utilizan estos archivos, entonces si el usuario visitó alguno de esos sitios antes que el tuyo, ya contará con la librería dentro de sus archivos en caché, por lo que no consume recursos de petición ni tiempo de descarga.

A lo largo de este manual, por cuestiones de practicidad, haremos uso de la dirección proporcionada por el CDN para cargar la librería en nuestro código, pero en esta ocasión haremos la descarga, en caso de que tú decidas utilizar los archivos de manera local.

Lo primero que debes hacer es ir a http://jquerymobile.com/download/ y descargar el archivo Zip con la versión más reciente de la librería.

Dentro de este Zip podrás apreciar que existen dos carpetas, una con ejemplos de uso de la librería y una segunda con seis imágenes que son utilizadas por los CSS al momento de generar las páginas optimizadas para móviles.

El resto está compuesto por los archivos de estilo y el JavaScript de la librería, con sus respectivas versiones miniaturizadas, las cuales debemos utilizar en nuestro servidor de producción para que consuma menos tiempo de descarga.

Si aún no cuentas con el framework de jQuery dentro de tu proyecto, entonces también debes de añadirlo al código para que la librería Mobile funcione correctamente.

Para ello, cuentas con los mismos caminos, descargar la última versión desde la página de jQuery o utilizar un servidor de contenido que te proporcione el código desde la nube.

Implementación de jQuery Mobile Una vez que tenemos los archivos en nuestro servidor, es tiempo de pasar a implementar la librería dentro de nuestro código, y darle el soporte necesario.

Para ello basta con seguir una serie de pasos sencillos que nos permiten crear un entorno adecuado para que la página sea desplegada adecuadamente.

Primero debemos añadir un DOCTYPE a nuestro sitio, esta es una costumbre muy poco utilizada por aquellos acostumbrados a desarrollar de manera genérica, ya que como en muchas ocasiones no es necesario especificar un tipo de estandarización el desarrollador tiende a omitir este paso.

En esta ocasión utilizaremos una declaración de DOCTYPE como lo dictan las nuevas reglas de HTML5.

<!DOCTYPE html>

Esto ayuda a informarle al navegador, que el contenido que está a punto de ser desplegado será de tipo HTML.

Como se puede apreciar, con esta nueva semántica no es necesario especificar más detalles como se solía hacer con el DOCTYPE de XHTML.

Después de esto pasamos a establecer un viewport para la página, el cual se encargará de indicar la configuración default para cuando el sitio es visto desde un dispositivo móvil.

El metatag viewport le especifica al navegador que ancho debe tomar y deshabilita la escala inicial.

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

Finalmente tenemos que incluir el framework de jQuery, la hoja de estilo y el script la librería de jQuery Mobile dentro de nuestra etiqueta “head” de nuestro código.

<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>

Con el código anterior estamos cargando los archivos desde el servidor de contenido proporcionado por jQuery, si tu decidiste bajar los archivos y almacenarlos localmente, entonces debes de cambiar las URLs por el path donde tengas almacenado el archivo correspondiente.

Al momento de agregar estos cambios a nuestro código, podemos pasar a revisar una vez más nuestra página en el navegador de un dispositivo móvil y podremos notar algunos cambios significativos inmediatamente, resaltando que el tamaño de la letra ha cambiado, haciéndolo más fácil de leer.

Ahora la página es usable desde un dispositivo móvil, pero debido a su misma sencillez quizás no lo podamos apreciar en este momento

 


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts