Доступно и в занимательной форме рассказано, как HTML превратился в HTML5. Рассмотрены семантические элементы и новые стандарты языка. Описано, как создавать современные веб-страницы, в том числе улучшенные веб-формы, поддерживать аудио и видео, рисовать на холсте, совершенствовать оформление веб-страниц с помощью CSS3. Даны практические рекомендации по созданию интеллектуальных веб-приложений, хранению данных, разработке автономных приложений. Показано, как реализовать взаимодействие с веб-сервером, геолокацию, фоновые вычисления, управление историей просмотров и браузерную совместимость с элементами HTML5.
Об авторе 13
Благодарности 13
Введение 15
Что нужно знать для работы с этой книгой? 16
Написание кода HTML5 17
Просмотр страницы HTML5 18
Когда HTML5 будет готов? 18
О чем эта книга? 19
Онлайновые ресурсы 21
Недостающий CD 21
Сайт для тестирования примеров книги 21
ЧАСТЬ I. ЗНАКОМСТВО С НОВЫМ ЯЗЫКОМ 23
Глава 1. Представляем HTML5 25
История языка HTML5 25
Язык XHTML 1.0: строго по правилам 26
XHTML 2: неожиданный провал 27
HTML5: возвращение к жизни 27
HTML: живой язык 29
Три основных принципа HTML5 30
Принцип 1. Не рвити Паутину 30
Принцип 2. Асфальтируйте тропинки 32
Принцип 3. Будьте практичными. 32
Первое знакомство с разметкой HTML5 33
Описание типа документа HTML5 35
Кодировка символов 37
Язык 37
Добавление таблицы стилей 38
Добавление JavaScript-кода 38
Конечный результат 39
Углубленное знакомство с синтаксисом HTML5 40
Ослабленные правила 40
Проверка кода HTML5 41
Возвращение XHTML 44
Семейство элементов HTML5 46
Добавленные элементы 46
Удаленные элементы 47
Адаптированные элементы 47
Полужирное и курсивное форматирование 48
Подкорректированные элементы 49
Стандартизированные элементы 50
Современное использование HTML5 51
Поддерживает ли браузер вашу разметку? 52
Статистика популярности браузеров 55
Определение возможностей с помощью Modernizr 57
Замена отсутствующих возможностей заполнителями . 60
Глава 2. Новый способ структурирования страниц 62
Что такое семантические элементы? 63
Модифицирование традиционной HTML-страницы 65
Структурирование страницы старым способом 66
Структурирование страницы с помощью HTML5 69
Подзаголовки, созданные элементом 72
Вставка рисунков с помощью элемента 73
Добавление боковой панели с помощью элемента
Браузерная совместимость для семантических элементов 77
Разработка сайта с использованием семантических элементов 80
Верхние колонтитулы 80
Создание навигационных ссылок с помощью элемента 83
Нижние колонтитулы 88
Блоки 91
Система HTML5 для создания схемы документа 92
Как просмотреть схему веб-страницы? 93
Базовые схемы 94
Элементы для создания блоков 96
Решение проблемы со схемой 98
Глава 3. Разметка со смыслом 102
Повторение семантических элементов 103
Обозначение дат и времени с помощью элемента 104
JavaScript-вычисления и элемент 106
Выделение текста цветом с помощью элемента 107
Другие стандарты, улучшающие семантику 109
Стандарт Accessible Rich Internet Applications 110
Стандарт Resource Description Framework 111
Микроформаты 111
Обозначение контактной информации с помощью микроформата hCard 112
Обозначение событий с помощью микроформата hCalendar 117
Микроданные 118
Расширенные фрагменты страницы 121
Расширенные результаты поиска 122
Движок для поиска кулинарных рецептов 126
ЧАСТЬ II. СОЗДАНИЕ СОВРЕМЕННЫХ ВЕБ-СТРАНИЦ 131
Глава 4. Продвинутые веб-формы 133
Что такое форма? 134
Модернизация традиционной HTML-формы 136
Добавление подсказок 140
Фокус: правильное начало 142
Проверка: ошибкам — нет! 142
Как работает проверка HTML5? 143
Отключение проверки 145
Оформление результатов проверки 146
Проверка с помощью регулярных выражений 147
Специализированная проверка 149
Поддержка проверки браузерами 150
Новые типы элемента 154
Адреса электронной почты 156
URL-адреса 157
Поля поиска 157
Телефонные номера 158
Числа 158
Ползунки 159
Дата и время 160
Цвет 161
Новые элементы 162
Подсказки ввода 162
Индикатор выполнения
и счетчик 165 Элементы и для создания кнопок команд и меню 168
Веб-страница как HTML-редактор 168
Редактирование элементов с помощью атрибута contentEditable 169
Редактирование страницы с помощью атрибута designMode 171
Глава 5. Аудио и видео 174
Основные сведения о воспроизведении видео в современных программах 175
Представляем видео и аудио HTML5 176
Воспроизведение аудио с помощью элемента
177 Воспроизведения видео с помощью элемента 179
Войны форматов и резервные решения 181
Знакомимся с форматами 182
Поддержка браузерами форматов мультимедиа 184
Множество форматов: как понравиться всем браузерам 186
Элемент 187
Резервное решение Flash 188
Управление плеером посредством JavaScript 193
Добавление звуковых эффектов 193
Создание своего видеопроигрывателя 197
Проигрыватели на JavaScript 201
Субтитры и доступность 203
Глава 6. Основы рисования на холсте 205
Базовые возможности холста 206
Прямые линии 208
Пути и фигуры 211
Кривые линии 214
Трансформации 217
Прозрачность 220
Создание простой программы рисования 223
Подготовка к рисованию 223
Рисование на холсте 225
Сохранение содержимого холста 227
Совместимость холста с браузерами 231
Холст на заполнителе 231
Резервное решение для холста и определение возможностей 233
Глава 7. Продвинутые методы работы с холстом 235
Что еще можно рисовать на холсте? 235
Вставка в холст изображений 236
Обрезка, разрезка и изменение размеров изображения 238
Вставка в холст текста 240
Тени и вычурные заливки 241
Создание теней 242
Заполнение фигур изображениями 244
Градиентная заливка фигур 245
Обобщая сказанное: рисуем график 249
Как сделать фигуры интерактивными? 254
Отслеживание нарисованного содержимого 255
Проверка на столкновение посредством сравнения координат 259
Анимация на холсте 261
Простая анимация \ 262
Анимация нескольких объектов 263
Практический пример: игра "Лабиринт" 268
Подготовительные работы 270
Анимация значка 272
Проверка на столкновение с использованием цвета пикселов 274
Глава 8. Совершенствование стилей с помощью CSS3 278
Современное использование CSS3 279
Стратегия 1: используйте то, что можно 279
Стратегия 2: рассматривайте возможности CSS3 как усовершенствования 280
Стратегия 3: добавляйте резервные решения с помощью Modernizr 281
Стили, специфичные для конкретных браузеров 284
Типография для Интернета 286
Форматы веб-шрифтов 287
Наборы шрифтов 289
Веб-шрифты Google 292
Использование своих шрифтов 295
Размещение текста в несколько колонок 296
Адаптация к разным устройствам 298
Запросы о возможностях отображения 299
Продвинутые запросы о возможностях 303
Полная замена таблицы стилей 305
Распознавание мобильных устройств 306
Рисование эффектных рамок 308
Прозрачность 308
Скругление углов 310
Фон 311
Тени 313
Градиенты 314
Создание эффектов перехода 316
Простой цветовой переход 317
Еще несколько идей с переходами 319
Трансформации 320
ЧАСТЬ III. СОЗДАНИЕ ИНТЕЛЛЕКТУАЛЬНЫХ ВЕБ-ПРИЛОЖЕНИЙ 325
Глава 9. Хранение данных 327
Основы веб-хранилища 328
Сохранение данных 329
Практический пример: сохранение текущего состояния игры 331
Поддержка веб-хранилища браузерами 334
Продвинутые методы работы с веб-хранилищем 334
Удаление элементов 334
Поиск всех сохраненных элементов 335
Сохранение чисел и дат 336
Сохранение объектов 337
Реагирование на изменения в хранилище 339
Чтение файлов 341
Получение файла 342
Поддержка браузерами интерфейса File API 342
Чтение текстового файла 343
Замена элемента 345
Одновременное считывание нескольких файлов 346
Чтение файла изображения 346
Глава 10. Автономные приложения 351
Кэширование файлов с помощью манифеста 352
Создание манифеста 353
Использование манифеста 356
Помещение манифеста на веб-сервер 356
Обновление файла манифеста 359
Браузерная поддержка автономных приложений 362
Практические методы кэширования 362
Доступ к онлайновым файлам 363
Добавление резервных решений 364
Проверка подключения 366
Информирование об обновлениях с помощью JavaScript 368
Глава 11. Взаимодействие с веб-сервером 371
Отправка сообщений на веб-сервер 372
Объект XMLHttpRequest 373
Отправка запроса веб-серверу 374
Создание сценария 374
Обращение к веб-серверу 376
Получение нового содержимого 378
Отправляемые сервером события 382
Формат сообщений 383
Отправка сообщений с помощью серверного сценария 84
Обработка сообщений в веб-странице 387
Опрос посредством серверных событий 388
Веб-сокеты 390
Получение доступа к веб-сокетам 391
Простой клиент веб-сокетов 393
Примеры веб-сокетов в сети 394
Глава 12. Несколько полезных возможностей на JavaScript 396
Геолокация 397
Принцип работы геолокации 398
Определение координат посетителя 401
Обработка ошибок 403
Установка параметров геолокации 405
Отображение карты 406
Отслеживание перемещений посетителя 410
Фоновые вычисления 411
Трудоемкая задача 413
Выполнение вычислений в фоновом режиме 415
Обработка ошибок веб-работников 419
Отмена исполнения фоновой задачи 419
Обмен более сложными сообщениями 420
Управление историей просмотров 423
Проблем с URL 424
Традиционное решение: hashbang URL 425
HTML5-решение: история сеансов 426
Поддержка браузерами истории сеансов 429
ЧАСТЬ IV. ПРИЛОЖЕНИЯ 433
Приложение 1. Очень краткое введение в CSS 435
Добавление стилей в веб-страницу 435
Анатомия таблицы стилей 436
Свойства CSS 437
Форматирование элементов посредством классов 438
Комментарии в таблицах стилей 439
Продвинутые таблицы стилей 439
Структурирование страницы с помощью элементов
439
Множественные селекторы 440
Контекстные селекторы 441
Идентификаторы 442
Селекторы псевдоклассов 443
Селекторы атрибутов 444
Экскурсия по таблице стилей 445
Приложение 2. Очень краткое введение в JavaScript 450
Принципы работы JavaScript в веб-странице 451
Вставка кода в разметку 451
Использование функций 453
Перемещение кода JavaScript в файл сценариев 455
Реагирование на события 456
Несколько основных структур языка JavaScript 458
Переменные 458
Значение null 459
Область видимости переменных 459
Типы данных переменных 460
Арифметические операции 461
Условные переходы 462
Циклы 464
Массивы 465
Функции, которые получают и возвращают данные 466
Взаимодействие со страницей 467
Манипулирование элементами 468
Динамическое подключение к событию 470
Подставляемые в строку функции 472
Предметный указатель 475
