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

Compare commits

base: public/uni:613f37983ef01bbe9ff8feb2dad48ccc70ec478c
public/uni:main
public/uni:archive/refactor/didaktik-rewrite-2026
...
compare: public/uni:main
public/uni:main
public/uni:archive/refactor/didaktik-rewrite-2026
21 Commits
613f37983e ... 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
libretech 7885aee8fc 223015c 02: schicht-nummern auf 4-schichten-modell vereinheitlicht, alle abkürzungen bei erstnennung aufgelöst 2026-06-17 12:17:55 +02:00
libretech 27199ee1cc 223015c 03: hands-on-imperative auf ihr-plural vereinheitlicht 2026-06-17 12:17:55 +02:00
libretech 1dd983a453 223015c 01: tippfehler/grammatik/fachfehler korrigiert, frage-headings entschärft 2026-06-17 12:17:55 +02:00
libretech 4cd9975017 223015c 00: frage-headings/sie-anrede/drama entschärft 2026-06-17 12:17:55 +02:00
libretech a64382d2de 223015c 01: byte/bit ohne plural-s 2026-06-17 12:03:40 +02:00
libretech 45c554c875 223015c 02: alltagsmetaphern entschlackt, vertiefung sortiert, dns-hierarchie präzisiert, byte/bit ohne plural-s 2026-06-17 12:03:39 +02:00
libretech 841d8b5944 223015c demos: port-grafik baseline-fix, handshake-caption vervollständigt, dingbat raus 2026-06-17 12:03:38 +02:00
15 changed files with 1610 additions and 1901 deletions
Expand all files Collapse all files

No files matched your search

.gitignore
+4
View File
@@ -34,3 +34,7 @@ hdm-internettechnik-slides/
*.tmp
*.bak
.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
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_KLAUSUR = 1
scripts/generate-index.sh
+67 -20
View File
@@ -121,8 +121,17 @@ declare -A DISABLED_FULL
declare -A DISABLED_BUTTONS
# For course B: chapters 3,4,5 should be fully disabled
DISABLED_FULL["223015b"]="speichermedien-schnittstellen distribution-apis-zukunft vertiefung-offene-fragen"
# For course C: chapter 3 should keep link clickable but buttons disabled
DISABLED_BUTTONS["223015c"]="interaktivitaet-javascript"
# For course C: all chapters fully active
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
<!DOCTYPE html>
@@ -404,13 +413,29 @@ LINK
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
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" << KLAUSUR
if [[ "${KLAUSURFOLIEN_ACTIVE[$COURSE]}" == "1" ]]; then
pdf_active=""
if [[ -f "$BUILD_DIR/klausurfolien.pdf" ]]; then
pdf_active="<a href=\"klausurfolien.pdf\" class=\"btn btn-pdf\">PDF</a>"
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-link">
<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>
$pdf_disabled
</div>
KLAUSUR
KLAUSUROFF
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
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" << KLAUSURFRAGEN
if [[ "${KLAUSURFRAGEN_ACTIVE[$COURSE]}" == "1" ]]; then
pdf_active=""
if [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
pdf_active="<a href=\"klausurfragen.pdf\" class=\"btn btn-pdf\">PDF</a>"
fi
slides_active=""
if [[ -f "$BUILD_DIR/klausurfragen.html" ]]; then
slides_active="<a href=\"klausurfragen.html\" class=\"btn btn-slides\">Folien</a>"
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-link">
<div class="kapitel-label">Prüfung</div>
@@ -441,7 +487,8 @@ if [[ -f "$BUILD_DIR/klausurfragen.html" ]] || [[ -f "$BUILD_DIR/klausurfragen.p
$slides_disabled
$pdf_disabled
</div>
KLAUSURFRAGEN
KLAUSURFRAGENOFF
fi
fi
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/00-intro.md
+7 -7
View File
@@ -97,7 +97,7 @@ Hochschule der Medien Stuttgart
<!-- _class: lead -->
# Herzlich willkommen!
# Herzlich willkommen
## Einführung
---
@@ -116,13 +116,13 @@ Hochschule der Medien Stuttgart
---
# Warum dieses Modul?
# Motivation für dieses Modul
**Das Internet ist überall** – aber was steckt dahinter?
* Warum sehen Webseiten auf dem Handy anders aus?
* Wie funktioniert eigentlich das Internet?
* Wie erkennen Sie, ob eine Werbeagentur gute Arbeit leistet?
* Wie erkennt ihr, ob eine Werbeagentur gute Arbeit leistet?
* Was hat ein Unterseekabel mit meiner E-Mail zu tun?
* **→ Die Technik dahinter verstehen und fundierte Entscheidungen treffen**
@@ -136,13 +136,13 @@ Als Digital- und MedienwirtschaftlerInnen werdet ihr täglich mit technischen Fr
* Wie baue ich eine barrierearme Webseite?
* Welches Protokoll für welchen Zweck?
* Wie funktioniert das Web hinter den Kulissen?
* **→ Mitreden können – und selbst Webseiten bauen!**
* **→ Mitreden können – und selbst Webseiten bauen**
---
# Was Sie hier lernen werden
# Lernziele
**In dieser Veranstaltung erwerben Sie folgende Kompetenzen:**
**In dieser Veranstaltung erwerbt ihr folgende Kompetenzen:**
* Geschichte des Computers und Internets
* HTML-Grundlagen und semantisches Markup
@@ -172,7 +172,7 @@ Als Digital- und MedienwirtschaftlerInnen werdet ihr täglich mit technischen Fr
2. Netzwerke, Protokolle, **semantisches HTML** & **CSS**
3. Interaktivität, Animationen & **JavaScript**
**Ziel:** "Gelernte Hilflosigkeit" ablegen
**Ziel:** Technische Scheu abbauen und Web-Grundlagen selbst beherrschen
---
slides/223015c/01-geschichte-grundlagen-html.md
+27 -27
View File
@@ -126,7 +126,7 @@ Hochschule der Medien Stuttgart
2. Netzwerke, Protokolle, **semantisches HTML** & **CSS**
3. Interaktivität, Animationen & **JavaScript**
**Ziel:** "Gelernte Hilflosigkeit" ablegen
**Ziel:** Technische Scheu abbauen und Web-Grundlagen selbst beherrschen
---
@@ -403,10 +403,10 @@ Der Turing-Test (1950): Ein Interrogator kommuniziert per Text mit einem Mensche
- Implosions-Simulationen
- Nuklearphysik-Gleichungen
**Lösung 1943:** Menschliche "Computer"
**Lösung 1943:** Die Berechnungen übernehmen menschliche "Computer"
→ Mathematikerinnen mit Taschenrechnern & IBM-Lochkarten
**Zu langsam** → Bedarf an automatischer Berechnung
**Das ist zu langsam** → es entsteht der Bedarf an automatischer Berechnung
**Schlüsselfigur:** John von Neumann (Mathematik & Stoßwellen)
@@ -427,7 +427,7 @@ Das ENIAC-Projekt in Philadelphia sollte die Berechnungen beschleunigen.
# John von Neumann (1903–1957)
- Geboren in Budapest, Österreich-Ungarn
- Mit 8: Konnte Telefonbücher auswendig
- Mit 8: Konnte ganze Telefonbücher auswendig aufsagen
- Mit 22: Doktor in Mathematik
**Beiträge:**
@@ -623,7 +623,7 @@ COBOL läuft heute noch auf Bankensystemen
- Jeder Befehl entspricht direkt einer CPU-Instruktion
- Hardwarenah, aber für Menschen lesbar
**Fun Fact:** Chris Sawyer schrieb **RollerCoaster Tycoon** (1999) fast komplett in x86-Assembly
**Kuriosum:** Chris Sawyer schrieb **RollerCoaster Tycoon** (1999) fast komplett in x86-Assembly
<!--
KATHLEEN BOOTH (1922–2022):
@@ -893,7 +893,7 @@ Geprägt 1948 von Claude Shannon
<!--
Alles Digitale basiert darauf
Transistoren in CPUs: Milliarden Bits schalten Millionen Mal pro Sekunde
Transistoren in CPUs: Milliarden Bit schalten Millionen Mal pro Sekunde
Shannon: Begründer der Informationstheorie
-->
@@ -940,19 +940,19 @@ binary 00101010 = decimal 42
- ASCII (1963) brauchte 7 Bit für 128 Zeichen
- 8 Bit = praktisch für Hardware (Zweierpotenz: 2³ = 8)
- 8 Bit = 2 Hexadezimalziffern (elegante Darstellung)
- Kleinste adressierbare Einheit im Speicher: Prozessor kann nicht einzelne Bits direkt ansprechen, immer Bytes
- Kleinste adressierbare Einheit im Speicher: Prozessor kann nicht einzelne Bit direkt ansprechen, immer Byte
-->
---
# Was kann man mit 256 Zuständen machen?
# 256 Zustände – was sich damit darstellen lässt
- **256 Zeichen** (Buchstaben, Zahlen, Symbole)
- **256 Graustufen** (0 = Schwarz, 255 = Weiß)
- **256 Lautstärkestufen**
- **Zahlen 0-255**
**Für Farbe:** 3 Bytes pro Pixel (RGB)
**Für Farbe:** 3 Byte pro Pixel (RGB)
R=0-255, G=0-255, B=0-255 → **16,7 Millionen Farben**
<!--
@@ -1004,7 +1004,7 @@ Warum gerade 8 Bit?
<!--
Dezimal = was wir im Alltag nutzen (10 Finger → 10 Ziffern)
Binär = was Computer nutzen (Strom an/aus → 2 Zustände)
Hexadezimal = Kompromiss: kompakter als Binär, aber passt perfekt auf Bytes (2 Hex-Ziffern = 1 Byte = 8 Bit)
Hexadezimal = Kompromiss: kompakter als Binär, aber passt perfekt auf Byte (2 Hex-Ziffern = 1 Byte = 8 Bit)
Die Basis bestimmt, wie viele Symbole pro Stelle zur Verfügung stehen:
- Dezimal: 10 (0–9)
- Binär: 2 (0, 1)
@@ -1021,7 +1021,7 @@ Die Basis bestimmt, wie viele Symbole pro Stelle zur Verfügung stehen:
**Hexadezimal (Base 16):**
`4D 50 33` (= "MP3" in ASCII)
**Jede Hex-Ziffer = 4 Bits (ein "Nibble")**
**Jede Hex-Ziffer = 4 Bit (ein "Nibble")**
0-9, A-F (A=10, B=11, ..., F=15)
`4 = 0100` `D = 1101`
@@ -1031,7 +1031,7 @@ Die Basis bestimmt, wie viele Symbole pro Stelle zur Verfügung stehen:
<!--
Hex = Shortcut für Menschen
1 Byte = 2 Hex-Ziffern (00-FF)
"Nibble" = 4 Bits = halbes Byte (Wortspiel: nibble = knabbern, byte = beißen)
"Nibble" = 4 Bit = halbes Byte (Wortspiel: nibble = knabbern, byte = beißen)
CSS (Cascading Style Sheets)-Farben nutzen Hex: #FF0000 = Rot
-->
@@ -1076,7 +1076,7 @@ Dieselben 8 Byte (PNG-Dateianfang: 89 50 4E 47 0D 0A 1A 0A) — drei Perspektive
---
# Wo begegnet Ihnen Hex-Code?
# Wo euch Hex-Code begegnet
| Kontext | Beispiel |
|---------|----------|
@@ -1112,7 +1112,7 @@ Fehlercodes: Windows zeigt diese bei Bluescreens
---
# Bit vs. Byte: Die Verwirrung
# Bit vs. Byte: der Unterschied
**1 Byte = 8 Bit** → Bit ÷ 8 = Byte
@@ -1126,7 +1126,7 @@ Fehlercodes: Windows zeigt diese bei Bluescreens
<!--
Bits = kleines b, Bytes = großes B
Bit = kleines b, Byte = großes B
Internetanbieter: Mbit/s (klingt größer!)
100 Mbit/s ÷ 8 = 12,5 MB/s
Warum? Marketing - 100 klingt besser als 12,5
@@ -1146,7 +1146,7 @@ Warum? Marketing - 100 klingt besser als 12,5
**H**yper**T**ext **M**arkup **L**anguage
* **Keine** Programmiersprache
* Am ehesten eine Formattierungssprache
* Am ehesten eine Auszeichnungssprache (Markup)
* Beschreibt **Struktur und Aufbau** einer Webseite
* ```html
<p>Das ist ein Absatz.</p>
@@ -1167,8 +1167,8 @@ Aktuelle Version: HTML5 (seit 2014)
# Was ist HTML? (2/2)
* Mit HTML werden **HTML-Dokumente** beschrieben (bspw. `index.html`)
* Ein HTML-Dokument beschreibt das/den `Document Object Model (DOM)`
* Der DOM ist eine **hierarchische Baumstruktur** (Kind- und Elternelemente)
* Ein HTML-Dokument beschreibt das **Document Object Model (DOM)**
* Das DOM ist eine **hierarchische Baumstruktur** (Kind- und Elternelemente)
* *parent nodes / elements*
* *child nodes / elements*
* *sibling nodes / elements*
@@ -1178,12 +1178,12 @@ Aktuelle Version: HTML5 (seit 2014)
# HTML-Anatomie (1/2)
Formattierungssprache
HTML ist eine Auszeichnungssprache (Markup).
* HTML folgt einer strengen **Syntax** zur Formattieren von digitalen Inhalten
* HTML folgt einer strengen **Syntax** zum Auszeichnen digitaler Inhalte
* Syntax: `<element attribute="value"> ... </element>`
* Öffnende und schließende HTML-Tags müssen identisch sein
* Das schließende Tag muss ein `/` nach der Spitzenklammer haben
* Das schließende Tag hat ein `/` direkt nach der öffnenden spitzen Klammer (`</p>`)
---
@@ -1199,7 +1199,7 @@ Formattierungssprache
* `<b> ... </b>` fett-gedruckter Text (inline)
* `<a> ... </a>` Hyperlink (Verlinkung zu anderen Webseiten, Bildern)
* `<body> ... </body>` Sichtbarer Teil eines HTML-Dokuments
* `<details> ... </details>` Collapsable / Akkordion / Aufklapp-Text
* `<details> ... </details>` Aufklapp-Text (Akkordion)
* **Selbst-schließend**
* `<img />` Bild, Vektorgrafik etc.
* `<input />` Eingabefeld
@@ -1385,7 +1385,7 @@ a = anchor (Anker)
# Natives HTML
Was noch üblicherweise mit Skriptsprachen wie JavaScript und anderen umgesetzt werden musste, kann nun HTML selber. Wer dieses dennoch verwendet, hat das einen sog. *"Code smell"*.
Vieles, was früher JavaScript erforderte, beherrscht HTML inzwischen selbst. Wer es dennoch per Skript löst, produziert einen sogenannten *"Code Smell"*.
| Funktion | HTML-Element |
|----------|--------------|
@@ -1510,7 +1510,7 @@ Accessibility ist eingebaut
<!-- _class: lead -->
# Wie nutzen Menschen das Web?
# Wie Menschen das Web nutzen
---
@@ -1554,7 +1554,7 @@ Accessibility ist eingebaut
---
# Wie nutzen Menschen das Web?
# Wie Menschen das Web nutzen
| Eingabe | Nutzungsweise |
|---------|---------------|
@@ -1613,10 +1613,10 @@ Screenreader lesen den DOM sequenziell – semantisches HTML (`<nav>`, `<main>`,
---
# Warum "Barrierefreiheit"?
# Bedeutung von "Barrierefreiheit"
**Rechtlich:**
- EU: European Accessibility Act (seit Juni 2025 in Kraft!)
- EU: European Accessibility Act (seit Juni 2025 in Kraft)
- DE: BITV 2.0 (Behörden), Privatwirtschaft betroffen
**Ethisch:**
slides/223015c/02-netzwerke-protokolle-css.md
+63 -62
View File
@@ -215,13 +215,13 @@ Das Web folgt dem **Client-Server-Modell**: Ein Client (Browser) sendet einen **
# Glossar: Adressen & Identitäten
Jedes Gerät im Netz braucht Adressen: eine **IP** für das globale Routing, eine **MAC** für das lokale Netz und einen **Port** für das richtige Programm.
Jedes Gerät im Netz braucht Adressen: eine **IP** (Internet Protocol) für das globale Routing, eine **MAC** (Media Access Control) für das lokale Netz und einen **Port** für das richtige Programm.
| Begriff | Was ist das? | Beispiel |
|---------|--------------|----------|
| **IP-Adresse** | Globale Adresse im Internet | `212.132.79.37` |
| **MAC-Adresse** | Hardware-Adresse der Netzwerkkarte | `aa:bb:cc:dd:ee:ff` |
| **Port** | "Türnummer" auf einem Rechner | `80`, `443`, `22` |
| **Port** | Nummer eines Programms bzw. Dienstes | `80`, `443`, `22` |
| **DNS** | Telefonbuch: Name → IP | hdm-stuttgart.de → IP |
| **Domain** | Menschenlesbarer Name | `hdm-stuttgart.de` |
@@ -248,10 +248,10 @@ Daten werden Schicht für Schicht verpackt — jede Schicht fügt einen eigenen
|-------------|-------------------------------------------------------|--------------------------|
| **Payload** | Die eigentlichen Nutzdaten (bspw. Request, Response) | Anwendung |
| **Header** | Metadaten vor und nach dem Payload | Jedes Layer |
| **Segment** | Payload + TCP-Header (Anwendungsport) | Transport (Layer 4) |
| **Paket** | Payload + IP-Header (WLAN-Router) | Internet (Layer 3) |
| **Frame** | Payload + MAC-Header (Netzwerkkarte) | Netzzugang (Layer 2) |
| **Bit** | Abfolge von Signalen (Licht, Strom, Kabel, Mobilfunk) | Bitübertragung (Layer 1) |
| **Segment** | Payload + TCP-Header (Anwendungsport) | Transport (Layer 3) |
| **Paket** | Payload + IP-Header (WLAN-Router) | Internet (Layer 2) |
| **Frame** | Payload + MAC-Header (Netzwerkkarte) | Netzzugang (Layer 1) |
| **Bit** | Abfolge von Signalen (Licht, Strom, Kabel, Mobilfunk) | Netzzugang (Layer 1) |
<!--
@@ -306,9 +306,9 @@ Protokolle regeln die Kommunikation auf jeder Schicht — von der Anwendung (HTT
| **HTTP** | Webseiten + Inhalte übertragen | 80 | Anwendung (Layer 4) |
| **HTTPS** | HTTP + Verschlüsselung | 443 | Anwendung (Layer 4) |
| **DNS** | Namen → IP-Adressen | 53 | Anwendung (Layer 4) |
| **TCP** | Zuverlässige Übertragung | – | Transport (Layer 4) |
| **UDP** | Schnelle Übertragung | – | Transport (Layer 4) |
| **IP** | Routing durchs Internet | – | Internet (Layer 3) |
| **TCP** | Zuverlässige Übertragung | – | Transport (Layer 3) |
| **UDP** | Schnelle Übertragung | – | Transport (Layer 3) |
| **IP** | Routing durchs Internet | – | Internet (Layer 2) |
<i><small>HTTP(S) = Hypertext Transfer Protocol (Secure)</small> · <small>DNS = Domain Name System</small> · <small>TCP = Transmission Control Protocol</small> · <small>UDP = User Datagram Protocol</small> · <small>IP = Internet Protocol</small>
</i>
@@ -350,7 +350,7 @@ Zwischen Klick und fertiger Webseite liegen viele Stationen.
Jede Schicht spricht eine andere Sprache:
- Browser → **HTTP**
- Netzwerkkarte → **Bits und Signale**
- Netzwerkkarte → **Bit und Signale**
- Router → **IP-Pakete**
- Provider → **Routing**
@@ -361,7 +361,7 @@ SPEAKER NOTES:
- Browser→Server: min. 7-8 Stationen
- Jede Station: andere Aufgabe
- Browser versteht HTTP
- Netzwerkkarte versteht nur Bits (Strom an/aus)
- Netzwerkkarte versteht nur Bit (Strom an/aus)
- Router versteht IP
- Wie zusammenbringen?
-->
@@ -374,7 +374,7 @@ Statt dass jedes Programm alles können muss, teilen sich mehrere Schichten die
| 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) |
| **IP** | Welcher Rechner? | Router, Firewall |
| **Ethernet/WLAN** | Nächstes Gerät? | Switch, Access Point |
@@ -406,6 +406,10 @@ SPEAKER NOTES:
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>
<!--
SPEAKER NOTES:
- TCP/IP = das echte Internet
@@ -424,7 +428,7 @@ SPEAKER NOTES:
# TCP/IP-Modell – Vertiefung
Das TCP/IP-Modell entstand praktisch aus dem ARPANET (1970er), im Gegensatz zum theoretischen OSI-Modell (7 Schichten, 1984). TCP/IP hat sich durchgesetzt, weil es das reale Internet beschreibt.
Das TCP/IP-Modell entstand praktisch aus dem ARPANET (1970er), im Gegensatz zum theoretischen OSI-Modell (Open Systems Interconnection, 7 Schichten, 1984). TCP/IP hat sich durchgesetzt, weil es das reale Internet beschreibt.
**Schicht-Aufgaben im Detail:**
@@ -441,6 +445,8 @@ Das TCP/IP-Modell entstand praktisch aus dem ARPANET (1970er), im Gegensatz zum
**Warum Schichten?** Abstraktion. HTTP muss nicht wissen, ob Ethernet oder WLAN verwendet wird. Änderungen in einer Schicht betreffen andere nicht.
<small>FTP = File Transfer Protocol · ICMP = Internet Control Message Protocol · PPP = Point-to-Point Protocol</small>
---
# Schichten verpacken Daten
@@ -458,7 +464,7 @@ SPEAKER NOTES:
- TCP: eigener Header dazu (Ports, Seq-Nr) → weiter
- IP: eigener Header dazu (IPs) → weiter
- Ethernet: Header + Trailer (MACs, Prüfsumme)
- Am Ende: Bits → elektrische Signale / Funk
- Am Ende: Bit → elektrische Signale / Funk
- Empfang: Rückwärts auspacken
-->
@@ -501,15 +507,15 @@ SPEAKER NOTES:
| Schicht | Einheit | Header-Inhalte |
|---------|---------|----------------|
| Anwendung | Daten | HTTP-Header, Cookies, Content-Type |
| Transport | Segment | Quell-/Zielport, Sequenznummer, Flags (SYN, ACK) |
| Internet | Paket | Quell-/Ziel-IP, TTL, Protokoll (TCP=6, UDP=17) |
| Netzzugang | Frame | Quell-/Ziel-MAC, EtherType, CRC-Prüfsumme |
| Transport | Segment | Quell-/Zielport, Sequenznummer, Flags (SYN = Synchronize, ACK = Acknowledge) |
| Internet | Paket | Quell-/Ziel-IP, TTL (Time To Live), Protokoll (TCP=6, UDP=17) |
| Netzzugang | Frame | Quell-/Ziel-MAC, EtherType, CRC-Prüfsumme (Cyclic Redundancy Check) |
**Overhead-Rechnung (1 Byte HTTP-Body):**
- Ethernet: 14 + 4 Bytes (Header + Trailer)
- IP: 20 Bytes (ohne Optionen)
- TCP: 20 Bytes (ohne Optionen)
- **Minimum: 58 Bytes für 1 Byte Nutzlast**
- Ethernet: 14 + 4 Byte (Header + Trailer)
- IP: 20 Byte (ohne Optionen)
- TCP: 20 Byte (ohne Optionen)
- **Minimum: 58 Byte für 1 Byte Nutzlast**
**Decapsulation:** Empfänger packt in umgekehrter Reihenfolge aus. Jede Schicht prüft ihren Header (z.B. CRC) und reicht Nutzdaten nach oben.
@@ -521,7 +527,7 @@ SPEAKER NOTES:
Jede Anwendung müsste wissen, wie Ethernet-Frames gebaut werden, wie WLAN funktioniert und wie Router Pakete weiterleiten.
**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:**
Wechselt WLAN zu Ethernet, ändert sich nur Schicht 1.
@@ -577,7 +583,6 @@ SPEAKER NOTES:
- **Global eindeutig** (im gesamten Internet)
- Identifiziert einen **Rechner**
- **Bleibt gleich** auf dem gesamten Weg
- Analogie: **Empfänger auf einem Brief**
Router lesen die Ziel-IP und leiten das Paket in die passende Richtung weiter.
@@ -600,7 +605,6 @@ aa:bb:cc:dd:ee:ff
- **Lokal eindeutig** (nur im lokalen Netzwerk relevant)
- Identifiziert eine **Netzwerkkarte**
- **Ändert sich bei jedem Hop**
- Analogie: **"Nächstes Postamt: XY"**
Sie funktioniert nur innerhalb eines Netzwerksegments.
@@ -621,11 +625,11 @@ SPEAKER NOTES:
![bg right:35% fit](./assets/demos/port-highlight.png)
Ein Port identifiziert ein **Programm** auf einem Rechner — wie eine **Wohnungstür im Mehrfamilienhaus**.
Ein Port identifiziert ein bestimmtes **Programm** (bzw. einen Dienst) auf einem Rechner.
- **80** → HTTP
- **443** → HTTPS
- **22** → SSH
- **22** → SSH (Secure Shell)
- **53** → DNS
<!--
@@ -674,6 +678,11 @@ SPEAKER NOTES:
Drei Adressebenen lösen drei verschiedene Probleme:
**Port (Schicht 3 – Transport):**
- 16 Bit → 65.535 mögliche Ports
- Well-Known Ports (0–1023): HTTP=80, HTTPS=443, SSH=22
- Ephemeral Ports (49152–65535): Dynamisch für Client-Verbindungen
**IP-Adresse (Schicht 2 – Internet):**
- Hierarchisch aufgebaut: Netzwerk-Teil + Host-Teil
- Router lesen nur den Netzwerk-Teil für Routing-Entscheidungen
@@ -685,12 +694,7 @@ Drei Adressebenen lösen drei verschiedene Probleme:
- Nur relevant für den **nächsten Hop** – wird bei jedem Router ersetzt
- ARP (Address Resolution Protocol) übersetzt IP → MAC
**Port (Schicht 3 – Transport):**
- 16 Bit → 65.535 mögliche Ports
- Well-Known Ports (0–1023): HTTP=80, HTTPS=443, SSH=22
- Ephemeral Ports (49152–65535): Dynamisch für Client-Verbindungen
**Warum ändert sich nur MAC?** IP ist das Endziel (Brief-Adresse), MAC ist der aktuelle Bote (wer trägt den Brief gerade?).
**Nur die MAC-Adresse ändert sich unterwegs:** Die IP bezeichnet das Endziel und bleibt konstant, die MAC nur den jeweils nächsten Hop und wird an jedem Router ersetzt.
---
@@ -794,12 +798,12 @@ SPEAKER NOTES:
![bg right:45% fit](./assets/demos/dns-tree.png)
**Dezentral:** Niemand kennt alles.
DNS ist **dezentral** organisiert: Kein Server kennt alle Namen.
Jede Ebene kennt nur die nächste:
Jede Ebene verweist nur auf die Ebene darunter:
- Root → .de, .com, .org
- .de → alle .de-Domains
- Root → TLDs (Top-Level-Domains: .de, .com, .org)
- .de → autoritative Server jeder .de-Domain
- hdm-stuttgart.de → www, mail, …
<!--
@@ -850,7 +854,7 @@ SPEAKER NOTES:
- DNS = normales Netzwerk-Protokoll
- Nutzt UDP (schneller, kleine Anfragen)
- Port 53
- Wird auch verpackt: UDP→IP→Ethernet→Bits
- Wird auch verpackt: UDP→IP→Ethernet→Bit
-->
---
@@ -901,7 +905,7 @@ TCP ist **verbindungsorientiert**:
- Verlorene Pakete können erkannt und neu angefordert werden
**Analogie:**
Telefonat: Klingeln → Abheben → "Hallo?" → Gespräch beginnt
Telefonat: Klingeln → Abheben → Gespräch beginnt
<!--
SPEAKER NOTES:
@@ -961,7 +965,7 @@ Der Handshake synchronisiert **Sequenznummern** – essenziell für TCPs Zuverl
- SYN-Flood-Attacke: Millionen SYNs ohne ACK → Server-Ressourcen erschöpft
- Schutz: SYN-Cookies (Server speichert keinen State bis ACK kommt)
**Verbindungsabbau:** 4-Way-Handshake (FIN → ACK → FIN → ACK) oder RST für sofortigen Abbruch.
**Verbindungsabbau:** 4-Way-Handshake (FIN = Finish → ACK → FIN → ACK) oder RST (Reset) für sofortigen Abbruch.
---
@@ -1007,7 +1011,7 @@ Accept-Language: de-DE
Connection: keep-alive
```
Der Request umfasst rund 200 Bytes Text.
Der Request umfasst rund 200 Byte Text.
**GET** ruft Daten ab (im Gegensatz zu **POST**, das Daten sendet).
**/** bezeichnet die Startseite.
@@ -1019,7 +1023,7 @@ SPEAKER NOTES:
- "/" = Wurzel = Startseite
- HTTP/2.0 = Protokollversion
- Header: Kontext (Host, Browser, Sprache)
- ~200 Bytes Text → müssen durchs Internet
- ~200 Byte Text → müssen durchs Internet
-->
---
@@ -1031,7 +1035,7 @@ SPEAKER NOTES:
<!--
SPEAKER NOTES:
- 200 Bytes Request → was passiert damit?
- 200 Byte Request → was passiert damit?
- Schicht für Schicht verpacken
-->
@@ -1123,7 +1127,7 @@ SPEAKER NOTES:
# Layer 1: Physical
Frame wird zu **Bits** – Bits werden zu Signalen:
Frame wird zu **Bit** – Bit werden zu Signalen:
| Medium | Signal |
|--------|--------|
@@ -1140,7 +1144,7 @@ Ab Schicht 1 erfolgt die Übertragung physikalisch.
<!--
SPEAKER NOTES:
- Ganz unten: Physik
- Frame → Bits → Signale
- Frame → Bit → Signale
- Je nach Medium:
- Kupfer: Spannung High/Low
- Glasfaser: Licht an/aus
@@ -1169,7 +1173,7 @@ SPEAKER NOTES:
Der Router verarbeitet das Frame in drei Schritten:
1. **Layer 1:** Signale werden zu Bits.
1. **Layer 1:** Signale werden zu Bit.
2. **Layer 2:** Frame und MAC-Adresse werden geprüft, dann ausgepackt.
3. **Layer 3:** Die Ziel-IP liegt außerhalb des lokalen Netzes.
@@ -1178,7 +1182,7 @@ Der Router verarbeitet das Frame in drei Schritten:
<!--
SPEAKER NOTES:
- Router empfängt Frame
- Physik: Signale → Bits
- Physik: Signale → Bit
- Ethernet: MAC okay? Prüfsumme okay? → auspacken
- IP: Ziel-IP lesen → 212.132.79.37 → nicht mein Netz
- Routing-Tabelle: In welche Richtung?
@@ -1252,7 +1256,7 @@ Am Ende erkennt der Webserver die Anfrage nach der Startseite.
<!--
SPEAKER NOTES:
- Schicht für Schicht auspacken:
- Physik → Bits
- Physik → Bit
- Ethernet → Frame prüfen → auspacken
- IP → Ziel-IP = meine? Ja → auspacken
- TCP → Port 443 = Webserver-Prozess → auspacken
@@ -1282,7 +1286,7 @@ Rund 45 KB HTML müssen nun zu euch übertragen werden.
SPEAKER NOTES:
- Antwort: 200 OK = alles gut
- Content-Type: HTML
- Content-Length: 45231 Bytes
- Content-Length: 45231 Byte
- Dann: eigentlicher HTML-Code
-->
@@ -1399,7 +1403,7 @@ Beide sind Transport-Protokolle (Schicht 3), aber mit fundamental unterschiedlic
**UDP (User Datagram Protocol):**
- Verbindungslos (Fire-and-Forget)
- Keine Sequenznummern, keine ACKs
- Header nur 8 Bytes (TCP: 20+ Bytes)
- Header nur 8 Byte (TCP: 20+ Byte)
- Anwendung muss selbst für Zuverlässigkeit sorgen
| Anwendung | Protokoll | Grund |
@@ -1440,9 +1444,9 @@ SPEAKER NOTES:
**MTU** = Maximum Transmission Unit
Ein Ethernet-Frame kann maximal **1500 Bytes** Nutzdaten transportieren.
Ein Ethernet-Frame kann maximal **1500 Byte** Nutzdaten transportieren.
**Problem:** Ein Foto hat 3.000.000 Bytes.
**Problem:** Ein Foto hat 3.000.000 Byte.
**Lösung:** TCP zerschneidet die Daten in ~2000 Segmente.
Jedes Segment hat eine Sequenznummer.
@@ -1451,7 +1455,7 @@ Der Empfänger setzt sie zusammen.
<!--
SPEAKER NOTES:
- MTU = physikalisches Limit
- Ethernet-Frame: max 1500 Bytes Nutzdaten
- Ethernet-Frame: max 1500 Byte Nutzdaten
- Webseite 100KB, Video Gigabytes?
- TCP zerschneidet in passende Stücke
- Jedes mit Sequenznummer
@@ -1516,7 +1520,7 @@ HTTP-Methoden definieren die **Semantik** der Anfrage – was der Client vom Ser
**Idempotent:** Mehrfaches Ausführen hat denselben Effekt wie einmaliges (GET, PUT, DELETE).
**Safe:** Ändert nichts am Server (nur GET, HEAD, OPTIONS).
**REST-Prinzip:** URLs identifizieren Ressourcen, Methoden definieren Aktionen.
**REST-Prinzip** (Representational State Transfer): URLs identifizieren Ressourcen, Methoden definieren Aktionen.
```
GET /users/42 → Benutzer 42 abrufen
PUT /users/42 → Benutzer 42 vollständig ersetzen
@@ -1584,7 +1588,7 @@ Die erste Ziffer kategorisiert die Antwort:
- **301 vs. 302:** 301 = permanent umgezogen (Cache-fähig), 302 = temporär (nicht cachen)
- **304 Not Modified:** Browser hat Cache, Server bestätigt: noch aktuell → spart Bandbreite
**API-Design:** Korrekte Status-Codes sind wichtig für Clients. `200` bei Fehler mit `{"error": "..."}` im Body ist schlechtes Design.
**API-Design** (Application Programming Interface): Korrekte Status-Codes sind wichtig für Clients. `200` bei Fehler mit `{"error": "..."}` im Body ist schlechtes Design.
---
@@ -1714,7 +1718,7 @@ p {
}
```
- Trennt **Inhalt** (HTML) von **Darstellung** (CSS)
- Trennt **Inhalt** (HTML – Hypertext Markup Language) von **Darstellung** (CSS)
- "Cascading" = Regeln können überschrieben werden
- Eine CSS-Datei kann viele HTML-Seiten stylen
@@ -1984,7 +1988,7 @@ Spezifität bestimmt, welche CSS-Regel gewinnt, wenn mehrere auf dasselbe Elemen
- Eine ID schlägt jede Anzahl von Klassen
- `!important` bricht alles → vermeiden, da schwer zu überschreiben
**Best Practice:** Flache Spezifität anstreben. BEM-Methodik (`.block__element--modifier`) hält Spezifität gleichmäßig niedrig.
**Best Practice:** Flache Spezifität anstreben. BEM-Methodik (Block Element Modifier, `.block__element--modifier`) hält Spezifität gleichmäßig niedrig.
---
@@ -2064,22 +2068,19 @@ Best Practice: Setzt das global für alle Elemente.
![bg right:35%](./assets/demos/css-colors.png)
CSS kennt fünf Notationen für Farben: **Keyword**, **Hex**, **RGB**, **RGBA** (mit Transparenz) und **HSL**.
CSS kennt fünf Farb-Notationen: **Keyword**, **Hex**, **RGB**, **RGBA** und **HSL**.
```css
/* Keyword */
color: red;
color: rebeccapurple;
/* Hex */
color: #FF0000;
color: #F00;
/* RGB / RGBA */
/* RGB = Red Green Blue, RGBA mit Alpha */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
/* HSL */
/* HSL = Hue, Saturation, Lightness */
color: hsl(0, 100%, 50%);
```
slides/223015c/03-interaktivitaet-javascript.md
+8 -8
View File
@@ -354,13 +354,13 @@ true || false // true (ODER)
const hobbies = ["Hobby1", "Hobby2"];
```
2. Gib sie aus:
2. Gebt sie aus:
```javascript
console.log(`I am ${name}, ${age} years old.`);
console.log("My hobbies:", hobbies);
```
3. Erstelle ein `person`-Objekt und greife auf Properties zu
3. Erstellt ein `person`-Objekt und greift auf Properties zu
---
@@ -511,7 +511,7 @@ Jedes Element ist ein Objekt
# Elemente finden
```javascript
// Einzelnes Element (erstes gefundene)
// Einzelnes Element (erstes gefundenes)
document.getElementById("meinId");
document.querySelector(".meineKlasse");
document.querySelector("nav > a");
@@ -631,10 +631,10 @@ remove = aus DOM entfernen
**Aufgaben (in script.js):**
1. Ändere den Text von `#output`
2. Füge 5 `<li>`-Elemente zur Liste hinzu (mit Schleife!)
3. Gib jedem geraden Element eine Klasse `highlight`
4. Style `.highlight` in CSS (z.B. andere Farbe)
1. Ändert den Text von `#output`
2. Fügt 5 `<li>`-Elemente zur Liste hinzu (mit Schleife)
3. Gebt jedem geraden Element eine Klasse `highlight`
4. Gestaltet `.highlight` in CSS (z. B. andere Farbe)
---
@@ -1027,7 +1027,7 @@ Es gibt keine falschen Antworten.
<!-- _class: lead -->
# Danke!
# Danke
**Kontakt:** lb-czechowski@hdm-stuttgart.de
slides/223015c/assets/demos/port-highlight.html
+16 -11
View File
@@ -5,18 +5,17 @@
<title>Port-Highlight</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 28px 40px; display: inline-block; }
body { padding: 28px 40px 110px; display: inline-block; }
.line {
font-family: ui-monospace, "SF Mono", monospace;
font-size: 2.2rem;
color: #1a1a2e;
display: flex;
align-items: center;
align-items: baseline;
}
.port-wrap {
display: inline-flex;
flex-direction: column;
align-items: center;
position: relative;
display: inline-block;
margin-left: 4px;
}
.port {
@@ -26,11 +25,20 @@
border-radius: 4px;
font-weight: 700;
}
.below {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
margin-top: 4px;
}
.connector {
width: 2px;
height: 18px;
background: #c2410c;
margin-top: 4px;
}
.caption-text {
background: #fed7aa;
@@ -42,16 +50,13 @@
font-size: 1rem;
font-family: system-ui, sans-serif;
margin-top: 2px;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="line">
212.132.79.37:<div class="port-wrap">
<span class="port">443</span>
<div class="connector"></div>
<div class="caption-text">Port 443 = HTTPS</div>
</div>
212.132.79.37:<span class="port-wrap"><span class="port">443</span><span class="below"><span class="connector"></span><span class="caption-text">Port 443 = HTTPS</span></span></span>
</div>
</body>
</html>
slides/223015c/assets/demos/port-highlight.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

slides/223015c/assets/demos/tcp-handshake.html
+2 -2
View File
@@ -104,7 +104,7 @@
<!-- SYN-ACK -->
<div class="msg arrow-left msg-reverse" style="left: 83px; right: 80px; top: 180px;">
<div class="label reply" style="left: 50%; transform: translateX(-50%);">SYN-ACK · Seq=5000, Ack=1001</div>
<div class="quote" style="left: 50%; transform: translateX(-50%);">"OK, ich starte bei 5000"</div>
<div class="quote" style="left: 50%; transform: translateX(-50%);">"OK, ich starte bei 5000 und erwarte 1001"</div>
</div>
<!-- ACK -->
@@ -113,7 +113,7 @@
<div class="quote" style="left: 50%; transform: translateX(-50%);">"Verstanden, los geht's"</div>
</div>
<div class="final">✓ Verbindung steht</div>
<div class="final">Verbindung steht</div>
</div>
</body>
</html>
slides/223015c/assets/demos/tcp-handshake.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 63 KiB

slides/223015c/klausurfolien.md
+94 -411
View File
@@ -5,7 +5,7 @@ paginate: true
backgroundColor: #fff
header: "Grundlagen IT- und Internettechnik (223015c)"
footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
title: "Kapitel 1: Geschichte, Grundlagen & HTML"
title: Grundlagen IT- und Internettechnik
---
<style>
:root {
@@ -20,13 +20,13 @@ section {
font-size: 1.7rem;
}
h1 {
color: #a02060; /* darker raspberry */
color: #a02060;
}
section.invert h1 {
color: #fff;
}
h2 {
color: #1f2937; /* dark gray, almost black */
color: #1f2937;
}
pre {
background: #0f0f23;
@@ -82,10 +82,9 @@ section.aufgabe footer {
<!-- _class: invert -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: black -->
<!-- _backgroundColor: #000 -->
![bg fit opacity:0.2](./assets/background-termin-2.png)
![bg cover opacity:0.2](./assets/background-termin-1.png)
# Grundlagen IT- und Internettechnik
@@ -103,39 +102,6 @@ Hochschule der Medien Stuttgart
<!-- _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
**Ohne Von-Neumann-Architektur:**
@@ -173,117 +139,18 @@ PRÜFUNGSRELEVANT: Warum Von-Neumann revolutionär, Unterschied zu Harvard, Beis
<!-- _footer: "" -->
# HTML Metadaten
```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
-->
# HTML-Anatomie (2/2)
- 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)
**Tastatur-Test:**
- Alle Funktionen nur mit Tab + Enter nutzbar?
- Fokus immer sichtbar?
- Logische Tab-Reihenfolge?
- Alle Funktionen sind nur mit Tab + Enter nutzbar
- Fokus immer sichtbar: Textlinks, Buttons, Texteingabe etc.
- Logische Tab-Reihenfolge: "Skip to main", Navigation, Hauptinhalt
**Screenreader-Test:**
- VoiceOver (Mac): `Cmd + F5`
- NVDA (Windows): Gratis-Download
**Tools:**
- axe DevTools, WAVE (Browser-Extensions)
- Lighthouse (in Chrome DevTools)
**Tools/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)
<!--
Automatische Tests finden ~30% der Probleme
@@ -319,168 +185,19 @@ Echte NutzerInnen einbeziehen = Gold-Standard
<!-- _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
| Methode | Bedeutung | Beispiel |
|---------|-----------|----------|
| **GET** | Daten abrufen | Seite laden |
| **POST** | Daten senden | Formular absenden |
| **PUT** | Daten ersetzen | Profil aktualisieren |
| **DELETE** | Daten löschen | Account löschen |
HTTP-Methoden beschreiben, **was** der Client mit einer Ressource tun will.
| Methode | Bedeutung | Beispiel |
|---------|-----------|-----------------------------------------------|
| **GET** | Daten abrufen | Seite laden `GET /index.html HTTP/2.0` |
| **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:
@@ -505,10 +222,12 @@ Das wird wichtiger, wenn ihr mit REST-APIs arbeitet.
# HTTP Status-Codes
Jede HTTP-Response enthält einen dreistelligen Status-Code — die erste Ziffer verrät die Kategorie.
```http
HTTP/1.1 200 OK
HTTP/1.1 404 Not Found
HTTP/1.1 500 Internal Server Error
HTTP/2.0 200 OK
HTTP/2.0 404 Not Found
HTTP/2.0 500 Internal Server Error
```
| Code-Bereich | Bedeutung |
@@ -539,112 +258,76 @@ Status-Codes sagen euch, was passiert ist.
<!-- _footer: "" -->
# Zusammenfassung Teil 1
# Selektoren: ID
**Der Ablauf:**
1. DNS (UDP:53) → Name zu IP
2. TCP-Handshake (SYN → SYN-ACK → ACK)
3. HTTP-Request (GET /...)
4. HTTP-Response (200 OK + HTML)
![bg right:35%](./assets/demos/css-selector-id.png)
**Die Konzepte:**
- 4 Schichten: Anwendung → Transport → Internet → Netzzugang
- 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 */
```html
<nav id="hauptnavigation">...</nav>
```
<!--
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
/* Mobile First: Basis-Styles */
.container {
#hauptnavigation {
background: #333;
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:
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.
Das Gegenteil wäre Desktop First mit max-width – aber Mobile First ist heute Standard.
In der Praxis: Klassen sind meist besser. IDs haben hohe Spezifität und sind unflexibel.
-->
---
<!-- _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