Javascript

Präsentationen mit Reveal.js: Besser als PowerPoint mit HTML5

16. Oktober 2012
von

Präsentationen mit PowerPoint sind nicht jedermanns Sache. Und wer eine Präsentation mit seinem Android-Tablet oder iPad halten möchte, hat mit PowerPoint ohnehin ein Problem und muss auf Apps von Drittanbietern zurückgreifen. Mit dem JavaScript-Framework Reveal.js lassen sich Präsentation als Website erstellen und im Browser starten – mit einigen nützlichen und interessanten Features.


Demo-Präsentation mit Reveal.js

Reveal.js besteht aus einer JavaScript-Datei, sowie zwei Stylesheets, wovon das eine eher allgemeine Styles und das andere das Standard-Theme enthält. Über das Theme-CSS wird das Aussehen von Text, Bildern und Links definiert. Das Stylesheet ist recht übersichtlich und kann einfach angepasst werden. Die Übergänge der einzelnen Folien werden per CSS-3D-Transitions animiert.

Folien per HTML5 auszeichnen

Die Auszeichnung der einzelnen Präsentationsfolien erfolgt mit HTML5-Elementen des Typs SECTION. Diesen übergeordnet stehen zwei Container, die dem Framework signalisieren, wo der Präsentationsteil innerhalb des HTML-Dokumentes beginnt:

1
2
3
4
5
6
7
8
9
10
<div class="reveal">
  div class="slides">
    <section>
      <p>Folie 1</p>
    </section>
    <section>
      <p>Folie 2</p>
    </section>
  </div>
</div>

Innerhalb einer Section kann beliebiger Inhalt hinterlegt werden. Navigiert wird bequem mit den Pfeiltasten. Es besteht auch die Möglichkeit, Sektionen zu verschachteln. So kann eine Präsentation in unterschiedliche Abschnitte unterteilt werden. Mit den Rechts- und Links-Pfeiltasten navigiert man durch die Sektionen der ersten Ebene. Erreicht man eine Sektion, in der weitere Sektionen verschachtelt sind, wird mittels Pfeiltasten (Auf und Ab) durch die Sektionen der zweiten Ebene navigiert:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>
  div>
    <section>
      <p>Folie 1</p>
    </section>
    <section>
      <section>
        <p>Folie 2 a</p>
      </section>
      <section>
        <p>Folie 2 b</p>
      </section>
    </section>
  </div>
</div>

Über die Escape-Taste erhält man eine Übersicht aller Folien und kann so direkt eine beliebige Folie ansteuern.


Übersichtsseite der Demo-Präsentation

Reveal.js: Erweiterte Navigationselemente einbinden

Wer zusätzlich zur Navigation per Tastatur auch per Maus navigieren möchte, kann ein entsprechendes Bedienelement in die Präsentation einbinden. Dazu wird ein kleiner Quelltextblock nach dem Container mit den Folien integriert. Anschließend zeigt sich in der rechten unteren Ecke eine Benutzeroberfläche mit vier Pfeilen.

Wer möchte, fügt der Präsentation einen Fortschrittsbalken hinzu. Dazu muss nur eine Zeile Quelltext eingebunden werden. Der Fortschrittsbalken zeigt sich am unteren Rand der Präsentation als schmaler Balken, der die aktuelle Position der Präsentation repräsentiert.

Reveal.js: Inhalte einfach per Markdown auszeichnen

Statt die einzelnen Inhalte der Folien per HTML auszuzeichnen, kann dies auch per Markdown-Syntax erfolgen. Markdown ist eine einfache Auszeichnungssprache, die vom Framework per JavaScript in HTML umgesetzt wird:

1
2
3
4
5
<section>
  ##Überschrift
 
  Absatz mit [Link](http://www.drweb.de)
</section>

Fazit: Reveal.js ist ein praktisches Framework für schnelle und gute Browser-Präsentationen. In Kombination mit der JavaScript-Fullscreen-API sind diese zu PowerPoint mehr als konkurrenzfähig.

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

3 Kommentare zu „Präsentationen mit Reveal.js: Besser als PowerPoint mit HTML5
  1. [...] sollte Reveal.js wirklich eine Chance geben. Weiterführende Links- Download @ GitHub - Demo – Artikel bei Dr. Web – Online-Editor ipad, iphone, javaScript, jQuery, responsive, [...]

  2. Heinz am 19. Oktober 2012 um 10:42

    Schoenes Tool!
    Habe sogar ich verstanden. Aber warum bei Praesentationen stehen bleiben ?Man kann das sicher auch zur Navigation innerhalb einer Website,Anwendung nehmen.
    Die Sections koennten ja auch durch PHP in
    Echtzeit erstellt werden , und durch entsprechende AJAX Callbacks kann
    man sicher auch interessante Sachen machen.

    Gutes Teil !

  3. Andre am 29. November 2012 um 18:50

    Moin .. besser spät als nie…

    Ich habe gerade einen Online Editor für Reveal.js gefunden…
    Unter http://www.rvl.io/ kann man den finden.

    Gruß André

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!