Crear Aplicaciones Con JQuery Mobile

Crear Aplicaciones
con jQuery Mobile
Docuemnto extraido de: http://revolucion.mobi/2013/05/03/aplicacionesmoviles-con-jquery-movile/

Escrito por: Carlos Sols | 03/05/2013
Pgina | 2
Posiblemente el framework de JavaScript ms utilizado en la web es

jQuery y tiene su versin adaptada para dispositivos mviles llamado
jQuery Mobile.
jQuery Mobile es un plugin del jQuery original y requiere que este ltimo
est instalado previamente para poder funcionar.
Una vez activo, jQuery Mobile hace dos cosas: primero, optimiza las
funciones nativas para mejorar su performance en equipos mviles ,
segundo, modifica el HTML y genera un layout con una serie de
elementos grficos predefinidos que acelera sustancialmente la velocidad
de produccin.
Instalar jQuery Mobile

Aunque es posible y es una tcnica muy comn en sitios web, instalar
jQuery Mobile enlazando directamente a los archivos almacenados en la
nube, se recomienda ampliamente no aplicar esa tcnica para
aplicacionesPhoneGap. Muy frecuentemente tu aplicacin ser utilizada
sin ninguna conexin a internet o con conexin intermitente. Si los
archivos de jQuery estn enlazados a documentos en la nube, la
aplicacin quedara posiblemente inutilizable.
Para instalar este framework, lo primero que debes hacer es descargar
jQuery en su pgina oficial:
http://docs.jQuery.com/Downloading_jQuery#Current_Release
Crea una subcarpeta llamada js dentro de tu proyecto PhoneGap y
guarda all el archivo de jQuery.
Pgina | 3
Una vez descargado jQuery, debes descargar el plugin de jQuery Mobile

desde su sitio web oficial:
http://jquerymobile.com/download/
Crea una carpeta con el nombre jQueryMobile, descomprime el
archivo .zip que acabas de descargar y copia all todos los archivos que
contiene. Al final deberas tener una estructura similar a esta:
El nombre de los archivos de jQuery y jQuery Mobile cambia segn la

versin. Si la versin que descargaste tiene otro nombre recuerda hacer
los ajustes en el cdigo del ejercicio.
Como mencionamos jQuery Mobile cumple dos funciones: optimiza las
acciones de jQuery y genera una interfaz adaptada para dispositivos
mviles, por eso es que este plugin contiene imgenes y hojas de estilo.
Pongamos manos a la obra con el cdigo y comencemos a construir una
aplicacin con jQuery Mobile. comencemos con este cdigo base:
<!DOCTYPE html>
Pgina | 4
<html>
<head>
<meta name=viewport content=width=device-width, initial-scale=1.0,

maximum-scale=2 />
<title>Ejercicio 10.1</title>
<meta charset=utf-8>
<link rel=stylesheet href=js/jQueryMobile/jQuery.mobile.theme1.1.0.min.css />
<script src=js/jQuery-1.7.2.min.js></script>
<script
src=js/jQueryMobile/jQuery.mobile-
1.1.0.min.js></script>
</head>
<body>
</body>
</html>
Como se puede observar en negrita agregamos 3 lneas de cdigo extra

para incluir los archivos descargados. La primera incluye la hoja de
estilos de jQuery Mobile que se usar para crear las interfaces, la
segunda lnea incluye el el framework de jQuery propiamente dicho y la
tercera es la que inserta el plugin de jQuery Mobile.
Pgina | 5
Por ahora el cdigo no muestra ningun elemento en el navegador, a

continuacin vamos a explorar cmo crear una interfaz de usuario con
jQuery Mobile.
Creacin de Interfaces
jQuery Mobile nos permite crear interfaces optimizadas para dispositivos
mviles muy rpidamente y con relativamente poco esfuerzo.
La forma en que trabaja, es reescribiendo el cdigo original del
documento y generando uno nuevo, ms complejo, segn las
caractersticas y argumentos solicitados.
Una caracterstica interesante de jQuery Mobile es que, a diferencia de
un sitio web, que pasa de un documento HTML a otro para mostrar la
informacin, las pginas o pantallas de una aplicacin se manejan
desde un solo documento HTML.
Las pginas o pantallas estn en un nico archivo, jQuery Mobile las
administra para mostrar slo la parte del documento correspondiente a
cada pantalla mientras que el resto permanece oculto. De esta forma se
acelera
sustancialmente
la
carga
de
pginas,
tambin
permite
administrar eventos y animaciones entre una pantalla y otra.

