Calcular y mostrar el tiempo de lectura de un post | Oloblogger 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, ca...

16 de junio de 2011

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
Copy URL

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

follow us in feedly

20 comentarios :

  1. Hola, Oloblogger, comentarte que lo he probado en mi blog y funciona, tan solo que lo que tienes que buscar en mi caso no aparecía exactamente igual, sino que había un /entre el body y el >
    Un saludo.
    Gracias.

    ResponderEliminar
  2. Cierto Rampy, me comí la barra. Ya lo arreglo. Gracias.

    ResponderEliminar
  3. mmm... oloman: sigo teniendo problemas con el botón de ir arriba. Cuando abro el blog en otro pc la flecha queda dentro de la transparencia sobre la que se encuentran las columnas de post y de gadgets (supongo que debiera quedar afuera :S). ¿Hay algo que pueda hacer para solucionarlo? Disculpa las molestias. Muchas gracias :)

    ResponderEliminar
  4. P.D.= Muchas gracias por el efecto de cinta adesiva para las imagenes ;)

    ResponderEliminar
  5. JUANSI, quedará fuera o encima de los posts, dependiendo del ancho de la pantalla dónde lo veas. No obstante funciona en ambos casos.

    Y otra cosa... Esto se llama un off-topic. Tus comentarios los leo aunque los escribas en posts antiguos, que para eso Blogger me avisa cuando hay alguno nuevo ;) Lo mejor es que escribas siempre en la entrada que está relacionada con tu consulta, porque además de poder hacer referencia a lo que allí haya, suele haber también otros comentarios que ya explican cómo resolver problemas relacionados.

    ResponderEliminar
  6. jajaj, muchas gracias, escribia las preguntas en la ultima entrada por que pensaba que si las ponia en las antiguas no las leerias XD

    ResponderEliminar
  7. Hola, que tal, muy útil su script. Eso sí tengo un problema. Sí me muestra el tiempo de lectura en cada entrada, pero al ver en el archivo general, sale en el primer post solamente.
    http://chiledelterror.blogspot.com
    Gracias

    ResponderEliminar
    Respuestas
    1. Pues no debería porque se supone que controla la ID de cada post y lo muestra en todos. Sin embargo no puedo ver nada porque ahora no lo tienes puesto.

      Eliminar
  8. Hola, Oloman. He seguido los pasos y el script funciona pero me gustaría que el tiempo de lectura sólo se mostrase dentro de las entradas, es decir, que no aparezca en la página principal.

    ResponderEliminar
    Respuestas
    1. Hola. Eso es fácil. Sólo tienes que meter <p id='tiempolec'/> dentro de una condición que filtre como quieres.

      Eliminar
    2. Muchas gracias, Oloman. Ya está solucionado.

      Eliminar
  9. Perdona que te moleste de nuevo, Oloman. Me acabo de dar cuenta de que el tiempo de lectura no se muestra en Internet Explorer...

    ResponderEliminar
    Respuestas
    1. Cierto. Lo muestra como 00:00. Lo malo es que lo he estado viendo y no entiendo por qué falla. Maldito Explorer :(

      Yo ya no lo tengo instalado, así que por favor prueba a poner el contenido de estas variables entre comillas dobles por si fuera eso, aunque sinceramente, sospecho que no...

      var blancoinicial = "/^ /";
      var blancofinal = "/ $/";
      var blancosjuntos = "/[ ]+/g";

      Eliminar
  10. Hola Oloman,

    Utilizando el código tal cual lo explicas y con ayuda de alguna de las respuestas a los comentarios que hay, ha quedado casi perfecto. Sigo peleándome con el formato, que aún no he conseguido dárselo :(

    Extraordinario blog.

    Saludos.

    ResponderEliminar
  11. #tiempolec {PROPIEDADES CSS QUE QUIERAS}

    ResponderEliminar
  12. Hola.

    En mi blog no suelo añadir muchas fotos o vídeos, pero tengo ciertos posts que son necesarios y el caso es que tardan en cargar. ¿Hay alguna forma de hacer que cargue más rápido?

    He probado con poner spoilers pero no he podido comprobar si funcionaba pues todo el rato me daba problemas.

    Los posts son estos: http://nolanesp.blogspot.com.es/search/label/Ficha

    Como verás. en la mayoría de casos, hay que darle varias veces a "Más entradas" para que vayan cargando (lo hace de 1 en 1).

    Había pensado poner la galería y los vídeos en otro post pero prefiero tenerlo todo en uno.

    Gracias.

    ResponderEliminar
    Respuestas
    1. Quisiera algo así para las imágenes: http://www.filmaffinity.com/es/filmimages.php?movie_id=730631

      Eliminar
    2. Todo lo que incluyas en una web tarda algo en cargar y las imágenes y los vídeos son generalmente lo más pesado.

      De todas formas, ese sistema que tienes para ir cargando entradas debe estar basado en el feed y todo lo que sea leer un feed, es lento.

      Eliminar
  13. Saludos, Oloman. He leído tu artículo sobre el tema del tiempo estimado de lectura. El problema que tengo es que no lo quiero para una blog, sino para una web donde he resrvado una div para colocar el resultado. querría pedirte por favor que, si quieres y puedes ayudarme, me echases una mano pues este tema es muy importante para mi proyecto.

    Te envío un saludo y te agradezco la antención.

    ResponderEliminar
    Respuestas
    1. En una web (no Blogger), el código sería el mismo. La única diferencia es que en lugar de usar <data:post.id/> como ID a "medir", tendrás que pasar como parámetro la ID del bloque de tu página cuyo tamaño quieres comprobar.

      Eliminar