Seite wählen

Unterseite im jeweiligen Projekt (<h1>) nicht Projektname

 
 

Hier wird ein Formular eingebunden (cf7)

    Zwischenüberschrift (<h2>), wenn gewünscht

    Einbindung eines Formulars mit WP contactform7

    Fehler: Kontaktformular wurde nicht gefunden.

    Fehler: Kontaktformular wurde nicht gefunden.

    Hinweis: Der Projektname in der Hauptüberschrift kann /soll hier entfallen, da die Breadcrums, also die kleine Navigationszeile oberhalb vom Textbereich den Projektnamen bereits enthält. Dieser ist verlinkt mit der Projekt-Einstiegssteite und mit der kobra.net-Startseite.

    Seitenstruktur (<h2> mit gepunkteter Linie)

    Diese Seite ist einspaltig aufgebaut und die eingesetzten Module sind „Textmodule“. Wenn andere Elemente auf der Seite gewünscht sind, können diese als Module eingebaut werden, z.B. Text mit Video, Text mit Bild usw. Bestimmte Bereiche der Seiten können auch mehrspaltig erstellt werden. Das sollte mit den zuständigen Redakteuren abgestimmt werden Issmaail, Marcel, Ole, Dagmar. Diese Gruppe bereitet die entsprechenden Module vor und hinterlegt sie in der Bibliothek.

    Abschnittsüberschrift (<h3> in Projektfarbe)

    Mit Hilfe der (Abschnitts-)Überschriften kann der Text strukturiert werden. Alternativ können andere Seitenelemente verwendet werden, siehe oben.

     

    Barrierefreie Webseiten gestalten (<h2> mit gepunkteter Linie)

    • Struktur
      Eine Webseite besteht aus verschiedenen Strukturelementen. Klassischerweise gibt es einen Block für die Navigation und einen weiteren Block mit dem Inhalt und dem Text der Seite. Diese Blöcke sind ihrerseits mit Überschriften, Listen und Fließtexten versehen. Barrierefreie Websites haben semantische Auszeichnungen für diese Zusammensetzung. Die Struktur gibt Menschen mit Sehbehinderung Orientierung. Text sollte hierarchisch richtig strukturieren mit Überschriften (H1 – H6), Aufzählungen, Fettschrift, optisch hervor gehobenen Links etc.
    • Schrift und Kontraste
      Beim Erstellen einer barrierefreien Website ist die gute Lesbarkeit der Texte das A und O. Ein ausreichender Kontrast zwischen der Vorder- und Hintergrundfarbe bildet die Basis und ist besonders für Texte in kleinen Schriftgrößen entscheidend. Dieser Effekt kann durch den Kontrastmodus verstärkt werden. Für die mobile Nutzung kann dies auch Vorteile mit sich bringen, da hohe Kontraste helfen, dass Inhalte trotz Sonneneinstrahlung auch im Freien erkennbar sind.
    • Leichte Sprache
      Um den Inhalt der Website noch inklusiver zu gestalten, sollte auch leichte Sprache angeboten werden. Konkret bedeutet das, kurze Sätze zu bilden, einen einfachen Satzbau an den Tag zu legen und weitgehend auf Fremdwörter zu verzichten.
    • Bildtext
      Um blinden Menschen die Nutzung der Website zu ermöglichen und ihnen alle Informationen zugänglich zu machen, sollten Bilder mit sogenannten Alternativtexten versehen werden. So können sich Nutzer Inhalte von Bildbeschreibungen zum Beispiel von einem Screenreader, einer Vorlese-Anwendung für den Text im Browser, vorlesen lassen. Alternativtexte helfen nicht nur Menschen, sondern auch Suchmaschinen, deine Bilder zu verstehen.
      –> Beim Einfügen eines Bildes öffnet sich auf der rechten Seite ein Fenster mit mehreren Bearbeitungsmöglichkeiten – darunter ist auch ein Eingabefeld für den Alternativtext. Schreibe deinen Text hinein, bearbeite die übrigen Felder und klicke auf In den Beitrag einfügen.
    • Formulare
      Auch Formulare auf einer Website sollten barrierefrei sein, sodass ein potenzieller Kunde seinen Einkauf oder seine Kontaktaufnahme erfolgreich erledigen kann.

     

    Abstimmung erforderlich

    • Welche Elemente werden benötigt  oder zugelassen?
    • Sammeln, was aus Sicht der Bereiche gebraucht wird. (ggf. Kopien der alten HP oder externe Beispiele)…
    • Anschließend müsste die AG hierzu Festlegungen treffen und einheitliche Module definieren und in die Bibliothek aufnehmen, damit kein Wildwuchs entssteht.

     

    Branchenbuch Schülerfirmen

    Informationstext (was bedeutet das?)

    Hier steht ein Informationstext-Modul, in dem ein Bild direkt von Text begleitet wird.  Ohnen Spaltenaufteilung steht der Inhalt mittig/schmal

    Text mit Bild (h2)

    Dies ist ein 2-spaltiger Bereich, dem ein „Trenner“ (Linie in der Breite der linken Spalte) vorangestellt wurde. Hier muss aber die Bildgröße noch definiert werden, jeweils für Hoch- und Querformat.

    Lorem ipsum (h3)

    dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

    Stet clita kasd gubergren,(h3)

    no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,

    Lorem ipsum (h3)

    dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

    Stet clita kasd gubergren,(h3)

    no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,

    Lorem ipsum (h3)

    dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

    Stet clita kasd gubergren,(h3)

    no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,

    Schwarz/Weiß-Modus

    0