jQuery Mobile aprovecha al mximo los nuevos elementos de HTML5 y
hace un uso intensivo de los atributos personalizados que se definen con
el prefijo data-
Por ejemplo data-role, uno de los atributos ms usados en jQuery
Mobile, permite definir el rol a nivel de funcionalidad y apariencia del
Pgina | 6
elemento que lo contiene. Al definir el rol de un elemento, este atributo

permite crear pginas, botones, mens y muchos elementos ms.
Al insertar el atributo data-role en cualquier tag lo convertimos en un
elemento de la interfaz. Sin necesidad agregar ningn cdigo adicional
jQuery agrega todos los elementos grficos, clases y hasta animaciones
necesarios para el funcionamiento de ese elemento en particular.
Por ejemplo, para crear una pgina se utiliza el atributo data-role=page
de esta forma:
<div data-role=page id=inicio>
Inicio
</div>
Cuando jQuery Mobile renderiza la aplicacin comprende que este div

debe ser interpretado como una pgina. Le agrega el cdigo y eventos
necesarios para que se comporte y vea como tal.
Usando el mismo principio, vamos a utilizar el atributo data-role=header
para agregar un encabezado a la pgina que acabamos de crear:
<div data-role=page id=inicio >
<div data-role=header>
<h1> Inicio </h1>
</div>
</div>
Pgina | 7
Ya tenemos una pagina con un encabezado, fijate que se gener un

fondo negro detrs del texto, en este caso como jQuery detect que ese
elemento era un header y automticamente le agreg las imgenes
necesarias para que tenga la apariencia de un encabezado.
Como se mencion antes, jQuery Mobile encapsula toda la aplicacin en

un solo documento, as que todas las pantallas deben agregarse en el
mismo documento, agreguemos dos pantallas ms a esta aplicacin:
<div data-role=page id=pantalla2>
Pgina | 8
<h1> Pantalla 2 </h1>
</div>
</div>
Tenemos tres pantallas pero la aplicacin se sigue viendo exactamente

igual. Esto porque aun no tenemos ninguna forma de navegar entre ellas,
para crear elementos de navegacin slo es necesario agregar un enlace
normal de HTML, en este caso vamos a incluirlo en la primera pantalla, al
inicio de la aplicacin:
<h1> Inicio </h1>
</div>
<a href=#pantalla2> Ir a Pantalla 2 </a>
</div>
Como habr notado el lector, en el cdigo todas las pantallas tienen un

atributo id diferente. Para navegar entre pantallas los enlaces deben
usar el nombre del ID agregando el signo # al inicio.
Pgina | 9
El enlace del ejemplo no solo permite ir a la pantalla 2 , jQuery Mobile

automticamente incluy una animacin de transicin para darle una
apariencia similar a la de una aplicacin nativa.
Llevemos un poco ms lejos el enlace que acabamos de crear y
agreguemos el atributo de jQuery Mobile data-role=button para que este
enlace se comporte como un botn:
<a href=#pantalla2 data-role=button> Ir a Pantalla 2 </a>
Al probar el cdigo anterior se ver algo similar a esto:
P g i n a | 10
Mucho mejor, cada vez se ve ms similar a una verdadera aplicacin! El

siguiente problema es que, en esta aplicacin, cuando avanzamos a la
siguiente pantalla, no hay forma de regresar.
Para regresar a la pgina principal, se puede aplicar la tcnica anterior
de enlazar un link al id de la pgina principal, o ms sencillo an, se
puede utilizar el atributo data-rel=back que regresa la aplicacin a la
pantalla inmediatamente anterior.
<a href=# data-rel=back data-role=button > Regresar </a>
P g i n a | 11
En este punto ya tenemos una aplicacin mnima con una navegacin

