CSS3 creado en Adobe Fireworks usando CSS3 Mobile Pack

CSS3 en FireworksPor twitter nos enteramos de la nueva extensión que lanzo Adobe para Fireworks llamada CSS3 Mobile Pack. Esta extensión tiene don funcionalidades principalmente

  • Modificar el diseño de templates que se usan para crear aplicaciones para móviles con jQuery Mobile (de lo que hablaremos en otro post)
  • Exportar las propiedades CSS de los diseños que hagamos en Fireworks, para que el paso del diseño web a la maquetación en HTML/CSS se nos facilite mucho gracias al panel de propiedades CSS.

Este artículo está basado en el tutorial publicado por Shubhashri C. G. en el Fireworks Developer Center donde habla de cómo trabajar con esta última funcionalidad de la nueva extensión para Adobe Fireworks CSS3 Mobile Pack

Extrayendo las propiedades CSS de los objetos diseñados en Fireworks

 

Generalmente, cuando se va a crear un sitio web, lo que se hace primero diseñar cada una de las secciones en algún programa de diseño como puede ser Adobe Fireworks o Photoshop y posteriormente el diseñador entregara esto al programador o diseñador web, para que el trate de reproducir este diseño por medio de HTML, CSS y JavaScript en el sitio final. Si un diseño no puede ser representado usando solamente código, seguramente se utilicen las imágenes como tal y se unan usando HTML y JavaScript.

 

Ahora que CSS3 está ganando tanta popularidad y soporte por parte de los navegadores modernos, muchos aspectos de diseño que antes no se podían lograr en web ahora son posibles usando CSS3. Es aquí donde podemos instalar el CSS3 Mobile Pack para usar el panel de propiedades CSSy simplificar así el paso del diseño a CSS.

 

Con esta extensión nos será posible exportar el código CSS3 que generará, por ejemplo, un cuadro con degradado y bordes redondeados en CSS, con las propiedades específicas de renderización en navegadores como Mozilla Firefox, Google Chrome, Apple Safari, Opera, y Microsoft Internet Explorer.

El panel de propiedades CSS (CSS Properties)

 

  1. Antes de usar el panel CSS Properties se debe descargar el CSS3 Mobile Pack e instalarlo.
  2. Si esta abierto Adobe Fireworks primero se debe cerrar antes de continuar.
  3. Se debe bajar el CSS3 Mobile Pack para tener el panel de CSS Properties
  4. Ejecutar el Adobe Extension Manager como administrador (En Windows Vista y Windows 7, debe tener acceso como administrador para poderlo instalar)
  5. De clic en el botón de instalar para instalar la extensión
  6. Busque la extensión llamada fireworks_css3mobile_p1_100311.zxp
  7. Cuando tenga seleccionada la extensión, de clic en open para empezar la instalación
  8. Una vez ha terminado de instalar la extensión ya puede abrir Fireworks para que los cambios tengan efecto

Con esto ya queda instalada la extensión en su computador.

Usando el panel CSS Properties en las extensiones de Fireworks

 

Una vez instalada la extensión, podremos usar el panel mencionado para obtener las propiedades CSS del objeto que seleccionemos en el lienzo sobre el que estemos trabajando. Para ver cómo funciona, podemos crear un nuevo diseño o abrir un PNG existente para trabajar en el diseño de un sitio. En este caso miraremos las propiedades de un objeto que vamos a dibujar sobre el lienzo:

  1. Para esto, abrimos el panel CSS Properties seleccionando Ventana > Extensiones > CSS Properties. (véase Figura 1)

    panel de propiedes CSS del CSS3 Mobile Pack para Fireworks

    Figura 1 - Panel de propiedades CSS Fireworks

  2. Damos clic en el botón inferior izquierdo del panel (Refresh Panel) para ver la lista de propiedades CSS del objeto que tenemos seleccionado. (véase Figura 2)

    Propiedades CSS en Fireworks de un cuadrado con bordes redondeados y degrade

    Figura 2 - Panel de propiedades CSS

  3. Para copiar las propiedades del objeto seleccionado, podemos escoger dos opciones:
  • Seleccionar y copiar todas las propiedades, con el botón Copy All.
  • Seleccionar solo algunas de las propiedades, oprimiendo la techa Shift  mientras seleccionamos las reglas que queremos copiar – o presionar Control+clic (para Windows) o Command+clic (para Mac) para seleccionar las propiedades – y luego dar clic en el botón Copy Selected

De esta forma, podemos tomar las propiedades CSS de un objeto y copiarlas en el archivo CSS directamente donde necesitemos usarlas. Por ejemplo, podemos abrir Adobe Dreamweaver CS5 o posterior, y aplicarle estas propiedades a un div. Luego ponemos la vista en vivo para comprobar que las propiedades copiadas crean un objeto igual al que diseñamos en Fireworks (Véase Figura 3)

Vista en vivo de cuadro con gradiente y bordes redondeados en Dreamweaver

Figura 3 - Vista en vivo en Dreamweaver del objeto diseñado en Fireworks

Aunque en este ejemplo, en la vista en vivo se ve el degrade pero no los bordes redondeados, podemos comprobar que al abrirlo en Google Chrome, si se ven correctamente los bordes redondeados. (Véase Figura 4)

Objeto diseñado en Fireworks, exportado a Dreamweaver y visto en Chrome

Figura 4 - Vista del cuadrado en Google Chrome

Consideraciones que hay que tener al extraer el código CSS de las propiedades de objetos diseñados en Fireworks.

 

Cuando se trabaja con esta extensión hay algunas restricciones como:

  • El panel de propiedades no se refresca automáticamente cuando se selecciona un objeto diferente. Para actualizar la lista de reglas CSS, se debe dar clic en el botón de Refresh  cada vez que se seleccione un nuevo objeto.
  • El panel de CSS Propierties tiene un tamaño fijo, no se puede expandir.
  • Esta extensión está disponible solo en inglés, como ya se habrán podido dar cuenta si realizaron todo el proceso.

Si quieren saber un poco más de esta nueva extensión de Fireworks, pueden ver este video del senior product manager de Fireworks, Takashi Morifusa.

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>