Estoy estrenando un nuevo template en el blog. Esta vez he optado por desarrollarlo yo mismo, por un motivo doble: un control más fino sobre la presentación, y aprender más de Wordpress.

Algunos cambios que he hecho:

  • La columna de los artículos es más ancha (750 pixels, versus 525 pixels del template anterior). Antes cuando el artículo incluía código las líneas se “rebalsaban”.
  • El color de fondo es ahora blanco, para facilitar la lectura. (El otro tema me gustaba, pero quizá el estilo “dark” no era para el público general.)
  • Las categorías, lista de artículos recientes y el archivo están ahora a pie de página, de modo que no interfieran con el contenido principal.
  • Se ha “descongestionado” la columna angosta de la derecha, que ahora contiene solamente el icono para suscribirse al feed RSS del blog, la casilla de búsqueda de Google, los avisos de AdSense y un par de iconos más hacia el final. Quizá estos iconos (tecnorati, perublogs, claimID y la licencia de Creative Commons) los termine pasando también a pie de página.
  • La página principal muestra sólo el último artículo publicado. Se puede acceder al resto desde el menú a pie de página. Antes, para ver el segundo artículo el lector tenía que correr la página hasta el final del primer artículo. En el diseño actual igual hay que correr la página, pero en vez del siguiente artículo se encuentra con la relación de los últimos artículos publicados.

Herramientas

Para desarrollar el template he usado gimp para los gráficos y para probar combinaciones de colores, y gvim para editar la edición de los archivos HTML, PHP y CSS. Salvo algunas pruebas en Windows para ver si el IE 7.0 no reventaba el diseño, casi todo se hizo en una laptop con Linux (Ubuntu), y Wordpress 2.1 +MySQL+PHP. Algunos ajustes finales se hicieron después de subir el nuevo template al servidor que aloja el blog, a través de la interfaz administrativa de Wordpress o usando ssh.

Ya he comentado alguna vez sobre las incompatibilidades entre los distintos navegadores. Son para morirse. Aprenderse todos los trucos no es mi idea un conocimiento en el que valga la pena invertir tiempo. Así que esta vez opté por usar los “grids” de YUI, la librería CSS que ofrece Yahoo!, para el layout del blog. Valió la pena y supuso un ahorro importante de tiempo: una vez hecho el layout básico, se veía igual en Firefox, Flock, Safari y IE 6 y 7.

Como se puede ver en el layout de esta página, la parte superior tiene dos columnas (la de los artículos y la de los avisos de Google), y la parte inferior (el footer) tiene tres columnas igualmente espaciadas. Esto también lo pude hacer sin mayores problemas gracias a que los grids de YUI son apilables (stackable). Al final del artículo se incluye el código fuente de parte del template, que muestra cómo lograr el efecto.

La imágen del encabezado la saqué de Stock Exchange. Stock Exchange tiene es una excelente fuente de fotos de alta resolución. Quizá la cambie más adelante, pero la actual me parece buena. (Miguel dice que mejor estaba el tema anterior, que “no pasa nada” con la foto del header. Piña, por ahora suficiente.)

Diseño para no diseñadores

Encontré el libro The Non-Designer’s Design Book en Amazon justo unas semanas antes de empezar el rediseño del blog. Tiene menos de 200 páginas, sumamente práctico. La idea de la autora es explicar los principios de un buen diseño a personas que profesionalmente no se dedican al diseño gráfico. Con flexibilidad, he tratado de aplicar al blog las cuatro ideas básicas de las que habla el libro: contraste entre distintos elementos de la página, repetición de tamaño, color y estilo para elementos conceptualmente similares, alineación marcada (en el blog, dos líneas fuertes: la del margen izquierdo de los artículos, y la del margen izquierdo de la barra derecha) y proximidad de elementos similares.

Es un buen libro. Si los documentos que escribes parecen afiche de instituto técnico de dudosa reputación (del tipo “Estudia gerencia comercial gratis”), lo necesitas urgentemente.

Mejorar la presentación del código fuente

Ya que estaba rediseñando el template, también aproveché para arreglar algunos detalles con los que no estaba del todo contento.

Uno de los motivos para ensanchar la columna de los artículos fue que el código fuente presentase mejor. Pero no solamente es el encuadre del texto lo que hace que el código se vea y lea bien. Hay dando vueltas por ahí algunos programas en JavaScript que permiten resaltar la sintaxis del código fuente de los lenguajes de programación más populares. Uno bastante conocido es db.SyntaxHighlighter, de Alex Gorbatchev. Tiene la gracia que además de colorear el código, permite numerar las líneas y da la posibilidad al lector de imprimir el snippet o verlo en texto llano en una ventana aparte.

Hace algún tiempo estuve tratando de hacerlo funcionar con Wordpress, pero no resultó fácil, así que lo dejé de lado. Pero gracias a este plugin para Wordpress ya no es necesario modificar el template para colorear el código.

Resultados de Google Search dentro del blog

Gracias a AdSense, el blog usa el motor de Google para la búsqueda en vez del código de búsqueda de Wordpress. Una de las mejoras que tenía en mente es que los resultados de las búsquedas aparecieran dentro del mismo blog, de modo que no hiciesen que el usuario dejase la página.

En sí no es complicado, este link (en inglés) explica cómo hacerlo. En resumen, se trata de usar la posibilidad que ofrece Wordpress de asociar una Página (con mayúscula, para dejar claro que nos referimos a los Pages de Wordpress) a un slug template determinado. Trataré de explicarlo en detalle en otro post. Mientras tanto, prueba a buscar algo dentro del blog usando la casilla de la esquina superior derecha. Verás que en vez de abrirse una ventana nueva, los resultados se muestran dentro del mismo blog.

Selección de artículos

El menú horizontal del encabezado tiene una entrada Artículos, que muestra una página con una selección de artículos ordenados por categoría. La gracia es que no son todos los artículos, solamente los que el autor del blog ha indicado previamente. Esto es posible gracias al Articles plugin para Wordpress, de Alex King.

Qué no tiene este template

Es lógico escribir también de las limitaciones del template. Menciono una que me parece importante, y es que no hay posibilidades de configurar el template a través de la interfaz de Wordpress. Por ejemplo, las últimas versiones de Kubrick (el template que viene por defecto en Wordpress), permite al propietario del blog escoger una imagen alternativa para el encabezado.

Este template, en cambio, tiene un montón de cosas que han sido insertadas directamente en el código. Por ejemplo, el código que genera los avisos de Google están en un archivo con el código que genera AdSense para mí. Lo mismo el icono de BlogsPeru, de Tecnorati… El código del template en sí es bastante ordenado y modular, en principio cada archivo .php hace solamente una cosa y nada más que eso. Pero lo que no es igual para todos los usuarios debería poder configurarse a través de la interfaz de Wordpress, sin tocar una sola línea de PHP.

Y para terminar…

Para cerrar el artículo, tengo que decir que desarrollar un template para Wordpress es una delicia comparado con lo que supone desarrollar un template para Joomla o Mambo. En mi opinión, esto se debe en buena parte a la excelente documentación de Wordpress. Es bastante clara, hay ejemplos.

Por último, si tienes algún comentario sobre el template, agradecería saberlo. Me intersa lo positivo y negativo, no problem.

Más abajo se puede encontrar el código fuente de algunos de los archivos que componen el template.

header.php

index.php

footer.php