Кафедра біомедичної інженерії

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

Робоча програма навчальної дисципліни (Силабус)

Реквізити навчальної дисципліни

Рівень вищої освітиПерший (бакалаврський)
Галузь знань-
Спеціальність
Освітня програмаВсі ОП
Статус дисципліниВибіркова (Ф-каталог)
Форма здобуття вищої освітиОчна
Рік підготовки, семестрДоступно для вибору починаючи з 4-го курсу, весняний семестр
Обсяг дисципліни4 кред. (Лекц. 26 год, Практ. 28 год, Лаб. год, СРС. 66 год )
Семестровий контроль/контрольні заходиЗалік
Розклад занятьhttps://rozklad.kpi.ua
Мова викладанняУкраїнська / Англійська
Інформація про керівника курсу / викладачів Лекц.: Соломін А. В.,
Практ.: Соломін А. В.,
СРС.: Соломін А. В.
Розміщення курсуhttps://do.ipo.kpi.ua/course/view.php?id=2285

Програма навчальної дисципліни

1. Опис навчальної дисципліни, її мета, предмет вивчання та результати навчання

Мета дисципліни

Головною метою навчальної дисципліни «Веб-технології та веб-дизайн» є формування у студентів здатностей проектувати, створювати та супроводжувати сайти, обираючи оптимальні рішення; оперувати базами даних на сервері; проектувати компоненти програмного забезпечення; вільно орієнтуватися в сучасних тенденціях розвитку галузі.

За статистикою більше всього в IT-галузі зростає потреба у фахівцях веб-спеціалізації.

Це пов’язано із все ширшим переходом до віртуального спілкування у всіх сферах: від звичайних сайтів організацій та фізичних осіб до інтернету речей. Веб-технології також широко використову­ються в біомедичній інженерії. Найбільш яскравий приклад – телемедицина, що зараз вважається пріоритетним напрямом в державних програмах.

Предмет дисципліни

Навчальна дисципліна «Веб-технології та веб-дизайн» вивчає комплекс взаємопов’язаних технологій, що застосовуються в процесах створення, підтримки та супроводження веб-сайтів, як важливої складової діджиталізації суспільства.

Оскільки дисципліна „Веб-технології та веб-дизайн” вважається складною в засвоєнні і такою, що дуже стрімко розвивається, а також маючи на увазі вимоги галузевого стандарту і специфіку медико-біологічних застосувань та суттєво неоднорідний характер попередньої підготовки слухачів, при її викладанні передбачено керуватись наступними рекомендаціями.

Методична модель викладання дисципліни заснована на застосуванні активних методів навчання. В основу організації навчального процесу покладені наступні принципи:

- обирання методів викладання залежно від різних чинників, що впливають на організацію учбового процесу, від контингенту студентів;

- об'єднання декількох методів в єдиний викладацький модуль з метою підвищення ефективності процесу навчання;

- активна участь слухачів в учбовому процесі;

- проведення комп’ютерних практикумів, що сприяють оволодінню вміннями і досвідом вирішення проблем;

- наведення прикладів використання теоретичного матеріалу до реальних практичних ситуацій;

- підкреслення особливостей предмету стосовно медичного і біологічного аспектів використання, зацікавлення новими досягненнями і технологіями;

- гнучкий і диференційований підхід до кожного студента з урахуванням ступеню попередньої підготовки;

- прогнозування напрямів розвитку веб-технологій в майбутньому.

Під час навчання та для взаємодії зі студентами використовуються сучасні інформаційно-комунікаційні та мережеві технології, розроблений та постійно вдосконалюється відповідний он-лайн курс на платформі "Сікорський".

Програмні результати навчання:

Загальні компетентності (ОП введено в дію Наказом ректора НОН/75/2022 від 15.02.2022 р.):

ЗК 1 - Здатність застосовувати знання у практичних ситуаціях.

ЗК 2 - Знання та розуміння предметної області та розуміння професійної діяльності.

ЗК 4 - Навички використання інформаційних і комунікаційних технологій.

ЗК 6 - Здатність до пошуку, оброблення та аналізу інформації з різних джерел.

ЗК 7 - Здатність генерувати нові ідеї (креативність).

ЗК 8 - Здатність приймати обґрунтовані рішення.

Спеціальні (фахові) компетентності (ОП введено в дію Наказом ректора НОН/75/2022 від 15.02.2022 р.):

ФК 1 - Здатність застосовувати пакети інженерного програмного забезпечення для проведення досліджень, аналізу, обробки та представлення результатів, а також для автоматизованого проектування медичних приладів та систем.

ФК 3 - Здатність вивчати та застосовувати нові методи та інструменти аналізу, моделювання, проектування та оптимізації медичних приладів і систем.

ФК 7 - Здатність планувати, проектувати, розробляти, встановлювати, експлуатувати, підтримувати, технічно обслуговувати, контролювати і координувати ремонт приладів, обладнання та системи для профілактики, діагностики, лікування і реабілітації, що використовується в лікарнях і науково-дослідних інститутах.

ФК 10 - Здатність застосовувати принципи побудови сучасних автоматизованих систем управління виробництвом медичних приладів, їх технічне, алгоритмічне, інформаційне і програмне забезпечення.

