Revealer

RevealJS ist ein Framework zur Erstellung von Präsentationen mit Hilfe von HTML und CSS von Hakim El Hattab.

Der ‚Revealer‘ erlaubt es, dieses Framework auf (hoffentlich) benutzerfreundliche Art und Weise zu verwenden. Beispiel-Präsentation.

Programm

• Aktuelle Version
• Entwickler-Version

Workshop

Zum Erlernen des Programms kann man folgende Präsentationen durcharbeiten. Wichtig ist, die Aufgaben am Ende zu lösen! Man kann alle Präsentationen herunterladen und dann im Revealer öffnen.

1. Basics: Wie erstellt man den Inhalt von Folien mit Hilfe von PML (Prsentation Markdown Language)? Text, Aufzählungen, Links, Tabellen, Hervorhebungen, Code-Anzeige! Nach diesem Tutorial kann man bereits die ersten professionellen Präsentationen erstellen.
   • Aufgabe 1: Baue diese Präsentation so genau wie möglich nach.
2. Ressourcen: Wie bindet man Bilder, Videos, Webseiten u.v.m. in seine Präsentation ein?
   • Aufgabe 2: Erweitere deine Präsentation aus Aufgabe 1 so, dass sie aussieht wie diese Präsentation.
   • Benötigte Dateien für die Aufgabe: Bambi, Charlie Chaplin: Die Anleihe, Kamera (jeweils Rechtsklick⇒Ziel speichern unter)
3. Layout: Wie ändert man das Aussehen der Präsentation ohne die Präsentation selbst ändern zu müssen? Das Tutorial zeigt einen einfachen Weg (über den „Basis-Stil“) und einen komplexen Weg (über CSS), der keine Wünsche offen lässt.
   • Aufgabe 3: Erweitere deine Präsentation aus Aufgabe 2 so, dass sie aussieht wie diese Präsentation. (Das Video wurde aus der Präsentation entfernt, um die Größe zu reduzieren.)
   • Benötigte Dateien für die Aufgabe: Schriftart LittleBird.ttf, Schriftart Bubbleboddy.ttf
   • Hinweise: Überschriften bekommen eine andere Schriftart als der Rest. Stelle zuerst die allgemeine Schriftart auf „Bubbleboddy.ttf“ um (.reveal{…}) dann die Schriftart für Überschriften (.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6{…}) auf „LittleBird.ttf“). Du musst für diese Aufgabe den Inhalt der Folien nicht verändern!
4. Optionen: Wie macht man das Fine-Tuning der Präsentation? Übergänge zwischen den Folien, automatische Fragmente u.v.m.
   • Aufgabe 4: Erweitere deine Präsentation aus Aufgabe 3 so, dass sie aussieht wie diese Präsentation. (Das Video wurde aus der Präsentation entfernt, um die Größe zu reduzieren.)
   • Hinweise: Der Folienübergang wurde verändert. Füge außerdem „img“ als automatisches Fragment hinzu.