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

Модуль 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.

Вы выполните большое количество практических работ с использованием Visual Studio 2012 на платформе Windows 8.

Курс не требует знания HTML5, вполне достаточно некоторого опыта использования HTML4.