Допустить к защите Заведующий кафедрой д-р физ мат наук, доцент В. А. Исаев 2018 г. Выпускная квалификационная работа (бакалаврская работа) проектирование и создание web-сайта для бюро активного маркетинга

2.2.5 Этап 5 – закрытие проекта

Этап закрытия проекта состоит из следующих действий:

• 
  покупка домена;
  
• 
  обучение заказчика работе с CMS;
  
• 
  наполнение сайта контентом; - перенос сайта на сервер.
  

На завершающем этапе происходит тестирование и передача проекта заказчику, покупается один, или несколько доменов предварительно согласованных с заказчиком. В данном случае доменом является bamarketing.ru. Также проводится обучение заказчика (или доверенного лица) работе с системой управления контентом веб-сайта. Во втором случае определяется минимальная цена для наполнения страницы сайта исходя из количества контента, которая высчитывается из размера контента на одной странице.
Разработчик сайта загружает сайт на сервер и выполняет первоначальную настройку. Логины и пароли для управления сайтом и хостингом передаются клиенту лично, либо, в случае отсутствия возможности передать лично, передаются по электронной почте. На сайт выгружается контент, предоставленный клиентом или, если его нет, то заказчик или веб-студия обращается к другим специалистам, чаще всего фрилансера, для того, чтобы они написали весь необходимый контент [38].
Предпроектное исследование компании «Бюро активного маркетинга» показало, что компания нуждается в создании хорошего сайта-портфолию, с возможностью просмотра работ и наличием обратной связи с целью демонстрации широко спектра услуг, оказываемых компанией, особенно связанных с продвижением сайта в сети Интернет.
Именно благодаря наличию хорошего сайта-портфолио пользователь сможет сделать выбор в пользу этой компании и получить полный набор услуг по оптимизации и продвижению своего сайта без каких-либо последствий, о которых было сказано в этой главе.


3 Разработка, реализация и тестирование сайта «Бюро активного маркетинга»
На первом этапе разработки, в соответствии с поставленными задачами и брифом, составленным вместе с заказчиком, был произведен выбор подходящей для сайта структуры, которая будет достаточно простой, чтобы не перегружать сайт и не усложнять тем самым его использование, но в тоже время функциональной, чтобы можно было в случае чего расширить сайт без какого-либо вреда для логики и удобства его использования. В результате анализа брифа и была выбрана оптимальная структура для сайта (рисунок 3.1). Структура является древовидной и хоть и имеет всего лишь два уровня, но при этом обладает возможностью для расширения.

Рисунок 3.1 – Структура сайта «Бюро активного маркетинга»
Основной платформой для сайта стала CMS Wordpress версии 4.9.6.,
преимущества которой были описаны во второй главе. Основными программными средствами для реализации являлись HTML, CSS, PHP, MySQLи JavaScript [39]. Для разработки внешнего вида сайта использовалась программа Adobe Photoshop.
В ходе этапа создания дизайна сайта был создан дизайн разделов с условными, для этапа разработки, названиями: «Главная», «О нас», «Наши работы», «Услуги», «Контакты».
«Главная» страница (рисунок 3.2) является самым первым, стартовым разделом сайта, который должен встретить и заинтересовать посетителя, удерживая его внимание максимально возможное время. Данный раздел выглядит как типичная посадочная страница, но при этом неразрывно связана с остальным сайтом и содержит основную краткую информацию обо всех остальных разделах сайта с целью заинтересовать посетителя и побудить его перейти на другие страницы сайта.

Рисунок 3.2 – Часть главной страницы сайта «Бюро активного маркетинга»
В разделе «О нас» (рисунок 3.3) размещена краткая информация о компании и всех ее достижениях. Данный раздел тесно связан с разделом «Наши работы» при помощи контекстных ссылок, что в свою очередь поможет задержать пользователя, и позволит ему с большей доли вероятности посетить остальные разделы сайта.

Рисунок 3.3 – Часть главной страницы «О нас»
В разделе «Портфолио» в свою очередь располагается портфолио компании, которое позволит ознакомиться со всеми плодами и достижениями упорных трудов «Бюро активного маркетинга» (рисунок 3.4). Данный раздел содержит иллюстрированный список проектов компании с кратким описанием, при этом у каждого проекта будет своя, персональная страница, которая позволит посетителю сайта более подробно ознакомиться с результатом работы над проектом. Все работы отсортированы по виду услуг. Это поможет пользователю подобрать и определить для себя нужную услугу. Естественно, данный раздел будет неразрывно связан с разделом «Услуги» при помощи контекстных ссылок.
Раздел «Услуги» предоставит пользователю всю актуальную информацию об услугах, оказываемых агентством. У пользователя может возникнуть вопрос о цене оказываемых услуг. Из-за того, что каждому клиенту оказывается индивидуальный подход, цена подобных услуг достаточно сильно варьируется и зависит от множества факторов. Поэтому пользователю будет предложено окно с функцией обратной связи, которое позволит оперативно отправить запрос в «Бюро активного маркетинга».

Рисунок 3.4 – Часть страницы «Портфолио»
Завершающим разделом является страница «Контакты» (рисунок 3.5), содержащая информацию о местоположении фирмы с отображением на интерактивной карте, а также телефонные номера и e-mail адрес.
После завершения основных этапов проектирования и создания внешнего вида веб-сайта происходит переход на следующий этап – реализация проекта, а именно верстка сайта и программирование отдельных функциональных частей.
Реализация проекта прежде всего начинается с верстки страниц сайта.
В ходе этапа верстки был создан шаблон сайта. Шаблон состоит из множества файлов. Ключевыми из них являются такие файлы как «Главная» кнопками перехода в социальные сети, слайдер и меню.
На этапе программирования сайта была создана нижняя часть сайта, которая содержит в себе форму обратной связи и контактные данные, и типовая страница для отображения любого необходимого содержимого. При этом каждый блок, задействованный в шаблоне «Главной» страницы, имеет свой собственный PHP файл. Это сделано с целью упрощения дальнейшей эксплуатации сайта с точки зрения администрирования и более удобного редактирования кода сайта. Также данный способ позволяет избегать огромных файлов с большим количеством кода. Также функции для удобства редактирования тоже вынесены в отдельный PHP файл (рисунок – 3.6).

Рисунок 3.5 – Раздел «Контакты» сайта «Бюро активного маркетинга»

Рисунок 3.6 – Скриншот фрагмента кода из файла functions.php
Также в рамках этапа программирования автором был создан модуль формы обратной связи, позволяющий отправить сообщение администратору сайта (рисунок 3.7). Также на данном этапе был создан код постепенного увеличения чисел у счетчиков на «Главной» странице сайта.

Рисунок 3.7 – Форма обратной связи сайта «Бюро активного маркетинга»
Также дополнительно была создана версия сайта для мобильных устройств (рисунок 3.8). Основным отличием специальной версии сайта для мобильных устройств является увеличенная скорость загрузки, специальная верстка, а также отсутствие некоторых блоков, что в свою очередь позволяет увеличить удобство использования сайта на мобильных устройствах.
В ходе финального этапа разработки сайта – закрытия проекта, было куплено доменное имя bamarketing.ru, которое было предварительно
согласованно с заказчиком. После чего была произведена загрузка сайта на сервер и была выполнена первоначальная настройка. Было проведено обучение заказчика работе с CMS WordPress, а также произведено наполнение сайта содержимым, которое предоставил заказчик.
После переноса сайта на сервер производится регистрация сайта в поисковых системах, и проводится окончательное тестирование сайта.

Рисунок 3.8 – Специальная версия сайта для мобильных устройств
Тестирование, как заключительный этап разработки веб-сайта, играет жизненно важную роль в процессе создания веб-сайта. Результатом тестирования и оптимизации служит быстрая и отлаженная работа сайта.
После тестирования веб-сайта заказчику предоставляется долгожданный готовый проект без ошибок, с хорошей читабельностью, лёгкой воспринимаемостью, удобством и надежностью.