Zielgruppe EntwicklungVersion: GSB10.0Technische Umsetzung

Mit zunehmendem Umfang der Inhalte steigt auch die Komplexität der Navigation. In der Regel werden diese komplexen Navigationsstrukturen aufgelöst, indem zusammenhängende Teilbereiche zu Haupt- bzw. Unterrubriken zusammenfasst werden. Als Ergebnisstruktur entsteht ein Navigationsbaum.

Zur Umsetzung eines konkreten Navigationskonzepts bzw. der zugehörigen Haupt- und Unterrubriken stehen die beiden folgenden Standardkonzepte zur Auswahl.

Hierarchische Navigation

Die Navigation wird komplett entweder im Identitäts- oder Navigationsbereich realisiert. Dieser Navigationsbereich ist hierarchisch angeordnet. Auf der obersten Ebene enthält er nur die Hauptrubriken (globale Navigation); wenn eine Rubrik ausgewählt wird (bereichsspezifische Navigation), werden die jeweiligen Unterrubriken direkt unter der Rubrik aufgelistet.

Quelle: www.bescha.bund.de

Überkreuz-Navigation

Die Navigation wird sowohl im Identitäts- als auch Navigationsbereich angeboten. Die Haupt-Rubriken befinden sich bei der Überkreuz-Navigation im Identitätsbereich der Seite. Die Unterrubriken erscheinen dann vertikal im Navigationsbereich. Diese verändern sich entsprechend der angeklickten Haupt-Rubrik.

Quelle: www.bundesfinanzministerium.de

Standardbausteine

Die im Folgenden aufgezählten Bausteine stehen bei der Realisierung eines konkreten Navigationskonzepts innerhalb der Navigationen zur Verfügung.

Breadcrumb-Navigation

Die Breadcrumb-Navigation markiert den Weg, auf dem sich der Nutzer in die „Seiten-Tiefe“ geklickt hat. Dieser Navigationspfad ist rein linear und erlaubt den Sprung zurück in eine höhere Rubrik. Man kann sich nur auf einem einzigen Pfad bewegen. Um in eine andere Rubrik zu navigieren, muss man auf die Startseite zurück. Im Allgemeinen wird die Breadcrumb-Navigation meist im Kopf- oder Fußbereich zur Anzeige der aktuellen Navigationsposition eingesetzt.

Die Breadcrumb-Navigation wird, sofern diese im Contentbereich erscheinen soll, mit Hilfe der JSP „Document/renderBreadCrumb.jsp“ in das LOGridTemplate integriert. Wenn die Breadcrumb-Navigation hingegen außerhalb des Contentbereichs erscheinen soll, muss die JSP in das PSTemplate eingefügt wenn.

Ordner-Navigation

Die Ordner-Navigation funktioniert wie die Ordner-Organisation im Windows-Explorer: Die Teilbäume der Haupt- und Unterrubriken können auf- und wieder zugeklappt werden (vergleiche Abbildung 4, z.B. Rubrik: Themen, Unterrubrik: Schwerpunkte, Ordner: Klimaschutz). Sobald eine Rubrik bzw. ein Ordner aufgeklickt wird, werden die Teilbäume der Unterrubriken darunter sichtbar.

Die Ordner-Navigation wird mit Hilfe der NavStyles „NavStyleTreeView“ realisiert.

„NavStyleTreeView“ wird benutzt, wenn es ausreicht zu einem Zeitpunkt immer nur einen Ordner bzw. Navigationspunkt geöffnet zu haben.

Horizontale Navigationsleisten

Dieser Navigationstyp wird z.B. für die Haupt-Rubriken bei der Überkreuz-Navigation im Identitätsbereich verwendet.

Die horizontale Navigationsleiste wird mit Hilfe des NavStyles „NavStyleBarView“ realisiert.

Dokumenttypen für die Navigation

Nachfolgend werden die für die Navigation benötigten Dokumenttypen samt ihrer Attribute erläutert.

NavNode

Der Navigationsbaum wird ausschließlich durch Dokumentinstanzen vom Typ NavNode (Navigationsknoten) realisiert.

Attribute:

