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

Update Content

parent 9f1c68c5
......@@ -41,7 +41,6 @@
* [Lernleitfäden](material/typen/lernleitfaden.md)
* [Spickzettel](material/typen/cheatcheets.md)
* [Referenzen](material/typen/referenzen.md)
* [Sonstige](material/typen/sonstige.md)
- [Sitzungsmaterial](material/sitzungsmaterial/einleitung.md)
- [Experiment: Client-/Serverkommunikation](material/sitzungsmaterial/analyse-client-server.md)
......
......@@ -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.
# Blogs
# Blogs
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.
......@@ -11,3 +11,4 @@ Viele Entwickler_innen veröffentlichen Ihre Erkenntnisse, Entwicklungen und Ler
- 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.
......
......@@ -2,6 +2,6 @@
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.
Eine Internetrecherche z.B. nach "cheat sheet html" fördert einige zutage.
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)
......@@ -13,4 +13,4 @@ Die folgende Sammlung stellt einige Exemplare aus diesen Kategorien vor. Viele d
* [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)
......@@ -6,9 +6,9 @@ Es gibt verschiedene interaktive Angebote, da die Programmierung solcher Webanwe
## 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.freecodecamp.com/map-aside#nested-collapseHTML5andCSS | Erklärende Texte, interaktive Aufgaben
- 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*)
......
......@@ -6,18 +6,18 @@ Tutorials sind oft auch als Blogbeiträge zu finden, im Folgenden sind komplexer
## 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.
- https://www.html-seminar.de/einsteiger.htm | Erklärende Texte, Codebeispiele, Projekte
- 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/ | 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*.
- 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/) | systematisches Onlinetutorial zur Gestaltung von Listen als Menüs und Navigationselemente. Veraltet, in den Grundlagen der Formatierung von HTML-Listen immer noch gültig.
- [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
......@@ -27,9 +27,6 @@ Tutorials sind oft auch als Blogbeiträge zu finden, im Folgenden sind komplexer
- 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
- https://www.fullstackpython.com/ **Tipp!**, sehr gute Übersicht allgemeiner Entwicklungsansätze und Differenzierung bekannter Frameworks wie Django und Flask
......@@ -10,8 +10,12 @@ Für die Erstellung der animierten Gifs in diesem Skript wurde [Silentcast](http
- 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
- https://css-tricks.com/video-screencasts/page/8/ | Klassiker mit zahlreichen Screencasts zu verschiedensten Themen. Sehenswert.
- 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
......
# Sonstige
Hier sind zunächst alle Quellen aufgeführt, die (noch) nicht eingeordnet sind.
## Wikis
### CSS
- http://css-discuss.incutio.com/?page=PrintStylesheets
# Fahrplan
| Nr. | Datum | Inhalte INF2 | Aufgabe | Inhalte INF1 | Aufgabe |
| --- | -------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
| 1 | 03.04.17 | Vorstellung, Vorbereitung, Organisatorisches | Installation bzw. Einrichtung Python auf dem eigenen Rechner | Vorstellung, Vorbereitung, Organisatorisches | [Voraussetzungen](/voraussetzungen/zusammenfassung.html) |
| 2 | 10.04.17 | [Grundlagen HTML-Formulare](/sitzungen/02-Mo-2017-04-10.md) | Ideensammlung Projekt; [Arbeitsauftrag](/sitzungen/02-auftrag-inf2.md) | Vorstellung Arbeitsauftrag; [Grundlagen HTML und CSS](sitzungen/02-Mo-2017-04-10.md) | Selbstständige Erarbeitung HTML/CSS-Grundlagen am [Arbeitsauftrag](/sitzungen/02-auftrag-inf1.md) |
| - | Ostermontag | - | - | - | - |
| 3 | 24.03.17 | HTML-Formularversand und serverseitige Datenverarbeitung | [Anfertigung eines 6-Zeiler-Exposés; Ausarbeitung Formular](/sitzungen/auftraege/03-Mo-2017-04-24-auftrag-inf2.md) | Referatswahl: Lernmaterialtypen; Navigation & Bilder mit HTML/CSS | [Navigationen & Bilder; Referat zu Lernmaterialtypen](/sitzungen/auftraege/03-Mo-2017-04-24-auftrag-inf1.md) |
| - | Tag der Arbeit | - | - | - | - |
| 4 | 08.05.17 | Einrichtung Raspberry Pi | Schreiben: Kurzanleitung Einrichtung Raspberry Pi | Referat; Technische Zusammenhänge des WWW | |
| 5 | 15.05.17 | Bereitstellung Formularwebsite auf RPI | Einrichtung Hosting für INF1 auf RPI | Referat; Grundlagen Linux (Bash-Befehle) | Eine HTML-Seite auf den RPI laden |
| 6 | 22.05.17 | Vorstellung Flask | Aufgabe Flask | Referat | |
| 7 | 29.05.17 | Wiederholung und Rückschau | Schreiben: Flask und Formulare | Referat | |
| - | Pfingstmontag | - | - | - | - |
| 8 | 12.06.17 | Arbeit am Projekt | | Referat | |
| 9 | 19.06.17 | Arbeit am Projekt | Schreiben: Versuchsanordnung | Referat | |
| 10 | 26.06.17 | Arbeit am Projekt | | | |
| 11 | 03.07.17 | Arbeit am Projekt | | | |
| 12 | 10.07.17 | Abschlussbesprechung, Feedback | Anfertigung der Hausarbeit | Abschlussbesprechung, Feedback | Vorbereitung mdl. Prüfung |
| Nr. | Datum | Inhalte INF2 | Aufgabe | Inhalte INF1 | Aufgabe |
| --- | -------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| 1 | 03.04.17 | Vorstellung, Vorbereitung, Organisatorisches | Installation bzw. Einrichtung Python auf dem eigenen Rechner | Vorstellung, Vorbereitung, Organisatorisches | [Voraussetzungen](/voraussetzungen/zusammenfassung.html) |
| 2 | 10.04.17 | [Grundlagen HTML-Formulare](/sitzungen/02-Mo-2017-04-10.md) | Ideensammlung Projekt; [Arbeitsauftrag](/sitzungen/02-auftrag-inf2.md) | Vorstellung Arbeitsauftrag; [Grundlagen HTML und CSS](sitzungen/02-Mo-2017-04-10.md) | Selbstständige Erarbeitung HTML/CSS-Grundlagen am [Arbeitsauftrag](/sitzungen/02-auftrag-inf1.md) |
| - | Ostermontag | - | - | - | - |
| 3 | 24.03.17 | [HTML-Formularversand und serverseitige Datenverarbeitung](/sitzungen/03-Mo-2017-04-24.md) | [Anfertigung eines 6-Zeiler-Exposés; Ausarbeitung Formular](/sitzungen/auftraege/03-Mo-2017-04-24-auftrag-inf2.md) | [Referatswahl: Lernmaterialtypen; Navigation & Bilder mit HTML/CSS](/sitzungen/03-Mo-2017-04-24.md) | [Navigationen & Bilder; Referat zu Lernmaterialtypen](/sitzungen/auftraege/03-Mo-2017-04-24-auftrag-inf1.md) |
| - | Tag der Arbeit | - | - | - | - |
| 4 | 08.05.17 | Einrichtung Raspberry Pi | Schreiben: Kurzanleitung Einrichtung Raspberry Pi | Referat; Technische Zusammenhänge des WWW | |
| 5 | 15.05.17 | Bereitstellung Formularwebsite auf RPI | Einrichtung Hosting für INF1 auf RPI | Referat; Grundlagen Linux (Bash-Befehle) | Eine HTML-Seite auf den RPI laden |
| 6 | 22.05.17 | Vorstellung Flask | Aufgabe Flask | Referat | |
| 7 | 29.05.17 | Wiederholung und Rückschau | Schreiben: Flask und Formulare | Referat | |
| - | Pfingstmontag | - | - | - | - |
| 8 | 12.06.17 | Arbeit am Projekt | | Referat | |
| 9 | 19.06.17 | Arbeit am Projekt | Schreiben: Versuchsanordnung | Referat | |
| 10 | 26.06.17 | Arbeit am Projekt | | | |
| 11 | 03.07.17 | Arbeit am Projekt | | | |
| 12 | 10.07.17 | Abschlussbesprechung, Feedback | Anfertigung der Hausarbeit | Abschlussbesprechung, Feedback | Vorbereitung mdl. Prüfung |
Anmerkung: Zum Ende der Veranstaltung gibt es noch Lücken in der Planung. Das ist Absicht, um auf die sich entwickelnden Projekte eingehen zu können.
## Anmerkungen zum Fahrplan der Veranstaltung
......
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