Web-сайт новин з використанням VueJS

Дяченко, Михайло Юрійович

Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал: https://er.chdtu.edu.ua/handle/ChSTU/6875

Назва:	Web-сайт новин з використанням VueJS
Автори:	Катаєв, Дмитро Сергійович Дяченко, Михайло Юрійович
Ключові слова:	новинний сайт;SEO;Vue.js;WordPress;REST API;адаптивний дизайн
Дата публікації:	5-чер-2025
Короткий огляд (реферат):	Кваліфікаційна робота присвячена розробці новинного веб-сайту з використанням сучасних технологій — WordPress як CMS та фронтенд-фреймворку Vue.js. Проєкт спрямований на створення зручного, динамічного та адаптивного ресурсу для публікації та управління новинами. Робота є актуальною, оскільки новинні сайти потребують високої швидкості, гнучкості та інтерактивності, а поєднання WordPress і Vue.js відповідає сучасним тенденціям веб-розробки та цифровізації інформаційного простору. Метою роботи є проєктування архітектури, розробка та впровадження новинного сайту з інтеграцією WordPress і Vue.js, що забезпечує зручний інтерфейс для користувачів та адміністраторів, а також ефективну SEO-оптимізацію. Об’єктом роботи є процес створення сучасного веб-сайту для публікації новин. Предметом дослідження є застосування фреймворку Vue.js та CMS WordPress для реалізації функціоналу новинного порталу. Практична значущість отриманих результатів полягає у створенні працездатного веб-ресурсу з можливістю легкого управління контентом, адаптивним інтерфейсом та сучасним функціоналом для користувачів. У першому розділі проаналізовано теоретичні основи веб-розробки для бізнесу, проведено порівняння CMS та критерії вибору платформи. У другому розділі розглянуто проєктування архітектури новинного сайту, розроблено інформаційну структуру, створено прототипи інтерфейсів і обрано стилістичне оформлення. У третьому розділі здійснено безпосередню розробку сайту з використанням Vue.js та WordPress, реалізовано функціональні модулі, проведено тестування та оптимізацію.
URI (Уніфікований ідентифікатор ресурсу):	https://er.chdtu.edu.ua/handle/ChSTU/6875
Розташовується у зібраннях:	126 Інформаційні системи та технології (Web-технології, web-дизайн)

Файли цього матеріалу:

Файл	Опис	Розмір	Формат
РЕП_БАК_Дяченко_WEB-2111.pdf Restricted Access		1.33 MB	Adobe PDF	Переглянути/Відкрити Запит копії

Показати повний опис матеріалу Перегляд статистики

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

Extracted text

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

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

ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи бакалавра

на тему: «Web-сайт новин з використанням VueJS»

Виконав (-ла): здобувач (-ка) першого
(бакалаврського) рівня вищої освіти
4 курсу, групи Web-2111
Спеціальності 126 Інформаційні системи та
технології
ОП «Web-технології, Web-дизайн»
Дяченко Михайло Юрійович
Керівник: Кандидат технічних наук, доцент
Ланських Євген Володимирович
Рецензент: директор ТОВ «АНДЕРСЕНЛАБ», Алесін Олег Вікторович

Черкаси – 2025 року
Черкаський державний технологічний університет

Факультет ФІТІС
Кафедра Інформаційних технологій проектування
Спеціальність 126 Інформаційні системи та технології
Освітня програма Web-технології Web-дизайн______________
ЗАТВЕРДЖУЮ:
Зав.Кафедрою___________Прокопенко Т.О.
« _______ » _________________2024р.

ЗАВДАННЯ
НА КВАЛІФІКАЦІЙНУ РОБОТУ БАКАЛАВРА
________________Дяченку Михайлу Юрійовичу _______________
(прізвище, ім’я, по батькові)
1. Тема роботи Створення веб-сайту новин з використанням фреймворку Vue.js
керівник проекту (роботи) __Ланських Є.В., к.т.н., доцент__________________
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом Черкаського державного технологічного університету від
«26» лютого 2024 року №60\04.
2. Строк подання здобувачем роботи 01.06.2022
3. Вихідні дані до роботи
Публікації, книги та монографії з теорії розробки веб-орієнтованих інформаційних систем. Next.JS,
React.WordPress. Офіційні дані авторизованих сайтів.
4. Зміст розрахунково-пояснювальної записки (перелік питань, що їх належить розробити)
Вступ; 1. Аналіз предметної області та сучасних рішень; 2. Теоретичні основи веб-розробки; 3.
Проектування архітектури сайту новин. Висновки; Список використаних джерел.
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень)
1) Порівняльна характеристика аналогів програм для реалізації роботи

6. Консультанти розділів роботи
Підпис, дата
Розділ Консультант Завдання Завдання
видав прийняв

7. Дата видачі завдання 15.02.2024
Керівник

(підпис)
Завдання прийняв до виконання
(підпис)
Календарний план

№ Строк виконання
Назва етапів кваліфікаційної роботи
з/п етапів роботи Примітка
1 Підготовча стадія
1.1 Постановка задачі 15.02.2022 виконано
1.2 Підготовка завдання 20.02.2022 виконано
1.3 Погодження завдання 25.02.2022 виконано
1.4 Затвердження завдання 05.03.2022 виконано
2 Основна стадія
2.1 Підбір матеріалів 10.03.2022 виконано
2.2 Аналіз шляхів рішення поставленої задачі 26.03.2022 виконано
2.3 Розрахунок основних параметрів роботи 15.04.2022 виконано
2.4 Вибір кінцевого варіанту проектного рішення 28.04.2022 виконано
2.5 Оформлення первісної редакції роботи 08.05.2022 виконано
3 Заключна стадія
3.1 Узгодження прийнятих проектних рішень 15.05.2022 виконано
з керівником
3.2 Оформлення пояснювальної записки роботи 18.05.2022 виконано
в кінцевій редакції
3.3 Затвердження роботи 01.06.2022
3.4 Рецензування роботи 03.06.2022
3.5 Захист роботи 12.06.2022

Студент дипломник Дяченко М.Ю.
(підпис) (прізвище та ініціали)

