Para los que alojan su blog en un host contratado (en vez de usar los servicios gratuitos de wordpress.com, blogspot.com u otro), un tema importante es mantener el manejador de contenido actualizado con los últimos parches de seguridad. Una página web con una versión desactualizada del manejador de contenido es una invitación al vandalismo.

A partir de la versión 2.7 de WordPress la actualización del programa y de los plugins puede hacerse desde la interfaz administrativa, con un solo click. Es más, WordPress se encarga de notificarte de que hay una nueva versión disponible. Ya no hay excusas para no tener tu WordPress al día.

¿Algún comentario sobre si otros manejadores de contenido ya incorporan esta funcionalidad?

Temas Premium para WordPress

Una persona que diseña páginas web aquí en Lima, Perú, nos cotizó US$900 por un template para Joomla, tiempo de entrega en tres semanas. Mmm… pensé, este señor o debe ser muy bueno o… Lamentablemente, sus diseños no son muy buenos. Una mirada a su portafolio on-line y nada, sin pena ni gloria. Mucho flash y menús que hacen ruidos cuado pasas el mouse sobre ellos. Realmente me hubiera encantado encontrar unos diseños impresionantes y poder decir: excelente, este señor tiene futuro.

Así que a buscar temas en otro sitio. En http://themes.wordpress.net/ hay muchos temas gratis, pero justamente porque hay tantos, los mejores están un poco enterrados entre muchos de mediana calidad. Para la página en cuestión estábamos buscando un tema sobrio pero mejor que el promedio, aunque hubiese que pagar un poco. Una buena fuente de temas fue este artículo publicado en Smashing Magazine.

Finalmente escogimos un tema llamado Branford Magazine, de Michael Oeser. Y es gratis. Es un tema sobrio, de formato “revista”, que tiene la posibilidad de tener artículos destacados y páginas destacadas.

Como en el proceso encontré varias páginas interesantes con “temas premium”, listo algunas a continuación por si son de utilidad (algunos temas se repiten):

• Wynton Magazine y el ya mencionado Branford Magazine.
• Mimbo Pro y Mimbo, de Darren Hoyt.
• Premium WordPress themes.
• Premium themes en HackWordPress.
• Premium News Theme

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.

Es el mismo plugin que usa WordPress.com para mostrar sus estadísticas. Ahora puedes usarlo aunque no alojes tu blog en WordPress.com (pero siempre usando WordPress, se entiende).

Bien, cuando he comentado este cambio de agregador de noticias con algunos amigos, resulta que no tienen ni idea muy claro qué es un feed, menos qué es un agregador o para qué sirve. Y son usuarios de PCs que considero sofisticados… Así que he pensado que no está de más explicar qué es un feed, qué es un agregador de noticias y hacer algunos comentarios al respecto.

Feeds

Un feed es un modo de presentar el contenido de un blog en un formato estandarizado de modo que sea fácil procesarlo con un programa. En la práctica el feed es un archivo al que se puede acceder a través de un URL en Internet, escrito de modo que es fácil hacer programas que extraigan la información. Cada vez que el blog se actualiza, se actualiza este archivo. Por ejemplo, el feed de este blog está en este URL: http://www.zoia.org/blog/feed/. La información del feed es generada sobre la marcha cuando alguien accede al URL en cuestión, pero a efectos prácticos se puede tratar como un archivo.

Si queremos seguir día a día los artículos de algunos blogs, el método manual consiste en a) abrir el blog en el navegador; b) ver si hay un artículo nuevo; c) si lo hay, leerlo y, si es oportuno, escribir algún comentario… y luego pasar siguiente blog.

Este sistema es por lo menos tedioso. ¿Cuántos blogs son “algunos blogs”? No me refiero aquí a navegar sin rumbo por internet a ver qué descubro, sino a seguir con cierto orden algunos temas concretos. Por ejemplo, en mi lista de blogs tengo blogs de desarrollo de juegos, programación, seguridad, webdesign, algunos de fotografía digital… y por supuesto una gran carpeta “unclassified”. Cada tanto reviso la lista y borro algunos. Pero también añado nuevos blogs… La realidad es que lista, en vez de reducirse, va creciendo.

Agregadores de noticias

Si no habías oído hasta ahora de los agregadores de noticias, y al leer lo que es un feed se te ha ocurrido hacer un programa que procese automáticamente los feeds de los blogs que lees habitualmente, y te avise automáticamente cuando hay nuevos artículos… ¡felicitaciones! tienes neuronas, podrías ser un buen hacker. Conectas ideas. (De todos modos pregúntante cómo es que no sabías qué es un feed…)

