replace ascii arrows: network chain, port highlight, client/server, encap/decap, response hops
This commit is contained in:
@@ -347,25 +347,18 @@ SPEAKER NOTES:
|
|||||||
|
|
||||||
# Das Problem: Komplexität
|
# Das Problem: Komplexität
|
||||||
|
|
||||||
Zwischen dir und einer Webseite liegen:
|
|
||||||
|
|
||||||
```
|
Zwischen dir 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:
|
||||||
@@ -651,10 +644,7 @@ SPEAKER NOTES:
|
|||||||
|
|
||||||
# Port: Das richtige Programm
|
# Port: Das richtige Programm
|
||||||
|
|
||||||
```
|
|
||||||
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
|
||||||
@@ -1051,13 +1041,7 @@ Der Handshake synchronisiert **Sequenznummern** – essenziell für TCPs Zuverl
|
|||||||
|
|
||||||
**Status:** Die TCP-Verbindung steht.
|
**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
|
|
||||||
```
|
|
||||||
|
|
||||||
**Jetzt erst** kann HTTP gesprochen werden.
|
**Jetzt erst** kann HTTP gesprochen werden.
|
||||||
|
|
||||||
@@ -1397,17 +1381,7 @@ SPEAKER NOTES:
|
|||||||
<!--
|
<!--
|
||||||
SPEAKER NOTES:
|
SPEAKER NOTES:
|
||||||
- Gleiches Spiel, andere Richtung
|
- Gleiches Spiel, andere Richtung
|
||||||
IP: Dest-IP: 141.62.xxx.xxx (dein Laptop!)
|
- TCP: Ziel-Port 52431 (Browser!)
|
||||||
↓
|
|
||||||
Ethernet: Dest-MAC: Router des Server-Netzes
|
|
||||||
↓
|
|
||||||
Bits
|
|
||||||
```
|
|
||||||
|
|
||||||
<!--
|
|
||||||
SPEAKER NOTES:
|
|
||||||
- Gleiches Spiel, andere Richtung
|
|
||||||
- TCP: Ziel-Port 52431 (Browser!)
|
|
||||||
- IP: Ziel-IP = Laptop
|
- IP: Ziel-IP = Laptop
|
||||||
- Ethernet: Dest-MAC = nächster Router
|
- Ethernet: Dest-MAC = nächster Router
|
||||||
- Ab geht's – ganzer Weg zurück
|
- Ab geht's – ganzer Weg zurück
|
||||||
@@ -1422,17 +1396,13 @@ SPEAKER NOTES:
|
|||||||
Gleiches Spiel wie der Hinweg:
|
Gleiches Spiel wie der Hinweg:
|
||||||
|
|
||||||
- Hop für Hop durchs Internet
|
- Hop für Hop durchs Internet
|
||||||
Router HdM
|
- **IP bleibt gleich** (Start/Ziel)
|
||||||
↓
|
|
||||||
Dein Laptop
|
|
||||||
```
|
|
||||||
|
|
||||||
Gleiches Spiel: Hop für Hop, IP bleibt gleich, MAC ändert sich.
|
|
||||||
|
|
||||||
<!--
|
|
||||||
SPEAKER NOTES:
|
|
||||||
- **MAC ändert sich** bei jedem Router
|
- **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
|
- Bis Paket bei euch ankommt
|
||||||
-->
|
-->
|
||||||
|
|
||||||
@@ -1445,19 +1415,11 @@ SPEAKER NOTES:
|
|||||||
Rückweg = Encapsulation umgekehrt.
|
Rückweg = Encapsulation umgekehrt.
|
||||||
|
|
||||||
Jede Schicht prüft "ist das für mich?" und packt dann die nächste aus.
|
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
|
SPEAKER NOTES:
|
||||||
↓
|
- Laptop empfängt, auspackt: Frame → IP → TCP
|
||||||
HTTP: "HTTP/1.1 200 OK..."
|
- TCP: Port 52431 = Browser-Prozess
|
||||||
↓
|
|
||||||
Browser rendert die Seite
|
|
||||||
```
|
|
||||||
|
|
||||||
<!--
|
|
||||||
SPEAKER NOTES:
|
|
||||||
- Laptop empfängt, auspackt: Frame → IP → TCP
|
|
||||||
- TCP: Port 52431 = Browser-Prozess
|
|
||||||
- Browser bekommt HTTP-Response
|
- Browser bekommt HTTP-Response
|
||||||
- Beginnt mit Rendern
|
- Beginnt mit Rendern
|
||||||
- 200ms vorbei → Webseite sichtbar
|
- 200ms vorbei → Webseite sichtbar
|
||||||
|
|||||||
58
slides/223015c/assets/demos/client-server-ports.html
Normal file
58
slides/223015c/assets/demos/client-server-ports.html
Normal 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
BIN
slides/223015c/assets/demos/client-server-ports.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
65
slides/223015c/assets/demos/decap-stack.html
Normal file
65
slides/223015c/assets/demos/decap-stack.html
Normal 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
BIN
slides/223015c/assets/demos/decap-stack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
63
slides/223015c/assets/demos/encap-stack.html
Normal file
63
slides/223015c/assets/demos/encap-stack.html
Normal 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
BIN
slides/223015c/assets/demos/encap-stack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
57
slides/223015c/assets/demos/network-chain.html
Normal file
57
slides/223015c/assets/demos/network-chain.html
Normal 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
BIN
slides/223015c/assets/demos/network-chain.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
52
slides/223015c/assets/demos/port-highlight.html
Normal file
52
slides/223015c/assets/demos/port-highlight.html
Normal 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
BIN
slides/223015c/assets/demos/port-highlight.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
50
slides/223015c/assets/demos/response-hops.html
Normal file
50
slides/223015c/assets/demos/response-hops.html
Normal 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
BIN
slides/223015c/assets/demos/response-hops.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Reference in New Issue
Block a user