Aviso de servicio

Warning!
Warning!
Foto de badjonni

Este fin de semana he estado cambiando algunos detalles del blog. Hay para todos: nueva maquetación, limpieza de código, eliminación de componentes poco útiles… El cambio fundamental, desde vuestro punto de vista, es que he integrado un sistema externo de comentarios denominado IntenseDebate. Espero que funcione correctamente y que sus ventajas superen cualquier inconveniente que pueda aparecer. En cualquier caso, esperad cierta inestabilidad al principio.

Muchas gracias por vuestra paciencia.

Actualización: IntenseDebate me ha durado exactamente un día. Ahora estoy probando Disqus. Veremos si hay más suerte.

Ya es primavera en la blogosfera

Gracias a Ana, una redescubierta compañera de mi remoto pasado (bueno, del 2000, pero parece que ha pasado una eternidad, ¿verdad?) llegó a mi atención Tumblr, un scrapbook o cuaderno de notas en línea realmente fácil de usar. Permite anotar contenidos, enlaces a páginas completas, pequeñas citas, conversaciones, fotos y otros cachivaches desde cualquier lugar donde haya una conexión, y devuelve un feed RSS fácilmente integrable en lectores o bitácoras. Creo que puede enriquecer la experiencia de este blog, así que estoy probándolo en una nueva sección, tentativamente llamada “Cortes y recortes”.

Aprovecho también para probar un nuevo formato de tres columnas. Según mis análisis de tráfico, tan sólo un 5,16% de mis visitas corresponden a navegadores con una resolución de pantalla inferior a 1024 puntos en horizontal, así que por lo menos espero no hacer ilegible la página. Pese a todo, las maquetaciones a tres columnas siempre me han parecido excesivamente pobladas y complejas. Puede que observéis cambios mientras decido el formato final; como de costumbre, si algo no funciona, no dudéis en decírmelo.

De reformas

Una de las mejores formas de conseguir que se implemente una característica en cualquier sistema informático en el que estemos interesados es, simplemente, arremangarse y codificarla. Quizá sea este el motivo fundamental por el que prefiero que el código que pase por mis manos sea abierto: dado interés y (más importante) tiempo suficiente, puede conseguirse cualquier cosa.

Filosofía de altos vuelos con un fin un tanto trivial. El widget de lista de etiquetas de Blogger es un tanto pobre. Si no se mantiene una bitácora monotemática, o si simplemente se es tan disperso como yo, se acaba enseguida con una lista interminable; y toda lista con más de veinte elementos es peor que nada. Veamos cómo modificar de forma simple la plantilla de Blogger para obtener algo mejor.

Advertencia: haz una copia de seguridad de tu plantilla antes de editarla. Si no lo haces, vendrá el hombre del saco y se llevará tu blog.

Asumo que en el blog a retocar hay un widget de lista de etiquetas estándar de Blogger en algún sitio (si no, inserta uno). Después, accede a la pestaña de edición de HTML de la plantilla y selecciona la caja correspondiente para expandir el código de los widgets. Busca el widget de la lista de etiquetas: normalmente, se llamará Label1 o algo similar. Tendrá este aspecto:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <data:label.name/>
        <b:else/>
          <a expr:href='data:label.url'><data:label.name/></a>
        </b:if>
        (<data:label.count/>)
      </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Observamos varias cosas:

  1. Parece XML estándar. Hay HTML, marcas con un espacio de nombres llamado b, y otras marcas de otro espacio llamado data.
  2. En el espacio de nombres b, vemos marcas “de programa”:
    • widget: delimitador de widgets. Claro…
    • includable: es una subdivisión interna del widget, direccionable desde fuera. Tiene que haber una al menos. No la vamos a tocar.
    • include: sirve para incluir un includable, que se distinguirá por nombre (id).
    • if: todos sabemos programar, ¿no? La condición va en el parámetro cond.
    • else: la otra rama del if.
    • loop: lo mismo de antes. El parámetro values especifica la colección por la que se iterará (es como un foreach de Perl o uno de los bucles nuevos de Java 5). El parámetro var da el nombre de la variable que tomará, en cada vuelta, el valor de uno de los elementos de la colección.

    Más información sobre las marcas de widgets aquí..

  3. El espacio de nombres data sirve para denotar elementos de la página. Algunas marcas están disponibles para toda la plantilla, mientras que otras sólo lo están dentro de widgets específicos. Más información sobre las marcas de datos, aquí.

Ya estamos preparados para retocar el widget de lista de etiquetas. Introduciremos un límite de frecuencia para mostrar la lista (por ejemplo, un mínimo de 5 ocurrencias), y relegaremos el resto a un combo. Será sencillo.

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <b:if cond='data:label.count >= 5'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <data:label.name/>
        <b:else/>
          <a expr:href='data:label.url'><data:label.name/></a>
        </b:if>
        (<data:label.count/>)
      </li>
      </b:if>
    </b:loop>
    </ul>
    <br/>Otras: <select onchange='location.href=this.options[this.selectedIndex].value'>
    <b:loop values='data:labels' var='label'>
      <b:if cond='data:label.count < 5'>
        <b:if cond='data:blog.url == data:label.url'>
          <option value=''><data:label.name/> (<data:label.count/>)</option>
        <b:else/>
          <option expr:value='data:label.url'><data:label.name/> (<data:label.count/>)</option>
        </b:if>
      </b:if>
    </b:loop></select>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Básicamente, hemos cambiado la condición del if para no mostrar las etiquetas con frecuencia de aparición (data:label.count) inferior a 5. Incluimos otro bucle loop que excluye a las etiquetas procesadas anteriormente mediante una condición opuesta. Las etiquetas menos frecuentes se insertan en un combo de HTML con el código Javascript mínimo para navegar hacia ellas (dentro del evento onchange de la marca <select>).

Como mejora, tiene varios fallos. En particular, no cubre bien el caso de que haya pocos artículos. Controlar la frecuencia de aparición de las etiquetas puede llevar a mostrar una lista interminable con el tiempo, por lo que habría que tocar la plantilla de vez en cuando para aumentar la condición de corte entre la lista y el combo. Sería mejor controlar el número total de etiquetas. Y ya puestos, una interfaz moderna, tipo Web 2.0, con una caja de texto y lista dinámica de etiquetas coincidentes con lo tecleado sería ya para nota. Pero habrá que ver si hay tiempo, algún día.