Файл: Классификация web-сайтов.pdf

Первая версия Битрикса вышла 10 февраля 2003 года под названием «Битрикс: Управление сайтом 3.0», и имела 14 модулей, позволяющих:

• максимально упростить разработку сайта;
• оптимизировать процесс управления структурой и содержанием;
• снизить расходы на сопровождение сайта;
• оценивать эффективность проводимых рекламных кампаний;
• обновлять систему с сайта компании «Битрикс»;
• создавать на базе продукта собственные бизнес-приложения.

Преимущества:

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

После анализа всех рассмотренных 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 – Входные данные к проекту

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-сайта

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

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

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

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

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