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

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.
  2. Ressourcen: Wie bindet man Bilder, Videos, Webseiten u.v.m. in seine Präsentation ein?
  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.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

w

Verbinde mit %s

Bloggen auf WordPress.com.

Nach oben ↑

%d Bloggern gefällt das: