Разработка c использованием HTML5: Курсы

Модуль 1. Введение в HTML5

• Основы HTML (элементы страницы, таблицы, списки, формы)
• Нововведения HTML5 (новые элементы, Open Web Platform)
• Каскадные таблицы стилей (CSS) – нюансы использования
• Все о JavaScript (основы языка, анонимные функции, объекты и интроспекция, область видимости)
• Объектная модель документа (DOM), встраивание JavaScript
• Как работают AJAX и JSON
• Возможности библиотеки jQuery (интеграция, селекторы, манипуляция DOM, события)

Лабораторная работа: Создание веб-приложений HTML5 (75 мин.)

• Использование средств разработки
• Настройка стилей, применение jQuery и JavaScript (объектов и событий)
• Создание сворачиваемой панели и элементов слайд-шоу

По завершении этого модуля слушатели смогут:

• Понимать различия между HTML и HTML5
• Владеть CSS, JavaScript, DOM, AJAX, JSON и jQuery
• Использовать средства разработки для создания веб-приложений HTML5

Модуль 2. HTML5 – структура страницы, элементы навигации

• Новые элементы HTML5
  • Структурирование страницы (элементы заменяющие “div”)
  • Семантические группы (связывание элементов)
  • Вложенные (inline) семантические элементы (mark, meter, progress, time)
  • Управление интерактивностью (details, summary, menu, command)
  • Video, audio, canvas и другие
• Новая навигация (элемент “nav”) между и внутри страниц
• Реализация различных вариантов меню (элементы “menu”/“command”)

Лабораторная работа: Освоение элементов HTML5 (45 мин.)

• Преобразование существующих страниц к стандарту HTML5
• HTML5-верстка на основе скетчей “GameDetails” и “Cart”, добавление стилей
• Связывание страниц с помощью навигации и меню

По завершении этого модуля слушатели смогут:

• Владеть новыми элементами HTML5
• Использовать новые средства навигации и меню
• Преобразовывать страницы в HTML5

Модуль 3. Ввод и валидация данных

• Новые элементы HTML5
  • 12 новых элементов ввода данных
  • Управление датой и временем
• Новые атрибуты форм: эргономичность, управление поведением, “drag-and-drop”, редактирование
• Устаревшие (deprecated) атрибуты HTML4
• Возможности валидации данных (элементы “form”, “range”, “required”, “pattern”, “maxlenght”)
• Расширенные возможности HTML5
  • Встроенное определение типа и возможностей браузера, интероперабельность
  • Проверка наличия и возможностей HTML5/CSS3 при помощи Modernizr.js
  • Обратная совместимость при помощи полифилов (polyfills)

Лабораторная работа: Ввод данных и валидация (45 мин.)

• Добавление форм ввода данных (“Checkout” и “Game Review”)
• Реализация валидации
• Применение Modernizr.js и polyfills

По завершении этого модуля слушатели смогут:

• Применять новые элементы ввода
• Использовать новые/знать об устаревших атрибутах
• Управлять валидацией данных
• Владеть расширенными возможностями HTML5

Модуль 4. Управление стилями и разметкой страниц

• Какой вариант разметки (layouts) выбрать?
  • таблицы
  • элемент “div”
  • расширения HTML5
  • возможности CSS3: Template-Based, Multi-column
• Нововведения CSS3 (новые селекторы, разметка, трансформация, анимация, адаптация UI под гаджет)

Лабораторная работа: Управление стилями и разметкой страниц (45 мин.)

• Применение нововведений CSS3 для существующих страниц

По завершении этого модуля слушатели смогут:

• Управлять стилями и разметкой страниц
• Использовать возможности CSS3

Модуль 5. Графика и мультимедиа

• Рисование в HTML5: растровая графика при помощи “canvas” (2D, масштабирование, трансформации)
• Встроенная поддержка аудио и видео, расширенные возможности
• Управление при помощи JavaScript

Лабораторная работа: Использование элементов графики и мультимедиа (60 мин.)

• Отображение видео на странице
• Создание слайд-шоу средствами контейнера “canvas”

По завершении этого модуля слушатели смогут:

• Рисовать в контейнере “canvas” при помощи JavaScript
• Использовать элементы аудио и видео, управлять ими в JavaScript
• Подключать аудио/видео кодеки

Модуль 6. Подробнее об использовании графики

• Рисование в HTML5: масштабируемая векторная графика (Scalable Vector Graphics)
  • Элемент “svg”, использование DOM
  • 2D, масштабирование, трансформации, фильтры, градиенты и паттерны
• Анимация “canvas” и “svg” (декларативное и императивное)
• Что выбрать: “canvas” или “svg”?

Лабораторная работа: Использование анимации (60 мин.)

• Добавление и настройка стиля статистических диаграмм средствами “svg”
• Реализация слайд-шоу при помощи “canvas” и JavaScript

По завершении этого модуля слушатели смогут:

• Использовать возможности масштабируемой векторной графики
• Управлять средствами анимации
• Выбирать между “canvas” и “svg”

Модуль 7. Средства хранения данных в браузере

• Технологии хранения
  • куки – особенности использования, известные ограничения
  • интернет-хранилище (web storage) в HTML5 - модель данных IndexedDB
• Что выбрать: интернет-хранилище или куки?
• Интерфейс интернет-хранилища (области, объектная модель, события, безопасность)

Лабораторная работа: Реализация интернет-хранилища (45 мин.)

• Реализация локального хранилища для сохранения заказа на покупку
• Интеграция созданного хранилища с сайтом при помощи jQuery

По завершении этого модуля слушатели смогут:

• Использовать web storage API
• Выбирать между сохранением сессии (sessionStorage) и локальной памятью хранения (localStorage)

Модуль 8. Новые возможности JavaScript в HTML5

• Новый API в HTML5
  • Реализация “drag-and-drop” (DnD) – элементы “draggable”/”dropzone”, события, безопасность
  • Интерфейс для работы с файлами (основные возможности, вопросы безопасности)
  • Геолокация в HTML5 (объектная модель, использование, вопросы безопасности)

Лабораторная работа: Использование новых возможностей JavaScript API (60 мин.)

• Интеграция DnD в существующие страницы
• Работа с файлами и возможностями геолокации

По завершении этого модуля слушатели смогут:

• Использовать новые возможности JavaScript в HTML5

Модуль 9. Инструментарий HTML5-разработчика

• Установка и возможности Microsoft WebMatrix
• Использование Razor - нового механизма визуализации ASP.NET MVC 3 (основы, вопросы проектирования)
• Что выбрать: бесплатный Microsoft WebMatrix, Visual Studio или …?

Лабораторная работа: Освоение инструментария HTML5-разработчика (40 мин.)

• Использование Microsoft WebMatrix
• Создание веб-приложения с помощью Razor

По завершении этого модуля слушатели смогут:

• Выбирать наиболее подходящее средство для разработки
• Использовать Razor при помощи ASP.NET MVC 3

Требуемая подготовка: успешное окончание курса HTML и CSS. Уровень 1. Создание сайтов по стандартам W3C на HTML 5 и СSS 3 или эквивалентная подготовка; успешное окончание курса JavaScript. Уровень 1. Основы веб - программирования или эквивалентная подготовка.