Подписка на блог

Контент автора в социальных сетях

Всю сознательную жизнь работаю в образовании.

В настоящее время — заместитель директора по учебно-воспитательной работе и учитель школы № 509: руковожу центром цифрового образования «ИнфинITи» школы и веду уроки информатики.
Ранее (в т.ч. по совместительству): зам. директора по информатизации школы № 509, программист СПбЦОКОиИТ, сотрудник Инспекции Комитета по образованию Санкт-Петербурга, заведующий ЦИО ИМЦ Петродворцового района, сотрудник поддержки ВКонтакте, инженер ЦИО ИМЦ Красносельского района, педагог дополнительного образования УМЦ «ИНФОБ» и лицея № 395, переводчик, индивидуальный предприниматель и проч., проч., проч.…

Disclaimer. Вся информация, опубликованная в этом блоге, отражает персональное мнение частного лица, даже если затрагивает рабочие темы, и не представляет официальную позицию какой-либо организации или органа власти (хотя и может с таковой позицией совпадать… или не совпадать).

Меня можно найти: VKTelegramХабрахабрWebfolio

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

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

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

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

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

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

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

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

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

Подписаться на блог
Отправить
Поделиться