Програмні результатами навчання після вивчення дисципліни «Технологія створення програмних продуктів»  (ОП введено в дію Наказом ректора НОН/75/2022 від 15.02.2022 р.):

Інтегральна компетентність (ІК) -  Здатність розв’язувати складні спеціалізовані задачі та практичні проблеми у біомедичній інженерії або у процесі навчання, що передбачає застосування певних теорій та методів хімічної, біологічної та медичної інженерії, і характеризується комплексністю та невизначеністю умов.

ПРН 5 - Вміти використовувати бази даних, математичне і програмне забезпечення для обробки даних  та комп’ютерного моделювання біотехнічних систем.

ПРН 13 - Вміти аналізувати сигнали, які передаються від органів на прилади, та проводити обробку діагностичної інформації (сигнали та зображення).

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

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

 

2. Пререквізити та постреквізити дисципліни (місце в структурно-логічній схемі навчання за відповідною освітньою програмою)

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

Необхідні знання основ інформатики, об’єктно-орієнтованого програмування, програмного забезпечення.

Отримані практичні навички та засвоєні теоретичні знання під час вивчення навчальної дисципліни «Веб-технології та веб-дизайн» можна використовувати в подальшому при проходженні переддипломної практики, для підготовки дипломних робіт (проектів) за спеціальністю та в подальшій практичній роботі за фахом.

 

3. Зміст навчальної дисципліни

Основні розділи та теми, що розглядатимуться в процесі вивчення курсу:

Розділ 1. Вступ. Сервіси інтернет. Структура і принципи веб. Протоколи інтер­нет. Інтернет-адреси. Доменні зони, IDN. Веб-сервери і веб-клієнти.

Тема 1.1. Історія виникнення і розвитку інтернет. Сервіси в інтернет. Веб, як один із сервісів інтернет. Структура веб. Основні поняття і терміни в веб. Веб-сторінки і веб-сайти..

Тема 1.2. Протоколи в мережевих технологіях. Протоколи в глобальній мережі Інтернет. Порти. Протокол НТТР.

Тема 1.3. Клієнти і сервери. Запити і відповіді. Сеанси. URL. DNS, IDN. Хостінг.

Тема 1.4. Мета і принципи застосування клієнтських та серверних  сценаріїв. Огляд мов клієнтських та серверних  сценаріїв, їх переваги та обмеження.

Розділ 2. Реалізація принци­пів розділення структури, дизайну і контенту сайту в технології CMS.

Тема 2.1. Тенденції сучасного програмування -  розділення структури, дизайну і контенту сайту. Ідеологія СМS/СМF.

Тема 2.2. Структура сучасних СМS, їх можливості та переваги використання.

Тема 2.3. Локальні сервери Денвер, WAMP, MAMP, LAMP, XAMPP, їх інсталяція та налаштування.

Розділ 3. Поширені у веб-середовищі різновиди CMS. Базові засади застосування CMS Joomla.

Тема 3.1. Поширені у веб-середовищі різновиди CMS.

Тема 3.2. Базові засади застосування CMS Joomla.

Тема 3.3. Інсталяція та налаштування CMS Joomla.

Тема 3.4. Шаблони, сторінки, категорії, меню, елементи мультимедіа.

 Розділ 4. Технологія створення веб-сайтів на базі CMS WordPress.

Тема 4.1. Базові засади застосування CMS WordPress.

Тема 4.2. Інсталяція та налаштування CMS WordPress.

Тема 4.3. Теми, сторінки, записи, меню, елементи мультимедіа, розширення.

Розділ 5. Технологія GIT менеджменту версій. Репозиторій GitHub та його використання.

Тема 5.1. Переваги використання систем менеджменту версій.

Тема 5.2. Основи GIT. Розподілений GIT.

Тема 5.3 Інструменти GIT.

Тема 5.4. Репозиторій GitHub.

Розділ 6. Створення об’єк­т­­ної структури сторінок сайту засобами HTML. Особливості і переваги застосування сучас­ної технології HTML5.

Тема 6.1. Планування сайту. Логічна структура сайту. Структурні елементи сторінок. Правила побудови HTML-документів. Теги, їх призначення та правила використання.

Тема 6.2. Фізичне та логічне форматування документів.

Тема 6.3. Головні відмінності, переваги застосування HTML5.

Тема 6.4. Семантичні теги в структурі сайту.

Тема 6.5. Мультимедійні та графічні можливості HTML5.

Розділ 7. Реалізація принци­пу розділення об’єктної структури і дизайну сайту в технології СSS. Особливості і переваги застосування сучасної технології CSS3.

Тема 7.1. Основи CSS. Правила. Селектори CSS.

Тема 7.2. Властивості. Каскадність CSS. Підтримка CSS різними браузерами.

Тема 7.3. Відмінності і переваги використання CSS3 відносно CSS2. Наближення технології CSS3 до можливостей об’єктної моделі сторінки.  

Тема 7.4. Засади побудови мобільних інтерфейсів, медіазапити.

Розділ 8. Клієнтські сце­нарії. Мова JavaScript – основа типової технології клієнтських сценаріїв.

Тема 8.1. Синтаксис JаvаSсгірt.

Тема 8.2. Змінні, оператори..

Тема 8.3. Функції, масиви.

Тема 8.4. Взаємодія з HTML докумен­тами.

Тема 8.5. Нові можливості та перспективи JаvаSсгірt.

Розділ 9. Розширені можли­вості JavaScript. Програмна взаємодія з документами НТМL на основі DOM API

Тема 9.1. Об’єктно-орієнтовні технології JаvаSсгірt.

Тема 9.2. Об’єкти. DOM i BOM.

Тема 9.3. jQuery – приклад плідного використання технології об’єктно-орієнтованого програмування у веб-застосуваннях.

Розділ 10. Сучасні специфікації JavaScript та тенденції універсального використання їх ООП-техноллогії. Сучасна універсальна технологія створення веб-застосувань на базі стеку MEAN

Тема 10.1. Сучасні спеифікації JаvаSсгірt (ECMAScript), strict-режим, надбудови (TypeScript) та особливості їх використання.

Тема 10.2. Нові тенденції розвитку технологій створення веб-застосувань.

Тема 10.3. Mongo, Express, Angular, Node – складові технології стеку MEAN.

Тема 10.4. Переваги і недоліки.

Розділ 11. Огляд мов і технологій серверних сценаріїв для веб-застосувань.

Тема 11.1. Огляд PHP.

Тема 11.2. Змінні, оператори.

Тема 11.3. Взаємодія з HTML документами.

Тема 11.4. Засоби об’єктно-орієнтованого програмування в PHP.

Тема 11.5. Інші технології серверних сценаріїв для веб-застосувань.

Розділ 12. Мова описування схем ХМL та її застосу­вання у веб-технологіях. Форматування і перетворення ХМL-документів за допо­могою СSS та ХSL. ХSLТ-перетворення ХМL-документів.

Тема 12.1. Мова XML.

Тема 12.2. Внутрішні схеми DTD.

Тема 12.3. Простори імен. Елементи. Типи даних. DOM XML.

Тема 12.4. Перетворення ХМL-документів. Форматування і перетворення ХМL-документа з допо­могою СSS та ХSL. ХSLТ перетворення ХМL-документа.

Тема 12.5. Технології обробки ХМL-документів. Фільтрація і сортування даних ХМL. Доступ до атрибутів ХМL.

Комп’ютерний практикум

Основні завдання циклу комп’ютерних практикумів:

- формування вмінь оптимального і ефективного застосування сучасних інформаційних технологій при проектуванні компонентів програмного забезпечення, набування здатностей до використання теоретичних знань в практичній діяльності, практичних навичок роботи з обчислювальною технікою.

Теми практичних робіт:

  1. Інсталяція web-сервера Apache на основі WAMP „Денвер”.
  2. Інсталяція і налаштування локального web-сервера XAMPP.
  3. Інсталяція та базові принципи використання CMS Joomla.
  4. Використання розширених можливостей CMS Joomla для створення складних сайтів.
  5. Інсталяція та базові принципи використання CMS WordPress.
  6. Використання розширених можливостей CMS WordPress для створення складних сайтів.
  7. Створення структури об'єктів сторінок сайту засобами HTML.
  8. Використання каскадних таблиць стилів в дизайні сайтів.
  9. Використання розширених можливостей CSS в дизайні сайту.
  10. Технології CSS та засобів мови JavaScript у web-дизайні.
  11. Технологія клієнтських сценаріїв JavaScript у Web-дизайні.
  12. Використання розширених можливостей технології клієнтських сценаріїв JavaScript у WEB-дизайні.

 

4. Навчальні матеріали та ресурси

Базова література

  1. Соломін А.В. Веб-орієнтована розробка програмного забезпечення: практикум  [Електронний ресурс] : навчальний посібник для студентів спеціальності 122 „Комп’ютерні науки та інформаційні технології” для всіх спеціалізацій / А.В.Соломін; КПІ ім.Ігоря Сікорського. – Електронні текстові данні (1 файл : 2,33 Мбайт). – Київ : КПІ ім.Ігоря Сікорського, 2018 – 131с. –  Режим доступу: http://ela.kpi.ua/handle/123456789/23678.
  2. WEB-технології [Електронний ресурс] : навч. посіб. / Укладач: О. С.  Бунке ;  КПІ  ім.  Ігоря Сікорського.  –  Електронні  текстові  дані  (1  файл:  1,0  Мбайт).  –  Київ : КПІ  ім. Ігоря Сікорського, 2020. – 28 с. Підручник надається студентам в електронному вигляді виклдачем на е-пошту студентів групи.
  3. Fundamentals of Web Programming: Practical Tutorial [Електронний ресурс] : tutorial is aimed at students of the speciality 121 “Software Engineering” (educational program «Software Engineering of Multimedia and Information Retrieval Systems») / Igor Sikorsky Kyiv Polytechnic Institute; Liubov M. Оleshchenko. – Electronic text data (1 file: 4,78 Megabyte). – Kyiv: Igor Sikorsky Kyiv Polytechnic Institute, 2021. – 138 р. Підручник надається студентам в електронному вигляді виклдачем на е-пошту студентів групи.
  4. WEB-технології : навч.-метод. комплекс / Сергій Онищенко. –  Бердянськ : "БДПУ", 2016. – 500 с. Підручник надається студентам в електронному вигляді виклдачем на е-пошту студентів групи.
  5. Цеслів О.В. Основи програмування та веб-дизайн: Навч. посіб. –К., КПІ  ім. Ігоря Сікорського, 2020 –149с. Підручник надається студентам в електронному вигляді виклдачем на е-пошту студентів групи.
  6. Web-програмування. Лабораторний практикум [Електронний ресурс] : навч. посіб. / А. Ю. Шелестов, Н. М. Куссуль; КПІ ім. Ігоря Сікорського. – Електронні текстові дані (1 файл: 1047 Кбайт). – Київ : КПІ ім. Ігоря Сікорського, 2021. – 61 с. Підручник надається студентам в електронному вигляді виклдачем на е-пошту студентів групи.
  7. Scott Chacon, Ben Straub. Pro Git. – APress, 2019. – 549с. – Посібник надається студентам в електронному вигляді виклдачем на е-пошту студентів групи.

