In diesem ersten Kapitel geht es HTML und CSS, also die Basiselemente der Gestaltung einer Webseite, zu denen in den folgenden Kapiteln (2 und 3), die Programmierung – mit TypeScript – sowie die Anbindung an Server und Datenbank – mit Node.js und MongoDB – hinzukommt.
Zunächst geht es in der Einführung allerdings darum eine funktionsfähige Arbeitsumgebung an den Start zu bringen.
- Einführung in die Thematik
- Vorbereitung / Tools
- HTML Basics
- HTML Bilder und Verweise
V 1.1 7. Oktober (Vorlesungsmaterialien) P 1.1 9. Oktober (Praktikumsaufgabe)
– HTML Audio und Video
- HTML Struktur
- Browser und Web Inspector
V 1.2 14. Oktober (Vorlesungsmaterialien) P 1.2 16. Oktober (Praktikumsaufgabe)
- Einführung
- Eigenschaften
- Selektoren
- Kaskadierung und Vererbung
- Box Model und Maßeinheiten
V 1.3 21. Oktober (Vorlesungsmaterialien) P 1.3 23. Oktober (Praktikumsaufgabe)
- Komplexe Selektoren
- Positionierung, Flussverhalten und Layout
- Responsive Design
- Transition und Animation
V 1.4 28. Oktober (Vorlesungsmaterialien) P 1.4 30. Oktober (Praktikumsaufgabe)
Die Praktikumsabgabe zu diesem Kapitel ist eine wohlgestaltete Portofolio-Webseite mit, der Sie sich präsentieren und die sich aus mehreren HTML-Documenten sowie einer oder mehrerer CSS-Dateien zusammensetzt (ohne JS). Die zu beachtenen Details finden Sie in den Teilaufgaben P 1.2, P 1.3, P 1.4 mit (*) gekennzeichnet.
zur Praktikumsabgabe zum Kapitel 1 (auf FELIX){:target="_blank"}
In diesem zweiten großen Abschnitt des Praktikums werden wir uns ganz dem Einstieg und der Entwicklung mit Typescript widmen.
- Arbeitsumgebung
- Variablen
- Typen
- Operatoren
- Funktionen
- Schleifen
V 2.1 4. November (Vorlesungsmaterialien) P 2.1 6. November (Praktikumsaufgabe)
- Vorgehensweisen und best practices
- Arrays
- Interfaces
- Objekte
- Canvas
V 2.2 11. November (Vorlesungsmaterialien) P 2.2 13. November (Praktikumsaufgabe)
- DOM Klassenhierarchie
- DOM Manipulation
- Events
- Event Handling
- Event Listener
V 2.3 18. November (Vorlesungsmaterialien) P 2.3 20. November (Praktikumsaufgabe)
- JSON
- Local Storage / Cookies
V 2.4 25. November (Vorlesungsmaterialien) P 2.4 27. November (Praktikumsaufgabe)
- fetch
- Promise
- async / await
V 2.5 2. Dezember (Vorlesungsmaterialien) P 2.5 4. Dezember (Praktikumsaufgabe)
In diesem Kapitel soll nach anfänglichen Einstiegsaufgaben eine Webseite umgesetzt werden, die dem Nutzer erlaubt – ähnlich wie bei einem Klappbuch – ein Bild aus drei oder mehr verschiedenen Teilen zusammenzusetzen, für die jeweils mehrere Varianten zur Auswahl stehen. Es könnte sich z.B. um das Bild eines Menschen handeln, das sich aus einem Kopf, einem Rumpf und Beinen zusammensetzt, oder auch eines Tieres, einer Rakete oder einer Topfpflanze.
Zu jedem der Teile kann auf einer eigenen Unterseite eine von verschiedenen Varianten ausgewählt werden - also z.B. eine Seite um den Kopf auszuwählen, eine für den Rumpf und eine für die Beine.
Auf einer weiteren Seite wird das Gesamtbild als eine Kombination der ausgewählten Varianten grafisch (z.B. img / canvas) präsentiert. Diese Seite soll nach erfolgter Auswahl angezeigt werden.
Die Auswahlmöglichkeiten sollen dynamisch aus einer JSON-Datei geladen und auf der Seite angezeigt werden. Außerdem muss die Umsetzung so dynamisch sein, dass bei (geringfügigen) Änderungen in der JSON Datei die Seite sich automatisch beim nächsten Laden anpasst. Die Nutzung passender Interfaces (oder Klassen) ist dabei unverzichtbar.
Der aktuelle Status der Auswahl wird über Local Storage (oder Cookies) gespeichert und die schließlich ausgewählte Kombination der Varianten an einen Server übermittelt und dessen Antwort in geeigneter, nutzerfreundlicher Form auf der Gesamtbild-Seite ausgegeben.
Code, der sich nicht an die Code Guidelines hält, mit ganz besonderem Augenmerk auf Formatierung, Typisierung und Benennung, ist nicht akzeptabel!
zur Praktikumsabgabe zum Kapitel 2 (auf FELIX){:target="_blank"}
- Formulare
- FormData
- URL
- NodeJS
V 3.1 9. Dezember (Vorlesungsmaterialien) P 3.1 11. Dezember (Praktikumsaufgabe)
- URL Modul
- Request Handling
- (POST Request)
V 3.2 16. Dezember (Vorlesungsmaterialien) P 3.2 18. Dezember (Praktikumsaufgabe)
- Datenbanken Einführung
- Datenbank lokal
- Datenbank online
V 3.3 13. Januar (Vorlesungsmaterialien) P 3.3 15. Januar (Praktikumsaufgabe)
- Datenbank und Node.js Kommunikation
- Pipeline: HTML → Server → Datenbank
V 3.4 20. Januar (Vorlesungsmaterialien) P 3.4 22. Januar (Praktikumsaufgabe)
In diesem Kapitel soll das Zusammenspiel zwischen Client, Server und Datenbank gelernt und umgesetzt werden.
Erstellen sie eine Seite auf der sich Nutzer mit ihren Daten (Name,Nachnahme, E-mail, Adresse etc.) und einem Passwort über ein Formular registrieren können. Über einen Button werden diese Daten an Ihren Heroku-Server geschickt. Dieser prüft ob bereits ein Account mit der angegebenen E-mail Adresse existiert. Falls nein, legt er den neuen User in Ihrer MongoDB ab. Falls ja gibt er eine Antwort an den Client zurück, die dort angezeigt wird, sodass der User weiß, dass die E-Mail bereits belegt ist.
Erstellen Sie einen Button auf einer verlinkten Unterseite, der eine Anfrage an den Server schickt und alle Namen aller User in der Datenbank dem Client zurückgibt. Dieser zeigt diese dann an.
Erstellen Sie eine weitere Unterseite auf der sich ein Nutzer einloggen kann. Hier wird per Formular die Mail des Nutzers und sein Passwort zum Server geschickt. Der Server überprüft ob es die Kombination aus Passwort und E-Mail gibt und gibt eine entsprechende Nachricht an den Client zurück, der diese dann anzeigt.
zur Praktikumsabgabe zum Kapitel 3 (auf FELIX){:target="_blank"}