rework 223015c chapter 1: improve formatting, speaker notes, remove redundant slides

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

@@ -4,7 +4,7 @@ theme: gaia
 paginate: true
 backgroundColor: #fff
 header: "Grundlagen IT- und Internettechnik (223015c)"
-footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
 title: "Kapitel 1: Geschichte, Grundlagen & HTML"
 ---
 
@@ -115,7 +115,7 @@ section.erklaerung table {
 Digital- und Medienwirtschaft
 Hochschule der Medien Stuttgart
 
-**Wintersemester 2025/26**
+**Sommersemester 2026**
 
 [https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/)
 
@@ -137,13 +137,11 @@ Hochschule der Medien Stuttgart
 
 # Kursübersicht
 
-**3 Termine (10:00 – 16:30 Uhr):**
+**Themen:**
 
-| # | Datum | Thema |
+1. Geschichte, Grundlagen & **HTML**
-|---|-------|-------|
+2. Netzwerke, Protokolle, **semantisches HTML** & **CSS**
-| 1 | 20.12.2025 | Geschichte, Grundlagen & **HTML** |
+3. Interaktivität, Animationen & **JavaScript**
-| 2 | 10.01.2026 | Netzwerke, Protokolle, **semantisches HTML** & **CSS** |
-| 3 | 24.01.2026 | Interaktivität, Animationen & **JavaScript** |
 
 **Format:** Theorie + viele Hands-On-Übungen
 
@@ -154,7 +152,7 @@ Hochschule der Medien Stuttgart
 <!-- _class: lead -->
 
 # Teil 1: Die Geschichte
-## Von der Geburtsstunde des erten Computer-Algorithmus bis zur Vernetzung des gesamten Globus
+## Vom ersten Algorithmus bis zum globalen Netzwerk
 
 ---
 
@@ -176,14 +174,13 @@ Antoine Claudet
 
 **Die erste Programmiererin der Welt**
 
-- Arbeitete mit **Charles Babbage** an der "Analytical Engine"
+- Erste Programmiererin – 100 Jahre vor dem ersten Computer
-- Ihre »Notes« zu Babbages Maschine: **umfangreicher als sein Text**
+- Zusammenarbeit mit Charles Babbage an der *Analytical Engine*
-- 1843 publiziert – unter Initialen »A.A.L.« Ada Augusta Lovelace
+- Ihre Notizen: umfangreicher als sein Originaltext
-- Erst **1953** wiederentdeckt und gewürdigt
+- Erst 1953 wiederentdeckt und gewürdigt
-- Schrieb **1843** den ersten Algorithmus für eine Maschine, die nie fertiggestellt wurde
 
 <!--
-Babbage: Mathematiker, besessen von Rechenmaschinen. Erst die Difference Engine, dann die Analytical Engine – nie fertig gebaut, aber revolutionär im Konzept.
+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.
 
@@ -213,19 +210,25 @@ Herman Hollerith, ca. 1890
 
 # Herman Hollerith (1860–1929)
 
-**Das Problem:** US-Volkszählung 1880 dauerte **7 Jahre** zur Auswertung
+**Erfinder der Lochkarten-Datenverarbeitung**
 
-**Die Lösung:** Lochkarten + elektromechanische Tabelliermaschine
+- **Problem:** Volkszählung 1880 brauchte 7 Jahre zur Auswertung
-
+- **Lösung:** Lochkarten + elektromechanische Tabelliermaschine
-**1890 Census:** 62 Millionen Menschen in **2,5 Jahren** gezählt
+- **Ergebnis:** 1890 Census in 2,5 Jahren – 5 Mio. Dollar gespart
-
+- Gründete Firma, die später zu IBM wurde
-**Ersparnis:** 5 Millionen Dollar (damals!)
 
 <!--
-Hollerith: Deutsch-amerikanischer Ingenieur
+Hollerith: Deutsch-amerikanischer Ingenieur, Statistiker am US Census Bureau.
-Inspiration: Jacquard-Webstuhl (Lochkarten für Muster)
+
-Lochkarte = erstes standardisiertes Datenformat
+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.
-Eine Karte = ein Datensatz (eine Person)
+
+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.
 -->
 
 ---
@@ -245,6 +248,17 @@ US Census Bureau
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
+![bg fit](./assets/hollerith-machine-2.jpg)
+
+<!--
+Hollerith-Lochkartenmaschine
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg fit](./assets/hollerith-machine-3.jpg)
 
 <!--
