Example h1

Example h2

Example h3

Example h4

Layout-Vorgaben für APOG

Diese Seite exitiert nur während der Entwicklungsphase des Projekts. Im fertigen Produkt wird sie nicht mehr enthalten sein, ihre Exitenz erleichtert aber die Arbeit am Projekt.

Zwei verschiedene Layouts

Es gibt zwei ähnliche, aber doch verschiedene Layouts, die in zwei verschiedenen Gültigkeitsbereichen verwendet werden:

• Öffentlicher Bereich Das sind alle Seites der Website, die aufgerufen werden können, ohne dass man sich einloggen muss. Dazu gehört natürlich die Homepage, aber auch Seiten, die allgemeine Informationen über APOG, die Projektpartner oder den Datenschutz bereithalten. Im öffentlichen Bereich dominieren vor allem große Logos und es gibt für diese Logos auch ausreichend Platz. Der Navigationsbereich befindet sich in einer Zeile direkt unter dem Header.
• Arbeitsbereich Das sind alle Seites der Website, die man nur erreichen kann, wenn man eingeloggt ist. Der Header ist weniger hoch als im öffentlichen Bereich, wodurch nur mehr eine kleinere Version des APOG-Logos Platz hat. Andere Logos gibt es gar nicht mehr. Der Navigationsbereich befindet sich am linken Rand.

Opake Farben

Hintergrund	Vordergrund		Beschreibung
2C3E50 2C3E50	2C3E50	2C3E50	Dunkelblau
138D75 138D75	138D75	138D75	Dunkelgrün (Logo, Überschriften, Hervorhebungen im Text)
1ABC9C 1ABC9C	1ABC9C	1ABC9C	Hellgrün (Logo, Überschriften)
9A3032 9A3032	9A3032	9A3032	Dunkelrot (vorerst nur Logo)
CE4043 CE4043	CE4043	CE4043	Hellrot (vorerst nur Logo)
7F8C8D 7F8C8D	7F8C8D	7F8C8D	Mittelgrau (Footer-Text)
CCCCCC CCCCCC	CCCCCC	CCCCCC	Hellgrau2 (Rahmen von Footer und Login-Fenster)
F0F0F0 F0F0F0	F0F0F0	F0F0F0	Hellgrau1 (Footer-Hintergrund, Login-Hintergrund)
FFFFFF FFFFFF	FFFFFF	FFFFFF	Weiß (Haupt-Hintergrund, Text auf dunklem Hintergrund)

Transparente Farben

Verwendung der Farben

Farbe	Code	Verwendung
Dunkelblau	2C3E50	Überall: Hintergrundfarbe des Headers und Schriftfarbe des Fließtexts. Im öffentlichen Bereich: Schriftfarbe eines aktivierten Links in der Navigationszeile Im Arbeitsbereich: Hintergrundfarbe des User-Menüs (rechts oben) und Hintergrundfarbe des aktiven Menüpunktes in der Navigationsspalte (linker Rand)
Dunkelgrün	138D75	Überall: Eine der vier Farben aus dem Logo, Überschriften, hervorgehobener Text Im Arbeitsbereich: Hintergrundfarbe des User-Menüs (rechts oben) und Hintergrundfarbe des aktiven Menüpunktes in der Navigationsspalte (linker Rand)
Hellgrün	1ABC9C	Überall: Eine der vier Farben aus dem Logo Im öffentlichen Bereich: Schriftfarbe im Header, Hintergrundfarbe der Navigationszeile Im Arbeitsbereich: Hintergrundfarbe der Meldungs-Zeile.
Dunkelrot	9A3032	Überall: Eine der vier Farben aus dem Logo Im öffentlichen Bereich: Im Arbeitsbereich:
Hellrot	CE4043	Überall: Eine der vier Farben aus dem Logo Im öffentlichen Bereich: Im Arbeitsbereich:
Mittelgrau	7F8C8D	Überall: Im öffentlichen Bereich: Im Arbeitsbereich:
Helles Grau	CCCCCC	Überall: Im öffentlichen Bereich: Im Arbeitsbereich:
Sehr helles Grau	F0F0F0	Überall: Im öffentlichen Bereich: Im Arbeitsbereich:
Weiß	FFFFFF	Überall: Schriftfarbe für Links im Navigationsbereich. Im öffentlichen Bereich: Im Arbeitsbereich: Schriftfarbe in der Meldungszeile, Farbe des Schließ-Symbols der Meldungszeile (✕ ganz rechts)
40% Schwarz	00000066	Überall: Im öffentlichen Bereich: Im Arbeitsbereich:

Textformatierungen

Alle Texte verwenden die Schriftart Helvetiva. Wenn Helvetica nicht vorhanden ist, soll Arial verwendet werden. Wenn beide nicht verfügbar sind, soll die im Browser registrierte sans-serif-Schriftart verwendet werden.

In CSS:
font-family: 'Helvetiva','Arial', sans-serif;

TODO: Beschreibung weiterer Formatierungen.