Dieses Repository enthält eine Reveal.js-Präsentation, die ohne Gulp auskommt und sich direkt auf GitHub Pages betreiben lässt. Die Präsentation folgt dem Standard-Markup von reveal.js – alle Slides/Sections stehen direkt in der index.html (kein Markdown).

The framework comes with a powerful feature set including nested slides, Markdown support, Auto-Animate, PDF export, speaker notes, LaTeX typesetting, syntax highlighted code and an extensive API.

---

Want to create reveal.js presentation in a graphical editor? Try https://slides.com. It's made by the same people behind reveal.js.

---

Sponsors

Hakim's open source work is supported by GitHub sponsors. Special thanks to:

Your app, enterprise-ready. Start selling to enterprise customers with just a few lines of code. Add Single Sign-On (and more) in minutes instead of months.

---

Nutzung ohne Gulp

• Installation: npm install
• Entwicklung (mit Live-Reload): npm run dev (startet BrowserSync unter http://localhost:3000 und kompiliert SCSS im Watch-Modus)
• Nur Styles beobachten: npm run watch (kompiliert SCSS nach dist/)
• Lokaler Server ohne Live-Reload: npm start (baut CSS und startet http://localhost:8000)
• Deployment auf GitHub Pages: Push auf den Branch, den du bei Pages konfiguriert hast (z. B. main). CNAME liegt bereits bei.

Slides bearbeiten: Öffne index.html und editiere die

-Blöcke innerhalb von

. Drücke während der Präsentation die Taste "s", um die Sprecheransicht zu öffnen. Dort siehst du die aktuellen Folien, die nächste Folie, einen Timer und deine Notizen (via in jeder Section).

Videos pro Folie:

• Klick zum Abspielen: In HTML ein Video-Tag mit data-clickplay einfügen. Beispiel:
• Vollbild & Autoplay beim Betreten der Folie: Nutze eine eigene Section mit data-video-fullscreen und setze am Video data-autoplay. Autoplay funktioniert zuverlässig, wenn das Video muted ist (Browser-Policy). Optional kannst du data-state="video-fullscreen" setzen, um die Reveal-UI (Controls/Progress) auszublenden. Beispiel:
• Verhalten:
  • Videos werden erst bei Bedarf geladen (lazy via data-src).
  • data-clickplay: Klick toggelt Play/Pause und blendet Controls ein/aus.
  • data-autoplay: Startet automatisch beim Folienwechsel, pausiert/setzt zurück beim Verlassen.
• Tipp: Lege deine MP4-Dateien unter dist/assets/ ab und nutze poster-Bilder für schnelle Voransicht.

Weitere Doku zu Reveal.js:

• 🚀 Installation: https://revealjs.com/installation
• 👀 Demo: https://revealjs.com/demo
• 📖 Markup/Markdown: https://revealjs.com/markup/
• 🖌 Editor: https://slides.com/
• 🎬 Videokurs (paid): https://revealjs.com/course

---

MIT licensed | Copyright © 2011-2024 Hakim El Hattab, https://hakim.se

Hintergrundvideo (echtes Fullscreen mit Reveal)

• Nutze eine Section mit data-background-video. Reveal rendert das Video als Slide-Hintergrund (fullscreen), ideal für randloses 16:9.
• Empfohlene Attribute:
  • data-background-video: URL zur Videodatei
  • data-background-color="#000": Hintergrundfarbe als Fallback
  • data-background-size="cover": skaliert auf ganzen Viewport
  • data-background-video-muted: für zuverlässiges Autoplay
  • data-background-video-loop: optional
  • data-state="video-fullscreen": optional zum Ausblenden der UI (Controls/Progress)
• Beispiel:

  Fullscreen Hintergrund‑Video

Iframe als Folien‑Hintergrund (Fullscreen)

• Nutze data-background-iframe, um eine externe Seite als Hintergrund zu laden.
• Mit data-background-interactive erlaubst du Interaktionen (Scrollen, Klicken) im Iframe.
• Empfohlene Attribute:
  • data-background-iframe: URL zur Seite
  • data-background-color="#000": Fallback‑Hintergrund
  • data-background-interactive: erlaubt Interaktion (optional)
  • data-state="iframe-fullscreen": optional zum Setzen eines speziellen Slide‑Zustands
• Beispiel:

  Iframe

• Hinweise:
  • Manche Seiten erlauben kein Einbetten (X-Frame-Options/CSP). In diesem Fall funktioniert der Iframe nicht.
  • Verwende nach Möglichkeit HTTPS‑URLs, besonders für GitHub Pages.