ІНТЕРНЕТ-ТЕХНОЛОГІЇ ТА ПРОЄКТУВАННЯ WEB-ЗАСТОСУВАНЬ - Робоча програма навчальної дисципліни (Силабус)

Реквізити навчальної дисципліни

Програма навчальної дисципліни

1. Опис навчальної дисципліни, її мета, предмет вивчання та результати навчання

Силабус освітнього компонента «Інтернет-технології та проєктування WEB-застосувань» складено відповідно до освітньої програми підготовки бакалаврів «Інформаційні управляючі системи та технології» спеціальності 126 – Інформаційні системи та технології

Метою навчальної дисципліни є формування та закріплення у студентів наступних компетентностей: (ЗК 1) Здатність до абстрактного мислення, аналізу і синтезу; (ЗК 2) Здатність застосовувати знання у практичних ситуаціях; (ЗК 6) Здатність до пошуку, оброблення та узагальнення інформації з різних джерел: (ФК 4) Здатність проєктувати, розробляти та використовувати засоби реалізації інформаційних систем, технологій та інфокомунікацій (методичні, інформаційні; (ФК 8 ) Здатність управляти якістю продуктів і сервісів інформаційних систем та технологій протягом їх життєвого циклу; (ФК 10) Здатність вибору, проєктування, розгортання, інтегрування, управління,адміністрування та супроводжування інформаційних систем, технологій та інфокомунікацій, сервісів та інфраструктури організації.

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

Програмні результати навчання, на формування та покращення яких спрямована дисципліна: (ПРН 3) Використовувати базові знання інформатики й сучасних інформаційних систем та технологій, навички програмування, технології безпечної роботи в комп’ютерних мережах, методи створення баз даних та інтернет-ресурсів,технології розроблення алгоритмів і комп’ютерних програм мовами високогорівня із застосуванням об’єктно-орієнтованого програмування для розв’язаннязадач проєктування і використання інформаційних систем та технологій; (ПРН 5) Аргументувати вибір програмних та технічних засобів для створеннянформаційних систем та технологій на основі аналізу їх властивостей,призначення і технічних характеристик з урахуванням вимог до системи іексплуатаційних умов; мати навички налагодження та тестування програмних ітехнічних засобів інформаційних систем та технологій; (ПРН 6) Демонструвати знання сучасного рівня технологій інформаційних систем,практичні навички програмування та використання прикладних і спеціалізованихкомп’ютерних систем та середовищ з метою їх запровадження у професійнійдіяльності; (ПРН 18) Знати спеціалізовані мови та технології програмування необхідні для розробкипрограмного забезпечення інформаційних управляючих систем та технологійпідтримки прийняття рішень. Розробляти відповідне програмне забезпечення, щовходить до складу інформаційних управляючих систем та технологій підтримкиприйняття рішень.

2. Пререквізити та постреквізити дисципліни

Для успішного засвоєння дисципліни студент повинен володіти освітніми компонентами «Програмування 1 - Основи програмування», «Програмування 2 – Структури даних та алгоритми», «Теорія алгоритмів». «Бази даних». Компетенції, знання та уміння, одержані в процесі вивчення освітнього компонента є необхідними для подальшого вивчення освітніх компонентів «Комп'ютерні мережі», «Проєктування інформаційних систем»б « Системи штучного інтелекту», « Інженерія програмного забезпечення та командна робота»

3. Зміст навчальної дисципліни

Розділ 1 Основи клієннських розробок. HTML-документ. Стильове оформлення елементів HTML-документу Тема 1.1 Інтернет-технології. Класифікація сайтів. WEB-орієнтовані технології. Структура HTML-документу. Основні теги та атрибути. Структурна розмітка. Валідація коду. Тема1.2 Стильове оформлення елементів HTML-документу. Класифікація селекторів. Псевдокласи стану. Робота з кольором. Каскадування. CSS-змінні. Оформлення тексту. Псевдоелементи тексту. Тема1.3 Верстка HTML-документу за макетом. Типи макетів. Блокова модель. Геометрія елемента . Рядково-блокові елементи. Структурні псевдокласи. Flexible Box Layout (Flexbox). Тема1.4 Декоративні ефекти та елементи. Фон елемента. Властивості object-fit і object-position. Векторна графіка. SVG-елементи. Оформлення фігур Тема1.5 Позиціонування елементів. Види позиціонування. Властивість z-index. Властивість overflow. Анімація. CSS-переходи. CSS-анімація Тема1.6 Адаптивна верстка. Медіа-запити. Метатег viewport. Інструменти розробника. Типи верстки. Стратегія Mobile First. Адаптивна графіка.

Розділ 2. Програмне використання JavaScript у HTML-документах. Тема 2.1 JavaScript. Функціональне використання JavaScript у HTML-документах. Змінні. Константи.Типи даних.. Розгалудження, цикли в JavaScript. Тема 2.2 Масиви. Ітерація по масиву. Цикл for...of. Оператори break і continue. Методи масиву. Функції . Параметри та аргументи. Область видимості Псевдомасив arguments. Перетворення псевдомасиву. Тема 2.3 Об'єкт. Властивості об'єкта. Короткі властивості. Перебирання об'єкта. Цикл for...in. Методи об'єкта. Масив об'єктів. Операції spread і rest. Деструктуризація об'єктів Тема 2.4 Функції зворотного виклику (callback). Інлайн колбеки. Метод forEach. Стрілочні функції. Неявне повернення. Псевдомасив arguments. Стрілочні функції як колбеки. Перебираючі методи масиву. Ланцюжки методів Тема 2.5 Прототипи. Класи. Об'єктна модель документа (DOM). Властивості та атрибути. Події. Об'єкт події. Делегування подій. Throttle і Debounce Тема 2.6 Модульность коду. Node.js. Пакетний менеджер npm. Webpack. Формат JSON. WEB-сховище. Web Storage API. Локальне сховище. Сервіс для localStorage Тема 2.7 Асинхронність. Проміси. Методи класу Promise Тема 2.8 HTTP-запити. REST API. AJAX. Крос-доменні запити. Пагінація. CRUD

Розділ 3 Створення інтерфейсів WEB-застосувань з використанням React Тема 3.1 Бібліотека React. Browser DOM і Virtual DOM. JSX. Компоненти. Нормалізація стилів. Події. Форми. Тема 3.2 Життєвий цикл. HTTP-запити. React хуки. Контекст та рефи Тема 3.3 Маршрутизація. Вкладені маршрути. Індексні маршрути. Програмна навігація Тема 3.4 Бібліотека Redux. Redux Toolkit. Асинхронний Redux. Оптимізація селекторів. createAsyncThunk.

4 Навчальні матеріали та ресурси

4.1 Базова література

1. HTML Підручник. w3schools.com. українською. https://w3schoolsua.github.io/html/index.html
2. HTML. Мова для створення веб-сторінок. w3schools.com. Українською. https://w3schoolsua.github.io/index.html#gsc.tab=0
3. HTML Довідник тегів. https://w3schoolsua.github.io/tags/index.html
4. CSS Підручник. w3schools.com. українською. https://w3schoolsua.github.io/css/index.html#gsc.tab=0
5. HTML.Language for creating web pages. W3Schools in English. https://w3schoolsua.github.io/index_en.html#gsc.tab=0
6. HTML Tutorial. https://w3schoolsua.github.io/html/index_en.html#gsc.tab=0
7. Підручники HTML та CSS. https://htmlbook.at.ua/news/tutorial_html/1-0-1
8. Learn to Code. With the world's largest web developer site. https://www.w3schools.com/

4.2. Допоміжна

1. Український веб-довідник. https://css.in.ua/
2. Довідник по HTML тегам https://css.in.ua/html/tags
3. Довідник HTML тегів https://html-css.co.ua/dovidnuk-html-tags/
4. HTML конструювання. http://htmlbook.in.ua/
5. http://htmlbook.in.ua/tegs-html/ 6.http://htmlbook.in.ua/pr01-html/ 7 CSS-TRICKS. GUIDES. ARTICLES. https://css-tricks.com/

Навчальний контент

Методика опанування навчальної дисципліни (освітнього компонента)

Очна форма

Лекційні заняття

№ п/п	Назва теми лекції та перелік основних питань	Кількість ауд.годин
	Розділ 1 Основи клієннських розробок. HTML-документ. Стильове оформлення елементів HTML-документу.
1	Тема 1.1 Інтернет-технології. Класифікація сайтів. WEB-орієнтовані технології. Структура HTML-документу. Основні теги та атрибути. Структурна розмітка. Валідація коду. ** Основні питання: Вступ. Зміст предмету. Інтернет-технології. Класифікація сайтів. Протокол HTTP. WEB-орієнтовані технології. Структура HTML-документа Основні теги та атрибути. Структурна розмітка. Валідація коду. Інструменти розробника. Інтеграване середовище розробки (IDE).	2
2	Тема1.2 Стильове оформлення елементів HTML-документу. Класифікація селекторів. Псевдокласи стану. Робота з кольором. Каскадування. CSS-змінні. Оформлення тексту. Псевдоелементи тексту. Основні питання: Вступ до CSS. Синтаксис та правила CSS. Типи селекторів. Псевдокласи стану.. Робота з кольором. Каскадування. CSS-змінні. Оформлення тексту. Властивісті text-decoration text-transform, text-align, text-indent, line-height, letter-spacing, word-spacing, text-shadow, white-space. Псевдоелементи тексту.Сервіс Google Fonts	2
3	Тема1.3 Верстка HTML-документу за макетом. Типи макетів. Блокова модель. Геометрія елемента . Рядково-блокові елементи. Структурні псевдокласи. Flexible Box Layout (Flexbox). Основні питання: Блокова модель. Властивісті padding, margin, border. Схлопування та випадання вертикальних відступів. Закругленння рамки.Типи елементів (block). Горизонтальне центрування блокових елементів. Елемент-контейнер. Рядкові елементи (inline). Проміжок у рядкових елементів. Рядково-блокові елементи (inline-block).Структурні псевдокласи: first-child , :last-child, :not(selector), :nth-child(an+b), :nth-last-child(an+b). Парні і непарні елементи. Додаткові псевдокласи.Flexible Box Layout (Flexbox). Властивості контейнера : display, flex-direction, justify-content, align-items, flex-wrap, align-content. Властивості елемента: flex-basis, flex-grow, flex-shrink, align-self, order. Гумовий контент	2
4	Тема1.4 Декоративні ефекти та елементи. Фон елемента. Властивості object-fit і object-position. Векторна графіка. SVG-елементи. Оформлення фігур.Основні питання: Декоративні ефектита елементи. Типи зображень. Фон елемента. Властивість background, background-color, background-image, background-repeat, background-position, background-size, contain і cover, background-attachment. Багатошаровий фон. Властивості object-fit і object-position. Псевдоелементи. Градієнт. Тінь елемента.Векторна графіка. SVG-елементи. SVG-документ. Оформлення фігур	2
5	Тема1.5 Позиціонування елементів. Види позиціонування. Властивість z-index. Властивість overflow. Анімація. CSS-переходи. CSS-анімаці.Основні питання: Позиційовані елементи. Властивість position. Відносне , абсолютне та фіксоване та липке позиціонування.Властивість z-index. Властивість overflow. Значення visible hidden, scroll, auto. Заокруглене зображення.Анімація. CSS-переходи. CSS-анімація. Властивості анімації	2
6	Тема1.6 Адаптивна верстка. Медіа-запити. Метатег viewport. Інструменти розробника. Типи верстки. Стратегія Mobile First. Адаптивна графіка. Основні питання: Адаптивна верстка. Медіа-запити. Медіа-типи. Медіа-функції.Метатег viewport. Інструменти розробника. Типи верстки. Стратегія Mobile First .Респонсивний елемент	2
	Розділ 2. Програмне використання JavaScript у HTML-документах.
7	Тема 2.1 JavaScript. Функціональне використання JavaScript у HTML-документах.. Змінні. Константи.Типи даних.. Розгалудження, цикли в JavaScript. Основні питання: Знайомство з JavaScript. Інструменти розробника. Підключення скрипту.Змінні. Примітивні типи даних. Константи. Оператор typeof. Рядки. Конкатенація рядків. Шаблонні рядки. Методи обробки рядків. Розгалудження в JavaScript. Логічні оператори.Інструкція if…else. Тернарний оператор. Інструкція switch. Цикли for, while, do...while. Оператор break, continue.	2
8	Тема 2.2 Масиви. Ітерація по масиву. Цикл for...of. Оператори break і continue. Методи масиву. Функції . Параметри та аргументи. Область видимості Псевдомасив arguments. Перетворення псевдомасиву.. Основні питання: Масиви. Створення. Доступ до елементів. Ітерація по масиву. Цикл for...of. Оператори break і continue. Методи масиву. Методи split() і join(), indexOf(), includes(),push(), pop(), splice().Оголошення функції. Параметри та аргументи. Властивості і методи функцій. Параметри за замовчуванням . Псевдомасив arguments. Перетворення псевдомасиву.	2
9	Тема 2.3 Об'єкт. Властивості об'єкта. Короткі властивості. Перебирання об'єкта. Цикл for...in. Методи об'єкта. Масив об'єктів. Операції spread і rest. Деструктуризація об'єктів. Основні питання: Об'єкт. Створення об'єкта. Властивості. Вкладені властивості. Короткі властивості Методи об'єкта. Доступ до властивостей об'єкта в методах. Перебирання об'єкта. Цикл for...in. Методи hasOwnProperty(), Object.keys(), Object.values(), Object.entries(). Масив об'єктів. Операції spread і rest.	2
10	Тема 2.4 Функції зворотного виклику (callback). Інлайн колбеки. Метод forEach.Стрілочні функції.Неявне повернення. Псевдомасив arguments. Стрілочні функції як колбеки. Перебираючі методи масиву. Ланцюжки методів Основні питання: Функції зворотного виклику (callback). Інлайн колбеки. Метод forEach. Стрілочні функції . Неявне повернення. Функції зворотного виклику (callback). Методи map(),flatMap(),find(),findIndex(),every(), some(),reduce(),sort(). Ланцюжки методів.	2
11	Тема 2.5 Прототипи. Класи. Об'єктна модель документа (DOM). Властивості та атрибути. Події. Об'єкт події. Делегування подій. Throttle і Debounce Основні питання: ООП.Прототипи. Класи.Навігація по DOM. Властивості та атрибути. Події. Методи addEventListener()та removeEventListener(). Об'єкт події. Події клавіатури та елементів форм.Делегування подій. Throttle і Debounce
12	Тема 2.6 Модульность коду. Node.js. Пакетний менеджер npm. Webpack. Формат JSON. WEB-сховище. Web Storage API. Локальне сховище. Сервіс для localStorage Основні питання: Node.js. Пакетний менеджер npm. Модульность коду. Webpack. Формат JSON. WEB-сховище. Web Storage API. Локальне сховище. Сервіс для localStorage
13	Тема 2.7 Асинхронність. Проміси. Методи класу Promise Основні питання: Проміси. Створення. Методи then(), catch(,finally().Ланцюжки промісів. Методи класу Promise.	2
14	REST API. AJAX. Крос-доменні запити. Пагінація. CRUD Основні питання: Протокол HTTP. Протокол HTTPS.. REST API Формат запиту. HTTP-методи. HTTP-заголовки. AJAX. Fetch API. Робота з публічним REST API. Параметри рядка запиту. HTTP-заголовки. Крос-доменні запити. Пагінація. CRUD. Операції: створення (create), читання (read), оновлення (update) і видалення (delete). Для кожної з них визначений стандартний HTTP-метод.	2
	Розділ 3 створення інтерфейсів WEB-застосувань з використанням REACT
15	Тема 3.1 Бібліотека React. Browser DOM і Virtual DOM. JSX. Компо. Форми.ненти. Нормалізація стилів. Події Основні питання: React. Бібліотека React. Browser DOM і Virtual DOM.Інструменти. JSX. Компоненти. Рендер за умовою. Колекції. Стилі. Вбудовані стилі. CSS-модулі. Нормалізація стилів. Компоненти-класи. Події. Внутрішній стан компонента Форми
16	Тема 3.2 Життєвий цикл. HTTP-запити. React хуки. Контекст та рефи Основні питання: Життєвий цикл. HTTP-запити. React хуки. Хук useState. Хук useEffect. Контекст тп рефи. Контекст та useContext. Хук useRef. Власні хуки.	2
17	Тема 3.3 Маршрутизація. Вкладені маршрути. Індексні маршрути. Програмна навігація Основні питання: Структура URL-рядка. Компонент . Компоненти та . URL-параметри. Вкладені маршрути. Індексні маршрути. Програмна навігація Об'єкт місцезнаходження. Розділення коду	2
18	Тема 3.4 Бібліотека Redux. Redux Toolkit. Асинхронний Redux. Оптимізація селекторів. createAsyncThunk. Основні питання: Управління станом. Планувальник завдань. Встановлення. Стор (store). Redux DevTools. Асинхронні операції. Селектори. Оптимізація.	2
	Всього	36

Лабораторні заняття

Самостійна робота студента

Заочна форма навчання

Лабораторні заняття

Самостійна робота студента

№ п/п	Назва теми та перелік основних питань	Кількість годин
	Розділ 1 Основи клієннських розробок. HTML-документ. Стильове оформлення елементів HTML-документу.
1	Тема 1.1 Структурна розмітка. Валідація коду. Основні питання: Структурна розмітка. Валідація коду. Інструменти розробника. Інтеграване середовище розробки (IDE).	2
2	Тема1.2 Стильове оформлення елементів HTML-документу. CSS-змінні. Оформлення тексту. Псевдоелементи тексту. *Основні питання:*CSS-змінні. Оформлення тексту. Властивісті text-decoration text-transform, text-align, text-indent, line-height, letter-spacing, word-spacing, text-shadow, white-space. Псевдоелементи тексту.Сервіс Google Fonts	2
3	Тема1.3 Flexible Box Layout (Flexbox). Основні питання: Flexible Box Layout (Flexbox). Властивості контейнера : display, flex-direction, justify-content, align-items, flex-wrap, align-content Властивості елемента: flex-basis, flex-grow, flex-shrink, align-self, order. Гумовий контент	4
4	Тема1.4 Декоративні ефекти та елементи. Фон елемента. Властивості object-fit і object-position. Векторна графіка. SVG-елементи. Оформлення фігур.Основні питання: Декоративні ефектита елементи. Типи зображень. Фон елемента. Властивість background, background-color, background-image, background-repeat, background-position, background-size, contain і cover, background-attachment. Багатошаровий фон. Властивості object-fit і object-position. Псевдоелементи. Градієнт. Тінь елемента.Векторна графіка. SVG-елементи. SVG-документ. Оформлення фігур	4
5	Тема1.5 Позиціонування елементів. Види позиціонування. Властивість z-index. Властивість overflow. Анімація. CSS-переходи. CSS-анімаці.Основні питання: Позиційовані елементи. Властивість position. Відносне , абсолютне та фіксоване та липке позиціонування.Властивість z-index. Властивість overflow. Значення visible hidden, scroll, auto. Заокруглене зображення.Анімація. CSS-переходи. CSS-анімація. Властивості анімації	6
6	Тема1.6 Адаптивна верстка. Медіа-запити. Метатег viewport. Інструменти розробника. Типи верстки. Стратегія Mobile First. Адаптивна графіка. Основні питання: Адаптивна верстка. Медіа-запити. Медіа-типи. Медіа-функції.Метатег viewport. Інструменти розробника. Типи верстки. Стратегія Mobile First .Респонсивний елемент	4
	Розділ 2. Програмне використання JavaScript у HTML-документах.
7	Тема 2.1 JavaScript. Функціональне використання JavaScript у HTML-документах.. Змінні. Константи.Типи даних.. Розгалудження, цикли в JavaScript. Основні питання: Знайомство з JavaScript. Інструменти розробника. Підключення скрипту.Змінні. Примітивні типи даних. Константи. Оператор typeof. Рядки. Конкатенація рядків. Шаблонні рядки. Методи обробки рядків. Розгалудження в JavaScript. Логічні оператори.Інструкція if…else. Тернарний оператор. Інструкція switch. Цикли for, while, do...while. Оператор break, continue.	6
8	Тема 2.2 Масиви. Ітерація по масиву. Цикл for...of. Оператори break і continue. Методи масиву. Функції . Параметри та аргументи. Область видимості Псевдомасив arguments. Перетворення псевдомасиву.. Основні питання: Масиви. Створення. Доступ до елементів. Ітерація по масиву. Цикл for...of. Оператори break і continue. Методи масиву. Методи split() і join(), indexOf(), includes(),push(), pop(), splice().Оголошення функції. Параметри та аргументи. Властивості і методи функцій. Параметри за замовчуванням . Псевдомасив arguments. Перетворення псевдомасиву.	8
9	Тема 2.3 Об'єкт. Властивості об'єкта. Короткі властивості. Перебирання об'єкта. Цикл for...in. Методи об'єкта. Масив об'єктів. Операції spread і rest. Деструктуризація об'єктів. Основні питання: Об'єкт. Створення об'єкта. Властивості. Вкладені властивості. Короткі властивості Методи об'єкта. Доступ до властивостей об'єкта в методах. Перебирання об'єкта. Цикл for...in. Методи hasOwnProperty(), Object.keys(), Object.values(), Object.entries(). Масив об'єктів. Операції spread і rest.	8
10	Тема 2.4 Функції зворотного виклику (callback). Інлайн колбеки. Метод forEach.Стрілочні функції.Неявне повернення. Псевдомасив arguments. Стрілочні функції як колбеки. Перебираючі методи масиву. Ланцюжки методів Основні питання: Функції зворотного виклику (callback). Інлайн колбеки. Метод forEach. Стрілочні функції . Неявне повернення. Функції зворотного виклику (callback). Методи map(),flatMap(),find(),findIndex(),every(), some(),reduce(),sort(). Ланцюжки методів.	8
11	Тема 2.5 Прототипи. Класи. Об'єктна модель документа (DOM). Властивості та атрибути. Події. Об'єкт події. Делегування подій. Throttle і Debounce Основні питання: ООП.Прототипи. Класи.Навігація по DOM. Властивості та атрибути. Події. Методи addEventListener()та removeEventListener(). Об'єкт події. Події клавіатури та елементів форм.Делегування подій. Throttle і Debounce	8
12	Тема 2.6 Модульность коду. Node.js. Пакетний менеджер npm. Webpack. Формат JSON. WEB-сховище. Web Storage API. Локальне сховище. Сервіс для localStorage Основні питання: Node.js. Пакетний менеджер npm. Модульность коду. Webpack. Формат JSON. WEB-сховище. Web Storage API. Локальне сховище. Сервіс для localStorage	6
13	Тема 2.7 Асинхронність. Проміси. Методи класу Promise Основні питання: Проміси. Створення. Методи then(), catch(,finally().Ланцюжки промісів. Методи класу Promise.	6
14	REST API. AJAX. Крос-доменні запити. Пагінація. CRUD Основні питання: Протокол HTTP. Протокол HTTPS.. REST API Формат запиту. HTTP-методи. HTTP-заголовки. AJAX. Fetch API. Робота з публічним REST API. Параметри рядка запиту. HTTP-заголовки. Крос-доменні запити. Пагінація. CRUD. Операції: створення (create), читання (read), оновлення (update) і видалення (delete). Для кожної з них визначений стандартний HTTP-метод.	6
	Розділ 3 створення інтерфейсів WEB-застосувань з використанням REACT
15	Тема 3.1 Бібліотека React. Browser DOM і Virtual DOM. JSX. Компо. Форми.ненти. Нормалізація стилів. Події Основні питання: React. Бібліотека React. Browser DOM і Virtual DOM.Інструменти. JSX. Компоненти. Рендер за умовою. Колекції. Стилі. Вбудовані стилі. CSS-модулі. Нормалізація стилів. Компоненти-класи. Події. Внутрішній стан компонента Форми	6
16	Тема 3.2 Життєвий цикл. HTTP-запити. React хуки. Контекст та рефи Основні питання: Життєвий цикл. HTTP-запити. React хуки. Хук useState. Хук useEffect. Контекст тп рефи. Контекст та useContext. Хук useRef. Власні хуки.	6
17	Тема 3.3 Маршрутизація. Вкладені маршрути. Індексні маршрути. Програмна навігація Основні питання: Структура URL-рядка. Компонент . Компоненти та . URL-параметри. Вкладені маршрути. Індексні маршрути. Програмна навігація Об'єкт місцезнаходження. Розділення коду	6
18	Тема 3.4 Бібліотека Redux. Redux Toolkit. Асинхронний Redux. Оптимізація селекторів. createAsyncThunk. Основні питання: Управління станом. Планувальник завдань. Встановлення. Стор (store). Redux DevTools. Асинхронні операції. Селектори. Оптимізація.	6
4	Підготовка до екзамену	10
	Всього	112

Лабораторні самостійні заняття

Політика та контроль

6. Політика навчальної дисципліни (освітнього компонента)

Як викладач, так і студент зобов’язані дотримуватись Кодексу честі Національного технічного університету України «Київський політехнічний інститут» Основні положення політики:

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

7. Види контролю та рейтингова система оцінювання результатів навчання (РСО)

Поточний контроль Рейтинг студента з дисципліни кладається з балів, які він отримує за:

• виконання та захист 9 лабораторних робіт;
• виконання 2-х модульних контрольних робіт (МКР-1, МКР-2);
• проміжні тести для перевірки засвоєння вивченого матеріалу;
• заохочувальні бали;
• штрафні бали (віднімаються від загальної суми оцінювання лабораторної або самостійної робіт ;

Семестровий контроль - екзамен

7. Система рейтингових (вагових) балів та критерії оцінювання

7.1 Лабораторні роботи

Вагові бали кожної лабораторної роботи наведені у Таблиці 1. Сумарний ваговий бал за даний контрольний захід складає 36 балів. Критерії оцінювання лабораторних робіт включають якість їх виконання та захист.

Таблиця 1 – Вагові бали та критерії оцінювання лабораторних робіт |№ п/п | Назва роботи | Виконання|Захист|Звіт|Сума балів| |:-:|:-:|:-:|:-:|:-:|:-:| |1|HTML-документ. Основні теги та атрибути в HTML-документі. Структурна розмітка. Валідація коду|1|2|1|4| |2|Каскадні таблиці стилів CSS. Селектори . Псевдокласи стану. Робота з кольором. Каскадування. CSS-змінні. Оформлення тексту. Псевдоелементи тексту|1|2|1|4| |3|Блокова та таблична верстка HTML –документу. Flexbox. Позиціонування елементів. Анімація. CSS-переходи. CSS-анімаці|1|2|1|4| |4|Адаптивна верстка. Медіа-запити. Метатег viewport. Стратегія Mobile First. Адаптивна графіка.11|1|2|1|4| |5|Функціональне використання JavaScript у HTML-документі. Шаблоні рядки. Керування порядком обчислень. Масиви. Методи масивів. Функції|1|2|1|4| |6|Об'єкт. Методи об'єкта. Масив об'єктів. Деструктуризація об'єктів. Callback. Стрілочні функції. Стрілочні функції як колбеки|1|2|1|4| |7|Прототипи. Класи. Об'єктна модель документа (DOM). Події. Об'єкт події. Делегування подій. Throttle. Модульность коду. Node.js. JSON. WEB-сховище. Web Storage API|1|2|1|4| |8|Разом за лабораторні роботи. |1|2|1|4| |9|Разом за лабораторні роботи. |1|2|1|4| ||Разом за лабораторні роботи. |9|18|9|36|

Кожна лабораторна робота оцінюється максимальною оцінкою в 4 бали за:

Виконання --- 1 бал Захист ЛР --- 2 бали (тест)
Звітний HTML-документ --- 1 бал де,
“відмінно”, повна відповідь (не менше 95% потрібної інформації); --- 3,8 - 4 балів; “добре”, достатньо повна відповідь (не менше 75% потрібної інформації, або незначні неточності) --- 3.0 -3,79 балів; “задовільно”, неповна відповідь (не менше 60% потрібної інформації та деякі помилки) --- 2,4 - 2,99 бали; “незадовільно”, незадовільна відповідь. --- < 2,4 балів/

Максимальна сумарна оцінка за 9 лабораторних робіт --- 36 балів

7.2 Модульні контрольні роботи

Кожна модульна контрольна робота оцінюється максимальною оцінкою в 7 балів де, “відмінно”, повна відповідь (не менше 95% потрібної інформації): складання тесту (1 бал); --- 6,65 - 7 балів; “добре”, достатньо повна відповідь (не менше 75% потрібної інформації, або незначні неточності); --- 5,25 - 6,64 балів; “задовільно”, неповна відповідь (не менше 60% потрібної інформації та деякі помилки); --- 4,2 - 5.24 бали; “незадовільно”, незадовільна відповідь. --- < 4,2 балів

Максимальна сумарна оцінка за модульні контрольні роботи --- 14 балів Модульні контрольні виконуються у вигляді тестів

7.3 Заохочувальні бали

за виконання творчих робіт (наприклад, участь у факультетських та інститутських олімпіадах з навчальних дисциплін, участь у конкурсах робіт, підготовка оглядів наукових праць тощо); за активну роботу на лекції (питання, доповнення, зауваження за темою лекції, коли лектор пропонує студентам задати свої питання) 1-2 бали, але в сумі не більше 10;

7.3 Штрафні бали

За кожне заняття запізнення з поданням лабораторної до захисту від встановленого терміну оцінка знижується на 0,5 бал. При наяності довідки або інших вагомих причин – бали не знімаються

7.4 Умови позитивної проміжної атестації

Для отримання “зараховано” з першої проміжної атестації (8 тиждень) студент повинен мати не менше ніж 12 балів (за умови, якщо на початок 8 тижня згідно з календарним планом контрольних заходів “ідеальний” студент має отримати 22 балів). Для отримання “зараховано” з другої проміжної атестації (14 тиждень) студент повинен мати не менше ніж 18 балів (за умови, якщо на початок 14 тижня згідно з календарним планом контрольних заходів “ідеальний” студент має отримати 25 балів).

7.5 Розрахунок шкали рейтингу R_D:

Максимальна сума вагових балів контрольних заходів протягом семестру складає: Rc = 36+14 = 50 балів

Екзаменаційна складова шкали дорівнює 50% , а саме: R_E=R_C 0,5/(1-0,5)=50 балів.

Таким чином, **рейтингова шкала з дисципліни складає **

R_D= Rc+ R_E= 50+50 =100 балів.

Необхідною умовою допуску до екзамену є:

• виконання 9 лабораторних робіт на оцінку не нижче ніж “задовільно” +звітний документ ;
• виконання МКР не нижче ніж на оцінку “задовільно”.

7.6 Критерії екзаменаційного оцінювання:

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

Ваговий бал практичної частини екзаменаційної роботи – 25 балів.

Критерії оцінювання якості практичної частини роботи: “відмінно”, повна відповідь (не менше 95% потрібної інформації); --- 23,75-25 бали “добре”, достатньо повна відповідь (не менше 75% потрібної інформації, або незначні неточності); --- 18,75 -23,74 балів “задовільно”, неповна відповідь (не менше 60% потрібної інформації та деякі помилки); --- 15-18,74 балів “незадовільно”, незадовільна відповідь. --- < 15 балів

Ваговий бал теоретичної частини екзаменаційної роботи – 25 балів.

Критерії оцінювання якості теоретичної частини роботи: “відмінно”, повна відповідь (не менше 95% потрібної інформації); --- 23,75-25 бали “добре”, достатньо повна відповідь (не менше 75% потрібної інформації, або незначні неточності); --- 18,75 - 23,74 балів “задовільно”, неповна відповідь (не менше 60% потрібної інформації та деякі помилки); --- 15-18,74 балів “незадовільно”, незадовільна відповідь. --- < 15 балів

У підсумку за складання практичної та теоретичної частини екзаменаційного завдання студент отримує: “відмінно” --- 47,5 -50 балів “дуже добре” --- 43,5-47,4 балів “добре” --- 37,5-43,4 балів “задовільно” --- 32,5-37,4балів “достатньо” --- 30-32,4 балів “незадовільно” --- < 30 балів

Для отримання студентом відповідних оцінок -його рейтингова оцінка R_D переводиться в оцінку згідно з таблицею:

Таблиця 2 – Таблиця відповідності рейтингових балів оцінкам за університетською шкалою | Кількість балів ( R_D=r_C+r_E)| Оцінка | | :-: | - | | 100-95 | Відмінно | | 94-85 | Дуже добре | | 84-75 | Добре | | 74-65 | Задовільно | | 64-60 | Достатньо | | Менше 60 | Незадовільно | | Не виконані умови допуску | Не допущено |

Додаткова інформація з дисципліни (освітнього компонента) Перелік питань, які виносяться на семестровий контроль розміщений в Moodle

Робочу програму навчальної дисципліни (силабус): Складено ст.викладачем Проскурою Світланою Леонідівною Ухвалено Кафедрою ІСТ протокол № 16 від 12.06.24 Погоджено Методичною комісією факультету протокол № 10 від 21.06.24