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

223015c: farben-overflow gefixt (intro gekürzt, code kompakt), klausurfolien regeneriert

Browse Source
This commit is contained in:
libretech
2026-06-17 13:34:55 +02:00
parent d01253d0d0
commit 800a7d6ff9
2 changed files with 97 additions and 417 deletions
Download Patch File Download Diff File Expand all files Collapse all files
slides/223015c/02-netzwerke-protokolle-css.md
+3 -6
View File
@@ -2068,22 +2068,19 @@ Best Practice: Setzt das global für alle Elemente.
![bg right:35%](./assets/demos/css-colors.png)
CSS kennt fünf Notationen für Farben: **Keyword**, **Hex**, **RGB** (Red Green Blue), **RGBA** (RGB + Alpha) und **HSL** (Hue, Saturation, Lightness).
CSS kennt fünf Farb-Notationen: **Keyword**, **Hex**, **RGB**, **RGBA** und **HSL**.
```css
/* Keyword */
color: red;
color: rebeccapurple;
/* Hex */
color: #FF0000;
color: #F00;
/* RGB / RGBA */
/* RGB = Red Green Blue, RGBA mit Alpha */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
/* HSL */
/* HSL = Hue, Saturation, Lightness */
color: hsl(0, 100%, 50%);
```
slides/223015c/klausurfolien.md
+94 -411
View File
@@ -5,7 +5,7 @@ paginate: true
backgroundColor: #fff
header: "Grundlagen IT- und Internettechnik (223015c)"
footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
title: "Kapitel 1: Geschichte, Grundlagen & HTML"
title: Grundlagen IT- und Internettechnik
---
<style>
:root {
@@ -20,13 +20,13 @@ section {
font-size: 1.7rem;
}
h1 {
color: #a02060; /* darker raspberry */
color: #a02060;
}
section.invert h1 {
color: #fff;
}
h2 {
color: #1f2937; /* dark gray, almost black */
color: #1f2937;
}
pre {
background: #0f0f23;
@@ -82,10 +82,9 @@ section.aufgabe footer {
<!-- _class: invert -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: black -->
<!-- _backgroundColor: #000 -->
![bg fit opacity:0.2](./assets/background-termin-2.png)
![bg cover opacity:0.2](./assets/background-termin-1.png)
# Grundlagen IT- und Internettechnik
@@ -103,39 +102,6 @@ Hochschule der Medien Stuttgart
<!-- _footer: "" -->
# Die 5 Komponenten
| Komponente | Funktion |
|------------|----------|
| **Rechenwerk (ALU)** | Führt Berechnungen durch |
| **Steuerwerk** | Interpretiert Befehle, steuert Ablauf |
| **Speicherwerk** | Speichert Programme UND Daten |
| **Ein-/Ausgabe** | Tastatur, Bildschirm, Netzwerk |
| **Bus-System** | Verbindet alle Komponenten |
**Wichtig:** Programme und Daten **gemeinsam** im Speicher!
<!--
VON-NEUMANN-ARCHITEKTUR (1945): Grundlage aller modernen Computer
5 KOMPONENTEN:
- ALU (Arithmetic Logic Unit): Rechnet (+, -, ×, ÷) und vergleicht (>, <, =)
- Steuerwerk: Holt Befehle, dekodiert sie, steuert Ausführung (Fetch-Decode-Execute)
- Speicherwerk: RAM (flüchtig) + ROM (permanent), enthält Code UND Daten
- Ein-/Ausgabe (I/O): Tastatur, Maus, Bildschirm, Netzwerk, USB, Sensoren
- Bus-System: Adressbus (wo), Datenbus (was), Steuerbus (wie)
KERNPRINZIP: Stored Program Concept - Programme im selben Speicher wie Daten
VORHER (z.B. ENIAC): Programme durch Umstecken von Kabeln, tagelange Arbeit
NACHHER: Programme als austauschbare Daten → Flexibilität, Software-Industrie möglich
PRÜFUNGSRELEVANT: 5 Komponenten benennen und erklären können, Stored Program Concept
-->
---
<!-- _header: "" -->
<!-- _footer: "" -->
# Von-Neumann-Architektur: Bedeutung
**Ohne Von-Neumann-Architektur:**
@@ -173,117 +139,18 @@ PRÜFUNGSRELEVANT: Warum Von-Neumann revolutionär, Unterschied zu Harvard, Beis
<!-- _footer: "" -->
# HTML Metadaten
```html
<html>
<head>
<title>Im Browsertab als Überschrift sichtbar</title>
<meta name="description" content="" />
<meta name="og:image" content="https://...." />
</head>
...
</html>
```
- <small>*Webseiten werden nicht nur von Menschen besucht, sondern auch von Suchmaschinen, Programmen, Bots etc.*</small>
- <small>*Metadaten helfen bspw. auch Screen-Readern beim "Verstehen" der Inhalte*</small>
<!--
HEAD-BEREICH: Metadaten, nicht sichtbar im Browser-Fenster
WICHTIGE META-TAGS:
- <title>: Browser-Tab, Lesezeichen, Suchergebnis-Titel
- <meta name="description">: Suchergebnis-Snippet (max. 160 Zeichen)
- <meta name="viewport">: Mobile Darstellung (width=device-width)
- <meta charset="UTF-8">: Zeichenkodierung (Umlaute!)
OPEN GRAPH (og:*): Social Media Vorschau (Facebook, LinkedIn, WhatsApp)
- og:title, og:description, og:image, og:url
TWITTER CARDS: twitter:card, twitter:title, twitter:image
SEO-RELEVANZ: Google nutzt title + description für Ranking und Snippet
ACCESSIBILITY: <html lang="de"> für Screenreader-Aussprache
PRÜFUNGSRELEVANT: Was gehört in <head>, Unterschied zu <body>, wichtigste Meta-Tags
-->
---
<!-- _header: "" -->
<!-- _footer: "" -->
# Wie nutzen Menschen das Web?
| Eingabe | Nutzungsweise |
|---------|---------------|
| **Maus** | Klicken, Scrollen |
| **Tastatur** | Tab-Navigation, Enter, Pfeiltasten |
| **Screenreader** | Vorlesen von Inhalten (NVDA, VoiceOver, JAWS) |
| **Sprachsteuerung** | "Klicke auf Anmelden" |
| **Augensteuerung** | Eye-Tracking |
| **Switch-Geräte** | Ein-/Aus-Schalter |
→ **Nicht alle nutzen Maus + Bildschirm!**
<!--
ACCESSIBILITY (a11y): a + 11 Buchstaben + y
STATISTIK: ~15% der Weltbevölkerung haben eine Behinderung (WHO)
ARTEN VON EINSCHRÄNKUNGEN:
- Permanent: Blindheit, Taubheit, motorische Einschränkungen
- Temporär: Gebrochener Arm, Augen-OP, Ohrenentzündung
- Situativ: Helle Sonne (Kontrast), laute Umgebung (kein Audio), Baby auf Arm (eine Hand)
ASSISTIVE TECHNOLOGIEN:
- Screenreader: NVDA (Windows, kostenlos), VoiceOver (Apple), JAWS (kommerziell)
- Braillezeilen: Taktile Ausgabe für Blinde
- Switch-Geräte: Für motorische Einschränkungen
- Spracheingabe: Dragon NaturallySpeaking, Siri, Google Assistant
WCAG: Web Content Accessibility Guidelines (A, AA, AAA)
EUROPEAN ACCESSIBILITY ACT: Seit Juni 2025 verpflichtend!
PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
-->
---
<!-- _header: "" -->
<!-- _footer: "" -->
# Warum "Barrierefreiheit"?
**Rechtlich:**
- EU: European Accessibility Act (seit Juni 2025 in Kraft!)
- DE: BITV 2.0 (Behörden), Privatwirtschaft betroffen
**Ethisch:**
- Teilhabe für alle Menschen
- Digitale Inklusion
**Praktisch:**
- Bessere UX für **alle** (SEO, Mobile, ältere Menschen)
- Größerer Markt (~15% der Bevölkerung)
<!--
RECHTLICHER RAHMEN:
- European Accessibility Act (EAA): EU-Richtlinie, seit 28. Juni 2025 in Kraft
- Betrifft: E-Commerce, Banking, Telekommunikation, Transport, E-Books
- BITV 2.0: Barrierefreie Informationstechnik-Verordnung (DE, öffentliche Stellen)
- BFSG: Barrierefreiheitsstärkungsgesetz (DE-Umsetzung des EAA)
- Strafen: Bis zu 100.000€ Bußgeld möglich
CURB-CUT-EFFEKT:
- Bordsteinabsenkung für Rollstuhlfahrer → hilft auch Kinderwagen, Rollkoffern, Fahrrädern
- Untertitel für Gehörlose → helfen in lauter Umgebung, beim Sprachlernen
- Kontrastreiche Farben → besser bei Sonnenlicht, für ältere Menschen
BUSINESS CASE:
- 15% Zielgruppe (Menschen mit Behinderung)
- +20% ältere Menschen (Sehschwäche, motorische Einschränkungen)
- SEO-Vorteile: Alt-Texte, semantisches HTML = besser für Google
PRÜFUNGSRELEVANT: EAA kennen, Curb-Cut-Effekt erklären können, Business Case
-->
# HTML-Anatomie (2/2)
- Wir unterscheiden zwischen **umschließende** und **selbst-schließende** HTML-Tags
- **Umschließend**
- `<b> ... </b>` fett-gedruckter Text (inline)
- `<a> ... </a>` Hyperlink (Verlinkung zu anderen Webseiten, Bildern)
- `<body> ... </body>` Sichtbarer Teil eines HTML-Dokuments
- `<details> ... </details>` Aufklapp-Text (Akkordion)
- **Selbst-schließend**
- `<img />` Bild, Vektorgrafik etc.
- `<input />` Eingabefeld
- `<meta />` Metadaten
---
@@ -294,17 +161,16 @@ PRÜFUNGSRELEVANT: EAA kennen, Curb-Cut-Effekt erklären können, Business Case
# Barrieren im Netz vermeiden (a11y)
**Tastatur-Test:**
- Alle Funktionen nur mit Tab + Enter nutzbar?
- Fokus immer sichtbar?
- Logische Tab-Reihenfolge?
- Alle Funktionen sind nur mit Tab + Enter nutzbar
- Fokus immer sichtbar: Textlinks, Buttons, Texteingabe etc.
- Logische Tab-Reihenfolge: "Skip to main", Navigation, Hauptinhalt
**Screenreader-Test:**
- VoiceOver (Mac): `Cmd + F5`
- NVDA (Windows): Gratis-Download
**Tools:**
- axe DevTools, WAVE (Browser-Extensions)
- Lighthouse (in Chrome DevTools)
**Tools/Browser-Extensions:**
- [WAVE](https://wave.webaim.org/), [axe DevTools](https://www.deque.com/axe/devtools/), [Web Disability Simulator](https://chromewebstore.google.com/detail/web-disability-simulator/olioanlbgbpmdlgjnnampnnlohigkjla)
<!--
Automatische Tests finden ~30% der Probleme
@@ -319,168 +185,19 @@ Echte NutzerInnen einbeziehen = Gold-Standard
<!-- _footer: "" -->
# Das TCP/IP-Modell
| Schicht | Name | Aufgabe | Protokolle |
|---------|------|---------|------------|
| **4** | Anwendung | Was? Welcher Dienst? | HTTP, DNS, SMTP |
| **3** | Transport | Zuverlässigkeit, Ports | TCP, UDP |
| **2** | Internet | Routing, globale Adressen | IP |
| **1** | Netzzugang | Lokale Übertragung | Ethernet, WLAN |
**4 Schichten. Das reicht, um das Internet zu verstehen.**
<!--
SPEAKER NOTES:
- TCP/IP = das echte Internet
- 4 Schichten:
- Anwendung: Was will ich? (HTTP, DNS, Mail)
- Transport: Kommt an? Welches Programm? (TCP, UDP)
- Internet: Wie zum Zielrechner? (IP)
- Netzzugang: Wie zum nächsten Gerät? (Ethernet, WLAN)
- KLAUSUR: Welches Protokoll → welche Schicht
-->
---
<!-- _header: "" -->
<!-- _footer: "" -->
# Dateneinheiten pro Schicht
| Schicht | Name | Dateneinheit | Was kommt hinzu? |
|---------|------|--------------|------------------|
| Anwendung | HTTP, DNS | **Daten** | – |
| Transport | TCP, UDP | **Segment** | Ports, Sequenznummern |
| Internet | IP | **Paket** | IP-Adressen |
| Netzzugang | Ethernet | **Frame** | MAC-Adressen, Prüfsumme |
Merkhilfe: **D**aten → **S**egment → **P**aket → **F**rame
(„**D**er **S**ache **P**raktischer **F**olgen")
<!--
SPEAKER NOTES:
- Glossar-Begriffe jetzt eingeordnet:
- Anwendung: Daten/Message
- Transport: Segment
- Internet: Paket
- Netzzugang: Frame
- Merkhilfe: D-S-P-F (eigene erfinden!)
- KLAUSUR: Begriff → Schicht
-->
---
<!-- _header: "" -->
<!-- _footer: "" -->
# IP vs. MAC vs. Port
| | IP-Adresse | MAC-Adresse | Port |
|---|-----------|-------------|------|
| **Frage** | Welcher Rechner? | Welches Gerät nebenan? | Welches Programm? |
| **Reichweite** | Global | Lokal (1 Hop) | Auf einem Rechner |
| **Ändert sich?** | Nein | Ja, bei jedem Hop | Nein |
| **Schicht** | Internet (IP) | Netzzugang (Ethernet) | Transport (TCP/UDP) |
| **Beispiel** | 212.132.79.37 | aa:bb:cc:dd:ee | 443 |
<!--
SPEAKER NOTES:
- KLAUSUR: Diese Tabelle
- IP: Welcher Rechner? Global. Bleibt gleich.
- MAC: Welcher Nachbar? Lokal. Ändert sich.
- Port: Welches Programm? Bleibt gleich.
- Merken: NUR MAC ändert sich unterwegs
-->
---
<!-- _header: "" -->
<!-- _footer: "" -->
# Der 3-Way-Handshake
```
Client (dein Laptop) Server
| |
|-------- SYN (Seq=1000) --------------->|
| "Ich will reden" |
| |
|<--- SYN-ACK (Seq=5000, Ack=1001) ------|
| "OK, ich auch. Ich starte bei 5000"|
| |
|-------- ACK (Ack=5001) --------------->|
| "Verstanden, los geht's" |
| |
| [ Verbindung steht ] |
```
**SYN** = Synchronize · **ACK** = Acknowledge
<!--
SPEAKER NOTES:
- 3 Pakete → Verbindung steht
- 1. Client SYN: "Will Verbindung, starte bei 1000"
- 2. Server SYN-ACK: "OK, ich starte bei 5000, erwarte 1001"
- 3. Client ACK: "Verstanden, erwarte 5001"
- Seq-Nr wichtig: Beide wissen nächstes erwartetes Byte
-->
---
<!-- _header: "" -->
<!-- _footer: "" -->
# TCP vs. UDP
| | TCP | UDP |
|---|-----|-----|
| **Verbindung** | Ja (Handshake) | Nein |
| **Reihenfolge** | Garantiert | Nicht garantiert |
| **Verlorene Pakete** | Werden nachgefordert | Gehen verloren |
| **Overhead** | Höher | Niedriger |
| **Use Cases** | Web, Email, Downloads | Video-Calls, Gaming, DNS |
<!--
SPEAKER NOTES:
- Zwei Transport-Protokolle
- TCP: zuverlässig
- Handshake, Seq-Nr, Bestätigungen, Neuübertragung
- Perfekt für Web, Downloads (nichts darf fehlen)
- UDP: schneller
- Kein Handshake, keine Bestätigungen
- Verloren = weg
- Perfekt für Video-Calls (Verzögerung schlimmer als Verlust)
-->
---
<!-- _header: "" -->
<!-- _footer: "" -->
# HTTP-Methoden
| Methode | Bedeutung | Beispiel |
|---------|-----------|----------|
| **GET** | Daten abrufen | Seite laden |
| **POST** | Daten senden | Formular absenden |
| **PUT** | Daten ersetzen | Profil aktualisieren |
| **DELETE** | Daten löschen | Account löschen |
HTTP-Methoden beschreiben, **was** der Client mit einer Ressource tun will.
| Methode | Bedeutung | Beispiel |
|---------|-----------|-----------------------------------------------|
| **GET** | Daten abrufen | Seite laden `GET /index.html HTTP/2.0` |
| **POST** | Daten senden | Formular absenden `POST /login HTTP/2.0` |
| **PUT** | Daten ersetzen | Profil aktualisieren `PUT /users/42 HTTP/2.0` |
| **DELETE** | Daten löschen | Account löschen `DELETE /users/42 HTTP/2.0` |
<small>CRUD = Create, Read, Update, Delete</small>
```http
GET /index.html HTTP/1.1
POST /login HTTP/1.1
```
<!--
SPEAKER NOTES:
@@ -505,10 +222,12 @@ Das wird wichtiger, wenn ihr mit REST-APIs arbeitet.
# HTTP Status-Codes
Jede HTTP-Response enthält einen dreistelligen Status-Code — die erste Ziffer verrät die Kategorie.
```http
HTTP/1.1 200 OK
HTTP/1.1 404 Not Found
HTTP/1.1 500 Internal Server Error
HTTP/2.0 200 OK
HTTP/2.0 404 Not Found
HTTP/2.0 500 Internal Server Error
```
| Code-Bereich | Bedeutung |
@@ -539,112 +258,76 @@ Status-Codes sagen euch, was passiert ist.
<!-- _footer: "" -->
# Zusammenfassung Teil 1
# Selektoren: ID
**Der Ablauf:**
1. DNS (UDP:53) → Name zu IP
2. TCP-Handshake (SYN → SYN-ACK → ACK)
3. HTTP-Request (GET /...)
4. HTTP-Response (200 OK + HTML)
![bg right:35%](./assets/demos/css-selector-id.png)
**Die Konzepte:**
- 4 Schichten: Anwendung → Transport → Internet → Netzzugang
- IP bleibt gleich, MAC ändert sich pro Hop
- Ports identifizieren Programme
- Encapsulation: Jede Schicht verpackt die darüberliegende
<!--
SPEAKER NOTES:
Das ist die Zusammenfassung für Teil 1. Das solltet ihr können:
Den Ablauf: DNS, TCP-Handshake, HTTP-Request, HTTP-Response.
Die Schichten und ihre Protokolle.
Den Unterschied zwischen IP und MAC – was bleibt gleich, was ändert sich.
Was Ports tun.
Wie Encapsulation funktioniert.
-->
---
<!-- _header: "" -->
<!-- _footer: "" -->
# Spezifität: Welche Regel gewinnt?
| Selektor | Spezifität |
|----------|------------|
| Element (`p`) | 0,0,0,1 |
| Klasse (`.wichtig`) | 0,0,1,0 |
| ID (`#header`) | 0,1,0,0 |
| Inline (`style="..."`) | 1,0,0,0 |
```css
p { color: blue; } /* 0,0,0,1 */
.text { color: green; } /* 0,0,1,0 → gewinnt */
#intro { color: red; } /* 0,1,0,0 → gewinnt über beide */
```html
<nav id="hauptnavigation">...</nav>
```
<!--
SPEAKER NOTES:
Wenn mehrere Regeln auf ein Element zutreffen, gewinnt die spezifischere.
Spezifität wird in vier Zahlen gemessen. Von links nach rechts: Inline, IDs, Klassen, Elemente.
Ein Element-Selektor hat 0,0,0,1. Eine Klasse hat 0,0,1,0. Eine ID hat 0,1,0,0.
0,0,1,0 schlägt 0,0,0,99 – auch hundert Element-Selektoren schlagen keine Klasse.
Inline-Styles schlagen alles – außer !important, was ihr vermeiden solltet.
-->
---
<!-- _header: "" -->
<!-- _footer: "" -->
# Responsive Design
```css
/* Mobile First: Basis-Styles */
.container {
#hauptnavigation {
background: #333;
padding: 1rem;
background: white;
}
/* Ab 768px (Tablet): Anpassungen */
@media (min-width: 768px) {
.container {
padding: 2rem;
background: red;
}
}
/* Ab 1024px (Desktop): Weitere Anpassungen */
@media (min-width: 1024px) {
.container {
background: green;
}
}
```
**Raute** vor dem Namen = ID
**Achtung:** IDs sollten **einmalig** pro Seite sein.
<!--
SPEAKER NOTES:
Responsive Design: Die Seite passt sich der Bildschirmgröße an.
ID-Selektoren sind noch spezifischer. Raute vor dem Namen.
Mobile First: Ihr schreibt zuerst die Styles für kleine Screens. Dann fügt ihr mit @media-Queries Anpassungen für größere Screens hinzu.
IDs sollten auf einer Seite nur einmal vorkommen. Für Navigation, Header, Footer, Main – einmalige Elemente.
min-width heißt: "ab dieser Breite". Also: Basis gilt für alle. Ab 768px gelten zusätzliche Regeln. Ab 1024px noch mehr.
Das Gegenteil wäre Desktop First mit max-width – aber Mobile First ist heute Standard.
In der Praxis: Klassen sind meist besser. IDs haben hohe Spezifität und sind unflexibel.
-->
---
<!-- _header: "" -->
<!-- _footer: "" -->
# Farben
![bg right:35%](./assets/demos/css-colors.png)
CSS kennt fünf Farb-Notationen: **Keyword**, **Hex**, **RGB**, **RGBA** und **HSL**.
```css
/* Keyword */
color: red;
color: rebeccapurple;
/* Hex */
color: #FF0000;
color: #F00;
/* RGB = Red Green Blue, RGBA mit Alpha */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
/* HSL = Hue, Saturation, Lightness */
color: hsl(0, 100%, 50%);
```
MDN-Referenz: [CSS `<color>`](https://developer.mozilla.org/de/docs/Web/CSS/Reference/Values/color_value)
<!--
SPEAKER NOTES:
Farben können auf verschiedene Arten angegeben werden.
Keywords: red, blue, rebeccapurple. Begrenzte Auswahl, aber lesbar.
Hex: Sechs Zeichen, je zwei für Rot, Grün, Blau. #FF0000 ist reines Rot.
RGB: Gleiche Idee, aber dezimal. rgb(255, 0, 0).
RGBA: Mit Alpha-Kanal für Transparenz. 0 ist unsichtbar, 1 ist voll sichtbar.
HSL: Hue, Saturation, Lightness. Manchmal intuitiver für Farbanpassungen.
-->