bsica y hasta transiciones de pantalla.
Para crear una aplicacin ms compleja con muchas secciones, es
posible que se necesite mostrar estas secciones en forma de lista de
enlaces directos a cada seccin. Esto lo logramos aplicando el atributo
data-role=listview a cualquier lista regular :
<ul data-role=listview >
<li><a href=#pantalla3> Pantalla 1</a></li>
<li><a href=#pantalla3> Pantalla 2 </a></li>
P g i n a | 12
</ul>
En el cdigo anterior creamos una lista normal de enlaces, pero con el

uso de listview se genera un nuevo elemento de tipo lista:
Con las listas podemos crear mens extensos que abarquen mltiples
pginas internas. Al igual que en con los otros elementos de navegacin,
las
transiciones
automticamente.
entre
pantallas
incluyen
las
animaciones
P g i n a | 13
Por ltimo, vamos a agregar un men de navegacin en esta pantalla. Al

igual que con el elemento anterior, utilizamos una lista con enlaces para
generar el elemento, pero esta vez se usar el atributo datarole=navbar para crear una barra de navegacin :
<div data-role=navbar>
<ul>
<li><a href=#pantalla1>Inicio</a></li>
<li><a href=#pantalla2>Pantalla 2</a></li>
<li><a href=#pantalla3>Otros</a></li>
</ul>
</div>
El siguiente ejercicio integra todos los elementos que examinamos en

una sola aplicacin:
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content=width=device-width, initial-scale=1.0,

maximum-scale=2 />
P g i n a | 14
<title>Ejercicio 10.2</title>
<meta charset=utf-8>
<link rel=stylesheet href=js/jqueryMobile/jquery.mobile.theme1.1.0.min.css />
<script src=js/jquery-1.7.2.min.js></script>
<script
src=js/jqueryMobile/jquery.mobile-
1.1.0.min.js></script>
</head>
<body>
<h1> Inicio </h1>
</div>
<a href=#pantalla2 data-role=button> Ir a Pantalla 2 </a>
</div>
P g i n a | 15
</div>
<a
href=#
data-rel=back
data-role=button
>
</a>
<ul data-role=listview >
<li><a href=#pantalla3> Pantalla 1</a></li>
</ul>
<div data-role=footer>
<div data-role=navbar>
<ul>
<li><a href=#pantalla1>Inicio</a></li>
<li><a href=#pantalla2>Pantalla 2</a></li>
<li><a href=#pantalla3>Otros</a></li>
</ul>
Regresar
P g i n a | 16
</div><! /navbar >
</div>
</div>
<a href=# data-rel=back data-role=button > Regresar </a>
</div>
</body>
</html>
Pros y contras de usar jQuery Mobile

No hay tecnologa perfecta y jQuery no es la excepcin. Muchos
desarrolladores crean todas sus aplicaciones con esta tecnologa
mientras que otros la evitan al mximo, todo depende de las preferencias
personales.
Aqu una breve lista de ventajas y desventajas de desarrollar con jQuery
Mobile para que puedas tomar la mejor decisin.
P g i n a | 17
Pros:
Desarrollo rpido de interfaces.
Sintaxis sencilla.
Efectos prediseados.
Manejo de eventos.
Baja curva de aprendizaje.
Contras:
Agrega peso extra a la aplicacin.
Manejo complejo de CSS.
Los efectos no funcionan fluidamente en algunos equipos de baja
gama.
Las aplicaciones ms grandes pueden hacer lenta la carga por
trabajar en un solo archivo.
Menos control general del cdigo.
jQuery Mobile es una excelente plataforma para comenzar a desarrollar,
para aplicaciones pequeas o medianas y para acelerar tu produccin.
Si deseas aprender ms sobre este framework puedes encontrar
documentacin detallada en su sitio oficial
http://jQuerymobile.com/demos/
P g i n a | 18
Tambin
existen
otros
frameworks
similares
jQuery
Mobile
como Sencha Touch o DHTMLX touch con una aproximacin similar de

desarrollo rpido con elementos prediseados.
jQuery Mobile es un paquete completo con su propio CSS, elementos
grficos, eventos y mtodos, que
aumentan velocidad de desarrollo.
ofrecen una gran comodidad y

Crear Aplicaciones Con JQuery Mobile

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Crear Aplicaciones Con JQuery Mobile

Cargado por

Copyright:

Formatos disponibles

Crear Aplicaciones

con jQuery Mobile

Docuemnto extraido de: http://revolucion.mobi/2013/05/03/aplicacionesmoviles-con-jquery-movile/

Posiblemente el framework de JavaScript ms utilizado en la web es

Instalar jQuery Mobile

Una vez descargado jQuery, debes descargar el plugin de jQuery Mobile

El nombre de los archivos de jQuery y jQuery Mobile cambia segn la

<meta name=viewport content=width=device-width, initial-scale=1.0,

<link rel=stylesheet href=js/jQueryMobile/jQuery.mobile.theme1.1.0.min.css />

Como se puede observar en negrita agregamos 3 lneas de cdigo extra

Por ahora el cdigo no muestra ningun elemento en el navegador, a

administrar eventos y animaciones entre una pantalla y otra.

elemento que lo contiene. Al definir el rol de un elemento, este atributo

Cuando jQuery Mobile renderiza la aplicacin comprende que este div

<h1> Inicio </h1>

Ya tenemos una pagina con un encabezado, fijate que se gener un

Como se mencion antes, jQuery Mobile encapsula toda la aplicacin en

<h1> Pantalla 2 </h1>

<div data-role=page id=pantalla3>

<h1> Pantalla 3 </h1>

Tenemos tres pantallas pero la aplicacin se sigue viendo exactamente

<h1> Inicio </h1>

<a href=#pantalla2> Ir a Pantalla 2 </a>

Como habr notado el lector, en el cdigo todas las pantallas tienen un

El enlace del ejemplo no solo permite ir a la pantalla 2 , jQuery Mobile

Al probar el cdigo anterior se ver algo similar a esto:

Mucho mejor, cada vez se ve ms similar a una verdadera aplicacin! El

En este punto ya tenemos una aplicacin mnima con una navegacin

<li><a href=#pantalla3> Pantalla 1</a></li>

<li><a href=#pantalla3> Pantalla 2 </a></li>

<li><a href=#pantalla3> Pantalla 3 </a></li>

<li><a href=#pantalla3> Pantalla 4 </a></li>

<li><a href=#pantalla3> Pantalla 5 </a></li>

<li><a href=#pantalla3> Pantalla 6 </a></li>

En el cdigo anterior creamos una lista normal de enlaces, pero con el

Por ltimo, vamos a agregar un men de navegacin en esta pantalla. Al

<li><a href=#pantalla2>Pantalla 2</a></li>

El siguiente ejercicio integra todos los elementos que examinamos en

<meta name=viewport content=width=device-width, initial-scale=1.0,

<link rel=stylesheet href=js/jqueryMobile/jquery.mobile.theme1.1.0.min.css />

<div data-role=page id=inicio >

<h1> Inicio </h1>

<a href=#pantalla2 data-role=button> Ir a Pantalla 2 </a>

<div data-role=page id=pantalla2>

<h1> Pantalla 2 </h1>

<ul data-role=listview >

<li><a href=#pantalla3> Pantalla 1</a></li>

<li><a href=#pantalla3> Pantalla 2 </a></li>

<li><a href=#pantalla3> Pantalla 3 </a></li>

<li><a href=#pantalla3> Pantalla 4 </a></li>

<li><a href=#pantalla3> Pantalla 5 </a></li>

<li><a href=#pantalla3> Pantalla 6 </a></li>

<li><a href=#pantalla2>Pantalla 2</a></li>

</div><! /navbar >

<div data-role=page id=pantalla3>

<h1> Pantalla 3 </h1>

<a href=# data-rel=back data-role=button > Regresar </a>

Pros y contras de usar jQuery Mobile

como Sencha Touch o DHTMLX touch con una aproximacin similar de

ofrecen una gran comodidad y

También podría gustarte