Репозиторій ЧДТУ
Репозиторій ЧДТУ зберігає і дозволяє легкий і відкритий доступ до всіх видів цифрового контенту, включаючи текст, зображення, анімовані зображення, MPEG і набори даних
Дізнатися більше
Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал:
https://er.chdtu.edu.ua/handle/ChSTU/6873| Назва: | Інформаційно-освітній веб-ресурс “Сторінки історії” |
| Автори: | Ланських , Євген Володимирович Бурлака, Софія Володимирівна |
| Ключові слова: | web-ресурс;Figma;Тестування;інформаційно-освітній ресурс;дизайн |
| Дата публікації: | 4-чер-2025 |
| Короткий огляд (реферат): | Присутність інформаційних, освітніх ресурсів, бізнесу, та різних процесів у мережі інтернет є запорукою впізнаваності, актуальності та зручної взаємодії. Розвиток соціальних мереж, інформаційних технологій, надає нам широкий вибір послуг програмного забезпечення, яке забезпечує комфортну взаємодію, привабливий дизайн, ергономічність. Внаслідок швидкого розвитку та накопичення веб-ресурсів люди стають перебірливими та дуже критичними до інформаційних ресурсів та систем з якими мають справу. Тому й вимоги до ІТ-продуктів дуже зростають. Темою кваліфікаційної роботи, було обрано створення інформаційно-освітнього веб-ресурсу “Сторінки історії”. Стикаючись із безліччю викликів сьогодення суспільство стає свідками того, що історія як наука є циклічною та завжди актуальною до вивчення. Вивчаючи ринок EdTech, можна дійти висновку, що основними напрямками навчальних платформ є ІТ-індустрія, вивчення англійської та іноземних мов, бізнес, менеджмент та інші. Втім, дуже корисною навичкою кожного громадянина є знання історичних фактів та вміле оперування ними, щоб уникати дезінформації, ворожих міфів, та встановлювати причинно-наслідкові зв’язки. Створення якісного, візуально красивого web-ресурсу з метою забезпечити зручний доступ до навчальних матеріалів набуває актуальності. Мета включає розробку адаптивного, кросбраузерного інформаційно-освітнього веб-ресурсу, використовуючи сучасні веб-інструменти. Розробка буде відбуватись на Webflow - сучасній No code платформі розробки сайтів, що дозволяє створювати веб-ресурси різної складності, додавати інтерактивні елементи та анімації, керувати контентом з допомогою вбудованої CMS системи, розвивати SEO просування та інтегрувати веб-сайти у зовнішні системи. [1],[2] Важливо спроектувати веб-ресурс таким чином, щоб усі елементи були логічно поєднані, дизайн не перевантажував поле зору, забезпечити оптимізацію, адаптивність та кросбраузерність. Проект повинен мати перспективи подальшого вдосконалення, оновлення та розширення. |
| URI (Уніфікований ідентифікатор ресурсу): | https://er.chdtu.edu.ua/handle/ChSTU/6873 |
| Розташовується у зібраннях: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) |
Файли цього матеріалу:
| Файл | Опис | Розмір | Формат | |
|---|---|---|---|---|
| РЕП_БАК_Бурлака_WEB-2111.pdf Restricted Access | 3.27 MB | Adobe PDF | Переглянути/Відкрити Запит копії |
Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ ПОЯСНЮВАЛЬНА ЗАПИСКА до кваліфікаційної роботи бакалавра на тему: «Інформаційно-освітній веб-ресурс “Сторінки історії”» Виконав (-ла): здобувач (-ка) першого (бакалаврського) рівня вищої освіти 4 курсу, групи WEB-2111 Спеціальності 126 Інформаційні системи та технології ОП «Web-технології, Web-дизайн» Бурлака Софія Володимирівна Керівник: кандидат технічних наук, доцент Ланських Євген Володимирович Рецензент: директор ТОВ «АНДЕРСЕНЛАБ», Алесін Олег Вікторович Черкаси – 2025 року ЗМІСТ РОЗДІЛ 1. АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ 1.1 Сучасний стан ринку інформаційно-освітніх ресурсів 1.2 Огляд існуючих рішень 1.3 Розробка концепції ІТ-продукту РОЗДІЛ 2. АНАЛІЗ І РОЗРОБКА ВИМОГ ДО WEB-РЕСУРСУ 2.1 Обгрунтування засобів реалізації web-ресурсу 2.2 Вимоги до дизайну web-ресурсу 2.3 Структура та наповнення web-ресурсу 2.4 Адміністрування та супровід РОЗДІЛ 3. РОЗРОБКА WEB-РЕСУРСУ 3.1. Визначення вимог до функціоналу сайту 3.2 Розробка інформаційної архітектури 3.3 Прототипування інтерфейсів у Figma 3.4 Реалізація ключових сторінок web-ресурсу 3.5 Тестування web-ресурсу ВИСНОВКИ СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ДОДАТКИ ВСТУП Присутність інформаційних, освітніх ресурсів, бізнесу, та різних процесів у мережі інтернет є запорукою впізнаваності, актуальності та зручної взаємодії. Розвиток соціальних мереж, інформаційних технологій, надає нам широкий вибір послуг програмного забезпечення, яке забезпечує комфортну взаємодію, привабливий дизайн, ергономічність. Внаслідок швидкого розвитку та накопичення веб-ресурсів люди стають перебірливими та дуже критичними до інформаційних ресурсів та систем з якими мають справу. Тому й вимоги до ІТ-продуктів дуже зростають. Темою кваліфікаційної роботи, було обрано створення інформаційно- освітнього веб-ресурсу “Сторінки історії”. Стикаючись із безліччю викликів сьогодення суспільство стає свідками того, що історія як наука є циклічною та завжди актуальною до вивчення. Вивчаючи ринок EdTech, можна дійти висновку, що основними напрямками навчальних платформ є ІТ-індустрія, вивчення англійської та іноземних мов, бізнес, менеджмент та інші. Втім, дуже корисною навичкою кожного громадянина є знання історичних фактів та вміле оперування ними, щоб уникати дезінформації, ворожих міфів, та встановлювати причинно-наслідкові зв’язки. Створення якісного, візуально красивого web-ресурсу з метою забезпечити зручний доступ до навчальних матеріалів набуває актуальності. Мета включає розробку адаптивного, кросбраузерного інформаційно-освітнього веб- ресурсу, використовуючи сучасні веб-інструменти. Розробка буде відбуватись на Webflow - сучасній No code платформі розробки сайтів, що дозволяє створювати веб-ресурси різної складності, додавати інтерактивні елементи та анімації, керувати контентом з допомогою вбудованої CMS системи, розвивати SEO просування та інтегрувати веб-сайти у зовнішні системи. [1],[2] Важливо спроектувати веб-ресурс таким чином, щоб усі елементи були логічно поєднані, дизайн не перевантажував поле зору, забезпечити оптимізацію, адаптивність та кросбраузерність. Проект повинен мати перспективи подальшого вдосконалення, оновлення та розширення. РОЗДІЛ 1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ 1.1 Сучасний стан ринку інформаційно-освітніх ресурсів Сьогодні попит на інформаційно-освітні ресурси є достатньо великим, і кожного року він збільшується. Зокрема, на зріст ринку та попиту дуже впливає цифровізація. Людство прагне мати доступ до матеріалів, які можна використати у зручний час, у зручному місці та отримати з них якомога більше інформації. Проведено багато досліджень про вплив інформаційних технологій на освіту у світі в цілому. З 2025 року прогнозується зростання ринку EdTech з 214,73 млрд доларів до 445,94 млрд доларів у 2029 році, що становить сукупний річний темп зростання (CAGR) у 20%. Ця вражаюча траєкторія відображає трансформаційний вплив технологій на освіту в усьому світі. [3] Можна виокремити кілька вагомих чинників, які зумовлюють таке швидке зростання. Перш за все, останні декілька років великий поштовх надав розвиток штучного інтелекту, який адаптується до індивідуального стилю та потреб навчання. Гейміфікація, віртуальна та доповнена реальність збільшують зацікавленість в освітньому процесі. Мобільність навчальних платформ забезпечує зручність та доступність будь-коли навчатись. Також, дуже важливу роль відіграють сертифікати та цифрові бейджі, що отримують визнання у професійному середовищі. В Україні ринок інформаційно-освітніх ресурсів активно розвивається, підхоплюючи основні тенденції та новітні розробки. Війна постає однією із найвагоміших причин розвитку альтернативних можливостей навчання. Онлайн інформаційно-освітні ресурси забезпечують безперервність навчання. Основні напрямки ринку EdTech в Україні: освітні платформи, EdTech маркетплейси, продуктові компанії. [4] Найбільш поширені приклади це Edera, Prometheus, Genius Space, Projector, GoIt, EnglishDom. Частина з цих проєктів, на початку повномасштабного вторгнення, відкривали для українців безкоштовний доступ до своїх курсів, що свідчить про відповідальну реакцію на кризу, підтримку суспільства, гнучкість та інноваційність. Також, дуже поширеною стає інтеграція EdTech з Military Tech. В умовах викликів повномасштабної війни щодня зростає потреба у розробці інноваційних навчальних інструментів для військових. Це війна технологій, тому військо крім зброї потребує технічних рішень з кібербезпеки, штучним інтелектом та робототехнікою. Актуальними є такі інструменти, як програми для пілотів дронів у віртуальній реальності або навчальні роботизовані системи для евакуації. [4] Тому, щоб кожен міг навчатись технологіям і реалізовувати свої знання на користь перемоги держава поступово розгортає співпрацю з провідними навчальними платформами та tech-компаніями, розвиваючи інформаційно-освітні ресурси у даній галузі. Так, наприклад, після повномасштабного вторгнення на Prometheus запустили курси з керування БПЛА, загальної військової та психологічної підготовки, а також медичної допомоги. Станом на кінець травня на платформі навчалися 200 тис. військових. [4] У майбутньому для розвитку українського EdTech важливо продовжувати працювати над зменшенням бар’єрів, створювати сприятливе законодавче середовище й активно просувати українські EdTech-продукти на міжнародному ринку.[5] Інформаційно-освітні ресурси - це засоби для ефективної організації навчального процесу, які включають у себе інформаційні, довідкові, навчальні та наукові матеріали. До таких ресурсів відносяться електронні документи (підручники, посібники, методичні матеріали), інформаційні системи, інтерактивні матеріали, мультимедійні ресурси. Метою створення електронних інформаційно-освітніх ресурсів є забезпечення модернізації освітнього процесу, змістове наповнення освітнього простору, надання рівного доступу учасникам освітнього процесу незалежно від місця їх проживання та форми навчання відповідно до якісних навчальних і методичних матеріалів, створених на основі інформаційно-комунікаційних технологій. [6] 1.2 Огляд існуючих рішень Інформаційно-освітні веб-ресурси у сфері історії України мають кілька лідерів на ринку, до таких відносяться “LikБез. Історичний фронт”, сайт Українського інституту національної пам’яті, “Локальна історія”, “Історична правда”. Велику частину становлять матеріали для підготовки до ЗНО/НМТ з історії України, це включає веб-сайти, відео-ресурси. Також, є багато різних менш відомих веб-ресурсів, блогів, які можна розглянути для порівняння, наприклад, “Історико-просвітній проект Портал”, Блог вчителя історії Чернецької Інни Вільямівни. “Історична правда”. Це один із найдавніших інформаційно-освітніх ресурсів у галузі. Увагу приділено політичній історії 20 ст.. Висвітлено такі аспекти, як боротьба за права людей, за державність, тоталітарні експерименти над суспільством, та науково-технічний прогрес. Головний редактор - Вахтанг Кіпіані, відомий журналіст та письменник.[7] Рисунок 1.1 - Головна сторінка веб-ресурсу. Розглядаючи головну сторінку сайту, бачимо достатньо читабельний дизайн, оформлений у стилі газети. Меню розділене на основне та перелік спецпроєктів, що допомагає краще орієнтуватись у структурі веб-ресурсу. Рисунок 1.2 - Меню та пошук по сайту На рис. 1.3 видно тематичний поділ сторінки. Сайт висвітлює останні актуальні новини, розвінчує міфи актуальних історичних тем, довідки про сучасних та історичних осіб. Особливу увагу приділено спецпроєктам, також є блоги істориків або журналістів. Проте, немає саме навчальних тестів або Рисунок 1.3 - Тематичний поділ Можна зробити висновок, що матеріали веб-ресурсу гарно структуровані, і користувачеві легко орієнтуватись. Достатньо сучасних матеріалів та історичних довідок. Веб-ресурс має стриманий дизайн, з домінантними трьома кольорами, що не навантажує поле зору, достатньо ілюстрацій. Сторінки завантажуються без затримок, є адаптація під різні екрани (телефон, ПК, планшет), забезпечена кросбраузерність. Веб-ресурс інформаційно наповнений, втім, не призначений для навчальних цілей, немає завдань, тестів, додаткового інтерактиву. Історико-просвітній проєкт «Портал». Загалом веб-ресурс поділено на три розділи - “Навігатор”, “Часострічка", "Особистості". Рисунок 1.4 - Головна сторінка «Порталу». “Навігатор” містить 10 карток - історичних періодів, у кожному з яких експерт наводить історичну довідку, з основною проблематикою, сучасними рішеннями та актуальними питаннями. Завантаження контенту карток тривале, що не дуже позитивно впливає на користувацький досвід. Проте, дизайн виглядає цікаво та красиво, усі елементи гармонійно поєднані, користувач чітко розуміє, у якому розділі знаходиться. Багато ілюстрацій, шрифт читабельний. Рисунок 1.5 - Сторінка «Навігатор». Рисунок 1.6 - Одна з карток «Навігатора». “Часострічка” висвітлює усі періоди від найдавніших часів, до сьогодення з ключовими подіями. На цій сторінці користувач може відфільтрувати контент по напрямках, або по важливості, або по часовому проміжку, що є досить зручним. Рисунок 1.7 - Сторінка «Часострічка». Рисунок 1.8 - Сторінка «Особистості». Рисунок 1.9 - Сторінка «Особистості» (продовження). Картки з історичними діячами розставлені у часовій послідовності. Загалом, на веб-ресурсі інформація добре структурована, логічно викладена, зручно орієнтуватись між сторінками. Не працює кнопка для авторизації/реєстрації, зареєструватись можна лише через кнопку “Збережене”, що є не дуже коректним у роботі ресурсу. Сайт адаптовано під різні розміри екранів та кросбраузерність. Блог вчителя історії Чернецької Інни Вільямівни. Веб-ресурс побудовано структуровано, проте дизайн трохи застарілий, деякі зображення не завантажуються, багато незрозумілих посилань, деяка інформація викладена не зовсім логічно. Однак, на ресурсі можна знайти тематичні тести та завдання, перелік важливих дат, відеоматеріали, фото та навіть методичні матеріали. Рисунок 1.10 - Головна сторінка блогу. 1.3 Розробка концепції ІТ-продукту Концепція продукту - це синтез або опис ідеї продукту, що відображає основну ціль пропонованого продукту. Концепція можуть бути використана для формування кінцевого продукту, комплексу маркетингу та бізнес-аналізу. [8] Мета роботи - створення інформаційно-освітнього веб-ресурсу для вивчення історії України. Для реалізації мети треба враховувати актуальність та структурованість поданої інформації, сучасний, інтуїтивно зрозумілий дизайн. Користувач має розуміти структуру веб-ресурсу, відчувати комфорт, завдяки ергономічності сайту. Аналіз розглянутих сучасних рішень реалізації веб-ресурсів у вибраній предметній області дозволяє розробити новий сучасний ресурс. Було проаналізовано основні переваги та недоліки кожного з розглянутих веб-сайтів, враховуючи базові вимоги, що буде використано при реалізації нового ресурсу. Основною концепцією постає створення комплексного інформаційно-освітнього веб- ресурсу з сучасним мінімалістичним дизайном, логічною структурою, зручною навігацією. Веб-ресурс має стати інструментом для самостійного аналізу багатьох історичних аспектів, тому інформаційне наповнення буде достатньо різноманітним та всеохоплюючим. РОЗДІЛ 2 АНАЛІЗ І РОЗРОБКА ВИМОГ ДО WEB-РЕСУРСУ 2.1 Обгрунтування засобів реалізації web-ресурсу З розвитком інформаційних технологій перед нами постійно з’являються нові можливості розробки своїх проєктів. Багато інструментів, конструкторів сайтів, мов програмування та платформ для розробки надають широкі послуги як платно так і безкоштовно, зі знанням основ програмування або без, як для великих продуктів програмне забезпечення, так і звичайні блоги чи лендінги. Досвід ведення реальних розробок і вдосконалення наявних програмних і технічних засобів постійно переосмислюється, в результаті чого з'являються нові методи, методології та технології, які, в свою чергу, є основою більш сучасних засобів розробки програмного забезпечення. [9] У процесі планування розробки веб-ресурсу “Сторінки історії” було розглянуто стек технологій MERN (MongoDB, Express.js, React, Node.js), конструктори сайтів, такі як WordPress чи Wix, платформу Webflow, та спеціалізовані платформи для розробки освітніх ресурсів. Розглянемо конструктори веб-сайтів, та платформи для розробки освітніх веб-ресурсів. Перш за все, WordPress є дуже популярною та масштабною CMS, з доступним відкритим кодом. Його багато використовують для створення блогів та веб-сайтів, через простоту встановлення, налаштування та доступність багатьох готових рішень у вигляді плагінів, або тем. Проте все ж, його не обрано для розробки, через певну обмеженість у втіленні власного дизайну та залежність від плагінів. WordPress це перш за все система керування вмістом, як Joomla, тому більше підходить для багатосторінкових блогів, категорій, магазинів. Для підтримки веб-сайтів на WordPress потрібен час інженерів, і вони не дають маркетингу чи дизайну автономії для створення власних дизайнів, проведення експериментів чи персоналізації контенту. Неоптимізований контент збільшується, загальна вартість володіння сайтом зростає, і витрачається все більше годин просто на підтримку роботи. [10] Wix - конструктор сайтів, також достатньо вживаний та зручний. Проте він має обмеження у створенні кастомних елементів, блогів, дизайну. Він більше підходить для шаблонних чи односторінкових сайтів, ніж для веб-додатків зі складнішою логікою. Хоча Wix є популярним вибором для малого бізнесу, він обмежує можливості команди з точки зору гнучкості дизайну, співпраці та оптимізації. [11] Платформи для створення освітніх веб-ресурсів дуже вдале рішення для онлайн шкіл, курсів, але концепція розроблюваного веб-ресурсу дещо відрізняється від цього. Такі платформи не підходять для проєкту через шаблонність та обмеженість в управлінні веб-ресурсом, що стосується, наприклад, баз даних, а також, зазвичай, їх послуги достатньо дорогі. Стек технологій MongoDB, Express.js, React, Node.js дозволяє повну свободу дій над веб-ресурсом, можна створити власну базу даних, логіку та анімації, бекенд частину та фронтенд. Цей стек є популярним вибором для створення односторінкових додатків (SPA) та динамічних веб-додатків. React забезпечує швидкий рендеринг інтерфейсу, а Node.js та Express.js дозволяють створювати швидкий та масштабований бекенд. MongoDB є гнучкою NoSQL базою даних. [12] Проте, така розробка займає достатньо багато часу, потребує багато добре розвинених знань зі вказаних технологій. Доцільніше її використати або при масштабнішому проєкті або при більшій команді розробників. Основним інструментом у розробці веб-ресурсу, було використано платформу Webflow. Далі розглянуто основні переваги та недоліки. Webflow - це платформа, яка пропонує широкий спектр можливостей розробки веб-сайтів. Платформа відрізняється від стандартних конструкторів сайтів, таких як Wordpress або Wix тим, що тут практично немає обмежень у структурі та дизайні, не потрібні додаткові плагіни для розробки, розробник будує сторінку повністю унікальну. Webflow також дає можливість завантажити весь код HTML, CSS, JS побудованого веб- ресурсу. Під час розробки, респонсивні версії створюються автоматично, тому після завершення проєкту, треба лише коригувати готові адаптовані дизайни, щоб усе виглядало коректно. Розробник також може додавати кастомний код у будь-яку частину сайту, недоліком є те, що це доступно лише з платним планом. Проте, це дозволяє інтегрувати будь-які елементи або логіку у розроблюваний веб-сайт. Окрему увагу варто звернути на вбудовану CMS (рис. 2.1). Цей інструмент надає дуже багато можливостей для управління контентом. Рисунок 2.1 - Вбудована CMS. Створюються окремі колекції, які налаштовуються під конкретний контент, можна також використати темплейти. Потім їх імплементують у сторінку, зв’язуючи відповідні поля. У елементи колекції можна додавати будь-які поля, крім текстових та зображення, наприклад дату, час, колір, посилання, перемикачі, файли. У веб-ресурсі є декілька видів різних карток або дописів, тому використання CMS допоможе ефективно організувати контент та керувати ним. Можна зв’язувати декілька таких колекцій і будувати великі автоматизовані системи управлінням контенту на веб- ресурсі. Дуже зручно, що для кожної картки з колекції окремо автоматично створюється темплейт-сторінка, яку можна оформити як завгодно, додаючи більше інформації про конкретну картку (тему). Також є можливість фільтрувати, які картки з колекції будуть виводитись у тій чи іншій частині веб-ресурсу. Наприклад, можна створювати таби - розділи для сортування контенту, і на кожен окремий відділ додавати відфільтровані картки, наприклад за категорією. Є можливість регулювати кількість елементів колекції, і налаштовувати їх дизайн. Webflow надає можливість створювати анімації або динамічні ефекти. Наприклад, коли користувач наводить курсор на кнопку, якусь картку або гортає сторінку можна реалізувати різні анімовані функції, що зробить вигляд веб-ресурсу “живішим” і привабливішим. Додатково, є можливість створення SEO для просування сайту, підключення Google аналітики, відслідковувати відвідуваність та взаємодію користувачів, вбудовані заходи безпеки, підключення кастомного доменного імені - усе це, а також вище описане надає комплексний інструментарій та обґрунтовує вибір Webflow як ключового інструменту для розробки веб-ресурсу. 2.2 Вимоги до дизайну web-ресурсу Розробка хорошого веб-дизайну це насамперед робота над оптимальною структурою, юзабіліті і найбільш зручним розташуванням контенту. [13] Спершу варто розглянути основні принципи веб-дизайну, які ляжуть в основу вимог до web-ресурсу. Треба визначити, що проєкт буде мати інформаційну наповненість, багато тексту, багато зображень, тому це все має поєднуватись гармонійно, швидко завантажуватись, створювати цілісний вигляд. Простота та мінімалізм - лаконічність текстів, одна визначена кольорова палітра, один-два шрифти, інтерфейс має бути візуально “чистим” та просторим, акцент лише на основному. Адаптивність - автоматично підлаштовується під різні пристрої, ПК, телефон, планшет, з правильним розташуванням елементів. Навігація - категорії та підкатегорії забезпечують лаконічність та структурованість контенту, створення bread- crumbs - “хлібні крихти”, вказують місце перебування користувача на сайті, також можна розглянути фіксоване меню, яке буде видно у будь-якій частині сайту. Інтерактивність - зробить сайт привабливим та “живим”, це один з ключових елементів гарного дизайну. Доступність для людей з інвалідністю, це також важливий елемент, який можна імплементувати з допомогою альтернативного тексту для зображень, достатньої контрастності, масштабування та іншим. Наостанок - послідовність та один стиль - веб-застосунок має бути в одному стилі на всіх етапах взаємодії, це сформує у користувача відчуття надійності та довіри до ресурсу. На основі головних принципів дизайну веб-ресурсу, можна сформулювати вимоги: - адаптивність; - послідовність стилю; - ергономічність; - чітко сформована кольорова палітра; - увага до шрифтів; - тематичні зображення; - організована навігація; - інтерактивність; - доступність. Ці вимоги окреслюють основні загальноприйняті принципи веб- дизайну, що допоможуть створити якісний та візуально привабливий веб- ресурс. 2.3 Структура та наповнення web-ресурсу У цьому підпункті розглянуто логічну та структурну організацію веб- ресурсу. Структура сайту організовує усі його сторінки, категорії та розділів у логічному порядку. Вона визначає взаємозв’язок елементів і зручність їхньої взаємодії. Добре спроєктована структура веб-сайту спрощує пошук необхідної інформації та процес індексації пошуковими системами. [14] Загалом, виділяють 4 основні типи структур сайтів: - ієрархічна; - лінійна; - тематична; - сіткова. Ієрархічна структура зазвичай використовується в інтернет-магазинах або корпоративних сайтах компаній. У ній контент чітко поділяється на тематичні підрозділи, категорії, які спрощують орієнтацію користувача на веб-сайті. Лінійна втілює послідовну організацію елементів та сторінок, більше підходить для лендінгів та навчальних платформ. Тематична структура організовує контент за певними темами. Таку структуру зручно використовувати для новинних веб-ресурсів та блогів. можна групувати інформацію в окремі розділи за змістом, проблематикою або концепцією. Для прикладу такої структури можна взяти ресурс “Історична правда” - інформація розділена на тематичні групи “Спецпроєкти”, “Артефакти”, “Колонки”, “Книжки”, тощо. Сіткова структура не має чіткої організації, вона базується на гіперпосиланнях та переходах за ними. Прикладом є Вікіпедія. При складанні структури сайту необхідно уникати збільшення вкладеності сторінок. [15] Для організації веб-ресурсу “Сторінки історії” найбільше підходить близька до лінійної структура, показана на рис. 2.2. Рисунок 2.2. - Внутрішня структура веб-ресурсу. Головна сторінка містить навігаційну панель, звідки користувач може перейти на потрібну сторінку чи розділ. Головна сторінка також поділена на 4 ключових блоків з коротким описом суті кожного з них. Також на сторінці є блок “Як побудовано веб-ресурс?”, з клікабельною схематичною структурою веб-ресурсу, щоб користувачі могли легко орієнтуватись і розуміти що де знаходиться. Розділ “Тематика” містить випадаючий список наявних на веб-ресурсі тем, які також можна розглянути детальніше з переходом на конкретну тему. Розділ “Дописи” представляє собою перелік карток з короткою анотацією, та можливістю розглянути детальніше кожен допис. Сторінка знань розкриває більш детальніше ту чи іншу тему, в “Інтерактивних картках”, “Особистостях”, можна розширити свої знання “Історичний словник” також реалізований як випадаючий список, з підбіркою слів та пояснень на конкретну літеру. Сторінка розвитку міститиме різні тести та завдання, щоб зацікавлені користувачі могли перевірити, що вони дізнались на попередніх сторінках. Отже, розглянуто основні типи структур та розроблено структуру веб-ресурсу, яка підходить для інформаційно-освітнього веб-ресурсу. Важливо якісно і зрозуміло організувати компоненти та сторінки сайту, щоб збільшувати конверсію, тримати зацікавленість та час користувача на веб-ресурсі та загалом розвивати юзабіліті. 2.4 Адміністрування та супровід У цьому розділі варто розглянути як здійснюватиметься управління контентом, оновлення, а також підтримка користувачів після запуску веб- ресурсу. Загалом, для управління наповненням створено зручну систему адміністрування, яку можна використовувати без розробників або знання коду. Створені CMS - системи управління контентом - мають функції редагування інтерактивних карток, карток з дописами, карток з особистостями, можливість додавання фото, або видалення не потрібних елементів. Окрему увагу варто приділяти оновленню інструментів та платформи розробки, плагінів, проводити оптимізацію контенту та сторінок веб-ресурсу, щоб завантаження не займало багато часу. Технічна підтримка користувачів реалізована через систему звернень - збір запитів та даних через форму а також доступний емейл. Додатково, через інструмент Zapier підключена можливість отримувати запити від користувачів напряму у чат підтримки та надсилати їм відповідь. Тому адміністратор також має моніторити запити від користувачів та надавати відповідь якомога швидше. Заходи безпеки - у Webflow створені сайти отримують безкоштовні та вже налаштовані SSL-сертифікати, які створюють захищене HTTPS з’єднання і шифрування даних. Це також велика перевага платформи. Також автоматично налаштовані захисти форм reCAPTCHA від спаму. Webflow також автоматично створює та зберігає резервні копії сайтів, тому у випадку збоїв можна повернутись до стабільної версії. Проте, можна також самостійно створювати додаткові заходи безпеки, підключаючи кастомний код для захисту API або, наприклад, створення та захисту системи аутентифікації/реєстрації користувачів. Добре спроєктовані можливості та панель для адміністрування веб-ресурсом забезпечують комфортну взаємодію виробника послуг та користувача. [16] РОЗДІЛ 3 РОЗРОБКА WEB-РЕСУРСУ 3.1. Визначення вимог до функціоналу сайту У даному розділі розглянуто усі функції, які виконує веб-ресурс. Функціональні вимоги - це те, що описує поведінку системи, основні функції, що очікуються від неї, щоб задовольнити потреби користувача. Функціональні вимоги мають декілька основних характеристик, відповідно до ресурсу “Visure Solution” виділено наступні: 1. Конкретні дії: визначаються конкретні дії, або завдання, які система здатна виконати у відповідь на запит користувача. 2. Взаємодія користувача та системи: окреслюють те, як саме користувач або адміністратор може взаємодіяти, наприклад - заповнити форму. 3. Відповідь системи: визначають як система відповідає та реагує на дії користувача, до прикладу - виведення повідомлення про успіх чи помилку надсилання форми. 4. Обробка даних: як система обробляє дані, отримує та зберігає або надсилає у потрібні місця їх. [17] На всіх сторінках користувач повинен мати можливість використовувати кнопки переходу. Система переправляє на відповідний розділ або сторінку без затримок. Користувач може використовувати фільтр інформації у розділі "дописи", з допомогою tabs. Система повинна відображати дані з CMS, відповідно до обраного користувачем таба та теми. Користувач може шукати та/або відфільтрувати інформацію за темою, історичними діячами або роками. Користувач може "обертати" інтерактивні картки, де інформація міститься з обох боків. Може здійснювати перехід на більш розгорнуту інформацію з конкретної картки, натиснувши кнопку "Детальніше". Користувач може розгортати і згортати елемент "акордеон", для додаткових матеріалів. Система коректно відображає розгорнутий текст або зображення. Користувач має можливість написати запит у форму підтримки користувачів або написати коментар. Система повинна з'єднати запит із чат- ботом, для повернення відповіді адміністратора. Система відображає додані коментарі користувачів та рейтинг їх оцінки. Користувач може залишити свою пошту, для отримання подальшої розсилки про нові матеріали або оголошення на веб-ресурсі. Система повинна надіслати пошту користувача у відповідний документ адміністратору, для подальшої обробки. Система повинна показати повідомлення про успіх або помилку, коли користувач заповнює форми. Адміністратор має можливість редагування, додавання або видалення контенту, а також інформації у CMS. Адміністратор може створювати нові колекції у CMS або видаляти старі. Система показує успіх або помилку змін. Адміністратор може налаштовувати SEO та має доступ до панелі аналітики аудиторії чи статистики відвідувань. Веб-ресурс повинен бути кроcбраузерним - Google Chrome, Firefox, Edge, Safari. Веб-ресурс має адаптуватись під мобільні пристрої. Система має підтримувати захищене з’єднання та HTTPS протоколи. Має бути реалізовано захист форм від спаму за допомогою перевірки reCAPTCHA. 3.2 Розробка інформаційної архітектури Розробка інформаційної архітектури є важливим критичним елементом, що пов’язує інформаційні технології і процеси стратегічного планування щодо їх розвитку. [18] Розробляючи інформаційну архітектуру важливо провести аналіз цільової аудиторії, виокремити головну мету веб-ресурсу, створити візуалізацію даних, співвіднести це зі структурою веб-ресурсу. Інформаційна архітектура дасть розуміння як організовано і розміщено контент на сторінках веб-ресурсу. Основна її мета - це спростити для користувача пошук необхідної інформації, а також спростити орієнтацію по контенту. Якщо перший досвід взаємодії користувача з веб-ресурсом буде зручним, достатньо простим та наповненим, то він буде знов і знов повертатись до ресурсу. Якщо ж знехтувати створенням якісної інформаційної архітектури - користувач буде обирати конкурентні веб-ресурси, які не викликатимуть ускладнень або неясності у використанні чи пошуку потрібної інформації. Основні завдання ІА: розробка зручної навігації з основними розділами та підрозділами, групування інформації за темами чи іншими критеріями, створити пошукову систему, або фільтри, також можна додавати теги, які, наприклад, можуть класифікувати дописи або інфо-картки. [19],[20] Серед інших зацікавлених користувачів, велику частку аудиторії створеного веб-ресурсу складатимуть учні та студенти, вчителі та викладачі освітніх закладів. Виходячи з цього, тексти та матеріали мають бути достатньо лаконічними, але нести якомога більше суті подій. Крім цього, має бути доступ чи посилання на наукові джерела або архівні матеріали. Дуже актуальними будуть візуальні матеріали - зображення фрагментів історичних книг, зображення діячів, інфографіки, діаграми, можливо навіть порівняльні таблиці. Для вчителів та викладачів найбільш актуальними будуть корисні матеріали для роботи. Як і студенти, вони потребують більше посилань на джерела, аби мати змогу самостійно досліджувати ту чи іншу тему. Загальна аудиторія більше створює попиту на популярні теми та матеріали, які можуть перегукуватись із сучасною проблематикою. [21] Портрет користувача з широкої аудиторії показано на рис. 3.1. Контент для них має бути зрозумілим, без складних академічних термінів, достатньо легкодоступний і більше наповнений цікавинками, щоб більше привабити та затримати увагу. Велику роль відіграє культурний контекст, адже це невід'ємна частина історії. Більшість аудиторії буде відвідувати сайт з мобільних пристроїв, тому адаптація під малі екрани дуже важлива. Рисунок 3.1 - Портрет користувача. Головна мета інформаційно-освітнього веб-ресурсу “Сторінки історії” - створити доступну, зрозумілу, якісну та достовірну платформу, яка слугуватиме інформаційним ресурсом для широкої аудиторії, допоможе формувати обізнаність у історичній площині, зацікавлювати більший загал до вивчення історії України та сприятиме розвитку критичного мислення. Крім розробленої навігації на веб-ресурсі, інформаційна архітектура також частково реалізована у розділі “Як побудовано веб-ресурс?” на Головній сторінці. Добре складена UX-карта сайту зручно та без зусиль спрямовує користувачів веб-ресурсом, але є й додаткова користь: під час розробки веб-сайтів карта також служить інструментом для співпраці, тому що зацікавлені особи без досвіду в дизайні, можуть звертатися до неї, щоб переконатися, що макет веб-сайту відповідає потребам користувачів та бізнес-цілям.[22] Створено схему організації сторінок та розділів, як видно на рис. 3.2, користувачі можуть візуально зрозуміти структуру веб-ресурсу. Рисунок 3.2 - Структура веб-ресурсу. Також, створено маркування карток тегами, щоб зручніше орієнтуватись до якої теми чи розділу належить конкретна картка. Імплементовано такі елементи, як tabs, щоб поділити, наприклад дописи, за історичними періодами чи тематикою. Додатково є перспектива розробки фільтрації та пошуку за ключовими словами. 3.3 Прототипування інтерфейсів у Figma. У розроблюваному веб-ресурсі, як видно на рис. 3.3, було обрано палітру з трьох акцентних кольорів, #FEDB71, #FC5E60, #A7DECF та четвертого інверсного кольору #282858, який є комплементарним та контрастним відносно основної кольорової палітри та збалансовує її. Рисунок 3.3 - Палітра кольорів веб-ресурсу. Шрифт є одним з візуальних інструментів передачі сенсів бренду. [23] Контент, який буде на веб-ресурсі має великий вплив на вибір шрифту для оформлення. Варто обирати два-три основних шрифтів, аби зробити сторінку різноманітною але неперенасиченою. Зазвичай для великих текстових документів обираються шрифти із засічками, які візуально ніби затримують та зосереджують погляд на тексті. Проте, якщо дивитись у розрізі веб-ресурсу, можливо, краще використовувати шрифти Sans serif, що означає “без” засічок. Такі шрифти достатньо універсальні, в основному тексті вони будуть виглядати більш мінімалістично. Для розроблюваного веб-ресурсу було обрано два основні шрифти - Montserrat та Volkorn, їх представлено на рис. 3.4 та рис. 3.5 Скомбінувавши їх, можна досягти добре скомпонованого вигляду з акцентними виділеннями у потрібних місцях. Рисунок 3.4 - Основний шрифт. Рисунок 3.5 - Додатковий шрифт. Розробку дизайну здійснено у програмному додатку Figma. [24] Це зручний інструмент для візуалізації та проектування основних сторінок та елементів веб-ресурсу. Дизайн головної сторінки на рис. 3.6 та Сторінки Знань на рис. 3.7. Рисунок 3.6 - Дизайн головної сторінки. Рисунок 3.7 - Дизайн сторінки знань. Ширина сайту 1242 px відповідає екрану ноутбука, висота автоматична. Макет є повністю адаптивним під малі екрани: планшети, телефони, малі ноутбуки. Адаптивність розробляється з метою забезпечення зручності у використанні і привабливості для користувачів, тому що найпоширенішим девайсом буде мобільний пристрій. Так як на сторінці є деякі інтерактивні елементи, наприклад, картки, схема – для зосередження уваги користувачів на основному контенті колір фону – білий. Білий колір забезпечує контраст з синім кольором деяких блоків, футера, та тексту і запобігає розпорошуванню уваги користувачів. Інтерфейс візуально зрозумілий, через дотримання ієрархії елементів, заголовків відносно тексту, розташування зображень. 3.4 Реалізація ключових сторінок web-ресурсу У ході розробки веб-ресурсу, було реалізовано дві основні сторінки та сторінки CMS елементів, відповідно до сформованої структури та спроектованого дизайну. Головна сторінка поділена на 6 секцій та 2 додаткові для навігації та футера. Кожна з секцій містить контейнер з фіксованою шириною. Контейнери мають внутрішні відступи по 1rem. Загалом, rem використано як основну одиницю відступів між елементами. Для контейнерів застосовано css-властивість display: flex, що спрощує вирівнювання елементів всередині та автоматично робить лейаути адаптивними. Усі контейнери мають однакове розташування елементів - спершу назва розділу, потім основний контент. Головна сторінка складається з наступних розділів: - Навігаційна панель; Створено 5 кнопок, з переходом на Сторінку Знань та на окремі секції головної сторінки. При наведенні курсора окреме посилання збільшується. На рис. 3.8 зображено дизайн навігаційної панелі. Рисунок 3.8 - Дизайн навігаційної панелі. Уся навігація налаштовується вручну, можна обирати перехід на будь-який елемент через його id, на зовнішній URL, на іншу внутрішню сторінку, або ж на елемент CMS колекції. Налаштування на рис. 3.9. Рисунок 3.9 - Можливості налаштування навігації. - “Шапка” сторінки; Тут міститься текст з коротким описом веб-ресурсу, короткою цитатою відомих історисних діячів та кнопками “Розпочати” і “Доповнити”. Користувач може перейти одразу на форму зворотнього зв’язку, щоб залишити свої побажання або запитання до адміністраторів. Для організації елементів використано grid layout. Структура на рис. 3.10. Рисунок 3.10 - Структура “Шапки” сторінки. - Як побудовано веб-ресурс; У цьому розділі наведено схематичне зображення загальної структури веб- ресурсу. Сформовано з декількох div-блоків з властивістю grid для загального блоку. Натискаючи на певний блок можна перейти на відповідну сторінку чи розділ. Скріншот секції наведено у Додатку А рис. А.1. - Тематика; Ця секція містить перелік тем, у вигляді випадаючого тексту. До елементів підключено CMS колекцію “Themes”, тому, відкриваючи певну тему, користувач може перейти на сторінку елементу де все детальніше розписано, з додатковими зображеннями, або відео. Зображення сторінки елементу та розділу наведено у Додатку А, рис. А.4 та А.2 відповідно. Розкривання тексту реалізовано компонентом accordion, Додаток А, рис. А.3. - Дописи; Цей розділ представлено у вигляді карток. Дописи розділені за категоріями - Література, Історичні міфи, Культура, Шістдесятники. Додаватись категорії будуть поступово і їх може бути необмежена кількість. Цей розділ втілює вище описану потребу показувати історію не лише через факти чи дати подій, а й через призму культури або літератури. Він міститиме зібрані думки відомих людей на різні суспільно важливі теми. Картки також є елементами CMS колекції і фільтруються відповідно до обраної категорії. - Про проєкт; - Футер. Важливим елементом є форма зворотнього зв’язку. За допомогою інструменту для автоматизації процесів між додатками Zapier, дані із заповненої форми записуються у гугл документ, рис. 3.11, де їх обробляє адміністратор. За допомогою Zapier, можна надсилати дані у чати, або канали соціальних мереж для опрацювання, чи повертати відповідь користувачу одразу, через імплементований код. Рисунок 3.11 - Зап для передавання даних з форми. Сторінка Знань має більш детальну наповненість контентом. Містить наступні розділи: - Інтерактивні картки; Картки, які обертаються при натисненні. З одного боку зображення та заголовок, з іншої детальний опис даної теми. Обертання зроблено через анімацію, прив’язану до кнопки “+” (детальніше), скріншот налаштувань знаходиться у Додатку Б, рис. Б.7. Два div елементи, один має position: relative, інший - position: absolute (0%), також він схований. Position: absolute позиціонується відносно батьківського елементу з relative, і ніби виривається з потоку елементів, що зручно, коли потрібно налаштувати розташування відносно чогось. Картки не підключені до CMS колекції, тому зараз їх контент редагується напряму в редакторі. - Особистості; Цей розділ містить набір карток з особистостями, з яких можна переходити на темплейт для кожної з детальною інформацією. До карток не застосовано flex властивості, вони просто виводяться на сторінку як Collection Item по три в ряду. Темплейти та розділ наведено у Додатку А, рис. А 16 та рис. А.13 відповідно. - Історичний словник. Історичний словник є одним з найцікавіших інтерактивних елементів як при реалізації так і готовим (рис. 3.12). Для кожної окремої літери є таб, у середину якого поміщаються визначення, але відфільтровані за літерою. Рисунок 3.2.3 - Історичний словник. У розробленому веб-ресурс дотримано спроектовану структуру. Використано CMS колекції, які лягають в основу організації за поєднання між собою карток чи іншого контенту. Розроблено сторінки окремих елементів колекцій. Навігація зручно організована, наявні переходи до ключових секцій, та сторінок. Схема будови веб-ресурсу дозволяє користувачам побачити суцільну картину і краще зрозуміти структуру. У Webflow дуже розвинена система управління CSS стилями. Створюються комбо-класи, які застосовуються до різних елементів, і ті мають однаковий стиль. Це дуже оптимізовує код та зменшує час завантаження ресурсу. Розробка на Webflow максимально подібна до верстки вручну, але набагато легше та швидше виконується. Повна структура сторінок наведена у Додатку Б. Налаштовано також українську локалізацію, здійснено базові SEO налаштування та мета теги для полегшення виведення у пошуку. 3.5 Тестування web-ресурсу. Використання веб-сторінок практично в усіх сферах сучасного суспільства зумовлює підвищення їхньої якості як з точки зору повноти та зручності контенту, так і з точки зору безпеки. [25] Тому важливим елементом при розробці є тестування. Тестування веб-ресурсу “Сторінки історії” проведено за наступними видами: функціональне тестування, тестування кросбраузерності та адаптивності, тестування юзабіліті, тестування продуктивності та безпеки. Результати функціонального тестування наведено в таблиці 3.1, їх розроблено відповідно до функціональних вимог до веб-ресурсу, визначених у пункті 3.1. Таблиця 3.1 Результати функціонального тестування. Назва тестованої Успіх Помилка функції Навігація: чи Так працюють усі кнопки у меню Фільтр карток за Так категоріями у розділі “Дописи” Інтерактивні картки Так обертаються після кліку. Кнопки “Детальніше” Так працюють, та ведуть на сторінку айтема Елемент “акордеон” Так розгортається та коректно відображає інформацію Користувач може Так заповнити форму зворотнього зв’язку Користувач може Так написати коментар Система з’єднує запит Так з форми з чат-ботом чи документом для опрацювання адміністратором Користувач може Так ставити рейтинг дописів Система показує Так повідомлення про успіх чи помилку заповнення форми Адміністратор може Так створювати/видаляти/р едагувати колекції CMS Адміністратор має Так доступ до панелі налаштування SEO чи статистики Користувач може Так зареєструватись на веб-ресурсі Тестування кросбраузерності проведено у браузерах Chrome, Firefox, Edge, результати наведено у таблиці 3.2 Таблиця 3.2 Результати тестування кросбраузерності. Об’єкт тестування: Google Chrome Firefox Edge версія: версія: версія: 136.0.7103.114 127.0 136.0.3240.76 Вигляд дизайну Коректно Коректно Коректно Робота навігації Коректно Коректно Коректно та кнопок Відображення Коректно Коректно Коректно тексту Відображення Коректно Коректно Коректно зображень Робота форми Коректно Коректно Коректно Робота Коректно Коректно Коректно динамічних елементів, інтерактивних елементів Тестування адаптивності, при відсутності потрібних девайсів можна провести у візуальному редакторі Webflow, або у панелі розробника у браузері. Тестування проводилось на планшеті, зі стилями від брейкпоінту 991px і нижче, на телефоні - брейкпоінт від 767px, та на ще меншому екрані - від 478px і нижче, такий екран найчастіше мають стандартні мобільні телефони. У результаті тестування на планшеті, усі елементи розташувались коректно, адаптувались тексти, зображення і елементи карток. Навігаційне мені автоматично перетворюється на випадаючий список. Тестування мобільного також пройшло успішно, проте на найменшому екрані не адаптувались розміри шрифтів або деякі леяути. Ці неточності адаптовано вручну через прописування нових стилів, для екранів від 478px. Скріншоти для перегляду адаптації наведено у Додатку В. Тестування юзабіліті має перевірити ергономічність веб-ресурсу, зручність використання, читабельність та доступність. Загалом, навігацію втілено як класичним способом - навігаційна панель зверху сторінок, так і за допомогою схеми побудови веб-ресурсу. Тому навігація досить добре розвинена. Інтерфейс не має зайвих елементів або реклами, яка б відволікала користувача. Забезпечено читабельність через вдало підібрані шрифти та кольори. Темно синій колір добре контрастує зі світлим фоном. Веб-ресурс інтуїтивно зрозумілий та доступний для користувачів. На рис. 3.13 та рис. 3.14 показано результати тестування веб-ресурсу на швидкість завантаження на платформі PageSpeed. Рисунок 3.13 - Тестування швидкості завантаження. Рисунок 3.14 - Поради для оптимізації. Бачимо, що ще можна оптимізувати деякі зображення, перевівши їх у формат WebP, для зменшення ваги. Додати виправлення у CSS код, наприклад ще більше використовувати комбо-класи для однакових елементів, щоб заощадити місце в пам’яті. Тестування безпеки, враховуючи, що веб-ресурс, створено на платформа Webflow, базові заходи безпеки налаштовано автоматично, такі як SSL сертифікати, HTTPS з’єднання, резервні копії. Тестування SSL та TLS протоколу зроблено в онлайн-сервісі Qualys SSL Labs , результати наведено у Додатку Г. З допомогою веб-сервісу Mozilla Observatory можна провести CSP аналіз, HTTPS, CORS. За результатами, варто покращити політику безпеки контенту (CSP) - Видалити unsafe-inline та data: з script-src, надто широкі джерела з object-src та script-src, а також переконатися, що object-src та script-src налаштовано. CORS та HTTPS пройшли успішно перевірку та з цим проблем немає. Загалом, тестування веб-ресурс пройшов доволі успішно, розроблено багато хороших рішень для якісного користувацького досвіду. Проте, бачимо, що деякі речі ще можна покращити для оптимізації завантаження та більшої безпеки. ВИСНОВКИ Отже, у кваліфікаційній роботі, розроблено інформаційно-освітній веб-ресурс “Сторінки історії”. Він складається з двох основних сторінок, та декількох додаткових. Реалізовано першопочаткову мету роботи - створення якісного, адаптивного, візуально красивого веб-ресурсу з метою забезпечити зручний доступ до навчальних матеріалів. На основі проаналізованих існуючих ресурсів та сайтів присвячених історії України, було виділено основні переваги та недоліки, які враховувались при розробці веб-ресурсу. Враховувались наступні пункти: - структура ресурсу; - навігація; - дизайн; - інформаційне наповнення; - інтерактивність; - ергономічність. Визначено основні вимоги до веб-ресурсу, які втілено у дизайн та функціональність. Основна увага приділена взаємодії користувача з інтерактивними елементами. Веб-ресурс розроблено на платформі Webflow, яка надає комплексні рішення для створення веб-додатків чи сайтів, враховуючи і безпекові заходи. Завдяки вбудованій системі керування контентом, створено чотири колекції для інформаційних карток та ще одна для організації категорій. Кожна колекція містить декілька дефолтних полів, які виводяться на сторінку через елементи тексту чи зображень. Такими колекціями зручно керувати та наповнювати їх, редагувати або видаляти. Для кожного айтема колекції автоматично створено сторінку, щоб можна було розглядати детальніше обрану тему. Контент поділено на ключові аспекти історії України - події, особистості, історичні періоди розвитку держави. Для створення загальної картини також є тематичні дописи про культуру чи літературу, історичні міфи та інш. Усе це допомагає створити комплексне уявлення користувача про можливості вивчення історії та її всеохопність. Перспектив для розвитку веб-ресурсу достатньо багато. При систематичному наповненні актуальним контентом, можна розробити велику та різноманітну систему, яка буде користуватись попитом у користувачів. Адже через невелику конкурентність на ринку, веб-ресурс має всі можливості стати одним із лідерів. Наступним етапом розробки постає створення третьої сторінки “Сторінка Розвитку”, де буде представлено набір різних завдань та тестів для перевірки отриманих знань. Це можливо реалізувати через використання будь-якої мови програмування та імплементацію кастомного коду на сторінку. Також, важливо реалізувати можливість реєстрації користувачів та створення особистих кабінетів. Це додасть веб-ресурсу персоналізованого підходу до кожного користувача і зручності в управлінні. Розроблений веб-ресурс це зручний інструмент для популяризації та вивчення історії нашої держави. Він є актуальним у контексті сучасних подій, допоможе у формуванні критичного мислення, та дослідженні причинно-наслідкових зв’язків у суспільства. СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 1. Webflow Docs. 2025 URL: https://developers.webflow.com/data/docs/getting-started-apps 2. Webflow API. 2025. URL: https://developers.webflow.com/data/reference/rest-introduction 3. Ciaran Connolly. EdTech in 2025: New Growth Trends & LearningMole.com’s Empowering Rise. 2025. Перший абзац. URL: https://profiletree.com/edtech-in-2025-new-growth-trends/ 4. Федорова Христина . EdTech-бізнес в Україні: як розвивається ринок цифрової освіти. 2024. URL: https://hub.kyivstar.ua/articles/ed-tech-biznes-v- ukrayini-yak-rozvivayetsya-rinok-czifrovoyi-osviti 5. Філіпов Ілля. Перспективи та напрямки зростання EdTech в Україні. European Business Association. URL: https://eba.com.ua/perspektyvy-ta- napryamky-zrostannya-edtech-v-ukrayini/ 6. ПОЛОЖЕННЯ про електронні освітні ресурси : затв. наказом МОНУ від 5.10.2012 р. № 1060, р.1 п. 4. 7. Про проект "Історична Правда". 2022 URL: http://istpravda.com.ua/about/ 8. Книга: Принципи маркетингу (Lumen). Пункт 10.5: Процес розробки нового продукту. 2022. URL: https://ukrayinska.libretexts.org/ 9. Дегтярьова Л.М., Гроза П.М., Сомов С.В. Навчальний посібник з дисципліни «Технології розробки програмного забезпечення» для студентів спеціальності 123 «Комп’ютерна інженерія» Полтава: ПолтНТУ, 2017. – 7 с. 10. Build with more power, creativity, and agility. 2025. URL: https://webflow.com/vs/wordpress 11. Comparing Wix vs. Webflow. Discover why leading agencies and teams choose Webflow over Wix. 2025. URL: https://webflow.com/vs/wix 12. Як вибрати правильний технологічний стек для вашого проекту. 2025. URL: https://redstone.agency/blog/yak-vybraty-pravylnyi-tekhnolohichnyi-stek- dlia-vashoho-proektu/ 13. Парненко В.С. Веб-дизайн як фундамент сучасного віртуального середовища. Праці Одеського політехнічного університету, 2013. с. 248 14. Voll Digital Agency. Структура сайту: основні види та як правильно зробити структуру сайту. 2025. URL: https://voll.com.ua/uk/blog/struktura- sajtu-osnovni-vidi-ta-yak-pravilno-zrobiti-strukturu-sajtu 15. Корогод Г. О. Дослідження структури організації веб-сайту при просуванні в мережі / Г. О. Корогод, Д. І. Мосійчук // Інформаційні технології в науці, виробництві та підприємництві : збірник наукових праць молодих вчених, аспірантів, магістрів кафедри комп’ютерних наук та технологій / за заг. наук. ред. В. Ю. Щербаня. – Київ : ТОВ "Фастбінд Україна", 2023. – С. 138-142. 16. Адміністрування сайтів та блогів : метод. рекомендації до самостійної роботи здобувачів вищої освіти на І (бакалаврському) рівні за ОПП 281 «Публічне управління та адміністрування» та 073 «Менеджмент» / [уклад. Т. В. Тушевська, А.О. Доренська] ; М-во освіти і науки України, Центральноукраїн. нац. техн. ун-т. – Кропивницький : ЦНТУ, 2020. – 47 с. 17. Visure Solutions. Функціональні та нефункціональні вимоги (з прикладами). URL: https://visuresolutions.com/uk/ 18. Андрощук О., Черевко Р., Петрушен М. і Голобородько М. Актуальні підходи до побудови інформаційної інфраструктури на основі хмарних технологій з використанням референсної архітектури. Сучасні інформаційні технології у сфері безпеки та оборони. Київ, Україна, 46(1), с. 89–94. 2023. URL: http://sit.nuou.org.ua/article/view/280723 19. Мина Ж. В., Пелещиши А. М. Інтернет-ресурси історії України в глобальній комп’ютерній мережі: інформаційне наповнення. Національний університет “Львівська політехніка”, Інститут гуманітарних та соціальних наук. 2014. URL: https://ena.lpnu.ua:8443/server/api/core/bitstreams/481fcb5b- 0680-4957-b8a9-ce1748e7174c/content 20. Інформаційна архітектура: Основний посібник. 2025. URL: https://dizz.in.ua/uk/informaczijna-arhitektura-osnovnij-posibnik/ 21. Самолінська С. І. Сегментація аудиторії бренду при створенні рекламної кампанії. URL: http://www.economy.nayka.com.ua/pdf/4_2021/203.pdf 22. Mads Soegaard. What is a Sitemap in UX Design? 2025. URL: https://www.interaction-design.org/literature/article/ux-sitemap 23. Коротенко Ольга. Роль шрифтів у брендингу. Базилік медіа. 2021. URL: https://bazilik.media/rol-shryftiv-u-brendynhu/ 24. Figma Learn. Product documentation. 2025. URL: https://help.figma.com/hc/en-us/categories/360002042553 25. М.І. Цюцюра, О.В. Криворучко, Т.О. Жирова, Н.О. Котенко. Сучасні технології тестування і захисту веб-сторінок. Управління розвитком складних систем, номер 39, 2019. с. 100.