С каждым годом технологии программирования интернет-ресурсов выходят на новый уровень. Разработка Web-сайтов является одной из самых востребованных профессий в мире. Главным составляющим хорошего сайта является дизайн. Наряду с этим стремительно развиваются интеллектуальные информационные системы, которые предназначены для решения проблем, связанных с вопросом оптимизации Web-интерфейсов. Одним из методов решения проблем, связанных с оптимизацией внешнего вида сайта, является использование генетических алгоритмов, которые позволяют получить новые варианты макетов для работы с дизайном [1]. В данной статье подробно рассматривается процесс взаимодействия интерактивного генетического алгоритма с языками гипертекстовой разметки HTML и CSS. В ходе описания предложенного метода была разработана схема взаимодействия пользователя с интерактивным генетическим алгоритмом. Схема показывает последовательность действий для нахождения новых дизайнерских решений. Главным преимуществом использования языка CSS в интерактивном генетическом алгоритме является удобство работы с атрибутами. Это позволяет производить множество различных вариантов для дизайна Web-сайтов без изменения их HTML-кода.
Ключевые слова: интерактивные генетические алгоритмы, Web-дизайн, язык HTML, язык СSS, Web-сайт.
Первые сайты, написанные на языке гипертекстовой разметки HTML, имели ряд недостатков, связанных с трудоёмкостью разработки. В тегах сайта разработчик одновременно прописывал контент и стили, что кардинально увеличивало время проектирования. Более того, HTML-документ со встроенными в него стилями долго обрабатывался на сервере и требовал большого количества времени загрузки сайта. Появилась необходимость в упрощении написания кода, а также в отделении содержания контента от визуального представления.
Так в начале 90-х годов появился стандарт CSS (каскадные таблицы стилей), который позволил упорядочить правила написания Web-сайтов. Благодаря СSS стало возможным применение единого стиля для различных документов, что во многом упростило разработку сайтов. На сегодняшний день каскадные таблицы стилей применяют на практике повсеместно. Также в данный момент написаны препроцессоры, которые во многом упрощают написание СSS-стилей. Однако CSS имеет некоторые минусы, связанные с поддержкой различных браузеров. Также приходится исправлять значения стилей, если в тэгах HTML обнаружена ошибка.
Основными элементами языка CSS являются значения атрибутов, которые связаны непосредственно с тегами в HTML-документе. Значения атрибутов включают в себя визуальное оформление: размер шрифта, фоновый цвет, положение на Web-странице и т. д. Сам язык каскадных стилей можно представить в виде функций, где тэг — это функция, а применяемые к нему стили — значения функции. Языки функционального программирования допускают использования методов генетических алгоритмов. Следовательно, для поиска оптимальных решений, связанных с дизайном, CSS можно рассматривать как язык, который допускает выполнения преобразований с помощью генетического алгоритма.
Настоящая статья посвящена применению интерактивного генетического алгоритма для оптимизации внешнего вида Web-сайта, а также поиску новых решений, которые предлагает данный метод. Метод позволит упростить разработку визуальной составляющей сайта, а также поможет разработчику выбрать из многообразия сгенерированных вариантов самый подходящий.
За основу предложенной концепции внедрения генетического алгоритма в CSS была взята идея, изложенная в публикации — «Применение методов генетического программирования к разработке Web-интерфейсов» [1]. Данная работа посвящена применению эволюционных методов к разработке Web-интерфейсов, описываемых на языке HTML либо сходных с ним языках, с целью частичной автоматизации процесса разработки [1].
- Представление каскадных таблиц стилей для интерпретации генетического алгоритма
Стандарт CSS стал неотъемлемым дополнением языка гипертекстовой разметки HTML. Без применяемых стилей невозможно создать полноценный Web-интерфейс, потому что визуальная часть является основной в формировании представления о хорошем сайте. Возможности каскадных таблиц стилей, применяемых к различным тегам языка HTML, имеют колоссальный потенциал. Он варьируется от выбора цветовой гаммы до различных сложных эффектов над элементами. Для нахождения новых комбинаций, направленных на получение новых дизайнерских решений, целесообразно использовать генетический алгоритм.
Несколько слов нужно сказать о представлении CSS-кода, элементы которого будут использованы как хромосомы для генетических операций.
Концепция заключается в представлении каскадных таблиц стилей в виде блочной модели, где каждый атрибут располагается друг за другом.
Такое представление является аналогом линейной хромосомы. Атрибут является геном, который находится в своей позиции — локусе. Значение атрибута используется как функциональное значение гена (аллель) [2]. На рисунке 1 изображена схема блочной модели CSS-стилей.
Рис. 1. Схема блочной модели CSS-стилей
Преимуществом работы генетического алгоритма в блочной модели является связь с древовидной структурой из [1]. Генетические операции производят изменения в атрибутах СSS-стилей, не меняя расположения тега в HTML-документе. Следовательно, применяемая концепция использования эволюционного алгоритма в сочетании с языком СSS является актуальной для решения оптимизационных задач.
Работа генетического алгоритма с каскадными таблицами стилей будет происходить несколько иначе, чем в [1]. Если прописать стили для какого-нибудь тега, то язык CSS будет находить этот тег по всему документу и менять его стилизацию. Для этого в HTML-документе создаётся специальный тег div, которому соответствует определенный класс. В этом классе будут храниться атрибуты и их значения. С помощью этого класса можно ссылаться на блок и изменять его в соответствии имеющимся предпочтениям. На рисунке 2 представлено взаимодействие СSS-стилей с тэгами HTML.
Рис. 2. Взаимодействие СSS-стилей с тэгами HTML
Преимуществом включения CSS во взаимодействие с генетическим алгоритмом являются:
1) многообразие вариантов использования значений атрибутов: значения использованы в качестве хромосом, которые можно скрещивать и подвергать мутации;
2) значения атрибутов привязаны к тэгам HTML, которые связаны с определенным классом: это позволяет применять сгенерированные решения ко всему HTML-документу, где встречается изменяемый тэг;
3) каскадный язык стилей является более гибким и более приспособлен для взаимодействия с генетическим алгоритмом.
Работа генетического алгоритма в CSS представлена на рисунке 3. В качестве примера на рисунке изображена операция кроссинговера, которая производит обмен значений атрибутов.
Рис. 3. Операция кроссинговера в языке CSS
- Описание интерактивного генетического алгоритма.
Исследование интерактивных генетических алгоритмов (ИГА) и их родительского поля («интерактивных эволюционных вычислений») началось вскоре после разработки «стандартных» генетических алгоритмов. В 1986 году Ричард Докинз описал компьютерную программу, которая моделирует эволюцию, отображая сложную двумерную форму (известную как «биоморф»), основанную на наборе правил, определяющих ее геометрию [3].
На основе исследований Докинза в дальнейшем стали разрабатываться интерфейсы, в которых пользователь посредством генетического алгоритма создавал новые варианты дизайнерских решений. Одним из таких приложений является онлайн-программа 3d-моделирования «Парк генетической скульптуры», разработанная Д. Роуландом и Ф. Биокк [4]. Программа позволяет посетителям взаимодействовать с компьютером, чтобы создавать новые эстетические формы (скульптуры). Приложение предназначалось для работы с автоматизированными информационными системами и к языкам Web-разработки не имело никакого отношения. Однако программа хорошо описывает этапы эволюционного моделирования и интерактивный подход.
В интерактивном подходе концепция работы генетического алгоритма заключается в том, что пользователь выбирает решения, которые будут использоваться для генерации новых потомков в следующем поколении, а затем оценивает получившийся вариант. Основной принцип работы интерактивного подхода можно продемонстрировать на примере алгоритма параллельного взаимодействия генетического алгоритма и CSS-стилей (см. рисунок 4). Предложенный алгоритм наглядно показывает взаимодействие пользователя с интерактивным генетическим алгоритм через функциональные действия.
Рис. 4. Схема взаимодействия пользователя с ИГА
Исходя из вышесказанного нужно отметить необходимость использования CSS-стилей для генерации новых страниц сайта. Отличием является то, что генетический алгоритм из [1] больше предназначен для работы с содержимым сайтов, чем для работы с дизайном. Приведённый алгоритм наглядно демонстрирует, как язык CSS взаимодействует с генетическим алгоритмом в интерактивном методе. Каждая итерация детерминирована и приводит к нахождению нужных решений.
Заключение
Рассмотренный в данной статье метод применения генетического алгоритма для каскадных таблиц стилей наглядно показывает эффективность нахождения новых решений в области дизайна.
Построенный алгоритм позволит пользователю в достаточное короткое время найти оптимальное решение, связанное с выбором хорошего дизайна. Генерировать новый дизайн можно неограниченное количество раз. Как только работа алгоритма удовлетворит пользователя, он может остановить процесс генерирования и сохранить созданный вариант для дальнейшей работы для последующего использования.
Данный метод открывает новые пути для исследований в области эволюционного программирования. В дальнейшем стоит ожидать внедрения эволюционных алгоритмов в процесс разработки программного обеспечения в том числе и для нахождения лучших вариантов дизайна.
Литература:
- Кольчугина Е. А., Заваровский К. В. Применение методов генетического программирования к разработке web-интерфейсов // Прикладная информатика. Ноябрь, 2012 [Электронный ресурс] http://www.appliedinformatics.ru/r/articles/article/index.php?article_id_4=1325.
- Гладков Л. А., Курейчик В. В., Курейчик В. М. Генетические алгоритмы / под ред. В. М. Курейчика. 2‑е изд., испр. и доп. М.: ФИЗМАТЛИТ, 2006. — 75 с.
- Докинз Р. Эгоистичный ген: Пер. с англ. — М.: Мир, 1993. — 318 с.
- Rowland, D. and Biocca, F. «Evolutionary co-operative design between human and computer: implementation of «the genetic sculpture park» Proceedings of the fifth symposium on Virtual reality modeling language, February 2000.
