public/uni
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity
196 Commits 1 Branch 1 Tag
4053185e74fc809c4ffc08baa54389a508f3afc6
Commit Graph
196 Commits
This Branch
This Branch
All Branches
Author SHA1 Message Date
libretech 4053185e74 dhbw phase 4: alle 8 kapitel slide-MD komplett (4176 zeilen → ~1100 zeilen, ~210 slides total) 
kap1 web_eng (104 → 57 slides): kurs-intro + prüfungsleistung-übersicht, internet-timeline (4 milestones), URL→pixel-7-schritte, HTTP, onboarding (node 24 LTS via fnm, brew/winget paket-manager, VS Code/Chromium/Hoppscotch, git setup mit SSH-key, projekt-skeleton), HTML (anatomie, self-closing, grundgerüst, semantik-tabelle, native elemente details/dialog/input-types), A11y volle tiefe (BFSG+EAA 28.06.2025, WCAG-POUR, Perceivable/Operable/Understandable/Robust einzeln mit code, testen mit lighthouse/axe/manuell), CSS-vorschau (anatomie/selektoren/spezifizität/box-model/farben/einheiten/pseudos), JS-vorschau (ECMAScript-timeline/grundlagen/DOM/fetch), frameworks-übersicht (react/vue/svelte/astro counter-vergleich), build-tools/rendering-modi, selbstlernen erste-eigene-seite

kap2 css_extended (13 → 28 slides): box-model + box-sizing global, flexbox basics+achsen+item-properties+typische-patterns, grid basics+areas+auto-layout, flexbox-vs-grid tabelle, mobile-first media queries, viewport-meta, fluid sizing mit clamp(), transitions (was performant), keyframe-animationen, prefers-reduced-motion pflicht, CSS-variablen + dark-mode-pattern, CSS functions (calc/clamp/gradient/oklch/filter), CSS-frameworks tabelle + tailwind pro/contra, selbstlernen flexboxfroggy+cssgridgarden

kap3 nodejs_basics (~22 → 20 slides): was-ist-node + warum-node-tabelle, fnm versions-manager + node 24 LTS + .nvmrc, npm init + package.json (mit type:module), ESM modern + CJS legacy, built-in modules (node: prefix), HTTP-server eingebaut + express, REST mit express (GET/POST/PUT/DELETE-pattern), alternative frameworks tabelle (fastify/hono/koa), routing-pattern mit Router, fetch global ab node 18, error-handling res.ok, environment variables mit dotenv + niemals committen, selbstlernen mini-API

kap4 nodejs_advanced (~24 → 22 slides): synchron-vs-asynchron, promise then-vs-async/await, sequenziell-vs-parallel + Promise.all, promise-methoden tabelle (all/allSettled/race/any), fs/promises lesen+schreiben, streams pipeline für große dateien, DB-übersicht SQLite/Postgres/MongoDB/Redis, better-sqlite3 prepared statements, ORM-übersicht (drizzle/prisma/knex), CRUD-pattern express+sqlite, auth-strategien tabelle, bcrypt für passwörter, JWT-pattern mit httpOnly+secure cookie, try/catch + error-klassen, globaler express-error-handler, selbstlernen REST+DB+auth

kap5 testing (~23 → 23 slides): test-pyramide 70%/20%/10%, vitest setup + describe/it/expect, AAA-pattern, matchers tabelle, TDD red-green-refactor mit konkretem beispiel, supertest für API-integration, test-DB :memory: + lifecycle hooks, mocking mit vi.spyOn (sparsam), playwright E2E mit role-based-locators, E2E-vs-unit tradeoffs, coverage realistisch (80% gut), CI mit github-actions, selbstlernen tests-schreiben

kap6 typescript (~30 → 19 slides): was-ist-TS + warum-tabelle, setup mit tsx + tsconfig.json + strict:true, basis-typen + any vermeiden, object-typen + interfaces + type-aliases, function-typen (Promise<T>), union + discriminated union + intersection, generics + constraints, built-in generics (Partial/Omit/Record), typ-inference (nicht über-annotieren), typen für REST-API mit express, zod runtime-validation + z.infer, any-vs-unknown-vs-never, best practices, selbstlernen API-zu-TS-migration

kap7 docker (~24 → 24 slides): auf-meinem-rechner-läufts problem, container-vs-VM tabelle, docker basics (image/container/dockerfile/registry), dockerfile hallo-welt, schichten + cache-optimierung, multi-stage build, base-image-größen tabelle (alpine ~180MB vs node ~1.1GB), .dockerignore, compose.yml beispiel, compose-commands, networking (service-namen als hostnamen), volumes (named vs bind), env+secrets, github-actions docker-build, registry-übersicht, health-checks, best-practices, selbstlernen app-dockerizen

kap8 best_practices (~30 → 28 slides): sinnvolle commits + conventional commits format, .gitignore template, branches+PRs workflow, README-template mit 6 sektionen, SOLID 5 prinzipien tabelle, S-single-responsibility + D-dependency-inversion mit code, 12-factor wichtigste (codebase/deps/config/processes/disposability), factor 3 config-in-env, factor 6 stateless-processes, SemVer MAJOR.MINOR.PATCH, package.json caret/tilde/exakt, code-reviews geben+nehmen + checkliste, doku-quellen tabelle (MDN/nodejs/npm/tc39/caniuse), stack-overflow gut-nutzen, AI-assistenten pro/contra (verstehen-nicht-kopieren), selbstlernen projekt-hygiene-check

build geht durch alle 8 kapitel-html+pdf
render-spot-check: cover-slide-dark-mode-invert, git-setup code-syntax-highlight, css-anatomie code-blocks — alle sauber

kein deploy, nur build+verify
 2026-05-14 17:14:02 +02:00
libretech 443150c40e 223015b filename-cleanup: dateien umbenannt + Makefile angepasst, build geht durch 
git mv:
- 01-grundlagen-text-audio.md → 01-datenfundamentale.md (kap 1 datenfundamentale + signal-zu-byte)
- 02-bild-audio-video.md → 02-kompression.md (kap 2 kompression prinzipien)
- 03-speichermedien-schnittstellen.md → 03-inhalte-bild-audio-video.md (kap 3 inhalte bild/audio/video)
- 04-distribution-apis-zukunft.md → 04-speicher-schnittstellen.md (kap 4 speicher + schnittstellen)
- 05-vertiefung-offene-fragen.md → 05-distribution-metadaten.md (kap 5 distribution + metadaten)

Makefile 223015b_KAPITEL angepasst an neue dateinamen. build-223015b läuft sauber durch alle 5 neuen kapitel-html+pdf.

stale html-files in build/ bleiben bis make clean (gitignored, kein commit-impact).
 2026-05-14 16:58:58 +02:00
libretech c0e9592711 223015c kap2: block-F 'URL→Pixel-7-schritte' klausur-marker raus (live-bonus, kein klausur-pflicht) 2026-05-14 16:52:24 +02:00
libretech 435282b079 dhbw phase 1: operative lernziele für alle 8 kapitel (vorschlag, 4 fragen offen) 
je 5 lernziele pro kapitel auf basis des DHBW-fundaments (industrie-anschluss + selbstständig-lernen + praxis-bezug):
- kap1 web eng: browser-render, semantisches HTML, A11y BFSG/EAA, DevTools, tool-landschaft VS Code/Vite/Frameworks
- kap2 CSS extended: box-model, flexbox 1D, grid 2D, responsive media queries, animations+transitions mit reduced-motion
- kap3 node basics: rolle als runtime, npm init+package.json+node 24 LTS, ESM vs CJS, http-server mit express, fetch in node
- kap4 node advanced: async/await+promise, fs/promises, datenbank-CRUD (SQLite/PG), authentifizierung JWT/session, error-handling
- kap5 testing: vitest unit-tests, TDD red-green-refactor, integration-tests API, E2E playwright/cypress trade-offs, coverage-report (kein QA-garant)
- kap6 typescript: rolle als JS-aufsatz, typen-annotation, interfaces+type-aliase, generics LESEN, strict-tsconfig
- kap7 docker: container-konzept, dockerfile, docker compose multi-container, multi-stage-build (bonus), CI-pipeline integration
- kap8 best practices: git-hygiene+conventional commits, README schreiben, SOLID erkennen, 12-factor app, code-reviews, SemVer

