Программа курса

Модуль 1. Основы синтаксиса и семантики и передовые методы разметки.

• Объявление DOCTYPE.
• Определение кодировки, языка.
• Оптимизация script и link.
• Добавление в структуру документа новых элементов HTML5.
• Элемент article или section.
• Проверка и изменение структуры документа.
• Временное скрытие содержимого.
• Управление нумерацией списков.
• Создание редактируемых частей страницы.
• Проверка поддержки HTML5.
• Валидация HTML5.

Модуль 2. Формы. Встроенное аудио и видео

• Поле ввода контактной информации.
• Использование полей ввода даты и времени.
• Численный ввод.
• Отображение поискового поля ввода.
• Выбор значения из числового диапазона.
• Создание редактируемого раскрывающегося списка.
• Обязательные поля формы.
• Автофокусировка на поле формы.
• Отображение замещающего текста.
• Отключение автозаполнения.
• Ограничение значений.
• Создание простой формы.
• Добавление НТML5-аудио и управление аудиопотоком.
• Создание аудиопроигрывателя.
• Добавление НТМL5-видео.
• Кроссбраузерная поддержка видео и настройка видеоразрешения.
• Цикличное воспроизведение видео.

Модуль 3. Микроданные и пользовательские данные. Геолокация.

• Добавление в разметку микроданных.
• Использование микроданных.
• Добавление в разметку пользовательских данных.
• Доступ к пользовательским данным с помощью JavaScript.
• Управление пользовательскими данными.
• Создание приложения для карты с помощью пользовательских данных.
• Получение основных геолокационных данных.
• Альтернативный способ получения основных геолокационных данных.
• Получение адреса путем обратного геокодирования широты и долготы.
• Преобразование адреса в широту и долготу.
• Drag and drop
• Progress bar

Модуль 4. Элемент Canvas

• Рисование на элементе canvas.
• Использование эффекта прозрачности.
• Установка размеров «холста».
• Использование градиентов, узоров и стилей линий.
• Добавление на «холст» внешних изображений.
• Настройка цветовых преобразований.
• Использование геометрических преобразований.
• Добавление на «холст» текста.
• Обрезка рисунков на «холсте».
• Добавление эффекта анимации к рисункам на «холсте».
• Рисование графиков на «холсте».
• Сохранение рисунка с «холста» в файле.

Модуль 5. Элементы доступа и расширенные возможности JavaScript в HTML5

• Создание текстового описания рисунка.
• Определение аббревиатур и сокращений.
• Определение разделов страницы с помощью ключевых ролей ARIA.
• Создание доступных навигационных ссылок.
• Связывание полей формы с метками.
• Логическая группировка полей формы.
• Динамическое включение fieldset.
• Определение обязательных полей формы.
• Использование ARIA для динамических обновлений.
• Локальное хранилище.
• Кэширование приложений.
• Перетаскивание.
• Рабочие процессы.
• Веб-сокеты.
• История.
• Локальные файлы.

Модуль 6. Кроссбраузерные свойства CSS3

• Введение в CSS3.
• Border-radius.
• Text-shadow.
• Box-shadow.
• Background-origin.
• Background-size.
• Одновременное использование нескольких фоновых изображений.
• Parallax.
• Opacity.
• RGBA.
• Практический пример с применением пройденных в модуле свойств.

Модуль 7. Переходы в CSS. Градиенты в CSS3. Улучшенние форм.

• Временные функции.
• Задержка перехода.
• Краткая форма записи.
• Краткая форма записи перехода с задержкой.
• Поддержка в браузерах.
• Полная запись перехода.
• Состояния перехода.
• Переход нескольких свойств.
• Переход всех возможных состояний.
• К каким свойствам применимы переходы.
• Простой пример переходов с помощью CSS3.
• Градиенты.
• Разметка для простой формы регистрации.
• Стили для полей и подписей.
• О CSS3-селекторах.
• Оформление полей ввода.
• Пример формы с помощью CSS3.

Модуль 8. Преобразование содержимого и добавление CSS-анимаций

• Масштабирование.
• Поворот.
• Кручение.
• Сдвиг.
• Ключевые кадры.
• Ссылки на keyframe.
• Повторное использование анимации в состоянии hover.
• Практический пример «Создание галереи изображений с помощью HTML5 и CSS3»

Модуль 9. Работа с границами, текстом, шрифтом. Полезные псевдо-классы

• Свойство word-wrap.
• Свойство text-overflow.
• Свойство word-wrap.
• Свойство @font-face.
• Работа с границами.
• Использование условных комментариев.
• Добавление авторского стиля.
• Полезные псевдо-классы.

Модуль 10. Адаптивный дизайн

• Введение в адаптивный дизайн.
• Fluid grid.
• Fluid images.
• Media queries.
• CSS Regions.
• Mobile first.

Расписание

Время проведения курса пока не определено, отправьте нам заявку, пожалуйста.

Возможно, мы предложим пройти курс в дистанционном режиме или организуем выездной курс, если у Вас группа.

Записаться