23. September 2026•10 slides · ~7 min

Interactive Presentations: Unsere Slide-as-Code Engine

Motivation, Content-Strategie und technische Umsetzung interaktiver Web-Keynotes mit Neural-Voiceover

#astro #agentic-ai #software-architecture #web-development #typescript #content-engineering #ux-design #open-source

Loading presentation...

23. September 2026

Interactive Presentations

Motivation, Content-Strategie und Architektur web-nativer Keynotes mit Neural-Voiceover

Dr. Georg Hackenberg

Professor für Informatik & IndustriesystemeFH Oberösterreich · Campus Wels

https://hackenberg.tech

02 / 10

Agenda & Leitfaden

Gliederung des Architektur-Briefings in 5 didaktische Themenblöcke

Motivation & Dilemma

Warum statische PDF-Downloads und Fremd-iFrames die Wissensvermittlung im Web blockieren.

Content-Ökosystem

Wie Präsentationen bestehende Wissensformate nahtlos ergänzen.

Content-Strategie

Holistisches Repurposing von Forschungsdaten bis zur Zitationsfähigkeit in generativen Modellen.

Evaluierte Optionen

Detaillierte Analyse, warum gängige Cloud-Embeds und Entwickler-Tools unzureichend waren.

Custom Engine

Astro SSG, adaptive Vektorbühne und akustische Synchronisation mit Qualitätsgates.

03 / 10

Motivation: Das Dilemma digitaler Vorträge

Warum statische PDF-Dateien und Fremd-iFrames die Wissensvermittlung im Web zerstören

Status Quo: Das PDF- & iFrame-Silo

„Folien ohne gesprochene Worte sind wie ein Notenblatt ohne Orchester.“

Fehlende auditive Ebene
Stumme Folien transportieren nur Bruchteile des eigentlichen Vortragskontexts.
Unsichtbar für Suchmaschinen
PDFs und iFrame-Sandboxes sperren KI- und Web-Crawler komplett aus.
Miserable mobile Usability
Starre Pixelformate erzwingen ständiges Zoomen und horizontales Scrollen.

Die Web-Native Vision

Slide-as-Code Paradigma

Vollwertige Keynotes als erstklassige Bürger im Web.

Multimodale Immersion
Pixelgenaue Vektorbühne synchronisiert mit neuronaler Sprachausgabe.
Vollständige Zugänglichkeit
100 % semantisches HTML mit Bildschirmleser-Unterstützung und Barrierefreiheit.
Offene Datenhoheit
Self-Hosted ohne externe Tracker, mit voller Daten- und Plattform-Hoheit.

04 / 10

Das Content-Ökosystem der Website

Wie interaktive Präsentationen die Brücke zwischen Forschung, Lehre und Praxis schlagen

1. Papers & Kurse

Fokus: Peer-reviewed Forschung & Vorlesungen.

Formale Tiefe
Begutachtete Veröffentlichungen in Fachjournals.
Semesterdidaktik
Skripte und didaktische Semesterübungen.

2. Blog Posts

Fokus: Technische Deep Dives & Praxisberichte.

Architektur-Details
Analysen zu Algorithmen, Frameworks und Standards.
Schritt-für-Schritt Code
Vollständige praxiserprobte Code-Beispiele.

3. Projects & Demos

Fokus: Lauffähige Software & Shader-Labore.

Lauffähiger Code
Freie Open-Source Repositories und Blueprints.
Visuelle Demonstratoren
Interaktive WebGL-Shader und Graph-Engines.

4. Interactive Presentations

Fokus: Multimodale Synthese & Executive Briefings.

Maximale Informationsdichte
Fokussierte Verdichtung auf 15 bis 30 Folien.
Hören & Sehen synchron
Nahtlose direkte Audio-Führung beim Betrachten.

05 / 10

Übergeordnete Content-Strategie

Holistisches Wissens-Repurposing von der Forschung bis zur KI-Zitationsfähigkeit

Forschung & Code

Akademische Entdeckung und originäre Forschungsdaten aus industrieller Entwicklung.

Akademische Entdeckung und {cue:hl-repurpose-repo}originäre Forschungsdaten aus industrieller Entwicklung{/cue}.

