XI Международная студенческая научная конференция Студенческий научный форум - 2019
Разработка web-портала магазина мототехники «Урал+»
КомментарииПолная версия работы доступна во вкладке "Файлы работы" в формате PDF
Введение
В настоящее время Интернет становиться все более развитой средой для осуществления коммуникаций с потребителями. В тоже время, существенным является и тот факт, что Интернет становиться удобной и достаточно дешевой «торговой площадкой». Все большее количество фирм старается представить свою продукцию в on-line среде. C помощью Интернет-магазинов можно приобретать товары совершенно разных категорий, как потребительские, так и высокотехнологичные.
Информационные системы являются взаимосвязанными компонентами, которые совместно работают над сбором, обработкой, хранением и распространением информации для поддержки принятия решений, координации, контроля, анализа и визуализации в организации. Основными технологиями информационных систем считаются аппаратное обеспечение, программное обеспечение и данные. Было предложено добавить еще один компонент: коммуникацию. Информационная система может существовать без возможности коммуникации, однако сегодня компьютер, который не подключается к другому устройству или к сети, встречается редко. Технически, сетевой коммуникационный компонент состоит из аппаратного и программного обеспечения, но это такая основная особенность современных информационных систем, что она стала ее собственной категорией.
На сегодняшний день применение информационных систем приобрело весьма важное значение для многих организаций, которые для упрощения своей работы применяют компьютерные технологии.
В данной выпускной квалификационной работе описывается процесс разработки и реализации макета сайта мониторинга товара магазина мототехники.
1 АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ
1.1 Общие сведения
В данном разделе будут приведены основные сведения о предметной области. Проанализированы существующие аналоги, результаты сравнений которых внесены в таблицу. Проведено сравнение хостингов, выделение их достоинств и недостатков. Проанализированы среды разработки Web-приложений, произведен анализ языков программирования: PHP, HTML и JavaScript.
1.2 Анализ современных систем
Предметом области автоматизации являются функции отдела продаж. Магазин розничной торговли осуществляет продажу мототехники и запчастей. Ведется статистика наличия, отражающая потребность магазина в товаре (сколько единиц какого товара имеется). Клиент может бронировать товар на сайте. При бронирование перечисляется наименование товара, количество, цена, номер заказа и т.п. Существует справочник номенклатуры товаров и запчастей.
В любой момент на сайте можно получить информацию о деталях, имеющихся на складе. Предполагается подбор мототехники по параметрам вес и рост. Подбор мототехники по фото.
В качестве прототипов разрабатываемого продукта рассматриваются «ЯндексМаркет», «Scootermag.ru», «moto.abm-centre.ru», «motosalon58.ru» и «www.tvoymoto.ru».
ЯндексМаркет служит для автоматизации оформления и приемов заказов на товары, выдачи полной информации о товаре. С помощью функциональных инструментов можно получить различную информацию о мотоциклах, делать запросы по выбранным критериям: по производителю, по цене, по охлаждению двигателя, по количеству цилиндров, по мощности, по тактности, по объему топливного бака, по весу.
На рисунке 1.1 представлен сайт ЯндексМаркет.
Рисунок 1.1 – ЯндексМаркет
Scootermag представляет собой информационный портал, предоставляющий информацию об определенном товаре с возможностью сортировки по названию, рейтингу или цене.
На рисунке 1.2 представлен сайтScootermag .
Рисунок 1.2 – Scootermag
Moto.abm-centre.ru представляет собой информационный портал, содержащий информацию об определенном товаре с возможностью поиска по названию, цене, типу двигателя, мощности, трансмиссии и объему двигателя.
На рисунке 1.3 представлен сайтmoto.abm-centre.ru
Рисунок 1.3 – moto.abm-centre.ru
Motosalon58.ru – информационный портал, содержащий информацию об определенном товаре с возможность подбора по стандартным параметрам.
На рисунке 1.4 представлен сайтmotosalon58.ru
Рисунок 1.4 –motosalon58.ru
Www.tvoymoto.ruпозволяет искать товар по техническим характеристикам, а так же по стандартной цене и цене по акции.
На рисунке 1.5 представлен сайтwww.tvoymoto.ru
Рисунок 1.5 – www.tvoymoto.ru
Проведем сравнение аналогов. Перечень характеристик, учитываемых в показателях сравнения:
Сортировка представленных товаров– возможность группировать товары по заданным характеристикам.
Подбор товара по росту и весу – возможность группировать товары по росту и весу покупателя.
Подбор по фото – по предложенному фото пользователя будет подбираться похожая техника.
Удобства в использовании – удобный и быстрый доступ к основным функциональным блокам сайта:
Информация о товаре.
Добавление товара в Корзину.
Простота регистрации и авторизации.
Оформление заказа.
Поиск товара на сайте.
Качество информационного наполнения сайта – широкий ассортимент товаров, полнота описания характеристик товара.
Продуманный дизайна сайта – удобный интерфейс, обеспечивающий быстрый доступ к любой части сайта.
Результаты сравнения вынесены в таблицу 1.1.
Таблица 1.1 – Сравнение аналогов
|
Показатели сравнения |
Яндекс Маркет |
Scootermag.ru |
moto.abm-centre.ru |
motosalon58.ru |
www.tvoymoto.ru |
|
Сортировка представленных товаров |
+ |
+ |
+ |
+ |
+ |
|
Подбор товара по росту и весу |
- |
- |
- |
- |
- |
|
Подбор по фото |
- |
- |
- |
- |
- |
|
Удобства в использовании |
+ |
+ |
+ |
+ |
+ |
|
Качество информационного наполнения сайта |
+ |
+ |
+ |
+ |
+ |
|
Дизайна сайта. |
+ |
+ |
+ |
+ |
+ |
|
Бонус за посещения |
- |
- |
- |
- |
- |
На основании проведенного анализа, были сформулированы требования к разрабатываемому сайту. На сайте должна быть организована сортировка товара по различным характеристикам. Сайт должен быть удобен и понятен при использовании. Должно быть представлено краткое описание товара. Дизайн сайта не должен приносить неудобства при использовании. На разрабатываемом сайте будет действовать система бонусов в виде скидок.
1.3 Анализ хостингов
Для функционирования разрабатываемого сайта необходим хостинг. Хостинг – место на сервере, которое выделяется для размещения сайта, сам сервер постоянно подключен к сети Интернет. Далее разберем несколько видов хостингов.
Виртуальный хостинг (shared hosting) – самый дешевый и распространенный вид хостинга, когда на одном сервере хранится большое количество сайтов, принадлежащих разным клиентам.
Часто виртуальный хостинг работает при помощи операционной системы Linux или UNIX.
Плюсы:
Низкая цена.
Хостинг управляется при помощи встроенной панели управления (Control Panel).
Минусы:
Хостинг подходит для небольших проектов. На таком хостинге может находится сайт с очень большим трафиком, превосходящим технические возможности хостинга, из-за чего могут перестать работать все проекты, находящиеся на хостинге.
Медленный хостинг, т.к. скорость зависит от количества размещенных сайтов и технических возможностей сервера.
Виртуальный сервер ( VPS – virtual private server, VDS – virtual dedicated server ) – часть пространства на физическом сервере, выделенное при помощи отдельной операционной системы. На одном физическом сервере может находиться несколько VPS, арендованных разными клиентами.
Плюсы:
Безопасность выше, чем на виртуальном хостинге.
Стоимость виртуального сервера меньше, чем аренда выделенного физического сервера.
Можно самостоятельно выбрать программное обеспечение и настроить хостинг с учетом требований.
Минусы:
Безопасность зависит от соседствующих сайтов.
Выделенный сервер – это услуга, при которой вы получаете физическую машину в свое полное распоряжение и платите исключительно за ее аренду. Это самый сильный вариант хостинга и подходит для веб-сайтов с высокими требованиями. Отсутствие специфических технических знаний не являются помехой в управлении выделенным сервером, поскольку этот тип хостинга в большинстве случаев предполагает возможность полного администрирования за дополнительную плату.
Преимущества:
Полный root-доступ к серверу.
Возможность полностью определять программную конфигурацию.
Возможность докупить определенные ресурсы без переезда на новый сервер.
Возможность обеспечить максимальную безопасность и мощность.
Недостатки:
Высокая стоимость аренды.
Трудности в администрировании при отсутствии необходимых знаний.
В результате анализа хостингов, было принято решение в данной разработке воспользоваться виртуальным хостингом. Так как он подходит для небольших и средних сайтов и имеет низкую цену.
1.4 Анализ сред разработки
Для разработки сайта кроме Web-браузеров, необходимо иметь программы для редактирования HTML-документов. Сейчас на рынке программного обеспечения представлено большое количество продуктов для создания Web-страниц или HTML. Рассмотрим некоторые из них.
Adobe Dreamweaver – профессиональный редактор HTML для проектирования, написания кода и поддержки сайтов, web-страниц и приложений сети.
Adobe Dreamweaver обеспечивает:
Генерацию свободного от ошибок HTML-кода.
Динамическое отображение создаваемой страницы в выбранном браузере.
Сохранение расположения для ранее созданных документов и документов, созданных другими средствами.
Средства наглядного дизайна таблиц и фреймов.
Генерацию Dynamic HTML для различных браузеров.
Расширяемую коллекцию скриптовых программ JavaScript.
Поддержку анимации.
NetBeans IDE – свободная интегрированная среда разработки приложений (IDE) на языках программирования Java, Python, PHP, JavaScript, C, C++ и др.
Плюсы:
Кроссплатформенность.
Малый объем.
Простота в использовании.
Авто-завершение текста в некоторых случаях.
Полностью настраиваемый интерфейс.
Минусы:
Отсутствие интегрированной поддержки SVN.
Отсутствие встроенной интерактивной системы справки по тому языку, для которого это IDE предназначено.
Несколько большое потребление памяти.
В некоторых случаях авто-завершение текста предлагает совсем не то что нужно.
Codelobster PHP Edition – интегрированная среда разработки приложений (IDE) для создания веб-приложений на языке PHP, также поддерживаются: JavaScript, HTML, XML и CSS.
Преимущества CodeLobster:
Полная поддержка основных языков для web-программирования - PHP, HTML, CSS и JavaScript.
Подсветка синтаксиса и авто дополнение кода.
Автозавершение тегов, атрибутов, CSS-свойств и функций JavaScript.
Отладка скриптов PHP на локальной машине, непосредственно во время разработки.
Пользовательский интерфейс можно гибко настроить, поддерживается множество языков.
Программа работает на всех Windows системах, можно установить, как на Windows XP, например, так и на Windows 8 и Windows 10.
1.5 Анализ языков программирования
Реализация сайта будет проводиться на языках: PHP,HTML, JavaScript. Проведем анализ данных языков.
PHP – это распространенный язык программирования общего назначения с открытым исходным кодом. PHP сконструирован специально для ведения Web-разработок и его код может внедряться непосредственно в HTML.
Плюсы PHP:
Является свободным программным обеспечением, распространяемым под особой лицензией (PHP license).
Легок в освоении на всех этапах.
Имеется огромное количество библиотек и расширений языка.
Может быть развернут почти на любом сервере.
Портирован под большое количество аппаратных платформ и операционных систем.
Минусы:
Не подходит для создания приложений или системных компонентов.
Имеет слабые средства для работы с исключениями.
Глобальные параметры конфигурации влияют на базовый синтаксис языка, что затрудняет настройку сервера и разворачивание приложений.
Объекты передаются по значению, что смущает многих программистов, привыкших к передаче объектов по ссылке, как это делается в большинстве других языков.
HTML – стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (XHTML).
Плюсы html:
HTML является первым языком web-программирования. Именно на его основе построены многие команды на php, javascript и т.д. Таким образом можно сказать, что он неизменен.
При написании сайта на HTML на странице нет ничего лишнего, она быстро загружается, хорошо доступна для поисковых роботов, легче оптимизируется.
В HTML можно продумать иерархию страниц, выделить главные и провести добротную внутреннюю оптимизацию сайта.
JavaScript – это язык программирования, с помощью которого веб-страницам придается интерактивность. С его помощью создаются приложения, которые включаются в HTML-код.
Плюсы:
С использованием написанных на JavaScript плагинов и скриптов справится даже не специалист.
Полезные функциональные настройки.
Постоянно совершенствующийся язык.
Взаимодействие с приложением может осуществляется даже через текстовые редакторы – Microsoft Office и Open Office.
Минусы:
Пониженный уровень безопасности ввиду повсеместного и свободного доступа к исходным кодам.
Множество мелких ошибок на каждом этапе работы. Большая часть из них легко исправляется, но их наличие позволяет считать этот язык менее профессиональным.
1.6 Выводы по разделу
В данном разделе был произведен анализ предметной области. Рассмотрены основные сведения о предметной области. Проанализированы существующие сайты, результаты сравнений которых внесены в таблицу 1.1. На основании проведенного анализа, были сформулированы требования к разрабатываемому сайту. На сайте должна быть организована сортировка товара по различным характеристикам. Сайт должен быть удобен и информативен. На разрабатываемом сайте будет действовать система бонусов в виде скидок. Было проведено сравнение хостингов, выделены их плюсы и минусы. Принято решение в данной разработке воспользоваться виртуальным хостингом. Произведен анализ сред разработки Web-приложений. Выделены достоинства и недостатки программных средств: Adobe Dreamweaver, NetBeans IDE и Codelobster PHP Edition. В результате данного анализа выбрано программное обеспечение Codelobster PHP Edition. Так же был произведен анализ языков программирования: PHP, HTML и JavaScript. Были выделены плюсы и минусы данных языков.
2 ТЕОРЕТИЧЕСКАЯ ЧАСТЬ
2.1 Общие сведения
В данном разделе проведено моделирование предметной области с помощью диаграмм: вариантов использования, состояний, последовательности, деятельности, диаграмма БД компонентов, развертывания.
2.2 Диаграмма вариантов использования
Диаграммы вариантов использования предназначены для моделирования функциональных требований к системе, в виде сценариев взаимодействия пользователей с системой. Вариант использования обозначается на диаграмме эллипсом.
Цель варианта использования – определить законченный аспект или фрагмент поведения некоторой сущности без раскрытия ее внутренней структуры.
Между элементами диаграммы вариантов использования могут существовать отношения ассоциации, расширения, включения или обобщения. Отношения описывают взаимодействие актеров и вариантов использования.
На рисунке 2.1 представлена диаграмма вариантов использования.
Рисунок 2.1 – диаграмма вариантов использования
Сценарии вариантов использования вынесены в таблицы 2.1 – 2.7.
Таблица 2.1 – Сценарий 1
|
Вариант использования |
Регистрация |
|
Актеры |
Пользователь, БД |
|
Цель |
Сбор данных о пользователе для сохранение в БД |
|
Типичный ход событий: Пользователь вводит личные данные Собранные личные данные заносятся в БД |
|
Таблица 2.2 – Сценарий 2
|
Вариант использования |
Занесение информации в БД |
|
Актеры |
База даных |
|
Цель |
Сохранение информации о пользователе |
|
Типичный ход событий: Полученные от пользователя данные заносятся и сохраняются в БД |
|
Таблица 2.3 – Сценарий 3
|
Вариант использования |
Найти товар по критериям |
|
Актеры |
Пользователь |
|
Цель |
Поиск товара по критериям |
|
Типичный ход событий: Пользователь выбирает нужные характеристики товара, после чего ему предоставляется список товаров с этими характеристиками |
|
Таблица 2.4 – Сценарий 4
|
Вариант использования |
Посмотреть каталог товаров |
|
Актеры |
Пользователь |
|
Цель |
Просмотр каталога товаров и информации о товаре |
|
Типичный ход событий: Пользователь выбирает каталог, после чего ему предоставляется список товаров |
|
Таблица 2.5 – Сценарий 5
|
Вариант использования |
Бронирование |
|
Актеры |
Пользователь, БД |
|
Цель |
Забронировать товар |
|
Типичный ход событий: Пользователь выбирает товар из каталог, после чего ему предоставляется форма для бронирования. Информация о бронировании сохраняется в БД. |
|
Таблица 2.6 – Сценарий 6
|
Вариант использования |
Просмотр забронированного товара |
|
Актеры |
Администратор |
|
Цель |
Просмотр забронированного товара |
|
Типичный ход событий: Администратор просматривает забронированный товар и откладывает его для клиента. |
|
Таблица 2.7 – Сценарий 7
|
Вариант использования |
Изменить каталог |
|
Актеры |
Администратор, БД |
|
Цель |
Изменение информации в каталоге |
|
Типичный ход событий: Администратор изменяет информацию в каталоге, затем она сохраняется в БД. |
|
2.3 Диаграмма деятельности
Диаграмма деятельности изображает поведение объекта или системы с использованием моделей потока данных и потока управления. Деятельность является спецификацией параметризованного поведение в форме координируемой последовательности подчиненных единиц, индивидуальными элементами которых являются действия. Действие представляет собой элементарную единицу спецификации поведения, которая не может быть далее разбита в форме деятельности.
На рисунке 2.2 представлена диаграмма деятельности.
Рисунок 2.2 – диаграмма деятельности
Данная диаграмма описывает процесс бронирования товара. Покупатель выбирает товар. Далее он может забронировать его или выбрать еще товары. После бронирование менеджер проверяет наличие товара, после чего товар откладывают и отправляют сообщение покупателю.
2.4 Диаграмма состояний
Диаграмма состояний определяет возможные состояния, в которых может находиться конкретный объект, а также процесс смены состояний объекта в результате влияния некоторых событий. Диаграммы состояний строятся для единственного класса и описывают поведение единственного объекта.
На рисунке 2.3 представлена диаграмма состояний.
Рисунок 2.3 – диаграмма состояний
На данной диаграмме отображено 3 состояния сайта: формирование заказа, проверка, бронирование. Находясь в состоянии формирования заказа происходит выбор товара и добавление его в корзину. В состоянии проверки товар проверяется на наличие и при положительном результате товар переходит в состояние бронирования.
2.5 Диаграмма последовательности
Диаграмма последовательности представляет взаимодействие элементов модели в форме последовательности сообщений и соответствующих событий на линиях жизни объектов. Взаимодействие – единица поведения некоторого классификатора, которая концентрирует внимание на наблюдаемом обмене информацией между элементами, являющимися участниками данного взаимодействия (Приложение Б).
Данная диаграмма показывает последовательность авторизации и бронирования товара. Покупатель вводит данные (логин, пароль), после чего происходит авторизация. Далее выбирает товар, товар добавляется в корзину. Покупатель нажимает кнопку бронировать, появляется форма бронирования. После заполнения формы, данные сохраняются в БД (Приложение В).
Данная диаграмма показывает последовательность внесения изменений в каталог запчастей. После выбора каталога, открывается форма каталоге, куда вносится информация и сохраняется в БД.
2.6 Диаграмма базы данных
Диаграмма базы данных показывает структуру базы данных для разрабатываемого сайта.
На рисунке 2.4 представлена диаграмма базы данных.
Рисунок 2.4 – диаграмма БД
Данная диаграмма показывает связи между таблицами. В базе данных будет находиться семь таблиц: запчасти, устройства, совместимость, категории, склад, бронирование, пользователи. Таблица compatibility показывает совместимость устройства и запчастей.
2.7 Диаграмма развертывания
Диаграмма развертывания представляет общую конфигурацию или топологию распределенной программной системы и содержит изображение размещения различных артефактов по отдельным узлам системы.
На рисунке 2.5 представлена диаграмма развертывания.
Рисунок 2.5 – диаграмма развертывания
2.8 Диаграмма компонентов
Диаграмма компонентов представляет программные компоненты и зависимости между ними, служит представлением концептуальной и физической схем баз данных.
На рисунке 2.6 представлена диаграмма компонентов.
Рисунок 2.6 – диаграмма компонентов
2.9 Выводы по разделу
UML – подход к моделированию и документированию программного обеспечения, основанный на схематических представлениях программных компонентов. Визуализация взаимодействия пользователя, процессов и структуры системы, поможет увидеть недостатки или ошибки. В рамках выполнения данного раздела проведено моделирование предметной области с помощью языка uml в программе EnterpriseArchitect. Разработаны и описаны диаграммы: вариантов использования, компонентов, развертывания, состояний, последовательности, деятельности, диаграмма БД.
3. ТЕХНИЧЕСКОЕ РЕШЕНИЕ
3.1 Общие сведения
В данном разделе описывается выбор цветового решения, разработка макета сайта, выбор дизайна, разработка и описание логотипа.
3.2 Выбор цветового решения
Цвет обладает огромным влиянием на отношение и эмоции. Когда глаза воспринимают цвет, они передают информацию в область мозга, известной как гипоталамус, которая, в свою очередь, посылает каскад сигналов в гипофиз, на эндокринную систему, а затем на щитовидные железы. Щитовидные железы сигнализируют о высвобождении гормонов, которые вызывают колебания в настроении, эмоциях и в поведении.
Цветовая психология – наука о том, как цвет влияет на поведение человека. Цветовая психология является частью поведенческой психологии. В рецензируемой журнальной статье Сатиендра Сингх (Satyendra Singh) определила, что для составления мнения о продукте требуется всего 90 секунд. И 62-90% этого взаимодействия определяется цветом продукта.
Цветовая психология может быть необходима руководителям, офисным менеджерам, архитекторам, дизайнерам, владельцам магазинов. Успех продукта зависит от того, как используется цвет.
Чтобы правильно использовать цветовую психологию, необходимо следовать этим основным принципам:
Путь.
Время.
Аудитория.
Цель.
Так как создаваемый продукт предназначается мужчинам, следует избегать следующих цветов: фиолетового, оранжевого и коричневого. Более подходящими будут: синий, зеленый и черный. Эти цвета традиционно ассоциируются с мужественностью.
Синий цвет может повысить доверие пользователя. Синий – один из самых популярных цветов. Синий – это цвет доверия, мира, порядка и лояльности.
В исследовательском сообществе существует согласие в отношении психологических эффектов синего цвета. Синий подходит для компаний, основными ценностями которых являются прозрачность и доверие.
3.3 Разработка логотипа
Логотип – это графический знак или символ, представляющий элемент фирменного стиля компании.
Логотип – главный визуальный компонент бренда компании. Люди запоминают рисунки лучше, чем текст. С ним потребители товаров и услуг сталкиваются в первую очередь, и от того, насколько качественно логотип выполнен, будет зависеть лояльность потребителей к вашей марке. Поэтому он может помочь в продвижении фирмы.
На рисунке 3.1 представлен разработанный логотип.
Рисунок 3.1 – логотип компании
Логотип состоит из 2 частей: текстовой и символьной. Текстовая часть представлена названием фирмы. Символьная часть представляет собой форму, символизирующею горы. Для логотипа были выбраны темно-синий тон. Так как фирма занимается мототехникой, то большая часть ее покупателей мужчины. Синий цвет хорошо подходит для рекламы нацеленной на мужскую аудиторию. Данный цвет символизирует знание, честность, серьезность, мужественность и опыт. На силуэте гор размещен белый мотоцикл, контрастирующий на темно-синем фоне. Данный элемент дает представление о направленности фирмы. В логотипе был использован красный цвет, он представлен в виде полос, символизирующих скорость. Красный способен максимально привлечь внимание людей. Это цвет, который выражает мощь и настроение.
3.4 Выбор шрифта
Шрифт на сайте – это одна из сторон дизайна. Шрифты не только призваны передавать «характер» тематики, также должны соответствовать другим критериям, которые связаны с удобством в использовании сайта.
Правильная подборка шрифтов может помочь посетителю составить правильное мнение о сайте и также поможет почувствовать комфорт.
Оформление текста очень важно для сайта, поэтому к этому вопросу нужно подходить достаточно серьезно.
Неправильный выбор шрифта может не только навредить дизайну сайта, но также и тому, какое в конце концов мнение сложится у посетителя, а также может вообще повлиять на то, будет ли он заходить в дальнейшем на ресурс.
Некоторые шрифты плохо работают на веб-сайтах. Сегодня существует много шрифтов. Шрифты, как мода, входят в стиль и не подходят для использования в Интернете. Но есть некоторые общие рекомендации, которые могут определить правильные шрифты для разных приложений.
Чтобы выбрать шрифт для сайта необходимо знать различные категории шрифтов. Как правило, используются стандартные шрифты для страниц основного текста, часто называемые экранными шрифтами, для коротких заголовков, выносок и подзаголовков. Стандартные шрифты включают Garamond, Times, Georgia, Arial, Helvetica и Verdana, которые были разработаны для удобочитаемости. Стандартные шрифты предназначены для легкого чтения, поэтому они хорошо работают в больших блоках текста.
Для оформления сайта был выбран шрифт Corbel. Данный шрифт легко читается, не перегружает окружающий дизайн.
На рисунках 3.2 и 3.3 представлен вид шрифтаCorbel.
Рисунок 3.2 – шрифт Corbel
Рисунок 3.3 – пример использования шрифта в оформлении сайта
Для рекламы в интернете лучше всего подойдут шрифты без засечек. Они реже используются в прессе и считаются свежими, подходящими для донесения несложной, информации. Такой тип хорошо смотрится в рекламных заголовках, притягивая к себе больше внимания, чем более официальные виды шрифтов.
3.5 Создание макета
Дизайн сайта и его качественное оформление – это показатель имиджа компании, выражение ее отношения к потенциальным клиентам. Если сайт выглядит красиво и оригинально, значит владельцу важно произвести хорошее впечатление на посетителей, и он заинтересован во внимании и оценке.
Разработка дизайна сайта должна осуществляться по особым правилам. Используя современные технологии можно создать качественный сайт, аккуратно оформленный.
Кроме того, при оформлении дизайна необходимо правильно сочетать цвета, следить за цветовым балансом, грамотно подбирать пропорции, освещение и объем графических элементов. Дизайн сайта должен разрабатываться с учетом тематики и целей функционирования веб-ресурса. Привлекательность и своеобразие веб-сайта – залог того, что целевая аудитория к нему потянется. Цвет фона или тема оформления веб-страницы обретает первостепенную значимость. Часто предпочтение отдается проверенному серому фону для веб-сайтов, поскольку он смотрится совершенно, чисто.
Важно учесть вес графических файлов, поскольку при высоком весе графики страницы сайта будут долго загружаться, а это негативно отразится на посещаемости ресурса. Не каждый пользователь захочет ждать несколько минут до полной загрузки страницы, он уйдет с сайта раньше, чем успеет ознакомиться с содержимым.
Для создания макета основными цветами были выбраны: серый, белый, черный. Серый цвет вызывает чувство серьезности, консерватизма и традиционализма. Серый – середина между черным и белым. Черный символизирует доход и стабильность.
Дизайн сайта выражает легкость и ненавязчивость, но при этом строгость и консерватизм. Скругленные углы элементов воспримутся человеком невраждебно. Мягкий градиент серого, заключенный в геометрические формы и светлый фон создает ощущение элегантности.
На рисунке 3.4 представлен макет разрабатываемого сайта.
Рисунок 3.4 – макет сайта
3.6 Схема реализации бонусов на сайте
Сегодня можно встретить сайты, которые ежедневно дают посетителям небольшие бонусы (как правило это несколько копеек или центов) на кошелек. Все что нужно, это ввести номер своего кошелька. Это сделано для привлечения посетителей на свой сайт. На таком сайте можно получить выплату только раз в сутки. Существует и другой вид бонусов – разовый бонус. Такие бонусы начисляются за регистрацию на сайтах.
На разрабатываемом сайте будет действовать система бонусов в виде скидок. Для организации данной системы будет использован интернет-сервис Яндекс.Метрика.
Яндекс.Метрика — это инструмент веб-аналитики, который помогает получать наглядные отчеты, видеозаписи действий посетителей, отслеживать источники трафика и оценивать эффективность онлайн- и офлайн-рекламы.
Данный сервис поможет собирать информацию о количестве посещений сайта с ip адреса. Данная информация будет сохраняться в БД на сервере. Далее информация о количестве посещений будет сравниваться с установленной константой. При выполнении условия (количество посещений больше 20), будет появляться окно с сообщением о получении бонуса.
На рисунке 3.5 Представлена диаграмма состояний бонусной системы.
Рисунок 3.5 – диаграмма состояния
Данная диаграмма отражает 3 состояния сайта: формирование информации, проверка посещений, сообщение о получении бонуса. В состоянии формирования информации осуществляется сбор данных о посещении сайта, информация о ip адресах и количестве посещений сохраняется в БД. В состоянии проверки определяется предоставление бонуса.
3.7 Структурная схема подсистемы распознавания образов
Структурная схема – это совокупность элементов и связей объектов, графическое представление системы, с помощью отдельных, связанных между собой, блоков системы, которые выполняют определенные простые функции. Структурная схема описывает основные функции системы. Данная схема разрабатываемой подсистемы распознавания образов представлена на рисунке 3.6.
Рисунок 3.6 – структурная схема подсистемы
Цифровое изображение загружается в разрабатываемую подсистему. После чего выполняется вейвлет-преобразование этого изображения в вейвлет-коэффициенты и импортируются в систему распознавания образов. Сигналы подаются на вход обученной нейронной сети, где происходит их сравнение с базой данных, после чего нейронная сеть передает результат в блок отображения результата анализа сигнала.
Диаграммы вариантов использования предназначены для моделирования функциональных требований к системе, в виде сценариев взаимодействия пользователей с системой. Вариант использования обозначается на диаграмме эллипсом.
Цель варианта использования – определить законченный аспект или фрагмент поведения некоторой сущности без раскрытия ее внутренней структуры.
Между элементами диаграммы вариантов использования могут существовать отношения ассоциации, расширения, включения или обобщения. Отношения описывают взаимодействие актеров и вариантов использования.
На рисунке 3.7 представлена диаграмма вариантов использования.
Рисунок 3.7 – диаграмма вариантов использования
На диаграмме вариантов использования представлены основные действия системы.
Пользователь имеет возможность импортировать интересующее его изображение в подсистему, а также видеть ее ответ на входящие данные. Подсистема, после получения данных от пользователя, преобразовывает их в вейвлет-коэффициенты и запрашивает у базы данных данные для сравнения, после чего производит анализ и отправляет ответ пользователю. Администратор имеет возможность добавлять в базу данных новые эталонные изображения, а база данных сохраняет их и предоставляет подсистеме необходимые данные для сравнения с входными данными.
Диаграмма последовательности представляет взаимодействие элементов модели в форме последовательности сообщений и соответствующих событий на линиях жизни объектов. Взаимодействие – единица поведения некоторого классификатора, которая концентрирует внимание на наблюдаемом обмене информацией между элементами, являющимися участниками данного взаимодействия. Диаграмма представлена на рисунке 3.8.
Рисунок 3.8 – диаграмма последовательности
На диаграмме показана последовательность обработки запроса. Пользователь направляет в подсистему интересующее его изображение. Подсистема преобразует полученное изображение в вейвлет-коэффициенты и направляет в нейронную сеть для распознавания. Нейронная сеть запрашивает у базы данных эталоны и производит анализ полученных данных. После нейронная сеть направляет результат анализа в подсистему и отображает результат пользователю.
3.8 Выбор нейронной сети
Обобщенно-регрессионная нейронная сеть (GRNN) – вид нейронной сети, где для регрессии используются ядерная аппроксимация.
Вероятностная нейронная сеть (PNN) – вид нейронной сети для задач классификации, где плотность вероятности принадлежности классам оценивается посредством ядерной аппроксимации.
PNN-сети предназначены для задач классификации, а GRNN – для задач регрессии. Сети этих двух типов представляют собой реализацию методов ядерной аппроксимации, оформленных в виде нейронной сети.
Отличие этих сетей в том, что GRNN используются в задачах регрессии, а PNN – в задачах классификации. GRNN – сеть обучается почти мгновенно, но может получиться большой и медленной. Сеть GRNN не обладает способностью экстраполировать данные.
Вероятностная нейронная сеть (PNN) представляет собой прямую нейронную сеть, которая широко используется в задачах классификации и распознавания образов. В алгоритме PNN родительская функция распределения вероятности (PDF) каждого класса аппроксимируется окном Парцена и непараметрической функцией. Затем, используя PDF каждого класса, оценивается вероятность появления новых входных данных и затем используется правило Байеса для распределения класса с наивысшей задней вероятностью на новые входные данные. Посредством этого метода вероятность ошибочной классификации минимизируется. В PNN операции организованы в многоуровневую прямую сеть с четырьмя слоями: входного, слоя образца, слоя суммирования и слоя решения. Число нейронов в первом слое зависит от размера входного сигнала. Количество узлов суммирования в слое суммирования зависит от числа классов. В данных сетях отсутствуют итерации и вычисления весов, и сеть обучается всего за один проход. Поэтому вероятностная нейронная сеть часто используется в задачах с небольшими наборами данных. При больших наборах данных возрастает сложность архитектуры сети и повышает вероятность неправильной классификации.
В данном проекте будет использоваться вероятностная нейронная сеть. Так как эти сети используют для решения задач в режиме реального времени, за счет их высокой скорости обучения, а так же задач классификации при исследовании разных объектов.
3.9 Разработка базы сигналов и создание нейронной сети
Для создания базы сигналов (эталонных изображений) были получены вейвлет-коэффициенты. На их основе была создана база данных эталонных сигналов.
Для импорта изображений и дальнейшего их вейвлет анализа была использована функция загрузки изображений в Matlab. На листинге 1представлен код программы, реализующий импорт изображений и вызов вейвлет-анализатора.
Листинг 1 – код программы
mot1 = imread ('1.bmp');
mot2 = imread ('2.bmp');
mot3 = imread ('3.bmp');
wavemenu
На рисунке 3.9 представлен результат анализа импортированного изображения.
Рисунок 3.9 – вейвлет-анализ импортированного изображения
После анализа создаются новые переменные с вейвлет-коэффициентами. С помощью функции newpnn() создается обучающее множество входных и желаемых выходных сигналов и генерируется нейронная сеть.
Листинг 2 – создание нейронной сети
img_1 = my_VAR_1.coefs(1:10000);
img_2 = my_VAR_2.coefs(1:10000);
img_3 = my_VAR_3.coefs(1:10000);
img_1 = img_1';
img_2 = img_2';
img_3 = img_3';
P = [img_1 img_2 img_3];
Tc = [1 2 3];
T= ind2vec (Tc);
T1=full(T);
net = newpnn(P,T1);
gensim(net)
С помощью функции gensim() создаем модель нейронной сети. На рисунке 3.10 представлена построенная модель нейронной сети в Simulink.
Рисунок 3.10 – модель нейронной сети
На рисунках 3.11 – 3.13 представлена архитектура построенной нейронной сети.
Рисунок 3.11 – архитектура слоев нейронной сети
Рисунок 3.12 – архитектура Layer 1нейронной сети
Рисунок 3.13 – архитектура Layer 2 нейронной сети
На рисунке 3.14 представлена схема подсистемы базы сигналовв Simulink.
Рисунок 3.14 – подсистема базы сигналов
Подсистема базы сигналов состоит из следующих блоков:
MultiportSwitch – многовходовой переключатель, который в зависимости от поступающей на него константы переключает подаваемый далее сигнал.
FromWorkspace – блок чтения данных, который считывает данные, из рабочей области Matlab.
Mathfunction– блок транспонирования (переворачивания) входного массива данных.
In1 и Out1 – блоки импортирования и экспортирования данных из подсистемы.
Для экспорта сигналов в Simulink-модель идентификации, необходимо добавить 0 к массиву коэффициентов. Код представлен на листинге 3.
Листинг 3 – код программы
img1 = [0 img_1'];
img2 = [0 img_2'];
img3 = [0 img_3'];
3.10 Создание модели идентификации сигналов
На рисунке ниже представлена модель идентификации поступающих на вход системы сигналов. Модель импортирует сигналы из рабочей среды Matlab, отображает результат анализа сигнала нейронной сетью.
Построенная Simulink-модель идентификации сигналов представлена на рисунке 3.15.
Рисунок 3.15 – Simulink-модель идентификации сигналов
Модель идентификации сигналов содержит следующие блоки:
Constant – блок, который генерирует константу, отвечающую за подачу конкретного сигнала.
Subsystem – подсистема базы сигналов.
ProbabilisticNeuralNetwork – созданная ранее нейронная сеть.
Display – блок, отображающий результат работы нейронной сети.
Для тестирования нейронной сети возьмем обрезанное изображение 3 класса. Изображение представленного на рисунке 3.16.
Рисунок 3.16 – тестируемое изображение
Результаты тестирования представлены на рисунке 3.17.
Рисунок 3.17 – результат тестирования нейронной сети
Из результатов тестирования можно сделать вывод, что сеть работает корректно. Обучение вероятностной нейронной сети намного проще, чем метод обратного распространения ошибки. Недостатком сети является ее размер, поскольку она фактически содержит в себе все обучающие данные, требует много памяти и может медленно работать.
Важным преимуществом PNN-сети является то, что выходное значение имеет вероятностный смысл, что позволяет легче интерпретировать. Также сеть быстро обучается. При обучения такой сети время тратится только на то, чтобы подавать ей на вход обучающие наблюдения. Сеть работает недостаточно быстро. Существенным недостатком сети является ее объем. PNN-сеть вмещает в себя все обучающие данные, поэтому она требует много памяти и может медленно работать.
3.11 Выводы по разделу
В рамках выполнения данного раздела был представлен первоначальный вариант дизайна логотипа для фирмы по продаже мототехники. Так же был разработан дизайн макета сайта. Была выбрана цветовая гамма сайта и логотипа. Была рассмотрена обобщенно-регрессионная и вероятностная нейронные сети. На основе их анализа выбрана сеть, которая будет использоваться в проектировании подсистемы распознавания образов. Были успешно реализованы задачи по созданию и обучению нейронной сети, реализована подсистема базы данных и модель идентификации сигналов. Было проведено тестирование полученной нейронной сети. Был проведен анализ работы сети.
Заключение
В результате проделанной работы был проведен анализ предметной области. Были проанализированы аналоги по разрабатываемой системе. Проанализированы существующие системы, результаты сравнений которых внесены в таблицу. Было проведено сравнение хостингов, выделены их плюсы и минусы. Выбран вид подходящего хостинга для разрабатываемого сайта.
Были разработаны модели информационной системы с помощью языка uml в программе EnterpriseArchitect: вариантов использования, обобщенная вариантов использования, компонентов, развертывания, состояний, последовательности, деятельности, схема БД.
Был произведен анализ сред разработки Web-приложений и выделены достоинства и недостатки AdobeDreamweaver, NetBeans IDE и Codelobster PHP Edition. В результате данного анализа предпочтение отдалось Codelobster PHP Edition. Был произведен анализ языков программирования: PHP, HTML и JavaScript. Были выделены плюсы и минусы данных языков.
БИБЛИОГРАФИЧЕСКИЙ СПИСОК
Интеллектуальные системы и технологии: учебно-методическое пособие/ Жашкова Т.В., Михеев М.Ю., Роганов В.Р. – Пенза: Пензенский государственный технологический университет, 2015. – 65 с.
Янк К. PHP и MySQL. От новичка к профессионалу/ Янк К. : Изд-во Эксмо, 2013. – 383 с.
Ларман Применение UML и шаблонов проектирования / Ларман, Крэг. - М.: Вильямс, 2015. - 624 c.
Смородин В.В. От хранения данных к управлению информацией / Смородин В.В: Изд-во Питер, 2016 -544с.
Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5/ Никсон Р.: Изд-во Питер, 2011. –688с.
Создание запросов в Microsoft SQL Server 2008: учебное пособие / Зудилова Т.В., Шмелева Г.Ю.— СПб.: СПбНИУ ИТМО.– 2013. – 149 с. – Режим доступа через ЭБС «Лань»: http://e.lanbook.com/view/book/43576/
Хаббард Дж. Автоматизированное проектирование баз данных / Хаббард Дж. М.: Мир, 2011. – 453 c.
Туманов В.Е. Основы проектирования реляционных баз данных / Туманов В.Е.: Бином, 2012. – 420 c.
Базы данных: учебное пособие для студ. высш. учеб. заведений / Кузин А.В., Левонисова С.В. – М.: ИЦ Академия, 2012. – 320с.
Пирогов, В.Ю. Информационные системы и базы данных: организация и проектирование: Учебное пособие / В.Ю. Пирогов. - СПб.: БХВ-Петербург, 2009. - 528 c.
Общие сведения о базах данных // Языки программирования Pascal и Delphi. Режим доступа: http://www.maksakov-sa.ru/BDDelphi/ObSvedBDDelphi/index.html, свободный.
Эрик Редмонд, Джим Уилсон. Семь баз данных за семь недель. Введение в современные базы данных и идеологию NoSQL/ Эрик Редмонд, Джим Уилсон. М.: ДМК Пресс, 2013. – 384 с. – Режим доступа через ЭБС «Лань»: http://e.lanbook.com/view/book/58690/
Метод ER–диаграмм («сущность–связь»). – Режим доступа: http://studopedia.ru/5_148227_metod–ER–diagramm–sushchnost–svyaz.html, свободный.