En este tutorial de CSS3, aprenderás como instalar el Mobile Pack para Adobe Fireworks CS5 y CS5.1. Veremos como trabajar con la extensión para extraer propiedades (esquinas rendondeadas, opacidad y más) de un objeto seleccionado y mapear el diseño en CSS3 para su uso en la web.

La extensión contiene dos características principales:

• jQuery Mobile theme skinning: Al utilizar la extensión, puedes crear temas para sitios jQuery Mobile. La interface permite previsualizar y exportar el código CSS correspondiente y los sprite assets. Para aprender más sobre el uso de la extensión, ver Creación de temas jQuery Mobile en Fireworks usando CSS3 Mobile Pack.

• CSS Panel de propiedades: La extensión CSS Properties, mapea todas las propiedades de un objeto de Fireworks que puedan ser representadas en CSS.

Enlista las propiedades CSS equivalentes al panel CSS Properties.

Este tutorial de CSS3 para Fireworks, cubre como trabajar con esta última característica de la extensión.

Extracción de Propiedades de objetos de diseño.

Los diseñadores gráficos, generalmente diseñan un sitio con una herramienta como Adobe Fireworks CS5 o anterior. El diseñador web utiliza el diseño estático para traducirlo a una página, usando HTML, CSS, JavaScript y varias imágenes. Si un diseño no puede ser representado con código CSS por si solo, se exportan las imágenes como slices y se pegan unas con otras utilizando HTML y JavaScript.

Mientras aumenta el soporte para CSS3 en navegadores modernos, muchos aspectos de diseño pueden ser representados únicamente usando CSS. Puedes utilizar CSS3 Mobile Pack para instalar el panel CSS Properties y simplificar este proceso a veces tedioso. Con el uso del panel CSS Properties, puedes extraer las propiedades del diseño de objetos en Fireworks que puedan ser representadas en CSS. En este ejemplo, verás como la extensión reduce el esfuerzo que normalmente se requiere cuando trasladas manualmente los efectos gráficos a las propiedades CSS específicas de un navegador.

Usarás el panel CSS Properties para mapear las propiedades de un objeto de Fireworks que puedan ser representadas en CSS. Después de seleccionar el objeto deseado, el panel enlista las propiedades extraídas en el panel CSS Properties. Descubrirás que muchas características de diseño como las esquinas redondeadas, degradados, sombras y transformaciones que generas en Fireworks, se pueden trasladar fácilmente a CSS.

La extensión incluso enlista propiedades específicas CSS de algún navegador, en orden para mantener consistencia en el diseño en los navegadores más populares como Mozilla Firefox, Google Chrome, Apple Safari, Opera y Microsoft Internet Explorer.

Trabajo con el panel CSS Properties

  1. Antes de que puedas utilizar el panel CSS Properties, necesitas descargar el CSS3 Mobile Pack e instalarlo.
  2. Quita Fireworks si esta en uso.
  3. Descarga el paquete CSS3 Mobile Pack para propiedades CSS.
  4. Abre el administrador Adobe Extension Manager. (En Windows Vista y Windows 7, necesitas acceso de administrador para instalarlo en tu computadora.)
  5. Da clic en el botón Install de la extensión.
  6. Navega para seleccionar la extensión FireworksHTML5pack.zxp.
  7. Al seleccionar la extensión, da clic en Open para iniciar el proceso de instalación.
  8. Después de instalar la extensión, reinicia Fireworks para que los cambios tomen efecto.

En este punto, la extensión esta instalada en tu máquina con su funcionalidad actualizada.

Uso del panel CSS Properties con la extensión de Fireworks.

Después de instalar la extensión, la nueva interfaz de Fireworks desplegará el panel CSS properties de un objeto seleccionado en el área de trabajo. Para ver como funciona, puedes crear nuevo material en el área de trabajo o abrir un PNG existente para trabajar con el diseño de un sitio.Tienes que seleccionar el objeto en el área de trabajo para poder extraer sus propiedades CSS.

1. Abre el panel CSS properties seleccionando Window / Extensions / CSS Properties (ver Figura 1).

Figura 1. Menú CSS Properties Extension

Aparece el panel CSS Properties. Las diferentes secciones del panel se describen en la Figura 2.

Figura 2. El panel CSS Properties disponible después de su instalación.

2. Da clic en el botón Refresh del panel para ver una lista de propiedades CSS del objeto que hayas seleccionado (ver Figura 3).

Figura 3. El panel CSS Properties despliega una lista de los estilos CSS extraídos.

3. Para copiar las propiedades CSS del objeto, selecciona alguna de las siguientes opciones:

• Para seleccionar y copiar todas las propiedades extraídas, da clic en el botón Copy All.

• Para seleccionar un subconjunto de propiedades, presiona Shift mientras das clic a reglas que deseas – o presiona Control+clic (Windows) o Comando+clic (Mac) para seleccionar las reglas deseadas –  después selecciona el botón Copy Selected.

Al utilizar este enfoque, puedes extraer propiedades CSS y copiar las reglas para pegarlas en un archivo CSS de tu elección. Abre la hoja de estilos CSS de un sitio en Adobe Dreamweaver CS5 o anterior. Después de pegar los nuevos estilos, regresa a la pagina HTML y presiona el botón Live View en la parte superior de la ventana del documento. Live View, abilita la previsualización te la pagina como aparece en el navegador. Alternativamente puedes escoger File / Preview in Browser para ver la pagina  HTML en un navegador y probarla. El objeto aparecerá exactamente como se despliega en Fireworks.

Consideraciones al extraer propiedades de objetos como código CSS.

Cuando trabajas con CSS3 Mobile Pack, para extraer propiedades CSS de objetos de Fireworks, hay algunas restricciones. Toma en cuenta las siguientes limitaciones:

• El panel CSS Properties no se actualiza de manera automática al seleccionar diferentes objetos en el área de trabajo de Fireworks.

• El panel CSS Properties es de un tamaño predeterminado; no se puede expandir a dimensiones más grandes.

• Al momento de escribir este artículo, la extensión sólo esta disponible en Inglés.

A dónde ir a partir de aqui

La nueva funcionalidad de extraer reglas CSS de material gráfico en Fireworks CS5 o anterior, incrementará efectivamente el flujo de trabajo del diseño web mientras produces sitios. Al utilizar el panel CSS Properties, puedes ver que características de diseño tienen soporte en CSS3. (No todas las propiedades CSS3 se pueden representar en Fireworks; muestra solo las propiedades CSS3 que pueden ser mapeadas.) Simplemente copiando las reglas generadas, puedes actualizar sitios para utilizar el código estándar en la industria con un mínimo esfuerzo. Adicionalmente, el CSS es compatible a través de diferentes navegadores para asegurar que el sito se cargará rápido y aparecerá como esperas al cargar la versión en línea.

Para aprender más sobre CSS3 Mobile Pack, ver Creación de temas jQuery Mobile en Fireworks usando CSS3 Mobile Pack, puedes ver al Product Manager, Takashi Morifusa, hacer una demostración del uso de la herramienta jQuery Mobile theme skinning en el panel CSS3 Properties. Asegurate de ver también HTML5 y CSS3 Centro de Desarrollo. Esperamos que les haya gustado este tutorial de CSS3.