reveal.js: schicke webbasierende Präsentationen erstellen

Präsentationen gehören heutzutage bei Vorträgen zum guten Ton. Doch nicht immer muss es mit PowerPoint oder einer anderen Office-Software erstellt werden. Der Trend geht vermehrt zu HTML5, CSS3 und JavaScript. Damit kann man heute bereits sehr schicke und ansprechende Präsentationen auf die Beine stellen. Ich habe mir im Zuge eines Vortrags für die Berufsschule verschiedene dieser Systeme angeschaut. Bei reveal.js bin ich schließlich hängen geblieben und habe es für meine Präsentation zum Thema CSS verwendet. Das System ist einfach. Mit wenigen HTML- und CSS-Kenntnissen kommt man schon weit. Wem das nicht liegt, der greift zu der Webplattform slid.es. Einerseits wird einem dort das Hosting vollständig abgenommen und mit dem Quellcode braucht man sich auch nicht herumärgern. Wer das jedoch gerne tun möchte, sollte weiter lesen.

reveal.js installieren und konfigurieren

Die Basisfunktionen laufen im Grunde ohne jeglichen Webserver. Dazu benötigt ihr nur die letzte aktuelle reveal.js-Version. Entpacken und die index.html in einem Webbrowser, am besten Iron/Chrome oder Firefox, aufrufen. Für den vollen Support braucht ihr einen Webserver mit Node.js und Grunt. Eine Installationsanleitung gibt es auf GitHub. Nach erfolgreicher Installation schnappt ihr euch einen Quellcode-Editor eurer Wahl. In meinem Fall ist das natürlich Sublime Text 3. Es funktioniert aber natürlich auch jeder andere Editor. Öffnet die index.html. Entfernt den kompletten Inhalt von <div class="reveal"> bis zum Ende, einschließlich des Containers. Sucht nun nach Reveal.initialize({. Das sollte fast ganz unten stehen. In diesem Bereich können die Basiseinstellungen getroffen werden. Zum Beispiel: Präsentationsauflösung, Bedienung, Fortschrittsanzeige, Grunddarstellung, Animation und mehr. Eine Übersicht sämtlicher Konfigurationsmöglichkeiten findet ihr ebenso auf GitHub. Speichert anschließend einmal ab. Danach fügt ihr folgendes Snippet nach <body> ein.

<div class="reveal">
    <div class="slides">
        <section>Single Horizontal Slide</section>
        <section>
            <section>Vertical Slide 1</section>
            <section>Vertical Slide 2</section>
        </section>
    </div>
</div>

Der Quellcode-Schnipsel stellt eure Basis dar und verdeutlicht gleich, welche Folienmöglichkeiten ihr habt. Zum einen lassen sich Slides ganz normal einfügen, als auch schachteln. Sinnvoll ist das beispielsweise dann, wenn ihr zu einem Punkt mehrere Folien braucht. Dadurch bekommt alles eine ordentliche Struktur. Das Aussehen eurer Präsentation könnt ihr ebenfalls ändern. Entweder verwendet ihr eines der mitgelieferten Stylesheets oder passt euch ein Eigenes an. Im Ordner /CSS/Theme lagern die verschiedenen Layouts. Ändert folgende Zeile in der index.html entsprechend ab:

<link rel="stylesheet" href="css/theme/default.css" id="theme">

Fülle und gestalte deine erste Präsentation

Nachdem die Grundeinstellungen alle erledigt wurden, geht es an die eigentliche Arbeit — den Inhalt. Zur Auszeichnung und Gestaltung kommt selbstverständlich ganz normales HTML zum Einsatz. Auf zusätzliche Klassen oder IDs kann man zunächst verzichten. Steht der Inhalt so weit, dann könnt ihr euch der weiteren Dokumentation widmen. Dort erfahrt ihr, wie ihr beispielsweise verschiedene Übergänge zwischen den Folien macht oder den Hintergrund einer Folie ändert. Ebenso besteht die Möglichkeit auf einer Folie verschiedene Elemente der Reihe nach einzublenden, sogar mit unterschiedlichen Effekten. Natürlich könnt ihr auch Bilder, Videos und Quellcode-Beispiele sehr simple integrieren. Letzteres wird mittels highlight.js realisiert. Ich empfehle euch, falls ihr Snippets verwenden möchtet, die zusätzlichen Themes nachträglich zu speichern. Standardmäßig ist in reveal.js nur das Design zenburn vorhanden. Für Anmerkungen zu euren Folien könnt ihr Foliennotizen anlegen:

<aside class="notes">
        Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
</aside>

Im Präsentationsmodus, den ihr über das Drücken der Taste “S” aufrufen könnt, seht ihr die aktuelle Uhrzeit, die bereits verstrichene Zeit, eure aktuelle Folie und die darauf folgende. Damit seid ihr bestens gewappnet. Ohne Server läuft dieser Modus allerdings nur im Firefox sauber. Bei Iron war ich tatsächlich auf einen Webserver angewiesen. Das war nur ein kleiner Auszug aller Funktionen. Das Tool ermöglicht beispielsweise noch Markdown, PDF-Export, Multiplexing, Leap Motion und noch viel mehr. Wenn man sich im Vorfeld ein wenig mit reveal.js beschäftigt und die Dokumentation auf GitHub, als auch die Live Demo, aufmerksam verfolgt, kann man damit richtig zaubern.


reveal.js GUI

Habt ihr bereits Erfahrungen mit reveal.js gesammelt oder findet ihr meinen Artikel interessant? Dann lasst es mich in den Kommentaren wissen.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.