Пояснительная записка к курсовой работе по курсу «Компьютерная графика»


Скачать 164.57 Kb.
НазваниеПояснительная записка к курсовой работе по курсу «Компьютерная графика»
Дата публикации29.03.2013
Размер164.57 Kb.
ТипПояснительная записка
userdocs.ru > Информатика > Пояснительная записка
Калужский филиал Московского Государственного Технического Университета им. Н.Э. Баумана

Расчетно-пояснительная записка к курсовой работе по курсу

«Компьютерная графика»

«Создание интернет-магазина цифровых фотоаппаратов»

Выполнил: Стаценко Д.О.

Учебная группа: ЭВМ-42

Проверил: Борсук Н.А.

Калуга, 2010

Оглавление


Оглавление 2

Введение 3

Постановка задачи 4

1. Исследовательская часть 5

1.1. Анализ аналогичных программных продуктов 5

1.1.1. Foto.ru 5

1.1.2. Fotomagazin.ru 6

1.2.3. Smartphoto.ru 7

1.2.4. Выводы 9

1.2. Анализ и выбор программных средств разработки 10

1.2.1. Выбор основной технологии 10

1.2.2. Выбор способа хранения данных 11

1.2.3. Выбор инструментальных средств 11

2. Конструкторская часть 13

2.1. Разработка прототипа интерфейса пользователя 13

2.2. Проектирование базы данных 15

2.3. Кодирование функций обработки базы данных 16

2.4. Кодирование функций фильтров и сортировок 18

2.5. Добавление возможностей редактирования базы данных 20

2.6. Заключительная стадия разработки 23

3. Технологическая часть 24

3.1. Руководство пользователя 24

3.2. Программные и аппаратные требования к продукту 27

Заключение 28

Введение


Современные сайты делятся на несколько направлений:

- информационные

- файлообменные

- интернет-магазины

- социальные сети

- другие

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

С развитием сети www, качество сайтов, а в частности интернет-магазинов, стало очень высоким.

Современные интернет магазины позволяют не только совершить покупку необходимого товара, но и «прицениться», т.е. выбрать товар с нуля, предоставляя полную информацию о характеристиках продаваемого продукта.
^



Постановка задачи


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

- выполнение основных операций интернет-магазина (покупка товара)

- удобный поиск необходимого товара

- добавление/удаление товара из каталога

- красивый и удобный пользовательский интерфейс

^

1. Исследовательская часть

1.1. Анализ аналогичных программных продуктов


Были рассмотрены различные аналоги интернет-магазинов:c:\users\dem0n13\desktop\foto.ru.bmp

1.1.1. Foto.ru


Рис. 1 – foto.ru - главная

Один из крупнейших сайтов, посвященных продаже фототехники.

Информативная часть самого интернет-магазина довольно ограничена.

Достоинства:

- Возле фотографии каждой модели есть текстовый блок, описывающий все основные характеристики, удовлетворяющие рядового любителя.

- Для профессионалов есть кнопка «Подробнее», открывающая отдельную страницу со всеми характеристиками модели

- Присутствует кнопка сравнения. Фактически она заменяет фильтр, т.е. отбирает интересующие модели в отдельную группу, затем располагает их «лицом к лицу», для конечного определения выбора

Недостатки:

- Неинформативная главная страница. Вся информация скрыта вглубь сайта. Для просмотра корзины, дополнительных характеристик, сравнения необходимо открывать отдельные страницы, что является тратой времени пользователя и ресурсов сервера

- Присутствуют только три скудных фильтра, из которых только два являются информативными: разрешение снимка и производитель модели (опять-таки можно выбрать только одного)c:\users\dem0n13\desktop\fotomagazin.ru.png

1.1.2. Fotomagazin.ru


Рис. 2 – fotomagazin.ru - главная

Открытие магазина сразу же начинается с выбора фильтра по производителю, что не оставляет возможности выбирать между моделями нескольких брендов (рис. 2).

Недостатки:

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

Рис. 3 – fotomagazin.ru – просмотр каталогаc:\users\dem0n13\desktop\fotomagazin.ru1.bmp


- Кроме принудительного фильтра по производителю, отсутствуют не только фильтры, но и сортировки по ценам.

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

- Многие модели не обладают фотографиями

1.2.3. Smartphoto.ruc:\users\dem0n13\desktop\smartphoto.bmp


Рис. 4 - Smartphoto.ru
Достоинства:

- Главная страница содержит краткое описание каждой модели

- Присутствуют некоторые фильтры, настройка которых производится в отдельном окне рис. 5)c:\users\dem0n13\desktop\smartphoto.ru.bmp


Рис. 5 – фильры на Smartphoto.ru

Недостатки:

- Слева присутствует фильтр, который делает невозможным выбор нескольких производителей

- Неинформативная корзина на главной странице

- Фильтры, просмотр корзины и просмотр характеристик организованы на отдельной странице.

1.2.4. Выводы


Таким образом, выделим основные черты интернет магазинов по продаже цифровых фотоаппаратов:

- наличие каталога с фотографиями и характеристиками продаваемого товара

- наличие фильтров и сортировок показа товара для удобства пользователя

- как и у всех CMS - присутствие панели для входа на страницу управления сайтом

Также, при анализе были выявлены общие недостатки классического интернет-магазина:

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

- отсутствие выбора фильтров и сортировок для отсечения товаров, не удовлетворяющих тому или иному критерию.
^

1.2. Анализ и выбор программных средств разработки


Задача создания интернет-магазина равнозначна задаче создания сайта с централизованной базой данных. Поэтому были рассмотрены основные технологии создания сайтов и хранения данных для него.
^

1.2.1. Выбор основной технологии


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

JavaScript – технология, исполняемая на стороне клиента, что является плюсом. Минусом послужило отсутствие необходимой визуализации разработки интерфейса пользователя.

ASP.NET – усовершенствованная технология ASP, использующая библиотеку .NET Framework, и обрабатывающая страницу на стороне сервера. Плюсы: перспективная технология, отличная среда разработки (MS Visual Studio). Минусом послужила относительная сложность и долгий процесс развертки программного инструментария.

Flash – технология динамического контента, встраимого в обычную html страницу и полностью выполняемого на стороне клиента в специальном Flash-проигрывателе. Кроме этого, обладает большими возможностями визуализации и визуальными средами разработки. Эта технология была выбрана как основная для моего курсового проекта.
^

1.2.2. Выбор способа хранения данных


Серверы баз данных (SQL, mySQL и др.) были исключены по причине сложности развертки и поддержки необходимого инструментария.

Файлы базы данных (Access и др.) были исключены, т.к. не поддерживаются пакетом Flash.

Текстовые файлы (TXT, INI, XML). Был выбран XML-файл, т.к. он позволяет хранить информацию, используя язык разметки XML, удобно представляющий информацию в базе данных и облегчающий считывание и обработку данных в Flash, применяя только стандартные библиотеки. Проблема сохранения базы данных была решена путем использования дополнительного скрипта PHP.
^

1.2.3. Выбор инструментальных средств


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

- Adobe Flex Builder 3;

- Apache 2.2.4, входящий в состав пакета Denwer;

- Notepad++ 5.6.8;

- Adobe Photoshop CS4.

Adobe Flex является основной средой разработки проекта. Пакет был использован при проектировании пользовательского интерфейса и создании всех основных функций продукта. Различие пакетов Flash и Flex состоит в их назначении. Flash предназначен для создания анимации, роликов, презентаций, а Flex – для создания интернет-приложений. Этим и обусловлен выбор основного инструмента.

Notepad++ был использован для кодирования php-скрипта, позволяющего сохранять базу данных во внешний файл на жестком диске, а также при первоначальном проектировании базы данных в формате XML. Среди основных конкурентов (AkelPad, Notepad, Word) отличается малым размером ПО, поддержкой подсветки кода распространенных языков программирования, продвинутыми возможностями работы с текстом (работа с несколькими файлами одновременно, нумерация строк, авто-закрытие XML-тегов).

Apache был использован для работы php-скрипта. Был выбран в пользу простоты установки и запуска пакета Denwer, в который он входит.

Adobe Photoshop был использован для подготовки изображений, используемых в проекте для заполнения базы данных фотографиями. Был выбран в пользу высокой скорости выполнения требуемых операций.
^

2. Конструкторская часть


Разработка продукта была разделена на следующие этапы:

1. Разработка прототипа интерфейса пользователя

2. Проектирование базы данных

3. Кодирование функций обработки базы данных

4. Кодирование функций фильтров и сортировок

5. Добавление возможностей редактирования базы данных

6. Заключительная стадия разработки
^

2.1. Разработка прототипа интерфейса пользователя


c:\users\dem0n13\desktop\4 семестр\компьютерная графика\курсовой\прототип.png

Рис. 6 – прототип интерфейса

Результатом данного этапа стали визуальные наброски, которые впоследствии «обросли» необходимыми компонентами, вызывающими различные функции.

c:\users\dem0n13\desktop\4 семестр\компьютерная графика\курсовой\прототип адсин.bmp

Рис. 7 – прототип админ панели

Создан каркас графического интерфейса пользователя (рис. 6), разбитый на 3 основные области: область поиска (фильтры и сортировки), область показа, сделанная в виде плитки и область корзины, сделанная в виде таблички со списком покупок. Также создан каркас управляющей панели - панели администратора (рис. 7).
^

2.2. Проектирование базы данных


Так как приложение фактически представляет вариант визуального представления базы данных каталога, на данном этапе потребовалось проектирование и создание минимальной базы данных в программе Notepad++ для последующего создания ее обработчиков. Для хранения данных была выбрана база данных в формате XML-файла.

Структура базы данных

Каждый фотоаппарат, занесенный в базу данных, имеет несколько характеристик, таких, как разрешение снимка, максимальное ISO и др. Например, фотоаппарату Panasonic DMC-FS7 соответствует следующая запись в базе данных:



Panasonic

DMC-FS7

10.0

0

4

16

2.7

0


6190




, где image – относительный путь к картинке (если атрибут отсутствует, то используется картинка по умолчанию), resolution – максимальное разрешение, matrix – величина, обратная размеру матрицы, zoom – оптический зум, digzoom – цифровой зум, display – размер TFT-дисплея, iso – максимальная светочувствительность, price – цена.
^

2.3. Кодирование функций обработки базы данных


На данном этапе были запрограммированы обработчики для чтения и записи информации из базы данных. Эти обработчики, а также и загруженные данные помещены в отдельный класс dbWorker. Чтение производится с помощью встроенных функций пакета Flex. Так как запись напрямую в файловую систему из Flash-приложений невозможна, совершается передача данных специальному php-скрипту, обрабатываемому сервером Apache, который сохраняет эти данные в файл (рис. 8). Тестирования проводились на базе данных, созданной в п.2.2.c:\users\dem0n13\desktop\4 семестр\компьютерная графика\курсовой\без имени-3.bmp


Рис. 8 – схема обработки базы данных

//Функция передачи базы php-коду для дальнейшего сохранения на диске

public function SaveTest():void

{

//переменная для передачи БД

var vstr: URLVariables = new URLVariables();

//Оборачиваем базу в общий XML тег

vstr.CurrentOut = (new XML("" +

"" + dbBase.toString() +

"")).toString(); //

//Создаем новый запрос

var ureq: URLRequest = new URLRequest("http://test.ru/index.php");

//Вставляем в запрос базу данных

ureq.data = vstr;

//Создаем загрузчик

var uload: URLLoader = new URLLoader();

//Выполняем запрос

uload.load(ureq);

}
//Функция сохранения базы данных на диск



//Получаем переданную БД

$xmlString = $_GET["CurrentOut"];

//Корректируем \” в “ с помощью регулярных выражений

$pattern = "/\\\\\"/m";

$replace = "\"";

$xmlString = preg_replace($pattern, $replace, $xmlString);

//Открываем файл

$file = fopen("db.xml", "w");

//Вписываем заголовок XML-файла

fwrite($file, "\n");

//Записываем БД

fwrite($file, $xmlString);

//Закрываем файл

fclose($file);

?>
^

2.4. Кодирование функций фильтров и сортировок


На данном этапе созданы все функции фильтрации (по разрешению, оптическому зуму, размеру дисплея, ценовой категории и производителю) и сортировки (по производителю, цене – убыванию и цене – возрастанию). Для обработки компонентов (ползунков, флажков) использовался класс со статическими членами Settings, содержащий специальный обработчик события. Когда пользователь использует какой-либо из этих компонентов, изменяется соответствующее свойство в классе Settings и вызывается обработчик, говорящий программе, что какой-то из параметров сортировки или фильтра был изменен и каталог перезагружается уже отфильтрованным и отсортированным.
// Функция фильтра. Возвращает true, если объект удовлетворяет всем требованиям фильтра

private function Filter(value: Object): Boolean

