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

fix broken dns tree and port connector, full-bleed handshake and dns-lookup slides, siezen in all demos, first-letter sizing

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-20 12:06:04 +02:00
parent c45ddc779c
commit 0367f07166
17 changed files with 89 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -827,12 +827,11 @@ SPEAKER NOTES:
<!-- _footer: '' -->
<!-- _paginate: false -->
# Der DNS-Lookup
![w:1100 center](./assets/demos/dns-lookup.png)
![bg fit](./assets/demos/dns-lookup.png)
<!--
SPEAKER NOTES:
- Titel: Der DNS-Lookup
- Kompletter Ablauf (wenn nichts gecached)
- Resolver = typisch beim Provider, macht Arbeit
- Root → .de-Server → HdM-NS → IP
@@ -933,14 +932,12 @@ SPEAKER NOTES:
<!-- _footer: '' -->
<!-- _paginate: false -->
# Der 3-Way-Handshake
![w:1050 center](./assets/demos/tcp-handshake.png)
**SYN** = Synchronize · **ACK** = Acknowledge
![bg fit](./assets/demos/tcp-handshake.png)
<!--
SPEAKER NOTES:
- Titel: Der 3-Way-Handshake
- SYN = Synchronize, ACK = Acknowledge
- 3 Pakete → Verbindung steht
- 1. Client SYN: "Will Verbindung, starte bei 1000"
- 2. Server SYN-ACK: "OK, ich starte bei 5000, erwarte 1001"

8
slides/223015c/assets/demos/css-pseudo-elements.html
View File

