31 VIEWS

Großartige Präsentationen als Code mit reveal.js

02.04.2021

Tolle Präsentationen trotz wenig manuellem Styling. Volle Kontrolle und Automatisierung, dynamische Codelistings, versionierbar… das alles geht kostenlos mit reveal.js!

 

revealjs
Quelle: https://revealjs.com/

Vor einiger Zeit bin ich über das HTML-Präsentationsframework reveal.js gestolpert. Nun konnte ich es endlich mal anlässlich zweier anstehender Schulungen mit umfangreichen Präsentationen ausprobieren. Mein Fazit: Genial, es macht richtig Spaß mit reveal.js-Präsentationen zu erstellen! Klar ein paar wenige Dinge gehen natürlich in Powerpoint besser. Aber dafür kann Powerpoint vieles anderes nicht. Vor allem bei Codelistings kann reveal.js punkten.

Aber wie erstellt man nun eine Präsentation mit reveal.js?

Ganz einfach mit folgenden wenigen Schritten:

Fertig ist das Grundgerüst.

Will man den vollen Funktionsumfang nutzen startet man die Präsi mit “npm start” in einem lokalen Webserver:

Dann http://localhost:8000 im Browser öffnen.

Screenshot reveal.js
Quelle: Screenshot reveal.js

Demo

Es ist auch gleich eine Demo-Präsentationen mit dabei:
http://localhost:8000/demo.html

Screenshot reveal.js
Quelle: Screenshot reveal.js
Screenshot reveal.js
Quelle: Screenshot reveal.js

Im Unterverzeichnis examples finden sich etliche weitere, thematisch nach Features sortierte Demos z.B. http://localhost:8000/examples/math.html.

Mit Hilfe dieser Beispielen und der guten Doku hat man schnell tolle eigene Folien erstellt.

Ein paar Highlights

  • Seiten können in HTML oder Markdown geschrieben werden
    (Tipp: Das HTML-Coden geht sehr schnell von der Hand, wenn man das in Visual Studio Code integrierte Emmet nutzt).
  • Codelistings mit automatischem Syntaxhighlighting, Hervorhebung bestimmter Zeilen… auch sequentiell nacheinander inklusive automatischem Scrollen, wenn die hervorzuhebende Zeile außerhalb des sichtbaren Bereichs liegt -> Super einfach!
  • Die Veränderung zwischen zwei aufeinanderfolgenden Codelistings mit einem einzigen Schlüsselwort automatisch animieren. So kann man Einfügungen / Veränderungen schön visualisieren.
  • Auto-Animationen gibt’s nicht nur für Code, sondern auch für andere Elemente.
  • Fragments erlauben es auf einer Folie Elemente nach und nach bei Klick ein/auszublenden (im einfachsten Fall nur CSS-Klasse “fragments” hinzufügen).
  • Versionierbar mit Versionskontrollsystemen wie git
  • Folien / Elemente können per CSS einfach (um)gestylt oder auch ausgeblendet werden
  • Ein vorhandenes Theme lässt sich leicht an eigene Bedürfnisse anpassen (SASS) z.B. um Unternehmensfarben zu verwenden oder mit CSS häufig genutztes formatieren (z.B. automatisch aus <span class=”warnsign”></span> ein Warnsymbolgrafik erzeugen…)
  • Klassen für bestimmte Dinge wie z.B. Quellangaben definieren und dann mal schnell in der ganzen Präsentation ändern
  • Folien untereinander verlinken (es empfiehlt sich jeder Folie eine ID zu vergeben)
  • vertikale Folien
  • und vieles mehr, siehe Webseite und Demos!

Außerdem gibt es noch ein paar coole Tools / Navigationselemente. Dazu gehören unter anderem:

Vogelperspektive <Esc>

Screenshot reveal.js
Quelle: Screenshot reveal.js

Wie man sieht kann revealjs auch vertikale Folien, so lässt sich die Präsenation schön in Kapitel aufteilen.

Speaker view <s> (zeigt auch nächste Folie bzw. als nächstes kommendes Fragment; Notizen-Feld ist genauso einfach wie die Folie selbst definiert und formatiert; Browserzoom funktioniert in dem Speaker-Fenster)

Screenshot QR-Code

Suche <Strg> + <Umschalt> + <F>

Screenshot reveal.js
Quelle: Screenshot reveal.js

Automatisierung

Mit ein wenig JavaScript lassen sich noch eine ganze Menge andere toller Sachen bewerkstelligen.
Wie wäre es z.B. aus bestimmten Links automatisch QR-Codes zu machen oder gar eine Visitenkarte automatisch als QR-Code darzustellen?

Geht auch ganz einfach mit JavaScript-Bibliotheken und wenigen Zeilen Code:

(dieses fügt die qrcode-Bibliothek als Dependency zum Projekt hinzu)

Nun noch eine Folie mit Platzhaltern für den QR-Code einfügen:

Und folgende wenige Scriptzeilen dazupacken (bitte nicht über schlechtes JavaScript schimpfen, ich bin kein Frontendler… funktionieren tut’s trotzdem):

Screenshot QR-Code

Das Ganze ist toll um für Live-Umfragen den Umfragelink als QR-Code bereitzustellen (z.B. DirectPoll, Mircosoft Forms, Google Forms,…).

Auf sehr ähnliche Weise lässt sich auch automatisch eine QR-Visitenkarte erzeugen:

Folie:

JavaScript-Code:

Ergebnis:

Screenshot QR-Code

So viel sieht-von-Haus-aus-gut-aus gepaart mit voller Kontrolle! Ich bin gespannt, was ich noch so alles entdecke in Zukunft. Einer der wenigen “Nachteile”: Wahrscheinlich verlerne ich in Zukunft mit Powerpoint umzugehen…

Zurück zur Übersicht

2 Kommentare zu “Großartige Präsentationen als Code mit reveal.js

  1. Hallo Stefan,

    ja, das ist möglich. Es gibt einen PDF-Export.
    Allerdings reicht nicht einfach im Browser auf Drucken zu klicken, sondern man muss vorher ?print-pdf and die URL anhängen.

    Detaillierte Anleitung unter:
    https://revealjs.com/pdf-export/

    Sehr cool ist (gerade entdeckt), dass die fragments auch im PDF funktionieren. Sollte es also Probleme mit der Präsentation geben, könnte man theoretisch auch direkt die PDF verwenden und würde nur wenig Unterschied feststellen.

    Viele Grüße
    Matthias

  2. Hallo Matthias, ist es denn auch möglich, die Präsentation als Dokument (z.B. PDF) herunterzuladen um sie an die Teilnehmer zu verteilen?

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*Pflichtfelder

*

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.