HTML Folien, mslide

HTML und Ausgabe Medien

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

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 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.

Von Geany aus erzeugen

Im Übrigens, ist es unter Linux nicht anders wirklich, die Kommandos sind bis auf das Zauberwort wsl identisch.