webthreads.de - Web 2.0, Web-Entwicklung und Netzkultur von Markus Kühle

Dynamische Zeitleisten erstellen

Wer eine dynamische Zeitleiste mit zeitabhängigen Informationen in seine eigene Webseite einbauen möchte muss sich ab sofort nicht mehr seinen eigenen Kopf zermartern um eine anständige Lösung zu erhalten. Denn eine sehr schöne dynamische Zeitleiste, von SMILE entwickelt, kann auf die eigene Webseite mittels einer einfachen JavaScript API eingebaut werden.

SMILE Timeline

Eine Zeitleiste besteht dabei aus einer oder zwei “Banden” (bands) die mit der Maus per drag und drop bewegt werden können. Dabei kann bestimmt werden ob die zwei Banden synchron zueinander laufen. Dabei ist die obere detailliertere Bande ein Ausschnitt der unteren Bande. Auf der Timeline Webseite wird dies unter “The Basics” noch einmal mit Beispiel schön verdeutlicht.

Timeline is a DHTML-based AJAXy widget for visualizing time-based events. It is like Google Maps for time-based information.

Das Statement “it is like Google Maps for time-based information” stimmt nebem dem Scroll Verhalten auch noch im Bezug auf das Erhalten der Daten. Die Zeitleiste kann allein Clientseitig laufen, indem die Daten schon beim laden der Zeitleiste mitgeliefert werden, oder sie können, wie eben auch bei Google Maps dynamisch nachgeladen werden. Dabei können die Daten zum einen durch ein XML File (z.b. hier das Datenfile für das im Screenshot gezeigt Beispiel) geliefert werden oder zum anderen mit einer JSON Unterstützung (Beispiel hier). Beide Möglichkeiten greifen auf einen Ajax Request zurück.

Schöne Beispiele für Zeitleisten werden auch gleich mitgeliefert. Z.b.:

Weitere Beispiele können hier gefunden werden.

Wie schon erwähnt kann eine solche Zeitleiste sehr einfach in die eigene Seite eingebunden werden. Ähnlich wie bei Google Maps reicht schon weniger JavaScript Code um die Zeitleiste anzuzeigen, wie auch die Einführung “How to Create Timelines” zeigt. Für eine weitere Einführung sowie der API Beschreibung sei auf die Dokumentation von SMILE Timeline verwiesen.

Die ersten Schritte, wie in “How to Create Timelines” beschrieben, habe ich eben selbst getestet und habe auch ohne weitere Probleme oder darüber nachdenken zu müssen ein Ergebnis in Form einer Zeitleiste gesehen. Dieses Beispiel funktionierte bei mir im IE sowie im FF. Jedenfalls werde ich dieses Widget noch weiterer ausprobieren denn der erste Eindruck ist sehr vielversprechend. Wenn etwas brauchbares dabei herauskommt werde ich hier davon berichten.

Ähnliche Artikel, die dich interessieren könnten:

    None Found

Ein Kommentar zu 'Dynamische Zeitleisten erstellen' »»


Kommentare


Trackbacks & Pingbacks »»

  1. [...] 29.06.2005) hat der Google Lat Long Blog ein Timeline Mashup erstellt. Dabei wurde mit der SMILE Timeline API und der Google Maps API alle bisherigen Blog Einträge des Google Maps Mania und Google Geo [...]

Hinterlasse ein Kommentar »»

Bad Behavior has blocked 5727 access attempts in the last 7 days.

cheapest viagra
viagra 100 mg too much
buy discount viagra online
buy line viagra
cheap viagra online canadian pharmacy
cheap price viagra
buy line viagra
free viagra samples
but cheap levitra
cheap viagra online
buy cheap cialis
buy levitra online
buy cheap viagra
free ringtones