Die fertige Website ist auf dem Webspace students.idv.jku zu finden: http://students.idv.edu/~0956155/

Anmerkung: Lediglich die Szene "Student" beinhaltet ein Video. Für alle anderen Szenenbilder wurde kein Video produziert.

Beim Umsetzen des Drehbuchs wurde auf die Szenen an der Uni (Hörsaal, Fahrrad) verzichtet.

Die Videobearbeitung erfolgte mit Apple iMovie. Als Schriftart wurde wiederum die frei verfügbare Open Sans (Condensed) verwendet.

Das Video wurde aufgrund optimaler Performance und Verfügbarkeit auf YouTube hochgeladen.


http://www.youtube.com/watch?v=aZq_F1IvJWY

Folgend das Drehbuch für die Videoproduktion mit einzelnen Szenen als Storyboard. Im gesamten Video werden auf Schwenks verzichtet, alle Szenen werden mit statischer Kameraposition gedreht. Es wird mit schnellen Schnitten gearbeitet werden. Weiters wird im gesamten Video auf Sprache verzichtet.

1) Schwarzer Bildschirm - ein Auge geht auf, man sieht einen Universitätshörsaal aus dem Blickwinkel eines Studenten.

Blende auf die Tafel

2) An der Tafel schreibt der beschäftigte Professor seine letzten Zeilen der Vorlesung. Sein Blick ist Richtung Tafel gerichtet.

Blende auf den Studenten

3) Der Student - gerade aus einem Kurzschlaf aufgewacht - blickt noch etwas verschlafen drein. Seine Lernutensilien sind über sein Pult verteilt.



Blende auf die Uhr

4) Die Uhr zeigt eine volle/halbe Stunde - das Ende der Lehrveranstaltung.

Blende auf die Tasche des Studenten

5) Der Stunden räumt seine Lernutensilien in die Tasche und schließt diese.

Blende auf den Stiegenaufgang

6) Der Student - mit dem Rücken der Kamera zugewandt - hängt sich die Tasche um, geht die Stufen rauf und verlässt den Hörsaal.



Blende auf ein sein Fahrrad

7) Der Student steigt auf sein Fahrrad und fährt los.

Blende auf seine Wohnungstür (von innen)

8) Der Student öffnet die Tür und betritt die Wohnung

Blende auf die Couch

9) Der Student lässt sich erschöpft auf die Couch fallen



Blende auf seine Geldtasche

10) Der Student hält seine Geldtasche in den Händen - das Fach für Banknoten ist leer.

Blende auf die Hosentaschen

11) Der Student ziet die Hosentaschen heraus - beide sind leer.

Blende auf den Studenten

12) Der Student macht ein trauriges Gesicht

Blende auf Schwarz - eine Stimme fragt: "Studenten haben's schwer. Kennst du das auch?" - das FINITI Logo erscheint - die Stimme sagt: "Finiti hilft dir zu jederzeit Überblick über deine Finanzen zu behalten und sagt dir genau wann du wo sparen solltest, damit du nicht auf den nächsten Urlaub, die nächste Party, oder auf das nächste Event verzichten musst"

Blende auf den Studenten

13) Der Student macht ein glückliches Gesicht

Das Finiti Logo erscheint - die Stimme sagt: "Das Studentenleben ist zu kostbar um sich um sein Geld zu sorgen - Finiti - Finanzverwaltung für jedermann - einfach einfach!"

Blende auf Schwarz

Ende des Videos



Als Hintergrundmusik zum Video wird N35-40-19-800 des Künstlers springtide verwendet. Free Music Archive bietet Musik unter der Creative Commons Lizenz zur freien Verwendung an.

Das von mir erstellte Video wird folgender Handlung folgen:

Ein Student sitzt in der Lehrveranstaltung. Die Lehrveranstaltung ist beendet, er packt seine Sachen, steigt auf sein Rad/in sein Auto und fährt heim. Zuhause angekommen lässt er sich geschafft auf die Couch fallen. Er holt seine Geldbörse heraus und blickt hinein, sie ist leer. Er zieht seine Hosentaschen heraus, die auch leer sind. Er blickt verzweifelt in die Kamera. Eine Stimme frag, ob du diese Situation als Student auch kennst. Die Stimme erklärt, wie FINITI einem Studenten hilft mit seinem wenigen Geld auszukommen.

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")