Timeline

"Timeline" ist ein Zeitleisten-Template von Codyhouse. Da es keinen Editor hat, musst du direkt im HTML-Code Änderungen vornehmen. Dank übersichtlicher Programmierung können aber selbst Anfänger mit dem Template schöne und interaktive Zeitstrahle erstellen.

Innovativität: Einstellungsoptionen: Nutzerfreundlichkeit: Design:

Meine Meinung

Timeline ist ein schönes und schlank codiertes Zeitstrahl-Template. Es eignet sich gut, um in längeren Fließtexten historische Fakten übersichtlich darzustellen. Auch wenn das Codieren vielleicht zuerst abschreckt – die Bedienung ist einfacher als es auf den ersten Blick scheint.

Mit Line hatten wir bereits ein Zeitstrahl-Tool auf Bleiwüsten. Allerdings ließ Line noch einige Wünsche in den Einstelloptionen offen.

Fakten & Daten

Preis

Sprache
Lernzeit
Arbeitszeit
Ausspielart
Support

|

|
|
|
|
|

Basic: kostenlos
Pro: 50 US-$
englisch
20 Minuten
1 Stunde
Code
FAQ


zum Tool

Deswegen habe ich mir nun mit "Timeline" einen Zeitstrahl angeschaut, der komplett veränderbar ist. "Timeline" hat jedoch weder einen wirklichen Namen, noch einen Editor – im Gegensatz zu dem anfängerfreundlicheren Line. Das Template von "Line" ist ein Ordner mit HTML, CSS und Javascript-Dateien, die du dir von der Codyhouse-Webseite herunterladen kannst.

Das hat zur Folge, dass man an "Timeline" wirklich alles ändern kann – sich dafür aber auch ein wenig mit Code-Zeilen herumschlagen muss. Doch selbst für Anfänger ist das erstaunlich leicht. Denn "Timeline" ist kurz und überischtlich programmiert. Also, trau dich!

Anschauungsbeispiel

Download & Coding

Zu allererst musst du dir "Timeline" herunterladen. Auf der Webseite findest du nicht nur die Datei, sondern auch noch eine Erkärung des programmierten Codes und die Lizenzbestimmungen. Hast du dir die Zip-Datei heruntergezogen, musst du den "Timeline"-Ordner entpacken. Falls du noch kein Entkomprimier-Programm auf dem Rechner hast, empfehle ich dir Winrar.

Hast du das gemacht, musst du die Index-Datei mit einem Text-Editor öffnen. Wie bereits in früheren Posts empfehle ich hierzu Notepad++. Der Code, der sich vor die öffnet, teilt sich in vier Teile ein (schau sie dir in der Bildergalerie an!). Im Head stehen Meta-Dateien und Verlinkungen, die dich noch nicht kümmern müssen. Es folgen die Daten, die beschreiben, wo auf der Timeline Bubbles für die Ereignisse erscheinen sollen. Das ist denkbar einfach programmiert. Du musst lediglich das Datum der entsprechenden Events eintragen. Easy!

Der nächste Abschnitt ist der Teil, wo du den Text einfügen musst, der als Beschreibung unter dem Event erscheinen soll. Wobei Text hier zu wenig gesagt ist. Du kannst hier alles einfügen, was du willst. Exemplarisch habe ich bei dem zweiten Event im Fallbeispiel ein Youtube-Video eingebunden. Aber auch Audios, Bilder(-galerien) oder Infografiken sind möglich. Nutze dafür iFrame-Einbettungs-Codes, die die meisten Programme und Plattformen zur Verfügung stellen.

Coding & Hosting

Der letzte Abschnitt ist der Footer. Den lässt du am besten komplett in Ruhe. Wenn du dich ein wenig mit CSS auskennst, kannst du natürlich auch die Style-Sheet-Datei ändern und deiner Timeline einen anderen Look verpassen. Aber das ist kein Muss. Hast du alle Events eingetragen (in der Bildergalerie gibt es eine Schritt-für-Schritt-Anleitung), speicherst du die Index-Datei ab. Bei Notepad++ gibt es den Button "Ausführen". So kannst du deinen Code in einem Browser überprüfen.

