Calcular y mostrar el tiempo de lectura de un post

Fuente: Oloblogger.
16 del 6 de 2011

Lo que veremos hoy será un script que calcula las palabras e imágenes que incluye cada una de las entradas de un blog y que con ese dato, calcula y posteriormente muestra el tiempo aproximado que se tardará en leer el post completo.

Tiempo estimado para leer esta entrada: 01:37

Incluye un par de parámetros modificables para que cada cual los adapte a su gusto, ya que la velocidad de lectura varía considerablemente de una persona a otra. Aquí se ha estimado que 300 palabras por minuto para una lectura relativamente comprensiva y dos segundos para cada imagen, pueden ser una media aceptable.

El código se ha construido mediante una función JavaScript que, tras definir unos parámetros, secuencialmente hace lo siguiente:
  • captura el contenido del cuerpo principal del post (data:post.body) a través de una ID que habrá que asignar a cada uno
  • cuenta las imágenes que se usan (img.length)
  • elimina el código HTML que pueda llevar, mediante la localización de los caracteres < >
  • normaliza los espacios en blanco duplicados, al principio y al final, para convertirlos en únicos entre palabras
  • divide el texto cortando por dichos espacios blancos para contar finalmente palabras reales (split)
  • calcula el tiempo que llevaría leer esas palabras en función de los parámetros fijados al principio
  • devuelve un texto formateado con el cálculo resultante
Este es el algoritmo anterior una vez codificado y preparado para insertar antes de </head>:

<script type='text/javascript'>
//<![CDATA[
var palabrasporminuto = 300;
var imagenesporminuto = 30;

function tiempolectura(id) {
var contenidopost = document.getElementById(id);

var img = contenidopost.getElementsByTagName("img");
var numimg = img.length;

var strx = contenidopost.innerHTML;
if(strx.indexOf("<")!=-1) {
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}

var blancoinicial = /^ /;
var blancofinal = / $/;
var blancosjuntos = /[ ]+/g;
strx = strx.replace(blancosjuntos," ");
strx = strx.replace(blancoinicial,"");
strx = strx.replace(blancofinal,"");

var palabras = strx.split(" ");
var numpalabras = palabras.length;

var minutos = parseInt((numpalabras/palabrasporminuto)+(numimg/imagenesporminuto));
var segundos = parseInt((((numpalabras/palabrasporminuto)+(numimg/imagenesporminuto))-minutos)*60);
minutos=("0" + minutos).slice (-2);
segundos=("0" + segundos).slice (-2);

var devolver = "Tiempo estimado para leer esta entrada: "+minutos+":"+segundos;
document.getElementById("tiempolec").innerHTML = devolver;
}
//]]>
</script>

Una vez montado en nuestra plantilla y ahora con Expandir plantillas de artilugios seleccionado, buscamos <data:post.body/>. Tenemos que meter esta variable en un DIV que incluya una ID única, para lo cual utilizaremos una variable de las mismas que ya usa Blogger (data:post.id). Previamente, para que salga al principio del post, colocaremos un párrafo sin contenido pero con id='tiempolec'. Gracias a esa ID, ese párrafo será rellenado automáticamente con el resultado del script. Por último, la llamada a la función. Tal que así:

<p id='tiempolec'/>
<div expr:id='data:post.id'>
<p><data:post.body/></p>
</div>
<script type='text/javascript'>
tiempolectura(&quot;<data:post.id/>&quot;);
</script>

Para cambiar el sitio dónde se mostrará el tiempo de lectura, sólo hay que reubicar el párrafo <p id='tiempolec'/> y dando estilo a #tiempolec, lo podéis destacar o cambiar por entero de formato.

En el primer trozo de código, los valores de palabrasporminuto e imagenesporminuto, son los que podéis cambiar a vuestro antojo. Con las palabras creo que no habrá demasiada discusión, aunque blogs con textos muy técnicos o incluso poesía, quizás deberían rebajar la cifra de 300 que yo he estimado. Pero con las imágenes ya es otra historia. Servidor ha calculado 2 segundos para cada una, lo que hace las 30 por minuto que se indican en el ejemplo.

Este es un pequeño reto que me lanzó hace unos días Pizcos y que debido a la utilidad práctica que puede tener y, sobre todo, a mi cabezonería incorregible, recogí con mucho gusto.
Oloblogger



Recomendar a un amigo