Authors
Authors


Konstantin Klamka
Matrikel-Nr.: 3473666
Website: KonstantinKlamka.com

Thomas Schmalenberger
Matrikel-Nr.: 3527239
Screendesign
Screendesign


Farben

Logo

#ececec
#e6e6e6
#e3e3e3
#d5d5d5
#cecece
#b3b2b2
#dee0ef
#ced2e9
#c5cae6
#a3add9
#919ed2
#4269b6
#000000
#ffffff


Auszug Piktogramme

Icon Set
Frameworks
Frameworks


jQuery
Website: jquery.com
License: MIT, GPL

jQuery User Interface
Website: jQueryUI.com
License: MIT, GPL
Used in: Print (Slider)

Google Map API
Website: Google.com
License: Terms
registered: KonstantinKlamka.com
Used in: Detail (Map)

Contained Sticky Scroll
Website: www.echoenduring.com
License: Free for personal and commercial works.
Used in: Advanced Search (Sidebar), Print (Sidebar)
W3C
World Wide Web Consortium Validation

Result: passed
Addresses: index.html,index-search.html, detail.html, stockAssociatesTemplate.html, about.html
Encoding: utf-8
Doctype: XHTML 1.0 Transitional
Root Element: html
Root Namespace: http://www.w3.org/1999/xhtml
CSS Validation: CSS ist valide!
XHTML Validation: Valid XHTML 1.0 Transitional

MMT Exercise / Task


University: University of Technology Dresden
Faculty: Computer Science
Institute: Institute of Software- and Multimedia-Technology
Educ. Chair: Heinz-Nixdorf endowed chair for Multimedia-Technology
Lecture: Advanced Web Engineering
Professor: Prof. Dr.-Ing. Klaus Meißner
Term: Summer Term 2011
Task: 1a.) XHTML, HTML5 and CSS
Reader: Stefan Pietschmann
Tutor: Stephan Pampel

Redesign des Fotoportals „Stock Associates“

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.