Проектирование сайта-визитки для автотехнического центра 'Авант'

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

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

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

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

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

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

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

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

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

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

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

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

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

Петров А.В.

Курск 2016

Содержание

Введение

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

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

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

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

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

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

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

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

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

.        Заключение

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

Приложение А

Введение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.        #"877756.files/image001.gif">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ниже предоставлены скелетные схемы страниц 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   Описание дизайна страниц (размещение контента на страницах);

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

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

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

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

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

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

В общем случае CMS делятся на:-- 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 систем.

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

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

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

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

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

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

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

Заключение

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

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

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

1.      CMS Matrix, www.cmsmatrix.org <http://www.cmsmatrix.org>

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

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

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

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

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

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

.        Роман Савин «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>

<li>О нас</li>

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

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

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

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

</ul>

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

</div>

<div>

<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>