diff --git a/slides/223015c/01-geschichte-grundlagen-html.md b/slides/223015c/01-geschichte-grundlagen-html.md index 662fd82..44b3604 100644 --- a/slides/223015c/01-geschichte-grundlagen-html.md +++ b/slides/223015c/01-geschichte-grundlagen-html.md @@ -128,30 +128,28 @@ Hochschule der Medien Stuttgart --- - - -# Kapitel 1 -## Geschichte, Grundlagen & HTML - ---- - # Kursübersicht -**Themen:** +**Kapitel:** 1. Geschichte, Grundlagen & **HTML** 2. Netzwerke, Protokolle, **semantisches HTML** & **CSS** 3. Interaktivität, Animationen & **JavaScript** -**Format:** Theorie + viele Hands-On-Übungen - **Ziel:** "Gelernte Hilflosigkeit" ablegen --- -# Teil 1: Die Geschichte +# Kapitel 1 +## Geschichte, Grundlagen & HTML + +--- + + + +# Die Geschichte des Computers ## Vom ersten Algorithmus bis zum globalen Netzwerk --- @@ -328,44 +326,6 @@ Die Frage für MedienarbeiterInnen: Hätte IBM "Nein" sagen können? Sollen? Mü --- -# 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 - - - ---- - # Vom Ende des Zweiten Weltkriegs @@ -422,20 +382,26 @@ Der Turing-Test (1950): Ein Interrogator kommuniziert per Text mit einem Mensche # Das Manhattan-Projekt (1942–1945) -**Ziel:** Bau der ersten Atombombe +**Problem:** Millionen von Berechnungen nötig für: +- Ballistik-Berechnungen +- Implosions-Simulationen +- Nuklearphysik-Gleichungen -**Problem:** Berechnung von Implosionswellen -→ Millionen von Berechnungen nötig +**Lösung 1943:** Menschliche "Computer" +→ Mathematikerinnen mit Taschenrechnern & IBM-Lochkarten -**Team:** -- J. Robert Oppenheimer (Leitung) -- Richard Feynman (Rechenabteilung) -- **John von Neumann** (Mathematik & Stoßwellen) +**Zu langsam** → Bedarf an automatischer Berechnung + +**Schlüsselfigur:** John von Neumann (Mathematik & Stoßwellen) --- @@ -462,27 +428,6 @@ Arbeitete am Manhattan-Projekt mit --- -# Das Problem der Berechnung - -**Manhattan-Projekt brauchte:** -- Ballistik-Berechnungen -- Implosions-Simulationen -- Nuklearphysik-Gleichungen - -**Lösung 1943:** Menschliche "Computer" -→ Mit Taschenrechnern, Tabellen, IBM-Lochkarten - -**Zu langsam** → Bedarf an automatischer Berechnung - - - ---- - @@ -516,6 +461,96 @@ Programmiert durch 6 Frauen (ENIAC Girls) --- +# 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 + + + +--- + + + + + + +# 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: 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) + + + +--- + @@ -595,96 +630,40 @@ Die Software priorisierte kritische Aufgaben automatisch --- -# Von-Neumann-Architektur (1945) +# Lektionen für heute -**Programme und Daten im selben Speicher** +**Technologie ist nie neutral** -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 +- 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 -→ Grundlage aller Computer: Laptop, Smartphone, Server +→ Verantwortung liegt bei denen, die Technologie bauen und einsetzen +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: -# Die 5 Komponenten +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. -| 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 | +China Social Credit System: Punktesystem für "gutes Verhalten". Wer zu oft bei Rot geht, bekommt keinen Kredit mehr. -**Wichtig:** Programme und Daten **gemeinsam** im Speicher! - - - ---- - - - - - - -# 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) - - --- @@ -696,19 +675,29 @@ PRÜFUNGSRELEVANT: Warum Von-Neumann revolutionär, Unterschied zu Harvard, Beis --- -# Das Problem (1960er) +# Kalter Krieg: Das Problem der Kommunikation -**Kalter Krieg:** -- Was passiert bei einem Nuklearangriff? -- Zentrale Kommunikation → ein Treffer = alles tot +**1957:** Sputnik-Schock → USA investiert massiv in Forschung +→ **ARPA** (Advanced Research Projects Agency) wird gegründet -**DARPA** (Defense Advanced Research Projects Agency): -→ Dezentrales Netzwerk, das Angriffe überlebt +**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 --- @@ -779,6 +768,18 @@ Kostenlos freigegeben → darum existiert es --- + + + +![bg fit](./assets/img_633d7b91366e0-1025x538-768x403.jpg) + + + +--- + # 1,3 Millionen Kilometer Unterseekabel **Heute:** @@ -787,19 +788,28 @@ Kostenlos freigegeben → darum existiert es - **>400** Unterseekabel weltweit - Daten reisen mit **Lichtgeschwindigkeit** (Glasfaser) -**Das Internet ist physisch!** Keine "Cloud" ohne Kabel. +Keine "Cloud" ohne Kabel – das Internet ist physische Infrastruktur. + +**Five Eyes** (USA, UK, Kanada, Australien, Neuseeland): +→ Zapfen Unterseekabel an – globale Massenüberwachung --- -# Teil 2: Bits & Bytes +# Bits & Bytes ## Die Sprache der Computer --- @@ -945,9 +955,9 @@ Fehlercodes: Windows zeigt diese bei Bluescreens | Einheit (Bit) | Einheit (Byte) | |---------------|----------------| -| 1 Kbit = 1.000 Bit | 1 KB = 1.000 Byte | -| 1 Mbit = 1.000.000 Bit | 1 MB = 1.000.000 Byte | -| 1 Gbit = 1 Mrd. Bit | 1 GB = 1 Mrd. Byte | +| 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 @@ -962,35 +972,9 @@ Warum? Marketing - 100 klingt besser als 12,5 --- -# Warum zeigt meine 1TB-Festplatte nur 931GB? - -**Zwei Zählweisen:** - -| Dezimal (Hersteller) | Binär (Computer) | -|---------------------|------------------| -| Kilo = 1.000 | Kibi = 1.024 (2¹⁰) | -| Mega = 1.000.000 | Mebi = 1.048.576 (2²⁰) | -| Giga = 1.000.000.000 | Gibi = 1.073.741.824 (2³⁰) | -| Tera = 1.000.000.000.000 | Tebi = 1.099.511.627.776 (2⁴⁰) | - -**Das Problem:** -- Hersteller verkauft: 1 TB = 1.000.000.000.000 Bytes -- Computer rechnet: 1 TiB = 1.099.511.627.776 Bytes -- Differenz: **9,1%** → zeigt nur **931 GB** - - - ---- - -# Teil 3: Eure erste Webseite +# Unsere erste Webseite ## HTML-Grundlagen --- diff --git a/slides/223015c/assets/img_633d7b91366e0-1025x538-768x403.jpg b/slides/223015c/assets/img_633d7b91366e0-1025x538-768x403.jpg new file mode 100644 index 0000000..a9cd824 Binary files /dev/null and b/slides/223015c/assets/img_633d7b91366e0-1025x538-768x403.jpg differ