TimelineJS — сервис для создания интерактивных веб-таймлайнов
Удобным и наглядным способом отобразить последовательность событий, имеющих конкретные даты или временные рамки, является таймлайн («временная шкала»).
Одним из бесплатных инструментов (более того — с открытым исходным кодом), позволяющих создавать интерактивные таймлайны, является библиотека TimelineJS. Созданные таймлайны могут быть размещены на любом веб-сайте или блоге, позволяющем встраивать IFrame’ы либо JavaScript и CSS.
Источником входных данных, описывающим слайды-события, может быть гугл-документ (таблица Google Spreadsheets) либо — для продвинутых пользователей — особая структура данных в формате JSON.
Таймлайн, созданный с использованием этой библиотеки, представляет набор «слайдов»: каждый слайд — одно событие. Каждое событие может описываться следующими параметрами: название, небольшой описательный текст, дата (или две даты — начало и конец периода). Слайд может содержать медиаобъекты (изображения, видео, аудио, карты, твиты и другие объекты). Помимо медиаобъекта, слайд может содержать фоновое изображение. События в таймлайне могут быть сгруппированы в «эры».
Разработчики библиотеки предлагают на сайте удобный сервис-конструктор встраиваемого кода. В простейшем варианте для создания своего таймлайна необходимо выполнить несколько простых действий:
- Создать гугл-таблицу по предоставленному разработчиками шаблону.
- Заполнить её данными.
- Опубликовать таблицу, получив публичную ссылку.
- Вставить полученную на предыдущем шаге ссылку в конструктор кода.
- Готово! Сервис сразу же выдаёт код, готовый для встраивания в веб-страницы.
Код, предлагаемый по умолчанию, готов к использованию. Но таймлайн весьма гибко настраивается, если стандартные опции не подходят. В частности, предлагаемый по умолчанию код подразумевает английскую локализацию (language=en), однако русская локализация поддерживается в полной мере (language=ru).
Для сайтов, созданных на движке WordPress, может оказаться полезным официальный плагин от разработчиков библиотеки, ещё более упрощающий встраивание таймлайнов.
Пример использования таймлайна можно посмотреть на сайте школы № 509 в разделе «История школы»: на временную шкалу нанесены важные и интересные события в пока ещё недолгой (двухлетней) истории школы-новостройки: