replace speicheradressen with hex examples slide, add native html examples

slides/2025-12-20-termin-1-geschichte-grundlagen-html.md

@@ -244,7 +244,9 @@ Wichtige Lektion für MedienethikerInnen
 
 # Lektionen für heute
 
-* Keine
+* Technologie ist nie neutral
+* Steigerung der Rechenleistung ist immer dann nötig, wenn die angehäuften Datenmengen nicht mehr von Menschenhand berechnet werden können
+
 
 <!--
 * **2025:**
@@ -723,7 +725,6 @@ Kostenlos freigegeben → darum existiert es
 
 - **5,5 Milliarden** Menschen online
 - **>400** Unterseekabel weltweit
-- **1,3 Mio. km** Kabel unter Wasser
 - Daten reisen mit **Lichtgeschwindigkeit** (Glasfaser)
 
 **Das Internet ist physisch!** Keine "Cloud" ohne Kabel.
@@ -732,7 +733,6 @@ Kostenlos freigegeben → darum existiert es
 Google, Meta, Microsoft besitzen eigene Kabel
 Sabotage-Risiko (Russland, Anker)
 Latenz: Frankfurt → New York = ~80ms
-"Cloud" ist nur jemand anderes Computer
 -->
 
 ---
@@ -847,24 +847,34 @@ CSS-Farben nutzen Hex
 
 ---
 
-# Speicheradressen
+# Wo begegnet euch Hex?
 
-**64-Bit-System:**
+| Kontext | Beispiel |
-- Speicheradresse = 64 Bit lang
+|---------|----------|
-- 64 Bit = 16 Hex-Ziffern
+| CSS-Farben | `#FF5733` |
+| MAC-Adressen | `00:1A:2B:3C:4D:5E` |
+| Fehlercodes | `0x80070005` |
+| Speicheradressen | `0xA04F20` |
+| Unicode | `U+00E4` (ä) |
 
-**Beispiel (vereinfacht, 12 Bit):**
+→ Hex ist überall in der Technik
-
-| Dezimal | Binär | Hexadezimal |
-|---------|-------|-------------|
-| 258 | 0001 0000 0010 | 102 |
-
-**4 Bits = 1 Hex-Ziffer**
 
 <!--
-Speicheradressen werden hexadezimal angegeben
+Präfixe:
-Einfacher zu lesen als binär
+- 0x = "das ist Hexadezimal" (C, JavaScript, Python)
-ProgrammiererInnen arbeiten damit täglich
+- U+ = Unicode-Codepoint (Standard für Zeichenkodierung)
+- # = CSS-Konvention für Farben
+
+Speicheradressen erklärt:
+- 64-Bit-System → Adresse hat 64 Bit = 16 Hex-Ziffern
+- Beispiel vollständig: 0x0000000000A04F20
+                          ^^^^^^^^^^
+                          └── führende Nullen, meist ungenutzt
+- Tools kürzen zu: 0xA04F20 (führende Nullen weggelassen)
+- "0x" = Präfix, sagt nur "jetzt kommt Hex"
+
+MAC-Adresse = eindeutige Hardware-ID der Netzwerkkarte
+Fehlercodes: Windows zeigt diese bei Bluescreens
 -->
 
 ---
@@ -1083,6 +1093,7 @@ Formattierungssprache
 | `<ul>`, `<ol>`, `<li>` | Listen |
 | `<div>` | Container/Box |
 | `<span>` | Inline-Container |
+| `<input type="...">` | Eingabefeld/Input |
 
 <!--
 Semantische Tags wichtig für Accessibility
@@ -1095,7 +1106,7 @@ a = anchor (Anker)
 # Hands-On: Werkzeuge einrichten
 
 **Option 1: Texteditor + Browser**
-- Notepad, TextEdit oder gedit
+- Notepad, TextEdit oder DreamWeaver
 - Speichern als `index.html` → Im Browser öffnen
 
 **Option 2: VS Code** (empfohlen)
@@ -1107,9 +1118,9 @@ a = anchor (Anker)
 
 ---
 
-# Native HTML: Mehr als ihr denkt!
+# Natives HTML
 
-**Viele Dinge brauchen KEIN JavaScript:**
+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 |
 |----------|--------------|
@@ -1119,8 +1130,6 @@ a = anchor (Anker)
 | Datum-Auswahl | `<input type="date">` |
 | Validierung | Attribute beliebig verknüpfbar `required`, `min`, `max` |
 
-**→ HTML first, JavaScript later!**
-
 <!--
 Progressive Enhancement
 HTML kann mehr als die meisten denken
@@ -1139,64 +1148,59 @@ Accessibility ist eingebaut
 </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 id="meinDialog">
+<dialog open>
-    <h2>Ein Popup!</h2>
+  <p>Greetings, one and all!</p>
-    <p>Das ist ein nativer Dialog.</p>
+  <form method="dialog">
-    <button onclick="this.closest('dialog').close()">
+    <button>OK</button>
-        Schließen
+  </form>
-    </button>
 </dialog>
-
-<button onclick="document.getElementById('meinDialog').showModal()">
-    Dialog öffnen
-</button>
 ```
 
-<!--
+https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog
-Minimales JavaScript für öffnen/schließen
-Aber: Accessibility eingebaut (ESC schließt, Fokus-Management)
-Besser als selbstgebaute Modals
--->
-
----
-
-# Hands-On: Native HTML Features
-
-**Erweitert eure Seite:**
-
-1. Fügt ein `<details>`-Element mit verstecktem Text hinzu
-2. Erstellt ein Kontaktformular mit:
-   - `<input type="email">` (automatische Validierung!)
-   - `<input type="date">`
-   - `<textarea> ... </textarea>`
-   - `<button type="submit"> ... </button>`
-
----
-
-# Zusammenfassung Termin 1
-
-**Geschichte:**
-- Lovelace, Hollerith, Turing, Hopper, Hamilton – PionierInnen
-- IBM & NS-Deutschland → Verantwortung
-- Von-Neumann-Architektur
-- ARPANET → Internet → WWW
-
-**Technik:**
-- Bits & Bytes, Hexadezimal
-- Von-Neumann-Architektur
-
----
-
-# Zusammenfassung Termin 1 (Praxis)
-
-**Was wir gemacht haben:**
-- HTML-Grundstruktur erstellt
-- Native HTML-Features genutzt
 
 ---