---
marp: true
theme: gaia
paginate: true
backgroundColor: #fff
header: "Web Engineering – DHBW Stuttgart"
footer: "Michael Czechowski – SoSe 2026"
title: Intro
---

<style>
:root {
  --color-foreground: #1a1a2e;
  --color-highlight: #d63384;
  --color-dimmed: #4a4a6a;
}
section.invert {
  --color-foreground: #fff;
}
section {
  font-size: 1.4rem;
}
h1 {
  color: #a02060;
}
section.invert h1 {
  color: #fff;
}
h2 {
  color: #1f2937;
}
section.invert h2 {
  color: #f48fb1;
}
pre {
  background: #0f0f23;
  color: #f48fb1;
  border-radius: 8px;
  border-left: 3px solid #d63384;
}
pre code {
  background: transparent;
  color: inherit;
}
code {
  background: #1a1a2e;
  color: #f48fb1;
  padding: 0.15em 0.4em;
  border-radius: 4px;
}
a {
  color: var(--color-highlight);
}
</style>

<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #000 -->

![bg cover opacity:0.2](./assets/background.png)

# Web Engineering

**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik

**Sommersemester 2026**

[https://librete.ch/dhbw/](https://librete.ch/dhbw/)

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/qr/slides-dhbw.png)

---

# Ressourcen zum Selbstlernen

- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/)
- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/)
- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/)
- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/)
- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/)

---

<!-- _class: lead -->

# Herzlich Willkommen!

## 1. Sitzung: 08.05.2026

---

# Über mich

![bg right:33% fit](./assets/logos/collage.png)

**Michael Werner Czechowski**

- Systems and Platform Engineer
- Schwerpunkte:
  - Web-Technologien, Barriere-Armut, Open Source
- Hintergrund:
  - Philosophie (Uni Stuttgart)
  - Wirtschaftsinformatik (Leibniz-FH Hannover)
- Honorardozent (DHBW Stuttgart, HdM Stuttgart, Leibniz-FH)
- Kontakt: michael.czechowski@lehre.dhbw-stuttgart.de

---

# Vorstellungsrunde

## Wer bist du, was machst du?

> Ich bin \_\_\_, mache bei \_\_\_ \_\_\_ und ein Fun Fact über mich ist, dass ich ...

- ... sämtliche One Piece Bände gelesen habe.
- ... alle XKCD Comics mit Titel kenne.
- ... irgendwann bei \_\_\_ arbeiten möchte.
- ... Paulaner Spezi im Blindtest herausschmecken kann.

---

# Vorlesungsplan

<style scoped>
.lp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 0.5rem;
}
.lp-card {
  border: 1px solid #d63384;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  font-size: 0.95em;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lp-card .head {
  font-weight: bold;
  color: #a02060;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85em;
}
.lp-card .head .num {
  font-size: 1.1em;
}
.lp-card .topic {
  color: #1a1a2e;
  line-height: 1.25;
}
.lp-card.milestone {
  background: #fce4ec;
  border-color: #a02060;
  border-width: 2px;
}
.lp-card.milestone .topic {
  font-weight: bold;
}
</style>

<div class="lp-grid">
  <div class="lp-card"><div class="head"><span class="num">1</span><span>08.05.</span></div><div class="topic">Intro · Projektgruppen · Internet 101</div></div>
  <div class="lp-card"><div class="head"><span class="num">2</span><span>15.05.</span></div><div class="topic">HTML und CSS (Frameworks)</div></div>
  <div class="lp-card"><div class="head"><span class="num">3</span><span>22.05.</span></div><div class="topic">JS (Frameworks) und npm</div></div>
  <div class="lp-card"><div class="head"><span class="num">4</span><span>29.05.</span></div><div class="topic">nodeJS: Scripting, Running, Building</div></div>
  <div class="lp-card"><div class="head"><span class="num">5</span><span>05.06.</span></div><div class="topic">Express API, CRUD, Middlewares</div></div>
  <div class="lp-card milestone"><div class="head"><span class="num">6</span><span>12.06.</span></div><div class="topic">Projektwerkstattbericht</div></div>
  <div class="lp-card"><div class="head"><span class="num">7</span><span>19.06.</span></div><div class="topic">Testing (Unit · Integration · E2E)</div></div>
  <div class="lp-card"><div class="head"><span class="num">8</span><span>26.06.</span></div><div class="topic">TypeScript</div></div>
  <div class="lp-card"><div class="head"><span class="num">9</span><span>03.07.</span></div><div class="topic">Docker · Proxies · DBs</div></div>
  <div class="lp-card"><div class="head"><span class="num">10</span><span>10.07.</span></div><div class="topic">Wrap-up & Projektsupport</div></div>
  <div class="lp-card milestone"><div class="head"><span class="num">11</span><span>17.07.</span></div><div class="topic">Präsentation</div></div>
