The URI of TUHH Docker Registry changed from "docker.rz.tu-harburg.de:5000" to "docker.rz.tu-harburg.de". Please update your gitlab-ci.yml files if you use images from this registry.

Commit 6b116bad authored by Axel Dürkop's avatar Axel Dürkop

Update Content

parent 8f904e0c
......@@ -22,8 +22,11 @@
* [Fahrplan](sitzungen/fahrplan.md)
* [[01] 2017-04-03](sitzungen/01-Mo-2017-04-03.md)
* [[02] 2017-04-10](sitzungen/02-Mo-2017-04-10.md)
* [Arbeitsauftrag INF1](sitzungen/02-auftrag-inf1.md)
* [Arbeitsauftrag INF2](sitzungen/02-auftrag-inf2.md)
* [Arbeitsauftrag INF1](sitzungen/02-Mo-2017-04-10-auftrag-inf1.md)
* [Arbeitsauftrag INF2](sitzungen/02-Mo-2017-04-10-auftrag-inf2.md)
* [[03] 2017-04-24](sitzungen/03-Mo-2017-04-24.md)
* [Arbeitsauftrag INF1](sitzungen/03-Mo-2017-04-24-auftrag-inf1.md)
* [Arbeitsauftrag INF2](sitzungen/03-Mo-2017-04-24-auftrag-inf2.md)
## Material
* [Webtechnologien](material/webtechnologien.md)
......@@ -34,10 +37,12 @@
* [Blogs und Webseiten](material/typen/blogs.md)
* [Online-Kurse](material/typen/kurse.md)
* [Interaktive Plattformen](material/typen/interaktive.md)
* [Screencasts](material/typen/screencasts.md)
* [Screencasts & Videos](material/typen/screencasts.md)
* [Lernleitfäden](material/typen/lernleitfaden.md)
* [Spickzettel](material/typen/cheatcheets.md)
* [Sonstige](material/typen/sonstige.md)
- [Sitzungsmaterial](material/sitzungsmaterial/einleitung.md)
- [Experiment: Client-/Serverkommunikation](material/sitzungsmaterial/analyse-client-server.md)
## Referenzen
* [Literatur](material/literatur.md)
......
{
"base_path": "https://fizban05.rz.tu-harburg.de/itbh/veranstaltungsskript-inf-sose2017/",
"plugins": [
"image-captions", "downloadpdf", "-search"
"image-captions",
"downloadpdf",
"-search",
"fancybox"
],
"pluginsConfig": {
"image-captions": {
"align": "left",
"caption": "Abbildung: _PAGE_LEVEL_._PAGE_IMAGE_NUMBER_ - _CAPTION_",
"caption": "Abbildung: _PAGE_IMAGE_NUMBER_ - _CAPTION_",
"images": {
"1.1.4": {
"skip": true
......
......@@ -5,37 +5,47 @@ Im folgenden Beispiel wird beschrieben, wie man die Kommunikation zwischen dem B
## Voraussetzungen
- Nutzung von Google Chrome oder Chromium in einer aktuellen Version (im Beispiel Version 49.0.2623.108 Built on Ubuntu 14.04, running on LinuxMint 17.3 (64-bit))
- Server mit Python und dem Modul `SimpleHTTPServer` (im Beispiel Raspberry Pi mit Raspian Debian Jessie)
- Server mit Python 2.7 und dem Modul `SimpleHTTPServer` (im Beispiel Raspberry Pi mit Raspian Debian Jessie)
- Hosting einer mittelkomplexen Website auf dem Server (im Beispiel die Seite *Secondhandblumen Petersen*, frei verfügbar unter https://github.com/xldrkp/secondhandblumen)
![Sinnvolle Anordnung von Fenstern zur Analyse des Netzwerkverkehrs](./abb/fensteranordnung-netzwerkanalyse.png)
## Forschungsfragen
- Wie läuft die Kommunikation zwischen Browser und Webserver ab?
- Welche Daten werden in Anfrage (*request*) und Antwort (*response*) übertragen?
## Hypothesen
- Der Client sendet im *request* Daten an den Server, die dieser braucht, um die Anfrage zu bearbeiten.
- Der Server sendet Daten in der *response* zurück, die der Client wiederum interpretiert.
## Ablauf des Experiments
Das Experiment wird von Bob und Alice durchgeführt.
Mit einer Anwendung wie PuTTY oder dem Terminal verbindet sich Alice per SSH mit dem Server (vgl. Abb. 1, (3)). Dort navigiert sie in den Ordner, der die Website hostet und startet den Server.
Mit einer Anwendung wie PuTTY oder dem Terminal verbindet sich Alice per SSH mit dem Server (vgl. Abb. 1, <span class="screenshot-ref-num">3</span>). Dort navigiert sie in den Ordner, der die Website hostet und startet den Server.
![Sinnvolle Anordnung von Fenstern zur Analyse des Netzwerkverkehrs](./abb/fensteranordnung-netzwerkanalyse.png)
Im Browser ruft Bob nun die Adresse auf, unter der die Website zu erreichen ist. Sofern er erfolgreich ist, schaltet er die *Entwicklertools* dazu, erreichbar über das Burgermenü des Chrome-Browsers oder die Tastenkombination `STRG+SHIFT+I` oder die Funktionstaste `F12`. Standardmäßig wird die Ansicht der Entwicklertools unten angezeigt (vgl. Abb. 1, (2)).
Im Browser ruft Bob nun die Adresse auf, unter der die Website zu erreichen ist. Sofern er erfolgreich ist, schaltet er die *Entwicklertools* dazu, erreichbar über das Burgermenü des Chrome-Browsers oder die Tastenkombination <kbd>STRG</kbd>+<kbd>UMSCHALT</kbd>+<kbd>I</kbd> oder die Funktionstaste <kbd>F12</kbd>. Standardmäßig wird die Ansicht der Entwicklertools unten angezeigt (vgl. Abb. 1, <span class="screenshot-ref-num">2</span>).
Bob wechselt anschließend in den Tab "Netzwerk" und ruft mit `F5` erneut die Website im Browser auf. In der Folge können Bob und Alice den Netzwerkverkehr zwischen Client und Server beobachten (vgl. (2) und (3)). Der Server schreibt sein Logfile direkt ins Terminal und zeigt damit an, welche Befehle er über HTTP empfängt. Die Statuscodes zeigen an, wie er die Anfrage (Request) behandelt und ob er dem anfragenden Client eine Antwort (Response) geben kann.
Bob wechselt anschließend in den Tab "Netzwerk" und ruft mit <kbd>F5</kbd> erneut die Website im Browser auf. In der Folge können Bob und Alice den Netzwerkverkehr zwischen Client und Server beobachten (vgl. <span class="screenshot-ref-num">2</span> und <span class="screenshot-ref-num">3</span>). Der Server schreibt sein Logfile direkt ins Terminal und zeigt damit an, welche Befehle er über HTTP empfängt. Die Statuscodes zeigen an, wie er die Anfrage (Request) behandelt und ob er dem anfragenden Client eine Antwort (Response) geben kann.
Das Navigieren in der Website zeitigt weiteren Netzwerkverkehr.
Das Navigieren in der Website erzeugt weiteren Netzwerkverkehr.
## Erweiterung des Experiments
Alice schlägt vor, sich den *Server Roundtrip* genauer anzusehen. Bob fragt, was sie damit meint. Alice erklärt: Der Server Roundtrip wird auch *Request-Response-Cycle* genannt. Beides bedeutet im Grunde dasselbe, nämlich dass der Client eine Anfrage an den Server stellt und dieser eine Antwort gibt - Request, Response. Dieser Trip wird oftmals wiederholt, weil nicht nur die HTML-Seite vom Server geholt werden muss, sondern auch alle Resourcen, die darin eingebunden sind, also Bilder, CSS, JavaScript und andere Daten. Die Entwicklertools des Browsers geben genaueren Einblick in die Kommunikation, wenn man eine Resource anklickt.
Bob navigiert auf die Homepage, aktualisiert die Browseransicht und klickt anschließend auf `index.html` im Netzwerktab (vgl. Abb. 2, (1)).
Bob navigiert auf die Homepage, aktualisiert die Browseransicht und klickt anschließend auf `index.html` im Netzwerktab (vgl. Abb. 2, <span class="screenshot-ref-num">1</span>).
![Auswahl der Datei index.html im Netzwerktab](./abb/auswahl.png)
Die folgende Ansicht zeigt die Daten, die bei Request und Response jeweils am Kopfende der HTTP-Kommunikation mitgeschickt wurden. Sie werden daher auch im Tab *Headers* angezeigt. Im Bereich (1) kann die Datei ausgewählt werden, die vom Server abgerufen werden soll. Für die Seite `index.html` werden insgesamt vier Requests gestellt, wie (2) zeigt. Bereich (3) zeigt generelle Informationen zu der Anfrage. (4) zeigt Informationen zur Antwort des Servers, (5) listet Daten auf, die mit dem Request zum Server geschickt wurden. Hinter *view source* (6) verbirgt sich ein Umschalter, der die Daten nochmal in Rohform anzeigt.
Die folgende Ansicht zeigt die Daten, die bei Request und Response jeweils am Kopfende der HTTP-Kommunikation mitgeschickt wurden. Sie werden daher auch im Tab *Headers* angezeigt. Im Bereich <span class="screenshot-ref-num">1</span> kann die Datei ausgewählt werden, die vom Server abgerufen werden soll. Für die Seite `index.html` werden insgesamt vier Requests gestellt, wie <span class="screenshot-ref-num">2</span> zeigt. Bereich <span class="screenshot-ref-num">3</span> zeigt generelle Informationen zu der Anfrage. <span class="screenshot-ref-num">4</span> zeigt Informationen zur Antwort des Servers, <span class="screenshot-ref-num">5</span> listet Daten auf, die mit dem Request zum Server geschickt wurden. Hinter *view source* <span class="screenshot-ref-num">6</span> verbirgt sich ein Umschalter, der die Daten nochmal in Rohform anzeigt.
![Anzeige der Header-Daten aus Request und Response](./abb/anzeige-headers.png)
Klicks auf andere Dateien in (1) bringen andere Informationen in (3-6) hervor.
Klicks auf andere Dateien in <span class="screenshot-ref-num">1</span> bringen andere Informationen in <span class="screenshot-ref-num">3</span>- <span class="screenshot-ref-num">6</span>hervor.
## Fragen und Aufgaben
......
# Lernleitfäden
(1) https://www.html-seminar.de/einsteiger.htm
- https://www.html-seminar.de/einsteiger.htm
Inhalte: Erklärende Texte, Codebeispiele, Projekte
(2) http://learn.shayhowe.com/html-css/
- http://learn.shayhowe.com/html-css/
Inhalte: Erklärende Texte, Codebeispiele
(3) http://www.afterhoursprogramming.com/tutorial/HTML/Introduction/
- http://www.afterhoursprogramming.com/tutorial/HTML/Introduction/
Inhalte: Erklärende Texte, Codebeispiele, Testoberfläche
## Listen, Menüs und Navigationen
- [Listamatic](http://css.maxdesign.com.au/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](http://www.w3schools.com/css/css_navbar.asp) | Erstellung horizontaler und vertikaler Navigationsleisten mit CSS
## Nur CSS
- http://www.westciv.com/style_master/academy/css_tutorial/
......@@ -21,4 +26,4 @@ https://dzone.com/refcardz/corecss-part1
## Python mit dem Fokus auf Webdevelopment
- https://www.fullstackpython.com/ Sehr gute Übersicht allgemeiner Entwicklungsansätze und Differenzierung bekannter Frameworks wie Django und Flask
\ No newline at end of file
- https://www.fullstackpython.com/ Sehr gute Übersicht allgemeiner Entwicklungsansätze und Differenzierung bekannter Frameworks wie Django und Flask
# Screencasts
# Screencasts & Videos
(1) https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css
(2) https://www.udemy.com/learn-html5-programming-from-scratch/learn/v4/overview
- https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css
- https://www.udemy.com/learn-html5-programming-from-scratch/learn/v4/overview
- https://css-tricks.com/video-screencasts/page/8/
- diverse [YouTube](https://www.youtube.com/results?search_query=Learn+HTML&page=&utm_source=opensearch) Channel zu Webdesignthemen
**Ungeordnet**
(3) https://css-tricks.com/video-screencasts/page/8/
## Listen, Menüs und Navigationelemente
(?) diverse [YouTube](https://www.youtube.com/results?search_query=Learn+HTML&page=&utm_source=opensearch) Channel
- [Create a Nav Bar | HTML & CSS Tutorial ](https://youtu.be/_ovlvYH782c) | Videotutorial
* [Simple Horizontal Navigation](http://css-snippets.com/simple-horizontal-navigation/) | Videotutorial und Transkript
## Allgemein zum Internet
- [Die Maus erklärt das Internet](https://www.youtube.com/watch?v=8PNRrOGJqUI) | Wenn auch sehr unwissenschaftlich, so doch ein Klassiker
- [The Birth of the Web](https://home.cern/topics/birth-web) | Website des CERN mit einer anschaulichen Aufbereitung der Entstehungsgeschichte des World Wide Web
- [The World Wide Web in Plain English](https://www.youtube.com/watch?v=0U6Hb3bf_jg)
- [How the Internet Works in 5 Minutes](https://www.youtube.com/watch?v=7_LPdttKXPc)
# [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**
<img src="/abb/tower-bridge.jpg" title="<a href='https://www.flickr.com/photos/gluemoon/5453627595/'>Tower bridge up, up and away</a> von <a href='https://www.flickr.com/photos/gluemoon/'>Russel Trow</a>, <a href='https://creativecommons.org/licenses/by/2.0/'>CC-BY</a>" alt="Tower bridge up, up and away von Russel Trow">
## Ziele
* die Bedeutung einer begründeten Informationsarchitektur für Websites verstehen
* Aufbau und Formatierung von Menüs und Navigationelementen 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](https://www.zotero.org/groups/itbh-informatik/items).
* 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](/material/typen/einleitung.md)
#### Listen, Menüs und Navigationselemente
* [Listamatic](http://css.maxdesign.com.au/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](http://www.w3schools.com/css/css_navbar.asp) | Erstellung horizontaler und vertikaler Navigationsleisten mit CSS
* [Create a Nav Bar | HTML & CSS Tutorial ](https://youtu.be/_ovlvYH782c) | Videotutorial
* [Simple Horizontal Navigation](http://css-snippets.com/simple-horizontal-navigation/) | Videotutorial und Transkript
#### Zur Funktionsweise des Internets
* [Die Maus erklärt das Internet](https://www.youtube.com/watch?v=8PNRrOGJqUI) | Wenn auch sehr unwissenschaftlich, so doch ein Klassiker
* [The Birth of the Web](https://home.cern/topics/birth-web) | Website des CERN mit einer anschaulichen Aufbereitung der Entstehungsgeschichte
* [Wie Tim Berners-Lee das Web erfand](http://www.tagesspiegel.de/weltspiegel/sonntag/25-jahre-www-wie-tim-berners-lee-das-web-erfand/13946806.html) | deutschsprachiger Artikel aus dem Tagesspiegel
- [The World Wide Web in Plain English](https://www.youtube.com/watch?v=0U6Hb3bf_jg)
- [How the Internet Works in 5 Minutes](https://www.youtube.com/watch?v=7_LPdttKXPc)
#### Zur Client-Serverkommunikation per HTTP(S)
Das in der Veranstaltung durchgeführte Experiment ist [in den Materialien](/material/sitzungsmaterial/analyse-client-server.md) dokumentiert.
......@@ -27,3 +27,33 @@
.version-badge {
display: none;
}
/*Formatierung von Tasten des Keyboards, http://www.jimmyscode.com/css-styling-for-kbd-tags/*/
kbd {
padding:0.1em 0.6em;
border:1px solid #ccc;
font-size:11px;
font-family:Arial,Helvetica,sans-serif;
background-color:#f7f7f7;
color:#333;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
display:inline-block;
margin:0 0.1em;
text-shadow:0 1px 0 #fff;
line-height:1.4;
white-space:nowrap;
}
/*Formatierung der Zahlen, die sich auf einen Screenshot beziehen.*/
span.screenshot-ref-num {
border: 2px solid red;
border-radius: 100px;
width: 25px;
height: 25px;
display: inline-block;
text-align: center;
color: red;
font-weight: bold;
}
......@@ -103,3 +103,42 @@ div.book-summary ul.summary li a {
.version-badge {
display: none;
}
/*Positionierung der Pfeile im Plugin expandable-chapters*/
.book .book-summary .exc-trigger {
top: 2px;
}
/*Formatierung von Tasten des Keyboards, http://www.jimmyscode.com/css-styling-for-kbd-tags/*/
kbd {
padding:0.1em 0.6em;
border:1px solid #ccc;
font-size:11px;
font-family:Arial,Helvetica,sans-serif;
background-color:#f7f7f7;
color:#333;
-moz-box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
-webkit-box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
display:inline-block;
margin:0 0.1em;
text-shadow:0 1px 0 #fff;
line-height:1.4;
white-space:nowrap;
}
/*Formatierung der Zahlen, die sich auf einen Screenshot beziehen.*/
span.screenshot-ref-num {
border: 2px solid red;
border-radius: 100px;
width: 25px;
height: 25px;
display: inline-block;
text-align: center;
color: red;
font-weight: bold;
}
......@@ -4,7 +4,7 @@
Zotero bietet zum einen die Möglichkeit, vom ersten Semester an Literatur, die man lesen sollte oder gelesen hat, zu erfassen und zu kommentieren. Zum andern kann Literatur über [zotero.org](http://zotero.org) auch geteilt werden.
Wir werden eine Gruppe für unsere Veranstaltung anlegen und gemeinsam Literatur zu unseren Themen zusammentragen.
Wir haben bei Zotero [eine Gruppe](https://www.zotero.org/groups/itbh-informatik/items) für unsere Veranstaltung und werden dort gemeinsam Literatur zu unseren Themen zusammentragen.
## Auftrag
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment