Мета полягає в розробці інтерактивно-навчальної системи візуального представлення найпоширеніших методів верстання CSS(Cascading Style Sheets)-мови стилю сторінок та надання можливості перевірки освоєного матеріалу шляхом проходження тестування по конкретних темах.

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

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

Актуальність дослідження. В процесі аналізу, моделювання та розробки інтерфейсу користувача будь якої системи команда розробників зазвичай ретельно планує архітектуру та дизайн UI. Чому це так важливо і цьому варто приділяти час та ресурси? Відповідно до психологічного стану нормальної людини при першому зіткненні з чимось новим вона оцінює це в першу чергу емоційно. Звідси випливає і перший аргумент – користувач має отримати позитивне «перше враження» від вигляду та роботи системи. Говорячи про веб-застосунки варто зазначити, що розміщення компонентів на сторінці відіграє важливу роль в просуванні системи, підвищені переходів на сайт та покращенні конверсій. Більше того, в залежності від бізнес цілей системи, правильне позиціонування компонентів взаємодії з застосунком дозволяє забезпечити швидке та інтуїтивно зрозуміле переміщення по інтерфейсу та підвищує можливість отримання більшого прибутку від комерційних застосунків.

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

Програмне забезпечення навчальної платформи з методами CSS верстки має на меті вирішити проблеми розуміння та сприйняття функціональності п’яти з найпоширеніших технік позиціонування елементів веб-сторінок: Flexbox, Grid, Subgrid, Multi-column layouts та Container Queries.

Аспектом правильності трактування навчального матеріалу є гарант надійності джерела, з якого ця інформація була взята. The World Wide Web Consortium детально описує в своїй документації кожну з досліджуваних технік.

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

Наступні технології використовувалися при реалізації системи:

Зберігання та обробка даних: MongoDB була використана для забезпечення ефективного збереження та обробки даних.

• Front-end Фреймворк: React.js використовувався для розробки користувацького інтерфейсу, забезпечуючи швидку та динамічну взаємодію з користувачем.

• Мова програмування: TypeScript дозволила створити більш безпечний та стабільний код завдяки використанню строгих типів і покращеному контролю помилок.

• Серверний фреймворк: Express.js в поєднанні з Node.js забезпечував швидку та ефективну обробку запитів на сервері.

• Дизайн UI: Figma та GIMP використовувалися для розробки естетичного та зручного користувацького інтерфейсу.

Рис.1. Діаграма компонентів

Висновки. Розробка інтерактивної навчальної системи, яка допомагає у вивченні методів верстання CSS, є досить актуальною і важливою. Дослідження спрямоване на розуміння та використання різних технік макетування веб-сторінок з використанням CSS, реалізованих переважно у формі інтерактивних навчальних модулів та тестів до кожної теми. Висвітлено важливість правильного розміщення компонентів на веб-сторінці для забезпечення позитивного першого враження від системи та підвищення користувацького досвіду. Робота ставить перед собою завдання розробки візуальних компонентів та тестів з перевіркою засвоєння матеріалу, що гарантує якість інформації, що надається користувачам. Для реалізації цих цілей використовуються такі технології, як MongoDB для зберігання даних, React.js для розробки користувацького інтерфейсу, TypeScript для стабільності програмного коду, Express.js з Node.js для обробки запитів на сервері, а також Figma та GIMP для дизайну інтерфейсу.

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ

1. Документація World Wide Web Consortium про CSS: [Електронний ресурс] – Режим доступу: https://www.w3.org/TR/?filter-tr-name=CSS
2. Håkon W. L. Cascading Style Sheets. Norway. 120 p. [Електронний ресурс] – Режим доступу:https://www.wiumlie.no/2006/phd/ (date of access: 20.04.2024)