September 1, 2011 0

Eine Virtuelle Kunstgalerie

By in Datenbanken, JavaScript, MySQL, PHP, Webdesign

Vor längerer Zeit habe ich einmal eine Webseite für eine befreundete Künstlerin gestaltet. Ziel war es die Gemälde der Künstlerin richtig wirken zu lassen und da war mir eine schnöde Auflistung der Kunstwerke einfach zu wenig ansprechend. Aus diesem Grund hatte ich mir etwas besonderes ausgedacht: Eine virtuelle Galerie. Umgesetzt wurde das Ganze mit allem, was die Webprogrammierung zu bieten hat: PHP, JavaScript CSS und natürlich HTML. Eine wichtige Bedingung war allerdings, dass die Bilder selbst dann angezeigt werden, wenn im Browser der JavaScript-Interpreter deaktiviert wurde.

Technisch ist die Online-Galerie folgendermaßen aufgebaut:

Bestandteile der virtuellen Kunstgalerie

Bestandteile der virtuellen Kunstgalerie


Die Website ist in mehrere Frames aufgeteilt. Das mittlere Frame beinhaltet die Galerie.
Der Trick ist nun, dass in diesem Frame eine HTML-Seite eingebunden wird. Diese HTML-Seite bindet ihrerseits ein Bild ein, das mit ca. 3000px wesentlich breiter ist, als das Frame drumherum. Dadurch ergibt sich der optische Effekt, der Besucher sähe sich in der Galerie um.

Um die Galerie noch ein wenig attraktiver zu gestalten, habe ich ein kleines JavaScript geschrieben, dass in einen gemäßigten Tempo die Galerie bis zum Ende „abspult“. Dieser automatische Wiedergabe erlaubt es dem Besucher sich zurück zu lehnen und die Kunstwerke ganz auf sich wirken zu lassen.

Ein wenig kompliziert wurde die Implementierung eines Play-Buttons, da dieser in einem anderen Frame, als die eigentliche Galerie untergebracht wurde. Gelöst habe ich dieses Problem, indem der Galerie-Seite ein Wert übergeben wird, der repräsentiert, ob sich diese im Abspielmodus befindet. Der Wert wird mittels PHP ausgelesen ($_GET) und interpretiert.

Virtuelle Galerie Hoover-Effekt Infobox

Infobox mit CSS-Hoover-Effekt

Last-but-not-least sollte es dem Besucher möglich sein, Informationen über ein Kunstwerk angezeigt zu bekommen, wenn er die Maus darüber bewegt. Ein Klick auf das Kunstwerk sollte ihm dann eine Seite mit den Details zum Kunstwerk anzeigen. Dies wurde per CSS-Hoover-Effekt umgesetzt: Immer wenn der Nutzer den Mauszeiger über ein Gemälde bewegt, wird in der Nähe ein DIV-Container mit ein paar Informationen angezeigt.
Die Informationen (wie z.B. die Maße oder der Preis) werden mittels PHP aus einer MySQL-Datenbank ausgelesen.

Google hat im Februar 2011 das Google Art Project vorgestellt. Hier ist das Ganze in 3D umgesetzt worden. Ich finde allerdings, dass das Navigieren durch die virtuelle Galerie ein wenig zu sehr von den Kunstwerken ablenkt.

Virtuelle Galerie Google Art Project

Grafik: Google(c) Art Project 2011

Auch die niedrige Auflösung wird den Gemälden nicht gerecht. Ich bin schon ein wenig stolz, meine Umsetzung bereits 2007 online gestellt zu haben: Nimm Das, Google!!!

So schön ich meine virtuelle Galerie immernoch finde: Heute würde ich trotzdem ein paar Dinge anders machen:

 

  • Der Einsatz von Frames ist aus SEO-Gesichtspunkten nicht ideal
  • Die CSS-Styles sollten der Übersicht halber in eine externe Datei ausgegliedert werden
  • Den Einsatz von Sounds in Webseiten lehne ich inzwischen eher ab (wer will schon, dass es im Büro plötzlich los dröhnt?)

Hier können Sie sich die Online-Galerie übrigens in Aktion ansehen: Galerie der Künstlerin Franziska Bank

Leave a Reply