WME 2010 - XHTML und CSS
Die Aufgabe der Studenten war es, einen Oberflächenprototyp des fiktiven Fotoportals "StockAssociates" als XHTML-Seite zu erstellen. Die Besonderheit lag darin, die Seiten mittels CSS so zu gestalten, dass dieselbe Seite auf unterschiedlichen Ausgabemedien (Web, Print, Mobilgerät) unterschiedlich und jeweils angemessen angezeigt wird.
Aus der Aufgabenstellung...
Das Fotoportal Stock Associates bietet ein einfaches Portal für Fotografen. Diese können hier ihre Bilder hochladen und im Gegenzug die Bilder anderer Benutzer nutzen. Für ein Redesign des Portals soll nun zunächst ein UI-Prototyp erstellt werden. Als Grundlage soll ein beispielhafter Ausschnitt aus der Datenbank dienen.
Ihre Aufgabe ist es, Mockups für das neue Design von Stock Associates zu entwickeln. Sehen Sie verschiedene Ansichten für Standard-PCs und mobile Endgeräte vor. Dabei sind folgende Funktionen des Portals mit je zwei Entwürfen (PC/Mobil) abzudecken:
- Nutzer können durch vorhandene Bilder browsen, dabei kann nach vergebenen Tags gefiltert werden. Der Entwurf sollte eine Liste von Bildern anzeigen und aktive Tags visualisieren.
- Ein Nutzer kann Bilder hochladen und für andere Nutzer freigeben, er erhält dafür Credits. Im Entwurf soll das Uploadformular zu sehen sein. Außerdem soll zu sehen sein, wie viele Credits der Nutzer für das Hochladen bekommen wird.
- Erhaltene Credits kann man wiederum einsetzen, um Bilder anderer Nutzer im Vollformat herunterzuladen. Dabei fallen je nach Bildgröße unterschiedliche „Kosten“ an. Der Entwurf soll den „Kauf“ eines Bildes zeigen.
- Stock Associates bietet eine Druckfunktion, mit der Benutzer einen Katalog aller Bilder ausdrucken können. Diese Schnittstelle wird auch von PhotonPainter genutzt, um die Daten auszulesen und zu übernehmen. Aus diesem Grund darf die XHTML-Struktur dieser Seite nicht geändert werden, sämtliche Anpassungen müssen per CSS erfolgen.
Prämierte Ergebnisse
Sascha Huth und Georg Rolf Brummund
Benjamin Schneider und Björn Bussewitz
