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

  1. Inhaltsentwicklung (Authoring)
  2. Mediengestaltung
  3. Präsentation

für E-Learning und Blended Learning.

finger-769300_1920.jpg

Anforderungen

  1. Multimedial
  2. Wissenschaftlich
  3. Verfügbar und interoperabil

color-patterns-1984229_1920.jpg

Gestaltungsprinzipien

  1. Funktionalität
  2. Einfachheit
  3. Konsistenz

(Ballstaedt 1997)

Kleine Anforderungsanalyse E-Authoring

authoring-tools.jpg

Beobachtung

  • Vielfältige Werkzeuge existieren.

Anforderungserhebung auf Basis von

  1. Nutzerfeedback
  2. Work-flow Analyse
  3. 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

html5-logo.svg

Multimedial

  • Bilder, Audio, Video
  • Animationen & Websites

Wissenschaftlich

  • Literaturverwaltung
  • Formelsatz

Verfügbar

  • Weltweiter Standard
  • Omnipresente Browser

Wenig nutzergerecht

Eingabeformat

markdown-logo.svg

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

icon-1328421_1920.jpg

icon-1328421_1920.jpg

icon-1328421_1920.jpg

icon-1328421_1920.jpg

Seitenlayout

icon-1328421_1920.jpg

icon-1328421_1920.jpg

icon-1328421_1920.jpg

icon-1328421_1920.jpg

icon-1328421_1920.jpg

icon-1328421_1920.jpg

icon-1328421_1920.jpg

icon-1328421_1920.jpg

icon-1328421_1920.jpg icon-1328421_1920.jpg

icon-1328421_1920.jpg icon-1328421_1920.jpg

icon-1328421_1920.jpg icon-1328421_1920.jpg

Bilder

icon-1328421_1920.jpg

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

icon-1328421_1920.jpg

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

Vorteile

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

Wissenschaftlich

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

de Casteljau Algorithmus

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-logo.png

    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

    elearning-02.jpg

    Was war gut?

    • Untermalung der Erklärungen durch Skizzen
    • Quizzes in den Vorlesungsfolien
    • Optisch ansprechende Vorlesungsfolien mit vielen Skizzen und Grafiken erleichtern das Verständnis enorm.

    Und weiter …

    Die Vorlesung, die Aufbereitung der Materialien, die Folien, die Übungen und die Art des Dozent sollten als Lehrmaterial fü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/Übung in Zukunft verstä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.