Jak zrobić linię czasu w Timeline JS

Linia czasu to metoda pozwalająca na wizualizację wydarzeń w porządku chronologicznym. Linia czasu w wersji cyfrowej pozwala ten prosty schemat wzbogacić o elementy multimedialne. W najbliższym czasie przyjmy się kilku aplikacjom internetowym służącym do jej przygotowywania, zaczynając od usługi Timeline JS.

Timeline JS

To ciekawa aplikacja, pracujemy w niej bowiem w oparciu o … arkusz kalkulacyjny Google  Wszystkich przerażonych uspokajam – finalnie powstaje atrakcyjna wizualnie linia czasu.

Po wejściu na stronę usługi, pod poniższym adresem …

http://timeline.knightlab.com/ 

… klikamy w przycisk „make a timeline”, choć możemy przyjrzeć się również gotowym i udostępnionym w serwisie liniom czasu (zakładka „Examples”)

Po kliknięciu przenoszeni zostajemy do instrukcji, która krok po kroku opisuje czynności, które mamy do wykonania.

Pobranie arkusza

Kopiujemy szablon arkusza linii czasu …

… który pojawi się na naszym dysku Google Drive

Edycja arkusza – tworzymy linię czasu

Edytujemy arkusz

Wzorcowy arkusz zawiera instrukcję postępowania na jego edycją (w języku angielskim).

Najprościej edytować jest poszczególne komórki arkusza i podmieniać treść. Na potrzeby artykułu wykorzystałem materiały IPN z portalu https://1wrzesnia39.pl/39p/ by stworzyć „zaczyn” linii czasu poświęconej Wojnie obronnej 1939 r.  Za chwilę wrócimy do metod edycji arkusza, na razie opublikujmy go, byśmy mieli możliwość podglądu produktu finalnego.

Publikacja arkusza – widzimy naszą linię czasu!

Przed powrotem na stronę Timeline JS, gdzie umieścimy gotowy link do naszej linii czasu, musimy najpierw opublikować arkusz w sieci. Procedura jest bardzo prosta. Spójrzmy na obrazek:

Po wybraniu opcji „Opublikuj w internecie”, pojawi się kolejno okno …

…. w którym klikamy „Opublikuj”, w kolejnym okienku potwierdzamy naszą decyzję i teraz

zamykamy okienko i kopiujemy adres bezpośrednio z paska:

Przechodzimy ponownie na stronę Timeline JS i wklejamy adres  w wyznaczonym  do  tego  miejscu:

W ten sposób w kolejnym kroku uzyskujemy dostęp do podglądu naszej linii czasu („Preview”) a także widzimy dwa ważne okienka, dzięki którym będziemy mogli później udostępnić nasze dzieło.

Dzięki podglądowi możemy porównywać to nad czym pracujemy z pozycji arkusza z widokiem docelowym linii czasu.

A takie porównanie poważnie zmienia dotychczasowe nasze patrzenia na to, co robimy – zamiast arkusza kalkulacyjnego widzimy atrakcyjną wizualnie grafikę. Timeline JS „przerobił” arkusz w elegancki „slajd”.

Wróćmy do edycji

Mając opublikowany arkusz możemy wracać do widoku podglądu i na bieżąco obserwować kolejne etapy naszej pracy na edycją arkusza – linii czasu. Do arkusza możemy wstawiać materiały multimedialne, takie jak filmy, zdjęcia, mapy. Pełny wykaz obsługiwanych formatów autorzy aplikacji umieścili tutaj. 

Na przykładzie tego fragmentu arkusza …

… widać kolejność wykonywanych działań: wpisałem datę (1.09.1939), godzinę (04:45:00), tytuł nagłówka, następnie jego treść i wkleiłem link do filmiku na Youtube (aplikacja Timeline JS uwzględni link z oznaczeniem początku rozpoczęcia odtwarzania). W przypadku zdjęć najkorzystniej wstawia się je z serwisu Flickr. Zdjęcia możemy użyć również jako tła, wstawiając je w rubryce „Background”…

… co daje następujący efekt:

W rubryce „Background” możemy zmieniać również kolory, wpisując (wklejając) kody kolorów html. Ściąga znajdziecie tutaj. Kolor czerwony na tym obrazku

to nic innego tylko wpisany w rubryce „Background” kod #FF0000.

Kolejna ważna uwaga. Aplikacja ustawia kolejność wpisów według kolejności, kierując się datami (godzinami też). Więc jeśli nie wpiszemy w którymś wersie daty, to niezależnie od miejsca w arkuszu kalkulacyjnym, zostanie on przerzucony na linii czasu w miejsce po ekranie tytułowym. Inna rzecz, którą zauważyłem: drobny błąd w arkuszu i nie wyświetli się cała linia czasu. Przez pomyłkę w godzinie wydarzenia wpisałem podwójny dwukropek „::” i na podglądzie od razu pojawił się „error” uniemożliwiający wyświetlenie całości linii.

Udostępniamy, współpracujemy

Gotową linię czasu możemy osadzić na stronie internetowej/blogu, wykorzystując gotowy kod embed wygenerowany automatycznie na stronie Timeline JS

a tak wygląda linia czasu (a w zasadzie spreparowany na potrzeby tego artykułu jej początek) osadzona na moim blogui umieszczona na Google Classroom

Ponieważ arkusze Google są przystosowane do pracy w trybie współpracy, uczniowie mogą pracować nad nimi wspólnie, realizując grupowe projekty. Wystarczy by osoba, która założy arkusz (skopiuje na swój dysk szablon z Timeline JS) udostępni go innym uczniom:

Podsumowanie – plusy dodatnie, plusy ujemne …

Dostajemy do ręki narzędzie bezpłatne (licencja open source) i dające możliwość przygotowania linii czasu we współpracy z innymi osobami w formie – nietypowej – arkusza kalkulacyjnego. Arkusz magazynujemy na naszym dysku, a usługa Timeline JS udostępnia usługę jego wizualizacji. Pierwszym problemem, który się pojawia to konieczność posiadania pewnego obycia i doświadczenia w pracy z arkuszem kalkulacyjnym i znajomość zasad udostępniania plików, kodowania kolorów etc. Nie jest to narzędzie pozwalające na działanie na zasadzie „przeciągnij – upuść”, za co – nota bene – najczęściej trzeba płacić. Po pewnym czasie użytkowania przekonujemy się jednak, że praca nad tworzeniem linii czasu nie jest wcale trudno, szczególnie jeśli w drugim okienku przeglądarki ustawimy sobie podgląd gotowej linii czasu. Widok efektów naszej pracy jest motywujący do dalszego działania. Kolejnym plusem jest precyzyjna instrukcja obsługi Timeline JS, udostępniona przez twórców. Mam nadzieję, że niniejszy artykuł również ułatwi korzystanie z tego narzędzia. Mój niedosyt bierze się jednak z czegoś innego. Końcowy widok linii czasu, choć bardzo atrakcyjny, wywołuje u mnie skojarzenia bardziej z prezentacją (slajd po slajdzie) niż z linią czasu. Z tego powodu w niedługim czasie zamierzam Państwu przedstawić inne (niestety, niekoniecznie w pełni darmowe) narzędzia do konstruowania bardziej klasycznych w wyglądzie „timeline’ów”