¿Por qué deberías empezar a usar Fireworks? El análisis definitivo (parte II)

¿Seguimos? En la primera parte del artículo sobre Fireworks vimos algunas de las características que para mí lo alzan como vencedor a la hora de prototipar frente a Photoshop. Faltaban aún más cositas que engrandecen la figura del programa y que toca seguir contando, ¿verdad?

Símbolos

Creo que he dicho anteriormente que en se pueden hacer muchas cosas de muchas maneras distintas. Por ejemplo el uso de estilos te permite asignar las mismas propiedades a un número indeterminado de elementos. Pegar atributos también funciona de manera similar. Es decir, hay herramientas y métodos para agilizar la “difusión” de propiedades en diferentes objetos (ya sea de uno en uno o todos a la vez). Los símbolos funcionan de manera similar. Su principal función es permitirte reutilizar objetos de manera que si modificas la apariencia de una instancia del símbolo, automáticamente todos queden modificados también. Los que vengáis de Flash estaréis muy acostubrados a la nomenclatura y uso de símbolos.

simbolos Fireworks

En Fireworks hay tres tipos de símbolos: los símbolos “normales”, los animados y los de tipo botón. De los primeros no hay nada que decir. Los símbolos animados te permiten crear sencillas animaciones fotograma a fotograma o mediante interpolación como en la línea de tiempo de Flash. De esta manera también se pueden crear fácilmente GIFS animados.

Simbolo animado Fireworks

Y los símbolos botón vienen preconfigurados para que los puedas utilizar como elementos HTML y a la hora de exportar el documento en este formato, comprobar la apariencia real del botón. Por defecto a la hora de crear un símbolo de este tipo, Fireworks ya crea automáticamente una zona interactiva y cuatro estados diferentes para el botón para que podamos estilizarlo como queramos.

simbolos boton en fireworks

Tenéis un poco más de información desarrollada sobre los símbolos de animación aquí y sobre los de tipo botón aquí.

De manera adicional, Fireworks incluye una biblioteca con símbolos predefinidos de diferente tipo. Merece la pena detenerse un momento y comprobar todo lo que tenemos ahí dentro 🙂 Hay símbolos especiales que además vienen preconfigurados con una serie de atributos editables. Son los símbolos HTML como el que aparece en la imagen y que facilitan la tarea de crear rápidos prototipos web interactivos.

simbolos html

Y sabed que podremos guardar nuestros símbolos dentro de esta biblioteca común para poder reutilizarlos siempre que queramos en los distintos documentos que vayamos creando.

¿Zonas interactivas?

Fireworks está ideado principalmente para prototipar y preparar contenido de diseño de interacción o web. Y como tal debería tener alguna funcionalidad que nos permitiera comprobar fácilmente cómo responderían determinados objetos ante acciones del usuario. Bueno, si bien, no es la panacea, sí que debemos saber que dentro del programa y sin necesidad de saber absolutamente nada de programación podremos crear efectos de rollover, menús emergentes, conexión entre páginas… Todo ello mediante el uso de zonas interactivas, comportamientos, etc…

Este punto es realmente muy denso y se pueden hacer muchas cosas. De momento os voy a dejar un enlace con unos vídeos con los que podréis comprobar rápidamente de lo que estoy hablando: Interaction design and rapid prototyping with Fireworks [en]. En su momento también os hablaré del curso completo de Fireworks que hice para video2brain y donde explico detalle por detalle todas las capacidades. Pero de momento toca esperar un poco.

Buscar y reemplazar

buscar y reemplazar

Una de las herramientas más útiles a mi ver dentro de Fireworks es Buscar y reemplazar (está dentro del menú edición). Esta herramienta te permite ahorrar muchísimo tiempo en situaciones de lo más dispar: cambiar el color de todos los vínculos de un prototipo, modificar el tipo de letra, sustituir palabras. Además lo “simpático” es que la herramienta funciona incluso en documentos que no tengas abiertos en el programa. Os emplazo a que probéis la herramienta. Y sí, a veces petardea…pero funciona!

Procesado por lotes

Proceso por lotes fireworks

Vaaaale, esto ya lo tiene Photoshop. Y no es que funcione de manera muy distinta pero claro, imaginaos la suma de comandos como el anteriormente mencionado de Buscar y reemplazar a todo un conjunto de documentos a la vez. Sumarle a eso el hecho de además (también como en Photoshop) podremos crear nuestras propias acciones (en Fireworks se llaman comandos) y sumarlas también a un único proceso!

Hay más?

Sí, hay mucho más. Pero he decidido que lo mejor es no seguir dando la tabarra con artículos kilométricos cuando lo mejor es que probéis vosotros mismos el programa. Además acaba de salir la nueva versión CS5 con unas cuantas novedades extra.

En Internet hay un montón de información adicional sobre este programa. Mismamente usando en Criterion la etiqueta Fireworks tenéis acceso a y extensiones como los de John Dunning [en] o los Orange Commands [en]. Recordad mi curso 🙂

También hay cositas que merece la pena leer:

Yo por mi parte seguiré recogiendo cositas interesantes sobre el programa para compartirlas con vosotros. De hecho se me está pasando por la cabeza hacer un ebook sobre Fireworks que abarque todo el programa al detalle. Veremos en qué queda la cosa. De momento ya tengo un par de cursos publicados.

  • Pingback: Bitacoras.com()

  • Pingback: ...¿Por qué deberías empezar a usar Fireworks? El análisis definitivo (parte II) » Criterion [criteriondg.info] on Topsy.com()

  • Surien

    Genial! Ya pensaba que no habría segunda parte! 😉

  • Skeku

    Me ha costado un poquito terminarlo pero con el tiempo limitado que tengo, no he podido hacerlo antes :S Si me lío finalmente con lo del ebook creo que lo acabaré para cuando salga la CS7 xD

  • dnlosx

    Gracias por el articulo ahora veo que Fireworks es mucho más potente de lo que pensaba, no entiendo por que ni siquiera lo ha destacado en la actualización CS5, pareciera que le dan más importancia hasta a photoshop elements.

  • Un artículo genial. Muy buen trabajo.

    Coincido en todo lo que has planteado en las dos partes.

    Sin embargo pienso que al final va a marca mucho el tipo de diseño web que el diseñador plantee. Si hubiera que trabajar mucho con imágenes no me plantearía el Fireworks y si tuviera que trabajar mucho con vectores seguramente me plantearía más el Illustrator. Supongo que al final se podría exportar estos ficheros al Fireworks. Pero hoy en día casi prefiero trabajar directamente el código sobre Dreamweaver y tener un control total sobre las imágenes que exporto y el código que genero, sobre todo, cuando se trata de portales grandes.

    Lo suyo es que no tuvieran que existir tantos programas. Aún me pregunto porque no puede existir uno que integre toda la potencia del Photoshop, el Illustrator y el Dreamweaver. Y que nadie me diga que no se puede ya que existe el Fireworks. Supongo que todo es cuestión de ventas.

  • Skeku

    @Jérôme lo que pides creo que es casi imposible. Mover un mastodonte con un motor de mapa de bits como Photoshop, el motor vector de Illustrator y todas las cositas de DW elevaría los requisitos mínimos a unos límites que no creo que Adobe quiera. Pero claro, hablo sin saber realmente. No obstante me baso en la experiencia que me da el usar esos programas y no veo que esa “mezcla” fuese capar de mantener el tipo en términos de rendimiento/estabilidad.

    Yo lo enfocaría más todo a cómo se puede trabajar con Soundbooth, Premiere y After Effects mediante el link connection. Haces un proyecto en premiere, te haces una secuencia en After, editas el audio en soundbooth, todo ello vinculado y actualizado en tiempo real. Sí, es necesario tenerlo todo abierto pero me parece que el sistema lo soporta mejor.

    Sólo hace falta ver Fireworks (que mezcla bitmap y vector), que petardea a veces que da gusto y que en lo que a usar mapa de bits y edicion de imagen no es lo más recomendable.

    De todas formas está claro tal y como dices que el aspecto visual de la página decantará la balanza a un lado u otro. Pero yo sigo prefiriendo usar Fireworks como base y tener abierto Photoshop para tareas alternativas. Creo que es cuestión de gustos 🙂

  • Actualmente llegue a ese post por medio del tutorial en video de WordPress de Video 2 Brain, y aparecía este post dentro del video el cual me llamó mucho la atención, pues FW es un software que tengo bastante descuidado, lo que me preocupa es que no encuentro la primera parte de este post, ¿Dónde está?

  • Skeku

    Carlos el enlace a la primera parte lo tienes arriba del todo de este post.

    Saludos!

  • roc

    Hola Sheku
    Gracias por el artículo, excelente y rotundo.
    Lo encontré buscando opiniones sobre qué es mejor en cuanto a tratamiento de texto: ¿editar desde ps? o ¿en fw directamente?
    No he encontrado nada, ¿tienes una opinión?
    Muchas gracias
    salud
    roc

  • Skeku

    @roc Si es tratamiento de texto para aplicarle efectos “especiales”, depende de lo que quieras conseguir aunque creo que Photoshop te será más sencillo. Yo los efectos más complejos como por ejemplo esto los hago en Photoshop.

    Pero habitualmente no necesito tanto retoque y por lo tanto suelo hacerlo en Fireworks 🙂

    Si te refieres a maquetar a nivel editorial (libros, publicaciones…) ninguno de los dos es la opción preferible. Deberias considerar usar otros programas como InDesign o Illustrator (éste último si no son publicaciones muy densas o de mucha extensión).

  • Judith

    Hola Skeku,

    Recién acabo de terminar el curso de Diseño Web con Fireworks que tu hiciste y me pareció excelente, pero al final quedé con la duda de si con sólo este programa creo el sitio web listo para subir al servidor o si requiero de Dreamweaver luego. Y si es así si me permite exportar desde fireworks a dreamweaver y desde este programa finiquitar detalles. Tengo esa duda y no encuentro nadie que me la resuelva, por lo visto son pocos los que usan a profundidad este programa (Fw).

    Yo estoy enamorada de este programa desde que lo descubrí.

  • Skeku

    @Judith, el spam se había tragado tu comentario y no lo he visto hasta ahora :S

    Si aún te sirve la respuesta, comentarte que FW no es un programa que te genere un código útil para una web “real”. Sí, exporta CSS y también HTML pero no lo recomiendo como código final de un proyecto. Te puede servir para montar prototipos rápidos pero para preparar algo más complejo, necesitarás echar mano de otro programa y de conocimientos de html/css.

    FW es para la fase de prototipado y diseño.

    Saludos!