Commit dc38e341 authored by Axel Dürkop's avatar Axel Dürkop
Browse files

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)
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