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

Метою вивчення навчальної дисципліни «Web-програмування» є ознайомлення здобувачів з сучасними тенденціями розвитку сервісів мережі Інтернет; з основними стандартами обміну даними між додатками та сервісами Інтернет; з основними правилами проєктування сайтів та сервісів Інтернет; набуття навичок застосування мови PHP для створення динамічних сайтів та сервісів Інтернет; формування у здобувачів базових знань і навичок з розробки веб-додатків, включаючи основи роботи з мовами програмування HTML, CSS та JavaScript для створення інтерактивних і адаптивних веб-застосувань.
Завдання дисципліни Web-програмування є навчити здобувача проєктувати web-орієнтовані програмні продукти на сучасному рівні.
Практичне значення та використання отриманих знань: навчання здобувачів створювати сучасні веб-сайти і застосування, працювати з основними інструментами веб-розробки, впроваджувати інтерактивні елементи та забезпечувати адаптивність інтерфейсів для розв'язання прикладних задач у сфері розробки цифрових продуктів, веб-дизайну, електронної комерції та інтеграції веб-рішень виробничі та бізнес-процеси.
Тематика та види навчальних занять
для денної форми здобуття освіти
Лекційні заняття
Лекція 1. «Введення у веб-розробку і HTML».
Лекція 2. «HTML тег, його налаштування. Введення в CSS».
Лекція 3. «Створення таблиць і макетів. Основні теги і стилі».
Лекція 4. «Позиціонування елементів, анімації і плавність елементів, CSS псевдокласи».
Лекція 5. «Ознайомлення з SVG. Створення багатосторінкового сайту, адаптивна верстка».
Лекція 6. «Введення в JavaScript».
Лекція 7. «LiveCode: Ознайомлення з JavaScript на прикладі створення бота».
Лекція 8. «Об’єкти в JavaScript».
Лекція 9. «Маніпулювання сторінкою, за допомогою JavaScript. Робота з DOM».
Лекція 10. «Events (події). Створення “слухачів”, для реагування на події».
Лекція 11. «Додавання файлу, з файлової системи. Робота з аудіо, створення застосунку аудіоплеєру».
Лекція 12. «Генерування програмних Events. Прослуховувач власних Events». Основні принципи програмування: DRY, KISS, WET, YAGNI».
Лекція 13. «Механізм роботи JavaScript Event loop. Асинхронність в JavaScript, створення Promise’ів».
Лекція 14. «Використання CSS бібліотек. Ознайомлення з мережевими запитами, REST API і статус кодами».
Лекція 15. «Реалізація роботи з Backend застосунком через WEB API. Мережеві запити через метод Fetch. Відправлення інформації на сервер, обробка відповідей».
Лабораторні заняття
Лабораторне заняття №1. Налаштування програмного середовища
Мета роботи – ознайомитись з середовищами розробки програмного забезпечення для написання програм мовою JavaScript, мови розмітки HTML та каскадної таблиці стилів CSS. Лабораторне заняття №2. Формування структури HTML документа
Мета роботи – ознайомитися з основними елементами розмітки HTML документу, тегами, їх групуванням.
Лабораторне заняття №3. Роботи з стилями з використанням CSS
Мета роботи – навчитися застосовувати таблиці каскадних стилів(CSS) для веб-сторінок
Лабораторне заняття №4. Основи адаптивної верстки веб-сторінок
Мета роботи – навчитися виконувати основі принципи адаптації веб сторінок у відповідності до розмірів екрану перегляду.
Лабораторне заняття №5. Типи даних, цикли та умовні оператори
Мета роботи – ознайомитись з типами даних у мові JavaScript. Навчитись використовувати базові конструкції циклів, застосовувати умовні оператори.
Лабораторне заняття №6. Оператори взаємодії з користувачем
Мета роботи – ознайомитись з основними операторами діалогу з користувачем alert, confirm, prompt у мові JavaScript. Навчитись використовувати базові оператори.
Лабораторне заняття №7. Тип даних масив
Мета роботи – ознайомитись з типом даних масив у мові JavaScript. Використовувати конструкції циклів та умовні оператори в поставленій задачі. Лабораторне заняття №8. Основи роботи з DOM. Створення та обробка API запитів, JSON
Мета роботи – ознайомитись з структурою DOM документу і можливостями вводу і виводу даних з нього, навчитись створювати API запити та вирстуватись даним у форматі JSON. Лабораторне заняття №9. Онови оброки вхідної інформації (команди з мишки та клавіатури), роботи з часовими змінними та областями пам’яті.
Мета роботи – навчитись обробляти за допомогою JavaScript команди введені з клавіатури і миші. Вивчити основи роботи з областями пам’яті.
Лабораторне заняття №10. «Створення сторінки за макетом з власною тематикою. Використання HTML, CSS, блочної верстки і Flex елементи».
Мета заняття: ознайомитися з основами HTML, CSS та їх взаємодією.
Лабораторне заняття №11. «Створення гри на HTML і CSS. Рух елемента на сторінці за допомогою позиціонування і анімацій».
Мета заняття: ознайомитися з принципами позиціонування елементів.
Лабораторне заняття №12. «Створення гри новели на HTML і CSS на 15-20 рівнів. Реалізація механіки «вибір має значення». Адаптивна верстка і створення SVG картинки».
Мета заняття: ознайомитися з принципами адаптивності верстки.
Лабораторне заняття №13. «Створення аудіоплеєру. Генерування пісень на сторінці по масиву пісень (у вигляді об’єкту). Створення плеєру для управління піснями, реалізація механік: програвання/пауза, перемотка пісні, регулювання гучності».
Мета заняття: ознайомитися з принципами обробки подій.
Лабораторне заняття №14. «До плеєру четвертої лабораторної роботи додати: можливість додавати нові пісні з файлової системи, зберігання пісень в LocalStorage. Додавання логіки: отримати масив пісень з LocalStorage, якщо їх там не існує - з json файлу, за допомогою мережевого запиту».
Мета заняття: ознайомитися з принципами организації інформації та її зберігання.
Лабораторне заняття №15. «Зробити WEB застосунок, який робить мережеві запити GET, POST, PUT, DELETE на сервер. Обробка По отриманій інформації з сервера - генерувати елементи на сторінці. Обробка помилок з сервера».
Мета заняття: ознайомитися з типами запитів та принципами передачі даних мереже.
для заочної форми здобуття освіти
Лекційні заняття
Лекція 1. «Введення у веб-розробку і HTML».
Лекція 2. «Введення в JavaScript».
Лабораторні заняття
Лабораторне заняття №1. «Створення сторінки за макетом з власною тематикою. Використання HTML, CSS, блочної верстки і Flex елементи».
Лабораторне заняття №2. «Створення аудіоплеєру. Генерування пісень на сторінці по масиву пісень (у вигляді об’єкту). Створення плеєру для управління піснями, реалізація механік: програвання/пауза, перемотка пісні, регулювання гучності».
Консультації здійснюються впродовж семестру згідно встановленого розкладу.
Індивідуальна робота
Для денної та заочної форми здобуття освіти
Курсова робота
Мета курсової роботи – закріплення знань в галузі веб програмування, включаючи основи роботи з мовами програмування HTML, CSS та JavaScript; набуття вміння проектування інтерактивних і адаптивних веб-застосувань.
Здобувач отримує завдання на першому лабораторному занятті.
Пояснювальна записка містить 20-25 сторінок Кількість розділів – 3. Графічна частина – три аркуша креслень формату А3.
Змістовна послідовність виконання роботи.
1. Обґрунтування структурної схеми застосування;
2. Верстка макету застосунку;
3. Програмування фронт-енд застосунку.
Перелік графічних матеріалів:
• структурна схема застосування;
• схема макету застосунку;
• блок-схеми програми фронт-енд застосунку.
Захист курсової роботи – протягом останнього навчального тижня семестру.
Контрольна робота для здобувачів заочної форми
Завдання для виконання контрольної роботи здобувач отримує на установчій лекції.
Робота містить 4 практичних завдання.
Контрольна робота має бути оформлена у вигляді текстового документа PDF, що містить опис усіх етапів виконання завдань, графіки та висновки.
До роботи мають бути додані: вихідні файли даних, файли програми, файли з результатами (наприклад, графіки, текстові файли, таблиці).
Усі матеріали необхідно завантажити в архів (формат *.zip або *.rar) і надіслати не пізніше, ніж за місяць до початку сесії.
Форми контрольних заходів та оцінювання результатів навчання
для денної форми здобуття освіти
Поточний контроль полягає у виконанні
1) 15-ти індивідуальних поточних завдань. Індивідуальні поточні завдання виконуються письмово і полягають в розв'язуванні типових задач відповідно до мети та завдань лабораторних занять. Бездоганне виконання індивідуального поточного завдання №1-6 оцінюється у 3,5 балів; індивідуальних поточних завдань №7 – 4,0 бала; №8 – 5,0 балів; індивідуальних поточних завдань №9 – 3,0 бали, №10-15 – 4,5 балів. Всього – 60 балів.
2) курсової роботи. Бездоганне виконання оцінюється у 60 балів. Захист роботи – 40 балів.
3) двох модульних контрольних робіт. Модульні контрольні роботи складаються з теоретичної і практичної частин та проводяться у формі комп'ютерного тестування. Бездоганне виконання кожної модульної контрольної роботи становить 20 балів. Всього – 40 балів.
Підсумковий контроль – екзамен. Екзамен усний. Максимальна оцінка, яку може отримати студент – 100 балів.
для заочної форми здобуття освіти
Виконання та захист двох лабораторних робіт – 20 балів (по 10 балів за кожну).
Захист контрольної роботи. Бездоганне виконання контрольної роботи оцінюється у 40 балів. При її захисті студент може отримати до 40 балів.
Захист курсової роботи. Бездоганне виконання курсової роботи оцінюється у 60 балів. Захист роботи – 40 балів.
Підсумковий контроль – екзамен. Екзамен усний. Максимальна оцінка, яку може отримати студент – 100 балів.