Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

СОДЕРЖАНИЕ

ВВЕДЕНИЕ

1. АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ

1.1 Обзор предметной области

1.2 Выбор типа сайта

1.3 Аналоги

1.4 Определение требований и постановка задач

1.5 Видение продукта

2. РАЗРАБОТКА СТРУКТУРЫ САЙТА

2.1 Структура веб-сайтов

2.2 Структура веб-страниц

2.3 Структура веб-сайта «Печи Вологодчины»

2.3.1 Структура сайта

2.3.2 Структура веб-страницы

3. РАЗРАБОТКА ДИЗАЙНА САЙТА

3.1 Анализ разработки дизайна сайта

3.2 Разработка дизайна веб-сайта для организации « Печи Вологодчины»

3.2.1 Разработка логотипа веб-сайта в программе Adobe Photoshop CC 2015

3.2.2 Отцифровка логотипа организации «Печи Вологодчины» в программе Adobe Photoshop CC 2015

4. ВЫБОР СРЕДСТВ РАЗРАБОТКИ

4.1 Обзор средств разработки

4.1.1 Wix

4.1.2 Tilda Publishing

4.1.3 Joomla

4.2 Выбор CMS для разработки веб-сайта

4.3 Установка CMS Joomla

5. РАЗРАБОТКА ВЕБ-САЙТА ДЛЯ ОРГАНИЗАЦИИ «ПЕЧИ ВОЛОГОДЧИНЫ»

5.1 Выбор шаблона для веб-сайта

5.2 Создание категорий сайта

5.3 Разработка пунктов меню

5.4 Создание материалов

5.5 Модуль заднего фона

5.6 Разработка галереи

5.7 Заполнение статей

6. ТЕСТИРОВАНИЕ

6.1 Методика тестирования

6.2 Результаты тестирования

6.3 Оценка качества программного продукта

7. АПРОБАЦИЯ И ВНЕДРЕНИЕ

ЗАКЛЮЧЕНИЕ

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

ПРИЛОЖЕНИЕ



ВВЕДЕНИЕ

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

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

Исходя из вышесказанного, целью данной ВКР является разработка веб-сайта для организации «Печи Вологодчины».

1. АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ

1.1 Обзор предметной области

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

Организация «Печи Вологодчины» занимается производством, установкой, отделкой, облицовкой печных и каминных изделий. Команда профессионалов предлагает свои услуги от проектирования, чертежей и выбора материала, до конечной установки. Так же предоставляются услуги по прочистке труб и дымоходов. Для дома и дачи возможен заказ барбекюшниц и грилей. Гильдия состоит из нескольких профессионалов своего дела, готовых предложить самые горячие новинки и неординарные решения, учитывая любые желания заказчика. Основная масса мастеров располагается в городах Вологда и Череповец, поэтому спектр из возможностей распространяется почти на всю Вологодскую область. В связи с разбросом гильдии на довольно большой территории, и отсутствия сосредоточенности информации в одном месте, заказчику понадобился сайт.

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

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

1.2 Выбор типа сайта

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

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

Сайт-галерея несет в себе визуально восприимчивую информацию. То есть подразумевается, что заказчик листая фото-галерею, выбирает понравившийся товар и покупает его, при визуальной оценке. Для организации «Печи Вологодчины» данный тип сайта не подойдет, так как заказчику требуется более информативно наполненный веб-ресурс. Но некоторые детали от сайта-галереи все-таки будут полезны при разработке галереи работ мастеров.

Интернет-магазин - это современный торговый канал, дающий возможность реализовывать товары через Интернет. Как по части презентационных возможностей, так и в том, что касается удобства работы с товарным ассортиментом - Интернет-магазин является полнофункциональным магазином, с той лишь разницей, что его "витрина" расположена в Интернете. Сайт-магазин обычно имеет достаточно большой объем (несколько десятков страниц) и сложную структуру. Как правило, на нём представлен каталог товаров с их подробным описанием, условиями поставки и ценами. От прочих сайтов, сайт интернет-магазин главным образом отличается программными модулями, позволяющими автоматизировать процесс купли-продажи через Интернет. Дизайн сайта-магазина может быть весьма разнообразным и изменяться в очень широком диапазоне - от весьма сдержанного до изысканного и утончённого[2].

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

Сайт-визитка - отличный старт для начала любой коммерческой деятельности. Назначение этой разновидности сайтов достаточно полно выражено в самом названии. Сайт-визитка - это электронный аналог традиционной бумажной визитки. Структура сайта-визитки проста и понятна - традиционно такой сайт состоит из небольшого количества страниц (не более 5) и не содержит многоуровневые меню. Графический дизайн сайта-визитки может изменяться в очень широком диапазоне - от самого простого и незамысловатого, до весьма сложного, эксклюзивного, включающего в себя анимационные элементы, флэш, авторскую графику, редко используемые шрифты[2].

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

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

1.3 Аналоги

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

На данный момент в г. Вологда существуют такие аналоги:

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

Рисунок 1.1- Скриншот сайта «Печи Люкс»

«Жар да Пар»- организация, занимающаяся продажей електро- отопительных элементов. Сайт отличается своим минимализмом, что подкупает пользователя на дальнейший просмотр. Цветовая гамма ненавящивая, навигация проста и удобна, реклама расположена удачно, она не мешает просмотру сайта, в тоже время на нее нельзя не обратить внимание. Кнопки имеют удобный размер. Так же плюсом является такой раздел, как полезные статьи, что предоставит пользователю компетентность в некоторых вопросах. Скриншот веб-сайта представлен на рисунке 1.2.



Рисунок 1.2- Скриншот сайта «Жар да Пар»

«Этна»- является интернет-магазином, занимающимся продажей печей, каминов. Структура сайта очень лаконична, но в тоже время информативна. Удачная цветовая гамма, небольшое количество кнопок, навигация очень проста. Содержатся документы для скачивания, такие как «Инструкция по монтажу и эксплуатация печей», «Декларация печи». На рисунке 1.3 представлен скриншот веб-сайта «Этна».

Рисунок 1.3- Скриншот веб-сайта «Этна»

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

1.4 Определение требований и постановка задач

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

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

1) Анализ требований заказчика;

2) Изучение предметной области, анализ возможных реализаций;

3) Разработка структуры сайта. Согласование ее с заказчиком;

4) Разработка дизайна сайта. С пожеланий заказчика;

5) Разработка веб-сайта;

6) Тестирование;

7) Внедрение;

Обязательным для успешного выполнения ВКР является реализация всех требований заказчика. Основные требования заказчика представлены ниже.

1) Информация должна быть доступной, понятной для пользователя;

2) Сайт должен отличаться простой, но в тоже время быть максимально информативным;

3) Навигация должна быть доступной для любой аудитории (от новичка до уверенного пользователя ПК);

4) Концепция должна быть ненавязчива, то есть не пестрить рекламой. Сайт должен не навязывать, а заинтересовать и информировать пользователя;

5) Контактная информация должна быть заметна, ведь это ключ к взаимодействию гильдии и заказчика;

6) Интерфейс должен удовлетворять заказчика визуально, а информация в «шаговой» доступности;

7) Обязательное наличие фирменного логотипа гильдии;

8) Сайт должен удовлетворять не только потенциального клиента, но и члена гильдии, быть полезным и для него;

Выполнение вышеизложенных требований обеспечит достижение цели ВКР, а так же удовлетворит заказчика, что является немаловажным фактором для разработчика.

1.5 Видение продукта

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

1.Краткое описание сути будущего продукта.

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

2.Для каких целей он создается.

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

3.Критические атрибуты программного продукта.

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

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

Срок запуска продукта до конца июля 2018года. Бюджет 5 тысяч руб.

4. Возможности продукта для клиента и администратора

Возможности продукта для клиента:

1) Выбор нужного профессионала по подходящим параметрам;

2) Возможность рассмотреть все предоставляемые услуги и работы мастеров;

3) Предоставление связи с заказчиком;

Возможности продукта для администратора:

1) Настройка аккаунта хостинга;

2) Настройка базы данных для системы управления контентом сайта (CMS);

3) Установка и настройка CMS;

4) Смена дизайна сайта;

5) Слежение за работой сервера (отсутствие ошибок);

5. Органичения

