Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал: https://er.chdtu.edu.ua/handle/ChSTU/6884
Назва: Електронний навчальний ресурс з вебтехнологій
Автори: Рудницька , Юлія Володимирівна
Опанасець, Віктор Юрійович
Ключові слова: веб-розробка;дизайн;електронний навчальний ресурс;вебтехнології;розробка
Дата публікації: 12-чер-2024
Короткий огляд (реферат): Розробка електронного навчального ресурсу з вебтехнологій є надзвичайно актуальною з огляду на стрімкий розвиток цифрових технологій і зростаючу роль Інтернету в нашому повсякденному житті. Сучасний світ вимагає від фахівців різних галузей не лише базових знань комп'ютерної грамотності, але й глибокого розуміння вебтехнологій, які лежать в основі багатьох виробничих процесів. Інтеграція таких ресурсів у навчальні програми сприяє підготовці висококваліфікованих фахівців, здатних створювати, підтримувати та вдосконалювати вебсайти та вебдодатки, що відповідають сучасним вимогам і тенденціям. Зокрема, електронні навчальні ресурси з вебтехнологій дозволяють забезпечити доступ до якісної освіти широкому колу людей, незалежно від їхнього місця проживання. Вони сприяють розвитку дистанційного навчання, що є особливо важливим в умовах глобалізації та підвищення мобільності населення. Крім того, такі ресурси можуть оперативно оновлюватися відповідно до новітніх досягнень і стандартів у сфері вебтехнологій, забезпечуючи студентів найактуальнішою інформацією. Важливість розробки електронного навчального ресурсу також полягає в його інтерактивності та доступності. Інтерактивні елементи, такі як відеоуроки, інтерактивні тести, практичні завдання та форуми для обговорення, сприяють більш ефективному засвоєнню матеріалу. А можливість доступу до ресурсу з будь-якого пристрою, підключеного до Інтернету, робить навчання зручним і гнучким, що є значною перевагою для студентів з різними графіками та обставинами. Таким чином, розробка електронного навчального ресурсу з вебтехнологій не лише відповідає сучасним освітнім трендам, але й сприяє підготовці компетентних фахівців, здатних відповідати на виклики динамічного цифрового світу.
URI (Уніфікований ідентифікатор ресурсу): https://er.chdtu.edu.ua/handle/ChSTU/6884
Розташовується у зібраннях:126 Інформаційні системи та технології (Web-технології, web-дизайн)

Файли цього матеріалу:
Файл Опис РозмірФормат 
РЕП_БАК_Опанасець_WEBC-2211.pdf
  Restricted Access
4.31 MBAdobe PDFПереглянути/Відкрити    Запит копії


Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.

Extracted text
 
 
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ 
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ 
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ 
         
 
 
 
 
ПОЯСНЮВАЛЬНА ЗАПИСКА 
до кваліфікаційної роботи бакалавра 
 
на тему: «Електронний навчальний ресурс з вебтехнологій» 
  
 
 
 
 
 Виконав: здобувач першого 
(бакалаврського) рівня вищої освіти 
2 курсу, групи  WEBС-2211 
 Спеціальності 126 Інформаційні системи та 
технології 
 ОП «Web-технології, Web-дизайн» 
 Опанасець Віктор Юрійович 
  
 Керівник: асистент кафедри інформаційних  
 технологій проектування, доктор філософії 
 Юлія РУДНИЦЬКА 
  
 Рецензент: старший викладач кафедри 
 інформаційних технологій Черкаського  
 національного університету імені Богдана 
 Хмельницького, к.т.н. 
 Тетяна СТАБЕЦЬКА 
  
  
 
 
 
 
 
 
 
 
 
Черкаси – 2024 року
 
ЗМІСТ 
ВСТУП ......................................................................................................................... 4 
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ, 
АНАЛОГІВ .................................................................................................................. 7 
1.1 Опис предметної області ................................................................................ 7 
1.2 Доцільність розробки електронного навчального ресурсу з 
вебтехнологій ................................................................................................ 9 
1.3 Чинники, які впливають на розробку електронного навчального 
ресурсу з вебтехнологій ............................................................................. 12 
1.4 Аналітичний огляд існуючих електронних навчальних ресурсів з 
вебтехнологій .............................................................................................. 13 
1.4.1 Електронний навчальний ресурс «Технології веб-розробки та 
дизайну» ....................................................................................................... 14 
1.4.2 Електронний навчальний ресурс «ДистОсвіта - дистанційне 
навчання інформатики» .............................................................................. 15 
1.4.3 Електронний навчальний ресурс «CSE 154: Web Programming».. 17 
1.4.4 Електронний навчальний ресурс «Веб-технології» ....................... 18 
РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ .............................. 20 
2.1 Призначення електронного навчального ресурсу з вебтехнологій ......... 20 
2.2 Вимоги до дизайну електронного навчального ресурсу з вебтехнологій 21 
2.3 Структура сервера та сторінок електронного навчального ресурсу з 
вебтехнологій .............................................................................................. 22 
2.4 Навігація електронного навчального ресурсу з вебтехнологій ................ 25 
2.5 Наповнення сторінок електронного навчального ресурсу з 
вебтехнологій .............................................................................................. 26 
2.6 Адміністрування електронного навчального ресурсу з вебтехнологій ... 28 
2.7 Вимоги до прототипу електронного навчального ресурсу з 
вебтехнологій .............................................................................................. 30 
 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № докум. Підпис Дата 
 Розроб. Опанасець В. Ю.  Літ. Арк. Аркушів 
Перевір. Рудницька Ю. В. Електронний навчальний ресурс з 
   н  67 
 Рецензент вебтехнологій.  
  Пояснювальна записка ФІТІС, 
 Н. контр . Прокопенко Т.О. кафедра ІТП, WEBC-2211 
 Затверд. Прокопенко Т.О. 
 
 
2.8  Техніко-економічне обґрунтування доцільності розробки 
електронного навчального ресурсу з вебтехнологій ............................... 32 
2.8.1 Визначення трудомісткості розробки електронного навчального 
ресурсу з вебтехнологій .............................................................................. 32 
2.8.2 Очікуваний період створення електронного навчального 
ресурсу з вебтехнологій ............................................................................. 35 
2.8.3 Розрахунок витрат на оплату праці виконавця зі створення 
електронного навчального ресурсу з вебтехнологій ............................... 35 
 
H
Y2.8.5 Розрахунок амортизаційних відрахувань ......................................... 38 
 P
E2H.8.8 Розрахунок інших накладних витратами ......................................... 41 
R2Y.8.9 Складання кошторису витрат на виробництво і реалізацію 
еLPлектронного навчального ресурсу з вебтехнологій ............................... 41 
EI2.8.10 Розрахунок ціни, доходів та прибутку від розробки та продажу 
дNRоступу до електронного навчального ресурсу з вебтехнологій ........... 42 
РОЗДІЛ LK3. РОЗРОБКА ЕЛЕКТРОННОГО НАВЧАЛЬНОГО РЕСУРСУ З 
ВЕБТЕХ IНОЛОГІЙ .................................................................................................... 45 
3.1 Обґрунтування вибору засобів розробки .................................................... 45 
N\
3.2 Опис реалізації електронного навчального ресурсу з вебтехнологій ..... 48 
Kl
3.3 Т естування електронного навчального ресурсу з вебтехнологій ............ 58 
3.4 Порівняння електронного навчального ресурсу з вебтехнологій з 
\"
аналогами ..................................................................................................... 96 
l_
ВИСНОВКИ ............................................................................................................... 99 
T 
ДОДАТОК А .............................................................................................................. 68 
o"
 
c_
  
 1T
ЧДТУ 242277.04 ПЗ 
Змн. Арк. №6o докум. Підпис Дата 
 Розроб. Опанасець В. Ю.  Літ. Арк. Аркушів 
Перевір. 8c
Рудницька Ю. В. Електронний навчальний ресурс з 
   н  67 
Рецензент вебтехнологій.  
   81
Н. контр . Прокопенко Т.О. Пояснювальна записка ФІТІС, 
   кафедра ІТП, WEBC-2211 
 Затверд. Прок46опенко Т.О. 
 
82
 
ВСТУП 
 
Розробка електронного навчального ресурсу з вебтехнологій є надзвичайно 
актуальною з огляду на стрімкий розвиток цифрових технологій і зростаючу роль 
Інтернету в нашому повсякденному житті. Сучасний світ вимагає від фахівців 
різних галузей не лише базових знань комп'ютерної грамотності, але й глибокого 
розуміння вебтехнологій, які лежать в основі багатьох виробничих процесів. 
Інтеграція таких ресурсів у навчальні програми сприяє підготовці 
висококваліфікованих фахівців, здатних створювати, підтримувати та 
вдосконалювати вебсайти та вебдодатки, що відповідають сучасним вимогам і 
тенденціям. 
Зокрема, електронні навчальні ресурси з вебтехнологій дозволяють 
забезпечити доступ до якісної освіти широкому колу людей, незалежно від 
їхнього місця проживання. Вони сприяють розвитку дистанційного навчання, що 
є особливо важливим в умовах глобалізації та підвищення мобільності населення. 
Крім того, такі ресурси можуть оперативно оновлюватися відповідно до новітніх 
досягнень і стандартів у сфері вебтехнологій, забезпечуючи студентів 
найактуальнішою інформацією. 
Важливість розробки електронного навчального ресурсу також полягає в 
його інтерактивності та доступності. Інтерактивні елементи, такі як відеоуроки, 
інтерактивні тести, практичні завдання та форуми для обговорення, сприяють 
більш ефективному засвоєнню матеріалу. А можливість доступу до ресурсу з 
будь-якого пристрою, підключеного до Інтернету, робить навчання зручним і 
гнучким, що є значною перевагою для студентів з різними графіками та 
обставинами. 
Таким чином, розробка електронного навчального ресурсу з вебтехнологій 
не лише відповідає сучасним освітнім трендам, але й сприяє підготовці 
компетентних фахівців, здатних відповідати на виклики динамічного цифрового 
світу. 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 4 
  
 
Метою кваліфікаційної роботи є розробка електронного навчального 
ресурсу з вебтехнологій. Користувачі системи повинні мати можливість 
знайомитися із теоретичним матеріалом, практичними завданнями, додатковими 
ресурсами, мати доступ до графіку навчання. Для досягнення поставленої мети 
необхідно вирішити наступні завдання: 
– розглянути цілі, принципи, переваги застосування електронних навчальних 
ресурсів; 
– провести огляд існуючих електронних навчальних ресурсів з вебтехнологій; 
– визначити вимоги до електронного навчального ресурсу з вебтехнологій; 
– вибрати стек технологій для створення електронного навчального ресурсу з 
вебтехнологій; 
– спроектувати та реалізувати електронний навчальній ресурс з 
вебтехнологій. 
Об’єкт дослідження – електронний навчальний ресурс з вебтехнологій. 
Предмет дослідження – клієнтська частина електронного навчального 
ресурсу і всі її аспекти, які включають архітектуру системи, вибір і налаштування 
технологій та інструментів, розробку фронтенду, інтеграцію з базою даних, а 
також ефективне функціонування клієнтської частини електронного навчального 
ресурсу з вебтехнологій. 
Методи дослідження. В роботі застосовані методи абстрактного мислення, 
аналізу, синтезу; пошуку, оброблення та узагальнення інформації з різних 
джерел, методи проектування інформаційних систем, методи оцінювання 
ефективності та прибутковості проектних інвестицій, методи оцінювання та 
забезпечення якості виконаних робіт. 
Практичне значення одержаних результатів. Практична значимість даної 
роботи полягає в тому, що теоретичні положення та висновки знайшли своє 
безпосереднє застосування в процесі розробки електронного навчального ресурсу 
з вебтехнологій, що дозволило поширити найсучасніші знання і практики у галузі 
вебтехнологій, а широкому колу людей індивідуально налаштовувати навчальний 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис 5 
   Дата  
 
процес відповідно до особистих потреб і можливостей, сприяючи підвищенню 
мотивації та ефективності засвоєння знань. 
Структура роботи. Робота складається зі вступу, трьох розділів, 
висновків, списку використаних джерел та додатку. Загальний обсяг роботи 
становить 67 сторінок, 14 рисунків і 12 таблиць, використано 52 джерела. У 
першому розділі роботи йдеться про підґрунтя, доцільність та чинники, що 
впливають на розробку електронного навчального ресурсу з вебтехнологій. 
Виконано аналітичний огляд існуючих електронних навчальних ресурсів з 
вебтехнологій. У другому розділі визначено призначення розроблюваного 
електронного навчального ресурсу з вебтехнологій, наведена логічна структура 
вебресурсу, сформовано вимоги до дизайну, навігації, наповнення сторінок та 
прототипу, проведено техніко-економічне обґрунтування доцільності створення 
електронного навчального ресурсу з вебтехнологій. Третій розділ розробці 
електронного навчального ресурсу з вебтехнологій. Обґрунтовано вибір засобів 
реалізації електронного навчального ресурсу з вебтехнологій, описано реалізацію 
вебресурсу, виконано тестування вебресурсу, виконано порівняння розробленого 
електронного навчального ресурсу з вебтехнологій з аналогами. 
 
  
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис 6 
 Дата  
 
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ, 
АНАЛОГІВ 
 
 
1.1 Опис предметної області 
 
Електронні навчальні ресурси – це цифрові засоби та матеріали, призначені 
для підтримки і поліпшення процесу навчання. Вони можуть бути представлені в 
різних форматах, таких як текстові документи, презентації, відео, інтерактивні 
симуляції, тестові завдання тощо. Основні характеристики та аспекти 
електронних навчальних ресурсів включають [1-4]:  
1. Текстові матеріали: електронні підручники, статті, конспекти, навчальні 
посібники. 
2. Мультимедійні матеріали: відеоуроки, аудіоподкасти, анімації, 
інтерактивні презентації. 
3. Інтерактивні ресурси: вебсимуляції, віртуальні лабораторії, інтерактивні 
карти, навчальні ігри. 
4. Тестові завдання та оцінювання: онлайн-тести, вікторини, завдання для 
самоперевірки, системи автоматичного оцінювання. 
5. Системи управління навчанням (LMS): платформи для організації 
навчального процесу, такі як Moodle, Blackboard, Google Classroom. 
На переваги електронних навчальних ресурсів вказують наступні аспекти 
[5,6]: 
1. Доступ до навчальних матеріалів у будь-який час та з будь-якого місця, що 
має підключення до Інтернету. 
2. Можливість взаємодії з матеріалами, що покращує залучення студентів і 
сприяє кращому засвоєнню знань. 
3. Адаптація контенту під індивідуальні потреби та темп навчання кожного 
студента. 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 7 
  
 
4. Використання мультимедіа і інтерактивних методів сприяє кращому 
запам'ятовуванню та розумінню матеріалу. 
5. Можливість відстеження прогресу студентів у реальному часі та надання 
зворотного зв’язку. 
Разом з тим, для використання електронних навчальних ресурсів 
необхідний стабільний доступу до Інтернету та наявність відповідних пристроїв, 
наявність високої мотивації та організованості від студентів, а також наявність 
кваліфікованих викладачів, які можуть ефективно використовувати електронні 
навчальні ресурси та підтримувати студентів. 
В сучасних електронних навчальних ресурсах дедалі більше 
відображаються швидкий розвиток технологій і зміна підходів до навчання. 
Однією з головних тенденцій є персоналізація навчання, де контент і навчальні 
шляхи адаптуються до індивідуальних потреб і рівня підготовки студентів [7,8]. 
Це дозволяє кожному студенту отримувати матеріали, які найбільше 
відповідають його знанням і навичкам, що підвищує ефективність навчання і 
мотивацію. 
Використання мультимедійних елементів, таких як відео, аудіо, анімація і 
інтерактивні вправи, допомагає утримувати увагу і забезпечує глибше розуміння 
матеріалу. Віртуальна та доповнена реальність також набирають популярності, 
дозволяючи створювати більш занурюючі і реалістичні навчальні середовища. 
Розвиток мобільних технологій вплинув на те, що багато електронних 
навчальних ресурсів тепер оптимізовані для використання на смартфонах і 
планшетах. Це забезпечує доступ до навчальних матеріалів у будь-який час і в 
будь-якому місці, роблячи навчання більш гнучким і доступним. Мобільні 
додатки часто включають функції для офлайн-доступу, що особливо корисно в 
регіонах з обмеженим доступом до Інтернету. 
Інтеграція соціальних мереж і комунікаційних платформ дозволяє 
студентам взаємодіяти один з одним і з викладачами, обговорювати матеріали, 
обмінюватися думками і співпрацювати над проєктами. Це сприяє створенню 
спільнот, де студенти можуть підтримувати одне одного і ділитися знаннями. 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 8 
   
 
Завдяки великим даним і аналітиці, електронні навчальні ресурси тепер 
можуть відстежувати прогрес студентів, аналізувати їхні сильні і слабкі сторони і 
надавати детальні звіти про успішність. Це допомагає викладачам коригувати 
навчальні програми і надавати більш точні рекомендації для студентів. Аналітика 
також дозволяє виявляти проблемні області і оперативно реагувати на них. 
Інтеграція штучного інтелекту стала важливим фактором у розвитку 
електронних навчальних ресурсів. Штучний інтелект використовується для 
створення адаптивних навчальних програм, автоматизації оцінювання і надання 
миттєвого зворотного зв'язку. Він також допомагає у створенні чат-ботів і 
віртуальних асистентів, які можуть надавати студентам підтримку і відповіді на 
запитання в режимі реального часу. 
Загалом, сучасні тенденції в електронних навчальних ресурсах 
відображають прагнення до більш гнучкого, інтерактивного і персоналізованого 
навчання. Електронні навчальні ресурси продовжують еволюціонувати, 
адаптуючись до нових технологій та потреб студентів, що робить їх важливим 
компонентом сучасної освіти. 
 
1.2 Доцільність розробки електронного навчального ресурсу з 
вебтехнологій 
 
У мережі Інтернет розміщено безліч дидактичних матеріалів і посібників, 
різних тренажерів й освітніх ресурсів, але деякі з них мають суттєві недоліки: 
 матеріали пропонуються в готовому вигляді, без можливості внесення змін, 
зазвичай вони складені до певного розділу або теми, а тому можливість їх 
використання до інших тем обмежена; 
 не завжди готові матеріали відповідають індивідуальним особливостям 
здобувачів освіти, структурі конкретної теми, тому в багатьох викладачів 
виникає бажання створювати власні інтерактивні матеріали, які б легко 
вписувалися в навчальний процес; 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 9 
  
 
 розробка власних інтерактивних матеріалів займає досить багато часу й 
іноді досить складна в технічному плані. 
Саме тому, використовуючи персональні освітні вебресурси можна суттєво 
підвищити ефективність освітнього процесу, активізувати навчально-пізнавальну 
та самостійну діяльність здобувачів освіти. 
Об’єкт дослідження – електронний навчальний ресурс з вебтехнологій. 
Предмет дослідження – клієнтська частина електронного навчального 
ресурсу і всі її аспекти, які включають архітектуру системи, вибір і налаштування 
технологій та інструментів, розробку фронтенду, інтеграцію з базою даних, а 
також ефективне функціонування клієнтської частини електронного навчального 
ресурсу з вебтехнологій. 
Для досягнення поставленої мети необхідно вирішити наступні завдання: 
– розглянути цілі, принципи, переваги застосування електронних 
навчальних ресурсів; 
– провести огляд існуючих електронних навчальних ресурсів з 
вебтехнологій; 
– визначити вимоги до електронного навчального ресурсу з вебтехнологій; 
– вибрати стек технологій для створення електронного навчального 
ресурсу з вебтехнологій; 
– спроектувати та реалізувати електронний навчальній ресурс з 
вебтехнологій. 
По-перше, в сучасному світі освіти існує значний попит на гнучкі та 
доступні форми навчання [1]. Електронні навчальні ресурси дозволяють 
студентам викладачам в будь-який час і з будь-якого місця, що особливо важливо 
в умовах зростаючої мобільності та потреби в неперервному навчанні. Це надає 
можливість охопити широку аудиторію, включаючи тих, хто не може відвідувати 
традиційні заняття через роботу, географічну віддаленість або інші обставини. 
По-друге, розробка такого ресурсу сприяє модернізації освітнього процесу, 
інтегруючи сучасні технології у навчання. Використання мультимедійних 
матеріалів, інтерактивних вправ і тестів робить навчальний процес більш цікавим 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис 10 
   Дата  
 
і ефективним, сприяє кращому засвоєнню знань і розвитку практичних навичок 
[9]. Такі ресурси також можуть швидко оновлюватися, забезпечуючи 
актуальність і відповідність сучасним вимогам. 
По-третє, електронні навчальні ресурси з вебтехнологій забезпечують 
рівний доступ до якісних навчальних матеріалів незалежно від місця проживання 
студентів. Це особливо важливо для забезпечення освітніх можливостей у 
віддалених та сільських районах, де доступ до традиційних освітніх закладів 
може бути обмеженим. 
Крім того, такий ресурс дозволяє значно покращити взаємодію між 
викладачами і студентами, а також між самими студентами. Форуми, чати, 
системи зворотного зв’язку та інші інтерактивні інструменти сприяють активній 
комунікації і обміну досвідом, що є важливим для ефективного навчання. 
Економічна ефективність також є вагомим аргументом. Хоча початкова 
розробка електронного навчального ресурсу може вимагати значних інвестицій, в 
подальшому його використання дозволяє знизити витрати на друк матеріалів, 
організацію традиційних занять і управління навчальним процесом. Це особливо 
актуально в умовах обмежених бюджетів освітніх установ. 
На додаток, розробка електронного навчального ресурсу сприяє розвитку 
цифрової грамотності студентів. Оволодіння вебтехнологіями і навичками роботи 
з електронними ресурсами є важливою складовою підготовки фахівців у багатьох 
галузях, що відповідає вимогам сучасного ринку праці. 
Таким чином, доцільність розробки електронного навчального ресурсу з 
вебтехнологій обґрунтована потребою в гнучких та доступних формах навчання, 
модернізацією освітнього процесу, забезпеченням рівного доступу до якісної 
освіти, покращенням комунікації, економічною ефективністю та розвитком 
цифрової грамотності. 
 
 
 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. 11 
  № Документа Підпис Дата  
 
1.3 Чинники, які впливають на розробку електронного навчального 
ресурсу з вебтехнологій 
 
У сучасному світі освіти, де цифрові технології відіграють все більшу роль, 
створення якісних електронних навчальних ресурсів стає ключовим завданням 
для освітніх установ і розробників. Розробка такого ресурсу включає не лише 
технічні аспекти, а й вимагає ретельного врахування багатьох інших чинників.  
Технічні вимоги та вибір платформ є основоположними для забезпечення 
стабільності та функціональності ресурсу. Це включає вибір програмних мов, 
фреймворків та бібліотек, які забезпечать стабільність і продуктивність ресурсу. 
Другий чинник – це змістове наповнення. Важливо забезпечити 
високоякісний контент, який включатиме текстові матеріали, відеоуроки, 
інтерактивні вправи та тести [5,6,10]. Контент повинен бути добре 
структурований, зрозумілий і відповідати навчальним цілям. Тут також важливо 
враховувати постійне оновлення матеріалів, щоб вони залишалися актуальними 
та корисними. 
Користувацький досвід є ще одним ключовим чинником. Дизайн і 
інтерфейс повинні бути інтуїтивно зрозумілими, зручними та естетично 
привабливими. Навігація по сайту повинна бути простою, забезпечуючи легкий 
доступ до всіх необхідних матеріалів. Крім того, ресурс має підтримувати 
інтерактивні функції, такі як форуми, чати та інші засоби для спілкування між 
студентами та викладачами. 
Забезпечення безпеки даних користувачів є критично важливим аспектом. 
Потрібно впровадити надійні заходи для захисту особистої інформації, даних про 
успішність та інших конфіденційних відомостей. Це включає використання 
протоколів шифрування, надійної аутентифікації та регулярне оновлення систем 
безпеки. 
Інтеграція з іншими системами та сервісами може значно підвищити 
функціональність ресурсу. Наприклад, можливість інтеграції з системами 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 12 
  
 
управління навчанням (LMS), платіжними системами та соціальними мережами 
може зробити ресурс більш зручним та універсальним. 
Також важливим чинником є зворотний зв’язок від користувачів. Регулярне 
отримання відгуків від студентів та викладачів дозволяє виявити недоліки та 
вдосконалити ресурс, орієнтуючись на потреби користувачів [7,9,11]. Це сприяє 
покращенню якості контенту та зручності використання платформи. 
Фінансові та часові обмеження також впливають на процес розробки. 
Визначення бюджету, розподіл ресурсів і управління проектом вимагають 
ретельного планування, щоб забезпечити вчасне і якісне завершення розробки. 
Нарешті, важливо враховувати юридичні та етичні аспекти, дотримуючись 
авторських прав на матеріали та забезпечуючи доступність ресурсу для всіх 
користувачів, включаючи людей з обмеженими можливостями. 
 
1.4 Аналітичний огляд існуючих електронних навчальних ресурсів з 
вебтехнологій 
 
У сучасному світі освіти, де цифрові платформи відіграють все більшу 
роль, вивчення успішних прикладів та розуміння їх сильних і слабких сторін стає 
ключовим завданням. Аналітичний огляд електронних навчальних ресурсів з 
вебтехнологій дозволить виявити найкращі практики, інноваційні підходи та 
технологічні рішення, які можуть бути адаптовані для власного проекту. 
Такий аналіз допоможе зрозуміти, які функції та сервіси є найбільш 
затребуваними серед користувачів, а також виявити можливі прогалини в 
існуючих ресурсах. Вивчення конкурентів надає цінну інформацію про те, як 
ефективно організувати контент, які методи взаємодії зі студентами 
використовувати і які інструменти забезпечують найкращі результати.  
Зрозуміння ринку і потреб користувачів дозволяє створити ресурс, який не 
лише відповідатиме сучасним вимогам, але й випереджатиме їх, пропонуючи 
інноваційні рішення та унікальні можливості. Аналітичний огляд також 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис 13 
   Дата  
 
допомагає визначити, як забезпечити конкурентоспроможність і привабливість 
ресурсу для різних цільових аудиторій.  
Існуючі електронні навчальні ресурси з вебтехнологій буде порівнювати за 
такими критеріями як користувацький досвід, дизайн, навігація, інтерактивність 
та мобільність. 
 
1.4.1 Електронний навчальний ресурс «Технології веб-розробки та 
дизайну»  
Електронний навчальний ресурс «Технології веб-розробки та дизайну»  
розроблений викладачами кафедри систем автоматизованого проектування 
Національного університету «Львівська політехніка» для підтримки викладання 
одноіменної навальної дисципліни для студентів другого курсу [12]. 
Сайт має досить простий і мінімалістичний дизайн, що дозволяє 
користувачам легко орієнтуватися без зайвих відволікаючих елементів. Текст на 
сайті добре читається завдяки достатньому контрасту між шрифтом і фоном, 
використанню чітких і зрозумілих шрифтів. Колірна гамма базова і не включає 
багатого спектру кольорів чи градієнтів, що могли б зробити сайт більш 
привабливим. Сайт майже не використовує зображення, відео чи інші 
мультимедійні елементи, що можуть покращити візуальне сприйняття і залучення 
користувачів. 
Навігаційне меню розташоване у верхній частині сайту і містить посилання 
на основні розділи, що робить навігацію інтуїтивно зрозумілою. 
Сайт має логічну структуру з чітко розділеними розділами, що дозволяє 
користувачам легко знайти потрібну інформацію. Використання міток і 
заголовків (H1, H2 тощо) допомагає швидко зорієнтуватися в змісті сторінок. 
Сайт не має вбудованої пошукової функції, що може ускладнити швидкий 
пошук конкретної інформації для користувачів. 
Сайт не є адаптивним, що створює незручності при перегляді на мобільних 
пристроях або різних розмірах екранів. Відсутність адаптивності може негативно 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 14 
  
 
вплинути на загальну зручність використання і доступність сайту для різних 
користувачів. 
На сайті відсутні явні ознаки дотримання стандартів доступності (WCAG), 
таких як можливість зміни розміру шрифту, альтернативні тексти для зображень 
тощо. 
Отже, з погляду ергономіки перевагами [12] є простота використання і 
логічна структура контенту, а до недоліків належить відсутність адаптивного 
дизайну, сучасних візуальних елементів, пошукової функції та інтерактивності. 
Щодо якості серверної та користувацької логіки цього навчального ресурсу, 
то він має: високу швидкість завантаження, завдяки простій структурі; потребує 
впровадження протоколу HTTPS, оптимізації мета-тегів і заголовків; 
оновлюється вручну; потребує інтеграції інструментів аналітики. 
 
1.4.2 Електронний навчальний ресурс «ДистОсвіта - дистанційне навчання 
інформатики»  
Електронний навчальний ресурс «ДистОсвіта - дистанційне навчання 
інформатики» розроблений для дистанційного вивчення інформатики. На сайті 
представлені усі теми шкільної інформатики, як з розділу інформаційних 
технологій, так і програмування. Матеріали можна використовувати як для 
повністю дистанційних уроків, так і змішаного навчання, поєднуючи із власними 
розробками та додатковими ресурсами. Сучасні методики та технології навчання 
підтримуються системою Moodle, яка забезпечує цілісне освітнє середовище 
поширення навчальних матеріалів, обміну виконаними завданнями із 
забезпеченням зворотного зв’язку, а також засоби спільної роботи та співпраці 
 
Інтерфейс ресурсу досить простий і зрозумілий. Основні елементи 
знаходяться на своїх місцях, що дозволяє швидко орієнтуватися на сторінці. 
Колірна гамма спокійна та професійна, використання білих просторів 
допомагає уникнути перевантаженості інформацією. Однак, загальний дизайн 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 15 
  
 
виглядає трохи застарілим і може виграти від оновлення відповідно до сучасних 
тенденцій вебдизайну. 
Текст на сайті добре читається завдяки чіткому контрасту між шрифтом і 
фоном. Шрифти вибрані вдало, і розмір тексту зручний для читання. 
Використання зображень, графіків або інших візуальних елементів 
мінімальне. Додавання більшої кількості візуальних підказок могло б зробити 
сторінку більш привабливою та інформативною. 
Весь контент логічно розбитий на розділи, що полегшує його сприйняття. 
Однак, використання списків та блоків тексту могло б покращити загальну 
читабельність. 
Навігаційне меню знаходиться у верхній частині сторінки, що є 
стандартним розташуванням. Однак, самі посилання могли б бути більш 
виділеними для зручнішої навігації. 
Посилання на інші сторінки або розділи легко доступні, що дозволяє 
користувачам швидко переходити між різними частинами сайту. 
Сайт має певну адаптивність, але деякі елементи можуть виглядати менш 
зручними на мобільних пристроях. Перевірка на різних пристроях показує, що 
деякі елементи можуть не відображатися коректно. 
Виглядає, що сайт не повністю відповідає стандартам доступності WCAG. 
Наприклад, відсутність альтернативних текстів для зображень або можливість 
збільшення тексту може створювати труднощі для користувачів з обмеженими 
можливостями. 
Відсутність інтерактивних елементів, таких як форми зворотного зв’язку, 
коментарі або інтерактивні вправи, знижує рівень залучення користувачів. 
Немає очевидних способів для користувачів залишити зворотний зв’язок 
або оцінити контент, що ускладнює збір даних для покращення сайту. 
У результаті огляду технічних аспектів реалізацій цього електронного 
ресурсу встановлено: 
– сайт здебільшого побудований з використанням HTML та CSS для 
відображення контенту та стилізації; 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 16 
  
 
– сайт працює на платформі Moodle, яка забезпечує систему управління 
навчанням та навчальні матеріали; 
– час завантаження сторінки може бути різним залежно від регіону та 
швидкості Інтернет-з’єднання користувача; 
– бажано використовувати оптимізовані зображення та ресурси для зниження 
часу завантаження; 
– важливо мати SSL-сертифікат для забезпечення захищеного з’єднання між 
сервером та браузером користувача. 
 
1.4.3 Електронний навчальний ресурс «CSE 154: Web Programming»  
Електронний навчальний ресурс «CSE 154: Web Programming»  
розроблений для підтримки викладання навчальної дисципліни 
«Вебпрограмування» в Університеті Вашингтону [14]. 
Інтерфейс сайту, на якому розміщено курсу CSE 154, має класичний 
академічний дизайн, орієнтований на зручність і ефективність доступу до 
навчальних матеріалів. Вгорі сторінки розташоване горизонтальне меню, яке 
містить основні розділи курсу, такі як домашні завдання, розклад занять, ресурси 
та інші важливі матеріали. Це меню забезпечує швидкий перехід між розділами, 
дозволяючи користувачам легко знаходити потрібну інформацію. 
Головна сторінка містить привітальне повідомлення і короткий опис курсу, 
що допомагає студентам орієнтуватися в змісті і цілях навчальної програми. 
Дизайн сторінки виконується в спокійних кольорах, що сприяє комфортному 
сприйняттю інформації. 
Контент розміщується в основному блоці сторінки, де представлена 
основна інформація курсу, включаючи лекційні матеріали, завдання та інші 
ресурси. Текстовий контент добре структурований, з використанням заголовків, 
підзаголовків і маркованих списків для полегшення навігації та читання. 
На сторінці також є бічна панель, яка містить додаткові посилання та 
ресурси, що можуть бути корисними для студентів. Це дозволяє швидко 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. 17 
  № Документа Підпис Дата  
 
доступати до допоміжних матеріалів та інструментів, необхідних для успішного 
засвоєння курсу. 
Загалом, інтерфейс сайту є простим і функціональним, що забезпечує 
зручний доступ до всіх необхідних навчальних матеріалів та ресурсів для 
студентів курсу CSE 154. 
Щодо функціонування та реалізації сайту, варто відзначити наступні 
аспекти. По-перше, сайт побудований за допомогою стандартних вебтехнологій, 
таких як HTML, CSS і JavaScript. HTML використовується для структурування 
контенту, CSS – для стилізації і оформлення сторінок, а JavaScript – для додавання 
інтерактивності та динамічних елементів. Це забезпечує сумісність сайту з 
різними браузерами і пристроями. 
Сайт, ймовірно, використовує систему управління контентом (CMS), яка 
дозволяє викладачам і адміністраторам легко додавати і редагувати матеріали без 
потреби в глибоких технічних знаннях. CMS спрощує процес оновлення 
інформації і підтримки сайту в актуальному стані. 
Для забезпечення швидкого завантаження і оптимальної продуктивності на 
сайті використовується кешування і оптимізацію зображень, що дозволяє 
зменшувати розмір файлів, стискати ресурси і використовувати сучасні формати 
зображень. 
Сайт використовує протокол HTTPS для захисту даних, що передаються 
між сервером і користувачем. Це забезпечує шифрування і захист від можливих 
атак. 
 
1.4.4 Електронний навчальний ресурс «Веб-технології» 
Електронний навчальний ресурс «Веб-технології» створений працівниками 
опорного закладу середньої освіти на платформі Google Sites з метою підтримки 
вивчення дисципліни інформатики [15]. 
Електронний начальний ресурс виконаний в пастельних тонах класичного 
стилю, має зручний, зрозумілий інтерфейс. На головній сторінці сайту розміщені 
назви розділів, які відображають основні аспекти діяльності закладу, а також є 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 18 
  
 
рядок для пошуку інформації. Всі елементи інтерфейсу розташовані логічно та 
доступно, що дозволяє користувачам швидко знаходити потрібні функції. 
Інформація на електронному ресурсі «Веб-технології» розміщена лише 
українською мовою, а мовна панель та панель соціальних мереж взагалі відсутні. 
Разом з тим, наявні  посилання на підручники, квести, гуртки, інформаційні 
ресурси. 
Контактна інформація та форма зворотного зв’язку на сайті відсутня. 
Контент сайту оновлюється постійно. 
Оскільки Google Sites автоматично оптимізує сайти для мобільних 
пристроїв, то електронний навчальний ресурс «Веб-технології» гарно виглядає  та 
функціонує на смартфонах та планшетах. 
Управління доступом до сайту здійснюється через налаштування прав 
користувачів, де визначено, хто може переглядати, редагувати або адмініструвати 
сайт. Це забезпечує гнучкість у керуванні правами доступу та безпеку контенту. 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 19 
  
 
РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ 
 
 
2.1 Призначення електронного навчального ресурсу з вебтехнологій 
 
Ефективність самостійного навчання визначається переважно якістю 
навчальних матеріалів, а також контролем за роботою і спілкуванням з 
викладачем [7]. Як наслідок, розвиток самостійного навчання насамперед був 
обумовлений впровадженням новітніх інформаційних технологій і засобів 
комунікації. Завдяки еволюції в цьому напрямку, сучасне дистанційне навчання 
стало сучасною формою освіти, яка інтегрує елементи всіх видів навчання 
(очного, вечірнього, заочного) на основі використання новітніх комп’ютерних і 
телекомунікаційних технологій. 
Електронні навчальні ресурси відзначаються мобільністю, доступністю і 
прозорістю, забезпечуючи сучасний та інноваційний зміст освітнього процесу. 
Основною метою створення електронних навчальних ресурсів є модернізація 
системи освіти, наповнення освітнього простору змістовними матеріалами, а 
також забезпечення рівного доступу учасників навчального процесу до якісних 
навчальних та методичних ресурсів незалежно від їхнього місця проживання чи 
форми навчання [5, 9, 11]. 
На цінність електронного навчального ресурс з вебтехнологій вказують 
наступні аспекти: 
1. Надання доступу до освіти широкому колу людей, незалежно від їх місця 
проживання або доступних ресурсів. Люди можуть навчатися власним 
темпом, в будь-який час та в будь-якому місці. 
2. Розширення знань і навичок різних категорій населення завдяки охопленню 
різних предметів (UX design, графічний дизайн, frontend розробка, backend 
розробка). Електронний навчальний ресурс допомагає всім охочим 
розвиватися в обраних напрямах, навіть якщо вони не мають можливості 
відвідувати традиційні заклади освіти. 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 20 
  
 
3. Адаптація до потреб і рівня знань кожного конкретного студента завдяки 
швидкій зміні структури курсу шляхом введення чи виведення навчальних 
елементів (практичні задачі, симуляції, інтерактивні вправи, тестування ), 
що допомагає в засвоєнні матеріалу. 
4. Отримання необхідної освіти за короткий час завдяки декомпозиції 
навчальних матеріалів на менші складові частини та використанню 
інтерактивних методів навчання. 
5. Розвиток навичок співпраці та комунікації. 
Усі вказані аспекти сприяють поліпшенню доступності та якості освіти, а 
також розширенню можливостей для навчання для різних категорій людей. 
 
2.2 Вимоги до дизайну електронного навчального ресурсу з 
вебтехнологій 
 
У сучасному світі освіта все більше інтегрується з інформаційними 
технологіями, що відкриває нові можливості для покращення якості навчального 
процесу. Метою цього проекту є розробка електронного навчального ресурсу з 
вебтехнологій, який забезпечить студентам та викладачам доступ до 
високоякісних навчальних матеріалів, незалежно від їхнього місця проживання та 
форми навчання. 
На початковому етапі розробки електронного навчального ресурсу з 
вебтехнологій сформуємо базові вимоги. Основні завдання полягають у 
забезпеченні доступності, зручності використання, безпеки та інтерактивності 
навчального процесу. Прагнемо створити інноваційний продукт, який буде 
відповідати сучасним стандартам якості та стане корисним інструментом для 
навчання та викладання вебтехнологій. 
До основних вимог до дизайну електронного навчального ресурсу з 
вебтехнологій належать: 
1. Доступність. Забезпечити, щоб веб-сайт був доступний для всіх 
користувачів, включаючи тих, хто має обмеження у зорі, слуху або фізичні 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 21 
  
 
обмеження. Наприклад, забезпечити можливість змінювати розмір шрифту 
та використовувати схеми кольорів, які підходять для людей з вадами зору. 
2. Відповідність з різними пристроям. Електронний навчальний ресурс 
повинен бути адаптивним та реагувати на різні типи пристроїв, включаючи 
комп’ютери, планшети та смартфони. Важливо забезпечити зручне 
користування на різних розмірах екранів. 
3. Простота навігації. Зробити навігацію по сайту простою та легкою для 
розуміння. Забезпечити чіткі меню, структуровані категорії та швидкі 
засоби пошуку. 
4. Зручність використання. Впевнитися, що інтерфейс користувача є 
інтуїтивно зрозумілим та простим у використанні. Електронний навчальний 
ресурс повинен бути приємним для взаємодії та забезпечувати швидкий 
доступ до потрібної інформації. 
5. Відповідність стандартам безпеки та конфіденційності. Забезпечити захист 
особистих даних користувачів та відповідність вимогам щодо безпеки в 
Інтернеті. 
6. Підтримка візуальних елементів. Використовувати візуальні елементи, такі 
як графіки, відео та анімація, щоб поліпшити розуміння матеріалу та 
збільшити зацікавленість користувачів. 
7. Підтримка соціальної взаємодії. Дозволяти користувачам обговорювати 
матеріали, співпрацювати над проектами та ділитися знаннями з іншими 
користувачами. 
Означені вимоги допоможуть забезпечити ефективну та приємну взаємодію 
користувачів з електронним навчальним ресурсом. 
 
2.3 Структура сервера та сторінок електронного навчального ресурсу з 
вебтехнологій 
 
Фізична та логічна структура сайту є важливими аспектами його 
архітектури, які визначають, як зберігається, організується і взаємодіє контент. 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 22 
  
 
Фізична структура сайту стосується його фізичного розташування на 
сервері та технологій, які використовуються для його розміщення і 
функціонування. Вона включає сервери, на яких розташовані файли сайту, бази 
даних, де зберігаються дані користувачів і контент, та мережеву інфраструктуру, 
яка забезпечує доступ до сайту через Інтернет. Сайт може бути розташований на 
одному сервері або розподілений між кількома серверами для покращення 
продуктивності і надійності. Важливими аспектами фізичної структури є 
резервне копіювання даних, забезпечення безпеки і відмовостійкість системи. 
 
 
Рисунок 2.1 – Фізична структура електронного навчального ресурсу з 
вебтехнологій 
 
Логічна структура сайту відноситься до організації та взаємозв'язку його 
контенту та функціональних компонентів. Вона включає навігаційне меню, яке 
допомагає користувачам знайти потрібну інформацію, ієрархію сторінок, де 
головні сторінки можуть містити посилання на підсторінки, а також взаємозв'язки 
між різними типами контенту. Логічна структура визначає, як користувачі 
взаємодіють з сайтом, переходять від однієї сторінки до іншої і знаходять 
необхідну інформацію. 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис 23 
 Дата  
 
Розробка логічної структури починається з визначення основних розділів 
сайту, таких як домашня сторінка, сторінки з інформацією про компанію або 
продукт, блог, контактна інформація та інші важливі розділи. Кожен розділ може 
містити підрозділи, що забезпечує глибшу деталізацію та легший доступ до 
інформації. Навігаційне меню, яке часто розміщується у верхній частині сайту 
або збоку, служить основним засобом переміщення між розділами. 
 
Рисунок 2.2 – Логічна структура електронного навчального ресурсу з 
вебтехнологій 
 
Інтеграція фізичної та логічної структури забезпечує злагоджену роботу 
сайту. Наприклад, файли вебсторінок зберігаються на сервері відповідно до 
логічної структури, що дозволяє вебсерверу швидко знайти та надати необхідні 
файли на запит користувача. Бази даних, де зберігається контент, також 
організовані логічно, що полегшує доступ до інформації та її управління. 
Загалом, фізична та логічна структура сайту працюють разом, 
забезпечуючи його функціонування, зручність використання та ефективність. 
Вони грають ключову роль у створенні позитивного користувацького досвіду та 
забезпеченні надійної роботи вебресурсу. 
 
 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис 24 
 Дата  
 
2.4 Навігація електронного навчального ресурсу з вебтехнологій 
 
Ефективна навігація є ключовим аспектом будь-якого електронного 
навчального ресурсу з вебтехнологій, оскільки вона допомагає користувачам 
легко знаходити потрібну інформацію та переходити між різними сторінками.  
При розробці електронного навчального ресурсу з вебтехнологій 
планується використання декількох видів та форм навігаційного меню та 
переходів між сторінками: 
1. Горизонтальне меню: 
o Розташоване зазвичай вгорі сторінки. 
o Містить посилання на основні розділи або категорії ресурсу, такі як 
«Головна», «Напрями», «Навчальні матеріали» тощо. 
2. Меню бургер: 
o Розташоване зазвичай вгорі або збоку сторінки у вигляді іконки з 
трьома горизонтальними лініями. 
o Відкривається або закривається при кліку, показуючи основні розділи 
або категорії ресурсу. 
3. Список посилань в кінці сторінки: 
o Містить посилання на додаткові сторінки, такі як «Про нас», 
«Політика конфіденційності», «Зворотній зв’язок» тощо. 
o Зручно для користувачів, які дійшли до кінця сторінки і хочуть 
перейти до іншої частини ресурсу. 
4. Пошукове поле: 
o Дозволяє користувачам швидко знаходити потрібну інформацію або 
курс, введенням ключових слів або фраз. 
o Може бути розташоване вгорі або збоку сторінки. 
5. Посилання всередині тексту: 
o Використовуються для переходу до інших сторінок або розділів, які 
пов'язані з вмістом тексту. 
o Допомагають користувачам детальніше досліджувати тему. 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 25 
    
 
6. Переходи між сторінками: 
o Посилання на інші сторінки або розділи можуть бути розташовані на 
кожній сторінці, дозволяючи користувачам швидко переходити між 
ними. 
o Кнопки «Назад» та «Вперед» дозволяють переміщатися по історії 
перегляду. 
Ефективне використання цих видів навігації допоможе користувачам легко 
знаходити інформацію та переходити між різними частинами електронного 
навчального ресурсу. 
 
2.5 Наповнення сторінок електронного навчального ресурсу з 
вебтехнологій 
 
Наповнення контентом електронного навчального ресурсу з вебтехнологій 
включає в себе кілька ключових елементів, які забезпечують якісний навчальний 
процес та інтерактивність для користувачів. На головній сторінці ресурсу 
розміщується основна інформація про доступні курси, їх зміст, цілі, а також 
методологію навчання. Це допомагає студентам зрозуміти, що вони можуть 
очікувати від кожного курсу та як він впишеться в їх навчальний шлях. 
Навчальні матеріали є основною ресурсу. Вони включають лекції у вигляді 
текстів, презентацій та відеоуроків. Аудіозаписи лекцій додають додаткову 
гнучкість, дозволяючи студентам слухати матеріал у зручний для них час. 
Інтерактивні вправи та тести дозволяють студентам перевірити свої знання та 
закріпити матеріал, який вони вивчили. 
Поглиблювати свої знання студентам допомагають додаткові ресурси, такі 
як посилання на статті, книги та інші веб-сайти. Підказки та рекомендації щодо 
додаткової літератури та ресурсів дозволяють розширити зміст навчання за 
межами базового курсу. 
Для самостійної роботи студенти отримують домашні завдання та проекти, 
які дають їм можливість застосувати отримані знання на практиці. Викладачі 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 26 
  
 
можуть надавати коментарі та поради щодо виконання завдань, що сприяє більш 
глибокому розумінню матеріалу. 
Обговорення та форуми грають важливу роль у підтримці спільноти. 
Студенти можуть обговорювати матеріали курсу з викладачами та іншими 
учасниками, обмінюватися думками та досвідом. Це створює інтерактивне 
навчальне середовище, де студенти можуть отримувати відповіді на свої питання 
та допомагати один одному. 
Система підтримки та зворотного зв'язку забезпечує користувачам 
можливість отримати допомогу у разі виникнення питань чи проблем. Контактна 
інформація та механізми зворотного зв'язку дозволяють студентам висловлювати 
свої думки щодо якості курсів та пропонувати поліпшення. 
Профілі користувачів дозволяють студентам відстежувати свій прогрес у 
навчанні. У профілях відображаються досягнення, що стимулює студентів до 
подальшого навчання і самовдосконалення. 
Для наповнення сторінок електронного навчального ресурсу з 
вебтехнологій потрібно створити вміст, який буде інформативним, цікавим та 
корисним для користувачів. Декілька ідей щодо наповнення різних сторінок: 
1. Головна сторінка: 
o Короткий опис ресурсу та його місія. 
o Загальний огляд доступних напрямів та їх категорій. 
o Привабливі візуальні елементи, такі як зображення або відео, щоб 
привернути увагу користувачів. 
2. Сторінка з теоретичними матеріалами: 
o Список тем напряму навчання з описом кожного з них. 
o Відео чи презентації, які введуть користувача в зміст теми. 
3. Сторінка з практичними заняттями: 
o Список тем для практичних занять. 
o Файли із текстовим описом завдань до практичного заняття з 
ключовими пунктами та прикладами. 
o Відео-пояснення або анімації, що ілюструють складні концепції. 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 27 
  
 
o Інтерактивні завдання чи тести для перевірки зрозуміння навчального 
матеріалу. 
4. Система авторизації та реєстрації: 
o Форма реєстрації нових користувачів з обов'язковими полями, такими 
як ім'я, електронна пошта та пароль. 
o Форма входу для існуючих користувачів з можливістю відновлення 
паролю. 
5. Система оцінювання та зворотного зв'язку: 
o Тести та завдання для оцінювання знань студентів. 
o Система зворотного зв'язку, щоб студенти могли задавати питання 
викладачам та отримувати відповіді. 
6. Модуль адміністрування: 
o Інтерфейс для додавання, редагування та видалення напрямів та 
навчальних тем. 
o Список зареєстрованих користувачів та їх прогрес навчання. 
7. Безпека та конфіденційність: 
o Політика конфіденційності та умови використання. 
o Заходи безпеки для захисту особистих даних користувачів. 
Таким чином, контент електронного навчального ресурсу з вебтехнологій 
створює цілісне, інтерактивне та гнучке навчальне середовище, яке підтримує всі 
аспекти навчального процесу. 
 
2.6 Адміністрування електронного навчального ресурсу з вебтехнологій 
 
Для адміністрування електронного навчального ресурсу з вебтехнологій 
буде використана система управління контентом WordPress, через яку можна 
керувати різними аспектами ресурсу. На систему адміністрування WordPress буде 
покладено виконання таких функцій як: керування навчальними напрямами, 
керування навчальними матеріалами, управління користувачами, оцінювання, 
підтримка зворотного зв’язку, забезпечення безпеки та конфіденційності. 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 28 
  
 
Адміністрування електронного навчального ресурсу за допомогою 
WordPress включає кілька ключових аспектів, які забезпечують ефективне 
управління контентом та користувачами. WordPress пропонує зручний інтерфейс 
для додавання та редагування напрямів навчання. Кожен курс можна 
організувати в окремі модулі та заняття, що робить навігацію легкою як для 
менторів, так і для студентів. Використовуючи плагіни, такі як LearnDash або 
LifterLMS, можна додати різноманітні функціональні можливості, включаючи 
інтерактивні тести, сертифікацію після завершення курсу та відстеження 
прогресу студентів [16]. 
Управління користувачами також є важливим елементом адміністрування. 
В адмінпанелі WordPress можна створювати та редагувати профілі користувачів, 
призначати ролі та права доступу [17]. Це дозволяє, наприклад, обмежувати 
доступ до певних матеріалів лише для зареєстрованих користувачів або груп 
студентів, а також надавати менторам можливість редагувати лише свої напрями 
чи ресурси. 
Публікація та організація контенту здійснюється через стандартний 
редактор WordPress або спеціалізовані плагіни для управління навчальним 
контентом [18, 19]. Важливим аспектом є використання мультимедійних файлів – 
відео, аудіо, зображень, які можна легко завантажувати та вбудовувати в заняття, 
роблячи їх більш інтерактивними та цікавими. 
Завдяки вбудованим аналітичним інструментам та плагінам можна 
відстежувати активність користувачів на сайті, аналізувати відвідуваність 
сторінок, тривалість сесій та успішність проходження курсів. Це допомагає 
викладачам і адміністраторам розуміти, які частини курсу найбільш ефективні, а 
які потребують доопрацювання. 
Забезпечення безпеки є ще одним критичним аспектом адміністрування. 
WordPress пропонує різні плагіни для захисту даних користувачів, резервного 
копіювання сайту та запобігання несанкціонованому доступу [20]. Регулярні 
оновлення плагінів та самого ядра WordPress допомагають підтримувати високий 
рівень безпеки. 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 29 
   
 
Налаштування інтеграцій з іншими сервісами, такими як системи оплати, 
поштові сервіси або соціальні мережі, здійснюється через відповідні плагіни або 
API. Це дозволяє автоматизувати процеси реєстрації, оплати курсів, відправлення 
сповіщень та інших взаємодій зі студентами. 
Завдяки гнучкості та масштабованості WordPress адміністратори 
електронного навчального ресурсу можуть легко адаптувати сайт до потреб 
навчального процесу, забезпечуючи при цьому високу якість та доступність 
освітніх матеріалів для всіх користувачів. 
 
2.7 Вимоги до прототипу електронного навчального ресурсу з 
вебтехнологій 
 
Прототип електронного навчального ресурсу з є ключовим етапом, що 
дозволяє візуалізувати та тестувати основні функціональні можливості 
платформи до її повного впровадження. 
Створення прототипу включає визначення структури та дизайну 
платформи, інтеграцію мультимедійних матеріалів, таких як відео, аудіо та 
інтерактивні вправи, а також розробку механізмів для контролю та оцінювання 
знань студентів. Це дозволяє отримати уявлення про те, як користувачі 
взаємодіятимуть із системою, і які можливі поліпшення можна внести на ранніх 
стадіях розробки. 
Прототип допомагає визначити ключові компоненти системи управління 
навчальним процесом. Прототип охоплює створення та управління навчальними 
напрямами, призначення ролей та прав доступу для викладачів і студентів, а 
також налаштування комунікаційних інструментів, таких як форуми, чати та 
системи зворотного зв’язку [21, 22]. Використання прототипу дозволяє тестувати 
різні сценарії взаємодії, забезпечуючи, щоб кінцевий продукт був інтуїтивно 
зрозумілим та зручним у використанні. 
Крім того, прототипування допомагає у виявленні технічних вимог і 
можливих проблем, таких як забезпечення безпеки даних користувачів, 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 30 
  
 
інтеграція з іншими системами та масштабованість платформи [23, 24]. Прототип 
також дозволяє оцінити продуктивність системи та її здатність обробляти 
великий обсяг користувачів та даних. 
Важливим аспектом є також зворотний зв’язок від потенційних 
користувачів. Залучення студентів та викладачів до тестування прототипу 
дозволяє отримати цінні відгуки, які можна використовувати для покращення 
функціональності та зручності ресурсу. Цей підхід забезпечує, що кінцевий 
продукт буде відповідати очікуванням та потребам користувачів. 
Сформуємо вимоги до прототипу електронного навчального ресурсу з 
вебтехнологій: 
1. Домашня сторінка (Головна сторінка): 
o Наявність зручного та привабливого дизайну, який відображає 
основні функції ресурсу та залучає увагу користувачів. 
o Загальний огляд доступних курсів або матеріалів навчання. 
2. Сторінка з теоретичним матеріалом: 
o Назви теоретичних занять з вказівкою тем та завдань. 
o Посилання на додаткові ресурси або матеріали, які можуть бути 
корисними для студентів. 
3. Сторінка з практичними заняттями: 
o Вміст практичного заняття з текстом, графікою, відео або іншими 
мультимедійними елементами. 
o Відповідні завдання або тести для перевірки засвоєння матеріалу. 
o Можливість взаємодії студентів з викладачем чи іншими студентами 
(наприклад, через форуми або чат). 
4. Система авторизації та реєстрації: 
o Можливість реєстрації нових користувачів та авторизації існуючих. 
o Збереження особистих даних користувача та прогресу навчання. 
5. Система оцінювання та зворотного зв’язку: 
o Механізми для оцінювання робіт студентів та надання їм зворотного 
зв'язку. 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 31 
  
 
o Відстеження прогресу навчання та видача сертифікатів чи 
підтверджень. 
6. Модуль адміністрування: 
o Інтерфейс для викладачів або адміністраторів для керування 
навчальними напрямами, матеріалами та студентами. 
o Можливість додавати, редагувати та видаляти вміст. 
7. Забезпечення коректного відображення та функціональності на різних 
типах пристроїв, від комп’ютерів до мобільних телефонів. 
8. Захист особистих даних користувачів та надійність системи передачі 
інформації. 
Розробка прототипу електронного навчального ресурсу з вебтехнологій є 
важливим інструментом для досягнення високої якості кінцевого продукту. Він 
забезпечує основу для подальшого розвитку та вдосконалення, орієнтованого на 
сучасні освітні стандарти та вимоги, сприяючи більш ефективному та 
інтерактивному навчальному процесу. 
 
2.8 Техніко-економічне обґрунтування доцільності розробки 
електронного навчального ресурсу з вебтехнологій 
 
2.8.1 Визначення трудомісткості розробки електронного навчального 
ресурсу з вебтехнологій 
Нормування праці в процесі створення електронного навчального ресурсу 
істотно ускладнено в силу творчого характеру праці розробника. Тому 
трудомісткість розробки електронного навчального може бути розрахована на 
основі системи моделей з різною точністю оцінки. 
Трудомісткість розробки електронного навчального ресурсу розрахуємо за 
формулою [25] 
 t = t +tи +tа +tп +tотл +tд ,o  людино-годин, (2.1) 
де   to  – витрати  праці на  підготовку  й  опис  поставленої  задачі;  
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 32 
  
 
tи  –  витрати праці на дослідження підходів до рішення задачі;  
tа  –  витрати праці на проектування електронного навчального ресурсу;  
tп  –  витрати праці на написання програмного коду на основі спроектованих 
поглядів;  
tотл  –  витрати праці на тестування електронного навчального ресурсу;  
tд  –  витрати праці на підготовку документації. 
Складові витрати праці визначаються через умовне рядків коду в 
проектованій системі, які необхідно написати в процесі роботи над електронним 
навчальним ресурсом з урахуванням можливих уточнень в постановці задачі і у 
вдосконаленні.  
Умовне число команд в програмному коді: 
 Q = q C  1+ p 1700 1,19  1 0,1 2225,3,  (2.2) 
де   q  –  коефіцієнт, що враховує умовне число рядків коду залежно від типу 
задачі, оскільки електронний навчальний ресурс з вебтехнологій 
призначений для розв’язання просвітницьких задач, тому приймаємо 
q 1700 ;  
C  – коефіцієнт складності програмного коду, який визначає відносну 
складність системи по відношенню до типової системи, складність якої 
прийнята на рівні 1, C 1,19  (програмний продукт за ступенем новизни 
належить до групи Б – розробка програм з використанням типових рішень, 
за ступенем складності до групи 2 – завдання накопичення, звітності та 
статистики);  
p  – коефіцієнт корекції програмного коду, який визначається в ході його 
розробки через збільшення об’єму робіт за рахунок внесення змін в проект 
або програмний код, p  0,1  (величина p  знаходиться в межах 0.05...0.1, 
що відповідає внесенню 3...5 корекцій, що спричиняють за собою 
переробку 5...10 % готового програмного коду). 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 33 
  
 
Витрати праці на дослідження підходів до рішення задачі tu  визначається з 
урахуванням уточнення опису і кваліфікації програміста: 
Q B 2225,3 0,7
 t =   24,34,  людино-годин,  (2.3) 
u
( 75..85)  k 80 0,8
де      B  – коефіцієнт  збільшення  витрат   праці   внаслідок   недостатнього   
опису задачі, B  0,7 ;  
k  – коефіцієнт кваліфікації програміста, що залежить від стажу роботи з 
даної спеціальності, k  0,8  (стаж програміста становить до 2-х років). 
Витрати праці на проектування електронного навчального ресурсу: 
Q 2225,3
 t =  126,44  людино-годин. (2.4) 
a
( 2025 )  k 22 0,8
Витрати на написання програмного коду на основі спроектованих поглядів: 
Q 2225,3
 t =  115,90  людино-годин. (2.5) 
п
( 2025 )  k 24 0,8
Витрати праці на тестування електронного навчального ресурсу з 
вебтехнологій: 
за умови автономного налагодження одного модуля: 
Q 2225,3
 t =   556,33  людино-годин; (2.6) 
отл
( 4..5 )  k 5 0,8
за умови віддаленого розгортання всього електронного навчального ресурсу з 
вебтехнологій: 
k
 tотл =1,5  tотл1,5 556,33  834,49 людино-годин. (2.7) 
Витрати праці на підготовку документації: 
 tд = tдр +tдо154,53115,90  270,43 людино-годин, (2.8) 
де tдр  – трудомісткість підготовки матеріалів і рукопису 
Q 2225,3
 t =  154,53 людино-годин, (2.9) 
др
(15..20 )  k 18 0,8
tдо  – трудомісткість редагування, друку й оформлення документації 
 tдо = 0,75  tдр  0,75 154,53 115,90  людино-годин. (2.10) 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 34 
  
 
t = 24,34126,44115,90834,49 270,43 1371,60.  
 
2.8.2 Очікуваний період створення електронного навчального ресурсу з 
вебтехнологій 
Очікуваний період створення електронного навчального ресурсу з 
вебтехнологій 
t 1327,60
 T =   7,5  місяця, (2.11) 
B F 1176
k p
де  B
k  – число виконавців;  
F  – місячний фонд робочого часу (при 40 годинному робочому тижні F 
p p
176 годин). 
 
2.8.3 Розрахунок витрат на оплату праці виконавця зі створення 
електронного навчального ресурсу з вебтехнологій 
Витрати на заробітну плату ЗП складаються з основної заробітної плати 
спеціаліста-програміста, додаткової заробітної плати та відрахувань на соціальні 
заходи (обов’язкове соціальне страхування, фонд зайнятості та державне 
пенсійне страхування) за весь період роботи над ІТ-продуктом [26]: 
 ЗП  Зосн  Здод  Зсоц , грн.,  (2.12) 
де Зосн  – основна заробітна плата, грн.;  
Здод  – додаткова заробітна плата, розрахована як відсоток від основної 
заробітної плати: 
З З К
  осн дод
дод ,  грн.,  (2.13) 
100
де  Кдод  – відсоток додаткової заробітної плати, %;  
Зсоц  – відрахування на соціальні заходи від основної та додаткової 
заробітної плати (18% податку на доходи фізичних осіб (ПДФО) та 1,5% 
військового збору (ВЗ)): 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 35 
  
 
К
 Зсоц  З соц
осн  Здод  ,  грн. (2.14) 
100
Для розрахунку основної заробітної плати доцільно використати просту 
погодинну форму заробітної плати, яка є добутком фактично відпрацьованого 
часу та погодинної тарифної ставки 
n
 Зосн  t C K ,
i i c  грн., (2.15) 
1
де n  – число робіт за видами та розрядами;  
t  – норма часу (трудомісткість) на виконання конкретної роботи, годин;  
K
c  – коефіцієнт співвідношень, який установлений  Генеральною  
тарифною угодою між урядом і профспілками, K 15 K 1,78
c c ;  
C
i  – погодинна  тарифна ставка робітника відповідного розряду, який 
виконує дану роботу, яка визначається за формулою: 
M K
 C  m i ,
i  грн./годину,  (2.16) 
T T
p зм
де M
m  – мінімальна місячна оплата праці, грн. ( M 8000
m  грн.);  
K
i  – тарифний коефіцієнт робітника відповідного розряду K 1,36; 
T  – число робочих днів в місяці; приблизно T = 21 день; 
p p
Tзм – тривалість зміни, зазвичай Tзм = 8 годин. 
Розрахунок основної заробітної плати зведемо до табл. 2.1. 
 
Таблиця 2.1 Розрахунок основної заробітної плати 
Погодинна 
Найменування робіт Трудомісткість, Оплата праці, 
 людино-годин тарифна 
 ставка, грн. грн. 
 
Витрати на дослідження підходів до 
рішення задачі 24,34 64,76 1576,26 
 
Витрати на проектування 
електронного навчального ресурсу 126,44 64,76 8188,25 
 
 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 36 
   
 
Продовження табл. 2.1 
Найменування робіт Трудомісткість, Погодинна 
 людино годин тарифна Оплата праці, 
-  ставка, грн. грн. 
 
Витрати на написання програмного 
коду 115,90 64,76 7505,68 
 
Витрати на тестування  834,49 64,76 54041,57 
Витрати на підготовку документації 270,43 64,76 17513,05 
Загальна трудомісткість, людино-годин 1327,60 
Сума основної заробітної плати, грн. 88824,82 
 
Додаткова заробітна плата всіх робітників, які приймали участь у розробці 
програмного продукту, розрахована як 20% від основної заробітної плати всіх 
робітників (17764,96 грн. ) 
Здод 17764,96  грн. 
Загальна сума заробітної плати є об’єктом для обчислення відрахувань на 
соціальні заходи. Разом відрахування на соціальні заходи становлять 41,5 % від 
суми заробітної плати (106589,78 грн.). 
Зсоц  44234,76  грн. 
ЗП  88824,82 17764,96  44234,76 150824,54  грн. 
 
Розрахунок матеріальних витрат на створення електронного навчального ресурсу 
з вебтехнологій 
До матеріальних витрат Вм  на створення програмного продукту можуть 
бути віднесені різноманітні витратні матеріали. Розрахунки можна представити у 
вигляді табл. 2.2. 
 
Таблиця 2.2 Розрахунок матеріальних витрат 
№ Найменування Од. 
з/п  виміру Кількість Ціна, грн. Сума, грн. 
  
Флеш пам’ять USB Kingston 
1 шт. 1 589,00 589,00 
DataTraveler Kyson 128GB  
 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 37 
  
 
Продовження табл. 2.2 
№ 
з/п Найменування Од. 
 виміру Кількість Ціна, грн. Сума, грн. 
  
Папір офісний IQ Premium А4 
2 80 г/м2 клас А 500 аркушів уп. 3 198,00 594,00 
 
Ручка кулькова Buromax 8202 
3 автоматична синя шт. 3 12,51 37,53 
 
Ручка кулькова Buromax 8202 
4 автоматична чорна шт. 3 12,51 37,53 
 
Реєстратор «Donau» Master 
5 A4/70 синій шт. 3 156,08 468,24 
 
Файл А4 Buromax 
6 50мкм100шт уп. 1 119,00 119,00 
 
Канцелярська книга «Місто» 
7 А4, клітинка, 96 л. шт. 1 104,86 104,86 
 
8 Тонер Canon, 120 г фл. 1 334,00 334,00 
 Разом  2284,16 
 
 
2.8.5 Розрахунок амортизаційних відрахувань 
Розрахунок суми амортизації основних фондів та нематеріальних активів 
Aв   виконується на основі даних про вартість технічного та необхідного 
програмного забезпечення, діючих норм амортизаційних відрахувань та кількості 
програмних виробів, які передбачається розробити з використанням визначеної 
техніки за період створення програмного продукту. В такому разі амортизація 
основних фондів та нематеріальних активів обчислюється за формулою [25] 
n Ц
 А оф Н а T
в = і і  , (2.17) 
i1 100 12
 
де  Ц оф  – балансова вартість (ціна) i-того виду основних фондів та 
і
нематеріальних активів, грн.;  
H  – річна норма амортизаційних відрахувань для i-го виду основних 
aі
фондів та нематеріальних активів, %;  
T  – очікуваний період створення програмного забезпечення, місяців. 
Розрахунки наведені у вигляді табл. 2.3. 
 
Таблиця 2.3 Розрахунок амортизаційних відрахувань 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 38 
    
 
Норма Термін Сума 
Найменування обладнання Балансова амортиз. використа амортизаційн
 вартість, грн. відрах., ння, міс. их 
 відрахувань, 
% грн. 
Основні засоби 
Персональний комп’ютер:     
 системний блок ARTLINE 
Gaming Powered by MSI 
DRGN (DRGNv22) AMD 
Ryzen 7 5800X / RAM 32ГБ 43000,00 15 8,0 4300,00 
/ SSD 1ТБ / nVidia GeForce 
RTX 4060 8ГБ 
 монітор 27" Acer EK271EBI 
(UM.HE1EE.E02) IPS FHD / 
100Hz / 1ms / AMD 4499,00 15 8,0 449,90 
FreeSync / Low Blue Light / 
HDMI / Speakers 
 клавіатура Logitech K120 
359,00 15 8,0 35,90 
USB UKR OEM 
 маніпулятор «миша» 
Logitech B170 Wireless 379,00 15 8,0 37,90 
Black 
Маршрутизатор TP-LINK 
1400,00 15 8,0 140,00 
Archer A64 
Навушники JBL Tune 720BT 
2400,00 15 8,0 240,00 
Black 
Мережевий фільтр Defender ES 
99481 (1.8 м (білий)) 500,00 15 8,0 50,00 
 
Багатофункціональний пристрій 
13300,00 15 8,0 1330,00 
Canon i-Sensys MF272dw 
Нематеріальні активи 
Програмне забезпечення:     
 Windows 11 Професійна 9799,00 15 8,0 979,90 
 Microsoft Office для дому та 
бізнесу 2021 12000,00 15 8,0 1200,00 
 
Разом 87636,00   8763,60 
 
 
Витрати на ремонт та профілактику обладнання  
Витрати на ремонт та профілактику необхідного обладнання Вр  
становлять 2-3% від його балансової вартості. 
 Вр  Цоф 3%  87636,00 0,03  2629,08  грн.  (2.18) 
Розрахунок енерговитрат  
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. 39 
 Арк. № Документа Підпис Дата  
 
Енерговитрати розраховуються за статтею «Електроенергія на технологічні 
цілі» за формулою [26]: 
 Bел M Ф
i пл Квик Цел ,  (2.19) 
де  M
i  – потужність i-того виду основних фондів, кВт;  
Фпл  – фактична кількість годин роботи обладнання, яке задіяне на 
виготовлення програмного продукту, годин;  
Квик  – коефіцієнт використання робочого часу (приймаємо Квик  0,7 );  
Цел  – вартість 1 кВт/год електроенергії, грн. 
Розрахунок енерговитрат наведений у табл. 2.4. 
 
Таблиця 2.4 Розрахунок енерговитрат  
Кількість 
годин Вартість 1 Сума 
Найменування обладнання Потужність, кВт/год. 
 кВт роботи 
 обладнання, електроенергії, енерговитрат, 
грн грн. 
год. . 
 
Персональний комп’ютер:     
 системний блок ARTLINE 
Gaming Powered by MSI 
DRGN (DRGNv22) AMD 0,400 1327,60 2,64 981,3619 
Ryzen 7 5800X / RAM 32ГБ / 
SSD 1ТБ / nVidia GeForce  
 монітор 27" Acer EK271EBI 
(UM.HE1EE.E02) IPS FHD / 0,021 1327,60 2,64 51,5215 
100Hz / 1ms / AMD FreeSync  
 клавіатура Logitech K120 
0,011 1327,60 2,64 26,98745 
USB UKR OEM 
 маніпулятор «миша» Logitech 
0,009 1327,60 2,64 22,08064 
B170 Wireless Black 
Маршрутизатор TP-LINK Archer  0,013 1327,60 2,64 31,89426 
Навушники JBL Tune 720BT  0,006 1327,60 2,64 14,72043 
Мережевий фільтр Defender ES 
99481 (1.8 м (білий)) 0,004 1327,60 2,64 9,813619 
 
Багатофункціональний пристрій 
0,465 25,20 2,64 21,65486 
Canon i-Sensys MF272dw 
Разом  1,409   1160,04 
 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 40 
  
 
2.8.8 Розрахунок інших накладних витратами 
Інші накладі витрати враховують витрати, пов'язані з відрядженнями, 
різноманітними господарськими витратами (комунальні витрати) тощо. Для 
розрахунку пропонується прийняти розмір накладних витрат Вн  на рівні 20-
30% від суми попередніх витрат:  
Вм  Вр  Ав  ВВ  ел  ЗП H
a
 н . (2.20) 
100
В  20
н  2284,16  2629,08 8763,60 1160,04 150824,54   33132,28  грн. 
100
 
2.8.9 Складання кошторису витрат на виробництво і реалізацію 
електронного навчального ресурсу з вебтехнологій 
Розрахунок кошторису витрат на виробництво і реалізацію програмного 
продукту містить всі витрати, які виникають в процесі його створення та 
реалізації зведено до табл. 2.5. 
Позaвиробничі витрaти приймaємо нa рівні 5 % від виробничої 
собівaртості. 
 
Таблиця 2.5 Кошторис витрат на створення та реалізацію електронного 
навчального ресурсу з вебтехнологій 
Елементи витрат Сума, грн. 
1. Витрати на оплату праці 106589,78 
2. Соціальні нарахування на оплату праці 44234,76 
3. Матеріальні витрати 2284,16 
4. Енергетичні витрати 1160,04 
5. Амортизаційні витрати 8763,60 
6. Витрати на ремонт та профілактику обладнання 2629,08 
7. Інші накладні витрати 33132,28 
Разом виробничі витрати 198793,70 
8. Позавиробничі витрати 9939,69 
Разом витрати на виробництво та реалізацію 208733,39 
 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис 41 
 Дата  
 
2.8.10 Розрахунок ціни, доходів та прибутку від розробки та продажу 
доступу до електронного навчального ресурсу з вебтехнологій 
Ціна Ц  програмного виробу встановлюється на основі витрат В, які 
було здійснено під час його створення та реалізації, а також рівня рентабельності  
P (встановлюється індивідуально розробником програмного продукту). 
Ціна програмного продукту з ПДВ у випадку його одноразового продажу 
може бути розрахована з використанням формули [25]: 
 Р   ПДВ 
 Ц = В1+ 1+  , (2.21) 
 100   100 
Ц  + 30   + 20
 
 208733,391 1   325624,09  грн.,  
 100   100 
де  B  – витрати на виробництво та реалізацію програмного продукту, грн.;  
P  – рівень рентабельності, % P  30% ;  
ПДВ  – ставка податку на додану вартість, %. 
Ціна електронного навчального курсу може бути зменшена за рахунок 
надання платного доступу різним категоріям користувачів:  
Ц = Ц 325624,09 грн.
 тир  1628,12  грн.  (2.22) 
Q 200
n
Прибуток від реалізації одного тиражованого примірника програмного 
продукту визначається за формулою: 
 П= Цтир  ПДВ  В1628,12  325,62  488,44  814,06  грн.  (2.23) 
Очікуваний обсяг прибутку від реалізації всіх тиражованих копій 
програмного продукту визначається за формулою: 
 Пр= П Qп  814,06 200 162812,00  грн. (2.24) 
Таким чином, дане впровадження є економічно вигідним.  
 
 
2.8.11 Розрахунок зведених економічних показників 
Додаткові капітальні вкладення K  пов’язані з впровадженням розробленої 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа 42 
 Підпис Дата  
 
системи визначаються за формулою [26]: 
T1 364  (1 0,1) 6
K = K  208733,39  156550,04   (2.25) 
E
T2 364  (1 0,1) 8
де  K
E  – капітальні вкладення в апаратне забезпечення та інші складові 
електронного навчального ресурсу; 
T1  – машинний час апаратного забезпечення, необхідний користувачу для 
тих задач, які він розв’язує за допомогою розробленого електронного 
навчального ресурсу машино-год/рік; 
 T2  – корисний річний фонд роботи цього електронного навчального 
ресурсу (без врахування простоїв в ремонті). 
Економія витрат пов’язаних з експлуатацією електронного навчального 
ресурсу визначається за формулою [27]: 
 Z 
E  1   1д  B
c i  T1 e       (2.26) 
i  T
c 
150000
 1 0,2        
1 0,415 20110 364  (1 0,1) 6 0,87     
5  5 
139023,83  
де  
c  – коефіцієнт, що враховує додаткову заробітну плату розробникам 
електронного навчального ресурсу (%); 
д  – коефіцієнт, що враховує нарахування органам соціального захисту на 
заробітну плату (%); 
B
i  – основна заробітна плата розробника і-ої кваліфікації; 
 T1  – машинний час, необхідний користувачу для вирішення задачі з 
допомогою електронного навчального ресурсу; 
 е – експлуатаційні витрати, що припадають на 1 годину машинного часу; 
Z  – ціна нового електронного навчального ресурсу, грн.; 
 Tc  – термін служби електронного навчального ресурсу. 
Термін окупності додаткових капітальних вкладень визначається за 
формулою: 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа 43 
 Підпис Дата  
 
 K 208733,385
  1,5,      (2.27) 
E 139023,82
Отже, згідно (2.27) отримаємо  1,5 роки, що відповідає 18 місяцям. 
Грошовий річний ефект, який отримує користувач при застосуванні 
системи визначається за формулою: 
1 1
w  E  K 139023,83 208733,39 127427,53  грн.  (2.28) 
 18
m
Для визначення ефективності продукту розрахуємо чисту приведену 
цінність (чистий приведений прибуток) NPV [27]: 
NPV D  B  t
/ 1 i    1
162812,00 / 1 0,3  125240,00 грн.  (2.29) 
t t
де  D
t  – річний дохід від використання електронного навчального ресурсу з 
вебтехнологій; 
B
t – річні витрати, пов’язані з використанням електронного навчального 
ресурсу з вебтехнологій; 
t  – відповідний рік проекту; 
i  – дисконтнa стaвкa (0,3). 
У табл. 2.6 наведено зведені економічні показники електронного 
навчального ресурсу з вебтетхнологій. 
 
Таблиця 2.6 Зведені економічні показники розробки електронного 
навчального ресурсу з вебтехнологій 
Показник Розмірність Значення 
Витрати на розробку електронного навчального 
ресурсу з вебтехнолгій грн. 208733,385 
 
Капітальні вкладення грн. 156550,04 
Економія експлуатаційних витрат грн./рік 139023,83 
Ціна електронного навчального ресурсу з 
вебтехнологій грн. 814,06 
 
Термін окупності роки 1,5 
Річний грошовий економічний ефект грн./рік 127427,53 
Чиста приведена цінність електронного навчального 
ресурсу з вебтехнолгій грн. 125240,00 
 
 
 Аналіз показників ефективності та прибутковості даного ІТ-проекту 
впевнено підтверджує його привабливість для інвестування.   
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 44 
  
 
РОЗДІЛ 3. РОЗРОБКА ЕЛЕКТРОННОГО НАВЧАЛЬНОГО РЕСУРСУ З 
ВЕБТЕХНОЛОГІЙ 
 
 
3.1 Обґрунтування вибору засобів розробки  
 
У процесі створення електронного навчального ресурсу критичним етапом 
є обґрунтування вибору засобів розробки. Вибір технологій та інструментів для 
реалізації проєкту визначає його функціональні можливості, продуктивність та 
зручність використання. Відповідні засоби дозволяють ефективно втілювати 
задумане, забезпечують стабільність і безпеку системи, а також спрощують 
подальше обслуговування і масштабування. Враховуючи специфіку електронного 
навчального ресурсу, необхідно ретельно оцінити різноманітні платформи, 
фреймворки та бібліотеки, які сприятимуть досягненню високої якості кінцевого 
продукту. У даному розділі розглянемо критерії, які впливають на вибір 
інструментів розробки, і обґрунтуємо прийняте рішення з урахуванням сучасних 
тенденцій та вимог проєкту. 
Розглянемо відомі редактори коду Atom, Sublime Text та середовища 
розробки  Visual Studio Code і WebStorm. 
Atom, розроблений GitHub, також є безкоштовним та відкритим вихідним 
кодом редактором. Він орієнтований на високу налаштовуваність та 
розширюваність. Atom має вбудований менеджер пакетів, який дозволяє легко 
встановлювати нові функції та теми оформлення [28]. Він відомий своїм 
інтуїтивно зрозумілим інтерфейсом та можливістю роботи з різними мовами 
програмування. Проте, на відміну від Visual Studio Code, Atom може бути менш 
продуктивним при роботі з великими проектами. 
Sublime Text – це легкий та швидкий текстовий редактор, який виділяється 
своєю продуктивністю та можливістю працювати з великими файлами. Хоча він 
не є безкоштовним, існує безкоштовна пробна версія з невеликими обмеженнями 
[29]. Sublime Text підтримує безліч плагінів та розширень через Package Control. 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 45 
  
 
Його інтерфейс та функціональність роблять його популярним серед розробників, 
які цінують швидкість та ефективність. 
Visual Studio Code, створений компанією Microsoft, є безкоштовним і 
відкритим вихідним кодом редактором. Він підтримує безліч мов програмування 
та має вбудовані засоби для роботи з Git, інтегровану термінальну консоль і 
багатий набір розширень, які можна встановити через вбудований менеджер [30]. 
Завдяки широкому набору плагінів та розширень, Visual Studio Code може бути 
налаштований під будь-які потреби розробника. Його висока продуктивність та 
регулярні оновлення роблять його одним з найбільш популярних редакторів серед 
програмістів. 
orm, розроблений компанією JetBrains, є потужною комерційною IDE, спеціально 
призначеною для веб-розробки. Він підтримує JavaScript, TypeScript, HTML, CSS 
та багато інших мов, часто використовуваних у веб-розробці [31]. WebStorm 
пропонує багатий функціонал, включаючи потужні інструменти для 
налагодження, рефакторингу коду, інтеграції з системами контролю версій та 
базами даних. Завдяки своїм просунутим можливостям та високій 
продуктивності, WebStorm є відмінним вибором для професійних розробників, 
але він вимагає підписки або одноразової покупки. 
Таким чином, Visual Studio Code та Atom підходять для тих, хто шукає 
безкоштовний та налаштовуваний редактор, тоді як Sublime Text приваблює 
швидкістю та продуктивністю. WebStorm, в свою чергу, ідеальний для 
професійних веб-розробників, які готові інвестувати у платну IDE для отримання 
максимальних можливостей. Ян наслідок, для розробки електронного 
навчального ресурсу з вебтехнологій використаємо програмний продукт Visual 
 
Для управління вебсайтом також знадобиться система управління 
контентом. До популярних сьогодні систем управління контентом належать 
WordPress, Joomla, Drupal та Wix. Розглянемо їх унікальні характеристики та 
переваги. 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис 46 
   Дата  
 
WordPress є найпопулярнішою CMS у світі, відомою своєю простотою у 
використанні та величезною кількістю доступних плагінів і тем. Вона підходить 
для створення різноманітних вебсайтів – від простих блогів до складних 
корпоративних порталів [32]. WordPress має зручний інтерфейс для новачків, але 
також пропонує розширені можливості для досвідчених користувачів через 
налаштування коду. 
Joomla! також є потужною CMS, але трохи складнішою у використанні 
порівняно з WordPress. Вона пропонує більше можливостей для налаштування та 
управління контентом, що робить її хорошим вибором для сайтів з більш 
складною структурою [33]. Joomla! підтримує мультимовні сайти без додаткових 
плагінів, що є її великою перевагою. 
Drupal відомий своєю гнучкістю та потужністю, що дозволяє створювати 
дуже складні та масштабовані вебсайти [34]. Це ідеальний вибір для великих 
корпоративних порталів або сайтів з високими вимогами до безпеки та 
налаштувань. Однак, для роботи з Drupal потрібні більш глибокі технічні знання 
порівняно з WordPress і Joomla!. 
Wix є конструктором сайтів з інтуїтивно зрозумілим drag-and-drop 
інтерфейсом, що дозволяє легко створювати красиві та професійні вебсайти без 
знання програмування [36]. Це відмінний вибір для малого бізнесу та особистих 
проектів. Wix пропонує широкий вибір шаблонів і вбудованих інструментів, але 
має обмеження в налаштуваннях та масштабованості порівняно з традиційними 
CMS, як-от WordPress, Joomla! і Drupal. 
Отже, WordPress ідеально підходить для початківців і середніх сайтів, 
Joomla! пропонує більше можливостей для налаштування, Drupal – для великих 
та складних проектів, а Wix – для швидкого створення привабливих сайтів без 
технічних знань. Оскільки призначенням кваліфікаційної роботи є демонстрація 
вміння одного розробника створювати інформаційні системи на основі здобутих 
технічних знань, то доцільно використати систему керування вмістом WordPress. 
 
 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. 47 
 Арк. № Документа Підпис Дата  
 
3.2 Опис реалізації електронного навчального ресурсу з вебтехнологій 
 
Електронний навчальний ресурс з вебтехнологій розроблено на основі  
мови розмітки HTML, таблиць стилів CSS, фреймворку Boostrap та системи 
керування вмістом з відкритим кодом WordPress. 
WordPress — це популярна платформа для створення та управління 
вебсайтами. Вона вирізняється зручним інтерфейсом адміністративної панелі, що 
дозволяє швидко встановлювати та налаштовувати сайт. Однією з ключових 
переваг є наявність великої кількості тем і шаблонів, які дають змогу 
користувачам налаштовувати дизайн свого сайту відповідно до власних потреб 
 
Крім того, WordPress має величезний каталог плагінів, які можна легко 
встановлювати для розширення функціональності сайту. Управління контентом 
також дуже зручне: платформа пропонує інтуїтивний редактор для створення та 
редагування сторінок і записів, а також підтримує мультимедійний контент, такий 
як зображення, відео та аудіо. Для оптимізації сайту під пошукові системи є 
вбудовані інструменти та додаткові плагіни для SEO. 
WordPress працює на основі кількох ключових технологій. Основною 
мовою програмування є PHP, яка використовується для створення динамічних 
вебсторінок та взаємодії з базами даних. Для зберігання і керування даними 
використовується система керування базами даних MySQL. Крім того, WordPress 
активно використовує HTML та CSS для структурування та стилізації контенту, а 
також JavaScript для додавання інтерактивності та покращення користувацького 
досвіду [36]. Разом ці технології забезпечують гнучкість, функціональність і 
зручність використання WordPress. 
Структура бази даних WordPress складається з дванадцяти основних 
таблиць. Кожна з цих таблиць має своє призначення та зберігає різні типи даних, 
необхідні для функціонування платформи. 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 48 
  
 
– wp_posts: таблиця зберігає всі записи, сторінки, вкладення та інші типи 
контенту. Вона містить колонки для збереження інформації про заголовки, 
зміст, авторів, статуси публікацій, дати публікацій і багато іншого; 
– wp_postmeta: таблиця містить метадані для кожного запису з таблиці 
wp_posts. Кожен рядок зберігає ключ-значення, що додає додаткові 
характеристики записам, такі як налаштування полів або спеціальні 
атрибути; 
– wp_users: таблиця зберігає інформацію про всіх зареєстрованих 
користувачів сайту. Колонки містять імена користувачів, хешовані паролі, 
адреси електронної пошти, дати реєстрації та інші деталі; 
– wp_usermeta: таблиця зберігає метадані користувачів, подібно до 
wp_postmeta. Кожен рядок пов’язаний з конкретним користувачем і містить 
пари ключ-значення, які можуть зберігати додаткову інформацію, 
наприклад, привілеї користувачів або налаштування профілю; 
– wp_comments: таблиця зберігає всі коментарі, залишені на сайті. Вона 
містить інформацію про авторів коментарів, тексти коментарів, статуси 
модерації, дати та часи публікації; 
– wp_commentmeta: Ця таблиця зберігає метадані для коментарів, аналогічно 
до wp_postmeta та wp_usermeta. Вона дозволяє додавати додаткові 
характеристики до кожного коментаря через пари ключ-значення; 
– wp_terms: таблиця зберігає всі терміни, які використовуються для 
таксономій (категорії, теги тощо). Вона містить ідентифікатори термінів, 
імена, слизи (короткі назви) та описання; 
– wp_term_taxonomy: таблиця описує таксономії, до яких належать терміни з 
wp_terms. Вона містить ідентифікатори термінів, типи таксономій 
(категорія, тег) та кількість елементів у кожній таксономії; 
– wp_term_relationships: таблиця зберігає зв’язки між записами (з wp_posts) і 
термінами (з wp_terms). Вона показує, які терміни застосовані до яких 
записів; 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 49 
  
 
– wp_options: таблиця зберігає різноманітні налаштування сайту, такі як URL 
сайту, назва сайту, налаштування часу, і багато іншого. Дані зберігаються у 
вигляді пар ключ-значення; 
– wp_links: таблиця використовується для зберігання посилань, якщо 
активовано модуль блогу. Вона містить інформацію про URL, назви, описи 
та категорії посилань; 
– wp_termmeta: таблиця зберігає метадані для термінів, дозволяючи додавати 
додаткові характеристики до кожного терміну за допомогою пар ключ-
значення. 
Повна структура бази даних WordPress наведена на рис. 3.1. 
 
Рисунок 3.1 – Структура бази даних WordPress 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 50 
  
 
Для формування дизайну головної та дочірніх сторінок було використано 
фреймворк Bootstrap [37]. Bootstrap – це популярний фреймворк для створення 
вебсайтів, який значно спрощує процес розробки завдяки своїм вбудованим 
компонентам та готовим стилям. Його основна мета – забезпечити розробників 
інструментами для швидкого створення адаптивних, мобільних вебсайтів. 
Однією з основних переваг Bootstrap є його система сіток (grid system), яка 
дозволяє легко створювати складні макети сторінок, що автоматично 
підлаштовуються під різні розміри екранів. Це дозволяє розробникам 
зосередитися на змісті та функціоналі сайту, не витрачаючи багато часу на 
налаштування адаптивності [36]. 
Bootstrap також надає набір готових компонентів, таких як кнопки, форми, 
навігаційні панелі, каруселі та багато іншого. Ці компоненти не тільки 
стандартизують вигляд елементів інтерфейсу, але й значно прискорюють процес 
їх створення та налаштування. 
Розробники можуть змінювати кольори, шрифти та інші стилі за допомогою 
Sass-змінних, що робить дизайн сайту унікальним без великого обсягу коду. 
Окрім цього, Bootstrap має чудову документацію, що дозволяє швидко 
знаходити потрібну інформацію та приклади коду. Це робить його доступним для 
розробників різного рівня досвіду. 
Файлова структура типового шаблона для WordPress складається з кількох 
основних файлів і директорій, які визначають вигляд та функціональність теми. 
Основні елементи цієї структури включають: 
– style.css: головний файл стилів теми, що містить інформацію про тему 
(назва, автор, версія тощо) у вигляді коментарів у верхній частині файлу. 
Цей файл також містить CSS-стилі, що використовуються для оформлення 
теми; 
– index.php: основний файл шаблону, який відображає вміст сайту за 
замовчуванням. Якщо інші шаблони не визначені, WordPress використовує 
цей файл для відображення сторінок; 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис 51 
   Дата  
 
– header.php: файл, що містить заголовок теми, включаючи HTML-код до 
основного вмісту сторінки. Зазвичай сюди входять мета-теги, посилання на 
CSS-стилі та JavaScript-файли; 
– footer.php: файл, що містить підвал теми, включаючи HTML-код після 
основного вмісту сторінки. Зазвичай сюди входять скрипти та інформація 
про авторські права; 
– functions.php: файл, що містить функції теми. Тут можна додавати 
підтримку нових можливостей WordPress, реєструвати навігаційні меню, 
додавати віджети та інші функції; 
– single.php: файл шаблону для відображення окремих записів (постів) на 
сайті; 
– page.php: файл шаблону для відображення окремих сторінок на сайті; 
– sidebar.php: файл, що містить бічну панель (сайдбар) теми. Зазвичай містить 
віджети та навігаційні елементи; 
– comments.php: файл, що відображає коментарі до записів та сторінок; 
– archive.php: файл шаблону для відображення архівів (категорій, міток, 
авторів тощо); 
– search.php: файл шаблону для відображення результатів пошуку; 
– 404.php: файл шаблону для відображення сторінки помилки 404 (сторінка 
не знайдена); 
– screenshot.png: зображення попереднього перегляду теми, яке 
відображається в адміністративній панелі WordPress. 
Окрім цих основних файлів, тема може містити додаткові шаблони та 
підкаталоги, наприклад, для зображень, JavaScript-файлів, шрифтів тощо [43-46]. 
Це забезпечує гнучкість та масштабованість теми, дозволяючи легко додавати 
нові функціональні можливості та стилі. 
Типова файлова структура шаблону для Wordpress наведена на рис.3.2. 
 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 52 
  
 
 
Рисунок 3.2 – Типова файлова структура шаблону для Wordpress 
 
Для розгортання сайту на WordPress на хостингу необхідно створити базу 
даних. Типовою системою керування на хостингах є панель Cpanel. Для 
створення в ній бази даних необхідно у розділі «Бази даних» відкрити додаток 
«Майстер бази даних MySQL», як показано на рис. 3.3.  
 
Рисунок 3.3 – Майстер бази даних MySQL 
 
Створюємо нову базу даних та користувача цієї бази даних з повними 
привілеями, як показано на рис. 3.4- 3.6. 
 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 53 
  
 
 
Рисунок 3.4 – Створення нової бази даних 
 
 
Рисунок 3.5 – Створення нового користувача 
 
 
Рисунок 3.6 – Надання прав новому користувачу 
 
Наступним кроком є розгортання файлів WordPress у файловій системі 
хостингу. Завантажте архів із WordPress з офіційного сайту та розпакуйте його до 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 54 
   
 
кореневої папки хостингу. В результаті отримаємо структуру файлів, наведену на 
рис. 3.7. 
 
 
Рисунок 3.7 – Файлова структура проєкту на WordPress 
 
Для продовження встановлення необхідно перейти на новостворений сайт 
за допомогою веб-браузера. Це може бути здійснено за доменним ім’ям сайту, 
який купляється окремо, або за сервісною адресою, що іноді надається хостером. 
Заповніть дані для доступу до бази даних та логіну та паролю для 
адміністративного доступу до панелі керування, як показано на рис. 3.8 та рис. 
 
 
Рисунок 3.8 – Введення налаштувань бази даних 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 55 
   
 
 
 
Рисунок 3.9 – Налаштування адміністративного акаунту 
 
Для роботи компонентів сайту необхідно додати деякі додаткові плагіни, 
які забезпечать повну функціональність сайту. 
Для забезпечення додавання та відображення відгуків студентів будемо 
використовувати безкоштовний плагін Strong Testimonials, що дозволяє  
налаштувати форму додавання відгуків додаючи або видаляючи поля та 
змінюючи такі властивості, як порядок, мітки та заповнювач. Виведення відгуків 
відбувається за допомогою гнучкого налаштовуваного шаблону. Результат виводу 
відгуків студентів наведено на рис. 3.10. 
 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 56 
  
 
 
Рисунок 3.10 – Відгуки студентів 
 
Для забезпечення можливості зв’язатися з адміністрацією сайту будемо 
використовувати безкоштовний плагін Contact Form 7, який дозволяє керувати 
численними контактними формами, гнучко налаштовувати вміст форм і пошти з 
простою розміткою. Форми мають вбудовану підтримку Ajax відправки, 
CAPTCHA, спам фільтру Akismet та інші можливості. Розроблена форма 
зворотного зв’язку наведена на рис. 3.11. 
 
 
Рисунок 3.11 – Форма зворотного зв’язку 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 57 
  
 
Для можливості підписатися на новини компанії будемо використовувати 
безкоштовний плагін Subscribe2 – Form, Email Subscribers & Newsletters. 
Subscribe2 забезпечує комплексне керування підписками та систему сповіщень 
електронною поштою для блогів WordPress, яка надсилає сповіщення 
електронною поштою до списку підписників, коли ви публікуєте новий вміст у 
своєму блозі. Розроблена форма підписки на новини компанії наведена на рис. 
 
 
Рисунок 3.12 – Форма підписки на новини компанії 
 
3.3 Тестування електронного навчального ресурсу з вебтехнологій 
 
Тестування електронного навчального ресурсу є ключовим етапом 
розробки, що забезпечує якість та функціональність ресурсу перед його запуском. 
Для оцінювання рівня виконання електронним навчальним ресурсом з 
вебтехнологій поставленої задачі у кваліфікаційній роботі та встановлення її 
відповідності поставленим вимогам виконаємо тестування функціональності, 
дизайну та наповнення. При цьому, використаємо такі методи тестування: 
тестування верстки, функціональне тестування, навігаційне тестування, 
тестування контенту, кросбраузерне тестування, тестування адаптивності, 
тестування безпеки. 
Крос-браузерне тестування перевіряє, чи правильно відображається і 
функціонує сайт у різних браузерах та на різних пристроях. Крос-браузерне 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 58 
  
 
тестування охоплює перевірку сумісності з різними версіями браузерів, а також 
тестування на мобільних пристроях [47]. 
Тестування верстки зосереджене на перевірці розміщення елементів 
вебсайту відповідно до макету та вимог [48, 49]. Мета тестування верстки – 
переконатися, що всі елементи вебсайту відображаються коректно. Результати 
тестування верстки електронного навчального ресурсу з вебтехнологій наведені у 
табл. 3.1. 
 
Таблиця 3.1 Результати тестування верстки 
П
о
к
а    
з    
н
и
к 
Наявність елементів сторінок 
П
е
р
е
ві
р
к
а 
ві
д
о
б
р
а пройдено пройдено пройдено 
ж
е
н
н
я 
ст
о
рі
н
о
к 
зг
ід
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 59 
  
 
н
о 
ф
а
й
лі
в 
д
и
за
й
н
у  
П
е
р
е
ві
р
к
а 
н
а
я
в пройдено пройдено пройдено 
н
о
ст
і 
л
ог
о
т
и
п
у 
П
е
р
е
ві
р
к
а 
н пройдено пройдено пройдено 
а
я
в
н
о
ст
і 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 60 
  
 
го
л
о
в
н
ог
о 
м
е
н
ю 
П
е
р
е
ві
р
к
а 
н
а
я
в
н
о пройдено пройдено пройдено 
ст
і 
пі
д
в
а
л
у 
са
й
т
у 
Відображення елементів 
П
е
р
е
ві
р
к
а пройдено пройдено пройдено 
ві
д
о
б
р
а
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 61 
  
 
ж
е
н
н
я 
ш
р
и
ф
та 
те
к
ст
у 
н
а 
са
й
ті 
П
е
р
е
ві
р
к
а 
ві
д
о
б
р
а
ж
е
н пройдено пройдено пройдено 
н
я 
к
н
о
п
о
к, 
б
л
о
кі
в 
м
е
н
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 62 
  
 
ю 
і 
т.
д.
, 
їх 
р
оз
м
і
щ
е
н
н
я 
ві
д
н
о
с
н
о 
о
д
и
н 
о
д
н
ог
о  
П
е
р
е
ві
р
к
а 
р
оз
м пройдено пройдено пройдено 
і
щ
е
н
н
я 
б
а
н
е
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 63 
  
 
рі
в 
Активні елементи 
П
е
р
е
ві
р
к
а 
з
м
ін
и 
в
и
д
у 
к
у
р
с
о
р
а 
пі
с пройдено пройдено пройдено 
л
я 
н
а
ве
д
е
н
н
я 
н
а 
а
к
т
и
в
ні 
е
л
е
м
е
н
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа 64 
 Підпис Дата  
 
т
и 
П
е
р
е
ві
р
к
а 
р
еа
г
у
в
а
н
н
я 
а
к
т
и
в
н
и
х 
е пройдено пройдено пройдено 
л
е
м
е
н
ті
в 
н
а 
н
а
ве
д
е
н
н
я 
к
у
р
с
о
р
а 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 65 
  
 
Зміст сторінок 
П
е
р
е
ві
р
к
а 
о
р
ф
о
г
р
а
ф
ії/
г
р пройдено пройдено пройдено 
а
м
ат
и
к
и 
к
о
н
те
н
т
у 
са
й
т
у 
 
Функціональне тестування зосереджене на перевірці всіх функцій сайту і 
передбачає перевірку форм, кнопок, посилань, баз даних та всіх інтерактивних 
елементів [48]. Мета функціонального тестування – переконатися, що всі 
елементи працюють відповідно до вимог. Результати функціонального тестування 
електронного навчального ресурсу з вебтехнологій наведені у табл. 3.2. 
 
Таблиця 3.2 Результати функціонального тестування 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис 66 
   Дата  
 
П
о
к
а    
з    
н
и
к 
Реєстрація 
П
е
р
е
в
і
р
к
а 
р
е
є
с
т
р
а
ц
ії 
н
о
в
о пройдено пройдено пройдено 
г
о 
к
о
р
и
с
т
у
в
а
ч
а 
н
а 
с
а
й
т
і 
Вхід 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис 67 
  Дата  
 
П
е
р
е
в
і
р
к
а 
в
х
о
д
у 
к
о пройдено пройдено пройдено 
р
и
с
т
у
в
а
ч
а 
н
а 
с
а
й
т 
Форма зворотного зв’язку 
П
е
р
е
в
і
р
к
а 
в
а пройдено пройдено пройдено 
л
і
д
а
ц
ії 
п
о
л
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 68 
   
 
і
в 
П
е
р
е
в
і
р
к
а 
в
і
д
п
р
а
в
к
и 
е
л
е
к
т
р
о пройдено пройдено пройдено 
н
н
о
г
о 
л
и
с
т
а 
/ 
п
о
в
і
д
о
м
л
е
н
н
я 
Пошук 
П пройдено пройдено пройдено 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 69 
  
 
е
р
е
в
і
р
к
а 
р
о
б
о
т
и 
п
о
ш
у
к
у 
з
а 
к
л
ю
ч
о
в
и
м 
с
л
о
в
о
м 
П
е
р
е
в
і
р
к
а пройдено пройдено пройдено 
п
е
р
е
х
о
д
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 70 
  
 
у 
з
а 
п
о
с
и
л
а
н
н
я
м
и 
з
і 
с
т
о
р
і
н
к
и 
р
е
з
у
л
ь
т
а
т
і
в 
п
о
ш
у
к
у 
П
е
р
е
в
і пройдено пройдено пройдено 
р
к
а 
р
о
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 71 
  
 
б
о
т
и 
л
і
ч
и
л
ь
н
и
к
а 
к
і
л
ь
к
о
с
т
і 
з
н
а
й
д
е
н
и
х 
р
е
з
у
л
ь
т
а
т
і
в 
п
о
ш
у
к
у 
П
е пройдено пройдено пройдено 
р
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа 72 
 Підпис Дата  
 
е
в
і
р
к
а 
н
а
я
в
н
о
с
т
і 
п
о
в
і
д
о
м
л
е
н
н
я 
п
р
и 
в
і
д
с
у
т
н
о
с
т
і 
р
е
з
у
л
ь
т
а
т
і
в 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис 73 
 Дата  
 
п
о
ш
у
к
у 
Фото, відео 
П
е
р
е
в
і
р
к
а 
ф
у
н
к
ц
ії 
ш
а
р
и
н
г
у 
ф пройдено пройдено пройдено 
о
т
о 
у 
в
с
і
х 
з
а
п
р
о
п
о
н
о
в
а
н
и
х 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 74 
  
 
с
о
ц
м
е
р
е
ж
а
х
, 
в
і
д
п
р
а
в
к
у 
е
л
. 
п
о
ш
т
о
ю
 і 
т
.
п
П
е
р
е
в
і
р
к
а 
ф пройдено пройдено пройдено 
у
н
к
ц
ії 
п
е
р
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 75 
  
 
е
г
л
я
д
у 
в
і
д
е
о 
П
е
р
е
в
і
р
к
а 
ф
у
н
к
ц
ії пройдено пройдено пройдено 
з
б
і
л
ь
ш
е
н
н
я 
ф
о
т
о 
Лекційна сторінка  
П
е
р
е
в
і пройдено пройдено пройдено 
р
к
а 
м
о
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 76 
  
 
ж
л
и
в
о
с
т
і 
д
о
д
а
н
н
я 
т
е
м 
т
а 
л
е
к
ц
і
й 
П
е
р
е
в
і
р
к
а 
м
о
ж
л
и пройдено пройдено пройдено 
в
о
с
т
і 
з
а
в
а
н
т
а
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 77 
  
 
ж
и
т
и 
ф
а
й
л 
П
е
р
е
в
і
р
к
а 
н
а
я
в
н
о
с
т
і 
в
із
у
а
л пройдено пройдено пройдено 
ь
н
о
г
о 
п
і
д
т
в
е
р
д
ж
е
н
н
я 
в
и
б
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 78 
  
 
о
р
у 
л
е
к
ц
ії 
Сторінка практичних занять 
П
е
р
е
в
і
р
к
а 
м
о
ж
л
и
в
о
с
т
і 
д
о
д пройдено пройдено пройдено 
а
н
н
я 
т
е
м 
т
а 
з
а
в
д
а
н
ь 
д
л
я 
п
р
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа 79 
 Підпис Дата  
 
а
к
т
и
ч
н
и
х 
з
а
н
я
т
ь 
П
е
р
е
в
і
р
к
а 
м
о
ж
л
и
в
о
с
т пройдено пройдено пройдено 
і 
з
а
в
а
н
т
а
ж
и
т
и 
ф
а
й
л 
П
е
р пройдено пройдено пройдено 
е
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. 80 
 Арк. № Документа Підпис Дата  
 
в
і
р
к
а 
н
а
я
в
н
о
с
т
і 
в
із
у
а
л
ь
н
о
г
о 
п
і
д
т
в
е
р
д
ж
е
н
н
я 
в
и
б
о
р
у 
п
р
а
к
т
и
ч
н
о
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис 81 
 Дата  
 
г
о 
з
а
н
я
т
т
я 
Сторінка ресурсів 
П
е
р
е
в
і
р
к
а 
м
о
ж
л
и
в
о
с
т
і 
д пройдено пройдено пройдено 
о
д
а
н
н
я 
н
о
в
и
х 
р
о
з
д
і
л
і
в 
П
е пройдено пройдено пройдено 
р
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис 82 
 Дата  
 
е
в
і
р
к
а 
м
о
ж
л
и
в
о
с
т
і 
п
е
р
е
х
о
д
и
т
и 
з
а 
п
о
с
и
л
а
н
н
я
м
и 
Сторінка з навчальним графіком 
П
е
р
е
в
і
р пройдено пройдено пройдено 
к
а 
м
о
ж
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа 83 
 Підпис Дата  
 
л
и
в
о
с
т
і 
д
о
д
а
н
н
я 
н
о
в
о
г
о 
н
а
в
ч
а
л
ь
н
о
г
о 
д
н
я 
(
д
а
т
а
, 
ч
а
с
, 
д
е
н
ь 
т
и
ж
н
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис 84 
 Дата  
 
я
П
е
р
е
в
і
р
к
а 
м
о
ж
л
и
в
о
с
т
і 
п
е
р пройдено пройдено пройдено 
е
х
о
д
и
т
и 
з
а 
п
о
с
и
л
а
н
н
я
м
и 
Тестування на зручність використання, або UX-тестування, оцінює сайт з 
точки зору користувачів (табл. 3.3). Воно включає тести з реальними 
користувачами, які виконують різні завдання на сайті [48,49,51]. Це допомагає 
виявити проблеми з навігацією, дизайном та загальною зручністю використання. 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 85 
  
 
 
Таблиця 3.3 Результати UX-тестування  
Пока  
зник  
Структура
Слог
ан 
біля пройдено 
логот
ипу 
Інфо
рмаці
я про пройдено 
ресур
с 
Наяв
ність 
інтуїт
ивно 
зрозу пройдено 
мілих 
іконо
к 
Одно
маніт
ність 
інтер пройдено 
фейс
у 
Одно
значн
ість і 
зрозу пройдено 
міліс
ть 
Зруч
ність 
взаєм
одії з пройдено 
лого 
сайту 
Зрозу
міла 
термі пройдено 
нолог
ія 
Мож
ливіс
ть пройдено 
побач
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. 86 
 Арк. № Документа Підпис Дата  
 
ити 
обли
ччя 
ресур
су 
«При
нцип 
ненас пройдено 
ильст
ва» 
Стан
дарти
зація 
стати
чних пройдено 
сторі
нок 
меню 
Дизайн
Проп
рацьо
ваніс
ть пройдено 
сторі
нки 
 
Помі
рніст пройдено 
ь 
Врах
уванн
я 
особл
ивост
ей пройдено 
спри
йнятт
я 
кольо
ру 
Відсу
тніст
ь 
зайво пройдено 
ї 
аніма
ції 
Відсу
тніст
ь пройдено 
нагро
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 87 
  
 
мадж
ення 
елеме
нтів 
Опти
маль
ний 
розмі
р  
кліка пройдено 
бельн
их 
елеме
нтів 
Тест
Чита
бельн
ий пройдено 
текст 
Лако
нічні 
і 
корот пройдено 
кі 
текст
и 
Фоку
с на 
цільо
вій пройдено 
аудит
орії 
Прос
тота 
предс
тавле пройдено 
ння 
чисел 
Стан
дарти
зація пройдено 
шриф
тів 
Стан
дарти
зація пройдено 
кольо
рів 
Опти
маль пройдено 
ний 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. 88 
 Арк. № Документа Підпис Дата  
 
розмі
р 
кегля 
Прав
ильні
й 
підбі пройдено 
р 
шриф
ту 
Інфо
рмат
ивніс пройдено 
ть 
Пошук по сайту
Пош
ук на пройдено 
сайта 
Єдин
е 
поле пройдено 
пошу
ку 
Зруч
на 
взаєм
одія з пройдено 
пошу
ком 
Вико
риста
ння 
«жив пройдено 
ого» 
пошу
ку 
Дета
льна 
інфор
мація 
про пройдено 
резул
ьтати 
пошу
ку 
Продовження табл. 3.3 
По
каз  
ни  
к 
До пройдено 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис 89 
 Дата  
 
по
мог
а 
при 
від
сут
нос
ті 
рез
уль
таті
в 
Посилання
«Че
сні 
пос
ила пройдено 
ння
 
Ан
кор
не 
пос пройдено 
ила
ння 
Зру
чні
сть 
клі
ку пройдено 
на 
пос
ила
ння 
Кн
опк
а 
пов пройдено 
ерн
енн
я 
 
Безпекове тестування зосереджене на виявленні вразливостей в системі 
безпеки сайту (табл. 3.4). Це включає перевірку на проникнення, аналіз слабких 
місць та тестування механізмів автентифікації і авторизації [47, 50, 52]. Мета – 
забезпечити захист даних користувачів та запобігти потенційним атакам. 
 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 90 
  
 
Таблиця 3.4 Результати безпекового тестування  
Пока  
зник  
Аутентифікація і авторизація
Безпе
чне 
зберіг
ання пройдено 
парол
ів 
Коре
ктне 
керув
ання пройдено 
сесія
ми 
Наяв
ність 
нале
жної 
автор
изації 
для пройдено 
досту
пу до 
чутли
вих 
даних 
Захист від SQL ін'єкцій
Пере
вірка 
захис
ту 
всіх 
введе
нь 
корис пройдено 
тувач
а, що 
потра
пляю
ть до 
бази 
даних 
Вико
риста
ння 
пара пройдено 
метр
изова
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 91 
  
 
них 
запит
ів або 
підго
товле
них 
вираз
і 
Вияв
лення 
уразл
ивост
ей за 
допо
мого пройдено 
ю 
інстр
умен
тів 
скану
вання 
Захист від міжсайтового скриптингу та міжсайтових підробок запитів
Екра
нуван
ня 
всіх 
введе
нь 
корис
тувач пройдено 
а, що 
відоб
ража
ютьс
я на 
сторі
нці 
Вико
риста
ння 
 
пройдено 
Вико
риста
ння пройдено 
CSRF
-
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа 92 
 Підпис Дата  
 
токен
ів для 
всіх 
форм 
і 
важл
ивих 
запит
ів 
Захист від атак на файлову систему
Конф
іденц
ійна 
інфор
мація 
не 
зберіг
аєтьс
я у пройдено 
вихід
ному 
коді 
(клю
чі, 
парол
і) 
Пере
вірка 
нала
штув пройдено 
ань 
серве
ра 
Налаштування HTTPS
Вико
риста
ння 
HTTP
S для 
шифр пройдено 
уванн
я 
трафі
ку 
Продовження табл. 3.3 
Пок
азн  
ик  
 
Вик
орис пройдено 
танн
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. 93 
  № Документа Підпис Дата  
 
я 
SSL/
TLS 
серт
ифік
атів 
з 
силь
ним
и 
алго
рит
мам
и 
шиф
рува
ння. 
Відс
утно
сті 
змі
шан
ого 
конт
енту пройдено 
на 
HTT
PS 
стор
інка
х  
Логи та моніторинг
Нал
ашт
уван
ня 
жур
нал
юва пройдено 
ння 
важ
ливи
х 
поді
й 
Мон
ітор
инг 
жур пройдено 
налі
в на 
пред
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 94 
  
 
мет 
підо
зріл
ої 
акти
внос
ті 
 
Тестування продуктивності спрямоване на оцінку здатності системи або 
додатку ефективно працювати під різними навантаженнями (табл. 3.5). Воно 
включає визначення швидкості обробки даних, часу відгуку, стабільності та 
масштабованості системи. Під час тестування використовують різні сценарії, щоб 
змоделювати реальні умови експлуатації, такі як пік навантаження або тривале 
навантаження. Метою є виявлення можливих вузьких місць та визначення меж 
продуктивності, що допомагає оптимізувати систему для досягнення найкращих 
результатів. Тестування продуктивності є важливим етапом у забезпеченні 
надійності та ефективності програмного забезпечення, оскільки воно дозволяє 
передбачити та запобігти проблемам, які можуть виникнути під час реальної 
експлуатації. 
 
Таблиця 3.5 Результати тестування продуктивності  
Показни  
к  
Швидкіс
ть 
завантаж пройдено 
ення 
Наявніст
ь 
адаптивн пройдено 
ої 
верстки 
Кожном
у 
пристро пройдено 
ю – своє 
юзабіліті 
Прихову
вання 
непотріб пройдено 
них смуг 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 95 
  
 
скролу 
Підстро
ювання 
курсора 
під 
«клікабе пройдено 
льне/нек
лікабель
не» 
Тестови
й формат пройдено 
 
Відсутні
сть 
захисту 
від пройдено 
копіюва
ння 
 
Таким чином, тестування вебсайтів є комплексним процесом, який включає 
різні методи та інструменти для забезпечення високої якості, безпеки та зручності 
використання сайту. Електронний навчальний ресурс з вебтехнологій вдало 
пройшов описані вище різновиди тестування.  
 
3.4 Порівняння електронного навчального ресурсу з вебтехнологій з 
аналогами 
 
На ринку сучасних технологій та послуг, коли наявні численні 
альтернативи, важливо не лише зрозуміти характеристики кожної з них, але й 
чітко показати переваги розробленого ІТ-продукту у порівнянні з аналогами. 
Детальний аналітичний огляд аналогічних електронних навчальних ресурсів з 
вебтехнологій, виконаний  у попередньому розділі, дозволив виявити ключові 
переваги, недоліки та особливості існуючих навчальних ресурсів.  Розглянемо 
основні аспекти розробленого електронного навчального ресурсу з 
вебтехнологій, які роблять його унікальним та більш привабливим для 
споживачів. Критерії порівняння та узагальнені характеристики електронних 
навчальних ресурсів наведемо в таблиці 3.6. 
 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 96 
  
 
Таблиця 3.6 Порівняння електронних навчальних ресурсів з вебтехнологій 
Технології веб- CSE 154: Web Веб-технології: �� Веб- Електронний 
Показник розробки та Programming, Основи HTML технології навчальний 
 дизайну Summer 2019 (dystosvita.org.ua) (google.com)  ресурс з 
 
(victoria.lviv.ua)  (washington.edu)  вебтехнологій 
Теоретичний 
матеріал 
     
Практичні 
завдання  
    
Інтерактивні 
вправи     
 
Додаткові 
ресурси  
    
Графік вивчення 
курсу    
  
Опція реєстрації 
на сайті  
    
Розроблений електронний навчальний ресурс з вебтехнологій має досить 
простий і мінімалістичний дизайн, що дозволяє користувачам легко 
орієнтуватися без зайвих відволікаючих елементів. Текст на сайті добре 
читається завдяки достатньому контрасту між шрифтом і фоном, використанню 
чітких і зрозумілих шрифтів. Шрифти вибрані вдало, і розмір тексту зручний для 
читання. 
Колірна гамма базова і містить достатній спектр кольорів, що робить 
вебресурс більш привабливим, на відміну від навчального ресурсу [12]. Разом з 
тим, колірна гамма спокійна та професійна, використання білих та синіх 
просторів допомагає уникнути перевантаженості інформацією. Дизайн сайт 
відповідає сучасним тенденціям на відміну від [13, 15]. 
На сайті використовуються зображення, відео та анімації, що покращують 
візуальне сприйняття і залучення користувачів. Завдяки цьому розроблений 
електронний навчальний ресурс з вебтехнологій виглядає більш привабливим та 
інформативним. Такі елементи відсутні на навчальних ресурсах [13,15]. 
Покращує загальну читабельність використання списків та блоків тексту. 
Навігаційне меню, як і в [12-15], розташоване у верхній частині сайту і 
містить посилання на основні розділи, що робить навігацію інтуїтивно 
зрозумілою. 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 97 
  
 
Сайт має логічну структуру з чітко розділеними розділами, що дозволяє 
користувачам легко знайти потрібну інформацію. Використання міток і 
заголовків (H1, H2 тощо) допомагає швидко зорієнтуватися в змісті сторінок.  
Сайт має вбудовану пошукову функцію на відміну від [12, 13, 15], що 
спрощує швидкий пошук конкретної інформації для користувачів. 
Сайт є адаптивним, гарно виглядає на мобільних пристроях та різних 
розмірах екранів, що позитивно впливає на загальну зручність використання і 
доступність сайту для різних користувачів. 
На сайті присутні явні ознаки дотримання стандартів доступності (WCAG), 
таких як можливість зміни розміру шрифту, альтернативні тексти для зображень 
тощо. 
Щодо функціональності розробленого електронного навчального ресурсу, 
то доступна реєстрація, практичні завдання, додаткові ресурси та графік вивчення 
курсу.  
Отже, з погляду ергономіки перевагами розробленого електронного 
навчального ресурсу є простота використання і логічна структура контенту, 
наявність адаптивного дизайну, сучасних візуальних елементів, пошукової 
функції та інтерактивності. 
Щодо якості серверної та користувацької логіки цього навчального ресурсу, 
то він має високу швидкість завантаження,  вже впроваджений протокол HTTPS, 
оптимізовані мета-теги і заголовки, а завдяки використанню системи керування 
контентом WordPress адміністратор має може відслідковувати аналітичні 
показники. 
Розроблений електронний навчальний ресурс з вебтехнологій справляє 
враження добре організованого і зручного навчального ресурсу. Його інтуїтивно 
зрозумілий інтерфейс дозволяє студентам легко орієнтуватися та швидко 
знаходити потрібну інформацію. Великим плюсом є доступність матеріалів і 
ресурсів курсу, які легко знайти завдяки логічному розподілу розділів. Завдяки 
використанню системи керування контентом WordPress викладачі мають 
можливість швидко оновлювати контент, забезпечуючи актуальність інформації, 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. 98 
 Арк. № Документа Підпис Дата  
 
та прогрес вивчення курсу кожним студентом. Сайт також добре оптимізований 
для мобільних пристроїв, що дозволяє студентам зручно користуватися 
ресурсами з будь-якого місця. 
Загалом, розроблений електронний навчальний ресурс з вебтехнологій 
демонструє високий рівень продуманості та орієнтації на потреби користувачів. 
Він успішно виконує свою головну функцію – надання доступу до навчальних 
матеріалів і підтримки студентів протягом усього курсу навчання. 
 
  
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 99 
  
 
ВИСНОВКИ 
 
У кваліфікаційній роботі було розроблено електронний навчальний ресурс з 
вебтехнологій. Користувачі вебресурсу мають можливість вивчати вебтехнології 
згідно рекомендованого навчального графіку у зручний час завдяки наявності 
теоретичних матеріалів, завдань до практичних занять, додаткових ресурсів та 
відео. Для досягнення поставленої мети були виконані наступні завдання: 
розглянуто цілі, принципи, переваги застосування електронних навчальних 
ресурсів; виконано аналітичний огляд існуючих електронних навчальних 
ресурсів з вебтехнологій; визначено вимоги до електронного навчального ресурсу 
з вебтехнологій; обґрунтовано вибір засобів для створення електронного 
навчального ресурсу з вебтехнологій; реалізовано електронний навчальній ресурс 
з вебтехнологій. 
Електронні навчальні ресурси надають користувачам доступ до навчальних 
матеріалів у будь-який час та у будь-якому місці за умови підключення до 
Інтернету. Контент вебресурсу може бути адаптований під індивідуальні потреби 
та темп навчання кожного студента. Крім того, є можливість відстеження 
прогресу студентів у реальному часі та надання зворотного зв’язку. 
В результаті проведеного аналітичного огляду існуючих електронних 
навчальних ресурсів з вебтехнологій було встановлено, що з погляду ергономіки 
їх перевагами є інтуїтивно зрозумілий простий класичний дизайн і логічно 
структурований контент, а недоліками – відсутність адаптивного дизайну, 
сучасних візуальних елементів, пошукової функції та інтерактивності. 
На початковому етапі розробки електронного навчального ресурсу з 
вебтехнологій до нього висувалися такі ергономічні вимоги як доступність, 
адаптивність, проста навігація, зручність використання, відповідність 
стандартами безпеки та конфіденційності. 
Електронний навчальний ресурс з вебтехнологій розроблено на основі  
мови розмітки HTML, таблиць стилів CSS, фреймворку Boostrap та системи 
керування вмістом з відкритим кодом WordPress.  
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. 100 
 Арк. № Документа Підпис Дата  
 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 
 
 
1. Стрілкова Т. О., Тележкіна О. О., Бабиченко О. Ю., Калмиков О. С., 
Пятайкіна М. Дистанційні технології – методи динамічного сприйняття 
інформації як основа оновлення змісту освіти. Новий Колегіум, 2020. № 3. 
С. 25-33. 
2. Антонюк Д. С. Електронні засоби навчання: сутність поняття та їх 
класифікація. Фізико-математична освіта, 2019. Випуск 3(21). С. 12-18. 
3. Бардадим О. В. Класифікація освітніх вебресурсів. Наукові записки. Серія: 
Педагогічні науки, 2022. Вип. 207. С. 89-99.  
4. Дробін А. А. Класифікація цифрових освітніх ресурсів як засіб уточнення 
їх практичного цільового призначення. Наукові записки. Серія: Педагогічні 
науки, 2021. Вип. 201. С. 77-81. 
5. Фіголь Н. М. Переваги та недоліки використання електронних навчальних 
видань. Соціальні комунікації, 2017. Вип. 1 (54). С. 291-296. 
6. Крупко С. Електронні освітні ресурси: реалії сучасного освітнього 
середовища. Проблеми освіти, 2022. Вип. 2(97). С. 226-238. 
7. Сидоренко Т. М., Петькун С. М., Новак О. М. Дистанційна освіта: 
проблеми та перспективи. Інноваційна педагогіка, 2021. Вип. 35. С. 45-48. 
8. Сисоєва С. О., Осадча К. П. Стан, технології та перспективи дистанційного 
навчання у вищій освіті України. Інформаційні технології і засоби 
навчання. 2019. Т. 70. № 2. С. 271-284. 
9. Ларіонова Н. Електронні освітні ігрові ресурси в освітньому процесі 
початкової школи: науково-методичний посібник. Харків : Друкарня 
Мадрид, 2020. 96 с. 
10. Савіцька В. В. Дослідження готовності студентів до використання 
електронних освітніх ресурсів в освітньому процесі університету. Науковий 
часопис НПУ імені М. П. Драгоманова. Серія 5. Педагогічні науки: реалії 
та перспективи, 2021. Вип. 82. С.140-144. 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 101 
  
 
11. Дистанційне та змішане навчання як засіб реалізації індивідуальної 
траєкторії професійного зростання педагога : монографія / за наук. ред. 
І.П. Воротникової. Київ : Київ. ун-т ім. Б. Грінченка, 2022. 256 с. 
12. Технології веб-розробки та дизайну. URL: 
https://www.victoria.lviv.ua/library/students/wd/index.html (дата звернення: 
07.05.2024). 
13. ДистОсвіта - дистанційне навчання інформатики. URL: 
https://dystosvita.org.ua/ (дата звернення: 07.05.2024). 
14. CSE 154: Web Programming. URL: 
https://courses.cs.washington.edu/courses/cse154/19su/index.html (date of the 
request: 07.05.2024). 
15. Веб-технології. URL: https://sites.google.com/view/informatika-nvk2 (дата 
звернення: 07.05.2024). 
16. WordPress Tutorial. URL: https://www.geeksforgeeks.org/wordpress-tutorial/ 
(date of the request: 07.05.2024). 
17. WordPress Tutorial. URL: https://www.tutorialspoint.com/wordpress/index.htm 
(date of the request: 07.05.2024). 
18. Barker D. Web Content Management: Systems, Features, and Best Practices. 
O'Reilly Media, 2016. 374 p. 
19. Getto G., Labriola J. T., Ruszkiewicz Sh. Content Strategy: A How-to Guide. 
Taylor & Francis, 2022. 202 p. 
20. Pulizzi J. Start a Content-First Business, Build a Massive Audience and Become 
Radically Successful (With Little to No Money). Second Edition. McGraw Hill, 
2021. 368 p. 
21. UX Design for Beginners. URL:  https://careerfoundry.com/en/tutorials/ux-
design-for-beginners/what-is-ux-design// (date of the request: 07.05.2024). 
22. UI / UX Design Tutorial – From Zero to Hero with Wireframe + Prototype + 
Design in Figma. URL: https://www.freecodecamp.org/news/ui-ux-design-
tutorial-from-zero-to-hero-with-wireframe- prototype-figma/ (date of the request: 
07.05.2024). 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 102 
  
 
23. UI/UX Design Overview. URL: https://intellipaat.com/blog/ui-ux-design-
tutorial/ (date of the request: 07.05.2024). 
24. UX Design Foundations. URL: https://app.uxcel.com/courses/design-foundations 
(date of the request: 07.05.2024). 
25. Новіков Ф. В. Техніко-економічне обґрунтування сучасних технологій 
виробництва : навчальний посібник. Ф. В. Новіков, Д. Ф. Новіков, О. А. 
Єрмоленко, В. О. Жовтобрюх. Дніпро : ЛІРА, 2022. 256 с. 
26. Лактіонова О. А. Проектне фінансування : навчальний посібник для 
студентів економічних спеціальностей. Вінниця, 2018. 216 с. 
27. Микитюк П. П., Брич В. Я., Микитюк Ю. І., Труш І. М. Управління 
проектами: підручник. Тернопіль, 2021. 416 с. 
28. Atom. URL: https://atom-editor.cc/ (date of the request: 07.05.2024). 
29. Sublime Text - Text Editing, Done Right. URL: https://www.sublimetext.com/ 
(date of the request: 07.05.2024). 
30. Visual Studio Code - Code Editing. URL: https://code.visualstudio.com/ 
31. WebStorm. The JavaScript and TypeScript IDE. URL:  
https://www.jetbrains.com/webstorm/  (date of the request: 07.05.2024).  
32. Інструмент створення блогів WordPress https://uk.wordpress.org/download/ 
(date of the request: 07.05.2024). 
33. Joomla Content Management System (CMS) - try it! It's free! URL:  
https://www.joomla.org/ (date of the request: 07.05.2024). 
34. Drupal - Open Source CMS. URL: https://www.drupal.org/ (date of the request: 
07.05.2024). 
35. Wix.com: Конструктор сайтів. URL: https://uk.wix.com/  (дата звернення: 
07.05.2024). 
36. Трофименко О.Г., Козін О.Б., Задерейко О.В., Плачінда О.Є. Вебтехнології 
та веб-дизайн: навчальний посібник. Одеса: Фенікс, 2019. 284 с. 
37. CSS · Bootstrap. URL: https://getbootstrap.com/docs/3.3/css/ (date of the 
request: 07.05.2024). 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 103 
  
 
38. Доценко С. І. Організація та системи керування базами даних: навч. 
посібник. Харків: УкрДУЗТ, 2023. 117 с.  
39. Мулеса О., Варга Я. Інформаційні системи та реляційні бази даних: навч. 
посібник.  Ужгород, 2023. 132 с. 
40. Ушенко Ю. О., Ковальчук М. Л., Гавриляк М. С., Негрич А. Л. Методологія 
інформаційних систем та баз даних: теоретичний і практичний підходи: 
навч. посібник. Чернівці, Чернівецький нац. ун-т ім. Ю. Федьковича, 2021. 
240 с. 
41. Трофименко О. Г., Прокоп Ю. В., Логінова Н. І., Копитчук І. М. Організація 
баз даних : навч. посібник. 2-ге вид. виправ. і доповн. Одеса : Фенікс, 
2019.  246 с. 
42. Мікула М. П., Коцюк Ю. А., Мікула О. М. Організація баз даних та знань: 
навчальний посібник для студентів спеціальності «Комп’ютерні науки». 
Острог: Видавництво Національного університету «Острозька академія», 
2021. 194 с. 
43. Бородкіна І.Л., Бородкін Г.О. Web-технології та Web-дизайн : застосування 
мови HTML для створення електронних ресурсів. К.: Ліра, 2020. 212 с.  
44. Frain B. Responsive Web Design with HTML5 and CSS. Develop future-proof 
responsive websites using the latest HTML5 and CSS techniques. 3rd edition. 
Birmingham : Packt Publishing Ltd, 2020. 384 р. 
45. Felke-Morris, Terry. Basics of web design: HTML5 & CSS3. 5-th ed. Pearson, 
2019. 496 p. 
46. Laurence Lars Svekis, Maaike van Putten, Rob Percival. JavaScript from 
Beginner to Professional: Learn JavaScript quickly by building fun, interactive, 
and dynamic web apps, games, and pages. Packt Publishing, 2022. 546 p. 
47. Авраменко А. С., Авраменко В. С., Косенюк Г. В. Тестування програмного 
забезпечення. Навчальний посібник. Черкаси: ЧНУ імені Богдана 
Хмельницького, 2017. 284 с. 
48. Трофименко О. Г., Дика А. І. Тестування та забезпечення якості 
програмних систем : навч. посіб. для підгот. здобув. вищої освіти галузі 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 104 
  
 
знань 12 «Інформаційні технології» ; Нац. ун-т «Одес. юрид. академія». 
Одеса, 2024. 195 с. 
49. Тестування верстки. Основні вимоги. URL: 
https://training.qatestlab.com/blog/technical-articles/testing-layout-basic-
requirements/ (дата звернення: 07.05.2024). 
50. Крепич С. Я., Співак І. Я. Якість програмного забезпечення та тестування: 
базовий курс. Навчальний посібник. Тернопіль : ФОП Паляниця В.А., 2020. 
478 с. 
51. Юзабіліті чек-лист тестування сайту. URL:  
https://www.plerdy.com/ua/usability-testing-website-checklist/ (дата звернення: 
07.05.2024). 
52. Титова Н.М., Рідей Н. М., Настрадін В.П., Присяжнюк М. М., 
Мамченко С. М., Артюх С. В., Яворська Р. О. Інформаційні безпека та 
кібербезпека: навчальний посібник. Харків: Право, 2024. 224 с. 
 
 
 
Арк. 
 ЧДТУ 242277.04 ПЗ 
Змн. Арк. № Документа Підпис Дата 105 
      
 
ДОДАТОК А 
 
 
 
 ЗАТВЕРДЖУЮ 
 Зав. кафедри ІТП  
 _________________  Прокопенко Т.О. 
 «____»  ________________ 2024 р. 
 
 
 
 
 
 
ЕЛЕКТРОННИЙ НАВЧАЛЬНИЙ РЕСУРС З ВЕБТЕХНОЛОГІЙ 
 
 
 
 
Специфікація 
482 ЧДТУ242277 – 01  
Аркушів 2 
 
 
Н 
 
Розробник ________________ ОПАНАСЕЦЬ Віктор 
Керівник ________________ РУДНИЦЬКА Юлія 
Н. контроль ________________ ПРОКОПЕНКО Тетяна 
 
    
     
 
2024 
 
2 
482 ЧДТУ 242277 – 01 
Позначення Найменування Примітка 
   
 Документація  
   
482 ЧДТУ 242277-01 12 01 Текст програми  
482 ЧДТУ 242277-01 13 01 Посібник користувача  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
 
 
ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ  
«ЕЛЕКТРОННИЙ НАВЧАЛЬНИЙ РЕСУРС З ВЕБТЕХНОЛОГІЙ» 
 
 
 
 
 
 
 
ТЕКСТ ПРОГРАМИ 
 
 
482 ЧДТУ 242277 – 01 12 01 
Аркушів 14 
 
 
 
 
Розробник             ________________          ОПАНАСЕЦЬ Віктор                 
 
    
       Н  
  
 
 
 
 
 
 
Черкаси, 2024 
 
 
2 
482 ЧДТУ 242277 – 01 12 01 
<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="utf-8"> 
  <meta content="width=device-width, initial-scale=1.0" name="viewport"> 
 
  <title>Web Technology</title> 
  <meta content="" name="description"> 
  <meta content="" name="keywords"> 
 
  <!-- Favicons --> 
  <link href="assets/img/favicon.png" rel="icon"> 
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon"> 
 
  <link 
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,6
00i,700,700i|Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:30
0,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet"> 
 
  <link href="assets/vendor/aos/aos.css" rel="stylesheet"> 
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" 
rel="stylesheet"> 
  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet"> 
  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet"> 
  <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet"> 
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet"> 
 
<link href="assets/css/style.css" rel="stylesheet"> 
 
  </head> 
 
<body> 
 
  <header id="header" class="fixed-top d-flex align-items-center header-
transparent"> 
    <div class="container d-flex align-items-center justify-content-between"> 
 
      <div class="logo"> 
        <h1><a href="index.html"><span>Навчальний ресурс про 
вебтехнології</span></a></h1> 
class="img-fluid"></a>--> 
      </div> 
 
      <nav id="navbar" class="navbar"> 
        <ul> 
          <li><a class="nav-link scrollto active" href="#hero">Домашня</a></li> 
          <li><a class="nav-link scrollto" href="#about">Про нас</a></li> 
          <li><a class="nav-link scrollto" href="#features">Напрями</a></li> 
          <li><a class="nav-link scrollto" href="#gallery">Відгуки</a></li> 
          <li><a class="nav-link scrollto" href="#team">Викладачі</a></li> 
          <li><a class="nav-link scrollto" href="#pricing">Ціни</a></li> 
          <li class="dropdown"><a href="#"><span>Навчальні матеріали</span> <i 
class="bi bi-chevron-down"></i></a> 
 
3 
482 ЧДТУ 242277 – 01 12 01 
            <ul> 
              <li><a href="inner-page.html">Лекції</a></li> 
              <li><a href="inner-practice.html"><span>Практичні 
заняття</span></a></li> 
              <li><a href="inner-video.html">Відео</a></li> 
              <li><a href="inner-more.html">Ресурси</a></li> 
              <li><a href="inner-calendar.html">Навчальний графік</a></li> 
            </ul> 
          </li> 
          <li><a class="nav-link scrollto" href="#contact">Контакти</a></li> 
          <li><a class="nav-link" href="index-in.html">Увійти</a></li> 
          <li><a class="nav-link" href="index-registr.html">Реєстрація</a></li> 
        </ul> 
        <i class="bi bi-list mobile-nav-toggle"></i> 
      </nav><!-- .navbar --> 
 
    </div> 
  </header> 
 
  <section id="hero"> 
 
    <div class="container"> 
      <div class="row justify-content-between"> 
        <div class="col-lg-7 pt-5 pt-lg-0 order-2 order-lg-1 d-flex align-
items-center"> 
          <div data-aos="zoom-out"> 
            <h1>Навчальний ресурс для новачків і не тільки 
<span>Вебтехнології</span></h1> 
            <h2>Теоретичні відомості про вебтехнології, основи фронтенду та 
бекенду, вебслужби і сервіси. Завдання для практичних занять.</h2> 
            <div class="text-center text-lg-start"> 
              <a href="#about" class="btn-get-started scrollto">Розпочати</a> 
            </div> 
          </div> 
        </div> 
        <div class="col-lg-4 order-1 order-lg-2 hero-img" data-aos="zoom-out" 
data-aos-delay="300"> 
          <img src="assets/img/19197568-Photoroom.png" class="img-fluid 
animated" alt=""> 
        </div> 
      </div> 
    </div> 
 
    <svg class="hero-waves" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28 " 
preserveAspectRatio="none"> 
      <defs> 
        <path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 
88-18 58 18 88 18 v44h-352z"> 
      </defs> 
      <g class="wave1"> 
        <use xlink:href="#wave-path" x="50" y="3" fill="rgba(255,255,255, .1)"> 
      </g> 
      <g class="wave2"> 
        <use xlink:href="#wave-path" x="50" y="0" fill="rgba(255,255,255, .2)"> 
 
4 
482 ЧДТУ 242277 – 01 12 01 
      </g> 
      <g class="wave3"> 
        <use xlink:href="#wave-path" x="50" y="9" fill="#fff"> 
      </g> 
    </svg> 
 
  </section><!-- End Hero --> 
 
  <main id="main"> 
 
      <!-- ======= About Section ======= --> 
      <section id="about" class="about"> 
          <div class="container-fluid"> 
 
              <div class="row"> 
                  <div class="col-xl-5 col-lg-6 video-box d-flex justify-
content-center align-items-stretch" data-aos="fade-right"> 
                  </div> 
 
                  <div class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column 
align-items-stretch justify-content-center py-5 px-lg-5" data-aos="fade-left"> 
                      <h3>Складові навчального ресурсу</h3> 
                      <p>Навчальний ресурс створено з метою практичного 
ознайомлення з принципами створення вебсайтів, можливостями сучасних 
вебтехнологій і сервісів.</p> 
 
                      <div class="icon-box" data-aos="zoom-in" data-aos-
delay="100"> 
                          <div class="icon"><i class="bx bx-
fingerprint"></i></div> 
                          <h4 class="title"><a href="">Курс лекцій</a></h4> 
                          <p class="description">Теоретичні відомості з основ 
HTML і CSS, серверна розробка та робота з фреймворками</p> 
                      </div> 
 
                      <div class="icon-box" data-aos="zoom-in" data-aos-
delay="200"> 
                          <div class="icon"><i class="bx bx-gift"></i></div> 
                          <h4 class="title"><a href="">Завдання до практичних 
занять</a></h4> 
                          <p class="description">Опанування на практиці 
інструментів для проектування і створення макета сайту, реалізації клієнтської 
та серверної частини, інтеграції з базою даних та розгортання на хостингу</p> 
                      </div> 
 
                      <div class="icon-box" data-aos="zoom-in" data-aos-
delay="300"> 
                          <div class="icon"><i class="bx bx-atom"></i></div> 
                          <h4 class="title"><a href="">Підсумковий 
тест</a></h4> 
                          <p class="description">Проходження підсумкового тесту 
для перевірки знань, умінь та навичок студентів після завершення навчального 
циклу</p> 
                      </div> 
 
 
5 
482 ЧДТУ 242277 – 01 12 01 
                  </div> 
              </div> 
 
          </div> 
      </section><!-- End About Section --> 
 
      <!-- ======= Team Section ======= --> 
      <section id="team" class="team"> 
          <div class="container"> 
 
              <div class="section-title" data-aos="fade-up"> 
                  <h2>Викладачі</h2> 
                  <p>Наші ментори</p> 
              </div> 
 
              <div class="row" data-aos="fade-left"> 
 
                  <div class="col-lg-3 col-md-6"> 
                      <div class="member" data-aos="zoom-in" data-aos-
delay="100"> 
                          <div class="pic"><img src="assets/img/team/team-
1.jpg" class="img-fluid" alt=""></div> 
                          <div class="member-info"> 
                              <h4>Роман Коляда</h4> 
                              <span>Fullstack developer</span> 
                              <div class="social"> 
                                  <a href=""><i class="bi bi-twitter"></i></a> 
                                  <a href=""><i class="bi bi-facebook"></i></a> 
                                  <a href=""><i class="bi bi-
instagram"></i></a> 
                                  <a href=""><i class="bi bi-linkedin"></i></a> 
                              </div> 
                          </div> 
                      </div> 
                  </div> 
 
                  <div class="col-lg-3 col-md-6 mt-5 mt-md-0"> 
                      <div class="member" data-aos="zoom-in" data-aos-
delay="200"> 
                          <div class="pic"><img src="assets/img/team/team-
2.jpg" class="img-fluid" alt=""></div> 
                          <div class="member-info"> 
                              <h4>Софія Устименко</h4> 
                              <span>Frontend/Mobile developer</span> 
                              <div class="social"> 
                                  <a href=""><i class="bi bi-twitter"></i></a> 
                                  <a href=""><i class="bi bi-facebook"></i></a> 
                                  <a href=""><i class="bi bi-
instagram"></i></a> 
                                  <a href=""><i class="bi bi-linkedin"></i></a> 
                              </div> 
                          </div> 
                      </div> 
                  </div> 
 
 
6 
482 ЧДТУ 242277 – 01 12 01 
                  <div class="col-lg-3 col-md-6 mt-5 mt-lg-0"> 
                      <div class="member" data-aos="zoom-in" data-aos-
delay="300"> 
                          <div class="pic"><img src="assets/img/team/team-
3.jpg" class="img-fluid" alt=""></div> 
                          <div class="member-info"> 
                              <h4>Владислав Амелін</h4> 
                              <span>UI/UX designer</span> 
                              <div class="social"> 
                                  <a href=""><i class="bi bi-twitter"></i></a> 
                                  <a href=""><i class="bi bi-facebook"></i></a> 
                                  <a href=""><i class="bi bi-
instagram"></i></a> 
                                  <a href=""><i class="bi bi-linkedin"></i></a> 
                              </div> 
                          </div> 
                      </div> 
                  </div> 
 
                  <div class="col-lg-3 col-md-6 mt-5 mt-lg-0"> 
                      <div class="member" data-aos="zoom-in" data-aos-
delay="400"> 
                          <div class="pic"><img src="assets/img/team/team-
4.jpg" class="img-fluid" alt=""></div> 
                          <div class="member-info"> 
                              <h4>Марія Сіра</h4> 
                              <span>Адміністратор</span> 
                              <div class="social"> 
                                  <a href=""><i class="bi bi-twitter"></i></a> 
                                  <a href=""><i class="bi bi-facebook"></i></a> 
                                  <a href=""><i class="bi bi-
instagram"></i></a> 
                                  <a href=""><i class="bi bi-linkedin"></i></a> 
                              </div> 
                          </div> 
                      </div> 
                  </div> 
 
              </div> 
 
          </div> 
      </section><!-- End Team Section --> 
      </section><!-- End Pricing Section --> 
      <!-- ======= F.A.Q Section ======= --> 
      <section id="faq" class="faq section-bg"> 
          <div class="container"> 
 
              <div class="section-title" data-aos="fade-up"> 
                  <h2>Питання та відповіді</h2> 
                  <p>Поширені запитання</p> 
              </div> 
 
              <div class="faq-list"> 
                  <ul> 
                      <li data-aos="fade-up"> 
 
7 
482 ЧДТУ 242277 – 01 12 01 
                          <i class="bx bx-help-circle icon-help"></i> <a data-
bs-toggle="collapse" class="collapse" data-bs-target="#faq-list-1"> 
                              Я не маю технічної освіти, чи зможу я 
використовувати навчальний ресурс? 
 
                              <i class="bx bx-chevron-down icon-show"></i><i 
class="bx bx-chevron-up icon-close"></i> 
                          </a> 
                          <div id="faq-list-1" class="collapse show" data-bs-
parent=".faq-list"> 
                              <p> 
                                  Звісно! Навчальні матеріали можуть 
використовувати новачки та студенти, які не мають профільної технічної освіти. 
Наша основна мета — навчити тебе основам і допомогти влаштуватися на роботу в 
IT. 
                              </p> 
                          </div> 
                      </li> 
 
                      <li data-aos="fade-up" data-aos-delay="100"> 
                          <i class="bx bx-help-circle icon-help"></i> <a data-
bs-toggle="collapse" data-bs-target="#faq-list-2" class="collapsed">Чи отримаю 
я сертифікат після закінчення курсу?<i class="bx bx-chevron-down icon-
show"></i><i class="bx bx-chevron-up icon-close"></i></a> 
                          <div id="faq-list-2" class="collapse" data-bs-
parent=".faq-list"> 
                              <p> 
                                  Після закінчення нашого курсу ти отримаєш 
сертифікат. Проте головна мета — це не отримання сертифіката, а здобуття знань 
і навичок для подальшого працевлаштування. 
                              </p> 
                          </div> 
                      </li> 
 
                      <li data-aos="fade-up" data-aos-delay="200"> 
                          <i class="bx bx-help-circle icon-help"></i> <a data-
bs-toggle="collapse" data-bs-target="#faq-list-3" class="collapsed">Який 
відсоток випусників знаходить роботу? <i class="bx bx-chevron-down icon-
show"></i><i class="bx bx-chevron-up icon-close"></i></a> 
                          <div id="faq-list-3" class="collapse" data-bs-
parent=".faq-list"> 
                              <p> 
                                  80% усіх наших випускників працевлаштовані. 
                              </p> 
                          </div> 
                      </li> 
 
                      <li data-aos="fade-up" data-aos-delay="300"> 
                          <i class="bx bx-help-circle icon-help"></i> <a data-
bs-toggle="collapse" data-bs-target="#faq-list-4" class="collapsed">Чи 
допомагаєте Ви з працевлаштуванням? <i class="bx bx-chevron-down icon-
show"></i><i class="bx bx-chevron-up icon-close"></i></a> 
                          <div id="faq-list-4" class="collapse" data-bs-
parent=".faq-list"> 
                              <p> 
 
8 
482 ЧДТУ 242277 – 01 12 01 
                                  Наші координатори будуть працювати з тобою та 
робити все можливе, аби в тебе вийшло працевлаштуватись. Ми допоможемо тобі з 
резюме та портфоліо, а також із профілями на всіх популярних IT-платформах. 
                                  Ми підготуємо тебе до співбесіди та надамо 
доступ до вакансій. 
                              </p> 
                          </div> 
                      </li> 
 
                      <li data-aos="fade-up" data-aos-delay="400"> 
                          <i class="bx bx-help-circle icon-help"></i> <a data-
bs-toggle="collapse" data-bs-target="#faq-list-5" class="collapsed">Мені немає 
18 років, чи можу я подати заявку на навчання?<i class="bx bx-chevron-down 
icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a> 
                          <div id="faq-list-5" class="collapse" data-bs-
parent=".faq-list"> 
                              <p> 
                                  Ми навчаємо на курсі повного дня з 16 років — 
це той вік, з якого можна працювати за згодою батьків. 
                              </p> 
                          </div> 
                      </li> 
 
                  </ul> 
              </div> 
 
          </div> 
      </section><!-- End F.A.Q Section --> 
      <!-- ======= Contact Section ======= --> 
      <section id="contact" class="contact"> 
          <div class="container"> 
 
              <div class="section-title" data-aos="fade-up"> 
                  <h2>Популярне</h2> 
                  <p>Контакти</p> 
              </div> 
 
              <div class="row"> 
 
                  <div class="col-lg-4" data-aos="fade-right" data-aos-
delay="100"> 
                      <div class="info"> 
                          <div class="address"> 
                              <i class="bi bi-geo-alt"></i> 
                              <h4>Місцезнаходження:</h4> 
                              <p>бульвар Шевченка, 460, Черкаси, Україна, 
18006</p> 
                          </div> 
 
                          <div class="email"> 
                              <i class="bi bi-envelope"></i> 
                              <h4>Email:</h4> 
                              <p>[email protected]</p> 
                          </div> 
 
 
9 
482 ЧДТУ 242277 – 01 12 01 
                          <div class="phone"> 
                              <i class="bi bi-phone"></i> 
                              <h4>Телефон:</h4> 
                              <p>+38000 000 00 00</p> 
                          </div> 
 
                      </div> 
 
                  </div> 
 
                  <div class="col-lg-8 mt-5 mt-lg-0" data-aos="fade-left" data-
aos-delay="200"> 
 
                      <form action="forms/contact.php" method="post" 
role="form" class="php-email-form"> 
                          <div class="row"> 
                              <div class="col-md-6 form-group"> 
                                  <input type="text" name="name" class="form-
control" id="name" placeholder="Ваше ім'я " required> 
                              </div> 
                              <div class="col-md-6 form-group mt-3 mt-md-0"> 
                                  <input type="email" class="form-control" 
name="email" id="email" placeholder="Ваш e-mail" required> 
                              </div> 
                          </div> 
                          <div class="form-group mt-3"> 
                              <input type="text" class="form-control" 
name="subject" id="subject" placeholder="Тема" required> 
                          </div> 
                          <div class="form-group mt-3"> 
                              <textarea class="form-control" name="message" 
rows="5" placeholder="Повідомлення" required></textarea> 
                          </div> 
                          <div class="my-3"> 
                              <div class="loading">Loading</div> 
                              <div class="error-message"></div> 
                              <div class="sent-message">Your message has been 
sent. Thank you!</div> 
                          </div> 
                          <div class="text-center"><button 
type="submit">Надіслати</button></div> 
                      </form> 
 
                  </div> 
 
              </div> 
 
          </div> 
      </section><!-- End Contact Section --> 
 
  </main><!-- End #main --> 
 
  <!-- ======= Footer ======= --> 
  <footer id="footer"> 
    <div class="footer-top"> 
 
10 
482 ЧДТУ 242277 – 01 12 01 
      <div class="container"> 
        <div class="row"> 
 
          <div class="col-lg-4 col-md-6"> 
            <div class="footer-info"> 
              <h3>Навчальний ресурс про вебтехнології</h3> 
              <p class="pb-3"><em>Ознайомлення з принципами створення 
вебсайтів, можливостями сучасних вебтехнологій та сервісів.</em></p> 
              <p> 
                бульвар Шевченка, 460<br> 
                Черкаси, Україна<br><br> 
                <strong>Телефон:</strong> +3800 000 00 00<br> 
                <strong>Email:</strong> [email protected]<br> 
              </p> 
              <div class="social-links mt-3"> 
                <a href="#" class="twitter"><i class="bx bxl-twitter"></i></a> 
                <a href="#" class="facebook"><i class="bx bxl-
facebook"></i></a> 
                <a href="#" class="instagram"><i class="bx bxl-
instagram"></i></a> 
                <a href="#" class="google-plus"><i class="bx bxl-
skype"></i></a> 
                <a href="#" class="linkedin"><i class="bx bxl-
linkedin"></i></a> 
              </div> 
            </div> 
          </div> 
 
          <div class="col-lg-2 col-md-6 footer-links"> 
            <h4>Корисні посилання</h4> 
            <ul> 
              <li><i class="bx bx-chevron-right"></i> <a 
href="#">Домашня</a></li> 
              <li><i class="bx bx-chevron-right"></i> <a href="#">Про 
нас</a></li> 
              <li><i class="bx bx-chevron-right"></i> <a 
href="#">Напрями</a></li> 
              <li><i class="bx bx-chevron-right"></i> <a 
href="#">Умови</a></li> 
              <li><i class="bx bx-chevron-right"></i> <a href="#">Політика 
конфіденційності</a></li> 
            </ul> 
          </div> 
 
          <div class="col-lg-2 col-md-6 footer-links"> 
            <h4>Напрями</h4> 
            <ul> 
              <li><i class="bx bx-chevron-right"></i> <a 
href="#">Вебдизайн</a></li> 
              <li><i class="bx bx-chevron-right"></i> <a 
href="#">Веброзробка</a></li> 
              <li><i class="bx bx-chevron-right"></i> <a href="#">Графічний 
дизайн</a></li> 
              <li><i class="bx bx-chevron-right"></i> <a 
href="#">Адміністрування</a></li> 
 
11 
482 ЧДТУ 242277 – 01 12 01 
              <li><i class="bx bx-chevron-right"></i> <a 
href="#">Оптимізація</a></li> 
            </ul> 
          </div> 
 
          <div class="col-lg-4 col-md-6 footer-newsletter"> 
            <h4>Наша розсилка</h4> 
            <p>Підписуйтеся на нашу розсилку та щотижня отримуйте найкращі 
пропозиції, натхнення інформацію про розіграші й сезонні новинки</p> 
            <form action="" method="post"> 
              <input type="email" name="email"><input type="submit" 
value="Підписатися"> 
            </form> 
 
          </div> 
 
        </div> 
      </div> 
    </div> 
 
     
  </footer><!-- End Footer --> 
 
  <a href="#" class="back-to-top d-flex align-items-center justify-content-
center"><i class="bi bi-arrow-up-short"></i></a> 
  <div id="preloader"></div> 
 
  <!-- Vendor JS Files --> 
  <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script> 
  <script src="assets/vendor/aos/aos.js"></script> 
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script> 
  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script> 
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script> 
  <script src="assets/vendor/php-email-form/validate.js"></script> 
 
  <!-- Template Main JS File --> 
  <script src="assets/js/main.js"></script> 
 
</body> 
 
</html> 
 
body { 
  font-family: "Open Sans", sans-serif; 
  color: #444444; 
} 
 
a { 
  color: #1acc8d; 
  text-decoration: none; 
} 
 
a:hover { 
  color: #34e5a6; 
  text-decoration: none; 
 
12 
482 ЧДТУ 242277 – 01 12 01 
} 
 
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
  font-family: "Montserrat", sans-serif; 
} 
 
/*-------------------------------------------------------------- 
# Preloader 
--------------------------------------------------------------*/ 
#preloader { 
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  z-index: 9999; 
  overflow: hidden; 
  background: #fff; 
} 
 
#preloader:before { 
  content: ""; 
  position: fixed; 
  top: calc(50% - 30px); 
  left: calc(50% - 30px); 
  border: 6px solid #1acc8d; 
  border-top-color: #d2f9eb; 
  border-radius: 50%; 
  width: 60px; 
  height: 60px; 
  animation: animate-preloader 1s linear infinite; 
} 
 
@keyframes animate-preloader { 
  0% { 
    transform: rotate(0deg); 
  } 
 
  100% { 
    transform: rotate(360deg); 
  } 
} 
 
 
.back-to-top { 
  position: fixed; 
  visibility: hidden; 
  opacity: 0; 
  right: 15px; 
  bottom: 15px; 
 
13 
482 ЧДТУ 242277 – 01 12 01 
  z-index: 996; 
  background: #1acc8d; 
  width: 40px; 
  height: 40px; 
  border-radius: 50px; 
  transition: all 0.4s; 
} 
 
.back-to-top i { 
  font-size: 28px; 
  color: #fff; 
  line-height: 0; 
} 
 
.back-to-top:hover { 
  background: #2be4a2; 
  color: #fff; 
} 
 
.back-to-top.active { 
  visibility: visible; 
  opacity: 1; 
} 
 
 
@media screen and (max-width: 768px) { 
  [data-aos-delay] { 
    transition-delay: 0 !important; 
  } 
} 
 
 
#header { 
  height: 80px; 
  transition: all 0.5s; 
  z-index: 997; 
  transition: all 0.5s; 
  background: rgba(1, 4, 136, 0.9); 
} 
 
#header.header-transparent { 
  background: transparent; 
} 
 
#header.header-scrolled { 
  background: rgba(1, 4, 136, 0.9); 
  height: 60px; 
} 
 
#header .logo h1 { 
  font-size: 28px; 
  margin: 0; 
  padding: 0; 
  line-height: 1; 
  font-weight: 700; 
 
14 
482 ЧДТУ 242277 – 01 12 01 
} 
 
#header .logo h1 a, 
#header .logo h1 a:hover { 
  color: #fff; 
  text-decoration: none; 
} 
 
#header .logo img { 
  padding: 0; 
  margin: 0; 
  max-height: 40px; 
} 
 
 
.navbar { 
  padding: 0; 
} 
 
.navbar ul { 
  margin: 0; 
  padding: 0; 
  display: flex; 
  list-style: none; 
  align-items: center; 
} 
 
.navbar li { 
  position: relative; 
} 
.navbar a, 
.navbar a:focus { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 10px 0 10px 30px; 
  font-size: 15px; 
  font-weight: 500; 
  font-family: "Poppins", sans-serif; 
  color: rgba(255, 255, 255, 0.7); 
  white-space: nowrap; 
  transition: 0.3s; 
} 
 
 
 
 
  
 
 
ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ  
«ЕЛЕКТРОННИЙ НАВЧАЛЬНИЙ РЕСУРС З ВЕБТЕХНОЛОГІЙ» 
 
 
 
 
 
 
 
ПОСІБНИК КОРИСТУВАЧА 
 
482 ЧДТУ 242277 – 01 13 01 
Аркушів 11 
 
 
 
 
 
Розробник             ________________          ОПАНАСЕЦЬ Віктор                  
 
    
       Н  
  
 
 
 
 
 
 
 
 
Черкаси, 2024
 
2 
482 ЧДТУ 242277 – 01 13 01 
Для запуску електронного навчального ресурсу з вебтехнологій в одному 
з інтернет-браузерів  Chrome, Opera чи Firefox необхідно перейти за адресою 
http://localhost:3000/. В налаштуваннях браузера повинні бути ввімкнуті 
JavaScript, Cookies. 
Вигляд головної сторінки електронного навчального ресурсу з 
вебтехнологій наведено на рис. 1.  
 
 
Рисунок 1 – Головна сторінка електронного навчального ресурсу з 
вебтехнологій 
Далі на головній сторінці електронного навчального ресурсу з вебтехнологій 
розміщено розділи «Складові навчального ресурсу», «Статті», «Навчальні 
матеріали», «Питання – Відповіді» (рис. 4.18), а також посилання на облікові 
записи системи підтримки прийняття рішень при ціноутворенні в торгівлі 
соціальних мережах у вигляді кнопок, які при наведені курсором стають 
чіткішими (рис. 4.19) 
 
 
 
3 
482 ЧДТУ 242277 – 01 13 01 
 
Рисунок 2 – Розділ «Про нас» на головній сторінці електронного навчального 
ресурсу з вебтехнологій 
 
 
Рисунок 3 – Розділ «Навчання» на головній сторінці електронного навчального 
ресурсу з вебтехнологій 
 
 
 
4 
482 ЧДТУ 242277 – 01 13 01 
 
 
Рисунок 4 – Розділ «Розкрий свій потенціал у навчанні» на головній сторінці 
електронного навчального ресурсу з вебтехнологій 
 
 
 
Рисунок 5 – Розділ «Початок твоєї кар’єри» на головній сторінці електронного 
навчального ресурсу з вебтехнологій 
 
 
 
5 
482 ЧДТУ 242277 – 01 13 01 
 
Рисунок 6 – Розділ «Відгуки» на головній сторінці електронного навчального 
ресурсу з вебтехнологій 
 
 
 
 
Рисунок 7 – Розділ «Викладачі» на головній сторінці електронного навчального 
ресурсу з вебтехнологій 
 
 
6 
482 ЧДТУ 242277 – 01 13 01 
 
Рисунок 8 – Розділ «Формат навчання» на головній сторінці електронного 
навчального ресурсу з вебтехнологій 
 
 
 
 
Рисунок 9 – Розділ «Питання та відповіді» на головній сторінці електронного 
навчального ресурсу з вебтехнологій 
 
 
 
 
7 
482 ЧДТУ 242277 – 01 13 01 
 
 
Рисунок 10 – Форма зворотного зв’язку та форма розсилки на головній сторінці 
електронного навчального ресурсу з вебтехнологій 
 
 Для входу користувача в обліковий запис у хедері електронного 
навчального ресурсу з вебтехнологій розміщена кнопка «Увійти». 
 
 
Рисунок 11 – Форма для входу в обліковий запис 
 
8 
482 ЧДТУ 242277 – 01 13 01 
 
Для реєстрації нового користувача електронного навчального ресурсу у 
хедері сайту розміщена кнопка «Реєстрація». 
 
Рисунок 12 – Форма для реєстрації користувача електронного навчального 
ресурсу з вебтехнологій 
 
При переході на сторінку «Лекції» користувач одержить доступ до 
теоретичних матеріалів і зможе завантажити на свій комп’ютер (рис. 13). 
 
 
9 
482 ЧДТУ 242277 – 01 13 01 
 
Рисунок 13 – Сторінка «Лекції» 
 
При переході на сторінку «Практичні заняття» користувач одержить 
доступ до завдань до практичних занять та детальних інструкцій про порядок їх 
використання (рис. 14). 
 
Рисунок 14 – Сторінка «Практичні заняття» 
 
 
10 
482 ЧДТУ 242277 – 01 13 01 
При переході на сторінку «Відео» користувач одержить доступ до 
мультимедійної інформації та зможе її переглянути у браузері (рис. 15). 
 
Рисунок 15 – Сторінка «Відео» 
 
При переході на сторінку «Ресурси», користувач одержить посилання на 
інформаційні ресурси або програмні продукти дотичні до вебтехнологій (рис. 
16). 
 
Рисунок 16 – Сторінка «Ресурси» 
 
11 
482 ЧДТУ 242277 – 01 13 01 
При переході на сторінку «Навчальний графік», користувач одержить 
розклад занять (рис. 17). 
 
 
Рисунок 17 – Сторінка «Навчальний графік»