Manual Jquery Mobile PDF

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.
com
Manual de jQuery Mobile

Manual de jQuery Mobile, el framework para el desarrollo compatible de sitios web orientados a dispositivos mviles, basado en el popular jQuery.
Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Miguel Angel Alvarez Dairo Galeano
Director de DesarrolloWeb.com http://www.desarrolloweb.com (3 captulos)
Desarrollador independiente (10 captulos)
Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com
Introduccin a jQuery Mobile

Caractersticas de jQuery Mobile, el framework Javascript para desarrollo de aplicaciones web para mviles, basado en jQuery. jQuery Mobile Framework es un producto que sin duda va a dar mucho que hablar en los prximos aos. Estamos asistiendo a la revolucin de los dispositivos mviles de acceso a Internet y este framework, basado en el popular jQuery, se va a convertir en el mejor aliado para el desarrollo de sitios web orientados para al segmento de consumidores web en movilidad. En esta introduccin a jQuery Mobile voy a ofrecer las claves o caractersticas de este framework, de modo que las personas puedan saber qu tipo de ayudas nos ofrece para el desarrollo y por qu va a significar una revolucin a la hora de crear aplicaciones web compatibles con la mayora de las plataformas mviles.
jQuery se reinventa a si mismo

Quizs recordemos el lema o slogan de jQuery: "Write Less, Do More". Pues jQuery Mobile Framework es esa misma idea, pero elevado a la siguiente potencia. Para explicar esto quiero antes preguntar a los lectores Para qu sirve un framework? Supongo que la mayora lo sabr de sobra, pero comento bsicamente estas dos situaciones: 1. No tener que lidiar con las particularidades de cada navegador. Desarrollar una vez con cdigo jQuery y que se vea correctamente en todos los navegadores del mercado. Incluso, cuando saquen otro navegador, o versiones nuevas de los existentes, que no tengas que retocar tu cdigo para adaptarlo tambin a ellos. 2. Tambin sirve para escribir menos cdigo fuente y hacer cosas ms espectaculares. Ahora Por qu jQuery Mobile es otra vuelta de tuerca? 1. Porque con los dispositivos mviles se han multiplicado el nmero de navegadores y de plataformas. Tenemos muchos fabricantes, de tablets y smartphones y diversos dispositivos con caractersticas distintas, como tamaos de pantallas, sistemas operativos diferentes y diversos navegadores basados en cada uno de ellos. Vamos, que si antes con los navegadores para PCs haba problemas de compatibilidad, cuando tenamos apenas 3 sistemas operativos y 3 navegadores populares, ahora con los mviles la cosa todava se hace ms complicada. 2. Porque el desarrollo de sitios web con jQuery Mobile es todava ms automtico de lo que era trabajar con jQuery. Con mucho menos cdigo haces muchas ms cosas. Como te puedes figurar, con los dispositivos mviles todava se hace ms necesario usar un framework, que te facilite desarrollar una vez y ejecutar de manera compatible en todos los dispositivos. Adems de ello, con jQuery Mobile reducirs drsticamente el tiempo de desarrollo de tu sitio web para dispositivos de movilidad.

Caractersticas de jQuery Mobile

Lo primero que debe quedarnos claro para describir jQuery Mobile es que no se trata de un nuevo framework creado desde cero. En absoluto. Podemos entender a jQuery Mobile como un plugin para jQuery puesto que es un producto que est basado en el propio framework Javascript jQuery. Por tanto, aquellas personas que ya conocen jQuery no van a tener que aprender nada nuevo, sino aplicar sus conocimientos y desarrollar fcilmente aplicaciones para mviles. Esto significa una gran ventaja, puesto que hay muchas personas que conocen jQuery y que van a poder pasarse sin prcticamente ningn problema al desarrollo para dispositivos. Lo segundo que quiero sealar es que, si bien jQuery nos sirve para desarrollo de funcionalidades Javascript compatibles con todos los navegadores, jQuery Mobile va un poco ms all. No se trata simplemente de una capa para realizar cdigo Javascript que funcione en todos los navegadores, sino un conjunto de herramientas que simplificar el proceso de crear pginas para mviles, desde la escritura del propio cdigo HTML, la maquetacin con CSS y la creacin de efectos dinmicos con Javascript. Un momento: como nos va a ayudar a hacer HTML jQuery Mobile? No es que vayas a escribir cdigo HTML desde jQuery, sino que, al incluir jQuery Mobile tu cdigo HTML bsico ser optimizado para realizar diversos comportamientos dinmicos en los navegadores mviles, de manera automtica. Adems, muchas cosas del propio framework las vas a poder configurar directamente a travs de atributos HTML. Bueno Y qu hay de CSS? Pues tampoco es que tengas que escribir tu cdigo CSS desde jQuery Mobile, sino que este framework dispondr diversas herramientas CSS, tambin de manera automtica, que podrs utilizar en tus desarrollos. Por poner dos ejemplos, con este framework tus componentes de formularios se estilizarn de manera automtica, sustituyendo los feos elementos nativos de los navegadores de dispositivos mviles. Adems, dispondrs de un pequeo framework CSS para poder hacer cosas como la maquetacin a partir de una rejilla. Aparte de todo lo comentado hasta ahora, que opino es clave para entender bien qu es jQuery Mobile Framework, aqu van otra serie de caractersticas rpidas del producto: Creado sobre jQuery con arquitectura de jQueryUI: Los propios creadores de jQuery usaron su experiencia para desarrollar el framework para mviles y adems implementaron la arquitectura diseada para las libreras de interfaces de usuario jQueryUI. Por tanto se trata de un producto muy bien pensando, en base a la experiencia de aos. Est desarrollado para trabajar con HTML5: de hecho, estamos obligados a hacer pginas HTML5 para aprovechar todas las caractersticas del framework. Repleto de automatismos: Si ya era fcil hacer Ajax en jQuery, todava es ms fcil en jQueryMobile. De hecho, si el framework capta que puede hacer una conexin Ajax en lugar de una convencional, lo hace automtica por Ajax. Y eso es solo un ejemplo, tambin son automticas las transiciones entre pginas, la personalizacin del aspecto de la pgina, etc. Preparado para dispositivos tctiles: Los dispositivos tctiles tienen cambios en la gestin de eventos y jQuery Mobile nos facilita la labor de adaptarnos a ellos. Personalizacin de temas: Igual que ocurra con las jQueryUI, el jQuery Mobile podemos elegir entre varios temas grficos ya listos para aplicar al aspecto de nuestra pgina. Adems, podemos crear nuestros propios temas personalizados.
Compatible con el mayor nmero de plataformas

Los creadores del framework comentan entre sus caractersticas que se han esforzado para cubrir el mayor nmero de plataformas de dispositivos mviles posible. Dicen que el target que han buscado es mayor que el del resto de frameworks disponibles en el mercado.
Nota: A decir verdad, no he comprobado hasta que punto la compatibilidad de jQuery Mobile sea mayor o menor que la de otros productos como Sencha Touch. Pero si nos vamos a la pgina de Sencha veremos que ellos comentan que el framework est preparado para iOS, Android y BlackBerry, cuando jQuery Mobile alcanza muchas otras plataformas.

En la siguiente imagen podemos ver los logos de los sistemas operativos que jQuery Mobile soporta.
No obstante, cabe sealar existen diversos grados de compatibilidad para cada sistema, o mejor dicho, para cada navegador dentro de cada familia de dispositivos. En la documentacin del framework, en la seccin de Supported Platformsveremos que el grado de compatibilidad est dividido en tres niveles distintos, desde Grado-A (donde estn la mayora navegadores para iOS y Android, as como BlackBerry, Palm WebOS, los navegadores de ordenadores de escritorio, etc.) a Grado-B (donde encontramos a Symbian, Opera Mini 5.0 y 6.0 para iOS o Balckberry 5.0) o Grado-C (con el resto de los smartphones, entre los que se encuentra Windows Mobile o Blackberry 4). En resumen, que segn apuntan en la documentacin, solo se ha dejado sin soporte deliberadamente en esta versin 1.0 del framework el sistema Samsung Bada (El sistema operativo propietario de Samsumg para smartphones), aunque dicen que probablemente funcione relativamente bien incluso sin haberla probado, pues todava no hay dispositivos o emuladores. En los prximos artculos de DesarrolloWeb.com empezaremos a desarrollar con jQuery Mobile, comenzando por las explicaciones sobre cmo hacer una primera pgina bsica. De momento os dejo un par de enlaces que puedan complementar esta informacin: Como no, es imprescidible dar el enlace a este framework, para que podis ir conocindolo: http://jquerymobile.com Adems, una referencia interesante a un sitio donde se puede ver una galera de sitios creados con jQuery Mobile.
Introduccin a jQuery Mobile en vdeo

Hemos realizado una retransmisin en directo que puede servir para poder tener una visin general de jQuery Mobile y para dar los primeros pasos con este framework para el desarrollo de sitios para dispositivos mviles. En la introduccin se explican cosas importantes como qu es jQuery Mobile, cmo insertarlo en una pgina web o qu relacin tiene con el proyecto jQuery global. Adems se comienza a codear con diversos ejemplos en los que se puede apreciar la estructura de la pgina bsica, la estructura multipgina y la personalizacin de elementos del HTML con distintos roles.
Artculo por
Miguel Angel Alvarez
Configuraciones por defecto de jQuery Mobile

Breve introduccin a las configuraciones predeterminadas que vienen instaladas con jQuery Mobile y todo lo que ellas involucran. Una de las grandes ventajas que tiene jQuery Mobile framework, es que se auto-inicia. Es el mismo framework quien se encarga de crear cada uno de los widgets que nosotros le indiquemos a travs del atributo "data-role". Esto es una gran ventaja ante cualquier framework que tenga como labor principal la de crear interfaces de usuario, pues todo se hace casi de manera transparente para el desarrollador.

Como te habrs percatado, an a estas instancias del Manual de jQuery Mobile no se ha visto ni una sola lnea de Javascript, pero lo mejor es que hemos logrado la constitucin de importantes y relevantes herramientas para cualquier aplicacin web mvil. Sin embargo, con lo anterior no pretendemos decir que jQuery Mobile es solo para crear widgets, sino que tiene muchos ms soportes. Es ms, podemos hacer algunos trabajos de AJAX con el framework, as como cualquier otro tipo de interaccin usuario/sitio, de manera muy simple. Hablando un poco mas de AJAX, creo que hemos comentado anteriormente que el propio framework tambin lo maneja de forma automtica, haciendo incluso por nosotros tratamientos especiales frente a errores, por ejemplo. En este sentido, si llega a producirse algn problema con una transaccin HTTP, o cualquier otro protocolo, jQuery Mobile lo detectar, enviando al usuario un "Toask" como aviso, con un mensaje del problema. Tambin procesa los eventos relacionados con la carga de los datos que se pueden realizar a travs de cualquier peticin que se haga al servidor, mostrndonos de la misma forma un Toask de de carga.
Nota: Para aclarar dudas, quiero decir que un Toask es como una especie de "alert", que aparece encima de las aplicaciones, con la deferencia de que ste no usa botones, se oculta de forma automtica, se usan en los dispositivos mviles y pginas web de forma momentnea.
Mencin de las opciones por defecto de jQuery Mobile

En la documentacin oficial de jQuery Mobile encontramos un texto que, en sntesis, dicta lo siguiente: "Para comenzar, basta decir que cualquier modificacin que se quiera hacer sobre las configuraciones de jQuery Mobile se deben hacer envueltas dentro del evento "mobilinit", puesto que no se trabaja con el tradicional evento "ready" que se aplica al elemento document en otros proyectos relacionados con jQuery. Esto se debe a que la autoinicializacin de jQuery Mobile se lleva a cabo antes de ejecutarse el ultimo evento mencionado". Pero en muchos de los casos es ms productivo no incluir las configuraciones dentro del evento "mobileinit", aunque as lo diga la documentacin de jQuery Mobile. Esto es debido a que, en ocasiones, hemos probado a modificar las opciones, pero en realidad no se obtienen resultados visibles de ello, algo que s se logra haciendo las diferentes configuraciones fuera del evento "mobilinit" y dentro del ready. Cuando hablamos de estas configuraciones por defecto de jQuery Mobile, estamos hablando de una gran lista, pero tambin debo decir que en este artculo no las vamos a mencionar todas, pues algunas son solo para casos demasiado especiales y donde quizs pocas aplicaciones realmente lo exijan.
Cambiar las transiciones por defecto de pginas y dilogos

Cuando nos movemos entre una pgina y otra en una aplicacin jQuery Mobile, nos damos cuenta de que por defecto hace el efecto de transicin tipo "pop", pero como la cosa va sobre gustos, en mi caso me gusta ms la transicin "flip", entonces sera demasiado pedir hacer un data-transition a cada uno de los enlaces. Para eso disponemos de una opcin para cambiar las transiciones de todas las paginas al mismo tiempo, cosa que se consigue con el siguiente cdigo:
$.mobile.defaultPageTransition='flip';
Con esto todas nuestras pginas harn la transicin flip.

Nota: Recuerda que en el artculo de la barras de navegacin hablamos sobre las transiciones y explicbamos que "flip" no funciona en todos los navegadores.

Tambin existe una forma muy parecida para cambiar las transiciones de los cuadros de dilogo, as tendremos una mejor animacin unificada no slo para las pginas, sino tambin para los cuadros de dilogo.
$.mobile.defaultDialogTransition='slideup';
Modificar y Mostrar los Toask relacionados con AJAX

Anteriormente, en este artculo mencionbamos algo sobre los Toask y los trabajos que realizaban en jQuery Mobile, pues ahora vamos a ver como modificamos el mensaje que traen por defecto. Para el caso del mensaje de carga necesitaramos un cdigo como el siguiente.
$.mobile.loadingMessage = "Hemos modificado el mensaje del Loading";
Ahora si lo que queremos es cambiar el mensaje que viene dentro del Toask, que aparece cuando hay un error, necesitamos el siguiente cdigo:
$.mobile.pageLoadErrorMessage = 'Nuevo mensaje';
Tambin se puede controlar la aparicin y desaparicin de los Toask. Digamos que quiero que, al presionar un botn, aparezca el mensaje de carga. Entonces escribimos un cdigo como este:
$.mobile.loadingMessage = "Hemos modificado el mensaje del Loading"; $.mobile.showPageLoadingMsg('');
Luego para ocultar el Toask lo hacemos con una sencilla lnea de cdigo como esta.
$.mobile.hidePageLoadingMsg();
Recuerda que si quieres tener una referencia ms amplia de las configuraciones por defecto en jQuery Mobile Framework, puedes visitar su documentacin, en la seccin de configuraciones por defecto jquerymobile.com/demos/1.0/docs/api/globalconfig.html
Poniendo todo en un solo ejemplo

Ahora vamos a compartir un cdigo de ejemplo en donde se ilustra todo lo explicado en este artculo:
<!DOCTYPE html> <html lang="es"> <head> <title>Configuarciones por defecto</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="jquery.mobile-1.0.min.css" /> <script src="jquery-1.7.1.min.js"></script> <script src="jquery.mobile-1.0.min.js"></script> <script>
$(document).ready(function(){ $.mobile.pageLoadErrorMessage = 'Esta pagina no esxiste, el mensaje de error ha sido cambiado'; $.mobile.fixedToolbars.show(true); $.mobile.defaultDialogTransition='slideup'; $.mobile.defaultPageTransition='flip'; $("#mostrar").click(function(e){ $.mobile.loadingMessage = "Hemos modificado el mensaje del Loading"; $.mobile.showPageLoadingMsg(''); }); $("#ocultar").click(function(e){ $.mobile.hidePageLoadingMsg(); });


}); </script> </head> <body> <div data-role="page" id="home"> <div data-role="header" data-position="fixed"> <h1>Configuraciones</h1> </div> <div data-role="content"> <a <a <a <a <a href="#" id="mostrar" data-role="button">Mostrar Loading</a> href="#" id="ocultar" data-role="button">Ocultar Loading</a> href="#pag2" data-role="button" >Probar nueva transicion de paginas</a> href="#dialogo" data-role="button" data-rel="dialog">Probar nueva transicion de Dialogos</a> href="demo.html" data-role="button" >Aqui hay un error, la pagina del vinculo no existe</a>
</div> <div data-role="footer"> <h3>Configuraciones</h3> </div> </div> <div data-role="page" id="pag2"> <div data-role="header" data-position="fixed"> <h1>Configuraciones pagina 2</h1> </div> <div data-role="content"> <p>Este es una pagina y puedes ver que hace la transicion flip, sin poner el data-transition en el anlace, todas las paginas tendran la misma transicion</p> <a href="#home" data-role="button" data-icon="back">Regrsar</a> </div> <div data-role="footer"> <h3>Configuraciones pagina 2</h3> </div> </div> <div data-role="page" id="dialogo"> <div data-role="header" data-position="fixed"> <h1>Configuraciones</h1> </div> <div data-role="content"> <p>Este es un dialog y puedes ver que hace la transicion slideup, sin poner el data-transition en el anlace, todos los dialogos tendran la misma transicion</p> <a href="#home" data-role="button" data-icon="back">Regrsar</a> </div> </div> </body> </html>
Sin son observadores, se darn cuenta de que usamos una configuracin no explicada.
$.mobile.fixedToolbars.show(true);
Con sta se logra que todas las barras (header/ footer) que tengan el atributo data-position=fixed, se fijen de la misma forma que lo hace la barra de Google, donde podemos hacer scroll en la pagina y la barra tambin bajar, posicionndose siempre en la parte superior de la ventana del documento.
Artculo por
Dairo Galeano
7

Pgina bsica en jQuery Mobile Framework

Cmo es la estructura de la pgina ms bsica que podramos hacer con el framework jQuery Mobile. En el anterior artculo donde presentamos jQuery Mobile me cans de decir lo sencillo que es desarrollar con este framework y cmo con poco cdigo podemos hacer grandes cosas. Realmente en este artculo no vamos a explotar las enormes posibilidades que nos ofrecen estas libreras, puesto que vamos a hacer una pgina muy bsica, pero al menos servir para comenzar a apreciar algunas de sus caractersticas comentadas anteriormente. A continuacin vamos a realizar nuestra primera pgina bsica, por un lado incluiremos los scripts para instalar el framework, y por otro veremos tambin cul es la estructura de cdigo HTML que debemos implementar para crear esta primera pgina. Todo esto nos servir para apreciar como se puede hacer una pgina para mviles con estructura fundamental de cabecera, cuerpo y pie y cmo jQuery Mobile les coloca automticamente unos estilos bsicos.
Cdigo HTML de la pgina bsica

En este primer ejercicio, en lugar de comentar paso a paso como construir la pgina, quiero mostrar directamente cul sera el cdigo HTML necesario para crearla. Esto nos dar una idea global sobre esta estructura de documento y luego comentar las distintas partes del cdigo.
<!DOCTYPE html> <html> <head> <title>Probando jQuery Mobile</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> Pgina para mviles </div> <div data-role="content"> Esta es la versin para mviles de mi sitio web </div> <div data-role="footer"> Contacta y lo que sea... </div> </div> </body> </html>
A continuacin podemos ver, parte por parte, comentado todo el anterior cdigo HTML.
Nota: Como acabas de ver, la pgina bsica de este framework para mviles incluye, no solo los scripts jQuery y el componente jQuery Mobile, con sus CSS, sino tambin un bloque de cdigo HTML para crear las partes fundamentales de toda pgina jQuery Mobile. Esto es porque jQuery mobile, como vers a lo largo de los siguientes artculos, no es solo un framework para crear dinamismos del lado del cliente -como podramos entender a jQuery-, sino todo un paquete de utilidades que van desde la maquetacin de contenidos para mviles, mejoras en la presentacin e interfaces de usuario, hasta una serie de mtodos para realizar dinamismos e interaccin con el usuario.

Esto es HTML5!
Como se dijo en el artculo anterior, jQuery Mobile funciona con HTML5. Es decir, para poder disponer de todas las funcionalidades del framework debemos escribir cdigo HTML5. Por ello, podremos apreciar como se define el doctype de HTML5 en la primera lnea de cdigo.
<!DOCTYPE html> Nota: Los entendidos de HTML5 vern tambin que hemos definido una etiqueta META para especificar el juego de caracteres UTF-8, necesario en esta versin del lenguaje HTML. Recordar que se debe guardar el archivo con ese formato, UTF-8, con vuestro editor de texto para que todo vaya correctamente.
Etiqueta META Viewport

El segundo punto que nos salta a la vista es la etiqueta META "viewport", que sirve para decirle a jQuery que debe mostrar la pgina a escala 1.
<meta name="viewport" content="width=device-width, initial-scale=1">
Esta etiqueta se debe indicar porque algunos dispositivos realizan un escalado automtico de la pgina para mostrarla a unas dimensiones que no tienen por qu ser las deseadas. En algunos casos se utiliza una anchura virtual de 900 pxeles aproximadamente, con lo que nuestra pgina podra verse escalada. Con esta etiqueta la anchura de la pgina ser igual a la anchura de la pantalla del dispositivo. Sin embargo, esta definicin no entrar en conflicto con la posibilidad de hacer zoom a la pgina, lo que es interesante desde el punto de vista de la accesibilidad. El nico problema de esta etiqueta es que en iOS no se actualiza automticamente la anchura de la pgina al cambiar la orientacin del dispositivo (de horizontal para vertical o viceversa), con lo que las dimensiones pueden no ajustarse a la pantalla cuando alteramos la posicin del mvil. Segn comentan en la documentacin, queda pendiente corregir este asunto en versiones venideras del framework.
Incluir los scripts del framework

A continuacin vemos todas las etiquetas para instalar jQuery Mobile en nuestra pgina. Consiste en un link a una hoja de estilos CSS y la inclusin de los scripts Javascript de jQuery y jQuery Mobile.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile1.0.min.js"></script> Nota: Como se puede ver, estamos incluyendo la versin 1.0 del framework, pero quizs en el momento que leas este artculo estn en una release ms moderna, por lo que atento al copiar y pegar.
En la documentacin del framework nos recomiendan hacer los enlaces con los scripts alojados en el CDN (Content Delivery Network) de jQuery, para un mejor desempeo. Pero si lo preferimos tambin podemos tenerlos alojados en nuestro propio servidor.
Definir la estructura de pgina y los data-role

A continuacin podemos fijarnos en el cuerpo de la pgina, dentro de la etiqueta BODY. Veremos que la pgina bsica incluye diversas divisiones DIV con distintas utilidades, definidas por los atributos data-role. Estas forman la estructura de la pgina bsica en jQuery Mobile. Para comenzar veremos que existe una divisin que engloba toda la estructura de la pgina bsica, con el datarole="page".
<div data-role="page">

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Dentro de esa divisin tendremos otros DIV con los tres roles fundamentales de toda pgina jQuery Mobile: cabecera, cuerpo y pie. La cabecera se indica con el data-role="header".
<div data-role="header">
El cuerpo de la pgina lo colocamos con un data-role="content".

<div data-role="content">
Finalmente, el pie de pgina se indica con un data-role="footer".

<div data-role="footer">
Con esto hemos terminado con la pgina bsica. Podemos ver el ejemplo en funcionamiento.
Conclusin
Lo ms seguro es que no te haya sorprendido mucho esta primera pgina jQuery Mobile. Realmente no tiene nada en especial y ciertamente, si la vemos en un navegador, no observaremos nada que resulte espectacular. No obstante, en el siguiente artculo que publicaremos en DesarrolloWeb.com modificaremos esta pgina bsica, para aprender cmo es la estructura de la pgina multipgina de jQuery Mobile, que ya nos permitir mostrar algunas de las caractersticas interesantes de este framework. No obstante, quiero que se aprecie que jQuery Mobile ya nos ha alterado un poco el aspecto de nuestra pgina bsica a partir de unos estilos en la cabecera y pie, que son meramente automticos. Nuevamente, os pido un poco de paciencia para conocer en detalle todas las bondades anunciadas de este framework en futuros artculos.
Artculo por
Estructura multipgina de jQuery Mobile

Cmo hacer una pgina multipgina, de modo que se puedan reunir varias pginas en un archivo HTML, en jQuery Mobile Framework. Continuamos dando nuestros primeros pasos para el desarrollo de pginas orientadas a dispositivos mviles con jQuery Mobile. En esta ocasin nos vamos a dedicar a la estructura de las pginas "multipgina", lo que nos dar ocasin de ver ya algn efectillo interesante en nuestro navegador. En el anterior artculo del Manual de jQuery Mobile explicamos cul es la estructura de la pgina bsica y ahora veremos que la multipgina no es ms que la unin de varias pginas bsicas en un mismo archivo HTML. Quizs alguna persona con conocimientos avanzados de jQuery pueda estar decepcionada, al ver como en este manual de jQuery Mobile no hemos utilizado todava ningn cdigo Javascript. Si es as lo siento, pero ya advierto que esta situacin va a mantenerse al menos durante bastantes artculos ms. Pues, si bien es cierto que en esta ocasin vamos a poder ver en marcha efectos dinmicos, no es necesario utilizar Javascript para nada, porque muchos de los comportamientos bsicos de este framework se configuran directamente sobre el cdigo HTML, por medio de diversos atributos con el prefijo "data-". Para hacer la pgina bsica ya vimos que las divisiones tenan un atributo "data-role" para indicar la estructura de la pgina, con su cabecera, cuerpo y pie. Ahora veremos otros atributos parecidos para indicar otras cosas sobre las pginas que estamos desarrollando.

10
Multipgina es la unin de varias pginas bsicas

En el mismo cdigo HTML podemos incluir varios bloques de pgina bsica y tendremos un archivo HTML con diversas pginas que se conoce como Multipgina. Pero tranquilos, esto no quiere decir que en jQuery Mobile tengamos que desarrollar siempre todas las pginas del sitio web en el mismo archivo HTML, podemos organizarlas si lo deseamos en archivos aparte, o hacer una mezcla entre pginas multipgina y pginas bsicas en diferentes archivos HTML. La pgina bsica vimos que inclua una serie de scripts Javascript y estilos CSS del framework, adems de una declaracin META para definir la escala o zoom con la que se debera presentar. Todo eso permanece igual, lo nico que cambiar ser el cuerpo de la pgina, donde colocaremos varios bloques data-role="page". Veamos una unin de varios bloques de pginas bsicas.
 <div data-role="page" id="portada"> <div data-role="header"> <h1>Titular de pgina portada</h1> </div> <div data-role="content"> <p>Fabrico guitarras de todos los colores</p> <p>Puedes ver <a href="#galeria">mis guitarras</a></p> <p>Puedes <a href="#comprar" data-rel="dialog">comprar una guitarra</a></p> </div> <div data-role="footer"> Pie de pgina </div> </div>   <div data-role="page" id="galeria" data-title="Galera de guitarras"> <div data-role="header"> <h1>Galera de fotos de mis guitarras</h1> </div> <div data-role="content"> <p>Puedes ver todas mis guitarras</p> <p><a href="#portada">volver</a></p> </div> <div data-role="footer"> Pie de pgina </div> </div>   <div data-role="page" id="comprar" data-title="Comprar guitarras"> <div data-role="header"> <h1>Comprar guitarras</h1> </div> <div data-role="content"> <p>Servicio temporalmente indisponible</p> <p><a href="#portada">volver</a></p> </div> <div data-role="footer"> Pie de pgina </div> </div> 
Este sitio estara formado por tres pginas distintas: "portada", "galeria" y "comprar". A pesar que estn escritas en el mismo archivo HTML, jQuery se encargar de mostrarlas como si fueran pginas independientes. La navegacin entre ellas est realizada por enlaces, como veremos a continuacin.

11
Enlaces entre las pginas de la estructura multipgina

Cada una de las pginas bsicas del esquema multipgina tienen un identificador, que se pone en el DIV principal de la pgina, el que tiene data-role="page". Veamos a continuacin el cdigo HTML de la divisin general de la pgina de portada.
<div data-role="page" id="portada">
Como vemos, se le ha colocado id="portada", con lo que ya tiene un nombre asignado. Ahora, si queremos hacer enlaces dirigidos hacia esta portada, los creamos simplemente como si fueran enlaces internos. Para ello colocamos el href="#portada", es decir, tal como se hace con los enlaces dentro de la misma pgina que conocemos del HTML.
<a href="#portada">Ir a la portada</a>
Lo genial de estos enlaces es que, para pasar de una pgina a otra, jQuery Mobile produce una transicin automtica, que hace que una pgina actual desaparezca y entre la enlazada con un efecto suavizado. Ms adelante explicaremos cmo configurar las transiciones entre pginas.
Ttulos de las pginas

Como todas las pginas de esta estructura multipgina estn en el mismo archivo HTML, ocurre que todas comparten un mismo TITLE, que fue indicado en el HEAD de la pgina. Sin embargo los desarrolladores probablemente querrn que cada pgina tenga un ttulo independiente. Para hacer posible ese caso de uso, jQuery Mobile dispone de un atributo data-title que se coloca en el DIV principal de cada una de las pginas. En data-title podemos indicar el ttulo que tiene cada pgina del esquema de multipgina y jQuery Mobile se encargar de actualizarlo automticamente cuando se navegue a esa pgina. Podemos ver el ttulo de la sub-pgina de galera:
<div data-role="page" id="galeria" data-title="Galera de guitarras">
As vemos que, cuando el usuario pulse un enlace que le lleve a esta pgina, se cambiar de manera automtica el titular de la ventana del navegador a lo indicado mediante data-title="Galera de guitarras". En resumen. La primera de las pginas podr tener el ttulo que indiquemos en el TITLE del documento HTML, pero si queremos asignar otros ttulos diferentes a otras pginas de la estructura multipgina, deberemos hacerlo a travs de los atributos data-title.
Atributos data-X
Quiero hacer una mencin aparte a estos atributos especiales de jQuery Mobile. Como has podido ver, al desarrollar para este framework se utilizan diversos atributos "data-X", como los mencionados data-role o data-title.
Nota: Otro ejemplo que hemos puesto en este artculo de la estructura multipgina es data-rel="dialog", que asignado a un enlace, provoca que la pgina que se est enlazando se muestre como si fuera un cuadro de dilogo. Ms adelante veremos ms cosas acerca de los cuadros de dilogo, pero para que se identifique ese data-rel="dialog" pongo aqu el cdigo del enlace donde se ha colocado ese atributo.
<a href="#comprar" data-rel="dialog">comprar una guitarra</a>
Todos estos atributos con prefijo data- son perfectamente vlidos en la sintaxis HTML5, ya que las especificaciones del lenguaje permiten cualquier nmero de atributos que comiencen por la cadena "data-". En HTML5 se utilizan para embeber datos de las aplicaciones web en las propias etiquetas del HTML y jQuery Mobile los utiliza, como has podido comprobar, para configurar el funcionamiento de las pginas desarrolladas con estas libreras. Ms adelante veremos otros usos de esta tcnica para implementar diversos componentes de interfaces de usuario, configurar las transiciones entre pginas, el comportamiento de los enlaces, etc.

12
Conclusin
De momento dejamos por aqu estas explicaciones, ofreciendo el enlace al ejemplo en marcha donde puedes ver la estructura multipgina. Como podrs comprobar al ver el ejemplo en marcha, se han realizado dos tipos de comportamientos dinmicos. Primero las transiciones entre pginas, con un efecto de desplamiento suavizado. Luego el cambio automtico del TITLE del documento, al pasar de una pgina a otra. Es simplemente una pequea muestra de las posibilidades del framework y de como, a partir de mero cdigo HTML, se pueden configurar diversos dinamismos. Ni hace falta decir que, si no bassemos nuestras aplicaciones en jQuery Mobile, realizar estos comportamientos dinmicos exigira usar bastante Javascript y lidiar con las particularidades de cada dispositivo y navegador.
Artculo por
Crear Botones con jQuery Mobile

Crear botones con jQuery Mobile es muy sencillo y no requiere mucho esfuerzo, sin embargo los resultados son excitantes. Como venimos adelantando a lo largo de los anteriores artculos del Manual de jQuery Mobile, este framework ofrece una amplia gama de widgets o componentes de interfaz grfica de usuario (GUI). Dichos componentes van ms all de los convencionales ofrecidos en HTML 5 y aunque es verdad que han tenido grandes mejoras con respecto a las versiones anteriores del lenguaje de la web, son todava sobrepasados en calidad y variedad por los que podemos crear a travs de jQuery Mobile. Es por ello que jQuery Mobile ofrece una alternativa muy divertida de enriquecer visualmente nuestras aplicaciones web para mviles, a travs de toda una cantidad de formas y efectos que vienen prediseados en el framework. Lo mejor es que podemos acceder a todo esto de manera muy fcil, lo que nos permitir crear con extraordinaria sencillez GUIs visualmente ms atractivas. En este articulo, y en otros que publicaremos en breve, estudiaremos las formas en que se pueden crear, personalizar y trabajar con componentes de interfaz grafica de usuario. De momento nos iniciaremos con la creacin de botones, que son unos de los elementos ms usados en cualquier aplicacin, ya sea para la web o para escritorio. Veremos que jQuery Mobile nos ofrece una alternativa para crear botones de esttica atractiva y fcil de implementar en nuestros proyectos, aplicaciones web o sitios para mviles.
Un Botn simple de jQuery Mobile

jQuery Mobile ofrece una manera simple de crear nuestros botones, a partir de una serie de propiedades o atributos que vienen predeterminados en el framework. Lo ms destacable es que, para lograr nuestro objetivo, solo necesitamos pocas lneas de cdigo y adems, todo en HTML.
Nota: La posibilidad de configurar elementos de interfaz grfica a travs de HTML es una de las caractersticas de jQuery Mobile y es es una gran diferencia con respecto a las libreras jQuery UI, donde requeramos de Javascript para crear y mostrar nuestros componentes de interfaz grafica de usuario o widgets. Aunque vale la pena decir que dichos scripts no eran muy difciles de concebir o crear, pues todo lo que tiene que ver con jQuery est diseado para facilitarnos la vida.
Si recordamos un poco sobre lo que hemos aprendido en desarrolloweb.com sobre de jQuery UI para crear un botn lo, cual no era muy difcil, primero necesitbamos un cdigo HTML como el siguiente:
<a href="#" id ="boton" > Este es my buttton simple jQUI</a>
El cual es un simple enlace, el cual se referencia a travs del id botn, pero que jQuery UI con ayuda de algo de javasScript lo converta en un bonito botn, dicho script sera algo como el siguiente:
$("#boton").button();

13
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Ahora bien, en el caso de jQuery Mobile no se requiere crear scripts para implementar nuestros botones. Eso lo hacemos de forma directa en nuestro documento o cdigo HTML. Se logra con cdigo como el siguiente:
<a href="#" id ="boton" data-role="button" >Este es my buttton simple con jQM</a>
Como podemos ver fue muy fcil crear nuestro botn. Solo tuvimos que asignarle el valor de buttonal atributo data-role de nuestro enlace, algo que podemos hacer sobre un botn creado a travs de la etiqueta input lo cual sera algo como esto:
<input type="button" data-role="button" value="Boton input"/>
Es decir que fcilmente podemos hacerlo de forma directa sobre nuestros submit para enviar formularios a un servidor, lo que nos ayudara a salir del clsico y convencional botn HTML, eso lo logramos con la siguiente lnea de cdigo:
<input type="submit" data-role="button" value="Boton input con type submit"/>
Modificar las propiedades por defecto de los botones de jQuery Mobile

Una de las cosas que pasan con los botones es que, por defecto, ocupan todo el ancho de la pantalla, sin importar la resolucin de la misma, pero en ciertos momentos no queremos hacer eso. Existe una manera muy simple de crear botones que se ajusten a la tamao del texto que llevan dentro y al igual que en la creacin del botn por defecto, solo necesitamos modificar algunos atributos en el mismo cdigo HTML. Podemos conseguirlo con el siguiente cdigo:
<a href="#" data-role="button" data-inline="true" >Tiene el mismo ancho del texto</a>
Como se puede observar solo tuvimos que modificar el atributo data-inline y asignarle el valor a true con el fin que el botn se limite al tamao del texto. Otras de las cosas que se pueden hacer con los botones es cambiar sus colores, con el fin de no quedarnos con los que vienen de manera predeterminada. Como todo en jQuery Mobile, se hace de manera muy simple, rpida ycon un grado de eficiencia muy alto. Es decir, que si lo que queremos es tener un boton con diferentes colores, tendramos que escribir un atributo ms a nuestros botones, dicho cdigo puede ser el siguiente:
<a href="#" data-role="button" data-inline="true" data-theme="e" >Este boton es de otro color</a>
Lo que hicimos fue agregar el atributo data-theme al cual le damos el valor de e atribuyndole un tema nuevo a nuestro botn. Dichos temas van de la a hasta la e. Como podemos hacernos a la idea, cada tema de tendr unos colores diferentes. Por ejemplo, si probamos el siguiente cdigo:
<input type="submit" data-role="button" value="submit con otro color" data-theme="b"/>
Obtenemos un botn con un muy atractivo color azul, el cual equivale al darle el valor de b al tributo data-theme. Todo esto nos comprueba que hacer interfaces graficas de usuario que visualmente sean atractivas, es una tarea que se puede hacer en jQuery Mobile con cierto grado de facilidad. Para mayor claridad le dejo un cdigo de una pgina web la cual contiene todo lo explicado en este artculo, con el cual espero que aclaren algunas dudas que hayan quedado en el aire:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title>Botones con jQuery Mobile</title> <link rel="stylesheet" href="jquery.mobile-1.0.min.css" /> <script src="jquery-1.7.1.min.js"></script> <script src="jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"><h1>Botones</h1></div> <div data-role="content"> <a href="#" id ="boton" data-role="button" >Este es my buttton</a> <input type="button" data-role="button" value="Boton input"/> <input type="submit" data-role="button" value="Boton input con type submit"/> <a href="#" data-role="button" data-inline="true" >Tine el mismo ancho del texto</a>

14

<a href="#" data-role="button" data-inline="true" data-theme="e" >Este boton es de otro color</a> <input type="submit" data-role="button" value="submit con otro color" data-theme="b"/> </div> <div data-role="footer"><h3>Botones</h3> </div> </body> </html>
Tambin podemos ver este cdigo funcionando en un ejemplo ya construido. Espero que se diviertan con jQuery Mobile!! De momento lo dejamos hasta una prxima ocasin, donde hablaremos de cmo hacer listas ms atractivas con este framework. No olviden dejar comentarios y apuntes sobre este artculo.
Artculo por
Dairo Galeano
Con jQuery Mobile las listas son mejores

Creacin de listas y los usos que le podemos dar en jQuery Mobile dentro de nuestras aplicaciones web mviles. A lo largo de diversos artculos del Manual de jQuery Mobile venimos expresando las grandes ventajas que tiene usar este framework para crear aplicaciones, orientadas a dispositivos mviles, con una poderosa interfaz grafica de usuario (GUI). En el artculo anterior pudimos ver un ejemplo de ello: Crear botones con jQuery Mobile. La forma de usar los widgets que vienen predeterminados en el framework es una tarea muy sencilla, pero obtenemos resultados impactantes, con los cuales podremos sorprender a nuestros amigos. Uno de los componentes de interfaz grfica de usuario ms relevante, eficiente y til en jQuery Mobile son las listas, ya que nos pueden servir como mens de contextos, o cualquier otro uso que le podamos dar en nuestras aplicaciones web mviles. El lmite est en nuestra imaginacin, pues todo en este framework se amolda de acuerdo con nuestras necesidades, o ms bien, las caractersticas especificas del dispositivo mvil que lo cargue. Llegar el momento en el que tendremos que mostrar un catalogo de artculos, o servicios de una empresa, o cualquier cosa similar. Esta es una tarea que podemos cumplir con los componentes o widgets listas, que creamos con jQuery Mobile. Siguiendo el ejemplo del catlogo de productos, podemos tener cada uno de los artculos organizados en nuestras listas y al hacer clic, estaramos viajando de forma directa a una pgina, que nos mostrara toda la informacin del elemento seleccionado.
Ejemplo ilustrativo con listas

Para este articulo donde estamos trabajando con listas vamos a crear un ejemplo bastante sencillo pero muy ilustrativo de las cosas que podemos hacer con dichos elementos. Con esto obtendremos un horizonte de ideas e ilustraciones de cosas tiles por hacer con las listas, que nos brinda jQuery Mobile Nuestro ejemplo tendr cuatro pginas web, incluidas dentro del mismo documento HTML. En la primera crearemos de inmediato una lista, que nos servir como ejemplo clsico e ilustrativo de este articulo. En la lista habrn tres elementos con textos diferentes, al hacer clic sobre uno estaremos viendo una pequea informacin sobre aquello que se haya seleccionado. La informacin de cada uno de los textos presentes en los elementos de la lista se albergar en las tres pginas restantes. Aunque en nuestro ejemplo no sern productos, sino medios de transporte. Inicialmente comenzaremos creando una lista sencilla con todas las configuraciones predeterminadas por jQuery Mobile, ya sobre la marcha iremos configurndola para conseguir mejores efectos visuales. Para obtener una lista sencilla basta con un cdigo como este:
<ul data-role="listview" >

15

<li><a href="#coche" >Coche</a></li> <li><a href="#avion">Avin</a></li> <li><a href="#aeroplano">Aeroplano</a></li> </ul>
Hasta aqu hemos conseguido crear una lista sencilla, donde sus elementos servirn como enlace para comunicarnos con otras tres pginas web. Cada pgina esta relacionada de forma directa con los elementos de la lista, es decir, que al dar clic sobre el elementos con texto de "Coche", el navegador nos llevar a una pgina que contiene informacin acerca de los coches.
Enriquecer visualmente las listas

Al igual que en el caso de los botones, podemos hacer ciertas modificaciones e ir agregando atributos a las listas de forma directa sobre las etiquetas HTML. Esta posibilidad de configurar los propios widgets en el cdigo HTML facilitar mucho la vida, a la hora de crear nuestras aplicaciones con jQuery Mobile. Divisiones: Lo primero que vamos a hacer con las listas es crear unos divisores, que son otros elementos de la lista, pero que actan de forma diferente. stos elementos son solo para orientar al usuario en la lista. En otras palabras, ellos actan como una especie de objetos inhabilitados a los eventos que se puedan generar por el usuario, y por tanto, no reaccionaran al clic al doble o al teclado etc. En las listas se pueden agregar o indexar divisores en cualquier lugar, algo que es muy frecuente, pues aunque no respondan a ningn evento, ellos cumplen una tarea importante. Se trata de una forma visual de mantener informado al usuario que est usando nuestra aplicacin web. A continuacin vamos a crear divisores en nuestra lista, estos nos servirn para indicar los diferentes tipos de medios de transporte, que en nuestro ejemplo son: Transporte terrestre y transporte areo, para que nuestro usuario sepa por donde va.
Nota: Para servir de ejemplo de uso de los divisores podemos pensar en otra cosa. Imagina que tu lista tuviera productos comerciales. Entonces podras poner divisores con textos como: artculos electrnicos y artculos de alimentacin.
La tarea con los divisores es muy sencilla y se consigue con un cdigo como el siguiente.
<ul data-role="listview" > <li data-role="list-divider">Medios de transporte terrestrses</li> <li><a href="#coche" >Coche</a></li> <li data-role="list-divider">Medios de transporte Areos</li> <li><a href="#avion">Avin</a></li> <li><a href="#aeroplano">Aeroplano</a></li> </ul>
Como pueden darse cuenta, es muy sencillo. Solo hay que agregar dos elementos <li> en la posicin donde deseamos tener nuestros divisores, pero a estos elementos debemos asignarle el atributo data-role al cual le danos el valor de list divider. Con ese nico detalle es suficiente para obtener un divisor en nuestras listas.
Nota: En el cdigo anterior los divisores se han identado a la derecha, pero eso simplemente es para que visualmente se puedan identificar mejor. Sobra decir que en el cdigo HTML estos sangrados no se tienen en cuenta por los navegadores, aunque s nos sirven a los desarrolladores a leer mejor los cdigos que creamos.
Sangrado: Otro asunto que atae a las listas es que en su configuracin por defecto no conservan un margen en la pagina. Si lo deseamos, podemos agregar ese margen por medio de un nuevo atributo a nuestra lista, que se coloca de forma directa en la etiqueta <ul> del HTML. Ese atributo es el data-inset, el cual recibe un valor booleano, es decir, que si queremos producir el margen solo que darle valor de true al atributo. Con esto obtendremos una lista que conservar ciertos mrgenes con respecto a la pagina, adems de crearle un borde redondeado. Todo eso se logra con un cdigo como este:
<ul data-role="listview" data-inset="true">

16
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Temas grficos de personalizacin: Los componentes de interfaz grafica de usuario en jQuery Mobile comparten la gran mayora de atributos, es decir, que a nuestra lista podemos modificar su data-theme con el fin de obtener una lista con color diferente. Esto se consigue igual que se explic en los botones, con un cdigo HTML como el siguiente:
<ul data-role="listview" data-inset="true" data-theme="b">
Tambin podemos hacer modificaciones en sus divisores agregando un nuevo atributo en la etiqueta <ul>. Es til hacer esto para que nuestros divisores se diferencien de los dems elementos, quedndonos un cdigo como este:
<ul data-role="listview" data-inset="true" data-theme="b" data-dividertheme="a">
Como se puede observar, solo agregamos un nuevo atributo data-dividertheme con el que se la da un tema a los divisores de la a lista, este es el "a", con el conseguimos un color negro. El efecto es que los divisores aparecern con el color diferente que asigna jQuery Mobile por defecto.
Cdigo completo de uso de listas en jQuery Mobile

Pues bien, espero que hayan comprendido la importancia de las listas. Ahora, para mayor claridad de todo lo explicado vamos a compartir el cdigo completo con todo lo que hemos tratado en este artculo. Tambin usaremos aspectos vistos en la seccin de Crear botones con jQuery Mobile, al igual que otros temas que se han tratado previamente en este manual.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title>Liastas con jQuery Mobile</title> <link rel="stylesheet" href="jquery.mobile-1.0.min.css" /> <scriptsrc="jquery-1.7.1.min.js"></script> <scriptsrc="jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" id="inicio"> <div data-role="header"><h1>Listas</h1></div> <div data-role="content"> <ul data-role="listview" > <li><a href="#coche" >Coche</a></li> <li><a href="#avion">Avin</a></li> <li><a href="#aeroplano">Aeroplano</a></li> </ul> <ul data-role="listview" data-inset="true" data-theme="b" data-dividertheme="a"> <li data-role="list-divider">Medios de transporte terrestrses</li> <li><a href="#coche" >Coche</a></li> <li data-role="list-divider">Medios de transporte Aereos</li> <li><a href="#avion">Avin</a></li> <li><a href="#aeroplano">Aeroplano</a></li> </ul> </div> <div data-role="footer"><h3>Listas</h3> </div> </div> <div data-role="page" id="coche"> <div data-role="header"><h1>Coches</h1></div> <div data-role="content"> Los coches son un medio de transporte terrestre<br> <a href="#inicio"data-role="button" data-theme="b" data-inline="true">Inicio</a> </div> <div data-role="footer"> <h3>Los coches</h3> </div> </div> <div data-role="page" id="avion"> <div data-role="header"><h1>Aviones</h1></div>

17

<div data-role="content"> Los aviones son un medio de transporte aereo<br> <a href="#inicio"data-role="button" data-theme="e" data-inline="true">Inicio</a> </div> <div data-role="footer"> <h3>Aviones</h3> </div> </div> <div data-role="page" id="aeroplano"> <div data-role="header"><h1>Aeroplanos</h1></div> <div data-role="content"> Los aeroplanos son un medio de transporte aereo, menor que los aviones<br> <a href="#inicio"data-role="button" data-theme="d" data-inline="true">Inicio</a> </div> <div data-role="footer"> <h3>Aeroplanos</h3> </div> </div> </body> </html>
Espero puedan comprender todo el cdigo anterior. Recomiendo leer otros artculos previos del manual si es que tienes alguna duda sobre asuntos como el sistema multipaginas de jQuery Mobile. Antes de acabar, quiero que se aprecie tambin que las tres pginas que contienen la informacin de los medios de transporte (coche, avin, aeroplano), tienen una forma de retorno al inicio. Son enlaces convertidos en botones, si no sabes cmo crear botones con jQuery Mobile revisa el artculo publicado anteriormente. Tambin puede ver el ejemplo en funcionamientos en una pgina aparte. Con esto les dejo hasta la prxima entrega. Como siempre, es todo un placer poder compartir informacin con ustedes. Nos vernos pronto y no olvides dejar tus cometarios o dudas.
Artculo por
Dairo Galeano
Los cuadros de dilogo son diferentes en jQuery Mobile

Cmo crear cuadros de dilogo con jQuery Mobile. Diversos usos y configuraciones que convierten a los cuadros de dilogo una poderosa herramienta. Uno de los componentes de interfaz grafica de usuario ms utilizado por los desarrolladores son, sin lugar a dudas, los cuadros de dilogo. Incluso sin importar el entorno en que se ejecute la aplicacin, ya sea web, de escritorio o para dispositivos mviles, e independientemente del objetivo para el que est destinada. Su importancia se debe a su capacidad de informar al usuario y de servir a la vez para tomar sencillas decisiones que afectan al flujo de la aplicacin. Otro detalle importante es que la informacin de los cuadros de dilogo se trata de manera diferente a cualquier otro tipo de componente de interfaz grafica de usuario, pues siempre obligan a los usuarios a dar, al menos, una ojeada rpida a la informacin. Tpicos cuadros de dilogo sirven para arrojar pistas de cmo trabajar con las aplicaciones, otros son advertencias y el ms comn es el de alerta.
Nota: Las alertas son muy usadas en los entornos web. Tanto es as que por lo general, cundo uno lee un manual de Javascript, lo primero que se ensea es a poner el tradicional "hola mundo" en un mensaje de alerta de nuestro navegador. Para comprobarlo basta hacer memoria y recordar los primeros artculos que se vieron en DesarrolloWeb.com en los manuales de Javascript o en el manual de jQuery.
Las alertas, o cualquier cuadro de dialogo que creemos en jQuery Mobile, se construye con una sencillez sorprendente. Adems son altamente verstiles, ya que nos permiten hacer muchas cosas, y cuando digo que muchas es porque los dilogos parecen no tener lmites, viajando mas all de una simple alert, confirmDialog, o

18
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com inputDialog. La razn por la que un cuadro de dialogo en jQuery Mobile parece no tener lmites es porque realmente son como una pgina web completa, ya sea de las mltiples en nuestro documento HTML o separada en un archivo aparte. Gracias al hecho de ser una pgina independiente, podremos hacer multitud de cosas como agregarle imgenes, crear formularios, anexarle botones, agregar videos, o todo lo que soporte una pgina web corriente. Con esto se puede entender el sin fin de aplicaciones y posibilidades que los cuadros de dilogo pueden tener en jQuery Mobile. Pero claro, tampoco podemos abusar de ellos, recordemos que aun siguen siendo cuadros de dilogo.
Convertir una pgina web en cuadro de dialogo

Para que una pgina se comporte como un cuadro de dialogo no debemos hacer nada sobre ella, sino que debemos construirla tal cual como se ha venido haciendo en todo el tutorial. Lo que hace que se convierta en un dilogo, es un atributo que se agrega en el enlace que nos lleva a la pgina. De modo que, la labor de presentar esa pgina como un dilogo, la realiza el propio framework y con una implementacin muy simple. El vnculo tambin puede ser un botn, si lo preferimos antes que un enlace corriente. En cualquier caso nos llevar hacia la pgina que se comporta como caja de dilogo, ya est dentro del mismo documento HTML o fuera de l. El atributo en concreto que debemos colocar en los enlaces dirigidos a pginas que queremos que se comporten como cuadros de dilogo es data-rel="dialog". Luego veremos ejemplos completos, pero antes quiero aclarar un asunto que fue motivo de duda entre un grupo de personas a las que explicaba el funcionamiento de los dilogos en jQuery Mobile: Qu hace diferente a un cuadro de dilogo de otro tipo de pgina, si solo es una pgina normal con un enlace al que hemos colocado un atributo especial? S tiene diferencias y notables, comenzando por que las pginas que son cuadros de dilogos no se guardan en el historial del navegador, es decir, que no podremos regresar a ellas con el botn atrs y por tanto solo tendremos acceso si presionamos el enlace que nos lleva hasta la pagina. Otra diferencia es que el framework se encarga de poner en el header de la pagina un icono de cierre al dialogo. Otro detalle visual atractivo que se produce es que la interfaz grfica del cuadro de dilogo aparece flotando, permaneciendo el documento anterior con el fondo oscuro. Pero bien, ahora veamos un completo ejemplo de la creacin de un primer cuadro de dilogo, a travs de un cdigo cuya sencillez se apreciar. Tendremos una pgina normal y en ella un botn, el cual abrir el cuadro de dialogo, que ser como una especia de alerta. Dicho botn se consigue con un HTML como el siguiente.
<a href="#dialogo" data-role="button" data-inline="true" data-rel="dialog" data-theme="b">Abrir dialogo</a>
Nota: Vuelvo a insistir en que debemos fijarnos en el atributo data-rel, al cual se le asigna el valor de "dialog". Todo lo dems que necesitas saber para entender ese cdigo ya ha sido explicado en artculos anteriores, como Crear botones con jQuery Mobile. Asimismo, tambin debes haber aprendido el manejo del sistema multi-paginas, que ofrece el framework.
Con un botn como el que creamos en el cdigo anterior, ya estaramos haciendo de la pagina con id "dialogo" un cuadro de dilogo. Sin embargo, tambin debemos crear un mecanismo de regreso ya que, a diferencia de las cajas de alerta convencionales que se crean con Javascript, stos no permanecen en la pgina que los invoca. Debes tener en cuenta que cuando se va a un cuadro de dilogo se viaja a travs del enlace a una nueva pgina, a pesar que jQuery Mobile produzca una visualizacin diferente. Para regresar nuevamente a la pagina, podrimos agregar el siguiente cdigo en la pagina con id de "dialogo".
<a href="#aja" data-role="button" data-rel="back">Aceptar</a>
Como se verse, en este caso tambin es un botn, con la diferencia que esta vez su atributo data-rel tiene el valor de "back". Con esto no tenemos la necesidad de asignar la direccin al enlace hacia la pgina inicial. Incluso si le damos una direccin diferente a la pgina de inicio, jQuery Mobile nos devolver a la pagina que invoc el dialogo.

19
Asignar temas grficos a las cajas de dilogo

Otra de las cosas que podemos hacer con los cuadros de dilogo es combinar sus temas, con lo que obtendremos variedad de tipos de alerta. Por ejemplo, podramos poner el botn de un color, el encabezado de otro y el contenido de otro. Solo tendramos que asignarle temas diferentes a cada uno de los objetos o elementos mencionados. Para ver todo esto vamos a crear un segundo cuadro de dialogo, que ser llamado a travs de otro botn que construiremos con un HTML como este.
<a href="#dialogo2" data-role="button" data-inline="true" data-rel="dialog" data-theme="c">Abrir dialogo configurado</a>
Ya solo bastara crear otra pgina web e identificarla como id="dialogo2", en esta podramos por ejemplo hacer lo siguiente.
<div data-role="page" id="dialogo2"> <div data-role="header" data-theme="b"><h1>dialogo con colores configurados</h1></div> <div data-role="content" data-theme="a"> Este es un cuadro de dialogo configurado que esta dentro del mismo HTML del enlace <a href="#" data-role="button" data-theme="e" data-rel="back">Aceptar</a> </div>
Como puedes observar solo tenemos que asignarle el atributo data-theme, con diferentes valores, sobre la etiqueta HTML que crea el objeto. De esa forma podemos obtener paginas y en este caso de cuadros de dilogo ms variados en color.
Ejemplo completo de creacin de cuadros de dilogo en jQuery Mobile

Pues bien solo nos resta atar cabos sueltos en el tema de los dilogos y para eso les dejo el cdigo del ejemplo que hemos visto en este articulo.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title>Cuadros de dialogos con jQuery Mobile</title> <link rel="stylesheet" href="jquery.mobile-1.0.min.css" /> <script src="jquery-1.7.1.min.js"></script> <script src="jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" id="inicio"> <div data-role="header"><h1>Trabajando con dialogos</h1></div> <div data-role="content"> Presiona el boton para abrir un cuadro de dialogo <a href="#dialogo" data-role="button" data-inline="true" data-rel="dialog" data-theme="b">Abrir dialogo</a></br> Presiona el boton para abrir un cuadro de dialogo con colores configurados <a href="#dialogo2" data-role="button" data-inline="true" data-rel="dialog" data-theme="c">Abrir dialogo configurado</a> </div> <div data-role="footer"><h3>Cuadros de dialogos</h3></div> </div> <div data-role="page" id="dialogo"> <div data-role="header" ><h1>dialogo de ejemplo</h1></div> <div data-role="content"> Este es un cuadro de dialogo sencillo que esta dentro del mismo HTML del enlace <a href="#" data-role="button" data-rel="back">Aceptar</a> </div> </div> <div data-role="page"id="dialogo2"> <div data-role="header" data-theme="b"><h1>dialogo con colores configurados</h1></div> <div data-role="content" data-theme="a"> Este es un cuadro de dialogo configurado que esta dentro del mismo HTML del enlace <a href="#" data-role="button" data-theme="e" data-rel="back">Aceptar</a>

20

</div> </body> </html>
Sera hasta una prxima, esperamos veros pronto y recuerda que puedes ver el ejemplo en funcionamiento en una pgina aparte.
Artculo por
Dairo Galeano
Iconos con jQuery Mobile

Para facilitar la creacin de interfaces grficas, jQuery Mobile incluye una gran gama de iconos prediseados, que podemos incluir en las pginas muy fcilmente. A lo largo del Manual de jQuery Mobile hemos visto que las capacidades de este framework son realmente sorprendentes. En artculos anteriores se han dado a conocer algunas de las bondades de estas libreras para el desarrollo de sitios web para dispositivos mviles. Hemos relatado el uso de diversos componentes de interfaz grfica de usuario, pero tambin existen otros modos interesantes de enriquecer visualmente nuestros widgets. En este artculo exploraremos una de las formas que ofrece jQuery Mobile para mejorar el diseo de las aplicaciones, de una manera sencilla, a travs de iconos que vienen prediseados dentro del mismo framework. El uso de estos elementos es algo que nos facilita mucho la vida a la hora de desarrollar sitios web, pues podemos hacer interfaces visualmente ms atractivas.
Agregar iconos a los componentes de interfaz grafica de usuario

Como hemos tratado de demostrar en artculos anteriores, jQuery Mobile ofrece muchas utilidades, y lo hace de una manera muy fcil. Es el caso de los iconos. Para hacer uso de ellos no es necesario de grandes configuraciones o lneas de cdigo Javascript solo un poco mas de HTML. Pues bien arranquemos con los iconos. Imaginen que tienen, un botn que nos enva a la pgina inicial de nuestra aplicacin web. Este botn se podra hacer ms atractivo y visual si ponemos un icono que represente el fin o el uso que tiene. Cul seria ese icono? Dnde conseguimos ese icono? Las dos preguntas o dudas las resuelve jQuery Mobile de manera sencilla. Primero el icono seria una casa que representa el home. Por supuesto, este icono viene incorporado dentro del framework. Respondiendo a la segunda pregunta, para hacer que nuestro botn tenga el icono de la casa, solo se necesita el siguiente cdigo:
<a href="#" data-role="button" data-icon="home" > Inicio</a>
Solo hay que agregar un nuevo atributo data-icon y asignarle el valor de "home". Con esto conseguimos que nuestro botn tenga un pequeo icono de una casa. Pero eso no es todo, jQuery Mobile dispone de iconos en varios colores y utilizar aquel que mejor se vea con el tema grfico que ests utilizando en tu aplicacin. Supongamos que tu botn tiene el tema "a", con el que conseguimos que elementos como botones sean de color negro. En ese caso el icono ser de color blanco, para que resalte. Ahora si tienes el tema "c", que es un color con tono muy bajo, el framework le asignar a nuestro botn un icono ms oscuro, siempre acorde al color del tema.

21
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com jQuery Mobile cuenta con una larga lista de iconos. Todos se indican a travs de distintos valores del atributo data-icon. Algunos ejemplos son los siguientes: Flecha hacia la izquierda: data-icon="arrow-l" Flecha hacia la derecha: data-icon="arrow-r" Flecha hacia arriba: data-icon="arrow-u" Flecha hacia abajo: data-icon="arrow-d" Eliminar: data-icon="delete" Mas: data-icon="plus" Menos: data-icon="minus"
Nota: Esta es solo una lista parcial, por mencionar algunos ejemplos. Si quieres saber la lista completa te invito a verla en la documentacin oficial de jQuery Mobile.
Posicin de los iconos

Por defecto jQuery Mobile, mostrara los iconos en la parte izquierda del botn, pero esa configuracin tambin se puede alterar a travs de un atributo en el cdigo HTML. Podemos observar el siguiente tag:
<a href="#" data-role="button" data-icon="plus" data-iconpos="bottom"> Inicio </a>
Como se puede ver, ahora usamos otro icono, con nombre "plus", adems en el cdigo HTML agregamos el atributo data-iconpos="bottom", para poner el icono bajo el texto. Este atributo puede recibir los siguientes valores para posicionar el icono: "top", "left", "right" y "bottom". Sobra la explicacin de los resultados que obtendremos con cada uno de ellos. Adems de los valores mencionados anteriormente, el atributo data-icon-pos puede recibir un quinto valor, el cual es: "notext", con el que eliminamos el texto de nuestro botn y solo aparecer el icono que le hayamos asignado. Ahora crearemos un botn que solo tendr nuestro icono, es decir, no aparecer el texto. Lo agregaremos dentro del header, con el fin de obtener un botn parecido al de la documentacin de jQuery Mobile, algo que conseguimos con el siguiente cdigo:
<a href="#" data-role="button" data-icon="home" data-iconpos="notext" class="ui-btnright">Inicio</a>
Como pueden ver, no solo lo dejamos sin texto, tambin le asignamos la clase CSS "ui-btn-right" con el fin de que aparezca a la derecha del header. Todo esto viene prediseado en el framework, solo debemos usarlo, a travs del HTML.
Dnde situar los archivos de los iconos jQuery Mobile

