Creando timelines en tu sitio web alimentadas por una hoja de Google

Muchos sitios web pueden ganar un buen recurso incluyendo una linea de tiempo con contenido multimedia clasificado por fechas, una “timeline” que os enseñaremos hoy cómo crear a partir de una hoja de cálculo de Google.

Se trata de Timeline JS3, un proyecto de knightlab que nos ofrece la posibilidad de configurar y publicar lineas de tiempo de forma sencilla, mostrando mapas, fotos, vídeos y varios otros recursos dentro de una linea de tiempo horizontal que podemos incrustar en cualquier sitio web.

Ejemplo de linea de tiempo generada

Ejemplo de linea de tiempo generada

Los pasos que hay que realizar son los siguientes:

– copiamos la plantilla de Google Spreadsheet que tienen disponible en su sitio web. Esa será la hoja de los datos, por lo que es necesario que todos los responsables por la información tengan acceso a la misma.
– rellenamos las filas del archivo con la fecha de inicio, fecha de fin, contenido multimedia, fondo, texto que acompañará al contenido y demás información que deseemos publicar en nuestra linea de tiempo. No hay límite de filas, podemos incluir tantas como queramos. Es posible incluso especificar días y horas exactas de cada elemento.
– publicamos la hoja de Google en Internet usando su menú principal. Una vez publicada, copiamos la url de la misma y la pegamos en la web de TimeLine JS3 para cómo está quedando el resultado.
– Copiamos el código generado para incrustarlo en nuestro sitio web.

A medida que actualizamos la hoja de datos, la linea de tiempo se actualizara inmediatamente, por lo que podemos ofrecer acceso a personas que no tengan conocimiento de programación para que sean responsables por alimentar el contenido que todos verán en el sitio correspondiente.

El resultado puede personalizarse bastante, y es compatible con dispositivos móviles.

Juan Diego Polo

Estudió Ingeniería de Telecomunicaciones en la UPC (Barcelona), trabajando como ingeniero, profesor y analista desde 1998 hasta 2005, cuando decidió emprender creando wwwhatsnew.com.