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

Анотація начальної дисципліни
На сьогоднішній день веб-технології створюють ефективну систему пошуку інформації, взаємодії суспільства, комерційної діяльності, виробничих процесів тощо. Постійне розширення впливу веб-технологій на всі сфери життя суспільства зумовлює необхідність вивчення веб-дизайну, інструментів веб-розробки та принципів роботи веб-сайтів майбутніми фахівцями у галузі дизайну.
Курс «Веб-технології та веб-дизайн» є дисципліною обов’язкової частини циклу дисциплін професійної підготовки освітньої програми спеціальності 022 «Дизайн» першого (бакалаврського) рівня вищої освіти.
Робоча програма навчальної дисципліни «Веб-технології та веб-дизайн» є нормативним документом Національного університету «Одеська політехніка», який розроблено кафедрою інформаційних технологій проєктування та дизайну ІЦТДТ на основі освітньо-професійної програми підготовки відповідно до навчального плану першого (бакалаврського) рівня вищої освіти для здобувачів денної та заочної форми навчання спеціальності 022 «Дизайн» та освітньої програми «Архітектурний дизайн», навчальної програми курсу.
Робочу програму навчальної дисципліни укладено згідно з вимогами кредитно-модульної системи організації освітнього процесу в Національному університеті «Одеська політехніка».
Програма визначає обсяги компетентностей, які повинен опанувати здобувач відповідно до освітньо-професійної програми та алгоритму вивчення навчального матеріалу дисципліни «Веб-технології та веб-дизайн», а також необхідне методичне забезпечення, складові та технологію оцінювання навчальних досягнень.
Навчальна дисципліна викладається протягом четвертого та п’ятого семестрів, складається з лекційних та лабораторних занять і входить в обов’язкову частину професійної підготовки навчального плану підготовки першого (бакалаврського) рівня вищої освіти. У відповідності до навчального плану завершується складанням екзамену у четвертому семестрі та екзамену і виконанням курсової роботи у п’ятому семестрі.
У процесі вивчення дисципліни здобувачі опановують сучасні можливості інформаційних технологій, інструменти та шляхи розробки користувацьких веб-інтерфейсів та дизайну веб-сайтів. Знання, здобуті під час вивчення дисципліни, дозволяють здобувачам спеціальності 022 «Дизайн» навчитися представляти результати своєї роботи у вигляді професійних сайтів та власних портфоліо для розширення можливостей у подальшій професійній діяльності.

 Мета та завдання дисципліни 
Дисципліна «Веб-технології та веб-дизайн» є складовою частиною циклу дисциплін підготовки бакалавра в розрізі професійної підготовки обов’язкового блоку.
Метою вивчення дисципліни «Веб-технології та веб-дизайн» є засвоєння методологічних та концептуальних теоретичних відомостей про веб-технології, формування у здобувачів вмінь та навичок веб-дизайну та розробки веб-сторінок, а також підготовка фахівців, які вміють застосовувати сучасні методики роботи та технічної підтримки веб-сайтів для подальшої професійної діяльності.
Дисципліна базується на знаннях, вміннях та навичках, отриманих при вивченні таких дисциплін як: «Інформатика», «Програмне забезпечення архітектурного проєктування», «Основи теорії дизайну», «Іноземна мова».
Дисципліна забезпечує подальше вивчення наступних дисциплін: «Архітектурний комп’ютерний дизайн», «Матеріалознавство та технології в архітектурному дизайні». Засвоєння дисципліни «Веб-технології та веб-дизайн» є необхідним у подальшій професійній діяльності.

 Програмні результати навчання
ПРН17. Застосовувати сучасне загальне та спеціалізоване програмне забезпечення у професійній діяльності.
ПРН19. Розробляти та представляти результати роботи у професійному середовищі, розуміти етапи досягнення успіху в професійні кар’єрі, враховувати сучасні тенденції ринку праці, проводити дослідження ринку, обирати відповідну бізнес-модель і розробляти бізнес-план професійної діяльності у сфері дизайну.
ПРН20. Вміти знаходити нові, нешаблонні рішення і засоби їх здійснення в області архітектурного та графічного дизайну, діяти протягом тривалого часу, незважаючи на труднощі, проявляти гнучкість в подоланні перешкод.

Тематика та види навчальних занять
Для денної форми здобуття освіти

Дисципліна вивчається у четвертому та п’ятому семестрах відповідно до навчального плану спеціальності 022 «Дизайн».

5 Семестр
Лекція 16. Планування архітектури сайту та його дизайн.
Лекція 17. Cтворення векторних зображень і ілюстрацій у Figma.
Лекція 18. Використання модульних сіток і напрямних при проєктуванні дизайну сайту.
Лекція 19. Шаблони, обмежувачі і компоненти у Figma.
Лекція 20. Принципи роботи з адаптивними елементами при створенні дизайну.
Лекція 21. Робота з контентом веб-сторінок.
Лекція 22. Робота з елементами форми.
Лекція 23. Дизайн інтерфейсу та підвищення веб-юзабіліті.
Лекція 24. Композиція та правило контрасту у веб-дизайні.
Лекція 25. Теорія наближеності та візуальна ієрархія.
Лекція 26. HTML5 – розширені можливості нової версії мови HTML.
Лекція 27. Розміщення та відтворення на веб-сторінках мультимедійних даних.
Лекція 28. Масштабована векторна графіка.
Лекція 29. Анімація та інтерактивні елементи у веб-дизайні.
Лекція 30. Інтерактивний користувацький інтерфейс. Управління та адміністрування сайту.

Лабораторні заняття

5 Семестр
Лабораторне заняття №16. «Робота з векторними об’єктами у Figma».
Мета заняття: Навчитися застосовувати основні інструменти для роботи з векторними об’єктами.
Лабораторне заняття №17. «Використання модульних сіток, напрямних і компонентів при проєктуванні дизайну сайту».
Мета заняття: Закріплення навичок роботи при використанні модульних сіток, напрямних і компонентів у веб-дизайні.
Лабораторне заняття №18. «Робота з адаптивними елементами при розробці веб-сторінок».
Мета заняття: Вивчення основних принципів роботи з адаптивними елементами.
Лабораторне заняття №19. «Оформлення веб-сторінок із врахуванням композиції та правила контрасту у веб-дизайні».
Мета заняття: Закріплення вмінь застосування статичної та динамічної композиції, а також правила контрастів при розробці веб-сторінок.
Лабораторне заняття №20. «Створення дизайну для Landing Page із врахуванням теорії наближеності та візуальної ієрархії».
Мета заняття: Набуття навичок практичного застосування принципу дотримання візуальної ієрархії при проєктуванні дизайну сайту.
Лабораторне заняття №21. «Робота з елементами мультимедіа».
Мета заняття: Формування базових вмінь роботи з мультимедійними даними.
Лабораторне заняття №22. «Передача файлів на сервер та створення сторінки роботи з файлами».
Мета заняття: Навчитися використовувати можливості сучасного програмного забезпечення для реалізації роботи сайту.

Консультації проводяться згідно встановленого розкладу.

Для заочної форми здобуття освіти
Дисципліна вивчається у п’ятому та шостому семестрах відповідно до навчального плану спеціальності 022 «Дизайн».

Лекція 1. Принцип роботи мережі Інтернет. Засоби та інструменти розробки веб-сторінок.
Лекція 2. Форматування веб-сторінок за допомогою таблиць каскадних стилів. Знайомство з базовими інструментами дизайну.
Лекція 3. Дизайн інтерфейсу та планування архітектури сайту.
Лекція 4. Розміщення та відтворення на веб-сторінках мультимедійних даних.

Лабораторні заняття
Лабораторне заняття №1. «Розробка структури веб-сайту, наповнення його контентом та html-елементами».
Мета заняття: Навчитися створювати прості веб-сторінки та надавати їм певного вигляду, використовуючи для цього основні команди мови html. Вивчити табличну та фреймову структуру сайтів. Навчитися розміщувати форми на веб-сторінці.
Лабораторне заняття №2. «Дизайн веб-сторінок за допомогою таблиць каскадних стилів та базових інструментів програмного середовища Figma».
Мета заняття: Набуття навичок форматування шрифту та тексту за допомогою мови CSS. Вміти управляти відображенням блоків на веб-сторінці. Ознайомитись із базовими інструментами дизайну в середовищі Figma.
Лабораторне заняття №3. «Використання розширених можливостей для дизайну веб-сторінок в середовищі Figma».
Мета заняття: Навчитися створювати векторні об’єкти та компоненти у Figma, працювати з адаптивними елементами, використовувати модульні сітки і напрямні при проєктуванні дизайну сайту.
Лабораторне заняття №4. «Додаткові можливості у розробці веб-сторінок».
Мета заняття: Одержати навички створення документів із врахуванням композиції та правила контрасту. Навчитися працювати з елементами мультимедіа, а також застосовувати анімацію та інтерактивні елементи у веб-дизайні.

Індивідуальна робота
Для денної форми здобуття освіти 
Дисципліна вивчається у четвертому та п’ятому семестрах відповідно до навчального плану спеціальності 022 «Дизайн».
Курсова робота
Курсова робота виконується у 5 семестрі з 1 по 14 тиждень згідно графіку навчального процесу. На її виконання відводиться 30 годин індивідуальної роботи здобувача. Оцінювання роботи здійснюється за 100-бальною системою.
Тематика курсової роботи: «Проєктування та розробка веб-сайту заданої предметної області».
Мета курсової роботи – набуття здобувачами практичного досвіду розробки сайту, створення його дизайну та наповнення. Робота повинна підтвердити оволодіння здобувачами теоретичних знань і практичних вмінь з дисципліни «Веб-технології та веб-дизайн», а також прищепити навички самостійної закінченої розробки користувацьких веб-інтерфейсів.
Здобувач отримує завдання на першому лабораторному занятті в 5 семестрі.
Пояснювальна записка містить 30-35 сторінок. Кількість розділів – 3. 
Змістовна послідовність виконання роботи.
Вступ. Формування мети та задач роботи.
Аналіз предметної області.
3.   Формування вимог до інформаційної системи.
4. Розробка концепції.
5. Логічне проєктування. 
6. Фізичне проєктування. 
7. Реалізація проєкту. 
8. Випробування сайту в тестовому режимі.

