Desventajas de Fireworks para maquetación web

Excelente tip, txuma! Yo soy fanática de FW, pero me falta mucho por aprender, aparentemente

Y una vez más, donde dije digo, digo Diego.... porque he encontrado la solución a todos mis problemas. Ya tengo la fórmula perfecta para poder reutilizar elementos entre distintos ficheros. Os lo explico en plan tutorial.

Imaginemos que queremos tener un menú que después pueda importar y colocar en todos mis archivos, y que si hago un cambio en el menú me cambie de forma fácil en todos los sitios donde tengo ese menú (creo que es la pregunta inicial de Xavi). Vamos allá!! (los nombres de los menús, etc, van en inglés)

1. Haz un fichero nuevo en Fireworks y diseña tu menú de navegación

2. Cuando esté terminado, selecciónalo todo y conviértelo en un símbolo (F8). El símobolo aparecerá en el panel Document Library (no es necesario guardarlo en la Common Library)

3. Selecciona el símbolo es ese panel, y en el menú de opciones de dicho panel elige la opción 'Export...'. Tendrás que darle un nombre y escoger una ubicación. El programa te guardará un archivo PNG.

4. Cierra ese archivo (no es necesario ni que lo guardes)

5. Crea un documento nuevo (o dos, tres, cuatro...); es decir, los documentos donde va a ir insertando el menú de navegación.

5. En las opciones del panel 'Document Library' selecciona la opción 'Import....'. Aparecerá un cuadro de diálogo. Escoge el fichero PNG que hemos guardado anteriormente al exportar.

6. Aparecerá en la librería el símbolo que habíamos creado con el menú, así que ya puedes arrastralo al área de trabajo.

7. Si quieres hacer alguna moficación, abre el fichero PNG que hemos creado al exportar, modifica cualquier elemento en el símbolo y vuelve a guardar.

8. Ahora vete a cualquier archivo donde hayas importado y coloca el menú, y en las opciones de 'Document Library' escoge 'Update'

Y voila! El menú se actualiza con los cambios que hayas hecho.

No sé vosotros, pero hoy yo soy un poco más eficiente en mi trabajo :)

Abrazos!

Bueno, rescato este hilo para comentar algunas carencias que le veo a Fireworks, al hilo de lo que se comenta un poco más arriba (poder reutilizar elementos en distintas pantallas).

Utilizar la librería del documento para tener símbolos que puedas reutilizar en un documento es muy práctico; y más todavía gracias a que puedes añadir páginas maestras y tener varias páginas más práctico todavía. Pero eso te vale para cuando tienes una web con

Pero, ¿qué pasa cuando no puedes tener todas las pantallas de una web en un solo archivo? El ejemplo viene porque estoy diseñando una web en las que tengo que preparar unas 120 pantallas, y es imposible tenerlas todas en un mismo fichero (el manejo de archivos multipágina, con muchas páginas es muy lento). Lógicamente esas 120 pantallas tienen elementos comunes, y sería muy útil poder utilizar una librería común para todos los ficheros.

Andaaaaa.... pero si Fireworks tiene una Librería Común!!!! Pues que nadie se haga ilusiones, porque no vale como solución. Los elementos que cada uno crea en la librería común se pueden editar, sí, pero no se modifican de forma automática todos aquellos sitios donde han sido incluidos.

Así que me retracto de lo que dije en su día y cambio mi declaración: la reutilización de elementos en Fireworks todavía no está bien resuelta.

Justo acabo de instalar la última release de la beta del CS4, y la mejora ha sido muy considerable; han corregido algunos bugs bastante importantes.

Lo que también he descubierto es que, para que todo vaya como Dios manda, es necesario hacer una desinstalación completa de las anteriores versiones, incliudas las preferencias del programas, etc. Muchos de los petes que me estaba dando a mi erá por instalar una sobre otra.

No es cosa sólo tuya, no. La realidad es que Adobe tiene bastante mal optimizado este software para Leopard, con un rendimiento muy por debajo de lo que debería tener.

Espero que se pongan las pilas, y en la RC tengan solucionadas todas esas cosas.

A mi la beta del CS4 me petardea igual que el CS3. Joer si es que para duplicar una capa o crear una nueva, hay un retardo del copón. Pensé que era cosa de mi mac, pero ya veo que no :S

xD

Me imagino a los programadores:

"Ya está el txuma este abriendo tickets para puñetitas en el mac, grgrgr" :D

Rodolfo

Txuma: La version CS4 para Mac, arregla la velocidad de cursor cuando escribimos, entre otras "cosillas"?

El manejo de textos sigue siendo, para mí, la gran asignatura de FW. En la beta todavía deja bastante que deseear, pero tienen abiertos muchos 'tickets' en su base de datos de bugs, así que espero que les hagan caso y nos arreglen todo eso.

Qué grandes son los Smashing Pumpkins estos :)

Tutos de FW a cascoporro!

Como dice Txuma, Fireworks CS3 para Mac tiene basante bugs, y es una pena...

Las web que diseño las hago en Fireworks y si tengo que añadir algun grafico complejo, generalmente lo hago dentro del fireworks o lo traigo de photoshop.

Txuma: La version CS4 para Mac, arregla la velocidad de cursor cuando escribimos, entre otras "cosillas"?

Ea! Entonces no hay contras para fireworks. Como decía antes, desconozco si se pueden hacer cosas de este tipo con él. Era un "si no se puede, no mola".

El asunto wireframing tiene buena pinta, tendré que mirarlo. Para ese tipo de cosas acabamos usando aplicaciones externas y mola que lo integre. Por lo menos para hacer los primeros prototipos tiene una pinta extupenda.

viva!

Efectivamente, estamos hablando de cosas muy distintas. Tal vez el término 'experiencia interactiva' sea más adecuado :)

Dígase:

Nike Air
http://www.bigspaceship.com/archive/nikeair/

Get the Glass...
http://www.gettheglass.com/ (y 3d)

Cualquiera de North Kingdom...
www.northkingdom.com

Halo3....

Quizás tendria que haber dicho experiencias interactivas en vez de webs del copon....

ivanv

Los diseñadores/maquetadores de webs van con Fireworks pero los que crean webs del copon van con Photoshop....

Define 'web del copón' y pon un ejemplo, plis.

Los diseñadores/maquetadores de webs van con Fireworks pero los que crean webs del copon van con Photoshop....

A que al final me jodeis el verano aprendiendo fireworks? ¬¬

Y se me ha olvidado otro detalle de esos que me enamoraron en su día: las guías de escala en 9 divisiones. Quien no sepa qué es lo entederá con este tutorial:

http://www.virtualclues.com/9Slice_Scaling.php

Xavi, lo que tú dices sí se puede hacer, aunque creo que no en la forma en la que tu estás pensando (con documentos externos). Lo que si puedes hacer es crear símbolos con distintas partes de layout, y después colocar instancias de esos símbolos a lo largo de las distintas páginas. O bien, como te ha dicho Joshua, jugar con páginas maestras, que contienen esos símbolos.

El hecho de que sea un archivo externo o un elemento de la biblioteca del propio documento me parece irrelevante, lo importante es poder editarlo por separado y que se modifiquen todas las instancias.

Yo para diseño web ya no utilizo otra cosa, me parece mucho mejor que Photoshop de calle. Es un programa pensado expresamente para diseño web, y eso se nota mucho. Otra cosa distinta es que alguien quiera una web que lleva en la cabecera una composición hiperartisticamegaguay, con miles de brillos, difuminados, etc. En ese caso, hago esa composición en photoshop, y el resto de los elementos en Fireworks.

Por no hablar de lo útil que resulta si queremos hacer prototipos funcionales de verdad. Echadle un vistazo a estos dos artículos:

http://www.adobe.com/devnet/fireworks/articles/mockup_pages.html
http://www.adobe.com/devnet/fireworks/articles/wireframing.html

El único problema que le encuentro, que el rendimiento con OS X (Leopard) deja un poco que desear, además de algunos bugs bastante molestos. De todos modos, desde hace algunas semanas soy betatester oficial de la versión CS4, y parece que están puliendo bastante todas esas cosas.

Fireworks Powa!

hmm si, es como el place de illustrator. Imagina tres psd: cabecera.psd para la cabecera, pie.psd para el pie, y esrtructura.psd que es "la madre", para entendernos.

Dentro de estructura.psd (donde tienes tu retícula montadica y airosa) haces un place de cabecera.psd y pie.psd y de tantos contenidos.psd como quieras. Eso crea una especie de "smart object" (no sé como decirlo en apañó!) que queda en el panel de capas como una capa más. Haciendo doble click sobre él, puedes editarlo (cambiar el color del patapim, por ejemplo) y se actualizará en cuantos documentos lo tengas colocado.

No es agrupar cosas en carpetas de un documento, es tener varios documentos, uno para cada cosa, y reaprovecharlos. Luego además a la hora de montar el html facilita bastante el trabajo porque te permite trabajar por partes.

