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
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
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
libretech
96362e2959
dhbw: import original web-eng inhalte (testing, typescript, docker, best practices) + framework-übersicht, native html, prüfungsleistung-detail, sose 2026
2026-05-06 18:28:20 +02:00
libretech
73be35ccb8
dhbw: semesterplan sose 2026 (11 sitzungen) + deploy-path fix (kein doppeltes dhbw)
2026-05-06 17:03:44 +02:00
libretech
841a7ced76
dhbw: neuer kurs technik I — 4 kapitel + demo assets
2026-05-04 20:05:46 +02:00
libretech
5c419c9ed1
gendering: fehlende person-substantive in beiden kursen
...
- Nutzer/User -> Nutzende
- Endnutzer -> Endnutzende
- Teilnehmer -> Teilnehmende
- Programmierer/Entwickler -> Programmierende/Entwickelnde
- Web-Entwickler -> Web-Entwickelnde
- Tastatur-Nutzer -> Tastatur-Nutzende
- Benutzer -> Nutzende
- Konsumenten -> KonsumentInnen
- Künstler -> KünstlerInnen
- Autor -> AutorIn
- Fotografen -> FotografInnen
- Kunde -> KundIn
ausgenommen: code-identifiers (User, type User, /users/),
Sender/Empfänger (network protocol), Sawyer (konkrete person),
Hersteller/Betreiber (organisations-rolle).
2026-04-27 17:27:19 +02:00
libretech
a955a7636a
selbstlernen hex links: absolute urls fuer PDF-klick
...
PDF rendert relative pfade als nicht-klickbar. absolute https-urls
zu librete.ch/hdm/223015b/materials/hex1-5 funktionieren beide
in HTML- und PDF-export.
2026-04-27 16:29:09 +02:00
libretech
c978842812
c01 Web-Zugänglichkeit Vertiefung: keine klausur, kein bg
...
- _class: 'erklaerung klausur' -> _class: erklaerung
- _backgroundColor: #fce4ec entfernt
ist nur eine vertiefung, keine klausur-folie.
2026-04-27 16:10:01 +02:00
libretech
61468d2d3a
erklaerung: bg entfernen — soll vertiefung sein, nicht klausur
...
bug: 'section.erklaerung' hatte '@media print { background }' rule (alle 5
files), was im PDF rosa/blau-klausur-bg setzte. HTML hatte (in c) keinen
bg oder (in b) gradient bg. ergebnis: HTML zeigt erklaerung anders als PDF
— PDF sah aus wie klausurfolie obwohl es nur eine vertiefung ist.
fix: erklaerung behaelt nur 'font-size: 1.1rem' + h1 color/size + table
font-size. KEIN background mehr — weder screen noch print. visuell
unterschieden durch h1-color und font-size, nicht durch bg-farbe.
betroffen: b01, b02, b03, c01, c02 (alle files mit section.erklaerung).
2026-04-27 15:04:45 +02:00
libretech
a3c3e259b4
b01: kaputte html-comments fixen (_class directive nicht im comment-prefix)
...
L603/L850: '<!-- _class: erklaerung' ohne '-->' und ' _class:' ohne '<!--'
in proper '<!--\n_class:\n-->' form gebracht. inhalt bleibt versteckt
wie vorher beabsichtigt, syntax aber jetzt sauber.
2026-04-27 01:26:31 +02:00
libretech
ac39f2b746
klausurfragen pdf fix: pre blocks waren schwarz auf schwarz
...
bug: 'pre code { color: inherit }' fiel auf section --color-foreground (#1a1a2e)
zurueck weil 'pre' selbst keine 'color' hatte. multi-line code-bloecke
unsichtbar (nur hljs-syntax-spans hatten farbe, rest = dark on dark).
fix: 'pre { color: #f8f8f8 }' setzen + inline 'code' und hljs/non-hljs
selectoren analog zu chapter-styles ergaenzt.
verified: c klausurfragen page 60 (G2 mobile-first CSS pre-block) jetzt
voll lesbar.
2026-04-27 00:53:48 +02:00
libretech
19ca5ad3e0
223015b selbstlernen hex files: 5 statt 3 dateien, link wtf->hex, pfad ./materials
...
- referenzen wtf1/2/3 -> hex1/2/3 (dateinamen tatsächlich)
- hex4 (DOCX) und hex5 (ZIP) ergänzt — alle 5 vorhandenen materialien sichtbar
- pfad ../materials -> ./materials (build/223015b/materials struktur)
2026-04-26 22:05:48 +02:00
libretech
aea96edd09
bit/byte/hex folien sync beide kurse + neue viz embeds
...
223015c (internettechnik):
- byte-aufbau ausgebaut (build-up tabelle 0..127..255 wie b)
- neue slides: why-8-bit, byte-flow, three-views nach byte-nibble-hex/hex-dec-table
223015b (dateiformate):
- byte-nibble-hex slide eingebaut
- neue slides: why-8-bit (vor hex-lead), hex-dec-table, byte-flow, three-views
- wo-begegnet-hex tabelle (CSS, MAC, fehlercodes, speicher, unicode)
- bit-vs-byte verwirrung (Mbit/s vs MB/s)
konvention: 'Byte' und 'Bit' invariant, kein plural-s
2026-04-26 22:05:32 +02:00
libretech
a000cdbc8d
223015b: neuauflage ascii-tabelle + sync byte-nibble-hex/hex-dec-table aus c
...
- ascii-table.html: 16x8 grid, kategorie-gefärbt (ctrl/digit/upper/lower/punct/del)
hex+dezimal pro zelle, legende, beispiel-zeile
- byte-nibble-hex + hex-dec-table aus 223015c kopiert für slide-parität
2026-04-26 22:04:36 +02:00
libretech
1d29a9f03c
neue viz: three-views, why-8-bit, byte-flow (beide kurse)
...
- three-views.html: bitstream/hex/bedeutung — gleiche bytes drei perspektiven (PNG-header)
- why-8-bit.html: speicher-adressierung byteweise, halbe byte unmöglich
- byte-flow.html: 1 byte = 8 bit = 2 hex = 1 ASCII (Hello, World!) jeder rahmen ein byte
- screenshots in beide assets/demos ordner
2026-04-26 22:04:28 +02:00
libretech
24d7e5f660
byte-nibble-hex visualisierung: html-demo + slide #50
...
neue stufen-visualisierung (byte → 2 nibbles → 2 hex-ziffern → 4D/77/M)
ersetzt ascii-platzhalter durch sauberes html/css-demo + bg-fit png
2026-04-24 09:44:59 +02:00
libretech
a941b81d37
add codecrispies links to html examples
2026-04-24 09:19:26 +02:00
libretech
7bbfa74f1b
geschichte-folien: kathleen booth titel, fortran raus, von-neumann ausgebaut
...
- assembler-folie als kathleen booth (1922-2022) mit motorola-6800-asm bild
- fortran-folie entfernt
- von-neumann 5 komponenten: heute-spalte, kernprinzip, bus-details
- palantir/signal-bild-folie raus
- "bauen, einsetzen und regulieren"
- "bit & byte" statt "bits & bytes", 2⁸ ausgeschrieben
- perceivable-folie: texte/nicht-text umstrukturiert
2026-04-24 01:01:27 +02:00