1 заметка с тегом

веб-сервисы

TimelineJS — сервис для создания интерактивных веб-таймлайнов

Удобным и наглядным способом отобразить последовательность событий, имеющих конкретные даты или временные рамки, является таймлайн («временная шкала»).

Одним из бесплатных инструментов (более того — с открытым исходным кодом), позволяющих создавать интерактивные таймлайны, является библиотека TimelineJS. Созданные таймлайны могут быть размещены на любом веб-сайте или блоге, позволяющем встраивать IFrame’ы либо JavaScript и CSS.

Источником входных данных, описывающим слайды-события, может быть гугл-документ (таблица Google Spreadsheets) либо — для продвинутых пользователей — особая структура данных в формате JSON.

Таймлайн, созданный с использованием этой библиотеки, представляет набор «слайдов»: каждый слайд — одно событие. Каждое событие может описываться следующими параметрами: название, небольшой описательный текст, дата (или две даты — начало и конец периода). Слайд может содержать медиаобъекты (изображения, видео, аудио, карты, твиты и другие объекты). Помимо медиаобъекта, слайд может содержать фоновое изображение. События в таймлайне могут быть сгруппированы в «эры».

Разработчики библиотеки предлагают на сайте удобный сервис-конструктор встраиваемого кода. В простейшем варианте для создания своего таймлайна необходимо выполнить несколько простых действий:

  1. Создать гугл-таблицу по предоставленному разработчиками шаблону.
  2. Заполнить её данными.
  3. Опубликовать таблицу, получив публичную ссылку.
  4. Вставить полученную на предыдущем шаге ссылку в конструктор кода.
  5. Готово! Сервис сразу же выдаёт код, готовый для встраивания в веб-страницы.
    Код, предлагаемый по умолчанию, готов к использованию. Но таймлайн весьма гибко настраивается, если стандартные опции не подходят. В частности, предлагаемый по умолчанию код подразумевает английскую локализацию (language=en), однако русская локализация поддерживается в полной мере (language=ru).

Для сайтов, созданных на движке WordPress, может оказаться полезным официальный плагин от разработчиков библиотеки, ещё более упрощающий встраивание таймлайнов.

Пример использования таймлайна можно посмотреть на сайте школы № 509 в разделе «История школы»: на временную шкалу нанесены важные и интересные события в пока ещё недолгой (двухлетней) истории школы-новостройки:

2017   веб-сервисы   таймлайн