Bibliolinks v3

Lately, real life constraints have forced me to consider the possibility of growing an additional pair of arms, Shiva-style; however, some tiny bugs in Bibliolinks, together with my recent discovery of jQuery, have prompted me to release a new version, Bibliolinks v3.

This version features a new, web-two-dot-zeroish load progress indicator, together with a handy link to open all URLs at once, and will exclude all self-links from the list (they weren’t that useful, anyway). You could have a look at my original article for installation details, or just read the documentation (Yes! This time the code is slightly documented!); but as there are subtle changes, I’ll post here a short guide:

  1. Obtain a Google AJAX Search API key.
  2. Edit your template and add this code snippet just before the </head> tag:
    <link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/>
    <link href='http://brucknerite.googlepages.com/bibliolinks.css' rel='stylesheet' type='text/css'/>

    Download this stylesheet here.

  3. Save your template, click on the Expand Widget Templates box and look for some place inside your post footer to drop this code snippet:
    <a class='bibliolink' expr:name='"bibliolink" + data:post.id' style='display:none;cursor:pointer;'/>

    In my template, there is a <div class='post-footer'>, but YMMV.

  4. Finally, add links for two scripts. The best place to do so is just before the closing </body> tag:
    <script src='http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOUR_KEY_HERE' type='text/javascript'/>
    <script src='http://brucknerite.googlepages.com/bibliolinks3.js' type='text/javascript'/>

    Don’t forget to substitute YOUR_KEY_HERE by your very own API key.

And that’s all. Wonder why I skipped v2? Me too. There are stranger version numberings over there, you know.

Anuncios

Código elegante

Una herramienta recomendable para todo aquél que planee mostrar código en una bitácora es dp.SyntaxHighlighter. Éste es el modo de incorporarlo en Blogger:

  1. Descarga la última versión disponible de dp.SyntaxHighlighter (1.4.1).
  2. Descomprime el paquete en algún lugar de tu disco duro. Hay algunos ejemplos de uso, y dos directorios importantes: Scripts y Styles. Necesitas alojar en algún lugar accesible la hoja de estilos CSS SyntaxHighlighter.css, el script shCore.js y tantos “brushes” como planees utilizar. Cada brush es un pequeño script adicional que proporciona soporte para un lenguaje de programación. Los lenguajes soportados son C++, C#, CSS, Delphi, Java, Javascript, PHP, Python, Ruby, SQL, Visual Basic y XML (HTML, XHTML… se consideran dialectos).
  3. Edita tu plantilla de Blogger (¡haz copias de seguridad primero!) En primer lugar, añade la referencia a la hoja de estilos dentro del la cabecera de la página (por ejemplo, justo antes de </head>). Así:<link type=’text/css’ rel=’stylesheet’ href=’SyntaxHighlighter.css’/>
  4. Edita el cuerpo de la plantilla para poner el código que sigue antes de </body>.<script type=’text/javascript’ src=’shCore.js’/>
    <script type=’text/javascript’ src=’shBrushJScript.js’/>
    <script type=’text/javascript’ src=’shBrushJava.js’/>
    <script type=’text/javascript’ src=’shBrushCss.js’/>
    <script type=’text/javascript’ src=’Scripts/shBrushXml.js’/>
    <script type=’text/javascript’>//<![CDATA[
    dp.SyntaxHighlighter.HighlightAll(‘code’);
    //]]></script>He escogido ese conjunto de brushes, pero puedes poner cualquier otro.
  5. Ya hemos terminado con la infraestructura. Ahora, sólo es necesario incorporar código para mostrar el nuevo juguetito de nuestra bitácora. Eso es muy fácil: basta con añadir el código dentro de una marca <textarea>, con los siguientes atributos:<textarea name=”code” class=”nombre_de_lenguaje:modificadores”>
    …código a mostrar…
    </textarea>El atributo name cualifica al área de texto para ser modificada dinámicamente por el script dp.SyntaxHighlighter. class determina el lenguaje y ciertos modificadores de comportamiento, expresados como pseudoclases de CSS. Estos son los detalles adicionales.

Algún consejo: es interesante aplicar los atributos rows y cols al elemento <textarea>. Esto es así por robustez: si no llegaran a funcionar los scripts (normalmente debido a un fallo transitorio de red, a que el usuario tiene desactivada la ejecución de Javascript o a que se está leyendo el artículo fuera del contexto de un navegador —por ejemplo, a través de un lector RSS) el código se vería de todos modos.

Y para el final, los problemas.

  • Los saltos de línea son un problema con el editor de Blogger. La única solución que he encontrado pasa por desactivar la conversión automática de saltos de línea en elementos <br/>. Mira aquí.
  • Si estás introduciendo XML o cualquier variante (HTML, por ejemplo), es recomendable proteger el primer caracter de las marcas (el signo <), que debería aparecer, literalmente, como &lt;. Esto no afectará a la presentación del código, ni a la ventana de “vista simple” proporcionada por el script.

Bibliolinks explained

In an earlier post I presented bibliolinks, a new blogger tool based on Google AJAX Search API. Now it’s time to explain how to install it in your Blogger blogs. You’ll have to modify your template in obscure and contorted ways, so be prepared and backup it before it’s too late! One more thing: this procedure works with my own template, on Firefox 2. I will not be held responsible of anything if you are not me, fiddling with my own template on my own setup. Even if you were me (and I am me, unless…) I wouldn’t bet on any accountability.

Aren’t you scared yet? Ready? There we go. First of all, you have to register for a Google AJAX Search API key here. Got it? Save it somewhere! (You can always regenerate it later; the key is calculated from the URL you input, in this case, you blog’s address.)

Now, edit your template and add this snippet just before your closing </head> tag:

<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/>

We are not even close to finish yet! Save your template, click on the Expand Widget Templates box and look for some place to drop this code snippet:

<a class='bibliolink' expr:name='"bibliolink" + data:post.id' style='display:none;cursor:pointer;'>Bibliolink <span></span></a>

This should be located somewhere inside your post footer container (on my template, it’s a <div class='post-footer'> tag). I decided to put it inside an empty element denoting a third line of content for post footers, exactly here:

<p class='post-footer-line post-footer-line-3'/>

YMMV, of course. Now, only one more step: you have to provide a link for two scripts. The best place to do so is just before the closing </body> tag. This is the first script, for Google AJAX Search functions:

<script src='http://www.google.com/uds/api?file=uds.js&amp;v=1.0&key=YOUR_KEY_HERE' type='text/javascript'/>

Don’t forget to substitute YOUR_KEY_HERE by your own API key. Immediately next to that script, add this one:

<script language='Javascript' src='http://brucknerite.googlepages.com/bibliolinks.js' type='text/javascript'/>

Here you should use your own hosting for the code, since I’m using my own Google Page. Here is a link to an uncompressed (and, for now, uncommented) version of the code.

And that’s all for now!

¿El BOE por RSS?

La necesidad es la madre de las soluciones. Una combinación de dos circunstancias,

  1. Dentro de mes y medio, si todo va bien, seré padre por segunda vez.
  2. En breve entrará en vigor la Ley de Igualdad en España (texto completo).

ha provocado que me interese por el BOE. Como sabéis, la ley en cuestión no será efectiva hasta el día siguiente de su publicación en el Boletín. Y con mi inclinación tecnológica, me pregunto: ¿tiene el BOE una fuente RSS? Me interesa conocer cuándo empieza mi derecho a disfrutar de los famosos “15 días de baja paternal” (la historia completa es más compleja, pero eso no es el motivo de este cuento).

Respuesta: claro… que no. El BOE vende un servicio de alertas llamado BOELex, que no tiene un coste muy alto y permite recibir avisos de publicación de leyes en tu correo electrónico. Pero yo no necesito tanto; también tengo algo de hacker (bueno, lo intento), así que la idea del día es:

Crear una fuente RSS sobre una búsqueda del BOE

Si el BOE no publica fuentes RSS, habrá que inventárselas. Para eso, viene al pelo RSSxl, una pasarela HTML/RSS. En beta, como todo, pero mi cerebro está en alpha todavía, así que servirá. Por tanto,

