Skip to content

Commit add938c

Browse files
committed
updated structure
1 parent 550140b commit add938c

12 files changed

Lines changed: 178 additions & 77 deletions

Material/Notes/Bewertung_Projektarbeit.md

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -29,25 +29,25 @@ Für die Bewertung sind die folgenden Punkte relevant (Details siehe unten):
2929

3030
# Abgabe
3131

32-
Die finale Abgabe erfolgt am Ende des zweiten Theoriesemesters (Juli/August).
33-
Ein genauer Termin wird noch bekanntgegeben (mindestens 3 Wochen im Voraus).
32+
Die finale Abgabe erfolgt am Ende des zweiten Theoriesemesters (Juli/August). Ein genauer Termin wird noch bekanntgegeben (mindestens 3 Wochen im Voraus).
3433

35-
Das Projekt ist jedoch über beide Semester zu bearbeiten, nicht erst kurz vor der Abgabe. Daher gibt es folgende Zwischenabgaben, welche in die Bewertung mit einfließen. Die jeweiligen Termine werden ebenfalls rechtzeitig bekanntgegeben:
34+
Das Projekt ist über beide Semester zu bearbeiten, nicht erst kurz vor der Abgabe. Daher gibt es folgende Zwischenabgaben, welche in die Bewertung mit einfließen. Die jeweiligen Termine werden ebenfalls rechtzeitig bekanntgegeben:
3635

37-
1.⁠ ⁠Zwischenabgabe am 03.02.2025: GitHub Repository mit (leerem) Projekt, funktionierender GitHub Action für den Build und GitHub Pages (oder einem Äquivalent).
36+
1.⁠ ⁠Zwischenabgabe am 03.02.2025
37+
1.1 Projektidee, GitHub Repository mit (leerem) Projekt, funktionierender GitHub Action für den Build und GitHub Pages (oder einem Äquivalent).
38+
1.2 Kurz die Idee / das Konzept der Anwendung mit Mockups, Wireframes, Zeichnungen vorstellen
39+
1.3 Präsentation ca. 5 - 10 Minuten pro Gruppe (zeigen dass alles geforderte da ist und funktioniert)
3840

39-
- Präsentation ca. 5 Minuten pro Gruppe (zeigen dass alles geforderte da ist und funktioniert)
41+
2.⁠ ⁠Zwischenabgabe am Ende des ersten Semesters
42+
2.1 Inhalt ist je nach gewähltem Projekt vorgegeben (nur Frontend)
43+
2.2 Präsentation ca. 10 Minuten pro Gruppe
4044

41-
2.⁠ ⁠Zwischenabgabe: Zwischenstand (vorgegeben je nach gewähltem Projekt, nur Frontend). Ende des ersten Semesters
45+
3.⁠ ⁠Zwischenabgabe am Anfang des zweiten Semesters
46+
3.1 Inhalt ist je nach gewähltem Projekt vorgegeben (nur Frontend)
47+
3.2 Festlegen der Backend Technologien (Typescript ist Pflicht)
48+
3.3 Präsentation ca. 10 Minuten pro Gruppe
4249

43-
- Präsentation ca. 10 Minuten pro Gruppe
44-
45-
3.⁠ ⁠Zwischenabgabe: Zwischenstand (vorgegeben je nach gewähltem Projekt). Anfang des zweiten Semesters.
46-
47-
- Präsentation ca. 10 Minuten pro Gruppe
48-
- Festlegen der Backend Technologien
49-
50-
4.⁠ Finale Präsentation und Abgabe Quellcode + Dokumentation (15 Minuten pro Gruppe), genauer Termin folgt, Klausurwoche
50+
4.⁠ Finale Präsentation und Abgabe Quellcode + Dokumentation (15 Minuten pro Gruppe), genauer Termin folgt, Klausurwoche
5151

5252
## Abzugebende Artefakte
5353

@@ -82,9 +82,9 @@ Die Dokumentation muss einige Punkte zwingend enthalten, da sie zentraler Bestan
8282

8383
# Technologische Vorgaben
8484

85-
- Frontend: TypeScript und React
86-
- Backend: TypeScript oder C# (wird anfang des zweiten Semesters festgelegt)
87-
- Weitere Technologien und Bibliotheken nur nach Absprache
85+
- Frontend: TypeScript und React/Next.js
86+
- Backend: TypeScript
87+
- Weitere Technologien und Bibliotheken immer nur nach Absprache
8888

8989
# Bewertungskriterien
9090

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
title: Aufgabe Webdesign
3+
date: 2025-02-13
4+
lang: de-DE
5+
author: "Silas Schnurr"
6+
...
7+
8+
# Aufgabe Webdesign
9+
10+
Diese Aufgabe ist in **Einzelarbeit** durchzuführen.
11+
12+
1. Überlegen Sie, wie die Anwendung des Gruppenprojekts aussehen könnte, welche Funktionen Sinnvoll sein könnten und wie man innerhalb der Anwendung navigieren könnte. Berücksichtigen Sie dabei insbesondere die Inhalte der Vorlesungseinheit Webdesign. Stimmen Sie sich hierzu **NICHT** mit den anderen Gruppenmitgliedern ab.
13+
14+
2. Visualisieren Sie Ihre Ideen Grob, z. B. mit Stift und Papier, diagrams.net, Figma oder einem beliebigen anderen Tool. Bei der Visualisierung ist es wichtig, dass Sie mithilfe dieser später anderen Ihre Ideen zur Anwendung demonstrieren können.
15+
16+
## Ziel der Aufgabe
17+
18+
Ziel ist es, erste konkrete Ideen für die Gestaltung und Struktur der Webanwendung Ihres Gruppenprojekts zu entwickeln. Dabei sollen Sie sich bewusst eigenständig Gedanken machen und unterschiedliche Perspektiven zulassen, bevor im Projektteam Entscheidungen getroffen werden.
19+
20+
## 1. Konzeption der Anwendung
21+
22+
Überlegen Sie sich, wie die Webanwendung Ihres Gruppenprojekts grundsätzlich aufgebaut sein könnte. Gehen Sie dabei insbesondere auf folgende Punkte ein:
23+
24+
- Welche Zielgruppe soll die Anwendung ansprechen?
25+
- Welche zentralen Funktionen sollte die Anwendung aus Ihrer Sicht unbedingt bieten?
26+
- Welche Inhalte werden dargestellt (z. B. Seiten, Ansichten, Formulare)?
27+
- Wie könnten User durch die Anwendung navigieren (z. B. Menüstruktur, Startseite, Unterseiten)?
28+
- Welche Aspekte aus der Vorlesungseinheit Webdesign sind dabei besonders relevant und wie können diese Umgesetzt werden?
29+
30+
**Wichtig:** Stimmen Sie sich zu diesem Zeitpunkt **nicht** mit den anderen Gruppenmitgliedern ab. Es geht ausdrücklich um Ihre eigene Vorstellung und Interpretation.
31+
32+
## 2. Visuelle Darstellung Ihrer Ideen
33+
34+
Setzen Sie Ihre Überlegungen anschließend in einer groben Visualisierung um. Ziel ist nicht ein fertiges Design, sondern eine verständliche Darstellung Ihrer Ideen.
35+
36+
Mögliche Formen der Visualisierung sind zum Beispiel:
37+
38+
- Skizzen mit Stift und Papier
39+
- einfache Wireframes (z. B. mit diagrams.net, Figma oder ähnlichen Tools)
40+
- schematische Darstellungen von Seiten und Navigation
41+
42+
Achten Sie darauf, dass Ihre Visualisierung so gestaltet ist, dass Sie damit anderen Personen Ihre Ideen erklären und diskutieren können.
43+
44+
## Information: Einordnung in die Softwareentwicklung
45+
46+
Dieses Vorgehen ist Teil der Konzeptions- und Entwurfsphase in der Softwareentwicklung und wird häufig als Discovery Phase bezeichnet. Es dient dazu, Anforderungen frühzeitig grob zu umreisen, Ideen sichtbar zu machen und eine gemeinsame Grundlage für die spätere Umsetzung zu schaffen.

Material/Notes/Exercises/Exercise_2025-01-20_HTTP.md

Lines changed: 0 additions & 25 deletions
This file was deleted.
Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
title: Übungsaufgabe HTTP
3+
date: 2025-02-03
4+
lang: de-DE
5+
author: "Silas Schnurr"
6+
...
7+
8+
# Übungsaufgabe HTTP
9+
10+
Im Rahmen dieser Übung arbeiten Sie an der Entwicklung einer webbasierten Anwendung zur Erfassung, Speicherung und Auswertung
11+
von Arbeitszeiten – eine sogenannte digitale "Stechuhr".
12+
13+
## Aufgabe 1
14+
15+
Definieren Sie die REST API zum Erstellen, Löschen und Verändern von protokollierten Arbeitszeiten, um die Grundlagen von HTTP und REST zu vertiefen.
16+
17+
Beachten Sie dabei die REST-Prinzipien!
18+
19+
Definieren Sie hierfür bitte die drei erforderlichen Endpunkte wie folgt. Der Endpunkt für das Abrufen eines Datensatzes ist bereits gegeben.
20+
21+
- HTTP-Methode: GET
22+
- Safe / Idempotent: Ja / Ja
23+
- Pfad: /times/{id}
24+
- content type: application/json
25+
- Beispiel request & response Payload:
26+
- request: n.a.
27+
- response: `{ "id": 42, "start": "2025-07-24T08:00:00", "end": "2025-07-24T12:00:00" }`
28+
- Mögliche Statuscodes:
29+
30+
## Aufgabe 2
31+
32+
Ziel dieser Aufgabe ist es, ausgehend von Ihrer Anwendungsidee eine erste konzeptionelle REST-API zu entwerfen. Sie sollen dabei überlegen, welche Daten und Funktionen Ihre Anwendung benötigt und wie diese über eine REST-Schnittstelle bereitgestellt werden könnten.
33+
34+
- Es bietet Sich an, die Lösung dieser Aufgabe in einer Tabelle festzuhalten.
35+
36+
- Nutzen Sie bereits erstellte Wireframes, Designs oder Skizzen, um sicherzustellen, dass:
37+
- alle geplanten Funktionen der Anwendung durch die API abgedeckt sind
38+
- es eine nachvollziehbare Verbindung zwischen UI-Funktion und REST-Endpoint gibt
39+
40+
Einordnung in die Softwareentwicklung
41+
42+
### 1. Identifikation der REST-Ressourcen
43+
44+
Leiten Sie aus Ihrer geplanten Anwendung die zentralen Ressourcen ab. Ressourcen sind fachliche Objekte Ihrer Anwendung, z. B. Benutzer, Einträge, Kommentare, Aufgaben, Termine, etc.
45+
46+
Beschreiben Sie für jede Ressource:
47+
48+
- den Pfad der Ressource (z. B. /users, /projects)
49+
- eine kurze fachliche Bedeutung
50+
51+
### 2. HTTP-Methoden und Endpunkte
52+
53+
- Überlegen Sie für jede Ressource, mit welchen HTTP-Methoden auf sie zugegriffen werden soll, z. B. GET, POST, PUT, PATCH, DELETE, ...
54+
55+
- Beschreiben Sie den Endpoint (z. B. GET /projects/{id}) und grob die Funktion des Endpoints
56+
57+
- Überlegen Sie, wie die Datenstrukturen aussehen könnten, die zwischen Client und Server ausgetauscht werden.
58+
- Welche Felder enthält ein Request beim Anlegen oder Ändern einer Ressource?
59+
- Wie könnte eine typische Response aussehen?
60+
61+
Es reicht aus, vereinfachte Beispiel-Payloads anzugeben.
62+
63+
## Information: Einordnung in die Softwareentwicklung
64+
65+
Diese Aufgabe ist Teil der Konzeptions- und Discovery-Phase der Softwareentwicklung und wird häufig als API-Design oder API-Konzeption bezeichnet. Ziel ist es, frühzeitig zu klären, welche Schnittstellen benötigt werden, bevor mit der eigentlichen Implementierung begonnen wird.

Material/Slides/01_Vorstellung_Intro.md

Lines changed: 24 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
title: "Vorlesung Webengineering I - Einführung"
33
topic: "Webengineering_1_1"
44
author: "Lukas Panni"
5+
date: 2026-01-13
56
theme: "Berlin"
67
colortheme: "dove"
78
fonttheme: "structurebold"
@@ -30,21 +31,16 @@ plantuml-format: svg
3031

3132
### Dozent Semester 1: Silas Schnurr
3233

34+
- Per Du
35+
- E-Mail-Adresse: schnurr.silas@edu.dhbw-karlsruhe.de
36+
3337
- 2015 - 2025 bei PeakAvenue in Bühl
3438
- 2015 - 2018: Ausbildung Fachinformatiker Anwendungsentwicklung
3539
- 2018 - 2021: _B.Sc._ Informatik - DHBW Karlsruhe
3640
- 2021 - 2023: _M.Sc._ Informatik - HKA
3741
- 2023 - 2025: Softwarearchitekt & Teamleiter Softwareentwicklung
3842
- Seit Dezember 2025 IT-Berater/Lead Developer bei PTA IT-Beratung
3943

40-
(E-Mail-Adresse findet ihr in Moodle)
41-
42-
### Ihr
43-
44-
- Name und Firma
45-
- Vorkenntnisse: Programmiersprachen, Webengineering, Tools: git, docker, VSCode, ...
46-
- Erwartungen & Wünsche
47-
4844
## Ablauf
4945

5046
- Vorlesung: 66 Vorlesungseinheiten (VE)
@@ -57,7 +53,7 @@ plantuml-format: svg
5753
- Keine Vorkenntnisse erforderlich
5854
- Tools: Texteditor, Browser, Terminal, Git, (evtl. Container-Tools wie Docker)
5955
- Empfehlung: [VSCode](https://code.visualstudio.com/) / [WebStorm](https://www.jetbrains.com/de-de/webstorm/) (kostenlos für Studenten), Firefox, Docker-Desktop
60-
- kleine Hausaufgaben
56+
- Hausaufgaben
6157

6258
## Material
6359

@@ -99,11 +95,18 @@ plantuml-format: svg
9995
- TODO-App
10096
- Zeiterfassung ("Stechuhr")
10197
- Karteikarten-Anwendung ("Anki")
102-
- Snake
103-
- Pac-Man
104-
- API Dashboard
10598

106-
\rightarrow{} siehe [Projekt Themen](https://github.com/DHBW-KA-Webengineering/Lecture_Webengineering/blob/2025/Material/Notes/Projekt_Themen.md)
99+
\rightarrow{} siehe [Projekt Themen](https://github.com/DHBW-KA-Webengineering/Lecture_Webengineering/blob/2026/Material/Notes/Projekt_Themen.md)
100+
101+
## Vorstellung Studis
102+
103+
1. Gruppen für Projekt bilden und Gruppenname festlegen
104+
105+
2. Vorstellung
106+
2.1 Name und Firma
107+
2.2 Welche Projektgruppe
108+
2.3 Vorkenntnisse: Programmiersprachen, Webengineering, Tools: git, docker, VSCode, ...
109+
2.4 Erwartungen & Wünsche
107110

108111
# Vorlesungsinhalt & Lernziele
109112

@@ -114,20 +117,13 @@ plantuml-format: svg
114117
- Erstellen einfacher Webanwendungen
115118
- Grundlagen Webdesign & Mobile Webdesign
116119

117-
## Vorlesungsinhalt / Agenda (vorläufig)
118-
119-
- Grundlagen "Web" & Webanwendungen \rightarrow{} _ab heute_
120-
- HTTP & REST
121-
- Einfache Webanwendungen
122-
- HTML
123-
- CSS
124-
- Einführung Webdesign
125-
- Dynamische Webanwendungen
126-
- JavaScript + Intro TypeScript
127-
- Interaktion Client/Server
128-
- Fortgeschrittene Themen
129-
- Architektur moderner Webanwendungen
130-
- Security: Angriffe, Best-Practices
120+
## Vorlesungsinhalte Semester 1
121+
122+
1. Einführung & Webdesign \rightarrow{} _heute_
123+
2. Grundlagen Internet & Webanwendungen: HTTP & REST
124+
3. Einfache Webanwendungen: HTML & CSS
125+
4. Dynamische Webanwendungen (JavaScript, React/Next.js, Typescript)
126+
5. Architektur moderner Webanwendungen
131127

132128
# Einführung: Webanwendungen
133129

@@ -172,3 +168,4 @@ plantuml-format: svg
172168
- Antwort: 200 OK, HTML-Code, CSS-Code
173169

174170
- Was passiert bei komplexeren Websites?
171+
- Gibt es noch weitere "Haltestellen" bei einem Webseitenaufruf?
Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
title: "Vorlesung Webengineering 1 - Webdesign"
3-
topic: "Webengineering_1_9"
3+
topic: "Webengineering_1_2"
4+
date: 2026-01-13
45
author: "Lukas Panni"
56
theme: "Berlin"
67
colortheme: "dove"
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: "Vorlesung Webengineering I - HTTP & REST"
3-
topic: "Webengineering_1_2"
4-
date: 2025-01-16
3+
topic: "Webengineering_1_3"
4+
date: 2026-01-20
55
author: "Lukas Panni / Silas Schnurr"
66
theme: "Berlin"
77
colortheme: "dove"
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: "Vorlesung Webengineering I - HTML"
3-
topic: "Webengineering_1_2"
3+
topic: "Webengineering_1_4"
44
date: 2025-01-23
55
author: "Lukas Panni"
66
theme: "Berlin"

Material/Slides/08_React_Next.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
title: "Vorlesung Webengineering 1 - Next.js"
3+
topic: "Webengineering_1_8"
4+
author: "Silas Schnurr"
5+
theme: "Berlin"
6+
colortheme: "dove"
7+
fonttheme: "structurebold"
8+
fontsize: 12pt
9+
urlcolor: olive
10+
linkstyle: boldslanted
11+
aspectratio: 169
12+
lang: de-DE
13+
section-titles: true
14+
plantuml-format: svg
15+
...
16+
17+
# React und Next.js
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: "Vorlesung Webengineering 1 - TypeScript"
3-
topic: "Webengineering_1_8"
3+
topic: "Webengineering_1_9"
44
author: "Lukas Panni"
55
theme: "Berlin"
66
colortheme: "dove"
@@ -14,7 +14,7 @@ section-titles: true
1414
plantuml-format: svg
1515
...
1616

17-
# TypeScript - das bessere JavaScript
17+
# TypeScript im Frontend
1818

1919
## Probleme von JavaScript
2020

0 commit comments

Comments
 (0)