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.
- 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 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.
- 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.
Das Ergebnis muss folgende Anforderungen erfüllen:
- Der Entwurf soll jeweils als gültige XHTML- und HTML5-Variante erstellt werden. Fü̈r beide Varianten soll je eine
Version für PC und eine für mobile Endgerä̈te (Smartphone) existieren. Ob sie Desktop- und Mobilversion durch verschiedene
Dateien, oder mit Hilfe individueller CSS-Formatierung umsetzen ist Ihnen überlassen.
- Verwenden Sie ausschließlich CSS zur Formatierung der Seiten und keine <font>, <b> oder ähnliche Tags. Nutzen
Sie in der HTML5-Variante semantische Elemente (z.B. <header>, <article>, <aside>, usw.)
- Die Katalog-Druckansicht (in XHTML) muss sich streng an das vorgegebene XHTML-Template halten. Die Formatierung sollte
mittels CSS erfolgen.
- Wählen Sie aus den mitgelieferten Bildern mindestens 15 zur Verwendung in den Entwürfen aus. Achten Sie dabei darauf,
Sonderfälle (z.B. extrem breite Bilder) zu berücksichtigen.
- Das XHTML-Ergebnis sollte CSS 2.0 nutzen und in den Browsern Firefox 3.6 und Internet Explorer 8 lauffähig (und optisch
ansprechend) sein. Die HTML5-Lösung sollte die Möglichkeiten von CSS 3.0 nutzen und in Firefox 3.6 sowie Internet
Explorer 9 funktionieren.
- Alle verwendeten Bestandteile müssen entweder Public Domain sein oder die erforderlichen Nutzungsrechte müssen schriftlich
vorliegen.
Abzugeben sind:
- Quellen (z.B. als gepacktes Verzeichnis)
Tipp: Überlegen Sie sich zunächst ein Farb- und Designschema für das Portal, bevor Sie an die Umsetzung gehen, am besten auf Papier.
So lassen sich Änderungen leicht durchführen und verschiedene Entwürfe gut vergleichen.
Farben
Exercise / Task
