Close Menu
About

sonoya.com ist ein mash up Blog mit vielen Digital Lifestyle Beiträgen rund um Apple Mac, iOS, Android, Linux, Raspberry Pi und Web Services.

Open Source

Erstelle beeindruckende Online-Präsentationen mit reveal.js – So geht’s kostenlos, flexibel und einfach

7 Mins Read

Hast Du genug von den üblichen Präsentationen mit Microsoft’s PowerPoint oder Google Slides? Möchtest Du mal etwas anderes ausprobieren, etwas Kreatives und Dynamisches? Dann lass uns mal gemeinsam reveal.js anschauen! Reveal.js ist ein kostenloses, web-basiertes Tool für interaktive Präsentationen, das auf HTML, CSS und JavaScript basiert. Klingt technisch? Ist es auch aber trotzdem kein echtes Problem! Wir schauen uns einmal Schritt für Schritt an, wie Du auch ohne großes Vorwissen eine Präsentation erstellen kannst, die wirklich beeindruckt.

Darüber hinaus lernst Du, wie Du reveal.js einrichtest, welche Designoptionen es gibt und wie Du Deine Präsentation herunterladen und offline nutzen kannst. Wir vergleichen außerdem die Vor- und Nachteile von reveal.js im Vergleich zu PowerPoint, Google Slides und Keynote.

Was ist reveal.js und was macht es so besonders?

Reveal.js ist ein sogenanntes Framework – ein Werkzeugkasten, der Entwicklern hilft, Präsentationen direkt im Webbrowser zu erstellen. Entwickelt wurde es von Hakim El Hattab, und es ist komplett Open Source, also kostenlos und für jeden zugänglich. Die Präsentationen selbst basieren auf HTML (dem Code für Webseiten), CSS (für das Design) und JavaScript (für interaktive Effekte). Das klingt erstmal nach Programmieren, aber tatsächlich brauchst Du nur grundlegende HTML-Kenntnisse, und für viele Funktionen gibt es bereits vorgefertigte Designs und Templates.

Anwendungsbeispiele: Reveal.js ist ideal, wenn Du eine technisch anspruchsvolle Präsentation für ein Webinar, einen wissenschaftlichen Vortrag oder eine interaktive Lernsession erstellen willst. Da es webbasiert ist, eignet es sich besonders gut für Präsentationen, die online gezeigt oder geteilt werden sollen. Aber auch komplett offline ohne Internet kann reveal.js genutzt werden.

Was brauchst Du, um mit reveal.js loszulegen?

Bevor wir loslegen, hier die Grundlagen, die Du brauchst:

  • Grundkenntnisse in HTML: Keine Sorge, Du musst kein Profi sein. Wenn Du weißt, wie Du ein paar einfache Tags schreibst, reicht das völlig.
  • Einen Code-Editor wie Visual Studio Code oder Atom: Das sind Programme, in denen Du Deinen Code schreiben und organisieren kannst.
  • Einen Webbrowser wie Google Chrome, Firefox oder Safari: Da reveal.js im Browser läuft, brauchst Du nur einen aktuellen Browser, um Deine Präsentation anzusehen.

Reveal.js richtet sich vor allem an Technik-Begeisterte und Entwickler, aber auch Anfänger können sich mit ein wenig Geduld und Übung an ihre erste Präsentation wagen. Viele grundlegende Designs und Effekte sind bereits enthalten, so dass Du Dich erstmal auf die Inhalte konzentrieren kannst.

Schritt-für-Schritt Anleitung: So erstellst Du Deine erste Präsentation mit reveal.js

Nun geht’s ans Eingemachte! Lass uns gemeinsam Deine erste Präsentation erstellen. Ich führe Dich Schritt für Schritt durch den Prozess, damit Du am Ende eine funktionierende Präsentation hast.

1. Reveal.js herunterladen und installieren

Gehe zuerst zur offiziellen GitHub-Seite von reveal.js. Dort findest Du die aktuellste Version zum Download. Lade das ZIP-Archiv herunter und entpacke es an einem geeigneten Ort auf Deinem Computer. Alternativ kannst Du reveal.js über die Kommandozeile mit dem Befehl git clone https://github.com/hakimel/reveal.js.git herunterladen, wenn Du mit Git vertraut bist.

Im heruntergeladenen Ordner findest Du alles, was Du für Deine Präsentation brauchst: HTML-Dateien, Themes, JavaScript-Dateien für Effekte und vieles mehr.

2. Grundstruktur der Präsentation anlegen

Öffne nun die Datei index.html im Code-Editor. Diese Datei ist die Basis Deiner Präsentation. Sie enthält schon einige Grundstrukturen und ein paar Beispiel-Folien. Um eine neue Folie hinzuzufügen, verwendest Du das <section>-Tag. Hier ein einfaches Beispiel:

<section>
  <h2>Willkommen zu meiner Präsentation!</h2>
</section>

Wenn Du eine Präsentation mit mehreren Ebenen erstellen möchtest, kannst Du auch verschachtelte Sektionen verwenden:

<section>
  <section>Hauptthema</section>
  <section>Unterthema</section>
</section>

Durch diese Struktur kannst Du sowohl horizontale als auch vertikale Übergänge zwischen den Folien einbauen. Das gibt Dir die Möglichkeit, die Präsentation wie ein Netz aufzubauen, durch das Du Dich bewegen kannst – perfekt für ein interaktives Lernerlebnis!

3. Design und Layout anpassen

Jetzt wird’s Zeit kreativ zu werden! Eine der besten Eigenschaften von reveal.js ist, dass es viele Design-Optionen bietet, die Du direkt nutzen kannst, ohne sie selbst programmieren zu müssen. Im Ordner css/theme/ findest Du mehrere fertige Themes wie „black“, „white“, „moon“ oder „night“.

Um ein Theme zu ändern, öffne wieder die Datei index.html und finde den Teil, der auf das Theme verweist. Dort kannst Du den Namen des Themes anpassen, z.B.:

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

Übergangseffekte

Reveal.js bietet auch mehrere Übergangseffekte – fast wie ein Video-Editor – die Du ganz einfach einbauen kannst. So kannst Du den Wechsel zwischen den Folien animieren, z.B. mit Effekten wie „slide“, „fade“, „convex“ oder „zoom“. Diese Effekte fügst Du in der JavaScript-Konfiguration ein, am Ende der index.html-Datei:

<script>
  Reveal.initialize({
    transition: 'convex' // Optionen: slide, fade, convex, concave, zoom
  });
</script>

Spiel ruhig ein bisschen damit herum, bis Du den Effekt gefunden hast, der am besten zu Deiner Präsentation passt!

4. Interaktive Inhalte und Code-Elemente einfügen

Ein besonderer Vorteil von reveal.js ist die Möglichkeit, interaktive Inhalte einzubinden – perfekt, wenn Du technische Präsentationen mit Code-Snippets oder mathematischen Formeln erstellen willst.

  • Code-Highlighting: Mit reveal.js kannst Du Code-Blöcke einfügen und sie automatisch hervorheben lassen. Dazu verwendest Du -Blöcke. Hier ein Beispiel:
  <pre><code data-trim>
    function helloWorld() {
      console.log("Hallo, Welt!");
    }
  </code></pre>
  • Mathematische Formeln: Wenn Du mathematische Formeln darstellen möchtest, kannst Du MathJax integrieren. Damit lassen sich Formeln in LaTeX-Syntax anzeigen, was besonders für wissenschaftliche Vorträge ideal ist.

5. Präsentation starten und testen

Um Deine Präsentation zu testen, öffne einfach die index.html-Datei im Browser. Deine Präsentation sollte sofort sichtbar sein, und Du kannst Dich mit den Pfeiltasten durch die Folien bewegen.

