Decker Anleitung

Folienerstellung - Medieninhalte

Sebastian Lukas Hauer

Lehrstuhl für Computergraphik, TU Dortmund

🚀 by Decker

Grundkonzept Medieninhalte

In Decker können Sie unterschiedliche Medien in Ihre Präsentation einbetten. Decker nutzt zum Einbetten von Medienelementen dieselbe Syntax, mit der Sie grundsätzlich in Markdown Bilder einfügen können:

![Beschriftung](Link "Kurzinformationen"){Einstellungen}

Die Beschriftung ist eine Bild- oder Figurbeschriftung, die unter dem Medienelement angezeigt wird.

Der Link ist ein Pfad oder eine URL zum eingebetteten Medienelement.

Die Kurzinformationen werden vom Browser angezeigt, wenn der Nutzer mit der Maus über dem Element schwebt.

Die Einstellungen werden für die einzelnen Medienelemente genauer beschrieben.

Einstellungen für alle Medienelemente

Die Breite und Höhe eines jeden Medienelements kann mithilfe der Attribute width="" und height="" angepasst werden. Wird nur einer der beiden Werte angegeben wird versucht das Aspektverhältnis des Elements basierend auf seiner Originalgröße beizubehalten.

![Beschriftung](Link){width="128px" height="128px"}
Beispiel für das Anpassen von Höhe und Breite.
../data/bluebird.jpg
Blauer Vogel

Sie können als Wert für Höhe und Breite alle gültigen CSS-Einheiten verwenden.

Einstellungen zur Barrierefreiheit

Sie können Bildunterschrift caption, Kurzinformationstext title, der erscheint wenn der Nutzer mit der Maus über dem Element schwebt und aria-label, der von einem Screenreader vorgelesene Text, individuell anpassen.

caption title= aria-label=
[alt](url) alt alt alt
[alt](url "title") alt title alt
[alt](url "title"){aria-label="aria"} alt title aria
[alt](url){aria-label="aria"} alt alt aria
[](url "title") title title
[](url "title"){aria-label="aria"} title aria
[](url){aria-label="aria"} aria

Bilder

![Bildunterschrift](Link "Alternativtext"){Einstellungen}
../data/bluebird.jpg
Quelle: https://en.wikipedia.org/wiki/Bluebird CC BY-SA 2.5 Elaine R. Wilson

Externe Webseiten

Sie können externe Webseiten als einen sogenannten iframe in Ihre Folien einbetten. Dazu müssen Sie den Link zur Webseite, die sie einbetten wollen als Link des Medienelements angeben und ihm die Eigenschaft .iframe zuweisen:

![Wikipedia](https://wikipedia.org){ width="512px" height="256px" .iframe }
Wikipedia

Videos

Wenn Sie als Dateipfad des Medienelements ein Video wie z.B. eine mp4-Datei angeben wird diese Datei als Videoelement in den Folien eingebettet. Sie können mit den Einstellungen .controls, .autoplay und .muted bestimmen, ob das Video übliche Bedienelemente besitzen soll, ob es automatisch abgespielt werden soll wenn die Folie besucht wird und ob es zu Beginn stummgeschaltet werden soll oder nicht.

![Videobeschreibung](link.mp4){ .controls .autoplay .muted  }
Donkey Kong

PDFs

Wenn Sie als Dateipfad des Medienelements eine .pdf-Datei angeben wird die PDF in die Folien zum Durchsuchen eingebettet.

![Dokumentenbeschreibung](link.pdf){}
Dokumentenbeschreibung

Animierte Vektorgrafiken

Vektorgrafiken können wie Bilder eingebettet werden. Wenn Sie dem Medienelement die Klasse .embed geben so wird der Quelltext des SVGs direkt in die Webseite eingebettet. Dies kann bei großen Bildern andere Ladezeiten bedeuten, da das Bild nicht nachträglich geladen werden muss. Zudem kann das Bild nicht per Drag-And-Drop selektiert werden.

SVGs deren Quelldaten die Klasse fragment beinhalten werden, wenn sie eingebettet werden, auch Schrittweise in den Folien aufgebaut.

![Bildbeschreibung](link.svg){ .embed }
../data/deCasteljau.svg
De-Casteljau-Algorithmus
image/svg+xml
De-Casteljau-Algorithmus (eingebettet)

3D-Modelle

Wenn Sie ein 3D-Modell im .off Format als Dateiquelle des Medienelements angeben so wird das Modell in einer 3D-Szene in die Folien eingebettet. Der Nutzer kann mit Drag-And-Drop-Gesten das Modell bewegen.

![Objektbeschreibung](link.off){}
Der Arsch mit Ohren

Geogebra

Wenn Ihr Medienelement auf eine Datei mit Endung .ggb verweist so wird die damit verbundene Geogebra-Demonstration in die Folien eingebettet.

![Beschriftung](link.ggb){}
Gradienten