Создать сайт бесплатно!
Главная
Инструкции
Как добавить на сайт образовательной организации пиктограмму ЭЦП
Telegram
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!

Как добавить на сайт образовательной организации пиктограмму ЭЦП

Как добавить на сайт образовательной организации пиктограмму ЭЦП
Материал добавлен: 05 Июня 2021
Материал обновлен: 31 Марта 2025

В этой инструкции мы постараемся пошагово рассмотреть решение очень важного вопроса для сайтов образовательных организаций — добавление пиктограммы ЭЦП на сайт.

Зачем добавлять пиктограмму ЭЦП на сайт образовательной организации?

С января 2021 года вступил в силу новый документ — Приказ № 831 «Об утверждении Требований к структуре официального сайта образовательной организации в информационно-телекоммуникационной сети "Интернет" и формату представления информации» Рособрнадзора от 14 августа 2020 года.

Согласно приказу, все документы, которые образовательное учреждение разрабатывает и утверждает самостоятельно, при публикации на сайте должны быть подписаны простой электронной подписью (ПЭП).

На сайте ПЭП должна отображаться в виде пиктограммы, указывающей, что документ подписан электронной подписью.

При наведении курсора на эту пиктограмму должны отображаться сведения:

  • дата и время подписания;
  • Ф.И.О. и должность лица, подписавшего документ;
  • уникальный программный ключ.

Ссылка на ваш документ

Как это выглядит в коде

<img src="https://newmanuals.ucoz.net/contract.png" style="margin:0;padding:0;border:0;max-width:64px;" title="Документ подписан электронной подписью
Дата и время подписания: 2021.02.01. 22:24
Подписавший документ: директор Иванов И.И.
Ключ: 4166F24HNF1628C2QH7MT2" />

Текст отображается через атрибут title изображения.

Как внедрить решение на сайт в соответствии с приказом №831

1. Используем свободный модуль: Каталог файлов, статей, сайтов, объявлений, игр или Блог / Новости. Главное, чтобы модуль не использовался под другие задачи. Активируйте выбранный модуль.

2. Перейдите в раздел Настройки модуля. Отключите поле "Полное описание", снимите все галочки с поля Полный текст материала, оставив только "Название" и "Краткое описание". Нажмите Сохранить.

3. Включите пункт Использовать дополнительные поля. Выберите количество 7 (для Каталога). Для Блога / Новостей — 2, так как по умолчанию доступно 5. Отметьте все нужные поля галочками и сохраните.

4. Перейдите в Замена стандартных надписей по адресу ваш-сайт.ру/panel/?a=signs. Найдите нужный модуль и переименуйте поля:

  1. Дополнительное поле 1 → Ф.И.О.
  2. Дополнительное поле 2 → Организация
  3. Дополнительное поле 3 → Дата создания
  4. Дополнительное поле 4 → Сертификат
  5. Дополнительное поле 5 → Выдан
  6. Дополнительное поле 6 → Период действия сертификата
  7. Дополнительное поле 7 → Ссылка на документ
  8. Краткое описание материала → Электронная подпись

После переименования нажмите Сохранить.

5. Перейдите в:
Панель управления → Главная → Пользователи → Группы пользователей → Установка прав для всех групп → Каталог файлов. Найдите строки:

  • Разрешить HTML теги при добавлении материалов
  • Разрешить ББ-коды при добавлении материалов

Для группы "Администраторы" снимите галочки и нажмите Сохранить.

6. В настройках модуля Каталог файлов укажите Максимальную длину краткого описания — 9999. Сохраните.

7. Перейдите в шаблон Вид материалов по адресу ваш-сайт.ру/panel/?a=tmpl;m=11;t=7. Удалите весь код и вставьте следующий:

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock" style="border: 1px solid #d6d3d3; border-radius: 5px; padding: 5px;"><tr><td style="padding:3px;">
<?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?>
<div class="eTitle" style="text-align:left;"><a href="$ENTRY_URL$">$ID$. $TITLE$</a>
<span style="color: #000; font-size: 20px; font-weight: normal;"> Утвержден <img src="https://ecp-test.ucoz.net/img/icon_check.svg"></span></div>

