KI verstehen – von den Anfängen bis zu Agenten-Schwärmen

CANCOM-Vortragsdeck im HTML-Format. Ein File, kein Build, kein Bundler – per Doppelklick lauffähig, per Mail/Teams/SharePoint verteilbar.

Dateien

Datei	Zweck
ki-verstehen.html	Das eigentliche Deck. 44 Slides, 1920×1080, per E editierbar.
config.html	Präsentations-Konfigurator: Slides für den Vortrag ein-/ausblenden.
slides-manifest.js	Gemeinsame Titel-/Reihenfolge-Liste, von Deck und Konfigurator geladen.
Sprecher.md	Sprecherkarten je Folie – nicht Teil des Docker-Images.
font-vorschau.html	Vergleichsseite für Headline-Schriften (Rückblick auf die Font-Auswahl).
DESIGN.md	Design-System: Tokens, Typografie, Layout, Motion – verbindlich für Umbauten.
PATTERNS.md	Copy-Paste-Bausteine für einzelne Slide-Typen.
deck-template.html	Leerer Startpunkt für ein neues Deck im selben Look.
Dockerfile, docker-compose.yml, nginx.conf	Deck als Webdienst ausliefern (siehe unten).

Präsentieren

open ki-verstehen.html

• → / Leertaste / Mausrad / Swipe: nächste Slide · ←: vorherige · Home/End: Anfang/Ende
• E: Live-Editor (Text direkt auf der Bühne korrigieren, z. B. bei Kundenwunsch „anderes Wort")
• C oder das ⚙-Symbol oben links (Hotzone): zum Konfigurator
• 🔈-Symbol unten rechts auf der Titelfolie: erzeugter Ambient-Sound (Web Audio, keine externe Datei)

Slides für einen Vortrag auswählen

config.html öffnen, Häkchen setzen/entfernen, auf „Speichern & zur Präsentation" klicken. Die Auswahl wird als URL-Parameter ans Deck übergeben (zuverlässig auch bei file://, wo localStorage zwischen einzelnen HTML-Dateien nicht immer geteilt wird – v. a. Safari). Titelfolie und Closing sind fest verankert und lassen sich nicht abwählen.

Aufbau des Decks (36 Slides in 7 Kapiteln)

1. Titel + Hook (Handzeichen-Frage)
2. Kapitel 1 · Wie alles begann – Zeitstrahl, verschachtelte Kreise (KI/ML/DL/GenAI), wie eine Maschine lernt, ANI vs. AGI
3. Kapitel 2 · Wie ein LLM funktioniert – Mitmach-Spiel „Alle meine Entchen …", Autovervollständigung, Token & Parameter, Reasoning-Modelle, System-/User-Prompt & Context, Kontext-Limit & Compact
4. Kapitel 3 · Die Modell-Landschaft – woher das Wissen kommt, Anbieter-Übersicht, Geschäftsmodelle, SEO vs. GEO, wo man Modelle findet
5. Kapitel 4 · Vom Chatbot zum Agenten – Eskalationsleiter, MCP
6. Kapitel 5 · Die Grenzen der KI – Schwächen-Übersicht, Halluzination im Detail
7. Kapitel 6 · Sicherheit im Umgang mit KI – Prompt Injection, weitere Security-Punkte
8. Kapitel 7 · Praxis & Ausblick – Tipps, Ausblick, Glossar, Closing

Begriffe wie Token, LLM, MCP, GPT, ANI/AGI u. a. sind im Fließtext anklickbar (gepunktete Unterstreichung) und öffnen eine kurze Erklärung.

Als Webdienst betreiben (Docker)

Statt die Datei zu verteilen, kann das Deck auch als kleiner Webdienst laufen – praktisch für Präsentationsrechner, Intranet oder Teilnehmer-Zugriff im Nachgang.

docker compose up -d --build

Danach: http://localhost:8080 → öffnet direkt das Deck, …/config.html den Konfigurator.

docker compose down          # stoppen
docker compose logs -f deck  # Logs ansehen

Ein schlanker nginx:alpine liefert die statischen Dateien aus (gzip halbiert die Übertragung auf ~44 KB). Port lässt sich in docker-compose.yml ändern.

Was bewusst NICHT im Image liegt: Sprecher.md (Sprechernotizen!), DESIGN.md, PATTERNS.md, deck-template.html und die lokalen Backup-Dateien. Das Dockerfile kopiert einzelne Dateien statt COPY . . – beim Ergänzen neuer Assets muss die Liste im Dockerfile mitgepflegt werden, sonst fehlen sie im Container.

Zum Weiterbauen am Deck ohne Rebuild: die volumes:-Zeilen in docker-compose.yml einkommentieren, dann werden die Dateien live aus dem Projektordner gelesen.

Nebeneffekt gegenüber file://: Über http://localhost gilt die Seite als sicherer Kontext – der 💾-Button im Edit-Modus kann dort direkt in den gewählten Ordner speichern.

Neues Deck bauen

Siehe DESIGN.md Abschnitt 8 und PATTERNS.md für Copy-Paste-Bausteine. deck-template.html kopieren, umbenennen, Slides zusammenstellen.