TUTORIAL TimelineJS

TimelineJS es una herramienta que permite crear una lnea de tiempo para presentar los acontecimientos del curso de una historia aadiendo adems 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 vdeo, audio, etc. Su funcionamiento es bastante sencillo y sus resultados son ms que aceptables. Combina las hojas de clculo de Google Drive para la utilizacin de los datos y ofrece una gran cantidad de opciones para personalizar el contenido nal.

En este tutorial se recogen los pasos necesarios para crear un timeline que posteriormente se podr insertar en la pgina web que se desee. No requiere grandes conocimientos tcnicos 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 cronolgica o tiene saltos no tendr el mismo efecto nal. Qu necesitas? Una historia cronolgica 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. Antes de empezar se debera elaborar un guin en el que se enumeren cules sern los pasos a destacar. A continuacin accede al sitio de TimelineJS (http://timeline.verite.co/) 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 botn que da acceso a la plantilla de la hoja de clculo.

TUTORIAL TimelineJS
Esto abrir la plantilla en Google Docs y ya slo restar pulsar sobre el botn 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.

La hoja de clculo tiene diez campos en total. Algunos son obligatorios y otros opcionales. De izquierda a derecha se encuentran: Start Date (fecha de inicio). Obligatorio. Marca la fecha de comienzo del hito que se va a incluir. End Date (fecha nal). Opcional. Seala el momento en el que el evento destacado se termina. Headline (titular). Obligatorio. Mostrar el ttulo de cada diapositiva del timeline. Text (texto). Opcional. Ofrece la posibilidad de mostrar el contenido de tipo texto que puede acompaar 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 aplicacin 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 direccin que se ve en el navegador para que el contenido aparezca en el timeline. Media credit (crditos). Opcional si los contenidos son propios, si no, debera ser del todo obligatorio citar la fuente que se est utilizando. Media caption (subttulo del medio). Opcional. Para una foto por ejemplo, el media caption sera 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 ensear. El tamao de imagen de estas miniaturas debe ser de 3232 pxeles. 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 la del contenido que se quiere ensear en primer lugar escribiendo title. Admite otra orden escribiendo era que mostrara un hito que podra separar distintas etapas del timeline. Las las con era no admiten multimedia, slo titular y fecha. Tags (categoras). Opcional. Se pueden incluir hasta seis etiquetas por evento.

TUTORIAL TimelineJS
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..

En el men emergente que sale a continuacin, se marca la opcin de Volver a publicar automticamente cuando se hagan cambios (esto permitir modicar el timeline sin tener que tocar el cdigo) y pulsar a continuacin en Publicar ahora.

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

TUTORIAL TimelineJS
En 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 nal de esta pgina. 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 especicaciones varias. El ltimo paso sera copiar el cdigo que se ha generado y pegarlo all donde se quiere mostrar el resultado obtenido.