Минимальные системные требования: cайт может работать на операционных системах Windows, Linux, Unix, OS/X. Для работы сайта на сервере должен быть установлен интерпретатор языка PHP, а так же MySQL для управления базой данных. Для установки и настройки сайта на сервере понадобится покупка услуг хостинга и регистрация в сети: имя базы данных MySQL, имя пользователя и пароль, имя хоста для базы данных.

Возможность выхода в сеть Internet, наличие интернет-браузера на ПК пользователя.

6. Показатели качества

1) Сайт должен обладать достаточной информативностью об услугах и тех кто их предоставляет(запаздывание информации не более 1 минуты от момента обновления/поступления);

2) Среднее время выхода на связь мастера не более суток;

3) Быть достаточно функциональным (легко ли было пользователю выполнять и завершать реальные задачи или эти пути заходили в тупики?), быть визуально привлекательным (красиво оформленным, без перегруженности), быть целенаправленным и понятным;

7. Приоритеты.

1) Информативность;

2) Функциональность;

3) Целенаправленность;

4) Доступность;



2. РАЗРАБОТКА СТРУКТУРЫ САЙТА

2.1 Структура веб-сайтов

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

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

Структура подразделяется на два вида:

1) внешнюю;

2) внутреннюю;

Внешней структурой можно обозначить схему расположения основных блоков на сайте. Внутренняя структура показывает «карту» сайта, ее используют как наглядное изображение связи страниц и разделов между собой при помощи гиперссылок. Используя ее, можно представить, что и где находится. С главной страницы можно перейти на любой основной раздел. Так же существуют линейная, сетевая и иерархическая структуры. Линейная структура сайта позволяет пользователю двигаться по страницам последовательно. Такой тип структур хорошо подходит для описания шагов какого-либо процесса или для последовательного изложения информации. Обычно на каждой странице есть ссылки на следующую и предыдущую, и весь серфинг по сайту сводится к перемещению вперед и назад. Линейная структура (рисунок 2.1):



Рисунок 2.1- Линейная структура

Сетевая структура напоминает паутину. Пользователи могут перемещаться по страницам как угодно, без какого бы то ни было строгого порядка. При такой планировке на каждой странице содержатся ссылки на остальные, и пользователи свободно перемещаются из раздела в раздел. Сетевая структура (рисунок 2.2):

Рисунок 2.2- Сетевая структура

Иерархическая структура напоминает пирамиду. На верхушке находится главная страница, а на ней - ссылки на страницы, находящиеся ниже. Её удобно использовать, если на верхней странице вы хотите привести краткие сведения о каждом разделе, а на нижних - подробное описание. Иерархическая структура (рисунок 2.3):



Рисунок 2.3- Иерархическая структура

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

2.2 Структура веб-страниц

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

Веб-страницы представляют собой файлы, которые создаются с использованием языка HTML (Hyper Text Markup Language -язык гипертекстовой разметки документов) и имеют одноименный формат - HTML. Документ формата HTML может содержать помимо текста, графики и ссылок еще и мультимедийные объекты: анимацию, видео, звук, то есть он строится на основе технологии гипермедиа.Набор веб-страниц, являющихся собственностью какой-либо компании или частного лица, называют веб-сайтом или просто сайтом. Как правило, все страницы сайта тесно связаны между собой общей темой. Отправной точкой любого сайта является главная или, как говорят, домашняя страница сайта. В большинстве случаев она содержит ссылки на другие страницы. Как правило, все другие страницы сайта содержат кнопки, позволяющие вернуться на домашнюю страницу сайта. Любая страница имеет следующую структуру:

1. Верхняя часть страницы - header. Как правило располагается сверху ("шапка" сайта) и включает в себя логотип, лозунг сайта, верхнее горизонтальное меню и левое меню (если они есть в дизайне). Может включать в себя динамическую информацию, например: цепочку навигации . Формируется на основе шаблона дизайна сайта.

2. Основная рабочая область - work area. В ней размещаются собственно информационные материалы сайта. В качестве основной рабочей области может подключаться как физический файл, так и создаваемый системой на основе комплексных компонентов динамический код.Если в качестве основной рабочей области подключается физический файл, то такая страница называется статической. Если подключается динамический код, то такая страница называется динамической.

3.Нижняя - footer. Как правило, расположена внизу ("подвал сайта") и включает в себя контактную информацию, сведения об авторе и владельце сайта и так далее, нижнее горизонтальное меню и правое меню (если они есть в дизайне). Может включать в себя динамическую информацию, например: форму подписки на рассылки. Формируется на основе шаблона дизайна сайта[2].

Эти три части могут занимать разную площадь, иметь разную форму. Неизменно одно: их порядок.

На рисунке 2.4 изображена структура веб-страницы.



Рисунок 2.4- Структура веб-страницы

2.3 Структура веб-сайта «Печи Вологодчины»

2.3.1 Структура сайта

В ходе рассмотрения структур веб-сайтов было выявлено, что для сайта «Печи Вологодчины» подходит иерархическая структура. Основной страницей сайта является главная, на ней и будут располагаться ссылки на последующие страницы. Для клиента и заказчика эта структура наиболее оптимальна и удобна, она удовлетворяет требованиям заказчика и упростит задачу потенциальным клиентам. Так же этот тип структуры наиболее подходит для функционала сайта и деятельности организации. Поэтому был выбран иерархический тип структуры веб-сайта. Структурная схема веб- сайта для организации «Печи Вологодчины» расположена в Приложении 1.

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

2.3.2 Структура веб-страницы

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

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



3. РАЗРАБОТКА ДИЗАЙНА САЙТА

3.1 Анализ разработки дизайна сайта

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

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

1.Визуальное оформление.

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

2.Эксклюзивность и оригинальность сайта.

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

3.Соответствие сайта техническим требованиям.

Страницы сайта должны быстро загружаться, и иметь приличный вид даже при отключенных рисунках. Кроме того, сайт должен быть совместим с наиболее популярными браузерами (Internet Explorer, Opera, Mozilla Firefox, Google Chrome). Определившись с дизайном, заказчик должен предоставить дизайнеру чёткое техническое задание для создания сайта , в котором указаны его пожелания по стилю и цветовой гамме, примеры удачных с точки зрения заказчика работ. Результатом работы дизайнера является так называемый макет, в который затем можно вносить изменения по ходу выполнения проекта[2].

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

3.2 Разработка дизайна веб-сайта для организации « Печи Вологодчины»

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

Отталкиваясь от специализации сайта, а это информативный сайт с предоставлением услуг, дизайн не должен быть перегружен. То есть, опираясь на пункт 1. главы 3.1 дизайн должен балансировать между красочностью и функциональностью сайта. Таким образом, вся текстовая информация размещена в пункты меню, а основная информация о деятельности организации размещена на главной странице. С таким расположением текстовой информации пользователь не будет перегружен большим количеством текста, только посетив сайт. Наоборот, такое размещение текстовой информации дает пользователю вначале поверхностно изучить направление и деятельность организации, и затем, узнать более подробно, о той информации, с которой пользователю необходимо ознакомиться лучше. Такое расположение текстовой информации дает пользователю выбор, который он делает при посещении сайта, то есть, либо покинуть сайт, ознакомившись с краткой информацией об организации и ее услугах, убедившись, что данный сайт не то, что он искал, не потратив свое время, либо заинтересовавшись и убедившись, что данный сайт это то, что ему нужно, следовать дальше по ссылкам и выбирать ту информацию для прочтения, которая его интересует. Благодаря такому размещению текстовой информации, пользователя не утомит посещение сайта, а наоборот подогреет интерес на изучение других статей, если пользователь является целевой аудиторией сайта. Так же оформление статей в приятной цветовой гамме, и использование шрифта Times New Roman, не напрягает зрение, что предполагает более подробное изучение статей, и намного большее время проведения пользователя на сайте организации.

Весь сайт выполнен в одной цветовой гамме, что предотвращает цветовую перенасыщенность. Основное производство гильдии занимают печи и камины. Обычно с такими изделиями ассоциируются теплые цвета, такие как: желтый, коричневый, его светлые и темные оттенки, оранжевый, красный. В цветовой гамме сайта преобладают различные оттенки коричневого, это прекрасно сочетается с продукцией организации. С текстом удачно комбинируют светлые тона, поэтому выбор остановился на стандартном белом. То есть цветовая гамма удачно комбинирует с информацией сайта. Это предотвращает визуальную перегрузку, а сам сайт выглядит гармонично.

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



Рисунок 3.1-Дизайн-макет главной страницы сайта.

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

Рисунок 3.2- Дизайн макет статьи



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

Рисунок 3.3- Дизайн-макет галереи

На остальных страничках информация размещена достаточно просто и понятно для пользователя.

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



3.2.1 Разработка логотипа веб-сайта в программе Adobe Photoshop CC 2015

Основная идея логотипа веб-сайта «Печи Вологодчины»- это донесение информации до пользователя о названии организации и основных контактных данных. Так как логотип это практически первое, что бросается в глаза посетителю сайта, то дизайн должен удовлетворить его восприятие. Логотип должен собрать первое впечатление о сайте. Важно, чтобы он не был перегружен информацией, лаконично смотрелся в структуре сайта, и сочетался с цветовой гаммой интернет продукта. Логотип веб-сайта представлен на рисунке 3.4.

Рисунок 3.4- Логотип веб-сайта

Логотип создан в программе Adobe Photoshop CC 2015. Размер логотипа определялся исходя из структуры веб-страницы, поэтому высота логотипа 300, а ширина 1000 пикселей. Такой размер оптимально подходит для размещения названия организации и другой информации. Для названия и контактных данных использован шрифт Segoe Print Bold в коричневой цветовой гамме. Данный шрифт не многим отличается от стандартных, но в тоже время имеет отличительную округлость букв. Данный шрифт сочетает в себе и официальность, и приятное исполнение. Поэтому выбор остановился именно на Segoe Print Bold. Для фона логотипа была использована такая функция программы, как градиент. Он был выполнен в цветовой гамме сайта слева направо. Такая подача удачно выглядит в составе сайта. Деятельность гильдии направлена на производство продукции, имеющей дело непосредственно с огнем. Поэтому справа от названия организации расположен огонек, состоящий из трех элементов. Они также подчеркивают основные цвета сайта, а само изображение выгодно отображает с чем связана деятельность гильдии.

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

3.2.2 Отцифровка логотипа организации «Печи Вологодчины» в программе Adobe Photoshop CC 2015

Заказчик представил логотип организации в виде набросков на бумажном носителе, поэтому потребовалась отцифровка логотипа.

Для того чтобы отцифровать изображение использовалась программа Adobe Photoshop CC 2015. Фотографию наброска следовало перенести на компьютер и открыть в используемой программе. Далее идет визуальная оценка, на составляющие элементы логотипа. В данном случае логотип разбился на следующие части: обрамление, оно имеет форму французского герба, инструменты печника, находящиеся внизу изображения, печное изделие, в центральной части логотипа, печника, стоящего справа на печи, с профессиональными инструментами, и надпись «Вологодская гильдия печников, трубочистов», находящаяся над печью и под ней. Далее следует перенести каждый элемент на отдельный слой, для удобного редактирования каждого из них по отдельности. Для удобного разделения элементов на слои были использованы инструменты: «Лассо», «Прямолинейное лассо», «Магнитное лассо». Затем редактируется каждый слой, при этом визуально представляя общую картинку логотипа. Вначале редактируется обрамление и фон внутри него. Цветовая гамма была выбрана в соответствии с основными цветами сайта. Затем редактировался элемент «инструменты печника»,он был залит равномерным цветом, а так же обведен вручную с помощью графического планшета, для более красочного представления. Следующий слой: печник. Он так же был обведен вручную, а некоторые элементы отрисованы заново, опираясь на наброски. При работе на графическом планшете разработчик старался наиболее точно передать изображение, и обработать набросок в соответствии с оригиналом, учитывая все мелкие и значительные детали. Далее обрабатывалась печь, теперь она представлена в общей цветовой гамме, а так же выделена соответствующими фигурами, чтобы добавить предмету геометрии. Затем был вставлен текст, с применением шрифта Segoe UI Bold размера 30. Шрифт имеет такой же цвет, что и обрамление. После обработки каждого слоя, все накладываются на общий и редактируются в соответствии с наброском и общей концепцией логотипа. После проделанной работы изображение предоставляется заказчику, чтобы удовлетворить его требования. Отцифрованный логотип удовлетворил требования заказчика и располагается на рисунке 3.5.

Рисунок 3.5-Логотип организации



4. ВЫБОР СРЕДСТВ РАЗРАБОТКИ

4.1 Обзор средств разработки

Разработка веб-сайта для организации «Печи Вологодчины» будет производиться на CMS платформе. Для того чтобы выбрать подходящую, необходимо проанализировать некоторые варианты, а именно такие CMS как: Wix, Tilda, Joomla[4].

4.1.1 Wix

Wix.com -- международная облачная платформа, написанная на Ruby on Rails, для создания и развития интернет-проектов, которая позволяет конструировать сайты и их мобильные версии на HTML5 c помощью инструментов drag-and-drop.

Функциональность. Wix.ru предоставляет сотни настраиваемых шаблонов веб-сайта и HTML5-редактор, работающий по принципу drag-and-drop, который включает в себя приложения, графику, галереи изображений, видео, шрифты и многое другое. Шаблоны настраиваются: добавляются новые функции и медиа, меняются стиль, цвета, тексты, фоновые изображения, кнопки и др. Кроме того, пользователи имеют возможность создать свои веб-сайты с нуля.

Основные возможности:

1) сотни бесплатных шаблонов;

2) бесплатный хостинг;

3) поисковая оптимизация;

4) подключение собственного домена;

5) оптимизация для мобильных устройств;

6) добавление внешнего HTML-кода;

7) защита страниц;

8) модули блога, интернет-магазина, списка, галереи изображений, видео и аудио;

9) постинг в соцсетях; блоки статистики; вставка сайтов;

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

1) Большое сообщество пользователей -- можно найти ответы на любые вопросы;

2) 500+ шаблонов;

3) Поддержка русского языка;

Недостатки:

1) автоматизированная служба поддержки (зачастую, на вопросы отвечает бот по ключевым словам, а не человек);

2) отсутствие представительства Wix в России;

3) любые претензии клиентов из России компания Wix предлагает направлять в офис в Нью-Йорке;

4) нет возможности подключить российские платежные системы, в связи с отсутствием представительства в России;

4.1.2 Tilda Publishing

Tilda Publishing - это конструктор небольших сайтов для бизнеса и медиа, построенный на визуальном редакторе.

Возможности:

1) конструктор сайтов;

2) набор готовых блоков;

3) шаблоны дизайна страниц;

4) адаптивность под мобильные устройства;

5) возможность внедрить методы оплаты;

6) возможность подключить свой домен;

7) хостинг сайта -- хранение его на серверах Тильды;

8) поддержка, инструкции, примеры;

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

1) Все в одном: платформа, домен, хостинг;

2) Первоклассный дизайн шаблонов и административного интерфейса;

3) Отзывчивая служба поддержка;

Недостатки:

1) Узкая направленность на англоязычный рынок во всем: способы приема оплаты, возможные интеграции, шрифты в оформлении сайта, язык интерфейса;

2) В тариф включен только один сайт. Стоимость выше конкурентов;

4.1.3 Joomla

Joomla! -- система управления содержимым (CMS), написанная на языках PHP и JavaScript, использующая в качестве хранилища базы данных СУБД MySQL или другие стандартные промышленные реляционные СУБД. Является свободным программным обеспечением, распространяемым под лицензией GNU GPL.[3]

Основные возможности:

1) Функциональность можно увеличивать с помощью дополнительных расширений (компонентов, модулей и плагинов);

2) Имеется модуль безопасности для многоуровневой аутентификации пользователей и администраторов (используется собственный алгоритм аутентификации и «ведения» сессий);

3) Система шаблонов позволяет легко изменять внешний вид сайта: расположение модулей, шрифты и другое;

4) К преимуществам системы можно отнести то, что все компоненты, модули, плагины и шаблоны можно написать самому, разместить их в структурированном каталоге расширений или отредактировать существующее расширение по своему усмотрению;

5) Для каждой динамической страницы можно создать своё описание и ключевые слова в целях повышения рейтинга в поисковых системах;

6) Начало и окончание публикации любых материалов можно запрограммировать по календарю;

7) Возможность ограничить доступ к определённым разделам сайта только для зарегистрированных пользователей;

8) Возможность создания не одной, а нескольких форм обратной связи для каждого контакта;

9) Модуль приёма от удалённых авторов новостей, статей и ссылок;

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

1) Бесплатность;

2) Безопасность;

3) Широкие возможности;

4) Большое количество расширений;

5) Большое количество форумов поддержки;

Недостатки:

1) SEO-ограниченность;

2) Появление дублей при редактировании URL материала;

3) Сложность в изучении;

4.2 Выбор CMS для разработки веб-сайта

Проанализировав возможности, преимущества и недостатки нескольких платформ для создания веб-сайтов, была выбрана CMS Joomla. Данная платформа имеет наиболее подходящий ряд преимуществ и возможностей для разработки веб-сайта для организации «Печи Вологодчины». Во-первых, неоспоримое преимущество Joomla бесплатность. То есть, многофункциональная и безопасная система распространяется абсолютно бесплатно. Это преимущество довольно значительно при выполнении ВКР, так как разработчик не является профессионалом, с официальным оплачиваемым заказом. Во-вторых, это безопасность. Разработчики Joomla регулярно выпускают обновления своей CMS. Все они нацелены на устранение «дыр», которые могут быть использованы для взлома. Дополнительно всегда можно установить несколько плагинов для обеспечения безопасности. В-третьих, возможности, Joomla предоставляет расширенный функционал, который позволяет создавать сайты разной степени сложности от одностраничного, до социальной сети. Четвертым плюсом следует выделить большой выбор дополнений, расширяющих возможности сайта, которые в свою очередь делятся на 3 вида: плагины, модули и компоненты. Также большинство расширений предоставляется бесплатно. Следует отметить, что CMS Joomla имеет большое количество форумов поддержки. Любой веб-мастер время от времени сталкивается со сложностями в работе своего сайта. Иногда решить задачу самостоятельно не представляется возможным из-за нехватки знаний или навыков. Работая с CMS Joomla, всегда можно найти решение своей проблемы на одном из форумов поддержки.

4.3 Установка CMS Joomla

Для того, чтобы установить CMS Joomla, сначала необходимо установить локальный веб-сервер денвер на компьютер, и после этого ставить на него php-скрипт Joomla. Скачать локальный сервер денвер можно с официального сайта. Ставится денвер как обычная программа для ОС Windows. После завершения установки, на рабочем столе появится три ярлыка от программы, и при запуске денвера, в "моем компьютере" появится виртуальный диск денвера. Далее требуется скачать дистрибутив Joomla. Сам процесс установки достаточно прост, его можно разделить на 7пунктов[7].

1. Требуется зайти на виртуальный диск. Ему присвоено имя Z.

2.Далее следует перейти в папку «home» и создать там папку, в которой будет располагаться будущий сайт.

3. Переходим в созданную папку, в данном случае это папка «test1.ru» и создаем в ней папку «www», именно в нее и надо будет распаковать только что скачанный архив Joomla 3.

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

5. На данном этапе конфигурируем базу данных, почти все поля уже заполнены автоматически.

6.Осталось проверить указанные данные, на данном этапе вводить или выбирать ничего не нужно. Смотрим, что получилось и если все устраивает, нажать кнопку «Установить».

7.На этом процесс установки Joomla на локальный компьютер завершен, осталось удалить директорию установки, для этого нужно нажать на соответствующую кнопку, после чего можно перейти на только что установленный сайт или в админку сайта.

Процесс установки CMS Joomla успешно завершен.

4.4 Изучение интерфейса CMS Joomla

На начальном этапе все действия связаны с административной частью сайта или другими словами с панелью управления. Именно на данной странице происходит создание сайта. Чтобы на нее попасть в адресной строке следует ввести название сайта, слеш, administrator. Выглядит это таким образом, http://test1.ru/administrator. Далее следует ввести логин и пароль для администратора, после этого открывается панель управления. Вверху страницы отображается меню, которое содержит в себе кнопки:

1. Система, с ее помощью можно попасть на страницу общих настроек CMS, управления кэшем и получить информацию о системе.

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

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

4. Материалы, с его помощью можно попасть на страницы создания и редактирования материалов, создания категорий и т.д. Именно материалы (другими словами статьи) являются основной составляющей любого сайта.

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