Допоміжна література

  1. Алексеев А.П. Введение в Web-дизайн: учебное пособие. – М.: СОЛОН-ПРЕСС, 2008. – 192 с. – Підручник надається студентам в електронному вигляді виклдачем на е-пошту студентів групи.
  2. Ташков П.А. Веб-мастеринг на 100%: HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка. [Електронний ресурс]. – СПб.: Питер, 2010. – 512 с. –  Режим доступу:  http://studylib.com/index.php?newsid=3968#.UXD52b2NDyA
  3. HTML5 и CSS3. Веб-разработка по стандартам нового поколения. 2-е изд. – СПб.: Питер, 2014. – 320 с. – Підручник надається студентам в електронному вигляді виклдачем на е-пошту студентів групи.
  4. Проценко О.Б. Web-програмування та web-дизайн. Технологія XML. Навчальний посібник. [Електронний ресурс]. – Суми: Видавництво СумДУ, 2009. – 127 с. –  Режим доступу:  http://www.essuir.sumdu.edu.ua/bitstream/123456789/1691/1/Procenko111.doc
  5. Бенкен Е.С. AJAX: программирование для Интернета / Е. С. Бенкен, Г. А. Самков –  СПб.: БХВ-Петербург, 2009. – 464 с. – Підручник надається студентам в електронному вигляді виклдачем на е-пошту студентів групи.
  6. Горачев А. Создаем свой сайт на WordPress: быстро, легко и бесплатно. Работа с CMS WordPress 3.— СПб.: Питер, 2011. – 288С. – Підручник надається студентам в електронному вигляді виклдачем на е-пошту студентів групи.
  7. Фримен А. Angular для профессионалов. – СПб.: Питер, 2018. – 800 с. – Підручник надається студентам в електронному вигляді виклдачем на е-пошту студентів групи.
  8. Холмс С. Стек MEAN. Mongo, Express, Angular, Node. – СПб.: Питер, 2017. – 496 с. – Підручник надається студентам в електронному вигляді виклдачем на е-пошту студентів групи.
  9. Росс В. С. Создание сайтов: HTML, CSS, PHP, MySQL. Учебное пособие. [Електронний ресурс]. – МГДД(Ю)Т, М.:2010. – 107с. – Режим доступу: http://www.ict.edu.ru/ft/006168/ross.pdf
  10. Кудряшев А..В., Светашков П..А. Введение в современные веб-технологии. [Електронний ресурс]. – М.: Intuie.ru, 2010. – 241 с. –  Режим доступу:

 http://studylib.com/index.php?newsid=1733#.UXD1ib2NDyA

Інформаційні ресурси

1. Підручник HTML. –  Режим доступу: http://on-line-teaching.com/html/2.

2. Підручник javascript. –  Режим доступу: http://javascript.ru/.

3. Бібліотека jquery.  –  http://jquery.com/

4. Електронний кампус. – login.kpi.ua

5. Платформа Сікорський – https://do.ipo.kpi.ua/course/view.php?id=2285

В переліку інформаційних ресурсів наведено джерела їх отримання.

 

Навчальний контент

5. Методика опанування навчальної дисципліни (освітнього компонента)

№ з/п

 

Тема

Програмні

результати

навчання

Основні завдання

Контрольний

захід

Термін

виконання

1.

Тема 1. Вступ. Сервіси інтернет. Структура і принципи веб. Протоколи інтер­нет. Інтернет-адреси. Доменні зони, IDN. Веб-сервери і веб-клієнти

ПРН 5, 14, 20

Практична робота 1

 

1-й тиждень

2.

Тема 2. Реалізація принци­пів розділення структури, дизайну і контенту сайту в технології CMS

ПРН 5, 13, 14, 20

Практична робота 2

1-й тиждень

3.

Тема 3. Поширені у веб-середовищі різновиди CMS. Базові засади застосування CMS Joomla

ПРН 5, 13, 14, 20

Практична робота 3

2-й тиждень

4.

Тема 4. Технологія створення веб-сайтів на базі CMS WordPress

ПРН 5, 13, 14, 20

Практична робота 4

2-й тиждень

5.

Тема 5. Технологія GIT менеджменту версій. Репозитарій GitHub та його використання

ПРН 5, 13, 14, 20

Практична робота 5

