Aufgabe 2: Statische Website (10 Punkte)

Sie beginnen Ihr erstes Webentwicklungsprojekt mit der Erstellung eines Prototypen, um einen potentiellen Kunden von Ihren Fähigkeiten zu überzeugen. Es gibt in diesem Stadium noch keine Programmlogik und kein ausgefeiltes Design. Eine statische Website mit grundlegender, aber ansprechender Formatierung ist der Startpunkt. Die Übungsaufgabe besteht aus 3 Teilen.

Kontext

Die (fiktive) Firma Supero Un.Ltd. vermittelt Superhelden aus der Umgebung, um Menschen bei Aufgaben im Alltag helfen. Das Unternehmen ist an Sie herangetreten, um seinen Webauftritt überarbeiten zu lassen und hat eine Liste mit Anforderungen vorbereitet.

Gewünschte Seiten

• Startseite mit kurzer Vorstellung des Unternehmens
• Tabelle aller 18 verfügbaren Helden mit Name, Foto und Preis pro Stunde
• Kontaktformular, das folgende Elemente enthält:
  • Dropdown-Menü mit einer Liste aller 18 Helden
  • Eingabefeld für die E-Mail-Adresse des Kunden
  • Eingabefeld für die zu verrichtende Aufgabe
  • Textfeld für etwaige Sonderwünsche
• Impressum
• separate Steckbriefe für die einzelnen Helden mit Name, Foto, Preis pro Stunde, besonderen Qualitäten und aktuellem Verfügbarkeitsstatus
• FAQ – Liste der häufig gestellten Fragen
• Menü auf allen Seiten, über das die anderen Seiten erreicht werden können

Allgemeine Bearbeitungshinweise

Die Website, die Sie hier erstellen sollen, wird dem Kunden als Entscheidungsgrundlage dienen, ob Sie den Auftrag bekommen, oder nicht. Das heißt einerseits, dass sie im Rahmen Ihrer Möglichkeiten ansprechend gestaltet sein soll, und andererseits, dass sie gewisse Lücken aufweisen darf.

• Ihre Gestaltungsmöglichkeiten und HTML-Kenntnis wird sich durch die dritte Lehreinheit am 25.10.2017 deutlich steigern. Deswegen sollten Sie sich in der ersten Woche v.a. mit Teilaufgabe 1 beschäftigen. Teile 2 und 3 sind leichter zu bearbeiten, wenn Sie den dritten Lehrvortrag gehört haben -- natürlich können Sie auch schon vorher damit beginnen, da die Aufgaben nur anspruchsvoller, aber bei weitem nicht unmöglich sind.
• Zu Demonstrationszwecken reichen die Steckbreife von drei Superhelden aus.
• Das Kontaktformular muss nur die Eingabe von Daten ermöglichen, diese aber nicht absenden und weiterverarbeiten müssen.
• Textuelle Inhalte dürfen Sie sich für alle Seiten zusammenfantasieren.
• Die Namen und Fotos der 18 Superhelden können Sie z.B. diesem Paket entnehmen.
  • Achtung: Wenn Sie die Bilder aus diesem Paket in Ihre Webseite einbinden, beachten Sie bitte die Datei licenses.txt: Die meisten Bilder sind als CC-0 freigegeben und können ohne Einschränkung und Nennung des Urhebers verwendet werden; einige andere hingegen unterliegen der Lizenz CC-BY-2.0. Für diese Bilder müssen Sie die Herkunft angeben, z.B. im alt- oder title-Attribut des entsprechenden img-Tags, oder etwa so.

0. Vorbereitung

Die folgenden Punkte gelten für diese wie für allen folgenden Aufgaben.

• Legen Sie auf f4 ein neues Git-Repository für diese Aufgabe an, geben Sie dem Dozenten (Nutzername zieris) Zugriffsrechte und klonen Sie das Repository auf Ihren Arbeitsrechner. Legen Sie alle Arbeitsergebnisse in Ihrem Git-Repository ab (git push nicht vergessen!).
• Sorgen Sie außerdem dafür, dass Ihre Website unter http://home.htw-berlin.de/~s0xxxxxx/ erreichbar ist. Es steht Ihnen frei, ob Sie dafür ein Deployment-Skript verwenden wollen (siehe erste Aufgabe).

1. Entwicklung einer inhaltlich vollständigen Website