soft-skills übergreifend: doku lesen, stack-overflow/github-issues nutzen, sauber strukturieren, industrie-konventionen.

4 offene fragen: kap1-split (zu groß bei 1791 zeilen)?, TS-tiefe (lesen vs schreiben)?, kap8 soft- vs hard-skills?, DHBW-praxis-phase-stack-verteilung (node vs java)?

danach: bogen pro 8 kapitel, demo-audit (dhbw-assets bisher minimal), slide-rewrites pro kapitel
 2026-05-14 16:49:10 +02:00
libretech 1731aa8c40 223015c phase 4: kap3 slide-MD rewrite (49 → 30 slides, -39%) + klausurfolien.md regeneriert (20 slides) 
bogen-treu nach docs/223015c/03-interaktivitaet-javascript-bogen.md:
- 2 leads: kapitel-intro, 'statisch ist langweilig'
- was-kann-JS-tabelle (mit sicherheits-grenzen erklärung), JS-timeline (1995 brendan eich → 2009 node → 2015 ES6 → heute TS)
- JS einbinden (external/inline/module), js-console demo reuse
- variablen (let/const/var, const default), datentypen (6 grundtypen + arrays/objects)
- js-arrays + js-objects demo reuse, funktionen (declaration + arrow)
- js-loops demo reuse, kontrollstrukturen (if/else, ternär, switch)
- DOM lead, dom-tree demo reuse, querySelector (CSS-selektoren wiederverwendbar)
- js-manipulate demo reuse (textContent/innerHTML/setAttribute/classList)
- js-create demo reuse (createElement/appendChild/remove)
- events lead, js-event-listener demo reuse, häufige-events-tabelle (click/input/submit/keydown/load/DOMContentLoaded)
- js-preventdefault demo reuse, js-darkmode demo reuse, js-todo demo reuse, js-fetch demo reuse, js-localstorage demo reuse
- frameworks lead, React/Vue/Angular/Svelte/Astro übersichtstabelle (KEINE logo-galerie), library-vs-framework (inversion of control)
- selbstlernen mini-projekt (dark-mode / to-do / API), zusammenfassung des ganzen kurses

reuse-demos: js-console, js-arrays, js-objects, js-loops, dom-tree, js-manipulate, js-create, js-event-listener, js-preventdefault, js-darkmode, js-todo, js-fetch, js-localstorage (13 demos reused)
no NEU demos in dieser session

per klausur-themen-vorschlag: JS NICHT klausurrelevant. lernziele auf verstehen-niveau (kein code-schreiben in klausur).

streichungen vs altem 03-interaktivitaet-javascript.md (1050 zeilen, 49 slides):
- framework-logo-galerie-folien (react/vue/svelte/astro/webpack/vite/parcel als jeweils eigene folie) → eine übersichts-folie
- doppelte 'was kann JS'-folien → eine
- lange hands-on-codes als folie → in speaker-notes oder selbstlernen verlinken

klausurfolien.md regeneriert: 20 slides (8 aus kap1, 11 aus kap2, 0 aus kap3 → bestätigt JS-nicht-klausurrelevant-design)

build geht durch
 2026-05-14 16:47:51 +02:00
libretech 8fd33b291b 223015c phase 4: kap2 slide-MD rewrite (91 → 41 slides, -55%) 
bogen-treu nach docs/223015c/02-netzwerke-protokolle-css-bogen.md.

sub-A netzwerk (18 slides):
- lead 'sub-A netzwerk'
- klausur drei-adressen-tabelle (IP weltweit eindeutig endgerät, MAC lokal eindeutig NIC, port programm — mit beispielen 80/443/22)
- ip-packet demo reuse
- client-server-ports demo reuse
- lead TCP/IP, warum-schichten erklärung, klausur 4-schichten-tabelle (network-access/internet/transport/application mit protokollen + dateneinheiten frame/packet/segment/data)
- encap-stack demo reuse, klausur encapsulation-pyramide
- OSI vs TCP/IP tabelle (7 vs 4 schichten)
- lead DNS, dns-lookup demo reuse, dns-tree demo reuse
- lead HTTP, klausur HTTP-request mit GET/path/header, klausur HTTP-response mit statuscode/header/body
- klausur statuscodes-tabelle (200/301/302/400/401/403/404/500/503)
- HTTP-versionen 1.1/2/3 mit hauptverbesserungen pro version
- tcp-handshake demo reuse
- klausur synthese 'URL → pixel 7 schritte' (URL-parsen→DNS→TCP→TLS→HTTP→HTML/CSS/JS→render)
- network-chain demo reuse

sub-B CSS+A11y (22 slides):
- lead sub-B
- css-anatomie demo reuse mit selektor/property/value erklärung + 3 einbindungsarten
- klausur CSS-selektoren-tabelle (element/klasse/id/pseudo/kombinatoren)
- css-combinators demo reuse
- klausur spezifizität-hierarchie (inline 1000, id 100, klasse 10, element 1)
- css-box-model demo reuse + ASCII-darstellung + box-sizing border-box best-practice
- display: block/inline/flex/grid übersicht
- klausur flexbox-vs-grid (1D vs 2D, anwendungs-fälle)
- css-responsive demo reuse (media queries, mobile-first)
- lead A11y, klausur BFSG+EAA-pflicht ab 28.06.2025 (wer betroffen, ausnahmen kleinunternehmen, 100k bußgeld), klausur WCAG-POUR-prinzipien
- a11y-semantic demo reuse, ARIA als ergänzung (button vs div role=button), contrast-levels demo reuse, keyboard-a11y demo reuse, a11y-error demo reuse
- selbstlernen A11y-audit mit lighthouse
- zusammenfassung 'netzwerk + browser-synthese + CSS + A11y'

reuse-demos: ip-packet, client-server-ports, encap-stack, dns-lookup, dns-tree, tcp-handshake, network-chain, css-anatomie, css-combinators, css-box-model, css-responsive, a11y-semantic, contrast-levels, keyboard-a11y, a11y-error (15 demos reused)
no NEU demos in dieser session — alle inline als markdown-tabellen + code-blocks

klausur-marker (11): drei-adressen, 4-schichten, encapsulation, HTTP-request, HTTP-response, statuscodes, URL→pixel-7-schritte, CSS-selektoren, spezifizität, box-model, flexbox-vs-grid, BFSG/EAA, WCAG-POUR

build geht durch
 2026-05-14 16:44:37 +02:00
libretech 0a76c1c1d0 223015c phase 4: kap1 slide-MD rewrite (100 → 27 slides, -73%) 
bogen-treu nach docs/223015c/01-geschichte-grundlagen-html-bogen.md:
- eröffner-hook 'du tippst librete.ch ein, was alles dahinter steht' (vorschau auf alle folgenden kapitel)
- 6 pioniere mit jeweils einer folie: lovelace (1843 erster algorithmus), hollerith (1890 lochkarte → IBM), turing (1936 turing-maschine + bletchley park enigma), von neumann (1945 EDVAC stored program), hopper/booth/hamilton zusammen auf einer folie (compiler/assembly/apollo-11 + software engineering term)
- klausur von-neumann-5-komponenten-tabelle (steuerwerk, ALU, speicher, I/O, bus)
- pivot zu netz: kalter krieg → paul baran packet switching, klausur internet-timeline (4 milestones: 1969 ARPANET, 1971 email, 1983 TCP/IP, 1989 WWW)
- berners-lee + WWW (HTTP+HTML+URL als drei standards), unterseekabel + DE-CIX als physikalische realität
- pivot zu HTML: was bekommt der browser, HTML-anatomie klausur-tabelle (opening/closing/attribut/inhalt/element), attribute-übersicht (id/class/href/src/alt), self-closing tags
- klausur document-grundgerüst (DOCTYPE+html+head+body+meta), grundgeruest-demo reuse
- klausur semantische HTML-tags-tabelle (header/nav/main/section/article/aside/footer)
- inline-tags (a/strong/em/span/code/br/img), listen/bilder/links, formulare label-for-id-pflicht für A11y
- dom-tree demo reuse als visualisierung
- selbstlernen DevTools-inspector live, zusammenfassung

streichungen vs altem 01-geschichte-grundlagen-html.md (1940 zeilen, 100 slides):
- pro-person-galerie-folien stark reduziert (12 personen → 6)
- IBM/NS-vertiefung 2 → 1 folie (nur speaker-note ausführlich)
- ENIAC/Mark I/Z3 zusammengelegt
- bit/byte/hex-blöcke RAUS (sind bereits in 223015b komplett behandelt — keine redundanz mit anderem kurs)
- framework-logos (kommt in kap3)
- A11y-folien (kommt in kap2)
- 'die wichtigsten tags'-listen-folie eingedampft

reuse-demos: grundgeruest, dom-tree (beide aus /assets/demos/, bereits vorhanden)
no neu demos — alle inline als markdown-tabellen

klausur-marker (6): von-neumann-5-komponenten, internet-timeline, HTML-anatomie, grundgerüst, semantische tags, document-struktur

build geht durch
 2026-05-14 16:40:03 +02:00
libretech 753afd6aba 223015c phase 2: 3 bogen-docs (kap1 geschichte+HTML, kap2 netzwerke+CSS, kap3 JS) 
kap1 (~32 slides, vs ist 100): bogen 'wie sind wir vom lochkarten-rechenwerk zum HTML-tag im browser gekommen'. struktur: pioniere-galerie reduziert auf 6 personen (lovelace/hollerith/turing/von-neumann/hopper/hamilton), 4 internet-milestones (1969/1971/1983/1989), HTML-anatomie + semantik. streichungen: pro-person-galerie, IBM/NS-vertiefung, framework-logos (gehört kap3), A11y (verschoben nach kap2). 4 NEU demos: kap-c-01-bogen, internet-timeline, dce-cix-karte, html-tags-cheatsheet.

kap2 (~50 slides, vs ist 91): bogen 'wie reisen bytes von frankfurt nach stuttgart und wie wird HTML hübsch'. sub-A netzwerk 25 slides (IP/MAC/port-tripel, 4 TCP/IP-schichten + encapsulation, DNS-hierarchie, HTTP-request/response, statuscodes 200/301/404/500, HTTP/1.1/2/3, TCP-handshake, 7-schritte-synthese), sub-B CSS+A11y 25 slides (anatomie/selektoren/spezifizität/box-model/flexbox/grid/responsive/farbe + BFSG-EAA-zeitleiste/POUR/semantik+ARIA/kontrast/keyboard/error-states). streichungen: encapsulation-doppelt, bittorrent/P2P, glossar-folien, IPv6-tiefen. 12 NEU demos (HTTP-anatomien, statuscodes, http-versionen, 7-schritte-master, flexbox/grid-axes, flexbox-vs-grid, bfsg-zeitleiste, pour-diagramm, summary).

kap3 (~30 slides, vs ist 49): bogen 'was passiert wenn HTML+CSS da sind und nichts reagiert? JS macht es interaktiv'. variablen/funktionen/schleifen/DOM/events/dark-mode-toggle/to-do/fetch/localStorage. frameworks-vorschau (react/vue/angular) als ÜBERSICHTS-folie statt logo-galerie. JS auf verstehen-niveau (nicht klausurrelevant per vorschlag). streichungen: framework-logo-galerie, doppelte 'was kann JS'-folien, lange hands-on-codes (code in assets/code/). 2 NEU demos: js-was-kann-es, library-vs-framework.

reuse-budget: ~150 von 164 vorhandenen demos werden genutzt (a11y/css-selektoren/network-chain/dns/tcp/encap/js-*).
NEU-budget: 18 demos total (4+12+2).
 2026-05-14 16:35:44 +02:00
libretech 907a936c43 223015c phase 1: lernziele-vorschlag (4 fragen offen) 
ableitung aus den 9 klausur-blöcken A-I + JS-block J:
- block A vom-neumann: 3 lernziele (5-komponenten benennen, stored-program-revolution erklären, pioniere einordnen)
- block B internet: 2 lernziele (ARPANET+WWW geschichte, unterseekabel-physik)
- block C TCP/IP: 4 lernziele (4 schichten benennen, encapsulation, dateneinheiten pro schicht, OSI-vs-TCP/IP)
- block D adress-tripel: 4 lernziele (IP/MAC/port jeweils erklären, zusammenspiel localhost:8080)
- block E DNS+HTTP: 4 lernziele (DNS-lookup-hierarchie+caching, HTTP-request/response lesen, statuscodes 200/301/404/500, HTTP/1.1/2/3 unterscheiden)
- block F browser-synthese: 2 lernziele (7-schritte-ablauf URL→pixel, fehler-szenarien)
- block G HTML: 4 lernziele (tag-struktur, semantische tags, document-struktur, warum semantik wichtig)
- block H CSS: 4 lernziele (box-model, selektoren, kaskade+spezifizität, flexbox vs grid)
- block I a11y: 4 lernziele (BFSG/EAA datum 28.06.2025, WCAG POUR, semantisches HTML + ARIA als ergänzung, drei kriterien alt-text/kontrast/keyboard)
- block J JS: 4 lernziele auf verstehen-niveau (JS-rolle, DOM, events, framework vs library) — NICHT klausurrelevant per vorschlag

eichmaß: fließsatz, default bloom 'verstehen' (nicht 'anwenden'), lebensweltanker.

4 offene fragen: F als pflicht-synthese?, I tiefer als BFSG-niveau?, H4 anwenden oder konzept?, JS-tiefe ausreichend?

danach: bogen pro kapitel, demo-audit (164 demos vorhanden), slides-rewrite (3 kapitel)
 2026-05-14 16:33:41 +02:00
libretech 35e7e89010 dhbw phase 0: fundament-vorschlag + prüfungsleistung-vorschlag (beide zur diskussion) 
dhbw-fundament.md: drei meta-lernziele DHBW-spezifisch:
1. industrie-anschluss-fähigkeit (aktuelle tools, 70% stack-vertrautheit für praxis-phase)
2. selbstständig-lernen-lernen (werkzeug-kompetenz > enzyklopädisches wissen, MDN/ARIA/RFC lesen können)
3. theorie-praxis-verbindung (jedes thema braucht erkennbaren anwendungsfall in typischer praxis-phase)

