Wer seine schönsten Geschichten mit einer schönen vertikalen Zeitleiste veredeln will, der ist bei TimelineJS richtig. Zwar ist das Online-Tool nicht ganz so innovativ aufgebaut wie line, (eine Anleitung für Line gibt es auf dieser Seite) ist dafür aber ungleich schöner und trotzdem leicht zu verstehen. Die Zeitleiste basiert auf einem Google Tabellendokument (Spreadsheet Template), das ausgefüllt werden muss. Die Vorlage dafür erhält man im Knight Lab der Northwestern University.
Beitragsbild: Screenshot TimelineJS
Und so funktioniert es:
-
Die Vorlage für das Tabellendokument ist leicht verständlich.
Bild: Screenshot google spreadsheetFür TimelineJS ist keine Registrierung erforderlich. Um die Tabelle auszufüllen, welche die Daten für die Zeitleiste enthält, braucht man aber ein Google-Konto. Solltet ihr noch keines haben, legt euch spätestens jetzt eines an. Die Anmeldung ist ziemlich unkompliziert und in wenigen Minuten erledigt.
- Geht auf die Seite von TimelineJS und scrollt etwas nach unten.
- Klickt auf „GET THE SPREADSHEET TEMPLATE“. Sofern ihr bei Google angemeldet seid, werdet ihr automatisch zu Google Tabellen weitergeleitet. Klickt oben links auf „Vorlage verwenden“. Diese ist anschließend Basis für eure Daten.
- Tragt die gewünschten Ereignisse gemäß der Vorgabe ein. In die Spalte „Display Date“ könnt ihr eintragen, wie das Datum eines Ereignisses ausgeben werden soll. Ich empfehle, die Spalte auszufüllen, weil die Daten sonst im amerikanischen Format ausgegeben werden. Im Feld „Media“ erlaubt TimelineJS eine Reihe von Quellen. Wie diese in das Dokument geladen werden, erklären die Macher auf dieser Seite. (Zwischen-)Speichern ist nicht nötig. Das erledigt Google nach jeder Änderung.
- Habt ihr alle Daten eingetragen (oder wollt mal sehen, wie eure noch unfertige Zeitleiste aussieht), klickt ihr auf „Datei“ und im sich dann öffnenden Menü auf „Im Web veröffentlichen“, im folgenden Fenster mit dem Titel „Im Web veröffentlichen“ erneut auf veröffentlichen und dann auf „OK“. Schließlich bekommt ihr einen Link. Diesen kopiert ihr und fügt ihn auf der TimelineJS-Seite in das dafür vorgesehene Formular ein. Etwas weiter darunter findet ihr einen Button mit der Aufschrift „Preview“. Drückt ihr diesen, erhaltet ihr eine Vorschau eurer Zeitleiste sowie den Embed-Code. Diesen kopiert ihr.
- Den WordPress-Beitrag auswählen, in den die Zeitleiste eingebunden werden soll.
- Die Ansicht im Textfeld on „Visuell“ auf „Text“ ändern (oben rechts über dem Textfeld)
- In den Bereich klicken, wo die Karte platziert werden soll
- Den Code aus der Zwischenablage einfügen.
- Aktualisiert bzw. speichert Euren Beitrag.
Das Ergebnis sieht dann so aus:
Anwendungsbeispiele:
- Kieler Nachrichten: Übersicht: Kreuzfahrtanläufe 2016 in Kiel und Wegmarken in der Geschichte Schleswig-Holsteins
- General-Anzeiger Bonn: Zeitleiste: Nazis in Dortmund auf „Der Nazikiez. Dortmund und sein braunes Problem“
- Pinneberger Tageblatt (shz): KWGP will der DDR-Opfer gedenken
- Zeit.de: Internationale Presseschau zum Tod von Helmut Schmidt nebst Zeitleiste und Die Chronologie der Anschläge von Paris
- Grafschafter Nachrichten: Spur zum Mädchenmörder führt in die Grafschaft
- Neue Osnabrücker Zeitung: Geschichte der Migration: Wer kommt? Wer geht?
- Grafschafter Nachrichten: Zeitleiste: Wo ist Doris Mönninghoff aus Striepe?
- Lübecker Nachrichten: 70 Jahre Kriegsende
- Cellesche Zeitung: Die Hinführung zum 1. Weltkrieg in Schlaglichtern
Die Kosten:
TimelineJS ist kostenlos.
Die Alternative:
- Dipity ist so etwas wie der Oldtimer unter den Zeitleisten. Und so sieht das Design auch aus. Zu Beginn war dipity komplett kostenlos. Inzwischen können mit einem Freien Zugang lediglich drei Zeitleisten erstellt werden.
- Tiki-toki sieht insgesamt etwas frischer aus als dipity. Es richtet sich ebenso an echnisch weniger versierte Anwender. Es ist sehr einfach und selbsterklärend, Zeitleisten anzulegen. Allerdings braucht es für die Veröffentlichung in WordPress einen speziellen und kostenpflichtigen Zugang.
- Intuitiver aufgebaut, dafür aber horizontal, ist Line. Eine Anleitung für das Tool findet ihr auf dieser Seite.
Dieser Artikel ist Teil des Praxisworkshops: Onlinetools für Journalisten. Die weiteren Folgen:
Teil 1: Interaktive Karten mit My Maps von google oder uMap erstellen.
Teil 2: Daten auf Karten visualisieren mit CartoDB.
Teil 3: Bilder mit Genial.ly oder Thinglink zum Sprechen bringen.
Teil 4: Interaktive Infografiken mit Infogr.am erstellten.
Teil 5: Vorher-Nachher-Fotos mit JuxtaposeJS gestalten.
Teil 6: Grafiken aller Art online mit Canva produzieren.
Teil 7: Echtzeitstatistiken mit Infogrfx.
Teil 8: Wortwolken mit Wordle generieren.
Teil 9: Zeitleisten mit Line, TimelineJS und StorymapJS erstellen.