restructure 223015c slides: move a11y to termin-1, reorganize termin-2
termin-1: - add accessibility (a11y) section with wcag principles termin-2: - move dns section earlier (before osi/tcp-ip theory) - reorganize network fundamentals flow - remove a11y section (moved to termin-1) - update osi merksatz to "dualen"
This commit is contained in:
@@ -1276,8 +1276,238 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input
|
||||
|
||||
https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# "Barrierefreiheit"
|
||||
## a11y – Accessibility
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
|
||||
# Wie nutzen Menschen das Web?
|
||||
|
||||
| Eingabe | Nutzungsweise |
|
||||
|---------|---------------|
|
||||
| **Maus** | Klicken, Scrollen |
|
||||
| **Tastatur** | Tab-Navigation, Enter, Pfeiltasten |
|
||||
| **Screenreader** | Vorlesen von Inhalten (NVDA, VoiceOver, JAWS) |
|
||||
| **Sprachsteuerung** | "Klicke auf Anmelden" |
|
||||
| **Augensteuerung** | Eye-Tracking |
|
||||
| **Switch-Geräte** | Ein-/Aus-Schalter |
|
||||
|
||||
→ **Nicht alle nutzen Maus + Bildschirm!**
|
||||
|
||||
<!--
|
||||
ACCESSIBILITY (a11y): a + 11 Buchstaben + y
|
||||
STATISTIK: ~15% der Weltbevölkerung haben eine Behinderung (WHO)
|
||||
ARTEN VON EINSCHRÄNKUNGEN:
|
||||
- Permanent: Blindheit, Taubheit, motorische Einschränkungen
|
||||
- Temporär: Gebrochener Arm, Augen-OP, Ohrenentzündung
|
||||
- Situativ: Helle Sonne (Kontrast), laute Umgebung (kein Audio), Baby auf Arm (eine Hand)
|
||||
ASSISTIVE TECHNOLOGIEN:
|
||||
- Screenreader: NVDA (Windows, kostenlos), VoiceOver (Apple), JAWS (kommerziell)
|
||||
- Braillezeilen: Taktile Ausgabe für Blinde
|
||||
- Switch-Geräte: Für motorische Einschränkungen
|
||||
- Spracheingabe: Dragon NaturallySpeaking, Siri, Google Assistant
|
||||
WCAG: Web Content Accessibility Guidelines (A, AA, AAA)
|
||||
EUROPEAN ACCESSIBILITY ACT: Seit Juni 2025 verpflichtend!
|
||||
PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
|
||||
# Warum "Barrierefreiheit"?
|
||||
|
||||
**Rechtlich:**
|
||||
- EU: European Accessibility Act (seit Juni 2025 in Kraft!)
|
||||
- DE: BITV 2.0 (Behörden), Privatwirtschaft betroffen
|
||||
|
||||
**Ethisch:**
|
||||
- Teilhabe für alle Menschen
|
||||
- Digitale Inklusion
|
||||
|
||||
**Praktisch:**
|
||||
- Bessere UX für **alle** (SEO, Mobile, ältere Menschen)
|
||||
- Größerer Markt (~15% der Bevölkerung)
|
||||
|
||||
<!--
|
||||
RECHTLICHER RAHMEN:
|
||||
- European Accessibility Act (EAA): EU-Richtlinie, seit 28. Juni 2025 in Kraft
|
||||
- Betrifft: E-Commerce, Banking, Telekommunikation, Transport, E-Books
|
||||
- BITV 2.0: Barrierefreie Informationstechnik-Verordnung (DE, öffentliche Stellen)
|
||||
- BFSG: Barrierefreiheitsstärkungsgesetz (DE-Umsetzung des EAA)
|
||||
- Strafen: Bis zu 100.000€ Bußgeld möglich
|
||||
CURB-CUT-EFFEKT:
|
||||
- Bordsteinabsenkung für Rollstuhlfahrer → hilft auch Kinderwagen, Rollkoffern, Fahrrädern
|
||||
- Untertitel für Gehörlose → helfen in lauter Umgebung, beim Sprachlernen
|
||||
- Kontrastreiche Farben → besser bei Sonnenlicht, für ältere Menschen
|
||||
BUSINESS CASE:
|
||||
- 15% Zielgruppe (Menschen mit Behinderung)
|
||||
- +20% ältere Menschen (Sehschwäche, motorische Einschränkungen)
|
||||
- SEO-Vorteile: Alt-Texte, semantisches HTML = besser für Google
|
||||
PRÜFUNGSRELEVANT: EAA kennen, Curb-Cut-Effekt erklären können, Business Case
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# WCAG: Der Standard
|
||||
|
||||
**W**eb **C**ontent **A**ccessibility **G**uidelines
|
||||
|
||||
**4 Prinzipien (POUR):**
|
||||
|
||||
| Prinzip | Bedeutung |
|
||||
|---------|-----------|
|
||||
| **Perceivable** | Wahrnehmbar – Inhalte müssen erkennbar sein |
|
||||
| **Operable** | Bedienbar – Funktionen müssen nutzbar sein |
|
||||
| **Understandable** | Verständlich – Inhalte müssen klar sein |
|
||||
| **Robust** | Robust – Funktioniert mit verschiedenen Technologien |
|
||||
|
||||
<!--
|
||||
WCAG vom W3C (World Wide Web Consortium)
|
||||
Aktuelle Version: WCAG 2.2 (2023)
|
||||
Level: A (minimal), AA (Standard), AAA (optimal)
|
||||
Gesetzlich meist Level AA gefordert
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Perceivable: Wahrnehmbar
|
||||
|
||||
**Textalternativen für Nicht-Text:**
|
||||
```html
|
||||
<img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024">
|
||||
```
|
||||
|
||||
**Kontrast:** Mindestens 4.5:1 für Text
|
||||
|
||||
**Untertitel:** Videos brauchen Captions
|
||||
|
||||
**Responsive:** Inhalte bei 200% Zoom nutzbar
|
||||
|
||||
<!--
|
||||
Leeres alt="" für dekorative Bilder
|
||||
Contrast-Checker: WebAIM Contrast Checker
|
||||
Captions ≠ Untertitel (Captions = auch Geräusche beschrieben)
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Operable: Bedienbar
|
||||
|
||||
**Tastaturzugänglich:**
|
||||
```css
|
||||
/* Fokus-Indikator NIE entfernen! */
|
||||
:focus {
|
||||
outline: 2px solid blue;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Wenn custom styling: */
|
||||
button:focus-visible {
|
||||
box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
|
||||
}
|
||||
```
|
||||
|
||||
**Genug Zeit:** Keine automatischen Timeouts ohne Warnung
|
||||
|
||||
**Keine Blitze:** Nichts blinkt mehr als 3x pro Sekunde
|
||||
|
||||
<!--
|
||||
Tab-Reihenfolge = DOM-Reihenfolge
|
||||
Skip-Links: "Zum Hauptinhalt springen"
|
||||
:focus-visible = nur bei Tastatur-Navigation
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Understandable: Verständlich
|
||||
|
||||
**Sprache angeben:**
|
||||
```html
|
||||
<html lang="de">
|
||||
```
|
||||
|
||||
**Konsistente Navigation:** Gleiche Elemente an gleicher Stelle
|
||||
|
||||
**Fehler erklären:**
|
||||
```html
|
||||
<input type="email" aria-describedby="email-error">
|
||||
<p id="email-error" role="alert">
|
||||
Bitte geben Sie eine gültige E-Mail-Adresse ein.
|
||||
</p>
|
||||
```
|
||||
|
||||
<!--
|
||||
Screenreader nutzen lang für korrekte Aussprache
|
||||
Konsistenz reduziert kognitive Last
|
||||
Fehlermeldungen: konkret, hilfreich, am Feld
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Robust: Technisch solide
|
||||
|
||||
**Semantisches HTML:**
|
||||
```html
|
||||
<!-- Schlecht -->
|
||||
<div class="button" onclick="...">Klick mich</div>
|
||||
|
||||
<!-- Gut -->
|
||||
<button type="button">Klick mich</button>
|
||||
```
|
||||
|
||||
**ARIA nur wenn nötig:**
|
||||
```html
|
||||
<!-- Nötig: Custom-Komponente -->
|
||||
<div role="tablist" aria-label="Produktkategorien">
|
||||
<button role="tab" aria-selected="true">Schuhe</button>
|
||||
<button role="tab" aria-selected="false">Jacken</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
<!--
|
||||
ARIA = Accessible Rich Internet Applications
|
||||
Erste Regel von ARIA: Wenn möglich, natives HTML nutzen!
|
||||
button hat eingebaute Tastatur-Unterstützung
|
||||
div-Button braucht JavaScript für Enter/Space
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
|
||||
# Barrieren im Netz vermeiden (a11y)
|
||||
|
||||
**Tastatur-Test:**
|
||||
- Alle Funktionen nur mit Tab + Enter nutzbar?
|
||||
- Fokus immer sichtbar?
|
||||
- Logische Tab-Reihenfolge?
|
||||
|
||||
**Screenreader-Test:**
|
||||
- VoiceOver (Mac): `Cmd + F5`
|
||||
- NVDA (Windows): Gratis-Download
|
||||
|
||||
**Tools:**
|
||||
- axe DevTools, WAVE (Browser-Extensions)
|
||||
- Lighthouse (in Chrome DevTools)
|
||||
|
||||
<!--
|
||||
Automatische Tests finden ~30% der Probleme
|
||||
Manuelles Testen unverzichtbar
|
||||
Echte NutzerInnen einbeziehen = Gold-Standard
|
||||
-->
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# Fragen & Diskussion
|
||||
|
||||
@@ -129,17 +129,17 @@ Hochschule der Medien Stuttgart
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# Teil 1: Rechner verbinden
|
||||
## Netzwerk-Grundlagen
|
||||
# Teil 1: Grundbegriffe
|
||||
## Netzwerk und Internet
|
||||
|
||||
---
|
||||
|
||||
# Warum Rechner verbinden?
|
||||
|
||||
- Daten und Informationen teilen
|
||||
- Zusammenarbeiten & Kollaboration
|
||||
- Kommunizieren
|
||||
- Ressourcen teilen (Drucker, Speicher, andere Geräte)
|
||||
* Daten und Informationen teilen
|
||||
* Zusammenarbeiten & Kollaboration
|
||||
* Ressourcen teilen (Drucker, Speicher, andere Geräte)
|
||||
* **Kommunikation**
|
||||
|
||||
---
|
||||
|
||||
@@ -158,72 +158,6 @@ Internet nutzt beides: TCP = verbindungsorientiert, UDP = verbindungslos
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
|
||||
# Das OSI-Modell
|
||||
|
||||
**7 Schichten der Netzwerkkommunikation:**
|
||||
|
||||
| Schicht | Name | Beispiel |
|
||||
|---------|------|----------|
|
||||
| 7 | Anwendung | HTTP, FTP, SMTP |
|
||||
| 6 | Darstellung | Verschlüsselung, Kompression |
|
||||
| 5 | Sitzung | Sessions |
|
||||
| 4 | Transport | TCP, UDP |
|
||||
| 3 | Vermittlung | IP, Routing |
|
||||
| 2 | Sicherung | Ethernet, MAC |
|
||||
| 1 | Bitübertragung | Kabel, WLAN |
|
||||
|
||||
<!--
|
||||
OSI-MODELL: Open Systems Interconnection (1984, ISO 7498)
|
||||
ZWECK: Standardisierte Beschreibung von Netzwerkkommunikation
|
||||
7 SCHICHTEN (von unten nach oben):
|
||||
1. Physical: Bits über Kabel/Funk (Ethernet-Kabel, WLAN-Frequenzen)
|
||||
2. Data Link: Frames, MAC-Adressen (Ethernet, Switch)
|
||||
3. Network: Pakete, IP-Adressen, Routing (Router)
|
||||
4. Transport: Segmente, Ports, Zuverlässigkeit (TCP/UDP)
|
||||
5. Session: Verbindungsmanagement (selten separat implementiert)
|
||||
6. Presentation: Datenformat, Verschlüsselung (TLS gehört hierher)
|
||||
7. Application: Nutzer-Protokolle (HTTP, SMTP, FTP)
|
||||
MERKSATZ: "Please Do Not Throw Salami Pizza Away" (Physical→Application)
|
||||
REALITÄT: OSI ist Theorie, TCP/IP ist Praxis (fasst Schichten zusammen)
|
||||
PRÜFUNGSRELEVANT: 7 Schichten mit Beispielen, Unterschied OSI vs. TCP/IP
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
|
||||
# TCP/IP: Die Praxis
|
||||
|
||||
**Das Internet nutzt TCP/IP (4 Schichten):**
|
||||
|
||||
| TCP/IP | Entspricht OSI | Protokolle |
|
||||
|--------|----------------|------------|
|
||||
| Anwendung | 5-7 | HTTP, DNS, SMTP |
|
||||
| Transport | 4 | TCP, UDP |
|
||||
| Internet | 3 | IP |
|
||||
| Netzzugang | 1-2 | Ethernet, WLAN |
|
||||
|
||||
**TCP/IP = Transmission Control Protocol / Internet Protocol**
|
||||
|
||||
<!--
|
||||
TCP/IP-STACK: Praktische Implementierung des Internets
|
||||
4 SCHICHTEN statt 7:
|
||||
1. Network Access (OSI 1-2): Ethernet, WLAN, physische Übertragung
|
||||
2. Internet (OSI 3): IP-Protokoll, Routing, Adressierung
|
||||
3. Transport (OSI 4): TCP (zuverlässig) oder UDP (schnell)
|
||||
4. Application (OSI 5-7): HTTP, DNS, SMTP, SSH
|
||||
TCP vs. UDP:
|
||||
- TCP: Verbindungsorientiert, garantierte Zustellung, Reihenfolge (Web, E-Mail)
|
||||
- UDP: Verbindungslos, schneller, keine Garantie (Video-Streaming, Gaming, DNS)
|
||||
IP-PROTOKOLL: Adressierung + Routing, "Best Effort" (keine Garantie)
|
||||
ENTSTEHUNG: ARPANET 1969, TCP/IP 1983 (Flag Day)
|
||||
PRÜFUNGSRELEVANT: 4 Schichten, TCP vs. UDP Unterschied, wann welches Protokoll
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# IP-Adressen
|
||||
|
||||
**Jeder Rechner im Netzwerk braucht eine Adresse**
|
||||
@@ -254,9 +188,6 @@ NAT = Network Address Translation
|
||||
| `192.168.x.x` | Private Adressen (Heimnetz) |
|
||||
| `10.x.x.x` | Private Adressen (Firmen) |
|
||||
|
||||
**Localhost = "Ich selbst"**
|
||||
→ Perfekt für Web-Entwicklung!
|
||||
|
||||
<!--
|
||||
Localhost für lokale Entwicklung
|
||||
Private IPs werden nicht im Internet geroutet
|
||||
@@ -308,32 +239,198 @@ Pakete können verschiedene Wege nehmen
|
||||
Adaptives Routing bei Auslastung
|
||||
-->
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# Teil 1: Netzwerke
|
||||
## Wie Daten reisen
|
||||
# DNS: Domain Name System
|
||||
## Das Telefonbuch des Internets
|
||||
|
||||
---
|
||||
|
||||
# Wiederholung: OSI-Modell
|
||||
# Das Problem
|
||||
|
||||
**Merksatz:** "**A**lle **d**eutschen **S**tudierenden **t**rinken **v**erschiedene **S**orten **B**ier/Brause"
|
||||
**Menschen:** `www.hdm-stuttgart.de`
|
||||
**Computer:** `https://212.132.79.37:443`
|
||||
|
||||
| Schicht | Name | Merksatz |
|
||||
|---------|------|----------|
|
||||
| 7 | **A**nwendung | **A**lle |
|
||||
| 6 | **D**arstellung | **d**eutschen |
|
||||
| 5 | **S**itzung | **S**tudierenden |
|
||||
| 4 | **T**ransport | **t**rinken |
|
||||
| 3 | **V**ermittlung | **v**erschiedene |
|
||||
| 2 | **S**icherung | **S**orten |
|
||||
| 1 | **B**itübertragung | **B**ier/Brause |
|
||||
**DNS** = Domain Name System
|
||||
→ Übersetzt Namen in IP-Adressen
|
||||
|
||||
<!--
|
||||
Von oben nach unten: 7 bis 1
|
||||
Merksatz hilft beim Behalten
|
||||
Niemand merkt sich IP-Adressen
|
||||
DNS macht Internet benutzbar
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# DNS-Hierarchie
|
||||
|
||||
```
|
||||
(Root)
|
||||
.
|
||||
/ | \
|
||||
/ | \
|
||||
.de .org .com
|
||||
/ \
|
||||
hdm-stuttgart google
|
||||
| |
|
||||
www mail
|
||||
```
|
||||
|
||||
**FQDN:** `www.hdm-stuttgart.de.` (mit Punkt am Ende!)
|
||||
|
||||
<!--
|
||||
Hierarchisch wie Dateisystem
|
||||
Root-Server weltweit verteilt (13 Cluster)
|
||||
TLD = Top Level Domain (.de, .com, .org)
|
||||
FQDN = Fully Qualified Domain Name
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# DNS-Auflösung
|
||||
|
||||
```
|
||||
1. Browser fragt lokalen DNS-Resolver
|
||||
2. Resolver fragt Root-Server → ".de ist bei..."
|
||||
3. Resolver fragt .de-Server → "hdm-stuttgart bei..."
|
||||
4. Resolver fragt hdm-Server → "www = 212.132.79.37"
|
||||
5. Resolver cached Antwort
|
||||
6. Browser verbindet zu 212.132.79.37
|
||||
```
|
||||
|
||||
**Caching:** Antworten werden gespeichert
|
||||
→ Schneller bei wiederholten Anfragen
|
||||
|
||||
<!--
|
||||
Rekursive Auflösung
|
||||
DNS-Cache auf vielen Ebenen (Browser, OS, Router, ISP)
|
||||
TTL = Time To Live (wie lange cachen)
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# DNS-Records
|
||||
|
||||
| Typ | Bedeutung | Beispiel |
|
||||
|-----|-----------|----------|
|
||||
| **A** | IPv4-Adresse | `www → 212.132.79.37` |
|
||||
| **AAAA** | IPv6-Adresse | `www → 2001:db8::1` |
|
||||
| **CNAME** | Alias | `blog → www.example.com` |
|
||||
| **MX** | Mail-Server | `@ → mail.example.com` |
|
||||
| **TXT** | Text (Verifikation) | `"v=spf1..."` |
|
||||
|
||||
<!--
|
||||
dig oder nslookup zum Nachschauen
|
||||
A = Address
|
||||
CNAME = Canonical Name (Weiterleitung)
|
||||
MX = Mail Exchange
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# URLs & Domains
|
||||
|
||||
**URL** = Uniform Resource Locator
|
||||
|
||||
```
|
||||
https://www.example.com:443/pfad/seite.html?suche=test#kapitel2
|
||||
└─┬──┘ └──────┬──────┘└┬┘ └──────┬──────┘ └───┬────┘ └──┬───┘
|
||||
Protokoll Hostname Port Pfad Query Fragment
|
||||
```
|
||||
|
||||
| Begriff | Erklärung |
|
||||
|---------|-----------|
|
||||
| **Domain** | `example.com` (registrierter Name) |
|
||||
| **Subdomain** | `www`, `mail`, `api` (Prefix) |
|
||||
| **Hostname** | `www.example.com` (vollständig) |
|
||||
| **Port** | Standard: 80 (HTTP), 443 (HTTPS) |
|
||||
|
||||
<!--
|
||||
URL = Adresse einer Ressource im Web
|
||||
Hostname = Domain + optionale Subdomain
|
||||
Port wird oft weggelassen (Standardports)
|
||||
Fragment (#) geht nicht an Server, nur Browser
|
||||
Query-String für Parameter
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# Netzwerke
|
||||
## Theorie und Praxis
|
||||
|
||||
<!-- "Netzwerke sind super komplex und alles hier gezeigte ist bloß eine stark vereinfachte Schematisierung" -->
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
|
||||
# Das OSI-Modell: Die Theorie
|
||||
|
||||
**7 Schichten der Netzwerkkommunikation:**
|
||||
|
||||
| Schicht | Name | Beispiel |
|
||||
|---------|------|----------|
|
||||
| **7** | **Anwendung** | **HTTP/S, FTP, SMTP** |
|
||||
| 6 | Darstellung | Verschlüsselung, Kompression |
|
||||
| 5 | Sitzung | Sessions |
|
||||
| 4 | Transport | TCP, UDP |
|
||||
| 3 | Vermittlung | IP, Routing |
|
||||
| 2 | Sicherung | Ethernet, MAC |
|
||||
| 1 | Bitübertragung | Kabel, WLAN |
|
||||
|
||||
<!--
|
||||
OSI-MODELL: Open Systems Interconnection (1984, ISO 7498)
|
||||
ZWECK: Standardisierte Beschreibung von Netzwerkkommunikation
|
||||
7 SCHICHTEN (von unten nach oben):
|
||||
1. Physical: Bits über Kabel/Funk (Ethernet-Kabel, WLAN-Frequenzen)
|
||||
2. Data Link: Frames, MAC-Adressen (Ethernet, Switch)
|
||||
3. Network: Pakete, IP-Adressen, Routing (Router)
|
||||
4. Transport: Segmente, Ports, Zuverlässigkeit (TCP/UDP)
|
||||
5. Session: Verbindungsmanagement (selten separat implementiert)
|
||||
6. Presentation: Datenformat, Verschlüsselung (TLS gehört hierher)
|
||||
7. Application: Nutzer-Protokolle (HTTP, SMTP, FTP)
|
||||
MERKSATZ: "Please Do Not Throw Salami Pizza Away" (Physical→Application)
|
||||
REALITÄT: OSI ist Theorie, TCP/IP ist Praxis (fasst Schichten zusammen)
|
||||
PRÜFUNGSRELEVANT: 7 Schichten mit Beispielen, Unterschied OSI vs. TCP/IP
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
|
||||
# TCP/IP: Die Praxis
|
||||
|
||||
**Das Internet nutzt TCP/IP (4 Schichten):**
|
||||
|
||||
| TCP/IP | Entspricht OSI | Protokolle |
|
||||
|--------|----------------|------------|
|
||||
| **Anwendung** | **5-7** | **HTTP, DNS, SMTP** |
|
||||
| Transport | 4 | TCP, UDP |
|
||||
| Internet | 3 | IP |
|
||||
| Netzzugang | 1-2 | Ethernet, WLAN |
|
||||
|
||||
**TCP/IP = Transmission Control Protocol / Internet Protocol**
|
||||
|
||||
https://www.ietf.org/rfc/rfc793.txt
|
||||
|
||||
<!--
|
||||
TCP/IP-STACK: Praktische Implementierung des Internets
|
||||
4 SCHICHTEN statt 7:
|
||||
1. Network Access (OSI 1-2): Ethernet, WLAN, physische Übertragung
|
||||
2. Internet (OSI 3): IP-Protokoll, Routing, Adressierung
|
||||
3. Transport (OSI 4): TCP (zuverlässig) oder UDP (schnell)
|
||||
4. Application (OSI 5-7): HTTP, DNS, SMTP, SSH
|
||||
TCP vs. UDP:
|
||||
- TCP: Verbindungsorientiert, garantierte Zustellung, Reihenfolge (Web, E-Mail)
|
||||
- UDP: Verbindungslos, schneller, keine Garantie (Video-Streaming, Gaming, DNS)
|
||||
IP-PROTOKOLL: Adressierung + Routing, "Best Effort" (keine Garantie)
|
||||
ENTSTEHUNG: ARPANET 1969, TCP/IP 1983 (Flag Day)
|
||||
PRÜFUNGSRELEVANT: 4 Schichten, TCP vs. UDP Unterschied, wann welches Protokoll
|
||||
-->
|
||||
|
||||
---
|
||||
@@ -369,6 +466,7 @@ Internet nutzt TCP/IP
|
||||
|
||||
---
|
||||
|
||||
|
||||
# Schicht 1: Bitübertragung
|
||||
|
||||
**Physikalische Übertragung von Bits**
|
||||
@@ -469,10 +567,12 @@ UDP für Echtzeit (Video-Call, Gaming)
|
||||
|
||||
# TCP: 3-Way-Handshake
|
||||
|
||||
### Verbindungsorientiert
|
||||
|
||||
```
|
||||
Client Server
|
||||
│ │
|
||||
│──── SYN (Seq=100) ──────────>│
|
||||
│──── SYN (Seq=100) ───────────>│
|
||||
│ │
|
||||
│<─── SYN-ACK (Seq=300, Ack=101)│
|
||||
│ │
|
||||
@@ -501,7 +601,7 @@ ACK bestätigt Empfang
|
||||
- **Synchronisation** → Wiederaufnahme nach Abbruch
|
||||
|
||||
**Beispiele:**
|
||||
- Web-Sessions (Cookies, Tokens)
|
||||
- Web-Sessions (Cookies, Tokens, OAuth)
|
||||
- RPC (Remote Procedure Call)
|
||||
- NetBIOS
|
||||
|
||||
@@ -569,118 +669,25 @@ HTTPS = HTTP + TLS: Verschlüsselung, Authentifizierung, Integrität
|
||||
PRÜFUNGSRELEVANT: Wichtige Ports auswendig, HTTP vs. HTTPS, was macht DNS
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# DNS: Das Telefonbuch des Internets
|
||||
|
||||
---
|
||||
|
||||
# Das Problem
|
||||
# Merksatz: OSI-Modell
|
||||
|
||||
**Menschen:** `www.hdm-stuttgart.de`
|
||||
**Computer:** `212.132.79.37`
|
||||
"**A**lle **d**ualen **S**tudierenden **t**rinken **v**erschiedene **S**orten **B**ier/Brause"
|
||||
|
||||
**DNS** = Domain Name System
|
||||
→ Übersetzt Namen in IP-Adressen
|
||||
| Schicht | Name | Merksatz |
|
||||
|---------|------|----------|
|
||||
| 7 | **A**nwendung | **A**lle |
|
||||
| 6 | **D**arstellung | **d**ualen |
|
||||
| 5 | **S**itzung | **S**tudierenden |
|
||||
| 4 | **T**ransport | **t**rinken |
|
||||
| 3 | **V**ermittlung | **v**erschiedene |
|
||||
| 2 | **S**icherung | **S**orten |
|
||||
| 1 | **B**itübertragung | **B**ier/Brause |
|
||||
|
||||
<!--
|
||||
Niemand merkt sich IP-Adressen
|
||||
DNS macht Internet benutzbar
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# DNS-Hierarchie
|
||||
|
||||
```
|
||||
(Root)
|
||||
.
|
||||
/ | \
|
||||
/ | \
|
||||
.de .org .com
|
||||
/ \
|
||||
hdm-stuttgart google
|
||||
| |
|
||||
www mail
|
||||
```
|
||||
|
||||
**FQDN:** `www.hdm-stuttgart.de.` (mit Punkt am Ende!)
|
||||
|
||||
<!--
|
||||
Hierarchisch wie Dateisystem
|
||||
Root-Server weltweit verteilt (13 Cluster)
|
||||
TLD = Top Level Domain (.de, .com, .org)
|
||||
FQDN = Fully Qualified Domain Name
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# DNS-Auflösung
|
||||
|
||||
```
|
||||
1. Browser fragt lokalen DNS-Resolver
|
||||
2. Resolver fragt Root-Server → ".de ist bei..."
|
||||
3. Resolver fragt .de-Server → "hdm-stuttgart bei..."
|
||||
4. Resolver fragt hdm-Server → "www = 212.132.79.37"
|
||||
5. Resolver cached Antwort
|
||||
6. Browser verbindet zu 212.132.79.37
|
||||
```
|
||||
|
||||
**Caching:** Antworten werden gespeichert
|
||||
→ Schneller bei wiederholten Anfragen
|
||||
|
||||
<!--
|
||||
Rekursive Auflösung
|
||||
DNS-Cache auf vielen Ebenen (Browser, OS, Router, ISP)
|
||||
TTL = Time To Live (wie lange cachen)
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# DNS-Records
|
||||
|
||||
| Typ | Bedeutung | Beispiel |
|
||||
|-----|-----------|----------|
|
||||
| **A** | IPv4-Adresse | `www → 212.132.79.37` |
|
||||
| **AAAA** | IPv6-Adresse | `www → 2001:db8::1` |
|
||||
| **CNAME** | Alias | `blog → www.example.com` |
|
||||
| **MX** | Mail-Server | `@ → mail.example.com` |
|
||||
| **TXT** | Text (Verifikation) | `"v=spf1..."` |
|
||||
|
||||
<!--
|
||||
dig oder nslookup zum Nachschauen
|
||||
A = Address
|
||||
CNAME = Canonical Name (Weiterleitung)
|
||||
MX = Mail Exchange
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# URLs & Domains
|
||||
|
||||
**URL** = Uniform Resource Locator
|
||||
|
||||
```
|
||||
https://www.example.com:443/pfad/seite.html?suche=test#kapitel2
|
||||
└─┬──┘ └──────┬──────┘└┬┘ └──────┬──────┘ └───┬────┘ └──┬───┘
|
||||
Protokoll Hostname Port Pfad Query Fragment
|
||||
```
|
||||
|
||||
| Begriff | Erklärung |
|
||||
|---------|-----------|
|
||||
| **Domain** | `example.com` (registrierter Name) |
|
||||
| **Subdomain** | `www`, `mail`, `api` (Prefix) |
|
||||
| **Hostname** | `www.example.com` (vollständig) |
|
||||
| **Port** | Standard: 80 (HTTP), 443 (HTTPS) |
|
||||
|
||||
<!--
|
||||
URL = Adresse einer Ressource im Web
|
||||
Hostname = Domain + optionale Subdomain
|
||||
Port wird oft weggelassen (Standardports)
|
||||
Fragment (#) geht nicht an Server, nur Browser
|
||||
Query-String für Parameter
|
||||
Von oben nach unten: 7 bis 1
|
||||
-->
|
||||
|
||||
---
|
||||
@@ -1086,233 +1093,6 @@ vw/vh = Viewport (sichtbarer Bereich)
|
||||
|
||||
# Teil 3: Layouts (optional)
|
||||
## Flexbox & mehr
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
|
||||
# Wie nutzen Menschen das Web?
|
||||
|
||||
| Eingabe | Nutzungsweise |
|
||||
|---------|---------------|
|
||||
| **Maus** | Klicken, Scrollen |
|
||||
| **Tastatur** | Tab-Navigation, Enter, Pfeiltasten |
|
||||
| **Screenreader** | Vorlesen von Inhalten (NVDA, VoiceOver, JAWS) |
|
||||
| **Sprachsteuerung** | "Klicke auf Anmelden" |
|
||||
| **Augensteuerung** | Eye-Tracking |
|
||||
| **Switch-Geräte** | Ein-/Aus-Schalter |
|
||||
|
||||
→ **Nicht alle nutzen Maus + Bildschirm!**
|
||||
|
||||
<!--
|
||||
ACCESSIBILITY (a11y): a + 11 Buchstaben + y
|
||||
STATISTIK: ~15% der Weltbevölkerung haben eine Behinderung (WHO)
|
||||
ARTEN VON EINSCHRÄNKUNGEN:
|
||||
- Permanent: Blindheit, Taubheit, motorische Einschränkungen
|
||||
- Temporär: Gebrochener Arm, Augen-OP, Ohrenentzündung
|
||||
- Situativ: Helle Sonne (Kontrast), laute Umgebung (kein Audio), Baby auf Arm (eine Hand)
|
||||
ASSISTIVE TECHNOLOGIEN:
|
||||
- Screenreader: NVDA (Windows, kostenlos), VoiceOver (Apple), JAWS (kommerziell)
|
||||
- Braillezeilen: Taktile Ausgabe für Blinde
|
||||
- Switch-Geräte: Für motorische Einschränkungen
|
||||
- Spracheingabe: Dragon NaturallySpeaking, Siri, Google Assistant
|
||||
WCAG: Web Content Accessibility Guidelines (A, AA, AAA)
|
||||
EUROPEAN ACCESSIBILITY ACT: Seit Juni 2025 verpflichtend!
|
||||
PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
|
||||
# Warum "Barrierefreiheit"?
|
||||
|
||||
**Rechtlich:**
|
||||
- EU: European Accessibility Act (seit Juni 2025 in Kraft!)
|
||||
- DE: BITV 2.0 (Behörden), Privatwirtschaft betroffen
|
||||
|
||||
**Ethisch:**
|
||||
- Teilhabe für alle Menschen
|
||||
- Digitale Inklusion
|
||||
|
||||
**Praktisch:**
|
||||
- Bessere UX für **alle** (SEO, Mobile, ältere Menschen)
|
||||
- Größerer Markt (~15% der Bevölkerung)
|
||||
|
||||
<!--
|
||||
RECHTLICHER RAHMEN:
|
||||
- European Accessibility Act (EAA): EU-Richtlinie, seit 28. Juni 2025 in Kraft
|
||||
- Betrifft: E-Commerce, Banking, Telekommunikation, Transport, E-Books
|
||||
- BITV 2.0: Barrierefreie Informationstechnik-Verordnung (DE, öffentliche Stellen)
|
||||
- BFSG: Barrierefreiheitsstärkungsgesetz (DE-Umsetzung des EAA)
|
||||
- Strafen: Bis zu 100.000€ Bußgeld möglich
|
||||
CURB-CUT-EFFEKT:
|
||||
- Bordsteinabsenkung für Rollstuhlfahrer → hilft auch Kinderwagen, Rollkoffern, Fahrrädern
|
||||
- Untertitel für Gehörlose → helfen in lauter Umgebung, beim Sprachlernen
|
||||
- Kontrastreiche Farben → besser bei Sonnenlicht, für ältere Menschen
|
||||
BUSINESS CASE:
|
||||
- 15% Zielgruppe (Menschen mit Behinderung)
|
||||
- +20% ältere Menschen (Sehschwäche, motorische Einschränkungen)
|
||||
- SEO-Vorteile: Alt-Texte, semantisches HTML = besser für Google
|
||||
PRÜFUNGSRELEVANT: EAA kennen, Curb-Cut-Effekt erklären können, Business Case
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# WCAG: Der Standard
|
||||
|
||||
**W**eb **C**ontent **A**ccessibility **G**uidelines
|
||||
|
||||
**4 Prinzipien (POUR):**
|
||||
|
||||
| Prinzip | Bedeutung |
|
||||
|---------|-----------|
|
||||
| **Perceivable** | Wahrnehmbar – Inhalte müssen erkennbar sein |
|
||||
| **Operable** | Bedienbar – Funktionen müssen nutzbar sein |
|
||||
| **Understandable** | Verständlich – Inhalte müssen klar sein |
|
||||
| **Robust** | Robust – Funktioniert mit verschiedenen Technologien |
|
||||
|
||||
<!--
|
||||
WCAG vom W3C (World Wide Web Consortium)
|
||||
Aktuelle Version: WCAG 2.2 (2023)
|
||||
Level: A (minimal), AA (Standard), AAA (optimal)
|
||||
Gesetzlich meist Level AA gefordert
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Perceivable: Wahrnehmbar
|
||||
|
||||
**Textalternativen für Nicht-Text:**
|
||||
```html
|
||||
<img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024">
|
||||
```
|
||||
|
||||
**Kontrast:** Mindestens 4.5:1 für Text
|
||||
|
||||
**Untertitel:** Videos brauchen Captions
|
||||
|
||||
**Responsive:** Inhalte bei 200% Zoom nutzbar
|
||||
|
||||
<!--
|
||||
Leeres alt="" für dekorative Bilder
|
||||
Contrast-Checker: WebAIM Contrast Checker
|
||||
Captions ≠ Untertitel (Captions = auch Geräusche beschrieben)
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Operable: Bedienbar
|
||||
|
||||
**Tastaturzugänglich:**
|
||||
```css
|
||||
/* Fokus-Indikator NIE entfernen! */
|
||||
:focus {
|
||||
outline: 2px solid blue;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Wenn custom styling: */
|
||||
button:focus-visible {
|
||||
box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
|
||||
}
|
||||
```
|
||||
|
||||
**Genug Zeit:** Keine automatischen Timeouts ohne Warnung
|
||||
|
||||
**Keine Blitze:** Nichts blinkt mehr als 3x pro Sekunde
|
||||
|
||||
<!--
|
||||
Tab-Reihenfolge = DOM-Reihenfolge
|
||||
Skip-Links: "Zum Hauptinhalt springen"
|
||||
:focus-visible = nur bei Tastatur-Navigation
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Understandable: Verständlich
|
||||
|
||||
**Sprache angeben:**
|
||||
```html
|
||||
<html lang="de">
|
||||
```
|
||||
|
||||
**Konsistente Navigation:** Gleiche Elemente an gleicher Stelle
|
||||
|
||||
**Fehler erklären:**
|
||||
```html
|
||||
<input type="email" aria-describedby="email-error">
|
||||
<p id="email-error" role="alert">
|
||||
Bitte geben Sie eine gültige E-Mail-Adresse ein.
|
||||
</p>
|
||||
```
|
||||
|
||||
<!--
|
||||
Screenreader nutzen lang für korrekte Aussprache
|
||||
Konsistenz reduziert kognitive Last
|
||||
Fehlermeldungen: konkret, hilfreich, am Feld
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
# Robust: Technisch solide
|
||||
|
||||
**Semantisches HTML:**
|
||||
```html
|
||||
<!-- Schlecht -->
|
||||
<div class="button" onclick="...">Klick mich</div>
|
||||
|
||||
<!-- Gut -->
|
||||
<button type="button">Klick mich</button>
|
||||
```
|
||||
|
||||
**ARIA nur wenn nötig:**
|
||||
```html
|
||||
<!-- Nötig: Custom-Komponente -->
|
||||
<div role="tablist" aria-label="Produktkategorien">
|
||||
<button role="tab" aria-selected="true">Schuhe</button>
|
||||
<button role="tab" aria-selected="false">Jacken</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
<!--
|
||||
ARIA = Accessible Rich Internet Applications
|
||||
Erste Regel von ARIA: Wenn möglich, natives HTML nutzen!
|
||||
button hat eingebaute Tastatur-Unterstützung
|
||||
div-Button braucht JavaScript für Enter/Space
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
|
||||
# Barrieren im Netz vermeiden (a11y)
|
||||
|
||||
**Tastatur-Test:**
|
||||
- Alle Funktionen nur mit Tab + Enter nutzbar?
|
||||
- Fokus immer sichtbar?
|
||||
- Logische Tab-Reihenfolge?
|
||||
|
||||
**Screenreader-Test:**
|
||||
- VoiceOver (Mac): `Cmd + F5`
|
||||
- NVDA (Windows): Gratis-Download
|
||||
|
||||
**Tools:**
|
||||
- axe DevTools, WAVE (Browser-Extensions)
|
||||
- Lighthouse (in Chrome DevTools)
|
||||
|
||||
<!--
|
||||
Automatische Tests finden ~30% der Probleme
|
||||
Manuelles Testen unverzichtbar
|
||||
Echte NutzerInnen einbeziehen = Gold-Standard
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# Teil 3: Layouts (optional)
|
||||
## Flexbox & mehr
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user