Comunicación

Herramientas para el periodismo de datos: tutorial TimelineJS

7 Jun , 2013  

Herramientas para el periodismo de datos hay muchas, aquí comparto una que descubrimos y que no necesita de demasiados conocimientos técnicos para su utilización.

TimelineJS es una herramienta que permite crear una línea de tiempo para presentar los acontecimientos del curso de una historia añadiendo además si se desea, diversos tipos de contenidos multimedia. Es una utilidad open-source disponible en varios idiomas y que permite utilizar contenidos de redes sociales, servicios de vídeo, audio, etc.

Su funcionamiento es bastante sencillo y sus resultados son más que aceptables. Combina las hojas de cálculo de Google Drive para la utilización de los datos y ofrece una gran cantidad de opciones para personalizar el contenido final.

TimelineJS

En este tutorial se recogen los pasos necesarios para crear un timeline que posteriormente se podrá insertar en la página web que se desee. No requiere grandes conocimientos técnicos y sí tener en cuenta que para que ofrezca el mejor resultado posible, cada hito deberá ser breve y formar parte de una historia mayor. Si la historia no es cronológica o tiene saltos no tendrá el mismo efecto final.

¿Qué necesitas? Una historia cronológica y tener una cuenta de Google con la que acceder a la plantilla de GoogleDocs que TimelineJS facilita para rellenarla con los eventos que se van a contar.

Este ejemplo parte del timeline con la historia de los distintos gobiernos de la Junta de Andalucía que forma parte del especial publicado con motivo del inicio de la novena legislatura andaluza. En este caso, los eventos a destacar estaban bastante claros, pero antes de empezar se debería elaborar un guión en el que se enumeren cuáles serán los pasos a destacar.

A continuación accede al sitio de TimelineJS y pulsa sobre Make a Timeline, eso te llevará hasta el link en el que se encuentra la plantilla de Google que hay que utilizar. Pulsa sobre el botón que da acceso a la plantilla de la hoja de cálculo.

Botón acceso plantilla

 

 

Esto abrirá la plantilla en Google Docs y ya sólo restará pulsar sobre el botón de utilizar esta plantilla que creará un duplicado del documento que renombraremos (por defecto se llama Copia de plantilla) y sobre el que ya se puede comenzar a trabajar.

utilizar plantilla

La hoja de cálculo tiene diez campos en total. Algunos son obligatorios y otros opcionales. De izquierda a derecha se encuentran:

campos plantilla

Start Date (fecha de inicio). Obligatorio. Marca la fecha de comienzo del hito que se va a incluir.

End Date (fecha final). Opcional. Señala el momento en el que el evento destacado se termina.

Headline (titular). Obligatorio. Mostrará el título de cada diapositiva del timeline.

Text (texto). Opcional. Ofrece la posibilidad de mostrar el contenido de tipo texto que  puede acompañar a cada hito.

Media (multimedia). Opcional. Es la casilla donde ocurre la magia. Tan solo hay que pegar la url de la fuente que queremos mostrar y la aplicación se encargará de incluirla en la historia. Actualmente se pueden pegar direcciones web de Twitter, YouTube, Vimeo, Vine, Google+, GoogleMaps, Wikipedia, Soundcloud, etc. Solo se necesita copiar y pegar la dirección que se ve en el navegador para que el contenido aparezca en el timeline.

Media credit (créditos). Opcional si los contenidos son propios, si no, debería ser del todo obligatorio citar la fuente que se está utilizando.

Media caption (subtítulo del medio). Opcional. Para una foto por ejemplo, el media caption sería el equivalente al pie de foto.

Thumbnail (miniatura). Opcional. Ofrece la posibilidad de mostrar una miniatura que enlace al contenido que queremos mostrar. Si se usa, el funcionamiento es igual que el de la columna de Media: se copia y pega en esta casilla la url de la imagen que se quiere enseñar. El tamaño de imagen de estas miniaturas debe ser de 32×32 píxeles.

Type (orden). Es obligatoria si se quiere que un determinado contenido sea el primero que se muestre al cargar el timeline. Para ello se rellena esta casilla en la fila del contenido que se quiere enseñar en primer lugar escribiendo title. Admite otra orden escribiendo era que mostraría un hito que podría separar distintas etapas del timeline. Las filas con era no admiten multimedia, sólo titular y fecha.

Tags (categorías). Opcional. Se pueden incluir hasta seis etiquetas por evento.

Una vez rellenada toda la plantilla es necesario publicar el documento. Para ello, se accede al menú archivo y se selecciona Publicar en la web.

menupublicar

En el menú emergente que sale a continuación, se marca la opción de “Volver a publicar automáticamente cuando se hagan cambios” (esto permitirá modificar el timeline sin tener que tocar el código) y pulsar a continuación en Publicar ahora.

hoja publicada

En la parte inferior del cuadro se generará una url que debemos copiar para volver a continuación a la web de timelineJS.

pegar urlEn el apartado de Make a Timeline que se mencionó al principio, debe pegarse la url del documento de Google en la casilla habilitada al respecto.

Debajo de dicha casilla se encuentran las opciones para personalizar el timeline que ya podrá verse al final de esta página. Al desplegar la casilla de More Options, se podrá seleccionar el idioma del timeline, la textura de los mapas de Google en caso de que se hayan utilizado (es necesaria la API de Google para poder personalizarlo), el tipo de fuente a utilizar, y especificaciones varias.

El último paso sería copiar el código que se ha generado y pegarlo allí donde se quiere mostrar el resultado obtenido.

El ejemplo que se muestra aquí no se ve correctamente porque no se diseñó para este espacio y por eso hay que hacer scroll para leer los textos completos. Aquí está embebido en la ubicación original que se pensó para este trabajo y estos son otros ejemplos en los que se ha utilizado esta misma herramienta.

Si tenéis dudas, preguntas u otros ejemplos de timelines que merezca la pena ser comentados no dejéis de utilizar los comentarios de la entrada.

, , ,


2 Pingbacks/Trackbacks

  • alejandra

    Hola, una pregunta.. si no tengo la fecha completa sino por ejemplo 3000 a.c ¿Cómo lo configuro para que no me salga que el dato es inválido?

    • fbarquilla

      No sé si funcionará exactamente como tú quieres, pero podrías probar a añadir los años en negativo. Por ejemplo, 3000 ac sería -3000. Asegúrate de cambiar el formato de la celda a texto plano para que surta efecto. Espero que funcione ;-)

  • Pingback: Herramientas para el periodismo de datos: tutor...()

  • Pingback: Herramientas para hacer infografías: Timelines()

  • Agustina

    No logró poder ver el link en el blog, he intentado en varios sitios, pero cuando publico la entrada sólo me aparece la url. Alguna solución?

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR