Corporate Design Web Styleguide Für die Virtuellen Fachbibliotheken

Transkript

1 Corporate Design Web Styleguide Für die Virtuellen Fachbibliotheken Dr. Maximilian Stempfhuber Daniel Hienert GESIS Leibniz Institut für Sozialwissenschaften Design: Wolfgang Keller pool-x März 2008 Dieses Werk ist unter einer Creative Commons-Lizenz lizensiert.

2 Inhaltsverzeichnis 1 EINLEITUNG Ziele Technische Grundlage INFORMATIONSARCHITEKTUR GRUNDELEMENTE Layout (horizontal) Layout (vertikal) Layoutvariationen Bilder Navigation Hauptnavigation Subnavigation Buttons Typographie Links Logo Farbwelt Symbole/Icons Einfache Suchmaske Erweiterte Suchmaske Trefferliste Vollanzeige Inhaltsverzeichnisse Produktkatalog Module für die Startseite Kurzpräsentation der Fachbibliothek Suchzeile Kurzpräsentation von Themen oder Themenkategorien im Überblick Anzeige von RSS-Feeds News/ Aktuelles Partner-Logos Anmeldenbox Flyer... 40

3 4 BEISPIELSEITEN Gesamter Portalauftritt, die Startseite Suche Einfache Suche Erweiterte Suche Trefferliste Vollanzeige Anzeige von redaktionellen Inhalten Blättern im Produktkatalog... 47

4 1 Einleitung Im Rahmen des vascoda-projekts Fachportale - Übergreifende Strukturen und Aufgaben - wurde ein gemeinsames Designkonzept für die Virtuellen Fachbibliotheken entwickelt und in einem beispielhaften Musterportal implementiert. Der Styleguide dokumentiert die einzelnen Komponenten und Gestaltungselemente des Portal-Designs. 1.1 Ziele Der Styleguide stellt ein gemeinsames Rahmendesign für die von DFG und BMBF geförderten und im Wissenschaftsportal vascoda integrierten Virtuellen Fachbibliotheken zur Verfügung. Durch die gemeinsame Informationsarchitektur, ein einheitliches Design und Regeln für die Navigation soll es dem Nutzer erleichtert zwischen vascoda und den Fachportalen und zwischen den einzelnen Fachportalen zu wechseln. Durch eine gemeinsame Bildmarke und das einheitliche Design erkennt der Nutzer das Portal als Virtuelle Fachbibliothek, durch das eigene Fachportal-Logo und durch ein eigenes Farbkonzept für jedes Fachportal bleibt die Unterscheidbarkeit zwischen den einzelnen Fachportalen erhalten. 1.2 Technische Grundlage Die Struktur der Webseite baut auf YAML (Yet Another Multicolumn Layout) auf. YAML ist ein (X)HTML/CSS Framework zur Erstellung moderner, flexibler Layouts auf Grundlage von float-umgebungen. Dabei stehen ein Höchstmaß an Flexibilität für den Webdesigner und Zugänglichkeit für die Nutzer im Vordergrund. Es basiert auf Web-Standards, ist barrierearm, flexibel anwendungsorientiert und unter umfassend dokumentiert. Bei Anwendung dieses Styleguides ist auf die aktuellen Lizenzbedingungen zu achten: Das YAML-Framework unterstützt grundsätzlich folgende Browser: Windows Internet Explorer 5.01 Internet Explorer 5.5 Internet Explorer 6.0 Internet Explorer 7.0 Macintosh OS Safari Camino 0.6+ Linux Konqueror 3.3+ Galeon 1.3+ Epiphany Lynx (Textbrowser) Betriebssytem übergreifend

5 Firefox 1.0+ Mozilla Suite SeaMonkey 1.0+ Netscape 8.0+ Opera 6+ Ältere Browser werden in der Weise unterstützt, dass sie zwar das Layout nicht abbilden, aber die Inhalte grundsätzlich zugänglich sind. 2 Informationsarchitektur Seitenbezeichnungen (Labeling) und Seitenstruktur Die Bezeichnungen von Menüs und Seiten sollte nach einem einheitlichen Schema erfolgen. Fachportalübergreifende Menüpunkte auf erster Ebene sind Startseite, Suche, Produkte und als seitenübergreifende Menüpunkte Sitemap, Seite durchsuchen, Impressum, Förderer und Partner. Dazu kommen je nach Angebot des Fachportals weitere Menüpunkte wie zum Beispiel Themen und Hilfe. Für Bezeichnungen sollten immer Substantive verwendet werden, die den Menüpunkt möglichst treffend beschreiben. Anordnung der Informationsangebote innerhalb der Seitenstruktur Das grundsätzliche Konzept ist, die Menüstruktur von den Informationsangeboten der Fachportale zu trennen. Dabei sollte unterschieden werden nach der Anzahl der Informationsangebote, die das jeweilige Fachportal zur Verfügung stellt. Bei einer großen Anzahl von Informationsangeboten ist der Einsatz des Produktkatalogs vorteilhaft. Die Informationsangebote werden übersichtlich im Produktkatalog präsentiert und der Nutzer kann aus verschiedenen Blickwinkeln nach den Produkten suchen und die Informationsangebote dynamisch sortieren. Die Anordnung der Informationsangebote selber, auf die der Produktkatalog verweist, kann auch unter dem Menüpunkt Produkte erfolgen. Hier können sie dann, je nach Typ in die Gruppen Datenbanken, Kommunikation, Publikation oder Service einsortiert werden oder man verschiebt diese Menüpunkte auf die erste Ebene. Informationsangebote der Gruppe Datenbanken werden in den meisten Fällen direkt auf die Suchfunktionalität verweisen, können aber auch in den Menüpunkt Datenbanken einsortiert werden.

