ВНИМАНИЕ: каждый TUTORIAL имеет своего законного владельца, поэтому в случае Вашего интереса к предлагаемой публикации, просьба обращаться непосредственно к её автору, по указанной ниже контактной информации. Поисковая система Brain Gear не несёт ответственность за уникальность публикуемой информации, поэтому в случае прецедента на смежность авторских прав, просьба сообщать об этом администрации сайта по адресу: info@b-gear.ru
	Автор:	Ярослав Ахромов	Дата публикации:	24.08.2006
	Контакты:	yarus@rinet.ru
Аннотация:	Целью работы является разработка подсистемы динамической генерации интерфейса средствами технологии Flash Drawing API в системах электронной коммерции категории B2C. Динамическая генерация представляет собой процесс программной отрисовки системы меню и навигации по её разделам, средствами Flash Drawing API.

ДИНАМИЧЕСКАЯ ГЕНЕРАЦИЯ ИНТРЕФЕЙСА В СИСТЕМАХ ЭЛЕКТРОННОЙ КОММЕРЦИИ

Целью работы является разработка подсистемы динамической генерации интерфейса средствами технологии Flash Drawing API в системах электронной коммерции категории B2C. Динамическая генерация представляет собой процесс программной отрисовки системы меню и навигации по её разделам, средствами Flash Drawing API на основе информации из базы данных, представленной в текстовом формате. При этом учитывается аспект разбора и форматирования информации из базы данных и построения системы интеллектуальных клавиш навигации интерфейса.

В настоящее время ведётся активное изучение и внедрение Flash Drawing API графики при разработке приложений под Интернет. Главная особенность таких приложений - гибкость программного кода, а также малый объём компилируемого файла (как правило, несколько килобайт). В данной статье делается попытка поставить Flash Drawing API на службу электронной коммерции, а в частности сделать систему динамической генерации интерфейса интернет магазина.

Исходя из общей классификации веб-сайтов, системы электронной коммерции можно классифицировать как конечные веб-сайты для торговых систем. В общем случае система электронной коммерции может быть определена как интернет магазин, т.е. веб-сайт, обеспечивающий продажи через Интернет с использованием электронного каталога или другого вида представления продукции. Интернет магазины относятся к розничной форме ведения торговли, сектору B2C (Business-to-Customer). Основные требования, предъявляемые к организации интернет магазина в настоящий момент, являются:

- понятный интерфейс и удобная навигация по всем разделам магазина;
- удобная система перекрёстных ссылок и других элементов навигации, позволяющая оптимальным образом получить необходимую информацию;
- минимальное количество действий пользователя для совершения покупки.

Таким образом, роли интерфейса в архитектуре систем электронной коммерции, отводится первостепенное значение, т.к. главная его задача - обеспечить взаимодействие между покупателем (человеком) и системой (программным приложением). Этот факт накладывает ряд дополнительных требований к построению интерфейса:

- дружественность (friendly-interfaces);
- достаточная простота организации;
- информативность;
- эстетическое восприятие (дизайн).

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

- использование графики форматов gif, jpeg, png;
- обработка текстовой информации для вывода названий разделов (клавиш) из базы данных.

При этом иногда текстовое наполнение клавиш привязано к графике, что делает не возможным оперативное изменение их названий без подключения графического редактора. Главный недостаток такой системы – это не возможность оперативного внесения изменений в общий дизайн интерфейса интернет магазина со стороны администратора, без обращения к разработчикам системы. Эту проблему может решить использование программной отрисовки интерфейса, где нет привязки к растровой графике как таковой, и делается упор на векторную графику.

Проектирование приложений под Интернет на основе векторной графики, стараниями компании Macromedia успешно развивается уже на протяжении 10 лет, однако относительно недавно появилась возможность создания и обработки векторной графики на этапе проектирования, т.е. системе API – Application Programmable Interface (Прикладной Программный Интерфейс). Уникальность данного подхода к созданию интерфейсов к интернет магазинам заключается в том, что система на основе анализа информации из базы данных, а также настроек администратора магазина, производит динамическую генерацию всей системы меню и навигации интерфейса. Схема построения подобной системы в первом приближении может быть представлена следующим образом:

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

Структура базы данных, как можно видеть из схемы, основана на применении специального префикса ’#’ – регламентирующего границы разделов интернет магазина. Количества символов ’#’ – регламентируют уровни вложений системы меню. Таким образом, база данных представляет собой скелет всего будущего интерфейса магазина. Фактически есть возможность создания некого формального языка, для использования внутри базы данных магазина, регламентирующего различные свойства работы системы. Получается, что можно не только задавать разделы магазина, но и ссылки на веб-сайты производителей товаров или разделители между названиями разделов кириллицей и латиницей. К примеру, символ ’|’ может служить разделителем между названием раздела магазина и ссылкой на веб-сайт производителя товара, представленного в данном разделе. При этом соответствующая запись в базе данных может выглядеть следующим образом: ###ПРИНТЕРЫ HP|http://www.hp.com Идея об использовании разделителей (delimiters) при организации базы данных была предложена ещё Джерри Бранденбау в 1999 году, при создании интернет магазинов на основе Java Script и Perl. В данной системе мы расширяем данную теорию в свете применения Flash-технологий.

