Mientras tanto, Adobe Dreamweaver CS6 ofrece un flujo de trabajo racionalizado para la creación de un proyecto de jQuery Mobile. En este artículo, crearemos una aplicación de jQuery Mobile en Dreamweaver CS6.

El vídeo explica las características de la plantilla de Dreamweaver para jQuery Mobile.

Figura 1. Aplicación móvil que crearas en este tutorial.

En Dreamweaver simplemente selecciona File > New > Page from Sample > jQuery Mobile with theme (local) y da clic en Create. Al guardar el archivo, Dreamweaver crea todos los archivos necesarios, incluidos el CSS y HTML, para crear un sitio web básico con jQuery Mobile.

Figura 2. Crea un nuevo sitio web móvil en Dreamweaver CS6.

Una vez que hayas creado tu sitio web móvil, estás listo para empezar a personalizar el CSS y HTML para moldear el proyecto a tu expectativa. Los ejemplos que siguen a continuación explican algunos de los aspectos más avanzados de esta plantilla y te proporcionan un contexto para iniciar la modificación de aspectos más profundos del framework de jQuery Mobile.

Flexibilidad a través de CSS

Uno de los aspectos más ventajosos del framework jQuery Mobile es su dependencia de CSS para la maquetación y diseño. Dado que el núcleo del framework utiliza pequeñas cantidades de HTML para crear la estructura, sólo es necesario aplicar pequeñas cantidades de CSS para modificar el diseño.

En la implementación de varias páginas, puedes usar individualmente las etiquetas DIV para "páginas", y utilizar las vistas de lista para crear la navegación de la página principal. Para obtener más información sobre la estructura de la página consulta el articulo Introducción al diseño personalizable para jQuery Mobile. Ya que puedes hacer el listview desde una lista desordenada, puedes crear reglas de CSS que tengan como objetivo esa lista y re-definir ciertos aspectos para crear botones más grandes para la página principal.

El formato estándar de un listview incluye un atributo data-role asignado a la etiqueta exterior <ul>. Observa el siguiente código:

<ul data-role="listview"> 

<li>

<a href="#about_us">About Us</a>

...

</li>

</ul>

Usando una técnica llamada inyección, el framework de jQuery agrega el CSS adicional dentro de un elemento HTML <ul> y convierte el código anterior en este:

<ul data-role="listview" class="ui-listview">

<li class="btn_a ui-btn ui-btn-up-a ui-btn-icon-right ui-li-has-arrow ui-li" data-theme="a">

<div class="ui-btn-inner ui-li" aria-hidden="true">

<div class="ui-btn-text">

<a href="#about_us" class="ui-link-inherit">About Us</a>

...

</div>

<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> 

</span>

</div>

</li>

</ul>

Además de agregar los elementos <div> y <span> inyectados dentro de los elementos <li>, el proceso también inyecta una clase llamada ui-listview en el elemento <ul>, en tiempo de ejecución con JavaScript. Esto le da una ruta para apuntar con tus reglas CSS. Por último, tener la vista de lista dentro de un <div> con un id dentro de la página principal, para lo cual puedes utilizar la siguiente regla CSS para apuntar específicamente a la vista de lista de la página principal:

#home .ui-listview {  }

La siguiente figura muestra la lista re-estilizada.

Figura 3. Lista re-estilizada.

Usando una hoja de Sprite y la clase personalizada asignada a cada <li>, puedes ajustar la posición x del gráfico de fondo para crear gráficos de botones individuales de una sola imagen. Además de una imagen de fondo, también puedes asignar un padding-top a las etiquetas <a> para dar espacio vertical a los gráficos de botones como se muestra en la siguiente imagen.

Figura 4. Hoja de Sprite

La combinación de las reglas CSS y código HTML transforma una lista desordenada en un sistema de navegación basado en iconos.

Combinar ThemeRoller con CSS

El sitio de jQuery Mobile incluye una herramienta para crear temas, llamada ThemeRoller. Esta es una herramienta basada en web que permite diseñar esquemas de color para personalizar sitios web con jQuery. El framework de jQuery Mobile está construido sobre la noción de los temas, que son los estilos predefinidos para el aspecto de tu sitio móvil. Cada tema incluye un grupo de estilos llamados swatches, que se pueden aplicar a todas las páginas de jQuery Mobile, o sólo a una parte de una página. Aunque ciertamente puedes remplazar muchas de las reglas CSS dentro de un swatch, que es más eficiente para crear nuevos temas utilizando ThemeRoller.

Figura 5. Creación de temas con ThemeRoller.

La herramienta en línea, ThemeRoller, permite crear, modificar y guardar los temas para que los uses en tus proyectos. Una vez que descargas y descomprimes el tema, copia los archivos en la carpeta de tu proyecto y enlaza el CSS. El sitio de ThemeRoller ofrece incluso algo de HTML dentro de la ventana de descarga.

Agrega algunos scripts personalizados de jQuery

Si consideras el hecho de que jQuery Mobile está construido sobre jQuery, tengo que señalar que puedes utilizar algunas secuencias de comandos para agregar más funcionalidades a tu sitio móvil. La plantilla incluida con este tutorial que puedes descargar aquí, incluye un sencillo script HTML que permite cambiar dinámicamente el contenido de la página Contact Us. Usando solo la página Contact Us, aprenderás cómo cambiar información de la página basada en HTML agregada a cada enlace.

Los enlaces de listview contienen un atributo adicional en la etiqueta <a> llamado data-phone. En este fragmento de código, coloca el número telefónico de la oficia de ese país. Junto con el texto vinculado a la etiqueta <a> tenemos suficiente información para inyectar datos personalizados en una sola página (Contact Us) y dar al usuario la experiencia de muchas páginas personalizadas de contacto.

<ul data-role="listview" data-filter="true" data-inset="true" class="countries"> 

<li><a class="location" href="#contact_us" data-phone="123-456-7891">Albania</a></li>

<li><a class="location" href="#contact_us" data-phone="123-456-7892">Algeria</a></li>

<li><a class="location" href="#contact_us" data-phone="123-456-7893">Argentina</a></li>

…

</ul>

Al conectar el archivo personalizado de JavaScript, puedes bloquear muchos aspectos de jQuery, y además manipular la experiencia de usuario. En esta plantilla he incluido un sencillo conjunto de instrucciones jQuery que inyectan los datos en la página de contacto (Contact Us) como se muestra en la siguiente figura.

Figura 6. Inyección de datos dentro de la página Contáctanos (Contact Us)

Cuando el usuario da tap o hace clic en un vínculo dentro de la lista, la aplicación utiliza jQuery para recoger el enlace activado, leer el atributo personalizado, la etiqueta del enlace, y revisar los elementos de la página Contact Us con estos elementos. Esto da la capacidad de crear la ilusión de páginas personalizadas de Contact Us, cuando en realidad, es la misma página con los datos inyectados dinámicamente en la página antes de que sea animada.

A donde ir desde aquí

Además del diseño y las capacidades de carga de las páginas, jQuery Mobile proporciona una serie de mejora de forma interactiva. Usando HTML básico, puedes transformar elementos como radio buttons y menús dropdown en experiencias móviles agradebles para el usuario.Lo que es más, el Panel de Inserción de Dreamweaver contiene muchos objetos relacionados a jQuery Mobile, que puedes agregar a tu sitio web móvil con un solo clic.

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.

jQuery Mobile Theme Skinning permite características para crear temas y iconos usando la plantilla de jQuery proporcionada en Fireworks. Después de modificar los temas de jQuery Mobile en Fireworks, puedes previsualizar y exportar el código CSS correspondiente y los recursos sprite relacionados. Este artículo describe cómo trabajar con la característica de jQuery Mobile Theme Skinning proporcionada por Fireworks.

Trabajar con el Framework de jQuery Mobile

El Framework de jQuery Mobile es un framework de JavaScript que permite construir rápidamente sitios web para dispositivos móviles. Es un framework web optimizado al tacto diseñado para teléfonos inteligentes y tablets. jQuery Mobile funciona en la mayoría de las plataformas modernas de computadoras, teléfonos inteligentes, tablets y lectores electrónicos. El Framework de jQuery Mobile es fácil de usar e incluye controles específicos de la web, como botones, listas de elementos y muchos más. Al crear sitios web móviles con el Framework de jQuery Mobile puedes aprovechar el tema predeterminado del framework.

La función de jQuery Mobile Theme skinning mejora el espacio de trabajo de Fireworks para permitirte crear temas personalizados o modificar el tema por defecto de jQuery Mobile. También permite agregar iconos adicionales o modificar los iconos por defecto en jQuery Mobile. Genera hojas de estilo asociadas y recursos sprite. Puedes utilizar el CSS generado por Fireworks para modificar el tema predeterminado para las páginas de jQuery Mobile y personalizar tus proyectos.

