Zeitreise: Eine interaktive Timeline realisieren

Für die interaktive Aufbereitung von Inhalten gibt es jede Menge Tools im Internet. Aber genau darin liegt auch das Problem: Welches Tool passt gut zu einem interaktiven Zeitstrahl über das Leben von Fritz Wunderlich, über das die „Lange Nacht“ eine Sendung macht ? Ein Tipptext in sieben Schritten.

1. Schritt: Anforderungen klären

Die Anforderungen an ein Tool können sehr unterschiedlich sein. Für den Deutschlandfunk sind bestimmte Reglements strenger, als etwa für einen Blogger. Das hängt mit verschiedenen Faktoren zusammen:

Datenschutz: Aus datenschutzrechtlichen Gründen müssen alle Skripte und Daten (derzeit) auf den Servern vom Deutschlandfunk liegen.
Nutzungsrechte: Außerdem muss der Code unter einer einschlägigen Open-Source-Lizenz zur Verfügung stehen. Auch für die verwendeten Inhalte müssen die Nutzungsrechte lückenlos geklärt sein.
Leichte Implementierung: Hierfür gibt es unterschiedliche Methoden, entweder als embedded JavaScript oder per iframe. Aber auch die Inhalte sollten möglichst einfach integrierbar sein und der Code möglichst einfach kontrollierbar. Dafür unabdingbar ist eine gute Dokumentation.

2. Schritt: Tools recherchieren und testen

Dieser Schritt ist oft mit Abstand der aufwendigste – und wird gerne unterschätzt. Denn je nachdem, wie aktiv bestimmte Themen in der Webcommunity beackert werden, gibt es bessere und schlechtere, mehr oder weniger Möglichkeiten, unterschiedlichen Code zu verwenden. Bei der Timeline sieht es auf den ersten Blick eigentlich vielversprechend aus, der zweite Blick ist allerdings sehr viel ernüchternder. Insgesamt haben alleine diese Vorrecherchen und Tests etwa 1,5 Arbeitstage gekostet.

Hier eine keine Auswahl der Open-Source-Tools, die ich – unter anderem – recherchiert und getestet habe:

Wellcome Library
Republica Timeline
Timeline JS3– Code auf GitHub verfügbar.
Tutorialzine Timeline

Schließlich habe ich mich für Timeline.JS entschieden. Es ist die Vorgängerversion von Timeline.JS3. Hintergrund ist, dass die eigentlich aktuellere Version leider auf Google Spreadsheet setzt und ich damit Daten von einem fremden Server laden würde.

Natürlich hat das auch seine Nachteile: So ist die nun verwendete Version nicht mehr in Entwicklung. Das führte dazu, dass die Deutschlandfunk-Programmierabteilung auch Anpassungen vornehmen musste. Außerdem ist das CSS-File sehr komplex und wenn man das Standardlayout verändern will, muss man sehr viel Zeit aufwenden. Aber: Die Lizenzinformationen sind korrekt. Es wird eine OpenSource-Lizenz verwendet. Es ist auch ein sehr schlankes System und die Tests funktionierten gleich gut – deshalb ist dies meine Wahl.

3. Schritt: Datenrecherche

Die Grundlage für diese Timeline ist die Sendung, die sie begleiten soll: Die „Lange Nacht“ ist eine dreistündige Sendung, die am Wochenende in Deutschlandradio Kultur und beim Deutschlandfunk läuft. Und in diesem Fall handelt sie vom Leben des Tenors Fritz Wunderlich.

Der Autor hat mir vorab sein Manuskript zur Verfügung gestellt; ich habe zusätzlich in den für den Deutschlandfunk verfügbaren Agenturen Bilder recherchiert und auch bei der Fritz Wunderlich Gesellschaft dafür Nutzungserlaubnisse eingeholt. Ergänzt wurde dies um die Recherche von Audio- und Videoaufnahmen, auf die ich dann verlinken konnte.

Wie lange die Datenrecherche dauert, kann ich nicht pauschal sagen: In diesem Fall hat es wirklich sehr, sehr gut geklappt und mit allen Telefonaten und Mailverkehr vielleicht einen halben Arbeitstag gekostet – allerdings nicht am Stück.

4. Schritt: Texte verfassen und Bilder bearbeiten

Natürlich mussten nun noch die verschiedenen Texte verfasst werden. Hilfreich ist es in diesem Fall, wenn man ein bisschen HTML kann, denn sonst funktioniert vieles nicht richtig. Außerdem sollten die Bilder nicht zu groß sein: Ich habe sie in einer Breite von 500 Pixeln und mit 72 dpi in einem Bildbearbeitungsprogramm nachbearbeitet. Das reicht für die Timeline völlig und sorgt auch dafür, dass sie schnell lädt. Das hat alles ungefähr zwei bis drei Stunden gedauert.

5. Schritt: Datenablage und -kontrolle

Die Bilder wurden in eine Ordnerstruktur gebracht, die Daten dann im Anschluss in ein JSON-File eingetippt. Für Nicht-Techniker: JSON ist eine strukturierte Datenform, mit der Informationen zur Verfügung gestellt werden können, die später von dem Programmcode der Timeline ausgelesen werden können. Natürlich wäre eine Eingabemaske viel weniger fehleranfällig und übersichtlicher. Aber der Vorteil ist: Ich konnte alles auch offline auf meinem Rechner ständig kontrollieren.

Wichtig auch: Die Umlaute etc. müssen HTML-konform sein, also sogenanntes „named HTML“. Es darf also zum Beispiel im Text nicht irgendwo ein „ö“ stehen, stattdessen muss die HTML-Schreibweise „ouml;“ dort stehen. Geschieht dies nicht, werden später anstelle der Umlaute unschöne Platzhalter angezeigt. Diese Umwandlung nimmt einem ein HTML-Texteditor wie zum Beispiel PSPad ab.

Ein wenig habe ich auch die sehr komplexe CSS-Datei angepasst. Um hier größere Designänderungen durchführen zu können, hätte ich hier aber noch einmal einen Tag länger herumtesten müssen – es ist definitiv ein Nachteil dieses Codes, dass das nicht einfach möglich ist.

Bei der Dateneingabe gab es übrigens ein Problem: Wie muss das jeweilige Datum angegeben werden? Antwort – in dieser Form: 2016,09,17. Und dennoch wurde es nur auf die amerikanische Schreibweise ausgelesen. Auch hier habe ich mir etwas den Kopf zermartert, bis ich dann herausgefunden habe, dass man entsprechende Sprachdateien hier herunterladen kann und sie dann in den Ordner „locale“ im Unterordner „js“ ablegen muss – dort, wo auch die wichtigen Skripte für die Timeline liegen.

Bei mir hat es natürlich länger gedauert, weil ich proben musste. Aber wenn man die ganzen Strukturen einmal verstanden hat, dauert das Übertragen der Daten vielleicht noch eine halbe Stunde.

6. Schritt: Immer wieder testen und durchbeißen

Bis dann alles steht und korrekt ist, vergeht dann eine Weile. Es heißt hier immer wieder: testen! Natürlich gibt es hier beim Deutschlandfunk dann im Anschluss noch inhaltlich und technische Abnahmeprozesse, die dann auch angestoßen werden müssen.

7. Schritt: Integration ins Content-Management-System

Eigentlich wäre dies auch als Embedded Code möglich gewesen, allerdings hat das nicht geklappt, weil der Code zentral auf Deutschlandradio.de abgelegt wurde. Da ich aber in dem JSON-File immer relative Ordnerstrukturen verwendet habe, wurden dann die Bilder nicht mehr ausgelesen. Der Vorteil am Embedded Code ist, dass er sich auch responsiv unterschiedlichen Ausgabegeräten anpasst. Ich habe nun eine Integration per iframe vorgenommen.

Das Ergebnis ist die Timeline über Fritz Wunderlich. Hier zu sehen:

Die Timelines sind unterschiedlich breit, weil es vom Layout her so notwendig war.

Vielleicht generell als Aufwandsschätzung: Insgesamt habe ich etwa 2,5 bis 3 Arbeitstage in die Realisierung verwendet. Allerdings musste ich auch erst recherchieren, welcher Code infrage kam und ihn durchtesten und anpassen. Mit allem Drum und Dran sollte man aber – auch wegen der Text und Bildrecherche – etwa zwei bis drei Wochen Vorlauf einplanen.

Tags: CSS | JS | Timeline