Reveal.JS für Storytelling und schicke Präsentationen

Veröffentlicht am 11.1.2019 von Nele Hirsch auf ebildungslabor.de

Zunächst gab es Powerpoint. Dann folgte vor einigen Jahren ein großer Hype um Prezi. Und inzwischen werden so schnell neue Präsentations-Tools entwickelt, dass man leicht den Überblick verliert. Alle Tools versprechen in der Regel, die Präsentation für die Zuschauenden noch ein bißchen cooler und für die Erstellenden noch ein bißchen einfacher in der Gestaltung zu machen. Inzwischen gibt es mit Beautiful.AI sogar ein erstes Tool, das einem die Präsentations-Erstellung dank künstlicher Intelligenz ganz abnehmen will … Die Schattenseite davon ist, dass man in der Regel die Hoheit über seine Inhalte verliert. Denn man stellt die Präsentationen auf der jeweiligen Plattform ein und präsentiert sie auch von dort (bzw. teils mit Unterstützung eines Offline-Modus). Eine Weiternutzung der Inhalte im Sinne von Open Educational Resources ist auf diese Weise aber nicht möglich. Und oft ist man auch mit recht hohen Nutzungsgebühren für das Tool konfrontiert.

Dem gegenüber stehen einige gute Alternativen, die ich in der letzten Zeit viel und gerne genutzt habe. Dazu gehört HackMD, eine Art kollaboratives Pad, das über einen integrierten Präsentationsmodus verfügt. Oder die Software H5P – hier speziell der Inhaltstyp ‘Course Presentation’. In beiden Fällen ist ein Download und eine Weiterbearbeitung einfach möglich. Beide Tools sind zudem Open Source und damit kostenfrei nutzbar.

Ich war auf der Suche nach einer weiteren Alternative, weil ich während der Vorbereitung einer Präsentation erstens den Wunsch der Teilnehmenden nach einem downloadbaren PDF der Präsentation erfüllen wollte (diesen Wunsch gibt es sehr, sehr häufig!) und zweitens selbst gerne einmal etwas Neues (insbesondere eine etwas coolere Gestaltung) ausprobieren wollte. Neu entdeckt habe ich in diesem Zusammenhang RevealJS. Im folgenden stelle ich Dir dieses Tool und seine Nutzung kurz vor.

Was ist Reveal.JS?

RevealJS ist ein kostenfreies Open Source Tool mit ziemlich vielen Möglichkeiten:

  • Coole Effekte und eine ‘fancy’ Gestaltung, z.B. Videos und Gifs als Hintergrund, zoomende oder kippende Übergänge, unterschiedliche Navigations-Effekte und vieles mehr.
  • Einfache Erstellung, Teilen und Weiternutzung (Die gestaltete Präsentation basiert auf HTML und CSS – und damit den Basis-Sprachen des Internets, die in jedem Browser les- und nutzbar sind).
  • Einige nette Zusatz-Effekte, die den Bedürfnissen zahlreicher Teilnehmenden entgegen gekommen. Unter anderem können sie sich die Präsentation auch als pdf exportieren und herunterladen, es lässt sich leicht zwischen Folien springen oder die Präsentation auf PAUSE schalten (dann wird die aktuelle Folie ausgeblendet).
  • Vielfältige Nutzungsmöglichkeiten: Geeignet ist das Tool auch für Storytelling-Webseiten, Tutorials, Berichte, Reportagen etc. (ähnlich wie Adobe Spark, aber eben Open Source). Erstellte Inhalte sind responsiv, können also nicht nur via Beamer präsentiert, sondern z.B. auch auf dem Tablet oder Smartphone angesehen werden.

Um das Live zu sehen, kannst Du Dir hier meine Beispiels-Präsentation ansehen und das hier ist eine Präsentation, die ich für einen Vortrag bei ver.di erstellt habe.

Wie nutze ich RevealJS?

Wer noch nie etwas in HTML geschrieben oder zumindest gelesen hat, für den kann die Nutzung von RevealJS zunächst etwas gewöhnungsbedürftig sein. Denn anstatt Texte, Bilder und weitere Inhalte per DragandDrop auszuwählen und die weiteren Funktionen wie Übergänge in den Einstellungen festzulegen, wird bei RevealJS die Präsentation in einem HTML-Dokument geschrieben. Das ist auch für Neulinge im Programmieren möglich, wenn man auf bereits fertige Präsentationen zurückgreift und diese für sich umgestaltet. Die Umwandlung in eine Präsentation funktioniert dann automatisch. Für den Einstieg reichen einige wenige Standardbefehle: section kündigt z.B. eine neue Folie an, mit data-transition wird der Übergang festgelegt, mit data-background der Hintergrund (hier wird einfach eine Farbe gewählt, ein Bild, ein Video oder ein Gif verlinkt.)

Die einfachste Plattform um Deine Präsentation online zu stellen (und auch um sie zu erstellen) ist GitHub. Du benötigst einen kostenfreien Account. Anschließend kopierst Du Dir meinen Ordner ‘Slides’ in Deinen Account. Du öffnest die index.html Datei und gestaltest sie Dir so um, wie Du das möchtest. Wenn Du die Präsentation im Browser zeigen möchtest, gehst Du auf Settings und aktivierst GitHubPages. Danach musst Du nur noch einige Minuten warten – und schon steht Deine Präsentation im Netz.

Hier siehst Du einen kommentierten Code und hier das Ergebnis: die daraus entstandene Beispielspräsentation. Im folgenden Screencast-Tutorial habe ich Dir die einzelnen Schritte noch einmal genau zum Ansehen und Nachmachen aufgezeichnet:

Alternativ lassen sich RevealJS Präsentationen auch in Markdown schreiben. Das ist noch einmal etwas einfacher als in HTML. In diesem Fall ähnelt das Tool dann sehr HackMD. Zur Erstellung und Veröffentlichung greifst Du dann am besten Du auf Glitch zurück: um Deine eigene Präsentation zu erstellen, remixt Du einfach das Beispielsprojekt. Eine weitere Alternative ist Deckdown. Hier sind die fancy Bild- und Video-Elemente nicht mehr vorhanden, aber es lässt sich einfacher als bei HackMD ein anderes Theme auswählen und die Übergänge sind schicker. Der Hauptunterschied ist aber, dass Du Deine Präsentation nicht online stellst, sondern einmalig zum Präsentieren in das Texteingabefeld kopierst und dann präsentierst. Ebenso könntest Du Deine Markdown-Datei teilen und jeder, der sie sich ansehen will, kopiert sie für sich erneut in Deckdown.

Wo liegt das besondere Potential von RevealJS?

Eine Nutzung und Verbreitung von RevealJS halte ich insbesondere in der Community für freie Bildungsmaterialien (Open Educational Resources, OER) für vielversprechend. Schließlich kann ich erstellte Präsentationen auf diese Art und Weise sehr einfach teilen.

Viel Spaß beim Ausprobieren!


Dieser Text von Nele Hirsch ist lizenziert unter einer Creative Commons Namensnennung 4.0 International Lizenz.