Portada » Blog » Cómo hacer una línea de tiempo online

Cómo hacer una línea de tiempo online

por Javier Iglesia Aparicio
0 comentario 906 visitas 5 min. de lectura
A+A-
Reset

Cuando estamos escribiendo sobre historia es fácil enrevesar el texto con personajes, hechos y fechas. En ocasiones, por más que tratemos de hacer un texto sencillo, es indispensable acompañarlo de elementos gráficos que faciliten la compresión del tema. Y cuando hablamos de historia uno de los elementos fundamentales son las líneas cronológicas o líneas de tiempo. Afortunadamente en la web podemos encontrar multitud de herramientas que nos facilitan esta labor. Basta con disponer de los datos, comprar un ordenador portátil barato y tener una conexión a Internet. Existen muchas opciones disponibles: Timetoast, Rememble, TimeRime, TimeGlider, Timeline JS, Line o Tiki-Toki.

Cómo hacer una línea de tiempo con Timeline JS

Pero por desgracia, desde una cuenta gratuita, existen bastantes limitaciones como por ejemplo que solo nos dejan crear una única línea de tiempo o no podemos incrustarla en nuestra web. Por eso vamos a ver cómo se hace una línea de tiempo con TimeLine JS, ya que no tiene limitaciones en el número de líneas de tiempo a crear y podemos embeberlo gratuitamente en nuestros blogs o sitios web. Además, los datos los conservamos en hojas de cálculo nuestras y los podremos modificar en cualquier momento. Y las líneas de tiempo son responsivas, es decir, que se ven correctamente en ordenadores, móviles y tabletas.

Timeline JS dispone de un pequeño manual de uso, muy fácil de seguir, en su página inicial: http://timeline.knightlab.com/. Se basa en la creación de una hoja de cálculo en Google Drive. No hace falta crearse una nueva hoja. Basta con hacer una copia de su plantilla haciendo clic en el botón Get the Spreadsheet Template. Si ya estamos conectados con nuestra cuenta de Google aparecerá una copia de la plantilla en nuestro Google Drive y podremos empezar a trabajar en ella.

Es el momento de cambiar los datos con los nuestros. Podemos añadir cuantas filas necesitemos pero no debemos borrar o añadir columnas pues no funcionará. Este es el ejemplo que hemos utilizado para crear la biografía de la infanta Urraca García por si os sirve de guía: https://docs.google.com/spreadsheets/d/1CYoQemOF0D_mD-RwEsvtWVYjN8kwwtNL-AwRNBgGRbI/

Las cuatro primeras columnas sirven para escribir la fecha del evento (año, mes, día y hora). Podemos poner únicamente el año si no conocemos más datos. Otras cuatro columnas nos sirven para dar la fecha final del evento. No es obligatorio rellenarlas. También ponemos poner cómo queremos que se muestre la fecha del evento.

A continuación tenemos las columnas Headline y Text para escribir el título del evento y su explicación respectivamente. Y podemos acompañar cada evento de la línea cronológica con elementos audiovisuales ya existentes en la web: imágenes, vídeos, sonido… Basta con introducir su enlace, su autor y una breve leyenda e incluso una miniatura en las columnas Media, Media Credit, Media Caption y Media Thumbnail. Existen algunas opciones más pero para este breve tutorial es suficiente con lo descrito.

Una vez creada la hoja de datos es preciso hacerla pública en la web de forma que pueda ser consultada por Timeline JS. Basta con ir al menú Archivo y seleccionar Publicar en la Web. Nos dará una dirección URL que debemos copiar y pegar en el tercer paso.

En el tercer paso pegamos la URL obtenida previamente. Además podemos configurar algunos parámetros como el tamaño, el idioma o el tipo de tipografía. Para que sea vea bien en cualquier tipo de dispositivo tenemos que dejar la anchura al 100%.

Por último podemos comprobar cómo se ve dando al botón Preview. Y si estamos convencidos con lo que hemos hecho, basta copiar el código e introducirlo en nuestro blog o sitio web. Además cualquier cambio que hagamos a posteriori en la hoja de datos se actualizará automáticamente. Es decir, que no tendremos que realizar de nuevo todo este proceso. Basta con dar al botón Preview para comprobarlo, sin necesidad de tener que copiar y pegar de nuevo el código de incrustación.

Este es el resultado de nuestro ejemplo:

Dejar un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.