libretech
435282b079
je 5 lernziele pro kapitel auf basis des DHBW-fundaments (industrie-anschluss + selbstständig-lernen + praxis-bezug): - kap1 web eng: browser-render, semantisches HTML, A11y BFSG/EAA, DevTools, tool-landschaft VS Code/Vite/Frameworks - kap2 CSS extended: box-model, flexbox 1D, grid 2D, responsive media queries, animations+transitions mit reduced-motion - kap3 node basics: rolle als runtime, npm init+package.json+node 24 LTS, ESM vs CJS, http-server mit express, fetch in node - kap4 node advanced: async/await+promise, fs/promises, datenbank-CRUD (SQLite/PG), authentifizierung JWT/session, error-handling - kap5 testing: vitest unit-tests, TDD red-green-refactor, integration-tests API, E2E playwright/cypress trade-offs, coverage-report (kein QA-garant) - kap6 typescript: rolle als JS-aufsatz, typen-annotation, interfaces+type-aliase, generics LESEN, strict-tsconfig - kap7 docker: container-konzept, dockerfile, docker compose multi-container, multi-stage-build (bonus), CI-pipeline integration - kap8 best practices: git-hygiene+conventional commits, README schreiben, SOLID erkennen, 12-factor app, code-reviews, SemVer soft-skills übergreifend: doku lesen, stack-overflow/github-issues nutzen, sauber strukturieren, industrie-konventionen. 4 offene fragen: kap1-split (zu groß bei 1791 zeilen)?, TS-tiefe (lesen vs schreiben)?, kap8 soft- vs hard-skills?, DHBW-praxis-phase-stack-verteilung (node vs java)? danach: bogen pro 8 kapitel, demo-audit (dhbw-assets bisher minimal), slide-rewrites pro kapitel
147 lines
7.4 KiB
Markdown
147 lines
7.4 KiB
Markdown
# DHBW Technik I — Operative Lernziele (Vorschlag, zur Diskussion)
|
|
|
|
**Status:** Vorschlag, *nicht gelockt*. Du redigierst.
|
|
**Basis:** DHBW-Fundament (3 Meta-Lernziele aus `dhbw-fundament.md`) + Prüfungsleistung-Kompetenzen (`dhbw-pruefungsleistung.md`).
|
|
**Eichmaß:** Fließsatz, default Bloom *Verstehen*, mit Praxis-Phasen-Anker.
|
|
|
|
## Übergreifend (gilt für alle 8 Kapitel)
|
|
|
|
Jedes Kapitel sollte mindestens *eines* der drei DHBW-Meta-Lernziele bedienen:
|
|
1. Industrie-Anschluss-Fähigkeit (Tools, Stack, Konventionen)
|
|
2. Selbstständig-Lernen-Lernen (Doku lesen, Errors googeln)
|
|
3. Theorie-Praxis-Verbindung (Anwendungsfall in Unternehmens-Kontext)
|
|
|
|
## Kapitel 1 — Web Engineering Grundlagen
|
|
|
|
*Aktuell 1791 Zeilen — zu groß. Vorschlag: in 2 Teilkapitel splitten, oder stark reduzieren.*
|
|
|
|
### Lernziele
|
|
|
|
**1.1** Die Studierenden können den **Browser-Render-Ablauf** (URL → DNS → TCP/TLS → HTTP → HTML-Parsing → CSS+JS → Pixel) frei reproduzieren.
|
|
|
|
**1.2** Die Studierenden können **semantisches HTML** schreiben (header, nav, main, section, article, footer, label/input/button) und begründen, warum es für SEO + A11y wichtig ist.
|
|
|
|
**1.3** Die Studierenden können **A11y-Basis-Standards** (BFSG/EAA ab 28.06.2025, WCAG POUR, semantisches HTML, ARIA als Ergänzung) anwenden und ein Minimum-Lighthouse-A11y-Audit durchführen.
|
|
|
|
**1.4** Die Studierenden können einen lokalen **Dev-Server** einrichten (mit `python -m http.server` oder Live-Server-Extension) und sind mit Browser-DevTools (Elements, Console, Network, Performance, Lighthouse) vertraut.
|
|
|
|
**1.5** Die Studierenden kennen die heutige **Tool-Landschaft** (Editor: VS Code, Build-Tools: Vite/Webpack, Frameworks: React/Vue/Svelte/Astro) und können *eine* davon als „erste Wahl" begründen.
|
|
|
|
## Kapitel 2 — CSS Extended
|
|
|
|
### Lernziele
|
|
|
|
**2.1** Die Studierenden können das **Box-Model** (content/padding/border/margin) anwenden und mit `box-sizing: border-box` als Default arbeiten.
|
|
|
|
**2.2** Die Studierenden können **Flexbox-Layouts** schreiben (display: flex, flex-direction, justify-content, align-items, flex-wrap, gap) für 1D-Strukturen.
|
|
|
|
**2.3** Die Studierenden können **Grid-Layouts** schreiben (display: grid, grid-template-columns/rows, gap, areas) für 2D-Strukturen.
|
|
|
|
**2.4** Die Studierenden können **Responsive Design** mit Media Queries (mobile-first) umsetzen.
|
|
|
|
**2.5** Die Studierenden können **CSS-Animations + Transitions** verwenden — und wissen, wann *nicht* (Reduced Motion, Performance).
|
|
|
|
## Kapitel 3 — Node.js Basics
|
|
|
|
### Lernziele
|
|
|
|
**3.1** Die Studierenden verstehen die **Rolle von Node.js** — JavaScript-Runtime außerhalb des Browsers (Server, CLI-Tools, Build-Skripte).
|
|
|
|
**3.2** Die Studierenden können ein **Node-Projekt initialisieren** (`npm init`, package.json verstehen, dependencies hinzufügen) und kennen den **Versions-Knoten 24 LTS** (oder aktuell).
|
|
|
|
**3.3** Die Studierenden können **ESM-Module** (import/export) schreiben — und kennen die Unterschiede zu CommonJS.
|
|
|
|
**3.4** Die Studierenden können einen **HTTP-Server** mit `node:http` oder Express erstellen, der REST-Endpunkte bereitstellt.
|
|
|
|
**3.5** Die Studierenden können mit **fetch** in Node (oder einer HTTP-Library) Daten von externen APIs holen.
|
|
|
|
## Kapitel 4 — Node.js Advanced
|
|
|
|
### Lernziele
|
|
|
|
**4.1** Die Studierenden können **async/await + Promise** korrekt anwenden — verstehen den Unterschied zwischen sequentiell und parallel ausführen.
|
|
|
|
**4.2** Die Studierenden können mit **Datei-System (fs/promises)** lesen + schreiben.
|
|
|
|
**4.3** Die Studierenden können mit **Datenbanken** (mind. SQLite oder PostgreSQL via Knex/Drizzle) CRUD-Operationen durchführen.
|
|
|
|
**4.4** Die Studierenden können **Authentifizierung** in einem Hello-World-Setting umsetzen (mind. einfaches JWT oder Session-Cookie).
|
|
|
|
**4.5** Die Studierenden kennen **Error-Handling** Patterns (try/catch + finally, Error-Klassen-Hierarchie).
|
|
|
|
## Kapitel 5 — Testing
|
|
|
|
### Lernziele
|
|
|
|
**5.1** Die Studierenden können **Unit-Tests** mit Vitest (oder Jest) schreiben und ausführen.
|
|
|
|
**5.2** Die Studierenden können **Testdriven Development (TDD)** an einem kleinen Beispiel durchspielen (rot → grün → refactor).
|
|
|
|
**5.3** Die Studierenden können **Integration-Tests** für eine API schreiben (HTTP-Endpoint testen).
|
|
|
|
**5.4** Die Studierenden kennen **End-to-End Tests** (Playwright/Cypress) und ihre Trade-offs gegenüber Unit-/Integration-Tests.
|
|
|
|
**5.5** Die Studierenden können einen **Coverage-Report** lesen und beurteilen — wissen aber, dass 100% Coverage kein Qualitäts-Garant ist.
|
|
|
|
## Kapitel 6 — TypeScript
|
|
|
|
### Lernziele
|
|
|
|
**6.1** Die Studierenden verstehen die **Rolle von TypeScript** — Aufsatz auf JavaScript für statisches Typchecking.
|
|
|
|
**6.2** Die Studierenden können einfache **Typen** annotieren (string, number, boolean, arrays, objects, function-signaturen).
|
|
|
|
**6.3** Die Studierenden können **Interfaces und Type-Aliase** definieren und unterscheiden.
|
|
|
|
**6.4** Die Studierenden können **Generics** *lesen* (`Array<T>`, `Promise<T>`) — Schreiben ist Bonus.
|
|
|
|
**6.5** Die Studierenden können **strict-mode tsconfig** Einstellungen verstehen (noImplicitAny, strictNullChecks).
|
|
|
|
## Kapitel 7 — Docker
|
|
|
|
### Lernziele
|
|
|
|
**7.1** Die Studierenden verstehen das **Container-Konzept** — Trennung zwischen Anwendung und Host-System, „auf meinem Rechner läuft's"-Problem gelöst.
|
|
|
|
**7.2** Die Studierenden können ein **Dockerfile** schreiben (FROM, COPY, RUN, CMD, EXPOSE).
|
|
|
|
**7.3** Die Studierenden können **docker compose** für Multi-Container-Setups (App + Datenbank) verwenden.
|
|
|
|
**7.4** Die Studierenden kennen **Multi-stage Builds** als Best Practice (Bonus).
|
|
|
|
**7.5** Die Studierenden können Container in einer **CI-Pipeline** (GitHub Actions oder GitLab CI) builden + testen.
|
|
|
|
## Kapitel 8 — Best Practices
|
|
|
|
### Lernziele
|
|
|
|
**8.1** Die Studierenden verstehen **Git-Hygiene** — sinnvolle Commits, **Conventional Commits** (feat:, fix:, docs:, …), `.gitignore` für Sprache + Editor.
|
|
|
|
**8.2** Die Studierenden können eine **gute README** schreiben (was tut das Projekt, wie installieren, wie starten, wie testen, wie deployen).
|
|
|
|
**8.3** Die Studierenden kennen **SOLID-Prinzipien** auf Code-Niveau und können sie *erkennen* (Anwenden ist Bonus).
|
|
|
|
**8.4** Die Studierenden verstehen **12-Factor App** Prinzipien — Config über Environment, Process Stateless, ...
|
|
|
|
**8.5** Die Studierenden können **Code-Reviews** geben + nehmen — wissen wie konstruktiv kommentieren.
|
|
|
|
**8.6** Die Studierenden können **SemVer** (semantisches Versioning) anwenden + erklären (MAJOR.MINOR.PATCH).
|
|
|
|
## Übergreifende Soft-Skills
|
|
|
|
Diese sind nicht in einem Kapitel verankert sondern verteilen sich:
|
|
|
|
- **Dokumentation lesen** (MDN, Node-Docs, npm-Package-Doku) — Block-übergreifend
|
|
- **Stack Overflow + GitHub Issues** als Lern-Tools verwenden — Kap 8
|
|
- **Code-Repos sauber strukturieren** — Kap 8
|
|
- **Industrie-Konventionen** erkennen + einhalten — alle Kapitel
|
|
|
|
## Offene Fragen
|
|
|
|
1. **Kap 1 splitten** in 1a (Browser-Stack + HTML) und 1b (A11y + DevTools)? Aktuell 1791 Zeilen = zu groß.
|
|
2. **Kap 6 TypeScript:** Tiefe — nur lesen-können oder auch selbst schreiben?
|
|
3. **Kap 8 Best Practices:** behält der Soft-Skills-Anteil oder fokussieren wir auf Hard-Skills (Git, README, SOLID)?
|
|
4. **Praxis-Phase-Bezug:** in welchen DHBW-Unternehmen sind die Studis verteilt? Stack-Verteilung würde uns helfen, die Schwerpunkte zu setzen (z.B. mehr Node oder mehr Java?).
|
|
|
|
**Nach Beantwortung → leite ich daraus die Bögen pro Kapitel ab + plane die Slide-Restrukturierung.**
|