Als Schriftart für die Webseite wird "Open Sans", verfügbar in Google Fonts, verwendet.

Eingebunden wird die Schriftart mit folgendem Befehl im HTML-Header:


<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>


Somit steht sie als "font-family" für CSS Deklarationen zur Verfügung:


article h2 { font-family: 'Open Sans'; font-weight: 400; ... }


Um den Scrolleffekt von Section zu Section beim Klick auf einen Button zu ermöglichen, verwende ich die Open Source JavaScript Bibliothek jQuery.

jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML. [...] jQuery is free, open source software, licensed under the MIT License. jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications.

- jQuery (Wikipedia)

Folgender Code ermöglicht das Scrollen von Section zu Section:


<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {

function goToByScroll(id) {
id = id.substring(0, id.indexOf("-"));
$('html,body').animate({scrollTop: $("#"+id).offset().top}, 1000);
}

$(".scroll-link").click(function(e) {
// Prevent a page reload when a link is pressed
e.preventDefault();
goToByScroll($(this).attr("id"));
});
});
//]]>
</script>


Ein beispielhafter Button, der den jQuery Code aufruft sieht folgendermaßen aus:


<a id="second-link" class="scroll-link" href="#">...</a>


Was passiert nun im jQuery Code?

1. Es wird ein Click-Listener auf alle HTML-Elemente mit der Klasse "scroll-link" gesezt.
2. Beim Click auf einen solchen Link wird die Funktion "goToByScroll" mit dem Wert des Attributs "id" als Übergabeparameter aufgerufen.
3. In der Funktion wird der übergebene String beschnitten, sodass nur noch der Teil vor dem Ersten Auftreten von "-" übrig bleibt.
4. Abschließend wird die jQuery Funktion "animate" aufgerufen und zum Element mit der ID (=beschnittene Zeichenkette) innerhalb von x (hier 1000) Millisekunden gescrollt.

Zur professionellen Gestaltung des HTML Codes der Website verwende ich das Open Source CSS/JavaScript Framework Twitter Bootstrap.

Twitter Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface components, as well as optional JavaScript extensions.

- Twitter Bootstrap (Wikipedia)

Dieses Framework erleichtert das Erstellen von Webseiten durch professionell aufgebaute CSS Klassen für:

• prinzipielles Layout der Website (siehe "Saffolding")
• Standard HTML5 Tags (siehe "Base CSS")
• Formulare und Controls (siehe "Components")
• clientseitige Webseitenprogrammierung durch JavaScript (siehe "JavaScript")

Veranschaulichung des Parallax Scrolling Effekts (Quelle: Wikipedia)

Der Parallax Scrolling Effekt bedient sich einer optischen Täuschung, wobei durch das unterschiedlich schnelle Bewegen von Vordergrund und Hintergrund die Illusion von Dreidimensionalität geschaffen wird.

Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion.

- Parallax scrolling (Wikipedia)

Dieser Effekt wird in der Medientechnik schon seit vielen Jahren verwendet, durchaus bekannte Beispiele hierfür sind zweidimensionale Computerspiele (siehe Super Mario, etc.).

Die Anwendung dieses Effekts für Webseiten ist eher neu, da der notwendige Fortschritt der Rechenkapazität und Browserkompatibilität erst in den letzten 1-2 Jahren eingetreten ist. Ein durchaus beeindruckendes Beispiel der Anwendung dieses Effekts bietet Nike mit der Darstellung ihrer Air Jordan Produktserie. Dieses Beispiel ist eines, das die heutigen Möglichkeiten der Multimedialität in Browsern ausreizt, vorallem wenn man bedenkt, dass hierbei völlig auf den Einsatz von Flash verzichtet wird.

Für meine Webseite werde ich den Effekt natürlicherweise etwas weniger effektvoll einsetzen. Ich orientiere mich an einem online verfügbaren Tutorial, das unter http://richardshepherd.com/smashing/parallax/ zu finden ist.

Technisch realisiert wird der Effekt durch den Einsatz von JavaScript, das die Berechnung der Positionierung der Elemente übernimmt. Auch berechnet und verändert wird die Positionierung der Hintergrundgrafiken der Sections. Mit dem Parameter/Attribut data-speed="..." wird für eine Section bestimmt um welchen Faktor sich der Hintergrund schneller bewegen soll als er Vordergrund, was eben durch das Verändern der Positionierung der Hintergrundgrafik erreicht wird.

Das erstes Konzept für die Webseite weicht von den anfänglichen Überlegungen ab.

Zu allererst wurde angedacht die Stimmungsbillder der 4 Szenarios (beschrieben in der Überarbeitung des Projektvorschlags) in einer horizontalen Gallerie anzuzeigen, wie man sie häufig auf Webseiten von Nachrichtendiensten findet.


Beispiel für Gallerieansicht - Content in Rot dargestellt, Navigation in Blau

In der letzten Zeit findet man einen alternativen Ansatz wenige aber wichtige Inhalte eindrucksvoll darzustellen: Sektionen.

Hierbei bedient man sich dem HTML5 Tag "Section":

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Eine ausführliche Beschreibung des <section> Tags findet man hier: http://www.impressivewebs.com/html5-section/

Der folgende Entwurf soll darstellen, wie sich die FINITI Webseite gliedern soll. Der Entwurf lehnt sich an die Gestaltung der Webseite http://www.mindbreeze.com/ an.

Im oberen Bereich der Seite wird das FINITI Logo mit einer grundlegenden Navigation platziert. Eine vollständige Bildschirmhöhe darunter beginnt die erste Section (Section 1). Darin wird mit einem eigenen hochauflösenden Hintergrundbild ein neuer Abschnitt der Webseite begonnen. Für den Benutzer soll der Eindruck erweckt werden, dass er sich hier auf einer eigenständigen Seite befindet. Der Unterschied ist jedoch, dass er nicht durch das Klicken eines Links auf diese eigenständige Seite kommt, sondern durch vertikales Scrollen auf einen eigenständigen Bereich derselben Seite kommt.

Auf diese erste Section können beliebig viele weitere folgen (obwohl eine zu hohe Anzahl wohl der Grundidee des Konzepts nicht wirklich entsprechen würde). In meinem Fall werden 4 Sections für die 4 Stimmungsbilder verwendet werden.

In den einzelnen Sections werden Inhalte (Texte, Bilder, Videos, ...) individuell in Boxen dargestellt. Es muss sich sectionübergreifend nicht um eine einheitliches Layout handeln (da ja der Eindruck der Eigenständigkeit des Inhalts erweckt werden soll).

Nach der letzten Section wird in einem Footer-Bereich die bekannten abschließenden Inhalte einer Webseite angezeigt: Impressum, Kontakt, etc.


Schematische Darstellung des Webseitenentwurfs

Zum effektvollen Wechseln zwischen den Sections werde ich mir dem Parallex Scrolling Effekt bedienen, der zwar noch nicht weit verbreitet, aber erfolgreich auf modernen Webseiten eingesetzt wird.

Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion.

- Parallax scrolling (Wikipedia)