6. Расширения, доступ, к которому осуществляется при помощи одноименного меню, позволяет производить манипуляции со всеми расширениями Joomla 3, будь то модули, плагины, шаблоны или компоненты,

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

Меню панели управления изображено на рисунке 4.1.



Рисунок 4.1 - Меню панели управления

В правом верхнем углу расположен переход на сайт и учетная запись. Рисунок 4.2.

Рисунок 4.2-Переход на сайт

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

Рисунок 4.3- Левое меню

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

Рисунок 4.5- Панель управления



5. РАЗРАБОТКА ВЕБ-САЙТА ДЛЯ ОРГАНИЗАЦИИ «ПЕЧИ ВОЛОГОДЧИНЫ»

5.1 Выбор шаблона для веб-сайта

Для разработки веб-сайт был выбран шаблон «Protostar». Данный шаблон стандартный и используется по умолчанию. Его преимущество в том, что встроенные шаблоны создают сами разработчики, что предотвращает вероятность присутствия багов. В свою очередь это скажется на функциональности сайта. Поэтому для создания сайта-визитки исоьзован шаблон «Protostar», который изображен на рисунке 5.1.

Рисунок 5.1- Шаблон «Protostar»

5.2 Создание категорий сайта

Категории в Joomla это своего рода разделы сайта, каждому разделу должна соответствовать своя категория. Категории могут быть первого уровня (основные), а могут быть и вложенными (подкатегории). Чтобы создать категорию в верхнем меню из «Материалы» переходим в раздел «Менеджер категорий» и далее создаем категорию (рисунок 5.2).

Рисунок 5.2- Создание категории

Далее категории следует дать имя, алиас задается автоматически. Рисунок 5.3.

Рисунок 5.3- Заполнение категории

Исходя из структурной схемы сайта, список категорий выглядит таким образом. Рисунок 5.4.



Рисунок 5.4- Список категорий

5.3 Разработка пунктов меню

Опираясь на главу 5.2, создаем пункты меню. Меню создается по аналогии с категориями, из «Меню» необходимо перейти в «Менеджер меню» далее «Создать меню». Создание меню изображено на рисунке 5.5.

Рисунок 5.5- Создание меню

Далее создаем меню в соответствии с названиями категорий, необходимо помнить о том, что некоторые пункты являются родительскими, а некоторые унаследованными, это следует отметить при создании каждого пункта. Такие манипуляции позволяют разработать выпадающий список. Унаследованные пункты обозначаются горизонтальной линией. Рисунок 5.6.

Рисунок 5.6- Создание пунктов меню

На сайте меню выглядит таким образом ( рисунок 5.7).

Рисунок 5.7- Меню сайта

Для того чтобы пункты меню располагались на сайте горизонтально необходимо зайти в раздел модули, затем выбираем вкладку «Дополнительные параметры» и вводим в строку «суффикс класса меню» следующее - « nav-pills» с обязательным пробелом перед введением слов nav-pills. Сохраняем внесённые изменения. На рисунке 5.8 изображено создание горизонтального меню.

Рисунок 5.8- Создание горизонтального меню

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

Рисунок 5.9- Редактирование пунктов меню

Отредактированные подпункты меню изображены на рисунке 5.10.



Рисунок 5.10- Редактирование подпунктов меню

5.4 Создание материалов

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

Рисунок 5.11- Создание материала

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



Рисунок 5.12- Заполнение материала

5.5 Модуль заднего фона

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

Рисунок 5.13- Модуль заднего фона

После установки модуля сайт выглядит так (рисунок 5.14):



Рисунок 5.14- Фон сайта

5.6 Разработка галереи

Для создании галереи используется плагин, который позволяет сформировать каталоги. Такое исполнение галереи дает возможность распределить работы мастеров по каталогам, что позволит заказчику, просматривая изображения, знать кто их выполнил. Использованный плагин галереи изображен на рисунке 5.15.

Рисунок 5.15- Плагин галереи

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



Рисунок 5.16- Создание каталога

Заполнение галереи каталогами происходит в материале галерея. Для этого необходимо прописать строку {gallery}/название каталога/{/gallery}, ниже следует указать ФИО мастера, которому принадлежат работы. Перенос каталога в галерею изображено на рисунке 5.17.

Рисунок 5.17- Перенос каталога в галерею

...