Auf der Höhe der Zeit mit TimelineJS

Auf der Höhe der Zeit mit TimelineJS

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, 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. Anwendungsbeispiele gefällig?

Und so funktioniert es:

Die Vorlage für das Tabellendokument ist leicht verständlich.
Die Vorlage für das Tabellendokument ist leicht verständlich.
  1. Fü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.
  2. Geht auf die Seite von TimelineJS und scrollt etwas nach unten.
  3. 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.
  4. 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.
  5. 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.
  6. Den WordPress-Beitrag auswählen, in den die Zeitleiste eingebunden werden soll.
  7. Die Ansicht im Textfeld on „Visuell“ auf „Text“ ändern (oben rechts über dem Textfeld)
  8. In den Bereich klicken, wo die Karte platziert werden soll
  9. Den Code aus der Zwischenablage einfügen.
  10. Aktualisiert bzw. speichert Euren Beitrag.

Das Ergebnis sieht dann so aus:

Anwendungsbeispiele:

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.

Aufgabe 8: Erstellt eine Zeitleiste mit TimelineJS und verknüpft diese mit mindestens einem Bild sowie einem Video.  Die Geschichte der Universität findet ihr auf dieser Seite oder hier. Bildmaterial (auch historisches) gibt es im Bildarchiv der Pressestelle, ein Video findet ihr bei Youtube.

Die Kommentare sind geschloßen.