Репозиторій ЧДТУ
Репозиторій ЧДТУ зберігає і дозволяє легкий і відкритий доступ до всіх видів цифрового контенту, включаючи текст, зображення, анімовані зображення, MPEG і набори даних
Дізнатися більше
Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал:
https://er.chdtu.edu.ua/handle/ChSTU/6909| Назва: | Розробка аналогового та оновленого сайту по браузерній грі Ninja Warrior |
| Автори: | Карапетян , Анаіт Радіківна Лісненко, Владислав Юрійович |
| Ключові слова: | web-сайт;створення контенту;програмна реалізація;гра;сайт |
| Дата публікації: | 17-чер-2021 |
| Короткий огляд (реферат): | В кваліфікаційній роботі бакалавр обгрунтував необхідність створити аналоговий та оновлений сайт по браузерній грі Ninja Warrior. Бакалавр що виконував поставлену задачу навів вимоги до реалізації оновленого сайту. Також здійснив програмну реалізацію аналоговогота оновленого сайту по браузерній грі Ninja Warrior. В результаті було отримано алгоритмізований та програмно реалізований сайт по браузерній грі Ninja Warrior. Функціональні можливості створеного сайту, дозволяють користувачам отримувати найбільш актуальні та необхідні новини для гри и доступу до неї. Також, реалізована система "побажань" від користувачів сайту та тих хто бажає його відвідати. Оновлений сайт гри випущеної в 2012 році, розроблений з використанням мови програмування JavaScript, MySQL та HTML. Обсяг кваліфікаційної роботи складає 64 сторінок, з них: 10 сторінок додатків, 1 таблиць, 24 рисунок. Для реалізації веб-орієнтованої інформаційної системи соціальної спільноти використано 8 програмних продуктів. |
| URI (Уніфікований ідентифікатор ресурсу): | https://er.chdtu.edu.ua/handle/ChSTU/6909 |
| Розташовується у зібраннях: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) |
Файли цього матеріалу:
| Файл | Опис | Розмір | Формат | |
|---|---|---|---|---|
| РЕП_БАК_Лісненко_Web-1711.pdf Restricted Access | 3.01 MB | Adobe PDF | Переглянути/Відкрити Запит копії |
Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ
Пояснювальна записка
до кваліфікаційної роботи бакалавра
на тему: «Розробка аналогового та оновленого сайту по
браузерній грі Ninja Warrior»
Виконав: студент 4 курсу, групи Web
1711+ СК
спеціальності 126 «Інформаційні системи
та технології»
ОП «Web-технології, Web-дизайн»
Лісненко Владислав Юрійович
Керівник Карапетян А. Р.
Рецензент _
Черкаси – 2021 рік
Черкаський державний технологічний університет
( повне найменування вищого навчального закладу )
Факультет інформаційних технологій і систем
Кафедра інформаційних технологій проектування
Освітній рівень бакалавр
Спеціальність 126 «Інформаційні системи та технології»
(шифр і назва)
Освітня програма Web-технології, Web-дизайн
ЗАТВЕРДЖУЮ
Зав. кафедри ІТП
Прокопенко Т.О.
« » 2021 року
З А В Д А Н Н Я
НА КВАЛІФІКАЦІЙНУ РОБОТУ СТУДЕНТУ
Лісненко Владиславу Юрійовичу
(прізвище, ім’я, по батькові)
1. Тема роботи Розробка аналогового та оновленого сайту по браузерній грі Ninja Warrior
Керівник роботи Карапетян Анаіт Радіківна
( прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
Затверджені наказом Черкаського державного технологічного університету від
« 19 » лютого 2020 року № 71/01
2. Строк подання студентом роботи 16 червня 2021 р.
3. Вихідні дані до роботи теорія управління проектами; теорія
проектування інформаційних систем; теорія розробки інформаційних систем
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно
розробити) Вступ; 1 Постановка задачі. Огляд аналогів; 2 Проектування
аналогового та оновленого web-сайту по браузерній грі Ninja Warrior; 3 Програмна
реалізація аналогового та оновленого web-сайту по брузерній грі Ninja Warrior;
Висновки; Додаток; Список використаних джерел
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень)
1) Порівняльна характеристика аналогів web-сайту
2) Об’єктно-орієнтована модель web-сайту
3) Архітектура web-сайту
4) Структура web-сайту
5) Головне вікно web-сайту
6) Вікна web-сайту
6. Консультанти розділів роботи
Розділ Прізвище, ініціали та посада Підпис, дата
консультанта Завдання Завдання
видав прийняв
7. Дата видачі завдання 14 лютого 2020 р.
КАЛЕНДАРНИЙ ПЛАН
№ Строк
з/п Назва етапів кваліфікаційної роботи виконання етапів Примітка
роботи
1 Підготовча стадія
1.1 Постановка задачі 14.02.2021 виконано
1.2 Підготовка завдання 18.02.2021 виконано
1.3 Погодження завдання 25.02.2021 виконано
1.4 Затвердження завдання 02.03.2021 виконано
2 Основна стадія
2.1 Підбір матеріалів 13.03.2021 виконано
2.2 Аналіз шляхів рішення поставленої задачі 27.03.2021 виконано
2.3 Розрахунок основних параметрів роботи 15.04.2021 виконано
2.4 Вибір кінцевого варіанту проектного рішення 28.04.2021 виконано
2.5 Оформлення первісної редакції роботи 11.05.2021 виконано
3 Заключна стадія
3.1 Узгодження прийнятих проектних рішень 15.05.2021 виконано
з керівником
3.2 Оформлення пояснювальної записки роботи 18.05.2021 виконано
в кінцевій редакції
3.3 Попередній захист роботи 22.05.2021 виконано
3.4 Затвердження роботи 15.06.2021
3.5 Рецензування роботи 16.06.2021
3.6 Захист роботи 18.06.2021
Студент дипломник Лісненко В.Ю.
(підпис) (прізвище та ініціали)
Керівник роботи Карапетян А.Р.
(підпис) (прізвище та ініціали)
АНОТАЦІЯ
В кваліфікаційній роботі бакалавр обгрунтував необхідність створити
аналоговий та оновлений сайт по браузерній грі Ninja Warrior.
Бакалавр що виконував поставлену задачу навів вимоги до реалізації
оновленого сайту. Також здійснив програмну реалізацію аналоговогота
оновленого сайту по браузерній грі Ninja Warrior.
В результаті було отримано алгоритмізований та програмно
реалізований сайт по браузерній грі Ninja Warrior.
Функціональні можливості створеного сайту, дозволяють користувачам
отримувати найбільш актуальні та необхідні новини для гри и доступу до неї.
Також, реалізована система "побажань" від користувачів сайту та тих
хто бажає його відвідати.
Оновлений сайт гри випущеної в 2012 році, розроблений з
використанням мови програмування JavaScript, MySQL та HTML.
Обсяг кваліфікаційної роботи складає 64 сторінок, з них: 10 сторінок
додатків, 1 таблиць, 24 рисунок.
Для реалізації веб-орієнтованої інформаційної системи соціальної
спільноти використано 8 програмних продуктів.
Ключові слова: web-сайт, програмна реалізація, створення контенту.
АННОТАЦИЯ
В квалификационной работе бакалавр обосновал необходимость
создать аналоговый и обновленный сайт по браузерной игре Ninja Warrior.
Бакалавр выполнявший поставленную задачу привел требования к
реализации обновленного сайта. Также осуществил программную
реализацию аналоговогота обновленного сайта по браузерной игре Ninja
Warrior.
В результате было получено алгоритмизированной и программно
реализован сайт по браузерной игре Ninja Warrior.
Функциональные возможности созданного сайта, позволяют
пользователям получать наиболее актуальные и необходимые новости для
игры и доступа к ней.
Также, реализована система "пожеланий" от пользователей сайта и тех
кто желает его посетить.
Обновленный сайт игры выпущенной в 2012 году, разработан с
использованием языка программирования JavaScript, MySQL и HTML.
Объем квалификационной работы составляет 64 страниц, из них: 10
страниц приложений, 1 таблица, 24 рисунок.
Для реализации веб-ориентированной информационной системы
социальной общности использовано 8 программных продуктов.
Ключевые слова: web-сайт, програмная реализация, создание контента.
ABSTRACT
In the qualifying work, the bachelor substantiated the need to create an analog
and updated site for the browser game Ninja Warrior.
The bachelor who performed the task set requirements for the implementation
of the updated site. Also implemented a software implementation of analog and
updated site for the browser game Ninja Warrior.
The result was an algorithmic and software-implemented site for the browser
game Ninja Warrior.
The functionality of the created site allows users to receive the most relevant
and necessary news for the game and access to it.
Also, a system of "wishes" from users of the site and those who want to visit
it has been implemented.
Updated game site released in 2012, developed using the programming
language JavaScript, MySQL and HTML.
The volume of qualification work is 64 pages, including: 10 pages of
appendices, 1 table, 24 figure.
8 software products were used to implement the web-oriented information
system of the social community.
Keywords: web-site, software implementation, content creation
ЗМІСТ
ВСТУП ...................................................................................................................... 5
1 ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД АНАЛОГІВ ...................................... …..6
1.1 Постановка задачі ........................................................................................ 6
1.2 Опис предметної області ............................................................................ 7
1.3 Огляд аналогів ............................................................................................. 8
1.4 Висновки до першого розділу ..................................................................13
2 ПРОЕКТУВАННЯ РОЗРОБКА АНАЛОГОВОГО ТА ОНОВЛЕНОГО
САЙТУ ПО БРАУЗЕРНІЙ ГРІ NINJA WARRIOR ............................................14
2.1 Створення концепції аналогового та оновленого сайту по браузерній
грі Ninja Warrior ..............................................................................................14
2.2 Проектування структури аналогового та оновленого сайту по
браузерній грі Ninja Warrior............................................................................15
2.3 Інтерфейс користувача аналогового та оновленого сайту по
браузерній грі Ninja Warrior............................................................................16
2.4 Проектування архітектури аналогового та оновленого сайту по
браузерній грі Ninja Warrior............................................................................21
2.5 Висновки до другого розділу ...................................................................36
3 ПРОГРАМНА РЕАЛІЗАЦІЯ АНАЛОГОВОГО ТА ОНОВЛЕНОГО
САЙТУ ПО БРАУЗЕРНІЙ ГРІ NINJA WARRIOR ............................................37
3.1 Обґрунтування вибору аналогового та оновленого сайту по
браузерній грі Ninja Warrior............................................................................38
ЧДТУ 01849.004 ПЗ
Змн. Арк. № докум. Підпис Дат
Розроб. Лісненко В.Ю
. Літ. Арк. Аркушів
Перевір. Карапетян А.Р Web-сайт браузерної гри Ninja
. 7 82
Рецензен Warrior
Землянський О.М.
Н. контр. ФІТІС,
Колесніков К.В.
Затверд. Прокопенко Т.О. Пояснювальна записка кафедра ІТП, Web-1711
3.2 Вимоги до апаратного і програмного забезпечення..............................42
3.3 Адміністрування аналогового та оновленого сайту по браузерній грі
Ninja Warrior .....................................................................................................43
3.4 Структура бази даних ...............................................................................44
3.5 Програмна реалізація аналогового та оновленого сайту по браузерній
грі Ninja Warrior ...............................................................................................45
3.6 Інтерфейс аналогового та оновленого сайту по браузерній грі Ninja
Warrior ...............................................................................................................46
3.7 Висновки до третього розділу ..................................................................49
ВИСНОВКИ ...........................................................................................................50
ДОДАТОК А. 482 ЧДТУ 01849–01 АНАЛОГОВИЙ ТА ОНОВЛЕНИЙ САЙТ
ПО БРАУЗЕРНІЙ ГРІ NINJA WARRIOR. СПЕЦИФІКАЦІЯ ..........................
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ..............................................................61
Арк.
ЧДТУ 01849.004 ПЗ
4
Змн. Арк. № докум. Підпис Дат
ВСТУП
В наш час web-сайти пов’язані з онлайн іграми мають важливу роль роль
в житті гравця або простої людини яка зажадала провести вечір в грі.
Використання інформаційних web-сайтів вже увійшло у звичку кожного, це
допмогає гравцям отримувати актуальну інформацію сприводу їх гри в
реальному часі.
Аналоговий web-сайт по браузерній грі Ninja Warrior допомогає гравцям
впродовж всього їхнього ігрового процесу отримувати актуальні новини.
Метою кваліфікаційної роботи є розробка web-сайту який стане аналогом
для вже існуючого сайту гри по мотивах відомих аніме. Користувачі сайту
зможуть використовувати велику статистичну базу побудовану на контенті гри,
також будь який користувач зможе отримати актуальну інформацію та новини
що пов’язані з грою – цьому всьому сприяє дизайн сайту. Для досягнення
поставленої мети необхідно вирішити наступні завдання:
здійснити аналітичний огляд існуючих web-сайтів
створених для різноманітних онлайн ігор;
обґрунтувати вибір програмних засобів для розробки свого
web-сайту;
створити аналоговий web-сайт;
виконати експериментальну верифікацію розробленого web-
сайту.
Арк.
ЧДТУ 01849.004 ПЗ
5
Змн. Арк. № докум. Підпис Дат
1 ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД АНАЛОГІВ
1.1 Постановка задачі
В процесі виконання кваліфікаційної роботи бакалавра потрібно
розробити web-сайт, який можливо буде відвідати за допомогою мережі Інтернет
та на будь якому пристрої.
Відповідно технічному завданню на розробку аналогового web-сайту
необхідно:
розробити web-орієнтовану інформаційну систему аналогового web-
сайту, що містить в собі різноманітні функції для користування web-сайтом;
додати можливість користувачам вільно отримувати всю актуальну
інформацію за допомогою вкладки новини, забезпечити можливість
користувачам проглядати вікі яка розміщена на сайті;
розробити можливість створення користувачами миттєвих
повідомлень адміністрації сайту.
Web-сайт повинен відповідати наступним технічним вимогам:
коректно відображати web-сторіноки сайту у популярних web-
переглядачах: Internet Explorer, Mozilla Firefox, Google Chrome, Opera;
при розробці та створенні елементів інтерфейсу сайта, використати
більше чотирьох контрастних відтінків.
забезпечити безперебійну роботу сайту в будь який час.
відображення новин повинно коректно показувати час який
актуальний для часового поясу користувача.
Арк.
ЧДТУ 01849.004 ПЗ
6
Змн. Арк. № докум. Підпис Дат
1.2 Опис предметної області
Крім обсягу аудиторії ми оперуємо такою групою статистичних
характеристик, як «відданість» - залучення аудиторії в ігровий процес. Тут є
різні критерії оцінки проекту. Раніше найчастіше говорили про таку величину
як retention, тобто про здатність гри акумулювати аудиторію. Обчислювати її
можна по-різному. Наприклад, взяти різницю між кількістю місячної аудиторії
на початок і кінець періоду, відняти весь трафік, який прийшов з реклами,
результат віднести до кількості гравців, які були на початку місяця, - отримуємо
retention. Якщо retention проекту 60%, це означає, що до кінця періоду дійшло
60% аудиторії, що була на початок періоду. Це найпростіше визначення. Є й
інші.
Ret = (E - N) / S * 100%
Тут Е - кількість гравців на кінець періоду, N - кількість нових гравців,
придбаних за період, S - кількість гравців на початок періоду.
Однак останнім часом аналітики більш схиляються до важливості іншої
величини, яка описує відданість аудиторії. Це так званий sticky-factor або
«липкість». Фактично, він описує, наскільки людям подобається гра. Для
клієнтських, браузерних і деяких інших ігор її прийнято вважати, як відношення
DAU до MAU. Вона корелює з кількістю днів у періоді, протягом якого гравець
заходить в гру щодо всього періоду. Наприклад, якщо всі гравці заходять в гру
кожен день місяця, то DAU = MAU, це 100% -ний stickiness, ідеальний стан. Але
такого не буває. Зазвичай достатньо круто, коли sticky-factor на рівні 20%.
Скажімо, Міні-ігри мають вкрай високу липкість для настільки казуальне
проекту. Для багатьох ігор компанії ця величина варіюється в районі 16-20%.
Деякі хардкорні клієнтські гри, такі як «Аллоди Онлайн», теж мають досить
високі показники retention і stickiness. Не менш високі показники здатні
генерувати соціальні мережі, значна частка користувачів яких відвідує такі
проекти щодня.
Отже, sticky-фактор обчислюється як відношення DAU до MAU і
характеризує залученість аудиторії в проект, а retention характеризує здатність
проекту акумулювати в собі аудиторію. Коли говорять про «відданість», іноді
вживають і інші величини. Один з них churn rate - вигоряння або втрата
аудиторії. Це, в деякому сенсі, зворотний retention - величина, пропорційна
догляду аудиторії.
Необхідно розуміти, що є природне старіння проекту - період, коли всі
показники починають падати. Це практично неминучий процес. На ринку
одиниці ігор, які здатні працювати десятиліттями - наприклад World of Warcraft.
Саме тому надзвичайно важливо аби сайт гри був максимально привітним
для користувачів, а головне – зрозуміли. Користува, а в нашому випадку ще і
гравець повинен розумиті з якою метою керівники проекту створювали цей
сайт.
Розробка сайту для будь якої онлайн гри повинна будуватися на тому аби
для користувачів були створені всі умови для того аби вони могли
користуватися функціоналом сайту.
Важливо розуміти що будь який web-сайт повинен мати певну структуру
та оформлення аби бути привітним та добре оформленим в очах користувача.
Сайт побудований для користувачів які грають в ігри на сам перед повинен
давати повну інформаційну підтримку з приводу гри в яку грають гравці.
Арк.
ЧДТУ 01849.004 ПЗ
7
Змн. Арк. № докум. Підпис Дат
1.3 Огляд аналогів
Браузерні ігри – в них сотні, тисячі, або десятки тисяч гравців взаємодіють
один з одним. У більшості ігор цього класу інтерфейс виконаний у вигляді
звичайних html-сторінок з текстом і зображеннями- вони і є самою грою.
Зазвичай мінімальна інтерактивність забезпечується за допомогою javascript,
дає можливість користувачам взаємодіяти з інтерфейсом гри.
Ряд ігор використовує технологію flash, що до появи html5 дозволяло
зробити гру більш привабливою зовні.з кожним роком існування браузер них
ігор розвивалася також будова сайту, ігри націлені на більш широку аудиторію
почали робити свої сайти біль привабливими та націленими на те щоб
користувач міг отримувати всю інформацію перебуваюсь лише на сайті гри.
Таким чином багато форумів по цим іграм було зачинено, оскільки в них
не було жодного сенсу. Останні декілька років все частіше стали зьявлятися
ігри, в основі яких лежить безкоштовний ігровий движок unity 3d, що дозволив
підняти якость виконання браузерних ігор і впритул наблизити їх до
повноцінних mmog.
Найбільш численним жанром ігор цього класу є жанр рольових ігор, за
яким слідують стратегічні і економічні ігри. Тому створення сайту для таких
ігор є дуже важливим- кожен гравець повинен отримати всю інформацію
пов’язану з грою. Сайт має мати привабливу структуру та допомогати гравцям
отримувати актуальну інформацыю повязану з грою.
Арк.
ЧДТУ 01849.004 ПЗ
8
Змн. Арк. № докум. Підпис Дат
1.3.1 Web-сайт гри Ninja Wars 2
Web-сайт гри було створено в 2012 році, на той час гра була справжнім
взірцем браузерної гри. Наразі вже 2021 рік, сайт гри давно не оновлювався але
все ще має привабливий вигляд. Можна відмітити те розробники дуже
постаралися роблячи інтерфейс для сайту. Сайт гри має власний вбудований
форум та вікі що дає змогу користувачам отримувати багато корисної
інформації та спілкуватися один з одним поза грою. Те, як нині виглядає web-
сайт зображено на рисунку 1.1
Рисунок 1.1- головна сторінка сайту Ninja Wars 2
На сайті гри користувачі можуть взаємодіяти з усіма вкладками та
отримувати розважальний контент по олюбленій грі яка заснована на
одноіменних аніме Бліч та Наруто.
Також можна відмітити дуже зручну систему донатів яка знаходиться на
сайті, завдяки зрозумілій системі та правильно поданій інформації користувачи
можуть з легкість поповнювати ігрову валюту.
Гра мала таку популярність в 2012 розі саме тому що навіть сайт мав
привабливий вигляд.
Арк.
ЧДТУ 01849.004 ПЗ
9
Змн. Арк. № докум. Підпис Дат
1.3.2 Web-сайт гри Наруто: Спадкоємці сили
Web-сайт гри було створено в 2016 році, він має мінімалістичні відтінки та
не перевантажений інформацією. Сайт має власний форум та функцію
підтримки користувачів – для зворотного зв’язку з розробниками. Будь які
анимації відсутні та не відволікають користувача від головної мети – розпочати
гру. Те, як нині виглядає web-сайт зображено на рисунку 1.2
Рисунок 1.2 – головна сторінка сайту Наруто: Спадкоємці сили
Можна помітити приємне оформлення форм для заповнення та реєстрації
нового користувача. Також додана можливість зареєструвати ігровий акант
через соціальні мережі або зареєструвати акант через свою особисту поштову
адресу. На сайті реалізована можливість обрати мову що збільшує активну
аудиторію гри і саме тому дає сайту таку перевагу над іншими. Правильна
структура та привітний інтерфейс який не нагромадженний анімацією
дозволяю гравцеві без перешкод розпочати ігровий процес. Важливо розуміти
що у гри є реклама після натискання якої відбувається перехід на web-сайт гри,
саме через привытний ы красивий ынтерфейс новы користувачы можуть будти
зацікавлені в подальшому ігровому процесі що слідую після реєстрації.
Арк.
ЧДТУ 01849.004 ПЗ
10
Змн. Арк. № докум. Підпис Дат
1.3.3 Web-сайт гри Shini Game
Web-сайт гри було створено в 2014 році, він має мінімалістичні відтінки та
не перевантажений інформацією для користувачів. Сайт має власний форум та
функцію підтримки користувачів – для зворотного зв’язку з розробниками. Те,
як нині виглядає web-сайт зображено на рисунку 1.3
Рисунок 1.3 – головна сторінка сайту Shini Game
На сайті реалізована можливість обрати мову що збільшує активну
аудиторію гри і саме тому дає сайту таку перевагу над іншими. Правильна
структура та привітний інтерфейс який не нагромадженний анімацією
дозволяю гравцеві без перешкод розпочати ігровий процес. На данний момент
в 2021 році гра має дає можливість скачати її на ПК, але все ще дозволяэ
гравцям запускати її в браузері та повноцінно грати. На сайті є активне
посилання де можна скачати гру і як з нею ознакомитися за допомогою
власного форума. Користувачі мають змогу обрати і інші ігри, це
універсальний сайт де можна побачити ігри партнерів та спробувати їх.
Арк.
ЧДТУ 01849.004 ПЗ
11
Змн. Арк. № докум. Підпис Дат
1.3.4 Web-сайт гри Rise of Angels
Web-сайт гри було створено в 2014 році в час її запуску. Ми можемо
бачити приємне оформлення і гарну структуру сайта. В пік своєї популярности
сотні тисяч користувачів перед тим як розпочати гру відвідували сайт для
реєстрації та для того щоб отримати актуальні інформацію з приводу гри.
Минуло багато часу і гра переживає не найкращі часи, проще багато
гравців все ще перед тим як розпочати гру заходять на сайт та користуються
його функціоналом. Те, як нині виглядає web-сайт зображено на рисунку 1.4
Рисунок 1.4 – головна сторінка сайту Rise of Angels
На сайті ми можемо бачити тай функціонал як форум, новини, підтримка
користувачів та різноманітні статті. Форум виконано в мінімалістичному стилі
але його добре видно користувачеві, також можна відмітити що так виконана
більша частина функціоналу сайту. Робники бажали аби сайт в першу чергу
був інформаційним для користувача тому не загромаджували контентом для
перегляду. Користувач в першу чергу отримує інформацію з приводу гри але
якщо йому буде потрібно то будь яка інформація що його може зацікавити
присутня на сайті.
Арк.
ЧДТУ 01849.004 ПЗ
12
Змн. Арк. № докум. Підпис Дат
Підсумкові результати порівняння наведені в таблиці 1.1.
Таблиця 1.1 – Порівняння аналогів
1.4 Висновки до першого розділу
В даному розділі було розглянуто актуальні нині аналоги web-сайтів по
браузер ним іграм. Представлені web-сайти мають різне графічне оформлення
та інформаційне наповнення. в Деяких з них переважає зручність використання
інтерфейсу, аніж зовнішній вигляд, а в інших все разом – зручність
користування інтерфейсом сайта в, приємний зовнішній вигляд та оформлення
по темі сайта. Також було сформовано вимоги до web-сайту який є аналоговим,
визначено курс за допомогою якого буде здійснюватися розробка сайту в
найближчому майбутньому.
Арк.
ЧДТУ 01849.004 ПЗ
13
Змн. Арк. № докум. Підпис Дат
2 ПРОЕКТУВАННЯ АНАЛОГОВОГО ТА ОНОВЛЕНОГО
САЙТУ ПО БРАУЗЕРНІЙ ГРІ NINJA WARRIOR
2.1 Створення концепції аналогового та оновленого сайту по браузер
ній грі Ninja Warrior
Основною ціллю проекту є створення інформаційного та інформативного
сайту для гравців браузерної гри основаної на одноіменних аніме, користувачі
повинні в повній мірі отримувати актуальну інформацію та мати змогу
спілкуватися з розробниками сайту. Онлайн ігри та браузерні онлайн ігри наразі
мають шалену популярність не здатні існувати без свого сайту за яким
користувачі зможуть завжди слідкувати та відстежувати останні новини.
Цільовою аудиторією проекту, можуть бути абсолютно різні люди, але не
молодші 6-ти років. Всі ті, хто зацікавлений в пошуку нових друзів та знайомих
по грі, комунікації з цікавими особистостями, перегляді актуальних ігрових
нових, відвіданні цікавих спільнот та багато іншого що можливо знайти на сайті.
На практиці вже дуже багато відпрацьованих і багато ким випробованих
методик кольорового рішення сайту та його оформлення. Однією з них –
скористалися при доборі кольорів, в цьому допомогли професійні художники, які
добре обізнані в комбінаціях пов’язаних з кольорами. Другою – подивитися
різноманітні статті про особливості психологічного сприйняття людиною того
або іншого кольору. психологи говорять, що червоний і всі його похідні – це
найважчі для сприйняття кольору, тому вони викликають почуття агресії або
тривоги. Червоний колір доречний для сайтів, що присвячені кориді, революції
або ще якому-небудь кривавому людському неподобству. Вже давно було
доведено що кольори мають не аби який вплив на сприйняття людини, за
допомогою кольорів можна не аби як вплинути на рішення людини та на її
зацікавленість. Саме тому ці методики використовують при побудові нових
сайтів які на сам перед повинні приваблювати аудиторію.
Арк.
ЧДТУ 01849.004 ПЗ
14
Змн. Арк. № докум. Підпис Дат
.1 2.2 Проектування структури аналогового та оновленого сайту по браузер
ній грі Ninja Warrior
Аналоговий web-сайт по браузерній грі призначений для організації
ігрового та інформаційного процесу в режимі реального часу. В залежності від
типу доданих в процессі даних, що передаються між користувачами, структура
та функції самої системи можуть змінюватися. Тому для побудови такої
системи необхідно обирати модульну структуру – це важливо, щоб набір
модулів та функцій можна було б змінювати та доповнювати в залежності від
поставленої розробником задачі, та необхідних в майбутньому оновленнях.
Для повноцінного функціонування сайту подібної структури необхідно
такі основні модулі, модуль навігації та модуль пам’яті – вони в край необхідні.
.2 Модуль навігації на сам перед повинен допомогти користувачам отримати
необхідну інформацію яку повинен їй дати розробник та керівник проекту для
йкого був розробленій сайт. Необхідно аби будь який гравець або користувач
web-сайта мав здатність в повному обсязі та самостійно переглядати
інформацію сайта.
.3 Модуль памяті необхідний аби сайт коректно відображав бази данних і
користувачі мали змогу переглядати інформацію в будь який час та без
перешкод. Цей модуль забезпечує стабільну роботу web-сайта та дозволяє
користувачам користуватися такою вкладкою як вікі та галерея.
Доступ до всих збережених результатів що були додані на сайті
здійснюється через меню результатів.
Проектування самої структури сайту відбуватиметься таким чином, щоб
він був зручним для користування та гравців, зрозумілий роботам пошукових
систем.
Аналоговий web-сайт по браузерній грі Ninja Warrior розділений на
наступні модулі:
Арк.
ЧДТУ 01849.004 ПЗ
15
Змн. Арк. № докум. Підпис Дат
Новини;
Форум;
Галерея;
Останні новини;
Головна;
Вікі;
2.3 Інтерфейс користувача аналогового та оновленого web-сайту по
браузерній грі Ninja Warrior
При розробці сайту розробник звертає увагу на багато на перший погляд
дрібниць, саме вони формують сайт: розмір і колір шрифту, взаємне
розташування елементів сайту аби це коректно виглядало, різноманітна гамма
кольорів що беруть безпосередню участь в розробці сайту. Без спеціальних
знань створити дизайн сайту приємним для користувачів і при цьому зручним
для користування нових відвідувачів практично неможливо – це необхідно
розуміти на етапі розробки.
Розробка головної сторінки сайту це перший та найголовніший етап
розробки дизайну для сайту, це перша сторінка яка зустрічає користуача.
Дизайн головної сторінки сайту обирається з оглядом на те яку інформацію
планує додати розробник та які майбутні оновленя передбачені для всіх
користувачів та гравців. Опираючись на дизайн головної сторінки розробник
створює інші сторінки які повиння співпадати зі стилем головної сторінки.
Розробники які більш досвідченні в питанні створення сайту на сам перед
рекомендують створити чорновий варіант а лише потім переносити в цифровий
вигляд.
Для створення дизайн-макет застосовують спеціальні графічні редактори,
з яких Adobe Photoshop є дуже популярним серед розробників.
Арк.
ЧДТУ 01849.004 ПЗ
16
Змн. Арк. № докум. Підпис Дат
Можливості сучасної верстки надзвичайно великі, тому велику частину
операцій зі створення та розробки дизайну сайту можна виконувати прямо
під час самої верстки.
Стандартний перелік робіт з розробки дизайну сайту з самого нуля
включає наступне:
збір первинної інформації;
матеріалізація ідей та напрацювань;
створеня декількох різних варіантів дизайн-макету;
Пройшовши ці три зазначені етапи, графічна картинка вже готова до
наступного циклу роботи – HTML-верстки. На цьому етапі її вже нарізають на
вже окремі малюнки, з яких згодом і складається HTML-сторінка.
Після цього кожний з готових html-файлів передається програмісту який
відповідає за подальшу розробку. Потім сайт починають тестувати на
заключному етапі усувають недоліки які було виявлено при тестуванні сайту.
Верстка сайту - це кінцевий етап, створення важливого єлемента -
структури сайту, що буде визначати відображення тексту й графічних
єлементів на сайті в різних браузерах та пристроях.
Розрізняють фіксовану і змінювану верстку сайту. При фіксованій верстці
всі елементи web-сторінки мають фіксовані розміри, незалежно від розміру
монітора користувача й установленого дозволу екрана. Змінювана верстка
сайту дозволяє змінювати розміри різноманітних елементів сторінки,
підлаштовуючись під різні розміри й дозволи моніторів на пристроях
користувачів. Розробники web-сайтів вже давно оптимізували процес розробки
під потреби користувачів та для майбутніх оновлень. При розробці необхідних
элементів та верстки сайту розробники роблять все можливе та
використовують всі ресурси аби оптимізувати сайт для користувача і джля
себе- адже постійні оновлення надзвичайно важливі, це потрібно розуміти ще
на початку верстви адже візуальні єлементі важливі, але правильна побудова
сайту дозволить робити постійні оновлення без зайвого клопоту.
Арк.
ЧДТУ 01849.004 ПЗ
17
Змн. Арк. № докум. Підпис Дат
Верстка сайту сьогодні може бути дуже різноманітною – ми можемо
розглянути декілька варіантів та проаналізувати їх. HTML-верстка сайту – це
верстка сайту на основі мови гіпертекстової розмітки HTML. Важливо
відзначити що це залежить від основних елементів html, які розробники дуже
часто використовують.
CSS-верстку виділяють в окремий вид верстки сайту – хоча це буває не так
часто як можна було б подумати, хоча в сучасному веб-дизайні каскадні таблиці
стилів використовуються практично при будь-якій верстці сайту багатьма
розробниками. Каскадні таблиці стилів описують зовнішній вигляд сторінок
сайту що необхідно для подальшої верстки та розуміння робочого процесу.
Верстка з використанням мови програмування css може використовувати
внутрішні стилі. Зв'язані стилі дозволяють відокремити код від зовнішнього
оформлення: всі параметри форматування тегів розміщаються в окремому файлі
css. Достатньо лише підключити цей файл у потрібному місці web-сторінки.
Один файл css може бути використаний для безлічі різних web-сторінок.
Глобальні стилі описуються в тегу <style>, що розташовується в
заголовку <head> web-сторінки. Описані стилі будуть застосовані тільки до
однієї сторінки – слідж це розуміти і відмітити для себе якщо це перший сайт
який розробляє розробник. Внутрішні стилі, призначаються для кожного
конкретного тегу й застосовуються тільки стосовно нього –виключень не буває і
не може бути, це важливе правило для верскти сайту. Кожен розробник бажає
зробити свій сайт унікальним та додати в ньго щось унікальне і саме тому
верстка сайту довзоляє це робити ще на етапах самої розробки. Зараз існує
надзвичайно велика кількість способів верстки сайту і це дозволяє розробнику
робити свій сайт зовсім не схожим на інші хоча і необхідно розуміти що треба
притримуватись певних правил.
Арк.
ЧДТУ 01849.004 ПЗ
18
Змн. Арк. № докум. Підпис Дат
У веб-дизайні частіше почали використовувати комбінована верстка сайту –
це допомагає розробнику створити складний та цікавий з візуальної точки зору
сайт. Саме тому він може бути більш привабливим ніж його аналоги які можна
знайти в мережі інтернет.
Верстка обов’язково повинна відповідати стандартам якості та структури.
Ми говоримо про здатність сайту працювати не залежно від браузера в якому
його запустили та незалежно від розширення єкрану на якому його відкрівають
та бажають переглянути.
Інтерфейс користувача – це одна з найважливіших речей які необхідні при
розробці web-сайту. Необхідно аби він був привабливим з точки зору
структури та його візуальної складової. Багато розробників приділяють багато
часу розробці інтерфейсу користувача адже це «обличчя сайту» і робить перше
врежяення у користувачів.
На головній сторінці аналогового web-сайта розміщена панель навігації,
меню яке розміщене зверху аби не нагромаджувати інтерфейс, в якому
відображено весь перелік основних модулів web-сайту, в центральній частині
сторінки було прийнято рішення розмістити основне наповнення web-сайту:
користувачі можуть преглянути найголовніше для них як для гравців – про що
ця гра, і на основі яких аніме вона була побудована та створена. Web-сайт
дозволяє користувачам переглядати вікіпею на основі гра яка була створена за
допомогою бази данних. Розміщена галерея де користувачі можуть
переглядати цікавий графічний контент повязаний з тематикою гри. Кожен
користувач має змогу зв’язатися з розробником аби отримати відповіді на свої
питання за допомогою вкладки «підтримка». Вкладка «новини» - допомогає
гравцям браузерної гри переглянути останні актуальні новини та розробити
стратегію подальшої гри. Посилання для переходу на мобільну версію сайту
(рис. 2.1).
Арк.
ЧДТУ 01849.004 ПЗ
19
Змн. Арк. № докум. Підпис Дат
Рисунок 2.1 – Головна сторінка аналогового web-сайту Ninja
Warrior
Після вход користувача на головну сайта – користувач може побачити
перед собою інформацію про гру та побачити на скільки інформативно була
подана інформація розробником (рис. 2.2).
Рисунок 2.2 – «Про гру» на головній сторінці web-сайту Ninja
Warrior
Арк.
ЧДТУ 01849.004 ПЗ
20
Змн. Арк. № докум. Підпис Дат
2.4 Проектування архітектури аналогово web-сайту по грі Ninja
Warrior
Програмна архітектура обчислювальної системи – це важлива сукупність
необхідних для обслуговування обчислювальної системи структур, які
складаються із програмних елементів – що дозволяють їй функціонувати.
Архітектурний стиль визначає набір компонентів і коннекторів, які можна
застосувати для того, щоб реалізувати цей стиль в роботі, також сукупність
правил, якими вони можуть в майбутньому підпорядковуватися і
застосовуватися.
Кожен архітектурний стиль описує категорію системи, яка охоплює:
o множину типів компонентів, які виконують необхідну функцію у системі;
o набір зв’язків, вони забезпечують зв'язок, координацію між різними
компонентами;
o семантичні обмеження, які визначають, які компоненти можуть бути
інтегровані для формування системи;
o топологічне розміщення компонентів, яке вказує на їх взаємозв’язки під
час виконання.
Розглядаючи архітектуру організацій, вже давно було прийнято рішення
використовувати до них поняття «архітектура підприємства». Її можна
представити у вигляді декількох архітектурних стилів описаних далі:
технічна архітектура
програмна архітектура
бізнес архітектура
Технічна архітектура є – дуже важливим єлементом розробки сайту для
будь якого розробника. На це слід звернути увагу та насам перед вивчити це
питання для подальшї розробки та вдосконалення сайту. До технічної
архітектурі відносять технічну інформацію та ресурси необхідні для розробки.
Арк.
ЧДТУ 01849.004 ПЗ
21
Змн. Арк. № докум. Підпис Дат
Програмна архітектура є сукупністю програм і програмних процесів які
повинні задовольняти потреби для подальшої розробки програмного продукту
що надзвичайно важливо для багатьох розробників які базуються на розробці
web-сайтів. Програмна архітектура допомогає розробникові оптимізувати
процес розробки в багатьох віпадках, пыд час перегляду програмноъ
архытектури можна заздалегыть передбачити можливі зміни в розробці що
може дуже сильно допомогти.
Архітектура даних поєднала в собі як фізичні способи збереження данних
так і їх логічний опис для зручності розробок та доступності отримання будь
яких данних в процесі розробки що забезпечує зручність. Архітектура данних
на єтапах розробки дозволяє переглядати велику кількість інформації
необхідної для розробки web-сайту.
Особливо потрібно виділити рівень ІТ-архітектури, він є сполучним.
Якщо будь-яка особливість функціонування для цих двох рівнів не була
передбачена, то зростає кількість збоїв у роботі, це означає великі втрати для
будь якого бізнесу.
Останнім в ієрархії є рівень бізнес-архітектури або архітектури бізнесів-
процесів. На цьому рівні розробники визначають стратегію веденя бізнесу та
способ розвитку що надзвичайно важливо якщо проект створюється для
комерційних потреб.
Модель представлення архітектури програмного забезпечення відображує
функціональні і нефункціональні потреби до програмного забезпечення.
Існують способи підходів опису архітектури програмного забезпечення:
UML модель представлення архітектури;
модель представлення архітектури виду 4+1;
Арк.
ЧДТУ 01849.004 ПЗ
22
Змн. Арк. № докум. Підпис Дат
Ця графічна мова використовується для створення прототипів
програмного забезпечення, зокрема, для візуалізації, специфікації,
конструювання і документування програмних систем.
UML створена групою управління об’єктами.
Словник UML включає три види будівельних блоків діаграми; сутності;
зв’язки.
Сутності це абстракції, які основними елементами моделі, зв’язки
поєднують їх між собою, а діаграми групують набори сутностей.
Діаграма це графічне представлення сукупності елементів у вигляді
зв’язаного графа вершин і шляхів. Мова UML містить 13 видів діаграм, серед
яких найпріоритетнішими діаграми класів.
Є дві категорії діаграм, кожна з яких, в свою чергу, поділяється ще на
підкатегорії структурні діаграми; діаграми поведінки.
Структурні діаграми відображають статистичні аспекти програмної
системи. Ці статичні елементи тими частинами діаграми, які утворюють
основну структуру програмної системи, тому вони стабільними.
Мова UML виконує функцію своєрідного стандарту, що використовується
для аналізу вимог до програмного забезпечення і розробки проектної
документації. Всі ці данні необхідні для успішного створення web-сайту для
розробників які бажають ознайомитися з проектуванням архітектури.
UML це мова графічного опису для об’єктного моделювання в області
розробки програмного забезпечення, моделювання бізнес-процесів, системного
проектування та відображення організаційних структур.
Арк.
ЧДТУ 01849.004 ПЗ
23
Змн. Арк. № докум. Підпис Дат
Статичні елементи представлені класами, інтерфейсами, об’єктами,
компонентами та вершинами. Виділяють наступні види структурних діаграм:
діаграма класів;
діаграма об’єктів;
діаграма компонентів;
діаграма пакетів;
комбінована діаграма.
Діаграми поведінки фіксують динамічний аспект програмної системи.
Динамічні аспекти – це змінні/рухомі частини системи. В UML Виділяють
наступні види діаграм поведінки:
діаграма варіантів використання;
діаграма послідовності;
діаграма комунікації та послідовності;
діаграма автомата;
діаграма діяльності;
діаграма синхронізації.
Модель 4 + 1 визначає чотири різні представлення архітектури програмного
забезпечення. Кожний із них описує певний аспект архітектури та складається із
певної сукупності програмних елементів і зв’язків між ними. Ці представлення
відображають наступні цілі:
Логічне представлення – це програмні елементи, які створюються
розробниками. В об’єктно-орієнтованих мовах це класи і пакети. Зв’язки між
ними відповідають відношенням між класами і пакетами, включаючи
наслідування, взаємозв’язки та підпорядкування.
Представлення реалізації – це результат роботи системи складання.
Арк.
ЧДТУ 01849.004 ПЗ
24
Змн. Арк. № докум. Підпис Дат
Java модуль має формат JAR, а компонентом є WAR- або виконуваний JAR-файл.
Зв'язок між ними визначається підпорядкованістю модулів і тим, як компоненти
об’єднані в той чи інший модуль.
Представлення процесу – це компоненти на етапі виконання. Кожний
елемент є процесом, а відношення між процесами є міжпроцесною взаємодією.
Розгортання – те, як процеси розподіляються на пристрої. Елементи в
цьому представленні складаються із серверів (фізичних або віртуальних) і
процесів. Зв'язки між серверами утворюють мережу. Це представлення також
описує зв'язок між процесами та пристроями.
В загальному випадку ADL складається із сутностей трьох типів:
неформальні діаграми у вигляді рамок і рядків, мова опису формальної
архітектури і нотаток на основі UML
ADL – це мова формального і семантичного опису архітектури
програмного забезпечення.
ADL - повинна підтримувати компоненти архітектури, їх
з’єднання, інтерфейси і конфігурації, які є будівельними блоками для
опису архітектури. Це форма подання, що використовується для опису
архітектури, яка забезпечує декомпозицію компонентів, об’єднання компонентів
та визначення інтерфейсних
компонентів.
Базовими ADL конструкціями є:
Компоненти – це основні обчислювальні елементи і сховища даних
системи. Типовими прикладами компонентів є клієнти, сервери, фільтри,
об’єкти, класні дошки і бази даних. З’єднувачі – це елементи, які забезпечують
взаємодію між компонентами. З точки зору часу виконання, з’єднувачі
забезпечують взаємодію
Арк.
ЧДТУ 01849.004 ПЗ
25
Змн. Арк. № докум. Підпис Дат
і координацію дій між компонентами. Прикладами з’єднувачів є прості форми
взаємодії, такі як канали, виклик процедур і трансляція подій. З’єднувачів також
можуть підтримувати складні взаємодії, зокрема, протокол клієнт-сервер або
зв'язок SQL між базою даних і додатком. З’єднувачі мають інтерфейси, які
визначають функції, які виконують учасники взаємодії.
Системи (конфігурації компонентів і роз’ємів). Система надає схему
розміщення компонентів і роз’ємів. Конкретне розміщення компонентів і роз’ємів
називається конфігурацією системи. Компоненти і з’єднувальні елементи можуть
надавати підсистеми, які мають власну внутрішню архітектуру.
Порти (точки взаємодії із компонентом).
Представлення – для моделювання ієрархічної композиції.
Rep-карти, відображення внутрішньої архітектури складеного
компонента або з’єднувача внутрішнього інтерфейсу.
Побудова архітектури аналогового web-сайту передбачала розробку
сукупності діаграм різних архітектурних стилів. Діаграма бачення мотивації
команди розробників – це візуальне
представлення структури організованої розробки, спілкування та управління
бізнес-планами підприємства (рис. 2.3).
Діаграма мотивації використовується для:
– ідентифікації факторів, які зумовлюють необхідність розробки бізнес-
планів;
– визначення елементів бізнес-планів;
Встановлення взаємозв’язків між факторами, які зумовлюються необхідність
розробки бізнес-планів, та елементами бізнес-планів. Серед цих елементів є ті, які
забезпечують управління та керівництво бізнесом – бізнес-політики та бізнес-
правила.
Арк.
ЧДТУ 01849.004 ПЗ
26
Змн. Арк. № докум. Підпис Дат
Рисунок 2.3 – Діаграма бачення мотивації команди розробників аналогового
web-сайту по браузер ній грі Ninja Warrior
Діаграма бачення місії, цінності та бізнесу команди розробників
аналогового web-сайту по браузер ній грі Ninja Warrior наведена на рис. 2.3.
Арк.
ЧДТУ 01849.004 ПЗ
27
Змн. Арк. № докум. Підпис Дат
Рисунок 2.4 – Діаграма бачення місії, цінності та розвитку бізнесу команди
розробників аналогового web-сайту по браузер ній грі Ninja Warrior
Діаграма бачення стратегії команди розробників аналогового web-сайту по
браузер ній грі Ninja Warrior використовується для візуального представлення
перспективного напрямку розвитку на основі визначення якісно нових цілей.
Діаграма бачення стратегії команди розробників аналогового web-сайту по
браузер ній грі Ninja Warrior наведена на рис. 2.5
Рисунок 2.5 – Діаграма бачення стратегії команди розробників web-сайту
по браузер ній грі Ninja Warrior
Арк.
ЧДТУ 01849.004 ПЗ
28
Змн. Арк. № докум. Підпис Дат
Діаграми бачення ризиків та безпеки підприємства. Питання безпеки та
захисту даних є важливою та невідємною частиною дисципліни управління
ризиками – що є надзвичайно важливим для розвитку майбутнього проекту та
його підтримки. Діаграма бачення ризиків і безпеки команди розробників
аналогового web-сайту по браузерній грі Ninja Warrior наведена на рис. 2.6.
Рисунок 2.6 – Діаграма бачення ризиків і безпеки команди по розробці
web-сайту по браузер ній грі Ninja Warrior
Стратегічне планування діяльності підприємства – це насам перед
правильний росподіл ресурсів які в подальшому будуть правильно використані
под. час розробки. Послідовність виконання окремих операцій web-сайту по
браузер ній грі Ninja Warrior наведено на рис. 2.7.
Арк.
ЧДТУ 01849.004 ПЗ
29
Змн. Арк. № докум. Підпис Дат
Рисунок 2.7 – Послідовність етапів процесу стратегічного планування діяльності
із розробки аналогового web-сайту по браузерній грі Ninja Warrior
Діаграма бачення SWOT-аналізу проекту – це очний поділ середовища
проекту на чотири основні категорії: сильні сторони, слабкі сторони також
можливості проекту та загрози для подальшого існування проекту. (рис. 2.8).
Рисунок 2.8 – Діаграма бачення SWOT-аналізу проекту аналогового web-
сайту по браузер ній грі Ninja Warrior
Арк.
ЧДТУ 01849.004 ПЗ
30
Змн. Арк. № докум. Підпис Дат
Визначені розробниками перспективні орієнтири діяльності команди
аналогового web-сайту по браузер ній грі Ninja Warrior.
Опираючись на основі оцінювання його подальших потенційних
можливостей і прогнозування майбутнього розвитку зовнішнього середовища
наведені на рис. 2.9.
Рисунок 2.9 – Діаграма бачення стратегії розробників аналогового web-
сайту по браузер ній грі Ninja Warrior
Арк.
ЧДТУ 01849.004 ПЗ
31
Змн. Арк. № докум. Підпис Дат
Цінність і на сам перед необхідність стратегії підприємства полягає в тому,
що цілі обов’язково повинні бути пов'язані зі стратегіями, все це між собою
надзвичайно тісно пов’язане і не може використовуватися одне без одного що
створює певну необхідність слідувати стратегії опираючись на архітектуру .
Подібне бачення може бути використане за для стратегії цільової ієрархії що
певною мірою обов’язково впливає на розвиток проекту та його майбутню
підтримку розробниками.
Діаграма бачення вимог підприємства призначена для встановлення
взаємозв’язків між стратегією діями розробників аналогового web-сайту по
браузер ній грі Ninja Warrior і реальними діями щодо поліпшення і
удосконалення розробниками наведена на рис. 2.10.
Рисунок 2.10 – Діаграма бачення вимог команди аналогового web-сайту по
браузер ній грі Ninja Warrior
Для планування діяльності команди розробників аналогового web-сайту по
браузер ній грі Ninja Warrior на основі можливостей підприємства
використовується діаграма бачення можливостей підприємства, що наведена на
рис. 2.11.
Рисунок 2.11 – Діаграма бачення можливостей підприємства
Арк.
ЧДТУ 01849.004 ПЗ
32
Змн. Арк. № докум. Підпис Дат
Карта бачення бізнес-послуг підприємства необхідна аби можна було
візуально побачити всі можливі бізнес послуги організації які вона здатна надати
і підтримувати впродовж тривалого часу. Бізнес-послуга є лише початком для
подальшої співпраці і є лише першим кроком до підняття комерційних відносин.
Карта бачення бізнес-послуг аналогового web-сайту по браузерній грі Ninja
Warrior наведена на рис. 2.12.
Галерея Вікі Новини
Підтримка Останні новини Головна
Рисунок 2.12 – Діаграма бачення бізнес-послуг аналогового web-сайту по
браузер ній грі Ninja Warrior
2.5 Безпека і захист web-орієнтованих інформаційних систем
Інфoрмaційнa безпека — включає в себе всі аспекти що допоможуть
зберегти конфіденційність та заздалегідь допомогти користувачам
отримувати безпечній контент якій ніяк не вплине на їх конфіденційність.
Безпека інформації—загальний стан існуючої інформації котрий
допоможе зберігти її цілісність та конфіденційність на різноманітних
пристроях користувачів.
Безпекa інфoрмaції визнaчaється на сам перед не можливістю її
витоку та гарантією користувачеві що він захищений як і інформація
якою він користуються або переглядає на своєму пристрої.
Арк.
ЧДТУ 01849.004 ПЗ
33
Змн. Арк. № докум. Підпис Дат
Якщо розглядати якoсті стaндaртнoї мoделі безпеки то ми використаємо
мoдель з трьoх кaтегoрій:
Конфіденційність — це певний стан інформації до якої має доступ
користвучач з правами на неї і тільки він;
Цілісність — унеможливлення внесення змін до інформації яка повинна
залишатися цілісною;
Доступність — унеможливлення приховування інформації на будь який
термін від користувачів та аудиторії.
Виділяють і інші кaтегoрії мoделі безпеки:
Аппеліруемість — здатність підтвердити дію і унеможливити її
відхилення або спричиняти їй супротив;
Підзвітність — забезпечення користувача доступом до його дій та того що
було ним виконано;
Дoстoвірність— на сам перед дає змогу користувачеві зрозуміти яка перед
ним інформація чи має вона аналоги і чи можна її вважати достовірною та
аутентичною.
Захист інформаційних систем є дуже актуальним в наш час та дає змогу
користувачам web-сервісів отримувати достовірну інформацію в повному
обсязі з збереженням конфіденційності та рав на використання інформації яка
має бути у вільному доступі. Всі користувачі мають право на достовірну
інформацію та захист своїх особистих данних і унеможливлення їх витоку – це
і є основними поняттями що допомагають зрозуміти суть інформаційної
безпеки та дорнести її до всіх та кожного. Розповсюдження недостовірної
інформації або с порушенням її цілісності не має бути допущенім адже це
порушення головних регламентів інформаційної безпеки щодо користувачів.
Арк.
ЧДТУ 01849.004 ПЗ
34
Змн. Арк. № докум. Підпис Дат
Для повного та достовірного oпису технoлoгії зaхисту інфoрмaції
інфoрмaційнoї системи зaзвичaй будується пoлітикa безпеки що на сам перед
для будь якого користувача необхідно аби інформація отримана ним чи його
пристроєм була захищена.
Пoлітикa безпеки - це велика сукупність правил та інстанцій пов’язаних з
забезпеченням безпеки користувачам та їх захистом. Створено достатньо
інстанцій аби забезпечити конфіденційну інформацію користувачеві впродовж
його користування нею.
Пoлітикa безпеки інфoрмaційнo-телекoмунікaційних технoлoгій –
сукупність певних правил які призводять до того ще певні структури
зобов’язані мати та надавати доступ до критичної інформації та
розповсюджувати її основуючись на принціпах побудованіх з питань захисту
інформації та її розповсюдження.
Для побудови достовірної та функціональної системи інформаційної
безпеки слід згадати такі важливі та необхідні для розуміння аспеки:
Зaхист oб'єктів інфoрмaційнoї системи;
Зaхист прoцесів, прoцедур і прoгрaм oбрoбки інфoрмaції;
Зaхист кaнaлів зв'язку
Придушення пoбічних електрoмaгнітних випрoмінювaнь і нaведень;
Упрaвління системoю зaхисту.
Насам перед це необхідно аби захистити інформацію від пошкоджень та
несанкціонованіх витоків які можуть нашкодити користувачеві чи державі яка
маю цю інформацію в електронному вигляди та бажає залишити її
конфіденційною і захистити.
Арк.
ЧДТУ 01849.004 ПЗ
35
Змн. Арк. № докум. Підпис Дат
2.6 Висновки до другого розділу
В данному розділі наведено концепцію і спроектовано структуру
аналогового web-сайту по браузер ній грі Ninja Warrior. Інтерфейс користувача
розробником було виконано за допомогою інструментів розробника браузеру
Chrome. Спроектовано архітектуру аналогового web-сайту по браузер ній грі
Ninja Warrior, також було наведено перелік модулів, розробник розповів про
призначення кожного з них.
Арк.
ЧДТУ 01849.004 ПЗ
36
Змн. Арк. № докум. Підпис Дат
3 ПРОГРАМНА РЕАЛІЗАЦІЯ АНАЛОГОВОГО WEB-
САЙТУ БРАЗУЕРНОЇ ГРИ NINJA WARRIOR
3.1 Характеристика процесу створення аналогового web-
сайту бразуерної гри Ninja Warrior
Розробка аналогового web-сайту по браузерній грі Ninja Warrior– це
надзвичайно складний процес, він потребує залученн різноманітних фахівців –
експертів своєї області що мають певний досвід. Створення програмного
продукту , виконують зазвичай послідовно і це надзвичайно важливий етап
розробки де кожен фафівець повинен розуміти це. Надзвичайно важливо
дотримуватися правил виконання всіх етапів і найголовніше - розуміти, будь-які
правки що не були внесені заздалегідь можуть не аби як призупинити процес
розробки продукту.
Робота над проектом складається із таких етапів:
Етап 1. Передпроектна підготовка. На цьому етапі розробник вже повинен
розуміти з якою аудиторією збирається працювати в подальшому та мати вже
певний макет свого продукту та його насамперед – дизайну, що не аби як
допоможе в подальшій розробці.
Етап 2. Верстка. На сам перед необхідно створити шаблонні варіанти
сторінок сайту та розглянути всі можливі варіанти написання коду аби
системізувати його та поліпшити.
Етап 3. Розробка дизайну сторінок. Цей етап довзоляє розробнику
прийняти рішення з вибором кольорової гамми його сайту та розробити вже
певний макет сторінок.
Етап 4. Інформаційне наповнення сайту – розробник повинен підготувати
різноманітне наповнення для свого сайту в тому числі графічне та текстове.
Етап 5. Програмна частина проекту на сам перед передбачає інтеграцію
сайту з системою управління, програмування і запуск проекту.
Арк.
ЧДТУ 01849.004 ПЗ
37
Змн. Арк. № докум. Підпис Дат
Етап 6. Тестування сайту в Інтернеті. В першу чергу виконується аби
знайти можливі помилки при запуску в різних інтенрнет браузерах та заздалегідь
їх виправити та допомогти розробникам в подальшій підтримці.
Етап 7. Розміщення сайту в Інтернеті. Цей етап дозволяє розробникові
організувати процес по вибору та реєстрації доменного імені. вибор хостингу
провайдера, розміщення сайту..
Етап 8. Просування сайту. Розробник на сам перед надзвичайно
зацікавлений аби його сайт відвідувало як умога більше користувачів. Якщо на
сайті присутня монетизація то це не аби як сильно допомогає розробникам та
заохочує їх впроваджувати нові зміни аби користувачів було все більше. Одним
із варіантів просування сайту може бути реклама.
Етап 9. Подальша підтримка сайту.
3.2 Обґрунтування вибору засобів розробки аналогового web-сайту по
браузерній грі Ninja Warrior
Програмування сайту – це один із найважливіших етапів розробки який
стоїть перед кожним хто бажає створити свій власний сайт, дуже часто
програмування меже перетинатися з іншими єтапамі розробки і це зовсім не
рідкість. Кожен хто бажає створити свій сайт повинен розуміти що
програмування ще можливо найважливіший єлемент розробки при виконанні
якого ві можете позбутися великої кількості проблем з майбутньою
підтримкою вашого сайту.
В процесі розробки аналогового web-сайту по браузер ній грі Ninja
Warrior буде використано перелік технологій та програмних засобів. Сучасні
технології дають змогу реалізувати поставлену задачу як найкраще так в
сучасному вигляді.
HTML мова розмітки сторінок гіпертексту – мова розмітки сторінком в
мережі Інтернет. Файли, написані мовою
Арк.
ЧДТУ 01849.004 ПЗ
38
Змн. Арк. № докум. Підпис Дат
розмітки сторінок HTML будуть інтерпретовані браузерами та відображені в
якості документів, після цього їх можна переглянути їх відображення.
У HTML є дуже велика перевага, можливість відображення документу в
будь- якому браузері та на різних пристроях: мобільний, планшет, ігрова
приставка, ноутбук. Гіпертекст є набором служюових команд, які на сам перед
розпізнає web-переглядач та інтерпретує.
CSS – за допомогою таблиць каскадних стилів, створюється також
візуальне представлення та оформлення вмісту гіпертекстових сторінок. За
допомогою CSS також можна задати колір тексту або будь-якому елементу,
визначити сімейство шрифтів або навіть декілька, додати відступ від
попереднього елементу та багато іншого.
Таблиці стилів можуть бути:
У вигляді окремого файлу з розширенням .css;
У вигляді рядкових стилів для конкретного елементу;
Записані безпосередньо до тіла документу.
PHP – це скриптова мова програмування, була створена для генерації
HTML-сторінок на стороні веб-сервера. PHP є однією з найпоширеніших мов в
розробці програмного забезпечення, що використовуються у сфері веб-
розробок. PHP підтримується переважною більшістю хостинг-провайдерів. PHP
– проект відкритого програмного забезпечення.
PHP інтерпретується веб-сервером в HTML-код, який передається на
сторону клієнта. На відміну від скриптової мови JavaScript, користувач не
бачить PHP-коду, браузер отримує готовий html-код. Цей підхід є кращим з
міркувань безпеки, але гіршим для забезпечення інтерактивності сторінок.
Велика різноманітність функцій PHP дають можливість уникнути
написання багаторядкових функцій користувача на C++ або Pascal що не аби як
допомогає.
На користь мови PHP свідчать:
– наявність інтерфейсів до багатьох баз даних;
Арк.
ЧДТУ 01849.004 ПЗ
39
Змн. Арк. № докум. Підпис Дат
– наявність вбудованих бібліотек для роботи з MySQL, PostgreSQL, mSQL,
Oracle, dbm, Hyperware, Informix, InterBase, Sybase;
– можливість підключення до всіх баз даних, до яких існує драйвер, через
стандарт відкритого інтерфейсу зв'язку з базами даних (Open Database
Connectivity Standard – ODBC);
– традиційність синтаксису. Багато конструкцій мови PHP запозичені з С, Perl.
Код РНР дуже схожий на той, який зустрічається в типових програмах на С
або Pascal, що сприяє його швидшому освоєнню без залучення значних
зусиль. PHP – мова, що поєднує переваги Perl і С і спеціально спрямована
на роботу в Інтернеті, мова з універсальним і зрозумілим синтаксисом.
MySQL — це одна з найпоширеніших система управління базами даних в
Інтернеті. Це досягнуто завдяки вдалому поєднанню користувацьких
властивостей, відкритому коду і добрій технічній підтримці. Характеризується
великою швидкістю, стійкістю і простотою використання. Для некомерційного
використання MySQL є безкоштовним.
В якості альтернативи MySQL можна розглянути: Oracle, PostgreSQL,
mSQL.
Можливості сервера MySQL:
простота у встановленні та використанні;
підтримується необмежена кількість користувачів, що одночасно
працюють із база даних;
висока швидкість виконання команд;
наявність простої і ефективної системи безпеки;
написаний під десятки видів операційних систем.
Арк.
ЧДТУ 01849.004 ПЗ
40
Змн. Арк. № докум. Підпис Дат
JavaScript – мова програмування сценаріїв, що виконуються
беспосередньо в браузері користувача. Перевага JavaScript в тому, що мові не
потрібно жодних інтерпретаторів для виконання коду.
Синтаксис JavaScript дуже подібний до синтаксису мови програмування
C, але все ж має деякі відмінності від неї:
Можливість створення анонімних функцій;
Автоматичне визначення типів значень;
Автоматичний збір сміття;
Можливість обробки винятків;
Функції виступають в якості об’єктів першого класу.
JavaScript – мова сценаріїв, що виконуються в браузері на стороні
користувача;
jQuery – бібліотека готових рішень на JavaScript, для ведення зручної
розробки за допомогою використання готових функцій з заздалегідь
передбаченим результатом виконання.
Перелік програмних засобів, які буде використано при розробці:
Блокнот – примітивний текстових редактор, для швидкого
внесення змін до файлів;
Notepad++ – текстовий препроцесор для редагування коду з можливістю його підсвітки;
Sublime Text – редактор вихідних кодів скриптів, в якому
присутня можливість роботи з папками та файлами в одному програмному вікні;
PhpStorm – програмне забезпечення, що надає багато можливостей
для розробника, який пише мовою програмування PHP;
MinifyCode – онлайн-сервіс, що надає можливість стискання
файлів
.html, .css, .js в один рядок та навпаки, приведення вмісту стиснених файлів до
читабельного та зрозумілого для розробника вигляду.
Арк.
ЧДТУ 01849.004 ПЗ
41
Змн. Арк. № докум. Підпис Дат
3.3 Вимоги до апаратного і програмного забезпечення
Оптимальні вимоги до апаратного забезпечення будуть такими:
Процесор Intel Core i5;
Операційна система: Windows, Linux;
Оперативна пам’ять: не менше 16 гігабайти;
Пропускна здатність мережі: не менше 500 мегабіт/секунда.
Оптимальні вимоги до програмного забезпечення:
Операційна система: macOS,Linux, Ubuntu, Fedora, Windows;
Браузер: Internet Explorer, Microsoft EDGE, Google Chrome, Google
Стабільне з’єднання з мережею Інтернет.
Арк.
ЧДТУ 01849.004 ПЗ
42
Змн. Арк. № докум. Підпис Дат
3.4 Адміністрування аналогового web-сайту браузерної гри Ninja
Warrior
Процес адміністрування аналогового web-сайту відбувається за допомогою
входу до папок що дозволяють змінювати стрктуру сайту по бажаню самого
розробника. Цей спосіб не можна назвати ідеальним але від допомогає запобігти
багатьом можливим помилкам при введені нової інформації та її додавання. Це
наведено на рис. 3.1.
Рисунок 3.1 – Список таблиць.
Арк.
ЧДТУ 01849.004 ПЗ
43
Змн. Арк. № докум. Підпис Дат
3.5 Структура бази даних
База даних на сам перед необхідна для накопичення, обробки, зберігання та
знищення даних, які будуть необхідні в процесі роботи аналогового web-сайту по
браузер ній грі Ninja Warrior. База даних – це сукупність таблиць пов’язаних між
собою первинним ключем, завдяки чому стає можливим отримання даних з
декількох таблиць за допомогою одного запиту.
В базі даних буде зберігатися дуже багато різних даних, такі як:
Головна (Про гру, інтерфейс);
Новини (назва новини, зміст новини);
Галерея (різноманітні зображення та їх перегляд)
Вікі (список різних ігрових ресурсів)
Підтримка – можливість кожного користувача отримати повноцінну
підтримку що допоможе йому отримати інформацію в більш повному обсязі та
досягти своєї мети в грі.
Список таблиць бази даних наведено на рис. 3.2.
Рисунок 3.2 – Список таблиць, котрі містить база даних.
Арк.
ЧДТУ 01849.004 ПЗ
44
Змн. Арк. № докум. Підпис Дат
3.6 Програмна реалізація аналогового web-сайту браузерної гри Ninja
Warrior
Для запуску аналогового та оновленого web-сайту по браузерній грі Ninja
Warrior буде обрано хостинг, через файловий менеджер на хостинг буде
завантажено всі файли, що входять до складу аналогового web-сайту по
браузерній грі Ninja Warrior. Файли успішно завантажено на хостинг (рис. 3.3).
Рисунок 3.3 – Файли, котрі було завантажено на хостинг.
Рисунок 3.4 – Вхід до phpMyAdmin, обрання та завантаження файлу з таблицями.
Арк.
ЧДТУ 01849.004 ПЗ
45
Змн. Арк. № докум. Підпис Дат
3.7 Інтерфейс аналогового web-сайту по браузер ній грі Ninja Warrior
Запуск аналогового web-сайта браузерної гри Ninja Warrior проводиться
шляхом введення в адресний рядок браузера посилання https://657f5cbfbef6.ngrok.io.
Вигляд головної сторінки сайту рис. 3.5.
Рисунок 3.5 – Головна сторінка аналогового web-сайта браузерної гри Ninja
Warrior
Користувача зустрічає не лише вкладка «Про гру» - він моще побачити ще
збоку «Останні новини» цей блок дозволяє переглядати різноманітну
інформацію а найголовніше в майбутньому там може зьявитися реклама яка
допоможе в підтримці сайту. Важливо зрозуміти що це просто блок з короткою
інформаціює котру користувач не може «відкрити» адже це короткі новини.
Новини пов’язані з гробю він може переглянути в вкладкі «Новини». Це можна
побачати на рисунку 3.6
Арк.
ЧДТУ 01849.004 ПЗ
46
Змн. Арк. № докум. Підпис Дат
Рисунок 3.6 – Меню «останні новини»
Користувач може відкрити вкладку «Галерея» та побачити як багато різної
графічної інформації додав розробник аби допомогти гравцеві отримувати
актуальну графічну інформацію пов’язану з грою. В майбутньому це можуть
бути різні концепт- арти та роботи самих користувачів. Переглянути можна на
рисунку 3.7
Рисунок 3.7 – Зображення вкладки «Галерея»
Арк.
ЧДТУ 01849.004 ПЗ
47
Змн. Арк. № докум. Підпис Дат
Дуже важливо аби під час гри та перегляду сайту гравець та користувач
міг отримати повноцінно інформацію. Саме тому за допомогою бази данних
була створена вкладка Вікі яка допомогає будь кому переглянути важливу
інформацію пов’язану з різною зовнішністью персонажей в грі.
Необхідно розуміти на ерших єтапах розробки що сайт розробляється на
ігрову тематику та для функціонуючої по сьогоднішній день грі – важливо аби
гравці мали змогу переглядати технічну інформацію повязану з їх ігровими
ресурсами та здобутками.
Тому ми створили повноцінну ігрову вікіпедію де користувач може
звернути свою увагу на добре та коректно подану йому інформацію та
скористатися нею.
Ткий елемент інтерфейсу як вікі може не аби як збагатити гру на нових
гравців та користувачів сайту що будуть переглядати більш розгорнуту
інформацію саме на сайті. На рисунку 3.8 можна побачити що знаходиться в
вкладкі «Вікі».
Рисунок 3.8 – Вкладка інтерфейсу «Вікі»
Арк.
ЧДТУ 01849.004 ПЗ
48
Змн. Арк. № докум. Підпис Дат
3.8 Висновки до третього розділу
У цьому розділі було виконано програмну реалізацію web-сайту який є
аналогом сайту по браузерній грі. Розроблена web система яка має широкий
функціонал, що дозволяє швидко та легко переглядати різноманітну інформацію
пов’язану з грою, задовольняє потреби користувачів в повній мірі та дозволяє
користуватися сайтом з будь якого пристрою.
Арк.
ЧДТУ 01849.004 ПЗ
49
Змн. Арк. № докум. Підпис Дат
ВИСНОВКИ
Розробка web-сайтів зумовлена необхідністю створення простого та
зручного інструменту для організації ефективного доступу користувачів до
інформації сайту та його контенту.
Існуючі аналоги web-сайтів мають різне оформлення, в одних більше
переважає зручність, зовнішній вигляд відходить на ішний план, а в інших все
разом – зручність в користуванні, гарний зовнішній вигляд та різноманітність
контенту який можна переглядати.
На початковому етапі розробки аналогового web-сайту по грі «Ninja Wars»
наведено вимоги до реалізації аналогового web-сайту, розроблено
структуру та описано архітектуру web-сайту для гри «Ninja Wars» У
кваліфікаційній роботі бакалавра було створено новий – аналоговий web-сайт
для нової гри «Ninja Warrior». На сайті реалізовано багато функцій якими може
скористатися користувач сайту. Можна переглядати новини та выдкривати
галерею повьязану з грою. Створенна власна вікі де користувачі зможуть
переглянути інформацію яка може їх цікавити. Аналоговий web-сайт
розроблений з використанням мови програмування JavaScript, системи
управління реляційними бази даних MySQL та мови гіпертекстової розмітки
документів НТМL.
Задачі, перераховані в постановці задачі виконані в повному обсязіі вчасно,
мета розробки web-сайту гри досягнута. Вимоги виконано з чітким дотриманням
технічного завдання.
Арк.
ЧДТУ 01849.004 ПЗ
50
Змн. Арк. № докум. Підпис Дат
ДОДАТОК А
ЗАТВЕРДЖЕНО
Зав. кафедри ІТП
Прокопенко Т.О.
« » 2021 р.
РОЗРОБКА АНАЛОГОВОГО ТА ОНОВЛЕНОГО САЙТУ ПО БРАУЗЕРНІЙ ГРІ NINJA
WARRIOR
Специфікація
482 ЧДТУ 01849 – 01
Листів 2
Розробник Лісненко В.Ю.
Керівник Карапетян А.Р.
Н. контроль Колесніков К.В.
Черкаси 2021
2
482 ЧДТУ 01849 – 01
Позначення Найменування Примітка
Документація
482 ЧДТУ 01849 – 01 12 01 Текст програми
РОЗРОБКА АНАЛОГОВОГО ТА ОНОВЛЕНОГО САЙТУ ПО БРАУЗЕРНІЙ ГРІ NINJA
WARRIOR
482 ЧДТУ 01849 – 01 12 01
Текст програми
Листів 7
Розробник Лісненко В.Ю.
Черкаси 2021
3
482 ЧДТУ 01849 – 01 12 01
<!DOCTYPE
</body></html>
<head>
<meta charset="UTF-8">
<title>Ninja Wars</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<nav>
<div class="menu">
<div class="menu-item">
<a href="/">Головна</a>
</div>
<div class="menu-item">
<a href="/gallery">Галерея</a>
</div>
<div class="menu-item">
<a href="/news">Новини</a>
</div>
<div class="menu-item">
<a href="/wiki">Вікі</a>
</div>
<div class="menu-item">
<a href="/support">Підтримка</a>
</div>
</div>
</nav> <div class="content">
<aside>
<h2 class="block-title">Останні новини</h2>
<div class="latest-news">
<div class="new">
<img src="/img/latest-new.jpg">
<p>Аніме Реінкарнація безробітнього продовжено на другий сезон, що вийде влітку 2021 року</p>
<hr>
</div>
<div class="new">
<img src="/img/latest-new1.jpg">
<p>В літку 2021 року очікується довгоочікуване продовження аніме "Bleach". Фанати вже зачекалися повернення
легенди.</p>
<hr>
</div>
<div class="new">
<img src="/img/latest-new2.jpg">
<p>Не пропустіть, вже скоро - в кінотеатрах країни, довгоочікуваний фільм "Боруто", продовження популярного
аніме "Наруто".</p>
<hr>
</div>
<div class="new">
<img src="/img/latest-new4.jpg">
<p>Рекомендуємо до перегляду чудове, фантастичне аніме "Гуррен Лагган" - обіцяємо, цей витвір мистецтва знайде
місце в вашому серці.</p>
<hr>
</div>
</div>
</aside>
<main>
<div class="game-info">
<h2 class="block-title">Про гру</h2>
<p>Ninja Warrior - продовження нашумілої гри Ninja Wars з улюбленими персонажами з аніме Наруто і Бліч.</p>
<img src="/img/bleach.jpg">
<p>Який анімешник не мріяв стати Наруто і нарешті втілити в життя Велику мрію - завоювати титул Каге? Або в образі
Ичиго врятувати Оріхіме і підкорити палац Лас ночес?
Вибір персонажа в Ninja Wars 2 практично не обмежений. Тут знайдуться всі улюблені герої: 4-й Хокаге, Цунаде,
Джиро, Наруто, Саске, Сакура, Какаші, Ичиго, Оріхіме, Ісіда, Йоруічі, Урахара, Луффі, Санджой, Імператриця Боа Хенкок. І це
4
482 ЧДТУ 01849 – 01 12 01
ще далеко не повний список. Справа за малим: в жорстокому бою або вирішивши головоломну завдання, роздобути потрібну
одягання.</p>
<hr>
<img src="/img/naruto.jpg">
<p>Гравцеві більше не доведеться бути ніндзя-одинаком - в Ninja Wars 2 з'явилися клани! Ретельно пророблена кланова
система, з війнами і клановими івентами, порадує наших фанатів, а дружба з легендарними ніндзя допоможе стати набагато
сильніше.
Серед нововведень другої версії гри будуть Занпакто, Банкай і Крила Ангела, що надають герою додаткові
характеристики.</p>
<hr>
<img src="/img/about4.jpg">
<p>Найактивніші і товариські гравці зможуть отримувати подарунки за час перебування в грі, а також щоденні і сезонні
призи. І звичайно, брати участь у веселих івентах, щоб прокачати свого персонажа, придбати нові речі, вміння і титули, а також
показати всім і кожному свою силу!</p>
</div>
</main>
</div>
<div id="sfwdt00eaa6" class="sf-toolbar sf-display-none" role="region" aria-label="Symfony Web Debug Toolbar"></div><script
nonce="81614670d89647e6b8fcb00699602b52">/*<![CDATA[*/ Sfjs = (function() { "use strict"; if ('classList' in
document.documentElement) { var hasClass = function (el, cssClass) { return el.classList.contains(cssClass); }; var
removeClass = function(el, cssClass) { el.classList.remove(cssClass); }; var addClass = function(el, cssClass) {
el.classList.add(cssClass); }; var toggleClass = function(el, cssClass) { el.classList.toggle(cssClass); }; } else { var
hasClass = function (el, cssClass) { return el.className.match(new RegExp('\\b' + cssClass + '\\b')); }; var removeClass =
function(el, cssClass) { el.className = el.className.replace(new RegExp('\\b' + cssClass + '\\b'), ' '); }; var addClass = function(el,
cssClass) { if (!hasClass(el, cssClass)) { el.className += " " + cssClass; } }; var toggleClass = function(el, cssClass) { hasClass(el,
cssClass) ? removeClass(el, cssClass) : addClass(el, cssClass); }; } var noop = function() {}; var profilerStorageKey =
'symfony/profiler/'; var addEventListener; var el = document.createElement('div'); if (!('addEventListener' in el)) {
addEventListener = function (element, eventName, callback) { element.attachEvent('on' + eventName, callback); }; }
else { addEventListener = function (element, eventName, callback) { element.addEventListener(eventName, callback,
false); }; } var request = function(url, onSuccess, onError, payload, options) { var xhr = window.XMLHttpRequest ?
new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); options = options || {}; options.maxTries =
options.maxTries || 0; xhr.open(options.method || 'GET', url, true); xhr.setRequestHeader('X-Requested-With',
'XMLHttpRequest'); xhr.onreadystatechange = function(state) { if (4 !== xhr.readyState) { return null;
} if (xhr.status == 404 && options.maxTries > 1) { setTimeout(function(){ options.maxTries--;
request(url, onSuccess, onError, payload, options); }, 1000); return null; } if (200 ===
xhr.status) { (onSuccess || noop)(xhr); } else { (onError || noop)(xhr); } };
xhr.send(payload || ''); }; var getPreference = function(name) { if (!window.localStorage) { return null; }
return localStorage.getItem(profilerStorageKey + name); }; var setPreference = function(name, value) { if
(!window.localStorage) { return null; } localStorage.setItem(profilerStorageKey + name, value); }; var
requestStack = []; var extractHeaders = function(xhr, stackElement) { /* Here we avoid to call xhr.getResponseHeader in order
to */ /* prevent polluting the console with CORS security errors */ var allHeaders = xhr.getAllResponseHeaders(); var
ret; if (ret = allHeaders.match(/^x-debug-token:\s+(.*)$/im)) { stackElement.profile = ret[1]; } if (ret =
allHeaders.match(/^x-debug-token-link:\s+(.*)$/im)) { stackElement.profilerUrl = ret[1]; } if (ret =
allHeaders.match(/^Symfony-Debug-Toolbar-Replace:\s+(.*)$/im)) { stackElement.toolbarReplaceFinished = false;
stackElement.toolbarReplace = '1' === ret[1]; } }; var successStreak = 4; var pendingRequests = 0; var
renderAjaxRequests = function() { var requestCounter = document.querySelector('.sf-toolbar-ajax-request-counter'); if
(!requestCounter) { return; } requestCounter.textContent = requestStack.length; var infoSpan =
document.querySelector(".sf-toolbar-ajax-info"); if (infoSpan) { infoSpan.textContent = requestStack.length + ' AJAX
request' + (requestStack.length !== 1 ? 's' : ''); } var ajaxToolbarPanel = document.querySelector('.sf-toolbar-block-ajax');
if (requestStack.length) { ajaxToolbarPanel.style.display = 'block'; } else { ajaxToolbarPanel.style.display =
'none'; } if (pendingRequests > 0) { addClass(ajaxToolbarPanel, 'sf-ajax-request-loading'); } else if
(successStreak < 4) { addClass(ajaxToolbarPanel, 'sf-toolbar-status-red'); removeClass(ajaxToolbarPanel, 'sf-ajax-
request-loading'); } else { removeClass(ajaxToolbarPanel, 'sf-ajax-request-loading');
removeClass(ajaxToolbarPanel, 'sf-toolbar-status-red'); } }; var startAjaxRequest = function(index) { var tbody =
document.querySelector('.sf-toolbar-ajax-request-list'); if (!tbody) { return; } var nbOfAjaxRequest =
tbody.rows.length; if (nbOfAjaxRequest >= 100) { tbody.deleteRow(0); } var request = requestStack[index];
pendingRequests++; var row = document.createElement('tr'); request.DOMNode = row; var requestNumberCell =
document.createElement('td'); requestNumberCell.textContent = index + 1; row.appendChild(requestNumberCell); var
profilerCell = document.createElement('td'); profilerCell.textContent = 'n/a'; row.appendChild(profilerCell); var
methodCell = document.createElement('td'); methodCell.textContent = request.method; row.appendChild(methodCell);
var typeCell = document.createElement('td'); typeCell.textContent = request.type; row.appendChild(typeCell); var
statusCodeCell = document.createElement('td'); var statusCode = document.createElement('span'); statusCode.textContent =
'n/a'; statusCodeCell.appendChild(statusCode); row.appendChild(statusCodeCell); var pathCell =
5
482 ЧДТУ 01849 – 01 12 01
document.createElement('td'); pathCell.className = 'sf-ajax-request-url'; if ('GET' === request.method) { var
pathLink = document.createElement('a'); pathLink.setAttribute('href', request.url); pathLink.textContent = request.url;
pathCell.appendChild(pathLink); } else { pathCell.textContent = request.url; } pathCell.setAttribute('title',
request.url); row.appendChild(pathCell); var durationCell = document.createElement('td'); durationCell.className =
'sf-ajax-request-duration'; durationCell.textContent = 'n/a'; row.appendChild(durationCell);
request.liveDurationHandle = setInterval(function() { durationCell.textContent = (new Date() - request.start) + 'ms'; },
100); row.className = 'sf-ajax-request sf-ajax-request-loading'; tbody.insertBefore(row, null); var toolbarInfo =
document.querySelector('.sf-toolbar-block-ajax .sf-toolbar-info'); toolbarInfo.scrollTop = toolbarInfo.scrollHeight;
renderAjaxRequests(); }; var finishAjaxRequest = function(index) { var request = requestStack[index];
clearInterval(request.liveDurationHandle); if (!request.DOMNode) { return; } if (request.toolbarReplace &&
!request.toolbarReplaceFinished && request.profile) { /* Flag as complete because finishAjaxRequest can be called multiple
times. */ request.toolbarReplaceFinished = true; /* Search up through the DOM to find the toolbar's container ID. */
for (var elem = request.DOMNode; elem && elem !== document; elem = elem.parentNode) { if (elem.id.match(/^sfwdt/)) {
Sfjs.loadToolbar(elem.id.replace(/^sfwdt/, ''), request.profile); break; } } }
pendingRequests--; var row = request.DOMNode; /* Unpack the children from the row */ var profilerCell =
row.children[1]; var methodCell = row.children[2]; var statusCodeCell = row.children[4]; var statusCodeElem =
statusCodeCell.children[0]; var durationCell = row.children[6]; if (request.error) { row.className = 'sf-ajax-request
sf-ajax-request-error'; methodCell.className = 'sf-ajax-request-error'; successStreak = 0; } else {
row.className = 'sf-ajax-request sf-ajax-request-ok'; successStreak++; } if (request.statusCode) { if
(request.statusCode < 300) { statusCodeElem.setAttribute('class', 'sf-toolbar-status'); } else if (request.statusCode <
400) { statusCodeElem.setAttribute('class', 'sf-toolbar-status sf-toolbar-status-yellow'); } else {
statusCodeElem.setAttribute('class', 'sf-toolbar-status sf-toolbar-status-red'); } statusCodeElem.textContent =
request.statusCode; } else { statusCodeElem.setAttribute('class', 'sf-toolbar-status sf-toolbar-status-red'); } if
(request.duration) { durationCell.textContent = request.duration + 'ms'; } if (request.profilerUrl) {
profilerCell.textContent = ''; var profilerLink = document.createElement('a'); profilerLink.setAttribute('href',
request.profilerUrl); profilerLink.textContent = request.profile; profilerCell.appendChild(profilerLink); }
renderAjaxRequests(); }; if (window.fetch && window.fetch.polyfill === undefined) { var oldFetch =
window.fetch; window.fetch = function () { var promise = oldFetch.apply(this, arguments); var url =
arguments[0]; var params = arguments[1]; var paramType = Object.prototype.toString.call(arguments[0]);
if (paramType === '[object Request]') { url = arguments[0].url; params = { method:
arguments[0].method, credentials: arguments[0].credentials, headers: arguments[0].headers,
mode: arguments[0].mode, redirect: arguments[0].redirect }; } else { url =
String(url); } if (!url.match(new RegExp("^\/((index|app(_[\\w]+)?)\\.php\/)?_wdt"))) { var method =
'GET'; if (params && params.method !== undefined) { method = params.method; }
var stackElement = { error: false, url: url, method: method, type: 'fetch',
start: new Date() }; var idx = requestStack.push(stackElement) - 1; promise.then(function (r) {
stackElement.duration = new Date() - stackElement.start; stackElement.error = r.status < 200 || r.status >= 400;
stackElement.statusCode = r.status; stackElement.profile = r.headers.get('x-debug-token');
stackElement.profilerUrl = r.headers.get('x-debug-token-link'); stackElement.toolbarReplaceFinished = false;
stackElement.toolbarReplace = '1' === r.headers.get('Symfony-Debug-Toolbar-Replace'); finishAjaxRequest(idx);
}, function (e){ stackElement.error = true; finishAjaxRequest(idx); });
startAjaxRequest(idx); } return promise; }; } if (window.XMLHttpRequest &&
XMLHttpRequest.prototype.addEventListener) { var proxied = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url, async, user, pass) { var self = this; /* prevent logging
AJAX calls to static and inline files, like templates */ var path = url; if (url.substr(0, 1) === '/') { if (0
=== url.indexOf('')) { path = url.substr(0); } } else if (0 ===
url.indexOf('http\u003A\/\/ninja.loc')) { path = url.substr(16); } if (!path.match(new
RegExp("^\/((index|app(_[\\w]+)?)\\.php\/)?_wdt"))) { var stackElement = { error: false,
url: url, method: method, type: 'xhr', start : new Date() }; var
idx = requestStack.push(stackElement) - 1; this.addEventListener('readystatechange', function() { if
(self.readyState == 4) { stackElement.duration = new Date() - stackElement.start;
stackElement.error = self.status < 200 || self.status >= 400; stackElement.statusCode = self.status;
extractHeaders(self, stackElement); finishAjaxRequest(idx); } }, false);
startAjaxRequest(idx); } proxied.apply(this, Array.prototype.slice.call(arguments)); }; }
return { hasClass: hasClass, removeClass: removeClass, addClass: addClass, toggleClass: toggleClass,
getPreference: getPreference, setPreference: setPreference, addEventListener: addEventListener, request: request,
renderAjaxRequests: renderAjaxRequests, load: function(selector, url, onSuccess, onError, options) { var el =
document.getElementById(selector); if (el && el.getAttribute('data-sfurl') !== url) { request( url,
function(xhr) { el.innerHTML = xhr.responseText; el.setAttribute('data-sfurl', url);
removeClass(el, 'loading'); var pending = pendingRequests; for (var i = 0; i < requestStack.length; i++) {
startAjaxRequest(i); if (requestStack[i].duration) { finishAjaxRequest(i); }
} /* Revert the pending state in case there was a start called without a finish above. */ pendingRequests =
pending; (onSuccess || noop)(xhr, el); }, function(xhr) { (onError || noop)(xhr, el); },
'', options ); } return this; }, loadToolbar: function(token, newToken) {
6
482 ЧДТУ 01849 – 01 12 01
newToken = (newToken || token); this.load( 'sfwdt' + token,
'http\u003A\/\/ninja.loc\/_wdt\/xxxxxx'.replace(/xxxxxx/, newToken), function(xhr, el) { /* Evaluate in global
scope scripts embedded inside the toolbar */ var i, scripts = [].slice.call(el.querySelectorAll('script')); for (i =
0; i < scripts.length; ++i) { eval.call({}, scripts[i].firstChild.nodeValue); } el.style.display = -
1 !== xhr.responseText.indexOf('sf-toolbarreset') ? 'block' : 'none'; if (el.style.display == 'none') { return;
} if (getPreference('toolbar/displayState') == 'none') { document.getElementById('sfToolbarMainContent-'
+ newToken).style.display = 'none'; document.getElementById('sfToolbarClearer-' + newToken).style.display = 'none';
document.getElementById('sfMiniToolbar-' + newToken).style.display = 'block'; } else {
document.getElementById('sfToolbarMainContent-' + newToken).style.display = 'block';
document.getElementById('sfToolbarClearer-' + newToken).style.display = 'block';
document.getElementById('sfMiniToolbar-' + newToken).style.display = 'none'; } /* Handle toolbar-info
position */ var toolbarBlocks = [].slice.call(el.querySelectorAll('.sf-toolbar-block')); for (i = 0; i <
toolbarBlocks.length; ++i) { toolbarBlocks[i].onmouseover = function () { var toolbarInfo =
this.querySelectorAll('.sf-toolbar-info')[0]; var pageWidth = document.body.clientWidth; var
elementWidth = toolbarInfo.offsetWidth; var leftValue = (elementWidth + this.offsetLeft) - pageWidth;
var rightValue = (elementWidth + (pageWidth - this.offsetLeft)) - pageWidth; /* Reset right and left value, useful on
window resize */ toolbarInfo.style.right = ''; toolbarInfo.style.left = ''; if
(elementWidth > pageWidth) { toolbarInfo.style.left = 0; } else if (leftValue >
0 && rightValue > 0) { toolbarInfo.style.right = (rightValue * -1) + 'px'; } else if (leftValue < 0)
{ toolbarInfo.style.left = 0; } else { toolbarInfo.style.right = '0px';
} }; } var hideButton = document.getElementById('sfToolbarHideButton-' + newToken);
var hideButtonSvg = hideButton.querySelector('svg'); hideButtonSvg.setAttribute('aria-hidden', 'true');
hideButtonSvg.setAttribute('focusable', 'false'); addEventListener(hideButton, 'click', function (event) {
event.preventDefault(); var p = this.parentNode; p.style.display = 'none';
(p.previousElementSibling || p.previousSibling).style.display = 'none'; document.getElementById('sfMiniToolbar-' +
newToken).style.display = 'block'; setPreference('toolbar/displayState', 'none'); }); var
showButton = document.getElementById('sfToolbarMiniToggler-' + newToken); var showButtonSvg =
showButton.querySelector('svg'); showButtonSvg.setAttribute('aria-hidden', 'true');
showButtonSvg.setAttribute('focusable', 'false'); addEventListener(showButton, 'click', function (event) {
event.preventDefault(); var elem = this.parentNode; if (elem.style.display == 'none') {
document.getElementById('sfToolbarMainContent-' + newToken).style.display = 'none';
document.getElementById('sfToolbarClearer-' + newToken).style.display = 'none'; elem.style.display = 'block';
} else { document.getElementById('sfToolbarMainContent-' + newToken).style.display = 'block';
document.getElementById('sfToolbarClearer-' + newToken).style.display = 'block'; elem.style.display = 'none'
} setPreference('toolbar/displayState', 'block'); }); renderAjaxRequests();
addEventListener(document.querySelector('.sf-toolbar-ajax-clear'), 'click', function() { requestStack = [];
renderAjaxRequests(); successStreak = 4; document.querySelector('.sf-toolbar-ajax-request-
list').innerHTML = ''; }); addEventListener(document.querySelector('.sf-toolbar-block-ajax'), 'mouseenter',
function (event) { var elem = document.querySelector('.sf-toolbar-block-ajax .sf-toolbar-info');
elem.scrollTop = elem.scrollHeight; }); addEventListener(document.querySelector('.sf-toolbar-block-ajax >
.sf-toolbar-icon'), 'click', function (event) { event.preventDefault(); toggleClass(this.parentNode, 'hover');
}); var dumpInfo = document.querySelector('.sf-toolbar-block-dump .sf-toolbar-info'); if (null !== dumpInfo)
{ addEventListener(dumpInfo, 'sfbeforedumpcollapse', function () { dumpInfo.style.minHeight =
dumpInfo.getBoundingClientRect().height+'px'; }); addEventListener(dumpInfo, 'mouseleave', function
() { dumpInfo.style.minHeight = ''; }); } }, function(xhr) {
if (xhr.status !== 0) { var sfwdt = document.getElementById('sfwdt' + token); sfwdt.innerHTML = '\
<div class="sf-toolbarreset">\ <div class="sf-toolbar-icon"><svg width="26" height="28"
xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 26 28" enable-background="new 0 0 26 28"
xml:space="preserve"><path fill="#FFFFFF" d="M13 0C5.8 0 0 5.8 0 13c0 7.2 5.8 13 13 13c7.2 0 13-5.8 13-13C26 5.8 20.2 0 13 0z M20
7.5 c-0.6 0-1-0.3-1-0.9c0-0.2 0-0.4 0.2-0.6c0.1-0.3 0.2-0.3 0.2-0.4c0-0.3-0.5-0.4-0.7-0.4c-2 0.1-2.5 2.7-2.9 4.8l-0.2 1.1 c1.1 0.2 1.9 0 2.4-
0.3c0.6-0.4-0.2-0.8-0.1-1.3C18 9.2 18.4 9 18.7 8.9c0.5 0 0.8 0.5 0.8 1c0 0.8-1.1 2-3.3 1.9 c-0.3 0-0.5 0-0.7-0.1L15 14.1c-0.4 1.7-0.9 4.1-
2.6 6.2c-1.5 1.8-3.1 2.1-3.8 2.1c-1.3 0-2.1-0.6-2.2-1.6c0-0.9 0.8-1.4 1.3-1.4 c0.7 0 1.2 0.5 1.2 1.1c0 0.5-0.2 0.6-0.4 0.7c-0.1 0.1-0.3 0.2-0.3
0.4c0 0.1 0.1 0.3 0.4 0.3c0.5 0 0.9-0.3 1.2-0.5 c1.3-1 1.7-2.9 2.4-6.2l0.1-0.8c0.2-1.1 0.5-2.3 0.8-3.5c-0.9-0.7-1.4-1.5-2.6-1.8c-0.8-0.2-1.3
0-1.7 0.4C8.4 10 8.6 10.7 9 11.1 l0.7 0.7c0.8 0.9 1.3 1.7 1.1 2.7c-0.3 1.6-2.1 2.8-4.3 2.1c-1.9-0.6-2.2-1.9-2-2.7c0.2-0.6 0.7-0.8 1.2-0.6 c0.5
0.2 0.7 0.8 0.6 1.3c0 0.1 0 0.1-0.1 0.3C6 15 5.9 15.2 5.9 15.3c-0.1 0.4 0.4 0.7 0.8 0.8c0.8 0.3 1.7-0.2 1.9-0.9 c0.2-0.6-0.2-1.1-0.4-1.2l-0.8-
0.9c-0.4-0.4-1.2-1.5-0.8-2.8c0.2-0.5 0.5-1 0.9-1.4c1-0.7 2-0.8 3-0.6c1.3 0.4 1.9 1.2 2.8 1.9 c0.5-1.3 1.1-2.6 2-3.8c0.9-1 2-1.7 3.3-1.8C20
4.8 21 5.4 21 6.3C21 6.7 20.8 7.5 20 7.5z"/></svg></div>\ An error occurred while loading the web debug toolbar.
<a href="http\u003A\/\/ninja.loc\/_profiler\/' + newToken + '>Open the web profiler.</a>\ </div>\ ';
sfwdt.setAttribute('class', 'sf-toolbar sf-error-toolbar'); } }, { maxTries: 5 } );
return this; }, toggle: function(selector, elOn, elOff) { var tmp = elOn.style.display, el =
document.getElementById(selector); elOn.style.display = elOff.style.display; elOff.style.display = tmp; if (el)
{ el.style.display = 'none' === tmp ? 'none' : 'block'; } return this; }, createTabs: function() {
var tabGroups = document.querySelectorAll('.sf-tabs:not([data-processed=true])'); /* create the tab navigation for each group of
tabs */ for (var i = 0; i < tabGroups.length; i++) { var tabs = tabGroups[i].querySelectorAll(':scope > .tab');
7
482 ЧДТУ 01849 – 01 12 01
var tabNavigation = document.createElement('ul'); tabNavigation.className = 'tab-navigation'; var selectedTabId
= 'tab-' + i + '-0'; /* select the first tab by default */ for (var j = 0; j < tabs.length; j++) { var tabId = 'tab-' + i + '-'
+ j; var tabTitle = tabs[j].querySelector('.tab-title').innerHTML; var tabNavigationItem =
document.createElement('li'); tabNavigationItem.setAttribute('data-tab-id', tabId); if (hasClass(tabs[j],
'active')) { selectedTabId = tabId; } if (hasClass(tabs[j], 'disabled')) { addClass(tabNavigationItem, 'disabled'); }
tabNavigationItem.innerHTML = tabTitle; tabNavigation.appendChild(tabNavigationItem); var tabContent =
tabs[j].querySelector('.tab-content'); tabContent.parentElement.setAttribute('id', tabId); }
tabGroups[i].insertBefore(tabNavigation, tabGroups[i].firstChild); addClass(document.querySelector('[data-tab-id="' +
selectedTabId + '"]'), 'active'); } /* display the active tab and add the 'click' event listeners */ for (i = 0; i <
tabGroups.length; i++) { tabNavigation = tabGroups[i].querySelectorAll(':scope > .tab-navigation li'); for (j = 0; j <
tabNavigation.length; j++) { tabId = tabNavigation[j].getAttribute('data-tab-id');
document.getElementById(tabId).querySelector('.tab-title').className = 'hidden'; if (hasClass(tabNavigation[j], 'active')) {
document.getElementById(tabId).className = 'block'; } else {
document.getElementById(tabId).className = 'hidden'; } tabNavigation[j].addEventListener('click',
function(e) { var activeTab = e.target || e.srcElement; /* needed because when the tab contains HTML
contents, user can click */ /* on any of those elements instead of their parent '<li>' element */ while
(activeTab.tagName.toLowerCase() !== 'li') { activeTab = activeTab.parentNode; } /*
get the full list of tabs through the parent of the active tab element */ var tabNavigation = activeTab.parentNode.children;
for (var k = 0; k < tabNavigation.length; k++) { var tabId = tabNavigation[k].getAttribute('data-tab-id');
document.getElementById(tabId).className = 'hidden'; removeClass(tabNavigation[k], 'active'); }
addClass(activeTab, 'active'); var activeTabId = activeTab.getAttribute('data-tab-id');
document.getElementById(activeTabId).className = 'block'; }); } tabGroups[i].setAttribute('data-
processed', 'true'); } }, createToggles: function() { var toggles = document.querySelectorAll('.sf-
toggle:not([data-processed=true])'); for (var i = 0; i < toggles.length; i++) { var elementSelector =
toggles[i].getAttribute('data-toggle-selector'); var element = document.querySelector(elementSelector);
addClass(element, 'sf-toggle-content'); if (toggles[i].hasAttribute('data-toggle-initial') && toggles[i].getAttribute('data-toggle-
initial') == 'display') { addClass(toggles[i], 'sf-toggle-on'); addClass(element, 'sf-toggle-visible'); }
else { addClass(toggles[i], 'sf-toggle-off'); addClass(element, 'sf-toggle-hidden'); }
addEventListener(toggles[i], 'click', function(e) { e.preventDefault(); if ('' !==
window.getSelection().toString()) { /* Don't do anything on text selection */ return; }
var toggle = e.target || e.srcElement; /* needed because when the toggle contains HTML contents, user can click */
/* on any of those elements instead of their parent '.sf-toggle' element */ while (!hasClass(toggle, 'sf-toggle')) {
toggle = toggle.parentNode; } var element = document.querySelector(toggle.getAttribute('data-toggle-
selector')); toggleClass(toggle, 'sf-toggle-on'); toggleClass(toggle, 'sf-toggle-off');
toggleClass(element, 'sf-toggle-hidden'); toggleClass(element, 'sf-toggle-visible'); /* the toggle doesn't change
its contents when clicking on it */ if (!toggle.hasAttribute('data-toggle-alt-content')) { return;
} if (!toggle.hasAttribute('data-toggle-original-content')) { toggle.setAttribute('data-toggle-original-content',
toggle.innerHTML); } var currentContent = toggle.innerHTML; var originalContent =
toggle.getAttribute('data-toggle-original-content'); var altContent = toggle.getAttribute('data-toggle-alt-content');
toggle.innerHTML = currentContent !== altContent ? altContent : originalContent; }); /* Prevents from
disallowing clicks on links inside toggles */ var toggleLinks = toggles[i].querySelectorAll('a'); for (var j = 0; j <
toggleLinks.length; j++) { addEventListener(toggleLinks[j], 'click', function(e) { e.stopPropagation();
}); } toggles[i].setAttribute('data-processed', 'true'); } }, createFilters: function() {
document.querySelectorAll('[data-filters] [data-filter]').forEach(function (filter) { var filters = filter.closest('[data-filters]'),
type = 'choice', name = filter.dataset.filter, ucName = name.charAt(0).toUpperCase()+name.slice(1),
list = document.createElement('ul'), values = filters.dataset['filter'+ucName] || filters.querySelectorAll('[data-filter-
'+name+']'), labels = {}, defaults = null, indexed = {}, processed = {};
if (typeof values === 'string') { type = 'level'; labels = values.split(','); values =
values.toLowerCase().split(','); defaults = values.length - 1; } addClass(list, 'filter-list');
addClass(list, 'filter-list-'+type); values.forEach(function (value, i) { if (value instanceof HTMLElement) {
value = value.dataset['filter'+ucName]; } if (value in processed) { return; }
var option = document.createElement('li'), label = i in labels ? labels[i] : value, active = false,
matches; if ('' === label) { option.innerHTML = '<em>(none)</em>'; } else {
option.innerText = label; } option.dataset.filter = value; option.setAttribute('title', 1 ===
(matches = filters.querySelectorAll('[data-filter-'+name+'="'+value+'"]').length) ? 'Matches 1 row' : 'Matches '+matches+' rows');
indexed[value] = i; list.appendChild(option); addEventListener(option, 'click', function () { if
('choice' === type) { filters.querySelectorAll('[data-filter-'+name+']').forEach(function (row) { if
(option.dataset.filter === row.dataset['filter'+ucName]) { toggleClass(row, 'filter-hidden-'+name);
} }); toggleClass(option, 'active'); } else if ('level' === type) { if
(i === this.parentNode.querySelectorAll('.active').length - 1) { return; }
this.parentNode.querySelectorAll('li').forEach(function (currentOption, j) { if (j <= i) {
addClass(currentOption, 'active'); if (i === j) { addClass(currentOption, 'last-active');
} else { removeClass(currentOption, 'last-active'); } } else {
removeClass(currentOption, 'active'); removeClass(currentOption, 'last-active'); }
8
482 ЧДТУ 01849 – 01 12 01
}); filters.querySelectorAll('[data-filter-'+name+']').forEach(function (row) { if (i <
indexed[row.dataset['filter'+ucName]]) { addClass(row, 'filter-hidden-'+name); } else {
removeClass(row, 'filter-hidden-'+name); } }); } });
if ('choice' === type) { active = null === defaults || 0 <= defaults.indexOf(value); } else if ('level' === type)
{ active = i <= defaults; if (active && i === defaults) { addClass(option, 'last-active');
} } if (active) { addClass(option, 'active'); } else {
filters.querySelectorAll('[data-filter-'+name+'="'+value+'"]').forEach(function (row) { toggleClass(row, 'filter-hidden-
'+name); }); } processed[value] = true; }); if (1 <
list.childNodes.length) { filter.appendChild(list); filter.dataset.filtered = ''; } }); }
}; })(); Sfjs.addEventListener(document, 'DOMContentLoaded', function() { Sfjs.createTabs(); Sfjs.createToggles();
});/*]]>*/</script><style nonce="b96df222e18c224174a33846760e614b"> .sf-minitoolbar { background-color: #222; border-top-
left-radius: 4px; bottom: 0; box-sizing: border-box; display: none; height: 36px; padding: 6px; position: fixed; right: 0; z-
index: 99999;}.sf-minitoolbar button { background-color: transparent; padding: 0; border: none;}.sf-minitoolbar svg,.sf-minitoolbar
img { max-height: 24px; max-width: 24px; display: inline;}.sf-toolbar-clearer { clear: both; height: 36px;}.sf-display-none {
display: none;}.sf-toolbarreset * { box-sizing: content-box; vertical-align: baseline; letter-spacing: normal; width: auto;}.sf-
toolbarreset { background-color: #222; bottom: 0; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); color: #EEE; font: 11px Arial, sans-
serif; left: 0; margin: 0; padding: 0 36px 0 0; position: fixed; right: 0; text-align: left; text-transform: none; z-index: 99999;
direction: ltr; /* neutralize the aliasing defined by external CSS styles */ -webkit-font-smoothing: subpixel-antialiased; -moz-osx-
font-smoothing: auto;}.sf-toolbarreset abbr { border: dashed #777; border-width: 0 0 1px;}.sf-toolbarreset svg,.sf-toolbarreset img {
height: 20px; width: 20px; display: inline-block;}.sf-toolbarreset .hide-button { background: #444; display: block; position:
absolute; top: 0; right: 0; width: 36px; height: 36px; cursor: pointer; text-align: center; border: none; margin: 0; padding:
0;}.sf-toolbarreset .hide-button svg { max-height: 18px; margin-top: 1px;}.sf-toolbar-block { cursor: default; display: block;
float: left; height: 36px; margin-right: 0; white-space: nowrap; max-width: 15%;}.sf-toolbar-block > a,.sf-toolbar-block > a:hover {
display: block; text-decoration: none; background-color: transparent; color: inherit;}.sf-toolbar-block span { display: inline-
block;}.sf-toolbar-block .sf-toolbar-value { color: #F5F5F5; font-size: 13px; line-height: 36px; padding: 0;}.sf-toolbar-block .sf-
toolbar-label,.sf-toolbar-block .sf-toolbar-class-separator { color: #AAA; font-size: 12px;}.sf-toolbar-block .sf-toolbar-info { border-
collapse: collapse; display: table; z-index: 100000;}.sf-toolbar-block hr { border-top: 1px solid #777; margin: 4px 0; padding-top:
4px;}.sf-toolbar-block .sf-toolbar-info-piece { /* this 'border-bottom' trick is needed because 'margin-bottom' doesn't work for table rows
*/ border-bottom: solid transparent 3px; display: table-row;}.sf-toolbar-block .sf-toolbar-info-piece-additional,.sf-toolbar-block .sf-
toolbar-info-piece-additional-detail { display: none;}.sf-toolbar-block .sf-toolbar-info-group { margin-bottom: 4px; padding-bottom:
2px; border-bottom: 1px solid #333333;}.sf-toolbar-block .sf-toolbar-info-group:last-child { margin-bottom: 0; padding-bottom: 0;
border-bottom: none;}.sf-toolbar-block .sf-toolbar-info-piece .sf-toolbar-status { padding: 2px 5px; margin-bottom: 0;}.sf-toolbar-
block .sf-toolbar-info-piece .sf-toolbar-status + .sf-toolbar-status { margin-left: 4px;}.sf-toolbar-block .sf-toolbar-info-piece:last-child {
margin-bottom: 0;}div.sf-toolbar .sf-toolbar-block .sf-toolbar-info-piece a { color: #99CDD8; text-decoration: underline;}div.sf-toolbar
.sf-toolbar-block a:hover { text-decoration: none;}.sf-toolbar-block .sf-toolbar-info-piece b { color: #AAA; display: table-cell; font-
size: 11px; padding: 4px 8px 4px 0;}.sf-toolbar-block:not(.sf-toolbar-block-dump) .sf-toolbar-info-piece span { color: #F5F5F5;}.sf-
toolbar-block .sf-toolbar-info-piece span { font-size: 12px;}.sf-toolbar-block .sf-toolbar-info { background-color: #444; bottom:
36px; color: #F5F5F5; display: none; padding: 9px 0; position: absolute;}.sf-toolbar-block .sf-toolbar-info:empty { visibility:
hidden;}.sf-toolbar-block .sf-toolbar-status { display: inline-block; color: #FFF; background-color: #666; padding: 3px 6px;
margin-bottom: 2px; vertical-align: middle; min-width: 15px; min-height: 13px; text-align: center;}.sf-toolbar-block .sf-toolbar-
status-green { background-color: #4F805D;}.sf-toolbar-block .sf-toolbar-status-red { background-color: #B0413E;}.sf-toolbar-block
.sf-toolbar-status-yellow { background-color: #A46A1F;}.sf-toolbar-block.sf-toolbar-status-green { background-color: #4F805D;
color: #FFF;}.sf-toolbar-block.sf-toolbar-status-red { background-color: #B0413E; color: #FFF;}.sf-toolbar-block.sf-toolbar-status-
yellow { background-color: #A46A1F; color: #FFF;}.sf-toolbar-block-request .sf-toolbar-status { color: #FFF; display: inline-
block; font-size: 14px; height: 36px; line-height: 36px; padding: 0 10px;}.sf-toolbar-block-request .sf-toolbar-info-piece a {
background-color: transparent; text-decoration: none;}.sf-toolbar-block-request .sf-toolbar-info-piece a:hover { text-decoration:
underline;}.sf-toolbar-block-request .sf-toolbar-redirection-status { font-weight: normal; padding: 2px 4px; line-height: 18px;}.sf-
toolbar-block-request .sf-toolbar-info-piece span.sf-toolbar-redirection-method { font-size: 12px; height: 17px; line-height: 17px;
margin-right: 5px;}.sf-toolbar-block-ajax .sf-toolbar-icon { cursor: pointer;}.sf-toolbar-status-green .sf-toolbar-label,.sf-toolbar-status-
yellow .sf-toolbar-label,.sf-toolbar-status-red .sf-toolbar-label { color: #FFF;}.sf-toolbar-status-green svg path,.sf-toolbar-status-green
svg .sf-svg-path,.sf-toolbar-status-red svg path,.sf-toolbar-status-red svg .sf-svg-path,.sf-toolbar-status-yellow svg path,.sf-toolbar-status-
yellow svg .sf-svg-path { fill: #FFF;}.sf-toolbar-block-config svg path,.sf-toolbar-block-config svg .sf-svg-path { fill: #FFF;}.sf-
toolbar-block .sf-toolbar-icon { display: block; height: 36px; padding: 0 7px; overflow: hidden; text-overflow: ellipsis;}.sf-
toolbar-block-request .sf-toolbar-icon { padding-left: 0; padding-right: 0;}.sf-toolbar-block .sf-toolbar-icon img,.sf-toolbar-block .sf-
toolbar-icon svg { border-width: 0; position: relative; top: 8px; vertical-align: baseline;}.sf-toolbar-block .sf-toolbar-icon img +
span,.sf-toolbar-block .sf-toolbar-icon svg + span { margin-left: 4px;}.sf-toolbar-block-config .sf-toolbar-icon .sf-toolbar-value {
margin-left: 4px;}.sf-toolbar-block:hover,.sf-toolbar-block.hover { position: relative;}.sf-toolbar-block:hover .sf-toolbar-icon,.sf-toolbar-
block.hover .sf-toolbar-icon { background-color: #444; position: relative; z-index: 10002;}.sf-toolbar-block-ajax.hover .sf-toolbar-
info { z-index: 10001;}.sf-toolbar-block:hover .sf-toolbar-info,.sf-toolbar-block.hover .sf-toolbar-info { display: block; padding:
10px; max-width: 480px; max-height: 480px; word-wrap: break-word; overflow: hidden; overflow-y: auto;}.sf-toolbar-info-piece
b.sf-toolbar-ajax-info { color: #F5F5F5;}.sf-toolbar-ajax-requests { table-layout: auto; width: 100%;}.sf-toolbar-ajax-requests td {
background-color: #444; border-bottom: 1px solid #777; color: #F5F5F5; font-size: 12px; padding: 4px;}.sf-toolbar-ajax-requests
tr:last-child td { border-bottom: 0;}.sf-toolbar-ajax-requests th { background-color: #222; border-bottom: 0; color: #AAA; font-
size: 11px; padding: 4px;}.sf-ajax-request-url { max-width: 250px; line-height: 9px; overflow: hidden; text-overflow:
9
482 ЧДТУ 01849 – 01 12 01
ellipsis;}.sf-toolbar-ajax-requests .sf-ajax-request-url a { text-decoration: none;}.sf-toolbar-ajax-requests .sf-ajax-request-url a:hover {
text-decoration: underline;}.sf-ajax-request-duration { text-align: right;}.sf-ajax-request-loading { animation: sf-blink .5s ease-in-out
infinite;}@keyframes sf-blink { 0% { background: #222; } 50% { background: #444; } 100% { background: #222; }}.sf-toolbar-
block.sf-toolbar-block-dump .sf-toolbar-info { max-width: none; width: 100%; position: fixed; box-sizing: border-box; left:
0;}.sf-toolbar-block-dump pre.sf-dump { background-color: #222; border-color: #777; border-radius: 0; margin: 6px 0 12px 0;}.sf-
toolbar-block-dump pre.sf-dump:last-child { margin-bottom: 0;}.sf-toolbar-block-dump pre.sf-dump .sf-dump-search-wrapper {
margin-bottom: 5px;}.sf-toolbar-block-dump pre.sf-dump span.sf-dump-search-count { color: #333; font-size: 12px;}.sf-toolbar-block-
dump .sf-toolbar-info-piece { display: block;}.sf-toolbar-block-dump .sf-toolbar-info-piece .sf-toolbar-file-line { color: #AAA;
margin-left: 4px;}.sf-toolbar-block-dump .sf-toolbar-info img { display: none;}/* Responsive Design */.sf-toolbar-icon .sf-toolbar-
label,.sf-toolbar-icon .sf-toolbar-value { display: none;}.sf-toolbar-block-config .sf-toolbar-icon .sf-toolbar-label { display: inline-
block;}/* Legacy Design - these styles are maintained to make old panels look a bit better on the new toolbar */.sf-toolbar-block .sf-
toolbar-info-piece-additional-detail { color: #AAA; font-size: 12px;}.sf-toolbar-status-green .sf-toolbar-info-piece-additional-detail,.sf-
toolbar-status-yellow .sf-toolbar-info-piece-additional-detail,.sf-toolbar-status-red .sf-toolbar-info-piece-additional-detail { color:
#FFF;}@media (min-width: 768px) { .sf-toolbar-icon .sf-toolbar-label, .sf-toolbar-icon .sf-toolbar-value { display: inline; } .sf-
toolbar-block .sf-toolbar-icon img, .sf-toolbar-block .sf-toolbar-icon svg { top: 6px; } .sf-toolbar-block-time .sf-toolbar-icon svg,
.sf-toolbar-block-memory .sf-toolbar-icon svg { display: none; } .sf-toolbar-block-time .sf-toolbar-icon svg + span, .sf-toolbar-
block-memory .sf-toolbar-icon svg + span { margin-left: 0; } .sf-toolbar-block .sf-toolbar-icon { padding: 0 10px; } .sf-
toolbar-block-time .sf-toolbar-icon { padding-right: 5px; } .sf-toolbar-block-memory .sf-toolbar-icon { padding-left: 5px; }
.sf-toolbar-block-request .sf-toolbar-icon { padding-left: 0; padding-right: 0; } .sf-toolbar-block-request .sf-toolbar-label {
margin-left: 5px; } .sf-toolbar-block-request .sf-toolbar-status + svg { margin-left: 5px; } .sf-toolbar-block-request .sf-toolbar-
icon svg + .sf-toolbar-label { margin-left: 0; } .sf-toolbar-block-request .sf-toolbar-label + .sf-toolbar-value { margin-right:
10px; } .sf-toolbar-block-request:hover .sf-toolbar-info { max-width: none; } .sf-toolbar-block .sf-toolbar-info-piece b {
font-size: 12px; } .sf-toolbar-block .sf-toolbar-info-piece span { font-size: 13px; } .sf-toolbar-block-right { float: right;
margin-left: 0; margin-right: 0; }}@media (min-width: 1024px) { .sf-toolbar-block .sf-toolbar-info-piece-additional, .sf-toolbar-
block .sf-toolbar-info-piece-additional-detail { display: inline; } .sf-toolbar-block .sf-toolbar-info-piece-additional:empty, .sf-
toolbar-block .sf-toolbar-info-piece-additional-detail:empty { display: none; }}/***** Error Toolbar *****/.sf-error-toolbar .sf-
toolbarreset { background: #222; color: #f5f5f5; font: 13px/36px Arial, sans-serif; height: 36px; padding: 0 15px; text-align:
left;}.sf-error-toolbar .sf-toolbarreset svg { height: auto;}.sf-error-toolbar .sf-toolbarreset a { color: #99cdd8; margin-left: 5px; text-
decoration: underline;}.sf-error-toolbar .sf-toolbarreset a:hover { text-decoration: none;}.sf-error-toolbar .sf-toolbarreset .sf-toolbar-icon
{ float: left; padding: 5px 0; margin-right: 10px;}/***** Media query print: Do not print the Toolbar. *****/@media print { .sf-
toolbar { display: none !important; }}</style><script nonce="81614670d89647e6b8fcb00699602b52">/*<![CDATA[*/ (function
() { Sfjs.loadToolbar('00eaa6'); })();/*]]>*/</script>
</body>
</html>
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Интернет-аудитория Украины в июне 2017 года. Результати
дослідження консалтингової компанії «Gemius». URL:
http://www.gemius.com.ua/vse-stati-dlja-chtenija/internet-auditorija-ukrainy-v-
ijune.html (дата звернення: 22.02.2021).
2. Парфенюк І. М. Соціальні мережі інтернету як засіб комунікації
політичного лідера (на прикладі соцмереж Президента України).
Бібліотекознавство. Документознавство. Інформологія. 2017. № 2. С. 58-65.
URL: http://journals.uran.ua/bdi/article/view/150208/149351 (дата звернення:
22.02.2021).
3. Курносова Е. Социальные сети в цифрах. (електронний ресурс), –
Режим доступу URL:
https://mediascope.net/upload/iblock/f97/18.04.2019_Mediascope_%D0%95%D0
%BA%D0%B0%D1%82%D0%B5%D1%80%D0%B8%D0%BD%D0%B0%20%
D0%9A%D1%83%D1%80%D0%BD%D0%BE%D1%81%D0%BE%D0%B2%D
0%B0_%D0%A0%D0%98%D0%A4+%D0%9A%D0%98%D0%91%202019.pdf
(дата обращения 01.05.2020);
4. Ледовая Я. А. Социальные сети и их возможности для сбора
поведенческих и психологических данных: «за» и «против», этические
вопросы и примеры исследований. ПСИХОЛОГИЧЕСКИЕ
ИССЛЕДОВАНИЯ. 2018. № 9. С. 151-166. (електронний ресурс), – Режим
доступу URL:
https://www.researchgate.net/publication/327679159_Socialnye_seti_i_ih_vozmoz
Арк.
ЧДТУ 01849.004 ПЗ
61
Змн. Арк. № докум. Підпис Дат
nosti_dla_sbora_povedenceskih_i_psihologiceskih_dannyh_za_i_protiv_eticeskie_
voprosy_i_primery_issledovanij (дата обращения 22.04.2021);
7. Web-сайт гри Ninja Wars 2. (електронний ресурс), – Режим
доступу URL: https://ninjawars2. (дата звернення 22.04.2021);
8. Web-сайт гри Наруто: Спадкоємці сили. (електронний ресурс), –
Режим доступу URL: https://aniga.me/naruto/ (дата звернення 22.04.2021);
9. Web-сайт гри Shini Game. (електронний ресурс), – Режим доступу
URL: https://espritgames.ru/shinigame/ (дата звернення 22.04.2021);
10. Web-сайт гри Rise of Angels. (електронний ресурс), – Режим
доступу URL: https://creagames.com/game/roa (дата звернення 22.04.2021);
11. Абдуллаева Р. А. Анализ влияния социальных сетей на жизнь
современного общества. Международный журнал прикладных и
фундаментальных исследований. 2015. № 9-3. С. 542-546;
(електронний ресурс), – Режим доступу URL: https://applied-
research.ru/ru/article/view?id=7369 (дата звернення: 22.04.2021);
12. Сушко В. А. История возникновения и методология сетевого
анализа. Журнал социологии и социальной антропологии. 2018. № 21(1). С.
161–181. (електронний ресурс), – Режим доступу URL: https://doi.
org/10.31119/jssa.2018.21.1.7 (дата звернення: 22.04.2021);
13. Tabassum, Shazia & Pereira, Fabiola & Fernandes, Sofia & Gama,
João. (2018). Social network analysis: An overview. Wiley Interdisciplinary
Reviews: Data Mining and Knowledge Discovery. 8. e1256. 10.1002/widm.1256;
14. Рудаков А. В. Технология разработки программных продуктов:
учебник для студентов учреждений среднего профессионального образования;
12-е изд. М.: Academia. 2018. 208 с.;
15. Пятикоп Е. Е. Технология создания программных продуктов:
учебное пособие. Мариуполь: ПГТУ, 2016. 232 с.;
Арк.
ЧДТУ 01849.004 ПЗ
62
Змн. Арк. № докум. Підпис Дат
17. Гниденко И. Г., Павлов Ф. Ф., Федоров Д. Ю. Технология
разработки программного обеспечения: учеб. пособие для СПО. М.:
Издательство Юрайт, 2018. 235 с.;
18. Мартин Р. Чистая архитектура. Искусство разработки
программного обеспечения. СПб.: Питер, 2018. 352 с.: ил. (Серия «Библиотека
программиста»);
19. Вейцман В. М. Проектирование информационных систем. СПб:
Лань, 2019. 316 с.;
20. Мартин Р. Чистая архитектура. Искусство разработки
программного обеспечения. СПб.: Питер, 2018. 352 с.: ил. (Серия «Библиотека
программиста»);
21. Остроух А. В., Суркова Н. Е. Проектирование информационных
систем : монография. СПб: Лань, 2019. 164 с.;
Арк.
ЧДТУ 01849.004 ПЗ
63
Змн. Арк. № докум. Підпис Дат
ПРОГРАМНІ ЗАСОБИ
1. Microsoft Office Word 2010 © Microsoft Corporation, 2007–2021;
2. Google Chrome 81.0.4044.129 © Google;
3. Open Server 5.3.5 © ADGroup, 2019-2021;
4. JetBrains PhpStorm 2018.3.2 x64 © JetBrains, 2017-2021;
5. Sublime Text 3 3.2.2 © Sublime HQ Pty Ltd, 2019-2021;
6. Vivaldi 3.0 © Vivaldi Technologies;
7. Brave 1.9.72 © Брендан Эйх.
8. Mozilla Firefox 77.0.1 © Mozilla Corporation і Mozilla Foundation;
Арк.
ЧДТУ 01849.004 ПЗ
Змн. А 64
protec ted wркit.h On№lin eд-оPкDуFм-.N o-CПopідy.пcиoсm Дат