Розробники та рецензенти
Заклад вищої освіти:
Компанія-рецензент 1:
Компанія-рецензент 2:
Валідація:
Розробник навчальної програми:
Антон Лисенко - канд.тех.наук, асистент кафедри управління проєктами в інформаційних технологіях
Базова інформація
Шифр та назва спеціальності:
122 - Комп'ютерні наукиНазва освітньо-наукової програми
Комп’ютерні наукиНазва дисципліни
Основи веб-технологійВид дисципліни
ОсновнаБлок дисципліни
Web-програмуванняКількість студентів
60Курс/Семестр
4Загальна інформація про дисципліну
Анотація
Сучасні WEB технології дозволяють студентам отримати знання щодо створення інтернет проектів та побачити майбутній напрямок їх розвитку та використанню. У рамках курсу розглядаються подробиці Front End розробки та надаються основні принципи Back End розробки.Анотація
Метою викладання курсу є надання студентам знань про сучасні підходи до Web-програмування, засвоєння можливостей використання різноманітних технологій та фреймфорків як на стороні кліентської частини веб-додатку (HTML, CSS, JavaScript) так і на стороні серверу (Python, SQL) для програмування динамічних Web-сайтів і Web-інтерфейсів доступу до баз даних.Анотація
Лекції, лабораторні роботи, самостійна робота. Підсумковий контроль – іспитРозподіл часу
Загальний обсяг (кредитів): 5; Лекції (занять): 16; Лабораторні (занять): 16; Практичні (занять): 8; Самостійна робота (годин): 70
Попередні дисципліни
Основи програмування, Об'єктно-орієнтовне програмування, Алгоритми і структури даних, Організація баз данихМатеріально-технічне та програмне забезпечення дисципліни
-Структура дисципліни
| Теоретична складова Назва, перелік питань або анотація лекції | Годин | Практична складова Опис та приклад завдання, а також посилання на методичні матеріали | Годин | Інструменти, засоби та технології | ||||||||||||||
| Тема 1 – Введення до вивчення дисципліни. | ||||||||||||||||||
| Сутність web-дизайну, web-розробки та web-додатку. | 2 | Структура веб-сайту та авторсько правові аспекти при створені сайту. (ПЗ) | 2 | |||||||||||||||
| Еволюція розвитку WWW. Роль WWW у розвитку Інтернету. | ||||||||||||||||||
| Огляд протоколів передачі даних. | ||||||||||||||||||
| З чього складаються сайти, які бувають HTML-документи. | ||||||||||||||||||
| Поняття URL, Як URL забезпечує взаємозв’язок між ресурсами в Інтернеті? | ||||||||||||||||||
| Кліент-серверна архітектура, переваги веб-архітектури. | ||||||||||||||||||
| Огляд найпоширенішіх технологічних стеків для розробки веб-додатків. | ||||||||||||||||||
| Тема 2 – Web-Клієнти. | ||||||||||||||||||
| Різновиди веб-клієнтів. | 2 | Структура та принципи функціонування веб. (ЛЗ) Мета роботи: Познайомитись із структурою та специфікою розробки та функціонування веб. Розглянути типи сайтів, їх структуру та реалізацію. | 4 | |||||||||||||||
| Можливості бібліотек для роботи з HTTP. | ||||||||||||||||||
| Приклад використання urllib. | ||||||||||||||||||
| Приклади реалізаціі серверної частини веб-додатку. | ||||||||||||||||||
| Призначення консольних клієнтів, приклади використання telnet та curl. | ||||||||||||||||||
| Браузер як веб-кліент. | ||||||||||||||||||
| Cценаріі роботи класичного (MPA) та сучасного (SPA) веб-додатків. | ||||||||||||||||||
| Особливості сучасних веб-додатків. | ||||||||||||||||||
| Огляд технологій для створення клієнтської частини веб-додатків. | ||||||||||||||||||
| Тема 3 – Мова розмітки HTML. | ||||||||||||||||||
| Еволюція HTML: від статичних сторінок до сучасного вебу. | 2 | Створення таблиць в HTML. Grid та Flex верстка. (ПЗ) | 2 | |||||||||||||||
| Теги та їх властивості. | ||||||||||||||||||
| Структура документу, DOM. | Базові теги мови розмітки HTML. (ЛЗ) Мета роботи: Познайомитись із синтаксисом, основними тегами та атрибутами мови HTML. | 4 | ||||||||||||||||
| Особливості HTML-розмітки. DOCTYPE та META. | ||||||||||||||||||
| Блокові та рядкові теги. | Використання тегів <area> та <map> для створення он-лайн квесту. (ПЗ) | 2 | ||||||||||||||||
| Розгляд осовних складових частин веб-сторінок: переліки, таблиці, гіперпосилання, форми. | ||||||||||||||||||
| Особливості HTML5. | ||||||||||||||||||
| Тема 4 – Мова опису стилів CSS. | ||||||||||||||||||
| Основи CSS. | ||||||||||||||||||
| Переваги використання CSS, адаптивна верстка. | ||||||||||||||||||
| Синтаксис та принципи CSS, успадковування. | Основи мови опису стилів CSS. (ЛЗ) Мета роботи: Познайомитися із синтаксисом та основними елементами СSS. | 4 | ||||||||||||||||
| Основні та додаткові типи селекторів CSS. | ||||||||||||||||||
| Псевдокласи та псевдоелементи. | ||||||||||||||||||
| Пріоритети стилів та правила розрахунку специфічності. | ||||||||||||||||||
| Відображення та позиціонування елементів. | ||||||||||||||||||
| Відступи та box-model. | ||||||||||||||||||
| Препроцесори CSS. | ||||||||||||||||||
| Тема 5 – Мова програмування JavaScript. | ||||||||||||||||||
| Як сучасний JavaScript став таким: ключові принципи й стандарти. | 2 | Робота з масивами в JS. (ПЗ) | 2 | |||||||||||||||
| Змінні та їх типи. | ||||||||||||||||||
| Оператори: синтаксис і функціональність. | ||||||||||||||||||
| Функціі та контекст виконання. | ||||||||||||||||||
| Області видимості та замикання. | ||||||||||||||||||
| Об'єкти та Модульність. | Мова програмування JavaScript у веб-технологіях. (ЛЗ) Мета роботи: познайомитись із синтаксисом та основними елементами мови JavaScript. | 4 | ||||||||||||||||
| Взаємодія з DOM: навігація, пошук елементів, робота з атрибутами. | ||||||||||||||||||
| Browser API. Подіі та їх обробка. | ||||||||||||||||||
| Event Loop & Threading Model. | ||||||||||||||||||
| Garbage Collector. | ||||||||||||||||||
| Тема 6 – Бібліотеки JS, знайомство з jQuery. | ||||||||||||||||||
| Односторінкові веб-додатки та технологія AJAX. | 2 | |||||||||||||||||
| Огляд технологіі AJAX. Об'єкт XMLHttpRequest. | Розробка гри мовою JS. (ПЗ) | 2 | ||||||||||||||||
| Особливості та обмеження AJAX, Same Origin Policy. | ||||||||||||||||||
| Технологія Cross Origin Resource Sharing та JSONP. | Дата та час. Застосування у веб-технологіях. (ПЗ) | 2 | ||||||||||||||||
| Призначення бібліотеки jQuery. | ||||||||||||||||||
| Селектори та методи, traversing. | ||||||||||||||||||
| Взаємодія з DOM за допо-могою jQuery, керування стилями. | ||||||||||||||||||
| Обробка подій, Promises & Deferred Objects. | ||||||||||||||||||
| Інші можливості jQuery: ефекти та анімація. | ||||||||||||||||||
| Плагіни jQuery, jQuery UI. | ||||||||||||||||||
| Доповнення та сучасні технології навколо JavaScript. | ||||||||||||||||||
| Тема 7 – Введення у компьютерні мережі та протоколи. | ||||||||||||||||||
| Мережева модель TCP/IP. | 2 | |||||||||||||||||
| Фізичний та канальний рівень моделі OSI, обмеження ЛКМ. | ||||||||||||||||||
| Мережевий рівень моделі OSI, протокол IP та як працює роутер. | ||||||||||||||||||
| Поняття DNS. | ||||||||||||||||||
| Транспортний рівень та протокол TCP. | ||||||||||||||||||
| Прикладний рівень моделі TCP/IP: огляд протоколів HTTP, FTP та інших. | ||||||||||||||||||
| Тема 8 – Протокол HTTP. | ||||||||||||||||||
| Які проблеми вирішує протокол НТТР? | 2 | |||||||||||||||||
| Ключові особливості протоколу НТТР, формат повідомлень. | ||||||||||||||||||
| Запит та його заголовки; відповідь, її заголовки та коди статусу. | Створення реєстраційної форми для веб-сайту. (ЛЗ) Мета роботи: Познайомитись із синтаксисом, основними елементами для створення реєстраційної форми на сайті мовами HTML, CSS та JavaScript. | 6 | ||||||||||||||||
| Методи протоколу HTTP. | ||||||||||||||||||
| MIME-types & multi-part messages. | ||||||||||||||||||
| Формат e-mail повідомлень та e-mail агенти. | ||||||||||||||||||
| Тема 9 – Web-сервера. | ||||||||||||||||||
| Історія розвитку серверних технологій. | 2 | |||||||||||||||||
| Огляд популярних веб-серверів (Apache, Nginx, IIS). | ||||||||||||||||||
| Основні поняття стосовно роботи в ОС Linux. Запуск веб-сервера. | Хостинг сайту та веб-сервери. (ЛЗ) Мета роботи: Познайомитись з веб-серверами та способами розміщення веб-сайту в мережевому середовищі.. | 4 | ||||||||||||||||
| Файли, які використовує веб-сервер, налаштування. | ||||||||||||||||||
| Процеси веб-серверу. Цикл обробки запитів. | ||||||||||||||||||
| Модульна архітектура веб-серверів. | ||||||||||||||||||
| Моделі обробки мережевих з'єднань. | ||||||||||||||||||
| Тема 10 – Архітектура Frontend / Backend. | ||||||||||||||||||
| Огляд проблеми. | 2 | |||||||||||||||||
| Ролі frontend-сервера (web-сервера) та backend-сервера (сервера додатків). | ||||||||||||||||||
| Що таке reverse proxy, налаштування проксіювання в Nginx. | ||||||||||||||||||
| Налаштування upstream в Nginx. | ||||||||||||||||||
| Інтерфейси запуску веб-додатку (CGI, WSGI та інші). | ||||||||||||||||||
| Розгляд прикладу WSGI додатку. | ||||||||||||||||||
| Тема 11 – MVC Frameworks. | ||||||||||||||||||
| Основні задачі веб-додатку. | 3 | |||||||||||||||||
| Поняття веб-фреймворку. | ||||||||||||||||||
| Архітектурний шаблон MVC. | ||||||||||||||||||
| Знайомство з Django, архітектурний патерн MVT та створення першого проекту. | ||||||||||||||||||
| Налаштування параметрів проекту. | ||||||||||||||||||
| Маршрутизація URL. | ||||||||||||||||||
| Django Views (контролери), обробка запитів та формування відповідей. | ||||||||||||||||||
| Декоратори в Python та Django. | ||||||||||||||||||
| Шаблонізація та її особливості. | ||||||||||||||||||
| Server Side Includes та успадкування шаблонів. | ||||||||||||||||||
| Тема 12 – Взаємодія з СУБД. | ||||||||||||||||||
| Передумови виникнення СУБД, та проблеми які вирішує СУБД. | 3 | |||||||||||||||||
| Огляд різних моделей даних. Реляційна модель даних. | ||||||||||||||||||
| Первинний та зовнішній ключі. Проектування БД. | ||||||||||||||||||
| Підключення до СУБД. Виконання запитів SQL. | ||||||||||||||||||
| Django Models ORM. Створення та зміна об'єктів. Завантаження об'єкта з бази даних. | ||||||||||||||||||
| Версіонування схеми БД, міграціі. | ||||||||||||||||||
| Створення демонстраційного додатку. | ||||||||||||||||||
| Відображення об'єкту та переліку об'єктів, відображення зв’язаних сутностей. | ||||||||||||||||||
| Розбиття на сторінки та Progressive Loading. | ||||||||||||||||||
| Тема 13 – Відображення даних та форми.. | ||||||||||||||||||
| Обробка форм та їх підтримка у Django. Технологія Cross Site Resource Forgery. | 2 | |||||||||||||||||
| Тема 14 – Cookies, Sessions та авторизація у веб-додатках. | ||||||||||||||||||
| Поняття Cookies та HTTP-сесіі. | 2 | |||||||||||||||||
| Різновіди методів авторизаціі: Basic HTTP Authorization, Cookies-Based Authorization. | Фронтенд та бекенд фреймворки та бібліотеки (Angular, JQuery, React). (ЛЗ) Мета роботи: Познайомитись із фреймворками для фронтенд та бекенд розробки. | 6 | ||||||||||||||||
| Поняття Middleware, компоненти Middleware в Django. | ||||||||||||||||||
| Підтримка авторизаціі в Django. Особливості реалізаціі безпеки у веб-додатках. | ||||||||||||||||||
Теми та завдання для самостійної роботи
| Реферат на вибрану тему з курсу. |
Проєкт
Непередбачено
Рекомендовані джерела інформації та навчальні матеріали
| № | Назва | До теми (вказати номер) | ||||||||||||||||
| 1 | 1. Методичні вказівки до виконання лабораторних робіт "Основи веб-технологій" з дисципліни "Основи веб-технологій" [Електронний ресурс] : для студентів 122 спеціальності "Комп'ютерні науки" / уклад.: А. О. Лисенко, І. В. Шуба ; НТУ "ХПІ" – Харків, 2023. – 45 с. | 1…6 | ||||||||||||||||
| 2 | 2. Методичні вказівки до виконання практичних робіт "Основи веб-технологій" з дисципліни "Основи веб-технологій" [Електронний ресурс] : для студентів 122 спеціальності "Комп'ютерні науки" / уклад.: А. О. Лисенко, І. В. Шуба ; НТУ "ХПІ" – Харків, 2023. – 33 с. | 1…6 | ||||||||||||||||
| 3 | 3. Web-програмування. Лабораторний практикум [Електронний ресурс] : навч. посіб. для студ. спеціальності 125 «Кібербезпека» та 113 «Прикладна математика» / А. Ю. Шелестов, Н. М. Куссуль; КПІ ім. Ігоря Сікорського. – Електронні текстові дані (1 файл: 1047 Кбайт). – Київ : КПІ ім. Ігоря Сікорського, 2021. – 61 с. | 1…14 | ||||||||||||||||
| 4 | 4. Web-програмування. Частина 1 (frontend) : навч. посіб. / В. В. Босько, Л. В. Константинова, К. М. Марченко, О. С. Улічев ; М-во освіти і науки України, Центральноукраїн. нац. техн. ун-т. - Кропивницький : ЦНТУ, 2022. - 208 с. | |||||||||||||||||
| 5 | 5. Бородкіна І.Л., Бородкін Р. О. Web-технології та Web-дизайн : застосування мови HTML для створення електронних ресурсів. Видавництво: Ліра До, 2020, 212с. | 1…6 | ||||||||||||||||
| 6 | 6. Томка Ю.Я. Python та Django Full Stack веб-розробка / Ю.Я. Томка, М.В. Талах, Ю.О. Ушенко. – Чернівці: Чернівецький нац. ун-т ім. Ю.Федьковича, 2022. – 248с. | 7…14 | ||||||||||||||||
| 7 | 7. Eric Meyer, Estelle Weyl. CSS: The Definitive Guide, 5th Edition / Eric Meyer, Estelle Weyl – USA: O'Reilly Media, Inc., 2023. | |||||||||||||||||
| 8 | 8. Eric Matthes. Python Crash Course, 3rd Edition / Eric Matthes – UK: No Starch Press, 2023. – 552 p. Barry Pollard. HTTP/2 in Action / Barry Pollard – USA: Manning, Distributed by Simon & Schuster, 2019. – 416 p. | 7…14 | ||||||||||||||||
| 9 | 9. Artur Ejsmont. Web Scalability for Startup Engineers, 1st Edition / Artur Ejsmont – USA: McGraw-Hill Education, 2015. – 416 p. | 7…14 | ||||||||||||||||
Контрольні заходи
| Назва та опис | Методи контролю та критерії оцінювання | |||||||||||||||||
| Опитування на семінарах – оцінювання активності та розуміння матеріалу в рамках семінарських занять. | 90-100 Відмінно (A) 82-89 Добре (B) 75-81 Добре (C) 64-74 Задовільно (D) 60-63 Задовільно (E) 35-59 Незадовільно (потрібне додаткове вивчення) | |||||||||||||||||
| Практичні завдання – перевірка вмінь застосовувати теорію на практиці, аналіз конкретних прикладів або ситуацій. | ||||||||||||||||||
| Іспит – письмова або усна перевірка знань по всьому курсу, що охоплює всі основні теми дисципліни. | ||||||||||||||||||
| Оцінка рефератів, оглядів літератури або дослідницьких завдань, виконаних самостійно. Це дозволяє перевірити здатність студента працювати з науковими джерелами та застосовувати знання на практиці. | ||||||||||||||||||
Результати навчання
В ході вивчання матеріалів курсу та виконання практичних (лабораторних) завдань студенти отримають теоретичні та практичні навички розробки веб-орієнтованих програмних систем. Результатом навчання буде набуття наступних компетентностей: РН9. Розробляти програмні моделі предметних середовищ, вибирати парадигму програмування з позицій зручності та якості застосування для реалізації методів та алгоритмів розв’язання задач в галузі комп’ютерних наук.
Зв'язок з ринком праці
Спеціальність/професія, підготовці до діяльності в якій читається курс:
Розробник інтерфейсуПосилання на вакансії (понад 3),
Перелік компетентностей із вказаних як вимоги до вакансії, які набувають студенти, в процесі проходження дисципліни.
— Впевнені навички в HTML і CSS для швидкого створення прототипів сторінок. — Досвід роботи з реляційними базами даних, такими як MySQL або PostgreSQL. — Розробка, розгортання та підтримка програмного забезпечення з Python/Django SaaS — strong knowledge of HTML, CSS, JavaScriptІнструменти оцінювання результатів навчання за дисципліною
Тести за темою (аналогічно технічному інтерв'ю);