jQuery

Mobile UNEWEB

UNEWEB

UNEWEB 1

JQUERY MOBILE

Temario

1. Introducción a jQuery Mobile. En este artículo damos una visión general del framework jQuery

Mobile, explicando su función, uso y requerimientos.

2. Primera página web utilizando jQuery Mobile. En este artículo utilizaremos jQuery Mobile para

crear una página HTML sencilla, haciendo uso de atributos de data personalizados.

3. Trabajando con páginas elaboradas con jQuery Mobile – Parte 1. Primera parte de un artículo

donde ponemos en práctica distintas formas de desplegar páginas con jQuery Mobile, en esta

ocasión explicamos como añadir varias páginas en un solo archivo.

4. Trabajando con páginas elaboradas con jQuery Mobile – Parte 2. Segunda y última parte de un

artículo donde ponemos en práctica distintas formas de desplegar páginas con jQuery Mobile,

en esta ocasión explicamos distintas formas de personalizar el uso de múltiples páginas.

5. Uso de barras de herramientas con jQuery Mobile – Parte 1. Primera parte de un artículo donde

explicamos como utilizar encabezados y pies de páginas como barras de herramientas, todo esto

mediante el uso de jQuery Mobile.

6. Uso de barras de herramientas con jQuery Mobile – Parte 2. Segunda parte de esta serie, donde

explicamos como diseñar y estructurar barras de herramientas con jQuery Mobile, para facilitar

la navegación en la versión móvil de nuestro sitio.

7. Uso de barras de herramientas con jQuery Mobile – Parte 3. Tercera y útlima parte de una serie

de artículos donde explicamos cómo utilizar encabezados y pies de página como barras de

herramientas y navegación para nuestro sitio móvil.

8. Manejo de listas con jQuery Mobile. Las listas son elementos muy importantes para lograr una

correcta navegación en un sitio móvil, en este artículo explicamos cómo utilizarlas y adaptarlas

con jQuery Mobile

9. Uso de formularios con jQuery Mobile – Parte 1. Estudiamos la manera en que jQuery Mobile

maneja y despliega los formularios de una página para su uso en dispositivos móviles.

10. Uso de formularios con jQuery Mobile – Parte 2. Continuamos con la implementación de

formularios utilizando jQuery Mobile, en esta parte centramos el estudio en los elementos

orientados a la selección de opciones.

11. Diferencias entre jQuery y jQuery Mobile. Explicamos la diferencia que existe entre jQuery

Mobile y su estructura de código base, jQuery.

12. Soporte de jQuery Mobile. Hacemos un análisis profundo sobre la compatibilidad de jQuery

Mobile con distintos dispositivos.

UNEWEB 2

JQUERY MOBILE

13. Creación de cuadros de diálogo con jQuery Mobile. Los diálogos nos elementos que nos

permiten desplegar información complementaria así como ciertos mensajes de alerta o

confirmación, en este artículo explicamos como utilizarlos con jQuery Mobile.

14. Maquetación de contenido con grids en jQuery Mobile. Los grid son una de las estructuras más

utilizadas para presentar información tabular, en este artículo explicamos como hacer uso de

ellos con jQuery Mobile.

15. Uso de contenido plegable con jQuery Mobile. Colapsar y expandir contenido resulta muy útil

para mostrar información en espacios pequeños. En este artículo te explicamos como lograr

dicha funcionalidad en jQuery Mobile.

16. Configuración de jQuery Mobile con JavaScript. La configuración por defecto de jQuery Mobile

también puede ser modificada a través de JavaScript, en este artículo explicamos cómo lograrlo.

17. Ventajas de utilizar jQuery Mobile. Explicamos algunas de las ventajas más importantes que

ofrece jQuery Mobile

Introducción a jQuery Mobile

Haciendo uso de jQuery Mobile, uno de los frameworks más prácticos y sencillos para el desarrollo de

aplicaciones, explicaremos cómo crear sitios adaptados y optimizados para ser desplegados en

dispositivos móviles con un mínimo esfuerzo.

A lo largo de este manual, estudiaremos diversos temas que nos ayudarán a entrar de lleno al desarrollo

web para móviles, desde la estructuración de un HTML simple hasta sitios totalmente optimizados a

través de jQuery Mobile.

Haremos uso de formas, eventos, estilos y diseños para construir nuestras aplicaciones móviles

compatibles con dispositivos táctiles como iPhone, iPad, Android y Blackberry.

Utilizaremos HTML para la creación de páginas, estructuraremos los sitios para la navegación

endispositivos móviles, elaboraremos formularios interactivos, convertiremos a versiones móviles los

sitios web que hayamos desarrollado para escritorio, personalizaremos la interfaz de nuestro sitio y

usaremos aplicaciones nativas.

¿Qué es jQuery Mobile?

jQuery Mobile es un framework con relativamente poco tiempo de vida, fue apenas hace dos años

cuando el creador de jQuery, John Resig, dio el banderazo de partida para iniciar con el desarrollo del

UNEWEB 3

JQUERY MOBILE

proyecto, es durante este tiempo que se ha venido puliendo su funcionalidad hasta llegar a la versión

estable que fue entregada en abril de 2012.

El propósito inicial del framework, fue buscar soluciones para lograr una mejor estructura y manejo en

las interfaces de usuario, como tal la librería provee las herramientas necesarias para convertir código

HTML y CSS en sitios móviles amigables y accesibles.

Esto se podrá apreciar claramente en esta primera entrega del manual, podremos tomar páginas

previamente elaboradas con HTML puro, después agregar las líneas necesarias para cargar la librería

móvil, y de esta manera la página será automáticamente transformada a una versión amigable y

adaptable a dispositivos móviles.

A diferencia de otros frameworks, jQuery Mobile centra su atención en el manejo de HTML, a tal grado

que no es necesario incluir una sola línea de JavaScript para definir las versiones móviles de los layouts

de las páginas.

Factores como este, convierten al framework en un recurso muy amigable para aquellas personas que

no tienen tanta experiencia desarrollando fuera de HTML, además de que agrega rápidez a la conversión

de proyectos completos, ya que cualquier desarrollador con conocimientos de HTML puede adaptar, en

tan solo unas horas, un código para que se despliegue en dispositivos móviles.

jQuery Mobile provee la facilidad de desarrollar aprovechando la propiedad táctil de los dispositivos, lo

cual es fundamental en la actualidad ya que la mayoría de estos dispositivos utilizan dicho mecanismo

para que el usuario interactúe con las aplicaciones.

Además de esto, el framework se encarga de lidiar con problemas con los que el diseñador se encuentra

regularmente, como alargar botones que lucen muy pequeños, convertir links en listas de navegación y

dividir el contenido en páginas virtuales.

Conocimientos previos Antes de empezar a desarrollar con jQuery Mobile es bueno tener una base sobre la cual empezar a

trabajar, es muy probable que ya cuentes con las habilidades y conocimientos necesarios, pero en caso

de no ser así te recomendamos que empieces por aprender correctamente el desarrollo de páginas web

mediante HTML puro.

Si tienes conocimientos de CSS y JavaScript será un claro plus que te ayudará a realizar sitios más

elaborados, pero no es un requerimiento para estudiar este manual. Si bien jQuery Mobile utiliza mucho

CSS y JavaScript en su funcionamiento, estas llamadas no son aplicadas directamente por el

desarrollador, ya que la mayoría funcionan en el core de la aplicación.

UNEWEB 4

JQUERY MOBILE

Si antes de empezar el manual te invade la curiosidad y quieres ver resultados en aplicaciones

desarrolladas con jQuery Mobile, puedes acudir a JQM Gallery, un sitio con una colección de proyectos

realizados con este framework, ejemplos que nos sirven para ver en acción las propiedades que

usaremos.

Si por otro lado deseas echar una hojeada a los códigos y bases de jQuery Mobile, puedes ingresar

a http://jquerymobile.com/demos para consultar lo que nos ofrece la documentación oficial del

framework, en caso de que surjan dudas que este manual no pueda contestar, te recomendamos

recurras a ese sitio en busca de respuestas.

En caso de necesitar más opiniones y comentarios, jQuery Mobile cuenta con una comunidad detrás del

proyecto, puedes acudir a sitios como http://forum.jquery.com/jquery-mobile, para encontrar temas

relacionados a aplicaciones y desarrollos, además de ser un buen sitio para conocer problemas comunes

y evitar caer en los errores que otros diseñadores ya cometieron. Si a lo largo de tus desarrollos con el

framework te encuentras con algún problema y puedes resolverlo, puedes contribuir ayudando a los

demás a resolver casos similares.

Primera página web utilizando jQuery Mobile

Una vez que nos hemos sumergido en la teoría de la librería con el primer artículo de este manual, es

tiempo de pasar a la práctica y preparar nuestro primer proyecto con jQuery Mobile.

Este proyecto consistirá en una sencilla página desarrollada con HTML simple, a la cual le

añadiremos 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.

UNEWEB 6

JQUERY MOBILE

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

UNEWEB 7

JQUERY MOBILE

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.

Uso de atributos de data

Si bien nuestra página ha quedado lista para desplegarse en cualquier dispositivo móvil, el trabajo no ha

terminado, existen otros factores a considerar para prepararla para un funcionamiento adecuado. A lo

largo de este manual haremos uso de varios atributos para marcar nuestros elementos de una manera

que jQuery Mobile comprenda, a estos atributos se les da el tipo de data.

Los atributos de data es un concepto introducido por HTML5 para añadir valores complementarios al

DOM de un elemento. Por ejemplo podemos tener un div contendor, al cual le queremos agregar una

información mediante un atributo:

<div id="principal" data-saludo="hola">Contenido</div>

Como puede deducirse el atributo “data-saludo” no existe dentro de las convenciones de HTML, nosotros

lo inventamos para añadir un valor, y debido a que cuenta con el prefijo “data-” es totalmente válido. ¿Y

de qué sirve esto? En este momento de nada, porque si vemos la página no notaremos cambio alguno,

pero nos será de gran ayuda si en cierto momento necesitamos encasillar ciertos elementos.

jQuery Mobile hace uso de estos atributos tanto en el marcado para crear widgets, como para controlar

el comportamiento de los elementos en el sitio. Una de las principales funciones de estos atributos es

definir secciones, encabezados, contenido y pies de página, si tomamos como base nuestro código

obtenemos lo siguiente:

UNEWEB 8

JQUERY MOBILE

<div data-role="page"> <div data-role="header">Hola!</div> <div data-role="content"> <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> </div> <div data-role="footer"> <i>2016 &copy; Uneweb</i> </div> </div>

Como se puede apreciar, utilizamos el atributo “data-role” para definir cada parte del layout, quitamos

el encabezado e hicimos uso de divs para dividir. Este atributo en sí no significa nada para el navegador,

pero jQuery Mobile se encarga de utilizarlo para saber como desplegar los elementos en el dispositivo

móvil, de esa manera si tu abres la página en uno podrás notar la diferencia.

Ahora el encabezado y el pie de página contarán con un fondo negro, además el contenido se ve menos

amontonado ya que se agrega espacio a los alrededores. Este es el tema default de jQuery Mobile y lo

verás repetidamente a lo largo de este curso, simplemente basto con agregar dichos atributos para poder

aplicarlo.

Trabajando con páginas elaboradas con jQuery Mobile

– Parte 1

En el artículo anterior, pudimos apreciar la facilidad con la que jQuery Mobile puede ser agregado a una

página HTML, con el fin de optimizarla para que pueda ser visualizada adecuadamente en un dispositivo

móvil. Ahora es tiempo de pasar a integrar la librería a una sitio completo, compuesto por varias páginas

conectadas a través de links, y para ello haremos uso de las distintas formas que nos provee jQuery

Mobile, para crear y enlazar páginas.

A lo largo del artículo, practicaremos cómo añadir varias páginas a un solo archivo, analizaremos la forma

en que los links son modificados por la librería y explicaremos cómo poder deshabilitar esta

funcionalidad, así mismo mencionaremos cómo la librería hace un manejo automático de URLs para

permitir su fácil adhesión a marcadores y demostraremos como añadir y enlazar archivos adicionales en

un sitio realizado con jQuery Mobile.

UNEWEB 9

JQUERY MOBILE

Uso de múltiples páginas

Anteriormente estuvimos trabajando con un archivo sencillo al cual le agregamos jQuery Mobile para

desplegar adecuadamente su contenido; tomaremos dicho código como base para continuar nuestra

explicación. La primera modificación que haremos, será añadir una nueva página al archivo y establecer

un enlace que redirige a ella.

Para iniciar esta práctica, tendremos que volver a hacer énfasis en la importancia del uso de atributos de

data; como puedes recordar, jQuery Mobile siempre busca entre el código al elemento que lleve entre

sus atributos el rol de “página” (data-role=”page”), esto es para saber que contenido debe ser

desplegado en el marco principal. Gracias a la sencillez de la librería, si quisiéramos agregar más páginas

en un mismo archivo bastaría con añadir más capas con el mismo atributo y formato, como se muestra

en el siguiente código:

<div data-role="page" id="inicio"> <div data-role="header">Hola!</div> <div data-role="content"> <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, así que te dejamos nuestra sección <a href="#acerca_de">"Acerca de"</a>. </p> </div> <div data-role="footer"> <i>2015 &copy; Uneweb</i> </div> </div> <div data-role="page" id="acerca_de"> <div data-role="header">Acerca de</div> <div data-role="content"> <p> <a href="#inicio">LaUneweb.es</a>, sitio dedicado al diseño y desarrollo de páginas web. En estas páginas encontrarás cantidad de información para aprender a hacer tus páginas web, además de amplios servicios de diseño web profesional para empresas y particulares. Diseños web adaptados a cada cliente, optimizados para el SEO, autogestionables y con las técnicas CSS y XHTML más actuales. </p> </div> <div data-role="footer"> <i>2015 &copy; Uneweb</i> </div> </div>

UNEWEB 10

JQUERY MOBILE

Como se puede apreciar tomamos el mismo código del artículo anterior y añadimos exactamente las

mismas secciones para crear una nueva página, la diferencia radica en el contenido y en el ID de cada

capa con el rol “page”. De igual manera añadimos al texto un par de links internos, los cuales redirigen

hacia cada una de las páginas, esto lo hacemos con la finalidad de establecer un vínculo de navegación y

se logra añadiendo la etiqueta “a” con el identificador como valor del atributo “href”, el lugar donde

comúnmente se coloca la dirección URL.

Al momento de que el usuario de clic sobre esos enlaces, el navegador se desplazará hacia la parte donde

se encuentra la sección. En una página tradicional, esto luciría como dos simples bloques de texto unidos

en una misma página; sin embargo, jQuery Mobile se encarga de desplegar este código de manera

distinta, mostrando únicamente un div a la vez.

Cuando se despliega esta página en un dispositivo móvil, únicamente se puede observar el primer div

que se encuentra con el rol de página. Si quisiéramos ver el contenido del resto de los bloques,

tendríamos que dar clic en un enlace que lleve a ellos, sólo entonces podremos visualizarlos como una

nueva página y si decidiéramos utilizar el botón de “regresar” del navegador, nos llevaría al bloque que

observamos anteriormente.

Al momento de cambiar de página, podrás notar que existe una pequeña transición, si no es de tu agrado,

puedes configurarla pero esto será un tema que veremos más adelante.

Links con jQuery Mobile

Cuando jQuery Mobile encuentra dentro del código un link sencillo, automáticamente captura todos los

clics que se dan sobre ese enlace y los convierte en peticiones AJAX. De esa manera detecta si

el enlace está apuntando a una sección de la misma página, un archivo distinto dentro del mismo

servidor o hacia un objetivo externo.

Si el enlace es interno simplemente añade una transición, si es hacia un archivo diferente dentro del

mismo servidor utilizará AJAX para cargar la página y reemplazar el contenido actual, mientras que si es

hacia un lugar externo jQuery Mobile simplemente activará el comportamiento normal. En caso de que

no desees alguno de estos comportamientos, puedes desactivar la funcionalidad de jQuery Mobile sobre

tus links, para ello basta con establecer como falso el valor del atributo de data llamado “data-ajax”.

<a href="laUneweb.html" data-ajax="false">Este link funcionará

normalmente</a>

UNEWEB 11

JQUERY MOBILE

Uso de múltiples archivos

En el código anterior agregamos dos páginas dentro del mismo archivo, como se pudo apreciar es un

proceso bastante sencillo y accesible, pero qué pasaría si tenemos que crear 10, 20 o 30 páginas, ¿Crees

que sería buena idea seguir usando el mismo archivo?. Desgraciadamente cuando cuentas con un

proyecto demasiado grande no puedes recurrir a trabajar con un solo archivo, manejar mucho código

dentro de un solo archivo causaría confusión, demasiado tiempo de búsqueda y haría más lenta la

descarga.

Para trabajar con múltiples archivos, basta con agregar enlaces que dirijan a las distintas locaciones

del servidor donde se encuentran. Podemos combinar ambas técnicas y tener enlaces internos utilizando

identificadores, y a la vez haciendo referencias a archivos localizados dentro del mismo servidor:

<div data-role="page" id="inicio"> <div data-role="header">Hola!</div> <div data-role="content"> <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 <a href="contenido.html">contenido</a>, por el momento no tenemos más que decir, así que te dejamos nuestra sección <a href="#acerca_de">"Acerca de"</a>. </p> </div> <div data-role="footer"> <i>2015 &copy; Uneweb</i> </div> </div> <div data-role="page" id="acerca_de"> <div data-role="header">Acerca de</div> <div data-role="content"> <p> <a href="#inicio">LaUneweb.es</a>, sitio dedicado al diseño y desarrollo de páginas web. En estas páginas encontrarás cantidad de información para aprender a hacer tus páginas web, además de amplios servicios de diseño web profesional para empresas y particulares. Diseños web adaptados a cada

cliente, optimizados para el SEO, autogestionables y con las técnicas CSS y XHTML más actuales. </p> </div> <div data-role="footer"> <i>2015 &copy; Uneweb</i> </div> </div>

UNEWEB 12

JQUERY MOBILE

Como se puede apreciar agregamos un nuevo link que dirige hacia el archivo “contenido.html”, para que

este enlace funcione tenemos que crear un nuevo archivo que lleve ese nombre y que, para este caso,

contenga una lista del contenido del sitio.

Trabajando con páginas elaboradas con jQuery Mobile

– Parte 2

En la primera parte de “Trabajando con páginas elaboradas con jQuery Mobile”, tuvimos la oportunidad

de crear un sitio móvil compuesto por varias páginas, a las cuales pudimos acceder mediante dos formas

distintas, utilizando enlaces internos y archivos múltiples.

Como se ha podido apreciar hasta el momento, trabajar con varias páginas en jQuery Mobile es

bastante sencillo, tanto que incluso se puede llegar a pensar que podemos empezar a armar un sitio web

adaptado para móvil con tan sólo lo que hemos estudiado en los tres primeros artículos de este manual.

Pero esto tan sólo empieza, ahora es tiempo de profundizar un poco más en el tema de las páginas

múltiples y aprender algunos trucos interesantes que puedes llegar a tener en consideración el momento

de desarrollar.

Títulos de página

Si has llevado a la práctica alguna de los ejemplos que describimos en los artículos anteriores, podrás

haber notado que cuando cambiamos de un archivo a otro, al momento de desplegar la página, el título

en el navegador cambia automáticamente dependiendo del valor que se le da a la etiqueta “title” dentro

de nuestro código HTML. Esto es un comportamiento completamente normal, pero no ocurre cuando se

utilizan enlaces internos; es decir, si damos clic en algún enlace hacia una sección que se encuentra

dentro del mismo archivo, el título sigue siendo el que se declaró en “title”, ya que sigue siendo el mismo

código HTML.

jQuery Mobile proporciona una manera sencilla de resolver esto, y para lograrlo una vez más tendremos

que recurrir a los maravillosos atributos de data. En el siguiente código, hacemos uso de los atributos

para poder personalizar el título que se desplegará en el navegador al dar clic sobre el enlace:

<div data-role="page" id="prueba_title" data-title="Probando el título"> <div data-role="header">Hola!</div> <div data-role="content"> <p> Bienvenido a la página 'PRUEBA TITLE' de <a href="#inicio">La Uneweb</a>. 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>

UNEWEB 13

JQUERY MOBILE

</div> <div data-role="footer"> <i>2015 &copy; Uneweb</i> </div> </div>

Gracias al uso del atributo “data-title”, ahora cuando se dé clic en el enlace el título sobre el navegador

se actualizará, y desplegará la leyenda “Probando el título”.

Precarga de contenido

Al momento de iniciar un proyecto, siempre existe la duda de si se debe optar por un sistema lento en

su primera descarga pero rápido el resto del tiempo o por un sistema más equilibrado que consuma un

tiempo promedio cada vez que se abra una página. Por ello muchos desarrolladores no saben si depositar

todo el contenido dentro de un solo archivo o utilizar una estructura de múltiples archivos.

Los beneficios de incluir todo tu contenido en un solo archivo de HTML, es que todas las páginas estarán

disponibles inmediatamente, al momento de acceder a alguna mediante algún enlace interno, el

contenido se desplegará de manera rápida ya que todo se encuentra cargado. Lo negativo de esta

práctica, es que su descarga inicial puede resultar muy lenta, y cuando se maneja un sitio con gran

cantidad de páginas puede resultar muy abrumador manejarlas en un solo archivo.

Es por esta desventaja, que la mayoría de las aplicaciones desarrolladas con jQuery Mobile se desarrollan

utilizando una estructura de múltiples archivos, donde generalmente sólo se incluyen dos o tres páginas

por cada uno. Esto puede sonar mal para aquellos que buscan rapidez, ya que el hecho de tener todo

cargado desde el inicio suena más tentador que tener que esperar la carga cada vez que se da clic sobre

un enlace.

Sin embargo, existe una opción que nos permite acelerar el tiempo de descarga de nuestras páginas,

mejorando de esta manera la experiencia del usuario. Para ello se hace uso de otro atributo de data,

este lleva por nombre “data-prefetch” y se encarga de cargar el contenido de algún enlace externo

dentro de nuestro contenido principal, de esa manera cuando el usuario da clic sobre el enlace el

contenido ya fue descargado y se accede de manera rápida.

<p>Bienvenido a la página de <a href="laUneweb.html" data-prefetch>La

Uneweb</a></p>

Tan sólo con incluir este atributo, jQuery Mobile sabe que debe cargar su contenido, no lleva ningún

valor y no es necesario adherir algo más al código. Por obvias razones, esta técnica debe de ser usada

con cuidado, no busques cargar todas las páginas de un sitio muy grande, trata de utilizarlo sólo cuando

sea necesario, ya sea con algún par de las páginas más populares de tu sitio, o con una página en

específico que sea muy relevante.

UNEWEB 14

JQUERY MOBILE

Cambiar las transiciones entre páginas

Anteriormente ya habíamos mencionado que existe una técnica para poder cambiar las transiciones que

por defecto jQuery Mobile añade al cambio de páginas. Esto se puede hacer de manera global, pero en

esta ocasión únicamente estudiaremos la manera de hacerlo para un enlace específico.

Para lograrlo basta con agregar el atributo “data-transition” dentro del elemento de anclaje que

contiene nuestro enlace, así como se muestra en el siguiente código:

<p>Bienvenido a la página de <a href="laUneweb.html" data-

transition="pop">La Uneweb</a></p>

Con esta sentencia estamos agregando un efecto “pop” a la transición entre páginas, tenemos otras

opciones como lo son “flip”, “fade” para desvanecer, o “slide”, “slidedown”, “slideup” si queremos

utilizar un efecto de cortina. Algunas de estas transiciones también soportan una acción de reversa, y

para especificarla se hace uso del atributo “data-direction” de la siguiente manera:

<p>Bienvenido a la página de <a href="laUneweb.html" data-

transition="pop" data-direction="reverse">La Uneweb</a></p>

Uso de barras de herramientas con jQuery Mobile –

