1822 lines
52 KiB
Markdown
1822 lines
52 KiB
Markdown
---
|
||
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 -->
|
||
|
||
|
||
|
||
# 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: '' -->
|
||
|
||
|
||
|
||
---
|
||
|
||
# Kursübersicht
|
||
|
||
**Kapitel:**
|
||
|
||
1. Geschichte, Grundlagen & **HTML**
|
||
2. Netzwerke, Protokolle, **semantisches HTML** & **CSS**
|
||
3. Interaktivität, Animationen & **JavaScript**
|
||
|
||
**Ziel:** "Gelernte Hilflosigkeit" ablegen
|
||
|
||
---
|
||
|
||
# Ressourcen zum Selbstlernen
|
||
|
||
* **CODE CRISPIES: https://codecrispi.es/**
|
||
* Online Code-Editor: https://codepen.io/pen/
|
||
* MDN (Mozilla Developer Network): https://developer.mozilla.org/de/
|
||
* Flexbox-Spiel: https://flexboxfroggy.com/
|
||
* Grid-Spiel: https://cssgridgarden.com/
|
||
|
||
<!--
|
||
SPEAKER NOTES:
|
||
- Code Crispies = unser Material
|
||
- Codepen = sofort CSS ausprobieren
|
||
- MDN = DIE Referenz schlechthin
|
||
- Spiele für Flexbox/Grid – später relevant
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Kapitel 1
|
||
## Geschichte, Grundlagen & HTML
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Die Geschichte des Computers
|
||
## Vom ersten Algorithmus bis zum globalen Netzwerk
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Ada Lovelace, Daguerreotypie 1843
|
||
Antoine Claudet
|
||
-->
|
||
|
||
---
|
||
|
||
|
||
|
||
# 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: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Herman Hollerith, ca. 1890
|
||
-->
|
||
|
||
---
|
||
|
||
|
||
|
||
# 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: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Hollerith-Lochkartenmaschine, ca. 1908
|
||
US Census Bureau
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Hollerith-Lochkartenmaschine
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
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: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Hollerith-Maschinen im Dritten Reich
|
||
Dehomag = Deutsche Hollerith-Maschinen GmbH (IBM-Tochter)
|
||
-->
|
||
|
||
---
|
||
|
||
|
||
|
||
# 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: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
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: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
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.
|
||
-->
|
||
|
||
---
|
||
|
||
|
||
|
||
# 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: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
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: '' -->
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
|
||
<!-- _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"
|
||
-->
|
||
|
||
---
|
||
|
||
# Assembler (1947)
|
||
|
||
**Die erste Stufe über Maschinencode**
|
||
|
||
- Erfunden von **Kathleen Booth** (Birkbeck College, London)
|
||
- Mnemonische Befehle statt Binärzahlen (`MOV`, `ADD`, `JMP`)
|
||
- Jeder Befehl entspricht direkt einer CPU-Instruktion
|
||
- Hardwarenah, aber für Menschen lesbar
|
||
|
||
**Fun Fact:** Chris Sawyer schrieb **RollerCoaster Tycoon** (1999) fast komplett in x86-Assembly
|
||
|
||
<!--
|
||
KATHLEEN BOOTH (1922–2022):
|
||
Kathleen Hylda Valerie Booth (geb. Britten), BSc Mathematik (Royal Holloway, London), PhD Applied Mathematics (King's College London). Arbeitete ab 1946 mit Andrew Booth (später ihr Ehemann) am Birkbeck College – eines der kleinsten Computing-Teams Großbritanniens: nur Andrew, Kathleen und Xenia Sweeting.
|
||
|
||
WAS SIE TAT:
|
||
Kathleen baute die Hardware des ARC (Automatic Relay Calculator) mit auf und entwickelte dann die Programmierarchitektur. 1947 reiste sie mit Andrew nach Princeton, wo sie John von Neumann trafen und die Stored-Program-Architektur kennenlernten. Sie schrieb "Coding for A.R.C." – die erste veröffentlichte Beschreibung einer Assembly-Sprache. Statt roher Binärzahlen (z.B. 10011) konnten Programmierer nun mnemonische Kürzel verwenden (z.B. M -> cR). Ein konzeptioneller Sprung – die erste Abstraktionsschicht zwischen Mensch und Maschine.
|
||
|
||
VOR ASSEMBLER:
|
||
ENIAC (1943–46) wurde durch physisches Umstecken von Kabeln programmiert – Programmwechsel dauerten Tage. Danach kamen Stored-Program-Computer, aber Programme mussten als rohe Binärzahlen eingegeben werden. Jeder Tippfehler in einer 0/1-Folge konnte den Befehl komplett verfälschen.
|
||
|
||
WEITERE LEISTUNGEN:
|
||
- Mitentwicklung von Booth's Multiplication Algorithm (heute in Milliarden CPUs)
|
||
- Pionierin der neuronalen Netze (1958/59 – nur ~4 Jahre nach den allerersten)
|
||
- Erste öffentliche Demonstration maschineller Übersetzung (Französisch→Englisch, 1955)
|
||
- Wurde 100 Jahre alt
|
||
|
||
ROLLERCOASTER TYCOON:
|
||
Chris Sawyer, schottischer Entwickler, schrieb RCT zu 99% in x86-Assembly (MASM), nur 1% C für Windows-Schnittstellen. Warum? Assembler war seine "Muttersprache" seit Kindheit, und Performance war kritisch: Tausende Besucher mit eigenem Verhalten, Fahrgeschäfte, Pathfinding – alles in Echtzeit. Das Spiel lief auf einem Pentium 90 MHz mit 16 MB RAM. Sawyer verdiente ca. 30 Mio. Dollar an Royalties und hat über 700 Achterbahnen weltweit selbst gefahren.
|
||
-->
|
||
|
||
---
|
||
|
||
# Fortran (1957)
|
||
|
||
**Die erste höhere Programmiersprache**
|
||
|
||
- Entwickelt bei IBM unter **John Backus**
|
||
- Im Team: **Lois Haibt** – verantwortlich für die Control-Flow-Analyse
|
||
- Name: **For**mula **Tran**slator
|
||
- Ziel: Mathematische Formeln direkt als Code schreiben
|
||
- Revolutionär: ~**20 Assembler-Befehle → 1 Fortran-Zeile**
|
||
- Noch heute genutzt in Wissenschaft und Hochleistungsrechnen
|
||
|
||
<!--
|
||
JOHN BACKUS (1924–2007):
|
||
Unruhiger Werdegang – Chemiestudium abgebrochen, aus der Uni geflogen, Armee, Medizinstudium abgebrochen (Hirntumor, erfolgreich behandelt), dann Mathematik an der Columbia University. Bei IBM ab 1950. Seine Motivation war schlicht Faulheit: "Much of my work has come from being lazy. I didn't like writing programs." Er entwickelte erst Speedcoding (1953), dann leitete er das Fortran-Projekt. Später: Backus-Naur-Form (BNF), Turing Award 1977.
|
||
|
||
LOIS HAIBT (*1934):
|
||
Studierte Mathematik am Vassar College (Stipendium), jobbte in den Semesterferien bei Bell Labs. IBM bot ihr nach dem Abschluss 1955 $5.100/Jahr – fast doppelt so viel wie Bell Labs. Sie kam ohne jegliche Programmiererfahrung ins Team und war mit 21 Jahren die einzige Frau unter den 10 Kernentwicklern. Ihre Aufgabe (Section 4 des Compilers): Sie teilte Programme in "Basic Blocks" auf, erstellte einen Control-Flow-Graphen und simulierte per Monte-Carlo-Methode, welche Programmteile häufig durchlaufen werden ("Hot Paths"). Diese Info nutzte der Compiler für die Register-Optimierung. Ein für 1956 extrem fortschrittlicher Ansatz. Außerdem entwickelte sie den ersten syntaktischen Analysator für arithmetische Ausdrücke – ein Grundbaustein aller modernen Compiler. Ihre Tochter Carolyn studierte später in Princeton und promovierte am MIT in Mathematik.
|
||
|
||
Haibt über die Teamkultur: "No one was worried about seeming stupid or possessive of his or her code. We were all just learning together."
|
||
|
||
DAS TEAM:
|
||
~10 Kernmitglieder, alle in ihren 20ern und 30ern, mit "varying academic degrees and unrelated areas of expertise". Harlan Herrick schrieb das erste jemals ausgeführte Fortran-Programm. Roy Nutt war von United Aircraft ausgeliehen. David Sayre war Kristallograph.
|
||
|
||
ENTWICKLUNG:
|
||
Sollte 6 Monate dauern, brauchte 3 Jahre (1954–1957). Das Team arbeitete nachts, weil sie nur dann Zugang zum IBM 704 hatten, und schlief tagsüber im Langdon Hotel an der 56th Street. Schneballschlachten lockerten die langen Winternächte auf.
|
||
|
||
WARUM ES FUNKTIONIERTE:
|
||
Das Killerkriterium war Performance: Frühere Compiler erzeugten Code, der 5–10× langsamer war als handgeschriebener Assembler. Fortran I war der erste Compiler, der annähernd gleich schnellen Code erzeugte. Dieser Rekord hielt 20 Jahre. Ken Thompson (Erfinder von Unix): "95% of the people who programmed in the early years would never have done it without Fortran."
|
||
|
||
HEUTE:
|
||
Fortran ist die "Muttersprache des Scientific Computing". Wettervorhersage (GFS, WRF), Klimamodelle (CESM für IPCC-Berichte), Kernphysik-Simulationen, LAPACK/BLAS (die linearen Algebra-Bibliotheken unter NumPy/SciPy) – alles Fortran. In numerischen Benchmarks 30–60× schneller als Python.
|
||
|
||
PARALLELE ZU HEUTE:
|
||
Assembly-Programmierer sahen Fortran als existenzielle Bedrohung ihrer Kunst – genau wie heute manche Programmierer KI fürchten. Das Ergebnis war dasselbe: Das Werkzeug erweiterte das Feld, statt es zu ersetzen.
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _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
|
||
-->
|
||
|
||
---
|
||
|
||
# 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: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
ARPANET-Karte 1969
|
||
4 Knoten: UCLA, Stanford, UCSB, Utah
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
---
|
||
|
||
# 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: '' -->
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
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: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Bit = Binary Digit
|
||
Demonstration: Glühbirne AN/AUS = 1 Bit
|
||
-->
|
||
|
||
---
|
||
|
||
# Das Bit
|
||
|
||
### Kleinste *logische* 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 Bit = 1 Byte**
|
||
|
||
```
|
||
0 0 1 0 1 0 1 0
|
||
```
|
||
|
||
**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
|
||
-->
|
||
|
||
---
|
||
|
||
# Zahlensysteme
|
||
|
||
**Eine Ziffer — wie viele Werte?**
|
||
|
||
| System | Basis | Ziffern | Beispiel |
|
||
|--------|-------|---------|----------|
|
||
| **Dezimal** | 10 | 0-9 | `42` = 4×10 + 2 |
|
||
| **Binär** | 2 | 0-1 | `101010` = 42 |
|
||
| **Hexadezimal** | 16 | 0-F | `2A` = 2×16 + 10 |
|
||
|
||
→ Alle drei beschreiben dieselbe Zahl: **42**
|
||
|
||
<!--
|
||
Dezimal = was wir im Alltag nutzen (10 Finger → 10 Ziffern)
|
||
Binär = was Computer nutzen (Strom an/aus → 2 Zustände)
|
||
Hexadezimal = Kompromiss: kompakter als Binär, aber passt perfekt auf Bytes (2 Hex-Ziffern = 1 Byte = 8 Bit)
|
||
Die Basis bestimmt, wie viele Symbole pro Stelle zur Verfügung stehen:
|
||
- Dezimal: 10 (0–9)
|
||
- Binär: 2 (0, 1)
|
||
- Hex: 16 (0–9 + A–F, wobei A=10, B=11, ..., F=15)
|
||
-->
|
||
|
||
---
|
||
|
||
# Hexadezimal: Lesbarkeit
|
||
|
||
**Für den Menschen ungeeignet:**
|
||
`01001101 01010000 00110011`
|
||
|
||
**Hexadezimal (Base 16):**
|
||
`4D 50 33` (= "MP3" in ASCII)
|
||
|
||
**Jede Hex-Ziffer = 4 Bits (ein "Nibble")**
|
||
0-9, A-F (A=10, B=11, ..., F=15)
|
||
|
||
`4 = 0100` `D = 1101`
|
||
`5 = 0101` `0 = 0000`
|
||
`3 = 0011` `3 = 0011`
|
||
|
||
<!--
|
||
Hex = Shortcut für Menschen
|
||
1 Byte = 2 Hex-Ziffern (00-FF)
|
||
"Nibble" = 4 Bits = halbes Byte (Wortspiel: nibble = knabbern, byte = beißen)
|
||
CSS (Cascading Style Sheets)-Farben nutzen Hex: #FF0000 = Rot
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
---
|
||
|
||
# Wo begegnet Ihnen Hex-Code?
|
||
|
||
| Kontext | Beispiel |
|
||
|---------|----------|
|
||
| CSS-Farben | `#FF5733` |
|
||
| MAC-Adressen | `00:1A:2B:3C:4D:5E` |
|
||
| Fehlercodes | `0x80070005` |
|
||
| Speicheradressen | `0xA04F20` |
|
||
| Unicode | `U+00E4` (ä) |
|
||
|
||
|
||
<!--
|
||
Präfixe:
|
||
- 0x = "das ist Hexadezimal" (C, JavaScript, Python)
|
||
- U+ = Unicode-Codepoint (Standard für Zeichenkodierung)
|
||
- # = CSS (Cascading Style Sheets)-Konvention für Farben
|
||
|
||
ABKÜRZUNGEN:
|
||
- MAC = Media Access Control (eindeutige Hardware-Adresse einer Netzwerkkarte)
|
||
- CSS = Cascading Style Sheets
|
||
- Unicode = universeller Zeichensatz für alle Schriftsysteme
|
||
|
||
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
|
||
-->
|
||
|
||
---
|
||
|
||
# Bit vs. Byte: Die Verwirrung
|
||
|
||
**1 Byte = 8 Bit** → Bit ÷ 8 = Byte
|
||
|
||
| 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 |
|
||
|
||
100 Mbit/s Bandbreite = **12,5 MB/s** Downloadrate
|
||
|
||
|
||
<!--
|
||
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 (Ehemals 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 Mastodon, LinkedIn, Signal, MS Teams, 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 Menschen nutzen Maus oder Touchscreens gleichermaßen.**
|
||
|
||
<!--
|
||
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 NutzerInnen.
|
||
|
||
**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 sind nur mit Tab + Enter nutzbar
|
||
- Fokus immer sichtbar: Textlinks, Buttons, Texteingabe etc.
|
||
- Logische Tab-Reihenfolge: "Skip to main", Navigation, Hauptinhalt
|
||
|
||
**Screenreader-Test:**
|
||
- VoiceOver (Mac): `Cmd + F5`
|
||
- NVDA (Windows): Gratis-Download
|
||
|
||
**Tools/Browser-Extensions:**
|
||
- [WAVE](https://wave.webaim.org/), [axe DevTools](https://www.deque.com/axe/devtools/), [Web Disability Simulator](https://chromewebstore.google.com/detail/web-disability-simulator/olioanlbgbpmdlgjnnampnnlohigkjla)
|
||
|
||
<!--
|
||
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 NutzerInnen mit Behinderungen.
|
||
|
||
**Tastatur-Test (5 Minuten):**
|
||
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 |
|
||
|------|-----|--------|
|
||
| [WAVE](https://wave.webaim.org/) | Browser-Extension | Struktur-Probleme, Kontrast, Tab-Reihenfolge |
|
||
| [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) | Chrome DevTools | Performance + Accessibility |
|
||
| [Pa11y](https://pa11y.org/) | CLI | CI/CD-Integration |
|
||
| [axe DevTools](https://www.deque.com/axe/devtools/) | Browser-Extension (💰 Pro-Version · Profi-Tool) | ~30% der WCAG-Verstöße |
|
||
|
||
**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.
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
<!-- _paginate: false -->
|
||
|
||
|
||
|
||
<!--
|
||
WAVE Tab-Reihenfolge: visualisiert DOM-Reihenfolge als Tab-Pfad.
|
||
Wenn Pfad kreuz und quer → schlechte Struktur für Tastatur-/Screenreader-Nutzer.
|
||
-->
|
||
|
||
---
|
||
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Fragen & Diskussion
|
||
|
||
**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:
|
||
- Michael Czechowski
|
||
- Markus Thamm / Wolfgang Gruel (HdM Stuttgart)
|
||
|
||
Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
|