Michael Czechowski
fc3f3a73f5
- add course number (223015b/c) to all slide headers - widen klausur diagonal stripes from 20/40px to 40/80px - expand termin-1 with analog vs digital media content - rename wtf files exercise to hex files
1703 lines
35 KiB
Markdown
1703 lines
35 KiB
Markdown
---
|
||
marp: true
|
||
theme: gaia
|
||
paginate: true
|
||
backgroundColor: #fff
|
||
header: "Grundlagen IT- und Internettechnik (223015c)"
|
||
footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
|
||
title: "Termin 2: Netzwerke, Protokolle & CSS"
|
||
---
|
||
|
||
<style>
|
||
:root {
|
||
--color-foreground: #1a1a2e;
|
||
--color-highlight: #d63384;
|
||
--color-dimmed: #4a4a6a;
|
||
}
|
||
section.invert {
|
||
--color-foreground: #fff;
|
||
}
|
||
section {
|
||
font-size: 1.7rem;
|
||
}
|
||
h1 {
|
||
color: #a02060; /* darker raspberry */
|
||
}
|
||
section.invert h1 {
|
||
color: #fff;
|
||
}
|
||
h2 {
|
||
color: #1f2937; /* dark gray, almost black */
|
||
}
|
||
pre {
|
||
background: #0f0f23;
|
||
color: #d63384;
|
||
border-radius: 8px;
|
||
border-left: 3px solid #d63384;
|
||
}
|
||
pre code {
|
||
background: transparent;
|
||
color: inherit;
|
||
}
|
||
code {
|
||
background: #1a1a2e;
|
||
color: #d63384;
|
||
padding: 0.15em 0.4em;
|
||
border-radius: 4px;
|
||
}
|
||
a {
|
||
color: var(--color-highlight);
|
||
}
|
||
section.klausur {
|
||
background: repeating-linear-gradient(
|
||
135deg,
|
||
#fce4ec,
|
||
#fce4ec 40px,
|
||
#fff 40px,
|
||
#fff 80px
|
||
) !important;
|
||
}
|
||
section.klausur footer {
|
||
display: none;
|
||
}
|
||
section.aufgabe {
|
||
background: #fce4ec !important;
|
||
}
|
||
section.aufgabe footer {
|
||
display: none;
|
||
}
|
||
</style>
|
||
|
||
<!-- _class: invert -->
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
<!-- _backgroundColor: black -->
|
||
|
||
|
||
|
||
# Grundlagen IT- und Internettechnik
|
||
|
||
**223015c** · Modul "Technik 1" · 1. Semester
|
||
Digital- und Medienwirtschaft
|
||
Hochschule der Medien Stuttgart
|
||
|
||
**Wintersemester 2025/26**
|
||
|
||
[https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/)
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Termin 2 – 10.01.2026
|
||
## Netzwerke, Protokolle & CSS
|
||
|
||
---
|
||
|
||
# Agenda
|
||
|
||
**Teil 1:**
|
||
- Netzwerke (OSI, TCP/IP)
|
||
- DNS: Wie funktionieren Domain-Namen?
|
||
- HTTP(S) im Detail
|
||
|
||
**Teil 2:**
|
||
- CSS-Grundlagen
|
||
- "Barrierefreiheit" (a11y, WCAG)
|
||
- Selektoren & Spezifität
|
||
- Hands-On: Styling
|
||
|
||
---
|
||
|
||
# Ressourcen zum Selbstlernen
|
||
|
||
* Online Code-Editor: https://codepen.io/pen/
|
||
* MDN (Mozilla Developer Network): https://developer.mozilla.org/de/
|
||
* HTML-Referenz: https://nextlevelshit.github.io/html-over-js/
|
||
* CSS lernen: https://codescripsi.es/
|
||
* Flexbox-Spiel: https://flexboxfroggy.com/
|
||
* Grid-Spiel: https://cssgridgarden.com/
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Teil 1: Rechner verbinden
|
||
## Netzwerk-Grundlagen
|
||
|
||
---
|
||
|
||
# Warum Rechner verbinden?
|
||
|
||
- Daten und Informationen teilen
|
||
- Zusammenarbeiten & Kollaboration
|
||
- Kommunizieren
|
||
- Ressourcen teilen (Drucker, Speicher, andere Geräte)
|
||
|
||
---
|
||
|
||
# Kommunikationsarten
|
||
|
||
| Kategorie | Beispiel |
|
||
|-----------|----------|
|
||
| **Synchron** | Telefonat, Video-Call |
|
||
| **Asynchron** | E-Mail, Brief, SMS |
|
||
| **Verbindungsorientiert** | Telefon (Leitung aufbauen) |
|
||
| **Verbindungslos** | Brief, Postkarte |
|
||
|
||
<!--
|
||
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**
|
||
|
||
**IPv4:** 4 Zahlen (0-255), Punkt-getrennt
|
||
`192.168.1.1`
|
||
|
||
**Problem:** 2⁸·2⁸·2⁸·2⁸ = 2³² = nur 4,3 Milliarden Adressen
|
||
→ Reicht nicht für alle Geräte!
|
||
|
||
**IPv6:** 128 Bit = 3,4 × 10³⁸ Adressen
|
||
`2001:0db8:85a3:0000:0000:8a2e:0370:7334`
|
||
|
||
<!--
|
||
Eure IP: ipconfig (Win) / ifconfig (Mac/Linux)
|
||
Private IPs: 192.168.x.x, 10.x.x.x
|
||
Öffentliche IP: Router hat eine
|
||
NAT = Network Address Translation
|
||
-->
|
||
|
||
---
|
||
|
||
# Spezielle IP-Adressen
|
||
|
||
| Adresse | Bedeutung |
|
||
|---------|-----------|
|
||
| `127.0.0.1` | **Localhost** – Ihr eigener Rechner |
|
||
| `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
|
||
Router macht NAT (Network Address Translation)
|
||
-->
|
||
|
||
---
|
||
|
||
# Ports: Die Türnummern
|
||
|
||
**IP-Adresse = Hausnummer**
|
||
**Port = Wohnungstür**
|
||
|
||
| Port | Dienst |
|
||
|------|--------|
|
||
| 80 | HTTP (Web) |
|
||
| 443 | HTTPS (Web, verschlüsselt) |
|
||
| 22 | SSH (Terminal) |
|
||
| 25 | SMTP (E-Mail senden) |
|
||
|
||
**Beispiel:** `192.168.1.1:8080`
|
||
(IP-Adresse : Port)
|
||
|
||
<!--
|
||
Ein Server kann viele Dienste anbieten
|
||
Ports 0-1023 = "well-known" (reserviert)
|
||
Ports 1024-65535 = frei nutzbar
|
||
-->
|
||
|
||
---
|
||
|
||
# Routing: Der Weg durchs Netz
|
||
|
||
**Router = Postamt**
|
||
- Entscheidet, wohin Pakete gehen
|
||
- Findet besten Weg
|
||
- Pakete können verschiedene Wege nehmen!
|
||
|
||
**Traceroute:** Zeigt den Weg
|
||
```bash
|
||
traceroute google.de # Mac/Linux
|
||
tracert google.de # Windows
|
||
```
|
||
|
||
<!--
|
||
Live-Demo: traceroute zu google.de
|
||
Zeigt alle Router auf dem Weg
|
||
Pakete können verschiedene Wege nehmen
|
||
Adaptives Routing bei Auslastung
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Teil 1: Netzwerke
|
||
## Wie Daten reisen
|
||
|
||
---
|
||
|
||
# Wiederholung: OSI-Modell
|
||
|
||
**Merksatz:** "**A**lle **d**eutschen **S**tudierenden **t**rinken **v**erschiedene **S**orten **B**ier/Brause"
|
||
|
||
| 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 |
|
||
|
||
<!--
|
||
Von oben nach unten: 7 bis 1
|
||
Merksatz hilft beim Behalten
|
||
-->
|
||
|
||
---
|
||
|
||
# OSI vs. TCP/IP
|
||
|
||
```
|
||
OSI-Modell TCP/IP-Modell
|
||
┌─────────────────┐ ┌─────────────────┐
|
||
│ 7. Anwendung │ │ │
|
||
├─────────────────┤ │ Anwendung │
|
||
│ 6. Darstellung │ │ (HTTP, DNS, │
|
||
├─────────────────┤ │ SMTP, FTP) │
|
||
│ 5. Sitzung │ │ │
|
||
├─────────────────┤ ├─────────────────┤
|
||
│ 4. Transport │ │ Transport │
|
||
│ │ │ (TCP, UDP) │
|
||
├─────────────────┤ ├─────────────────┤
|
||
│ 3. Vermittlung │ │ Internet │
|
||
│ │ │ (IP) │
|
||
├─────────────────┤ ├─────────────────┤
|
||
│ 2. Sicherung │ │ │
|
||
├─────────────────┤ │ Netzzugang │
|
||
│ 1. Bitübertrag │ │ │
|
||
└─────────────────┘ └─────────────────┘
|
||
```
|
||
|
||
<!--
|
||
OSI = theoretisches Modell
|
||
TCP/IP = praktische Implementierung
|
||
Internet nutzt TCP/IP
|
||
-->
|
||
|
||
---
|
||
|
||
# Schicht 1: Bitübertragung
|
||
|
||
**Physikalische Übertragung von Bits**
|
||
|
||
| Medium | Beschreibung |
|
||
|--------|--------------|
|
||
| **Kupferkabel** | Elektrische Signale (Ethernet) |
|
||
| **Glasfaser** | Lichtimpulse (schnell, weit) |
|
||
| **Funk** | Elektromagnetische Wellen (WLAN, 5G) |
|
||
|
||
**Einheiten:**
|
||
- Bit/s, kbit/s, Mbit/s, Gbit/s
|
||
- **Achtung:** 100 Mbit/s ≠ 100 MB/s!
|
||
|
||
<!--
|
||
8 Bit = 1 Byte
|
||
100 Mbit/s = 12,5 MB/s (theoretisch)
|
||
Overhead reduziert reale Geschwindigkeit
|
||
-->
|
||
|
||
---
|
||
|
||
# Schicht 2: Sicherung
|
||
|
||
**MAC-Adressen: Hardware-Identifikation**
|
||
|
||
```
|
||
00:1A:2B:3C:4D:5E
|
||
```
|
||
|
||
- 48 Bit = 6 Bytes
|
||
- **Weltweit eindeutig** (in Theorie)
|
||
- In Netzwerkkarte "eingebrannt"
|
||
|
||
**Ethernet-Frame:**
|
||
|
||
```
|
||
┌────────┬────────┬────────┬────────┬─────┐
|
||
│Präambel│Ziel-MAC│Src-MAC │ Daten │ FCS │
|
||
└────────┴────────┴────────┴────────┴─────┘
|
||
```
|
||
|
||
<!--
|
||
MAC = Media Access Control
|
||
FCS = Frame Check Sequence (Prüfsumme)
|
||
Switch arbeitet auf Layer 2
|
||
-->
|
||
|
||
---
|
||
|
||
# Schicht 3: Vermittlung (IP)
|
||
|
||
**IP-Adressen: Logische Adressierung**
|
||
|
||
```
|
||
IPv4: 192.168.1.100 (32 Bit)
|
||
IPv6: 2001:db8::1 (128 Bit)
|
||
```
|
||
|
||
**Subnetzmaske:** Trennt Netzwerk von Host
|
||
|
||
```
|
||
IP: 192.168. 1.100
|
||
Maske: 255.255.255. 0
|
||
└─Netzwerk─┘└Host┘
|
||
```
|
||
|
||
**Router** arbeiten auf Layer 3 (IP-Routing)
|
||
|
||
<!--
|
||
Subnetzmaske bestimmt Netzwerkgröße
|
||
/24 = 255.255.255.0 = 254 Hosts
|
||
Private IPs: 192.168.x.x, 10.x.x.x, 172.16-31.x.x
|
||
-->
|
||
|
||
---
|
||
|
||
# Schicht 4: Transport
|
||
|
||
**TCP vs. UDP**
|
||
|
||
| Eigenschaft | TCP | UDP |
|
||
|-------------|-----|-----|
|
||
| Verbindung | Ja (3-Way-Handshake) | Nein |
|
||
| Zuverlässig | Ja (Bestätigung) | Nein |
|
||
| Reihenfolge | Garantiert | Nicht garantiert |
|
||
| Geschwindigkeit | Langsamer | Schneller |
|
||
| Anwendung | Web, E-Mail | Streaming, Gaming |
|
||
|
||
<!--
|
||
TCP = Transmission Control Protocol
|
||
UDP = User Datagram Protocol
|
||
TCP für alles Wichtige
|
||
UDP für Echtzeit (Video-Call, Gaming)
|
||
-->
|
||
|
||
---
|
||
|
||
# TCP: 3-Way-Handshake
|
||
|
||
```
|
||
Client Server
|
||
│ │
|
||
│──── SYN (Seq=100) ──────────>│
|
||
│ │
|
||
│<─── SYN-ACK (Seq=300, Ack=101)│
|
||
│ │
|
||
│──── ACK (Seq=101, Ack=301) ──>│
|
||
│ │
|
||
│ Verbindung hergestellt │
|
||
```
|
||
|
||
**SYN** = Synchronize
|
||
**ACK** = Acknowledge
|
||
|
||
<!--
|
||
Bevor Daten fließen: Handshake
|
||
Sequenznummern für Reihenfolge
|
||
ACK bestätigt Empfang
|
||
-->
|
||
|
||
---
|
||
|
||
# Schicht 5: Sitzung (Session)
|
||
|
||
**Verwaltet Verbindungen zwischen Anwendungen:**
|
||
|
||
- **Sessions** → Login-Sitzungen, "eingeloggt bleiben"
|
||
- **Dialogsteuerung** → Wer darf wann senden?
|
||
- **Synchronisation** → Wiederaufnahme nach Abbruch
|
||
|
||
**Beispiele:**
|
||
- Web-Sessions (Cookies, Tokens)
|
||
- RPC (Remote Procedure Call)
|
||
- NetBIOS
|
||
|
||
<!--
|
||
Session-Layer oft in Anwendung integriert
|
||
Web: Session-ID in Cookie speichern
|
||
Beispiel: Online-Banking Session-Timeout
|
||
-->
|
||
|
||
---
|
||
|
||
# Schicht 6: Darstellung (Presentation)
|
||
|
||
**Übersetzt Datenformate:**
|
||
|
||
| Funktion | Beispiel |
|
||
|----------|----------|
|
||
| **Encoding** | UTF-8, ASCII, Unicode |
|
||
| **Verschlüsselung** | TLS/SSL (HTTPS) |
|
||
| **Kompression** | gzip, deflate |
|
||
| **Serialisierung** | JSON, XML, Protobuf |
|
||
|
||
**TLS/SSL:** Transport Layer Security
|
||
→ Verschlüsselt HTTP zu HTTPS
|
||
|
||
<!--
|
||
Presentation Layer = Dolmetscher
|
||
TLS: Handshake für Schlüsselaustausch
|
||
Zertifikate für Authentifizierung
|
||
Heute: Fast nur noch HTTPS
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: klausur -->
|
||
|
||
# Schicht 7: Anwendung
|
||
|
||
**Protokolle, die wir täglich nutzen:**
|
||
|
||
| Protokoll | Port | Funktion |
|
||
|-----------|------|----------|
|
||
| **HTTP** | 80 | Webseiten (unverschlüsselt) |
|
||
| **HTTPS** | 443 | Webseiten (TLS-verschlüsselt) |
|
||
| **DNS** | 53 | Namensauflösung |
|
||
| **SMTP** | 25/587 | E-Mail senden |
|
||
| **IMAP** | 993 | E-Mail abrufen |
|
||
| **SSH** | 22 | Sichere Fernsteuerung |
|
||
|
||
<!--
|
||
ANWENDUNGSSCHICHT: Protokolle, die NutzerInnen direkt betreffen
|
||
PORTS erklärt:
|
||
- Server lauscht auf Port (wie Türnummer in Hochhaus)
|
||
- Client verbindet sich zu IP:Port
|
||
- Well-Known Ports: 0-1023 (brauchen Admin-Rechte)
|
||
- Registered Ports: 1024-49151
|
||
- Dynamic/Private: 49152-65535 (für Clients)
|
||
WICHTIGE PROTOKOLLE:
|
||
- HTTP/HTTPS: Hypertext Transfer Protocol, Webseiten (80/443)
|
||
- DNS: Domain Name System, Namensauflösung (53, UDP+TCP)
|
||
- SMTP/IMAP/POP3: E-Mail senden/empfangen (25,587/993/995)
|
||
- SSH: Secure Shell, verschlüsselte Fernsteuerung (22)
|
||
- FTP/SFTP: Dateitransfer (21/22)
|
||
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
|
||
|
||
**Menschen:** `www.hdm-stuttgart.de`
|
||
**Computer:** `212.132.79.37`
|
||
|
||
**DNS** = Domain Name System
|
||
→ Übersetzt Namen in IP-Adressen
|
||
|
||
<!--
|
||
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 klausur -->
|
||
|
||
# HTTP/S im Detail
|
||
|
||
---
|
||
|
||
<!-- _class: klausur -->
|
||
|
||
# HTTP-Request
|
||
|
||
```http
|
||
GET /index.html HTTP/1.1
|
||
Host: www.example.com
|
||
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
|
||
Accept: text/html,application/xhtml+xml
|
||
Accept-Language: de-DE,de;q=0.9,en;q=0.8
|
||
Connection: keep-alive
|
||
```
|
||
|
||
| Teil | Bedeutung |
|
||
|------|-----------|
|
||
| `GET` | Methode (was will ich?) |
|
||
| `/index.html` | Pfad (welche Ressource?) |
|
||
| `HTTP/1.1` | Protokoll-Version |
|
||
| `Host:` | Ziel-Server |
|
||
|
||
<!--
|
||
Header = Metadaten
|
||
Body kommt nach leerem Zeile (bei POST)
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: klausur -->
|
||
|
||
# HTTP-Response
|
||
|
||
```http
|
||
HTTP/1.1 200 OK
|
||
Content-Type: text/html; charset=UTF-8
|
||
Content-Length: 1234
|
||
|
||
```
|
||
|
||
**Status-Codes:**
|
||
- **2xx** Erfolg
|
||
- **3xx** Umleitung
|
||
- **4xx** Client-Fehler (Browser, App, WhatsApp)
|
||
- **5xx** Server-Fehler (Instagram, Google, HdM)
|
||
|
||
<!--
|
||
200 OK, 404 Not Found, 500 Internal Error
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: klausur -->
|
||
|
||
# HTTP-Methoden
|
||
|
||
| Methode | CRUD | Zweck | Beispiel |
|
||
|---------|------|-------|----------|
|
||
| **GET** | Read | Daten abrufen | Seite laden |
|
||
| **POST** | Create | Daten senden | Formular absenden |
|
||
| **PUT** | Update | Daten ersetzen | Profil aktualisieren |
|
||
| **PATCH** | Update | Daten teilweise ändern | Einzelnes Feld |
|
||
| **DELETE** | Delete | Daten löschen | Account löschen |
|
||
|
||
<!--
|
||
REST-APIs nutzen diese Methoden
|
||
GET = idempotent (mehrfach = gleiches Ergebnis)
|
||
POST = nicht idempotent
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Teil 2: CSS
|
||
## Webseiten gestalten
|
||
|
||
---
|
||
|
||
# Was ist CSS?
|
||
|
||
**C**ascading **S**tyle **S**heets
|
||
|
||
- Trennt **Inhalt** (HTML) von **Darstellung** (CSS)
|
||
- "Cascading" = Regeln können überschrieben werden
|
||
- Eine CSS-Datei für viele HTML-Seiten
|
||
|
||
```css
|
||
p {
|
||
color: blue;
|
||
font-size: 16px;
|
||
}
|
||
```
|
||
|
||
<!--
|
||
Erfunden 1996
|
||
Vor CSS: Inline-Styles, <font>-Tags (Horror!)
|
||
Separation of Concerns
|
||
-->
|
||
|
||
---
|
||
|
||
# CSS einbinden
|
||
|
||
**Option 1: Externe Datei** (empfohlen!)
|
||
```html
|
||
<link rel="stylesheet" href="style.css">
|
||
```
|
||
|
||
**Option 2: Style-Tag**
|
||
```html
|
||
<style>p { color: blue; }</style>
|
||
```
|
||
|
||
**Option 3: Inline als HTML-Attribute** (vermeiden!)
|
||
```html
|
||
<p style="color: blue;">...</p>
|
||
```
|
||
|
||
<!--
|
||
Externe Datei = wiederverwendbar, cachebar
|
||
Option 3 vermeiden aufgrund der hohen Spezifiät (sog. Code Smell)
|
||
-->
|
||
|
||
---
|
||
|
||
# CSS-Anatomie
|
||
|
||
```css
|
||
selector {
|
||
property: value;
|
||
property: value;
|
||
}
|
||
```
|
||
|
||
**Beispiel:**
|
||
```css
|
||
h1 {
|
||
color: #333333;
|
||
font-size: 2rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
```
|
||
|
||
<!--
|
||
Selector = Was wird gestylt?
|
||
Property = Welche Eigenschaft?
|
||
Value = Welcher Wert?
|
||
Semikolon am Ende jeder Zeile!
|
||
-->
|
||
|
||
---
|
||
|
||
# Selektoren: Element
|
||
|
||
```css
|
||
/* Alle <p>-Elemente */
|
||
p {
|
||
color: gray;
|
||
}
|
||
|
||
/* Alle <h1>-Elemente */
|
||
h1 {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
/* Mehrere Elemente */
|
||
h1, h2, h3 {
|
||
font-family: sans-serif;
|
||
}
|
||
```
|
||
|
||
<!--
|
||
Einfachster Selektor
|
||
Betrifft ALLE Elemente dieses Typs
|
||
-->
|
||
|
||
---
|
||
|
||
# Selektoren: Klasse
|
||
|
||
```html
|
||
<p class="wichtig">Dieser Text ist wichtig.</p>
|
||
<p>Dieser nicht.</p>
|
||
```
|
||
|
||
```css
|
||
/* Alle Elemente mit class="wichtig" */
|
||
.wichtig {
|
||
color: red;
|
||
font-weight: bold;
|
||
}
|
||
```
|
||
|
||
**Punkt** vor dem Namen = Klasse
|
||
|
||
<!--
|
||
Klassen sind wiederverwendbar
|
||
Ein Element kann mehrere Klassen haben
|
||
class="wichtig gross rot"
|
||
-->
|
||
|
||
---
|
||
|
||
# Selektoren: ID
|
||
|
||
```html
|
||
<nav id="hauptnavigation">...</nav>
|
||
```
|
||
|
||
```css
|
||
/* Element mit id="hauptnavigation" */
|
||
#hauptnavigation {
|
||
background: #333;
|
||
padding: 1rem;
|
||
}
|
||
```
|
||
|
||
**Raute** vor dem Namen = ID
|
||
|
||
⚠️ IDs sollten **einmalig** pro Seite sein!
|
||
|
||
<!--
|
||
ID = unique identifier
|
||
Für CSS: Klassen bevorzugen
|
||
IDs für JavaScript/Anker-Links
|
||
-->
|
||
|
||
---
|
||
|
||
# Selektoren: Kombinationen
|
||
|
||
```css
|
||
/* Nachfahre (egal wie tief verschachtelt) */
|
||
article p {
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Direktes Kind */
|
||
nav > a {
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* Nächstes Geschwister */
|
||
h2 + p {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
/* Element mit Klasse */
|
||
p.wichtig {
|
||
color: red;
|
||
}
|
||
```
|
||
|
||
<!--
|
||
Leerzeichen = Nachfahre (beliebig tief)
|
||
> = direktes Kind
|
||
+ = unmittelbar folgendes Geschwister
|
||
-->
|
||
|
||
---
|
||
|
||
# Spezifität: Wer gewinnt?
|
||
|
||
**Wenn mehrere Regeln auf ein Element zutreffen:**
|
||
|
||
| Selektor | Spezifität |
|
||
|----------|------------|
|
||
| Element (`p`) | 0,0,0,1 |
|
||
| Klasse (`.wichtig`) | 0,0,1,0 |
|
||
| ID (`#header`) | 0,1,0,0 |
|
||
| Inline (`style="..."`) | 1,0,0,0 |
|
||
|
||
**Höhere Spezifität gewinnt!**
|
||
|
||
```css
|
||
p { color: blue; } /* 0,0,0,1 */
|
||
.text { color: green; } /* 0,0,1,0 → gewinnt! */
|
||
```
|
||
|
||
<!--
|
||
Specificity Calculator online
|
||
Höhere Zahl links gewinnt
|
||
Bei Gleichstand: Letzte Regel gewinnt
|
||
!important überschreibt alles (vermeiden!)
|
||
-->
|
||
|
||
---
|
||
|
||
# Box-Modell
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ margin │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ border │ │
|
||
│ │ ┌─────────────────────┐ │ │
|
||
│ │ │ padding │ │ │
|
||
│ │ │ ┌─────────────┐ │ │ │
|
||
│ │ │ │ content │ │ │ │
|
||
│ │ │ └─────────────┘ │ │ │
|
||
│ │ └─────────────────────┘ │ │
|
||
│ └─────────────────────────────┘ │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
<!--
|
||
Jedes Element ist eine Box
|
||
Content = Inhalt
|
||
Padding = Innenabstand
|
||
Border = Rahmen
|
||
Margin = Außenabstand
|
||
-->
|
||
|
||
---
|
||
|
||
# Box-Modell: CSS
|
||
|
||
```css
|
||
.box {
|
||
/* Inhalt */
|
||
width: 200px;
|
||
height: 100px;
|
||
|
||
/* Innenabstand */
|
||
padding: 20px;
|
||
|
||
/* Rahmen */
|
||
border: 2px solid black;
|
||
|
||
/* Außenabstand */
|
||
margin: 10px;
|
||
|
||
/* Berechnung vereinfachen */
|
||
box-sizing: border-box;
|
||
}
|
||
```
|
||
|
||
<!--
|
||
box-sizing: border-box = width inkl. padding+border
|
||
Standard: content-box = width nur content
|
||
border-box fast immer besser!
|
||
-->
|
||
|
||
---
|
||
|
||
# Farben in CSS
|
||
|
||
```css
|
||
/* Keyword */
|
||
color: red;
|
||
color: rebeccapurple;
|
||
|
||
/* Hex (RGB) */
|
||
color: #FF0000;
|
||
color: #F00; /* Kurzform */
|
||
|
||
/* RGB/RGBA */
|
||
color: rgb(255, 0, 0);
|
||
color: rgba(255, 0, 0, 0.5); /* 50% transparent */
|
||
|
||
/* HSL */
|
||
color: hsl(0, 100%, 50%); /* Hue, Saturation, Lightness */
|
||
```
|
||
|
||
<!--
|
||
Hex = kompakt, weit verbreitet
|
||
RGBA = mit Transparenz
|
||
HSL = intuitiver für Farbänderungen
|
||
-->
|
||
|
||
---
|
||
|
||
# Einheiten
|
||
|
||
| Einheit | Bedeutung | Beispiel |
|
||
|---------|-----------|----------|
|
||
| `px` | Pixel (absolut) | `font-size: 16px` |
|
||
| `%` | Prozent vom Parent | `width: 50%` |
|
||
| `em` | Relativ zur Schriftgröße | `padding: 1em` |
|
||
| `rem` | Relativ zur Root-Schriftgröße | `font-size: 1.5rem` |
|
||
| `vw/vh` | Viewport-Breite/-Höhe | `height: 100vh` |
|
||
|
||
**Empfehlung:** `rem` für Schrift, `%` oder `vw/vh` für Layout
|
||
|
||
<!--
|
||
px = pixelgenau, aber nicht responsive
|
||
rem = konsistent, skaliert mit Browser-Zoom
|
||
vw/vh = Viewport (sichtbarer Bereich)
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _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 -->
|
||
|
||
# Teil 3: Layouts (optional)
|
||
## Flexbox & mehr
|
||
|
||
---
|
||
|
||
# Das Layout-Problem
|
||
|
||
**Früher:**
|
||
- `float: left` (Hack!)
|
||
- Tabellen für Layout (Horror!)
|
||
- Absolute Positionierung
|
||
|
||
**Heute:**
|
||
- **Flexbox** – Eindimensional (Zeile ODER Spalte)
|
||
- **Grid** – Zweidimensional (Zeilen UND Spalten)
|
||
|
||
<!--
|
||
CSS war lange schlecht für Layouts
|
||
Flexbox seit ~2012 stabil
|
||
Grid seit ~2017 stabil
|
||
-->
|
||
|
||
---
|
||
|
||
# Flexbox: Grundlagen
|
||
|
||
```css
|
||
.container {
|
||
display: flex;
|
||
}
|
||
```
|
||
|
||
```html
|
||
<div class="container">
|
||
<div>Item 1</div>
|
||
<div>Item 2</div>
|
||
<div>Item 3</div>
|
||
</div>
|
||
```
|
||
|
||
**Ergebnis:** Items nebeneinander (Zeile)
|
||
|
||
<!--
|
||
Parent = Flex Container
|
||
Children = Flex Items
|
||
Standardrichtung: row (Zeile)
|
||
-->
|
||
|
||
---
|
||
|
||
# Flexbox: Richtung
|
||
|
||
```css
|
||
.container {
|
||
display: flex;
|
||
flex-direction: row; /* Standard: Zeile */
|
||
flex-direction: column; /* Spalte */
|
||
flex-direction: row-reverse;
|
||
flex-direction: column-reverse;
|
||
}
|
||
```
|
||
|
||
<!--
|
||
row = horizontal (links nach rechts)
|
||
column = vertikal (oben nach unten)
|
||
reverse = umgekehrte Reihenfolge
|
||
-->
|
||
|
||
---
|
||
|
||
# Flexbox: Ausrichtung
|
||
|
||
```css
|
||
.container {
|
||
display: flex;
|
||
|
||
/* Hauptachse (horizontal bei row) */
|
||
justify-content: flex-start; /* Links */
|
||
justify-content: center; /* Mitte */
|
||
justify-content: flex-end; /* Rechts */
|
||
justify-content: space-between; /* Verteilt */
|
||
justify-content: space-around;
|
||
|
||
/* Querachse (vertikal bei row) */
|
||
align-items: flex-start; /* Oben */
|
||
align-items: center; /* Mitte */
|
||
align-items: flex-end; /* Unten */
|
||
align-items: stretch; /* Strecken */
|
||
}
|
||
```
|
||
|
||
<!--
|
||
justify-content = Hauptachse
|
||
align-items = Querachse
|
||
Achsen tauschen bei column!
|
||
-->
|
||
|
||
---
|
||
|
||
# Flexbox: Zentrieren
|
||
|
||
**Das berühmte "Vertikal zentrieren":**
|
||
|
||
```css
|
||
.container {
|
||
display: flex;
|
||
justify-content: center; /* Horizontal */
|
||
align-items: center; /* Vertikal */
|
||
height: 100vh; /* Volle Höhe */
|
||
}
|
||
```
|
||
|
||
**Früher:** Dutzende Hacks nötig
|
||
**Heute:** 3 Zeilen CSS
|
||
|
||
<!--
|
||
Historisch schwieriges Problem
|
||
Flexbox löst es elegant
|
||
-->
|
||
|
||
---
|
||
|
||
# Flexbox: Items
|
||
|
||
```css
|
||
.item {
|
||
/* Wachsen */
|
||
flex-grow: 1; /* Nimmt verfügbaren Platz */
|
||
|
||
/* Schrumpfen */
|
||
flex-shrink: 1; /* Schrumpft bei Platzmangel */
|
||
|
||
/* Basisgröße */
|
||
flex-basis: 200px;
|
||
|
||
/* Kurzform */
|
||
flex: 1; /* grow: 1, shrink: 1, basis: 0 */
|
||
flex: 0 0 200px; /* grow: 0, shrink: 0, basis: 200px */
|
||
}
|
||
```
|
||
|
||
<!--
|
||
flex: 1 = gleichmäßig verteilen
|
||
flex: 0 0 200px = fixe Größe
|
||
-->
|
||
|
||
---
|
||
|
||
# Flexbox: Beispiel Navigation
|
||
|
||
```css
|
||
nav {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 1rem 2rem;
|
||
background: #333;
|
||
}
|
||
|
||
nav a {
|
||
color: white;
|
||
text-decoration: none;
|
||
padding: 0.5rem 1rem;
|
||
}
|
||
|
||
nav a:hover {
|
||
background: #555;
|
||
}
|
||
```
|
||
|
||
<!--
|
||
Klassisches Navigations-Layout
|
||
Logo links, Links rechts
|
||
Oder gleichmäßig verteilt
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: klausur -->
|
||
|
||
# Pseudo-Klassen
|
||
|
||
```css
|
||
/* Zustände */
|
||
a:hover { color: red; }
|
||
a:visited { color: purple; }
|
||
input:focus { border-color: blue; }
|
||
|
||
/* Struktur */
|
||
li:first-child { font-weight: bold; }
|
||
li:nth-child(odd) { background: #eee; }
|
||
```
|
||
|
||
<!--
|
||
Pseudo-Klassen = Zustände, kein JavaScript nötig!
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: klausur -->
|
||
|
||
# Pseudo-Elemente
|
||
|
||
```css
|
||
.required::before {
|
||
content: "* ";
|
||
color: red;
|
||
}
|
||
|
||
p::first-letter { font-size: 2em; }
|
||
p::first-line { font-weight: bold; }
|
||
```
|
||
|
||
**Unterschied:** `:` = Pseudo-Klasse · `::` = Pseudo-Element
|
||
|
||
<!--
|
||
content nur bei ::before/::after
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: klausur -->
|
||
|
||
# Responsive Design
|
||
|
||
**Media Queries:** CSS je nach Bildschirmgröße
|
||
|
||
```css
|
||
/* Mobile First: Standard */
|
||
.container { padding: 1rem; }
|
||
|
||
/* Ab 768px (Tablet) */
|
||
@media (min-width: 768px) {
|
||
.container { padding: 2rem; max-width: 720px; }
|
||
}
|
||
```
|
||
|
||
**Breakpoints:** 768px (Tablet) · 1024px (Desktop) · 1280px (Large)
|
||
|
||
<!--
|
||
Mobile First = Standard für klein, dann größere überschreiben
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Teil 4: CSS vertiefen
|
||
## Transitions & moderne Features
|
||
|
||
---
|
||
|
||
# Transitions: Sanfte Übergänge
|
||
|
||
```css
|
||
.button {
|
||
background: #3498db;
|
||
color: white;
|
||
padding: 1rem 2rem;
|
||
border: none;
|
||
cursor: pointer;
|
||
|
||
/* Transition */
|
||
transition: background 0.3s ease;
|
||
}
|
||
|
||
.button:hover {
|
||
background: #2980b9;
|
||
}
|
||
```
|
||
|
||
**Kein JavaScript nötig!**
|
||
|
||
<!--
|
||
transition: property duration timing-function
|
||
ease = sanfter Anfang/Ende
|
||
linear = gleichmäßig
|
||
ease-in-out = sanft beides
|
||
-->
|
||
|
||
---
|
||
|
||
# Transitions: Mehrere Properties
|
||
|
||
```css
|
||
.card {
|
||
background: white;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
transform: translateY(0);
|
||
|
||
transition:
|
||
box-shadow 0.3s ease,
|
||
transform 0.3s ease;
|
||
}
|
||
|
||
.card:hover {
|
||
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
|
||
transform: translateY(-4px);
|
||
}
|
||
```
|
||
|
||
<!--
|
||
Schwebendes Karten-Design
|
||
Moderne UI-Technik
|
||
Subtil aber wirkungsvoll
|
||
-->
|
||
|
||
---
|
||
|
||
# CSS Custom Properties (Variablen)
|
||
|
||
```css
|
||
:root {
|
||
--primary-color: #3498db;
|
||
--secondary-color: #2ecc71;
|
||
--text-color: #333;
|
||
--spacing: 1rem;
|
||
}
|
||
|
||
.button {
|
||
background: var(--primary-color);
|
||
padding: var(--spacing);
|
||
color: white;
|
||
}
|
||
|
||
.button.secondary {
|
||
background: var(--secondary-color);
|
||
}
|
||
```
|
||
|
||
<!--
|
||
:root = html-Element
|
||
Variablen beginnen mit --
|
||
var() zum Abrufen
|
||
Änderung an einer Stelle → überall aktualisiert
|
||
-->
|
||
|
||
---
|
||
|
||
# Dark Mode
|
||
|
||
```css
|
||
:root {
|
||
--bg-color: white;
|
||
--text-color: #333;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--bg-color: #1a1a1a;
|
||
--text-color: #eee;
|
||
}
|
||
}
|
||
|
||
body {
|
||
background: var(--bg-color);
|
||
color: var(--text-color);
|
||
}
|
||
```
|
||
|
||
<!--
|
||
Automatisch je nach System-Einstellung
|
||
prefers-color-scheme Media Query
|
||
Variablen machen's einfach
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Fragen & Diskussion
|
||
|
||
**Nächster Termin:** 24.01.2026 – JavaScript
|
||
|
||
**Kontakt:** mail@librete.ch
|
||
|
||
---
|
||
|
||
# Lizenz
|
||
|
||
Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
|
||
|
||
Basiert auf Material von:
|
||
- Markus Thamm / Wolfgang Gruel (HdM Stuttgart)
|
||
- Michael Czechowski
|
||
|
||
Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
|