Alternatywa HTML5 dla Prezi: o krok dalej w technologii prezentacji

prezi2strut
STRUT w HTML5 alternatywą dla Prezi

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:

struto1
Edytor prezentacji: edycja slajdów

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).

struto2
Menu górne aplikacji

 

struto3
Skalowanie i pozycjonowanie

 

 

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:

struto4
Właściwości tekstu

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.

struto6

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.

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

 

Eksportowanie prezentacji

struto9Aby 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:

struto7
Eksport prezentacji, zakładki: JSON oraz ZIP

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.

Print Friendly

8 thoughts on “Alternatywa HTML5 dla Prezi: o krok dalej w technologii prezentacji

  • 5 listopada 2014 o 09:15
    Permalink

    Witaj,
    dzięki za opis. W Prezi bardzo mnie pociąga sam fakt tworzenia prezentacji „na pustej kartce”. Wydaje mi się, że organizacja tego narzędzia wpływa na proces powstawania prezentacji. To trochę tak jak pisał Goethe, piszący na maszynie o swoich listach – stały się one bardziej zwięzłe przez sam fakt użycia maszyny, na co zwrócił mu uwagę jego korespondent. Goethe wysnuł więc wniosek iż narzędzie wpływa na proces tworzenia.
    Myślę, że twórcy Prezi będą musieli stworzyć wersję w HTML5. Mam nadzieję, że tak zrobią:)

    Odpowiedz
    • 2 lutego 2015 o 11:29
      Permalink

      A ja myślę, że twórcy Prezi nie muszą dostosowywać jej do HTML5, bo takim już jest strut.io. Zresztą wszystkie narzędzia pracujące na Flashu sa powoli eliminowane. Ostatnio nawet YOUTUBE zrezygnował z flasha.

      Odpowiedz
  • 1 lutego 2015 o 15:51
    Permalink

    Jak zapisać prezentację w Prezi tak, abym mogła umieścić ją w formie odtwarzającego się filmiku na youtube?

    Odpowiedz

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Time limit is exhausted. Please reload CAPTCHA.