Este artículo describe cómo puedes cambiar o crear temas jQuery Mobile usando Fireworks y como aplicar o actualizar el nuevo tema para tus páginas jQuery Mobile.

Sin esta función, tienes que crear o modificar manualmente los estilos CSS para las paginas de jQuery Mobile. Deberías conocer las clases que necesitan modificarse. También debes saber los nombres específicos de las clases para aplicar los estilos a los elementos de la página de jQuery. Además sin esta función no sería posible previsualizar el sitios para comprobar el aspecto del tema del sitio web. Sin la función era bastante lento, porque había que modificar el código de una página y luego obtener una vista previa en el navegador hasta que el tema tomara el aspecto deseado. Además, no era posible incluir o modificar los iconos de los sprites existentes.

Esta función en Fireworks te ayuda a ahorrar tiempo, porque puedes modificar el modelo por defecto o crear un nuevo modelo. También puedes modificar los iconos por defecto o incluir iconos usando la plantilla proporcionada en Fireworks, previsualizarlo y luego generar el código CSS y los sprites que serán usados en la página web de jQuery. Cuando aplicas el código CSS a las páginas web basadas en jQuery para dispositivos móviles, el tema se muestra exactamente cómo se visualizó en la vistas previa del diseño en Fireworks.

Usar el Framework de jQuery Mobile para diseñar sitios moviles

Cada diseño y widget incluido en jQuery Mobile está diseñado en torno de un nuevo framework orientado a objetos CSS. El framework hace sea posible aplicar un tema completo de diseño visual para sitios y aplicaciones móviles.

Considera los siguiente beneficios:

• jQuery Mobile utiliza propiedades CSS3 para crear esquinas redondeadas, texto y cajas sombreadas y degradados. Utilizando propiedades de CSS3 en lugar de imágenes es ventaja porque reduce el tamaño de archivo del tema y el número de solicitudes al servidor.

• Lo temas incluyen múltiples muestras de colores —cada uno consiste en una barra de encabezado, cuerpo del contenido y botones de estado— que libremente se pueden mezclar y combinar. Estas muestras permiten crear texturas visuales y diseños más enriquecidos.

• Soporte a temas, compuestas hasta de 26 muestras únicas por tema. Esto hace posible agregar variedad casi ilimitada a tus diseños.

• Todos los fondos ahora utilizan gradientes CSS3 para reducir drásticamente el tamaño del archivo y el número de solicitudes del servidor para mejorar el rendimiento.

• Un conjunto de iconos simplificados con los elementos más utilizados para el dispositivos móvil, en un formato sprite para reducir el peso de la imagen.

El tema por defecto contiene las siguientes cinco barras de estilo(Ver Figura 1):

Figura 1

Por defecto, el framework asigna el estilo “A” para todos los encabezados y pies de página, porque estos elementos suelen ser elementos visualmente prominentes en una aplicación móvil. Para establecer el color de elemento bar a un color diferente, agrega el atributo data-theme para el encabezado o el pie de página y establecer una letra como “B” o “D” para aplicar el color del tema especificado. El código CSS generado para una barra se muestra a continuación:

{

  border:1px solid #2a2a2a;

  background:#111;

  color:#fff;font-weight:bold;

  text-shadow:0 -1px 1px #000;

  background-image:-moz-linear-gradient(top,#3c3c3c,#111);

  background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3c3c3c),color-stop(1,#111));

  -msfilter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#111111')"

  }

Para aprender más acerca de cómo funciona el tema por defecto, lee la Documentación del Tema de jQuery Mobile.

Crear y modificar la plantilla del tema de jQuery

El tema de jQuery Mobile incluye algunas imágenes sprites y muestras. Puedes usar la funcionalidad proporcionada por la extensión de Fireworks para modificar los sprites y muestras. Además, puedes crear varias muestras para duplicar una página existente y copiar la personalización del mismo.

Empieza a crear un tema nuevo:

1. En Fireworks CS6, elige Commands > jQuery Mobile Theme > Create New Theme, para crear un nuevo tema (Ver Figura 2).

El nombre de la página se utiliza para nombrar la muestra. Te recomiendo que utilices un solo carácter (a-z) al nombrar las páginas.  Puedes crear páginas mediante la duplicación de páginas existente y modificar el tema acorde con el requerimiento. Cada página genera una única muestra de CSS.

La plantilla contiene sprite predeterminados y recursos relacionados (Ver Figura 3).

Los iconos personalizado se pueden incluir en el conjunto de sprites. Para incluir más iconos, agregas un icon placeholders en la plantilla por defecto de jQuery. Después de añadir placeholders, crea el icono de diferentes resoluciones y esquemas de color.

Crear un icon placeholders

1. Haz clic en Commands > jQuery Mobile Theme > Insert Icon Placeholders.

2. Ingresa el nombre del icono y haz clic en OK.

Cuatro placeholders son agregados para el icono en el Global Assets y Style page.

3. Da clic en la opción Hide Slices in Barra de herramientas.
4. Crea el arte para los iconos y agregalos al tema en los placeholders.

Figura 5. Crea el arte para los iconos y añade el tema en el placeholders.

Modificar una plantilla de jQuery Mobile

Usando Fireworks, puedes modificar el skin basado en el tema para que coincida con el diseño del sitio.

Sigue estos pasos para modificar una plantilla existente:

1. Abre una página en Fireworks y selecciona los elementos deseados.
2. Modificar individualmente los elementos en el canvas.(Por ejemplo, puedes actualiza los colores, cambiar los estilos del texto, añadir un relleno degradado, ajustar los grados de las esquinas redondeadas, aplicar efectos como sombras paralelas, o hacer otros cambios que desee).
3. Guarda los cambios eligiendo File > Save.

Cada objeto en el canvas corresponde a una sección del código CSS en una muestra. El código se indica por el título de cada objeto (Ver Figura 6).

Figura 6. Documento Fireworks después de modificar la página.

Después de realizar los cambios, el siguiente paso consiste en revisar los cambios recientes para ver como se visualiza el diseño.

Previsualización de los cambios aplicados a una plantilla jQuery Mobile

Sigue estos pasos para previsualizar el archivo de la plantilla:

1. Selecciona Windows > Extensions > jQuery Mobile Theme In-App Preview (Ver Figura 7).

Figura 7. Elige la opción previsualizar el tema dentro del workspace de Fireworks.

El panel de vista previa muestra la página actualizada(Ver Figura 8).

Figura 8. Revisa las actualizaciones en el panel de Vista Previa del Tema de jQuery Mobile.

2. Para visualizar todos los temas y sprites a la vez en el navegador, selecciona Commands > jQuery Mobile Theme > Preview Theme in Browser (Ver Figura 9).

Figura 9. Vista previa de los temas en un navegador.

Haz clic en los tabs de la parte superior para cambiar entre los diferentes temas, y visualizar las muestras aplicadas a los distintos elementos.

Genera CSS y sprites de jQuery

Después de haber creado o actualizado una plantilla, puedes usar Fireworks para generar el código CSS de jQuery y los sprites para el sitio. Elige entre una de las dos opciones para exportar las muestras de CSS y sprites.

Opción 1: Exportar el CSS y sprites simultáneamente

Para exportar todos los sprites y muestras a la vez, selecciona Commands > jQuery Mobile Theme > Export Theme para generar las muestras y sprites para todas la paginas (Ver Figura 10).

Figura 10. Elige exportar el tema para generar el código CSS de jQuery y elementos relacionados.

Opción 2: Exportar una muestra específica o sprite individualmente

Para exportar una muestra determinada, haz clic en panel de vista previa. Utiliza esta estrategia cuando quieras personalizar sólo un elemento. (Ver Figura 11).

Figura 11.

Para exportar solo las imágenes sprite, da clic en Export Sprite Images en el Panel de vista previa. Se generan los sprites para diferentes resoluciones y esquemas de color. Una hoja de estilos CSS contiene valores de desplazamiento de cada sprite. Utiliza esta estrategia cuando desees incluir iconos personalizados o modificar iconos existentes en la hoja de sprite.

Aplicar el archivo CSS generado a una página de jQuery

En este punto se ha creado el nuevo archivo de hoja de estilos CSS para actualizar el tema del sitio web. En esta sección , aprenderás a vincular el archivo CSS a tu sitio web móvil. Sigue estos pasos:

1. Inicia Dreamweaver. Abre un sitio existente o elige crea un nuevo documento.
2. Elige  Insert > jQuery Mobile > Page para crear una página de jQuery Mobile. En el cuadro de diálogo que aparece, puedes vincular las copias locales o remotas de los archivos jQuery. Te recomiendo utilizar la estructura y los archivos del tema por separado. La estructura de la hoja de estilos contiene todos los estilos excepto el tema. En la hoja de estilo del tema, ve a la ubicación de la hoja de estilo del tema generado por Fireworks.

Figura 12. Enlace a copias locales o remotas de los archivos jQuery.

La página se crea utilizando la hoja de estilo predeterminada de jQuery y el archivo del tema que se generó desde Fireworks. Se define en las siguientes etiquetas:

<link href="jquery-mobile/jquery.mobile.theme-default.css" rel="stylesheet" type="text/css" />

<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css" />

3. Revisa el código para ver como la hoja de estilos está vinculada a la página HTML (Ver Figura 13).

Figura 13. Debajo del título, la etiqueta link enlaza el archivo de hoja de estilo CSS a la página HTML.

4. En la ventana de código, agregue un enlace para que apunte a la hoja de estilo estilos CSS de jQuery que se generó con Fireworks, tal como se define en la siguiente etiqueta:

<link href="jquery-mobile/theme_f.css" rel="stylesheet" type="text/css"/>.

Mediante esta estrategia, puedes aplicar nuevos temas que crees en Fireworks para todas la página o elemento específicos de la página.

Por ejemplo, en lugar de usar el predeterminado “A”, puedes utilizar código para aplicar otro estilo, como en este:

<div data-role="header" data-theme="f">

Después de aplicar estos cambios, haz clic en el botón Live View para revisar cómo el tema actualizado aparece en el área de trabajo de Dreamweaver(Ver Figura 14).

Figura 14. Da clic en Live View para revisar los cambios recientes en Dreamweaver después de editar la página para aplicar el nuevo tema.

Agregar un icono que has exportado a una página de jQuery utilizando el Panel Swatch en Dreamweaver

1. Abre el panel de muestra de jQuery haciendo clic en Window > jQuery Mobile Swatch.
2. Selecciona el botón en el que deseas agregar el icono.
3. En la ventana emergente de jquery Mobile Swatches, da clic en Refresh.
4. Selecciona el icono que creaste.

Figura 15.

Agrega un icono a una página jQuery Mobile.

1. Selecciona la etiqueta a la que deseas agregar un icono.
2. En la vista de código, para incluir un icono, proporciona el atributo data-icon como se muestra(Ver Figura 16):

<a href=”#” data-role="button" data-icon="favorites">Button</a>

El valor de data-icon, “favorites”, es el nombre con el que fue creado el icono en Fireworks.

Para más detalles, consulta la sección anterior de Crear icon placeholders.

Figura 16.

Nota: De acuerdo con el Framework de jQuery Mobile, Fireworks no exporta patrones para optimizar el tamaño del contenido exportado.

A donde ir desde aquí

Como has visto en este artículo, puedes utilizar Fireworks para crear y actualizar temas de jQuery Mobile para administrar sitios web para dispositivos móviles. La interfaz actualizada incluye la capacidad para generar las hojas de estilo CSS que puede utilizar para el rediseño de sitios y aplicaciones móviles.

Fireworks facilita más que nunca construir e implementar diseños web a través de multiples pantallas. Además, el CSS generado es multiplataforma y compatible con teléfonos inteligentes y tablets.

Utiliza las opciones de vista previa en Dreamweaver para revisar los cambios en Live View o en el navegador para comprobar tu trabajo antes de publicar los cambios. También puedes utilizar Fireworks.

Para obtener más información sobre la extensión de Fireworks para crear hojas de estilo, lee más acerca de  Extracting CSS properties from design objects in Fireworks using the CSS3 Mobile Pack, y observa lo que dice el senior product manager de Fireworks, Takashi Morifusa, con la  demostración del panel de propiedades CSS3 y jQuery Mobile Theme.

También asegúrese también de revisar el Centro de Desarrollo de HTML5 y CSS3.

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.

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

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

<!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):

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

(<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).

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

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

• Escribes menos código, lo que en JavaScript te tomaría cerca de 20 líneas, con jQuery puedes lograrlo en 2 o 3 líneas.
• El mismo código corre en todos los navegadores, no es necesario escribir un código especial para Internet Explorer
• Usa selectores CSS, aprovechando el  conocimiento  que la mayoría de los diseñadores web tiene.

Dreamweaver CS5.5 ahora tiene soporte completo con sugerencias de código (code hinting) para jQuery, haciendo que su uso sea aun más fácil.

Este tutorial es una introducción a los conceptos básicos de jQuery

Nota: En este tutorial se asume que haces uso de Dreamweaver CS5.5 Puedes seguir el tutorial con cualquier versión de Dreamweaver o editor de texto, pero no tendrás los beneficios de sugerencias de código (code hinting). Solo copia el código terminado al final.

¿Qué es jQuery?

De acuerdo al sitio web de jQuery, “jQuery esta diseñado para cambiar la manera en que se escribe código JavaScript”.  No solo ha hecho esto, se ha logrado algo aún más impresionante, ha animado a un gran número de diseñadores web a comenzar a escribir su propio código en lugar de copiarlo de dudosas fuentes. jQuery es lo que se conoce como  una librería JavaScript, pero no es del tipo de librerías que esta llena con filas y filas de libros. Es un archivo relativamente pequeño (84kb sin comprimir) que contiene docenas de funciones (métodos) de JavaScript diseñadas para simplificar el trabajo con JavaScript. Simplemente ligas tu página web al archivo y usas los métodos de jQuery para agregar interactividad a tu sitio web.