3-й тиждень

6.

Тема 6. Створення об’єк­т­­ної структури сторінок сайту засобами HTML.

Особливості і пере­ваги застосування сучас­ної технології HTML5

ПРН 5, 13, 14, 20

Практична робота 6

3-й тиждень

7.

Тема 7. Реалізація принци­пу розділення об’єктної структури і дизайну сайту в технології СSS. Особливості і переваги застосування сучасної технології CSS3

ПРН 5, 13, 14, 20

Практична робота 7

4-й тиждень

8.

Тема 8. Клієнтські сце­нарії. Мова JavaScript – основа типової технології клієнтських сценаріїв

ПРН 5, 13, 14, 20

Практична робота 8

4-й тиждень

9.

Тема 9. Розширені можли­вості JavaScript. Програмна взаємодія з документами НТМL на основі DOM API

ПРН 5, 13, 14, 20

Практична робота 9

5-й тиждень

10

Тема 10. Сучасні специфікації JavaScript та тенденції універсального використання їх ООП-техноллогії. Сучасна універсальна технологія створення веб-застосувань на базі стеку MEAN

ПРН 5, 13, 14, 20

Практична робота 10

5-й тиждень

11

Тема 11.  Огляд мов і технологій серверних сценаріїв для веб-застосувань

ПРН 5, 13, 14, 20

Практична робота 11

6-й тиждень

12

Тема 12. Мова описування схем ХМL та її застосу­вання у веб-технологіях. Форма­ту­вання і перетворення ХМL-документів за допо­могою СSS та ХSL. ХSLТ-перетво­рен­ня ХМL-документів

ПРН 5, 13, 14, 20

Практична робота 12

6-й тиждень

13

Модульна контрольна робота

ПРН 5, 13, 14, 20

МКР

7-й тиждень

14

Залік

ПРН 5, 13, 14, 20

Підсумки

8-й тиждень

Платформа дистанційного навчання:

Для більш ефективної комунікації з метою розуміння структури навчальної дисципліни «Веб-технології та веб-дизайн» і засвоєння матеріалу використовується електронна пошта, телеграм-канал, платформа дистанційного навчання "Сікорський" на основі системи Moodle КПІ-Телеком та сервіс для проведення онлайн-нарад Zoom, за допомогою яких:

- підвищується оперативність спілкування зі студентами, забезпечується зручний зворотній зв’язок;

- спрощується розміщення, доступ та обмін навчальним матеріалом;

- оцінюються навчальні завдання студентів;

- аналізується активність студентів.

 

6. Самостійна робота студента

Заплановано наступні види самостійної роботи: підготовка до аудиторних занять, обробка результатів практичних робіт та оформлення звіту, підготовка до модульної контрольної роботи, виконання реферату. Всього на самостійну роботу заплановано 66 годин.

Одним з основних видів семестрового контролю під час опанування навчальної дисципліни «Веб-технології та веб-дизайн» є підготовка реферату. Реферат виконується згідно з вимогами, у термін, зазначений викладачем. Методичні рекомендації до виконання реферату наведено в Додатку 1.

Додаток 1

до силабусу дисципліни «Веб-технології та веб-дизайн»

Методичні рекомендації по виконанню індивідуального завдання

(реферат)

В семестрі заплановане індивідуальне семестрове завдання – реферат, що виконується під час самостійної роботи студентів (СРС) і передбачає самостійне виконання студентом певної практичної роботи на основі засвоєного теоретичного матеріалу.

Мета індивідуального завдання полягає у поглибленому вивченні студентами ок­ре­мих розділів навчальної програми, в набуванні вмінь і досвіду практичного засто­су­ван­ня одержаних знань, в додатковому контролі і самоконтролі якості навчального про­цесу. Кожний студент повинен самостійно виконати реферат, виявивши при цьому вміння розробляти струк­ту­ру та дизайн, проектувати та створювати сайт, обирати оптимальні для завдання технології, налаштовувати та супроводжувати програмний продукт, викори­стовуючи засвоєні теоретичні знання та набуті здатності до практичної діяльності.

Зміст завдання полягає в створенні кожним студентом та розміщенні на локальному сервері або безкоштовному хості сайту, наприклад, власного сайту-резюме-портфоліо (але не обов’язково, – тематика вільна; наприклад, може бути якийсь он-лайн підручник, каталог тур. агентства, про факультет або спеціальність, про якогось співака або футболіста і т.п.). Якщо обирається за тематикою сайт-резюме-портфоліо, то його мета – сприяти в подальшому працевлаштуванню. В цьому випадку сайт має містити сторінки автобіографії, наукових інтересів та досягнень під час навчання та теми дипломної роботи, захоплень та планів на майбутнє, а також побажань щодо майбутньої роботи після закінчення ВНЗ.

Сайт повинен включати клієнтські та серверні сценарії, можливість надсилання повідомлень адміністратору, коментарів, галереї малюнків, відео, RSS, кілька віджетів, тощо. Крім власне сайту кожному студенту треба надати пояснювальну записку з аналізом та обґрунтуванням застосованих технологій та дизайнерських рішень, що містить структуру сайту з коментарями, скріншоти, а також результати тестування для різних браузерів.

