Title
Probieren hilft beim Studieren
Interaktive Vorlesungsfolien im Webbrowser
Prof. Dr. Mario Botsch
Lehrstuhl für Computergraphik, TU Dortmund
Anleitung für die HTML-Folien
- Am besten Google Chrome oder Firefox verwenden. Apple Safari implementiert nicht alle benötigen Web-Standards, so dass manche interaktiven Demos nicht funktionieren.
- Cursor-links/Cursor-rechts blättern durch Folien.
- f/ESC schalten Fullscreen-Modus an/aus.
- Ctrl/Cmd-f öffnet Such-Dialog, ESC schließt ihn wieder.
- (links oben) öffnet das Navigationsmenü.
- (links unten) schaltet das virtuelle Whiteboard an/aus.
- (rechts oben) spielt aufgezeichnetes Erklärvideo (wenn vorhanden) ab.
- (rechts oben) öffnet das Frage-Panel, wo Fragen pro Folie submitted werden können.
- (recht oben im Demo-Fenster) bringt Demo-Apps in den Fullscreen-Modus.
- Doppelklick auf ein Element (z.B. ein Bild) für Rein-/Raus-Zoomen.
- Wenn der untere Rand blinkt: Zum virtuellen Whiteboard runter-scrollen.
Ausgangssituation 2016
| Powerpoint | LaTeX | HTML/decker | |
|---|---|---|---|
| plattformunabhängig | 😢 | 😊 | |
| Mathe-Formelsatz | 😢 | 😊 | |
| Multimedia-Inhalte | 😊 | 😢 | |
| interaktive Inhalte | 😢 | 😢 | |
| Folien-Export | 😢 | 😢 | |
| erweiterbar | 😢 | 😢 | |
| Erstellungsaufwand | 😊 | 😢 |
“Normale” Features der HTML-Folien
Aufzählungen
- Mario
- ist etwas schräg
- Prinzessin Peach
- ist hochgestellt
- Donkey Kong
- ist fett (gedruckt)
Numerierungen
- Donkey Kong
- entführt Peach
- Mario
- rettet Peach
- Peach
- findet Mario toll
Webseiten einbinden
PDF-Unterstützung
- Folien lassen sich auf Knopfdruck als PDF-Dokument exportieren.
- PDF-Dokumente lassen sich in Präsentationen einbinden.
Beyond Powerpoint
Bibliographie
- Bibliographie kann mit BibTeX verwaltet werden.
- Die Referenzliste wird dann automatisch erstellt (siehe nächste Folie).
- Zitationsstil über CSL (Citation Style Language) einstellbar.
- Hier ein Beispiel:
- Realistische Avatare sind toll (Waltemate u. a. 2018).
- Achenbach u. a. (2017) können sie in <10 Minuten erzeugen.
- Wenninger u. a. (2020) erzeugen sie aus Smartphone-Videos.
Referenzen
Achenbach, J., T. Waltemate, M. Latoschik, und M. Botsch. 2017. „Fast Generation of Realistic Virtual Humans“. In Proceedings of ACM Symposium on Virtual Reality Software and Technology.
Waltemate, T., D. Gall, D. Roth, M. Botsch, und M. Latoschik. 2018. „The Impact of Avatar Personalization and Immersion on Virtual Body Ownership, Presence, and Emotional Response“. IEEE Transactions on Visualization and Computer Graphics 24 (4): 1643–52.
Wenninger, S., J. Achenbach, A. Bartl, M. Latoschik, und M. Botsch. 2020. „Realistic Virtual Humans from Smartphone Videos“. In Proceedings of ACM Symposium on Virtual Reality Software and Technology.
Mathematische Formeln
- Formeln werden mit LaTeX gesetzt
- Formeln können schrittweise eingeblendet werden \[ \begin{eqnarray*} \dot{\vec{u}} &=& \fragment{-\vec{u}\cdot\grad\vec{u}} \fragment{\;-\; \frac{1}{\rho}\grad p} \fragment{\;+\; \nu \laplace \vec{u}} \fragment{\;+\; \vec{f}} \label{eq:momentum} \\[2mm] \grad \cdot \vec{u} &=& 0 \label{eq:incompressibility} \end{eqnarray*} \]
- Formeln können referenziert und verlinkt werden
Virtuelles Whiteboard
- “Echte” Tafelanschriften sind nicht in Videoaufzeichnungen
- Herleitungen auf den Folien sind zu schnell \[ \begin{eqnarray*} a &=& b \\ a^2 &=& ab \\ 2a^2 &=& a^2 + ab \\ 2a^2-2ab &=& a^2 - ab \\ 2a(a-b) &=& a (a-b) \\ 2a &=& a \\ 2 &=& 1 \end{eqnarray*} \]
- Das virtuelle Whiteboard ist ein guter Kompromiss
Daten-Visualisierung
Interaktive Charts
1.0, 1.3, 1.7, 2.0, 2.3, 2.7, 3.0, 3.3, 3.7, 4.0, 5.0
Irgendwelche Zahlen, 5, 6, 5, 2, 3, 3, 4, 3, 3, 5, 11
Andere Zahlen, 11, 8, 5, 5, 2, 7, 4, 1, 5, 0, 15Interaktive Charts
1.0, 1.3, 1.7, 2.0, 2.3, 2.7, 3.0, 3.3, 3.7, 4.0, 5.0
Irgendwelche Zahlen, 5, 6, 5, 2, 3, 3, 4, 3, 3, 5, 11Interaktive Charts
100k, 200k, 300k, 400k, 500k
Sparse Cholesky, 0.21, 0.52, 0.83, 1.21, 1.54
Conjugate Gradients, 3.19, 11.6, 23.6, 37.3, 47.43D-Modelle
Interaktive Demos
Interaktive Demos in Javascript
Interaktive Fluid-Simulation
Live-Coding mit Python, R, SAGE, Octave
from math import exp,pi,cos,sin
import matplotlib.pyplot as plt
import numpy as np
# Definiere Funktion und erste Ableitung
def f(x):
return exp(-sin(x))
def df(x):
return exp(-sin(x)) * (-cos(x))
# Taste Funktion ab
X1 = np.linspace(0, 25, 200)
Y1 = [f(x) for x in X1]
# Approximation durch explizite Euler-Integration
x=0; y=1; h=0.5
X2=[]
Y2=[]
while x < 25:
X2.append(x)
Y2.append(y)
y = y + h*df(x)
x = x+h
# Funktion und Approximation plotten
plt.clf()
plt.plot(X1, Y1, 'r-')
plt.plot(X2, Y2, 'b*--')
plt.legend(('Exact solution', 'Numerical solution'), loc='upper left')
plt.show()Inverted Classroom
Fragen zur Vorlesung
- Mit dem Icon (oben rechts) können Studierende pro Folie anonym Fragen posten.
- Die Fragen sind für alle sichtbar und können in Online-Fragestunde besprochen werden.
- Fragen können von Lehrenden beantwortet, als erledigt markiert oder gelöscht werden.
- Im Menu (Icon oben links) werden die Fragen in der Folienübersicht auch angezeigt.
Videoaufzeichnungen
- Erklärvideos sind nahtlos in die Folien integriert
- Video springt automatisch an die Stelle, wo die aktuelle Folie erklärt wird.
- Cursor links/rechts springt im Video folienweise vor/zurück.
- Typische Youtube-Features vorhanden (10s-Sprünge, Abspielgeschwindigkeit, …)
- Beenden des Videos springt automatisch auf die zuletzt erklärte Folie.
- Erklärvideos können einfach aufgenommen werden
- Videos können direkt in den HTML-Folien aufgenommen werden.
- Bildschirm, Mikrophon und Kamera werden aufgezeichnet.
- Videos werden automatisch mit Folien synchronisiert.
Quizzes und Selbstlernphase
Audience Response System
Wer bekommt am Ende die Prinzessin?
-
Donkey Kong
![donkeykong.png]()
- Nein, der ist böse!
-
Sponge Bob
![spongebob.png]()
- Nein, der lebt unter Wasser!
-
Kleine A-Loch
![arschloch.png]()
- Nein, den mag keiner!
-
Supermario
![supermario.png]()
- Klar!
Hier können Teilnehmer*innen per Zoom oder eigenem Quiz-Server abstimmen
Zuordnungsaufgaben
“Who is who” per Drag&Drop zuordnen
Prinzessin
Donkey Kong
Supermario
Freitextaufgaben
- Peach
- Lilifee
Die Prinzessin ist verliebt in
- Donkey Kong
- Supermario
- Sponge Bob
Aktuelle Situation
| Powerpoint | LaTeX | HTML/decker | |
|---|---|---|---|
| plattformunabhängig | 😢 | 😊 | 😊 |
| Mathe-Formelsatz | 😢 | 😊 | 😊 |
| Multimedia-Inhalte | 😊 | 😢 | 😊 |
| interaktive Inhalte | 😢 | 😢 | 😍 |
| Folien-Export | 😢 | 😢 | 😍 |
| erweiterbar | 😢 | 😢 | 😍 |
| Erstellungsaufwand | 😊 | 😢 | 😢 |
Folienerstellung
Von Markdown zu HTML
Open-Source “Zutatenliste”
- Reveal.js
- Javascript-Framework zur Darstellung von Folien im Webbrowser
- Pandoc
- Tool/Bibliothek zur Konvertierung von Markdown in Reveal.js-Folien.
- decker
- Kominiert
PandocundReveal.jsund erweitert sie um virtuelles Whiteboard, Live-Coding, Quizzes, Frage-Panel, Erklärvideos, … - Wird entwickelt von Prof. Henrik Tramberend (Berliner Hochschule für Technik), Prof. Mario Botsch (TU Dortmund) und Prof. Marc Latoschik (Uni Würzburg).
- Wird verwendet an Uni Würzburg, Berliner Hochschule für Technik, TU Dortmund, Uni Bielefeld, Uni Osnabrück, Uni Magdeburg, Uni Bern und EPF Lausanne.
- Kominiert
Zusammenfassung
- Was bringt
deckerfür Lehrende?- Alles in einem Tool (decker), alles aus einem Guss
- Text-basierter Workflow gewöhnungsbedürftig, dann aber effizient: GUI ist in Arbeit
decker html; decker pdf; decker publish
- Was bringt
deckerfür Studierende?- Alles in einem Tool (Webbrowser), alles aus einem Guss
- “Die Kombination aus Beispielen, Videos, Fragen und Text in den HTML-Folien ist genial.”
- “Ich habe noch in keiner anderen Vorlesung Folien gesehen, die so viele Möglichkeiten bieten den Stoff zu verstehen. Top.”
- “Sehr gutes Format, vor allem die HTML-Folien. Würde ich mir in ähnlicher Form bei allen Vorlesungen wünschen.”
- “Die Vorlesung setzt Standards der Online-Lehre. An dieser Form der Wissensvermittlung können sich viele ein Beispiel nehmen. Die vielen interaktiven Beispiele machen es zu Lehre zum anfassen.”