{

// Проверка разрешения

if (Number(value.resolution)<=settings.resolution)

{

return false;

}

// Проверка зума

if (Number(value.zoom)

{

return false;

}

// Проверка дисплея

if (Number(value.display)

{

return false;

}

// Проверка цены

if (Number(value.price)

{

return false;

}

// Проверка производителя

if ((settings.getVendor().length!=0)&&(settings.getVendor().indexOf(String(value.vendor))==-1))

{

return false;

}

//Все фильтры пройдены

return true;

}

^

2.5. Добавление возможностей редактирования базы данных


На данном этапе добавлена визуализация редактирования БД в виде отдельной панели администратора сайта, поддержка функций добавления, редактирования и удаления товара из каталога.

При разработке было использовано понятие «Состояния приложения». Эта возможность позволяет использовать на одной форме различный набор компонентов и событий. При запуске приложения активируется состояние «base state» (так называемое состояние по умолчанию), которое содержит все компоненты, необходимые для просмотра каталога. При входе в панель администратора активируется состояние «Admin state» (разработанное состояние), которое временно удаляет ненужные компоненты с формы и добавляет компоненты, необходимые в админ-панели.

Админ-панель представлена в виде таблицы с редактируемыми ячейками, заполненной списком товаров.

Под добавление нового товара отведены отдельные поля ввода, защищенные от заведомо неправильного ввода обработчиком, использующим регулярные выражения (см. код ниже).
// Функция проверки всех полей ввода. Возвращает красный цвет, если ввод неверный, зеленый – если верный, белый – если поле не обязательно для ввода и пустое. Принимает имя поля и его значение

public function TestInput(inpName: String, value: String):uint

{

var flug: Boolean = true;

var pattern: RegExp;

//выбираем имя поля и в зависимости от этого – нужное регулярное выражение

switch (inpName)

{

case "inpVendor":

pattern = /^[A-Z][a-z]+$/;

break;

case "inpModel":

pattern = /^[A-Z]+[- A-Za-z0-9]+$/;

break;

case "inpResolution":

case "inpZoom":

case "inpDigZoom":

pattern = /^\d+(.\d)?$/;

break;

case "inpMatrix":

case "inpDisplay":

pattern = /(^\d+(.\d)?$)|(^$)/;

break;

case "inpIso":

pattern = /(^\d{3,}$)|(^$)/;

break;

case "inpPrice":

pattern = /^\d{4,}$/;

break;

case "inpImage":

pattern = /(^Images\/[A-Z][a-z]+\/[a-z0-9]+[.]png$)|(^$)/;

}

//проверка значения поля регулярным выражением

flug = pattern.test(value);

arrInput[inpName] = flug;

//Если проверка не пройдена

if (!flug)

{

return uint("0xff0000"); //неверный ввод, возвращаем красный

}

//если поле необязательное

if (((inpName=="inpMatrix")||(inpName=="inpIso")||(inpName=="inpImage")||(inpName=="inpDisplay"))&&(value==""))

{

return uint("0xffffff"); //поле пустое, возвращаем белый

}

//Все проверки пройдены

return uint("0x00ff00"); //Верный ввод, возвращаем зеленый

}

^

2.6. Заключительная стадия разработки


Этот этап включил в себя доработку интерфейса до конечного вида:

- скорректированная цветовая гамма, прозрачность форм;

- произведена оптимизация форм под изменение разрешения дисплея конечного пользователя (аналогия – «резиновая верстка» сайтов);

- добавлены различные flash-эффекты, с целью увеличения эффекта присутствия (например, при наведении курсора мыши товар немного увеличивается, «подтверждая» выбор пользователя) и улучшения внешнего вида;

- заполнена база данных демонстрационным содержимым, включающим в себя информацию по каждому товару и фотографии в формате png, полученные в сети интернет и обработанные с помощью пакета Adobe Photoshop (скорректированы разрешение, фон и формат файлов фотографий).

c:\users\dem0n13\desktop\4 семестр\компьютерная графика\курсовой\целиком.bmp

Рис. 9 – окончательный вид разработки

^

3. Технологическая часть

3.1. Руководство пользователя


Установка

Установка подразумевает то, что необходимые аппаратные программные требования выполнены, программное обеспечение установлено и настроено.

Для установки скопируйте файлы проекта в корневой каталог сайта. Запускаемый файл – InternetShop.html.

Просмотр в режиме пользователя

После запуска интернет магазина появляется его главное окно – окно просмотра, которое разделяется на 4 области (рис. 10): c:\users\dem0n13\desktop\безымянный.bmp

Рис. 10 – главная страница

1) Подбор по параметрам (рис. 11). В этой области пользователь может задать вид фильтра, который необходим для ускорения процесса выбора товара, а также режим сортировки (по производителю и цене – убывание и возрастание).
Рис. 11 – фильтры и сортировкиc:\users\dem0n13\desktop\1.bmp


2) Каталог товаров (рис. 12). Показывает список товаров в виде фотографии и списка характеристик с учетом пользовательского выбора фильтров и сортировки. В этой области можно произвести покупку любого выбранного товара. Для покупки необходимого товара нужно выбрать его количество и нажать кнопку «Купить».c:\users\dem0n13\desktop\2.bmp


Рис. 12 – пример каталога

3) Корзина (рис. 13). После покупки товара его название, количество и цена попадают в область корзины. Здесь можно отменить покупку товара. Для этого необходимо выбрать строку с названием товара и нажать кнопку «Удалить». Для покупки всех выбранных товаров, нажмите кнопку «Купить (***руб.)», где *** - общая стоимость всех выбранных вами товаров.c:\users\dem0n13\desktop\3.bmp


