diff --git a/slides/dhbw/01_web_eng.md b/slides/dhbw/01_web_eng.md index 00c2a49..eb6fc26 100644 --- a/slides/dhbw/01_web_eng.md +++ b/slides/dhbw/01_web_eng.md @@ -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/) + +--- + # 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** | + + +
+```
+
+→ Leeres `alt=""` für rein dekorative Bilder.
+
+---
+
+# Operable: Bedienbar
+
+
+
+**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
+
+
+
+**Sprache angeben:**
+```html
+
+```
+
+**Konsistente Navigation** — gleiche Elemente an gleicher Stelle.
+
+**Fehler erklären:**
+```html
+
++ Bitte eine gültige E-Mail-Adresse eingeben. +
+``` + +--- + +# Robust: Technisch solide + + + +**Semantisches HTML:** +```html + + + + + +``` + +**ARIA — nur wenn nötig:** +```html +...
``` @@ -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 ``` -✓ 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 | --- diff --git a/slides/dhbw/02_css_extended.md b/slides/dhbw/02_css_extended.md index d24f48c..b4a834c 100644 --- a/slides/dhbw/02_css_extended.md +++ b/slides/dhbw/02_css_extended.md @@ -33,7 +33,7 @@ section.invert h2 { } pre { background: #0f0f23; - color: #d63384; + color: #f48fb1; border-radius: 8px; border-left: 3px solid #d63384; } @@ -43,7 +43,7 @@ pre code { } code { background: #1a1a2e; - color: #d63384; + color: #f48fb1; padding: 0.15em 0.4em; border-radius: 4px; } @@ -64,6 +64,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/) + +--- + # Inhalt Aufbauend auf den Grundlagen aus Sitzung 1. diff --git a/slides/dhbw/03_nodejs_basics.md b/slides/dhbw/03_nodejs_basics.md index a357536..083cd1c 100644 --- a/slides/dhbw/03_nodejs_basics.md +++ b/slides/dhbw/03_nodejs_basics.md @@ -33,7 +33,7 @@ section.invert h2 { } pre { background: #0f0f23; - color: #d63384; + color: #f48fb1; border-radius: 8px; border-left: 3px solid #d63384; } @@ -43,7 +43,7 @@ pre code { } code { background: #1a1a2e; - color: #d63384; + color: #f48fb1; padding: 0.15em 0.4em; border-radius: 4px; } @@ -64,6 +64,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/) + +--- + # Inhalt 1. Node.js: was und warum diff --git a/slides/dhbw/04_nodejs_advanced.md b/slides/dhbw/04_nodejs_advanced.md index 2a54e34..6d2f238 100644 --- a/slides/dhbw/04_nodejs_advanced.md +++ b/slides/dhbw/04_nodejs_advanced.md @@ -33,7 +33,7 @@ section.invert h2 { } pre { background: #0f0f23; - color: #d63384; + color: #f48fb1; border-radius: 8px; border-left: 3px solid #d63384; } @@ -43,7 +43,7 @@ pre code { } code { background: #1a1a2e; - color: #d63384; + color: #f48fb1; padding: 0.15em 0.4em; border-radius: 4px; } @@ -64,6 +64,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/) + +--- + # Inhalt 1. Node.js — Fun Facts & alternative Runtimes diff --git a/slides/dhbw/05_testing.md b/slides/dhbw/05_testing.md index 7b051aa..7be108a 100644 --- a/slides/dhbw/05_testing.md +++ b/slides/dhbw/05_testing.md @@ -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; } @@ -65,6 +65,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/) + +--- + @@ -120,7 +130,6 @@ Jede Design-Phase hat Testpendant. Testfälle früh ableiten. # Test Automation Trophy (Kent C. Dodds) ``` - 🏆 ┌─────────┐ │ E2E │ ← klein ├─────────┤ @@ -276,7 +285,7 @@ test("complete user journey", async () => { - **Echter Browser** – Chromium / Firefox / WebKit - **Echtes DOM** – Klicks, Tippen, Scrollen - **Echtes Rendering** – CSS, async Operationen -- **Cross-Origin** – Client ↔ Server-Kommunikation +- **Cross-Origin** – Client- und Server-Kommunikation Tools: **Cypress**, **Playwright** diff --git a/slides/dhbw/06_typescript.md b/slides/dhbw/06_typescript.md index b22e8ad..303cab9 100644 --- a/slides/dhbw/06_typescript.md +++ b/slides/dhbw/06_typescript.md @@ -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; } @@ -166,7 +166,7 @@ let id: number | string; id = 101; // ok id = "101"; // ok -id = true; // ✗ TypeError +id = true; // TypeError (nicht erlaubt) ``` --- diff --git a/slides/dhbw/07_docker.md b/slides/dhbw/07_docker.md index 4af5d5d..168d0b1 100644 --- a/slides/dhbw/07_docker.md +++ b/slides/dhbw/07_docker.md @@ -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; } @@ -297,8 +297,8 @@ api: # Networks: Segmentierung -- **`net`** – öffentlich erreichbar (Proxy ↔ App) -- **`data`** – nur intern (App ↔ DB) +- **`net`** – öffentlich erreichbar (Proxy — App) +- **`data`** – nur intern (App — DB) - DB ist **nicht** vom Internet erreichbar - Service-DNS: `api`, `db`, `proxy` (Container-Name = Hostname) diff --git a/slides/dhbw/08_best_practices.md b/slides/dhbw/08_best_practices.md index bde7d56..64934c4 100644 --- a/slides/dhbw/08_best_practices.md +++ b/slides/dhbw/08_best_practices.md @@ -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; } @@ -283,11 +283,9 @@ Don't refactor what isn't working yet. # Feedback – Sandwich-Methode -``` -🍞 Lob / Positives -🥬 Kritik + konkreter Verbesserungsvorschlag -🍞 Lob / Abschluss -``` +1. **Eröffnung** — Lob / positive Beobachtungen +2. **Kern** — Kritik + konkreter Verbesserungsvorschlag +3. **Abschluss** — Lob / wertschätzender Ausklang **Pitfalls:** - Am Thema vorbeireden @@ -312,7 +310,7 @@ Don't refactor what isn't working yet. **Zusatzpunkte (max. 10):** TypeScript, Docker, Dev/Prod-Parity, `.env`, npm-Publish, Domain, HTTPS, Responsive Design. -→ https://git.dailysh.it/DHBW/pruefungsleistung +→ https://librete.ch/DHBW/pruefungsleistung ---