Henrik Tramberend
BHT Berlin
Marc Latoschik
JMU Würzburg
Mario Botsch
TU Dortmund
Sebastian Hauer
TU Dortmund
Wer ist TU-extern? Wer nutzt Decker schon? Wer nimmt am Decker-Kurs teil? Wer ist Studi?
Wann | OH12 E.003 | HyLeC |
---|---|---|
13:00–13:45 | Vorstellung von Decker | |
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 🥗 🥘 |
Software für interaktive Präsentationen in Webbrowser:
---
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 🥗 🥘 |
Mehr dazu im Decker-Kurs
Mit ‘s’ ein Presenter-Display öffnen…
Mario
Peach
Donkey Kong
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
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
\[ \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} \]
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
Geht auch mit JupyterLab & Co
Wer bekommt am Ende die Prinzessin?
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!
:::
Wer bekommt am Ende die Prinzessin?
decker html; decker pdf; decker crunch; decker transcribe; decker publish
Wann | OH12 E.003 | HyLeC |
---|---|---|
13:00–13:45 | Vorstellung von Decker | |
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 🥗 🥘 |