Interaktive Keynote

Kompakte multimediale Essenz mit akustisch synchronisierter Vektorbühne.

Kompakte multimediale Essenz mit {cue:hl-repurpose-keynote}akustisch synchronisierter Vektorbühne{/cue}.

Blog Deep Dive

Umfassender Erfahrungsbericht mit vollständigem Quellcode und Benchmark-Analysen.

Umfassender Erfahrungsbericht mit {cue:hl-repurpose-deepdive}vollständigem Quellcode und Benchmark-Analysen{/cue}.

Wissensgraph & AIO

Semantische Verknüpfung aller Artefakte für maximale Zitationsfähigkeit in Sprachmodellen.

Semantische Verknüpfung aller Artefakte für {cue:hl-repurpose-graph}maximale Zitationsfähigkeit in Sprachmodellen{/cue}.

06 / 10

Evaluierte Optionen im Härtetest

Warum bestehende Cloud-Lösungen und Entwickler-Tools für unsere Anforderungen scheiterten

Cloud-Embeds (Pitch, Google Slides)

Geschlossene Drittanbieter-Silos

Isolierte iFrame-Sandboxen wirken als unzugängliche Black Box im Browser.

Zero SEO & GEO
Folientext ist für Google und Sprachmodelle im iFrame vollständig unsichtbar.
Cookie- & Tracking-Overhead
Exzessives Drittanbieter-Tracking verstößt gegen datensparsames Webdesign.
Keine Audio-Synchronisation
Gesprochenes Audio kann im iFrame keine Folien-Animationen triggern oder steuern.

Code-Frameworks (Reveal.js, Slidev)

Isolierte Standalone-Lösungen

Architektur-Bruch durch getrennte SPAs ohne native Audio-Synchronisation.

Architektur-Bruch (SPA)
Separate Frameworks erzwingen komplett eigene Laufzeiten und Builds im Projekt.
Fehlende Astro-Collections
Keine direkte Validierung und Typisierung über globale Content-Layer-Schemata.
Kein TTS-Audio-Ökosystem
Kein integrierter Abgleich zwischen Edge-TTS Wortgrenzen und DOM-Cues vorhanden.

07 / 10

Die 4 Säulen der technischen Umsetzung

Wie unsere maßgeschneiderte Slide-as-Code Engine im Astro-Ökosystem implementiert ist

1. Astro Content Layer

Mechanismus: Statisches SSG & MDX-Bundles.

Zero Runtime Overhead
Ultraschnelle Ladezeiten unter 500 ms im Browser.
Gemeinsames Designsystem
Identische Tailwind CSS Tokens im gesamten System.

2. 1920x1080 Vektorbühne

Mechanismus: AutoFitController & Vektorbühne.

Verlustfreie Geometrie
Mathematische Skalierung für jede Viewport-Größe.
Kein Zeilenumbruch-Chaos
Typografie und Boxen wahren ihr exaktes 16:9-Layout.

3. 6 Master-Archetypen

Mechanismus: 6 standardisierte Archetypen.

Schutz vor CSS-Fehlern
Title-, Split-, Pipeline-, Grid- und MetricSlide.
Agenten-Ergonomie
Folien entstehen fehlerfrei ohne Freiform-CSS.

4. Duale Schema.org Graphen

Mechanismus: Duale Schema.org Wissensgraphen.

Folien-Transkripte
Jede Folie als semantisches CreativeWork im Graph.
AIO & GEO Optimierung
Direkte Zitationsfähigkeit in KI-Antwortmaschinen.

08 / 10

Akustische Wort-Anker-Synchronisation

Wie Edge TTS, phonetische Wörterbücher und Howler.js im Browser nahtlos verschmelzen

Die Synthese-Pipeline

Edge TTS & Lexikon

Präzise Aussprache technischer Akronyme und Fachbegriffe im Build-Prozess.

Phonetische Normalisierung
tts-lexicon.json korrigiert R-A-G, Schema.org und Zero-Click vor der Synthese.
Subsekunden-Wortgrenzen
Edge TTS liefert millimetergenaue Zeitstempel für jedes einzelne gesprochene Wort.
Inkrementeller SHA-Cache
Unveränderte Folien werden dank inkrementellem Hash-Cache beim Build übersprungen.

