Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Reveal.js – pokaz slajdów w przeglądarce WWW

Autor: Piotr Karpiuk o czwartek 25. Maj 2017


Prezentacja Reveal.js – kliknij strzałkę w prawym dolnym rogu. Pełny ekran

PowerPoint wciąż rządzi w świecie prezentacji, ale od dawna już istnieje szereg narzędzi do prezentowania slajdów w przeglądarce.

Mają one sporo zalet:

  • przeglądarka WWW jest popularniejsza niż Windowsy z PowerPointem, co bardzo poszerza grono potencjalnych widzów,
  • można podać URL do konkretnego slajdu,
  • dzięki najnowszym możliwościom przeglądarek (HTML5, CSS3) nie jesteśmy zmuszani do instalowania pluginów takich jak Flash/Java; ponadto dostajemy przyjemne dla oka efekty przewijania slajdów, nawet 3D (patrz Impress.js demo),
  • osoby z uzdolnieniami plastycznymi i webmasterzy mogą popisać się swoimi umiejętnościami aby uczynić pokaz wyjątkowym, pozostali mogą uzyskać zadowalające efekty niskim kosztem,
  • na slajdach można zagnieździć działające aplikacje webowe,
  • pokaz slajdów może na ogół działać na przeglądarkach mobilnych, obsługując przewijanie slajdów dotykiem.

Wbrew pozorom, funkcjonalność oferowana przez tego typu narzędzia jest w stanie całkiem sensownie zaspokoić potrzeby przeciętnego prelegenta. Dzisiaj chciałbym krótko zaagitować na rzecz narzędzia Reveal.js, które zwróciło moją uwagę. Dobrym punktem wyjścia jest przykładowa prezentacja, ukazująca możliwości narzędzia (patrz też obok).

Slajdy można przewijać klawiaturą (strzałki, spacja), klawisz ESC otwiera podgląd slajdów (można wybrać myszką ten do którego chcemy przejść).


Podgląd slajdów (spis treści)

a klawisz S wyświetla w osobnym okienku przeglądarki widok prelegenta (ang. speaker view), zawierający podgląd bieżącego i następnego slajdu, zegar i ewentualne notatki prelegenta dla bieżącego slajdu.


Widok prelegenta, w osobnym okienku przeglądarki

Spis wszystkich dostępnych skrótów klawiaturowych otrzymamy po naciśnięciu klawisza „?„.

Klawiszami nie tylko przewijamy slajdy, ale też wyświetlamy kolejne fragmenty w obrębie jednego slajdu, jak w tym przykładzie.

Reveal.js jest w zasadzie aplikacją webową, ale o ile nie chcemy publikować slajdów w Internecie, nie musimy używać serwera WWW – narzędzie działa również offline.

Dla osób leniwych które wolą skupić się na treści prezentacji zamiast dopieszczać szatę graficzną i dłubać w HTML/CSS, Reveal.js oferuje szereg ułatwień:

  • treść slajdów można tworzyć w formacie tekstowym Markdown,
  • jest kilka motywów graficznych do wyboru,
  • gdy chcemy pokazać na slajdzie kod źródłowy, drobny dodatek pozwala podświetlić w nim składnię (wykorzystywana jest do tego biblioteka highlight.js),
  • do edycji slajdów można użyć edytora graficznego slides.com (patrz obrazek poniżej).

Graficzny edytor prezentacji Reveal.js

Z kolei gdy interesuje nas wykorzystanie wszystkich możliwości Reveal.js, warto sięgnąć po pluginy i narzędzia rozszerzające funkcjonalność (np. o konwersję slajdów do PDF), ewentualnie po API JS pozwalające przewijać slajdy programowo i reagować na różne zdarzenia.

Aby zacząć przygodę z Reveal.js, warto zacząć od banalnego przykładu z dwoma slajdami:

<html>
  <head>
    <link rel="stylesheet" href="http://lab.hakim.se/reveal-js/css/reveal.css">
    <link rel="stylesheet" href="http://lab.hakim.se/reveal-js/css/theme/white.css">
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
	<section>Slide 1</section>
	<section>Slide 2</section>
      </div>
    </div>
    <script src="http://lab.hakim.se/reveal-js/js/reveal.js"></script>
    <script>Reveal.initialize();</script>
  </body>
</html>

Myślę że widać już jak dodawać kolejne slajdy. Aby rozszerzyć repertuar zerkamy do dokumentacji, którą da się spokojnie przeczytać w godzinę.

Share and Enjoy:
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Śledzik
  • Blip
  • Blogger.com
  • Gadu-Gadu Live
  • LinkedIn
  • MySpace
  • Wykop

Zostaw komentarz

XHTML: Możesz użyć następujących tagów: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>