Веб-технології та веб-дизайн 1

Анотація навчальної дисципліни

Мета вивчення дисципліни: метою вивчення дисципліни є формування комплексу знань та умінь в галузі сучасних методів і засобів проектування та реалізації веб-сервісів та веб-додатків.

Практичне значення та використання отриманих знань: опанування сучасних технології розробки та проектування веб-сервісів та веб-додатків з урахуванням сучасного дизайну, навантаження у мережі Інтернет, безпеки веб-сайтів  та веб-інтеграції з іншими веб-технологіями; вміння застосовувати основи сучасних веб-технологій на стороні клієнта та сервера та реалізовувати їх взаємодію.

Основні результати навчання

ПРН1. Застосовувати знання основних форм і законів абстрактно-логічного мислення, основ методології наукового пізнання, форм і методів вилучення, аналізу, обробки та синтезу інформації в предметній області комп'ютерних наук.
ПРН10. Використовувати інструментальні засоби розробки клієнт-серверних застосувань, проектувати концептуальні, логічні та фізичні моделі баз даних, розробляти та оптимізувати запити до них, створювати розподілені бази даних, сховища та вітрини даних, бази знань, у тому числі на хмарних сервісах, із застосуванням мов веб-програмування.
ПРН11. Володіти навичками управління життєвим циклом програмного забезпечення, продуктів і сервісів інформаційних технологій відповідно до вимог і обмежень замовника, вміти розробляти проектну документацію (техніко-економічне обґрунтування, технічне завдання, бізнес-план, угоду, договір, контракт).

Тематика та види навчальних занять

1 тиждень
Лекція 1. «Введення у веб-технології: структура й принципи функціонування Веб. Клієнт-серверні технології».
Лабораторне заняття 1. «Службові утиліти для роботи в Інтернет. Вивчення протоколу HTTP».

2 тиждень
Лекція 2. «Основи протоколу HTTP. Структура повідомлень протоколу HTTP. Забезпечення безпеки передачі даних HTTP. Cookie».
Лабораторне заняття 2. «Вивчення протоколу HTTP: аналіз функціонування протоколу HTTP».

3 тиждень
Лекція 3. «Основи мови розмітки веб-сторінок HTML. Концепція мови HTML. Теги та атрибути мови HTML. Основні програмні інструменти для роботи з HTML».
Лабораторне заняття 3. «Вивчення основних можливостей мови HTML».

4 тиждень
Лекція 4. «Основи мови стилізації веб-сторінок CSS. Способи застосування CSS. Синтаксис мови CSS. Селектори та стильові правила мови CSS. Блокові й строкові елементи».
Лабораторне заняття 4. «Форми в HTML-документах».

5 тиждень
Лекція 5. «Основи застосування мови СSS. Керування кольором в мові CSS. Координати й розміри. Керування видимістю елементів розмітки».
Лабораторне заняття 5. «Використання каскадних таблиць стилів CSS».

6 тиждень
Лекція 6. «Основні селектори мови CSS. Комбіновані селектори».
Лабораторне заняття 6. «Використання каскадних таблиць стилів CSS: робота з селекторами мови CSS».

7 тиждень
Лекція 7. «Блочна модель елементів розмітки. Медіа-запити. CSS-анімація».
Лабораторне заняття 7. «Використання каскадних таблиць стилів CSS: використання CSS-анімації».

8 тиждень
Лекція 8. «Основи Flexbox layout та Grid layout».
Лабораторне заняття 8. «Використання каскадних таблиць стилів CSS: створення каркасу сайту за допомогою мови CSS».
Модульна контрольна робота 1.

9 тиждень
Лекція 9. «Основи мови JavaScript. Основи синтаксису мови JavaScript. Основні типи даних мови JavaScript. JavaScript-літерали та змінні. Умовні оператори, оператори циклів в мові JavaScript».
Лабораторне заняття 9. «Основи використання мови JavaScript».

10 тиждень
Лекція 10. «Масиви та об’єкти в мові JavaScript. Javascript-функції як типи даних і як об'єкти. Способи опису користувацьких об’єктів».
Лабораторне заняття 10. «Основи використання мови JavaScript: робота з основними структурами даних мови JavaScript».

11 тиждень
Лекція 11. «Об’єктна модель документа (DOM). Основні властивості мови JavaScript, призначені для позиціонування на вузлах DOM-дерева. Основні JavaScript-методи маніпуляції вузлами DOM-дерева».
Лабораторне заняття 11. «Основи використання мови JavaScript: модель DOM».

12 тиждень
Лекція 12. «Доступ до атрибутів DOM-дерева. Методи зміни DOM-дерева: створення елементів, вставка елементів, видалення елементів, клонування елементів».
Лабораторне заняття 12. «Основи використання мови JavaScript: модель DOM».

13 тиждень
Лекція 13. «Обробка браузерних подій на мові JavaScript. Події веб-додатку. Порядок обробки подій. Делегування подій. Генерація подій на елементах DOM-дерева».
Лабораторне заняття 13. «Основи використання мови JavaScript: обробка браузерних подій».

14 тиждень
Лекція 14. «Програмування форм на мові JavaScript. Властивості елементів форм. Обробка зміни даних в елементах форм. Програмування подій відправки даних з форми». 
Лабораторне заняття 14. «Основи використання мови JavaScript: програмування форм».

15 тиждень
Лекція 15. «Робота з регулярними виразами на мові JavaScript. Основи мови регулярних виразів. Основні методи мови JavaScript для роботи з регулярними виразами. Валідація форм на основі регулярних виразів».
Лабораторне заняття 15. «Робота з регулярними виразами засобами мови JavaScript».
Модульна контрольна робота 2.

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

Оцінювання результатів навчання

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

Модуль 1 
Лабораторні роботи 1-8 – максимальна оцінка за бездоганне виконання лабораторної роботи, наданої у встановлені терміни викладачу, 4 бали. 
Модульна контрольна робота 1 – бездоганне виконання 18 балів (в кожному завданні модульної контрольної роботи наведено максимальну кількість балів за виконання кожного завдання).

Модуль 2
Лабораторні роботи 9-15 – максимальна оцінка за бездоганне виконання лабораторної роботи, наданої у встановлені терміни викладачу, 5 балів. 
Модульна контрольна робота 2 – бездоганне виконання 15 балів (в кожному завданні модульної контрольної роботи наведено максимальну кількість балів за виконання кожного завдання).

Посилання на рекомендовані джерела

1. Robberts J. Learning Web Design. 5th edition. O’Reilly Media. 2018.
2. Attardi J. Modern CSS: Master the Key Concepts of CSS for Modern Web Development. 2020.
3. Flanagan D. JavaScript: The Definitive Guide. O’Reilly Media. 2020.
4. Scott A., MacDonald M. JavaScript Cookbook: Programming the Web. O’Reilly Media. 2021.