🚀 Mastering Reveal.js
Obszerny Przewodnik po Tworzeniu Prezentacji z wykorzystaniem Reveal.js i AI
🎯 Cele Prezentacji
- Zrozumienie podstawowej struktury Reveal.js
- Nauka tworzenia slajdów pionowych i poziomych
- Wykorzystanie fragmentów do sekwencjonowania treści
- Podświetlanie kodu z użyciem data-line-numbers
- Dodawanie obrazów i kolorów jako tła slajdów
- Konfiguracja Reveal.js dla optymalnej prezentacji
- Wprowadzenie do systemu wtyczek Reveal.js
- Integracja AI w prezentacjach
Podstawowa Struktura HTML
Każda prezentacja musi zawierać .reveal i .slides.
<div class="reveal">
<div class="slides">
<section>Slajd 1</section>
<section>Slajd 2</section>
</div>
</div>
Use Case: Modularność
Poziome sekcje to Twoje główne moduły (rozdziały). Pionowe sekcje to detale tematu.
➡️ Slajdy Poziome (Horizontal Slides)
Tworzone przez oddzielne <section> wewnątrz .slides.
<div class="slides">
<section>Slajd 1</section>
<section>Slajd 2</section>
</div>
▼ Slajdy Pionowe (Nested Slides)
Pozwalają na głębokie zanurzenie w temat.
<section>
<section>Główny Temat</section>
<section>Szczegół A</section>
<section>Szczegół B</section>
</section>
✨ Sekwencjonowanie Fragmentami
Użyj .fragment do kontroli tempa.
- Punkt 1: Wprowadzenie koncepcji.
- Punkt 2: Prezentacja kodu.
- Punkt 3: Ostrzeżenie (z innym efektem).
Use Case: Prowadzenie Dyskusji
Fragmenty są idealne do prezentowania kolejnych kroków algorytmu lub listy wymagań projektowych.
💡 Fragmenty (Fragments)
Użyj klasy fragment, aby wprowadzać elementy stopniowo.
<ul>
<li class="fragment">Punkt 1</li>
<li class="fragment">Punkt 2</li>
<li class="fragment highlight-red">Punkt 3</li>
</ul>
📝 Wyróżnianie Kodu (Code Highlighting)
Użyj data-line-numbers, aby podświetlać linie sekwencyjnie.
// Zgodnie z dobrymi praktykami Roberta
const initializePresentation = (options) => {
console.log('Inicjalizacja z opcjami:', options);
};
const config = { hash: true, center: true };
(() => {
initializePresentation(config);
})();
Use Case: Analiza Kodu
To kluczowe narzędzie do prezentowania fragmentów logiki. Początkowo podświetlamy wszystko. Następnie linię 1 wyświetlamy najpierw, potem 2-4, 6, 8 wraz z 10, 9 i na końcu 8-10.
🖼️ Dodawanie Tła Obrazów i Kolorów
Użyj atrybutów data-background-image i data-background-color do
personalizacji slajdów.
🖼️ Tła Obrazów
Używaj subtelnych obrazów, by nie odciągały uwagi od tekstu.
<section data-background-image="url.jpg" data-background-opacity="0.3">
🖼️ Tła Obrazów
Przykład tła z obrazem o niskiej intensywności (30% przezroczystości).
<section data-background-image="url.jpg" data-background-opacity="0.3">
🎨 Tła Kolorów
Ustawienia data-background-color to najprostszy sposób na wizualne oddzielenie sekcji.
(Tu użyto koloru #4CAF50).
🎨 Tła Kolorów
Przykład tła z kolorem #FF5733.
<section data-background-color="#FF5733">
⚙️ Podsumowanie Konfiguracji
Oto konfiguracja, którą zastosowaliśmy w skrypcie:
- hash: true: Umożliwia linkowanie do konkretnych slajdów.
- slideNumber: 'c/t': Wyświetla numer slajdu (bieżący/całkowita liczba).
- minScale / maxScale: Kontrolują skalowanie treści, by zmieściła się na ekranie.
⚙️ Podsumowanie Konfiguracji
Przykład tła z kolorem #4CAF50.
Reveal.initialize({
hash: true, // Umożliwia linkowanie do konkretnych slajdów
controls: true, // Pokaż kontrolki nawigacyjne
progress: true, // Pokaż pasek postępu
slideNumber: 'c/t', // Wyświetla numer slajdu (bieżący/całkowita liczba)
center: true, // Centruje zawartość slajdu
minScale: 0.1, // Minimalne skalowanie
maxScale: 1.5, // Maksymalne skalowanie
plugins: [RevealHighlight] // Wtyczka do podświetlania składni
});
⚙️ Konfiguracja: Nawigacja i UI
Dostosowywanie podstawowych elementów interfejsu użytkownika.
Reveal.initialize({
controls: true, // Pokazuje strzałki nawigacyjne (true, false, 'speaker-only')
controlsLayout: 'bottom-right', // Pozycja strzałek ('edges' lub 'bottom-right')
controlsBackArrows: 'faded', // Widoczność strzałki "wstecz" ('faded', 'hidden', 'visible')
progress: true, // Pokazuje pasek postępu
slideNumber: 'c/t', // Format numeracji slajdów (np. 'c/t', 'h.v')
center: true, // Centruje slajdy w pionie
});
⚙️ Konfiguracja: Adresowanie i Interakcja
Jak prezentacja reaguje na działania użytkownika i URL.
Reveal.initialize({
hash: true, // Dodaje numer slajdu do URL (hash)
history: true, // Zapisuje zmiany slajdów w historii przeglądarki
keyboard: true, // Włącza nawigację klawiaturą
mouseWheel: true, // Włącza nawigację kółkiem myszy (jeśli włączone w opcjach)
touch: true, // Włącza nawigację dotykową
help: true, // Włącza okno pomocy po naciśnięciu '?'
});
⚙️ Konfiguracja: Zachowanie Prezentacji
Kontrola nad przepływem, fragmentami i trybami specjalnymi.
Reveal.initialize({
loop: false, // Zapętla prezentację
rtl: false, // Ustawia kierunek "od prawej do lewej"
navigationMode: 'default', // Tryb nawigacji ('default', 'linear', 'grid')
shuffle: false, // Losowa kolejność slajdów przy starcie
fragments: true, // Globalnie włącza/wyłącza fragmenty
pause: true, // Włącza pauzę (blackout) klawiszem 'b'
});
⚙️ Konfiguracja: Auto-Animacje (Potęga!)
Automatyczne animowanie pasujących elementów między slajdami.
Reveal.initialize({
autoAnimate: true, // Globalnie włącza auto-animacje
autoAnimateEasing: 'ease', // Rodzaj "płynności" animacji
autoAnimateDuration: 1.0, // Czas trwania animacji (w sekundach)
autoAnimateUnmatched: true, // Czy elementy bez pary mają "znikać" (true) czy nie (false)
autoAnimateStyles: [ 'opacity', 'color', 'background-color', '...' ] // Lista stylów CSS do animacji
});
⚙️ Konfiguracja: Automatyzacja i Przejścia
Kontrola nad automatycznym odtwarzaniem i efektami wizualnymi.
Reveal.initialize({
autoSlide: 0, // Automatyczne przełączanie slajdów (w ms), 0 = wyłączone
autoSlideStoppable: true, // Zatrzymuje auto-slide po interakcji użytkownika
autoPlayMedia: null, // Globalne auto-odtwarzanie mediów (null, true, false)
transition: 'slide', // Domyślny efekt przejścia ('none', 'fade', 'slide', 'convex'...)
transitionSpeed: 'default', // Prędkość przejścia ('default', 'fast', 'slow')
backgroundTransition: 'fade', // Osobne przejście dla tła
});
🔌 Przykłady Wtyczek w Marketingu
Oto kilka przykładów, jak wtyczki Reveal.js mogą być używane w kontekście marketingu:
- RevealNotes: Umożliwia prelegentom dodawanie notatek, które mogą być używane podczas prezentacji.
- RevealZoom: Pozwala na przybliżanie szczegółów produktów lub usług w trakcie prezentacji.
- RevealMath: Może być używana do prezentacji skomplikowanych równań matematycznych w kontekście analizy danych.
🔌 Jak Zastosować Wtyczki
Aby użyć wtyczki w Reveal.js, należy ją zaimportować i dodać do konfiguracji.
// Import wtyczki
import RevealHighlight from 'reveal.js/plugin/highlight/highlight.esm.js';
// Inicjalizacja Reveal.js z wtyczką
Reveal.initialize({
plugins: [RevealHighlight]
});
🔌 System Wtyczek (Plugins)
Rozszerzenie funkcjonalności poza podstawową konfigurację.
| Nazwa Wtyczki | Opis | Kluczowa Funkcja |
|---|---|---|
| Highlight | Podświetlanie składni kodu. | data-line-numbers |
| Markdown | Pisanie treści w składni Markdown. | Prostsze tworzenie slajdów |
| Notes | Widok dla prezentera (Speaker View). | Notatki na oddzielnym ekranie |
| Math | Wsparcie dla równań LaTeX/MathML. | Renderowanie $E=mc^2$ |
| Zoom | Powiększanie elementów (Alt + klik). | Zoom |
🔌 System Wtyczek (Plugins)
Sposób Inicjalizacji Wtyczek
Reveal.initialize({
// ... inne opcje ...
plugins: [
RevealHighlight, // Używamy stałej wtyczki
RevealMarkdown,
RevealNotes
]
});
📊 Przykład Wyników Finansowych w Kontekście Mailingów
| Metryka | Wartość |
|---|---|
| Otwarcia | 1,234 |
| Kliknięcia | 567 |
| CTR | 45.9% |
| Przychody | $12,345 |
🔌 Podsumowanie Wtyczek
Wtyczki Reveal.js znacznie rozszerzają możliwości prezentacji, umożliwiając dostosowanie ich do różnych potrzeb i scenariuszy.
🤖 Integracja AI w Prezentacjach
Wykorzystanie AI do generowania treści i struktury prezentacji.
Wygeneruj mi prezentację na temat X w Reveal.js
Use Case: Szybkie Prototypowanie
AI może pomóc w szybkim tworzeniu szkiców prezentacji, które można następnie dostosować i rozbudować.
🎉 Dziękuję za uwagę!
Gotowy na tworzenie niesamowitych prezentacji z Reveal.js?
Zapraszam do eksploracji możliwości, jakie oferuje Reveal.js!
(ps. to czas na pytania!)
🔗 Przydatne Linki
👨💻 Kontakt