Однако на этапе анализа базы данных API-обработчик ещё не получает информацию о способах графической отрисовки интерфейса, а только текстовом названии всех клавиш системы меню с числовыми индексами перехода по разделам базы данных. Программное создание графики начинается после учёта всех настроек администратора интернет магазина. Здесь также стоит отметить, что API-технология позволяет создавать не только статические объекты, как на пример отрисовка набора клавиш заданной формы, размера и цвета, вытроенных в столбик, а также даёт возможность активного внедрения программной анимации API-графики. Таким образом, можно реализовать анимацию (вращение) отдельных разделов меню при переходе от одного раздела системы меню к другому. Возможность анимации интерфейса, и более того контроль такой анимации позволяют создавать уникальные интерфейсы нового поколения, т.к. задача анимации стандартной растровой графики возможна только при подключении Java / VB Script и DHTML - технологий. При этом встаёт вопрос совместимости: меж-браузерности и кросс-платформенности таких приложений. В нашей системе вопрос совместимости решается стандартом Flash, т.е. наличие у пользователя программного расширения Flash-player, который, как известно, входит в поставку с основными известными браузерами, такими как Internet Explorer, Netscape Navigator или Safari.

Результат исследований построения системы динамической генерации интерфейса, показал, что можно построить систему объёмом 20-30 килобайт с возможностью графической отрисовки системы меню, навигации по разделам системы меню, а также управления данной системой со стороны администратора. Отрицательная сторона такого подхода заключается в том, что такая система оказывается в прямой зависимости от конфигурации системы компьютера пользователя. В результате испытаний выяснилось, что система может свободно работать на компьютерах не ниже Pentium II и оперативной памятью не ниже 64 Mb. Однако это ограничение частично снимается, если мы отказываемся от возможности программной анимации системы меню, т.е. останавливаемся на динамической генерации статического интерфейса.

Однако при проектировании подобных интерфейсов возникает также задача обеспечения по возможности максимально удобной навигацией по разделам магазина. Один из возможных способов повышения использования интерфейса (interface usability) является создание системы интеллектуальных клавиш управления системой меню. Под словом ”интеллектуальность” здесь понимается зависимость визуального восприятия клавиш навигации от степени их важности в текущий момент работы интернет магазина, а также наличие контекстного информационного окна-состояния о работе клавиш. В самом простом случае это может быть ситуация, при которой пользователь видит на экране набор из 10 клавиш системы меню, и при этом он может выбрать показ следующих 10 клавиш, если всего в данном интернет магазине представлено более 10 разделов продукции (напр. 30). Здесь не надобности постоянно показывать клавишу ”вниз” или ”след. разделы”. Имеет смысл сделать динамическую клавишу, которая становится активной только в случае её реальной надобности. Так, например, если в системе меню имеются дополнительные клавиши с разделами, то клавиша показа следующих разделов активна (визуально и технически), если дальше ничего нет, то клавиша пассивна. При попытке создания некой универсальной системы навигации в API-интерфейсе, было предложено сделать систему джойстика, т.е. набор клавиш перемещения по разделам (вперёд, назад, вверх, вниз), с полным учётом их интеллектуальности. Предлагаемая система джойстика может быть представлена в следующем виде:

Из предложенной схемы видно, что джойстик состоит из трёх основных клавиш перехода в иерархии разделов магазина (назад, вверх, вниз), а также информационного окна состояния о разделах системы меню. Таким образом пользователь всегда может оценить своё местоположение в сложной иерархии подразделов интернет магазина. Естественно, что такая система навигации не может существовать сама по себе, т.к. она является неотъемлемой частью всей системы динамической генерации интерфейса. Таким образом, можно создать полноценную систему навигации, на основе использования интеллектуальных клавиш методами Flash Drawing API.

Получается, что динамическая генерация интерфейса в системах электронной коммерции на основе API-технологии может открыть новые горизонты в исследовании вопросов разработки интерфейсов. Учитывая то, что API-технология поддерживает ещё и контроль прозрачности (alpha-channel), а также программное создание градиентов, можно создать интерфейс с имитацией 3D графики, а хорошая проработка математического аппарата поможет создать анимацию 3D объектов. Результат – хорошо проработанная (визуально и технически) система меню, с возможностью настройки администратором, а также системой навигации по интерфейсу, с объёмом 20-30 килобайт.

В заключении можно отметить, что представленная технология была реализована и протестирована на примере построения системы электронной коммерции категории B2C по продаже элитного спиртного в сети Интернет ”Магвина” (www.sommelier.ru/shop).