Программирование в HTML5 с JavaScript и CSS3

Категория слушателей

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

Курс также будет полезен тем, кто заинтересован в сдаче экзамена 70-480: Programming in HTML5 with JavaScript и CSS3.

Предварительная подготовка

• Использование HTML-тегов для отображения текстового содержимого;
• Использование HTML-тегов для вывода изображений;
• Владение JavaScript;
• Умение отделять представления страницы от ее содержания;
• Управление выводом контента;
• Управление позиционированием отдельных элементов;
• Использование стилей CSS.

По окончании курса слушатели смогут:

• Использовать 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.

Данный курс готовит к экзаменам, входящим в программы подготовки сертифицированных специалистов международного уровня:

• MCSD — Microsoft Certified Solution Developer
• MCSD: WINDOWS STORE APPS – HTML 5

Данный курс готовит к успешной сдаче международных сертификационных экзаменов:

• 070-480: Programming in HTML5 with JavaScript and CSS3

Обзор HTML и CSS

• Обзор HTML
• Обзор CSS
• Создание веб-приложений с помощью Visual Studio 2012
• Лабораторная работа: Анализ приложения Contoso Conference
  • Пошаговое изучение приложения управления конференциями «Contoso Conference»
  • Анализ и модификация приложения

Создание и стилизации HTML5 страниц

• Создание страницы HTML5
• Настройка стиля страницы HTML5
• Лабораторная работа: Создание и стилизация страницы HTML5
  • Создание страницы HTML5
  • Настройка стиля страницы HTML5

Введение в JavaScript

• Обзор синтаксиса JavaScript
• Использование DOM в JavaScript
• Введение в jQuery
• Лабораторная работа: Отображение данных и обработка событий с помощью JavaScript
  • Отображение данных
  • Обработка событий

Создание форм для сбора данных и проверки вводимых пользователем данных

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

Взаимодействие с удаленным источником данных

• Отправка и получение данных с помощью XMLHTTPRequest
• Отправка и получение данных с помощью операций jQuery AJAX
• Лабораторная работа: Связь с удаленным источником данных
  • Получение данных
  • Сериализация и передача данных
  • Оптимизация кода с помощью метода AJAX библиотеки jQuery

Моделирование с помощью HTML5 CSS3

• Стилизация текста
• Стилизация группы элементов
• Селекторы CSS3
• Использования графических эффектов CSS3
• Лабораторная работа: Стилизация текста и блоковых элементов с помощью CSS3
  • Стилизация панели навигации
  • Стилизация заголовка страницы
  • Стилизация страницы “О приложении” (About)

Создание объектов с помощью JavaScript

• Разработка структурированного кода на JavaScript
• Создание собственных объектов
• Расширение созданных/существующих объектов
• Лабораторная работа: Оптимизация кода для снижения издержек при сопровождении (Maintainability), повышение устойчивости при внесении изменений (Extensibility)
  • Наследование объектов
  • Рефакторинг кода использующего объекты

Создание интерактивных страниц с помощью HTML5

• Взаимодействие с файлами
• Использование мультимедиа
• Реагирование на дислокацию и контекст обозревателя
• Отладка и профилирование веб-приложений
• Лабораторная работа: Создание интерактивных страниц с помощью HTML5
  • Внедрение видео
  • Внедрение изображений
  • Использование API геолокации

Использование возможностей хранения данных на стороне клиента

• Локальное чтение и запись данных
• Сохранение данных на стороне клиента (offline-режим) с помощью кэша приложения
• Лабораторная работа: Добавление сохранения данных на стороне клиента (offline-режим)
  • Реализация кэша приложения
  • Реализация локального хранилища

Реализация адаптивного интерфейса пользователя

• Поддержка различных форм-факторов
• Создание адаптивного пользовательского интерфейса
• Лабораторная работа: Реализация адаптивного интерфейса пользователя
  • Создание шаблона страницы пригодного для вывода на печать
  • Адаптация макета страницы к различным форм-факторам

Использование графики

• Создание векторной графики с помощью библиотеки SVG
• Программное создание графики с помощью элемента Canvas
• Лабораторная работа: Настройка расширенной графики
  • Создание интерактивной карты с использование средств векторной графики
  • Создание беджа докладчика (Speaker Badge) с помощью элемента Canvas

Анимация интерфейса пользователя

• Применение переходов (transitions) CSS
• Преобразование (transformations) элементов
• Использование покадровой CSS анимации
• Лабораторная работа: Анимация элементов пользовательского интерфейса
  • Создание переходов для анимации пользовательского интерфейса
  • Применение покадровой анимации

Реализация двунаправленного обмена сообщениями с использованием Web Sockets

• Введение в Web Sockets
• Отправка и получение данных с помощью Web Sockets
• Лабораторная работа: Реализация двунаправленного обмена с использованием Web Sockets
  • Получение данных через Web Sockets
  • Отправка данных в Web Sockets
  • Передача разных типов сообщений через Web Sockets

Использование Web Workers

• Введение в Web Workers
• Выполнение асинхронной обработки с помощью Web Workers
• Лабораторная работа: Создание Web Workers
  • Повышение эффективности использования приложений посредством Web Workers
  • Обеспечение обратной связи с пользователями во время выполнения длительных операций