Präsentationen mit HTML und reveal.js
Klassischerweise werden Präsentationen und Vorträge mit Desktop-Programmen wie PowerPoint, Impress oder Keynote erstellt. Eine Alternative ist die Kombination aus HTML, CSS und JavaScript, die durch den Einsatz der JavaScript-Bibliothek reveal.js noch deutlich vereinfacht wird.
reveal.js stellt alles Notwendige bereit, um schnell und einfach eine HTML-basierte Präsentation zu erstellen. Dazu reichen auch rudimentäre HTML-Kenntnisse, sofern man keine (größeren) individuellen Anpassungen vornehmen möchte.
Installation
Um reveal.js zu nutzen, lädt man sich zuerst die aktuelle, stabile Version von der Download-Seite herunter und entpackt sie in ein beliebiges Verzeichnis. Danach ist die Bibliothek einsatzbereit. Wer testen möchte, ob alles auch wirklich funktioniert, der ruft die Datei index.html auf, die sich in dem entpackten Verzeichnis befindet.
Grundgerüst
Das minimale Grundgerüst einer Präsentation, welche aus nur zwei Folien besteht, sieht mit reveal.js wie folgt aus:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Minimale reveal.js Präsentation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1>Eine Präsentation mit reveal.js</h1>
</section>
<section>
<p>Hier ist die zweite Folie</p>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default' // default/cube/page/concave/zoom/linear/fade/none
});
</script>
</body>
</html>
Es werden die zwei benötigten Stylesheets geladen, die beiden JavaScript-Bibliotheken und dann, im letzten <script>-Abschnitt, die grundlegende Konfiguration vorgenommen.
Die eigentliche Präsentation, also die Folien, stehen zwischen den beiden HTML-Tags <div class="reveal"> und <div class="slides">. Jede Folie wird dabei von einem <section>-Tag umschlossen.