Рис. 13 - вид корзины

4) Кнопка входа в Админ-панель. Для того, чтобы открыть редактор базы данных, нажмите на кнопку «Админ».

Просмотр в режиме администратораc:\users\dem0n13\desktop\4.bmp


Рис. 14 – вид админ-панели

Для редактирования уже существующей записи, выберите нужный параметр редактируемого товара и измените его.

Для добавления нового товара необходимо заполнить поля в нижней части редактора. Красные поля означают, что ввод некорректен и добавление осуществлено не будет. Зеленые поля означают, что ввод корректен. Белый цвет – обозначение необязательных полей, которые по умолчанию заполняются нулем. После корректного заполнения всех полей нажмите кнопку «Добавить товар».

Для удаления товара выберите строку таблицы, соответствующую необходимой модели и нажмите кнопку «Удалить товар».

Для сохранения произведенных изменений нажмите кнопку «Сохранить БД». В противном случае, все изменения будут в силе только до перезагрузки сайта.

Чтобы перейти обратно в режим просмотра пользователя, нажмите кнопку «Выйти из админпанели».
^

3.2. Программные и аппаратные требования к продукту


Программные требования:

- Любой установленный браузер с установленным Flash Player 9;

- Для возможности редактирования базы данных необходим сервер, поддерживающий php5 (Apache).

Системные требования:

- Процессор: 1 Ггц и выше;

- Оперативная память: 512мб и выше

- Видеокарта: DirectX совместимая, 128мб видеопамяти и выше

- Мышь, клавиатура

Заключение


В ходе разработки данного проекта достигнуты все цели, поставленные в техническом задании.

Изучена среда разработки Flex, позволяющая разрабатывать мощные интернет-ресурсы и приложения.

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

- красивым дизайном с флеш-эффектами;

- большими возможностями фильтрации и сортировки;

- возможностью редактирования каталога в режиме администратора;

- небольшим размером и быстрой загрузкой сайта.

Похожие:

Пояснительная записка к курсовой работе по курсу «Компьютерная графика» iconПояснительная записка к курсовой работе по дисциплине «Основы мехатроники»...

Пояснительная записка к курсовой работе по курсу «Компьютерная графика» iconПояснительная записка к курсовой работе по дисциплине «Основы мехатроники»...

Пояснительная записка к курсовой работе по курсу «Компьютерная графика» iconРасчетно-пояснительная записка к курсовой работе по курсу «Техника...
Эффективность перевозок автомобильным транспортом является очень важным показателем, так как более 60% всех перевозок в мире осуществляется...
Пояснительная записка к курсовой работе по курсу «Компьютерная графика» iconПояснительная записка к курсовой работе по курсу "Теория автоматического...
Анализ и синтез систем автоматического регулирования при проектировании средств автоматизации
Пояснительная записка к курсовой работе по курсу «Компьютерная графика» iconКомпьютерная графика и web дизайн Конспект лекций Днепропетровск
Конспект лекций по дисциплине “Компьютерная графика и web дизайн” содержит теоретические сведения для подготовки к зачету. В конспекте...
Пояснительная записка к курсовой работе по курсу «Компьютерная графика» iconПояснительная записка курсовой работы по дисциплине расчет и конструирование изделий и форм
Учреждение образования ‹‹белорусский государственный технологический университет››
Пояснительная записка к курсовой работе по курсу «Компьютерная графика» iconИнженерная и компьютерная графика, лекция

Пояснительная записка к курсовой работе по курсу «Компьютерная графика» iconКомпьютерная графика
Графическое изображение должно создаваться определенными программными средствами
Пояснительная записка к курсовой работе по курсу «Компьютерная графика» iconПояснительная записка

Пояснительная записка к курсовой работе по курсу «Компьютерная графика» iconИнженерная и компьютерная графика
Министерство транспорта Российской Федерации Федеральное агентство железнодорожного транспорта
Вы можете разместить ссылку на наш сайт:
Школьные материалы


При копировании материала укажите ссылку © 2015
контакты
userdocs.ru
Главная страница