brucknerite

De reformas

—

por

Iván Rivera
en

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.