Überschrift H1 = ??px

Diese Überschrift läuft bei langen Textinhalt über zwei Zeilen und das soll sie auch

Überschrift H2 = ??px

Diese Überschrift läuft bei langen Textinhalt über zwei Zeilen und das soll sie auch

<h1>Überschrift H1 = 34px</h1>


<h1><strong>Überschrift H1 - bold </strong></h1>


<h2>Überschrift H2 = 29px</h2>


<h2 class="headline_24 fat">Überschrift H2 - bold</h2>

Überschrift H3

Diese Überschrift läuft bei langen Textinhalt über zwei Zeilen und das soll sie auch

Überschrift H4

Diese Überschrift läuft bei langen Textinhalt über zwei Zeilen und das soll sie auch

Überschrift H5

Diese Überschrift läuft bei langen Textinhalt über zwei Zeilen und das soll sie auch

Überschrift H6

Diese Überschrift läuft bei langen Textinhalt über zwei Zeilen und das soll sie auch bei langen Textinhalt über zwei Zeilen und das soll sie auch

<h3>Überschrift H3 = 24px</h3>



<h4>Überschrift H4 = 21px</h4>



<h5>Überschrift H5 = 19 px</h5>



<h6>Überschrift H6 = 14 px</h6>

Ist wie
H2 Rot
Überschrift
3 Blau
Überschrift
4 Orange
Überschrift
5 Dunkelblau

<span class="is_h2 rot">Ist wie H2 Rot</span>
<span class="is_heading is_h3 blau">Überschrift 3 Blau</span>
<span class="is_heading is_h4 orange">Überschrift 4 Orange</span>
<span class="is_heading is_h5 dunkelblau">Überschrift 5 Dunkelblau</span>

Hervorhebung wie H1 / class=“is_h1 rot“
Hervorhebung wie H2 / class=“is_h2 rot“
Hervorhebung wie H3 / class=“is_h3 rot“
Hervorhebung wie H4 / class=“is_h4 rot“
Hervorhebung wie H5 / class=“is_h5 rot“

<span class="is_h2 rot">Hervorhebung wie H2 / class="is_h2 rot"</span>
<span class="is_h3 rot">Hervorhebung wie H3 / class="is_h3 rot"</span>
<span class="is_h4 rot">Hervorhebung wie H4 / class="is_h4 rot"</span>
<span class="is_h5 rot">Hervorhebung wie H5 / class="is_h5 rot"</span>

Hervorhebung wie H1 / class=“is_h1 blau“
Hervorhebung wie H2 / class=“is_h2 blau“
Hervorhebung wie H3 / class=“is_h3 blau“
Hervorhebung wie H4 / class=“is_h4 blau“
Hervorhebung wie H5 / class=“is_h5 blau“

<span class="is_h2 blau">Hervorhebung wie H2 / class="is_h2 blau"</span>
<span class="is_h3 blau">Hervorhebung wie H3 / class="is_h3 blau"</span>
<span class="is_h4 blau">Hervorhebung wie H4 / class="is_h4 blau"</span>
<span class="is_h5 blau">Hervorhebung wie H5 / class="is_h5 blau"</span>

Hervorhebung wie H1 / class=“is_h1 orange“
Hervorhebung wie H2 / class=“is_h2 orange“
Hervorhebung wie H3 / class=“is_h3 orange“
Hervorhebung wie H4 / class=“is_h4 orange“
Hervorhebung wie H5 / class=“is_h5 orange“

<span class="is_h2 orange">Hervorhebung wie H2 / class="is_h2 orange"</span>
<span class="is_h3 orange">Hervorhebung wie H3 / class="is_h3 orange"</span>
<span class="is_h4 orange">Hervorhebung wie H4 / class="is_h4 orange"</span>
<span class="is_h5 orange">Hervorhebung wie H5 / class="is_h5 orange"</span>

Formatierungsvorschläge Lamers

Formatierung Verlinkungen im Text

Aktuell werden Textstellen, über den Button ‚B‘ formatiert werden, rot dargestellt, wobei für mich nicht erkennbar ist, aber der Text auch ‚fetter‘ ist als der andere Text.

