💊 Timeline JS

Timeline JS – сервіс для створення таймлайнів.

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

Поради та підказки

1. Зробіть його коротким. Ми рекомендуємо не робити більше 20 слайдів, щоб читач міг їх переглянути.
2. Вибирайте історії, які мають сильну хронологічну розповідь. Історії, в яких потрібно стрибати в часі, не дуже добре працюють.
3. Пишіть кожну подію як частину більшого наративу.
4. Включіть події, які ведуть до основних подій, а не лише основні події.

Медіа-джерела

TimelineJS може підтягувати медіа з різних джерел. Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Google Maps, Wikipedia, SoundCloud, Document Cloud та інші!

Створіть часову шкалу

TimelineJS працює на будь-якому сайті або блозі. Створіть свою власну за чотири простих кроки.

1. Створіть свою таблицю. Створіть нову таблицю Google за допомогою нашого шаблону. Вам потрібно буде скопіювати шаблон у власний обліковий запис Google Drive, натиснувши кнопку “Зробити копію”. Внесіть дати, текст і посилання на медіа у відповідні стовпчики. Щоб дізнатися більше про роботу з нашим шаблоном, див. статтю Створення часової шкали з таблиці Google. У меню “Файл”, підменю “Поділитися” виберіть “Опублікувати в Інтернеті”.
2. У наступному вікні натисніть зелену кнопку “Опублікувати”. У відповідь на запитання “Ви впевнені…?” натисніть “ОК”. Не звертайте уваги на URL-адресу, яка з’явиться в центрі вікна. Просто закрийте вікно за допомогою хрестика у верхньому правому куті. Після закриття вікна скопіюйте URL-адресу в адресний рядок браузера. Вона знадобиться вам на наступному кроці.
3. Скопіюйте/вставте URL-адресу електронної таблиці у поле нижче, щоб створити часову шкалу. (Переконайтеся, що ви опублікували таблицю).
4. Поділитися посиланням. Використовуйте це посилання для прямого доступу до часової шкали.

Якщо ви вбудовуєте на Medium.com або інших сервісах, що підтримують oembed, просто вставте це посилання в рядок, де ви хочете, щоб з’явилася ваша шкала часу.

Поширені запитання

Як редагувати монтажну шкалу?

Після створення часової шкали ви можете внести зміни, повернувшись до своєї таблиці Google. Зміни, які ви вносите в таблицю, автоматично стають доступними на вашій шкалі часу – вам не потрібно повторювати крок “опублікувати в Інтернеті” (крок 2). Якщо ви хочете внести зміни до додаткових налаштувань, вам потрібно буде оновити код вбудовування, але якщо ви змінюєте лише вміст в електронній таблиці, то більше нічого не потрібно робити.

З якими браузерами працює TimelineJS?

Наш основний браузер для розробки та тестування – Google Chrome. Ми ретельно дотримуємося веб-стандартів, тому вважаємо, що TimelineJS повинен ефективно працювати в усіх сучасних браузерах. Відомо, що TimelineJS не працює з версіями Internet Explorer до IE10.

Деякі з моїх слайдів не відображаються. Де вони знаходяться?

Якщо слайди, які не відображаються, знаходяться в кінці вашої шкали часу, знайдіть порожній рядок електронної таблиці відразу після останнього слайда, який відображається. Коли TimelineJS запитує у Google ваші дані, Google надсилає їх лише до першого порожнього рядка, тому TimelineJS насправді показує все, що може. Не забувайте шукати приховані рядки таблиці або рядки з дуже малою висотою.

Які є варіанти зміни вигляду моєї шкали часу?

По-перше, переконайтеся, що ви знаєте все, що можна зробити в конфігурації електронної таблиці, наприклад, кольори фону та зображення. Також ознайомтеся з додатковими налаштуваннями на “кроці 3” інструменту для авторів. Ви можете змінити шрифти, положення навігації на часовій шкалі та початковий рівень масштабування. Якщо ви все ще хочете зробити більше, є ще кілька опцій конфігурації. Більшість з них призначені для тонкого налаштування, але деякі з них можуть бути корисними.

Недостатньо параметрів. Я хочу більше контролю над [розміром шрифту/кольором/тощо]. Чи можу я змінити щось за допомогою CSS?

Оскільки існує дуже багато деталей у стилізації, це не зовсім просто, але, якщо у вас є певні технічні можливості, ви можете перевизначити правила CSS TimelineJS і мати повний контроль над виглядом шкали часу.

Як я можу класифікувати або групувати події?

Кожна подія на монтажному столі може мати властивість групи. Події з однаковою групою відображаються в одному рядку або сусідніх рядках, а спільне значення їхньої властивості групи використовується як мітка біля лівого краю монтажного столу. Групи можна встановити за допомогою стовпчика “група” у таблиці Google Spreadsheet або властивості “група” об’єкта слайда JSON. TimelineJS не підтримує жодних інших спеціальних стилів для подій в одній групі.

Перший слайд на моїй часовій шкалі не є першим за хронологією. Чому так сталося?

При використанні Google Таблиці для налаштування часової шкали, якщо ви введете слово “заголовок” у стовпчик типу, цей слайд буде розташовано попереду, незалежно від значень у стовпчиках дат. Докладнішу інформацію див. в документації до Google Таблиці.

Хто може отримати доступ до даних у моїй таблиці Google?

Щоб використовувати TimelineJS з таблицею Google як джерелом даних, ви повинні зробити дані загальнодоступними в Інтернеті. Зазвичай, дані все ще видимі лише для людей, які знають посилання, тому, якщо ви публікуєте шкалу часу приватно, сторонні навряд чи побачать дані. Однак вона все одно залишається публічною, тож ви маєте вирішити, чи це прийнятно.

Конфіденційність дуже важлива для мене. Як мені використовувати TimelineJS?

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

Як ввести дати до нашої ери?

Щоб ввести дати до нашої ери, просто використовуйте від’ємне значення року. Звичайно, ви також можете ввести місяць і число, якщо вони вам потрібні.

Як створити дуже давні дати?

Зазвичай, вам не потрібно думати про це – просто введіть дати, які вам потрібні. Timeline can handle dates literally to the beginning of time. For dates more than about 250,000 years ago, only the year is usable. Підтримка старіших дат все ще відносно нова, тож якщо щось не працює, відвідайте наш сайт технічної підтримки.

Чи буде моя електронна таблиця знайдена пошуковими системами?

За звичайних обставин Google забороняє пошуковим системам індексувати електронні таблиці, опубліковані в Інтернеті. Звичайно, якщо сторінка є загальнодоступною в Інтернеті, цілком можливо, що пошукова система проігнорує ці вказівки.

Чи можна використовувати TimelineJS з WordPress?

Це залежить від конкретного випадку. TimelineJS не працює з сайтами WordPress.com. Ми досліджуємо способи вирішення цієї проблеми.

Якщо ви можете встановити плагіни до вашої інсталяції WordPress, у нас є плагін WordPress для Timeline. Він підтримує вбудовування шкали часу за допомогою “шорткоду” WordPress, а починаючи з версії 3.3.14.0, він також має експериментальну підтримку “oembed”. Це означає, що ви можете взяти пряму URL-адресу на шкалу часу (як ви отримуєте за допомогою кнопки “отримати посилання для попереднього перегляду”) і помістити її в публікацію в окремий рядок, і вона буде вбудована. (Переконайтеся, що ви оновили плагін, перш ніж спробувати).

Чи є TimelineJS вільним для комерційного використання?

TimelineJS випускається під ліцензією Mozilla Public License (MPL), версія 2.0. Це означає, що TimelineJS можна вільно “використовувати, відтворювати, робити доступним, змінювати, показувати, виконувати, поширювати” або застосовувати іншим чином. Вам не потрібен наш дозвіл, щоб публікувати історії за допомогою TimelineJS, і вам не потрібно платити нам ніяких зборів або домовлятися про будь-яку подальшу ліцензію, окрім MPL. Щоб дізнатися більше про те, що ви можете робити з TimelineJS, прочитайте нашу сторінку ліцензії.