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 dc38e341 authored by Axel Dürkop's avatar Axel Dürkop

Merge branch 'vorbereitung' into 'master'

Vorbereitung

See merge request !1
parents 8f904e0c e981fd43
<a class="version-badge" href="https://collaborating.tuhh.de/itbh/veranstaltungsskript-inf-sose2017/commits/master"><img alt="build status" src="https://collaborating.tuhh.de/itbh/veranstaltungsskript-inf-sose2017/badges/master/build.svg" /></a>
<a class="version-badge" href="https://fizban05.rz.tu-harburg.de/itbh/veranstaltungsskript-inf-sose2017/"><img alt="version HTML" src="https://img.shields.io/badge/version-HTML-yellowgreen.svg" /></a>
<a class="version-badge" href="https://fizban05.rz.tu-harburg.de/itbh/veranstaltungsskript-inf-sose2017/book_pdf/book.pdf?/"><img alt="version PDF" src="https://img.shields.io/badge/version-PDF-orange.svg" /></a>
<div class="badge-wrapper">
<a class="version-badge" href="https://fizban05.rz.tu-harburg.de/itbh/veranstaltungsskript-inf-sose2017/">
<img alt="version HTML" src="https://img.shields.io/badge/version-HTML-yellowgreen.svg">
</a>
<a class="version-badge" href="https://fizban05.rz.tu-harburg.de/itbh/veranstaltungsskript-inf-sose2017/book_pdf/book.pdf?/">
<img alt="version PDF" src="https://img.shields.io/badge/version-PDF-orange.svg" />
</a>
</div>
# Über diese Veranstaltung
......
......@@ -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/auftraege/02-Mo-2017-04-10-auftrag-inf1.md)
* [Arbeitsauftrag INF2](sitzungen/auftraege/02-Mo-2017-04-10-auftrag-inf2.md)
* [[03] 2017-04-24](sitzungen/03-Mo-2017-04-24.md)
* [Arbeitsauftrag INF1](sitzungen/auftraege/03-Mo-2017-04-24-auftrag-inf1.md)
* [Arbeitsauftrag INF2](sitzungen/auftraege/03-Mo-2017-04-24-auftrag-inf2.md)
## Material
* [Webtechnologien](material/webtechnologien.md)
......@@ -34,10 +37,13 @@
* [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)
* [Referenzen](material/typen/referenzen.md)
- [Sitzungsmaterial](material/sitzungsmaterial/einleitung.md)
- [Studienleistungen mit GitLab hochladen](material/sitzungsmaterial/studienleistungen-in-gitlab-hochladen.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": {
"1.1.1": {
"skip": true
},
"1.1.2": {
"skip": true
},
"1.1.3": {
"skip": true
}
}
......
......@@ -7,29 +7,3 @@ Im Laufe der Zeit haben sich Arbeitsgruppen um das [W3C](https://www.w3.org/) he
Mit CSS werden die Inhalte hinsichtlich Größe, optischer Anordnung, Abstand, Farbe etc. formatiert.
Allgemein wird von CSS gesprochen. Soll jedoch auf die besonderen Eigenschaften und Neuerungen verwiesen werden, die sich in den vergangenen 10 Jahren angesichts neuer Anforderungen an Webseiten und -applikationen ergeben haben, nennt man *CSS3* im Besonderen. Die Entwicklungsgeschichte von CSS wird [in der Wikipedia](https://de.wikipedia.org/wiki/Cascading_Style_Sheets#Geschichte_und_Versionen) nachgezeichnet.
## Lernressourcen
### Referenzen
* Ein sehr guter Anlaufpunkt in Sachen Referenz und Dokumentation ist das **Mozilla Developer Framework**. Hier gibt es mittlerweile viel zu [CSS](https://developer.mozilla.org/de/docs/Web/CSS) in deutscher Sprache. Jedoch gilt auch hier, dass die englische Version hinsichtlich Aktualität und Vollständigkeit der deutschen vorzuziehen ist.
### Videos
* Eine deutschsprachige Tutorialreihe, die auch Layouts mit CSS behandelt, gibt es auf [Youtube](https://www.youtube.com/watch?v=8Ksjz4K_wW0).
* [CSS-Tricks Videos](https://css-tricks.com/video-screencasts/) | Die Videos sind kein Lehrgang, den man nacheinander durcharbeiten kann. Vielmehr werden Themen und Tricks behandelt, die im Alltag des Webseitenbauens immer wieder aufkommen.
### Cheat Sheets
* gute Sammlung auf https://envato.com/blog/cheatsheets-web-designers/ Eine Websuche nach "cheat sheet css3" hilft.
### Webseiten
* [A List Apart](http://alistapart.com/) | einschlägige Seite für Designer_innen, die in der Vergangenheit oftmals zur Weiterentwicklung von Theorie und Praxis rund um CSS beigetragen hat. So ist hier zuerst der einflussreiche Artikel von Ethan Marcotte zu [*Responsive Webdesign*](http://alistapart.com/article/responsive-web-design) erschienen.
* [CSS-Tricks](https://developer.mozilla.org/de/docs/Web/CSS) | lange existierende Seite von Chris Coyier, von der man sehr viel lernen kann.
### Bücher
* Ein Klassiker in deutscher Sprache ist das Buch "CSS. Das umfassende Handbuch" von Kai Laborenz. Es ist zwar verhältnismäßig alt (letzte Auflage 2011), enthält jedoch geballtes Wissen zum Formatieren und Layouten von Webseiten, das nach wie vor aktuell ist.
......@@ -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)
- Hosting einer mittelkomplexen Website auf dem Server (im Beispiel die Seite *Secondhandblumen Petersen*, frei verfügbar unter https://github.com/xldrkp/secondhandblumen)
- 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://collaborating.tuhh.de/itbh/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 mit `python -m SimpleHTTPServer 8000`.
![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, z.B. `http://192.168.178.100:8000`. Sofern das erfolgreich ist, schaltet Bob 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
......
# Studienleistungen in GitLab hochladen
Die folgende Anleitung erklärt,
- wie Sie GitLab für den Gebrauch in der Veranstaltung einrichten
- wie Sie wöchentlich Ihre Studienleistungen hochladen
- wie und wo Sie Feedback auf Ihre Arbeit erhalten
- welche Möglichkeiten der Kollaboration mit anderen Sie auf diese Weise haben
<!-- untoc -->
## Inhalt
<!-- toc orderedList:0 depthFrom:2 depthTo:6 -->
* [Grundsätzliches zu GitLab](#grundsätzliches-zu-gitlab)
* [Die eigene Subgroup finden](#die-eigene-subgroup-finden)
* [Projekte anlegen](#projekte-anlegen)
* [Ordner anlegen](#ordner-anlegen)
* [Dateien hochladen und austauschen](#dateien-hochladen-und-austauschen)
* [Dateien hochladen](#dateien-hochladen)
* [Dateien austauschen](#dateien-austauschen)
* [Feedback bekommen und darauf antworten](#feedback-bekommen-und-darauf-antworten)
* [Feedback bemerken und anzeigen](#feedback-bemerken-und-anzeigen)
<!-- tocstop -->
## Grundsätzliches zu GitLab
GitLab ist wie GitHub eine browserbasierte Software, die dafür gedacht ist, gemeinsam an Text- und Codeprojekten zu arbeiten. Im ersten Teil der zweisemestrigen Veranstaltung *Einführung in die Informationstechnik* werden wir nicht alles ausreizen, was mit der Software möglich ist, sondern uns in kleinen Schritten diesen Möglichkeiten nähern.
Hinter GitLab steckt [die Versionskontrollsoftware Git](#). Was damit wiederum möglich ist, ist Gegenstand des zweiten Semesters - für Neugierige auch früher - und spielt im folgenden noch keine Rolle.
Die Motivation, GitLab für diese Veranstaltung einzusetzen, liegt darin, dass zum einen Kenntnisse von Git, GitHub und GitLab mittlerweile vorteilhaft, wenn nicht sogar erforderlich sind. Zum anderen bietet GitLab eine hervorragende Möglichkeit, Feedback zu Texten, Code- und Markupdateien zu geben. Darum geht es in erster Linie in den folgenden Schritten.
## Die eigene Subgroup finden
Für alle Teilnehmer_innen wurde ein so genannte Subgroup in GitLab eingerichtet. Sie ist der Subgroup der Veranstaltung, [itbh-inf-sose2017](https://collaborating.tuhh.de/itbh-inf-sose2017), untergeordnet. Eine Subgroup gibt dem *Owner*, also dem jeweiligen Teilnehmer, volle Rechte als *Master* dieser Gruppe. Er/sie kann andere einladen, Projekte anlegen und verschiedene andere Operationen durchführen.
Die eigene Subgroup findet man am besten durch den Einstieg in die Gruppe der Veranstaltung, [itbh-inf-sose2017](https://collaborating.tuhh.de/itbh-inf-sose2017) und anschließend durch einen Klick auf *Subgroups*.
![Ausgehen von der Kursgruppe die eigene Subgroup finden](abb/gitlab-subgroup-finden.png)
## Projekte anlegen
Benutzer_innen in GitLab können eine bestimmte Anzahl von Projekten anlegen, in der Regel fünf.
Im folgenden werden Sie ein neues Projekt anlegen und ihm den Namen *Studienleistungen* geben. Hier kann alles hochgeladen werden, was Sie im Laufe der kommenden Sitzungen erarbeiten.
Für das Anlegen eines Projekts starten Sie in der Subgroup mit Ihrem Namen.
![Anlegen eines Projekts in GitLab](abb/gitlab-projekt-anlegen.gif)
Eine Beschreibung ist optional. Achten Sie darauf, dass das Projekt *Private* ist, dann hat niemand außer eingeladenen Benutzer_innen Einsicht in Ihre Arbeit.
Erstellen Sie anschließend noch eine Datei `README.md`, in die Sie z.B. folgenden Text eintragen:
```Markdown
# Studienleistungen
Hier lade ich meine Studienleistungen hoch.
```
**Wichtig!** Ohne eine erste Datei werden einige entscheidende Navigationselemente Ihres Projekts nicht angezeigt.
## Ordner anlegen
Sie können im Browser beliebig viele Ordner anlegen. Beachten Sie, dass dabei immer eine Datei `.gitkeep` entsteht. Das ist dadurch begründet, dass Git keine Ordner ohne Inhalt überwachen kann. Stören Sie sich nicht an der Datei, sie tut nichts.
**Vorschlag für ein Ordnungssystem.** Legen Sie zu jedem Auftrag einen neuen Ordner mit der Namenskonvention `zu-[Zahl der kommenden Veranstaltung]-Mo-[JJJJ-MM-TT]`, also z.B. `zu-[03]-Mo-2017-04-24`. Darin können Sie weitere Ordner anlegen, die Sinn machen.
![Anlegen eines Ordners in GitLab](abb/ordner-anlegen.gif)
## Dateien hochladen und austauschen
Git funktioniert nur mit text- bzw. zeilenbasierten Dateien. Alle binären Dateien und Dateien, die in Containern verpackt sind, können mit Git nicht detailliert unterschieden werden. Was das konkret bedeutet, wird weiter unten noch erklärt.
Laden Sie daher **keine Word-, LibreOffice- und PDF-Dateien** hoch. Sie werden im Laufe der Veranstaltung lernen, dass sinnvoll ist, auch Textdateien als einfachen Text anzufertigen und mit [Markdown](#) zu formatieren. Aus Markdown-Dateien können Sie anschließend Word-, LibreOffice- und PDF-Dateien erzeugen. Sogar HTML-Dateien entstehen aus Markdown.
### Dateien hochladen
Navigieren Sie zunächst in das entsprechende Projekt, hier *Studienleistungen*, und anschließend in den Ordner, in den Sie die Dateien hochladen wollen.
Wählen Sie nun über den Button mit dem "+"-Zeichen die Option *Upload file*. Sie werden aufgefordert, eine oder mehrere Dateien per Drag & Drop oder durch Auswahl im Finder/Explorer hochzuladen. Den Upload können Sie nach Wunsch noch mit einer Beschreibung kennzeichnen, das ist aber nicht zwingend notwendig.
**Wichtig!** Laden Sie keine ZIP-Dateien hoch, da GitLab diese nicht entpackt. Ein Feedback auf Ihre Arbeit ist so nicht möglich!
### Dateien austauschen
Dateien können in GitLab auf ähnliche Weise ausgetauscht werden, wie sie auch hochgeladen werden. Dabei ist folgendes zu sagen und zu beachten:
- Es können keine kompletten Ordner ausgetauscht werden.
- Dateien können nur einzeln gelöscht werden.
- Dateien gleichen Namens können nicht durch erneuten Upload überschrieben werden, dazu ist das folgende Vorgehen notwendig.
Auch wenn das zunächst einmal unkomfortabel erscheint, ist es GitLab nicht wirklich anzulasten, denn eigentlich erfolgt der Up- und Download von Dateien und überhaupt die gesamte Kollaboration an einem Projekt auf eine andere Art und Weise, z.B. mit [GitKraken](https://www.gitkraken.com/) oder ähnlicher Software. Wir kommen dazu im zweiten Semester.
Um eine Datei auszutauschen, klicken Sie auf den Namen der Datei, um sie anzuzeigen. Rechts über der Datei finden Sie den Button *Replace*. Wenn Sie ihn klicken, folgt ein analoger Vorgang wie beim Upload von Dateien.
## Feedback bekommen und darauf antworten
Wenn Sie sich fragen, warum wir den ganzen Aufwand mit GitLab betreiben und nicht weiterhin per Mail arbeiten oder gar Dateien in einer Dropbox teilen: Das Killerfeature haben Sie noch nicht gesehen! Da Git zeilen- und wortweise Änderungen verfolgen kann, lassen sich diese Zeilen detailliert kommentieren. Dadurch wird für Sie als kommende Lehrende, aber auch für das Dozententeam dieser Veranstaltung eine Form von Feedback möglich, die mit anderen Kommunikationstools wie Mail und Dropbox nicht möglich ist.
Die folgende Animation vermittelt einen Eindruck von den Möglichkeiten, über Zeilen eines Textes oder HTML-Dokuments zu diskutieren:
![Beispiel, wie zu einer HTML-Datei Feedback gegeben werden kann.](abb/feedback-geben.gif)
## Feedback bemerken und anzeigen
Die Kommentare zu Dateien in einem Projekt sind über verschiedene Wege zu erreichen. Fürs Erste bekommen Sie eine Nachricht in Mattermost, wenn das Dozententeam sich Ihre Arbeit angeschaut und diese kommentiert hat.
Sie erreichen die Liste der Kommentare stets über den Klickpfad *Project -> Activity -> Comments*.
# Blogs und Webseiten
# Blogs
https://www.sitepoint.com/html-css/
Inhalte: Anleitungen & Erklärungen, Codebeispiele, Videos, Screenshots
Viele Entwickler_innen veröffentlichen Ihre Erkenntnisse, Entwicklungen und Lernfortschritte im Netz. Dadurch entsteht ein großer Pool von Informationen, die teilweise sehr subjektiv sind, manchmal aber auch akademisches Niveau haben. Entwicklerblogs sind daher eine gute Lernmöglichkeit, wenngleich die Themen dort oftmals sehr speziell sind.
http://usersnap.com/blog/
Inhalte: Beiträge für Webdeveloper
## Blogs
https://www.thoughtco.com/web-design-4133459
Inhalte: Beiträge für Anfänger
https://thehelloworldprogram.com/web-development/
Inhalte: Für jüngeres Publikum, Erklärungen, Codebeispiele, Videos, Screenshots
http://webdesignfromscratch.com/category/html-css/
Inhalte: Beiträge für Webdevelopper, Free Ebook angebote
http://www.standardista.com/
Inhalte: Beiträge für Webdeveloper
http://webkrauts.de/
Inhalte: Beiträge für Webdeveloper
- https://www.thoughtco.com/web-design-4133459 | Beiträge für Anfänger
- https://www.sitepoint.com/html-css/ | Anleitungen & Erklärungen, Codebeispiele, Videos, Screenshots
- http://usersnap.com/blog/ | Beiträge für Webdeveloper
- https://thehelloworldprogram.com/web-development/ | Für jüngeres Publikum, Erklärungen, Codebeispiele, Videos, Screenshots
- http://webdesignfromscratch.com/category/html-css/ | Beiträge für Webdevelopper, Free Ebook angebote
- http://www.standardista.com/ | Beiträge für Webdeveloper
- http://webkrauts.de/ | Beiträge für Webdeveloper
- http://alistapart.com/ | einschlägige Seite für Designer_innen, die in der Vergangenheit oftmals zur Weiterentwicklung von Theorie und Praxis rund um CSS beigetragen hat. So ist hier zuerst der einflussreiche Artikel von Ethan Marcotte zu [*Responsive Webdesign*](http://alistapart.com/article/responsive-web-design) erschienen.
......@@ -6,6 +6,11 @@ Denn es geht gar nicht so sehr darum, ob Bücher nun analog, als PDF oder als We
Für die drei fachlichen Schwerpunkt dieser Veranstaltung seien im folgenden einige Bücher empfohlen. Eine umfangreichere Sammlung findet sich [online in der Zotero-Gruppe](https://www.zotero.org/groups/itbh-informatik/items) zur Veranstaltung.
## Allgemein
- [Frontend Developer Handbook 2017](https://www.gitbook.com/book/frontendmasters/front-end-handbook-2017/details) | GitBook mit unzähligen Hinweisen und Links auf aktuelle Technologien zur Webentwicklung. Die Zusammenstellung dort geht weit über das haus, was in diesem Skript zu finden ist, kann aber auch überwältigend für Einsteiger_innen sein.
- [Frontend Developer Handbook 2016](https://www.gitbook.com/book/frontendmasters/front-end-handbook/details) | GitBook mit unzähligen Hinweisen und Links auf aktuelle Technologien zur Webentwicklung, ältere Ausgabe
## HTML
* Duckett, J. (2013). HTML & CSS: erfolgreich Websites gestalten & programmieren. München u.a.: Pearson.
......
# Spickzettel
# Spickzettel oder "Cheat Sheets"
(1) https://www.w3schools.com/
(2) https://wiki.selfhtml.org/ (DE)
Auf so genannten Cheat Sheets werden die wichtigsten Befehle und Ausdrücke einer Sprache oder Technik zusammengefasst. Es gibt sie meist in verschiedenen Formaten (PNG, PDF u.a.), und man kann sie sich beim Lernen neben den Rechner legen. Manchmal sind sie auch interaktiv und laufen nur im Browser.
**Nur CSS**
https://www.cheatography.com/davechild/cheat-sheets/css2/
Eine Internetrecherche z.B. nach "cheat sheet html" fördert einige zutage, bei [Envato](https://envato.com/blog/cheatsheets-web-designers/) findet sich auch eine gute Sammlung.
![Screenshot eines Cheat Sheets von <a href='https://websitesetup.org/HTML5-cheat-sheet.pdf'>WebsiteUp</a>](abb/html-cheat-sheet.png)
......@@ -8,9 +8,9 @@ Die folgende Sammlung stellt einige Exemplare aus diesen Kategorien vor. Viele d
* [Bücher](/material/typen/buecher.md)
* [Blogs und Webseiten](/material/typen/blogs.md)
* [Online-Kurse](/material/typen/kurse.md)
* [Online-Kurse und MOOCs](/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)
* [Referenzen](/material/typen/referenzen.md)
# Interaktive Plattformen
# Interaktive Webseiten und Plattformen
(1) https://www.freecodecamp.com/map-aside#nested-collapseHTML5andCSS
Inhalte: Erklärende Texte, interaktive Aufgaben
Interaktive Lernplattformen zeichnen sich dadurch aus, dass Lernende direkt im Browser Beispiele ausprobieren können. Sie erhalten sofort Feedback auf ihre Eingaben und korrigieren auf diese Weise selbst, was sie erarbeiten.
(2) https://www.codecademy.com/learn/web
Inhalte: Erklärende Texte, interaktive Aufgaben, Achievement System
Es gibt verschiedene interaktive Angebote, da die Programmierung solcher Webanwendungen allerdings sehr aufwändig ist, kosten einige auch Geld.
(3) https://www.sololearn.com/Course/HTML/ und https://www.sololearn.com/Course/CSS/
Inhalte: Erklärungen, Quiz mit MC und Code Completion
## HTML/CSS
- https://www.freecodecamp.com/map-aside#nested-collapseHTML5andCSS | **Tipp!**, erklärende Texte, interaktive Aufgaben
- https://www.w3schools.com/ | Umfassende Website, die das ausprobieren von Codeschnippseln im Browser ermöglicht
- https://flukeout.github.io/ | sehr schönes interaktives Spiel, mit dem CSS-Selektoren geübt werden können.
- https://www.codecademy.com/learn/web | Erklärende Texte, interaktive Aufgaben, Achievement System
- https://www.sololearn.com/Course/HTML/ und https://www.sololearn.com/Course/CSS/ | Erklärungen, Quiz mit Multiple Choice und Autovervollständigung von Code (*code completion*)
## Git
- https://try.github.io/levels/1/challenges/1 | Git ist eine Software zur Überwachung von Änderungen an kleineren und größeren Codeprojekten. Git ist aber auch ein mächtiges Tool, um mit anderen weltweit an Codeprojekten zusammenzuarbeiten. Die Software ist mittlerweile ein Quasi-Industriestandard im IT-Bereich geworden. GitLab und GitHub basieren auf Git. Lernen Sie Git!
# Online-Kurse
# Online-Kurse und MOOCs
(1) https://www.khanacademy.org/computing/computer-programming/html-css
Inhalte: Video, Erklärungen, Quiz, interaktive Aufgaben
Ganze Online-Kurse zu den Sprachen des Webs gibt es schon lange. Daher sollte immer darauf geachtet werden, wie alt ein solcher Kurs ist. Ist er aus den 1990ern, eignet man sich defintiv überholtes Wissen an. Aktuelle deutschsprachige Kurse auf hohem Niveau sind selten, Englisch ist auch hier immer noch vorherrschend.
(2) https://dash.generalassemb.ly/projects
Inhalte: Slideshow mit Erklärungen, interaktive Aufgaben, Skilltracker
Es gibt Kursformate, die das Selbstlernen in den Vordergrund stellen, und andere, die dazu auffordern, offen und kollaborativ mit anderen zusammenzuarbeiten. Letztere sind seit 2008 unter dem Namen [Massive Open Online Courses (MOOCs)](https://de.wikipedia.org/wiki/Massive_Open_Online_Course) bekannt und werden von zahlreichen Hochschulen angeboten. Viele dieser Angebote sind kostenlos, ggf. wird eine Gebühr für ein abschließendes Teilnahmezertifikat fällig.
Neben den Angeboten der Hochschulen gibt es noch kommerzielle Anbieter wie z.B. [Udemy](http://udemy.com/), [Udacity](http://udacity.com/) oder [O'Reilly](http://shop.oreilly.com/category/learning-path.do), die besonders im IT-Bereich aktiv sind.
## Online-Kurse
- https://www.khanacademy.org/computing/computer-programming/html-css | Video, Erklärungen, Quiz, interaktive Aufgaben. Die Khan-Academy ist mittlerweile berühmt, u.a. [für die Geschichte, mit der alles begann](https://de.wikipedia.org/wiki/Khan_Academy#Geschichte).
## MOOCs
- https://open.hpi.de/courses/webtech2017 | gerade nicht aktiv (04-2017), aber sonst eine Möglichkeit, mit anderen zusammen dezentral und kollaborativ zu studieren.
- [Suche nach "HTML" bei Coursera](https://www.coursera.org/courses?languages=en&query=html) | Coursera war einer der ersten MOOC-Anbieter und ist nach wie vor sehr aktiv, auch im technischen Bereich
- [Suche nach "HTML" bei edX](https://www.edx.org/course/?search_query=html&language=English) | edX ist eine Kooperation des [MIT](#) mit der Universität [Harvard](#). Der Anbieter gehört zu den größten weltweit im Bereich von MOOCs.
Kurse, die mit *Self-Paced* ausgezeichnet sind, können im eigenen Tempo durchgearbeitet werden.
# Lernleitfäden
# Lernleitfäden und Webseiten
(1) https://www.html-seminar.de/einsteiger.htm
Inhalte: Erklärende Texte, Codebeispiele, Projekte
Als Lernleitfäden oder Tutorial bezeichnet man Webseiten, die strukturiert Inhalte vermitteln. Dabei liegt die Qualität oft in der Art, wie Lernende zum Selbstlernen aktiviert werden. Ein gutes Tutorial zeigt an einem klar umrissenen Problem, wie es gelöst werden kann.
(2) http://learn.shayhowe.com/html-css/
Inhalte: Erklärende Texte, Codebeispiele
Tutorials sind oft auch als Blogbeiträge zu finden, im Folgenden sind komplexere Konstrukte zusammengestellt.
(3) http://www.afterhoursprogramming.com/tutorial/HTML/Introduction/
Inhalte: Erklärende Texte, Codebeispiele, Testoberfläche
## HTML und CSS allgemein
- https://www.html-seminar.de/einsteiger.htm | **Tipp!**, erklärende Texte, Codebeispiele, Projekte
- https://developer.mozilla.org/de/Learn | Die Mozilla Foundation engagiert sich für ein offenes und freies Web. Sie betreibt daher auch eine große mehrsprachige Website zu den Themen des Webs. Für den Einstieg ist besonders die Unterseite [Learning the Web](https://developer.mozilla.org/de/Learn) zu empfehlen.
- http://learn.shayhowe.com/html-css/ | Erklärende Texte, Codebeispiele
- http://www.afterhoursprogramming.com/tutorial/HTML/Introduction/ | Erklärende Texte, Codebeispiele, Testoberfläche
## Layout
- http://de.learnlayout.com/ | **Tipp!**, ganz hervorragende Seite in Form eines kleinschrittigen Tutorials. Das Box-Modell wird dort auf sehr verständliche Weise erklärt. Auch die etwas trickreiche Positionierung mit `float` wird besprochen. Was fehlt, ist die neue Layouttechnik mit *Flexbox*.
## Listen, Menüs und Navigationen
- [Listamatic](http://css.maxdesign.com.au/listamatic/) | **Tipp!**, 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
......@@ -16,9 +27,6 @@ Inhalte: Erklärende Texte, Codebeispiele, Testoberfläche
- http://www.vogella.com/tutorials/CSS/article.html
- http://html.net/tutorials/css/
## Für Fortgeschrittene
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/ **Tipp!**, sehr gute Übersicht allgemeiner Entwicklungsansätze und Differenzierung bekannter Frameworks wie Django und Flask
# Referenzen und API-Dokumentationen
Jede Sprache wird mit einer Dokumentation ausgeliefert, in der steht, wie die Sprache einzusetzen ist und was sie kann. Allgemein spricht man hier von der Referenz zu der Sprache, aber auch von API-Dokumentation. API steht für [Application Programming Interface](#) und meint die Dokumentation der Schnittstelle, die zwischen dem Menschen und der Sprache oder Anwendung besteht. Wenn man also eine solche Sprache verwenden will, muss man die Schnittstelle kennen und wissen, was sie kann.
Im folgenden sind die wichtigsten Online-Referenzen zu den Sprachen dieser Veranstaltung zusammengestellt.
## HTML
- https://dev.w3.org/html5/html-author/ | hochoffiziell vom W3C, allerdings optisch nicht sehr ansprechend und sehr technisch
- https://www.w3schools.com/tags/default.asp | übersichtliche Darstellung aller HTML-Tags und ihrer Funktion
- https://www.tutorialspoint.com/html5/html5_tags.htm | eine weitere Liste, sehr detailliert
- https://developer.mozilla.org/de/docs/Web/HTML/Element | deutschsprachige Referenz von Mozilla. Gute Anlaufstelle, besser noch in Englisch lesen. Die Referenz [der Attribute ist gesondert zu finden](https://developer.mozilla.org/en/docs/Web/HTML/Attributes).
## CSS
- http://cssreference.io/ | **Tipp!**, optisch sehr schön aufbereitete Referenz
- https://www.w3schools.com/cssref/default.asp | übersichtliche Darstellung aller CSS-Eigenschaften und ihrer Funktion
- https://developer.mozilla.org/de/docs/Web/CSS/CSS_Referenz | deutschsprachige Referenz von Mozilla. Gute Anlaufstelle, besser noch in Englisch lesen.
## Python
- https://docs.python.org/3/ | Einstiegsseite in die komplexe Online-Dokumentation von Python. Oben links ist ein Selektor für die Python-Versionen.
# Screencasts
# Screencasts und 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
Youtube verdankt seine Popularität u.a. der Tatsache, dass dort unzählige Videos zu finden sind, mit denen man etwas lernen kann. Menschen, die etwas können und wollen, dass auch andere an ihrem Wissen teilhaben, produzieren Videos oder [animierte Gifs](#), in denen vorgeführt wird, wie etwas funktioniert oder gemacht wird.
**Ungeordnet**
(3) https://css-tricks.com/video-screencasts/page/8/
Solange sich das Geschehen allein auf einem Rechner abspielt, kann [der VLC-Player](https://www.videolan.org/vlc/) zur Aufnahme von Screencasts verwendet werden. Kommen Aufnahmen außerhalb des Rechners dazu, helfen Videotools wie [OpenShot](http://openshot.org/) bei der Produktion.
(?) diverse [YouTube](https://www.youtube.com/results?search_query=Learn+HTML&page=&utm_source=opensearch) Channel
Für die Erstellung der animierten Gifs in diesem Skript wurde [Silentcast](https://github.com/colinkeenan/silentcast/) unter Linux verwendet.
## Screencasts allgemein
- https://www.udemy.com/learn-html5-programming-from-scratch/learn/v4/overview | **Tipp!** Kostenloser Kurs mit vielen Videos
- https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css | Freemium-Angebot mit kostenlosem Trial
- diverse [YouTube](https://www.youtube.com/results?search_query=Learn+HTML&page=&utm_source=opensearch) Channel zu Webdesignthemen
* [CSS-Tricks Videos](https://css-tricks.com/video-screencasts/) | Die Videos sind kein Lehrgang, den man nacheinander durcharbeiten kann. Vielmehr werden Themen und Tricks behandelt, die im Alltag des Webseitenbauens immer wieder aufkommen.
## Layouttechnik
- Eine deutschsprachige Tutorialreihe, die auch Layouts mit CSS behandelt, gibt es auf [Youtube](https://www.youtube.com/watch?v=8Ksjz4K_wW0).
## Listen, Menüs und Navigationelemente
- [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)
# Sonstige
## Wikis
**Nur CSS**
http://css-discuss.incutio.com/?page=PrintStylesheets
# [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.
# Auftrag
# Auftrag zu [03], 2017-04-24
Der folgende Arbeitsauftrag ist für die Gruppe INF1 gedacht.
......@@ -63,4 +63,4 @@ Die folgenden Arbeitsschritte empfehlen sich bei komplexen Aufgaben und Probleme
* Geben Sie eine zweite Version am **Sonntag, d. 23.04.2017**, ab.
[^1]: Da sich dieses Skript primär an werdende Lehrer_innen richtet, will ich die Quellen der didaktischen Methoden nennen: Die Liste der Arbeitsschritte stammt aus [dem bemerkenswerten Methodenpool der Uni Köln](http://methodenpool.uni-koeln.de/problembased/darstellung.html) und findet sich unter *PBL - Problem Based Learning*.
[^2]: Die zitierte Literatur finden Sie [in der Zotero-Gruppe](https://www.zotero.org/groups/itbh-informatik/items).
[^2]: Die zitierte Literatur finden Sie [in der Zotero-Gruppe](https://www.zotero.org/groups/itbh-informatik/items).
# Auftrag
# Auftrag zu [03], 2017-04-24
Der folgende Arbeitsauftrag ist für die Gruppe INF2 gedacht.
......
# Auftrag zu [04], 2017-05-08
Der folgende Arbeitsauftrag ist für die Gruppe **INF1** gedacht.
## Ziele
- Sie können Kopfbereich und Navigation Ihrer Website mit HTML und CSS gestalten.
- Sie können Bilder in Ihre Seite einbinden.[^1]
- Sie können mehrere HTML-Dokumente Ihrer Seite untereinander verlinken.
- Sie kennen verschiedene Lernmaterialtypen.
- Sie sammeln Erfahrung im Umgang mit einem bestimmten Lernmaterialtyp und können vor anderen einen Kurzvortrag darüber halten.
## Inhalte und Aufgaben des Auftrags
### 1. HTML & CSS
Sie haben eine erste Webseite erstellt, die es jetzt gilt, weiter auszuarbeiten. Leitend ist dabei nach wie vor das Mockup [aus dem ersten Arbeitsauftrag](/sitzungen/auftraege/02-Mo-2017-04-10-auftrag-inf1.md).