• targetAttribute: Das Target-Attribut des HTML-Links <a href="..." target="<targetAttribute>">...</a>
• picture: Das Bild für die Darstellung des Navigationsknotens im Browser. Falls gesetzt, wird das Bild (z.B. als Bild-Button) anstatt Attributs displayText/displayName ausgegeben.
• displayName: Der Text für die Darstellung des Navigationsknotens im Browser. Falls nicht gesetzt, wird der Dokumentname angezeigt.
• displayText: Der Text (ggf. mit Auszeichnung von Sprache und/oder Abkürzung bzw. Akronym) für die Darstellung des Navigationsknotens im Browser. Falls nicht gesetzt, wird das Attribut displayName verwendet.
• description: Der Text des HTML Meta-Tags description, falls die Meta-Tags über den defaultNavNode des NavTarget gerendert werden (Seite mit nicht genau einem Inhalt tragenden Dokument).
• title: Der Text für den Title des Browsers-Fensters und das HTML Meta-Tag, falls die Meta-Tags über den defaultNavNode des NavTarget gerendert werden (bei einer Seite mit nicht genau einem Inhalt tragenden Dokument), wobei dem Attribut title ein TitelPrefix (vgl. globale Konfiguration) vorangestellt wird.
• alttext: Der Tooltip-Text für die Link-Darstellung, sofern der Navigationsknoten verlinkt wird. Dieses Attribut kann ausschließlich durch den Siteadministrator gefüllt werden und sollte auch nur gefüllt werden, wenn zusätzliche Informationen zum Attribut „displayName“ benötigt werden.
• accessKey: Der hier hinterlegte Key wird beim Rendern des Knotens für die Realisierung von Access Keys verwendet. Wird hier z.B. der Wert „0“ beim Knoten für die Sitemap hinterlegt, gelangt man mit [Alt – 0] und anschließendem [Enter] zur Sitemap.
• keywords: Der Text des HTML Meta-Tags keywords, falls die Meta-Tags über den defaultNavNode des NavTarget gerendert werden (Seite mit nicht genau einem Inhalt tragenden Dokument).
• isRoot: Gibt an, ab es sich bei diesem Navigationsknoten um den Wurzelknoten, also die Homepage handelt.

Assoziationen (LinkListen):

• childNavNodes: Die Subnavigationsknoten des Navigationsknotens im Navigationsbaum.
• navTarget: Gibt das Linkziel des Navigationsknotens an.
• navStyle: Der Typ des Navigationsknotens (z.B. "Tree" oder "Bar").
• navNodeStyles: Die Cacading-Style-Sheets (PageStyleBundle) für den aktuellen und alle untergeordneten Navigationsknoten.
• localPageStructur: Die HTML-Seitenstruktur (PSTemplate) für den aktuellen und alle untergeordneten Navigationsknoten.
• navTargetCaching: siehe GSB_Caching.doc - Kapitel 2.2.1
• docTargetCaching: siehe GSB_Caching.doc - Kapitel 2.2.1
• transferProtocoll: Das Protokoll, das zur Kommunikation zwischen Browser und Server genutzt wird. Mit dem Eintrag „Transferprotokoll https“ wird die Kommunikation verschlüsselt, wobei ein SSL-Zertifikat benötigt wird.

NavLangNode

Soll ein Navigationsknoten in einer anderen Sprache ein anderes Aussehen bekommen, so wird für ihn eine Dokumentinstanz dieses Typs angelegt.

Attribute:

• picture: Das Bild für die Darstellung des Navigationsknotens im Browser. Falls gesetzt, hat diese Anzeigeart Priorität gegenüber dem displayName.
• displayText: Der Text für die Darstellung des Navigationsknotens im Browser. Falls nicht gesetzt, wird displayName verwendet, ist auch das nicht gesetzt, wird der Dokumentname angezeigt.

Assoziationen:

• mainNavNode: Der hauptsprachige Navigationsknoten.
• languageInd: Verweis auf die Sprache dieser Instanz.

NavStyleBarView

Bei Zuordnung eines Dokuments dieses Typs erhält der Navigationsknoten das Aussehen einer Bar-Navigation. Von diesem Dokumenttyp wird üblicherweise pro Mandant nur eine Instanz angelegt.

Attribute:

• separatorText: Der Text vor jedem Navigationsknoten.
• separatorPicture : Das Bild vor jedem Navigationsknoten.
• spacingText : Der Text nach jedem Navigationsknoten.
• spacingPicture : Das Bild nach jedem Navigationsknoten.

NavStyleTreeView

Bei Zuordnung eines Dokuments dieses Typs erhält der Navigationsknoten das Aussehen einer Baum-Navigation mit - im Gegensatz zu NavStyleExplView - nur einem aufgeklappten Navigationspfad. Von diesem Dokumenttyp wird üblicherweise pro Mandant nur eine Instanz angelegt.

Attribute:

• indentText: Der Text zur Einrückung der Unternavigationsebenen. Default ist "...".
• indentPicture: Das Bild zur Einrückung der Unternavigationsebenen. Falls gesetzt, hat diese Anzeigeart Priorität gegenüber dem indentText.

NavStyleHidden

Ein Dokument dieses Typs kann einem Navigationsknoten zugeordnet werden, um die Anzeige dieses Navigationsknotens zu unterdrücken. Sind Navigationsknoten mit diesem NavStyle gekennzeichnet, erscheinen sie nicht in der Navigation oder Breadcrumb.

Benutzt wird dieser NavStyle beispielsweise, wenn unterhalb eines Navigationsknoten mehrere Seiten untereinander verlinkt werden, die alle ein komplett unterschiedliches Layout besitzen. Für jedes Layout muss ein eigenes NavTarget erstellt werden und an einen versteckten NavNode gehängt werden.

