Produktion digitaler Skripte

Michael Heinecke
eLearning-Büro MIN Universität Hamburg
Januar 2016
cc-by-sa

MD-Illustration

Einsatz von Skripten an Hochschulen

Das Vorhaben, ein Skript zu einem Thema zu schreiben, beginnt häufig aus der Notwendigkeit heraus, Studierenden einen Lerntext anbieten zu können, der vom Umfang, Themenschwerpunkt und Tiefe genau den gewünschten Anforderungen entspricht. In vielen Bereichen bieten Lehrbücher nicht die gewünschte Themenauswahl, stellen manche Sachverhalten nicht wie gewünscht dar oder fehlen einfach auf dem Markt. Das Erarbeiten von Themen an Primärliteratur ist meist aufgrund der Menge des zu vermittelnden Stoffes in Vorlesungen und Praktika nicht umsetzbar und bleibt, wenn überhaupt, den Seminaren vorbehalten.

Skripte als PDF oder auf Papier

Skripte werden zur Zeit meist mit normalen Office-Tools (MS-Word, LibreOffice-Writer) oder mittels dem Satzprogramm (La)TeX erstellt und dann digital als PDF oder in Papierform an die Studierenden weitergegeben. Diese Formate haben leider einige Nachteile. So sind darin dynamische Medien (Video/Audio) oder interaktive Elemente (Quiz, Grafik) gar nicht oder nur schwer einzubinden. Dynamische und interaktive PDFs sind zwar prinzipiell möglich, für deren Erstellung werden jedoch spezielle Editoren (Adobe InDesign) und für das Abspielen spezielle Player benötigt. Auch sind die Formate nur bedingt mobil nutzbar. So lassen sich PDFs nur schlecht am Display, insbesondere bei mobilen Geräten, lesen. Einige Dokumente sind gar mehrspaltig oder doppelseitig gesetzt, was die Navigation durch den Text sehr unschön gestaltet. Papier-Skripte sind natürlich uneingeschränkt mobil nutzbar, werden aber mit steigendem Umfang recht unhandlich und schwer und leiden durch häufigen Transport an Knicken oder sogar fehlenden Seiten.

E-Learning-Module als Skript-Ersatz

In den letzten Jahren wurden einige E-Learning-Projekte gefördert, die der Erstellung von digitalen Lerninhalten für einzelne Fächer dienten. Die Inhalte wurden meist in der Form von E-Learning-Modulen (Web-Based Trainings) entwickelt, die auf Online-Lernplattformen (LMS, LCMS) angeboten werden. Zur Erstellung der Inhalte werden in solchen Fällen entweder spezielle E-Learning-Autorenwerkzeuge oder die LMS-eigenen Inhaltseditoren verwendet. Als Zielformat wird entweder SCORM, ContentPackage oder einfach HTML ausgegeben. Bis vor kurzem war Flash eines der bevorzugten Formate, zumindest für interaktive und dynamische Elemente. Seit Einführung von HTML5 und steigender Verbreitung mobiler Endgeräte versuchen die Anbieter der Autorenumgebungen auf Flash zu verzichten. Die Nutzung von E-Learning-Autorenwerkzeugen bringt verschiedene Nachteile mit sich:

  • Man gerät in eine Abhängigkeit kommerzieller Anbieter, zahlt teilweise sehr viel Geld.
  • Die Pflege der Inhalte kann durch neue Versionen der Werkzeuge erschwert werden.
  • Open Content kann nicht mit proprietären Dateiformaten weitergegeben werden.
  • WYSIWYG-Editoren erstellen meistens ‘unsauberen’ Code. Dies gilt auch für die Editoren der Lernplattformen.
  • Maschinen-erstellter Code ist häufig unnötig groß (Dateigröße). Dies erschwert die Nutzung im mobilen Datennetz.
  • Standards wie SCORM können häufig nicht oder nur unsauber wiedergegeben werden (viele Player und Editoren sind nicht 100% kompatibel).
  • Erweiterte Features von SCORM werden von Autoren nur sehr selten genutzt.
  • Eine Umwandlung der Inhalte in andere Formate ist meistens nicht vorgesehen oder sehr aufwändig.
  • Eine Offline-Nutzung der Lernmodule ist in der Regel nicht vorgesehen und nicht möglich.

Es existieren zahlreiche Online-Lernmodule zu allen möglichen Themen auf verschiedenen Lernplattformen an deutschen Hochschulen. Um diese auf anderen Plattformen zu nutzen, auszudrucken oder an Kollegen als freien Inhalt weiterzugeben sind sie aber nur bedingt oder sogar ungeeignet. Im folgenden Abschnitt soll dargestellt werden, wie ein digitales Skript aussehen kann, welches die Vorteile von klassischen Skripten und E-Learning-Modulen vereint.

Ziele digitaler Skripte

Ziel ist, ein digitales Format für Skripte anzubieten, welches folgende Eigenschaften aufweist:

  • einfach und überall zu erstellen
  • ohne speziellen Editor
  • mit offenem statt proprietären Quell-Format
  • Inhalte leicht weiterzugeben, anzupassen und zu überarbeiten
  • mit interaktiven und dynamischen Medien
  • auf Webseiten und in Lernplattformen leicht integrierbar
  • mit druckbarer Version
  • auf allen gängigen Gerätetypen gut zu betrachten
  • leicht und intuitiv zu navigieren
  • offline nutzbar
  • mit möglichst wenig Abhängigkeiten von externen Ressourcen
  • möglichst kleine Dateigrößen, dadurch mobil besser nutzbar

Zur Zeit gibt es nur wenige Open-Source Lösungen, die den oben geforderten Zielen nahe kommen. Genannt werden sollten hier aber auf jeden Fall Adapt und h5p, denn diese beiden Projekte haben einen sehr ähnlichen Ansatz. Die Seite der Content-Erstellung hat bei den genannten Projekten einen anderen Stellenwert als bei unserem Vorhaben. Sie sind stark Feature-getrieben und nutzen zahlreiche Libraries und Online-Komponenten, was aus unserer Sicht die Nachhaltigkeit verschlechtert und den Pflegeaufwand erhöht. Unser Ansatz ist in diesem Aspekt eher konservativ und Zielt auf einen möglichst kreativen und freien Schreibprozess ab.

Digitale Skripte mit Markdown und elearn.js

Im Folgenden soll der technische Ansatz zur Produktion von digitalen Skripten dargestellt werden. Zuerst steht die Arbeit am Texteditor im Vordergrund, als eine Art Autorensprache wird Markdown vorgestellt. Markdown ermöglicht die Konvertierung in verschiedene Zielformate, hier interessiert vor allem HTML, PDF, EPUB und die Überführung der Inhalte in andere Umgebungen wie MS-Word oder (La)TeX. Schließlich wird bei der HTML-Ausgabe die Einbindung von einem JavaScript zur Steuerung der interaktiven Elemente, wir nennen es elearn.js, und dem elearn.css zur Bestimmung der visuellen Gestaltung beschrieben. All diese Komponenten sind in einem Template in einer vorgegebenen Ordnerstruktur vorbereitet.

Markdown

Abb.: Visualisierung der Eigenschaften von Markdown als Autorensprache.

Markdown als Autorensprache

Der Vorteil in der Nutzung von Text- oder Markdown-Dateien liegt in der flexiblen Handhabung und Weiternutzung. Für den kreativen Schreibprozess ist es hilfreich, mit möglichst wenig Ablenkung seinen Text verfassen zu können. Einige Editoren bieten einen Distraction Free Mode, der alles außer den Text ausblendet. Die Maus oder das Trackpad werden während des Schreibens nicht mehr benötigt. Alle notwendigen Formatierungen können direkt über die Tastatur eingegeben werden.

Das ist innerhalb von wenigen Minuten erlernbar. Mit *, - und # können die meisten Formatierungen vorgenommen werden. Klammern dienen zur Verlinkung und zum Einbinden von Abbildungen. Hier ist eine Übersicht über die gängigen Funktionen:

# Überschrift 1   
## Überschrift 2   
### Überschrift 3   
#### Ü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
* alternativ auch mit + oder -

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)

<http://www.schnell_Link_Ohne_Bezeichner.html>

    Code-Blöcke werden mit vier Leerzeichen (tab) vor der Zeile markiert.

Markdown-Dokumente werden dann als .md oder einfach .txt gespeichert. Mit einem Markdown-Converter können die Auszeichnungen dann in sehr sauberes HTML umgewandelt werden. Markdown-Editoren erleichtern die Arbeit ein wenig, da sie die Auszeichnungen erkennen und entsprechend hervorheben. Zudem bringen MD-Editoren meist einen HTML-Konverter, manche auch weitere Formate zur Konvertierung, mitbringen. Für gängige Texteditoren gibt es auch Markdown-Pakete als Erweiterungen. Es gibt für alle Plattformen MD-Editoren, so wird auch ein Android-Tablett oder iPad mit Typo-Cover zum mobilen Schreibwerkzeug.

