© Scott Griessel, 123RF.com
Aus schlichtem HTML- oder Markdown-Code erzeugt Reveal.js stilvoll animierte Präsentationen für den Browser. Die Javascript-Software zeichnet Codelistings farbig aus und kann sogar eine PDF-Version exportieren. Daneben integriert sie sich bestens in den Org-Modus von Emacs.
Präsentationen in HTML 5 erfordern lediglich einen modernen Browser zum Vorführen. Daneben kann man sie leicht im Web archivieren. Wer dafür zur freien Javascript-Bibliothek Reveal.js [1] greift, muss sich nicht vor Libre Office Impress & Co. verstecken: Auf visuelle Effekte wie Überblendungen, auf schrittweisen Seitenaufbau oder Code-Highlighting braucht er nicht zu verzichten. Die Homepage der Software demonstriert einen großen Teil der Features. Aktuell ist der MIT-lizenzierte Code in Version 2.5 erhältlich [2].
Onlinedienst
Am bequemsten kommt der Anwender zu einer Reveal.js-Präsentation, indem er Slid.es [3] benutzt, die Präsentationswebsite, die der Reveal.js-Autor Hakim El Hattab auf seiner Technologie aufgebaut hat. Sie bietet einen Wysiwyg-Editor im Webbrowser (Abbildung 1), der alle grundlegenden Funktionen und Formatierungen beherrscht. Für knifflige Fälle lässt er sich in den Quelltext-Modus umschalten. Damit erstellte Präsentationen kann man exportieren und lokal speichern oder weiterverwenden.
Abbildung 1: Der Onlinedienst Slid.es biet einen GUI-Editor für Reveal.js-Präsentationen.
Wer Slid.es kostenlos nutzt, stellt allerdings alle seine Präsentationen offen in die Online-Galerie. Für einen Mitgliedsbeitrag von 7 US-Dollar im Monat gibt es aber auch vertraulichen Speicher für die Slides sowie einige erweiterte Features.
Lokale Slides
Dank Open-Source-Lizenz kann der Anwender Reveal.js aber auch herunterladen und lokal damit arbeiten. Das erlaubt ihm beispielsweise, den Texteditor und das Versionskontrollsystem seiner Wahl für die Vortragsfolien einzusetzen. Der erste Schritt besteht im Download des Quellcodes, entweder als Tarball oder als Git-Klon. Im entstehenden Verzeichnis »reveal.js/« befindet sich die Demo-Präsentation als Datei »index.html« , sie eignet sich als Grundstock für die eigene Präsentation, daneben ist auch die Readme-Datei sehr informativ.
Für einen ersten Versuch kopiert der Anwender »index.html« in eine HTML-Datei im selben Verzeichnis. Wer mehrere Präsentationen mit der Software erzeugen will, kann das Verzeichnis »reveal.js« an einen festen Ort in seinem Home kopieren und von dort einbinden, indem er die Pfade im »<head>« -Element sowie im »<script>« -Block am Ende der HTML-Datei anpasst.
Im HTML-Header lässt sich auch eines der mitgelieferten Themes auswählen, die Hintergrund, Schrift und Farben bestimmen. Dazu ist folgende Zeile mit dem Namen des Theme zu befüllen:
<link rel="stylesheet" href="http://css/theme/<i%20class="replaceable">Theme.css" id="theme">
Die Namen lauten beispielsweise »default« , »night« oder »beige« , die vollständige Liste findet sich im Readme.
Alles HTML
In der HTML-Datei sind alle Folien von einem Div-Element der Klasse »reveal« und einem der Klasse »slides« eingeschlossen (Listing 1). Alles, was darin als Element »<section>« gekennzeichnet ist, zeigt Reveal.js als einzelne Folie an. Zwischen den Slides wechselt man per Maus oder Pfeiltasten. Die Escape-Taste blendet einen Überblick (Abbildung 2) ein.
Listing 1
Folien
01 <div class="reveal"> 02 <div class="slides"> 03 <section>Einzelne horizontale Folie</section> 04 <section> 05 <section>Vertikale Folie 1</section> 06 <section>Vertikale Folie 2</section> 07 <section>Vertikale Folie 3</section> 08 </section> 09 <section>Weitere horizontale Folie</section> 10 </div> 11 </div>
Abbildung 2: Eine einfache Präsentation im Überblick mit horizontalen und vertikalen Folien.
In den Zeilen 4 bis 8 in Listing 1 stehen Sections, die wiederum in einer anderen Section enthalten sind. So entstehen Folien zu Unterpunkten, die Reveal.js nicht horizontal nacheinander einblendet, sondern von oben nach unten, wie auch die Übersicht in der Abbildung zeigt. Innerhalb einer Section stehen die üblichen HTML-Tags zur Verfügung. Die Überschrift erster Ordnung ist schon für den Titel der Präsentation vergeben, Folientitel stehen deshalb in »<h2>« . Textabschnitte markiert man mit »<p>« , Bilder als »<img>« -Tag mit relativer Pfadangabe zur Bilddatei, daneben gibt es Listen mit und ohne Nummerierung sowie Blockzitate.
Das Video-Element aus HTML 5 integriert sogar Filmclips, sofern der Browser den passenden Codec besitzt. Links können nach außen ins Web oder innerhalb der Präsentation auf eine Sprungmarke verweisen:
<a href="#/2">Link zu Folie 2</a>
Wer Punkte einer Aufzählung nacheinander einblenden, animieren oder auf Kommando farbig hervorheben will (Abbildung 3), nutzt so genannte Fragments. Listing 2 zeigt eine Folie mit sequenziell eingeblendeten Stichpunkten sowie eine mit verschiedenen Texteffekten.
Listing 2
Fragments
01 <section> 02 <ol> 03 <li data-fragment-index="1" class="fragment">Eins</li> 04 <li data-fragment-index="2" class="fragment">zwei</li> 05 <li data-fragment-index="3" class="fragment">drei!</li> 06 </ol> 07 </section> 08 <section> 09 <p class="fragment grow">wachsen</p> 10 <p class="fragment shrink">schrumpfen</p> 11 <p class="fragment roll-in">ausklappen</p> 12 <p class="fragment fade-in">einblenden</p> 13 <p class="fragment highlight-red">rot markieren</p> 14 <p class="fragment highlight-green">grün markieren</p> 15 <p class="fragment highlight-blue">blau markieren</p> 16 </section>
Abbildung 3: Die so genannten Fragments können Text ein- oder ausblenden, animieren und markieren.
Konfiguration
Einstellungen für die ganze Präsentation lassen sich im Javascript-Bereich am Ende der HTML-Datei festlegen. Die dortige Methode »Reveal.initialize()« nimmt Schlüssel-Wert-Paare entgegen.
Wer sich mit IT beschäftigt, braucht häufig Codelistings in seinen Präsentationen. Reveal.js setzt die Bibliothek Highlight.js [4] ein, die farbiges Syntax-Highlighting für zahlreiche Programmier- und Markupsprachen in den Browser zaubert (Abbildung 4). Wie Listing 3 demonstriert, ist der zitierte Quelltext von Pre- und Code-Elementen eingeklammert. Im »class« -Attribut nimmt Highlight.js die Programmiersprache entgegen, »data-trim« entfernt die überschüssigen Whitespaces.
Abbildung 4: Listings erhalten dank Highlight.js farbige Hervorhebung.
Listing 3
Codelisting
01 <pre>
02 <code class="ruby" data-trim="">
03 #!/usr/bin/env ruby
04
05 File.open('/etc/hosts', 'a') do |file|
06 50000.times {|x| file.puts '127.0.0.1 host-fubar'}
07 50000.times {|x| file.puts '::1 host-fubar'}
08 end
09 </code>
10 </pre>
Markdown
Wer die oben beschriebene Methode für lästige HTML-Bastelei hält, darf sich über eine Alternative freuen. Reveal.js ermöglicht es ihm nämlich, die Inhalte auch im kurzen und prägnanten Plaintext-Format Markdown [5] zu schreiben. Listing 4 zeigt eine Folie mit Überschrift, Text, Link, Aufzählung und einem Listing. Anfang und Ende des Codes sind mit drei Backticks markiert, »javascript« stellt die Sprache ein.
Listing 4
Markdown
01 <section data-markdown>
02 <script type="text/template">
03 ## Eine Folie mit Markdown
04
05 Hier steht Text mit einem [Link](http://linux-magazin.de).
06 - eine Aufzählung
07
08 - zählt weiter
09
10 ```javascript
11 // Diaschau ausschalten
12 Reveal.configure({ autoSlide: 0 });
13
14 // Dia alle 6s wechseln
15 Reveal.configure({ autoSlide: 6000 });
16 ```
17 </script>
18 </section>
In eine ähnliche Kerbe wie Markdown schlägt Orgmode [6]. Der Emacs-Modus verwendet ebenfalls spartanisches Markup und erzeugt daraus To-do-Listen, Aufsätze und Präsentationen. Letztere kann Emacs in sehr einfaches HTML verwandeln oder via Latex nach PDF exportieren.
Glücklicherweise gibt es mit Org-reveal [7] eine Erweiterung, die die Brücke vom kargen Orgmode-Text zu den eindrucksvollen Reveal.js-Shows schlägt. Damit das Zusammenspiel des Exporters mit Emacs klappt, ist aber eine Orgmode-Version ab 8.0 nötig. Den aktuellen Versionsstand fragt der Benutzer mit dem Emacs-Kommando »org-version« ab.
Die aktuelle Release lässt sich von der Orgmode-Homepage als Tarball herunterladen oder per Git klonen. Mit den Befehlen »make; sudo make install« ist sie systemweit installiert. Im Versuch der Redaktion spielten beispielsweise Emacs 24.3 und Orgmode 8.2 problemlos zusammen.
Org-reveal lässt sich ebenfalls per Git klonen. Das entstehende Verzeichnis enthält die Datei »ox-reveal.el« , die man ins Installationsverzeichnis von Orgmode packt. Die Editor-Konfigurationsdatei »~/.emacs« erhält anschließend die zusätzliche Zeile:
(require 'ox-reveal)
Daneben legt die folgende Angabe den Pfad zur lokalen Installation von Reveal.js fest:
(setq org-reveal-root "/Verzeichnis/reveal.js")
Nach einem Emacs-Neustart kennt Orgmode eine Tastenkombination, um Dateien als Reveal.js-Präsentationen zu exportieren: Mit [Strg]+[C],[Strg]+[E] ruft man die Exportfunktion auf, dort wählt der zweimalige Aufruf von [Shift]+[R] das HTML-5-Format aus.
Orgmode im Detail
Listing 5 zeigt, wie der Quelltext einer solchen Präsentation in Orgmode aussieht. Nach allgemeinen Meta-Informationen (Zeilen 1 bis 4) folgen Einstellungen für Reveal.js, die zum Großteil die gleichen Namen tragen wie im Javascript. Die Optionen »toc:nil reveal_overview:nil« verbergen das Inhaltsverzeichnis und die Übersicht, »num:nil« produziert Überschriften ohne Nummerierung, und dank »reveal_keyboard:t« kann der Vortragende die Folien per Tastatur wechseln, etwa mit den Pfeiltasten. Dann folgen die Angaben für die Animation beim Folienwechsel und das Theme.
Listing 5
Orgmode
01 # -*- coding: utf-8 -*-
02 #+TITLE: Design Patterns in Ruby
03 #+AUTHOR: Mathias Huber
04 #+Email: mhuber@linux-magazin.de
05
06 #+OPTIONS: toc:nil reveal_overview:nil
07 #+OPTIONS: num:nil
08 #+OPTIONS: reveal_keyboard:t
09 #+REVEAL_TRANS: linear
10 #+REVEAL_THEME: sky
11 #+REVEAL_HLEVEL: 2
12
13 * Design Patterns
14 ** Principles
15 - Do not reinvent the wheel
16 - Names for prepacked solutions
17 - 23 patterns
18 - middle ground
19 ** Applying Design Patterns to Ruby
20 *** Internal Iterator
21 #+BEGIN_SRC ruby
22 a = [1,2,3,4]
23 a.each {|x| puts x}
24 #+END_SRC
25 *** External Iterator
26 [...]
Der Inhalt der Folien selbst ist in Orgmode durch Sternchen am Beginn einer Zeile gekennzeichnet: »*« steht für die erste Gliederungsebene, »**« für die zweite und so weiter. Stichpunkte innerhalb einer Folie erhalten einfach ein Minuszeichen am Zeilenanfang. Weiteres findet sich im sehr ausführlichen Handbuch auf der Orgmode-Website. Die Einstellung »REVEAL_HLEVEL« (Zeile 11) teilt dem Exporter mit, ab welcher Gliederungsebene er vertikal wechselnde Folien erzeugen soll, hier unterhalb der zweiten, beispielsweise beim Punkt »*** Internal Iterator« .
Die Zeilen 21 bis 24 in Listing 5 demonstrieren, wie Orgmode Quellcode einbettet und dabei die Programmiersprache angibt. Org-reveal verwendet für das farbige Syntax-Highlighting übrigens nicht Highlight.js, sondern die Emacs-Erweiterung Htmlize.el [8]. Unter Debian und Ubuntu steht sie im Paket »emacs-goodies« zur Verfügung, notfalls lässt sie sich einfach als Datei unter »~/.emacs.d« installieren. Sie verwandelt auf Wunsch alles in eingefärbtes HTML, wofür Emacs einen Highlighting-Modus besitzt.
Zum Publizieren kann der Nutzer die HTML-Datei auf einen Webserver hochladen. Dabei darf er nicht vergessen, auch die verwendeten Bilddateien sowie das Reveal.js-Verzeichnis im richtigen Pfad bereitzustellen. Handlicher finden viele eine einzelne PDF-Datei. Ansehnliche PDFs lassen sich derzeit allerdings nur mit Googles Browser Chrome erzeugen. Dazu hängt der Anwender den Parameter »?print-pdf« an die URL der Präsentation an, egal ob sich diese im Web oder auf der lokalen Platte befindet. Im Druck-Dialog wählt er das Querformat, »Als PDF-Datei speichern« und »Keine Ränder« aus. So entsteht ein PDF mit einer Seite pro Folie (Abbildung 5).
Abbildung 5: Google Chrome kann eine druckbare PDF-Version der Webpräsentation mit einer Seite pro Folie erzeugen.
Reveal.js bietet noch viele weitere Funktionen und Einstellmöglichkeiten, es lohnt sich, die Dokumentation zu studieren. So lassen sich die Tastaturkürzel zum Navigieren ändern, etwa um ein Presenter-Eingabegerät einzurichten. Das Setzen des Javascript-Werts »autoSlide« wertet die Präsentation zur automatischen Diaschau für Messestände oder Schaufenster auf.
Wer sich für die Vollinstallation von Reveal.js entscheidet, erhält einen lokalen Webserver und kann einzelne Markdown-Dateien zur Laufzeit einbinden. Mit Hilfe des Javascript-API lässt sich das Framework außerdem mit eigenem Code erweitern.
Ausblick und Alternative
Eine Suche auf Github nach »reveal.js« fördert viele Projekte zu Tage, die auf der Software aufsetzen. Dazu gehören etwa ein GUI-Editor, die Einbindung in Owncloud und eine Gestensteuerung per Webcam. Wem Reveal.js dagegen schon zu viele Features hat, der kann sich Remark.js [9] ansehen. Es verwendet Markdown, ist schlichter und daher leichter zu erlernen, hat ansonsten aber vieles mit Reveal gemeinsam.
Infos
- Reveal.js-Homepage: http://lab.hakim.se/reveal-js
- Reveal.js-Quelltext: https://github.com/hakimel/reveal.js
- Slid.es: http://slid.es
- Highlight.js: http://highlightjs.org
- Markdown: http://daringfireball.net/projects/markdown/
- Emacs Orgmode: http://orgmode.org
- Org-reveal: https://github.com/yjwen/org-reveal/
- Htmlize.el: http://fly.srk.fer.hr/~hniksic/emacs/htmlize.el.cgi
- Remark.js: https://github.com/gnab/remark
