Визуализация политики конфиденциальности

Предпосылки задачи

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

Примерная логика работы современного соглашения об обработке конфиденциальных данных пользователя выглядит следующим образом:

    1. На любой форме, которая подразумевает ввод персональных данных пользователя, размещается checkbox (галочка, чекбокс). Рядом с ним размещается поясняющий текст;
    2. Если пользователь нажимает кнопку отправки содержимого формы (type=”submit”), но при этом checkbox соглашения не установлен (“галочка снята”), на экран выводится всплывающее окно с предупреждением о невозможности использования сервисов сайта;

Поскольку окно является модальным, то оно закрывается при нажатии на кнопку “ОК” или при клике на затемнённой области вокруг него.

  1. Если пользователь активировал checkbox соглашения (“установил галочку”), то при отправке данных формы, всплывающее окно не появляется;
  2. При первом визите пользователя на сайт, в нижней части должно отображаться фиксированное окно (не смещается при скроллинге сайта) с предупреждением об использовании куки (cookies).

При нажатии кнопки “ОК”, окно закрывается и больше не отображается для текущего пользователя.

Проблемы технической реализации

Теперь остановимся на технических сложностях реализации этой логики на существующем сайте:

  • в зависимости от CMS, компоненты указанных окон (изображения, стили, скрипты и т.д.) хранятся в различных каталогах;
  • формы и всплывающие окна на сайтах могут быть реализованы различными способами: плагины, самостоятельно созданные скрипты, чистый html+css, scss и др.
  • При самостоятельном создании компонентов, необходимо учитывать существующие классы и селекторы, их специфичность. Селекторы родительских элементов всплывающих окон могут влиять на внешний вид компонентов (например, размер шрифта и отступы, указанные для всплывающего окна повлияют на checkbox и его описание.

Этапы решения задачи

  1. Создание макета в графическом редакторе. Наша компания использует связку Sketch (MacOS) + Zeplin (Windows). Использование Zeplin позволяет поддерживать активную обратную связь между front-end разработчиками и дизайнерами. Кроме того, Zeplin позволяет удобно экспортировать изображения и цветовую палитру для использования в html-разметке.
  2. Анализ html-разметки сайта для поиска места внедрения компонентов сообщения о конфиденциальности (лучше всего для этого использовать режим Development Mode в браузере Chrome).
  3. На следующем этапе элементы сообщения конфиденциальности разбиваются на блоки (div) и формируется html-файл с контентом. В это же время выбираются имена классов, уникальные для модифицируемой страницы. В качестве редактора мы используем программу Brackets.
  4. При помощи подключаемого css-файла настраиваются визуальные параметры компонентов сообщения о конфиденциальности. При попиксельной вёрстке, для контроля рекомендуется использовать расширение Perfect Pixel для браузера Chrome. Оно позволяет накладывать на открытую web-страницу произвольное изображение, перемещать его и плавно изменять его прозрачность.
  5. После окончания вёрстки, из стилей удаляются все свойства, которые использовались на время вёрстки (отступы, выравнивания на странице и др.).
  6. Через FTP-протокол отдельные компоненты (изображения, скрипты, стили и т.д.) переносятся на действующий сайт.
  7. Подключается файл стилей сообщения политики конфиденциальности при помощи тега link или функции show_css.
  8. Из html-файла отдельные блоки копируются в соответствующие php-шаблоны.
  9. На последнем этапе тестируется работа логики сообщения и устраняется влияние родительских классов на отображение сообщения.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.