Створений сайт демонструється в один із зазначених способів:

  • показується на ноутбуці студента (якщо закінчиться карантин);
  • розміщується на безкоштовному хостингу;
  • у зв’язку з карантином можлива демонстрація у вигляді детальних послідовних скріншотів в пояснювальній записці.

Пояснювальна записка, що є обов’язковою складовою виконаної роботи, повинна містити:

  • титульну сторінку (зразок додається);
  • вступ згідно загальних вимог до науково-технічних документів, тобто з висвітленням мети, поставлених завдань, методів і інструментів вирішення;
  • основна частина з поясненням структури сайту, структурних елементів,  застосованих технологій, елементів дизайну, навігації на сайті, чому саме обрані такі технології і елементи, з вмістом скріншотів, результатів тестування;
  • висновки з аналізом ступеню та оптимальності методів досягнення мети і виконання поставлених завдань.

(Обсяг рекомендується приблизно 1 авторський аркуш, тобто приблизно 20 с. формату А4. Якщо дистанційний режим занять не закінчиться, то роздруковувати не треба, а лише надіслати в електронному вигляді у word-документі).

Критерії оцінювання реферату

1) Загальний дизайн сайту, естетичність вигляду, зручність навігації та доступність всіх сторінок сайту.

2) Якість контенту, розподіл інформації між сторінками сайту, звертання уваги корис­тувачів на пріоритетні теми.

3)  Використання класифікації матеріалів за категоріями, управління прав доступу авторів і користувачів, зручні та ефективні меню, ключові слова і сприяння індексації пошуковими системами, редагування (власний дизайн) шаблонів і стилів, використання кількох різних модулів.

4) Якість змісту пояснювальної записки – пояснення структури сайту, структурних елементів, застосованих технологій, елементів дизайну, навігації на сайті, чому саме обрані такі технології і елементи. Оформлення вступу і висновків пояснювальної записки згідно загальних вимог до науково-технічних документів.

Вступу і висновкам приділяється особлива увага при оцінюванні, оскільки це стосується якості будь-яких науково-технічних публікацій, у тому числі дипломних робіт, а оформлення реферату можна вважати тренінгом в цьому сенсі.

Загальна схема побудови вступу і висновків будь-якої науково-технічної публікації наступна.

У вступі має бути:

  • Актуальність проблеми, яка зумовила вибір теми роботи, коротко викладена передісторія питання за хронологічним чи концептуальним принципом.
  • Мета роботи.
  • У відповідності з метою ставляться такі завдання (формулюються задачі):

       1)…

       2)…

       3)…

  • Методи і технології виконання роботи.

Побудова вступу схематично виглядає таким чином:

- у розділі „актуальність” на основі передісторії обґрунтовується актуальність теми роботи, тобто виявляється її потенціальна корисність;

- у розділі „мета” формулюється мета роботи, тобто що планується досягти в результаті виконання роботи для реалізації сформульованої потенціальної корисності;

- у розділі „завдання” ставиться кілька завдань, поетапне вирішення яких забезпечить досягнення сформульованої мети.

Слід зазначити, що висновки до роботи будуються в подібному ж порядку, тобто зазначається, що мета (з вступної частини) досягнута (повністю чи в якій мірі з коротким аналізом) шляхом вирішення поставлених завдань такими-то методами чи засобами (треба окремо висвітити кожне завдання). Далі аналізується практична значимість, рекомендації щодо подальшої роботи в цьому напрямі.

 

Політика та контроль

7. Політика навчальної дисципліни (освітнього компонента)

Відвідування занять

Відвідування лекційних занять не є обов’язковими, але бажаними, оскільки саме через оволодіння лекційного матеріалу формуються системні компетенції, які потім закріплюються на практичних заняттях.

Система оцінювання орієнтована на отримання балів за активність студента, а також виконання завдань, які здатні розвинути практичні уміння та навички.

Пропущене практичне заняття можна виконати і захистити на протязі тижня без штрафних балів (можливий дистанційний варіант). Інакше застосовується штрафний бал «-1».

Пропущені контрольні заходи

Пропущені контрольні заходи (захист практичних робіт) обов’язково відпрацьовуються на наступних заняттях за умови виконання завдання, яке заплановано на поточному занятті, або на консультаціях.

Пропущений контрольний захід (МКР) можна виконати на додатковому (консультаційному) занятті, але тільки у випадку пропуску з поважних причин.

Реферат, який подається на перевірку з порушенням терміну виконання, оцінюється зі зменшенням кількості вагових балів

Порушення термінів виконання завдань та заохочувальні бали

Заохочувальні бали

Штрафні бали

Критерій

Ваговий бал

Критерій

Ваговий бал

Виконання практичних робіт

5

(за кожну практичну роботу)

Порушення термінів виконання практичних робіт (за кожну таку роботу)

-1

Використання нових технологій, не передбачених в навчальній програмі, при виконанні реферату і практичних робіт

+1

Порушення термінів виконання реферату (не пізніше, ніж за 10 днів до закінчення семестру)  

-1 бал

за кожен день

Проходження додаткових дистанційних курсів за темами, які погоджено з викладачами

+5

 

 

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

+10

 

 

Написання тез, статті, участь у міжнародних, всеукраїнських та/або інших заходах або конкурсах за тематикою навчальної дисципліни

+5

 

 

* якщо контрольний захід був пропущений з поважної причини (хвороба, яка підтверджена довідкою встановленого зразку) – штрафні бали не нараховуються.

Академічна доброчесність

Політика та принципи академічної доброчесності визначені у розділі 3 Кодексу честі Національного технічного університету України «Київський політехнічний інститут імені Ігоря Сікорського». Детальніше: https://kpi.ua/code.

Норми етичної поведінки

Норми етичної поведінки студентів і працівників визначені у розділі 2 Кодексу честі Національного технічного університету України «Київський політехнічний  інститут  імені  Ігоря Сікорського». Детальніше: https://kpi.ua/code.

Процедура оскарження результатів контрольних заходів

Студенти мають можливість підняти будь-яке питання, яке стосується процедури контрольних заходів та очікувати, що воно буде розглянуто згідно із наперед визначеними процедурами.

Студент має право оскаржити результати контрольного заходу згідно затвердженого положення Про апеляції в КПІ імені Ігоря Сікорського (затверджено наказом №НОН/128/2021 від 20.05.2021 р.) - https://osvita.kpi.ua/index.php/node/182

Інклюзивне навчання

Навчальна дисципліна «Веб-технології та веб-дизайн» може викладатися для більшості студентів з особливими освітніми потребами, окрім студентів з серйозними вадами зору, які не дозволяють виконувати завдання за допомогою персональних комп’ютерів, ноутбуків та/або інших технічних засобів.

Дистанційне навчання

Дистанційне навчання відбувається через Платформу дистанційного навчання «Сікорський». Дистанційне навчання через проходження додаткових он-лайн курсів за певною тематикою допускається за умови погодження зі студентами. У разі, якщо невелика кількість студентів має бажання пройти он-лайн курс за певною тематикою, вивчення матеріалу за допомогою таких курсів допускається, але студенти повинні виконати всі завдання, які передбачені у навчальній дисципліні.

Список курсів пропонується викладачем після виявлення бажання студентами (оскільки банк доступних курсів поновлюється майже щомісяця).

Студент надає документ, що підтверджує проходження дистанційного курсу (у разі проходження повного курсу) або надає виконані практичні завдання з дистанційного курсу та за умови проходження усної співбесіди з викладачем за пройденими темами може отримати оцінки за контрольні заходи, які передбачені за вивченими темами. Виконання практичних робіт, а також виконання реферату, здійснюється під час самостійної роботи студентів у дистанційному режимі (з можливістю консультування з викладачем через електронну пошту, соціальні мережі).

Навчання іноземною мовою

Навчання англійською мовою здійснюється лише для студентів-іноземців.

За бажанням студентів, допускається вивчення матеріалу за допомогою англомовних онлайн-курсів за тематикою, яка відповідає тематиці конкретних занять.

 

8. Види контролю та рейтингова система оцінювання результатів навчання (РСО)

Види контролю та бали за кожен елемент контролю:

з/п

Контрольний захід

%

Ваговий

бал

Кіл-ть

Всього

1.

Практична робота

60

5

12

60

2.

Реферат

20

20

1

20

3.

Модульна контрольна робота

20

20

1

20

 

Всього

100

Результати оголошуються кожному студенту окремо у присутності або в дистанційній формі (на платформі Сікорський або е-поштою)

з/п

Реферат

%

Ваговий

бал

Кіл-ть

Всього

1.

Загальний дизайн створеного сайту

25

5

1

5

2.

Якість контенту сайту

25

5

1

5

3.

Якість коду сторінок, клієнтських та серверних сценаріїв (або використання плагінів у випадку CMS)

25

5

1

5

4.

Якість змісту і оформлення пояснювальної записки

25

5

1

5

 

Всього

20

 

з/п

Модульна контрольна робота

%

Ваговий

бал

Кіл-ть

Всього

1.

Повна і вичерпна відповідь (не менше 90% потрібної інформації)

100

4

5

20

2.

Несуттєві помилки у відповіді (не менше 75% потрібної інформації)

75

3

5

 

3.

Є недоліки у відповіді та певні помилки (не менше 60% потрібної інформації)

60

2,5

5

 

4.

Відповідь відсутня або не правильна

0

0

5

 

 

Максимальна кількість балів

20

 

У разі виявлення академічної не доброчесності під час дистанційного навчання – контрольний захід не враховується, студент до захисту не допускається.

Календарний контроль (КК) - Для студентів 4-го курсу не проводиться.

Семестрова атестація студентів

Обов’язкова умова допуску до заліку

Критерій

1

Поточний рейтинг

RD ≥ 60

2

Виконання  практичних робіт

Захист практичних робіт

3

Виконання  реферату

Захист реферату

Таблиця відповідності рейтингових балів оцінкам за університетською шкалою
Кількість балівОцінка
100-95Відмінно
94-85Дуже добре
84-75Добре
74-65Задовільно
64-60Достатньо
Менше 60Незадовільно
Не виконані умови допускуНе допущено

9. Додаткова інформація з дисципліни (освітнього компонента)

Перелік запитань для підготовки до модульної контрольної роботи, а також для підготовки до заліку наведено у додатку 2.

