Файл: Сайт компании по ремонту квартир и коттеджей.pdf

22
Преимущества:
• возможность поддерживать несколько web-сайтов на базе одной установки;
• высокая скорость загрузки страниц;
• наличие графического редактора типа Word, который позволяет легко редактировать страницы;
• техническая поддержка;
• простота освоения для неопытных пользователей;
• высокий уровень безопасности.
Недостатки:
• мало документации;
• сложный интерфейс администрирования;
• высокая цена.
1С-Битрикс – это автоматизированная CMS, реализованная компанией
1С-Битрикс. Для хранения данных сайта используется файловая система сер- вера и реляционная СУБД. Поддерживаются такие СУБД как: MySQL,
Oracle, MS SQL. Продукт работает на Microsoft Windows и UNIX‐подобных платформах, включая Linux.
Количество модулей в устанавливаемой системе зависит от редакции продукта.
Первая версия Битрикса вышла 10 февраля 2003 года под названием
«Битрикс: Управление сайтом 3.0», и имела 14 модулей, позволяющих:
• максимально упростить разработку сайта;
• оптимизировать процесс управления структурой и содержанием;
• снизить расходы на сопровождение сайта;
• оценивать эффективность проводимых рекламных кампаний;
• обновлять систему с сайта компании «Битрикс»;
• создавать на базе продукта собственные бизнес-приложения.

23
Преимущества:
• высокая надежность и безопасность;
• стабильное обновление;
• техническая поддержка;
• много подробной документации.
Недостатки:
• требовательность к хостингу;
• необходимость в мощном оборудовании;
• высокая цена.
После анализа всех рассмотренных CMS было решено использовать
CMS MODx Revolution для создания сайта, так как она удовлетворяет всем пожеланиям к системе управления web-сайтами.

24
2
СОЗДАНИЕ WEB-САЙТА КОМПАНИИ ПО РЕМОНТУ
КВАРТИР, КОТТЕДЖЕЙ И ОФИСОВ
2.1
Характеристика заказчика
Заказчиком разработки web-сайта является компания «Евроремонт
Урал», местонахождение – Свердловская область, г. Екатеринбург. Компания занимается ремонтными и отделочными работами в квартирах, коттеджах и офисах, а так же разработкой дизайн-проекта.
Деятельность компании началась в начале 2015 года, как небольшая группа сотрудников, состоящая как из опытных мастеров, так и только начи- нающих свою профессиональную карьеру сотрудников. Основателем компа- нии и главным прорабом являлся Колясников Юрий Владимирович, в насто- ящее время занимающий должность директора компании. В мае 2016 года штат компании пополнили специалисты по дизайну интерьера, что позволило дополнительно оказывать услугу по дизайн-проекту, а так же улучшить каче- ство выполняемых работ по ремонту и отделке квартир, коттеджей и офисов.
На данный момент компанией реализовано больше 40 проектов различной сложности.
Компания предоставляет гарантию 2 года на всю выполненную работу.
В настоящее время компания проходит стадию объединения с другой строительной организацией, за счет чего увеличится штат сотрудников, и по- явится возможность нарастить объем выполняемых работ. Вектор развития компании нацелен на увеличение количества заказов, в том числе за счет привлечения новых клиентов средствами web-сайта.
Фирменные цвета, выбранные руководителем для дизайна web-сайта: черный и серый с небольшим количеством элементов рыжего оттенка. Лого- тип компании представляет собой изображение дома с перекрещивающимися строительными инструментами внутри.

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

26
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

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

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

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

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

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

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

33
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 – семейство шрифтов стиля гуманистический гротеск, ставшее известным благодаря его

34 использованию компанией 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]]