Der AudioSyncController

60fps Client-Side Controller

requestAnimationFrame steuert die visuelle Regie synchron im Browser-DOM.

Spotlight-State-Machine
Wechselt DOM-Klassen dynamisch von data-cue-active zu data-cue-past zur Laufzeit.
Kinetische Highlighter-Wellen
Animiert farbige Textmarker unter Schriftzeilen flüssig passend zum Sprechtempo.
2-Phasen Title-Hook Protokoll
Garantiert 12 bis 20 Wörter Orientierungszeit vor dem ersten optischen Cue-Trigger.

09 / 10

Agentische Folienerstellung & CI-Gates

Wie autonome KI-Coding-Agenten produktionsreife Folien mit deterministischen Garantien bauen

Agenten verfassen MDX-Bündel mit 6 Archetypen und {cue:hl-agent-synthese}strenger Einhaltung von Typografie-Mindestgrößen{/cue}.

LLM-Synthese

Agenten verfassen MDX-Bündel mit 6 Archetypen und strenger Einhaltung von Typografie-Mindestgrößen.

→

Edge TTS generiert Sprachdateien, gleicht Cues ab und {cue:hl-agent-audio}prüft das phonetische Aussprachelexikon{/cue}.

Audio-Pipeline

Edge TTS generiert Sprachdateien, gleicht Cues ab und prüft das phonetische Aussprachelexikon.

→

Deterministische Validierung bricht den Build ab bei {cue:hl-agent-gate}Fehlern in Cue-Parität oder veralteten PDFs{/cue}.

CI-Qualitätsgate

Deterministische Validierung bricht den Build ab bei Fehlern in Cue-Parität oder veralteten PDFs.

10 / 10

Zusammenfassung & Ausblick

Der neue Bereich Interactive Presentations als moderner Wissens-Hub auf hackenberg.tech

Kern-Erkenntnisse

Slide-as-Code Nutzen

Vorträge verdienen dieselbe architektonische Exzellenz wie moderner Quellcode.

Multimodale Synthese
Verbindet visuelle Präzision mit auditiver Führung auf den Punkt.
Volle Daten- und SEO-Hoheit
100 % Maschinenlesbarkeit via Schema.org ohne Drittanbieter-Lock-in.
Effiziente Agenten-Pipeline
Rasche Erstellung und automatische CI-Validierung mit KI-Unterstützung.

Ausblick & Flagship-Keynote

Nächster Vortrag online

SEO im Zeitalter von KI: Strategien für SEO, GEO, AIO und AEO.

30 synchronisierte Folien
Der 60-Minuten-Vortrag für Industrie und Mittelstand ist live abrufbar.
Interaktive Tastatur-Steuerung
Taste 'S' öffnet die Presenter Console mit Sprechernotizen.
Druckoptimierte PDF-Handouts
Vollständige Handout-Exporte im Dark- und Light-Mode auf Knopfdruck.

Voice Transcript

Interactive Presentations

Motivation, Content-Strategie und Architektur web-nativer Keynotes mit Neural-Voiceover

Traditionelle Präsentationen verharren im Web meist als isolierte Silos, statische PDFs oder externe Medien-Einbettungen. Unter dem Titel Interactive Presentations betrachten wir die Motivation, Content-Strategie und Architektur web-nativer Keynotes mit Neural-Voiceover. Mein Name ist Dr. Georg Hackenberg, Professor für Informatik und Industriesysteme an der Fachhochschule Oberösterreich. Wir analysieren, wie Vortragsinhalte durch Code-basierte Modellierung zu erstklassigen Web-Artefakten werden.

Agenda & Leitfaden

Gliederung des Architektur-Briefings in 5 didaktische Themenblöcke

