12 Tools fĂŒr digitales Storytelling

Ich durfte fĂŒr Studentinnen und Studenten der Uni MĂŒnster ein kleines Seminar zum Thema Digital Storytelling geben: Wir haben uns eine ganze Reihe von Werkzeugen angeschaut, mit denen sich einfach, ohne Programmierkenntnisse und in den meisten FĂ€llen kostenlos Inhalte im Netz interaktiv und multimedial prĂ€sentieren lassen – von Social-Content-Tools wie Pablo (Bildkacheln erstellen) und Headliner (Audios visualisieren) ĂŒber Imagemaps mit Pictogon, Vorher-Nachher-Bilder mit Juxtapose, Zeitleisten mit TimelineJS und Storymap, interaktiven Grafiken mit Genially, 360-Grad-Ansichten mit SceneVR, Audio-Zitaten mit SoundCite und Chatbots mit FlowXo bis hin zur bildschirmfĂŒllenden Multimedia-Reportage mit Pageflow und PictureStory

Hier ist das Paper zur Veranstaltung mit allen Links und vielen Beispielen: 12 Tools fĂŒr digitales Storytelling (PDF). Annette von Droste kommt auch drin vor. :)

SoundCite JS: Texte mit Audios anreichern

Stimmt schon: Gut geschriebene Texte brauchen nichts weiter als eine Leserin mit Phantasie, um ihre volle Wirkungskraft zu entfalten. Und doch kann es sich lohnen, Texten noch mehr Tiefe zu geben – mit einer medialen Erweiterung durch Sounds. 

O-Töne, GerĂ€usche, AtmosphĂ€re können eine sinnvolle ErgĂ€nzung zu schriftlichen Inhalten im Netz sein. Meist begegnet man ihnen in Gestalt eines Audioplayers, der zwischen zwei AbsĂ€tzen eingebunden wird und das Lesen somit unterbricht. SoundCiteJS bietet eine anderen Weg: Mit dem Tool lassen sich Töne nahtlos in einen Text integrieren. „Seamless inline audio“ nennt die Werkzeugschmiede Knight Lab dieses Storytelling-Format.

Ein Auszug aus dem Droste-Gedicht „Die Lerche“ mag als Beispiel dienen:

(…) Da krimmelt, wimmelt es im Haidgezweige,
Die Grille dreht geschwind das Beinchen um,
Streicht an des Thaues Kolophonium,
Und spielt so schÀferlich die Liebesgeige.
Ein tĂŒchtiger Hornist, der KĂ€fer, schnurrt,
Die MĂŒcke schleift behend die Silberschwingen,
Daß heller der Triangel möge klingen;
Diskant und auch Tenor die Fliege surrt;
Und, immer mehrend ihren werthen Gurt,
Die reiche Katze um des Leibes Mitten,
Ist als Bassist die Biene eingeschritten:
SchwerfĂ€llig hockend in der BlĂŒte rummeln
Das Contraviolon die trÀgen Hummeln.
So tausendarmig ward noch nie gebaut
Des MĂŒnsters Halle, wie im Heidekraut
Gewölbe an Gewölben sich erschließen,
Gleich Labyrinthen in einander schießen;
So tausendstimmig stieg noch nie ein Chor,
Wie’s musizirt aus grĂŒnem Haid hervor.
(…)

SoundCite JS: Wie funktioniert’s?

Auf der Plattform SoundCiteJS sind die Clips im Handumdrehen erstellt, die Plattform erklĂ€rt das Prozedere in drei Schritten. Eigentlich sind es vier Schritte, denn vorbereitend solltest du …

1.) Sound publizieren: Die Audios mĂŒssen online verfĂŒgbar sein. Lade ein Soundfile – möglich sind die Formate MP3, M4A, WAV und Ogg, fĂŒr das Ausspielen auf iOS wird .mp3 empfohlen – entweder auf deinen Webspace oder in deine WordPress-Mediathek und kopiere dir den Link zur Audiodatei in deinen Zwischenspeicher. In WordPress findest du den Link im Bearbeitungsmodus einer Mediendatei hinter dem Button „URL in Zwischenablage kopieren“.

2.) Sound laden: Öffne das Tool SoundCiteJS im Browser deiner Wahl, kopiere den Link zum Audiofile in das erste Feld und drĂŒcke „Load“.

