IS-32_appRECORD-LinnykKatya-FIOT-2026

Тема, Мета, Місце розташування

Тема: Веб-орієнтований застосунок популярних фільмів і серіалів “Films&Serials”.

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

Місце розташування:

• Репозиторій звітного HTML-документа: (https://github.com/klynxlx/IS-32_appRECORD-LinnykKatya-FIOT-2026)
• Звітний HTML-документ (Жива сторінка): (https://klynxlx.github.io/IS-32_appRECORD-LinnykKatya-FIOT-2026/)
• Репозиторій власного веб-застосунку: (https://github.com/klynxlx/IS-32_appWEB-LinnykKatya-FIOT-2025-)
• Власний веб-застосунок (Жива сторінка): (https://klynxlx.github.io/IS-32_appWEB-LinnykKatya-FIOT-2025-/)

Актуальність теми

У сучасних умовах цифровізації стрімко зростає кількість інформації, пов’язаної з кінематографом: нові фільми виходять щотижня, користувачі активно шукають описи, рейтинги, жанри та рекомендації. Проте велика кількість сайтів із фільмами є перевантаженими, незручними або містять надлишкову рекламу, що ускладнює швидкий доступ до потрібних відомостей. Це створює проблему ефективного та комфортного пошуку фільмів, особливо для користувачів, які хочуть швидко знайти інформацію за роком, жанром або сюжетом. Тому актуальним є створення простого, інтуїтивно зрозумілого та функціонального веб-застосунку, який дозволяє переглядати каталог фільмів, фільтрувати їх за роком чи жанром, а також отримувати детальний опис у зручному форматі. Розв’язання цієї проблеми дозволить забезпечити користувачам швидкий доступ до інформації, покращити взаємодію з веб-ресурсом та надати більш якісний досвід перегляду контенту. Розробка такого застосунку є важливою, оскільки він може бути використаний як основа для більш складних рекомендаційних систем, персоналізованих добірок або інтеграції зі сторонніми базами даних. Крім того, створення подібних інтерфейсів сприяє розвитку навичок веб-програмування, роботи з даними та побудови зручних користувацьких рішень.

Опис предметного середовища

• Предметна галузь: Сайт є онлайн-платформою для пошуку та перегляду фільмів і серіалів. Він містить описи, трейлери, рейтинги, відгуки та дозволяє додавати улюблені матеріали до списку перегляду.

Опис бізнес-логіки:

Користувач заходить на сайт і бачить категорії популярних фільмів та серіалів. Користувач може натиснути на постер фільму/серіалу для перегляду детальної інформації. Функція пошуку дозволяє знайти конкретний фільм або серіал за назвою. Користувач може сортувати контент за категоріями, як-от: Фантастика, Драма тощо. Користувач може звернутися до підтримки або переглянути FAQ.

Перелік функціональних вимог до інформаційної системи

1. Вимоги до роботи з каталогом фільмів 1.1. Система повинна відображати каталог фільмів у вигляді сітки (галереї) постерів. 1.2. Кожен елемент каталогу має містити: • назву фільму; • рік випуску; • жанр; • короткий опис; • зображення (постер). 1.3. Система повинна забезпечувати завантаження всіх фільмів під час первинного відкриття сторінки.
2. Вимоги до фільтрації та пошуку 2.1. Система повинна надавати можливість фільтрації фільмів за роком випуску. 2.2. Система повинна відображати тільки ті фільми, які відповідають обраному фільтру. 2.3. Система повинна дозволяти скидання фільтра і відновлення повного списку фільмів. 2.4. Система може містити пошук за назвою (опційно, якщо ти хочеш це додати).
3. Вимоги до відображення детальної інформації 3.1. Система повинна відображати модальне вікно з описом фільму при наведенні курсора на постер. 3.2. Модальне вікно повинно з’являтися лише після того, як курсор знаходився на постері не менше 2 секунд. 3.3. Модальне вікно повинно відображатися поряд із постером, а не в центрі екрана. 3.4. Система повинна приховувати модальне вікно, коли курсор припиняє взаємодію з постером.
4. Вимоги до навігації 4.1. Система повинна забезпечувати навігацію між сторінками: • «Головна»; • «Фільми»; • «Серіали»; 4.2. Кожна кнопка навігації повинна реагувати на клік та переводити користувача на відповідну HTML-сторінку.
5. Вимоги до інтерфейсу користувача 5.1. Система повинна мати адаптивний, сучасний і візуально привабливий інтерфейс. 5.2. Основні елементи (кнопки, фільтри, модальні вікна) повинні реагувати на дії користувача (hover, active, focus). 5.3. Система повинна забезпечувати швидку взаємодію без перезавантаження сторінки 5.4. Сайт повинен коректно відображатися на різних пристроях і розширеннях екрана.

Нефункціональні вимоги до інформаційної системи

1. Вимоги до продуктивності 1.1. Час відгуку інтерфейсу при фільтрації фільмів або взаємодії з модальними вікнами не повинен перевищувати 0.5 секунди. 1.2. Час початкового завантаження сторінки не повинен перевищувати 2 секунд при стабільному інтернет-з’єднанні. 1.3. Веб-застосунок має працювати стабільно та без значних затримок навіть при збільшенні кількості фільмів до 200–300 елементів в каталозі
2. Вимоги до надійності 2.1. Система повинна коректно відображати каталог фільмів у разі часткової недоступності ресурсів (наприклад, якщо не завантажився постер). 2.2. Модальне вікно повинно працювати стабільно і не зависати в разі швидкого переміщення курсора між постерами. 2.3. Всі клієнтські функції повинні працювати навіть при відсутності інтернету після першого завантаження сторінки (логіка працює локально через JavaScript). 2.4. Система повинна уникати помилок JavaScript під час роботи (наприклад, доступу до неіснуючих елементів).
3. Вимоги до безпеки 3.1. Система не повинна виконувати зовнішні скрипти, що не є частиною проєкту. 3.2. Вхідні дані користувача (пошук, фільтр) не повинні впливати на структуру документа (захист від XSS). 3.3. Всі підключені ресурси (CSS, JS, зображення) повинні завантажуватися через HTTPS. 3.4. Не повинні зберігатися або передаватися персональні дані користувача.
4. Вимоги до юзабіліті (зручності використання) 4.1. Інтерфейс має бути інтуїтивно зрозумілим і простим для користувачів без технічних навичок. 4.2. Всі кнопки та елементи керування повинні бути візуально зрозумілими та доступними. 4.3. Модальне вікно має з’являтися плавно та ненав’язливо. 4.4. Текстова інформація (описи, назви) повинна легко читатися на будь-якому фоні. 4.5. Фільтр та пошук повинні бути розташовані у видимій частині інтерфейсу.

   Use-case діаграма

   

5. Перегляд каталогу фільмів Актор: Користувач
   Опис:
   Користувач відкриває сторінку та бачить список фільмів у вигляді постерів із короткою інформацією.
   Результат: Фільми відображаються у сітці (grid).
6. Пошук фільмів
   Актор: Користувач
   Попередні умови: Сторінка завантажена та доступне поле пошуку.
   Опис:
   Користувач вводить назву фільму, а система в режимі реального часу приховує невідповідні елементи.
   Результат: На екрані залишаються лише елементи, що відповідають введеному тексту.
7. Фільтрація за жанром
   Актор: Користувач
   Опис:
   Користувач натискає кнопку з жанром (Комедія, Жахи, Пригоди тощо), після чого система відображає лише відповідні фільми.
   Результат: Оновлений список відповідно до обраного жанру.
8. Фільтрація за роком
   Актор: Користувач
   Опис:
   Користувач вибирає рік у фільтрі. Система приховує всі фільми, які не відповідають обраному року.
   Результат: Залишається тільки контент із потрібним роком.
9. Перегляд детального опису фільму (модальне вікно)
   Актор: Користувач
   Опис:
   Користувач наводить курсор на постер. Якщо він тримає курсор на фільмі більше ніж 2 секунди, відкривається модальне вікно поруч із постером.
   Винятки: Курсор забрали раніше — модальне не показується.
   Результат: Користувач бачить опис.

   ER-діаграма

   Пояснення сутностей

User (Користувач)
Містить інформацію про користувача сайту: ім’я, email та пароль. Один користувач може мати один кошик.

Movie (Фільм)
Зберігає інформацію про фільми: назву, рік, опис та постер.

Genre (Жанр)
Містить список жанрів (комедія, жахи, фантастика тощо). Один жанр може містити багато фільмів.

Cart (Кошик)
Кошик користувача, де зберігаються вибрані фільми.

CartItem (Елемент кошика)
Зв’язує кошик і фільм. Зберігає кількість і ціну.

Основні зв’язки

User → Cart — один користувач має один кошик.
Cart → CartItem — кошик може містити багато елементів.
Movie → CartItem — фільм може бути доданий у багато кошиків.
Genre → Movie — один жанр містить багато фільмів.

Структура документа

Шапка (header) з логотипом та навігаційним меню Реалізація у веб-застосунку Основний блок із розташуванням інформаційних карток та іншого наповнення сайту Реалізація у веб-застосунку Нижній колонтитул (footer), що містить контактну або довідкову інформацію Реалізація у веб-застосунку

Функціонально-стилістичні вимоги

Стилізація елементів веб-застосунку “Films&Serials” здійснюється за допомогою CSS3. Вона включає такі основні моменти:

1. Загальна стилізація сторінки – налаштування шрифтів, кольорової гами, відступів, фонів та адаптивності під різні екрани.
2. Сітка карток фільмів (grid layout) – забезпечує рівномірне розміщення елементів на сторінці та автоматичне підлаштування під ширину вікна браузера.
3. Оформлення кнопок та меню – використання кольорів, ховер-ефектів і тіней для покращення взаємодії користувача.
4. Модальні вікна – стилізація спливаючих блоків із описом фільму: фон, рамка, тіні та анімації появи/зникнення.
5. Додаткові ефекти – наприклад, підсвітка при наведенні на картку, плавне зникнення/поява елементів при фільтрації. Таким чином, стилізація забезпечує зручність, привабливість та інтерактивність веб-застосунку.
   • Адаптивна навігація, яка трансформується у компактне «бургер-меню» на пристроях із малою роздільною здатністю
   • Адаптивна сітка контенту, реалізована засобами flexbox або grid, з динамічною перебудовою залежно від ширини екрана (десктоп, планшет, смартфон)
   • Використання медіа-запитів (media queries) для адаптації стилів під різні розміри екранів та орієнтацію пристрою
   • Реалізація візуальних ефектів та анімацій, що підвищують зручність і наочність взаємодії з інтерфейсом (плавне відкриття меню, поява контенту, зміна стану елементів при наведенні курсора, тощо).

Висновки

В результаті виконання лабораторної роботи, я сформулювала ключові складові опису інформаційної системи: актуальність, мету та завдання, об’єкт і предмет роботи, практичне значення, функціональні та нефункціональні вимоги, Use-case та ER- діаграми. На основі досвіду розроблення адаптивного інтерфейсу створила веб-застосунок з використанням сучасних засобів верстки, для забезпечення коректного відображення на різних пристроях.

This site is open source. Improve this page.