Введение в HTML5

Курс написан группой разработчиков компании Opera Software под руководством Криса Милза (Chris Mills).

Переводчик: О.Д. Труфанов

Информация о курсе
В курсе рассказывается об истории создания HTML5, возможностях, совместимости с другими стандартами, основных структурных элементах и их использовании в современных браузерах. Демонстрируются новые элементы разметки и атрибуты, улучшающие формы, элемент video и создание индивидуального видеоплеера, "холст", API сокеты, кэширование приложение и хранилища данных на клиентских компьютерах. Дается введение в технологию многопоточного выполнения кода Web Workers и описываются основные возможности геолокации.
  1. Знакомство с HTML5! Основные вехи истории создания HTML5. Перспективы языка, сравнение с другими стандартами. Проблемы совместимости. Обсуждаются новые свойства языка разметки, а также технологии, не имеющие прямого отношения к стандарту HTML5, но тесно с ним связанные. API браузеров. JavaScript/DOM. Сокеты. Автономные web приложения, кэши приложений и локальная база данных Web SQL. Увеличение производительности за счет компонента Web Workers. Геолокация.
  2. Новые структурные элементы в HTML5 В лекции рассматриваются структурные элементы HTML5. Демонстрируется, каким образом новые свойства языка взаимодействуют друг с другом в контексте реальной web-страницы. Использование тегов логической компоновки документа: колонтитулов, навигационных панелей, автономных фрагментов контента, блоков для иллюстраций, разметки времени и даты. Специфика описания типа документа (DTD - Document Type Definition). Как новые средства языка поддерживаются в популярных браузерах. Методики, позволяющие заставить старые клиентские программы отображать неизвестные элементы разметки.
  3. Новые свойства форм в HTML5. Рассказывается о новых элементах разметки и атрибутах, улучшающих формы. Примеры новых элементов числового ввода, ползунков, списков выбора даты и времени, выбора цвета из цветовой палитры, индивидуального поиска по сайту, элементов ввода со списком вариантов, поля для телефонных номеров, e-mail- и url-адресов. Новые механизмы вывода информации: вывод результатов вычислений, панель индикатора выполнения. Встроенная в HTML5 проверка заполнения формы.
  4. Введение в видео HTML5 В данной лекции описывается элемент video и некоторые связанные с ним API. Перечислены основные поддерживаемые видеоформаты. Автор рассказывает о наиболее важных способах, с помощью которых можно управлять видео через JavaScript и возможностях создания собственных элементов управления проигрывателем. Как элемент video сочетается с другими элементами web страницы. Оформление видео с помощью каскадных таблиц стилей (CSS3). Особое внимание уделяется совместимости новых свойств языка со старыми браузерами.
  5. Улучшение доступности видео-плеера HTML5 Лекция представляет собой описание проекта создания индивидуального видеоплеера HTML5 с улучшенной доступностью. На примерах рассматривается разработка элементов управления плеером: кнопок и ползунков. Создание титров и стенограмм. Описывается проблемы, связанные с управлением плеером посредством клавиатуры. Использование JavaScript-библиотеки jQuery для программирования индивидуальных особенностей видеоплеера. Приводится подборка полезных ресурсов в сети интернет.
  6. Холст HTML5 – основы Основы использования элемента "холст". Из данной лекции вы узнаете, как создавать на холсте графические примитивы в виде прямоугольных и треугольных областей со свойствами заливки и обводки. Даны особенности рисования линий и штрихов. Рисование фигур с помощью путей. Вставка в холст других изображений, сформированных элементами img и canvas. Манипуляции с пикселями изображения. Методики добавления на холст текста, теней и градиентов.
  7. Введение в сокеты Web Приводится описание API сокетов HTML5 с примерами использования. Основные протоколы для обмена информацией между клиентскими и серверными приложениями. Методы, свойства и события объекта WebSocket. Описаны конструкторы для создания соединения с сервером, использующие различные настройки. Открытие и закрытие соединений. Характеристика сообщений от сервера, обработка основных ошибок, возникающих при работе с сокетами. Методики проверки поддержки сокетов в браузере клиента.
  8. Автономное выполнение приложений Web с помощью HTML5 AppCache В данной лекции речь идет о методах кэширования приложений на клиентских компьютерах. Отличия кэша браузеров от кэша приложений HTML5. Файл манифеста и его основные директивы. Подключение манифеста к web приложению. Явное определение файлов для кэширования. Предоставление пользователю резервного контента. Использование API кэша приложений и событий для проверки использования актуальных версий файлов. Проверка поддержки технологии браузером. Статусы, события и обработчики событий кэша приложений.
  9. Хранилище Web: более удобное и мощное хранилище клиентских данных Рассматриваются сессионные (Session Storage) и локальные (Local Storage) хранилища данных на стороне клиента. Сравнение технологий хранилищ HTML5 с технологией Cookie. Помещение и извлечение данных из сессионного и локального хранилищ. Удаление данных. Лимит хранилища. Использование событий хранилища. Вопросы безопасности и соответствующие рекомендации.
  10. Web Workers за работой Введение в технологию многопоточного выполнения кода Web Workers. Принципы работы и случаи использования. Какие стандартные объекты JavaScript доступны для Web Workers. Присущие ему ограничения. Поддержка в современных браузерах. Дополнительные ссылки по теме.
  11. Как использовать API геолокации W3C В завершающей курс лекции описываются основные возможности API геолокации. Как определяется местоположение пользователя. Стандартные предупреждения безопасности. Способы использования API геолокации в приложениях web. Прямое и обратное геокодирование. Геолокация на примере карт от Google.