Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/9040
Title: Інформаційна WEB-система освітнього проекту Next- Erasmus+
Authors: Метелап, Володимир Володимирович
Лобачова, Катерина Русланівна
Keywords: ІНЖЕНЕРІЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ;WEB- СТОРІНКА;ПРОЕКТ NEXT-ERASMUS+;ІНФООМАЦІЙНА СИСТЕМА;CMS WORDPRESS;ТЕСТУВАННЯ;ДВОМОВНІСТЬ;СТРУКТУРА НАПОВНЕННЯ;ІНТЕРФЕЙС КОРИСТУВАЧА;ЦИФРОВИЙ РЕСУРС;SOFTWARE ENGINEERING;WEB PAGE;NEXT-ERASMUS+;PROJECT;INFORMATION SYSTEM;CMS WORDPRESS;TESTING;BILINGUALITY;CONTENT STRUCTURE;USER INTERFACE;DIGITAL RESOURCE
Issue Date: 21-Jun-2025
Abstract: АНОТАЦІЯ Виконавець: Лобачова Катерина Русланівна Назва роботи: «Інформаційна WEB-система освітнього проєкту Next- Erasmus+». Спеціальність: 121 Інженерія програмного забезпечення. Навчальний заклад: «Черкаський державний технологічний університет» м. Черкаси, 2025р. У кваліфікаційній роботі розглянуто процес розробки інформаційного web- ресурсу в рамках сайту кафедри програмного забезпечення автоматизованих систем Черкаського державного технологічного університету, присвяченого міжнародному освітньому проекту Next-Erasmus+. Метою роботи є створення web-ресурсу, що ефективно поєднує інформативність, структурованість та зручність доступу для різних категорій користувачів, зокрема студентів, викладачів та міжнародних партнерів. Основні завдання: аналіз наявного стану web-ресурсу, визначення цільової аудиторії, формування вимог, проектування логіки представлення контенту, реалізація, створення двомовної версії ресурсу, подальше тестування. Об’єктом роботи є процес представлення інформації про участь кафедри ПЗАС у міжнародному проекті академічної мобільності Next-Erasmus+ за допомогою сучасних цифрових засобів. Предметом роботи виступає web-ресурс, який розробляється як частина сайту кафедри для інформування відвідувачів про перебіг і результати участі в проекті Next-Erasmus+. Він реалізує структуровану подачу інформації, підтримує двомовність, забезпечує зручну навігацію та виконує представницьку функцію. Обсяг роботи – 168 сторінок; вона містить 3 розділи, 1 таблицю, 61 рисунок, 43 джерела у списку посилань, 4 додатки.
ANNOTATION Performer: Lobachova Kateryna Ruslanivna. The title of the work: «Information WEB system of the Next-Erasmus++ educational project». Speciality: 121 Software Engineering. Educational institution: Cherkasy State Technological University, Cherkasy, 2025. The qualification thesis explores the process of developing an informational web resource within the website of the Department of Software Engineering at Cherkasy State Technological University, dedicated to the international educational project Next- Erasmus+. The aim of the work is to create a web resource that effectively combines informativeness, structured content, and convenient access for various user categories, including students, faculty, and international partners. The main objectives include: analysis of the current state of the web resource, identification of the target audience, formulation of requirements, design of content presentational logic, implementation, creation of a bilingual version, and testing. The object of the work is the process of presenting information about the participation of the Department of Software Engineering in the Next-Erasmus+ international academic mobility project using modern digital tools. The subject of the work is a web resource developed as part of the department’s website to inform visitors about the goals, progress, and outcomes of participation in the project. It offers structured content presentation, includes both Ukrainian and English versions, ensures user-friendly navigation, and fulfils a representative role. The thesis comprises 168 pages; includes 3 chapters, 1 table, 61 pictures, 43 references in the bibliography, and 4 appendices.
URI: https://er.chdtu.edu.ua/handle/ChSTU/9040
Appears in Collections:121 Інженерія програмного забезпечення (Інженерія програмного забезпечення)



Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.

Extracted text
ЧДТУ 252158.010 ПЗ 
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ 
Факультет інформаційних технологій і систем 
Кафедра програмного забезпечення автоматизованих систем 
 
 
ПОЯСНЮВАЛЬНА ЗАПИСКА 
до кваліфікаційної роботи 
бакалавра 
 
    на тему:  «Інформаційна WEB-система освітнього проекту Next-
Erasmus+» 
 
 
                                                          Виконала: студентка 4 курсу, групи ПЗ-2104 
                                                          спеціальності  
                                                          121 «Інженерія програмного забезпечення» 
                                                                     (шифр і назва напрямку підготовки) 
 
 
 
Студент Лобачова К.Р. 
 (прізвище та ініціали) 
Керівник  Метелап В.В. 
 (прізвище та ініціали) 
Рецензент  Захарова М.В. 
 (прізвище та ініціали) 
 
 
 
Черкаси 2025 
6 
ЧДТУ 252158.010 ПЗ 
Черкаський державний технологічний університет  
повне найменування вищого навчального закладу 
Факультет             інформаційних технологій і систем  
Кафедра   програмного забезпечення автоматизованих систем  
Освітній рівень  бакалавр  
Спеціальність  121 «Інженерія програмного забезпечення»  
Освітня програма Інженерія програмного забезпечення  
 
ЗАТВЕРДЖУЮ 
Зав. кафедри ПЗАС, професор 
                                        Голуб С.В. 
«___» _______________ 2025 року 
 
З А В Д А Н Н Я 
НА КВАЛІФІКАЦІЙНУ РОБОТУ СТУДЕНТУ 
                 Лобачова Катерина Русланівна  
(прізвище, ім’я, по батькові) 
1.Тему проекту (роботи) «Інформаційна WEB-система освітнього проєкту Next-Erasmus+»  
Керівник проекту (роботи) Метелап Володимир Володимирович кандидат наук, доцент  
(прізвище, ім’я , по батькові, науковий ступінь, вчене звання) 
Затверджені наказом Черкаського державного технологічного університету від «25» лютого 
2025 року №53/03-03. 
2. Строк подання студентом проекту (роботи)  17 червня 2025 р.  
3. Вхідні дані до проекту (роботи) завдання, видане науковим керівником; інформація по 
проекту Next-Erasmus+  
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно розробити)  
Вступ; 
Розділ 1. Існуючі методи та засоби розв’язання поставлених завдань;  
Розділ 2. Впровадження результатів досліджень у практику проектування  
Розділ 3. Розробка та тестування програмного забезпечення;  
Висновки;  
Список використаних джерел;  
Додатки.  
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових робіт проекту;  
Cлайд(и)     1 -_____________________________________________________________________ 
6. Консультанти розділів проекту (роботи) 
7 
ЧДТУ 252158.010 ПЗ 
 
Прізвище, ініціали та посади Підпис, дата 
Розділ 
консультанта Завдання видав Завдання прийняв 
1    
2    
3    
 
7. Дата видачі завдання 02 грудня 2024 р. 
 
КАЛЕНДАРНИЙ ПЛАН 
Строк виконання 
№ 
Назва етапів випускної роботи етапів випускної Примітки 
п/п 
роботи 
1 Постановка задачі 05.12.2024 виконано 
2 Підготовка завдання 13.12.2024 виконано 
3 Погодження завдання 16.12.2024 виконано 
4 Затвердження завдання 19.02.2025 виконано 
 Основна стадія   
1 Підбір матеріалів 6.01.2025 виконано 
2 Аналіз шляхів вирішення поставленої задачі 21.01.2025 виконано 
3 Розрахунок основних параметрів роботи 6.02.2025 виконано 
4 Вибір кінцевого варіанту проектного рішення 26.02.2025 виконано 
5 Оформлення первісної редакції роботи 11.03.2025 виконано 
 Заключна стадія   
1 Узгодження прийнятих проектних рішень з виконано 
31.04.2025 
керівником 
2 Оформлення пояснювальної записки роботи в виконано 
13.05.2025 
кінцевій редакції 
3 Попередній захист роботи 15.05.2025 виконано 
4 Затвердження роботи 1.06.2025 виконано 
5 Рецензування роботи 13.06.2025 виконано 
6 Захист роботи 20.06.2025  
 
Студент _____________________ Лобачова К.Р. 
  (підпис)   (прізвище та ініціали) 
 
Керівник проекту (роботи) _____________________ Метелап В.В. 
  (підпис)   (прізвище та ініціали) 
 
 
6 
ЧДТУ 252158.010 ПЗ 
АНОТАЦІЯ 
Виконавець: Лобачова Катерина Русланівна 
Назва роботи: «Інформаційна WEB-система освітнього проєкту Next-
Erasmus+». 
Спеціальність: 121 Інженерія програмного забезпечення. 
Навчальний заклад: «Черкаський державний технологічний університет» м. 
Черкаси, 2025р. 
У кваліфікаційній роботі розглянуто процес розробки інформаційного web-
ресурсу в рамках сайту кафедри програмного забезпечення автоматизованих 
систем Черкаського державного технологічного університету, присвяченого 
міжнародному освітньому проекту Next-Erasmus+. 
Метою роботи є створення web-ресурсу, що ефективно поєднує 
інформативність, структурованість та зручність доступу для різних категорій 
користувачів, зокрема студентів, викладачів та міжнародних партнерів.  
Основні завдання: аналіз наявного стану web-ресурсу, визначення цільової 
аудиторії, формування вимог, проектування логіки представлення контенту, 
реалізація, створення двомовної версії ресурсу, подальше тестування. 
Об’єктом роботи є процес представлення інформації про участь кафедри 
ПЗАС у міжнародному проекті академічної мобільності Next-Erasmus+ за 
допомогою сучасних цифрових засобів. 
Предметом роботи виступає web-ресурс, який розробляється як частина 
сайту кафедри для інформування відвідувачів про перебіг і результати участі в 
проекті Next-Erasmus+. Він реалізує структуровану подачу інформації, підтримує 
двомовність, забезпечує зручну навігацію та виконує представницьку функцію.  
Обсяг роботи – 168 сторінок; вона містить 3 розділи, 1 таблицю, 61 рисунок, 
43 джерела у списку посилань, 4 додатки. 
Ключові слова. ІНЖЕНЕРІЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ, WEB-
СТОРІНКА, ПРОЕКТ NEXT-ERASMUS+, ІНФООМАЦІЙНА СИСТЕМА, CMS 
WORDPRESS, ТЕСТУВАННЯ, ДВОМОВНІСТЬ, СТРУКТУРА НАПОВНЕННЯ, 
ІНТЕРФЕЙС КОРИСТУВАЧА, ЦИФРОВИЙ РЕСУРС.  
6 
ЧДТУ 252158.010 ПЗ 
ANNOTATION 
Performer: Lobachova Kateryna Ruslanivna. 
The title of the work: «Information WEB system of the Next-Erasmus++ 
educational project». 
Speciality: 121 Software Engineering.  
Educational institution: Cherkasy State Technological University, Cherkasy, 
2025. 
The qualification thesis explores the process of developing an informational web 
resource within the website of the Department of Software Engineering at Cherkasy 
State Technological University, dedicated to the international educational project Next-
Erasmus+. 
The aim of the work is to create a web resource that effectively combines 
informativeness, structured content, and convenient access for various user categories, 
including students, faculty, and international partners.  
The main objectives include: analysis of the current state of the web resource, 
identification of the target audience, formulation of requirements, design of content 
presentational logic, implementation, creation of a bilingual version, and testing. 
The object of the work is the process of presenting information about the 
participation of the Department of Software Engineering in the Next-Erasmus+ 
international academic mobility project using modern digital tools. 
The subject of the work is a web resource developed as part of the department’s 
website to inform visitors about the goals, progress, and outcomes of participation in the 
project. It offers structured content presentation, includes both Ukrainian and English 
versions, ensures user-friendly navigation, and fulfils a representative role.  
The thesis comprises 168 pages; includes 3 chapters, 1 table, 61 pictures, 43 
references in the bibliography, and 4 appendices.  
Keywords.  SOFTWARE ENGINEERING, WEB PAGE, NEXT-ERASMUS+, 
PROJECT, INFORMATION SYSTEM, CMS WORDPRESS, TESTING, 
BILINGUALITY, CONTENT STRUCTURE, USER INTERFACE, DIGITAL 
RESOURCE.  
7 
ЧДТУ 252158.010 ПЗ 
6 
 
ЧДТУ 252158.010 ПЗ 
7 
ЧДТУ 252158.010 ПЗ 
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ І СКОРОЧЕНЬ 
ПЗАС Програмне забезпечення автоматизованих систем 
ЧДТУ Черкаський державний технологічний університет 
CMS Content Management System 
CSS Cascading Style Sheets – каскадні таблиці стилів 
HTML HyperText Markup Language – мова гіпертекстової 
розмітки 
ПЗ Програмне забезпечення 
БД База даних 
СУБД Система управління базами даних 
UML Unified Modeling Language – уніфікована мова 
моделювання 
URL Uniform Resource Locator – адреса ресурсу в мережі 
інтернет 
UI User Interface - інтерфейс користувача 
UX User Experience – користувацький досвід 
px Піксель 
drag-and-drop Форма виконання певних дій  у графічних 
інтерфейсах користувача за допомогою миші 
Don`t Make Me  Підхід у дизайні, що отримав назву від однойменної 
Think книги Стіва Круга 
Кастомізація Налаштування під конкретні потреби користувача чи 
 проекту 
Верстка Процес розміщення елементів на web-сторінці згідно 
 з дизайнерським макетом 
Контент Інформаційне наповнення web-сторінки 
Айдентика Візуальна ідентичність проекту 
 
6 
ЧДТУ 252158.010 ПЗ 
ВСТУП 
Актуальність теми. Розробка web-порталу для проекту Next-Erasmus+ є 
актуальною задачею в контексті програмного забезпечення, оскільки охоплює всі 
ключові етапи життєвого циклу ПЗ: від збору вимог і проектування до реалізації, 
тестування та підтримки. Реалізація такого проекту вимагає системного підходу 
до аналізу потреб користувачів, моделювання поведінки системи, формування 
логіки взаємодії компонентів і забезпечення надійності та зручності інтерфейсу.  
Окрім технічних аспектів, важливою є інформаційна й комунікаційна 
функція створеного ресурсу. Він буде дієвим інструментом популяризації проекту 
Next-Erasmus+, наочно демонструючи участь кафедри ПЗАС у міжнародних 
ініціативах. Наявність повноцінного і структурованого підрозділу на сайті не 
лише підвищить обізнаність студентів та викладачів, а й сприятиме підвищенню 
іміджу кафедри серед партнерів, потенційних абітурієнтів та академічної 
спільноти.  
Таким чином, ресурс виконує подвійну функцію: з одного боку, він являє 
собою окремий модуль, інтегрований у загальну систему, а з іншого – ефективний 
засіб зовнішнього представлення проекту й кафедри для цільової аудиторії.  
Мета і завдання розробки. Мета розробки полягає у створенні 
програмного забезпечення, як  сучасного, зручного та інтегрованого 
інформаційного ресурсу на офіційному сайті кафедри ПЗАС ЧДТУ для 
висвітлення участі в міжнародному проекті Next-Erasmus+. Web-рішення повинно 
відповідати принципам структурованої розробки, забезпечувати надійність, 
функціональність, простоту в користуванні, а також відповідати стандартам 
інтеграції з вже існуючим сайтом, реалізованим з використанням CMS WordPress. 
Крім того, ресурс має бути іміджевим інструментом для кафедри та ЧДТУ в 
цілому, демонструючи їх участь у європейських освітніх ініціативах, відкритість 
до міжнародної співпраці, доступність інформації для студентів, партнерів та 
інших зацікавлених сторін.  
Для досягнення мети потрібно виконати наступні завдання: 
1 Проаналізувати існуючу структуру сайту кафедри щоб виявити 
6 
ЧДТУ 252158.010 ПЗ 
можливості інтеграції нового підрозділу.  
2 Визначити категорії цільової аудиторії (студенти, викладачі, партнери, 
гості сайту) та інформаційні потреби.  
3 Сформулювати функціональні та нефункціональні вимоги до ресурсу. 
4 Описати логіку web-ресурсу з урахуванням зручної навігації, 
адаптивності та інтуїтивного інтерфейсу.  
5 Обрати відповідні технології для реалізації проекту з урахуванням 
інтеграції у середовище CMS WordPress. 
6 Реалізувати web-ресурс з використанням HTML, CSS, JavaScript та 
конструктора Elementor.  
7 Забезпечити двомовність підрозділу (українську та англійську версії). 
8 Інтегрувати підрозділ в існуючий web-сайт без порушення загальної 
структури і стилістики.  
9 Провести тестування ресурсу у різних браузерах, перевірити 
відповідність вимогам та отримати відгуки від користувачів.  
Об’єкт розробки. Об’єктом розробки є впровадження нового 
функціонального модуля сайту кафедри у вигляді окремого інформаційного web-
ресурсу.  Він має забезпечити ефективне подання даних про участь у проекті 
Next-Erasmus+ та покращити взаємодію користувачів з сайтом.  
Необхідність створення окремого підрозділу зумовлена тим, що існуючий 
сайт кафедри містить обмежений обсяг інформації про участь у проекті Next-
Erasmus+ і не забезпечує зручного доступу до повної інформації про діяльність у 
рамках проекту. Необхідно покращити способи представлення матеріалів, у тому 
числі з урахуванням сучасних вимог до структури, доступності та візуальної 
подачі даних.  
Методи розробки. У процесі інформаційної сторінки для представлення 
участі кафедри ПЗАС у програмі Next-Erasmus+ будуть застосовані методи, що 
гарантуватимуть відповідність технічним, функціональним і візуальним вимогам.  
Планується застосування аналітичних методів для оцінки поточного стану 
сайту, виявлення інформаційних прогалин, а також формування вимог до 
7 
ЧДТУ 252158.010 ПЗ 
структури й змісту нового підрозділу.  
Для проектування логіки функціонування ресурсу, взаємодії користувача з 
інтерфейсом, а також для побудови структурної та поведінкової моделі ресурсу у 
вигляді UML-діаграм будуть застосовані методи моделювання. 
Застосування системного підходу дозволить розглядати web-ресурс не як 
окремий елемент, а як частину вже функціонуючої системи, що забезпечить 
коректну інтеграцію з існуючим сайтом кафедри.  
Методи проектування інтерфейсів допоможуть створити логічно зрозумілу і 
візуально привабливу структуру для ефективної взаємодії користувачів із 
ресурсом.  
На етапі реалізації планується використання емпіричних методів 
тестування, які дозволять виявити й усунути потенційні недоліки у 
функціонуванні та зручності використання ресурсу.  
Опис отриманих результатів. У результаті виконання кваліфікаційної 
роботи було розроблено і впроваджено  інформаційний web-ресурс, що став 
складовою офіційного сайту кафедри ПЗАС ЧДТУ. Цей підрозділ висвітлює 
участь кафедри у програмі міжнародної академічної мобільності Next-Erasmus+ і 
виконує як інформативну, так і презентаційну функцію.  
З точки зору інженерії програмного забезпечення реалізація проекту 
охоплювала повний цикл розробки: від збору вимог користувачів і моделювання 
логіки системи до розгортання готового рішення. Було використано підходи 
структурного аналізу, формалізацію функціональних та нефункціональних вимог, 
а також побудовано низку UML-діаграм. Це дозволило структурно представити 
очікувану поведінку системи та оптимізувати процес розробки.  
Особливу увагу приділено питанням інтеграції з існуючою 
інфраструктурою сайту, сумісності дизайну та логіки навігації, збереженню 
єдиного стилю оформлення та уникненню конфліктів із поточним функціоналом. 
Було впроваджено багатомовну підтримку (українська та англійська версії), що 
відповідає міжнародному характеру програми Erasmus+. 
Розроблений web-ресурс відповідає сучасним вимогам до інформаційних 
8 
ЧДТУ 252158.010 ПЗ 
ресурсів у освітньому  середовищі: представлена інформація логічно 
структурована, легко сприймається користувачами. З точки зори інженерії 
програмного забезпечення, реалізоване рішення має модульну структуру, що  
спрощує подальший супровід та розширення функціональності без порушення 
вже створених компонентів.  
Практичне значення отриманих результатів.  В рамках кваліфікаційної 
роботи розроблено програмне забезпечення у вигляді web-ресурсу, що 
впроваджено як частину офіційного  сайту кафедри ПЗАС ЧДТУ. Він виконує 
функцію інформування щодо участі у програмі Next-Erasmus+, слугуючи 
ефективним інструментом публічного представлення діяльності кафедри у сфері 
міжнародної співпраці. 
У якості  результатів отримано візуальне представлення необхідної 
інформації з інтуїтивно зрозумілим та зручним інтерфейсом, що дозволяє 
користувачам оперативно орієнтуватись у контенті та швидко переходити до 
потрібних розділів та сторінок. Web-ресурс має чітку структуру, що забезпечує 
легкість навігації для студентів, викладачів, іноземних партнерів та гостей сайту.  
Інформаційний ресурс повністю інтегрований в структуру існуючого сайту 
кафедри, зберігаючи єдиний стиль ресурсу. Він легко підтримується та 
оновлюється без потреби у значних змін програмного коду, що робить його 
зручним в подальшому використанні.  
Окрім виконання основної інформативної функції, ресурс виконує і 
рекламну функцію, представляючи кафедру як активного учасника міжнародних 
програм, що сприяє покращенню іміджу закладу та залученню нових учасників до 
подібних ініціатив.  
Особистий внесок автора. У процесі виконання кваліфікаційної роботи 
було реалізовано повний цикл розробки інформаційної web-сторінки для 
представлення участі кафедри ПЗАС ЧДТУ у проекті Next-Erasmus+.  
Структура web-ресурсу була розроблена з урахуванням логіки подання 
інформації та потреб користувачів. Було обрано кольорову палітру, адаптовану до 
візуального стилю основного сайту, а також повністю змінено дизайн за 
9 
ЧДТУ 252158.010 ПЗ 
допомогою конструктора Elementor та HTML-структури. Контент підрозділу 
«Міжнародні проекти» був актуалізований, систематизований та впроваджений на 
англійський та українській мові для забезпечення двомовної підтримки.  
Особливу увагу приділено зручності навігації, оцінці інформативності 
кожного з розділів ресурсу і відповідності реалізації функціональним вимогам.  
Отже, виконана робота охопила не лише технічну реалізацію, а й змістовне 
наповнення та перевірку якості взаємодії з користувачем, що є важливим 
аспектом сучасної інженерії програмного забезпечення.  
 
  
10 
ЧДТУ 252158.010 ПЗ 
РОЗДІЛ 1 ІСНУЮЧІ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ 
ПОСТАВЛЕНИХ ЗАВДАНЬ 
Інформаційні web-ресурси стали важливим елементом сучасного освітнього 
процесу, особливо в контексті глобалізації та активної міжнародної співпраці. 
Розробка такої платформи в рамках участі кафедри ПЗАС в проекті Next-
Erasmus+ вимагає глибоко розуміння сучасних технологій та методів web-
розробки. 
У цьому розділі буде проаналізовано інструменти та технології, що 
використовуються для створення освітніх web-ресурсів, описано методи аналізу 
структури та функціоналу подібних web-сайтів. Також буде проведено порівняння 
з існуючими аналогами, визначено їх сильні та слабкі сторони.  
На основі отриманої інформації буде обрано найефективніші інструменти та 
технології, які відповідатимуть потребам користувачів, забезпечуючи зручність в 
експлуатації та надійність роботи системи. 
1.1 Огляд технологій та інструментів розробки 
Розробка освітніх web-ресурсів вимагає залучення перевірених технологій і 
зручних інструментів, що забезпечують ефективність у реалізації проекту, 
підтримку подальшого оновлення, безпеку та масштабованість. У рамках 
кваліфікаційної роботи розробляється окремий набір сторінок, що буде частиною 
вже існуючого web-сайту кафедри ПЗАС ЧДТУ. Важливо підкреслити, що 
основний сайт кафедри створено на платформі WordPress, тому вибір технологій 
визначається необхідністю інтеграції з цією системою без внесення змін до 
існуючих компонентів.  
WordPress є однією з найпоширеніших систем управління контентом (CMS). 
За статистикою, вона використовується для створення понад 40% усіх  web-сайтів 
у глобальній мережі [3]. Платформа відзначається високим рівнем гнучкості 
завдяки розгалуженій системі тем та плагінів, які дозволяють адаптувати 
зовнішній вигляд і функціонал під конкретні потреби. Основні переваги 
WordPress – це доступність, простота у використанні, активна спільнота 
11 
ЧДТУ 252158.010 ПЗ 
розробників і велика кількість готових рішень [4].  
Для створення та кастомізації ресурсу в межах WordPress застосовуються 
наступні технології:  
 HTML – мова розмітки, що забезпечує базову структуру кожної web-
сторінки. Вона визначає розташування елементів інтерфейсу: заголовків, 
параграфів, таблиць, зображень тощо [1]. 
 CSS – мова стилів, що відповідає за зовнішнє оформлення елементів, 
створених за допомогою HTML. З її допомогою задаються кольори, шрифти, 
відступи, вирівнювання та інші візуальні характеристики сторінки [2].  
 JavaScript – мова програмування, яка забезпечує інтерактивність 
сторінки [5]. У контексті WordPress може використовуватись для динамічного 
оновлення вмісту, обробки подій користувача, роботи з анімаціями.  
 PHP – серверна мова програмування, яка використовується для 
реалізації ядра WordPress. Хоча безпосередня робота з PHP не є основною метою 
даної кваліфікаційної роботи, її знання є корисним для розуміння роботи тем та 
плагінів. 
 MySQL – система керування базами даних, яка використовується у 
WordPress для збереження всього контенту сайту: текстів, зображень, 
налаштувань тощо. У даному випадку не планується створення окремих таблиць у 
базі даних, однак новий контент буде зберігатись у вже наявній структурі. 
 Appache HTTP Server – широко використовуваний web-сервер з 
відкритим кодом, який забезпечує обробку запитів до сайту [6]. Хоча в межах 
роботи не здійснюється безпосереднє налаштування Apache, він є ключовим 
елементом існуючого серверного середовища, на якому працює WordPress-сайт 
кафедри.  
 Polylang – плагін для реалізації багатомовності в межах WordPress. Він 
дає змогу створювати окремі мовні версії сторінок, дописів, меню тощо, 
зберігаючи структуру та оформлення. Завдяки Polylang реалізовано підтримку 
української та англійської версій сторінки проекту, що значно покращує 
доступність ресурсу для міжнародної аудиторії. 
12 
ЧДТУ 252158.010 ПЗ 
Також у процесі розробки використовуються візуальні конструктори 
(наприклад Elementor), що значно полегшують створення макетів. Вони 
дозволяють зосередитись на створенні функціоналу та структури, не витрачаючи 
час на низькорівневу верстку. 
Таким чином, обрані технології формують надійну основу для реалізації 
web-ресурсу проекту Next-Erasmus+. Вони забезпечують повну інтеграцію з 
наявною системою, дотримання вимог користувачів та підтримку у подальшій 
експлуатації та оновленні системи.  
1.2 Методи аналізу освітнього веб-сайту 
Розробка освітнього web-ресурсу в рамках проекту Next-Erasmus+ потребує 
попереднього аналізу, який дозволяє визначити вимоги до структури, 
функціональності, дизайну та зручності використання системи. У цьому 
підрозділі розглянуто ключові методи, які використовуються для дослідження 
особливостей освітніх web-ресурсів та прийняття обґрунтованих рішень на етапі 
розробки.  
SWOT-аналіз є одним з основних інструментів, що дає змогу оцінити 
сильні й слабкі сторони, можливості та загрози, пов’язані з реалізацією. 
Наприклад, серед сильних сторін слід виділити повну інтеграцію в існуючу 
структуру WordPress – сайту кафедри, а серед слабкостей – обмеження в 
можливості редагування вже реалізованих компонентів. Можливості включають 
розширення міжнародної співпраці та підвищення впізнаваності кафедри, тоді як 
ризики можуть бути пов’язані з безпекою або технічними обмеженнями CMS [7]. 
Аналіз потреб користувачів дозволяє сформулювати функціональні та 
нефункціональні вимоги до системи. Освітній web-ресурс має бути інтуїтивно 
зрозумілим для студентів, викладачів та потенційних партнерів. Для цього 
розглядаються сценарії взаємодії користувачів із системою, що дозволяє 
визначити ключові функції та критерії зручності [8].  
Порівняльний аналіз аналогів потрібен для дослідження існуючих web-
сайтів інших вищих навчальних закладів, які беруть участь у міжнародних 
освітніх програмах. Зокрема, аналізується структура подачі інформації, дизайн, 
13 
ЧДТУ 252158.010 ПЗ 
інтерактивність. Це дозволяє уникнути повторення чужих помилок. 
Функціонально-логічний аналіз допомагає описати основні компоненти 
майбутнього web-сайту та взаємозв’язки між ними. Розробляється умовна модель 
сторінки, яка допомагає виявити можливі дублювання та прогалини у логіці 
подачі контенту.  
Застосування вищезазначених методів аналізу дозволяє отримати всебічне 
уявлення про вимоги до web-ресурсу, що забезпечує обґрунтований підхід до 
вибору дизайну та структури, тим самим підвищуючи якість кінцевого 
результату.  
1.3 Порівняння та аналіз існуючих аналогів 
У процесі розробки освітнього web-ресурсу важливо орієнтуватися на вже 
реалізовані сайти, що мають схожий функціонал. Це дозволяє не лише перейняти 
кращі практики, а й уникнути типових недоліків. У даному підрозділі 
проаналізовано три аналогічні web-ресурси: сайт Центру міжнародної освіти 
Львівської політехніки, сторінку Erasmus+ кафедри економіки ХНУМГ а також 
офіційного проекту на сайті Європейської Комісії.  
1 Центр міжнародної освіти Львівської політехніки [40] (рисунок 1.1) 
Сторінка представляє офіційну інформацію про участь Львівської 
політехніки у проектах Erasmus+ напрямку KA2. Вона є складовою частиною 
великого університетського сайту.  
Переваги: 
 Чітко структурована інформація: окремі блоки для кожного проекту з 
коротким описом, переліком партнерів і результатами. 
 Інтегрованість у загальний сайт політехніки: єдина система навігації, 
заголовки та футер, що забезпечує цілісність ресурсу. 
 Актуальність: є свіжі новини та інформація про поточні заходи. 
Недоліки: 
 Відсутність детального функціоналу (немає фільтрації проектів, 
інтерактивних елементів, пошуку). 
14 
ЧДТУ 252158.010 ПЗ 
 Частина документів доступна лише як PDF-файли без інтеграції у 
структуру сайту.  
 
15 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 1.1 – Сайт «Центр міжнародної освіти» Львівської політехніки 
16 
ЧДТУ 252158.010 ПЗ 
 
2 Сайт Erasmus+ кафедри економіки Харківського національного 
університету міського господарства [40] (рисунок 1.2) 
Цей ресурс реалізовано як окрема HTML-сторінка в межах кафедрального 
сайту. Він надає базову інформацію про реалізовані Erasmus+ проекти. 
 
 
Рисунок 1.2 – Сайт Erasmus+ кафедри економіки ХНУМГ 
 
Переваги: 
 Детальний опис діяльності кафедри у рамках Erasmus+.  
17 
ЧДТУ 252158.010 ПЗ 
 Наявність контактної інформації відповідальних осіб. 
 Посилання на партнерські установи та документи. 
Недоліки: 
 Застарілий дизайн, що не використовує сучасні web-технології. 
 Відсутність оновлень, що створює враження «замороженого» проекту. 
3 Офіційний сайт Європейської Комісії Erasmus+ [41] (рисунок 1.3 та 1.4). 
Це глобальний портал, що містить реєстр усіх проектів Erasmus+. Кожен 
запис містить технічну інформацію: код, країну координатора, перелік партнерів, 
тип проекту та короткий опис. 
Переваги: 
 Надійне джерело з перевіреноюю інформацією. 
 Є функціонал пошуку, фільтрації та експорту даних. 
 Публікується лише інформація, затверджена Європейською Комісією. 
Недоліки: 
 Сторінки мають суто адміністративний вигляд, що робить їх менш 
зручними для загальної аудиторії.  
 Відсутній користувацький інтерфейс для відображення подій або 
додаткової візуалізації. 
Аналіз існуючих web-ресурсів, присвячених проекту Erasmus+, надав 
можливість визначити як сильні сторони, так і типові недоліки таких сторінок. 
Сайти провідних українських університетів, зокрема Львівської політехніки та 
ХНУГМ, демонструють інформативність і структурованість контенту, проте часто 
мають застарілий дизайн або обмежену функціональність. Офіційний портал 
Європейської Комісії вирізняється достовірністю та інструментами фільтрації, але 
є менш зручним для пересічного користувача.  
Узагальнення результатів аналізу дозволяє визначити основні вимоги для 
створення власного web-ресурсу: поєднання змістовного наповнення, зручного 
інтерфейсу та сучасного візуального оформлення, що відповідатиме потребам 
усіх категорій користувачів. 
18 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 1.3 – Офіційний сайт Європейської Комісії Erasmus+ (частина 1) 
19 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 1.4 – Офіційний сайт Європейської Комісії Erasmus+ (частина 2) 
20 
ЧДТУ 252158.010 ПЗ 
 
1.4 Постановка задачі 
На основі проведеного аналізу технологій, методів аналізу освітніх web-
сайтів та вивчення доступних аналогів можна сформулювати завдання, які 
необхідно вирішити в рамках кваліфікаційної роботи. Основною метою є 
розробка інформаційного ресурсу на сайті кафедри ПЗАС ЧДТУ, який 
висвітлюватиме участь у проекті Next-Erasmus+ та відповідатиме вимогам 
зручності, інформативності та інтегрованості.   
Аналіз початкової сторінки проекту на сайті кафедри (рисунок 1.5) виявив 
низку недоліків: 
‒ наявна сторінка містить лише базовий опис проекту, без розширеного 
представлення новин, історії реалізації та команди проекту; 
‒ доступна лише англомовна версія інформації, що створює бар’єр для 
частини українськомовної аудиторії; 
‒ контент подано у вигляді тексту з мінімальним використанням графіки і 
мультимедійних елементів; 
‒ сторінка має обмежену навігацію, оскільки вкладки з підрозділами 
відсутні, що погіршує користувацький досвід.   
З огляду на ці обмеження, необхідно реалізувати наступні задачі: 
1 Аналіз потреб користувачів:  
 Визначення  основних категорій користувачів (студенти, викладачі, 
партнери, гості сайту). 
 Встановлення очікувань і ключових інформаційних запитів для 
кожної категорії. 
 Формування сценаріїв користування ресурсом. 
2 Формування вимог до web-ресурсу: 
 Функціональні вимоги: створення розділів з новинами, історією 
проекту, списком партнерів, інформацією про викладачів та курси. 
 Нефункціональні вимоги: зручна навігація, інтуїтивний інтерфейс, 
21 
ЧДТУ 252158.010 ПЗ 
збереження єдиного стилю сайту кафедри, швидкість завантаження, 
наявність української та англійської версії з можливістю 
перемикання.   
3 Вибір та обґрунтування технологій: 
 Використання  CMS WordPress як основної платформи, на якій вже 
реалізовано сайт кафедри. 
 Залучення HTML, CSS, JavaScript для налаштування зовнішнього 
вигляду та поведінки елементів.  
 Врахування обмежень на зміну існуючих компонентів.  
4 Розробка структури ресурсу: 
 Підготовка контенту та візуальних матеріалів (логотипи, ілюстрації, 
інформація, файли). 
 Реалізація інтерактивних елементів за потреби.  
5 Інтеграція ресурсу в існуючий сайт кафедри: 
 Узгодження структури навігації та візуального оформлення з сайтом 
кафедри ПЗАС. 
 Розміщення підрозділу «Міжнародні проекти» на відповідній вкладці 
без зміни базової архітектури WordPress.  
6 Тестування та перевірка якості: 
 Проведення тестування відображення сторінок web-ресурсу у різних 
браузерах. 
 Перевірка доступності, читабельності та відповідності 
функціональним вимогам. 
 Тестування перемикання мовної версії на коректність виводу 
контенту. 
Розробка інформаційної ресурсу для відображення участі кафедри ПЗАС у 
проекті  Next-Erasmus+ є багатоступеневим процесом, який вимагає комплексного 
підходу  до технічного, інформаційного та мовного наповнення, з урахуванням 
потреб користувачів і функціональних можливостей платформи WordPress.  
22 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 1.5 – Початковий вигляд сторінки проекту Next-Erasmus+ 
 
23 
ЧДТУ 252158.010 ПЗ 
ВИСНОВОК ДО ПЕРШОГО РОЗДІЛУ 
У першому розділі було здійснено огляд сучасних технологій та 
інструментів, що використовуються для створення освітніх web-сайтів, а також 
проведено аналіз методів, які забезпечують ефективну розробку та оцінку таких 
ресурсів. Особливу увагу було приділено системі управління контентом 
WordPress, яка слугує основою для реалізації сторінки в рамках наявного сайту 
кафедри ПЗАС ЧДТУ. 
Також було розглянуто існуючі аналоги, пов’язані з програмою Erasmus+, їх 
переваги та недоліки. Це дозволило сформувати чітке уявлення про структуру, 
функціональність та оформлення розроблювального web-ресурсу. В результаті 
було виконано постановку задачі, яка включає аналіз потреб користувачів, 
формування вимог, вибір технологій, розробку структури ресурсу, його 
інтеграцію та тестування. 
Систематизація отриманих даних забезпечує теоретичну та практичну 
основу для подальшої реалізації проекту, що буде висвітлено в наступних 
розділах роботи. 
 
 
  
24 
 
ЧДТУ 252158.010 ПЗ 
РОЗДІЛ 2 ВПРОВАДЖЕННЯ РЕЗУЛЬТАТІВ ДОСЛІДЖЕНЬ У ПРАКТИКУ 
ПРОЕКТУВАННЯ 
2.1 Моделювання предметної області  
Процес моделювання предметної області є ключовим етапом у розробці 
інформаційного web-ресурсу проекту Next-Erasmus+, оскільки дозволяє 
визначити основні сутності системи та взаємозв’язки між ними. На цій стадії 
формується логічна структура об’єктів, таких як новини, партнери, викладачі та 
курси, що забезпечує основу для подальшого проектування. 
Результатом моделювання є формалізована модель, яка допомагає уникнути 
помилок у логіці системи, оптимізувати структуру даних і забезпечити ефективну 
реалізацію функціоналу web-сторінки [10][11].   
2.1.1 Предметна область моделювання. Модель предметної області. Словник 
предметної області 
Предметна область моделювання. Предметна область моделювання для 
web-ресурсу Next-Erasmus+ кафедри програмного забезпечення автоматизованих 
систем ЧДТУ, охоплює всі компоненти, необхідні для ефективного інформування 
студентів, викладачів, адміністрації та партнерів про хід реалізації міжнародного 
освітнього проекту.  
До основних складових предметної області належать: 
‒ Новини проекту: інформаційні повідомлення, що висвітлюють події, 
заходи та результати, пов’язані з участю ЧДТУ в Next-Erasmus+. Кожна новина 
містить заголовок, дату, короткий опис, повний текст та, за потреби, зображення. 
‒ Історія участі ЧДТУ у проекті: розділ з детальним описом створення 
проекту, інформацією про те, як університет долучився до програми, яких 
результатів було досягнуто, які заходи було проведено і як це впливає на освітній 
процес. 
‒ Список партнерів: перелік установ-партнерів з можливістю перейти 
на офіційні web-сайти кожного з них. Кожен партнер представлений у вигляді 
логотипу, назви та посилання на офіційний сайт.  
25 
 
ЧДТУ 252158.010 ПЗ 
‒ Викладачі та курси: відомості про представників кафедри, які беруть 
участь у проекті, та курси, розроблені ними. Це можуть бути ім’я, науковий 
ступінь, опис курсу, навчальні матеріали. 
Моделювання предметної області дозволяє формалізувати вказані об’єкти 
та їх зв’язки, що закладає основу для створення логічної структуру web-ресурсу. 
Це, у свою чергу, забезпечує ефективне планування, уникнення дублювання 
інформації, а також оптимізацію процесу реалізації системи відповідно до потреб 
користувачів.  
Модель предметної області. Модель предметної області є ключовим 
інструментом об’єктно-орієнтованого аналізу, який допомагає визначити сутності 
та взаємозв’язки, необхідні для розробки web-ресурсу проекту Next-Erasmus+. 
Вона є основою для подальшого проектування даних і логіки взаємодії елементів 
системи [10][11]. У нотації UML така модель зазвичай подається у вигляді 
діаграми класів, однак на етапі аналізу вона може бути спрощена, акцентуючи 
увагу на візуальному представленні доменних об’єктів.  
Основні компоненти предметної області: 
1 Користувачі 
Типи: студент, викладач, партнер, гість сайту. 
2 Адміністратор 
Відповідає за додавання, редагування та видалення контенту.  
3 Новини про проект 
Заголовок, короткий опис, повний текст, дата, зображення. 
4 Історія проекту 
Опис ключових подій, хронологія, документація, результати. 
5 Партнери 
Назва, логотип, URL-адреса партнера. 
6 Викладачі 
ПІБ, науковий ступінь, фото. 
7 Курси 
Назва, короткий опис, детальна інформація викладач. 
26 
 
ЧДТУ 252158.010 ПЗ 
Схема моделі предметної області. 
1 Користувачі: 
‒ студенти; 
‒ викладачі; 
‒ партнери; 
‒ гості сайту. 
2 Адміністратор: 
має доступ до редагування усіх типів контенту. 
3 Інформаційний контент:  
‒ новини проекту; 
‒ історія та хронологія проекту; 
‒ події. 
4 Партнерська мережа: 
‒ перелік партнерських установ; 
‒ логотипи та назви партнерів; 
‒ посилання на сайти партнерів. 
5 Освітній контент: 
курси, розроблені в межах проекту. 
Усі сутності, визначені в моделі предметної області, охоплюють 
функціональність web-ресурсу, що повністю відкритий для перегляду без 
реєстрації чи авторизації. Такий підхід відповідає принципам відкритого доступу 
до академічної та проектної інформації в рамках міжнародних ініціатив.  
Словник предметної області 
Інформаційний web-ресурс– частина сайту кафедри ПЗАС ЧДТУ, створена з 
метою висвітлення участі кафедри в міжнародному освітньому проекті Next-
Erasmus+. 
Користувач – будь-яка особа, яка відвідує сторінку: студент, викладач, 
партнер або гість. Всі користувачі мають відкритий доступ до контенту. 
Адміністратор – відповідальна особа, що має доступ до створення, 
редагування та видалення інформаційного контенту web-ресурсу. Забезпечує 
27 
 
ЧДТУ 252158.010 ПЗ 
актуальність, структурованість та повноту опублікованих матеріалів. 
Викладач – співробітник кафедри, який бере участь у реалізації проекту, 
розробляє курси та представлений у відповідному розділі сторінки.  
Партнер – заклад вищої освіти або організація, що є співучасником проекту 
Next-Erasmus+ разом із ЧДТУ. Представлений на сторінці логотипом, назвою та 
посиланням на офіційний сайт. 
Новина – інформаційне повідомлення, яке висвітлює поточні події, заходи 
чи досягнення в межах проекту. Містить заголовок, дату, текст і зображення.  
Історія проекту – узагальнена інформація про участь кафедри ПЗАС у Next-
Erasmus+: коли і як проект було започатковано, які кроки вже було зроблено.  
Курс – освітній матеріал або навчальний модуль, розроблений викладачем 
кафедри в межах проекту. Курс представлено назвою, коротким та детальним 
описом, а також інформацією про відповідального викладача. 
Документ – файл або гіперпосилання, що містить інформаційні матеріали: 
презентації, звіти, програми курсів, методичні матеріали. 
Зображення – ілюстративний контент, який супроводжує новини, профілі 
викладачів або партнерські розділи, використовується для візуального підсилення 
змісту.  
WordPress – система управління контентом, що використовується для 
створення, редагування і підтримки сторінки без необхідності змін у вихідному 
коді сайту [4].  
HTML – мова розмітки, що забезпечує структурне оформлення контенту на 
сторінці [1]. 
CSS – технологія, яка визначає стильове оформлення елементів сторінки, 
включаючи шрифти, кольори, відступи, розміщення тощо [2]. 
Java Script – мова програмування, що дозволяє додавати інтерактивність на 
сторінку: динамічне завантаження даних, ефекти, реакцію на дії користувача [5]. 
28 
 
ЧДТУ 252158.010 ПЗ 
2.1.2 Елементи моделювання предметної області 
У процесі моделювання предметної області web-ресурсу проекту Next-
Erasmus+ кафедри ПЗАС ЧДТУ використовуються нотації мови UML, що є 
загальноприйнятим стандартом для опису архітектури програмних систем. UML 
дозволяє створювати формалізовані візуальні моделі, які сприяють кращому 
розумінню логіки, структури та взаємодії компонентів майбутнього програмного 
забезпечення.  
 
Рисунок 2.1 – Основні графічні символи UML [12] 
 
Для опису предметної області проекту застосовуються як структурні, так і 
поведінкові елементи UML. До ключових структурних елементів належать: класи, 
об’єкти, атрибути, операції, компоненти, пакети та асоціації між ними. 
29 
 
ЧДТУ 252158.010 ПЗ 
Поведінкові елементи включають дії, стани, потоки управління та події. Для 
візуального подання таких елементів використовуються графічні символи, 
представлені на рисунках 2.1 та 2.2 [12]. 
 
Рисунок 2.2 – Єднальні елементи UML [12] 
 
Використання UML-нотацій забезпечує уніфіковане розуміння функціоналу 
web-ресурсу між учасниками проекту, полегшує процес проектування та 
виявлення потенційних помилок ще на етапі планування. 
30 
 
ЧДТУ 252158.010 ПЗ 
2.1.3 Робоча область моделювання 
Робоча область моделювання представляє всі аспекти системи, які 
підлягають формальному опису для глибшого розуміння, аналізу та подальшого 
проектування. У контексті створення інформаційного web-ресурсу проекту Next-
Erasmus+ для кафедри ПЗАС ЧДТУ, робоча область охоплює всі сутності 
предметної області, що мають відношення до відображення інформації, її 
структурування та організації взаємодії з користувачами [10][11].  
У межах цієї області моделювання враховано всі сутності, що будуть 
реалізовані на сторінці, зокрема: новини, історія участі у проекті, курси, 
викладачі, партнери, події та самі користувачі. За допомогою моделі предметної 
області зображено статичну структуру системи, у якій відображено асоціації, 
агрегації та композиції між об’єктами, що взаємодіють між собою в межах web-
ресурсу.  
 
 
31 
 
ЧДТУ 252158.010 ПЗ 
Рисунок 2.3 – Модель предметної області для web-ресурсу Erasmus+ 
 
Це дозволяє сформулювати чітке уявлення про логіку ресурсу та 
забезпечити узгодженість реалізації з вимогами до зручності використання, 
підтримки, наповнення й подальшого масштабування.   
Основні компоненти (сутності): 
1  Користувачі (Users). 
2  Адміністратор (Administrator) 
3  Новини (News). 
4  Курси (Courses). 
5  Викладачі (Teachers). 
6  Історія проекту (Project History). 
7  Події (Enents). 
8  Партнери (Partners). 
2.2 Формування та аналіз вимог 
2.2.1 Формування вимог до програмного забезпечення. Первинні і детальні 
вимоги. Вимоги замовника і розробника. Функціональні та нефункціональні 
вимоги.  
Формування вимог до програмного забезпечення є ключовим етапом у 
процесі розробки системи. На цьому етапі визначаються очікування щодо 
функціональності, обмежень та загальних характеристик системи, що 
допомагають досягти поставлених цілей. У рамках проекту створення 
інформаційного web-ресурсу проекту Next-Erasmus+ кафедри ПЗАС ЧДТУ було 
сформульовано первинні та детальні вимоги до системи [13][14].  
Первинні вимоги відображають основні функціональні можливості, які 
повинна мати система: 
 ресурс повинен містити розділ новин, що висвітлює останні події, 
пов’язані з проектом; 
 ресурс має містити опис історії проекти та участі кафедри в ньому;  
32 
 
ЧДТУ 252158.010 ПЗ 
 має бути реалізовано перелік партнерів проекту з посиланнями на їх 
офіційні web-ресурси; 
 повинна бути представлена інформація про викладачів кафедри, які 
беруть участь у проекті; 
 необхідно реалізувати опис курсів, розроблених у межах Next-Erasmus+; 
 ресурс має підтримувати українську та англійську версію контенту з 
можливістю перемикання між ними. 
Детальні вимоги деталізують функціональність, визначену у первинних 
вимогах, і конкретезують технічну реалізацію окремих елементів web-ресурсу: 
1 Новини: 
 мають бути представлені у вигляді списку, відсортованого за датою; 
 кожна новина повинна містити заголовок, короткий опис, дату та 
зображення (якщо воно є); 
 повний текст новини відкривається окремою сторінкою або в 
модальному вікні. 
2 Історія проекту: 
 реалізується у вигляді хронологічної послідовності;  
 кожна подія повинна мати дату, назву, опис, за потреби – візуальний 
супровід. 
3 Партнери: 
 список партнерів представлений у вигляді сітки карток з логотипами, 
назвою та кнопкою;  
 при натисканні на кнопку відкривається офіційний сайт партнера у 
новій вкладці. 
4 Викладачі: 
 інформація представлена у форматі блоків або карток; 
 кожна картка містить: фото, прізвище, ім’я, науковий ступінь; 
 ліворуч розміщується інформація про викладача, праворуч – курс, 
який він розробив. 
33 
 
ЧДТУ 252158.010 ПЗ 
5 Курси: 
 інформація про курси розміщується праворуч від блоку викладача; 
 для кожного курсу вказується назва та короткий опис; 
 передбачено посилання або кнопку переходу на окрему сторінку 
курсу з детальною інформацією; 
6 Двомовність: 
 весь контент сторінки має бути доступний двома мовами – 
українською і англійською; 
 перемикання між мовами здійснюється за допомогою зручного 
елемента інтерфейсу (наприклад, кнопки або перемикача в шапці 
сайту); 
 усі нові публікації повинні мати обидві мовні версії при 
додаванні/редагуванні.  
Усі функції повинні бути реалізовані відповідно до стандартів CMS 
WordPress з урахуванням обмеження – не змінювати існуючу структуру сайту 
кафедри, а лише доповнити її новим підрозділом з окремим контентом. 
Вимоги замовника і розробника 
Різниця між вимогами замовника і розробника є важливою у процесі 
створення програмного забезпечення. Вимоги замовника формуються з точки 
зору кінцевих користувачів і визначають, що саме повинна робити система, тоді 
як вимоги розробника деталізують ці потреби у вигляді конкретних технічних 
рішень – як саме потрібно реалізувати систему [13][14].  
Вимоги замовника:  
 web-ресурс повинен мати просту та зрозумілу структуру, доступну для 
перегляду широкому колу користувачів (студентам, викладачам, партнерам, 
гостям сайту); 
 система повинна відображати актуальну інформацію про участь кафедри 
ПЗАС у проекті Next-Erasmus+; 
34 
 
ЧДТУ 252158.010 ПЗ 
 необхідно створити окремі розділи для новин, історії проекту, партнерів, 
викладачів та курсів;  
 користувач повинен мати змогу швидко знайти потрібну інформацію без 
необхідності реєстрації чи авторизації; 
 сторінка повинна відповідати загальному стилю сайту кафедри; 
 сторінка повинна мати українську та англійську версію контенту з 
можливістю перемикання мови. 
Вимоги розробника: 
 система повинна бути реалізована як окремий розділ вже існуючого 
сайту кафедри, створеного на платформі WordPress; 
 для структурування контенту використовуються кастомні типи записів 
та поля, без модифікації ядра CMS; 
 для реалізації візуального оформлення застосовуються стандартні 
HTML, CSS, JavaScript;  
 передбачено використання візуального конструктора Elementor для 
зручності заповнення сторінок; 
 усі зображення, логотипи та посилання повинні бути додані з 
урахуванням оптимізації розміру та швидкості сайту; 
 реалізація двомовності повинна бути здійснена із застосуванням 
стандартних рішень CMS WordPress (наприклад, мовні плагіни або власна логіка 
перемикання), з підтримкою повного дублювання контенту без порушення 
цілісності структури сторінок. 
Функціональні та нефункціональні вимоги  
Формування функціональних і нефункціональних вимог є важливою 
частиною процесу аналізу системи. Функціональні вимоги визначають конкретні 
дії, які повинна виконувати система, тобто вони формулюють її основну 
поведінку. Натомість нефункціональні вимоги охоплюють характеристики якості, 
продуктивності, зручності використання, сумісності та інших параметрів, які не є 
безпосередньо функціями, але суттєво впливають на загальну ефективність і 
35 
 
ЧДТУ 252158.010 ПЗ 
прийнятність системи для користувача [15][16].  
Функціональні вимоги: 
 реалізація розділу новин, в якому буде представлена актуальна  
інформація про участь ЧДТУ в проекті Next-Erasmus+; 
 створення розділу історії проекту, у якому відображається хронологія 
участі університету у проекті (події, результати, досягнення); 
 реалізація переліку партнерів у вигляді карток з логотипами з активними 
гіперпосиланнями на їх офіційні web-ресурси; 
 відображення інформації про викладачів ЧДТУ, залучених до проекту 
(ПІБ, науковий ступінь, фото); 
 відображення опису курсів, розроблених викладачами для учасників 
проекту з можливістю перейти на окрему сторінку з повною інформацією. 
Нефункціональні вимоги: 
 зручність користування: інтерфейс повинен бути інтуїтивно зрозумілим 
для всіх категорій користувачів; 
 інтегрованість: ресурс повинен бути повністю сумісним з існуючим 
сайтом кафедри, реалізованим на CMS WordPress, без зміни його основної 
архітектури;  
 можливість розширення: структура ресурсу повинна дозволяти 
додавання нових блоків інформації без необхідності повної переробки макета; 
 стилістична відповідність: зовнішній вигляд сторінок повинен бути 
узгоджений із загальним дизайном сайту кафедри, включаючи шрифти та 
компонування; 
 доступність: усі матеріали мають бути у вільному доступі, без реєстрації 
чи авторизації; 
 двомовність: ресурс повинен підтримувати українську та англійську 
версії з можливістю перемикання мови.  
Чітко сформульовані вимоги є підґрунтям для успішної реалізації проекту, 
забезпечуючи ефективну взаємодію між командою розробників і замовниками, а 
36 
 
ЧДТУ 252158.010 ПЗ 
також відповідність кінцевого продукту його цільовому призначенню. 
2.2.2 Формування вимог за допомогою діаграми прецедентів 
Діаграма прецедентів (Use Case Diagram) э ефективним інструментом для 
візуалізації функціональних вимог до системи та ілюстрації взаємодії користувача 
із системою. У контексті розробки інформаційного web-ресурсу проекту Next-
Erasmus+ основними акторами виступає користувач, що представляє усі типи 
відвідувачів сайту – студентів, викладачів, партнерів і гостей; та адміністратор 
сайту, який відповідає за його наповнення [17][18].  
 
Рисунок 2.4 – Діаграма прецедентів для актора «Користувач» (ч. 1) 
37 
 
ЧДТУ 252158.010 ПЗ 
 
Актор: Користувач (рисунок 2.4 ч. 1). 
1 Перегляд історії проекту: 
користувач може ознайомитись з метою, етапами реалізації, досягненнями 
та загальною концепцією проекту Erasmus+. 
2 Перегляд новин: 
користувач може ознайомитись з актуальними новинами, що стосуються 
участі кафедри у міжнародній програмі та проведеними заходами.  
3 Перегляд списку партнерів: 
користувач переглядає перелік партнерських установ з короткою 
інформацією про кожну з них. 
4 Перегляд викладачів та курсів: 
користувач переглядає інформацію про викладачів, які задіяні у реалізації 
курсів у рамках проекту, а також перелік самих курсів з коротким описом. 
5 Перегляд повної інформації про курс: 
це залежний варіант використання, пов’язаний з переглядом викладачів та 
курсів, і активується як розширення для отримання детальної інформації 
(включення позначено як <<include>>). 
Діаграма чітко демонструє асоціативні зв’язки між актором (користувачем) і 
функціональними прецедентами. Крім того, використано відношення включення 
між прецедентами «Перегляд викладачів та курсів» та «Перегляд повної 
інформації про курс», що вказує на залежність цих дій.  
Актор: Адміністратор (рисунок 2.4 ч. 2). 
6 Додавання новини:адміністратор створює новину у відповідному розділі 
сайту. 
7 Керування інформацією про партнерів:адміністратор додає, змінює або 
видаляє інформацію про партнерські організації.  
3 Редагування історії проекту: адміністратор оновлює розділ з історією 
реалізації проекту. 
4 Керування інформацією про викладачів: адміністратор додає або змінює 
38 
 
ЧДТУ 252158.010 ПЗ 
дані про викладачів, що беруть участь у проекті. 
5 Керування інформацією про курси: адміністратор керує курсами, 
включаючи опис, формат, матеріали та викладачів.  
 
 
Рисунок 2.4 – Діаграма прецедентів для актора «Адміністратор» (ч.2) 
 
Такий підхід допомагає зрозуміти ключові сценарії використання системи і 
слугує основою для подальшого проектування інтерфейсу та реалізації логіки 
роботи web-ресурсу.  
2.3 Проектування логічної структури програмного комплексу 
У цьому підрозділі розглянуто логічну структуру інформаційного web-
ресурсу проекту Next-Erasmus+ через призму об’єктно-орієнтованого аналізу. 
39 
 
ЧДТУ 252158.010 ПЗ 
Основна мета полягає у формалізації структури об’єктів, ролей користувачів й 
інформаційних компонентів, які складають функціональну основу ресурсу. Хоча 
реалізація системи здійснюється на платформі WordPress, яка не вимагає 
створення класів у класичному сенсі програмування, діаграми UML дозволяють 
сформувати чітке уявлення про внутрішню логіку ресурсу, розподіл функцій між 
користувачами та адміністраторами, а також взаємозв’язки між об’єктами 
системи.  
2.3.1 Діаграми класів 
На рисунку 2.5  представлена діаграма класів [19][20] без атрибутів, що 
відображає основні інформаційні сутності сайту. 
 
 
Рисунок 2.5 – Діаграма класів без атрибутів та методів для web-ресурсу Erasmus+ 
 
Кожен клас заповнюється необхідними атрибутами а методами (рисунок 
2.6): 
40 
 
ЧДТУ 252158.010 ПЗ 
1 Користувач 
 Роль: гість, студент, викладач, партнер. 
 Функція: перегляд усіх публічно доступних інформаційних блоків. 
 Зв’язки: асоціації типу «переглядає» з усіма сутностями: новини, 
історія проетку, події, курси викладачі, партнери.  
2 Адміністратор 
 Роль: керування контентом ресурсу. 
 Функції: додає, редагує, видаляє новини; оновлює історію проекту; 
керує інформацією про викладачів, курси, партнерів.  
3 Новина 
 Атрибути: заголовок, дата, текст, зображення. 
 Зв’язки: створюється/редагується адміністратором, переглядається 
користувачем. 
4 Історія проекту 
 Атрибути: текст, дата, події. 
 Зв’язки: адміністратор оновлює зміст; користувач переглядає. 
 Агрегація: пов’язана з класом «Подія» (події є частиною історії, але 
можуть мати самостійне значення). 
5  Подія 
 Атрибути: назва, дата, опис. 
 Зв’язки: керується адміністратором, переглядається користувачем. 
6 Партнер 
 Атрибути: назва, логотип, URL. 
 Зв’язки: керується адміністратором, переглядається користувачем. 
7 Викладач 
 Атрибути: ПІБ, науковий ступінь, фото. 
 Зв’язки: користувач переглядає інформація про викладача; 
редагується адміністратором; пов’язаний з курсами (вказується як 
розробник курсу). 
41 
 
ЧДТУ 252158.010 ПЗ 
8 Курс 
 Атрибути: назва, короткий опис, детальна інформація. 
 Зв’язки: користувач переглядає опис курсу; адміністратор керує 
наповненням. 
 Композиція: курс не існує без викладача. 
Типи зв’язків:  
 Асоціація (перегляд): між користувачем і всіма інформаційними 
сутностями. 
 Асоціація (керування): між адміністратором і контентом (новини, 
історія, викладачі, курси, партнери). 
 Агрегація: Історія проекту  Подія. 
 Композиція: Викладач  Курс.  
Ця структура забезпечує логічну організацію контенту ресурсу, підтримує 
розділення прав доступу та допомагає формалізувати вимоги до інформаційної 
архітектури ресурсу. 
 
42 
 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 2.6 – Діаграма класів для web-ресурсу Erasmus+ 
1.3.2 Діаграма пакетів 
Діаграма пакетів у нотації UML використовується для логічного групування 
пов’язаних класів та демонструє структуру системи високого рівня [21][22]. При 
розробці інформаційного web-ресурсу проекту Next-Erasmus+ доцільно 
представити основні функціональні блоки у вигляді пакетів, які охоплюють 
ключові підсистеми сайту. 
Незважаючи на те, що система реалізується у середовищі CMS WordPress і 
не містить класів у програмному розумінні, діаграма пакетів є абстрактним 
інструментом для систематизації логічної структури, зручного представлення 
контенту та подальшого розширення ресурсу. 
43 
 
ЧДТУ 252158.010 ПЗ 
На основі аналізу діаграми класів, яка формалізує предметну область, було 
виокремлено такі основні пакети: 
1 Content Management (Управління контентом) 
Включає сутності, що формують інформаційне наповнення сайту: 
‒ новина; 
‒ історія проекту; 
‒ подія; 
‒ партнер; 
‒ курс; 
‒ викладач. 
Функціональність пакета охоплює створення, редагування, оновлення та 
видалення контенту адміністратором, а також перегляд цього контенту 
викладачем.  
2 User (Користувач) 
Містить сутність Користувач (гість, студент, викладач або партнер), що 
взаємодіє з інформаційними об’єктами системи через ознайомлення з контентом.  
3 Administrator (Адміністратор) 
Представляє адміністратора, який виконує такі функції: 
‒ додавання/редагування новин; 
‒ оновлення історії проекту; 
‒ керування інформацією про курси, викладачів та партнерів. 
Відношення залежності між пакетами:  
‒ пакет Administrator має залежність від Content Management, оскільки 
адміністратор керує контентом. 
‒ пакет User також залежить від Content Management, адже користувачі 
переглядають інформаційне наповнення. 
 
44 
 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 2.7 - Діаграма пакетів для веб-сайту Erasmus+ 
 
Діаграма пакетів дає загальне уявлення про логічну організацію 
компонентів системи, дозволяючи чітко розмежувати функціональні області web-
ресурсу проекту. Такий підхід полегшує орієнтацію у структурі, сприяє чіткому 
розподілу відповідальності між компонентами та слугує ефективним 
інструментом для документування архітектури при подальшій підтримці та 
розширенні функціональності ресурсу.  
2.4 Архітектура проектування 
У цьому розділі розглядається загальна архітектура інформаційного web-
ресурсу проекту Next-Erasmus+. Спочатку буде представлено діаграму 
компонентів, яка ілюструє логічну структуру – основні функціональні модулі, їх 
роль та взаємозалежність. Далі подано діаграму розгортання, що демонструє 
фізичне розміщення компонентів на серверному обладнанні та спосіб їх взаємодії 
на інфраструктурному рівні. Такий підхід дозволяє комплексно оцінити як 
логічну побудову, так і технічну реалізацію системи.  
2.4.1 Діаграма компонентів 
Діаграма компонентів у UML використовується для представлення фізичної 
структури системи у вигляді окремих функціональних блоків (компонентів), що 
взаємодіють один з одним через інтерфейси. Вона дозволяє зрозуміти, як логічні 
частини системи реалізовані технічно, які компоненти використовуються для 
забезпечення функціональності та які між ними залежності [23][24].  
45 
 
ЧДТУ 252158.010 ПЗ 
У даному випадку діаграма компонентів (рисунок 2.8) ілюструє логічну 
архітектуру інформаційного web-ресурсу проекту Next-Erasmus+, що 
реалізований на сайті кафедри ПЗАС ЧДТУ з використанням системи керування 
контентом WordPress. 
 
 
Рисунок 2.8 – Діаграма компонентів для веб-сайту Erasmus+ 
 
На діаграмі компонентів представлено такі основні компоненти: 
1 User Interface 
Компонент, який представляє взаємодію кінцевих користувачів (гостей, 
студентів, партнерів, викладачів) з ресурсом. 
Функції: 
‒ перегляд новин, подій, курсів та іншого контенту; 
‒ навігація між розділами. 
Залежності: 
залежить від Content Management Service, через який отримує дані для 
відображення. 
2 Content Management Service 
46 
 
ЧДТУ 252158.010 ПЗ 
Відповідає за обробку контенту, що відображається. 
Функції: 
‒ додавання та редагування новин, описів курсів; 
‒ оновлення історії проекту, керування списками партнерів та 
викладачів. 
Залежності: 
‒ взаємодіє з Database Service для читання та збереження даних; 
‒ пов’язаний з User Interface для передачі готових даних користувачам; 
‒ взаємодіє з Admin Panel для реалізації змін контенту. 
3 Admin Panel (WordPress) 
Інтерфейс керування контентом, доступний адміністраторам. 
Функції: 
‒ забезпечує авторизований доступ до функцій редагування; 
‒ реалізує роль адміністратора через стандартний функціонал 
WordPress. 
Залежності: 
‒ працює із Content Management Service; 
‒ має доступ до бази даних через CMS-фреймворк. 
4 Database Service 
Back-end компонент, відповідальний за зберігання даних. 
Функції: 
‒ обслуговує запити на зчитування, запис і оновлення даних; 
‒ зберігає усі структуровані дані (курси, новини, перелік партнерів 
тощо). 
Залежності: 
‒ використовує Content Management Service як джерело даних. 
Ця діаграма демонструє архітектурну модель системи з точки зору 
програмної реалізації, ілюструючи поділ обов’язків між основними логічними 
компонентами. Вона є основою для розгортання системи, описаної в наступному 
підрозділі, та спрощує підтримку й майбутню модернізацію web-ресурсу.  
47 
 
ЧДТУ 252158.010 ПЗ 
2.4.2 Діаграма розгортання  
Діаграма розгортання використовується для ілюстрації фізичного 
розміщення програмних компонентів на апаратних вузлах. Вона дозволяє 
визначити, як логічні елементи системи (компоненти) реалізуються у вигляді 
виконуваних модулів на конкретних фізичних пристроях [25][26]. У контексті 
проекту Next-Erasmus+, реалізованого як інформаційний web-ресурс на сайті 
кафедри ПЗАС ЧДТУ, така діаграма дозволяє наочно показати архітектуру 
системи та взаємозв’язки між ключовими обчислювальними вузлами. 
Основні вузли діаграми (рисунок 2.9): 
1 User Devices (Користувацькі пристрої) 
Представляють клієнтську сторону – це браузери на комп’ютерах чи 
ноутбуках, через які користувачі (гості, студенти, викладачі, партнери, 
адміністратор) отримують доступ до ресурсу. 
Вкладений компонент: User Interface – інтерфейс користувача, який 
забезпечує перегляд вмісту сайту. 
2 Web Server (Web-сервер) 
Центральний вузол, на якому розгорнута CMS WordPress, що відповідає за 
логіку управління контентом, взаємодію з базою даних та обробку запитів.  
Вкладені компоненти: 
‒ Content Management Service – відповідає за додавання, редагування та 
відображення інформаційного контенту; 
‒ Admin Panel (WordPress) – інтерфейс адміністратора для керування 
структурою та вмістом ресурсу. 
3 Database Server (Сервер бази даних) 
Відповідає за зберігання всіх даних ресурсів: новин, подій, інформації про 
викладачів, партнерів, курсів та історію проекту.  
Вкладений компонент: 
‒ Database Service – обробляє запити на читання і збереження 
інформації, отримані з Web-сервера. 
 
48 
 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 2.9 – Діаграма розгортання web-сторінки проекту Next-Erasmus+ 
 
Взаємозвязки: 
‒ User Devices  Web Server: користувач надсилає HTTP-запити до 
web-сервера, який повертає HTML-контент для відображення в інтерфейсі. 
‒ Web Server  Database Server: web-сервер взаємодіє з базою даних 
для збереження та отримання інформації, необхідної для формування сторінок 
ресурсу.  
Ця діаграма розгортання наочно ілюструє фізичну архітектуру 
інформаційної системи. Вона відображає реальне розміщення компонентів у 
мережі, що важливо для розуміння взаємодії між частинами системи, оцінки її 
масштабованості, безпеки та підтримки в умовах реального використання.  
2.5 Моделювання поведінки системи 
У цьому розділі розглядається динамічний аспект функціонування 
інформаційного web-ресурсу проекту Next-Erasmus+. Якщо попередні етапи 
49 
 
ЧДТУ 252158.010 ПЗ 
проектування акцентували увагу на структурі та архітектурі системи, то 
моделювання поведінки дозволяє дослідити, як система функціонує у процесі 
взаємодії з користувачами. Для цього використовуються діаграми діяльності, 
послідовності, станів та кінцевого автомату які описують алгоритми виконання 
окремих дій, обмін повідомленнями між об’єктами та зміну їх станів протягом 
життєвого циклу. Такий підхід забезпечує комплексне уявлення про логіку роботи 
ресурсу та сприяє точнішій реалізації його функціональних сценаріїв.  
2.5.1 Діаграма діяльності 
Діаграма діяльності у нотації UML використовується для моделювання 
алгоритмів поведінки системи. Вона дозволяє описати логіку виконання 
послідовностей дій, розгалуження, паралельні процеси та переходи між станами 
[27][28]. У випадку web-ресурсу для проекту Next-Erasmus+, доцільно створити 
дві діаграми діяльності: окремо для користувача та адміністратора.  
1 Діаграма діяльності користувача 
На рисунку 2.10 (ч. 1) зображено основний сценарій взаємодії користувача з 
підрозділом «Міжнародні проекти». Цей сценарій охоплює типову поведінку 
студента, партнера, викладача або іншого відвідувача сайту.  
Основні дії користувача: 
‒ Відкриття сторінки підрозділу «Міжнародні проекти» на сайті 
кафедри; 
‒ Вибір одного з пунктів меню: новини проекту, історія його реалізації, 
партнери, інформація про викладачів і курси.  
‒ Перегляд відповідної інформації, включно з можливістю перейти до 
детальних описів або зовнішніх посилань. 
Усі дії ведуть до завершення потоку, після чого користувач може 
повернутися до початку та обрати інший розділ.  
50 
 
ЧДТУ 252158.010 ПЗ 
Рисунок 2.10 – Діаграма діяльності користувача web-ресурсу Erasmus+ (ч. 1) 
51 
 
ЧДТУ 252158.010 ПЗ 
Рисунок 2.10 – Діаграма діяльності адміністратора web-ресурсу Erasmus+ (ч. 2) 
 
2 Діаграма діяльності адміністратора 
На рисунку 2.10 (ч. 2) представлено діяльність адміністратора, який керує 
вмістом через CMS WordPress. Цей сценарій відображає процес редагування та 
публікації інформації на сайті. 
Послідовність дій адміністратора: 
‒ Авторизація у системі WordPress. 
‒ Перехід до підрозділу «Міжнародні проекти». 
52 
 
ЧДТУ 252158.010 ПЗ 
‒ Обрання розділу для редагування: новини, історія, партнери, курси, 
викладачі. 
‒ Внесення змін у відповідні блоки контенту. 
‒ Публікація оновлень – завершальний крок, що робить зміни 
доступними для користувачів. 
Ця діаграма ілюструє адміністративний сценарій і допомагає зрозуміти 
логіку керування вмістом сайту. 
Таке моделювання поведінки системи забезпечує візуальне представлення 
алгоритмів дій різних ролей у системі. Це дає змогу чітко визначити 
функціональні сценарії, їх послідовність, а також спростити майбутню реалізацію 
і підтримку ресурсу. 
2.5.2. Діаграма послідовності 
Діаграми послідовності дозволяють детально змоделювати процес взаємодії 
між об’єктами системи в рамках певного сценарію. Вони демонструють порядок 
обміну повідомленнями між об’єктами у часі, що дає змогу краще зрозуміти 
динамічну поведінку системи[29][30]. У даному випадку побудовано дві діаграми 
послідовності: для користувача та для адміністратора. 
1 Діаграма послідовності для користувача 
Ця діаграма (рисунок 2.11 ч. 1) відображає процес перегляду підрозділу 
«Міжнародні проекти» на сайті кафедри ПАЗС ЧДТУ. Учасники взаємодії: 
‒ Користувач; 
‒ User Interface (інтерфейс користувача); 
‒ Content Management Service (сервіс управління контентом); 
‒ Database Service (база даних). 
Користувач відкриває відповідну сторінку, після чого інтерфейс звертається 
до Content Management Service з метою отримання структури розділу. Далі сервіс 
взаємодіє з базою даних для зчитування метаданих і передає результат назад до 
інтерфейсу. 
Коли користувач обирає розділ «Новини», система надсилає запит на 
53 
 
ЧДТУ 252158.010 ПЗ 
зчитування відповідного контенту. У разі вибору конкретної новини, система 
отримує її деталі з бази даних і відображає їх користувачу.  
Основні типи повідомлень: 
‒ синхронні запити між шарами (суцільні стрілки); 
‒ повернення результату (пунктирні стрілки); 
‒ усі повідомлення супроводжуються логічною послідовністю обробки 
запитів. 
Операції з іншими розділами працюють аналогічно.  
 
Рисунок 2.11 – Діаграма послідовності взаємодії користувача з підрозділом 
«Новини» web-ресурсу Erasmus+  (ч.1) 
 
2 Діаграма послідовності для адміністратора 
Ця діаграма (рисунок 2.11 ч. 2) ілюструє дії адміністратора під час 
редагування контенту у CMS WordPress. Задіяні об’єкти: 
‒ Адміністратор; 
‒ Admin Panel (WordPress); 
‒ Content Management Service; 
‒ Database Service. 
54 
 
ЧДТУ 252158.010 ПЗ 
Процес починається з відкриття адмінпанелі та ініціалізації сесії. Далі 
система перевіряє права доступу адміністратора через  Content Management 
Service, який, у свою чергу, звертається до бази даних. Після підтвердження 
доступу адміністратор обирає сторінку, яку хоче змінити. 
Контент сторінки завантажується, відображається форма редагування, і 
після внесення змін ініціюється оновлення. Система зберігає змінений контент у 
базі даних і підтверджує успішну публікацію.  
 
Рисунок 2.11 – Діаграма послідовності взаємодії адміністратора з системою при 
редагуванні web-ресурсу Erasmus+  (ч.2) 
 
Ці діаграми дозволяють чітко представити логіку обробки запитів у системі, 
забезпечуючи прозоре уявлення про роль кожного учасника у сценаріях 
користування ресурсом. Вони особливо корисні для етапу реалізації, тестування і 
підтримки системи.  
2.5.3 Діаграма комунікації 
55 
 
ЧДТУ 252158.010 ПЗ 
Діаграма комунікації є важливим інструментом моделювання взаємодії 
компонентів програмної системи в межах конкретного сценарію. Вона дозволяє 
простежити обмін повідомленнями між учасниками процесу, наочно 
відображаючи логіку та послідовність взаємодії[31][32]. У даному випадку 
доцільно побудувати дві діаграми комунікації – окремо для адміністратора та 
користувача, що дозволяє розкрити специфіку їх взаємодії із системою.  
Діаграма комунікації для користувача (рисунок 2.12 ч. 1) 
Сценарій: перегляд новини у підрозділі «Міжнародні проекти». 
 
Рисунок 2.12 – Діаграма комунікації для користувача web-ресурсу Erasmus+ (ч.1) 
 
1 Користувач  User Interface: відкрити підрозділ "Міжнародні проекти" 
на сайті кафедри ПЗАС. 
2 User Interface  Content Management Service: отримати структуру 
підрозділу. 
56 
 
ЧДТУ 252158.010 ПЗ 
3 Content Management Service  Database Service: зчитати мета-дані 
підрозділу. 
4 Database Service  Content Management Service: повернути мета-дані 
підрозділу. 
5 Content Management Service  User Interface: відобразити навігаційне 
меню підрозділу. 
6 Користувач  User Interface: обрати розділ «Новини». 
7 User Interface  Content Management Service: отримати список новин. 
8 Content Management Service  Database Service: зчитати новини. 
9 Database Service  Content Management Service: повернути новини. 
10 Content Management Service  User Interface: відобразити новини. 
11 Користувач  User Interface: вибрати конкретну новину. 
12 User Interface  Content Management Service: відобразити деталі новини. 
13 Content Management Service  Database Service: зчитати детальну 
інформацію. 
14 Database Service  Content Management Service: повернути детальну 
інформацію. 
15 Content Management Service  User Interface: відобразити сторінку з 
деталями новини. 
Діаграма комунікації для користувача (рисунок 2.12 ч. 2) 
Сценарій: оновлення новин у підрозділі «Міжнародні проекти». 
1 Адміністратор  Admin Panel (WordPress): відкрити CMS WordPress. 
2 Admin Panel (WordPress)  Content Management Service: ініціалізація 
сесії. 
3 Content Management Service  Database Service: перевірка прав доступу. 
4 Database Service  Content Management Service: підтвердження 
авторизації. 
5 Content Management Service  Admin Panel (WordPress): допуск до 
адмін-панелі. 
6 Адміністратор  Admin Panel (WordPress): обрати сторінку. 
57 
 
ЧДТУ 252158.010 ПЗ 
7 Admin Panel (WordPress)  Content Management Service: завантажити 
контент. 
8 Content Management Service  Database Service: зчитати поточні дані. 
9 Database Service  Content Management Service: повернення даних. 
10 Content Management Service  Admin Panel (WordPress): відобразити 
форму. 
11 Адміністратор  Admin Panel (WordPress): редагувати новину. 
12 Admin Panel (WordPress)  Content Management Service: оновити 
контент. 
13 Content Management Service  Database Service: зберегти зміни. 
14 Database Service  Content Management Service: підтвердження 
збереження. 
15 Content Management Service  Admin Panel (WordPress): повідомлення 
про успіх. 
 
58 
 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 2.12 – Діаграма комунікації для адміністратора ресурсу Erasmus+ (ч.2) 
Завдяки графічному представленню зв’язків та нумерації повідомлень стає 
зрозумілим не лише порядок виконання дій, а й роль кожного об’єкта у процесі. 
Такий підхід дозволяє ефективно аналізувати логіку реалізації функціоналу, 
виявляти потенційні помилки у проектуванні та забезпечує прозорість взаємодії 
користувача і адміністратора із системою управління контентом.  
2.5.4 Діаграма скінченного автомату 
Діаграма скінченного автомату (діаграма станів) слугує для зображення 
змін у поведінці об’єкта в залежності від зовнішніх подій. Вона демонструє 
послідовний перехід між станами, у яких може перебувати система протягом 
взаємодії з користувачем [33][34]. Такий підхід дозволяє описати логіку 
поведінки інтерфейсу підрозділу «Міжнародні проекти» на сайті кафедри ПЗАС. 
59 
 
ЧДТУ 252158.010 ПЗ 
На рисунку 2.12 представлено діаграму станів, яка відображає основні стани 
взаємодії користувача з підрозділом «Міжнародні проекти» та можливі переходи 
між ними.  
Опис станів і переходів: 
Неактивний:  
‒ початковий стан, у якому користувач ще не відкрив сторінку; 
‒ перехід до активного стану здійснюється після відкриття підрозділу 
«Міжнародні проекти» на сайті кафедри ПЗАС; 
‒ повернення до неактивного стану можливе після закриття сторінки. 
Активний: 
‒ охоплює всі стани, пов’язані з навігацією по вмісту підрозділу; 
‒ після переходу в активний стан користувач потрапляє на головну 
сторінку підрозділу. 
Головна:  
‒ entry-дія: завантаження вмісту головної сторінки та меню навігації; 
‒ do-дія: очікування дій користувача для переходу до певного розділу. 
Перегляд розділу «Новини»: 
‒ перехід виконується при виборі відповідного пункту меню; 
‒ користувач може перейти до перегляду конкретної новини; 
‒ передбачено повернення до головної сторінки.  
 
60 
 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 2.13 – Діаграма скінченного автомату (діаграма станів)  
web-ресурсу Erasmus+ 
 
Перегляд конкретної новини: 
‒ стан, у якому користувач знайомиться з повною інформацією про 
новину; 
‒ повернення – назад до розділу «Новини» або до головної сторінки. 
Перегляд розділу «Викладачі та курси»: 
‒ користувач отримує доступ до інформації про викладачів та їх курси; 
‒ передбачено можливість перегляду інформації про конкретний курс. 
Перегляд інформації про курс: 
61 
 
ЧДТУ 252158.010 ПЗ 
‒ детальний стан, у якому користувач ознайомлюється з описом 
конкретного курсу; 
‒ передбачено повернення назад до розділу «Викладачі та курси», або 
на головну сторінку. 
Діаграма скінченного автомату чітко структурує процеси переходів між 
підрозділами сторінки «Міжнародні проекти». Завдяки цьому можна легко 
відстежити логіку навігації користувача, що сприяє створенню інтуїтивно 
зрозумілого інтерфейсу. Діаграма також дозволяє ефективніше моделювати і 
реалізовувати поведінку веб-інтерфейсу при розробці програмного забезпечення.   
62 
 
ЧДТУ 252158.010 ПЗ 
ВИСНОВОК ДО ДРУГОГО РОЗДІЛУ 
У другому розділі було здійснено всебічне моделювання роботи підрозділу 
«Міжнародні проекти» на сайті кафедри ПЗАС ЧДТУ засобами UML. Спочатку 
було детально описано вимоги до системи, що стало основою подальшого 
моделювання, окресливши основні сценарії використання, функціональні 
можливості та очікування замовника. 
Моделювання системи за допомогою UML діаграм охоплює як статичні, так 
і динамічні аспекти системи, зосереджуючи увагу на логіці взаємодії між 
користувачами та компонентами web-середовища. Вони дозволили описати 
основні функції системи, послідовність виконання дій, а також зміни станів у 
відповідь на події.  
Особливу увагу приділено деталізації сценаріїв взаємодії, що дозволило 
побудувати точні моделі процесів на рівні окремих підрозділів. Це не лише 
спростило реалізацію функціоналу, а й забезпечило відповідність очікуванням 
цільових користувачів, а також підвищило зручність і ефективність навігації 
ресурсом. Отримані результати є важливою передумовою для наступного етапу 
розробки системи, адже забезпечують її структурну цілісність і логічну 
послідовність дій.  
 
  
63 
 
ЧДТУ 252158.010 ПЗ 
РОЗДІЛ 3 РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО 
ЗАБЕЗПЕЧЕННЯ 
3.1 Розробка програмного комплексу 
У цьому підрозділі розглядається процес реалізації web-ресурсу, 
присвяченого проекту Next-Erasmus+, як частини сайту кафедри ПЗАС. 
Представлено етапи розробки: від підготовки середовища до створення 
функціональних та візуальних компонентів. Акцент зроблено на логіці роботи 
ресурсу, його структурі, інтеграції та забезпеченні зручного користувацького 
досвіду. 
3.1.1 Обґрунтування вибору засобів реалізації 
Процес реалізації інформаційного web-ресурсу проекту Next-Erasmus+ 
здійснюється з урахуванням існуючої структури сайту кафедри ПЗАС, а також 
вимог до інтеграції, зручності в оновленні, підтримки двомовності та 
презентаційного характеру ресурсу. Обрані інструменти забезпечують 
ефективність реалізації завдань, контроль над візуальним оформленням та 
збереження єдиного стилю платформи. 
1 CMS WordPress 
Система керування контентом WordPress [35] була обрана як основна для 
реалізації  ресурсу, оскільки існуючий сайт кафедри вже побудований на цій 
платформі. Це дозволило зберегти цілісність структури ресурсу, уникнути 
складної інтеграції з новими системами та забезпечити централізоване керування 
вмістом. WordPress пропонує широкий спектр плагінів та інструментів для 
адміністрування, що дозволяє швидко вносити зміни та розширювати 
функціональність сторінок за необхідності. 
2 Візуальний редактор Elementor 
Для створення сторінок використано плагін Elementor [36] – популярний 
візуальний редактор у середовищі WordPress. Вибір цього засобу обумовлений 
потребою у швидкій та гнучкій розробці без залучення низькорівневого коду. 
64 
 
ЧДТУ 252158.010 ПЗ 
Elementor дозволяє компонувати блоку контенту за допомогою drag-and-drop та 
швидко змінювати зовнішній вигляд елементів. 
3 HTML 
HTML [1] використовується для визначення структури сторінок, зокрема у 
випадках, коли необхідне точне позиціонування елементів або інтеграція 
компонентів, які не можуть бути реалізовані за допомогою редактора. Це 
забезпечує  гнучкість у формуванні розмітки та можливість ручного контролю над 
відображенням контенту. 
4 CSS 
Мова каскадних стилів CSS [2] використовується для стилізації HTML-
елементів: визначення кольорової гами, відступів, розміру шрифтів, а також для 
створення дизайну, який відповідає загальному стилю сайту кафедри. Вибір CSS 
обумовлений потребою точного налаштування зовнішнього вигляду компонентів і 
підтримки сучасних дизайнерських тенденцій. 
5 JavaScript 
JavaScript [37] застосовується для створення інтерактивних компонентів 
сторінок: анімацій, обробки подій користувача, динамічної зміни вмісту без 
перевантаження. Цей інструмент необхідний для забезпечення сучасного 
користувацького досвіду та покращення функціональності сторінок. Його 
використання дозволяє забезпечити відповідність вимогам до інтерфейсу та 
підвищити зручність взаємодії для різних груп користувачів. 
6 Плагін Polylang 
Для реалізації двомовного інтерфейсу було використано плагін  Polylang – 
одне з найпоширеніших рішень у WordPress для створення мультимовних сайтів. 
Завдяки Polylang кожна сторінка сайту може мати версії українською та 
англійською мовами, при цьому зберігаючи однакову структуру, оформлення та 
URL-навігацію. Плагін інтегрується з редактором Elementor, що забезпечує 
зручне керування мовними версіями через єдину адміністративну панель. 
Таким чином, кожен обраний засіб реалізації відповідає конкретним 
функціональним вимогам проекту, сприяє ефективній реалізації поставлених 
65 
 
ЧДТУ 252158.010 ПЗ 
задач, зменшує витрати на підтримку та спрощує майбутнє оновлення ресурсу.  
3.2 Опис структурної схеми 
Структурна схема [38] демонструє взаємодію між основними компонентами 
інформаційного web-ресурсу проекту Next-Erasmus+, відображаючи процес 
обробки запитів користувача, оновлення контенту та формування кінцевого 
результату – виведення сторінки (рисунок 3.1).  
 
 
Рисунок 3.1 – Структурна схема сторінки web-ресурсу Erasmus+ 
 
Система умовно поділяється на дві ключові підсистеми: редагування 
контенту та перегляд контенту. 
Центральним вузлом схеми є СУБД, яка забезпечує обробку, зберігання та 
видачу контенту. Вона взаємодіє як з підсистемою перегляду, так і з підсистемою 
66 
 
ЧДТУ 252158.010 ПЗ 
редагування вміст.  
Зліва представлено блок «Редагування контенту», який позначає ручне 
введення або оновлення даних через адміністративну панель сайту. Ці дії 
надходять до підсистеми редагування контенту, де реалізується функціонал для 
управління вмістом. Після обробки дані потрапляють у СУБД, де й відбувається 
оновлення БД.  
Праворуч знаходиться підсистема перегляду контенту, яка відповідає за 
обробку дій користувача. Взаємодія користувача (наприклад, вибір розділу чи 
мови) інтерпретується системою як формування запиту. Запит передається до 
СУБД. Після отримання відповідних даних відбувається їх передача до 
підсистеми формування сторінок.  
Підсистема формування сторінок, в свою чергу, формує вміст та виводить 
його у вигляді web-сторінки на дисплеї.  
Після отримання необхідних даних з БД активується процес формування 
сторінки, де контент структурується та форматується відповідно до шаблонів. 
Заключним етапом є виведення сторінки – подання результату у вигляді веб-
інтерфейсу для користувача через браузер.  
Цілісна структура дозволяє забезпечити зручну роботу з контентом як для 
адміністраторів, так і для відвідувачів ресурсу. Кожна з підсистем виконує чітко 
визначені функції, що дозволяє досягнути високого рівня структурованості, 
керованості та підтримки в системі. 
3.1.3 Опис логічної схеми 
Логічна схема ілюструє послідовність дій, що відбуваються в межах 
реалізованої інформаційного web-ресурсу проекту Next-Erasmus+ на сайті 
кафедри ПЗАС ЧДТУ (рисунок 3.2). Вона описує алгоритм роботи системи з 
перспективи користувача, починаючи з відкриття головної сторінки підрозділу 
«Міжнародні проекти» та завершуючи виведенням необхідного вмісту.  
Алгоритм роботи побудований за принципом реагування на інтерактивну 
команду користувача, що ініціює відображення тієї чи іншої частини контенту. 
67 
 
ЧДТУ 252158.010 ПЗ 
Усі логічні кроки реалізовано на рівні CMS WordPress через інтерфейс 
користувача.  
 
68 
 
ЧДТУ 252158.010 ПЗ 
Рисунок 3.2 – Логічна схема web-ресурсу Erasmus+ 
Алгоритм функціонування системи: 
1 Запуск системи: користувач відкриває підрозділ «Міжнародні проекти» 
на сайті кафедри ПЗАС, після чого система автоматично завантажує 
головну сторінку підрозділу разом із меню навігації. 
2 Вибір розділу: користувач обирає один з доступних розділів, запит 
перенаправляється до конкретного модуля. 
3 Обробка запиту: система формує запит до бази даних, у якому 
фіксується запитаний користувачем розділ. Відповідний вміст 
завантажується з БД. 
4 Формування сторінки: на основі отриманої інформації формується вміст 
сторінки відповідного розділу. Сторінка з інформацією виводиться у 
браузері користувача. 
5 Перевірка на подальшу взаємодію: система очікує повторного вибору 
іншого розділу. Якщо так – користувач повертається до етапу вибору, 
якщо ні – сеанс завершено. 
Логічна схема чітко відображає основні інформаційні процеси в системі: 
запит, доступ до БД, обробку контенту та його виведення. Така структура 
дозволяє підтримувати послідовність взаємодії, зручність навігації та забезпечує 
динамічне оновлення вмісту сторінки без зайвого навантаження на систему.  
3.1.4 Розробка бази даних 
Функціонування інформаційного ресурсу, розробленого в межах сайту 
кафедри ПЗАС ЧДТУ для проекту Next-Erasmus+, передбачає взаємодію з БД, яка 
виконує роль централізованого сховища контенту. Хоча база даних не 
створювалась вручну, її логічна структура впливає на побудову функціональних 
зв’язків  усередині системи та забезпечує узгоджене оновлення інформації.  
Інформаційна система умовно поділяється на дві ключові підсистеми: 
підсистема редагування контенту, що реалізується через інтерфейс 
адміністративної панелі CMS і забезпечує оновлення вмісту, та підсистема 
69 
 
ЧДТУ 252158.010 ПЗ 
перегляду контенту, що відповідає за доступ до актуальної інформації через web-
інтерфейс.  
Дані зберігаються у структурованому вигляді відповідно до логіки 
реляційної моделі. Кожна сутність у системі має власний набір атрибутів, що 
визначають її зміст та функціональне призначення. Це дозволяє створювати 
зв’язки між елементами web-ресурсу та забезпечувати гнучке управління 
контентом. 
У рамках реалізації сторінки було сформовано такі основні логічні одиниці: 
Головна сторінка, яка містить вступну інформацію про проект, загальні цілі 
та навігаційні блоки (атрибути: заголовок, текст, посилання на підсторінки). 
Сторінка новин, що відображає перелік актуальних публікацій із 
можливістю переходу на окрему сторінку новини (атрибути: заголовок, дата, 
зображення, текст). 
Сторінка історії проекту, де представлено хронологію участі в ініціативі 
Erasmus+ з переходом на окрему сторінку події (атрибути: назва події, дата, опис). 
Сторінка партнерів, де подано перелік учасників проекту та їх ролей 
(атрибути: назва установи, роль у проекті, зображення, посилання на сайт 
партнерів). 
Сторінка викладачів та курсів, яка містить узагальнену інформацію про 
освітні ініціативи в межах проекту з переходом на окрему сторінку курсу 
(атрибути: назва курсу, викладач, зображення, короткий опис, детальний опис). 
Увесь вміст вводиться через інтерфейс керування, після чого зберігається в 
базі даних CMS. При завантаженні сторінки відбувається вибірка відповідних 
записів з БД, після чого вони динамічно відображаються на сайті. Такий підхід 
забезпечує гнучкість у керуванні контентом та спрощує оновлення без потреби 
змінювати структуру вручну.  
Завдяки цьому сторінки підтримують актуальність даних, двомовність і 
можливість розширення, зберігаючи при цьому цілісність структури та зручність 
для різних категорій користувачів.  
70 
 
ЧДТУ 252158.010 ПЗ 
3.1.5 Розробка інтерфейсу користувача 
Інтерфейс користувача є ключовим компонентом у взаємодії відвідувача з 
web-ресурсом, тому його розробка базувалась на принципах зручності, 
послідовності та візуальної привабливості. Під час реалізації web-ресурсу та його 
розділів у межах сайту кафедри ПЗАС ЧДТУ було враховано сучасні вимоги до 
UI-дизайну, а також особливості цільової аудиторії, яка включає студентів, 
викладачів та міжнародних партнерів.  
Основні вимоги, що були поставлені до інтерфейсу:   
 Інтуїтивність: користувач має швидко орієнтуватися у структурі 
ресурсу, легко знаходити необхідну інформацію. 
 Структурованість контенту: інформація має бути логічна розділена на 
розділи, підрозділи та блоки.  
 Візуальна привабливість: відповідність сучасним вимогам дизайну. 
 Уніфікація стилю: єдиний стиль на всіх сторінках та узгодженість з 
дизайном головного сайту кафедри. 
 Двомовність: наявність української та англійської версії контенту. 
Обґрунтування використаних рішень: 
1 Шрифт 
Для реалізації сторінок було обрано шрифт Montserrat (рисунок 3.3), який є 
одним з найбільш популярних серед сучасних інтерфейсних рішень [42].  
Основними причинами вибору саме цього шрифту стали:  
 Чіткість форм та геометрія: Montserrat має добре окреслені літери без 
зайвих декоративних елементів, що підвищує зручність для зорового сприйняття. 
 Професійний вигляд: шрифт відповідає загальному стилю 
корпоративної айдентики  освітніх і міжнародних проектів.  
 Гармонійне відображення української та англійської абеток, що 
критично важливо для реалізації двомовної версії сторінки. 
 Уніфікація з основним сайтом кафедри ПЗАС: використання цього 
шрифту дозволяє зберігати візуальну єдність усіх підрозділів сайту.  
71 
 
ЧДТУ 252158.010 ПЗ 
Щодо розміру шрифту, було обрано такі значення: 
 Основний текст – 16 px, що відповідає сучасним рекомендаціям з 
web-дизайну як оптимальний розмір для читання з екранів [43]. 
 Заголовки – використовуються різні рівні (від 20 px до 36 px), з 
чіткою їєрархією, що полегшує орієнтацію користувача в структурі контенту.   
Загалом обраний шрифт і розмір тексту забезпечують високий рівень 
читабельності, естетики та зручності для користувачів із різним досвідом 
користування web-ресурсами. 
 
 
Рисунок 3.3 – Шрифт, використаний у інтерфейсі web-ресурсу Erasmus+ 
 
2 Колір 
Фіолетовий колір #6B29F0 (рисунок 3.4) використовується для акцентних 
елементів (посилення, кнопки, окремі графічні елементи). Цей колір є фірмовим 
для проекту Next-Erasmus+, тому його використання забезпечує візуальну 
ідентифікацію та зв’язок із міжнародною платформою. 
 
 
Рисунок 3.4 – Акцентний колір, використаний у інтерфейсі web-ресурсу Erasmus+ 
 
72 
 
ЧДТУ 252158.010 ПЗ 
3 Застосування карток для відображення контенту 
Картка – це окремий візуальний блок, який містить у собі логічно пов’язану 
інофрмацію: заголовок, зображення, текст, іноді – кнопку. Картки мають чітко 
окреслені межі, і візуально сприймаються  як самостійні одиниці (рисунок 3.5). 
Переваги використання карток у розробленому інтерфейсі: 
 Візуальна сегментація інфоомації: кожен блок (наприклад, новина, 
подія, курс і викладач) подано у вигляді окремої картки. Це дозволяє легко 
сприймати і відрізняти одну одиницю інформації від іншої. Замість суцільного 
тексту користувач бачить «упаковані» об’єкти – це покращує сприйняття 
інформації та структури сторінок. 
 Покращення візуального сканування сторінок: користувач може 
швидко «просканувати» візуальні елементи (наприклад, заголовки подій чи дати 
новин), не вчитуючись у весь текст. Це пришвидшує знаходження необхідної 
інформації. Завдяки уніфікованому формату карток погляд користувача рухається 
за передбачуваним сценарієм – від зображення до заголовка і далі до опису чи 
кнопки. 
 Фокус на візуальну складову: зображення на картках – обличчя 
викладачів, логотипи партнерів – підсилюють емоційне сприйняття, роблять 
сторінки більш «живою». Це створює відчуття надійності, відкритості та 
прозорості проекту, особливо важливе для міжнародної аудиторії.  
 Управління простором: картковий інтерфейс дозволяє економно 
розподіляти вільний простір сторінок, уникаючи перевантаженості.  Можна легко 
додавати або прибирати картки, не змінюючи загальний вигляд сторінок – це 
робить інтерфейс гнучким у подальшому редагуванні.  
 
73 
 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 3.5 – Використання карток у інтерфейсі web-ресурсу Erasmus+                     
(розділ «Партнери») 
Таким чином, використання карток дозволяє не тільки зробити інтерфейс 
сучасним та естетичним, але й значно підвищує ефективність навігації та 
швидкість взаємодії користувача з ресурсом.  
4 Інтуїтивність інтерфейсу 
 Виділення важливих елементів: заголовки і підзаголовки мають 
візуальну ієрархію завдяки контрастному розміру шрифту та товщини (рисунок 
3.6). Наприклад, назви сторінок виділені більшим розміром та жирністю. 
 
 
Рисунок 3.6 – Приклад використання заголовків та підзаголовків в інтерфейсі 
web-ресурсу Erasmus+ (розділ «Викладачі та курси») 
 
74 
 
ЧДТУ 252158.010 ПЗ 
 Акцентний колір: ключові елементи (посилання, кнопки, індикатори 
розділів) оформлено кольором #6B29F0, що створює контраст з основним текстом 
і автоматично привертає увагу користувача (рисунок 3.7). 
 Використання блоків з фоном (новини чи події в «Історії проекту») 
забезпечує візуальне групування інформації – користувач одразу розуміє, що це 
окремий об’єкт (рисунок 3.8). 
 Розстановка акцентів: виділення дат у новинних блоках: дата 
публікації новини поміщена в окремий блок з фоном, що створює візуальний 
маркер часу – важливий для відстеження актуальності подій (рисунок 3.9).  
 
 
Рисунок 3.7 – Приклад використання акцентного кольору в інтерфейсі  
web-ресурсу Erasmus+ (розділ «Партнери») 
 
 
Рисунок 3.8 – Використання блоків з фоном в інтерфейсі web-ресурсу Erasmus+ 
(розділ «Історія проекту») 
 
75 
 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 3.9 – Виділення дат у інтерфейсі web-ресурсу Erasmus+ («Новини») 
 
 Кнопки з чіткими позначками (рисунок 3.10): заклики до дії 
(«Переглянути детальніше») виділяються розміром, кольором та розміщені в 
нижній частині кожного інформаційного блоку, що природно вписується в логіку 
прочитання зліва направо, зверху вниз.  
 Фото викладачів і логотипи партнерів також виконують роль 
візуальних «якорів» (рисунок 3.11), які дають змогу орієнтуватися у вмісті 
сторінки.  
 
Рисунок 3.10 – Приклад використання кнопок з позначками в інтерфейсі  
web-ресурсу Erasmus+  (розділ «Викладачі та курси») 
 
76 
 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 3.11 – Приклад використання фото як візуальних «якорів» у інтерфейсі 
web-сторінки (розділ «Викладачі та курси») 
 
 Організація навігації: горизонтальне меню (рисунок 3.12) у верхній 
частині головної сторінки ресурсу дозволяє швидко перейти до основних розділів 
(«Новини», «Історія проекту», «Партнери», «Викладачі та курси»), що зручно для 
користувачів з різним рівнем досвіду. 
 Посилання типу «Повернутись до …» в нижній частині сторінок 
реалізують «хлібні крихти» - забезпечують легке повернення до попереднього 
рівня структури (рисунок 3.13). 
 
 
Рисунок 3.12 – Єдине горизонтальне меню в інтерфейсі web-ресурсу Erasmus+ 
(головна сторінка підрозділу «Міжнародні проекти» на сайті кафедри) 
 
 Однорідність розташування блоків на всіх сторінках: основний 
контент подається в центральній колонці, додаткова інформація або переходи – 
77 
 
ЧДТУ 252158.010 ПЗ 
знизу або через виділені кнопки, що відповідає загальноприйнятим UX-практикам 
(рисунок 3.14). 
 
Рисунок 3.13 – Реалізація посилань в нижній частині сторінок web-ресурсу 
Erasmus+ (розділ «Історія проекту») 
 
 
Рисунок 3.14 – Приклад однорідного розташування блоків у інтерфейсі сторінок 
web-ресурсу Erasmus+ (розділ «Історія проекту») 
5 Двомовність 
Особливу увагу було приділено підтримці двомовності ресурсу, оскільки 
сторінка орієнтована як на локальних користувачів (студентів та викладачів), так і 
на міжнародну аудиторію (учасників та партнерів проекту Next-Erasmus+). Для 
реалізації цієї функціональності було впроваджено окрему мовну версію кожної 
сторінки, що дозволяє дублювати контент українською та англійською мовами. 
Користувачі можуть швидко перемикатися між мовами за допомогою 
зручного мовного перемикача, розміщеного у верхній частині сторінки на панелі 
навігації сайту кафедри ПЗАС. Завдяки цьому забезпечується повноцінний доступ 
78 
 
ЧДТУ 252158.010 ПЗ 
до інформації без необхідності використання сторонніх інструментів перекладу, 
що підвищує якість взаємодії з сайтом та позитивно впливає на користувацький 
досвід, а також сприяє виконанню представницької функції ресурсу у 
міжнародному освітньому середовищі. 
 
 
Рисунок 3.15 – Реалізація двомовності в інтерфейсі сторінок web-ресурсу 
Erasmus+ (розділ «Історія проекту») 
 
Загалом, інтерфейс розробленого web-ресурсу повністю відповідає 
критеріям зручності, візуальної гармонії та функціональності. Він 
створює позитивне враження в користувачів, підвищує доступність до 
освітньої інформації та підсилює репрезентативну функцію проекту 
Next-Erasmus+. 
3.1.6 Опис розробки програмних компонентів 
Процес створення web-ресурсу проекту Next-Erasmus+, що є частиною 
офіційного сайту кафедри ПЗАС ЧДТУ, передбачав ручну розробку структурних 
компонентів із використанням HTML, CSS та JavaScript. Кожен компонент 
відповідає за відображення окремої логічної частини сторінки та реалізує 
конкретну функціональність, необхідну для інформування користувачів про різні 
79 
 
ЧДТУ 252158.010 ПЗ 
аспекти проекту.  
Основні програмні компоненти: 
1 Головна сторінка проекту 
Призначення: подає короткий вступ до ініціативи  Next-Erasmus+, 
включаючи текст з заголовками, навігацію з посиланням на окремі сторінки та 
логотипи.  
Реалізація: побудована вручну з HTML-розмітки та стилізована за 
допомогою CSS. Забезпечує перехід до тематичних сторінок за допомогою 
посилань.  
2 Модуль новин 
Призначення: формує стрічку новин, яка містить заголовки та коротку 
інформацію про кожну новину та кнопки переходу до повного тексту кожної 
новини. 
Реалізація: кожна новина відображається у вигляді окремої картки. 
Реалізовано сторінку зі зведеним переліком новин, а також окремі сторінки для 
повного перегляду публікацій. Сторінки побудовані за допомогою HTML-
розмітки, стилізовані за допомгою CSS. Також використано JavaScript для 
реалізації фотогалерей на сторінках з повним текстом новин.  
3 Модуль історії проекту 
Призначення:  структуровано відображає загальну історію Erasmus+ та 
історію конкретного проекту Next-Erasmus+ KA2 Project з поділом на події. 
Реалізація: використано логічну групу карток, де кожна картка відповідає за 
окрему подію. Кожна подія відкривається на власній сторінці з детальною 
інформацією. Для реалізацію використано HTML-структуру та CSS для стилізації. 
4 Модуль партнерів 
Призначення: представляє закордонні та вітчизняні організації, що беруть 
участь у реалізації проекту.  
Реалізація: створено картки з логотипами партнерів та короткими описами. 
Використано HTML-структуру, CSS для стилізації та JavaScript для анімації зміни 
фото при наведенні.  
80 
 
ЧДТУ 252158.010 ПЗ 
5 Модуль курсів та викладачів: 
Призначення: презентує список курсів у межах проектів та відповідальних 
за них викладачів. 
Реалізація: вивід інформації здійснено у вигляді карток. Кожен курс має 
власну сторінку з описом тематики та інформацією про викладача. Реалізовано за 
допомогою HTML, CSS. JavaScript використано для перемикання видимості блоку 
з детальною інформацією про курс.  
Зв’язки між компонентами: 
Усі компоненти сторінки взаємопов’язані через загальну систему навігації. 
Меню на головній сторонці забезпечує швидкий доступ до кожного 
функціонального блоку. Блок новин має можливість повернення на головну 
сторінку через кнопку з посиланням, а також можливість переходу на окремі 
сторінки з детальною інформацією новин за допомогою відповідних кнопок. 
Модуль «Історія проекту» реалізує можливість повернення на головну сторінку, а 
також перехід на сторінки конкретних подій. Модуль партнерів має як зв’язок з 
головною сторінкою, так і посилання на офіційні ресурси кожного з партнерів. 
Модуль «Викладачі та курси» пов’язаний з головною сторінкою за допомогою 
кнопки, а також зі сторінками з детальним описом курсів. Кожна сторінка 
підтримує єдиний стиль оформлення, що реалізовано шляхом повторного 
використання CSS-класів і загальних стилів. Структура побудована так, щоб 
забезпечити логічну послідовність подання контенту – від загального огляду 
проекту до конкретних підрозділів.  
Таким чином, усі програмні компоненти реалізовані вручну без 
застосування шаблонів візуальних конструкторів. Це дозволило зберігти контроль 
над структурою коду та реалізувати специфічні вимоги до оформлення сторінок 
проекту.  
3.2 Тестування системи 
З метою перевірки коректності реалізації функціональних елементів web-
ресурсу проекту Next-Erasmus+ було проведено модульне тестування розроблених 
81 
 
ЧДТУ 252158.010 ПЗ 
компонентів. Тестування проводилося вручну в середовищі web-браузера, з 
урахуванням типових сценаріїв поведінки користувача. Основна увага 
приділялась перевірці роботи навігації, відповідності вмісту кожної сторінки 
очікуваному результату, а також коректності взаємодії між окремими модулями. 
3.2.1 Модульне тестування 
Модульне тестування полягало у перевірці роботи окремих сторінок сайту 
та їх відповідності заданому функціоналу. 
У таблиці представлено результати тестування модулів сайту. 
 
Таблиця 3.1 
Модульне тестування сторінок web-ресурсу Erasmus+ 
Результат 
Модуль Тестовий випадок Статус 
перевірки 
Відкриття головної сторінки При відкритті Пройдено 
Головна 
web-ресурсу «Міжнародні 
сторінка web-
проекти» на сайті 
ресурсу проекту 
ПЗАС відкрито 
Next-Erasmus+ 
головну сторінку 
 
Продовження таблиці 3.1 
 Відкриття сторінки Відкривається Пройдено 
«Новини» при натисканні сторінка з новинами 
на відповідну кнопку 
навігаційного меню 
Відкриття сторінки «Історія Відкривається Пройдено 
проекту» при натисканні на сторінка з історією 
відповідну кнопку проекту 
навігаційного меню 
Відкриття сторінки Відкривається Пройдено 
82 
 
ЧДТУ 252158.010 ПЗ 
«Партнери» при натисканні сторінка з переліком 
на відповідну кнопку партнерів 
навігаційного меню 
Відкриття сторінки Відкривається Пройдено 
«Викладачі та курси» при сторінка з переліком 
натисканні на відповідну курсів та викладачів 
кнопку навігаційного меню 
Повернення зі сторінки Після натискання на Пройдено 
«Новини» на головну кнопку на екрані 
сторінку при натисканні відображається 
Модуль кнопки «Повернутися до головна сторінка 
«Новини» головної сторінки» 
Модуль Перехід на сторінку Після натисканні на Пройдено 
«Історія конкретної новини після кнопку відбувається 
проекту» натискання на кнопку на окрему сторінку з 
«Детальніше» у одній з повним текстом 
карток новин (протестовано новини  
для кожної новини) 
 
 
Продовження таблиці 3.1 
 Перемикання між Після натискання на Пройдено 
фотографіями у галереї на кнопку для 
сторінці з детальною перемикання 
інформацією новини фотографій 
(протестовано для кожної зображення 
сторінки з функціоналом змінюється 
галереї)  
Повернення до списку новин Після натискання на Пройдено 
з окремої сторінки при кнопку відкривається 
83 
 
ЧДТУ 252158.010 ПЗ 
натисканні на кнопку сторінка з усіма 
«Повернутися до списку новинами 
новин» (протестовано для 
кожної новини) 
 Анімація блоку новини при При наведені курсору Пройдено 
наведенні мишею миші на блок новини 
(протестовано для всіх він виділяється 
новин) 
Повернення зі сторінки Після натискання на Пройдено 
«Історія проекту» на кнопку на екрані 
головну сторінку при відображається 
натисканні кнопки головна сторінка 
«Повернутися до головної 
сторінки» 
Перехід на сторінку Після натисканні на Пройдено 
конкретної події після кнопку відбувається 
натискання на кнопку на окрему сторінку з 
«Детальніше» (протестовано повним текстом події 
для кожної події) 
 
Продовження таблиці 3.1 
 Повернення до сторінки Після натискання на Пройдено 
«Історія проекту» з окремої кнопку відкривається 
сторінки подій при сторінка з історією 
натисканні на кнопку проекту 
«Повернутися до історії 
проекту» (протестовано для 
кожної події) 
Анімація блоку події при При наведені курсору Пройдено 
наведенні мишею миші на блок події він 
84 
 
ЧДТУ 252158.010 ПЗ 
(протестовано для всіх виділяється 
подій) 
Повернення зі сторінки Після натискання на Пройдено 
«Партнери» на головну кнопку на екрані 
сторінку при натисканні відображається 
кнопки «Повернутися до головна сторінка 
головної сторінки» 
Перехід на офіційний ресурс При натисканні на  
партнера при натисканні на кнопку в окремій 
Модуль кнопку «Перейти на сайт» вкладці браузера 
«Партнери» (протестовано для всіх відкривається 
карток партнеріа) офіційний сайт 
партнера  
Анімація фотографії на При наведенні  
картці партнера при курсору миші на фото 
наведені мишею логотипу воно 
(протестовано для всіх змінюється 
карток партнерів) фотографією установи 
 
 
Продовження таблиці 3.1 
 Анімація картки партнера При наведені курсору Пройдено 
при наведенні мишею миші на картку 
(протестовано для всіх партнера вона 
карток) виділяється 
Повернення зі сторінки Після натискання на Пройдено 
Модуль «Викладачі та курси» на кнопку на екрані 
«Викладачі головну сторінку при відображається 
так курси» натисканні кнопки головна сторінка 
«Повернутися до головної 
85 
 
ЧДТУ 252158.010 ПЗ 
сторінки» 
Перехід на сторінку Після натисканні на Пройдено 
конкретного курсу після кнопку відбувається 
натискання на кнопку на окрему сторінку 
«Переглянути детальніше» курсу 
(протестовано для кожного 
курсу) 
Відкриття детальної Після натискання на Пройдено 
інформації про розділ курсу кнопку на екрані 
після натискання на кнопку замість короткої 
«Переглянути детальніше» інформації 
(протестовано для кожного відображається 
курсу) детальна інформація 
про розділ курсу 
Двомовність При натисканні на кнопку При натисканні на Пройдено 
перемикання на англійську кнопки сторінки 
сторінки відображаються відображаються 
англійською (протестовано англійською мовою  
для всіх сторінок) 
 
Всі модулі успішно пройшли перевірку, що підтверджує коректність роботи 
web-ресурсу у відповідності до запланованої логіки. 
3.2.2 Інтеграційне тестування 
Інтеграційне тестування у рамках даної кваліфікаційної роботи не 
проводилося, оскільки реалізовані компоненти web-ресурсу інтегруються у вже 
існуючу платформу кафедри, що пройшла попередні перевірки на функціональну 
узгодженість. Усі взаємозв’язки реалізованих модулів є внутрішніми для 
WordPress і не вимагають окремого ручного тестування. 
86 
 
ЧДТУ 252158.010 ПЗ 
3.2.3 Системне тестування 
Повноцінне системне тестування не проводилось, оскільки проектований 
web-ресурс є частиною існуючої системи, яка вже експлуатується. Проте 
функціонування сторінок в рамках загальної структури сайту було перевірено під 
час модульного тестування, що дозволяє зробити висновок про відсутність 
критичних порушень у взаємодії з іншими частинами системи. 
3.2.4 Приймальне тестування 
 Приймальне тестування у класичному вигляді не проводилось, оскільки 
web-ресурс був реалізований в рамках навчального проекту без формалізованої 
передачі замовнику. Проте функціональність була погоджена з керівником 
роботи, а перевірка відповідності технічному завданню здійснювались у процесі 
модульного тестування. 
Таким чином, на основі проведеного тестування можна зробити висновок, 
що сторінка повністю виконує свої функції, є доступною для користувачів і 
відповідає технічним вимогам, визначеним на етапі проектування. 
3.3 Приклади впровадження програмного комплексу 
У цьому розділі представлено приклади реалізованого web-ресурсу 
освітнього проекту Next-Erasmus+, який є частиною офіційного сайту кафедри 
програмного забезпечення автоматизованих систем ЧДТУ.  
Сценарії використання охоплюють усі основні функціональні можливості 
web-ресурсу, включаючи навігацію між розділами, перегляд новин, переходи до 
повного змісту подій та навчальних курсів, повернення до попередніх сторінок, а 
також перемикання мовної версії інтерфейсу. Кожен приклад наочно демонструє, 
як користувач взаємодіє з окремими елементами сторінок в рамках реального 
сеансу роботи з ресурсом. 
Усі кроки описані послідовно та ілюстровані відповідними зображеннями 
інтерфейсу, що дає змогу сформувати цілісне уявлення про функціональність та 
зручність використання створеного програмного комплексу. 
87 
 
ЧДТУ 252158.010 ПЗ 
1 Відкриття головної сторінки 
Користувач заходить на офіційний сайт кафедри ПЗАС ЧДТУ та обирає 
пункт «Міжнародні проекти» а розділі «Проекти» головного меню. На екрані 
відображається головна сторінка підрозділу «Міжнародні проекти» (рисунок 3.15, 
рисунок 3.16) 
2 Відкриття розділу «Новини». 
У верхній частині головної сторінки під логотипами проекту Next-Erasmus+ 
є навігаційне меню. Користувач натискає на розділ меню «Новини» та переходить 
на сторінку новин (рисунок 3.17, рисунок 3.18). 
3 Відкриття повного тексту новини. 
У розділі «Новини» користувач обирає новину, яку він хоче переглянути, та 
натискає на кнопку «Детальніше» у відповідній картці новини. Відкривається 
сторінка з повним текстом новини (рисунок 3.19, рисунок 3.20). 
4 Повернення до списку новин. 
Користувач натискає на кнопку «Повернутися до списку новин», яка 
знаходиться у нижній частині сторінці зліва під карткою з текстом новини. 
Відбувається перехід на сторінку з переліком новин (рисунок 3.21). 
5 Повернення до головної сторінки. 
Користувач натискає на кнопку «Повернутись до головної сторінки», що 
знаходиться у нижній частині сторінки зліва під останньою карткою новин. 
Відбувається перехід до головної сторінки сайту (рисунок 3.22). 
6 Відкриття розділу «Історія проекту». 
У навігаційному меню головної сторінки користувач натискає на розділ 
меню «Історія проекту» та переходить на сторінку історії проекту (рисунок 3.23, 
рисунок 3.24). 
7 Відкриття повного тексту події. 
У розділі «Історія проекту» користувач обирає подію, яку він хоче 
переглянути, та натискає на кнопку «Детальніше» у відповідній картці події. 
Відкривається сторінка з повним текстом події (рисунок 3.25, рисунок 3.26). 
8 Повернення до сторінки з історією проекту. 
88 
 
ЧДТУ 252158.010 ПЗ 
Користувач натискає на кнопку «Повернутися до історії проекту», яка 
знаходиться у нижній частині сторінці зліва під картками подій. Відбувається 
перехід на сторінку з історією проекту (рисунок 3.27). 
9 Повернення до головної сторінки. 
Користувач натискає на кнопку «Повернутись до головної сторінки», що 
знаходиться у нижній частині сторінки зліва під картками подій. Відбувається 
перехід до головної сторінки сайту (рисунок 3.28). 
10 Відкриття розділу «Партнери». 
У навігаційному меню головної сторінки користувач натискає на розділ 
меню «Партнери» та переходить на сторінку з переліком партнерів (рисунок 3.29, 
рисунок 3.30). 
11 Відкриття офіційного сайту партнера. 
У розділі «Партнери» користувач обирає партнера, сайт якого він хоче 
переглянути, та натискає на кнопку «Перейти на сайт» у відповідній картці 
партнера. У окремій вкладці браузера відкривається сторінка з офіційним 
ресурсом партнера (рисунок 3.31, рисунок 3.32). 
12 Повернення до головної сторінки. 
Користувач натискає на кнопку «Повернутись до головної сторінки», що 
знаходиться у нижній частині сторінки зліва під картками партнерів. Відбувається 
перехід до головної сторінки сайту (рисунок 3.33). 
13 Відкриття розділу «Викладачі та курси». 
У навігаційному меню головної сторінки користувач натискає на розділ 
меню «Викладачі та курси» та переходить на сторінку з переліком викладачів та 
курсів (рисунок 3.34, рисунок 3.35). 
14 Відкриття повної інформації про курс. 
У розділі «Викладачі та курси» користувач обирає курс, який він хоче 
переглянути, та натискає на кнопку «Переглянути детальніше» у відповідній 
картці курсу. Відкривається сторінка з повною інформацією про конкретний курс 
(рисунок 3.36, рисунок 3.37). 
15 Відкриття детальної інформації про розділ курсу. 
89 
 
ЧДТУ 252158.010 ПЗ 
На сторінці з повною інформацією по обраному курсу користувач натискає 
на кнопку «Переглянути детальніше» у картці розділу курсу, інформацію про 
який він хоче переглянути. На екрані з’являється блок з детальною інформацію по 
обраному розділу (рисунок 3.38, рисунок 3.39). 
16 Повернення на сторінку з переліком курсів. 
Користувач натискає на кнопку «Повернутися до переліку курсів», яка 
знаходиться у нижній частині сторінці зліва під картками з розділами курсу. 
Відбувається перехід на сторінку з переліком курсів і викладачів (рисунок 3.40). 
17 Повернення до головної сторінки. 
Користувач натискає на кнопку «Повернутись до головної сторінки», що 
знаходиться у нижній частині сторінки зліва під картками викладачів та курсів. 
Відбувається перехід до головної сторінки сайту (рисунок 3.41). 
18 Перемикання на англійську мову. 
Користувач натискає на кнопку перемикання мови у лівому кутку 
навігаційного меню сайту кафедри. Сторінка відображається англійською мовою 
(рисунок 3.42, рисунок 3.43). 
Ці приклади демонструють повну реалізацію задуманої структури та логіки 
взаємодії з користувачем, а також ефективну реалізацію двомовності та навігації. 
Розроблений ресурс є інтуїтивно зрозумілим і зручним у використанні для 
цільової аудиторії.  
 
 
Рисунок 3.15 – Відкриття підрозділу «Міжнародні проекти» сайту кафедри ПЗАС 
 
90 
 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 3.16 – Головна сторінка web-ресурсу проекту Next-Erasmus+ 
 
 
Рисунок 3.17 – Відкриття розділу «Новини» web-ресурсу проекту Next-Erasmus+ 
 
91 
 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 3.18 – Розділ «Новини» web-ресурсу проекту Next-Erasmus+ 
 
Рисунок 3.19 – Відкриття сторінки з повною інформацією новини 
 
92 
 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 3.20 – Сторінка з повною інформацією новини 
 
 
Рисунок 3.21 – Кнопка для повернення до розділу «Новини» 
 
 
Рисунок 3.22 – Кнопка для повернення до головної сторінки з розділу «Новини» 
 
93 
 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 3.23 – Відкриття розділу «Історія проекту» web-ресурсу проекту Next-
Erasmus+ 
 
 
Рисунок 3.24 – Розділ «Історія проекту» web-ресурсу проекту Next-Erasmus+ 
94 
 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 3.25 – Обрання події для перегляду повної інформації 
 
 
Рисунок 3.26 – Сторінка з повним текстом події  
 
 
Рисунок 3.27 – Кнопка для повернення до сторінки з історією проекту 
 
95 
 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 3.28 – Кнопка для повернення на головну сторінку  
з розділу «Історія проекту» 
 
 
Рисунок 3.29 – Відкриття розділу «Партнери» web-ресурсу проекту Next-Erasmus+ 
 
 
Рисунок 3.30 – Розділ «Партнери» web-ресурсу проекту Next-Erasmus+ 
 
96 
 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 3.31 – Кнопка для переходу на офіційний ресурс партнера 
 
 
Рисунок 3.32 – Відкриття сайту партнера в окремій вкладці браузера 
 
 
Рисунок 3.33 – Кнопка повернення на головну сторінку з розділу «Партнери» 
 
 
Рисунок 3.34 – Обрання розділу «Викладачі та курси» web-ресурсу проекту Next-
Erasmus+ 
 
97 
 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 3.35 - Розділ «Викладачі та курси» web-ресурсу проекту Next-Erasmus+ 
 
98 
 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 3.36 – Кнопка для відкриття повної інформації про курс  
 
 
Рисунок 3.37 – Сторінка з повною інформацією про обраний курс 
 
99 
 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 3.38 – Кнопка для перегляду детальної інформації про розділ курсу 
 
 
Рисунок 3.39 – Відображення детальної інформації про розділ курсу 
 
 
Рисунок 3.40 – Кнопка для повернення до сторінки з переліком курсів 
 
100 
 
ЧДТУ 252158.010 ПЗ 
 
Рисунок 3.41 – Кнопка для повернення на головну сторінку  
з розділу «Викладачі та курси» 
 
 
Рисунок 3.42 – Кнопка для перемикання на англійську мову 
 
 
Рисунок 3.43 – Відображення сторінки web-ресурсу проекту Next-Erasmus+ 
англійською мовою 
101 
 
ЧДТУ 252158.010 ПЗ 
ВИСНОВОК ДО ТРЕТЬОГО РОЗДІЛУ 
У цьому розділі детально описано процес реалізації програмного 
забезпечення web-ресурсу освітнього проекту Next-Erasmus+ із повним 
відображенням етапів розробки, тестування та прикладів функціонування. У 
процесі розробки було обґрунтовано вибір відповідних технологій, які 
забезпечують гнучку кастомізацію, стабільну роботу ресурсу та можливість 
зручного адміністрування в середовищі WordPress. Особливу увагу було 
приділено реалізації багатомовності, що забезпечується за допомогою плагіну 
Polylang, а також візуальній доступності та логічній структурі інтерфейсу для 
різних категорій користувачів.  
У межах розробки програмного комплексу було створено набір окремих 
сторінок із відповідною функціональністю, які взаємодіють з БД через CMS. Усі 
сторінки побудовані за допомого. HTML, CSS та JavaScript без використання 
шаблонів конструктора, що забезпечило більшу гнучкість та контроль над 
виглядом та структурою ресурсу. 
Проведене функціональне тестування підтвердило коректність роботи 
навігації, динамічне завантаження контенту, стабільну роботу системи у відповідь 
на дії користувача та відсутність помилок при переході між сторінками. 
Результати тестування відображено у вигляді таблиці з прикладами перевірених 
сценаріїв. 
Також у розділі було наведено приклади взаємодії користувача з web-
ресурсом, що дозволяють оцінити практичну реалізацію усіх ключових функцій 
проекту: перегляд новин, інформації про партнерів, курси та викладачів, а також 
переходи до окремих сторінок з детальною інформацією з можливістю 
повернення на головну сторінку. Таким чином, розроблений програмний 
комплекс повністю відповідає визначеним вимогам до структури, дизайну, 
функціональності та стабільності.  
 
  
102 
ЧДТУ 252158.010 ПЗ 
ВИСНОВКИ 
У результаті виконання кваліфікаційної роботи було успішно реалізовано 
інформаційну web-систему проекту Next-Erasmus+ KA2 як складову офіційного 
сайту кафедри ПЗАС ЧДТУ. Проаналізовано сучасні підходи до організації 
освітніх web-ресурсів, визначено вимоги до двомовного інтерфейсу, зручної 
структури подання контенту, а також засобів його подальшої підтримки. 
У межах дослідження було розв’язано прикладну наукову задачу 
проектування web-представлення міжнародного освітнього проекту з 
урахуванням вимог до інформативності, зручності використання та відповідності 
корпоративному стилю. Практичне значення отриманих результатів полягає в 
розробці ефективної архітектури сторінки, яка демонструє можливість 
впровадження сучасних підходів до проектування в реальні умови існуючого 
сайту без потреби втручання в основну CMS-структуру.  
Особливу увагу приділено етапу проектування. У відповідному розділі було 
здійснено побудову UML-діаграм, що дозволило детально змоделювати поведінку 
системи, взаємодію компонентів та користувачів, а також структуру даних. Це 
надало можливість заздалегідь виявити ключові функціональні елементи та 
оптимізувати процес реалізації.  
У процесі розробки створено структурну (функціональну) та логічну схеми 
системи, розроблено логіку взаємодії з БД, сформовано інтерфейс користувача з 
урахуванням візуальної доступності та збереження айдентики проекту. 
У процесі реалізації було використано сучасні web-технології: HTML, CSS, 
JavaScript, CMS WordPress з візуальним редактором Elementor та плагіном 
Polylang для підтримки двомовності. Розробка інтерфейсу відбувалася вручну 
через написання коду, що дозволило досягти повної кастомізації сторінок. 
Забезпечено візуальну і структурну відповідність загальному стилю сайту та 
вимогам зручної навігації. 
Функціонування системи було перевірено шляхом практичного тестування, 
у ході якого всі основні сценарії користувача відпрацьовувались вручну. Під час 
тестування було підтверджено коректну роботу всіх функцій, включаючи 
103 
ЧДТУ 252158.010 ПЗ 
навігацію, перегляд мультимедійного контенту, перемикання мов і взаємозв’язок 
між сторінками. Результати показали надійність реалізації, зручність 
використання і стабільну роботу web-компонентів без помилок. Практичне 
впровадження підтверджується тим, що сторінка вже доступна для користувачів 
на сайті кафедри ПЗАС. 
Отримані результати мають практичну цінність і можуть бути використані 
як основа для розробки інформаційних ресурсів інших освітніх або міжнародних 
проектів, що працюють на платформі WordPress. Розроблений підхід демонструє 
ефективність модульного розширення вже існуючих систем із мінімальними 
витратами та високим рівнем адаптивності до специфіки контенту.   
 
104 
ЧДТУ 252158.010ПЗ 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 
1 Mozilla Developer Network. HTML: HyperText Markup Language 
[Електронний ресурс]. – Режим доступу: https://developer.mozilla.org/en-
US/docs/Web/ HTML. 
2 UMITY – методичний портал. CSS: каскадні таблиці стилів [Електронний 
ресурс]. – Режим доступу: https://umity.in.ua/concept/?id=1401.  
3 WPZOOM. Wordpress Statistics and Facts [Електронний ресурс]. – Режим 
доступу: https://www.wpzoom.com/blog/wordpress-statistics/. 
4 WordPress.org. About WordPress [Електронний ресурс]. – Режим доступу: 
https://wordpress.org/about/. 
5 Mozilla Developer Network. JavaScript Guide [Електронний ресурс]. – Режим 
доступу: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide. 
6 Apache Software Foundation. About the Apache HTTP Server Project 
[Електронний ресурс]. – Режим доступу:  https://httpd.apache.org/ 
ABOUT_APACHE.html.  
7 Intechnic. How to Do SWOT Analysis for Your Wedsite [Електронний ресурс]. 
– Режим доступу: https://www.intechnic.com/blog/how-to-perform-a-swot-
analysis-for-your-website/. 
8 Userpilot. How to Perform User Needs Analysis for SaaS [Електронний 
ресурс]. – Режим доступу: : https://userpilot.com/blog/user-needs-analysis/. 
9 BestWebSoft. Logical Structure of Website: Essential Guide for Developers 
[Електронний ресурс]. – Режим доступу: https://bestwebsoft.com/blog/logical-
structure-of-website. 
10 GeeksforGeeks. Domain Modeling in Object-Oriented Analysis and Design 
(OOAD) [Електронний ресурс]. – Режим доступу: https:// 
www.geeksforgeeks.org/domain-modeling-in-object-oriented-analysis-and-
designooad/. 
11 Lucidchart Domain Object Modeling [Електронний ресурс]. – Режим доступу: 
https://www.lucidchart.com/pages/templates/domain-object-modeling. 
101 
 
ЧДТУ 252158.010ПЗ 
12 Методичні рекомендації до підготовки кваліфікаційної роботи бакалавра 
для здобувачів вищої освіти зі спеціальності 121 «Інженерія програмного 
забезпечення» усіх форм навчання [Текст] /Укл.: Голуб С.В., Заспа Г.О., 
Куницька С.Ю., Півень О.Б. Катаєва Є.Ю., Салапатов В.І., Метелап В.В., 
Олексюк В.В.; М-во освіти і науки України, Черкаський державний 
технологічний університет. - Черкаси : ЧДТУ, 2023. - 96 с. 
13 AltexSoft. Functional and Non-Functional Requirenments Specification 
[Електронний ресурс]. – Режим доступу: https://www.altexsoft.com/blog/ 
functional-and-non-functional-requirements-specification-and-types/.  
14 TechTarget. What is a Software Requirenments Specification (SRS)? 
[Електронний ресурс]. – Режим доступу: https://www.techtarget.com/ 
searchsoftwarequality/definition/software-requirements-specification.  
15 GeeksforGeeks. Functional vs. Non-Functional Requirements [Електронний 
ресурс]. – Режим доступу: https://www.geeksforgeeks.org/functional-vs-non-
functional-requirements/. 
16 Rikkeisoft. Complete Guide to Software Development Requirements 
[Електронний ресурс]. – Режим доступу: https://rikkeisoft.com/blog/software-
development-requirements/.  
17 Lucidchart. UML Use Case Diagram Tutorial [Елеткронний ресурс]. – Режим 
доступу: https://www.lucidchart.com/pages/uml-use-case-diagram. 
18 Visual Paradigm. Use Case Diagram Tutorial [Електронний ресурс]. – Режим 
доступу: https://online.visual-paradigm.com/diagrams/tutorials/use-case-diagram 
-tutorial/. 
19 Visual Paradigm. UML Class Diagram Tutorial [Електронний ресурс]. – Режим 
доступу: https://www.visual-paradigm.com/guide/uml-unified-modeling-
language/uml-class-diagram-tutorial/. 
20 Lucidchart. UML Class Diagram Tutorial [Електронний ресурс]. – Режим 
доступу: https://www.lucidchart.com//l-class-diagram. 
102 
 
ЧДТУ 252158.010ПЗ 
21 Visual Paradigm. What is a Package Diagram in UML? [Електронний ресурс]. – 
Режим доступу: https://www.visual-paradigm.com/guide/uml-unified-modeling-
language/what-is-package-diagram/. 
22 Lucidchart. Package Diagram Tutorial [Електронний ресурс]. – Режим 
доступу: https://www.lucidchart.com/pages/uml-package-diagram.  
23 Visual Paradigm. Component Diagram Tutorial [Електронний ресурс]. – Режим 
доступу: https://online.visual-paradigm.com/diagrams/tutorials/component-
diagram-tutorial/.  
24 Lucidchart. UML Component Diagram Tutorial [Електронний ресурс]. – 
Режим доступу: https://www.lucidchart.com/pages/uml-component-diagram. 
25 Visual Paradigm. Deployment Diagram Tutorial [Електронний ресурс]. – 
Режим доступу: https://www.visual-paradigm.com/guide/uml-unified-modeling-
language/what-is-deployment-diagram/. 
26 Lucidchart. UML Deployment Diagram Tutorial [Електронний ресурс]. – 
Режим доступу: https://www.lucidchart.com/pages/uml-deployment-diagram.  
27 Visual Paradigm. Activity Diagram Tutorial [Електронний ресурс]. – Режим 
доступу: https://www.visual-paradigm.com/guide/uml-unified-modeling-
language/what-is-activity-diagram/. 
28 Lucidchart. UML Activity Diagram Tutorial [Електронний ресурс]. – Режим 
доступу: https://www.lucidchart.com/pages/uml-activity-diagram. 
29 Visual Paradigm. Sequence Diagram Tutorial [Електронний ресурс]. – Режим 
доступу: https://www.visual-paradigm.com/guide/uml-unified-modeling-
language/what-is-sequence-diagram/. 
30 Lucidchart. UML Activity Diagram Tutorial [Електронний ресурс]. – Режим 
доступу: https://www.lucidchart.com/pages/uml-sequence-diagram. 
31 Visual Paradigm. What is Communication Diagram? [Електронний ресурс]. – 
Режим доступу: https://www.visual-paradigm.com/guide/uml-unified-modeling-
language/what-is-communication-diagram/. 
103 
 
ЧДТУ 252158.010ПЗ 
32 GeeksforGeeks. Communication Diagram – Unified Modeling Language (UML) 
[Електронний ресурс]. – Режим доступу: https://www.geeksforgeeks.org/ 
communication-diagram-unified-modeling-languageuml/.  
33 Visual Paradigm. All You Need to Know about State Diagrams [Електронний 
ресурс]. – Режим доступу: https://www.visual-paradigm.com/guide/uml-
unified-modeling-language/about-state-diagrams/. 
34 GeeksforGeeks. State Machine Diagrams – Unified Modeling Language (UML) 
[Електронний ресурс]. – Режим доступу: https://www.geeksforgeeks.org/ 
unified-modeling-language-uml-state-diagrams/.  
35 WordPress. Features – Content Management System (CMS) [Електронний 
ресурс]. – Режим доступу: https://wordpress.org/about/features/.  
36 WPZOOM. What is Elementor and How It Works [Електронний ресурс]. – 
Режим доступу: https://www.wpzoom.com/blog/what-is-elementor/. 
37  WP Engine. JavaScript With WordPress: How To Use It [Електронний ресурс]. 
– Режим доступу: https://wpengine.com/resources/wordpress-javascript/. 
38  Boardmix. Understanding Functional Architecture Diagrams [Електронний 
ресурс]. – Режим доступу: https://boardmix.com/knowledge/functional-
architecture-diagram. 
39 Науково-дослідницький сектор НУ «Львівська політехніка». Програма 
Erasmus+ напрям КА2 – Розвиток потенціалу вищої освіти (CBHE) 
[Електронний ресурс]. – Режим доступу: 
https://lpnu.ua/cmo/erasmus/erasmus-ka2.  
40 Харківський національний економічний університет ім. С. Кузнеця. 
Програма Erasmus+ [Електронний ресурс]. – Режим доступу: http:// 
www.ec.kharkiv.edu/erasmus+.html. 
41  Erasmus+ Project Results. Project: 574064-EPP-1-2016-1-LT-EPPKA2-CBHE-
SP [Електронний ресурс]. – Режим доступу: https://erasmus-
plus.ec.europa.eu/projects/search/details/574064-EPP-1-2016-1-LT-EPPKA2-
CBHE-SP.  
104 
 
ЧДТУ 252158.010ПЗ 
42 Wikipedia. Montserrat (typeface) [Електронний ресурс]. – Режим доступу: 
https://en.wikipedia.org/wiki/Montserrat_(typeface). 
43 U.S. Web Design System. Typography: Font size guidance. – [Електронний 
ресурс]. – Режим доступу: https://designsystem.digital.gov/design-tokens/ 
typesetting/font-size/.   
105 
 
 
482. ЧДТУ 252158.001                                                  2 
ДОДАТОК А 
 
 
ЗАТВЕРДЖЕНО: 
Зав. кафедрою ПЗАС, професор 
_________________ Голуб С.В. 
„____” ______________ 2025 р. 
 
 
 
 
 
 
 Інформаційна WEB-система освітнього проєкту Next-Erasmus+  
 
 
Специфікація 
482. ЧДТУ 252158.001 
Листів 2 
 
 
Розробник ________________ К.Р. Лобачова  
Керівник ________________ В.В. Метелап  
 
 
 
 
Черкаси 2025 
106 
 
 
482. ЧДТУ 252158.001                                                  2 
Позначення Найменування Примітки 
 Документація  
482.ЧДТУ. 252158 12 01 Текст програми  
482.ЧДТУ. 252158 34 01 Інструкція користувачеві  
482.ЧДТУ. 252158 90 01 Графічні матеріали  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
 
107 
 
  
ДОДАТОК Б 
 
 
 
 
 
 
 
 
Інформаційна WEB-система освітнього проєкту Next-Erasmus+  
 
 
Текст програми 
482.ЧДТУ. 252158 12 01 
Листів 33 
 
 
Розробник ________________ К.Р. Лобачова  
 
 
 
 
 
 
 
 
Черкаси 2025 
 
 482.ЧДТУ. 252158 12 01                                                  
2 
Лістинг коду для головної сторінки 
<!DOCTYPE html> 
<html lang="uk"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content="width=device-width, initial-
scale=1.0" /> 
    <title>Проєкт NEXT – ЧДТУ</title> 
    <link 
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;5
00;600&display=swap" rel="stylesheet" /> 
    <style> 
      body { 
        font-family: 'Montserrat', sans-serif; 
        margin: 0; 
        color: #000; 
      } 
 
      .next-image-block { 
        margin: 0; 
        padding: 0; 
      } 
 
      .next-image-block img { 
        margin: 0; 
        display: block; 
        width: 100%; 
      } 
 
      .next-submenu-wrapper { 
        background-color: #fff; 
        border-bottom: 4px solid #6B29F0; 
        margin-bottom: 30px; 
      } 
 
      .next-page-submenu { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        padding: 8px 0; 
      } 
 
      .next-page-submenu a { 
        flex: 1; 
        text-align: center; 
        font-size: 16px; 
        font-weight: 500; 
        text-decoration: none; 
        color: #333333; 
        padding: 12px 0; 
        transition: all 0.3s ease; 
109 
 
 482.ЧДТУ. 252158 12 01 3 
        border-radius: 0 0 6px 6px; 
        margin: 0 5px; 
      } 
 
      .next-page-submenu a:hover { 
        background-color: #6B29F0; 
        color: #fff; 
      } 
 
      .next-content { 
        padding: 0 10px; 
      } 
 
      .next-content h3 { 
        font-weight: 600; 
        font-size: 22px; 
        margin: 0 0 16px 0; 
      } 
 
      .next-content p {
        margin-bottom: 16px; 
        font-size: 16px; 
      } 
 
      .next-content ul { 
        padding-left: 0; 
        margin-bottom: 16px; 
      } 
 
      .next-content li { 
        margin-bottom: 10px; 
        line-height: 1.5; 
        font-size: 16px; 
      } 
 
      .next-content li strong { 
        font-weight: 600; 
      } 
 
      .next-highlight { 
        font-weight: 600; 
      } 
 
      .next-content a { 
        color: #6B29F0; 
        font-weight: 600; 
        text-decoration: underline; 
      } 
 
      .page-title { 
        display: none !important; 
      } 
 
110 
 
 482.ЧДТУ. 252158 12 01 4 
      .nav a, 
      .menu a, 
      .main-navigation a { 
        font-weight: 600 !important; 
      } 
    </style> 
  </head> 
  <body> 
    <div class="next-image-block"> 
      <img src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/group-2.png" alt="NEXT banner" /> 
    </div> 
 
    <div class="next-submenu-wrapper"> 
      <div class="next-page-submenu"> 
        <a href="https://pzas.chdtu.edu.ua/novyny-proektu-
next/">Новини</a> 
        <a href="https://pzas.chdtu.edu.ua/istoriya-
proektu/">Історія проекту</a> 
        <a 
href="https://pzas.chdtu.edu.ua/partnery/">Партнери</a> 
        <a href="https://pzas.chdtu.edu.ua/vykladachi-ta-
kursy/">Викладачі та курси</a> 
      </div> 
    </div> 
 
    <div class="next-content"> 
      <h3>Про проект</h3> 
      <p> 
        <span class="next-highlight">NEXT</span> — це 
міжнародний проект програми Erasmus+ KA2 CBHE, який реалізується 
        <span class="next-highlight">з 1 листопада 2023 року по 
31 жовтня 2026 року</span>. Черкаський державний технологічний 
університет бере активну участь у цьому проекті, спрямованому на 
трансформацію вищої освіти в умовах цифрової епохи. 
      </p> 
 
      <h3>Мета проекту</h3> 
      <p>
        NEXT прагне скоротити розрив між швидким розвитком 
цифрових технологій та підготовкою фахівців, особливо з галузей, не 
пов’язаних безпосередньо з ІТ. Проект спрямований на формування у 
студентів необхідних цифрових навичок, розуміння юридичних аспектів 
та підтримку ментального здоров’я для успішної інтеграції в сучасний 
ринок праці. 
      </p> 
 
      <h3>Основні завдання</h3> 
      <ul> 
        <li><strong>Освіта студентів</strong> з різних 
спеціальностей у сферах цифрових технологій, soft skills, правових 
питань та збереження ментального здоров’я.</li> 
111 
 
 482.ЧДТУ. 252158 12 01 5 
        <li><strong>Підготовка викладачів до ролі 
менторів</strong>, які підтримуватимуть студентів у процесі цифрової 
трансформації.</li> 
        <li><strong>Розробка інноваційних навчальних 
матеріалів</strong>, що відповідають сучасним тенденціям у цифрових 
технологіях.</li> 
        <li><strong>Покращення командної роботи 
студентів</strong> та розвиток їхніх цифрових навичок через участь у 
конкурсах студентських проектів.</li> 
        <li><strong>Створення сучасних мультимедійних 
лабораторій</strong> в українських університетах для забезпечення 
практичного досвіду використання новітнього обладнання та 
технологій.</li> 
      </ul> 
 
      <h3>Участь ЧДТУ</h3> 
      <p> 
        Кафедра програмного забезпечення автоматизованих систем 
ЧДТУ активно долучилася до реалізації проекту NEXT. У рамках проекту 
планується розробка нових навчальних курсів, проведення тренінгів 
для викладачів та студентів, а також створення сучасної навчальної 
інфраструктури. 
      </p>
 
      <h3>Додаткова інформація</h3> 
      <p> 
        Більше деталей про проект NEXT можна знайти на 
        <a href="https://nextstudy.eu/" 
target="_blank">офіційному сайті</a>. 
      </p> 
    </div> 
  </body> 
</html> 
 
Лістінг коду для сторінки «Новини» 
<!DOCTYPE html> 
<html lang="uk"> 
  <head> 
    <meta charset="UTF-8" /> 
    <title>Новини Erasmus+</title> 
    <link 
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;5
00;600;700&display=swap" rel="stylesheet" /> 
    <style> 
      body { 
        font-family: 'Montserrat', sans-serif; 
      } 
 
      .news-block { 
        display: flex; 
        gap: 25px; 
        margin-bottom: 25px;
112 
 
 482.ЧДТУ. 252158 12 01 6 
        background: #ffffff; 
        border: 1px solid #e0e0e0; 
        border-radius: 6px; 
        padding: 20px; 
        align-items: stretch; 
        transition: box-shadow 0.3s ease, transform 0.3s ease; 
      } 
 
      .news-block:hover { 
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); 
        transform: translateY(-3px); 
      } 
 
      .news-date-box { 
        width: 130px; 
        display: flex; 
        margin-right: 15px; 
        flex-direction: column; 
        align-items: center; 
        border: 1px solid #ddd; 
        border-radius: 6px; 
        overflow: hidden; 
        box-shadow: 0 4px 14px rgba(107, 41, 240, 0.3); 
        padding: 0; 
      } 
 
      .news-date-box .month { 
        background-color: #6B29F0; 
        color: white; 
        font-size: 14px; 
        font-weight: 600; 
        text-transform: uppercase; 
        width: 100%; 
        padding: 8px 0; 
        text-align: center; 
        box-sizing: border-box; 
        margin: 0; 
        border: none; 
        flex-shrink: 0; 
      } 
 
      .news-date-box .day { 
        font-size: 34px; 
        font-weight: bold; 
        color: #333; 
        margin: 20px 0 6px; 
        line-height: 1; 
      } 
 
      .news-date-box .year { 
        font-size: 15px; 
        color: #777; 
        margin-bottom: 20px;
113 
 
 482.ЧДТУ. 252158 12 01 7 
      } 
 
      .news-content { 
        flex: 1; 
        display: flex; 
        flex-direction: column; 
        justify-content: space-between; 
        color: #000; 
      } 
 
      .news-title { 
        font-size: 20px; 
        font-weight: 600; 
        margin-bottom: 12px; 
      } 
 
      .news-description { 
        font-size: 16px; 
        margin-bottom: 20px; 
      } 
 
      .news-button { 
        color: #6B29F0; 
        font-weight: 600; 
        font-size: 14px; 
        text-decoration: none; 
        display: inline-flex; 
        align-items: center; 
        gap: 6px; 
        transition: color 0.2s ease; 
      } 
 
      .news-button::after { 
        content: '→'; 
        font-size: 16px; 
        transition: transform 0.2s ease; 
      } 
 
      .news-button:hover { 
        color: #4b1cbc; 
      } 
 
      .news-button:hover::after { 
        transform: translateX(3px); 
      } 
 
      .return-button { 
        display: inline-flex; 
        align-items: center; 
        font-weight: 600; 
        font-size: 14px; 
        color: #6B29F0; 
        text-decoration: none;
114 
 
 482.ЧДТУ. 252158 12 01 8 
        gap: 6px; 
        margin-top: 20px; 
        transition: color 0.2s ease; 
      } 
 
      .return-button::before { 
        content: '←'; 
        font-size: 16px; 
        transition: transform 0.2s ease; 
      } 
 
      .return-button:hover { 
        color: #4b1cbc; 
      } 
 
      .return-button:hover::before { 
        transform: translateX(-3px); 
      } 
 
      .page-title { 
        display: none !important; 
      } 
 
      nav a, 
      .menu a, 
      .main-navigation a { 
        font-weight: 600 !important; 
      } 
    </style> 
  </head> 
  <body> 
    <!-- Новина 1 --> 
    <div class="news-block"> 
      <div class="news-date-box"> 
        <div class="month">Квітень</div> 
        <div class="day">17</div> 
        <div class="year">2025</div> 
      </div> 
      <div class="news-content"> 
        <div class="news-title">Зустріч зі студентами в межах 
проекту NEXT</div> 
        <div class="news-description">Людмила Вовкочин 
представила курс «Ментальне благополуччя в умовах диджиталізації» та 
вимоги до навчальних матеріалів.</div> 
        <a href="https://pzas.chdtu.edu.ua/zustrich-zi-
studentamy-v-mezhah-proektu-next/" class="news-
button">Детальніше</a> 
      </div> 
    </div> 
 
    <!-- Новина 2 --> 
    <div class="news-block"> 
      <div class="news-date-box">
115 
 
 482.ЧДТУ. 252158 12 01 9 
        <div class="month">Квітень</div> 
        <div class="day">16</div> 
        <div class="year">2025</div> 
      </div> 
      <div class="news-content"> 
        <div class="news-title">Нарада координаторів проекту 
NEXT Erasmus+</div> 
        <div class="news-description">Відбулася чергова нарада 
щодо технічного обладнання лабораторії на базі кафедри ПЗАС 
ЧДТУ.</div> 
        <a href="https://pzas.chdtu.edu.ua/narada-
koordynatoriv-proektu-next/" class="news-button">Детальніше</a> 
      </div> 
    </div> 
 
    <!-- Новина 3 --> 
    <div class="news-block"> 
      <div class="news-date-box"> 
        <div class="month">Листопад</div> 
        <div class="day">15</div> 
        <div class="year">2024</div> 
      </div> 
      <div class="news-content"> 
        <div class="news-title">Зустріч консорціуму в 
Братиславі</div> 
        <div class="news-description">Зустріч NEXT відбулася у 
гібридному форматі. Обговорили підготовку навчальних матеріалів та 
створення лабораторій для віртуального освітнього простору.</div> 
        <a href="https://pzas.chdtu.edu.ua/zustrich-
konsorcziumu-v-bratyslavi/" class="news-button">Детальніше</a> 
      </div> 
    </div> 
 
    <!-- Новина 4 --> 
    <div class="news-block"> 
      <div class="news-date-box"> 
        <div class="month">Червень</div> 
        <div class="day">10</div> 
        <div class="year">2024</div> 
      </div> 
      <div class="news-content"> 
        <div class="news-title">Зустріч консорціуму проекту 
NEXT</div> 
        <div class="news-description">Зустріч відбулася 3-4 
червня 2024 року в Університеті прикладних наук Каринтії, Віллах, 
Австрія. Обговорено результати виконаних завдань та подальші 
кроки.</div> 
        <a href="https://pzas.chdtu.edu.ua/zustrich-
konsorcziumu-proektu-next/" class="news-button">Детальніше</a> 
      </div> 
    </div> 
 
    <!-- Новина 5 – Steering committee meetup -->
116 
 
 482.ЧДТУ. 252158 12 01 10 
    <div class="news-block"> 
      <div class="news-date-box"> 
        <div class="month">Травень</div> 
        <div class="day">13</div> 
        <div class="year">2024</div> 
      </div> 
      <div class="news-content"> 
        <div class="news-title">Зустріч керівного комітету 
проекту NEXT</div> 
        <div class="news-description">13 травня 2024 року в 
Університеті відбулася зустріч керівного комітету проекту NEXT 
Erasmus+, на якій обговорювалися ключові етапи реалізації та 
планування подальших активностей.</div> 
        <a href="https://pzas.chdtu.edu.ua/zustrich-kerivnogo-
komitetu/" class="news-button">Детальніше</a> 
      </div> 
    </div> 
 
    <a href="https://pzas.chdtu.edu.ua/mizhnarodni-proekty/" 
class="return-button">Повернутися до головної сторінки</a> 
  </body> 
</html> 
 
Лістінг коду для сторінки «Зустріч консорціуму в Братиславі» 
<!DOCTYPE html> 
<html lang="uk"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Зустріч консорціуму в Братиславі</title> 
  <link 
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;6
00&display=swap" rel="stylesheet"> 
  <style> 
    body { 
      font-family: 'Montserrat', sans-serif; 
      margin: 0; 
    } 
 
 nav a, .menu a, .main-navigation a { 
    font-weight: 600 !important; 
  } 
 
    .news-container { 
      max-width: 1100px; 
      margin: 0 auto; 
      background: #fff; 
      padding: 40px; 
      border-radius: 6px; 
box-shadow: 0 8px 30px rgba(107, 41, 240, 0.2); 
      color: #000; 
    } 
 
117 
 
 482.ЧДТУ. 252158 12 01 11 
    .news-title { 
      font-size: 28px; 
      font-weight: 600; 
      margin-bottom: 10px; 
      color: #000; 
    } 
 
    .news-date { 
      color: #999; 
      font-size: 14px; 
      margin-bottom: 20px; 
    } 
 
    .news-text { 
      font-size: 16px; 
      line-height: 1.6; 
      margin-bottom: 30px; 
      color: #000; 
    } 
 
    .news-text a { 
      color: #6B29F0; 
      font-weight: 600; 
      text-decoration: underline; 
    } 
 
    .gallery { 
      position: relative; 
      max-width: 700px; 
      margin: 0 auto; 
      min-height: 480px; 
      margin-bottom: 30px; 
    } 
 
    .gallery img { 
      width: 100%; 
      height: 480px; 
      object-fit: cover; 
      border-radius: 6px; 
      display: block; 
    } 
 
    .arrow { 
      position: absolute; 
      top: 50%; 
      transform: translateY(-50%); 
      font-size: 24px; 
      color: #6B29F0; 
      background: none; 
      border: none; 
      cursor: pointer; 
      z-index: 10; 
      padding: 0;
118 
 
 482.ЧДТУ. 252158 12 01 12 
    } 
 
    .arrow-left { 
      left: -30px; 
    } 
 
    .arrow-right { 
      right: -30px; 
    } 
 
    .pdf-button-wrapper { 
      text-align: center; 
      margin-bottom: 30px; 
    } 
 
    .pdf-button { 
      display: inline-block; 
      padding: 10px 20px; 
      background-color: #6B29F0; 
      color: #fff; 
      font-weight: 600; 
      font-size: 14px; 
      text-decoration: none; 
      border-radius: 6px; 
      transition: background-color 0.2s ease; 
    } 
 
    .pdf-button:hover { 
      background-color: #4b1cbc; 
    } 
 
    .back-link { 
      display: inline-flex; 
      align-items: center; 
      font-weight: 600; 
      font-size: 14px; 
      color: #6B29F0; 
      text-decoration: none; 
      transition: color 0.2s ease; 
    } 
 
    .back-link::before { 
      content: '←'; 
      font-size: 16px; 
      margin-right: 6px; 
      transition: transform 0.2s ease; 
    } 
 
    .back-link:hover { 
      color: #4b1cbc; 
    } 
 
    .back-link:hover::before {
119 
 
 482.ЧДТУ. 252158 12 01 13 
      transform: translateX(-3px); 
    } 
     
    .page-title { 
      display: none !important; 
    } 
  </style> 
</head> 
<body> 
  <div class="news-container"> 
    <div class="news-title">Зустріч консорціуму в 
Братиславі</div> 
    <div class="news-date">15 листопада 2024</div> 
    <div class="news-text"> 
      15 листопада 2024 року відбулася чергова зустріч 
консорціуму проекту NEXT. Зустріч проходила у гібридному форматі в 
теплій та дружній атмосфері. Під час зустрічі обговорювався прогрес 
у підготовці навчальних матеріалів. Звіт від ЧДТУ було представлено 
учасникам.<br><br> 
      Також відбувся обмін досвідом щодо створення лабораторій, 
які забезпечують доступ до освітнього віртуального простору. Було 
підбито підсумки досягнутих результатів та окреслено плани на 
наступні етапи реалізації проекту.<br><br> 
      Детальніше можна дізнатися <a 
href="https://nextstudy.eu/" target="_blank">на сайті проекту 
NEXT</a>. 
    </div> 
 
    <div class="gallery"> 
      <button class="arrow arrow-left" 
onclick="prevSlide()">❮</button> 
      <img id="gallery-image" 
src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2024/11/photo_2024-11-26_10-41-47.jpg" 
alt="Фото 1"> 
      <button class="arrow arrow-right" 
onclick="nextSlide()">❯</button> 
    </div> 
 
    <div class="pdf-button-wrapper"> 
      <a href="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2024/11/next-chdtu-courses.pdf" class="pdf-
button" target="_blank">Переглянути PDF звіт</a> 
    </div> 
 
    <a href="https://pzas.chdtu.edu.ua/novyny-proektu-next/" 
class="back-link">Повернутися до списку новин</a> 
  </div> 
 
  <script> 
    const images = [ 
      "https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2024/11/photo_2024-11-26_10-41-47.jpg",
120 
 
 482.ЧДТУ. 252158 12 01 15 
      "https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2024/11/2.jpg", 
      "https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2024/11/3.jpg", 
      "https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2024/11/4.jpg" 
    ]; 
    let currentImage = 0; 
 
    function showImage(index) { 
      const img = document.getElementById('gallery-image'); 
      img.src = images[index]; 
    } 
 
    function prevSlide() { 
      currentImage = (currentImage - 1 + images.length) % 
images.length; 
      showImage(currentImage); 
    } 
 
    function nextSlide() { 
      currentImage = (currentImage + 1) % images.length; 
      showImage(currentImage); 
    } 
  </script> 
</body> 
</html> 
 
Лістінг коду для сторінки «Історія проекту» 
<!DOCTYPE html> 
<html lang="uk"> 
<head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-
scale=1.0" /> 
  <title>Історія NEXT – Erasmus+</title> 
  <link 
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;5
00;600&display=swap" rel="stylesheet"> 
  <style> 
    body { 
      font-family: 'Montserrat', sans-serif; 
      font-size: 16px; 
      font-weight: 400; 
      margin: 0; 
      padding: 0; 
      color: #000; 
    } 
 
    .section-title { 
      text-align: center; 
      font-weight: 600;
121 
 
 482.ЧДТУ. 252158 12 01 16 
      font-size: 28px; 
  margin: 0px 0px 0px 0px; 
      color: #000; 
    } 
 
.timeline { 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-start; 
  position: relative; 
  padding: 40px 10px 50px; 
  overflow-x: auto; 
  gap: 20px; 
} 
 
.timeline-line { 
  position: absolute; 
  top: 60px; 
  left: 0; 
  right: 0; 
  height: 4px; 
  background-color: #6B29F0; 
  z-index: 0; 
  border-radius: 2px; 
} 
 
.timeline-item { 
  flex: 0 0 200px; 
  text-align: center; 
  position: relative; 
  z-index: 1; 
} 
 
.timeline-date { 
  background: #6B29F0; 
  color: white; 
  padding: 6px 14px; 
  border-radius: 6px; 
  font-weight: 600; 
  font-size: 14px; 
  display: inline-block; 
  margin-bottom: 0; 
  position: relative; 
  z-index: 2; 
} 
 
.timeline-box { 
  background: #F2EBFF; 
  padding: 18px; 
  border-radius: 16px; 
  font-size: 14px; 
  line-height: 1.4; 
  margin-top: -10px;
122 
 
 482.ЧДТУ. 252158 12 01 17 
  position: relative; 
  z-index: 1; 
} 
 
    .news-section { 
      padding: 40px 0px; 
    } 
 
    .news-grid { 
      display: flex; 
      flex-wrap: wrap; 
      gap: 20px; 
      justify-content: center; 
    } 
 
    .news-card { 
      background-color: #fff; 
      border-radius: 16px; 
      padding: 20px; 
      width: calc(50% - 20px); 
      box-sizing: border-box; 
      border: 1px solid #e0e0e0; 
      transition: transform 0.2s ease, box-shadow 0.2s ease; 
    } 
 
    .news-card:hover { 
      transform: translateY(-4px); 
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
    } 
 
    .news-title { 
      font-weight: 600; 
      font-size: 18px; 
      margin-bottom: 8px; 
    } 
 
    .news-date { 
      color: #999; 
      font-size: 14px; 
      margin-bottom: 12px; 
    } 
 
    .news-description { 
      margin-bottom: 16px; 
    } 
 
    .news-button { 
      color: #6B29F0; 
      font-weight: 600; 
      font-size: 14px; 
      text-decoration: none; 
      display: inline-flex; 
      align-items: center;
123 
 
 482.ЧДТУ. 252158 12 01 18 
      gap: 6px; 
      transition: color 0.2s ease; 
    } 
 
    .news-button::after { 
      content: '→'; 
      font-size: 16px; 
      transition: transform 0.2s ease; 
    } 
 
    .news-button:hover { 
      color: #4b1cbc; 
    } 
 
    .news-button:hover::after { 
      transform: translateX(3px); 
    } 
.return-button { 
    display: inline-flex; 
    align-items: center; 
    font-weight: 600; 
    font-size: 14px; 
    color: #6B29F0; 
    text-decoration: none; 
    gap: 6px; 
margin: 10px auto 0; 
    transition: color 0.2s ease; 
    padding-left: 10px; 
  } 
 
  .return-button::before { 
    content: '←'; 
    font-size: 16px; 
    transition: transform 0.2s ease; 
  } 
 
  .return-button:hover { 
    color: #4b1cbc; 
  } 
 
  .return-button:hover::before { 
    transform: translateX(-3px); 
  } 
   
      .page-title { 
      display: none !important; 
    } 
     
 nav a, .menu a, .main-navigation a { 
    font-weight: 600 !important; 
  } 
  </style> 
</head>
124 
 
 482.ЧДТУ. 252158 12 01 19 
<body> 
<h2 class="section-title">Історичні віхи програми Erasmus+</h2> 
 
<div class="timeline"> 
  <div class="timeline-line"></div> 
 
  <div class="timeline-item"> 
    <div class="timeline-date">1987</div> 
    <div class="timeline-box">Заснування програми Erasmus. 
Перший запуск студентського обміну в межах ЄС.</div> 
  </div> 
 
  <div class="timeline-item"> 
    <div class="timeline-date">1995–2006</div> 
    <div class="timeline-box">Erasmus стає частиною програм 
Socrates I та II – розширення до мовних і освітніх ініціатив.</div> 
  </div> 
 
  <div class="timeline-item"> 
    <div class="timeline-date">2007–2013</div> 
    <div class="timeline-box">Інтеграція в програму Lifelong 
Learning – підтримка мобільності та партнерств у вищій освіті.</div> 
  </div> 
 
  <div class="timeline-item"> 
    <div class="timeline-date">2014</div> 
    <div class="timeline-box">Створення Erasmus+: єдина 
програма для освіти, молоді та спорту в ЄС.</div> 
  </div> 
 
  <div class="timeline-item"> 
    <div class="timeline-date">2021–2027</div> 
    <div class="timeline-box">Нова фаза Erasmus+ з акцентом на 
цифрову трансформацію, інклюзію, екологічність та активне 
громадянство.</div> 
  </div> 
</div> 
  </div> 
 
  <h2 class="section-title">Історія Next-Erasmus+ KA2 
project</h2> 
  <div class="news-section"> 
    <div class="news-grid"> 
      <div class="news-card"> 
        <div class="news-title">Офіційний старт проекту 
NEXT</div> 
        <div class="news-date">1 листопада 2023</div> 
        <div class="news-description">Початок реалізації 
проекту у межах Erasmus+ CBHE, до якого залучено ЧДТУ.</div> 
        <a class="news-button" 
href="https://pzas.chdtu.edu.ua/oficziynyy-start-proektu-
next/">Детальніше</a> 
      </div>
125 
 
 482.ЧДТУ. 252158 12 01 20 
      <div class="news-card"> 
        <div class="news-title">Формування консорціуму та 
визначення ролей</div> 
        <div class="news-date">грудень 2023 – січень 2024</div> 
        <div class="news-description">Конкретизація завдань 
учасників проекту, закріплення за напрямами.</div> 
        <a class="news-button" 
href="https://pzas.chdtu.edu.ua/formuvannya-konsorcziumu-ta-
vyznachennya-roley/">Детальніше</a> 
      </div> 
      <div class="news-card"> 
        <div class="news-title">NEXT Info Day в ІС КПІ</div> 
        <div class="news-date">7 листопада 2024</div> 
        <div class="news-description">Презентація проекту 
студентам та викладачам у КПІ.</div> 
        <a class="news-button" 
href="https://pzas.chdtu.edu.ua/next-info-day-v-is-
kpi/">Детальніше</a> 
      </div> 
      <div class="news-card"> 
        <div class="news-title">Нарада координаторів у 
ЧДТУ</div> 
        <div class="news-date">15 квітня 2025</div> 
        <div class="news-description">Робоча координаційна 
зустріч з обговорення технічних деталей.</div> 
        <a class="news-button" 
href="https://pzas.chdtu.edu.ua/narada-koordynatoriv-u-
chdtu/">Детальніше</a> 
      </div> 
    </div> 
  </div> 
  <a href="https://pzas.chdtu.edu.ua/mizhnarodni-proekty/" 
class="return-button">Повернутися до головної сторінки</a> 
</body> 
</html> 
 
Лістінг коду для сторінки «Партнери» 
<!DOCTYPE html> 
<html lang="uk"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Партнери</title> 
  <link 
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;5
00;600;700&display=swap" rel="stylesheet"> 
  <style> 
   
  body { 
      font-family: 'Montserrat', sans-serif; 
    } 
     
 .nav a, .menu a, .main-navigation a {
126 
 
 482.ЧДТУ. 252158 12 01 21 
    font-weight: 600 !important; 
  } 
     
    .partners-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  gap: 30px; 
  font-family: 'Montserrat', sans-serif; 
} 
 
.partner-card { 
  background: #ffffff; 
  border: 1px solid #ddd; 
  padding: 20px; 
  border-radius: 10px; 
  transition: all 0.4s ease; 
  position: relative; 
  overflow: hidden; 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
} 
 
.partner-card:hover { 
  box-shadow: 0 8px 24px rgba(107, 41, 240, 0.3); 
  border-color: #6B29F0; 
} 
 
.partner-img-wrapper { 
  height: 200px; 
  overflow: hidden; 
  position: relative; 
  margin-bottom: 15px; 
} 
 
.partner-logo { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
  transition: opacity 0.4s ease; 
  z-index: 2; 
} 
 
.partner-photo { 
  transform: scale(0.9); 
  opacity: 0; 
  transition: transform 0.4s ease, opacity 0.4s ease; 
  position: absolute; 
  top: 0; 
  left: 0;
127 
 
 482.ЧДТУ. 252158 12 01 22 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  border-radius: 6px; 
  z-index: 1; 
} 
 
.partner-logo { 
  transition: opacity 0.4s ease; 
  z-index: 2; 
} 
 
.partner-card.hovered .partner-photo { 
  transform: scale(1); 
  opacity: 1; 
} 
 
.partner-card.hovered .partner-logo { 
  opacity: 0; 
} 
 
.partner-content { 
  flex-grow: 1; 
  display: flex; 
  flex-direction: column; 
  justify-content: flex-start; 
  align-items: center; 
} 
 
.partner-title { 
  font-weight: 600; 
  font-size: 16px; 
  color: #000; 
  text-align: center; 
  height: 48px; /* фіксована висота! */ 
  line-height: 1.2; 
  overflow: hidden; 
  display: flex; 
  align-items: flex-end; 
  justify-content: center; 
  margin-bottom: 5px; 
  padding: 0 5px; 
} 
 
.partner-role { 
  color: #666; 
  font-size: 14px; 
  margin-bottom: 15px; 
  height: 20px; /* фіксуємо висоту для однакової позиції */ 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
128 
 
 482.ЧДТУ. 252158 12 01 23 
 
.partner-btn { 
  background-color: #6B29F0; 
  color: #fff; 
  text-decoration: none; 
  padding: 8px 20px; 
  border-radius: 6px; 
  font-size: 14px; 
  display: inline-block; 
  transition: background 0.3s; 
  text-align: center; 
  margin-top: auto; 
} 
 
.partner-btn:hover { 
  background-color: #4b1cbc; 
} 
 
  .return-button { 
    display: inline-flex; 
    align-items: center; 
    font-weight: 600; 
    font-size: 14px; 
    color: #6B29F0; 
    text-decoration: none; 
    gap: 6px; 
    margin-top: 20px; 
    transition: color 0.2s ease; 
  } 
 
  .return-button::before { 
    content: '←'; 
    font-size: 16px; 
    transition: transform 0.2s ease; 
  } 
 
  .return-button:hover { 
    color: #4b1cbc; 
  } 
 
  .return-button:hover::before { 
    transform: translateX(-3px); 
  } 
 
.page-title { 
      display: none !important; 
    } 
  </style> 
</head> 
<body> 
 
  <div class="partners-grid"> 
     <div class="partner-card">
129 
 
 482.ЧДТУ. 252158 12 01 24 
    <div class="partner-img-wrapper"> 
      <img class="partner-logo" 
src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/stuba-logo.jpg" alt="STUBA Logo"> 
      <img class="partner-photo" 
src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/stuba.jpg" alt="STUBA Photo"> 
    </div> 
    <div class="partner-content"> 
      <div class="partner-title">Словацький технічний 
університет у Братиславі </div> 
      <div class="partner-role">Координатор проєкту</div> 
    </div> 
    <a href="https://www.stuba.sk/" class="partner-btn" 
target="_blank">Перейти на сайт</a> 
  </div> 
 
  <div class="partner-card"> 
    <div class="partner-img-wrapper"> 
      <img class="partner-logo" 
src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/cvut-logo.jpg" alt="CVUT Logo"> 
      <img class="partner-photo" 
src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/cvut.jpg" alt="CVUT Photo"> 
    </div> 
    <div class="partner-content"> 
      <div class="partner-title">Чеський технічний університет 
у Празі </div> 
      <div class="partner-role">Член консорціуму</div> 
    </div> 
    <a href="https://www.cvut.cz/" class="partner-btn" 
target="_blank">Перейти на сайт</a> 
  </div> 
 
  <div class="partner-card"> 
    <div class="partner-img-wrapper"> 
      <img class="partner-logo" 
src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/cuas-logo.jpg" alt="CUAS Logo"> 
      <img class="partner-photo" 
src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/cuas.jpg" alt="CUAS Photo"> 
    </div> 
    <div class="partner-content"> 
      <div class="partner-title">Університет прикладних наук 
Каринтії </div> 
      <div class="partner-role">Член консорціуму</div> 
    </div> 
    <a href="https://www.fh-kaernten.at/" class="partner-btn" 
target="_blank">Перейти на сайт</a> 
  </div>
 
130 
 
 482.ЧДТУ. 252158 12 01 25 
  <div class="partner-card"> 
    <div class="partner-img-wrapper"> 
      <img class="partner-logo" 
src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/dcu-logo.jpg" alt="DCU Logo"> 
      <img class="partner-photo" 
src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/dcu.jpg" alt="DCU Photo"> 
    </div> 
    <div class="partner-content"> 
      <div class="partner-title">Дублінський міський 
університет </div> 
      <div class="partner-role">Член консорціуму</div> 
    </div> 
    <a href="https://www.dcu.ie/" class="partner-btn" 
target="_blank">Перейти на сайт</a> 
  </div> 
 
  <div class="partner-card"> 
    <div class="partner-img-wrapper"> 
      <img class="partner-logo" 
src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/iskpi-logo.jpg" alt="ISKPI Logo"> 
      <img class="partner-photo" 
src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/iskpi.jpg" alt="ISKPI Photo"> 
    </div> 
    <div class="partner-content"> 
      <div class="partner-title">Київський політехнічний 
інститут імені Ігоря Сікорського </div> 
      <div class="partner-role">Член консорціуму</div> 
    </div> 
    <a href="https://kpi.ua/" class="partner-btn" 
target="_blank">Перейти на сайт</a> 
  </div> 
 
  <div class="partner-card"> 
    <div class="partner-img-wrapper"> 
      <img class="partner-logo" 
src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/opnu-logo.jpg" alt="OPNU Logo"> 
      <img class="partner-photo" 
src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/opnu.jpg" alt="OPNU Photo"> 
    </div> 
    <div class="partner-content"> 
      <div class="partner-title">Одеський національний 
політехнічний університет </div> 
      <div class="partner-role">Член консорціуму</div> 
    </div> 
    <a href="https://opu.ua/" class="partner-btn" 
target="_blank">Перейти на сайт</a> 
  </div>
131 
 
 482.ЧДТУ. 252158 12 01 26 
 
  <div class="partner-card"> 
    <div class="partner-img-wrapper"> 
      <img class="partner-logo" 
src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/ifnul-logo.jpg" alt="IFNUL Logo"> 
      <img class="partner-photo" 
src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/ifnul.jpg" alt="IFNUL Photo"> 
    </div> 
    <div class="partner-content"> 
      <div class="partner-title">Львівський національний 
університет імені Івана Франка </div> 
      <div class="partner-role">Член консорціуму</div> 
    </div> 
    <a href="https://lnu.edu.ua/" class="partner-btn" 
target="_blank">Перейти на сайт</a> 
  </div> 
 
  <div class="partner-card"> 
    <div class="partner-img-wrapper"> 
      <img class="partner-logo" 
src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/accenture-logo.jpg" alt="Accenture 
Logo"> 
      <img class="partner-photo" 
src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/accenture.jpg" alt="Accenture 
Photo"> 
    </div> 
    <div class="partner-content"> 
      <div class="partner-title">Accenture </div> 
      <div class="partner-role">Асоційований партнер</div> 
    </div> 
    <a href="https://www.accenture.com/" class="partner-btn" 
target="_blank">Перейти на сайт</a> 
  </div> 
 
  <div class="partner-card"> 
    <div class="partner-img-wrapper"> 
      <img class="partner-logo" 
src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/atos-logo.jpg" alt="Atos Logo"> 
      <img class="partner-photo" 
src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/atos.jpg" alt="Atos Photo"> 
    </div> 
    <div class="partner-content"> 
      <div class="partner-title">Atos IT Solutions and Services 
in Slovakia </div> 
      <div class="partner-role">Асоційований партнер</div> 
    </div>
 
132 
 
 482.ЧДТУ. 252158 12 01 27 
    <a href="https://atos.net/" class="partner-btn" 
target="_blank">Перейти на сайт</a> 
  </div> 
  </div> 
<a href="https://pzas.chdtu.edu.ua/mizhnarodni-proekty/" 
class="return-button">Повернутися до головної сторінки</a> 
  <script> 
   const cards = document.querySelectorAll(".partner-card"); 
  cards.forEach((card) => { 
    card.addEventListener("mouseenter", () => { 
      card.classList.add("hovered"); 
    }); 
    card.addEventListener("mouseleave", () => { 
      card.classList.remove("hovered"); 
    }); 
  }); 
  </script> 
</body> 
</html> 
 
Лістінг коду для сторінки «Викладачі та курси» 
<!DOCTYPE html> 
<html lang="uk"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Викладачі та курси</title> 
  <link 
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;6
00&display=swap" rel="stylesheet"> 
  <style> 
    body { font-family: 'Montserrat', sans-serif; margin: 0;  
color: #000; } 
    .section-header { margin-bottom: 20px; } 
    .section-title { font-size: 30px; font-weight: 600; color: 
#000; text-align: left; } 
    .intro-text { font-size: 16px; text-align: justify; width: 
100%; margin-bottom: 30px; } 
    .course-area { margin: 20px 0 30px; } 
    .course-heading { font-size: 24px; font-weight: 600; 
margin-top: 16px; margin-bottom: 20px; padding-left: 12px; border-
left: 4px solid #6B29F0; } 
    .course-block { display: flex; align-items: stretch; 
margin-bottom: 20px; border: 1px solid #ddd; border-radius: 8px; 
overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } 
    .instructor-section { width: 33.33%; border-right: 1px 
solid #ddd; display: flex; flex-direction: column; align-items: 
center; justify-content: center; padding: 20px; box-sizing: border-
box; } 
    .instructor-section img { width: 140px; height: auto; 
object-fit: cover; margin-bottom: 10px; box-shadow: 0 1px 3px 
rgba(0,0,0,0.08); border-radius: 6px; }
 
133 
 
 482.ЧДТУ. 252158 12 01 28 
    .instructor-section .instructor-info { text-align: center; 
font-size: 14px; } 
    .course-description { width: 66.66%; background: #fff; 
padding: 30px 24px; display: flex; flex-direction: column; justify-
content: center; box-sizing: border-box; } 
    .course-description h4 { margin: 0 0 6px; font-size: 16px; 
font-weight: 600; } 
    .course-description p { margin: 0 0 8px; } 
    .news-button { color: #6B29F0; font-weight: 600; font-size: 
14px; text-decoration: none; display: inline-flex; align-items: 
center; gap: 6px; transition: color 0.2s ease; } 
    .news-button::after { content: '→'; font-size: 16px; 
transition: transform 0.2s ease; } 
    .news-button:hover { color: #4b1cbc; } 
    .news-button:hover::after { transform: translateX(3px); } 
        .page-title { 
  display: none !important;} 
   
   nav a, .menu a, .main-navigation a { 
    font-weight: 600 !important; 
  } 
   
    .return-button { 
    display: inline-flex; 
    align-items: center; 
    font-weight: 600; 
    font-size: 14px; 
    color: #6B29F0; 
    text-decoration: none; 
    gap: 6px; 
  margin: 10px auto 0; 
    transition: color 0.2s ease; 
    padding-left: 10px; 
  } 
 
  .return-button::before { 
    content: '←'; 
    font-size: 16px; 
    transition: transform 0.2s ease; 
  } 
 
  .return-button:hover { 
    color: #4b1cbc; 
  } 
 
  .return-button:hover::before { 
    transform: translateX(-3px); 
  } 
  </style> 
</head> 
<body> 
  <div class="section-header"> 
    <h1 class="section-title">Викладачі та курси</h1>
134 
 
 482.ЧДТУ. 252158 12 01 29 
    <div class="intro-text"> 
      Освітня програма проекту NEXT охоплює три ключові 
напрями: цифрові технології, soft skills та цифрову етику, а також 
психічне здоров’я. Кожен із цих напрямів відповідає на актуальні 
виклики цифрової трансформації освіти та забезпечує студентів 
знаннями й навичками, необхідними для сучасного професійного 
середовища. Курси розроблені провідними фахівцями українських 
закладів вищої освіти, і для кожного з них передбачено окрему 
сторінку з детальною інформацією. 
    </div> 
  </div> 
 
  <!-- Цифрові технології --> 
  <div class="course-area"> 
    <div class="course-heading">Цифрові технології</div> 
    <div class="course-block"> 
      <div class="instructor-section"> 
        <img src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/golub_1-243x300-1.jpg" alt="Сергій 
Голуб"> 
        <div class="instructor-info"><strong>Сергій 
Голуб</strong><br>д.т.н.; координатор напрямку, ЧДТУ</div> 
      </div> 
      <div class="course-description"> 
        <h4>Інтелектуальний аналіз даних (Data Mining)</h4> 
        <p>Курс спрямований на ознайомлення з методами аналізу 
великих обсягів даних, включаючи класифікацію, кластеризацію та 
асоціативні правила. Значна увага приділяється практичному 
застосуванню засобів Python.</p> 
        <a class="news-button" 
href="https://pzas.chdtu.edu.ua/data-mining/">Переглянути 
детальніше</a> 
      </div> 
    </div> 
  </div> 
 
  <!-- Soft Skills та цифрова етика --> 
  <div class="course-area"> 
    <div class="course-heading">Soft Skills та цифрова 
етика</div> 
    <div class="course-block"> 
      <div class="instructor-section"> 
        <img src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/hymyczya.png" alt="Наталія Химиця"> 
        <div class="instructor-info"><strong>Наталія 
Химиця</strong><br>к.іст.н.; НУ «Львівська політехніка»</div> 
      </div> 
      <div class="course-description"> 
        <h4>Цифрова етика</h4> 
        <p>Курс присвячено етичним аспектам цифрового 
середовища, конфіденційності, захисту даних, кіберетикету. 
Розглядаються ситуації з реального життя для розвитку критичного 
мислення студентів.</p>
135 
 
 482.ЧДТУ. 252158 12 01 30 
        <a class="news-button" 
href="https://pzas.chdtu.edu.ua/soft-skills-ta-czyfrova-
etyka/">Переглянути детальніше</a> 
      </div> 
    </div> 
    <div class="course-block"> 
      <div class="instructor-section"> 
        <img src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/bojko.jpg" alt="Анжела Бойко"> 
        <div class="instructor-info"><strong>Анжела 
Бойко</strong><br>д.філ.н.; ЧДТУ</div> 
      </div> 
      <div class="course-description"> 
        <h4>Трансверсальність та цілісність</h4> 
        <p>Курс спрямований на формування у студентів розуміння 
академічної доброчесності, міжкультурного спілкування та розвитку 
універсальних навичок, таких як критичне мислення та емоційний 
інтелект.</p> 
        <a class="news-button" 
href="https://pzas.chdtu.edu.ua/soft-skills-ta-czyfrova-
etyka/">Переглянути детальніше</a> 
      </div> 
    </div> 
  </div> 
 
  <!-- Психічне здоров’я --> 
  <div class="course-area"> 
    <div class="course-heading">Психічне здоров’я</div> 
    <div class="course-block"> 
      <div class="instructor-section"> 
        <img src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/vovkochin-1.jpg" alt="Людмила 
Вовкочин"> 
        <div class="instructor-info"><strong>Людмила 
Вовкочин</strong><br>к.п.н., доцент кафедри психології, ЧДТУ</div> 
      </div> 
      <div class="course-description"> 
        <h4>Психічне благополуччя в умовах цифровізації</h4> 
        <p>Курс розглядає вплив цифрових технологій на психічне 
здоров’я. Акцент зроблено на адаптації до інформаційного 
перевантаження, профілактиці цифрової втоми та підтримці емоційної 
рівноваги.</p> 
        <a class="news-button" 
href="https://pzas.chdtu.edu.ua/psyhichne-zdorovya/">Переглянути 
детальніше</a> 
      </div> 
    </div> 
  </div> 
  <a href="https://pzas.chdtu.edu.ua/mizhnarodni-proekty/" 
class="return-button">Повернутися до головної сторінки</a> 
</body> 
</html> 
 
136 
 
 482.ЧДТУ. 252158 12 01 31 
Лістінг коду для сторінки «Психічне здоров’я» 
<!DOCTYPE html> 
<html lang="uk"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Курс "Психічне здоров’я"</title> 
  <link 
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;6
00&display=swap" rel="stylesheet"> 
  <style> 
    body { font-family: 'Montserrat', sans-serif; margin: 0; 
color: #000; } 
    .section-title { font-size: 30px; font-weight: 600; 
     color: #000; 
    margin-bottom: 20px; } 
    .intro-text { font-size: 16px; text-align: justify; margin-
bottom: 30px; max-width: 100%; } 
    .courses-list { display: flex; flex-direction: column; gap: 
20px; } 
    .course-section { 
      display: flex; 
      border: 1px solid #ddd; 
      border-radius: 8px; 
      overflow: hidden; 
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); 
      transition: box-shadow 0.3s ease, transform 0.3s ease; 
    } 
    .course-section:hover { 
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
      transform: translateY(-2px); 
    } 
    .course-instructor { 
      width: 33.33%; 
      border-right: 1px solid #ddd; 
      display: flex; 
      flex-direction: column; 
      align-items: center; 
      justify-content: center; 
      padding: 20px; 
    } 
    .course-instructor img { 
      width: 140px; 
      height: auto; 
      border-radius: 6px; 
      box-shadow: 0 1px 3px rgba(0,0,0,0.08); 
      margin-bottom: 10px; 
    } 
    .instructor-info { text-align: center; font-size: 14px; } 
    .course-description { 
      width: 66.66%; 
      padding: 30px 24px; 
      display: flex;
137 
 
 482.ЧДТУ. 252158 12 01 32 
      flex-direction: column; 
      justify-content: center; 
      box-sizing: border-box; 
    } 
    .course-description h4 { 
      margin: 0 0 6px; 
      font-size: 16px; 
      font-weight: 600; 
    } 
    .course-description p { 
      margin: 0 0 8px; 
      line-height: 1.6; 
    } 
    .news-button { 
      color: #6B29F0; 
      font-weight: 600; 
      font-size: 14px; 
      text-decoration: none; 
      display: inline-flex; 
      align-items: center; 
      gap: 6px; 
      transition: color 0.2s ease; 
      cursor: pointer; 
    } 
    .news-button::after { 
      content: '↓'; 
      font-size: 16px; 
      transition: transform 0.2s ease; 
    } 
    .news-button:hover { 
      color: #4b1cbc; 
    } 
    .news-button:hover::after { 
      transform: translateY(3px); 
    } 
    .news-button.open::after { 
      content: '↑'; 
    } 
    .course-details { 
      display: none; 
      font-size: 14px; 
      line-height: 1.6; 
      white-space: pre-wrap; 
    } 
        .page-title { 
  display: none !important;} 
   
  .nav a, 
  .menu a, 
  .main-navigation a { 
    font-weight: 600 !important; 
  }
 
138 
 
 482.ЧДТУ. 252158 12 01 33 
      .return-button { 
    display: inline-flex; 
    align-items: center; 
    font-weight: 600; 
    font-size: 14px; 
    color: #6B29F0; 
    text-decoration: none; 
    gap: 6px; 
    margin: 30px auto ; 
    transition: color 0.2s ease; 
    padding-left: 10px; 
  } 
  .return-button::before { 
    content: "←"; 
    font-size: 16px; 
    transition: transform 0.2s ease; 
  } 
  .return-button:hover { 
    color: #4b1cbc; 
  } 
  .return-button:hover::before { 
    transform: translateX(-3px); 
  } 
  </style> 
</head> 
<body> 
  <h1 class="section-title">Курс «Психічне здоров’я»</h1> 
  <div class="intro-text"> 
    Курс спрямований на розвиток навичок збереження психічного 
благополуччя в умовах цифрової трансформації. У програмі — вивчення 
впливу цифрових технологій на емоційне здоров’я, інструменти 
саморегуляції, а також практики цифрового детоксу та адаптації до 
інформаційного перевантаження. 
  </div> 
 
  <div class="courses-list"> 
    <div class="course-section"> 
      <div class="course-instructor"> 
        <img src="https://pzas.chdtu.edu.ua/wp-
content/uploads/sites/10/2025/06/vovkochin-1.jpg" alt="Людмила 
Вовкочин"> 
        <div class="instructor-info"><strong>Вовкочин Людмила 
Олександрівна</strong><br>к.п.н., доцент кафедри психології, 
ЧДТУ</div> 
      </div> 
      <div class="course-description"> 
        <h4>Ментальне благополуччя в умовах цифровізації</h4> 
        <p>Вивчення впливу цифрових технологій на психічне 
здоров’я, методи цифрового детоксу, саморегуляції та адаптації.</p> 
        <div class="news-button" 
onclick="toggleDetails(this)">Переглянути детальніше</div> 
        <div class="course-details"> 
<strong>Мета:</strong>
139 
 
 482. ЧДТУ 242239 12 01 33 
Метою курсу є формування у студентів уявлення про позитивний і 
негативний вплив цифровізації на життя та здоров’я людини, зокрема 
про умови та можливості збереження психічного здоров’я у цифровому 
середовищі. 
 
<strong>Компетентності та навички:</strong> 
- Самоусвідомлення та самооцінка 
- Емоційна саморегуляція (самоконтроль) 
- Асертивність 
- Креативність 
 
<strong>Зміст курсу:</strong> 
Курс передбачає вивчення термінології та застосування її у 
формулюванні власної думки щодо основних аспектів курсу: 
- Вплив цифровізації на життя людини 
- Контрольоване використання цифрових технологій (встановлення 
меж для захисту від стресу та перевантаження) 
- Відповідальне ставлення до використання соціальних мереж 
- Практичні аспекти цифрового детоксу, методи перезавантаження, 
технології підтримки психічного здоров’я (медитативні техніки, 
трекери сну, застосунки для медитації) 
- Гнучкість та адаптація до постійних змін у цифровому світі 
Практичний блок курсу включає навчання студентів використанню 
інтерактивних вправ і групової динаміки для стимулювання формування 
власних думок, дискусій і обміну досвідом; розуміння та оцінювання 
нових технологій, що можуть впливати на їхнє психічне здоров’я. 
        </div> 
      </div> 
    </div> 
  </div> 
<a href="https://pzas.chdtu.edu.ua/vykladachi-ta-kursy/" 
class="return-button">Повернутися до переліку курсів</a> 
  <script> 
    function toggleDetails(el) { 
      el.classList.toggle('open'); 
      const courseSection = el.closest('.course-section'); 
      const details = courseSection.querySelector('.course-
details'); 
      details.style.display = details.style.display === 'block' 
? 'none' : 'block'; 
    } 
  </script> 
</body> 
</html> 
140 
 
     
ДОДАТОК В 
 
 
 
 
 
 
 
 
Інформаційна WEB-система освітнього проєкту Next-Erasmus+ 
 
Інструкція користувачеві 
482.ЧДТУ. 252158 34 01 
Листів 4 
 
 
Розробник ________________ К.Р. Лобачова  
 
 
 
 
 
 
 
 
 
 
141 
 
 482. ЧДТУ 242239 12 01 2 
Черкаси 2025 
Дана інструкція користувача призначена для ознайомлення з 
функціональними можливостями та правилами навігації web-ресурсу, створеного 
в межах освітнього проекту Next-Erasmus+ на сайті кафедри ПЗАС ЧДТУ. Ресурс 
розроблено з урахуванням потреб студентів, викладачів, міжнародних партнерів 
та інших зацікавлених осіб.  
Інтерфейс web-ресурсу є інтуїтивно зрозумілим, інформація структурована 
за логічними розділами, що забезпечує швидкий доступ до необхідних матеріалів. 
Інструкція допоможе користувачам ефективно взаємодіяти з основними 
розділами ресурсу, здійснювати переходи між сторінками, переглядати новини, 
інформацію про партнерів, викладачів та курси, а також користуватись 
функціональністю двомовної версії ресурсу.  
19 Відкриття головної сторінки 
Користувач заходить на офіційний сайт кафедри ПЗАС ЧДТУ та обирає 
пункт «Міжнародні проекти» а розділі «Проекти» головного меню. На екрані 
відображається головна сторінка підрозділу «Міжнародні проекти». 
20 Відкриття розділу «Новини». 
У верхній частині головної сторінки під логотипами проекту Next-Erasmus+ 
є навігаційне меню. Користувач натискає на розділ меню «Новини» та переходить 
на сторінку новин. 
21 Відкриття повного тексту новини. 
У розділі «Новини» користувач обирає новину, яку він хоче переглянути, та 
натискає на кнопку «Детальніше» у відповідній картці новини. Відкривається 
сторінка з повним текстом новини. 
22 Повернення до списку новин. 
Користувач натискає на кнопку «Повернутися до списку новин», яка 
знаходиться у нижній частині сторінці зліва під карткою з текстом новини. 
Відбувається перехід на сторінку з переліком новин. 
23 Повернення до головної сторінки. 
Користувач натискає на кнопку «Повернутись до головної сторінки», що 
142 
 
 482.ЧДТУ. 252158 34 01 2 
знаходиться у нижній частині сторінки зліва під останньою карткою новин. 
Відбувається перехід до головної сторінки сайту . 
24 Відкриття розділу «Історія проекту». 
У навігаційному меню головної сторінки користувач натискає на розділ 
меню «Історія проекту» та переходить на сторінку історії проекту. 
25 Відкриття повного тексту події. 
У розділі «Історія проекту» користувач обирає подію, яку він хоче 
переглянути, та натискає на кнопку «Детальніше» у відповідній картці події. 
Відкривається сторінка з повним текстом події. 
26 Повернення до сторінки з історією проекту. 
Користувач натискає на кнопку «Повернутися до історії проекту», яка 
знаходиться у нижній частині сторінці зліва під картками подій. Відбувається 
перехід на сторінку з історією проекту. 
27 Повернення до головної сторінки. 
Користувач натискає на кнопку «Повернутись до головної сторінки», що 
знаходиться у нижній частині сторінки зліва під картками подій. Відбувається 
перехід до головної сторінки сайту. 
28 Відкриття розділу «Партнери». 
У навігаційному меню головної сторінки користувач натискає на розділ 
меню «Партнери» та переходить на сторінку з переліком партнерів. 
29 Відкриття офіційного сайту партнера. 
У розділі «Партнери» користувач обирає партнера, сайт якого він хоче 
переглянути, та натискає на кнопку «Перейти на сайт» у відповідній картці 
партнера. У окремій вкладці браузера відкривається сторінка з офіційним 
ресурсом партнера. 
30 Повернення до головної сторінки. 
Користувач натискає на кнопку «Повернутись до головної сторінки», що 
знаходиться у нижній частині сторінки зліва під картками партнерів. Відбувається 
перехід до головної сторінки сайту. 
31 Відкриття розділу «Викладачі та курси». 
143 
 
 482.ЧДТУ. 252158 34 01 3 
У навігаційному меню головної сторінки користувач натискає на розділ 
меню 
«Викладачі та курси» та переходить на сторінку з переліком викладачів та курсів. 
32 Відкриття повної інформації про курс. 
У розділі «Викладачі та курси» користувач обирає курс, який він хоче 
переглянути, та натискає на кнопку «Переглянути детальніше» у відповідній 
картці курсу. Відкривається сторінка з повною інформацією про конкретний курс. 
33 Відкриття детальної інформації про розділ курсу. 
На сторінці з повною інформацією по обраному курсу користувач натискає 
на кнопку «Переглянути детальніше» у картці розділу курсу, інформацію про 
який він хоче переглянути. На екрані з’являється блок з детальною інформацію по 
обраному розділу. 
34 Повернення на сторінку з переліком курсів. 
Користувач натискає на кнопку «Повернутися до переліку курсів», яка 
знаходиться у нижній частині сторінці зліва під картками з розділами курсу. 
Відбувається перехід на сторінку з переліком курсів і викладачів. 
35 Повернення до головної сторінки. 
Користувач натискає на кнопку «Повернутись до головної сторінки», що 
знаходиться у нижній частині сторінки зліва під картками викладачів та курсів. 
Відбувається перехід до головної сторінки сайту. 
36 Перемикання на англійську мову. 
Користувач натискає на кнопку перемикання мови у лівому кутку 
навігаційного меню сайту кафедри. Сторінка відображається англійською мовою. 
 
144 
 
     
ДОДАТОК Г 
 
 
 
 
 
 
 
 
Інформаційна WEB-система освітнього проєкту Next-Erasmus+ 
 
Графічні матеріали 
482. ЧДТУ. 252158 90 01 
Листів 24 
 
 
Розробник ________________ К.Р.Лобачова  
 
 
 
 
 
 
 
 
 
 
145 
 
 482. ЧДТУ 242239 12 01 2 
Черкаси 2025 
 
Рисунок Г1 – Слайд 1 
 
 
Рисунок Г2 – Слайд 2 
290 
482. ЧДТУ. 252158 90 01 147 
 
 
Рисунок Г3 – Слайд 3 
 
 
Рисунок Г4 – Слайд 4 
 
291 
482. ЧДТУ. 252158 90 01 148 
 
 
Рисунок Г5 – Слайд 5 
 
 
Рисунок Г6 – Слайд 6 
 
292 
482. ЧДТУ. 252158 90 01 149 
 
 
Рисунок Г7 – Слайд 7 
 
 
Рисунок Г8 – Слайд 8 
 
293 
482. ЧДТУ. 252158 90 01 150 
 
 
Рисунок Г9 – Слайд 9 
 
 
Рисунок Г10 – Слайд 10 
 
294 
482. ЧДТУ. 252158 90 01 151 
 
 
Рисунок Г11 – Слайд 11 
 
 
Рисунок Г12 – Слайд 12 
 
295 
482. ЧДТУ. 252158 90 01 152 
 
 
Рисунок Г13 – Слайд 13 
 
 
Рисунок Г14 – Слайд 14 
 
296 
482. ЧДТУ. 252158 90 01 153 
 
 
Рисунок Г15 – Слайд 15 
 
 
Рисунок Г16 – Слайд 16 
297 
482. ЧДТУ. 252158 90 01 154 
 
 
Рисунок Г17 – Слайд 17 
 
 
Рисунок Г18 – Слайд 18 
 
298 
482. ЧДТУ. 252158 90 01 155 
 
 
Рисунок Г19 – Слайд 19 
 
 
Рисунок Г20 – Слайд 20 
 
299 
482. ЧДТУ. 252158 90 01 156 
 
 
Рисунок Г21 – Слайд 21 
 
 
Рисунок Г22 – Слайд 22 
300 
482. ЧДТУ. 252158 90 01 157 
 
 
Рисунок Г23 – Слайд 23 
 
301 
482. ЧДТУ. 252158 90 01 158 
 
Рисунок Г24 – Слайд 24 
 
 
Рисунок Г25 – Слайд 25 
 
Рисунок Г26 – Слайд 26 
 
302 
482. ЧДТУ. 252158 90 01 159 
 
 
Рисунок Г27 – Слайд 27 
 
Рисунок Г28 – Слайд 28 
 
303 
482. ЧДТУ. 252158 90 01 160 
 
 
Рисунок Г29 – Слайд 29 
 
Рисунок Г30 – Слайд 30 
 
304 
482. ЧДТУ. 252158 90 01 161 
 
 
Рисунок Г31 – Слайд 31 
 
 
Рисунок Г32 – Слайд 32 
 
305 
482. ЧДТУ. 252158 90 01 162 
 
 
Рисунок Г33 – Слайд 33 
 
Рисунок Г34 – Слайд 34 
 
306 
482. ЧДТУ. 252158 90 01 163 
 
 
Рисунок Г35 – Слайд 35 
 
Рисунок Г36 – Слайд 36 
 
307 
482. ЧДТУ. 252158 90 01 164 
 
 
Рисунок Г37 – Слайд 37 
 
Рисунок Г38 – Слайд 38 
 
308 
482. ЧДТУ. 252158 90 01 165 
 
 
Рисунок Г39 – Слайд 39 
 
Рисунок Г40 – Слайд 40 
 
309 
482. ЧДТУ. 252158 90 01 166 
 
 
Рисунок Г41 – Слайд 41 
 
Рисунок Г42 – Слайд 42 
 
310 
482. ЧДТУ. 252158 90 01 167 
 
 
Рисунок Г43 – Слайд 43 
 
Рисунок Г44 – Слайд 44 
 
311 
482. ЧДТУ. 252158 90 01 168 
 
 
Рисунок Г45 – Слайд 45 
 
312