public/uni
2
0 Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: public/uni:7885aee8fc8bd91cf209824163350ac432b9bd26
public/uni:main
public/uni:archive/refactor/didaktik-rewrite-2026
...
compare: public/uni:main
public/uni:main
public/uni:archive/refactor/didaktik-rewrite-2026
14 Commits
7885aee8fc ... main
Author SHA1 Message Date
libretechandClaude Opus 4.8 9a4b4536cd 223015b+c klausurfragen: stand 03.07 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
 2026-07-05 23:03:26 +02:00
libretechandClaude Opus 4.8 102a6d53e5 223015b+c klausurfragen: sose26-klausurset kuratiert + wording-fixes 
- 223015c: G7 id-selektor neu (ersetzt spezifität-ansatz), B10 encapsulation
  + E3 gesamtablauf disabled (tcp-handshake nie ausreichend behandelt),
  G6 ohne hsl + farbname/color code, H6 curb-cut-wording (genau zwei
  beispiele, klickflächen/kontrast/tab+enter), H7 attribute statt tags
  + screenreader-distraktor + tastatur-wording, B7b dns: domain->ip
- 223015b: J22 ohne buch-lesen + überwiegend unabhängig, K2 sie-form
  + taschenrechner-hinweis, strg/cmd+f
- .gitignore: slides/**/*-INTERN.md (lokale klausur-previews, nie deployen)
- 223015b/CLAUDE.md: deck-doku + downstream-verweis aufs klausur-repo

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
 2026-07-03 13:37:01 +02:00
libretech 983cdea235 223015b klausurfragen: disabled-fragen + j6/j7/j8/j16 entfernt, j14a (farbwerte pro byte) ergänzt, ecc-zeile raus, j22-frage layout entzerrt 2026-07-02 19:23:26 +02:00
libretech 2d926f153e 223015c klausurfragen: alle disabled-fragen entfernt, kuratierung reduziert 2026-07-02 19:23:26 +02:00
libretech a1381dc717 223015c: kapitel 3 (javascript) aus deploy-kapiteln entfernt 2026-07-02 19:23:25 +02:00
libretech c7045d96e4 223015b+c klausurfragen: frage-folie ohne lösung je aktiver frage vorangestellt, bestehende als (lösung) markiert; sortiere->sortieren sie 2026-06-24 13:39:01 +02:00
libretech b500e2f647 223015b klausurfragen: auf sie umgestellt + emojis raus, fragen-set kuratiert (j/l/m/n/o aktiviert bzw. ausgegraut), l1 auf vorwiegend verlustbehaftet präzisiert, bandbreite-fragen ergänzt, stand 24.06 2026-06-24 13:28:10 +02:00
libretech fdd4bbaa54 223015c klausurfragen: client-server-modell + ip/mac/port/dns-glossar ergänzt, stand 24.06 2026-06-24 13:14:56 +02:00
libretech b8ca038153 223015c klausurfragen: nicht-prüfungsrelevante fragen ausgegraut 2026-06-24 13:01:23 +02:00
libretech c7811f4001 index: 223015b klausurfragen freigeschaltet 2026-06-17 14:27:13 +02:00
libretech 3ae2f6881a index: klausurfolien/klausurfragen-karten per-kurs schaltbar; 223015b klausurfolien freigeschaltet, 223015c klausurfragen 2026-06-17 14:13:15 +02:00
libretech a13440b519 223015c: klausurfragen auf sie vereinheitlicht + 6 fragen ergänzt (a5/c11/c12/f4/g5/g6), emojis raus, stand aktualisiert; index: kapitel 03 + klausurfragen freigeschaltet 2026-06-17 13:57:20 +02:00
libretech 800a7d6ff9 223015c: farben-overflow gefixt (intro gekürzt, code kompakt), klausurfolien regeneriert 2026-06-17 13:34:55 +02:00
libretech d01253d0d0 223015c 02: anwendungsschicht benannt + an abstraktion angeknüpft (browser/app -> anwendung) 2026-06-17 13:01:00 +02:00
8 changed files with 1494 additions and 1792 deletions
Expand all files Collapse all files

No files matched your search

.gitignore
+4
View File
@@ -34,3 +34,7 @@ hdm-internettechnik-slides/
*.tmp *.tmp
*.bak *.bak
.idea .idea
# Interne Klausur-Previews – NIE committen/deployen
slides/**/*-INTERN.md
slides/*-INTERN.md
Makefile
+1 -1
View File
@@ -18,7 +18,7 @@ DEPLOY_HOST = tengo@tuttle.uberspace.de
223015b_KLAUSUR = 1 223015b_KLAUSUR = 1
223015c_NAME = Internettechnologien 223015c_NAME = Internettechnologien
223015c_KAPITEL = 01-geschichte-grundlagen-html 02-netzwerke-protokolle-css 03-interaktivitaet-javascript klausurfolien klausurfragen 223015c_KAPITEL = 01-geschichte-grundlagen-html 02-netzwerke-protokolle-css klausurfolien klausurfragen
223015c_DEPLOY = /home/tengo/html/hdm/223015c 223015c_DEPLOY = /home/tengo/html/hdm/223015c
223015c_KLAUSUR = 1 223015c_KLAUSUR = 1
scripts/generate-index.sh
+67 -20
View File
@@ -121,8 +121,17 @@ declare -A DISABLED_FULL
declare -A DISABLED_BUTTONS declare -A DISABLED_BUTTONS
# For course B: chapters 3,4,5 should be fully disabled # For course B: chapters 3,4,5 should be fully disabled
DISABLED_FULL["223015b"]="speichermedien-schnittstellen distribution-apis-zukunft vertiefung-offene-fragen" DISABLED_FULL["223015b"]="speichermedien-schnittstellen distribution-apis-zukunft vertiefung-offene-fragen"
# For course C: chapter 3 should keep link clickable but buttons disabled # For course C: all chapters fully active
DISABLED_BUTTONS["223015c"]="interaktivitaet-javascript" DISABLED_BUTTONS["223015c"]=""
# Courses where the "Klausurrelevante Folien" card should be active (clickable)
declare -A KLAUSURFOLIEN_ACTIVE
KLAUSURFOLIEN_ACTIVE["223015b"]=1
# Courses where the "Klausurfragen" card should be active (clickable)
declare -A KLAUSURFRAGEN_ACTIVE
KLAUSURFRAGEN_ACTIVE["223015b"]=1
KLAUSURFRAGEN_ACTIVE["223015c"]=1
cat > "$BUILD_DIR/index.html" << HEADER cat > "$BUILD_DIR/index.html" << HEADER
<!DOCTYPE html> <!DOCTYPE html>
@@ -404,13 +413,29 @@ LINK
done done
# Add klausurfolien entry if it exists (disabled — wird noch überarbeitet) # Add klausurfolien entry if it exists (active per KLAUSURFOLIEN_ACTIVE, else disabled)
if [[ -f "$BUILD_DIR/klausurfolien.html" ]]; then if [[ -f "$BUILD_DIR/klausurfolien.html" ]]; then
pdf_disabled="" if [[ "${KLAUSURFOLIEN_ACTIVE[$COURSE]}" == "1" ]]; then
if [[ -f "$BUILD_DIR/klausurfolien.pdf" ]]; then pdf_active=""
pdf_disabled="<span class=\"btn btn-pdf btn-disabled\">PDF</span>" if [[ -f "$BUILD_DIR/klausurfolien.pdf" ]]; then
fi pdf_active="<a href=\"klausurfolien.pdf\" class=\"btn btn-pdf\">PDF</a>"
cat >> "$BUILD_DIR/index.html" << KLAUSUR fi
cat >> "$BUILD_DIR/index.html" << KLAUSUR
<div class="kapitel-card" style="border-left: 3px solid $ACCENT_COLOR;">
<a href="klausurfolien.html" class="kapitel-link">
<div class="kapitel-label">Prüfung</div>
<div class="kapitel-title">Klausurrelevante Folien</div>
</a>
<a href="klausurfolien.html" class="btn btn-slides">Folien</a>
$pdf_active
</div>
KLAUSUR
else
pdf_disabled=""
if [[ -f "$BUILD_DIR/klausurfolien.pdf" ]]; then
pdf_disabled="<span class=\"btn btn-pdf btn-disabled\">PDF</span>"
fi
cat >> "$BUILD_DIR/index.html" << KLAUSUROFF
<div class="kapitel-card disabled" style="border-left: 3px solid $ACCENT_COLOR;"> <div class="kapitel-card disabled" style="border-left: 3px solid $ACCENT_COLOR;">
<div class="kapitel-link"> <div class="kapitel-link">
<div class="kapitel-label">Prüfung</div> <div class="kapitel-label">Prüfung</div>
@@ -419,20 +444,41 @@ if [[ -f "$BUILD_DIR/klausurfolien.html" ]]; then
<span class="btn btn-slides btn-disabled">Folien</span> <span class="btn btn-slides btn-disabled">Folien</span>
$pdf_disabled $pdf_disabled
</div> </div>
KLAUSUR KLAUSUROFF
fi
fi fi
# Add klausurfragen entry if it exists (disabled — wird noch überarbeitet) # Add klausurfragen entry if it exists (active per KLAUSURFRAGEN_ACTIVE, else disabled)
if [[ -f "$BUILD_DIR/klausurfragen.html" ]] || [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then if [[ -f "$BUILD_DIR/klausurfragen.html" ]] || [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
pdf_disabled="" if [[ "${KLAUSURFRAGEN_ACTIVE[$COURSE]}" == "1" ]]; then
if [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then pdf_active=""
pdf_disabled="<span class=\"btn btn-pdf btn-disabled\">PDF</span>" if [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
fi pdf_active="<a href=\"klausurfragen.pdf\" class=\"btn btn-pdf\">PDF</a>"
slides_disabled="" fi
if [[ -f "$BUILD_DIR/klausurfragen.html" ]]; then slides_active=""
slides_disabled="<span class=\"btn btn-slides btn-disabled\">Folien</span>" if [[ -f "$BUILD_DIR/klausurfragen.html" ]]; then
fi slides_active="<a href=\"klausurfragen.html\" class=\"btn btn-slides\">Folien</a>"
cat >> "$BUILD_DIR/index.html" << KLAUSURFRAGEN fi
cat >> "$BUILD_DIR/index.html" << KLAUSURFRAGEN
<div class="kapitel-card" style="border-left: 3px solid $ACCENT_COLOR;">
<a href="klausurfragen.html" class="kapitel-link">
<div class="kapitel-label">Prüfung</div>
<div class="kapitel-title">Klausurfragen</div>
</a>
$slides_active
$pdf_active
</div>
KLAUSURFRAGEN
else
pdf_disabled=""
if [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
pdf_disabled="<span class=\"btn btn-pdf btn-disabled\">PDF</span>"
fi
slides_disabled=""
if [[ -f "$BUILD_DIR/klausurfragen.html" ]]; then
slides_disabled="<span class=\"btn btn-slides btn-disabled\">Folien</span>"
fi
cat >> "$BUILD_DIR/index.html" << KLAUSURFRAGENOFF
<div class="kapitel-card disabled" style="border-left: 3px solid $ACCENT_COLOR;"> <div class="kapitel-card disabled" style="border-left: 3px solid $ACCENT_COLOR;">
<div class="kapitel-link"> <div class="kapitel-link">
<div class="kapitel-label">Prüfung</div> <div class="kapitel-label">Prüfung</div>
@@ -441,7 +487,8 @@ if [[ -f "$BUILD_DIR/klausurfragen.html" ]] || [[ -f "$BUILD_DIR/klausurfragen.p
$slides_disabled $slides_disabled
$pdf_disabled $pdf_disabled
</div> </div>
KLAUSURFRAGEN KLAUSURFRAGENOFF
fi
fi fi
cat >> "$BUILD_DIR/index.html" << FOOTER cat >> "$BUILD_DIR/index.html" << FOOTER
slides/223015b/CLAUDE.md
+34
View File
@@ -0,0 +1,34 @@
# CLAUDE.md — 223015b lecture deck
Marp lecture slides + master question catalog for HdM Stuttgart course **223015b — „Dateiformate, Schnittstellen, Speichermedien & Distributionswege"**. Author: Michael Czechowski, SoSe 2026. This directory is the **source of truth**; the exam artifacts (Moodle XML) are derived downstream (see [Downstream](#downstream)).
## Files
| File | Role |
|---|---|
| `00-intro.md` | Intro / organizational deck |
| `01-grundlagen-text-audio.md` | Grundlagen: Text & Audio |
| `02-bild-audio-video.md` | Bild, Audio, Video |
| `03-speichermedien-schnittstellen.md` | Speichermedien & Schnittstellen |
| `04-distribution-apis-zukunft.md` | Distribution, APIs, Zukunft |
| `05-vertiefung-offene-fragen.md` | Vertiefung / offene Fragen |
| `klausurfolien.md` | Exam-review slides |
| `klausurfragen.md` | **Master question catalog — 122 Fragen** (`[MC]/[MM]/[MATCH]/[ORDER]/[ESSAY]/[SHORTANS]/[NUMERIC]/[CLOZE]`) |
| `assets/`, `materials/` | Images and supporting material |
All decks are **Marp** Markdown (`marp: true`, theme `gaia`) with a shared inline `<style>` block. Highlight color for this course: `#1e5f8a` (blue). Sibling deck: `../223015c/` (Internettechnik, highlight `#d63384`).
## Conventions
- Each question in `klausurfragen.md` = `### <ID> – <title>` + `**Thema:**` + `**Punkte:**` + `**Typ:**` + body + `> **Feedback:**`/`> **Musterlösung:**`. Keep this shape — downstream tooling parses `**Thema:**` and `**Typ:**`.
- Correct MC options marked `- [x] **…** ✅`; matching as a 2-column table; ordering as a numbered list.
- `marp` CLI renders to HTML/PDF: `marp <file>.md` (see marp-team/marp-cli).
## Downstream
The **exam question bank + Moodle Quiz XML** live in a separate repo:
- Local: `/home/mwc/Documents/HDM/klausur/`
- Git: `ssh://tengo@git.librete.ch:41240/libretech/2026-hdm-klausur.git`
There, `klausurfragen-b-course-dateiformate.md` is a **curated subset (81/122)** of this deck's `klausurfragen.md`, and the questions are exported as Moodle XML for import. **Edit questions here first**, then sync the subset + regenerate/patch the XML downstream (that repo's CLAUDE.md + `moodle-quiz-xml` skill document the XML format and workflow).
slides/223015b/klausurfragen.md
+596 -814
View File
File diff suppressed because it is too large. Load diff
slides/223015c/02-netzwerke-protokolle-css.md
+7 -8
View File
@@ -374,7 +374,7 @@ Statt dass jedes Programm alles können muss, teilen sich mehrere Schichten die
| Wer? | Aufgabe | Typische Geräte | | Wer? | Aufgabe | Typische Geräte |
|------|---------|-----------------| |------|---------|-----------------|
| **Browser/App** | Was will ich? | Laptop, Handy, Server | | **Browser/Anwendung** | Was will ich? | Laptop, Handy, Server |
| **TCP/UDP** | Kommt alles an? | – (Software) | | **TCP/UDP** | Kommt alles an? | – (Software) |
| **IP** | Welcher Rechner? | Router, Firewall | | **IP** | Welcher Rechner? | Router, Firewall |
| **Ethernet/WLAN** | Nächstes Gerät? | Switch, Access Point | | **Ethernet/WLAN** | Nächstes Gerät? | Switch, Access Point |
@@ -406,6 +406,8 @@ SPEAKER NOTES:
Jede Schicht hat genau eine Aufgabe und nutzt nur die Schicht direkt darunter. Jede Schicht hat genau eine Aufgabe und nutzt nur die Schicht direkt darunter.
Die oberste Schicht ist die **Anwendungsschicht** — die Ebene eurer Programme (Browser, Mail). Sie nutzt die unteren Schichten, ohne deren Details zu kennen: genau die Abstraktion, die ihr bereits kennt.
<small>SMTP = Simple Mail Transfer Protocol</small> <small>SMTP = Simple Mail Transfer Protocol</small>
<!-- <!--
@@ -525,7 +527,7 @@ SPEAKER NOTES:
Jede Anwendung müsste wissen, wie Ethernet-Frames gebaut werden, wie WLAN funktioniert und wie Router Pakete weiterleiten. Jede Anwendung müsste wissen, wie Ethernet-Frames gebaut werden, wie WLAN funktioniert und wie Router Pakete weiterleiten.
**Mit Schichten:** **Mit Schichten:**
Der Browser fordert nur die Seite an. Alles Weitere übernehmen die Schichten darunter. Die Anwendungsschicht (z.B. der Browser) fordert nur die Seite an. Alles Weitere übernehmen die Schichten darunter.
**Austauschbarkeit:** **Austauschbarkeit:**
Wechselt WLAN zu Ethernet, ändert sich nur Schicht 1. Wechselt WLAN zu Ethernet, ändert sich nur Schicht 1.
@@ -2066,22 +2068,19 @@ Best Practice: Setzt das global für alle Elemente.
![bg right:35%](./assets/demos/css-colors.png) ![bg right:35%](./assets/demos/css-colors.png)
CSS kennt fünf Notationen für Farben: **Keyword**, **Hex**, **RGB** (Red Green Blue), **RGBA** (RGB + Alpha) und **HSL** (Hue, Saturation, Lightness). CSS kennt fünf Farb-Notationen: **Keyword**, **Hex**, **RGB**, **RGBA** und **HSL**.
```css ```css
/* Keyword */ /* Keyword */
color: red; color: red;
color: rebeccapurple; color: rebeccapurple;
/* Hex */ /* Hex */
color: #FF0000; color: #FF0000;
color: #F00; color: #F00;
/* RGB = Red Green Blue, RGBA mit Alpha */
/* RGB / RGBA */
color: rgb(255, 0, 0); color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5); color: rgba(255, 0, 0, 0.5);
/* HSL = Hue, Saturation, Lightness */
/* HSL */
color: hsl(0, 100%, 50%); color: hsl(0, 100%, 50%);
``` ```
slides/223015c/klausurfolien.md
+94 -411
View File
@@ -5,7 +5,7 @@ paginate: true
backgroundColor: #fff backgroundColor: #fff
header: "Grundlagen IT- und Internettechnik (223015c)" header: "Grundlagen IT- und Internettechnik (223015c)"
footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026" footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
title: "Kapitel 1: Geschichte, Grundlagen & HTML" title: Grundlagen IT- und Internettechnik
--- ---
<style> <style>
:root { :root {
@@ -20,13 +20,13 @@ section {
font-size: 1.7rem; font-size: 1.7rem;
} }
h1 { h1 {
color: #a02060; /* darker raspberry */ color: #a02060;
} }
section.invert h1 { section.invert h1 {
color: #fff; color: #fff;
} }
h2 { h2 {
color: #1f2937; /* dark gray, almost black */ color: #1f2937;
} }
pre { pre {
background: #0f0f23; background: #0f0f23;
@@ -82,10 +82,9 @@ section.aufgabe footer {
<!-- _class: invert --> <!-- _class: invert -->
<!-- _header: '' --> <!-- _header: '' -->
<!-- _footer: '' --> <!-- _backgroundColor: #000 -->
<!-- _backgroundColor: black -->
![bg fit opacity:0.2](./assets/background-termin-2.png) ![bg cover opacity:0.2](./assets/background-termin-1.png)
# Grundlagen IT- und Internettechnik # Grundlagen IT- und Internettechnik
@@ -103,39 +102,6 @@ Hochschule der Medien Stuttgart
<!-- _footer: "" --> <!-- _footer: "" -->
# Die 5 Komponenten
| Komponente | Funktion |
|------------|----------|
| **Rechenwerk (ALU)** | Führt Berechnungen durch |
| **Steuerwerk** | Interpretiert Befehle, steuert Ablauf |
| **Speicherwerk** | Speichert Programme UND Daten |
| **Ein-/Ausgabe** | Tastatur, Bildschirm, Netzwerk |
| **Bus-System** | Verbindet alle Komponenten |
**Wichtig:** Programme und Daten **gemeinsam** im Speicher!
<!--
VON-NEUMANN-ARCHITEKTUR (1945): Grundlage aller modernen Computer
5 KOMPONENTEN:
- ALU (Arithmetic Logic Unit): Rechnet (+, -, ×, ÷) und vergleicht (>, <, =)
- Steuerwerk: Holt Befehle, dekodiert sie, steuert Ausführung (Fetch-Decode-Execute)
- Speicherwerk: RAM (flüchtig) + ROM (permanent), enthält Code UND Daten
- Ein-/Ausgabe (I/O): Tastatur, Maus, Bildschirm, Netzwerk, USB, Sensoren
- Bus-System: Adressbus (wo), Datenbus (was), Steuerbus (wie)
KERNPRINZIP: Stored Program Concept - Programme im selben Speicher wie Daten
VORHER (z.B. ENIAC): Programme durch Umstecken von Kabeln, tagelange Arbeit
NACHHER: Programme als austauschbare Daten → Flexibilität, Software-Industrie möglich
PRÜFUNGSRELEVANT: 5 Komponenten benennen und erklären können, Stored Program Concept
-->
---
<!-- _header: "" -->
<!-- _footer: "" -->
# Von-Neumann-Architektur: Bedeutung # Von-Neumann-Architektur: Bedeutung
**Ohne Von-Neumann-Architektur:** **Ohne Von-Neumann-Architektur:**
@@ -173,117 +139,18 @@ PRÜFUNGSRELEVANT: Warum Von-Neumann revolutionär, Unterschied zu Harvard, Beis
<!-- _footer: "" --> <!-- _footer: "" -->
# HTML Metadaten # HTML-Anatomie (2/2)
```html
<html>
<head>
<title>Im Browsertab als Überschrift sichtbar</title>
<meta name="description" content="" />
<meta name="og:image" content="https://...." />
</head>
...
</html>
```
- <small>*Webseiten werden nicht nur von Menschen besucht, sondern auch von Suchmaschinen, Programmen, Bots etc.*</small>
- <small>*Metadaten helfen bspw. auch Screen-Readern beim "Verstehen" der Inhalte*</small>
<!--
HEAD-BEREICH: Metadaten, nicht sichtbar im Browser-Fenster
WICHTIGE META-TAGS:
- <title>: Browser-Tab, Lesezeichen, Suchergebnis-Titel
- <meta name="description">: Suchergebnis-Snippet (max. 160 Zeichen)
- <meta name="viewport">: Mobile Darstellung (width=device-width)
- <meta charset="UTF-8">: Zeichenkodierung (Umlaute!)
OPEN GRAPH (og:*): Social Media Vorschau (Facebook, LinkedIn, WhatsApp)
- og:title, og:description, og:image, og:url
TWITTER CARDS: twitter:card, twitter:title, twitter:image
SEO-RELEVANZ: Google nutzt title + description für Ranking und Snippet
ACCESSIBILITY: <html lang="de"> für Screenreader-Aussprache
PRÜFUNGSRELEVANT: Was gehört in <head>, Unterschied zu <body>, wichtigste Meta-Tags
-->
---
<!-- _header: "" -->
<!-- _footer: "" -->
# Wie nutzen Menschen das Web?
| Eingabe | Nutzungsweise |
|---------|---------------|
| **Maus** | Klicken, Scrollen |
| **Tastatur** | Tab-Navigation, Enter, Pfeiltasten |
| **Screenreader** | Vorlesen von Inhalten (NVDA, VoiceOver, JAWS) |
| **Sprachsteuerung** | "Klicke auf Anmelden" |
| **Augensteuerung** | Eye-Tracking |
| **Switch-Geräte** | Ein-/Aus-Schalter |
→ **Nicht alle nutzen Maus + Bildschirm!**
<!--
ACCESSIBILITY (a11y): a + 11 Buchstaben + y
STATISTIK: ~15% der Weltbevölkerung haben eine Behinderung (WHO)
ARTEN VON EINSCHRÄNKUNGEN:
- Permanent: Blindheit, Taubheit, motorische Einschränkungen
- Temporär: Gebrochener Arm, Augen-OP, Ohrenentzündung
- Situativ: Helle Sonne (Kontrast), laute Umgebung (kein Audio), Baby auf Arm (eine Hand)
ASSISTIVE TECHNOLOGIEN:
- Screenreader: NVDA (Windows, kostenlos), VoiceOver (Apple), JAWS (kommerziell)
- Braillezeilen: Taktile Ausgabe für Blinde
- Switch-Geräte: Für motorische Einschränkungen
- Spracheingabe: Dragon NaturallySpeaking, Siri, Google Assistant
WCAG: Web Content Accessibility Guidelines (A, AA, AAA)
EUROPEAN ACCESSIBILITY ACT: Seit Juni 2025 verpflichtend!
PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
-->
---
<!-- _header: "" -->
<!-- _footer: "" -->
# Warum "Barrierefreiheit"?
**Rechtlich:**
- EU: European Accessibility Act (seit Juni 2025 in Kraft!)
- DE: BITV 2.0 (Behörden), Privatwirtschaft betroffen
**Ethisch:**
- Teilhabe für alle Menschen
- Digitale Inklusion
**Praktisch:**
- Bessere UX für **alle** (SEO, Mobile, ältere Menschen)
- Größerer Markt (~15% der Bevölkerung)
<!--
RECHTLICHER RAHMEN:
- European Accessibility Act (EAA): EU-Richtlinie, seit 28. Juni 2025 in Kraft
- Betrifft: E-Commerce, Banking, Telekommunikation, Transport, E-Books
- BITV 2.0: Barrierefreie Informationstechnik-Verordnung (DE, öffentliche Stellen)
- BFSG: Barrierefreiheitsstärkungsgesetz (DE-Umsetzung des EAA)
- Strafen: Bis zu 100.000€ Bußgeld möglich
CURB-CUT-EFFEKT:
- Bordsteinabsenkung für Rollstuhlfahrer → hilft auch Kinderwagen, Rollkoffern, Fahrrädern
- Untertitel für Gehörlose → helfen in lauter Umgebung, beim Sprachlernen
- Kontrastreiche Farben → besser bei Sonnenlicht, für ältere Menschen
BUSINESS CASE:
- 15% Zielgruppe (Menschen mit Behinderung)
- +20% ältere Menschen (Sehschwäche, motorische Einschränkungen)
- SEO-Vorteile: Alt-Texte, semantisches HTML = besser für Google
PRÜFUNGSRELEVANT: EAA kennen, Curb-Cut-Effekt erklären können, Business Case
-->
- Wir unterscheiden zwischen **umschließende** und **selbst-schließende** HTML-Tags
- **Umschließend**
- `<b> ... </b>` fett-gedruckter Text (inline)
- `<a> ... </a>` Hyperlink (Verlinkung zu anderen Webseiten, Bildern)
- `<body> ... </body>` Sichtbarer Teil eines HTML-Dokuments
- `<details> ... </details>` Aufklapp-Text (Akkordion)
- **Selbst-schließend**
- `<img />` Bild, Vektorgrafik etc.
- `<input />` Eingabefeld
- `<meta />` Metadaten
--- ---
@@ -294,17 +161,16 @@ PRÜFUNGSRELEVANT: EAA kennen, Curb-Cut-Effekt erklären können, Business Case
# Barrieren im Netz vermeiden (a11y) # Barrieren im Netz vermeiden (a11y)
**Tastatur-Test:** **Tastatur-Test:**
- Alle Funktionen nur mit Tab + Enter nutzbar? - Alle Funktionen sind nur mit Tab + Enter nutzbar
- Fokus immer sichtbar? - Fokus immer sichtbar: Textlinks, Buttons, Texteingabe etc.
- Logische Tab-Reihenfolge? - Logische Tab-Reihenfolge: "Skip to main", Navigation, Hauptinhalt
**Screenreader-Test:** **Screenreader-Test:**
- VoiceOver (Mac): `Cmd + F5` - VoiceOver (Mac): `Cmd + F5`
- NVDA (Windows): Gratis-Download - NVDA (Windows): Gratis-Download
**Tools:** **Tools/Browser-Extensions:**
- axe DevTools, WAVE (Browser-Extensions) - [WAVE](https://wave.webaim.org/), [axe DevTools](https://www.deque.com/axe/devtools/), [Web Disability Simulator](https://chromewebstore.google.com/detail/web-disability-simulator/olioanlbgbpmdlgjnnampnnlohigkjla)
- Lighthouse (in Chrome DevTools)
<!-- <!--
Automatische Tests finden ~30% der Probleme Automatische Tests finden ~30% der Probleme
@@ -319,168 +185,19 @@ Echte NutzerInnen einbeziehen = Gold-Standard
<!-- _footer: "" --> <!-- _footer: "" -->
# Das TCP/IP-Modell
| Schicht | Name | Aufgabe | Protokolle |
|---------|------|---------|------------|
| **4** | Anwendung | Was? Welcher Dienst? | HTTP, DNS, SMTP |
| **3** | Transport | Zuverlässigkeit, Ports | TCP, UDP |
| **2** | Internet | Routing, globale Adressen | IP |
| **1** | Netzzugang | Lokale Übertragung | Ethernet, WLAN |
**4 Schichten. Das reicht, um das Internet zu verstehen.**
<!--
SPEAKER NOTES:
- TCP/IP = das echte Internet
- 4 Schichten:
- Anwendung: Was will ich? (HTTP, DNS, Mail)
- Transport: Kommt an? Welches Programm? (TCP, UDP)
- Internet: Wie zum Zielrechner? (IP)
- Netzzugang: Wie zum nächsten Gerät? (Ethernet, WLAN)
- KLAUSUR: Welches Protokoll → welche Schicht
-->
---
<!-- _header: "" -->
<!-- _footer: "" -->
# Dateneinheiten pro Schicht
| Schicht | Name | Dateneinheit | Was kommt hinzu? |
|---------|------|--------------|------------------|
| Anwendung | HTTP, DNS | **Daten** | – |
| Transport | TCP, UDP | **Segment** | Ports, Sequenznummern |
| Internet | IP | **Paket** | IP-Adressen |
| Netzzugang | Ethernet | **Frame** | MAC-Adressen, Prüfsumme |
Merkhilfe: **D**aten → **S**egment → **P**aket → **F**rame
(„**D**er **S**ache **P**raktischer **F**olgen")
<!--
SPEAKER NOTES:
- Glossar-Begriffe jetzt eingeordnet:
- Anwendung: Daten/Message
- Transport: Segment
- Internet: Paket
- Netzzugang: Frame
- Merkhilfe: D-S-P-F (eigene erfinden!)
- KLAUSUR: Begriff → Schicht
-->
---
<!-- _header: "" -->
<!-- _footer: "" -->
# IP vs. MAC vs. Port
| | IP-Adresse | MAC-Adresse | Port |
|---|-----------|-------------|------|
| **Frage** | Welcher Rechner? | Welches Gerät nebenan? | Welches Programm? |
| **Reichweite** | Global | Lokal (1 Hop) | Auf einem Rechner |
| **Ändert sich?** | Nein | Ja, bei jedem Hop | Nein |
| **Schicht** | Internet (IP) | Netzzugang (Ethernet) | Transport (TCP/UDP) |
| **Beispiel** | 212.132.79.37 | aa:bb:cc:dd:ee | 443 |
<!--
SPEAKER NOTES:
- KLAUSUR: Diese Tabelle
- IP: Welcher Rechner? Global. Bleibt gleich.
- MAC: Welcher Nachbar? Lokal. Ändert sich.
- Port: Welches Programm? Bleibt gleich.
- Merken: NUR MAC ändert sich unterwegs
-->
---
<!-- _header: "" -->
<!-- _footer: "" -->
# Der 3-Way-Handshake
```
Client (dein Laptop) Server
| |
|-------- SYN (Seq=1000) --------------->|
| "Ich will reden" |
| |
|<--- SYN-ACK (Seq=5000, Ack=1001) ------|
| "OK, ich auch. Ich starte bei 5000"|
| |
|-------- ACK (Ack=5001) --------------->|
| "Verstanden, los geht's" |
| |
| [ Verbindung steht ] |
```
**SYN** = Synchronize · **ACK** = Acknowledge
<!--
SPEAKER NOTES:
- 3 Pakete → Verbindung steht
- 1. Client SYN: "Will Verbindung, starte bei 1000"
- 2. Server SYN-ACK: "OK, ich starte bei 5000, erwarte 1001"
- 3. Client ACK: "Verstanden, erwarte 5001"
- Seq-Nr wichtig: Beide wissen nächstes erwartetes Byte
-->
---
<!-- _header: "" -->
<!-- _footer: "" -->
# TCP vs. UDP
| | TCP | UDP |
|---|-----|-----|
| **Verbindung** | Ja (Handshake) | Nein |
| **Reihenfolge** | Garantiert | Nicht garantiert |
| **Verlorene Pakete** | Werden nachgefordert | Gehen verloren |
| **Overhead** | Höher | Niedriger |
| **Use Cases** | Web, Email, Downloads | Video-Calls, Gaming, DNS |
<!--
SPEAKER NOTES:
- Zwei Transport-Protokolle
- TCP: zuverlässig
- Handshake, Seq-Nr, Bestätigungen, Neuübertragung
- Perfekt für Web, Downloads (nichts darf fehlen)
- UDP: schneller
- Kein Handshake, keine Bestätigungen
- Verloren = weg
- Perfekt für Video-Calls (Verzögerung schlimmer als Verlust)
-->
---
<!-- _header: "" -->
<!-- _footer: "" -->
# HTTP-Methoden # HTTP-Methoden
| Methode | Bedeutung | Beispiel | HTTP-Methoden beschreiben, **was** der Client mit einer Ressource tun will.
|---------|-----------|----------|
| **GET** | Daten abrufen | Seite laden | | Methode | Bedeutung | Beispiel |
| **POST** | Daten senden | Formular absenden | |---------|-----------|-----------------------------------------------|
| **PUT** | Daten ersetzen | Profil aktualisieren | | **GET** | Daten abrufen | Seite laden `GET /index.html HTTP/2.0` |
| **DELETE** | Daten löschen | Account löschen | | **POST** | Daten senden | Formular absenden `POST /login HTTP/2.0` |
| **PUT** | Daten ersetzen | Profil aktualisieren `PUT /users/42 HTTP/2.0` |
| **DELETE** | Daten löschen | Account löschen `DELETE /users/42 HTTP/2.0` |
<small>CRUD = Create, Read, Update, Delete</small>
```http
GET /index.html HTTP/1.1
POST /login HTTP/1.1
```
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -505,10 +222,12 @@ Das wird wichtiger, wenn ihr mit REST-APIs arbeitet.
# HTTP Status-Codes # HTTP Status-Codes
Jede HTTP-Response enthält einen dreistelligen Status-Code — die erste Ziffer verrät die Kategorie.
```http ```http
HTTP/1.1 200 OK HTTP/2.0 200 OK
HTTP/1.1 404 Not Found HTTP/2.0 404 Not Found
HTTP/1.1 500 Internal Server Error HTTP/2.0 500 Internal Server Error
``` ```
| Code-Bereich | Bedeutung | | Code-Bereich | Bedeutung |
@@ -539,112 +258,76 @@ Status-Codes sagen euch, was passiert ist.
<!-- _footer: "" --> <!-- _footer: "" -->
# Zusammenfassung Teil 1 # Selektoren: ID
**Der Ablauf:** ![bg right:35%](./assets/demos/css-selector-id.png)
1. DNS (UDP:53) → Name zu IP
2. TCP-Handshake (SYN → SYN-ACK → ACK)
3. HTTP-Request (GET /...)
4. HTTP-Response (200 OK + HTML)
**Die Konzepte:** ```html
- 4 Schichten: Anwendung → Transport → Internet → Netzzugang <nav id="hauptnavigation">...</nav>
- IP bleibt gleich, MAC ändert sich pro Hop
- Ports identifizieren Programme
- Encapsulation: Jede Schicht verpackt die darüberliegende
<!--
SPEAKER NOTES:
Das ist die Zusammenfassung für Teil 1. Das solltet ihr können:
Den Ablauf: DNS, TCP-Handshake, HTTP-Request, HTTP-Response.
Die Schichten und ihre Protokolle.
Den Unterschied zwischen IP und MAC – was bleibt gleich, was ändert sich.
Was Ports tun.
Wie Encapsulation funktioniert.
-->
---
<!-- _header: "" -->
<!-- _footer: "" -->
# Spezifität: Welche Regel gewinnt?
| Selektor | Spezifität |
|----------|------------|
| Element (`p`) | 0,0,0,1 |
| Klasse (`.wichtig`) | 0,0,1,0 |
| ID (`#header`) | 0,1,0,0 |
| Inline (`style="..."`) | 1,0,0,0 |
```css
p { color: blue; } /* 0,0,0,1 */
.text { color: green; } /* 0,0,1,0 → gewinnt */
#intro { color: red; } /* 0,1,0,0 → gewinnt über beide */
``` ```
<!--
SPEAKER NOTES:
Wenn mehrere Regeln auf ein Element zutreffen, gewinnt die spezifischere.
Spezifität wird in vier Zahlen gemessen. Von links nach rechts: Inline, IDs, Klassen, Elemente.
Ein Element-Selektor hat 0,0,0,1. Eine Klasse hat 0,0,1,0. Eine ID hat 0,1,0,0.
0,0,1,0 schlägt 0,0,0,99 – auch hundert Element-Selektoren schlagen keine Klasse.
Inline-Styles schlagen alles – außer !important, was ihr vermeiden solltet.
-->
---
<!-- _header: "" -->
<!-- _footer: "" -->
# Responsive Design
```css ```css
/* Mobile First: Basis-Styles */ #hauptnavigation {
.container { background: #333;
padding: 1rem; padding: 1rem;
background: white;
}
/* Ab 768px (Tablet): Anpassungen */
@media (min-width: 768px) {
.container {
padding: 2rem;
background: red;
}
}
/* Ab 1024px (Desktop): Weitere Anpassungen */
@media (min-width: 1024px) {
.container {
background: green;
}
} }
``` ```
**Raute** vor dem Namen = ID
**Achtung:** IDs sollten **einmalig** pro Seite sein.
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
Responsive Design: Die Seite passt sich der Bildschirmgröße an. ID-Selektoren sind noch spezifischer. Raute vor dem Namen.
Mobile First: Ihr schreibt zuerst die Styles für kleine Screens. Dann fügt ihr mit @media-Queries Anpassungen für größere Screens hinzu. IDs sollten auf einer Seite nur einmal vorkommen. Für Navigation, Header, Footer, Main – einmalige Elemente.
min-width heißt: "ab dieser Breite". Also: Basis gilt für alle. Ab 768px gelten zusätzliche Regeln. Ab 1024px noch mehr. In der Praxis: Klassen sind meist besser. IDs haben hohe Spezifität und sind unflexibel.
-->
Das Gegenteil wäre Desktop First mit max-width – aber Mobile First ist heute Standard.
---
<!-- _header: "" -->
<!-- _footer: "" -->
# Farben
![bg right:35%](./assets/demos/css-colors.png)
CSS kennt fünf Farb-Notationen: **Keyword**, **Hex**, **RGB**, **RGBA** und **HSL**.
```css
/* Keyword */
color: red;
color: rebeccapurple;
/* Hex */
color: #FF0000;
color: #F00;
/* RGB = Red Green Blue, RGBA mit Alpha */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
/* HSL = Hue, Saturation, Lightness */
color: hsl(0, 100%, 50%);
```
MDN-Referenz: [CSS `<color>`](https://developer.mozilla.org/de/docs/Web/CSS/Reference/Values/color_value)
<!--
SPEAKER NOTES:
Farben können auf verschiedene Arten angegeben werden.
Keywords: red, blue, rebeccapurple. Begrenzte Auswahl, aber lesbar.
Hex: Sechs Zeichen, je zwei für Rot, Grün, Blau. #FF0000 ist reines Rot.
RGB: Gleiche Idee, aber dezimal. rgb(255, 0, 0).
RGBA: Mit Alpha-Kanal für Transparenz. 0 ist unsichtbar, 1 ist voll sichtbar.
HSL: Hue, Saturation, Lightness. Manchmal intuitiver für Farbanpassungen.
--> -->
slides/223015c/klausurfragen.md
+691 -538
View File
File diff suppressed because it is too large. Load diff