Richtlinien für die Inhaltserstellung im WEBCMS der tud

Version 1.3

von
Robert Hossenfelder und Tobias Miosga
(MZ) 

Inhaltsverzeichnis:

[1 Allgemeines / Definitionen]
[2 Inhaltsbereich]
[3 Portletbereiche]
[4 Navigations- und Objektstruktur]

1 Allgemeines / Definitionen

Diese Richtlinien dienen einem weitgehend einheitlichen Erscheinungsbild sowie der barrierefreien Gestaltung und korrekten Darstellung der Inhalte.

Die Inhalte sollten problemlos bei der Auflösung von 1024x768 Pixel und in dem im Browser einzustellenden Schriftgrad "Sehr groß" dargestellt werden können. Dieser Modus wird im Folgenden als STANDARD bezeichnet und sollte auch von den Redakteuren zum Testen verwendet werden. 

  1   Positionsleiste (breadcrumb)
  2   Hauptnavigation (Direktlinks zu den Bereichen)
  3   Seitennavigation
  4   Inhaltsbereich
  5   Rechter Portletbereich

2 Inhaltsbereich

2.1  Objekt Dokument

Allgemeines

Der Titel eines Dokumentes darf keine Sonderzeichen (wie z.B. "+" oder "/") enthalten, da dieser sonst in der Positionsleiste (breadcrumb) nicht mehr korrekt angezeigt werden kann.

Text

• Absätze sind mit der Absatzformatierung zu versehen (Editor: Icon Absatz), da sonst die Zeilenabstände zu gering sind. (Internet Explorer versieht Absätze bei <Enter> automatisch mit der Absatzformatierung, bei Mozilla-Ablegern müssen diese extra eingefügt werden.)
• Beim Kopieren aus Word oder einer anderen HTML-Seite unbedingt in einen Texteditor zwischenkopieren, um wirklich alle Formatierungen zu eliminieren (diese kollidieren mit den Stylesheets und zerstören das Layout).
• Verwenden Sie nur Formatierungen, die im Editor angeboten werden, um eine korrekte Darstellung und ein einheitliches Erscheinungsbild zu gewährleisten.
• Benutzen Sie nur die Auszeichnungsfarbe des Editors für Hervorhebungen.
• Heben Sie nur Worte und kurze Wortgruppen, nicht jedoch ganze Zeilen oder Sätze hervor, da dies die Lesbarkeit stark einschränkt.
• Das Einfügen blinkender Texte ist untersagt.
   

Tabellen

• Tabellen werden generell nur zur Gegenüberstellung von Daten verwendet, wobei die Gegenüberstellung im "summery"-Attribut  zu beschreiben ist.
• Tabellen dürfen nur untereinander (nicht nebeneinander) angeordnet werden.
• Tabellen ohne Rahmen (border=0) dürfen nur verwendet werden, wenn sie genau zwei Spalten enthalten (Editor: Tabelle ohne Rahmen einfügen).

Links

• Links zu Ankern (Sprungmarke innerhalb eines Dokuments) sollten im Dokument durch Einbettung in "[" und "]" kenntlich gemacht werden.
• Sprünge zum Anfang der Seite sollen grundsätzlich über die Erstellung eines Ankers vom Typ "index (Inhaltsverzeichnis)" eingefügt werden. 
• Links auf eine andere Seite (im System oder externe Seiten) sollen nicht mit "[" und "]" gekennzeichnet werden.
• Für einen Link auf eine interne Seite des Systems sollte der Name verwendet werden, der dem Titel der Zielseite entspricht.
• Verweist ein Link auf ein anderes internes (im CMS vorhandenes) Dokument, sollte beim Klick auf diesen Link kein neues Fenster geöffnet werden.

Bilder

