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.

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?