Navigation
Logo network academy GmbH

 

 

network academy GmbH

Design

Zielsetzungen und Hintergründe zu diesem Site-Entwurf Version 1.0

Ziel war die Entwicklung eines universellen html-Seiten-Designs.

CSS, HTML und XML-Schema Validierungsstatus Stand 31.08.2010 21:37 :

CSS-Validierungsstatus für CSS-Level 2.1 und CSS-Level 3.0: OK.

CSS ist valide!

HTML-Validierungsstatus für XHTML 1.0 Strict: OK.

CSS ist valide!

XML Schema Validator beanstandet img-Tags und Kommentare.

An element with an empty content model should use an empty-element tag.

XML parsers are permitted to silently remove the contents of comments. Therefore, you should not use comments to "hide" scripts or style sheets

XML Schema geprüft!

Bemerkung:

Dieser Text befindet sich im Container .ContentTop. Dieser ist rechts vom Navigationsmenü .NavBar positioniert und dient zur Kurzübersicht von Seiteninhalten - beispielsweise der Titelseite einer Website oder einer Dokumentation. Das Floating von .ContentTop und .NavBar wird mit .ClearFloat beendet. Die nachfolgenden Inhalte befinden sich im Container . Content.

Text Wettervorhersage Winnenden

Warnlagen herausgegeben vom Deutschen Wetterdienst

PS: XHTML 1.0 Strict sieht kein Target Tag mehr vor. Die Argumentation ist, dass es dem User selbst überlassen bleibt, in welchem Fenster Links geöffnet werden.
Text Text Text
Text Text Text

Tabelle 1:

Tabelle mit dynamisch skalierenden Grafiken.

 

--> Hier Ende Container .ContentTop 

--> Hier beginnt Container .Content

Entwurfskriterien

Die nachstehenden Kapitel zeigen die Entwurfsüberlegungen und vermitteln einen Eindruck von ihrer Realisierung.

Grafik

Die grafischen Anforderungen bestehen darin, dass sich Form und Inhalt ergänzen und nicht miteinander konkurrieren. Funktionalität und Ergonomie des Designs unterstützen die Zielsetung und berücksichtigen ins Besondere die im Jahr 2010 üblichen Bildschirmformate und Auflösungen.

Technik

Die technischen Anforderungen beziehen sich primär auf die visuellen Ausgabemedien. Kleinstdisplays, aber auch hochauflösende Großmonitore, sowie unterschiedliche Systeme mit unterschiedlichen Darstellungsstandards (PC beispielsweise Fontgröße 96 dpi, Mac 72 dpi ) sollen immer eine optisch gelungene Darstellung präsentieren. Auch typografische Anforderungem (z.Bsp. Schriftarten oder Textgrößen-Einstelungen in den Browsern) sollte die Technik berücksichtigen.

Weitere technische Anforderung war ein sinnvoll angepasster Ausdruck der Bildschirmdarstellung. So wurden Maßnahmen implementiert, die beispielsweise Seitenwechsel an sinnvollen Stellen vornehmen oder für den Druck nicht benötigte Elemente - wie die Dokumenten-Navigation - ausblenden.

Dokument-Navigation

Die Navigation innerhalb einer Seite ist mit Dokument-Navigation bezeichnet. Sie wurde in Form eines Java-Script gesteuerten Klappmenüs realisiert. Dieses befindet sich fest an der rechten unteren Ecke des Browserfensters und kan mit einem Click auf die Titelleiste ein- und ausgefahren werden. Beim Aufruf der Seite ist dieses Menü standardmäßig eingeklappt, um bei kleinen Displays freie Sicht auf die Seiteninhalte sicherzustellen.

Bemerkung:

Bei hohen Auflösungen und großen Fenstern ist das Lesen der Seiteninhalte besonders komfortabel. Das Dokument-Navigations-Menü befindet sich dann außerhalb des Seiteninhalts. In dieser "Betriebsweise" empfiehlt sich auch entweder die Textgröße im Browser auf "größer" zu stellen oder mit der Zoom-Funktion der neueren Browser die gesamte Seite vergrößert darstellen zu lassen.

 

Überschrift Ebene 3

The quick brown fox jumps over the lazy dog 1234567890.

 

Folgende Grafik skaliert dynamisch via .dynimg

 

placeholder

Abb. 1

Die png-Datei dieses Bildes hat in eine Auflösung von 300  dpi und die Abmaße 1024x640 Pixel.

Überschrift Ebene 4

The quick brown fox jumps over the lazy dog 1234567890. The quick brown fox jumps over the lazy dog 1234567890. The quick brown fox jumps over the lazy dog 1234567890.

 

Nummerierte Liste

  1. The quick brown fox
  2. The quick brown fox
  3. The quick brown fox
    1. The quick brown fox
    2. The quick brown fox
    3. The quick brown fox
    4. The quick brown fox
      1. The quick brown fox
      2. The quick brown fox
      3. The quick brown fox
      4. The quick brown fox
      5. The quick brown fox
  4. The quick brown fox
  5. The quick brown fox

Bulletliste

 

Text

Text Text Text
Text Text Text
Text Text Text

Tabelle 2:

Tabelle mit dynamisch skalierenden Grafiken.

Beim Druck sollten die Bilder bzw. die dynamische Größe der Tabelle begrenzt werden, um ein "Auseinanderlaufen" zu verhindern.

 

Imax 2000 und ESB

Text

Text

 Text

Tabelle 3:

Tabelle mit dynamisch skalierenden Grafiken.

 

 

network  academy  GmbH - IT-Services, Projects and Consulting