• Einzelbilder oder Bildaneinanderreihungen (inklusive Bildabstände) sollten eine maximale Breite von 420 Pixel nicht überschreiten, damit es im Modus STANDARD nicht zu Verkleinerungen bei den Portletspalten kommt.
• Bilder können zusammen mit Fließtext linksbündig oder rechtsbündig ausgerichtet werden und sollen eine maximale Breite von 200 Pixel nicht überschreiten, damit der Fließtext auch im Modus STANDARD korrekt dargestellt wird. 
• Es sollte immer nur genau ein Bild in Kombination mit Fließtext verwendet werden, damit das Gesamtbild nicht zerstört wird und Screenreader-Nutzer nicht behindert werden.
• Farbgebungen bei Logos, Schriftgrafiken etc. sollten das in blau-grau gehaltene Design nicht zerstören. Dies gilt insbesondere für die Startseiten von Institutionen.
• Bilder können eine Bildunterschrift und/oder eine Lupe (Vergrößerungsicon bzw. Link zu einem weiteren Dokument, in welchem das Bild mit zugehörigem Beschreibungstext dargestellt wird) enthalten.
• Achtung! Als Kurzname für Grafiken nicht "Name.gif" oder "Name.jpg", sondern nur "Name" eingeben.

Auflistungen

• Auflistungen in mehr als zwei Ebenen sind, um die Übersichtlichkeit zu wahren, nicht zu verwenden.
• Für Auflistungen sollen nur die Auflistungsfunktionen des Editor Epoz verwendet werden (Editor: Icons Nummerierung, Aufzählungszeichen und Gliederung erstellen).

• E-Mail-Adressen sollten aufgrund der besseren Zugänglichkeit ausgeschrieben werden. Da auch eine hinter einem Namen verlinkte Mailadresse aus dem Quellcode leicht von entsprechenden Spamprogrammen ausgelesen werden kann, besteht kein objektiver Grund, die Adresse für den Nutzer nicht sofort zugänglich zu machen.
• Es ist die Dudenschreibweise "E-Mail" zu verwenden.
• Für Redakteure der Einführungsseiten Die TUD, Studium, Forschung, Weiterbil­dung, Aktuelles, Service:
  Die allgemeinen "Startseiten" zu diesen großen Themenbereichen sollen möglichst ähnlich aufgebaut sein. Diese enthalten einen allgemeinen Einführungstext zum Thema, möglichst mit Foto(s), damit ein emotionaler Eindruck entsteht und bleibt. Auf Linklisten innerhalb dieser Seiten sollte verzichtet werden, da diese sich sonst mit der Navigation auf der linken Seite doppeln und dies für den Nutzer verwirrend sein könnte.
  Achtung! Diese Seiten heißen in der Navigation generell "Startseite" (nicht "Home").
• Es wird empfohlen, Bilder und Dateien für die einzelnen Verantwortlichkeitsbereiche immer in den gleichen Ordnern (bilder, dateien) abzulegen - so lassen sich diese schneller wieder auffinden.
• Trotz zentralem Impressum der TU Dresden müssen die Unterbereiche eigene Angaben über die Verantwortlichkeit für die Seiteninhalte machen.

2.2 Definition der Textbausteine

Folgende Textbausteine (Textblöcke) sind im Haupttext-Bereich eines Dokuments zulässig:

• Überschrift Ebene 2 (fett, schwarz)
• Überschrift Ebene 3 (kursiv nicht fett)
• Absatz (Paragraph)
• geordnete Auflistung (in max. zwei Ebenen)
• ungeordnete Auflistung (in max. zwei Ebenen)
• Tabelle mit Kopf (Kopfbereich ist fett und zentriert mit grauem Hintergrund)
• Tabelle ohne Kopf
• ein einzelnes Bild linksbündig ausgerichtet ohne Fließtext
• ein einzelnes Bild zentriert ausgerichtet ohne Fließtext
• ein einzelnes Bild rechtsbündig ausgerichtet ohne Fließtext
• mehrere Bilder nebeneinander (Maximum vier), alle jeweils links oben ausgerichtet ohne Text daneben
• links ausgerichtetes einzelnes Bild mit Fließtext rechts daneben
• recht sausgerichtetes einzelnes Bild mit Fließtext links daneben
• Link-Auflistung zu Sprungmarken (Ankern) der Seite in horizontaler Ausrichtung (Alphabetische Liste, z. B. Mitarbeiterliste)
• Link-Auflistung zu Sprungmarken (Ankern) der Seite in vertikaler Ausrichtung als Inhaltsverzeichnis für die entsprechende Seite (z.B. Auflistung von Institutionen die beim Ankerziel näher erklärt werden)
• Gegenüberstellung von Inhalten, die als Tabelle ohne Rahmen ausgeführt ist und über das "summary"-Attribut zu beschreiben ist

Alle beschriebenen Textbausteine können innerhalb des WebCMS mit dem Editor Epoz erstellt werden.

2.3 Objekt News-Artikel

Bildquellen und Bilduntertitel für News-Artikel werden im Formularfenster zum News-Artikel angegeben sofern diese vorhanden sind. Sie werden automatisch in der Kurzfassung (News-Board) und Langfassung (News-Artikel) links oben dargestellt. Diese Bilder für News-Artikel werden automatisch in der Größe 134x114 Pixel angezeigt. Der Haupttext eines News-Artikels sollte dann keine weiteren Bilder enthalten.

2.4 Seitentypen

• Linklisten (verweisen auf Seiten in den unterschiedlichsten Bereichen, z.B. Linklisten der Startseite)
• Übersichtsseiten (Einstiegsseiten in Haupt- bzw. Unterbereiche, die einen kurzen Erklärungstext enthalten können und in Linkform auflisten, was auf den Unterseiten zu finden ist)
• ungegliederte Inhaltsseiten (Texte mit Bildern)
• gegliederte Inhaltsseiten (enthalten oben ein Inhaltsverzeichnis, welches auf die Teilbereiche verlinkt)
• Bildseiten (enthalten ein einzelnes Bild mit Bildunterschrift und werden für vergrößerte Darstellungen verwendet)
• Glossarseiten (z.B. alphabetische Mitarbeiterliste, Geschichte-Listen etc... )
• News-Artikelseiten
• Kontaktseiten (enthalten Kontakte zu einem einzelnen Mitarbeiter (Tel., Fax, Sitz, E-Mail etc…)
  

Beispiele für diese Seitentypen finden Sie unter folgendem Link: 
Beispiele für Seiten 
 

     

3 Portletbereiche

Portlets sind bestimmte Funktionsbereiche, wie die Seitennavigation (links neben dem Inhaltsbereich) oder News- und Kontakt-Portlet (rechts neben dem Inhaltsbereich).

3.1 Allgemeine Richtlinien

• Wortlängen im Portletbereich, die das Gesamtdesign des jeweiligen Portlets von der Länge her "sprengen" (Modus STANDARD) sind zu unterlassen.
• Die Seitennavigation befindet sich immer auf der linken Seite.
• Der rechte Portlet-Bereich kann folgende Portlets in der angegeben Reihenfolge enthalten:

1. Logo-Portlet
2. News-Portlet
3. Termin-Portlet
4. Kontakt-Portlet

3.2 Seitennavigation

• Die Tiefe einer einzelnen Navigation sollte maximal drei Ebenen enthalten, tiefer gehende Navigationspunkte sind in gesonderte Navigationsbereiche auszulagern.
• Es sollten keine Navigationspunkte direkt auf eine externe Seite weiterleiten – das widerspricht den Erwartungen des Nutzers, der sich innerhalb einer Seite bewegt. Solchen Navigationspunkten auf externe Links sollte mindestens eine Seite im Inhaltsbereich des WebCMS vorgeschaltet werden.

3.3 News-Portlet

• Im News-Portlet werden standardmäßig fünf Newsartikel angezeigt.
• Der Titel eines News Artikels sollten zusätzlich zur Datumszeile nicht mehr als drei Zeilen im Modus STANDARD einnehmen.

3.4 Termin-Portlet

• Im Termin-Portlet werden standardmäßig fünf Termine angezeigt.
• Ein Veranstaltungstermin sollten zusätzlich zur Datumszeile nicht mehr als drei Zeilen im Modus STANDARD einnehmen.

3.5 Kontakt-Portlet

• Für eine einheitliche Darstellung von Telefon- und Faxnummern sollten diese in der gleichen Art und Weise, wie im Kontakt-Portlet des Bereiches Die TU Dresden angegeben werden. 
• Bei der Angabe der E-Mail-Adresse ist Dudenschreibweise "E-Mail" oder das Icon verwenden.

4 Navigations- und Objektstruktur

• Die Navigationsstruktur in der Seitennavigation muss mit der Objektstruktur (Ordnerstruktur) übereinstimmen. Dies gewährleistet die korrekte Darstellung und Markierung innerhalb der Hauptnavigation, der Positionsleiste, dem Dokumenttitel und in der Seitennavigation.
• 

  Navigationsstruktur

  

  Objektstruktur