public/uni
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 223015c chapter 1: wording, formatting, gendering

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-20 10:27:06 +02:00
parent 6aba40e128
commit 558d0e5ecd
1 changed files with 20 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
slides/223015c/01-geschichte-grundlagen-html.md
View File

@@ -934,7 +934,7 @@ Demonstration: Glühbirne AN/AUS = 1 Bit
# Das Bit # Das Bit
**Kleinste Informationseinheit** ### Kleinste *logische* Informationseinheit
- **0 oder 1** - **0 oder 1**
- AN oder AUS - AN oder AUS
@@ -953,7 +953,7 @@ Shannon: Begründer der Informationstheorie
# Das Byte # Das Byte
**8 Bits = 1 Byte** **8 Bit = 1 Byte**
``` ```
0 0 1 0 1 0 1 0 0 0 1 0 1 0 1 0
@@ -1050,7 +1050,7 @@ CSS (Cascading Style Sheets)-Farben nutzen Hex: #FF0000 = Rot
--- ---
# Wo begegnet euch Hex? # Wo begegnet Ihnen Hex-Code?
| Kontext | Beispiel | | Kontext | Beispiel |
|---------|----------| |---------|----------|
@@ -1060,7 +1060,6 @@ CSS (Cascading Style Sheets)-Farben nutzen Hex: #FF0000 = Rot
| Speicheradressen | `0xA04F20` | | Speicheradressen | `0xA04F20` |
| Unicode | `U+00E4` (ä) | | Unicode | `U+00E4` (ä) |
→ Hex ist überall in der Technik
<!-- <!--
Präfixe: Präfixe:
@@ -1087,9 +1086,9 @@ Fehlercodes: Windows zeigt diese bei Bluescreens
--- ---
# Bits vs. Bytes: Die Verwirrung # Bit vs. Byte: Die Verwirrung
**1 Byte = 8 Bit** → Bits ÷ 8 = Bytes **1 Byte = 8 Bit** → Bit ÷ 8 = Byte
| Einheit (Bit) | Einheit (Byte) | | Einheit (Bit) | Einheit (Byte) |
|---------------|----------------| |---------------|----------------|
@@ -1097,9 +1096,8 @@ Fehlercodes: Windows zeigt diese bei Bluescreens
| 1 Mbit = 1.000.000 Bit | 1 MB = 1.000.000 Byte = 8 Mbit | | 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 | | 1 Gbit = 1 Mrd. Bit | 1 GB = 1 Mrd. Byte = 8 Gbit |
**Praxis:** 100 Mbit/s Internet = **12,5 MB/s** Download 100 Mbit/s Bandbreite = **12,5 MB/s** Downloadrate
**Aber:** Computer rechnen binär (Basis 2)!
<!-- <!--
Bits = kleines b, Bytes = großes B Bits = kleines b, Bytes = großes B
@@ -1256,12 +1254,12 @@ Der `<head>`-Bereich enthält Informationen *über* das Dokument, nicht den sich
| `<meta viewport>` | Mobile Darstellung | `width=device-width, initial-scale=1` | | `<meta viewport>` | Mobile Darstellung | `width=device-width, initial-scale=1` |
| `<meta description>` | Suchergebnis-Snippet (max 160 Zeichen) | SEO-kritisch | | `<meta description>` | Suchergebnis-Snippet (max 160 Zeichen) | SEO-kritisch |
**Open Graph Protocol (Facebook, 2010):** **Open Graph Protocol (Ehemals Facebook, 2010):**
```html ```html
<meta property="og:title" content="Artikel-Titel"> <meta property="og:title" content="Artikel-Titel">
<meta property="og:image" content="https://example.com/preview.jpg"> <meta property="og:image" content="https://example.com/preview.jpg">
``` ```
Steuert die Vorschau beim Teilen auf Facebook, LinkedIn, WhatsApp, Slack. Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack ...
**SEO-Relevanz:** Google nutzt `<title>` und `<meta description>` für Ranking und Snippet-Anzeige. Fehlende Metadaten = schlechtere Auffindbarkeit. **SEO-Relevanz:** Google nutzt `<title>` und `<meta description>` für Ranking und Snippet-Anzeige. Fehlende Metadaten = schlechtere Auffindbarkeit.
@@ -1335,7 +1333,7 @@ Semantische Tags wichtig für Accessibility
h1 sollte nur einmal pro Seite vorkommen h1 sollte nur einmal pro Seite vorkommen
a = anchor (Anker) a = anchor (Anker)
--> -->
<!--
--- ---
# Hands-On: Werkzeuge einrichten # Hands-On: Werkzeuge einrichten
@@ -1351,6 +1349,7 @@ a = anchor (Anker)
**Option 3: Online-Editoren** **Option 3: Online-Editoren**
- [https://codepen.io/pen/](https://codepen.io/pen/) - [https://codepen.io/pen/](https://codepen.io/pen/)
-->
--- ---
# Natives HTML # Natives HTML
@@ -1374,6 +1373,8 @@ Accessibility ist eingebaut
--- ---
[]
# Beispiel: Details/Summary # Beispiel: Details/Summary
```html ```html
@@ -1469,7 +1470,7 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog
| **Augensteuerung** | Eye-Tracking | | **Augensteuerung** | Eye-Tracking |
| **Switch-Geräte** | Ein-/Aus-Schalter | | **Switch-Geräte** | Ein-/Aus-Schalter |
→ **Nicht alle nutzen Maus + Bildschirm!** → **Nicht alle Menschen nutzen Maus oder Touchscreens.**
<!-- <!--
ACCESSIBILITY (a11y): a + 11 Buchstaben + y ACCESSIBILITY (a11y): a + 11 Buchstaben + y
@@ -1496,7 +1497,7 @@ PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
# Web-Zugänglichkeit – Vertiefung # Web-Zugänglichkeit – Vertiefung
**a11y** = Accessibility (a + 11 Buchstaben + y). Die WHO schätzt, dass 15% der Weltbevölkerung eine Behinderung haben – das sind über 1 Milliarde potenzielle Nutzer. **a11y** = Accessibility (a + 11 Buchstaben + y). Die WHO schätzt, dass 15% der Weltbevölkerung eine Behinderung haben – das sind über 1 Milliarde potenzielle NutzerInnen.
**Arten von Einschränkungen:** **Arten von Einschränkungen:**
@@ -1581,7 +1582,7 @@ Der **European Accessibility Act (EAA)** trat am 28. Juni 2025 in Kraft und betr
**Curb-Cut-Effekt:** Barrierefreiheit hilft allen. Bordsteinabsenkungen für Rollstühle nutzen auch Kinderwagen, Rollkoffer, Fahrräder. Untertitel helfen Gehörlosen, aber auch in lauten Umgebungen oder beim Sprachlernen. **Curb-Cut-Effekt:** Barrierefreiheit hilft allen. Bordsteinabsenkungen für Rollstühle nutzen auch Kinderwagen, Rollkoffer, Fahrräder. Untertitel helfen Gehörlosen, aber auch in lauten Umgebungen oder beim Sprachlernen.
**Sanktionen:** Bis zu 100.000 € Bußgeld bei Verstößen. **Sanktionen:** Bis zu 100.000 € Bußgeld bei Verstößen
--- ---
@@ -1614,11 +1615,9 @@ Gesetzlich meist Level AA gefordert
<img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024"> <img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024">
``` ```
**Kontrast:** Mindestens 4.5:1 für Text * **Kontrast:** Mindestens 4,5:1 für Text
* **Untertitel:** Videos brauchen Captions
**Untertitel:** Videos brauchen Captions * **Responsive:** Inhalte bei 200% Zoom nutzbar
**Responsive:** Inhalte bei 200% Zoom nutzbar
<!-- <!--
Leeres alt="" für dekorative Bilder Leeres alt="" für dekorative Bilder
@@ -1744,9 +1743,9 @@ Echte NutzerInnen einbeziehen = Gold-Standard
# Barrierefreiheit testen – Vertiefung # Barrierefreiheit testen – Vertiefung
Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte Nutzer mit Behinderungen. Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte NutzerInnen mit Behinderungen.
**Tastatur-Test (5 Minuten, jeder kann's):** **Tastatur-Test (5 Minuten):**
1. Maus weglegen, nur Tab + Enter + Pfeiltasten nutzen 1. Maus weglegen, nur Tab + Enter + Pfeiltasten nutzen
2. Fokus-Indikator immer sichtbar? (kein `outline: none;`!) 2. Fokus-Indikator immer sichtbar? (kein `outline: none;`!)
3. Logische Reihenfolge? (nicht kreuz und quer) 3. Logische Reihenfolge? (nicht kreuz und quer)