Place? Como en Ilustrator, traer otro fichero al documento? O como en Freehand, eso de "pegar dentro"? (Que en AI es enmascarar") O te refieres a enmascarar? Pues... Todo eso está en FW. Dime qué quieres hacer que no te pillo...

xavib

Cuando trabajas en layouts lo bastante grandes como para que haya uno por página, tener el menú, la cabecera o ciertas partes del contenido en PSD a parte hacen la tarea bastante más fácil. Sobretodo a la hora de hacer modificaciones idiotas del tipo "cámbiame el rojo del menú del footer".
Si fireworks no tuviera eso (ni idea de si está) me parecería un motivo para dejar de usarlo, creo.

FW te crea "páginas" de un site, que es (creo) lo que tu dices, o sea, instancias de lo que tienes en la maqueta madre, digamos. Yo meto el menu, por ej, en una carpeta, y lo muestro u oculto dependiendo de la página que cree.
Lo de las páginas mola porque luego se pueden exportar y todo el cojunto de páginas que hayas creado se transforman en un prototipo navegable, cosa que no está nada mal.

¿Con fireworks tb se puede hacer "place" (¿colocar?)?

Cuando trabajas en layouts lo bastante grandes como para que haya uno por página, tener el menú, la cabecera o ciertas partes del contenido en PSD a parte hacen la tarea bastante más fácil. Sobretodo a la hora de hacer modificaciones idiotas del tipo "cámbiame el rojo del menú del footer".

Si fireworks no tuviera eso (ni idea de si está) me parecería un motivo para dejar de usarlo, creo.

Me apunto esa de hacer capas de recorte ;)

Con DW, para maquetar en CSS, al final yo termino picando código, pero el CS3 es tan cómodo y da tantas ayudas en el código que al final ya no se maquetar de otra manera :) Y mira que tengo el Xyle Scope y el CSS Edit, que son cojonudos los dos, pero al final siempre vuelvo a DW.

Yo es que hasta la fecha para esas cosas soy muy clasicón.

La propuesta la hago en photoshop, y además, amos no se el fireworks pero si decís que para cositas complejas no va muy allá no creo que me fuese a hacer mucho apaño por que gran parte de las webs que suelo hacer, por ásí decirlo las imprimo un caracter muy "recreacional", con lo que a veces van ahi montajes a todo pasto, mucho tratamiento de foto, etc etc.

Y uso un sistemita que aunque a priori lento, al final me viene muy facilón y tardo menos, y es tan simple como dentro del mismo .psd hacerme capas de recorte, con lo que con pinchar, ya la tengo recortada y sobre todo si después alguién tiene que hacer alguna modificación lo tiene a huevo.

Y en cuanto a maquetar, he intentado alguna vez usar programas que te ayuden pero al final escribo el código y acabo antes, o bien con algun programa tipo ultraedit o con el dreamweaver, que viene bien para tener el sitio controlado, con que me autocompleten el código me sobra.

Pero amos le echaré un ojo si decís que esta cuco.

La versión CS4 traerá un soporte bastante mejorado de maquetación CSS, por lo menos eso se puede ir viendo ya en los vídeos que fueron soltando :)

joshuatree

<div class="quote">
joshuatree

<blockquote>Creo que también puede exportar un diseño montado en CSS, como también lo puede hacer PS, pero a costa de crear capas con posicionamiento absoluto, cosa que no es muy flexible ni recomendable que digamos, si lo que maquetas es para web.</blockquote>
</div>

por no leer todo :D

corroboro lo dicho por joshua.

afj

Po coño es lo que os preguntaba yo al principio, si maquetaba con divs...

Ay, que no estamos a lo que estamos... :D

es que creo que es estas equivocado en el concepto de fireworks, fireworks es una herramienta para "diseñar/prototipar" web tiene opciones de exportado xhtml/css pero no es su fuerte lo suyo es maquetarlo tu.a tu pregunta si que que se puede hacer que te exporte con divs/css ;)

joshuatree

Creo que también puede exportar un diseño montado en CSS, como también lo puede hacer PS, pero a costa de crear capas con posicionamiento absoluto, cosa que no es muy flexible ni recomendable que digamos, si lo que maquetas es para web.

Po coño es lo que os preguntaba yo al principio, si maquetaba con divs...

Ay, que no estamos a lo que estamos... :D

Google no reconoce la estructura y/o jerarquía sintáctica en una web que se ha maquetado con tablas. Ahí está el problema. Las tablas se pueden usar perfectamente, PERO PARA LO QUE SIRVEN, presentar datos tabulados, no para maquetar.

Lo que preguntas es más largo de explicar que las dos cosas de nada que te he dicho yo, así que te recomiendo buscar por CSS en este foro, en google, y echar un vistazo a tutoriales como los de

tutorial de css de w3schools

list tutorial

float tutorial

select tutorial