Mis herramientas de edición web imprescindibles 1

Los tiempos han cambiado una barbaridad desde que la mayoría de los webmasters editábamos con NVU, Kompozer, FrontPage, Dreamweaver u otros editores web más o menos sofisticados, y subíamos laboriosamente nuestros ficheros, vía FTP, a nuestros respectivos espacios de alojamiento. Desde unos años a esta parte, la proliferación de gestores de contenidos y editores en línea ha provocado que muchas de esas herramientas, e incluso el conocimiento de HTML y CSS, sean contempladas –con notoria injusticia, y reconozco que en más de una ocasión yo he participado en ella con entusiasmo digno de mejor causa- como un saber poco menos que arqueológico.

Es cierto que los gestores de contenido y los servicios y aplicaciones de la Web 2.0 han puesto la edición web al alcance de cualquier persona, independientemente de sus conocimientos técnicos, pero no lo es menos que siguen haciendo falta los viejos saberes (en el trabajo, día sí y día también, abundan las consultas del tipo “¿por qué este texto que acabo de editar me queda mal?”, pregunta que casi siempre se responde y resuelve editando el código HTML y puliendo las horribles etiquetas que añaden Word y otros procesadores de texto) y que las viejas herramientas, remozadas y puestas al día, nunca vienen mal para sacarnos de un entuerto.

El objetivo de esta serie de artículos que hoy comienzo es el de comentar unas cuantas aplicaciones para Windows (también echaré un vistazo a alguna para Linux y Mac) que son necesarias en el mundo de los gestores de contenidos y editores online, puesto que si bien estos programas ofrecen casi todo el trabajo hecho a los sufridos practicantes de la Web, también dan mucha más guerra de la que a primera vista uno podría suponer. Como la serie no tiene ninguna pretensión de sistematicidad o exhaustividad, y al fin y al cabo está basada en la experiencia de un webmaster amateur (que eso es lo que soy), me limitaré a presentar las herramientas que utilizo con más frecuencia, en su contexto real, con las explicaciones e ilustraciones que en cada caso me parezcan necesarias.

1. Editores de texto

Hace años que mi editor de cabecera es el estupendo Notepad++, un programa colosal a la hora de abrir y modificar todo tipo de archivos de texto plano (HTML, CSS, PHP, TXT, INI, SQL, XML, etc.), y que tiene una gran ventaja sobre otros parecidos: puede enfrentarse con éxito a ficheros de miles o decenas de miles de líneas, que otros programas de más nombre simplemente son incapaces de abrir. Esta característica la convierte en una aplicación insustituible a la hora de enfrentarse con los ficheros resultantes de los volcados de las bases de datos sobre las que funcionan los gestores de contenidos (volcados que, a menudo, generan unos ficheros de texto enormes), para realizar diversas operaciones sobre ellos.

Notepad++ también dispone de funciones de búsqueda y sustitución muy potentes (es cierto que no tanto como las casi inmejorables de Dreamweaver), lo cual viene muy bien cuando tenemos unos cuantos archivos en los que hay que realizar búsquedas y sustituciones en masa. En Windows, Notepad++ se integra a plena  satisfacción con el gestor de ficheros, lo que permite abrir cualquier fichero o conjunto de ficheros con un clic en el botón derecho del ratón. Yo recomiendo Notepad++ como el clásico “chico para todo”, eso sí, sobre archivos ya existentes, es decir, en un contexto de uso (que es justamente el de los gestores de contenido) en el que los archivos ya existen, y se trata de modificarlos y adaptarlos a las necesidades del usuario. Si se trata de crear ficheros HTML o CSS ex novo, no hay duda de que existen programas mucho mejores y, sobre todo, mucho más fáciles de utilizar.

2. Utilidades para operar sobre un sitio web ya existente

