diff --git a/SUMMARY.md b/SUMMARY.md index b1989faf39c6d8270c68e7cf7dd622c45686bbdc..282136377c0027591d2626cad5b416e2d612bb40 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -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) diff --git a/material/css3.md b/material/css3.md index 288b9b0c8b4568f114983840806f7624f6e35480..e6a1047bb37a1bb3b380730ce6d484ab43f4b427 100644 --- a/material/css3.md +++ b/material/css3.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. diff --git a/material/typen/blogs.md b/material/typen/blogs.md index 7e095f8bbaf255bb21c475f9ec3a93fe176daa5c..ee7af26fa2ae553f65810974baa07b4751a4d3ef 100644 --- a/material/typen/blogs.md +++ b/material/typen/blogs.md @@ -1,4 +1,4 @@ -# 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. diff --git a/material/typen/buecher.md b/material/typen/buecher.md index 67097c5b55b9e26c81293f456c00fa8dbfcd0eb0..d1643fc30a671bd220c736211c5fbf7c14ebb08a 100644 --- a/material/typen/buecher.md +++ b/material/typen/buecher.md @@ -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. diff --git a/material/typen/cheatcheets.md b/material/typen/cheatcheets.md index 7fb373ac3b05443ea89895da32fda18bbc97fbc0..5a3d49fdd655d850f500c1d03d6eb16dfb554693 100644 --- a/material/typen/cheatcheets.md +++ b/material/typen/cheatcheets.md @@ -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 WebsiteUp](abb/html-cheat-sheet.png) diff --git a/material/typen/einleitung.md b/material/typen/einleitung.md index a1b57f3f1267dcdbd99c7fd7506044a3552cd230..d52e6150c67e829ed1ef539478d0d9e68210ae19 100644 --- a/material/typen/einleitung.md +++ b/material/typen/einleitung.md @@ -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) diff --git a/material/typen/interaktive.md b/material/typen/interaktive.md index 554698bf59ac0c1a0a6e367389710a3762835558..87f0f6ec12f3bb2c7b9093cad957716baf56de45 100644 --- a/material/typen/interaktive.md +++ b/material/typen/interaktive.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*) diff --git a/material/typen/lernleitfaden.md b/material/typen/lernleitfaden.md index 20afd282f106f5e9fc7703b2955d11025aeb9b32..da9b91bc87114e7ce3f737a5d1179ffe1fbd4ea7 100644 --- a/material/typen/lernleitfaden.md +++ b/material/typen/lernleitfaden.md @@ -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 diff --git a/material/typen/screencasts.md b/material/typen/screencasts.md index d8f3aea6f3a2a99ec827e8b065500928daa47994..5d7bf2cf0eea194d8ab60677e601aa8475aeeefa 100644 --- a/material/typen/screencasts.md +++ b/material/typen/screencasts.md @@ -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 diff --git a/material/typen/sonstige.md b/material/typen/sonstige.md deleted file mode 100644 index a24b18ac462363aed1395e94b76c363f35ce182d..0000000000000000000000000000000000000000 --- a/material/typen/sonstige.md +++ /dev/null @@ -1,9 +0,0 @@ -# Sonstige - -Hier sind zunächst alle Quellen aufgeführt, die (noch) nicht eingeordnet sind. - -## Wikis - -### CSS - -- http://css-discuss.incutio.com/?page=PrintStylesheets diff --git a/sitzungen/fahrplan.md b/sitzungen/fahrplan.md index 7f332da959237573c591b54cbc9c25716802b3f1..b655643f14b4f64ff3d1487dd40acf855c35c680 100644 --- a/sitzungen/fahrplan.md +++ b/sitzungen/fahrplan.md @@ -1,22 +1,22 @@ # 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