reveal.js · Technik-Überblick

Was mit reveal.js geht

Ein Showcase und eine Nachschlaghilfe.

Florian Loyns

reveal.js ist ein freies Open-Source-Framework (MIT) von Hakim El Hattab und der Community.

Überblick

Zwölf Techniken – ein Klick springt direkt hin.

So schreibst du's · Sprunglinks<section id="fragments">…</section> <a href="#/fragments">Fragments</a>

Die Zahl ist die Foliennummer oben rechts – auch G, Zahl, Enter springt hin. Am Ende: alle Tasten.

Struktur · horizontal

Folien laufen von links nach rechts – und können nach unten verzweigen.

Die Hauptlinie ist waagerecht. Wo ein Thema Tiefe hat, hängen Unterfolien darunter – für Beispiele, Herleitungen, Rückfragen.

So schreibst du's

<section>
  <section>Oberfolie</section>
  <section>Unterfolie</section>
</section>

3.1

3.2

Du bist hier: oben im Kapitel 3

↓ Drücke die Pfeiltaste nach unten.

Struktur · vertikal

Das hier ist die Unterfolie – die Nummer oben rechts zeigt 3.2.

Nach oben geht es zurück, nach rechts weiter zum nächsten Kapitel. Die Punkte am rechten Rand zeigen, wie viele Unterfolien es gibt.

So stellst du's einReveal.initialize({ slideNumber: 'h.v' })

3.1

3.2

Du bist hier: Kapitel 3, Unterfolie 2

Aufbau · Fragments

Inhalte Schritt für Schritt einblenden.

fragment – erscheint (Standard)
fade-up – steigt herein
highlight-current-blue – hebt in Blau hervor
strike – streicht durch
erst da, dann gedimmt

So schreibst du's<li class="fragment fade-up">…</li>

Probier's: Leertaste oder → · ↓ darunter: mehr Arten und freie Reihenfolge.

Fragments · mehr Arten

Wachsen, schrumpfen, verblassen, farbig markieren.

wächstgrow

schrumpftshrink

tritt zurücksemi-fade-out

wird rothighlight-red

wird grünhighlight-green

nur jetzt sichtbarcurrent-visible

So schreibst du's<div class="fragment grow">…</div>

Fragments · Reihenfolge

Mit `data-fragment-index` bestimmst du, was wann kommt.

Vor der Morgengabe misst Frau H. einen Puls von 48/min. Der Betablocker steht im Plan. Was tun Sie?

Wie verordnet geben, dann nachmessen
Nicht geben, ärztlich Rücksprache halten
Die halbe Dosis geben

Gleicher Index = erscheint gleichzeitig. Hier: erst die Optionen, dann die Lösung, dann fallen die Ablenker weg.

Übergänge

Diese Folie ist hereingezoomt – probier die anderen aus.

So schreibst du's<section data-transition="fade">…</section>

Sparsam einsetzen – ein ruhiges fade wirkt in der Lehre meist am besten.

Übergänge · Vorschau

So sieht dieser Übergang aus:

fade

Hintergrund · Farbe

Eine Vollflächen-Farbe hinter der Folie.

data-background-color ↓ darunter: Verlauf, Bild und Video

Hintergrund · Farbverlauf

Ein Verlauf statt Vollton.

data-background-gradient

Hintergrund · Bild

Ein Bild formatfüllend hinter der Folie.

data-background-image

Hintergrund · Video

Ein Film läuft hinter der Folie.

data-background-video

Medien · Video

Ein Video läuft direkt in der Folie.

So schreibst du's

<video data-autoplay muted loop>
  <source data-src="film.mp4" type="video/mp4">
</video>

Pausiert beim Folienwechsel von selbst und lädt dank data-src erst bei Bedarf. ↓ darunter: Ton und Webseite.

Medien · Audio

Auch Ton spielt direkt in der Folie – hier ein Herzschlag.

75 Schläge pro Minute · erster und zweiter Herzton
synthetisch erzeugt, keine Aufnahme

So schreibst du's<audio controls> <source data-src="ton.mp3" type="audio/mpeg"> </audio>

reveal pausiert den Ton beim Folienwechsel. Das Herz schlägt nur, solange der Ton läuft.

Medien · iframe

Eine ganze Webseite lebt in der Folie.

Aus Datenschutzgründen lädt die Karte erst auf Klick. Dabei wird eine Verbindung zu openstreetmap.org hergestellt und deine IP-Adresse an OpenStreetMap übertragen.

So schreibst du's<iframe data-src="https://www.openstreetmap.org/export/embed.html?…"></iframe>

Datenschutzfreundlich: erst auf Klick geladen (Klick = Einwilligung). Läuft nur online.

Layout · r-fit-text

Eine Kernaussage füllt die ganze Breite.

Erst messen, dann geben.

So schreibst du's<p class="r-fit-text">Erst messen, dann geben.</p>

↓ darunter: Bilder Schicht für Schicht stapeln.

Layout · r-stack

Bilder liegen übereinander und bauen sich Schicht für Schicht auf.

So schreibst du's

<div class="r-stack">
  <img src="schicht-1.svg"> <img class="fragment" src="schicht-2.svg"> …
</div>

Auto-Animate

Drei Werte bei Frau H. – einer fällt gleich auf.

BLUTDRUCK118/76

PULS48/min

SpO₂96 %

↓ Weiter nach unten – beobachte den Puls.

Auto-Animate

Der Puls rückt nach vorn – Größe, Lage und Farbe wechseln weich.

PULS48/minBradykardie

BLUTDRUCK118/76

SpO₂96 %

So schreibst du's<section data-auto-animate> … <div data-id="puls"> … </section> (auf beiden Folien)

Auto-Animate · Liste

Der Pflegeprozess – noch durcheinander.

?Pflegemaßnahmen durchführen
?Informationen sammeln
?Evaluieren
?Pflegeziele festlegen
?Probleme und Ressourcen erkennen
?Maßnahmen planen

↓ Weiter – die Liste sortiert sich.

Auto-Animate · Liste

Jede Karte wandert an ihren Platz.

1Informationen sammeln
2Probleme und Ressourcen erkennen
3Pflegeziele festlegen
4Maßnahmen planen
5Pflegemaßnahmen durchführen
6Evaluieren

↓ Weiter: Werte, die sich verändern.

Auto-Animate · Werte

Herr K. bei Aufnahme: Blutdruck 178/104 mmHg.

Ziel < 140 mmHg

178

104

systolischdiastolisch

So schreibst du's<div data-id="sys" style="height:228px"> → <div data-id="sys" style="height:169px">

↓ Weiter: nach vier Wochen Therapie.

Auto-Animate · Werte

Nach vier Wochen: 132/84 mmHg.

Ziel < 140 mmHg

132

systolischdiastolisch

So schreibst du's<div data-id="sys" style="height:228px"> → <div data-id="sys" style="height:169px">

Gleiche data-id, andere Höhe und Farbe – reveal.js rechnet den Weg dazwischen.

Formeln

Formeln stehen sauber gesetzt – direkt im Browser.

Tropfen/min = \frac{Volumen (ml) \times 20}{Zeit (min)}

500 ml in 4 Stunden: $\frac{500 \times 20}{240} \approx 42$ Tropfen pro Minute

So schreibst du's · MathML<math><mfrac><mn>500</mn><mn>240</mn></mfrac></math>

MathML kann jeder aktuelle Browser – ohne Zusatzbibliothek und ohne fremden Server. Für LaTeX-Schreibweise gibt es das Math-Plugin.

Sprecheransicht

Taste S – du siehst Notizen, Uhr und die nächste Folie.

Das Publikum sieht nur die Folie. Jede Folie dieser Präsentation hat Notizen – probier es aus.

So schreibst du's

<section>
  …
  <aside class="notes">Das sehe nur ich.</aside>
</section>

Folie auf den Beamer, Sprecheransicht auf den Laptop – beide bleiben synchron.

Scroll-Ansicht

Dieselben Folien lassen sich wie ein Artikel durchscrollen.

Ideal zum Nacharbeiten auf dem Handy. Fragments erscheinen beim Scrollen. Auf schmalen Bildschirmen schaltet reveal.js sogar von selbst um.

Diese Präsentation zum Durchscrollen öffnen

So schreibst du'sLink mit ?view=scroll · oder Reveal.initialize({ view: 'scroll' })

Automatischer Ablauf

Diese Folie blättert sich selbst – schau einfach zu.

Pausenschleife auf dem Bildschirm
Infotafel im Foyer
Bilderserie, die von allein läuft – und hier stoppt

So schreibst du's

<section data-autoslide="1600"> … </section>
Endlosschleife: Reveal.initialize({ autoSlide: 5000, loop: true })

Nachschlag · Modi & Tasten

Was reveal.js beim Vortragen kann.

Taste	Funktion	Wofür
`Esc` / `O`	Übersichtsmodus	Alle Folien als Raster – schnell springen
`S`	Sprecheransicht	Notizen, Uhr und nächste Folie im zweiten Fenster
`F`	Vollbild	Ablenkungsfreie Präsentation
`Alt`+Klick	Zoom	In ein Detail hineinvergrößern
`G`	Gehe zu Folie	Nummer eintippen, Enter – schon da
`Strg`+`⇧`+`F`	Suche	Ein Wort in allen Folien finden
`B` / `.`	Pause (Schwarzbild)	Aufmerksamkeit zurück in den Raum holen
`?`	Hilfe	Alle Tastenkürzel als Übersicht
Druck → PDF	PDF-Export	Handout aus denselben Folien (`?print-pdf`)

Zoom, Sprecheransicht und Suche sind mitgelieferte Plugins von reveal.js.

Credits & Lizenz

Das Fundament ist nicht mein Werk.

reveal.js ist ein freies Open-Source-Framework (MIT) von Hakim El Hattab und der Community.

revealjs.com

Backup · für Rückfragen

Diese Folie zählt nicht mit – schau auf die Foliennummer.

Material für Rückfragen kommt ans Ende und wird nicht mitgezählt. So zeigt die Nummer unten rechts weiter das echte Ende des Vortrags.

So schreibst du's

<section data-visibility="uncounted">…</section>
<section data-visibility="hidden">…</section>  ← ganz ausgeblendet

Zurück zur Übersicht

Was mit reveal.js geht

Zwölf Techniken – ein Klick springt direkt hin.

Folien laufen von links nach rechts – und können nach unten verzweigen.

Das hier ist die Unterfolie – die Nummer oben rechts zeigt 3.2.

Inhalte Schritt für Schritt einblenden.

Wachsen, schrumpfen, verblassen, farbig markieren.

Mit data-fragment-index bestimmst du, was wann kommt.

Diese Folie ist hereingezoomt – probier die anderen aus.

So sieht dieser Übergang aus:

Ein Video läuft direkt in der Folie.

Auch Ton spielt direkt in der Folie – hier ein Herzschlag.

Eine ganze Webseite lebt in der Folie.

Antippen – und Bild oder Film füllen den Bildschirm.

Eine Kernaussage füllt die ganze Breite.

Bilder liegen übereinander und bauen sich Schicht für Schicht auf.

Drei Werte bei Frau H. – einer fällt gleich auf.

Der Puls rückt nach vorn – Größe, Lage und Farbe wechseln weich.

Der Pflegeprozess – noch durcheinander.

Jede Karte wandert an ihren Platz.

Herr K. bei Aufnahme: Blutdruck 178/104 mmHg.

Nach vier Wochen: 132/84 mmHg.

Formeln stehen sauber gesetzt – direkt im Browser.

Taste S – du siehst Notizen, Uhr und die nächste Folie.

Dieselben Folien lassen sich wie ein Artikel durchscrollen.

Diese Folie blättert sich selbst – schau einfach zu.

Was reveal.js beim Vortragen kann.

Das Fundament ist nicht mein Werk.

Diese Folie zählt nicht mit – schau auf die Foliennummer.

Mit `data-fragment-index` bestimmst du, was wann kommt.