3.) Clip erstellen: Ist die Datei geladen, bekommst du mehrere Optionen: Du kannst das Audio anhören, durch Setzen von Start- und Endzeit einen Ausschnitt auswĂ€hlen (oder die ganze Datei nutzen), festlegen, ob und wie oft der Sound wiederholt wird und hinter welchem Wort in deinem Text er hinterlegt sein soll. All diese Optionen lassen sich auch nachtrĂ€glich Ă€ndern – insbesondere die Wahl des Textabschnitts wirst du womöglich erst spĂ€ter treffen wollen; lass in diesem Fall einfach „listen“ stehen. Ein Klick auf „Create clip“ generiert den Code mit den Parametern, die du in diesem Schritt ausgewĂ€hlt hast.

4.) Sound im Text einbetten: Kopiere dir den Embed-Code und setze ihn dort ein, wo du ihn brauchst: Im WordPress-Editor deines Beitrag zum Beispiel oder auf einer Website, deren Datei du in einem HTML-Editor bearbeitest. 

Der generierte Embed-Code lĂ€sst sich, wie oben erwĂ€hnt, leicht anpassen: Start- und Endzeitpunkt sind im Code vermerkt, ebenso, wie oft der Clip abgespielt werden soll („data-plays“). Und natĂŒrlich lĂ€sst sich „listen“ durch jedes beliebige Wort oder jeden gewĂŒnschten Satzteil ersetzen. Im Beispiel oben sieht der Code fĂŒr das erste hinterlegte Audio so aus:

Grille 

Damit das Ganze funktioniert, fehlt allerdings noch ein letzter Schritt. SoundCiteJS liefert dir unterhalb deiner Clips unter dem Punkt „3“ einen weiteren Code: Er lĂ€dt die benötigten Javascript-Dateien, die dafĂŒr sorgen, dass der Player tut, was er soll, und muss vor dem eigentlichen Embed-Code deines ersten Clips eingefĂŒgt werden. WordPress-User können einfach das zugehörige Plugin installieren.

Quelle fĂŒr Sounds und GerĂ€usche

Woher bekommt man nun Sounds, wenn man sie nicht selbst erstellen kann? Da lohnt ein Blick in die Hörspielbox. Sie bietet ein gut verschlagwortetes Soundarchiv mit mp3-Dateien – auch einige der oben verwendeten GerĂ€usche entstammen hoerspielbox.de. Der Download ist kostenlos, allerdings wird um eine Spende gebeten. Und: Eine kommerzielle Nutzung bedarf der schriftlichen Zustimmung. Mehr dazu in den Nutzungsrechten.

Wie Frankfurt gewÀhlt hat

Die Bundestagswahl ist gelaufen, der Zorn ĂŒber den (erwartbaren) Einzug von Rechtsextremen ins Parlament, darunter brandgefĂ€hrliche Demagogen, legt sich hoffentlich nicht so schnell. Sich an Nazis im Bundestag zu gewöhnen, als sei ihre Existenz ein Naturgesetz, ist keine Option. Dabei ist mir ganz wurscht, in welcher Partei die Rassisten sitzen. Das Geschwafel vom Schließen offener rechten Flanken lĂ€sst hier nichts Gutes erwarten. Eine Hoffnung: Falls die GrĂŒnen sich auf ihren alten Kampfgeist und ursprĂŒngliche Positionen besinnen, könnte ihnen in einer „Jamaika“-Koalition eine wichtige Rolle zukommen. Allein – mir fehlt der Glaube …

Frankfurts Sympathie fĂŒr „Jamaika“

Wie steht eigentlich Frankfurt am Main zu „Jamaika“? Inspiriert von einer Visualisierung auf Spiegel Online (die ihrerseits inspiriert wurde von The Two Americas of 2016 der New York Times) habe ich fĂŒr 376 Frankfurter Wahlbezirke ausgewertet, wie stark der gemeinsame Anteil an Zweitstimmen von CDU, GrĂŒnen und FDP jeweils ausfĂ€llt. Das Ergebnis ist eine Karte, erstellt mit Carto, die anschaulich macht, wo die Sympathie fĂŒr die „Jamaika“-Parteien stĂ€rker ausgeprĂ€gt ist, und wo sie ohne Mehrheit dasteht.

StÀrkste Parteien in den Wahlbezirken

Eine weitere Karten-Visualisierung – ebenfalls auf Wahlbezirk-Ebene – zeigt auf einen Blick, welche Partei stĂ€rkste Kraft geworden ist (und nach dem Klick auch alle Ergebnisse des Wahlbezirks). Die Karte macht auch ein interessantes Detail sichtbar: In drei Wahlbezirken gibt es ein Zweitstimmen-Patt. In den Wahlbezirken 58001 (WahlgebĂ€ude Helene-Lange Schule) in Höchst und 41003 (Kerschensteinerschule) in Hausen kommen CDU und SPD ĂŒbereinstimmend auf jeweils 24,3 Prozent. Kurios das Patt im Innenstadt-Wahlbezirk 7001 (Julius-Leber-Schule): Hier liegt die CDU mit 19,1 Prozent der Zweitstimmen gleichauf mit – den Linken!

Alle Wahlbezirke als Diagramm

Neben den 376 dargestellten Wahlbezirken hat Frankfurt 114 Briefwahlbezirke, die bei der Kartenvisualisierung außen vor bleiben. Um auch sie verfĂŒgbar zu machen, habe ich zusĂ€tzlich ein interaktives Diagramm mit Datawrapper umgesetzt, das die Ergebnisse filterbar nach allen 490 Wahlbezirken zeigt.

Die SchwÀchen von Datawrapper

Erststimmen und Zweitstimmen in 45 Frankfurter Stadtteilen sowie in zehn angrenzenden Wahlkreisen im Rhein-Main-Gebiet: In der Wahlnacht und an den Tagen danach waren mehr als 120 Ergebnis-Grafiken zu erstellen. Datawrapper zeigt bei so einer Massenproduktion eine schmerzhafte SchwĂ€che: Es gibt keine Möglichkeit, Zahlenformate (z.B. eine Stelle nach dem Komma) oder Farben (etwa der Parteienbalken) voreinzustellen – jedenfalls nicht in dem von uns genutzten Tarif Single Flat, der 29 Euro im Monat kostet. Nervig – und zeitaufwĂ€ndig.

FĂŒr die PrĂ€sention der Ergebnisse in den beiden Frankfurter Wahlkreisen habe ich erneut Genially genutzt:

 

Tools und Quellen
Wahlbezirk-Geodaten auf offenedaten.frankfurt.de
Kartenvisualisierungstool Carto
Diagramm-Tool Datawrapper
Storytelling-Tool Genially
Wahlergebnisse vom BĂŒrgeramt, Statistik und Wahlen
Tabellenkalkulation, hier: Open Office
Link: Bundestagswahl-Ergebnisse – Wie Frankfurt zu „Jamaika“ steht
Link: Bundestagswahl in Frankfurt – So hat Ihre Nachbarschaft gewĂ€hlt

Visuelles Storytelling mit Genially

Die Bundestagswahl bietet eine gute Gelegenheit, neue Tools im Redaktionsalltag zu testen. FĂŒr die PrĂ€sentation von KandidatenportrĂ€ts auf FR.de habe ich ein Werkzeug eingesetzt, das ich im FrĂŒhjahr auf der re:publica kennengelernt hatte: Genially.

Es dauert einen Moment, bis man sich reingefuchst hat, dann aber ist Genially ein mĂ€chtiges Tool, das visuelles Storytelling auf einem hohen gestalterischen Niveau möglich macht. Es bietet ein ganzes FĂŒllhorn an Design-Elementen und FunktionalitĂ€ten, um Inhalte interaktiv, multimedial und non-linear zu erzĂ€hlen – und dabei auch noch gut auszusehen. Texte, Fotos, Grafiken, animierte Gifs, Karten, Video, Audios lassen sich kombinieren, jedes Element animieren und/oder mit InteraktivitĂ€t ausstatten.

Hier mein Praxisbeispiel: In der Zeitung und auf FR.de portrĂ€tieren wir vor der Bundestagswahl die Direktkandidat*innen fĂŒr insgesamt zehn Wahlkreise in Frankfurt und den angrenzenden Regionen. Das kann man einfach in Textform machen, Bild dazu und fertig. Oder man kann es mit einem Tool wie Genially machen, das sieht dann beisielsweise so aus:

Hier, in meinem Blog, ist es fĂŒr dieses Genially ein wenig zu beengt. WĂ€hlen Sie am besten den Vollbildmodus mit einem Klick unten rechts und blĂ€ttern Sie sich mal durch die Seiten. Wir haben das Projekt hier prominent platziert und ihm reichlich Raum gegeben.

Vorgefertigte Layouts machen den Start leichter.

Vorgefertigte Layouts machen den Start leichter.

Als Ausgangspunkt kann eines der vorgefertigten Layouts dienen – oder aber man beginnt das eigene Projekt mit einer leeren Seite, „from the scratch“.

Im Prinzip besteht ein Genially aus aneinandergereihten Slides. In meinem Beispiel hat jeder Wahlkreis eine eigene Seite. Die Inhalte – Hintergrund, Texte, Bilder, Buttons – sind in Ebenen angeordnet, wie man sie beispielsweise aus Photoshop kennt.

Offen fĂŒr externe Inhalte

Jedes Element lĂ€sst sich mit InteraktivitĂ€t versehen. In diesem Fall öffnet sich bei einem Klick auf die Fotos und den Button jeweils ein neues Fenster, mit portrĂ€tierenden Texten und einer Balkengrafik. An dieser Stelle habe ich die Möglichkeit genutzt, externe Inhalte einzubinden: Die Grafiken sind mit Datawrapper erstellt und via iFrame im Genially eingebettet. Hier zeigt das Tool eine seiner großen StĂ€rken: Es ist offen fĂŒr viele Arten externer Inhalte, erleichtert das Einbetten aus gĂ€ngigen Video- und Audioplattformen, Social-KanĂ€len, Diagramm-Tools, von Dateien aus Google Drive und Karten aus Google Maps und sogar von Artikeln etwa aus Wikipedia. Aber auch so ziemlich alles andere lĂ€sst sich via Code einbetten.

Die Embed-Funktion in Genially bietet viele Optionen.

Die Embed-Funktion in Genially bietet viele Optionen.

Mit Animationen war ich zurĂŒckhaltend, das Genially sollte kein Klickibunti werden. Ich habe mich im wesentlichen auf die kreisrunden Kandidatenfotos auf jedem Slide beschrĂ€nkt: Sie zoomen etwas grĂ¶ĂŸer, wenn man mit der Maus darĂŒberfĂ€hrt – als Hinweis, dass der Klick darauf zu weiteren Inhalten fĂŒhrt.

Alle Wahlkreise sind ĂŒber eine Karte auf dem Startbildschirm ansteuerbar. Zu diesem Zweck habe ich die Wahlkreise auf der Karte (erstellt mit Carto) mit transparenten FlĂ€chen versehen und mit den jeweiligen Wahlkreis-Slides verlinkt. Alternativ kann man, wie oben erwĂ€hnt, auch durch die Slides blĂ€ttern.

Genially bietet die Möglichkeit, jedes Element oder auch die ganze Seite zu animieren.

Genially bietet die Möglichkeit, jedes Element oder auch die ganze Seite zu animieren.

Pro-Funktionen fĂŒr Einzelprojekt freischalten

Alle wesentlichen FunktionalitĂ€ten sind in der kostenlosen Version von Genially verfĂŒgbar. Das fertige Projekt lĂ€sst sich auch ohne Premium-Account einbetten, verlinken, ĂŒber Socials verbreiten oder per Mail versenden. Zahlende Kunden können das Projekt herunterladen und auf dem eigenen Server speichern, den „Genially“-Schriftzug verschwinden lassen oder haben Einblick in Zugriffszahlen. Die Premium-Modelle sind gestaffelt, mit monatlichen Abo-Preisen zwischen 10 fĂŒr den Pro- bis zu 100 Euro fĂŒr den Master-Account. FĂŒr gelegentliche Nutzer gibt es eine coole Alternative: Einige Pro-FunktionalitĂ€ten lassen sich fĂŒr ein paar Euro auch fĂŒr ein Einzelprojekt freischalten.

Quiz zur Bundestagswahl: Die Wahlprogramme im Wortwolken-Vergleich

In elf Wochen ist Bundestagswahl – und der Satz „Ich weiß nicht, was ich wĂ€hlen soll“ fĂ€llt in meiner Filterblase diesmal noch öfter als sonst. Die Ereignisse des vergangenen Jahres scheinen viele, die sich bislang klar einem Lager zugehörig fĂŒhlten, verunsichert zu haben. Eine unionsgefĂŒhrte Bundesregierung hat die Wehrpflicht abgeschafft, den zweiten Atomausstieg initiiert, das Dosenpfand eingefĂŒhrt. Auf dem Höhepunkt der Fluchtkrise bleibt ausgerechnet Merkel als Einzige besonnen (um dann knallhart die Asylgesetze zu verschĂ€rfen). Und am Ende macht die Kanzlerin auch noch den Weg fĂŒr die Ehe fĂŒr alle frei (um dann dagegen zu stimmen): Das soll die AnhĂ€nger beider Lager mal nicht verunsichern!

Es hilft nichts: Wir werden uns die MĂŒhe machen mĂŒssen, Wahlprogramme zu lesen.

Einen allerersten (und mitunter unerwarteten) Eindruck gibt die Wortwolke: Welche Begriffe kommen im Programm besonders hĂ€ufig vor, sind also den Parteien offenkundig wichtig? Die quantitative Auswertung gibt darĂŒber Auskunft. BerĂŒcksichtigt sind jene Parteien, die (voraussichtlich, seufz) in den Bundestag einziehen werden. Weiterlesen →