Blog

Home/Recursos/Crea un timeline interactivo de tu historia

Crea un timeline interactivo de tu historia

El verano es una época estupenda para investigar nuevas herramientas puesto que dispones de más tiempo y además desciende un poco la actividad en redes sociales. Personalmente es a eso es a lo que me dedico últimamente, a probar nuevas aplicaciones que me ayuden a crear post más interesantes, divertidos y curiosos. El otro día di con una que me enganchó al instante, Timeline JS, con la que puedes hacer timeline interactivos y contar tu historia de una forma más interesante. 

Hace tiempo encontré esta herramienta pero la tenía en la lista de “tareas pendientes” porque todavía no había encontrado un hueco para revisarla y el otro día di con ella de casualidad, cuando escribía herramientas gratuitas para hacer infografías. Así que decidí que era un buen momento para retomarla, así hoy te voy a contar como puedes hacer tus historias más atractivas.

Timeline JS

La página está en inglés pero te aseguro que es muy sencilla e intuitiva, pero no te preocupes porque yo te voy a mostrar paso a paso qué tienes que hacer. Para ponernos en situación te recomiendo que antes veas este vídeo de introducción.


Ahora que ya sabes de qué va esto, te cuento todos los pasos que debes seguir.

Plantilla Timeline JS

Para empezar dirígete a esta página donde podrás encontrar la plantilla de trabajo, en la que incluiremos todos los datos para nuestra historia. Te recomiendo que le cambies el nombre y que la guardes en tu documentos (para hacerlo deberás disponer de cuenta en Google).

TimelineJS plantilla

TimelineJS plantilla

 Como puedes ver en la imagen, la plantilla está compuesta por cajas en las que puedes añadir la fecha de inicio y fin, título, descripción, media, pie de texto del media, código html, thumbnail, tipo y etiqueta.

Rellena tu plantilla

A continuación deberás completar tu plantilla con los datos de tu historia. Recuerda que al estar en inglés la fecha tiene formato mm/dd/aa por lo demás no hay más complicación, para imágenes, vídeos y demás, tan sólo tendrás que incluir la url en la que estén.

TimelineJS plantilla rellena

TimelineJS plantilla rellena

Publicar en la web

Cuando hayas terminado de introducir todos los datos, guarda tu archivo. Ya sabes que con Drive se guardan automáticamente, pero así te curas en salud, por si las moscas. Después es hora de publicar, para ello pincha en “archivo” y selecciona del menú desplegable “publicar en la web”.

Publicar timelinejs en la web

Publicar timelinejs en la web

A continuación selecciona “iniciar la publicación”, se publicará automáticamente y deberás copiar el enlace que se abre en la caja inferior.

Publicar en la web enlace

Publicar en la web enlace

Google Spreadsheet URL

Una vez hecho todo eso dirígete de nuevo a TimelineJS e introduce el enlace en la sección llamada Google Spreadsheet URL. En esta opción podrás personalizar el tamaño de tu timeline, el idioma, el tipo de mapa, de fuente, el zoom, si quieres que empiece en algún dato en concreto, entre otras cosas.

Google Spreadsheet URL

Google Spreadsheet URL

Cuando termines de personalizar copia el código en html que aparecerá en el cajón inferior y ya estará listo para que lo incluyas en tu post. Además podrás hacer una visualización previa de tu timeline para comprobar que todo ha quedado como querías.

Preview timeline js

Preview timeline js

Por supuesto no te hubiera mostrado herramienta sin antes probarla, por lo que aquí te dejo el timeline que hice de otro post muy interesante “Hitos y curiosidades en el nacimiento de Twitter”, espero que te guste.

Sin duda con Timeline JS conseguirás dar un giro a tus historias y hacerlas más entretenidas, quién sabe si podría convertirse en otra forma de transmitir la historia a las nuevas generaciones. Si te decides a hacer alguna me encantaría que compartieses conmigo tu ejemplo ¿Has utilizado alguna vez esta herramienta? ¿Qué te parece? ¿Conoces alguna similar?

Written by

Periodista, especializada en Comunicación Corporativa y Protocolo y RRII. Ahora oriento mi carrera profesional al mundo del Social Media y el Community Management.

5 Responses to “Crea un timeline interactivo de tu historia”

By Óscar Muñoz - 9 agosto 2013 Responder

Genial, un gran aporte. Desconocía la herramienta y me parece muy buena. Gracias.

By Nuria García Castro - 10 agosto 2013 Responder

Muchísimas gracias Óscar por haber compartido y por tus amables palabras aquí.

Que pases un feliz día, saludos desde Granada 😉

By Eva Trillo - 19 mayo 2014 Responder

Hola Nuria, me ha encantado tu post. La herramienta chulísima, muy útil y visual. y tu timeline de la historia de twitter… impresionante.
Un abrazo y gracias por compartirlo

By Nuria García Castro - 19 mayo 2014 Responder

Hola Eva, me alegro de que te haya gustado!
Yo desde que la descubrí siempre la uso para ilustrar las historias, me parece una herramienta ideal!
Muchas gracias y feliz día 😉

By Maru Garza C - 11 julio 2014 Responder

Gracias Nuria Soy Maru G C desde la Ciudad de México.
Soy profesora de preescolar.
¿Crees que me puede servir ésta herramienta para hacer una biografía lectora del grupo durante un ciclo escolar?
¿Puedo añadir portadas de los libros?
¿Por derecho de autor puedo añadir sólo las portadas?
Saludos

Leave a Comment