https://serzhenko.ru/tags/veb-servisy/ Всю сознательную жизнь работаю в образовании. В настоящее время — открываю Лицей информационных технологий Приморского района Санкт-Петербурга. Ранее (в т.ч. по совместительству): зам. директора и  руководитель центра цифрового образования «ИнфинITи» школы № 509, сотрудник СПбЦОКОиИТ и Инспекции Комитета по образованию Санкт-Петербурга, заведующий ЦИО ИМЦ Петродворцового района, сотрудник поддержки ВКонтакте, инженер ЦИО ИМЦ Красносельского района, педагог дополнительного образования УМЦ «ИНФОБ» и лицея № 395, переводчик, индивидуальный предприниматель и проч., проч., проч.… Disclaimer. Вся информация, опубликованная в этом блоге, отражает персональное мнение частного лица, даже если затрагивает рабочие темы, и не представляет официальную позицию какой-либо организации или органа власти (хотя и может с таковой позицией совпадать… или не совпадать). ru Aegea 11.3 (v4134) Всю сознательную жизнь работаю в образовании. В настоящее время — открываю Лицей информационных технологий Приморского района Санкт-Петербурга. Ранее (в т.ч. по совместительству): зам. директора и  руководитель центра цифрового образования «ИнфинITи» школы № 509, сотрудник СПбЦОКОиИТ и Инспекции Комитета по образованию Санкт-Петербурга, заведующий ЦИО ИМЦ Петродворцового района, сотрудник поддержки ВКонтакте, инженер ЦИО ИМЦ Красносельского района, педагог дополнительного образования УМЦ «ИНФОБ» и лицея № 395, переводчик, индивидуальный предприниматель и проч., проч., проч.… Disclaimer. Вся информация, опубликованная в этом блоге, отражает персональное мнение частного лица, даже если затрагивает рабочие темы, и не представляет официальную позицию какой-либо организации или органа власти (хотя и может с таковой позицией совпадать… или не совпадать). 11 https://serzhenko.ru/all/timelinejs/ Wed, 07 Jun 2017 18:33:30 +0300 https://serzhenko.ru/all/timelinejs/ <p>Удобным и наглядным способом отобразить последовательность событий, имеющих конкретные даты или временн<i>ы</i>е рамки, является таймлайн («временн<i>а</i>я шкала»).</p> <p>Одним из бесплатных инструментов (более того — с открытым исходным кодом), позволяющих создавать интерактивные таймлайны, является <a href="https://timeline.knightlab.com">библиотека TimelineJS</a>. Созданные таймлайны могут быть размещены на любом веб-сайте или блоге, позволяющем встраивать IFrame’ы либо JavaScript и CSS.</p> <p>Источником входных данных, описывающим слайды-события, может быть гугл-документ (таблица Google Spreadsheets) либо — для продвинутых пользователей — особая структура данных в формате JSON.</p> <p>Таймлайн, созданный с использованием этой библиотеки, представляет набор «слайдов»: каждый слайд — одно событие. Каждое событие может описываться следующими параметрами: название, небольшой описательный текст, дата (или две даты — начало и конец периода). Слайд может содержать медиаобъекты (изображения, видео, аудио, карты, твиты и другие объекты). Помимо медиаобъекта, слайд может содержать фоновое изображение. События в таймлайне могут быть сгруппированы в «эры».</p> <p>Разработчики библиотеки предлагают на сайте удобный сервис-конструктор встраиваемого кода. В простейшем варианте для создания своего таймлайна необходимо выполнить несколько простых действий:</p> <ol start="1"> <li>Создать гугл-таблицу по предоставленному разработчиками <a href="https://docs.google.com/spreadsheets/d/1pHBvXN7nmGkiG8uQSUB82eNlnL8xHu6kydzH_-eguHQ/copy">шаблону</a>.</li> <li>Заполнить её данными.</li> <li>Опубликовать таблицу, получив публичную ссылку.</li> <li>Вставить полученную на предыдущем шаге ссылку в конструктор кода.</li> <li>Готово! Сервис сразу же выдаёт код, готовый для встраивания в веб-страницы.<br /> Код, предлагаемый по умолчанию, готов к использованию. Но <a href="https://timeline.knightlab.com/docs/options.html">таймлайн весьма гибко настраивается</a>, если стандартные опции не подходят. В частности, предлагаемый по умолчанию код подразумевает английскую локализацию (<i>language=en</i>), однако русская локализация поддерживается в полной мере (<i>language=ru</i>).</li> </ol> <p>Для сайтов, созданных на движке WordPress, может оказаться полезным <a href="https://ru.wordpress.org/plugins/knight-lab-timelinejs/">официальный плагин</a> от разработчиков библиотеки, ещё более упрощающий встраивание таймлайнов.</p> <p>Пример использования таймлайна можно посмотреть на сайте школы № 509 <a href="https://school509.spb.ru/история-школы/">в разделе «История школы»</a>: на временную шкалу нанесены важные и интересные события в пока ещё недолгой (двухлетней) истории школы-новостройки:</p> <iframe src='https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1zJ7-_fTHk0FsHB3fNsQ-v8p-lTUJ2MZ7GkIFl708ezw&font=Default&lang=ru&initial_zoom=2&start_at_slide=1&height=650' width='100%' height='650' webkitallowfullscreen mozallowfullscreen allowfullscreen frameborder='0'></iframe>