ПРОГРАМУВАННЯ-ІНТЕРНЕТ

Мета: освоїти основи сучасних технології створення веб-програм – мову розмітки гіпертексту HTML, мову опису зовнішнього вигляду документа  CSS, мову веб-програмування на стороні клієнта JavaScript та мікро-веб-фреймворки (Flask, Bottle) для веб-програмування на стороні сервера мовою Python.

Завдання: зрозуміти основні принципи веб-програмування на стороні клієнта і стороні сервера; вміти створювати і розгортати веб-програми за допомогою мікро веб-фреймворків мови Python (Flask, Bottle).

У результаті вивчення навчальної дисципліни студент повинен

знати:

  • знати принципи роботи веб і основи протоколу HTTP;
  • знати основи мови розмітки гіпертексту HTML та мови опису зовнішнього вигляду документа CSS;
  • знати основи мови JavaScript для веб-програмування на стороні клієнта;
  • знати основи мікро-веб-фреймворків (Flask, Bottle) для веб-програмування на стороні сервера;

 вміти:

  • вміти створювати статичні і динамічні веб-сайти мовами HTML, CSS, JavaScript;
  • вміти створювати веб-програми на сторонах клієнта і сервера за допомогою JavaScript та Python.
  • Дисципліни, вивчення яких обов’язково передує цій дисципліні:“Іноземна мова”, “Інформаційні технології”, “Вступ до спеціальності”, “Вища математика”, “Дискретна математика”, “Основи програмування”,  “Алгоритми та структури даних”, “Об’єктно-орієнтоване програмування”, “Комп’ютерні системи та мережі”, “Захист інформації в комп’ютерних системах”, “Основи WEB-дизайну”.

     Міжпредметні зв’язки:

    “Архітектура та проектування програмного забезпечення”, “Інженерія програмного забезпечення”, “Моделювання та конструювання програмного забезпечкння”, “Системний аналіз та проектування інформаційних систем”, “Паралельні та розподілені обчислення”, “Програмування в системах мобільного зв’язку”, “Якість та тестування програмного забезпечення”.

     Змістовий модуль 1. Мова HTML

     Тема 1. Всесвітнє павутиння World Wide Web

    WWW – гіпертекстова, гіпермедійна, розподілена, інтегруюча, глобальна мережа. Основні поняття – веб-сервер, веб-клієнт, HTTP , гіпермедійний документ, HTML, браузер, гіперпосилання, URL. Принципи роботи. Історія. Безпека. Регулювання вебу.

    Тема 2. Веб-програмування

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

    Тема 3. Основи мови розмітки гіпертексту HTML

    Історія розвитку HTML. Версії HTML. Документ HTML. Розмітка. Загальна структура. Елементи і їх атрибути. Базові типи даних. Мнемоніки. Валідація HTML.

    Тема 4. Розмітка тексту в HTML

    Абзаци, заголовки, списки, інші елементи контенту, організація контенту сторінки, вбудовані елементи, загальні елементи (div, span), спеціальні символи.

    Тема 5. Посилання в HTML

    Атрибут href, посилання на веб-сторінки інших сайтів, посилання на веб-сторінки власного сайту, відкриті посилання в новій вкладці або вікні браузера, посилання на адресу електронної пошти, посилання на номер телефону.

    Тема 6. Зображення та таблиці в HTML

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

    Тема 7. Форми в HTML

    Елемент form, змінні і їх вміст, огляд елементів форм, забезпечення доступності форм, макет і дизайн форм.

     

    Тема 8. Основи HTML5

    Особливості розмітки, API-інтерфейси в специфікації HTML5, відео і аудіо контент, рисування засобами HTML5.

     

    Змістовий модуль 2. Мова CSS

     

    Тема 9. Основи каскадних таблиць стилів CSS

    Принципи CSS і основні поняття, переваги, можливості.

     

    Тема 10. Форматування тексту в CSS

    Властивості шрифту, зміна кольору тексту, ще кілька типів селекторів, вирівнювання рядків тексту, підкреслення і інші декоративні ефекти, зміна регістра, кернінг і інтервал між словами, тінь тексту, зміна маркерів і нумерації списків.

    Тема 11. Колір і фон в CSS

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

     

    Тема 12. Блокова модель CSS (відступи, границі і поля)

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

     

    Тема 13. Обтікання і позиціонування в CSS

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

     

    Тема 14. Макети сторінок засобами CSS

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

    Тема 15. Переходи, перетворення і анімація

    CSS-переходи, CSS-перетворення, анімація за ключовими кадрами.

     

    Тема 16. Технічні прийоми CSS

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

     

    Змістовий модуль 3. Веб-програмування на стороні клієнта мовою JavaScript

     

    Тема 17. Основні поняття JavaScript

    Коротка історія JavaScript. Реалізації JаvаSсriрt. ECMAScript. Об’єктна модель документа. Об’єктна модель браузера. Версії JavaScript.

    Тема 18. JavaScript в HTML

    Елемент <script> (розташування тегів, відкладені сценарії, асинхронні сценарії, зміни в XHTML, застарілий синтаксис). Вбудований код або зовнішні файли? Режими документа. Елемент <noscript>.

    Тема 19. Основи мови JavaScript

    Синтаксис (чутливість до регістру, ідентифікатори, коментарі, строгий режим, інструкції). Ключові і зарезервовані слова. Змінні. Типи даних (оператор typeof, типи Undefined, Null, boolean, number, string, Object). Оператори (унарні оператори, порозрядні оператори, логічні оператори, мультиплікативні оператори, оператори додавання і віднімання, оператори відношення, оператори еквівалентності, умовний оператор, оператори присвоювання, оператор “кома”). Інструкції (if, do-while, while, for, for-in, мітки інструкцій, інструкції break і continue, інструкція with, інструкція switch). Функції (аргументи функцій, ніякого перевантаження).

    Тема 20. Змінні, область видимості і пам’ять

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

    Тема 21. Посилальні типи

    Тип Object. Тип Array (ідентифікація масивів, методи перетворення масивів, методи для роботи з масивом як зі стеком, методи для роботи з масивом як з чергою, методи зміни порядку розташування елементів, методи маніпулювання елементами, методи пошуку елементів, методи перебору елементів, методи редукції масивів). Тип Date (успадковані методи, методи форматування дат,. методи для роботи з компонентами дати / часу). Тип RegExp (властивості екземпляра RegExp, методи екземпляра RegExp, властивості конструктора RegExp, обмеження шаблонів). Тип Function (ніякого перевантаження – новий погляд, оголошення функцій і функції-вирази, функції як значення, усередині функцій, властивості і методи функцій). Оболонки примітивних типів (тип Boolean, тип Number, тип String). Вбудовані поодинокі об’єкти (об’єкт Global, об’єкт Math).

    Тема 22. Об’єктно-орієнтоване програмування

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

    Тема 23. Функції-вирази

    Рекурсія. Замикання (замикання і змінні, об’єкт this, витоки пам’яті). Закриті змінні (статичні закриті змінні, патерн Модуль, розширений патерн Модуль).

    Тема 24. Об’єктна модель браузера

    Об’єкт window (глобальний контекст, відношення вікон і фреймів, розташування вікна, розміри вікна, відкриття вікон і навігація, інтервали і тайм-аути, системні діалогові вікна). Об’єкт location (аргументи рядка запиту, робота з об’єктом location). Об’єкт navigator (виявлення модулів, реєстрація обробників). Об’єкт scгeen. Об’єкт history.

    Тема 25. Розпізнавання клієнта

    Розпізнавання можливостей (надійне розпізнавання можливостей, розпізнавання можливостей – НЕ розпізнавання браузера). Розпізнавання особливостей. Розпізнавання агента користувача (історія, ідентифікація користувача агента, повний сценарій, використання сценарію).

    Тема 26. Об’єктна модель документа

    Ієрархія вузлів (тип Node, тип Document, тип Element, тип Text, тип Comment, тип CDATASection, тип DocumentType, тип DocumentFragment, тип Attr). Робота з DOM (динамічні сценарії, динамічні стилі, робота з таблицями, використання об’єктів NodeList).

    Тема 27. Розширення DOM

    Selectors (метод querySelector(), метод querySelectorAll(), метод matchesSelector()). Element Traversal. HTML5 (нові засоби роботи з класами, управління фокусом, зміни типу HTMLDocument, властивості кодування, атрибути даних, вставка розмітки, метод scrollintoView ()). Фірмові розширення (режим документа, властивість children, метод contains(), вставка розмітки, прокрутка).

    Тема 28. DOM Level 2 і 3

    Зміни DOM (XМL-простір імен, інші зміни). Стилі (доступ до стилів елементів, робота з таблицями стилів, розміри елементів). Обхід (тип Nodelterator, тип Tree Walker). Діапазони (діапазони в DOM, діапазони в Internet Explorer 8 і більш ранніх версій).

    Тема 29. Події

    Поширення подій. (спливання подій, перехоплення подій, поширення DОМ-подій). Обробники подій. (HТМL-обробники подій, обробники подій DOM Level 0, обробники подій DO М Level 2, обробники подій в Internet Explorer, кросбраузерні обробники подій). Об’єкт event (об’єкт event в DOM, об’єкт event в Internet Explorer, кросбраузерний об’єкт event). Типи подій (події призначеного для користувача інтерфейсу, події зміни фокусу, події миші і коліщатка миші, події клавіатури і редагування тексту, події композиції, події зміни DOМ-структури, події HTML5, події пристроїв, події торкань і жестів). Пам’ять і швидкодія (делегування подій, видалення обробників подій). Імітація подій ( імітація DOМ-подій, імітація подій в Internet Explorer).

    Тема 30. Робота з формами

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

    Тема 31. Рисування на полотні

    Основи роботи з елементом <canvas>. Двомірний контекст (заливка і рисування контуру, рисування прямокутників, рисування шляхів, рисування тексту, перетворення, рисування зображень, тіні, градієнти, візерунки, робота з даними зображень, композиція зображень). WebGL (типізовані масиви, контекст WebGL).

    Тема 32. HTML5 та JavaScript

    Передача повідомлень між документами. Вбудована підтримка перетягування (події перетягування, призначені для користувача цільові елементи для даних, об’єкт dataTransfer, властивості dropEffect і effectAllowed, можливість перетягування, додаткові члени). Елементи для медіафайлів (властивості, події, призначені для користувача плеєри, розпізнавання кодеків, тип Audio). Управління станом журналу.