Digitale Skripte Schritt für Schritt

Michael Heinecke
Universität Hamburg

cc-0

Titelgrafik

Digitale Skripte Schritt für Schritt

Die digitalen Skripte auf der Basis von elearn.js sind eine sehr flexible Technologie zur Entwicklung digitaler Lerninhalte. Die Flexibilität zeigt sich auch in vielen Freiheiten im Workflow. So steht der Nutzer zunächst vor der Aufgabe, sich für einen Workflow, beispielsweise einen Editor, zu entscheiden. Für technisch Unerfahrene ist das eine große Hürde, über die das vorliegende Tutorial helfen soll.

In diesem Tutorial wird beispielhaft ein Workflow mit Einsatz des Atom-Editors Schritt für Schritt durchgespielt. Anhand von Screencasts können Sie sehen, wie die notwendigen Handgriffe vorgenommen werden.

Die gezeigte Lösung ist nur eine von vielen, ist aber sowohl für Windows- als auch für Mac-User praktikabel und bedient sich ausschließlich freier Open-Source Software.

Zielgruppen: Lehrende, die Ihr Veranstaltungsskript für alle Endgeräte digital anbieten wollen; Autoren und Autorinnen, die Open Educational Ressources in einem nachhaltigen Format umsetzen wollen; Personen aus Supporteinrichtungen, die mehr über die Umsetzung von interaktiven digitalen Skripten erfahren wollen.

Vorwissen: Grundlegende Eigenschaften digitaler Skripte, Umgang mit PC und Dateien

Dauer: ca. 45 Min.

Viel Erfolg bei Erstellen eigener digitaler Skripte!

Übersicht

Template

Zunächst sollten Sie sich das aktuelle Template für digitale Skripte herunterladen. Hier die Anleitung per Screencast.

Schritte

  • Download des Templates über den Browser
    Link auf GitHub - dort Download über den grünben Button starten
  • Zip-File entpacken
  • Ordner Template kopieren
  • Ordner umbenennen nach eigenem Projekt
  • Unbedingt beachten: Keine Sonderzeichen, Umlaute, Leerzeichen bei Dateinamen benutzen! Server haben damit Probleme.

Ordnerstruktur des Templates

  • assets (Ordner)
    • css (Dateien zur Steuerung des Layouts, nicht anfassen)
    • font (Schriften + svg als Quelldatei für Icon-Schrift)
    • img (Ordner für alle verwendeten Medien)
    • js (Skripte zur Steuerung der Interaktionen)
  • download.zip (Quelldateien zum Download für Nutzer)
  • elearn_template.md (Markdown-Datei als Beispiel)
  • index_empty.html (HTML-Gerüst, Template-Datei ohne Inhalt, hier kommt der Export rein)
  • index.html (Beispiel-Skript mit Code zum kopieren)

Editor

In dem folgenden Video wird Ihnen gezeigt, wie Sie den Atom Editor für die Arbeit mit Markdown vorbereiten können.

Schritte

  • Download des Atom-Editors - Link
  • Hinzufügen des Template-Ordners als Projekt-Ordner
    File > Add Project Folder
  • Erstellen eines neuen Markdown Dokuments
    File > New File | Save As "Dokumentname.md"
  • Vorschau für Markdown aktivieren
    Packages > Markdown Preview > Toggle Preview
  • Wechsel von Style der Vorschau auf hell
    Atom> Preferences > Packages > markdown-preview > Settings > Use GitHub.com Style
  • Nützliche Pakete hinzufügen
    Atom> Preferences > Install
    • markdown-writer
    • markdown-scroll-sync
    • Atom-Toolbar
    • toolbar-markdown-writer
    • markdown-pdf
  • ggf. Ändern des gesamten Editors auf hell
    Atom> Preferences > Themes > UI-Theme "One Light" | Syntax-Theme "One Light"

Markdown

Im folgenden Video erfahren Sie, wie Sie die Inhalte in Markdown für digitale Skripte Schreiben.

Schritte

<video preload="auto" controls="controls">
<source src="assets/img/template-media/beispiel-video.mp4" type="video/mp4"></source>
<source src="assets/img/template-media/beispiel-video.webm" type="video/webm"></source>
Dein Browser unterstützt kein HTML5-Video. Um dir das Video dennoch ansehen zu können, folge einfach diesem <a href="assets/img/template-media/beispiel-video.mp4">Link</a>.
</video>
  • Formeln in LaTeX-Notation eingeben -> Anzeige in der Vorschau mit Package Markdown Preview Plus
  • Platzhalter für Seitenumbrüche: |||Name der Seite///
    Tipp für Pipe (|): Win AltGr+<, Mac alt+7

HTML-Export in das Template einfügen

Sobald Sie ihr Markdown-Dokument fertig gestellt haben, steht der Export als HTML-Dokument an. Der exportierte Code wird anschließend in das Template eingefügt.

Schritte

  • Vorschau anzeigen
    Packages > Markdown Preview > Toggle Preview
  • HTML-Code kopieren
    Rechtsklick > Copy As HTML
  • HTML in eine neue Datei einfügen
    File > New File | Edit > Paste
  • Relative Pfade generieren:
    Bei Bildern die URL links von assets/img/... markieren, Find > Replace in Buffer, Feld Replace in Current Buffer leer lassen, Replace All
  • Platzhalter Seitenumbrüche ersetzen
    • Find: <p>|||
    • Replace: </section><section name="
    • Find: ///</p>
    • Replace: ">
  • Alles markieren und kopieren
    Rechtsklick > Select All | Rechtsklick > Copy
  • index_empty.html öffnen
  • Platzhalter markieren: {{Body}} und HTML einfügen Rechtsklick > Paste
  • ggf. mit Tab einrücken
  • Speichern: File > Save
  • Ansehen: index_empty.html im Browser öffnen

Finalisierung des digitalen Skriptes

Nur noch wenige Handgriffe bis zum fertigen digitalen Skript. Auf geht's...

Schritte

  • HTML-Metadaten ausfüllen
<meta name="keywords" content="Key, Words">
<meta name="description" content="Hier Beschreibung einfügen">
<meta name="author" content="Name Autor">
  • Werden Erweiterungen verwendet? Wenn nein, können die Links auf CSS- und JavaScript-Dateien für die Erweiterungen quiz.js und elearnvideo.js gelöscht werden.
<link rel="stylesheet" type="text/css" href="assets/css/quiz.css">
<link rel="stylesheet" type="text/css" href="assets/css/elearnvideo.css">`
...
<script type="text/javascript" src="assets/js/quiz.js"></script> <!-- Quiz Script -->
<script type="text/javascript" src="assets/js/elearnvideo.js"></script> <!-- Video Script -->

  • HTML-Titel ausfüllen
    <title>elearn.js Template</title>

  • Daten für Impressum

<div class="info-wrapper">
<!--Der inhalt der Info-Box kann frei mit html-Inhalt gefüllt werden. -->
<h4>Name des Skripts</h4>
<p>
Prof. Dr. Name des Autors<br>
name der Institution
<p>
</div>
  • Wenn keine mathematischen Formeln verwendet werden, kann die MathJax-Einbindung am Ende des Dokuments gelöscht werden.
<script type="text/x-mathjax-config">
MathJax.Hub.Config({...
 
  ...löschen bis...
 
...src="https://cdn.mathjax.org/mathjax/latest/MathJax.js"></script>
  • Template-Dateien und Dateien nicht genutzter Erweiterungen löschen: index.html, elearn_template.md, download.zip, assets/css/"erweiterung.css", assets/font/eLearn-Video.woff, assets/img/template-media/, assets/js/"erweiterung.js"
  • index_empty.html umbenennen in index.html
  • page.pdf Erstellen:
    Markdown-Datei öffnen, Paket markdown-pdf installieren (falls noch nicht geschehen), Packages > Markdown to PDF > Convert, PDF-Datei in page.pdf umbenennen
  • download.zip erstellen aus Markdown-Datei, index.html, assets-Ordner
  • Digitales Skript testen: index.html im Browser öffnen

Yeah, Ihr erstes digitales Skript ist fertig!