apply feedback to termin 1: wtf theme, 50/50 images, speaker notes
This commit is contained in:
@@ -32,7 +32,7 @@ h2 {
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
# Mysterium
|
# WTF!?
|
||||||
|
|
||||||
```
|
```
|
||||||
89 50 4E 47 0D 0A 1A 0A
|
89 50 4E 47 0D 0A 1A 0A
|
||||||
@@ -72,6 +72,7 @@ Demonstration: Glühbirne AN/AUS = 1 Bit
|
|||||||
- Strom fließt oder nicht
|
- Strom fließt oder nicht
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
|
BIT = Binary Digit (Binärziffer) – 1948 von Claude Shannon geprägt
|
||||||
Alles Digitale basiert darauf
|
Alles Digitale basiert darauf
|
||||||
Transistoren in CPUs: Milliarden Bits schalten Millionen Mal pro Sekunde
|
Transistoren in CPUs: Milliarden Bits schalten Millionen Mal pro Sekunde
|
||||||
-->
|
-->
|
||||||
@@ -90,9 +91,11 @@ Transistoren in CPUs: Milliarden Bits schalten Millionen Mal pro Sekunde
|
|||||||
2⁸ = **256 Möglichkeiten** (0-255)
|
2⁸ = **256 Möglichkeiten** (0-255)
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
Rechnung gemeinsam: 2×2×2×2×2×2×2×2 = 256
|
BYTE = Wortspiel aus "Bit" + "Bite" (Bissen)
|
||||||
Jedes Bit kann 0 oder 1 sein
|
Warum 8 Bits? Historisch: IBM System/360 (1964) setzte Standard
|
||||||
256 verschiedene Werte mit 8 Bits darstellbar
|
Vorher: 6-Bit, 7-Bit Systeme (z.B. ASCII = 7 Bit)
|
||||||
|
8 Bit = 2 Hex-Ziffern = praktisch für Hardware
|
||||||
|
Rechnung: 2×2×2×2×2×2×2×2 = 256
|
||||||
-->
|
-->
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -142,15 +145,16 @@ RGB = Additive Farbmischung (Bildschirme)
|
|||||||
- **Grün:** 0-255
|
- **Grün:** 0-255
|
||||||
- **Blau:** 0-255
|
- **Blau:** 0-255
|
||||||
|
|
||||||
**Beispiel:**
|
**Beispiele:**
|
||||||
`FF 00 00` = Rot
|
`FF 00 00` = Rot | `00 FF 00` = Grün
|
||||||
`00 FF 00` = Grün
|
`00 00 00` = Schwarz | `FF FF FF` = Weiß
|
||||||
`FF FF FF` = Weiß
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
CMYK = Subtraktive Farbmischung (Druck)
|
CMYK = Subtraktive Farbmischung (Druck)
|
||||||
Hex-Notation: FF = 255 in Dezimal
|
Hex-Notation: FF = 255 in Dezimal
|
||||||
CSS-Farben nutzen Hex: #FF0000 = Rot
|
CSS-Farben nutzen Hex: #FF0000 = Rot
|
||||||
|
Wer HTML/CSS gemacht hat, kennt das schon!
|
||||||
|
background-color: #FF0000; = Rot
|
||||||
-->
|
-->
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -262,13 +266,15 @@ Jede Hex-Ziffer = 4 Bits
|
|||||||
**Hexadezimal (Base 16):**
|
**Hexadezimal (Base 16):**
|
||||||
`4D 50 33` (= "MP3" in ASCII)
|
`4D 50 33` (= "MP3" in ASCII)
|
||||||
|
|
||||||
**Jede Hex-Ziffer = 4 Bits**
|
**Jede Hex-Ziffer = 4 Bits (ein "Nibble")**
|
||||||
0-9, A-F (10=A, 11=B, ..., 15=F)
|
0-9, A-F (10=A, 11=B, ..., 15=F)
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
|
Warum genau 4 Bits? 2⁴ = 16 Werte = eine Hex-Ziffer (0-F)
|
||||||
Hex = Shortcut für Menschen, nicht für Computer
|
Hex = Shortcut für Menschen, nicht für Computer
|
||||||
Computer denken binär, wir lesen hex
|
Computer denken binär, wir lesen hex
|
||||||
1 Byte = 2 Hex-Ziffern (00-FF)
|
1 Byte = 2 Hex-Ziffern (00-FF)
|
||||||
|
"Nibble" = halb Byte = 4 Bits (Wortspiel!)
|
||||||
Hex-Editor: Standard-Tool für Dateianalyse
|
Hex-Editor: Standard-Tool für Dateianalyse
|
||||||
-->
|
-->
|
||||||
|
|
||||||
@@ -283,13 +289,17 @@ Hex-Editor: Standard-Tool für Dateianalyse
|
|||||||
| PNG | `89 50 4E 47 0D 0A 1A 0A` | `.PNG` |
|
| PNG | `89 50 4E 47 0D 0A 1A 0A` | `.PNG` |
|
||||||
| JPEG | `FF D8 FF` | `ÿØÿ` |
|
| JPEG | `FF D8 FF` | `ÿØÿ` |
|
||||||
| PDF | `25 50 44 46` | `%PDF` |
|
| PDF | `25 50 44 46` | `%PDF` |
|
||||||
| ZIP | `50 4B 03 04` | `PK` |
|
| ZIP/DOCX/ODT | `50 4B 03 04` | `PK` |
|
||||||
|
|
||||||
|
**Achtung:** TXT, HTML, CSS haben **keine** Magic Number!
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
Magic Number = Signature am Dateianfang
|
Magic Number = Signature am Dateianfang
|
||||||
Computer schauen in erste Bytes (nicht auf .jpg/.png)
|
|
||||||
"PK" = Phil Katz (Erfinder von PKZip)
|
"PK" = Phil Katz (Erfinder von PKZip)
|
||||||
|
DOCX, XLSX, ODT = ZIP-Archive mit XML-Inhalt!
|
||||||
Dateiendungen können lügen, Magic Numbers nicht
|
Dateiendungen können lügen, Magic Numbers nicht
|
||||||
|
→ FAKE CHECK: virus.exe → bild.jpg umbenennen täuscht nur Menschen
|
||||||
|
Computer erkennt echten Typ an Magic Number
|
||||||
-->
|
-->
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -309,11 +319,12 @@ Tool: HxD (Windows), Hex Fiend (Mac), xxd (Linux)
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# Hands-On: Mystery Files
|
# Hands-On: WTF Files
|
||||||
|
|
||||||
**Aufgabe (30 Min):**
|
**Aufgabe (30 Min):**
|
||||||
|
|
||||||
1. Drei Dateien ohne Extension: `mystery1`, `mystery2`, `mystery3`
|
1. Drei Dateien ohne Extension: `wtf1`, `wtf2`, `wtf3`
|
||||||
|
→ Download: `materials/` Ordner
|
||||||
2. Öffne im Hex-Editor
|
2. Öffne im Hex-Editor
|
||||||
3. Lies erste 16 Bytes
|
3. Lies erste 16 Bytes
|
||||||
4. Identifiziere Format (Magic Number)
|
4. Identifiziere Format (Magic Number)
|
||||||
@@ -323,14 +334,17 @@ Tool: HxD (Windows), Hex Fiend (Mac), xxd (Linux)
|
|||||||
|
|
||||||
<!--
|
<!--
|
||||||
Praktische Phase: Studierende arbeiten selbst
|
Praktische Phase: Studierende arbeiten selbst
|
||||||
Dateien: PNG, JPEG, TXT (vorbereitet)
|
Dateien im materials/ Ordner:
|
||||||
|
- wtf1: Plaintext (keine Magic Number)
|
||||||
|
- wtf2: PNG (89 50 4E 47)
|
||||||
|
- wtf3: JPEG (FF D8 FF)
|
||||||
Gruppenarbeit: 3-4 Personen
|
Gruppenarbeit: 3-4 Personen
|
||||||
Ziel: Hex-Dump lesen lernen, Dateiformate verstehen
|
Ziel: Hex-Dump lesen lernen, Dateiformate verstehen
|
||||||
-->
|
-->
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# Aufgabe bis nächste Woche
|
# Fleißaufgabe bis nächste Woche
|
||||||
|
|
||||||
**Finde eine Datei auf deinem Computer**
|
**Finde eine Datei auf deinem Computer**
|
||||||
|
|
||||||
@@ -426,6 +440,7 @@ Trade-off: Größe vs. Qualität
|
|||||||
---
|
---
|
||||||
|
|
||||||
# Lossless: Run-Length Encoding
|
# Lossless: Run-Length Encoding
|
||||||
|
## Lauflängenkodierung
|
||||||
|
|
||||||
**Original:**
|
**Original:**
|
||||||
```
|
```
|
||||||
@@ -440,7 +455,8 @@ AAAAABBBCCCCCCCC
|
|||||||
**Ersparnis:** 16 → 6 Zeichen (62% Reduktion)
|
**Ersparnis:** 16 → 6 Zeichen (62% Reduktion)
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
RLE = Simplest Compression Algorithm
|
RLE = Run-Length Encoding = Lauflängenkodierung
|
||||||
|
Simplest Compression Algorithm
|
||||||
Gut für repetitive Daten (Fax, simple Grafiken)
|
Gut für repetitive Daten (Fax, simple Grafiken)
|
||||||
Schlecht für chaotische Daten (Fotos, Audio)
|
Schlecht für chaotische Daten (Fotos, Audio)
|
||||||
-->
|
-->
|
||||||
@@ -469,15 +485,21 @@ Kompression = Modell der menschlichen Wahrnehmung
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<!-- _header: '' -->
|

|
||||||
<!-- _footer: '' -->
|
|
||||||
|
|
||||||

|
# Karlheinz Brandenburg
|
||||||
|
|
||||||
|
**"Vater der MP3"**
|
||||||
|
|
||||||
|
- Diplom-Ingenieur, Universität Erlangen-Nürnberg
|
||||||
|
- Fraunhofer IIS (Institut für Integrierte Schaltungen)
|
||||||
|
- Forschung ab 1982, Patent 1988
|
||||||
|
- Hörte "Tom's Diner" über 10.000 Mal
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
Foto: Karlheinz Brandenburg
|
|
||||||
Fraunhofer IIS Erlangen
|
Fraunhofer IIS Erlangen
|
||||||
"Vater der MP3"
|
Forschung dauerte über 10 Jahre
|
||||||
|
Perfektionist: Jeder Hörtest musste bestehen
|
||||||
-->
|
-->
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -504,15 +526,22 @@ Patent lief 2017 aus
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<!-- _header: '' -->
|

|
||||||
<!-- _footer: '' -->
|
|
||||||
|
|
||||||

|
# Suzanne Vega
|
||||||
|
|
||||||
|
**"Tom's Diner" (1987)**
|
||||||
|
|
||||||
|
- A cappella (keine Instrumente)
|
||||||
|
- Klare, hohe Frequenzen
|
||||||
|
- Perfekter Stresstest für Kompression
|
||||||
|
- Der erste Song, der als MP3 kodiert wurde
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
Suzanne Vega – "Tom's Diner" (1987)
|
Suzanne Vega – "Tom's Diner" (1987)
|
||||||
Der erste Song, der als MP3 kodiert wurde
|
A cappella = einfacher zu analysieren (nur Stimme)
|
||||||
Karlheinz Brandenburg hörte ihn tausende Male
|
Hohe Frequenzen = Herausforderung für Kompression
|
||||||
|
Brandenburg hörte den Song über 10.000 Mal
|
||||||
-->
|
-->
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -617,16 +646,22 @@ Das Pferd war aus dem Stall
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<!-- _header: '' -->
|

|
||||||
<!-- _footer: '' -->
|
|
||||||
|
|
||||||

|
# Napster (1999)
|
||||||
|
|
||||||
|
**P2P-Filesharing für MP3s**
|
||||||
|
|
||||||
|
- Shawn Fanning, 19 Jahre alt
|
||||||
|
- 80 Millionen User in 2 Jahren
|
||||||
|
- Musikindustrie verklagt (2001)
|
||||||
|
- Pandora's Box: Nicht mehr aufzuhalten
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
Napster-Screenshot (1999)
|
P2P = Peer-to-Peer
|
||||||
P2P-Filesharing für MP3s
|
Shawn Fanning gründete Napster als Student
|
||||||
Shawn Fanning, 19 Jahre alt
|
RIAA verklagte Napster, Schließung 2001
|
||||||
80 Millionen User in 2 Jahren
|
Aber: LimeWire, Kazaa, BitTorrent folgten
|
||||||
-->
|
-->
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -690,22 +725,23 @@ Vinyl-Revival: 2020er Gegenbewegung
|
|||||||
1. Lade Lied runter (eigenes oder CC)
|
1. Lade Lied runter (eigenes oder CC)
|
||||||
2. Konvertiere in verschiedene Bitraten:
|
2. Konvertiere in verschiedene Bitraten:
|
||||||
- 320 kbps, 128 kbps, 64 kbps
|
- 320 kbps, 128 kbps, 64 kbps
|
||||||
3. Tool: Audacity (kostenlos)
|
3. Tool: **Audacity** (kostenlos)
|
||||||
4. Höre Unterschiede (Kopfhörer!)
|
4. Höre Unterschiede (Kopfhörer!)
|
||||||
5. Vergleiche Dateigrößen
|
5. Vergleiche Dateigrößen
|
||||||
|
|
||||||
**Optional:** Spektrogramm-Ansicht
|
**Spektrogramm:** Track-Menü → Spektrogramm
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
Audacity: FOSS Audio-Editor
|
Audacity: FOSS Audio-Editor (audacityteam.org)
|
||||||
Export: Datei → Exportieren → MP3 → Bitrate wählen
|
Export: Datei → Exportieren → MP3 → Bitrate wählen
|
||||||
Spektrogramm: Analysieren → Spektrogramm
|
Spektrogramm-Ansicht: Track-Name klicken → "Spektrogramm"
|
||||||
Hohe Frequenzen verschwinden bei niedriger Bitrate
|
Hohe Frequenzen (oben im Bild) verschwinden bei niedriger Bitrate
|
||||||
|
Alternative: Spek (spek.cc) – reiner Spektrogramm-Viewer
|
||||||
-->
|
-->
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# Aufgabe bis nächste Woche
|
# Fleißaufgabe bis nächste Woche
|
||||||
|
|
||||||
**Nimm ein Lied (eigenes oder CC)**
|
**Nimm ein Lied (eigenes oder CC)**
|
||||||
|
|
||||||
@@ -727,7 +763,7 @@ Psychoakustik in Aktion: Subjektive Wahrnehmung
|
|||||||
|
|
||||||
# Fragen & Diskussion
|
# Fragen & Diskussion
|
||||||
|
|
||||||
**Kontakt:** czechowski@hdm-stuttgart.de
|
**Kontakt:** michael.czechowski@lehre.dhbw-stuttgart.de
|
||||||
**Folien:** Online verfügbar unter https://hdm.librete.ch
|
**Folien:** Online verfügbar unter https://hdm.librete.ch
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|||||||
Reference in New Issue
Block a user