Anleitung für die HTML-Folien

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.

Videoaufzeichnungen

Erklärvideos abspielen:
- Video springt automatisch an die Stelle, wo die aktuelle Folie erklärt wird.
- Cursor-links/Cursor-rechts springt im Video folien-weise vor/zurück.
- Space oder Maus-Klick pausiert das Video.
- Abspielgeschwindigkeit lässt sich einstellen (von halber bis zu doppelter Geschwindigkeit).
- Beenden des Videos springt automatisch auf die zuletzt erklärte Folie.
Erklärvideos aufnehmen:
- Videos können direkt in den HTML-Folien aufgenommen werden.
- Bildschirm, Kamera und Mikrophon werden aufgezeichnet.
- Videos werden automatisch mit Folien synchronisiert.

Features der HTML-Folien

Aufzählungen

Mario
- Der Held
Peach
- Die Prinzessin
Donkey Kong
- Der Böse

data/supermario.png Mario data/peach.png Peach data/donkeykong.png Donkey Kong

Textauszeichnungen

Mario
- ist fett (gedruckt)
Prinzessin ^Peach
- ist hochgestellt
Donkey Kong
- ist schräg

data/supermario.png Mario data/peach.png Peach data/donkeykong.png Donkey Kong

Nummerierungen

Donkey Kong
- entführt Peach
Mario
- rettet Peach
Peach
- findet Mario toll

Mathe-Formeln mit MathJax

Navier-Stokes-Gleichungen \[\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 schrittweise eingeblendet werden
Formeln können referenziert und verlinkt werden
(siehe nächste Folie)

Virtuelle Tafel

Herleitungen an der Tafel sind nicht in Videoaufzeichnung
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*} \]
Die virtuelle Tafel ist ein guter Kompromiss 👍

Source Code

for i in range(1, 100):
    if i % 3 is 0 and i % 5 is 0:
        print("Fizz Buzz!")
    elif i % 3 is 0:
        print("Fizz!")
    elif i % 5 is 0:
        print("Buzz!")
    else:
        print(i)

Irgendwas in Python

int     i, N=100000000;
double  x, dx=1.0/(double)N;
double  f, pi=0.0;

// wow, ein Schleife
for (i=0; i<N; ++i)
{
  x = (i+0.5) * dx;
  f = 4.0 / (1.0 + x*x);
  pi += dx * f;
}

printf("pi = %f\n", pi);

\(\pi\) ausrechnen in C++

Inline-Code: for (int i=0; i<100; ++i) sum += i; Das ist toll!

Webseiten

Tabellen

Warum sind HTML-Folien so toll?
	Powerpoint	LaTeX-Beamer	HTML-Folien
plattformunabhängig	😢	😊	😊
Mathe-Formelsatz	😢	😊	😊
Videos	😊	😢	😊
Export für Studierende	😢	😢	😍
erweiterbar	😢	😢	😍
interaktiv	😢	😢	😍
Aufwand	😊	😢	😭

Bibliographie mit BibTeX

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.
- Sie können in Echtzeit animiert werden (Komaritzan und Botsch 2019).

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.

Komaritzan, M., und M. Botsch. 2019. „Fast Projective Skinning“. In Proceedings of ACM Motion, Interaction and Games.

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.

PDF-Unterstützung

Folien lassen sich auf Knopfdruck als PDF-Dokument exportieren.
PDF-Dokumente lassen sich in Präsentationen einbinden.

Statische und dynamische Visualisierungen

Bild-Sequenzen

data/laserMario4.jpg data/laserMario3.jpg data/laserMario2.jpg data/laserMario1.jpg

Animierte Vektorgrafiken

de Casteljau Algorithmus

Interaktive Charts mit chart.js

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, 15

Interaktive Charts mit chart.js

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

Interaktive Charts mit chart.js

100k, 200k, 300k, 400k, 500k
Conjugate Gradients, 3.19, 11.6, 23.6, 37.3, 47.4
Sparse Cholesky, 0.21, 0.52, 0.83, 1.21, 1.54

Graph-Diagramme mit GraphViz

Diagramme mit Tikz/Latex

Plots mit gnuplot

code-8927f724.gnuplot.svg — Marc Latoschik, Uni Würzburg

3D-Modelle

Space-Taste: Zeichenmodus ändern. Linke Maus: Rotieren

Rendered with Polygon Mesh Processing Library

Noch mehr 3D-Modelle

Rendered with model-viewer, model from here

Interaktive Demos

Interaktive Demos in Javascript

de Casteljau Algorithmus: Kontrollpunkte verschieben, Parameter t verändern

Interaktive Demos mit D3.js

Voronoi-Diagramm (Punkte mit Maus verschieben)

Komplexere Demos in C++

Rechte Maustaste: Flüssigkeit injizieren. Linke Maustaste: Verwirbeln

Interaktive Mathe mit Geogebra

Mandelbrot ist lecker!

Interaktive Mathe mit SAGE

Wir definieren ein paar Punkte \(\mathbf{x}_1, \dots, \mathbf{x}_6\) und verbinden sie zu einem Linienzug:

points = matrix([ [0,0], [1,1], [2,-1], [3,0], [2.5,0.5], [3,1] ])
pointsPlot = plot(line(points, color="red", aspect_ratio=1))
show(pointsPlot)

Jetzt interpolieren wir die Punkte \(\mathbf{x}_1, \dots, \mathbf{x}_n\) mit einem Polynom vom Grad \(n-1\). Testen Sie verschiedene Werte für \(n \in \{2, \dots, 6 \}\). Was fällt auf?

# select n points
n = 6
B = points.submatrix(0,0,n,2)

# define matrix for polynomial interpolation
A = matrix(n, n, lambda i,j: i^j)

# solve A*X=B, then X contains the poly coefficients
X = A\B

# define function for evaluating polynomial
var('k, coeffs, t')
def curve(coeffs, t):
    return sum(coeffs[k] * t^k for k in [0..n-1])
   
# finally, plot fitted curves and point set
curvePlot = parametric_plot(curve(X,t), (t, 0, n-1))
show(pointsPlot + curvePlot)

Interaktives Python

from math import exp,pi,cos,sin
import matplotlib.pyplot as plt
import numpy as np
x0=1; t0=0; tf=25; x=x0; t=t0;
h = pi/16
X=[]
T=[]
while t < tf:
    X.append(x)
    T.append(t)
    x = x + h*(-x*cos(t));
    t = t+h
plt.plot(T,X,'b*--')
T1=np.linspace(t0,tf,200);
plt.plot(T1,[exp(-sin(t)) for t in T1],'r-')
plt.title('h = %f' % (h))
plt.legend(('Numerical solution','Exact solution'),loc='upper left')
plt.show()

Example from Roberto De Leo, Howard University

Interaktive Statistik mit R

Die Trainingsdaten bestehen aus Alter und Maximalpuls als \(x\)- und \(y\)-Koordinaten.

x = c(18,23,25,35,65,54,34,56,72,19,23,42,18,39,37) # ages of individuals
y = c(202,186,187,180,156,169,174,172,153,199,193,174,198,183,178) # maximum heart rate of each one
plot(x,y) # make a plot

Wir fitten jetzt eine Gerade durch lineare Regression:

plot(x,y) # make a plot
lm(y ~ x) # do the linear regression
abline(lm(y ~ x)) # plot the regression line

Quizzes und Selbstlernphase

Audience Response System

Wer bekommt am Ende die Prinzessin? data/peach.png

Donkey Kong
- Nein, der ist böse!
Sponge Bob
- Nein, der lebt unter Wasser!
Kleine A-Loch
- Nein, den mag keiner!
Supermario
- Klar!

Zuordnungsaufgaben

Prinzessin

Donkey Kong

Supermario

Zuordnungsaufgaben

\(\laplace f\)

\(\grad f\)

\(\grad \cdot f\)

\(\laplace \cdot f\)

Laplace

Gradient

Divergenz

Quatsch

Freitextaufgaben

data/peach.png

Wie heißt die Prinzessin?

Peach
Lilifee

Die Prinzessin ist verliebt in

Donkey Kong
Supermario
Sponge Bob

Fragensammlung

Mit dem Icon (oben rechts) können Studierende pro Folie anonym Fragen posten.
Die Fragen sind für alle Vorlesungsteilnehmer*innen sichtbar und können dann z.B. in einer Online-Fragestunde besprochen werden.
Fragen können von Lehrenden als erledigt markiert oder gelöscht werden.
Im Menu (Icon oben links) werden die Fragen in der Folienübersicht auch angezeigt.

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
- decker basiert auf pandoc und übersetzt Markdown in HTML-Folien.
- Es erweitert pandoc und reveal.js um zusätzliche Filter und Plugins.
- Wird entwickelt von Prof. Henrik Tramberend (Beuth Hochschule Berlin), Prof. Mario Botsch (TU Dortmund) und Prof. Marc Latoschik & Team (Uni Würzburg).
- Wird verwendet an Uni Würzburg, Beuth Hochschule Berlin, TU Dortmund, Uni Osnabrück, Uni Magdeburg, Uni Bern und EPFL.

Anleitung für die HTML-Folien

Videoaufzeichnungen

Features der HTML-Folien

Bilder und Videos

Aufzählungen

Textauszeichnungen

Nummerierungen

Task-Listen

Mathe-Formeln mit MathJax

Virtuelle Tafel

Source Code

Webseiten

Tabellen

Bibliographie mit BibTeX

Referenzen

PDF-Unterstützung

Statische und dynamische Visualisierungen

Bild-Sequenzen

Animierte Vektorgrafiken

Interaktive Charts mit chart.js

Interaktive Charts mit chart.js

Interaktive Charts mit chart.js

Graph-Diagramme mit GraphViz

Diagramme mit Tikz/Latex

Plots mit gnuplot

3D-Modelle

Noch mehr 3D-Modelle

Interaktive Demos

Interaktive Demos in Javascript

Interaktive Demos mit D3.js

Komplexere Demos in C++

Interaktive Mathe mit Geogebra

Interaktive Mathe mit SAGE

Interaktives Python

Interaktive Statistik mit R

Quizzes und Selbstlernphase

Audience Response System

Zuordnungsaufgaben

Zuordnungsaufgaben

Freitextaufgaben

Fragensammlung

Folienerstellung

Von Markdown zu HTML

Open-Source “Zutatenliste”