Decker-Day an der TU Dortmund

28. Februar 2024

Prof. Dr. Mario Botsch

Fakultät für Informatik & Hybrid Learning Center

🚀 by Decker

Was macht Decker?

Software für interaktive Präsentationen in Webbrowser:

  1. Erstellen von Foliensätzen
  2. Präsentation von Foliensätzen
  3. Veröffentlichung von Foliensätzen
  4. Anschauen von und Interagieren mit Foliensätzen

Was kann Decker?

Bilder und Videos

data/donkeykong-2.png
©️ Nintendo
©️ Nintendo

3D-Modelle und Animationen

Mathe-Formeln und virtuelles Whiteboard

\[ \begin{aligned} \dot{\vec{u}} &= -\vec{u}\cdot\grad\vec{u} \;-\; \frac{1}{\rho}\grad p \;+\; \nu \laplace \vec{u} \;+\; \vec{f} \\[2mm] \grad \cdot \vec{u} &= 0 \end{aligned} \]

Interaktive Demo-Programme

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

Live-Quizzes

Welche dieser Formeln ist die (erste) binomische Formel?

  • \(a^2 + b^2 = c^2\)
    • Nein, das ist der Satz des Pythagoras
  • \((a + b)^2 = a^2 + 2ab + b^2\)
    • Richtig, das ist die erste binomische Formel
  • \(\mathrm{e}^{\mathrm{i}\pi} + 1 = 0\)
    • Nein, das ist die eulersche Identität

Barrierefrei by Design

  • Folien sind HTML-Webseiten, daher für Screen-Reader gut (vor)lesbar
  • Handout-Modus, Light/Dark-Mode sowie Kontrastfarben
  • Live-Untertitel während eines Vortrags
  • Automatisch generierte Untertitel für Vorlesungsaufzeichnung (deutsch, englisch)

Und noch viel mehr…

  • Tabellen und Charts
  • Wissenschaftliche Zitationen mit Bibtex
  • Formatierung und Synatx-Highlighting von Source Code
  • Interaktive mathematische Funktionsplots
  • Interaktive Notebooks mit Python, Octave, Sage, R
  • Interaktive Demos mit H5P, Geogebra, Javascript, C++, Rust, …
  • Videoaufzeichnungen (Bildschirm, Kamera und Mikrophon) auf Knopfdruck 👍
  • Verschiedene Typen von Selbstlernaufgaben
  • Fragen auf Folien stellen/beantworten
  • Volltextsuche über alle Foliensätze im Projekt
  • Interaktive Vorlesungsskripte

Wie erstelle ich Decker-Folien?

Folienerstellung

  • Quelltext im Markdown-Format wird in Web-Präsentation übersetzt.
  • Oder: PDF-Folien (z.B. aus Powerpoint oder Beamer) können importiert werden.
---
title:        Decker-Day an der TU Dortmund
subtitle:     28. Februar 2024
author:       Prof. Dr. Mario Botsch
affiliation:  Fakultät für Informatik & Hybrid Learning Center
...


# Was macht Decker?

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

1. Erstellen von Foliensätzen
2. Präsentation von Foliensätzen
3. Veröffentlichung von Foliensätzen
4. Anschauen von und Interagieren mit Foliensätzen


# Was kann Decker?


# Bilder und Videos

::: columns-1-1
![:copyright: Nintendo](data/donkeykong-2.png){ height=300px }

![:copyright: Nintendo](data/donkeykong.mp4){ height=300px .controls .autoplay .muted }
:::


# 3D-Modelle und Animationen

