Программирование на HTML5 с использованием JavaScript и CSS3

Данный курс можете прослушать бесплатно в рамках программы Software Assurance.

Если Ваша Организация, приобрела лицензии Software Assurance на продукты для настольных ПК, то ей предоставляется возможность активации ваучеров на БЕСПЛАТНОЕ  ОБУЧЕНИЕ (Training Vouchers). Вы можете по этим ваучерам пройти обучение в нашем центре «СИБИНФОЦЕНТР» - сертифицированном центре обучения Microsoft  (CPLS), независимо от места приобретения лицензий.

По окончании курса Вы будете уметь:

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