Herzlichen Willkommen zum 15. Türchen des AdvenTOOLender! Schön, dass du mit dabei bist. An diesem Tag möchte ich dir das Tool „Timeline JS“ vorstellen. Mit ihm kannst du einen interaktiven Zeitstrahl erstellen, in den du viele unterschiedliche Medien einbetten kannst. Falls du dich fragst, wieso es erneut einen interaktiven Zeitstrahl gibt: bei StoryLine JS“ (Türchen 8) standen statistische Werte im Vordergrund, hier sind es andere Medien. Aber sieh selbst:
Beispiel: 90. Geburtstag von Hundertwasser
Der berühmte Künstler Friedensreich Hundertwasser wäre heute, am 15. Dezember 2018, 90 Jahre alt geworden. Deshalb wollen wir in unserem heutigen Beispiel mit einer „Timeline JS“ einige seiner Lebensabschnitte und -ereignisse aufzeigen. Klicke dich einfach mal durch:
Geeignete Themen
Du benötigst für das Tool Daten – das meint beispielsweise Jahreszahlen, da du einen Zeitstrahl erstellst. Weitere journalistische Themenideen: Überblick über die Bundeskanzler*innen von Deutschland nach ihren Regierungszeiten (mit ggf. verschiedenen Ereignissen), Portrait mit Lebenslauf von Jogi Löw und Maßnahmen der Digitalisierung in Deutschland über die Jahre.
Ungeeignete Themen
Ohne Jahreszahlen oder Datum kannst du leider keine „Timeline JS“ umsetzen. Außerdem müssen die Angaben über einen längeren Zeitraum gehen. Das heißt: Das heutige Fußballspiel macht als Thema keinen Sinn, die letzten 10 Spiele des Vereins mit Datum aber schon.
Die Schritt-für-Schritt-Anleitung
Du kannst ganz einfach selbst so eine „Timeline JS“ erstellen. Solltest du die Tools „Juxtapose JS“ (Türchen 3), StoryLine JS“ (Türchen 8) und „SoundCite“ (Türchen 9) kennen, kommen dir die Schritte jetzt ziemlich bekannt vor. Gut für dich 🙂 Falls nicht, ist das natürlich auch kein Problem. Hier erfährst du, wie es geht:
=> Video: Coming soon.
1.) Zunächst benötigst du einen Account bei Google. Den kannst du auf „google.de“ oben rechts erstellen, beziehungsweise du kannst dich dort einloggen, falls du bereits einen besitzt.
2.) Danach gehst du auf die Homepage von „Timeline JS“. Dort findest du eine Google-Tabelle, also ein Spreadsheet, in das du alle Informationen, die für deinen interaktiven Zeitstrahl wichtig sind, einträgst (siehe auf der Homepage Punk 1 „Create your spreadsheet“ unter „Make a timeline“. Bei mir sieht die Tabelle so aus:
3.) Du kannst in der Tabelle unterschiedliche Medien nutzen, beispielsweise Bilder von Flickr oder mit anderer URL, Videos von YouTube und Vimeo, Google Maps, SoundCloud, Twitter und einige mehr. Trage also das Datum beziehungsweise die Zeiträume in deine Tabelle ein, füge Medien mit Quellenangabe und Beschriftung dazu. In einer der Spalten kannst du beispielsweise auch die Hintergrundfarben mit Hilfe von HEX-Werten ändern. Falls du die genauer kennen möchtest: „Farben mit HEX-Wert“
Wie im Spreadsheet was eingetragen werden kann, wird in der „Timeline JS“-Vorlagen-Tabelle ziemlich gut deutlich. Solltest du trotzdem noch Fragen haben, immer gerne her damit. Kontaktmöglichkeiten: Siehe unten.
4.) Solltest du die Tabelle fertig ausgefüllt haben oder eine Vorschau deiner bisherigen Einträge sehen wollen, musst du das Spreadsheet veröffentlichen. Klicke dafür im Dokument auf „Datei“ > „Im Web veröffentlichen“ (siehe Foto 2). Das bestätigst du. Danach verlässt du diese Übersicht und nutzt die URL, die sich oben in deinem Dokument befindet. Diese kopierst du.
5.) Gehe zurück auf die Homepage des Tools. Scrolle runter zu Punkt 3 „Generate your timeline“ und füge dort diese URL ein. Dort kannst du noch Einstellungen, beispielsweise die Größe, vornehmen. Das habe ich in dem Beispiel nicht gemacht.
6.) Scrolle weiter zu Punkt 4 „Share your timeline“ und klicke auf den „Preview“-Button. Dadurch siehst du unten die Vorschau deiner erstellten „Timeline JS“. Sollte dir die gefallen, befinden sich dort ebenfalls ein Link und der Embed-Code zu deinem Zeitstrahl. Dadurch kannst du dein Beispiel unter anderem via Social Media teilen oder in eine Homepage einbetten. Du kannst in deinem Google-Spreadsheet jederzeit Änderungen vornehmen. Damit sie in deiner Vorschau und damit beispielsweise auch in deiner eingebetteten „Timeline JS“ übernommen werden, musst du erneut auf „Preview“, also Vorschau, klicken. Dabei muss natürlich oben die URL zu deinem Spreadsheet noch eingefügt sein (siehe Schritt 5).
Weitere Beispiele
Auf der Homepage hat das „Knight Lab“, Entwickler des Tools, weitere Beispiele aufgelistet, einige möchte ich hier drei Stück zeigen:
Mehr vom AdvenTOOLender
Türchen 24: Mit „MyAdvent.net“ einen Adventskalender erstellen – AdvenTOOLender 2018
Türchen 23: Interaktive Videos mit „Ekostudio“ erstellen – AdvenTOOLender 2018
Türchen 22: „TapeWrite“: Audios mit Slider-Elementen visualisieren – AdvenTOOLender 2018
Türchen 21: Mit „Datawrapper“ Daten visualisieren | #ddj – AdvenTOOLender 2018
Türchen 20: Mit „Interview JS“ einen Chatbot erstellen – AdvenTOOLender 2018
Türchen 19: Mit „Story Spheres“ 360°-Bilder mit Audios verknüpfen – AdvenTOOLender 2018
Türchen 18: „Timescape“ für Storytelling auf interaktiver Karte – AdvenTOOLender 2018
Türchen 17: Interaktive (Insta-) Stories & Umfragen mit Apester – AdvenTOOLender 2018
Türchen 16: Stories erzählen mit „Wakelet“ und Social Media – AdvenTOOLender 2018
Türchen 14: Mit „Brackify“ Umfrage-Battles erstellen – AdvenTOOLender 2018
Türchen 13: „Account Analysis“ für Twitter-Daten – AdvenTOOLender 2018
Türchen 12: News-Quiz erstellen mit Genial.ly – AdvenTOOLender 2018
Türchen 11: Genial.ly für interaktive Bilder – AdvenTOOLender 2018
Türchen 10: Wortwolken als Design-Option und Analyse-Tool – AdvenTOOLender 2018
Türchen 9: SoundCite JS für Audios im Text (Inline) – AdvenTOOLender 2018
Türchen 8: Interaktiver Daten-Zeitstrahl mit StoryLine JS – AdvenTOOLender 2018
Türchen 7: Storrito für Instagram-Stories vom PC – AdvenTOOLender 2018
Türchen 6: „Steller“ für Fotoalben mit Story – AdvenTOOLender 2018
Türchen 5: Mit Canva schnell schöne Designs erstellen – AdvenTOOLender 2018
Türchen 4: Gifs erstellen mit dem Data Gif Maker – AdvenTOOLender 2018
Türchen 3: Vorher-Nachher-Bilder mit Juxtapose JS – AdvenTOOLender 2018
Türchen 2: Audios visualisieren mit SpareMin Headliner
Türchen 1: Interaktive Grafiken mit Infogram – AdvenTOOLender 2018
Du hast noch Fragen zu „Timeline JS“, Feedback zum AdvenTOOLender oder ein bestimmtes Tool, das ich neben der Adventskalender-Aktion Schritt-für-Schritt erklären soll? Immer her damit! Entweder als Kommentar unter diesen Blog-Eintrag, per E-Mail (johanna.daher@gmx.de), via Kontaktformular oder über die sozialen Kanäle.
8 Gedanken zu „Tag 15: Interaktiven Zeitstrahl mit „Timeline JS“ erstellen – AdvenTOOLender 2018“