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
|
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 -->
|
<!-- _class: lead -->
|
||||||
|
|
||||||
# Fragen & Diskussion
|
# Fragen & Diskussion
|
||||||
|
|||||||
@@ -129,17 +129,17 @@ Hochschule der Medien Stuttgart
|
|||||||
|
|
||||||
<!-- _class: lead -->
|
<!-- _class: lead -->
|
||||||
|
|
||||||
# Teil 1: Rechner verbinden
|
# Teil 1: Grundbegriffe
|
||||||
## Netzwerk-Grundlagen
|
## Netzwerk und Internet
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# Warum Rechner verbinden?
|
# Warum Rechner verbinden?
|
||||||
|
|
||||||
- Daten und Informationen teilen
|
* Daten und Informationen teilen
|
||||||
- Zusammenarbeiten & Kollaboration
|
* Zusammenarbeiten & Kollaboration
|
||||||
- Kommunizieren
|
* Ressourcen teilen (Drucker, Speicher, andere Geräte)
|
||||||
- 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
|
# IP-Adressen
|
||||||
|
|
||||||
**Jeder Rechner im Netzwerk braucht eine Adresse**
|
**Jeder Rechner im Netzwerk braucht eine Adresse**
|
||||||
@@ -254,9 +188,6 @@ NAT = Network Address Translation
|
|||||||
| `192.168.x.x` | Private Adressen (Heimnetz) |
|
| `192.168.x.x` | Private Adressen (Heimnetz) |
|
||||||
| `10.x.x.x` | Private Adressen (Firmen) |
|
| `10.x.x.x` | Private Adressen (Firmen) |
|
||||||
|
|
||||||
**Localhost = "Ich selbst"**
|
|
||||||
→ Perfekt für Web-Entwicklung!
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
Localhost für lokale Entwicklung
|
Localhost für lokale Entwicklung
|
||||||
Private IPs werden nicht im Internet geroutet
|
Private IPs werden nicht im Internet geroutet
|
||||||
@@ -308,32 +239,198 @@ Pakete können verschiedene Wege nehmen
|
|||||||
Adaptives Routing bei Auslastung
|
Adaptives Routing bei Auslastung
|
||||||
-->
|
-->
|
||||||
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<!-- _class: lead -->
|
<!-- _class: lead -->
|
||||||
|
|
||||||
# Teil 1: Netzwerke
|
# DNS: Domain Name System
|
||||||
## Wie Daten reisen
|
## 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 |
|
**DNS** = Domain Name System
|
||||||
|---------|------|----------|
|
→ Übersetzt Namen in IP-Adressen
|
||||||
| 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 |
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
Von oben nach unten: 7 bis 1
|
Niemand merkt sich IP-Adressen
|
||||||
Merksatz hilft beim Behalten
|
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
|
# Schicht 1: Bitübertragung
|
||||||
|
|
||||||
**Physikalische Übertragung von Bits**
|
**Physikalische Übertragung von Bits**
|
||||||
@@ -469,10 +567,12 @@ UDP für Echtzeit (Video-Call, Gaming)
|
|||||||
|
|
||||||
# TCP: 3-Way-Handshake
|
# TCP: 3-Way-Handshake
|
||||||
|
|
||||||
|
### Verbindungsorientiert
|
||||||
|
|
||||||
```
|
```
|
||||||
Client Server
|
Client Server
|
||||||
│ │
|
│ │
|
||||||
│──── SYN (Seq=100) ──────────>│
|
│──── SYN (Seq=100) ───────────>│
|
||||||
│ │
|
│ │
|
||||||
│<─── SYN-ACK (Seq=300, Ack=101)│
|
│<─── SYN-ACK (Seq=300, Ack=101)│
|
||||||
│ │
|
│ │
|
||||||
@@ -501,7 +601,7 @@ ACK bestätigt Empfang
|
|||||||
- **Synchronisation** → Wiederaufnahme nach Abbruch
|
- **Synchronisation** → Wiederaufnahme nach Abbruch
|
||||||
|
|
||||||
**Beispiele:**
|
**Beispiele:**
|
||||||
- Web-Sessions (Cookies, Tokens)
|
- Web-Sessions (Cookies, Tokens, OAuth)
|
||||||
- RPC (Remote Procedure Call)
|
- RPC (Remote Procedure Call)
|
||||||
- NetBIOS
|
- NetBIOS
|
||||||
|
|
||||||
@@ -569,118 +669,25 @@ HTTPS = HTTP + TLS: Verschlüsselung, Authentifizierung, Integrität
|
|||||||
PRÜFUNGSRELEVANT: Wichtige Ports auswendig, HTTP vs. HTTPS, was macht DNS
|
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`
|
"**A**lle **d**ualen **S**tudierenden **t**rinken **v**erschiedene **S**orten **B**ier/Brause"
|
||||||
**Computer:** `212.132.79.37`
|
|
||||||
|
|
||||||
**DNS** = Domain Name System
|
| Schicht | Name | Merksatz |
|
||||||
→ Übersetzt Namen in IP-Adressen
|
|---------|------|----------|
|
||||||
|
| 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
|
Von oben nach unten: 7 bis 1
|
||||||
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
|
|
||||||
-->
|
-->
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -1086,233 +1093,6 @@ vw/vh = Viewport (sichtbarer Bereich)
|
|||||||
|
|
||||||
# Teil 3: Layouts (optional)
|
# Teil 3: Layouts (optional)
|
||||||
## Flexbox & mehr
|
## 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