Разработка информационного сайта межрегионального центра охраны труда малых и средних предприятий

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

Совместно с заказчиком была составлена карта сайта (рис.2.1).

Рис.2.1 - Карта сайта

Этап 2 - дизайн.

Дизайн-концепция страниц сайта производиться по следующим этапам:

Разработка макета.

Презентация заказчику.

Формирование листа замечаний, реализация замечаний

Утверждение макета.

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

Макет дизайн рисовался в программе Adobe Photoshop. Прежде, чем переходить к дизайну, необходимо сделать прототип. Вместе с заказчиком мы нарисовали схему прототипа от руки на листе А4. Утвержденный дизайн-макет главной страницы можно посмотреть в приложении А.

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

информационный веб сайт

Рис.2.2 - Пример дизайна «шапки». Вариант 1

Рис.2.3 - Пример дизайна «шапки». Вариант 2

Реализация проекта с учетом современных тенденций сайтостроения

После того, как основные этапы проектирования и дизайна веб-сайта были пройдены, происходит переход на новый этап, в котором производится реализация проекта.

Этап 3 - верстка.

1. Создание тестовой платформы.

2. Верстка главной страницы, типовой внутренней страницы.

3. Создание прототипа шаблонов.

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

Основное требование к верстке сайта - она должна предполагать одинаковое отображение страниц сайта в наиболее популярных браузерах, легкость при загрузке (качественная «нарезка» картинок и «легкий» код).

Так же возможно использование передовых веб-технологий, таких как: css3, html5 и т.д.

В конечном счете, шаблон сайта демонстрируется заказчику для утверждения.

Этап 4 - программирование.

1. Программирование необходимого функционального решения.

2. Выбор и регистрация хостинг-провайдера.

3. Установка на сайт CMS Wordpress.

4. Интегрирование кода в CMS Wordpress.

Для верстки я использую текстовый редактор Sublime text 3. Интерфейс редактора представлен на рисунке 2.4.

Рисунок 2.4 - Текстовый редактор Sublime text 3

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

Изначально было выяснено, что разрабатываемый ресурс должен поддерживаться на всех мобильных устройствах. Для этой цели я использую CSS фреймворк Bootstrap 3.

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

Далее предстоял выбор хостинг-провайдера. Исходя из прежнего опыта выбор пал на компанию «BeGet» (рис.2.5).

Рис.2.5 - Хостинг-провайдер «Beget»

Заказчик определил для себя доменный адрес o-trud.ru (рис.2.6).

Рис.2.6 - Домен o-trud.ru

Далее мы должны подключить CMS систему на наш сайт (рис.2.7). Через админ-панель нашего хостинга сделать это очень просто.

Рисунок 2.7 - Подключение CMS

Мы проходим все этапы регистрации. И на выходе получаем подключенную CMS-систему к нашему сайту o-trud.ru (рис.2.8).

Рис.2.8 - Установленная CMS-система Wordpress

Далее необходимо проверить работоспособность движка и основного функционала (рис.2.9).

Рис.2.9 - Wordpress на сайте

CMS Wordpress самостоятельно проверяет наличие базы данных, и при ее отсутствии, предлагает ее создать. На рис.2.10 изображена общая структура базы данных My SQL нашего сайта.

Рис.2.10 - Структура базы данных My SQL

Следующей задачей стоит интеграция верстки на Wordpress (рис.2.11). На данной CMS есть встроенный редактор кода, с помощью которого можно перенести код или внести необходимые корректировки. Важно на каждом этапе тестировать сайт и выявлять ошибки, так проще будет их устранить.

Рис.2.11 - Работа с редактором Wordpress

Следующим этапом мы создаем все необходимые страницы для нашего сайта по техническому заданию заказчика (рис.2.12).

Рис.2.12 - Создание страниц в CMS

После того, как были созданы все страницы необходимо создать структуру страниц. Для этого я сверстал необходимый шаблон и перенес его с помощью встроенного html-редактора (рис.2.13).

Рис.2.13 - Html-шаблон страниц

После создания структуры сайта нужно решать вопрос с оформлением. Естественно для этого мы используем язык CSS. Таблицу стилей мы так же переносим с помощью редактора на нашу CMS. На рисунках ниже представлена сама таблица стилей (рис.2.14) и этот же код, но уже в редакторе Wordpress (рис.2.15).

Рис.2.14 - Фрагмент кода таблицы стилей

Рис.2.15 - Фрагмент кода таблицы стилей в редакторе Wordpress

2.3 Разработка функционала с помощью jQuery - библиотеки JavaScript

Одним из главных требований заказчика была скорость работы сайта и удобство навигации для пользователя. С этой целью была подключена библиотека jQuery. Это библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX.

С помощью данной библиотеки был реализован функционал мгновенной прокрутки (рис.2.16).

Рис.2.16 -Кнопка прокрутки сайта

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

$(document).ready(function() {

$('.bxslider-carousel_logo').bxSlider();

$('a#section_navHeader').click(function(){

var elementClick = $(this).attr('href'),

top = $(elementClick).offset().top;

$('html,body').animate({ scrollTop: top }, 600);

return false;

});

function animate(elem){

var effect = elem.data("effect");

elem.addClass(effect);

}

$(window).scroll(function() {

$('.animated').each(function(){

var imagePos = $(this).offset().top;

var topOfWindow = $(window).scrollTop();

if (imagePos < topOfWindow+600) {

animate($(this));

}

});

});

$('.googleMaps_decoration').click(function(){

$(this).hide();

})

$('.scrollTop').click(function(){

$('html, body').animate({scrollTop:0}, 'fast');

})

$(window).scroll(function(){

if ($(this).scrollTop() <= 100) {

if($(".scrollTop").is(":animated")){

}

else{

$('.scrollTop').fadeOut('500');

}

}

else{

$('.scrollTop').fadeIn('500');

}

})

$('#fancybox_single').fancybox();

$('input.formHeader_input').click(function(){

$('span.wpcf7-not-valid-tip').hide();

})

});

$(document).ready(function() {

var toggles = document.querySelectorAll(".cmn-toggle-switch");

for (var i = toggles.length - 1; i >= 0; i--) {

var toggle = toggles[i];

toggleHandler(toggle);

};

function toggleHandler(toggle) {

toggle.addEventListener("click", function(e) {

e.preventDefault();

(this.classList.contains("active") === true) ? this.classList.remove("active"): this.classList.add("active");

});

}

$('.cmn-toggle-switch').click (function(){

$('.phone_menu').toggle();

});

});

2.4 Тестирование кросс-браузерности

Необходимо проверить верстку на наличие ошибок в различных браузерах. Выбрал самые популярные Google Chrome (рис.2.17), Mozilla (рис.2.18), Edge (рис.2.19).

Рис. 2.17 - Сайт в браузере Chrome

Рис. 2.18 - Сайт в браузере Mozilla

Рис. 2.19 - Сайт в браузере Edge

Следующим этапом разработки является подключение и настройка плагинов Wordpress, которые расширяют функционал сайта (рис.2.20). Исходя из технического задания, я составил список плагинов, которые мне необходимы:

Contact Form 7. Это плагин для создания контактных форм. С его помощью можно легко добавить на сайт форму обратной связи. Данное расширение очень популярно. Заявка с сайта может приходить прямо на почту или сообщением на мобильное устройство. Что касается самой настройки, то она достаточна проста. Необходимо в редакторе плагинов найти нужное расширение, добавить и подключить к конечному адресату сообщения.

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

Yoast SEO. Так как я оказываю полный спектр услуг по созданию и продвижению сайта, мне необходимо было позаботиться о СЕО продвижении. Данный плагин, отличный помощник в этом вопросе.

Рис.2.20 - Список подключенных плагинов

После проработки структуры, дизайна, функционала идет наполнение сайта контентом. Весь контент заказчик подготовил самостоятельно. Естественно в плане СЕО продвижения необходимы были корректировки текста и заголовков. Но с этой задачей я справился. Для успешного продвижения мною было проработано семантическое ядро для данной тематики. Для решения этой цели использую упрощенную версию программы KeyCollector (рис.2.21).

Рис.2.21 - Парсинг семантического ядра



3. Инструменты аналитики и продвижения

3.1 Список подключенных инструментов

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

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

Яндекс.Метрика. Возможность бесплатно установить на сайт счетчик, позволяющий измерять посещаемость сайта, анализировать поведение пользователей и эффективность рекламных кампаний. Описание предоставляемых отчетов.

Google Analytics. Этот счетчик позволяет оценивать рентабельность инвестиций, отслеживать Flash- и видеорекламу, а также распространение контента в приложениях и социальных сетях.

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

3.2 Мобильная версия

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

Рис.3.1 - Тестирование адаптивной верстки

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

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

Macbook -- 1280 x 800

iPad портрет -- 768 x 1024

iPad портрет -- 1024 x 768

Kindle портрет -- 600 x 1024

Kindle альбомная ориентация -- 1024 x 600

iPhone портрет -- 320 x 480

iPhone альбомная ориентация -- 480 x 320

Galaxy портрет -- 240 x 320

Galaxy альбомная ориентация -- 320 x 240

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

3.3 Инструменты продвижения

С заказчиком было заранее согласована стратегия продвижения сайта с использованием инструментов контекстной рекламы. В нашем случае мы выбрали сервис Яндекс.Директ. После запуска и проверки сайта я начал подготавливать материал для контекстной рекламы. Я изучил специфику оказываемых услуг, нашел точки соприкосновения организации со своими клиентами. Следующим шагом был сбор семантического ядра (рис.3.2). Клики в данной тематике дорогие, поэтому я решил тщательно проработать ядро поисковых запросов. Мне не нужен был объем трафика на сайт. Главной целью было привести целевых клиентов.

Рис.3.2 - Проработка семантического ядра

После работы с поисковыми запросами необходимо было написать и загрузить рекламные объявления в Яндекс.Директ (рис.3.3). На начальном этапе мы выбрали только поисковую рекламу с текстовыми объявлениями. Я использую группировку запросов 1 объявление = 1 ключ. Это работа трудоемкая, но я сразу получаю релевантные объявления, тем самым снижая цену клика.

Рис.3.3 - Загрузка объявлений в Яндекс.Директ

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

SEO продвижение.

Другое известное и популярное понятие - это поисковая оптимизация. Суть данного продвижения заключается в том, что нужно проработать контент на сайте, чтобы он максимально точно отвечал на запросы пользователей. Стоит отметить, что контент должен быть уникальным. Нельзя просто скопировать статью из другого сайта. Естественно есть сервисы, которые упрощают эту задачу. Но написание статей для сайта - это самый главный инструмент данного продвижения. По мере возможности на различных проектах я стараюсь привлекать к данной работе копирайтеров, которые быстро и точно смогут написать интересную статью для сайта. В ситуации с текущим проектом заказчик сам предоставил контент и отказался выделять денежные средства на дополнительные работы. Полученный контент я самостоятельно проработал, и мы получили неплохие показатели. Но для начала нужно было подготовить сайт для поисковых роботов Яндекса. Для этого я как раз использовал плагин Yoast SEO (рис.3.4).

Рис.3.4 - Настройка плагина Yoast SEO

Заголовок и мета-теги - это одни из самых важных параметров при оптимизации сайта.

Для продвижения веб-ресурса крайне важно включить ключевые слова в заголовок, который принято называть title, и в описание, которое принято называть description. Наш плагин хорошо справляется с этой задачей (рис.3.5).

Рис.3.5 - Оптимизация страниц плагином Yoast SEO

По истечении определенного времени можно сказать, что сайт показывает не плохие результаты в поисковой выдаче. По основным направлениям деятельности сайт входит в топ-10 в поисковой выдаче Яндекса (рис.3.6 и рис.3.7).

Рис.3.6 - Центр охраны труда

Рис.3.7 - Аудит охраны труда

Следующим этапом стоит провести аналитику рекламных компаний, поисковой выдачи. Главным инструментом аналитики для себя я считаю Google Analytics. Ниже на рисунке 3.8 представлена статистика и объем трафика посетителей за последний квартал.

Рис. 3.8 - Данные Google Analytics

Для данной тематики это хорошие статистические данные. В процессе ведения рекламных компаний мы с заказчиком постоянно вносили корректировки на основе анализа данных. Есть в данной нише и сезонность услуг, которую мы тоже учитываем. Мы также запустили рекламную компанию в Google Adwords. И на сегодняшний день данный канал является основным в привлечении трафика на сайт. На диаграмме представлены данные об объеме трафика и источниках (рис.3.9).

Рис. 3.9 - Источники трафика и каналы



3.4 Экономический эффект заказчика

По истечению трехмесячного сотрудничества могу подвести некоторые экономические итоги по согласованию заказчика.

Финансовые затраты на контекстную рекламу составили:

Яндекс.Директ = 186 000 рублей

Google Adwords = 90 000 рублей

Количество заявок = 319 обращений

Стоимость обращения составила 865,2 рублей

Количество успешных операций = 58 продаж

Средний чек составляет 23 400 рублей

Несложно посчитать оборот средств, привлеченных с помощью интернет маркетинга = 1 357 200 рублей. К сожалению, маржинальность бизнеса мне никто не озвучил.



Заключение

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

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

Наиболее популярными среди современных бесплатных CMS систем являются Joomla!, Drupal, Netcat и Wordpress. В ходе проведения анализа этих систем была выбрана лучшая система - CMS Wordpress.

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

В дипломной работе были описаны:

1) современные тенденции сайтостроения;

2) проанализированы популярные системы управления контентом и выделена CMS Wordpress, как самая удобная платформа для поставленных задач;

3) были пройдены все этапы проектирования и создания информационного сайта для компании «Межрегиональный центр охраны труда малых и средних предприятий» с учетом современных тенденций сайтостроения;

4) была представлена экономическая привлекательность реализованного проекта для клиента.

На данном этапе сайт имеет практическую ценность и успешно функционирует, решая поставленные задачи. Подробнее ознакомиться с сайтом можно по адресу http://o-trud.ru/.

Размещено на Allbest.ru

...