In einem weiterführenden Tutorial können Sie noch mehr über Markdown, Tutorials und die Editoren erfahren. Sie können es hier aufrufen: Markdown Tutorial.

Erweiterte Inhalte

Mit reinem Markdown kann das Gerüst für ein Skript geschrieben werden. Für einige Inhalts-Typen gibt es erweiterte Markdown-Varianten. Dazu gehören Tabellen, Formeln, Fußnoten, Kommentierungen, Programmiersprachen, Text-Unterstreichungen oder -Durchstreichungen, Metadaten und ähnliches. Am bekanntesten sind hier die Ausprägungen Multimarkdown, Pandoc-Markdown und GitHub-Flavored Markdown. Je nachdem welchen “Dialekt” man nutzt, sollte man auf einen passenden Konverter achten, damit die Inhalte richtig gewandelt werden. Im Produktionsworkflow finden sich Beispiele für erweiterten Markdown-Code.

Für die Darstellung von dynamischen Medien und besonders formatierten Textabschnitten können HTML-Container in das Markdown eingefügt werden. Die Konverter reichen HTML beim Konvertieren einfach durch, deshalb wird auch kein Markdown innerhalb eines HTML-Containers gewandelt. Zum Beispiel kann ein Tag mit einer Klasse zur Auszeichnung von Abbildungs-Unterschriften keine * zur Formatierung über Markdown-Auszeichnung beinhalten. Daher werden wir auch zur Kennzeichnung der Seitenumbrüche eine nur Zeichenfolge verwenden, die erst nachträglich in <section>-Tags umgewandelt wird, da sonst das Markdown innerhalb der <section>-Tags nicht konvertiert würde. HTML-Container verwenden wir für

  • Video/Audio
  • Quizfragen
  • Bildergalerien
  • Interaktive Grafiken
  • Besondere Auszeichnungen (Autor, Literaturverzeichnis, Abbildungsunterschrift,…)
  • Navigationselemente

Wie genau diese Elemente im digitalen Skript eingesetzt werden können, wird später im Abschnitt Produktionsworkflow behandelt.

Konvertierung in Zielformate

Markdown ist eine Art Meta-Sprache, welche besonders leicht schreibbar ist, gut lesbar ist und in verschiedene Zielformate umgewandelt werden kann. Ursprünglich wurde es für Web-Autoren entwickelt, die möglichst einfach z.B. für Blogs ihre Artikel schreiben wollten. Durch die Erweiterung von Multimarkdown und Konverter wie Pandoc sind zahlreiche Exportformate hinzugekommen.

HTML ist das Standard-Exportformat für Markdown und stellt auch die Basis für unser digitales Skript dar. Die Konvertierung in HTML ist in der Regel sehr sauber. Viele Konverter fügen Überschriften eine Sprungmarke hinzu. Diese können über ein Inhaltsverzeichnis angesprungen werden, welche auch einige Konverter automatisch erstellen können. Um den interaktiven Elementen im HTML Leben einzuhauchen, benötigen wir ein wenig JavaScript. Dies soll weiter unten noch genauer beschrieben werden. Für die Darstellung von Formeln wird MathJax in das HTML eingebunden.

PDF ist häufig an der Hochschule das Standard-Format zur Weitergabe von Skripten. Viele erwarten dieses Format zum Mitnehmen und Ausdrucken der Lerntexte und Präsentationen. Interaktive und dynamische Medien fehlen jedoch in der PDF-Version. Die Konvertierung von Markdown zu PDF ist über verschiedene Wege möglich. Einige Konverter nutzen den Weg über einen Zwischenschritt in TeX, um dann den TeX-Code über Postscript in ein PDF auszugeben. Dieser Weg führt zu sehr sauberen Ergebnissen auch mit Seitenzahlen und Fußnoten (Multimarkdown). Um das Aussehen hier zu beeinflussen, muss ein TeX-Template erstellt oder angepasst werden. Andere Editoren gehen zur PDF-Generierung über einen PDF-Drucker und nutzen dabei auch das CSS der HTML-Ausgabe. Hier fehlen meist die Seitenzahlen, die aber z.B. mit Adobe Acrobat leicht hinzugefügt werden können. Viele Konverter bieten die Ausgabe nach PDF an, manche erst nach Erwerb einer Lizenz für wenige Euro. Der Nutzer des HTML-Skripts ist auch jederzeit in der Lage, mit einem PDF-Drucker ein PDF über die Druckfunktion des Browsers zu generieren.

TeX oder LaTeX ist hier als Zwischenformat zu sehen, wie im Abschnitt zu PDF beschrieben. Die Ausgabe als TeX-Datei ermöglicht aber auch eine Weiternutzung zur Zusammenstellung ganzer Bücher. Wenn wir den Umfang eines digitalen Skriptes in etwa dem eines Kapitels in einem Fachbuch gleichsetzen, so könnte man auch die einzelnen Kapitel eines Lehrbuches in Markdown schreiben und diese anschließend in einem finalen TeX-Dokument zusammenfügen. Das hat auch den Vorteil, dass Markdown wesentlich einfacher zu schreiben und zu lesen ist als TeX-Code. Einen TeX-Export bieten nur spezielle Konverter an (Pandoc, Byword, Multimarkdown-Composer).

EPUB ist als Format für eReader sehr verbreitet. Markdown kann also auch als Autorenumgebung für eBooks genutzt werden. Hier werden jedoch nur die grundlegenden Funktionen von eBooks unterstützt. Dynamische und interaktive Medien werden nicht mit eingebunden. Der ePUB-Export ist auch eher speziellen Konvertern vorbehalten.

Office Formate wie .doc, docx, .odf oder .rtf werden als Exportformate benötigt, wenn von Seiten Dritter diese Formate explizit als Abgabeformat gewünscht werden. Dies kann bei Projektanträgen und Berichten, aber auch bei Einreichungen für Zeitschriften oder Konferenzen der Fall sein. Manche schätzen die Überarbeitungsfunktion von Office-Produkten, die das Redigieren von Texten unterstützt. Office-Formate gehören auch eher zu den seltenen Exportformaten, am besten funktioniert die Konvertierung in RTF.

Noch ein Wort zu dem Konverter Pandoc. Er stellt ein Universalwerkzeug zur Konvertierung von Formaten dar. Mit Pandoc sind auf der Basis von Markdown und anderen Quellen zur Zeit 37 verschiedene Zielformate möglich. Wir werden für den Autorenworkflow eine Online-Instanz von Pandoc für Sie bereitstellen. Hier finden Sie weitere Informationen zu Pandoc: pandoc.com.

Die meisten Elemente, die ein digitales Skript von einem gedruckten unterscheiden, sind über die Einbindung von JavaScript möglich. Wir nennen unser Skript elearn.js.

elearn.js – JavaScript für Interaktionen in digitalen Skripten

JavaScript ist zur Zeit eine der beliebtesten Programmiersprachen, um Webseiten dynamisch zu gestalten. Durch HTML5 und serverseitige Skript-Komponenten (z.B. Node.js) sind die Möglichkeiten für Webapplikationen durch JavaScript sehr vielfältig geworden. Daher wurden auch in den letzten Jahren die Browser immer weiter für die Verarbeitung von JavaScript optimiert. Denn in der Regel wird der JavaScript-Code auf dem Client, also dem Rechner des Nutzers ausgeführt. Das hat Vorteile, bringt aber auch die Abhängigkeit der Leistungsfähigkeit und Konfiguration des Clients mit sich.

Die benötigten Funktionen, die einen interaktiven E-Learning-Content ausmacht, sind für heutige Browser und Rechner kein Problem mehr und können selbst von einfachen Smartphones ohne Probleme bewältigt werden. Im elearn.js wird auch so weit wie möglich auf die Nutzung größerer Bibliotheken und Frameworks verzichtet, damit die zu verarbeitenden Skripte möglichst schnell geladen und ausgeführt werden können. Vorteil von Client-seitiger Programmausführung ist auch, dass alle Funktionen offline beibehalten werden, da kein Server für die Interaktionen benötigt wird.

Der Source-Code vom elearn.js wird auf GitHub bereitgestellt. Hier ist die GitHub Seite vom elearn.js: https://github.com/elb-min-uhh/elearn.js.

Folgende Basis-Funktionen sind zur Zeit mit elearn.js möglich:

  • Paginierung der Seite
  • Blättern über Schaltflächen, mit Tastatur und per Wisch-Geste
  • Anzeigen des gesamten Inhalts auf einer Seite
  • Anzeigen einer Seitenübersicht als Dropdown-Liste
  • Aufrufen und Anzeigen einer Hilfefunktion
  • Aufrufen der Druckfunktion des Browsers
  • Anzeigen eines QR-Codes zum Teilen als Overlay
  • Anzeigen von Metadaten als Overlay
  • Download der Quelldateien, PDF- und ePub-Version
  • Einfügen eines Inhaltsverzeichnisses auf einer Seite
  • Bildergalerie

Navigationsleiste

Abb.: Navigationselemente des elearn.js

Durch ein Zusatz-Paket (quiz.js) lassen sich Quiz-Fragen einbinden, etwa Single-, Multiple-Choice oder Kurztext. Quiz.js ist im GitHub-Projekt integriert. Eine zusätzliche Erweiterung für interaktive Bilder (Hotspots zur Anzeige von Informationen) und interaktive Zeitstrahlen sind in der Planung (siehe Abschnitt weitere Entwicklung).

Das elearn.js ist eine Eigenentwicklung des eLearning-Büros der MIN-Fakultät der UHH und steht unter einer freien Lizenz (MIT), ist also Open Source. Das Skript muss zur Nutzung nur in die HTML-Seite eingebunden werden. die Ausgestaltung der Inhalte der interaktiven Komponente erfolgt im HTML-Code. Das Skript bleibt also immer gleich, unabhängig vom Content. Wie genau die einzelnen interaktiven Elemente eingebunden werden, wird im Abschnitt Produktionsworkflow beschrieben.

elearn.css – responsives Stylesheet für digitale Skripte

Im Web wird idealerweise Inhalt und Aussehen sauber voneinander getrennt. Der Inhalt steht im HTML-Dokument, das Aussehen wird über eine CSS-Datei gesteuert. Für die HTML-Seiten, die aus Markdown rausgeschrieben und mit JavaScript erweitert werden, wurde ein ein elearn.css entwickelt, um das allgemeine Aussehen der Seite zu steuern. Dabei wurde sich an dem UHH-Corporate-Design orientiert, vor allem die Farben und die Anmutung der Schrift betrifft. Ebenso wurde sich am Layout wissenschaftlicher Literatur und PDF-Readern orientiert, da diese den bestehenden Anspruch widerspiegeln und den Inhalt in den Vordergrund stellen.

Die Original UHH-Schrift (TheSans UHH) kann aufgrund der Lizenzierung nicht für ein OpenSource-Projekt genutzt werden. Als Alternative wird im elearn.css die Schrift Open Sans von GoogleFonts eingesetzt, da sie von der Anmutung und Schriftklassifikation der TheSans sehr ähnelt, dafür aber frei lizenziert ist und so auch als Webfont zum Paket-Download mit bereitgestellt werden kann.

Das Layout der digitalen Skripte ist responsiv. Das bedeutet, dass sich das Layout abhängig von der Bildschirm- oder Fenstergröße verändert. Das betrifft vor allem die Schriftgrößen und Abstände zwischen Textelementen und den Seitenrändern. Dies geschieht nicht stufenlos, es sind vier Stufen eingerichtet (sogenannte Breakpoints), die bei 1200, 900, 450 und 300 Pixeln liegen. So kann der Inhalt des Skriptes auf Bildschirmen von 27” bis 4” gut und lesbar angezeigt werden. Zusätzlich wurden für einen Druck aus der HTML-Datei Anpassungen im CSS vorgesehen, damit der Inhalt möglichst sauber auf eine DIN-A4-Seite passt.

Einige Elemente im Layout sind mit Icons versehen, zum Beispiel die Navigation und das Menü. Die Icons sind nicht als Grafiken, sondern als eine Icon-Font im CSS eingebunden. Das hat den Vorteil, dass alle Grafiken in einer Font-Datei stecken und dort als Vektoren, also auflösungsunabhängig vorliegen. Auch auf hochauflösenden Displays mit hoher Pixeldichte (z.B. Retina-Displays) werden die Icons so immer scharf dargestellt. Die Icons wurden als SVG-Schrift mit Inkscape entworfen und anschließend in eine WOFF gewandelt.

Neben dem elearn.css für die grundlegenden Funktionen des digitalen Skriptes gibt es für die Erweiterungen (etwa quiz.js) jeweils noch ein eigenes CSS. Diese müssen natürlich nur eingebunden werden, wenn auch die entsprechenden Erweiterungen im Skript genutzt werden.

Ordnerstruktur des elearning-Skriptes

Das fertige digitale Skript besteht also aus einer Reihe von Dateien, HTML, JavaScript, CSS, Schriften und Medien. Damit alles richtig funktioniert, muss unter diesen Dateien eine feste Ordnung existieren, sonst funktioniert das Skript durch die Abhängigkeiten nicht richtig. In der folgenden Abbildung ist die Ordnerstruktur des Templates dargestellt:

Ordnerstruktur

Abb.: Notwendige Ordnerstruktur für das elearn.js.

Die hier dargestellten Dateien und Ordner würde man in einem Überordner zusammenfassen, der den Kurztitel des Skriptes trägt. Hierbei sollte man auf Umlaute, Sonder- und Leerzeichen verzichten, da viele Server damit Probleme haben. So würde man statt Süßungsmittel ändern Geschmack einen Ordner oder eine Datei besser Suessungsmittel_aendern_Geschmack nennen.

Auf der obersten Ebene des Ordners findet man die index.html und den Ordner assets. Die Index-Datei ist das Herz des digitalen Skripts, dies ist die HTML-Ausgabe der Markdown-Datei. Im Ordner assets befinden sich weitere Unterordner, in denen alle anderen benötigten Dateien untergebracht sind. Die Namen der Unterordner sind eigentlich selbsterklärend: css beinhaltet die CSS-Dateien, font beinhaltet die Schriften, img ist zur Unterbringung aller Bilder und evtl. auch anderer Medien, in js finden sich alle JavaScript-Dateien. Für den Autor ist also vor allem der img-Ordner relevant, da er dort seine Medien hinterlegt und sie im Markdown relativ referenziert. Daher macht es Sinn, auch während der kreativen Schreibphase für ein Skript bereits in einer solchen Ordnerstruktur zu arbeiten. Das md-Dokument kann einfach neben die index.html gelegt werden.

In diesem Kapitel wurden die Funktionen und Komponenten eines digitalen Skriptes näher dargestellt. Im folgenden Kapitel wird der Produktionsprozess eines solchen Skriptes näher betrachtet.

Produktionsworkflow

MD-Illustration

Abb.: Zusammenspiel der Dateien bei der Produktion eines digitalen Skriptes.

Die Erstellung eines digitalen Skriptes lässt sich in folgende Schritte gliedern:

  1. Entwicklung einer Themenliste
  2. Ausarbeitung von Kapiteln
  3. Medien vorbereiten und einbinden
  4. Interaktive Elemente Entwicklen und einbinden
  5. HTML-Ausgabe finalisieren
  6. Alternative Ausgabeformate nutzen

Themenliste

Startpunkt zum Skript kann eine Themenliste sein, eine alte Präsentation oder ein Lehrbuch, welches zu dem Thema einigermaßen passt. Idealerweise beginnt man, sich für das Skript noch einmal eine aktuelle Struktur zusammenzustellen, und hier beginnt bereits das Schreiben. Statt die Themen in einem Office-Dokument wie Word oder Powerpoint zu verpacken, kann auch hier schon eine möglichst unkomplizierte Notiz in Markdown verfasst werden. Das hat den Vorteil, dass dies an beinahe jedem Endgerät geschehen kann. Ob am PC, dem Tablett, Smartphone, Mac, Android oder Windows, eine Notizdatei im .TXT oder .MD-Format kann überall erstellt und bearbeitet werden. .MD? Das ist die Dateiendung für Markdown-Dokumente, welche eigentlich auch einfache Text-Dateien sind, durch die spezielle Dateiendung erkennen aber einige Editoren das Markdown-Format und können so die Formatierungen hervorheben.

Erste Themensammlung im Markdown-Format würde etwa so aussehen:

 ## Aufbau eines Lehrtextes

 * Einführung in das Thema mit Beispiel
     * Motivation wecken
     * Emotional ansprechen
     * Vorwissen anregen
 * Grundlagen und Wiederholung von Vorwissen
     * Benötigtes Vorwissen sichern und Lücken schließen
     * Thema im Kontext platzieren
     * Erste neue Informationen vermitteln
 * Themenbereich näher erörtern
     * Logische Herleitung
     * Zeitlicher Ablauf, Schrittweise Darstellung
     * Merksätze
     * wenn mögl. praktischer Bezug
 * Quiz zu den bisher behandelten Themen
     * neues Wissen festigen
     * Aktivierung der Lernenden
     * Feedback
 * Transfer zu anderen Anwendungsfeldern
     * Anknüpfungspunkte anbieten
     * Zugrundeliegende Muster herausarbeiten

Ausarbeitung von Kapiteln

Aus einer solchen Themensammlung heraus können dann die einzelnen Kapitel ausgearbeitet werden. Für diese Ausarbeitungsstufe sollte ebenfalls das .md-Format verwendet werden. Hier können dann auch zu verknüpfende Medien oder gegebenenfalls Fußnoten oder Tabellen eingefügt werden. Formeln können im Markdown-Dokument einfach mit $ gekennzeichnet als LaTeX-Code eingefügt werden.

Für die Ausarbeitung der Kapitel wird die Nutzung eines Markdown-Editors empfohlen. Dieser bietet eine schnelle Konvertierung in Ausgabeformate und so eine Überprüfung des Codes. Nicht, dass Markdown sehr komplex ist, es gibt dem Autor aber Sicherheit, wenn er in der Vorschau die korrekte Formatierung sehen kann.

Markdown Vorschau

Abb.: Screenshot des Markdown-Editors MacDown mit eingeschalteter Vorschau.

Bereits jetzt sollte man sich über die Ordnerstruktur Gedanken machen. Am besten wäre es, die Ordnerstruktur des Templates zu nutzen. Das Markdown-Dokument kann dann einfach neben der index-Datei liegen. Die benötigten Grafiken und andere Medien können dann schon direkt im richtigen Ordner (assets/img/) abgelegt werden.

Es ist darauf zu achten, dass die einzufügenden Medien ein geeignetes Format vorweisen und richtig eingebunden werden. In der Vorschau eines Markdown-Editors kann gleich die funktionierende Einbindung kontrolliert werden. Wird das Medium nachträglich geändert, muss die Datei im Verzeichnis nur ausgetauscht werden, die Verknüpfung bleibt erhalten, solange das neue Medium den gleichen Dateinamen besitzt.

Einfügen von Medien

Abbildungen

Abbildungen müssen in einem Web-fähigen Format vorliegen.

  • Fotos und Grafiken mit vielen Verläufen sollten als .jpg komprimiert werden. Empfehlenswert ist eine Komprimierungsqualität zwischen 50 und 90, je nach erforderlicher Detailtiefe.
  • Zeichnungen und Grafiken, die weniger Farben benötigen, sollten als .png oder als .gif gespeichert werden.

Die Abbildungen sollten nicht größer als nötig sein. Die normale Breite der Textspalte im Template ist max. 840 px, viel größere Bilder zu hinterlegen wäre unnötig. Die Darstellungsgröße wird vom Browser des Betrachters auf die Breite der dargestellten Textspalte verringert. Bei den hier beschriebenen Vorgaben sollten die Bilder in der Regel von der Datei nicht größer als 150 KB sein. Eine Breite und/oder Höhe von mehr als 1100px führt in der Regel zu zu großen Dateien. Das würde die Ladezeiten verringern und somit eine komfortable mobile Nutzung verhindern.

Als Besonderheit werden hier Vektorgrafiken behandelt, bei denen sich im Moment .svg als Webstandard etabliert hat. Diese sind immer Auflösungs-unabhängig und können somit selbst in der Druckversion absolut scharf dargestellt werden. Zu beachten ist hier, das sehr detaillierte Vektorgrafiken im SVG-Format zu groß werden können. Für ‘normale’ Diagramme und Strichzeichnungen sind SVGs empfehlenswert. Inzwischen unterstützen fast alle Browser die gängigsten SVG-Funktionen.

Die Einbindung von Abbildungen ist recht einfach. In Markdown erfolgt dies über folgenden Code:

![Bezeichnung Abbildung](Name_der_Datei.svg)

Wir haben im CSS noch eine eigene Klasse für Abbildungsunterschriften bereitgestellt. Diese kann per HTML-Code eingefügt werden:

<p class="abb"><strong>Abb.: </strong>Beschreibung der Abbildung in der Abbildungsunterschrift.</p>

Freie Werkzeuge zum Vorbereiten oder erstellen von Bildern

Pixel: Paint.net, Gimp, irfanview

Vector: Inkscape, LibreOffice Draw

Online-Tools: sketch.io, draw.io

Bildergalerien

Um eine Bilderserie komfortabel auf einer Webseite unterzubringen, bieten sich Bildergalerien und Slideshows an. Eine einfache Form von Galerie haben ist bereits im elearn.js integriert.

Über folgenden Code-Schnipsel können Sie eine Galerie im Skript einbinden:

<div class="slider preview-nav loop">
<ul class="img-gallery" id="x">
<li>
<img src="assets/img/md-illu_1.png" alt="md-produktion" />
<p>Markdown ist kinderleicht zu erlernen.</p>
</li>
<li>
<img src="assets/img/md-illu_2.png" alt="Components" />
<p>Zusammenspiel der Komponenten bei der Produktion von digitalen Skripten mit Markdown.</p>"
</li>
<li>
<img src="assets/img/md-illu_3.png" alt="Future" />
<p>Die Zukunft von Markdown als Autorensprache.</p>
</li>
<li>
<img src="assets/img/md-illu_4.png" alt="Media" />
<p>Markdown kann viele verschiedene Medientypen in Html einfügen.</p>
</li>
<li>
<img src="assets/img/md-illu_5.png" alt="Hello" />
<p>Versuche auch mal, ein Markdown-Dokument zu erstellen. Ist gar nicht schwer!</p>
</li>
</ul>
</div>

Im Markdown darf der HTML-Code nicht eingerückt werden, da er sonst bei der Konvertierung als Quellcode erkannt und als Code-Block ausgegeben wird.

Folgende Galerie wird aus diesem Code generiert.

Eine Galerie kann mit oder ohne Vorschaubilder sowie mit oder ohne Loop genutzt werden. Hierzu existieren verschiedene Klassen, die dem Slider zugeordnet werden können. Das sieht folgendermaßen aus:

  • <div class="slider"> ist ohne Vorschau und ohne Loop
  • <div class="slider preview-nav"> ist mit Vorschaubildern und ohne Loop
  • <div class="slider preview-nav loop"> ist mit Vorschaubildern und mit Loop

Die Höhe der Galerie kann vorgegeben werden, damit der Content unter der Galerie nicht springt. Dies geht in Abhängigkeit des größten Bildes oder einer vorgegebenen maximalen Höhe. Dies wird durch die Klasse des umschließenden ul-Elements definiert.

  • <ul class="img-gallery"> ist eine Galerie mit unterschiedlicher Höhe.
  • <ul class="img-gallery fixed-size"> ist eine Galerie mit der Höhe des größten Bildes.
  • <ul class="img-gallery fixed-size" style="max-height: 400px"> ist eine Galerie mit der Höhe von 400px.

Für weitere Funktionen können natürlich auch andere Bibliotheken für Bildergalerien eingebunden werden.

Video

Beim Einbetten von Video müssen zwei Fälle unterschieden werden. Der eine betrifft längere Videos (ab 5 Minuten), der andere kurze Videosequenzen (unter 5 Minuten).

Längere Videosequenzen sollten auf jeden Fall über eine Streaming-Plattform eingebunden werden. An der UHH steht dafür das Lecture2Go-Portal zur Verfügung, ebenso in Hamburg die Plattform podcampus.de. Unter Inkaufnahme aller datenschutzrechtlichen Bedenken können natürlich auch YouTube oder Vimeo genutzt werden. Die Video-Plattformen bieten in der Regel einen Embed-Code an, den man einfach in das Markdown-Dokument hinein kopieren kann. In welchem Format die Dateien auf die Plattformen hochgeladen werden müssen, unterscheidet sich von Plattform zu Plattform, in der Regel wird aber ein .mp4 mit h.264 und AAC Codes akzeptiert. Auf Lecture2Go nutzen wir zur Zeit folgende Encoding-Einstellungen (z.B. in Handbreake):

Video
- Video-Codec: .h264 - Frame-Rate: 25bps - Size: 800 x 450 px - Bitrate: 650-900 kbps

Audio
- Audio-Codec: AAC - Channels: Mono - Bitrate: 96 kbps

Kurze Videoclips können auch ohne Streamingserver direkt in das Skript eingebunden werden. Das Video muss dazu in dem Ordner assets abgelegt werden, vorzugsweise im img-Ordner. Dann kann das Video per HTML5 video-tag im markdown-Dokument eingebunden werden. Der Video-Tag wird inzwischen von allen aktuellen Browsern unterstützt. Fast alle Browser unterstützen nativ ein .mpg4-Video, für Firefox muss zur Zeit noch ein .webm oder .ogg-Videokontainer mit entsprechenden Codecs angeboten werden.

<video preload="auto" controls="controls">
<source src="img/beispiel-video.mp4" type="video/mpeg">
<source src="img/beispiel-video.webm" type="video/webm">
Dein Browser unterstützt kein HTML5-Video. Um dir das Video dennoch ansehen zu können, folge einfach diesem <a href="img/beispiel-video.mp4">Link</a>.
</video>

Vid.: Beispielvideo, über html5-Videotag eingebunden.

Details der Video-Encodierung werden am besten in einer persönlichen Beratung geklärt, gemeinsam mit einem Experten können für einen Encoder Presets für die entsprechenden Anforderungen erstellt werden.

Freie Werkzeuge zur Videobearbeitung

Schnitt: Lightworks, Blender

Encoding: Handbreake, MPEG-Streamclip, ffmpeg, firefogg

Audio

Audio-Dateien können ähnlich wie Videos direkt über einen HTML-Tag eingebunden werden. Aufgrund der geringeren Datenrate von Audio-Dateien im Gegensatz zu Video, ist die Nutzung eines Streamingservers hier meist hinfällig. Als Standard für Audio-Dateien hat sich auch im Web .mp3 etabliert.

Mit folgendem HTML-Schnipsel können Audio-Files eingebunden werden:

<audio preload="auto" controls="controls">
<source src="assets/img/beispiel-audio.mp3" type="audio/mpeg">
Dein Browser unterstützt kein HTML5-Audio. Um dir das Audio-File dennoch anhören zu können, folge einfach diesem <a href="img/beispiel-audio.mp3">Link</a>.
</audio>

Datenraten für Mono-Aufzeichnungen liegen in der Regel zwischen 64-96 kbps bei 41 kHz. Für Stereo-Files sollten entsprechend 128-192 kbps genügen, um eine Artefakt-freie Wiedergabe zu erzielen. Als Werkzeug zur Aufnahme, Bearbeitung und Export von Audio-Podcasts hat sich das Open-Source-Werkzeug Audacity bewährt.

Quizzes

Nun kommen wir zu den etwas spezielleren Inhaltsbausteinen. Quizzes können, wie dynamische Medien auch, nur in der HTML-Ausgabe sinnvoll genutzt werden. Sie sollten daher mit einem <div>-Container umschlossen werden, der in der Druckausgabe ausgeblendet wird. Der Quellcode für solche interaktiven Bausteine werden in der Regel mit externen Editoren erstellt. Der Code kann anschließend problemlos im Markdown oder auch erst in der HTML-Ausgabe eingefügt werden. Wichtig ist, dass die benötigten Ressourcen in den Unterorder des Skripts hinterlegt und korrekt referenziert werden.

Quizzes können mit elearn.js relativ einfach auch ohne externe Editoren in ein digitales Skript eingefügt werden. Hierzu wurde quiz.js entwickelt, welches aus simplen HTML-Schnipseln interaktive Fragen und eine Ergebnisübersicht generiert. Bisher sind Multiple-Choice-, Forced-Choice- und Kurztext-Fragen möglich. Die Lösung wird verschlüsselt eingebunden, damit es nicht möglich ist, über den Quellcode zu schummeln.

Hier ein Beispiel für den HTML-Code einer Quizfrage:

<div class="question">
<h4>Welche Ausgabeformate sind aus einem Markdown Dokument möglich?</h4>
<div class="answers">
<label><input type="checkbox" name="q" value="Frage1-1"/>PDF</label>
<label><input type="checkbox" name="q" value="Frage1-2"/>DOCX</label>
<label><input type="checkbox" name="q" value="Frage1-3"/>PPT</label>
<label><input type="checkbox" name="q" value="Frage1-4"/>HTML</label>
<label><input type="checkbox" name="q" value="Frage1-5"/>PSD</label>
</div>
<div class="feedback correct">
Richtig, eigentlich alle Markdown-Editoren bieten einen HTML- und PDF-Export.
</div>
<div class="feedback incorrect">
Diese Dateiformate können sie leider nicht aus Markdown exportieren. Docx ist zwar mit Pandoc möglich, funktioniert aber am besten über einen Umweg über Richtext.
</div>
<a class="ans">b5ceb729a1b347aa357790e1588c88b3</a>
<a class="ans">1fd302a9c89fc92eead418857a7e5a07</a>
<a class="ans">4fc364339b2127eb81c13ab986a27085</a>
<a class="ans">a66ed4f718095c6e9d9d13a5d5ad60a3</a>
</div>

Die Frage wird dann im HTML wie folgt dargestellt:

Welche Ausgabeformate sind aus einem Markdown Dokument möglich?

6b482bb098af52d6d71da53d2fe64577 c59789dc850e3e78abd42e4cb8b60fd0

Mit etwas Übung ist es relativ einfach, solche Quizfragen direkt per Quellcode in das Skript zu schreiben. Hierbei darf der Code jedoch nicht eingerückt werden, da er sonst vom Markdown als Quellcode erkannt und umgewandelt wird. Für die Verschlüsselung der Antworten kann folgende Webseite genutzt werden: MD5-Hash Erstellung. Als Alternative wurde ein Java-Programm entwickelt, mit dem der Quellcode für Quizfragen komfortabel ohne die Arbeit im Quellcode erstellt werden kann.

Ein Tutorial zu den Quizfragen, weitere Informationen und den Quiz-Generator zum Download gibt es auf dieser Webseite: Quiz.js

Einfügen weiterer Elemente

Im folgenden Abschnitt haben wir noch mal einige mögliche Inhalts-Elemente von digitalen Skripten zusammengefasst. Es hängt teilweise vom jeweiligen Markdown-Converter ab, ob diese Elemente verfügbar sind oder nicht.

Tabellen

Tabellen gehören nicht zu der Grundfunktion von Markdown, viele erweiterte Markdown-Implementationen und Editoren bieten jedoch Tabellen an. In der Regel werden Tabellen in Markdown durch Pipes | und Dashes - gezeichnet. Hier ein Beispiel:

Head 1  | Head2   | Head3
------- | ------- | ------
Zelle A | Zelle B | Zelle C
Zelle D | Zelle E | Zelle F

Dieser Code ergibt folgendes Ergebnis:

Head 1 Head2 Head3
Zelle A Zelle B Zelle C
Zelle D Zelle E Zelle F

Es wird deutlich, dass auf diese Art nur relativ einfache Tabellen erstellt werden können. Komplexere Tabellen können besser direkt in HTML geschrieben oder als Grafik eingebunden werden. Es sollte auch beachtet werden, dass sehr umfangreiche Tabellen nicht unbedingt dafür geeignet sind, direkt in einem Skript eingefügt zu werden. In einem solchen Fall kann auch ein Datei-Download über einen Link im Skript eine sinnvolle Lösung sein.

Info-Boxen oder Zitate

Dies ist eine Info-Box.
In einer solchen können Exkurse, Merksätze, Zitate oder ähnliches dargestellt werden. Aus Markdown wird diese Box mit dem HTML-Tag <cite> ausgezeichnet.

Eine solche Box kann in Markdown einfach durch ein größer-als-Zeichen > vor dem Absatz ausgezeichnet werden. Im elearn.css ist das Cite-Element mit einer Markierung und einer Einrückung versehen und kursiv gesetzt. Andere Zeichenformatierungen wie fett oder Absätze sind auch in einer Info-Box erlaubt. Zitate sind in jeder Markdown-Variante möglich.

Code-Blöcke

Gerade in den MIN-Fächern wird es häufiger vorkommen, dass Quellcode dargestellt werden soll. Quellcode wird in der Regel in einer Mono-Schriftart (gleiche Buchstabenabstände) angezeigt. Zur Kennzeichnung von Code-Blöcken gibt es in je nach Markdown-Dialekt mehrere Möglichkeiten.

