Розробники та рецензенти
Заклад вищої освіти:
Компанія-рецензент 1:
Компанія-рецензент 2:
Валідація:
Розробник навчальної програми:
Шакуров Євген Олексійович, старший викладач кафедри інформатики, ХНПУ імені Г. С. Сковороди
Базова інформація
Шифр та назва спеціальності:
014 Середня освіта (Інформатика)Назва освітньо-наукової програми
Інформатика в закладах освітиНазва дисципліни
Web дизайнВид дисципліни
ВибірковаБлок дисципліни
Web-програмуванняКількість студентів
12Курс/Семестр
4Загальна інформація про дисципліну
Анотація
Дисципліна формує знання та практичні навички зі створення та оформлення веб-ресурсів за допомогою сучасних технологій — HTML, CSS, Bootstrap та JavaScript. Студенти опановують основи верстки, стилізації та програмування для інтерактивних веб-сторінок, навчаються розробляти власні сайти з урахуванням адаптивності та дизайну користувацького інтерфейсу.Анотація
Надати теоретичні знання та практичні навички зі створення інформаційних ресурсів мережі Internet, навчити їх створювати html-документи, використовувати CSS та Bootstrap для оформлення сторінок, а також програмувати інтерактивні елементи мовою JavaScript.Анотація
Лекції, лабораторні роботи, самостійна робота. Підсумковий контроль – залікРозподіл часу
Загальний обсяг (кредитів): 4.5; Лекції (занять): 10; Лабораторні (занять): 24; Практичні (занять): 38; Самостійна робота (годин): 81
Попередні дисципліни
Комп'ютерні мережі та інтернетМатеріально-технічне та програмне забезпечення дисципліни
Figma, Visual Studio Code, Sublime Text, репозиторії GitHubСтруктура дисципліни
| № | Теоретична складова | Годин | Практична складова | Годин | Інструменти та технології |
|---|---|---|---|---|---|
| Модуль 1. Створення інформаційних ресурсів мовою HTML | |||||
| 1 | Вступ у мови розмітки. Мова HTML | 2 | Створення простої HTML-сторінки з текстом, списками, зображеннями | 8 | HTML, VS Code, браузер |
| 2 | Принципи навігації web-сайту | 3 | Верстка сторінки з таблицями, фреймами, створення меню навігації | 9 | |
| 3 | Застосування правил форматування тексту CSS | 2 | Підключення CSS, стилізація тексту на сторінці | 11 | |
| 4 | Розмітка та адаптивність (Layout and Adaptability) | 2 | Верстка адаптивного макету з використанням CSS Flexbox/Grid | 11 | |
| 5 | Проєктна робота HTML+CSS | 1 | Розробка макету сайту з кількох сторінок із застосуванням CSS | 8 | |
| Модуль 2. Програмування на web-сторінках мовою JavaScript | |||||
| 6 | Поняття про мови сценаріїв та інтерактивні форми, знайомство з JS | 2 | Написання скриптів | 9 | |
| 7 | Типи даних JavaScript | 1 | Завдання на роботу з рядками, числами, логічними значеннями | 8 | |
| 8 | Управління і цикли в JS | 2 | Програми з if-else, switch, for, while | 9 | |
| 9 | Вбудовані об’єкти та подійно-керована модель в JS | 2 | Обробка подій, робота з DOM | 9 | |
| 10 | Масиви та об’єкт String у JavaScript | 1 | Завдання з масивами та методами String | 8 | |
| 11 | Проєктна робота | 1 | Створення інтерактивного сайту з HTML, CSS, JS, Bootstrap | 5 | HTML, CSS, JavaScript, Bootstrap, VS Code |
Теми та завдання для самостійної роботи
| № | Назва завдання | Методи контролю та критерії оцінювання | Годин |
|---|---|---|---|
| 1 | Опрацювання теоретичних основ HTML, створення простої веб-сторінки | Перевірка HTML-коду | 8 |
| 2 | Розробка сторінки з таблицями та фреймами, створення навігаційного меню | Перевірка структури та навігації | 8 |
| 3 | Вивчення CSS-селекторів і правил форматування, стилізація HTML-сторінки | Оцінювання коду | 9 |
| 4 | Створення адаптивного макету з CSS Flexbox/Grid | Перевірка адаптивності макету | 9 |
| 5 | Розробка макету сайту з кількох сторінок (HTML+CSS) | Перевірка HTML-коду | 8 |
| 6 | Вивчення синтаксису JavaScript, написання скриптів | Відсутність помилок у коді | 9 |
| 7 | Робота з типами даних у JavaScript | Коректне використання типів | 8 |
| 8 | Написання програм з умовними операторами | Перевірка алгоритмів | 8 |
| 9 | Робота з DOM та обробниками подій | Перевірка обробки подій | 8 |
| 10 | Завдання з масивами та методами String у JavaScript | Перевірка реалізації | 8 |
| 11 | Створення інтерактивного веб-сайту (HTML, CSS, JS, Bootstrap) | Презентація проєкту | 8 |
Проєкт
| № | Назва та опис завдання | Метод контролю та захисту | Строки виконання |
|---|---|---|---|
| 1 | Розробка інтерактивного багатосторінкового веб-сайту з адаптивним дизайном, навігацією, інтерактивними елементами (форми, слайдери, модальні вікна) | Захист у вигляді презентації та демонстрації функціоналу. Оцінка за код, дизайн, функціональність, адаптивність. | Кінець семестру |
Рекомендовані джерела інформації та навчальні матеріали
Основні
| № | Назва | До теми (номери) |
|---|---|---|
| 1 | Бородкіна І.Л., Бородкін Г.О. WEB-технології та WEB-дизайн: застосування мови HTML | Модуль 1 (Теми 1.1 – 1.5) |
| 2 | Трофименко О. Г. Веб-технології та веб-дизайн : навчальний посібник | Модуль 1 (Теми 1.1 – 1.5) |
| 3 | Шакуров Є. О. Сучасні тенденції побудови веб-сайтів | Модуль 1, 2 (Теми 1.1 – 2.5) |
| 4 | Шакуров Є. О. Програми для створення веб-сайту | Модуль 1 (Теми 1.1 – 1.5) |
| 5 | Шакуров Є. О. Розробка веб-сайту з використанням фреймворку Bootstrap | Модуль 1 (Тема 1.5), Модуль 2 (Теми 2.1 – 2.5) |
Додаткові
| № | Назва | До теми (номери) |
|---|---|---|
| 1 | Трофименко О. Г. Веб-технології та веб-дизайн : навчальний посібник | Модуль 1 (Теми 1.1 – 1.5) |
| 2 | Шикула О.М., Вишнівський В.В., Іщеряков С.М. та ін. Вступ до комп’ютерного дизайну | Модуль 1 (Теми 1.3 – 1.5) |
Контрольні заходи
| № | Назва та опис | Методи контролю та критерії оцінювання |
|---|---|---|
| 1 | Опитування на семінарах | Активність і розуміння матеріалу (відмінно 90-100 до незадовільно) |
| 2 | Практичні завдання | Тестування знань, оцінка практичних робіт та самостійної роботи |
| 3 | Залік за підсумками курсу | Тестування, охоплення усіх тем |
Результати навчання
Визначати основні поняття та структуру HTML і CSS Створювати та верстати веб-сторінки із застосуванням таблиць, списків, фреймів Застосовувати адаптивний веб-дизайн для коректного відображення на різних пристроях Програмувати інтерактивні елементи за допомогою JavaScript, включно з обробкою подій і роботою з DOM Розробляти веб-додатки з HTML, CSS, JavaScript та Bootstrap
Зв'язок з ринком праці
Спеціальність/професія, підготовці до діяльності в якій читається курс:
інформатика/вчитель інформатикиПосилання на вакансії (понад 3),
https://www.work.ua/jobs/6377593 https://www.work.ua/jobs/681669 https://www.work.ua/jobs/6726970/Перелік компетентностей із вказаних як вимоги до вакансії, які набувають студенти, в процесі проходження дисципліни.
- Володіння мовою розмітки HTML та CSS для створення адаптивних веб-сторінок.
- Навички програмування на JavaScript, включно з обробкою подій і роботою з DOM. Вміння працювати з фреймворком Bootstrap.
- Знання принципів побудови та навігації веб-сайтів.
- Вміння створювати інтерактивні елементи і працювати з масивами та рядками у JavaScript.
- Практичні навички розробки веб-проектів, командна робота та презентація результатів.
Інструменти оцінювання результатів навчання за дисципліною
| № | Об’єкт оцінювання | Методи контролю | Інструменти оцінювання |
|---|---|---|---|
| 1 | Знання основ HTML, CSS, JavaScript | Тестування | Онлайн-тест |
| 2 | Практичні навички створення HTML-сторінок | Аналіз лабораторних робіт | Посилання на виконані роботи |
| 3 | Вміння працювати з CSS | Практичні завдання зі стилізації | Демонстрація проєктів |
| 4 | Програмування на JavaScript | Виконання лабораторних робіт | Посилання на код у репозиторії |
| 5 | Захист кінцевого проєкту | Презентація проєкту, оцінка за критеріями | Оцінка функціональності, дизайну, адаптивності, якості коду |