Ci sono 3 articoli con tag eventi (questa è la pagina 1 di 1).
Oramai tutti sanno che cosè un blog, ma non tutti conoscono esattamente cos’è e come funziona un geoblog. Per spiegarlo semplicemente vi segnalo due ottimi esempi di geoblog italiani che vi mostrano nella pratica il concetto. Come potrete vedere i post non sono esposti nelle pagine in successione, ma sono dislocati su una mappa perchè sono attinenti ad un luogo specifico.
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!
Oggi vi segnalo questo bel sito personale di Ryan Johnson, uno sviluppatore di applicazioni web e librerie open-source in javascript. Ho deciso di pubblicarlo su DynaMick quando ho visto Event.Behavior, una libreria Javascript per la gestione degli eventi. Nella descrizione di questa libreria, Ryan si è posto l’obiettivo di descrivere un evento nella forma più possibile vicina al linguaggio naturale (inglese). Ed eccovi a voi il risultato:
with(Event.Behavior){
show('state_field').when('country').is('United States');
show('province_field').when('country').is('Canada');
}
Direi che il risultato è splendido e merita tutto il mio rispetto.