Vorlage:AnleitungScreenshotGroß: Unterschied zwischen den Versionen

Aktuelle Version vom 26. April 2024, 10:03 Uhr

Vorlage für die Integration von Bildern in eine Anleitung. Die Vorlage nutzt die gleiche Vorlage für Absätze in Anleitungen. Es werden drei Parameter benötigt:

{{AnleitungScreenshotGroß|Dateiname|Alternativtext|Beschreibung}}

Dateiname: Nur der Dateiname mit Endung. Es wird kein vorangestelltes File: oder Datei: benötigt(, kann aber auch mit interpretiert werden). Kann bspw. aus dem Seitentitel in der Vorschau kopiert werden.
Alternativtext: Wird für Screenreader benötigt und soll eine Beschreibung des Bildinhalts sein. Formatierungen sind nicht notwendig. Wenn kein Alternativtext angegeben wurde, erscheint unterhalb des Bildes ein roter Warnhinweis.
Beschreibung: Anleitungstext. Kann Formatiert werden und wird als Absatz oberhalb des Screenshots gezeigt.

Beispiel:

Nachdem der pdf-Export gestartet wurde kann auf Ebene der angezeigten Vorgänge, Teilvorgänge und Dokumente eine Vorauswahl getroffen werden. Dokumente innerhalb von Vorgängen und Teilvorgängen der angezeigten Vorauswahl können hier noch nicht ausgewählt werden. Diese Auswahl kann im nächsten Schritt noch verfeinert werden.

Im DMS zeigt eine Suche acht Vorgänge. Zwei sind ausgewählt. Die anderen nicht. Eine rote Umrandung hebt die Auswahlschaltflächen hervor.

Vorlage für die Integration von Bildern in eine Anleitung. Die Bilder dieser Vorlage werden vergrößert, wenn sie mit der Maus berührt oder mit der Tastatur in den Fokus genommen werden.

Vorlagenparameter
Diese Vorlage bevorzugt Blockformatierung von Parametern.
Parameter		Beschreibung	Typ	Status
Dateiname	`1`	Dateiname des Screenshots	Datei	erforderlich
Alternativtext	`2`	Der Alternativtext kann mit Screenreadern vorgelesen werden und soll möglichst genau beschreiben, was auf dem Bild zu sehen ist.	Zeichenfolge	erforderlich
Absatz	`3`	Ein zusätzlicher Absatz, der über dem Screenshot angezeigt wird.	Unausgeglichener Wikitext	veraltet

@@ Zeile 7: / Zeile 7: @@
 * '''Dateiname''': Nur der Dateiname mit Endung. Es wird kein vorangestelltes '''File:''' oder '''Datei:''' benötigt(, kann aber auch mit interpretiert werden).  Kann bspw. aus dem Seitentitel in der Vorschau kopiert werden.
 * '''Alternativtext''': Wird für Screenreader benötigt und soll eine Beschreibung des Bildinhalts sein. Formatierungen sind nicht notwendig. Wenn '''kein Alternativtext''' angegeben wurde, erscheint unterhalb des Bildes ein roter Warnhinweis.
-* '''Beschreibung''': Anleitungstext. Kann Formatiert werden und wird als Absatz unterhalb des Screenshots gezeigt.
+* '''Beschreibung''': Anleitungstext. Kann Formatiert werden und wird als Absatz oberhalb des Screenshots gezeigt.
 '''Beispiel:'''
 {{AnleitungAbsatz|Nachdem der '''pdf-Export''' gestartet wurde kann auf Ebene der angezeigten Vorgänge, Teilvorgänge und Dokumente eine Vorauswahl getroffen werden. Dokumente innerhalb von Vorgängen und Teilvorgängen der angezeigten Vorauswahl können hier noch nicht ausgewählt werden. Diese Auswahl kann im nächsten Schritt noch verfeinert werden.}}
-<div class="screenshot screenshotrahmen" style="max-width: 1020px;">
+<div class="screenshot screenshotrahmen screenshotgroß">
-[[File:d.3one Startseite in Outlook.png|center|frameless|1000x1000px|alt=Im DMS zeigt eine Suche acht Vorgänge. Zwei sind ausgewählt. Die anderen nicht. Eine rote Umrandung hebt die Auswahlschaltflächen hervor.]]
+[[File:d.3one Startseite in Outlook.png|center|alt=Im DMS zeigt eine Suche acht Vorgänge. Zwei sind ausgewählt. Die anderen nicht. Eine rote Umrandung hebt die Auswahlschaltflächen hervor.]]
 </div>
-</noinclude><includeonly>{{#if: {{{3|  }}}|{{AnleitungAbsatz|{{{3|  }}}}}|}}<div class="screenshot screenshotrahmen" style="max-width: 1020px;">
+</noinclude><includeonly>{{#if: {{{3|  }}}|{{AnleitungAbsatz|{{{3|  }}}}}|}}<div class="screenshot screenshotrahmen screenshotgroß">
 [[{{#switch: {{#explode:{{{1|View DBSGAktenplan.png}}}|:|0}}
   | File
@@ Zeile 20: / Zeile 20: @@
   | datei
   | Datei =
-  | #default = File:}}{{{1|d.3one Startseite in Outlook.png}}}|center|frameless|1000x1000px|alt={{{2|  }}}]]
+  | #default = File:}}{{{1|d.3one Startseite in Outlook.png}}}|center|alt={{{2|  }}}]]
-</div>{{#if: {{{2|  }}}| |<div class=barrierefrei style="text-align: center; padding: 0 5px; margin-left 5px; border: solid 1px red;">Bitte fügen Sie dem Bild einen Alternativtext hinzu. [[Vorlage:AnleitungScreenshot|Hier finden Sie die Beschreibung der Vorlage.]]</div>}}</includeonly>
+</div>{{#if: {{{2|  }}}| |<div class=barrierefrei style="text-align: center; padding: 0 5px; margin-left 5px; border: solid 1px red;">Bitte fügen Sie dem Bild einen Alternativtext hinzu. [[Vorlage:AnleitungScreenshot|Hier finden Sie die Beschreibung der Vorlage.]]</div>}}</includeonly><noinclude>
+<templatedata>
+{
+	"params": {
+		"1": {
+			"label": "Dateiname",
+			"description": "Dateiname des Screenshots",
+			"type": "wiki-file-name",
+			"required": true
+		},
+		"2": {
+			"label": "Alternativtext",
+			"description": "Der Alternativtext kann mit Screenreadern vorgelesen werden und soll möglichst genau beschreiben, was auf dem Bild zu sehen ist.",
+			"type": "string",
+			"required": true
+		},
+		"3": {
+			"label": "Absatz",
+			"description": "Ein zusätzlicher Absatz, der über dem Screenshot angezeigt wird.",
+			"type": "unbalanced-wikitext",
+			"deprecated": "Der Absatz kann problemlos im Wikitext platziert werden"
+		}
+	},
+	"format": "block",
+	"description": "Vorlage für die Integration von Bildern in eine Anleitung. Die Bilder dieser Vorlage werden vergrößert, wenn sie mit der Maus berührt oder mit der Tastatur in den Fokus genommen werden."
+}
+</templatedata>
+</noinclude>