uni/slides/223015c/01-geschichte-grundlagen-html.md

---
marp: true
theme: gaia
paginate: true
backgroundColor: #fff
header: "Grundlagen IT- und Internettechnik (223015c)"
footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
title: "Kapitel 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;
}
@media print {
  section.klausur {
    background: #fce4ec !important;
  }
}
section.aufgabe {
  background: #fce4ec !important;
}
section.aufgabe footer {
  display: none;
}
section.erklaerung {
  font-size: 1.1rem;
  background: repeating-linear-gradient(
    135deg,
    #fce4ec,
    #fce4ec 40px,
    #fff 40px,
    #fff 80px
  ) !important;
}
@media print {
  section.erklaerung {
    background: #fce4ec !important;
  }
}
section.erklaerung h1 {
  font-size: 1.5rem;
  color: #a02060;
  margin-bottom: 0.3rem;
}
section.erklaerung ul,
section.erklaerung ol {
  font-size: 1.0rem;
  line-height: 1.4;
}
section.erklaerung p {
  font-size: 1.0rem;
  line-height: 1.4;
}
section.erklaerung table {
  font-size: 0.9rem;
}
</style>

<!-- _class: invert -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: black -->

![bg fit opacity:0.2](./assets/background-termin-2.png)

# Grundlagen IT- und Internettechnik

**223015c** · Modul "Technik 1" · 1. Semester
Digital- und Medienwirtschaft
Hochschule der Medien Stuttgart

**Sommersemester 2026**

[https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/)

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/qr/slides-223015c.png)

---

# Kursübersicht

**Kapitel:**

1. Geschichte, Grundlagen & **HTML**
2. Netzwerke, Protokolle, **semantisches HTML** & **CSS**
3. Interaktivität, Animationen & **JavaScript**

**Ziel:** "Gelernte Hilflosigkeit" ablegen

---

<!-- _class: lead -->

# Kapitel 1
## Geschichte, Grundlagen & HTML

---

<!-- _class: lead -->

# Die Geschichte des Computers
## Vom ersten Algorithmus bis zum globalen Netzwerk

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/Ada_Lovelace.jpg)

<!--
Ada Lovelace, Daguerreotypie 1843
Antoine Claudet
-->

---

![bg right:30% contain](./assets/Ada_Lovelace.jpg)

# Ada Lovelace (1815–1852)

**Die erste Programmiererin der Welt**

- Erste Programmiererin – 100 Jahre vor dem ersten Computer
- Zusammenarbeit mit Charles Babbage an der *Analytical Engine*
- Ihre Notizen: umfangreicher als sein Originaltext
- Erst 1953 wiederentdeckt und gewürdigt

<!--
Babbage: Mathematiker, besessen von Rechenmaschinen. Erste Maschine: Difference Engine (reine Rechenmaschine). Zweite Maschine: Analytical Engine – programmierbar, mit Lochkarten gesteuert. 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: '' -->

![bg fit](./assets/Hollerith.jpg)

<!--
Herman Hollerith, ca. 1890
-->

---

![bg right:30% contain](./assets/Hollerith.jpg)

# Herman Hollerith (1860–1929)

**Erfinder der Lochkarten-Datenverarbeitung**

- **Problem:** Volkszählung 1880 brauchte 7 Jahre zur Auswertung
- **Lösung:** Lochkarten + elektromechanische Tabelliermaschine
- **Ergebnis:** 1890 Census in 2,5 Jahren – 5 Mio. Dollar gespart
- Gründete Firma, die später zu IBM wurde

<!--
Hollerith: Deutsch-amerikanischer Ingenieur, Statistiker am US Census Bureau.

Das Problem: Die USA wuchsen so schnell, dass die Volkszählung von 1880 erst 1887 fertig ausgewertet war – die nächste Zählung stand schon bevor.

Inspiration: Jacquard-Webstuhl. Dieser französische Webstuhl nutzte seit 1804 Lochkarten zur Steuerung komplexer Muster. Hollerith übertrug das Prinzip auf Daten.

Seine Innovation: Eine Lochkarte = ein Datensatz (eine Person). Die Position der Löcher codierte Informationen (Alter, Geschlecht, Beruf etc.). Elektromechanische Maschine las die Karten und zählte automatisch.

1896 gründete er die Tabulating Machine Company. Nach mehreren Fusionen entstand daraus 1924 IBM – International Business Machines.

Die Lochkarte blieb bis in die 1970er das Standardformat für Dateneingabe.
-->

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/hollerith-machine.jpg)

<!--
Hollerith-Lochkartenmaschine, ca. 1908
US Census Bureau
-->

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/hollerith-machine-2.jpg)

<!--
Hollerith-Lochkartenmaschine
-->

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/hollerith-machine-3.jpg)

<!--
Hollerith-Lochkartenmaschine, ca. 1940
US Census Bureau
-->

---

# Die Geburt von IBM

**Vom Einmannbetrieb zum Technologieriesen**

- 1896: Hollerith gründet *Tabulating Machine Company*
- 1911: Fusion zur *Computing-Tabulating-Recording Company* (CTR)
- 1924: Umbenennung in **International Business Machines (IBM)**
- Dominiert die nächsten 50 Jahre die Computerwelt

<!--
Thomas J. Watson Sr. übernahm 1914 die Führung und prägte IBM entscheidend. Sein Motto: "THINK" – stand auf Schildern in jedem IBM-Büro.

Warum "Big Blue"? IBMs Firmenfarbe war dunkelblau, ihre Großrechner hatten blaue Gehäuse. Der Spitzname entstand in den 1960ern.

Geschäftsmodell: IBM verkaufte nicht nur Maschinen, sondern vermietete sie – inklusive Wartung. Kunden waren abhängig. Ein frühes "Software-as-a-Service"-Modell.

Lochkarten blieben Standard bis in die 1970er. Die 80-Spalten-Karte prägte sogar frühe Bildschirmbreiten (80 Zeichen).

Heute: IBM hat sich neu erfunden – Cloud-Computing, KI (Watson), und 2019 Übernahme von Red Hat für 34 Milliarden Dollar.
-->

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/dehomag-hollerith.webp)

<!--
Hollerith-Maschinen im Dritten Reich
Dehomag = Deutsche Hollerith-Maschinen GmbH (IBM-Tochter)
-->

---

![bg right:30% contain](./assets/IBM_Front_Cover_2021_from_Amazon.jpg)

# IBM und NS-Deutschland

**Technologie im Dienst des Terrors**

- **Dehomag:** Deutsche Hollerith-Maschinen GmbH (IBM-Tochter)
- Volkszählung 1933: Identifikation von Juden
- Verwaltung der Konzentrationslager
- Logistik der Deportationen

→ Edwin Black: *"IBM and the Holocaust"* (2001)

<!--
Die Volkszählung 1933 fragte erstmals systematisch nach "Rasse" und Religion. Lochkarten ermöglichten die schnelle Auswertung – wer war Jude, wer Halbjude, wer mit wem verheiratet?

Dehomag war IBMs profitabelste Auslandstochter. IBM lieferte nicht nur Maschinen, sondern auch maßgeschneiderte Lochkarten und Wartung. Die Maschinen in den KZs trugen IBM-Seriennummern.

Edwin Blacks Buch basiert auf tausenden Dokumenten. IBM bestritt die Vorwürfe, zahlte aber 2001 Entschädigungen an Holocaust-Überlebende.

Die Frage für MedienarbeiterInnen: Hätte IBM "Nein" sagen können? Sollen? Müssen? Technologie ist nie neutral – sie wird von Menschen für Zwecke eingesetzt.
-->

---

<!-- _class: lead -->

# Vom Ende des Zweiten Weltkriegs
## Geburt des modernen Computers

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/alan-turing.jpg)

<!--
Alan Turing, ca. 1940
Bletchley Park
-->

---

# Alan Turing (1912–1954)

**Begründer der theoretischen Informatik**

- 1936: Turing-Maschine – definiert, was Computer können (und was nicht)
- 1940er: Enigma-Entschlüsselung mit elektromechanischen Maschinen
- 1950: Turing-Test – erste formale Definition von "Künstlicher Intelligenz"

<!--
Alan Turing war seiner Zeit Jahrzehnte voraus. Mit 24 Jahren definierte er, was "Berechnung" mathematisch bedeutet – bevor es echte Computer gab.

Bletchley Park: Geheimes Entschlüsselungszentrum 80 km nördlich von London. 10.000 Menschen arbeiteten dort, darunter viele Frauen. Streng geheim bis in die 1970er.

Seine Arbeit verkürzte den Krieg um geschätzte 2-4 Jahre und rettete Millionen Leben. Aber er durfte nie darüber sprechen.

1952 wurde Turing wegen Homosexualität verurteilt – damals illegal in Großbritannien. Er wurde chemisch kastriert. 1954 starb er an Zyanidvergiftung, vermutlich Suizid. Er war 41.

2009: Offizielle Entschuldigung von Premierminister Gordon Brown.
2013: Königliche Begnadigung durch Queen Elizabeth II.
2021: 50-Pfund-Schein mit Turings Porträt.
-->

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg contain](./assets/turing-test.png)

<!--
Der Turing-Test (1950): Ein Interrogator kommuniziert per Text mit einem Menschen und einer Maschine. Kann er nicht zuverlässig unterscheiden, wer wer ist, besteht die Maschine den Test.
-->

---

# Das Manhattan-Projekt (1942–1945)

**Problem:** Millionen von Berechnungen nötig für:
- Ballistik-Berechnungen
- Implosions-Simulationen
- Nuklearphysik-Gleichungen

**Lösung 1943:** Menschliche "Computer"
→ Mathematikerinnen mit Taschenrechnern & IBM-Lochkarten

**Zu langsam** → Bedarf an automatischer Berechnung

**Schlüsselfigur:** John von Neumann (Mathematik & Stoßwellen)

<!--
Los Alamos, New Mexico – geheimes Labor, beste WissenschaftlerInnen der Welt.

"Computer" war ein Job-Titel! Meist Mathematikerinnen. Richard Feynman leitete eine Abteilung davon.

Von Neumann kam 1943 als Berater. Seine mathematischen Fähigkeiten waren legendär.

Das ENIAC-Projekt in Philadelphia sollte die Berechnungen beschleunigen.
-->

---

![bg right:40%](./assets/john-von-neumann.png)

# 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
-->

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg](./assets/eniac.avif)

<!--
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
-->

---

# Von-Neumann-Architektur (1945)

**Die zentrale Idee: Programme und Daten im selben Speicher**

**Vorher (z.B. ENIAC):** Programme durch Umstecken von Kabeln
→ Tagelange Arbeit für jedes neue Problem

**Nachher:** Programme als austauschbare Daten im Speicher
→ Grundlage aller Computer: Laptop, Smartphone, Server

<!--
John von Neumann beschrieb 1945 das Prinzip im "First Draft of a Report on the EDVAC".

Vorher (ENIAC): Programme durch Umstecken von Kabeln – tagelange Arbeit für jedes neue Problem. Nachher: Programme als Daten im Speicher – austauschbar in Sekunden.

Das Revolutionäre: Programme liegen im selben Speicher wie Daten. Das klingt selbstverständlich, war aber ein Paradigmenwechsel. Vorher war ein Computer eine Maschine für genau ein Problem.

Der "Von-Neumann-Flaschenhals": CPU und Speicher teilen sich einen Bus – die Bandbreite begrenzt die Geschwindigkeit. Moderne CPUs umgehen das mit Caches (L1/L2/L3).
-->

---

<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: #fce4ec -->

# Von-Neumann: 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 |

<!--
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 -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: #fce4ec -->

# 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
-->

---


<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/First_Computer_Bug,_1947.jpg)


---


<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/Grace_Hopper.jpg)

<!--
Grace Hopper, ca. 1984
US Navy
-->

---

![bg right:30% contain](./assets/Grace_Hopper.jpg)

# 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: '' -->

![bg fit](./assets/hammilton.jpg)

<!--
Margaret Hamilton mit dem Quellcode der Apollo-Flugsoftware, 1969
MIT/NASA
-->

---

![bg right:30% contain](./assets/hammilton-portrait.jpg)

# 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
-->

---

# Lektionen für heute

**Technologie ist nie neutral**

- Big Data ermöglicht Massenüberwachung
- KI-Systeme übernehmen Entscheidungen über Menschen
- Social Media schädigt die psychische Gesundheit Minderjähriger
- PimEyes: RAF-Terroristin in 30 Minuten gefunden – Polizei brauchte 30 Jahre

→ Verantwortung liegt bei denen, die Technologie bauen und einsetzen

<!--
Aktuelle Beispiele (in Reihenfolge der Folie):

