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

Об авторе
Благодарности
Введение
Что нужно знать для работы с этой книгой?
Написание кода HTML5
Просмотр страницы HTML5
Когда HTML5 будет готов?
О чем эта книга?
Онлайновые ресурсы
Недостающий CD
Сайт для тестирования примеров книги
Часть I. Знакомство с новым языком
Глава 1. Представляем HTML5
История языка HTML5
Язык XHTML 1.0: строго по правилам
XHTML 2: неожиданный провал
HTML5: возвращение к жизни
HTML: живой язык
Три основных принципа HTML5
Принцип 1. Не рвити Паутину
Принцип 2. Асфальтируйте тропинки
Принцип 3. Будьте практичными
Первое знакомство с разметкой HTML5
Описание типа документа HTML5
Кодировка символов
Язык
Добавление таблицы стилей
Добавление JavaScript-кода
Конечный результат
Углубленное знакомство с синтаксисом HTML5
Ослабленные правила
Проверка кода HTML5
Возвращение XHTML
Семейство элементов HTML5
Добавленные элементы
Удаленные элементы
Адаптированные элементы
Полужирное и курсивное форматирование
Подкорректированные элементы
Стандартизированные элементы
Современное использование HTML5
Поддерживает ли браузер вашу разметку?
Статистика популярности браузеров
Определение возможностей с помощью Modernizr
Замена отсутствующих возможностей
заполнителями
Глава 2. Новый способ структурирования страниц
Что такое семантические элементы?
Модифицирование традиционной HTML-страницы
Структурирование страницы старым способом
Структурирование страницы с помощью HTML5
Подзаголовки, созданные элементом <hgroup>
Вставка рисунков с помощью элемента <figure>
Добавление боковой панели с помощью элемента
<aside>
Браузерная совместимость для семантических
элементов
Разработка сайта с использованием семантических
элементов
Верхние колонтитулы
Создание навигационных ссылок с помощью
элемента <nav>
Нижние колонтитулы
Блоки
Система HTML5 для создания схемы документа
Как просмотреть схему веб-страницы?
Базовые схемы
Элементы для создания блоков
Решение проблемы со схемой
Глава 3. Разметка со смыслом
Повторение семантических элементов
Обозначение дат и времени с помощью элемента
<time>
JavaScript-вычисления и элемент <output>
Выделение текста цветом с помощью элемента
<mark>
Другие стандарты, улучшающие семантику
Стандарт Accessible Rich Internet Applications
Стандарт Resource Description Framework
Микроформаты
Обозначение контактной информации с помощью
микроформата hCard
Обозначение событий с помощью микроформата
hCalendar
Микроданные
Расширенные фрагменты страницы
Расширенные результаты поиска
Движок для поиска кулинарных рецептов
Часть II. Создание современных веб-страниц
Глава 4. Продвинутые веб-формы
Что такое форма?
Модернизация традиционной HTML-формы
Добавление подсказок
Фокус: правильное начало
Проверка: ошибкам - нет!
Как работает проверка HTML5?
Отключение проверки
Оформление результатов проверки
Проверка с помощью регулярных выражений
Специализированная проверка
Поддержка проверки браузерами
Новые типы элемента <input>
Адреса электронной почты
URL-адреса
Поля поиска
Телефонные номера
Числа
Ползунки
Дата и время
Цвет
Новые элементы
Подсказки ввода <datalist>
Индикатор выполнения <progress> и счетчик
<meter>
Элементы <command> и <menu> для создания
кнопок команд и меню
Веб-страница как HTML-редактор
Редактирование элементов с помощью атрибута
contentEditable
Редактирование страницы с помощью атрибута
designMode
Глава 5. Аудио и видео
Основные сведения о воспроизведении видео в
современных программах
Представляем видео и аудио HTML5
Воспроизведение аудио с помощью элемента
<audio>
Воспроизведения видео с помощью элемента
<video>
Войны форматов и резервные решения
Знакомимся с форматами
Поддержка браузерами форматов мультимедиа
Множество форматов: как понравиться всем
браузерам
Элемент <source>
Резервное решение Flash
Управление плеером посредством JavaScript
Добавление звуковых эффектов
Создание своего видеопроигрывателя
Проигрыватели на JavaScript
Субтитры и доступность
Глава 6. Основы рисования на холсте
Базовые возможности холста
Прямые линии
Пути и фигуры
Кривые линии
Трансформации
Прозрачность
Создание простой программы рисования
Подготовка к рисованию
Рисование на холсте
Сохранение содержимого холста
Совместимость холста с браузерами
Холст на заполнителе
Резервное решение для холста и определение
возможностей
Глава 7. Продвинутые методы работы с холстом
Что еще можно рисовать на холсте?
Вставка в холст изображений
Обрезка, разрезка и изменение размеров
изображения
Вставка в холст текста
Тени и вычурные заливки
Создание теней
Заполнение фигур изображениями
Градиентная заливка фигур
Обобщая сказанное: рисуем график
Как сделать фигуры интерактивными?
Отслеживание нарисованного содержимого
Проверка на столкновение посредством сравнения
координат
Анимация на холсте
Простая анимация
Анимация нескольких объектов
Практический пример: игра "Лабиринт"
Подготовительные работы
Анимация значка
Проверка на столкновение с использованием цвета
пикселов
Глава 8. Совершенствование стилей с помощью
CSS3
Современное использование CSS3
Стратегия 1: используйте то, что можно
Стратегия 2: рассматривайте возможности CSS3
как усовершенствования
Стратегия 3: добавляйте резервные решения с
помощью Modernizr
Стили, специфичные для конкретных браузеров
Типография для Интернета
Форматы веб-шрифтов
Наборы шрифтов
Веб-шрифты Google
Использование своих шрифтов
Размещение текста в несколько колонок
Адаптация к разным устройствам
Запросы о возможностях отображения
Продвинутые запросы о возможностях
Полная замена таблицы стилей
Распознавание мобильных устройств
Рисование эффектных рамок
Прозрачность
Скругление углов
Фон
Тени
Градиенты
Создание эффектов перехода
Простой цветовой переход
Еще несколько идей с переходами
Трансформации
Часть III. Создание интеллектуальных
веб-приложений
Глава 9. Хранение данных
Основы веб-хранилища
Сохранение данных
Практический пример: сохранение текущего
состояния игры
Поддержка веб-хранилища браузерами
Продвинутые методы работы с веб-хранилищем
Удаление элементов
Поиск всех сохраненных элементов
Сохранение чисел и дат
Сохранение объектов
Реагирование на изменения в хранилище
Чтение файлов
Получение файла
Поддержка браузерами интерфейса File API
Чтение текстового файла
Замена элемента <input>
Одновременное считывание нескольких файлов
Чтение файла изображения
Глава 10. Автономные приложения
Кэширование файлов с помощью манифеста
Создание манифеста
Использование манифеста
Помещение манифеста на веб-сервер
Обновление файла манифеста
Браузерная поддержка автономных приложений
Практические методы кэширования
Доступ к онлайновым файлам
Добавление резервных решений
Проверка подключения
Информирование об обновлениях с помощью
JavaScript
Глава 11. Взаимодействие с веб-сервером
Отправка сообщений на веб-сервер
Объект XMLHttpRequest
Отправка запроса веб-серверу
Создание сценария
Обращение к веб-серверу
Получение нового содержимого
Отправляемые сервером события
Формат сообщений
Отправка сообщений с помощью серверного
сценария
Обработка сообщений в веб-странице
Опрос посредством серверных событий
Веб-сокеты
Получение доступа к веб-сокетам
Простой клиент веб-сокетов
Примеры веб-сокетов в сети
Глава 12. Несколько полезных возможностей на
JavaScript
Геолокация
Принцип работы геолокации
Определение координат посетителя
Обработка ошибок
Установка параметров геолокации
Отображение карты
Отслеживание перемещений посетителя
Фоновые вычисления
Трудоемкая задача
Выполнение вычислений в фоновом режиме
Обработка ошибок веб-работников
Отмена исполнения фоновой задачи
Обмен более сложными сообщениями
Управление историей просмотров
Проблем с URL
Традиционное решение: hashbang URL
HTML5-решение: история сеансов
Поддержка браузерами истории сеансов
Часть IV. Приложения
Приложение 1. Очень краткое введение в CSS
Добавление стилей в веб-страницу
Анатомия таблицы стилей
Свойства CSS
Форматирование элементов посредством классов
Комментарии в таблицах стилей
Продвинутые таблицы стилей
Структурирование страницы с помощью элементов
<div>
Множественные селекторы
Контекстные селекторы
Идентификаторы
Селекторы псевдоклассов
Селекторы атрибутов
Экскурсия по таблице стилей
Приложение 2. Очень краткое введение в
JavaScript
Принципы работы JavaScript в веб-странице
Вставка кода в разметку
Использование функций
Перемещение кода JavaScript в файл сценариев
Реагирование на события
Несколько основных структур языка JavaScript
Переменные
Значение null
Область видимости переменных
Типы данных переменных
Арифметические операции
Условные переходы
Циклы
Массивы
Функции, которые получают и возвращают
данные
Взаимодействие со страницей
Манипулирование элементами
Динамическое подключение к событию
Подставляемые в строку функции
Предметный указатель