Calcular y mostrar el tiempo de lectura de un post

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.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter