StoryMaps

Das Programm StoryMap JS ist das wohl ausgereifteste Open-Source-Tool der Knight Lab Foundation. Dank der Gigapixel-Option taucht das Programm tief in Panorama-Welten ein – verlangt seinem Nutzer aber auch einiges ab.

Innovativität: Einstellungsoptionen: Nutzerfreundlichkeit: Design:

Meine Meinung

StoryMap JS hat ein gnadenlos gutes Design. Es ist innovativ, intuitiv und eines der besten Programme, die ich bisher getestet habe!

Unendliche Weiten – so in etwa könnte man die Größe des Internets beschreiben. Weniger unendlich sind jedoch die Bildschirme von Tablet und Smartphone.

Fakten & Daten

Preis
Sprache
Lernzeit
Arbeitszeit
Ausspielart
Support

|
|
|
|
|
|

kostenlos
englisch
2 Stunden
1 Stunde
URL, Embed, Twitter, Facebook
Help


zum Tool

Klein bis mickrig trifft es da schon eher. Geschichten mit großen Panoramabildern sehen auf Miniformaten schlichtweg mini aus. StoryMap JS setzt hier an. Das Programm verknüpft einbettbare Medien entlang einer Wisch- bzw. Klick-Strecke mit zoombaren Karten oder Panorama-Aufnahmen. Das sieht ziemlich gut aus – und öffnet eine noch kaum erschlossene Art des bildfokussierten Geschichtenerzählens.

Das Programm ist voll responsiv – passt sich also der Größe des Bildschirms an. Zwar kann auch StoryMap JS nicht das Display deines Smartphones magisch erweitern, doch Panoramabilder können sowohl in der Gesamtansicht als auch in Detailausschnitten dargestellt werden.

Anschauungsbeispiel

Anschauungsbeispiel StorymapsAnschauungsbeispiel Storymaps

Tolles Tool

StoryMap JS gibt es in zwei unterschiedlichen Varianten. Die Simplere bildet auf der linken bzw. bei Smartphone-Usern oberen Hälfte eine Karte ab. Ein sehr gelungenes Beispiel findest du hier. Diese Karte ist in ihrem Layout vorgegeben und kann nur über Drittanbieter wie Mapbox. Wie das funktioniert, erklärt eine Schritt-für-Schritt-Anleitung in der Bildergalerie. Die weitaus komplexere ist die Gigapixel-Variante – dafür ist sie aber auch die weitaus grandiosere. Hier kann anstelle der Karte ein beliebiges Bild eingefügt werden. Egal ob es sich um eine gezeichnete Karte wie im Beispiel oben handelt oder um eine riesige Fotografie der Freiheitsstatue.

 

Variante 1: die Karten-Option

Für die Karten-Variante rufst du die Homepage des Programms auf und meldest dich mit deinem Google Account an. Das ist nötig, damit das Programm später erkennt, welche StoryMap-Projekte dir gehören und diese bei einem späteren Besuch wieder für dich bereit stehen. Dann klickst du auf "Map". Du gelangst in ein übersichtliches Dashboard, in dem du die einzelnen Slides bearbeiten, Medien hochladen und selbst designte Karten einfügen kannst. Eine Schritt-für-Schritt-Anleitung findest du in der Bildergalerie.

Am Ende publizierst du dein Werk und fügst es über den Embed-Code in deine Webseite ein. Das war es bereits. StoryMap JS macht eigentlich keine Zicken. Es ist ein stabiles, gut durchdachtes und mächtiges Programm. Wenn du damit nun schon zufrieden bist, solltest du hier aufhören zu lesen. Denn ab jetzt wird es komplizierter. Wenngleich die Belohnung auch höher ist.

Variante 2: die Gigapixel-Option

Rein zum Verständnis: Gigapixel bezieht sich auf die Anzahl der Bildpunkte, die ein Bild hat und meint, dass als Grundlage für den Zoomeffekt der StoryMap ein Bild mit sehr, sehr hoher Auflösung benutzt wird. Panoramabilder mit beispielsweise 16000x4000 Pixel sind kein Problem. Doch um so ein Bild in StoryMap einzufügen, musst du es in kleine Kacheln zerschneiden, damit deine Webseite später nicht minutenlang laden muss. Das aber ist kompliziert. StoryMap bietet eine Anleitung, die aber bestenfalls als äußerst knapp bis kaum vorhanden bezeichnet werden kann. Theoretisch ist dies mit Photoshop und Gimp über die Zoomify Export Funktion bzw. das Files-to-Tiles-Plugin für Gimp möglich. Allerdings habe ich bei Gimp stundenlang mein Möglichstes getan – mit ernüchterndem Erfolg. Und Photoshop muss man sich hingegen erst einmal leisten können, vom Beherrschen ganz zu schweigen.

Deswegen möchte ich an dieser Stelle ausdrücklich das Programm Zoomify Express empfehlen. Programm und Webseite versprühen den Charme des Webdesigns von 1998 und die Art und Weise, wie man das Programm schließlich downloadet, ist ziemlich kurios. Doch nicht alles, was Gold ist, glänzt. Ist das Programm erst einmal entpackt und gestartet, vollführt es den komplizierten Schritt des Kachelschneidens, korrekten Bezeichnens und Abspeicherns so simpel, dass es eine digitale Umarmung verdient hat. Es fallen für Zoomify Express einmalig 19 US-Dollar an. Wer StoryMap JS öfters nutzen will, sollte diese Kröten guten Gewissens investieren. Es spart Stunden der Verzweiflung.

Schreddern im Zoomify-Converter

Hast du dein Panoramabild im Zoomify-Converter geschreddert, speichert dir das Programm einen Ordner mit korrekter Tiles-Unterordner-Struktur an den Speicherort deines ursprünglichen Bildes. Diesen Ordner musst du nun auf einen Server hochladen, damit später deine Leser beim Benutzen der StoryMap darauf zugreifen können. Es bieten sich hierfür die Dienste Dropbox und Google Drive an, wovon wir letzteres empfehlen möchten.

Dropbox ist nicht nur deutlich komplizierter – es hat bei unseren Versuchen auch schlicht nicht funktioniert. Hier bietet Ihnen der Support von StoryMap JS eine kleine Hilfestellung: Lade den kompletten Tiles-Ordner in deinen Drive-Ordner. Publiziere ihn frei im Netz und speichere dir den Link des Ordners in der Zwischenablage. Eine detaillierte Anleitung findest du in der obigen Bildergalerie.

Die Gigapixel-Karte

Nun ist der schwerste Teil geschafft. Wirklich. Was jetzt kommt, kennst du im Grunde schon aus der Map-Option weiter oben.

Tricks für Pros
Wie so oft, ist das Textfeld deiner Slides HTML-fähig. Du kannst also ein paar individuelle Einstellungen vornehmen und deinen Text beispielsweise mit Inline-CSS kursiv stellen, mit Links versehen oder die Schriftgröße ändern. Auch iFrame-Befehle von externen Diensten sind möglich.

Rufe die Homepage des Programms auf und entscheide dich dieses Mal für Gigapixel. Du wirst gebeten, den Link aus deinem Google Drive Account einzufügen und die korrekte Breite und Höhe Ihres Ursprungsbildes anzugeben. Die Daten kannst du in Photoshop, Gimp oder simpleren Bildbearbeitungsprogrammen erfahren. Das überaus empfehlenswerte Programm IrfanView gibt dir beispielsweise die Daten über die Tastenkombination "Strg + R". Danach erfolgt das bereits aus der Map-Option bekannte Prozedere.

Slides wollen mit Medien, Hintergrundbildern und Texten beglückt werden. Zudem musst du die Zoomfokuspunkte und den Scrollgrad einstellen. Das ist aber alles keine Raketenwissenschaft und intuitiv erlernbar. Am Ende muss die StoryMap publiziert werden. Der Klick auf den "Share"-Button gibt dir die URL und den Embed-Code, den du an der gewünschten Stelle in deiner Webseite einpflegst. Fertig ist deine StoryMap-Story!

Pro

StoryMap JS ist ganz großes Kino. Obwohl sich der Aufbau der StoryMaps stets ähnelt, haben wir uns nicht an ihnen sattgesehen. Sie sind ungeheuer bildstark und das selbst auf kleinen Display-Formaten. Hat man erst einmal den schwierigen Lernprozess hinter sich gebracht und begriffen, wie das Programm funktioniert, schnurrt der Produktionszeitraum von anfänglich (bei uns) einem Tag auf rund eine Stunde zusammen. Die Schritte alleine dauern nicht lange. Es gibt nur diverse Stolpersteine, die für stundenlanges Friemeln sorgen können. Zudem ist StoryMap JS kaum bekannt. Nur sehr wenige US-Medien haben es je genutzt. In Deutschland ist uns noch keine Wisch-Geschichte über den Bildschirm gehuscht. Hier kann man echt noch Kollegen und Leser beeindrucken. Um es noch einmal auf den Punkt zu bringen: StoryMap JS – wir lieben es.

Kontra

StoryMap sollte ursprünglich ähnlich wie die anderen Knight Lab Programme TimeMapper und SoundCite simpel zu bedienen sein. Das ist grandios gescheitert. Obwohl wir schon ein bisschen Erfahrung mit ähnlichen Programmen vorweisen können, hat es fast zehn Stunden gedauert, um die erste Gigapixel-StoryMap zum Laufen zu bringen. Diese Lernzeit sollte mithilfe dieser Anleitung auf rund zwei Stunden zusammenschrumpfen. Trotzdem: StoryMap JS ist am Anfang höllisch kompliziert und verlangt ein enormes technisches Vorwissen.

Bleiwüsten abonnieren:

Fazit & Alternativen

StoryMap JS eignet sich für bildstarke Geschichten, zu denen du viel Zusatzmaterial in Form von Bildern, GIFs und Videos vorliegen hast.

coole Beispiele

Textlastige Geschichten solltest du woanders erzählen. Zudem könntest du das Wort "Map" in StoryMap getrost streichen. Über die Gigapixel-Option könntest du auch eine Rezension eines Gemäldes als packendes multimediales Ereignis erzählen. In den Beispielen findest du ein Exemplar dieser Idee. StoryMap JS eignet sich nicht für textlastige Geschichten. Ansonsten muss man das Thema eigentlich nur kreativ genug angehen, um es als StoryMap zu denken.

Mit seinen zahlreichen Funktionen und Gestaltungsmöglichkeiten ist StoryMap JS momentan alternativlos!