Файл: Разработка сайта компании по ремонту квартир и коттеджей».pdf

После анализа всех рассмотренных CMS было решено использовать CMS MODx Revolution для создания сайта, так как она удовлетворяет всем пожеланиям к системе управления web-сайтами.

ГЛАВА 2. СОЗДАНИЕ WEB-САЙТА КОМПАНИИ ПО РЕМОНТУ КВАРТИР И КОТТЕДЖЕЙ

2.1 Характеристика заказчика

Заказчиком разработки web-сайта является компания «Евроремонт Урал», местонахождение – Свердловская область, г. Екатеринбург. Компания занимается ремонтными и отделочными работами в квартирах, коттеджах и офисах, а так же разработкой дизайн-проекта.

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

Компания предоставляет гарантию 2 года на всю выполненную работу.

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

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

Основная аудитория:

• частные владельцы квартир и коттеджей;
• юридические лица.

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

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

---

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

2.2.1 Актуальность проекта

Конкуренция в бизнес-среде в Интернете постоянно усиливается. Это приводит к необходимости владельцев коммерческих сайтов разрабатывать наиболее эффективные ресурсы, способные увеличивать конверсию (то есть превращение посетителей в покупателей/заказчиков) и будут привлекательны для новых пользователей. Поэтому для разработки web-сайтов используются передовые информационные технологии и программные продукты.

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

2.2.2 Цель и назначение проекта

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

2.2.3 Эргономические и системные требования к дизайну проекта

Одним из требований заказчика было удобство просмотра посетителями web-сайта на различных устройствах, данный web-сайт должен быть адаптивен под различные девайсы. Под смартфоны (480×800), под планшеты или электронные книги (768×1024), под нетбуки и ноутбуки (1280×800) и под стандартные мониторы (desktop).

2.2.4 Входные данные к проекту

Предоставленные данные для разработки веб-сайта приведены в таблице 1.

Таблица 1 – Входные данные к проекту

Наименование	Описание	Тип содержимого	Формат содержимого
Портфолио	Фотографии с объектов с выполненной работой	Изображение	jpg
Картотека сотрудников	Фотографии сотрудников	Изображение	jpg
Картотека сотрудников	Краткая информация о сотрудниках	Текст	txt
Отзывы	Сканы отзывов клиентов	Изображение	jpg
Логотип	Логотип компании	Изображение	jpg

2.3 Реализация веб-сайта

2.3.1 Этап эскизного проектирования

---

Название веб-сайта – «Евроремонт Урал».

Автор дизайна веб-сайта – Озеров А.Н.

Разработка веб-сайта – Озеров А.Н.

Для разработки web-сайта использовалась система управления контентом web-сайтов MODx Revolution 2.5.0-pl.

В рамках работы над web-сайтом использовались такие технологии как:

• HTML (HyperText Markup Language) – язык гипертекстовой разметки документов при помощи которого создаваемые web-страницы, имеют возможность предоставлять информацию в глобальной компьютерной сети

Интернет;

• CSS (Cascading Style Sheets) – каскадные таблицы стилей для описания внешнего вида страниц. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML;
• JavaScript – прототипно-ориентированный сценарный язык программирования. Используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам;
• PHP (Hypertext Preprocessor) – язык сценариев общего назначения с открытым исходным кодом.

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

Логическая структура web-сайта представлена на рисунке 4.

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

Физическая структура web–сайта представлена на рисунке 5.

Рисунок 5 – Физическая структура web-сайта

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

Рисунок 6 – Блочная структура главной страницы

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

---

Рисунок 7 – Блочная структура страниц с описанием услуг

На странице «Портфолио» кроме основных элементов страницы webсайта расположены блоки с информацией о готовых объектах, состоящей из мозаики нескольких изображений из альбома и описанием выполненных работ. При нажатии на любое изображение на экран устройства выводится слайдер с изображениями из конкретного альбома. Блочная структура страницы фотогалерея представлена на рисунке 8.

Рисунок 8 – Блочная структура страницы «Портфолио»

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

Рисунок 9 – Блочная структура страниц «О компании», «Почему мы» и «О нас в цифрах»

2.3.2 Цветовая гамма web–сайта

При выборе цветовой схемы для дизайна web–сайта учитывались корпоративные цвета. Цветовое решение для дизайна страниц web-сайта представлено в таблице 2.

Таблица 2 – Цветовое решение для дизайна страниц web-сайта

Обозначение	Описание
#13130F	Фон шапки
#FFFFFF	Фон контента
#E2E2E2	Фон контента
#13130F	Фон строки навигации
#D3540E	Фон кнопок
#CCCC99	Фон кнопки в шапке
#13130F	Фон подвала
#F1F1D8	Фон навигационного пути

Цветовое решения для текста web-сайта представлено в таблице 3.

Таблица 3 – Цветовое решение для текста web-сайта

Обозначение	Описание
#000	Заголовки
#FFFFFF	Текст
#333	Текст
#000	Текст
#666	«Хлебные крошки»
#C14D0E	Ссылки

Основным шрифтом web-сайта является Philosopher. Кириллический шрифт Philosopher создан на основе шрифта Yellow Magician дизайнера Эрико Лебеденко. Шрифт был разработан с акцентом на русскоговорящую аудиторию дизайнеров-фрилансеров. Формат шрифта Opentype, работает на платформах PC и Mac. Данный шрифт распространяется бесплатно [20].

---

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

Проектированием кириллических шрифтов в России занимаются несколько компаний, наиболее известными из которых являются ParaType (бывшее подразделение компании ParaGraph, образовавшееся в 1998 году после покупки в 1997 году ParaGraph американской компанией Silicon Graphics и сокращения сотрудников шрифтового отдела) и студия Letterhead.

2.3.3 Разработка web-сайта средствами системы управления MODx

В CMS MODx имеются встроенные компоненты для функциональности web-сайта. Основные элементы CMS MODx Revolution представлены в таблице 4.

Таблица 4 – Основные элементы MODx

Элемент	Описание
Resource (ресурс).	Тип контейнера, для извлечения содержимого. Может иметь любое количество производных классов; наиболее распространенным является документ. Любой ресурс имеет свой уникальный идентификатор (ID).
Document (Документ)	Конкретный тип ресурса, который может быть контейнером для четырех видов ресурсов: Документов, Web-ссылок, статических ресурсов и символических ссылок (в большинстве случаев это обычная веб-страница).
Element (элемент)	Какой-либо элемент: шаблон, шаблон переменной, кусок, фрагмента, плагин, категория, или набор свойств в дереве элементов менеджера.
Chunk (чанк)	Блок html без исполняемых кодов, который можно использовать для встраивания в шаблоны, другие чанки, либо вызвать в снипете (TV). Чанк можно вызвать при помощи метки в виде [[$ChunkName]]

Окончание таблицы 4

Шаблон (template)	Базовая сущность, определяющая отображение страницы в MODx. Шаблоны обычно содержат HTML-теги разметки, которые определяют расположение и внешний вид вашего сайта. Когда страница сайта запрошена, MODx загружает документ или ресурс и его шаблон, затем MODx находит дополнительные поля в шаблоне и заменяет их соответствующими значениями из документа перед отправкой страницы в браузер. Шаблон может быть назначен любому ресурсу и определяет по сути веб-страницу в которой будет выведено содержимое этого ресурса.
Component (компонент)	Обеспечивает дополнительную функциональность для MODx в виде надстроек, шаблонов и дополнений.
Template Variables, сокращенно TV (переменные шаблона)	Особый вид ресурса поля, привязанный к шаблону, который используются для расширения стандартных полей, созданных пользователем. Вызывается следующим тегом: [[*tv]].
Chunk (чанк)	Блок html без исполняемых кодов, который можно использовать для встраивания в шаблоны, другие чанки, либо вызвать в снипете (TV). Чанк можно вызвать при помощи метки в виде [[$ChunkName]]
Snippet (сниппет)	PHP код, исполняемый во время обработки шаблона.
Category (категория)	Необязательное имя классификации, которое можно присоединить к любому элементу, чтобы отделить его от других подобных объектов.
Плагин (plugin)	Плагины также как и сниппеты представляют собой фрагменты кода, которые имеют доступ к MODx API. Однако в отличие от сниппетов плагины не требуется вызывать непосредственно в коде, т.к. они связаны с системными событиями, которые могут произойти на вебстранице. Т.е. код плагина выполняется только при наступлении какоголибо события на веб-страницы.

---