WME 2011 - XHTML, HTML5 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 und diese nach vergebenen Tags filtern, d.h. 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, d.h. im Entwurf soll das Uploadformular zu sehen sein. Außerdem soll zu sichtbar sein, wie viele Credits ein 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, d.h. der Entwurf soll den „Kauf“ eines Bildes sowie die zugehörigen „Kosten“ 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.

Der Entwurf sollte jeweils als gültige XHTML- und HTML5-Variante erstellt werden. Für beide Varianten sollte je eine Version für PC und eine für mobile Endgeräte (Smartphone) existieren, egal, ob in Form verschiedener Dateien oder mit Hilfe individueller CSS-Formatierung

Prämierte Ergebnisse

Konstantin Klamka und Thomas Schmalenberger: XHTML-Version | HTML5-Version
Marcus Kirsch und Benny Thomä: XHTML-Version | HTML5-Version