Cuando empecé a usar Dreamweaver, casi todo lo hacía desde el editor gráfico (WYSIWIG - What You See Is What You Get), pero de a poco empecé a usar la pantalla dividida entre código y gráficos. Con el paso del tiempo (meses de intenso entrenamiento!), terminé usando derechamente la interfaz de código a pantalla completa. Es decir, parece ya no necesitaba WYSIWIG.

Entonces me tocó diseñar un sitio para Wordpress. Para los que no lo conozcan, es un CMS donde todo lo manejas por tu navegador, desde los posts que escribes hasta la configuración del sitio. La cosa es que la estructura de la página la editaba directo en el panel de administración (eliminando DIVs, agregando clases, etcétera), ya ni siquiera pasando el código a Dreamweaver y de vuelta. Wordpress, al menos, tiene la gracia de que el su código es bastante fácil de entender.

Pero ahora viene lo importante. Después de guardar los cambios y relodear la página, obviamente todo aparecía desordenado... hasta que abría el Web Developer Toolbar (WDT). Con EditCSS, una excelente herramienta del WDT, empecé a componer el CSS directamente ahí, y después lo pasaba al stylesheet del template.

Otra herramienta del WDT se llama "Outline Block Level Elements", que como dice el nombre te muestra los límites de los distintos DIVs (y de qué tipo son); también puedes ver tablas, forms, etcétera. Pero la guinda de la torta es el "View Style Information", que te permite ver la estructura CSS de la página, de acuerdo a la parte de la página donde tengas puesto el cursor. Nota: para que funcione esta herramienta en Linux tienes que instalar el DOM Inspector de Firefox.

Entonces: cargas la página, miras los DIVs y ves cómo se llama cada clase o ID, abres el EditCSS y empiezas. A medida que vayas avanzando con el código (y que te guste el resultado, por supuesto), simplemente copias el pedazo de texto que escribiste y lo pegas en el panel de administración de tu CMS. Y eso es, estás diseñando una página sin Dreamweaver.

Por supuesto que hay varias otras herramientas que son necesarias para acompañar el Web Developer Toolbar, especialmente si se trata de partir una página desde cero. Particularmene, un editor de código (ahí el Bluefish cumple perfectamente la función) más el GIMP, o cualquier otra herramienta para ver la paleta de colores y su formato en HTML.

Bueno, la cosa es que cambio Dreamweaver por el Web Developer Toolbar. Primero, es multiplataforma (es una extensión de Firefox). Es livianísimo, pesa menos de 100 kilobytes. Y además es gratis. ¿Hay algo mejor que eso? ¿Para qué necesito Dreamweaver?

jajajajaja, que divertido que recien ahora te cambies, yo nunca use Dreamweaver solo Firefox, eso es lo divertido de no saber mucho y buscar lo mas simple (sin pagar nada), eso siempre te lleva a Lunix y software libres construidos para hacerte la vida facil.
Tomas necesito tu telefono, te llamo al celular y no me funciona, dime donde y a que hora.

Para la paleta de colores puedes usar la extensión ColorZilla, para no perder el hilo del firefox...

https://addons.mozilla.org/extensions/moreinfo.php?application=firefox&id=271

Emmm... hace tiempo andaba buscando algo como eso, asi que lo voy a probar para ver que tal va la cosa, ya que yo aun uso dreamweaver.

¡Envidia! Borrar la partición de Windows es todo lo que quiero, pero nadie me mandó a estudiar una carrera donde aplicaciones CAD se han convertido en una maldita herramienta indispenzable... Claro que podría trabajar a mano... Oh, sí.

no es malo. yo hace años que dejé de usar dreamweaver, claro q por ahora sigo stuck con mi win xp. no es que no desee los graficos uberintensos de kde sobre ubuntu, claro.

la zorra que uses editcss
yo hace tiempo que lo descrubi y es LA herramienta para edicion de webs

que buena que dejes dreamweaver... la ultima vez que tuve que "diseñar" un sitio (soy ultra malo para el diseño), lo hice a puros div's y css, usando la funcion "outline block level elements" para ver si quedaban bien los div's. despues quize pasar el diseño al dreamweaver y paf! se veia como las reverendas, siendo que el css y el html estaban validados en el sitio de la w3c.

no he vuelto a dreamweaver desde entonces... solo un editor de texto (de preferencia con resaltado de sintaxis) y firefox con su extension web developer.

un tip eso si:
existe algo parecido para IE, creado por microsoft.

IE DevBar

y para opera:
Opera WebDevToolbar

saludos!

Genial...
La verdad nunca me gustó usar mucho Dreamweaver por lo mismo bajé un par de editores de css que lo prometían todo pero que se quedaban solo en eso...

