Проектування та створення рекламного веб-сайту для автошколи

Ізотков, Богдан Альбертович

Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/8906

Title:	Проектування та створення рекламного веб-сайту для автошколи
Authors:	Дяченко, Петро Васильович Ізотков, Богдан Альбертович
Keywords:	УПРАВЛІННЯ;WEB-ОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА АВТОШКОЛА;ПРЕДМЕТНА ОБЛАСТЬ;ЗАДАЧІ;ПРОГРАМНІ ЗАСОБИ;ПОШУК;WEB-САЙТ.
Issue Date:	16-Jun-2022
Abstract:	Майже у кожної сфери бізнесу сьогодні повинен бути сайт, тому що, всі шукають потрібні послуги в інтернеті. Тема моєї кваліфікаційної роботи виглядає так: «Проектування та створення рекламного веб-сайту для автошколи». В сфері послуг автошкол web-сайт теж дуже потрібен, тому що, в цих напрямках дуже велика конкуренція, треба завоювати свого клієнта, потрібно надати всю потрібну про автошколу, так щоб після перегляду web-сайту користувач був зацікавлений. Метою кваліфікаційної роботи бакалавра є проектування та створення рекламного веб-сайту для автошколи. Об’єкт дослідження: web-орієнтовані інформаційні та довідкові системи. Предмет дослідження: web-орієнтована інформаційна система автошкол. В роботі застосовувалися вивчення практичних розробок, аналіз існуючих сайтів автошкол.
URI:	https://er.chdtu.edu.ua/handle/ChSTU/8906
Appears in Collections:	122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування)

Files in This Item:

File	Description	Size	Format
Пояснювальна записка_Ізотков Богдан_КНС-2001_2021-2022.pdf Restricted Access		1.91 MB	Adobe PDF	View/Open Request a copy

Show full item record

Extracted text

1

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ

Факультет інформаційних технологій і систем

Кафедра комп’ютерних наук та системного аналізу

Пояснювальна записка
до кваліфікаційної роботи
бакалавра
(освітній рівень)

на тему: «Проектування та створення рекламного веб-сайту для автошколи»

Виконав: студент 4 курсу, групи КНС-2001
спеціальності 122 «Комп’ютерні науки»
(шифр і назва спеціальності)
освітня програма «Комп’ютерні науки та
(назва освітньої програми)

прикладне програмування

Ізоткова Богдана Альбертовича

Керівник Дяченко П.В.
(прізвище та ініціали)

Черкаси 2022 року
2

Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітній рівень Бакалавр
Спеціальність 122 – Комп’ютерні науки

ЗАТВЕРДЖУЮ
Завідувач кафедри КН та СА
_______________ Триус Ю.В.
«____» _____________ 2022 р.

ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Ізоткову Богдану Альбертовичу
(прізвище, ім‘я, по батькові)
1. Тема роботи «Проектування та створення рекламного веб-сайту для автошколи»

Керівник роботи Дяченко П.В., к.т.н., доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «7» лютого 2022 р. №45/04.

2. Строк подання студентом роботи до 16 червня 2022 року
3. Вихідні дані до роботи:
Практичні навики роботи з інформаційними ресурсами. Робота з базами даних.
Звіт з виробничої практики. Звіт з наукової практики.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. Обґрунтування необхідності створення web-орієнтованої інформаційної системи
автошколи.
4.2. Огляд аналогів існуючих web-сайтів.
4.3. Задача створення інформаційного ресурсу.
4.4. Вибір програмних засобів.
4.5. Розробка і тестування інформаційного ресурсу.
Висновки.
5. Перелік додатків (з точним зазначенням назв додатків):
5.1. Додаток А. Специфікація 482.ЧДТУ. 22092-01.
5.2. Додаток Б. Текст програми.
5.3. Додаток В. Інструкція користувача.

3

5.5. Презентація у вигляді 19 слайдів.
6. Консультанти розділів роботи
Прізвище, ініціали та Підпис, дата
Розділ посада
завдання видав завдання прийняв
консультанта

7. Дата видачі
завдання 11.01.2022

КАЛЕНДАРНИЙ ПЛАН
№ Строк виконання
Назва етапів кваліфікаційної роботи магістра Примітка
з/п етапів роботи
1 Видача завдання на кваліфікаційну роботу
11.01.2022 Виконано
бакалавра.
2 Аналіз літературних джерел, об’єкту та
до 13.02.2022 Виконано
предмету дослідження.
3 Написання теоретичного розділу
до 04.03.2022 Виконано
кваліфікаційної роботи бакалавра.
4 Написання аналітичного розділу кваліфікаційної
до 01.04.2022 Виконано
роботи бакалавра.
5 Написання практичних розділів й висновків до
до 01.05.2022 Виконано
кваліфікаційної роботи бакалавра.
6 Перед захист кваліфікаційної роботи магістра на
01.06.2022 Виконано
засіданні кафедри КН та СА.
7 Подання роботи завідувачу кафедри КН та СА. до 16.06.2022 Виконано
8 Захист кваліфікаційної роботи бакалавра. 16.06.2022 Виконано

Студент _____________________________ Ізотков Б. А.
(підпис)
Керівник роботи ____________________________ Дяченко П. В.
(підпис)

4

РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 45 с., 23 рис., 1 табл., 8
використаних джерел, 3 додатків.
Актуальність теми.
Майже у кожної сфери бізнесу сьогодні повинен бути сайт, тому що, всі
шукають потрібні послуги в інтернеті. Тема моєї кваліфікаційної роботи виглядає
так: «Проектування та створення рекламного веб-сайту для автошколи». В сфері
послуг автошкол web-сайт теж дуже потрібен, тому що, в цих напрямках дуже
велика конкуренція, треба завоювати свого клієнта, потрібно надати всю потрібну
про автошколу, так щоб після перегляду web-сайту користувач був зацікавлений.
Лендинг пейдж - це будь-яка сторінка, яка закликає користувача щось
зробити. Наприклад, підписатися на розсилку або ж ознайомитися з інформацією.
Для створення сайту використовується мова розмітки гіпертексту HTML та
каскадні таблиці стилів CSS та разом з ними JavaScrip.
Було створено сайт автошколи, який заохочує пройти курси водіння для
отримання водійського посвідчення. На сайті є інформація про автошколуі про
послуги, які надає автошкола а також про філії.
Тобто тепер зрозуміло, що лендинг пейдж це дуже корисний сайт, який
потрібен всім підприємствам які працюють з людьми. На web-сайті представлена
інформація про наданні послуг для отримання водійського посвідчення. Сайт має
адаптивний дизайн під будь які девайси
Мета роботи і задачі дослідження. Метою кваліфікаційної роботи бакалавра
є проектування та створення рекламного веб-сайту для автошколи. Для досягнення
поставленої мети в дослідженні необхідно вирішити такі задачі:
− виконати огляд методів та засобів для розробки інформаційної системи
автошколи;
− провести порівняльний аналіз існуючих аналогів інформаційних систем для
автошкол;
5

− обрати програмно-технічні засоби для реалізації задачі;
− спроектувати і створити інформаційну систему автошколи;
− провести адаптацію інформаційної системи під девайси різних розмірів;
− провести тестування розробленої системи.
Об’єкт дослідження: web-орієнтовані інформаційні та довідкові системи.
Предмет дослідження: web-орієнтована інформаційна система автошкол.
Методи дослідження. В роботі застосовувалися вивчення практичних
розробок, аналіз існуючих сайтів автошкол.
Перелік ключових слів: УПРАВЛІННЯ, WEB-ОРІЄНТОВАНА
ІНФОРМАЦІЙНА СИСТЕМА АВТОШКОЛА, ПРЕДМЕТНА ОБЛАСТЬ, ЗАДАЧІ,
ПРОГРАМНІ ЗАСОБИ, ПОШУК, WEB-САЙТ .
6

ABSTRACT
The qualification work of the bachelor contains: 45 pages, 23 figures, 1 table, 8
used sources, 3 appendices.
Actuality of theme.
Almost every business today should have a website, because everyone is looking for
the right services on the Internet. The topic of my qualification work is as follows:
"Design and creation of a web-oriented driving school information system." In the field of
driving school services, the web-site is also very much needed, because in these areas
there is a lot of competition, you need to win your client, you need to provide everything
you need about driving school, so that after viewing the web-site the user was interested.
A landing page is any page that encourages the user to do something. For example,
subscribe to the newsletter or read the information.
HTML hypertext markup language and cascading CSS style sheets and JavaScrip
are used to create the site.
A driving school website has been set up to encourage driving lessons to obtain a
driver's license. The site has information about driving schools and services provided by
driving schools and branches.
That is, it is now clear that the landing page is a very useful site that is needed by all
businesses that work with people. The website provides information on the provision of
services to obtain a driver's license. The site has an adaptive design for any device
Purpose and tasks of research: The purpose of the bachelor's qualification work is
to design and create a web-oriented information system of a driving school. To achieve
this goal in the study it is necessary to solve the following tasks:
− review the methods and tools for developing a motorcycle school information
system;
− to conduct a comparative analysis of existing analogues of information systems for
driving schools;
− choose software and hardware for the task;
7

− design and create a driving school information system;
− to adapt the information system to devices of different sizes;
− to test the developed system.
Object of research: web-oriented information and reference systems.
Subject of research: web-oriented information system of driving schools.
Research methods. The study of practical developments, analysis of existing
driving school sites was used in the work.
List of key words: MANAGEMENT, WEB-ORIENTED INFORMATION
SYSTEM DRIVING SCHOOL, SUBJECT AREA, TASKS, SOFTWARE, SEARCH,
WEBSITE.

8