</div>

---

# Erwartungen und Wünsche

- Was haben wir bisher gelernt?
- Was kennen wir bereits aus dem Arbeitskontext?
- Welche Technologien nutzen wir bereits?
- Was möchte ich hier lernen: Frontend, Backend, DevOps?
- Eigene FOSS entwickeln?
- CLI-Skills verbessern?
- Cloud, Cloud, Cloud?

---

# Prüfungsleistung – Übersicht

Eigenes Projekt: **Web-Applikation** XOR **Backend** (API/CLI).

| Punkte | Bereich |
|--------|---------|
| 30 | Grundanforderungen (Projektgrundlagen + Präsentation) |
| 25 | Clean Code Prinzipien |
| 25 | Accessibility & UX |
| 20 | Technische Umsetzung |
| **100** | **Basispunkte** |
| +15 | Bonuspunkte (max. 3 Features a 5 P.) |

---

# Prüfungsleistung – Grundanforderungen (30 P.)

**Projektgrundlagen (15 P.)**
- Funktionsfähige Anwendung (8 P.)
- Repository mit Versionskontrolle (4 P.)
- Projektdokumentation / README (3 P.)

**Präsentation (15 P.)**
- Elevator Pitch (5 P.)
- Technische Präsentation (5 P.)
- Projektevolution: wie hat sich das Projekt vs. Ursprungsidee verändert? (5 P.)

---

# Prüfungsleistung – Clean Code (25 P.)

**Projektstruktur (10 P.)**
- Ordnerstruktur (5 P.)
- Datei-Organisation (5 P.)

**Code-Qualität (10 P.)**
- KISS – Keep It Simple, Stupid (3 P.)
- Beschreibende Namen (3 P.)
- Funktionsverantwortlichkeiten (4 P.)

**Kommentierung & Dokumentation (5 P.)**

---

# Prüfungsleistung – Accessibility & UX (25 P.)

**Web Accessibility (15 P.)**
- Semantisches HTML (5 P.)
- ARIA Labels & Alt-Texte (5 P.)
- Tastaturnavigation (5 P.)

**Responsive Design (10 P.)**
- Mobile First Approach (5 P.)
- Flexbox/Grid Layout (5 P.)

---

# Prüfungsleistung – Technische Umsetzung (20 P.)

- Plattformunabhängigkeit (5 P.)
- Package Management (5 P.)
- Build Tools & Optimierung (5 P.)
- Live-Demo (5 P.)

---

# Prüfungsleistung – Bonuspunkte (max. 15 P.)

Mindestens 2 Bereiche wählen, je 5 Punkte:

- API Integration
- Local Storage / State Management
- Progressive Web App Features
- Testing
- Erweiterte Responsive Features (3+ Breakpoints)
- Security Features

---

# Prüfungsleistung – Abgabe & Termine

- **Code-Upload:** bis 27.07.
- **Präsentation:** 17.07. (Gruppen, ~10 Min.)

Details: https://git.librete.ch/DHBW/pruefungsleistung

---

<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #000 -->

# Was ist (k)eine Web Applikation?
## Exkurs

---

# Was ist (k)eine Web Applikation?

**Keine Web Applikation ist:**
* Betriebssystem (GNU/Linux, Windows, macOS, iOS, Android)
* Desktop-Applikation
* Mobile-Applikation
* Embedded System (Microcontroller, IoT)

**Eine Web Applikation ist:**
* plattformunabhängig (läuft im Browser)
* nutzt in der Regel HTTP-Requests
* keine Installation nötig — serverseitig aktualisiert
* gebaut in Web-Technologien (HTML, CSS, JS/TS)
* skalierbar durch verteilte Architektur

---

# Internet-Timeline

| Jahr | Meilenstein |
|------|-------------|
| **1966** | ARPANET-Projekt startet (DARPA) |
| **1969** | Erste Verbindung zwischen UCLA und Stanford |
| **1974** | TCP/IP-Protokoll entwickelt |
| **1989** | Tim Berners-Lee erfindet das WWW (CERN) |
| **1993** | Mosaic — erster grafischer Browser |
| **1994** | W3C gegründet (HTML, CSS, SVG, WCAG) |
| **1995** | ECMAScript / JavaScript wird Standard |
| **2008** | V8 JavaScript Engine (Chrome / Node.js) |

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/arpanet.jpg)

---

# Das WWW (1989)

**Tim Berners-Lee** am **CERN** (Genf)