Primero: realizar la búsqueda que queremos en el BOE. Para ello, buscamos el enlace de búsqueda avanzada. Bastará con especificar una palabra en el título, por ejemplo, “igualdad”, y otra en el departamento emisor (en este caso, “jefatura”, por la Jefatura del Estado). Podemos también poner una fecha de publicación; si no, se nos irá hacia atrás hasta el principio de los tiempos, y tal vez antes. Ponemos “01/01/2007” y “31/12/2007” en los campos correspondientes. Pulsamos “Buscar”.

Ahora tenemos la búsqueda en pantalla. No nos van a interesar los elementos gráficos, así que podemos pulsar el enlace “Ir a versión adaptada” que aparece en la esquina superior izquierda de la pantalla (esto es opcional). Veremos que tenemos una URL que tiene, en su query, todos los parámetros de la búsqueda. ¡Puede solicitarse una búsqueda en el BOE mediante un GET de HTTP! Esto facilita las cosas (y yo soy muy vago).

Segundo: en la página de RSSxl, introducir la URL obtenida en Page URL. Como RSSxl es un scraper, necesita cierta información para delimitar el contenido de las entradas RSS que creará. Así que…

Tercero: mirar el código HTML de la página de resultados del BOE. Tras hacer una búsqueda cualquiera, vemos que la parte que nos interesa es:

<div class="BoeSumarioBD">

<a name="contenido"></a>

<h1>Búsqueda en BOE</h1>
<h5>Resultados 1 a 2 de 2</h5>
<h2>MINISTERIO DE TRABAJO Y ASUNTOS SOCIALES (BOE de 15/03/2007 - Sección III)</h2>
<h3>Resolución de 28 de febrero de 2007, de la Secretaría General Técnica, por la que se publica el Convenio de colaboración entre el Instituto de la Mujer y el Servicio Gallego de Promoción de la Igualdad del Hombre y de la Mujer.</h3>

<div class="puntoHTML enlacesDoc"><a href="doc.php?coleccion=indilex&amp;id=2007/05553&txtlen=664">Más...</a></div>

<h2>MINISTERIO DE TRABAJO Y ASUNTOS SOCIALES (BOE de 26/01/2007 - Sección II)</h2>
<h3>Orden TAS/77/2007, de 17 de enero, por la que se dispone el nombramiento, por el procedimiento de libre designación, como Subdirector General para la Prevención de Riesgos Laborales y Políticas de Igualdad, de don Adrián González Martín.</h3>
<div class="puntoHTML enlacesDoc"><a href="doc.php?coleccion=personal&amp;id=2007/01626&txtlen=693">Más...</a></div>

</div>

Vemos que los resultados de búsqueda tienen un título (delimitado por etiquetas <h2>) y un contenido (delimitado por <h3>). Además, hay un enlace. Los caracteres acentuados salen como entidades en hexadecimal, pero consideremos eso un problemilla estético.

Cuarto: rellenar en RSSxl los campos Start Item String con el valor “h2“, y End Item String con “/div” (en general, los valores que introduzcamos aquí no tienen que ser HTML bien formado; ¡pueden ser incluso expresiones regulares!). Así abarcamos una entrada completa.

Quinto: añadamos la información cosmética. Para la descripción de los elementos RSS, los campos Start Description String y End Description String llevarían los valores “h3” y “/h3“. Es interesante delimitar la búsqueda al bloque que contiene los resultados, lo que se hace fácilmente poniendo Start String a “BOESumarioBD“. También puse Link Number a 1, pero no noté cambios.

Sexto: pulsamos Generate RSS, con lo que obtendremos la URL de una fuente RSS que nos vale. Más o menos.

El resultado es este enlace, al que nos podremos suscribir con un lector RSS. Yo uso Firefox, así que me puedo suscribir mediante los marcadores dinámicos (live bookmarks).

Hay problemas, como en toda chapucilla tecnológica. Los caracteres acentuados aparecen como entidades HTML en hexadecimal. Más importante aún, los enlaces no funcionan. Por más vueltas que le di a RSSxl, no conseguí arreglar esto.

Hasta que (continuará)…