SuMO - Universität Hamburg

Produktion digitaler Skripte
Michael Heinecke
eLearning-Büro MIN Universität Hamburg
Januar 2016
cc-by-sa
interaktiv
nachhaltig
responsiv
mehrere
Ausgabeformate
digitales
Skript
offener Standard
Open Source
CC
1
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:
2
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.
3
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.
Distraction free
html
keyboard only
pdf
1 edit
2
3
Freie Wahl
des Editors
Markdown
Dokument
KONVERTER
mobile Editoren
epub
Zusammenarbeit
...
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
4
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
5
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
6
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
7
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 SSoouurrccee--CCooddee 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
8
Abb.: Navigationselemente des elearn.js
Durch ein Zusatz-Paket (quiz.js) lassen sich Quiz-Fragen einbinden, etwa Single-, MultipleChoice 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
9
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:
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
10
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.
11
Produktionsworkflow
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
12
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.
13
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
14
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>
FFrreeiiee W
Weerrkkzzeeuuggee zzuum
m VVoorrbbeerreeiitteenn ooddeerr eerrsstteelllleenn vvoonn BBiillddeerrnn
Pixel: Paint.net, Gimp, irfanview
Vector: Inkscape, LibreOffice Draw
Online-Tools: sketch.io, draw.io
B i l d e rg a l e r i e n
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>
15
<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.
!
"
Markdown ist kinderleicht zu erlernen.
"
16
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.
17
<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.
FFrreeiiee W
Weerrkkzzeeuuggee zzuurr VViiddeeoobbeeaarrbbeeiittuunngg
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">
18
<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>
0:00
0:16
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-, ForcedChoice- 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">
19
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?
PDF
DOCX
PPT
HTML
PSD
Lösen
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.
Ta b e l l e n
Tabellen gehören nicht zu der Grundfunktion von Markdown, viele erweiterte MarkdownImplementationen und Editoren bieten jedoch Tabellen an. In der Regel werden Tabellen in
20
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.
I n f o - B oxe n o d e r Z i t a t e
D
Diieess iisstt eeiinnee IInnffoo--BBooxx..
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.
C o d e - B l ö c ke
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
21
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 CloudLö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.
22
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.
TToooollss: 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.
R ev i s i o n
Kein Skript ist fehlerfrei, sei es inhaltlich oder nur von Seiten der Rechtschreibung, daher
23
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 SkriptSchnipsel 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
24
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,
25
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-LaTeXKonverter 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.
I m N e t z b e re i t s t e l l e n
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
26
werden. Wenn es auf der obersten Ebene eine index.html besitzt, so wird der Inhalt des ZIPs
als HTML-Lernmodul angezeigt.
27
Ausblick auf zukünftige Entwicklungen
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 MarkdownDokument 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
28
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 onlineVariante 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.
29
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.
30
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.
31
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 PrintAusgabe 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
32
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 VideoStreams. 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.
33
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.
34
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 | [email protected]
Universität Hamburg
Impressum der UHH
35
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 ProgrammierKompetenz 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.
36