Anzeige
Anzeige
Ratgeber
Artikel merken

TimelineJS3: So kreierst du beeindruckende Zeitleisten mit JavaScript

Mit der Lösung TimelineJS3 lassen sich beeindruckende Zeitleisten erstellen und in beliebige Seiten einbinden. Das verspricht Visual Storytelling auf hohem Niveau.

3 Min. Lesezeit
Anzeige
Anzeige

Diese interessante Erzählform gibt es leider nicht. (Foto: Pixabay)

Neue Formen von Journalismus durch alternative Erzählweisen

Das Knight Lab ist ein Team aus Technikern und Journalisten, das es sich zum Ziel gesetzt hat, neue Formen von Journalismus zu entwickeln. Das Knight Lab ist angesiedelt an der Northwestern University in Illinois in den USA und kooperiert mit weiteren Bildungseinrichtungen zum Thema.

Anzeige
Anzeige

TimelineJS ist das erste, vollkommen praxistaugliche Experiment, das das Knight Lab an den Markt bringt. Dabei ist die aktuelle Version TimelineJS3 ein komplettes Rewrite der Vorversion und hat mit dieser nur noch den Anwendungszweck gemeinsam.

Zeitleisten als Basis für Geschichten

Wer schreibend tätig ist, der weiß, dass Chronologien in der klassischen Erzählweise als fortlaufender Text den Leser schnell ermüden. Wer liest schon freiwillig Geschichtsbücher, außer denen, die freiwillig Geschichtsbücher lesen?

Anzeige
Anzeige

In den seltensten Fällen wollen wir Schreiber uns auf eine Leserschaft beschränken, die freiwillig Geschichtsbücher liest. Wir zielen stattdessen auf den Durchschnittsmenschen als Zielgruppe. Und für den Durchschnittsmenschen darf so ein Beitrag durchaus mal etwas spannender daherkommen. Zeitleisten sind da ein probates Mittel, wenn du chronologische Abläufe darstellen willst.

Anzeige
Anzeige

Und die Darstellung von Zeitleisten ist genau die Aufgabe, die du mit TimelineJS erledigen kannst. Wenn dir noch etwas die Vorstellung davon fehlt, was TimelineJS leistet, dann schau dir einige der Beispiele auf der Projekt-Homepage an.

TimelineJS3: Zeitleisten für jedermann

Das Interessante an TimelineJS ist, dass nun jedermann solche Zeitleisten über seine Website publizieren kann. Da TimelineJS unter der MPL steht, ist der Einsatz auch im kommerziellen Umfeld möglich und kostenlos. Auf der Projekt-Homepage findest du entsprechend etliche Beispiele von Veröffentlichungen namhafter Medien-Outlets, wie etwa Time Magazine, CNN oder Le Monde.

Anzeige
Anzeige

TimelineJS3-Präsentation zum Leben Whitney Houstons. (Screenshot: t3n)

Das, was das Time Magazine kann, kannst du auch. Denn die Erstellung eigener Zeitleisten mit TimelineJS, sowie das nachfolgende Einbinden in deine Website ist wirklich einfach. Es funktioniert auf der Basis eines Iframes, also genauso wie das Einbinden eines Youtube-Videos.

Schau dir das folgende Video an, um einen schnellen Überblick zu erhalten:

Bau dir eine Zeitleiste aus einem Google Spreadsheet

TimelineJS arbeitet mit JSON als Datenbasis. Entsprechende Kenntnisse vorausgesetzt, baust du dir eine JSON-Datenquelle und fütterst sie in TimelineJS. Es geht aber auch einfacher.

Anzeige
Anzeige

Knight Lab gibt dir nämlich ein Template für ein Google Spreadsheet an die Hand. Dieses Template lädst du in deinen eigenen Google Drive und passt es an deine Chronologie an. Jede Zeile entspricht einem Ereignis auf dem Zeitstrahl, die Spalten erhalten die Informationen, die du entsprechend der Spaltenüberschriften bereitstellst.

TimelineJS3: Der Generator erlaubt einige Detailfestlegungen. (Screenshot: t3n)

TimelineJS ist in der Lage, auch Daten aus anderen Diensten, darunter Twitter, Flickr, Youtube, Vimeo, Dailymotion, Google Maps, Wikipedia und Soundcloud, einzubeziehen. Diese Daten gibst du mit ihren URLs in das Spreadsheet ein.

Steht deine Chronologie im Spreadsheet publizierst du dieses, machst es also öffentlich und kopierst dann die öffentliche URL in den Timeline-Generator auf der Projektseite. Hier hast du die Möglichkeit, Prozent- oder Pixelangaben zur Höhe und Breite des Timeline-Fensters zu machen, sowie Details zum Erscheinungsbild, etwa die Sprache oder die Schriftart der Darstellung festzulegen. Während du das tust, ändert sich der Embed-Code für deinen Iframe in Echtzeit mit.

Anzeige
Anzeige

TimelineJS3: Der Embed-Code ist einfach auszukopieren. (Screenshot: t3n)

TimelineJS3: Moderne Browser sind Voraussetzung

Der Output von TimelineJS ist voll responsiv und funktioniert auch auf Smartphones, dort dann mit Swipe-Gesten. Voraussetzung für die erfolgreiche Desktop-Nutzung ist ein moderner Browser. Bekannt ist, dass Microsoft-Browser unter IE10 nicht funktionieren. Im Knight Lab wird mit primärem Fokus auf Google Chrome entwickelt.

In meinem Test konnte ich die Zeitleisten allerdings auch in Firefox, Microsofts Edge und dem Opera-Browser konsumieren. In Firefox lief die Timeline überaus flüssig, während Edge und Opera etwas ruckelig zu Werke gingen.

Die Darstellung von TimelineJS ist für den Hausgebrauch begrenzt auf die Parameter, die du über den Generator einstellen kannst. Wenn du entsprechende Skills in CSS und Javascript mitbringst, kannst du jedoch deine ganz eigenen Vorstellungen von Optik mit TimelineJS umsetzen.

Anzeige
Anzeige

Der durchschnittliche Journalist wird allerdings zufrieden sein, eine einfach zu handhabende Lösung zu bekommen, die eben gerade keine Fachkenntnisse in der Webentwicklung erfordert.

Erwähnenswert ist noch, dass Verwender von selbstgehosteten WordPress-Installationen ein Plugin verwenden können, das sogar die Einbindung von Timelines via Shortcode erlaubt. Dieses Plugin findest du hier:

Knight Lab Timeline
Preis: Kostenlos
Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige