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

replace ascii arrows: network chain, port highlight, client/server, encap/decap, response hops

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-20 11:27:28 +02:00
parent 54ba08cdbc
commit 6c8688c9f6
13 changed files with 369 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
slides/223015c/02-netzwerke-protokolle-css.md
View File

@@ -347,25 +347,18 @@ SPEAKER NOTES:
# Das Problem: Komplexität
Zwischen dir und einer Webseite liegen:
![bg right:40% fit](./assets/demos/network-chain.png)
```
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
```
Zwischen dir und einer Webseite liegen viele Stationen.
Jede Komponente "spricht" anders.
Jede Komponente "spricht" anders:
- Browser → **HTTP**
- Netzwerkkarte → **Bits / Signale**
- Router → **IP-Pakete**
- Provider → **Routing**
Wie zusammenbringen?
<!--
SPEAKER NOTES:
@@ -651,10 +644,7 @@ SPEAKER NOTES:
# Port: Das richtige Programm
```
212.132.79.37:443
└─── Port 443 = HTTPS
```
![bg right:38% fit](./assets/demos/port-highlight.png)
- Identifiziert ein **Programm** auf einem Rechner
- Ein Rechner, viele Dienste
@@ -1051,13 +1041,7 @@ Der Handshake synchronisiert **Sequenznummern** – essenziell für TCPs Zuverl
**Status:** Die TCP-Verbindung steht.
```
Client: 141.62.xxx.xxx:52431
└─── Zufälliger Port für diese Verbindung
Server: 212.132.79.37:443
└─── HTTPS-Port
```
![bg right:42% fit](./assets/demos/client-server-ports.png)
**Jetzt erst** kann HTTP gesprochen werden.
@@ -1397,17 +1381,7 @@ SPEAKER NOTES:
<!--
SPEAKER NOTES:
- Gleiches Spiel, andere Richtung
IP: Dest-IP: 141.62.xxx.xxx (dein Laptop!)
↓
Ethernet: Dest-MAC: Router des Server-Netzes
↓
Bits
```
<!--
SPEAKER NOTES:
- Gleiches Spiel, andere Richtung
- TCP: Ziel-Port 52431 (Browser!)
- TCP: Ziel-Port 52431 (Browser!)
- IP: Ziel-IP = Laptop
- Ethernet: Dest-MAC = nächster Router
- Ab geht's – ganzer Weg zurück
@@ -1422,17 +1396,13 @@ SPEAKER NOTES:
Gleiches Spiel wie der Hinweg:
- Hop für Hop durchs Internet
Router HdM
↓
Dein Laptop
```
Gleiches Spiel: Hop für Hop, IP bleibt gleich, MAC ändert sich.
<!--
SPEAKER NOTES:
- **IP bleibt gleich** (Start/Ziel)
- **MAC ändert sich** bei jedem Router
- Jeder Router: auspacken → routing → einpacken
<!--
SPEAKER NOTES:
- Rückweg: gleiche Mechanik, andere Richtung
- Jeder Router: auspacken → routing → einpacken
- Bis Paket bei euch ankommt
-->
@@ -1445,19 +1415,11 @@ SPEAKER NOTES:
Rückweg = Encapsulation umgekehrt.
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:
- Laptop empfängt, auspackt: Frame → IP → TCP
- TCP: Port 52431 = Browser-Prozess
<!--
SPEAKER NOTES:
- Laptop empfängt, auspackt: Frame → IP → TCP
- TCP: Port 52431 = Browser-Prozess
- Browser bekommt HTTP-Response
- Beginnt mit Rendern
- 200ms vorbei → Webseite sichtbar

58
slides/223015c/assets/demos/client-server-ports.html Normal file
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>

BIN
slides/223015c/assets/demos/client-server-ports.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

65
slides/223015c/assets/demos/decap-stack.html Normal file
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>

BIN
slides/223015c/assets/demos/decap-stack.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

63
slides/223015c/assets/demos/encap-stack.html Normal file
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>

BIN
slides/223015c/assets/demos/encap-stack.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

57
slides/223015c/assets/demos/network-chain.html Normal file
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>

BIN
slides/223015c/assets/demos/network-chain.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

52
slides/223015c/assets/demos/port-highlight.html Normal file
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>

BIN
slides/223015c/assets/demos/port-highlight.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

50
slides/223015c/assets/demos/response-hops.html Normal file
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>

BIN
slides/223015c/assets/demos/response-hops.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB