(10953)f Разработка c использованием HTML5

Данный курс дает знания и навыки разработок в приложении HTML5 с использованием Microsoft Visual Studio 2010. В курсе подробно рассматриваются новые расширения языка разметки, каскадные таблицы стилей CSS3, возможности JavaScript API. Информация будет особенно полезна как для разработки веб-приложений под Internet Explorer 10, так и для грядущей версии ОС Windows 8/Windows RT.

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

Курс предназначен для разработчиков HTML начального уровня, которые уже имеют основы знаний HTML, и которые хотели бы получить знания и навыки программирования в HTML5, CSS и JavaScript для успешного создания веб-сайтов и приложений, ориентированных на браузер Internet Explorer 10 и более поздних версий ОС Windows.

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

• От 1 до 3 месяцев использования HTML и XML
• Знакомство с технологиями Интернет (CSS, JavaScript и т.п.), средствами разработки

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

• Создавать веб-приложения с использованием HTML5
  • Использовать новые элементы структурирования, навигации и ввода данных
  • Управлять стилем и разметкой при помощи новых возможностей CSS3
  • Применять растровую/векторную графику и внедрять мультимедиа
• Владеть продвинутыми возможностями HTML5
  • Хранить данные в браузере при помощи средств интернет-хранилищ (web storage)
  • Использовать HTML5 JavaScript API: работать с файлами (File API), геолокацией (Geolocation API), интерфейсом “drag-and-drop” (DnD)
• Выбирать подходящий инструментарий для использования HTML5
  • Visual Studio 11, Microsoft WebMatrix, ASP.NET MVC 3, …
  • Использовать средства Internet Explorer Developer Tools

Содержание курса:

Введение в веб-разработку HTML5 

• Обзор HTML
• Что нового в HTML5
• Введение в CSS
• Введение в JavaScript
• Введение в jQuery
• Лабораторная работа: Построение основы веб-страницы в  среде Visual Studio 2010 SP1
  • Написание домашней страницы в  HTML
  • Форматирование домашней страницы
  • Добавление элементов  JavaScript и jQuery при создании домашней страницы

Создание структуры и навигации по страницам

• Элементы структуры HTML5
• Навигация и меню
• Лабораторная работа: Создание структуры и навигации по страницам
  • Использование семантических элементов на домашней странице
  • Создание игровых элементов и  Корзины страниц.
  • Добавление навигации и меню на  домашнюю страницу

Создание форм ввода и Проверка 

• Работа с типами ввода
• Использование атрибутов формы
• Проверка
• Использование компонентов  Browser Detection, Feature Detection и Modernizr
• Лабораторная работа: Создание форм ввода и Проверка
  • Создание форм заказа и обзора игр
  • Добавление проверки  форм заказа и обзора игр
  • Добавление поддержки  Modernizr

Разметка и стили веб-страниц 

• Создание макетов
• Дополнительные возможности CSS с использованием CSS3
• Лабораторная работа: Разметка и стили веб-страниц
  • Добавление стилей CSS3 в хранилище веб-страниц

Начало работы с графикой и элементами мультимедиа 

• Основы работы с Canvas
• Видео/Аудио форматы и кодеки
• Управление элементами мультимедиа с помощью JavaScript
• Лабораторная работа: Начало работы с графикой и элементами мультимедиа
  • Добавление видео на страницу
  • Создание слайд-шоу с использованием  элемента Canvas

Расширенная работа с графикой

• Рисование с помощью SVG
• Анимация
• Как выбрать между SVG и Canvas
• Лабораторная работа: Расширенная работа с графикой
  • Добавление диаграмм SVG и
  • Добавление анимации и игровых элементов в слайд-шоу на основе  Canvas

Использование Client-Side Storage

• Web хранилище или Куки
• Веб-хранилище API
• Лабораторная работа : Использование Client-Side Storage
  • Создание определения Корзины с использованием локального хранилища
  • Интеграция страниц с веб-приложениями

Использование новых  API в  HTML5 

• Использование Drag-and-Drop API
• Файл API
• Геолокация API
• Лабораторная работа: Использование новых  API в  HTML5
  • Создание определения Drag-and-Drop на домашнюю страницу
  • Добавление информации геолокации события
  • Добавление Coupon-Reading Behavior

Использование WebMatrix и других сервисов разработки 

• WebMatrix
• ASP.NET MVC3 и Razor
• Лабораторная работа: Использование WebMatrix и других сервисов разработки
  • Использование WebMatrix для создания веб-сайта
  • Использование ASP.NET MVC 3 для создания веб-сайта