Dies ist ein Test-Dies ist ein Test-Dies ist ein Test-Dies ist ein Test-Dies ist ein Test-Dies ist ein Test-Dies ist ein Test-Dies ist ein Test-Dies ist ein Test-Dies ist ein Test-Dies ist ein Test-Dies ist ein Test-Dies ist ein Test-Dies ist ein Test-Dies ist ein Test-Dies ist ein Test-Dies ist ein Test-Dies ist ein Test

Alle Textstellen, die über den Button ‚B‘ formatiert werden sollen

in der Farbe des Textes sein und
erkennbar fett hervorgehoben sein

Müsste im Backend eingestellt werden

Formatierung Hervorhebung fett

Aktuell gibt es sowohl blau als auch rot formatierte Verlinkungen auf allen Seiten, die vereinheitlicht werden sollen.

im Orientierungsplan: Biografie in den Blick nehmen

Alle Verlinkungen auf der Plattform sollten

rot sein
unterstrichen sein
nach dem anklicken rot und unterstrichen bleiben

im Orientierungsplan: Biografie in den Blick nehmen

Müsste im Backend eingestellt werden

Formatierung Praxisbeispiele

Die Auszeichnung mit dem Button Zitat („) verwenden wir aktuell für die Praxisbeispiele. Dabei wird der Text automatisch kursiv gesetzt. Das sollten wir auch so belassen, weil ich sonst alles nochmals neu machen müsste. Also der Button “ sollte nicht für Zitate verwendet werden

Was geändert werden müsste, wäre der Zeilenabstand, wie hier im nachfolgenden Beispiel

Formatierung Praxisbeispiel: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Bereits über den Button “ definiert für Praxisbeispiele
aber Änderung des Zeilenabstandes

Verwendeter Code für den engeren Zeilenabstand :

Formatierung Praxisbeispiel: Tets-Test-Test-Test-Tets-Test-Test-Test

Formatierung Praxisbeispiel: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Formatierung Zitate im Text

Zitate im Text können über den Button ‚I‘ formatiert werden.

Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. „Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test.„ Dies ist ein Test. Dies ist ein Test. Dies ist ein Test.Dies ist ein Test.Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test.

Hier muss also nichts angepasst werden!

Bereits über den Button „I“ definiert

„Dies ist ein Test. Dies ist ein Test. Dies ist ein Test. Dies ist ein Test.“

Formatierung abgesetzte Zitate

Abgesetzte Zitate werden kursiv und mit engerem Zeilenabstand gesetzt, aber i. R. nicht fett! Ausnahme: Wenn im Zitat selber etwas fett gesetzt ist, muss diese Passage dann auch fett gesetzt werden. Dies kann dann über den Button „B“ geschehen

Beispiel Normalfall:

Formatierung abgesetztes Zitat: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Sonderfall mit fetter Hervorhebung im Original:

Formatierung abgesetztes Zitat: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

Hier benötigen wir eine Vorlage ‚Zitat‘

Verwendeter Code für abgesetzte Zitate :
Beispiel Normalfall:

Test, Test

Beispiel Normalfall:

Formatierung Bildunterschriften

Momentan haben wir zwei verschiedene Bildunterschriftenformate (und weitere, die irgendwie händisch eingefügt wurden). Sie unterscheiden sich in der Schriftfarbe und teilweise auch in der Schriftgröße.

Variante 1: Diese Bildunterschriften werden gesetzt, wenn in der Mediendatenbank ein entsprechender Eintrag bei ‚Bildunterschrift‘ gemacht wurde. Wenn ich mich recht erinnere, kann die Platzierung (rechts, links, mittig) dann noch über das Formatierungsmenü vorgenommen werden. Beisp.: © Menschen

Variante 2: Es wurden Textblöcke eingefügt (meist über die Vorlagen), über die eine Bildunterschrift unter eine Grafik gesetzt wurden. Wir brauchen diese zweite Variante, a) weil es zu aufwändig wäre, nachträglich alle Grafiken/Fotos mit Bildunterschriften in der Mediendatenbank zu versehen b) weil in vielen Fällen hier auch die Verlinkung zu den Bildrechten hinterlegt ist, was in der Mediendatenbank nur mit sehr großem Aufwand nachträglich zu realisieren wäre.

