Michael Czechowski
64e67b7034
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"
1530 lines
35 KiB
Markdown
1530 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 1: Geschichte, Grundlagen & HTML"
|
||
---
|
||
|
||
<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 1 – 20.12.2025
|
||
## Geschichte, Grundlagen & HTML
|
||
|
||
---
|
||
|
||
# Kursübersicht
|
||
|
||
**3 Termine (10:00 – 16:30 Uhr):**
|
||
|
||
| # | Datum | Thema |
|
||
|---|-------|-------|
|
||
| 1 | 20.12.2025 | Geschichte, Grundlagen & **HTML** |
|
||
| 2 | 10.01.2026 | Netzwerke, Protokolle, **semantisches HTML** & **CSS** |
|
||
| 3 | 24.01.2026 | Interaktivität, Animationen & **JavaScript** |
|
||
|
||
**Format:** Theorie + viele Hands-On-Übungen
|
||
|
||
**Ziel:** "Gelernte Hilflosigkeit" ablegen
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Teil 1: Die Geschichte
|
||
## Von der Geburtsstunde des erten Computer-Algorithmus bis zur Vernetzung des gesamten Globus
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Ada Lovelace, Daguerreotypie 1843
|
||
Antoine Claudet
|
||
-->
|
||
|
||
---
|
||
|
||
|
||
|
||
# Ada Lovelace (1815–1852)
|
||
|
||
**Die erste Programmiererin der Welt**
|
||
|
||
- Arbeitete mit **Charles Babbage** an der "Analytical Engine"
|
||
- Ihre »Notes« zu Babbages Maschine: **umfangreicher als sein Text**
|
||
- 1843 publiziert – unter Initialen »A.A.L.« Ada Augusta Lovelace
|
||
- Erst **1953** wiederentdeckt und gewürdigt
|
||
- Schrieb **1843** den ersten Algorithmus für eine Maschine, die nie fertiggestellt wurde
|
||
|
||
<!--
|
||
Babbage: Mathematiker, besessen von Rechenmaschinen. Erst die Difference Engine, dann die Analytical Engine – nie fertig gebaut, aber revolutionär im Konzept.
|
||
|
||
Ada: Tochter von Lord Byron, dem Dichter. Die Mutter – selbst Mathematikerin – hatte Angst, Ada könnte den "Wahnsinn" des Vaters erben. Also: strikte naturwissenschaftliche Erziehung. Weg von der Poesie, hin zur Logik.
|
||
|
||
5. Juni 1833, Ada ist 17: Sie trifft Babbage bei seinen legendären »Saturday night soirées«. Elitekreise. Er zeigt ihr seine Maschine – und sie versteht sie. Besser als fast alle anderen.
|
||
|
||
1835 heiratet sie William King → Ada King, Countess of Lovelace.
|
||
|
||
Das Zusammenspiel dieser beiden: Ein Ingenieur, der Hardware baut. Eine Dichterstochter, die Software denkt. 100 Jahre vor den ersten echten Computern.
|
||
|
||
Programmiersprache "Ada" (1980) nach ihr benannt.
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Herman Hollerith, ca. 1890
|
||
-->
|
||
|
||
---
|
||
|
||
|
||
|
||
# Herman Hollerith (1860–1929)
|
||
|
||
**Das Problem:** US-Volkszählung 1880 dauerte **7 Jahre** zur Auswertung
|
||
|
||
**Die Lösung:** Lochkarten + elektromechanische Tabelliermaschine
|
||
|
||
**1890 Census:** 62 Millionen Menschen in **2,5 Jahren** gezählt
|
||
|
||
**Ersparnis:** 5 Millionen Dollar (damals!)
|
||
|
||
<!--
|
||
Hollerith: Deutsch-amerikanischer Ingenieur
|
||
Inspiration: Jacquard-Webstuhl (Lochkarten für Muster)
|
||
Lochkarte = erstes standardisiertes Datenformat
|
||
Eine Karte = ein Datensatz (eine Person)
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Hollerith-Lochkartenmaschine, ca. 1908
|
||
US Census Bureau
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Hollerith-Lochkartenmaschine, ca. 1940
|
||
US Census Bureau
|
||
-->
|
||
|
||
---
|
||
|
||
# Die Geburt von IBM
|
||
|
||
**1896:** Hollerith gründet "Tabulating Machine Company"
|
||
|
||
**1911:** Fusion → "Computing-Tabulating-Recording Company" (CTR)
|
||
|
||
**1924:** Umbenennung in **International Business Machines (IBM)**
|
||
|
||
IBM dominiert die nächsten 50 Jahre die Computerwelt.
|
||
|
||
<!--
|
||
Thomas J. Watson Sr. → "THINK"-Motto
|
||
IBM = "Big Blue"
|
||
Lochkarten = Standard bis in die 1970er
|
||
Heute: IBM als Cloud- und AI-Unternehmen (Watson, Red Hat)
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Hollerith-Maschinen im Dritten Reich
|
||
Dehomag = Deutsche Hollerith-Maschinen GmbH (IBM-Tochter)
|
||
-->
|
||
|
||
---
|
||
|
||
|
||
|
||
# IBM und NS-Deutschland
|
||
|
||
**Dehomag** = Deutsche Hollerith-Maschinen GmbH (IBM-Tochter)
|
||
|
||
**Einsatz:**
|
||
- Volkszählung 1933 (Identifikation von Juden)
|
||
- Verwaltung der Konzentrationslager
|
||
- Logistik der Deportationen
|
||
|
||
**Edwin Black:** *"IBM and the Holocaust"* (2001)
|
||
|
||
<!--
|
||
Kontroverse Geschichte
|
||
IBM profitierte, lieferte Maschinen, wartete sie
|
||
"Technologie ist neutral" – wirklich?
|
||
Wichtige Lektion für MedienethikerInnen
|
||
-->
|
||
|
||
---
|
||
|
||
# Lektionen für heute
|
||
|
||
* Technologie ist nie neutral
|
||
|
||
|
||
<!--
|
||
* **2025:**
|
||
* Big Data
|
||
* Generative KI
|
||
* Social Media
|
||
* Rasterfahndung ([https://netzpolitik.org/](https://netzpolitik.org/2025/stuttgart-buendnis-plant-demonstration-gegen-palantir-einsatz/))
|
||
|
||
Facebook, Cambridge Analytica, Oracle Blue Kai
|
||
Gesichtserkennung, Überwachung, Social Credit System (China)
|
||
Verantwortung von TechnikerInnen und MedienarbeiterInnen
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Vom Ende des Zweiten Weltkriegs
|
||
## Geburt des modernen Computers
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Alan Turing, ca. 1940
|
||
Bletchley Park
|
||
-->
|
||
|
||
---
|
||
|
||
# Alan Turing (1912–1954)
|
||
|
||
**Vater der theoretischen Informatik**
|
||
|
||
- 1936: **Turing-Maschine** – theoretisches Modell eines Computers
|
||
- 1939–1945: **Bletchley Park** – Enigma-Entschlüsselung
|
||
- 1950: "Computing Machinery and Intelligence" → **Turing-Test**
|
||
- **2013:** Posthume königliche Begnadigung
|
||
|
||
<!--
|
||
Genialer Mathematiker und Logiker
|
||
Rettete vermutlich Millionen Leben durch Enigma-Arbeit
|
||
Erst 2009 offizielle Entschuldigung der brit. Regierung
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Bletchley Park, England
|
||
Geheimes Entschlüsselungszentrum im WWII
|
||
-->
|
||
|
||
---
|
||
|
||
# Enigma & Bletchley Park
|
||
|
||
**Das Problem:** Deutsche Enigma-Maschine erzeugte 158 Trillionen mögliche Einstellungen
|
||
|
||
**Turings Lösung:** "Bombe" Elektro-mechanischer Entschlüssler
|
||
|
||
**Ergebnis:**
|
||
- Alliierten konnten deutschen Funkverkehr mitlesen
|
||
|
||
**Geheim bis 1970er!** Turing starb ohne Anerkennung.
|
||
|
||
<!--
|
||
Enigma: Elektrische Rotor-Chiffriermaschine
|
||
Täglich neue Einstellungen
|
||
Bombe: Vorläufer moderner Computer
|
||
Parallelisierte Berechnung
|
||
-->
|
||
|
||
---
|
||
|
||
# Die Turing-Maschine (1936)
|
||
|
||
**Theoretisches Modell eines Computers:**
|
||
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ ... │ 0 │ 1 │ 1 │ 0 │ 1 │ 0 │ ... │ ← Unendliches Band
|
||
└─────────────────────────────────────────┘
|
||
↑
|
||
┌─────────────┐
|
||
│ Lese-/ │
|
||
│ Schreibkopf │
|
||
└─────────────┘
|
||
↓
|
||
┌─────────────┐
|
||
│ Zustand │ ← Endliche Zustände
|
||
└─────────────┘
|
||
```
|
||
|
||
**Beweis:** Alles Berechenbare kann so berechnet werden!
|
||
→ Grundlage für **alle** modernen Computer
|
||
|
||
<!--
|
||
Abstraktes Gedankenmodell
|
||
Kein echter Bau nötig
|
||
Church-Turing-These
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
---
|
||
|
||
# Das Manhattan-Projekt (1942–1945)
|
||
|
||
**Ziel:** Bau der ersten Atombombe
|
||
|
||
**Problem:** Berechnung von Implosionswellen
|
||
→ Millionen von Berechnungen nötig
|
||
|
||
**Team:**
|
||
- J. Robert Oppenheimer (Leitung)
|
||
- Richard Feynman (Rechenabteilung)
|
||
- **John von Neumann** (Mathematik & Stoßwellen)
|
||
|
||
<!--
|
||
Los Alamos, New Mexico
|
||
Geheimes Labor, beste WissenschaftlerInnen der Welt
|
||
Von Neumann kam 1943 als Berater
|
||
-->
|
||
|
||
---
|
||
|
||
|
||
|
||
# John von Neumann (1903–1957)
|
||
|
||
- Geboren in Budapest, Österreich-Ungarn
|
||
- Mit 8: Konnte Telefonbücher auswendig
|
||
- Mit 22: Doktor in Mathematik
|
||
|
||
**Beiträge:**
|
||
- Quantenmechanik
|
||
- Spieltheorie
|
||
- **Computerarchitektur**
|
||
|
||
<!--
|
||
Neumann János Lajos → John von Neumann
|
||
Sprach 7 Sprachen fließend
|
||
Legendäre Anekdoten über sein Gedächtnis
|
||
Arbeitete am Manhattan-Projekt mit
|
||
-->
|
||
|
||
---
|
||
|
||
# Das Problem der Berechnung
|
||
|
||
**Manhattan-Projekt brauchte:**
|
||
- Ballistik-Berechnungen
|
||
- Implosions-Simulationen
|
||
- Nuklearphysik-Gleichungen
|
||
|
||
**Lösung 1943:** Menschliche "Computer"
|
||
→ Mit Taschenrechnern, Tabellen, IBM-Lochkarten
|
||
|
||
**Zu langsam** → Bedarf an automatischer Berechnung
|
||
|
||
<!--
|
||
"Computer" war ein Job-Titel!
|
||
Meist Mathematikerinnen
|
||
Feynman leitete eine Abteilung davon
|
||
ENIAC-Projekt in Philadelphia sollte helfen
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
ENIAC (1945)
|
||
Electronic Numerical Integrator and Computer
|
||
University of Pennsylvania
|
||
-->
|
||
|
||
---
|
||
|
||
# ENIAC (1945)
|
||
|
||
**Electronic Numerical Integrator and Computer**
|
||
|
||
- **30 Tonnen**, 167 m² Fläche
|
||
- **18.000 Vakuumröhren**
|
||
- 5.000 Additionen pro Sekunde
|
||
- Programmierung durch **Umstecken von Kabeln**
|
||
|
||
**Problem:** Bei jedem neuen Problem → Wochen Umverkabelung
|
||
|
||
<!--
|
||
Kam zu spät für Manhattan-Projekt (Krieg war vorbei)
|
||
Aber bewies: Elektronische Berechnung möglich
|
||
Programmiert durch 6 Frauen (ENIAC Girls)
|
||
→ Erste ProgrammiererInnen der Geschichte
|
||
-->
|
||
|
||
---
|
||
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Grace Hopper, ca. 1984
|
||
US Navy
|
||
-->
|
||
|
||
---
|
||
|
||
|
||
|
||
# Grace Hopper (1906–1992)
|
||
|
||
**"Amazing Grace" – Pionierin der Softwareentwicklung**
|
||
|
||
- **1944:** Programmierte den Mark I (Harvard)
|
||
- **1952:** Entwickelte den ersten **Compiler** (A-0)
|
||
- **1959:** Mitentwicklung von **COBOL**
|
||
- **Rear Admiral** der US Navy
|
||
|
||
**Der erste "Bug":**
|
||
1947 fand sie eine echte Motte im Mark II
|
||
→ "Debugging" wurde zum Begriff
|
||
|
||
<!--
|
||
Compiler: Übersetzt menschenlesbare Sprache in Maschinencode
|
||
COBOL läuft heute noch auf Bankensystemen
|
||
"It's easier to ask forgiveness than permission"
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Margaret Hamilton mit dem Quellcode der Apollo-Flugsoftware, 1969
|
||
MIT/NASA
|
||
-->
|
||
|
||
---
|
||
|
||
|
||
|
||
# Margaret Hamilton (*1936)
|
||
|
||
**Pionierin des Software Engineering**
|
||
|
||
- **1965–1969:** Leitete das Software-Team am MIT für Apollo
|
||
- Entwickelte die **Flugsoftware für Apollo 11**
|
||
- Prägte den Begriff **"Software Engineering"**
|
||
- Software verhinderte Abbruch der Mondlandung
|
||
|
||
**Apollo 11 (1969):**
|
||
Ihre Fehlererkennung rettete die Mission, als der Computer überlastet wurde
|
||
|
||
<!--
|
||
Das Foto zeigt sie neben dem ausgedruckten Quellcode – größer als sie selbst
|
||
Die Software priorisierte kritische Aufgaben automatisch
|
||
2016 erhielt sie die Presidential Medal of Freedom
|
||
-->
|
||
|
||
---
|
||
|
||
# Von Neumanns Idee (1945)
|
||
|
||
**"First Draft of a Report on the EDVAC"**
|
||
|
||
**Kernidee:** Programm und Daten im **selben Speicher**
|
||
|
||
**Vorher:** Hardware = Programm (Umstecken)
|
||
**Nachher:** Software = austauschbar (laden)
|
||
|
||
→ **Gespeichertes Programm** = Revolution
|
||
|
||
<!--
|
||
EDVAC = Electronic Discrete Variable Automatic Computer
|
||
Nachfolger von ENIAC
|
||
Von Neumann schrieb den Bericht
|
||
Daher: "Von-Neumann-Architektur"
|
||
-->
|
||
|
||
---
|
||
|
||
# Von-Neumann-Architektur
|
||
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ CPU │
|
||
│ ┌─────────────┐ ┌─────────────────┐ │
|
||
│ │ Rechenwerk │ │ Steuerwerk │ │
|
||
│ │ (ALU) │ │ (Control Unit) │ │
|
||
│ └─────────────┘ └─────────────────┘ │
|
||
└─────────────────────────────────────────┘
|
||
↕ Bus-System ↕
|
||
┌─────────────────┐ ┌──────────────────┐
|
||
│ Speicherwerk │ │ Ein-/Ausgabewerk │
|
||
│ (Memory) │ │ (I/O) │
|
||
└─────────────────┘ └──────────────────┘
|
||
```
|
||
|
||
<!--
|
||
5 Grundkomponenten
|
||
JEDER Computer folgt diesem Prinzip
|
||
Euer Laptop, euer Handy, der Server dieser Präsentation
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: klausur -->
|
||
|
||
# Die 5 Komponenten
|
||
|
||
| Komponente | Funktion |
|
||
|------------|----------|
|
||
| **Rechenwerk (ALU)** | Führt Berechnungen durch |
|
||
| **Steuerwerk** | Interpretiert Befehle, steuert Ablauf |
|
||
| **Speicherwerk** | Speichert Programme UND Daten |
|
||
| **Ein-/Ausgabe** | Tastatur, Bildschirm, Netzwerk |
|
||
| **Bus-System** | Verbindet alle Komponenten |
|
||
|
||
**Wichtig:** Programme und Daten **gemeinsam** im Speicher!
|
||
|
||
<!--
|
||
VON-NEUMANN-ARCHITEKTUR (1945): Grundlage aller modernen Computer
|
||
5 KOMPONENTEN:
|
||
- ALU (Arithmetic Logic Unit): Rechnet (+, -, ×, ÷) und vergleicht (>, <, =)
|
||
- Steuerwerk: Holt Befehle, dekodiert sie, steuert Ausführung (Fetch-Decode-Execute)
|
||
- Speicherwerk: RAM (flüchtig) + ROM (permanent), enthält Code UND Daten
|
||
- Ein-/Ausgabe (I/O): Tastatur, Maus, Bildschirm, Netzwerk, USB, Sensoren
|
||
- Bus-System: Adressbus (wo), Datenbus (was), Steuerbus (wie)
|
||
KERNPRINZIP: Stored Program Concept - Programme im selben Speicher wie Daten
|
||
VORHER (z.B. ENIAC): Programme durch Umstecken von Kabeln, tagelange Arbeit
|
||
NACHHER: Programme als austauschbare Daten → Flexibilität, Software-Industrie möglich
|
||
PRÜFUNGSRELEVANT: 5 Komponenten benennen und erklären können, Stored Program Concept
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: klausur -->
|
||
|
||
# Von-Neumann-Architektur: Bedeutung
|
||
|
||
**Ohne Von-Neumann-Architektur:**
|
||
- Kein Betriebssystem
|
||
- Keine Apps
|
||
- Kein Multitasking
|
||
- Keine Updates bzw. Veränderungen am Computer System
|
||
|
||
**Die meisten Computer** basieren auf diesem Prinzip:
|
||
Laptop, Smartphone, Server, Spielkonsole...
|
||
|
||
**Ausnahme:** Mikrocontroller & DSPs nutzen oft die **Harvard-Architektur**
|
||
(separate Speicher für Code und Daten → schneller für Echtzeitanwendungen)
|
||
|
||
<!--
|
||
BEDEUTUNG VON-NEUMANN-ARCHITEKTUR:
|
||
- Betriebssystem möglich: Lädt verschiedene Programme aus gleichem Speicher
|
||
- Apps installierbar: Können gelöscht/installiert werden ohne Hardware-Änderung
|
||
- Multitasking: Mehrere Programme gleichzeitig im Speicher
|
||
- Updates: Software austauschbar, Hardware bleibt gleich
|
||
- Universalrechner: Gleiche Hardware für Text, Spiele, Video, Wissenschaft
|
||
HARVARD-ARCHITEKTUR (Alternative):
|
||
- Separate Speicher für Code und Daten
|
||
- Vorteil: Schneller (paralleler Zugriff), sicherer (Code nicht überschreibbar)
|
||
- Nachteil: Weniger flexibel, aufwändiger
|
||
- Anwendung: Mikrocontroller (Arduino, ESP32), DSPs, einige ARM-Chips
|
||
MODERNE CPUs: Modified Harvard (L1-Cache getrennt für Speed, RAM gemeinsam für Flexibilität)
|
||
PRÜFUNGSRELEVANT: Warum Von-Neumann revolutionär, Unterschied zu Harvard, Beispiele
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Vom Militär zum Netz
|
||
## Die Entstehung des Internets
|
||
|
||
---
|
||
|
||
# Das Problem (1960er)
|
||
|
||
**Kalter Krieg:**
|
||
- Was passiert bei einem Nuklearangriff?
|
||
- Zentrale Kommunikation → ein Treffer = alles tot
|
||
|
||
**DARPA** (Defense Advanced Research Projects Agency):
|
||
→ Dezentrales Netzwerk, das Angriffe überlebt
|
||
|
||
<!--
|
||
ARPA (später DARPA) = Pentagon-Forschung
|
||
Sputnik-Schock 1957 → USA investiert in Forschung
|
||
Paul Baran (RAND Corp): Packet Switching
|
||
-->
|
||
|
||
---
|
||
|
||
# Internet-Timeline
|
||
|
||
| Jahr | Meilenstein |
|
||
|------|-------------|
|
||
| **1966** | ARPANET-Projekt startet |
|
||
| **1969** | Erste Verbindung: UCLA <-> Stanford |
|
||
| **1974** | TCP/IP-Protokoll entwickelt |
|
||
| **1983** | ARPANET wechselt zu TCP/IP |
|
||
| **1989** | Tim Berners-Lee erfindet das WWW |
|
||
| **1993** | Erster grafischer Browser (Mosaic) |
|
||
| **1995** | Kommerzialisierung, Amazon/eBay gegründet |
|
||
|
||
<!--
|
||
ARPANET: 4 Knoten anfangs
|
||
Erste Nachricht: "LO" (Login, Absturz nach 2 Buchstaben!)
|
||
WWW ≠ Internet (WWW ist eine Anwendung AUF dem Internet)
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
ARPANET-Karte 1969
|
||
4 Knoten: UCLA, Stanford, UCSB, Utah
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
ARPANET-Karte 1969
|
||
4 Knoten: UCLA, Stanford, UCSB, Utah
|
||
-->
|
||
|
||
---
|
||
|
||
# Das WWW (1989)
|
||
|
||
**Tim Berners-Lee** am CERN (Genf)
|
||
|
||
**Problem:** WissenschaftlerInnen können Dokumente nicht verlinken
|
||
|
||
**Lösung:**
|
||
- **HTML** – Auszeichnungssprache für Dokumente
|
||
- **HTTP** – Protokoll zum Übertragen
|
||
- **URL** – Eindeutige Adressen
|
||
|
||
**1991:** Erste Webseite geht online
|
||
|
||
<!--
|
||
CERN = Europäische Organisation für Kernforschung
|
||
Berners-Lee wollte Forschungspapiere verlinken
|
||
WWW war NICHT kommerziell geplant!
|
||
Kostenlos freigegeben → darum existiert es
|
||
-->
|
||
|
||
---
|
||
|
||
# 1,3 Millionen Kilometer Unterseekabel
|
||
|
||
**Heute:**
|
||
|
||
- **5,5 Milliarden** Menschen online
|
||
- **>400** Unterseekabel weltweit
|
||
- Daten reisen mit **Lichtgeschwindigkeit** (Glasfaser)
|
||
|
||
**Das Internet ist physisch!** Keine "Cloud" ohne Kabel.
|
||
|
||
<!--
|
||
Google, Meta, Microsoft besitzen eigene Kabel
|
||
Sabotage-Risiko (Russland, Anker)
|
||
Latenz: Frankfurt → New York = ~80ms
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Teil 2: Bits & Bytes
|
||
## Die Sprache der Computer
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Bit = Binary Digit
|
||
Demonstration: Glühbirne AN/AUS = 1 Bit
|
||
-->
|
||
|
||
---
|
||
|
||
# Das Bit
|
||
|
||
**Kleinste Informationseinheit**
|
||
|
||
- **0 oder 1**
|
||
- AN oder AUS
|
||
- Strom fließt oder nicht
|
||
|
||
**BIT** = **B**inary Dig**IT** (Binärziffer)
|
||
Geprägt 1948 von Claude Shannon
|
||
|
||
<!--
|
||
Alles Digitale basiert darauf
|
||
Transistoren in CPUs: Milliarden Bits schalten Millionen Mal pro Sekunde
|
||
Shannon: Begründer der Informationstheorie
|
||
-->
|
||
|
||
---
|
||
|
||
# Das Byte
|
||
|
||
**8 Bits = 1 Byte**
|
||
|
||
```
|
||
0 1 0 0 1 0 0 1
|
||
```
|
||
|
||
**Wie viele Kombinationen?**
|
||
2⁸ = **256 Möglichkeiten** (0-255)
|
||
|
||
<!--
|
||
BYTE = Wortspiel aus "Bit" + "Bite" (Bissen)
|
||
Warum 8 Bits? IBM System/360 (1964) setzte Standard
|
||
2×2×2×2×2×2×2×2 = 256
|
||
-->
|
||
|
||
---
|
||
|
||
# Was kann man mit 256 Zuständen machen?
|
||
|
||
- **256 Zeichen** (Buchstaben, Zahlen, Symbole)
|
||
- **256 Graustufen** (0 = Schwarz, 255 = Weiß)
|
||
- **256 Lautstärkestufen**
|
||
- **Zahlen 0-255**
|
||
|
||
**Für Farbe:** 3 Bytes pro Pixel (RGB)
|
||
R=0-255, G=0-255, B=0-255 → **16,7 Millionen Farben**
|
||
|
||
<!--
|
||
1 Byte ist limitiert
|
||
Farbbild: Rot + Grün + Blau
|
||
256³ = 16.777.216 Farben
|
||
-->
|
||
|
||
---
|
||
|
||
# Hexadezimal: Lesbarkeit
|
||
|
||
**Binär ist unleserlich:**
|
||
`01001101 01010000 00110011`
|
||
|
||
**Hexadezimal (Base 16):**
|
||
`4D 50 33` (= "MP3" in ASCII)
|
||
|
||
**Jede Hex-Ziffer = 4 Bits**
|
||
0-9, A-F (A=10, B=11, ..., F=15)
|
||
|
||
**Ihr kennt das:** `#FF0000` = Rot in CSS
|
||
|
||
<!--
|
||
Hex = Shortcut für Menschen
|
||
1 Byte = 2 Hex-Ziffern (00-FF)
|
||
CSS-Farben nutzen Hex
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
---
|
||
|
||
# Wo begegnet euch Hex?
|
||
|
||
| Kontext | Beispiel |
|
||
|---------|----------|
|
||
| CSS-Farben | `#FF5733` |
|
||
| MAC-Adressen | `00:1A:2B:3C:4D:5E` |
|
||
| Fehlercodes | `0x80070005` |
|
||
| Speicheradressen | `0xA04F20` |
|
||
| Unicode | `U+00E4` (ä) |
|
||
|
||
→ Hex ist überall in der Technik
|
||
|
||
<!--
|
||
Präfixe:
|
||
- 0x = "das ist Hexadezimal" (C, JavaScript, Python)
|
||
- U+ = Unicode-Codepoint (Standard für Zeichenkodierung)
|
||
- # = CSS-Konvention für Farben
|
||
|
||
Speicheradressen erklärt:
|
||
- 64-Bit-System → Adresse hat 64 Bit = 16 Hex-Ziffern
|
||
- Beispiel vollständig: 0x0000000000A04F20
|
||
^^^^^^^^^^
|
||
└── führende Nullen, meist ungenutzt
|
||
- Tools kürzen zu: 0xA04F20 (führende Nullen weggelassen)
|
||
- "0x" = Präfix, sagt nur "jetzt kommt Hex"
|
||
|
||
MAC-Adresse = eindeutige Hardware-ID der Netzwerkkarte
|
||
Fehlercodes: Windows zeigt diese bei Bluescreens
|
||
-->
|
||
|
||
---
|
||
|
||
# Bits vs. Bytes: Die Verwirrung
|
||
|
||
**1 Byte = 8 Bit** → Bits ÷ 8 = Bytes
|
||
|
||
| Einheit (Bit) | Einheit (Byte) |
|
||
|---------------|----------------|
|
||
| 1 Kbit = 1.000 Bit | 1 KB = 1.000 Byte |
|
||
| 1 Mbit = 1.000.000 Bit | 1 MB = 1.000.000 Byte |
|
||
| 1 Gbit = 1 Mrd. Bit | 1 GB = 1 Mrd. Byte |
|
||
|
||
**Praxis:** 100 Mbit/s Internet = **12,5 MB/s** Download
|
||
|
||
**Aber:** Computer rechnen binär (Basis 2)!
|
||
|
||
<!--
|
||
Bits = kleines b, Bytes = großes B
|
||
Internetanbieter: Mbit/s (klingt größer!)
|
||
100 Mbit/s ÷ 8 = 12,5 MB/s
|
||
Warum? Marketing - 100 klingt besser als 12,5
|
||
-->
|
||
|
||
---
|
||
|
||
# Warum zeigt meine 1TB-Festplatte nur 931GB?
|
||
|
||
**Zwei Zählweisen:**
|
||
|
||
| Dezimal (Hersteller) | Binär (Computer) |
|
||
|---------------------|------------------|
|
||
| Kilo = 1.000 | Kibi = 1.024 (2¹⁰) |
|
||
| Mega = 1.000.000 | Mebi = 1.048.576 (2²⁰) |
|
||
| Giga = 1.000.000.000 | Gibi = 1.073.741.824 (2³⁰) |
|
||
| Tera = 1.000.000.000.000 | Tebi = 1.099.511.627.776 (2⁴⁰) |
|
||
|
||
**Das Problem:**
|
||
- Hersteller verkauft: 1 TB = 1.000.000.000.000 Bytes
|
||
- Computer rechnet: 1 TiB = 1.099.511.627.776 Bytes
|
||
- Differenz: **9,1%** → zeigt nur **931 GB**
|
||
|
||
<!--
|
||
Dezimal: SI-System (Système International) - Basis 10
|
||
Binär: IEC-Standard (International Electrotechnical Commission) - Basis 2
|
||
Kibi/Mebi/Gibi = Kunstwörter für binäre Einheiten
|
||
Hersteller nutzen Dezimal = klingt größer = Marketing
|
||
Windows zeigt binär, schreibt aber "GB" statt "GiB"
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Teil 3: Eure erste Webseite
|
||
## HTML-Grundlagen
|
||
|
||
---
|
||
|
||
# Was ist HTML? (1/2)
|
||
|
||
**H**yper**T**ext **M**arkup **L**anguage
|
||
|
||
* **Keine** Programmiersprache
|
||
* Am ehesten eine Formattierungssprache
|
||
* Beschreibt **Struktur und Aufbau** einer Webseite
|
||
* ```html
|
||
<p>Das ist ein Absatz.</p>
|
||
|
||
<input type="date"/>
|
||
```
|
||
|
||
|
||
|
||
<!--
|
||
HTML = Auszeichnungssprache (wie Markdown)
|
||
Erfunden 1989 von Tim Berners-Lee
|
||
Aktuelle Version: HTML5 (seit 2014)
|
||
-->
|
||
|
||
---
|
||
|
||
# Was ist HTML? (2/2)
|
||
|
||
* Mit HTML werden **HTML-Dokumente** beschrieben (bspw. `index.html`)
|
||
* Ein HTML-Dokument beschreibt das/den `Document Object Model (DOM)`
|
||
* Der DOM ist eine **hierarchische Baumstruktur** (Kind- und Elternelemente)
|
||
* *parent nodes / elements*
|
||
* *child nodes / elements*
|
||
* *sibling nodes / elements*
|
||
* <small>Während wir in HTML von Elementen bzw. *elements* sprechen, so werden sie in JavaScript (JS) eher als *nodes* gelesen.</small>
|
||
|
||
---
|
||
|
||
# HTML-Anatomie (1/2)
|
||
|
||
Formattierungssprache
|
||
|
||
* HTML folgt einer strengen **Syntax** zur Formattieren von digitalen Inhalten
|
||
* Syntax: `<element attribute="value"> ... </element>`
|
||
* Öffnende und schließende HTML-Tags müssen identisch sein
|
||
* Das schließende Tag muss ein `/` nach der Spitzenklammer haben
|
||
|
||
---
|
||
|
||
# HTML-Anatomie (2/2)
|
||
|
||
* Wir unterscheiden zwischen **umschließende** und **selbst-schließende** HTML-Tags
|
||
* **Umschließend**
|
||
* `<b> ... </b>` fett-gedruckter Text (inline)
|
||
* `<a> ... </a>` Hyperlink (Verlinkung zu anderen Webseiten, Bildern)
|
||
* `<body> ... </body>` Sichtbarer Teil eines HTML-Dokuments
|
||
* `<details> ... </details>` Collapsable / Akkordion / Aufklapp-Text
|
||
* **Selbst-schließend**
|
||
* `<img />` Bild, Vektorgrafik etc.
|
||
* `<input />` Eingabefeld
|
||
* `<meta />` Metadaten
|
||
---
|
||
|
||
# Darstellungsebene und Metadaten
|
||
|
||
```html
|
||
<html>
|
||
<head>
|
||
METADATEN
|
||
</head>
|
||
|
||
<body>
|
||
DARSTELLUNGSEBENE
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
* Ein HTML-Dokument besteht grundsätzlich aus zwei Teilen:
|
||
* `<head> ... </head>` Metadaten für den Browser, zum Teilen, für Suchmaschinen
|
||
* `<body> ... </body>` Darzustellender Inhalt, Text, Formulare
|
||
|
||
---
|
||
|
||
<!-- _class: klausur -->
|
||
|
||
# HTML Metadaten
|
||
|
||
```html
|
||
<html>
|
||
<head>
|
||
<title>Im Browsertab als Überschrift sichtbar</title>
|
||
|
||
<meta name="description" content="" />
|
||
|
||
<meta name="og:image" content="https://...." />
|
||
</head>
|
||
|
||
...
|
||
|
||
</html>
|
||
```
|
||
|
||
* <small>*Webseiten werden nicht nur von Menschen besucht, sondern auch von Suchmaschinen, Programmen, Bots etc.*</small>
|
||
* <small>*Metadaten helfen bspw. auch Screen-Readern beim "Verstehen" der Inhalte*</small>
|
||
|
||
<!--
|
||
HEAD-BEREICH: Metadaten, nicht sichtbar im Browser-Fenster
|
||
WICHTIGE META-TAGS:
|
||
- <title>: Browser-Tab, Lesezeichen, Suchergebnis-Titel
|
||
- <meta name="description">: Suchergebnis-Snippet (max. 160 Zeichen)
|
||
- <meta name="viewport">: Mobile Darstellung (width=device-width)
|
||
- <meta charset="UTF-8">: Zeichenkodierung (Umlaute!)
|
||
OPEN GRAPH (og:*): Social Media Vorschau (Facebook, LinkedIn, WhatsApp)
|
||
- og:title, og:description, og:image, og:url
|
||
TWITTER CARDS: twitter:card, twitter:title, twitter:image
|
||
SEO-RELEVANZ: Google nutzt title + description für Ranking und Snippet
|
||
ACCESSIBILITY: <html lang="de"> für Screenreader-Aussprache
|
||
PRÜFUNGSRELEVANT: Was gehört in <head>, Unterschied zu <body>, wichtigste Meta-Tags
|
||
-->
|
||
|
||
---
|
||
|
||
# HTML-Tags und Attribute
|
||
|
||
```html
|
||
<body>
|
||
<p class="wichtig">Das ist ein Absatz.</p>
|
||
</body>
|
||
```
|
||
|
||
| Teil | Bezeichnung |
|
||
|------|-------------|
|
||
| `<p>` | Opening Tag (öffnendes Tag) |
|
||
| `class="wichtig"` | Attribut |
|
||
| `Das ist ein Absatz.` | Inhalt |
|
||
| `</p>` | Closing Tag (schließendes Tag) |
|
||
|
||
---
|
||
|
||
# HTML-Tags und Attribute (selbst-schließend)
|
||
|
||
```html
|
||
<input type="" />
|
||
```
|
||
|
||
| Teil | Bezeichnung |
|
||
|------|-------------|
|
||
| `<input ...` | Eingabefeld |
|
||
| `type="date"` | Attribut *type* mit dem Wert *date* |
|
||
| `... />` | Schließendes `/` im *(öffnenden) Tag* enthalten |
|
||
|
||
---
|
||
|
||
# Vollständiges Grundgerüst
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<title>Portfolio von ...</title>
|
||
<meta name="description" content="Hier gibt es die besten ..." />
|
||
<meta name="og:image" content="https://...." />
|
||
</head>
|
||
<body>
|
||
<h1>Hallo Welt!</h1>
|
||
<p>Das ist mein erster Absatz.</p>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
---
|
||
|
||
# Die wichtigsten Tags
|
||
|
||
| Tag | Bedeutung |
|
||
|-----|-----------|
|
||
| `<h1>` bis `<h6>` | Überschriften (h1 = größte) |
|
||
| `<p>` | Absatz (Paragraph) |
|
||
| `<a href="..."> ... </a>` | Hyper-Link |
|
||
| `<img src="..."/>` | Bild |
|
||
| `<ul>`, `<ol>`, `<li>` | Listen |
|
||
| `<div>` | Container/Box |
|
||
| `<span>` | Inline-Container |
|
||
| `<input type="...">` | Eingabefeld/Input |
|
||
|
||
<!--
|
||
Semantische Tags wichtig für Accessibility
|
||
h1 sollte nur einmal pro Seite vorkommen
|
||
a = anchor (Anker)
|
||
-->
|
||
|
||
---
|
||
|
||
# Hands-On: Werkzeuge einrichten
|
||
|
||
**Option 1: Texteditor + Browser**
|
||
- Notepad, TextEdit oder DreamWeaver
|
||
- Speichern als `index.html` → Im Browser öffnen
|
||
|
||
**Option 2: VS Code** (empfohlen)
|
||
- [https://code.visualstudio.com](https://code.visualstudio.com)
|
||
- Extension: "Live Server"
|
||
|
||
**Option 3: Online-Editoren**
|
||
- [https://codepen.io/pen/](https://codepen.io/pen/)
|
||
|
||
---
|
||
|
||
# Natives HTML
|
||
|
||
Was noch üblicherweise mit Skriptsprachen wie JavaScript und anderen umgesetzt werden musste, kann nun HTML selber. Wer dieses dennoch verwendet, hat das einen sog. *"Code smell"*.
|
||
|
||
| Funktion | HTML-Element |
|
||
|----------|--------------|
|
||
| Aufklapp-Text | `<details>` + `<summary>` |
|
||
| Popup/Modal | `<dialog>` |
|
||
| Fortschrittsbalken | `<progress>` |
|
||
| Datum-Auswahl | `<input type="date">` |
|
||
| Validierung | Attribute beliebig verknüpfbar `required`, `min`, `max` |
|
||
|
||
<!--
|
||
Progressive Enhancement
|
||
HTML kann mehr als die meisten denken
|
||
JavaScript nur wenn wirklich nötig
|
||
Accessibility ist eingebaut
|
||
-->
|
||
|
||
---
|
||
|
||
# Beispiel: Details/Summary
|
||
|
||
```html
|
||
<details>
|
||
<summary>Klick mich!</summary>
|
||
<p>Dieser Text war versteckt.</p>
|
||
</details>
|
||
```
|
||
|
||
https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details
|
||
|
||
---
|
||
|
||
# Beispiel: Details/Summary (geöffnet)
|
||
|
||
```html
|
||
<details open>
|
||
<summary>Klick mich!</summary>
|
||
<p>Dieser Text war versteckt.</p>
|
||
</details>
|
||
```
|
||
|
||
https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details#erstellen_einer_offenen_disclosure-box
|
||
|
||
---
|
||
|
||
|
||
# Beispiel: Button
|
||
|
||
```html
|
||
<button>Add to favorites</button>
|
||
```
|
||
|
||
https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/button
|
||
|
||
---
|
||
|
||
# Beispiel: Input/Eingabefeld
|
||
|
||
```html
|
||
<input
|
||
type="text"
|
||
maxlength="8"
|
||
size="10" />
|
||
```
|
||
|
||
https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input
|
||
|
||
---
|
||
|
||
# Beispiel: Dialog
|
||
|
||
```html
|
||
<dialog open>
|
||
<p>Greetings, one and all!</p>
|
||
<form method="dialog">
|
||
<button>OK</button>
|
||
</form>
|
||
</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 -->
|
||
|
||
# Fragen & Diskussion
|
||
|
||
**Nächster Termin:** 10.01.2026 – CSS & Netzwerke
|
||
|
||
**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/
|