Y Web developer toolbar es fantástico.
Como dijeron por ahí es LA herramienta pa edición de web..

Sl2

Y..nada más.

El WebDeveloper es de lo mejor para Firefox. Cuando hago modificaciones a mi blog, lo hago con el EditCSS, y me visto eso de editar, luego refrescar la pestaña, regresar, volver a editar... etc.

Muy buena la extensión.

gran valor las extensiones de firefox, estan realmente de pelos...no se a que individuo se le ocurre comparar i-exploit-er con el zorro de cola de fuego, ademas existen muchisimas extensiones para el desarrollo web..y si no existe la que buscas...pues desarrollala (en este instante estoy desarrollando una que permite ver el arbol de objetos DOM)..suerte!!

ozzberdant: buena, felicitaciones! por supuesto que el Explorer no se puede ni comparar con Firefox. y lo de las extensiones es sólo una razón. :)

eleniel: precisamente ayer estuve hablando de eso con un amigo. sí hace falta una aplicación CAD, pero yo creo que es cosa de tiempo nomás. antes no teníamos ni Inkscape, ni Gnomebaker, ni nada, y mira cómo estamos hoy.

drask, xenius, newdisco, neozen: así es, ahora soy el fanático número uno del Web Developer Toolbar. ;)

Realmente genial... Comencé a utilizar Web Developer Toolbar desde que salió firefox 1.0 ... simplemente me cambió la vida!

carlos: se me había olvidado agradecerte por el tip del ColorZilla. en todo caso en Linux no me anda el Eyedropper... la verdad no he buscado mucho al respecto, sabes por qué es eso?

Yo utilizo (no es broma) FrontPage, es malo pero...es simple. Si eres conocedor de codigo basta con modificar algunas cosas. Nose porque lo 'discriminan0 tanto. En fin.. a mi me resulta muy util, sencillo y muy eficiente.

Lo demás viene solo.

Excelente, lo bajé recién y estoy probando, una duda:

si mi css está en la carpeta css y las imagenes en una carpeta images, el codigo para ponerlas en el archivo css es ../images/imagen.gif O ./images/imagen.gif ??

es relativo a donde está el CSS, o sea ../images/imagen.png

alex: sí, es cosa de gustos, pero... FrontPage? en serio? el código que saca es horrible!

Respeto a todo el mundo, en serio, yo en lo personal no pretendo ser un genio en programación, no me interesa, si tengo hambre busco lo mas rápido y alimenticio, cuando diseño igual, si el dreamweaver me puede ayudar perfecto, si el bloc de notas es necesario, ok bien recibido también. Cada uno tiene sus métodos, lo importante es que el cliente este contento, él quiere un auto que lo lleve de A a B y les aseguro que le da lo mismo si este usa energía solar o carne para funcionar. Yo uso Dreamweaver, extensiones para Firefox y Xara Xtreme para hacer webs.

por supuesto, es cosa de gustos al final (por no decir de presupuesto) ...y no me gusta Windows! :)

Excelente idea!! toda una ventaja que el Firefox cargue en tiempo real (casi) los cambios hechos al CSS para luego solo pegarlos al tema del wp.

Para iniciar un sitio desde 0 sí estará más complicado pero muy buena utilidad.

Aprovechando el tema, alguien tiene por ahí algún tutorial para maquetar a XHTML/CSS webs diseñadas en Photoshop?

Como tengo un toshiba que a estas alturas anda como tortuga, uso el Notepadd++ desde hace tiempo y la verdad no se echa de menos el WYSIWYG. Cuando abro el panel de editCSS en Firefox algunos estilos se ven mal (se arreglan cuando cierro el panel), especialmente los fondos. A alguien más le pasa? Aprovecho sin vergüenza la oportunidad para invitarlos a curiosear a www.estadobeta.com, sobre desarrollo web.

Ok, el dreamweaver para muchos no es fundamental, para algunos plebellos como yo todavía son necesarios, mi cabeza no aguanta tanto código de programación, por eso me apoyo bastante en dreamw. creo que es porque me gusta mas el diseño y me gusta trabajar mas visualmente que con código. visiten mi sitio, es de cultura en Chillán. www.muestrate.cl

En general, les encuentro razón para que necesitan dreamweaver si es un programa para profesionales, para el resto de las personas y para los que nos manejamos en esto, este tipo de herramientas es muy buen complemento.

Salid del lado oscuro y ocupen Emacs o Jed (o gedit, kate o scite para X).
Realmente ocupar un WYSIWYG causa mucho daño a cualquier standar que queramos seguir.
Igual, buen post. No está demás decir que los "Ingenieros Web" o "Webmaster" que ocupan Dreamweaver tienen que ir al Peral.
Saludos