Web-програмування

Розробники та рецензенти

Заклад вищої освіти:

Компанія-рецензент 1:

Компанія-рецензент 2:

Валідація:

Розробник навчальної програми:

Базова інформація

Шифр та назва спеціальності:

121 - Програмна інженерія

Назва освітньо-наукової програми

Економічна кібернетика

Назва дисципліни

Web-програмування

Вид дисципліни

Основна

Блок дисципліни

Web-програмування

Кількість студентів

Курс/Семестр

Загальна інформація про дисципліну

Анотація

Знайомство із технологією створення web-сторінок

Анотація

Отримання базових навичок створення web-сторінок та використання їх для розв'язання реальних задач

Анотація

Лекції, лабораторні роботи, самостійна робота. Підсумковий контроль – залік

Розподіл часу

Загальний обсяг (кредитів): 4; Лекції (занять): 12; Лабораторні (занять): 12; Практичні (занять): 12; Самостійна робота (годин): 72

Попередні дисципліни

Основи програмування

Матеріально-технічне та програмне забезпечення дисципліни

Microsoft Visual Studio Code, Git Bash, GitHub, Node.js

Структура дисципліни

№	Теоретична складова Назва, перелік питань або анотація лекції	Годин	Практична складова Опис та приклад завдання, а також посилання на методичні матеріали	Годин	Інструменти, засоби та технології
Тема 1 – Верстка Web-сторінки
1	Робоче місце FrontEnd розробника. MS VSCode. Створення HTML-сторінки. Робота із GitHub.	2	Встановлення ПЗ для організації робочого місця розробника. Створення сторінки новин (теги b, i, u, p, h1). Створення репозитарію. Завантаження коду. Використання GitHub pages.	2	HTML-Теги. MS VSCode. GitHub. GitHub Pages.
2	Оформлення сторінки. Теги HTML5 + властивості CSS3. Технологія верстки. Позиціонування блоків. Flexbox	2	Використання CSS для створення сторінок. Створення сторінки із викладачами із використанням flexbox. Верстка власного резюме.	2	CSS. Flexbox.
3	Медіазапит. Принцип mobile first.	2	Адаптація власного резюме під пристрої різного розміру екрана.	2	Mediaqueries. MobileFirst.
Тема 2 – Основи програмування на JavaScript (ES6). Робота з DOM. Знайомство із React.JS
4	Основи програмування на JavaScript. Типи даних. Лінійні програми.	2	Сторінка із підключеним JavaScript. Виведення даних до консолі та до сервісного вікна. Введення даних із сервісного вікна.	2	JavaScript. ES6+. alert, Prompt, Console.log. .
5	Основи роботи з DOM на JavaScript. Обробка подій на JavaScript. Динамічна зміна параметрів елементів	2	Створення калькулятора за однієї з тем з економіки/фінансів (лінійна програма, обчислення)	2	Event listener, DOM
6	Основи програмування на JavaScript. Оператор вибору. Цикли та масиви	2	Створення тесту з одного питання (умовний оператор). Створення тесту з серії питань (масиви, цикли)	2	оператор вибору, цикли, масиви.
7	Використання бібліотеки React JS. Основи JSX. Компоненти React.JS. Стан та життєвий цикл.		Створення простого додатка із використанням бібліотеки React JS.	2	React JS. JSX. props, useState, useEffect
Тема 3 – Робота з ендпоінтами. React.JS
8	Користувацькі функції. Область видимості. Об’єкти	2	Створення тесту з серії питань (із використанням об'єкта як джерела даних)	2	Користувацькі функції. Область видимості. Об’єкти.
9	Динамічне створення елементів. Робота із подіями, принцип "всплиття" події (bubbling). Об’єкт події, методи роботи із подіями	2	Створення браузерної міні гри/симулятора	2	createElement. AppendChild. bubbling, preventDefault, stopPropagation; target і currentTarget.
10	Отримання та відправлення даних з сервера в форматі JSON (JS Fetch). Архітектура клієнт-серверного додатка	2	Отримання даних з сервера для створення тесту. Відправлення результатів тесту на сервер. Внесення даних до бази даних (для готового серверного додатка).	2	JSON. Fetch.
Тема 4 – Підготовка та презентація підсумкового проєкту.
11	Принципи Design Thinking. Принципи Agile. фреймворк Скрам. Бізнесові та технічні цілі проєкту.	2	Формування команд. Робота із таск трекером. Value Proposition Canvas.	2	Design Thinking. Value Proposition Canvas.
12	Продуктове мислення. Орієнтація проєкту на цільову аудиторію. Підготовка документації та презентації.	2	Estimate. UnitEconomcs. Оформлення репозитарію та презентаційної сторінки проєкту. Презентація що продає.	2	Estimate. Unit Economcs.

Теми та завдання для самостійної роботи

№	Назва та опис завдання	Методи контролю та критерії оцінювання	Годин
1	Основи проєктування та прототипування.	Створення прототипу майбутнього додатку (на Layout Bootstrap)	3
2	Bootstrap. Використання Bootstrap для швидкого створення адміністративних панелей.	Верстка сторінки на основі створеного прототипу.	4
3	Основи Material UI	Створення прототипу із використанням принципів Material UI	3
4	Figma для FrontEnd розробника.	Верстка сторінки за готовим прототипом з Figma	4
5	Основи Flex Box. Ігрове навчання верстки flexbox (сервіс flexboxfroggy).	Скриншот із результатом проходження flexboxfroggy	2
6	CSS-препроцесори	Рефакторінг написаного коду із використанням препроцесора SCSS.	3
7	CSS-анімація	Використання 3+ елементів анімації на сторінці.	3
8	Grids. Використання Grid Layout для верстки сторінки.	Сторінка викладачів кафедри зверстана із використанням GridLayout.	4
9	Структура RestAPI. Створення проєкту ендпоінтів. Створення специфікації.	Проєкт open API для додтаку. Використанням swagger editor (https://editor.swagger.io/) для створення специфікації.	2
10	Сучасні принципи верстки SOLID, DRY, KISS.	Тест на розуміння використання + звіт із використання	2
11	Командна робота	Підготовка та захист підсумкового проєкту	42

Проєкт

№

Назва та опис завдання

Метод контролю та захисту

Строки виконання

Створення власного Web-додатка на економічну тематику (калькулятор, симулятор, гра тощо)

Доступ до репозитарію із кодом та до розгорнутого проєкту. Слайди захисту. Скринкаст із презентацією проєкту. Виступ на підсумковому занятті.

Починаючи з середини

Контрольні заходи

№

Назва та опис

Методи контролю та критерії оцінювання

Лабораторна робота. Сторінка новин.