Пиктограмма
Сама пиктограмма это специальное изображение, которое говорит о том, что документ подписан.
портал технической поддержки
#ОБРАЗОВАНИЕ22
Хостинг сайтов
в домене edu22.info
Простая электронная подпись документов.
Реализация ПЭП на сайте
инструкция для пользователей
Требованиям о формате размещения на сайте образовательной организации (ОО) документов установлено, что документы, самостоятельно разрабатываемые и утверждаемые образовательной организацией, размещаются на сайте в форме электронных документов, подписанных простой электронной подписью (ЭП).
Визуально на сайте простая ЭП должна выглядеть как пиктограмма, указывающая на то, что документ подписан простой электронной подписью.
При установке курсора на эту пиктограмму, на экран должны выводиться сведения «дата и время подписания; фамилия, имя, отчество и должность лица, подписавшего документ; сформированный уникальный программный ключ».
Для реализации простой ЭП на документе можно воспользоваться возможностями программ, работающих с pdf-файлами, например такими как AdobeAcrobatReaderDC или FoxitReader, что более доступно для большинства пользователей.
Как именно создать простую электронную подпись можно узнать изучив инструкции:
Далее, когда документ подписан и загружен на сайт, в соответствии с требованиями к размещению документов нужно установить пиктограмму с подписью.
В некоторых источниках предлагается реализовать подпись пиктограммы с помощью атрибута alt="" изображения. Но в таком случае текст будет отображаться сплошной строкой, что не совсем удобно для прочтения.
Мы же рекомендуем для такой цели использовать модули всплывающих подсказок, которые позволяют вывести, при наведении курсора на элемент, не просто текст в одну строку, а отформатированный текст и, при возможности, с изображением.
Список бесплатных плагинов / компонентов
модулей всплывающих подсказок
Здесь перечислены наиболее популярные бесплатные плагины, больше компонентов и плагинов можно найти в сети Интернет. Так например для CMS WordPress в поиск по плагинам вставить ключевое слово tooltip(подсказка) - https://ru.wordpress.org/plugins/tags/tooltip/. Внимание, использование старого плагина, обновление которого производилось разработчиком очень давно, могут подвергнуть Ваш сайт опасности.
ПЭП на CMS Joomla
Рассмотрим реализацию простой электронной подписи на сайте, разработанном на CMS Joomla, путём установки плагина подсказки Tooltips Free от разработчика Regular Labs (данный разработчик предлагает много удобных расширений для CMS Joomla, почти каждое из которых имеет бесплатную версию). Скачать его можно с официального сайта разработчика - https://regularlabs.com/tooltips, при этом бесплатной версии этого компонента будет достаточно для реализации поставленной задачи.
Установка расширения производится стандартно: "Раcширения" -> "Менеджер расширений" -> "Установка" , где производим загрузку скаченного zip-архива плагина. После чего плагин появится в списке "Раcширения" -> "Плагины", по умолчанию плагин сразу активируется автоматически, но если этого не произошло, то активируйте его вручную.
Перейдя в сам плагин можно увидеть какой синтаксис тега нужно использовать для создания "подсказки", а так же произвести настройки оформления "всплывающих подсказок" и включения кнопки в редакторе.
Если функция подсказки на сайте будет использоваться только при установке ПЭП для документа, то в настройках плагина можно сразу прописать шаблон подписи. Так на вкладке "Настроки кнопки редактора" в поле "Собственный код" прописываем нужный текст и при необходимости подключаем изображения (изображения должны быть заранее подготовлены и загружены на сайт):
{tip title="Подписано электронной подписью" content=" <img src="images/podpis.png" alt="Подпись" style="float: left; width: 100px" />ФИО: ****** ******* ******<br /> <i>директор</i><br /> МБОУ «*** Средняя Общеобразовательная Школа»<br /> Дата и время: **.**.202* 00:00<br /> Ключ: xxxx-xxxx-xxxx-xxxx"} <img src="images/ep.png" alt="ep" width="50" style="vertical-align: middle;" />{/tip}
Так как данное поле не имеет встроенного редактора, то приходится текст вписывать в виде html-кода.
Здесь, в параметр title="" вписывается заголовок всплывающей подсказки (можно оставить пустым, если вывод заголовка не требуется), в content="" вписывается само содержимое подсказки (img - тег картинки с параметром src="" - путь до изображения из корневой папки медиаменеджера, например изображение podpis.png здесь загружено в корень).
Далее, в редакторе материалов сайта достаточно поставить курсор возле ссылки на документ, которому нужно поставить подпись, и, нажав на кнопку "Всплывающие подсказки", вставить данный код. Осталось внести данные вместо всех "*". В редакторе текст при этом может выглядеть не совсем корректно, а элементы разбросаны по странице. Однако, после публикации материала, на сайте всё будет отображаться как мы задумывали.
ПЭП на CMS WordPress
Плагинов для реализации всплывающей подсказки на сайте WordPress довольно много, многие имеют возможность создания каждой подсказки как отдельный элемент, который затем вызывается в нужном месте, некоторые работают посредством вставки шорткода с вписанной информацией подсказки в него. Увидеть всё многообразие таких плагинов и выбрать подходящий можно на сайте wordpress.org или напрямую через консоль администратора WP в разделе "Плагины"->"Добавить новый", вписав в поиск ключевое слово "tooltip" (подсказка).
Мы же рассмотрим плагин, который имеет множество удобных возможностей в том числе и функцию вспливающей подсказки. Это плагин Shortcodes Ultimate от автора Vladimirа Anokhinа, плагин полностью бесплатен. Если Вы использовали для разработки сайта наш стартовый пакет, то этот плагин у Вас уже установлен, если нет, то его установка доступна через консоль администратора WordPress.
После установки и активации плагина на панели управления консоли WP появляется раздел "Шорткоды", в котором можно ознакомится со всеми возможностями плагина, а так же правилами написания шорткодов и их параметров для каждой функции.
Так, изучив инструкции по активации функции подсказки и подобрав подходящие параметры, получаем следующий шорткод:
[su_tooltip st yle="bootstrap" position="top" shadow="no" rounded="no" size="default" title="Подписано электронной подписью" content="ФИО: ****** ******* ******<br /> <i>директор</i><br /> МБОУ «*** Средняя Общеобразовательная Школа»<br /> Дата и время: **.**.202* 00:00<br /> Ключ: xxxx-xxxx-xxxx-xxxx" beh * avior="hover" close="no" class=""]<img class="alignnone" style="vertical-align: middle;" src="http://test.edu22.info/wordpress/wp-content/uploads/2021/04/ep.png" alt="" width="50">[/su_tooltip]
Для более корректной вставки шорткода рекомендуем переключить редактор статьи в html-код.
Здесь, в параметр title="" вписывается заголовок всплывающей подсказки (можно оставить пустым, если вывод заголовка не требуется), в content="" вписывается само содержимое подсказки (воспринимается отформатированный текст, но не поддерживаются изображения), style="" - визуальное оформление по шаблону (в настройках можно ознакомится с вариантами).
Значение остальных параметров можно изучить в настройках шорткода данного плагина.
Сама пиктограмма устанавливается как изображение с помощью тега <img ...> (либо с помощью функции вставки картинки в визуальном редакторе) между [su_tooltip ...] и [/su_tooltip] .
Внимание: параметр style пишется без пробела, в шорткоде установлен пробел, чтобы браузер не воспринимал его как команду для отображения страници, а выводил текстом.
Установив курсор возле ссылки на документ, которому нужно поставить подпись, вставляем шорткод напрямую в текстовом редакторе консоли, если используется модуль "Классический параграф" (установлен в некоторых стартовых пакетах), либо с помощью кнопки "Шорткод" модуля "Абзац" редактора Gutenberg (редактор статей в новых версия CMS WordPress), где далее выбираем вид шорткода "Подстказка" и в открывшемся окне настроек вписываем нужные данные, после нажимаем кнопку "Вставить шорткод".
Сохраняем изменения в статье чтобы отобразить действие шорткода на внешней части сайта.