---
title:        Interaktive und barrierearme Vorlesungsmaterialien mit Decker
authors: 
  - name: Henrik Tramberend
    affiliation: BHT Berlin
    photo: images/henrik.jpg
  - name: Marc Latoschik
    affiliation: JMU Würzburg
    photo: images/marc.jpg
  - name: Sebastian Hauer
    affiliation: TU Dortmund
    photo: images/hauer.png
  - name: Mario Botsch
    affiliation: TU Dortmund
    photo: images/mario.jpg
...


# Link zur Präsentation

![](images/qrcode.svg){ width=300px height=300px }

<https://cg.cs.tu-dortmund.de/decker/vbib24/vbib-deck.html>



# Was macht Decker?

Software für **interaktive Präsentationen** in Webbrowser:

1. Erstellen von Foliensätzen
2. Präsentation von Foliensätzen 
3. Konsumieren von Foliensätzen



# Wer macht Decker?

- Wird seit 2017 entwickelt an
  - BHT Berlin, Uni Würzburg, TU Dortmund (:heart: HyLeC)
- Wird verwendet an 
  - BHT Berlin, Uni Würzburg, TU Dortmund
  - TU Berlin, Uni Osnabrück, Uni Magdeburg, Uni Münster, FH Wiesbaden, Uni Bern, EPFL, NYU, ...
- Frei verfügbar
  - <https://github.com/decker-edu/decker>
  - <https://decker.cs.tu-dortmund.de/>


# Erstellen von Foliensätzen


# Folienerstellung

::: columns-4-6

- Markdown-Quelltext wird in Web-Präsentation übersetzt
  - ungewohnt 🥲
  - einfache Versionsverwaltung 🙂
  - einfache Kollaboration 😀😃
- (Oder: PDF-Folien importieren)

![Quelltext dieser Präsentation](vbib-deck.md){ .code .markdown height=400px width=600px }

:::


# Präsentation von Foliensätzen


# Bilder und Videos

| ![Rektor Manfred Bayer](images/bayer.jpg "Bild von Manfred Bayer"){ height=250px }
| ![Kanzler Markus Neuhaus](images/neuhaus.jpg "Bild von Markus Neuhaus"){ height=250px }
| ![YouTube: "Wir sind die TU Dortmund"](videos/tu-dortmund.mp4 "Video über TU Dortmund"){ height=250px .controls .autoplay .muted }


# 3D-Modelle

![](demos/skeletal_animation/skeletal_animation.html "Interaktives 3D-Modell von Mario Botsch"){ width=1000px height=500px model=models/mario.bim texture=models/mario_color.jpg }


# Formeln & Whiteboard

- Formeln werden mit LaTeX gesetzt
  $$\begin{eqnarray*}
    \dot{\vec{u}} &=& 
    -\vec{u}\cdot\grad\vec{u}
    \;-\; \frac{1}{\rho}\grad p
    \;+\; \mathtip{\nu \laplace \vec{u}}{Diffusion}
    \;+\; \vec{f} \\[2mm]
    \grad \cdot \vec{u} &=& 0 
  \end{eqnarray*}$$
- Virtuelle Whiteboard für Annotationen und Herleitungen :thumbsup:


# Bibliographie mit BibTeX

- Bibliographie kann mit BibTeX verwaltet werden. 
- Zitationsstil über CSL (Citation Style Language) einstellbar.
- Hier ein Beispiel:
    - Realistische Avatare sind toll [@waltemate2018].
    - @achenbach2017 können sie in <10 Minuten erzeugen.


# Referenzen

::: { #refs }
:::


# Und noch viel mehr...

- Tabellen und interaktive Charts ([Chart.js](https://www.chartjs.org/))
- Diagramme ([Graphviz](https://graphviz.org/), [Mermaid](https://mermaid.js.org/), [TikZ](https://tikz.net/))
- Source-Code mit Syntax-Highlighting ([skylighting](https://github.com/jgm/skylighting))
- Interaktive Mathe-Funktionsplots ([Gnuplot](http://www.gnuplot.info/), [Plotly](https://plotly.com/javascript/))
- [Interaktive Demo-Programme (Javascript, C++, [H5P](https://h5p.org/), [Geogebra](https://www.geogebra.org/), ...)]{.outline}


# Demo: Navier-Stokes-Gleichungen

![Rechte Maustaste: Flüssigkeit injizieren. Linke Maustaste: Verwirbeln](demos/fluids/fluids.html "Interaktive Demo zu Flüssigkeitssimulation"){ width=1000px height=500px  }


# Interaktives Programmieren

::: { .sageCell width=1000px height=500px  .print }
``` python
from math import exp,pi,cos,sin
import matplotlib.pyplot as plt
import numpy as np

# Exakte Kurven plotten
T = np.linspace(0,25,200);
plt.clf()
plt.plot(T, [exp(-sin(t)) for t in T], 'r-')

# Approximation plotten
x=1; t=0; h=pi/16
X=[]; T=[]
while t < 25:
    X.append(x)
    T.append(t)
    x = x + h*(-x*cos(t));
    t = t+h
plt.plot(T, X, 'b*--')

plt.show()
```
:::


# Quiz: Multiple-Choice

::: columns-1-1
::: {.quizzer .choice }
Was ist der Vorname von Herrn Bayer?

- [ ] Rektor
    - Nicht ganz.
- [ ] Prof. Dr.
    - Knapp daneben!
- [ ] Magnifizienz
    - Fast richtig...
- [x] Manfred
    - Genau!
:::

![](images/bayer.jpg "Bild von Herrn Bayer"){height=250px}
:::


# Quiz: Zuordnung

::: {.quizzer .assignment}
- ![](images/bayer.jpg "Bild von Manfred Bayer"){height=100px}
    - Rektor
- ![](images/neuhaus.jpg "Bild von Markus Neuhaus"){height=100px}
    - Kanzler
- ![](images/scholz.jpg "Bild von Olaf Scholz"){height=100px}
    - Kanzler
:::


# Videoaufzeichnungen

- Videos werden direkt in den HTML-Folien aufgenommen
- Bildschirm, Kamera und Mikrophon werden aufgezeichnet
- Videos werden automatisch in Folien integriert
- Videos können automatisch transkribiert werden


# Konsumieren von Foliensätzen


# Features "für zuhause"

- Alle interaktiven Inhalte bleiben interaktiv :thumbsup:
- Quizzes werden zu Selbstlernaufgaben
- Vorlesungsvideos in Folien integriert
  - [Hier ein Beispiel (user=graphics, pw=rocks)](https://cg.cs.tu-dortmund.de/downloads/teaching/graphics/slides/01-intersections-deck.html)
- Fragen auf Folien anonym stellen/beantworten
- Handout-Modus für bessere Übersicht


# Design-Ziel Barrierefreiheit

::: incremental
- Atkinson Hyperlegible Font vom Braille Institute
- Light/Dark-Mode, Kontrastfarben
- Folien sind HTML-Webseiten, daher für Screen-Reader gut (vor)lesbar
- Live-Untertitel während eines Vortrags
- Automatisch generierte Untertitel für Videoaufzeichnung
:::


# Was bringt Decker?


# Was bringt Decker für Lehrende?

| Task               | vorher      | nachher    |
| ------------------ | ----------- | ---------- |
| Folien             | Powerpoint  | Decker     |
| Live-Captions      | Eve         | Decker     |
| Aufzeichnung       | Camtasia    | Decker     |
| Quizzes            | Mentimeter  | Decker     |
| Selbstlernaufgaben | Moodle      | Decker     |
| Video-Untertitel   | Amberscript | Decker     |
| Fragenstellen      | frag.jetzt  | Decker     |



# Was bringt Decker für Studierende?

::: w80
*"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."*

*"Die Funktion, das Video bei der aktuellen Folie zu starten, ist unglaublich hilfreich zur Klausurvorbereitung."*

*"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."*
:::