Разработка WEB-сайта учреждения (на примере НОУ автошкола «Фаворит — НН»). Часть 3

1  2  3

---

2.5. Проектирование веб-сайта

 

Как было уже упомянуто выше, для реализации веб-сайта была выбрана система управления содержимым WordPress 4.0 (см. раздел 2.3).

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

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

• Denwer — локальный веб-сервер, включающий в себя Apache, PHP, MySQL и другие программные компоненты.
• Дистрибутив WordPress0 — система управления содержимым
• Графический редактор для создания элементов оформления веб-страниц. Будем использовать бесплатный онлайн-редактор изображений Pixlr (http://apps.pixlr.com/editor/)

 

2.5.1. Конфигурирование локального хоста

 

Веб-сервер Denwer скачиваем с сайта Denwer.ru. Его инсталлятор представляет собой консольное Windows-приложение. Установка Denwer очень проста, нужно лишь ответить на несколько вопросов программы — путь установки, параметры запуска.

После того, как Denwer установлен, на рабочем столе Windows появляются три ярлыка (рис. 5):

Рис. 5. Ярлыки Denwer.

Для запуска веб-сервере выбираем «Start Denwer». Через некоторое время в системном трее появляется значок, свидетельствующий о том, что веб-сервер успешно запущен.

Для проверки работы веб-сервера запускаем браузер и вводим в адресной строке адрес http://localhost. При этом появилось окно приветствия, свидетельствующее о том, что программа установлена и запущена корректно (рис. 6).

Рис. 6. Успешный запуск Denwer

Осталось проверить, работает ли база данных MySQL. Для этого вводим в строке следующий адрес: http://localhost/Tools/phpMyAdmin/. В браузере отобразиласть страница оболочки PhpMyAdmin (рис. 7).

Рис. 7. Успешный запуск MySQL

Для подготовки к установке WordPress нужно создать пустую базу данных. Для нее используем название «wp» (рис. 8). Логин и пароль по умолчанию — root, пароль пустой. При переносе на хостинг эта информация будет изменена.

После завершения этого этапа установки на экране будет высвечено следующее сообщение (рис. 8).

Рис. 8. База данных создана.

Локальный хост готов к установке системы управления содержимым.

 

2.5.2 Установка WordPress 4.0

 

Дистрибутив WordPress 4.0 бесплатно скачиваем с веб-сайта www.mywordpress.ru — на нем можно найти локализованную русскую версию.

Дистрибутив WordPress 4.0 представляет собой zip-архив, который нужно распаковать в нужную папку веб-сервера Denwer. В данном случае — это Z:\home\localhost\www\wp.

После успешной распаковки архива запускаем установку. Для этоко в адресной строке вводим адрес http://localhost/wp.

Установка WordPress 4.0 включает в себя несколько этапов, на каждом из которых нужно ввести в текстовые поля нужные данные. Один из шагов представлен на рисунке 9:

Рис. 9. Установка WordPress 4.0

После успешной установки WordPress 4.0, заходим в панель управления сайтом (рис. 10). Нужно выполнить базовую настройку параметров веб-сайта.

Рис. 10. Панель управления WordPress.

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

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

Условимся, что разделы «Информация о фирме», «Услуги и цены», «Новости и мероприятия», «Контакты», «Сотрудничество» будут представлены в виде статичных страниц, а новости и объявления в виде записей.

Создание и редактирование страниц и записей в WordPress осуществляется при помощи визуального редактора (рис. 11).

Рис. 11. Визуальный редактор WordPress.

Визуальный редактор позволяет задавать свойства шрифта, выравнивать текст, вставлять в него мультимедийные объекты — изображения, видеоролики. Работа в визуальном редакторе системы управления содержимым WordPress 4.0 мало чем отличается от набора текста в Microsoft Word, за исключением того, что все эти операции выполняются в окне браузера.

Таким же образом были созданы все страницы Web-сайта.

По умолчанию на главной странице сайта на WordPress отображается лента новостей. Поскольку новостей пока немного, чтобы сайт не выглядел пустым, в качестве главной страницы назначим страницу «О фирме», а новости перенесем на страницу «Новости и события». Для этого заходим в панель управления сайтом, раздел «Настройки» — «Чтение» и задаем привязку разделов следующим образом (рис. 12).

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

Рис. 12. Привязка разделов

Рис. 13. Шапка веб-сайта

В правой части страниц веб-сайта были добавлены два виджета — «Поиск по сайту» и «Новости и события». В итоге веб-сайт принял вполне презентабельный вид (рис. 14).

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

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

Рис. 14. Главная страница веб-сайта

 

2.6 Оптимизация веб-сайта

 

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

На этапе оптимизации веб-сайта были выполнены следующие операции:

 

2.6.1. Оптимизация навигационного меню

 

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

Для сортировки меню используется раздел «Страницы», функция «Быстрое редактирование». В числе прочего она позволяет принудительно указать порядок сортировки пунктов меню в виде чисел (рис. 15)

Рис. 15. Изменение порядка пунктов меню

После упорядочивания меню стало выглядеть следующим образом (рис. 16):

Рис. 16. Изменение порядка пунктов меню

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

 

2.6.2. Установка плагина All-In-One-SEO-Pack

 

Плагин All-In-One-SEO-Pack предназначен для облегчения поискового продвижения веб-сайта. Он будет использован для оптимизации заголовков и создания уникальных описаний страниц для отображения в выдаче поисковых систем.

Установка плагина осуществлялась вручную через раздел панели управления «Плагины».

Сборка плагина была скачана с сайта mywordpress.ru в виде ZIP-архива. При установке плагина был указан путь к скаченному файлу на локальном компьютере.

Плагин All-In-One-SEO-Pack был успешно установлен и в панели управления появился новый раздел — «Инструменты SEO» (рис. 17)

Рис. 17. Страница «Инструменты SEO»

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

Для главной страницы были прописаны следующие поля (рис. 18):

Рис.18. Настройки главной страницы

После установки плагина All-In-One-SEO-Pack в разделе «Редактирование страницы» появился новый блок, позволяющий выполнить отдельную настройку заголовков и описаний для каждой отдельно взятой страницы веб-сайта.

Помимо самих полей текстового ввода в данном блоке отображается примерный вид ссылки на страницу из поисковой системы (рис. 19):

Рис. 19. Предварительный просмотр страницы

Та же самая операция была проведена для всех остальных страниц веб-сайта. При подборе ключевых фраз использовался инструмент «Статистика поисковых запросов» — http://wordstat.yandex.ru (рис. 20).

Рис. 20. Статистика запросов Яндекса по фразе «автошкола Нижний Новгород»

 

2.7. Тестирование веб-сайта

 

Тестирование — это завершающий этап работы над веб-сайтом. Основной целью тестирования веб-сайта является проверка корректности его работы в различных браузерах и на различных мобильных устройствах (при помощи эмулятора ipadpeek.com).

Веб-сайт был протестирован в браузерах Internet Explorer 9, Opera 30.0, Google Chrome 42. Во всех браузерах сайт отображается идентично.

Отключение отображения картинок на странице для экономии трафика и ускорения загрузки страниц в свое время было очень популярным, поскольку Интернет был медленным и дорогим. Сейчас этот прием используется редко, тем не менее, проверим, как веб-сайт будет отображаться с отключенными картинками (рис. 21):

Рис. 21. Отображение веб-сайта с отключенными картинками

Как видно на рисунке 21, при отключении картинок верстка сайта осталась прежней, следовательно этот этап тестирования также можно считать успешно пройденным.

Поскольку веб-сайт расположен на локальном хостинге, не было возможности проверить его на скорость загрузки страниц. Это выполнимо только после публикации сайта в сети Интернет.

 

Выводы по главе 2.

 

Подведем итоги практической части данной работы. В рамках второй главы были выполнены следующие этапы работы:

1. Была исследована организационная структура образовательной организации-заказчика и особенности его коммерческой деятельности.
2. Было сформулировано техническое задание на разработку веб-сайта, учитывающее все нюансы начиная с выбора хостинга заканчивая особенности отображения готового веб-сайта на различных устройствах и в различных браузерах.
3. На этапе логического проектирования были составлены структурная и функциональная схемы веб-сайта, которые явились основой для дальнейшего проектирования системы навигации и оптимизации юзабилити веб-сайта .
4. Был проведен сравнительный анализ программного обеспечения для создания динамических веб-сайтов. По результатам сранительного анализа оптимальным решением была признана система управления содержимым WordPress0.
5. Была выполнена разработка веб-сайта на локальном хосте в среде Denwer.
6. Была выполнена оптимизация веб-сайта — установлены дополнительные плагины, прописаны заголовки и метатеги, упорядочено главное навигационное меню.
7. Было проведено тестирование веб-сайта на соответствие его требованиям технического задания. Тестирование прошло с первого раза, сайт полностью удовлетворил заказчика.

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

 

ГЛАВА 3. ЭКОНОМИЧЕСКАЯ ЭФФЕКТИВНОСТЬ РАЗРАБОТКИ И ИСПОЛЬЗОВАНИЯ WEB-САЙТА

 

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

 

3.1 Расчет стоимости разработки Интернет-сайта

3.1.1. Расчет вложений на создание программного продукта

 

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

Сп – Вложенные средства на проектирование.

Ср – Вложенные средства на реализацию.

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

Таким образом, общая трудоемкость разработки Интернет-сайта составила 30 чел/дней, а общий заработок веб-разработчика – 15000 руб. Отчисления на социальное страхование составят:

Страховые взносы = ЗП_пр * 30% (2)

Страховые взносы = 15000*30%=4500 руб.

ЗП с учетом страховых взносов – 15000 + 4500=19500 руб.

Итоговая сумма вложенных средств на проектирование рассчитывается по формуле:

где З – Затраты по заработной плате.

Х – Оплата хостинг услуг от SpaceWeb.

Р — рекламные расходы (регистрация сайта в каталогах, покупка баннеров на других ресурсах, добавление статей в каталоги статей)

Сп = 19500+150+4500 = 24150 руб.

Таблица 2

Информация о трудоёмкости этапов работ

 

3.1.3. Расчет вложений на реализацию программного продукта

 

В нашем варианте затраты были произведены на основное и вспомогательное оборудование. Они равны стоимости ноутбука, используемого для решения задачи (19000 рублей) вместе с операционной системой Windows 10 (4500 рублей) — 23500 рублей.

Общая сумма вложений на создание программного продукта равна:

С=19500+23500 = 43000 рублей.

 

3.1.4. Расчет затрат на амортизацию

 

Для расчета суммы амортизационных отчислений сметная стоимость персонального компьютера 19000 руб. и нормативный срок его службы 4 года принимается по данным ООО «Автошкола Фаворит-НН».

Норма амортизационных отчислений рассчитывается в зависимости от нормативного срока службы персонального компьютера, Н_а, %:

где n_n= 1 — период работы оборудования,

Т_сл — нормативный срок службы единицы оборудования;

Сумма амортизационных отчислений единицы оборудования за год, А_г , руб.

где — сметная стоимость единицы оборудования

Исходя из того, что трудоёмкость создания информационной системы составляет 31 день, рассчитываем сумму амортизационных отчислений для персонального компьютера за этот период по формуле:

 

3.1.2. Расчет затрат на электроэнергию

 

Поскольку разработка веб-сайта велась в домашних условиях, для расчета затрат на электроэнергию, цена за один киловатт/час применяется по данным с веб-сайта Нижегородской Сбытовой Компании (www.nsk.elektra.ru) по тарифам для физических лиц.

Расход на электроэнергии (В_э , кВт/ч) рассчитывается по формуле:

где W — потребляемая мощность единицы оборудования,

t — время работы оборудования.

Затраты на электроэнергию для единицы оборудования З_э в руб., рассчитываются по формуле:

где Ц_э – цена в руб. одного киловатт за 1 час.

Все расчеты по формулам представлены в таблице 3.

Таблица 3

Расчет затрат на электроэнергию

Затраты на электроэнергию за день составили 1,42 руб., за 30 дней они составили 42,6 руб.

Сведем все затраты, связанные с разработкой Web-сайта в сводную таблицу 3.3.

Таблица 4

Показатели затрат на разработку Web-сайта

Таким образом, общая сумма затрат на разработку составляет 48083 руб.

 

3.2 Расчет ежемесячных затрат на содержание Web-сайта

 

Расчет ежемесячных затрат на содержание Web–сайта был рассчитан аналогично затратам на разработку Web-сайта.

Ежемесячные расходы на содержание сайта состоят из оплаты домена и хостинга и составляют 173 руб.

 

3.3 Обоснование экономической эффективности Web-сайта

 

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

К основным показателям экономической эффективности относятся:

• экономический эффект;
• коэффициент экономической эффективности капитальных вложений;
• срок окупаемости капитальных вложений.

Учитывая расходы на рекламу, прогнозируемая посещаемость сайта через месяц составит 30 уникальных посетителей в сутки. В среднем каждый сотый посетитель сайта становится клиентом фирмы. Средняя сумма заказа услуги составляет 25000 рублей, с одной сделки чистая прибыль составит 5000 рублей. За месяц прибыль составит:

Ппр = ((30 * 1%) * 5000) * 30 = 45000 рублей , (9)

Сайт окупит себя в тот момент, когда прибыль, полученная от всех сделок, совершённых при помощи сайта, сравняется с суммой затрат на его создание (48083 рубля).

Полная окупаемость Web-сайта с учетом затрат на внедрение произойдет чуть больше, чем через месяц с момента внедрения (рис. 22).

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

Рис.22 Диаграмма окупаемости Web-сайта

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

 

ЗАКЛЮЧЕНИЕ

 

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

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

В качестве оформления веб-сайта был использован шаблон «Twenty Fourteen», идущий в составе стандартной сборки WordPress 4.0. Чтобы придать сайту уникальность были разработаны графические собственные элементы оформления. Все манипуляции с шаблоном производились через панель управления сайтом. Вначале веб-сайт был разработан на локальном хостинге под управлением Denwer, затем был успешно перенесен на веб-хостинг. Хостинг для сайта предоставлен компанией Spaceweb.ru.

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

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

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

• Изучена теория создания и внедрения веб-сайтов;
• Изучены особенности коммерческой деятельности заказчика;
• На стадии концептуального проектирования было сформировано технического задания на разработку веб-сайта, в котором были оговорены все требования к веб-сайту;
• На этапе логического проектирования — составлены структурная и функциональной схемы веб-сайта;
• Проведен сравнительный анализ программного обеспечения для создания веб-сайта и на его основе осуществлен выбор оптимального продукта, им оказался WordPress0;
• Выполнена практическая реализация веб-сайта на автономном локальном веб-сервере Denwer;
• Выбран хостинг-провайдер и тарифный план для размещения веб-сайта в сети Интернет;
• Выполнен перенос сайта с локального сервера на веб-сервер провайдера;
• Выполнено тестирование и апробация сайта, проведена проверка на соответствие его требованиям технического задания;
• Выполнен расчет прогнозируемой прибыли от внедрения веб-сайта.
• Составлен акт о внедрении веб-сайта.

Таким образом, все задачи, поставленные во вводной части работы, были успешно выполнены.

 

БИБЛИОГРАФИЧЕСКИЙ СПИСОК

 

1. Алексеев А.П. Введение в Web-дизайн: учебное пособие / А.П. Алексеев. – М.: СОЛОН-ПРЕСС, 2009. – 92 с.
2. Айриг, Сибил; Айриг, Эмиль Подготовка цифровых изображений для печати; Попурри — Мн.,2015. — 192 c.
3. Ашманов И. Оптимизация и продвижение сайтов в поисковых системах (+CD) / И. Ашманов, А. Иванов. – СПб.: Питер, 2010. — 40 с.
4. Барысов Р. Постройте профессиональный сайт сами. – СПб., 2009. – 22с.
5. Бердышев С.Н. Искусство оформления сайта: практическое пособие / С.Н. Бердышев. – М.: Издательско-торговая корпорация «Дашков и К», 2010. – 48 с.
6. Буковецкая, Ольга Дизайн текста: шрифт, эффекты, цвет;Машиностроение — Москва, 2015. — 304 c.
7. Бурлаков, Михаил Photoshop 6 и ImageReady 3; СПб: Питер — Москва,2015. — 752 c.
8. Бэйли Л. Изучаем SQL. — СПб.: Питер, 2012. — 592 с.
9. Гаевский, А.Ю.; Романовский, В.А. 100% самоучитель. Создание Web-страниц и Web-сайтов. HTML и JavaScript;ИЛ — Москва, 2015. — 464 c.
10. Гуда А. Н. Информатика. Общий курс : учебник / А. Н. Гуда, М. А. Бута-кова, Н. М. Нечитайло, А. В. Чернов ; под общ. ред. В. И. Колесникова. — 4-е изд. – М.: Издательско-торговая корпорация Дашков и К, 2011. — 99 с .
11. Гуда А.Н., Колесников В.И. Информатика и программирование: компьютерный практикум — М.: Дашков и К, 2010. — 24 с.
12. Корабельникова, Г.Б.; Гурский, Ю. Adobe Photoshop 6 в теории и на практике; Мн: Новое знание — Москва, 2015. — 528 c.
13. Люк Веллинг, Лора Томсон. Разработка WEB-приложений с помощью PHP и MySQL. 4-е издание: Пер. с англ. – М.: Издательский дом «Вильямс», 2010. -837 с.
14. Маклафлин Б., Полайс Г., Уэйс Д. Объектно-ориентированный анализ и проектирование. — СПб.: Питер, 2012. — 608 с.
15. Моррисон М. Изучаем JavaScript. — СПб.: Питер, 2012. — 608 с.
16. Романова Ю.Д. Информатика и информационные технологии : учебное пособие / Под ред. Ю. Д. Романовой. — 5-е изд., испр. и доп. – М.: Эксмо, 2011. — 74 с.
17. Робин Никсон. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript и CSS. 2-е издание – К.: Питер,2013. -208 c.
18. Федотова Е. Л. Информатика : курс лекций / Е. Л. Федотова, А. А. Федо-тов – М.: Форум, 2011. — 49 с.
19. Фельке-Моррис Терри. Большая книга веб-дизайна. — М.: Эксмо, 2012. — 608 с.
20. Фиртман Максимилиано. Веб-программирование для мобильных устройств. – М.: Рид Групп, 2012. — 576 с.
21. Фримен Э., Робсон Э. Изучаем программирование на HTML — СПб.: Питер, 2011. — 656с.
22. Херман Дэвид. Сила JavaScript. 68 способов эффективного использования JS. — СПб.: Питер, 2013. — 288 с.
23. Хоган Брайан, Уоррен К., Уэбер М., Джонсон К., Годин А. Книга веб-программиста. Секреты профессиональной разработки веб-сайтов. — СПб.: Питер, 2013. — 288 с.
24. Якушина Е. Изучаем Интернет. Создаём Web-страничку. – СПб.: Питер, 2009. – 56 с.
25. Янк Кевин PHP и MySQL. От новичка к профессионалу — М.: Эксмо, 2013. — 384 с. — (Мировой компьютерный бестселлер).
26. www.wikipedia.ru – информационный сайт

---

1  2  3