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

Размещено на http://www.allbest.ru/

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

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

Аннотация

автоматизированный шаблон веб сайт информационный

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

Ключевые слова: веб-сайт, веб-дизайн, цветовая схема, система управления контентом, шаблон вебсайта, JavaScript, PHP, Apahe.

Введение

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

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

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

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

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

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

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

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

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

- JQuery - открытая библиотека для языка программирования JavaScript, позволяющая более удобно управлять элементами веб-страницы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рис. 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

Размещено на Allbest.ru