Si necesitáramos, por ejemplo, extraer información de una serie de páginas de noticias (news.google.com, cnn.com…) de modo automático, en vez de hacerlo manualmente cada día, ésta es la herramienta adecuada.

Un ejemplo

Como mucha gente, sigo los blogs que me interesan usando un agregador de noticas (Google Reader en mi caso). Uno de los blogs es Lifehacker. Es un blog sobre productividad que lanzó Gina Trapani el 2005 (ver Wikipedia). Su lema es Tips and downloads for getting things done.

Lifehacker es super interesante. Pero, como muchos de los blogs más leídos, fue comprado por una empresa y ahora tiene varios editores, publican más de una vez al día y, en resumen, yael volumen de información me excede. Lifehacker se empezó a convertir, para mí, en un blog antiproductividad: Tips and downloads for spending your time reading instead of getting things done.

En vez de borrar Lifehacker de mi lista, lo purgo con Yahoo! Pipes antes de leerlo. He creado un pipe que hace lo siguiente:

• lee el contenido de Lifehacker;
• selecciona los artículos que me interesan según los criterios que le doy al filtro;
• genera un nuevo feed que contiene sólo los artículos seleccionados.
• En mi cuenta de Google Reader estoy suscrito a este nuevo feed, hecho a la medida.

Con esto el volumen de información es más manejable, y más relevante para lo que me interesa.

Seleccionar contenido con un filtro

Crear un pipe es sencillo. Se usa una herramienta gráfica para conectar diversos bloques entre sí (en los screenshots abajo se pueden hacer una idea). Destaco algunas cosas:

• Cada bloque es una operación sobre la información que viene por el “tubo” que conecta un bloque con otro.
• El pipe se puede probar dentro de la misma herramienta.
• El contenido final se puede publicar en una serie de formatos estándares y abiertos: RSS, JSON y otros por el estilo.
• Una vez terminado, Yahoo! Pipes le asigna al filtro un URL, que es lo que permite añadirlo a Google Reader (o usarlo como entrada para otro filtro).

El feed que muestra la imagen se puede acceder en este link.

Si crear tu propio pipe te parece complicado, Yahoo! tiene un directorio de pipes listos para usar.

Tomando como base el tema Minyx2 Lite, he ensanchado la columna de contenido (a costa de adelgazar en algunos pixels la doble columna de la derecha) y añadido el código necesario para el badge de Flickr, el mapamundi con las visitas, las estadísticas de Google Analytics, los iconitos de blogperu y perublogs, etc. Al desarrollar el tema anterior ya había separado el código para cada una de estas modificaciones en su propio archivo .php, así que añadirlos al nuevo tema ha sido cuestión de insertar algunos <?php include(TEMPLATEPATH . 'extension.php'); ?> en los lugares apropiados. El tema base está bien hecho, de modo que no ha demorado mucho tiempo.

Todavía quedan algunos ajustes por hacer, como por ejemplo adaptar el Google Search al nuevo diseño (por ahora estoy usando la casilla de búsqueda que viene por defecto con WordPress) y escribir algo decente para la sección About.

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

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head profile=”http://gmpg.org/xfn/11″> <meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” /> <title><?php bloginfo(‘name’); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title> <meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” /> <!– leave this for stats –> <link rel=”stylesheet” href=”<?php bloginfo(‘template_url’); ?>/reset-fonts-grids.css” type=”text/css” media=”screen” /> <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” /> <?php wp_head(); ?> </head> <body> <!– 950 px width –> <!– 180 on right –> <div id=”doc2″ class=”yui-t4″> <div id=”hd”> <div id=”hdimage”> <h1><a href=”<?php echo get_settings(‘home’); ?>”><?php bloginfo(‘name’); ?> <!– <img src=”<?php bloginfo(‘template_url’); ?>/images/header.jpg” /> –> </a></h1> <div class=”description”><?php bloginfo(‘description’); ?></div> </div> <!– horizontal menu –> <div id=”navmenu”> <ul> <?php wp_list_pages(‘title_li=’); ?> </ul>
</div> <!– end horizontal menu –> </div><!– end header –>

index.php

<?php get_header(); ?> <div id=”bd”> <div id=”yui-main”> <div class=”yui-b first”> <!– The Loop –> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div class=”post” id=”post-<?php the_ID(); ?>”> <h1><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent link to <?php the_title(); ?>”> <?php the_title() ?></a></h1> <small><span class=”postmetadata”><?php the_time(‘Y-j-n’) >  |  <?php the_category(‘, ‘) ?> | <?php edit_post_link(‘Edit’, ”, ‘ | ‘); ?> <?php comments_popup_link( ‘Ningún comentario »’, ’1 Comentario »’, ‘% Comentarios »’); ?> </span> </small> <br /><br /> <div class=”entry”> <?php the_content(‘<br /><br />Seguir leyendo…’); ?> <?php wp_link_pages(‘<p><strong>Páginas:</strong> ‘,
</p>’, ‘número’); ?> </div> </div> <!– end post –> <?php endwhile; ?> <?php else : ?> <h2 class=”center”>Not found</h2> <?php endif; ?> </div><!– end yui-b –> </div><!– end yui-main –> <!– The sidebar –> <div class=”yui-b”> <?php get_sidebar(); ?> </div> <!– end sidebar –> </div> <!– end body –> <div id=”ft”> <?php get_footer(); ?> </div><!– end footer –> </div> <!– end doc2 –> </body> </html>

footer.php

<div class=”yui-gb”> <div class=”yui-u first”> <!– col 1 –> <h1>Artículos recientes</h1> <!– show recent posts –> <ul> <?php wp_get_archives(‘type=postbypost&limit=10&format=html’); ?> </ul> <h1>Archivos</h1> <ul> <?php wp_get_archives(‘type=monthly&limit=12&format=html’); ?> </ul> <br /> </div> <!– end col 1 –> <div class=”yui-u”> <!– col 2 –> <h1>Categorías</h1> <ul> <?php wp_list_categories(‘sortby=name&show_count=1&title_li=’); ?> </ul> </div> <!– end col 2 –> <div class=”yui-u”> <!– col 3 –> <h1>Fotos</h1> <?php include(TEMPLATEPATH . ‘/flickrbadge.php’); ?> </div> </div> <p> This site is proudly powered by <a href=”http://wordpress.org/”>WordPress</a>. </p> <?php wp_footer(); ?>