HdM-werkzeuge (constructive alignment, advance organizer, mayer-12, informatikdidaktik) bleiben gleich. nur lernziel-INHALTE sind DHBW-spezifisch.

3 offene fragen: tool-stack-fokus (node/docker/git stimmt für DHBW karlsruhe?), praxis-phase-realität, soft-skills-block-tiefe

dhbw-pruefungsleistung.md: 8 kompetenzfelder mit 75+10 punkten:
1. projekt-strukturierung+README (10)
2. code-qualität (15)
3. git-hygiene (10) — conventional commits, .gitignore
4. tests (10)
5. docker-containerisierung (10)
6. HTTP/API-design (10)
7. frontend a11y (10, falls UI im projekt)
8. präsentation (5+10 bonus)

punkte-skalierung 80-85 sehr gut bis <33 nicht bestanden

4 offene fragen: frontend-pflicht?, punkte-verteilung-gewichtung?, was-zählt-als-bonus?, AI-code-anteile-reglement?

danach: lernziele ableiten pro 8 kapitel, bogen pro kapitel, slide-rewrites
 2026-05-14 12:11:48 +02:00
libretech 0af8eb4af2 223015c phase 0: klausur-themen-vorschlag (9 blöcke, zur diskussion mit dozent) 
block A vom-neumann-grundlagen (5 komponenten, ENIAC/Mark1/Z3, stored program)
block B internet-entstehung (ARPANET kalter krieg, WWW 1989 berners-lee CERN, unterseekabel)
block C TCP/IP-schichtenmodell (4 schichten, PDU pro schicht, warum schichten, OSI vs TCP/IP)
block D adress-tripel (IP/MAC/port, warum alle drei, localhost:8080 beispiel)
block E DNS+HTTP (lookup-hierarchie, request/response, statuscodes, HTTP/2 + 3)
block F browser-ablauf-synthese (URL → DNS → TCP → TLS → HTTP → HTML → CSS+JS → render, 7 schritte)
block G HTML-grundlagen (tag-struktur, semantische tags, DOCTYPE+head, validität)
block H CSS-grundlagen (box-model, selektoren, kaskade+spezifizität, flexbox vs grid)
block I barrierefreiheit (BFSG/EAA, WCAG POUR, semantisches HTML, ARIA als ergänzung)

vorschlag verlagerungen: JS-hands-ons raus aus klausur (kein block für JS), BitTorrent/P2P/gRPC/GraphQL raus (zu speziell), geschichte-personen-galerie 12→6 reduzieren

4 offene fragen formuliert für dozent-feedback: JS-tiefe? CSS-tiefe? A11y-tiefe? Block-F-status als pflicht-synthese?

danach: lernziele ableiten, bogen pro kapitel, demo-audit (164 vorhanden), slides-rewrite (3 kapitel-files)
 2026-05-14 12:10:33 +02:00
libretech 40a81a65fb 223015b: klausurfolien.md regeneriert (27 slides, auto-extrahiert aus phase-4-rewrite) 2026-05-14 12:09:07 +02:00
libretech e7f19e68fa 223015b phase 4: kap5 slide-MD (filename misleading: 05-vertiefung-offene-fragen.md hält jetzt 'distribution und metadaten'). 20 slides nach bogen (etwas gekürzt von 25) 
struktur:
- 2 intro: kapitel-lead, kap05-eroeffner als advance organizer (foto stuttgart→tokyo mit inhalt+gepäck+weg)
- 8 DISTRIBUTION: lead, CDN-prinzip mit netflix open connect (~15% globaler internet-traffic), wie-im-devtools (selbstlernen), lead REST-APIs, was-ist-API mit schema-diagramm, klausur REST-methods-tabelle (GET/POST/PUT/PATCH/DELETE + CRUD), selbstlernen JSONPlaceholder, JSON-syntax als beispiel
- 7 METADATEN: lead 'was dateien über sich verraten', EXIF-tabelle mit konkreten feldern (kamera/linse/belichtung/GPS/software), klausur mcafee-GPS-fall (festnahme via EXIF in vice-foto 2012), social-media-stripping-übersicht (insta/facebook/whatsapp/email), ID3-tags MP3 mit beispiel hotel-california, klausur tony-blair-fall (PDF-revisionsverlauf 2003 plagiat), lead vendor-lockin, proprietäre-formate (PSD/INDD/.pages/.numbers/DOC), klausur vendor-lockin-risiko-szenario
- 2 selbstlernen + summary: exiftool-aufgabe (GPS am eigenen foto), zusammenfassung distribution+metadaten=inhalt+gepäck+weg

reuse-demos: kap05-eroeffner (zentral)
no neu-demos für kap5 (alle 8 NEU-demos aus bogen durch inline-content ersetzt — CDN als prosa, REST/JSON als code-block, EXIF/ID3/vendor-lockin als tabellen)

klausur-marker (5): REST-methods (10), mcafee-GPS-fall (15), tony-blair-fall (18), vendor-lockin-risiko (20)

streichungen vs altem 04-distribution-apis-zukunft.md (1871 zeilen):
- BitTorrent/P2P-details: eingedampft auf hinweis (klausurirrelevant)
- IPFS: raus (nicht klausurthema, kein berührungspunkt)
- WebSockets, gRPC, GraphQL: raus (zu speziell, gehört in internettechnik 223015c)
- gesamte zukunfts-sektion (AI-kompression, JPEG XL, DNA-storage, 8K-VR, web3, sustainability): raus per D2-lock
- AWS-snowball / sneakernet: raus (klausurirrelevant)

build geht durch
 2026-05-14 12:08:50 +02:00
libretech f41dd51e5c 223015b phase 4: kap4 slide-MD (filename misleading: 04-distribution-apis-zukunft.md hält jetzt 'speicher und schnittstellen'). 23 slides nach bogen (etwas gekürzt von 30 durch zusammenfassen) 
struktur:
- 2 intro: kapitel-lead, kap04-eroeffner als advance organizer (datei-reise pipeline)
- 10 SPEICHER: lead, HDD-mechanik, SSD-flash, klausur HDD-vs-SSD-tabelle (hdd-ssd-comparison reuse), klausur wann-was-matrix, lead filesystems, was-macht-FS, klausur filesystem-landschaft (FAT32/exFAT/NTFS/APFS/ext4/ZFS mit max-dateigröße), lead backup, pixar-story (backup-disaster reuse), klausur 3-2-1-regel, backup-typen-tabelle
- 9 SCHNITTSTELLEN: lead schnittstellen, lead USB-C-drei-achsen (vorbereitung), usb-c-drei-achsen demo, HDMI mit version-tabelle + HDCP-warnung, DisplayPort, Thunderbolt, ethernet-vs-wifi-tabelle, klausur schnittstellen-wahl-matrix
- 2 selbstlernen + summary: backup-konzept + usb-c-kabel-check, zusammenfassung

reuse-demos: kap04-eroeffner, usb-c-drei-achsen (zentrales aha-bild)
reuse-assets: hdd-ssd-comparison.png, backup-disaster.png

klausur-marker (6): HDD-vs-SSD, wann-was-speicher, filesystem-landschaft, 3-2-1-regel, schnittstellen-wahl, (impliziert USB-C-achsen)

streichungen vs altem 03-speichermedien-schnittstellen.md (850 zeilen): doppelte HDD/SSD-vertiefungen entfernt, legacy-kabel-folien raus, latenz-throughput-wiederholungen gekürzt

build geht durch
 2026-05-14 12:04:58 +02:00
