diff --git a/slides/223015b/01-daten-grundlagen.md b/slides/223015b/01-daten-grundlagen.md index 89035a5..c0b37df 100644 --- a/slides/223015b/01-daten-grundlagen.md +++ b/slides/223015b/01-daten-grundlagen.md @@ -310,8 +310,6 @@ Klausurrelevant: wenn jemand sagt "lila ist B399FF", können wir die drei Byte s --- - - # Hex begegnet euch überall | Kontext | Beispiel | @@ -447,8 +445,6 @@ Pädagogisch wichtig: variable Länge heißt, dass „Zeichen zählen" und „By --- - - # Beispiel: Byte zählen **Text:** `"Hello·🌸·こんにちは·(Kon-ni-chi-wa)"` @@ -490,8 +486,6 @@ Auflösung kommt mit Magic-Numbers-Folie. --- - - # Magic Numbers — die Visitenkarte der Datei **Datei-Typ erkennt man an den ersten Byte:** @@ -584,8 +578,6 @@ Gruppenarbeit: 3–4 Personen. ~15 Min. --- - - # KB vs KiB — warum „1 TB" als 931 GB angezeigt wird ![bg right:48% contain](./assets/demos/kb-vs-kib.png) @@ -607,8 +599,6 @@ Klausurfähig: warum zeigt eine 1-TB-SSD im Finder „931 GB"? Begründung mit R --- - - # Dateneinheiten — Größenordnungen | Einheit | Bytes (dezimal) | Beispiel | @@ -749,8 +739,6 @@ Das ist dasselbe Phänomen wie Audio-Quantisierungsrauschen, nur in der visuelle --- - - # Datenrate = Sample Rate × Bittiefe × Kanäle **Formel:** @@ -779,8 +767,6 @@ Brücke zu Kap2 (Kompression): da reduzieren wir nicht die Parameter, sondern *w --- - - # CD-Audio: die Rechnung **Audio-CD (Philips/Sony 1982):** @@ -807,8 +793,6 @@ Spektrogramm-Folie als Anschluss: 44,1 kHz → wir können bis ~22 kHz erfassen. --- - - # Nyquist — warum 2× reicht ![bg right:50% contain](./assets/demos/nyquist-diagram.png) diff --git a/slides/223015b/02-kompression.md b/slides/223015b/02-kompression.md index 87e4532..671b017 100644 --- a/slides/223015b/02-kompression.md +++ b/slides/223015b/02-kompression.md @@ -370,8 +370,6 @@ Sobald du bearbeiten, mastern, archivieren willst → Lossless. --- - - # Vergleich: Lossless vs. Lossy | Eigenschaft | Verlustfrei (Lossless) | Verlustbehaftet (Lossy) | diff --git a/slides/223015b/03-inhalte-bild-audio-video.md b/slides/223015b/03-inhalte-bild-audio-video.md index d1bb772..265e13c 100644 --- a/slides/223015b/03-inhalte-bild-audio-video.md +++ b/slides/223015b/03-inhalte-bild-audio-video.md @@ -149,8 +149,6 @@ Anwendung: Logo → Vektor. Foto → Raster. Icon → Vektor. --- - - # Raster vs. Vektor | | Raster | Vektor | @@ -332,8 +330,6 @@ Konsequenz: nach Schritt 6 ist die Pipeline fertig. Die JPEG-Datei kann gespeich --- - - # Memo: Die 6 JPEG-Schritte | # | Schritt | Lossless / Lossy | @@ -415,8 +411,6 @@ Quality-Bewusstsein: SVG ist nicht „Konkurrenz" zu Raster-Formaten — sie lö --- - - # Wann welches Bildformat? | Anwendung | Format | Warum | @@ -572,8 +566,6 @@ Wichtig: --- - - # Audio-Format-Wahl | Anwendung | Format | Warum | @@ -668,7 +660,6 @@ Die Kompression ist hier nicht „nice to have" — sie ist die Voraussetzung, d --- - @@ -751,8 +742,6 @@ B-Frames sind effizienter als P-Frames (haben zwei Vorlagen), aber teurer zu enk --- - - # I, P, B — Frame-Typen | Typ | Vollname | Was drin | Größe | @@ -896,8 +885,6 @@ Pointe: politisch gewinnt der „offene" Codec, wenn die Industrie es will. Bei --- - - # Patent vs. Open — warum AV1? | Codec | Effizienz | Patent | Adoption (2026) | diff --git a/slides/223015b/04-speicher-schnittstellen.md b/slides/223015b/04-speicher-schnittstellen.md index e96cc34..338d2ec 100644 --- a/slides/223015b/04-speicher-schnittstellen.md +++ b/slides/223015b/04-speicher-schnittstellen.md @@ -157,8 +157,6 @@ NVMe vs SATA: --- - - # HDD vs. SSD ![bg right:40% contain](./assets/hdd-ssd-comparison.png) @@ -188,8 +186,6 @@ Klausurfähig: gegeben ein Anwendungsfall, HDD oder SSD? --- - - # Wann nehme ich was? | Anwendung | Empfehlung | Begründung | @@ -248,8 +244,6 @@ Wenn du einen USB-Stick „formatierst", wird das Filesystem neu angelegt — di --- - - # Filesystem-Landschaft | Filesystem | Wo verbreitet | Max. Dateigröße | Besonderheit | @@ -310,8 +304,6 @@ Daraus folgt die 3-2-1-Regel. --- - - # Die 3-2-1-Backup-Regel **3** Kopien deiner Daten @@ -523,8 +515,6 @@ WiFi 6 / 6E (ax) bringt deutliche Verbesserung gegenüber WiFi 5 (ac), insbesond --- - - # Schnittstellen-Wahl-Matrix | Aufgabe | Beste Schnittstelle | Warum | diff --git a/slides/223015b/05-distribution-metadaten.md b/slides/223015b/05-distribution-metadaten.md index 647376b..8a63723 100644 --- a/slides/223015b/05-distribution-metadaten.md +++ b/slides/223015b/05-distribution-metadaten.md @@ -213,8 +213,6 @@ Konsistente Methoden + URLs → REST = "Representational State Transfer". --- - - # REST: GET · POST · PUT · DELETE | Methode | Was tut sie | URL-Beispiel | @@ -354,8 +352,6 @@ Demo im Hörsaal: ein Foto vom Smartphone exportieren, exiftool drauf, GPS-Koord --- - - # Der John-McAfee-GPS-Fall **Dezember 2012.** John McAfee (Antivirus-Erfinder) flieht aus Belize, wo er als Mordverdächtiger gesucht wird. @@ -440,8 +436,6 @@ Verwendet von: iTunes, Spotify, jeder Audio-Player. --- - - # Der Tony-Blair-Fall (PDF-Metadaten) **Februar 2003.** Britische Regierung veröffentlicht PDF-Dokument zur Begründung des Irakkriegs. @@ -524,8 +518,6 @@ Gegenstrategien: --- - - # Vendor-Lockin als Risiko **Szenario:** Du arbeitest 5 Jahre lang mit Adobe InDesign. Dann steigt der Abo-Preis um 200 % oder Adobe ändert das Format. diff --git a/slides/223015b/klausurfolien.md b/slides/223015b/klausurfolien.md index 5660ffe..c30c14e 100644 --- a/slides/223015b/klausurfolien.md +++ b/slides/223015b/klausurfolien.md @@ -97,729 +97,3 @@ Hochschule der Medien Stuttgart **Sommersemester 2026** [https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/) - ---- - - - - - -# Hex begegnet euch überall - -| Kontext | Beispiel | -|---------|----------| -| CSS-Farben | `#FF5733` | -| MAC-Adressen | `00:1A:2B:3C:4D:5E` | -| Speicheradressen | `0xA04F20` | -| Windows-Fehlercodes | `0x80070005` | -| Unicode-Codepoints | `U+00E4` (ä) | -| Datei-Signaturen | `89 50 4E 47` (PNG) | - - - - ---- - - - - - -# Beispiel: Byte zählen - -**Text:** `"Hello·🌸·こんにちは·(Kon-ni-chi-wa)"` - -| Zeichen | Byte | -|---------|-------| -| `Hello·` | 6 × 1 = **6 Byte** (ASCII) | -| `🌸` | **4 Byte** (Emoji) | -| `·` | **1 Byte** | -| `こんにちは` | 5 × 3 = **15 Byte** (Hiragana) | -| `·(Kon-ni-chi-wa)` | **16 Byte** (ASCII) | - -**Gesamt: 42 Byte für 29 sichtbare Zeichen.** - - - - ---- - - - - - -# Magic Numbers — die Visitenkarte der Datei - -**Datei-Typ erkennt man an den ersten Byte:** - -| Format | Magic Number (Hex) | Lesbar? | -|--------|-------------------|---------| -| PNG | `89 50 4E 47` | (89 außerhalb ASCII) P N G | -| JPEG | `FF D8 FF` | — | -| PDF | `25 50 44 46` | % P D F | -| ZIP | `50 4B 03 04` | P K — — | - -**Achtung:** Werte > 127 sind nicht ASCII-druckbar. *Hex-Editoren zeigen einen Punkt oder ein anderes Ersatzzeichen als Platzhalter.* - - - - ---- - - - - - -# KB vs KiB — warum „1 TB" als 931 GB angezeigt wird - -![bg right:48% contain](./assets/demos/kb-vs-kib.png) - -**Auf der Verpackung:** 1 TB = 10¹² Byte (dezimal). -**Im Finder:** 931 GB = eigentlich 931 GiB (binär, 1024³). - -Es fehlt nichts — beide Seiten zählen nur in **verschiedenen Sprachen.** - - - - ---- - - - - - -# Dateneinheiten — Größenordnungen - -| Einheit | Bytes (dezimal) | Beispiel | -|---------|------:|----------| -| **Byte** | 1 | Farbwert eines Pixels | -| **Kilobyte (KB)** | 1.000 | kleiner Programmcode | -| **Megabyte (MB)** | 1 Million | Textdokument | -| **Gigabyte (GB)** | 1 Milliarde | Kinofilm in FullHD | -| **Terabyte (TB)** | 1 Billion | ~12h Video in 4K | -| **Petabyte (PB)** | 1 Billiarde | Netflix-Gesamtarchiv | -| **Exabyte (EB)** | 1 Trillion | Alle E-Mails weltweit/Tag | -| **Zettabyte (ZB)** | 1 Trilliarde | globale Datenmenge ~heute | - - - - ---- - - - - - -# Datenrate = Sample Rate × Bittiefe × Kanäle - -**Formel:** - -``` -Datenrate (bit/s) = Sample Rate (Hz) × Bittiefe (bit) × Kanäle -``` - -**Was bestimmt jeder Faktor?** - -- **Sample Rate:** Bandbreite (Höhe der erfassbaren Töne) -- **Bittiefe:** Dynamik (Stufenfeinheit) -- **Kanäle:** Stereo, Mono, Surround - -Daraus ergibt sich, wie groß eine Audiodatei pro Sekunde wird — *unkomprimiert*. - - - - ---- - - - - - -# CD-Audio: die Rechnung - -**Audio-CD (Philips/Sony 1982):** - -``` -44.100 Hz × 16 bit × 2 Kanäle = 1.411.200 bit/s = 1,4 Mbit/s -``` - -Pro Sekunde: ~172 KB. Pro Minute: ~10,3 MB. Pro Album (60 Min): ~635 MB. - -*Eine ganze 90er-Festplatte für ein Album.* - - - - ---- - - - - - -# Nyquist — warum 2× reicht - -![bg right:50% contain](./assets/demos/nyquist-diagram.png) - -**Sample-Rate ≥ *2× höchste Signal-Frequenz.*** - -``` -f_sample ≥ 2 · f_max -``` - -Drei Fälle: - -- **zu wenig** → Aliasing -- **genau** → mathematisches Minimum -- **mehr** → sichere Rekonstruktion - - - - ---- - - - - - -# Vergleich: Lossless vs. Lossy - -| Eigenschaft | Verlustfrei (Lossless) | Verlustbehaftet (Lossy) | -|-------------|------------------------|--------------------------| -| Was passiert? | Redundanz raus | Irrelevanz raus | -| Umkehrbar? | Ja, bit-genau | Nein, nie wieder | -| Trick | Wiederholungen kürzer kodieren | Wahrnehmung modellieren | -| Typischer Faktor | 2× – 5× | 10× – 100× | -| Anwendung | Archiv, Werkzeug, Code | Stream, Anzeige, Konsum | -| Beispiele | ZIP · PNG · FLAC · RAW | MP3 · JPEG · H.264 · WebP | - - - - ---- - - - - - -# Raster vs. Vektor - -| | Raster | Vektor | -|--|--------|--------| -| Was | Gitter aus Pixel-Werten | Mathematische Anweisungen | -| Speicher | wächst mit Auflösung | wächst mit Komplexität | -| Skalierung | pixelig beim Zoom | scharf bei jeder Größe | -| Geeignet für | Fotos, Screenshots | Logos, Icons, Schrift | -| Formate | PNG · JPEG · GIF · WebP | SVG · PDF · Schriftarten | - - - - ---- - - - - - -# Memo: Die 6 JPEG-Schritte - -| # | Schritt | Lossless / Lossy | -|---|---------|------------------| -| 1 | RGB → Y'CbCr (Farbraum) | Lossless | -| 2 | Chroma-Subsampling 4:2:0 | **Lossy** | -| 3 | 8×8 Blöcke | Lossless | -| 4 | DCT (Frequenz-Zerlegung) | Lossless | -| 5 | Quantisierung | **Lossy** (Haupt-Reduktion) | -| 6 | Huffman + Zigzag + RLE | Lossless | - -Nur **2** der 6 Schritte verlieren Information. - - - - ---- - - - - - -# Wann welches Bildformat? - -| Anwendung | Format | Warum | -|-----------|--------|-------| -| Foto im Web (Insta, News) | **JPEG** oder **WebP** | klein, Foto-optimiert | -| Foto-Archiv (RAW) | **RAW**, **TIFF**, **DNG** | nichts verlieren | -| Logo, Icon (skalierbar) | **SVG** | wird neu berechnet | -| Logo als Raster | **PNG** | Transparenz + scharfe Kanten | -| Screenshot mit Text | **PNG** | scharfe Buchstaben | -| Animiertes Sticker | **GIF** oder **WebP** | beide animierbar | -| Foto in höchster Modern-Qualität | **AVIF** oder **WebP** | bessere Kompression als JPEG | - - - - ---- - - - - - -# Audio-Format-Wahl - -| Anwendung | Format | Warum | -|-----------|--------|-------| -| Spotify-Stream | **AAC** oder **MP3 192+** | Kompression, breite Unterstützung | -| Studio-Master | **WAV** oder **FLAC** | Bit-genau erhalten | -| Sprachnachricht | **Opus** oder **AAC-LD** | für Sprache optimiert, niedrige Bitrate | -| Podcast-Distribution | **MP3 128 kbit/s** | universelle Unterstützung | -| HiFi-Audiophile | **FLAC** | lossless, kleiner als WAV | -| Archiv eigener Aufnahmen | **FLAC** oder **WAV** | nichts verlieren | - - - - ---- - - - - - -![bg fit](./assets/demos/container-vs-codec.png) - - - - ---- - - - - - -# I, P, B — Frame-Typen - -| Typ | Vollname | Was drin | Größe | -|-----|----------|----------|-------| -| **I** | Intra-coded | Komplettes Bild (wie JPEG) | groß | -| **P** | Predicted | „Was hat sich seit voriges I/P geändert" | mittel | -| **B** | Bidirectional | „Was zwischen vorigem und nächstem I/P" | klein | - -Typische GOP: `I B B P B B P B B P B B I ...` (alle 1–3 Sekunden ein I-Frame). - - - - ---- - - - - - -# Patent vs. Open — warum AV1? - -| Codec | Effizienz | Patent | Adoption (2026) | -|-------|-----------|--------|-----------------| -| H.264 | Baseline | Lizenz (MPEG-LA) | ~80 % aller Videos | -| H.265 | +50 % | 3 Patent-Pools, chaotisch | nur Apple | -| VP9 | ~H.265 | lizenzfrei (Google) | YouTube 4K | -| **AV1** | **+30 % über H.265** | **lizenzfrei (Allianz)** | **YouTube, Netflix, Twitch** | - -**Die Lektion:** technisch beste Lösung gewinnt nicht. *Lizenz-klare* beste Lösung gewinnt. - - - - ---- - - - - - -# HDD vs. SSD - -![bg right:40% contain](./assets/hdd-ssd-comparison.png) - -| | HDD | SSD | -|--|-----|-----| -| Technik | Mechanik | Flash | -| Geschwindigkeit | 50–250 MB/s | 500–14.000 MB/s | -| Latenz | ~10 ms | ~0,1 ms | -| Preis/TB (2026) | ~20 € | ~70 € | -| Lebensdauer | ~5–10 Jahre | ~5–10 Jahre | -| Geräusch | hörbar | lautlos | -| Stoß-empfindlich | ja | nein | - - - - ---- - - - - - -# Wann nehme ich was? - -| Anwendung | Empfehlung | Begründung | -|-----------|------------|------------| -| Betriebssystem auf dem Laptop | **NVMe-SSD** | Geschwindigkeit, Boot | -| Eigene Foto-Library (10 TB+) | **HDD** | Kapazität, Preis | -| Server für Logfiles | **HDD oder SSD** | je nach Schreib-Last | -| Externes Backup-Archiv | **HDD** | billig, ok wenn langsam | -| Mobile Workstation (Reise) | **SSD** | Stoß, Geräusch | -| Edit-Drive für 4K-Schnitt | **NVMe-SSD** | Throughput für Video | -| Langzeitarchiv 10+ Jahre | **LTO-Band + M-DISC** | Langlebigkeit | - - - - ---- - - - - - -# Filesystem-Landschaft - -| Filesystem | Wo verbreitet | Max. Dateigröße | Besonderheit | -|-----------|---------------|----------------:|--------------| -| **FAT32** | USB-Sticks, SD-Karten alt | **4 GB** | universell, alt | -| **exFAT** | USB-Sticks modern | 16 EB | wie FAT, ohne 4-GB-Limit | -| **NTFS** | Windows | 16 EB | Standard seit Win 2000 | -| **APFS** | macOS seit 2017 | 8 EB | snapshots, schnell | -| **ext4** | Linux | 16 TB | klassisch, robust | -| **ZFS** | Server, FreeBSD | 16 EB | checksum, snapshots | - -**FAT32 4-GB-Grenze** ist der häufigste Alltags-Knack: USB-Stick noch nie umformatiert → kein 4K-Video drauf. - - - - ---- - - - - - -# Die 3-2-1-Backup-Regel - -**3** Kopien deiner Daten - -**2** verschiedene **Medien** (z.B. SSD + HDD) - -**1** Kopie **off-site** (außerhalb deines Wohnorts) - -Beispiel: - -``` -Original → Foto-Library auf der MacBook-SSD -Kopie 1 → Time Machine auf externer HDD (zuhause) -Kopie 2 → Backblaze in der Cloud (off-site) -``` - - - - ---- - - - - - -# Schnittstellen-Wahl-Matrix - -| Aufgabe | Beste Schnittstelle | Warum | -|---------|---------------------|-------| -| 4K-Monitor anschließen | **HDMI 2.0+** oder **DP 1.4+** | Bandbreite | -| Online-Gaming | **Ethernet** | niedrige Latenz | -| eGPU am Laptop | **Thunderbolt 3/4** | PCIe-Tunnel | -| SD-Karte einlesen | **USB-A 3.0** oder **USB-C** | Kompatibilität | -| Smartphone laden | **USB-C-PD** | Standard | -| Heim-Streaming | **WiFi** oder **Ethernet** | reicht beides | -| 4K-Stream mehrere Geräte | **Ethernet** | Stabilität | - - - - ---- - - - - - -# REST: GET · POST · PUT · DELETE - -| Methode | Was tut sie | URL-Beispiel | -|---------|-------------|--------------| -| **GET** | lesen | `GET /users/42` (User mit ID 42 abfragen) | -| **POST** | neu erstellen | `POST /users` mit Daten als Body | -| **PUT** | überschreiben | `PUT /users/42` mit kompletten neuen Daten | -| **PATCH** | teilweise ändern | `PATCH /users/42` mit Änderungen | -| **DELETE** | löschen | `DELETE /users/42` | - -CRUD = **C**reate · **R**ead · **U**pdate · **D**elete. - - - - ---- - - - - - -# Der John-McAfee-GPS-Fall - -**Dezember 2012.** John McAfee (Antivirus-Erfinder) flieht aus Belize, wo er als Mordverdächtiger gesucht wird. - -**Vice Magazine** veröffentlicht ein Interview mit einem Foto: McAfee im T-Shirt, scheinbar in einer geheimen Location. - -**EXIF-Koordinaten im Foto:** `15.6541° N, 88.9939° W` → **Hotel Nana Lodge, Guatemala.** Bekannt. - -McAfee wird 36 Stunden später festgenommen. - - - - ---- - - - - - -# Der Tony-Blair-Fall (PDF-Metadaten) - -**Februar 2003.** Britische Regierung veröffentlicht PDF-Dokument zur Begründung des Irakkriegs. - -Ein britischer Akademiker findet im **PDF-Revisionsverlauf**: das Dokument wurde aus einer studentischen Doktorarbeit von 1991 kopiert. - -**Plagiats-Skandal.** Plus Hinweise auf welche Mitarbeiter:innen welche Sätze überarbeitet hatten. - -→ **PDF-Metadaten** verraten oft mehr als der Inhalt. - - - - ---- - - - - - -# Vendor-Lockin als Risiko - -**Szenario:** Du arbeitest 5 Jahre lang mit Adobe InDesign. Dann steigt der Abo-Preis um 200 % oder Adobe ändert das Format. - -**Konsequenz:** -- Bestehende INDD-Dateien öffnen sich noch — aber nur in Adobe-Produkten -- Migration zu Affinity Publisher / Scribus: Daten müssen konvertiert werden, manche Details gehen verloren -- Bei einigen Formaten gibt es keine Konverter — Vendor entscheidet komplett - -**Schutz:** Wichtige Daten in **offenen Formaten** parallel speichern. - - diff --git a/slides/223015c/01-geschichte-grundlagen-html.md b/slides/223015c/01-geschichte-grundlagen-html.md index 2dc0b2a..372da1d 100644 --- a/slides/223015c/01-geschichte-grundlagen-html.md +++ b/slides/223015c/01-geschichte-grundlagen-html.md @@ -205,8 +205,6 @@ Auch beteiligt: Manhattan-Projekt (Implosions-Linsen für die Atombombe). Zwiesp --- - - # Von-Neumann-Architektur · 5 Komponenten | # | Komponente | Aufgabe | @@ -299,8 +297,6 @@ ARPANET (1969) ist die erste praktische Umsetzung. 4 Knoten anfangs: UCLA, Stanf --- - - # Internet-Timeline · 4 Milestones | Jahr | Was | Was hat es verändert | @@ -443,8 +439,6 @@ Nichts Magisches dran. Plain-Text mit Tags drum. Studis könnten das in Notepad --- - - # HTML-Anatomie ```html @@ -534,8 +528,6 @@ Wichtig: vergesst nicht den `alt`-Text für `` — A11y. --- - - # Document-Struktur: das Grundgerüst ```html @@ -585,8 +577,6 @@ Faustregel: alles, was den Inhalt der Seite betrifft → body. Alles, was die Se --- - - # Semantische HTML-Tags | Tag | Bedeutung | Beispiel | diff --git a/slides/223015c/02-netzwerke-protokolle-css.md b/slides/223015c/02-netzwerke-protokolle-css.md index a0698bf..b42b708 100644 --- a/slides/223015c/02-netzwerke-protokolle-css.md +++ b/slides/223015c/02-netzwerke-protokolle-css.md @@ -90,8 +90,6 @@ Jede Folie bedient mindestens eines der Klausur-Lernziele C/D/E/F. --- - - # Drei Adressen — IP · MAC · Port | Adresse | Identifiziert | Beispiel | @@ -199,8 +197,6 @@ Pro Antwort weiter unten ist der Fehler eingegrenzt. --- - - # TCP/IP · 4 Schichten | # | Schicht | Aufgabe | Beispiel-Protokolle | Dateneinheit | @@ -246,8 +242,6 @@ Sehr wichtig: jede Schicht sieht nur ihren eigenen Header — sie kann den Inhal --- - - # Encapsulation — Datenüberbringung ``` @@ -381,8 +375,6 @@ Jetzt: was geht ÜBER die Verbindung? Bei einer Webseite: HTTP-Requests. --- - - # HTTP-Request — was geschickt wird ```http @@ -421,8 +413,6 @@ Wichtige Header: --- - - # HTTP-Response — was zurückkommt ```http @@ -456,8 +446,6 @@ Status-Code ist die wichtigste Zeile. Drei Stellen, erste Stelle gibt grobe Kate --- - - # Statuscodes — die wichtigsten | Code | Name | Bedeutung | @@ -629,8 +617,6 @@ Standard: External in style.css. --- - - # CSS-Selektoren | Selektor | Was | @@ -683,8 +669,6 @@ Faustregel: nur so spezifisch wie nötig. „nav > a" ist klar (Links in Hauptna --- - - # Spezifizität — wer gewinnt? Wenn mehrere CSS-Regeln auf das gleiche Element zutreffen: **die spezifischste gewinnt.** @@ -750,8 +734,6 @@ Heute Best-Practice: `* { box-sizing: border-box; }` global setzen. --- - - # Box-Model ``` @@ -808,8 +790,6 @@ Klausur (H.4): Flexbox vs Grid unterscheiden — wann was? --- - - # Flexbox vs Grid | | Flexbox | Grid | @@ -886,8 +866,6 @@ Für Studis besonders relevant: --- - - # BFSG + EAA — was kommt am 28.06.2025? **Barrierefreiheitsstärkungsgesetz (BFSG)** — DE-Gesetz, setzt **European Accessibility Act (EAA)** um. @@ -916,8 +894,6 @@ EU hat das mit EAA 2019 beschlossen. DE setzt es mit BFSG 2021 in nationales Rec --- - - # WCAG · 4 Prinzipien (POUR) | Prinzip | Bedeutung | Beispiel | diff --git a/slides/223015c/klausurfolien.md b/slides/223015c/klausurfolien.md index 5c87296..8200d6b 100644 --- a/slides/223015c/klausurfolien.md +++ b/slides/223015c/klausurfolien.md @@ -95,597 +95,3 @@ Hochschule der Medien Stuttgart **Sommersemester 2026** [https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/) - ---- - - - - - -# Von-Neumann-Architektur · 5 Komponenten - -| # | Komponente | Aufgabe | -|---|------------|---------| -| 1 | **Steuerwerk** (Control Unit) | holt Befehl, entscheidet was zu tun ist | -| 2 | **Rechenwerk** (ALU) | führt Rechnung / Vergleich aus | -| 3 | **Speicher** (Memory) | hält Daten *und* Programm | -| 4 | **Eingabe / Ausgabe** (I/O) | Tastatur, Bildschirm, Netzwerk | -| 5 | **Bus** (Verbindung) | transportiert Daten zwischen allen | - -**Schlüssel:** Speicher hält *beides* — Daten + Programm. (Stored Program.) - - - - ---- - - - - - -# Internet-Timeline · 4 Milestones - -| Jahr | Was | Was hat es verändert | -|------|-----|----------------------| -| **1969** | ARPANET | Erstes paket-vermitteltes Netzwerk, 4 Knoten | -| **1971** | Email (Ray Tomlinson) | Erste Nutzung des `@`-Zeichens | -| **1983** | TCP/IP | Wurde Standard-Protokoll des ARPANET | -| **1989** | **WWW** (Berners-Lee, CERN) | HTML, HTTP, URL — das Web wie wir es kennen | - -1993: Mosaic-Browser → Internet wird *populär*. - - - - ---- - - - - - -# HTML-Anatomie - -```html -Mein Link -``` - -| Bestandteil | Was | -|-------------|-----| -| `` | Ende des Opening-Tags | -| `Mein Link` | **Inhalt** des Elements | -| `` | **Closing-Tag** | - -Alles zusammen = ein **Element.** - - - - ---- - - - - - -# Document-Struktur: das Grundgerüst - -```html - - - - - - Meine Seite - - - -

Hallo Welt

- - - -``` - - - - ---- - - - - - -# Semantische HTML-Tags - -| Tag | Bedeutung | Beispiel | -|-----|-----------|----------| -| `
` | Kopfbereich (Logo, Nav) | oben auf der Seite | -| `