JavaScript es un lenguaje muy potente,  pero hay dos obstáculos importantes para su uso:

1. JavaScript fe desarrollado originalmente por Netscape, el archirrival de Internet Explorer durante la guerra de los navegadores en los 90’s. Aunque Internet Explorer adopto rápidamente el lenguaje (su versión oficial se llama JScript), hay diferencias fundamentales en ciertas áreas, como el manejo de eventos. Hacer scripts que funcionen en todos los navegadores generalmente implica rescribir mucho código.
2. La interactividad consiste en agregar y quitar elementos de una página o afectar los estilos que tengan. Los métodos oficiales para hacer esto, usando el Documento de Modelo de Objetos del consorcio World Wide Web (W3C DOM), son bastante engorrosos.

Las librerías de JavaScript destinados a resolver estos dos problemas comenzaron a surgir alrededor de 2005. Los primeros en ganar un uso generalizado fueron Prototype y Script.aculo.us. Otras librerías conocidas son Dojo Toolkit, Moo Tools,  Yahoo! UI Library y el Adobe Spry framework.  Todos tienen los objetivos básicos de jQuery: proporcionar a todos los navegadores de herramientas para añadir interactividad a sus páginas. Así que, ¿por qué elegir jQuery sobre los demás?

• jQuery funciona en todos los navegadores actuales incluyendo Internet Explorer 6+, Firefox 2+, Safari 3+, Chrome, and Opera 9+.
• Es de código libre licenciado a la vez con MIT License y GNU General Public License
• Se estima que tres de cada cuatros sitios web con JavaScript han adoptado jQuery.
• Empresas líderes usan jQuery como Amazon.com, Bank of America, BBC y Twitter.
• Y además es relativamente fácil de aprender.

Adobe se ha convertido en patrocinador oficial de jQuery Mobile, un nuevo framework para el desarrollo de aplicaciones móviles, que esta basado en la librería core de jQuery y los ingenieros de Dreamweaver han contribuido activamente al código del proyecto.

Como obtener jQuery

Aunque Dreamweaver CS5.5 tiene sugerencias de código para todo jQuery, es necesario ligar tus páginas web a la librearía core de jQuery. Hay dos maneras de hacer eso:

• Ligar a la última versión de la librería hospedada en un “Content Distribution Network (CDN)”
• Descargar una copia de la librería y almacenarla con los archivos de tu sitio.

Los detalles de ambos métodos puedes encontrarlos en la documentación de jQuery

Para propósitos de este tutorial, recomendamos trabajar con la versión local de jQuery. Los archivos de ejemplo contienen una copia de jQuery 1.5.2, que era la versión actual al momento de escribir este tutorial. Si hay una nueva versión solo reemplaza los archivos.

Nota: La página de descarga del sitio de jQuery tiene links para versiones mínimas y descomprimidas. Ambas contienen el mismo código, pero en  la versión mínima se quitaron todos los espacios en blanco para lograr un archivo de menor peso. Cuando haces click en el link de descarga, el archivo normalmente se abre en tu navegador.  Selecciona el menú Archivo > Guardar como… para guardar el archivo en tu disco duro.

Preparando los archivos del tutorial

Si aun no lo haz hecho, descarga jquery.zip y descomprímelo en una carpeta junto a los archivos de este tutorial. Todos los archivos están la carpeta llamada jqtut. Crea un nuevo sitio de Dreamweaver con la carpeta jqtut como raíz del sitio. Alternativamente copia los archivos de la carpeta jqtut en algún sitio existente de Dreamweaver y trabaja en esa carpeta.

Ligar e inicializar jQuery

