HTML5 и CSS3 — будущее веб-разработки, но не обязательно ждать будущего, чтобы начать применять эти стандарты уже сегодня. Хотя спецификации этих языков еще находятся в разработке, большинство современных браузеров и мобильных устройств поддерживают HTML5 и CSS3. Эта
книга HTML5 и CSS3. Веб-разработка по стандартам нового поколения. Хоган поможет вам использовать HTML5 и CSS3 прямо сейчас, применяя все богатые возможности, появившиеся в новых веб-стандартах. Вы научитесь применять новую разметку HTML5, разрабатывать улучшенные интерфейсы для форм ввода данных, узнаете, как добавлять аудио, видео и векторную графику на веб-страницы без использования Flash. Вы увидите, как хранение данных на стороне клиента в автономном режиме кэширования может кардинально улучшить скорость загрузки веб-страниц и как в этом помогают простые решения, доступные в CSS3. Каждый раздел книги сопровождается многочисленными примерами, а для каждой описанной функции читателю предстоит создать небольшой учебный пример.
Оглавление книги
HTML5 и CSS3. Веб-разработка по стандартам нового поколения. Хоган
Предисловие . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
HTML5: платформа и спецификация . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Как это делается . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Глава 1. Обзор HTML5 и CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.1. Платформа веб-разработки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.2. Обратная совместимость . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
1.3. Тернистый путь в будущее . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
ЧАСТЬ I
УСОВЕРШЕНСТВОВАНИЯ ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА
Глава 2. Новые структурные теги и атрибуты . . . . . . . . . . . . . . . . . . . . . . 27
Рецепт 1. Реструктуризация блога с использованием семантической
разметки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Все начинается с правильной директивы doctype . . . . . . . . . . . . . . . . . . 31
Заголовки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Завершители . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Область навигации . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Разделы и статьи . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Статьи . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Дополнения и боковые панели . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Не путайте дополнения с боковыми панелями страниц! . . . . . . . . . . . . . . 38
Стилевое оформление . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Обходное решение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Рецепт 2. Создание всплывающих окон с пользовательскими атрибутами
данных . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Отделение поведения от контента, или Чем плохо решение с onclick . . . . 44
Нам помогут пользовательские атрибуты данных! . . . . . . . . . . . . . . . . . . 46
Обходное решение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Перспективы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Глава 3. Новые возможности веб-форм . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Рецепт 3. Описание данных при помощи новых полей . . . . . . . . . . . . . . . . . 52
Улучшение формы проекта AwesomeCo . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Построение базовой формы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Создание ползунка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Обходное решение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Рецепт 4. Использование автофокуса для перехода к первому полю . . . . . . . 60
Обходное решение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Рецепт 5. Заполняющий текст . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Простая форма регистрации новых работников . . . . . . . . . . . . . . . . . . . . 62
Обходное решение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Рецепт 6. Редактирование «на месте» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Форма профиля . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Сохранение данных . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Обходное решение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Перспективы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Глава 4. Совершенствование пользовательских интерфейсов
средствами CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Рецепт 7. Стилевое оформление таблиц с использованием псевдоклассов . . 79
Работа со счетами . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Чередование цвета строк (:nth-of-type) . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Выравнивание текста столбцов (:nth-child) . . . . . . . . . . . . . . . . . . . . . . . 83
Выделение последней строки (:last-child) . . . . . . . . . . . . . . . . . . . . . . . . 84
Поиск в обратном направлении (:nth-last-child) . . . . . . . . . . . . . . . . . . . . 85
Обходное решение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Рецепт 8. Печать ссылок (:after) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Обходное решение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Рецепт 9. Создание многостолбцовых макетов . . . . . . . . . . . . . . . . . . . . . . . 93
Разбиение на столбцы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Обходное решение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Рецепт 10. Построение мобильных интерфейсов . . . . . . . . . . . . . . . . . . . . . . 99
Обходное решение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Перспективы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Глава 5. Улучшение доступности . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Рецепт 11. Роли ARIA и упрощение навигации . . . . . . . . . . . . . . . . . . . . . . 104
Рецепт 12. Создание обновляемых областей с улучшенной доступностью . . 109
ЧАСТЬ II
ГРАФИКА И ЗВУК
Глава 6. Рисование на «холсте» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Рецепт 13. Рисование логотипа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Рецепт 14. Построение диаграмм средствами RGraph . . . . . . . . . . . . . . . . . 126
Глава 7. Внедрение видео и аудио . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
7.1. Немного истории . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
7.2. Контейнеры и кодеки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Рецепт 15. Работа с аудио . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Рецепт 16. Внедрение видео . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Глава 8. Визуальные эффекты . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Рецепт 17. Закругление прямых углов . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Рецепт 18. Тени, градиенты и преобразования . . . . . . . . . . . . . . . . . . . . . . 164
Рецепт 19. Использование шрифтов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
ЧАСТЬ III
ЗА ПРЕДЕЛАМИ HTML5
Глава 9. Работа с данными на стороне клиента . . . . . . . . . . . . . . . . . . . . 183
Рецепт 20. Сохранение настроек с использованием localStorage . . . . . . . . . 186
Рецепт 21. Хранение информации в реляционной базе данных
на стороне клиента . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Рецепт 22. Автономная работа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Глава 10. Взаимодействие с другими API . . . . . . . . . . . . . . . . . . . . . . . . . 209
Рецепт 23. История просмотра . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Рецепт 24. Передача информации между доменами . . . . . . . . . . . . . . . . . . 215
Рецепт 25. Чат на базе Web Sockets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Рецепт 26. Определение местоположения: Geolocation . . . . . . . . . . . . . . . . 230
Глава 11. Что дальше? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
11.1. Переходы CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
11.2. Web Workers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
11.3. Встроенная поддержка перетаскивания . . . . . . . . . . . . . . . . . . . . 240
11.4. WebGL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
11.5. Indexed Database API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
11.6. Проверка данных форм на стороне клиента . . . . . . . . . . . . . . . . . 247
11.7. Вперед! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
ЧАСТЬ IV
ПРИЛОЖЕНИЯ
Приложение А. Краткий справочник . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
А.1. Новые элементы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
А.2. Атрибуты . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
А.3. Формы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
А.4. Атрибуты полей форм . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
А.5. Доступность . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
А.6. Мультимедиа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
А.7. CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
А.8. Хранение данных на стороне клиента . . . . . . . . . . . . . . . . . . . . . . . 259
А.9. Другие API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Приложение Б. Введение в jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Б.1. Загрузка jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Б.2. Основы jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Б.3. Методы изменения контента . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Б.4. Создание элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Б.5. События . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Б.6. Функция document.ready . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Приложение В. Кодирование аудио и видео . . . . . . . . . . . . . . . . . . . . . . . 268
В.1. Кодирование аудио . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
В.2 Кодирование видео для Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Приложение Г. Ресурсы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Приложение Д. Библиография . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
