223015c 02 + dhbw 01: klausurfolien markiert, prosa-sätze bei allen tabellen, layout-fixes
223015c/02: - glossar landkarte: klausur, prosa, reihenfolge (host→client→server→req→res→protokoll), tcp/http als beispiel - glossar adressen/daten/eigenschaften/protokolle: prosa-sätze - tcp/ip-modell: nichtssagenden satz ersetzt - dateneinheiten: merkhilfe durch prosa ersetzt - osi vs tcp/ip: bg right statt h:440, prosa statt einzeiler - port: tabelle→liste, prosa statt bullets - ip vs mac vs port: prosa - tcp vs udp, http-methoden, status-codes, einheiten: prosa - selektoren id + farben: klausur markiert - farben: mdn-link, prosa-satz dhbw/01: - farben: prosa-satz synchronisiert - über-mich: collage-bild hinzugefügt
This commit is contained in:
@@ -188,18 +188,23 @@ SPEAKER NOTES:
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: glossar -->
|
||||
<!-- _class: glossar klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _backgroundColor: #e3f2fd -->
|
||||
|
||||
# Glossar: Die Landkarte
|
||||
|
||||
Das Web folgt dem **Client-Server-Modell**: Ein Client (Browser) sendet einen **Request**, ein Server liefert eine **Response** – nach den Regeln eines **Protokolls**.
|
||||
|
||||
| Begriff | Was ist das? | Analogie |
|
||||
|---------|--------------|----------|
|
||||
| **Host** | Ein Rechner im Netz | Ein Haus mit Adresse |
|
||||
| **Client** | Der, der fragt (Browser) | Gast im Restaurant |
|
||||
| **Server** | Der, der antwortet | Küche im Restaurant |
|
||||
| **Request** | Die Anfrage | Bestellung |
|
||||
| **Response** | Die Antwort | Das Essen |
|
||||
| **Protokoll** | Regeln für Kommunikation | Speisekarte + Bestellablauf |
|
||||
| **Host** | Ein Rechner im Netz | Ein Haus mit Adresse |
|
||||
| **Protokoll** | Regeln für Kommunikation (z. B. TCP, HTTP) | Speisekarte + Bestellablauf |
|
||||
|
||||
<!--
|
||||
SPEAKER NOTES:
|
||||
@@ -219,6 +224,8 @@ SPEAKER NOTES:
|
||||
|
||||
# Glossar: Adressen & Identitäten
|
||||
|
||||
Jedes Gerät im Netz braucht Adressen: eine **IP** für das globale Routing, eine **MAC** für das lokale Netz und einen **Port** für das richtige Programm.
|
||||
|
||||
| Begriff | Was ist das? | Beispiel |
|
||||
|---------|--------------|----------|
|
||||
| **IP-Adresse** | Globale Adresse im Internet | `212.132.79.37` |
|
||||
@@ -244,6 +251,8 @@ SPEAKER NOTES:
|
||||
|
||||
# Glossar: Daten unterwegs
|
||||
|
||||
Daten werden Schicht für Schicht verpackt — jede Schicht fügt einen eigenen **Header** hinzu und erzeugt so eine neue Dateneinheit.
|
||||
|
||||
| Begriff | Was ist das? | Schicht |
|
||||
|---------|--------------|---------|
|
||||
| **Paket** | Daten + IP-Header | Internet (Layer 3) |
|
||||
@@ -268,6 +277,8 @@ SPEAKER NOTES:
|
||||
|
||||
# Glossar: Netzwerk-Eigenschaften
|
||||
|
||||
**Latenz** und **Bandbreite** bestimmen, wie schnell Daten ankommen — Latenz misst die Verzögerung, Bandbreite die Kapazität.
|
||||
|
||||
| Begriff | Was ist das? | Einheit |
|
||||
|---------|--------------|---------|
|
||||
| **Latenz** | Verzögerung (hin + zurück) | Millisekunden |
|
||||
@@ -296,6 +307,8 @@ SPEAKER NOTES:
|
||||
|
||||
# Glossar: Protokolle
|
||||
|
||||
Protokolle regeln die Kommunikation auf jeder Schicht — von der Anwendung (HTTP) über den Transport (TCP/UDP) bis zum Routing (IP).
|
||||
|
||||
| Protokoll | Wofür? | Port | Schicht |
|
||||
|-----------|--------|------|---------|
|
||||
| **HTTP** | Webseiten übertragen | 80 | Anwendung |
|
||||
@@ -396,7 +409,7 @@ SPEAKER NOTES:
|
||||
| **2** | Internet | Routing, globale Adressen | IP |
|
||||
| **1** | Netzzugang | Lokale Übertragung | Ethernet, WLAN |
|
||||
|
||||
**4 Schichten. Das reicht, um das Internet zu verstehen.**
|
||||
Jede Schicht hat genau eine Aufgabe und nutzt nur die Schicht direkt darunter.
|
||||
|
||||
<!--
|
||||
SPEAKER NOTES:
|
||||
@@ -466,8 +479,7 @@ SPEAKER NOTES:
|
||||
| Internet | IP | **Paket** | IP-Adressen |
|
||||
| Netzzugang | Ethernet | **Frame** | MAC-Adressen, Prüfsumme |
|
||||
|
||||
Merkhilfe: **D**aten → **S**egment → **P**aket → **F**rame
|
||||
(„**D**er **S**ache **P**raktischer **F**olgen")
|
||||
Beim Senden wandern Daten von oben nach unten — jede Schicht verpackt die darüberliegende Einheit mit einem eigenen Header.
|
||||
|
||||
<!--
|
||||
SPEAKER NOTES:
|
||||
@@ -535,9 +547,9 @@ SPEAKER NOTES:
|
||||
|
||||
# Exkurs: OSI vs. TCP/IP
|
||||
|
||||
|
||||
|
||||
|
||||
OSI = Theorie. TCP/IP = Realität.
|
||||
OSI (7 Schichten) ist ein theoretisches Referenzmodell — TCP/IP (4 Schichten) beschreibt das reale Internet.
|
||||
|
||||
<!--
|
||||
SPEAKER NOTES:
|
||||
@@ -615,18 +627,14 @@ SPEAKER NOTES:
|
||||
|
||||
# Port: Das richtige Programm
|
||||
|
||||
|
||||
|
||||
|
||||
- Identifiziert ein **Programm** auf einem Rechner
|
||||
- Ein Rechner, viele Dienste
|
||||
- Analogie: **Wohnungstür im Mehrfamilienhaus**
|
||||
Ein Port identifiziert ein **Programm** auf einem Rechner — wie eine **Wohnungstür im Mehrfamilienhaus**.
|
||||
|
||||
| Port | Dienst |
|
||||
|------|--------|
|
||||
| 80 | HTTP |
|
||||
| 443 | HTTPS |
|
||||
| 22 | SSH |
|
||||
| 53 | DNS |
|
||||
- **80** → HTTP
|
||||
- **443** → HTTPS
|
||||
- **22** → SSH
|
||||
- **53** → DNS
|
||||
|
||||
<!--
|
||||
SPEAKER NOTES:
|
||||
@@ -645,6 +653,8 @@ SPEAKER NOTES:
|
||||
|
||||
# IP vs. MAC vs. Port
|
||||
|
||||
Drei Adresstypen arbeiten zusammen — nur die **MAC-Adresse** ändert sich unterwegs, IP und Port bleiben auf dem gesamten Weg gleich.
|
||||
|
||||
| | IP-Adresse | MAC-Adresse | Port |
|
||||
|---|-----------|-------------|------|
|
||||
| **Frage** | Welcher Rechner? | Welches Gerät nebenan? | Welches Programm? |
|
||||
@@ -1354,6 +1364,8 @@ SPEAKER NOTES:
|
||||
|
||||
# TCP vs. UDP
|
||||
|
||||
TCP und UDP sind beides Transport-Protokolle — TCP garantiert Vollständigkeit, UDP setzt auf Geschwindigkeit.
|
||||
|
||||
| | TCP | UDP |
|
||||
|---|-----|-----|
|
||||
| **Verbindung** | Ja (Handshake) | Nein |
|
||||
@@ -1455,6 +1467,8 @@ SPEAKER NOTES:
|
||||
|
||||
# HTTP-Methoden
|
||||
|
||||
HTTP-Methoden beschreiben, **was** der Client mit einer Ressource tun will.
|
||||
|
||||
| Methode | Bedeutung | Beispiel |
|
||||
|---------|-----------|----------|
|
||||
| **GET** | Daten abrufen | Seite laden |
|
||||
@@ -1516,6 +1530,8 @@ POST /users → Neuen Benutzer erstellen
|
||||
|
||||
# HTTP Status-Codes
|
||||
|
||||
Jede HTTP-Response enthält einen dreistelligen Status-Code — die erste Ziffer verrät die Kategorie.
|
||||
|
||||
```http
|
||||
HTTP/1.1 200 OK
|
||||
HTTP/1.1 404 Not Found
|
||||
@@ -1837,6 +1853,11 @@ Eine Klasse kann auf beliebig viele Elemente angewendet werden. Ein Element kann
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _backgroundColor: #e3f2fd -->
|
||||
|
||||
# Selektoren: ID
|
||||
|
||||
|
||||
@@ -2029,10 +2050,17 @@ Best Practice: Setzt das global für alle Elemente.
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _backgroundColor: #e3f2fd -->
|
||||
|
||||
# Farben
|
||||
|
||||
|
||||
|
||||
CSS kennt fünf Notationen für Farben: **Keyword**, **Hex**, **RGB**, **RGBA** (mit Transparenz) und **HSL**.
|
||||
|
||||
```css
|
||||
/* Keyword */
|
||||
color: red;
|
||||
@@ -2050,6 +2078,8 @@ color: rgba(255, 0, 0, 0.5);
|
||||
color: hsl(0, 100%, 50%);
|
||||
```
|
||||
|
||||
MDN-Referenz: [CSS `<color>`](https://developer.mozilla.org/de/docs/Web/CSS/Reference/Values/color_value)
|
||||
|
||||
<!--
|
||||
SPEAKER NOTES:
|
||||
|
||||
@@ -2070,6 +2100,8 @@ HSL: Hue, Saturation, Lightness. Manchmal intuitiver für Farbanpassungen.
|
||||
|
||||
# Einheiten
|
||||
|
||||
CSS-Einheiten bestimmen, ob Größen **absolut** (px) oder **relativ** zum Kontext (rem, %, vw) berechnet werden.
|
||||
|
||||
| Einheit | Bedeutung |
|
||||
|---------|-----------|
|
||||
| `px` | Pixel (absolut) |
|
||||
|
||||
Reference in New Issue
Block a user