Inserate-Layout erfassen

Aus Onlinehelp
(Weitergeleitet von Inserate-Layoute erfassen)
Zur Navigation springen Zur Suche springen

Stelleninserate können mittels HTML-Layouts gestaltet werden, wobei die anzuzeigenden Stelleninformationen mittels Variablen extrahiert werden. Ein Inserate-Layout wird in einer HTML-Datei definiert und anschliessend in der Lösung hochgeladen. Allfällige Dateien (z.B. Bilder, Dokumente etc.), welche im HTML-Layout verwendet werden, müssen ebenfalls beim entsprechenden Layout hochgeladen werden. Anschliessend muss das Layout noch einer Niederlassung zugewiesen werden.

Beachten Sie bitte, dass bei Verwendung eines neu erfassten Inserate-Layouts, eine Verzögerung von bis zu 10 Minuten auftreten kann, bis das neue Inserate-Layout korrekt angezeigt wird.

Wichtiger Hinweis

Beachten Sie, dass es im Zusammenhang mit unserer Content Security Policy unter Umständen zu Problemen mit bestimmten JavaScript-Elementen im Layout der Publikation (z.B.: onclick, onmouseover, onmouseout, etc.) kommen kann.

Um derartige Probleme zu vermeiden, sollten Sie dafür Sorge tragen, solche Funktionen CSP-konform einzurichten. Ein entsprechendes Beispiel-Skript sehen Sie hier: 

<!DOCTYPE html>
<html>
   <head>
       <title>Print this job</title>
   </head>
   <body>
       <!-- First define the HTML element, e.g. the Apply-Button -->
       <button class="button" type="button" id="print-button">Print</button>
       <!-- After that specify what JavaScript needs to happen on that button (best practice: place the script tag at the end of the document, right before the closing body-tag) -->
       <script type="text/javascript">
           $(document).ready(function() {
               document.getElementById('print-button').addEventListener('click', function() {window.print();});
           });
       </script>
   </body>
</html>

Beispiel-Inserat

Ein Beispiel für eine mögliche Gestaltung eines Inserates im HTML-Format finden Sie hier. In der Vorlage befinden sich auch exemplarisch Variablen, welche Sie in der HTML-Datei verwenden können. Weiter unten finden Sie ein Beispiel-Stelleninserat, das konform zu Barrierefreiheit-Richtlinien erstellt wurde.

Integrieren von Attachments

Attachments werden ebenfalls mit Hilfe von Variablen in das Inserate-Layout integriert. Innerhalb des HTML-Templates kann dabei folgende Notation (Variablen) als Platzhalter für ein Anhang verwendet werden:

  • [document.attachement1] für Attachement 1
  • [document.attachement2] für Attachement 2

...

  • [document.attachement5] für Attachement 5

Wie bereits erwähnt müssen die entsprechenden Dateien in der Lösung hochgeladen werden.


Beispiel:
Folgendes Beispiel zeigt auf, wie eine Bilddatei mittels Variable im Layout eingebunden werden kann. Dem HTML-Tag "img' wird dabei die URL für das Attachment 1 übergeben. 

 
<img src='[document.attachement1]'>

Gleiches gilt beispielsweise für Links, die man hinterlegen möchte.

Aufzählungen in HTML-Listen

Der nachfolgende HTML-Code kann behilflich sein, wenn Sie eine geordnete HTML-Liste mittels Aufzählungszeichen (●) erstellen möchten. Als Basis müssen "-"-Symbole als Aufzählungszeichen bereits bestehen, da der Code diese durch Punkte (●) ersetzt.

Damit unterer Code funktioniert, sollte im Header des HTML's die Klasse "tick-points" definiert werden. [Inserat.Text1] ist dabei ein Teil des Ausschreibungstextes. 

[TempTextLines = Inserat.Text1 | replace('<br />', '<replaceASAP><br />')]
[TextLines = TempTextLines.split('<br />')]
[FOREACH TextLine IN TextLines]
	[IF TextLine.match('^-')]
		<ul class="trick_points"><li class="trick_points">
			[TextLine | remove('^-') | replace('<replaceASAP>', '')]
		</li></ul>
	[ELSE]
		[TextLine | replace('<replaceASAP>', '<br />')]
	[END]
[END]


Beispiel:

Der Inserate-Text der Liste:
- Punkt 1
- Punkt 2
wird durch Benutzung des HTML-Codes anschliessend als
● Punkt 1
● Punkt 2
dargestellt.

Integrieren von Google Maps

Mit Hilfe von Google Maps ist es möglich, auf einfache Art und Weise eine Karte in ein Stelleninserat zu integrieren. Mit Hilfe der Karte kann sich die Bewerbenden schnell einen Überblick über den potenziellen Arbeitsort und Arbeitsweg verschaffen. Neben dem Weg auf der Karten werden auch Distanz und geschätzte Dauer für verschiedenen Verkehrsmittel wie Auto oder ÖV angezeigt.
Bei Bedarf kann dieses Feature so konfiguriert werden, dass die gesamte Routenplanung angezeigt wird.

Technische Informationen zur Integration von Google Maps


