Mit einer Timeline lassen sich einfach zeitliche Abfolgen, historische Entwicklungen und Meilensteine darstellen. Mit Timeline JS kann man eine solche Visualisierung besonders leicht umsetzen. Um ein anschauliches und interaktives Ergebnis zu erzielen, braucht es dazu nicht viel mehr Fähigkeiten als zum Ausfüllen einer Excel-Tabelle nötig sind.
Timeline JS wurde von „Knight Lab“ einem Projekt der Northwestern University in Illinois entwickelt. Knight Lab hat sich zum Ziel gesetzt, Journalismus durch leicht zu benutzende digitale Tools weiterzuentwickeln. Timeline JS wurde bereits von über einer viertel Million Nutzer(inne)n verwendet. Darunter sind auch das Time Magazine oder CNN.
Wir haben Timeline JS ausprobiert um die Entwicklung der Medien- und Pressefreiheit in den USA unter der Trump-Administration im Jahr 2017 zu illustrieren.
Link zur #WeeklyAddress Timeline
Funktionen
Durch die Timeline lässt sich sowohl über die Pfeile blättern als auch gezielt zu bestimmten Ereignissen navigieren, indem man den Stichtag auf der Zeitleiste unter dem Fenster auswählt. Die Zeitleiste kann bewegt werden, indem man die Maus darüber gedrückt hält und nach links oder rechts scrollt. Um einen Überblick über die Ereignisse zu bekommen, kann man über die Lupen den „zeitlichen“ Zoom vergrößern oder verkleinern.
Die einzelnen Beiträge bestehen aus Text und können mit Bildern und Videos bestückt werden. Ebenso ist es möglich Social Media Beiträge, wie z.B. Tweets einzubetten – das hat bei uns allerdings nicht funktioniert. Praktisch ist, dass multimediale Inhalte automatisch aus Online-Quellen wie Youtube und Flickr eingebettet werden können, ohne das Videos oder Bilder vorher heruntergeladen werden müssen.
Timeline erstellen
Die interaktive Zeitleiste wird über ein „Google Sheets“ befüllt. Google Sheets ist Teil von Google Docs, nämlich eine Tabellenkalkulationsanwendung. Sie erfüllt ähnliche Funktionen wie Microsofts Excel, ist aber im Gegensatz dazu kein Programm auf dem PC ist, sondern eine Online-Anwendung, die über den Webbrowser verwendet wird. Um Google Docs zu verwenden, braucht man einen Google Account, über den man sich im Browser anmeldet.
Um eine Timeline zu beginnen, muss zunächst die entsprechende Tabellenvorlage kopiert werden. Dafür folgt man einfach dem im Timeline JS-Tutorial (Punkt 1) angegebenen Link. Sobald man dann auf „Kopie erstellen“ klickt, öffnet sich die Tabellenvorlage im Browser. Sie wird automatisch auf Google Drive, dem persönlichen Online-Speicher des Google-Nutzers gespeichert. An dieser Vorlage kann dann sofort gearbeitet werden.
In der ersten Zeile des Tabellenblattes sind die Funktionen der einzelnen Spalten benannt. Aus jeder ausgefüllten weißen Zeile darunter wird ein Zeitpunkt in der Zeitleiste beziehungsweise eine Folie. In die Felder unter dem roten Titel werden die Daten eingetragen, nach denen die Elemente auf dem Zeitstrahl sortiert werden; zuerst das Jahr, dann der Monat und der Tag. Wenn es sich um Zeiträume handelt, können in den hellgrau überschriebenen Feldern Enddaten eingesetzt werden. In die Spalten unter der dunkelgrauen Überschrift werden Titel und Text der Folie eingetragen. Über einfache HTML-Befehle können im Textfeld Wörter gefettet oder HTML-Links eingefügt werden.
Beim Einfügen von Medien ist das Copyright zu beachten. Daher, bitte, Bilder/Videos wählen, die zur Weitergabe freigegeben wurden, z. B. über eine CC-Lizenz.
Wer Medien hinzufügen möchte, kopiert in die entsprechende Zelle der Spalte „Media“ einfach einen Link zu einem entsprechenden Bild auf der Fotoplattform Flickr.com oder einem Video bei Youtube oder Vimeo.com. Dazu einfach den Link zum entsprechenden Bild oder Video aus dem Adressfenster kopieren und in die ensprechende Media-Zelle einfügen. In den folgenden Spalten können Bild- oder Video-Credits und -unterzeilen hinzugefügt werden. Bilder oder Videos und Unterzeilen erscheinen dann links neben dem Text.
fotolia.com / teracreonte Tipps wie man selbst Grundlagen von HTML lernen kann, haben wir am Ende dieses Artikels zusammengestellt.
Um den Hintergrund der Timeline zu gestalten, kann man entweder den Link zu einem Bild auf Flickr in die letzte Spalte einfügen oder den hexadezimalen HTML-Code der gewünschten Farbe in die Zeile schreiben. Die Farben lassen sich zum Beispiel über den HTML-Color-Picker von W3Schools oder HTML-Color Codes auswählen. Die hexadezimalen Werte starten immer mit einem Rautezeichen (#), auf das sechs Ziffern und oder Buchstaben von A-F folgen.
Veröffentlichen
Um die Timeline zu veröffentlichen, klickt man im Google Sheet auf „Datei“ und dann auf „im Web veröffentlichen“ und bestätigt das Veröffentlichen. Das kleine Bestätigungsfenster muss dann geschlossen werden. Als Nächstes wird der Link zum Google-Sheet, der dann in der Adresszeile des Browsers erscheint, kopiert und in das Feld „3 Generate your timeline“ auf der Tutorial-Seite von Timeline JS eingefügt. Auf dieser Seite können nun noch einige Optionen der Timeline verändert werden, so zum Beispiel die Größe, in der das Fenster mit den Beiträgen erscheint, die Sprache in der die Daten angezeigt werden und die verwendete Schriftart.
Bild: Claus Rebler ‚Network‘ / flickr.com (CC-BY-SA 2.0) Mehr zum Thema „Embedding“ in der Digitalen Werkstatt.
Ist alles eingestellt, kann man am Ende der Timeline-JS-Seite eine Vorschau der Timeline abrufen und unter Punkt 4 des Tutorials den Link zur Timeline kopieren. Dort findet sich auch der Embed-Code, mit dem die Zeitleiste auf der eigenen Website eingebunden werden kann. Wird nun in der Google-Tabelle, die der Timeline zugrunde liegt etwas verändert, verändert sich auch automatisch die Darstellung der Zeitleiste, die über diesen Link bzw. Embed-Code erreicht wird. Man muss also bei Aktualisierungen der Timeline nicht noch einmal durch den Veröffentlichungsprozess gehen.