::: columns-1-1
![:copyright: [ctxwing](https://sketchfab.com/ctxwing)](data/DamagedHelmet.glb){ width=500px height=400px shadow=1 }

![:copyright: [Google model-viewer](https://github.com/google/model-viewer)](data/RobotExpressive.glb){ width=500px height=400px autoplay=1 shadow=1 }
:::


# Mathe-Formeln und virtuelles Whiteboard

$$
\begin{aligned}
  \dot{\vec{u}} &= 
  -\vec{u}\cdot\grad\vec{u}
  \;-\; \frac{1}{\rho}\grad p
  \;+\; \nu \laplace \vec{u}
  \;+\; \vec{f} \\[2mm]
  \grad \cdot \vec{u} &= 0 
\end{aligned}
$$


# Interaktive Demo-Programme

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


# Live-Quizzes

::: center
Welche dieser Formeln ist die (erste) binomische Formel?
:::

::: quiz
- [ ] $a^2 + b^2 = c^2$
  - Nein, das ist der Satz des Pythagoras
- [X] $(a + b)^2 = a^2 + 2ab + b^2$
  - Richtig, das ist die erste binomische Formel
- [ ] $\mathrm{e}^{\mathrm{i}\pi} + 1 = 0$
  - Nein, das ist die eulersche Identität
:::


# Barrierefrei by Design

- Folien sind HTML-Webseiten, daher für Screen-Reader gut (vor)lesbar
- Handout-Modus, Light/Dark-Mode sowie Kontrastfarben
- Live-Untertitel während eines Vortrags
- Automatisch generierte Untertitel für Vorlesungsaufzeichnung (deutsch, englisch)


# Und noch viel mehr...

::: small
- Tabellen und Charts
- Wissenschaftliche Zitationen mit Bibtex
- Formatierung und Synatx-Highlighting von Source Code
- Interaktive mathematische Funktionsplots
- Interaktive Notebooks mit Python, Octave, Sage, R
- Interaktive Demos mit H5P, Geogebra, Javascript, C++, Rust, ...
- Videoaufzeichnungen (Bildschirm, Kamera und Mikrophon) auf Knopfdruck :thumbsup:
- Verschiedene Typen von Selbstlernaufgaben
- Fragen auf Folien stellen/beantworten
- Volltextsuche über alle Foliensätze im Projekt
- Interaktive Vorlesungsskripte
:::


# Wie erstelle ich Decker-Folien?


# Folienerstellung

::: columns-4-6
- Quelltext im Markdown-Format wird in Web-Präsentation übersetzt. 
- Oder: PDF-Folien (z.B. aus Powerpoint oder Beamer) können importiert werden.

![Quelltext dieser Präsentation](talk-deck.md){.code .markdown .small height=400px width=700px }
:::


# Decker in a Minute {.no-header}

![](data/decker-in-a-minute.mp4){ height=650px .controls }


# Feedback von Studierenden

::: {style="font-size: 0.8em; font-style: oblique"}
- "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 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."
- "Besonders die interaktiven Beispiele sind hilfreich, um Verständnis für das Gelernte zu schaffen."
- "Die Funktion, das Video bei der aktuellen Folie zu starten, ist unglaublich hilfreich zur Klausurvorbereitung."
- "Das Online-Skript ist das beste Lernmaterial, welches ich an dieser Uni bisher erleben durfte. Kommilitonen von anderen Unis/Studiengängen waren sehr neidisch."
:::

::: footer
:trophy: Hier die [Materialien zu "Mathe für Informatik 2, SS 2022"](https://ls7-gv.cs.tu-dortmund.de/downloads/teaching/mafi2/slides/index.html)   (User=mathe, Password=hilft)
:::


# Wer macht Decker?

::: w60
- **Wer entwickelt Decker?**
  - [Prof. Henrik Tramberend](https://tramberend.bht-berlin.de/) (Berliner Hochschule für Technik)
  - [Prof. Marc Latoschik](http://hci.uni-wuerzburg.de/people/marc/) (Uni Würzburg)
  - [Prof. Mario Botsch](https://ls7-gv.cs.tu-dortmund.de/people/botsch_mario.html) & [HyLeC-Team](https://hylec.tu-dortmund.de/) (TU Dortmund)
- **Wer verwendet Decker?**
  - BHT Berlin, Uni Würzburg, TU Dortmund, TU Berlin, Hochschule RheinMain, Uni Osnabrück, Uni Magdeburg, Uni Münster, Uni Bern, EPFL, UC Davis, NYU, ...
- **Wo gibt's Decker?**
  - <https://github.com/decker-edu/decker>
  - <https://decker.cs.tu-dortmund.de/>
:::


# Decker-Day am 28.02.2024


# Dritter Decker-Day am 28.02.2024

::: { .fragment style="font-size: 0.8em"}
| Wann         | Was                                                    | Wo                    |
| ------------ | ------------------------------------------------------ | --------------------- |
| 13:00--13:45 | Vorstellung von Decker                                 | OH12 E.003 + **Zoom** |
| 13:45--14:00 | Kaffeepause :coffee:                                   | OH12 Foyer            |
| 14:00--15:30 | Decker-Einführungskurs                                 | HyLeC                 |
| 14:00--15:30 | Erfahrungsaustausch Decker-User (Lehrende/Studierende) | OH12 E.003            |
| 15:30--16:00 | Kaffeepause :coffee:                                   | OH12 Foyer            |
| 16:00--17:00 | Brain-Storming für zukünftige Decker-Features          | OH12 E.003            |
| 17:00--19:00 | Weiterer Austausch bei leckerem Essen                  | HyLeC                 |
:::

[:vspace](1.5em)

::: {.center .fragment .outline }
Anmeldung bis zum **19.02.** unter <https://terminplaner4.dfn.de/decker-Day>
:::
Quelltext dieser Präsentation

Decker in a Minute

Feedback von Studierenden

  • “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 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.”
  • “Besonders die interaktiven Beispiele sind hilfreich, um Verständnis für das Gelernte zu schaffen.”
  • “Die Funktion, das Video bei der aktuellen Folie zu starten, ist unglaublich hilfreich zur Klausurvorbereitung.”
  • “Das Online-Skript ist das beste Lernmaterial, welches ich an dieser Uni bisher erleben durfte. Kommilitonen von anderen Unis/Studiengängen waren sehr neidisch.”

Wer macht Decker?

Decker-Day am 28.02.2024

Dritter Decker-Day am 28.02.2024

Wann Was Wo
13:00–13:45 Vorstellung von Decker OH12 E.003 + Zoom
13:45–14:00 Kaffeepause OH12 Foyer
14:00–15:30 Decker-Einführungskurs HyLeC
14:00–15:30 Erfahrungsaustausch Decker-User (Lehrende/Studierende) OH12 E.003
15:30–16:00 Kaffeepause OH12 Foyer
16:00–17:00 Brain-Storming für zukünftige Decker-Features OH12 E.003
17:00–19:00 Weiterer Austausch bei leckerem Essen HyLeC

Anmeldung bis zum 19.02. unter https://terminplaner4.dfn.de/decker-Day