Falls Du die Präsentation lokal testen und live aktualisieren willst, empfiehlt sich ein lokaler Server. Hast Du Python installiert? Dann kannst Du im Terminal einfach folgenden Befehl eingeben:

python -m http.server

Rufe dann im Browser http://localhost:8000 auf und Deine Präsentation läuft. Der Vorteil hist, dass jede Änderung die Du speicherst sofort im Browser aktualisiert wird.

6. Präsentation exportieren und offline nutzen

Sobald Du mit Deiner Präsentation zufrieden bist, möchtest Du sie vielleicht auch herunterladen oder offline verwenden. Reveal.js bietet hier verschiedene Exportmöglichkeiten:

  • PDF-Export: Drücke einfach Strg+P (Windows) oder Cmd+P (Mac), um die Präsentation als PDF zu speichern und runterzuladen.
  • Offline-Zugriff: Die gesamte Präsentation inklusive aller benötigten Dateien kannst Du in eine ZIP-Datei speichern. So kannst Du sie auf jeden Computer kopieren und auch ohne Internetverbindung abspielen. Ziemlich praktisch.

Vergleich: Die Vor- und Nachteile von reveal.js gegenüber PowerPoint, Google Slides und Keynote

Natürlich ist reveal.js nicht für jeden Anwendungsfall perfekt. Hier eine kleine Zusammenfassung der Vor- und Nachteile im Vergleich zu bekannten Präsentationstools wie Microsoft’s PowerPoint, Google Slides und Apple’s Keynote.

Vorteile

  • Kostenlos und Open-Source: Keine Lizenzkosten und keine Abos – reveal.js ist komplett kostenlos.
  • Maximale Anpassung: Durch die Verwendung von HTML, CSS und JavaScript kannst Du Deine Präsentation exakt so gestalten, wie Du es möchtest. Farben, Animationen, Layout – alles lässt sich ändern.
  • Ideal für technische und interaktive Inhalte: Durch die Möglichkeit, Code, mathematische Formeln und Animationen einzufügen, ist reveal.js besonders für technische und wissenschaftliche Vorträge geeignet.
  • Offline-Nutzung und viele Exportmöglichkeiten: Du kannst die Präsentation als HTML-Datei, ZIP-Archiv oder PDF speichern und offline verwenden – super praktisch für unterwegs oder wenn kein Internet verfügbar ist.

Nachteile

  • Einarbeitungszeit: Ohne HTML- und CSS-Grundkenntnisse kann es etwas schwierig sein, die ersten Schritte zu machen.
  • Keine Echtzeit-Kollaboration: Im Gegensatz zu Google Slides gibt es keine Möglichkeit, die Präsentation in Echtzeit mit anderen zu bearbeiten.
  • Weniger vorgefertigte Templates: PowerPoint und Keynote bieten mehr Vorlagen und Layouts für Einsteiger, während reveal.js eher eine minimalistische Auswahl an Designs hat.

Fazit: Ist reveal.js das richtige Tool für Dich?

Mit reveal.js kannst Du einzigartige, webbasierte Präsentationen erstellen, die sich perfekt für technische und wissenschaftliche Inhalte eignen. Es ist kostenlos, bietet viel kreativen Spielraum und lässt sich sowohl online als auch offline nutzen. Wenn Du etwas technisches Geschick und Lust auf kreative Gestaltung hast, wirst Du mit reveal.js viel Spaß haben und kannst Präsentationen bauen, die richtig Eindruck machen. Für Teams, die gemeinsam an einer Präsentation arbeiten oder auf viele Vorlagen angewiesen sind, ist allerdings PowerPoint oder Google Slides oft die einfachere Wahl.

Also, probier es aus und lass Dich überraschen, was alles möglich ist! Mit reveal.js wird Deine nächste Präsentation garantiert ein Highlight – und das Beste daran: Es kostet nichts außer ein bisschen Kreativität.

Share.

Ähnliche Artikel