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

replace ascii osi/tcpip layer diagram with rendered visual

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-20 11:06:16 +02:00
parent b3c0994b7e
commit 76f7ff3a46
3 changed files with 55 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -73,13 +73,13 @@ section.glossar {
}
section.erklaerung {
font-size: 1.1rem;
background: repeating-linear-gradient(
/**background: repeating-linear-gradient(
135deg,
#fce4ec,
#fce4ec 40px,
#fff 40px,
#fff 80px
) !important;
) !important;**/
}
@media print {
section.erklaerung {
@@ -571,24 +571,7 @@ SPEAKER NOTES:
# Exkurs: OSI vs. TCP/IP
```
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 │ │ │
└─────────────────────┘ └─────────────────────┘
```
![h:440 center](./assets/demos/osi-tcpip-diagram.png)
OSI = Theorie. TCP/IP = Realität.
@@ -2381,9 +2364,6 @@ Doppelpunkt zur Unterscheidung von Pseudo-Klassen – aber einfacher Doppelpunkt
![bg right:35%](./assets/demos/css-responsive.png)
![bg right:35%](./assets/demos/css-responsive.png)
```css
/* Mobile First: Basis-Styles */
.container {
@@ -2395,7 +2375,6 @@ Doppelpunkt zur Unterscheidung von Pseudo-Klassen – aber einfacher Doppelpunkt
.container {
padding: 2rem;
background: red;
background: red;
}
}
/* Ab 1024px (Desktop): Weitere Anpassungen */
@@ -2403,7 +2382,6 @@ Doppelpunkt zur Unterscheidung von Pseudo-Klassen – aber einfacher Doppelpunkt
.container {
background: green;
}
}
}
```

52
slides/223015c/assets/demos/osi-tcpip-diagram.html Normal file
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>

BIN
slides/223015c/assets/demos/osi-tcpip-diagram.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB