Cuando se trabaja en un sitio web realizado con un gestor de contenidos, a menudo se presenta la necesidad de localizar un fragmento de código sobre el que se debe efectuar un cambio, o una traducción, o simplemente cualquier tipo de comprobación. La tarea no tendría mayor complicación si no fuera por el hecho de que estas aplicaciones son criaturas de trato difícil, a veces con miles de archivos (por poner un ejemplo, la versión 1.9.7+ de Moodle, la más actualizada y estable en el momento de escribir estas líneas, contiene más de 5.000 archivos, de los cuales más de 2.300 tienen la extensión php). Localizar en una selva tan frondosa una cadena de texto no es fácil, a no ser que se utilicen herramientas especiales, o, si se tiene acceso a la consola de los sistemas Linux que utilizan la mayoría de servidores (no es mi caso), comandos como el potentísimo grep.

Cuando utilizo Linux, generalmente en el trabajo, suelo hacer búsquedas con este comando, aunque en tareas bastante específicas y que tienen poco que ver con el objetivo de este artículo, como la búsqueda de monstruosidades diversas en el tráfico de los routers y cortafuegos que gestionamos en el PNTE. Sin embargo, la mayor parte de la actividad de edición web que habitualmente llevo a cabo la realizo sobre Windows, y a tal efecto hago uso del Windows Grep, una utilidad estupenda que permite realizar búsquedas desde el gestor de archivos del sistema operativo, mediante el botón contextual (figura 1).

Supongamos, por ejemplo, que ignoro en qué parte de WordPress está definida la etiqueta condicional is_home. Por supuesto, podría buscarla en Google o adentrarme en el Codex de WordPress, pero también puedo acudir a la carpeta en la que tengo descomprimida la última versión de esta aplicación, hacer clic con el botón derecho y obtener un interfaz de búsqueda que de forma rapidísima ofrece la información deseada (véanse las figuras 2 y 3).

En combinación con Firebug, la extensión para Firefox sobre la que ya traté en la primera entrega de esta serie, Windows Grep forma una pareja de aplicaciones colosal: aquélla sirve para localizar las primeras pistas que permitirán aproximarse a la resolución de un problema determinado, y ésta permite identificarlo sin asomo de duda.

4. Aplicaciones para la comparación de versiones diferentes del mismo archivo

Los gestores de contenidos, así como sus elementos accesorios, es decir, las traducciones, extensiones y plantillas, se actualizar con tanta frecuencia que no es difícil perder el hilo de los cambios. Por otra parte, a veces puede ocurrir que queramos mantener, sin actualizarla, una versión determinada de una aplicación, plugin o tema, bien porque hemos realizado cambios “a mano” en la aplicación o en sus componentes, bien porque determinada configuración de servidor es incompatible con una actualización, o por cualquier otro motivo. En todas estas circunstancias, se hace evidente la utilidad de aquellas aplicaciones que nos permiten verificar las modificaciones entre dos versiones cualesquiera de uno o varios archivos.

Los mejores proyectos para la gestión de contenidos ofrecen herramientas específicas a tal efecto (a título de ejemplo, véase la diferencia entre las versiones 2.8.6 y 2.9.1.1 del archivo wp-signup.php en el Trac de WPMU), pero siempre conviene tener a mano alguna alternativa para ejecutarla en local. Las últimas versiones del excelente editor Notepad++ , ya mencionado en mi artículo del pasado día 20, incorporan un plugin de comparación de archivos (véase la figura 4), pero también pueden utilizarse herramientas específicas, como CSDiff (figura 5), una aplicación bastante escueta, o la mucho más completa WinMerge (figura 6). Utilizar una u otra va en gustos y en costumbres, pero lo cierto es que cualquiera de ellas resulta de enorme utilidad para verificar los cambios entre versiones y afrontar los posibles problemas que puedan derivarse de una actualización.

Esta entrada Mis herramientas de edición web imprescindibles 2 ha sido publicada en primer lugar en La Bitácora del Tigre.

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.

Esta entrada Mis herramientas de edición web imprescindibles 1 ha sido publicada en primer lugar en La Bitácora del Tigre.