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

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

UML-диаграмма — это специализированный язык графического описания, предназначенный для объектного моделирования в сфере разработки различного программного обеспечения[1]. Данный язык имеет широкий профиль и представляет собой открытый стандарт, в котором используются различные графические обозначения, чтобы создать абстрактную модель системы. UML создавался для того, чтобы обеспечить определение, визуализацию, документирование, а также проектирование всевозможных программных систем. Стоит отметить, что сама по себе UML-диаграмма не представляет собой язык программирования, но при этом предусматривается возможность генерации на ее основе отдельного кода.;

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

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

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

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

Построим несколько необходимых моделей диаграмм:

Диаграммы прецедентов составляют модель прецедентов (вариантов использования, use-cases).

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

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

Построим диаграмму прецедентов для пользователей сайта ООО «Базальт». Для этого, для начала, определим роли (категории) пользователей сайта.

• — администратор;
• — директор;
• — механики холодильного оборудования;
• — пользователь;
• — заказчик.

Таблица 1 Описание ролей пользователей сайта.

Создание различных ролей пользователей сайта в виде действующих лиц представлено на рисунке 5.

Рис. 5.Действующие лица системы

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

Диаграмма прецедентов описывает функциональные требования к сайту. Функции представляются в виде вариантов использования (рис. 6).

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

Рис. 6. Диаграмма вариантов использования

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

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

Диаграмма взаимодействия — это диаграмма, на которой представлено взаимодействие, состоящее из множества объектов и отношений между ними, включая и сообщения, которыми они обмениваются. Этот термин применяется к видам диаграмм с акцентом на взаимодействии объектов (диаграммах кооперации, последовательности и деятельности) [1].

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

Диаграмма последовательностей относится к диаграммам взаимодействия UML, описывающим поведенческие аспекты системы, но рассматривает взаимодействие объектов во времени. Другими словами, диаграмма последовательностей отображает временные особенности передачи и приема сообщений объектами [2].

Ниже представлены диаграммы последовательности работы каждого действующего лица с сайтом (рис. 7−8).

Рис. 7. Диаграмма последовательности для действующего лица «Директор» и «Администратор»

Рис. 8. Диаграмма последовательности для действующих лиц «Пользователь» и «Заказчик»

На основе вышеприведенного анализа предметной области и типовых элементов сайта построим структурную схему сайта для сервисного центра ООО «Базальт» (рис. 9).

Рис. 9. Структурная схема сайта

Раздел «Главная» группирует все разделы и открывает доступ ко всем возможностям сайта.

Раздел «Информация о сервисном центре» содержит краткую информацию о предоставляемых услугах и организации в целом.

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

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

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

Напомним, что согласно определению сайта все составляющие его веб-страницы должны иметь единый дизайн. Для проектирования дизайна сайта сервисного центра был разработан опрос, который был проведен среди сотрудников (приложение 1).

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

• 1. Стиль дизайна — легкий, технократический.
• 2. Возможно использование технологии Flash. В случае невозможности отображения файлов flash браузером должна отображаться альтернативная информация.
• 3. В цветовом решении сайта должны доминировать «холодные» цвета:
  • — градации синего;
  • — градации серого;
  • — белый.

В итоге был выбран белый цвет для фона веб-страниц, синий для элементов навигации, белый цвет для выделения элементов логотипа компании и стандартное сочетание черного и белого цвета для основного текста содержательного наполнения сайта (рис. 10).

Рис. 10. Шаблон дизайна сайта сервисного центра

Для реализации представленного дизайна сайта необходимо будет использовать технологию css. Это набор правил оформления и формирования, которых может быть применен к различным элементам Web-страницы [9]. На всех страницах должны быть одни и те же управляющие элементы, одинаковые интервалы и подобные шрифты.

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