Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Wanna crash my trash?

Das Browserfenster als Müllpresse

die Idee

Meine Idee war es, das Verkleinern des Browserfensters mit dem physikalischen Prozess des Zerdrückens in Verbindung zu bringen. Ich habe dazu den Browser mit einer Müllpresse gleichgesetzt. Der Inhalt der Seite ist dementprechend der Inhalt eines Mülleimers.

Auf der Webseite stehen drei Objekte (Coladose, Teepackung und Milchpackung) zur Auswahl, welche jeweils einzeln durch Browsergrößenveränderung geschrottet werden können. Die drei Müllobjekte sind dabei alle im gleichen Größenverhältnis dargestellt.

background_basic_big.pngbackground_basic_big.png

die Umsetzung

Die Struktur des Codes ist recht simpel. Zum Einsatz kommen Media Queries, welche je nach Browserbreite ein bestimmtes Bild laden. Ein java-preloader soll dabei für eine ruckelfreie Interaktion sorgen.
Großen Zeitanspruch hat außerdem das Anfertigen und bearbeiten der Fotos genommen. Beim Fotografieren musste ich besonders darauf achten, dass sich die Objekte nicht zu sehr in die Höhe falten, da dieses dann in der Webseite ein Verschwinden hinter dem oberen Browserrand bedeuten würde. Problematisch wird es jedoch trotzdem bei kleineren Monitorauflösungen, da die Bilder für eine sehr hohe Auflösung angepasst wurden.

makingof.pngmakingof.png

Sollte kein moderner Browser parat sein gibt es hier ein Video.

der Effekt

Das Zerdrücken der Objekte macht (mir) großen Spaß. Durch die recht großen und detaillierten Fotos und die Möglichkeit, die Geschwindigkeit des Stauchungsprozesses selber zu bestimmen wird der Vorgang beinahe real bzw. spürbar.

Außerdem ist es sehr spannend die stattfindenden Veränderungen der Objekte genau zu beobachten. Zum Beispiel ab wann sich Risse bilden Risse oder wann Material abplatzt.

Einen anderen interessanter Effekt bietet die Start- bzw. Auswahlseite. Wird die Maus über eines der drei Objekte bewegt, tritt dieses hervor. Dabei verändern sich auch Licht- und Farbschatten der anderen Objekte.

browser2.pngbrowser2.png

das Fazit

Der Kurs gab einen guten Einblick in die Syntax von html, css und javascript. Durch kleinere Zwischenaufgaben und schließlich dem Abschlussprojekt konnte ich meine bereits vorhandenen Kenntnisse ausbauen und somit sicherer im Umgang damit werden.

Die Arbeit am Projekt war sehr spaßig. Die Kombination von Fotografie und Code bzw. das Übertragen des Realen in eine Webseite war eine spannende Erfahrung.

Link zur Seite:

http://interface.fh-potsdam.de/Users/web_basics/Martin_von_Lupin/crashTheCan/index.html oder http://martinvonlupin.de/sub/crashmytrash/index.html

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto:

Entstehungszeitraum

Wintersemester 2011 / 2012