Размещено на http://www.allbest.ru/

НЕГОСУДАРСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ

ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ

«РЕГИОНАЛЬНЫЙ ОТКРЫТЫЙ СОЦИАЛЬНЫЙ ИНСТИТУТ»

Кафедра информатики, вычислительной техники и автоматизации

проектирование сайта-визитки для автотехнического центра «авант»

Курсовая работа по дисциплине

Проектирование и архитектура программного обеспечения

Студент 4 курса

группы ПР12о очной формы обучения

инженерно-технологического факультета

Устьянцев Никита Сергеевич

Научный руководитель:

доцент кафедры ИВТиА

Петров А.В.

Курск 2016



Содержание

Введение

1. Анализ предметной области

2. Проектирование web-сайта

2.1 Сравнительный анализ.

2.2 Пользовательские персонажи

2.3 Детальная концепция сайта

2.4 Разработка скелетной схемы страниц

2.5 Создание прототипа web-сайта

3. Выбор среды разработки.

3.1 CMS системы и их анализ

4. Заключение

Список используемых источников

Приложение А



Введение

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

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

1. Анализ предметной области

2. Проектирование веб-сайта

3. Выбор среды программирования

1. Анализ предметной области

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

· Раздел повествующий об услугах представляемых данным автотехническим центром.

· Раздел, в котором будет указана различная информация об этом автотехническим центре.

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

· Раздел контактов для связи, как с руководством, так и с отдельными специалистами из данного сервиса.

· Раздел рассказывающий клиентам о новостях данного автотехнического центра.

Все вышеуказанные разделы нашего веб-сайта являются чрезвычайно важными, потому что во всех деталях расскажут потенциальным клиентам об услугах, которые данный сервис может предоставить, а так же, ненавязчиво укажет, почему именно данный сервис следует выбрать в случае поломки транспортного средства. [1]

Данный сайт должен стать полноценной альтернативой различным видам рекламы, таким как объявления в газетах, выпуски на телевиденье и передачи по радио. И этого добиться не так сложно, как можно подумать на первый взгляд. Ведь нынешние технологии поисковых систем (Яндекс, Гугл например) могут за небольшую плату проводить рекламные кампании среди тех людей, которые проявляют интерес к данным услугам. Такой вид рекламы называется Контекстной рекламой. Она позволяет предлагать объявление только лишь тем людям, которые делают запросы посвященные услугам, которые предоставляет наш автотехнический центр.

Цель курсовой работы: спроектировать WEB-сайт для коммерческого учреждения (автотехнического центра «Авант»).

Задачи курсовой работы:

· провести анализ объектной области;

· создать пользовательский персонаж и пользовательский сценарий;

· создать карту сайта;

· создать скелетную схему web-сайта;

· разработать HTML-прототип сайта;

· исследовать рынок программных продуктов, предназначенных для создания web - сайта, управление им (CMS) и выбрать среду разработки;

· обосновать полученные результаты и сделать соответствующий вывод.

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

2. Проектирование web-сайта

2.1 Сравнительный анализ

Нам очень повезло, ведь сейчас почти каждый подобный технический сервис имеет информационный сайт. Поэтому, мы можем с легкостью провести анализ сайтов конкурентов для выявления их достоинств и недостатков чему, и посвящены следующие несколько абзацев.[2]

1. http://www.vdvserv.ru/ - сайт «Автотехнический сервис ВДВ»

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

2. http://servis45.ru/ - сайт Курганского автотехцентра

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

3. http://datsun-kursk.ru/maintenance.php - сайт сервисного центра Datsun

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

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

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

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

· Чем больше различной информации будет на сайте, тем лучше, но все же следует знать меру.

· Очень хорошим бонусом будет возможность написать в поддержку и задать вопрос.

· Не стоит добавлять лишние элементы и блоки.

· Стоит отказаться от мелькающих баннеров.

сайт проектирование информационный архитектура

Таблица сравнения сайтов:

Сайт/Критерий	vdvserv.ru	servis45.ru	datsun-ursk.ru
Скорость	8/10	9/10	5/10
Загруженность	6/10	7/10	9/10
Красота	5/10	9/10	8/10
Итого:	21	25	22

По итогам сравнения примером для подражания становится сайт www.servis45.ru

2.2 Пользовательские персонажи

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

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

Пользователь - человек, просматривающий информацию на сайте.

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

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

Ниже приведены примеры пользовательских персонажей:

ФИО: Речкин Петр Викторович

Возраст: 30 лет

Место жительства: г. Курск

Биографические сведения: системный администратор.

Мотивация: изменение сайта в соответствии с запросами начальства.

Запросы: добавление информации на сайт.

Платформа: Windows 8, любой браузер.

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

Пользовательский сценарий.

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

ФИО: Дородных Олег Викторович

Возраст: 40 лет

Место жительства: г. Курск

Биографические сведения: клиент.

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

Запросы: просмотр информации.

Платформа: Windows 7, любой браузер.

Основные претензии к Web: интуитивно-понятный интерфейс.

Пользовательский сценарий.

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

2.3 Детальная концепция сайта

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



Рис. 2.3.1 Карта сайта.

На рисунке 1 изображена карта сайта. Прямоугольниками обозначены web-страницы. С главной страницы web-сайта пользователь может попасть в основные разделы: О нас, Услуги, Прайс-лист, Контакты, Запчасти и Новости.

Описание разделов:

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

· Услуги - раздел имеющий полный список услуг и подробнейшее описание оных.

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

· Контакты - в данном разделе указываются возможные способы коммуникации с работниками и менеджерами данной кампании.

· Запчасти - данный техцентр имеет свой магазин автозапчастей, и здесь будут указаны цены на различные комплектующие.

· Новости - тут будут показаны различные новости и происшествия, напрямую связанные с данным автотехцентром.

2.4 Разработка скелетной схемы страниц

Работа проходит по следующим этапам:

* Определение страницы для включения в прототип.

* Составление скелетной схемы структуры страницы.

* Тестирование и при необходимости оптимизация скелетных схем.

* Представление скелетных схем для окончательного одобрения.

Принято выделять два типа страниц: шаблонная и уникальная страница. Шаблон определяет структуру и разметку, являющуюся общей для нескольких страниц. Если на сайте, к примеру, предлагается несколько основных статей с одинаковой структурой на нескольких страницах, тот они будут иметь одну скелетную схему. Если какой-либо элемент требует замены, например, статье требуется два рисунка, а не один, необходимо создать новый шаблон или уникальную страницу. Уникальная страница имеет разметку, отличную от остальных страниц.[2]

Скелетные схемы для сайта (темплейты, сториборды, вайрфреймы, лейауты) - спроектированные проволочные схемы страниц сайта. Они показывают, где и какие элементы должны стоять, как они должны выглядеть, прилагающаяся записка объясняет: почему так должны быть расстановлены различные элементы, где следует позаботиться о юзабилити и чего не пропустить. Программисты Html используют диаграммы в качестве скелета каждой страницы, связывающих ссылок, подключаемого содержания и т.д. Визуальные дизайнеры используют скелетные схемы как основу визуализации, которая показывает внешний вид элементов и всей страницы в целом. Однако скелетная схема предназначена только для показа иерархической подчиненности и расположения элементов (для каждого общего участка размечаемой информации) и не несет каких-либо указаний по дизайну. Применение простых графических очертаний позволит вам сосредоточиться, прежде всего, на информационном дизайне, чтобы удостовериться в его соответствии запросам пользователей, прежде чем перейти к наглядным изображениям. Для действующего сайта скелетные схемы создаются по скриншотам, к которым добавляются новые элементы содержания функциональных возможностей и навигации.

Ниже предоставлены скелетные схемы страниц web-сайта компьютерной фирмы ИП Лавриненко Б.А.

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

Причины выбора данного приложения:

· Крайне просто интерфейс;

· Всем знакомые горячие клавиши (ctrl-s для сохранения, например);

· Простая цветовая схема.

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



Рис. 2.4.1 Страница о нас

Рис. 2.4.2 Страница услуг



Рис. 2.4.3 Страница прайс-листа

Рис. 2.4.4 Страница запчастей



Рис. 2.4.5 Страница новостей

На скелетных схемах страниц, показанных на рисунках 2.4.1 и 2.4.5, представлено расположение основных элементов, отображающихся на всех страницах web-сайта:

· Лого - логотип кампании;

· Текст - место описания и привидения текстовой информации;

· Фото - различные иллюстрации к текстовой информации.

2.5. Создание прототипа web-сайта

Стадия проектирования сайта состоит из 2-х основных частей: Разработка информационной архитектуры и описание функциональности. Разработка информационной архитектуры сайта осуществляется по средствам создания прототипа сайта.

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

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

Основная цель разработки прототипа сайта - формирование максимально четкого представления о будущем сайте у заказчика и разработчиков перед началом разработки.

Более четко можно определить следующие цели создания прототипа сайта:

o Разработка информационной архитектуры;

o Usability-тестирование;

o Разработка технического задания (описания функциональности);

o Описание дизайна страниц (размещение контента на страницах);

Ниже предоставлен функциональный прототип главной страницы.

HTML код прототипа предоставлен в приложении А.

3. Выбор среды разработки

3.1 CMS системы и их анализ

Система управления содержимым (контентом) (англ. Content management system, CMS) -- компьютерная программа или система, используемая для обеспечения и организации совместного процесса создания, редактирования и управления текстовых и мультимедиа документов (содержимое или контента). Обычно это содержимое рассматривается как неструктурированные данные предметной задачи в противоположность структурированным данным, обычно находящимися под управлением СУБД.

Разновидности

В общем случае CMS делятся на:

ECMS -- Enterprise Content Management System (Система управления контентом масштаба предприятия)

WCMS -- Web Content Management System (Система управления Web-контентом).

В силу того, что ECMS имеют глубокую внутреннюю классификацию по предметным областям (HRM, DMS, CRM, ERP и т.д.) термин CMS заместил собой WCMS, превратившись в синоним системы управления сайтами. Подобные CMS позволяют управлять текстовым и графическим наполнением веб-сайта, предоставляя пользователю удобные инструменты хранения и публикации информации.

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

Генерация страниц по запросу. Системы такого типа работают на основе связки «Модуль редактирования > База данных > Модуль представления». Модуль представления генерирует страницу с содержанием при запросе на него, на основе информации из базы данных. Информация в базе данных изменяется с помощью модуля редактирования. Страницы заново создаются сервером при каждом запросе, что в свою очередь создаёт дополнительную нагрузку на системные ресурсы. Нагрузка может быть многократно снижена при использовании средств кэширования, которые имеются в современных веб-серверах.

Генерация страниц при редактировании. Системы этого типа суть программы для редактирования страниц, которые при внесении изменений в содержание сайта создают набор статических страниц. При таком способе в «жертву» приносится интерактивность между посетителем и содержимым сайта.

Смешанный тип.[3] Как понятно из названия, сочетает в себе преимущества первых двух. Может быть реализован путём кэширования -- модуль представления генерирует страницу один раз, в дальнейшем она в несколько раз быстрее подгружается из кэша. Кэш может обновляться как автоматически, по истечении некоторого срока времени или при внесении изменений в определённые разделы сайта, так и вручную по команде администратора. Другой подход -- сохранение определённых информационных блоков на этапе редактирования сайта и сборка страницы из этих блоков при запросе соответствующей страницы пользователем.

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

Основные задачи CMS:

собрать в единое целое и объединить на основе ролей и задач все разнотипные источники знаний и информации, доступные как внутри организации, так и за ее пределами;

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

Термин контент-менеджер обозначает род профессиональной деятельности -- редактор сайта.

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

Таблица 1 отображает список наиболее популярных CMS систем.[4]

Таблица 1.Список наиболее популярных CMS систем.