Los iconos son archivos grficos y por tanto, para que se vean en tu sitio web, tendrn que estar en algn lugar accesible por el navegador. En principio esa localizacin puede variar, atendiendo a dos posibles usos del framework. 1. Si estas trabajando con jQuery Mobile dentro de tu mismo servidor o de forma local (es decir, entraste a su web http://jquerymobile.com, bajaste el zip del framework para incluirlo en tus pginas), vers que dentro de la descarga hay una carpeta llamada "images", la cual debes incluir dentro del directorio de tu servidor donde has colocado el estilo CSS de jQuery Mobile. (El archivo de hojas de estilo de jQuery Mobile se llama algo como jquery.mobile-1.0.min.css). 2. Si estas trabajado con el CDN de jQuery Mobile, es decir, ests incluyendo tanto los estilos como los scripts Javascript a partir de la ruta absoluta del propio dominio del framework, no necesitas incluir las imgenes en ningn lugar. Es decir, los iconos se accedern directamente desde el servidor de jQuery Mobile y por tanto no necesitas copiarlos en tu espacio de hosting.

22
Poniendo todo junto

Para facilitar un poco las cosas voy a dejar un cdigo HTML, con una pagina web de ejemplo donde se usa todo lo explicado en este articulo. Debo mencionar que esta web, no hace nada especial solo demuestra el funcionamiento de los icono y todo lo expuesto en el presente articulo.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title>Iconos con jQuery Mobile</title> <link rel="stylesheet" href="jquery.mobile-1.0.min.css" /> <script src="jquery-1.7.1.min.js"></script> <script src="jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-theme="b"> <a href="#" data-role="button" data-icon="home" data-iconpos="notext" class="ui-btnright">Inicio</a> <h1>Uso de iconos con jQuery Mobile</h1> </div> <div data-role="content" data-theme="c"> <a href="#" data-role="button" data-icon="home" >Inicio</a> <a href="#" data-role="button" data-icon="plus" data-iconpos="bottom">Inicio</a> </div> <div data-role="footer" data-theme="b"> <h3>Uso de iconos con jQuery Mobile</h3> </div> </div> </body> </html>
El ejemplo en marcha se puede ver en una pgina aparte. Para terminar te invito a modificar el cdigo y obtener diferentes posiciones de los iconos, adems de probar otras imgenes de las que ofrece el framework.
Artculo por
Dairo Galeano
Las barras de navegacin y transiciones en jQuery Mobile

Artculo dedicado a las barras de navegacin, que conseguimos con el role navbar, y las transiciones entre pginas en jQuery Mobile. Una de las cosas que particularmente ms me han gustado de jQuery Mobile son las barras de navegacin, por ser extremadamente prcticas. Sirven precisamente para lo que su nombre indica, navegar, pero lo hacen de una manera magistral. Poseen un aspecto muy vistoso, adems de ciertas propiedades que podremos ajustar con el fin de hacerlas ms potentes. Para explicar las barras de navegacin vamos a realizar algo parecido al ejemplo desarrollado en el artculo donde hablamos sobre las listas, donde tenamos cuatro pginas dentro del mismo documento HTML. La primera es una pgina inicial y las otras tres sirven para mostrar la informacin adicional a la pagina. En este caso vamos a hacer el ejemplo de una pgina que hable sobre jQuery, otra pgina que hable de jQuery UI y una ltima sobre jQuery Mobile. La pgina inicial tendr solo una introduccin y la barra de navegacin para ir a las otras. Adems, para completar el artculo, veremos tambin algunas cosas interesantes de la configuracin de jQuery al respecto de las transiciones.

23
Agregando las barras de navegacin

Las barras de navegacin son algo parecidas a las pestaas, por eso lo ideal es ponerlas en el encabezado (elemento con data-role="header"), o en el pie de la pgina (elemento con data-role="footer"). Esto no es estrictamente necesario, pero hace que nuestra aplicacin est mejor organizada. En el caso del ejemplo de este artculo, pondremos la barra de navegacin en el pie de la pgina, algo que se logra con el siguiente cdigo:
<div data-role="navbar"> <ul> <li><a href="#jq" >jQuery</a></li> <li><a href="#jqui" >jQuery UI</a></li> <li><a href="#jqm">jQuery Mobile</a></li> </ul> </div>
Como debemos saber, si hemos seguido la marcha del Manual de jQuery Mobile, a todo lo que tiene que ver con los widgets del framework, debemos agregarle el atributo data-role. En este caso recibe el valor de "navbar". Adems, como se aprecia en el cdigo anterior, tenemos que crear una estructura en HTML, con un un elemento DIV, dentro del cual debe estar contenida una lista (Elemento UL). Pero atencin porque esta lista no organizar sus elementos uno debajo del otro, sino uno a continuacin del otro, es decir, crea una barra horizontal. En este momento, tal vez algunos lectores se preocupen por el espacio, en caso de que, al expandirse de forma horizontal, no quepan todos los elementos en las a menudo estrechas pantallas de los dispositivos. El problema lo resuelve jQuery Mobile de forma muy eficiente, ya que cada uno de los elementos tiene el mismo ancho, es decir que si tenemos dos elementos, cada uno tendr, la mitad del ancho de la barra, y si son tres entonces cada uno ser de un ancho igual a un tercio de la barra. Aun hay ms, pues si la pantalla es muy pequea, o son muchos elementos, entonces mostrara la barra en varias lneas, pasando de una fila de elementos a una rejilla o tabla.
Agregando temas
A lo largo del Manual de jQuery Mobile, hemos visto que para agregar temas a cualquiera de los widgets, presentes en el framework, solo debemos colocar el atributo data-theme. Sin embargo, en las barras de navegacin no funciona as. Es decir, si en nuestro elemento DIV hacemos esto, no se provocar ningn cambio. En cambio, si queremos que todos los elementos de la barra de navegacin se vean diferentes al que jQuery Mobile le asigna por defecto, debemos agregar el data-theme en el elemento que contiene a nuestra barra, que en este caso es el pie de la pgina. Si hacemos lo que se explicaba anteriormente terminaramos por construir un pie de pgina como el siguiente.
<div data-role="footer" data-position="fixed" data-theme="b"> <div data-role="navbar"> <ul> <li><a href="#jq" data-icon="star">jQuery</a></li> <li><a href="#jqui" data-icon="plus"> jQuery UI </a></li> <li><a href="#jqm" data-icon="grid"> jQuery Mobile </a></li> </ul> </div>  </div> 
Como puedes ver adems de agregar el tema "b" al pie de la pgina, con el que obtenemos el color azul, tambin le puse un icono a cada uno de los elementos que componen la barra de navegacin. Si no sabes cmo trabajar con iconos, revisa el artculo anterior del manual de jQuery Mobile donde nos dedicamos a explicar el tema de los iconos y sus configuraciones. Pero cabe resaltar que a cada uno de los elementos, puedes asignarle un tema diferente. Tal vez quieras que alguno resalte, como por ejemplo el que tiene el texto jQuery Mobile, algo que conseguimos con un cdigo como el siguiente.
<li><a href="# jqm" data-icon="grid" data-theme="e" data-transition="flip"> jQuery Mobile </a></li>
Ahora hemos agregado un data-theme a un solo elemento, pero quizs les llame la atencin, el atributo data-transition. Con esa configuracin logramos que al pasar de una pgina a otra se modifique la transicin normal que hace jQuery Mobile.

24
Transiciones entre pginas con jQuery Mobile

jQuery Mobile cuando se pasa de una pgina a otra, tanto si son archivos diferentes como si son pginas en el mismo documento HTML con la estructura multipgina, se produce una transicin automtica. Este asunto ya se haba comentado anteriormente en otros artculos de DesarrolloWeb.com, pero para los que no lo sepan todava, se trata de un efecto especial bastante atractivo, que mediante una animacin suavizada, nos intercambia la pgina que estamos visualizando. La transicin por defecto se puede cambiar por medio de atributos HTML de una manera muy sencilla. El atributo data-transition, con el cual modificamos las transiciones entre las paginas, o cuadros de dilogo, puede recibir los siguientes valores: Slide: la que se asigna por defecto. data-transition="slide" Slide Up: La pgina se perder por la parte superior. data-transition="slideup" Slide Down: La pgina se perder por la parte inferior. data-transition="slidedown" Pop: La pgina aparece de improvisto. data-transition="pop" Fade: Hace un efecto de fundido. data-transition="pop" Flip: La pgina hace un bonito efecto 3D. transition="flip"
Nota: La transicin flip no funciona muy bien en navegadores Firefox e Intenet Explorer. Si quieres ver el efecto debes probarlo en Google Chrome o Safari, tambin es diferente el efecto que se genera en los dispositivos Android 2.2, donde hemos probado el efecto y no es el resultado que se obtienen en dispositivos con iOS 4.x. En iOS 5.X funciona perfecto tambin.
Ejemplo de navegacin en una pgina web

Para mayor comprensin dejaremos el cdigo del ejemplo mencionado en este artculo. Por ahorrar un poco de espacio solo he colocado el cdigo de las dos primeras pginas. Tendremos una barra de navegacin en la pgina inicial. Debo mencionar que la pgina no cumple grandes tareas funcionales, pero ilustra el uso de las barras de navegacin, adems de las transiciones de pginas. <!DOCTYPE html>
<html> <head> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title> Barras de Navegacion</title> <link rel="stylesheet" href="jquery.mobile-1.0.min.css" /> <script src="jquery-1.7.1.min.js"></script> <script src="jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" id="inicio"> <div data-role="header" data-position="fixed"> <h1>jQuery</h1> </div> <div data-role="content"> <p>Navega a travs de esta aplicacin de DesarrolloWeb.com para conocer algo sobre jQuery</p> </div> <div data-role="footer" data-position="fixed" data-theme="b"> <div data-role="navbar"> <ul> <li><a href="#jq" data-icon="star" data-transition="pop">jQuery</a></li> <li><a href="#jqui" data-icon="plus" data-transition="slideup"> jQuery UI </a></li> <li><a href="#jqm" data-icon="grid" data-theme="e" data-transition="flip"> jQuery Mobile </a></li> </ul> </div> </div> </div> <div data-role="page" id="jqm"> <div data-role="header" data-position="fixed"> <h1>jQuery Mobile</h1><a href="#inicio" data-role="button" data-icon="home" dataiconpos="notext" class="ui-btn-right">Inicio</a>

25

</div> <div data-role="content"> <p>Lectura inicial de la web oficial de jQuery Mobile:</br> <span class="ui-btn-active"> jQuery Mobile: framework para mviles.</span> </p> <img style="width:30%;" src="http://upload.wikimedia.org/wikipedia/commons/5/53/Jquerymobile-logo.png"/> </div> <div data-role="footer" data-position="fixed" data-theme="b"> <h3>jQuery Mobile</h3> </div> </div> </body> </html>
Con todo esto hemos aprendido dos tpicos de jQuery Mobile. Por un lado las mencionadas barras de navegacin, pero tambin hemos dado un primer repaso a las transiciones entre pginas. Nos vemos en una prxima, recuerda dejar tus comentarios y apuntes. De tarea te queda hacer las dos pginas restantes, o bien puedes verlas ya realizadas en el ejemplo completo en una pgina aparte.
Artculo por
Dairo Galeano
Elemento Slider de jQuery Mobile

Con jQuery Mobile obtenemos elegantes sliders e interruptores, con los que podemos enriquecer visualmente nuestras aplicaciones mviles. Hasta ahora en el Manual de jQuery Mobile hemos aprendido a implementar variados componentes de interfaz de usuario, que se pueden crear a travs del atributo data-role. Como se habr podido comprobar, a partir de diversos atributos con el prefino "data-" se pueden optimizar elementos HTML sencillos, y mediante jQuery Mobile convertirlos en elegantes widgets. Lo mejor es que todo se realiza de una forma automatizada y sin necesidad de programacin. Como todos sabemos, tambin HTML posee de diversos componentes de interfaz grfica de usuario, que por lo general vienen incluidos dentro de los formularios. Adems, ahora, con la versin cinco del lenguaje de la web, disponemos de algunos elementos de formulario adicionales, que en general extienden los INPUT de toda la vida. Se trata de una nueva gama de types diferentes, es decir, diversos tipos de campos INPUT, y dentro de stos, aparecen los sliders. Los sliders son una interfaz grfica de usuario que nos permiten por medio de un elemento deslizable, ajustar un valor entre un rango. Ahora bien, quizs muchos de vosotros os preguntaris Si podemos crear sliders con HTML5, para que necesitamos a jQuery Mobile? Si bien con HTML 5 se pueden crear sliders, estos cuentan con la forma o apariencia convencional, as que si lo que queremos es romper un poco el esquema debemos recurrir a jQuery Mobile, para la creacin de sliders ms sofisticados, con nuevas funcionalidades y capacidades de personalizacin. Por si esto te parece poco, quizs acabe de convencerte esta posibilidad, de expandir los elementos slider, si sabes que realmente no necesitas configurar practivamente nada en jQuery Mobile, ya que la filosofa del framework es realizar ms cosas con menos esfuerzo.
Modos de creacin de los sliders con jQuery Mobile

Para la creacin de sliders con jQuery Mobile, disponemos de opciones, con una estructura muy sencilla, adems de otras opciones de configuracin visual. Arranquemos con la creacin ms sencilla, en donde solo debemos crear elementos INPUT, ya que jQuery Mobile se encargar de aplicarles el tema grfico correspondiente, dependiendo del valor que posea su atributo type. As, para crear un slider solo debemos escribir el siguiente cdigo.
<label for="slider">Slider Simple: </label>

26

<input type="range" name="slider" id="slider" max="100" min="1" value="25" />
Como puedes ver, es solo un elemento INPUT (ya que el label realmente no forma parte del slider, simplemente coloca un texto al lado). Ser jQuery Mobile el que se tome el trabajo de agregar el CSS correspondiente para que funcione de manera eficiente.
Nota: Para quienes no estn relacionados con este nuevo INPUT de HTML5, cabe comentar que las nuevas especificaciones del lenguaje de la web contienen 13 nuevos tipos de campos INPUT. Cada uno de estos nuevos INPUT son importantes sobre todo, para dispositivos tctiles, ya que dependiendo del tipo de input aparecer un teclado virtual acorde para rellenar el campo. Podremos encontrar, entre otros, campos especficos para:
Input type=tel: Formato para nmeros de telfonos. Input type=search: Formato para campos de bsqueda. Input type=url: Formato para escribir direcciones web. Input type=number: Formato para escribir valores numricos. Input type=email: Formato para direcciones de email. Input type=range: Con este trabajamos en el presente articulo. Input type=datetime: til para fechas y horas.
Para vuestra informacin, estamos preparando documentacin sobre este asunto que pronto aparecer en DesarrolloWeb.com.
La etiqueta HTML, como has visto, no tiene cdigo Javascript por ninguna parte. Es decir, jQuery Mobile lo implementa todo sin que debas preocuparte de nada. Sin embargo, debes tener en cuenta que el slider se cree a partir de un elemento INPUT, pues, de no hacer esto, el funcionamiento del slider no estara garantizado. Las otras opciones que tenemos a disposicin de los sliders estn relacionadas con los aspectos visuales del widget. Como ya podemos saber, disponemos del atributo data-theme para modificar el color de los componentes. Adicionalmente, los slider cuentan tambin con data-track-theme. As que si lo que queremos es un slider con variedad de colores tanto en el control que se desliza como en la ruta por donde pasa el control, necesitaramos un cdigo como el siguiente:
<label for="slider1">Slider Simple con temas: </label> <input type="range" name="slider1" id="slider1" max="100" min="1" value="40" data-theme="b" datatrack-theme="a"/>
Como se puede notar ahora hemos cambiado los atributos antes mencionados, lo cual no requiere mayor explicacin si has seguido el Manual de jQuery Mobile hasta este punto.
Hacer botones de opciones binarias o interruptores

Existen unos componentes de interfaz grfica que son parecidos a los slider, pero que solo tienen dos estados. Se denominan interruptores y quizs podamos haberlos visto en funcionamiento en aplicaciones para dispositivos mviles. Con un interruptor tenemos dos opciones: los podemos activar o desactivar. Con ello podemos configurar alguna funcin en el dispositivo o en la aplicacin web que estemos desarrollando. Normalmente un slider lo crearemos a partir de una etiqueta INPUT, tal como se explic hace unos instantes. No obstante, cuando se trata de crear interruptores, se utiliza un elemento SELECT, aunque el valor de data-roler continua

27
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com siendo "slider". Veamos un cdigo de ejemplo con el cual podemos crear uno de estos interruptores.
<select name="slider" id="flip1" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select>
Como se puede ver, es un elemento SELECT con el atributo data-role, al cual asignamos el valor "slider". Adems, cabe fijarse tambin en los dos elementos OPTION, que expresan los distintos estados del interruptor. Para indicar a jQuery Mobile cuando est encendido y cuando est apagado debemos configurar los value de los OPTION. Puedes ver en el cdigo de ejemplo los valores en el atributo value, "off" en el primero y "on" en el segundo.
Nota: Si haces ms OPTION de los debidos, jQuery Mobile creara el slider de todas formas, pero no ser nada agradable el resultado, obtendrs las tres opciones, pero enredadas. De igual forma, si no le das por ejemplo el valor al atributo value de la opcin de encendido, el interruptor no funcionar.
A la hora de crea un interruptor tambin lo puedes personalizar, con los temas que disponemos en el framework. Para esta tarea disponemos del atributo data-theme, dejando a JQuery Mobile framework la tarea de hacer la combinacin de temas entre las dos opciones.
Conclusin
Con el fin de obtener componentes mas vistosos y uniformes, ser el propio framework quien se encargue que la configuracin visual de cada uno de los elementos INPUT que se implementen en modo de slider. Por tanto, nuestra tarea de codificacin se queda en ms bien poco. No obstante, como de costumbre, dejamos el cdigo de un ejemplo completo, con todo lo explicado en este articulo.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title>Sliders con jQuery Mobile</title> <link rel="stylesheet" href="jquery.mobile-1.0.min.css" /> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Sliders</h1> </div> <div data-role="content"> <div data-role="content"> <form action="#" method="get"> <div data-role="fieldcontain"> <label for="slider">Slider Simple: </label> <input type="range" name="slider" id="slider" max="100" min="1" value="25" /> <br> <label for="slider1">Slider Simple con temas: </label> <input type="range" name="slider1" id="slider1" max="100" min="1" value="40" data-theme="b" data-track-theme="a"/> <br> <label for="flip1">Seleccionar una de dos opciones</label> <select name="slider" id="flip1" data-role="slider"> <option value="off">Off</option> <option value="o">On</option> </select> </div> </form> </div> <div data-role="footer"> <h3>Sliders</h3> </div>

28

</div> </div> </body> </html>
Recuerda que tambin puedes ver el ejemplo en una pgina aparte, para comprobar su funcionamiento. Hasta una prxima entrega.
Artculo por
Dairo Galeano
Elementos Collapsible de jQuery Mobile

Uno de los widgets extraordinariamente atractivos que podemos encontrar en jQuery Mobile son los collapsible. Te explicamos cmo funcionan. Los elementos Collapsible de jQuery Mobile, son widgets bastante tiles, aunque algunos no sepan cmo usarlos. Es por ello que voy a comentar por brindar una breve explicacin sobre este componente de interfaz grfica de usuario. Un collapsible, es un elemento que posee una barra con un ttulo, que va a responder a eventos del usuario. As, cuando se haga clic o tab -en caso de los eventos touch-, este abrir o cerrar un panel con cualquier contenido que se haya puesto all. En el caso del Collapsible que se genera con jQuery Mobile, adems de crear la barra, pone el icono de mas "+" cuando el panel est cerrado (es decir, data-icon="plus"), y el menos (data-icon="minus") cuando el contenido esta abierto. Todo esto lo hace jQuery Mobile de forma automtica, limpia y rpida. Debes tener en cuenta que la palabra collapsible en espaol significa desplegable, pero para no llevarnos a engao con los clsicos elementos de formulario desplegables, en este artculo usaremos el trmino en ingls.
Creacin simple de elementos Collapsible

Los elementos Collapsible, requieren cierta configuracin, o ms bien ciertos requisitos de elementos HTML. Cuando se crea el Collapsible, con un esquema de etiquetas HTML bien construido, nos aseguramos que jQuery Mobile haga su tarea de forma eficiente. Para comenzar, necesitamos un elemento DIV, que debe tener, como muchos otros widgets vistos en el manual de jQuery Mobile, el atributo data-rolecon el valor "collapsible".
Nota: Adems existen otros requerimientos, que explicaremos despus de ver el siguiente cdigo
A continuacin podemos ver cmo se crea un elemento collapsible.

<div data-role="collapsible"> <h3>Elemento Collapsible simple</h3> <p>Este es el contenido del collapsible el cual podemos ocultar</p> </div>
Como puedes observar en el cdigo anterior, dentro del elemento DIV debemos hacer un encabezado, que ser el ttulo del collapasible. A continuacin hacemos un prrafo dentro del DIV, el cual es el contenido del elemento, donde podemos insertar cualquier etiqueta HTML como contenido. Por defecto, el collapasible aparece recogido, pero si se requiere podemos configurar el widget para que aparezca abierto al cargar la pgina. Para ello solo hay que agregar el atributo data-collapsed, que recibe un valor booleano. La forma de usarlo es muy simple y se puede apreciar en el siguiente cdigo.
<div data-role="collapsible" data-collapsed="false"> <h3>Elemento Collapsible abierto</h3> <p>Este es el contenido del collapsible el cual podemos ocultar</p>

29

<a href="#" data-role="button" data-inline="true">hola</a> </div>
Con esto estamos creando un collapsible que al cargar la pgina est abierto. Adems quise agregar un botn, algo que ya hemos aprendidos en artculos pasados del manual de jQuery Mobile, para ilustrar que podemos meter cualquier elemento dentro de este widget. Por rizar el rizo, podramos insertar hasta otro collapsible dentro del primero.
Temas grficos en collapsible

A lo largo del manual de jQuery Mobile, se ha podido apreciar el uso de los temas prediseados en el framework, que permiten aportar mayor variedad esttica a los componentes de interfaz grfica. En los temas podemos colocar diversos colores y efectos. Revisa el manual para encontrar ms informacin sobre los temas, porque de momento en este artculo solo veremos lo relevante al widget. Adicionalmente al atributo data-theme, los collapsible, tienen otro atributo para trabajar su configuracin visual. Se trata de data-content-theme, con el que podemos asignar un tema diferente al contenido del elemento. Es decir, mientras el encabezado o la barra donde est el ttulo, tendr asignado el tema que modificamos con data-theme, podremos asignar por separado un tema al cuerpo con data-content-theme. Este interesante detalle lo podemos ver con el siguiente cdigo.
<div data-role="collapsible" data-theme="a" data-content-theme="e"> <h3>Encabezado con tema A</h3> <p>ENota:l contenido tiene el tema e</p> <div data-role="collapsible" data-content-theme="a"> <h3>Collapsible dentro de otro</h3> <p>En este caso vemos que este esta dentro de otro</p> </div> </div>
Como se puede apreciar, tambin est inmerso un collapsible, cada uno puede tener sus temas diferentes, aunque tambin se puede trabajar con el tema que tiene el collapsible padre.
Crear un acorden con collapsible

Otro de los atractivos que tiene el elemento collapsible, es el hecho de poder convertirlo en un acorden. Se trata de un componente donde podemos encontrar varios paneles unidos y relacionados entre s, de modo que al abrirse uno, todos los dems se cerrarn. En un acorden se mantendr visible solo uno de los elementos que lo compone. Este widget, o componente de interfaz grfica de usuario, se encuentra disponible en jQueryUI, pero cabe aclarar que la forma de creacin de jQuery Mobile es diferente. En este caso se simplifica todo, adems de auto-inicializar, cada uno de los widgets que se han creado con data-role. Siguiendo el camino de jQuery Mobile framework, es importante decir que para la creacin de acordeones disponemos de un valor ?collapsible-set? que se le puede dar a un DIV con el atributo data-role. Esto se ve reflejado en el siguiente cdigo.
<div data-role="collapsible-set" > </div>
Dentro de este elemento DIV agregamos todos los collapsibles que deseemos, haciendo que cada uno se comporte como un elemento del acorden. Como puedes imaginar, a los acordeones tambin se les puede aplicar temas grficos con data-theme o data-content-theme, para que cada uno de sus elementos tenga el mismo color. Aunque tambin puedes asignar un tema diferente a cada uno de los elementos. Para mayor claridad de todo lo explicado en este artculo veamos el cdigo completo de una pequea aplicacin web mvil que ilustra el uso de collapsible.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title>Collapsible con jQuery Mobile</title>

30

<link rel="stylesheet" href="jquery.mobile-1.0.min.css" /> <script src="jquery-1.7.1.min.js"></script> <script src="jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-theme="b"> <h1>Elementos Collaspsible</h1> </div> <div data-role="content"> <div data-role="collapsible"> <h3>Elemento Collapsible simple</h3> <p>Este es el contenido del collapsible el cual podemos ocultar</p> </div> <div data-role="collapsible" data-collapsed="false"> <h3>Elemento Collapsible abierto</h3> <p>Este es el contenido del collapsible el cual podemos ocultar</p> <a href="#" data-role="button" data-inline="true">hola</a> </div> <div data-role="collapsible" data-theme="a" data-content-theme="e"> <h3>Encabezado con tema A</h3> <p>El contenido tiene el tema e</p> <div data-role="collapsible" data-content-theme="a"> <h3>Collapsible dentro de otro</h3> <p>En este caso vemos que este esta dentro de otro</p> </div> </div> <div data-role="collapsible-set" data-theme="e" data-content-theme="a"> <div data-role="collapsible"> <h3>Primer elemento del acordeon</h3> <p>Ahora estamos viendo el lemento tres del acordeon</p> </div> <div data-role="collapsible" > <h3>Segundo elemento del acordeon</h3> <p>Ahora estamos viendo el lemento tres del acordeon</p> </div> <div data-role="collapsible" data-theme="a" data-content-theme="b"> <h3>Tercer elemento del acordeon con tema diferente</h3> <p>Ahora estamos viendo el lemento tres del acordeon tambien tiene contenido con otro tema</p> </div> </div> </div> <div data-role="footer"> <h3> Elementos Collaspsible</h3> </div> </div> </body> </html>
Recuerda que tambin puedes ver un ejemplo en funcionamiento en una pgina aparte.
Artculo por
Dairo Galeano

31
Hacer columnas y grillas con jQuery Mobile

Creacin de documentos web con grillas o contenidos dispuestos en columnas mediante jQuery Mobile. Todas las aplicaciones de jQuery Mobile estn diseadas para trabajar en resoluciones de pantallas variadas. Por esta razn, cuando creamos una lista, esta ocupa toda la pantalla, a menos que nosotros la cambiemos. Sin embargo, en algunos momentos, tal vez deseemos dividir los contenidos en columnas. Como bien sabemos, con CSS podemos implementar esa divisin en columnas, pero como la labor de jQuery Mobile es ahorrarnos trabajo, las disearemos de una manera ms sencilla gracias a l. As que, si lo que tenemos pensado es hacer una aplicacin web para dispositivos mviles en donde su contenido est dividido en columnas, jQuery Mobile te ayudar de manera muy eficiente. En este artculo del Manual de jQuery Mobile exploraremos la creacin de columnas, mediante la grilla que nos ofrece el framework para maquetar contenidos.
Creacin de columnas en una aplicacin jQuery Mobile

Imagina que un da tienes la necesidad de hacer unas columnas en tu aplicacin web mvil, como en los peridicos. Si deseas recurrir a la ayuda que te brinda jQuery Mobile, podrs dividir esos contenidos en dos, tres y hasta cinco columnas! Obviamente, en algunos tipos de aplicaciones y dispositivos, la usabilidad no saldr beneficiada al utilizar hasta 5 columnas, pero al menos lo permite el framework. Otro aspecto interesante es que no tienes que dividir en columnas toda la pgina web, sino simplemente algunas secciones de ella. Pero dejmonos de hablar y veamos ya mismo el cdigo para crear dos columnas en nuestra pgina web mvil.
<div class="ui-grid-a"> <div class="ui-block-a"><strong>Esta es la columna numero 1</strong> El texto que se ecriba aqu se amoldar a la mitad de pagina.</div> <div class="ui-block-b"><strong>Esta es la columna numero 2</strong> El texto que se ecriba aqu se amoldar a la otra mitad de pagina.</div> </div>
Lo primero que hacemos es crear un elemento DIV, que tendr como clase CSS, "ui-grid-a". Con tal clase le indicamos al framework que justo all inicia nuestra grilla, que en este caso es de dos columnas. Como dije anteriormente no solo pueden tener dos columnas, pues podremos crear grilla que tengan hasta cinco. Para especificar las columnas que deseamos implementar estn las siguientes clases. Para grillas con dos columnas le asignamos la clase: ui-grid-a. Para grillas con tres columnas le asignamos la clase: ui-grid-b. Para grillas con cuatro columnas le asignamos la clase: ui-grid-c. Para grillas con cinco columnas le asignamos la clase: ui-grid-d.
Una vez establecida la grilla, debemos proceder con la creacin de los bloques, uno por columna. En el cdigo anterior son dos bloques, cuya creacin se logra tambin con la asignacin de clases CSS. Como se habr podido observar, asignamos al primer elemento DIV la clase "ui-block-a", mientras el segundo tiene "ui-block-b". Al igual que con las grillas, lo bloques van aumentando de acuerdo con el nmero que hayamos establecido en la grilla. Solo debemos cambiar la ltima letra. Para crear el primer bloque usamos la clase ui-bloc-a. Para crear el segundo bloque usamos la clase ui-bloc-b. Para crear el tercer bloque usamos la clase ui-bloc-c. Para crear el cuarto bloque usamos la clase ui-bloc-d. Para crear el quinto bloque usamos la clase ui-bloc-e.
Cada uno de los bloques, tiene el mismo ancho, algo parecido a lo que pasa con las barras de navegacin explicadas en un artculo anterior del manual de jQuery Mobile. As que si tenemos cinco columnas, cada uno de los bloques, tendr el 20% de ancho del documento web o elemento contenedor de la grilla.

32
Hacer Grillas con temas

Hasta este punto del manual de jQuery Mobile, ya debes saber que para agregar temas, a cualquier widget del framework, debemos agregar el atributo data-theme. Sin embargo, esto no es as con las grillas, bsicamente porque stas no son widgets. Debemos hacer un cdigo como el siguiente, que se debe escribir incluso antes de crear los bloques.
<div class="ui-grid-a"> <div class="ui-bar ui-bar-e> Con ello logramos que todos los bloques de nuestra grilla tengan colores uniformes. Sin embargo Qu pasa en el momento en que deseemos tener bloques con colores diferentes? pues bien, en este caso debemos hacer lo mismo, un nuevo elemento DIV, con las clases, ui-bar, para indicar que es una barra, y ui-bar-b, la cual asigna color al bloque o la grilla. En este caso el cdigo que obtendremos ser el siguiente: <div class="ui-grid-a"> <div class="ui-block-a" > <div class="ui-bar ui-bar-e"> <strong>Esta es la columna numero 1</strong>Con color amarillo </div> </div> <div class="ui-block-b"> <div class="ui-bar ui-bar-b"> <strong>Esta es la columna numero 2</strong> Con color azul </div> </div> </div>
Ahora obtenemos dos columnas, la primera tiene un color amarillo, asignado por el tema "e", mientras que la segunda tiene es azul, al tener asignado el tema "e".
Nota: Las clases para darle color a las columnas y grillas, tambin se pueden poner en elemento div, que tienen las clases "ui-drid-a" o "ui-bloc-a", pero la documentacin de jQuery Mobile no lo recomienda.
Crear mltiples Filas

Con lo que hemos hecho hasta ahora solo hemos creado columnas. Para que estas columnas se conviertan en grillas, debemos tener ms de una fila, de lo contrario solo tendremos columnas. Para crear el aspecto de una grilla hacemos el siguiente cdigo:
<div class="ui-grid-a"> <div class="ui-block-a" > <div class="ui-bar ui-bar-e"> <strong>Esta es la columna numero 1</strong> El texto que se ecriba aqui se almodar a la mitad de pagina. </div> </div> <div class="ui-block-b"> <div class="ui-bar ui-bar-a"> <strong>Esta es la columna numero 2</strong> El texto que se ecriba aqui se almodar a la otra mitad de pagina. </div> </div> <div class="ui-block-a" > <div class="ui-bar ui-bar-c"> <strong>Esta es la columna numero 1</strong> El texto que se ecriba aqui se almodar a la mitad de pagina. </div> </div> <div class="ui-block-b"> <div class="ui-bar ui-bar-b"> <strong>Esta es la columna numero 2</strong> El texto que se ecriba aqui se almodar a la otra mitad de pagina. </div> </div> </div>

33
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Slo debemos crear dos bloques mas, despus de los inciales, es decir, que si nuestra grilla es de tres columnas, debemos crear seis bloques para obtener dos filas. Para mayor claridad dejo un cdigo de ejemplo con todo lo visto en el presente artculo.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title>Culumnas con JQM</title> <link rel="stylesheet" href="jquery.mobile-1.0.min.css" /> <script src="jquery-1.7.1.min.js"></script> <script src="jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" id="inicio"> <div data-role="header" data-position="fixed"> <h1>Columnas</h1> </div> <div data-role="content" > <span class="ui-btn-active">Dos columnas simples</span> <div class="ui-grid-a"> <div class="ui-block-a" > <div class="ui-bar ui-bar-e"> <strong>Esta es la columna numero 1</strong> El texto que se ecriba aqui se almodar a la mitad de pagina. </div> </div> <div class="ui-block-b"> <div class="ui-bar ui-bar-b"> <strong>Esta es la columna numero 2</strong> El texto que se ecriba aqui se almodar a la otra mitad de pagina. </div> </div> </div> <br> <span class="ui-btn-active">Dos columnas simples con dos filas</span> <div class="ui-grid-a"> <div class="ui-block-a" > <div class="ui-bar ui-bar-e"> <strong>Esta es la columna numero 1</strong> El texto que se ecriba aqui se almodar a la mitad de pagina. </div> </div> <div class="ui-block-b"> <div class="ui-bar ui-bar-a"> <strong>Esta es la columna numero 2</strong> El texto que se ecriba aqui se almodar a la otra mitad de pagina. </div> </div> <div class="ui-block-a" > <div class="ui-bar ui-bar-c"> <strong>Esta es la columna numero 1</strong> El texto que se ecriba aqui se almodar a la mitad de pagina. </div> </div> <div class="ui-block-b"> <div class="ui-bar ui-bar-b"> <strong>Esta es la columna numero 2</strong> El texto que se ecriba aqui se almodar a la otra mitad de pagina. </div> </div> </div>

34
</div> <div data-role="footer" data-position="fixed"> <h3>Grillas</h3> </div> </div> </body> </html>
Tambin puedes ver el ejemplo en marcha en una pgina aparte, donde podrs apreciar las tres columnas tambin, adems de las tres filas, cdigo que no dejo completo, para no redundar mucho, as que si lo quieres puedes ver el cdigo fuente del ejemplo.
Artculo por
Dairo Galeano
Crear temas personalizados para tus aplicaciones jQuery Mobile

El equipo de jQuery Mobile, pone a disposicin una herramienta con la cual, podemos crear temas personalizados para las aplicaciones basadas en el framework. Quizs algunos de vosotros ya esteis pensando que todas las aplicaciones jQuery Mobile disponen de muy pocos temas de personalizacin visual para los widgets. Esto lo podra pensar alguien con experiencia en otras herramientas del equipo de jQuery, que recordar la gran variedad de temas que nos brindaba jQuery UI. Sin embargo, a lo largo del Manual de jQuery Mobile, hemos repetido en numerosas ocasiones que este framework para desarrollo de aplicaciones para mviles slo contaba con cinco temas predefinidos. La ventaja con jQuery Mobile es que los cinco temas vienen inmersos dentro de un mismo archivo CSS, una misma hoja de estilos que incluimos una nica vez al insertar el framework en el HEAD de la pgina. Sin embargo, se recordar que en jQuery UI cada tema era un archivo CSS diferente. No obstante, podemos afirmar que cinco look&feels en el archivo CSS bsico de jQuery Mobile no cubren toda la necesidad que desarrolladores y diseadores mas exigentes puedan tener. Tal vez, a vosotros no os guste tanto el color azul como a mi, prefirais el verde o el rojo, pero ninguno de estos dos colores estn presentes en los temas que vienen prediseados en el framework. Para quienes estn pensando que para crear temas personalizados para nuestras aplicaciones jQuery Mobile, necesitamos grandes conocimientos en CCS3, quiero decirles que se equivocan. No se requiere hacer nada de cdigo y todo es mas fcil de lo que parece. Adems, como veremos a continuacin, a golpe de ratn obtenemos unos excelentes resultados, a los que nos tiene muy acostumbrados el framework. Es decir, siempre se trata de crear grandes cosas con mucha facilidad, o ms bien, con extraordinaria simplicidad.
Creando el nuevo tema en jQuery Mobile

Como deca anteriormente, no necesitamos grandes conocimientos en CSS3 para crear nuestros propios temas para aplicaciones jQuery Mobile. Para eso, en la misma pgina oficial del framework, disponemos de una herramienta online, llamada ThemeRoller. Con esta herramienta tenemos a la mano una forma fcil de crear nuestros propios temas. Se encuentra disponible en la siguiente direccin web: jquerymobile.com/themeroller Inicialmente ThemeRoller nos da la bienvenida a travs de un mensaje de dialogo. Ponen a nuestra disposicin una barra lateral, donde podemos ver cada una de las propiedades globales del nuevo tema, adems de ver las modificaciones que podemos hacer a temas por separados, dependiendo de su valor en letras.

35
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Para arrancar, tenemos tres temas que van de la A a la C, pero podemos ir agregando ms segn nuestras necesidades. As que si quieres crear una aplicacin muy variada en colores, puedes hacer temas hasta llegar a letra Z. En las opciones que tenemos para las configuraciones globales podemos hacer cambios como: Cambiar el tipo de la fuente Cambiar el radio de los bordes Modificar el color de los iconos y muchas otras cosas...
Ya solo es cuestin de qu necedades tengas o la forma en que quieras que se vean tus aplicaciones. Despus, puedes ir modificando uno a uno los temas, dentro de los cuales ya encontramos configuraciones ms particulares. En el centro de la pgina contamos con un visualizador de cada uno de los temas, donde podemos ver en tiempo real los cambios que estamos creando en nuestro tema actual. sto nos ayuda a orientarnos sobre los resultados finales que obtendremos, mostrndonos diferentes widgets que maneja el framework, como listas, botones, barras entre otros.
Creando nuestro tema personalizado

Como comentaba anteriormente, en el framework no vienen incluidos widgets de color rojo ni verdes, as que vamos a darles esos colores con el fin de obtener una variedad de temas ms amplios. Para tal motivo vamos a trabajar partiendo como base de los temas que vienen incluidos dentro de jQuery Mobile. Si ya ha visitado la aplicacin ThemeRoller, te dars cuenta de que inicialmente no nos ofrece los temas incorporados en el framework, as que lo primero que hay que hacer es incorporar dichos temas. Logramos eso dando clic en la opcin "import", donde obtendremos un dilogo en el cual podemos escoger la opcin "import default theme". De forma automtica aparece en el textarea todo el cdigo CSS que incorpora jQuery Mobile, por ltimo, al dar clic en "import" del dialogo, visualizaremos cada uno de los temas presentes en el framework. En mi caso particular, lo que hice fue modificar los temas D y C que vienen en el framework, cada tema de forma individual tiene las siguientes secciones para ser modificadas: Header/ Foteer Bar Content/ Body Button: Normal Button: Hover Button: Pressed
Como veis, las secciones son muy ilustrativas y no se requieren grandes configuraciones, pues todo est servido para hacerlo de manera grfica, manejando los colores a travs de paletas donde podemos seleccionarlos y muchas otras cosas que convierten a ThemeRoller en una herramienta muy til. Para solucionar el problema antes planteado de la ausencia de colores como el rojo o el verde, debemos simplemente crear un tema personalizadom donde incluimos esos colores, adems de agregar un sexto tema.
Agregando el nuevo tema a mis aplicaciones

Una vez hemos hecho las modificaciones y temas que necesitamos para nuestras nuevas aplicaciones, procedemos a descargar el tema que estamos creando con ThemeRoller, haciendo clic Download Theme. En el dilogo te dice la forma en que debes incluir tu estilo creado, adems de darle un nombre. Puedes copiar el cdigo que aparece en el dilogo de descarga, para incluir tu tema. Claro, que tambin debes cambiar el nombre que aparece all (my-custom-theme.css), por el nombre que t le has asignado. Al descomprimir el archivo .zip del tema que creamos con ThemeRoller, podemos ver que viene incluido un ejemplo, donde ya se est trabajando con nuestro tema. Podemos observar que parte de la cabecera de ese documento HTML est compuesto de la siguiente forma.

36

<link rel="stylesheet" href="themes/tema-personalizado.min.css" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
En este caso, estamos usando para el tema modificado el nombre "tema-personalizado", en su versin comprimida, pues en la carpeta de themes dentro del .zip encontramos dos archivos CSS para el mismo tema. Otro caso particular es que no se usa el archivo "jquery.mobile-1.0.min.css", sino uno con un nombre "jquery.mobile.structure-1.0.min.css". Este archivo es muy importante, pues al no incluirlo no funcionar el ejemplo. Ese archivo tambin se descarga junto con el .zip que obtenemos al descargar jQuery Mobile, as que puedes tambin ponerlo a trabajar de forma local, sin necesidad de usar el CDN. Para terminar nos gustara deciros que un buen diseo con ThemeRoller depende del empeo, por eso te invitamos a trabajar con l, para obtener aplicaciones jQuery Mobile ms personalizadas.
Artculo por
Dairo Galeano

37

Manual Jquery Mobile PDF

Cargado por

Copyright:

Formatos disponibles

Manual Jquery Mobile PDF

Cargado por

Información del documento

Título original

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

Manual Jquery Mobile PDF

Cargado por

Copyright:

Formatos disponibles

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.

Manual de jQuery Mobile

Autores del manual

Director de DesarrolloWeb.com http://www.desarrolloweb.com (3 captulos)

Desarrollador independiente (10 captulos)

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Introduccin a jQuery Mobile

jQuery se reinventa a si mismo

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Caractersticas de jQuery Mobile

Compatible con el mayor nmero de plataformas

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Introduccin a jQuery Mobile en vdeo

Miguel Angel Alvarez

Configuraciones por defecto de jQuery Mobile

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Mencin de las opciones por defecto de jQuery Mobile

Cambiar las transiciones por defecto de pginas y dilogos

Con esto todas nuestras pginas harn la transicin flip.

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Modificar y Mostrar los Toask relacionados con AJAX

Poniendo todo en un solo ejemplo

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Pgina bsica en jQuery Mobile Framework

Cdigo HTML de la pgina bsica

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Etiqueta META Viewport

Incluir los scripts del framework

Definir la estructura de pgina y los data-role

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

El cuerpo de la pgina lo colocamos con un data-role="content".

Finalmente, el pie de pgina se indica con un data-role="footer".

Miguel Angel Alvarez

Estructura multipgina de jQuery Mobile

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Multipgina es la unin de varias pginas bsicas

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Enlaces entre las pginas de la estructura multipgina

Ttulos de las pginas

<a href="#comprar" data-rel="dialog">comprar una guitarra</a>

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Miguel Angel Alvarez

Crear Botones con jQuery Mobile

Un Botn simple de jQuery Mobile

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html

Modificar las propiedades por defecto de los botones de jQuery Mobile

Manual jQuery Mobile:desarrolloweb.com/manuales/manual-jquery-mobile.html