dhbw inhalt: vorlesungsplan tabelle → cards-grid (4×3, milestones hervorgehoben), über-mich logos-collage, internet-101 erweitert (timeline + arpanet-bg + WWW-1989 + mosaic-bg + unterseekabel + heute + five-eyes), a11y/WCAG-block (~12 slides nach native html, vor css), direkt-install slide gesplittet (szenario / symptome), code-block-color → #f48fb1 (alle 8 files), section.invert h2 #f48fb1 für barrierefreiheit, ressourcen-slide auf 01-05 nach cover, alle emojis raus (✓✗⚠️🍞🥬🏆 + ↔), ESM statt CJS in 03/04, librete.ch domain, kleinere fixes (chromium statt chrome, CLI aufgelöst, JetBrains edu, hoppscotch, SOLID-abk., node 24 LTS, brew/winget/scoop/choco-links, vim/neovim/emacs editoren, herzlich willkommen)

2026-05-07 17:09:04 +02:00
parent 52312f1cb8
commit c242e0f947
8 changed files with 414 additions and 66 deletions
@@ -34,7 +34,7 @@ section.invert h2 {
 }
 pre {
  background: #0f0f23;
-  color: #d63384;
+  color: #f48fb1;
  border-radius: 8px;
  border-left: 3px solid #d63384;
 }
@@ -44,7 +44,7 @@ pre code {
 }
 code {
  background: #1a1a2e;
-  color: #d63384;
+  color: #f48fb1;
  padding: 0.15em 0.4em;
  border-radius: 4px;
 }
