hdm/2025
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: hdm/2025:6aba40e128651b523bb41504cb1f7af418b0ff7d
hdm/2025:main hdm/2025:test-merge hdm/2025:klausur-erklaerungen hdm/2025:narrative-academic-merge
...
compare: hdm/2025:c45ddc779c7f7e90b4b436d10bebc55a5b3c76c0
hdm/2025:main hdm/2025:test-merge hdm/2025:klausur-erklaerungen hdm/2025:narrative-academic-merge
13 Commits
6aba40e128 ... c45ddc779c
Author SHA1 Message Date
libretech c45ddc779c replace arp dialog with visual, inline first-hop arrow 2026-04-20 11:52:13 +02:00
libretech 5b7170e5f4 remove stray handshake png from repo root 2026-04-20 11:48:06 +02:00
libretech cbebc1a6f7 remove klausur class from chapter 2, siezen students, add server-decap demo, hide header/footer on oversized slides 2026-04-20 11:47:55 +02:00
libretech 8ed7796968 replace ascii trees: dns hierarchy, dom structure 2026-04-20 11:38:28 +02:00
libretech 5d4d167cbd replace ascii: encap layers, timeline, dns lookup sequence, hop chain 2026-04-20 11:34:56 +02:00
libretech 6c8688c9f6 replace ascii arrows: network chain, port highlight, client/server, encap/decap, response hops 2026-04-20 11:27:28 +02:00
libretech 54ba08cdbc mark css einheiten slide as klausur 2026-04-20 11:11:57 +02:00
libretech 777e0ffddb replace ascii encapsulation diagrams: tcp, ip, ethernet, router re-hop 2026-04-20 11:10:47 +02:00
libretech 76f7ff3a46 replace ascii osi/tcpip layer diagram with rendered visual 2026-04-20 11:06:16 +02:00
libretech b3c0994b7e replace ascii box-model with diagram, expand explanation 2026-04-20 10:59:00 +02:00
libretech fb361a2854 add css demos for 223015c chapter 2: selectors, specificity, box-model, colors, pseudo, responsive 2026-04-20 10:53:11 +02:00
libretech a2934f1327 add html/css demos for 223015c chapter 1: html basics, widgets, a11y 2026-04-20 10:44:12 +02:00
libretech 558d0e5ecd update 223015c chapter 1: wording, formatting, gendering 2026-04-20 10:27:06 +02:00
111 changed files with 2921 additions and 323 deletions
Expand all files Collapse all files

No files matched your search

