ChSTU repository
ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/6913| Title: | Інформаційний web-ресурс новин кіберспорту |
| Authors: | Підкуйко, Олександр Ігорович Завгородній, Нікіта Ігорович |
| Keywords: | web-ресурс;інформаційна система;кібеспорт;дизайн;ігрова індустрія |
| Issue Date: | 5-Jun-2025 |
| Abstract: | У сучасному світі стрімкого розвитку технологій інтернет – це одна з невід’ємних частин життя сучасної людини, однією з функцій якого є отримання інформації з новинних джерел. Стрімкого розвитку набула така галузь як кіберспорт – феномен що з хобі геймерів перетворився у повноцінну індустрію турнірів з багатомільйонними призами та аудиторією. Саме через це зростає попит в створенні новинних сайтів які швидко висвітлюють останні новини не лише про самі кіберспортивні турніри а також і про індустрію ігор в цілому. Проте попри значний інтерес аудиторії вітчизняний сегмент інформаційних веб-ресурсів не завжди може відповідати міжнародним стандартам зручності використання або іншим вимогам, що створює необхідність у створенні нового інформаційного ресурсу який не лише надавав би доступ до останніх новий а й був зручним у його використанні. Об’єктом дослідження є процес створення такого веб-ресурсу та його функціонування. Предметом дослідження виступає розробка веб-ресурсу для публікації кіберспортивних та ігрових новин з урахуванням вимог до дизайну створюваного веб-ресурсу, зручності використання сайту, актуальності новин кіберспорту та ігрової індустрії в цілому. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/6913 |
| Appears in Collections: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| РЕП_БАК_Завгородній_WEBС-2111.pdf Restricted Access | 1.35 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра інформаційних технологій проектування
Пояснювальна записка
до кваліфікаційної роботи
бакалавра
(освітньо-кваліфікаційний рівень)
на тему: «Інформаційний web-ресурс новин кіберспорту»
Виконав: студент 4 курсу, групи WEBС-
2111
спеціальності 126 – «Інформаційні
технології проектування»
(шифр і назва спеціальності)
освітня програма «Інформаційні
технології проектування»
Завгородній Нікіта
Керівник Phd Підкуйко О.І.
(прізвище та ініціали)
Рецензент___________
(прізвище та ініціали)
Черкаси 2025 року
Перелік Скорочень, умовних познак
HTML – HyperText Markup Language.
CSS – Cascading Style Sheets.
JS – JavaScript.
UI – User Interface (інтерфейс користувача).
API – Application Programming Interface.
FaQ – Frequently Asked Questions (поширенні запитання).
ВСТУП
У сучасному світі стрімкого розвитку технологій інтернет – це одна з
невід’ємних частин життя сучасної людини, однією з функцій якого є
отримання інформації з новинних джерел. Стрімкого розвитку набула така
галузь як кіберспорт – феномен що з хобі геймерів перетворився у повноцінну
індустрію турнірів з багатомільйонними призами та аудиторією. Саме через це
зростає попит в створенні новинних сайтів які швидко висвітлюють останні
новини не лише про самі кіберспортивні турніри а також і про індустрію ігор
в цілому.
Проте попри значний інтерес аудиторії вітчизняний сегмент
інформаційних веб-ресурсів не завжди може відповідати міжнародним
стандартам зручності використання або іншим вимогам, що створює
необхідність у створенні нового інформаційного ресурсу який не лише надавав
би доступ до останніх новий а й був зручним у його використанні.
Об’єктом дослідження є процес створення такого веб-ресурсу та його
функціонування.
Предметом дослідження виступає розробка веб-ресурсу для публікації
кіберспортивних та ігрових новин з урахуванням вимог до дизайну
створюваного веб-ресурсу, зручності використання сайту, актуальності новин
кіберспорту та ігрової індустрії в цілому.
Основні завдання роботи:
1. Дослідити вимогу до сучасного новинного сайту;
2. Розробити архітектуру на структуру сайту;
3. Забезпечити адаптивність інтерфейсу для різних пристроїв;
4. Протестувати сайт на працездатність та зручність використання.
Методами дослідження є аналіз і порівняння існуючих новинних ігрової
тематики (кіберспорт, ігрові новини), інструменти веб розробки (html, js, css),
забезпечення адаптивності сайту через медіа запити та інші методи реалізації,
ручне тестування.
Практичним значенням сайту являється надання актуальних новин
кіберспорту та ігрової індустрії. Такий сайт може бути корисним для різних
організацій, команд, стрімерів, фан-спільнот, спеціалізованих ЗМІ, тощо.
Система дозволятиме зручно переглядати новини, майбутні кіберспортивні
турніри у вигляді таблиці, та огляди ігор. У разі необхідності система буде
допрацьована з використанням соціальних мереж або зовнішніх API
(наприклад використання Steam API для реалізації чартів ігор).
Структура роботи складається зі вступу, трьох розділів, висновку, списку
джерел та додатків. Загальний обсяг роботи становить _ сторінок, у ній
міститься _ рисунків та _ таблиць. Для підготовки роботи було використано _
веб ресурсів, кількість додатків – 1.
1. ОБҐРУНТУВАННЯ ОБ’ЄКТУ РОЗРОБКИ та ОПИС
ПРЕДМЕТНОГО СЕРЕДОВИЩА інформаційного веб ресурсу
новин кіберспорту
1.1. Аналіз Предметної Області
Сфера діяльності сайту ігрових новин охоплює інформаційне
забезпечення геймерів, розробників ігор, інвесторів і широкого кола людей,
зацікавлених у світі відеоігор. Основною метою такої платформи є оперативне
висвітлення подій у геймінговій індустрії, надання корисної та цікавої
інформації, а також формування спільноти, об'єднаної спільними інтересами.
Основні аспекти діяльності:
● Новини:
o Анонси нових ігор.
o Релізи, оновлення та доповнення.
o Події у світі кіберспорту.
o Інтерв'ю з розробниками та експертами галузі.
● Аналітика та огляди:
o Детальні огляди ігор (рев'ю).
o Порівняння платформ і обладнання.
o Аналіз трендів у розробці ігор та ринку загалом.
● Контент для спільноти:
o Геймерські гіди та інструкції.
o Рейтинг ігор за жанрами чи платформами.
o Статті з порадами для новачків і досвідчених гравців.
● Інтерактивні елементи:
o Форуми для спілкування.
o Проведення опитувань і голосувань.
o Організація конкурсів і розіграшів.
1.2. Аналіз існуючих аналогів
Серед найбільш популярних аналогів можна виділити 3
найпопулярніші:
IGN (Imagine Games Network) — це один із найбільших і
найвідоміших сайтів, присвячених відеоіграм, кіно, телебаченню, коміксам та
поп-культурі загалом. Створений у 1996 році, IGN став глобальним медіа-
брендом, який охоплює багатомільйонну аудиторію по всьому світу.
Основні характеристики IGN:
1. Контент:
○ Огляди ігор: IGN відомий своїми детальними рев’ю відеоігор, які
охоплюють різні платформи, зокрема PlayStation, Xbox, PC,
Nintendo, а також мобільні ігри.
○ Новини: Оперативно висвітлює найсвіжіші події в індустрії ігор та
розваг.
○ Відеоконтент: Пропонує трейлери, стріми, подкасти, відеоогляди,
інтерв'ю з розробниками та спеціальні шоу.
○ Культура: Охоплює теми кіно, телесеріалів, коміксів, технологій
та всього, що цікавить геймерів.
2. Цільова аудиторія: IGN орієнтований на молодь та дорослих, які
цікавляться відеоіграми та попкультурою. Бренд охоплює глобальну
аудиторію завдяки локалізованим версіям сайту в різних країнах
(Японія, Німеччина, Італія тощо).
3. Функціонал:
○ Оцінки ігор за 10-бальною шкалою, які мають значний вплив на
аудиторію.
○ Рейтинги фільмів, серіалів і апаратного забезпечення.
○ Секція для геймерських гідів та інструкцій.
4. Вплив: IGN має значний авторитет у геймінговій індустрії. Його
рейтинги та огляди часто впливають на рішення гравців щодо купівлі
ігор.
5. Монетизація: Платформа заробляє на рекламі, партнерствах,
спонсорованому контенті та великих подіях, як-от трансляції E3,
Gamescom та інших геймінгових шоу.
Рисунок 1 - Головна сторінка сайту IGN
GameSpot — це одна з провідних медіаплатформ, присвячених
відеоіграм, новинам і розвагам. Заснований у 1996 році, сайт став важливим
джерелом інформації для геймерів та ентузіастів технологій. GameSpot
належить компанії Fandom і конкурує з іншими великими платформами,
такими як IGN.
Основні характеристики GameSpot:
1. Контент:
○ Огляди ігор: GameSpot пропонує детальні рев’ю нових ігор для
всіх платформ, використовуючи власну 10-бальну шкалу.
○ Новини: Висвітлює анонси, оновлення, розробки та події в
індустрії відеоігор.
○ Відеоматеріали: Пропонує трейлери, ігрові гіди, інтерв'ю з
розробниками та огляди обладнання.
○ Кіберспорт і технології: Публікації про кіберспортивні події,
огляди консолей і ПК-компонентів.
2. Цільова аудиторія:
○ Геймери різного віку, які цікавляться новинами, професійними
оглядами та рекомендаціями.
○ Гравці, які шукають аналітичні матеріали та інструкції для
покращення свого ігрового досвіду.
3. Функціонал:
○ Система оцінок ігор та обладнання, яка допомагає користувачам
приймати зважені рішення.
○ Спільнота: форуми для обговорення ігор, платформ і технологій.
○ Розділи для різних платформ (PC, PlayStation, Xbox, Nintendo) з
тематичним контентом.
4. Вплив:
○ GameSpot є авторитетним ресурсом, відомим своєю
об'єктивністю та якістю аналітики.
○ Його огляди та новини часто цитуються в ігрових медіа та
впливають на рішення гравців.
5. Монетизація: Платформа отримує дохід від реклами, спонсорованих
матеріалів, відео та партнерських програм.
Рисунок 2 - головна сторінка сайту Gamespot
Polygon — це сучасний онлайн-журнал, присвячений відеоіграм,
розвагам та культурним аспектам ігрової індустрії. Заснований у 2012 році
компанією Vox Media, Polygon став одним із ключових ресурсів для геймерів,
які шукають не лише новини, але й глибокий аналіз та культурний контекст.
Основні характеристики Polygon:
1. Контент:
○ Аналітика і статті: Polygon фокусується на глибоких розглядах
тем, пов’язаних із відеоіграми, культурою та суспільством.
○ Новини: Висвітлення актуальних подій у геймінгу, технологіях,
кіно та серіалах.
○ Огляди: Відгуки про ігри, обладнання та розважальний контент із
суб'єктивним підходом.
○ Культура: Великий акцент на темах інклюзивності, соціального
впливу ігор та їх культурного значення.
2. Цільова аудиторія:
○ Геймери, які цікавляться не лише іграми, але й культурними,
естетичними та суспільними аспектами індустрії.
○ Люди, які цінують якісну аналітику, розгорнуті статті та
унікальний погляд на геймінг.
3. Функціонал:
○ Інтерактивний контент: подкасти, відео, колонки авторів.\n -
Секції для ігор, технологій, кіберспорту та медіарозваг.
○ Статті, які часто поєднують геймінг із соціальними чи
культурними проблемами.
4. Вплив:
○ Polygon вирізняється своїм індивідуальним стилем подачі, що
відрізняється від традиційних ігрових платформ.\n - Платформа
відома своєю увагою до інклюзивності, що приваблює
різноманітну аудиторію.
5. Монетизація:
○ Дохід генерується через рекламу, підписки та спонсорський
контент.
Рисунок 3 - Головна сторінка сайту Polygon
Порівняння аналогів:
Характеристи IGN GameSpot Polygon
ка
рік 1996 1996 2012
заснування
основний Новини, огляди, Новини, огляди, Аналітика, новини,
контент трейлери, рейтинги, гіди, кіберспорт статті про культуру,
подкасти огляди
Цільова Широке коло Геймери, Геймери, які
аудиторія геймерів і фанатів ентузіасти цікавляться
поп-культури технологій культурними та
соціальними аспектами
фокус Універсальність, Об'єктивність, Глибокий аналіз,
актуальність, аналітичність, культурний контекст,
інтерактивність форуми соціальний вплив
Основні PC, PlayStation, PC, PlayStation, Всі платформи, акцент
платформи Xbox, Nintendo, Xbox, Nintendo на культурних і
мобільні ігри суспільних аспектах
Відеоконтент Трейлери, Відеоогляди, Подкасти, відео,
відеоогляди, гіди, аналітичні авторські шоу
інтерв'ю, стріми матеріали
Монетизація Реклама, спонсори, Реклама, Реклама, підписки,
партнерства спонсори, відео спонсорований контент
контент
Унікальні Масштабність, Висока Акцент на
особливості багатомовність, об'єктивність і інклюзивності,
великий вплив на популярність соціальних та
ринок серед геймерів культурних аспектах
позиція на Один із лідерів Надійний і Нішовий ресурс із
ринку індустрії, глобальний авторитетний унікальним стилем
бренд ресурс подачі
1.3. Обґрунтування необхідності розробки
Індустрія комп’ютерних ігор та кіберспорту стрімко набуває
популярності серед інтернет користувачів, та займає одне з провідних місць у
сфері інтернет розваг. Щодня з’являються безліч нових анонсів ігор, оновлень,
аналітик та різноманітних досліджень так чи інакше пов’язаних з іграми,
зокрема анонси кіберспортивних турнірів. Всі ці події мають величезний
інтерес серед зацікавлених осіб як аналітики, фанати, або просто геймери. В
умовах цього ажіотажу серед ігрової індустрії виникає потреба створення
зручного у використанні веб-ресурсу який зможе охопити потрібну кількість
інформації.
Розробка такого сайту охопить такі категорії інформації як:
● Новини комп’ютерних ігор (оновлення, анонси, патчі, тощо);
● Анонси турнірів та подій у сфері кіберспорту;
● Огляди ігор;
● Різноманітні дослідження пов’язані з ігровою індуструєю.
Розробка такого веб-ресурсу є актуальною та необхідною.
Такий сайт повинен мати:
1. Адаптивний інтерфейс для перегляду на будь яких пристроях;
2. Можливість використання пошуку новин;
3. Зручний перегляд анонсованих турнірів (наприклад: у вигляді таблиці);
4. Підтримка мультимедіа-контенту (зображення, відео, тощо).
Кінцева мета такого веб-ресурсу – стати надійним та зручним
інформаційним майданчиком або мостом для гравців, аналітиків, фанатів, та
всіх інших хто зацікавлений в сфері ігрової індустрії та кіберспорту. Його
практичне значення полягає у тому щоб створити середовища для швидкого
доступу до актуальної інформації яке можна використовувати як у приватних
спільнотах, так і на рівні організацій що працюють у сфері ігрового контенту.
Таким чином розробка такого веб-ресурсу є обґрунтованою технічно,
соціально доцільною та інформаційно необхідною.
1.4. Постановка задачі
Назва проекту: Critical hit – новинний сайт ігрової індустрії та
кіберспорту.
Мета проекту: створення зручної, функціональної та інформативної
платформи для публікації матеріалів, що стосуються світу відеоігор,
технологій та поп-культури.
Основні завдання для виконання:
1. Розробка базової структури сайту: створити головну сторінку, де
буде розміщено основні новини, а також окремі вкладки для різних
типів новин (наприклад: новини ігор, огляди, тощо).
2. Оптимізація для різних пристроїв: забезпечити адаптивність сайту,
щоб він коректно відображався на екранах різного розміру (ПК,
смартфони, планшети).
3. Реалізація пошукової системи: додати функцію пошуку, яка
допоможе користувачам швидко знаходити потрібний контент.
4. Забезпечення швидкості завантаження: оптимізувати ресурси сайту
для швидкого завантаження сторінок, особливо на мобільних
пристроях.
5. Дизайн та юзабіліті: розробити сучасний і привабливий дизайн, який
відповідатиме тематиці ігрової індустрії та враховуватиме потреби
цільової аудиторії.
6. Тестування та запуск: перевірити коректність роботи всіх елементів
сайту, виправити можливі помилки та підготувати сайт до запуску в
публічний доступ.
Очікувані результати:
У рамках проекту буде створено простий, функціональний веб-сайт для
надання актуальної інформації широкій аудиторії. Ресурс забезпечить
комфортний доступ до матеріалів з ігрової індустрії, сприятиме формуванню
лояльної спільноти геймерів та просуванню нових ігор. Проект орієнтований
на базові потреби користувача, тому основна увага приділяється простоті
використання, швидкості завантаження та доступності контенту. Успішне
завершення цього проекту є важливим кроком на шляху до отримання
практичного досвіду в розробці веб-ресурсів.
2. АНАЛІЗ ІНСТРУМЕНТІВ та ЗАСОБІВ РОЗРОБКИ інформаційного
веб ресурсу новин кіберспорту
2.1. Обгрунтування технології та засобів реалізації
Для реалізації проекту веб-ресурсу новин кіберспорту було обрано
наступні технології розробки:
HTML — стандартизована мова розмітки документів для перегляду веб-
сторінок у браузері. Браузери отримують HTML документ від сервера за
протоколами HTTP/HTTPS або відкривають з локального диска, далі
інтерпретують код в інтерфейс, який відображатиметься на екрані монітора.
CSS — це спеціальна мова стилю сторінок[en], що використовується для
опису їхнього зовнішнього вигляду. Самі ж сторінки написані мовами
розмітки даних. CSS є основною технологією всесвітньої павутини, поряд із
HTML та JavaScript.
JS — динамічна, об'єктно-орієнтована прототипна мова програмування.
Реалізація стандарту ECMAScript. Найчастіше використовується для
створення сценаріїв веб-сторінок, що надає можливість на боці клієнта
(пристрої кінцевого користувача) взаємодіяти з користувачем, керувати
браузером, асинхронно обмінюватися даними з сервером, змінювати
структуру та зовнішній вигляд веб-сторінки.
На сьогоднішній день цього списку мов програмування достатньо щоб
створити зручний у експлуатації веб-ресурс з усіма необхідними функціями.
Як середовище розробки сайту було обрано VS code через його зручність
інтеграції з будь якою мовою програмування та допомогою в підставці коду.
Visual Studio Code, який також зазвичай називають VS Code — це
редактор початкового коду, створений Microsoft із Electron Framework для
Windows, Linux і macOS. Функції включають підтримку налагодження,
підсвічування синтаксису, інтелектуальне завершення коду, фрагменти,
рефакторинг коду та вбудований Git. Користувачі можуть змінювати тему,
комбінації клавіш, параметри та встановлювати розширення, які додають
функціональність.
2.2. Проектування інтерфейсу
Під час розробки проекту було створено логічно організовану файлову
структуру сайту, що дозволяє ефективно орієнтуватися в його компонентах.
Така структура забезпечує зручність у навігації серед файлів, спрощує доступ
до необхідних модулів і дозволяє швидко вносити зміни в необхідний код.
Чітке розмежування між різними частинами системи – шаблонами, стилями,
скриптами, логікою та ресурсами – позитивно впливає на продуктивність
роботи над проектом і полегшує подальший супровід та масштабування веб
сайту.
Рисунок 4 – файлова система проекту
Першим етапом розробки стала реалізація головної сторінки веб сайту,
яка є ключовим елементом у структурі всього ресурсу. Саме з неї починається
знайомство користувача з проектом, тому особливу увагу було присвячено її
інформативності, зручності та візуальному оформленню.
На головній сторінці передбачено розміщення таких важливих
структурних елементів:
1. Header з навігаційною панеллю, який забезпечує швидкий доступ до
основних розділів сайту.
2. Секція з короткою інформацією про сайт, де подано загальну мету
ресурсу.
3. Таблиця турнірів для представлення майбутніх подій в сфері
кіберспорту.
4. Секція новин, де показано декілька новинних блоків для ознайомлення
користувачами.
5. Секція оглядів, де показано декілька блоків оглядів для ознайомлення
користувачами.
6. Footer, який містить юридичні відомості (наприклад копірайт).
Рисунок 5 – приклад коду головної сторінки
Для створення UI веб сайту було розроблено окремий css-файл, у якому
містяться стилі, що відповідають за візуальне оформлення всіх елементів
сторінки. У даному файлі було реалізовано стилізація блоків веб-ресурсу,
зокрема заголовків, кнопок, навігаційної панелі, секцій із контентом, а також
адаптивне відображення сторінок на різних пристроях. Такий підхід дозволяє
централізовано керувати зовнішнім виглядом сайту, спрощує подальше
редагування дизайну та забезпечує дотримання єдиного стилю оформлення на
всіх сторінках веб сайту.
Крім того для реалізації динамічної поведінки елементів (скриптів) сайту
було створено окремий JS-файл, у якому зосереджено всі скрипти що
забезпечують інтерактивність інтерфейсу. Зокрема у цьому файлі реалізовано
функцію пошукового поля для знаходження потрібних новин або оглядів по
назві. Завдяки структурованому підходу до організації коду, скриптова
частина є зрозумілою, зручною для підтримки, та масштабування у
майбутньому.
Рисунок 6 – приклад коду css-файлу
Рисунок 7 – приклад коду js-файлу
У процесі розробки внутрішніх сторінок сайту, таких як «Новини»,
«Огляди» та інших, було прийнято рішення використовувати уніфіковану
структуру верстки. Це дало змогу забезпечити єдиний візуальний стиль у
межах усього веб ресурсу, що, у свою чергу, позитивно впливає на зручність
навігації та сприйняття контенту користувачами. Єдина структура інтерфейсу
сприяє зниженню когнітивного навантаження та усуває можливі труднощі у
взаємодії з сайтом.
Побудова кожної наступної сторінки здійснювалася за наступною
методикою:
1. використовувався блок header, що був попередньо реалізований на
головній сторінці, - він містить навігаційне меню та іншу інформацію.
2. За потреби вміст основної частини сторінки адаптувався або
створювався вручну (як наприклад в інформаційних вкладках новий
або оглядів) відповідно до функціонального призначення конкретної
вкладки.
3. Наприкінці додавалася секція footer для завершеного вигляду основної
структури верстки.
Таким чином, всі головні навігаційні сторінки, а також сторінки
«Контакти» і «FaQ» були створені шляхом копіювання й повторного
використання вже розроблених структурних елементів із головної сторінки, із
подальшою модифікацією центрального блоку відповідно до типу контенту.
Такий підхід забезпечив ефективність розробки, цілісність інтерфейсу та
зменшив кількість потенційних помилок при верстці сторінок.
Рисунок 8 – приклад зміни основного блоку для сторінки «Новини»
Сторінки новин або оглядів були розроблені за індивідуальним підходом,
через те що вони мають інформаційну структуру та їхнє функціональне
призначення суттєво відрізняється від минулих сторінок. Єдиним винятком
серед елементів для використання на цих сторінках були header і footer,
оскільки вони мають важливе значення у верстці сайту для забезпечення
цілісності дизайну, забезпечення зручності навігації, та підтримки єдиного
стилю оформлення сайту.
Такий підхід дозволив створити інформативні, функціонально наповнені
сторінки, що відповідають сучасним вимогам до контенту у сфері новин та
оглядів, зберігаючи при цьому візуальну єдність усієї платформи.
Рисунок 9 – Приклад інформаційного блоку сторінки новини
Повний код всієї файлової структури можна переглянути у додатку А.
3. ОПИС ПРОГРАМНОЇ РЕАЛІЗАЦІЇ інформаційного веб ресурсу
новин кіберспорту
3.1. Інструкція користувача
1. Вступ
Цей сайт створено для інформування користувачів про актуальні події у
світі відеоігор і кіберспорту. Він містить новини, огляди, контактну
інформацію, та FaQ розділ. Ця інструкція призначена для кінцевих
користувачів сайту.
2. Структура сайту
Основна структура сайту наступна:
Головна сторінка сайту – містить загальну інформацію, таблицю
турнірів, деякі новини та огляди.
Новини – містить всі вкладки новин.
Огляди – містить всі вкладки оглядів.
Контанти – сторінка з контактною інформацією.
FaQ – сторінка з переліком поширених запитань.
3. Як користуватися сайтом
Перегляд головної сторінки:
Відкрити головну сторінку за посиланням
https://iveess.github.io/diplomaproject/index.html.
На головній сторінці представлено таблицю турнірів, декілька блоків
новин та декілька блоків оглядів.
Рисунок 10 – приклад головної сторінки сайту
Перегляд новин:
Перейти до вкладки новин через навігаційне меню.
Обрати серед блоків новину.
Рисунок 11 – сторінка з новинами
Рисунок 12 – приклад обраної сторінки з новиною
Перегляд оглядів:
Перейти на сторінку оглядів.
Обрати один з запропонованих оглядів.
Рисунок 13 – сторінка оглядів
Рисунок 14 – інформаційна сторінка огляду
Перегляд контактної інформації та FaQ:
Перейди на сторінку «Контакти».
За бажанням залишити свою контактну інформацію та відгук.
Переглянути контактну інформацію.
Рисунок 15 – сторінка «Контакти»
Перейти на сторінку «FaQ».
Переглянути часті запитання.
Рисунок 16 – сторінка «FaQ»
4. Структура коду (для розробників)
/styles/styles.css — містить усі стилі для сайту.
scripts.js — реалізує взаємодію елементів.
3.2. Тестування веб-ресурсу
Загальна таблиця ручного тестування сайту:
Стату
Кроки Очікуваний Фактичний
№ Назва тесту с (✅ /
користувача результат результат ❌)
Головна
Завантажен
Відкрити сайт у сторінка Завантажуєтьс
1 ня головної ✅
браузері завантажуєтьс я без помилок
сторінки
я без помилок
Перевірити
Header з
наявність Все
Перевірка навігацією
2 логотипу, меню, відображаєтьс ✅
header відображаєтьс
коректні я без помилок
я правильно
посилання
Перевірка Відображаєтьс
Прокрутити до Текст
секції я текст з
3 блоку з описом відображаєтьс ✅
короткої інформацією
сайту я правильно
інформації про сайт
Відображають
Перевірка
ся 2–3 останні Відображають
секції Прокрутити до
4 новини з ся 3 останні ✅
останніх секції новин
картинками й новини
новин
посиланнями
Перевірка
Відображають Відображають
секції Прокрутити до
5 ся останні ся останні ✅
останніх секції оглядів
огляди огляди
оглядів
Таблиця
правильно
Перевірка Таблиця
Прокрутити до відображаєтьс
6 таблиці відображаєтьс ✅
таблиці я, має
турнірів я без помилок.
структуру,
стилі
Сторінка
Завантажен Натиснути на Сторінка
відкривається,
7 ня сторінки "Новини" у завантажуєтьс ✅
містить
новин навігації я
список новин
Відкривається Сторінка
Відкриття
Натиснути на відповідна відкривається,
8 окремої ✅
новину новинна текст видно
новини
сторінка добре
Завантажен Натиснути на Сторінка
Сторінка
9 ня сторінки "Огляди" у відкривається ✅
відкривається
оглядів навігації з оглядами
Відкривається Сторінка
сторінка з відкривається
Відкриття Натиснути на
10 повним без помилок, ✅
огляду гри конкретний огляд
текстом текст видно
огляду добре
Відповідь Відповідь
Розгортання Натиснути на
11 з’являється з'являється з ✅
FAQ пункту будь-яке питання
нижче анімацією
Нове
Перемиканн Клікнути на інше розгортається, Все працює як
12 ✅
я між FAQ питання попереднє описано
згортається
Текст
Введення Ввести ім’я в Текст видно
13 відображаєтьс ✅
імені поле добре
я
Текст
вводиться,
Валідний
Введення якщо ввести
14 Ввести email email ✅
email неправильно
вводиться
з'являється
повідомлення
Введення
Ввести довільне Відображаєтьс Текст видно
15 повідомлен ✅
повідомлення я повний текст повністю
ня
Натиснути
Поля Поля успішно
кнопку
Відправка очищуються, очищені,
16 «ВІДПРАВИТИ ✅
форми відправка відправка
ПОВІДОМЛЕНН
успішна працює
Я»
Відправка не
З'являється
Відправка з Натиснути виконується
підказка що
17 порожніми кнопку без або ✅
поле має бути
полями заповнення з’являється
заповнене
повідомлення
Відкрити сайт на При запуску
Відкрити будь якому Сайт на мобільному
сайт на мобільному відображаєтьс пристрої сайт
18 ✅
мобільному пристрої або я без помилок відображаєтьс
пристрої зменшити вікно або артефактів я без будь
браузера яких помилок
У ході ручного тестування веб-сайту було перевірено основні
функціональні та нефункціональні можливості веб-ресурсу. Усі тести
завершено з позитивним результатом. Жодних критичних чи незначних
помилок виявлено не було. Сайт працює стабільно, відповідає поставленим
вимогам, і може бути рекомендований на розгортання для кінцевих
користувачів.
ВИСНОВКИ
Головною метою кваліфікаційної роботи бакалавра було створення
лаконічного та простого сайту новин кіберспорту та ігрової індустрії, що
відповідає поставленим вимогам і цілям. Основна увага була приділена
зручності користувача та доступності контенту. Сайт забезпечує легкий
доступ до актуальних новин, турнірного календарю в вигляді таблиці, має
інтуїтивно зрозумілий інтерфейс та мінімалістичний дизайн.
Розробка включала аналіз потреб цільової аудиторії, вибір оптимальної
платформи для реалізації, а також впровадження сучасних веб-технологій для
забезпечення стабільної роботи сайту. У процесі виконання кваліфікаційної
роботи було закріплено на практиці знання з планування, верстки,
програмування, та тестування веб-ресурсів, що в свою чергу сприяло
поглибленню професійної підготовки та готовності до розв’язання більш
складних завдань у майбутній професійній діяльності.
За допомогою середовища Visual Studio Code та використанням таких мов як
HTML, CSS, та JavaScript було створено зручний та зрозумілій для
користувача веб-ресурс новин кіберспорту.
Сайт призначений для подання інформаційних знань новин в індустрії
кіберспорту та ігрової індустрії, що надає можливість різним зацікавленим
особам переглядати останні новини, графік турнірів, та огляди на різноманітні
ігри.
Створений сайт дозволяє користувачу зручно переглядати останні новини в
світі ігор та переглядати список кіберспортивних турнірів.
Сайт є сучасним та стилізований під сучасні потреби без навантажень
різноманітними кольорами або анімаціями які відволікають від важливої для
користувача інформації.
Перелік джерел та посилання
IGN – Video Game News, Reviews, and Walkthroughs. URL:
https://www.ign.com (дата звертання: 13.05.2025).
Video Games Reviews & News – Gamespot. URL: https://www.gamespot.com
(дата звертання: 13.05.2025).
Polygon: Your source for the latest in video games, sci-fi, fantasy, tabletop games,
anime, horror, books, and comics. URL: https://www.polygon.com (Дата
звертання 13.05.2025).
HTML Підручник. URL:
https://w3schoolsua.github.io/html/index.html#gsc.tab=0 (Дата звертання:
20.05.2025).
CSS Підручник. URL: https://w3schoolsua.github.io/css/index.html#gsc.tab=0
(Дата звертання: 20.05.2025).
JavaScript Підручник. Основи веб програмування. URL:
https://w3schoolsua.github.io/js/index.html (Дата звертання: 20.05.2025)
Стів Круг, Не змушуйте мене думати. URL: https://www.ux-ui.top/produkt-
uk/ne-zmushujte-mene-dumaty.html (Дата звертання: 18.05.2025).
МЕТОДИЧНІ РЕКОМЕНДАЦІЇ до підготовки кваліфікаційної роботи для
здобувачів освітнього ступеня «бакалавр» зі спеціальності 126 Інформаційні
системи та технології освітньої програми «Web-технології, Web-дизайн» усіх
форм навчання. протокол No 5 від 21.12.2021 р. URL:
https://drive.google.com/file/d/1v1X_1lJX_ZA2TfdPzUdiHb0fjn5M5NT1/view
(дата звертання: 13.05.2025).
How to Host a Website on GitHub For Free? Github pages. URL:
https://www.geeksforgeeks.org/how-to-host-a-website-on-github-for-free/ (Дата
звертання: 25.05.2025)
Люшенко Л.А. Хіцко Я.В. Розробка та аналіз вимог до програмного
забезпечення: курсове проєктування з дисципліни "Компоненти програмної
інженерії" Київ: КПІ ім. Ігоря Сікорського, 2020. – 63 с.
Соломін А.В. Веб-орієнтована розробка програмного забезпечення:
практикум Київ: КПІ ім. Ігоря Сікорського, 2018. – 131 с.
Коцовський В.М. Технологія програмування та створення програмних
продуктів: методичний посібник Ужгород: УжНУ, 2016. – 83 с.
Гіковатий В.М. Розробка WEB-додатків: робоча програма навчальної
дисципліни Харків: ХНЕУ ім. С. Кузнеця, 2016. – 42 с.
Жовтяк І.В., Добришин Ю.Є., Гаркуша В.В. Розробка WEB-застосувань
ASP.NET MVC на платформі .NET Core: методичний посібник Київ:
Університет «КРОК», 2020. – 80 с.
Ігнатюк К.Н.Д. Фронтенд-розробка: навчальний посібник Київ: Державний
університет інформаційно-комунікаційних технологій, 2024. – 70 с.
Полтавський національний технічний університет імені Юрія
Кондратюка Технології розробки програмного забезпечення: навчальний
посібник Полтава: ПолтНТУ, 2017. – 218 с.
Центральноукраїнський національний технічний університет WEB-
програмування. Частина 1 (frontend): навчальний посібник Кропивницький:
ЦНТУ, 2022. – 208 с.
Житомирський державний університет імені Івана Франка Розробка
електронного посібника для вивчення основ програмування: методичні
рекомендації Житомир: ЖДУ, 2015. – 60 с.
Національний університет «Києво-Могилянська академія» Проєктування
користувацького інтерфейсу: методичні вказівки Київ: НаУКМА, 2021. – 45
с.
Єгошина Г. А., Трофименко О. Г., Козін О. Б., Задерейко О. В., Плачінда
О. Є. Веб-технології та веб-дизайн: навчальний посібник Одеса: Фенікс, 2019.
– 284 с.
Готинчан Т. І. Основи веброзробки: HTML і CSS Чернівці: Чернівецький
національний університет, 2023. – 60 с.
Автори не вказані Основи веб-розробки Харків: Національний технічний
університет "Харківський політехнічний інститут", 2023. – 45 с.
Автори не вказані Основи web-програмування: навчальний посібник Дніпро:
Державний університет економіки і технологій, 2023. – 60 с.
Автори не вказані Програмування веб-застосувань (фронт-енд та бек-енд)
Львів: Видавництво Львівської політехніки, 2020. – 300 с.
Автори не вказані WEB-технології Київ: Національний технічний
університет України "КПІ ім. Ігоря Сікорського", 2020. – 100 с.
Gameverse - про відеоігри українською. URL: https://gameverse.com.ua (дата
звертання 23.05.2025