update termin 1 slides based on feedback

- remove torches of freedom story (ibm story sufficient)
- fix von-neumann claim (not all devices, mention harvard)
- change email to mail@librete.ch
- simplify overflow slides
- rename dehomag image file
This commit is contained in:
2025-12-17 23:09:32 +01:00
parent 12b1da514d
commit 82503a5fc5
@@ -47,7 +47,7 @@ Hochschule der Medien Stuttgart
- Softwareentwickler & IT-Berater
- Schwerpunkte: Cloud, AI, Web-Technologien, Systemarchitektur, Open Source
- Hintergrund: Philosophie & Informatik
- Kontakt: michael.czechowski@lehre.dhbw-stuttgart.de
- Kontakt: mail@librete.ch
<!--
Kurze Vorstellung
@@ -107,57 +107,6 @@ MedienStudentInnen, nicht InformatikerInnen
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/torches-of-freedom.jpg)
<!--
Torches of Freedom, 1929
Edward Bernays, Neffe von Sigmund Freud
-->
---
# Torches of Freedom (1929)
**Edward Bernays** – Neffe von Sigmund Freud
**Problem:** Frauen rauchen nicht in der Öffentlichkeit (Tabu)
**Auftraggeber:** American Tobacco Company
**Lösung:** Suffragetten-Marsch, Osterparade NYC
"Torches of Freedom" – Zigaretten als Freiheitssymbol
**Ergebnis:** Umsatz verdoppelt, Tabu gebrochen
<!--
Bernays gilt als "Vater der PR"
Manipulation durch Medien und Symbolik
Verbindung Psychologie + Massenmedien
Warum erzähle ich das? → Technik formt Gesellschaft, Gesellschaft formt Technik
-->
---
# Warum diese Geschichte?
**Technik ist nie neutral.**
- Lochkarten zählten Menschen... und sortieren sie
- Computer berechneten Atombomben... und verbinden uns
- Das Internet demokratisiert Wissen... und verbreitet Desinformation
**MedienwirtschaftlerInnen** müssen verstehen:
Technologie ist ein Werkzeug – **wofür** es genutzt wird, entscheiden Menschen.
<!--
Kritisches Denken über Technologie
Medienkompetenz braucht technisches Verständnis
-->
---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/hollerith-machine.jpg)
<!--
@@ -208,7 +157,7 @@ Heute: IBM als Cloud- und AI-Unternehmen (Watson, Red Hat)
<!-- _header: '' -->
<!-- _footer: '' -->
![bg](./assets/ibm-nazi-hollerith.jpg)
![bg](./assets/dehomag-hollerith.jpg)
<!--
Hollerith-Maschinen im Dritten Reich
@@ -445,13 +394,16 @@ Speicher enthält beides: Was zu tun ist (Programm) + Womit (Daten)
- Kein Multitasking
- Keine Updates
**JEDES digitale Gerät** basiert auf diesem Prinzip:
Laptop, Smartphone, Router, Smartwatch, Auto-Computer...
**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)
<!--
Alternativen existieren (Harvard-Architektur für Embedded)
Aber: Grundkonzept gilt überall
Deshalb wichtig zu verstehen
Harvard-Architektur: AVR, PIC, viele ARM-Prozessoren
Modified Harvard in modernen CPUs (separate Caches)
Für Medienwirtschaft: Von-Neumann-Konzept reicht
-->
---
@@ -774,23 +726,21 @@ a = anchor (Anker)
# Hands-On: Werkzeuge einrichten
**Option 1: Ganz einfach**
- Texteditor (Notepad, TextEdit, gedit)
- Datei speichern als `index.html`
- Im Browser öffnen (Firefox empfohlen)
**Option 1: Texteditor + Browser**
- Notepad, TextEdit oder gedit
- Speichern als `index.html` → Im Browser öffnen
**Option 2: Komfortabler**
- VS Code (kostenlos): https://code.visualstudio.com
**Option 2: VS Code** (empfohlen)
- code.visualstudio.com
- Extension: "Live Server"
**Option 3: Ohne Installation**
- https://stackblitz.com
- https://codepen.io
**Option 3: Online-Editoren**
- stackblitz.com
- codepen.io
<!--
Erstmal ohne IDE starten!
Verstehen: HTML ist nur Text
Browser interpretiert den Text
-->
---
@@ -954,17 +904,15 @@ Antworten sammeln: Brief, Telefon, Fax, Funk...
# Kommunikationsarten
| Kategorie | Denkweise |
|-----------|-----------|
| **Synchron** | "Ich sende und warte auf Antwort" |
| **Asynchron** | "Ich sende – du antwortest später" |
| **Verbindungsorientiert** | "Wir bauen erst eine Leitung auf" |
| **Verbindungslos** | "Ich schicke Pakete los – jedes für sich" |
| Kategorie | Beispiel |
|-----------|----------|
| **Synchron** | Telefonat, Video-Call |
| **Asynchron** | E-Mail, Brief, SMS |
| **Verbindungsorientiert** | Telefon (Leitung aufbauen) |
| **Verbindungslos** | Brief, Postkarte |
<!--
Telefon = synchron + verbindungsorientiert
Brief = asynchron + verbindungslos
Internet nutzt beides!
Internet nutzt beides: TCP = verbindungsorientiert, UDP = verbindungslos
-->
---
@@ -1127,22 +1075,13 @@ HTTPS = HTTP + TLS-Verschlüsselung
# Hands-On: Netzwerk erkunden (20 Min)
**Öffnet das Terminal:**
- Windows: PowerShell
- Mac/Linux: Terminal
**Terminal öffnen:** PowerShell (Win) / Terminal (Mac/Linux)
**Befehle ausprobieren:**
```bash
# Eure IP-Adresse
ipconfig # Windows
ifconfig # Mac/Linux
# Ping (erreichbar?)
ping google.de
# Weg zum Server
tracert google.de # Windows
traceroute google.de # Mac/Linux
ipconfig # IP-Adresse (Win)
ifconfig # IP-Adresse (Mac/Linux)
ping google.de # Erreichbarkeit testen
tracert google.de # Weg zum Server (Win)
```
---
@@ -1231,15 +1170,11 @@ Validierung kostenlos
**Baut eine "Über mich"-Seite mit:**
1. **Semantischem Grundgerüst** (header, nav, main, footer)
2. **Navigation** mit Links zu Abschnitten
3. **Über-mich-Abschnitt** mit Bild
4. **Hobbies-Liste**
5. **Kontaktformular** mit:
- Name (required)
- E-Mail (type="email")
- Nachricht (textarea)
- Absenden-Button
1. Semantisches Grundgerüst (header, nav, main, footer)
2. Navigation mit Links zu Abschnitten
3. Über-mich-Abschnitt mit Bild
4. Hobbies-Liste
5. Kontaktformular (Name, E-Mail, Nachricht, Button)
**Ziel:** Vollständige, valide HTML-Seite
@@ -1266,8 +1201,7 @@ Validierung kostenlos
**Nächster Termin:** 10.01.2026 – CSS & Netzwerke
**Kontakt:** michael.czechowski@lehre.dhbw-stuttgart.de
**Repository:** git.librete.ch/hdm/223015b
**Kontakt:** mail@librete.ch
---