A menudo ocurre que un sitio web creado con un gestor de contenidos y una plantilla o tema X presenta resultados indeseados, que son difíciles de modificar porque, sencillamente, el usuario ignora cómo está construido el código correspondiente. A tal efecto, hay una pareja de extensiones para Firefox que no tienen precio, sobre todo si se utilizan en amorosa y fructífera sinergia: me refiero a Web Developer y a Firebug, que como es lógico funcionan en el navegador del panda rojo (no, no es un zorro, como yo creía hasta hace poco) tanto en Windows como en MAC OS X y Linux. La primera extensión añade una nueva barra al navegador, desde la que se puede obtener información sobre prácticamente todos los elementos de una página web, proporciona acceso a distintos servicios de análisis y validación del código, permite redimensionar el navegador a voluntad, etc. En muchos casos, además, la extensión hace posible operar sobre los elementos constitutivos de la página, desactivándolos, o reactivándolos de forma parcial o escalonada, para ver cuál es el resultado.

La segunda extensión permite editar, depurar y monitorizar el código CSS, HTML y JavaScript. No es del todo fácil de utilizar, sobre todo al principio, pero el esfuerzo que requiere aprender a manejarla merece la pena. Pondré un ejemplo de uso muy simple, pero al mismo tiempo muy clarificador: digamos que usted, esforzado webmaster, esforzada webmaster, utiliza en su blog una plantilla cuyo titular de primer nivel (del que se ocupa la etiqueta <h1>) es demasiado pequeño, o demasiado grande, o tiene un color que no le gusta. Pues bien, instala Firebug, reinicia Firefox, carga la página en cuestión, hace clic sobre el titular de marras con el botón derecho, selecciona “Inspeccionar elemento” (figura 1), y podrá acceder a las propiedades y atributos de la hoja CSS correspondiente.

En el ejemplo representado por la captura de pantalla de la figura 2, podemos ver la doble ventana que abre Firebug: en la parte izquierda, el código HTML, con la etiqueta correspondiente al titular de primer nivel (<h1 id=»blog-title»>) y, en la parte derecha, las propiedades y atributos de la hoja de estilos CSS que proporcionan estructura, posición y formato a dicha etiqueta. No es difícil darse cuenta de que el “culpable” del efecto no deseado es la propiedad del atributo font-size, cuyo tamaño, 2.5em, queda definido en la línea 109 del fichero style.css del tema o plantilla del blog.

Pues bien, basta entonces con modificar el tamaño de la letra (en la figura 3 lo hemos puesto a 5.5em, para que se pueda apreciar bien la diferencia), comprobar el resultado, y si resulta convincente, editar la línea afectada en el fichero CSS y subir éste al servidor. Conviene aclarar que las operaciones que hemos hecho para experimentar el resultado del cambio de tamaño son, por decirlo así, una simulación. Firebug no modifica ningún fichero, por lo que podemos llevar a cabo todas las pruebas que nos apetezcan, sin miedo a estropear nada.

Lo que se puede hacer con Web Developer y Firefox depende, evidentemente, de los conocimientos que el webmaster tenga de HTML, CSS, JavaScript y, en general, del funcionamiento de la Web (cuanto más domine esos terrenos, será capaz de hacer más cosas y con mayor seguridad y eficiencia), pero incluso con una base mínima, ambas extensiones tienen un valor incalculable. Una vez se conocen y se aprenden a manejar –y esto que voy a decir no es una fantasmada, como podrían confirmar los usuarios a quienes se las he aconsejado- parece imposible y hasta absurdo haber podido trabajar sin ellas.

En el navegador Safari (nativo de Mac OS X, pero con versión para Windows), existe una funcionalidad semejante a la de Firebug, a la que se puede acceder activando el menú de desarrollo. Para ello, si uno está en Mac OS X hay que dirigirse al menú Safari > Preferencias > pestaña Avanzado > y activar la casilla Mostrar el menú Desarrollo en la barra de menús (en Windows es igual, sólo que hay que llegar desde el menú Edición). Una vez hecho esto (a diferencia de Firefox, Safari no requiere reinicio), el menú contextual del navegador ofrece una opción adicional, llamada “Inspeccionar elemento”, que funciona de forma muy parecida a la de Firebug.