Розробники та рецензенти:
Заклад вищої освіти:
Компанія-рецензент 1:
Компанія-рецензент 2:
Валідація:
Розробник навчальної програми:
Шакуров Євген Олексійович, старший викладач кафедри інформатики, ХНПУ імені Г. С. Сковороди
Базова інформація
Шифр та назва спеціальності:
014 Середня освіта (Інформатика)Назва освітньо-наукової програми
Інформатика в закладах освітиНазва дисципліни
Web дизайнВид дисципліни
ВибірковаБлок дисципліни
Web-програмуванняКількість студентів
12Курс/Семестр
4Загальна інформація про дисципліну
Анотація
Формування у здобувачів освіти теоретичних знань і практичних навичок зі створення сучасних вебресурсів із використанням HTML, CSS та JavaScript. Розвиток умінь розробки структурованих, адаптивних та інтерактивних вебсторінок відповідно до сучасних стандартів веброзробки.Анотація
Надати теоретичні знання та практичні навички зі створення інформаційних ресурсів мережі Internet, навчити їх створювати html-документи, використовувати CSS для оформлення сторінок, а також програмувати інтерактивні елементи мовою JavaScript.Анотація
Лекції, лабораторні роботи, самостійна робота. Підсумковий контроль – залікРозподіл часу
Загальний обсяг (кредитів): 6; Лекції (занять): 10; Лабораторні (занять): 24; Практичні (занять): 38; Самостійна робота (годин): 88
Попередні дисципліни
Комп'ютерні мережі та інтернетМатеріально-технічне та програмне забезпечення дисципліни
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) |
Додаткові
| № | Назва | До теми (номери) |
|---|---|---|
| 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
- Знання принципів побудови та навігації веб-сайтів.
- Вміння створювати інтерактивні елементи і працювати з масивами та рядками у JavaScript.
- Практичні навички розробки веб-проектів, командна робота та презентація результатів.
Інструменти оцінювання результатів навчання за дисципліною
| № | Об’єкт оцінювання | Методи контролю | Інструменти оцінювання |
|---|---|---|---|
| 1 | Знання основ HTML, CSS, JavaScript | Тестування | Онлайн-тест |
| 2 | Практичні навички створення HTML-сторінок | Аналіз лабораторних робіт | Посилання на виконані роботи |
| 3 | Вміння працювати з CSS | Практичні завдання зі стилізації | Демонстрація проєктів |
| 4 | Програмування на JavaScript | Виконання лабораторних робіт | Посилання на код у репозиторії |
| 5 | Захист кінцевого проєкту | Презентація проєкту, оцінка за критеріями | Оцінка функціональності, дизайну, адаптивності, якості коду |