Wild, Bunt & Wissenschaftlich

Ein etwas anderes HowTo für die digitale Lehre

Marc Erich Latoschik

Chair for Human-Computer Interaction

Wild und Bunt …

Einige von 1000+ Dont’s

Not engaging and no clarity

Wissenschaftlich?

Ziele

Inhaltsentwicklung (Authoring)
Mediengestaltung
Präsentation

für E-Learning und Blended Learning.

Anforderungen

Multimedial
Wissenschaftlich
Verfügbar und interoperabil

Gestaltungsprinzipien

Funktionalität
Einfachheit
Konsistenz

(Ballstaedt 1997)

Kleine Anforderungsanalyse E-Authoring

Beobachtung

Vielfältige Werkzeuge existieren.

Anforderungserhebung auf Basis von

Nutzerfeedback
Work-flow Analyse
Erfahrungsaustausch

Gegenüberstellung verschiedener Ansätze gemäß Beurteilung der Anforderungen.

Kleine Anforderungsanalyse E-Authoring

Anforderung	Word	Powerpoint	LaTeX (PDF)	Authorea	Articulate	Decker
E-Learning	\(\color{dred}-\)	\(\color{dred}-\)	\(\color{dred}-\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)
Multimedial	\(\color{blue}\checkmark\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)
Onlinequellen	\(\color{blue}\checkmark\)	\(\color{blue}\checkmark\)	\(\color{blue}\checkmark\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)
Wiss. Zitieren	\(\color{blue}{\checkmark\checkmark}\)	\(\color{dred}-\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)	\(\color{dred}-\)	\(\color{dred}-\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)
Formelsatz	\(\color{blue}{\checkmark\checkmark}\)	\(\color{blue}\checkmark\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)	\(\color{dred}-\)	\(\color{dred}-\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)
Wiss. Visual.	\(\color{dred}-\)	\(\color{dred}-\)	\(\color{blue}{\checkmark\checkmark}\)	\(\color{dred}-\)	\(\color{dred}-\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)
Interaktivität	\(\color{dred}-\)	\(\color{blue}\checkmark\)	\(\color{dred}-\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)
Verfügbarkeit	\(\color{blue}\checkmark\)	\(\color{blue}\checkmark\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)	\(\color{blue}\checkmark\)	\(\color{blue}\checkmark\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)
Usability	\(\color{blue}{\checkmark\checkmark}\)(\(\color{blue}{\checkmark}\))	\(\color{blue}{\checkmark\checkmark}\)(\(\color{blue}{\checkmark}\))	\(\color{dred}-\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)	\(\color{blue}{\checkmark\checkmark\checkmark}\)	\(\color{blue}{\checkmark}\)(\(\color{blue}{\checkmark\checkmark}\))

Ausgabeformat

Multimedial

Bilder, Audio, Video
Animationen & Websites

Wissenschaftlich

Literaturverwaltung
Formelsatz

Verfügbar

Weltweiter Standard
Omnipresente Browser

Wenig nutzergerecht

Eingabeformat

Markdown

Vereinfachte Sprache für Mediengestaltung.
Trennung von Inhalt und Formatierung.
Einfache Syntax (Markdown) im Vergleich zu HTML (Markup)

GUI Editor (in Arbeit, Web-basiert)

Wie in diesem Beispiel
Aber für verschiedene E-Lehrformate
(nicht nur Präsentation)

Ausgabe


# Ausgabeformat {layout="columns"}

##  {.left}
![](img/html5-logo.svg)

## Multimedial {.right}
-   Bilder, Audio, Video
-   Animationen & Websites

## Wissenschaftlich
-   Literaturverwaltung
-   Formelsatz

## Verfügbar
-   Weltweiter Standard
-   Omnipresente Browser

Ausgabe


<section class="slide level1" data-layout="columns">
<h1>Ausgabeformat</h1>
<div class="multi-column-row multi-column-row-3">
<div class="grow-1 column column-1">
<div class="box left">
<h2 class="left"></h2>
<p><img data-src="img/html5-logo.svg"></p>
</div>
</div>
<div class="grow-1 column column-3">
<div class="box right">
<h2 class="right">Multimedial</h2>
<ul>
<li>Bilder, Audio, Video</li>
<li>Animationen &amp; Websites</li>
</ul>
</div>
<div class="box">
<h2>Wissenschaftlich</h2>
<ul>
<li>Literaturverwaltung</li>
<li>Formelsatz</li>
</ul>
</div>
<div class="box">
<h2>Verfügbar</h2>
<ul>
<li>Weltweiter Standard</li>
<li>Omnipresente Browser</li>
</ul>
</div>
<div class="box note fragment" data-align="center">
<h2 class="note" data-align="center">Wenig nutzergerecht</h2>
</div>
</div>
</div>
</section>

Features in a Nutshell

Seitenlayout

Bilder

Kombination

Mit allen anderen Elementen:
Bilder, Texte, Töne, Videos, Web

Hintergrund

Anpassbar (next)

##  {.left}
![](img/icon-1328421_1920.jpg)

## Kombination {.right}
-   Mit allen anderen Elementen:
-   Bilder, Texte, Töne, Videos, Web

## Hintergrund
-   Anpassbar (next)

Bilder

Notiz

Mit allen anderen Elementen:
Bilder, Texte, Töne, Videos, Web

Hintergrund

Anpassbar

[^1]

Ton und Musik

Manuell:

Vögel

Bach

Brandung

Hafen

Automatisch:

Siehe vorherige Folien
Musik: Jason Shaw, Running Waters

Videos

Umsetzung


![](movies/2016-bbb-overview.mp4)

Videos von YouTube

Umsetzung


![](youtube:f8KPtlZc0t4)

Online Unterstützung

Basistechnologie ist Stütze des World-Wide Web (WWW).
Vollständige Online-Integration und Vernetzung.

Beispiel

Verknüpfung mit einer Website als link (click me).
oder nahtlos eingebettet (s. n. Seite).

Vorteile

Browser muss nicht verlassen werden.
Konsistente Arbeitsumgebung.
Kein Anwendungswechsel und Bruch im Workflow.

Wissenschaftlich

Zitieren

Das Ergbnis von Latoschik et al. (2016) wurde bestätigt (Lugrin et al. 2016).
Vielzahl von Zitierstilen verfügbar.


- Das Ergbnis von @latoschik:2016b 
  wurde bestätigt [@lugrin:2016b].
- Vielzahl von Zitierstilen verfügbar.

Formelsatz

\[\begin{equation} \sum_{i=0}^m m_i^2 \cdot \ddot{x} + \beta \cdot \dot{x} + c \cdot x \end{equation}\]


\begin{equation}
\sum_{i=0}^m m_i^2 \cdot \ddot{x} + \beta \cdot \dot{x} + c \cdot x
\end{equation}

Wissenschaftlich

Definitionen (und mehr)

Virtual Reality

A Human-Computer interface

based on an (artificial) computer generated environment
perceived as reality using multiple human senses.

Bemerkungen

Literaturliste wird automatisch eingefügt sobald Überschrift Literatur benutzt wird.
Erweiterbarkeit zu Online-Quellen möglich und damit direkter Zugriff auf Literatur.

Wissenschaftliche und technische Illustrationen

Vektorgrafiken

Interaktiv

Interaktiv Advanced

Datenvisualisierung

Eingebettetes Graphviz

Rendered (SVG)

Raw Code

``` {.dot .render width="80%"}
digraph {
  node [style = filled]
  A {fillcolor = yellowgreen}
  A -> B 
  A -> C
  C -> D
  C -> E
  C -> F
  B -> D
}
```

Interaktivität

Eingebettetes Gnuplot

Rendered (SVG)

Per Verweis


![](/img/fit-example.gnuplot)

Interaktiv

Änderungen an Daten werden direkt angezeigt.

Virtuelle Tafel

\[\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}\]

Beobachtung

Herleitungen an der Tafel sind nicht in Videoaufzeichnung.
Herleitungen auf den Folien sind zu schnell.

Lösung

Eine virtuelle Tafel ist ein guter Kompromiss.

Lernkontrolle und Selbststudium

Multiple Choice

Was sind typische Ziele im Interface Design?

Live Version

Utility
Anwendung muss einen Nutzen haben.
Acceptance
Sonst wird es nicht genutzt.
Materials
Da herrscht Freiheit
Regulations
Das bedenken wir bei der Umsetzung.

Offline Version

Utility
Anwendung muss einen Nutzen haben.
Acceptance
Sonst wird es nicht genutzt.
Materials
Da herrscht Freiheit
Regulations
Das bedenken wir bei der Umsetzung.

## {.qmc}
-  [X] Utility
   - Anwendung muss einen Nutzen haben.
-  [X] Acceptance
   - Sonst wird es nicht genutzt.
