Timeline JS сервіс для візуалізації хронологічних подій

18

Від автора: у цьому уроці я хотів би представити Вашій увазі, дуже функціональний сервіс по створенню інтерактивних часових шкал, на яких зручно і наочно можуть розташовуватися дані щодо різних подій. Тобто TimelineJS – дуже зручний інструмент для візуалізації якоїсь хронології або послідовності подій.

Timeline JS сервіс для візуалізації хронологічних подійTimeline JS сервіс для візуалізації хронологічних подій

Офіційний сайт сервісу Timeline JS розташовується за адресою http://timeline.knightlab.com/.

Timeline JS сервіс для візуалізації хронологічних подій

На головній сторінці Ви відразу ж можете побачити презентацію можливостей і функціоналу тимчасової шкали.

Timeline JS сервіс для візуалізації хронологічних подій

Сервіс Timeline JS, дозволяє відобразити на сайті тимчасову шакалу, що складається з двох окремих блоків. Перший блок – це безпосередньо тимчасова шкала з подіями, які прив’язані до конкретних дат. І другий блок – це слайдер, який відображає докладний контент кожної події. В якості контенту події можна використовувати як звичайний текст, так і різні медіа-матеріали: відео, аудіо, фото, документи і т. д.

Тепер на головній сторінці, клікаєм по посиланню «Make Timeline» і нас перенаправляють на коротку інструкцію по роботі з даним сервісом.

Timeline JS сервіс для візуалізації хронологічних подій

При цьому, відразу ж хотів би відзначити, що сервіс Timeline працює з даними, які було додано в таблицю онлайн документів від сервісу Google. Тому для початку необхідно створити дану таблицю, яка називається шаблоном для сервісу Timeline. Але з нуля, звичайно ж, таблицю ми створювати не будемо, так як розробники рекомендують використовувати вже готовий шаблон, який в подальшому буде відредагований. У пункті першому інструкції присутнє посилання, на шаблон розробників, який, до речі, використовується для демо-презентації. Тому клікаєм по даному посиланню і переходимо на сторінку готового шаблону.

Timeline JS сервіс для візуалізації хронологічних подій

При цьому даний шаблон необхідно скопіювати в свій обліковий запис сервісу Google, для цього використовуємо кнопку «Використовувати цей шаблон». Після натискання на цю кнопку, готовий шаблон буде скопійований в обліковий запис Google.

Timeline JS сервіс для візуалізації хронологічних подій

Далі даний шаблон необхідно опублікувати в інтернеті – для цього переходимо в меню Файл і натискаємо на посилання «Опублікувати в інтернеті…».

Timeline JS сервіс для візуалізації хронологічних подій

При цьому, у спадному списку копіюємо посилання на цей документ. Далі повертаємося на сторінку інструкції і в третьому пункті — вставляємо в текстову область скопійоване посилання.

Timeline JS сервіс для візуалізації хронологічних подій

Далі опускаємося до пункту 4 та в текстовій області копіюємо готовий код, який необхідно додати на сторінку Вашого сайту, на якій необхідно відобразити шкалу.

Timeline JS сервіс для візуалізації хронологічних подій

Отриманий код я додаю на тестову HTML сторінку:

Тестовий однстраничный сайт

При цьому на екрані ми побачимо наступне (в даному прикладі я вже заздалегідь відредагував шаблон):

Timeline JS сервіс для візуалізації хронологічних подій

Тепер хотів би сказати кілька слів про даних, які потрібно зазначати в комірках шаблону:

Комірки A-D – час початку події. А – рік, B – місяць, C – день, D – час.

Клітинки E-H – час закінчення події. E – рік, F – місяць, G – день, H – час.

Осередок J – заголовок події.

Осередок K – текстове опис події (довільний текст – контент події).

Осередок L – медіа-контент події. В якості медіа-контенту можна використовувати: зображення або фото з різних фото-хостингів (Instagram, Flickr); відео з відео-хостингів Vimeo, DailyMotion, Vine, і YouTube; статті з Вікіпедії і багато іншого. Повний список підтримуваних медіа-матеріалів наведено за адресою: http://timeline.knightlab.com/docs/media-types.html

Осередок M – автор події або посилання на сторінку автора події (при додаванні посилання, необхідно використовувати HTML тег ).

Осередок N – заголовок або короткий опис, який відображається під медіа-контентом (так само допускається використання посилань).

Осередок Про – шлях до мініатюрі зображення використовується в короткому описі події на часовій шкалі.

Осередок Р – додаючи в дану комірку значення title — Ви призначаєте певну подію — як би стартовою сторінкою слайдера, при цьому дана подія відображається при завантаженні сторінки і виключається з тимчасової шкали.

Осередок Q – використовуючи дану комірку – Ви можете розбити події по окремим групам.

Осередок R – фон для кожного слайда подій. В якості фону Ви вправі вказувати колір, або посилання на зображення, яке буде використовуватися в якості фону.

Тепер залишилося тільки додати дані по питаннях подій у шаблон і оновити сторінку тестового сайту.

На цьому даний урок завершено. Всього Вам доброго і вдалого кодування!!!