add erklaerung slides after klausur slides in 223015c
- add section.erklaerung CSS class with pink theme styling - add 6 explanation slides to 01-geschichte-grundlagen-html.md - add 10 explanation slides to 02-netzwerke-protokolle-css.md - each slide includes definition, key points, and mnemonics
This commit is contained in:
@@ -68,6 +68,33 @@ section.aufgabe {
|
||||
section.aufgabe footer {
|
||||
display: none;
|
||||
}
|
||||
section.erklaerung {
|
||||
font-size: 1.1rem;
|
||||
background: linear-gradient(180deg, #fff8fa 0%, #fef0f4 100%) !important;
|
||||
border-left: 6px solid #a02060;
|
||||
}
|
||||
section.erklaerung h1 {
|
||||
font-size: 1.6rem;
|
||||
color: #a02060;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
section.erklaerung h2 {
|
||||
font-size: 1.3rem;
|
||||
color: #1f2937;
|
||||
margin-top: 0;
|
||||
}
|
||||
section.erklaerung ul,
|
||||
section.erklaerung ol {
|
||||
font-size: 1.0rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
section.erklaerung p {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
section.erklaerung table {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- _class: invert -->
|
||||
@@ -652,6 +679,26 @@ PRÜFUNGSRELEVANT: 5 Komponenten benennen und erklären können, Stored Program
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: erklaerung -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# Die 5 Komponenten: Erklaerung
|
||||
|
||||
**Definition:** Die Von-Neumann-Architektur beschreibt den grundlegenden Aufbau moderner Computer in fuenf Funktionseinheiten.
|
||||
|
||||
| Komponente | Aufgabe | Beispiel |
|
||||
|------------|---------|----------|
|
||||
| **Rechenwerk (ALU)** | Arithmetische & logische Operationen | +, -, ×, ÷, Vergleiche |
|
||||
| **Steuerwerk** | Holt, dekodiert und steuert Befehle | Fetch-Decode-Execute-Zyklus |
|
||||
| **Speicherwerk** | Speichert Programme UND Daten | RAM, ROM |
|
||||
| **Ein-/Ausgabe** | Kommunikation mit Aussenwelt | Tastatur, Monitor, USB |
|
||||
| **Bus-System** | Verbindet alle Komponenten | Adress-, Daten-, Steuerbus |
|
||||
|
||||
**Merkhilfe:** "**R**echnen, **S**teuern, **S**peichern, **E**in/**A**us, **B**us" (RSSEAB)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
@@ -689,6 +736,27 @@ PRÜFUNGSRELEVANT: Warum Von-Neumann revolutionär, Unterschied zu Harvard, Beis
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: erklaerung -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# Von-Neumann-Architektur: Erklaerung
|
||||
|
||||
**Definition:** Das revolutionaere Prinzip, dass Programme und Daten im selben Speicher liegen und Programme somit wie Daten behandelt werden koennen.
|
||||
|
||||
**Kernpunkte:**
|
||||
- **Stored Program Concept:** Programme sind austauschbare Daten
|
||||
- **Universalrechner:** Gleiche Hardware fuer beliebige Aufgaben
|
||||
- **Software-Flexibilitaet:** Programme koennen geladen, geaendert und geloescht werden
|
||||
|
||||
**Vorher (ENIAC):** Programmierung durch Umstecken von Kabeln → Tage fuer jedes neue Programm
|
||||
|
||||
**Nachher:** Software als austauschbare Datei → Betriebssysteme, Apps, Updates moeglich
|
||||
|
||||
**Harvard-Architektur (Alternative):** Getrennter Speicher fuer Code und Daten → schneller, aber weniger flexibel (Arduino, DSPs)
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# Vom Militär zum Netz
|
||||
@@ -1117,6 +1185,30 @@ PRÜFUNGSRELEVANT: Was gehört in <head>, Unterschied zu <body>, wichtigste Meta
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: erklaerung -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# HTML Metadaten: Erklaerung
|
||||
|
||||
**Definition:** Der `<head>`-Bereich enthaelt Informationen ueber das Dokument, die nicht direkt im Browser angezeigt werden.
|
||||
|
||||
| Meta-Tag | Zweck | Beispiel |
|
||||
|----------|-------|----------|
|
||||
| `<title>` | Browser-Tab, Lesezeichen, SEO | "Meine Website" |
|
||||
| `<meta charset>` | Zeichenkodierung | UTF-8 fuer Umlaute |
|
||||
| `<meta description>` | Suchmaschinen-Snippet | Max. 160 Zeichen |
|
||||
| `<meta viewport>` | Mobile Darstellung | width=device-width |
|
||||
| `<meta og:image>` | Social Media Vorschau | Bild beim Teilen |
|
||||
|
||||
**Wichtige Unterscheidung:**
|
||||
- `<head>`: Metadaten (fuer Browser, Suchmaschinen, Social Media)
|
||||
- `<body>`: Sichtbarer Inhalt (fuer Menschen)
|
||||
|
||||
**Merkhilfe:** "Head = Gehirn (unsichtbar), Body = Koerper (sichtbar)"
|
||||
|
||||
---
|
||||
|
||||
# HTML-Tags und Attribute
|
||||
|
||||
```html
|
||||
@@ -1340,6 +1432,29 @@ PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: erklaerung -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# Web-Nutzung: Erklaerung
|
||||
|
||||
**Definition:** Menschen nutzen das Web auf sehr unterschiedliche Weisen - nicht nur mit Maus und Bildschirm.
|
||||
|
||||
**Eingabemethoden:**
|
||||
- **Maus/Trackpad:** Klicken, Scrollen, Hover
|
||||
- **Tastatur:** Tab-Navigation, Shortcuts, Pfeiltasten
|
||||
- **Screenreader:** Vorlesen von Inhalten (NVDA, VoiceOver, JAWS)
|
||||
- **Sprache/Augen:** Sprachbefehle, Eye-Tracking, Switch-Geraete
|
||||
|
||||
**Arten von Einschraenkungen:**
|
||||
- **Permanent:** Blindheit, Taubheit, motorische Einschraenkungen
|
||||
- **Temporaer:** Gebrochener Arm, Augen-OP
|
||||
- **Situativ:** Sonnenlicht, laute Umgebung, Baby auf Arm
|
||||
|
||||
**Merkhilfe:** "a11y" = a + 11 Buchstaben + y = "accessibility"
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
@@ -1379,6 +1494,28 @@ PRÜFUNGSRELEVANT: EAA kennen, Curb-Cut-Effekt erklären können, Business Case
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: erklaerung -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# Barrierefreiheit: Erklaerung
|
||||
|
||||
**Definition:** Barrierefreiheit (Accessibility) bedeutet, dass digitale Inhalte fuer alle Menschen zugaenglich sind - unabhaengig von koerperlichen oder technischen Einschraenkungen.
|
||||
|
||||
**Rechtlicher Rahmen:**
|
||||
- **European Accessibility Act (EAA):** Seit Juni 2025 EU-weit verpflichtend
|
||||
- **BITV 2.0:** Deutsche Verordnung fuer oeffentliche Stellen
|
||||
- **Strafen:** Bis zu 100.000 EUR Bussgeld moeglich
|
||||
|
||||
**Curb-Cut-Effekt:** Massnahmen fuer Menschen mit Behinderung helfen allen:
|
||||
- Untertitel → laute Umgebung, Sprachlernen
|
||||
- Kontrast → Sonnenlicht, aeltere Menschen
|
||||
- Tastatur-Navigation → Power-User, RSI-Betroffene
|
||||
|
||||
**Business Case:** ~15% Menschen mit Behinderung + ~20% Aeltere = 35% potenzielle Zielgruppe
|
||||
|
||||
---
|
||||
|
||||
# WCAG: Der Standard
|
||||
|
||||
**W**eb **C**ontent **A**ccessibility **G**uidelines
|
||||
@@ -1532,6 +1669,32 @@ Echte NutzerInnen einbeziehen = Gold-Standard
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: erklaerung -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# Barrieren vermeiden: Erklaerung
|
||||
|
||||
**Definition:** Praktische Massnahmen zur Pruefung und Sicherstellung der Barrierefreiheit von Webseiten.
|
||||
|
||||
**Tastatur-Test (selbst durchfuehren):**
|
||||
1. Tab druecken → Springt der Fokus logisch durch die Seite?
|
||||
2. Ist der fokussierte Bereich immer sichtbar markiert?
|
||||
3. Kann man alle Funktionen ohne Maus bedienen?
|
||||
|
||||
**Screenreader-Test:**
|
||||
- **Mac:** VoiceOver aktivieren mit `Cmd + F5`
|
||||
- **Windows:** NVDA installieren (kostenlos)
|
||||
- **Frage:** Ergibt die vorgelesene Seite Sinn?
|
||||
|
||||
**Automatische Tools (finden ~30% der Probleme):**
|
||||
- axe DevTools, WAVE (Browser-Extensions)
|
||||
- Lighthouse (in Chrome DevTools unter F12)
|
||||
|
||||
**Merkhilfe WCAG-Prinzipien:** "**P**erceivable, **O**perable, **U**nderstandable, **R**obust" (POUR)
|
||||
|
||||
---
|
||||
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
|
||||
Reference in New Issue
Block a user