---
title:    Decker-Day an der TU Dortmund
subtitle: 28. Februar 2024
authors: 
  - name: Henrik Tramberend
    affiliation: BHT Berlin
    photo: images/henrik.jpg
  - name: Marc Latoschik
    affiliation: JMU Würzburg
    photo: images/marc.jpg
  - name: Mario Botsch
    affiliation: TU Dortmund
    photo: images/mario.jpg
  - name: Sebastian Hauer
    affiliation: TU Dortmund
    photo: images/hauer.png
...


# Ziele des Decker-Day

::: incremental
- Alle lernen Decker (besser) kennen
  - Decker-Vorstellung
  - Decker-Kurs
  - Erfahrungsaustausch
- Ideen für zukünftige Entwicklungen 
- Vernetzung und Austausch
:::

[Wer ist TU-extern?]{ .fragment popup="center-down" }
[Wer nutzt Decker schon?]{ .fragment popup="center" } 
[Wer nimmt am Decker-Kurs teil?]{ .fragment popup="center" } 
[Wer ist Studi?]{ .fragment popup="center-up"} 


# Programm

| Wann         | OH12 E.003                         | HyLeC                           |
| ------------ | ---------------------------------- | ------------------------------- |
| 13:00--13:45 | [Vorstellung von Decker]{.outline} |                                 |
| 13:45--14:00 | Kaffeepause ☕                     |                                 |
| 14:00--15:30 | Decker-Einführungskurs             | Erfahrungsaustausch             |
| 15:30--16:00 | Kaffeepause ☕  🍰                |                                 |
| 16:00--17:00 | Zukünftige Features                |                                 |
| 17:00--19:00 |                                    | Vernetzung/Verköstigung 🥗 🥘 |


# Was ist Decker?


# Was ist Decker?

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

1. Erstellen von Foliensätzen
2. Präsentation von Foliensätzen 
3. Anschauen von und Interagieren mit Foliensätzen


# Open-Source "Zutatenliste"

![](images/pipeline.svg){ .embed width=90% }


------------------------------------------------------------------------------

# Vor der Vorlesung

------------------------------------------------------------------------------


# Folienerstellung

::: columns-4-6
::: center
- 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 }
:::

[Mehr dazu im Decker-Kurs]{ .fragment popup="center-up" }


------------------------------------------------------------------------------

# Während der Vorlesung

------------------------------------------------------------------------------


# Presenter Display

Mit 's' ein Presenter-Display öffnen...


# Videoaufzeichnungen

- Videos werden direkt in den HTML-Folien aufgenommen
- Bildschirm, Kamera und Mikrophon werden aufgezeichnet
- Videos werden automatisch in Folien integriert
- Videos können (*in neuer Decker-Version*) automatisch transkribiert werden


# Listen, Text-Stile, ...

::: columns-40-50

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

:::: pics
![Mario](images/supermario.png "Bild von Supermario"){ height=180px }
![Peach](images/peach.png "Bild von Prinzessin Peach"){      height=220px }
![Donkey Kong](images/donkeykong.png "Bild von Donkey Kong"){ height=300px }
::::

:::


# Bilder und Videos

::: columns-1-1
![©️ Nintendo](images/donkeykong-2.png "Bild vom DonkeyKong-Spiel"){ height=300px }

![©️ Nintendo](videos/donkeykong.mp4 "Video vom DonkeyKong-Spiel"){ height=300px .controls .autoplay .muted }
:::


# 3D-Modelle

![[Model by marcozdesigner](https://sketchfab.com/3d-models/mario-bros-12v-e235dce325fd4461a15bc8730e10be80), licensed under Creative Commons Attribution.](models/mario.glb){ width=800px height=400px shadow=1 }


# Webseiten

![](https://de.wikipedia.org/wiki/Super_Mario){ width=1000px height=500px .print .iframe }


# Interaktive Charts

::: columns-1-1

``` { .bar-chart width=500px height=400px }
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
```

``` { .pie-chart width=500px height=400px }
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
```

:::



# Mathe-Formeln

::: math-incremental
$$
\small
\begin{aligned}
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{aligned}
$$
:::

::: incremental
- Herleitungen auf den Folien sind zu schnell
- Herleitungen an der Tafel sind nicht (gut) in Videoaufzeichnung
- Das virtuelle Whiteboard ist ein guter Kompromiss :thumbsup:
:::



# Source Code

::: columns-50-50

``` python
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)
```
Caption: Irgendwas in Python


``` cpp
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);
```
Caption: Irgendwas in C++

:::

Inline-Code geht auch: `for (int i=0; i<100; ++i) sum += i;`{.cpp}


# 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 }
:::


# Interaktive Demo-Programme

- Interaktive Demos können in die Folien eingebettet werden
- Studierende können selber damit experimentieren
- Entwickeln der Demos in...
  - (H5P)
  - Geogebra
  - Javascript
  - Von C++ oder Rust nach WebAssembly
  - ...


# Bezier-Kurven mit Javascript

![de Casteljau Algorithmus: Kontrollpunkte verschieben, Parameter t verändern](demos/bezier/deCasteljau.html){ width=1000px height=500px .print }


# Voronoi-Diagram mit D3

![Voronoi-Diagramm (Punkte mit Maus verschieben)](demos/voronoi/voronoi.html){ width=1000px height=500px .print }


# Fluid Simulation mit C++

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


# Interaktive Mathe mit Geogebra

![App von [Andreas Lindner](https://www.geogebra.org/m/Cvn52Hg6#material/ANaWJE7H)](/demos/geogebra/gradient.ggb){ height=500px aspect-ratio=800/600 app-width=800 app-height=600 }



# Interaktives Programmieren

::: { .sageCell width=1200px height=500px  .print }
``` 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]{.footer}

[Geht auch mit JupyterLab & Co]{ .fragment popup="center-up" }


# Live-Quizzes

::: center
Wer bekommt am Ende die Prinzessin?
![](images/peach.png){height=70px}
:::

::: {.quiz .w80}
- [ ] Donkey Kong ![](images/donkeykong.png){height=70px}
    - Nein, der ist böse!
- [ ] Sponge Bob ![](images/spongebob.png){height=70px}
    - Nein, der lebt unter Wasser!
- [ ] Kleine A-Loch ![](images/arschloch.png){height=70px}
    - Nein, den mag keiner!
- [X] Supermario ![](images/supermario.png){height=70px} 
    - Klar!
:::


::: { .fragment popup="center" style="color: unset" }
``` 
Wer bekommt am Ende die Prinzessin?

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


------------------------------------------------------------------------------

# Nach der Vorlesung

------------------------------------------------------------------------------

# Features "für zuhause"

::: incremental
- Alle Inhalte bleiben interaktiv :thumbsup:
- Suchen in Foliensatz und über alle Foliensätze
- Vorlesungsvideos in Folien integriert ([Beispiel](https://ls7-gv.cs.tu-dortmund.de/decker/deckerday2024/einladung-deck.html))
  - Video springt automatisch an die Stelle, wo die aktuelle Folie erklärt wird.
  - Cursor-links/Cursor-rechts springt im Video folienweise vor/zurück.
  - Abspielgeschwindigkeit lässt sich einstellen
- Fragen auf Folien stellen/beantworten
:::


# Selbstlernaufgaben

::: center
Wer bekommt am Ende die Prinzessin?
![](images/peach.png){height=70px}
:::

::: {.quiz .w80}
- [ ] Donkey Kong ![](images/donkeykong.png){height=70px}
    - Nein, der ist böse!
- [ ] Sponge Bob ![](images/spongebob.png){height=70px}
    - Nein, der lebt unter Wasser!
- [ ] Kleine A-Loch ![](images/arschloch.png){height=70px}
    - Nein, den mag keiner!
- [X] Supermario ![](images/supermario.png){height=70px} 
    - Klar!
:::


# Selbstlernaufgaben

::: quiz-mi
Prinzessin
: ![](images/peach.png){height=100px}

Donkey Kong
: ![](images/donkeykong.png){height=100px}

Supermario
: ![](images/supermario.png){height=100px}
:::


# Selbstlernaufgaben

::: columns-50-50

:::: {.center .quiz-ft}
![](images/peach.png){height=150px}
[:vspace](30px)
Wie heißt die Prinzessin?

- [x] Peach
- [ ] Lilifee
::::

:::: {.center .quiz-ic}
![](images/donkeykong.png){height=150px}
[:hspace](30px)
![](images/supermario.png){height=150px}
[:hspace](30px)
![](images/spongebob.png){height=130px}\
[:vspace](40px)
Die Prinzessin ist verliebt in 

- [ ] Donkey Kong
- [x] Supermario
- [ ] Sponge Bob
::::

:::


# Barrierefrei by Design

- Folien sind HTML-Webseiten, daher für Screen-Reader gut (vor)lesbar
- Auch Mathe-Formeln sind für Screen-Reader geeignet
- Handout-Modus, Light/Dark-Mode, Kontrastfarben
- Live-Untertitel während eines Vortrags
- Automatisch generierte Untertitel für Vorlesungsaufzeichnung ([Beispiel](https://ls7-gv.cs.tu-dortmund.de/decker/deckerday2024/einladung-deck.html))



# Zusammenfassung


# Was bringt das?

::: incremental
- **Was bringt Decker für Lehrende?**
    - Alles in einem Tool (*Decker*), alles aus einem Guss
    - Text-basierter Workflow gewöhnungsbedürftig, dann aber sehr effizient:\
      `decker html; decker pdf; decker crunch; decker transcribe; decker publish` 
- **Was bringt Decker fü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."*
    - *"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."*
:::



# Programm

| Wann         | OH12 E.003                 | HyLeC                           |
| ------------ | -------------------------- | ------------------------------- |
| 13:00--13:45 | Vorstellung von Decker     |                                 |
| 13:45--14:00 | [Kaffeepause ☕]{.outline} |                                 |
| 14:00--15:30 | Decker-Einführungskurs     | Erfahrungsaustausch             |
| 15:30--16:00 | Kaffeepause ☕  🍰        |                                 |
| 16:00--17:00 | Zukünftige Features        |                                 |
| 17:00--19:00 |                            | Vernetzung/Verköstigung 🥗 🥘 |

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)

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);