replace speicheradressen with hex examples slide, add native html examples

2025-12-23 23:56:49 +01:00
parent 4174bdf314
commit 659eec59ee
1 changed files with 76 additions and 72 deletions
@@ -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:**
- Speicheradresse = 64 Bit lang
- 64 Bit = 16 Hex-Ziffern
+| Kontext | Beispiel |
+|---------|----------|
+| CSS-Farben | `#FF5733` |
+| MAC-Adressen | `00:1A:2B:3C:4D:5E` |
+| Fehlercodes | `0x80070005` |
+| Speicheradressen | `0xA04F20` |
+| Unicode | `U+00E4` (ä) |

-**Beispiel (vereinfacht, 12 Bit):**
-
-| Dezimal | Binär | Hexadezimal |
-|---------|-------|-------------|
-| 258 | 0001 0000 0010 | 102 |
-
-**4 Bits = 1 Hex-Ziffer**
+→ Hex ist überall in der Technik

 <!--
-Speicheradressen werden hexadezimal angegeben
-Einfacher zu lesen als binär
-ProgrammiererInnen arbeiten damit täglich
+Präfixe:
+- 0x = "das ist Hexadezimal" (C, JavaScript, Python)
+- 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">
-    <h2>Ein Popup!</h2>
-    <p>Das ist ein nativer Dialog.</p>
-    <button onclick="this.closest('dialog').close()">
-        Schließen
-    </button>
+<dialog open>
+  <p>Greetings, one and all!</p>
+  <form method="dialog">
+    <button>OK</button>
+  </form>
 </dialog>
-
-<button onclick="document.getElementById('meinDialog').showModal()">
-    Dialog öffnen
-</button>
 ```

-<!--
-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
+https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog

 ---