Von diesem Dokumenttyp, der keine weiteren Attribute besitzt, wird üblicherweise pro Mandant nur eine Instanz angelegt.

Aufbau des Navigationsbaums

Die Kernstruktur des Navigationsbaums wird ausschließlich durch Dokumentinstanzen des Typs NavNode (Navigationsknoten) aufgebaut.

Ausgehend von einem Wurzelelement (Navigationsknoten mit Attribut isRoot=1) werden dabei schrittweise die jeweils untergeordneten Ebenen hinzugenommen. Dies erfolgt durch ein Verlinken der LinkList childNavNodes, in die alle direkten Subnavigationspunkte eingetragen werden.

Das Attribut navTarget verweist auf das Linkziel des Knotens.

In dem Attribut navStyle wird der Typ bzw. das Aussehen des Knotens verlinkt (z.B. "Tree" oder "Bar")

Als Ergebnis erhält man die Baumstruktur der Navigation in der Hauptsprache.

Konfiguration des Aussehens eines Navigationspunktes

Ob ein Navigationspunkt als Tree, Bar oder Hidden gerendert wird, entscheidet der im NavNode konfigurierte navStyle. Das erste Element dieser LinkList konfiguriert, welche JSP zum Rendern der Navigation verwendet wird.

Ist der NavStyle nicht direkt am NavNode zugewiesen, so wird er von den Vorgängerdokumenten im Pfad des Navigationsbaums geerbt.

In der NavStyle Instanz kann das jeweilige Erscheinungsbild konfiguriert werden. Mehrsprachige Navigationspunkte erhält man mit Hilfe von Dokumentinstanzen des NavLangNode.

Zusammenhang von Navigation und Mehrsprachigkeit

Die Kernstruktur des hauptsprachigen Navigationsbaums wird ausschließlich durch Dokumentinstanzen von NavNode aufgebaut.

Bei mehrsprachigen Sites ist für den Aufbau der mehrsprachigen Navigation entscheidend, welcher Mehrsprachigkeitsmodus gewählt wurde:

Mehrsprachige symmetrische Sites

Soll ein Navigationsknoten in einer anderen Sprache ein anderes Aussehen haben, so wird für ihn eine Dokumentinstanz NavLangNode angelegt. In dem Attribut mainNavNode wird der hauptsprachige NavNode eingetragen. Das Attribut languageInd verweist auf die Sprache bzw. den MILanguageInd unter /<Mandant>/SiteGlobals/Languages. Die Dokumente werden im Folder /<Mandant>/Navigation angelegt.

Per Default ist für jede Sprache der komplette Navigationsbaum sichtbar. Über die ConfigReader Konfiguration „/<Mandant>/SiteGlobals/_config/MultiLanguageNavPrune=true“ kann der Modus aktiviert werden, in dem der Navigationsbaum auf die Punkte beschnitten wird, die in der aktuellen Sprache als NavLangNode existieren.

Mehrsprachige asymmetrische Sites

Bei diesem Modus wird der Content für jede Sprache komplett getrennt gepflegt und verwaltet. Daher muss auch für jede Sprache ein eigener Navigationsbaum durch Dokumentinstanzen von NavNode aufgebaut werden.

Über ConfigReader Verzeichnisse mit den Einstellungen für die RootElemente kann erreicht werden, dass für jede Sprache der entsprechende zugehörige Navigationsbaum gerendert wird.

CSS Klassen zur Auszeichnung der Navigation

Die folgenden CSS-ID's werden in den JSP-Templates der Navigation zur Auszeichnung der unterschiedlichen Verwendungszwecke verwendet, wobei die Liste nicht abschließend ist. Die CSS-StyleSheets können über den GSB Editor für die unterschiedlichen Bereiche angelegt werden.

• #navPrimary
• #navSecondary
• #navBreadcrumbs
• #navBreadcrumbsVertical

Access Keys

Access-Keys sind vereinfachte Zugriffsmöglichkeiten auf die Webseite, die der barrierefreien Navigation dienen. Sie werden bei Darstellung der Seite ohne CSS-Stylesheets vor Beginn des eigentlichen Seiteninhalts angezeigt.

Mit Hilfe von Access Keys ist es somit leicht möglich durch entsprechende Tastenkombinationen Navigationspunkte anzusprechen.

Access Keys werden im GSB direkt an den entsprechenden Navigationsknoten-Dokumenten definiert. Im Attribut accessKey kann über den Editor ein Zeichen angegeben werden, das beim Rendern des Navigationsknotens zur Erstellung eines entsprechenden Access Keys verwendet wird. Hinterlegt man beispielsweise beim sitemap_node im Attribut accessKey eine „0“, so wird die Sitemap über [Alt – 0] mit abschließendem [Enter] erreichbar. Durch die Redaktion ist sicherzustellen, dass die AccessKeys eindeutig sind.

Hinweis: Die Funktionsfähigkeit der Access Keys hängt stark von den technischen Möglichkeiten des auf der Client-Seite verwendeten Browsers ab.

nach oben