Alternatywa HTML5 dla Prezi: o krok dalej w technologii prezentacji

Od kilku lat coraz bardziej popularnym systemem prezentacji jest Prezi http://prezi.com/

Prezi zachwyca łatwością edycji slajdów (złap i przeciągnij) ale jeszcze bardziej atrakcyjną formą wizualizacji pokazu slajdów.
Niestety, autorzy Prezi nie przewidzieli kierunku zmian technologicznych i zrealizowali aplikację w oparciu o technologie FLASH. Technologia Flash jest obecnie systematycznie eliminowana z sieci na rzecz czystego standardu HTML5. Już teraz atrakcyjne prezentacje utworzone w Prezi nie mogą być odtworzone na żadnym urządzeniu pracujące pod nadzorem systemy operacyjnego Android lub Chrome OS.

Szczęśliwie od przeszło roku dostępna jest alternatywa dla Prezi zbudowana w czystym HTML5 + CSS3 + JS. Aplikacja jest obecnie dostępna w beta wersji rozwojowej, ale jest już w pełni funkcjonalna i godna polecania.

Gorąco  rekomenduję aplikację webową STRUT IMPRESS.JS  http://strut.io/index.html

Aplikacja wzorowana jest na atrakcyjnej wizualizacji znanej z Prezi. Podobnie zresztą rozwiązano edycję slajdów.
Zobacz stronę demonstracyjną wizualizacji prezentacji za pomocą IMPRESS.JS. http://bartaz.github.io/impress.js/#/title (pokaz sterowany jest klawiszem spacji)
Ponieważ aplikacja działa wyłącznie na bazie skryptów sterujących przeglądarką internetową (HTML, CSS, JS) – dlatego może być uruchomiona bezpośrednio z internetu, ale również lokalnie z dowolnego nośnika pamięci.
Na stronie projektu dostępne są też filmy instruktażowe zapoznające ze sposobem użycia edytora prezentacji.

Poniżej kilka instrukcji obsługi:

Aplikacja ma układ znany nam z Google Docs czy PowerPointa i podobnych. Z lewej strony ma listę kolejnych slajdów, a centralnie umieszczony jest edytowany aktualnie slajd. Dodawanie i kasowanie slajdów jest intuicyjne za pomocą ikonek + (dodaj) oraz x (skasuj)

W górnym menu dostępne są narzędzia dodawania obiektów do slajdów: tekstu (text), ilustracji (images), filmów z Youtube (video), stron www (website) oraz formatek różnych kształtów (shapes).

Każdy  z wymienionych obiektów jest umieszczany jako osobna warstwa na slajdzie za pomocą skalowalnego kontenera, którym za pomocą odpowiednich uchwytów możemy myszką komputerową skalować obiekt, obracać go w dowolnej płaszczyźnie oraz pozycjonować na slajdzie. Wystarczy kliknąć na wstawiony do slajdu obiekt aby go dowolnie modyfikować i pozycjonować.  Na ilustracji przedstawiono obiekt tekstu z widocznymi uchwytami pozycjonowania i skalowania. Najlepiej wypróbować  praktycznie jak działają poszczególne strzałki uchwytów kontenera obiektów.

Podwójne kliknięcie na obiekt tekstu udostępnia funkcje zmian jego właściwości:

Wstawianie ilustracji możliwe jest zarówno przez podanie linku sieciowego do ilustracji; jak również wczytanie ilustracji do prezentacji z lokalnego nośnika danych.
Na obecnym etapie rozwoju aplikacja umożliwia dodanie do slajdu filmów wyłącznie z serwisu YouTube. W tym wypadku zakłada się, że prezentacja będzie oglądana w warunkach dostępnego Internetu. Podobnie jest z umieszczeniem na slajdzie zewnętrznego serwisu WWW – aby się strona wyświetliła, potrzebny jest dostęp do sieci. Obiekty filmów oraz stron są wyświetlane na slajdzie z ich źródłowego miejsca w sieci, a nie są dołączone do samej prezentacji.

Dwa ostatnie przyciski górnego MENU umożliwiają zdefiniowanie tła całego pokazu prezentacji (SURFACE) oraz samych slajdów (BACKGROUND). Ciekawe efekty można uzyskać stosując jako tło prezentacji (surface) odpowiednio dobraną ilustrację, a jako tło slajdów (background) –  tło przeźroczyste (ikona szaro-białej szachownicy).

Ustawianie Animacji dla prezentacji
Animację całości prezentacji definiuje się wizualnie podobnie jak w Prezi. W prawym górnym rogu aplikacji jest ikona włączająca tryb podglądu Edytora Animacji Prezentacji (OverViev). Powrót do edytora slajdów tym samym przyciskiem ze zmienioną etykietą: (Slides).
Po przełączeniu dostajemy podgląd układu całej prezentacji. Każdy slajd umieszczony jest w skalowalnym kontenerze identycznym jak dla obiektów umieszczonych na slajdach. Za pomocą uchwytów na krawędzi kontenera możemy dowolnie poustawiać slajdy.

Atrakcyjność animacji przygotowywanej prezentacji zależy od poustawiania poszczególnych slajdów na płaszczyźnie roboczej. Na stronie serwisu zobaczyć można film pokazujący możliwości różnych układów oraz ich wpływu na przebieg finalnej animacji.  http://strut.io.s3-website-us-west-2.amazonaws.com/videos/tutorials/impress-overview-final.mp4

Uruchomienie Prezentacji
Prezentacja uruchamia się w nowej zakładce za pomocą funkcji IMPRESS w górnym menu aplikacji. Wersja finalna uruchamia się w nowej zakładce przeglądarki i uruchamiana jest za pomocą klawisza spacji. Klawiszem tym przewija się też kolejne slajdy animacji.

 Według stanu na dzień dzisiejszy dostępne są jeszcze dwa alternatywne formy prezentacji:

• Bespoke (beskope.js) – karuzela slajdów, zobacz efekt: http://markdalgleish.com/projects/bespoke.js/
• Handouts – zgodny z API Goole Hagouts.

Eksportowanie prezentacji

Aby uzyskać prezentację w wersji finalnej, którą można odtworzyć w dowolnej przeglądarce internetowej (obsługującej HTML 5), trzeba prezentację wyeksportować. Narzędzia eksportowania dostępne są w menu rozwijanym dostępnym w lewym górnym rogu ekranu obok logo aplikacji.

Użycie funkcji EKSPORT wyświetla panel eksportu umożliwiający dwa rodzaje eksportu: JSON oraz ZIP
Eksport w formacie JSON wykonuje się w wypadku, gdy chcemy prezentację ponownie edytować. Wgrywa się ja do aplikacji przy pomocy funkcji IMPORT. (format JSON jest standardem wymiany danych dla aplikacji napisanych w języku JS).
Gotową do uruchomienia wersję przygotowanej prezentacji otrzymuje się przez eksport określony terminem ZIP. Wyświetla nam się informacja jak niżej:

Aby zapisać prezentację w wersji do odtwarzania w przeglądarce należy uruchomić ją wybierając z menu PRESENT oraz w trakcie przeglądania prezentacji użyć klawiszy CTRL + S (windows i linux) lub klawisz jabłuszka + S (Mac OS).
UWAGA! Jeśli do prezentacji dodaliśmy elementy z dysku lokalnego całość prezentacji jest zawarta nie tylko w zapisanym pliku, ale również w folderze o tej samej nazwie.

Od ubiegłego roku, ucząc tworzyć prezentacje na lekcji informatyki, uwzględniam również opisaną wyżej.

Gorąco polecam zapoznać się ze wszystkimi możliwościami aplikacji. Mnie osobiście się podoba. Można prezentację przygotować bardzo szybko i łatwo. Jest uniwersalnie ,,przenośna” i może być, przy małym nakładzie pracy, bardzo atrakcyjna.

• O mnie
• Inne wpisy

Jan jackowicz-Korczyński

Zawsze mnie pasjonowały nowe technologie (jestem starszy niż komputer osobisty i internet) ale zawsze w zakresie ich możliwości wsparcia ososbistego rozwoju a nie tylko rozrywki i używki. Jadłęm już chcleb z wielu pieców ale najbardziej lubię pracować z młodzieżą.

Pozostałe wpisy Jan jackowicz-Korczyński (Zobacz wszystkie)

• Nasze memy okolicznościowe - 4 października 2015
• Prosty WEB 2.0 generator kodu atrakcyjnych boxów na bloga lub stronę www. - 23 listopada 2014
• Łatwe pobieranie filmów z Facebooka - 16 listopada 2014