User:Anastasiya/Interface Design/Activearts

From Medien Wiki
< User:Anastasiya‎ | Interface Design
Revision as of 19:42, 30 September 2012 by Anastasiya (talk | contribs) (Created page with "==Activearts== [http://activearts.de ActiveArts] ist ein persönliches online Protfolio. Die darin dargestellten Arbeiten sind in vier Bereiche unterteilt: Interface Design, Per...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Activearts

ActiveArts ist ein persönliches online Protfolio. Die darin dargestellten Arbeiten sind in vier Bereiche unterteilt: Interface Design, Performing Art, Free Working und Video & Animation. Diese Bereiche unterscheiden sich farblich voneinander.

Aufbau und Stuktur

Die Startseite besteht nur aus einem Menü mit folgenden Punkten:

- About - Contact - Interface Design - Preforming Art - Free Working und - Video & Animation

Diese Punkte sind als Rechtecke dargestellt. Zu diesen gehören weitere Rechtecke, die farblich zu ihnen passen und zufällig generiert werden. Dies sind einzelne Arbeiten, von denen man den ersten Eindruck bekommen kann, wenn man über das jeweilige Rechteck mit der Maus hovert. Außerdem gibt es zusätzlich Rechtecke ohne farbliche Füllung. Diese ergänzen das gesamte Bild, haben aber keine weitere Bedeutung.

Startseite

Die Startseite, also auch die Navigation ist immer präsent. Klickt man einen Menüpunkt an, so öffnet sich ein Fenster eine Ebene über der Startseite und der Hintergrund wird leicht ausgeblendet. Das geöffnete Fenster ist entweder ein div oder ein iframe und ist leicht wegzuklicken, indem man auf eine beliebige Stelle außerhalb klickt.

About

Da zu jedem Überpunkt mehrere Arbeiten gehören, kann man sich durch diese im jeweiligen iframe-Fenster durchklicken.

Works

Der Inhalt der iframes wird von einem 2-spaltigen Layout dominiert. Auf der linken Seite befindet sich immer ein großes Bild und auf der rechten kleine Thumbnails, die man anklicken kann. Über den Vorschaubildern befindet sich ein Text mit der Beschreibung der Arbeit / des Projekts.

Umsetzung

Die Webseite wurde mit HTML, CSS, Javascript / jQuery und PHP umgesetzt. Fast alle Elemente auf der Startseite werden mit Javascript generiert, so entsteht bei jedem Laden ein neues Bild. Auch die iframes werden mit Hilfe von DOM zur HTML-Seite hinzugefügt. Das Scrollen der Arbeiten in der Box, sowie das Durchschauen Bildergalerie ermöglicht jQuery. Das Kontakt-Formular wurde mit PHP umgesetzt.