@@ -256,19 +270,23 @@ US Census Bureau
 
 # Die Geburt von IBM
 
-**1896:** Hollerith gründet "Tabulating Machine Company"
+**Vom Einmannbetrieb zum Technologieriesen**
 
-**1911:** Fusion → "Computing-Tabulating-Recording Company" (CTR)
+- 1896: Hollerith gründet *Tabulating Machine Company*
-
+- 1911: Fusion zur *Computing-Tabulating-Recording Company* (CTR)
-**1924:** Umbenennung in **International Business Machines (IBM)**
+- 1924: Umbenennung in **International Business Machines (IBM)**
-
+- Dominiert die nächsten 50 Jahre die Computerwelt
-IBM dominiert die nächsten 50 Jahre die Computerwelt.
 
 <!--
-Thomas J. Watson Sr. → "THINK"-Motto
+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.
-IBM = "Big Blue"
+
-Lochkarten = Standard bis in die 1970er
+Warum "Big Blue"? IBMs Firmenfarbe war dunkelblau, ihre Großrechner hatten blaue Gehäuse. Der Spitzname entstand in den 1960ern.
-Heute: IBM als Cloud- und AI-Unternehmen (Watson, Red Hat)
+
+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.
 -->
 
 ---
@@ -289,39 +307,61 @@ Dehomag = Deutsche Hollerith-Maschinen GmbH (IBM-Tochter)
 
 # IBM und NS-Deutschland
 
-**Dehomag** = Deutsche Hollerith-Maschinen GmbH (IBM-Tochter)
+**Technologie im Dienst des Terrors**
 
-**Einsatz:**
+- **Dehomag:** Deutsche Hollerith-Maschinen GmbH (IBM-Tochter)
-- Volkszählung 1933 (Identifikation von Juden)
+- Volkszählung 1933: Identifikation von Juden
 - Verwaltung der Konzentrationslager
 - Logistik der Deportationen
 
-**Edwin Black:** *"IBM and the Holocaust"* (2001)
+→ Edwin Black: *"IBM and the Holocaust"* (2001)
 
 <!--
-Kontroverse Geschichte
+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?
-IBM profitierte, lieferte Maschinen, wartete sie
+
-"Technologie ist neutral" – wirklich?
+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.
-Wichtige Lektion für MedienethikerInnen
+
+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.
 -->
 
 ---
 
 # Lektionen für heute
 
-* Technologie ist nie neutral
+**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
 
 <!--
-* **2025:**
+Aktuelle Beispiele (in Reihenfolge der Folie):
-  * Big Data
-  * Generative KI
-  * Social Media
-  * Rasterfahndung ([https://netzpolitik.org/](https://netzpolitik.org/2025/stuttgart-buendnis-plant-demonstration-gegen-palantir-einsatz/))
 
-Facebook, Cambridge Analytica, Oracle Blue Kai
+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".
-Gesichtserkennung, Überwachung, Social Credit System (China)
+Quellen: https://www.zdfheute.de/politik/deutschland/palantir-einsatz-polizei-deutschland-alternative-100.html
-Verantwortung von TechnikerInnen und MedienarbeiterInnen
+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?
 -->
 
 ---
@@ -347,17 +387,24 @@ Bletchley Park
 
 # Alan Turing (1912–1954)
 
-**Vater der theoretischen Informatik**
+**Begründer der theoretischen Informatik**
 
-- 1936: **Turing-Maschine** – theoretisches Modell eines Computers
+- 1936: Turing-Maschine – definiert, was Computer können (und was nicht)
-- 1939–1945: **Bletchley Park** – Enigma-Entschlüsselung
+- 1940er: Enigma-Entschlüsselung mit elektromechanischen Maschinen
-- 1950: "Computing Machinery and Intelligence" → **Turing-Test**
+- 1950: Turing-Test – erste formale Definition von "Künstlicher Intelligenz"
-- **2013:** Posthume königliche Begnadigung
 
 <!--
-Genialer Mathematiker und Logiker
+Alan Turing war seiner Zeit Jahrzehnte voraus. Mit 24 Jahren definierte er, was "Berechnung" mathematisch bedeutet – bevor es echte Computer gab.
-Rettete vermutlich Millionen Leben durch Enigma-Arbeit
+
-Erst 2009 offizielle Entschuldigung der brit. Regierung
+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.
 -->
 
 ---
@@ -365,72 +412,14 @@ Erst 2009 offizielle Entschuldigung der brit. Regierung
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-![bg cover](./assets/Bletchley_Park_Mansion.jpg)
+![bg contain](./assets/turing-test.png)
 
 <!--
-Bletchley Park, England
+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.
-Geheimes Entschlüsselungszentrum im WWII
 -->
 
 ---
 
-# Enigma & Bletchley Park
-
-**Das Problem:** Deutsche Enigma-Maschine erzeugte 158 Trillionen mögliche Einstellungen
-
-**Turings Lösung:** "Bombe" Elektro-mechanischer Entschlüssler
-
-**Ergebnis:**
-- Alliierten konnten deutschen Funkverkehr mitlesen
-
-**Geheim bis 1970er!** Turing starb ohne Anerkennung.
-
-<!--
-Enigma: Elektrische Rotor-Chiffriermaschine
-Täglich neue Einstellungen
-Bombe: Vorläufer moderner Computer
-Parallelisierte Berechnung
--->
-
----
-
-# Die Turing-Maschine (1936)
-
-**Theoretisches Modell eines Computers:**
-
-```
-┌─────────────────────────────────────────┐
-│  ... │ 0 │ 1 │ 1 │ 0 │ 1 │ 0 │ ...      │  ← Unendliches Band
-└─────────────────────────────────────────┘
-              ↑
-        ┌─────────────┐
-        │ Lese-/      │
-        │ Schreibkopf │
-        └─────────────┘
-              ↓
-        ┌─────────────┐
-        │  Zustand    │  ← Endliche Zustände
-        └─────────────┘
-```
-
-**Beweis:** Alles Berechenbare kann so berechnet werden!
-→ Grundlage für **alle** modernen Computer
-
-<!--
-Abstraktes Gedankenmodell
-Kein echter Bau nötig
-Church-Turing-These
--->
-
----
-
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-![bg fit opacity:0.4](./assets/oppenheimer.png)
-
----
-
 # Das Manhattan-Projekt (1942–1945)
 
 **Ziel:** Bau der ersten Atombombe
@@ -606,47 +595,26 @@ Die Software priorisierte kritische Aufgaben automatisch
 
 ---
 
-# Von Neumanns Idee (1945)
+# Von-Neumann-Architektur (1945)
 
-**"First Draft of a Report on the EDVAC"**
+**Programme und Daten im selben Speicher**
 
-**Kernidee:** Programm und Daten im **selben Speicher**
+1. **Rechenwerk (ALU)** – rechnet
+2. **Steuerwerk** – steuert den Ablauf
+3. **Speicherwerk** – speichert Code UND Daten
+4. **Ein-/Ausgabe** – Tastatur, Bildschirm, Netzwerk
+5. **Bus-System** – verbindet alles
 
-**Vorher:** Hardware = Programm (Umstecken)
+→ Grundlage aller Computer: Laptop, Smartphone, Server
-**Nachher:** Software = austauschbar (laden)
-
-→ **Gespeichertes Programm** = Revolution
 
 <!--
-EDVAC = Electronic Discrete Variable Automatic Computer
+John von Neumann beschrieb 1945 das Prinzip im "First Draft of a Report on the EDVAC".
-Nachfolger von ENIAC
-Von Neumann schrieb den Bericht
-Daher: "Von-Neumann-Architektur"
--->
 
----
+Vorher (ENIAC): Programme durch Umstecken von Kabeln – tagelange Arbeit für jedes neue Problem. Nachher: Programme als Daten im Speicher – austauschbar in Sekunden.
 
-# Von-Neumann-Architektur
+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).
-┌─────────────────────────────────────────┐
-│                  CPU                    │
-│  ┌─────────────┐    ┌─────────────────┐ │
-│  │ Rechenwerk  │    │   Steuerwerk    │ │
-│  │    (ALU)    │    │ (Control Unit)  │ │
-│  └─────────────┘    └─────────────────┘ │
-└─────────────────────────────────────────┘
-              ↕ Bus-System ↕
-┌─────────────────┐    ┌──────────────────┐
-│  Speicherwerk   │    │ Ein-/Ausgabewerk │
-│    (Memory)     │    │     (I/O)        │
-└─────────────────┘    └──────────────────┘
-```
-
-<!--
-5 Grundkomponenten
-JEDER Computer folgt diesem Prinzip
-Euer Laptop, euer Handy, der Server dieser Präsentation
 -->
 
 ---
@@ -684,28 +652,6 @@ PRÜFUNGSRELEVANT: 5 Komponenten benennen und erklären können, Stored Program
 
 ---
 
-<!-- _class: erklaerung -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-# Von-Neumann-Architektur – Vertiefung
-
-John von Neumann beschrieb 1945 im „First Draft of a Report on the EDVAC" das Prinzip des **Stored Program Computer**: Programme und Daten teilen sich denselben Speicher und sind damit austauschbar, ohne Hardware-Änderungen.
-
-**Die 5 Komponenten im Detail:**
-
-| Komponente | Moderne Entsprechung | Funktion |
-|------------|---------------------|----------|
-| Rechenwerk (ALU) | CPU-Kern | Addition, Subtraktion, Logik (AND, OR, NOT) |
-| Steuerwerk | CPU-Kern | Fetch-Decode-Execute-Zyklus |
-| Speicherwerk | RAM + ROM | Einheitlicher Adressraum für Code + Daten |
-| Ein-/Ausgabe | I/O-Controller | USB, PCIe, Netzwerk |
-| Bus-System | Northbridge/Southbridge (heute: SoC) | Adress-, Daten-, Steuerbus |
-
-**Von-Neumann-Flaschenhals:** CPU und Speicher teilen einen Bus – die Bandbreite begrenzt die Geschwindigkeit. Moderne CPUs umgehen dies durch Caches (L1/L2/L3), die als Harvard-ähnliche Puffer dienen.
-
----
-
 <!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
@@ -743,33 +689,6 @@ PRÜFUNGSRELEVANT: Warum Von-Neumann revolutionär, Unterschied zu Harvard, Beis
 
 ---
 
-<!-- _class: erklaerung -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-# Stored Program Concept – Vertiefung
-
-Vor Von Neumann mussten Computer für jedes Problem neu verkabelt werden (ENIAC: tagelange Arbeit). Das **Stored Program Concept** machte Programme zu Daten – austauschbar wie Dokumente.
-
-**Konsequenzen für die Software-Industrie:**
-- **Betriebssysteme** möglich: Laden verschiedene Programme aus demselben Speicher
-- **Updates** ohne Hardware-Austausch: Nur Bits ändern, nicht Kabel
-- **Multitasking**: Mehrere Programme gleichzeitig im Speicher
-- **Self-Modifying Code**: Programme können sich selbst ändern (Compiler, JIT)
-
-**Harvard-Architektur (Alternative):**
-
-| Aspekt | Von Neumann | Harvard |
-|--------|-------------|---------|
-| Speicher | Gemeinsam für Code + Daten | Getrennt |
-| Busse | Ein Bus (Flaschenhals) | Paralleler Zugriff |
-| Flexibilität | Hoch (Code = Daten) | Geringer |
-| Einsatz | Desktop, Server, Smartphone | DSP, Mikrocontroller |
-
-**Modern:** „Modified Harvard" – L1-Cache trennt Code/Daten (Speed), RAM bleibt gemeinsam (Flexibilität).
-
----
-
 <!-- _class: lead -->
 
 # Vom Militär zum Netz