diff --git a/Makefile b/Makefile index f9b73b0..c879b1c 100644 --- a/Makefile +++ b/Makefile @@ -7,13 +7,13 @@ # ----------------------------------------------------------------------------- # Course registry # ----------------------------------------------------------------------------- -COURSES = 223015b 223015c dhbw +COURSES = 223015b 223015c dhbw 223015b-2026 223015c-2026 dhbw-2026 SLIDES_DIR = slides DEPLOY_HOST = tengo@tuttle.uberspace.de # Per-course settings: NAME, KAPITEL, DEPLOY, PORT, KLAUSUR (1 or empty) 223015b_NAME = Dateiformate, Schnittstellen, Speichermedien -223015b_KAPITEL = 00-intro 01-daten-grundlagen 02-kompression 03-inhalte-bild-audio-video 04-speicher-schnittstellen 05-distribution-metadaten klausurfolien klausurfragen +223015b_KAPITEL = 00-intro 01-grundlagen-text-audio 02-bild-audio-video 03-speichermedien-schnittstellen 04-distribution-apis-zukunft 05-vertiefung-offene-fragen klausurfolien klausurfragen 223015b_DEPLOY = /home/tengo/html/hdm/223015b 223015b_KLAUSUR = 1 @@ -27,6 +27,22 @@ dhbw_KAPITEL = 01_web_eng 02_css_extended 03_nodejs_basics 04_nodejs_advanced 05 dhbw_DEPLOY = /home/tengo/html/dhbw dhbw_KLAUSUR = +# -- 2026-rewrite versions -------------------------------------------------- +223015b-2026_NAME = Dateiformate, Schnittstellen, Speichermedien (Rewrite 2026) +223015b-2026_KAPITEL = 00-intro 01-daten-grundlagen 02-kompression 03-inhalte-bild-audio-video 04-speicher-schnittstellen 05-distribution-metadaten klausurfolien klausurfragen +223015b-2026_DEPLOY = /home/tengo/html/hdm/223015b-2026 +223015b-2026_KLAUSUR = 1 + +223015c-2026_NAME = Internettechnologien (Rewrite 2026) +223015c-2026_KAPITEL = 00-intro 01-geschichte-grundlagen-html 02-netzwerke-protokolle-css 03-interaktivitaet-javascript klausurfolien klausurfragen +223015c-2026_DEPLOY = /home/tengo/html/hdm/223015c-2026 +223015c-2026_KLAUSUR = 1 + +dhbw-2026_NAME = Technik I – Grundlagen IT (Rewrite 2026) +dhbw-2026_KAPITEL = 01_web_eng 02_css_extended 03_nodejs_basics 04_nodejs_advanced 05_testing 06_typescript 07_docker 08_best_practices +dhbw-2026_DEPLOY = /home/tengo/html/dhbw-2026 +dhbw-2026_KLAUSUR = + # Courses with klausur extraction enabled KLAUSUR_COURSES = $(foreach c,$(COURSES),$(if $($(c)_KLAUSUR),$(c),)) ROOT_DEPLOY = /home/tengo/html/hdm diff --git a/slides/223015b-2026/00-intro.md b/slides/223015b-2026/00-intro.md new file mode 100644 index 0000000..86754d2 --- /dev/null +++ b/slides/223015b-2026/00-intro.md @@ -0,0 +1,192 @@ +--- +marp: true +theme: gaia +paginate: true +backgroundColor: #fff +header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)" +footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026" +title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege +--- + + + + + + + +![bg cover opacity:0.2](./assets/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg) + +# Dateiformate, Schnittstellen, Speichermedien & Distributionswege + +**223015b** · Modul "Technik 1" · 1. Semester +Digital- und Medienwirtschaft +Hochschule der Medien Stuttgart + +**Sommersemester 2026** + +[https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/) + +--- + + + + +![bg fit](./assets/qrcode-0.svg) + +--- + + + +# Herzlich willkommen! +## Einführung + +--- + +# Über mich + +**Michael Werner Czechowski** + +- Systems and Platform Engineer +- Schwerpunkte: + - Web-Technologien, Barriere-Armut, Systemarchitektur, Open Source +- Hintergrund: + - Philosophie (Uni Stuttgart) + - Wirtschaftsinformatik (Leibniz-FH Hannover) +- Kontakt: lb-czechowski@hdm-stuttgart.de + +--- + +# Warum dieses Modul? + +**Digitale Medien sind überall.** + +* Warum enthalten Fotos oft Informationen über den Aufnahmeort? +* Warum lassen sich gelöschte Dateien wiederherstellen? +* Warum benötigt eine Minute 4K-Video unkomprimiert 45 GB Speicher? +* Warum zeigt eine "1 TB"-Festplatte nur 931 GB an? +* Warum ist USB-C nicht gleich USB-C? +* Ziel: **→ Mitreden können!** + + + +--- + +# Kurze Umfrage + +**Bitte Hand heben:** + +* Wer kennt den Unterschied zwischen analog und digital? +* Wer hat schon mal eine Datei von einem Format in ein anderes konvertiert? +* Wer hat schon mal Metadaten aus einem Foto entfernt? +* Wer hat schon mal ein Backup verloren? +* Wer hat schon mal ein Backup wiederhergestellt? + + + +--- + +# Kursübersicht + +**Kapitel:** + +* 1. **Grundlagen**, Text & Audio (Bits, Bytes, Zeichenkodierung, MP3) +* 2. Bild- & Video-**Kompression** (JPEG, PNG, H.264/H.265) +* 3. **Speichermedien** & **Schnittstellen** (HDD, SSD, USB, Thunderbolt) +* 4. **Distribution** und Verteilung (Streaming, REST, Cloud) +* Vertiefung & offene Fragen + + +--- + + + + + + +# Prüfungsleistung + +**Nach aktuellem Kenntnisstand:** + +* 90 min insg. (Technik 1) +* Schriftliche Klausur (digital) +* Teils offene Fragen +* Kein Coding/Programmieren +* **Prüfungsrelevante Folien:** + - Gestreift oder Vollton (PDF) markiert diff --git a/slides/223015b/01-daten-grundlagen.md b/slides/223015b-2026/01-daten-grundlagen.md similarity index 100% rename from slides/223015b/01-daten-grundlagen.md rename to slides/223015b-2026/01-daten-grundlagen.md diff --git a/slides/223015b/02-kompression.md b/slides/223015b-2026/02-kompression.md similarity index 100% rename from slides/223015b/02-kompression.md rename to slides/223015b-2026/02-kompression.md diff --git a/slides/223015b/03-inhalte-bild-audio-video.md b/slides/223015b-2026/03-inhalte-bild-audio-video.md similarity index 100% rename from slides/223015b/03-inhalte-bild-audio-video.md rename to slides/223015b-2026/03-inhalte-bild-audio-video.md diff --git a/slides/223015b/04-speicher-schnittstellen.md b/slides/223015b-2026/04-speicher-schnittstellen.md similarity index 100% rename from slides/223015b/04-speicher-schnittstellen.md rename to slides/223015b-2026/04-speicher-schnittstellen.md diff --git a/slides/223015b/05-distribution-metadaten.md b/slides/223015b-2026/05-distribution-metadaten.md similarity index 100% rename from slides/223015b/05-distribution-metadaten.md rename to slides/223015b-2026/05-distribution-metadaten.md diff --git a/slides/223015b-2026/assets/2011-hilbert.png b/slides/223015b-2026/assets/2011-hilbert.png new file mode 100644 index 0000000..aac35b8 Binary files /dev/null and b/slides/223015b-2026/assets/2011-hilbert.png differ diff --git a/slides/223015b-2026/assets/8bit-P-character.png b/slides/223015b-2026/assets/8bit-P-character.png new file mode 100644 index 0000000..04a8f7c Binary files /dev/null and b/slides/223015b-2026/assets/8bit-P-character.png differ diff --git a/slides/223015b-2026/assets/AV1.png b/slides/223015b-2026/assets/AV1.png new file mode 100644 index 0000000..25b7c8b Binary files /dev/null and b/slides/223015b-2026/assets/AV1.png differ diff --git a/slides/223015b-2026/assets/Asterisk_with_jpg-artefacts.png b/slides/223015b-2026/assets/Asterisk_with_jpg-artefacts.png new file mode 100644 index 0000000..1b45f34 Binary files /dev/null and b/slides/223015b-2026/assets/Asterisk_with_jpg-artefacts.png differ diff --git a/slides/223015b-2026/assets/Barn-yuv.png b/slides/223015b-2026/assets/Barn-yuv.png new file mode 100644 index 0000000..3643887 Binary files /dev/null and b/slides/223015b-2026/assets/Barn-yuv.png differ diff --git a/slides/223015b-2026/assets/Common_chroma_subsampling_ratios_YCbCr_CORRECTED.svg.png b/slides/223015b-2026/assets/Common_chroma_subsampling_ratios_YCbCr_CORRECTED.svg.png new file mode 100644 index 0000000..2ec8f54 Binary files /dev/null and b/slides/223015b-2026/assets/Common_chroma_subsampling_ratios_YCbCr_CORRECTED.svg.png differ diff --git a/slides/223015b-2026/assets/Felis_silvestris_silvestris_small_gradual_decrease_of_quality_-_JPEG_compression.jpg b/slides/223015b-2026/assets/Felis_silvestris_silvestris_small_gradual_decrease_of_quality_-_JPEG_compression.jpg new file mode 100644 index 0000000..0d3573b Binary files /dev/null and b/slides/223015b-2026/assets/Felis_silvestris_silvestris_small_gradual_decrease_of_quality_-_JPEG_compression.jpg differ diff --git a/slides/223015b-2026/assets/IMG_3617.jpg b/slides/223015b-2026/assets/IMG_3617.jpg new file mode 100644 index 0000000..50f4fbf Binary files /dev/null and b/slides/223015b-2026/assets/IMG_3617.jpg differ diff --git a/slides/223015b-2026/assets/Posterization_example.jpg b/slides/223015b-2026/assets/Posterization_example.jpg new file mode 100644 index 0000000..c539e08 Binary files /dev/null and b/slides/223015b-2026/assets/Posterization_example.jpg differ diff --git a/slides/223015b-2026/assets/addaptive-substractive-colors.jpg b/slides/223015b-2026/assets/addaptive-substractive-colors.jpg new file mode 100644 index 0000000..f4ed381 Binary files /dev/null and b/slides/223015b-2026/assets/addaptive-substractive-colors.jpg differ diff --git a/slides/223015b-2026/assets/artemis.jpg b/slides/223015b-2026/assets/artemis.jpg new file mode 100644 index 0000000..356665f Binary files /dev/null and b/slides/223015b-2026/assets/artemis.jpg differ diff --git a/slides/223015b-2026/assets/ascii-table-colored.png b/slides/223015b-2026/assets/ascii-table-colored.png new file mode 100644 index 0000000..92eada7 Binary files /dev/null and b/slides/223015b-2026/assets/ascii-table-colored.png differ diff --git a/slides/223015b-2026/assets/ascii-table.png b/slides/223015b-2026/assets/ascii-table.png new file mode 100644 index 0000000..32d8521 Binary files /dev/null and b/slides/223015b-2026/assets/ascii-table.png differ diff --git a/slides/223015b-2026/assets/audio-spectrogram.png b/slides/223015b-2026/assets/audio-spectrogram.png new file mode 100644 index 0000000..e99cacc Binary files /dev/null and b/slides/223015b-2026/assets/audio-spectrogram.png differ diff --git a/slides/223015b-2026/assets/av1-grammy-crop.png b/slides/223015b-2026/assets/av1-grammy-crop.png new file mode 100644 index 0000000..9fd4abc Binary files /dev/null and b/slides/223015b-2026/assets/av1-grammy-crop.png differ diff --git a/slides/223015b-2026/assets/av1-grammy.png b/slides/223015b-2026/assets/av1-grammy.png new file mode 100644 index 0000000..f9a4359 Binary files /dev/null and b/slides/223015b-2026/assets/av1-grammy.png differ diff --git a/slides/223015b-2026/assets/av1-logo.png b/slides/223015b-2026/assets/av1-logo.png new file mode 100644 index 0000000..eef700d Binary files /dev/null and b/slides/223015b-2026/assets/av1-logo.png differ diff --git a/slides/223015b-2026/assets/bittorrent.png b/slides/223015b-2026/assets/bittorrent.png new file mode 100644 index 0000000..bc484d8 Binary files /dev/null and b/slides/223015b-2026/assets/bittorrent.png differ diff --git a/slides/223015b-2026/assets/cassette-ipod.png b/slides/223015b-2026/assets/cassette-ipod.png new file mode 100644 index 0000000..e05aecf Binary files /dev/null and b/slides/223015b-2026/assets/cassette-ipod.png differ diff --git a/slides/223015b-2026/assets/compact-disc-cd.jpg b/slides/223015b-2026/assets/compact-disc-cd.jpg new file mode 100644 index 0000000..9499d68 Binary files /dev/null and b/slides/223015b-2026/assets/compact-disc-cd.jpg differ diff --git a/slides/223015b-2026/assets/compression-types.png b/slides/223015b-2026/assets/compression-types.png new file mode 100644 index 0000000..d6b0896 Binary files /dev/null and b/slides/223015b-2026/assets/compression-types.png differ diff --git a/slides/223015b-2026/assets/container-codec-diagram.png b/slides/223015b-2026/assets/container-codec-diagram.png new file mode 100644 index 0000000..a9b09b7 Binary files /dev/null and b/slides/223015b-2026/assets/container-codec-diagram.png differ diff --git a/slides/223015b/assets/demos/aliasing-paar.html b/slides/223015b-2026/assets/demos/aliasing-paar.html similarity index 100% rename from slides/223015b/assets/demos/aliasing-paar.html rename to slides/223015b-2026/assets/demos/aliasing-paar.html diff --git a/slides/223015b/assets/demos/aliasing-paar.png b/slides/223015b-2026/assets/demos/aliasing-paar.png similarity index 100% rename from slides/223015b/assets/demos/aliasing-paar.png rename to slides/223015b-2026/assets/demos/aliasing-paar.png diff --git a/slides/223015b-2026/assets/demos/ascii-table.html b/slides/223015b-2026/assets/demos/ascii-table.html new file mode 100644 index 0000000..853affc --- /dev/null +++ b/slides/223015b-2026/assets/demos/ascii-table.html @@ -0,0 +1,311 @@ + + + + +ASCII-Tabelle + + + +