@@ -67,6 +67,16 @@ a {

 ---

+# 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!
@@ -94,19 +104,61 @@ a {

 # Vorlesungsplan

-| Sitzung | Datum | Thema |
-|---------|-------|-------|
-| 1  | 08.05. | Intro, Projektgruppen, Internet 101 |
-| 2  | 15.05. | HTML und CSS (Frameworks) |
-| 3  | 22.05. | JS (Frameworks) und npm |
-| 4  | 29.05. | nodeJS: Scripting, Running and Building |
-| 5  | 05.06. | Express API, CRUD und "Middlewares" |
-| 6  | 12.06. | **Projektwerkstattbericht** |
-| 7  | 19.06. | Testing (unit, integration, end-to-end) |
-| 8  | 26.06. | TypeScript |
-| 9  | 03.07. | Docker, Proxies and DBs |
-| 10 | 10.07. | Wrap-up & Projektsupport |
-| 11 | 17.07. | **Präsentation** |
+<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>

 ---

@@ -160,25 +212,74 @@ Eigenes Projekt: **Web-App** ODER **Backend** (API/CLI — Command-Line Interfac
 - **Code-Upload:** bis 27.07.
 - **Präsentation:** 17.07. (Gruppen, ~10 Min.)

-Details: https://git.dailysh.it/DHBW/pruefungsleistung
+Details: https://librete.ch/DHBW/pruefungsleistung

 ---

-# Internet 101 – Zeitleiste
+# Internet-Timeline

-| Jahr | Ereignis |
-|------|----------|
-| 1966 | ARPANET |
-| 1969 | RFCs |
-| 1986 | IETF |
-| 1992 | Internet Society |
-| 1974 | TCP/IP und HTTP(S) |
-| 1987 | Domain Names und DNS |
-| 1993 | "Erster" Browser: Mosaic |
-| 1994 | W3C (HTML, XML, CSS, SVG, WCAG etc.) |
-| 1995 | ECMAScript (JS) |
-| 2006/08 | V8 JS Runtime Engine |
-| Heute | 1,3 Mio. km Unterseekabel |
+| 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.

 ---

@@ -310,7 +411,7 @@ scoop install nodejs-lts

 # Direkt-Install: Wenn es eng wird

-**Typisches Szenario** in Studium und Beruf — drei parallele Projekte mit unterschiedlichen Anforderungen:
+**Typisches Szenario** — drei parallele Projekte mit unterschiedlichen Anforderungen:

 | Projekt | Stack | Node-Version |
 |---------|-------|--------------|
@@ -318,9 +419,12 @@ scoop install nodejs-lts
 | 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.
+System-Install kennt nur **eine** Node-Version global → Konflikt.
+
+---
+
+# Symptome im Alltag

-**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
@@ -760,6 +864,213 @@ Was früher mit JavaScript gelöst wurde, kann HTML heute selbst. JS dafür einz
 <!-- _header: '' -->
 <!-- _backgroundColor: #000 -->

+# Barrierefreiheit
+## Accessibility (a11y)
+
+---
+
+# Wie nutzen Menschen das Web?
+
+| Eingabe | Nutzungsweise |
+|---------|---------------|
+| **Maus** | Klicken, Scrollen |
+| **Tastatur** | Tab-Navigation, Enter, Pfeiltasten |
+| **Screenreader** | NVDA, VoiceOver, TalkBack, Orca |
+| **Sprachsteuerung** | "Klicke auf Anmelden" |
+| **Augensteuerung** | Eye-Tracking |
+| **Switch-Geräte** | Ein-/Aus-Schalter (motorische Einschränkungen) |
+
+→ Nicht alle Menschen nutzen Maus oder Touchscreens gleichermaßen.
+
+---
+
+# Web-Zugänglichkeit — Statistik
+
+WHO: ca. **15 % der Weltbevölkerung** mit Behinderung — über **1 Milliarde** potenzielle Nutzer:innen.
+
+| Typ | Permanent | Temporär | Situativ |
+|-----|-----------|----------|----------|
+| Visuell | Blindheit | Augen-OP | Grelle Sonne |
+| Motorisch | Amputation | Gebrochener Arm | Kind auf dem Arm |
+| Auditiv | Taubheit | Ohrenentzündung | Laute Umgebung |
+| Kognitiv | Legasthenie | Müdigkeit | Ablenkung |
+
+**Curb-Cut-Effekt:** Bordsteinabsenkung für Rollstühle hilft auch Kinderwagen, Rollkoffern, Fahrrädern.
+
+---
+
+# Warum Barrierefreiheit?
+
+**Rechtlich (DE / EU):**
+- **EAA** — European Accessibility Act, in Kraft seit 28.06.2025
+- **BFSG** — DE-Umsetzung des EAA, betrifft auch Privatwirtschaft
+- **BITV 2.0** — Barrierefreie Informationstechnik-Verordnung (öff. Stellen)
+- Bußgelder bis **100.000 €**
+
+**Ethisch:** Teilhabe und digitale Inklusion.
+
+**Praktisch:**
+- Bessere UX für **alle** (mobile, ältere Menschen, situative Einschränkungen)
+- SEO-Bonus durch semantisches HTML, Alt-Texte
+- Größerer Markt — ca. 15 % der Bevölkerung
+
+---
+
+# WCAG: Der Standard
+
+**W**eb **C**ontent **A**ccessibility **G**uidelines · Herausgeber: W3C / WAI
+
+**Aktuell:** WCAG 2.2 (verbindlich seit Okt. 2023). WCAG 3 in Working-Draft.
+
+**4 Prinzipien (POUR):**
+
+| Prinzip | Bedeutung |
+|---------|-----------|
+| **P**erceivable | Wahrnehmbar — Inhalte müssen erkennbar sein |
+| **O**perable | Bedienbar — Funktionen müssen nutzbar sein |
+| **U**nderstandable | Verständlich — Inhalte müssen klar sein |
+| **R**obust | Robust — funktioniert mit verschiedenen Technologien |
+
+**Konformitätslevel:** A · **AA** (gesetzlicher Standard) · AAA
+
+→ [w3.org/WAI/WCAG22/quickref](https://www.w3.org/WAI/WCAG22/quickref/)
+
+---
+
+# Perceivable: Wahrnehmbar
+
+![bg right:35% fit](./assets/demos/contrast-levels.png)
+
+**Texte:**
+- **Kontrast:** mindestens 4,5:1 für normalen Text
+- **Untertitel** für Videos
+- Inhalte bei **200 % Zoom** noch nutzbar
+
+**Textalternativen für Nicht-Text:**
+
+```html
+<img src="tankman.jpg"
+     alt="Ein Mann mit Einkaufstüten steht
+          allein vor einer Reihe Panzer —
+          Tiananmen, Peking, 5. Juni 1989">
+```
+
+→ Leeres `alt=""` für rein dekorative Bilder.
+
+---
+
+# Operable: Bedienbar
+
+![bg right:35%](./assets/demos/a11y-focus.png)
+
+**Tastaturzugänglich:**
+```css
+/* Fokus-Ring nur bei Tastatur-Navigation */
+button:focus-visible {
+  outline: 3px solid #d63384;
+  outline-offset: 3px;
+  border-radius: 4px;
+}
+
+/* Anti-Pattern */
+button:focus { outline: none; }
+```
+
+**Genügend Zeit:** Session-Timeouts ankündigen, Verlängerung ermöglichen.
+
+**Kein Flackern:** maximal 3×/Sekunde (epileptische Anfälle vermeiden).
+
+---
+
+# Understandable: Verständlich
+
+![bg right:35%](./assets/demos/a11y-error.png)
+
+**Sprache angeben:**
+```html
+<html lang="de">
+```
+
+**Konsistente Navigation** — gleiche Elemente an gleicher Stelle.
+
+**Fehler erklären:**
+```html
+<input type="email" aria-describedby="email-error">
+<p id="email-error" role="alert">
+  Bitte eine gültige E-Mail-Adresse eingeben.
+</p>
+```
+
+---
+
+# Robust: Technisch solide
+
+![bg right:35%](./assets/demos/a11y-semantic.png)
+
+**Semantisches HTML:**
+```html
+<!-- Schlecht -->
+<div class="button" onclick="...">Klick mich</div>
+
+<!-- Gut -->
+<button type="button">Klick mich</button>
+```
+
+**ARIA — nur wenn nötig:**
+```html
+<div role="tablist" aria-label="Produktkategorien">
+  <button role="tab" aria-selected="true">Schuhe</button>
+  <button role="tab" aria-selected="false">Jacken</button>
+</div>
+```
+
+→ Erste ARIA-Regel: **wenn möglich, natives HTML nutzen**.
+
+---
+
+# Barrierefreiheit testen — Werkzeuge
+
+**Automatisierte Tools** (finden ca. 30 % der Verstöße):
+
+| Tool | Typ | Findet |
+|------|-----|--------|
+| [WAVE](https://wave.webaim.org/) | Browser-Extension | Kontrast, Struktur, Tab-Reihenfolge |
+| [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) | Chrome DevTools | Performance + A11y-Audit |
+| [axe DevTools](https://www.deque.com/axe/devtools/) | Browser-Extension | Detailanalyse, Regel-Engine |
+| [Pa11y](https://pa11y.org/) | CLI | CI/CD-Integration |
+
+**Screenreader (OS-nativ oder Open Source):**
+
+| OS | Screenreader |
+|----|--------------|
+| macOS / iOS | VoiceOver (`Cmd + F5`) — builtin |
+| Windows | [NVDA](https://www.nvaccess.org/) (OSS) · Narrator (builtin) |
+| Linux | [Orca](https://orca.gnome.org/) — GNOME builtin |
+| Android | TalkBack — builtin |
+
+---
+
+# Barrieren vermeiden — Praxis-Checkliste
+
+![bg right:35% fit](./assets/demos/keyboard-a11y.png)
+
+**Tastatur-Test:**
+- Alle Funktionen mit Tab + Enter erreichbar
+- Fokus immer sichtbar
+- Logische Tab-Reihenfolge, "Skip to main" als erstes
+
+**Screenreader-Test:**
+- VoiceOver auf Mac (`Cmd + F5`) oder NVDA auf Windows
+- Formular ausfüllen, Navigation prüfen
+
+**Gold-Standard:** Usability-Tests mit Menschen, die Assistive Technologien täglich nutzen — nicht nur "Augen schließen" als Simulation.
+
+---
+
+<!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->
+
 # CSS – Cascading Style Sheets

 ---
@@ -783,7 +1094,7 @@ p {

 # CSS einbinden

-**Option 1: Externe Datei** ✓
+**Option 1: Externe Datei** (empfohlen)
 ```html
 <link rel="stylesheet" href="style.css">
 ```
@@ -793,7 +1104,7 @@ p {
 <style>p { color: blue; }</style>
 ```

-**Option 3: Inline** ✗
+**Option 3: Inline** (vermeiden)
 ```html
 <p style="color: blue;">...</p>
 ```
@@ -884,7 +1195,7 @@ Element-Selektoren sind die einfachsten. Komma = "oder".

 **Raute** vor dem Namen = ID.

-⚠️ IDs sollten **einmalig** pro Seite sein. In der Praxis: Klassen meist besser.
+**Hinweis:** IDs sollten **einmalig** pro Seite sein. In der Praxis: Klassen meist besser.

 ---

@@ -1271,8 +1582,8 @@ Interaktive version: [nextlevelshit.github.io/web-engineering-mandala](https://n
 </script>
 ```

-✓ hohe Kompatibilität, simpel
-✗ State-Management, Re-Rendering wird schnell komplex
+**Pro:** hohe Kompatibilität, simpel
+**Contra:** State-Management und Re-Rendering werden schnell komplex

 ---

@@ -1361,9 +1672,9 @@ const greeting = "Hallo DHBW";

 | | Frontend | SSR | SSG | File Routing |
 |---|---|---|---|---|
-| **Next.js** | React | ✓ | ✓ | `/app/page.js` |
-| **Nuxt** | Vue | ✓ | ✓ | `/pages/*.vue` |
-| **Gatsby** | React | – | ✓ | GraphQL Data |
+| **Next.js** | React | ja | ja | `/app/page.js` |
+| **Nuxt** | Vue | ja | ja | `/pages/*.vue` |
+| **Gatsby** | React | nein | ja | GraphQL Data |

 ---