Diagramm mit drei beschrifteten Kästen: oben „denken“, in der Mitte nebeneinander „Hardware“ und „Software“ in einem größeren Kästchen mit der Beschriftung „Modul“.

Nach „Theorie der minimalen kognitiven Architektur“ (Anderson 1992, 2008; Sarimski 2003, 2013).

Die Formatierungsvorgaben sind für beide Varianten gleich:

keine graue Schrift, sondern Schriftfarbe wie anderer Text
die Schrift könnte etwas größer sein, aber kleiner als die Hauptschrift
die Bildunterschriften sollten keinen zu großen Abstand vom Bild haben.

Bsp.

Nach „Theorie der minimalen kognitiven Architektur“ (Anderson 1992, 2008; Sarimski 2003, 2013).

Variante 1: Hier müssten entsprechende Anpassungen, vermutlich in den Einstellungen der Mediendatenbank, vorgenommen werden.

Variante 2:

Hierfür benötigen wir eine Vorlage ‚Bildunterschrift‘

Formatierung und Platzierung blaue Kästen

Die Hervorhebungen in den blauen Kästen sollen grundsätzlich so bleiben wie sie sind. Allerdings sind sie sehr unterschiedlich formatiert:

Die Abstände innerhalb des Kastens, also links, rechts, oben, unten sind uneinheitlich
Die Platzierung des blauen Kastens ist uneinheitlich, i.R. nach innen eingerückt, manchmal aber auch zu weit außen

1) Anpassung der inneren Ränder

2) Positionierung der Kästen

wünschenswert wäre es, dass alle blauen Kästen bündig mit dem übrigen Text platziert werden.
wenn dies jedoch zu aufwändig ist, kann ich auch damit leben, wenn alle blauen Kästen etwas nach rechts eingerückt sind, wie es jetzt schon bei einigen der Fall ist.
die blauen Kästen sollen allerdings in keinem Fall nach links verrückt sein

Test Steyles

Die Hervorhebungen in den blauen Kästen sollen grundsätzlich so bleiben wie sie sind. Allerdings sind sie sehr unterschiedlich formatiert:

Styles ‚wie Überschriften‘

Die Styles für ‚wie Überschriften‘ funktionieren grundsätzlich sehr gut. Allerdings wäre es hilfreich, wenn im Code eine Schriftfarbe enhalten wäre, die ich dann ggf. händisch austauschen kann. Wir haben ja auch bei den ‚wie Überschriften‘ unterschiedliche Farben. Ggf. kann ich das aber auch aus der Typo-Seite entnehmen.

Styles Schriften

Bei den Styles ‚Stil smallfont‘ ‚Stil caption‘ und ‚Stil smalltight‘ ssind für mich keine Auswirkungen erkennbar. Aber vielleicht mache ich ja auch was falsch.

Hervorhebung wie H1 // class=“is_h1 dunkelblau“
Hervorhebung wie H2 / class=“is_h2 dunkelblau“
Hervorhebung wie H3 / class=“is_h3 dunkelblau“
Hervorhebung wie H4 / class=“is_h4 dunkelblau“
Hervorhebung wie H5 / class=“is_h5 dunkelblau“

<span class="is_h2 dunkelblau">Hervorhebung wie H2 / class="is_h2 dunkelblau"</span>
<span class="is_h3 dunkelblau">Hervorhebung wie H3 / class="is_h3 dunkelblau"</span>
<span class="is_h4 dunkelblau">Hervorhebung wie H4 / class="is_h4 dunkelblau"</span>
<span class="is_h5 dunkelblau">Hervorhebung wie H5 / class="is_h5 dunkelblau"</span>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam non nisi est sit amet facilisis. Rutrum tellus

Absatzt Text ist jetzt seit 2024 bei 18 px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam non nisi est sit amet facilisis. Rutrum tellus

Absatz Text Fett

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam non nisi est sit amet facilisis. Rutrum tellus

Absatz Text Kursiv

Aufzählungen

Generate Lorem Ipsum placeholder text.
Generate Lorem Ipsum placeholder text.
Generate Lorem Ipsum placeholder text.
Generate Lorem Ipsum placeholder text.

Nummerierte Liste

Generate Lorem Ipsum placeholder text.
Generate Lorem Ipsum placeholder text.
Generate Lorem Ipsum placeholder text.
Generate Lorem Ipsum placeholder text.

Link Text unterstrich

placeholder

Link Text

placeholder

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam non nisi est sit amet facilisis. Rutrum tellus pellentesque eu tincidunt tortor aliquam. Nisi scelerisque eu ultrices vitae auctor eu augue. Gravida cum sociis natoque penatibus et. Euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Aliquam sem fringilla ut morbi tincidunt augue interdum. Scelerisque varius morbi enim nunc faucibus a pellentesque sit. Maecenas pharetra convallis posuere morbi. Diam in arcu cursus euismod quis viverra nibh. Placerat orci nulla pellentesque dignissim enim sit amet venenatis urna. Placerat orci nulla pellentesque dignissim enim sit. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Arcu non odio euismod lacinia at quis risus. Ornare arcu dui vivamus arcu felis bibendum ut. Tempor orci eu lobortis elementum nibh tellus molestie nunc non.

Bild

Pino Headline (H1) verlinkt

Megrim Font: (H1) z.B.: Virtuelles Kulturhaus

Überschrift h1

Überschrift h2

Headline H2 der Inhaltsseiten z.b.
Verlinkung zu Menschenbilder

Überschrift h3

Überschrift h4

Überschrift h5

Überschrift h6

Absatz Text Fett

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam non nisi est sit amet facilisis. Rutrum tellus pellentesque eu tincidunt tortor aliquam. Nisi scelerisque eu ultrices vitae auctor eu augue. Gravida cum sociis natoque penatibus et. Euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Aliquam sem fringilla ut morbi tincidunt augue interdum. Scelerisque varius morbi enim nunc faucibus a pellentesque sit. Maecenas pharetra convallis posuere morbi. Diam in arcu cursus euismod quis viverra nibh. Placerat orci nulla pellentesque dignissim enim sit amet venenatis urna. Placerat orci nulla pellentesque dignissim enim sit. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Arcu non odio euismod lacinia at quis risus. Ornare arcu dui vivamus arcu felis bibendum ut. Tempor orci eu lobortis elementum nibh tellus molestie nunc non.

Absatz Text Kursiv

Mi eget mauris pharetra et. Feugiat vivamus at augue eget arcu dictum varius. Scelerisque purus semper eget duis. Quis lectus nulla at volutpat diam ut venenatis tellus. Platea dictumst quisque sagittis purus sit amet volutpat. Sem integer vitae justo eget magna fermentum iaculis eu non. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Lobortis elementum nibh tellus molestie nunc. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Enim lobortis scelerisque fermentum dui faucibus in ornare quam.

Text Durchgestrichen

Mauris nunc congue nisi vitae suscipit tellus mauris a diam. Etiam erat velit scelerisque in. Suspendisse sed nisi lacus sed viverra tellus in hac. Fermentum leo vel orci porta non pulvinar neque laoreet. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. Pharetra vel turpis nunc eget. In ante metus dictum at tempor. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Tincidunt ornare massa eget egestas. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Interdum varius sit amet mattis vulputate. Turpis egestas maecenas pharetra convallis. Cursus risus at ultrices mi. Tincidunt tortor aliquam nulla facilisi cras. Vel turpis nunc eget lorem dolor sed viverra ipsum nunc. Egestas erat imperdiet sed euismod nisi. Amet porttitor eget dolor morbi non. Sed vulputate mi sit amet mauris commodo quis imperdiet.

Aufzählungen

Generate Lorem Ipsum placeholder text.
Generate Lorem Ipsum placeholder text.
Generate Lorem Ipsum placeholder text.
Generate Lorem Ipsum placeholder text.

Nummerierte Liste

Generate Lorem Ipsum placeholder text.
Generate Lorem Ipsum placeholder text.
Generate Lorem Ipsum placeholder text.
Generate Lorem Ipsum placeholder text.

