Cómo hacer una línea de tiempo usando TimelineJS

el Noviembre 12, 2013 en Tutoriales

En muchos países del mundo crece la emoción porque su selección asistirá a la próxima Copa Mundial de fútbol que se realiza en Brasil a mediados de 2014. Al ver ese entusiasmo, me hice una pregunta: ¿Cuáles han sido las sedes y los equipos ganadores de las anteriores Copas del Mundo?

Para satisfacer mi curiosidad, decidí hacer una línea de tiempo (y así hacer mi respuesta más atractiva).

Inicié buscando fuentes para conseguir los datos que necesito para mi proyecto, y encontré un artículo en Wikipedia con información sobre la Copa Mundial de Fútbol, y también sobre los ganadores de todas las ediciones.

Usando Table Capture

Por ser una nota de Wikipedia, la información no necesariamente se encuentra en un formato de base de datos, pero eso no es un problema. Usando la extensión de Chrome llamada Table Capture, pude extraer la tabla con la información que necesito para mi línea de tiempo. Para hacerlo sigue estos pasos:

Paso 1

En tu navegador, pega la dirección del artículo de Wikipedia sobre las Copas del Mundo. Al hacerlo podrás notar que, en la barra de dirección, al lado derecho se encuentra el icono de Table Capture; esto significa que hay información que podemos extraer.

Paso 2

Haz clic sobre el icono rojo y verás como se despliega un listado con las tablas o secciones que pueden ser extraídas de la página web. Ecuentra la tabla que necesitas y haz click en la opción Copy to clipboard o Copy to Google Doc

Paso 1-Timeline

Paso 1-Timeline

Toda la información que logré obtener de la página web puede ser encontrada haciendo clic aquí (archivo original)

Paso 3

Después de un poco de limpieza de la base de datos, todo quedó bien organizado y listo para ser usado. Si quieres usar el archivo, se encuentra disponible en la siguiente liga.

Algunas de las acciones que hice para limpiar los datos fueron:

  • Buscar y sustituir algunos símbolos
  • Ordenar valores fuera de la columna
  • Dar formato de número o texto a algunas celdas
  • Eliminar algunos textos que se encontraban en las celdas

Usando Timeline.js

TimelineJS es un desarrollo para hacer lineas de tiempo usando hojas de calculo de Google (spreadsheets). Realmente no es necesario saber de programación; lo único que se requiere es seguir una plantilla que encuentras en la página, y rellenar las celdas. Sigue unos sencillos pasos a continuación.

Paso 4

Con mi hoja de cálculo lista, es momento de seguir los pasos de TimelineJS. Necesito hacer uso de la plantilla que se encuentra disponible en su página web (o aquí). Es importante que sepas que no podrás editar el archivo; para eso es necesario que hagas una copia en tu cuenta de Google Drive para cada proyecto. Solamente haz clic en el botón Utilizar esta plantilla (debes iniciar sesión en Drive antes).

2

Paso 5

La plantilla sirve para que rellenes los campos con la información que tienes. No cambies los títulos de las columnas, o agregues más columnas; de lo contrario, no funcionará la línea de tiempo.

Comenzaré por rellenar los campos con la información que tengo en las columnas de la plantilla. Al finalizar mi documento, mi línea de tiempo se ve así:

Puedes encontrar el documento que usé para la línea de tiempo aquí. Puedes ver que uní algunas de las columnas de la base de datos con los resultados y las pegué en los espacios de la plantilla.

  • Start date Es la fecha de inicio de cada evento (formato fecha)
  • End date Es la fecha de terminación de los eventos (formato fecha)
  • Headline Título del evento (formato texto)
  • Text Puedes usarlo como breve descripción (formato texto)
  • Media Si tienes algún recurso multimedia como video o fotos, puedes agregarlo en esta columna (formato URL)
  • Media Credit En esta columna, puedes dar crédito al autor de la obra (formato texto)
  • Media Caption Aquí puedes agregar la dirección web del autor (formato URL o texto)

Paso 6

Aunque ya tengo un primer archivo listo para usar en mi línea de tiempo, puedes ver que no es tan atractivo… así que voy a complementarlo con algunos recursos multimedia que encontré en internet sobre cada Copa del Mundo. Para eso solamente voy a pegar las direcciones y textos en cada columna. El archivo final se encuentra aquí.

Paso 7

Para publicar el archivo, es necesario seguir dos simples pasos:

  • El el menú archivo, haz clic en la opción Publicar en la web, y en la ventana emergente, haz clic en botón Iniciar publicación. Al hacerlo verás una dirección web en la parte inferior; cópiala, pues será necesaria para el siguiente paso.

  • En la página de TimelineJS, encuentra el cuadro de texto Google Spreadsheet URL y pega la dirección que obtuviste.
  • Ahora solamente haz click en el botón Preview y verás el resultado de la linea de tiempo.

Ahora yo tengo una respuesta a mi pregunta, y tú ya puedes hacer una linea del tiempo.

Si te animas a hacer una línea de tiempo (o si tienes dudas), no te olvides de compartirla en info [@]escueladedatos.org

2 respuestas a “Cómo hacer una línea de tiempo usando TimelineJS”

  1. […] Timeline JS. Su interfaz es menos intuitiva, ya que requiere usar una hoja de cálculo de Google Spreadsheet en la que se introducen los textos e imágenes. Sin embargo, genera líneas de tiempo muy visuales y completas que pueden integrarse en páginas web con un simple código. […]

  2. […] Timeline JS. Su interfaz es menos intuitiva, ya que requiere usar una hoja de cálculo de Google Spreadsheet en la que se introducen los textos e imágenes. Sin embargo, genera líneas de tiempo muy visuales y completas que pueden integrarse en páginas web con un simple código. […]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *