W dzisiejszych czasach obraz jest wart więcej niż tysiąc słów. W szkołach coraz częściej docieramy do uczniów, wykorzystując film i zdjęcia. Coraz większą popularnością cieszą się plakaty, infografiki, screencasty, nowoczesne prezentacje i interaktywne obrazki. Ciągle powstają nowe narzędzia oferujące sporo możliwości tworzenia atrakcyjnych materiałów edukacyjnych. Problemem staje się już nie znalezienie narzędzia TIK, ale wybranie tego właściwego, które zaspokoi nasze potrzeby twórcy i edukatora. Często dane narzędzie oferuje możliwość utworzenia jednego rodzaju materiału edukacyjnego, np.: plakatu, prezentacji, filmu z adnotacjami, osi czasu lub interaktywnego obrazka. W pewnym momencie orientujemy się, że mamy dziesiątki kont na różnych stronach internetowych i już sami nie pamiętamy, z jakich narzędzi warto skorzystać, aby osiągnąć określony cel.
Z pomocą nadchodzi platforma Genial.ly oferująca możliwość tworzenia różnorodnych pomocy edukacyjnych. Korzystanie z tego narzędzia jest dość intuicyjne, a efekty są rewelacyjne. Dostępna jest wersja bezpłatna, mająca nieco ograniczone funkcje, ale zupełnie wystarczająca, aby tworzyć świetne zasoby edukacyjne. Minusem dla osób nieznających języków obcych będzie brak polskiej wersji językowej platformy. Dostępne są wersje: angielska, hiszpańska i francuska. Na szczęście układ Genial.ly jest bardzo przejrzysty i tworzenie różnego typu zasobów przebiega dość podobnie. Jeśli nauczymy się, jak projektować interaktywne obrazki, praca nad prezentacjami, osiami czasu i infografikami nie powinna przysporzyć zbyt wielu trudności.
Zacznijmy od założenia bezpłatnego konta użytkownika. Uruchamiamy stronę https://www.genial.ly.
Aby założyć konto, trzeba wybrać opcję Sign up lub Create an account. Zakładanie konta przebiega według standardowych zasad: należy podać swój adres e-mail, ustalić i potwierdzić hasło do tego konta oraz zaznaczyć, że zapoznaliśmy się z warunkami użytkowania i polityką prywatności Genial.ly. Można też wybrać opcję zakładania konta (i późniejszego logowania się) za pośrednictwem swojego istniejącego konta na Facebooku, Twitterze, Google+ lub LinkedIn. Po dokonaniu rejestracji trzeba się zalogować.
Bezpośrednio po zalogowaniu przenosimy się automatycznie do zakładki My creations. Znajdą się tu wszystkie projekty stworzone na platformie ułożone w kolejności powstania, od najnowszych do najstarszych. Możliwość tworzenia folderów i porządkowania w ten sposób swoich zasobów jest zarezerwowana dla użytkowników korzystających z płatnej wersji Genial.ly. W menu bocznym widoczne są niezwykle istotne dla użytkowników zakładki — My creations (moje dzieła) oraz Create genially (stwórz „genialnie”).
Informacja o płatnych funkcjach platformy jest przekazywana za pośrednictwem żółtej gwiazdki (widoczna przy opcji Create folder), którą są oznaczone zasoby i narzędzia premium.
Aby rozpocząć tworzenie, należy przejść do zakładki Create genially w menu bocznym lub kliknąć przycisk Create genially w środkowej części okna.
Po przejściu do zakładki tworzenia materiałów pojawia się ekran z klasyfikacją typów zasobów, które można zaprojektować na platformie Genial.ly. Zostały wydzielone cztery kategorie tematyczne typów narzędzi: do prezentowania (To present), do interakcji (To interact), do wyjaśniania (To explain) i do dystrybucji (To distribute).
W pierwszej kategorii znajdują się: prezentacja, prezentacja wideo, raporty oraz zasoby edukacyjne, w drugiej: interaktywny obrazek, media, gra i quiz, w trzeciej: infografika, oś czasu, lista, narzędzie do zaprezentowania tematu w ogólnym zarysie i mapa, w czwartej: wydarzenie, cyfrowa kartka, cyfrowy plakat oraz CV.
W artykule zostanie wyjaśnione krok po kroku, jak stworzyć interaktywny obrazek. Po kliknięciu w ikonkę Interactive image (interaktywny obrazek) przechodzimy do zakładki poświęconej interaktywnym obrazkom, gdzie znajdują się przykłady takich obrazków. Dzięki temu można poznać pomysły innych użytkowników na projektowanie tego typu zasobów. Po kliknięciu miniatury Create interactive image (stwórz interaktywny obrazek) zaczynamy proces tworzenia.
Pracę rozpoczynamy od wyboru obrazka, który będziemy modyfikować, dodając m.in. elementy interaktywne. Można wykorzystać plik graficzny, który mamy zapisany na dysku komputera (From your computer), lub wykorzystać grafikę opublikowaną w internecie, podając jej adres (From URL). W przypadku pliku z komputera dodajemy go albo metodą przeciągnij i upuść (drag and drop) na wyznaczone pole, albo przesyłając go z wybranej lokalizacji na komputerze (Upload an image). Po załadowaniu pliku zatwierdzamy wybór przyciskiem Accept.
Obraz zostanie załadowany i pokaże się w oknie edytora. Bogate menu daje duże możliwości użytkownikom (także tym, którzy korzystają z bezpłatnej wersji platformy).
Mamy możliwość dostosowania widoku pola roboczego poprzez jego pomniejszanie i powiększanie, co ułatwia pracę nad detalami projektu. W panelu po lewej stronie znajdują się narzędzia służące do dodawania stron (Pages), modyfikacji tła (Background), dodawania zasobów zewnętrznych (Insert), mediów (Media), zasobów platformy Genial.ly (Resources), tekstu (Text), elementów interaktywnych (Interactive elements). Po prawej stronie są dwa różowe elementy, umożliwiające dodawanie efektów interaktywnych i animacji do wybranych elementów kompozycji.
Każda praca jest na bieżąco automatycznie zapisywana. W każdej chwili można przejść do głównego ekranu platformy Genial.ly, klikając w logo aplikacji znajdujące się w lewym górnym rogu edytora.
Do projektu można z łatwością dodać kolejne strony, klikając ikonę plusa w zakładce Pages (strony). Wszystkie stworzone w ten sposób slajdy wyświetlą się w podłużnym panelu bocznym jeden pod drugim. W tym miejscu można też zmienić rozmiar naszego obrazka i kolejnych stron, o które można go wzbogacić.
Jest dużo możliwości dodawania kolejnych stron do obrazka. Można skorzystać z gotowych szablonów (Template) albo własnych projektów (My projects) z zakładki My creations. Szablony dają dużo możliwości projektowania treści. Pierwszy z nich jest pusty (do zagospodarowania), a pozostałe stanowią ciekawe propozycje układu treści, grafik, filmów na jednym slajdzie. Po wybraniu szablonu trzeba kliknąć przycisk Add, aby dodać stronę.
Można zmienić rozmiar obrazka i towarzyszących mu stron i zaakceptować zmiany, klikając Apply changes.
Edytor Genial.ly daje dużo możliwości wyboru tła. Po kliknięciu w pasku narzędzi bocznych zakładki Background (tło) otworzy się panel boczny z bogatą zawartością. U góry jest do wyboru zaprojektowanie właściwego tła obrazka (Canvas) lub warstwy znajdującej się pod obrazkiem i widocznej w naszym projekcie jako obramowanie.
Możliwości wyboru tła jest bardzo dużo. Można zostawić projekt bez zmiany tła (None). Pozostajemy wtedy przy wybranej na samym początku grafice. Jeśli jednak planujemy zdecydować się na inny obraz, do wyboru są: pliki z komputera (Upload), wybór koloru tła (Color), obrazy z biblioteki Genial.ly (Library) oraz zdjęcia z serwisu Pixabay. Wybór własnego tła (My backgrounds) jest dostępny tylko dla użytkowników premium.
Należy też zwrócić uwagę na obrazki oznaczone żółtą gwiazdką. Są one niedostępne dla użytkowników korzystających z darmowego planu. Ciekawym rozwiązaniem jest możliwość wyboru animowanych grafik oznaczonych na miniaturach specjalną różową ikoną.
Po wybraniu w tej samej zakładce opcji Base można ustawić obraz w warstwie pod naszą podstawową grafiką. Przykładowy efekt takiego działania widać na poniższym obrazie.
Po wybraniu na pasku narzędzi bocznych opcji Insert (wstaw) pojawia się pole do wklejania linków z różnych stron, serwisów, portali internetowych. Materiał, do którego podamy link, zostanie osadzony w naszym projekcie. Zostanie on wyświetlony w obszarze roboczym nie jako link czy statyczny obraz, ale jako interaktywna zawartość. Po wklejeniu linku w przeznaczonym do tego polu należy kliknąć przycisk Insert. Materiał zostanie dodany do projektu.
W dolnej części panelu zostały zamieszczone logo aplikacji i portali, których zawartość można osadzać (są kompatybilne) w projektach na platformie Genial.ly. Wśród nich znajdują się między innymi: Twitter, Facebook, Pinterest, Instagram, LinkedIn, a także narzędzia Google. Na rysunku poniżej znajduje się przykład dokumentu stworzonego na Dysku Google i osadzonego w projekcie Genial.ly. Po opublikowaniu obrazka dokument będzie w pełni interaktywny.
Zakładka Media zawiera grafiki, filmy i pliki audio, które możemy wykorzystać w swoich projektach. Wyboru typu materiału dokonujemy w menu na górze panelu bocznego (Image, Video i Audio). Jeśli zdecydujemy się na wykorzystanie grafiki, będziemy mogli pobrać ją z naszego komputera, podać jej adres internetowy, skorzystać z biblioteki Genial.ly, wybrać obrazek z bazy Pixabay lub Giphy. W podglądzie grafik jest też możliwość skorzystania z wyszukiwarki grafik. Wybrany obrazek należy przeciągnąć do obszaru roboczego, a następnie dostosować jego rozmiary i położenie, używając aktywnych przycisków na jego obramowaniu.
Zaznaczoną grafikę można edytować, korzystając z paska narzędzi na samej górze okna. Zaznaczony element można: skopiować, usunąć, zablokować, przesunąć na wierzch lub na spód w przypadku nakładania się na siebie różnych obiektów, wybrać położenie w obszarze roboczym, ustawić transparentność od pełnej widoczności do zupełnej przezroczystości, ustawić maskę/za-słonę w wybranym przez nas kształcie lub przyciąć.
Analogicznie do zakładki Media korzysta się z zakładki Resources (zasoby). Można wybierać z bogatego zbioru zasobów platformy Genial.ly, poszukując grafik w kategoriach: ikony, kształty, linie i strzałki, ilustracje, scenki i mapy. Można też skorzystać z wyszukiwarki, wpisując interesujące nas słowo. W panelu bocznym widać rezultaty wyszukiwania ilustracji oznaczonych słowem kluczowym „book” (książka). Wybraną grafikę należy przeciągnąć do obszaru roboczego, aby dodać ją do projektu.
Do projektu możemy też dodać tekst. W tym celu należy przejść do zakładki Text. Do wyboru są różne style tekstu oraz wypunktowane i numerowane listy. Genial.ly obsługuje polskie znaki.
Elementy interaktywne znajdziemy w zakładce Interactive elements. Same w sobie nie mają one interaktywnych opcji, są wyłącznie ikonami. Taką funkcję dodajemy do nich samodzielnie, korzystając z dodatkowych przycisków. Do wyboru są: przyciski (Buttons), przyciski z tekstem (Buttons with text), znaczniki (Markers), ikony sieci społecznościowych (Social networks), numery i litery (Numbers and letters) oraz niewidoczny obszar (Invisible area). Wybrane ikony wstawiamy w tych miejscach obszaru roboczego, do których chcemy dodać interaktywną zawartość. Jeśli chcemy np. odesłać odbiorców do strony na Facebooku, wystarczy wybrać ikonę Facebooka (ikony sieci społecznościowych) i dodać do niej link. Wybór ikon wraz z wyszukiwarką znajduje się w dolnej części panelu bocznego (Use key words to search).
Dużą pomocą dla twórców korzystających z platformy Genial.ly jest zamieszczenie w zakładce z interaktywnymi elementami opcji zaznaczania obiektów z wykorzystaniem niewidocznego obszaru (Invisible area).
Ten element należy przeciągnąć do obszaru roboczego i rozciągnąć go tak, aby w jego granicach znalazły się obiekty, do których chcemy dodać ten sam efekt animacji. Będą one traktowane jak jeden obiekt. Element służący do zaznaczenia obszaru nie będzie widoczny w naszym projekcie
Gdy wybrane obiekty zostaną wstawione do projektu, można przejść do etapu dodawania do nich interaktywności i animacji. Funkcje te są dostępne w prawym górnym rogu obszaru roboczego oraz u góry każdego zaznaczonego obiektu.
Po wybraniu ikony interaktywności otworzy się okienko z wyborem odpowiedniego jej rodzaju.
Jeśli chcemy dodać niedużo materiału, powinniśmy wybrać Tooltip (podpowiedz). W szarym prostokątnym polu u góry okna należy wpisać tytuł zawartości, a w oknie treści wpisać nasz tekst. Można do niego dodać m.in. grafikę i film. Po uzupełnieniu wymaganych pól trzeba zapisać pracę, klikając przycisk Save u dołu okna. Dodana treść pojawi się nad obiektem wzbogaconym o interaktywność po najechaniu na niego kursorem myszy.
W przypadku dużej dawki informacji zdecydujmy się na Window. Po kliknięciu obiektu otworzy się osobne okno z dodaną przez nas treścią. Jeśli interaktywny obrazek ma dodatkowe strony (można je dodać w zakładce Pages), możemy dodać do wybranego obiektu element interaktywny, który przeniesie nas do wskazanej strony. Ostatnią możliwością jest dodanie jako elementu interaktywnego linku do wybranego zasobu internetowego. Wyświetli się on w osobnej zakładce.
Dodane przez nas animacje i interaktywność nie będą widoczne w trybie edycji projektu. Aby zobaczyć, jak będą się prezentowały w zapisanej wersji interaktywnego obrazka, należy wybrać opcję Preview (podgląd) z menu u góry ekranu.
Kiedy projekt jest w trybie podglądu, u góry ekranu widnieje napis „This is a preview" W każdej chwili można wrócić do trybu edycji, klikając przycisk Edit. Interaktywny efekt jest widoczny po najechaniu kursorem myszy na grafikę przedstawiającą smartfon. Wyświetla się okno z informacją o e-bookach.
Poza interaktywnością do wybranych przez nas obiektów można dodać efekty animacji. Można do nich przejść bezpośrednio z menu podręcznego zaznaczonego elementu projektu, klikając odpowiednią ikonę nad kwadratowym zaznaczeniem.
W panelu bocznym z prawej strony należy wybrać rodzaj animacji: pojawienie się lub zniknięcie obiektu, efekt ciągły lub wywoływany przez najechanie na obiekt kursorem myszy (Hover mouse). Po wybraniu typu animacji określamy jej szczegóły: kierunek ruchu (Direction) oraz efekt, np. w przypadku pojawienia się obiektu mamy do wyboru m.in. różnego rodzaju obroty i rotacje. Możemy też opóźnić start animacji oraz zmienić jej tempo.
Interaktywny obrazek ożywią animacje ciągłe lub wyzwalane po najechaniu kursorem myszy. Wśród ciągłych mamy do wyboru m.in. pulsowanie, pojawianie się i znikanie, rotacje oraz efekt losowy. Warto przetestować samodzielnie wszystkie możliwości, aby w pełni poznać potencjał tego narzędzia.
Gdy już przygotujemy nasz interaktywny obrazek, warto jeszcze raz sprawdzić, czy wszystko działa poprawnie, korzystając z opcji podglądu (Preview). Następnie możemy udostępnić efekt końcowy przez internet (Share). Niestety, w bezpłatnej wersji platformy nie ma możliwości ściągnięcia projektu w wersji offline na dysk komputera. Ta opcja jest dostępna tylko dla użytkowników premium. Na szczęście opcje udostępniania są bardzo rozbudowane. Po wybraniu Share można gotowy projekt udostępnić poprzez bezpośredni link (Link): pierwsza opcja jest bezpłatna (View as social page), a druga dla użytkowników premium (View as exclusive page). Dla osób prowadzących strony internetowe i blogi idealna będzie możliwość osadzenia interaktywnego obrazka bezpośrednio, np. we wpisie (Insert). Naszą pracę możemy przesłać e-mailem (Send) albo udostępnić w mediach społecznościowych (Social networks).
Wszystkie przygotowane przez nas projekty są automatycznie zapisywane i przechowywane na naszym koncie na platformie Genial.ly.
