Экспериментальная проверка возможности реализации системы автоматизированного создания шаблона для информационного сайта с функцией автоматического построения цветового дизайна

УДК 004

В. В. Мелёшкин

ЭКСПЕРИМЕНТАЛЬНАЯ ПРОВЕРКА ВОЗМОЖНОСТИ РЕАЛИЗАЦИИ СИСТЕМЫ АВТОМАТИЗИРОВАННОГО СОЗДАНИЯ ШАБЛОНА ДЛЯ ИНФОРМАЦИОННОГО САЙТА С ФУНКЦИЕЙ АВТОМАТИЧЕСКОГО ПОСТРОЕНИЯ ЦВЕТОВОГО ДИЗАЙНА

Аннотация. Обоснована необходимость разработки системы автоматизированного создания шаблонов веб-сайта для информационного сайта с функцией автоматического построения цветового дизайна. Изучены уже существующие веб-приложения, решающие подобные задачи, оценены их достоинства и недостатки, а также разработаны математические основы для реализации функции автоматического построения цветового дизайна. Рассматриваются экспериментальные доказательства состоятельности разработанной ранее концепции. Описывается механизм работы системы автоматизированного создания шаблонов веб-сайта для информационного сайта с функцией автоматического построения цветового дизайна, а также рассказывается о технологиях, применяемых для реализации проекта. Система автоматизированного создания шаблонов веб-сайта для информационного сайта была частично реализована. Функция автоматического создания цветового дизайна была реализована на 100 %. Была экспериментально подтверждена возможность реализации на практике концепции системы автоматического создания шаблона веб-сайта с функцией автоматического построения цветового дизайна.

Введение

Основной целью реализации концепции системы автоматизированного создания шаблонов веб-сайта для информационного сайта является предоставление пользователям, не владеющим навыками программирования, возможности создавать свои собственные шаблоны для личных информационных сайтов. Разрабатываемое веб-приложение будет в автоматизированном режиме создавать шаблоны для CMS WordPress. Выбор данной CMS обусловлен тем, что она является наиболее популярной в мире и занимает целых 54 % рынка. Так как разрабатываемое веб-приложение в первую очередь рассчитано на новичков в веб-разработке, основной его функцией станет автоматическое создание цветового дизайна. Данная функция позволит начинающим веб-разработчикам не допустить самых банальных ошибок в дизайне.

Математические основы генератора цветовых схем

Работа генератора цветовых схем основана на том, что сначала для удобства расчетов, полученных от пользователя, основной цвет переводится в цветовую модель HSV, а затем расчет производится по следующим формулам, где H - это параметры Hue основного цвета, а Я1 и Н2 - это тот же параметр у дополнительных цветов (табл. 1).

© Мелёшкин В. В., 2019.

Таблица 1

Формулы вычисления цветовых схем

Цветовая схема Формула

Комплементарная н1 (Н - 180, если Я > 180, Н ~\Н + 180, если Я < 180.

Аналоговая Я1 =Н + 45 Я2 =Н - 45

Контрастная „! [Я + 150, если Я > 180, Н ~ {Н + 210, если Я < 180. Н2 - 150, если Я > 180, Н ~ \Н — 210, если Я <180.

Классическая „! гЯ + 120, если Я > 180, Н ~ Ш + 240, если Я < 180. „2 (Н - 120, если Я > 180, Н ~\Н - 240, если Я < 180.

Технологии, необходимые для реализации системы автоматизированного создания шаблонов веб-сайта для информационного сайта с функцией автоматического построения цветового дизайна

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

- HTML - язык гипертекстовой разметки;

- CSS - формальный язык, используемый для описания внешнего вида документа, созданного при помощи языка гипертекстовой разметки HTML;

- JavaSript - скриптовый язык программирования. Обрабатывается браузером и применяется для придания веб-страницам интерактивности;

- PHP - скриптовый язык программирования, широко применяемый при разработке веб-приложений и динамических веб-сайтов;

- Bootstrap - свободный фреймворк для создания адаптивных веб-сайтов. В основе Bootstrap лежит HTML-разметка по принципу сетки;

Работать веб-приложение будет на базе веб-сервера Apache, эмуляция которого в ходе эксперимента будет осуществляться с помощью программного пакета Open-Server.

Принципы работы системы автоматизированного создания шаблонов

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

- пользователь задает основной цвет в формате цвета HTML;

- полученный цвет переводится в цветовую модель RGB, для этого нужно перевести полученное значение цветов из шестнадцатеричной в десятеричную систему счисления;

- основной цвет нужно перевести из RGB в цветовую модель HSV, так как в ней проще всего будет вычислить дополнительные цвета;

- вычислить два дополнительных цвета на основе формул, приведенных выше;

- распределить основной цвет и полученные дополнительные цвета по элементам шаблона.

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

Основной цвет:

- фоновый цвет шапки сайта;

- фоновый цвет подвала;

- фоновый цвет шапок элементов боковой панели.

Первый дополнительный цвет:

- цвет ховеров1;

- цвет заголовков второго уровня.

Второй дополнительный цвет:

- цвет фона кнопок на странице.

Воспользоваться функцией можно будет на странице настроек шаблона. Слева на данной странице находится тулбар2, а справа модель шаблона, на которой будут отображаться вносимые изменения. Для эксперимента мы выберем Оранжевый цвет в качестве основного и Аналоговую цветовую схему (рис. 1). После выбора основного цвета и цветовой схемы для него основной и дополнительный цвета будут автоматически распределены по шаблону, и для завершения останется кликнуть по кнопке Ок! в правом нижнем углу.

Рис. 1. Страница настроек шаблона

После этого данные о внесенных пользователем настройках будут переданы на страницу generator.php, скрипт которого благодаря функциям fopen(), fwrite(), fclose() (языка программирования PHP) запишет полученные значение в стилевой файл change.css. Интерпретатор веб-браузера читает код сверху вниз, поэтому файл change.css будет подключен в коде шаблона ниже основных стилевых файлов, благодаря чему он сможет «перебить» их.

Далее нужно реализовать возможность скачивания шаблона пользователем. Для этого разумнее всего поместить файлы шаблона в архив, что ускорит загрузку шаблона и позволит сэкономить трафик пользователей. Для реализации данной задачи будет использовано официальное расширение zipPHP языка программирования PHP, на основе которого был написан скрипт для архивации.

1 Hover - псевдокласс каскадной таблицы стилей CSS3, который определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами, кнопка мыши не нажата.

2 Тулбары (англ. tool - инструмент, bar - прямоугольник) - это организованные в виде прямоугольной полоски элементы управления.

После этого нужно создать ссылку на скачивание архива, для этого достаточно в обычном теге ссылки <a> указать атрибут download и указать путь к архиву.

Доказательство работоспособности шаблона

Для проверки работоспособности созданного шаблона нужно установить его на CMS WordPress, для которой он предназначается. Для этого после скачивания его нужно извлечь из архива и скопировать в директорию с темами CMS WordPress, которая расположена по адресу wordpress ^ wp-content ^ themes. После этого шаблон будет установлен.

Для дальнейшей проверки нужно запустить веб-сервер Apache на локальном компьютере. Удобнее всего делать это с помощью программного пакета OpenServer. Далее через все тот же OpenServer нужно будет запустить WordPress и, перейдя в административную панель, активировать наш шаблон, после чего вернуться на стартовую страницу сайта (рис. 2).

S& О I--FU1. / MUíUctb Ol » +• s ъятьфлл». шть 0

Розовый template Оранжевый i

---* Eutí один сайт на WordPress =4,

Привет, мир!

Аэбро О Улудатт Э»В МШЛ n«C*Jä МПШГЬ- iL1

«j4HH¿i*te caiAdBdtb!

• BUrtHT* M, J*t(U

Свежие комментарии

Автор тиыемлрин и запкм Пртгг. ы

АВТОР КОММЕНТАРИЯ : м .чг ч ,

nprtrfl 3?D мшьинмдо*

Рис. 2. Стартовая страница сайта на WordPress

Как можно заметить, цветовой дизайн активированного шаблона полностью соответствует тому, что был задан в веб-приложении ранее, а значит, система автоматизированного создания шаблона для информационного веб-сайта справилась со своей задачей на 100 %.

Библиографический список

1. Цвет HTML // Википедия: свободная энциклопедия - URL: https://ru.wikipedia.org2. fopen // Официальный сайт языка программирования PHP. - URL: https://www.php.net/ manual/ru

2. fwrite // Официальный сайт языка программирования PHP. - URL: https:// www.php.net/ manual/ru

3. fclose // Официальный сайт языка программирования PHP. - URL: https:// www.php.net/ manual/ru

4. zipPHP // Официальный сайт языка программирования PHP. - URL: https:// www.php.net/ manual/ru

Мелёшкин Владислав Владимирович, бакалавр, Пензенский государственный университет. E-mail: zumawuu@gmail.com

Образец цитирования:

Мелёшкин, В. В. Экспериментальная проверка возможности реализации системы автоматизированного создания шаблона для информационного сайта с функцией автоматического построения цветового дизайна / В. В. Мелёшкин // Вестник Пензенского государственного университета. - 2019. - № 2 (26). - С. 59-62.