HTML5, CSS3 (Базовый курс) — SynergyCom

HTML5, CSS3 (Базовый курс)

Код курса: WEB-007 Продолжительность: 3 дня (24 часа)

Аннотация

В курсе HTML5 и CSS3 описаны технологии веб-разработки по стандартам нового поколения на реальных и простых примерах. Уже сейчас основные браузеры, а также мобильные устройства поддерживают многие спецификации HTML5 и CSS3. Эти технологии дают основу следующему поколению интернет-приложений. Преимущества новых технологий очевидны: комфорт и широкие функциональные возможности для пользователей, а для веб-программистов они более просты в разработке и дальнейшей поддержке.

На курсе детально рассматриваются основы синтаксиса и семантики, использование новых возможностей форм, встроенное аудио и видео, геолокация, элемент Canvas, а также многие другие нововведения.

Предварительные требования

  • Знание HTML, CSS.
  • Знание JavaScript (уровень JavaScript Advanced)

Целевая аудитория

Опытные программисты, верстальщики, web – разработчики.

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

Курс не запланирован.

Вы можете подать заявку на открытие курса:

Каталог услуг

Поиск по сайту