• Legen Sie im Arbeitsverzeichnis pro Seite ein HTML-Dokument an, d.h. für die Startseite (typischerweise index.htm genannt), Heldenübersicht, drei Heldensteckbriefe, Impressum, Kontakformular und FAQ. Beginnen Sie jeweils mit dem Standard-HTML5-Grundgerüst.
• Überlegen Sie pro Seite welche HTML-Elemente geeignet sind, um die Kundenwünsche standardkonform umzusetzen. Schlagen Sie im Zweifelsfall die konkrete Verwendung von Elementen nach.
  • Tipp: Auf der letzten Folie des zweiten Lehrvortrages finden Sie einige Einstiegspunkte.
• Setzen Sie die Website komplett um, sodass alle Seiten mit angemessenen Inhalten gefüllt sind und die Website insgesamt benutzbar ist (d.h. keine toten Links, keine Sackgassen, ...).
  • Tipp: Um Ihren aktuellen Entwicklungsstand zu testen, brauchen Sie sie nicht nach jeder Änderung auf einen Webserver zu deployen. Stattdessen können Sie das zu testende HTML-Dokument (also etwa die index.htm) direkt von der Festplatte in Ihrem Webbrowser öffnen, indem Sie sie z.B. von Ihrem Dateibrowser in den Webbrowser ziehen. Dem Webbrowser ist es letztlich (fast) egal, ob ein HTML-Dokument von einem Webserver ausgeliefert wurde, oder über einen lokalen Dateizugriff geöffnet wurde.

2. Optische Aufwertung

• Fügen Sie folgenden Inhalt in jedes Ihrer HTML-Dokumente, jeweils zwischen <head> und </head>, ein:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  • Tipp: Sie brauchen diese Zeilen im Detail noch nicht verstehen. Im Rahmen dieser Übungsaufgabe reicht es zu wissen, dass Ihre Website dadurch weniger "altbacken" aussieht, weil Sie jetzt Bootstrap eingebunden haben.

• Ebenfalls in jedem HTML-Dokument umschließen Sie den gesamten Inhalt des body-Elements mit einem div-Element und weisen diesem die Klasse container zu:

  <body>
    <div class="container">
      ... Ihr Seiteninhalt ...
    </div>
  </body>

• Scrollen Sie ein wenig durch die Dokumentation von Bootstrap, um einen Eindruck davon zu bekommen, welche einfach umzusetzenden Darstellungsmöglichkeiten Bootstrap bietet. Nutzen Sie das class-Attribut, um bestimmte HTML-Elemente hervorzuheben. Die Klasse bg-info etwa fügt z.B. einem Absatz (p) einen hellblauen Hintergrund hinzu.

• Überlegen Sie, an welchen Stellen Ihrer Website sich Hervorhebungen lohnen würden. Finden Sie passende Bootstrap-Klasse und ergänzen Sie Ihre HTML-Elemente um das entsprechende class-Attribut.

  • Tipp: Schauen Sie konkret z.B. in folgenden Abschnitten der Bootstrap-Doku: Typography, Tables, Forms, Images, Helper Classes

3. Responsiveness & Semantisches Markup

Bildschirmplatz kann eine knappe Ressource sein. Im dritten Schritt sollen Sie sparsam damit umgehen.

• Sorgen Sie dafür, dass weniger wichtige Informationen Ihrer Website auf kleinen Geräten (d.h. Smartphones und Tablets) nicht angezeigt werden.
  • Tipp: Schauen Sie wiederum in der Bootstrap-Dokumentation nach, konkret im Abschnitt Responsive utilities. Die Entscheidung, welche Informationen "weniger wichtig" sind, liegt letztlich bei Ihnen. Eine Idee könnten z.B. die besonderen Qualitäten der Helden sein.
• Spätestens im dritten Lehrvortrag haben Sie "semantisches Markup" kennengelernt. Überlegen Sie, welche der in HTML5 neu eingeführten Elemente zur Dokumentstrukturierung Sie auf Ihrer Website sinnvoll einsetzen können und setzen Sie Ihre Ideen um.

Zusätzliche Ideen

Sie können über die obigen Punkte hinaus Ihre Website noch verfeinern. Hier dazu eine Idee:

• Die Heldenübersicht soll nicht als starre Tabelle umgesetzt werden, sondern jeder Held durch eine Art Visitenkarte dargestellt werden. Je nach Größe des Anzeigemediums sollen mehr oder weniger Karten nebeneinander dargestellt werden: Desktop: 6 Karten; Laptop: 4; Tablet: 3; Smartphone: 1 Karte