Dokumentation zur Schnittstelle RevealJS/Markdown
Übersicht
1. Erstellen von Markdown Dateien
2. Einfügen von Markdown Dateien
3. Verändern der Schriftgröße in Markdown
4. Einfügen von Bildern in Markdown
5. Einfügen von H5P Material
6. Einfügen von Counter (Webseitenaufrufe)
7. Entwicklungsumgebung
1. Erstellen von Markdown Dateien
1. Erstellen Sie eine neue Markdown Datei im Pfad:
https://git.rwth-aachen.de/nfdi4ing/education/education-pages/NAME_IHRES_REPOSITORIES/-/tree/master/markdown_slides
2. Wählen Sie den Namen alphabetisch so, dass er der Reihenfolge der Präsentation entspricht (Beispiel: a_datei1.md, b_datei2.md, ..)
3. Schreiben Sie Ihren Inhalt in die neu erstellte Markdown Datei
Hinweis: Benutzen Sie 2 Leerzeichen in Markdown für einen vertikalen Seitenwechsel der Folien. Benutzen Sie 3 Leerzeichen oder eine neue Markdown Datei für einen horizontalen Seitenwechsel der Folien
2. Einfügen von Markdown Dateien
1. Öffnen Sie Ihre HTML Datei NAME_IRHER_PRÄSENTATION.html:
https://git.rwth-aachen.de/nfdi4ing/education/education-pages/NAME_IHRES_REPOSITORIES/-/blob/master/html_slides/NAME_IHRER_PRÄSENTATION.html
2. Fügen Sie folgenden Code zur Eingliederung Ihrer Datei hinzu:
<section data-background-image="../../revealjs.code/logo.svg"
class="your name" data-background-size="200px" data-background-position="5% 5%" data-markdown="../markdown_slides/NAME_IHRER_MARKDOWN_DATEI.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n"></section>
3. Verändern der Schriftgröße in Markdown
1. Öffnen Sie Ihre HTML Datei NAME_IRHER_PRÄSENTATION.html:
https://git.rwth-aachen.de/nfdi4ing/education/education-pages/NAME_IHRES_REPOSITORIES/-/blob/master/html_slides/NAME_IHRER_PRÄSENTATION.html
2. Fügen Sie ein neues .css template nach folgendem Schema hinzu:
<style>
.your {text-align: left;}.name {font-size: 30px;} </style>
3. Verändern Sie "text-align", "font-size" und "class name" (hier: "your name"):
4. Gehen Sie zurück zu Schritt 2 und verwenden Sie ihren Klassennamem bei bei "class=your name" im Einfügeschema Ihrer neuen Markdown Datei
4. Einfügen von Bildern in Markdown
1. Laden Sie das Bild in den folgenden Ordner als .png Format:
https://git.rwth-aachen.de/nfdi4ing/education/education-pages/NAME_IHRES_REPOSITORIES/-/tree/master/media_files
2. Fügen Sie folgenden Code zur Eingliederung des Bildes in der gewählten Markdown Datei hinzu:
3. Fügen Sie die Markdown Datei wie in Abschnitt 2 beschrieben in dem Ihre HTML Datei
5. Einfügen H5P Material
1. Erstellen Sie H5P Material mit einer ausgewählten Software. Eine beispielhafte Software hierfür ist Lumi. Nutzen Sie die Dokumentation von H5P als Hilfe.
2. Laden Sie die erstellte Datei in einem neuen Ordner im folgenden Pfad hoch:
https://git.rwth-aachen.de/nfdi4ing/education/education-pages/NAME_IHRES_REPOSITORIES/h5p_slides/ORDNERNAME_FUER_ERSTELLTE_H5P_DATEIEN_EINES_CONTENTS/
3. Referenzieren Sie in der JavaScript Funktion setup() ihrer HTML Datei den Ordner des H5P Material in der Variable "h5pJsonPath" und benennen Sie den div Container: "await new H5P(document.getElementById('CONTAINER_NAME')"
5. Einfügen H5P Material
4. Platzieren Sie den div Container an der gewünschten Stelle in Ihrer Präsentation: "<div id="CONTAINER_NAME"></div>"
5. Benutzen Sie Ihre Kopie der
Beispielvorlage, welche auch Inhalte von H5P anzeigt
Hinweise:
1) In der Windows Version von Lumi müssen Sie die .H5P Datei zunächst entspacken (Beispielsweise mit der Software WinRAR)
2) Die Ordnerstruktur beinhaltet mehrere Dateien und kann somit nur mit git hochgeladen werden (nicht über die Weboberfläche von Gitlab)
6. Einfügen von Counter (Webseitenaufrufe)
Der Besucherzähler funktioniert mit
1. Gehen Sie auf die Webseite und wählen Sie ein Design
2. Kopieren Sie den Quellcode und fügen Sie diesen in Ihre Präsentation (Zeile 230 in der Beispielvorlage)
7. Entwicklungsumgebung
1. Kopieren Sie die Beispielvorlage in Ihre erstellte Datei
2. Nutzen Sie die Datei testumgebung.html als Paralleldatei zur Entwicklung. Ein Direktlink ist in Ihrer README Datei im Repository zu finden
Dokumentationen:
Kontakt:
Projektmanager: m.moser@wzl.rwth-aachen.de,t.hamann@wzl.rwth-aachen.de
Technische Umsetzung: l.lipka@wzl.rwth-aachen.de,j.werheid@wzl.rwth-aachen.de
Werkzeugmaschinenlabor RWTH Aachen, Lehrstuhl für Fertigungsmesstechnik und Qualitätsmanagement