Керівник роботи Ланських Є.В.
(підпис) (прізвище та ініціали
АНОТАЦІЯ
Структура та обсяг роботи. Пояснювальна записка складається з 3 розділів,
викладена на ___ сторінках, містить ___ рисунків, ___ таблиць, ____ джерел
використаної літератури, ____ додатків.
Кваліфікаційна робота присвячена розробці новинного веб-сайту з
використанням сучасних технологій — WordPress як CMS та фронтенд-
фреймворку Vue.js. Проєкт спрямований на створення зручного, динамічного та
адаптивного ресурсу для публікації та управління новинами.
Робота є актуальною, оскільки новинні сайти потребують високої
швидкості, гнучкості та інтерактивності, а поєднання WordPress і Vue.js
відповідає сучасним тенденціям веб-розробки та цифровізації інформаційного
простору.
Метою роботи є проєктування архітектури, розробка та впровадження
новинного сайту з інтеграцією WordPress і Vue.js, що забезпечує зручний
інтерфейс для користувачів та адміністраторів, а також ефективну SEO-
оптимізацію.
Об’єктом роботи є процес створення сучасного веб-сайту для публікації
новин.
Предметом дослідження є застосування фреймворку Vue.js та CMS
WordPress для реалізації функціоналу новинного порталу.
Практична значущість отриманих результатів полягає у створенні
працездатного веб-ресурсу з можливістю легкого управління контентом,
адаптивним інтерфейсом та сучасним функціоналом для користувачів.
У першому розділі проаналізовано теоретичні основи веб-розробки для
бізнесу, проведено порівняння CMS та критерії вибору платформи.
У другому розділі розглянуто проєктування архітектури новинного сайту,
розроблено інформаційну структуру, створено прототипи інтерфейсів і обрано
стилістичне оформлення.
У третьому розділі здійснено безпосередню розробку сайту з
використанням Vue.js та WordPress, реалізовано функціональні модулі,
проведено тестування та оптимізацію.
Ключові слова: новинний сайт, Vue.js, WordPress, REST API, адаптивний
дизайн, SEO

SUMMARY
Structure and volume of the work. The explanatory note consists of 3 chapters,
presented on ___ pages, contains ___ figures, ___ tables, ____ sources of literature
used, ____ appendices.
The qualification work is dedicated to the development of a news website using
modern technologies — WordPress as a CMS and the Vue.js frontend framework. The
project aims to create a convenient, dynamic, and adaptive resource for publishing and
managing news.
The work is relevant because news websites require high speed, flexibility, and
interactivity, and the combination of WordPress and Vue.js corresponds to modern
trends in web development and digitalization of the information space.
The purpose of the work is to design the architecture, develop, and implement a
news website integrating WordPress and Vue.js, providing a user-friendly interface for
users and administrators as well as effective SEO optimization.
The object of the work is the process of creating a modern website for publishing
news.
The subject of the study is the use of the Vue.js framework and WordPress CMS
to implement the functionality of the news portal.
The practical significance of the obtained results lies in the creation of a
functional web resource with easy content management, an adaptive interface, and
modern features for users.
The first chapter analyzes the theoretical foundations of web development for
business, compares CMS platforms, and outlines criteria for platform selection.
The second chapter covers the design of the news website architecture, develops
the information structure, creates interface prototypes, and selects stylistic design.
The third chapter involves the direct development of the site using Vue.js and
WordPress, implements functional modules, and conducts testing and optimization.
Keywords: news website, Vue.js, WordPress, REST API, adaptive design, SEO

Зміст
Розділ 1. Аналіз предметної області та сучасних рішень
1.1. Сучасний стан ринку новинних сайтів в Україні
1.2. Аналіз цільової аудиторії новинного сайту
1.3. Огляд існуючих веб-рішень для новинних порталів
1.4. Порівняльний аналіз функціональних можливостей конкурентних сайтів
1.5. Висновки до розділу
Розділ 2. Теоретичні основи веб-розробки для бізнесу
2.1. Критерії вибору платформи для розробки сайту
2.2. Порівняльна характеристика CMS для малого бізнесу
2.3. SEO-оптимізація як ключовий фактор успіху новинного сайту
2.4. Принципи UX/UI-дизайну для новинних порталів
2.5. Аналіз конкурентних сайтів
2.6. Вимоги користувачів
2.7. Висновки до розділу
Розділ 3. Проектування архітектури сайту новин
3.1. Визначення вимог до функціоналу сайту новин
3.2. Розробка інформаційної архітектури
3.3. Прототипування інтерфейсів у Figma
3.4. Вибір кольорової палітри та типографіки
3.5. Висновки до розділу
Розділ 4. Технологічна реалізація та тестування
4.1. Вибір хостингу та доменного імені
4.2. Встановлення та налаштування WordPress
4.3. Створення структури сайту
4.4. Додавання Vue.js до сайту
4.5. Інтеграція аналітики
4.6. Тестування сайту
4.7. Підготовка сайту до публікації
4.8. Висновки до розділу
Висновок

ЧДТУ 211982.005 ПЗ
Зм. Лист № докумемента Підпис Дата
Розроб. .Дяченко М.Ю.
Літ. Лист Листів
Перев. Ланських Є.В. Створення Web-сайту новин з
Н 2 45
Реценз використанням фреймворку Vue.js
ФІТІС,
Н. .контр. . Ланських Є.В.
Затв. Прокопенко Т.О. Пояснювальна записка
кафедра ІТП, Web-2111

Вступ
Актуальність теми
Сучасний інформаційний простір характеризується стрімким зростанням
кількості онлайн-медіа та новинних ресурсів. В умовах високої конкуренції та
постійних змін у поведінці користувачів створення ефективного новинного
сайту, який поєднує зручність, швидкодію та актуальність контенту, стає
особливо важливим. Ця робота присвячена аналізу, проектуванню та реалізації
сучасного новинного веб-ресурсу, що відповідає потребам користувачів і
вимогам ринку.
Мета та завдання проєкту
Мета роботи – розробити та впровадити новинний веб-сайт, який забезпечує
зручний доступ до актуальної інформації, має інтуїтивний інтерфейс і високу
продуктивність.
Основні завдання проєкту:
 Проаналізувати сучасний стан ринку новинних сайтів та визначити ключові
тенденції.
 Дослідити потреби цільової аудиторії та вимоги до функціоналу сайту.
 Розробити інформаційну архітектуру та дизайн інтерфейсу.
 Вибрати оптимальні технології для реалізації проекту.
 Провести тестування та оптимізацію сайту.
Об'єкт і предмет роботи
 Об'єкт: процес створення сучасного новинного веб-сайту.
 Предмет: методи та інструменти для проектування, розробки та впровадження
новинного ресурсу.
Арк.
ЧДТУ 211982.005 ПЗ
3
З мн. Арк. № докум. Підпис Дата

Методи
У роботі використано такі методи:
 Аналітичний: вивчення ринку, аналіз конкурентів, дослідження аудиторії.
 Проектний: розробка інформаційної архітектури, дизайн-макетів,
прототипування.
 Технічний: реалізація сайту з використанням сучасних веб-технологій.
Практична значимість
Результати дослідження можуть бути використані:
 Для створення новинних сайтів різного масштабу.
 У якості практичного посібника з веб-розробки для ЗМІ.
 Для подальших досліджень у галузі цифрових медіа.
Структура роботи
Робота складається з чотирьох розділів, висновків:
1. Аналіз предметної області – дослідження ринку, аудиторії та конкурентів.
2. Проектування сайту – вимоги до функціоналу, інформаційна архітектура, дизайн.
3. Технічна реалізація – вибір технологій, розробка, інтеграція.

Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

Розділ 1. Аналіз предметної області та сучасних рішень

1.1. Сучасний стан ринку новинних сайтів в Україні
Український ринок новинних сайтів перебуває у стані активного зростання
та трансформації. З розвитком цифрових технологій дедалі більше користувачів
звертаються до онлайн-джерел новин [3], відмовляючись від традиційних газет і
телебачення. Це спричинило зростання кількості інформаційних порталів,
новинних агрегаторів та незалежних медіапроєктів, які змагаються за увагу
аудиторії [7].
Ключову роль у формуванні ринку відіграє зміна поведінки споживачів:
більшість користувачів читають новини зі смартфонів, що впливає на технічні та
дизайнерські рішення веб-сайтів [1]. Більшість успішних проєктів оптимізують
свої ресурси для мобільного доступу, впроваджують адаптивний дизайн,
спрощений інтерфейс та швидке завантаження сторінок [8].
На ринку домінують великі гравці, такі як УНІАН, РБК-Україна, Liga.net
[12], які мають стабільну аудиторію, потужні редакції та фінансування. Проте
поряд із цим з’являються й незалежні або нішеві ресурси, які спеціалізуються на
окремих темах або працюють з молодою цільовою аудиторією [5]. Такі
платформи, як Chytomo, The Village Україна, Заборона, пропонують глибший
аналітичний або культурно-соціальний контент, створюючи альтернативу
мейнстримним ЗМІ.
Монетизація онлайн-медіа залишається викликом [11]. Основні джерела
доходу включають банерну та контекстну рекламу, спонсорський контент,
підписки, а також співпрацю з бізнесом через партнерські матеріали [17]. Деякі
видання починають впроваджувати paywall або часткову платну підписку, однак
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

ця модель ще не набула масового поширення через небажання аудиторії платити
за новинний контент.
У загальному підсумку сучасний стан ринку новинних сайтів в Україні
свідчить про високий рівень динаміки, конкуренції та адаптації до змін у
споживчій поведінці [4]. Водночас лишаються виклики щодо довіри до джерел
інформації, фейкових новин і пошуку ефективної бізнес-моделі для сталого
розвитку [10].
1.2. Аналіз цільової аудиторії новинних ресурсів
Цільова аудиторія новинного сайту формується залежно від його
тематичної спрямованості, однак існує загальний профіль типового користувача
таких ресурсів [6]. Найактивнішими є користувачі віком від 18 до 45 років — це
мобільна, цифрово-грамотна аудиторія, яка активно споживає інформацію в
режимі реального часу [13]. Вони віддають перевагу онлайн-джерелам,
використовують смартфони та соціальні мережі для отримання та обміну
новинами.
За інтересами аудиторія зазвичай охоплює широкий спектр тем — від
політики та економіки до технологій, науки, культури та подій у регіонах. В
умовах нестабільної ситуації в країні особливо затребуваними є оперативні
зведення, аналітика та локальні новини, що впливають на повсякденне життя.
Поведінкові особливості також формують вимоги до подачі контенту.
Користувачі звикли швидко сканувати заголовки в пошуках головного сенсу, тож
велике значення мають привабливі заголовки та влучні прев’ю. Популярними
стають короткі формати — новинні дайджести, підбірки, інфографіка,
інтерактивні матеріали. Це пояснюється браком часу і перенасиченістю
інформаційного поля.
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

Ще одна важлива риса — активна взаємодія із соціальними платформами.
Аудиторія охоче ділиться новинами, коментує їх, обговорює у Facebook,
Telegram, Instagram або X (Twitter). Це вимагає від сайту тісної інтеграції з
соцмережами, кнопок шерінгу, адаптації контенту під SMM [20] та можливості
оперативного поширення.
Таким чином, сучасна цільова аудиторія новинних сайтів — це
вимогливий, мобільний, критично налаштований користувач, який очікує
швидкого доступу до достовірної, зручної для сприйняття інформації [21].

1.3. Огляд існуючих веб-рішень для новинних платформ
Проведено аналіз популярних українських новинних сайтів:
- УНІАН – класичний інформаційний портал з розгалуженою структурою.

Рисунок 1 – Головне вікно новинного сайту Уніан

Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

- 5 канал – акцент на аналітику та довгі читанки.

Рисунок 2 – Головне вікно новинного сайту 5 канал

- Тексти.org.ua – нішевий сайт з журналістськими розслідуваннями.

Рисунок 3 – Головне вікно новинного сайту Тексти.org.ua

Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

- 24 канал – мультимедійний контент (відео, онлайн-трансляції).

Рисунок 4 – Головне вікно новинного сайту 24 канал
Основні недоліки у програмній реалізації сучасних українських новинних сайтів
Попри розвиток ІТ-сфери в Україні, навіть провідні новинні портали часто мають
низку технічних і дизайнерських недоліків, які негативно впливають на
користувацький досвід, швидкодію, безпеку та доступність ресурсу. Розглянемо
найпоширеніші з них:
1. Перевантажений інтерфейс
 Надлишок реклами: велика кількість банерів, автоматичний запуск відео,
«липкі» (sticky) рекламні блоки, що відволікають користувача [1].
 Засилля віджетів: курси валют, погода, лічильники соцмереж — усе це
ускладнює візуальну структуру сторінки.
 Недосконала верстка: іноді адаптивний дизайн працює некоректно,
елементи перекриваються або «ламаються» на різних пристроях [6]..
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

 Відсутність фокусу: одночасне навантаження користувача інформаційно та
візуально без зрозумілої ієрархії контенту.
2. Повільне завантаження сторінок
 Велика кількість медіафайлів та сторонніх скриптів: ресурсоємні скрипти,
соціальні віджети, аналітика, реклама значно уповільнюють завантаження.
 Неоптимізовані зображення: часто використовуються великі JPG/PNG без
підтримки сучасних форматів (WebP), відсутній lazy loading [2].
 Погане кешування: відсутність налаштувань кешування на стороні сервера
та клієнта.
3. Низька продуктивність на мобільних пристроях
 Відсутність PWA-функцій: сайти не підтримують офлайн-режим, push-
нотифікації, не зберігаються на головному екрані [9].
 Застарілі або перевантажені фреймворки: використання важких бібліотек
без реальної потреби [7].
 Неврахування умов слабкого інтернет-з’єднання: немає fallback-контенту
або прогресивної загрузки [6, 9].
4. Проблеми з безпекою
 Відсутність базових заголовків безпеки: таких як Content-Security-Policy
(CSP), X-Frame-Options, X-XSS-Protection [3, 10].
 Уразливості до XSS, Clickjacking: особливо при використанні сторонніх
скриптів або недостатньому фільтруванні введених даних [3, 10].
 Ігнорування Subresource Integrity (SRI): небезпека підміни сторонніх
ресурсів при атаках на CDN [3, 10].
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

5. Низька доступність (Accessibility)
 Низький контраст, погано підібрана типографіка: ускладнює читання
людям з вадами зору.
 Некоректна навігація за допомогою клавіатури: фокус не передається
логічно між елементами.
6. Недостатня SEO-оптимізація
 Дублі контенту: однакові сторінки з різними URL, неправильне
використання canonical [5].
 Відсутність структурованих даних (schema.org): пошукові системи не
можуть коректно інтерпретувати тип контенту [5].
 Неправильна ієрархія заголовків та URL: складна або нелогічна структура
сайту з поганою внутрішньою перелінковкою.
7. Залежність від зовнішніх сервісів
 Відсутність резервування (fallback): при збоях у Facebook, YouTube, Google
Analytics функціональність сайту може частково зникати [8].
 Інтеграції без контролю: використання сторонніх сервісів без перевірки їх
стабільності та безпечності [8].
8. Примітивна реалізація пошуку
 Базовий пошук без фільтрації та сортування: немає можливості шукати за
категоріями, датами, автором [8].
 Відсутність автозаповнення, підказок: що ускладнює користування для
нових відвідувачів [8].
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

 Не використовуються сучасні рішення (наприклад, Elasticsearch або
MeiliSearch): які дозволяють зробити пошук швидким і релевантним [8].
Висновок
Аналізуючи технічну реалізацію більшості українських новинних сайтів,
можна зробити висновок, що головною проблемою є надмірна орієнтація на
монетизацію та недостатня увага до оптимізації, зручності й сучасних підходів
до розробки. Ці проблеми суттєво знижують задоволеність користувачів,
погіршують SEO-результати та створюють ризики для безпеки. Інтеграція
сучасних фреймворків (наприклад, Vue.js), оптимізація ресурсів і впровадження
UX/UI принципів може суттєво покращити ситуацію.
Спільні риси українських новинних сайтів
Українські новинні сайти зазвичай мають чітку структуру, де новини
розподілені за темами, такими як політика, економіка, спорт чи культура. Це
допомагає користувачам швидко знаходити потрібну інформацію. На головній
сторінці часто розміщують останні новини у вигляді сітки або стрічки з
короткими описами та заголовками, щоб відвідувачі могли швидко ознайомитися
з головними подіями.
Важливо, що сайти адаптовані для різних пристроїв — як для комп’ютерів,
так і для мобільних телефонів, що забезпечує комфортне читання і зручну
навігацію. Для залучення користувачів новинні ресурси активно використовують
фото, відео та інші інтерактивні елементи.
Більшість сайтів надають можливість залишати коментарі, що дозволяє
читачам висловлювати свої думки та обговорювати події. Також часто
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

зустрічається інтеграція з соціальними мережами — користувачі можуть швидко
поділитися новиною або увійти через акаунт у Facebook чи Google.
Пошук за ключовими словами допомагає швидко знайти потрібний
матеріал. Новини на сайтах регулярно оновлюються, що гарантує актуальність
інформації. Крім того, сучасні веб-технології забезпечують швидкість роботи і
зручність користування.
1.4. Висновки до розділу
Ринок новинних сайтів в Україні активно розвивається, зростає
конкуренція як серед великих національних медіа, так і серед регіональних та
нішевих проектів. Користувачі стають вимогливішими до зручності інтерфейсу,
швидкості завантаження сторінок і доступності контенту з мобільних пристроїв.
Особливу увагу слід приділяти мультимедійності, адаптивному дизайну,
інтеграції з соціальними мережами та пошуковій оптимізації.
У межах власного проєкту доцільно сфокусуватися на чітко визначеній
тематиці, наприклад, локальних новинах або сфері технологій. Це дозволить
краще задовольнити інтереси конкретної аудиторії. Персоналізація стрічки новин
за допомогою AI-рекомендацій, зручна подача інформації та сучасні інструменти
управління контентом (наприклад, headless CMS) забезпечать актуальність і
конкурентоспроможність сайту.

Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

Розділ 2. Теоретичні основи веб-розробки для бізнесу
2.1. Критерії вибору платформи для розробки сайту
Вибір платформи для створення сайту є одним із ключових етапів розробки,
оскільки від нього залежить функціональність, зручність адміністрування та
подальший розвиток проєкту [1], [3].
Головними критеріями при виборі платформи є:
 Функціональність: платформа має забезпечувати реалізацію всіх
необхідних для сайту функцій — публікацію новин, пошук, коментарі,
роботу з користувачами [1].
 Гнучкість і розширюваність: можливість додавання нових модулів або
плагінів для розширення функціоналу [4].
 Простота використання: інтуїтивний інтерфейс для адміністраторів і
редакторів, щоб швидко керувати контентом [5].
 Підтримка сучасних технологій: наявність API (наприклад, REST API), що
дає змогу інтегрувати сучасні фронтенд-фреймворки, такі як Vue.js [8].
 Безпека: можливість захисту сайту від атак і несанкціонованого доступу
[7].
 Вартість: доступність платформи як у плані початкових витрат, так і у
підтримці [2].
 Спільнота і документація: наявність великої спільноти розробників і
користувачів, що допомагає у вирішенні проблем.
WordPress задовольняє більшість цих критеріїв, будучи популярною CMS із
широкою екосистемою плагінів і тем. Він підтримує REST API, що дозволяє
використовувати Vue.js для побудови динамічного інтерфейсу, зручного для
користувачів [9], [11].
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

2.2. Порівняльна характеристика CMS для малого бізнесу
Для створення малого і середнього бізнес-сайту існує кілька популярних CMS:
 WordPress: найпоширеніша система управління контентом, відома своєю
простотою, великою кількістю тем і плагінів, а також можливістю
інтеграції з Vue.js через REST API. Підходить для новинних сайтів [9], [11].
завдяки легкому додаванню та редагуванню контенту.
 Joomla: більш складна у використанні, але гнучка платформа, що дозволяє
більш глибоку кастомізацію. Часто використовується для сайтів зі
складною структурою [13].
 Drupal: потужна CMS для великих і складних проєктів з високими
вимогами до безпеки і кастомізації. Вимагає значно більших технічних
знань [14].
WordPress вирізняється найбільш швидким запуском і простотою
адміністрування, що особливо важливо для команд із невеликим технічним
досвідом. Його архітектура дозволяє ефективно поєднувати традиційний
серверний рендеринг із сучасними SPA-елементами на Vue.js.
2.3. SEO-оптимізація як ключовий фактор успіху
SEO – це набір технік, які допомагають сайту отримувати високі позиції у
пошукових системах. Для новинних сайтів це особливо важливо, адже
конкуренція в цій ніші велика.
Основні аспекти SEO для новинного сайту:
 Унікальні метадані: кожна новина повинна мати унікальний заголовок
(title) і опис (meta description).
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

 Правильна структура URL: зрозумілі і логічні адреси сторінок (наприклад,
/novyny/tehnologyiya/).
 Швидкість завантаження: оптимізація зображень, мінімізація JS і CSS,
кешування.
 Мобільна адаптивність: Google віддає перевагу сайтам, які коректно
працюють на мобільних пристроях.
 Внутрішня перелінковка: логічні посилання між статтями і категоріями
допомагають пошуковим роботам і користувачам орієнтуватися.
WordPress має широкий вибір SEO-плагінів (Yoast SEO, Rank Math), які
допомагають автоматизувати багато процесів оптимізації. Для Vue.js важливо
забезпечити серверний рендеринг або пререндеринг, щоб пошукові роботи могли
індексувати динамічний контент.
2.4. Принципи UX/UI-дизайну для новинних порталів
UX (User Experience) та UI (User Interface) є ключовими елементами, які
визначають успішність взаємодії користувача із новинним ресурсом. Саме
дизайн впливає на перше враження, простоту орієнтації на сайті та загальну
ефективність споживання контенту.
Основні принципи дизайну:
 Простота і зрозумілість. Інтерфейс має бути мінімалістичним, без
надмірної кількості графічних або інтерактивних елементів, щоб не
перевантажувати увагу користувача. Просте візуальне оформлення
полегшує читання новин і знижує когнітивне навантаження.
 Структурованість. Контент повинен бути чітко організованим:
розділений на категорії, з можливістю фільтрації за тегами, датами або
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

популярністю. Це покращує доступ до інформації та дозволяє швидко
знайти релевантні новини.
 Адаптивність. Сайт має бездоганно відображатися на різних пристроях —
від десктопів до мобільних телефонів. Для цього використовуються медіа-
запити (media queries), гнучкі сітки та адаптивна типографіка. Зручна
мобільна версія є критично важливою, оскільки більшість користувачів
читають новини зі смартфонів.
 Зручна навігація. Основне меню, пошуковий рядок, «хлібні крихти»
(breadcrumbs), пагінація, категорії та кнопки — усе повинно мати логічну
структуру, бути легкодоступним та інтуїтивно зрозумілим.
 Швидкість взаємодії. Завдяки використанню Vue.js можна реалізувати
динамічне оновлення вмісту без повного перезавантаження сторінки (через
механізм SPA — Single Page Application). Це значно покращує швидкість
відгуку інтерфейсу та підвищує загальний рівень взаємодії.
 Контрастність і читабельність. Важливо підібрати шрифти, які легко
читаються, а також забезпечити достатній контраст між текстом і фоном.
Це особливо важливо для користувачів з вадами зору та при використанні
мобільних пристроїв на вулиці.
 Доступність (Accessibility). Варто дотримуватись стандартів WCAG:
додавати ARIA-атрибути, передбачити навігацію клавіатурою та
можливість використання сайту з екранами для читання (screen readers).
 Інтерактивні елементи. Кнопки «поділитися у соцмережах», системи
оцінки статей, блоки коментарів та інші елементи взаємодії повинні мати
зрозуміле розташування і функціональність, що спонукає до активної
участі користувача.
Загалом, добре продуманий UX/UI-дизайн забезпечує комфортне
користування сайтом, стимулює до повернення на ресурс та підвищує довіру до
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

бренду. У випадку новинного сайту це означає швидкий доступ до актуального
контенту, легкість у споживанні інформації та позитивний досвід для
користувача.
2.5. Аналіз конкурентних сайтів
Для створення конкурентоспроможного новинного ресурсу важливо
враховувати сильні та слабкі сторони вже існуючих українських медіа. Було
проаналізовано декілька популярних новинних сайтів: УНІАН (unian.ua),
Суспільне Новини (suspilne.media) та The Village Україна (the-village.com.ua).
Кожен із них має власну цільову аудиторію, дизайн, архітектуру подачі контенту
та рівень інтерактивності [1, 10, 11].
Сайт УНІАН є прикладом класичного новинного ресурсу з великим
потоком матеріалів. Його головна сторінка заповнена стрічкою новин з
короткими заголовками та фото. Хоча структура логічна, сайт перевантажений
блоками реклами, що може негативно впливати на користувацький досвід. Крім
того, мобільна версія іноді виглядає складною для навігації. Проте ресурс має
хорошу SEO-оптимізацію та швидке оновлення інформації, що забезпечує
стабільну аудиторію [1, 4].
Суспільне Новини демонструє вдалий приклад балансу між текстовим та
мультимедійним контентом. Інтерфейс мінімалістичний, що дозволяє
зосередитися на читанні новини без зайвих відволікаючих елементів. Водночас
дизайн сайту адаптований під мобільні пристрої, а також доступний у версії для
людей з вадами зору. Особливістю є також подача матеріалів за регіонами, що
дозволяє користувачам легко знайти локальну інформацію [10, 12].
Сайт The Village Україна орієнтується на молодіжну аудиторію, а
тематика матеріалів стосується урбаністики, культури, технологій і міського
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

життя. Основною перевагою цього ресурсу є візуальний стиль і якісний UX-
дизайн: статті оформлені у вигляді карток, інтерфейс легкий та зручний для
читання. Навігація реалізована інтуїтивно, що покращує взаємодію користувача
з сайтом. Проте структура ресурсу більше підходить для глибоких матеріалів, а
не для щоденних новин [11, 13].
Порівняльний аналіз показав, що найважливішими чинниками успіху новинного
сайту є швидкість завантаження, зручність інтерфейсу, актуальність контенту та
адаптація під мобільні пристрої. Для власного проєкту варто врахувати ці
приклади та об’єднати кращі підходи: просту й чисту навігацію, логічну
структуру сторінок, добру адаптивність та легкість у керуванні контентом.
2.6. Вимоги користувачів
У процесі створення новинного сайту особливу увагу слід приділити
очікуванням і поведінці потенційних користувачів. Сучасний користувач
споживає інформацію швидко, нерідко з мобільного пристрою, тому зручність і
доступність є ключовими факторами.
Передусім користувач очікує оперативної подачі новин. Це означає, що
головна сторінка має регулярно оновлюватися без затримок, а важливі новини
повинні бути в полі зору одразу після завантаження сторінки. У зв’язку з цим
важливим є реалізація швидкого бекенду, кешування та правильна
структуризація контенту.
Другий важливий аспект — доступність та адаптивність. Більшість
відвідувачів читають новини зі смартфонів, тож сайт повинен виглядати
однаково добре як на великому екрані, так і на мобільному. Інтерфейс повинен
масштабуватись, не втрачаючи логіки навігації чи читабельності матеріалів.
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

Користувачі цінують просту та зрозумілу навігацію. Занадто складна
структура або надлишок інформаційних блоків відлякують і знижують рівень
залученості. Добре продумане меню, чітка ієрархія категорій, «хлібні крихти»
(breadcrumbs) і ефективна реалізація пошуку допомагають швидко знайти
потрібний контент [2, 5].
Ще один елемент, який значно впливає на задоволення користувача, — це
інтерактивність. Можливість залишати коментарі, ділитися новинами у
соціальних мережах або оцінювати публікації створює відчуття залученості.
Також важливо, щоб елементи взаємодії працювали без збоїв і не ускладнювали
навігацію.
Окрему категорію вимог становлять функції персоналізації — зокрема,
рекомендації за інтересами, історія перегляду, збереження обраного тощо. Хоча
не всі новинні ресурси це реалізовують, у перспективі такі можливості можуть
підвищити лояльність аудиторії.
У підсумку можна сказати, що успішний новинний сайт має враховувати
потреби різних груп користувачів: тих, хто шукає короткі дайджести, і тих, хто
читає повні тексти; тих, хто хоче просто переглянути заголовки, і тих, хто бере
участь в обговореннях. Тому вже на етапі проектування важливо орієнтуватися
на зручність, швидкість доступу до інформації та легкість взаємодії з сайтом.
2.7. Висновки до розділу
Обираючи платформу для розробки новинного сайту, доцільно зупинитися
на WordPress завдяки його простоті і великій спільноті. Інтеграція Vue.js дозволяє
додати сучасний, інтерактивний інтерфейс, що підвищує зручність користування.
Успіх сайту багато в чому залежить від правильної SEO-оптимізації та
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

продуманого UX/UI-дизайну. Поєднання цих факторів дасть змогу створити
конкурентоспроможний і зручний ресурс для користувачів [1, 3, 5].

Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

Розділ 3. Проєктування архітектури новинного сайту

3.1. Визначення функціональних та нефункціональних вимог
Перш ніж перейти до технічної реалізації новинного сайту, необхідно
визначити базові функціональні можливості, які забезпечать повноцінну роботу
ресурсу, а також нефункціональні вимоги, що впливають на якість взаємодії з
користувачем.
До основних функцій сайту належать відображення новин у
структурованому вигляді за категоріями, можливість перегляду повного тексту
кожної публікації, фільтрація матеріалів за популярністю чи датою, пошук за
ключовими словами або тегами, а також коментування статей. Сайт має коректно
відображатися на різних пристроях, що потребує реалізації адаптивної верстки.
Для керування контентом передбачено адміністративну панель або інтеграцію з
CMS через API [1, 5].
Нефункціональні вимоги охоплюють такі аспекти, як швидкодія та
стабільність роботи системи навіть при високому навантаженні. Проєкт повинен
бути масштабованим, щоб дозволити у майбутньому розширення
функціональності. Значну увагу приділено SEO-оптимізації, що забезпечить
видимість ресурсу у пошукових системах [1, 4]. Важливою є й безпека: реалізація
захисту від поширених атак (XSS, CSRF) та загальна стійкість до зловмисних дій
[10, 14]. Якісний UX/UI-дизайн гарантує комфорт користувача при взаємодії з
платформою [5, 6].

Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

3.2. Розробка інформаційної архітектури
Інформаційна архітектура є логічною структурою сайту, яка визначає, як саме
користувач буде взаємодіяти з новинним контентом.
Основна структура сайту:
 Головна сторінка – відображає список останніх новин, топ-добірки за
популярністю або датою, а також блоки з різними категоріями (наприклад,
Політика, Економіка, Технології). Додатково може містити слайдер або
карусель із головними новинами дня, а також виділені теги або теми.
 Сторінка категорії – містить фільтрований список новин за обраною
темою. Передбачено можливість сортування за датою, популярністю,
наявністю медіа. Угорі виводиться короткий опис категорії та її значення в
загальній структурі сайту.
 Сторінка новини – містить повний текст публікації з заголовком, датою
публікації, ім’ям автора, головним зображенням, мультимедійними
вставками (фото, відео), а також блоками коментарів. Внизу розміщується
блок «Читайте також» з релевантними матеріалами.
 Сторінка пошуку – реалізована через рядок пошуку та додаткові
фільтри (категорія, дата, теги). Виводить результати пошуку з коротким
прев’ю. Підтримується автопідказка при введенні запиту.
 Сторінка "Про сайт" – розділ з інформацією про редакцію або
команду, принципи роботи, контакти керівництва, місію та бачення
ресурсу. Також може містити юридичну інформацію або правила
користування.
 Сторінка "Контакти / Зворотній зв'язок" – форма для зворотного
зв’язку, з полями для введення ПІБ, електронної пошти, теми повідомлення
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

та самого тексту. Також можливо додати інтерактивну мапу (Google Maps)
та контактні дані (телефон, адреса, email) [4, 7].
 Адмін-панель (якщо використовується CMS або headless CMS API) –
закрита частина сайту для адміністраторів і редакторів. Дозволяє додавати,
редагувати, публікувати або видаляти новини, керувати категоріями,
коментарями, користувачами та SEO-налаштуваннями.
Типова навігація:
[Головна] [Категорії ▼] [Пошук] [Про сайт] [Контакти]
3.3. Прототипування інтерфейсів у Figma
Для візуалізації структури майбутнього сайту було створено інтерактивні
прототипи в середовищі Figma [10, 11]. Це дало змогу перевірити зручність
навігації, логіку розміщення елементів та відповідність інтерфейсу очікуванням
цільової аудиторії ще до початку безпосередньої реалізації. Прототипування
спрощує процес комунікації між дизайнером та розробником, а також дозволяє
оперативно вносити зміни на ранньому етапі.
Прототипи включають:
 Головну сторінку – побудовану у вигляді сітки карток новин з прев’ю, де
відображаються зображення, заголовок, короткий опис і кнопка «Читати
далі». Додано блоки «Останні новини», «Популярне» та категорії.
 Сторінку новини – містить основний текст публікації, дату, автора, а також
блоки з коментарями, кнопками для поширення в соцмережах і блок
«Читайте також» для переходу до пов’язаних матеріалів.
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

 Інтерфейс пошуку і фільтрації – реалізовано зручне розташування
пошукового поля, списку категорій і фільтрів за датою чи популярністю,
що дозволяє швидко знаходити релевантну інформацію.
 Адаптивні версії – створено окремі макети для смартфонів і планшетів, з
урахуванням особливостей мобільної взаємодії: вертикальна прокрутка,
бургер-меню, збільшені зони натискання.
Усі елементи оформлено згідно з принципами сучасного UI-дизайну — чиста
сітка, достатня кількість білого простору, контрастні акценти, читабельна
типографіка. Це дозволило ще до початку кодування отримати повне уявлення
про вигляд та логіку функціонування сайту [12].

3.4. Вибір кольорової палітри та типографіки
Кольорова гама новинного сайту має сприяти комфортному сприйняттю тексту,
водночас не перевантажуючи інтерфейс.
Обрано мінімалістичний стиль у поєднанні з акцентними кольорами для дій
користувача [23].
Кольори:
 Основний: #ffffff (фон), #000000 (текст);
 Акцентний: #1976D2 (посилання, кнопки);
 Додатковий: #F5F5F5 (блоки, фони секцій), #E53935
(попередження/помилки).
Типографіка:
 Заголовки: Roboto Slab, шрифт із сучасною, але класичною геометрією;
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

 Основний текст: Open Sans або Inter;
 Розміри шрифтів адаптовані для зручного читання на екранах смартфонів.

Рисунок 5 – Прототип головної сторінки

Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

3.5. Висновки до розділу
У третьому розділі було спроєктовано архітектуру майбутнього новинного
сайту, що є важливим етапом у процесі розробки. Визначено основні
функціональні та нефункціональні вимоги, які відповідають сучасним
очікуванням користувачів — це зручність навігації, адаптивність, швидкодія,
захист даних і SEO-оптимізація [4], [5].
Також сформовано інформаційну структуру ресурсу з урахуванням
типових сценаріїв користування: від перегляду списку новин до фільтрації,
пошуку та взаємодії з контентом. Створено інтерактивні прототипи інтерфейсів
у Figma, що допомогло перевірити логіку роботи майбутнього продукту на
практиці й передбачити можливі проблеми на ранньому етапі. Вибір візуального
стилю забезпечує відповідність сучасним трендам дизайну, з фокусом на чистий
інтерфейс, читабельність і доступність [10]..
Ці результати формують надійну концептуальну базу для переходу до
наступного етапу — безпосередньої реалізації сайту з використанням Vue.js як
фронтенд-фреймворку та WordPress як headless CMS [4], [5], [10], що дозволить
досягти високої гнучкості, масштабованості та простоти керування контентом.

Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

Розділ 4. Технологічна реалізація та тестування

4.1. Вибір хостингу та домену
Сайт новин розміщено на віртуальному хостингу, який підтримує PHP
версії 7.4+ та базу даних MySQL — базові вимоги для роботи з CMS WordPress.
Такий тип хостингу є економічно доцільним для проєктів середнього
навантаження, забезпечує достатній рівень продуктивності й простоту в
адмініструванні [12], [15].
Під час вибору провайдера враховувалися такі критерії, як стабільність
роботи серверів, наявність технічної підтримки, регулярне створення резервних
копій, підтримка SSL-сертифікатів для захищеного з'єднання (HTTPS) та зручна
панель керування (наприклад, cPanel або Plesk) [14], [16]. Встановлення
WordPress було реалізовано за допомогою автоустановника Softaculous, що
спростило початкову конфігурацію сайту [13].
Доменне ім’я зареєстровано через авторитетного реєстратора, що
забезпечує захист персональних даних власника та можливість швидкої
інтеграції з хостингом. Обране ім’я — novyny-svitu.com — є лаконічним, легко
запам’ятовується, містить ключове слово (новини) і відображає загальну
тематику ресурсу. Це позитивно впливає на впізнаваність бренду та сприяє SEO-
просуванню сайту в пошукових системах [17], [18].
4.2. Встановлення та налаштування WordPress
Сайт створено на основі WordPress, бо ця система проста у використанні і
дозволяє легко керувати контентом. Вона має багато готових тем і плагінів, що
допомагають швидко зробити сучасний сайт.
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

Після встановлення WordPress обрали легку тему з адаптивним дизайном, щоб
сайт добре виглядав на комп’ютерах і мобільних пристроях. Також додали
плагіни для покращення роботи сайту:
 Yoast SEO — допомагає сайту краще відображатись у пошукових системах
[21];
 плагіни кешування — прискорюють завантаження сторінок [22];
 плагіни для безпеки — захищають сайт від зломів [23];
 плагіни для статистики — збирають інформацію про відвідувачів [24].
Сайт налаштовано так, щоб URL-адреси були зрозумілими та зручними для
користувачів і пошуковиків.
WordPress працює як система для зберігання та управління новинами, а
виведення контенту на сторінках здійснюється за допомогою Vue.js через API.
Це дає змогу зробити сайт швидким і сучасним [4], [5], [10].
4.3. Створення структури сайту
У WordPress було створено основні сторінки: Головна, Новини, Категорії,
Про нас, Контакти. Для публікації новин використовувався стандартний тип
записів (posts), а також застосовано категорії й теги для зручного сортування та
фільтрації контенту [26], [27].
На головній сторінці відображаються останні новини з різних тематичних
розділів, що допомагає користувачам швидко ознайомитися з актуальними
подіями. Крім того, додано кілька віджетів:
 свіжі публікації,
 популярні теми,
 пошуковий рядок для швидкого знаходження потрібної інформації.
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

Для покращення навігації реалізовані меню з категоріями новин і швидкими
посиланнями на важливі розділи сайту. Також налаштовано адаптивне меню, яке
зручно використовувати на мобільних пристроях [29].
Вся структура побудована з урахуванням SEO-вимог, щоб пошукові системи
легко індексували контент сайту [30].
4.4. Додавання Vue.js до сайту
Хоча WordPress сам по собі не використовує Vue.js, його можна
підключити до окремих частин сайту. У цьому проєкті Vue.js було використано
для реалізації динамічного пошуку новин без перезавантаження сторінки. Для
цього створено окремий компонент Vue, який підключається на сторінку через
shortcode або як скрипт у темі.
Компонент надсилає запит до API WordPress (wp-json/wp/v2/posts),
отримує результати і швидко показує їх користувачу без оновлення сторінки.
Такий підхід робить взаємодію з сайтом більш сучасною та зручною.
4.5. Інтеграція аналітики
Для відстеження кількості відвідувачів і переглядів новин було підключено
Google Analytics. Це дозволяє аналізувати трафік, джерела переходів, поведінку
користувачів на сайті. Код аналітики додано через спеціальний плагін або вручну
у файл теми.
4.6. Тестування сайту
Сайт було протестовано на різних пристроях: комп’ютерах, смартфонах і
планшетах. Основна увага приділялася правильному відображенню сторінок,
роботі пошуку, швидкості завантаження. Vue-компонент для пошуку також
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

перевірено: він швидко реагує на запити і не перевантажує сервер. Було
виправлено кілька помилок відображення на мобільних пристроях і налагоджено
кешування сторінок.
4.7. Підготовка сайту до публікації
Після завершення основних етапів розробки новинного сайту важливо
належним чином підготувати його до публічного запуску. Цей етап включає
низку технічних і контентних дій, спрямованих на забезпечення стабільної,
безпечної та ефективної роботи ресурсу для кінцевих користувачів.
Передусім було проведено загальне очищення сайту від тестового
контенту, який використовувався на етапі розробки. Було видалено фіктивні
новини, чернетки, непотрібні категорії та теги. База даних також очищена від
записів, які більше не використовуються, що дозволило зменшити навантаження
на сервер і прискорити запити.
Наступним кроком стала оптимізація коду та ресурсів. За допомогою
плагінів, таких як Autoptimize або WP Rocket, виконано об’єднання й мінімізацію
CSS- та JavaScript-файлів, що значно зменшило час завантаження сторінок.
Додатково активовано кешування як на рівні браузера, так і на рівні сервера, що
дозволяє зменшити кількість запитів до бази даних і підвищити загальну
продуктивність.
Було також перевірено коректність адаптивності на мобільних пристроях,
оскільки мобільний трафік становить більшість відвідувань новинних ресурсів.
Дизайн адаптовано так, щоб контент правильно відображався на різних розмірах
екранів, а кнопки та елементи навігації були зручні для торкання пальцем.
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

На завершальному етапі сайт протестовано в режимі інкогніто, з очищеним
кешем і cookies, а також з різних пристроїв і браузерів для виявлення можливих
помилок перед публікацією. Після остаточної перевірки сайт було опубліковано,
і він став доступним за обраним доменним іменем.
Завдяки цим діям ресурс не лише став візуально й функціонально готовим до
використання, але й відповідає технічним вимогам до сучасного новинного
сайту, зокрема в аспектах швидкодії, безпеки, зручності користування та SEO.
4.8. Висновки до розділу
Реалізація новинного сайту на основі WordPress з інтеграцією фронтенд-
фреймворку Vue.js дозволила створити сучасний, гнучкий та функціональний
веб-ресурс, який відповідає вимогам сучасного ринку та очікуванням
користувачів.
Поєднання традиційного CMS та сучасного фронтенду
Вибір WordPress як базової платформи обумовлений її широкою популярністю,
гнучкістю, доступністю численних тем і плагінів, а також простотою керування
контентом. WordPress є однією з найпоширеніших CMS у світі, що гарантує
підтримку, постійне оновлення та великий вибір додаткових інструментів для
розробників і редакторів.
Однак класична версія WordPress не завжди забезпечує найкращу продуктивність
та динамічність інтерфейсу, особливо для новинних сайтів, де важливі швидкість
відгуку та інтерактивність. Тому для покращення користувацького досвіду в
проєкті було інтегровано Vue.js — сучасний JavaScript-фреймворк, який дозволяє
реалізувати реактивні компоненти, швидке оновлення контенту без
перезавантаження сторінки, динамічні фільтри та інші інтерактивні елементи.
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

Поєднання WordPress і Vue.js дало змогу зберегти зручність управління
контентом через знайому CMS для редакторів, одночасно підвищуючи
продуктивність та якість UX для кінцевих користувачів.
Архітектура системи
Архітектура сайту базується на класичній клієнт-серверній моделі, де
WordPress працює як бекенд із базою даних MySQL, забезпечуючи збереження,
обробку і видачу контенту через REST API. Vue.js відповідає за фронтенд —
візуальне відображення, взаємодію користувача з інтерфейсом і обробку подій.
Такий розподіл обов’язків забезпечує розділення логіки та візуального
представлення, що підвищує масштабованість і підтримуваність коду. REST API
дозволяє у майбутньому розширювати функціонал, підключаючи мобільні
додатки або інші сервіси.
Адаптивність і кросплатформеність
Особливу увагу було приділено адаптивному дизайну сайту. В умовах
переважання мобільного трафіку (понад 60% відвідувачів) важливо, щоб сайт
однаково комфортно працював як на великих екранах десктопів, так і на
невеликих дисплеях смартфонів. За допомогою CSS-медіа-запитів і компонентів
Vue.js було реалізовано повністю адаптивний інтерфейс.
Інтерфейс підлаштовується під розмір екрана, змінюється структура меню,
шрифтів і зображень, що дозволяє забезпечити зручне читання і навігацію без
необхідності збільшувати або прокручувати сторінку. Крім того, були
застосовані оптимізації для швидкого завантаження та відображення на
мобільних мережах із повільним інтернетом.
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

Продуктивність і оптимізація
Для підвищення швидкості завантаження сторінок використовувались декілька
методів:
 Кешування даних на стороні сервера та клієнта для мінімізації часу
відповіді;
 Впровадження lazy loading для зображень — завантаження лише видимих
користувачу елементів;
 Оптимізація графічних файлів із конвертацією у сучасний формат WebP;
 Використання CDN (Content Delivery Network) для швидкого доступу до
статичних ресурсів з різних географічних точок;
 Мінімізація CSS та JavaScript файлів для зменшення обсягу переданих
даних.
Ці заходи разом забезпечують комфортне користування сайтом навіть при
високому навантаженні і великій кількості одночасних відвідувачів.
Безпека
Безпека сайту є одним із ключових аспектів, особливо для ресурсів із
відкритою взаємодією користувачів — коментарями, формами зворотного
зв’язку, реєстрацією. Впроваджені заходи безпеки включають:
 Використання HTTPS для шифрування даних між сервером і клієнтом;
 Встановлення плагінів безпеки для запобігання поширеним атакам (XSS,
CSRF, SQL-ін’єкції);
 Налаштування Content Security Policy (CSP) для контролю зовнішніх
ресурсів;
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

 Регулярне оновлення ядра WordPress і плагінів для усунення відомих
вразливостей;
 Використання CAPTCHA для форм, що мінімізує автоматичні спам-атаки.

SEO-оптимізація
Для підвищення видимості сайту в пошукових системах був застосований
комплекс заходів SEO-оптимізації:
 Коректна структура URL та ЧПУ (читаємі посилання);
 Встановлення та налаштування плагіна Yoast SEO, який допомагає
автоматично генерувати мета-теги, карту сайту, робити аналіз контенту та
покращувати семантику сторінок;
 Впровадження мікророзмітки Schema.org для кращого розуміння
пошуковими системами структури даних;
 Оптимізація швидкості завантаження, що також впливає на рейтинг у
пошукових результатах;
 Забезпечення адаптивності для мобільних пристроїв, що є важливим
фактором ранжування.
Зручність користування
Інтерфейс розроблено з урахуванням принципів UX/UI, що дозволяє
забезпечити логічну і просту навігацію, швидкий доступ до інформації,
читабельність і приємний вигляд. Використання Vue.js дозволило реалізувати
миттєве оновлення контенту без перезавантаження сторінок, динамічні фільтри і
швидкий пошук.
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

Також забезпечена доступність для користувачів із різними можливостями:
підтримка клавіатурної навігації, контрастних кольорів і ARIA-атрибутів.
Перспективи розвитку
Розроблена платформа має достатній потенціал для подальшого розвитку. В
майбутньому можна додати:
 Розширені функції персоналізації контенту з використанням AI і
машинного навчання для рекомендацій новин;
 Підключення push-повідомлень для оперативного інформування
користувачів;
 Розвиток системи коментування з модерацією та рейтингами;
 Інтеграція з соціальними мережами для розширення аудиторії;
 Розробка мобільних додатків на основі існуючого API.

Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

Висновки
У межах випускної роботи було реалізовано повноцінний проєкт створення
новинного сайту із застосуванням сучасних вебтехнологій. Основною метою
дослідження було розробити функціональний, адаптивний та зручний у
користуванні інформаційний ресурс, що відповідає актуальним вимогам
цифрового середовища та користувацьким очікуванням.
У теоретичній частині було проаналізовано сучасний стан ринку новинних
сайтів в Україні, охарактеризовано цільову аудиторію та виділено ключові
вимоги до структури, дизайну та функціоналу медіаресурсів. Було обґрунтовано
вибір технологій — Vue.js як фронтенд-фреймворку, WordPress як headless CMS.
На етапі проєктування було визначено функціональні та нефункціональні
вимоги до сайту, розроблено інформаційну архітектуру, побудовано прототипи
інтерфейсів у Figma та підібрано візуальну стилістику відповідно до принципів
UX/UI-дизайну.
У практичній частині проєкту реалізовано інтерфейс користувача з
підтримкою адаптивного дизайну, налаштовано інтеграцію з API WordPress,
реалізовано систему категоризації та фільтрації новин, функцію пошуку,
сторінки новин та адміністративний інтерфейс для керування контентом.
Особливу увагу приділено оптимізації швидкодії, безпеці та зручності
використання.
Також було розглянуто шляхи подальшого розвитку сайту, зокрема
впровадження персоналізованих рекомендацій, підтримки офлайн-доступу через
PWA, мультимовності та розширеної аналітики.
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

Результатом роботи став ефективний, продуктивний і зручний у
використанні новинний портал, здатний конкурувати з існуючими рішеннями на
ринку. Отримані знання та практичні навички під час виконання проєкту можуть
бути застосовані для реалізації інших типів контентних сайтів або розвитку
даного проєкту до повноцінного комерційного продукту.

Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

Список використаних джерел
1. Шевченко, В. І. Основи інформаційної архітектури вебсайтів. — Київ:
Видавництво "Освіта", 2018. — 256 с.
2. Ковальчук, О. В. Веб-дизайн і юзабіліті: сучасні підходи. — Львів:
Видавництво ЛНУ, 2020. — 312 с.
3. Пилипчук, М. І. Розробка адаптивних вебінтерфейсів. — Харків:
Видавництво "Техніка", 2019. — 280 с.
4. Цимбалюк, І. С. SEO-оптимізація вебресурсів: теорія та практика. — Київ:
Кондор, 2021. — 200 с.
5. Офіційний сайт WordPress. Документація українською. URL:
https://uk.wordpress.org/support/
6. Офіційна документація Vue.js українською. URL: https://uk.vuejs.org/
7. Stepanenko, I. P. Web Application Security. Kyiv: Dialectics Publishing, 2020.
— 230 p.
8. Bondarenko, S. V. Modern Methods of Web Resource Optimization. Lviv: LNU
Publishing, 2022. — 150 p.
9. Український портал веброзробників. Практичні поради з WordPress. URL:
https://wp-ua.com/
10. Kozak, A. M. Responsive Web Design: Developer's Guide. Kyiv: Media Print,
2019. — 270 p.
11. Melnyk, V. I. Website Speed Optimization. Kharkiv: IT Publishing, 2021. —
190 p.
12. Google Ukraine. Mobile Optimization Guidelines. URL:
https://support.google.com/webmasters/answer/6001109?hl=uk
13. WP Security Ukraine. Basics of WordPress Protection. URL:
https://wpsecurity.com.ua/
Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

14. Ivanenko, T. M. User Interface Development with Vue.js. Kyiv: Kyiv University
Publishing, 2023. — 220 p.
15. Lytvynenko, O. S. Professional Web Design: From Prototype to Implementation.
Lviv: TechBooks, 2022. — 300 p.
16. Українська Вікіпедія. WordPress. URL:
https://uk.wikipedia.org/wiki/WordPress
17. Prometheus Platform. Basic Web Development Course (Ukrainian). URL:
https://prometheus.org.ua/courses/
18. Kovalenko, D. P. SEO for Ukrainian Websites: Features and Recommendations.
Kyiv: Informatics Publishing, 2020. — 180 p.
19. Ukrainian Frontend Portal. Using Vue.js in Web Projects. URL: https://vue.ua/
20. Official Yoast SEO Documentation. URL: https://yoast.com/uk/seo-blog/
21. WP Rocket. WordPress Performance Optimization Plugin. URL: https://wp-
rocket.me/
22. Autoptimize. Plugin for CSS & JS Optimization. URL:
https://wordpress.org/plugins/autoptimize/
23. Smashing Magazine. Simplicity in UI Design.
https://www.smashingmagazine.com/2018/06/ux-design-principles-process/
24. Adobe XD Ideas. Structure and Navigation in UX. https://xd.adobe.com/ideas/
25. A List Apart. Responsive Web Design Basics.
https://alistapart.com/article/responsive-web-design/
26. UX Collective. Navigation Patterns for Better UX.
https://uxdesign.cc/navigation-ux-patterns-2021-d40a57e20b5b
27. LogRocket Blog. Using Vue.js for Better UX. https://blog.logrocket.com/how-
to-build-a-spa-with-vue-js/

Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

Додаток А
Vue.js компонент новинної стрічки (NewsFeed.vue):
javascript
КопироватьРедактировать
<template>
<div>
<input v-model="searchQuery" placeholder="Пошук новин" />
<ul>
<li v-for="news in filteredNews" :key="news.id">
{{ news.title }}
</li>
</ul>
</div>
</template>

Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

Додаток Б
PHP-функція для створення REST API маршруту:
php
КопироватьРедактировать
add_action('rest_api_init', function () {
register_rest_route('custom/v1', '/news', array(
'methods' => 'GET',
'callback' => 'get_news_data',
));
});

function get_news_data() {
$posts = get_posts(['numberposts' => 10]);
$data = [];
foreach ($posts as $post) {
$data[] = [
'id' => $post->ID,
'title' => $post->post_title,
'content' => $post->post_content
];
}
return $data;
}

Арк.
ЧДТУ 211982.005 ПЗ
4
З мн. Арк. № докум. Підпис Дата

Репозиторій ЧДТУ