Захист курсової роботи – протягом останнього навчального тижня п’ятого семестру.

Контрольна робота для здобувачів заочної форми
Завдання для виконання контрольної роботи здобувач отримує на установчій лекції.
Робота містить 5 теоретичних питань та 2 практичних завдання. 
Обсяг відповіді на кожне теоретичне питання: не менше, ніж 2 сторінки машинописного тексту. Текст відповіді повинен бути виконаний самостійно, а не скопійований з навчального посібника. 
Практичне завдання №1. Напишіть код для веб-сторінки, що містить зображення map.jpg та foto.jpg. Фон веб-сторінки "#800080". Зображення map.jpg помістіть у біжучий рядок, що має обмеження висоти 300 пікселів. Зображення foto.jpg помістіть з нового рядка зліва від тексту з довільною інформацією. Відстань між зображенням foto.jpg і текстом становить 15 пікселів, ширина та висота зображення – 400 та 280 пікселів відповідно. Текст вспливаючої підказки при наведенні на зображення: "Це моє фото!". Колір тексту "#ffff00", шрифт "comic sans ms". Практичне завдання №2. Створіть проєкт веб-сторінки у програмному середовищі Figma. Задайте колір фону сторінки та кількох блоків із різною прозорістю. В одному з блоків розмістіть текстовий об’єкт та задайте стиль тексту. Представте налаштування системи шарів та визначте ефекти шарів для різних груп об’єктів.
Термін надання виконаної контрольної роботи на перевірку – не пізніше, ніж за місяць до початку сесії. 

Курсова робота
Курсова робота виконується у 6 семестрі навчання здобувачів заочної форми. На її виконання відводиться 30 годин індивідуальної роботи здобувача. Оцінювання роботи здійснюється за 100-бальною системою.
Тематика курсової роботи: «Проєктування та розробка веб-сайту заданої предметної області».
Мета курсової роботи – набуття здобувачами практичного досвіду розробки сайту, створення його дизайну та наповнення. Робота повинна підтвердити оволодіння здобувачами теоретичних знань і практичних вмінь з дисципліни «Веб-технології та веб-дизайн», а також прищепити навички самостійної закінченої розробки користувацьких веб-інтерфейсів.
Здобувач отримує завдання на першому лабораторному занятті в 5 семестрі.
Пояснювальна записка містить 30-35 сторінок. Кількість розділів – 3. 
Змістовна послідовність виконання роботи.
1. Вступ. Формування мети та задач роботи.
2. Аналіз предметної області.
3. Формування вимог до інформаційної системи.
4. Розробка концепції.
5. Логічне проєктування. 
6. Фізичне проєктування. 
7. Реалізація проєкту. 
8. Випробування сайту в тестовому режимі.

Захист курсової роботи – протягом останнього навчального тижня семестру.

Форми контрольних заходів та оцінювання результатів навчання

Для денної форми здобуття освіти
Поточний контроль полягає у виконанні:
1) курсової роботи. Бездоганне виконання оцінюється у 60 балів. Захист роботи – 40 балів.
4-х модульних контрольних робіт. Модульні контрольні роботи складаються з теоретичної і практичної частин та проводяться у письмовій формі. Бездоганне виконання кожної модульної контрольної роботи становить 20 балів.
виконання та захист лабораторних робіт. Максимально здобувач може набрати до 30 балів кожного семестрового модулю за виконання та захист лабораторних робіт. Підсумковий контроль – екзамен. Екзамен усний. Максимальна оцінка, яку може отримати студент – 100 балів.
Підсумковий контроль знань проводиться для здобувачів вищої освіти, що не змогли з будь-яких причин набрати необхідну кількість балів, або для здобувачів вищої освіти, що бажають збільшити вже набрану кількість балів.  Підсумковий контроль знань здійснюється у вигляді усної бесіди з викладачем (комісією викладачів) по тематиці навчальної дисципліни.

Для заочної форми здобуття освіти
Захист курсової роботи. Бездоганне виконання курсової роботи оцінюється у 60 балів. При її захисті студент може отримати до 40 балів.
Захист контрольної роботи. Бездоганне виконання контрольної роботи оцінюється у 50 балів. При її захисті студент може отримати до 50 балів.
Підсумковий контроль – екзамен. Екзамен усний. Максимальна оцінка, яку може отримати студент – 100 балів.
Підсумковий контроль знань проводиться для здобувачів вищої освіти, що не змогли з будь-яких причин набрати необхідну кількість балів, або для здобувачів вищої освіти, що бажають збільшити вже набрану кількість балів.  Підсумковий контроль знань здійснюється у вигляді усної бесіди з викладачем (комісією викладачів) по тематиці навчальної дисципліни.