Дистанційне навчання через проходження додаткових он-лайн курсів за певною тематикою допускається за умови погодження зі студентами. У разі, якщо невелика кількість студентів має бажання пройти он-лайн курс за певною тематикою, вивчення матеріалу за допомогою таких курсів допускається, але студенти повинні виконати всі завдання, які передбачені у навчальній дисципліні. Список курсів пропонується викладачем після виявлення бажання студентами (оскільки банк доступних курсів поновлюється майже щомісяця). Студент надає документ, що підтверджує проходження дистанційного курсу (у разі проходження повного курсу) або надає виконані практичні завдання з дистанційного курсу та за умови проходження усної співбесіди з викладачем за пройденими темами може отримати оцінки за контрольні заходи, які передбачені за вивченими темами.

Додаток 2

до силабусу дисципліни «Веб-технології та веб-дизайн»

Перелік запитань для підготовки до модульної контрольної роботи, а також для підготовки до заліку

Тематика 1.  Основи веб

Які Ви знаєте сервіси інтернету?

Що таке протоколи обміну даними і які Ви знаєте протоколи в інтернеті?

Що таке URL ? Структура повного URL і призначення всіх його полів.

Які принципи побудови IDN (Internationalized Domain Names)? Що таке Punycode?.

Що таке HTTP, FTP, SMTP, POP3 ? Описати.

Що таке тег <!DOCTYPE>? Описати його повний синтаксис (структуру) та призначення полів.

Пояснити призначення серверних сценаріїв веб? Описати відомі Вам мови серверних сценаріїв.

Пояснити призначення клієнтських сценаріїв веб? Описати відомі Вам мови та засоби клієнтських сценаріїв..

Описати структуру доменних імен. Що таке DNS? Описати роботу DNS-сервера. Що таке кореневі сервери?

Описати призначення та основні принципи «трьох китів веб»: TCP/IP, HTTP, HTML.

Що таке MIME? Приклади.

Пояснити основні відмінності HTML5 від більш ранніх версій.

Тематика 2.  Веб-дизайн

Методи додавання стилів (CSS) на веб-сторінку.

Як Ви розумієте каскадність в каскадних таблицях стилів (CSS)? Пріоритети CSS при одночасному застосуванні різних стилів до одного елементу.

Синтаксис CSS.

Що таке селектори в CSS і які є типи селекторів?

Що таке контекстні селектори в CSS (для вкладених тегів) і як вони позначаються ?

Що таке дочірні та суміжні селектори в CSS та їх відмінність від контекстних? Приклади.

Що таке селектори типу Класи в CSS і як вони позначаються ?

Що таке псевдокласи в CSS ? Наведіть приклади.

Як і для чого використовуються атрибути float и clear для блочних елементів веб-сторінки?

Пояснити основні відмінності CSS3 від більш ранніх версій.

Тематика 3.  Основи XML.

Що таке кореневий елемент в XML і в якій частині XML-документа ця інформація записується? Звідки аналізатор починає аналіз XML-документа?

Яким чином забезпечена в XML можливість використання імен тегів, придуманих проектантом?  Звідки XML-аналізатори отримують інформацію про ці імена і правила їх використання?

Що таке секції CDATA в XML ?

Синтаксис мови XML.

Принципи використання XSL-таблиць стилів та XSLT.

DOM XML. Перетворення XML-документів.

Внутрішні схеми DTD.

Що таке і для чого служить механізм Namespaces в стандарті XML ?

Що позначає кожне поле в цих XML записах: <?xml version="1.0"?>

               <!DOCTYPE hello SYSTEM "hello.dtd">

Що означає в XML запис:     <!ELEMENT hello (title, body)>

                                                                       <!ELEMENT title (#PCDATA)>

                                                                       <!ELEMENT body (#PCDATA)>

Тематика 4.  Веб-програмування (клієнтські сценарії)

Опишіть всі методи пов’язування (вбудовування) JavaScript-кода з HTML-документом і якими способами JavaScript-код може бути запущений на виконання.

Що таке колекція в JavaScript та чим вона відрізняється від масива? Які Ви знаєте колекції об’єкту Document?

Поняття об'єктної моделі документа (DOM) в JavaScript – пояснити ідею і будову DOM.

Властивості, методи і події для об'єктів в JavaScript – як використовуються у веб-сценаріях.

Для чого служить об'єкт Math в JavaScript ?

Для чого служить об'єкт Date в JavaScript ?

Яким чином можна передавати функції в JavaScript змінне число аргументів ? Що таке об’єкт arguments?

Опишіть ідеї створення анімації в JavaScript.

Описати основні принципи використання CMS (Content management system) в веб. Навести приклади CMS.

Тематика 5. Задача.

Опис матеріально-технічного та інформаційного забезпечення дисципліни

Навчальна та робоча програми дисципліни, РСО, навчальний посібник (електронне видання), силабус, онлайн-курс у Moodle, практичні заняття, лабораторний практикум URL: https://do.ipo.kpi.ua




Робочу програму навчальної дисципліни (силабус):
Складено Соломін А. В.;
Ухвалено кафедрою БМІ (протокол № 1 від 31.08.2023р. )
Погоджено методичною комісією факультету/ННІ (протокол № 1 від 01.09.2023р. )