diff --git a/SUMMARY.md b/SUMMARY.md index 7c7cb5cc6dc61486129e792bd46fab00ae94331e..b1989faf39c6d8270c68e7cf7dd622c45686bbdc 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -40,6 +40,7 @@ * [Screencasts & Videos](material/typen/screencasts.md) * [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/typen/abb/html-cheat-sheet.png b/material/typen/abb/html-cheat-sheet.png new file mode 100644 index 0000000000000000000000000000000000000000..f20000499667ad24727bd605e2e5c269a45ebe00 Binary files /dev/null and b/material/typen/abb/html-cheat-sheet.png differ diff --git a/material/typen/blogs.md b/material/typen/blogs.md index f8c7531797ae5f671a784f519535c5ed40cdf692..7e095f8bbaf255bb21c475f9ec3a93fe176daa5c 100644 --- a/material/typen/blogs.md +++ b/material/typen/blogs.md @@ -1,22 +1,13 @@ -# 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 diff --git a/material/typen/cheatcheets.md b/material/typen/cheatcheets.md index 9f65243d548f4b4a17434ca13d4e0bde0dfd46e0..7fb373ac3b05443ea89895da32fda18bbc97fbc0 100644 --- a/material/typen/cheatcheets.md +++ b/material/typen/cheatcheets.md @@ -1,7 +1,7 @@ -# 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. + +![Screenshot eines Cheat Sheets von WebsiteUp](abb/html-cheat-sheet.png) diff --git a/material/typen/einleitung.md b/material/typen/einleitung.md index 0f3cc18e828cf6775727a5142db4d4d1f27df285..a1b57f3f1267dcdbd99c7fd7506044a3552cd230 100644 --- a/material/typen/einleitung.md +++ b/material/typen/einleitung.md @@ -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) diff --git a/material/typen/interaktive.md b/material/typen/interaktive.md index 7ad4aeed6a17560ac1887b7637db6c877f544583..554698bf59ac0c1a0a6e367389710a3762835558 100644 --- a/material/typen/interaktive.md +++ b/material/typen/interaktive.md @@ -1,10 +1,17 @@ -# 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.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*) + +## 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! diff --git a/material/typen/kurse.md b/material/typen/kurse.md index e242d91c58683856b12e92610d3851fbb2f28574..845a6ff4cabf95885a7791cca7d3678ab8888b8b 100644 --- a/material/typen/kurse.md +++ b/material/typen/kurse.md @@ -1,7 +1,18 @@ -# 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. diff --git a/material/typen/lernleitfaden.md b/material/typen/lernleitfaden.md index bf0e8af5e11a766efeaefca789df4a49494b8f66..20afd282f106f5e9fc7703b2955d11025aeb9b32 100644 --- a/material/typen/lernleitfaden.md +++ b/material/typen/lernleitfaden.md @@ -1,13 +1,19 @@ -# Lernleitfäden +# Lernleitfäden und Webseiten -- 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. -- 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. -- http://www.afterhoursprogramming.com/tutorial/HTML/Introduction/ -Inhalte: Erklärende Texte, Codebeispiele, Testoberfläche +## HTML und CSS allgemein + +- 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*. ## Listen, Menüs und Navigationen diff --git a/material/typen/referenzen.md b/material/typen/referenzen.md new file mode 100644 index 0000000000000000000000000000000000000000..297e339a072eaa2c62caef4ec0885fc5074d27e3 --- /dev/null +++ b/material/typen/referenzen.md @@ -0,0 +1,22 @@ +# 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. diff --git a/material/typen/screencasts.md b/material/typen/screencasts.md index 237578ac61dd710cae5a8fd0ea3dfd0c80b92a2f..d8f3aea6f3a2a99ec827e8b065500928daa47994 100644 --- a/material/typen/screencasts.md +++ b/material/typen/screencasts.md @@ -1,14 +1,22 @@ -# Screencasts & Videos +# Screencasts und Videos -- https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css -- https://www.udemy.com/learn-html5-programming-from-scratch/learn/v4/overview -- https://css-tricks.com/video-screencasts/page/8/ +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. + +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. + +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 +- 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 ## 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 +- [Simple Horizontal Navigation](http://css-snippets.com/simple-horizontal-navigation/) | Videotutorial und Transkript ## Allgemein zum Internet diff --git a/material/typen/sonstige.md b/material/typen/sonstige.md index cee37847ecaa2ec7a20a58eed77af066a5a39a45..a24b18ac462363aed1395e94b76c363f35ce182d 100644 --- a/material/typen/sonstige.md +++ b/material/typen/sonstige.md @@ -1,6 +1,9 @@ # Sonstige +Hier sind zunächst alle Quellen aufgeführt, die (noch) nicht eingeordnet sind. + ## Wikis -**Nur CSS** -http://css-discuss.incutio.com/?page=PrintStylesheets +### CSS + +- http://css-discuss.incutio.com/?page=PrintStylesheets diff --git a/sitzungen/auftraege/03-Mo-2017-04-24-auftrag-inf1.md b/sitzungen/auftraege/03-Mo-2017-04-24-auftrag-inf1.md index 9c2579e76055679e938338e345107abbe49adb68..281cd05ef2ba6c6457f3bd95a8c3d643693e9ac5 100644 --- a/sitzungen/auftraege/03-Mo-2017-04-24-auftrag-inf1.md +++ b/sitzungen/auftraege/03-Mo-2017-04-24-auftrag-inf1.md @@ -5,14 +5,14 @@ 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. +- 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 -### HTML & CSS +### 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). @@ -20,17 +20,21 @@ Sie haben eine erste Webseite erstellt, die es jetzt gilt, weiter auszuarbeiten. - Arbeiten Sie weiter an Ihrem Website-Projekt. Fangen Sie gern auch nochmal von vorne an, Sie werden merken, dass Ihre Erfahrungen in den Neuanfang einfließen. So erlangen Sie Routine. - Erstellen Sie eine vertikale oder horizontale Navigation. -- Binden Sie verschiedene Bilder in die Seite ein. So können Sie bspw. ein so genanntes *keyvisual* prominent am Kopf der Seite positionieren, ein Logo links oben in der Ecke platzieren oder auch Produktbilder in den Inhalt der Seite einbetten. +- Binden Sie verschiedene Bilder in die Seite ein. So können Sie bspw. ein so genanntes *Keyvisual* prominent am Kopf der Seite positionieren, ein Logo links oben in der Ecke platzieren oder auch Produktbilder in den Inhalt der Seite einbetten. - Erstellen Sie für jeden Menüpunkt Ihrer Navigation ein weiteres HTML-Dokument. Alle Dokumente sollen das gleiche Aussehen haben. - Verlinken Sie die Menüpunkte Ihrer Navigation mit denen neuen Dokumenten. Sorgen Sie für Konsistenz in der Navigation: Von jeder Seite Ihrer Webpräsenz sollen Nutzer_innen auf alle Seiten gelangen können. -### Referat zu Lernmaterialtypen +### 2. Referat zu Lernmaterialtypen -Webtechnologie ist komplex, das werden Sie schon gemerkt haben. Nicht mehr nur HTML & CSS reichen aus, um im Bereich Webdesign und -programmierung bestehen zu können. Daher gibt es auch nicht *das* Buch, mit dem Sie alle Themen dieses Feldes erlernen können. Vielmehr gibt es verschiedene Typen von Lernmaterialien, die wir im Laufe der Veranstaltung kennen lernen und besprechen wollen. Sie finden [bei den Materialien](/material/typen/einleitung.md) eine kuratierte Auswahl, die für den Anfang reichen sollte. +Webtechnologie ist komplex, das werden Sie schon gemerkt haben. Nicht mehr nur HTML & CSS reichen aus, um im Bereich Webdesign und -programmierung bestehen zu können. Daher gibt es auch nicht *das* Buch, mit dem Sie alle Themen dieses Feldes erlernen können. Vielmehr gibt es verschiedene Typen von Lernmaterialien, die wir im Laufe der Veranstaltung kennen lernen und besprechen wollen. Sie finden [in den Materialien](/material/typen/einleitung.md) eine kuratierte Auswahl, die für den Anfang reichen sollte. + +#### Intention + +Da Sie am Ende der Veranstaltung eine mündliche Prüfung ablegen müssen, dient dieses Referat dazu, schon einmal das Sprechen über Technik zu üben. Es soll Sie dafür sensibilisieren, technische Sachverhalte verständlich und strukturiert darzustellen, Begriffe zu erklären und das Argumentieren zu üben. #### Aufgaben -- Wählen Sie aus den Lernmaterialtypen zunächst eine Kategorie aus, der zuneigen. Sie werden wissen, ob Sie lieber Videos schauen oder Bücher lesen, um sich Wissen anzueignen. +- Wählen Sie aus den Lernmaterialtypen zunächst eine Kategorie aus, der Sie zuneigen. Sie wissen vielleicht schon, ob Sie lieber Videos schauen oder Bücher lesen, um sich Wissen anzueignen. - Wählen Sie nun in der Kategorie zwei Materialien aus, mit denen Sie sich in Ihrem Lernprozess näher auseinandersetzen wollen. Lernen Sie mit diesem Material! - Bereiten Sie ein Kurzreferat mit folgender Gliederung vor: - **Einordnung des Themas**: Worum geht es? @@ -38,13 +42,17 @@ Webtechnologie ist komplex, das werden Sie schon gemerkt haben. Nicht mehr nur H - **Darstellung der Erfahrungen**: Wie haben Sie mit den Materialien gelernt? Was war dabei gut, was schlecht? Was haben Sie über sich selbst als Lernenden herausgefunden? - **Abschließende Betrachtung**: Wie bewerten Sie die Lernmaterialie? Für wen ist sie geeignet? Wie kann ihr Einsatz in Ihrem zukünftigen Unterricht erfolgen? + ## Material Die zur Auswahl stehenden Lernmaterialtypen finden Sie [am Ende dieses Skripts](/material/typen/einleitung.md). -## Abgabetermin +## Abgabetermine * Geben Sie eine erste Version am **Dienstag, d. 02.05.2017**, ab. Sie erhalten dann Feedback zu Ihrer Arbeit. * Geben Sie die finale Version am **Sonntag, d. 07.05.2017**, ab. +- Melden Sie bis **Sonntag, d. 07.05.2017** ihr gewünschtes Referatsthema im Kanal *Referate* in Mattermost. So können wir Doppelungen vermeiden. Sie können auch zu zweit ein Thema bearbeiten. **Wichtig!** Die Abgabe erfolgt bitte **nicht mehr per Mail**, sondern wie [in der Anleitung "Studienleistungen in GitLab hochladen"](#) beschrieben. Nur so kann das Dozententeam detailliertes und konstruktives Feedback an Ihrem Text leisten! + +[^1]: Falls Ihre Bilder zu groß sind, finden Sie im Artikel [Resizing Photos for the Web with GIMP](https://thehelloworldprogram.com/web-development/resizing-photos-for-the-web-with-gimp/) eine Anleitung, diese mit GIMP kleinzurechnen. diff --git a/sitzungen/auftraege/03-Mo-2017-04-24-auftrag-inf2.md b/sitzungen/auftraege/03-Mo-2017-04-24-auftrag-inf2.md index 0ab3c94f3bba4466327b48ab8751e5225ccdc376..1ee1a78fea9169b554b540b29be26cc58de70a6f 100644 --- a/sitzungen/auftraege/03-Mo-2017-04-24-auftrag-inf2.md +++ b/sitzungen/auftraege/03-Mo-2017-04-24-auftrag-inf2.md @@ -10,7 +10,7 @@ Der folgende Arbeitsauftrag ist für die Gruppe **INF2** gedacht. ## Inhalte und Aufgaben des Auftrags -### Projektfindung +### 1. Projektfindung Wählen Sie ein Projekt, an dem Sie die technischen Details dynamischer Webseiten kennenlernen. Sie sind in Ihrer Wahl relativ frei, jedoch sollen sich die folgenden Inhalte der Veranstaltung in dem Projekt wiederfinden: @@ -25,8 +25,10 @@ Wählen Sie ein Projekt, an dem Sie die technischen Details dynamischer Webseite - Lesen Sie den Text von Kühl (2016) zur Anfertigung eines so genannten 6-Zeiler-Exposés.[^1] - Formulieren Sie gemäß der dort vorgeschlagenen Gliederung einen Sechszeiler für Ihr Forschungsvorhaben. +- **Wichtig!** Erstellen Sie den Sechszeiler in einem reinen Textformat mit der Dateiendung `.md`. Sie werden im Laufe der Veranstaltung eine entspannte Einführung in [Markdown](http://texwelt.de/wissen/markdown_help/) zur Formatierung von Texten erhalten. Das geht prima in Atom. +Laden Sie **keine Word- oder PDF-Dokumente** hoch, da diese in GitLab nicht kommentiert werden können. -### Formulare mit HTML und CSS +### 2. Formulare mit HTML und CSS Sie haben ein erstes Formular mit HTML und CSS erstellt und sich [mit dem Formularversand zum Server](#) auseinander gesetzt. Jetzt geht es darum, diese Kenntnisse zu vertiefen und zu verfeinern. diff --git a/sitzungen/fahrplan.md b/sitzungen/fahrplan.md index ecb3c7f2bc3215f85c019c84070cc98add03808e..7f332da959237573c591b54cbc9c25716802b3f1 100644 --- a/sitzungen/fahrplan.md +++ b/sitzungen/fahrplan.md @@ -5,7 +5,7 @@ | 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 | Projektwahl: HTML-Formularversand und serverseitige Datenverarbeitung | Anfertigung eines 6-Zeiler-Exposés | Referatswahl: Lernmaterialtypen | [Vorbereitung Referatsthemen](/material/typen/einleitung.html) | +| 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 | diff --git a/styles/pdf.css b/styles/pdf.css index 4424c9e1586412867be8283b972eafe2be4fa241..d1a811f4fa05d4caf328616c9ed5ab5745b9a4c0 100644 --- a/styles/pdf.css +++ b/styles/pdf.css @@ -24,9 +24,10 @@ font-size: 12px !important; } -.version-badge { +.badge-wrapper { display: none; } + /*Formatierung von Tasten des Keyboards, http://www.jimmyscode.com/css-styling-for-kbd-tags/*/ kbd { diff --git a/styles/website.css b/styles/website.css index 6a4502188d4fa0405e0bcf907498da6c93bfa0cb..1b1a9485d3d73df0b47ae0162bb8718dd7b18fe8 100644 --- a/styles/website.css +++ b/styles/website.css @@ -100,10 +100,6 @@ div.book-summary ul.summary li a { line-height: 1em; } -/*.markdown-section a.version-badge { - display: none; -}*/ - .badge-wrapper { display: none; }