Эта книга, представляющая собой сборник рецептов и готовых решений, позволит вам получить практический опыт работы с основными элементами HTML5. Издание охватывает широкий круг вопросов: от семантической разметки, веб-форм и мультимедийных элементов до технологий геолокации и JavaScript API.
Каждый рецепт, рассматриваемый в книге, включает в себя задачу, пример кода и подробное описание решения. Книга идеально подходит для веб-программистов начального и среднего уровней, которые хотят быстро освоить практические приемы применения HTML5 в веб-разработках.
Предисловие 8
Глава 1. Основы синтаксиса и семантики 17
1.0. Введение 17
1.1. Объявление DOCTYPE 17
1.2. Определение кодировки 19
1.3. Определение языка 20
1.4. Оптимизация script и link 21
1.5. Добавление в структуру документа новых элементов HTML5 22
1.6. Элемент article или section 26
1.7. Проверка структуры документа 28
1.8. Изменение структуры документа 31
1.9. Выделение текста 32
1.10. Придание тексту значимости 34
1.11. Выделение текста ссылки 35
1.12. Разметка мелким шрифтом 36
1.13. Определение аббревиатур и сокращений 37
1.14. Добавление ссылок для содержимого блока 38
1.15. Разметка рисунков и подписей 39
1.16. Разметка для даты и времени 40
1.17. Основы простого разворачивания и сворачивания 43
1.18. Управление нумерацией списков 44
1.19. Временное скрытие содержимого 46
1.20. Создание редактируемых частей страницы 47
1.21. Закладываем основы для встроенного перетаскивания 49
Глава 2. Передовые методы разметки 50
2.0. Введение 50
2.1. Добавление дополнительного семантического значения 51
2.2. Выбор стиля разметки 52
2.3. Проверка поддержки HTML5 53
2.4. Как заставить Internet Explorer распознавать элементы HTML5? 55
2.5. Отслеживание НТМЬ5-функций с помощью JavaScript 58
2.6. Использование HTML5 Boilerplate 65
2.7. Валидация HTML5 68
2.8. Замена НТМЬ5-элементов идентификаторами и именами классов 72
Глава 3. Формы 76
3.0. Введение 76
3.1. Отображение поискового поля ввода 76
3.2. Поле ввода контактной информации 79
3.3. Использование полей ввода даты и времени 84
3.4. Численный ввод 88
3.5. Выбор значения из числового диапазона 92
3.6. Выбор цвета 94
3.7. Создание редактируемого раскрывающегося списка 96
3.8. Обязательные поля формы 99
3.9. Автофокусировка на поле формы 102
3.10. Отображение замещающего текста 103
3.11. Отключение автозаполнения 105
3.12. Ограничение значений 107
3.13. Поддержка работы HTML5 в устаревших браузерах 110
3.14. Проверка вводимых данных в устаревших браузерах с помощью JavaScript 114
3.15. Пример простой формы 116
Глава 4. Встроенное аудио 119
4.0. Введение 119
4.1. Добавление НТМЬ5-аудио 119
4.2. Управление аудиопотоком 124
4.3. Создание
с помощью JavaScript 127 4.4. Визуализация
с помощью 128 4.5. Создание аудиопроигрывателя 131
Глава 5. Встроенное видео 137
5.0. Введение 137
5.1. Добавление НТМЬ5-видео 137
5.2. Мультибраузерная поддержка видео 141
5.3. Настройка видеоразрешения 143
5.4. Отображение замещающего изображения до воспроизведения видео 144
5.5. Цикличное воспроизведение видео 146
5.6. Управление видео с помощью 147
Глава 6. Микроданные и пользовательские данные 152
6.0. Введение 152
6.1. Добавление в разметку микроданных 154
6.2. Использование микроданных и Schema.org 155
6.3. Добавление в разметку пользовательских данных 157
6.4. Доступ к пользовательским данным с помощью JavaScript 158
6.5. Управление пользовательскими данными 160
6.6. Создание приложения для карты с помощью пользовательских данных 163
Глава 7. Доступность 166
7.0. Введение 166
7.1. Создание текстового описания рисунка 168
7.2. Определение аббревиатур и сокращений 172
7.3. Определение разделов страницы с помощью ключевых ролей ARIA 174
7.4. Создание доступных навигационных ссылок 177
7.5. Связывание полей формы с метками 180
7.6. Логическая группировка полей формы 181
7.7. Динамическое включение fieldset 183
7.8. Определение обязательных полей формы 184
7.9. Использование ARIA для динамических обновлений 186
Глава 8. Геолокация 190
8.0. Введение 190
8.1. Получение основных геолокационных данных 191
8.2. Альтернативный способ получения основных геолокационных данных 194
8.3. Получение адреса путем обратного геокодирования широты и долготы 197
8.4. Преобразование адреса в широту и долготу 200
8.5. Поиск маршрута на основе текущего местоположения 202
8.6. Пример: определяем маршрут из Starbucks в Starbucks 209
Глава 9. Элемент canvas 215
9.0. Введение 215
9.1. Рисование на элементе canvas 216
9.2. Использование эффекта прозрачности 221
9.3. Установка размеров ≪холста≫. 225
9.4. Использование градиентов, узоров и стилей линий 227
9.5. Добавление на ≪холст≫ внешних изображений 232
9.6. Настройка цветовых преобразований 234
9.7. Использование геометрических преобразований 236
9.8. Добавление на ≪холст≫ текста 241
9.9. Обрезка рисунков на ≪холсте≫ 242
9.10. Добавление эффекта анимации к рисункам на ≪холсте≫ 244
9.11. Рисование графиков на ≪холсте≫ 248
9.12. Сохранение рисунка с ≪холста≫ в файле 251
Глава 10. Расширенные возможности JavaScript в HTML5 253
10.0. Введение 253
10.1. Локальное хранилище 254
10.2. Кэширование приложений 258
10.3. Перетаскивание 262
10.4. Рабочие процессы 268
10.5. Веб-сокеты 273
10.6. История 277
10.7. Локальные файлы 281
Приложение. Ресурсы HTML5 286
Об авторах 288