Parte 1

Las barras de herramientas son elementos que en la actualidad han tomado un papel fundamental como

base de las estructuras de diseño web. Parte de su popularidad viene como consecuencia de su

flexibilidad en diseño y facilidad de adaptación a distintos entornos.

Dichas barras nos proporcionan una forma sencilla de agregar elementos de navegación a un sitio web,

lo que simplifica el acceso a la información y hace que el usuario conozca mejor lo que el sitio ofrece. En

un sitio web diseñado para móviles, pueden resultar especialmente útiles si lo que se busca es diseñar

un elemento de control, al cual los usuarios puedan llamar cada vez que necesiten navegar a través de

la aplicación.

En este artículo, intentamos de dar una visión general de como utilizar estas barras, en sus distintas

modalidades, con jQuery Mobile. Hablaremos de cómo crear encabezados y pies de página, así como la

manera de convertirlos en barras de herramientas que sean útiles para móviles.

UNEWEB 15

JQUERY MOBILE

Añadir encabezados

Desde que realizamos nuestra Primera página con jQuery mobile, hicimos uso de la sección header para

resaltar una parte del texto sobre el resto del contenido, por esto mismo es muy probable que el código

que utilicemos en esta parte, te resulte bastante familiar.

En esta ocasión, no sólo nos enfocaremos a asignar un atributo de data para definir la sección,

pretendemos profundizar más y demostrar cómo añadir funcionalidad extra a tu barra de encabezado.

Retomando un poco lo que ya se ha visto en este manual, debemos recordar que para definir un

encabezado basta con utilizar un elemento de tipo div, el cual debe ser definido con el rol apropiado

mediante el uso del atributo “data-role”.

<div data-role="header">Mi encabezado</div>

Esto bastará para que el navegador muestre la cadena de texto indicada, dentro de un recuadro de color

negro, haciéndola resaltar del resto del texto. Sin embargo, esto no debe parar ahí, podemos hacer un

mejor encabezado añadiendo unas cuantas etiquetas HTML las cuales permitan resaltar aún más su

contenido.

Algo básico para comenzar, puede ser utilizar una etiqueta “h1” para definir el encabezado, si la

añadimos a la cadena, jQuery Mobile alargará el texto y automáticamente lo centrará en base a la

pantalla.

<div data-role="header"><h1>Mi encabezado</h1></div>

A nuestro encabezado, podemos añadirle algún tipo de funcionalidad extra mediante el uso de botones.

Los botones, son elementos que pueden ser utilizados para promover la navegación (como es el caso del

botón para regresar) o para enlazar con las secciones y páginas de contenido de nuestra aplicación.

Como el texto ya ocupa gran parte del centro de nuestro encabezado, nos restan solamente dos partes

para colocar los botones, y estos espacios se encuentran en el extremos izquierdo y derecho de nuestro

encabezado. Considerando la falta de espacio, debemos tener bien en claro cuáles serán los enlaces a

los que queremos direccionar desde la página.

En base a esto, podemos estructurar nuestro encabezado con dos enlaces, uno en cada extremo. El

primero de estos redirigirá a la página principal y el otro a la sección de contacto, para ello bastará un

código como el siguiente:

<div data-role="header"> <a href="principal.html">Principal</a> <h1>Mi encabezado</h1> <a href="contacto.html">Contacto</a> </div>

UNEWEB 16

JQUERY MOBILE

Quizás te preguntes, ¿Y dónde están los botones?, ya que claramente sólo estamos utilizando elementos

de tipo anclaje en el código. Los botones es algo automáticamente añadido porjQuery Mobile, si tu

visualizas en un navegador el código que acabamos de estructurar, podrás notar que los enlaces se

convirtieron en dos botones los cuales aparecen en cada extremo del encabezado.

En caso de que se desee utilizar un solo botón, puede omitirse uno de los enlaces, y con eso bastará;

pero si se desea colocar el botón en solitario al lado derecho del encabezado, se tiene que recurrir a la

clase de estilo “ui-btn-right”, la cual alineará el botón a la derecha. De igual manera, en caso de ser

necesario, se puede hacer uso de la clase “ui-btn-left” para colocar el botón a la izquierda, pero por

defecto el elemento toma esa alineación.

Uso de iconos

Una alternativa que hace resaltar el diseño de nuestro encabezado, es el uso de iconos dentro de los

botones que lo componen. Estos elementos visuales harán más atractivo el diseño y añadirán usabilidad.

La capacidad de agregar iconos a los elementos, es una propiedad que ha sido incluida como parte

del framework de jQuery Mobile, por lo que puede ser utilizada en cualquier parte del diseño. En esta

ocasión haremos un pequeño uso de esta funcionalidad y más adelante en el manual explicaremos a más

detalle su comportamiento.

Por defecto, al cargar jQuery Mobile en nuestro proyecto, tenemos acceso a una librería de iconos, los

cuales podemos utilizar sin ningún problema. En el siguiente código, desplegamos la manera en que estos

iconos pueden ser utilizados:

<div data-role="header"> <a href="principal.html" data-icon="home">Principal</a> <h1>Mi encabezado</h1> <a href="contacto.html" data-icon="info">Contacto</a> </div>

Como se puede apreciar es bastante sencillo, una vez más hacemos uso de atributos de data, en este

caso “data-icon” definirá cual es la imagen que se cargará enseguida del texto. Para este ejemplo

utilizamos dos valores, el primero de ellos es “home”, el cual despliega la imagen de una pequeña casa

indicando que ese botón lleva a la página de inicio o principal, mientras que el valor “info” es utilizado

para desplegar un icono con una i, símbolo comúnmente utilizado por los centros de información.

UNEWEB 17

JQUERY MOBILE

Añadir un botón para regresar

El botón de regreso, es una de las funcionalidades que puede variar dependiendo del medio donde se

despliegue la página, en dispositivos de tipo Android esta funcionalidad existe nativamente, pero

desafortunadamente en dispositivos como iPhone, no existe un botón para regresar. Es por esta razón

que jQuery Mobile nos ofrece la posibilidad de agregar un botón de regresar personalizado, y para ello

existen dos maneras de agregar esta funcionalidad en caso de que la necesites.

La forma más adecuada de hacerlo, es simplemente añadiendo un nuevo atributo de data al div que

contiene la página, este atributo lleva por nombre “data-add-back-btn” y debe recibir el valor de

“true” para que muestre el botón. Por otro lado, si no se quiere utilizar el poco espacio disponible en el

encabezado, se puede agregar un link en el contenido de la página, para que realice la misma función,

para ello basta con agregar un elemento de anclaje cuya URL este vacía y cuenta con el atributo “data-

rel” y “back” como valor.

<div data-role="page" id="pagina" data-add-back-btn="true"> <div data-role="header"><h1>Encabezado</h1></div> <div data-role="content"> <p><a href="" data-rel="back">Regresar</a></p> </div> </div>

Uso de barras de herramientas con jQuery Mobile –

Parte 2

Cuando un usuario accede a nuestro sitio mediante el uso de algún dispositivo móvil, la navegación a

través de las páginas que componen al sitio, puede resultar en una mala experiencia en caso de contar

con una estructura adecuada. El uso de barras de herramientas con jQuery Mobile, nos permite facilitar

al usuario esta acción, además de proporcionarnos una manera simple de mantener un estándar de

diseño, ahorrándonos a la vez varias líneas dentro del código de nuestra aplicación.

En la primera parte del artículo, pudimos establecer la sencillez con la que se puede mejorar el

encabezado de nuestro sitio, aplicando tan sólo unas cuantas funciones ofrecidas por este framework.

En esta ocasión, haremos mención sobre el uso de pies de página, utilzaremos una dinámica similar para

mejorar la accesibilidad al sitio, y mediante el uso de atributos de data, botones e iconos mejoraremos

su aspecto.

UNEWEB 18

JQUERY MOBILE

De igual manera, explicaremos como agregar dinamismo a nuestros encabezados y pies de página,

utilizando posiciones de tipo fixed, así como añadiendo la posibilidad de utilizarlos cuando se muestra

un elemento en modo pantalla completa.

Manejo de pies de página

En un dispositivo móvil, el footer generalmente luce de manera similar al encabezado de la página. Si

previamente ya habíamos elaborado el diseño de un encabezado, resultará mucho más sencillo

estructurar un pie de página que cumpla con la función de barra de herramientas y complemente nuestra

página.

La elaboración de dichos pies de página con jQuery Mobile es bastante sencilla, y con semejanza a la

realización de encabezados que expusimos en el artículo anterior. Una vez los atributos de data nos

ayudarán a definir el tipo de sección con la que estamos trabajando, y para este caso utilizaremos el

atributo “data-role” con el valor de “footer”.

<div data-role="footer">My Footer</div>

Al igual que con los headers, si agregamos una etiqueta de tipo encabezado a nuestra cadena de texto,

podemos obtener un mejor formato. Con dicha etiqueta, el texto quedará centrado y se agregará un

poco de espacio para que resalte sobre el resto.

Además de esto, en nuestros footers también podemos recurrir al uso de iconos y botones, con la

diferencia de que estos no se alinean de manera automática como sucede en el encabezado. De hecho,

si decides usar botones y texto extra en tu pie de página, es recomendable remover la etiqueta de

encabezado; ya que de no ser así, el footer puede quedar bastante grande y perdería la esencia del estilo.

Si quisiéramos agregar botones a nuestro pie de página, basta con agregar un código como el siguiente:

<div data-role="footer"> <a href="contacto.html">Contacto</a> <a href="mapa.html">Ubicacion</a> </div>

Con esto se cumple el objetivo, pero los botones pueden lucir poco estéticos, ya que no existe mucho

espacio entre ellos. Para solucionar este problema se puede recurrir a la clase “ui-bar”, si agregamos

dicha clase al div contenedor del footer, se le da un estilo de barra por lo que se agrega un espacio entre

cada botón que se despliega.

<div data-role="footer" class="ui-bar"> <a href="contacto.html">Contacto</a>

UNEWEB 19

JQUERY MOBILE

<a href="mapa.html">Ubicacion</a>

</div>

Encabezados y pies de página adaptables

Una forma de hacer resaltar nuestros encabezados y pies de página, es agregando cierto dinamismo a la

forma en que los desplegamos, haciendo que la visibilidad se adapte a la página donde los estamos

mostrando.

Los diseños que hemos manejado hasta ahora son bastante útiles y funcionales, pero cuando tenemos

una página bastante larga, como alguna entrada de un blog o un menú de aplicaciones, es bastante

frustrante para el usuario tenerse que estar moviendo del inicio hasta el fin para poder ver las barras de

navegación, es por esto que debemos buscar formas de adaptar nuestro diseño y mejorar la experiencia

del usuario.

jQuery Mobile proporciona una forma de crear encabezados y pies de página con posición fija. Con esta

función activada, el encabezado y pie de página siempre estarán visibles, por lo que el usuario no

necesitará desplazarse para escoger alguna opción de las barras.

Con esta opción, también se añade una funcionalidad de diseño bastante buena, ya que las barras

desaparecen cuando el usuario está desplazándose a través del contenido, pero una vez que deje de

hacerlo y levante su dedo de la pantalla, estas aparecerán de nuevo para que pueda utilizar las barras.

Esta característica se puede activar, simplemente añadiendo data-position=”fixed” como atributo de los

div contenedores de las barras.

<div data-role="page">

<div data-role="header" data-position="fixed"><h1>Mi encabezado</h1></div>

<div data-role="content">

<p>Hola la Uneweb, esto es un texto de prueba.</p>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ut vel turpis sit amet ligula luctus porttitor. Cras at dictum mi.

Praesent risus diam, dictum et gravida eget, semper sit amet felis.

Sed dapibus rutrum ante sed varius.

Pellentesque feugiat sodales nisi id rhoncus.

Suspendisse potenti.

Maecenas augue ante, commodo non tempus tempor, scelerisque non metus.

Nam mattis consectetur arcu quis elementum.

Quisque id nisl vel sem convallis placerat quis eget urna.

Sed hendrerit enim et elit ornare adipiscing.