Link Text unterstrich

placeholder

Link Text

placeholder

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam non nisi est sit amet facilisis. Rutrum tellus pellentesque eu tincidunt tortor aliquam. Nisi scelerisque eu ultrices vitae auctor eu augue. Gravida cum sociis natoque penatibus et. Euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Aliquam sem fringilla ut morbi tincidunt augue interdum. Scelerisque varius morbi enim nunc faucibus a pellentesque sit. Maecenas pharetra convallis posuere morbi. Diam in arcu cursus euismod quis viverra nibh. Placerat orci nulla pellentesque dignissim enim sit amet venenatis urna. Placerat orci nulla pellentesque dignissim enim sit. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Arcu non odio euismod lacinia at quis risus. Ornare arcu dui vivamus arcu felis bibendum ut. Tempor orci eu lobortis elementum nibh tellus molestie nunc non.

Bild

Ein jungesFrau in einem motorisierten Rollstuhl interagiert mit einem Touchscreen-Gerät. Sie trägt ein rot gepunktetes Hemd und Jeans.

Überschrift H1 = ??px

Diese Überschrift läuft bei langen Textinhalt über zwei Zeilen und das soll sie auch

Überschrift H2 = ??px

Diese Überschrift läuft bei langen Textinhalt über zwei Zeilen und das soll sie auch

Überschrift H3

Diese Überschrift läuft bei langen Textinhalt über zwei Zeilen und das soll sie auch

Überschrift H4

Diese Überschrift läuft bei langen Textinhalt über zwei Zeilen und das soll sie auch

Überschrift H5

Diese Überschrift läuft bei langen Textinhalt über zwei Zeilen und das soll sie auch

Überschrift H6

Diese Überschrift läuft bei langen Textinhalt über zwei Zeilen und das soll sie auch bei langen Textinhalt über zwei Zeilen und das soll sie auch

Formatierungsvorschläge Lamers

Formatierung Verlinkungen im Text

Müsste im Backend eingestellt werden

Formatierung Hervorhebung fett

Müsste im Backend eingestellt werden

Formatierung Praxisbeispiele

Formatierung Zitate im Text

Formatierung abgesetzte Zitate

Hier benötigen wir eine Vorlage ‚Zitat‘

Formatierung Bildunterschriften

Hierfür benötigen wir eine Vorlage ‚Bildunterschrift‘

Formatierung und Platzierung blaue Kästen

Test Steyles

Styles ‚wie Überschriften‘

Styles Schriften

Pino Headline (H1) verlinkt

Megrim Font: (H1) z.B.: Virtuelles Kulturhaus

Überschrift h1

Überschrift h2

Überschrift h3

Überschrift h4

Überschrift h5

Überschrift h6

Personenkreis: Menschen mit schwerer Behinderung

Menschenbild

Ethische Fragen

Teilhabe an Alltag

Teilhabe an Arbeit

Teilhabe an Kultur

Wahrnehmung & Bewegung

Kognition & Handlungskompetenz

Kommunikation

Verhalten

Kompetenzen erkennen & fördern

Bildungsangebote planen & gestalten

Pflegen

Biografie in den Blick nehmen

Begleiten & Assistieren

Kooperieren

Reflektieren

Lebensqualität

Normalisierungs-prinzip

Selbstbestimmung & Personzentrierung

Inklusion

Sozialraum­­orientierung

Körperpflege

Essen & Trinken

Wahrnehmung & Bewegung

Kommunikation

Orientierung im Raum

Orientierung in der Zeit

Biografie in den Blick nehmen

Älter werden

Erwachsen sein

Holzverarbeitung

Papierverarbeitung

Herstellung von Lebensmitteln

Textilverarbeitung

Kunstgewerbliches Arbeiten

Verkauf

Bewirtung

Hauspflege

Wäschepflege

Diverse Zuarbeiten

Gartenarbeit

Tierhaltung

Künstlerisches Gestalten

Musik

Normalisierungs-
prinzip

Sozialraumorientierung

Biografie in den
Blick nehmen

Fragen Expert_inneninterviews