6 Ab einer mittleren Anzahl von Informationsangeboten unter sechs Modulen kann der Produktkatalog wegfallen, da hier kein Mehrwert erreicht wird. Auch hier sollten die Produkte auf erster Ebene oder zweiter Ebene im Menüpunkte Produkte in die Gruppen Datenbanken, Kommunikation, Publikation oder Service einsortiert werden. Von der Startseite kann dann darauf verwiesen werden Bei einer geringen Anzahl von Informationsangeboten zwischen einem und drei Modulen können die Module direkt in die Hauptnavigation auf erster oder zweiter Ebene eingebunden werden. Dafür kann zum Beispiel der Menüpunkt Fachinformationführer ergänzt werden. 3 Grundelemente 3.1 Layout (horizontal) Das Layout ist horizontal in folgende Bereiche eingeteilt: Topnavigation <div id= topnav >: Die Topnavigation enthält auf der linken Seite die Breadcrumb-Navigation und auf der rechten Seite die Sprachauswahl, sowie eine Möglichkeit die Textanzeige zu skalieren. Die eigentliche Seite <div id= page >bestehend aus a. dem Kopfbereich <div id= header > Dieser 100px hohe Bereich ist bestimmend für den Gesamteindruck des Portals. Hier sitzen das Logo und Claim des Fachportales mit weiteren Bildelementen die frei gestaltbar sind. Zu dem befindet sich im Kopf ein Bereich, der das Portal als Virtuelle Fachbibliothek ausweist. Dieser Bereich enthält das ViFa-Logo sowie Links zu den Förderern und Partnern und erscheint als teiltransparente Fläche in gleicher Breite wie die Randspalten (192 px) (Siehe auch Abschnitt Logo) b. der Navigationszeile <div id= nav > die ein- oder zweizeilig die Hauptnavigation enthält. c. dem Inhaltsbereich <div id= main > Hier werden alle Inhalte des Portals in verschiedenen Layoutvarianten angezeigt. Standardmäßig ist ein dreispaltiges Layout vorgesehen. Die Randspalten enthalten

7 Navigationselemente, Steuerelemente und Kurzinformationen, die mittlere Spalte den eigentlichen Inhalt. d. dem Fußbereich <div id= footer > Hier können Logos und Links zu Förderern und Partnern platziert werden. 3.2 Layout (vertikal) Dreispaltiges Layout Grundsätzlich ist für den Inhalt ein dreispaltiges Layout vorgesehen. Die linke Spalte <div id= col1 > und die rechte Spalte <div id= col2 > sind jeweils 192px breit. Die mittlere Spalte <div id= col3 > ist in seiner Breite variabel und soll immer den eigentlichen Inhalt enthalten. Die linke und die mittlere Spalte haben eine gemeinsame Hintergrundgrafik. In der Datei bg_main.psd kann diese bearbeitet werden und als.gif gespeichert werden. Die Hintergrundgrafik der rechten und der mittleren Spalte Datei kann in der Datei bg_col2.psd bearbeitet werden und als.gif gespeichert werden. Zweispaltiger Inhaltsbereich Im Musterportal: Themen > Zweispaltige Layouts Der Inhalt der mittleren Spalte kann noch einmal vertikal geteilt werden. Die linke Spalte ist dann für Bilder oder begleitende Informationen vorgesehen, die rechte Spalte für den Fließtext. Das YAML-Framework stellt hierfür drei verschiedene Teilungen in vorbereiteten Klassen zur Verfügung. 25% 75%, 33% 66% und 38% 62% Folgender Konstrukt erzeugt eine Teilung von 25% zu 75% <div class="subcolumns"> <div class="c25l"> <div class="subcr"> <img src="einbild.jpg" /> <h6>bildunterschrift</h6> </div> </div> <div class="c75r"> <div class="subcl"> <p> Der Text steht hier </p> </div> </div> </div> Für die beiden anderen Teilungen müssen lediglich deren Prozentzahlen an den rot markierten Stellen eingetragen werden. Innerhalb eines Portals sollte die Teilung nicht zu oft variiert werden. Verschiedene Teilungen sollten nicht gleichzeitig auf einer Seite verwendet werden.

8 3.3 Layoutvariationen Im Musterportal: Themen > Grundlayout Alternativen > Variante 1 Im Musterportal: Themen > Grundlayout Alternativen > Variante 2 Zweispaltiges Layout Durch Ausblenden oder Weglassen von col1 oder col2 ist auch ein zweispaltiges Layout erzielbar. Die übrig gebliebene Randspalte soll in der Breite nicht verändert werden. Die oben beschriebenen Teilungen für col3 sind auch hier möglich. 3.4 Bilder Im Musterportal: Themen Für die Einbindung von Bildern ist der Inhaltsbereich in vier Varianten vorgesehen, die im Musterportal unter Themen beispielhaft umgesetzt sind. Einspaltiger Content Im Musterportal Themen > Einspaltige Layouts In der einspaltigen Variante haben die Bilder die volle Spaltenbreite von 555px. Die Bildhöhe ist variabel. Dieses Layout eignet sich für bildlastige Inhalte, Galerien und auch für Banner. Eine optionale Bildunterschrift wird in <h6> darunter gesetzt. Zweispaltiger Content Im Musterportal Themen > Zweispaltige Layouts Die zweispaltige Variante kann in drei verschiedenen Breiteneinteilungen angelegt werden und nutzt die Standardvorgaben von YAML. Die linke Spalte ist immer die schmalere und enthält das Bildmaterial. a. In der Aufteilung 25% 75% beträgt die Bildbreite für die linke Spalte 128 px. Im Musterportal Themen > Zweispaltige Layouts > Variante 1

9 b. In der Aufteilung 33% 66% beträgt die Bildbreite für die linke Spalte 174 px. Im Musterportal Themen > Zweispaltige Layouts > Variante 2 c. In der Aufteilung 38% 62% beträgt die Bildbreite für die linke Spalte 201 px. Im Musterportal Themen > Zweispaltige Layouts > Variante 2

10 Die Bildbreite sollte nach Möglichkeit eingehalten werden, die Bildhöhe ist jeweils variabel. Eine optionale Bildunterschrift wird in <h6> darunter gesetzt. Wenn eine der Randspalten im Gesamtlayout weggelassen wird ergeben sich folgende Bildbreiten: Im Musterportal: Themen > Grundlayout Alternativen > Variante 1 Im Musterportal: Themen > Grundlayout Alternativen > Variante 2 Für die Teilung 25% 75%: 169px Für die Teilung 33% 66%: 228px Für die Teilung 38% 62%: 265px Ein ungeteilter Inhalt wird hier nicht empfohlen, da die Lesbarkeit der Texte durch die langen Textzeilen nicht mehr optimal ist. 3.5 Navigation Hauptnavigation Für die erste Ebene der Navigation steht die Menüzeile <div id= nav_main > zur Verfügung. Die CSS-Formatierung ist hierzu ist in der Datei css/navigation/nav_slidingdoor.css definiert.

11 Sie ist nach dem sliding door Prinzip aufgebaut, das heißt, die einzelnen Menüelemente sind list items <li> einer Aufzählungsliste <ul> die je eine Link beinhalten. Das den Link umgebende <li> hat eine links ausgerichtete Hintergrundgrafik mit dem linken Rand, der darin befindliche Link <a> eine rechts ausgerichtete Hintergrundgrafik mit dem rechten Rand. Beide zusammen ergeben das Erscheinungsbild eines Menüpunktes. Durch diese Konstruktion kann sich die Hintergrundgrafik eines Menüpunktes an dessen Textlänge anpassen. Der Hover-Effekt wird durch ein Verschieben der Hintergrundgrafiken per css um 150 px nach oben bei Mausberührung erzeugt. background-position: 0-150px; Der aktuelle Menüpunkt wird durch den identifier current <li id= current > markiert. Das Prinzip ist ausführlich und anschaulich beschrieben unter: und Die Datei gfx_sliding_door_vifa1.psd enthält die Vorlagen für die Gestaltung der Navigationszeile. Die Ebenen mit der Bezeichnung...farbe können mit passenden Farben aus dem Farbenset des Fachportals eingefärbt werden. Die Ebenen mit der Bezeichnung...licht erzeugen die Aufhellungseffekte, die Ebenen mit der Bezeichnung...struktur erzeugen Schatteneffekte.

12 Mit der Option Datei>für Web speichern werden die nötigen Grafiken für die Navigationszeile anhand der Slices und deren Namen erzeugt. Seitenübergreifende Links (Sitemap, Impressum, Seite durchsuchen) sitzen rechtsbündig in der Menüzeile <div id= nav_main > als zweite Aufzählungsliste <ul id= extranav > Der Aufbau entspricht den anderen Menüpunkten. Das Input-Feld der Sitesuche kann in der Datei css/navigation/nav_slidingdoor.css mit dem Stil #sitesuche_feld an die Farbigkeit der Menüzeile angepasst werden. Die Farben können kontrastarm, sich harmonisch einfügend gewählt werden. Wenn das Input-Feld im Focus ist

13 wird es mit dem Stil li:focus #sitesuche_feld auf weißen Hintergrund mit schwarzer Schrift gesetzt Subnavigation a. Zweite waagrechte Navigationszeile Im Musterportal: Suche > Einfache Suche Nach der Haupt-Navigationszeile <div id= nav_main > kann eine Sub-Navigationszeile <div id= nav_sub > hinzugefügt werden. Sie ist ebenso aufgebaut wie die Haupt- Navigationszeile. Die zugehörigen CSS-Definitionen in css/navigation/nav_slidingdoor.css haben ein vorangestelltes #nav_sub, die passende Photoshop-Vorlagendatei findet man unter gfx_sliding_door_sub_vifa1.psd b. Tiefere Navigationsstrukturen Im Musterportal: Themen Wahlweise oder zusätzlich zur zweiten Zeile kann in der linken Spalte eine weiterführende Navigation angeboten werden. Das ist sinnvoll wenn mehr als zwei Hierarchieebenen abgebildet werden müssen. Die weiterführende Navigation wird als verschachtelte Aufzählungsliste in der linken Spalte <div id="col1"> angelegt.

