HTML Folien, mslide

Motivation

Im Rahmen der Linux User Gruppe halte ich immer wieder Vorträge. Graphische Werkzeuge wie LibreOffice Impress (Unter Windoof gibt es etwas analoge, ich glaube Power Point) sind nicht unbedingt meine Lieblinge zumal eine passende Software zum Abspielen der Präsentation vorhanden sein muss.

Eine Präsentation sollte auf alle möglichen Geräte angeboten werden können. Es bedeutet, dass es soweit wie nur möglich die Eigentümlichkeiten der Abspielgeräte Rücksicht nehmen.

Vorträge sollten auch verteilt werden, nur Folien auszuhändigen ist nicht immer ausreichend, es wäre Gut eine passende Dokumentation mit zu liefern. Dies würde bedeuten, dass 2 Dokumenten gepflegt werden, oder dass die Vortragsunterlagen bereits dir Erklärungen zu den einzelne Folien beinhalten, in der Folien jedoch nicht sichtbar sind.

Aus der vorbereite Unterlagen sollten die Folien sowie ein geeigneten Dokument, HTML Seite und oder PDF Datei.

Warum HTML

HTML Code besteht aus der eigentliche Informationen und
Aus der Layout Vorgaben (CSS).
HTML benötigt nur ein Browser, diesen sind auf praktisch jeden Gerät verfügbar.
HTML Seiten können dynamisch sein, über Tastatur oder Maus bzw. Berührung des Bildschirmes, bedient werden.
Aus eine HTML Datei kann ein ausdruckbaren Dokument erzeugt werden.

HTML und Ausgabe Medien

Beamer, Computer Bildschirme, Mobile Geräte, Drucker sind unterschiedlich.

Beamer

Je nach Alter sind Format und Auflösung unterschiedlich:
800 x 600 Bildpunkten, Seitenverhältnis 4:3
1024 x 768 Bildpunkten, Seitenverhältnis 4:3
1920 x 1080 Bildpunkten. Seitenverhältnis 16:9

Beim Anschluss am PC/Notebook, wird das Format richtig erkannt.

PC Bildschirm

Hier ist die Welt vielfältiger!

Übliche Seitenverhältnisse:
- 16:9
- 3:2
- Sonder Formate wie 21:9
- …
Breite in Pixel ?
- 1368
- 1920
- 3840
- …

Fernseher

Sie können auch als Ausgabegerät dienen.

Format oft 16:9 Größe wird beim Anschluss am PC erkannt.

Dies geht beispielsweis mit “Smart View”. Es ist eine Funktion, die zu erreichen ist, wenn die Schnelleinstellungsleiste vollständig geöffnet ist. es sollte sich auf eine der Blätter befinden.

Drucker

In Europa können die meisten Drucker DIN A4 Seite bedrucken.
Es können Farb- oder Schwarz/Weiß Drucker sein.

Eine korrekte Ausgabe Formatierung, Kopf und Fußzeile sowie Ränder bedingte Seitenumbrüche (Schuster-Jungen Huren Kinder usw. müssen beachtet werden.

Alle diese Anforderungen können berücksichtigt werden, diese CSS-Regeln werden leider nicht von den Browser verarbeitet.

Mit Weasyprint, ein in Python geschriebenen Programm können jedoch, ausgehend von ein HTML Seite, PDF-Dokumente erstellt werden.

Impress PowerPoint und co.

Ob es es eine gute Idee ist?

Folien mit PowerPoint und co. werden nur skaliert, dies kann dazuführen, dass Texte unlesbar werden.

Aufbau einer HTML Datei

HTML
  Kopfbereich
    Metadaten
    Style (CSS)
    Javascript
  Körper
    Html Code

Diese stark vereinfachte Darstellung zeigt, dass die gesamte Seite aus Blöcke besteht, es ist leicht, ausgehend von Bruchstücke eine vollständige Seite aufzubauen, es ist das Verfahren, der von mslide verwendet wird.

Ein einfache Script schreibt die einzelnen Bruchstücke nacheinander in der Zieldatei.

Der Vorgang wird durch ein Makefile unterstützt, der erschienene Parameter zu deklarieren und die Dateien erzeugt, wen die Quelle, eine Markdowndatei sich verändert hat.

Eigene Anpassungen.

zusätzliche CSS Dateien können eingebunden werden
Auch zusätzliche Javascript code kann eingebaut werden.

Eigene Anpassungen, CSS

Eintragung in der Markdown Datei:

:::{.col2 .h45}
![Bild 1](DSC00476.JPG){.foto}

![Bild 2](DSC00487.JPG){.foto}
:::

Hier werden 2 Bilder nebeneinander platziert. und als Papierbilder mit weißen Ränder dargestellt. Die leere Zeile zwischen beide Bilder Deklarationen ist wichtig!

CSS Code

.imgCol2 p {
    display:block;
    column-count:2;
    column-gap: 1em;
    margin-top:0;
}
.imgCol2 {
    background-color:transparent;
}
.foto {
    border: .5em solid #ffffff;
}

.imgCol2 und .foto sind sogenannten CSS Klassen.

Im Markdown Text bedeutet ::: dass ein Element vom Typ DIV eingefügt wird, das zweites Auftreten schießt dieser Block. {.foto} sorgt dafür, dass er Mitglied der Klasse .foto wird.

Das nachfolgend eingefügten Element ist ein Paragraf- Diese wurden als nicht sichtbar deklariert es muss aufgehoben werden. Das Paragraph, hier im Beispiel wird mit 2 Spalten versehen, ein Abstand zwischen den Bildern wurde auch vorgesehen.

.imgCol2 ist normalerweise (bei normale Folien mit eine Farbe versehen, die nicht, diejenige des normaler Hintergrund entspricht, die Farbe wird auf transparent gestellt.

Schließlich werden mit .foto die Rahmen der Bilder deklariert.

Schlecht, dabei, ist jedoch, dass solch ein Konstrukt nicht sauber von Pandoc umgesetzt wird (Bilduntertitel fehlt).

Einbinden der dedizierten CSS Dateien

Im Makefile kann die Datei als Argument gegeben werden, dies dürfte nicht so schwierig sein.

# Globale Definitionen
D=../TEMPLATES/mslide
TITEL='HTML-Vortrag'
F=HTML-slides
LANG=de
AUTOR='Max Mustermann'

all: $F.pdf  $F.html  slide.html

$F.pdf: $F.html
    weasyprint $F.html $F.pdf

$F.html:  $F.md
    $D/build-html.sh -c $D/docmain.css,doc2pictures.css \
    -i $F.md -o $F.html -I -t ${TITEL} -l ${LANG} -a ${AUTOR}


slide.html: $F.md
    $D/build-slide.sh -c $D/main.css,$D/color.css,$D/nop.css,$D/anim.css,2pictures.css \
     -j $D/mslide.js -i $F.md -o slide.html -I -t ${TITEL} -n -l ${LANG} -a ${AUTOR}

clean:
    rm $F.html slide.html $F.pdf

Zeilen 15 bzw. 20 wurden mit unseren “private” CSS Dateien versehen:
doc2pictures.css (Dokumente) bzw. 2pictures.css (Vortrag).

Präsentation am Fernseher vom Smartphone aus

Auf der Smartphone muss ein webserver installiert und gestartet werden:
- https://play.google.com/store/apps/details?id=com.phlox.simpleserver
Relevante Dateien in ein passenden Ordner auf das Smartphone kopiert.
Verbindung zum Fernseher, beispielsweise mit “Smart View” (Samsung)

Der Webserver ist wichtig, Bildmaterial wird im Browser des Smartphone sonst nicht geladen. Der Webserver kann beim Bedarf gestartet werden.

Da die Quelle unseren Smartphone ist, muss es möglich sein das Bildschirm des Gerätes am Fernseher darzustellen, muss das Wiedergabegerät über einer WIFI Verbindung verfügen und “Screen Mirroring” unterstützen. Im entsprechenden Stores sollten geeignete Applikationen zu finden sein.

Präsentation auf fremden PC

Präsentation auf USB-Stick
Präsentation auf den Smartphone
- Als Stick einbinden
- Über Webserver Folien zur Verfügung stellen
Präsentation auf ein eigenen öffentlichen Webserver

Voraussetzung sind immer ausreichende Rechte, Einbinden von externe Medien, Zugriff auf externe Webpräsenzen, WIFI-Verbindung wählen.

In manche Umgebungen sind Rechner stark geschützt, ein USB-Stick könnte Schadsoftware beinhalten, daher ist das Anschließen einen externe Medium unzulässig.

Manchmal wird auch, aus Sicherheitsgründen der Zugriff auf externe Webdienste verwehrt, Zugriffe auf interne Dienste ist allerdings vorhanden. Im letzteren Fall könnte das Smartphone als Webserver dienen, es setzt aber vorraus, dass ein Zugriff auf das interne WLAN möglich ist, dies könnte auch eine Sicherheitslücke Bedeuten.

Ein Smartphone kann als Hot-Spot eingerichtet werden, der fremden Rechner kann, wenn es von den Administratoren nicht mit Absicht unterbunden, sich mit unsere Smartphone verbinden.

Irgend eine der Voraussetzung dürfte meistens vorhanden sein, wenn nicht Pech gehabt, eigener Notebook beim nächsten Mal schleppen!

Linux. ich verwende doch Windows!

Selbstschuld!

wls installieren
- debian vom Windows Store installieren.
  - sudo apt update
  - sudo apt upgrade
  - sudo apt install make
  - sudo apt install pandoc
  - sudo apt install weasyprint
Wie gewohnt arbeiten

Windows: Texte Bearbeiten

Ein echter Text Editor sollte instralliert sein
- Notepad++
- Geany

Notepad++ ist unter Windows weit verbreitet. Alternativ kann auch Geany auf der Windows Rechner installiert werden. Beide Editoren kennen sich mit Mardowndateien aus, es kann die Arbeit erleichern.

Von Geany aus können die Dateien erzeugt werden, dies kann von Vorteil sein, editieren und erzeugen werden einfacher.

Windows Erzeugung der Dateien

wsl make

Wsl muss auf Version 1 eingestellt werden, damit kann auf die Verzeichnisse und Dateien des Windows Systems zurückgegriffen werden.

die Datei beispielsweise make.bat in der reicht aus um die Erzeugung der Dateien zu starten.

Wsl startet eine bash Fenster und ruft anschließend make auf.