1. Big Data / Palantir: US-Firma liefert Überwachungssoftware an Polizei und Geheimdienste. In Deutschland nutzen es bereits Hessen, NRW, Bayern und Baden-Württemberg. Kritiker warnen vor "Rasterfahndung auf Knopfdruck".
Quellen: https://www.zdfheute.de/politik/deutschland/palantir-einsatz-polizei-deutschland-alternative-100.html
https://www.heise.de/en/news/Baden-Wuerttemberg-decides-on-the-use-of-Palantir-11075477.html

2. KI-Systeme: Algorithmen entscheiden über Kreditvergabe, Bewerbungen, Sozialleistungen. Oft intransparent, oft diskriminierend. Beispiel: Niederlande "Toeslagenaffaire" – Steuerbehörde nutzte Algorithmus, der Familien mit Migrationshintergrund systematisch als Betrüger einstufte. Regierung Rutte trat 2021 zurück.
Quelle: https://netzpolitik.org/2021/kindergeldaffaere-niederlande-zahlen-millionenstrafe-wegen-datendiskriminierung/

3. Social Media: 2026 verloren Meta und Google einen Prozess in Kalifornien – ihre Plattformen schädigen nachweislich die psychische Gesundheit Minderjähriger.
Quelle: https://www.latimes.com/california/story/2026-03-25/social-media-lawsuit-trial-meta-google-verdict

4. PimEyes/Clearview: Gesichtserkennungsdienste mit Milliarden Fotos aus dem Internet. Februar 2024: Ein Journalist fand RAF-Terroristin Daniela Klette in 30 Minuten – die Polizei hatte 30 Jahre gesucht. Beide Dienste gelten in der EU als illegal.
Quelle: https://netzpolitik.org/2024/nancy-faeser-was-das-innenministerium-zur-gesichtserkennung-plant/

Weitere Beispiele:

Cambridge Analytica (2018): Facebook-Daten von 87 Mio. Nutzern wurden für politische Werbung genutzt. Ob das tatsächlich Wahlen beeinflusst hat, ist umstritten – die Firmen behaupten es gerne, Belege fehlen.

China Social Credit System: Punktesystem für "gutes Verhalten". Wer zu oft bei Rot geht, bekommt keinen Kredit mehr.

Die Frage: Wer entscheidet, was mit Technologie gemacht wird? Die Entwickler? Die Firmen? Die Politik? Wir alle?
-->

---

<!-- _class: lead -->

# Vom Militär zum Netz
## Die Entstehung des Internets

---

# Kalter Krieg: Das Problem der Kommunikation

**1957:** Sputnik-Schock → USA investiert massiv in Forschung
→ **ARPA** (Advanced Research Projects Agency) wird gegründet

**Das Problem:** Zentrale Netzwerke sind verwundbar
→ Ein Treffer = gesamte Kommunikation tot

**Die Idee (Paul Baran, 1964):** Packet Switching
→ Nachrichten in kleine Pakete aufteilen
→ Jedes Paket findet seinen eigenen Weg
→ Kein einzelner Punkt kann das Netz zerstören

<!--
Sputnik-Schock (4. Oktober 1957): Die Sowjetunion schießt den ersten künstlichen Satelliten ins All – "Sputnik 1". Die USA sind schockiert: Wenn die Sowjets Satelliten in den Orbit bringen können, können sie auch Atomwaffen über Kontinente schießen. Die gefühlte technologische Überlegenheit der USA ist über Nacht zerstört.

Reaktion: Präsident Eisenhower gründet 1958 ARPA (Advanced Research Projects Agency) im Pentagon. Auftrag: Die USA sollen nie wieder technologisch überrascht werden. ARPA finanziert Grundlagenforschung an Universitäten – daraus entsteht später das Internet.

Paul Baran (RAND Corporation, 1964): Entwickelt das Konzept des "Packet Switching". Statt einer durchgehenden Verbindung (wie beim Telefon) werden Nachrichten in kleine Pakete zerlegt. Jedes Paket wird unabhängig durchs Netz geroutet. Fällt ein Knoten aus, finden die Pakete einen anderen Weg. Das macht das Netz resilient gegen Angriffe.

Parallel und unabhängig: Donald Davies am britischen National Physical Laboratory entwickelt dasselbe Konzept und prägt den Begriff "Packet Switching".

ARPA wird später zu DARPA (Defense Advanced Research Projects Agency) umbenannt.
-->

---

# 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: '' -->

![bg](./assets/arpanet-1969.png)

<!--
ARPANET-Karte 1969
4 Knoten: UCLA, Stanford, UCSB, Utah
-->

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg](./assets/arpanet.jpg)

<!--
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
-->

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/img_633d7b91366e0-1025x538-768x403.jpg)

<!--
Unterseekabel-Karte: Über 400 Kabel verbinden die Kontinente.
Quelle: TeleGeography Submarine Cable Map
-->

---

# 1,3 Millionen Kilometer Unterseekabel

**Heute:**

- **5,5 Milliarden** Menschen online
- **>400** Unterseekabel weltweit
- Daten reisen mit **Lichtgeschwindigkeit** (Glasfaser)

Keine "Cloud" ohne Kabel – das Internet ist physische Infrastruktur.

**Five Eyes** (USA, UK, Kanada, Australien, Neuseeland):
→ Zapfen Unterseekabel an – globale Massenüberwachung

<!--
Google, Meta, Microsoft besitzen eigene Kabel
Sabotage-Risiko (Russland, Anker)
Latenz: Frankfurt → New York = ~80ms

Five Eyes: Geheimdienstallianz aus dem Zweiten Weltkrieg (UKUSA-Abkommen, 1946). Die fünf Länder teilen systematisch Überwachungsdaten. 2013 durch Edward Snowden enthüllt: NSA und GCHQ zapfen Unterseekabel direkt an (Programm "Tempora" des GCHQ, "Upstream" der NSA). Über diese Kabel läuft fast der gesamte internationale Internetverkehr – wer sie anzapft, kann potenziell alles mitlesen.

Erweiterte Allianzen: Nine Eyes (+Dänemark, Frankreich, Niederlande, Norwegen), Fourteen Eyes (+Deutschland, Belgien, Italien, Spanien, Schweden).

Deutschland ist also kein Five-Eyes-Mitglied, aber Teil der Fourteen Eyes. Der BND kooperiert eng mit der NSA (Operation Eikonal: BND leitete Daten vom Frankfurter Internetknoten DE-CIX an die NSA weiter).
-->

---

<!-- _class: lead -->

# Bits & Bytes
## Die Sprache der Computer

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg](./assets/lightbulb-onoff.png)

<!--
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: '' -->

![bg fit](./assets/hex-dec-lookup-table.png)

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/8bit-P-character.png)

---

# 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 = 8.000 Bit |
| 1 Mbit = 1.000.000 Bit | 1 MB = 1.000.000 Byte = 8 Mbit |
| 1 Gbit = 1 Mrd. Bit | 1 GB = 1 Mrd. Byte = 8 Gbit |

**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
-->

---

<!-- _class: lead -->

# Unsere 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 -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: #fce4ec -->

# 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
-->

---

<!-- _class: erklaerung -->
<!-- _header: '' -->
<!-- _footer: '' -->

# HTML Metadaten – Vertiefung

Der `<head>`-Bereich enthält Informationen *über* das Dokument, nicht den sichtbaren Inhalt. Diese Metadaten steuern Browser-Verhalten, Suchmaschinen-Indexierung und Social-Media-Vorschauen.

**Kritische Meta-Tags:**

| Tag | Funktion | Beispiel |
|-----|----------|----------|
| `<title>` | Browser-Tab, Suchergebnis-Titel | `<title>HdM Stuttgart</title>` |
| `<meta charset>` | Zeichenkodierung (Umlaute!) | `<meta charset="UTF-8">` |
| `<meta viewport>` | Mobile Darstellung | `width=device-width, initial-scale=1` |
| `<meta description>` | Suchergebnis-Snippet (max 160 Zeichen) | SEO-kritisch |

**Open Graph Protocol (Facebook, 2010):**
```html
<meta property="og:title" content="Artikel-Titel">
<meta property="og:image" content="https://example.com/preview.jpg">
```
Steuert die Vorschau beim Teilen auf Facebook, LinkedIn, WhatsApp, Slack.

**SEO-Relevanz:** Google nutzt `<title>` und `<meta description>` für Ranking und Snippet-Anzeige. Fehlende Metadaten = schlechtere Auffindbarkeit.

---

# 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: lead -->

# Web Disability Simulator

---

<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: #fce4ec -->

# 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: erklaerung -->
<!-- _header: '' -->
<!-- _footer: '' -->

# Web-Zugänglichkeit – Vertiefung

**a11y** = Accessibility (a + 11 Buchstaben + y). Die WHO schätzt, dass 15% der Weltbevölkerung eine Behinderung haben – das sind über 1 Milliarde potenzielle Nutzer.

**Arten von Einschränkungen:**

| Typ | Permanent | Temporär | Situativ |
|-----|-----------|----------|----------|
| Visuell | Blindheit | Nach Augen-OP | Grelle Sonne |
| Motorisch | Amputation | Gebrochener Arm | Baby auf dem Arm |
| Auditiv | Taubheit | Ohrenentzündung | Laute Umgebung |
| Kognitiv | Legasthenie | Müdigkeit | Ablenkung |

**Assistive Technologien:**
- **Screenreader:** NVDA (Windows, kostenlos), VoiceOver (Apple, integriert), JAWS (kommerziell)
- **Braillezeilen:** Taktile Ausgabe, ~40–80 Zeichen
- **Switch-Geräte:** Ein-Knopf-Steuerung für motorische Einschränkungen
- **Eye-Tracking:** Blicksteuerung für Bewegungsunfähige

Screenreader lesen den DOM sequenziell – semantisches HTML (`<nav>`, `<main>`, `<button>`) ermöglicht Navigation per Tastenkürzel.

---

<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: #fce4ec -->

# 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
-->

---

<!-- _class: erklaerung -->
<!-- _header: '' -->
<!-- _footer: '' -->

# Rechtliche Anforderungen – Vertiefung

Der **European Accessibility Act (EAA)** trat am 28. Juni 2025 in Kraft und betrifft erstmals auch private Unternehmen – nicht nur öffentliche Stellen.

**Betroffene Sektoren:**
- E-Commerce (Online-Shops)
- Bankdienstleistungen
- Telekommunikation
- E-Books und E-Reader
- Ticketing und Check-in-Terminals

**WCAG 2.2 – Konformitätsstufen:**

| Level | Anforderung | Beispiel |
|-------|-------------|----------|
| A | Minimum | Alt-Texte für Bilder |
| AA | Gesetzlicher Standard | Kontrast 4,5:1, Tastaturnavigation |
| AAA | Optimal | Gebärdensprache für Videos |

**Curb-Cut-Effekt:** Barrierefreiheit hilft allen. Bordsteinabsenkungen für Rollstühle nutzen auch Kinderwagen, Rollkoffer, Fahrräder. Untertitel helfen Gehörlosen, aber auch in lauten Umgebungen oder beim Sprachlernen.

**Sanktionen:** Bis zu 100.000 € Bußgeld bei Verstößen.

---

# 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 -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: #fce4ec -->

# 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: erklaerung -->
<!-- _header: '' -->
<!-- _footer: '' -->

# Barrierefreiheit testen – Vertiefung

Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte Nutzer mit Behinderungen.

**Tastatur-Test (5 Minuten, jeder kann's):**
1. Maus weglegen, nur Tab + Enter + Pfeiltasten nutzen
2. Fokus-Indikator immer sichtbar? (kein `outline: none;`!)
3. Logische Reihenfolge? (nicht kreuz und quer)
4. Alle interaktiven Elemente erreichbar?

**Automatisierte Tools:**

| Tool | Typ | Findet |
|------|-----|--------|
| axe DevTools | Browser-Extension | ~30% der WCAG-Verstöße |
| WAVE | Browser-Extension | Struktur-Probleme, Kontrast |
| Lighthouse | Chrome DevTools | Performance + Accessibility |
| Pa11y | CLI | CI/CD-Integration |

**Screenreader-Kurztest:**
- macOS: `Cmd + F5` (VoiceOver)
- Windows: NVDA installieren (kostenlos)
- Augen schließen, nur zuhören: Ist die Seite verständlich?

**Gold-Standard:** Usability-Tests mit Menschen, die Assistive Technologien täglich nutzen.

---


<!-- _class: lead -->

# Fragen & Diskussion

**Nächster Termin:** 10.01.2026 – CSS & Netzwerke

**Kontakt:** lb-czechowski@hdm-stuttgart.de

---

# 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/