Die Knightlab-Timeline – ein neuer Menüpunkt am Bloghimmel

Ein nüchternes Straßenbild einer flachen, dänischen Landstraße, blauer Himmel. Das Bild ist umgeben von Texten verschiedener Formate. Unten sieht man eine Zeitlinie mit Jahresangaben und Ereignissen an kleinen Fähnchen.
Ein nüchternes Straßenbild einer flachen, dänischen LaBild von zwei Männern im Schneidersitz in einer Scheune. Helle Ritzen zwischen den Brettern. An der Wand lehnen Fahrräder. Das Bild ist umgeben von Texten verschiedener Formate. Unten sieht man eine Zeitlinie mit Jahresangaben und Ereignissen an kleinen Fähnchen.
Screenshot aus der Timeline, die die Geschichte des Konzepts Kunststraße zeigt.

Das Menü am oberen Rand dieses Blogs hat Gesellschaft bekommen. Ich habe eine Timeline meiner wichtigsten Reise- und Kunstprojekte seit 1994 erstellt. Mächtig Arbeit.

Um mit dem Zaunpfahl zu winken, ich nehme das Timeline-Erstellen in meine Serviceleistungen auf. Beauftragt mich, wenn Ihr nicht die Zeit findet, nach dieser Anleitung bei knightlab.com eine eigene Timeline zu erstellen.

Blick unter die Motorhaube der Knightlab-Timeline

Alle Daten, die in der Zeitlinie grafisch umgesetzt werden, werden in einem Google-Spreadsheet tabellarisch eingefügt. Man muss die Tabellenstruktur der Vorlage, die man bei Knightlab herunterlädt peinlich genau einhalten und die entsprechenden Datenformate (Link, Zahl, Text) beachten. Zum ‚Hosten‘ des Spreadsheets benötigt man ein kostenloses Google-Konto.

Wenn man aus der Vorlage sein eigenes Spreadsheet angelegt hat, kann man sich auf der Knightlab-Seite einen Code erstellen, den man in die eigene Webseite einbinden muss. Es sind nur zwei drei Zeilen, die dafür sorgen, dass die Timeline generiert wird. Im Code kann man noch die Sprache und die Größe der Timeline verändern. Wenn es gespeichert ist, muss man daran nichts mehr ändern.

Die Tabelle kann man jederzeit auch nachträglich bearbeiten.

Das folgende Bild zeigt, wo die jeweiligen Tabelleneinträge in der Timeline angezeigt werden und wie sie dargestellt werden.

Ein Timeline-Blatt mit Titel, Grafik (hier uas Murphy's Pubschnitt ein erschöpfter Radler nebst Fahrrädern an irischer Landstraße). Die inzelnen Felder von Titel, Bild und Beschreibung sind farblich gekennzeichnet und mit den Spaltennamen, die in der Datentabelle auszufüllen sind, gekennzeichnet.
Grafische Darstellung, welche Tabellenspalte in der Webseite wo und wie angezeigt wird.

Zum erstmaligen Arbeiten empfiehlt es sich, die Beispieldatensätze zu erhalten und leere Zeilen mit eigenen Daten zu füllen. Insbesondere die Spalten mit den Links und Credits sind ein bisschen tricki. Minimale Html-Kenntnisse sind von Vorteil. Im Prinzip ist es jedoch reine Copy & Paste Arbeit, wenn alle Daten irgendwo im Netz liegen.

Tabellenformular mit vielen Daten und HTML-Quelltext, sieht aus wie eine Excel-Tabelle.
In der Tabelle werden alle Datensätze gesammelt. Je Zeile ein Ereignis. Die Daten müssen nicht chronologisch eingegeben werden. Die Timeline-Maschine sortiert sie aus eigener Kraft.

Die Vor- und Nachteile der Knightlab-Timeline

Vorteil: sehr schickes Ding. Gut, um in aller Kürze seine Geschichte zu erzählen.

Nachteil: man ist abhängig von der Firma, die den ‚Motor‘ bereitstellt und von Google, wo die Tabelle abgelegt wird. Sprich, wenn die Firma den Motor umbaut, oder ihn vom Netz nimmt, ist die Timeline futsch. (Ich beobachte das allerdings seit Jahren und es scheint, dass Knightlab stabil läuft und gepflegt wird). Wenn Google seinen Spreadsheet-Dienst abstellt, sind die Daten auch futsch. Logisch.

Weiterer Nachteil: ziemlich hochgezüchteter Code, der vielleicht nicht immer auf allen Browsern korrekt gezeigt wird. Tests mit aktuellen Chromium und Firefox waren okay. Auch der Safari auf dem Smartphone zeigt die Timeline, obschon das horizontale Wischen da etwas mühsam ist. JavaScript muss aktiviert sein.

Noch ein Nach- und Vorteil: Man sollte nicht zu viele Ereignisse versammeln. Das schränkt ein und animiert gleichzeitig zur Kürze. Knightlab empfiehlt ca. 20 Datensätze. In meinem Fall sind es 30. Die Bilder habe ich fast alle verkleinert auf maximal 1024 Pixel Breite oder Höhe.

Sodele. Genug geredet. Mein nächstes Tutorial heißt: Ölwechsel am Porsche Super – Fallstricke und Schmierstrecken eines Einspritzers 🙂