HIT: atrakcyjna prezentacja na szybko w technologii HTML5

Gorąco  rekomenduję aplikację webową STRUT IMPRESS.JS  http://strut.io/index.html . Narzędziem tym można  prezentację przygotować bardzo szybko i łatwo. Jest uniwersalnie ,,przenośna” i może być, przy małym nakładzie pracy, bardzo atrakcyjna.

Aplikacja wzorowana jest na atrakcyjnej wizualizacji znanej z Prezi. Podobnie zresztą rozwiązano edycję slajdów.


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.

 

Zobacz demo takiej prezentacji: 

http://pressmedia.vilogdansk.pl/images/NEWSY/2020-04/beata_uw/index.html#/step-1

Nawigacja po niej = klawisz spacji.

Strut.IO tworzy aplikację w formacie HTML5, a więc zapisana jest ona w pliku nazwa.html oraz folderze: nazwa_files

 Tym samym jest zarówno:

  • PRZENOŚNA i UNIWERSALNA: można ją uruchomić (np z pendrive) w dowolnej przeglądarce internetowej nowszej generacji (obsługującej HTML5)
  • SIECIOWA: można ją umieścić na dowolnym serwerze jako stronę WWW

 

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.

 

 

.

 

Innowacja pedagogiczna jest finansowana ze środków przyznanych przez Urząd Miasta Gdańsk.

Free Joomla! templates by AgeThemes