[03] Montag, 24. April 2017
Die heutige Veranstaltung geht auf zwei Themen ein: Informationsarchitektur und Navigation auf Websites sowie technische Zusammenhänge des World Wide Web
Ziele
- die Bedeutung einer begründeten Informationsarchitektur für Websites verstehen
- Aufbau und Formatierung von Menüs und Navigationselementen in HTML/CSS verstehen und umsetzen können
- Chrome Developer Tools kennen und zielgerichtet einsetzen
- die Kommunikation zwischen Client und Webserver anhand des Versands von HTML-Formularen verstehen
Geplante Inhalte und Ablauf
- Fragen & Feedback zum Arbeitsauftrag
- Grundlagen des HTTP-Protokolls
- Chrome Developer Tools
- Vorbesprechung Projekt (INF2)
- Einführung in das 6-Zeiler-Exposé
- Vorstellung verschiedener Lernmaterialtypen (INF1)
- Besprechung und Festlegung der Referatsthemen
Empfohlene Lernhilfen
Bücher
Die Literaturangaben sind ein Ausschnitt aus der Zoterogruppe.
- 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
Eine Zusammenstellung weiterer Lernmaterialien findet sich hinten im Skript
Listen, Menüs und Navigationselemente
- Listamatic | systematisches Onlinetutorial zur Gestaltung von Listen als Menüs und Navigationselemente. Veraltet, in den Grundlagen der Formatierung von HTML-Listen immer noch gültig.
- CSS Navigation Bar | Erstellung horizontaler und vertikaler Navigationsleisten mit CSS
- Create a Nav Bar | HTML & CSS Tutorial | Videotutorial
- Simple Horizontal Navigation | Videotutorial und Transkript
Zur Funktionsweise des Internets
- Die Maus erklärt das Internet | Wenn auch sehr unwissenschaftlich, so doch ein Klassiker
- The Birth of the Web | Website des CERN mit einer anschaulichen Aufbereitung der Entstehungsgeschichte
- Wie Tim Berners-Lee das Web erfand | deutschsprachiger Artikel aus dem Tagesspiegel
- The World Wide Web in Plain English
- How the Internet Works in 5 Minutes
Zur Client-Serverkommunikation per HTTP(S)
Das in der Veranstaltung durchgeführte Experiment ist in den Materialien dokumentiert.