Es können einzelne Zeichen als Code markiert werden. Dies geht über Backticks vor und hinter dem Code-Element.
Alternativ können ganze Abschnitte als Code gekennzeichnet werden.
diese werden mit drei ~~~ Tilde-Zeichen, drei ``` Backticks vor und nach dem Abschnitt oder einfach vier Leerzeichen vor der Zeile gekennzeichnet.

Im elearn.css ist festgehalten, dass die Code-Blöcke grau hinterlegt werden und ein horizontales Scrolling für lange Zeilen genutzt wird. Mann kann aber auch einen Zeilenumbruch erzwingen, indem man für das `<pre>`-Element die Eigenschaft `whitespace:pre-wrap` definiert.

Mit Hilfe von Java-Script-Bibliotheken wie Highlight.js ist es auch möglich, verschiedene Programmiersprachen hervorzuheben. Die Befehle können so wie in einem Editor hervorgehoben werden (Highlighting). GitHub-flavored Markdown hat diese Funktion bereits mit an Bord.

Links: Highlightjs.org, GitHub-Flavored Markdown

Formeln

Viele Editoren bieten von Haus aus eine Formelunterstützung mit an. Um Formeln einzufügen, wird die TeX-Notation mit $-Zeichen genutzt. In der HTML-Ansicht werden mittels der JavaScript-Lösung MathJax die TeX-Schnipsel in Schrift, MathML oder SVG-Grafiken umgewandelt. Dies geht sowohl inline als auch in eigenen Absätzen. Zum Beispiel wird der Code

${n! \over k!(n-k)!} = {n \choose k}$

zu ${n! \over k!(n-k)!} = {n \choose k}$.

Für die Druckausgabe werden von den Konvertern die TeX-Elemente durchgereicht oder die svg-Grafiken eingebunden. MathJax bietet auch eine Reihe von LaTeX-Erweiterungen, die zur Nutzung noch heruntergeladen und in die Ressourcenordner hinzugefügt werden müssten.

Links: mathjax

Verteilte Arbeit an Skripten

Ein weiterer Vorteil von Markdown als E-Learning-Autorensprache ist liegt darin begründet, dass kein spezieller Editor benötigt wird und die Inhalte in einfachen .txt-Dateien entwickelt werden. Dadurch ist es besonders einfach, auf verschiedenen Geräten an Inhalten zu arbeiten, allein oder im Team. Für Quellcode existieren mächtige Werkzeuge zur Versionsverwaltung, so dass ein Vergleich und Verschmelzen von Versionen recht einfach zu machen ist. Über Cloud-Lösungen können Inhalte auch auf verschiedene Endgeräte übertragen werden, so dass am PC, Laptop oder Tablett alternierend Inhalte entwickelt werden können.

Im eLearning-Büro MIN wird beispielsweise eine Owncloud-Instanz für die Entwicklung von E-Learning-Inhalten und das Projektmanagement genutzt. Für die Owncloud existieren Clients für die meisten Plattformen (Win, OSX, iOS, Android). Ordner und Dateien können zur Bearbeitung anderen Nutzern freigeschaltet werden, so dass eine Arbeit im Team bestens unterstützt wird. Neuerdings ist es sogar möglich, simultan mit bis zu fünf Personen an einem Text (LibreOffice-Format) zu schreiben. Über die WebDav-Schnittstelle der OwnCloud sind Anwendungen Dritter mühelos einbindbar.

Notebooks App

Abb.: Notebooks App unter OSX.

Für Notizen, Whitepaper, ToDO-Listen und ähnlichen Dokumenten kann die Anwendung Notebooks (Win, Mac, iOS) genutzt werden, die zur Formatierung von Texten ebenfalls Markdown verwendet. Notebooks in Kombination mit der Owncloud ergibt zusammen ein Funktionsspektrum, welches der beliebten Notiz-Anwendung Evernote entspricht und sogar teilweise übertrifft. Eine solche Umgebung ist ideal, um Inhalte sukzessive zu entwickeln, von der ersten Themensammlung über Text-Schnipsel bis hin zum vollständigen Skript.

Wenn umfangreichere Lehrtexte mit Markdown geschrieben werden sollten, kann sich die Nutzung eines Version-Control-Systems wie Git lohnen. Dieses bietet eine serverseitige Versionskontrolle mit Master, Abzweigungen, Zusammenfügen und Löschen, um gemeinsam an einem Dokument zu arbeiten, ohne den Überblick zu verlieren. Jedoch muss man ein wenig Einarbeitungszeit für die Versionskontrolle einplanen, das Arbeiten mit einer OwnCloud ist wesentlich einfacher und intuitiver.

Tools: Owncloud, Notebooks, DroidEdit, Git

Finalisierung und Veröffentlichung des Skripts

Im folgenden Abschnitt werden die Handlungsschritte zur Fertigstellung eines digitalen Skriptes dargestellt. Momentan ist noch relativ viel “Handarbeit” nötig, in Zukunft sollen die meisten Schritte davon zumindest halbautomatisch vonstatten gehen.

Revision

Kein Skript ist fehlerfrei, sei es inhaltlich oder nur von Seiten der Rechtschreibung, daher sollten möglichst viele Fehler bereits vor der Veröffentlichung gefunden und korrigiert werden. Mancher Leser wird jetzt den Korrekturmodus eines Office-Programms vermissen. Zum Korrekturlesen eignet sich meist eine konvertierte Version des Skriptes, sei es HTML oder PDF. Bei den meisten pdf-Readern ist eine Kommentarfunktion eingebaut, so dass sich das Skript damit annotieren lässt. Die HTML-Ausgabe mit CSS ist gut geeignet, um die richtige Formatierung zu überprüfen. Viele Autoren werden dies schon im Schreibprozess selbst über die Vorschau ihres Editors getan haben. Es sollte also auf verschiedenen Ebenen nach Fehlern gesucht werden:

  • Inhaltlich: Lassen sie ihr Skript von einem Kollegen gegenlesen.
  • Rechtschreibung: Lassen sie ihr Skript von jemand Fachfremden gegenlesen.
  • Auszeichnung / Code: Überprüfen Sie dies selbst.

Erstellen der finalen Dateien

Sobald das Skript inhaltlich korrekt und frei von Verschreibungen ist, kann die Finalisierung der Dateien beginnen. Dieser Prozess ist zur Zeit noch nicht optimiert, das Potential zur (Teil-)Automatisierung ist hier aber sehr hoch. Noch müssen einzelne HTML- und Skript-Schnipsel in die HTML-Ausgabe eingefügt werden und zum Schluss alle Dateien in Ordnern zusammen gebündelt werden.

Der Vorgang ist noch nicht standardisiert und kann auf unterschiedliche Weise erfolgen. Je nach genutztem Editor oder Betriebssystem kann der Prozess leicht unterschiedlich aussehen. Es folgen eine Reihe von Schritten, die für die HTML-Ausgabe notwendig sind:

Paginierung. Um das Skript auf mehreren Seiten anzeigen zu können, muss als erster Schritt die Markierungen für die Seitenumbrüche eingefügt werden. Im Markdown bietet sich hierfür eine ungewöhnliche Zeichenfolge an, die einen optischen Marker setzt und gleichzeitig keine Bedeutung in HTML oder Markdown besitzt. Wir nutzen hierfür gern |||Name der Sektion///, diese Zeichenfolge kann dann in der HTML-Ausgabe durch suchen/ersetzen in folgenden Code umgewandelt werden.

 </section>
 <section name="Name der Sektion">

Ein solcher Prozess könnte zukünftig auch automatisiert erfolgen. Die Sektionen werden in der finalen HTML-Ansicht durch das JavaScript getrennt voneinander angezeigt, quasi auf verschiedenen Seiten.

Zwischen die Anführungsstriche bei dem Parameter name wird jeder Seite ein Name gegeben werden. welcher in der finalen Ansicht in der Kopfzeile über der Seite und in der Seitenübersicht erscheint, wenn man auf den Seitentitel klickt.

HTML-Generierung. Nun ist es an der Zeit, HTML-Code aus dem Markdown-Dokument zu generieren. Die meisten Markdown-Editoren besitzen eine HTML-Ausgabe. Wichtig ist, dass das HTML ohne Style rausgeschrieben wird. Manche Konverter Fügen den Überschriften Anker hinzu oder fügen weitere Tags zur Formatierung hinzu. Daher ist es notwendig einen Konverter zu nutzen, der möglichst sauber und ohne Zusätze exportiert. Eine sehr Saubere Ausgabe erhalte ich Beispielsweise aus Mac-Down mit deaktivierten Styles oder aus Sublime Text über das Plugin Markdown-Preview.

Das Ergebnis der Ausgabe sollte also einen sauberen HTML-Body beinhalten, den ich in die index.html des Templates des elearn.js in den <div class="page">-Container einfüge. Der entsprechende Bereich ist im Template mit Kommentaren markiert. Im Template sind auch bereits alle Script und CSS Dateien verknüpft und in den Asset-Ordnern abgelegt. Das Plugin Markdown Preview für SublimeText bietet die Möglichkeit, dass man das HTML-Template beim Export automatisch gefüllt. Hierzu muss in der HTML-Vorlage der zu füllende Bereich mit {{ HTML }} gekennzeichnet und der Ort im Filesystem in den Preferences des Plugins angegeben werden. Ebenso muss in den Preferences die image_path_conversion auf “none” gestellt werden. Ein passendes leeres HTML-Template befindet sich im elearn.js-Ordner.

Metadaten. Es gibt zwei Arten von Metadaten in der index.html. Die HTML-Metadaten im Header und das Info-Feld. Die HTML-Metadaten sind für Suchmaschinen und Browser relevant und sollten dementsprechend ausgefüllt werden.

Das Info-Feld für ein Skript kann in der finalen HTML-Ansicht über den Eintrag Information im Seiten-Menü eingeblendet werden. Das Info-Feld eines digitalen Skriptes sollten mindestens folgende Daten beinhalten:

  • Name der AutorIn
  • Erstellungsdatum
  • Institution
  • Version
  • Lizenz

Das Info-Feld ist recht frei mit HTML formatierbar. Wichtig ist, die umschließenden div-Container beizubehalten, um eine korrekte Anzeige als Lightbox-Overlay zu erhalten. Hier ein Beispiel für eine Metadaten-Box:

 <div class="lb-wrap" id="info">
    <div class="lightbox">
        <div class="info-wrapper">
            <!--Der Inhalt der Info-Box kann frei mit HTML-Inhalt gefüllt werden. -->
            <h4>elearn.js Template</h4>
            <p>
                Prof. Dr. Name des Autors<br>
                Universität Hamburg
            <p>
            <p>
                Lizenz: <a href="https://creativecommons.org/licenses/by-sa/2.0/de/" target="_blank">CC-by-sa</a>
            </p>
        </div>
    </div>
</div>

In der Info-Box können auch Verweise auf genutzte Ressourcen angegeben werden, z.B. Abbildungen unter CC-Lizenz. Auch andere Angaben wären hier denkbar, etwa Danksagungen, Drittmittel-Förderung, Co-Autoren und Ähnliches. Per JavaScript wird hier eine kleine Fußzeile eingeblendet, dass das Skript auf der Basis des elearn.js aufgebaut ist.

Rausschreiben von PDF. Für eine einfache PDF-Version reicht es meist, die HTML-Ausgabe über die Drucken-Funktion des Browsers zu generieren (pdf-Drucken). Um absolut saubere PDF-Dateien zu generieren, ist der TeX-Export von Pandoc empfehlenswert, um dann mit einer Tex-Layoutvorlagen das PDF zu generieren. Im SublimeText mit Pandoc-Plugin geht dies über die Tastenfolge cmd-shift-p > pandoc. Im darauf erscheinenden Dropdown-Menü können die verschiedenen Formate ausgewählt werden. Pandoc benötigt für den TeX-Export absolute Pfade für die Abbildungen, daher müsste vor der Konvertierung der Ort des Skriptes im Filesystem durch Suchen-Ersetzen dem Pfad zum Bild hinzugefügt werden. Der Pandoc-LaTeX-Konverter für PDF-Dateien kann keine svg-Dateien konvertieren. Diese müssten also im Vorfeld durch PNGs ersetzt werden.

Rausschreiben von eBooks als ePub: Der Export als ePub ist auch über Pandoc möglich. Ebenso wie der PDF-Export von Pandoc benötigt der ePub-Export auch absolute Pfade zu den Medien. Im ePub können jedoch auch svg-Grafiken verwendet werden.

Im Netz bereitstellen

Die HTML-Ausgabe ist für die Anzeige auf dem Computer und Mobilgerät optimiert.Sie kann über einen Webserver im Internet angezeigt oder offline aus dem Dateisystem aufgerufen werden. Die Ressourcen für die Anzeige befinden sich alle im Assets-Ordner. So können alle Inhalte, zumindest bis auf Streaming-Medien, auch ohne Internetverbindung angezeigt und genutzt werden. Es ist aber wünschenswert, eine Instanz des Skriptes unter einer dauerhaften URL finden zu können. Hierfür muss einfach der gesamte Ordner mit der index-Datei und dem Asset-Ordner auf einem Webserver abgelegt werden. Anschließend kann von dem ganzen Paket noch ein Download.zip erstellt und ebenfalls in dem Ordner abgelegt werden. Registriert das elearn.js ein download.zip neben der index.html, so wird automatisch der Eintrag Quelldateien Downloaden im Side-Menü aktiviert. können ein PDF und ein EPUB–Download aktiviert werden. Es müssen hierzu nur die Dateien page.pdf und page.epub im Ordner neben die inderx.html abgelegt werden.

Hinweis: Wenn Video- oder Audio-Dateien per HTML5-Tag eingebunden sind, muss der Server entsprechende Mime-Types kennen. Wenn die Medien auf dem Server nicht abspielen, lokal auf ihrem Rechner jedoch schon, fragen Sie ihren Host nach den MIME-Types.

Zur Zeit existiert noch kein fester Ort für solche Online-Lernmedien an der Universität Hamburg. Als Mitglied der UHH kann man einen eigenen Webspace vom RRZ für solche Lernmedien nutzen. Ihre E-Learning-Supporteinrichtungen können Ihnen hierbei behilflich sein.

Auch die Lernplattformen sind zum Veröffentlichen digitaler Skripte geeignet, an der UHH sind dies OLAT und CommSy. In OLAT bietet sich es an, ein ZIP mit allen Dateien im Editor eines neuen Content-Packages hochzuladen. Anschließend kann man den Asset-Ordner aus der Seitenübersicht ausblenden. Etwas störend bei der Ansicht in OLAT sind die vielen Navigationselemente um die Inhaltsbühne, so geht der Reader-Effekt des reduzierten Layouts vom elearn.js verloren. In CommSy kann ein ZIP-File in einem Materialeintrag hochgeladen werden. Wenn es auf der obersten Ebene eine index.html besitzt, so wird der Inhalt des ZIPs als HTML-Lernmodul angezeigt.

Ausblick auf zukünftige Entwicklungen

Zukunft von MD

Online-Konverter

Nicht alle Editoren bieten alle Exportformate an und die Installation und Handhabung von Pandoc ist nicht unbedingt Endnutzer-tauglich. Auch die Installation von Plugins in Editoren wie SublimeText oder Atom ist nicht unbedingt sehr komfortabel. Problematisch ist vor allem, dass kein einheitlicher Workflow angegeben werden kann, solange jeder Nutzer sich beliebige Konverter zunutze macht. Um einen einheitlichen und verlässlichen Konverter anzubieten, erscheint das Bereitstellen eines Online-Konverters als am besten geeignet, die beschriebenen Probleme zu lösen.

Die Ausgestaltung eines Online-Konverters kann verschieden ausgestaltet werden.

  • Briefkasten: die Einfachste Form wäre eine Art Briefkasten, an den man sein Markdown-Dokument schickt und das HTML-Dokument zurückbekommt.

  • Modularer Packdienst: Ebenso dankbar wäre ein Dienst, der die notwendigen zusätzlichen Dateien je nach Bedarf in ein (zip-)Paket packt. Man könnte die Ausgabeformate wählen (html, pfd, epub) und würde, je nach genutzten Bausteinen entsprechende JavaScript- und CSS-Dateien in Unterordner gepackt bekommen. Mediendateien könnten hierbei auch in den Converter hochgeladen werden.

  • Online-Autorenumgebung: Eine Online-Autorenumgebung wäre mit einem persönlichen Login ausgestattet. Dort könnte ein Autor seine verschiedenen Medien und Texte Organisieren und bearbeiten. Digitale Skripte ließen sich dort mit einem Online-Editor erstellen. Hier wäre auch eine Fehler-Prüfung des Skriptes möglich. Medien würden hochgeladen und flexibel in verschiedene Skripte verlinkt. Die Autorenumgebung würde verschiedene Ausgabeformate anbieten sowie eine dauerhafte URL für die online-Variante des Skriptes bereitstellen.

Mit der Variante der Online-Autorenumgebung gerät der Konvertierer auch immer mehr in den Bereich eines Content-Management-Systems. Speziell für Online-Lernressourcen wurden in der Vergangenheit Modelle eines Repositoriums entwickelt.

eLearning-Content-Repositorium

Der Sinn und Zweck eines Content-Repositorium liegt vor allem in der Verwaltung und Strukturierung von digitalen Lerninhalten und wird häufig mit dem Konstrukt der freien Lernressourcen (Open Educational Ressources, OER) in Verbindung gebracht. Die Vorteile eines Zusammenspiels von Markdown, elearn.js und einem Content-Repository wäre folgende:

  • Offene Lernressorcen in einem offenen Format
  • Feste URLs für Online-Lehrmedien
  • Leichte Granularisierung des Contents
  • Einfache Wiederverwendung und Anpassung des Contents
  • Organisation von Inhalten mit Metadaten
  • Kollaboration Erarbeitung von Inhalten
  • Verknüpfung mit anderen Repositorien/Bibliothekssystemen
  • Anbindung an Learning-Management-System
  • Tracking von Nutzungsdaten

Denkbar wäre auch die Kombination von Online-Converter und Content Repository, ggf. auch mit einer Versionsverwaltung ähnlich derer von Git. Ein schönes Beispiel gibt hierfür GitBook. Hier ist eindeutig eine Ähnlichkeit zu unserem Ansatz erkennbar. Mit entsprechendem Login können hier sogar Kommentare zu Absätzen von Lesern eingefügt werden. GitBook ist leider eine kommerzielle Software, die bei Installationen auf einem eigenen Server Kosten in Höhe von bis zu 2500 € pro Jahr mitbringt. Ebenso fehlen hier die interaktiven Erweiterungen wie Quizzes und Galerien.

elearn-MD

Eine weitere mögliche Weiterentwicklung ist die Entwicklung eines eigenen Markdown-Dialekts. Der Vorteil dabei könnte darin liegen, dass die Anzahl der HTML-Snipplets deutlich reduziert werden könnte. Die Schwierigkeit bei dieser Entwicklung liegt in der Beschreibung einfacher Auszeichnungen für Sektionen, Bildergalerien, Quizzes oder interaktiver Grafiken, die eindeutig interpretierbar sind.

Für die Sektions hat sich zum Beispiel eine Auszeichnung bewährt, die bei dem momentanen Entwicklungsstand leicht per Suchen-Ersetzen im HTML in die richtigen Tags umzuwandeln sind. Mit |||Name der Sektion/// fällt die Auszeichnung genügend im Textfluss auf und deutet grafisch auch ein wenig das Blättern in Papier-Seiten an. Im Moment wird die Zeile einfach in einen HTML-Absatz rausgeschrieben. Anschließend kann man durch Suchen/Ersetzen in einem Texteditor die Zeichenfolge <p>||| durch </section><section name=" und die Zeichenfolge ///</p> durch "> ersetzt werden. Mit einem eigenen MD-Dialekt wäre das Suchen-Ersetzen nicht mehr nötig und der Converter würde direkt die Section-Tags im HTML einfügen.

Interaktive Grafik und Zeitstrahl

Einer der nächsten Punkte, die kurz vor der Entwicklung stehen, sind Javascript-Erweiterungen für neue interaktive Elemente. Hier stehen als nächstes interaktive Grafiken und Zeitstrahlen im Fokus. Der Programmcode für die Grafiken soll, genauso wie die von den Quiz-Fragen und Galerien, einfach wiederverwendbar sein.

Entwurf interaktive Grafik

Abb.: Mockup für eine interaktive Grafik

Bei den interaktiven Grafiken können auf einem Hintergrund-Bild anhand von Koordinaten Schaltflächen (Marker) positioniert werden. Jeder Schaltfläche ist ein Inhaltsblock zugeordnet, der durch klicken auf den Marker unter der Abbildung angezeigt wird. Kurze Texte wie Bezeichnungen oder Bemaßungen könnten auch direkt neben dem Marker angezeigt werden. Als Inhalts-Kategorien werden im Moment Information, Frage und Links geplant. Im Informations-Block sollen auch Abbildungen und Videos dargestellt werden können.

Timeline.js

Abb.: Screenshot von einem interaktiven Zeitstrahl mit Timeline.js.

Ein interaktiver Zeitstrahl soll es ermöglichen, zeitliche Entwicklungen oder Prozeduren interaktiv erfahrbar zu machen. Der Zeitstrahl zeigt die Ereignisse und Phasen in einer horizontal scrollbaren Übersicht. Durch Klick auf die Einträge werden weitergehende Informationen unter oder über dem Zeitstrahl angezeigt. Das im Screenshot abgebildete Timeline.js (https://timeline.knightlab.com) bietet im Kern alle Funktionalitäten, die wünschenswert wären, jedoch benötigt es zwingend eine Server-Komponente. Dies spricht gegen die Einfachheit unseres Ansatzes und gegen die geforderte offline-Fähigkeit.

Beide Interaktions-Module sollen mit finanzieller Unterstützung der Hamburg Open Online University (HOOU) zeitnah entwickelt werden.

Erweitertes Print-Dokument

Neben den Verbesserungen für die HTML-Darstellung sind auch Verbesserungen für die Print-Ausgabe denkbar. Zum einen wäre ein eigenes Print-Layout für die PDF-Generierung über LaTeX via Pandoc schön, um auch bei dieser Ausgabevariante möglichst nah am ursprünglichen Design zu bleiben.

Zum Anderen wäre es wünschenswert, wenn die Darstellung der interaktiven Elemente in der druckbaren Skript-Version optimiert werden würde. Hier wäre eine Art Augmented Textbook denkbar (vgl. Chen et al 2011). Dafür müssten die interaktiven und dynamischen Medien in der Print-Ausgabe als Vorschau mit einem QR-Code angezeigt werden. Der Lesende könnte dann bei Interesse den Code mit seinem Mobilgerät einscannen und käme dann auf die HTML-Ansicht des entsprechenden Mediums. So wäre eine optimale Verschränkung von gedruckter Papierversion und dynamischen und interaktiven Inhalten umsetzbar.

Lern-App – offline-Modus

Ein nicht zu verachtender Vorteil digitaler Skripte auf Basis von elearn.js ist, dass die Skripte beinahe keine Abhängigkeiten von Netzressourcen aufweisen, mal abgesehen von Video-Streams. Somit sind die Inhalte in der Regel auch komplett ohne Internet-Anbindung nutzbar, wenn der benötigte Asset-Ordner ebenfalls offline zur Verfügung steht. Auch jetzt schon ist es so, dass ein einmal geöffnetes Skript auch bei Trennung der Netzwerkverbindung weiter vollkommen funktionsfähig ist. Die Inhalte sind dann alle im Arbeitsspeicher des Rechners abgelegt.

Mit dem Download der ZIP-Datei ist ebenfalls eine Offline-Nutzbarkeit gegeben, nach dem Entpacken funktioniert das Skript ebenso wie auf einem Webserver. Der ZIP-Download kann auch zur Weitergabe der Quelldateien von OER (Open Educational Ressources) genutzt werden.

Auf mobilen Geräten könnte der Download über eine App geschehen, mit der man die Pakete auswählt, ggf. über QR-Code, herunterlädt, startet und verwaltet. Mit einer solchen App wäre eine komfortable mobile Nutzung gewährleistet und es könnten auch offline Nutzungsdaten zur Qualitätssicherung erfasst werden.

Präsentationsmodus und Second Screen

Wenn man den Gedanken eines Single-Source-Ansatzes weiter denkt, ist ein möglicher Schluss, dass aus dem Quelldokument auch eine Präsentation generiert werden könnte. Eine Lösung für Präsentationen mit elearn.js wäre, Inhaltselemente für Präsentations- und/oder Lesemodus besonders auszuzeichnen. So wäre es möglich, eine Bullet-Liste nur im Präsentationsmodus zu zeigen, längere Fließtext-Passagen hingegen nur im Lesemodus. Ebenso könnten gesondert Notizen für den Präsentationsmodus markiert werden. Für die Markierung wären eigene Zeichenfolgen zu überlegen, zum Beispiel [pres], [read] oder [note] zum Öffnen und Schließen der gesonderten Bereiche. Im Präsentationsmodus würden dann alle Navigationselemente ausgeblendet und die Schrift vergrößert werden. Als erste Ansätze können die reveal.js und S5-Exportformate von Pandoc gesehen werden.

Ein zweiter Screen, etwa von einem Smartphone, könnte dann im Präsentationsmodus für den Dozenten Navigationshilfen (Swipe, Inhaltsverzeichnis, Vorschau nächste Seite, Timer) und Notizen anzeigen. Smartphone und Präsentationsrechner müssten in einem solchen Falle in Echtzeit kommunizieren. Hier müssten vor und Nachteile einer serverseitigen Lösung gegen eine direkte Verbindung von Client zu Client abgewogen werden.

Fazit

Die Entwicklung von digitalen Skripten mit Markdown und elearn.js kann die Diskussion um offene Lernressourcen maßgeblich beeinflussen. Hochwertige interaktive und responsive Lernmedien können hiermit unabhängig von kommerzieller Software produziert, weitergegeben und angepasst werden. Eine erste funktionsfähige Version steht nun zur Verfügung, dennoch gibt es noch vielfältige Möglichkeiten der Weiterentwicklung.

Offene Lernressourcen sind langfristig nur auf Basis offener Technologien sinnvoll.

Literatur

Adapt learning community. (o. J.). Abgerufen 11. September 2015, von https://community.adaptlearning.org

Chen, N.-S., Teng, D. C.-E., Lee, C.-H., & Kinshuk. (2011). Augmenting paper-based reading activity with direct access to digital materials and scaffolded questioning. Computers & Education, 57(2), 1705–1715.

Friendcode Inc. (2015). GitBook. Abgerufen 18. November 2015, von https://www.gitbook.com/

Gruber, J. (2004). Markdown. Abgerufen 18. November 2015, von https://daringfireball.net/projects/markdown/

H5P – Create, share and reuse interactive HTML5 content in your browser. (o. J.). Abgerufen 11. September 2015, von https://h5p.org

MacFarlaine, J. (2016). Pandoc. Abgerufen 11. September 2015, von http://pandoc.org/

Northwestern University Knight Lab (2015). Timeline.js – Easy-to-make, beautiful timelines. Abgerufen 18. November 2015 von http://timeline.knightlab.com.

The Ultimate List of HTML5 eLearning Authoring Tools. (o. J.). Abgerufen von http://elearningindustry.com/the-ultimate-list-of-html5-elearning-authoring-tools

Wenz, C. (2014). JavaScript: das umfassende Handbuch ; [Grundlagen, Programmierung, Praxis ; für Einsteiger, Fortgeschrittene und Profis ; browserübergreifende Lösungen ; DOM, CSS, Ajax, XML, WebSockets ; inkl. HTML5 und jQuery] (11. Aufl). Bonn: Galileo Press.

Zillgens, C. (2013). Responsive Webdesign: reaktionsfähige Websites gestalten und umsetzen. München: Hanser.

Impressum

Michael Heinecke | f6jv007@uni-hamburg.de

Universität Hamburg

Impressum der UHH

Dank

Ich möchte mich ganz herzlich bei all meinen Kollegen bedanken, die mich in der Zeit der Konzeptfindung und Ausarbeitung ermutigt und bekräftigt haben. Ebenso für das Korrekturlesen und Annotieren des Papers.

Ein riesiger Dank geht an unseren Studenten Arne Westphal, der mit seiner Programmier-Kompetenz und grandiosem Engagement das elearn.js mitentwickelt hat.

Förderung

Das elearn.js wurde zur Produktion von Lernmedien und Selfassessments zu einem großen Teil im Rahmen des Universitätskollegs der Universität Hamburg in den Teilprojekten SuMO und MIN-Check entwickelt.

Dieses Vorhaben wird aus Mitteln des BMBF unter dem Förderkennzeichen 01PL12033 gefördert. Die Verantwortung für den Inhalt dieser Veröffentlichung liegt bei den Herausgebern und Autorinnen und Autoren.