Timeline è un widget DHTML/AJAX pensato per visualizzare la successione di eventi nel tempo. E’ una vera e propria libreria javascript e l’API, ben documentata, mette a disposizione semplici e potenti metodi per creare la propria timeline personale. Molti sono gli esempi che potete guardare per capire come funziona.
Il risultato è simile a Google Maps per le mappe geografiche, ma in questo caso scorriamo il piano solo in un verso (orizzontale o verticale), così da vedere il susseguirsi degli eventi. Come con Google Maps, Timeline non necessita di installazione software, nè lato server, nè lato client: è infatti sufficiente includere la libreria javascript. Gli eventi possono essere caricati da un file XML esterno oppure tramite JSON con tecniche AJAX.
Per poterlo usare includiamo questa riga nell’header della nostra pagina:
<script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script>
Predisponiamo il contenitore dove dovrà essere visualizzata la nostra timeline:
<div id="my-timeline" style="height: 150px; border: 1px solid #aaa"></div>
A questo punto non dobbiamo far altro che attivare al caricamento della pagina
<body onload="onLoad();" onresize="onResize();">
...
</body>
la nostra funzione javascript che definiamo nell’header della pagina html:
function onLoad() {
var eventSource = new Timeline.DefaultEventSource();
var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource,
date: "Jun 28 2006 00:00:00 GMT",
width: "70%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 100
}),
Timeline.createBandInfo({
eventSource: eventSource,
date: "Jun 28 2006 00:00:00 GMT",
width: "30%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
Timeline.loadXML("example1.xml", function(xml, url) { eventSource.loadXML(xml, url); });
}
La varibile bandInfos definisce le nostre due timeline, la prima su base mensile (Timeline.DateTime.MONTH), la seconda a cadenza annuale (Timeline.DateTime.YEAR). Il parametro width indica la larghezza della banda e quindi si tratta tutto sommato di un’altezza (attenzione, questo potrebbe confondervi). Il parametro più importante è eventSource, che indica al javascript la sorgente dati degli eventi, cioè l’XML che viene prima caricato in maniera asincrona con il metodo Timeline.loadXML e poi dato in pasto al metodo eventSource.loadXML che lo interpreta e lo visualizza sulla timeline.
Quando ho visto questa libreria javascript in funzione ho cominciato a fantasticare sulle molte applicazioni possibili. Che ne dite di un servizio web 2.0 sulla vita di ciascuno di noi? Oppure sulla storia dei nostri blog? Oppure si potrebbe fare un social network stile digg.com o oknotizie.it, ma in versione timeline. Idee ne ho tantissime, ora mi metto a svilupparle!