**Problem:** Wissenschaftler:innen können Forschungsdokumente nicht verlinken — Inkompatible Systeme, kein gemeinsames Format.

**Lösung — drei Bausteine:**

- **HTML** — Auszeichnungssprache für Dokumente
- **HTTP** — Protokoll zur Übertragung
- **URL** — eindeutige Adressen

**1991:** erste Webseite geht online · 1993 vom CERN gemeinfrei freigegeben.

→ WWW ≠ Internet. Das WWW ist eine **Anwendung auf** dem Internet.

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/mosaic.jpg)

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg cover](./assets/img_633d7b91366e0-1025x538-768x403.jpg)

---

# Heute: Physische Infrastruktur

- **5,5 Milliarden** Menschen online
- **> 400 Unterseekabel**, ca. **1,3 Mio. km** Glasfaser
- Daten reisen mit **Lichtgeschwindigkeit**
- Latenz Frankfurt — New York: ~80 ms

→ Keine "Cloud" ohne Kabel. Das Internet ist **physische** Infrastruktur — und damit angreifbar.

**Geopolitik:** Five-Eyes-Allianz (USA, UK, CA, AU, NZ) zapft Unterseekabel ab (Programm "Tempora", aufgedeckt 2013 durch Snowden). DE ist Teil der Fourteen Eyes.

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/demos/browser-server-sequence.png)


---

# HTTP – Hypertext Transfer Protocol

**Request:**
```
GET /products HTTP/1.1
Host: localhost:8080
```

**Response:**
```
HTTP/1.1 200 OK
Content-Type: application/json

[{"id": 1, "name": "Produkt A"}, ...]
```

---

<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #000 -->

# Onboarding
## Tools, Runtimes, Workflows

---

# Werkzeuge & Betriebssystem

**Erforderliche Werkzeuge:**
- **Terminal** (zsh / bash / fish / pwsh) — Kommandozeile
- **Editor** (siehe folgende Folie)
- **JavaScript-Runtime** (Node.js / Bun / Deno)
- **Browser mit DevTools** (Chromium / Firefox / Safari)
- **Git** — verteiltes Versionskontrollsystem (Stand der Industrie)

**OS-Empfehlung:**

| OS | Status |
|----|--------|
| **macOS** | First-class, viele Tools "just work" |
| **Linux** | First-class, beste Server-Parität |
| **Windows + WSL2** | Empfohlen — Windows-CLI hat Edge Cases |
| **Windows nativ** (PowerShell) | Funktioniert, aber holpriger Pfad |

---

# Node.js installieren – macOS

Empfohlen: **LTS** (aktuell **Node.js 24** — Stand 2026).

Paketmanager: **[Homebrew](https://brew.sh)**

```bash
# Homebrew installieren (falls nicht vorhanden)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Node.js LTS installieren
brew install node@24

# Version prüfen
node --version
npm --version
```

Alternative: Installer von [nodejs.org](https://nodejs.org)

---

# Node.js installieren – Linux

Empfohlen: **LTS** (aktuell **Node.js 24**).

**Debian / Ubuntu** ([NodeSource](https://github.com/nodesource/distributions)):
```bash
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt install -y nodejs
```

**Arch / Manjaro:**
```bash
sudo pacman -S nodejs npm
```

**Fedora / RHEL:**
```bash
sudo dnf module install nodejs:24/common
```

→ Distro-Pakete sind oft **veraltet**. Versionsmanager (folgende Folie) bevorzugen.

---

# Node.js installieren – Windows

Empfohlen: **LTS** (aktuell **Node.js 24**).

**Option 1: winget** (empfohlen, Win 10/11):
```powershell
winget install OpenJS.NodeJS.LTS
```

**Option 2: Chocolatey** ([chocolatey.org](https://chocolatey.org)):
```powershell
choco install nodejs-lts
```

**Option 3: Scoop** ([scoop.sh](https://scoop.sh)):
```powershell
scoop install nodejs-lts
```

**Option 4:** Installer von [nodejs.org](https://nodejs.org)

→ **Empfehlung:** WSL2 + Linux-Workflow nutzen.

---

# Direkt-Install: Wenn es eng wird

**Typisches Szenario** — drei parallele Projekte mit unterschiedlichen Anforderungen:

| Projekt | Stack | Node-Version |
|---------|-------|--------------|
| Praktikums-API | Express (Legacy) | 18.x (LTS Hydrogen) |
| Studienarbeit | Next.js 15 | 22.x (LTS Jod) |
| Aktuelles Lab-Projekt | neueste Features | 24.x (Iron, current LTS) |

System-Install kennt nur **eine** Node-Version global → Konflikt.

---

# Symptome im Alltag

- `npm install` bricht mit `engines`-Warning ab
- native Module (z. B. `node-sass`) bauen nicht
- CI-Pipeline ist grün, lokal rot — oder umgekehrt
- erheblicher Zeitverlust beim Debuggen von Versions-Konflikten

→ Lösung: **Versionsmanager** und Node-Version pro Projekt pinnen.

---

# Node-Versionsmanager

Verschiedene Projekte brauchen oft verschiedene Node-Versionen. **Lösung:** Versionsmanager.

| Tool | Sprache | Geschwindigkeit | Plattform |
|------|---------|-----------------|-----------|
| **nvm** | Bash | langsam (Shell-Funktion) | macOS, Linux |
| **fnm** | Rust | sehr schnell | macOS, Linux, Windows |
| **asdf** | Bash | mittel, multi-language | macOS, Linux |
| **volta** | Rust | schnell, pinning per `package.json` | alle |

```bash
# fnm
curl -fsSL https://fnm.vercel.app/install | bash
fnm install --lts        # aktuell Node 24
fnm use lts-latest

# .nvmrc / .node-version automatisch
echo "lts/*" > .nvmrc
fnm use   # liest .nvmrc
```

---

# Alternative Runtimes

| Runtime | Erschienen | Engine | USP |
|---------|------------|--------|-----|
| **Node.js** | 2009 | V8 (C++) | Standard, größtes Ökosystem |
| **Deno** | 2020 | V8 (Rust) | Sicherheit, TypeScript nativ, Std-Lib |
| **Bun** | 2022 | JavaScriptCore (Zig) | Geschwindigkeit, all-in-one |

```bash
# Deno
curl -fsSL https://deno.land/install.sh | sh
deno run main.ts

# Bun
curl -fsSL https://bun.sh/install | bash
bun install
bun run dev
```

→ Im Kurs primär **Node.js**. Bun und Deno sind ebenfalls zulässig.

---

# Editor (IDE)

- **VS Code** (empfohlen) — kostenlos, große Plugin-Auswahl
- **JetBrains WebStorm** — sehr mächtig, kostenpflichtig
  - kostenlos für Studierende via [JetBrains Education](https://www.jetbrains.com/community/education/#students)
- **Vim / Neovim / Emacs** — für CLI-Profis
- **Zed** — modern, schnell

---

# Browser DevTools

Chromium / Firefox / Safari — `F12` oder `Cmd+Opt+I`

<small>Chromium = Open-Source-Basis von Chrome, Edge, Brave, Opera, Vivaldi etc.</small>

**Wichtigste Panels:**
- **Network** — HTTP-Requests, Responses, Timing
- **Console** — `console.log`, JS-Errors, REPL
- **Elements** — DOM-Inspektor, Live-CSS-Editor
- **Sources** — Debugger, Breakpoints, Source-Maps
- **Performance** — Profiling, Frame-Rate, FPS
- **Application** — LocalStorage, Cookies, Service Workers

---

# HTTP-Clients

- **Bruno** ([usebruno.com](https://usebruno.com)) — open source, git-friendly
- **Hoppscotch** ([hoppscotch.io](https://hoppscotch.io)) — open source, browser-basiert (vormals Postwoman)
- **Insomnia** / **Postman** — etabliert, freemium
- **curl** / **httpie** — CLI (Command-Line Interface, scriptbar)

---

# Git Setup & Workflow

**Einmalige Konfiguration:**
```bash
git config --global user.name "Vorname Nachname"
git config --global user.email "vorname.nachname@example.com"
git config --global init.defaultBranch main
git config --global pull.rebase true
```

**SSH-Key für GitHub/GitLab:**
```bash
ssh-keygen -t ed25519 -C "vorname.nachname@example.com"
cat ~/.ssh/id_ed25519.pub   # → in GitHub-Settings einfügen
```

**Tägliche Befehle:**
```bash
git status                  # was hat sich geändert?
git add <file>              # für Commit vormerken
git commit -m "feat: ..."   # Conventional Commits
git push                    # hochladen
git pull --rebase           # neueste Änderungen holen
```

---

# Projekt-Skeleton

```bash
mkdir mein-projekt && cd mein-projekt
git init
npm init -y                 # erzeugt package.json
echo "node_modules" > .gitignore
echo ".env" >> .gitignore
npm install express
```

**`package.json` minimal:**
```json
{
  "name": "mein-projekt",
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "start": "node index.js",
    "dev": "node --watch index.js"
  }
}
```

`.env` für Secrets (nie committen!), `.env.example` mit Dummy-Werten committen.

---