Название	Платформа	Поддерживаемые БД	Текущая версия	Лицензия	Цена (USD)
CMS Made Simple	PHP	MySQL/PostgreSQL	1.5.4	GNU GPL	Бесплатно
CMSimple	PHP		3.2	GNU AGPL	Бесплатно
Danneo	PHP	MySQL	0.5.3	GNU GPL	Бесплатно
Drupal	PHP	MySQL/PostgreSQL	6.14	GNU GPL	Бесплатно
e107	PHP	MySQL	0.7.15	GNU GPL	Бесплатно
eGroupWare	PHP	MySQL/PostgreSQL/Oracle	1.4.004	GNU GPL	Бесплатно
ELGG	PHP	MySQL	1.5	GNU GPL	Бесплатно
ExpressionEngine	PHP 4.1	MySQL	1.6.7	shareware	Бесплатно
eZ publish	PHP 4-5	MySQL/PostgreSQL/Oracle	4.2.0	GNU GPL	Бесплатно
ImpressCMS[источник не указан 18 дней]	PHP 5 >= 5.2.0	MySQL	1.1.3	GNU GPL	Бесплатно
InstantCMS	PHP 5 >= 5.1.0	MySQL	1.5.2	GNU GPL	Бесплатно
Joomla	PHP	MySQL	1.5.15	GNU GPL	Бесплатно
Mambo	PHP	MySQL	4.6.1	GNU GPL	Бесплатно
MediaWiki	PHP	MySQL, PostgreSQL	1.15.1	GNU GPL	Бесплатно
MODx	PHP	MySQL	1.0.2(Evolution)	GNU GPL	Бесплатно
Nucleus CMS	PHP	MySQL	3.23	GNU GPL	Бесплатно
OpenCms	Java	MySQL, PostgreSQL, Oracle, SQL Server, DB2, HSQL	7.0.5	GNU LGPL	Бесплатно
Oxite[1]	ASP.NET	MySQL, PostgreSQL, MS SQL и SQLite	Alpha	Ms-PL	Бесплатно
PHP-Fusion	PHP	MySQL	7.0.4	GNU GPL	Бесплатно
PHP-Nuke	PHP	MySQL	8.1	GNU GPL	Бесплатно
Plone	Zope, Python	MySQL, PostgreSQL, ZODB, SQLite, Oracle	3.3.1	GNU GPL	Бесплатно
PostNuke	PHP	MySQL	.764	GNU GPL	Бесплатно
Radiant CMS	Ruby	MySQL, PostgreSQL, SQLite	0.8.0	MIT License	Бесплатно
Sapid	PHP		1.2.3.07	GNU GPL	Бесплатно
Textpattern	PHP	MySQL	4.0.7	GNU GPL	Бесплатно
TikiWiki	PHP	MySQL, PostgreSQL, Oracle	2.2	GNU LGPL	Бесплатно
TYPO3	PHP	MySQL, PostgreSQL, Oracle	4.2.6	GNU GPL	Бесплатно
Typolight	PHP	MySQL, PostgreSQL, Oracle	2.7.5	GNU GPL	Бесплатно
Wordpress	PHP	MySQL	2.8.6	GNU GPL	Бесплатно
Xaraya	PHP сXHTML/XML/XSLT	MySQL, PostgreSQL, SQLite через ADOdb, MS SQL через Creole	1.1.3	GNU GPL	Бесплатно

Таблица сравнения cms систем:

Свойства/CMS	WordPress	Drupal	Joomla
Простота освоения	10/10	7/10	8/10
Удобство использования	10/10	6/10	8/10
Функциональность	8/10	10/10	9/10
Поддержка	7/10	10/10	7/10
Итоги:	35	33	32

По итогу, наилучшим выбором для нас оказалась CMS WordPress.

Различные дополнительные модули cms WordPress помогут нам создать качественный веб-ресурс. А конкретнее:

· Возможность поставить нестандартную схему оформления, а затем настроить ее под себя

· Данная cms позволяет управлять сайтом даже человеком с минимальными навыками веб разработки

· Эта система позволяет настроить различные модули аналитики (google analytics, yandex direct).

Система управления контентом WordPress была оценена, как необходимая руководством автотехцентра «Авант».



Заключение

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

Проведено проектирование web-сайта для атотехцентра «Авант» на основе проработки пользовательских персонажей и их сценариев, построения карты сайта с помощью сервиса draw.io, создания скелетных схем основных страниц web-сайта, позволяющих определить будущий интерфейс и дизайн.



Список используемых источников

1. CMS Matrix, www.cmsmatrix.org

2. On Lamp - все о системах по управлению содержимым с открытым кодом, http://www.onlamp.com/

3. Microsoft Office Visio Professional 2007 описание, http://office.microsoft.com/ru-ru/visio/HA101650311049.aspx

4. А. Фйо «Рентабельный веб-дизайн» стр. 153, Спб. 2006.

5. К. Уодкл «Информационная архитектура» стр. 204, Москва 2008.

6. Влад. В. Головач «Дизайн пользовательского интерфейса» стр. 73, Спб. 2007

7. А. Майрсе «Тестирование скелетных схем веб-страниц» стр. 66, Спб. 2006

8. Роман Савин «tестирование.com или пособие по жестокому обращению с багами в интернет-стартапах» стр. 303, Спб. 2009



Приложение А

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<title></title>

<link rel="stylesheet" href="styles.css" type="text/css">

</head>

<body>

<div id="menu">

<ul class="hr">

<li>О нас</li>

<li>Услуги</li>

<li>Прайс-лист</li>

<li>Контакты</li>

<li>Запчасти</li>

<li>Новости</li>

</ul>

<div id="logo"><p>АВАНТ</p></div>

</div>

<div class="container">

<div id="text0"><h3>О нас</h3></div>

<div id="text1"><p>Текст</p></div>

<div id="text2"><p>Текст</p></div>

<div id="text3"><p>Текст</p></div>

</div>

</body>

Размещено на Allbest.ru