Ci sono 5 articoli con tag timeline (questa è la pagina 1 di 1).
Era ormai solo una questione di tempo, ed infatti nella conferenza “f8” del 22 Settembre 2011 si è materializzata la notizia che molti attendevano da mesi, Mark Zuckerberg ha annunciato infatti Timeline, il nuovo profilo utente di Facebook. Un diario elettronico con novità sia sul piano grafico che su quello delle interazioni sociali.
Oggi vi segnalo questo ottimo articolo che vi mostra come creare una timeline utilizzando semplicemente una lista non ordinata di elementi opportunamente impaginata con un foglio di stile. Questo è il risultato, una rappresentazione semplice e lineare con un utilizzo estremamente minimale di markup HTML:
Descrivere il tempo che passa non è semplice. Il metodo migliore è tracciare una linea graduata e indicare il tempo che scorre lungo tale segmento magari posizionando gli eventi che si susseguono sequenzialmente.
Nel web esistono alcuni strumenti che permettono di disegnare timeline. Ve ne mostro tre.
Dipity è un’applicazione web che permette a tutti gli iscritti (la registrazione è gratuita) di disegnare la propria linea del tempo. L’editor è online ed è un’applicazione flash. Si possono aggiungere eventi uno ad uno, oppure indicare una fonte dati preesistente, come possono essere i feed RSS del proprio blog.
Il risultato è poi condividibile, pubblicabile e attraverso la funzione “embed” è possibile integrare la timeline sul proprio sito.
Molto simile al precedente, xTimeline è un’applicazione web per la creazione di timeline. L’unica differenza sostanziale con dipity è la tecnologia usata in quanto il risultato finale è un frame DHTML governato perlopiù da Javascript. Inoltre è possibile avere la vista del dettaglio degli eventi, disposti orizzontalmente per dare l’idea della sequenzialità.
A differenza dei primi due, SMILE Timeline è un framework javascript, per cui è necessario avere basi di programmazione per poterlo utilizzare. Non presenta un’interfaccia grafica ma la documentazione è ben fatta e ricca di esempi. Sinceramente, fra tutti, è lo strumento che preferisco, perchè fornisce la massima flessibilità e la possibilità di eventuali personalizzazioni.
Descrivere il tempo che passa non è semplice. Il metodo migliore è tracciare una linea graduata e indicare il tempo che scorre lungo tale segmento magari posizionando gli eventi che si susseguono sequenzialmente. Nel web esistono alcuni strumenti che permettono di disegnare timeline. Ve ne mostro tre.
Dipity è un’applicazione web che permette a tutti gli iscritti (la registrazione è gratuita) di disegnare la propria linea del tempo. L’editor è online ed è un’applicazione flash. Si possono aggiungere eventi uno ad uno, oppure indicare una fonte dati preesistente, come possono essere i feed RSS del proprio blog. Il risultato è poi condividibile, pubblicabile e attraverso la funzione "embed" è possibile integrare la timeline sul proprio sito.
Molto simile al precedente, xTimeline è un’applicazione web per la creazione di timeline. L’unica differenza sostanziale con dipity è la tecnologia usata in quanto il risultato finale è un frame DHTML governato perlopiù da Javascript. Inoltre è possibile avere la vista del dettaglio degli eventi, disposti orizzontalmente per dare l’idea della sequenzialità.
A differenza dei primi due, SMILE Timeline è un framework javascript, per cui è necessario avere basi di programmazione per poterlo utilizzare. Non presenta un’interfaccia grafica ma la documentazione è ben fatta e ricca di esempi. Sinceramente, fra tutti, è lo strumento che preferisco, perchè fornisce la massima flessibilità e la possibilità di eventuali personalizzazioni.
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!