Unsere heutige Agenda dient als klarer roter Faden für das gesamte System. Sie gliedert das Architektur-Briefing in fünf aufeinander aufbauende Themenblöcke. Zunächst beleuchten wir die Motivation und das Dilemma, warum statische PDF-Downloads und Fremd-iFrames die Wissensvermittlung im Web blockieren. Anschließend betrachten wir unser Content-Ökosystem und wie Präsentationen bestehende Wissensformate nahtlos ergänzen. Im dritten Block widmen wir uns der Content-Strategie für Zitationsfähigkeit in generativen Modellen. Danach analysieren wir, warum gängige Cloud-Embeds und Entwickler-Tools in der Praxis scheiterten. Zum Abschluss präsentiere ich die Custom Engine mit akustischer Synchronisation und Qualitätsgates.

Motivation: Das Dilemma digitaler Vorträge

Warum statische PDF-Dateien und Fremd-iFrames die Wissensvermittlung im Web zerstören

Beim Betrachten des Status Quo digitaler Präsentationen stoßen wir auf ein grundlegendes Dilemma. Bisherige Formate verdeutlichen, wie statische PDFs und Fremd-iFrames die Wissensvermittlung im Web zerstören. Herkömmliche Folien landen meist als stumme PDF-Dateien in Dateiablagen – wie ein Notenblatt ohne Orchester. Sie transportieren nur Bruchteile des eigentlichen Vortragskontexts, sperren KI- und Web-Crawler komplett aus und erzwingen auf Mobilgeräten ständiges Zoomen und horizontales Scrollen. Unsere Vision ist eine native Web-Engine: Vollwertige Keynotes als erstklassige Bürger im Web. Wir verbinden eine lebendige Vektorbühne synchron mit neuronaler Sprachausgabe, garantieren Bildschirmleser-Unterstützung und Barrierefreiheit und sichern volle Daten- und Plattform-Hoheit.

Das Content-Ökosystem der Website

Wie interaktive Präsentationen die Brücke zwischen Forschung, Lehre und Praxis schlagen

Unsere Website bildet ein vielschichtiges Spektrum an wissenschaftlichen und technischen Inhalten ab. Interaktive Präsentationen bilden hierbei die Brücke zwischen Forschung, Lehre und Praxis. Wissenschaftliche Publikationen und Vorlesungen liefern peer-reviewed Forschung. Sie umfassen begutachtete Veröffentlichungen sowie didaktische Semesterübungen für Studierende. Technische Blog-Beiträge dokumentieren technische Deep Dives. Sie analysieren Algorithmen, Frameworks und Standards mit praxiserprobten Code-Beispielen. Integrierte Visualisierungen und Software-Projekte stellen lauffähige Software bereit – von Open-Source Repositories bis zu interaktiven WebGL-Shadern und Graph-Engines. Der neue Bereich Interactive Presentations schließt die Lücke: Er bietet multimodale Synthese durch Verdichtung auf 15 bis 30 Folien und direkte Audio-Führung.

Übergeordnete Content-Strategie

Holistisches Wissens-Repurposing von der Forschung bis zur KI-Zitationsfähigkeit

In unserer übergeordneten Content-Strategie steht jedes Format in einer synergetischen Beziehung. Sie beschreibt das holistische Repurposing von der Forschung bis zur KI-Zitationsfähigkeit. Ausgangspunkt sind originäre Forschungsdaten aus industrieller Entwicklung. Diese Erkenntnisse überführen wir in eine akustisch synchronisierte Vektorbühne für rasche Orientierung. Der begleitende Blogartikel liefert vollständigen Quellcode und Benchmark-Analysen. Schließlich sorgt der Wissensgraph für maximale Zitationsfähigkeit in Sprachmodellen.

Evaluierte Optionen im Härtetest

Warum bestehende Cloud-Lösungen und Entwickler-Tools für unsere Anforderungen scheiterten

Vor der Eigenentwicklung haben wir bestehende Technologien am Markt gründlich analysiert. Die Gegenüberstellung zeigt, warum Standardlösungen für unsere Anforderungen scheiterten. Cloud-Embeds wie Google Slides oder Pitch wirken wie eine unzugängliche Black Box: Folientext bleibt im iFrame vollständig unsichtbar, Tracking-Overhead widerspricht datensparsamem Webdesign und das gesprochene Wort kann keine Folien-Animationen triggern. Auch reine Entwicklertools bedeuten einen Architektur-Bruch: Frameworks wie Slidev erzwingen eigene Laufzeiten und Builds, bieten keine Integration in globale Content-Layer-Schemata und besitzen keinen Abgleich zwischen Edge-TTS Wortgrenzen und DOM-Cues.

