| Найменування показників | Галузь знань, спеціальність, ступінь вищої освіти | Характеристика навчальної дисципліни |
|---|---|---|
| Денна форма навчання | ||
| Кількість кредитів - 8 |
Галузь: 12 Інформаційні технології Спеціальність або освітня програма: 122 Комп'ютерні науки |
Статус дисципліни нормативна |
| Залікових модулів - 2 | Рік підготовки | |
| Змістових модулів - 4 | 1, 2 | |
| Загальна кількість годин - 240 | Семестр | |
| 2, 3 | ||
| Лекції (год.) | ||
| 48 | ||
|
Тижневих годин для денної форми навчання: аудиторних: 2, 3 семестр – 3 години |
Ступінь вищої освіти: бакалавр |
Практичні, семінарські (год.) |
| — | ||
| Лабораторні (год.) | ||
| 96 | ||
| Самостійна робота (год.) | ||
| 96 | ||
| Індивідуальне завдання (год.) | ||
| — | ||
| Вид контролю: | ||
| Залік, екзамен |
Метою дисципліни є формування у студентів знань, умінь та навичок, необхідних для створення сучасних веб-застосунків та веб-дизайну, використовуючи новітні технології та методики розробки. Особливу увагу приділено основам UX/UI дизайну, верстці сторінок за допомогою HTML та CSS, інтерактивності за допомогою JavaScript, роботі з веб-фреймворками, а також взаємодії з базами даних через SQL.
Тема 1. Основи UX-дизайну: Принципи та патерни поведінки користувачів Вступ до управління користувацьким досвідом (UX) та огляд ключових принципів зручності веб-застосунків. Вивчення психології сприйняття інтерфейсів та загальних поведінкових патернів цільової аудиторії.
Тема 2. Дослідження та тестування користувацького досвіду Ознайомлення із сучасними методиками дослідження потреб аудиторії, розробкою персон та сценаріїв взаємодії (User Flows). Створення гіпотез, їх низькодеталізоване прототипування та тестування на реальних користувачах.
Тема 3. Основи UI-дизайну та візуального оформлення Розгляд ролі User Interface (UI) у веб-дизайні та основних принципів візуального оформлення сайтів. Підбір кольорової палітри, створення гармонійної типографіки та розробка дизайн-системи проєкту.
Тема 4. Побудова інтерфейсів: Сітки та інтерактивні елементи Практичне використання відступів та сіток для правильного розміщення елементів на екрані. Розробка та оформлення інтерактивних компонентів (кнопки, форми, меню) з підготовкою до наступного етапу верстки.
Тема 5. Архітектура WWW та протоколи передачі даних Огляд історії та базових принципів роботи Всесвітньої павутини, клієнт-серверної архітектури та структури URL. Вивчення основних протоколів (HTTP/HTTPS) та статус-кодів відповідей сервера.
Тема 6. HTML5: Семантика та структура документа Знайомство з мовою розмітки HTML5 та базовими тегами для створення структури веб-сторінки. Особлива увага приділяється семантичній розмітці та правильному форматуванню текстового і медіа-контенту.
Тема 7. Блокова модель CSS та позиціювання елементів Вивчення основ каскадних таблиць стилів (CSS) та принципу блокової моделі (Box Model). Опанування властивостей відступів, меж та різних видів позиціювання елементів у потоці документа (static, relative, absolute, fixed).
Тема 8. Сучасні Layout-технології: Flexbox Детальний розгляд модуля CSS Flexible Box Layout для створення гнучких одновимірних макетів. Налаштування вирівнювання, розподілу вільного простору та автоматичного перенесення елементів.
Тема 9. CSS Grid та методології адаптивного дизайну
Вивчення системи CSS Grid Layout для побудови складних двовимірних сіток веб-сторінок. Застосування медіа-запитів (@media) для адаптації дизайну під різні розміри екранів (мобільні, планшети, десктопи).
Тема 10. Форми, валідація та збір даних у HTML5 Створення складних інтерактивних форм для взаємодії з користувачем та збору даних. Використання нових типів вводу HTML5 та вбудованих механізмів валідації на стороні клієнта за допомогою псевдокласів CSS.
Тема 11. Оптимізація графіки та продуктивність верстки Робота з різними форматами зображень (растрові, векторні SVG, WebP) та їх вплив на продуктивність. Вивчення базових технік анімації CSS та мікроінтеракцій для покращення користувацького досвіду без втрати швидкості завантаження.
Тема 12. Хостинг, розгортання та основи SEO Знайомство з базовими принципами пошукової оптимізації (SEO), мікророзміткою та доступністю веб-застосунків. Практичне розгортання статичного проєкту в інтернеті з використанням сучасних платформ (GitHub Pages, Vercel).
Тема 13. JavaScript ES6+: Синтаксис та структури даних Основи програмування мовою JavaScript, ознайомлення зі змінними, типами даних та операторами. Робота зі складними структурами: масивами, об’єктами та сучасним синтаксисом (деструктуризація, spread-оператор).
Тема 14. Функції, замикання та контекст виконання (this)
Глибоке розуміння функцій у JS: стрілочні функції, замикання (closures) та лексичне оточення. Дослідження поведінки контексту виконання (this) у різних ситуаціях та методах об’єктів.
Тема 15. Асинхронність у JS: Callbacks, Promises, Async/Await
Опанування асинхронного програмування для уникнення блокування інтерфейсу користувача. Перехід від традиційних колбеків (callbacks) до використання промісів (Promises) та сучасного синтаксису async/await.
Тема 16. Робота з DOM та Event Loop Практична взаємодія JavaScript з HTML-об’єктами через Document Object Model (DOM) та створення динамічних інтерфейсів. Розуміння Циклу подій (Event Loop) та механізму обробки подій миші й клавіатури.
Тема 17. Мережеві запити: Fetch API та робота з JSON Налагодження взаємодії між клієнтом та сервером за допомогою Fetch API для обміну даними. Парсинг та генерація даних у форматі JSON для інтеграції з публічними REST API.
Тема 18. Вступ до компонентного підходу та React Ознайомлення з бібліотекою React та архітектурою розробки через ізольовані компоненти. Налаштування середовища розробки за допомогою сучасних збирачів (Vite) та базова структура React-додатку.
Тема 19. JSX, Props та рендеринг списків Створення розмітки всередині JavaScript-коду за допомогою синтаксису JSX. Передача даних між компонентами за допомогою Props та динамічний рендеринг списків або умовне відображення блоків.
Тема 20. Хуки стану: useState та керовані компоненти
Керування локальним станом компонента за допомогою хука useState. Створення “керованих” форм (controlled components) у React для миттєвої реакції на зміну введених користувачем даних.
Тема 21. Хуки ефектів: useEffect та життєвий цикл
Використання хука useEffect для виконання побічних ефектів, таких як отримання даних із сервера при завантаженні сторінки або підписка на події вікна. Розуміння етапів монтування та розмонтування компонентів.
Тема 22. Навігація в SPA: React Router Створення багатосторінкових односторінкових додатків (Single Page Applications) із миттєвими переходами між сторінками. Налаштування динамічного роутингу, захищених маршрутів та параметрів в URL за допомогою React Router.
Тема 23. Управління глобальним станом (Context API / Zustand) Впровадження централізованого глобального стану додатку для передачі даних (таких як вміст кошика покупок чи авторизація) між усіма компонентами без “prop drilling”. Вивчення вбудованого Context API та сторонніх легковагових менеджерів стану.
Тема 24. Стилізація у React: Styled Components / Tailwind Інтеграція сучасних рішень для стилізації у React-екосистемі. Використання компонентів із вбудованими стилями (CSS-in-JS) або утилітних класів Tailwind CSS для швидкого створення адаптивних інтерфейсів.
Тема 25. Основи Node.js та Express для веб-розробки Введення до бекенд-розробки: знайомство з середовищем Node.js для запуску JavaScript на сервері. Проєктування базового власного міні-API за допомогою фреймворку Express для обслуговування запитів клієнта.
Тема 26. Робота з базами даних (Firebase / Supabase) Підключення фронтенд-додатку до хмарної бази даних (BaaS) для зберігання реальних даних користувачів. Налаштування запитів на читання та запис, базові принципи побудови бекенду без написання власного серверного коду.
Тема 27. Тестування та якість коду (Jest, Testing Library) Ознайомлення із найкращими практиками забезпечення якості програмного забезпечення. Написання модульних (unit) тестів для алгоритмів та ізольованих React-компонентів інструментами Jest та React Testing Library.
Тема 28. Інтеграція AI-функцій (Chatbot) та деплой Впровадження елементів штучного інтелекту в готові проєкти через доступні API (наприклад, інтелектуальний помічник або семантичний пошук). Фінальне розгортання (деплой) розробленого React-додатку та презентація результатів.
| Назви змістових модулів і тем | Кількість годин всього |
У тому числі (годин) | ||||
|---|---|---|---|---|---|---|
| лк | пр | лаб | інд | с.р. | ||
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| ЗАЛІКОВИЙ МОДУЛЬ 1 (Семестр 1) | ||||||
| Змістовий модуль 1. Основи Web-дизайну та проєктування інтерфейсів (UX/UI) | ||||||
| Тема 1. Основи UX-дизайну: Принципи та патерни поведінки | 18 | 6 | — | 6 | — | 6 |
| Тема 2. Дослідження та тестування користувацького досвіду | 14 | 4 | — | 4 | — | 6 |
| Тема 3. Основи UI-дизайну та візуального оформлення | 14 | 4 | — | 4 | — | 6 |
| Тема 4. Побудова інтерфейсів: Сітки та інтерактивні елементи | 14 | 4 | — | 4 | — | 6 |
| Разом за змістовим модулем 1 | 60 | 18 | — | 18 | — | 24 |
| Змістовий модуль 2. Сучасна базова Web-розробка (HTML5 та CSS3) | ||||||
| Тема 5. Архітектура WWW та протоколи передачі даних | 12 | 4 | — | 4 | — | 4 |
| Тема 6. HTML5: Семантика та структура документа | 7 | 2 | — | 2 | — | 3 |
| Тема 7. Блокова модель CSS та позиціювання елементів | 7 | 2 | — | 2 | — | 3 |
| Тема 8. Сучасні Layout-технології: Flexbox | 7 | 2 | — | 2 | — | 3 |
| Тема 9. CSS Grid та методології адаптивного дизайну | 7 | 2 | — | 2 | — | 3 |
| Тема 10. Форми, валідація та збір даних у HTML5 | 7 | 2 | — | 2 | — | 3 |
| Тема 11. Оптимізація графіки та продуктивність верстки | 7 | 2 | — | 2 | — | 3 |
| Тема 12. Хостинг, розгортання та основи SEO | 6 | 2 | — | 2 | — | 2 |
| Разом за змістовим модулем 2 | 60 | 18 | — | 18 | — | 24 |
| Разом за заліковий модуль 1 | 120 | 36 | — | 36 | — | 48 |
| ЗАЛІКОВИЙ МОДУЛЬ 2 (Семестр 2) | ||||||
| Змістовий модуль 3. Програмування мовою JavaScript: від основ до асинхронності | ||||||
| Тема 13. JavaScript ES6+: Синтаксис та структури даних | 10 | 2 | — | 2 | — | 6 |
| Тема 14. Функції, замикання та контекст виконання (this) | 9 | 2 | — | 2 | — | 5 |
| Тема 15. Асинхронність у JS: Callbacks, Promises, Async/Await | 9 | 2 | — | 2 | — | 5 |
| Тема 16. Робота з DOM та Event Loop | 8 | 2 | — | 2 | — | 4 |
| Тема 17. Мережеві запити: Fetch API та робота з JSON | 10 | 4 | — | 2 | — | 4 |
| Разом за змістовим модулем 3 | 46 | 12 | — | 10 | — | 24 |
| Змістовий модуль 4. Створення сучасних Single Page Applications (React.js) | ||||||
| Тема 18. Вступ до компонентного підходу та React | 7 | 2 | — | 2 | — | 3 |
| Тема 19. JSX, Props та рендеринг списків | 9 | 2 | — | 4 | — | 3 |
| Тема 20. Хуки стану: useState та керовані компоненти | 8 | 4 | — | 2 | — | 2 |
| Тема 21. Хуки ефектів: useEffect та життєвий цикл | 6 | 2 | — | 2 | — | 2 |
| Тема 22. Навігація в SPA: React Router | 6 | 2 | — | 2 | — | 2 |
| Тема 23. Управління глобальним станом / Context API | 6 | 2 | — | 2 | — | 2 |
| Тема 24. Стилізація у React: Styled Components / Tailwind | 6 | 2 | — | 2 | — | 2 |
| Тема 25. Основи Node.js та Express для веб-розробки | 6 | 2 | — | 2 | — | 2 |
| Тема 26. Робота з базами даних (Firebase / Supabase) | 6 | 2 | — | 2 | — | 2 |
| Тема 27. Тестування та якість коду (Jest, Testing Library) | 6 | 2 | — | 2 | — | 2 |
| Тема 28. Інтеграція AI-функцій (Chatbot) та деплой | 8 | 2 | — | 4 | — | 2 |
| Разом за змістовим модулем 4 | 74 | 24 | — | 26 | — | 24 |
| Разом за заліковий модуль 2 | 120 | 36 | — | 36 | — | 48 |
| УСЬОГО ЗА ДИСЦИПЛІНОЮ | 240 | 72 | — | 72 | — | 96 |
| № з/п | Назва теми | Кількість годин |
|---|---|---|
| Семестр 1 | ||
| 1 | Дослідження цільової аудиторії та проєктування архітектури інформації | 6 |
| 2 | Проєктування користувацького досвіду (UX): створення wireframe макетів | 4 |
| 3 | Основи UI-дизайну: розробка візуальної концепції та дизайн-системи | 4 |
| 4 | Створення високодеталізованого (high-fidelity) інтерактивного прототипу веб-інтерфейсу | 4 |
| 5 | Налаштування оточення, робота в терміналі, Git | 4 |
| 6 | Побудова семантичного каркаса веб-сторінки | 2 |
| 7 | Робота з селекторами, кольорами та типографікою | 2 |
| 8 | Побудова складної навігації та карток товарів | 2 |
| 9 | Створення багатоколонкового адаптивного макету | 2 |
| 10 | Реалізація складних форм із різними типами вводу | 2 |
| 11 | Робота з SVG, іконками та медіа-запитами | 2 |
| 12 | Публікація проекту на GitHub Pages/Vercel | 2 |
| Разом за 1 семестр | 36 | |
| Семестр 2 | ||
| 13 | Алгоритми обробки масивів та об'єктів | 2 |
| 14 | Створення логічних модулів та обробка бізнес-логіки | 2 |
| 15 | Робота з таймерами та симуляція мережевих затримок | 2 |
| 16 | Створення інтерактивних елементів (модальні вікна, таби) | 2 |
| 17 | Інтеграція з публічними API (погода, новини) | 2 |
| 18 | Налаштування проекту за допомогою Vite | 2 |
| 19 | Побудова ієрархії компонентів | 4 |
| 20 | Реалізація складних форм у React | 2 |
| 21 | Синхронізація даних із зовнішніми джерелами | 2 |
| 22 | Створення багатосторінкового додатку | 2 |
| 23 | Побудова кошика покупок або системи автентифікації | 2 |
| 24 | Адаптація інтерфейсу під різні пристрої | 2 |
| 25 | Створення власного міні-API | 2 |
| 26 | Підключення бази даних до фронтенд-додатку | 2 |
| 27 | Написання модульних тестів для компонентів | 2 |
| 28 | Інтеграція AI-функцій (Chatbot) та деплой | 4 |
| Разом за 2 семестр | 36 | |
| УСЬОГО | 72 | |
Семінарські (практичні) заняття робочою програмою не передбачені.
| № з/п | Тема самостійної роботи | Кількість годин |
|---|---|---|
| Семестр 1 | ||
| 1 | Дослідження принципів UX-дизайну та їх вплив на користувацький досвід | 6 |
| 2 | Аналіз UI-дизайну на основі прикладів успішних веб-сайтів | 6 |
| 3 | Поглиблене вивчення семантичних тегів HTML5, метаданих та доступності (a11y) | 6 |
| 4 | Сучасні підходи до CSS-архітектури та препроцесори (SASS/SCSS) | 6 |
| 5 | Математичні функції CSS та новітні можливості адаптивного дизайну | 6 |
| 6 | Практика роботи з векторною графікою (SVG) та мікроінтеракціями | 6 |
| 7 | Поглиблене налаштування інструментів розробника (DevTools, Linters, Formatters) | 6 |
| 8 | Основи пошукової оптимізації (SEO) та хостинг статичних сайтів | 6 |
| Разом за 1 семестр | 48 | |
| Семестр 2 | ||
| 9 | Дослідження нових стандартів ECMAScript та спеціалізованих структур даних | 6 |
| 10 | Поглиблене розуміння Event Loop, мікротасок та багатопотоковості | 6 |
| 11 | Об'єктно-орієнтоване та функціональне програмування в JavaScript | 6 |
| 12 | Дослідження екосистеми React та інструментів управління станом | 6 |
| 13 | Оптимізація продуктивності React-додатків та збирачі модулів | 6 |
| 14 | Архітектура REST API та основи безпеки веб-додатків (Web Security) | 6 |
| 15 | Порівняльний аналіз баз даних та серверних середовищ (Node.js/Deno/Bun) | 6 |
| 16 | Сучасні методології тестування (TDD/BDD) та CI/CD пайплайни | 6 |
| Разом за 2 семестр | 48 | |
| УСЬОГО | 96 | |
Індивідуальні (практичні) заняття робочою програмою не передбачені.
Лабораторні роботи, самостійна робота з навчальною та довідковою літературою, самостійне виконання практичних робіт (для заочної форми навчання), консультації. На лабораторних заняттях студенти працюють, виконуючи завдання по кожній темі. Ці завдання та методика їх виконання роз’яснюються викладачем з використанням мультимедійного проектора. Основна мета лабораторних робіт – надати студентам практичних навичок застосування набутих теоретичних знань при вирішенні конкретних завдань. Методами навчання дисципліни «Інформатика» є способи спільної діяльності й спілкування викладача і студентів, що забезпечують вироблення позитивної мотивації навчання, оволодіння системою професійних знань, умінь і навичок, формування наукового світогляду, розвиток пізнавальних сил, культури розумової праці майбутніх фахівців. Залежно від джерела знань, під час лабораторних навчальних занять використовуються наступні методи навчання: словесні (пояснення, бесіда, дискусія, діалог), наочні (демонстрація, ілюстрація), практичні (рішення задач, ділові ігри). За характером пізнавальної діяльності, при вивчені дисципліни використовуються: пояснювально-наочний проблемний виклад; частково-пошуковий та дослідницький методи. За місцем в структурній діяльності використовуються: -методи організації й здійснення навчальної діяльності, що поєднує словесні, наочні і практичні методи; репродуктивні й проблемно-пошукові; методи навчальної роботи під керівництвом викладача й методи самостійної роботи студентів; -методи стимулювання й мотивації навчальної роботи, що об’єднали в собі пізнавальні ігри, навчальні дискусії, моделювання рольових ситуацій, створення ситуацій успіху в навчальній роботі, пред’явлення вимог і метод заохочення; -методи контролю й самоконтролю за навчальною діяльністю: методи усного, письмового контролю; індивідуального й фронтального, тематичного і систематичного контролю.
Оцінювання знань студентів складається з поточного, модульного та пі- дсумкового контролю. Для оцінювання успішності студентів використовується модульно- рейтингова система, яка передбачає розподіл балів за виконання усіх запла- нованих видів робіт. При цьому максимальна кількість балів за умови від- мінного їх виконання становить 100. Ця сума складається з балів отриманих за результатами модульного тестування та балів, що їх накопичив студент за виконання, індивідуальних завдань, практичних робіт. Поточний контроль знань студентів передбачає оцінювання за наступ- ними основними напрямками: -перевірка виконання лабораторних робіт; -перевірка теоретичних знань та розуміння сутності виконаної робо- ти під час захисту лабораторної роботи. З даних компонентів складаються загальні бали, які фіксуються в жур- налі викладача. Оцінювання рівня засвоєння теоретичних знань студентів проводиться під час експрес опитування, за результатами перевірки індивіду- альних завдань та під час захисту лабораторних робіт. Активна робота під час аудиторних занять також може оцінюватись ви- кладачем певною кількістю додаткових балів по кожній темі. Модульний контроль базується на результатах першого та другого мо- дульного тестування та здійснюється після закінчення кожного змістового модуля. Підсумкова оцінка складається з результатів усіх рівнів поточного та модульних контролів, що передбачені навчальним планом за весь термін ви- кладання дисципліни та, якщо це передбачено, результатів складання екзаме- ну з дисципліни. Результати підсумкового контролю фіксуються у балах та перерахову- ються в оцінки за національною шкалою та шкалою ЕСТS.
Для поточного та підсумкового контролю успішності здобувачів вищої освіти використовується модульно-рейтингова система, яка передбачає роз- поділ балів за виконання усіх запланованих видів робіт. Така система оціню- вання виключає можливість суб’єктивного відношення викладача і орієнтує здобувача вищої освіти на підрахунок своїх балів за конкретні види робіт.
(денна форма навчання, підсумковий контроль - залік)
| Поточне оцінювання та самостійна робота | Разом | |
|---|---|---|
| Змістовий модуль 1 | Змістовий модуль 2 | |
| 50 | 50 | 100 |
(макс. кількість балів ) (денна форма навчання, підсумковий контроль - іспит)
| Поточне оцінювання та самостійна робота | Екзамен | Разом | |
|---|---|---|---|
| Змістовий модуль 3 | Змістовий модуль 4 | ||
| 30 | 30 | 40 | 100 |
| Сума балів за всі види навчальної діяльності |
Оцінка ECTS |
Оцінка за національною шкалою для екзамену, курсового проекту (роботи), практики |
Оцінка за національною шкалою для заліку |
|---|---|---|---|
| 90–100 | A | відмінно | зараховано |
| 82–89 | B | добре | зараховано |
| 74–81 | C | добре | зараховано |
| 64–73 | D | задовільно | зараховано |
| 60–63 | E | задовільно | зараховано |
| 35–59 | FX | незадовільно з можливістю повторного складання | не зараховано з можливістю повторного складання |
| 1–34 | F | незадовільно з обов'язковим повторним вивченням дисципліни | не зараховано з обов'язковим повторним вивченням дисципліни |
Програма навчальної дисципліни; робоча програма навчальної дисципліни; наочні навчальні матеріали (слайди), завдання та методичні вказівки до самостійної роботи та практичних занять.
Базова література:
Додаткова література