Free timeline learning object

Parlando di learning objects, uno dei modelli affermatosi negli ultimi anni è quello delle timeline. In esse si rappresenta linearmente una cronologia temporale e vi si collocano (si linkano) gli eventi ritenuti significativi. Solitamente le timeline si realizzano on-line in ambienti interattivi. Fra quelli liberi vogliamo descriverne due perchè caratterizati da efficace impatto comunicativo e da utilizzo semplice. La semplicità di utilizzo è sempre importante ma lo è ancor più quando, come in questo caso,  per lo strumento si prospetta un utilizzo produttivo da parte degli alunni.

I due ambienti-strumenti sono Timeline JS e CronoZoom.

TimelineJS  viene così descritto dagli autori: “TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet”.scaricamento   Sempre secondo gli autori il prodotto ha riscosso  notevole successo sul web: “….TimelineJS is among the most widely used interactive storytelling tools on the web, with nearly 170,000 embeds and15 million page views by more than 10 million visitors”
Per utilizzare timelineJS nelle nostre produzioni abbiamo solamente bisogno di un account su Google drive. Questo perchè l’editing della timeline si configura come modifica on line di un foglio di calcolo. Il template del foglio di calcolo è disponibile sulla home-page di timelineJS e pigiando il pulsante lo copiamo automaticamente sul nostro google-drive.

Il foglio, così com’è,  è già una timeline perfettamente funzionante.
Per vederlo all’opera dovremo fare due passaggi: pubblicare il file sul web

 

timelinjs1attraverso la specifica voce presente su google drive sotto il menù file.timelinejs2

 

 

 

 

 

 

 

timelinejs3

La stringa di testo che appare su google drive all’atto della pubblicazione dovrà essere copiata sull’apposito spazio nella home-page di timelinejs

 

preview

 

Attraverso il pulsante di preview vedremo il risultato del lavoro

 

Per comprenderne il funzionamento dobbiamo provare, inizialmente,   ad utilizzare il template così come è;  successivamente lo modificheremo e osserveremo gli effetti delle modifiche.

Nel foglio di calcolo ogni riga corrisponde ad una slide (evento cronologico) e cancellandola ne vedremo macroscopicamente gli effetti.
L’autore esplic2016-03-16 09-49-22 Copia di Official TimelineJS3 Template - Fogli Google - Mozilla Firefoxita la seguente raccomandazione: Don’t change the column headers, don’t remove any columns, and don’t leave any blank rows in your spreadsheet

Le intestazioni delle colonne sono abbastanza esplicative: alcune (Mounth Day Time) sono riservate alle data dell’evento, Headline è utilizzata per inserire il titolo, il campo Text riporta il commento ed il campo Media il link alla risorsa esterna

settaggiLa porzione di pagina web utilizzata per l’editing della timeline è definita dagli autori come “simple authoring tool ” . Espandendola si può accedere a dei settaggi (optional setting “show”). Questi riguardano: language, fonts, starting slide and more

 

 

 

 

Per capire quello che concretamente possiamo fare  riportiamo l’elenco dei “media types” attualmente supportati dall’ambiente:

Image

If your URL ends in jpg, gif, png or jpeg, it will be used as the source for an image tag. It should also work if there is a query string after the extension, perhaps specifying dynamic width and height values.
Online Videos
Use the URL for the page of the video for Vimeo, DailyMotion, Vine, and YouTube. Timeline honors Youtube start-at time parameters.
SoundCloud
Use the URL for the SoundCloud clip page.
Twitter
Use the the Twitter embed code, or the URL of the tweet’s page.
Google Maps
Use the URL for the Google Maps page (unless you are using Streetview, which currently requires the embed URL found in the “Share” section). Coordinates, search results, place marks and directions are all honored by Timeline. TimelineJS supports roadmap, hybrid, satellite and terrain Google Maps, as well as directions, places, and Streetview maps.
Google Plus
Use the URL for the Google Plus photo, found by right-clicking (or control-clicking) the image and selecting “Copy Image URL”.
Instagram
Use the URL for the Instagram photo’s page.
Flickr
Use the URL for the Flickr photo’s page. The shortened link provided in the share menu (e.g. https://flic.kr/p/sv3VN6) will also work.
Imgur
Use the URL for the Imgur photo’s page.
DocumentCloud
Use the URL of the Document Cloud document’s page.
Wikipedia
Use the URL of the Wikipedia article’s page.
Storify
Use the URL of the Storify.
iframe
Instead of a URL, you can use <iframe> markup. This is a good general workaround to embedding media types that TimelineJS doesn’t handle directly.
Blockquote
Instead of a URL, you can use <blockquote> tags around whatever text you want to quote.
Embedly
If TimelineJS doesn’t recognize your media URL, it will try to use Embed.ly to get the best thing to include on your slide.
TimelineJS è sviluppato Knightlab,
laboratorio di ricerca
della Northwestern University
2016-03-16 10-29-03 NUze - Knight Lab Projects - Mozilla Firefox
2016-03-16 10-29-40 NUze - Knight Lab Projects - Mozilla Firefox

 

 

 

 

 

 

Note: .

Timeline JS3-1