Die 4 Säulen der technischen Umsetzung

Wie unsere maßgeschneiderte Slide-as-Code Engine im Astro-Ökosystem implementiert ist

Die technische Architektur unserer Custom Presentation Engine ruht auf vier eng verzahnten Säulen. Sie zeigt, wie die Slide-as-Code Engine im Astro-Ökosystem implementiert ist. Erstens ermöglicht der Astro Content Layer ein statisches SSG-Build: Er erzielt ultraschnelle Ladezeiten unter 500 ms und nutzt identische Tailwind CSS Tokens. Zweitens garantiert der AutoFitController der Vektorbühne eine mathematische Skalierung, sodass Typografie und Boxen stets ihr exaktes 16:9-Layout bewahren. Drittens stellen sechs standardisierte Archetypen wie Title-, Split-, Pipeline-, Grid- und MetricSlide sicher, dass LLMs Folien fehlerfrei ohne Freiform-CSS erzeugen. Viertens erzeugen duale Schema.org Wissensgraphen für jede Folie ein semantisches CreativeWork und maximale Zitationsfähigkeit in KI-Antwortmaschinen.

Akustische Wort-Anker-Synchronisation

Wie Edge TTS, phonetische Wörterbücher und Howler.js im Browser nahtlos verschmelzen

Die deterministische Kopplung von gesprochenem Audio mit visuellen DOM-Elementen verwandelt statische Web-Inhalte in geführte multimodale Artefakte. Sie zeigt, wie Edge TTS, phonetische Wörterbücher und Howler.js im Browser nahtlos verschmelzen. Im Build-Prozess sorgt unser Aussprache-Lexikon für präzise Aussprache: Es korrigiert R-A-G, Schema.org und Zero-Click, liefert über Edge TTS millimetergenaue Zeitstempel und schont Ressourcen durch einen inkrementellen Hash-Cache. Im Browser übernimmt der AudioSyncController: requestAnimationFrame steuert die visuelle Regie im DOM. Er schaltet Zustände von data-cue-active zu data-cue-past, zieht farbige Textmarker unter Schriftzeilen und wahrt 12 bis 20 Wörter Orientierungszeit vor dem ersten Trigger.

Agentische Folienerstellung & CI-Gates

Wie autonome KI-Coding-Agenten produktionsreife Folien mit deterministischen Garantien bauen

Die Erstellung modularer Präsentations-Decks lässt sich hervorragend an KI-Agenten delegieren. Sie zeigt, wie autonome Coding-Agenten produktionsreife Folien mit deterministischen Garantien bauen. Auf der ersten Stufe generiert die Synthese deklarative Folien unter strenger Einhaltung von Typografie-Mindestgrößen. Auf der zweiten Stufe generiert die Audio-Pipeline Sprachdateien und prüft das phonetische Aussprachelexikon. Auf der dritten Stufe erzwingt unser CI-Qualitätsgate strikte deterministische Konsistenz bei Fehlern in Cue-Parität oder veralteten PDFs.

Zusammenfassung & Ausblick

Der neue Bereich Interactive Presentations als moderner Wissens-Hub auf hackenberg.tech

Fassen wir die wichtigsten Erkenntnisse unseres heutigen Briefings kurz zusammen. Sie etablieren interaktive Präsentationen als modernen Wissens-Hub auf hackenberg.tech. Mit der Slide-as-Code Engine schaffen wir dieselbe architektonische Exzellenz wie bei modernem Quellcode: Sie verbindet visuelle Reduktion mit auditiver Führung auf den Punkt, garantiert 100 % Maschinenlesbarkeit ohne Drittanbieter-Lock-in und profitiert von automatischer CI-Validierung mit KI-Unterstützung. Die praktische Anwendung dieses Konzepts demonstriert die begleitende Fachpräsentation SEO im Zeitalter von KI. Der umfassende 60-Minuten-Vortrag für Industrie und Mittelstand bietet eine interaktive Presenter Console mit Sprechernotizen sowie druckfertige Handouts im Dark- und Light-Mode auf Knopfdruck.

0:00

1/10