223015c: farben-overflow gefixt (intro gekürzt, code kompakt), klausurfolien regeneriert
This commit is contained in:
@@ -2068,22 +2068,19 @@ Best Practice: Setzt das global für alle Elemente.
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
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
|
```css
|
||||||
/* Keyword */
|
/* Keyword */
|
||||||
color: red;
|
color: red;
|
||||||
color: rebeccapurple;
|
color: rebeccapurple;
|
||||||
|
|
||||||
/* Hex */
|
/* Hex */
|
||||||
color: #FF0000;
|
color: #FF0000;
|
||||||
color: #F00;
|
color: #F00;
|
||||||
|
/* RGB = Red Green Blue, RGBA mit Alpha */
|
||||||
/* RGB / RGBA */
|
|
||||||
color: rgb(255, 0, 0);
|
color: rgb(255, 0, 0);
|
||||||
color: rgba(255, 0, 0, 0.5);
|
color: rgba(255, 0, 0, 0.5);
|
||||||
|
/* HSL = Hue, Saturation, Lightness */
|
||||||
/* HSL */
|
|
||||||
color: hsl(0, 100%, 50%);
|
color: hsl(0, 100%, 50%);
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
+94
-411
@@ -5,7 +5,7 @@ paginate: true
|
|||||||
backgroundColor: #fff
|
backgroundColor: #fff
|
||||||
header: "Grundlagen IT- und Internettechnik (223015c)"
|
header: "Grundlagen IT- und Internettechnik (223015c)"
|
||||||
footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
|
footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
|
||||||
title: "Kapitel 1: Geschichte, Grundlagen & HTML"
|
title: Grundlagen IT- und Internettechnik
|
||||||
---
|
---
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
@@ -20,13 +20,13 @@ section {
|
|||||||
font-size: 1.7rem;
|
font-size: 1.7rem;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
color: #a02060; /* darker raspberry */
|
color: #a02060;
|
||||||
}
|
}
|
||||||
section.invert h1 {
|
section.invert h1 {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
h2 {
|
h2 {
|
||||||
color: #1f2937; /* dark gray, almost black */
|
color: #1f2937;
|
||||||
}
|
}
|
||||||
pre {
|
pre {
|
||||||
background: #0f0f23;
|
background: #0f0f23;
|
||||||
@@ -82,10 +82,9 @@ section.aufgabe footer {
|
|||||||
|
|
||||||
<!-- _class: invert -->
|
<!-- _class: invert -->
|
||||||
<!-- _header: '' -->
|
<!-- _header: '' -->
|
||||||
<!-- _footer: '' -->
|
<!-- _backgroundColor: #000 -->
|
||||||
<!-- _backgroundColor: black -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Grundlagen IT- und Internettechnik
|
# Grundlagen IT- und Internettechnik
|
||||||
|
|
||||||
@@ -103,39 +102,6 @@ Hochschule der Medien Stuttgart
|
|||||||
<!-- _footer: "" -->
|
<!-- _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
|
# Von-Neumann-Architektur: Bedeutung
|
||||||
|
|
||||||
**Ohne Von-Neumann-Architektur:**
|
**Ohne Von-Neumann-Architektur:**
|
||||||
@@ -173,117 +139,18 @@ PRÜFUNGSRELEVANT: Warum Von-Neumann revolutionär, Unterschied zu Harvard, Beis
|
|||||||
<!-- _footer: "" -->
|
<!-- _footer: "" -->
|
||||||
|
|
||||||
|
|
||||||
# HTML Metadaten
|
# HTML-Anatomie (2/2)
|
||||||
|
|
||||||
```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
|
|
||||||
-->
|
|
||||||
|
|
||||||
|
- 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)
|
# Barrieren im Netz vermeiden (a11y)
|
||||||
|
|
||||||
**Tastatur-Test:**
|
**Tastatur-Test:**
|
||||||
- Alle Funktionen nur mit Tab + Enter nutzbar?
|
- Alle Funktionen sind nur mit Tab + Enter nutzbar
|
||||||
- Fokus immer sichtbar?
|
- Fokus immer sichtbar: Textlinks, Buttons, Texteingabe etc.
|
||||||
- Logische Tab-Reihenfolge?
|
- Logische Tab-Reihenfolge: "Skip to main", Navigation, Hauptinhalt
|
||||||
|
|
||||||
**Screenreader-Test:**
|
**Screenreader-Test:**
|
||||||
- VoiceOver (Mac): `Cmd + F5`
|
- VoiceOver (Mac): `Cmd + F5`
|
||||||
- NVDA (Windows): Gratis-Download
|
- NVDA (Windows): Gratis-Download
|
||||||
|
|
||||||
**Tools:**
|
**Tools/Browser-Extensions:**
|
||||||
- axe DevTools, WAVE (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)
|
||||||
- Lighthouse (in Chrome DevTools)
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
Automatische Tests finden ~30% der Probleme
|
Automatische Tests finden ~30% der Probleme
|
||||||
@@ -319,168 +185,19 @@ Echte NutzerInnen einbeziehen = Gold-Standard
|
|||||||
<!-- _footer: "" -->
|
<!-- _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
|
# HTTP-Methoden
|
||||||
|
|
||||||
| Methode | Bedeutung | Beispiel |
|
HTTP-Methoden beschreiben, **was** der Client mit einer Ressource tun will.
|
||||||
|---------|-----------|----------|
|
|
||||||
| **GET** | Daten abrufen | Seite laden |
|
| Methode | Bedeutung | Beispiel |
|
||||||
| **POST** | Daten senden | Formular absenden |
|
|---------|-----------|-----------------------------------------------|
|
||||||
| **PUT** | Daten ersetzen | Profil aktualisieren |
|
| **GET** | Daten abrufen | Seite laden `GET /index.html HTTP/2.0` |
|
||||||
| **DELETE** | Daten löschen | Account löschen |
|
| **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:
|
SPEAKER NOTES:
|
||||||
@@ -505,10 +222,12 @@ Das wird wichtiger, wenn ihr mit REST-APIs arbeitet.
|
|||||||
|
|
||||||
# HTTP Status-Codes
|
# HTTP Status-Codes
|
||||||
|
|
||||||
|
Jede HTTP-Response enthält einen dreistelligen Status-Code — die erste Ziffer verrät die Kategorie.
|
||||||
|
|
||||||
```http
|
```http
|
||||||
HTTP/1.1 200 OK
|
HTTP/2.0 200 OK
|
||||||
HTTP/1.1 404 Not Found
|
HTTP/2.0 404 Not Found
|
||||||
HTTP/1.1 500 Internal Server Error
|
HTTP/2.0 500 Internal Server Error
|
||||||
```
|
```
|
||||||
|
|
||||||
| Code-Bereich | Bedeutung |
|
| Code-Bereich | Bedeutung |
|
||||||
@@ -539,112 +258,76 @@ Status-Codes sagen euch, was passiert ist.
|
|||||||
<!-- _footer: "" -->
|
<!-- _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)
|
|
||||||
|
|
||||||
**Die Konzepte:**
|
```html
|
||||||
- 4 Schichten: Anwendung → Transport → Internet → Netzzugang
|
<nav id="hauptnavigation">...</nav>
|
||||||
- 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 */
|
|
||||||
```
|
```
|
||||||
|
|
||||||
<!--
|
|
||||||
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
|
```css
|
||||||
/* Mobile First: Basis-Styles */
|
#hauptnavigation {
|
||||||
.container {
|
background: #333;
|
||||||
padding: 1rem;
|
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:
|
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.
|
In der Praxis: Klassen sind meist besser. IDs haben hohe Spezifität und sind unflexibel.
|
||||||
|
-->
|
||||||
Das Gegenteil wäre Desktop First mit max-width – aber Mobile First ist heute Standard.
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- _header: "" -->
|
||||||
|
<!-- _footer: "" -->
|
||||||
|
|
||||||
|
|
||||||
|
# Farben
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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.
|
||||||
-->
|
-->
|
||||||
|
|||||||
Reference in New Issue
Block a user