Cita del Día

Sobre estas líneas se debería ver (¿funciona?) mi último proyecto: la Cita del Día para Blogger. De hecho, debería poder instalarse en cualquier sitio. Sólo necesita que JQuery esté disponible en la página, aunque sería bastante fácil reescribir el código para eliminar la dependencia. Las citas están publicadas en una hoja de cálculo de Google Spreadsheets.

[¡Peligro! ¡Palabrería informática!] El protocolo implementado por las APIs de GData, como extensión de Atom, permite manipular documentos de todo pelaje alojados en los múltiples servicios de Google. Una pequeña adición, la posibilidad de disponer de los resultados en formato JSON, y más concretamente, como JSON evaluado en un script, permite superar gran parte de las limitaciones de seguridad impuestas por los navegadores sobre Ajax. Es posible así realizar cross-site scripting, incorporando contenidos de documentos disponibles mediante feeds de GData en páginas web, sin disponer de control sobre el servidor.

Necesitamos una hoja de cálculo publicada con dos columnas (citas y autores).

Un pequeño script permitirá extraer el contenido de esta hoja conociendo algunos de sus datos:

  • Su clave de publicación (key).
  • El identificador único de la página a publicar (una hoja puede tener varias páginas).
  • El rango de celdas del que se va a extraer la información.

Esos datos pueden obtenerse a partir de la URL de publicación de feeds que aparece en las “opciones adicionales de publicación” de la pestaña “Publicación” de una hoja de cálculo. Armados con la información apropiada, podemos programar algo interesante:

var CiteSpreadsheet = {
    'rows': 159,
    'getJsonUrl': function(idx) {
        var baseSpreadsheet = 'http://spreadsheets.google.com/feeds/';
        var feedType = 'cells/';
        var key = 'o06661241339204957995.1659223542184495700/';
        var sheetId = 'od6/';
        var feedAccess = 'public/basic?';
        var range = 'range=A' + idx + ":B" + idx;
        var output = '&alt=json-in-script';
        var callback = '&callback=CiteSpreadsheet.processJsonResponse';
        return baseSpreadsheet + feedType + key + sheetId + feedAccess + range + output + callback;
    },
    'createScriptElem': function(url) {
        var html = '<script type="text/javascript" src="' + url + '"></script>';
        $(html).appendTo('body');
    },
    'getIndex': function() {
        var today = new Date();
        var startDate = new Date(today.getYear(), 0, 1);
        var delta = today.getTime() - startDate.getTime();
        var dayOfYear = Math.ceil(delta / 86400000);
        return dayOfYear % CiteSpreadsheet.rows;
    },
    'processJsonResponse': function(jsonData) {
        var retrievedContent = "<span>" + jsonData.feed.entry[0].content.$t +
            " <cite>" + jsonData.feed.entry[1].content.$t + "</cite></span>";
        $(".cite").append(retrievedContent);
    }
};

CiteSpreadsheet.createScriptElem(
    CiteSpreadsheet.getJsonUrl(
        CiteSpreadsheet.getIndex()));

El objeto del código es insertar, dinámicamente, una marca <script> en el documento actual, que apunte mediante su atributo src a una URL específica de consulta válida para la hoja de cálculo deseada, con formato de salida json-in-script, lo que devuelve un script listo para ejecutar con los datos pedidos en un objeto (en el enlace anterior se describe su estructura; Firefox, Firebug y un punto de ruptura ayudan considerablemente).

El feed obtenido ofrecerá información sobre celdas concretas de la hoja en el rango An:Bn, donde n es el número de fila deseado. Como en la hoja hay 159 citas, para dar una diferente cada día calculamos el índice como el número del día actual dentro del año módulo el total de filas.

Por último, para incorporar la cita al DOM de la página, necesitamos un elemento al que anclarlo. Para ello, se incluye en la plantilla de la bitácora, en el lugar donde deba aparecer la cita, un módulo HTML/Javascript con el contenido

<span class="cite"/>

(podría valer un <div>). En otras plataformas de blogging esto se podrá hacer editando directamente la plantilla o de algún otro modo.

Quote of the Day

You should see over these lines the result of my last project: a Quote of the Day implementation for Blogger It should be a piece of cake to port to other blogging platforms: the only requirement for the code to work is to have a recent version of the JQuery Javascript library loaded. Rewriting the code to eliminate that dependency should also be easy. Quips are published on Google Spreadsheets.

[Warning! Buzzword-enabled text ahead!] GData APIs implement an Atom extension that enables remote document querying and editing. What’s more, query results can be obtained as evaluated JSON objects; this technique allows to bypass most cross-site scripting security constraints, so Ajax widgets can be implemented without control over the server side.

We will need a published spreadsheet sporting quips and authors in two columns.

A tiny little script will get us the sheet’s contents. We only have to look for these pieces of information in order to make it work:

  • Publishing key.
  • Unique identifier for the desired sheet (a spreadsheet is organized as a book, so it can contain several sheets).
  • Desired cell range.

These can be obtained from the feed publishing URL that appears in Publish/More publishing options in the Google Spreadsheets interface. There goes the script:

var CiteSpreadsheet = {
    'rows': 159,
    'getJsonUrl': function(idx) {
        var baseSpreadsheet = 'http://spreadsheets.google.com/feeds/';
        var feedType = 'cells/';
        var key = 'o06661241339204957995.1659223542184495700/';
        var sheetId = 'od6/';
        var feedAccess = 'public/basic?';
        var range = 'range=A' + idx + ":B" + idx;
        var output = '&alt=json-in-script';
        var callback = '&callback=CiteSpreadsheet.processJsonResponse';
        return baseSpreadsheet + feedType + key + sheetId + feedAccess + range + output + callback;
    },
    'createScriptElem': function(url) {
        var html = '<script type="text/javascript" src="' + url + '"></script>';
        $(html).appendTo('body');
    },
    'getIndex': function() {
        var today = new Date();
        var startDate = new Date(today.getYear(), 0, 1);
        var delta = today.getTime() - startDate.getTime();
        var dayOfYear = Math.ceil(delta / 86400000);
        return dayOfYear % CiteSpreadsheet.rows;
    },
    'processJsonResponse': function(jsonData) {
        var retrievedContent = "<span>" + jsonData.feed.entry[0].content.$t +
            " <cite>" + jsonData.feed.entry[1].content.$t + "</cite></span>";
        $(".cite").append(retrievedContent);
    }
};

CiteSpreadsheet.createScriptElem(
    CiteSpreadsheet.getJsonUrl(
        CiteSpreadsheet.getIndex()));

What the code does, in short, is dynamically inserting a <script> tag in the document, with its src attribute pointing to a specific query URL for the spreadsheet. Output format should be json-in-script; this returns a ready-to-execute script that wraps data in a Javascript object. Its general format is described in the previous link, but Firefox, Firebug and a judicious break point go all the way to get a hold on the gory details.

We’ve got a feed with information about certain cells (range An:Bn, where n is a row index). As the sheet contains 159 quotations, in order to provide a different one daily we compute that row index as the current day in year modulus total number of rows.

Last but not least, we need a hook; someplace in the blog template to anchor the newly retrieved content. We do so by adding to the template an HTML/Javascript module where we want our quip to appear. Its contents should be, at the very least,

<span class="cite"/>

(a <div> would also work —in fact, any container element with class cite). For other blogging platforms the same effect could be achieved by directly editing the template, or by some other means which I leave as exercise for the reader.

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.