В курсе HTML5 и CSS3 описаны технологии веб-разработки по стандартам нового поколения на реальных и простых примерах. Уже сейчас основные браузеры, а также мобильные устройства поддерживают многие спецификации HTML5 и CSS3. Эти технологии дают основу следующему поколению интернет-приложений. Преимущества новых технологий очевидны: комфорт и широкие функциональные возможности для пользователей, а для веб-программистов они более просты в разработке и дальнейшей поддержке.
На курсе HTML5CSS3 детально рассматриваются основы синтаксиса и семантики, использование новых возможностей форм, встроенное аудио и видео, геолокация, элемент Canvas, а также многие другие нововведения.
Содержание курса:
Урок 1. Основы синтаксиса и семантики и передовые методы разметки.
Объявление DOCTYPE.
Определение кодировки, языка.
Оптимизация и link.
Добавление в структуру документа новых элементов HTML5.
Элемент article или section.
Проверка и изменение структуры документа.
Временное скрытие содержимого.
Управление нумерацией списков.
Создание редактируемых частей страницы.
Проверка поддержки HTML5.
Валидация HTML5.
Урок 2. Формы. Встроенное аудио и видео.
Поле ввода контактной информации.
Использование полей ввода даты и времени.
Численный ввод.
Отображение поискового поля ввода.
Выбор значения из числового диапазона.
Создание редактируемого раскрывающегося списка.
Обязательные поля формы.
Автофокусировка на поле формы.
Отображение замещающего текста.
Отключение автозаполнения.
Ограничение значений.
Создание простой формы.
Добавление НТML5-аудио и управление аудиопотоком.
Создание аудиопроигрывателя.
Добавление НТМL5-видео.
Кроссбраузерная поддержка видео и настройка видеоразрешения.
Цикличное воспроизведение видео.
Урок 3. Микроданные и пользовательские данные. Геолокация.
Добавление в разметку микроданных.
Использование микроданных.
Добавление в разметку пользовательских данных.
Доступ к пользовательским данным с помощью Java.
Управление пользовательскими данными.
Создание приложения для карты с помощью пользовательских данных.
Получение основных геолокационных данных.
Альтернативный способ получения основных геолокационных данных.
Получение адреса путем обратного геокодирования широты и долготы.
Преобразование адреса в широту и долготу.
Drag and drop
Progress bar
Урок 4. Элемент Canvas.
Рисование на элементе canvas.
Использование эффекта прозрачности.
Установка размеров холста.
Использование градиентов, узоров и стилей линий.
Добавление на холст внешних изображений.
Настройка цветовых преобразований.
Использование геометрических преобразований.
Добавление на холст текста.
Обрезка рисунков на холсте.
Добавление эффекта анимации к рисункам на холсте.
Рисование графиков на холсте.
Сохранение рисунка с холста в файле.
Урок 5. Элементы доступа и расширенные возможности Java в 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.
MediaInfo:
Видео
Идентификатор: 2
Формат: VC-1
Профиль формата: MP@HL
Идентификатор кодека: WMV3
Идентификатор кодека/Информация: Windows Media Video 9
Идентификатор кодека/Подсказка: WMV3
Описание кодека: Windows Media Video 9
Вид битрейта: Переменный
Битрейт: 285 Кбит/сек
Ширина: 1920 пикселей
Высота: 1080 пикселей
Соотношение сторон: 16:9
Частота кадров: 30,000 кадров/сек
Битовая глубина: 8 бит
Метод сжатия: С потерями
Бит/(Пиксели*Кадры): 0.005
Размер потока: 157 Мбайт (72%)
Язык: English (US)
Аудио
Идентификатор: 1
Формат: WMA
Версия формата: Version 2
Идентификатор кодека: 161
Идентификатор кодека/Информация: Windows Media Audio
Описание кодека: Windows Media Audio 9.2 - VBR Quality 90, 44 kHz, stereo 1-pass VBR
Вид битрейта: Переменный
Битрейт: 102 Кбит/сек
Каналы: 2 канала
Частота: 44,1 КГц
Битовая глубина: 16 бит
Размер потока: 56,3 Мбайт (26%)
Язык: English (US)
