CC BY
11
УДК 004
В. В. Мелёшкин
ЭКСПЕРИМЕНТАЛЬНАЯ ПРОВЕРКА ВОЗМОЖНОСТИ РЕАЛИЗАЦИИ СИСТЕМЫ АВТОМАТИЗИРОВАННОГО СОЗДАНИЯ ШАБЛОНА ДЛЯ ИНФОРМАЦИОННОГО САЙТА С ФУНКЦИЕЙ АВТОМАТИЧЕСКОГО ПОСТРОЕНИЯ ЦВЕТОВОГО ДИЗАЙНА
Аннотация. Обоснована необходимость разработки системы автоматизированного создания шаблонов веб-сайта для информационного сайта с функцией автоматического построения цветового дизайна. Изучены уже существующие веб-приложения, решающие подобные задачи, оценены их достоинства и недостатки, а также разработаны математические основы для реализации функции автоматического построения цветового дизайна. Рассматриваются экспериментальные доказательства состоятельности разработанной ранее концепции. Описывается механизм работы системы автоматизированного создания шаблонов веб-сайта для информационного сайта с функцией автоматического построения цветового дизайна, а также рассказывается о технологиях, применяемых для реализации проекта. Система автоматизированного создания шаблонов веб-сайта для информационного сайта была частично реализована. Функция автоматического создания цветового дизайна была реализована на 100 %. Была экспериментально подтверждена возможность реализации на практике концепции системы автоматического создания шаблона веб-сайта с функцией автоматического построения цветового дизайна.
Ключевые слова: веб-сайт, веб-дизайн, цветовая схема, система управления контентом, шаблон вебсайта, JavaScript, PHP, Apahe.
Введение
Основной целью реализации концепции системы автоматизированного создания шаблонов веб-сайта для информационного сайта является предоставление пользователям, не владеющим навыками программирования, возможности создавать свои собственные шаблоны для личных информационных сайтов. Разрабатываемое веб-приложение будет в автоматизированном режиме создавать шаблоны для 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-разметка по принципу сетки;
- JQuery - открытая библиотека для языка программирования JavaScript, позволяющая более удобно управлять элементами веб-страницы.
Работать веб-приложение будет на базе веб-сервера 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: [email protected]
Образец цитирования:
Мелёшкин, В. В. Экспериментальная проверка возможности реализации системы автоматизированного создания шаблона для информационного сайта с функцией автоматического построения цветового дизайна / В. В. Мелёшкин // Вестник Пензенского государственного университета. - 2019. - № 2 (26). - С. 59-62.
