Die Vorlesungen und Praktika zu Grundlagen interaktiver Systeme für die Studiengänge MIB und MKB werden im SoSe 2020 gemeinsam von Prof. Dr. Norbert Schnell, Lukas Scheuerle und Andreas Reich in Zusammenarbeit mit Prof. Dr. Gabriel Rausch, Prof. Jirka Dell'Oro-Friedl und Prof. Dr. Stephanie Heintz zusammengestellt und betreut.
Die Vorlesung findet durch aufgezeichenete Videokapitel sowie einen wöchentlichen Q&A Online Termin mit Fragen und Antworten zu den Kursinhalten statt (zum Vorlesungstermin, gemeinsam für MIB und OMB). Die Teilnehmenden sind dazu angehalten sich die Kursmaterialien vor dem jeweiligen Q&A Termin zu erarbeiten. Die vollständigen Materialien zu einem Termin – inkl. Praktikumsaufgaben – werden spätenstens bis zum Freitagmittag der Vorwoche unter dem entsprechenden Kapitel (Links in diesem Dokument weiter unten) veröffentlicht. Auch die Praktikumsgruppen werden in Online Terminen betreut.
Alle Online Termine werden über alfaview® abgehalten. Die Q&A Termine werden zusammengefasst und im Abschnitt Q&A des jeweiligen Kurskapitels (hier unten) nachträglich veröffentlicht.
Folgende wöchentliche Termine sind vorgesehen (mit Links zum Betreten der Online-Räume):
⚠ Die Räume haben sich teilweise geändert! ⚠
- Q&A Termine zur Vorlesung: Mi, 8:30 Uhr → Online-Raum DM-03
- Praktikumstermine
- OMB A (blau): Mi, 2. Block, Lukas Scheuerle → Online-Raum DM-14
- OMB B (orange): Mi, 2. Block, Andreas Reich → Online-Raum DM-14
- MIB A (lila): Mi, 3. Block, Lukas Scheuerle → Online-Raum DM-14
- MIB B (gelb): Mi, 3. Block, Andreas Reich → Online-Raum DM-14
Der Ablauf des Praktikums wird im Abschnitt Ablauf Vorlesung und Praktikum des Kapitels Einleitung erklärt.
Die Abgaben der Lösungen zu den Aufgaben erfolgen über die Praktikumsseite, auf der Sie zunächst ihren Steckbrief registrieren müssen (siehe Links auf der Seite). Lösungen der Praktikumsaufgaben gelten nur als abgegeben, wenn sie in Ihrem Steckbrief auf der Praktikumsseite publiziert sind. Die Zugangsdaten zur Praktikumsseite erhalten Sie per Email sowie bei den Online Terminen. Die Abgabe muss in der Regel bis Sonntag 18:00 Uhr vor dem nächsten Praktikumstermin erfolgen. Die genauen Abgabetermine werden jeweils mit der Aufgabe veröffentlicht.
Die Praktikumsaufgaben werden laufend mit einem Ampelsystem bewertet:
- Das Ampelsystem hat 5 Stufen zwischen grün bis rot – alle Ampeln starten auf grün.
- Das Praktikum ist bestanden, wenn die Ampel nach der letzten Aufgabe nicht auf rot steht.
- Bei folgenden Mängeln einer Abgabe wird die Ampel heruntergesetzt:
- Abgabe nicht erfolgt: 2 Stufen
- Abgabe ist unzureichend oder kopiert: 1 Stufe
Um eine Herabstufung bei mangelhafter Abgabe zu beheben, müssen Sie ggf. eine neue Lösung publizieren und Ihrem Betreuer den Sachverhalt während des nächsten Praktikumstermins erklären. Bei erfolgreicher Verteidigung wird die Ampel allerdings höchstens eine Stufe wieder heraufgesetzt.
Für Fragen zum Ablauf des Kurses, den Kursinhalten und den Praktikumsaufgaben sowie um auf Probleme bezüglich der Lehrveranstaltung aufmerksam zu machen, stehen Ihnen folgene Kanäle zur Verfügung:
- Wortmeldungen während der Q&A Termine zu den Kursen
- Wortmeldungen während der Online Praktikumstermine
- GitHub Issues (in diesem Repository), entweder individuell für Probleme oder als Sammlung für Fragen für die Q&A Termine.
Ein gutes GitHub Issue zu einem Problem mit Ihrer Aufgabenlösung beinhaltet:
- eine klare Beschreibung des Problems, ggf. mit der erhaltenen Fehlermeldungen (Fehlermeldungen wörtlich in den Text kopieren!)
- einen Link zur (wohlformatierten!) Quelldatei in Ihrem Repository auf github.com (Quellcode bitte nicht in den Text kopieren!)
- einen Link zum Ergebnis auf der Seite in Ihren GitHub Pages auf github.io
Beantworten Sie auch gerne die von Ihren Kommilitonen erstellten GitHub Issues.
- Einführung in die Thematik
- Vorbereitung / Tools
- Ablauf Vorlesung und Praktikum
- HTML Basics
- HTML Syntax und erste Elemente
- HTML Bilder und Verweise
- HTML5 Familie
- Multimediale Inhalte, Audio, Video
- Einführung
- Eigenschaften
- Selektoren
- Kaskadierung und Vererbung
- CSS Box Model und Maßeinheiten
- Komplexe Selektoren
- Positionierung, Flussverhalten und Layout
- Responsive Design
- Transition und Animation
- Arbeitsabläufe
- Variablen
- Typen
- Kontrollstrukturen
- DOM Manipulation
- Events
- Event Handling
- Event Listener
- DOM Klassenhierarchie
- JSON -> Daten laden und speichern
- Local Storage -> Daten laden und speichern
- Kommunikation -> Anfragen, fetch, async/await
- Formulare
- FormData
- URL
- NodeJS
- URL Modul
- Request Handling
- (POST Request)
- Datenbanken Einführung
- Datenbank lokal
- Datenbank online
- Datenbank & Node.js Kommunikation
- Pipeline: HTML → Server → Datenbank