Installation

Second Code of Advent

 

Die Installation von reveal.js

Um reveal.js zu installieren, gibt es verschiedene Möglichkeiten. Wir entscheiden uns für das volle Setup. Dazu benötigen wir node.js (mindestens Version 10) und yarn. Als Editor nutzen wir Visual Studio Code.

(Zeile 1) Zuerst erstellen wir ein neues Verzeichnis auf der Festplatte, z.B. dockerdemo.

(Zeile 2) Anschließend navigieren wir mithilfe der Kommandozeile (z.B. CMD) in dieses Verzeichnis und

(Zeile 3) klonen dort reveal.js.

(Zeile 4) Nun navigieren wir in das geklonte Verzeichnis und

(Zeile 5) installieren die Abhängigkeiten mit yarn oder npm.

(Zeile 6) Zum Schluss öffnen wir das Verzeichnis in Visual Studio Code.

 Damit ist die Installation abgeschlossen.

 

reveal.js starten

Mit dem folgenden Kommando (ausgeführt von einer Kommandozeile) kannst du reveal.js nun starten, sofern du dich im oben genannten Verzeichnis befindest:

1. yarn start

Sollte der Port 8000 besetzt sein, wird eine Fehlermeldung angezeigt. Mit dem Befehl

1. yarn start -- --port=8001 

 kannst du einfach einen anderen Port angeben. Jetzt den Browser aufmachen und

1. http: //localhost:8000 

 eingeben (oder den geänderten Port). Schon öffnet sich die erste Präsentation, welche aus zwei Folien besteht.

Als Erstes ändern wir in der Datei index.html den Titel von reveal.js zu docker-cheat-sheet und das theme zu white.css. Zusätzlich legen wir im Ordner css eine Datei namens app.css an – in dieser werden wir unsere Styles definieren. 

Schaut man sich die Datei index.html im VSCode genauer an, fällt der Abschnitt mit slides und sections auf.  

Innerhalb von slides sind die einzelnen sections eingebettet. Auch wenn slides eigentlich Folien bedeutet, solltest du dir stattdessen die sections als Folien vorstellen.  

Hintergrund wechseln 

Den Hintergrund einer section wechselst du ganz unkompliziert. Dazu erstellst du ein neues Verzeichnis im Ordner reveal.js mit dem Namen assets, und legst dort den Ordner images an. Dort platzierst du nun das gewünschte Bild – schon kannst du jeder section dieses Bild zuweisen: 

Betrachten wir jetzt das Ergebnis, wirkt der Hintergrund etwas zu intensiv. Wir dimmen ihn etwas. Dafür fügen wir in app.css Folgendes ein: 

Jeder section weisen wir dann die Klasse dim zu: 

Hier ist das Ergebnis: 

Anordnung der Folien 

Mit reveal.js kannst du die Folien in zwei Ebenen anordnen: horizontal und vertikal. Sections, welche direkte „Kinder“ von slides sind, werden horizontal angeordnet. Kind-Elemente von sections ordnet das Framework hingegen vertikal an. Somit kannst du in alle Himmelsrichtungen navigieren. 

Anordnung der Folien in unserer Präsentation 

Unsere Präsentation hat das Ziel, dem Betrachter einen kleinen Überblick über die wichtigsten Docker-Befehle zu geben. Die Folien sollten wie folgt aussehen, wobei reveal.js automatisch die Navigation hinzufügt: 

 

Diese Anordnung kannst du sofort umsetzen. Im Code liest sich das dann so: 

Hast du diesen Schritt erfolgreich erledigt, sieht die Präsentation folgendermaßen aus: 

Das war‘s auch schon mit Teil 2 der Reihe. Im dritten Teil werden wir uns die einzelnen Inhalte der Präsentation genauer ansehen.