add erklaerung slides after klausur slides in 223015c
- add section.erklaerung CSS class with pink theme styling - add 6 explanation slides to 01-geschichte-grundlagen-html.md - add 10 explanation slides to 02-netzwerke-protokolle-css.md - each slide includes definition, key points, and mnemonics
This commit is contained in:
libretech committed
1 parent
c35541961e
commit
64f4729f45
2 files changed
+447
No files matched your search
@@ -71,6 +71,33 @@ section.aufgabe footer {
|
||||
section.glossar {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
section.erklaerung {
|
||||
font-size: 1.1rem;
|
||||
background: linear-gradient(180deg, #fff8fa 0%, #fef0f4 100%) !important;
|
||||
border-left: 6px solid #a02060;
|
||||
}
|
||||
section.erklaerung h1 {
|
||||
font-size: 1.6rem;
|
||||
color: #a02060;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
section.erklaerung h2 {
|
||||
font-size: 1.3rem;
|
||||
color: #1f2937;
|
||||
margin-top: 0;
|
||||
}
|
||||
section.erklaerung ul,
|
||||
section.erklaerung ol {
|
||||
font-size: 1.0rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
section.erklaerung p {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
section.erklaerung table {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- _class: invert -->
|
||||
@@ -402,6 +429,29 @@ SPEAKER NOTES:
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: erklaerung -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# TCP/IP-Modell: Erklaerung
|
||||
|
||||
**Definition:** Das TCP/IP-Modell beschreibt die Kommunikation im Internet in vier hierarchischen Schichten.
|
||||
|
||||
| Schicht | Frage | Protokolle | Dateneinheit |
|
||||
|---------|-------|------------|--------------|
|
||||
| 4 Anwendung | Was will ich? | HTTP, DNS, SMTP | Daten |
|
||||
| 3 Transport | Kommt es an? | TCP, UDP | Segment |
|
||||
| 2 Internet | Welcher Rechner? | IP | Paket |
|
||||
| 1 Netzzugang | Wie zum Nachbarn? | Ethernet, WLAN | Frame |
|
||||
|
||||
**Kernprinzip:** Jede Schicht hat eine Aufgabe und kennt nur ihre Nachbarschichten.
|
||||
|
||||
**Encapsulation:** Jede Schicht verpackt die Daten der darueberliegenden Schicht mit eigenem Header.
|
||||
|
||||
**Merkhilfe Schichten:** "**A**lle **T**rinken **I**mmer **N**och" (Anwendung-Transport-Internet-Netzzugang)
|
||||
|
||||
---
|
||||
|
||||
# Schichten verpacken Daten
|
||||
|
||||
```
|
||||
@@ -461,6 +511,30 @@ SPEAKER NOTES:
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: erklaerung -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# Dateneinheiten: Erklaerung
|
||||
|
||||
**Definition:** Jede Schicht im TCP/IP-Modell hat eine eigene Bezeichnung fuer die Daten, die sie verarbeitet.
|
||||
|
||||
| Schicht | Dateneinheit | Was kommt hinzu? |
|
||||
|---------|--------------|------------------|
|
||||
| Anwendung | **Daten** (Message) | Anwendungsspezifische Infos |
|
||||
| Transport | **Segment** | Ports, Sequenznummern |
|
||||
| Internet | **Paket** | IP-Adressen (Quelle, Ziel) |
|
||||
| Netzzugang | **Frame** | MAC-Adressen, Pruefsumme |
|
||||
|
||||
**Encapsulation-Prozess:**
|
||||
```
|
||||
Daten → [TCP-Header + Daten] → [IP-Header + Segment] → [Eth-Header + Paket + Eth-Trailer]
|
||||
```
|
||||
|
||||
**Merkhilfe:** "**D**er **S**ache **P**raktischer **F**olgen" (Daten-Segment-Paket-Frame, von oben nach unten)
|
||||
|
||||
---
|
||||
|
||||
# Warum ist das clever?
|
||||
|
||||
**Ohne Schichten:**
|
||||
@@ -640,6 +714,29 @@ SPEAKER NOTES:
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: erklaerung -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# IP vs. MAC vs. Port: Erklaerung
|
||||
|
||||
**Definition:** Drei verschiedene Adresstypen fuer drei verschiedene Fragen im Netzwerk.
|
||||
|
||||
| Adresstyp | Frage | Reichweite | Aendert sich? |
|
||||
|-----------|-------|------------|---------------|
|
||||
| **IP-Adresse** | Welcher Rechner im Internet? | Global | Nein (Ziel bleibt) |
|
||||
| **MAC-Adresse** | Welches Geraet nebenan? | Lokal (1 Hop) | Ja, bei jedem Hop |
|
||||
| **Port** | Welches Programm? | Auf einem Rechner | Nein |
|
||||
|
||||
**Analogie Briefpost:**
|
||||
- **IP** = Empfaengeradresse auf dem Brief (bleibt gleich)
|
||||
- **MAC** = "Naechstes Postamt" (aendert sich bei jeder Station)
|
||||
- **Port** = Wohnungsnummer im Mehrfamilienhaus
|
||||
|
||||
**Merkhilfe:** "**I**P = **I**nternet-weit, **M**AC = **M**omentaner Nachbar, **P**ort = **P**rogramm"
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# Die Reise eines Klicks
|
||||
@@ -922,6 +1019,31 @@ SPEAKER NOTES:
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: erklaerung -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# 3-Way-Handshake: Erklaerung
|
||||
|
||||
**Definition:** Der TCP-Verbindungsaufbau in drei Schritten, bei dem Client und Server ihre Sequenznummern austauschen.
|
||||
|
||||
**Die drei Schritte:**
|
||||
1. **SYN** (Client → Server): "Ich will reden, starte bei Seq=1000"
|
||||
2. **SYN-ACK** (Server → Client): "OK, ich starte bei Seq=5000, erwarte 1001"
|
||||
3. **ACK** (Client → Server): "Verstanden, erwarte 5001 - los geht's!"
|
||||
|
||||
**Warum so kompliziert?**
|
||||
- Beide Seiten muessen **bereit** sein
|
||||
- Sequenznummern werden **synchronisiert** (daher SYN)
|
||||
- Verlorene Pakete koennen spaeter **erkannt und nachgefordert** werden
|
||||
|
||||
**Analogie Telefonat:**
|
||||
- Klingeln → Abheben → "Hallo?" → Gespraech beginnt
|
||||
|
||||
**Merkhilfe:** "**S**ag mir → **S**icher, **A**ntworte → **A**lles klar" (SYN → SYN-ACK → ACK)
|
||||
|
||||
---
|
||||
|
||||
# Nach dem Handshake
|
||||
|
||||
**Status:** Die TCP-Verbindung steht.
|
||||
@@ -1429,6 +1551,31 @@ SPEAKER NOTES:
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: erklaerung -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# TCP vs. UDP: Erklaerung
|
||||
|
||||
**Definition:** Die zwei Transport-Protokolle mit unterschiedlichen Garantien und Anwendungsfaellen.
|
||||
|
||||
| Eigenschaft | TCP | UDP |
|
||||
|-------------|-----|-----|
|
||||
| Verbindungsaufbau | Ja (3-Way-Handshake) | Nein |
|
||||
| Reihenfolge | Garantiert | Nicht garantiert |
|
||||
| Verlorene Pakete | Werden nachgefordert | Gehen verloren |
|
||||
| Geschwindigkeit | Langsamer (Overhead) | Schneller |
|
||||
|
||||
**Wann TCP?** Wenn **alles ankommen** muss:
|
||||
- Web (HTTP/HTTPS), E-Mail, Datei-Downloads
|
||||
|
||||
**Wann UDP?** Wenn **Geschwindigkeit** wichtiger ist als Vollstaendigkeit:
|
||||
- Video-Calls, Gaming, DNS, Streaming
|
||||
|
||||
**Merkhilfe:** "**T**CP = **T**otal **C**omplete **P**ackages" vs. "**U**DP = **U**nsicher, **D**afuer **P**rompt"
|
||||
|
||||
---
|
||||
|
||||
# Warum UDP bei Video-Calls?
|
||||
|
||||
**Szenario:** Ein Paket geht verloren.
|
||||
@@ -1508,6 +1655,30 @@ Das wird wichtiger, wenn ihr mit REST-APIs arbeitet.
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: erklaerung -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# HTTP-Methoden: Erklaerung
|
||||
|
||||
**Definition:** HTTP-Methoden beschreiben die gewuenschte Aktion auf einer Ressource.
|
||||
|
||||
| Methode | Bedeutung | Typischer Einsatz |
|
||||
|---------|-----------|-------------------|
|
||||
| **GET** | Daten abrufen | Webseite laden, Bild anzeigen |
|
||||
| **POST** | Daten senden | Formular absenden, Login |
|
||||
| **PUT** | Daten ersetzen | Profil komplett aktualisieren |
|
||||
| **PATCH** | Daten teilweise aendern | Einzelnes Feld aendern |
|
||||
| **DELETE** | Daten loeschen | Account loeschen |
|
||||
|
||||
**Idempotenz:** GET, PUT, DELETE koennen mehrfach ausgefuehrt werden mit gleichem Ergebnis. POST nicht (mehrfach absenden = mehrere Bestellungen).
|
||||
|
||||
**REST-APIs:** Nutzen diese Methoden systematisch fuer CRUD-Operationen (Create, Read, Update, Delete).
|
||||
|
||||
**Merkhilfe:** "**G**ib mir, **P**oste das, **P**latziere neu, **D**elete" (GET, POST, PUT, DELETE)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
@@ -1543,6 +1714,31 @@ Status-Codes sagen euch, was passiert ist.
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: erklaerung -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# HTTP Status-Codes: Erklaerung
|
||||
|
||||
**Definition:** Dreistellige Codes, die der Server zurueckgibt, um das Ergebnis einer Anfrage zu beschreiben.
|
||||
|
||||
| Bereich | Bedeutung | Wichtige Codes |
|
||||
|---------|-----------|----------------|
|
||||
| **2xx** | Erfolg | 200 OK, 201 Created, 204 No Content |
|
||||
| **3xx** | Umleitung | 301 Moved Permanently, 304 Not Modified |
|
||||
| **4xx** | Client-Fehler | 400 Bad Request, 403 Forbidden, 404 Not Found |
|
||||
| **5xx** | Server-Fehler | 500 Internal Error, 502 Bad Gateway, 503 Unavailable |
|
||||
|
||||
**Haeufigste Codes im Alltag:**
|
||||
- **200:** Alles OK, hier sind die Daten
|
||||
- **404:** Seite nicht gefunden (falsche URL)
|
||||
- **403:** Zugriff verweigert (keine Berechtigung)
|
||||
- **500:** Server hat einen Fehler (nicht eure Schuld)
|
||||
|
||||
**Merkhilfe:** "**2**=alles **g**ut, **3**=woanders, **4**=du Fehler, **5**=Server Fehler"
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
@@ -1579,6 +1775,34 @@ Wie Encapsulation funktioniert.
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: erklaerung -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# Netzwerke Zusammenfassung: Erklaerung
|
||||
|
||||
**Der Ablauf eines Webseitenaufrufs:**
|
||||
1. **DNS** (UDP:53): Domain → IP-Adresse aufloesen
|
||||
2. **TCP-Handshake:** SYN → SYN-ACK → ACK (Verbindung aufbauen)
|
||||
3. **HTTP-Request:** GET /index.html (Seite anfordern)
|
||||
4. **HTTP-Response:** 200 OK + HTML (Seite erhalten)
|
||||
|
||||
**Die 4 Schichten (TCP/IP):**
|
||||
|
||||
| Schicht | Protokolle | Dateneinheit |
|
||||
|---------|------------|--------------|
|
||||
| Anwendung | HTTP, DNS | Daten |
|
||||
| Transport | TCP, UDP | Segment |
|
||||
| Internet | IP | Paket |
|
||||
| Netzzugang | Ethernet | Frame |
|
||||
|
||||
**Merkhilfen:**
|
||||
- Schichten: "**A**lle **T**rinken **I**mmer **N**och"
|
||||
- Dateneinheiten: "**D**er **S**ache **P**raktischer **F**olgen"
|
||||
- IP bleibt gleich, MAC aendert sich bei jedem Hop
|
||||
|
||||
---
|
||||
|
||||
# Werkzeuge zum Selbst-Erkunden
|
||||
|
||||
**Im Browser (F12 → Network-Tab):**
|
||||
@@ -1870,6 +2094,33 @@ Inline-Styles schlagen alles – außer !important, was ihr vermeiden solltet.
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: erklaerung -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# CSS Spezifitaet: Erklaerung
|
||||
|
||||
**Definition:** Spezifitaet bestimmt, welche CSS-Regel gewinnt, wenn mehrere Regeln auf dasselbe Element zutreffen.
|
||||
|
||||
**Spezifitaet als 4-stellige Zahl (a,b,c,d):**
|
||||
|
||||
| Kategorie | Gewicht | Beispiel |
|
||||
|-----------|---------|----------|
|
||||
| **a:** Inline-Style | 1,0,0,0 | `style="..."` |
|
||||
| **b:** ID | 0,1,0,0 | `#header` |
|
||||
| **c:** Klasse, Attribut, Pseudo-Klasse | 0,0,1,0 | `.wichtig`, `:hover` |
|
||||
| **d:** Element, Pseudo-Element | 0,0,0,1 | `p`, `::before` |
|
||||
|
||||
**Vergleich:** Von links nach rechts, hoehere Zahl gewinnt.
|
||||
- 0,1,0,0 > 0,0,99,99 (eine ID schlaegt beliebig viele Klassen)
|
||||
|
||||
**Praktische Tipps:**
|
||||
- Vermeide IDs in CSS (zu spezifisch)
|
||||
- Vermeide `!important` (bricht das System)
|
||||
- Nutze Klassen fuer wiederverwendbare Styles
|
||||
|
||||
---
|
||||
|
||||
# Box-Modell
|
||||
|
||||
```
|
||||
@@ -2117,6 +2368,39 @@ Das Gegenteil wäre Desktop First mit max-width – aber Mobile First ist heute
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: erklaerung -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# Responsive Design: Erklaerung
|
||||
|
||||
**Definition:** Webseiten passen sich automatisch an verschiedene Bildschirmgroessen an (Desktop, Tablet, Smartphone).
|
||||
|
||||
**Mobile First Ansatz:**
|
||||
1. Basis-CSS fuer kleine Bildschirme schreiben
|
||||
2. Mit `@media (min-width: ...)` fuer groessere Bildschirme erweitern
|
||||
|
||||
```css
|
||||
/* Basis (Mobile) */
|
||||
.container { padding: 1rem; }
|
||||
|
||||
/* Ab 768px (Tablet) */
|
||||
@media (min-width: 768px) { .container { padding: 2rem; } }
|
||||
|
||||
/* Ab 1024px (Desktop) */
|
||||
@media (min-width: 1024px) { .container { max-width: 1200px; } }
|
||||
```
|
||||
|
||||
**Typische Breakpoints:**
|
||||
- **576px:** Kleine Smartphones
|
||||
- **768px:** Tablets
|
||||
- **1024px:** Desktop
|
||||
- **1200px:** Grosse Bildschirme
|
||||
|
||||
**Merkhilfe:** "Mobile First" = Basis klein, dann groesser werden
|
||||
|
||||
---
|
||||
|
||||
# Zusammenfassung CSS
|
||||
|
||||
**Selektoren:**
|
||||
|
||||
Reference in new issue
Block a user