[03] Fr, 18.11.2016

Die heutige Veranstaltung geht auf zwei Themen ein: Informationsarchitektur und Navigation auf Websites sowie technische Zusammenhänge des World Wide Web.

Absolut notwendig: Verständliche Navigationselemente auf Websites
Abbildung 3.3.1 - Absolut notwendig: Verständliche Navigationselemente auf Websites

Ziele

  • die Bedeutung einer begründeten Informationsarchitektur für Websites verstehen
  • Aufbau und Formatierung von Menüs und Navigationen in HTML/CSS verstehen und umsetzen können
  • Chrome Developer Tools kennen und zielgerichtet einsetzen
  • den Zusammenhang der Kommunikation zwischen Client und Webserver kennen und verstehen

Inhalte

  • Listen in HTML und CSS
  • Navigationen und Benutzerführung auf Webseiten
    • Informationsarchitektur
    • Layout
    • Usability
  • Geschichte, technische Komponenten und Zusammenhänge des World Wide Web (WWW)

Auftrag

  1. Erweitern Sie Ihr bisheriges HTML-Konstrukt um eine Navigation. Voraussetzung dafür ist, dass Sie auch entsprechende Unterseiten haben.
    • Analyse: Schauen Sie sich bekannte Webseiten1 im Hinblick auf die Navigation an:
      • Wieviele Navitationsbereiche gibt es?
      • Welches Ordnungssystem liegt den Bereichen zugrunden, also: Welche Arten von Einträgen befinden sich wo?
      • Wie ist die Navigation angeordnet, vertikal, horizontal?
      • Was passiert mit der Navigation, wenn Sie in der Seite scrollen?
      • Wie verändert sich die Navigation auf mobilen Endgeräten? Sie können das mit Google Chromium testen.
      • Welches HTML-Markus liegt der Navigation zugrunde, welches CSS?
      • Halten Sie Ihre Erkenntnisse fest, wir werden in der folgenden Sitzung darauf eingehen.
    • Anfertigung: Bauen Sie eine eigene Navigation für Ihre Website.
      • Nehmen Sie sich nicht zu viel vor! Gerade an der Navigation können Sie einige grundlegende Konzepte von HTML und CSS erarbeiten und verstehen lernen.
      • Machen Sie sich ggf. vorher eine Skizze auf Papier oder mit einem Tool, das Sie gut beherrschen, um festzulegen, wie die Navigation aussehen soll.
      • Vorschlag zum Spaß haben: Arbeiten Sie "im Auftrag"! Lassen Sie sich von einer Kommilitonin oder einem Kommilitonen vorschreiben, wie sie oder er die Navigation gern hätte. Dabei lernen Sie, sich mit dem "Kunden" auszutauschen und auf Anregungen und Kritik zu reagieren.
  2. Veröffentlichen Sie Ihre Website im World Wide Web!
    • Da sich in unserem Veranstaltungszusammenhang ergeben hat, dass einer mit einem Raspberry Pi "Provider spielt", veröffentlichen Sie zunächst Ihr aktuelles Konstrukt auf diesem Rechner. Der Vorgang ist nicht trivial, wenn man das noch nie gemacht hat. Gehen Sie es daher mit Ruhe und Präzision an. Folgende Fragestellungen sollen Sie leiten:
      • Was ist "das Internet"?
      • Worin besteht der Unterschied zwischen Internet und World Wide Web (WWW)?
      • Wie muss ein Gerät beschaffen sein, das am Internet teilnehmen soll?
      • Welche Software ist notwendig, um ein HTML-Dokument im WWW zu veröffentlichen?
    • Machen Sie zu allem, was Ihnen einfällt, Notizen (Begriffe, Konzepte, Handlungen etc.)
1. Analysieren Sie nicht nur "die Großen", denn dort ist meist eine sehr spezielle Technik im Einsatz, die viel Vorwissen erfordert. In den bekannten sozialen Netzwerken und Webshops kommt in der Regel JavaScript zum Einsatz, um die User Experience (UX) zu verbessern. Schauen Sie sich also auch Seiten vom Sportverein und vom Bäcker um die Ecke an. ↩

Quellen

Bücher

  • Jacobsen, J. (2014). Website-Konzeption: erfolgreiche Websites planen, umsetzen und betreiben (7., überarb. und Aufl.). Heidelberg: Dpunkt.
  • Duckett, J. (2013). HTML & CSS: erfolgreich Websites gestalten & programmieren. München u.a.: Pearson.
  • Friedman, V. (2009). Praxisbuch Web 2.0: moderne Webseiten programmieren und gestalten. (2., aktualisierte und Aufl.). Bonn: Galileo Press. S. 221-228.

Web

results matching ""

    No results matching ""