Nun musst du den gesamten Ordner (auch all die CSS- und Javascript-Dateien!) im Netz verfügbar machen. Entweder du hostest ihn selber – bei WordPress empfehle ich hierfür das FTP-Programm Filezilla – oder du nutzt eine Cloud. Bei Google Drive musst du die Dateien hochladen und sie unter "Freigeben" → "Öffentlich im Web" für jeden einsehbar machen. Alle anderen Freigabe-Einstellungen reichen nicht aus.

Beachte, dass du in diesem Fall die Links zu CSS und JavaScript neu setzen musst. Die Adresse ändert sich hier zu "googeldrive.com/host" und dann die ID der entsprechenden Dateien. Hostest du selber kann es sein, dass du ebenfalls die Links austauschen musst. In der Bildergalerie siehst du, wie ich es gelöst habe.

Einbetten

Hast du die Zeitleiste ins Web geladen, bist du im Grunde fertig. Du musst die Timeline nur noch in deine Webseite ziehen.

Tricks für Pros
In Abschnitt Eins und Zwei des Codes gibt es zwei Mal den Eintrag class="selected". Das bedeutet, dass dieses Event nach dem ersten Laden der Timeline aktiv sein wir. Wenn du nicht willst, dass das erste Ereignis deines Zeitstrahls am Anfang angewält ist, musst du das ändern. Einfach die Klasse bei einem anderen Event einfügen.

Das tust du am besten über einen iFrame-Einbettungs-Code. Dafür brauchst du nur die URL der Index-Datei. Hast du den Ordner über ein FTP-Programm (Filezilla) hochgeladen, reicht ein Rechts-Klick auf die Index-Datei, um die URL zu bekommen. Hostet du in der Cloud, musst du auf die sich womöglich ändernden Link achten. Füge diesen Link nun in einen iFrame-Befehl ein.

Der Befehl für das Fallbeispiel oben heißt ("xxx"="deine URL"):

"src" meint die Quelle des Zeitstrahls, "height" und "width" die Höhe und Breite. Am Ende musst du den iFrame-Code nur noch in deine Webseite einfügen.

Pro

Wie alle Programme ohne Editor bei denen du direkt am Herz, ähm, Code herumwurschtelst, kannst du bei "Timeline" einfach alles verändern. Das ist toll. Programme wie Line, die für Anfänger gemacht sind, können da einfach nicht mithalten. Zudem ist das Template schön und schlicht. Es ist unaufdringlich und fügt sich gut in Fließtexte von langen Webreportagen ein – ohne von der Geschichte abzulenken. So solls sein!

Kontra

Doch bis du das alles hingekriegt hast, wird ein bisschen Zeit vergehen. Code-Zeilen schrecken ab. Und das Selber-Hosten ist beim ersten Mal auch eine Frickel-Arbeit. Wenn du darauf keinen Bock hast, solltest du ein anderes Programm nutzen. Zudem ist es natürlich ein wenig aufwendig, kleinere Änderungen wie die Farbe des Hintergrundes zu ändern. Kannst du kein CSS, ist das echt kompliziert.

Bleiwüsten abonnieren:

Fazit & Alternativen

Für Fortgeschrittene ist das "Timeline"-Template ein leichtes und schnelles Tool. Es sieht gut aus und ist flexibel. Anfängern bietet es die Möglichkeit bei einem leichten Programm zu lernen, wie man ein bisschen Codiert und Hostet.

Sagt dir das Programm gar nicht zu, empfehle ich dir Line. Das ist für Anfänger und Journalisten mit wenig Zeit die bessere Alternative. Ebenso wenig kompliziert sind Timeline JS und Timemapper, das aber eine Karte mit integriert.