-  [ ] Materials
   - Da herrscht Freiheit
-  [ ] Regulations
   - Das bedenken wir bei der Umsetzung.

Zurodnungsfragen

Aufgabe

Ordnen Sie per drag-and-drop die unten stehenden Begriffe korrekt zu.

Fundamental law

Accepted procedure

Model for imitation

Design Principle

Design Rule

Design Pattern


## {.qmi}

**Design Principle**
:   Fundamental law

**Design Rule**
:   Accepted procedure

**Design Pattern**
:   Model for imitation

Ergebnisaufgaben

Auswahl

Decker ist in der Sprache

Scala
leider nicht ;).
Haskell
Ja, wegen Pandoc.
Java
Yack, no way.
Ruby
Auch leider nicht.

implementiert und basiert dabei auf

Pandoc
Stand da doch schon im Tooltip.
PowerPoint
wohl eher nicht…

Freitext

Die Multiplikation \(2*2\) ergibt…?

4
Die perfekte Lösung
vier
Auch ok
four
Deutscher Studiengang!
fier
RTL?


Die Multiplikation $2*2$ ergibt...?

- 4
    - Die perfekte Lösung 
- vier
    - Auch ok 
- four
    - Deutscher Studiengang!
- fier
    - RTL?

Tests

Gleiches Format für Klausuren/Tests
Automatische Auswertung

Strukturierung, Konsistenz und Layout

Blöcke

Betonung im Layout für wiederkehrende strukturell/didaktische Elemente.
Erleichtert Erkennung und Auffassung.
Anpassbar an beliebige Layouts und corporate identities.

Frage

Wie bekommen wir Konsistenz?

Antwort

Durch die Verwendung von Vorlagen.

Beobachtung

Vorlagen sollten Inhalt beschreiben.

Notiz

Immer an Content first denken.

Warnung

Immer an Content first denken.

Beispiel

Statt bluebox lieber example.

Theorem

Sei \(E=mc^2\) und \(x=2\)

Definition: CSS

Cascading Style Sheet

Zusammenfassung

Decker

Interaktives Werkzeug zur Unterstützung des Markdown-zu-HTML Prozesses.

Macht Lehrmaterialen

Multimedial
Wissenschaftlich
Verfügbar und Quelloffen

Work in Progress

GUI
SCORM Integration
Sebstlernvarianten

Exemplarisches Feedback aus der Lehrevaluation

Was war gut?

Untermalung der Erklärungen durch Skizzen
Quizzes in den Vorlesungsfolien
Optisch ansprechende Vorlesungsfolien mit vielen Skizzen und Grafiken erleichtern das Verständnis enorm.

Und weiter …

Die Vorlesung, die Aufbereitung der Materialien, die Folien, die Übungen und die Art des Dozent sollten als Lehrmaterial für beinahe alle anderen Dozenten bereitgestellt werden.

Auch die Umsetzung der digitalen Lehre in diesem Semester ist mehr als gut und wird in keiner anderen Veranstaltung so erreicht. Generell sollte diese Art der Vorlesung/Übung in Zukunft verstärkt auftreten.

One More Thing…

Konfiguration und Roll-out

publish:
  rsync: 
    destination: rsync.hci.informatik.uni-wuerzburg.de:/mnt/hci/download/talks/20201118-tdl/ml
    options:
        - --no-perms
        - -rv

And then

> decker publish

And some …

Literatur

Ballstaedt, Steffen-Peter. 1997. Wissensvermittlung: Die Gestaltung von Lernmaterial. Weinheim: Psychologie Verlags Union / Verlagsgruppe Beltz.

Latoschik, Marc Erich, Jean-Luc Lugrin, Michael Habel, Daniel Roth, Christian Seufert, and Silke Grafe. 2016. “Breaking Bad Behavior: Immersive Training of Class Room Management.” In Proceedings of the 22Nd Acm Conference on Virtual Reality Software and Technology, 317–18. VRST ’16. New York, NY, USA: ACM. https://dl.acm.org/authorize.cfm?key=N40662.

Lugrin, Jean-Luc, Marc Erich Latoschik, Michael Habel, Daniel Roth, Christian Seufert, and Silke Grafe. 2016. “Breaking Bad Behaviours: A New Tool for Learning Classroom Management Using Virtual Reality.” Frontiers in ICT 3: 26. http://journal.frontiersin.org/article/10.3389/fict.2016.00026.