@@ -9,13 +9,15 @@
content: "* ";
color: red;
}
p.drop { line-height: 1.5; }
p.drop::first-letter {
font-size: 2em;
font-size: 3em;
font-weight: bold;
color: #d63384;
float: left;
line-height: 1;
padding-right: 4px;
line-height: 0.9;
padding-right: 6px;
padding-top: 2px;
}
label { display: block; margin-top: 10px; }
input { padding: 4px 8px; border: 1px solid #9ca3af; border-radius: 3px; margin-top: 3px; }

BIN
slides/223015c/assets/demos/css-pseudo-elements.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 54 KiB

2
slides/223015c/assets/demos/dns-lookup.html
View File

@@ -70,7 +70,7 @@
</head>
<body>
<div class="diagram">
<div class="actor">Dein Laptop</div>
<div class="actor">Ihr Laptop</div>
<div class="actor">Resolver</div>
<div class="actor">Root (.)</div>
<div class="actor">.de-Server</div>

BIN
slides/223015c/assets/demos/dns-lookup.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 73 KiB

94
slides/223015c/assets/demos/dns-tree.html
View File

@@ -5,54 +5,58 @@
<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;
}
body { padding: 20px; display: inline-block; }
svg { display: block; }
.node rect { fill: #fef3c7; stroke: #ca8a04; stroke-width: 2; rx: 6; }
.node.root rect { fill: #fde68a; stroke: #b45309; }
.node.leaf rect { fill: #dbeafe; stroke: #1e40af; }
.node text { font-family: ui-monospace, monospace; font-weight: 700; font-size: 15px; fill: #713f12; }
.node.leaf text { fill: #1e3a8a; }
.line { stroke: #d63384; stroke-width: 2; fill: none; }
</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>
<svg width="620" height="520" viewBox="0 0 620 520">
<!-- Root -->
<g class="node root">
<rect x="250" y="10" width="120" height="44"/>
<text x="310" y="38" text-anchor="middle">. (Root)</text>
</g>
<!-- Lines from Root to .de, .com, .org -->
<line class="line" x1="310" y1="54" x2="70" y2="120"/>
<line class="line" x1="310" y1="54" x2="310" y2="120"/>
<line class="line" x1="310" y1="54" x2="550" y2="120"/>
<!-- .de -->
<g class="node">
<rect x="20" y="120" width="100" height="44"/>
<text x="70" y="148" text-anchor="middle">.de</text>
</g>
<!-- .com -->
<g class="node">
<rect x="260" y="120" width="100" height="44"/>
<text x="310" y="148" text-anchor="middle">.com</text>
</g>
<!-- .org -->
<g class="node">
<rect x="500" y="120" width="100" height="44"/>
<text x="550" y="148" text-anchor="middle">.org</text>
</g>
<!-- Line .de → hdm-stuttgart -->
<line class="line" x1="70" y1="164" x2="70" y2="210"/>
<line class="line" x1="70" y1="210" x2="220" y2="210"/>
<line class="line" x1="220" y1="210" x2="220" y2="250"/>
<!-- hdm-stuttgart -->
<g class="node">
<rect x="120" y="250" width="200" height="44"/>
<text x="220" y="278" text-anchor="middle">hdm-stuttgart</text>
</g>
<!-- Line hdm → www -->
<line class="line" x1="220" y1="294" x2="220" y2="340"/>
<!-- www -->
<g class="node leaf">
<rect x="170" y="340" width="100" height="44"/>
<text x="220" y="368" text-anchor="middle">www</text>
</g>
</svg>
</body>
</html>

BIN
slides/223015c/assets/demos/dns-tree.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 26 KiB

4
slides/223015c/assets/demos/encap-stack.html
View File

@@ -41,12 +41,12 @@
<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 class="layer-desc">Dest-Port: 52431 (Ihr 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 class="layer-desc">Dest-IP: 141.62.xxx.xxx (Ihr Laptop)</div>
</div>
<div class="arrow"></div>
<div class="layer eth">

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 52 KiB

2
slides/223015c/assets/demos/hop-chain.html
View File

@@ -46,7 +46,7 @@
</head>
<body>
<div class="chain">
<div class="node laptop">Dein Laptop</div>
<div class="node laptop">Ihr 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>

BIN
slides/223015c/assets/demos/hop-chain.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 41 KiB

2
slides/223015c/assets/demos/network-chain.html
View File

@@ -39,7 +39,7 @@
</head>
<body>
<div class="chain">
<div class="step you">Dein Browser</div>
<div class="step you">Ihr Browser</div>
<div class="arrow"></div>
<div class="step wire">Netzwerkkarte (WLAN / Ethernet)</div>
<div class="arrow"></div>

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 46 KiB

43
slides/223015c/assets/demos/port-highlight.html
View File

@@ -10,43 +10,48 @@
font-family: ui-monospace, "SF Mono", monospace;
font-size: 2.2rem;
color: #1a1a2e;
display: flex;
align-items: center;
}
.port-wrap {
display: inline-flex;
flex-direction: column;
align-items: center;
margin-left: 4px;
}
.port {
background: #fde68a;
color: #7c2d12;
padding: 2px 8px;
padding: 2px 10px;
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;
.connector {
width: 2px;
height: 10px;
height: 18px;
background: #c2410c;
margin-top: 4px;
}
.caption-text {
background: #fed7aa;
padding: 4px 10px;
padding: 6px 12px;
border-radius: 4px;
border-left: 3px solid #c2410c;
display: inline-block;
border: 2px solid #c2410c;
color: #7c2d12;
font-weight: 600;
font-size: 1rem;
font-family: system-ui, sans-serif;
margin-top: 2px;
}
</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>
<div class="line">
212.132.79.37:<div class="port-wrap">
<span class="port">443</span>
<div class="connector"></div>
<div class="caption-text">Port 443 = HTTPS</div>
</div>
</div>
</body>
</html>

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

2
slides/223015c/assets/demos/response-hops.html
View File

@@ -44,7 +44,7 @@
<div class="arrow"></div>
<div class="step hdm">Router HdM</div>
<div class="arrow"></div>
<div class="step laptop">Dein Laptop</div>
<div class="step laptop">Ihr Laptop</div>
</div>
</body>
</html>

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 29 KiB