Workshop "Digitale Skripte: Interaktive Lehrmedien selber erstellen"

Hintergrund Digitale Skripte

Bedarf

Im Projekt Studier- und Medienkompetenz Online des Universitätskollegs der UHH wurde ab 2013 ein Workflow zur Produktion von Lernmodulen als Open Educational Ressources gesucht. Kriterien waren:

• langfristig nutzbar und bearbeitbar
• Nutzung von Open Source Technologien
• Single Source Publishing (Eine Quelle, div. Ausgabeformate)
• Einbindung von dynamischen und Interaktiven Medien

Aktuell geläufige Praxis

Aktuell werden für Lernmaterial meist Dokumente im Portable Document Format, kurz PDF genutzt. Die Zukunft des Lernmaterials sollte nicht das PDF sein. PDFs sind ursprünglich als Format zur Auslieferung von Dateien an Druckereien entwickelt worden. PDFs teilen folgende Eigenschaften:

• kaum bearbeitbar oder wiederverwendbar
• mangelhafte Barrierefreiheit
• keine dynamischen und interaktiven Medien
• fixe Darstellung, daher auf kleinen Screens schlecht zu lesen
• benötigen eigenen Reader, nicht Menschen-Lesbar

Konzept digitaler Skripte

Digitale Skripte basieren auf offenen Technologien. Das Konzept beschreibt einen Workflow, weniger ein Produkt.

Komponenten des Workflows zur Erstellung digitaler Skripte

• Markdown (md) als Beschreibungssprache und Ausgangsbasis des Single-Source Publishing
• Editor zum Schreiben, ggf. mit Vorschau
• Markdown-Converter zur Erstellung von verschiedenen Ausgabeformaten, etwa. HTML, PDF, ePub
• Cascading Stylesheet (CSS) zum steuern des Aussehens der Ausgaben
• JavaScript zum Einfügen von Interaktionen in die HTML-Ausgabe

Digitale Skripte als Eigenentwicklung

• Eigenentwicklung von JavaSkript und CSS für HTML-Ausgabe
• Navigation (auch mit Gesten)
• Responsives Layout
• Interaktive Elemente
• Eigenentwicklung von Plugins für Atom-Editor und MS Visual Studio Code
• Erstellung der Ordnerstruktur und Kopieren der benötigten Dateien
• Einfügen von HTML-Sniplets zur Erstellung der Dokumentenstruktur
• Einbindung von Showdown als Konverter zum Erstellen des HTML-Codes
• Einbindung von Cromium zur Erstellung der PDF-Ausgabe

Alle Eigenentwicklungen des Bereichs Digitalisierung in der Lehre MIN (DL.MIN) sind Open Source und werden in GitHub-Repositories veröffentlicht.

Links:

• Git-Hub Seite mit alle Repositories des DL-MIN (ehem. eLB-MIN): GitHub
• Wiki zum learn.js: elearn.js Wiki
• Erste Dokumentation digitaler Skripte von 2016 als digitales Skript: Digitale Skripte
• Skript Digitale Skripte Schritt für Schritt, noch ohne Atom-Plugin: DS Schritt für Schritt

Einsatz im Projekt "RLab / RLab 2.0"

• im Lehrlabor des Universitätskollegs 2017/18 und 2018/19 gefördertes Projekt
  
  • RLab
  • RLab 2.0
  • Projektblog: https://rlab.blogs.uni-hamburg.de
• Erlernen der Programmiersprache / Statistiksoftware R erleichtern:
  • Grundidee: R innerhalb von R erlernen
  • Erstellung von Lerninhalten (Blended Learning-Settings, Selbstlernen, Nachschlagewerk/ Prüfungsvorbereitung)
• Kombination aus R-Kursen, Digitalen Skripten und Blog
  • R-Kurse: interaktive R-Skripte, die den Umgang mit R erklären (ausführbar z.B. in R-Studio, Jupyter Notebook
  • Digitale Skripte: ergänzende Materialien, Grundlagen und Hintergrundwissen; freie CC-Lizenz
  • Blog: dynamische, leicht anpassbare Plattform zur Bereitstellung der Inhalte; Möglichkeit zu Austausch und Feedback

Einsatz im Projekt "Studier- und Medienkompetenzen Online"

• "SuMO - Studier- und Medienkompetenzen Online"
  • entwickelt im UK 1.0 (2012-2016), seit 2016 Teil des Kurse-Angebots des Universitätskollegs
  • Projektblog: https://sumo.blogs.uni-hamburg.de/
• Online-Angebot mit Fokus auf Tutorials zum Selbstlernen
  • Förderung von Studierkompetenzen (Selbstorganisation, Lernstrategien, Gruppenarbeit, Feedbackkultur, …)
  • Ausbau der Medienkompetenz (z.B. Erstellung von Online-Tests, Digitale Skripte zu Legetrick-Videos)
  • Erstellung der Inhalte unter Einbeziehung Studierender und Lehrender

Weitere Beispiele & Links:

• Skript mit interaktivem Zeitstrahl:
  Stilepochen
• Präsentation Interaktive Medienformate
  Interaktive Medienformate für OER
• Methodenkompetenz-Blog
  Zeit- und Aufgabenmanagement
  …
  Technische Grundlagen der Videoproduktion
• Skript als Ergänzung eines Videos:
  Gut Ankommen! Erste Tipps zum Studienstart
• digitale Einführungsstudienbriefe der HFH Hamburger Fern-Hochschule
  Ein­füh­rung in den Master­studien­gang Wirt­schafts­ingenieur­wesen
  Digitali­sie­rung und Indus­trie 4.0 – Eine Ein­füh­rung zu aus­ge­wähl­ten neueren Ent­wick­lungen in Wirt­schaft und Ge­sell­schaft

Übung: Technische Voraussetzungen für den Workshop

Hier eine kurze Checkliste um alle Teilnehmer für die nächste Phase startklar zu machen. Alles gecheckt?

• [ ] Rechner ist eingeschaltet und hochgefahren?
• [ ] User ist eingeloggt?
• [ ] Inhalt des USB-Sticks ist verfügbar?
• [ ] Übersicht über den Inhalt verschafft?
• [ ] Start des Editors Atom…
• [ ] Installation des Packages "atom-elearnjs" (Preferences/Einstellungen -> Install (linke Seite) -> Suchfeld: atom-elearnjs)

Markdown

Markdown ist eine Auszeichnungssprache, mit der sich maschinenlesbarer Text z.B. für die Ausgabe im Web formatieren und strukturieren lässt. Markdown ist im Vergleich zu HTML wesentlich einfacher gehalten und ähnelt dabei der Wiki-Syntax oder auch typischen Schreibgewohnheiten beim Verfassen von E-Mails. Markdown benötigt ausgesprochen wenig Software: Markdown-Dokumente können in jedem einfachen Texteditor erstellt und mit der Dateiendung .MD gespeichert werden. Damit geht ein grundsätzlicher Vorteil einher: ablenkungsfreies Schreiben. Mittlerweile gibt es aber auch für alle Plattformen (WIN/MAC/Linux) und mobile Geräte Editoren, die praktische Zusatzfunktionen bieten (z.B. automatische Vervollständigung, farbliche Hervorhebung, Preview-Fenster, …) sowie eine Reihe von Online-Editoren. Mit Markdown verfasste Inhalte sind naturgemäß sehr schlank gehalten (kleine Dateien und reduzierter Code), in vielen Plattformen direkt lesbar und anwendbar - und sie lassen sich leicht in andere Formate wie bspw. HTML, PDF, ePub oder LaTeX exportieren. Aufgrund der einfachen Syntax und der genannten Vorteile eignet sich Markdown sehr gut als Ausgangspunkt für die Erstellung digitaler Skripte.

Links:

• Online-Editor https://dillinger.io/
• Markdown-Editor mit "Live-Preview" https://typora.io/
• Atom.io
• Commonmark Markdown Basics mit Interaktivem Tutorial (engl.):Tutorial
• Markdown Cheatsheet von Mac & i:Cheatsheet pdf

Wie sieht Markdown aus?

Markdown-Code innerhalb dieses Skriptes - die "Ausführung" ist hier unterdrückt:

# Überschrift 1

</section>

<section markdown="1" name="Überschrift 2">
##<!--no-section-->Überschrift 2

</section>

<section markdown="1" name="Überschrift 3" class="sub">
###<!--no-section-->Überschrift 3
####<!--no-section-->Überschrift 4

Ein normaler Absatz wird mit einer Leerzeilen davor abgetrennt.

*ein Stern vor und nach Bereich macht kursiv* und
**Zwei Sterne machen fett**.
Ein Zeilenumbruch geht mit drei Leerzeichen.

> Ein Zitat wird mit dem Pfeil markiert.
> Dann wird es etwas eingerückt

* Aufzählung
* geht mit Stern
* und Leerzeichen

1. Nummerierung
2. geht mit
3. Zahlen und Punkt
4. und Leerzeichen

![Alt-Text für eine Abbildung](NameDesBildes.jpg)

[Bezeichnung für einen Link](http://www.urlEinesLinks.html)

&lt;http://www.schnell_Link_Ohne_Bezeichner.html&gt;

    Code-Blöcke werden mit vier Leerzeichen (tab) vor der Zeile markiert.
    So kann man dann alle Zeichen verwenden,
    die sonst für Markdown etwas bedeuten.

Online-Editor dillinger.io:

Atom mit Markdown (links) und Preview-Fenster:

Übung: Markdown-Dokument erstellen und speichern

• [ ] Erstelle einen neuen Tab (File -> New File / Doppelklick in die Tableiste) in Atom. Verfasse einen Text und formatiere/strukturiere ihn per Markdown-Syntax.
  Für den Text kann auch ein Blindtextgenerator verwendet werden.
  Bei den Auszeichnungen hilft der Cheatsheet.
• [ ] Füge eine Grafik in den Text ein!
  Grafiken finden sich bei den Digitalen Skripten im Ordner "assets/img".
• [ ] Speichere das Ergebnis als Markdown-Datei (xyz.md) auf dem USB-Stick!

Export HTML

Wir nutzen zum Erstellen der HTML-Datei und der Ordnerstruktur mit den benötigten JavaScript- und CSS-Dateien das Package elearn.js im Atom-Editor.

Beim Ausführen des Befehls Save as HTML wird aus der aktiven Markdown-Datei eine HTML-Datei geschrieben, die benötigten HTML-Sniplets zusätzlich eingefügt und die benötigte Ordnerstruktur mit allen benötigten Dateien erstellt. Hierzu können vor dem Export einige Optionen gewählt werden.

HTML-Metadaten

Eine HTML-Seite sollte ein paar grundlegender Metadaten beinhalten. Der Angaben stehen in der fertigen Datei im <head> Bereich. Das eleran.js Atom-Paket füllt die Daten automatisch aus. Hierzu muss der Makdown-Date folgender Abschnitt ein hinzugefügt werden:

 ---
 Author: Name Author
 Description: Enter Descriptions
 Keywords: Key, Words
 ---

Übung: Export

• [ ] Metadaten hinzugefügt?
• [ ] .md als html über das Paket elearn.js exportiert?

Seiteneinteilung durch Sektionen

Die HTML-Seite wird durch Sektionen in mehrere Abschnitte unterteilt, durch die sich der Nutzer blättern kann. Durch das learn.js Atom-Packet werden Sektionen im HTML automatisch hinzugefügt.

<section name="meine erste Section">
</section>

Sektionen können verschachtelt werden, um eine Hierarchie zu erzeugen.

<section name="obersektion">
  Inhalt...
    <section name="untersektion 1"> Inhalt ...</section>
    <section name="untersektion 2"> Inhalt ...</section>
</section>

Das elearn.js Paket kann Sektionen automatisch bei Überschriften erzeigen. Die Überschriftenebene für diese automatische Unterteilung kann man in den Einstellungen vom Paket genauer definieren.

Wenn ich viele Überschriften mit wenig Inhalt habe kann ich die Anzahl der Sektionen reduzieren, damit nicht zu leere Seiten entstehen.

• Ausklammern einzelner Überschriften aus dem automatischen Prozess der Sektionserzeugung

###<!--no-section-->Meine Überschrift, die nicht unterteilen soll <!--no-section-->

• Ausschalten der automatischen Generierung und manuelles Einfügen von von Sections

|||Name_Section|||

Anhand der Sektionen kann an beleibiger Stelle des Dokuments eine Übersicht aller Sektionen eingefügt werden. Fügen Sie folgende Zeilen an der gewüncshten Stelle in das Markdown-Dokument ein:

<div id="content-overview" class="kachel">
    <!-- Keep this empty. This will be automatically generated. -->
</div>

Der oben Stehende Code erzeigt eine Kachel-Ansicht der Übersicht, ohne class="kachel" wird eine Liste mit Hyperlinks auf die Sektionen generiert.

Im Wiki des Atom-Pakets auf GitHub finden Sie ausführliche Informationen zu Erweiterungen der Syntax. Wiki Atom-elearnjs

Übung: Seiteneinteilung und Übersicht

• [ ] Erstelle eine sinnvolle Seiteneinteilung für dein Beispieldokument. Lass dazu die Sektionen automatisch erzeigen. Klammere einzelne Überschriften für die automatische Generierung aus.
• [ ] Füge als zweite Sektion eine Inhaltsübersicht ein.

Interaktive Elemente

elearn.js bietet eine ganze Reihe von interaktiven Elementen.

• Slideshows
• Buttons
• Reiter
• Quizfragen, quiz.js
• Interaktive Grafik (mit online Editor), clickimage.js
• Interaktiver Zeitstrahl, timeline.js
• Interaktives Video, eleanvideo.js

Slideshows

Als Beispiel soll hier eine Bilder-Slideshow dienen. Die Interaktiven Elemente werden als vereinfachter html-Code in das Markdown-Dokumnet eingefügt. Folgende Slideshow

wird durch diese Codezeilen eingefügt.

<div class="slider">
  <ul class="img-gallery">
    <li>
        <img src="assets/img/Additiv0.png" alt="Rot und Blau" />
        <p>Wir haben hier zwei Farbflächen, deren Farbe sich additiv mischen soll. Wissen sie das Ergebnis schon? </p>
    </li>
    <li>
        <img src="assets/img/Additiv1.png" alt="Rot addiert zu blau" /><p>Sie fühlen sich jetzt sicher bestätigt, da sie ein Violett erwartet haben. Doch die additive Farbmischung verhält sich für uns oft ungewohnt. Fügen wir Grün hinzu. </p>
    </li>
    <li>
        <img src="assets/img/Additiv2.png" alt="Grün hinzu addiert" /><p>Die Schnittfläche aller Farben ist jetzt weiß. Doch Rot und Grün ergibt hier Gelb. Fügen wir noch weiter das Violett  hinzu.</p>
    </li>
    <li>
        <img src="assets/img/Additiv3.png" alt="Grün hinzu addiert" /><p>Es ist zu merken, dass die Schnittflächen aller Farben eben noch nicht ganz weiss war. Jetzt erscheinen viele verschiedene helle Farbabstufungen. Wie würden wir hier Schwarz hinbekommen?</p>
    </li>
  </ul>
</div>

Kopieren sie sich diesen Code und erstellen Sie eine eigene Slideshow.

Bei der Ausgabe als PDF werden die Bilder untereinander angezeigt.