Tworzymy prezentacje używając frameworka HTML5&Javascript

Do pewnego momentu gdy ktoś chciał abym przygotował prezentacje, automatycznie myślałem o power poincie, bo w końcu co może być lepszego ;-)

A jednak przejrzałem na oczy dzięki ostatnim szkoleniom i konferencjom w których miałem okazje uczestniczyć. Okazało się, że w większości przypadków prezentowane slajdy to po prostu nic innego jak strony HTML prezentowane w ciekawy sposób z fajną nawigacją. Sprawdziłem co za tym stoi i okazało się, że w większości przypadków do tworzenia prezentacji używany jest framework reveal.js który chciałem dzisiaj przybliżyć.

Reveal.js (http://lab.hakim.se/reveal-js) pozwala tworzyć świetne, interaktywne prezentacje za pomocą HTML i co chyba najważniejsze jest darmowy. Biblioteka reveal.js została bogato wyposażona w funkcje, poniżej wymienię kilka z nich :

• używanie spacji lub klawiszy strzałek do poruszania się po prezentacji,
• tworzone prezentacje są responsywne bez żadnego dodatkowego kodu,
• slajdy mogą być osadzane w innych slajdach,
• dostępny jest edytor do tworzenie prezentacji jeżeli nie chcemy dotykać kodu html - dostępny na stronie http://slid.es,
• klawisz ESC umożliwia przejrzenie slajdów w formie miniaturek,
• każdy slajd może zawierać dowolny kod html, listy, tabele, paragrafy, cytaty itp.,
• mamy możliwość zmieniania sposobu przełączania pomiędzy slajdami,
• możemy zmieniać skórkę prezentacji, biblioteka dostarcza nam kilka wbudowanych skórek ,
• biblioteka ma wbudowany plugin do ładnego formatowania kodu, jeżeli potrzebujesz zaprezentować fragmenty kodu,
• możemy tworzyć linki do slajdów w prezentacji,
• biblioteka umożliwia tworzenie własnych notatek do każdego slajdu, które mogą być widoczne w odrębnym oknie
• i wiele, wiele innych :-).

Zatem jak stworzyć sobie prezentacje samemu, od podstaw?

1. ściągamy paczkę z ostatnia wersję biblioteki ze strony https://github.com/hakimel/reveal.js/releases
2. rozpakowujemy ściągnięte archiwum i otwieramy plik index.html w ulubionym edytorze Ściągnięta paczka zawiera gotową prezentację dostępną na stronie http://lab.hakim.se/reveal-js. Każdy slajd to tak na prawdę kod html otoczony elementem section, jak na poniższym przykładzie

<section>
     <h1>Books to read</h1> 
     <small>Created by  
         <a href="http://www.lukaszewczak.pl/">Łukasz Szewczak </a> 
     </small>
 </section> 

3. wprowadzamy własne zmiany i oglądamy w przeglądarce ;-)

Oczywiście biblioteka reveal.js nie jest jedyna do tworzenia prezentacji używając html5, poniżej przedstawiam listę dostępnych alternatyw dla reaveal.js:

1. Deck.js
2. Tacion.js
3. Fathom.js
4. Impress.js
5. Presenteer.js
6. Jmpress.js
7. DZ Slides
8. slides
9. Slides Google Code
10. Perkele.js
11. HTML Slidy

Zachęcam wszystkich do bliższego zapoznania się z tego typu prezentacjami i pożegnać starego poczciwego power pointa :-).