Tipps & Tricks

  • Wenn Suchmaschinen (Google, Bing, etc.) Ihre Stellen indexieren sollen, damit diese gefunden werden, erfassen Sie im Head-Bereich des Stelleninserates entsprechende "meta"-Angaben. Im oben genannten Beispiel sind diese eingetragen und können auf Ihre Bedürfnisse angepasst werden.

Tipps & Beispiele für barrierefreie Stelleninserate

Die nachfolgenden Hinweise und Tipps helfen Ihnen, barrierefreie Stelleninserate (Bewerbermanagement), bzw. Ausschreibungs- und Druck-Designs (Mitarbeitermanagement) zu erfassen.

Verwenden Sie dabei die in der ZIP-Datei hinterlegte neue Beispielvorlage für ein barrierefreies Inserate-Layout: Layout (Beispiel), auf die in den folgenden Ausführungen referenziert wird (Im Stelleninserat). Vergleichen Sie diese ggf. mit der (ebenfalls in der ZIP-Datei enthaltenen) "nicht barrierefreien" alten Version.

Alternativtexte für Bedienelemente

Grafische Bedienelemente sollten mit Alternativtexten versehen werden. Verlinkte Grafiken, Menüs und Logos benötigen das Ziel des Links als Alternativtext. Grafische Schaltflächen (Buttons) benötigen die Aktion des Buttons als Alternativtext. Alternativtexte für Bedienelemente sind vor allem für Benutzer ohne Sehvermögen oder für Benutzer, die das Laden von Grafiken abschalten (für schnelleren Zugriff), von Bedeutung. In diesen Fällen wird der Alternativtext an die Stelle der Grafik gesetzt.

  • Im Beispiel-Stelleninserat (Beispielvorlage) sollten vor allem die Bedienelemente im "Carousel" und die Social Media-Symbole mit Alternativtexten versehen werden:
Carousel: Texte "prev" & "next" hatten keine Alternativtexte: "alt" -> Attribut wurde mit einer sinnvollen Beschreibung hinzugefügt
Social Media-Symbole: Es fehlen textliche Alternativen
Alternativtexte für Grafiken & Objekte

Informative Grafiken und Bilder sollten mit Alternativtexten versehen werden. Die Alternativtexte ersetzen das Bild und sollen dessen "Aufgabe" erfüllen.

  • Im Stelleninserat:
Die Bilder unterhalb von _IhrTeam_ besitzen keinen Alternativtext ("alt" - Attribut)
Kontraste von Texten ausreichend

Alle Texte der Seite sollten ausreichende Helligkeitskontraste haben. Sie sollen auch für Benutzer mit Farbsinnstörungen wahrnehmbar sein. Bei Seiten, die eine ausreichend kontrastreiche Version über einen Styleswitcher anbieten, wird auch geprüft, ob der Ausgangszustand die Mindestanforderungen an Schriftkontraste erfüllt.

  • Im Stelleninserat:
Bei Schriftfarben das Kontrastverhältnis zwischen Hintergrundfarbe und Schriftfarbe beachten, damit es auch für Personen mit Sehschwäche oder auf Schwarzweiss-Bildschirmen lesbar ist.
Das Tool zum Messen des Kontrastverhältnisses kann hier heruntergeladen werden: https://github.com/ThePacielloGroup/CCA-Win/releases/
Ohne Maus nutzbar

Die Webseite sollte ohne Maus und ausschliesslich mit der Tastatur, bzw. ohne Tastatur und ausschliesslich mit der Maus nutzbar sein. Andere Spezialgeräte verhalten sich ähnlich einer Maus oder einer Tastatur. Menschen ohne Sehvermögen oder mit motorischen Einschränkungen sind auf diese Möglichkeiten der Bedienbarkeit angewiesen.

  • Im Stelleninserat:
"Video" und "Carousel" sollten ohne Maus nutzbar sein. Hierfür müssen beim Youtube-Video der "Control" aktiviert und die "Tabindexes" gesetzt werden. Beim "Carousel" müssen die "Tabindexes" richtig gesetzt werden.
Aussagekräftige Linktexte

Ziel oder Zweck des Links sollen aus dem Linktext hervorgehen. Nutzer ohne Sehvermögen, die von Link zu Link tabben, bekommen die Linktexte vorgelesen und können bei aussagekräftigen Linktexten leicht entscheiden, ob sie einem Link folgen möchten. Falls der Linktext selbst nicht aussagekräftig ist, soll der unmittelbare Kontext für Screenreader-Nutzer wenigstens leicht ermittelbar sein.

  • Im Stelleninserat:
"prev"- und "next"-Links im "Carousel" müssen sprachabhängig sein. Auf einem deutschen Stelleninserat müssen prev- und next richtig übersetzt werden.
Aktuelle Position des Fokus deutlich

Der Tastaturfokus muss mindestens genauso deutlich hervorgehoben werden wie der Mausfokus.

  • Im Stelleninserat:
Beispiel für Links:
a:hover, a:focus {
color: #a62662;
}

Verwandte Themen

Abgerufen von „https://de.onlinehelp.umantis.com/index.php?title=Inserate-Layout_erfassen&oldid=21960“