Інтернет-технології та проєктування WEB-застосувань - Робоча програма навчальної дисципліни (Силабус)

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

Рівень вищої освіти Перший (бакалаврський)
Галузь знань 126 Інформаційні технології
Спеціальність 126 Інформаційні системи та технології
Освітня програма Інформаційні управляючі системи та технології
Статус дисципліни Нормативна (цикл професійної та практичної підготовки )
Форма навчання очна(денна)
Рік підготовки, семестр 2 курс, осінній семестр
Обсяг дисципліни

Очна(денна). 5 кредитів, 150 годин: лекції-36год., лаборат. роботи-36 год., СРС – 78 год.,

Заочна. 5 кредитів, 150 годин: лекції-6 год., лаборат. роботи 4 год., СРС – 140 год.
Семестровий контроль/ контрольні заходи екзамен
Розклад занять http://rozklad.kpi.ua/Schedules/ScheduleGroupSelection.aspx
Мова викладання Українська
Інформація про
керівника курсу / викладачів

Лектор: ст.викладач Проскура Світлана Леонідівна,

slproskura@gmail.com, моб. +38(066)567-45-59

Лабораторні: Проскура Світлана Леонідівна
Розміщення курсу https://classroom.google.com/c/NTUwNjcxMTY1MzMz

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

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

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

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

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

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

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

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

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

Розділ 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.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

Тема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
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. Гумовий контент
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-документ. Оформлення фігур
5

Тема1.5 Позиціонування елементів. Види позиціонування. Властивість z-index. Властивість overflow. Анімація. CSS-переходи. CSS-анімація

Основні питання: Позиційовані елементи. Властивість position. Відносне , абсолютне та фіксоване та липке позиціонування.

Властивість z-index. Властивість overflow. Значення visible hidden, scroll, auto. Заокруглене зображення

Анімація. CSS-переходи. CSS-анімація. Властивості анімації
6

Тема1.6 Адаптивна верстка. Медіа-запити. Метатег viewport. Інструменти розробника. Типи верстки. Стратегія Mobile First. Адаптивна графіка.

Основні питання: Адаптивна верстка. Медіа-запити. Медіа-типи. Медіа-функції.Метатег viewport. Інструменти розробника. Типи верстки. Стратегія Mobile First .Респонсивний елемент <img>
Розділ 2. Програмне використання JavaScript у HTML-документах.
7

Тема 2.1 JavaScript. Функціональне використання JavaScript у HTML-документах.. Змінні. Константи.Типи даних.. Розгалудження, цикли в JavaScript.

Основні питання: Знайомство з JavaScript. Інструменти розробника. Підключення скрипту.Змінні. Примітивні типи даних. Константи. Оператор typeof​. Рядки. Конкатенація рядків​. Шаблонні рядки​. Методи обробки рядків. Розгалудження в JavaScript. Логічні оператори.Інструкція if​…else. Тернарний оператор. Інструкція switch. Цикли for​, while​, do...while.​ Оператор break​, continue​.
8

Тема 2.2 Масиви. Ітерація по масиву. Цикл for...of​. Оператори break і continue.​ Методи масиву. Функції . Параметри та аргументи. Область видимості Псевдомасив arguments​. Перетворення псевдомасиву​.

Основні питання: Масиви. Створення. Доступ до елементів​. Ітерація по масиву. Цикл for...of​. Оператори break і continue.​ Методи масиву. Методи split() і join()​, indexOf()​, includes()​,push(), pop()​, splice()​.Оголошення функції​. Параметри та аргументи​. Властивості і методи функцій. Параметри за замовчуванням .​ Псевдомасив arguments​. Перетворення псевдомасиву​.
9

Тема 2.3 Об'єкт. Властивості об'єкта.​ Короткі властивості. Перебирання об'єкта. Цикл for...in​. Методи об'єкта. Масив об'єктів. Операції spread і rest. Деструктуризація об'єктів

Основні питання: Об'єкт. Створення об'єкта. Властивості. Вкладені властивості​. Короткі властивості Методи об'єкта. Доступ до властивостей об'єкта в методах. Перебирання об'єкта. Цикл for...in​. Методи hasOwnProperty()​, Object.keys()​, Object.values()​, Object.entries()​. Масив об'єктів​. Операції spread і rest.
10

Тема 2.4 Функції зворотного виклику (callback). Інлайн колбеки. Метод forEach. ​ ​ Стрілочні функції. Неявне повернення. Псевдомасив arguments​. Стрілочні функції як колбеки​. Перебираючі методи масиву. Ланцюжки методів

Основні питання: Функції зворотного виклику (callback). Інлайн колбеки. Метод forEach. Стрілочні функції . Неявне повернення. ​Функції зворотного виклику (callback).

Методи map(),flatMap(),find(),findIndex(),every(), some(),reduce(),sort(). Ланцюжки методів
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.
14

Тема 2.8 HTTP-запити. REST API. AJAX. Крос-доменні запити. Пагінація. CRUD

Основні питання: Протокол HTTP. Протокол HTTPS.. REST API Формат запиту. HTTP-методи. HTTP-заголовки. AJAX. Fetch API. Робота з публічним REST API. Параметри рядка запиту. HTTP-заголовки. Крос-доменні запити. Пагінація. CRUD. Операції: створення (create), читання (read), оновлення (update) і видалення (delete). Для кожної з них визначений стандартний HTTP-метод.
РОЗДІЛ 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. Власні хуки.
17

Тема 3.3 Маршрутизація. Вкладені маршрути. Індексні маршрути. Програмна навігація

Основні питання: Структура URL-рядка. Компонент <BrowserRouter>. Компоненти <Link> та <NavLink>. URL-параметри. Вкладені маршрути. Індексні маршрути. Програмна навігація Об'єкт місцезнаходження. Розділення коду
18

Тема 3.4 Бібліотека Redux. Redux Toolkit. Асинхронний Redux. Оптимізація селекторів. createAsyncThunk.

Основні питання: Управління станом. Планувальник завдань. Встановлення. Стор (store). Redux DevTools. Асинхронні операції. Селектори. Оптимізація.

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

№ з/п Назва лабораторної роботи
1-2

Лабораторна робота №1. HTML-документ. Основні теги та атрибути в HTML-документі. Структурна розмітка. Валідація коду.

Основні питання: Структура HTML-документа. Основні теги та атрибути в HTML-документі. Структурна розмітка. Розмітка тексту. Валідація коду. Інструменти розробника. ІDE. Оформлення тексту. Сервіс Google Fonts. Опис бізнес-логіки предметної галузі майбутнього WEB-застосунку.
3-4

Лабораторна робота №2. Каскадні таблиці стилів CSS. Селектори . Псевдокласи стану. Робота з кольором. Каскадування. CSS-змінні. Оформлення тексту. Псевдоелементи тексту

Основні питання: Псевдокласи стану.. Робота з кольором. Каскадування. CSS-змінні. Оформлення тексту. Властивісті text-decoration text-transform, text-align, text-indent, line-height, letter-spacing, word-spacing, text-shadow, white-space. Псевдоелементи тексту.Сервіс Google Fonts
5-6

Лабораторна робота №3.Блокова та таблична верстка HTML –документу. Flexbox. Позиціонування елементів. Анімація. CSS-переходи. CSS-анімація

Основні питання: Блокова модель. Геометрія елемента. Властивісті padding, margin, border. Центрування блокових елементів. Рядково-блокові елементи (inline-block). Позиційовані елементи. Властивість position. Відносне , абсолютне та фіксоване та липке позиціонування.Властивість z-index. Властивість overflow. Значення visible hidden, scroll, auto. Заокруглене зображення.
7-8

Лабораторна робота №4. Адаптивна верстка. Медіа-запити. Метатег viewport. Стратегія Mobile First. Адаптивна графіка.

Основні питання: Адаптивна верстка. Медіа-запити. Медіа-типи. Медіа-функції.Метатег viewport. Інструменти розробника. Стратегія Mobile First. Адаптивна та респонсивна верстки.
9-10

Лабораторна робота №5. Функціональне використання JavaScript у HTML-документі. Шаблоні рядки. Керування порядком обчислень. Масиви. Методи масивів. Функції

Основні питання: . Інструменти розробника. Підключення скрипту.Змінні. Примітивні типи даних. Константи. Оператор typeof​. Рядки. Конкатенація рядків​. Шаблонні рядки​. Методи обробки рядків

Розгалудження в JavaScript. Логічні оператори.Інструкція if​…else. Тернарний оператор. Інструкція switch. Цикли for​, while​, do...while.​ Оператор bиreak​, continue​.
11-12

Лабораторна робота №6. Об'єкт. Методи об'єкта. Масив об'єктів. Деструктуризація об'єктів. Callback. Стрілочні функції. Стрілочні функції як колбеки​.

Основні питання:Функції зворотного виклику (callback). Інлайн колбеки. Метод forEach. Стрілочні функції . Неявне повернення. ​Функції зворотного виклику (callback). 

Методи map(),flatMap(),find(),findIndex(),every(), some(),reduce(),sort(). Ланцюжки методів
13-14

Лабораторна робота №7. Прототипи. Класи. Об'єктна модель документа (DOM). Події. Об'єкт події. Делегування подій. Throttle. Модульность коду. Node.js. JSON. WEB-сховище. Web Storage API.

Основні питання:ООП.Прототипи. Класи.Навігація по DOM. Властивості та атрибути. Властивість innerHTML. Події. Методи  addEventListener()та removeEventListener(). Об'єкт події. Делегування подій. Throttle і Debounce. Node.js. Пакетний менеджер npm. Модульность коду. Webpack. Формат JSON. WEB-сховище. Web Storage API. Локальне сховище. Сервіс для localStorage
14-16

Лабораторна робота №8. Асинхронність. Проміси. HTTP-запити. REST API. AJAX. Крос-доменні запити. Пагінація. CRUD

Основні питання: Проміси. Створення. Методи then(),  catch(,finally().Ланцюжки промісів. Методи класу Promise. Протокол HTTP. Протокол HTTPS.. REST API Формат запиту. HTTP-методи. HTTP-заголовки. AJAX. Fetch API. Робота з публічним REST API
17-18

Лабораторна робота №9. Створення інтерфейсів WEB-застосувань з використанням React

Основні питання: Бібліотека React. Browser DOM і Virtual DOM.Інструменти. JSX. Компоненти. Маршрутизація Структура URL-рядка. Компонент <BrowserRouter>. Компоненти <Link> та <NavLink>. URL-параметри. Вкладені маршрути.

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

№

з/п

 Вид самостійної роботи

Кількість

годин СРС
1 Підготовка до лабораторної робіти №1 5
2 Підготовка до лабораторної робіти №2 5
3 Підготовка до лабораторної робіти №3 5
4 Підготовка до лабораторної робіти №4 5
5 Підготовка до лабораторної робіти №5 5
6 Підготовка до лабораторної робіти №6 5
7 Підготовка до лабораторної робіти №7 5
8 Підготовка до лабораторної робіти №8 5
9 Підготовка до лабораторної робіти №9 12
3 Підготовка до МКР 6
4 Підготовка до екзамену 20

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

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

№ з/п Назва теми лекції та перелік основних питань Кількість ауд. годин
Розділ 1 Основи клієннських розробок. HTML-документ. Стильове оформлення елементів HTML-документу.
1

Тема 1 Структура та зміст курсу. РСО. Інтернет-технології. Класифікація сайтів. Структура HTML-документу. Основні теги та атрибути. Структурна розмітка. Валідація коду.

Основні питання: Вступ. Зміст предмету. Інтернет-технології. Класифікація сайтів. Протокол HTTP. WEB-орієнтовані технології. Структура HTML-документа Основні теги та атрибути. Структурна розмітка. Валідація коду. Інструменти розробника. Інтеграване середовище розробки (IDE).

 2
2

Тема1.2 Стильове оформлення елементів HTML-документу. Класифікація селекторів. Псевдокласи стану. Робота з кольором. Каскадування.

Основні питання: Вступ до CSS. Синтаксис та правила CSS. Типи селекторів. Псевдокласи стану.. Робота з кольором. Каскадування.

 2
3

Тема 1.3 Верстка HTML-документу за макетом. Типи макетів. Блокова модель. Геометрія елемента . Рядково-блокові елементи. Структурні псевдокласи.

Основні питання: Блокова модель. Геометрія елемента. Властивісті padding, margin, border. Схлопування та випадання вертикальних відступів. Закругленння рамки.

Типи елементів (block). Горизонтальне центрування блокових елементів. Елемент-контейнер. Рядкові елементи (inline). Проміжок у рядкових елементів. Рядково-блокові елементи (inline-block)

 2

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

№ з/п Назва лабораторної роботи Кількість ауд. годин
1

Лабораторна робота №1. HTML-документ. Основні теги та атрибути в HTML-документі. Структурна розмітка. Валідація коду. Каскадні таблиці стилів CSS. Селектори . Псевдокласи стану. Робота з кольором. Каскадування. Оформлення тексту.

Основні питання: Структура HTML-документа. Основні теги та атрибути в HTML-документі. Структурна розмітка. Розмітка тексту. Валідація коду. Інструменти розробника. ІDE. Оформлення тексту. Сервіс Google Fonts. Опис бізнес-логіки предметної галузі майбутнього WEB-застосунку.

Робота з кольором. Каскадування. CSS-змінні. Оформлення тексту. Властивісті text-decoration text-transform, text-align, text-indent, line-height, letter-spacing, word-spacing, text-shadow, white-space. Псевдоелементи тексту.Сервіс Google Fonts

 2
2

Лабораторна робота №2.Блокова та таблична верстка HTML –документу. Flexbox. Позиціонування елементів. Анімація.

Основні питання: Блокова модель. Геометрія елемента. Властивісті padding, margin, border. Центрування блокових елементів. Рядково-блокові елементи (inline-block). Позиційовані елементи. Властивість position. Відносне , абсолютне та фіксоване та липке позиціонування.Властивість z-index. Властивість overflow. Значення visible hidden, scroll, auto. Заокруглене зображення.

 2

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

№ з/п Назва теми лекції та перелік основних питань Кількість годин СРС
Розділ 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 .Респонсивний елемент <img>

 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

Тема 2.8 HTTP-запити. 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-рядка. Компонент <BrowserRouter>. Компоненти <Link> та <NavLink>. URL-параметри. Вкладені маршрути. Індексні маршрути. Програмна навігація Об'єкт місцезнаходження. Розділення коду

 6
18

Тема 3.4 Бібліотека Redux. Redux Toolkit. Асинхронний Redux. Оптимізація селекторів. createAsyncThunk.

Основні питання: Управління станом. Планувальник завдань. Встановлення. Стор (store). Redux DevTools. Асинхронні операції. Селектори. Оптимізація.

6
19

Лабораторна робота №3.Блокова та таблична верстка HTML –документу. Flexbox. Позиціонування елементів. Анімація. CSS-переходи. CSS-анімація

Основні питання: Блокова модель. Геометрія елемента. Властивісті padding, margin, border. Центрування блокових елементів. Рядково-блокові елементи (inline-block). Позиційовані елементи. Властивість position. Відносне , абсолютне та фіксоване та липке позиціонування.Властивість z-index. Властивість overflow. Значення visible hidden, scroll, auto. Заокруглене зображення.

4
20

Лабораторна робота №4. Адаптивна верстка. Медіа-запити. Метатег viewport. Стратегія Mobile First. Адаптивна графіка.

Основні питання: Адаптивна верстка. Медіа-запити. Медіа-типи. Медіа-функції.Метатег viewport. Інструменти розробника. Стратегія Mobile First. Адаптивна та респонсивна верстки.

4
21

Лабораторна робота №5. Функціональне використання JavaScript у HTML-документі. Шаблоні рядки. Керування порядком обчислень. Масиви. Методи масивів. Функції

Основні питання: . Інструменти розробника. Підключення скрипту.Змінні. Примітивні типи даних. Константи. Оператор typeof​. Рядки. Конкатенація рядків​. Шаблонні рядки​. Методи обробки рядків

Розгалудження в JavaScript. Логічні оператори.Інструкція if​…else. Тернарний оператор. Інструкція switch. Цикли for​, while​, do...while.​ Оператор bиreak​, continue​.

4
22

Лабораторна робота №6. Об'єкт. Методи об'єкта. Масив об'єктів. Деструктуризація об'єктів. Callback. Стрілочні функції. Стрілочні функції як колбеки​.

Основні питання:Функції зворотного виклику (callback). Інлайн колбеки. Метод forEach. Стрілочні функції . Неявне повернення. ​Функції зворотного виклику (callback). 

Методи map(),flatMap(),find(),findIndex(),every(), some(),reduce(),sort(). Ланцюжки методів

4
23

Лабораторна робота №7. Прототипи. Класи. Об'єктна модель документа (DOM). Події. Об'єкт події. Делегування подій. Throttle. Модульность коду. Node.js. JSON. WEB-сховище. Web Storage API.

Основні питання:ООП.Прототипи. Класи.Навігація по DOM. Властивості та атрибути. Властивість innerHTML. Події. Методи  addEventListener()та removeEventListener(). Об'єкт події. Делегування подій. Throttle і Debounce. Node.js. Пакетний менеджер npm. Модульность коду. Webpack. Формат JSON. WEB-сховище. Web Storage API. Локальне сховище. Сервіс для localStorage

4
24

Лабораторна робота №8. Асинхронність. Проміси. HTTP-запити. REST API. AJAX. Крос-доменні запити. Пагінація. CRUD

Основні питання: Проміси. Створення. Методи then(),  catch(,finally().Ланцюжки промісів. Методи класу Promise. Протокол HTTP. Протокол HTTPS.. REST API Формат запиту. HTTP-методи. HTTP-заголовки. AJAX. Fetch API. Робота з публічним REST API

4
25

Лабораторна робота №9. Створення інтерфейсів WEB-застосувань з використанням React

4
26

Підготовка до екзамену по всьому матеріалу модуля.

10

Всього

140

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

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

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

Основні положення політики:

  • відвідування лекційних та лабораторних робіт є обов’язковою складовою вивчення матеріалу;

  • під час проведення лекції, викладач користується власним презентаційним матеріалом з демонстрацією практичної частини на комп’ютері з встановленим інтегрованим середовищем розробки;

  • всі матеріали поточної лекції, лабораторних та самостійних робіт, додаткових матеріалів, літератури розміщуються викладачем у середовищі Classroom.

  • після виконання лабораторних та самостійних робіт, студенти розміщують посилання на них на Git Hub або у власній папці на гугл-диску або в Classroom;

  • до кожної лабораторної роботи студенти виконують проміжний тест, оцінка за який входить до складу загальної оцінки за лабораторну роботу;

  • на лекції бажано не відволікати викладача від викладання матеріалу. Усі питання, уточнення та ін. студенти задають в кінці лекції у відведений для цього час;

  • у випадку виявлення факту академічної недоброчесності лабораторна або самостійна робота не зараховується;

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

  • штрафні бали виставляються за: невчасну здачу лабораторної та самостійної робіт. Кількість штрафних балів не більше 10.

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

Поточний контроль

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

  • виконання та захист 9 лабораторних робіт;

  • виконання 2-х модульних контрольних робіт (МКР-1, МКР-2);

  • проміжні тести для перевірки засвоєння вивченого матеріалу;

  • заохочувальні бали;

  • штрафні бали (віднімаються від загальної суми оцінювання лабораторної або самостійної робіт ;

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

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

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

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

Критерії оцінювання лабораторних робіт включають якість їх виконання та захист.

Таблиця 1 – Вагові бали та критерії оцінювання лабораторних робіт

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 Асинхронність. Проміси. HTTP-запити. REST API. AJAX. Крос-доменні запити. Пагінація. CRUD 1 2 1 4
9 Створення інтерфейсів WEB-застосувань з використанням React 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 балів
де,

  • “відмінно”, повна відповідь (не менше 95% потрібної інформації): складання тесту (1 бал);

 - 6,65 - 7 балів;

  • “добре”, достатньо повна відповідь (не менше 75% потрібної інформації, або незначні неточності);

 - 5,25 - 6,64 балів;

  • “задовільно”, неповна відповідь (не менше 60% потрібної інформації та деякі помилки);

 - 4,2 - 5.24 бали;

  • “незадовільно”, незадовільна відповідь.

 - < 4,2 балів

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

Модульні контрольні виконуються у вигляді тестів

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

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

Штрафні бали

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

При наяності довідки або інших вагомих причин – бали не знімаються

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

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

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

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

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

Rc = 36+14 = 50 балів

Екзаменаційна складова шкали дорівнює 50% , а саме:

RE = RC*0,5/(1-0,5) = 50 балів.

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

RD = RC + RE =50 + 50 =100 балів.

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

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

  • виконання МКР не нижче ніж на оцінку “задовільно”.

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

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

Ваговий бал практичної частини екзаменаційної роботи – 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 балів

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

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

Таблиця 2 – Таблиця відповідності рейтингових балів оцінкам за університетською шкалою

Бали

RD = rC + rE

 Оцінка
95… 100 відмінно
85 … 94 дуже добре
75 … 84 добре
65 … 74 задовільно
60 … 64 достатньо
RD<60 незадовільно
rC < 50 або не виконані інші умови допуску до заліку недопущений

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

Перелік питань, які виносяться на семестровий контроль розміщений в Classroom

Робочу програму навчальної дисципліни (силабус):

Складено ст.викладачем Проскурою Світланою Леонідівною

Ухвалено Кафедрою ІСТ протокол № 21 від 29.06.23

Погоджено Методичною комісією факультету протокол № 11 від 29.06.23