Probablemente tienes uno en tu bolsa, o puedes estar hablándole, o puedes estar jugando en el, es un Smartphone. La categoría de Smartphone parece ser bastante amplia -es un teléfono Android, un dispositivo iOS de Apple, un teléfono BlackBerry o algo más? Para darte una prueba, aquí hay una lista de algunos dispositivos móviles que están en la categoría de Smartphone:
- Apple iPhone/iPod Touch
- Google Android
- RIM BlackBerry/Playbook OS
- Nokia Symbian (retirado, pero aún tiene casi 1 billón de usuarios en el mundo)
- HP/Palm WebOS
- Microsoft Window Phone 7
El reto que tienes es un vasto número de diferentes sistemas y soporte fragmentado de los estándares. Por ejemplo, el último iPhone de Apple tiene un soporte impresionante para estándares de HTML5, mientras que Symbian y la Microsoft Phone actualmente tienen poco o nada. Para permitirte crear sitios web para dispositivos móviles, la comunidad jQuery ha estado trabajando en un framework que puedes aprovechar, se llama jQuery Mobile. Este artículo te proporciona una introducción a este nuevo framework, el cual aun esta en versión alfa; y te ayudará a iniciar tus habilidades de desarrollo con jQuery Mobile.
Desarrollando sitios web con jQuery Mobile
Desarrollar sitios web ya no es un elemento en la lista de deseos para el equipo de diseño web -es una realidad-. La adopción de dispositivos móviles está creciendo rápidamente. De acuerdo al estudio reciente de Gartner dentro de los siguientes dos años tú podrás ver más personas visitando tu sitio web en un teléfono o tableta en vez de utilizar una computadora tradicional, con un potencial de 1.82 millones de dispositivos móviles en uso para el 2013.
La meta de jQuery Mobile es permitir ejecutar el framework en tantos dispositivos móviles como sea posible. En los Estados Unidos tenemos la atención en Smartphones iOS y Android. Sin embargo, fuera de los Estados Unidos, otros proveedores, como Nokia, son dominantes. Para este fin, jQuery Mobile trabajara en un amplio conjunto de dispositivos. En el lanzamiento de jQuery Mobile, en Septiembre de 2010, John Resig, el autor de jQuery, reveló una gráfica que listaba los sistemas operativos móviles más populares (Ver Figura 1). Para cada sistema asignó una letra A, B o C determinando si la importancia de soportar el SO fue Alta (A), Media (B) o Baja (C).
Una indicación de cómo esta cambiando el mundo móvil, está tabla, probablemente sea elaborada nuevamente debido al cambio radical: Nokia esta matando a la Plataforma Symbian y reemplazándolo con Windows Mobile Phone 7. En un solo movimiento, Windows Mobile Phone 7 ha pasado de ser irrelevante a un estatus alto (A).
Para apoyar tus necesidades de desarrollo móvil, jQuery Mobile emplea una filosofía llamada mejora progresiva. En sus raíces, la mejora progresiva significa: Empieza con un marcado HTML semántico estático, que deberá funcionar en todos los navegadores. Agrega sus comportamientos y mejoras. Esto asegura que el contenido de la página y la funcionalidad básica de HTML es todavía accesible a navegadores menos capaces.
El desafío con los navegadores móviles es un verdadero problema. Por un lado tienes navegadores con fantásticas características (como navegadores web de Android, BlackBerry 6 y iOS Mobile Safari) que son todas las variaciones de WebKit -un motor de renderizado que impulsa a muchos navegadores como Google Chrome y la versión de Apple Safari-. (WebKit no conoce nada sobre la carga de las cosas fuera de la red. No conoce nada acerca de eventos de sistemas operativo nativo. No conoce nada acerca del desplazamiento. Cada sistema operativo, navegador o proveedor de dispositivo, necesita construir un navegador sobre ese motor para proporcionar estas cosas.) Entonces tienes millones de teléfonos Nokia Symbian o Windows Mobile 6 y anteriores que han fragmentado los estándares de soporte web. Para agregar al reto, hay diferentes versiones de WebKit usando en los diferentes sistemas operativos móviles. La conclusión es que, la mejora progresiva es un modelo que permite mostrar tu contenido en cualquiera de los dispositivos móviles soportados.
Introducción
El primer paso para empezar a utilizar jQuery Mobile es configurar una página web. Dentro del elemento HEAD debes referenciar los archivos de CSS jQuery Mobile y JavaScript:
|
1 2 3 |
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <script src="http://code.jquery.com/jquery-1.5.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> |
Como puedes ver en los archivos de script, jQuery Mobile se está extendiendo la biblioteca principal de jQuery. Para los observadores de los recursos, el actual tamaño del archivo minimizado de jQuery Mobile es de 12kb.
El enlace de arriba apunta directamente a las versiones de CDM alojadas en los servidores de jQuery. El vínculo CSS también contiene referencias a los archivos gráficos que se necesitan. Si quieres descargar y almacenar los archivos de manera local yo necesitaras ir a la siguiente dirección Web:
http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.zip
Descarga y extrae el archivo ZIP. Dentro de la carpeta encontrarás versiones comprimidas y sin comprimir de los archivos CSS y JavaScript, junto con una subcarpeta que contiene diez imágenes que se utilizan en el documento CSS.
Necesitarás utilizar tres áreas básicas de contenido en la página web donde vas a crear tu primer sitio con jQuery Mobile. La siguiente es una sugerencia de plantilla que puedes utilizar para futuros proyectos.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <script src="http://code.jquery.com/jquery-1.5.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /header --> </div><!-- /page --> </body> |
Hay un par de cosas que vale la pena destacar en esta plantilla. La primera es el uso del elemento DIV. Con HTML5 son tan comunes en los dispositivos móviles ¿Por qué no utilizar los nuevos elementos HEADER, ARTICLE,SECTION o FOOTER? Los antiguos navegadores no entienden los nuevos elementos HTML5. En algunos casos, como en las anteriores versiones de Internet Explorer en Windows Phone, hay un bug que primero requiere crear, mediante la programación un elemento (que no es HTML) en la etiqueta antes de que pueda ser estilizado. La etiqueta DIV es, sin embargo, soportada universalmente.
Puedes guardar la página web y probar en tu navegador. El código es HTML y trabaja en tu computadora de escritorio. Recomiendo usar Chrome para ejecutar las pruebas locales cuando quieras validar que el código HTML/JavaScript funcione correctamente. Para las pruebas de calidad necesitaras ejecutar las páginas web en diferentes dispositivos móviles.
Crear páginas en un sitio móvil usando enlaces
Una diferencia entre el estándar de las páginas web y páginas web móviles es la cantidad de contenido que se puede colocar en la pantalla. Sí, se puede cargar el sitio del New York Time en tu iPhone, pero necesitas hacer zoom para leer el contenido. Una buena solución es reducir el desorden de la página, hacia abajo del contenido que deseas presentar.
Para un sitio web tradicional se tendrían que crear muchas páginas web diferentes con un pequeña carga de contenido en cada una. Pero cuando estas utilizando jQuery, se puede resolver el problema de micro-contenido.
Arriba se muestra como crear una página repetitiva con jQuery Mobile. Llevaremos esto, un paso más allá y crearemos “páginas” de contenido. Una página puede estar estructurada como un bloque DIV en jQuery Mobile. Reemplaza el contenido dentro del elemento BODY utilizando la plantilla de abajo. Se agregara un menú que enlaza a cuatro páginas diferentes. La primer página contiene un menú con enlaces (Ver Figura 3):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- Start of first page --> <div data-role="page" id="menu"> <div data-role="header"> <h1>Menu</h1> </div><!-- /header --> <div data-role="content"> <p>What vehicles do you like?</p> <p><a href="#Cars">Cars</a></p> <p><a href="#Trains">Trains</a></p> <p><a href="#Planes">Planes</a></p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> |
Figura 3
La parte importante de este bloque HTML es el primer DIV. Dentro del elemento hay una propiedad de ID y DATA-ROLE:
|
1 |
data-role="page" id="menu" |
El data-role define el contenido dentro del elemento DIV como una “página”. El término es un poco engañoso ya que “página” es un panel o pantalla en el código HTML y no una página separada. La instrucción data-role=”page” construye el contenido visible en la pantalla alrededor de los elementos DIV. El ID permite enlazar las secciones utilizando enlaces HREF.
El menú es la primer página por lo cual será la primera página en mostrarse en el navegador. Hay tres páginas adicionales que puedes agregar. Cada una tiene un ID diferente: Cars, Planes, Trains.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!-- Start of second page --> <div data-role="page" id="Cars"> <div data-role="header"> <h1>Cars</h1> </div><!-- /header --> <div data-role="content"> <p>We can add a list of cars</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> <!-- Start of third page --> <div data-role="page" id="Trains"> <div data-role="header"> <h1>Trains</h1> </div><!-- /header --> <div data-role="content"> <p>We can add a list of trains</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> <!-- Start of fourth page --> <div data-role="page" id="Planes"> <div data-role="header"> <h1>Planes</h1> </div><!-- /header --> <div data-role="content"> <p>We can add a list of planes</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> |
Prueba la página en tu dispositivo Android o iOS. Cuando cargue la página Web obtendrás tres cosas:
-
El menú carga como si fuera una página propia (puedes intentar desplazarla pero no observarás algo más).
-
Cuando seleccionas un enlace, la página cambia con una animación que te lleva la nueva sección.
-
Cuando te mueves fuera de la página del menú automáticamente aparecerá un botón de retroceso en la cabecera del DIV.
Cada uno de estos elementos DIV se cargaran dentro del navegador y parecerán páginas web separadas. El movimiento entre las pantallas es fluido.
La recomendación de crear múltiples pantallas de contenido en una página te permitirá reducir el tiempo de carga de la página. Puedes enlazar páginas web externas, sin embargo, con la siguiente advertencia: Los enlaces en jQuery Mobile son tratados como llamadas a AJAX. Los enlaces de una página de jQuery Mobile toman ventaja de las transiciones de CSS al cambiar las pantallas. Cuando quieres enlazar una página que está fuera de la aplicación necesitaras forzar la creación de un nuevo documento y reemplazar los archivos actuales de jQuery Mobile. Esto se muestra en el siguiente ejemplo:
|
1 |
<a href="http://www.madinc.co" rel="external">madinc.co</a> |
Necesitas incluir la propiedad y el valor rel=”external”. Esto te permite enlazar una página web fuera de los enlaces locales que se están utilizando. Sin embargo, jQuery Mobile tiene un paso extra. En lugar de sólo tratar a los enlaces externos como un enlace fuera de tu sitio, jQuery Mobile aplicará una animación en la transición de página. En lugar de tener todo tu contenido en una sola página, puedes dividir el contenido en muchas páginas para construir mejores soluciones.
Trabajar con componentes
Por supuesto, enlaces y paginas son solo un aparte del diseño web móvil. Un segundo reto que muchos desarrolladores de web móvil encaran, es la explosión de aplicaciones. A diferencia de las páginas web, las aplicaciones para Android, iOS y otros sistemas son construidos con tecnologías complejas como Objective-C, Java y C#. Estas tecnologías permiten a los desarrolladores añadir menús de herramientas, listas y otros controles, y componentes que no se encuentran en HTML.
Actualmente jQuery Mobile está disponible con una selección de componentes. Los siguientes componentes están incluidos en la versión alfa:
-
Páginas.
-
Cajas de Diálogo.
-
Barras de Herramientas
-
Botones.
-
Formato de Contenido.
-
Elementos de Formulario.
-
Listas.
Agregar y cambiar un componente no es muy difícil. Si sabes un poco de HTML, entonces vas por buen camino. Revisemos los componentes de una página.
Agregar cabeceras y pies de página
El ejemplo anterior demuestra cómo puedes agregar barras de herramientas como cabeceras y pies de página. Las barras de herramientas a menudo son las más difícil de controlar cuando se crea contenido para diferentes pantallas. El reto llega al colocar contenido que se escale dinámicamente para diferentes tamaños de pantalla por ejemplo, una barra de herramientas en el HEADER puede contener un botón (botón de retroceso). Utilizando jQuery Mobile el HEADER te permitirá agregar un título que permanezca en el centro con un botón a la izquierda o a la derecha sin importar que tan grande sea la pantalla.
El siguiente código crea un header con dos botones (Figura 4):
|
1 2 3 4 5 |
<div data-role="header" data-position="inline"> <a href="cancel.html" data-icon="delete">Cancel</a> <h1>Edit Contact</h1> <a href="save.html" data-icon="check">Save</a> </div> |
Figura 4
La posición de los botones esta definida por el orden del contenido. El resultado es una página web móvil con un título centrado con botones a la izquierda y a la derecha que lucen y funcionan consistentemente en diferentes dispositivos.
Las cabeceras y los pies de página también pueden ser personalizados como herramientas de navegación. Se pueden agregar botones interactivos al pie de página que te llevaran a las secciones de la pantalla. Esto se logra con un data-role=”navbar”:
|
1 2 3 4 5 6 |
<div data-role="navbar"> <ul> <li><a href="#nav1" class="ui-btn-active">One</a></li> <li><a href="#nav2">Two</a></li> </ul> </div><!-- /navbar --> |
De nuevo, puedes ver que con la mayoría del código jQuery Mobile, el navbar es construido con una simple lista HTML envuelto en una etiqueta DIV. Las propiedades, como ui-btn-active pueden ser establecidas para identificar a un botón que debería ser seleccionado.
Cuando seleccionas un botón y cambias a una segunda pantalla dentro de la misma página, jQuery Mobile es lo suficientemente listo para agregar automáticamente un botón de retroceso en el header. Por ejemplo, el siguiente código HTML agrega tres pantallas en una página de HTML. Esta la pantalla principal y dos pantallas de ejemplo a las que se pueden enlazar desde la navbar. Agrega el código y ve como se agregan los botones de retroceso automáticamente.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<div data-role="page"> <div data-role="header"> <h1>Navigation</h1> </div><!-- /header --> <div data-role="content"> Navigation page </div><!-- /content --> <div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#nav1" class="ui-btn-active">One</a></li> <li><a href="#nav2">Two</a></li> </ul> </div><!-- /navbar --> </div><!-- /footer --> </div><!-- /page --> <div data-role="page" id="nav1"> <div data-role="header"> <h1>Nav Screen 1</h1> </div><!-- /header --> <div data-role="content"> Screen for Navigation One </div><!-- /content --> <div data-role="footer"> <h4>Additional Footer information</h4> </div><!-- /footer --> </div><!-- /page --> <div data-role="page" id="nav2"> <div data-role="header"> <h1>Nav Screen 2</h1> </div><!-- /header --> <div data-role="content"> Screen for Navigation Two </div><!-- /content --> <div data-role="footer"> <h4>Additional Footer information</h4> </div><!-- /footer --> </div><!-- /page --> |
Recuerda agregar las referencias a jQuery Mobile.
Hacer encabezados y pie de página persistentes
Una técnica común de diseño de interfaces de usuario es mantener el header hasta arriba de la pantalla y el footer hasta abajo. Puedes utilizar jQuery Mobile para lograrlo, agregando data-position=”fixed” a el header o al footer. Esto forzará a que el header se mantenga hasta arriba el footer hasta abajo, como en el siguiente ejemplo (Figura 5):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<div data-role="page"> <div data-role="header" data-position="fixed"> <h1>Navigation</h1> </div><!-- /header --> <div data-role="content" > <ul data-role="listview" data-dividertheme="d" style="margin-top: 0;"> <li data-role="list-divider">Royal Family</li> <li><a href="#nav1">Henry VIII</a></li> <li><a href="#nav1">George V</a></li> <li><a href="#nav1">Prince of Wales</a></li> <li><a href="#nav1">Elizabeth I</a></li> <li><a href="#nav1">Elizabeth II</a></li> <li data-role="list-divider">Prime Miniseters</li> <li><a href="#nav2">Winston Churchill</a></li> <li><a href="#nav2">Tony Blare</a></li> <li><a href="#nav2">David Cameron</a></li> </ul> </div><!-- /content --> <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#nav1" class="ui-btn-active">Royals</a></li> <li><a href="#nav2">Leaders</a></li> </ul> </div><!-- /navbar --> </div><!-- /footer --> </div><!-- /page --> <div data-role="page" id="nav1" data-position="fixed"> <div data-role="header"> <h1>Royal Family</h1> </div><!-- /header --> <div data-role="content"> <p>Members and relatives of the British Royal Family historically represented the monarch in various places throughout the British Empire, sometimes for extended periods as viceroys, or for specific ceremonies or events. Today, they often perform ceremonial and social duties throughout the United Kingdom and abroad on behalf of the UK, but, aside from the monarch, have no constitutional role in the affairs of government. This is the same for the other realms of the Commonwealth though the family there acts on behalf of, is funded by, and represents the sovereign of that particular state, and not the United Kingdom.</P> </div><!-- /content --> <div data-role="footer" data-position="fixed"> <h4>Royal Family</h4> </div><!-- /header --> </div><!-- /page --> <div data-role="page" id="nav2" data-position="fixed"> <div data-role="header"> <h1>Prime Ministers</h1> </div><!-- /header --> <div data-role="content"> The Prime Minister of the United Kingdom of Great Britain and Northern Ireland is the Head of Her Majesty's Government in the United Kingdom. The Prime Minister and Cabinet (consisting of all the most senior ministers, who are government department heads) are collectively accountable for their policies and actions to the Sovereign, to Parliament, to their political party and ultimately to the electorate. The current Prime Minister, David Cameron, was appointed on 11 May 2010.</div><!-- /content --> <div data-role="footer" data-position="fixed"> <h4>Prime Minister</h4> </div><!-- /header --> </div><!-- /page --> |
Figura 5
Ahora, sin utilizar Objective-C puedes agregar header y footers fijos.
Trabajar con cajas de diálogo
El componente page también permite agregar cajas de diálogo personalizadas utilizando la propiedad data-rel. Por ejemplo, el siguiente código cargará un página web dentro de una caja de diálogo:
|
1 |
<a href="dialog.html" data-rel="dialog">Open dialog</a> |
Utilizar este método te permite cargar cualquier mensaje personalizado dentro de la caja de diálogo.
Se necesitan dos secciones para una caja de diálogo cuando se posiciona cuna caja de diálogo en la misma página. Curiosamente, una caja de diálogo no es diferente de una pantalla. Con este conocimiento, puedes agregar puede agregar cualquier tipo de HTML dentro de una caja de diálogo. esta primera sección muestra un enlace a la caja de diálogo como se muestra:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div data-role="page"> <div data-role="header"> <h1>Dialog Box</h1> </div><!-- /header --> <div data-role="content"> <a href="#dialogPopUp" data-rel="dialog" data-role="button">Open dialog</a> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> |
Puedes ver en el HREF del botón que hay un enlace o una sección local. La siguiente página aparecerá en la caja de diálogo:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div data-role="page" id="dialogPopUp"> <div data-role="header"> <h1>Dialog Title</h1> </div><!-- /header --> <div data-role="content"> This is a dialog box </div><!-- /content --> <div data-role="footer"> <h4>Additional Footer information</h4> </div><!-- /footer --> </div><!-- /page --> |
La inclusión del footer en la página es opcional, pero debe incluir el header. Sin el header, no aparecerá automáticamente un botón de cerrar.
Listas
Hay muchos datos en la Web. Las listas son eficaces herramientas que puedes utilizar para administrar grandes cantidades de datos. Ya habíamos utilizado las listas en ejemplos anteriores, pero ahora es el momento de empaparse de ellas:
Aquí está una lista simple utilizando el estándar HTML:
|
1 2 3 4 5 6 7 |
<ul> <li><a href="#nav1">Henry VIII</a></li> <li><a href="#nav1">George V</a></li> <li><a href="#nav1">Prince of Wales</a></li> <li><a href="#nav1">Elizabeth I</a></li> <li><a href="#nav1">Elizabeth II</a></li> </ul> |
En jQuery Mobile puedes convertir esta lista simple en una magnífica. El atributo data-role le dirá a jQuery Mobile que redibuje la lista con una mejor vista y rendimiento como si se tratara de una aplicación nativa:
|
1 2 3 4 5 6 7 |
<ul data-role="listview"> <li><a href="#nav1">Henry VIII</a></li> <li><a href="#nav1">George V</a></li> <li><a href="#nav1">Prince of Wales</a></li> <li><a href="#nav1">Elizabeth I</a></li> <li><a href="#nav1">Elizabeth II</a></li> </ul> |
Figura 6
Eso es todo, solo 20 caracteres y tienes una lista con formato.
Fuera de la lista básica, jQuery te da la opción de extender la lista básica. Por ejemplo, el siguiente será añadir divisores a las listas (Figura 7):
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<ul data-role="listview" data-dividertheme="d"> <li data-role="list-divider">Royal Family</li> <li><a href="#home">Henry VIII</a></li> <li><a href="#home">George V</a></li> <li><a href="#home">Prince of Wales</a></li> <li><a href="#home">Elizabeth I</a></li> <li><a href="#home">Elizabeth II</a></li> <li data-role="list-divider">Prime Ministers</li> <li><a href="#home">Winston Churchill</a></li> <li><a href="#home">Tony Blare</a></li> <li><a href="#home">David Cameron</a></li> </ul> |
Figura 7
Puedes agregar separadores(divider) incluyendo el atributo data-divider al inicio del elemento li e incluyendo un elemento especial de la lista donde quieras que aparezca el separador.
|
1 |
(<li data-role="list-divider">Royal Family </li>) |
Las burbujas de datos también pueden agregarse a casa elemento de la lista. En el ejemplo siguiente el reinado de cada miembro de la Familia Real Británica es agregado a una burbuja (Ver Figura 8).
|
1 2 3 4 5 6 7 |
<ul data-role="listview" style="margin-top: 0;"> <li><a href="#nav1">Henry VIII <span class="ui-li-count">Reign 37 Years</span></a></li> <li><a href="#nav1">George V <span class="ui-li-count">Reign 25 Years</span></a></li> <li><a href="#nav1">Prince of Wales <span class="ui-li-count">N/A</span></a></li> <li><a href="#nav1">Elizabeth I <span class="ui-li-count">Reign 44 Years</span></a></li> <li><a href="#nav1">Elizabeth II<span class="ui-li-count">Reign since 1952</span></a></li> </ul> |
Figura 8
Un tipo de lista adicional es una lista compleja donde puedes agregar enlaces, imágenes, y texto dentro de un elemento lista(li). Aquí hay un ejemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<ul data-role="listview" style="margin-top: 0;"> <li> <img src="http://img.freebase.com/api/trans/image_thumb/en/henry_viii_of_england?pad=1&errorid=%2Ffreebase%2Fno_image_png&maxheight=64&mode=fillcropmid&maxwidth=64" /> <h3><a href="index.html">Henry VIII</a></h3> <p>Reign 37 Years</p> <a href="#home">Details</a> </li> <li> <img src="http://www.iwise.com/authorIcons/15/King_George%20V_64x64.png" /> <h3><a href="index.html">George V</a></h3> <p>Reign 25 Years</p> <a href="#home">Details</a> </li> <li> <img src="http://img.freebase.com/api/trans/image_thumb/en/prince_of_wales_secondary_school?pad=1&errorid=%2Ffreebase%2Fno_image_png&maxheight=64&mode=fillcropmid&maxwidth=64" /> <h3><a href="index.html">Prince of Wales</a></h3> <p>Reign N/A</p> <a href="#home">Details</a> </li> <li> <img src="http://www.iwise.com/authorIcons/13846/Elizabeth%20I%20of%20England_64x64.png" /> <h3><a href="index.html">Elizabeth I</a></h3> <p>Reign 44 Years</p> <a href="#home">Details</a> </li> <li> <img src="http://www.iwise.com/authorIcons/9098/Elizabeth%20II_64x64.png" /> <h3><a href="index.html">Elizabeth II</a></h3> <p>Reign Since 1952</p> <a href="#home">Details</a> </li> </ul> |
Este tipo de lista es útil cuando necesitas comunicar muchos datos. Por ejemplo, podrías querer una lista de los estudiantes en clase, con su nombre, fotografía y GPA. El resultado final es que tienes una lista de desplazamiento que luce complicada crear solo con HTML.
Publicar tu sitio web con jQuery Mobile
Cuando has completado el desarrollo de tu sitio jQuery Mobile te queda una tarea final: Implementar los archivos que el mundo podrá ver.
Al final del día, jQuery Mobile es una colección de archivos HTML, CSS y JavaScript. La implementación no es diferente de cuando se implementa un sitio estándar de HTML/CSS. Usando FTP o el administrador de sitios web de tu preferencia (como Dreamweaver) registrar los archivos al el servidor web. Asegúrate de que registrar todos los archivos JavaScript, CSS, y archivos de imagen.
Cuando los archivos están en el servidor puedes visitar el sitio utilizando un dispositivo móvil como BlackBerry, iPhone, Android o Windows Phone.
Al utilizar el enfoque de jQuery Mobile se hace la afirmación de que el sitio se centrará en los teléfonos inteligentes. Es posible que quieras considerar la creación de una identidad móvil completamente separada de tu sitio jQuery Mobile, si se trata de un sitio secundario a tu sitio web principal. Por ejemplo, tu sitio principal podría ser www.companyname.com mientras tu sitio jQuery Mobile puede ser m.companyname.com.
No hay manera correcta o incorrecta de cómo diferencia un sitio web dirigido a equipos de escritorio contra un sitio móvil. La única decisión correcta es asegurarte de que tienes un sitio web móvil para apoyar a tus clientes en la experiencia visual.
A donde ir desde aquí
La versión alfa actual de jQuery Mobile claramente ha necesitado mucho trabajo. Si has estado esperando a lanzarte al mundo de diseño web móvil entonces su espera ha terminado. jQuery Mobile te brinda un framework que que hace el desarrollo web móvil más fácil.
Para más información acerca de jQuery Mobile, revisa las siguientes referencias:
Explora cómo usar jQuery para hacer diseño para móviles más eficiente
Usando y personalizando temas de jQuery Mobile
La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Margarita García.
Hola a todos, me gustaria saber como realizo el autocomplete para jquery mobile, sacando los datos de mysql, tengo jquery como script para el automplete, pero no me deja funcionar jquerymobile , o me funciona uno o el otro, no se que pasa,
gracias
Hola Juan Carlos!
No es muy difícil de implementar, solo habría que apuntar el source de el método automplete a tu archivo php que genera la consulta algo así:
$(‘#zipsearch’).autocomplete({source:’suggest_zip.php’, minLength:2});
De cuaquier forma te dejo el acceso a un tutorial bien detallado al respecto.
http://www.htmlblog.us/jquery-autocomplete
Espero te sirva la info!
Saludos
@yacaFx
necesito evitar que la «page 55» se almacene en cache.