Eso es exactamente lo que hace un agregador de noticias. Maneja una lista de blogs (una “lista de suscripciones”) y nos avisa en cuáles hay artículos nuevos. Además permite leer los artículos sin necesidad de abrir el navegador. En el pantallazo de al lado se puede ver el agregador de noticas de Flock. En la columna de la izquierda están los blogs a los que estoy suscrito (como se ve, Flock permite crear carpetas para agruparlos). Junto a cada blog aparece un número entre paréntesis, en negrita: es el número de artículos nuevos. En la columna de la derecha está el contenido, los artículos actualizados.

Como se ve también en la imagen de flock, el agregador de noticias homogeniza la presentación de los artículos. Los artículos de la columna de la derecha son de blogs distintos, sin embargo se ven iguales en la pantalla. Realmente lo que sucede es que el feed contiene solamente el contenido del artículo, sin la presentación específica que tiene en el blog del que proviene.

Syndicate y Syndication son otros modos de decir que estamos obteniendo el contenido de un website a través de su feed.

Como técnicamente un feed puede estar en distintos formatos, también se suele llamar al feed por el nombre de esas especificaciones técnicas: RSS (Really Simple Syndication), Atom y otros. (Se puede leer más acerca de las distintas versiones de RSS en Wikipedia.) Cuando un website ofrece un feed con su contenido, suele indicarlo con un icono más o menos estandarizado.

Una criba de contenido

Los que tienen algo que ver con el mundo de la publicidad o del marketing deberían estar escandalizados. El agregador de noticias, al separar la presentación del contenido, permite que los lectores lean los artículos limpios de publicidad, sin el logo del website y sin enterarse del último rediseño de la página web en el que tanto tiempo se ha invertido. Es como escuchar radio o ver TV sin comerciales. (Estoy trivializando el asunto adrede, ya sé que una buena campaña de publicidad no es solamente el aviso publicado.) En todo caso, aunque no haya publicidad de por medio, los agregadores de noticias sí tienen el primer efecto de que los lectores que no visiten directamente el blog, y por tanto se pierdan “parte de la experiencia”. Matthew Mullenweg, uno de las personas detrás de WordPress, dice que hay mucho en su website que nunca podrá estar disponible en el feed. Y es que el diseño del blog de Matthew es sobresaliente, leerlo a través de un agregador simplemente no le hace justicia.

Dicho esto, también podríamos afirmar justamente lo contrario: gracias a los agregadores, son más las personas que visitan directamente los blogs. Personalmente, como ya expliqué arriba, si no fuera por un agregador de noticias, me sería imposible estar al día de los distintos blogs que sigo de cerca. Gracias al agregador, he desarrollado el hábito de leer los blogs como leo un periódico: hay artículos que se pueden leer en diagonal, porque no son demasiado densos y son más bien divulgativos; otros artículos los descarto simplemente por el título (si resulta que la mayoría de veces termino descartando artículos de un determinado blog, éste acaba siendo eliminado de la lista); pero hay algunos escritos que merecen una lectura más detenida y quizá tomar algunas notas. En estos casos normalmente los marco el agregador y leo el artículo directamente en la página web en la que ha sido publicado.

En otras palabras, muchas veces leo el artículo en el blog en el que fue publicado, aunque lo haya detectado a través del agregador de noticias. Si no fuera por el agregador, quizá nunca lo hubiera leído. El agregador me permite hacer una criba de qué leo y qué no leo. Y es que en el estado actual de la blogósfera (tomando prestada la expresión de Technorati), por un tema de tiempo, resulta imprescindible seleccionar sobre todo qué no leo.

Bloglines

Llevo algunas semanas usando Bloglines como agregador de noticias. La experiencia es bastante buena. Ahora puedo revisar la lista de blogs desde cualquier lugar con acceso Internet, incluso desde el Qtek 9100 cuando hay conexión WiFi cerca, pues Bloglines tiene un formato para dispositivos de pantalla pequeña.

La otra alternativa que estuve evaluando fue NewsGator. El servicio de lectura on-line es gratis, aunque ofrecen varios servicios de pago que permiten sincronizar la informacion con distintos dispositivos o programas. Lo que ha inclinado la balanza a favor de Bloglines es un asunto muy sencillo… casi una tontería. Cuando la columna de artículos tiene varias entradas, normalmente es necesario “subir” (scroll) la página para poder seguir leyendo (scroll). En Bloglines, el panel con las noticias se mueve independientemente del panel que tiene la lista de blogs. Al subir las noticias la lista de blogs está siempre visible en la pantalla. Así, cuando terminas de leer los artículos de ese blog o de esa carpeta de blogs, no es necesario volver al comienzo de la página para escoger el siguiente blog de la lista. Es un detalle pequeño, pero afecta la experiencia de uso. Por eso me he quedado con Bloglines.

La interfaz de Bloglines tiene definitivamente menos “caramelo” (traducción libre de ‘eye candy’) que la de NewsGator. Bien, eso se puede corregir usando una extensión para Firefox llamada Stylish, como menciona este artículo. Personalmente la interfaz normal de Bloglines me parece suficiente y me permite trabajar con rapidez. De todos modos, en la PC que más uso para leer las noticias he instalado Stylish, un estilo para Bloglines y he modificado el estilo para agrandar un poco la letra de los artículos. Abajo se pueden ver dos imágenes.

As of version 0.95, django has been under heavy changes, and my custom control no longer works. In particular, the old forms module is being discarded in favor of the newforms module that will become the default forms module sometime in the future. A good explanation can be found in the on-site django documentation, under newforms-migration plan.

The good news is that newforms allows access to individual items of the form fields, multiple-select fields included. The newforms documentation is still work in progress, so it took me a while to figure out how to do it… by inspecting the source code and regression tests. It seems pretty obvious now, should have asked in the django-users list.

The example code has been tested with django svn release 4812 (2007-3-23).

2007-03-27: By mistake I published an incorrect version of views.py. Code has been corrected so that now add_post saves the tag field as expected. (Post has a many-to-many relationship with Tag, so form.save() is not enough to save the form data.)

2007-04-12: The code for views.py has been corrected again. The code posted 2007-03-27 works, but as I discovered later, there is no need to create another object (p = Post(**cleandata)) to handle the many-to-many field data. form.save() takes care of everything, as expected.

2007-04-24: You may be interested in this post.

template

</p>

<ul>
{% for choice in form.base_fields.tag.choices %}
<li> ({{ choice.0 }}, {{ choice.1 }}) </li>
{% endfor %}
</ul>

<p>

models.py

</p>

<h1>-<em>- coding: utf-8 -</em>-</h1>

<h1>models.py</h1>

<p>from django.db import models</p>

<p>class Tag(models.Model):
    tag = models.CharField(maxlength=20)</p>

<pre><code>def __str__(self):
    return self.tag
</code></pre>

<p>class Post(models.Model):
    # other fields here:
    # text = models.CharField(maxlength=255)
    # title = models.CharField(maxlength=50)
    # etc.
    tag = models.ManyToManyField(Tag)</p>

<p>

views.py

</p>

<h1>-<em>- coding: utf-8 -</em>-</h1>

<h1>views.py</h1>

<p>from django.template import Context, loader
from django.http import HttpResponse, HttpResponseRedirect</p>

<p>from django import newforms as forms
from django.newforms.widgets import *</p>

<p>from project.models import *</p>

<p>def add_post(request):
    postForm = forms.models.form_for_model(Post)
    if request.method == 'POST':
       form = postForm(request.POST)
        if form.is_valid():
            form.save()
            return HttpResponseRedirect("/")
    else:
         form = postForm()
         t = loader.get_template('add_post.html')
         c = Context({
               'form': form,
               })</p>

<pre><code>     return HttpResponse(t.render(c))
</code></pre>

<p>

views.py

This is an old version of views.py. The code works, but as I discovered later, there is no need to create another object (p = Post(**cleandata)) to handle the many-to-many field data. form.save() takes care of everything, as expected.

</p>

<h1>-<em>- coding: utf-8 -</em>-</h1>

<h1>views.py</h1>

<p>from django.template import Context, loader
from django.http import HttpResponse, HttpResponseRedirect</p>

<p>from django import newforms as forms
from django.newforms.widgets import *</p>

<p>from project.models import *</p>

<p>def add_post(request):
    postForm = forms.models.form_for_model(Post)
    if request.method == 'POST':
        form = postForm(request.POST)
        if form.is_valid():
           cleandata = form.clean_data
           # use the form tag ids to select the Tag instances
           # related to this Post entry
           tag = Tag.objects.in_bulk(cleandata['tag'])
           # need to delete the tag ids from clean data,
           # otherwise p = Post(** cleandata) will complain that
           # tag is not a parameter of Post( )
           del cleandata['tag']</p>

<pre><code>       # create an instance of Post from the form data
       p = Post(**cleandata)
       p.save()   # need to save so p gets an id.
       p.tag = tag
       p.save()

       return HttpResponseRedirect(&amp;amp;quot;/&amp;amp;quot;)
   else:
   form = postForm()

   t = loader.get_template('add_post.html')
   c = Context({
          'form': form,
    })

    return HttpResponse(t.render(c))
</code></pre>

<p>

El documento muestra paso a paso cómo diseñar el website de un colegio. No explica cómo diseñar el template (más bien usa uno ya prediseñado que se puede descargar sin costo) y se centra en explicar cómo configurar los distintos módulos a través de la interfaz administrativa de Joomla. Es bastante claro y refuerza las explicaciones con abundantes pantallazos.

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(); ?>