replace ascii: encap layers, timeline, dns lookup sequence, hop chain
This commit is contained in:
129
slides/223015c/assets/demos/dns-lookup.html
Normal file
129
slides/223015c/assets/demos/dns-lookup.html
Normal 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>
|
||||
BIN
slides/223015c/assets/demos/dns-lookup.png
Normal file
BIN
slides/223015c/assets/demos/dns-lookup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
77
slides/223015c/assets/demos/encap-layers.html
Normal file
77
slides/223015c/assets/demos/encap-layers.html
Normal 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>
|
||||
BIN
slides/223015c/assets/demos/encap-layers.png
Normal file
BIN
slides/223015c/assets/demos/encap-layers.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
60
slides/223015c/assets/demos/hop-chain.html
Normal file
60
slides/223015c/assets/demos/hop-chain.html
Normal 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>
|
||||
BIN
slides/223015c/assets/demos/hop-chain.png
Normal file
BIN
slides/223015c/assets/demos/hop-chain.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
90
slides/223015c/assets/demos/timeline.html
Normal file
90
slides/223015c/assets/demos/timeline.html
Normal file
@@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Zeitlinie</title>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
|
||||
body { padding: 30px; display: inline-block; }
|
||||
.timeline { position: relative; padding-left: 120px; }
|
||||
.timeline::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 110px;
|
||||
top: 12px; bottom: 12px;
|
||||
width: 3px;
|
||||
background: #d63384;
|
||||
}
|
||||
.event { position: relative; margin-bottom: 14px; }
|
||||
.time {
|
||||
position: absolute;
|
||||
left: -118px;
|
||||
top: 0;
|
||||
width: 90px;
|
||||
text-align: right;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
color: #7c2d12;
|
||||
}
|
||||
.dot {
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 6px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #d63384;
|
||||
border: 3px solid #fff;
|
||||
box-shadow: 0 0 0 2px #d63384;
|
||||
}
|
||||
.desc {
|
||||
padding: 6px 14px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 4px;
|
||||
border-left: 3px solid #d63384;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.desc b { color: #1a1a2e; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="timeline">
|
||||
<div class="event">
|
||||
<div class="time">0 ms</div>
|
||||
<div class="dot"></div>
|
||||
<div class="desc"><b>DNS:</b> "Welche IP hat www.hdm-stuttgart.de?"</div>
|
||||
</div>
|
||||
<div class="event">
|
||||
<div class="time">~20 ms</div>
|
||||
<div class="dot"></div>
|
||||
<div class="desc"><b>DNS-Antwort:</b> "212.132.79.37"</div>
|
||||
</div>
|
||||
<div class="event">
|
||||
<div class="time">~25 ms</div>
|
||||
<div class="dot"></div>
|
||||
<div class="desc"><b>TCP-Handshake</b> beginnt</div>
|
||||
</div>
|
||||
<div class="event">
|
||||
<div class="time">~50 ms</div>
|
||||
<div class="dot"></div>
|
||||
<div class="desc"><b>TCP-Verbindung</b> steht</div>
|
||||
</div>
|
||||
<div class="event">
|
||||
<div class="time">~55 ms</div>
|
||||
<div class="dot"></div>
|
||||
<div class="desc"><b>HTTP-Request:</b> "GET /index.html"</div>
|
||||
</div>
|
||||
<div class="event">
|
||||
<div class="time">~150 ms</div>
|
||||
<div class="dot"></div>
|
||||
<div class="desc"><b>HTTP-Response:</b> HTML kommt zurück</div>
|
||||
</div>
|
||||
<div class="event">
|
||||
<div class="time">~200 ms</div>
|
||||
<div class="dot"></div>
|
||||
<div class="desc"><b>Browser rendert</b> die Seite</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
slides/223015c/assets/demos/timeline.png
Normal file
BIN
slides/223015c/assets/demos/timeline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
Reference in New Issue
Block a user