niedziela, 15 czerwca 2014

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
  3. <section>
         <h1>Books to read</h1> 
         <small>Created by  
             <a href="http://www.lukaszewczak.pl/">Łukasz Szewczak </a> 
         </small>
     </section> 
    
  4. 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 :-).

2 komentarze:

  1. Bellsouth customer service ,Are you facing issues with your bellsouth email account? If yes, then you don't need to worry about this because as a brand bellsouth provide bellsouth customer service to bellsouth email users. User can call 1800-284-6979 bellsouth technical support number any time 24*7 around the clock.

    OdpowiedzUsuń
  2. If You are facing any issue about How To Connect HP Printer To Mac then you may call to avail online help at +1 800-684-5649

    OdpowiedzUsuń