ASCII-Tabelle (1963) · 7 Bit · 128 Zeichen

+
Spalte = High-Nibble (Hex 0–7) · Zeile = Low-Nibble (Hex 0–F) · Hex oben, Dezimal unten
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
↓ Low
→ High		0000010001200103001140100501016011070111
0000000NULnull010DLEdata link esc1620SPspace323004840@6450P8060`9670p112
1000101SOHstart hdr111DC1XON1721!333114941A6551Q8161a9771q113
2001002STXstart txt212DC21822"343225042B6652R8262b9872r114
3001103ETXend txt313DC3XOFF1923#353335143C6753S8363c9973s115
4010004EOTend trans414DC42024$363445244D6854T8464d10074t116
5010105ENQenquiry515NAK2125%373555345E6955U8565e10175u117
6011006ACKack616SYN2226&383665446F7056V8666f10276v118
7011107BELbell 🔔717ETB2327'393775547G7157W8767g10377w119
8100008BSbackspace818CAN2428(403885648H7258X8868h10478x120
9100109HTtab ⇥919EM2529)413995749I7359Y8969i10579y121
A10100ALF↵ newline101ASUBEOF DOS262A*423A:584AJ745AZ906Aj1067Az122
B10110BVT111BESCescape272B+433B;594BK755B[916Bk1077B{123
C11000CFFform feed121CFS282C,443C<604CL765C\926Cl1087C|124
D11010DCRcarriage131DGS292D-453D=614DM775D]936Dm1097D}125
E11100ESO141ERS302E.463E>624EN785E^946En1107E~126
F11110FSI151FUS312F/473F?634FO795F_956Fo1117FDEL127
+
+ +
+
Steuerzeichen (0–31)
+
Leerzeichen (32)
+
Satzzeichen
+
Ziffern (48–57)
+
Großbuchstaben (65–90)
+
Kleinbuchstaben (97–122)
+
DEL (127)
+
+ +
+ Beispiel: A = Hex 41 = Dez 65 = Bin 0100 0001 + Trick: Ziffern 0–9 liegen bei 30–39 · 'A'+1='B' · Groß ↔ Klein: Bit 5 togglen +
+ + diff --git a/slides/223015b-2026/assets/demos/byte-flow.html b/slides/223015b-2026/assets/demos/byte-flow.html new file mode 100644 index 0000000..807ddfe --- /dev/null +++ b/slides/223015b-2026/assets/demos/byte-flow.html @@ -0,0 +1,180 @@ + + + + +Byte-Fluss: Bit → Hex → ASCII + + + +

1 Byte = 8 Bit = 2 Hex = 1 ASCII-Zeichen

+
Dieselbe Datei — dieselben Byte, drei Schreibweisen. Jeder Rahmen = ein Byte.
+ +
+ + +
+
datei.binRoh-Bit · 8 Bit pro Rahmen
+
+
+ 0100100001100101011011000110110001101111001011000010000001010111 +
+
+ 0110111101110010011011000110010000100001001000000100100001101111 +
+
+ 0111011100100000011000010111001001100101001000000111100101101111 +
+
+ 011101010011111100001010… (weitere Byte) +
+
+
+ +
+
je 8 Bit → 2 Hex-Ziffern
+
+
+ + +
+
datei.hexHex-Sicht · 2 Hex-Ziffern pro Rahmen
+
+
+ 48656C6C6F2C2057 +
+
+ 6F726C642120486F +
+
+ 772061726520796F +
+
+ 753F0A… +
+
+
+ +
+
je 1 Byte → 1 Zeichen
+
+
+ + +
+
datei.txtText-Sicht · 1 ASCII-Zeichen pro Rahmen
+
+
+ Hello,␣W +
+
+ orld!␣Ho +
+
+ w␣are␣yo +
+
+ u?↵… +
+
+
+ +
+ ␣ = Leerzeichen (0x20) + ↵ = Zeilenumbruch (0x0A, nicht druckbar) + Byte ändern sich nicht. Nur die Anzeige. +
+ +
+ + diff --git a/slides/223015b-2026/assets/demos/byte-flow.png b/slides/223015b-2026/assets/demos/byte-flow.png new file mode 100644 index 0000000..e9280cb Binary files /dev/null and b/slides/223015b-2026/assets/demos/byte-flow.png differ diff --git a/slides/223015b-2026/assets/demos/byte-fuer-byte.html b/slides/223015b-2026/assets/demos/byte-fuer-byte.html new file mode 100644 index 0000000..f029ed2 --- /dev/null +++ b/slides/223015b-2026/assets/demos/byte-fuer-byte.html @@ -0,0 +1,117 @@ + + + + +Byte für Byte — drei Brillen + + + +

Byte für Byte

+
Eine Datei — drei Brillen. Beispiel: erste 8 Byte einer PNG-Datei.
+ +
+ +
+
+
Fenster 1
+
Bin · rohe 0 und 1
+
+
+
10001001
+
01010000
+
01001110
+
01000111
+
00001101
+
00001010
+
00011010
+
00001010
+
+
+ +
+
+
Fenster 2
+
Hex · 2 Ziffern pro Byte
+
+
+
89
+
50
+
4E
+
47
+
0D
+
0A
+
1A
+
0A
+
+
+ +
+
+
Fenster 3
+
Text · ASCII oder ✗ (> 126)
+
+
+
✗137 > 126
+
P80
+
N78
+
G71
+
CR13 · Steuerz.
+
LF10 · Steuerz.
+
SUB26 · Steuerz.
+
LF10 · Steuerz.
+
+
+ +
+ +
+ Mindestens ein Byte mit Wert > 126 → Binärdatei. Sonst: reine Textdatei. +
+ + diff --git a/slides/223015b-2026/assets/demos/byte-fuer-byte.png b/slides/223015b-2026/assets/demos/byte-fuer-byte.png new file mode 100644 index 0000000..b10fa1d Binary files /dev/null and b/slides/223015b-2026/assets/demos/byte-fuer-byte.png differ diff --git a/slides/223015b-2026/assets/demos/byte-nibble-hex.html b/slides/223015b-2026/assets/demos/byte-nibble-hex.html new file mode 100644 index 0000000..c7e6b58 --- /dev/null +++ b/slides/223015b-2026/assets/demos/byte-nibble-hex.html @@ -0,0 +1,185 @@ + + + + +Byte → Nibble → Hex + + + +

1 Byte → 2 Nibble → 2 Hex-Ziffern

+
Jedes Byte lässt sich sauber halbieren – und 4 Bit passen exakt auf eine Hex-Ziffer.
+ +
+ +
+
1 Byte · 8 Bit · 2⁸ = 256 Werte
+
+ 0100 + + 1101 +
+
+ +
+
+
+
+ + +
+
2 Nibble · je 4 Bit · 2⁴ = 16 Werte
+
+
+
0100
+
= 4 (dez)
+
+
+
1101
+
= 13 (dez)
+
+
+
+ +
+
+
+
+ + +
+
2 Hex-Ziffern · Symbole 0–F
+
+
+
4
+
Nibble → 1 Ziffer
+
+
+
D
+
13 → D
+
+
+
+ +
+ 01001101 (bin)  =  4D (hex)  =  77 (dez)  =  "M" (ASCII) +
+ +
+ 16 × 16 = 256  ·  2⁴ × 2⁴ = 2⁸  ·  Darum passt Hex so gut zu Bytes. +
+
+ + + + \ No newline at end of file diff --git a/slides/223015b-2026/assets/demos/byte-nibble-hex.png b/slides/223015b-2026/assets/demos/byte-nibble-hex.png new file mode 100644 index 0000000..7d02f1f Binary files /dev/null and b/slides/223015b-2026/assets/demos/byte-nibble-hex.png differ diff --git a/slides/223015b/assets/demos/container-vs-codec.html b/slides/223015b-2026/assets/demos/container-vs-codec.html similarity index 100% rename from slides/223015b/assets/demos/container-vs-codec.html rename to slides/223015b-2026/assets/demos/container-vs-codec.html diff --git a/slides/223015b/assets/demos/container-vs-codec.png b/slides/223015b-2026/assets/demos/container-vs-codec.png similarity index 100% rename from slides/223015b/assets/demos/container-vs-codec.png rename to slides/223015b-2026/assets/demos/container-vs-codec.png diff --git a/slides/223015b/assets/demos/drei-dateien.html b/slides/223015b-2026/assets/demos/drei-dateien.html similarity index 100% rename from slides/223015b/assets/demos/drei-dateien.html rename to slides/223015b-2026/assets/demos/drei-dateien.html diff --git a/slides/223015b/assets/demos/drei-dateien.png b/slides/223015b-2026/assets/demos/drei-dateien.png similarity index 100% rename from slides/223015b/assets/demos/drei-dateien.png rename to slides/223015b-2026/assets/demos/drei-dateien.png diff --git a/slides/223015b-2026/assets/demos/hex-dec-table.html b/slides/223015b-2026/assets/demos/hex-dec-table.html new file mode 100644 index 0000000..afcd365 --- /dev/null +++ b/slides/223015b-2026/assets/demos/hex-dec-table.html @@ -0,0 +1,67 @@ + + + + +Hex → Dezimal + + + +

Hex → Dezimal

+
Dezimalwert = (Zeile × 16) + Spalte
+ + + + + + + + + + +
×16 / +0123456789A (10)B (11)C (12)D (13)E (14)F (15)
+ +
+ ASCII (0–127) + Non-ASCII (128–255) +
+ +
+ Beispiel: 4D → Zeile 4 × 16 + Spalte D = 64 + 13 = 77 (= "M" in ASCII) +
+ + + + diff --git a/slides/223015b-2026/assets/demos/hex-dec-table.png b/slides/223015b-2026/assets/demos/hex-dec-table.png new file mode 100644 index 0000000..69bc308 Binary files /dev/null and b/slides/223015b-2026/assets/demos/hex-dec-table.png differ diff --git a/slides/223015b/assets/demos/jpeg-pipeline.html b/slides/223015b-2026/assets/demos/jpeg-pipeline.html similarity index 100% rename from slides/223015b/assets/demos/jpeg-pipeline.html rename to slides/223015b-2026/assets/demos/jpeg-pipeline.html diff --git a/slides/223015b/assets/demos/jpeg-pipeline.png b/slides/223015b-2026/assets/demos/jpeg-pipeline.png similarity index 100% rename from slides/223015b/assets/demos/jpeg-pipeline.png rename to slides/223015b-2026/assets/demos/jpeg-pipeline.png diff --git a/slides/223015b/assets/demos/kap02-eroeffner.html b/slides/223015b-2026/assets/demos/kap02-eroeffner.html similarity index 100% rename from slides/223015b/assets/demos/kap02-eroeffner.html rename to slides/223015b-2026/assets/demos/kap02-eroeffner.html diff --git a/slides/223015b/assets/demos/kap02-eroeffner.png b/slides/223015b-2026/assets/demos/kap02-eroeffner.png similarity index 100% rename from slides/223015b/assets/demos/kap02-eroeffner.png rename to slides/223015b-2026/assets/demos/kap02-eroeffner.png diff --git a/slides/223015b/assets/demos/kap03-eroeffner.html b/slides/223015b-2026/assets/demos/kap03-eroeffner.html similarity index 100% rename from slides/223015b/assets/demos/kap03-eroeffner.html rename to slides/223015b-2026/assets/demos/kap03-eroeffner.html diff --git a/slides/223015b/assets/demos/kap03-eroeffner.png b/slides/223015b-2026/assets/demos/kap03-eroeffner.png similarity index 100% rename from slides/223015b/assets/demos/kap03-eroeffner.png rename to slides/223015b-2026/assets/demos/kap03-eroeffner.png diff --git a/slides/223015b/assets/demos/kap04-eroeffner.html b/slides/223015b-2026/assets/demos/kap04-eroeffner.html similarity index 100% rename from slides/223015b/assets/demos/kap04-eroeffner.html rename to slides/223015b-2026/assets/demos/kap04-eroeffner.html diff --git a/slides/223015b/assets/demos/kap04-eroeffner.png b/slides/223015b-2026/assets/demos/kap04-eroeffner.png similarity index 100% rename from slides/223015b/assets/demos/kap04-eroeffner.png rename to slides/223015b-2026/assets/demos/kap04-eroeffner.png diff --git a/slides/223015b/assets/demos/kap05-eroeffner.html b/slides/223015b-2026/assets/demos/kap05-eroeffner.html similarity index 100% rename from slides/223015b/assets/demos/kap05-eroeffner.html rename to slides/223015b-2026/assets/demos/kap05-eroeffner.html diff --git a/slides/223015b/assets/demos/kap05-eroeffner.png b/slides/223015b-2026/assets/demos/kap05-eroeffner.png similarity index 100% rename from slides/223015b/assets/demos/kap05-eroeffner.png rename to slides/223015b-2026/assets/demos/kap05-eroeffner.png diff --git a/slides/223015b/assets/demos/kb-vs-kib.html b/slides/223015b-2026/assets/demos/kb-vs-kib.html similarity index 100% rename from slides/223015b/assets/demos/kb-vs-kib.html rename to slides/223015b-2026/assets/demos/kb-vs-kib.html diff --git a/slides/223015b/assets/demos/kb-vs-kib.png b/slides/223015b-2026/assets/demos/kb-vs-kib.png similarity index 100% rename from slides/223015b/assets/demos/kb-vs-kib.png rename to slides/223015b-2026/assets/demos/kb-vs-kib.png diff --git a/slides/223015b/assets/demos/nyquist-diagram.html b/slides/223015b-2026/assets/demos/nyquist-diagram.html similarity index 100% rename from slides/223015b/assets/demos/nyquist-diagram.html rename to slides/223015b-2026/assets/demos/nyquist-diagram.html diff --git a/slides/223015b/assets/demos/nyquist-diagram.png b/slides/223015b-2026/assets/demos/nyquist-diagram.png similarity index 100% rename from slides/223015b/assets/demos/nyquist-diagram.png rename to slides/223015b-2026/assets/demos/nyquist-diagram.png diff --git a/slides/223015b/assets/demos/pivot-signal-zu-byte.html b/slides/223015b-2026/assets/demos/pivot-signal-zu-byte.html similarity index 100% rename from slides/223015b/assets/demos/pivot-signal-zu-byte.html rename to slides/223015b-2026/assets/demos/pivot-signal-zu-byte.html diff --git a/slides/223015b/assets/demos/pivot-signal-zu-byte.png b/slides/223015b-2026/assets/demos/pivot-signal-zu-byte.png similarity index 100% rename from slides/223015b/assets/demos/pivot-signal-zu-byte.png rename to slides/223015b-2026/assets/demos/pivot-signal-zu-byte.png diff --git a/slides/223015b/assets/demos/psychoakustik-grafik.html b/slides/223015b-2026/assets/demos/psychoakustik-grafik.html similarity index 100% rename from slides/223015b/assets/demos/psychoakustik-grafik.html rename to slides/223015b-2026/assets/demos/psychoakustik-grafik.html diff --git a/slides/223015b/assets/demos/psychoakustik-grafik.png b/slides/223015b-2026/assets/demos/psychoakustik-grafik.png similarity index 100% rename from slides/223015b/assets/demos/psychoakustik-grafik.png rename to slides/223015b-2026/assets/demos/psychoakustik-grafik.png diff --git a/slides/223015b/assets/demos/psychovisualitaet-grafik.html b/slides/223015b-2026/assets/demos/psychovisualitaet-grafik.html similarity index 100% rename from slides/223015b/assets/demos/psychovisualitaet-grafik.html rename to slides/223015b-2026/assets/demos/psychovisualitaet-grafik.html diff --git a/slides/223015b/assets/demos/psychovisualitaet-grafik.png b/slides/223015b-2026/assets/demos/psychovisualitaet-grafik.png similarity index 100% rename from slides/223015b/assets/demos/psychovisualitaet-grafik.png rename to slides/223015b-2026/assets/demos/psychovisualitaet-grafik.png diff --git a/slides/223015b/assets/demos/raster-vs-vektor.html b/slides/223015b-2026/assets/demos/raster-vs-vektor.html similarity index 100% rename from slides/223015b/assets/demos/raster-vs-vektor.html rename to slides/223015b-2026/assets/demos/raster-vs-vektor.html diff --git a/slides/223015b/assets/demos/raster-vs-vektor.png b/slides/223015b-2026/assets/demos/raster-vs-vektor.png similarity index 100% rename from slides/223015b/assets/demos/raster-vs-vektor.png rename to slides/223015b-2026/assets/demos/raster-vs-vektor.png diff --git a/slides/223015b/assets/demos/summary-kap02.html b/slides/223015b-2026/assets/demos/summary-kap02.html similarity index 100% rename from slides/223015b/assets/demos/summary-kap02.html rename to slides/223015b-2026/assets/demos/summary-kap02.html diff --git a/slides/223015b/assets/demos/summary-kap02.png b/slides/223015b-2026/assets/demos/summary-kap02.png similarity index 100% rename from slides/223015b/assets/demos/summary-kap02.png rename to slides/223015b-2026/assets/demos/summary-kap02.png diff --git a/slides/223015b/assets/demos/summary-organizer.html b/slides/223015b-2026/assets/demos/summary-organizer.html similarity index 100% rename from slides/223015b/assets/demos/summary-organizer.html rename to slides/223015b-2026/assets/demos/summary-organizer.html diff --git a/slides/223015b/assets/demos/summary-organizer.png b/slides/223015b-2026/assets/demos/summary-organizer.png similarity index 100% rename from slides/223015b/assets/demos/summary-organizer.png rename to slides/223015b-2026/assets/demos/summary-organizer.png diff --git a/slides/223015b-2026/assets/demos/three-views.html b/slides/223015b-2026/assets/demos/three-views.html new file mode 100644 index 0000000..236a8ea --- /dev/null +++ b/slides/223015b-2026/assets/demos/three-views.html @@ -0,0 +1,120 @@ + + + + +Dieselben Byte — drei Perspektiven + + + +

Dieselben 8 Byte — drei Perspektiven

+
PNG-Datei-Anfang: 89 50 4E 47 0D 0A 1A 0A
+ +
+ +
+
1 · Bitstreamwas wirklich gespeichert wird
+
+ 10001001 01010000 01001110 01000111 00001101 00001010 00011010 00001010 +
+
+ +
+ +
+
2 · Hexgruppiert in 8-Bit-Häppchen
+
+
+ 89 + 50 + 4E + 47 + 0D + 0A + 1A + 0A +
+
+
+ +
+ +
+
3 · Bedeutungwas die Byte sagen
+
+
+
+
89
+
Magic Byte
+
> 127 → "Ich bin Binär, kein Text"
+
+
+
504E47
+
Format-Kürzel
+
P · N · G (ASCII) → "PNG-Datei"
+
+
+
0D0A1A0A
+
Transport-Schutz
+
CR · LF · EOF · LF → erkennt kaputte Übertragung
+
+
+
+
+ +
+ +
+ Byte ändern sich nicht — nur unsere Brille. Bitstream zeigt das was, Hex das wie kompakt, Bedeutung das warum. +
+ + diff --git a/slides/223015b-2026/assets/demos/three-views.png b/slides/223015b-2026/assets/demos/three-views.png new file mode 100644 index 0000000..76bbd8c Binary files /dev/null and b/slides/223015b-2026/assets/demos/three-views.png differ diff --git a/slides/223015b/assets/demos/usb-c-drei-achsen.html b/slides/223015b-2026/assets/demos/usb-c-drei-achsen.html similarity index 100% rename from slides/223015b/assets/demos/usb-c-drei-achsen.html rename to slides/223015b-2026/assets/demos/usb-c-drei-achsen.html diff --git a/slides/223015b/assets/demos/usb-c-drei-achsen.png b/slides/223015b-2026/assets/demos/usb-c-drei-achsen.png similarity index 100% rename from slides/223015b/assets/demos/usb-c-drei-achsen.png rename to slides/223015b-2026/assets/demos/usb-c-drei-achsen.png diff --git a/slides/223015b-2026/assets/demos/why-8-bit.html b/slides/223015b-2026/assets/demos/why-8-bit.html new file mode 100644 index 0000000..c7fd142 --- /dev/null +++ b/slides/223015b-2026/assets/demos/why-8-bit.html @@ -0,0 +1,135 @@ + + + + +Warum 8 Bit? Adressierung im Speicher + + + +

Warum 8 Bit? Speicher-Adressierung

+
CPU adressiert byteweise — halbe Byte existieren nicht.
+ +
+ +
+ +
+
Adresse
+
Hex
+
Bit (was im Speicher steht)
+ +
0x0000
+
48
+
01001000
+ +
0x0001
+
65
+
01100101
+ +
0x0002
+
6C
+
01101100
+ +
0x0003
+
6C
+
01101100
+ +
0x0004
+
6F
+
01101111
+ +
0x0005
+
21
+
00100001
+
+ +
+
→read 0x0000 ✓
+
✗read 0x0000.5 — gibt's nicht
+
→read 0x0001 ✓
+
✗read 0x0001.5 — gibt's nicht
+
→read 0x0002 ✓
+
→...
+
+ +
+ +
+ Byte = kleinste adressierbare Einheit.
+ Speichercontroller, Bus und CPU sind alle auf 8-Bit-Häppchen ausgelegt.
+ Einzelne Bit lesen → muss erst byte = mem[addr], dann mit byte & 0b1000_0000 Bit isolieren. +
+ +
+ + diff --git a/slides/223015b-2026/assets/demos/why-8-bit.png b/slides/223015b-2026/assets/demos/why-8-bit.png new file mode 100644 index 0000000..3f21a34 Binary files /dev/null and b/slides/223015b-2026/assets/demos/why-8-bit.png differ diff --git a/slides/223015b-2026/assets/digital-landscape.png b/slides/223015b-2026/assets/digital-landscape.png new file mode 100644 index 0000000..a062f8c Binary files /dev/null and b/slides/223015b-2026/assets/digital-landscape.png differ diff --git a/slides/223015b-2026/assets/druckwelle.png b/slides/223015b-2026/assets/druckwelle.png new file mode 100644 index 0000000..3fb0987 Binary files /dev/null and b/slides/223015b-2026/assets/druckwelle.png differ diff --git a/slides/223015b-2026/assets/dvd.jpg b/slides/223015b-2026/assets/dvd.jpg new file mode 100644 index 0000000..ad041aa Binary files /dev/null and b/slides/223015b-2026/assets/dvd.jpg differ diff --git a/slides/223015b-2026/assets/gif-animation.png b/slides/223015b-2026/assets/gif-animation.png new file mode 100644 index 0000000..340e131 Binary files /dev/null and b/slides/223015b-2026/assets/gif-animation.png differ diff --git a/slides/223015b-2026/assets/grayscale-gradient.png b/slides/223015b-2026/assets/grayscale-gradient.png new file mode 100644 index 0000000..b3acb67 Binary files /dev/null and b/slides/223015b-2026/assets/grayscale-gradient.png differ diff --git a/slides/223015b-2026/assets/grayscale-gradient.svg b/slides/223015b-2026/assets/grayscale-gradient.svg new file mode 100644 index 0000000..22a15b8 --- /dev/null +++ b/slides/223015b-2026/assets/grayscale-gradient.svg @@ -0,0 +1,258 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/slides/223015b-2026/assets/grayscale-zoom.svg b/slides/223015b-2026/assets/grayscale-zoom.svg new file mode 100644 index 0000000..83bdc61 --- /dev/null +++ b/slides/223015b-2026/assets/grayscale-zoom.svg @@ -0,0 +1,53 @@ + + +Zoom: die 16 hellsten Abstufungen + +255 +0xFF + +254 +0xFE + +253 +0xFD + +252 +0xFC + +251 +0xFB + +250 +0xFA + +249 +0xF9 + +248 +0xF8 + +247 +0xF7 + +246 +0xF6 + +245 +0xF5 + +244 +0xF4 + +243 +0xF3 + +242 +0xF2 + +241 +0xF1 + +240 +0xF0 +jede Stufe = Unterschied von 1/255 ≈ 0,4% Helligkeit + diff --git a/slides/223015b-2026/assets/growth-of-big-data.png b/slides/223015b-2026/assets/growth-of-big-data.png new file mode 100644 index 0000000..33e9f03 Binary files /dev/null and b/slides/223015b-2026/assets/growth-of-big-data.png differ diff --git a/slides/223015b-2026/assets/hex-binary-table.png b/slides/223015b-2026/assets/hex-binary-table.png new file mode 100644 index 0000000..01b011a Binary files /dev/null and b/slides/223015b-2026/assets/hex-binary-table.png differ diff --git a/slides/223015b-2026/assets/hex-code-hidden.png b/slides/223015b-2026/assets/hex-code-hidden.png new file mode 100644 index 0000000..af6fd9a Binary files /dev/null and b/slides/223015b-2026/assets/hex-code-hidden.png differ diff --git a/slides/223015b-2026/assets/hex-code.png b/slides/223015b-2026/assets/hex-code.png new file mode 100644 index 0000000..6d8558c Binary files /dev/null and b/slides/223015b-2026/assets/hex-code.png differ diff --git a/slides/223015b-2026/assets/hex-dec-lookup-table.png b/slides/223015b-2026/assets/hex-dec-lookup-table.png new file mode 100644 index 0000000..290e086 Binary files /dev/null and b/slides/223015b-2026/assets/hex-dec-lookup-table.png differ diff --git a/slides/223015b-2026/assets/hexeditor-screenshot.png b/slides/223015b-2026/assets/hexeditor-screenshot.png new file mode 100644 index 0000000..6e54eb2 Binary files /dev/null and b/slides/223015b-2026/assets/hexeditor-screenshot.png differ diff --git a/slides/223015b-2026/assets/hollerith-machine-2.jpg b/slides/223015b-2026/assets/hollerith-machine-2.jpg new file mode 100644 index 0000000..5df9e1c Binary files /dev/null and b/slides/223015b-2026/assets/hollerith-machine-2.jpg differ diff --git a/slides/223015b-2026/assets/iframe-pframe-diagram.png b/slides/223015b-2026/assets/iframe-pframe-diagram.png new file mode 100644 index 0000000..f30bf46 Binary files /dev/null and b/slides/223015b-2026/assets/iframe-pframe-diagram.png differ diff --git a/slides/223015b-2026/assets/instagram-quality-loss.png b/slides/223015b-2026/assets/instagram-quality-loss.png new file mode 100644 index 0000000..91e0b4e Binary files /dev/null and b/slides/223015b-2026/assets/instagram-quality-loss.png differ diff --git a/slides/223015b-2026/assets/ipb-compression-canon.jpg b/slides/223015b-2026/assets/ipb-compression-canon.jpg new file mode 100644 index 0000000..dd154a9 Binary files /dev/null and b/slides/223015b-2026/assets/ipb-compression-canon.jpg differ diff --git a/slides/223015b-2026/assets/jpeg-artifacts.png b/slides/223015b-2026/assets/jpeg-artifacts.png new file mode 100644 index 0000000..a7d09ab Binary files /dev/null and b/slides/223015b-2026/assets/jpeg-artifacts.png differ diff --git a/slides/223015b-2026/assets/jung-naiv.png b/slides/223015b-2026/assets/jung-naiv.png new file mode 100644 index 0000000..5f43daa Binary files /dev/null and b/slides/223015b-2026/assets/jung-naiv.png differ diff --git a/slides/223015b-2026/assets/karlheinz-brandenburg.jpg b/slides/223015b-2026/assets/karlheinz-brandenburg.jpg new file mode 100644 index 0000000..a53feb6 Binary files /dev/null and b/slides/223015b-2026/assets/karlheinz-brandenburg.jpg differ diff --git a/slides/223015b-2026/assets/klausur-pattern.svg b/slides/223015b-2026/assets/klausur-pattern.svg new file mode 100644 index 0000000..3633c18 --- /dev/null +++ b/slides/223015b-2026/assets/klausur-pattern.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/slides/223015b-2026/assets/kubrick.jpg b/slides/223015b-2026/assets/kubrick.jpg new file mode 100644 index 0000000..3f6d1ac Binary files /dev/null and b/slides/223015b-2026/assets/kubrick.jpg differ diff --git a/slides/223015b-2026/assets/lightbulb-onoff.png b/slides/223015b-2026/assets/lightbulb-onoff.png new file mode 100644 index 0000000..2625690 Binary files /dev/null and b/slides/223015b-2026/assets/lightbulb-onoff.png differ diff --git a/slides/223015b-2026/assets/lv-original-vs-fake.jpg b/slides/223015b-2026/assets/lv-original-vs-fake.jpg new file mode 100644 index 0000000..f6d5c6e Binary files /dev/null and b/slides/223015b-2026/assets/lv-original-vs-fake.jpg differ diff --git a/slides/223015b-2026/assets/matrix-code.png b/slides/223015b-2026/assets/matrix-code.png new file mode 100644 index 0000000..2939e8c Binary files /dev/null and b/slides/223015b-2026/assets/matrix-code.png differ diff --git a/slides/223015b-2026/assets/moores-law.png b/slides/223015b-2026/assets/moores-law.png new file mode 100644 index 0000000..723dd76 Binary files /dev/null and b/slides/223015b-2026/assets/moores-law.png differ diff --git a/slides/223015b-2026/assets/morpheus.jpg b/slides/223015b-2026/assets/morpheus.jpg new file mode 100644 index 0000000..dce7cff Binary files /dev/null and b/slides/223015b-2026/assets/morpheus.jpg differ diff --git a/slides/223015b-2026/assets/napster-2001.png b/slides/223015b-2026/assets/napster-2001.png new file mode 100644 index 0000000..326d7b6 Binary files /dev/null and b/slides/223015b-2026/assets/napster-2001.png differ diff --git a/slides/223015b-2026/assets/napster-interface.png b/slides/223015b-2026/assets/napster-interface.png new file mode 100644 index 0000000..abefb30 Binary files /dev/null and b/slides/223015b-2026/assets/napster-interface.png differ diff --git a/slides/223015b-2026/assets/netflix-4k.png b/slides/223015b-2026/assets/netflix-4k.png new file mode 100644 index 0000000..2d2f88e Binary files /dev/null and b/slides/223015b-2026/assets/netflix-4k.png differ diff --git a/slides/223015b-2026/assets/original-ascii-table.png b/slides/223015b-2026/assets/original-ascii-table.png new file mode 100644 index 0000000..2c12218 Binary files /dev/null and b/slides/223015b-2026/assets/original-ascii-table.png differ diff --git a/slides/223015b-2026/assets/photo-comparison.png b/slides/223015b-2026/assets/photo-comparison.png new file mode 100644 index 0000000..78d2e9f Binary files /dev/null and b/slides/223015b-2026/assets/photo-comparison.png differ diff --git a/slides/223015b-2026/assets/qr/asciitable.png b/slides/223015b-2026/assets/qr/asciitable.png new file mode 100644 index 0000000..dc3bdeb Binary files /dev/null and b/slides/223015b-2026/assets/qr/asciitable.png differ diff --git a/slides/223015b-2026/assets/qr/audacity-spectrogram.png b/slides/223015b-2026/assets/qr/audacity-spectrogram.png new file mode 100644 index 0000000..5268779 Binary files /dev/null and b/slides/223015b-2026/assets/qr/audacity-spectrogram.png differ diff --git a/slides/223015b-2026/assets/qr/hexed-it.png b/slides/223015b-2026/assets/qr/hexed-it.png new file mode 100644 index 0000000..3c7a13a Binary files /dev/null and b/slides/223015b-2026/assets/qr/hexed-it.png differ diff --git a/slides/223015b-2026/assets/qr/mediainfo.png b/slides/223015b-2026/assets/qr/mediainfo.png new file mode 100644 index 0000000..505e90e Binary files /dev/null and b/slides/223015b-2026/assets/qr/mediainfo.png differ diff --git a/slides/223015b-2026/assets/qr/repo-223015b.png b/slides/223015b-2026/assets/qr/repo-223015b.png new file mode 100644 index 0000000..6acdf75 Binary files /dev/null and b/slides/223015b-2026/assets/qr/repo-223015b.png differ diff --git a/slides/223015b-2026/assets/qr/slides-223015b.png b/slides/223015b-2026/assets/qr/slides-223015b.png new file mode 100644 index 0000000..87c6a57 Binary files /dev/null and b/slides/223015b-2026/assets/qr/slides-223015b.png differ diff --git a/slides/223015b-2026/assets/qr/squoosh.png b/slides/223015b-2026/assets/qr/squoosh.png new file mode 100644 index 0000000..0f29b33 Binary files /dev/null and b/slides/223015b-2026/assets/qr/squoosh.png differ diff --git a/slides/223015b-2026/assets/qrcode-0.svg b/slides/223015b-2026/assets/qrcode-0.svg new file mode 100644 index 0000000..e7c08fd --- /dev/null +++ b/slides/223015b-2026/assets/qrcode-0.svg @@ -0,0 +1 @@ + diff --git a/slides/223015b-2026/assets/qrcode-1.svg b/slides/223015b-2026/assets/qrcode-1.svg new file mode 100644 index 0000000..d6a6c92 --- /dev/null +++ b/slides/223015b-2026/assets/qrcode-1.svg @@ -0,0 +1 @@ + diff --git a/slides/223015b-2026/assets/quantized-image-8-colors.jpg b/slides/223015b-2026/assets/quantized-image-8-colors.jpg new file mode 100644 index 0000000..6b4f39a Binary files /dev/null and b/slides/223015b-2026/assets/quantized-image-8-colors.jpg differ diff --git a/slides/223015b-2026/assets/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg b/slides/223015b-2026/assets/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg new file mode 100644 index 0000000..9c73789 Binary files /dev/null and b/slides/223015b-2026/assets/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg differ diff --git a/slides/223015b-2026/assets/rgb-color-model-with-title.png b/slides/223015b-2026/assets/rgb-color-model-with-title.png new file mode 100644 index 0000000..ba1d892 Binary files /dev/null and b/slides/223015b-2026/assets/rgb-color-model-with-title.png differ diff --git a/slides/223015b-2026/assets/rgb-color-model.png b/slides/223015b-2026/assets/rgb-color-model.png new file mode 100644 index 0000000..4f0ae08 Binary files /dev/null and b/slides/223015b-2026/assets/rgb-color-model.png differ diff --git a/slides/223015b-2026/assets/samplerate.webp b/slides/223015b-2026/assets/samplerate.webp new file mode 100644 index 0000000..aacc9c5 Binary files /dev/null and b/slides/223015b-2026/assets/samplerate.webp differ diff --git a/slides/223015b-2026/assets/spectogram-chet-baker.png b/slides/223015b-2026/assets/spectogram-chet-baker.png new file mode 100644 index 0000000..8917dd7 Binary files /dev/null and b/slides/223015b-2026/assets/spectogram-chet-baker.png differ diff --git a/slides/223015b-2026/assets/streaming-quality-switch.png b/slides/223015b-2026/assets/streaming-quality-switch.png new file mode 100644 index 0000000..2e7c2e3 Binary files /dev/null and b/slides/223015b-2026/assets/streaming-quality-switch.png differ diff --git a/slides/223015b-2026/assets/suzanne-vega.jpg b/slides/223015b-2026/assets/suzanne-vega.jpg new file mode 100644 index 0000000..68c65e9 Binary files /dev/null and b/slides/223015b-2026/assets/suzanne-vega.jpg differ diff --git a/slides/223015b-2026/assets/ybcbr.webp b/slides/223015b-2026/assets/ybcbr.webp new file mode 100644 index 0000000..0ef0093 Binary files /dev/null and b/slides/223015b-2026/assets/ybcbr.webp differ diff --git a/slides/223015b-2026/assets/youtube-vp9.png b/slides/223015b-2026/assets/youtube-vp9.png new file mode 100644 index 0000000..9d1b7c6 Binary files /dev/null and b/slides/223015b-2026/assets/youtube-vp9.png differ diff --git a/slides/223015b-2026/klausurfolien.md b/slides/223015b-2026/klausurfolien.md new file mode 100644 index 0000000..c30c14e --- /dev/null +++ b/slides/223015b-2026/klausurfolien.md @@ -0,0 +1,99 @@ +--- +marp: true +theme: gaia +paginate: true +backgroundColor: #fff +header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)" +footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026" +title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege +--- + + + + + + + + +![bg cover opacity:0.2](./assets/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg) + +# Dateiformate, Schnittstellen, Speichermedien & Distributionswege + +**223015b** · Modul "Technik 1" · 1. Semester +Digital- und Medienwirtschaft +Hochschule der Medien Stuttgart + +**Sommersemester 2026** + +[https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/) diff --git a/slides/223015b-2026/klausurfragen.md b/slides/223015b-2026/klausurfragen.md new file mode 100644 index 0000000..a21aebc --- /dev/null +++ b/slides/223015b-2026/klausurfragen.md @@ -0,0 +1,1407 @@ +--- +marp: true +theme: gaia +paginate: true +backgroundColor: #fff +header: "" +footer: "" +title: "Fragenkatalog – Dateiformate (223015b)" +--- + + + +# Klausurfragen – 223015b +**Dateiformate, Schnittstellen, Speichermedien · HdM Stuttgart · M. Czechowski** + +Stand: 01.02.2026 + +--- + +> **Legende – Moodle XML-Typen:** +> `[MC]` = `multichoice` (einzelne Auswahl) +> `[MM]` = `multichoice` + `false` (Mehrfachauswahl) +> `[MATCH]` = `matching` (Zuordnung) +> `[ORDER]` = `ordering` (Reihenfolge) +> `[ESSAY]` = `essay` (Freitext, manuell bewertet) +> `[SHORTANS]` = `shortanswer` (Stichwort/Satz, automatisch geprüft) +> `[NUMERIC]` = `numerical` (Zahlenwert ± Toleranz) +> `[CLOZE]` = `cloze` (Lückentext, gemischt)` + +--- + + + +## BLOCK J – Dateiformate: Grundbegriffe + +--- + + + +### J1 – Was bedeutet „komprimieren"? +**Thema:** Grundbegriffe – Kompression +**Punkte:** 1 +**Typ:** `[MC]` + +Was bedeutet es, eine Datei zu komprimieren? + +- [ ] Die Datei wird auf einem anderen Speichermedium gesichert. +- [x] **Die Dateigröße wird durch Entfernung oder Vereinfachung von Daten reduziert.** ✅ +- [ ] Die Datei wird verschlüsselt, damit sie kleiner aussieht. +- [ ] Die Datei wird in ein anderen Format umgewandelt, ohne dass sich die Größe ändert. + +> **Feedback:** Kompression = Dateigröße reduzieren. Zwei Familien: verlustfrei (alle Daten bleiben erhalten, z. B. ZIP, PNG) und verlustbehaftet (Daten werden dauerhaft weggeworfen, z. B. JPEG, MP3). + +--- + +### J2 – Verlustfrei vs. verlustbehaftet +**Thema:** Grundbegriffe – Kompressionsprimitiven +**Punkte:** 2 +**Typ:** `[MATCH]` + +Ordne jedem Format zu, ob es verlustfrei oder verlustbehaftet komprimiert. + +| Format | Kompressions-Typ | +|---|---| +| JPEG | Verlustbehaftet | +| PNG | Verlustfrei | +| MP3 | Verlustbehaftet | +| ZIP | Verlustfrei | +| FLAC | Verlustfrei | +| WebP (lossy) | Verlustbehaftet | + +> **Feedback:** Verlustfrei = Originaldaten perfekt rekonstruierbar (ZIP, PNG, FLAC). Verlustbehaftet = Daten dauerhaft weggeworfen, nicht mehr zurückholbar (JPEG, MP3). + +--- + +### J3 – Verlustfrei vs. verlustbehaftet: Erkläre +**Thema:** Grundbegriffe – Konzept +**Punkte:** 2 +**Typ:** `[ESSAY]` + +Erkläre den Unterschied zwischen verlustfreier und verlustbehafteter Kompression. Nenne je ein konkretes Beispiel und erkläre, warum man in unterschiedlichen Situationen unterschiedliche Kompressionstypen wählt. + +> **Musterlösung:** Verlustfrei: Alle Originaldaten bleiben erhalten – die Datei kann perfekt rekonstruiert werden (z. B. ZIP, PNG). Verlustbehaftet: Daten werden dauerhaft weggeworfen – die Datei kann nicht mehr perfekt hergestellt werden (z. B. JPEG, MP3). Wahl: Fotos fürs Web → JPEG (verlustbehaftet), weil der Unterschied kaum sichtbar ist und die Datei deutlich kleiner wird. Archivierung oder Grafiken → PNG (verlustfrei), weil Qualitätsverlust inakzeptabel wäre. + +--- + + + +### J4 – Was bedeutet „skalieren"? +**Thema:** Grundbegriffe – Skalierung +**Punkte:** 1 +**Typ:** `[MC]` + +Was passiert, wenn ein Rasterbild vergrößert wird? + +- [ ] Neue Pixel werden aus dem Dateiformat automatisch geladen. +- [x] **Fehlende Pixel müssen durch Interpolation „erfunden" werden – es entsteht keine neue Information.** ✅ +- [ ] Das Bild wird verlustfrei größer, weil Pixel automatisch duplifiziert werden. +- [ ] Die Dateigröße bleibt gleich, nur der Zoom im Betrachter ändert sich. + +> **Feedback:** Ein Rasterbild hat eine native Auflösung. Alles darüber hinaus = Schätzung (Interpolation). Deshalb werden vergrößerte Rasterbilder unscharf – es gibt einfach keine Daten für die fehlenden Pixel. + +--- + + + +### J5 – Was bedeutet „konvertieren"? +**Thema:** Grundbegriffe – Konvertierung +**Punkte:** 1 +**Typ:** `[MC]` + +Was bedeutet es, eine Datei zu konvertieren? + +- [ ] Die Datei wird komprimiert und umbenannt. +- [x] **Die Daten werden von einem Format in ein anderes umgewandelt (z. B. JPEG → PNG, MP4 → WebM).** ✅ +- [ ] Die Datei wird verschlüsselt und in ein neues Format gepackt. +- [ ] Die Dateiendung wird umbenannt, ohne dass sich der Inhalt ändert. + +> **Feedback:** Konvertierung = Format-Umwandlung. Der Inhalt bleibt inhaltlich gleich, aber die Art der Speicherung (Kompression, Struktur) ändert sich. Wichtig: Eine Dateiendung umzubenennen ist KEINE Konvertierung. + +--- + + + +### J6 – Was bedeutet „codieren" und „decodieren"? +**Thema:** Grundbegriffe – Codec-Konzept +**Punkte:** 2 +**Typ:** `[ESSAY]` + +Erkläre, was „codieren" und „decodieren" bedeuten. Erkläre anschließend, warum der Begriff „Codec" aus beiden Wörtern zusammengesetzt ist, und nenne ein konkretes Beispiel. + +> **Musterlösung:** Codieren = Daten in ein bestimmtes Format umwandeln (z. B. Rohvideodaten → H.264-komprimiertes Video). Decodieren = das Gegenteil: komprimierte Daten wieder in abspielbare Form zurückwandeln (z. B. H.264 → Pixeldaten für den Bildschirm). Codec = Co(der) + Dec(oder) – ein Algorithmus, der beides kann. Beispiel: H.264 ist ein Video-Codec: Der Encoder erzeugt die komprimierte Datei, der Decoder im Player spielt sie wieder ab. + +--- + +### J7 – Codec vs. Container +**Thema:** Grundbegriffe – Codec/Container-Unterschied +**Punkte:** 2 +**Typ:** `[MC]` + +Was ist der Unterschied zwischen einem Container und einem Codec bei Videodateien? + +- [ ] Container und Codec sind synonyme Begriffe für das gleiche Konzept. +- [x] **Der Container (z. B. MP4) ist die „Verpackung", die verschiedene Streams zusammenpackt. Der Codec (z. B. H.264) bestimmt, wie der Video-Stream komprimiert wird.** ✅ +- [ ] Der Codec ist die Dateiendung, der Container der Kompressionsalgorithmus. +- [ ] Ein Container enthält immer genau einen Codec – es kann keine Kombination geben. + +> **Feedback:** Container ≠ Codec. Ein MP4-Container kann H.264, H.265 oder AV1 enthalten. Gleiche Endung `.mp4`, unterschiedlicher Inhalt. Der Container packt zusammen (Video, Audio, Untertitel, Metadaten), der Codec komprimiert. + +--- + +### J8 – Codec vs. Container: Zuordnung +**Thema:** Grundbegriffe – Codec/Container-Zuordnung +**Punkte:** 2 +**Typ:** `[MATCH]` + +Ordne zu: Container oder Codec? + +| Name | Typ | +|---|---| +| MP4 | Container | +| H.264 | Codec | +| WebM | Container | +| AV1 | Codec | +> **Feedback:** Container = Dateiformat, das Streams zusammenpackt (MP4, MKV, WebM). Codec = Kompressionsalgorithmus für einen bestimmten Stream (H.264, AV1, AAC). + +--- + + + +### J9 – Redundanz vs. Irrelevanz +**Thema:** Grundbegriffe – Kompressionsprinzipien +**Punkte:** 2 +**Typ:** `[MATCH]` + +Verlustfreie und verlustbehaftete Kompression arbeiten nach unterschiedlichen Prinzipien. Ordne zu. + +| Prinzip | Kompressionstyp | +|---|---| +| Redundanz entfernen (wiederholende Muster kompakter darstellen) | Verlustfrei | +| Irrelevanz entfernen (für Menschen nicht wahrnehmbar) | Verlustbehaftet | + +> **Feedback:** Der Kernunterschied: Verlustfrei arbeitet mit Redundanz – Wiederholungen werden kompakter gespeichert, aber nichts geht verloren. Verlustbehaftet arbeitet mit Irrelevanz – Daten werden weggeworfen, die Menschen sowieso nicht wahrnehmen können (Psychovisuell bei Bildern, Psychoakustisch bei Audio). + +--- + +### J10 – Dateneinheiten: Größenordnungen +**Thema:** Grundbegriffe – Speichereinheiten +**Punkte:** 2 +**Typ:** `[ORDER]` + +Sortiere die Dateneinheiten von kleinster zu größter: + +1. Byte +2. Kilobyte (KB) +3. Megabyte (MB) +4. Gigabyte (GB) +5. Terabyte (TB) +6. Petabyte (PB) + +> **Feedback:** Jede Stufe = Faktor 1.000 (SI-Präfixe). Merkhilfe: „Komm Mit Großem Tee, Peter". Ein einzelnes Foto (12 MP, unkomprimiert) ≈ 36 MB. Ein FullHD-Kinofilm ≈ 1 GB. Ein 4K-Film pro Minute unkomprimiert ≈ 44 GB. + +--- + + + +### J11 – Bit und Byte: Umrechnung +**Thema:** Grundbegriffe – Bit/Byte-Verhältnis +**Punkte:** 1 +**Typ:** `[NUMERIC]` + +Ein Bit ist die kleinste Informationseinheit. Ein Byte besteht aus wie vielen Bit? + +**Lösung:** **8** (±0) + +> **Feedback:** 1 Byte = 8 Bit. Ein Byte kann einen Wert von 0 bis 255 darstellen (2⁸ − 1). Die Unterscheidung Bit/Byte ist fundamental – Bit wird mit kleinem „b" abgekürzt (b), Byte mit großem „B" (B). Deshalb: 1 Mbit/s ≠ 1 MB/s. + +--- + + + +### J12 – 7-Bit ASCII: Wie viele Zeichen? +**Thema:** Grundbegriffe – ASCII-Zeichenkodierung +**Punkte:** 1 +**Typ:** `[NUMERIC]` + +Der ASCII-Standard verwendet 7 Bit pro Zeichen. Wie viele verschiedene Zeichen können damit dargestellt werden? + +**Lösung:** **128** (±0) + +> **Feedback:** Bei n Bit gibt es 2ⁿ mögliche Werte. 7 Bit → 2⁷ = 128 Zeichen. Diese umfassen: Ziffern (0–9), Buchstaben (A–Z, a–z), Sonderzeichen und Steuerzeichen. Achtung: Umlaute (ä, ö, ü) sind nicht im ASCII-Sortiment – dafür braucht man z. B. UTF-8. + +--- + + + +### J13 – Hexadezimalzahlen: Zwei 4-Bit-Werte +**Thema:** Grundbegriffe – Hexadezimal +**Punkte:** 2 +**Typ:** `[NUMERIC]` + +Zwei Hexadezimalzahlen werden jeweils durch 4 Bit dargestellt. Wie viele verschiedene Werte kann eine einzelne Hexadezimalziffer annehmen? + +**Lösung:** **16** (±0) + +> **Feedback:** 4 Bit → 2⁴ = 16 Werte (0–15). Diese werden in Hexadezimal als 0–9 und A–F dargestellt. Zwei Hex-Ziffern zusammen = 8 Bit = 1 Byte → ein Byte lässt sich immer als genau zwei Hex-Ziffern schreiben (z. B. Byte 255 = FF, Byte 10 = 0A). + +--- + + + +### J14 – Ein Pixel, drei Kanäle, 8 Bit +**Thema:** Grundbegriffe – Speicherbedarf eines Pixels +**Punkte:** 1 +**Typ:** `[NUMERIC]` + +Ein einzelner Pixel wird durch drei Farbkanäle (R, G, B) mit jeweils 8 Bit Farbtiefe gespeichert. Wie viele Byte Informationen enthalten ein solcher Pixel? + +**Lösung:** **3** (±0) + +> **Feedback:** 3 Kanäle × 8 Bit = 24 Bit = 3 Byte pro Pixel. Das entspricht einer 24-Bit-Farbtiefe (True Color). Diese 3 Byte pro Pixel bilden die Basis für jede Speicherberechnung von Rasterbildern: Breite × Höhe × 3 Bytes = Gesamtgröße unkomprimiert. + +--- + +### J15 – Analoge Medien: Übersicht +**Thema:** Medientypen – Analog +**Punkte:** 2 +**Typ:** `[MATCH]` + +Ordne jedem Medientyp ein typisches analoges Format zu. + +| Medientyp | Analoges Format | +|---|---| +| Text | Buch, Zeitung, Lochkarte | +| Bild | Fotografie (Negativ, Dia), Mikrofilm | +| Audio | Schallplatte (Vinyl), Tonband, Musikkassette | +| Video | Film (35mm, Super 8), VHS, Betamax | + +> **Feedback:** Analoge Medien speichern Information als kontinuierliche physikalische Größe – Rillentiefe, Magnetfeldstärke, Silberkorn-Dichte. Distribution erfolgt physisch: Kauf, Verleih, Kopie. + +--- + +### J16 – Generationsverlust: Das Problem analoger Kopien +**Thema:** Analog vs. Digital – Kopierqualität +**Punkte:** 1 +**Typ:** `[MC]` + +Was passiert, wenn eine VHS-Kassette auf eine andere VHS-Kassette kopiert wird? + +- [ ] Die Kopie ist bit-identisch mit dem Original – kein Unterschied erkennbar. +- [x] **Jede Kopie verschlechtert die Qualität – Rauschen nimmt zu, Schärfe ab.** ✅ +- [ ] Die Kopie wird besser, weil das Kopiergerät Rauschen herausfiltert. +- [ ] Die Qualität bleibt exakt gleich, nur das Medium wechselt. + +> **Feedback:** Generationsverlust ist ein fundamentales Problem analoger Medien: Jede Kopie addiert neues Rauschen. Bei der 3. Generation ist das Material oft unbrauchbar. Digital: Kopie = Original (bit-identisch). + +--- + +### J17 – Digitale Medien: Formate zuordnen +**Thema:** Medientypen – Digital +**Punkte:** 2 +**Typ:** `[MATCH]` + +Ordne jedem Medientyp typische digitale Formate zu. + +| Medientyp | Digitale Formate | +|---|---| +| Text | PDF, EPUB, TXT, DOCX | +| Bild | JPEG, PNG, RAW, WebP, GIF | +| Audio | MP3, FLAC, WAV, AAC, OGG | +| Video | MP4, MKV, AVI, WebM | + +> **Feedback:** Digitale Medien werden über Datenträger (CD, USB), Download, Streaming oder P2P verteilt. Der entscheidende Vorteil: bit-identische Kopien ohne Qualitätsverlust. + +--- + +### J18 – Analog vs. Digital: Der Hauptunterschied +**Thema:** Analog vs. Digital – Konzept +**Punkte:** 2 +**Typ:** `[MC]` + +Was ist der fundamentale Unterschied zwischen analoger und digitaler Speicherung? + +- [ ] Analog speichert in diskreten Stufen, digital als kontinuierliches Signal. +- [ ] Analog nutzt Elektrizität, digital nutzt Magnetismus zur Speicherung. +- [x] **Analog speichert kontinuierlich (z.B. Rillentiefe), digital in diskreten Bits.** ✅ +- [ ] Analog ist für Audio, digital ist ausschließlich für Text geeignet. + +> **Feedback:** Analog = kontinuierlich (Rillentiefe, Magnetfeldstärke). Digital = diskret (0 und 1). Die Quantisierung ist der „Preis" der Digitalisierung, aber danach bleibt die Information exakt – perfekte Kopien möglich. + +--- + + + +### J19 – Analoge Distribution: Wie kam Musik zum Käufer? +**Thema:** Distribution – Analog +**Punkte:** 1 +**Typ:** `[MC]` + +Wie wurden analoge Medien typischerweise verbreitet? + +- [ ] Per Download aus dem Internet auf den heimischen Computer. +- [ ] Über Streaming-Dienste wie Spotify oder Apple Music. +- [x] **Physisch: Kauf im Laden, Verleih, Kopie auf Kassette.** ✅ +- [ ] Über dezentrale Peer-to-Peer-Netzwerke zwischen Nutzern. + +> **Feedback:** Analoge Distribution war immer physisch gebunden: Man musste das Medium besitzen oder ausleihen. Kopieren war möglich (Kassette), aber mit Qualitätsverlust verbunden. + +--- + +### J20 – Digitale Distribution: Die vier Wege +**Thema:** Distribution – Digital +**Punkte:** 2 +**Typ:** `[MATCH]` + +Ordne jeder Distributionsform ein Beispiel zu. + +| Distributionsform | Beispiel | +|---|---| +| Datenträger | CD, DVD, USB-Stick | +| Download | iTunes Store, Steam, Bandcamp | +| Streaming | Netflix, Spotify, YouTube | +| Peer-to-Peer (P2P) | BitTorrent, eDonkey | + +> **Feedback:** Digital ermöglicht vier Distributionswege: physische Datenträger (wie analog, aber ohne Generationsverlust), Download (Besitz einer Kopie), Streaming (Zugriff ohne Besitz), P2P (dezentrale Verteilung zwischen Nutzern). + +--- + +### J21 – Streaming vs. Download: Was ist der Unterschied? +**Thema:** Distribution – Streaming +**Punkte:** 1 +**Typ:** `[MC]` + +Was unterscheidet Streaming von einem Download? + +- [ ] Streaming speichert die Datei dauerhaft, Download nur temporär. +- [ ] Streaming ist immer kostenlos, Download immer kostenpflichtig. +- [x] **Streaming überträgt während des Abspielens, ohne dauerhafte Kopie.** ✅ +- [ ] Streaming funktioniert offline, Download braucht ständig Internet. + +> **Feedback:** Streaming = „Wasserhahn" (Daten fließen, solange man zuschaut/hört). Download = „Flasche füllen" (Datei bleibt). Streaming braucht ständige Internetverbindung; Downloads funktionieren offline. + +--- + +### J22 – Analog vs. Digital: Vor- und Nachteile +**Thema:** Analog vs. Digital – Vergleich +**Punkte:** 2 +**Typ:** `[MATCH]` + +Ordne jede Eigenschaft zu: Vorteil von Analog oder Vorteil von Digital? + +| Eigenschaft | Vorteil von | +|---|---| +| Kein Abspielgerät nötig (Buch lesen) | Analog | +| Bit-identische Kopien ohne Qualitätsverlust | Digital | +| Unabhängig von Strom und Internet | Analog | +| Einfache Durchsuchbarkeit (Strg+F) | Digital | +| Haptisches Erlebnis | Analog | +| Fehlerkorrektur möglich (ECC, RAID) | Digital | + +> **Feedback:** Analog: physisch, unabhängig, haptisch – aber Verschleiß und Generationsverlust. Digital: perfekte Kopien, durchsuchbar, korrigierbar – aber abhängig von Technik und Formaten. + +--- + +### J23 – Distribution vergleichen: Download, Streaming, P2P +**Thema:** Distribution – Vergleich +**Punkte:** 3 +**Typ:** `[ESSAY]` + +Erklären Sie die drei digitalen Distributionswege **Download**, **Streaming** und **Peer-to-Peer (P2P)**. Beschreiben Sie für jeden Weg: (1) wie die Daten zu Nutzenden gelangen, (2) ob Nutzende eine dauerhafte Kopie erhalten, und (3) nennen Sie je ein Beispiel. + +> **Musterlösung:** **Download:** Datei wird vollständig vom Server heruntergeladen und lokal gespeichert. Nutzende erhalten dauerhafte Kopie. Beispiel: iTunes Store, Steam. **Streaming:** Daten werden während des Abspielens übertragen, keine dauerhafte lokale Kopie. Beispiel: Netflix, Spotify. **P2P:** Nutzende laden Teile der Datei gleichzeitig von vielen anderen herunter (dezentral). Dauerhafte Kopie möglich. Beispiel: BitTorrent. + +--- + +### J24 – Analog vs. Digital: Kopieren und Archivieren +**Thema:** Analog vs. Digital – Transfer +**Punkte:** 3 +**Typ:** `[ESSAY]` + +Vergleichen Sie **analoge** und **digitale** Medien hinsichtlich (1) Kopierqualität, (2) Langzeitarchivierung und (3) Abhängigkeit von Technik. Nennen Sie je einen konkreten Vor- und Nachteil. + +> **Musterlösung:** **Kopierqualität:** Analog: Jede Kopie verschlechtert sich (Generationsverlust). Digital: Bit-identische Kopien ohne Qualitätsverlust. **Langzeitarchivierung:** Analog: Physischer Verschleiß, aber lesbar ohne spezielle Software (Buch). Digital: Bits altern nicht, aber Formate können obsolet werden (DOCX in 50 Jahren?). **Technikabhängigkeit:** Analog: Buch braucht keinen Strom. Digital: Abhängig von funktionierender Hard- und Software. Vorteil Analog: Unabhängigkeit. Nachteil Analog: Generationsverlust. Vorteil Digital: Perfekte Kopien. Nachteil Digital: Formatobsoleszenz. + +--- + + + +### J25 – Redundanz vs. Irrelevanz erklären +**Thema:** Kompression – Prinzipien +**Punkte:** 2 +**Typ:** `[ESSAY]` + +Verlustfreie und verlustbehaftete Kompression nutzen unterschiedliche Prinzipien. Erklären Sie: (1) Was bedeutet **Redundanz entfernen**? (2) Was bedeutet **Irrelevanz entfernen**? (3) Welches Prinzip nutzt welcher Kompressionstyp? + +> **Musterlösung:** **(1) Redundanz:** Wiederholende Muster kompakter darstellen – z.B. "AAAAAAA" → "7×A". Die originalen Daten können perfekt rekonstruiert werden. **(2) Irrelevanz:** Daten wegwerfen, die Menschen nicht wahrnehmen – z.B. unhörbare Frequenzen in Audio, unsichtbare Farbunterschiede in Bildern. Nicht umkehrbar. **(3) Zuordnung:** Verlustfrei = Redundanz (ZIP, PNG, FLAC). Verlustbehaftet = Irrelevanz (JPEG, MP3). + +--- + + + +## BLOCK K – Bildformate & Raster vs. Vektor + +--- + +### K1 – Was ist ein Pixel? +**Thema:** Digitale Bilder – Grundbegriffe +**Punkte:** 1 +**Typ:** `[MC]` + +Was ist ein Pixel in einem digitalen Bild? + +- [ ] Ein winziges physisches Kameraobjektiv. +- [x] **Ein einzelner Farbpunkt in einem Rasterbild – der kleinste Baustein.** ✅ +- [ ] Eine Einheit zur Messung der Dateigröße. +- [ ] Ein Synonym für eine Farbe im RGB-Farbraum. + +> **Feedback:** Pixel = Picture Element. Ein digitales Rasterbild ist ein 2D-Array aus Pixeln, jeder mit einem Farbwert (z. B. RGB). + +--- + +### K2 – Speicherbedarf berechnen +**Thema:** Rastergrafiken – Berechnung +**Punkte:** 2 +**Typ:** `[NUMERIC]` + +Ein Bild ist 1920 × 1080 Pixel groß und nutzt 24-Bit-Farbtiefe (True Color). Wie groß ist das Bild unkomprimiert in Megabyte? (Runde auf eine Dezimalstelle) + +**Formel:** Breite × Höhe × (Farbtiefe / 8) = Bytes + +**Lösung:** 1920 × 1080 × 3 = 6.220.800 Bytes ≈ **6,2 MB** (±0,1) + +> **Feedback:** 24 Bit = 3 Bytes pro Pixel (8 Bit pro Kanal: R, G, B). 1920 × 1080 = 2.073.600 Pixel × 3 Bytes = 6.220.800 Bytes. Durch 1.000.000 ≈ 6,2 MB. + +--- + +### K3 – Farbtiefe: Bedeutung +**Thema:** Rastergrafiken – Farbtiefe +**Punkte:** 2 +**Typ:** `[MATCH]` + +Ordne jeder Farbtiefe ihre Bedeutung zu. + +| Farbtiefe | Bedeutung | +|---|---| +| 1 Bit | 2 Farben (Schwarz/Weiß) | +| 8 Bit | 256 Farben (Graustufen, GIF) | +| 24 Bit | 16,7 Millionen Farben (True Color, Standard) | +| 32 Bit | 16,7 Millionen Farben + Alpha (Transparenz) | + +> **Feedback:** Bei n Bit gibt es 2ⁿ mögliche Werte. 24 Bit = 8 Bit pro Kanal (R, G, B). 32 Bit = 24 Bit Farbe + 8 Bit Alpha-Kanal für Transparenz. + +--- + +### K4 – Was ist Alpha-Transparenz? +**Thema:** Rastergrafiken – Transparenz +**Punkte:** 1 +**Typ:** `[MC]` + +Was bedeutet ein 32-Bit-Bild gegenüber einem 24-Bit-Bild? + +- [ ] Es hat doppelt so viele Pixel. +- [x] **Es hat einen zusätzlichen Alpha-Kanal (8 Bit), der die Transparenz jedes Pixels speichert.** ✅ +- [ ] Es nutzt eine höhere Auflösung. +- [ ] Es kann mehr Dateiformate speichern. + +> **Feedback:** 32 Bit = 24 Bit (RGB) + 8 Bit Alpha. Der Alpha-Kanal bestimmt, wie durchsichtig jeder Pixel ist (0 = vollständig transparent, 255 = vollständig undurchsichtig). Wichtig für PNGs mit Hintergrund-Transparenz. + +--- + +### K5 – Raster vs. Vektor: Kern-Unterschied +**Thema:** Raster vs. Vektor – Konzept +**Punkte:** 2 +**Typ:** `[MC]` + +Was ist der fundamentale Unterschied zwischen Raster- und Vektorgrafiken? + +- [ ] Vektorgrafiken sind immer farbiger als Rastergrafiken. +- [x] **Rastergrafiken speichern einzelne Pixel; Vektorgrafiken speichern geometrische Beschreibungen (Pfade, Formen), die beliebig skaliert werden können.** ✅ +- [ ] Rastergrafiken können keine Farben darstellen, Vektorgrafiken schon. +- [ ] Der Unterschied liegt nur in der Dateiendung, nicht im Inhalt. + +> **Feedback:** Raster = „Malen nach Zahlen" (jeder Pixel einzeln). Vektor = „Bauanleitung" (Formen beschreiben). Diese Unterschied bestimmt alles: Skalierung, Dateigröße, Einsatzbereich. + +--- + +### K6 – Raster vs. Vektor: Vergleich +**Thema:** Raster vs. Vektor – Eigenschaften zuordnen +**Punkte:** 2 +**Typ:** `[MATCH]` + +Ordne jeder Eigenschaft zu: Raster oder Vektor? + +| Eigenschaft | Typ | +|---|---| +| Skalierung ohne Qualitätsverlust | Vektor | +| Ideal für Fotos | Raster | +| Dateigröße abhängig von der Auflösung | Raster | +| Ideal für Logos und Icons | Vektor | +| Speicherung als 2D-Array von Pixeln | Raster | +| Dateigröße abhängig von der Komplexität | Vektor | + +> **Feedback:** Raster = Pixel-basiert, auflösungsabhängig, ideal für Fotos. Vektor = Beschreibungs-basiert, beliebig skalierbar, ideal für Grafiken/Logos. + +--- + +### K7 – Skalierung: Warum werden Rasterbilder unscharf? +**Thema:** Rastergrafiken – Skalierung Transfer +**Punkte:** 2 +**Typ:** `[ESSAY]` + +Erkläre, warum ein Rasterbild beim Vergrößern unscharf wird, während ein Vektorbild bei beliebiger Größe scharf bleibt. Nenne einen konkreten Anwendungsfall, in dem diese Eigenschaft ausschlaggebend ist. + +> **Musterlösung:** Ein Rasterbild hat eine feste Auflösung (eine bestimmte Anzahl von Pixeln). Beim Vergrößern müssen neue Pixel „erfunden" werden (Interpolation) – es gibt keine echten Daten für die fehlenden Stellen → Unschärfe. Ein Vektorbild speichert nur Beschreibungen (Pfade, Formen). Beim Vergrößern werden einfach die Koordinaten skaliert – keine Information geht verloren → immer scharf. Anwendungsfall: Ein Logo auf einer Visitenkarte UND auf einem Plakat → SVG nutzen, damit es bei beliebiger Größe scharf bleibt. + +--- + + + +### K8 – Vektor → Raster: Wie heißt das? +**Thema:** Raster vs. Vektor – Konvertierung +**Punkte:** 1 +**Typ:** `[MC]` + +Wie heißt der Prozess, bei dem eine Vektorgrafik in eine Rastergrafik umgewandelt wird? + +- [ ] Vektorisierung +- [x] **Rasterisierung** ✅ +- [ ] Pixelierung +- [ ] Komprimierung + +> **Feedback:** Rasterisierung = Vektor → Raster (trivial, immer möglich). Der umgekehrte Prozess (Raster → Vektor) heißt „Tracing" und funktioniert oft nur unbefriedigend. + +--- + + + +### K9 – Interpolation: Welches Verfahren wofür? +**Thema:** Rastergrafiken – Interpolationsverfahren +**Punkte:** 2 +**Typ:** `[MATCH]` + +Ordne jedem Interpolationsverfahren seine Eigenschaft zu. + +| Verfahren | Eigenschaft | +|---|---| +| Nearest Neighbor | Schnell, pixelig – gut für Pixel-Art | +| Bilinear | Glättet, Standard-Verfahren | +| Bicubic | Hohe Qualität, rechenintensiver | +| Lanczos | Beste Qualität, mathematisch komplex | + +> **Feedback:** Bei der Wahl: Pixel-Art → Nearest Neighbor (soll pixelig bleiben). Normale Bilder → Bilinear oder Bicubic. Maximale Qualität bei Fotos → Lanczos. + +--- + +### K10 – Bildtypen vergleichen: Foto, Screenshot, Logo +**Thema:** Bildformate – Anwendungsfälle +**Punkte:** 3 +**Typ:** `[ESSAY]` + +Sie haben drei Bilder: ein **Foto**, einen **Screenshot** und ein **Logo**. Erklären Sie für jedes Bild, welches Format (JPEG, PNG oder SVG) Sie wählen würden und warum. Begründen Sie Ihre Wahl mit den technischen Eigenschaften des Formats. + +> **Musterlösung:** **Foto → JPEG:** Verlustbehaftete Kompression ist akzeptabel, da kleine Artefakte bei natürlichen Bildern kaum auffallen. Dateigröße deutlich kleiner als PNG. **Screenshot → PNG:** Verlustfreie Kompression erhält scharfe Texte und Linien. JPEG würde sichtbare Artefakte an Kanten erzeugen. **Logo → SVG:** Vektorgrafik ist beliebig skalierbar ohne Qualitätsverlust – ein Logo muss auf Visitenkarte und Plakatwand gleich scharf sein. Dateigröße bei einfachen Formen minimal. + +--- + + + +### K11 – Farbtiefe erklären: 1-Bit, 8-Bit, 24-Bit, 32-Bit +**Thema:** Rastergrafiken – Farbtiefe +**Punkte:** 3 +**Typ:** `[ESSAY]` + +Erklären Sie die Farbtiefen **1-Bit**, **8-Bit**, **24-Bit** und **32-Bit**. Beschreiben Sie für jede: (1) wie viele Farben dargestellt werden können, (2) einen typischen Anwendungsfall. + +> **Musterlösung:** **1-Bit:** 2¹ = 2 Farben (Schwarz/Weiß). Anwendung: Strichzeichnungen, Fax, QR-Codes. **8-Bit:** 2⁸ = 256 Farben. Anwendung: GIF-Bilder, Graustufen, Paletten-Bilder. **24-Bit:** 2²⁴ = 16,7 Millionen Farben (8 Bit pro Kanal: R, G, B). Anwendung: Standard für Fotos und Webgrafiken ("True Color"). **32-Bit:** 24 Bit Farbe + 8 Bit Alpha-Kanal (Transparenz). Anwendung: PNG mit Transparenz, Compositing in Grafikprogrammen. + +--- + + + +### K12 – Rasterisierung vs. Vektorisierung +**Thema:** Raster vs. Vektor – Konvertierung +**Punkte:** 2 +**Typ:** `[ESSAY]` + +Erklären Sie die beiden Konvertierungsprozesse **Rasterisierung** und **Vektorisierung** (Tracing). Beschreiben Sie: (1) die Richtung der Umwandlung, (2) ob Qualitätsverlust entsteht, (3) warum einer der Prozesse problematischer ist. + +> **Musterlösung:** **Rasterisierung (Vektor → Raster):** Trivial und verlustfrei bei gewählter Auflösung. Aus mathematischen Beschreibungen werden Pixel berechnet. Funktioniert immer perfekt. **Vektorisierung (Raster → Vektor):** Problematisch. Software muss Kanten "erraten" und als Pfade nachzeichnen. Funktioniert gut bei einfachen Grafiken (Logos), schlecht bei Fotos. Immer mit Qualitätsverlust/Interpretation verbunden. + +--- + + + +## BLOCK L – JPEG: Innenleben + +--- + + + +### L1 – JPEG: Verlustfrei oder verlustbehaftet? +**Thema:** JPEG – Grundeigenschaft +**Punkte:** 1 +**Typ:** `[MC]` + +JPEG ist ein … + +- [x] **…verlustbehaftetes Bildformat. Beim Speichern werden Daten dauerhaft weggeworfen.** ✅ +- [ ] …verlustfreies Bildformat wie PNG. +- [ ] …Videoformat für Streaming. +- [ ] …Vektorgrafik-Format. + +> **Feedback:** JPEG = Joint Photographic Experts Group. Verlustbehaftet: Beim Speichern werden Daten dauerhaft weggeworfen – eine gespeicherte JPEG kann nicht perfekt zum Original zurückgeführt werden. Quality 100 ≠ verlustfrei, nur „wenig wegwerfen". + +--- + +### L2 – Psychovisuelle Kompression: Das Auge austricksen +**Thema:** JPEG – Wahrnehmungsprinzip +**Punkte:** 2 +**Typ:** `[MC]` + +Wie nutzt JPEG die Schwächen des menschlichen Auges aus? + +- [ ] Das Auge kann keine Farben wahrnehmen – daher werden Farben komplett entfernt. +- [x] **Das Auge sieht Helligkeit besser als Farbe. JPEG behält die Helligkeit (Y) nahezu vollständig, reduziert aber die Farbauflösung (Cb, Cr) – der Verlust wird kaum wahrgenommen.** ✅ +- [ ] Das Auge kann keine Details sehen – daher werden alle Details entfernt. +- [ ] JPEG nutzt keine Wahrnehmungsforschung, komprimiert rein mathematisch. + +> **Feedback:** Psychovisuelle Kompression = Schwächen des Auges ausnutzen. Kern: Mehr Stäbchen (Helligkeit) als Zapfen (Farbe) im Auge → Helligkeit sichern, Farbe reduzieren. Der Verlust ist für Menschen kaum sichtbar. + +--- + +### L3 – Farbraumkonversion: RGB → YCbCr +**Thema:** JPEG Schritt 1 – Farbraum +**Punkte:** 2 +**Typ:** `[MC]` + +Warum wird bei JPEG von RGB in YCbCr konvertiert? + +- [ ] YCbCr nutzt weniger Speicher pro Pixel als RGB. +- [x] **In YCbCr sind Helligkeit (Y) und Farbe (Cb, Cr) getrennt – die Farbauflösung kann unabhängig von der Helligkeit reduziert werden.** ✅ +- [ ] RGB kann keine Transparenz darstellen, YCbCr schon. +- [ ] Die Konvertierung ist ein verlustfreier Schritt, der die Dateigröße halbiert. + +> **Feedback:** Y = Helligkeit (Luminanz), Cb/Cr = Farbdifferenzen (Chrominanz). Diese Trennung ermöglicht Chroma Subsampling: Helligkeit voll behalten, Farbe reduzieren – ohne sichtbaren Verlust. + +--- + + + +### L4 – Chroma Subsampling: Was ist 4:2:0? +**Thema:** JPEG Schritt 2 – Subsampling +**Punkte:** 2 +**Typ:** `[MC]` + +Was bedeutet das Subsampling-Schema 4:2:0? + +- [ ] 4 Pixel teilen sich eine Helligkeit, aber jeder hat eigene Farbe. +- [x] **4 Pixel teilen sich einen Farbwert (Chrominanz), aber jeder hat eine eigene Helligkeit (Luminanz). Die Farbauflösung wird auf 25% reduziert.** ✅ +- [ ] 4:2:0 bedeutet, dass keine Farbe gespeichert wird – nur Graustufen. +- [ ] Die Notation beschreibt die Blockgröße, nicht die Farbauflösung. + +> **Feedback:** 4:2:0 = JPEG-Standard. Von 4 Pixeln wird nur 1 Farbwert gespeichert (2×2-Block teilt Farbe), aber jeder Pixel behält seine eigene Helligkeit. Ergebnis: 50% Datenreduktion, kaum sichtbar. + +--- + + + +### L5 – JPEG-Schritte: Richtige Reihenfolge +**Thema:** JPEG – Kompressionsablauf +**Punkte:** 2 +**Typ:** `[ORDER]` + +Sortiere die Schritte der JPEG-Kompression in der richtigen Reihenfolge: + +1. Farbraumkonversion (RGB → YCbCr) +2. Chroma Subsampling +3. Block-Aufteilung (8×8) +4. DCT (Frequenzanalyse) +5. Quantisierung (hier passiert der Verlust!) +6. Huffman-Coding (verlustfrei) + +> **Feedback:** Der einzige verlustbehaftete Schritt ist die Quantisierung (Schritt 5). Alles davor bereitet die Daten vor, alles danach komprimiert die Ergebnisse verlustfrei weiter. + +--- + + + +### L6 – Welcher Schritt ist verlustbehaftet? +**Thema:** JPEG – Verlust lokalisieren +**Punkte:** 1 +**Typ:** `[MC]` + +Bei welchem Schritt der JPEG-Kompression werden Daten dauerhaft weggeworfen? + +- [ ] Farbraumkonversion (RGB → YCbCr) +- [ ] DCT (Discrete Cosine Transform) +- [x] **Quantisierung – hier werden unwichtige Frequenzkoeffizienten auf Null gesetzt oder vergröbert.** ✅ +- [ ] Huffman-Coding + +> **Feedback:** DCT selbst ist verlustfrei und reversibel – es sortiert nur die Daten nach Wichtigkeit. Die Quantisierung ist der einzige verlustbehaftete Schritt: Sie wirft hohe Frequenzen (feine Details) weg. Huffman-Coding danach ist wieder verlustfrei. + +--- + + + +### L7 – DCT: Was macht sie? +**Thema:** JPEG – DCT-Prinzip +**Punkte:** 1 +**Typ:** `[MC]` + +Was leitet die DCT (Discrete Cosine Transform) bei JPEG? + +- [ ] Sie komprimiert die Daten verlustbehaftet. +- [x] **Sie wandelt 64 Pixelwerte eines 8×8-Blocks in 64 Frequenzkoeffizienten um – sortiert die Information nach Wichtigkeit (niedrige Frequenz = wichtig, hohe Frequenz = Details).** ✅ +- [ ] Sie verschlüsselt die Daten für sichere Übertragung. +- [ ] Sie reduziert die Farbauflösung des Bildes. + +> **Feedback:** DCT = Herzstück von JPEG, aber selbst verlustfrei. Sie sortiert: Der DC-Koeffizient (0,0) = Durchschnittshelligkeit eines Blocks. Die AC-Koeffizienten = Helligkeitsänderungen. 90% der Information steckt in den ersten 10–15 Koeffizienten. + +--- + +### L8 – Huffman-Coding: Prinzip +**Thema:** JPEG – Huffman +**Punkte:** 2 +**Typ:** `[MC]` + +Wie funktioniert Huffman-Coding? + +- [ ] Alle Zeichen bekommen gleich lange Codes – einfach und effizient. +- [x] **Häufige Werte bekommen kurze Codes, selten vorkommende lange Codes – variable Bitlänge statt fester 8 Bit.** ✅ +- [ ] Huffman-Coding verschlüsselt die Daten zusätzlich. +- [ ] Es funktioniert nur für Texte, nicht für Bilddaten. + +> **Feedback:** Huffman = verlustfrei, optimal für bekannte Häufigkeiten. Präfix-frei: Kein Code ist Anfang eines anderen → eindeutig decodierbar. Auch in ZIP, PNG, MP3 verwendet. + +--- + + + +### L9 – JPEG-Artefakte: Benennen +**Thema:** JPEG – Artefakte identifizieren +**Punkte:** 2 +**Typ:** `[MATCH]` + +Ordne jedem JPEG-Artefakt seine Beschreibung zu. + +| Artefakt | Beschreibung | +|---|---| +| Blocking | 8×8-Blöcke werden sichtbar als Rechteckmuster | +| Ringing | „Geister" oder Halos an scharfen Kanten | +| Posterization | Farbverläufe werden stufig statt fließend | + +> **Feedback:** Alle drei sind Folgen der Quantisierung. Blocking: Weil jeder 8×8-Block unabhängig komprimiert wird. Ringing: DCT hat Probleme mit harten Kanten (Gibbs-Phänomen). Posterization: Zu wenige Bits für feine Farbabstufungen. + +--- + +### L10 – JPEG-Kompression erklären: RGB, YCbCr, DCT +**Thema:** JPEG – Pipeline verstehen +**Punkte:** 3 +**Typ:** `[ESSAY]` + +JPEG komprimiert in mehreren Schritten. Erklären Sie die Rolle von: (1) **RGB → YCbCr Konversion**, (2) **DCT (Discrete Cosine Transform)**, (3) **Quantisierung**. Welcher dieser Schritte ist verlustbehaftet und warum? + +> **Musterlösung:** **(1) RGB → YCbCr:** Trennt Helligkeit (Y) von Farbe (Cb, Cr). Ermöglicht Chroma Subsampling – Farbauflösung wird reduziert, Helligkeit bleibt voll erhalten. Das Auge sieht Helligkeit besser als Farbe. **(2) DCT:** Wandelt 8×8 Pixelblöcke in Frequenzkoeffizienten um. Sortiert Information nach Wichtigkeit: niedrige Frequenzen = grobe Struktur (wichtig), hohe Frequenzen = feine Details (weniger wichtig). Die DCT selbst ist verlustfrei. **(3) Quantisierung:** Hier passiert der Verlust! Frequenzkoeffizienten werden gerundet/auf Null gesetzt – hohe Frequenzen (Details) werden stärker reduziert. Dieser Schritt ist nicht umkehrbar. + +--- + + + +### L11 – JPEG-Artefakte erklären: Blocking, Ringing, Posterization +**Thema:** JPEG – Artefakte verstehen +**Punkte:** 3 +**Typ:** `[ESSAY]` + +JPEG-komprimierte Bilder zeigen bei niedriger Qualität typische Artefakte. Erklären Sie die drei Artefakte **Blocking**, **Ringing** und **Posterization**. Beschreiben Sie für jedes: (1) wie es aussieht und (2) warum es entsteht. + +> **Musterlösung:** **Blocking:** Sichtbare 8×8-Pixel-Rechtecke. Entsteht, weil jeder Block unabhängig komprimiert wird – bei starker Kompression passen Nachbarblöcke nicht mehr zusammen. **Ringing:** „Geister" oder Halos an scharfen Kanten (z.B. schwarze Schrift auf weißem Hintergrund). Entsteht, weil die DCT mit harten Übergängen schlecht umgehen kann (Gibbs-Phänomen). **Posterization:** Farbverläufe werden stufig statt fließend. Entsteht, weil zu wenige Bits für feine Farbabstufungen übrig bleiben – ähnlich wie ein Poster mit wenigen Farben. + +--- + + + +### L12 – Warum 8×8-Blöcke bei JPEG? +**Thema:** JPEG – Blockgröße +**Punkte:** 2 +**Typ:** `[ESSAY]` + +JPEG teilt Bilder in 8×8-Pixel-Blöcke auf. Erklären Sie: (1) warum überhaupt Blöcke verwendet werden, (2) warum genau 8×8 (nicht 4×4 oder 16×16), (3) welches Artefakt durch diese Blockaufteilung entstehen kann. + +> **Musterlösung:** **(1) Warum Blöcke:** DCT arbeitet effizienter auf kleinen Bereichen. Globale Analyse wäre rechenintensiv und würde lokale Unterschiede verwischen. **(2) Warum 8×8:** Kompromiss – klein genug für lokale Anpassung, groß genug für effiziente DCT. 64 Koeffizienten sind mathematisch handlich (8² = 64). Historisch auch wegen begrenzter Rechenleistung gewählt. **(3) Artefakt:** Blocking – bei starker Kompression werden die 8×8-Grenzen sichtbar, weil Nachbarblöcke nicht mehr zusammenpassen. + +--- + + + +## BLOCK M – Bildformate: PNG, GIF, WebP, SVG + +--- + + + +### M1 – PNG: Verlustfrei oder verlustbehaftet? +**Thema:** PNG – Grundeigenschaft +**Punkte:** 1 +**Typ:** `[MC]` + +Wie komprimiert PNG? + +- [ ] Verlustbehaftet – wie JPEG, aber mit besserer Qualität. +- [x] **Verlustfrei – die Originaldaten können perfekt rekonstruiert werden.** ✅ +- [ ] Gar nicht – PNG speichert Daten unkomprimiert. +- [ ] PNG nutzt eine Kombination aus verlustfrei und verlustbehaftet. + +> **Feedback:** PNG nutzt DEFLATE-Kompression (wie ZIP) – verlustfrei. Deshalb ist PNG ideal für Grafiken, Screenshots und Bilder mit Transparenz, aber größer als JPEG für Fotos. + +--- + + + +### M2 – PNG vs. JPEG: Wann was? +**Thema:** Bildformate – Formatwahl +**Punkte:** 2 +**Typ:** `[ESSAY]` + +Erklären Sie, wann Sie PNG und wann JPEG wählen würden. Nenne je zwei konkrete Anwendungsfälle und begründen Sie Ihre Wahl. + +> **Musterlösung:** PNG: (1) Screenshots – Texte und Linien bleiben scharf, keine Artefakte. (2) Logos mit Transparenz – PNG unterstützt Alpha-Transparenz, JPEG nicht. JPEG: (1) Fotos fürs Web – deutlich kleiner bei kaum sichtbarem Qualitätsverlust. (2) Social Media – Plattformen re-komprimieren sowieso, PNG würde nur unnötig groß sein. + +--- + + + +### M3 – GIF: Wie viele Farben? +**Thema:** GIF – Eigenschaften +**Punkte:** 1 +**Typ:** `[MC]` + +Wie viele Farben kann ein GIF-Bild gleichzeitig anzeigen? + +- [ ] 16 Farben +- [ ] 16,7 Millionen Farben +- [x] **256 Farben (8-Bit-Palette)** ✅ +- [ ] Unbegrenzt – GIF unterstützt alle Farben. + +> **Feedback:** GIF = 8-Bit-Palette = 256 Farben maximal. Deshalb sehen GIF-Bilder bei Fotos oft banding/posterisiert aus. GIF überlebt heute wegen Animationen. + +--- + +### M4 – WebP vs. JPEG: Vorteil? +**Thema:** Bildformate – WebP +**Punkte:** 1 +**Typ:** `[MC]` + +Was ist der hauptsächliche Vorteil von WebP gegenüber JPEG? + +- [ ] WebP unterstützt Videos, JPEG nicht. +- [x] **WebP erzeugt bei gleicher Qualität 25–35% kleinere Dateien als JPEG.** ✅ +- [ ] WebP ist verlustfrei, JPEG nicht. +- [ ] WebP kann keine Fotos speichern, nur Grafiken. + +> **Feedback:** WebP (Google, 2010) kann sowohl lossy als auch lossless komprimieren, unterstützt Transparenz und Animationen. Bei gleicher visueller Qualität sind WebP-Dateien deutlich kleiner als JPEG. + +--- + + + +### M5 – SVG: Was ist es? +**Thema:** SVG – Grundbegriff +**Punkte:** 1 +**Typ:** `[MC]` + +Was ist SVG? + +- [ ] Ein verlustbehaftetes Rasterbild-Format wie JPEG. +- [x] **Ein Vektorgrafik-Format, das Bilder als geometrische Beschreibungen (XML) speichert – beliebig skalierbar ohne Qualitätsverlust.** ✅ +- [ ] Ein Video-Container wie MP4. +- [ ] Ein komprimiertes Archivformat wie ZIP. + +> **Feedback:** SVG = Scalable Vector Graphics. Web-Standard für Vektorgrafiken. Beschreibt WAS gezeichnet werden soll (``, ``, ``), nicht wie jeder Pixel aussieht. Ideal für Logos, Icons, Illustrationen. + +--- + + + +### M6 – Formatwahl: Szenario zuordnen +**Thema:** Bildformate – Formatwahl Transfer +**Punkte:** 2 +**Typ:** `[MATCH]` + +Ordne jedem Szenario das optimale Bildformat zu. + +| Szenario | Format | +|---|---| +| Ein Foto für eine Webseite (klein, OK-Qualität) | JPEG | +| Ein Screenshot einer Benutzeroberfläche | PNG | +| Ein Logo, das auf allen Bildschirmgrößen scharf sein muss | SVG | +| Ein animiertes Reaktionsbild für einen Chat | GIF | + +> **Feedback:** JPEG = Fotos (klein, lossy OK). PNG = Screenshots, Grafiken mit Transparenz (verlustfrei). SVG = Logos, Icons (skalierbar). GIF = Animationen (256 Farben, aber Animations-Support). + +--- + +### M7 – Bildformate vergleichen: JPEG, PNG, WebP +**Thema:** Bildformate – Vergleich +**Punkte:** 3 +**Typ:** `[ESSAY]` + +Vergleichen Sie die drei Bildformate **JPEG**, **PNG** und **WebP**. Beschreiben Sie für jedes: (1) ob es verlustfrei oder verlustbehaftet komprimiert, (2) ob es Transparenz unterstützt, (3) einen idealen Anwendungsfall. + +> **Musterlösung:** **JPEG:** Verlustbehaftet. Keine Transparenz. Ideal für Fotos im Web – kleine Dateien, Qualitätsverlust bei natürlichen Bildern kaum sichtbar. **PNG:** Verlustfrei. Unterstützt Alpha-Transparenz (8 Bit). Ideal für Screenshots, Grafiken mit Text, Bilder mit Transparenz. **WebP:** Kann beides – lossy (wie JPEG) und lossless (wie PNG). Unterstützt Transparenz und Animation. Ideal als moderner Ersatz für beide – 25-35% kleiner als JPEG bei gleicher Qualität. + +--- + + + +### M8 – GIF vs. moderne Alternativen +**Thema:** Bildformate – Animation +**Punkte:** 2 +**Typ:** `[ESSAY]` + +GIF ist ein altes Format (1987), wird aber noch für Animationen verwendet. Erklären Sie: (1) die Haupteinschränkung von GIF, (2) warum es trotzdem noch populär ist, (3) welche moderne Alternative es gibt. + +> **Musterlösung:** **(1) Haupteinschränkung:** Nur 256 Farben (8-Bit-Palette). Farbverläufe werden stufig, Fotos sehen schlecht aus. **(2) Popularität:** Universelle Browser-Unterstützung, einfach zu teilen, "Meme-Kultur" hat das Format am Leben gehalten. **(3) Alternativen:** WebP (Animation + Millionen Farben + kleiner), APNG (animiertes PNG), oder kurze Videos (MP4/WebM mit `