En este artículo aprenderás como trabajar con Adobe Fireworks CS6 para crear skins de jQuery Mobile personalizables y usarlos en sitios web móviles basado en el Framework de jQuery Mobile.

Fireworks_CS6_mnemonic

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

Temas Predeterminados

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:

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

Crear nuevo tema

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

Recursos relacionados

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.

Nombre del Icono

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

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

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

Crear ilustración

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

Después de modificar la página

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

Elegir opción

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

Panel de Vista Previa

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

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

Vista Previa en el Navegador

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

Exportar tema

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

Exportar solo un elemento

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.

Enlace local o remoto

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:

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

Enlace al CSS

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

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

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:

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

Vista Previa en Dreamweaver

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.

Muestras en jQuery Mobile

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

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.

Atributo data-icon

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.