14 <ul id="submenu"> <li></li> <li></li> <li> <ul> </ul> </ul> </li> <li></li> <li></li> <li></li> Ein Menüpunkt wird links durch einen 8px starken Balken ausgezeichnet. Jede Navigationsebene rückt um genau die 8 px Stärke des Balkens ein. Ein + zeigt, das beim Auswählen weitere untergeordnete Punkte zu erwarten sind. <li><a href="#"><span class="plus">punkt </span></a></li> Ein - zeigt, das die Liste untergeordneter Punkte aufgeklappt ist. <li><a href="#"><span class="minus">punkt </span></a></li> Menüpunkte ohne weitere Verzweigung können mit einem Versehen werden <li><a href="#"><span class="dot">punkt </span></a></li> oder keine Markierung tragen. <li><a href="#"><span class="nix">punkt </span></a></li> Der aktuelle Menüpunkt wird durch den identifier active <li><a id= active> markiert. Die vorliegende Konstruktion ermöglicht auch mehrzeilige Menüpunkte ohne Einbußen an Übersichtlichkeit.

15 Alle Formatierungen für die seitliche Navigation bis zu einer Tiefe von fünf Ebenen sind in der Datei css/navigation/nav_vlist.css definiert. Weitere Ebenen können durch Duplizieren des Level 5 definiert werden. In dem neuen Level muss den Definitionen ein weiteres ul li hinzugefügt werden und der horizontale Versatz des Background und das padding-left aller duplizierten Styles um 8px erhöht werden. #submenu li ul li ul li ul li ul li a, #submenu li ul li ul li ul li ul li#active, #submenu li ul li ul li ul li ul li strong { width: 168px; padding-left: 32px; background: transparent url(images/vlist/vifa1/node_current.gif) norepeat 32px 0; } Die Datei node_graphics.psd enthält die Vorlagen für die Gestaltung der seitlichen Navigation Die Ebenen mit der Bezeichnung...farbe können mit Passenden Farben aus dem Farbenset des Fachportals für den Hintergrund der Menüpunkte eingefärbt werden. Der Lesbarkeit halber sollte auf genügenden Kontrast des Hintergrundes zu der Menüschrift geachtet werden. Die Ebenen mit der Bezeichnung..balken... enthalten die Grafiken für den 8px starken Balken und sollten in gutem Kontrast zum Hintergrund stehen.

16 Die Ebenen mit der Bezeichnung...licht erzeugen die Aufhellungseffekte, die Ebenen mit der Bezeichnung...struktur erzeugen Schatteneffekte. Mit der Option Datei>für Web speichern werden die nötigen Grafiken für die seitliche Navigation anhand der Slices und deren Namen erzeugt Buttons Die Grafiken für Buttons sind in der Datei button_graphics.psd angelegt. Diese ist ähnlich den oben beschriebenen Dateien aufgebaut hat aber keine Definition für current.

17 Auch hier ist der 8px breite Balken stilbildend und kann auf einer eigenen Ebene separat vom Hintergrund eingefärbt werden. Mit der Option Datei>für Web speichern werden die nötigen Grafiken für die Buttons anhand der Slices und deren Namen erzeugt. In folgenden CSS-Styles der Datei css/content.css müssen die Farben der Buttons an das Portal angepasst werden: Buttonrahmen normal: div.buttonframe { display: block; float: right; vertical-align: middle; background: url(../../images/button_l_hgr.gif) no-repeat 0 0; height: 24px; margin: px; padding: 0; border-top: 1px solid #d0d8e1;/*definiert die Farbe des oberen Randes */ border-bottom: 1px solid #a6b6c8;/*definiert die Farbe des unteren Randes */ border-right: 1px solid #a6b6c8;;/*definiert die Farbe des rechten Randes */ } Buttonrahmen Hover: div.buttonframe:hover { background: url(../../images/button_l_hgr.gif) no-repeat 0-150px; border-top: 1px solid #bec5cd;/*definiert die Farbe des oberen Randes */ border-bottom: 1px solid #a6b6c8;/*definiert die Farbe des unteren Randes */ border-right: 1px solid #789dc8;/*definiert die Farbe des rchten Randes */

18 } Buttonlink.button { color: #4D87C7;/*definiert die Farbe des Textes */ display: block; text-align: left; vertical-align: middle; text-decoration: none; border: 0px none; height: 25px; margin: px; padding: 0 5px 0 25px; background: no-repeat left; cursor: pointer; }.Buttonlink hover button:hover { color: #be2f30;/*definiert die Farbe des Textes */ } Die Icons für buttons werden in einem seperaten Stil festgelegt: #button_suche { background-image: url(../../images/icb_suche.gif); } #button_sucheverfeinern { background-image: url(../../images/icb_suche.gif); } #button_eingabeloeschen { background-image: url(../../images/icb_loeschen.gif); } Weitere Informationen zu den Icons finden sich im Abschnitt Symbole/Icons. Beispiel-HTML für einen Button: <div class="buttonframe"> <input class="button" id="button_suche" title="suchen" ="Suchen" value="suchen" type="submit" /> </div> 3.6 Typographie Schrift Der Schriftsatz font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif; ist als Standard für die gesamte Webseite definiert. Die Trebuchet MS wurde an die erste Stelle gesetzt. Sie ist auf den meisten Systemen verfügbar und bietet im Vergleich zu anderen weitverbreiteten serifenlosen Schriften wie Arial oder Verdana in größeren Größen am Bildschirm ein besseres Schriftbild. Im Vergleich zur Verdana hat sie auch eine deutlich geringere Laufweite. Eine serifenlose Schrift wurde gewählt, da in kleinen Größen die Serifen mit den üblichen

19 Bildschirmauflösungen schlecht darstellbar sind und somit ein unruhigeres Schriftbild erzeugen. Wenn das Thema des Portals eine Serifenschrift passend erscheinen lässt, so kann sie für große Überschriften <h1>, <h2> und eventuell auch für die waagrechte Navigationsleiste definiert werden. Für andere Bereiche wird es nicht empfohlen. Typographie Textblöcke halten grundsätzlich einen Abstand von 10px zu benachbarten Objekten um deren Lesbarkeit nicht zu beinträchtigen. Die Schriftgröße ist mit 75% der browserüblichen 16px Höhe auf 12px Höhe eingestellt. Bei der Farbgestaltung ist darauf zu achten, dass ein ausreichender Kontrast zwischen Schrift und Hintergrund vorhanden ist. Jeder Text/Sinnabschnitt einer Seite sollte mit einer Überschrift <h2></h2> beginnen. Bildunterschriften werden mit <h6> ausgezeichnet. 3.7 Links Links im Text werden folgendermaßen gekennzeichnet: Link im laufenden Text <p><a>... Link auf externe Seiten <p><a class= externlink >... Link mit Mailto-Funktion <p><a class= maillink >... Link zu Datenbank oder Datensammlung <p><a class= dblink >... In der css/screen/content.css sind hierzu die Styles festgelegt. Die Icons sind als Hintergrund-Grafiken des <a> Tags definiert. Für den Hover-Effekt werden die Hintergrundgrafiken um 50px nach oben verschoben. Die dazugehörigen Grafik-Vorlagen sind in der icons.psd zu finden. Die Links sollten in der Grundfarbe des Portals gefärbt sein. Für die Hover-Darstellung kann die Zweit- oder Schmuckfarbe verwendet werden. 3.8 Logo Das Logo kann im Kopfbereich weitgehend frei platziert werden. Zu beachten ist, dass die Hintergrundgrafik des Kopfbereiches auch für die Anzeige bei vergrößerter Schrift und dadurch breiterer Seite ausreichend breit ist oder alternativ nahtlos in die Hintergrundfarbe des Kopfbereiches übergeht. Die Datei kopf.psd bietet eine Layoutvorlage. Beispiel: Logo links,vifa-block rechts, das Hintergrundbild verläuft nach links in die weiße Hintergrundfarbe.

20 Beispiel: ViFa-Block links, Logo halbrechts (die linke kante von bio fluchtet mit der linken Kante der rechten Spalte), Hintergrundbild flächig zweifarbig. Beispiel: ViFa-Block links, Logo rechts, keine Hintergrundgrafik Beispiel: Logo links,vifa-block rechts, das Hintergrundbild ist größer als der sichtbare Bereich 3.9 Farbwelt Die Farbwelt des Portals sollte sich aus dem sonstigen Erscheinungsbild der Fachbibliothek wie zum Beispiel dem Logo ableiten. Es sollte eine Grundfarbe, eine Zweitfarbe und optional eine Schmuckfarbe festgelegt werden. Diese Farben können für Hintergründe, Buttons etc. in der Helligkeit variiert werden. Grundfarbe Zweitfarbe Schmuckfarbe Farbe Variationen Variationen in Bitmaps Für die Farbvariationen lassen sich keine pauschalen Richtwerte angeben, da deren Wirkung von der Ausgangsfarbe abhängt. Gelbtöne z.b. neigen beim Abdunkeln zum Verschmutzen. Hier ist ein wenig Augenmaß angebracht. Es muss darauf geachtet werden, dass - besonders in den Bereichen mit viel Textanteil - ein ausreichender Kontrast zwischen Hintergrund und Schriftfarbe vorhanden ist.

21 3.10 Symbole/Icons In den Photoshop-Dateien icons.psd und icons_button.psd sind Symbole vorbereitet, die an die Farbwelt des Portals angepasst werden können. Die Datei icons.psd enthält ein weitreichendes Icon-Set für Dateiformate, Funktionen und Links. Zum Anpassen an die Farbwelt sind nur die drei Ebenen hintergrund, hauptfarbe und zweitfarbe neu einzufärben. Hierzu muss in Photoshop die Vordergrundfarbe auf die gewünschte Farbe eingestellt werden, eine der Ebenen ausgewählt werden und mit den Tasten [alt]+[backspace] die Ebene mit der Farbe gefüllt werden. Für die Ebene hauptfarbe eignen sich eher zurückhaltende, gedecktere Farben aus dem kühlen Spektrum, für die zweitfarbe eignen sich eher aktive, kräftige Farben aus dem gelbrot Spektrum. Eventuell müssen Hauptfarbe und Zweitfarbe/Schmuckfarbe des Portals hier vertauscht werden um eine gute Darstellung zu erzielen. Die Ebene hintergrund muss die Hintergrundfarbe des Portals bekommen. Die Ebene weiss enthält die rein weißen Anteile der Icons und soll nicht umgefärbt werden. Das Ebenenset farbige zusätze enthält die unveränderlichen Farbanteile der Icons wie z.b. die EZB-Ampel. Alle Icons dieser Datei haben eine Höhe von 16px, aber eine variable Breite. Mit Datei>für Web speichern können alle Icons als.gif exportiert werden.

22 Der angegebene Dateiname ist nicht relevant, da die Dateinamen aus den Namen der einzelnen Slices erzeugt werden. Sie sind so gewählt, dass sie eine grundsätzliche Auskunft über die Funktion des Icons geben. Es ist darauf zu achten, das alle Benutzer-Slices ausgewählt ist, sonst bekommt man zusätzlich ca. 200 leere.gif-dateien. Beispiele für Farbvarianten: Im Musterportal verwendete Variante: Dunkelblaue Hauptfarbe, rote Zweitfarbe, Hintergrund weiß: Andere Farbkombinationen: Grüne Hauptfarbe, orange Zweitfarbe, Hintergrund weiß:

23 Graue Hauptfarbe, blaue Zweitfarbe, Hintergrund weiß: Hier ist das kühle Blau aktiver als das Grau Dunkelrot/braune Hauptfarbe, Rote Zweitfarbe, Hintergrund orange:

24 Icons für Datentypen und Dateiformate Icons für Aktionen

25 Icons für Datenbanken und Datenquellen. Icons für Diskussionsfunktionen Icons zur Information

26 Icons zur Navigation Sonstige Icons Icons für Textlinks

27 Buttonicons Die Datei cms/icons_button.psd enthält die Buttons des Portals. Der Aufbau ist ähnlich der oben beschriebenen Datei. Zu beachten ist hier, dass der Hintergrund entsprechend der Buttons gefärbt sein muss um Farbsprünge zu vermeiden. Das heißt die Ebene button:normal farbe muss so gefärbt sein wie der Hintergrund der Buttons in der Datei button_graphics.psd (die Ebene normal farbe ). Alle exportierten Icons dieser Datei haben icb_ als Prefix im Dateinamen um sie von den Andern unterscheiden zu können. Icons für Navigationsbuttons:

28 Icons für Formular- und Listenbuttons Allgemeine Icons für Buttons Icons für Buttons in Trefferlisten

29 3.11 Einfache Suchmaske Im Musterportal: Suche > Einfache Suche Die einfache Suche bietet differenziertere Eingabemöglichkeiten als die Suchzeile der Startseite. Sie enthält neben dem Eingabefeld Überall die Möglichkeit nach Schlagwörtern, Titel, Personen, Institutionen und Jahr zu suchen. Die Zeile Überall entspricht der Suchmöglichkeit der Startseite und sucht in allen darunter aufgeführten Bereichen. Aus diesem Grund ist sie durch einen etwas dunkleren Hintergrund und einen größeren Abstand zur nächsten Zeile abgehoben. Die Farbigkeit der Suchmaske kann in der Datei formline.psd festgelegt werden. Sie ist nach dem gleichen Prinzip wie die vorangegangenen Beispiele aufgebaut. Die Zuweisung der Hintergründe geschieht in der css/screen/content.css in den Styles.formline_1,.formline,.formline_x {...}.formline_1 {...}

30 Der stilbildende, 8px breite linke Rand der Eingabefelder kann in der Datei bg_textinputframe.psd in gleicher Weise bearbeitet werden und ist im Stil.textinputframe{} der gleichen css-datei festgelegt. Die Checkbox alle Wörter ist standardmäßig ausgewählt und erzeugt eine und-verknüpfung der eingegebenen Wörter. Wird diese Option abgewählt wird mit einer oder-verknüpfung gesucht Erweiterte Suchmaske Im Musterportal: Suche > erweiterte Suche Für die erweiterte Suche werden grundsätzlich die gleichen Stilelemente verwendet. Für jede Zeile kann hier im der Suchbereich individuell definiert werden und die einzelnen Zeilen mit und oder oder verknüpft werden. Die Einträge einer Zeile können wie in der einfachen Suche mit alle Wörter mit und oder oder verknüpft werden. Darüber ist eine Filtermatrix gestellt, die die Suche bzw. die Ergebnisausgabe auf bestimmte Informationstypen, Datenbanken oder Sprachen einschränken kann.

31 Die Tabs der Filtergruppen sind im Aufbau identisch mit der horizontalen Navigation. Sie css-styles hierzu sind ebenfalls in der Datei css/navigation/nav_slidingdoor.css zu finden. Die notwendigen Grafiken können mit der Datei gfx_sliding_door_tab_vifa1.psd nach dem beschriebenen Muster erzeugt werden. Die Filtergruppen werden mit Hilfe des Javascripts js/tabs.js ein- und ausgeblendet. Es kann auch mehrmals auf einer Seite eingesetzt werden. Der Aufruf onclick="showtab('filtertab',1,3)" markiert zum Beispiel aus der Gruppe filtertab Tab 1 und blendet den zugehörigen Content ein. Alle anderen Inhalte der Gruppe filtertab werden ausgeblendet. Folgende Konventionen müssen dabei beachtet werden: Alle Elemente bekommen eine eigene id, die mit dem Gruppennamen beginnt. Im vorliegenden Beispiel ist der Gruppenname filtertab. Die Tab-ID s werden der Reihe nach durch eine Zahl ergänzt, die dazu gehörenden Inhalte mit content und der entsprechenden Zahl. <li id="filtertab1"></li><li id="filtertab2"></li><li id="filtertab3"></li> <div id="filtertabcontent1"></div> <div id="filtertabcontent2"></div> <div id="filtertabcontent3"></div> Das Skript weist den Elementen der Gruppe neue Styles zu..current markiert ein Tab,.notcurrent stellt den Normalzustand wieder her. Diese Styles sind in der Datei css/navigation/nav_slidingdoor.css zu finden..tabvisible macht den entsprechenden content sichtbar,.tabshidden blendet den entsprechenden content aus. Diese Styles sind in der Datei css/screen/content.css zu finden. Die nicht zu zeigenden Inhalte werden erst nach dem Laden der Seite per Javascript ausgeblendet. Somit ist gewährleistet, dass auch User ohne Javascript alle Optionen erreichen können. <body onload="showtab('filtertab',1,3)">

32 3.13 Trefferliste Im Musterportal: Suche > Suchergebnisse Demo Typisch für die Trefferliste ist der 4px starke Balken, der die Angaben zu einem Treffer zusammenfasst. Die Photoshop-Vorlage hierzu ist die Datei balken.psd. In der linken Spalte stehen die Treffernummer und die Checkbox für weitere Funktionen. <h2> <input type="checkbox"></input> 1 </h2> In der rechten Spalte stehen: - das Icon für den Dokumenttyp, - der Titel des Treffers, - eine Kurzbeschreibung/Inhaltsangabe, - Die wichtigsten Daten wie Erscheinungsjahr, Dokumenttyp und Datenbank, - Icons und Buttons zum weitern Umgang mit dem Treffer. <h2> <img src="images/icons/buch.gif" alt="buch" /> <a href="#" class="titellinkopen">titel</a> </h2> <p>inhaltsbeschreibung</p> <p>erscheinungsjahr: 1996 Dokumenttyp: Buch Datenbank: <a href="#" class="dblink">solis</a></p> <h4> <a href="#" title="kaufen" > <img src="images/icons/kaufen_hi.gif" alt="kaufen" /> </a> <a href="#" title="click and Buy"> <img src="images/icons/clickandbuy.gif" alt="download"/> </a> <a href="#" title="ezb"> <img src="images/icons/ezb_rot.gif" alt="ezb" /> </a> </h4>

33 Wie und welche Daten hier abgebildet werden hängt von den gelieferten Daten ab und muss auf das jeweilige Portal angepasst werden Dubletten Im Musterportal: Suche > Suchergebnisse Demo > Suchergebnisse Dubletten Dubletten werden mit einer zweiten, durchgehenden senkrechten Linie gekennzeichnet. Die Photoshop-Vorlage hierzu ist ebenfalls in der Datei balken.psd. Um diese Darstellung zu bekommen wird um die mehrfachen Treffer ein <div class= dubletten >... </div> gelegt. Mit dem style.dubletten.c90r.subcl{...} bekommt jeder Treffer innerhalb dieses Bereiches in seiner rechten Spalte das Bild /images/balken_doublette_hgr.gif als Hintergrund zugewiesen. Die Lücken zwischen den Treffern werden gefüllt indem dem gesamten Bereich <div class= dubletten > ebenfalls diese Hintergrundgrafik zugewiesen wird. Die css-styles hierzu finden sich in der css/screen/content.css. Suche Verfeinern In der rechten Spalte kann die Suche innerhalb der Kategorien der erweiterten Suche verfeinert werden. Der Aufbau entspricht weitgehend der oben beschriebenen vertikalen Sub-Navigation. <h4>verfeinern Sie Ihre Suche:</h4> <ul class="navigator_title"> <li>informationstyp <ul> <li><a href="#">literatur (686)</a></li> <li><a href="#">forschungsprojekte (22)</a></li> <li><a href="#">institutionen (4)</a></li> </ul> </li> </ul> Die Grafiken hierzu sind in der Datei verfeinern.psd zu finden.

34 3.14 Vollanzeige Im Musterportal: Suche > Suchergebnisse Demo > Suchergebnisse Dubletten Über der Vollanzeige eines Treffers steht dessen Titel in einer <h2> Überschrift. In der Vollanzeige werden sämtliche vorhandene Informationen zu einem Treffer tabellarisch angezeigt. In der linken Spalte steht der Name des Eintrages wie z.b. Quelle, Autor, Erscheinungsjahr, Dokumenttyp, Verfügbarkeit usw. In der rechten Spalte der Eintrag selbst. Die Darstellung der linken Spalte ist in diesem Stil festgelegt:.metadatadescription{ vertical-align: top; text-align: right; } Die 1px starke Trennlinie zwischen den Spalten ist als linker Rand der rechten Spalte im folgenden Stil festgelegt:.metadatavalue{

35 vertical-align: top; border-left: 1px solid #136; padding-left: 0; } Die 4 px starke Linie eines Eintrags ist als linker Rand eines darin befindlichen Absatzes definiert:.metadatavalue p{ vertical-align: top; border-left: 4px solid #f5a719; padding-left: 5px; } Diese Stile sind in der Datei css/screen/content.css zu finden und können dort farblich angepasst werden. Es können auch mehrere Vollanzeigen auf einer Seite untereinander angezeigt werden Inhaltsverzeichnisse Im Musterportal: Suche > Produkte > Publikation Für Inhaltsverzeichnisse kann die gleiche Struktur verwendet werden wie sie unter Subnavigation beschrieben wird Produktkatalog Im Musterportal: Suche > Produkte > Produktkatalog Auch für Produktkataloge kann die gleiche Struktur verwendet werden wie im Abschnitt Subnavigation beschrieben.

36 3.17 Module für die Startseite Kurzpräsentation der Fachbibliothek Für eine kurze Beschreibung des Portals eignet sich ein Textblock in der mittleren Spalte. Er kann in der oben beschriebenen Art ein oder zweispaltig verwendet werden. Hier sollte darauf geachtet werden nicht zu viel Text einzusetzen, sondern besser mit Links zu einem tieferen Inhalt zu führen.

37 Suchzeile Für einen möglichst einfachen Zugang zu den Angeboten eines ViFa-Portals gibt es auf der Startseite die einfache Suchzeile als Schnellsuche. Sie entspricht im Aufbau der ersten Zeile der einfachen Suche, hat aber eine Aufteilung von Text zu Suchfeld von 33% zu 66% und statt der Option alle Wörter direkt den Suchen -Button in derselben Zeile Kurzpräsentation von Themen oder Themenkategorien im Überblick Um einen schnellen Überblick über Themen oder Themenkategorien des Portals zu bieten eignet sich der Quickinfoblock in der linken Spalte <div class="quickinfoblock">. Der Titel des Blocks wird in <h2> gesetzt, die Überschriften der Themen werden in <h4> gesetzt. Der Kurztext wird in einen Absatz <p> gesetzt. Die weiterführenden Links bedürfen keiner weiteren Auszeichnung. <div class="quickinfoblock"> <h2> Unser Portal: </h2> <h4>fachinformationsführer</h4> <p> Kurzer Text <br> <a href="#">mehr...</a> </p> </div>

38 Anzeige von RSS-Feeds Zur Auszeichnung von Links zu RSS-Feeds steht ein Icon zur Verfügung: <p> </p> <a href="#rss"> <img src="images/rss_klein.gif" alt="rss-feed"/> RSS-Feed Abonnieren </a> News/ Aktuelles Der Titel des Newsblock wird in <h2> gesetzt, die Überschriften der Themen werden in <h4> gesetzt. Das Newsdatum kann mit einem Link zu dem Artikel versehen werden. Der Kurztext wird in einen Absatz <p> gesetzt. Die weiterführenden Links bedürfen keiner weiteren Auszeichnung. <div class="newsblock"> <h2> News </h2> <a href="#"> :26</a> <h4>neue Partner für LOGO</h4> <p> Kurzer Text <br> <a href="#">mehr...</a> </p> </div>

39 Partner-Logos Die Logos von Partnern und Förderern finden im Fußbereich Ihren Platz. Wenn weiterreichende Informationen zu den Förderern und Partnern vorhanden sind, so sollte man die Logos mit einem Link dorthin versehen Anmeldenbox Auch für eine Anmeldebox sind die beschriebenen Strukturen verwendbar: <div class="newsblock"> <h2> Mein LOGO </h2> <form method="post" action="#" > <h6><input type="text" name="usrid"> Login</h6> <h6><input type="text" name="passw"> Passwort</h6> <input type="button" value="go"></input> </form> </div>

40 3.18 Flyer Für die Präsentation von neuen Virtuellen Fachbibliotheken oder neuen Funktionen im Fachportal wurde ein Flyer für den Druck oder die Versendung online entwickelt. 4 Beispielseiten Auf den folgenden Seiten werden die aus den Grundelementen zusammengesetzten Beispielseiten gezeigt.

41 4.1 Gesamter Portalauftritt, die Startseite

42 4.2 Suche Einfache Suche

43 4.2.2 Erweiterte Suche

44 4.2.3 Trefferliste

45 4.2.4 Vollanzeige

46 4.3 Anzeige von redaktionellen Inhalten

47 4.4 Blättern im Produktkatalog