Contador de tiempo en una página... casi sin código | Oloblogger No sé si interesa mucho o no, hacerles saber a nuestros lectores cuánto tiempo llevan perdido en una página nuestra. Lo digo porque si echa...

25 de noviembre de 2010

Contador de tiempo en una página... casi sin código

No sé si interesa mucho o no, hacerles saber a nuestros lectores cuánto tiempo llevan perdido en una página nuestra. Lo digo porque si echaran cuentas, quizás cerrarían la ventana -o el navegador entero- y a lo mejor, se pondrían a hacer algo más provechoso ;)

Pero bueno, en cualquier caso, me ha gustado este truquillo que ví en el blog ¿Cómo se hace...? y por eso lo explico. La idea es poner un contador de tiempo que se inicia al cargar una página y actualizarlo segundo a segundo para mostrar el tiempo acumulado que se lleva en ella.

Allí nos proponen en primer lugar, un script para crear nuestro contador de permanencia. Lo de usar JavaScript es probablemente lo primero que nos vendría a la cabeza a la mayoría; pero lo que me ha parecido más ingenioso, ha sido la segunda opción que se propone y que prescinde de tener que crear una rutina. Como vemos, se puede conseguir lo mismo de una forma más sencilla y quizás más estética, con unos simples GIFs animados.

Tiempo que llevas leyendo esta entrada


Esto que habeis visto son 5 imágenes animadas, que incluyen los números y tiempos entre cuadros, necesarios para conseguir el efecto. De izquierda a derecha:
  1. Dígitos del 0 al 5, con 600 segundos de retardo entre cuadros
  2. Dígitos del 0 al 9, con 60 segundos de retardo entre cuadros
  3. Dos puntos + cuadro en blanco, con 1 segundo de retardo entre cuadros
  4. Dígitos del 0 al 5, con 10 segundos de retardo entre cuadros
  5. Dígitos del 0 al 9, con 1 segundo de retardo entre cuadros

Que quede claro que el sistema del script es perfecto y este de las imágenes puede tener pequeños desajustes si nuestra conexión no es muy rápida o si el servidor de las imágenes está pesado. También, por cuestiones del caché, si tenemos varias ventanas abiertas con estas mismas imágenes, puede que veamos cosas raras. Por supuesto, nuestro contador no pasa de los 59 minutos, 59 segundos, pero ya sería raro que alguien estuviera una hora leyendo un post.

Lo que habría que teclear para conseguir este contador sería esto:

<div style="text-align: center;">Tiempo que llevas leyendo esta entrada</div>

<div style="margin: 0px auto; text-align: center; width: 150px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9eATZARVCUfKm9909Jh_7Ym6QAsXtaiv4hNr0ROBpXMHz1hOlKOVF0ZoR5T2gB3iBKSR999dyaJYl7yfFHAATDPtjFA7QqIXsOPFknEaWCEsGTFJH4oh_yCZrq1eJpRn8PBmlr0LmDP1y/" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrq4RdNkUfljQMK9mWEz4C_Ar-0JkHr67xhLuwHuwbSzbp5APWFqFy5jIC_FhyphenhyphenIZ25jrgI20a7X_hIfqC-ELbYPdN58LPwuAypPbffTfhMw6SqVrd4rw2YUes0YInxMJ1Qf3K-KDsxsxBx/" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5hqBvbERzu8uNjx1tCVff16b0CNhB9LRc3SAmi4OcnE3QR17Ih7Nsg2QxdV5ZKmsYvBHDi1vohUW-CdWPRIzyFxtJHObX-qDGHi07fzjaw8aHK0pjnzsEJdfSpE8oPJ_Gw01U-Y6l96Wg/" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii90EhdEzw7pUejBBK5LH6nnIJS33R9dg23z_aLcAfAx3ZxLtaNWVb_E5RRrjE_FlU9FjwtcMOdTz7CWVeAcEfrNfMP6LnUuGB1GD8LaO22ZmxnfzVexhEN9azVWT5LihCW3xXO0gwIZk0/" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7-_9oFg_31ZnO0ESI6hLtaMgWZY9ZZISQqKYFeaoBNcnEfpQU5573mutuPVwbuYPsZnLMfZXCxQxIdSnJSiucMrzxyGSRX-qL2pX2owDIFGpw1OsOu7KKfmALiCOzGk7YGg8bCSf78QdF/" /></div>

Como siempre, lo conveniente es que bajeis las imágenes del ejemplo y tras alojarlas vosotros mismos, sustituyais las direcciones en el anterior ejemplo. También podeis crear vuestros propios GIFs para una personalización total.

No me digais que no es una solución creativa ¿o no?

¿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

10 comentarios :

  1. Que curioso, es una buena opción para ahorrar escribir codigo javascript, Supongo que al ser imagenes, el tiempo de carga sera mucho inferior.
    Saludos

    ResponderEliminar
  2. Me gusta mucho la gráfica de tu blog, las ayudas que ponés y espero algún día, lograr mejorar con herramientas tan interesantes como las que ponés acá.

    Muchas bendiciones y saludos desde Costa Rica.

    ResponderEliminar
  3. siempre es bueno saber cuanto tiempo pasa la gente navegando en nuestro sitio

    ResponderEliminar
  4. Interesante propuesta, aunque a veces sobrecargamos de historias el blog. Sí he advertido que es conveniente situarla como tú la tienes o a comienzo del blog, porque el tiempo comienza a contar en cuanto se divisa el script.
    Gracias de cualquier forma por compartirlo.

    ResponderEliminar
  5. Buenísimo lo del Contador, y muy lindo tu Blog, muy buen diseño!

    ResponderEliminar
  6. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  7. excelente!. ya lo tengo en mi blog. UN abrazo

    ResponderEliminar
  8. Supongo que unas imágenes livianas deben pesar menos que un script, aunque teneis que tener en cuenta que este sistema no es muy fiable. Sólo es un pequeño juego que quizás sirva de idea para otra cosa.

    Y respondiendo a otro de los comentarios anteriores, esto no sirve para ver cuanto tiempo están otros en nuestro blog. Sólo sirve para que el visitante sepa cuanto tiempo lleva él.

    Gracias a todos por comentar y saludos.

    ResponderEliminar
  9. El navegador Opera cuando dejamos de ver un gif por estar mas abajo o arriba en la página y luego volvemos a verlo lo reinicia desde el primer fotograma.. :( Bueno para algunas cosas es muy práctico jeje

    Estoy pensando seriamente en poner en mi blog las miniaturas de blog amigos a la derecha y que los otros gadgets queden a la izquierda, me pondré a ello a ver si lo logro, pero será muy dificil? tengo una plantilla de las tradicionales. http://teconpalabras.blogspot.com/

    Bueno, si lo consigo les digo como.. que creo que a muchos blogers nos está sobrando ancho.

    Un saludo

    ResponderEliminar
  10. Luis, tendrás que cambiar el ancho de las columnas del blog y luego añadir una nueva sección para la segunda barra lateral. Pon lo que está en cursiva en el buscador de arriba y encontrarás alguna explicación de como se hace cada una de las dos cosas.

    ResponderEliminar