Anleitung | Digitale Zeitleisten mit Timeline JS erstellen | Open Educational Resources

Unter den Anbietern von Tools zur Erstellung digitaler Zeitleisten (guter Testbericht mit einem tabellarischen Überblick) gibt es wenige, die kostenlos zur Verfügung stehen und sich zur Erstellung von frei lizensierbaren Bildungsmedien (Open Educational Resources) eignen. Timeline JS ist zurzeit wohl das am einfachsten zu bedienende Tool, das zugleich ein optisch ansprechendes Ergebnis liefert (kleines, selbst erstelltes Beispiel: Zeitleiste zum 9. November auf segu Projektor). Weil die Einarbeitung dennoch etwas Zeit erforderte – hier eine Kurzanleitung in 16 Schritten:

TL1

1 | Die Zeitleiste wird in einer Google-Tabelle1 “programmiert”. Das Template (die Vorlage) dieser Google-Tabelle muss man auf Timeline JS herunterladen (runterscrollen). Es öffnet sich automatisch in Google Drive (“Vorlage verwenden” anklicken). Zuerst sollte man die Datei dann umbenennen.

2 | Die Tabelle sieht unübersichtlich aus. Bevor die Daten bearbeitet werden, empfiehlt es sich die Zeitleiste zuerst auf der eigenen Seite (z.B. in ein Blog) einzupflegen. Dann kann man sich die späteren Änderungen immer gleich anschauen.

TL2

3 | Zum Einpflegen der Zeitleiste muss man (wie auf der Seite von Timeline JS beschrieben) in der Goolge Tabelle unter “Datei”, dann “Im Web veröffentlichen”, dann “Jetzt veröffentlichen” anklicken und den generierten Code kopieren.

4 | Den Code muss man auf der Seite von Timeline JS in das Feld unter “Copy/paste spreadsheet URL” eingeben und anschließend den auf der Seite unter “Embed the code into your website” generierten Code wiederum kopieren. Die Breite der Zeitleiste ist auf 650 voreingestellt, das passt in die meisten Blogformate, lässt sich aber auch beliebig verändern (s. Schritt 16).

TL3

5 | Im Blog öffnet man eine neue Seite oder einen neuen Artikel, schaltet die Bearbeitungsebene von “Visuell” auf “Text” um und fügt den Code ein.

6 | Nachdem der Beitrag gespeichert wurde kann man in der Vorschau die Vorlage der Zeitleiste von Timeline JS anschauen. Bevor man sich an die Bearbeitung der Daten für die eigene Zeitleiste macht, sieht man hier, welche verschiedenen Medien (Bilder, Audios, Videos, Karten, Tweets) sich in die Zeitleiste einbinden lassen. Die Bearbeitung der Daten, die in den folgenden Schritten erklärt wird, kann man durch Aktualisieren der Vorschau jetzt immer mitverfolgen.

TL4

7 | Zurück zur Google-Datentabelle: Vor der Eingabe von Daten sollte man jetzt die Zeilen 3 bis 9 löschen und ggf. neue, leere Zeilen hinzufügen. Übrigens: Spalten dürfen nie gelöscht werden.

8 | Um statt Daten (MM.TT.JJJJ) auch nur Jahreszahlen einzugeben, muss man Spalte A und Spalte B umstellen: Spalte markieren, dann “Format”, dann “Zahl” und dann “Nur Text” anklicken. Bei einem einzelnen Ereignis – z.B. der Novemberrevolution – trägt man in Spalte A 1918 ein, Spalte B bleibt leer. Bei einem Zeitraum – z.B. dem Ersten Weltkrieg – trägt man in Spalte A 1914 und in Spalte B 1918 ein.

TL5

9 | Die blau hinterlegte Zeile 2 ist die “Auftaktseite” der Zeitleiste, auf der das Thema erklärt werden kann. Hier muss übrigens keine Jahreszahl angegeben werden, sie erscheint später automatisch am Anfang der Zeitleiste.

10 | In der Spalte “Text” werden die Erläuterungstexte eingegeben. Etwas kompliziert: Will man in den Erläuterungstexten Links erzeugen, muss man sie mit dem HTML-Befehl (Bsp.)

<a href=”http://www.bpb.de/politik/hintergrund-aktuell/69545/der-9-november” target=”_blank”>Weiterführende Informationen zum 9. November als Datum der deutschen Geschichte</a>

manuell erzeugen. Der Zusatz target=”_blank” dient dazu, dass sich die Seite in einem neuen Fenster öffnet.

TL6

11 | Medien werden bei Timeline JS nicht hochgeladen, sondern verlinkt. Für Open Educational Resources (OER) sollte man bei der Auswahl an Bildmedien auf freie Lizensierung achten. Bildmedien unter Public Domain oder Creative Commons-Lizenz finden sich vor allem in der Wikimedia (Beispiel: Foto des Bundesarchivs zur Maueröffnung). In die Spalte “Media” muss man die URL eintragen, die nach zweimaligem Klicken auf ein Bild der Wikipedia angezeigt wird (Bsp.):

https://upload.wikimedia.org/wikipedia/commons/4/4a/Bundesarchiv_Bild_183-1989-1118-028%2C_Berlin%2C_Grenz%C3%BCbergang_Bornholmer_Stra%C3%9Fe.jpg

Es lassen sich auch Bilder aus anderen Bilddatenbanken, z.B. flickr, verlinken.

12 | In der Spalte “Media Credit” ist der Urheberrechts-Nachweis zum Bild einzutragen. Bei Wikimedia erhält man den Nachweis, wenn man auf den blauen Button “Weitere Einzelheiten” klickt, dann das Globus-Symbol “Use this file” und dann die dritte Zeile “Attribution” kopiert (und ggf. kürzt). Im Beispiel ist der Urheberrechts-Nachweis zusätzlich mit der Wikimedia-Seite verlinkt – dann kann man sich das Bild in Originalgröße anschauen.

TL7

13 | In die Spalte “Media Caption” wird die Bildunterschrift eingetragen. Im Ergebnis wird das Bild jetzt wie im Beispiel angezeigt.

14 | Youtube- oder Vimeo-Videos lassen sich für OER nur dann nutzen, wenn die Videos unter Creative Commons-Lizenz stehen, was leider nur selten der Fall ist. Neben Bildern und Videos lassen sich ggf. auch andere Medien einbinden, beispielsweise Tweets oder Karten. Weil solche Medien selten zum Einsatz kommen, soll hierauf nicht detailliert eingegangen werden. Es empfiehlt sich, nochmals die Vorlage von Timeline JS herunterzuladen; dort findet man Beispiele.

TL8

15 | Die wesentlichen Schritte sind erklärt. Die Zeitleiste nimmt Gestalt an. Jetzt macht die Erstellung geeigneter Texte die meiste Arbeit. Optional kann die graue Zeitleiste in maximal mehrere (max. 6) Themenbereiche gegliedert werden (z.B. Politik – Kultur – Technik). Hierfür muss in der Spalte “Tags” der jeweilige Begriff eingegeben werden. Im Beispiel haben wir darauf verzichtet.

16 | Zuletzt kann man auf der Seite von Timeline JS noch die Optionen der Zeitleiste verändern. Die Spracheinstellung sollte auf “German/Deutsch” umgestellt werden, man kann die Schrifttypen ändern und die angezeigten Zeitintervalle einstellen. Anschließend muss man den überarbeiteten Code nochmals auf seine Seite kopieren (Schritte 3 bis 5). Ein letzter Hinweis: Die Zahl der Ereignisse sollte lt. Timeline JS auf etwa 30 beschränkt werden, weil sonst die Ladezeiten zu lang werden.

Im Rahmen von sege Geschichte  planen wir zurzeit ein Zeitleisten-Projekt, bei dem auch Schüler/innen Zeitleisten mittels Timeline JS erstellen sollen. Dazu später mehr. Die Zeitleiste zum 9. November ist der erste Versuchsballon. Hinweise / Kommentare zu anderen digitalen Zeitleisten sind willkommen. Hier das fertige Beispiel.

1 Für Open Educational Resources kommt die Verwendung von Google Drive eigentlich nicht in Frage, allerdings muss sich nur der Ersteller der Zeitleiste bei Google anmelden, nicht der Benutzer der Zeitleiste.



Diesen Blogbeitrag zitieren
Christoph Pallaske (2014, 28. Oktober). Anleitung | Digitale Zeitleisten mit Timeline JS erstellen | Open Educational Resources. Historisch Denken | Geschichte machen. Abgerufen am 28. März 2024, von https://doi.org/10.58079/po3c

5 Antworten auf „Anleitung | Digitale Zeitleisten mit Timeline JS erstellen | Open Educational Resources“

  1. Vielen vielen Dank für diese freundliche Anleitung und die Hinweise auf Twitter!
    Genau so ein Werkzeug hat mir noch gefehlt, um meine MA noch optisch zu vereinfachen und zu verschönern …
    Der Import von Exceltabellen funktioniert übrigens auch einigermaßen reibungslos …
    Jetzt suche ich nur noch einen Weg, dass ganze in eine wunderhübsche Worddatei zu pressen um es in gedruckter Form vorlegen zu können….vllt. tackere ich einfach ein paar Meter Papier zusammen?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Suche in OpenEdition Search

Sie werden weitergeleitet zur OpenEdition Search