Login
Login-Name Passwort


 
Newsletter
Werbung

Do, 6. März 2014, 15:00

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.

Kommentare (Insgesamt: 10 || Alle anzeigen || Kommentieren )
Re: Pik 7 von Peter Kröner (Jochen Schnelle, Di, 11. März 2014)
Eigentlich unnötig (RalfS, Mo, 10. März 2014)
Pik 7 von Peter Kröner (inta, Fr, 7. März 2014)
Re[3]: PDF Export (Jochen Schnelle, Fr, 7. März 2014)
Re[2]: PDF Export (krake, Fr, 7. März 2014)
Pro-Linux
Pro-Linux @Facebook
Neue Nachrichten
Werbung