Блог Дмитрия Серженко

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

В настоящее время работаю «ответственным за информатизацию» школы № 509; по совместительству — инженером ЦИО ИМЦ Красносельского района.
Ранее — заведующий ЦИО ИМЦ Петродворцового района, сотрудник поддержки ВКонтакте, педагог дополнительного образования, переводчик и проч., проч., проч.…

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

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

8 июня   e-mail

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

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

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

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

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

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

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

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

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

Изменения в Правилах размещения информации на сайте ОО

Постановлением Правительства РФ от 17 мая 2017 года № 575 вносятся изменения в Правила размещения на официальном сайте образовательной организации в информационно-телекоммуникационной сети Интернет и обновления информации об образовательной организации, утверждённые Постановлением Правительства РФ от 10 июля 2013 года № 582.

Поскольку документ вносит не точечные изменения, а просто заменяет целый длинный пункт Правил, достаточно сложно сразу уловить, что же именно изменилось. И тут очень полезными оказываются diff-сервисы, разработанные программистами для программистов, предназначенные для построчного сравнения программного кода. :)

При помощи сервиса Mergely очень удобно делать это онлайн. По ссылке доступно сравнение действующей редакции (слева) и вступающей в силу (справа). Цветами размечены удалённые, внесённые и изменённые фрагменты текста.

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

Изменения вступают в силу с 27 мая 2017 года. В 785-м приказе Рособрнадзора эти изменения пока не отражены, поэтому пока на сайте эту информацию размещаем сами по смыслу: изменения затрагивают информацию, содержавшуюся в подразделах «Образование», «Материально-техническое обеспечение и оснащённость образовательного процесса», «Стипендии и иные виды материальной поддержки» специального раздела «Сведения об образовательной организации».

Обновление ЕСИР — возможность настройки виджета

Тихо и незаметно выкатили обновление виджета ГИС «ЕСИР».

В соответствии с Постановлением Правительства Санкт-Петербурга от 08.08.2011 № 1136 «О государственной информационной системе Санкт-Петербурга „Единая система информационных ресурсов официальных сайтов исполнительных органов государственной власти Санкт-Петербурга и государственных учреждений Санкт-Петербурга“» сайты государственных учреждений должны быть включены в ГИС ЕСИР.

При включении сайта в ЕСИР на сайте размещается JavaScript-виджет «Навигатор по государственным сайтам Санкт-Петербурга», и ранее не было возможности влиять на внешний вид виджета. Он существовал в единственном варианте:

Теперь же в личном кабинете оператора ЕСИР появилась возможность конфигурирования виджета: можно выбрать одну из трёх цветовых схем (прежнюю стандартную серую либо одну из двух новых: светлую или тёмную), а также отключить поле поиска.

Нововведение позволяет подобрать внешний вид виджета, наиболее подходящий под цветовую схему сайта.

Также генерируемый код виджета обновлён для лучшей поддержки сайтов, работающих по безопасному протоколу HTTPS: если ранее код виджета генерировался с указанием конкретной URL-схемы (http://esir.gov.spb.ru/...), то теперь схема опущена (//esir.gov.spb.ru/...), что интерпретируется браузером как указание использовать тот же протокол, что и при загрузке самого сайта, на котором и вставлен виджет. А значит, при загрузке HTTPS-зайтов браузер не будет выдавать предупреждения о небезопасном содержимом.

Подробная инструкция по подключению к ЕСИР размещена на сайте ИМЦ Красносельского района. Краткая — в виде блок-схемы — на сайте ЕСИР.

10 мая   ЕСИР   сайты ОУ

Акция «Читайте с любовью»

14 февраля 2017 в школе № 509 впервые прошла акция «Читайте с любовью», приуроченная ко Дню книгодарения и Дню всех влюблённых.

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

Участники акции получали на память сувенир — значок с символикой акции.

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

Как это работает?

Инфопанель в этом холле представляет собой SmartTV, напрямую (без ПК) подключённый к школьной локальной сети по Ethernet. Обычно изображение для трансляции (видео, фото, объявления) телевизор берёт со школьного медиасервера. Самый оптимальный вариант для трансляции динамического контента — использование встроенного в ПО телевизора веб-браузера.

Была свёрстана веб-страница, на которой отображается счётчик подаренных книг. Раз в 5 секунд страница отправляет AJAX-запрос на сервер и запрашивает значение счётчика. Если в ответ приходит значение, отличное от текущего, счётчик обновляется с анимацией.

Как же обновляется значение на сервере? Был свёрстан второй интерфейс — для управления счётчиком. Он адаптирован для мобильных устройств. Управляющий интерфейс содержит две кнопки: «−» и «+» — а также текущее значение счётчика. Нажатие каждой из кнопок вызывает AJAX-запрос на сервер, содержащий один параметр — запрошенное действие. Соответственно, происходит либо декремент, либо инкремент счётчика.

Специально обученный волонтёр, принимая книжку, выдаёт значок и нажимает кнопку в своём мобильном интерфейсе. На сервер уходит запрос, обновляется значение, примерно в течение 5 секунд счётчик обновляется на экране — как раз за это время волонтёр успевает помочь прикрепить значок :) Участник акции счастлив — видит свой вклад визуализированно: «вот я принёс книжку и меня посчитали!»

Что интересно — в ходе подобной акции ссылка на страницу со счётчиком в принципе без опаски может быть размещена в публичном пространстве (в соцсетях и/или на сайте школы). Тогда следить за прогрессом акции смогут не только ученики внутри школы, но и, например, их родители. Но мы в этот раз не размещали. :)

Одноразовая ли это история? Думаю, что нет. Очень легко адаптировать этот счётчик к любым другим акциям — считать количество отжиманий в ходе спортивных праздников, количество сданных использованных батареек (спасённых ёжиков) в рамках экологических акций и т. п. :)

Чуть-чуть сугубо технических деталей

Использованные технологии, библиотеки, фреймворки:

  • PHP
  • jQuery
  • CSS-фреймворк Bootstrap 3 для ускорения и упрощения вёрстки
  • key-value хранилище Redis и php-библиотека Predis для работы с ним
  • JS-библиотека FlipClock для создания анимированного счётчика в виде «циферблата»

Значение на сервере хранится в key-value хранилище Redis в виде одного целого числа. На уровне хранилища поддерживаются атомарные операции инкремента/декремента.

Почему делается pull-запрос с клиентской стороны раз в 5 секунд, а не push с сервера или long-polling? Потому что браузер телевизора иногда ведёт себя странно при, казалось бы, самых банальных операциях. Например, вылетает при просмотре YouTube-роликов (через браузер, а не спец. приложение). Поэтому принято решение, во избежание лишних крэшей, максимально упростить клиентский код.

Запрет размещения сайтов госучреждений на заграничных серверах

16 декабря 2014 года свершилось давно ожидаемое и неотвратимое: ГосДумой принят в третьем чтении в общем-то достаточно логичный закон «О внесении изменений в статьи 13 и 14 Федерального закона „Об информации, информационных технологиях и о защите информации“ и в КоАП (в части размещения официальных государственных и муниципальных сайтов на территории Российской Федерации)».

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

Констатирую: сайты, размещённые на популярных конструкторах Google Sites, Wix, размещены за пределами РФ. Стало быть, после окончательного одобрения закона Советом Федерации и подписания закона Президентом, такие сайты не смогут более использоваться в качестве официальных сайтов образовательных учреждений.

UPD: Закон принят, подписан и опубликован. Вступает в силу с 1 июля 2015 года.

UPD2: Ранее в заметке была некорректная информация о том, что сервера uCoz также находятся за рубежом и попадают под данное ограничение. Это (если верить их официальному заявлению) не соответствует действительности.

Приказ Рособрнадзора о структуре сайтов ОУ

Опубликован приказ Рособрнадзора № 785 от 29.05.2014 «Об утверждении требований к структуре официального сайта образовательной организации в информационно-телекоммуникационной сети „Интернет“ и формату представления на нём информации».