.gitignore
+1
View File
@@ -2,6 +2,7 @@
build/ build/
*.pdf *.pdf
*.html *.html
!slides/*/assets/demos/**/*.html
.dev-index/ .dev-index/
# Dependencies # Dependencies
slides/223015c/01-geschichte-grundlagen-html.md
+39 -22
View File
@@ -877,7 +877,7 @@ Kostenlos freigegeben → darum existiert es
<!-- _header: '' --> <!-- _header: '' -->
<!-- _footer: '' --> <!-- _footer: '' -->
![bg fit](./assets/img_633d7b91366e0-1025x538-768x403.jpg) ![bg cover](./assets/img_633d7b91366e0-1025x538-768x403.jpg)
<!-- <!--
Unterseekabel-Karte: Über 400 Kabel verbinden die Kontinente. Unterseekabel-Karte: Über 400 Kabel verbinden die Kontinente.
@@ -934,7 +934,7 @@ Demonstration: Glühbirne AN/AUS = 1 Bit
# Das Bit # Das Bit
**Kleinste Informationseinheit** ### Kleinste *logische* Informationseinheit
- **0 oder 1** - **0 oder 1**
- AN oder AUS - AN oder AUS
@@ -953,7 +953,7 @@ Shannon: Begründer der Informationstheorie
# Das Byte # Das Byte
**8 Bits = 1 Byte** **8 Bit = 1 Byte**
``` ```
0 0 1 0 1 0 1 0 0 0 1 0 1 0 1 0
@@ -1050,7 +1050,7 @@ CSS (Cascading Style Sheets)-Farben nutzen Hex: #FF0000 = Rot
--- ---
# Wo begegnet euch Hex? # Wo begegnet Ihnen Hex-Code?
| Kontext | Beispiel | | Kontext | Beispiel |
|---------|----------| |---------|----------|
@@ -1060,7 +1060,6 @@ CSS (Cascading Style Sheets)-Farben nutzen Hex: #FF0000 = Rot
| Speicheradressen | `0xA04F20` | | Speicheradressen | `0xA04F20` |
| Unicode | `U+00E4` (ä) | | Unicode | `U+00E4` (ä) |
→ Hex ist überall in der Technik
<!-- <!--
Präfixe: Präfixe:
@@ -1087,9 +1086,9 @@ Fehlercodes: Windows zeigt diese bei Bluescreens
--- ---
# Bits vs. Bytes: Die Verwirrung # Bit vs. Byte: Die Verwirrung
**1 Byte = 8 Bit** → Bits ÷ 8 = Bytes **1 Byte = 8 Bit** → Bit ÷ 8 = Byte
| Einheit (Bit) | Einheit (Byte) | | Einheit (Bit) | Einheit (Byte) |
|---------------|----------------| |---------------|----------------|
@@ -1097,9 +1096,8 @@ Fehlercodes: Windows zeigt diese bei Bluescreens
| 1 Mbit = 1.000.000 Bit | 1 MB = 1.000.000 Byte = 8 Mbit | | 1 Mbit = 1.000.000 Bit | 1 MB = 1.000.000 Byte = 8 Mbit |
| 1 Gbit = 1 Mrd. Bit | 1 GB = 1 Mrd. Byte = 8 Gbit | | 1 Gbit = 1 Mrd. Bit | 1 GB = 1 Mrd. Byte = 8 Gbit |
**Praxis:** 100 Mbit/s Internet = **12,5 MB/s** Download 100 Mbit/s Bandbreite = **12,5 MB/s** Downloadrate
**Aber:** Computer rechnen binär (Basis 2)!
<!-- <!--
Bits = kleines b, Bytes = großes B Bits = kleines b, Bytes = großes B
@@ -1256,12 +1254,12 @@ Der `<head>`-Bereich enthält Informationen *über* das Dokument, nicht den sich
| `<meta viewport>` | Mobile Darstellung | `width=device-width, initial-scale=1` | | `<meta viewport>` | Mobile Darstellung | `width=device-width, initial-scale=1` |
| `<meta description>` | Suchergebnis-Snippet (max 160 Zeichen) | SEO-kritisch | | `<meta description>` | Suchergebnis-Snippet (max 160 Zeichen) | SEO-kritisch |
**Open Graph Protocol (Facebook, 2010):** **Open Graph Protocol (Ehemals Facebook, 2010):**
```html ```html
<meta property="og:title" content="Artikel-Titel"> <meta property="og:title" content="Artikel-Titel">
<meta property="og:image" content="https://example.com/preview.jpg"> <meta property="og:image" content="https://example.com/preview.jpg">
``` ```
Steuert die Vorschau beim Teilen auf Facebook, LinkedIn, WhatsApp, Slack. Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack ...
**SEO-Relevanz:** Google nutzt `<title>` und `<meta description>` für Ranking und Snippet-Anzeige. Fehlende Metadaten = schlechtere Auffindbarkeit. **SEO-Relevanz:** Google nutzt `<title>` und `<meta description>` für Ranking und Snippet-Anzeige. Fehlende Metadaten = schlechtere Auffindbarkeit.
@@ -1269,6 +1267,8 @@ Steuert die Vorschau beim Teilen auf Facebook, LinkedIn, WhatsApp, Slack.
# HTML-Tags und Attribute # HTML-Tags und Attribute
![bg right:35%](./assets/demos/tag-attribut.png)
```html ```html
<body> <body>
<p class="wichtig">Das ist ein Absatz.</p> <p class="wichtig">Das ist ein Absatz.</p>
@@ -1300,6 +1300,8 @@ Steuert die Vorschau beim Teilen auf Facebook, LinkedIn, WhatsApp, Slack.
# Vollständiges Grundgerüst # Vollständiges Grundgerüst
![bg right:35%](./assets/demos/grundgeruest.png)
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
@@ -1335,7 +1337,7 @@ Semantische Tags wichtig für Accessibility
h1 sollte nur einmal pro Seite vorkommen h1 sollte nur einmal pro Seite vorkommen
a = anchor (Anker) a = anchor (Anker)
--> -->
<!--
--- ---
# Hands-On: Werkzeuge einrichten # Hands-On: Werkzeuge einrichten
@@ -1351,6 +1353,7 @@ a = anchor (Anker)
**Option 3: Online-Editoren** **Option 3: Online-Editoren**
- [https://codepen.io/pen/](https://codepen.io/pen/) - [https://codepen.io/pen/](https://codepen.io/pen/)
-->
--- ---
# Natives HTML # Natives HTML
@@ -1376,6 +1379,8 @@ Accessibility ist eingebaut
# Beispiel: Details/Summary # Beispiel: Details/Summary
![bg right:35%](./assets/demos/details-closed.png)
```html ```html
<details> <details>
<summary>Klick mich!</summary> <summary>Klick mich!</summary>
@@ -1389,6 +1394,8 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details
# Beispiel: Details/Summary (geöffnet) # Beispiel: Details/Summary (geöffnet)
![bg right:35%](./assets/demos/details-open.png)
```html ```html
<details open> <details open>
<summary>Klick mich!</summary> <summary>Klick mich!</summary>
@@ -1403,6 +1410,8 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details#erstel
# Beispiel: Button # Beispiel: Button
![bg right:35%](./assets/demos/button.png)
```html ```html
<button>Add to favorites</button> <button>Add to favorites</button>
``` ```
@@ -1413,6 +1422,8 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/button
# Beispiel: Input/Eingabefeld # Beispiel: Input/Eingabefeld
![bg right:35%](./assets/demos/input.png)
```html ```html
<input <input
type="text" type="text"
@@ -1426,6 +1437,8 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input
# Beispiel: Dialog # Beispiel: Dialog
![bg right:35%](./assets/demos/dialog.png)
```html ```html
<dialog open> <dialog open>
<p>Greetings, one and all!</p> <p>Greetings, one and all!</p>
@@ -1469,7 +1482,7 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog
| **Augensteuerung** | Eye-Tracking | | **Augensteuerung** | Eye-Tracking |
| **Switch-Geräte** | Ein-/Aus-Schalter | | **Switch-Geräte** | Ein-/Aus-Schalter |
→ **Nicht alle nutzen Maus + Bildschirm!** → **Nicht alle Menschen nutzen Maus oder Touchscreens.**
<!-- <!--
ACCESSIBILITY (a11y): a + 11 Buchstaben + y ACCESSIBILITY (a11y): a + 11 Buchstaben + y
@@ -1496,7 +1509,7 @@ PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
# Web-Zugänglichkeit – Vertiefung # Web-Zugänglichkeit – Vertiefung
**a11y** = Accessibility (a + 11 Buchstaben + y). Die WHO schätzt, dass 15% der Weltbevölkerung eine Behinderung haben – das sind über 1 Milliarde potenzielle Nutzer. **a11y** = Accessibility (a + 11 Buchstaben + y). Die WHO schätzt, dass 15% der Weltbevölkerung eine Behinderung haben – das sind über 1 Milliarde potenzielle NutzerInnen.
**Arten von Einschränkungen:** **Arten von Einschränkungen:**
@@ -1581,7 +1594,7 @@ Der **European Accessibility Act (EAA)** trat am 28. Juni 2025 in Kraft und betr
**Curb-Cut-Effekt:** Barrierefreiheit hilft allen. Bordsteinabsenkungen für Rollstühle nutzen auch Kinderwagen, Rollkoffer, Fahrräder. Untertitel helfen Gehörlosen, aber auch in lauten Umgebungen oder beim Sprachlernen. **Curb-Cut-Effekt:** Barrierefreiheit hilft allen. Bordsteinabsenkungen für Rollstühle nutzen auch Kinderwagen, Rollkoffer, Fahrräder. Untertitel helfen Gehörlosen, aber auch in lauten Umgebungen oder beim Sprachlernen.
**Sanktionen:** Bis zu 100.000 € Bußgeld bei Verstößen. **Sanktionen:** Bis zu 100.000 € Bußgeld bei Verstößen
--- ---
@@ -1614,11 +1627,9 @@ Gesetzlich meist Level AA gefordert
<img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024"> <img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024">
``` ```
**Kontrast:** Mindestens 4.5:1 für Text * **Kontrast:** Mindestens 4,5:1 für Text
* **Untertitel:** Videos brauchen Captions
**Untertitel:** Videos brauchen Captions * **Responsive:** Inhalte bei 200% Zoom nutzbar
**Responsive:** Inhalte bei 200% Zoom nutzbar
<!-- <!--
Leeres alt="" für dekorative Bilder Leeres alt="" für dekorative Bilder
@@ -1630,6 +1641,8 @@ Captions ≠ Untertitel (Captions = auch Geräusche beschrieben)
# Operable: Bedienbar # Operable: Bedienbar
![bg right:35%](./assets/demos/a11y-focus.png)
**Tastaturzugänglich:** **Tastaturzugänglich:**
```css ```css
/* Fokus-Indikator NIE entfernen! */ /* Fokus-Indikator NIE entfernen! */
@@ -1658,6 +1671,8 @@ Skip-Links: "Zum Hauptinhalt springen"
# Understandable: Verständlich # Understandable: Verständlich
![bg right:35%](./assets/demos/a11y-error.png)
**Sprache angeben:** **Sprache angeben:**
```html ```html
<html lang="de"> <html lang="de">
@@ -1683,6 +1698,8 @@ Fehlermeldungen: konkret, hilfreich, am Feld
# Robust: Technisch solide # Robust: Technisch solide
![bg right:35%](./assets/demos/a11y-semantic.png)
**Semantisches HTML:** **Semantisches HTML:**
```html ```html
<!-- Schlecht --> <!-- Schlecht -->
@@ -1744,9 +1761,9 @@ Echte NutzerInnen einbeziehen = Gold-Standard
# Barrierefreiheit testen – Vertiefung # Barrierefreiheit testen – Vertiefung
Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte Nutzer mit Behinderungen. Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte NutzerInnen mit Behinderungen.
**Tastatur-Test (5 Minuten, jeder kann's):** **Tastatur-Test (5 Minuten):**
1. Maus weglegen, nur Tab + Enter + Pfeiltasten nutzen 1. Maus weglegen, nur Tab + Enter + Pfeiltasten nutzen
2. Fokus-Indikator immer sichtbar? (kein `outline: none;`!) 2. Fokus-Indikator immer sichtbar? (kein `outline: none;`!)
3. Logische Reihenfolge? (nicht kreuz und quer) 3. Logische Reihenfolge? (nicht kreuz und quer)
slides/223015c/02-netzwerke-protokolle-css.md
+108 -291
View File
@@ -73,13 +73,13 @@ section.glossar {
} }
section.erklaerung { section.erklaerung {
font-size: 1.1rem; font-size: 1.1rem;
background: repeating-linear-gradient( /**background: repeating-linear-gradient(
135deg, 135deg,
#fce4ec, #fce4ec,
#fce4ec 40px, #fce4ec 40px,
#fff 40px, #fff 40px,
#fff 80px #fff 80px
) !important; ) !important;**/
} }
@media print { @media print {
section.erklaerung { section.erklaerung {
@@ -347,25 +347,18 @@ SPEAKER NOTES:
# Das Problem: Komplexität # Das Problem: Komplexität
Zwischen dir und einer Webseite liegen: ![bg right:40% fit](./assets/demos/network-chain.png)
``` Zwischen Ihnen und einer Webseite liegen viele Stationen.
Dein Browser
↓
Deine Netzwerkkarte (WLAN oder Ethernet)
↓
Router im Flur / zu Hause
↓
Netzwerk der HdM / deines Providers
↓
Das Internet (dutzende Router)
↓
Netzwerk des Ziel-Servers
↓
Der Webserver
```
Jede Komponente "spricht" anders. Jede Komponente "spricht" anders:
- Browser → **HTTP**
- Netzwerkkarte → **Bits / Signale**
- Router → **IP-Pakete**
- Provider → **Routing**
Wie zusammenbringen?
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -406,10 +399,6 @@ SPEAKER NOTES:
--- ---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
# Das TCP/IP-Modell # Das TCP/IP-Modell
| Schicht | Name | Aufgabe | Protokolle | | Schicht | Name | Aufgabe | Protokolle |
@@ -461,19 +450,10 @@ Das TCP/IP-Modell entstand praktisch aus dem ARPANET (1970er), im Gegensatz zum
# Schichten verpacken Daten # Schichten verpacken Daten
``` ![bg right:52% fit](./assets/demos/encap-layers.png)
Anwendung: [ HTTP-Request: "GET /index.html" ]
↓ verpackt in
Transport: [ TCP-Header | HTTP-Request ]
↓ verpackt in
Internet: [ IP-Header | TCP-Header | HTTP-Request ]
↓ verpackt in
Netzzugang: [ Eth-Header | IP-Header | TCP | HTTP | Eth-Trailer ]
↓
Physik: 01001000 01010100 01010100...
```
**Encapsulation:** Jede Schicht packt ein. **Encapsulation:** Jede Schicht packt ein.
**Decapsulation:** Beim Empfang wird ausgepackt. **Decapsulation:** Beim Empfang wird ausgepackt.
<!-- <!--
@@ -489,10 +469,6 @@ SPEAKER NOTES:
--- ---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
# Dateneinheiten pro Schicht # Dateneinheiten pro Schicht
| Schicht | Name | Dateneinheit | Was kommt hinzu? | | Schicht | Name | Dateneinheit | Was kommt hinzu? |
@@ -571,24 +547,7 @@ SPEAKER NOTES:
# Exkurs: OSI vs. TCP/IP # Exkurs: OSI vs. TCP/IP
``` ![h:440 center](./assets/demos/osi-tcpip-diagram.png)
OSI (7 Schichten) TCP/IP (4 Schichten)
┌─────────────────────┐ ┌─────────────────────┐
│ 7. Anwendung │ │ │
├─────────────────────┤ │ Anwendung │
│ 6. Darstellung │ │ │
├─────────────────────┤ │ │
│ 5. Sitzung │ │ │
├─────────────────────┤ ├─────────────────────┤
│ 4. Transport │ │ Transport │
├─────────────────────┤ ├─────────────────────┤
│ 3. Vermittlung │ │ Internet │
├─────────────────────┤ ├─────────────────────┤
│ 2. Sicherung │ │ │
├─────────────────────┤ │ Netzzugang │
│ 1. Bitübertragung │ │ │
└─────────────────────┘ └─────────────────────┘
```
OSI = Theorie. TCP/IP = Realität. OSI = Theorie. TCP/IP = Realität.
@@ -668,10 +627,7 @@ SPEAKER NOTES:
# Port: Das richtige Programm # Port: Das richtige Programm
``` ![bg right:38% fit](./assets/demos/port-highlight.png)
212.132.79.37:443
└─── Port 443 = HTTPS
```
- Identifiziert ein **Programm** auf einem Rechner - Identifiziert ein **Programm** auf einem Rechner
- Ein Rechner, viele Dienste - Ein Rechner, viele Dienste
@@ -699,10 +655,6 @@ SPEAKER NOTES:
--- ---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
# IP vs. MAC vs. Port # IP vs. MAC vs. Port
| | IP-Adresse | MAC-Adresse | Port | | | IP-Adresse | MAC-Adresse | Port |
@@ -755,7 +707,7 @@ Drei Adressebenen lösen drei verschiedene Probleme:
<!-- _class: lead --> <!-- _class: lead -->
# Die Reise eines Klicks # Die Reise eines Klicks
## Was passiert, wenn du `www.hdm-stuttgart.de` aufrufst? ## Was passiert, wenn Sie `www.hdm-stuttgart.de` aufrufen?
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -769,7 +721,7 @@ SPEAKER NOTES:
# Das Szenario # Das Szenario
Du bist im WLAN der HdM und rufst auf: Sie sind im WLAN der HdM und rufen auf:
``` ```
https://www.hdm-stuttgart.de https://www.hdm-stuttgart.de
@@ -790,23 +742,13 @@ SPEAKER NOTES:
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _paginate: false -->
# Die Zeitlinie # Die Zeitlinie
``` ![h:560 center](./assets/demos/timeline.png)
[0 ms] DNS: "Welche IP hat www.hdm-stuttgart.de?"
↓
[~20 ms] DNS-Antwort: "212.132.79.37"
↓
[~25 ms] TCP-Handshake beginnt
↓
[~50 ms] TCP-Verbindung steht
↓
[~55 ms] HTTP-Request: "GET /index.html"
↓
[~150 ms] HTTP-Response: HTML kommt zurück
↓
[~200 ms] Browser rendert die Seite
```
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -841,7 +783,7 @@ SPEAKER NOTES:
www.hdm-stuttgart.de → 212.132.79.37 www.hdm-stuttgart.de → 212.132.79.37
``` ```
Dein Laptop fragt sich durch: Ihr Laptop fragt sich durch:
1. **Browser-Cache:** "War ich da kürzlich?" → Nein 1. **Browser-Cache:** "War ich da kürzlich?" → Nein
2. **OS-Cache:** "Kennt das Betriebssystem die IP?" → Nein 2. **OS-Cache:** "Kennt das Betriebssystem die IP?" → Nein
@@ -860,19 +802,15 @@ SPEAKER NOTES:
# Die DNS-Hierarchie # Die DNS-Hierarchie
``` ![bg right:45% fit](./assets/demos/dns-tree.png)
. (Root)
/|\
/ | \
.de .com .org ...
/
hdm-stuttgart
|
www
```
**Dezentral:** Niemand kennt alles. **Dezentral:** Niemand kennt alles.
Jede Ebene kennt nur die nächste.
Jede Ebene kennt nur die nächste:
- Root → .de, .com, .org
- .de → alle .de-Domains
- hdm-stuttgart.de → www, mail, …
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -885,22 +823,13 @@ SPEAKER NOTES:
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _paginate: false -->
# Der DNS-Lookup # Der DNS-Lookup
``` ![w:1100 center](./assets/demos/dns-lookup.png)
Dein Laptop → Resolver: "Wo ist www.hdm-stuttgart.de?"
Resolver → Root (.): "Wer verwaltet .de?"
← "Frag 194.0.0.53"
Resolver → .de-Server: "Wer verwaltet hdm-stuttgart.de?"
← "Frag den Nameserver der HdM"
Resolver → HdM-NS: "Welche IP hat www?"
← "212.132.79.37"
Resolver → Dein Laptop: "Die IP ist 212.132.79.37"
```
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -1000,26 +929,13 @@ SPEAKER NOTES:
--- ---
<!-- _class: klausur -->
<!-- _header: '' --> <!-- _header: '' -->
<!-- _footer: '' --> <!-- _footer: '' -->
<!-- _paginate: false -->
# Der 3-Way-Handshake # Der 3-Way-Handshake
``` ![w:1050 center](./assets/demos/tcp-handshake.png)
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 **SYN** = Synchronize · **ACK** = Acknowledge
@@ -1068,13 +984,7 @@ Der Handshake synchronisiert **Sequenznummern** – essenziell für TCPs Zuverl
**Status:** Die TCP-Verbindung steht. **Status:** Die TCP-Verbindung steht.
``` ![bg right:42% fit](./assets/demos/client-server-ports.png)
Client: 141.62.xxx.xxx:52431
└─── Zufälliger Port für diese Verbindung
Server: 212.132.79.37:443
└─── HTTPS-Port
```
**Jetzt erst** kann HTTP gesprochen werden. **Jetzt erst** kann HTTP gesprochen werden.
@@ -1101,7 +1011,7 @@ SPEAKER NOTES:
--- ---
# Was dein Browser sendet # Was Ihr Browser sendet
```http ```http
GET / HTTP/1.1 GET / HTTP/1.1
@@ -1120,7 +1030,7 @@ Connection: keep-alive
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
- HTTP-Request: lesbar, menschlich verständlich - HTTP-Request: lesbar, menschlich verständlich
- GET = "hol mir was" (POST = "hier Daten für dich") - GET = "hol mir was" (POST = "hier Daten für Sie")
- "/" = Wurzel = Startseite - "/" = Wurzel = Startseite
- HTTP/1.1 = Protokollversion - HTTP/1.1 = Protokollversion
- Header: Kontext (Host, Browser, Sprache) - Header: Kontext (Host, Browser, Sprache)
@@ -1146,17 +1056,7 @@ SPEAKER NOTES:
HTTP-Request wird zum **Segment**: HTTP-Request wird zum **Segment**:
``` ![w:900 center](./assets/demos/tcp-segment.png)
┌─────────────────────────────────────────────────┐
│ TCP-Header │
│ ┌─────────────┬─────────────┬─────────────────┐ │
│ │ Source Port │ Dest Port │ Sequence Number │ │
│ │ 52431 │ 443 │ 1001 │ │
│ └─────────────┴─────────────┴─────────────────┘ │
├─────────────────────────────────────────────────┤
│ Payload: "GET / HTTP/1.1..." │
└─────────────────────────────────────────────────┘
```
**Neu:** Ports + Sequenznummer **Neu:** Ports + Sequenznummer
@@ -1177,17 +1077,7 @@ SPEAKER NOTES:
Segment wird zum **Paket**: Segment wird zum **Paket**:
``` ![w:900 center](./assets/demos/ip-packet.png)
┌─────────────────────────────────────────────────┐
│ IP-Header │
│ ┌─────────────────┬─────────────────┐ │
│ │ Source IP │ Destination IP │ │
│ │ 141.62.xxx.xxx │ 212.132.79.37 │ │
│ └─────────────────┴─────────────────┘ │
├─────────────────────────────────────────────────┤
│ TCP-Segment (unverändert) │
└─────────────────────────────────────────────────┘
```
**Neu:** IP-Adressen **Neu:** IP-Adressen
@@ -1207,19 +1097,7 @@ SPEAKER NOTES:
Paket wird zum **Frame**: Paket wird zum **Frame**:
``` ![w:900 center](./assets/demos/ethernet-frame.png)
┌─────────────────────────────────────────────────┐
│ Ethernet-Header │
│ ┌─────────────────┬─────────────────┐ │
│ │ Source MAC │ Destination MAC │ │
│ │ aa:bb:cc:dd:ee │ 11:22:33:44:55 │ │
│ └─────────────────┴─────────────────┘ │
├─────────────────────────────────────────────────┤
│ IP-Paket (unverändert) │
├─────────────────────────────────────────────────┤
│ FCS (Frame Check Sequence / Prüfsumme) │
└─────────────────────────────────────────────────┘
```
**Wichtig:** Destination MAC = **Router**, nicht Server! **Wichtig:** Destination MAC = **Router**, nicht Server!
@@ -1236,17 +1114,11 @@ SPEAKER NOTES:
--- ---
# Woher kennt dein Laptop die Router-MAC? # Woher kennt Ihr Laptop die Router-MAC?
**ARP** – Address Resolution Protocol **ARP** – Address Resolution Protocol
``` ![w:900 center](./assets/demos/arp-lookup.png)
Laptop (Broadcast):
"Wer hat die IP 192.168.1.1? Sag mir deine MAC!"
Router:
"Das bin ich! Meine MAC ist 11:22:33:44:55:66"
```
Das passiert automatisch. Die Info wird gecached. Das passiert automatisch. Die Info wird gecached.
@@ -1303,11 +1175,9 @@ SPEAKER NOTES:
--- ---
# Der erste Hop: Dein Router # Der erste Hop: Ihr Router
``` **Laptop** → [Frame] → **Router**
Laptop → [Frame] → Router
```
Der Router empfängt: Der Router empfängt:
@@ -1330,19 +1200,7 @@ SPEAKER NOTES:
# Der Router verpackt NEU # Der Router verpackt NEU
``` ![w:900 center](./assets/demos/ethernet-rehop.png)
┌─────────────────────────────────────────────────┐
│ Ethernet-Header (NEU!) │
│ ┌─────────────────┬─────────────────┐ │
│ │ Source MAC │ Destination MAC │ │
│ │ Router-MAC │ Nächster-Router │ │
│ └─────────────────┴─────────────────┘ │
├─────────────────────────────────────────────────┤
│ IP-Paket (UNVERÄNDERT) │
│ Source: 141.62.xxx.xxx │
│ Dest: 212.132.79.37 │
└─────────────────────────────────────────────────┘
```
**IP bleibt gleich. MAC ändert sich.** **IP bleibt gleich. MAC ändert sich.**
@@ -1361,19 +1219,15 @@ SPEAKER NOTES:
# Mehrere Hops # Mehrere Hops
``` ![bg right:35% fit](./assets/demos/hop-chain.png)
Dein Laptop
↓ [Frame an Router 1]
Router HdM-Netz
↓ [Frame an Router 2]
Router BelWü
↓ [Frame an Router 3]
...
↓ [Frame an Server]
Webserver der HdM
```
Bei jedem Hop: Auspacken bis Layer 3, Routing, neu verpacken. Bei jedem Hop:
1. Auspacken bis Layer 3 (IP)
2. Routing-Entscheidung
3. Neu verpacken mit nächster MAC
IP bleibt gleich · MAC ändert sich jedes Mal.
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -1401,19 +1255,11 @@ SPEAKER NOTES:
# Decapsulation am Server # Decapsulation am Server
``` ![bg right:42% fit](./assets/demos/server-decap.png)
Bits empfangen (Layer 1)
↓
Frame prüfen: MAC okay? FCS okay? → Auspacken (Layer 2)
↓
IP lesen: Ziel-IP = meine IP? Ja! → Auspacken (Layer 3)
↓
TCP lesen: Port 443, Seq-Nr passt → Auspacken (Layer 4)
↓
HTTP lesen: "GET / HTTP/1.1" (Layer 7)
```
Der Webserver versteht: "Jemand will die Startseite." Jede Schicht prüft "ist das für mich?" und packt dann die nächste aus.
Am Ende versteht der Webserver: "Jemand will die Startseite."
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -1442,7 +1288,7 @@ Content-Length: 45231
... ...
``` ```
~45 KB HTML müssen jetzt zu dir. ~45 KB HTML müssen jetzt zu Ihnen.
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -1458,17 +1304,7 @@ SPEAKER NOTES:
Der Server macht **dasselbe** – nur in die andere Richtung: Der Server macht **dasselbe** – nur in die andere Richtung:
``` ![bg right:40% fit](./assets/demos/encap-stack.png)
HTTP-Response: "HTTP/1.1 200 OK..."
↓
TCP: Dest-Port: 52431 (dein Browser!)
↓
IP: Dest-IP: 141.62.xxx.xxx (dein Laptop!)
↓
Ethernet: Dest-MAC: Router des Server-Netzes
↓
Bits
```
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -1483,17 +1319,13 @@ SPEAKER NOTES:
# Die Antwort reist zurück # Die Antwort reist zurück
``` ![bg right:38% fit](./assets/demos/response-hops.png)
Server
↓
Router → Router → Router → ...
↓
Router HdM
↓
Dein Laptop
```
Gleiches Spiel: Hop für Hop, IP bleibt gleich, MAC ändert sich. Gleiches Spiel wie der Hinweg:
- Hop für Hop durchs Internet
- **IP bleibt gleich** (Start/Ziel)
- **MAC ändert sich** bei jedem Router
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -1504,21 +1336,13 @@ SPEAKER NOTES:
--- ---
# Decapsulation bei dir # Decapsulation bei Ihnen
``` ![bg right:42% fit](./assets/demos/decap-stack.png)
Bits empfangen
↓ Rückweg = Encapsulation umgekehrt.
Frame: MAC = meine MAC? → Auspacken
↓ Jede Schicht prüft "ist das für mich?" und packt dann die nächste aus.
IP: Ziel-IP = meine IP? → Auspacken
↓
TCP: Port 52431 = mein Browser → Auspacken
↓
HTTP: "HTTP/1.1 200 OK..."
↓
Browser rendert die Seite
```
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -1543,10 +1367,6 @@ SPEAKER NOTES:
--- ---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
# TCP vs. UDP # TCP vs. UDP
| | TCP | UDP | | | TCP | UDP |
@@ -1648,10 +1468,6 @@ SPEAKER NOTES:
--- ---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
# HTTP-Methoden # HTTP-Methoden
| Methode | Bedeutung | Beispiel | | Methode | Bedeutung | Beispiel |
@@ -1713,10 +1529,6 @@ POST /users → Neuen Benutzer erstellen
--- ---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
# HTTP Status-Codes # HTTP Status-Codes
```http ```http
@@ -1773,10 +1585,6 @@ Die erste Ziffer kategorisiert die Antwort:
--- ---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
# Zusammenfassung Teil 1 # Zusammenfassung Teil 1
**Der Ablauf:** **Der Ablauf:**
@@ -1889,6 +1697,8 @@ HTML definiert die Struktur – was ist auf der Seite. CSS definiert das Aussehe
# Was ist CSS? # Was ist CSS?
![bg right:35%](./assets/demos/css-anatomie.png)
**C**ascading **S**tyle **S**heets **C**ascading **S**tyle **S**heets
```css ```css
@@ -1984,6 +1794,8 @@ Semikolon nach jedem Paar. Doppelpunkt zwischen Property und Value.
# Selektoren: Element # Selektoren: Element
![bg right:35%](./assets/demos/css-selector-element.png)
```css ```css
/* Alle <p>-Elemente */ /* Alle <p>-Elemente */
p { p {
@@ -2012,6 +1824,8 @@ Komma bedeutet "oder" – h1 oder h2 oder h3.
# Selektoren: Klasse # Selektoren: Klasse
![bg right:35%](./assets/demos/css-selector-class.png)
```html ```html
<p class="wichtig">Dieser Text ist wichtig.</p> <p class="wichtig">Dieser Text ist wichtig.</p>
<p>Dieser nicht.</p> <p>Dieser nicht.</p>
@@ -2040,6 +1854,8 @@ Eine Klasse kann auf beliebig viele Elemente angewendet werden. Ein Element kann
# Selektoren: ID # Selektoren: ID
![bg right:35%](./assets/demos/css-selector-id.png)
```html ```html
<nav id="hauptnavigation">...</nav> <nav id="hauptnavigation">...</nav>
``` ```
@@ -2069,6 +1885,8 @@ In der Praxis: Klassen sind meist besser. IDs haben hohe Spezifität und sind un
# Selektoren: Kombinationen # Selektoren: Kombinationen
![bg right:35%](./assets/demos/css-combinators.png)
```css ```css
/* Nachfahre (beliebig tief verschachtelt) */ /* Nachfahre (beliebig tief verschachtelt) */
article p { line-height: 1.6; } article p { line-height: 1.6; }
@@ -2099,12 +1917,10 @@ Element.Klasse: Das Element muss beides sein. "p.wichtig" heißt: nur p-Elemente
--- ---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
# Spezifität: Welche Regel gewinnt? # Spezifität: Welche Regel gewinnt?
![bg right:35%](./assets/demos/css-specificity.png)
| Selektor | Spezifität | | Selektor | Spezifität |
|----------|------------| |----------|------------|
| Element (`p`) | 0,0,0,1 | | Element (`p`) | 0,0,0,1 |
@@ -2163,22 +1979,18 @@ Spezifität bestimmt, welche CSS-Regel gewinnt, wenn mehrere auf dasselbe Elemen
# Box-Modell # Box-Modell
``` ![bg right:42% fit](./assets/demos/box-model-diagram.png)
┌─────────────────────────────────────┐
│ margin │
│ ┌─────────────────────────────┐ │
│ │ border │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ padding │ │ │
│ │ │ ┌─────────────┐ │ │ │
│ │ │ │ content │ │ │ │
│ │ │ └─────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘
```
Jedes Element ist eine Box. Jedes HTML-Element ist eine rechteckige **Box**.
**Schichten innen → außen:**
- **content** – Inhalt (Text, Bild)
- **padding** – Innenabstand
- **border** – Rahmen
- **margin** – Außenabstand
<small>Gesamt-Breite = `width + padding + border + margin`. Tipp: `box-sizing: border-box` rechnet padding + border mit ein.</small>
<!-- <!--
SPEAKER NOTES: SPEAKER NOTES:
@@ -2200,6 +2012,8 @@ Margin: Außenabstand. Zwischen diesem Element und anderen.
# Box-Modell: CSS # Box-Modell: CSS
![bg right:35%](./assets/demos/css-box-model.png)
```css ```css
.box { .box {
width: 200px; width: 200px;
@@ -2232,6 +2046,8 @@ Best Practice: Setzt das global für alle Elemente.
# Farben # Farben
![bg right:35%](./assets/demos/css-colors.png)
```css ```css
/* Keyword */ /* Keyword */
color: red; color: red;
@@ -2300,6 +2116,8 @@ vw und vh sind Prozent des Viewports. 100vw ist die volle Bildschirmbreite.
# Pseudo-Klassen # Pseudo-Klassen
![bg right:35%](./assets/demos/css-pseudo-classes.png)
```css ```css
/* Hover – Maus drüber */ /* Hover – Maus drüber */
a:hover { color: red; } a:hover { color: red; }
@@ -2335,6 +2153,8 @@ Wichtig für interaktive Elemente und Zebra-Streifen in Tabellen.
# Pseudo-Elemente # Pseudo-Elemente
![bg right:35%](./assets/demos/css-pseudo-elements.png)
```css ```css
/* Vor dem Inhalt einfügen */ /* Vor dem Inhalt einfügen */
.required::before { .required::before {
@@ -2365,19 +2185,17 @@ Doppelpunkt zur Unterscheidung von Pseudo-Klassen – aber einfacher Doppelpunkt
--- ---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
# Responsive Design # Responsive Design
![bg right:35%](./assets/demos/css-responsive.png)
```css ```css
/* Mobile First: Basis-Styles */ /* Mobile First: Basis-Styles */
.container { .container {
padding: 1rem; padding: 1rem;
background: white; background: white;
} }
/* Ab 768px (Tablet): Anpassungen */ /* Ab 768px (Tablet): Anpassungen */
@media (min-width: 768px) { @media (min-width: 768px) {
.container { .container {
@@ -2385,7 +2203,6 @@ Doppelpunkt zur Unterscheidung von Pseudo-Klassen – aber einfacher Doppelpunkt
background: red; background: red;
} }
} }
/* Ab 1024px (Desktop): Weitere Anpassungen */ /* Ab 1024px (Desktop): Weitere Anpassungen */
@media (min-width: 1024px) { @media (min-width: 1024px) {
.container { .container {
slides/223015c/03-interaktivitaet-javascript.md
+2 -10
View File
@@ -342,7 +342,7 @@ true || false // true (ODER)
**In der Browser-Konsole:** **In der Browser-Konsole:**
1. Erstelle Variablen für dich: 1. Erstellen Sie Variablen für sich:
```javascript ```javascript
const name = "Your Name"; const name = "Your Name";
let age = 20; let age = 20;
@@ -491,15 +491,7 @@ Funktionale Programmierung, Original-Array bleibt unverändert
- JavaScript kann diesen Baum **lesen und ändern** - JavaScript kann diesen Baum **lesen und ändern**
- Jedes HTML-Element = ein "Node" - Jedes HTML-Element = ein "Node"
``` ![bg right:45% fit](./assets/demos/dom-tree.png)
document
└── html
├── head
│ └── title
└── body
├── h1
└── p
```
<!-- <!--
DOM = Programmierschnittstelle für HTML DOM = Programmierschnittstelle für HTML
slides/223015c/assets/demos/_frame-template.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: __TITLE__</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">__URL__</span>
</div>
<iframe src="__SRC__"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/a11y-error-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: a11y-error</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/email-form.html</span>
</div>
<iframe src="./a11y-error.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/a11y-error.html
+31
View File
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Fehlermeldung</title>
<style>
body { font-family: system-ui, sans-serif; padding: 1.2rem; }
label { display: block; margin-bottom: 4px; font-weight: 600; }
input {
font: inherit;
padding: 6px 10px;
width: 100%;
box-sizing: border-box;
border: 2px solid #d63384;
border-radius: 4px;
}
#email-error {
color: #d63384;
font-size: 0.9em;
margin-top: 6px;
}
</style>
</head>
<body>
<label for="email">E-Mail-Adresse</label>
<input id="email" type="email" aria-describedby="email-error" value="michael@">
<p id="email-error" role="alert">
Bitte geben Sie eine gültige E-Mail-Adresse ein.
</p>
</body>
</html>
slides/223015c/assets/demos/a11y-error.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

slides/223015c/assets/demos/a11y-focus-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: a11y-focus</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/focus.html</span>
</div>
<iframe src="./a11y-focus.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/a11y-focus.html
+24
View File
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Fokus-Indikator</title>
<style>
body { font-family: system-ui, sans-serif; padding: 1.2rem; }
:focus, .is-focused {
outline: 2px solid blue;
outline-offset: 2px;
}
button:focus-visible, button.is-focused {
box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
}
button { font: inherit; padding: 6px 14px; margin: 6px 0; display: block; }
</style>
</head>
<body>
<p>Tab-Taste drücken:</p>
<button class="is-focused">Erster Button</button>
<button>Zweiter Button</button>
<button>Dritter Button</button>
</body>
</html>
slides/223015c/assets/demos/a11y-focus.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

slides/223015c/assets/demos/a11y-semantic-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: a11y-semantic</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/klick.html</span>
</div>
<iframe src="./a11y-semantic.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/a11y-semantic.html
+31
View File
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>div vs button</title>
<style>
body { font-family: system-ui, sans-serif; padding: 1.2rem; }
h3 { margin: 0.8rem 0 0.4rem; font-size: 1rem; }
.bad { color: #b91c1c; }
.good { color: #15803d; }
.button {
display: inline-block;
background: #e5e7eb;
border: 1px solid #9ca3af;
padding: 6px 14px;
cursor: pointer;
border-radius: 4px;
}
button { font: inherit; padding: 6px 14px; }
</style>
</head>
<body>
<h3 class="bad">Schlecht (div)</h3>
<div class="button" onclick="alert('!')">Klick mich</div>
<p><small>❌ Tab überspringt, kein Enter, kein Screenreader</small></p>
<h3 class="good">Gut (button)</h3>
<button type="button">Klick mich</button>
<p><small>✅ Tastatur + Screenreader eingebaut</small></p>
</body>
</html>
slides/223015c/assets/demos/a11y-semantic.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

slides/223015c/assets/demos/arp-lookup.html
+65
View File
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>ARP</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.actor {
background: #1a1a2e;
color: #fff;
padding: 10px 16px;
border-radius: 6px;
font-weight: 700;
min-width: 160px;
text-align: center;
font-size: 0.9rem;
}
.laptop { background: #1e40af; }
.router { background: #c2410c; }
.arrow-right, .arrow-left {
width: 0; height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.arrow-right { border-left: 14px solid #d63384; }
.arrow-left { border-right: 14px solid #15803d; }
.bubble {
padding: 10px 14px;
border-radius: 8px;
font-size: 0.95rem;
max-width: 460px;
}
.ask { background: #fce7f3; border: 2px solid #d63384; color: #7c2d12; }
.reply { background: #dcfce7; border: 2px solid #15803d; color: #14532d; }
.meta {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.7;
margin-bottom: 3px;
}
</style>
</head>
<body>
<div class="row">
<div class="actor laptop">Laptop</div>
<div class="arrow-right"></div>
<div class="bubble ask">
<div class="meta">Broadcast</div>
"Wer hat die IP 192.168.1.1? Sag mir deine MAC!"
</div>
</div>
<div class="row">
<div class="bubble reply">
<div class="meta">Antwort</div>
"Das bin ich! Meine MAC ist 11:22:33:44:55:66"
</div>
<div class="arrow-left"></div>
<div class="actor router">Router</div>
</div>
</body>
</html>
slides/223015c/assets/demos/arp-lookup.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

slides/223015c/assets/demos/box-model-diagram.html
+53
View File
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Box-Modell Diagramm</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 40px; display: inline-block; box-sizing: border-box; }
.layer {
padding-top: 38px;
padding-bottom: 30px;
padding-left: 30px;
padding-right: 30px;
position: relative;
border-radius: 4px;
}
.layer::before {
position: absolute;
top: 8px; left: 14px;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.margin { background: #fde68a; }
.margin::before { content: "margin"; color: #92400e; }
.border { background: #fca5a5; }
.border::before { content: "border"; color: #991b1b; }
.padding { background: #86efac; }
.padding::before { content: "padding"; color: #166534; }
.content {
background: #93c5fd;
width: 260px;
height: 110px;
display: flex;
align-items: center;
justify-content: center;
color: #1e3a8a;
font-weight: 700;
font-size: 1.2rem;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="layer margin">
<div class="layer border">
<div class="layer padding">
<div class="content">content</div>
</div>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/box-model-diagram.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

slides/223015c/assets/demos/button-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: button</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/button.html</span>
</div>
<iframe src="./button.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/button.html
+10
View File
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Button</title>
</head>
<body>
<button>Add to favorites</button>
</body>
</html>
slides/223015c/assets/demos/button.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

slides/223015c/assets/demos/client-server-ports.html
+58
View File
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Client/Server Ports</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.endpoint {
border: 2px solid #4a4a6a;
border-radius: 6px;
padding: 18px 24px;
margin-bottom: 24px;
min-width: 380px;
background: #f3f4f6;
}
.endpoint.client { background: #dbeafe; border-color: #1e40af; }
.endpoint.server { background: #fed7aa; border-color: #c2410c; }
.role {
font-weight: 700;
font-size: 1rem;
margin-bottom: 6px;
}
.client .role { color: #1e3a8a; }
.server .role { color: #7c2d12; }
.addr {
font-family: ui-monospace, monospace;
font-size: 1.4rem;
color: #0f172a;
}
.port {
background: #fde68a;
color: #7c2d12;
padding: 1px 8px;
border-radius: 4px;
font-weight: 700;
}
.label {
margin-top: 6px;
font-size: 0.85rem;
color: #4a4a6a;
font-style: italic;
}
</style>
</head>
<body>
<div class="endpoint client">
<div class="role">Client</div>
<div class="addr">141.62.xxx.xxx:<span class="port">52431</span></div>
<div class="label">↳ zufälliger Port vom OS</div>
</div>
<div class="endpoint server">
<div class="role">Server</div>
<div class="addr">212.132.79.37:<span class="port">443</span></div>
<div class="label">↳ HTTPS-Standardport</div>
</div>
</body>
</html>
slides/223015c/assets/demos/client-server-ports.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

slides/223015c/assets/demos/css-anatomie-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-anatomie</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/anatomie.html</span>
</div>
<iframe src="./css-anatomie.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/css-anatomie.html
+15
View File
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>CSS Anatomie</title>
<style>
body { padding: 1.2rem; font-family: system-ui, sans-serif; }
p { color: blue; font-size: 16px; }
</style>
</head>
<body>
<p>Dieser Absatz ist blau und 16 Pixel groß.</p>
<p>Alle p-Elemente werden gleich gestylt.</p>
</body>
</html>
slides/223015c/assets/demos/css-anatomie.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

slides/223015c/assets/demos/css-box-model-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-box-model</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/box-model.html</span>
</div>
<iframe src="./css-box-model.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/css-box-model.html
+58
View File
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Box-Modell</title>
<style>
body { padding: 1.2rem; font-family: system-ui, sans-serif; background: #fff; }
.box { display: inline-block; }
.layer {
padding-top: 22px;
padding-bottom: 18px;
padding-left: 18px;
padding-right: 18px;
position: relative;
}
.layer::before {
position: absolute;
top: 4px; left: 8px;
font-size: 0.75em;
font-weight: 600;
}
.margin { background: #fde68a; }
.margin::before { content: "margin"; color: #92400e; }
.border { background: #fca5a5; }
.border::before { content: "border"; color: #991b1b; }
.padding { background: #86efac; }
.padding::before { content: "padding"; color: #166534; }
.content {
background: #93c5fd;
width: 140px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
color: #1e3a8a;
font-weight: 600;
}
pre { background: #f3f4f6; padding: 10px; border-radius: 4px; font-size: 0.85em; margin-top: 1rem; font-family: ui-monospace, monospace; }
</style>
</head>
<body>
<div class="box">
<div class="layer margin">
<div class="layer border">
<div class="layer padding">
<div class="content">content</div>
</div>
</div>
</div>
</div>
<pre>.box {
width: 140px;
padding: 18px;
border: 18px solid;
margin: 18px;
}</pre>
</body>
</html>
slides/223015c/assets/demos/css-box-model.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

slides/223015c/assets/demos/css-colors-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-colors</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/colors.html</span>
</div>
<iframe src="./css-colors.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/css-colors.html
+21
View File
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Farben</title>
<style>
body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
.swatch { display: flex; align-items: center; margin-bottom: 8px; }
.chip { width: 40px; height: 40px; border-radius: 4px; margin-right: 12px; border: 1px solid #e5e7eb; }
code { background: #f3f4f6; padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-size: 0.85em; }
</style>
</head>
<body>
<div class="swatch"><div class="chip" style="background: red;"></div><code>color: red;</code></div>
<div class="swatch"><div class="chip" style="background: rebeccapurple;"></div><code>color: rebeccapurple;</code></div>
<div class="swatch"><div class="chip" style="background: #FF0000;"></div><code>#FF0000</code></div>
<div class="swatch"><div class="chip" style="background: rgb(255, 0, 0);"></div><code>rgb(255, 0, 0)</code></div>
<div class="swatch"><div class="chip" style="background: rgba(255, 0, 0, 0.5);"></div><code>rgba(255, 0, 0, 0.5)</code></div>
<div class="swatch"><div class="chip" style="background: hsl(0, 100%, 50%);"></div><code>hsl(0, 100%, 50%)</code></div>
</body>
</html>
slides/223015c/assets/demos/css-colors.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

slides/223015c/assets/demos/css-combinators-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-combinators</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/combinators.html</span>
</div>
<iframe src="./css-combinators.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/css-combinators.html
+25
View File
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Kombinatoren</title>
<style>
body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
article p { line-height: 1.6; background: #fef3c7; padding: 4px; }
nav > a { text-decoration: none; color: #d63384; margin-right: 10px; font-weight: 600; }
h2 + p { font-size: 1.2em; color: #065f46; }
p.wichtig { color: red; }
</style>
</head>
<body>
<nav>
<a href="#">Link</a><a href="#">Link</a>
</nav>
<article>
<h2>Artikel-Überschrift</h2>
<p>Direkt nach h2 (größer, grün).</p>
<p>Normaler Absatz im article (gelb).</p>
<p class="wichtig">Wichtig (rot).</p>
</article>
</body>
</html>
slides/223015c/assets/demos/css-combinators.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

slides/223015c/assets/demos/css-pseudo-classes-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-pseudo-classes</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/pseudo-classes.html</span>
</div>
<iframe src="./css-pseudo-classes.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/css-pseudo-classes.html
+37
View File
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Pseudo-Klassen</title>
<style>
body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
a { color: #2563eb; }
a:hover, a.is-hovered { color: red; text-decoration: underline; }
a:visited, a.is-visited { color: purple; }
input:focus, input.is-focused { border-color: blue; outline: 2px solid blue; }
input { padding: 4px 8px; border: 1px solid #9ca3af; border-radius: 3px; }
ul { list-style: none; padding: 0; }
li { padding: 6px 10px; }
li:first-child, li.is-first { font-weight: bold; }
li:nth-child(odd), li.is-odd { background: #eee; }
h3 { margin: 0.6rem 0 0.3rem; font-size: 0.95rem; }
</style>
</head>
<body>
<h3>:hover / :visited</h3>
<a href="#" class="is-hovered">Link mit Hover</a> &middot;
<a href="#" class="is-visited">Besuchter Link</a>
<h3>:focus</h3>
<input class="is-focused" value="fokussiert">
<h3>:first-child, :nth-child(odd)</h3>
<ul>
<li class="is-first is-odd">Erster (bold, zebra)</li>
<li>Zweiter</li>
<li class="is-odd">Dritter (zebra)</li>
<li>Vierter</li>
<li class="is-odd">Fünfter (zebra)</li>
</ul>
</body>
</html>
slides/223015c/assets/demos/css-pseudo-classes.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

slides/223015c/assets/demos/css-pseudo-elements-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-pseudo-elements</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/pseudo-elements.html</span>
</div>
<iframe src="./css-pseudo-elements.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/css-pseudo-elements.html
+33
View File
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Pseudo-Elemente</title>
<style>
body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
.required::before {
content: "* ";
color: red;
}
p.drop::first-letter {
font-size: 2em;
font-weight: bold;
color: #d63384;
float: left;
line-height: 1;
padding-right: 4px;
}
label { display: block; margin-top: 10px; }
input { padding: 4px 8px; border: 1px solid #9ca3af; border-radius: 3px; margin-top: 3px; }
h3 { margin: 0.6rem 0 0.3rem; font-size: 0.95rem; }
</style>
</head>
<body>
<h3>::before (Pflichtfeld-Sternchen)</h3>
<label class="required">E-Mail-Adresse</label>
<input type="email">
<h3>::first-letter (Initial-Buchstabe)</h3>
<p class="drop">Lorem ipsum dolor sit amet. Der erste Buchstabe wird per CSS hervorgehoben – kein extra HTML nötig.</p>
</body>
</html>
slides/223015c/assets/demos/css-pseudo-elements.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

slides/223015c/assets/demos/css-responsive-container.html
+30
View File
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Responsive Container</title>
<style>
body { padding: 0; margin: 0; font-family: system-ui, sans-serif; background: #fff; }
.container {
padding: 1rem;
background: white;
color: #111;
text-align: left;
font-weight: 600;
border: 1px solid #d1d5db;
}
.container::before { content: "< 768px — weiß, padding 1rem"; }
@media (min-width: 768px) {
.container { padding: 2rem; background: red; color: white; border: none; }
.container::before { content: "≥ 768px — rot, padding 2rem"; }
}
@media (min-width: 1024px) {
.container { background: green; }
.container::before { content: "≥ 1024px — grün"; }
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
slides/223015c/assets/demos/css-responsive-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-responsive</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/responsive.html</span>
</div>
<iframe src="./css-responsive.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/css-responsive.html
+45
View File
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Responsive Design – 3 Viewports</title>
<style>
html, body { margin: 0; padding: 0; font-family: system-ui, sans-serif; background: #fff; }
body { padding: 1rem; }
.viewport {
margin-bottom: 12px;
border: 1px solid #9ca3af;
border-radius: 4px;
overflow: hidden;
}
.bar {
background: #e5e7eb;
padding: 4px 10px;
font-size: 11px;
color: #374151;
font-family: ui-monospace, monospace;
border-bottom: 1px solid #9ca3af;
}
iframe { display: block; width: 100%; border: 0; }
.vp-mobile iframe { width: 360px; }
.vp-tablet iframe { width: 800px; }
.vp-desktop iframe { width: 1100px; }
.vp-mobile { width: 362px; }
.scroll { overflow: hidden; }
</style>
</head>
<body>
<div class="viewport vp-mobile">
<div class="bar">Mobile @ 360px</div>
<div class="scroll"><iframe src="./css-responsive-container.html" height="80"></iframe></div>
</div>
<div class="viewport vp-tablet">
<div class="bar">Tablet @ 800px</div>
<div class="scroll" style="overflow-x: auto;"><iframe src="./css-responsive-container.html" height="100"></iframe></div>
</div>
<div class="viewport vp-desktop">
<div class="bar">Desktop @ 1100px</div>
<div class="scroll" style="overflow-x: auto;"><iframe src="./css-responsive-container.html" height="100"></iframe></div>
</div>
</body>
</html>
slides/223015c/assets/demos/css-responsive.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

slides/223015c/assets/demos/css-selector-class-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-selector-class</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/selector-class.html</span>
</div>
<iframe src="./css-selector-class.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/css-selector-class.html
+15
View File
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Klassen-Selektor</title>
<style>
body { padding: 1.2rem; font-family: system-ui, sans-serif; }
.wichtig { color: red; font-weight: bold; }
</style>
</head>
<body>
<p class="wichtig">Dieser Text ist wichtig.</p>
<p>Dieser nicht.</p>
</body>
</html>
slides/223015c/assets/demos/css-selector-class.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

slides/223015c/assets/demos/css-selector-element-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-selector-element</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/selector-element.html</span>
</div>
<iframe src="./css-selector-element.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/css-selector-element.html
+18
View File
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Element-Selektor</title>
<style>
body { padding: 1.2rem; }
p { color: gray; font-family: Georgia, serif; }
h1, h2, h3 { font-family: sans-serif; }
</style>
</head>
<body>
<h1>Überschrift (sans-serif)</h1>
<p>Absatz: grau, Georgia (serif).</p>
<h2>Untertitel (sans-serif)</h2>
<p>Noch ein grauer Absatz.</p>
</body>
</html>
slides/223015c/assets/demos/css-selector-element.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

slides/223015c/assets/demos/css-selector-id-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-selector-id</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/selector-id.html</span>
</div>
<iframe src="./css-selector-id.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/css-selector-id.html
+24
View File
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>ID-Selektor</title>
<style>
body { padding: 0; margin: 0; font-family: system-ui, sans-serif; }
#hauptnavigation {
background: #333;
padding: 1rem;
color: white;
}
#hauptnavigation a { color: #fff; margin-right: 1rem; }
</style>
</head>
<body>
<nav id="hauptnavigation">
<a href="#">Home</a>
<a href="#">Kurse</a>
<a href="#">Kontakt</a>
</nav>
<p style="padding: 1rem;">Rest der Seite.</p>
</body>
</html>
slides/223015c/assets/demos/css-selector-id.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

slides/223015c/assets/demos/css-specificity-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-specificity</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/specificity.html</span>
</div>
<iframe src="./css-specificity.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/css-specificity.html
+30
View File
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Spezifität</title>
<style>
body { padding: 1.2rem; font-family: system-ui, sans-serif; }
p { color: blue; } /* 0,0,0,1 */
.text { color: green; } /* 0,0,1,0 */
#intro { color: red; } /* 0,1,0,0 */
code { background: #f3f4f6; padding: 1px 5px; border-radius: 3px; font-size: 0.9em; }
.row { margin-bottom: 10px; }
.label { color: #6b7280; font-size: 0.85em; }
</style>
</head>
<body>
<div class="row">
<p>Nur <code>p</code>: <strong>blau</strong></p>
<span class="label">0,0,0,1</span>
</div>
<div class="row">
<p class="text">Nur <code>.text</code>: <strong>grün</strong> schlägt p</p>
<span class="label">0,0,1,0 &gt; 0,0,0,1</span>
</div>
<div class="row">
<p id="intro" class="text">ID <code>#intro</code>: <strong>rot</strong> schlägt alles</p>
<span class="label">0,1,0,0 &gt; 0,0,1,0</span>
</div>
</body>
</html>
slides/223015c/assets/demos/css-specificity.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

slides/223015c/assets/demos/decap-stack.html
+65
View File
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Decapsulation Stack</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.stack { display: flex; flex-direction: column; gap: 0; }
.layer {
border: 2px solid;
border-radius: 6px;
padding: 10px 18px;
min-width: 540px;
font-size: 0.95rem;
margin-bottom: 4px;
}
.layer-name { font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }
.layer-desc { font-family: ui-monospace, monospace; margin-top: 3px; }
.check { margin-top: 3px; font-size: 0.85rem; font-style: italic; }
.http { background: #e0e7ff; border-color: #4f46e5; color: #3730a3; }
.tcp { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
.ip { background: #dcfce7; border-color: #15803d; color: #14532d; }
.eth { background: #fed7aa; border-color: #c2410c; color: #7c2d12; }
.bit { background: #e5e7eb; border-color: #4b5563; color: #1f2937; }
.arrow {
align-self: center;
width: 0; height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 12px solid #d63384;
margin: 2px 0;
}
</style>
</head>
<body>
<div class="stack">
<div class="layer bit">
<div class="layer-name">Physical</div>
<div class="layer-desc">Bits empfangen</div>
</div>
<div class="arrow"></div>
<div class="layer eth">
<div class="layer-name">Ethernet-Frame</div>
<div class="check">MAC = meine MAC? ✓ auspacken</div>
</div>
<div class="arrow"></div>
<div class="layer ip">
<div class="layer-name">IP-Paket</div>
<div class="check">Ziel-IP = meine IP? ✓ auspacken</div>
</div>
<div class="arrow"></div>
<div class="layer tcp">
<div class="layer-name">TCP-Segment</div>
<div class="check">Port 52431 = mein Browser? ✓ auspacken</div>
</div>
<div class="arrow"></div>
<div class="layer http">
<div class="layer-name">HTTP-Response</div>
<div class="layer-desc">"HTTP/1.1 200 OK ..."</div>
<div class="check">→ Browser rendert Seite</div>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/decap-stack.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

slides/223015c/assets/demos/details-closed-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: details-closed</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/details.html</span>
</div>
<iframe src="./details-closed.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/details-closed.html
+13
View File
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Details/Summary</title>
</head>
<body>
<details>
<summary>Klick mich!</summary>
<p>Dieser Text war versteckt.</p>
</details>
</body>
</html>
slides/223015c/assets/demos/details-closed.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

slides/223015c/assets/demos/details-open-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: details-open</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/details.html</span>
</div>
<iframe src="./details-open.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/details-open.html
+13
View File
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Details/Summary (offen)</title>
</head>
<body>
<details open>
<summary>Klick mich!</summary>
<p>Dieser Text war versteckt.</p>
</details>
</body>
</html>
slides/223015c/assets/demos/details-open.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

slides/223015c/assets/demos/dialog-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: dialog</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/dialog.html</span>
</div>
<iframe src="./dialog.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/dialog.html
+15
View File
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Dialog</title>
</head>
<body>
<dialog open>
<p>Greetings, one and all!</p>
<form method="dialog">
<button>OK</button>
</form>
</dialog>
</body>
</html>
slides/223015c/assets/demos/dialog.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

slides/223015c/assets/demos/dns-lookup.html
+129
View File
@@ -0,0 +1,129 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>DNS-Lookup Sequence</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.diagram { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; min-width: 900px; }
.actor {
background: #1a1a2e;
color: #fff;
padding: 10px;
text-align: center;
border-radius: 4px;
font-weight: 700;
font-size: 0.85rem;
}
.lifeline {
border-left: 2px dashed #9ca3af;
margin-left: 50%;
height: 480px;
position: relative;
}
.msg {
position: absolute;
padding: 6px 10px;
background: #f3f4f6;
border: 1px solid #4a4a6a;
border-radius: 4px;
font-size: 0.8rem;
white-space: nowrap;
}
.arrow-right {
position: absolute;
height: 2px;
background: #d63384;
}
.arrow-right::after {
content: "";
position: absolute;
right: -1px; top: -4px;
border-left: 8px solid #d63384;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.arrow-left {
position: absolute;
height: 2px;
background: #15803d;
}
.arrow-left::before {
content: "";
position: absolute;
left: -1px; top: -4px;
border-right: 8px solid #15803d;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.arrow-label {
position: absolute;
font-size: 0.75rem;
background: #fff;
padding: 1px 5px;
white-space: nowrap;
}
.ask { color: #7c2d12; }
.reply { color: #14532d; font-style: italic; }
</style>
</head>
<body>
<div class="diagram">
<div class="actor">Dein Laptop</div>
<div class="actor">Resolver</div>
<div class="actor">Root (.)</div>
<div class="actor">.de-Server</div>
<div class="actor">HdM-NS</div>
<!-- lifelines (5 cols) -->
<div style="position: relative; grid-column: 1 / span 5; height: 520px;">
<!-- vertical dashed lines per actor at 10%, 30%, 50%, 70%, 90% -->
<div style="position: absolute; left: 10%; top: 0; bottom: 0; border-left: 2px dashed #9ca3af;"></div>
<div style="position: absolute; left: 30%; top: 0; bottom: 0; border-left: 2px dashed #9ca3af;"></div>
<div style="position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed #9ca3af;"></div>
<div style="position: absolute; left: 70%; top: 0; bottom: 0; border-left: 2px dashed #9ca3af;"></div>
<div style="position: absolute; left: 90%; top: 0; bottom: 0; border-left: 2px dashed #9ca3af;"></div>
<!-- Laptop → Resolver at y=20 -->
<div style="position: absolute; left: 10%; top: 20px; width: 20%; height: 2px; background: #d63384;"></div>
<div style="position: absolute; left: 30%; top: 16px; transform: translateX(-100%);"><div style="border-left: 8px solid #d63384; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
<div style="position: absolute; left: 12%; top: 0; font-size: 0.75rem; color: #7c2d12;">"Wo ist www.hdm-stuttgart.de?"</div>
<!-- Resolver → Root at y=90 -->
<div style="position: absolute; left: 30%; top: 90px; width: 20%; height: 2px; background: #d63384;"></div>
<div style="position: absolute; left: 50%; top: 86px; transform: translateX(-100%);"><div style="border-left: 8px solid #d63384; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
<div style="position: absolute; left: 32%; top: 70px; font-size: 0.75rem; color: #7c2d12;">"Wer verwaltet .de?"</div>
<!-- Root → Resolver at y=150 -->
<div style="position: absolute; left: 30%; top: 150px; width: 20%; height: 2px; background: #15803d;"></div>
<div style="position: absolute; left: 30%; top: 146px;"><div style="border-right: 8px solid #15803d; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
<div style="position: absolute; left: 32%; top: 130px; font-size: 0.75rem; color: #14532d; font-style: italic;">"Frag 194.0.0.53"</div>
<!-- Resolver → .de at y=220 -->
<div style="position: absolute; left: 30%; top: 220px; width: 40%; height: 2px; background: #d63384;"></div>
<div style="position: absolute; left: 70%; top: 216px; transform: translateX(-100%);"><div style="border-left: 8px solid #d63384; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
<div style="position: absolute; left: 32%; top: 200px; font-size: 0.75rem; color: #7c2d12;">"Wer verwaltet hdm-stuttgart.de?"</div>
<!-- .de → Resolver at y=280 -->
<div style="position: absolute; left: 30%; top: 280px; width: 40%; height: 2px; background: #15803d;"></div>
<div style="position: absolute; left: 30%; top: 276px;"><div style="border-right: 8px solid #15803d; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
<div style="position: absolute; left: 32%; top: 260px; font-size: 0.75rem; color: #14532d; font-style: italic;">"Frag Nameserver der HdM"</div>
<!-- Resolver → HdM at y=350 -->
<div style="position: absolute; left: 30%; top: 350px; width: 60%; height: 2px; background: #d63384;"></div>
<div style="position: absolute; left: 90%; top: 346px; transform: translateX(-100%);"><div style="border-left: 8px solid #d63384; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
<div style="position: absolute; left: 32%; top: 330px; font-size: 0.75rem; color: #7c2d12;">"Welche IP hat www?"</div>
<!-- HdM → Resolver at y=410 -->
<div style="position: absolute; left: 30%; top: 410px; width: 60%; height: 2px; background: #15803d;"></div>
<div style="position: absolute; left: 30%; top: 406px;"><div style="border-right: 8px solid #15803d; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
<div style="position: absolute; left: 32%; top: 390px; font-size: 0.75rem; color: #14532d; font-style: italic;">"212.132.79.37"</div>
<!-- Resolver → Laptop at y=480 -->
<div style="position: absolute; left: 10%; top: 480px; width: 20%; height: 2px; background: #15803d;"></div>
<div style="position: absolute; left: 10%; top: 476px;"><div style="border-right: 8px solid #15803d; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
<div style="position: absolute; left: 12%; top: 460px; font-size: 0.75rem; color: #14532d; font-style: italic;">"IP ist 212.132.79.37"</div>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/dns-lookup.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

slides/223015c/assets/demos/dns-tree.html
+58
View File
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>DNS-Hierarchie</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.tree { display: flex; flex-direction: column; align-items: center; }
.node {
background: #fef3c7;
border: 2px solid #ca8a04;
color: #713f12;
padding: 8px 18px;
border-radius: 6px;
font-family: ui-monospace, monospace;
font-weight: 700;
font-size: 0.95rem;
}
.root { background: #fde68a; border-color: #b45309; }
.leaf { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
.level { display: flex; gap: 36px; margin-top: 12px; }
.edges {
width: 100%;
height: 20px;
position: relative;
}
svg { display: block; }
</style>
</head>
<body>
<div class="tree">
<div class="node root">. (Root)</div>
<svg width="360" height="26">
<line x1="180" y1="0" x2="60" y2="26" stroke="#d63384" stroke-width="2"/>
<line x1="180" y1="0" x2="180" y2="26" stroke="#d63384" stroke-width="2"/>
<line x1="180" y1="0" x2="300" y2="26" stroke="#d63384" stroke-width="2"/>
</svg>
<div class="level">
<div class="node">.de</div>
<div class="node">.com</div>
<div class="node">.org</div>
</div>
<svg width="360" height="26">
<line x1="60" y1="0" x2="60" y2="26" stroke="#d63384" stroke-width="2"/>
</svg>
<div class="level">
<div class="node">hdm-stuttgart</div>
</div>
<svg width="240" height="26">
<line x1="120" y1="0" x2="120" y2="26" stroke="#d63384" stroke-width="2"/>
</svg>
<div class="level">
<div class="node leaf">www</div>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/dns-tree.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

slides/223015c/assets/demos/dom-tree.html
+55
View File
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>DOM-Baum</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.tree { display: flex; flex-direction: column; align-items: center; }
.node {
background: #dbeafe;
border: 2px solid #1e40af;
color: #1e3a8a;
padding: 7px 16px;
border-radius: 6px;
font-family: ui-monospace, monospace;
font-weight: 700;
font-size: 0.9rem;
}
.root { background: #e0e7ff; border-color: #4f46e5; color: #3730a3; }
.content { background: #dcfce7; border-color: #15803d; color: #14532d; font-weight: 400; font-style: italic; }
.level { display: flex; gap: 28px; margin-top: 10px; align-items: flex-start; }
.col { display: flex; flex-direction: column; align-items: center; }
</style>
</head>
<body>
<div class="tree">
<div class="node root">document</div>
<svg width="200" height="24"><line x1="100" y1="0" x2="100" y2="24" stroke="#d63384" stroke-width="2"/></svg>
<div class="node root">&lt;html&gt;</div>
<svg width="380" height="26">
<line x1="190" y1="0" x2="90" y2="26" stroke="#d63384" stroke-width="2"/>
<line x1="190" y1="0" x2="290" y2="26" stroke="#d63384" stroke-width="2"/>
</svg>
<div class="level">
<div class="col">
<div class="node">&lt;head&gt;</div>
<svg width="120" height="22"><line x1="60" y1="0" x2="60" y2="22" stroke="#d63384" stroke-width="2"/></svg>
<div class="node">&lt;title&gt;</div>
</div>
<div class="col">
<div class="node">&lt;body&gt;</div>
<svg width="220" height="26">
<line x1="110" y1="0" x2="55" y2="26" stroke="#d63384" stroke-width="2"/>
<line x1="110" y1="0" x2="165" y2="26" stroke="#d63384" stroke-width="2"/>
</svg>
<div class="level">
<div class="node">&lt;h1&gt;</div>
<div class="node">&lt;p&gt;</div>
</div>
</div>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/dom-tree.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

slides/223015c/assets/demos/encap-layers.html
+77
View File
@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Encapsulation Schichten</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; font-size: 0.92rem; }
.label { width: 120px; font-weight: 700; color: #1a1a2e; text-align: right; flex-shrink: 0; }
.packet { display: flex; border-radius: 4px; overflow: hidden; border: 2px solid #4a4a6a; }
.part {
padding: 6px 14px;
font-family: ui-monospace, monospace;
font-size: 0.85rem;
border-right: 2px solid #4a4a6a;
}
.part:last-child { border-right: 0; }
.http { background: #e0e7ff; color: #3730a3; }
.tcp { background: #dbeafe; color: #1e3a8a; }
.ip { background: #dcfce7; color: #14532d; }
.eth { background: #fed7aa; color: #7c2d12; }
.trailer { background: #fed7aa; color: #7c2d12; }
.bit { background: #e5e7eb; color: #1f2937; font-family: ui-monospace, monospace; padding: 6px 14px; border: 2px solid #4b5563; border-radius: 4px; }
.down {
width: 0; height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 12px solid #d63384;
margin: 4px 0 4px 180px;
}
.note { font-size: 0.75rem; color: #d63384; margin-left: 200px; font-style: italic; }
</style>
</head>
<body>
<div class="row">
<div class="label">Anwendung</div>
<div class="packet"><div class="part http">HTTP-Request: GET /index.html</div></div>
</div>
<div class="down"></div>
<div class="note">verpackt in</div>
<div class="row">
<div class="label">Transport</div>
<div class="packet">
<div class="part tcp">TCP-Header</div>
<div class="part http">HTTP-Request</div>
</div>
</div>
<div class="down"></div>
<div class="note">verpackt in</div>
<div class="row">
<div class="label">Internet</div>
<div class="packet">
<div class="part ip">IP-Header</div>
<div class="part tcp">TCP-Header</div>
<div class="part http">HTTP</div>
</div>
</div>
<div class="down"></div>
<div class="note">verpackt in</div>
<div class="row">
<div class="label">Netzzugang</div>
<div class="packet">
<div class="part eth">Eth-Header</div>
<div class="part ip">IP</div>
<div class="part tcp">TCP</div>
<div class="part http">HTTP</div>
<div class="part trailer">Eth-Trailer</div>
</div>
</div>
<div class="down"></div>
<div class="row">
<div class="label">Physik</div>
<div class="bit">01001000 01010100 01010100 ...</div>
</div>
</body>
</html>
slides/223015c/assets/demos/encap-layers.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

slides/223015c/assets/demos/encap-stack.html
+63
View File
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Encapsulation Stack</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.stack { display: flex; flex-direction: column; gap: 0; }
.layer {
border: 2px solid;
border-radius: 6px;
padding: 10px 18px;
min-width: 520px;
font-size: 0.95rem;
margin-bottom: 4px;
}
.layer-name { font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }
.layer-desc { font-family: ui-monospace, monospace; margin-top: 3px; }
.http { background: #e0e7ff; border-color: #4f46e5; color: #3730a3; }
.tcp { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
.ip { background: #dcfce7; border-color: #15803d; color: #14532d; }
.eth { background: #fed7aa; border-color: #c2410c; color: #7c2d12; }
.bit { background: #e5e7eb; border-color: #4b5563; color: #1f2937; }
.arrow {
align-self: center;
width: 0; height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 12px solid #d63384;
margin: 2px 0;
}
</style>
</head>
<body>
<div class="stack">
<div class="layer http">
<div class="layer-name">HTTP-Response</div>
<div class="layer-desc">"HTTP/1.1 200 OK ..."</div>
</div>
<div class="arrow"></div>
<div class="layer tcp">
<div class="layer-name">TCP</div>
<div class="layer-desc">Dest-Port: 52431 (dein Browser)</div>
</div>
<div class="arrow"></div>
<div class="layer ip">
<div class="layer-name">IP</div>
<div class="layer-desc">Dest-IP: 141.62.xxx.xxx (dein Laptop)</div>
</div>
<div class="arrow"></div>
<div class="layer eth">
<div class="layer-name">Ethernet</div>
<div class="layer-desc">Dest-MAC: Router des Server-Netzes</div>
</div>
<div class="arrow"></div>
<div class="layer bit">
<div class="layer-name">Physical</div>
<div class="layer-desc">Bits</div>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/encap-stack.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

slides/223015c/assets/demos/ethernet-frame.html
+76
View File
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Ethernet-Frame</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.wrap {
border: 2px solid #c2410c;
border-radius: 6px;
overflow: hidden;
min-width: 680px;
}
.eth-header, .fcs {
background: #fed7aa;
padding: 12px 16px;
}
.eth-header { border-bottom: 2px solid #c2410c; }
.fcs { border-top: 2px solid #c2410c; color: #7c2d12; font-weight: 600; font-size: 0.9rem; }
.header-title {
font-weight: 700;
color: #7c2d12;
margin-bottom: 8px;
font-size: 1.05rem;
}
.fields {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid #c2410c;
border-radius: 4px;
overflow: hidden;
background: #fff;
}
.field {
padding: 8px 12px;
border-right: 1px solid #c2410c;
font-size: 0.85rem;
}
.field:last-child { border-right: 0; }
.field-label { color: #7c2d12; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.field-value { font-family: ui-monospace, monospace; color: #0f172a; margin-top: 2px; }
.nested {
background: #dcfce7;
border: 2px solid #15803d;
border-radius: 4px;
margin: 12px 16px;
padding: 12px 16px;
}
.nested-title { color: #14532d; font-weight: 700; font-size: 0.95rem; }
.nested-note { color: #14532d; font-size: 0.85rem; font-style: italic; }
</style>
</head>
<body>
<div class="wrap">
<div class="eth-header">
<div class="header-title">Ethernet-Header</div>
<div class="fields">
<div class="field">
<div class="field-label">Source MAC</div>
<div class="field-value">aa:bb:cc:dd:ee:ff</div>
</div>
<div class="field">
<div class="field-label">Dest MAC (Router!)</div>
<div class="field-value">11:22:33:44:55:66</div>
</div>
</div>
</div>
<div class="nested">
<div class="nested-title">IP-Paket</div>
<div class="nested-note">unverändert gekapselt</div>
</div>
<div class="fcs">FCS — Frame Check Sequence (Prüfsumme)</div>
</div>
</body>
</html>
slides/223015c/assets/demos/ethernet-frame.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

slides/223015c/assets/demos/ethernet-rehop.html
+99
View File
@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Ethernet nach Router-Hop</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.wrap {
border: 2px solid #c2410c;
border-radius: 6px;
overflow: hidden;
min-width: 680px;
}
.eth-header {
background: #fed7aa;
padding: 12px 16px;
border-bottom: 2px solid #c2410c;
}
.header-title {
font-weight: 700;
color: #7c2d12;
margin-bottom: 8px;
font-size: 1.05rem;
}
.badge {
display: inline-block;
background: #c2410c;
color: #fff;
padding: 2px 8px;
border-radius: 3px;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-left: 8px;
vertical-align: middle;
}
.fields {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid #c2410c;
border-radius: 4px;
overflow: hidden;
background: #fff;
}
.field {
padding: 8px 12px;
border-right: 1px solid #c2410c;
font-size: 0.85rem;
}
.field:last-child { border-right: 0; }
.field-label { color: #7c2d12; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.field-value { font-family: ui-monospace, monospace; color: #0f172a; margin-top: 2px; }
.nested {
background: #dcfce7;
border: 2px solid #15803d;
border-radius: 4px;
margin: 12px 16px;
padding: 12px 16px;
}
.nested-title { color: #14532d; font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; }
.nested-line { color: #14532d; font-size: 0.85rem; font-family: ui-monospace, monospace; }
.nested-badge {
display: inline-block;
background: #15803d;
color: #fff;
padding: 2px 8px;
border-radius: 3px;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-left: 6px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrap">
<div class="eth-header">
<div class="header-title">Ethernet-Header<span class="badge">neu</span></div>
<div class="fields">
<div class="field">
<div class="field-label">Source MAC</div>
<div class="field-value">Router-MAC</div>
</div>
<div class="field">
<div class="field-label">Dest MAC</div>
<div class="field-value">Nächster-Router</div>
</div>
</div>
</div>
<div class="nested">
<div class="nested-title">IP-Paket<span class="nested-badge">unverändert</span></div>
<div class="nested-line">Source: 141.62.xxx.xxx</div>
<div class="nested-line">Dest: 212.132.79.37</div>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/ethernet-rehop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

slides/223015c/assets/demos/grundgeruest-frame.html
+33
View File
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: Grundgerüst</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///portfolio/index.html</span>
</div>
<iframe src="./grundgeruest.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/grundgeruest.html
+12
View File
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="de">
<head>
<title>Portfolio von ...</title>
<meta name="description" content="Hier gibt es die besten ..." />
<meta name="og:image" content="https://...." />
</head>
<body>
<h1>Hallo Welt!</h1>
<p>Das ist mein erster Absatz.</p>
</body>
</html>
slides/223015c/assets/demos/grundgeruest.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

slides/223015c/assets/demos/hop-chain.html
+60
View File
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Hop-Kette</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.chain { display: flex; flex-direction: column; align-items: center; gap: 0; }
.node {
border: 2px solid;
border-radius: 6px;
padding: 10px 22px;
min-width: 260px;
text-align: center;
font-weight: 600;
font-size: 0.95rem;
}
.laptop { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
.router { background: #fef3c7; border-color: #ca8a04; color: #713f12; }
.server { background: #dcfce7; border-color: #15803d; color: #14532d; }
.edge {
display: flex;
flex-direction: column;
align-items: center;
margin: 5px 0;
}
.edge-line {
width: 0; height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 14px solid #d63384;
}
.edge-label {
font-size: 0.75rem;
color: #d63384;
font-style: italic;
margin-bottom: 2px;
}
.dots {
color: #9ca3af;
font-weight: 700;
margin: 2px 0;
}
</style>
</head>
<body>
<div class="chain">
<div class="node laptop">Dein Laptop</div>
<div class="edge"><div class="edge-label">[Frame an Router 1]</div><div class="edge-line"></div></div>
<div class="node router">Router HdM-Netz</div>
<div class="edge"><div class="edge-label">[Frame an Router 2]</div><div class="edge-line"></div></div>
<div class="node router">Router BelWü</div>
<div class="edge"><div class="edge-label">[Frame an Router 3]</div><div class="edge-line"></div></div>
<div class="dots">...</div>
<div class="edge"><div class="edge-label">[Frame an Server]</div><div class="edge-line"></div></div>
<div class="node server">Webserver</div>
</div>
</body>
</html>
slides/223015c/assets/demos/hop-chain.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

slides/223015c/assets/demos/input-frame.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: input</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/input.html</span>
</div>
<iframe src="./input.html"></iframe>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/input.html
+13
View File
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Input/Eingabefeld</title>
</head>
<body>
<input
type="text"
maxlength="8"
size="10" />
</body>
</html>
slides/223015c/assets/demos/input.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

slides/223015c/assets/demos/ip-packet.html
+74
View File
@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>IP-Paket</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.wrap {
border: 2px solid #15803d;
border-radius: 6px;
overflow: hidden;
min-width: 660px;
}
.ip-header {
background: #dcfce7;
padding: 12px 16px;
border-bottom: 2px solid #15803d;
}
.header-title {
font-weight: 700;
margin-bottom: 8px;
font-size: 1.05rem;
}
.ip-header .header-title { color: #14532d; }
.fields {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid #15803d;
border-radius: 4px;
overflow: hidden;
background: #fff;
}
.field {
padding: 8px 12px;
border-right: 1px solid #15803d;
font-size: 0.85rem;
}
.field:last-child { border-right: 0; }
.field-label { color: #14532d; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.field-value { font-family: ui-monospace, monospace; color: #0f172a; margin-top: 2px; }
.nested {
background: #dbeafe;
padding: 12px 16px;
border: 2px solid #1e40af;
border-radius: 4px;
margin: 12px 16px;
}
.nested-title { color: #1e3a8a; font-weight: 700; font-size: 0.95rem; }
.nested-note { color: #1e3a8a; font-size: 0.85rem; font-style: italic; }
</style>
</head>
<body>
<div class="wrap">
<div class="ip-header">
<div class="header-title">IP-Header</div>
<div class="fields">
<div class="field">
<div class="field-label">Source IP</div>
<div class="field-value">141.62.xxx.xxx</div>
</div>
<div class="field">
<div class="field-label">Destination IP</div>
<div class="field-value">212.132.79.37</div>
</div>
</div>
</div>
<div class="nested">
<div class="nested-title">TCP-Segment</div>
<div class="nested-note">unverändert gekapselt</div>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/ip-packet.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

slides/223015c/assets/demos/network-chain.html
+57
View File
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Netzwerk-Kette</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.chain { display: flex; flex-direction: column; align-items: center; gap: 0; }
.step {
background: #f3f4f6;
border: 2px solid #4a4a6a;
border-radius: 6px;
padding: 10px 22px;
font-size: 1rem;
color: #1a1a2e;
min-width: 320px;
text-align: center;
font-weight: 600;
}
.step.you { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
.step.net { background: #fef3c7; border-color: #ca8a04; color: #713f12; }
.step.wire { background: #e5e7eb; border-color: #4b5563; color: #1f2937; }
.step.server { background: #dcfce7; border-color: #15803d; color: #14532d; }
.arrow {
width: 0; height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 14px solid #d63384;
margin: 4px 0;
}
.arrow-label {
font-size: 0.75rem;
color: #d63384;
font-style: italic;
margin: 2px 0;
}
</style>
</head>
<body>
<div class="chain">
<div class="step you">Dein Browser</div>
<div class="arrow"></div>
<div class="step wire">Netzwerkkarte (WLAN / Ethernet)</div>
<div class="arrow"></div>
<div class="step net">Router zu Hause</div>
<div class="arrow"></div>
<div class="step net">Provider-Netz / HdM</div>
<div class="arrow"></div>
<div class="arrow-label">Internet · dutzende Router</div>
<div class="arrow"></div>
<div class="step net">Ziel-Netz</div>
<div class="arrow"></div>
<div class="step server">Webserver</div>
</div>
</body>
</html>
slides/223015c/assets/demos/network-chain.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

slides/223015c/assets/demos/osi-tcpip-diagram.html
+52
View File
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>OSI vs TCP/IP</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px 40px; display: inline-block; }
.wrap { display: flex; gap: 36px; align-items: flex-start; }
.col { display: flex; flex-direction: column; gap: 4px; }
h3 { margin: 0 0 10px; font-size: 1.1rem; color: #1a1a2e; text-align: center; }
.box {
border: 2px solid #4a4a6a;
padding: 10px 20px;
min-width: 230px;
font-size: 0.95rem;
background: #f3f4f6;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.osi .box { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
.tcpip .box { background: #fce7d6; border-color: #c2410c; color: #7c2d12; font-weight: 600; }
.tcpip .app { min-height: 126px; }
.tcpip .trans { min-height: 40px; }
.tcpip .net { min-height: 40px; }
.tcpip .link { min-height: 82px; }
</style>
</head>
<body>
<div class="wrap">
<div class="col osi">
<h3>OSI (7 Schichten)</h3>
<div class="box">7. Anwendung</div>
<div class="box">6. Darstellung</div>
<div class="box">5. Sitzung</div>
<div class="box">4. Transport</div>
<div class="box">3. Vermittlung</div>
<div class="box">2. Sicherung</div>
<div class="box">1. Bitübertragung</div>
</div>
<div class="col tcpip">
<h3>TCP/IP (4 Schichten)</h3>
<div class="box app">Anwendung</div>
<div class="box trans">Transport</div>
<div class="box net">Internet</div>
<div class="box link">Netzzugang</div>
</div>
</div>
</body>
</html>
slides/223015c/assets/demos/osi-tcpip-diagram.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

slides/223015c/assets/demos/port-highlight.html
+52
View File
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<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; }
.line {
font-family: ui-monospace, "SF Mono", monospace;
font-size: 2.2rem;
color: #1a1a2e;
}
.port {
background: #fde68a;
color: #7c2d12;
padding: 2px 8px;
border-radius: 4px;
font-weight: 700;
}
.caption {
margin-top: 14px;
font-size: 1rem;
color: #4a4a6a;
padding-left: 210px;
position: relative;
}
.caption::before {
content: "";
position: absolute;
top: -8px;
left: 210px;
width: 2px;
height: 10px;
background: #c2410c;
}
.caption-text {
background: #fed7aa;
padding: 4px 10px;
border-radius: 4px;
border-left: 3px solid #c2410c;
display: inline-block;
color: #7c2d12;
font-weight: 600;
}
</style>
</head>
<body>
<div class="line">212.132.79.37:<span class="port">443</span></div>
<div class="caption"><span class="caption-text">Port 443 = HTTPS</span></div>
</body>
</html>
slides/223015c/assets/demos/port-highlight.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

slides/223015c/assets/demos/response-hops.html
+50
View File
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Rückweg</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.chain { display: flex; flex-direction: column; align-items: center; gap: 0; }
.step {
border: 2px solid;
border-radius: 6px;
padding: 10px 22px;
min-width: 280px;
text-align: center;
font-weight: 600;
font-size: 1rem;
}
.server { background: #fed7aa; border-color: #c2410c; color: #7c2d12; }
.router { background: #fef3c7; border-color: #ca8a04; color: #713f12; }
.hdm { background: #fde68a; border-color: #b45309; color: #78350f; }
.laptop { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
.arrow {
width: 0; height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 14px solid #d63384;
margin: 5px 0;
}
.dots {
color: #d63384;
font-style: italic;
font-size: 0.9rem;
margin: 2px 0;
}
</style>
</head>
<body>
<div class="chain">
<div class="step server">Server</div>
<div class="arrow"></div>
<div class="step router">Router → Router → Router</div>
<div class="dots">jeder Hop: IP gleich · MAC neu</div>
<div class="arrow"></div>
<div class="step hdm">Router HdM</div>
<div class="arrow"></div>
<div class="step laptop">Dein Laptop</div>
</div>
</body>
</html>
slides/223015c/assets/demos/response-hops.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

Loaded 100 of 111 files, more files were not shown because too many files have changed in this diff. Show more