<div class="poster" style="float:right;cursor: pointer;"><img src="https://ecp-test.ucoz.net/img/icon_key.svg">
<div class="descr">
<span class="titless">Документ подписан электронной подписью</span><hr>

<?if($OTHER1$)?><div style="float:left;"><img src="https://ecp-test.ucoz.net/img/icon_sign.svg"> 
<span class="ecp-dop" style="position: relative; top: -22px;">$OTHER1$</span></div><?endif?>

<?if($OTHER2$)?><div style="display: inline-block;"><span>Организация</span>: 
<span class="ecp-dop">$OTHER2$</span></div><?endif?>

<?if($OTHER3$)?><div style="display: inline-block;"><span>Дата создания</span>: 
<span class="ecp-dop">$OTHER3$</span></div><?endif?>

<?if($OTHER4$)?><div style="display: inline-block;"><span>Сертификат</span>: 
<span class="ecp-dop">$OTHER4$</span></div><?endif?>

<?if($OTHER5$)?><div style="display: inline-block;"><span>Выдан</span>: 
<span class="ecp-dop">$OTHER5$</span></div><?endif?>

<?if($OTHER6$)?><div style="display: inline-block;"><span>Период действия сертификата</span>: 
<span class="ecp-dop">$OTHER6$</span></div><?endif?>

<?if($OTHER7$)?><div style="display: inline-block;"><span>Документ</span>: 
<span class="ecp-dop"><a href="$OTHER7$" download style="color: #000;">[ Скачать документ ]</a></span></div><?endif?>

<div align="center">
<div class="spoiler keycode"><input type="checkbox" id="spoilerid_$ID$"><label for="spoilerid_$ID$">Показать электронную подпись</label>
<div class="spoiler_body" style="word-break: break-word;font-weight: normal;">$MESSAGE$</div>
</div>
</div>

</div></div>
</td></tr></table><br />

<style>
.titless {font-size: 16px;font-weight: bold;}
a.keycode {font-weight: normal; text-decoration: none; color: #fff; padding: 5px; background-color: #5cb85c; border-radius: 5px;}
a.keycode:hover {background-color: #204ea6;}
span.ecp-dop { color: #000!important; font-weight: normal; font-size: 13px!important; }
.descr{ display:none; margin-left:-350px; padding:10px; margin-top:17px; box-shadow:0 5px 5px rgba(0,0,0,0.3); }
.poster:hover .descr { margin: -10px 0px 0px -400px; font-size: 15px; display: block; position: absolute; z-index: 9999; width: 400px; background: #f7f5f5; }
.descr div {margin-top:6px;}
.descr span {font-size:14px;color: #20489a;}

.spoiler > input + label:after {content: "+";float: right;font-family: monospace;font-weight: bold;}
.spoiler > input:checked + label:after {content: "-";}
.spoiler > input {display:none;}
.spoiler > input + label, .spoiler > .spoiler_body {
 background:#CCC;padding:5px 15px;overflow:hidden;width:100%;box-sizing: border-box;display: block;
}
.spoiler > input + label + .spoiler_body {display:none;}
.spoiler > input:checked + label + .spoiler_body {display: block;}
.spoiler > .spoiler_body {
 background: #FFF;border: 3px solid #CCC;border-top: none;height: 300px; overflow-y: scroll;
}
</style>

Добавляйте новые документы только через выбранный модуль, а не через «Редактор страниц».

При добавлении каждого материала заполняйте все 8 полей — согласно информации об ЭЦП.

Какое ПО использовать для создания ЭЦП?

  • КРИПТО-ПРО и КРИПТО-АРМ (платные) — для создания ПЭП.
  • Adobe Acrobat Pro — для подписи PDF-документов.
  • Плагин КРИПТО-АРМ — для документов MS Office.

Как подписать документ с помощью ЭЦП?

Подробности — в видео ниже:

Как создать электронную подпись?

Видеоинструкция с использованием ПО КРИПТО-АРМ:

Как проверить, подписан ли документ?

Рассмотрение в видео:

Также можно проверить подпись на следующих сайтах:

Результат можно посмотреть на демо-сайте:

Демо пример сайта

Как добавить на сайт образовательной организации пиктограмму ЭЦП