procedo-personalservice.de 
Formate-test
FORMATE-TEST UND ELEMENTE ÜBERSICHT
Diese Seite ist dazu gedacht einen Überblick aller Inhaltselemente sowie deren korrekter Verwendung in der Designsystematik zu geben. Die Seite ist gegliedert in Inhaltselemente für bestimmte Zwecke und enthält im Verlauf bei jedem Element entweder Blindtext oder weitere Erklärungen zur Verwendung und zum Zweck bzw. zum Einsatzfall des Elements. Sie können die Elemente auf dieser Seite auch kopieren und auf der gewünschten Seite einfügen, um dann den Inhalt anzupassen. Achten Sie aber in diesem Fall bitte genau darauf, auch wirklich den gesamten Blindtext zu entfernen.
Die erste Überschrift einer Seite (Titel/Thema der Seite) ist immer eine h1-Überschrift im Seitenbereich „Anreisser“. Es gibt immer nur eine (1) h1-Überschrift. Sie ist immer VERSAL. Sie hat eine Zeichenzahl von höchstens 70 Zeichen. Sie wiederholt im Normalfall den Seitentitel. Achten Sie bitte generell auf eine korrekte Überschriftenhierarchie (auf eine h1 folgt bspw. nie eine h3)!
Überschriften enden nie auf einen Doppelpunkt, Punkt, Komma oder Semikolon!
Auf die erste Überschrift einer Seite (h1) folgt im Normalfall immer ein Anreißertext im Seitenbereich „Anreisser“. Zwei bis drei Sätze (also deutlich kürzer als dieser Anreißertext). Bitte keine Listen und Fettungen im Anreißertext.
Editor Cheatsheet
Besondere Auszeichnungen
Eine Abk. sollte immer ausgezeichnet werden, wenn man diese nicht ausschreiben kann (Editor-Schaltfläche „Abkürzung“). Generell ist es besser „Faulheitsabkürzungen“ wie z. B., u. a., u. v. m., bspw. zu vermeiden und sie grundsätzlich auszuschreiben.
Außerdem kann man in diesem Editor die korrekte Schreibweise für m2 und O2 erzeugen in dem man „superscript“ und „subscript“ verwendet. Schreiben sie also nicht m3 wenn sie m3 meinen.
Es ist selbstverständlich möglich, Textteile mit Betonung (<strong>) oder mit starker Betonung (<em>) auszuzeichnen; das kann jeder bessere Editor. Gehen Sie mit diesen Auszeichnungen bitte sehr sparsam um. In Bezug auf Barrierefreiheit und Screen Reader sind diese Auszeichnungen nicht nur eine optische Spielerei. Diese Auszeichnungen werden semantisch als Betonung beziehungsweise als starke Betonung verstanden und entsprechend von Screen Readern vorgelesen. Die Fettungen sollten Sie nur für einzelne Textteile verwenden, die es dem User ermöglichen sollen, einen Text schnell quer zu lesen, um zu erfassen worum es geht, bevor er sich entscheidet, einen Text ganz zu lesen.
Sprachauszeichnungen
Wenn Sie eine andere Sprache als Deutsch verwenden, dann muss die verwendete Sprache korrekt ausgezeichnet werden. Leider ist das derzeit in diesem Editor nicht möglich, daher bitte auf Textabsätze in anderen Sprachen verzichten. Diese Auszeichnung ist notwendig für die Barrierefreiheit. Bis der Editor ein entsprechendes Update erhält oder aber die TYPO3 Version auf die Version 12 angehoben wird, kann die Sprachauszeichnung nicht vorgenommen werden.
If you use another language than german you need to specifiy what language that is. You can not do that in this version of CK-Editor. So please stick to german!
Auszeichnungen für Bilder
einfache Bilder
Ein ganz normales Bild, das einfach so in der Landschaft steht. Das Bild wird nicht vom Text umflossen. Das ist der Stil „normal“.
Man kann Bilder auch links und rechts neben den Text stellen. Im Backend kann man die Wirkung nicht so gut sehen, weil der Text im Editor breiter läuft, als auf der eigentlichen Seite im Frontend. Das Bild neben diesem Text sollte links daneben stehen. Um das zu bewerkstelligen, muss beim Einpflegen des Bilds „Bildstile links ausrichten“ ausgewählt werden. Um zu sehen, wie es wirkt, bitte das Element speichern und im Frontend betrachten. Oder den Editor ungefähr so schmal schieben, wie der Text auf der Webseite läuft.
Hier steht ein Text und das Bild sollte rechts daneben stehen. Beim Einpflegen des Bildes wählen Sie „Bildstile rechts ausrichten“ aus. Wenn Sie diese Optionen verwenden, achten Sie immer darauf, dass neben dem Bild auch genug Text steht, um den Umfluss zu bewerkstelligen. Es hat wenig Sinn, ein Bild zur Seite zu schieben und dann nur drei Wörter daneben zu schreiben. Wenn der Text zu kurz ist, dann verschiebt es alle nachfolgenden Absätze auch. Es muss also sicher gestellt sein, dass Sie genug Text haben. Sollten Sie weniger Text haben – verwenden Sie ein Text & Bild-Element, um den Textfluss nicht zu stören oder verkleinern Sie das Bild.
Dieses Bild hat einen Rahmen und ist links ausgerichtet. Um dies zu erreichen, wählen Sie „Bildstile links ausrichten“ und die Option „Rahmen“ aus. Mit den Bildern bitte vorsichtig sein. Die Optik immer in der Vorschau prüfen. Das Editorfenster ist breiter als die Webseite im Frontend. Daher laufen die Textabsätze im Editor anders. Der Abstand zwischen dem Bild und dem Rahmen ist nicht veränderbar und auf 20px festgelegt. Damit soll verhindert werden, dass bei Bildern ohne eigenen Abstand der Rahmen am Inhalt klebt (z. B. Abstand für Logos, die nicht durch den Rahmen gestört werden dürfen).
Rahmen sind grundsätzlich nur für Logos vorgesehen. Legen sie keine Rahmen um Fotos!
Bilder mit Bildunterschrift
Bilder mit Bildunterschrift können erzeugt werden, wenn in den Metadaten eine Beschreibung eingepflegt ist. Hier kommt es wie immer auf die korrekte Pflege der Metadaten an. Achten Sie darauf, dass die Bildunterschrift nicht zu lang wird, verwenden Sie im Notfall „weiche Umbrüche“, um alles im Rahmen zu halten. Diese Funktion ist nur für sehr kurze Bildunterschriften. Wenn Sie eine lange Liste von Personen auf einem Bild benennen müssen, verwenden Sie am besten ein Text & Bild-Element.
Logo mit Bildunterschrift: hier ist rechts ein Text und das Bild sollte links daneben stehen. Hier steht ein Text und das Bild sollte links daneben stehen. Hier steht ein Text und das Bild sollte links daneben stehen. Hier steht ein Text und das Bild sollte links daneben stehen. Hier steht ein Text und das Bild sollte links daneben stehen. Hier steht ein Text und das Bild sollte links daneben stehen. Hier steht ein Text und das Bild sollte links daneben stehen. Hier steht ein Text.
Sonderzeichen
Mit der Sonderzeichentabelle, die Sie mit dem Omega-Zeichen aufrufen können, können Sie z. B. Coca Cola® oder auch 2000 ‱ korrekt darstellen. Außerdem findet sich hier der echte Gedankenstrich bitte keine - (Bindestrich) als – (Gedankenstrich) verwenden! Idealerweise benutzen Sie für die Formel 10 − 1 = 9 ein Minuszeichen aus der Sonderzeichentabelle und keinen Bindestrich. Auch diese Zeichen finden Sie hinter dem Omega-Zeichen.
Apropos: → " ← das ist ein Zollzeichen (Umschalttaste + Taste „2“) und kein „Anführungszeichen“. Im Deutschen sind die sogenannten „99 66“ Anführungszeichen korrekt.
Zitate im Text
Dies hier ist ein Zitat, aber das kann kein <cite> haben.
by Morgana Czempiel
Horizontale Linie
Braucht man fast nie. Sollten Sie eine horizontale Linie verwenden wollen, überlegen Sie bitte genau warum. Wenn Sie etwas abtrennen wollen, was nicht dazu gehört, legen Sie besser ein neues Inhaltselement an.
Unsichtbare Zeichen
Es gibt als unsichtbare Zeichen einen „weichen Trennstrich“. Dieser kann eingesetzt werden, um bei sehr langen Wörtern sicherzustellen, dass diese an der korrekten Stelle umgebrochen werden können. Zum Beispiel: „Qualifizierungschancengleichheitsgesetz”. Die Softhyphen werden im Editor leider nicht angezeigt. Damit man sehen kann, wo diese sitzen, müssen Sie bitte den Quellcode betrachten (Schaltfläche „Quellcode“). Das HTML-Zeichen sieht so aus: „­“. Im Frontend werden diese weichen Trennstriche nur sichtbar bzw. eingesetzt, wenn der Browser das Wort am Ende einer Zeile trennen muss.
Ein weiteres unsichtbares Zeichen ist der „Non-breaking-Space” der dafür sorgt, dass sich beispielsweise die 10 nicht von den kg trennen, wenn das Ende der Zeile erreicht ist: 10 kg. Auch dieses Zeichen ist nur im Quelltext sichtbar und sieht so aus: „ “.
Besondere Textstile
Block-Stil „Funktion“ – um die Funktion einer Person zu kennzeichnen
Block-Stil „Hinweis“ – um einen Hinweis auszuzeichnen; beispielsweise Copyright Hinweise bei Bildern
Block-Stil „Bildunterschrift“ – selbst erklärend :D
Block-Stil „Urheber“ – um den Urheber eines Zitats kenntlich zu machen; verwenden Sie diesen Stil nicht um Fettungen zu erzeugen. Dies ist nur eine optische Auszeichnung und keine semantische.
Umfließen Aufheben – ist nur dafür gedacht, um nach einem „umflossenen Bild” den Text wieder normal laufen zu lassen
Link Stile
Und dann noch ein besonderer Link Stil (Dropdown „Stil“, Option „a.btn_more“) der nicht automatisch gesetzt werden kann.