Por muchos años, la practica recomendad ha sido vincular archivos externos de JavaScript en el <head> de la página web. Sin embargo, todo el código de JavaScript necesita ser procesado antes de que el resto de la página continúe cargando.

En consecuencia, ahora es recomendado adjuntar archivos de JavaScript externos justo antes  de cerrar la etiqueta </body> a menos que la página dependa de código que deba ser cargado previamente. Hacer esto resulta en páginas que cargan más rápido.

1. Abrir jq_01.html de la carpeta de archivo de ejemplos jqtut y cambiar a la vista de código o a la vista dividida.
2. Ubica tu cursor en el punto de inserción inmediatamente antes de la etiqueta de cierre </body> y haz click en Script en la categoría Común del panel insertar o a través del menú Insertar > HTML > Script Objects > Script.
3. En la ventana de diálogo Script, hacer click en el icono en forma de carpeta, ir a la carpeta js y seleccionar el archivo jquery-1.5.2.min.js.  Si descargaste una versión reciente de jQuery, selecciona esa en su lugar. Haz click en OK. El nombre del archivo debe aparecer listado en la ventana de diálogo Script como se muestra en la Figura 1.
   
   
   ^{Figura 1. Seleccionar la librería de jQuery.}
4. Click en OK para cerrar la ventana.  La librería debe aparecer ahora ligada a tu página justo antes de la etiqueta de cierre </body>como se muestra en la Figura 2.
   
   
   ^{Figura 2. La ubicación recomendada la librería jQuery es justo antes de la etiqueta de cierre </body>}
5. Guarda la página.

Agregar la librería jQuery a la página no hace nada por si sola. Simplemente pone los métodos de jQuery disponibles para tus scripts que vienen después de haber vinculado la librería.

Creando manejadores para inicializar documentos

Antes de que comiences a interactuar dinámicamente con tu página web, el browser necesita cargar el HTML y construir la estructura del DOM. Tradicionalmente JavaScript usa el evento onload para inicializar los scripts. Sin embargo, esta espera que todos los recursos de la página, incluyendo las imágenes, terminen de cargar antes de hacer otra cosa. Para acelerar este proceso, jQuery usa su propio manejador de documentos cuando están listos.

Hay diferentes formas de crear manejadores de documentos, pero en este tutorial  voy a mostrar la versión corta. Este es la manera más simple y común de hacerlo.

1. Continua trabajando con el mismo archivo. Alternativamente usa jq_02.html
2. Inserta algunas líneas entre el elemento <script> existente y la etiqueta de cierre </body>
3. Agrega las etiquetas <script></script>  en el espacio que acabas de crear.
4. Dentro de del nuevo bloque escribe $(function() {.
5. Pulsa la tecla enter un par de veces para agregar dos líneas nuevas. Ahora escribe un símbolo de llave que cierra seguido de un paréntesis que cierra y un punto y coma. Los dos bloques de <script> al fondo de tu página deben verse de la siguiente manera:
   
   

   <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
   
   <script>
   
   $(function() {
   
   });
   
   </script>

   Todo el código JavaScript que necesites ejecutar al cargar la página debe ir dentro de las llaves de la función.

Guardar funciones como fragmentos reusables

El código que acabamos de hacer es código que se usa regularmente con jQuery, por lo que podemos guardarlo para poder reusarlo.

1. Selecciona el código completo que acabas de crear.
2. Haz click derecho y selecciona crear nuevo fragmento (o snippet) desde el menú contextual.
3. Escribe  jQuery Document Ready Handler en el campo nombre del cuadro de diálogo.
4. Dreamweaver copia el código seleccionado en el apartado de “Insertar antes”.
5. Haz click dentro del espacio del método y selecciona el código que hay después y córtalo.
6. Pega el código cortado en el apartado de “insertar después”. La ventana con el código debe verse como en la Figura 3.
   
   ^{Figura 3. Los métodos de jQuery que inicializan documentos son usados a menudo por lo que vale la pena guardarlo como un fragmento de código.}
7. Click en OK para guardar el fragmento.

Cuando necesites insertar este fragmento solo coloca tu cursor en el punto de inserción y haz doble click en el fragmento deseado del panel de fragmentos.

Agregar párrafos dinámicamente

Para demostrar como trabaja jQuery, este ejercicio agrega párrafos dinámicamente a la página cuando se carga. Es cierto, no es el uso más práctico de jQuery, pero ilustra dos características esenciales: Seleccionar elementos y usar métodos de jQuery.

1. Continua trabajando con el mismo archivo o usa jq_02.html
2. En el espacio en blanco dentro del método que habías creado, escribe el símbolo de dólar seguido de un paréntesis que abre. Dreamweaver CS5.5  te dará sugerencias de código jQuery. (ver Figura 4)
   
   
   ^{Figura 4. Dreamweaver ofrece consejos de código jQuery a medida que escribes.}
3. Las dos primeras líneas ofrecidas son para el documento, que aplican a todo el documento que es el destino del evento. Tampoco es apropiado para el ejercicio,  pero escribe una comilla (no importa si es simple o doble).Dreamweaver automáticamente agrega la comilla que cierra y despliega una lista de sugerencias de código para elementos HTML (ver Figura 5).
   
   
   ^{Figura 5. Cuando escribes una comilla, las sugerencias de código despliegan elementos HTML}
4. Para seleccionar la etiqueta <body>solo escribe las letras bo y pulsa la tecla enter. Dreamweaver completa el nombre de la etiqueta y deja el cursor antes de la comilla de cierre. jQuery usa selectores CSS para seleccionar elementos de una página por lo que Dreamweaver no puede decir si vas a refinar la selección. En este caso ya has terminado. Mueve tu cursor a la derecha de la comilla de cierre y escribe un paréntesis que cierra. El código ahora se ve de la siguiente manera:
   
   

   $(function() {
   
   $('body')
   
   });

   Esta es la manera en como jQuery selecciona el elemento <body> de la página

5. Después de seleccionar uno o más elementos de la página ya puedes aplicarle métodos de jQuery. Para agregar nuevos elementos de HTML a los elementos seleccionados debes usar el método append() y pasarle los nuevos elementos como argumentos. Escribe un punto después de  $('body'). Dreamweaver CS5.5 muestra sugerencias de código de todos los métodos de jQuery que pueden ser aplicados al o los elementos seleccionados. Selecciona el método append()y pasa una cadena de texto tipo HTML como esto:
   
   

   $(function() {
   
   $('body').append('<p>This paragraph was added dynamically.</p>');
   
   });

6. Guarda la página y revísala en un navegador en el Live View. El nuevo párrafo ha sido agregado a la página (ver Figura 6).
   
   
   ^{Figura 6. El HTML pasado como argumento al método append() ha sido agregado a la página}
   
   Puedes revisar tu código si es necesario con el archivo jq_03.html

Como una forma de comparar el archivo dom_01.html en los archivos de ejemplo produce el mismo resultado usando JavaScript estándar y los métodos de creación de elementos recomendados por la W3C DOM. El bloque <script> en la sección <head> de la página se ve de la siguiente manera:

<script>

function addPara(text) {

var body = document.getElementsByTagName('body')[0],

p = document.createElement('p'),

content = document.createTextNode(text);

p.appendChild(content);

body.appendChild(p);

}



window.onload = function() {

addPara('This paragraph has been added dynamically.');

};



</script>

Estamos de acuerdo que hacer esto con jQuery  es mucho más simple y fácil de entender. Sin embargo, no pienses que usar jQuery es como hacer trampa. Lo que jQuery hace en el fondo es usar JavaScript  estándar. Esconde la complejidad y ayuda a preservar tu salud mental.
En nuestra siguiente entrega revisaremos más a fondo el uso de los métodos de jQuery, como encadenarlos, como ligarlos a eventos de elementos HTML y como pasarle argumentos

[Descargar código de ejemplo]

Recuerda que en Activ tenemos un curso de jQuery con el cual podrás llevar tu conocimiento de JavaScript a otro nivel.

Este artículo lo compartimos aquí bajo licencia Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License, la versión original puedes encontrarla en este link.

En el siguiente video, Scott Fegette (Product Manager de Dreamweaver) explica como los desarrolladores pueden crear aplicaciones móviles aprovechando características como multitouch, cámara y geolocalización mediante jQuery Mobile Framework junto con una versión futura de Dreamweaver.

En este pequeño análisis que merece mucho la pena la lectura completa, se habla acerca del control de eventos en dispositivos móviles y del cómo iOS trajo consigo una serie de nuevos eventos: touchstart, touchmove, touchend, touchcancel.

Eventos de los cuáles cada fabricante hizo su propia implementación (la mayoría basándose en el implementación de Safari Mobile) que como podrán suponer genera una complicación extra para el desarrollo, misma que el mismo equipo sugiere estarán compartiendo sus experiencias del como han superado esos retos dentro de los componentes de jQuery Mobile.