Материал: Разработка коммерческого сайта Кардымовского лесничества

Создание графического интерфейса

Adobe Photoshop CS5

Многофункциональный графический редактор, разработанный и распространяемый фирмой Adobe Systems. В основном работает с растровыми изображениями, однако имеет некоторые векторные инструменты. Продукт является лидером рынка в области коммерческих средств редактирования растровых изображений, и наиболее известным продуктом фирмы Adobe. Часто эту программу называют просто Photoshop. В настоящее время Photoshop доступен на платформах Mac и Windows. Ранние версии редактора были портированы под SGI IRIX, но официальная поддержка была прекращена, начиная с третьей версии продукта. Для версий 8.0 и CS6 возможен запуск под Linux с помощью альтернативы Windows API Wine.

Несмотря на то, что изначально программа была разработана как редактор изображений для полиграфии, в данное время она широко используется и в веб-дизайне. В более ранней версии была включена специальная программа для этих целей - Adobe ImageReady, которая была исключена из версии CS3 за счёт интеграции её функций в сам Photoshop, а также включения в линейку программных продуктов Adobe Fireworks, перешедшего в собственность Adobe после приобретения компании Macromedia.тесно связан с другими программами для обработки медиафайлов, анимации и другого творчества. Совместно с такими программами, как Adobe ImageReady (программа упразднена в версии CS3), Adobe Illustrator, Adobe Premiere, Adobe After Effects и Adobe Encore DVD, он может использоваться для создания профессиональных DVD, обеспечивает средства нелинейного монтажа и создания таких спецэффектов, как фоны, текстуры и т. д. для телевидения, кинематографа и всемирной паутины. Photoshop также прижился в кругах разработчиков компьютерных игр.

Основной формат Photoshop, PSD, может быть экспортирован и импортирован всеми программными продуктами, перечисленными выше. Photoshop CS поддерживает создание меню для DVD. Совместно с Adobe Encore DVD, Photoshop позволяет создавать меню или кнопки DVD. Photoshop CS3 в версии Extended поддерживает также работу с трёхмерными слоями.

Из-за высокой популярности Photoshop поддержка специфического для неё формата PSD была реализована во многих графических программах, таких как Macromedia Fireworks, Corel PHOTO-PAINT, WinImages, GIMP, Corel Paint Shop Pro и других.

Языки проектирования

HTML - язык гипертекстовой разметки - стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML).

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

JavaScript - обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.- это широко используемый язык сценариев общего назначения с открытым исходным кодом. Говоря проще, PHP это язык программирования, специально разработанный для написания web-приложений (сценариев), исполняющихся на Web-сервере.(Structured Query Language - Структурированный язык запросов) - язык управления базами данных для реляционных баз данных. Сам по себе SQL не является Тьюринг-полным языком программирования, но его стандарт позволяет создавать для него процедурные расширения, которые расширяют его функциональность до полноценного языка программирования.

1.6 Перечень задач подлежащих решению в процессе разработки

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

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

1)   предусмотреть возможность перемещения между страницами сайта;

2)      организовать возможность просмотра пользователем информационных материалов различного типа;

)        предусмотреть возможность просмотра результата выполнения тестовых заданий в режиме администратора;

)        предусмотреть возможность разграничения доступа пользователей к управлению сайтом;

)        предусмотреть возможность пользователю с соответствующими правами оставлять комментарии;

)        предусмотреть возможность поиска информации на сайте;

)        внутреннего интернет-магазина.

c)   Провести анализ средств разработки проектов данного типа.

d)      Создать эргономичный и удобный макет сайта.)     Наполнить сайт информацией, реализовать все функции проекта в полном объеме.)  Провести разностороннее тестирование проекта, выявить и исправить ошибки.)       Провести технико-экономическое обоснование разработки проекта

h)   Провести анализ вопросов труда, техники безопасности и эргономики.

Во время процесса подготовки и планирования разработки программного продукта были проанализированы текущие потребности заказчика. В результате появилась идея реализации проекта и понимание, каков должен быть итоговый результат работы. В соответствии с этим был составлен план разработки. Определенны средства разработки программного продукта. Представлен внешний облик будущего проекта. Перечислен функционал, который будет реализован. В соответствии с планом был составлен перечень задач, необходимых для разработки сайта «Кардымовское лесничество - филиала ОГКУ «Смолуплес».

2. Разработка проекта

2.1 Разработка структуры системы

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

Рисунок 3 - Логическая структура сайта

2.2 Разработка и описание алгоритмов

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

2.3 Разработка интерфейса взаимодействия пользователя с системой

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

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

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

Критерии качественного пользовательского интерфейса:

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

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

Под совокупностью средств и методов интерфейса пользователя подразумеваются:

-    вывод информации на экран;

-       ввода информации/команд пользователем в программу.

Интерфейс разработанного программного продукта представлен на рисунке 2.2.

Рисунок 4 - Пользовательский интерфейс

В данной части дипломного проекта рассмотрены: структура проекта, составные части программного продукта, что является предварительным условием проектирования системы.

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

3. Реализация проекта системы

3.1 Разработка программы

Разработка программы включает в себя несколько этапов:

-    Выбор темы дипломной работы.

-       Анализ технического задания. Изучение поставленных задач по функционалу программы.

-       Исследование предметной области поставленной задачи. Для реализации проекты необходимо иметь достаточную компетенцию в области разработки web-приложений, знать принципы работы, способы создания.

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

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

-       Разработка дружественного пользовательского интерфейса. Верстка страницы web-приложения происходит в приложении Notepad++. Разработка и нарезка дизайна происходит в Adobe Photoshop CS5.

-       Наполнение сайта информацией.

-       Разработка сценариев.

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

Для выполнения работы готовый PSD-файл сохраняется в облачное хранилище Аdode Creative Cloud и импортируется в редактор Brackets. Затем идет верстка проекта в HTML и CSS, a все необходимые графические ресурсы сразу же сохраняются здесь же, в указанную папку, по умолчанию путь проекта. После того, как основы готовы происходит сверка и правка графического интерфейса, чтобы он полностью соответствовал тому варианту, который был запланирован изначально. Затем этап верстки завершается, но лишь до начала этапа программирования.

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

Одновременно с программированием функционала проекта проводится верстка новых страниц, чтобы все соответствовало должному виду.

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

Все данные, необходимые для работы системы, хранятся в базе данных.

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

Разработка форм входных и выходных данных

При работе с проектом были определены следующие входные и выходные данные:

В виде входных данных представлены:

-    данные авторизации;

-       данные регистрации;

-       данные изменения, создания, удаления контента;

-       данные на форме заказа товара.

 В виде выходных данных на сайте представлены:

-    контент сайта;

-       форма с заказами пользователей;

-       информационные страницы.

На сайте представлено разграничение прав доступа:

-    администратор сайта;

-       клиент (обычный пользователь).

Функции администратора (рисунок 5).:

-    управление дизайном;

-       управление контентом;

-       управление интернет-магазином;

-       управление структурой сайиа;

-       управление заказами клиентов.

Рисунок 5 - Функции администратора

Функции клиента (рисунок 6):

-    просмотр информации;

-       регистрация;

-       авторизация;

-       заказ товаров в интернет-магазине;

-       использование формы обратной связи;

-       оставление оценок и отзывов на сайте.

Рисунок 6 - Функции пользователя(клиента)

3.2 Тестирование программных средств

Тестирование сайта проводилось посредством выполнения в различных браузерах, на различных ОС и устройствах.

Для начала тестирования проводились в ОС Windows 8.1.

a)   Тестирование в браузере Google Chrome. Сайт тестирование прошел, открывается без каких-либо проблем, отклонений от ожидаемого результата нет (рисунок 7).

Рисунок 7 - Тестирование в Google Chrome

)     Открытие в браузере Mozilla FireFox так же выдают положительный результат (рисунок 8).

Рисунок 8 - Тестирование в Mozilla FireFox

)     Эмуляция запуска сайта на Android-устройстве (рисунок 9).

Рисунок 9 - Тестирование в эмуляции на Android-устройстве

)     Тестирование скорости работы сайта в разных браузерах;

Тестирование на скорость работы проводились в следующих браузерах:

-    Google Chrome;

-       Mozilla FireFox;

-       Yandex Browser;

-       Opera.

При тестировании скорость работы сайта во всех браузерах была высокой и не вызывала дискомфорта при просмотре сайта.)        Тестирование доступа ко всем страницам.

Тестирование прошло успешно, у пользователя был доступ ко всем разрешенным страницам сайта (приложение Б).) Тестирование формы обратной связи.

Тестирование прошло успешно. Сообщение отправляется и приходит на E-Mail лесничества (рисунок 10).

Рисунок 10 - Тестирование формы обратной связи

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

3.3 Разработка сопроводительных документов

Техническое задание

Введение

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

Основание для разработки

Задание на дипломный проект, а так же предоставление услуг и товаров лесничества в электронном виде.

Требования к организации входных данных

Входные данные:

Для пользователей: авторизация, регистрация, форма оформления заказа.

Для администратора: авторизация, регистрация, контент сайта, товары интернет-магазина.

Требования к организации выходных данных

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

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

Назначение разработки

Проект предназначен для клиентов компании, желающих ознакомится и воспользоваться услугами Кардымовского лесничества - филиала ОГКУ «Смолупрлес».

Требования к сайту

Сайт должен предоставлять возможность ознакомления с видами продаваемой продукции.

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

При создании сайта, должны быть учтены следующие требования: