spinner-it

Програмування в HTML5 з JavaScript і CSS3

Мета курсу — надати слухачам знання та навички розробки Windows Store і веб-додатків з використанням HTML5/CSS3/JavaScript, познайомити з принципами створення програмних компонентів і структур, які використовуються в додатках на HTML5. Курс сфокусований на принципах побудови програмної логіки, визначенні і використанні змінних, написанні циклів і розгалужень, розробці користувацьких інтерфейсів, обробці даних, що вводяться, їх зберіганні, розробці структурованих додатків на базі HTML5/CSS3/JavaScript. Практичні роботи виконуються з використанням Visual Studio 2012 на платформі Windows 8.

 

Аудиторія
Цей курс призначений для розробників з досвідом більше 6 місяців, які бажають вивчити принципи створення додатків на HTML5 з JavaScript і CSS3, розвинути навички розробки веб-додатків під IE10 і Windows Store. Курс не вимагає знання HTML5, цілком достатньо деякого досвіду використання HTML4.

 

Після закінчення курсу слухачі зможуть:

  • Використовувати Visual Studio 2012 для створення Windows Store і веб-додатків;
  • Описати нові функції HTML5, створювати сторінки в стилі HTML5;
  • Додавати інтерактивні сторінки HTML5 з використанням JavaScript;
  • Створювати форми HTML5, використовуючи різні типи введення, перевіряти вводяться користувачем дані за допомогою атрибутів HTML5 та коду JavaScript;
  • Відправляти і отримувати дані віддалено за допомогою об'єктів XMLHTTPRequest і методу ajax-бібліотеки jQuery;
  • Налаштовувати стиль HTML5-сторінок за допомогою нових можливостей CSS3;
  • Створювати структурований і легкий в супроводі код на JavaScript;
    Використовувати нові можливості JavaScript API в інтерактивних веб-додатках;
  • Створювати веб-додатки, що підтримують зберігання даних на стороні клієнта (offline-режим);
  • Створювати веб-сторінки HTML5, здатні адаптуватися до різних видів пристроїв і форм-факторів;
  • Виводити графіку засобами HTML5, використовуючи елементи Canvas і масштабовану векторну графіку SVG;
  • Підвищити зручність інтерфейсу користувача, використовуючи анімацію на сторінках HTML5;
  • Використовувати нові можливості Web Sockets API для передачі і прийому даних між веб-додатком і сервером;
  • Зробити більш ефективною роботу додатків виробляють тривалі операції, використовуючи Web Worker.

Модуль 1: Огляд HTML і CSS

Теми

  • Огляд HTML
  • Огляд CSS
  • Створення веб-додатків за допомогою Visual Studio 2012

Лабораторна робота: Аналіз програми Contoso Conference

  • Покрокове вивчення програми управління конференціями «Contoso Conference»
  • Аналіз і модифікація додатку

Після закінчення цього модуля слухачі зможуть:

  • Описати основні елементи та атрибути HTML
  • Пояснити структуру CSS
  • Описати інструменти, доступні в Visual Studio 2012 для створення веб-додатків

Модуль 2: створення і стилізації HTML5 сторінок

Теми

  • Створення сторінки HTML5
  • Налаштування стилю сторінки HTML5

Лабораторна робота: Створення та стилізація сторінки HTML5

  • Створення сторінки HTML5
  • Налаштування стилю сторінки HTML5

Після закінчення цього модуля слухачі зможуть:

  • Створювати сторінки за допомогою нових функцій HTML5
  • Застосовувати стилі CSS3 до елементів сторінки HTML5

Модуль 3: Введення в JavaScript

Теми

  • Огляд синтаксису JavaScript
  • Використання DOM в JavaScript
  • Введення в jQuery

Лабораторна робота: Відображення даних та обробка подій за допомогою JavaScript

  • Відображення даних
  • Обробка подій

Після закінчення цього модуля слухачі зможуть:

  • Описати синтаксис JavaScript і його використання в HTML5
  • Використати ть JavaScript для управління DOM і обробкою подій
  • Описати використання бібліотеки jQuery для спрощення коду на JavaScript

Модуль 4: Створення форм для збору даних і перевірки введених користувачем даних

Теми

  • Огляд форм і типів введення
  • Перевірка вводяться користувачем даних за допомогою атрибутів HTML5
  • Перевірка вводяться користувачем даних за допомогою JavaScript

Лабораторна робота: Створення форм і перевірка користувацького введення

  • Створення форм перевірки введених користувачем даних за допомогою атрибутів HTML5
  • Перевірка користувацького введення за допомогою JavaScript

Після закінчення цього модуля слухачі зможуть:

  • Створювати форми, що використовують нові елементи введення HTML5
  • Перевіряти користувацьке введення і забезпечувати зворотний зв'язок за допомогою нових атрибутів HTML5
  • Писати код JavaScript для перевірки користувацького введення і забезпечувати зворотний зв'язок у випадках, коли атрибути HTML5 не годяться

Модуль 5. Взаємодія з віддаленим джерелом даних

Теми

  • Відправлення та отримання даних за допомогою XMLHTTPRequest
  • Відправлення та отримання даних за допомогою операцій jQuery AJAX

Лабораторна робота: Зв'язок з віддаленим джерелом даних

  • Отримання даних
  • Серіалізация і передача даних
  • Оптимізація коду за допомогою методу ajax-бібліотеки jQuery

Після закінчення цього модуля слухачі зможуть:

  • Відправляти і отримувати дані за допомогою об'єктів XMLHTTPRequest
  • Оптимізувати код для отримання і передачі даних метод ajax бібліотеки jQuery

Модуль 6. Моделювання за допомогою HTML5 CSS3

Теми

  • Стилізація тексту
  • Стилізація групи елементів
  • Селектори CSS3
  • Використання графічних ефектів CSS3

Лабораторна робота: стилізація тексту і блокових елементів за допомогою CSS3

  • Стилізація панелі навігації
  • Стилізація заголовка сторінки
  • Стилізація сторінки «Про програму» (About)

Після закінчення цього модуля слухачі зможуть:

  • Стилізувати елементи тексту на сторінці HTML5, використовуючи CSS3
  • Застосовувати стилі для груп елементів за допомогою CSS3
  • Використовувати селектори CSS3 для відбору стилізованих елементів
  • Реалізовувати графічні ефекти і перетворення (transformations) за допомогою нових властивостей CSS3

Модуль 7: Створення об'єктів за допомогою JavaScript

Теми

  • Розробка структурованого коду на JavaScript
  • Створення власних об'єктів
  • Розширення створених/існуючих об'єктів

Лабораторна робота: Оптимізація коду для зниження витрат при супроводі (Maintainability), підвищення стійкості при внесенні змін (Extensibility)

  • Спадкування об'єктів
  • Рефакторинг коду використовує об'єкти

Після закінчення цього модуля слухачі зможуть:

  • Описати переваги структурованого коду JavaScript
  • Застосовувати передовий досвід для створення призначених для користувача об'єктів засобами JavaScript
  • Описати, як можна надбудувати логіку призначених для користувача і вбудованих об'єктів

Модуль 8: Створення інтерактивних сторінок за допомогою HTML5

Теми

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

Лабораторна робота: Створення інтерактивних сторінок за допомогою HTML5

  • Впровадження відео
  • Впровадження зображень
  • Використання API геолокації

Після закінчення цього модуля слухачі зможуть:

  • Використовувати технологію Drag and Drop і API для взаємодії з файлами (File API)
  • Використовувати елементи аудіо і відео
  • Визначити місце розташування користувача, що запустив веб-додаток, за допомогою API геолокації
  • Налагоджувати і персоніфікувати веб-додатки, використовуючи Web Timing API і Internet Explorer Developer Tools

Модуль 9: Використання можливостей зберігання даних на стороні клієнта

Теми

  • Локальне читання і запис даних
  • Збереження даних на стороні клієнта (offline-режим) за допомогою кешу додатку

Лабораторна робота: Додавання збереження даних на стороні клієнта (offline-режим)

  • Реалізація кеша додатку
  • Реалізація локального сховища

Після закінчення цього модуля слухачі зможуть:

  • Зберігати і відновлювати дані на комп'ютері користувача за допомогою Local Storage API
  • Забезпечення збереження даних на стороні клієнта за допомогою Application Cache API

Модуль 10: Реалізація адаптивного інтерфейсу користувача

Теми

  • Підтримка різних форм-факторів
  • Створення адаптивного призначеного для користувача інтерфейсу

Лабораторна робота: Реалізація адаптивного інтерфейсу користувача

  • Створення шаблону сторінки придатного для виведення на друк
  • Адаптація макету сторінки до різних форм-факторів

Після закінчення цього модуля слухачі зможуть:

  • Навчити додаток визначати можливості пристроїв і адаптуватися до форм-факторів
  • Створювати веб-сторінки, здатні динамічно адаптуватися, щоб відповідати різним форм-факторам

Модуль 11: Використання графіки

Теми

  • Створення векторної графіки за допомогою бібліотеки SVG
  • Програмне створення графіки за допомогою елемента Canvas

Лабораторна робота: Налаштування розширеної графіки

  • Створення інтерактивної карти з використанням коштів векторної графіки
  • Створення беджу доповідача (Speaker Badge) за допомогою елемента Canvas

Після закінчення цього модуля слухачі зможуть:

  • Використовувати векторну графіку для створення інтерактивних додатків
  • Малювати складні графічні елементи на базі Canvas за допомогою JavaScript

Модуль 12: Анімація інтерфейсу користувача

Теми

  • Застосування переходів (transitions) CSS
  • Перетворення (transformations) елементів
  • Використання покадровой CSS анімації

Лабораторна робота: анімація елементів призначеного для користувача інтерфейсу

  • Створення переходів для анімації призначеного для користувача інтерфейсу
  • Застосування анімації кадру

Після закінчення цього модуля слухачі зможуть:

  • Застосувати переходи CSS до елементів HTML5, управляти переходом через JavaScript
  • Описати різні типи 2D і 3D переходів, доступні з CSS3
  • Реалізувати складну покадрову анімацію за допомогою CSS і коду JavaScript

Модуль 13: Реалізація двонаправленого обміну повідомленнями з використанням Web Sockets

Теми

  • Введення в Web Sockets
  • Відправлення та отримання даних за допомогою Web Sockets

Лабораторна робота: Реалізація двонаправленого обміну з використанням Web Sockets

  • Отримання даних через Web Sockets
  • Відправка даних в Web Sockets
  • Передача залежно від типу повідомлення через Web Sockets

Після закінчення цього модуля слухачі зможуть:

  • Описати, як працюють Web Sockets, як відбувається передача і прийом повідомлень
  • Використовувати Web Socket API на JavaScript для підключення до сервера, відправки та отримання даних та обробки подій, пов'язаних з надсиланням або отриманням повідомлень

Модуль 14: Використання Web Workers

Теми

  • Введення в Web Workers
  • Виконання асинхронної обробки за допомогою Web Workers

Лабораторна робота: Створення Web Workers

  • Підвищення ефективності використання додатків за допомогою Web Workers
  • Забезпечення зворотного зв'язку з користувачами під час виконання тривалих операцій

За закінченні цього модуля слухачі зможуть:

  • Описати призначення Web Workers їх використання для асинхронної обробки
  • Створювати, запускати і проводити моніторинг Web Worker з JavaScript за допомогою Web Worker API

Для ефективного навчання слухачі повинні володіти такими знаннями і навичками:

  • Використання HTML-тегів для відображення текстового вмісту;
  • Використання HTML-тегів для виведення зображень;
  • Володіння JavaScript;
  • Уміння відокремлювати уявлення сторінки від її змісту;
  • Управління висновком контенту;
  • Управління позиціонуванням окремих елементів;
  • Використання стилів CSS.

Запис на курс

Код курсуO12cSQLWH
Тривалість5 д (40 год)
Код екзамену
Вартість без ПДВ16000 грн.
Найближчі дати
  • 11.12.2023

У зв'язку з карантином всі наші курси читаються у online-форматі.