Ut eget quam sit amet nisi molestie tempor.

Ut nulla libero, porttitor eget rutrum ut, consectetur non nulla.

</p>

UNEWEB 20

JQUERY MOBILE

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ut vel turpis sit amet ligula luctus porttitor. Cras at dictum mi.

Praesent risus diam, dictum et gravida eget, semper sit amet felis.

Sed dapibus rutrum ante sed varius.

Pellentesque feugiat sodales nisi id rhoncus.

Suspendisse potenti.

Maecenas augue ante, commodo non tempus tempor, scelerisque non metus.

Nam mattis consectetur arcu quis elementum.

Quisque id nisl vel sem convallis placerat quis eget urna.

Sed hendrerit enim et elit ornare adipiscing.

Ut eget quam sit amet nisi molestie tempor.

Ut nulla libero, porttitor eget rutrum ut, consectetur non nulla.

</p>

</div>

<div data-role="footer" data-position="fixed"><h4>Mi pie de pagina</h4></div>

</div>

Otra opción que podemos utilizar, es hacer barras que funcionen cuando se este desplegando un

elemento en pantalla completa. Para lograr esta funcionalidad con jQuery Mobile, basta con habilitar la

opción data-fullscreen=”true” como atributo del div que contenga la página.

<div data-role="page" data-fullscreen="true"></div>

Esta funcionalidad es particularmente útil cuando se hace uso constante de imágenes, ya que al

desplegarlas de manera completa el usuario no tendrá la necesidad de regresar al sitio para poder utilizar

el encabezado o el pie de página.

Uso de barras de herramientas con jQuery Mobile –

Parte 3

Hasta el momento, en este curso hemos tenido la oportunidad de utilizar encabezados y pies de

páginas como barras de herramientas, que nos han permitido facilitar el acceso y navegación a través de

los distintos elementos que conforman el contenido de nuestra aplicación móvil.

Estas barras hacen uso de etiquetas de encabezado y botones para lucir adecuadamente presentables y

ofrecer un gran soporte. Sin embargo, existe una manera más limpia de realizar el trabajo de navegación,

y a esta se le da el nombre de NavBars.

UNEWEB 21

JQUERY MOBILE

Uso de barras de navegación

Las NavBars, como su nombre lo indica, son barras de navegación, las cuales se encuentran predefinidas

en el core de jQuery Mobile y son utilizadas para desplegar diferentes acciones de manera ordenada en

forma de menú. A dicho menú se le agregan una serie de detalles gráficos y características de diseño

para mejorar la experiencia del usuario (UX), entre ellos encontramos el “highlight” agregado al

elemento activo.

En concepto, una NavBar es simplemente una lista desordenada contenida por un elemento div, el cual

para funcionar debe contar con el atributo “data-role” y con su respectivo valor establecido a “navbar”.

En el siguiente código, agregaremos una barra de navegación adentro de nuestro pie de página:

<div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="index.html" class="ui-btnactive">Inicio</a></li> <li><a href="contenido.html">Contenido</a></li> <li><a href="contacto.html">Contacto</a></li> </ul> </div> </div>

También se puede apreciar en el código, el uso de la clase “ui-btn-active” en el primer elemento del

menú, esta clase sirve para marcar como activa dicha opción y añade elementos a su diseño para hacerlo

resaltar sobre los demás. Desafortunadamente el framework no añade esta clase de manera automática,

por lo que deberás crear alguna otra función para añadir y remover dicha clase cuando sea necesario.

Se pueden añadir hasta cinco opciones a la barra de navegación sin problema alguno, jQuery Mobile se

encargará de redimensionar sus recuadros de tal manera que encajen con el ancho de la pantalla. Esto

no significa que si agregamos más de cinco opciones ocurrirá alguna clase de problema, lo único distinto

será que tendremos múltiples líneas de opciones en la misma barra.

El problema de tener múltiples líneas para seleccionar una opción, es que el usuario se puede ver

abrumado, confundido e incluso molesto por el hecho de que ocupamos gran parte de la pantalla del

dispositivo con tan sólo el menú.

En el ejemplo anterior agregamos la barra de navegación dentro de un footer, pero este elemento

también puede ser utilizado dentro del encabezado, donde es más común utilizar dos líneas, una para

mostrar el texto de encabezado de la página y la segunda para mostrar el menú.

UNEWEB 22

JQUERY MOBILE

<div data-role="header"> <h1>Encabezado</h1> <div data-role="navbar"> <ul> <li><a href="index.html" class="ui-btnactive">Inicio</a></li> <li><a href="contenido.html">Contenido</a></li> <li><a href="contacto.html">Contacto</a></li> </ul> </div> </div>

Pies de página persistentes

Si queremos agregar uniformidad a la estructura de nuestras páginas móviles, podemos añadir un pie de

página que no desaparezca cuando se realice un cambio de página. Para ello necesitamos que nuestro

footer utilice el mismo valor para el atributo “data-id” en todas las páginas, además necesitamos asignar

las clases CSS “ui-state-persist” y “ui-btn-active” a la opción relacionada con la página que se encuentra

activa y por supuesto utilizar la propiedad de persistencia en el footer.

El proceso puede sonar algo complejo, pero en realidad sólo consiste en unas cuantas adaptaciones al

código con el que ya contamos:

<div data-role="page"> <div data-role="header"><h1>Inicio</h1></div> <div data-role="content"> <p>Pagina de inicio</p> </div> <div data-role="footer" data-position="fixed" dataid="piedepagina"> <div data-role="navbar"> <ul> <li><a href="index.html" class="ui-btnactive ui-state-persist">Inicio</a></li> <li><a href="contenido.html">Contenido</a></li> <li><a href="contacto.html">Contacto</a></li> </ul> </div> </div> </div>

El código para el resto de las páginas es bastante similar, lo único que cambiará sera la opción que

contenga la clases CSS y por supuesto la información de la sección “content”.

UNEWEB 23

JQUERY MOBILE

Creación de listas

Al crear listas utilizando jQuery Mobile, se puede dar una clara mejora en lo que respecta a la interfaz de

usuario de dichos elementos. Para lograr su creación, basta con construir una lista ordinaria,

utilizando HTML simple, y agregar unos cuantos atributos, para que de esa manera el framework se

encargue del trabajo pesado y mejore su UI.

La estructura básica de una lista desordenada en HTML luce de la siguiente manera:

<ul> <li>Elemento de lista 1</li> <li>Elemento de lista 2</li> <li>Elemento de lista 3</li> <li>Elemento de lista 4</li> </ul>

Como todos sabemos, por defecto, las listas tienden a tomar un formato con viñetas, el cual a simple

vista no luce muy estético para una aplicación móvil. Para poder mejorar esto, basta con agregar el

atributo data-role=”listview” a la etiqueta ul y obtendremos un cambio drástico de apariencia.

Ahora las listas lucirán mucho más adaptadas al diseño general del sitio web móvil, las viñetas

desaparecen pero los elementos de la lista son mucho más grandes y fáciles de leer.

En caso de que agregaramos enlaces a los elementos de lista, una imagen de flecha se añadiría al extremo

derecho de la barra que representa a cada elemento.

<ul data-role="listview"> <li><a href="1.html">Elemento de lista 1</a></li> <li><a href="2.html">Elemento de lista 2</a></li> <li><a href="3.html">Elemento de lista 3</a></li> <li><a href="4.html">Elemento de lista 4</a></li> </ul>

Estos estilos se agregan automáticamente cuando jQuery Mobile detecta un enlace dentro de tu lista.

De esta manera, podemos apreciar la facilidad con la que el framework convirtió una lista común y

corriente en un menú de sistema. Sin embargo, esto no para ahí, todos sabemos que HTML soporta listas

multinivel, entonces ¿Qué pasa si manejamos este tipo de listas con el framework?

Si utilizamos una estructura estándar de lista multinivel dentro de la misma página, jQuery mobile se

encargará de ocultar las listas anidadas al nivel superior, convirtiendo a los elementos de este nivel en

enlaces. De esa manera, cuando se acceda a la página, únicamente se observarán los elementos

UNEWEB 24

JQUERY MOBILE

pertenecientes al nivel más alto, los cuales contarán con un icono de flecha indicando que enlazan a una

acción.

Al momento de dar clic sobre los elementos de la lista inicial, se cargará el submenú que contiene dicho

elemento. De igual manera, podremos observar que la dirección URL cambia.

Uso de listas inset

Uno de los cambios más sencillos y representativos que puedes realizar a tus listas, es convertirlas en

listas inset. Este tipo de listas se caracterizan por no ocupar todo el ancho de la pantalla del dispositivo,

ya que su renderización se hace dentro de un recuadro en el interior de la página.

Para poder lograr su creación, basta con tomar la lista que ya tenemos y agregar el atributo “data-inset”,

al cual le daremos el valor de “true”.

<ul data-role="listview" data-inset="true"> <li>Elemento de lista 1</li> <li>Elemento de lista 2</li> <li>Elemento de lista 3</li> <li>Elemento de lista 4</li> </ul>

El resultado será una lista dentro de un recuadro con esquinas redondeadas, el cual contará con espacio

a su alrededor.

Añadir separadores de listas

Otro elemento de interfaz interesante que podemos agregar a nuestras listas, son los separadores. Estos

elementos son utilizados para agrupar grandes listas en partes más pequeñas, haciendo que sea más

fácil su comprensión.

Para poder crear separadores de listas, basta con agregar un nuevo elemento “li” el cual cuente con el

atributo data-role=”list-divider”. De esta manera jQuery Mobile se encargará de agregar un estilo

distinto para dicho elemento haciéndolo resaltar y permitiendo indicar a través de él el inicio de un nuevo

grupo de elementos.

<ul data-role="listview" data-inset="true"> <li data-role="list-divider">Separador 1</li> <li>Elemento de lista 1</li> <li>Elemento de lista 2</li> <li data-role="list-divider">Separador 2</li>

UNEWEB 25

JQUERY MOBILE

<li>Elemento de lista 3</li> <li>Elemento de lista 4</li> </ul>

Creación de contadores

Una gran utilidad que nos ofrece jQuery Mobile, es la posibilidad de agregar contadores al extremo de

cada elemento de una lista. Estos contadores, son básicamente una serie de números dentro de un

círculo o burbuja, los cuales se encargan de indicar lo que tú desees, como por ejemplo cuántos

elementos se encuentran anidados dentro de cada parte del nivel superior de la lista, cuántas partes

componen ese objeto o cuántas veces se realizó la acción que se enlista.

<ul data-role="listview" data-inset="true"> <li data-role="list-divider">Separador 1</li> <li>Elemento de lista 1<span class="ui-li-count">9</span></li> <li>Elemento de lista 2<span class="ui-li-count">8</span></li> <li>Elemento de lista 3<span class="ui-li-count">5</span></li> <li>Elemento de lista 4<span class="ui-li-count">3</span></li> </ul>

En este caso, utilizamos números de manera estática, pero en caso de desear un conteo dinámico, tú

puedes desarrollar algún complemento para realizar la suma de dichos elementos.

Uso de imágenes e iconos

Otra necesidad que se puede presentar al desplegar elementos en lista, es el uso de imágenes. Para ello,

jQuery Mobile ofrece soporte para el uso de imágenes en miniatura e iconos dentro de los elementos

que componen una lista.

En caso de ya contar con una serie de imágenes en tamaño adecuado, basta con agregar dicha imagen

al elemento de lista, para que esta sea mostrada en su interior. No hace falta de alguna clase o atributo

extra, pero en caso de que se desee presentar dichas imágenes en forma de icono, sí se debe agregar

una nueva clase la cual lleva por nombre “ui-li-icon”, e ira dentro del elemento de imagen.

Uso de buscadores

Al trabajar con listas muy largas, puede resultar difícil para el usuario identificar elementos. Para facilitar

esta tarea, se puede optar por incluir un buscador, el cual permita filtrar los elementos que se muestran

en la lista.

UNEWEB 26

JQUERY MOBILE

jQuery Mobile ofrece una manera muy sencilla de agregar esta funcionalidad, basta con añadir

el atributo “data-filter” con valor “true” a la lista y automáticamente se añadirá un elemento de

búsqueda al principio de la lista.

<ul data-role="listview" data-inset="true" data-filter="true"> <li>Elemento de lista 1</li> <li>Elemento de lista 2</li> <li>Elemento de lista 3</li> <li>Elemento de lista 4</li> <li>Elemento de lista 5</li> <li>Elemento de lista 6</li> <li>Elemento de lista 7</li> <!-- más elementos --> </ul>

Uso de formularios con jQuery Mobile – Parte 1

En la actualidad, los formularios son una parte fundamental de la mayoría de los sitios web, ya

que representan el principal medio de interacción entre los usuarios y la página. Gracias a su uso, el

usuario puede ingresar algún tipo de información y obtener una respuesta por parte del sitio, por lo que

su correcta usabilidad es muy importante.

Es por esta importancia, que el framework jQuery Mobile ha integrado dentro de su estructura, una serie

de métodos que nos permiten hacer formularios usables, elegantes y funcionales en entornos móviles.

En este artículo estudiaremos y analizaremos los detalles sobre cómo construir formularios y hacer uso

de las convenciones de jQuery Mobile.

Manejo de formularios

jQuery Mobile utiliza los formularios de una manera particular, ya que todas las peticiones por defecto

se realizan vía Ajax, es decir, los datos son enviados directamente a la locación que indicas en el atributo

“action” del formulario para después obtener una respuesta, todo esto sin la necesidad de volver a cargar

la página.

Todos los campos que pertenecen al formulario, son adaptados y mejorados para que puedan tener

mejor usabilidad en un dispositivo móvil. Por ejemplo, los botones son ampliados automáticamente por

jQuery Mobile, para que sean más fáciles de detectar y dar clic. En caso de que estas configuraciones por

defecto no te agraden, el framework proporciona una opción para desactivar, ya se de forma general o

exclusiva de un elemento.

UNEWEB 27

JQUERY MOBILE

Elaboración de un formulario

La estructura de un formulario debe verse afectada para lograr una correcta adaptación al entorno móvil.

Ahora cada campo dentro de la etiqueta form, debe estar envuelto por un elemento div que contenga

el atributo data-role con el valor “fieldcontain”. El uso de este div para envolver los campos del

formulario, se recomienda para ayudar a jQuery Mobile a alinear la etiqueta y el campo correspondiente.

Por ejemplo, si quisiéramos realizar un formulario corto de registro, podemos agregar dos campos de

tipo texto, uno para el nombre de usuario y otro para el correo electrónico, además un botón que se

utilizará para enviar los datos al servidor. Todos estos elementos a su vez, deben estar envueltos en div

contenedor individualmente. Esto luciría de la siguiente manera en el código:

<div data-role="content"> <form action="registro.php" method="post"> <div data-role="fieldcontain"> <label for="nombre">Nombre:</label> <input type="text" name="nombre" id="nombre" value="" /> </div> <div data-role="fieldcontain"> <label for="email">Email:</label> <input type="text" name="email" id="email" value="" /> </div> <div data-role="fieldcontain"> <input type="submit" name="submit" value="Enviar" /> </div> </form> </div>

Por defecto, los label del formulario toman una alineación superior, ya que esto da a los campos más

espacio y hace que luzcan mejor en el dispositivo móvil. Por otro lado, si giramos la pantalla para utilizarla

de manera horizontal, el formulario se adapta y aprovecha el espacio adicional, dando a los labels

una alineación a la izquierda.

Envío del formulario

Como ya mencionamos anteriormente, el formulario toma el valor que le damos al atributo “action”

dentro de la etiqueta “form” para determinar el destino de la información que el usuario ingresó. En

nuestro caso, estamos utilizando una página php para recibir la información, pero es válido si tu prefieres

utilizar otro tipo de lenguaje de lado servidor, o incluso simplemente apuntar a la misma página, el

formulario no hará nada pero por lo menos no te marcará error al enviar la información.

El contenido de la página a la que apuntemos, variará según el tipo de respuesta que deseamos dar. En

nuestro caso el archivo “registro.php” simplemente imprimirá en pantalla los datos ingresados por el

usuario.

UNEWEB 28

JQUERY MOBILE

<div data-role="page"> <div data-role="header"> <h1>Resultados</h1> </div> <div data-role="content"> <?php echo "<p> Nombre: " . $_REQUEST['nombre'] . "</p>"; echo "<p> Email: " . $_REQUEST['email'] . "</p>"; ?> </div> </div>

Manejo de textareas

Otro gran ejemplo que nos ayuda a entender el manejo de jquery mobile sobre los elementos, son

las textareas. Las áreas de texto, por defecto, puede ser elementos muy difíciles para trabajar en los

dispositivos móviles, sobre todo cuando la cantidad de texto crece más allá del tamaño del textarea y las

barras de desplazamiento aparecen.

Tomaremos como base nuestro formulario anterior y únicamente añadiremos un campo más, este será

un textarea, dentro del cual el usuario deberá ingresar parte de sus hobbies.

<div data-role="content"> <form action="registro.php" method="post"> <div data-role="fieldcontain"> <label for="nombre">Nombre:</label> <input type="text" name="nombre" id="nombre" value="" /> </div> <div data-role="fieldcontain"> <label for="email">Email:</label> <input type="text" name="email" id="email" value="" /> </div> <div data-role="fieldcontain"> <label for="hobbies">Hobbies:</label> <textarea name="hobbies" id="hobbies" /> </div> <div data-role="fieldcontain"> <input type="submit" name="submit" value="Enviar" /> </div> </form> </div>

UNEWEB 29

JQUERY MOBILE

Al visualizar el formulario en el dispositivo, podremos notar que el textarea se expande para abarcar lo

más posible del ancho de la pantalla, y se muestra más largo que los elementos de texto anteriores. Esto

hace que resulte más fácil para el usuario ingresar datos.

Cuando se llega al límite de líneas y el usuario continúa escribiendo, entonces jQuery Mobile expande

automáticamente el área de texto. Con esto, se lograr evitar utilizar las barras desplazadoras, por lo que

hay más espacio para el texto y resulta mucho más sencillo entender un escrito largo.

Uso de formularios con jQuery Mobile – Parte 2

En la entrega anterior, tuvimos la oportunidad de iniciar con la estructuración de un formulario, capaz

de ser visible adecuadamente en los dispositivos móviles. Para ello hicimos uso de la librería jQuery

Mobile, la cual se encarga de dar los estilos adecuados a cada parte del formulario, una vez que le son

agregados los atributos necesarios a cada una de las secciones.

En esta ocasión continuaremos con la elaboración de dicho form, pero haciendo uso de otra clase de

elementos, como lo son los botones de tipo radio, las cajas de menú de selección, casillas de marcado y

deslizadores.

Uso de botones radio y checkboxes

La funcionalidad de los botones de tipo radio y las casillas de marcado es muy similar, sin embargo su

objetivo es distinto. Por un lado los radio buttons son generalmente utilizados para escoger una sola

opción, mientras que los checkboxes se implementan para que el usuario selecciones una o más

opciones.

Ambos elementos son también candidatos a poder actualizarse y trabajar bien con dispositivos de tipo

móvil. Sin embargo requieren de un poco más de trabajo en el código, en comparación con los elementos

de tipo input que manejamos en el artículo anterior.

En los ejemplos que manejamos anteriormente, bastaba con envolver cada campo del formulario con

una etiqueta de tipo div que contara con el atributo “data-role” y el valor “fieldcontain”. Pero cuando se

trabaja con botones de radio y casillas de verificación, se requiere de una etiqueta más.

Dentro del div que envolverá a los campos, debemos agregar un elemento de tipo fieldset, el cual se

encargará de contener todas las piezas que pertenezcan al mismo grupo de opciones. El fieldset deberá

tener un atributo “data-role” con el valor “controlgroup”.

UNEWEB 30

JQUERY MOBILE

<fieldset data-role="controlgroup">

Una vez definido el fieldset, se pasa a agregar cada elemento radio button o checkbox dentro de éste.

Por ejemplo si quisiéramos establecer un grupo de opciones dentro de un formulario, para permitir que

el usuario nos indique cuál es el mejor curso de la página, agregaríamos un código como el siguiente:

<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>¿Cuál es el mejor tutorial de La Uneweb?:</legend> <input type="radio" name="mejortutorial" id="tutorial1" value="jQuery"> <label for="tutorial1">jQuery</label> <input type="radio" name="mejortutorial" id="tutorial2" value="jQuery Mobile"> <label for="tutorial2">jQuery Mobile</label> <input type="radio" name="mejortutorial" id="tutorial3" value="MooTools"> <label for="tutorial3">MooTools</label> </fieldset> </div>

Para los checkboxes sería básicamente lo mismo. Si queremos un grupo se selección, que le permita al

usuario escoger varias opciones de una lista de tutoriales haríamos lo siguiente:

<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>¿Cuáles son los mejores tutoriales de La Uneweb?:</legend> <input type="checkbox" name="mejortutorial" id="tutorial1" value="jQuery"> <label for="tutorial1">jQuery</label> <input type="checkbox" name="mejortutorial" id="tutorial2" value="jQuery

Mobile"> <label for="tutorial2">jQuery Mobile</label> <input type="checkbox" name="mejortutorial" id="tutorial3" value="MooTools"> <label for="tutorial3">MooTools</label> </fieldset> </div>

Es importante que en ambos casos, incluyamos el label de cada elemento con su respectivo atributo

“for”, ya que de esta manera el usuario tendrá más área para poder dar clic y seleccionar una opción.

UNEWEB 31

JQUERY MOBILE

También existe la funcionalidad para cambiar dichos elementos de selección, en botones horizontales.

Para lograr esto, basta con agregar el atributo “data-type” con el valor “horizontal” al elemento fieldset

que contiene el rol de “controlgroup”. Sin embargo, esta opción no es muy recomendada si vamos a

manejar texto muy largo en las opciones.

Menús de selección

Todo diseñador web que haya tenido la experiencia de trabajar con formularios en un proyecto, sabe

que el estilo de los elementos select es uno de los más difíciles de adaptar y manejar. Esto se debe a que

la visualización de estos elementos, está definida por el explorador que se usa para ingresar a la página.

En el caso de los dispositivos móviles, esta no es la excepción. jQuery Mobile ha podido establecer una

gran uniformidad en la apariencia inicial del select, pero una vez que se despliega el menú, cada

dispositivo toma parte y renderiza el menú de manera distinta.

Para definir un elemento select con correcta visualización en dispositivos móviles, basta con establecer

el siguiente código:

<div data-role="fieldcontain"> <legend for="mejortutorial">¿Cuáles son los mejores tutoriales de La Uneweb?:</legend> <select name="mejortutorial" id="mejortutorial"> <option value="jQuery">jQuery</option> <option value="jQuery Mobile">jQuery Mobile</option> <option value="MooTools">MooTools</option> </select> </div>

Al igual que con los botones de tipo radio y checkboxes, podemos agrupar un cierto número de selects.

Para ello, también haremos uso de un fieldset que tome el rol de “controlgroup”.

<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Fecha de nacimiento:</legend> <label for="dia">Día</label> <select name="dia" id="dia"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> ... </select> <label for="mes">Mes</label> <select name="mes" id="mes"> <option value="1">Enero</option>

UNEWEB 32

JQUERY MOBILE

<option value="2">Febrero</option> <option value="3">Marzo</option> ... </select> <label for="ano">Año</label> <select name="ano" id="ano"> <option value="1920">1920</option> <option value="1921">1921</option> <option value="1922">1922</option> ... </select> </fieldset> </div>

Al momento de visualizar esta estructura en los navegadores, podremos notar claramente la agrupación

de selects, gracias a que jQuery Mobile agrega un diseño que simula un contenedor con esquinas

redondeadas. Dicha agrupación, también puede desplegarse horizontalmente si así lo queremos, para

lograrlo basta con agregar el atributo “data-type” y darle el valor “horizontal”.

Otros elementos

Además de embellecer y mejorar la usabilidad de los elementos tradicionales de un formulario, jQuery

Mobile permite el uso de otra clase de elementos que quizás no son tan utilizados, pero que han llegado

para marcar cierta tendencia.

Estos elementos no son muy vistos en páginas normales, ya que hacen uso de HTML5, y como todos

sabemos, este no es interpretado correctamente por todos los navegadores. Entre estos encontramos a

los deslizadores, los interruptores y a los campos de búsqueda.

Los campos para búsqueda se agregan de la siguiente manera:

<div data-role="fieldcontain"> <label for="nombre">Nombre:</label> <input type="search" name="nombre" id="nombre" value="" /> </div>

Con el atributo type indicamos que es un campo para buscar, y gracias a esto podemos indicarle a jQuery

Mobile que aplique otro tipo de visualización. Y es así, como un icono con una figura de lupa se agrega

al borde izquierdo del campo, y un icono para eliminar el contenido de la caja se agrega a la izquierda.

Por su parte, para agregar un campo de tipo interruptor, basta con añadir un rol de tipo “slider” al

elemento select:

UNEWEB 33

JQUERY MOBILE

<div data-role="fieldcontain"> <label for="poder">Poder:</label> <select name="poder" id="poder" data-role="slider"> <option value="0">Apagado</option> <option value="1">Encendido</option> </select> </div>

Mientras que para obtener un deslizador, tenemos que darle un tipo “range” a un input, como se

muestra en el siguiente código:

<div data-role="fieldcontain"> <label for="temperatura">Temperatura:</label> <input type="range" name="temperatura" id="temperatura" min="0" max="100" value="30" data-highlight="true"> °C </div>

Diferencias entre jQuery y jQuery Mobile

jQuery Mobile es un sistema de interfaz de usuario diseñado para los teléfonos móviles, el cual se

construye sobre la base de jQuery. Es decir, jQuery es necesario para jQuery mobile funcione.

A diferencia de otros frameworks para teléfonos móviles con objetivos similares, jQuery mobile ofrece

soporte para todas las principales plataformas móviles, tabletas, lectores electrónicos y de escritorio, y

no sólo los navegadores webkit móviles. Una de las características más notables del framework, es su

sistema de navegación Ajax, el cual utiliza transiciones de página animadas.

En resumen:

• jQuery Mobile es un framework para la creación de aplicaciones web para móviles.

• Funciona en todos los teléfonos inteligentes y las tabletas populares.

• Utiliza HTML5 y CSS3 para diseñar páginas con el menor scripting posible.

¿Qué hay de nuevo?

Una cosa acerca de jQuery Mobile que puede parecer distinta para los nuevos usuarios, es la navegación

Ajax. Cuando se hace uso exclusivo de jQuery, el usuario se acostumbra a realizar la inclusión de

JavaScript en cada página y luego utilizar la función de DOM ready ( $(function(){ … } o

$(document).ready(function(){ …. }) para llamar todas las actividades y tareas a realizarse.

UNEWEB 34

JQUERY MOBILE

Debido a que jQuery Mobile utiliza un tipo de navegación con Ajax, todas las páginas que se van

mostrando son añadidas al mismo DOM de la primera página, por lo que no se vuelven a cargar todos

los scripts que se encuentran dentro de la etiqueta head.

Cuando la página siguiente se cargue a través de ajax, te darás cuenta de que las cosas que definiste

dentro de la función DOM ready no funcionarán en la segunda página. La solución a esto es vincular el

evento pageInit. Aquí te mostramos algunos ejemplos que te ayudarán a iniciar tu aprendizaje:

$(document).on('pageinit', function(){ //Esto se llamará cada vez que se cargue una página nueva ... });

Si lo que queremos es enfocar esta sentencia a una determinada página, lo indicado para realizarlo es

simplemente agregar el id de la página:

$(document).on('pageinit','#pag2', function(){ //Esto se llamará únicamente cuando se cargue la página "pag2" ... });

La comprensión de los nuevos eventos de página te ayudará mucho cuando comiences a trabajar con

jQuery Mobile.

Diferencia entre la base y lo móvil

El framework jQuery fue puramente diseñado para simplificar y estandarizar el scripting a través de

navegadores. Se centra en las cosas de bajo nivel: la creación de elementos, la manipulación del DOM,

la gestión de los atributos, realizando peticiones HTTP, etc

Por otro lado, tenemos complementos que te ayudan a manejar el aspecto visual de manera sencilla,

uno de estos es jQuery UI. jQuery UI es un conjunto de componentes y características integradas en la

parte superior de la interfaz de usuario de jQuery, lo que significa que necesita jQuery para trabajar.

Botones, cuadros de diálogo, barras de desplazamiento, pestañas, animaciones más avanzadas,

funcionalidad de arrastrar y soltar, eso es lo que nos ofrece jQuery UI.

Tanto jQuery como jQuery UI están diseñados para ser añadidos a tu sitio, ya sea para dispositivos de

escritorio o móviles. Si lo que requieres es añadir una característica particular, jQuery o jQuery UI podrían

ser capaces de ayudarte.

jQuery Mobile, sin embargo, es un framework completo. Está pensado para que sea su punto de partida

para un sitio móvil. Se hace uso de características de jQuery y de jQuery UI para proporcionar tanto

UNEWEB 35

JQUERY MOBILE

componentes de interfaz de usuario como funciones de la API para la creación de sitios móviles. A pesar

de ser un framework completo, es modular, es decir puedes utilizar tanto o tan poco de él como desees,

pero en sí jQuery Mobile tiene la capacidad de controlar toda el área de visualización del móvil de una

manera fácil si tú se lo permites.

Otra diferencia importante es que jQuery y jQuery UI pretenden ser una capa en la parte superior de tu

código HTML y CSS. Simplemente necesitas dejar el lenguaje de marcado sin modificaciones y las mejoras

y beneficios ofrecidos por jQuery llegarán por sí solos, claro una vez que hemos añadido el vínculo al

código del framework al inicio de nuestra página. Sin embargo, jQuery Mobile te da la posibilidad de

definir en qué partes deseas que aparezcan los componentes, todo esto utilizando HTML simple, por

ejemplo:

<ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">México</a></li> <li><a href="#">España</a></li> <li><a href="#">Venezuela</a></li> <li><a href="#">Chile</a></li> </ul>

El atributo data-role le dice a jQuery Mobile que debe convertir esta lista en un componente de interfaz

de usuario móvil y los atributos de data-inset y data-filter establecen las propiedades para ello, sin tener

que escribir una sola línea de código JavaScript. Los componentes jQuery UI, por otro lado, son

normalmente creados al escribir unas pocas líneas de Javascript, necesarias para crear una instancia del

componente en el DOM.

Soporte de jQuery Mobile

Como ya es de nuestro conocimiento, jQuery Mobile es un framework que tiene como base el código de

la librería jQuery. Gracias a jQuery, el desarrollo de código de JavaScript se ha vuelto más rápido,

eficiente y confiable; su implementación ha permitido cambiar la forma en que los desarrolladores

utilizan este lenguaje interpretado en sus sitios y aplicaciones web.

El equipo de jQuery tiene como objetivo elaborar una librería que sea capaz de convertirse en el mejor

complemento para desarrollar con JavaScript, por ello ha puesto todo su esfuerzo y dedicación para

lograr elaborar un código que sea soportado en la mayoría de los ambientes. Tener esto como base para

jQuery Mobile asegura una solución totalmente compatible y fiable en los años venideros. jQuery incluso

fue elegido por Microsoft como el framework preferido para manejar JavaScript en sus aplicaciones,

apoyando el soporte total de jQuery en Visual Studio.

UNEWEB 36

JQUERY MOBILE

Dispositivos compatibles

Casi cualquier dispositivo que tenga un navegador web puede ejecutar jQuery Mobile (incluyendo los

equipos de escritorio). Sin embargo, la experiencia que se obtiene de un dispositivo a otro puede ser

distinta, basada en el navegador utilizado, en el hardware en el que se está ejecutando el navegador y

por supuesto el sistema operativo con el que cuenta tu dispositivo.

Equipos de escritorio, portátiles y sistemas All-in-One

En tu PC, Mac o computadora con Linux, los sitios con jQuery Mobile se pueden ejecutar en cualquier

navegador moderno, teniendo en cuenta que por “moderno”, nos referimos a los navegadores que

tienen soporte para etiquetas de HTML5 e interpretan CSS3. Por ello, al utilizar Firefox, Chrome, Safari y

Opera, no debemos tener ningún problema y los resultados deben ser adecuados.

Ocasionalmente podrás notar que algunas partes de unas páginas no lucen similares, quizás alguna

esquina que debería ser redonda en algún navegador no se despliega de tal forma, pero la gran mayoría

de los sitios se ve bien y se comportan como se espera.

Tabletas

La experiencia que se obtiene con jQuery Mobile en las tabletas, no sólo está determinada por los

navegadores compatibles del dispositivo, sino además por la capacidad de procesamiento con la que

cuenta la tableta.

La mayoría de las tabletas tienen una pantalla grande, por lo que pueden tomar una cantidad

considerable de potencia de procesamiento para manejar ese tipo de pantalla. Esto significa, que a pesar

de que tu sitio generalmente se cargará de forma rápida y correcta, algunas transiciones de página y

diálogos pop-up pueden parecer estar sufriendo de saltos de cuadros, lo que puede provocar la

impresión de que tu sitio es más lento en algunas tabletas, donde la visualización parece vacilar.

Por ejemplo, al probar ciertas aplicaciones con un iPad o iPad 2 los efectos y transiciones de página

lucirán bastante fluidos, tal y como se espera. Sin embargo si realizas esta misma prueba con un Galaxy

Tab 10.1, las transiciones quizás no luzcan tan “suaves”, ya que algunas pueden lucir cortadas o incluso

puede existir una completa falta de animación.

Smartphones

Actualmente hay demasiados teléfonos en el mercado como para mencionarlos a todos, así que en vez

de hablar sobre modelos específicos, en esta sección trataremos de analizar la compatibilidad de la

librería con los distintos sistemas operativos que manejan dichos teléfonos.

UNEWEB 37

JQUERY MOBILE

Reiteramos que jQuery Mobile funciona en casi todas las plataformas, pero algunas de las características

avanzadas y la carga mediante Ajax pueden no ser compatibles. Esta es otra razón por la cual es una

sabia decisión utilizar jQuery Mobile en nuestros proyectos, ya que da la posibilidad de tener un sitio

parcialmente funcional a pesar de que el usuario utilice un dispositivo antiguo.

Android Si estás utilizando un navegador integrado con Android, todas las características avanzadas trabajarán y

las transiciones serán desplegadas de manera visualmente correcta. Debes tener en cuenta que si estás

utilizando Fennec, Firefox u Opera Mobile es posible que encuentres algunos problemas de estilo y un

poco de falta de apoyo total en las animaciones, pero la experiencia en general debe ser bastante

agradable.

iOS La forma en que jQuery Mobile es manejado por los teléfono iPhone es realmente impresionante. Las

transiciones son suaves, las animaciones son fluidas y los cuadros de diálogo se hunden y vuelven a la

perfección, por lo que el soporte proporcionado por el navegador Safari es considerado uno de los

mejores.

En iOS el uso de una aplicación de navegador (navegadores de terceros como iBrowser, Shaking Web,

etc.) puede degradar un poco el rendimiento, y en algunos casos, hasta causar que la navegación a travé

de Ajax falle. Esto no significa que el sitio no se puede utilizar, sólo significa que en lugar de una bonita

transición entre páginas, el sitio cargará más como un sitio normal, utilizando actualizaciones de página

el momento de dar toques o clics.

BlackBerry El sistema operativo BlackBerry tiene varias versiones de lanzamiento, y su experiencia puede variar en

función de la versión que se está ejecutando. Las versiones superiores a la 6.0 ofrecen las mismas

caracteríticas que Android e iOS, sin embargo la versión 5.0 a pesar de que se ve bien, falla al utilizar la

navegación Ajax. Por su parte, cualquiera de los dispositivos de la versión 4 hacen uso de una versión de

reserva estándar, esto significa que en vez de un agradable estilo CSS3 en las transiciones, obtendrás un

página con estilo simple que se actualiza cuando nos movemos a nuevos contenidos.

webOS Hay poco que hablar webOS, ya que su uso en dispositivos modernos está casi descontinuado, sin

embargo es bueno aclarar que jQuery Mobile funciona de las versiones 1.4 a la 3.0. Cuanto más lento es

su dispositivo con webOS, mayor es la probabilidad de que se vea un poco de saltos de cuadros, pero

aún así obtendrás soporte total Ajax, los estilos y las transiciones.

Windows Mobile Windows Phone 7 y 8 hacen uso de jQuery Mobile sin ningún problema, se ve bien, se ejecuta

adecuadamente y todas las características están habilitadas. Esto se debe a que el navegador web

UNEWEB 38

JQUERY MOBILE

incluido está basado en las versiones modernas de Internet Explorer, dando a los usuarios el acceso a

algunas de las características de HTML5 y CSS3.

Windows Mobile 6.5, sin embargo, es una historia diferente, utiliza una versión antigua del navegador

Internet Explorer y sufre de una falta de soporte de las funciones. Los que utilizan esta versión o alguna

más antigua, se pierden de la navegación AJAX y de algunis estilos. Cualquier dispositivo móvil que

ejecute Windows Mobile anterior a la versión 6.5 muestra una versión básica del sitio.

Creación de cuadros de diálogo con jQuery Mobile

En el ámbito de jQuery Mobile, los diálogos son pequeñas ventanas que se encargan de desplegar el

contenido de una página existente, abarcando todos los elementos dentro de un recuadro cuyo tamaño

generalmente es menor al de la ventana que despliega el resto del documento. Estos diálogos suelen

proporcionar un breve mensaje o pregunta para el usuario, y usualmente incluyen un botón que permite

al usuario cerrar el diálogo y volver al sitio.

La creación de un cuadro de diálogo con jQuery Mobile se realiza simplemente añadiendo un atributo

simple a un enlace, este atributo es “data-rel” y el valor que debe recibir es “dialog”. A continuación

mostramos su uso dentro de una lista:

<div data-role="page" id="first"> <div data-role="header"> <h1>Prueba de diálogo</h1> </div> <div data-role="content"> <p> <a href="#pagina2">Página normal</a> </p> <p> <a href="#pagina3" data-rel="dialog">Página en diálogo</a> </p> </div> </div> <div data-role="page" id="pagina2"> <div data-role="header"> <h1>Segunda Página</h1> </div> <div data-role="content"> <p> Segunda Página Contenido </p> </div>

UNEWEB 39

JQUERY MOBILE

</div> <div data-role="page" id="pagina3"> <div data-role="header"> <h1>Tercera Página</h1> </div> <div data-role="content"> <p> Tercera Página Contenido </p> </div> </div>

El ejemplo representa un sitio simple multi página elaborado con jQuery Mobile, básicamente esta la

primera página desplegada estpa estructurada por dos enlaces, los cuales llevan a otras dos páginas. El

primero de estos enlaces es un link típico, el cual víncula a una página común, mientras que el segundo

incluye el atributo que mencionamos anteriormente, “data-rel”, el cual indica que el tercer enlace abrirá

su contenido en un diálogo.

Como se puede apreciar no existe alguna otra diferencia entre los enlaces, basta con el atributo para que

la página abierta se despliegue de una manera totalmente diferente. Recuerda que no hemos cambiado

absolutamente nada en la estructura de la página, todos estos cambios son manejados por el propio

enlace.

Básicamente esto es todo lo que se necesita para crear un diálogo, al hacer clic en el pequeño botón X

que aparece, el cuadro de diálogo se oculta y regresa al usuario a la página original. Cualquier enlace que

agreguemos dentro de la página, también se encargará de cerrar el diálogo cuando se de clic sobre él.

Si deseas añadir un botón o enlace de cancelación, puedes hacerlo a través del uso del atributo data-

rel=”back”. El destino del enlace debe ser la página que se puso en marcha el diálogo. A continuación

vamos a mostrar un código donde simplemente hemos añadido un par de botones para el diálogo que

muestra la tercera página. El primer botón llamará a la segunda página, mientras que el segundo

funcionará como una acción de Cancelar.

<div data-role="page" id="pagina3">

<div data-role="header"> <h1>Tercera Página</h1>

</div>

<div data-role="content">

<p> Tercera Página Contenido

<a href="#pagina2" data-role="button">Page 2</a>

<a href="#primera" data-role="button" data-rel="back">Cancel</a> </p>

</div>

</div>

UNEWEB 40

JQUERY MOBILE

El cambio más importante en esta plantilla es la adición de los botones en el cuadro de diálogo, lo cuales

están contenidos dentro del div pagina3. Observa que ambos enlaces se convierten en botón utilizando

el atributo data-role, el primero es un enlace simple, mientras que el segundo botón incluye la adición

del atributo data-rel=”back”. Esta se encargará simplemente de cerrar el diálogo.

Maquetación de contenido con grids en jQuery Mobile

Los grids son una de las pocas características de jQuery Mobile que no hacen uso de algún atributo de

datos particular. En lugar de ello, simplemente se establecen cuadrículas especificando ciertas clases

CSS para el contenido del sitio.

Estos grids vienen en cuatro diferentes tipos de presentaciones, rejillas de dos, tres, cuatro y cinco

columnas. Es muy probable que la presentación de cinco columnas sea la menos utilizada, ya que quizás

es la menos adecuada para presentar información en un teléfono móvil, sin embargo se puede hacer uso

de ella si la información se presenta en una tableta.

Para comenzar el trazado de un grid, lo primero que debemos hacer es utilizar un bloque div que

contenga la clase “ui-grid-X”, donde “X” representa algún valor entre a, b, c o d. Si utilizaramos la clase

“ui-grid-a”, esta representará un grid de dos columnas, b por su parte es una rejilla de tres columnas, c

de cuatro y d de cinco.

Si por ejemplo, quisiéramos empezar una cuadrícula de dos columnas, la cual envuelva algún tipo de

contenido que presentamos en una página, haríamos lo siguiente:

<div class="ui-grid-a"> Contenido </div>

Una vez que tienes la estructura base, dentro del div que define el grid agregarás un div para cada celda

contenedora. Dichos divs deberán tener la clase “ui-block-X”, donde X una vez más representará un valor

entre a y e. La clase “ui-block-a” se usará para definir la primera celda, “ui-block-b” para la segunda y así

sucesivamente hasta llegar a “ui-block-e” que definirá la quinta celda de la fila. Este tipo de

funcionamiento es similar al trabajo con tablas en HTML.

En base a esto, podemos definir el siguiente fragmento de código para mostrar un sencillo grid de dos

columnas con dos celdas de contenido:

<div class="ui-grid-a"> <div class="ui-block-a">Columna Izquierda</div> <div class="ui-block-b">Columna Derecha</div> </div>

UNEWEB 41

JQUERY MOBILE

El texto dentro de una celda se ajustará automáticamente al tamaño estándar de las columnas, sin

importar que tan grande sea la cantidad que añadimos. Mientras más pequeña sea la pantalla y mayor

la cantidad de texto, es recomendado utilizar un menor número de columnas, de esa manera no

afectaremos la experiencia del usuario.

Para poder trabajar con otros tipos de grid es simplemente necesario cambiar las clases que utilicemos

para definir los divs. Por ejemplo, una cuadrícula de tres columnas se establecería con el siguiente

fragmento de código:

<div class="ui-grid-c"> <div class="ui-block-a">Primera celda</div> <div class="ui-block-b">Segunda celda</div> <div class="ui-block-c">Tercera celda</div> </div>

En caso de que quisieramos un grid con una sóla columna, la clase a utilizar es “ui-grid-solo”. Una vez

definido esto, podemos hacer uso de la clase “ui-block-a” para definir la celda. Una de las pocas razones

que existen para utilizar un grid de una sola columna, es mantener los mismos márgenes que el resto del

contenido utilizado dentro de otras cuadrículas.

Para crear varias filas dentro de una misma cuadrícula, sólo tiene que repetir bloques. El siguiente

fragmento de código muestra un ejemplo sencillo de una cuadrícula con dos filas de celdas:

<div class="ui-grid-a"> <div class="ui-block-a">Superior Izquierda</div> <div class="ui-block-b">Superior Derecha</div> <div class="ui-block-a">Inferior Izquierda</div> <div class="ui-block-b">Inferior Derecha</div> </div>

En base al anterior código, podemos observar que no se maneja un concepto específico de fila. jQuery

Mobile se encarga de interpretar el código, y definir que debe crear una nueva fila cuando el bloque

comienza de nuevo con la clase ui-block-a.

Uso de contenido plegable con jQuery Mobile

UNEWEB 42

JQUERY MOBILE

El framework jQuery Mobile nos da la opción de manejar y mostrar en nuestros sitios web diseñados

para dispositivo móviles, elementos con contenido plegable. Este concepto se utiliza para definir a todo

aquel elemento cuyo contenido es capaz de ser colapsado y expandido mediante alguna acción invocada

por el usuario.

La creación de un widget de contenido plegable es muy sencilla, basta con envolver el contenido deseado

en un div, añadir el atributo “data-role” con el valor “collapsible” a dicha etiqueta, e incluir un título para

el contenido. Basándonos en esto, el código lucirá de la siguiente forma:

<div data-role="collapsible"> <h1>Este es el título</h1> <p>Este es el contenido</p> </div>

Al momento de desplegar los elementos, jQuery Mobile se encargará de convertir el título en un banner,

el cual será capaz de recibir clics por parte del usuario con el fin de expandir o contraer el resto del

contenido del div.

Uso práctico

Una situación en donde el contenido plegable puede ser una solución efectiva, es cuando queremos

compartir información complementaria, por ejemplo muchas empresas despliegan en sus páginas la

dirección de su matriz u oficinas centrales, sin embargo al mostrar las direcciones del resto de las

sucursales puede resultar abrumador a simple vista. Para evitar esto, se puede desplegar el resto de la

información en un elemento plegable.

<div data-role="page" id="primera"> <div data-role="header"> <h1>Oficinas</h1> </div> <div data-role="content"> <p> <strong>Matriz:</strong><br/> A Hernández 17<br/> Ciudad de México, México<br/> 93000 </p> <div data-role="collapsible"> <h3>Sucursales</h3> <p> <strong>Asia:</strong><br/> Dirección en Terán<br/> Terán, Irán<br/> </p> <p> <strong>Europa:</strong><br/>

UNEWEB 43

JQUERY MOBILE

Dirección en Madrid<br/> Madrid, España<br/> </p> </div> </div>

Al utilizar el anterior código, la página mostrará únicamente la dirección de la Matriz, mientras que el

resto lucirá simplemente como un banner con el nombre “Sucursales” y un icono del signo de más, el

cual servirá para indicar al usuario que ese elemento se puede expandir. Al momento de expandir el

contenido el icono cambia por un signo de menos.

Expandir contenido por defecto

Por defecto jQuery Mobile colapsa y oculta el contenido, pero esto puede ser modificado. Para decirle a

jQuery Mobile que inicialice el bloque de forma abierta en lugar de cerrada, es necesario añadir el

atributo “data-collapsed” con el valor “false” a la etiqueta div inicial.

<div data-role="collapsible" data-collapsed="false"> <h1>Este es el título</h1> <p>Este es el contenido</p> </div>

Esta región todavía tendrá la capacidad de colapsarse y expandirse, pero simplemente por defecto estará

abierto inicialmente.

Tematización

Otra opción que nos ofrecen los bloques de contenido plegables, es la capacidad de tematizar el

contenido del área que está contraída. Al utilizar el atributo “data-content-theme”, podemos especificar

un color de fondo, lo que hace que la delimitación de la región sea un poco más coherente.

La tematización es un tema que trataremos más a fondo en otro artículo, pero podemos echar un vistazo

rápido con un ejemplo sencillo.

<div data-role="collapsible"> <h3>Primer Banner</h3> <p>Hola</p> </div> <div data-role="collapsible" data-content-theme="c" data-iconpos="right"> <h3>Segundo Banner</h3> <p>Hola de nuevo</p> </div>

UNEWEB 44

JQUERY MOBILE

El primer banner que mostramos con el código anterior lucirá normal, mientra que el segundo mostrará

el contenido con un fondo blanco y un borde que ayuda a delimitar. En este mismo ejemplo utilizamos

el atributo “data-iconpos” el cual sirve para establecer la posición del icono que indica el área plegable,

en este caso lo alineará a la derecha puesto que le dimos el valor de “right”.

Acordeón

Por último, tenemos la opción de tomar múltiples regiones plegables y combinarlas en una sóla área,

formando así un acordeón. Esto se hace simplemente tomando varios bloques plegables y

envolviéndolos en una nueva etiqueta div. Esta etiqueta div debe hacer uso del atributo “data-role” con

el valor “collapsible-set”. Esto hará que los bloques internos se conviertan en una unidad.

Una vez hecho esto, jQuery Mobile agrupará los divs y cerrará automáticamente el que esté abierto una

vez que se de la orden de abrir otro.

Configuración de jQuery Mobile con JavaScript

En este artículo, vamos a ver cómo JavaScript se puede utilizar para configurar y mejorar aún más los

sitios web desarrollados con jQuery Mobile. Hasta ahora hemos hecho uso de HTML y CSS para generar

todo, pero ahora utilizaremos secuencias de script adicionales para añadir funcionalidad adicional a los

sitios. Es decir, vamos a explicar cómo los sitios de jQuery Mobile se pueden configurar a través de

JavaScript.

Configurando el framework

jQuery Mobile hace muchas cosas por nosotros, desde la mejora de la página de navegación hasta

cambiar el funcionamiento de los controles de un formulario. Todo esto se realiza con el objetivo de

hacer que nuestro contenido funcione mejor en un entorno móvil. Sin embargo, habrá ocasiones en las

que no se desee utilizar jQuery Mobile para hacer ciertas operaciones, o tal vez simplemente se desea

retocar ligeramente el funcionamiento del framework. Para poder llevar a cabo esto, necesitamos

configurar el framework.

Para configurar un sitio jQuery Mobile, se empieza por escribir código que detecte el evento mobileinit.

Este puede ser detectado mediante un controlador de eventos de jQuery, similar al siguiente fragmento

de código:

jQuery(document).bind("mobileinit", function() { //código personalizado });

UNEWEB 45

JQUERY MOBILE

Para que este evento pueda ser capturado, se debe configurar antes de jQuery Mobile se cargue. La

forma más sencilla de hacer esto, y la forma recomendada por la documentación de jQuery Mobile, es

simplemente colocar este código en un script que se cargue antes que la librería jQuery Mobile

JavaScript. El siguiente fragmento de código muestra como debería lucir la cabecera de nuestros

archivos:

<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="configuracion.js"></script><!-- Este es nuestro archivo de

configuración --> <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

Configurar jQuery Mobile es tan simple como actualizar el objeto jQuery.mobile. El siguiente fragmento

de código es un ejemplo sencillo de cómo hacerlo:

jQuery(document).bind("mobileinit", function() { jQuery.mobile.algunaConfiguracion ="un valor"; });

Este objeto contiene un conjunto de claves con su valor respectivo, las cuales representan los distintos

ajustes que se pueden configurar. Otra opción es hacer uso de la funcionalidad jQuery extend(), como se

muestra en el siguiente fragmento de código:

jQuery(document).bind("mobileinit", function () { jQuery.extend(jQuery.móvil, { algunaConfiguracion: "un valor" }); });

Cualquiera de las formas que utilicemos estará bien ya que funcionan absolutamente igual, simplemente

escoge la que te resulte más cómoda. Ahora es tiempo de enlistar las diferentes opciones de

configuración, a continuación te mostraremos todas las configuraciones del objeto mobile que pueden

ser modificadas. Hay que tener en mente que por lo general sólo un par de éstas se suelen modificar

como un comportamiento común.

ns Este es el valor de namespace utilizado por los atributos de data. Por

defecto no contiene valor, por lo que se puede agregar uno si se quiere

anteponer un prefijo a dichos atributos. Por ejemplo, si deseas utilizar el

namespace “Uneweb” en tu proyecto, al agregar dicha cadena como valor

UNEWEB 46

JQUERY MOBILE

a esta propiedad, en lugar de utilizar “data-role” usarías “data-Uneweb-

role”

activeBtnClass Establece el nombre de la clase utilizada para los botones en el estado

activo. El valor predeterminado para este valor es ui-btn-active.

activePageClass Establece el nombre de la clase para las páginas que se están mostrando

actualmente. El valor predeterminado para este valor es ui-page-active.

ajaxEnabled Por defecto ajax es utilizado para cargar páginas y enviar formularios, si

deseas desactivar esto, debes utilizar esta propiedad.

allowCrossDomainPages Una configuración de segurdad que por defecto tiene el valor de false, al

establecerla como true permite que páginas remotan se puedan cargar

mediante jQuery.mobile.loadPage

autoInitializePage Normalmente jQuery Mobile corre jQuery.mobile.initializePage al cargar

la página. Si se desea desactivar esta funcionalidad, esta configuración

debe establecerse como false. De ser así, el método initializePage debe

mandarse llamar manualmente.

defaultDialogTransition Especifica qué transición se debe utilizar para mostrar u ocultar

los cuadros de diálogo. El valor predeterminado es pop. Los valores

posibles son: fade, flip, pop, slide, slidedown y slideup.

defaultPageTransition Al igual que la configuración anterior, esta es utilizada para transiciones

que suceden cuando la página de carga. El valor por defecto es slide.

gradea Se utiliza para determinar lo que realmente constituye un “buen”

navegador. Esto es manejado por jQuery Mobile, pero si quieres hacer

caso omiso al framework, o definir alguna otra condición que se debe

cumplir, se debe proporcionar una función la cual devuelve un valor

booleano (true o false).

hashListeningEnabled Se refiere a la capacidad de escuchar a los cambios en la propiedad

location.hash del navegador.

ignoreContentEnabled Normalmente jQuery Mobile mejora automáticamente todo lo que

puede. El valor de esta propiedad se establece como false de forma

predeterminada y permite a jQuery Mobile hacer su magia un poco más

rápido.

linkBindingEnabled jQuery Mobile normalmente hace caso a todos los clics a enlaces. Si desea

desactivar esto a nivel global, puede hacerlo con esta configuración.

loadingMessage Especifica el texto que se utiliza cuando las páginas se cargan.

loadingMessageTextVisible Cuando las páginas se cargan con jQuery Mobile, sólo se utiliza una

imagen de carga. Si deseas que un mensaje se muestre, establezca este

valor en true. El valor predeterminado es false.

minScrollBack Se establece para recordar la posición del scroll en una página.

pageLoadErrorMssage Este es un mensaje que se muestra a los usuarios si se produce un error

al cargar una página.

UNEWEB 47

JQUERY MOBILE

pageLoadErrorMessageTheme Establece el tema que se utilizará cuando se muestre un cuadro de error.

pushStateEnabled Le dice a jQuery Mobile que utilice pushState de HTML5.

Ventajas de utilizar jQuery Mobile

Si has tenido la oportunidad de desarrollar anteriormente aplicaciones nativas para dispositivos móviles

Android e iOS, en Java y Objective-C respectivamente, podrás haberte dado cuenta que el programar

para plataformas distintas, en ocasiones resulta ser una labor que consume mucho más tiempo del

deseado. Es por esto, que la promesa de tener una sola base de código que trabaja y funciona en la

mayoría de las plataformas, con la capacidad de ser implementado rápidamente a través de HTML

y JavaScript, suena muy atractivo para los desarrolladores.

Uso de jQuery Mobile y HTML5

Para poder construir una aplicación móvil sin utilizar algún lenguaje nativo, hay que hacer uso deHTML5 y

por supuesto JavaScript. Sin embargo, los controles de interfaz de usuario y el manejo de dispositivos

táctiles son muy diferentes a los de una aplicación web estándar. Por lo tanto, se recomienda hacer uso

de algún framework para móvil existente, el cual te permita ahorrar tiempo y sacar ventaja de las

funciones ya existentes.

jQuery es una de las librerías de JavaScript que más éxito y popularidad ha adquirido en los últimos años.

Su filosofía minimalista, fácil uso, implementación y la basta comunidad de usuarios que la respalda, han

hecho que se convierta en la primera opción a escoger por varios desarrolladores que inician un proyecto

web.

jQuery Mobile, es la versión que esta librería ha elaborado para el desarrollo de sitios web para móviles.

Contando con un nombre que lo respalde, este framework ha ido implementándose poco a poco en más

lugares, sin embargo su uso aún no resulta tan frecuente y una de las razones por la que esto sucede,

puede ser porque sus ventajas no suelen ser tan conocidas.

Fácil de aprender e iterar Basta con leer la documentación de jQuery Mobile y algún curso o guía en línea, para empezar a

desarrollar la base de tu aplicación y obtener resultados significativos en un par de días. jQuery Mobile

es un framework tan sencillo de aprender, que puedes concluir tu proyecto rápidamente sin tener mucha

experiencia previa de HTML5 y jQuery, siendo esto dependiente de la magnitud de dicho proyecto por

supuesto.

En comparación con Android e iOS, es mucho más rápido construir la interfaz de usuarioutilizando la

lógica que implementa jQuery Mobile y HTML5, además de que automáticamente se hace compatible

con casi cualquier plataforma.

UNEWEB 48

JQUERY MOBILE

La curva de aprendizaje para otros frameworks puede resultar bastante empinada, ya que se requiere

bastante tiempo para aprender peculiaridades y estándares particulares. Además con código nativo,

resulta bastante complicado conectar una vista de lista (ListView en Android, UITableView en iOS) con

un origen de datos remoto, y al mismo tiempo hacer que luzca bonito.

Al utilizar jQuery Mobile, se puede aprovechar todo el conocimiento previo que se tiene sobre de

JavaScript y HTML/CSS para hacer todo este tipo de operaciones de manera muy rápida. Ya que no es

necesario aprender un nuevo tipo de abstracción, aplicar adaptadores o delegar funciones, simplemente

basta con escribir código de jQuery.

Evita el uso de App Store Una de las cosas más dolorosas en el desarrollo para móviles, específicamente en la elaboración de

aplicaciones para iOS, es lidiar con el proceso de aprobación en la Apple App Store. Para poder lograr

que una aplicación nativa llegue a los usuarios de iOS, se debe pasar por un proceso largo (días,

posiblemente semanas) y esto no sólo aplica para el lanzamiento del código inicial, sino que cada

actualización que se haga debe pasar por lo mismo.

Ya que las apps de jQuery Mobile no son más que un tipo especial de aplicación web, heredan todas las

maravillosas cualidades de ese entorno. Tan pronto como el usuario vuelve a cargar su sitio, ya estarán

utilizando la última versión de tu código. Subir correcciones de errores y agregar nuevas características

resulta un proceso casi instantáneo.

Es multiplataforma El hecho de que una aplicación funcione de manera inmediata tanto en Android como en iOS, así como

muchas otras plataformas, es una ventaja enorme, ya que para un desarrollador, es un gran esfuerzo

poder mantener una base de código separado para cada plataforma.

Escribir una aplicación móvil de calidad para una sola plataforma es un trabajo de tiempo completo,

tener que volver a hacer eso para cada plataforma requiere muchos recursos.

Como el navegador es el encargado de desplegar tu aplicación, lo hace de una manera que luzca

adecuada para todos los dispositivos, por lo que no es necesario preocuparse por aspectos como la

resolución de la pantalla, la escala y los ajustes.

Conclusión

En resumen, jQuery Mobile es una plataforma viable para el desarrollo de aplicaciones móviles. Sin

embargo, aún no se adapta a todas las clases de aplicaciones que existen en el mercado. Su uso se puede

centrar para la visualización de contenido simple y el desarrollo de aplicaciones de entrada de datos, sin

embargo aún no es recomendado implementar para desarrollar grandes aplicaciones multimedia o

juegos.