¿Para qué Dreamweaver?

world.jpg Hoy es un gran día, y no sólo porque toca Pearl Jam acá en Santiago. Hoy me di cuenta que ya no necesito más de este editor de páginas web. Encontré una alternativa. Y con eso, el último obstáculo que me quedaba, la última traba que me amarraba a Windows ha desaparecido. Puedo borrar la partición, ojalá para siempre.

No me van a creer cuál es mi alternativa linuxera de este tremendo programa de Macromedia, perdón, de Adobe.

El Web Developer Toolbar de Firefox.

Toma. Ésa es la respuesta que busqué por los siglos. ¿Qué mejor programa para diseñar CSS y desplegarlo que el propio Firefox? En serio. Traté con Bluefish, traté con NVU, traté de encontrar algun programa que le hiciera el peso a Dreamweaver, pero sin darme cuenta que lo que necesitaba no era precisamente eso. No necesitaba un programa para editar el CSS; eso lo podía hacer directamente en la página, y en tiempo real.

Me explico.

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.

editcss2.jpg

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?

33 comentarios

  1. pato castro says:

    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.

  2. Carlos says:

    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

  3. Carlos says:

    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.

  4. Eleniel says:

    ¡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í.

  5. neozen says:

    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.

  6. newdisco says:

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

  7. 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!

  8. Xenius says:

    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.

  9. drask says:

    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.

  10. ozzberdant says:

    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!!

  11. 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. ;)

  12. konus says:

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

  13. 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?

  14. Alex says:

    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.

  15. wachunei says:

    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 ??

  16. 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!

  17. 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.

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

  19. Oscar says:

    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?

  20. ismael says:

    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 http://www.estadobeta.com, sobre desarrollo web.

  21. 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. http://www.muestrate.cl

  22. Alex says:

    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.

  23. peewack says:

    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

  24. alexserver says:

    Tomas, no conocia el Web Developer Tool, muchas gracias, por cierto, esta muy chingon tu blog, yo he aprendido mucho sobre linux aqui.
    Hace poco un amigo me mostro un nuevo editor orientado a desarrollo web: Aptana, lo instale y tiene un look and feel como eclipse, me gusto, salvo por el hecho de que consume mucha memoria, y en mi monitor de 15 pulgadas no veo el codigo con tantas barras de herramientas, por eso deje el dreamweaver hace mucho y desde entonces solo edito en el editor mas simple que este a mi alcance, mi favorito hasta ahorita es el Notepad , lastima que no he encontrado en Linux algun otro que lo supere, el Gedit se queda muy atras, no soporta tabulaciones automaticas ni me remarca los parentesis ni corchetes.
    En fin, buena herramienta, la probare a ver que tal me va, saludos.

  25. muy buena aplicacion para firefox… la verdad es que simplifica mucho. Te agradezco la ayuda. Saludos desde Chile

  26. desde que comence a usar tyuw.gy ya no me hace falta depender de dreamweaver y las opciones que este utiliza, puesto que este se independisa de windows, aparte con los trg de los dispositivos comerciales, la relacion fkd no se hace necesaria para el uso de los fremswordl de ultima generacion, debo reconocer que soy un experto que he estudiado algunos semestres en la UCLA, y aun asi reconosco que los fremswordl aunque son de gran utilidad, con el uso de los tgb de los medios antiguos prestan gran utilidad

  27. Se puede empezar desde cero, con esa herramienta de la que hablan?
    como?
    Yo no se hacer paginas, estoy en un curso de dreamweaver.

  28. Danieru says:

    Hola, interesante escrito.

    En mi círculo cercano de amigos diseñadores parecen no concebir una web sin dreamweaver y eso lo puedo notar fácilmente en sus webs con un código con más basura que una hamburguesa del Mc Donal’s.

    Actualmente genero mi código con Quanta en Kubuntu, me apoyo con WDT y con HTML Validator (extensión de FF) valido el código. Todo va bien si mayores complicaciones, nada que dreamweaver pueda superar.

    Sin alargar más mi comentario, solo me queda felicitarte por “Despertar de la matrix” y por pasarte absolutamente a lado pingüino de la fuerza. Espero poder pasar algún día por completo al ext3!.

    Saludos.

    • Francisco tapia says:

      Exacto el codigo en Dreamweaver queda redundante e inconsistente es cosa de ver que si kieres cambiar de estilo tus textos si haces mil pruebas los estilos se segiran solapando haciendo el codifgo redundante y inservible

  29. pankuko says:

    este post es del 2005 y recien ahora vengo a conocer WDT…..me lleva el chanfle…..

  30. overon37 says:

    Todo eso me parece genial, yo tengo dreamweaver y aptana. Prefiero el primero, mas rápido, menos recursos… menos lioso. Pero eso de pasarse a linux. Que hace uno que programa en .net y sql (que de eso vivimos muchos)???? No hay nada parecido a visual studio 2008 en linux, ni nada semejante a sql server 2005.
    Claro, siempre habrá alguien que diga “programa en java”, pero eso es como decirle a un taxita “deja el taxi y hazte pizzero” por ejemplo.
    Yo, por mi, no puedo dejar windows ni loco. aunque linux me gusta, pero solo la que tuve que liar para reconocer una tarjeta pcmcia en linux….. cuando en win conectó y listo.
    Linux está muy, pero que muy lejos de amenazar a win, sino no sería el sistema mas usado a nivel mundial.

  31. Yo Aun sigo con dreamweaver, he intentado buscar alternativas en linux pero aparte de editar css. hay funciones de sincronizacion del sitio web… autocompletado de codigos… y algunos scripts que no he podido encontrar en otro editor… si alguien le interesa me puede agregar al msn e intercambiar programas, scripts, manuales, etc… todo relacionado a la programacion web. saludos!

Deja un comentario