libretech 875721c2cd 223015b phase 3: usb-c-drei-achsen demo (kap4 folie 21 zentraler aha-moment). drei spalten: stecker blau (form, USB-C, 24 pins, beidseitig), kabel orange (was elektrisch durchgeht: charge-only 5W / USB 2.0 480 Mbit + 60W / USB 3.2 Gen 2 10 Gbit + 100W / Thunderbolt 4 40 Gbit + 240W), protokoll lila (sprache: USB-PD / USB 2-4 / Thunderbolt 3-4 / DisplayPort Alt / HDMI Alt). konkretes szenario 'warum lädt der laptop nicht' zeigt wie die drei achsen unabhängig versagen können. verdict 'drei achsen, drei unabhängige fragen, drei gründe warum nicht funktioniert. checkfolge: stecker passt → kabel-spec → protokoll-support'. didaktisches kernkonzept: USB-C-verwirrung kommt daher dass studierende denken 'gleicher stecker = gleiche funktion' — falsch 2026-05-14 12:01:09 +02:00
libretech 636e7e021e 223015b phase 4: kap3 slide-MD (filename misleading: 03-speichermedien-schnittstellen.md hält jetzt kap 'inhalte — bild, audio, video'). 40 slides nach bogen (gekürzt von 49 weil JPEG-6-schritte teilweise konsolidiert + weniger marketing-folien) 
struktur:
- 3 intro: cover, 'drei modalitäten ein prinzip', kap03-eroeffner als advance organizer
- 20 BILDER: lead, raster-vs-vektor-demo, klausur-tabelle, lead JPEG, jpeg-pipeline-demo, einzel-folien für jeden schritt (Y'CbCr farbraum mit Barn-yuv reuse, chroma-subsampling mit Common_chroma_ reuse, 8x8+DCT kombiniert, quantisierung detail mit DCT-koeffizienten beispiel, huffman+zigzag+RLE), klausur memo 6 schritte tabelle, JPEG-artefakte felis-katze reuse, lead andere bildformate, übersicht-tabelle PNG/GIF/WebP/AVIF/SVG, klausur wann-welches, patent-politik WebP vs JPEG XL
- 8 AUDIO: lead, sampling-bittiefe recap aus kap1, psychoakustik-grafik reuse für maskierung, bitrate-tabelle 64/128/192/320/1411, audio-format-landschaft WAV/FLAC/MP3/AAC/Opus, klausur format-wahl, selbstlernen spotify-bitrate
- 14 VIDEO: lead, datenflut-rechnung 4K@60fps = 1.49 GB/s, container-ungleich-codec mit container-codec-diagram reuse, container-anatomie text, inter-frame-kompression mit iframe-pframe-diagram reuse, klausur I/P/B-frames, motion-compensation, lead codec-landschaft, H.264 workhorse, H.265 patent-chaos, VP9+AV1 offene antwort, klausur patent-vs-open, 4K-bitrate vs heim-bandbreite tabelle
- 3 selbstlernen + 1 summary: 3-übungen-folie (squoosh/spotify/mediainfo), zusammenfassung-tabelle drei modalitäten

reuse-demos: kap03-eroeffner, raster-vs-vektor, jpeg-pipeline, psychoakustik-grafik
reuse-assets: Barn-yuv.png, Common_chroma_subsampling.png, Felis_silvestris.jpg, container-codec-diagram.png, iframe-pframe-diagram.png

klausur-marker (5 stück, fragmentiert): raster-vs-vektor (8), 6-schritte-memo (18), wann-welches-bildformat (22), audio-format-wahl (30), container-ungleich-codec (34), I/P/B-frames (38), patent-vs-open AV1 (44)

build geht durch
 2026-05-14 11:59:18 +02:00
libretech e85fd456c7 223015b phase 3: jpeg-pipeline demo (kap3 folie 11 'JPEG 6-schritte übersicht'). horizontal pipeline foto roh 36 MB → 6 schritte → JPEG 3.5 MB. schritte 1 farbraum RGB→Y'CbCr (blau lossless), 2 chroma-subsampling Cb&Cr auf ¼ (orange lossy), 3 8×8 blöcke (blau), 4 DCT frequenz-zerlegung (blau), 5 quantisierung hohe-frequenzen-raus (orange lossy), 6 huffman verlustfrei kürzen (blau). legende mit farb-code blau=lossless orange=lossy. verdict 'der quanten-schritt ist das ganze geheimnis von JPEG. schritte 1/3/4/6 verlieren nichts. schritt 2 wirft farb-detail weg. schritt 5 entscheidet wie viel frequenz-detail verloren geht (quality-stufe). niedrige quality = aggressivere schritt-5-quantisierung' 2026-05-14 11:53:37 +02:00
libretech e5b14b798d 223015b phase 3: raster-vs-vektor demo (kap3 folie 5-8 raster vs vektor). zwei-spalten häkchen-vergleich: raster (orange, PNG/JPEG/GIF) zeigt häkchen als 12 pixel-blöcke, zoom 4x macht pixelig, 2112 byte speicher 'pixelig - information ist erschöpft'. vektor (blau, SVG/PDF/schriftarten) zeigt häkchen als polyline-anweisung, zoom 4x bleibt scharf, ~80 byte 'scharf - wird neu berechnet'. verdict 'pixel festgenagelt vs vektor neu berechnet bei zoom. foto→raster (nicht neu berechnen), logo/icon/schrift→vektor (skalierbar ohne verlust)'. ersetzt 3 NEU-demos aus bogen (pixel-gitter, raster-zoom, vektor-skalierung) durch eine konsolidierte vergleichs-demo 2026-05-14 11:52:25 +02:00
libretech 084fb26977 223015b phase 4: kap2 slide-MD (filename misleading: 02-bild-audio-video.md hält jetzt kapitel 'Kompression', wird in cleanup-commit umbenannt zu 02-kompression.md) 
22 slides nach docs/223015b/02-kompression-bogen.md:
1-4 hook: kapitel-lead, 'daten sind unhandlich', foto-größenschock-tabelle, kap02-eroeffner (FLAC vs MP3 wellenform) als advance organizer
5-9 lossless: prinzip 'redundanz raus', RLE-beispiel manuell (AAAAA → 5A 3B 8C 6A), formate ZIP/PNG/FLAC/RAW, LV-tasche-analogie reuse
10-15 lossy: prinzip 'irrelevanz raus', was nimmt mensch nicht wahr, psychoakustik-grafik demo (maskierung), psychovisualität-grafik demo (4:4:4 vs 4:2:0), formate MP3/JPEG/H.264/WebP
16-22: KLAUSUR vergleichstabelle lossless/lossy, JPEG-qualität-vergleich (felis-katze reuse), kompressionsraten-tabelle praxis, entscheidungsmatrix, ZIP-selbstlernen, warum-zip-auf-jpeg-nicht-mehr-komprimiert, summary-kap02 demo

reuse-demos: kap02-eroeffner, psychoakustik-grafik, psychovisualität-grafik, summary-kap02 (alle bereits committed)
reuse-assets: lv-original-vs-fake.jpg, Felis_silvestris_silvestris_small_gradual_decrease_of_quality.jpg

streichungen (gegen alten 02-bild-audio-video.md, der NEU-kap3-inhalt enthielt — content in git history für späteren kap3-write retrievable):
- gesamter alter content zu format-details (JPEG-DCT, MP3-pipeline-details, H.264-frames, AV1) → gehört in NEU kap3 (inhalte bild/audio/video pipelines)

klausur-marker (1 stück): vergleichstabelle lossless vs lossy (folie 16)

build geht durch, 22 slide-separatoren
 2026-05-14 11:49:53 +02:00
libretech 67189df88c 223015b phase 3: summary-kap02 demo (kap2 folie 22 zusammenfassung). zwei spalten: verlustfrei grün (redundanz raus, umkehrbar, RLE/Huffman/Deflate, ZIP/PNG/FLAC/RAW, faktor 2x-5x) vs verlustbehaftet rot (irrelevanz raus, nicht umkehrbar, psychoakustik/psychovisualität, MP3/AAC/JPEG/H.264, faktor 10x-100x) mit key-value rows pro spalte (was passiert, umkehrbar, verfahren/trick, formate, faktor). drunter entscheidungsmatrix mit 6 szenarien mapped zu lossless/lossy (foto-archiv RAW lossless, spotify lossy, code-repo zip lossless, instagram jpeg lossy, studio-master flac lossless, youtube h.264 lossy). verdict 'lossless für archiv und code, lossy für streaming und anzeige. faustregel: werkzeug → lossless, konsum → lossy' 2026-05-14 11:43:43 +02:00
libretech fbd75994d4 223015b phase 3: psychovisualitaet-grafik demo (kap2 folie 14 'luminanz vor chrominanz'). zwei-spalten-vergleich: links 4:4:4 ohne subsampling (Y/Cb/Cr alle 100%, datenmenge 100%) vs rechts 4:2:0 JPEG/H.264 standard (Y 100%, Cb/Cr 25%, datenmenge 50%). beide spalten zeigen identisches sunset-bild — das auge sieht den unterschied nicht weil farb-auflösung nicht so scharf wahrgenommen wird wie helligkeit. verdict 'halbe datenmenge, identisches bild — JPEG/H.264/H.265/WebP reduzieren alle die farb-auflösung auf ein viertel. was wir nicht scharf sehen muss man nicht scharf speichern' 2026-05-14 11:42:30 +02:00
libretech 7ec889d51c 223015b phase 3: psychoakustik-grafik demo (kap2 folie 13 'was MP3 weglässt'). lautstärke-frequenz-chart: orange gestrichelte hörschwelle (in ruhe, niedrig bei 1-4 khz, hoch unten/oben), blauer 'masker' bei 1 khz 90 dB, blauer maskierungs-bereich als kegel um den masker, grüne dots 'bleibt' für töne außerhalb (hörbar), graue dots 'raus' für töne innerhalb des maskierungs-bereichs (unhörbar). achsen 20 hz - 20 khz log + 0 - 100 dB. legende inline. verdict 'MP3 kodiert nur was über der kombinierten schwelle liegt. ~90% daten weg ohne dass mensch im alltag etwas vermisst' 2026-05-14 11:41:12 +02:00
libretech a5ece1c82b 223015b phase 4: kap1 slide-MD komplett umgeschrieben (2196 → 948 zeilen, 120+ → 41 slides, -66%) 
bogen-treu nach docs/223015b/01-datenfundamentale-bogen.md:
- strang 1 (datei → bedeutung): bit/byte/hex notation, ASCII/UTF-8 encoding, magic numbers, KB vs KiB
- pivot 'aber wie kommen die bytes da rein?' mit demo
- strang 2 (welt → byte): sampling, quantisierung, datenrate-formel, CD-rechnung, nyquist, 44,1 kHz herleitung, aliasing in audio+bild
- summary-organizer als zusammenfassung der beiden strangs

eröffner-strategie: drei-dateien-demo zeigt 'foto/sprachnachricht/PDF außen verschieden, innen dieselbe sprache (byte)' direkt nach der lead-folie

klausur-marker (fragmentiert wie konvention): hex-im-alltag, byte-zählen-rechnung, magic-numbers, KB-vs-KiB, dateneinheiten, datenrate-formel, CD-rechnung, nyquist — total 8 klausur-folien im fluss verteilt

reuse-demos (alle bereits vorhanden): byte-fuer-byte, why-8-bit, byte-nibble-hex, hex-dec-table, byte-flow, three-views, ascii-table-colored, hex-code, 8bit-P-character, matrix-code, druckwelle, samplerate.webp, quantized-image-8-colors

streichungen (siehe bogen-streichungsliste):
- datenwachstum/zettabyte (gehört kap 0)
- bandbreite-mathematik-folien (gehört kap 4)
- upload flaschenhals (gehört kap 4)
- kompressionsraten-tabelle + album-MB + artemis (gehört kap 2)
- verlustfrei/verlustbehaftete kompression (gehört kap 2)
- shannon-entropy-vertiefung (klausurirrelevant)
- bit/byte mbit/s verwechslung (gehört kap 4)
- AI-content-2025 (zukunfts-thema, per D2 raus)
- bilder pixel-berechnungen (gehört kap 3)
- analoge/digitale medien folien + napster/MP3 historie (gehört kap 2)

speaker-notes durchgehend ausformuliert (lecturer-voice, kein bullet-vorlesen), folientext minimiert, prosa als HTML-comment für vortrag
 2026-05-14 11:36:55 +02:00
libretech 9d527aed7a 223015b phase 3: summary-organizer demo (kap1 folie 40 zusammenfassung). spiegelt pivot-signal-zu-byte aber mit beiden strangs ausformuliert: welt → byte (pink, links): sampling-rate, bittiefe, datenrate-formel, nyquist 2f, aliasing+moiré, 44.1 khz; byte → bedeutung (cyan, rechts): bit/byte/hex, 8 bit = 256 zustände, ASCII+UTF-8, magic number, KB vs KiB, hex im alltag. mitte: datei mit hex-bytes als verbindungsstück. verdict 'eine datei ist kein mysterium — eine reihe von zahlen mit zwei geschichten dran: eine erzählt woher die zahlen kommen, die andere was sie bedeuten. beide kennst du jetzt'. kap1-demos jetzt komplett (6 NEU: drei-dateien, kb-vs-kib, pivot, nyquist, aliasing-paar, summary) 2026-05-14 11:29:32 +02:00
libretech a12d9d2146 223015b phase 3: aliasing-paar demo (kap1 folie 37 'aliasing in audio + bild parallel'). zwei-spalten audio-orange / bild-blau, jeweils mit original (schnelle welle / dichte streifen) vs gesampelt (alias-welle mit faded original / breite moiré-bänder). audio: 18 khz → 22 khz sampling → 4 khz brumm. bild: 93 feine linien → 5 breite bänder. ear-eye-headlines: 'was das ohr hört' bzw 'was das auge sieht' machen pädagogisch klar dass es um wahrnehmung geht. verdict 'aliasing kennt keine modalität — es ist ein mathematischer fehler, kein technischer. egal ob ton/bild/video/radar/gps — sampling immer doppelt so dicht wie signal'. moiré via svg linear-gradient gefakt (echte moiré-darstellung in svg unmöglich da chromium subpixel-präzise rendert) 2026-05-14 11:27:40 +02:00
libretech fc941c6ac3 223015b phase 3: nyquist-diagram demo (kap1 folie 35 nyquist-theorem). drei vergleichs-cases mit derselben grundwelle (8 cycles über 880px svg): (1) aliasing rot f_s=0.9f, 8 sample-punkte sitzen mathematisch korrekt auf der welle und ergeben verbunden eine ganz andere langsamere kurve, (2) nyquist-grenze gelb f_s=2f, 16 punkte exakt auf peak/tal und zigzag-verbindung zeigt mathematisches minimum, (3) überabtastung grün f_s=8f mit 64 dichten punkten die der welle treu folgen wie eine CD. punkte mit python berechnet (y = 70 - 45*sin(2π*(x-20)/105) für jede sample-position). verdict erklärt 44,1 khz: ohr hört bis 20 khz, 2x20=40 plus 4,1 sicherheitsmarge 2026-05-14 11:25:50 +02:00
libretech 478966903a 223015b phase 3: pivot-signal-zu-byte demo (kap1 folie 27 strang-wechsel). 5-spalten layout welt → sampling+quantisierung (pink 'jetzt dran') → datei (dark center mit hex-bytes) → notation/encoding/format (grau durchgestrichen 'schon durch') → mensch. verdict 'die datei ist die mitte. beide wege führen durch sie hindurch' + erklärung rechts=gelernt links=jetzt. didaktisch: macht den strang-wechsel explizit sichtbar damit studierende nicht den faden verlieren wenn das thema von 'datei → bedeutung' zu 'welt → datei' kippt 2026-05-14 11:17:57 +02:00
libretech de166cf27d 223015b phase 3: kb-vs-kib demo (kap1 folie 25 'KB vs KiB — warum 931 GB?'). zwei panel-vergleich: marketing (1 TB blau, 10^12 byte) vs betriebssystem (931 GB orange, eigentlich 931 GiB), mit pfeil 'geteilt durch 2^30' dazwischen. math-box mit rechnung 10^12 ÷ 2^30 ≈ 931,3 GiB, plus zeile 'etikett: GB · anzeige: GB · bedeutung: zwei verschiedene dinge'. verdict 'es fehlt nichts. es wird nur in zwei sprachen gezählt' mit code-tag-erklärung GiB/GB. lebensweltanker: 1-TB-SSD-etikett, kein emoji 2026-05-14 11:16:43 +02:00
libretech 42ca2e5c83 223015b phase 3: drei-dateien demo (kap1 folie 3 'drei dateien — dasselbe innenleben'). drei spalten: foto/sprachnachricht/PDF mit jeweils thumbnail (svg sunset/waveform/document) + hex-strip mit erstem byte + magic-number in farbe markiert (89 50 4E 47 für PNG, 49 44 33 für ID3, 25 50 44 46 für %PDF) + ascii-übersetzung. verdict 'drei verschiedene dinge — eine sprache: jede datei beginnt mit ihrer visitenkarte (magic number)'. stilreferenz wie kap03-eroeffner (3-spalten-cards mit farbigen rahmen), keine emojis 2026-05-14 11:14:57 +02:00
libretech 1a79289349 223015b phase 3b: kap05-eroeffner (distribution+metadaten als 3-schichten-foto-szenario). smartphone-foto stuttgart→tokyo zeigt: inhalt (svg sunset-city), gepäck (echte EXIF mit kamera/belichtung/zeitstempel/GPS-koordinaten königstraße in pink/software/farbprofil), weg (route-strip mit DNS→TLS→CDN-edge-tokyo + HTTP/3 200 OK headers). drei verschiedene visuelle stile pro schicht (panel-grid + horizontaler strip), nicht pipeline wie kap04. GPS-koords als privacy-anker (mcafee-fall vorbereiten). verdict: eine datei = inhalt + gepäck + weg, drei schichten, eine datei. window 1280x860, no emojis 2026-05-14 11:12:06 +02:00
libretech 68c18ea631 223015b phase 3b: kap04-eroeffner committed (datei-reise als pipeline ssd→laptop→gpu→monitor→auge mit echten bandbreiten 3200 mb/s usb4, 7000 mb/s pcie 4.0, 2200 mb/s hdmi 2.1 und 4k-trailer 1.2 gb szenario). zeigt: speicher und schnittstelle sind keine zwei themen sondern zwei seiten desselben engpasses. rohbild-pixelstrom mit 1.4 gb/s niemals als datei. layout: stationen mit farbcodierten rahmen + links mit raten+protokoll dazwischen, scenario-box mit erklärung, verdict-pinkbox mit kernsatz 2026-05-14 11:08:16 +02:00
libretech f573e9d78b 223015b phase 3b: 2 konkrete eröffner-demos (statt schablone) + STATUS.md für branch-fortsetzung. kap02-eroeffner: FLAC vs MP3-128 mit synth-svg-wellenformen, echten dateigrößen (5.3 MB vs 0.48 MB), bitrate-vergleich, verdict-frage 'hört man den unterschied'. kap03-eroeffner: 3×3-tabelle bild/audio/video × roh/lossy-modern/lossy-aggressiv mit echten zahlen (foto 36MB→4MB→800KB, audio 5.3MB→720KB→240KB, video 12GB→94MB→45MB) + visuelle größenbalken + verdict mit reduktionsfaktoren ×45/×22/×270 und drei verschiedenen wahrnehmungs-tricks pro modalität. kap4+5 eröffner noch offen, status-doc beschreibt nächste schritte für branch-fortsetzung von unterwegs 2026-05-14 10:44:41 +02:00
libretech 1c8185ba10 223015b: 5 advance organizers verworfen — plump, gleichförmig, nicht erkenntnisgewinnend (alle nach gleicher schablone: header → topic-boxen → konvergenz-pinkbox, also nur kapitel-titel in diagramm-form statt struktur/spannung sichtbar machen). zusätzlich emoji-icons in mehreren demos (verstoß gegen no-emoji-konvention). neue strategie: pro kapitel eigene konkrete eröffner-grafik (nicht schablone), z.B. wellenform-vergleich FLAC/MP3 für kap2, JPEG-degradation-paar für kap3, datei-reise-pfad mit datenraten für kap4, foto-mit-EXIF-overlay für kap5. kap1 nutzt byte-fuer-byte als eröffner (kein zusätzliches organizer-bild nötig) 2026-05-14 03:19:06 +02:00
libretech ff21ce9d47 223015b phase 3a: 5 advance organizers gebaut (eröffnungs-folie pro kapitel) — kap01 welt→datei→mensch mit signal-rein/bedeutung-raus split, kap02 lossless vs lossy mit konvergenz zu wann-was, kap03 drei modalitäten (bild/audio/video) unter wahrnehmungs-lücken mit patent-politik-fußnote, kap04 wohnen-vs-reisen (speicher/schnittstellen) mit anwendungs-wahl, kap05 weg-vs-gepäck (distribution/metadaten) mit 'aufmerksamkeit für das was wir nicht sehen' als roter faden. stil-vorlage three-views.html + byte-fuer-byte.html (light-bg, colored-poles, pink-konvergenz, mono-code-blöcke). pro html: chromium-headless render 1280x680-800px, png visuell inspiziert 2026-05-14 03:02:43 +02:00
libretech bf2ca0bb87 223015b docs: 'Hands-On' → 'Selbstlernen' in allen 5 bogen-docs (pädagogisch konventionsgerecht statt industrie-jargon), 'Klausur-Recap'-folie am ende von kap 3 gestrichen (verletzte das prinzip der klausur-fragmentation), klausur-block-terminologie im lernziel-doc explizit als thematischer lernziel-cluster geklärt (block = klausurfragen-konvention, klausur-folien bleiben verstreut im vorlesungsfluss) 2026-05-14 02:37:33 +02:00
libretech bb943f84b9 223015b phase 0+1+2: klausur-themen-tableau (9 blöcke nach D1-D4-lock: alles drin, zukunft raus, JPEG volle DCT-tiefe, granular), 33 operative lernziele (fließsatz, default verstehen/unterscheiden, kein bloom-tag, alltagsanker wo sinnvoll, L1.5 KB/KiB nicht mehr apply sondern einordnen), 5 kapitel-bögen mit advance organizers und folien-skeletten (kap1 datenfundamentale ~40 slides, kap2 kompression ~22, kap3 inhalte ~50, kap4 speicher/schnittstellen ~30, kap5 distribution/metadaten ~25), pro bogen: bedienter klausur-block + lernziel-bezug pro folie + berührungspunkt + reuse/neu-markierung der visualisierungen + streichungsliste mit begründungen + hands-on 2026-05-14 02:27:19 +02:00
libretech f35789d943 223015b 01-grundlagen: encoding+hex strukturiert — encoding-strang (problem→ASCII→unicode→byte zählen) und darstellungs-strang (WTF!?→8-bit→hex→demos) getrennt statt verschachtelt, 3 brücken-folien (ASCII reicht für englisch / byte für byte als advance organizer / hex ist überall), byte-für-byte demo (3 fenster bin/hex/text mit binärdatei-vs-textdatei-marker), lv-original-vs-fake bild ersetzt leere folie zwischen lossless-titles, 'besser erkennen' → 'besser erkennbar', singular Byte plural in eigener brücke korrigiert 2026-05-13 22:53:45 +02:00
libretech 35f3d2c492 didaktisches fundament: CLAUDE.md + README.md + AGENTS.md mit drei meta-lernzielen (gelernte hilflosigkeit ablegen, berührungspunkte schaffen, gefühl für technik), constructive alignment (biggs), advance organizer (ausubel), mayer 12-prinzipien, informatikdidaktik-referenz (magenheim/romeike/hartmann), validierungs-checkliste pro folie, anti-pattern-liste (bullet-vorlesen, motivations-cringe, theorie-first, folien-patchen). AGENTS.md von HdM-only auf uni-slides (3 kurse, unified make-pattern, port 1312, deploy tengo@tuttle, korrekte pfade) aktualisiert. .gitignore um assets-original/ ergänzt (image-backups bleiben lokal) 2026-05-13 22:53:29 +02:00
libretech 82407679b5 dhbw 01_web_eng: ecmascript-history slide (ecma international, ECMA-262, ES15, kompat-tabelle), html-anatomie ascii-diagramm (opening/closing tag, content, element, attribute), css-anatomie ascii-annotation (#description-beispiel mit pfeilen auf property+value), framework-logos als bg right:25% auf react/vue/svelte/astro/webpack/vite/parcel slides, a11y-test-slide layout fix (image inline statt bg-right wie hdm) 2026-05-07 17:21:25 +02:00
libretech c242e0f947 dhbw inhalt: vorlesungsplan tabelle → cards-grid (4×3, milestones hervorgehoben), über-mich logos-collage, internet-101 erweitert (timeline + arpanet-bg + WWW-1989 + mosaic-bg + unterseekabel + heute + five-eyes), a11y/WCAG-block (~12 slides nach native html, vor css), direkt-install slide gesplittet (szenario / symptome), code-block-color → #f48fb1 (alle 8 files), section.invert h2 #f48fb1 für barrierefreiheit, ressourcen-slide auf 01-05 nach cover, alle emojis raus (✓✗⚠️🍞🥬🏆 + ↔), ESM statt CJS in 03/04, librete.ch domain, kleinere fixes (chromium statt chrome, CLI aufgelöst, JetBrains edu, hoppscotch, SOLID-abk., node 24 LTS, brew/winget/scoop/choco-links, vim/neovim/emacs editoren, herzlich willkommen) 2026-05-07 17:09:04 +02:00
libretech 52312f1cb8 dhbw assets: arpanet 1969 + arpanet 90er, mosaic-screenshot, unterseekabel-karte für internet-101 + 5 a11y-demos (kontrast, fokus, error, semantik, keyboard) für barrierefreiheit-block 2026-05-07 17:08:46 +02:00
libretech e2bab75e60 dhbw assets: 13 logos (uni-stuttgart, dhbw, klett, pons, langenscheidt, nextmarkets, re-cinq, experience-one, becklyn, caesargustav) + collage.png für über-mich-slide, dark-varianten der weiß-auf-transparent-logos 2026-05-07 15:29:45 +02:00
libretech b242c7b4e6 223015c 02 + dhbw 01: klausurfolien markiert, prosa-sätze bei allen tabellen, layout-fixes 
223015c/02:
- glossar landkarte: klausur, prosa, reihenfolge (host→client→server→req→res→protokoll), tcp/http als beispiel
- glossar adressen/daten/eigenschaften/protokolle: prosa-sätze
- tcp/ip-modell: nichtssagenden satz ersetzt
- dateneinheiten: merkhilfe durch prosa ersetzt
- osi vs tcp/ip: bg right statt h:440, prosa statt einzeiler
- port: tabelle→liste, prosa statt bullets
- ip vs mac vs port: prosa
- tcp vs udp, http-methoden, status-codes, einheiten: prosa
- selektoren id + farben: klausur markiert
- farben: mdn-link, prosa-satz

dhbw/01:
- farben: prosa-satz synchronisiert
- über-mich: collage-bild hinzugefügt
 2026-05-07 15:21:40 +02:00
libretech 46b297ada4 dhbw 01_web_eng: direkt-install slide ausgebaut (szenario, symptome), du-formen entfernt (sachlich/akademisch), editor-liste vim/neovim/emacs (helix raus), git inline erklärt 2026-05-07 14:48:33 +02:00
libretech 8dabc4e570 dhbw farb-schema: himbeer (wie hdm 223015c) — highlight #d63384, h1 #a02060, h2 #1f2937 (#f48fb1 auf invert für barrierearmut), pre/code #0f0f23/#d63384, dimmed #4a4a6a, invert-bg #001520→#000; herzlich willkommen statt willkommen; git kurz erklärt 2026-05-07 14:41:07 +02:00
libretech 6b33a79d9c dhbw 01_web_eng: über-mich aktualisiert (systems & platform engineer, dhbw-mail), onboarding-block (werkzeuge/os, node-install pro os mit lts node 24, versionsmanager, alternative runtimes deno/bun, editor, browser-devtools, http-clients, git setup, projekt-skeleton), html-block aus hdm (was ist html, anatomie, metadaten, tags+attribute, native html), css-block aus hdm (selektoren, spezifität, box-modell, farben, einheiten, pseudo-klassen, responsive), mandala-PNG mit erklärungs-folie, font 1.7→1.4rem, semesterplan + prüfungsleistung details, ascii-browser-request raus (PNG bleibt), kleine fixes (chromium statt chrome, cli aufgelöst, brew-link, jetbrains edu, hoppscotch, solid abkürzungen aufgelöst) 2026-05-07 14:21:19 +02:00
libretech a07ab0a3d1 dhbw 02_css_extended: native html-block + basic-selektoren + basic-pseudoclasses + specificity raus (jetzt in 01), einheitliche cover (sitzung 2 — html & css frameworks), font 1.7→1.4rem, fragen-slide raus 2026-05-07 14:21:00 +02:00
libretech 5c25b14a59 dhbw 03-04 (node.js basics+advanced): cjs → esm in code-beispielen (import + node:-präfix), legacy-cjs als vergleichsbeispiel markiert, einheitliche cover, font 1.7→1.4rem, fragen-slides raus, __dirname/__filename via import.meta.url 2026-05-07 14:20:46 +02:00
libretech 79fbe046d9 dhbw 05-08 (testing/typescript/docker/best-practices): einheitliche cover (web engineering / dhbw stuttgart / sose 2026 · sitzung x), font 1.7→1.4rem, fragen+hausaufgabe-slides raus (kein klausur an dhbw) 2026-05-07 14:20:35 +02:00
libretech 4b267bcb8b dhbw assets: html/css demo-pngs aus hdm kopiert (20 files) + web-engineering-mandala.png 2026-05-07 14:20:20 +02:00