ЗМІСТ
ВСТУП ................................................................................................................................ 10
1. ОБГРУНТУВАННЯ НЕОБХІДНОСТІ СТВОРЕННЯ WEB-ОРІЄНТОВАНОЇ
ІНФОРМАЦІЙНОЇ СИСТЕМИ АВТОШКОЛИ ............................................................ 12
1.1. Актуальність створення інформаційного ресурсу для автошколи .................. 12
1.2. Основні завдання і функції автошколи .............................................................. 14
Висновок до розділу 1 .................................................................................................... 15
2. ОГЛЯД АНАЛОГІВ ІСНУЮЧИХ WEB-САЙТІВ .................................................. 16
2.1. Класифікація web–сайтів ..................................................................................... 16
2.2. Огляд автошколи Автосанта ................................................................................ 18
2.3. Огляд автошколи Карат ....................................................................................... 21
2.4. Огляд автошколи Автошкола24 .......................................................................... 23
2.5. Особливості розглянутих інформаційних систем ............................................. 25
Висновок до розділу 2 .................................................................................................... 26
3. ЗАДАЧА СТВОРЕННЯ ІНФОРМАЦІЙНОГО РЕСУРСУ ..................................... 27
3.1. Постановка задачі ................................................................................................. 27
3.2. Вимоги до інформаційного ресурсу автошколи ................................................ 27
Висновки до розділу 3 .................................................................................................... 29
4. ОБГРУНТУВАННЯ ПРОГРАМНИХ ЗАСОБІВ ................................................... 30
4.1. Обґрунтування вибору програмних засобів ....................................................... 30
4.2. Апаратні засоби ..................................................................................................... 32
Висновки до розділу 4 .................................................................................................... 33
5. РОЗРОБКА І ТЕСТУВАННЯ ІНФОРМАЦІЙНОГО РЕСУРСУ ........................... 34
5.1. Проектування дизайну сайту ............................................................................... 34
5.2. Розробка web-сайту .............................................................................................. 34
5.3. Тестування ............................................................................................................. 41
Висновок до розділу 5 .................................................................................................... 43
ВИСНОВКИ ....................................................................................................................... 44
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ......................................................................... 45
9

ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ
АСУ – автоматизована система управління;
АІС – автоматизована інформаційна система;
АРМ – автоматизоване робоче місце;
АС – автоматизована система;
БД – база даних;
ЕОМ – електронно-обчислювальна машина;
ОС – операційна система;
ПЗ – програмне забезпечення;
ПК – персональний комп’ютер.

10

ВСТУП
В останні роки в Україні швидкими темпами розвивається Internet, і велика
частка населення має у себе вдома або на роботі вихід до його ресурсів, виникає
необхідність використання цього напрямку в рекламних цілях. Internet як каналу
комунікації властиві такі характерні особливості:
1) характеризується швидкістю поширення інформації. Так, з’явившись на
інформаційному сайті повідомлення може бути миттєво розтиражовано мережевими
виданнями, а потім навіть друкованими. Таким чином, дана особливість Internet дає
сприятливе середовище для того, щоб грамотно створене і запущене повідомлення
поширювалося самостійно і не вимагає значних матеріальних витрат на його
підтримку;
2) Internet дає прекрасну можливість фокусувати вплив на конкретну
вузькопрофільну, цільову аудиторію, в якій зацікавлена організація, виділяти
підгрупи в цій аудиторії для складання більш персоналізованих звернень, часом
навіть враховувати індивідуальні особливості та характеристики кожного
відвідувача.
Узагальнюючі дані різних досліджень з вивчення Internet-аудиторій, великий
відсоток аудиторії Internet складають активні верстви населення, які беруть участь в
процесі прийняття рішень.
3) комунікація в Internet інтерактивна. Це має на увазі можливість активної
взаємодії між сторонами. Інтерактивність означає можливість вступати в прямий
діалог з аудиторією, а також те, що представники даної аудиторії також можуть
спілкуватися між собою. Крім усього іншого інтерактивність дозволяє отримувати
зворотний зв’язок, адекватно аналізувати ситуацію, що склалася і своєчасно
реагувати у разі потреби.
4) схильність користувачів Internet до отримання інформації сприяє більш
позитивному сприйняттю і високої засвоюваності матеріалу.
5) це глобальний віртуальний електронний ринок, що не має яких-небудь
територіальних або тимчасових обмежень. Електронне комунікативний простір на
11

відміну від друкованого або ефірного практично не обмежена. Тут може бути
розміщено скільки завгодно багато інформації, обсяг якої не буде обмежений
рамками ефірного часу передачі або кількістю друкованих знаків.
6) порівняно невисока вартість комунікації серед інших ЗМІ.
7) наявність у організації web-сайту сьогодні вважається не просто справою
престижу, але необхідністю, навіть якщо її діяльність не пов`язана з
інформаційними технологіями та продажем товарів в Internet. На сьогоднішній день
вже не встає питання: чи потрібен сайт або не потрібен, але дуже актуальна тема, як
зробити сайт максимально ефективним з точки зору успішної комунікації та
підтримки сприятливого іміджу.
Для досягнення поставленої мети в кваліфікаційній бакалаврській роботі
розв’язуються наступні завдання:
− дослідження предметної області;
− визначення основних вимог до web-сайту;
− аналіз існуючих інформаційних ресурсів;
− проектування;
− оптимізація і адаптація web-сайту;

12

1. ОБГРУНТУВАННЯ НЕОБХІДНОСТІ СТВОРЕННЯ WEB-ОРІЄНТОВАНОЇ
ІНФОРМАЦІЙНОЇ СИСТЕМИ АВТОШКОЛИ
1.1. Актуальність створення інформаційного ресурсу для автошколи
Для зручності постійних відвідувачів ресурсу і залучення нових, я вирішив
створити web-сайт для автошколи.
Зручність для учнів, або нових клієнтів полягає в тому, щоб дізнатися
інформацію про послуги які вони зможуть отримати в нашій автошколі. Там же
вони зможуть більше дізнатися про заклад.
Так само до переваг цієї додаткової послуги можна віднести: значне зниження
витрат, пов’язаних з обміном інформацією за рахунок використання більш дешевих
засобів комунікацій, поширення прайс-листів, диспетчерську службу і значне
збільшення оперативності отримання інформації.
Сьогодні для будь-якої автошколи необхідно мати ефективний власний web-
сайт з брендом ім’ям, унікальним дизайном. Після створення сайту треба змусити
його працювати на себе, тобто зробити його відомим цільовій аудиторії. Потрібно
зробити так, щоб наш ресурс був націлений на цільову аудиторію. Коротко
перерахуємо основні інструменти Internet-маркетингу, за допомогою яких можна
вирішувати цю задачу.
1. Розміщення (індексування) сайту в пошуковій системі Google.
2. Реклама на тематичних сайтах.
3. Контекстна реклама.
4. Реклама в соціальних мережах, або YouTube.
Але сьогодні далеко не для всіх напрямків діяльності web-сайт може окупити
витрати на його створення і підтримку. Проблема ускладняється відсутністю
фахівців з Internet-маркетингу.
13

Навіть маючи лише вихід в Internet можна поміщати інформацію про бізнес і її
пропозиціях в онлайнові:
- каталоги;
- дошки оголошень;
- новинні сайти;
- тематичні форуми;
Більш того, Internet можна активно використовувати для просування своїх
пропозицій і свого імені через Internet навіть маючи лише e-mail.
При цьому користувачам відкриваються можливості отримання інформації,
наприклад через підписку на розсилки новин, професійні, дискусії та ін. Однак, чим
вище рівень використання Internet бізнеса, тим більше у неї маркетингових
можливостей.
Створивши сайт, його потрібно зареєструвати в пошукових системах. Це
дозволяє легко виявити його користувачам Internet, хто цікавиться сайтами даної
тематики а також дозволить вам стежити за статистикою вашого сайту.
Реклама на найбільш відвідуваних сайтах (http:// www.google.com) – найбільш
ефективна. А форми такої реклами на сайті можливі найрізноманітніші: текстова і
банерна реклама в розсилці, web-сторінка в web-каталозі (що дозволяє мати своє
представництво в Internet на відвідуваному сайті при мінімальних фінансових
витратах). Корисну і цікаву для відвідувачів (потенційних клієнтів) інформацію
можна розмістити за підписом фірми в різних розділах це сприятиме позитивному
іміджу бізнеса.
Це приклад можливостей для представників бізнесу. Подібні проекти і
можливості існують для багатьох напрямків бізнесу. І не треба забувати, що
аудиторія Internet відрізняється освіченістю і кваліфікацією, тому в ній велика
частка людей, які називаються «лідерами думок», до яких часто звертаються за
інформацією або порадою.
Створюваний web-сайт повинен забезпечувати такі можливості:
− адаптивність під різні девайси;
14

− цілодобовий доступ до web-сайту;
− послуги автошколи;
− можливість зворотного зв’язку менеджером;
− забезпечити сайт якісним і приємним для користувача.
1.2. Основні завдання і функції автошколи
Сучасне суспільство відрізняється не лише необхідністю прискореного
прийняття рішень, але також постійним прагненням до незалежності та швидкості
при переміщенні. Сьогодні автомобіль вже давно не вважається показником
багатства, а виступає як найнадійніший і найнеобхідніший партнер при реалізації
поставлених цілей.
Щоб отримати горде звання «водій», попередньо слід вивчити велику масу
інформації та набути необхідні навички. Автошкола «Кобра» - є освітньою
установою, яка має багаторічний досвід роботи, має сучасні технології навчання,
надає можливість повного комплексу як основних, так і додаткових послуг з
підготовки водіїв ТЗ такої найбільш затребуваної категорії, як «В». Цей курс
передбачає отримання стандартних навичок водіння та знань правил дорожнього
руху, які потрібні для отримання посвідчення водія.
Переваги навчання: автошколи "Кобра":
- вибір та зручне розташування філій;
- професійний та досвідчений навчальний персонал;
- навчання у невеликих групах для створення зворотного зв'язку на заняттях;
- застосування останніх технологій та навчальних методик, включаючи наочні
посібники;
- наявність персонального підходу до кожного учня;
- можливість індивідуального навчання для особливо завантажених;
- постійне розширення та вдосконалення теоретичної та практичної бази;
- можливість заміни інструктора або автомобіля протягом навчального процесу;
- автопарк з наявністю різноманітних автомобілів, з АКПП або з механікою;
- можливість різних способів оплати;
15

- відсутність непередбачених витрат та платежів;
- супровід до отримання прав.
Висновок до розділу 1
В даному розділі був проведений аналіз актуальності створення інформаційної
веб сторінки для автошколи. Було визначено основні функції та завдання
автошколи.
16

2. ОГЛЯД АНАЛОГІВ ІСНУЮЧИХ WEB-САЙТІВ
2.1. Класифікація web–сайтів
Вдалий web-сайт – це надзвичайно ефективний інструмент - він здатний
захоплювати увагу аудиторії. В епоху інформаційних технологій, все частіше і
частіше з'являються нові види сайтів, які з неймовірно високою швидкістю
завоювали популярність великої аудиторії.
Будь-який веб ресурс який призиває користувача щось зробити називається -
лендинг.
Якісний сайт служить вагомим інструментом для вдалого бізнесу, без якого у
наш час неможливо обійтись.
Існує декілька видів сайтів:
Інформаційні сайти - на таких сайтах представлена інформація по конкретної
темі або про певну організації. Це самі поширені в мережі Internet Web-сайти; з
плином часу вони часто переймають деякі риси інших категорій сайтів.
Операційні сайти. Сайтом такого типу можна скористатися з метою виконання
будь-якої операції або завдання. У цю категорію входять сайти, зайняті в
електронній комерції.
Сайти спільнот - на цих сайтах представлена інформація або кошти, пов'язані
із здійсненням операцій, але упор робиться на взаємодію між відвідувачами. Сайти,
засновані на спільнотах, мають тенденцію до фокусування на конкретній темі або
людині. Вони заохочують взаємодію між схоже мислячими особистостями.
Розважальні сайти. Ці сайти створюються для ігор або якогось цікавої
взаємодії, для якого можуть вживатися елементи операційного, інформаційного
типів і сайтів спільнот.
Інші сайти - у цю категорію входять художні або експериментальні сайти,
особисті Web-простору, такі як Web-журнали (також звані blogs), а також сайти, які
можуть не слідувати загально-прийнятим Web-угодами або не мати чітко-певного
економічного призначення.
Основні перевагою сайту є:
17

− інформативність – сайт може містити стислу (або повну) інформацію про
людину або компанію;
− доступність – дізнатись про вашу компанію за допомогою сайту може будь–
хто незалежно від того, де він знаходиться, скористувавшись пошуковими
системами;
− ефективність – сайт допомагає знаходити нових клієнтів;
Недоліки існують в кожному проекті. Основними з них є:
− вартість розробки. Високий ціновий поріг входження на ринок – один із
найвидатніших мінусів. Середня вартість розробки становить варується від 500 до
10,000$. А в процесі її створення необхідно залучати фахівців різних профілів, що в
підсумку вимагає великого бюджету;
− регулярні витрати на підтримку сайту. Подальший супровід – проблема, якщо
сайт був зроблений під ключ, вам потрібно наймати адміністратора.;
− необхідність реклами. В Google тисячі сайтів з’являються кожну годину.
Органічний трафік із додатком для сайту отримати неможливо, тому для просування
необхідно користуватися Google Adwords.
Очевидно, що наявність сайту дає чимало переваг, скорочує час пошуку
певно\ інформації в даній області та приток клієнтів.
Якщо компанія займається реалізацією будь-якої продукції або наданням
послуг, найкращим рішенням буде створити сайт-каталог. Цей тип ресурсу
відрізняється від інтернет-магазину тим, що у клієнта немає можливості купити
товар онлайн, оскільки не передбачено кошик замовлень. Сайт-каталог дозволяє
зручно розміщувати інформацію про ваш товар в інтернеті. Низька вартість
створення і підтримки, швидка розробка – ключові переваги цього типу сайту.
Головний результат відвідування сайту-каталогу – дзвінок або лист клієнта із
запитом про конкретну товарну позицію.
Перевагою наявності власного веб-сайту говорить про те, що компанія чи
підприємець відноситься насправді серйозно до того, чим він займається, що вона є
професіоналом своєї справи.
18

2.2. Огляд автошколи Автосанта
Першим розглянемо сайт «Автосанта». Сайт «Автосанта» знаходиться за
адресом: https://xn----7sbabh2chwb8ad7e.kiev.ua/. Проаналізуємо його недоліки та
переваги.
Переваги:
 гарний дизайн;
 велика інформативність;
 зручність використання.
 багато різноманітних послуг;
 є форма зворотного зв’язку;
 якісні фотографії.
Недоліки:
- погано адаптований;
- занадто багато яскравих кольорів;
- в деяких секціях дуже малий шрифт тексту.
Сайт доволі інформативний, але дуже простий. Працювати з таким сайтом
досить незручну, але можна.
Інтерфейс сайту автошколи «Автосанта» (рис.2.1 – 2.5).

Рисунок 2.1 - Головна сторінка сайту Автосанта
19

Рисунок 2.2 - Коротко про автошколу сайту Автосанта

Рисунок 2.3 - Переваги автошколи Автосанта

20

Рисунок 2.4 - Основні тарифи автошколи Автосанта

Рисунок 2.5 - Галерея автошколи Автосанта

21

2.3. Огляд автошколи Карат
Другим розглянемо сайт «Карат». Сайт «Карат» знаходиться за адресом:
https://autoshkola.com.ua/. Проаналізуємо його недоліки та переваги.
Переваги:
- велика інформативність;
 добре оптимізований;
 багато різноманітних послуг;
 є форма зворотного зв’язку;
 зручність використання;
 є красива анімація.
Недоліки:
- дизайн;
- виглядає дуже простим;
– в деяких секціях дуже малий шрифт тексту;
Сайт виглядає дуже простим але інформативним. Інтерфейс сайту автошколи
«Карат» (рис.2.6 – 2.9).

Рисунок 2.6 - Головна сторінка сайту Карат
22

Рисунок 2.7 - Коротка інформація про автошколу

Рисунок 2.8- Послуги автошколи Карат
23

Рисунок 2.9 - Зворотній зв'язок
2.4. Огляд автошколи Автошкола24
Останнім розглянемо сайт «Автошкола24». Сайт «Автошкола24» знаходиться
за адресом: http://avtoshkola24.com/. Проаналізуємо його недоліки та переваги.
Переваги:
 сучасний дизайн;
 красива анімація контенту;
 велика інформативність;
 добре оптимізований;
 багато різноманітних послуг;
 зручність використання;
- є форма зворотного зв’язку.
Недоліки:
– повільна загрузка сайту;
– в деяких секціях дуже великий шрифт тексту.
Сайт являється дуже зручним і інформативним. Одним з головних мінусів є те,
що він повільно запускається.
Інтерфейс сайту автошколи «Автошкола24» (рис.2.10 – 2.13).
24

Рисунок 2.10 - Головна сайту Автошкола24

Рисунок 2.11 - Послуги Автошкола24

Рисунок 2.12 - Тарифи Автошкола24

25

Рисунок 2.13 - Зворотній зв'язок Автошкола24
2.5. Особливості розглянутих інформаційних систем
Таблиця 2.1 - Порівняльна характеристика програмних продуктів
Назва
програмного Автосанта Карат Автошкола24
продукту
1 2 3 4
Читабельність Присутня Присутня Присутня
Інформаційність
3 4 5
(Від 1 до5 )
Інтерфейс
4 2 4
(Від 1 до5 )
Зручність
використання 4 2 1
(Від 1 до5 )
Функціонал
4 3 2
(Від 1 до5 )
Адаптив під
мобільні пристрої 4 2 5
(Від 1 до5 )
Детальний аналіз існуючих сайтів автошкіл дозволяє прийняти рішення про те
які функціональні та нефункціональні вимоги повинен виконувати розроблюваний
сайт у межах цієї дипломної роботи.
26

Висновок до розділу 2
В даному розділі виконано порівняльний аналіз аналогів автошкіл:
«Автосанта», «Карат», «Автошкола24».
Представлено таблицю порівнянь існуючих рішень розглянутих реалізацій.
Визначено на які класифікації діляться сучасні веб-сайти.
27

3. ЗАДАЧА СТВОРЕННЯ ІНФОРМАЦІЙНОГО РЕСУРСУ
3.1. Постановка задачі
Будь-яка веб-сторінка яка вимагає користувача щось зробити називається -
лендинг-пейдж. Наприклад, підписатись на розсилку повідомлень або ж просто
ознайомитись з інформацією. При його розробці дуже важливу роль відіграє
оформлення. Адже саме дизайн - перше і головне, що помічає користувач і затримує
користувача на сайті.
При неправильному дизайні клієнт не буде затримуватися на нашому веб-
проекті і скоріше за все, більше не повернеться до нього.
В дизайні існує одне найголовніше правило, якнайменше кольорової палітри.
Якщо нехтувати цим правилом, то це загрожує залишитися без клієнта.
Існує ще дуже багато правил для успішного функціонування такого роду
сайтів. Важливо правильно оформити зовнішній лендинг-пейджу, щоб підвищити
поведінкові характеристики. Простими словами, зробити доступ до потрібної
інформації максимально зручним і ефективним.
Ознаками успішного дизайну інформаційного сайту, є:
1. Лаконічність.
2. Оптимальне розміщення всієї інформації на сторінці, для більш зручного
використання.
3. Використання мінімальної кількості фарб.
Завданням дипломної роботи є розробка лендінг-пейджу для автошколи. На
web-сайті буде представлена інформація про послуги, які надає автошкола. Також
інформація про саму автошколу, сайт буде адаптивним під девайси різних розмірів,
для максимального комфорту буде використано мінімальна кількість кольору.
3.2. Вимоги до інформаційного ресурсу автошколи
Перед розробкою потрібно поставити вимоги до розроблюваного проекту.
Вимоги допоможуть більш детально зрозуміти, яким повинен бути проект.
28

Структура сайту, доволі важливий момент. Структура є у будь-якого сайту.
Вона включає перелік назв сторінок, а у разі лендингу – блоків або екранів.
Структура проекту буде виглядати так:
1. Про нас.
2. Переваги.
3. Процес навчання.
4. Послуги.
5. Форма для зв’язку.
6. Контакти.
Після розробки структури проекту, потрібно розібратися з основними
вимогами до розроблюваного сайту.
Основні вимоги можна виділити такі:
1. Оригинальна назва. Проста, зрозуміла назва сайту буде легко
запам’ятовуватись користувачам і клієнтам.
2. Приємний дизайн. Занадто яскрава кольорова гамма може бити по очах,
напружувати зір, відволікати від важливої інформації. При виборі оформлення
ресурсу треба добре продумати його дизайн.
3. Швидкість загрузки. Потрібно оптимізувати сайт так, щоб він відкривався і
працював із прийнятною швидкістю, навіть на пристроях з мобільним інтернетом.
4. Оригінальний і якісний контент. Вміст сайту має відповідати бізнес-
завданням, контент має бути унікальним.
5. Адаптація під різні пристрої і екрани. Згідно зі статистикою більше 79%
користувачів відвідують сайти з мобільних пристроїв, а не з десктопу. Сайт
потрібно адаптувати під телефони і екрани різних розмірів.
6. Зручний зв’язок. На сайті повинна бути вказана вся контактна інформація:
номери телефонів, соцмережі, місце знаходження. Також для зручності треба
створити форму зворотного зв’язку.

29

Висновки до розділу 3
В цьому розділі проведено постановку задачі для створення веб-додатку.
Також були детально описані вимоги до розроблюваного проекту.
30

4. ОБГРУНТУВАННЯ ПРОГРАМНИХ ЗАСОБІВ
4.1. Обґрунтування вибору програмних засобів
Для того щоб почати розробку потрібно встановити необхідне програмне
забезпечення:

Рисунок 4.1 - Використані технології

HTML – мова розмітки гіпертексту стандартна мова розмітки веб–сторінок в
Інтернеті. Більшість веб–сторінок створюються за допомогою мови HTML (або
XHTML). Документ HTML оброблюється браузером та відтворюється на екрані у
звичному для людини вигляді.
HTML є похідною мовою від SGML, успадкувавши від неї визначення типу
документу та ідеологію структурної розмітки тексту.
HTML разом із каскадними таблицями стилів та вбудованими скриптами — це
три основні технології побудови веб–сторінок.
HTML впроваджує засоби для:
− створення структурованого документу шляхом позначення структурного
складу тексту: заголовки, абзаци, списки, таблиці, цитати та інше;
− отримання інформації із всесвітньої мережі через гіперпосилання;
− створення інтерактивних форм;
− включення зображень, звуку, відео, та інших об'єктів до тексту.
CSS (англ. Cascading Style Sheets або Каскадні таблиці стилів скорочено) –
спеціальна мова, що використовується для відображення сторінок, написаних
мовами розмітки даних. Найчастіше CSS використовують для візуальної презентації
31

сторінок, написаних HTML та XHTML, але формат CSS може застосовуватися до
інших видів XML–документів.
CSS має різні рівні та профілі. Наступний рівень CSS створюється на основі
попередніх, додаючи нову функціональність або розширюючи вже існуючі функції.
Рівні позначаються як CSS1, CSS2 та CSS3. Профілі — сукупність правил CSS
одного або більше рівнів створені для окремих типів пристроїв або інтерфейсів.
Наприклад, існують профілі CSS для принтерів, мобільних пристроїв тощо.
CSS (каскадна або блочна верстка) прийшла на заміну табличній верстці веб–
сторінок. Головна перевага блочної верстки — розділення змісту сторінки (даних) та
їх візуальної презентації.
Для роботи з даним програмним кодом було використано наступне
допоміжне ПЗ: Atom – простий компелятор для програмного коду
Google Chrome — веб–переглядач, розроблений компанією Google на основі
веб–переглядача з відкритим кодом Chromium та іншого відкритого програмного
забезпечення. Його програмна архітектура була створена з чистого аркуша (однак
використовуючи інше програмне забезпечення з відкритим кодом, у тому числі
компоненти Web Kit та Mozilla) з метою задоволення поточних потреб користувачів.
Нова архітектура насамперед визнає той факт, що на сьогодні більшість веб–сайтів є
не просто веб–сторінками, але веб–програмами. Заявленими перевагами цієї
архітектури є підвищена стабільність, швидкість, безпека, а також чистий, простий
та ефективний інтерфейс користувача.
JavaScript - мультипарадигмова мова програмування. Підтримує об'єктно-
орієнтований, імперативний та функціональний стилі. JavaScript зазвичай
використовується як вбудована мова для програмного доступу до об'єктів програм.
Найширше застосування знаходить у браузерах як мову сценаріїв для надання
інтерактивності веб-сторінкам.
Було створено блок схему для реалізації та написання коду для сайту(рис 4.2)
32

Рисунок 4.2 - Блок схема створення додатку
4.2. Апаратні засоби
Для того щоб мати можливість створити веб ресурс, потрібно технічно
оснастити робоче місце. Залежно від виду роботи потрібно підібрати технічні
засоби. Для роботи з електронною інформацією – комп’ютер, технічні
характеристики якого: процесор : Intel(R) Pentium(TM) i5-9400f CPU @ 3.40GHz
33

3.40 GHz, екран 15 дюймів 60Гц, формат зображення: 3:4, розширення екрану
1360x768, оперативна пам’ять GOOD RAM DDR4 4Gb, материнська плата Asus
Prime B660M-K D4, SSD 512гб, відеокарта Nvidia GT1060. Операційна системі
Windows 10 Home. Також використовувався WI-FI роутер Тp-link deco m5.
Також в роботі використовувалась комп’ютерна миша XTrime ST-5001.
Висновки до розділу 4
В даному розділі описуються, яке ПЗ буде використане для створення веб
ресурсу. Проведений аналіз мов програмування, браузера та аналіз компілятора за
допомогою якого буде створений веб-додаток. Надається інформація про апаратні
засоби які будуть застосовані, для створення веб сайту.

34

5. РОЗРОБКА І ТЕСТУВАННЯ ІНФОРМАЦІЙНОГО РЕСУРСУ
5.1. Проектування дизайну сайту
В рамках кваліфікаційної роботи бакалавра стояло завдання розробити макети
сторінок таким чином, щоб працювати з системою було зручно, зрозуміло та легко,
як клієнту, так і новому користувачеві.
Макети розроблюваного сервісу зображені на рисунках нижче (рис. 5.1 – 5.3)

Рисунок 5.1 –Макет головної сторінки
5.2. Розробка web-сайту
Перше, що бачить користувач при вході на сайт – головну сторінку (рис. 5.4).
В шапці профілю користувач бачить початкову інформацію про автошколу. Є
кнопка звязку, після натискання на неї спрацює прокрутка на секцію з зворотнім
зв’язком.
35

Рисунок 5.4 – Головна сторінка сайту

Нижче буде секція “Наші філії (рис. 5.5).

Рисунок 5.5 – Блок “Філії”

Далі показується блок з цінами і ознайомленою інформацією про коштування
послуг (рис. 5.6)
36

Рисунок 5.6 – Блок з інформацією про послуги

37

При нажаті на гамбургер меню ми можем побачити меню (рис. 5.7).

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

38

Також при нажаті на кнопку “Записатися” до автошколи вилазить форма
запису (рис. 5.8).

Рисунок 5.8 – Блок зворотного зв’язку
При натисканні на кнопку вартість програм (рис. 5.7) ми перейдемо до
сторінки в які детально описані послуги, а також ціну за навчання (рис. 5.8)
39

Рисунок 5.9 – Сторінка з послугами та цінами

При натисканні на кнопку Філії (рис 5.7) мі потрапляємо на сторінку де
можемо побачити всі наші філії, а також внизу написані всі переваги нашої
автошколи (рис. 5.10). Також внизу ми можемо побачити навігаційне меню для
більш зручного пересування по сторінкам.
40

Рисунок 5.10 – Сторінка Філії

При натисканні на кнопку Послуги (рис. 5.7) потрапляємо на сторінку з
послугами які надає автошкола (рис. 5.11)
41

Рисунок 5.11 – Сторінка “Послуги”
5.3. Тестування
Після розробки сайту було проведене його тестування, після якого було
виявлено і знешкоджено помилки
При тестуванні критичних багів не було виявлено. Тобто продукт працює
добре на девайсах з різним розширенням екранів.
Також було протестована швидкість завантаження веб-сайту (див. рис. 5.12).
42

Рисунок 5.12 – Швидкість завантаження сайту

Сайт протестований під екрани різних девайсів, адаптація на відмінному рівні
(рис. 5.13). Вся інформація виглядає належним чином, всі посилання, картинки, а
також кнопки працюють належним чином.

Рисунок 5.13 – Сайт при відкритті на телефоні

43

Після тестування даного програмного продукту було встановлено, що він не
має критичних або ж блокуючих помилок. Після чого був добавлений на хостинг.
Висновок до розділу 5
В даному розділі описано етап створення макету для сайту, також був
проведений етап тестування, за допомогою якого було виявлено і знешкоджено
помилки.
44

ВИСНОВКИ
Мета кваліфікаційної роботи бакалавра досягнута. В ході її було
Проектування та створення рекламного веб-сайту для автошколи, написано
пояснювальну записку до кваліфікаційної роботи, розроблено презентацію.
Згідно поставленої мети було вирішено наступні завдання:
– досліджено предметну область, та визначено основні процеси роботи
автошколи;
– визначено основні вимоги до веб-сайту;
– проведено аналіз актуальності проекту на сьогоднішній день;
– проведено аналіз існуючих аналогів;
– проектування веб-орієнтованої інформаційної системи;
– оптимізація і адаптація веб-сайту;
– перевірка на наявність помилок і багів.
В перспективі розроблену інформаційну систему буде запропоновано до
використання смілянській автошколі для розвитку їх в сфері бізнесу а надання
послуг.
45

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. HTML book. URL: http://htmlbook.ru/ (дата звернення: 12.01.22).
2. YouTube. URL https://www.youtube.com/watch?v=EV_vT0Vud5Q (дата
звернення: 24.02.22)
3. YouTube. URL https://www.youtube.com/watch?v=64qSNiUmaAk (дата
звернення: 31.05.22)
4. Ab-w.net. URL: http://ab-w.net/HTML5/html5.php (дата звернення: 22.01.22).
5. Codpen. URL: https://codepen.io/ (дата звернення: 23.03.22).
6. Learn javascript. URL: https://learn.javascript.ru/ (дата звернення: 25.04.22).
7. W3schools. URL: https://www.w3schools.com/ (дата звернення: 05.03.22).
8. Tproger flexbox. URL: https://tproger.ru/translations/how-css-c-works/ (дата
звернення: 05.02.22).

ChSTU repository

ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets