- •Как мы сюда попали?
- •Приступим
- •MIME-типы
- •Большое отступление о том, как появляются стандарты
- •Не отрывая карандаша
- •Все, что вы знаете об XHTML, — это ложь
- •Альтернативная точка зрения
- •WHAT? Что?!
- •И снова о W3C
- •Послесловие
- •Для дальнейшего изучения
- •Тестирование функций HTML5 в браузере
- •Приступим
- •Способы тестирования браузера
- •Modernizr: библиотека для тестирования HTML5-функций
- •Холст
- •Рисование текста
- •Видео
- •Форматы видео
- •Локальное хранилище
- •Фоновые вычисления
- •Офлайновые веб-приложения
- •Геолокация
- •Типы полей ввода
- •Подсказывающий текст
- •Автофокусировка в формах
- •Микроданные
- •Для дальнейшего изучения
- •Что все это значит?
- •Приступим
- •Определение типа документа
- •Корневой элемент
- •Элемент HEAD
- •Кодировка символов
- •Ссылочные отношения
- •Новые семантические элементы HTML5
- •Большое отступление о том, как браузеры обрабатывают незнакомые элементы
- •Верхние колонтитулы
- •Рубрикация
- •Дата и время
- •Навигация
- •Нижние колонтитулы
- •Для дальнейшего изучения
- •С чистого листа (холста)
- •Приступим
- •Простые фигуры
- •Координатная сетка холста
- •Контуры
- •Текст
- •Градиенты
- •Изображения
- •Живой пример
- •Для дальнейшего изучения
- •Видео в Сети
- •Приступим
- •Видеоконтейнеры
- •Видеокодеки
- •Theora
- •Аудиокодеки
- •MPEG-1 Audio Layer 3
- •Advanced Audio Coding
- •Vorbis
- •Что работает в Интернете?
- •Проблемы лицензирования видео H.264
- •Кодирование Ogg-видео с помощью Firefogg
- •Пакетное кодирование Ogg-видео с помощью ffmpeg2theora
- •Кодирование H.264-видео с помощью HandBrake
- •Пакетное кодирование H.264-видео с помощью HandBrake
- •Кодирование WebM-видео с помощью программы ffmpeg
- •…И наконец разметка
- •Живой пример
- •Для дальнейшего изучения
- •Вот мы вас и нашли!
- •Приступим
- •API геолокации
- •Покажите мне код
- •Обработка ошибок
- •Требую выбора!
- •На помощь спешит geo.js
- •Живой пример
- •Для дальнейшего изучения
- •Локальное хранилище: прошлое, настоящее, будущее
- •Приступим
- •Краткая история прототипов локального хранилища до HTML5
- •HTML5-хранилище: вводный курс
- •Использование HTML5-хранилища
- •Следим за состоянием HTML5-хранилища
- •Ограничения в современных браузерах
- •HTML5-хранилище в действии
- •Альтернативы: хранилище без ключей и значений
- •Для дальнейшего изучения
- •На волю, в офлайн!
- •Приступим
- •Манифест кэша
- •Раздел NETWORK
- •Раздел FALLBACK
- •Поток событий
- •«Убей меня поскорее!», или Отладка как одно из изящных искусств
- •Строим офлайновое приложение
- •Для дальнейшего изучения
- •Веб-формы как форма безумия
- •Приступим
- •Подсказывающий текст
- •Поля с автофокусировкой
- •Адреса электронной почты
- •Веб-адреса
- •Числа как счетчики
- •Числа как ползунки
- •Выборщики даты
- •Формы поиска
- •Выборщики цвета
- •И еще об одной вещи
- •Для дальнейшего изучения
- •Микроданные и другие красивые слова
- •Приступим
- •Что такое микроданные?
- •Структура микроданных
- •Разметка данных о человеке
- •Разметка данных об организации
- •Разметка данных о событии
- •Разметка клиентских отзывов
- •Для дальнейшего изучения
- •Приложение. Универсальный почти алфавитный определитель всего на свете
- •Элементы
- •Для дальнейшего изучения
2 Тестирование функций HTML5 в браузере
Приступим
Вы могли бы, конечно, спросить: «Как же мне начинать пользоваться HTML5, если старые браузеры его не поддерживают?» Но сама постановка такого вопроса ошибочна. HTML5 — это не единый большой инструмент, а совокупность отдельных функций, поэтому «поддержку HTML5» вообще нельзя протестировать: это выражение бессмысленно. Но можно проверить, поддерживает ли браузер отдельные нововведения: холст, видео, геолокацию и др.
Способы тестирования браузера
При прорисовке страницы браузер строит объектную модель документа (DOM) — набор объектов, которыми представляются HTML-элементы страницы. Каждый тег — <p>, <div>, <span> и т. д. — представляется в DOM-структуре отдельным объектом (есть также глобальные объекты — окно и целый документ, не привязанные
кспецифическим HTML-элементам).
Увсех DOM-объектов есть общие свойства, но у некоторых объектов их больше, чемудругих.Болеетого,вбраузерах,поддерживающихHTML5-функциональность, какие-то объекты будут располагать уникальными свойствами. Поддерживается ли та или иная функция, можно увидеть, заглянув в DOM.
Существуют четыре основных способа тестирования браузера на предмет поддержки разных возможностей HTML5. Рассмотрим их по порядку, от простейшего к более сложным.
1.Проверить, определено ли нужное свойство для такого глобального объекта, как window или navigator.
Пример — поддержка геолокации. Как протестировать браузер на ее наличие, читайте в разделе «Геолокация» данной главы.
2.Создать элемент и проверить, определено ли для него нужное свойство. Пример — поддержка рисования. О ней вы узнаете в разделе «Холст» этой главы.
3.Создать элемент, проверить, определен ли для него нужный метод, затем вызвать этот метод и посмотреть на возвращенное им значение.
26 |
Глава 2.. Тестирование функций HTML5 в браузере |
Пример — поддержка видеоданных разных форматов. О ней читайте в разделе «Форматы видео» этой главы.
4.Создать элемент, установить для него нужное значение какого-либо свойства, затем проверить, сохраняет ли свойство данное значение.
Пример — поддержка разных типов полей ввода. О ней вы узнаете в разделе «Типы полей ввода» данной главы.
Modernizr: библиотека для тестирования HTML5-функций
Modernizr(http://www..modernizr..com)—этоJavaScript-библиотека,распространяемая под лицензией MIT с открытым исходным кодом. Для большинства возможностей HTML5 и CSS3 она предоставляет простой способ проверить, поддерживает ли их исследуемыйбраузер.НамоментнаписанияэтойкнигипоследняяверсияModernizr имеланомер1.11.Обязательноприменяйтесамуюновуюверсию.Дляиспользования Modernizr надо включить в головную часть страницы следующий тег <script>:
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<title>Название моей страницы</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>
Modernizr запускается автоматически, поэтому нет необходимости в функции modernizr_init(), которая бы вызывала ее. При запуске библиотека Modernizr создает одноименный объект с набором булевозначных свойств, по одному на каждую распознаваемуюфункцию.Так,например,есливашбраузерподдерживаетAPIрисования (см. главу 4), то свойство Modernizr.canvas примет значение true, а если нет — false:
if (Modernizr.canvas) {
//порисуем!
}else {
//тег <canvas> не поддерживается, печаль :(
Холст
В HTML5 тег <canvas> (http://bit..ly/9JHzOf) определен как «холст для зависимой от разрешения растровой графики, с помощью которого могут динамически прори-
1В январе 2011 года были доступны стабильная версия 1.6 и бета-версия 2.0. — Примеч.
перев.
Холст |
27 |
совываться диаграммы, графика игр и прочие изображения». На странице холст имеет вид прямоугольника, в границах которого можно рисовать с помощью JavaScript. В HTML5 определен «API рисования» — набор функций, позволяющих рисовать разные фигуры и контуры, создавать градиентную заливку, преобразовывать графику.
Протестировать поддержку API рисования можно способом 2 (см. раздел «Способы тестирования браузера» этой главы). Если <canvas> поддерживается в браузере, то для DOM-объекта, представляющего тег <canvas>, будет определен метод getContext() (см. раздел «Простые фигуры» главы 4). Если же поддержки рисования в браузере нет, то созданный объект не будет иметь характеристик холста. Поддерживается ли <canvas>, можно проверить с помощью такой функции:
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}
В единственной ее строке сначала создается пустой тег <canvas>: return !!document.createElement('canvas').getContext;
Он не связан с какой-либо областью страницы и не будет отображаться на экране. Ничего не делая, он просто тихо покачивается на волнах оперативной памяти.
После создания пустого тега <canvas> надо проверить, определен ли для него метод getContext(). Этот метод определен только в том случае, если браузер поддерживает API рисования:
return !!document.createElement('canvas').getContext;
Наконец, двойное отрицание заставляет систему вывести значение булевого типа (true или false).
return !!document.createElement(‘canvas’).getContext;
Данным способом можно исследовать, поддерживается ли в браузере большинство функций API рисования: фигуры (см. раздел «Простые фигуры» главы 4), контуры (см. раздел «Контуры» главы 4), градиенты (см. раздел «Градиенты» главы 4) и узоры. Таким образом, не может быть обнаружена поддержка сторонней библиотеки ExplorerCanvas (см. раздел «А что в IE?» главы 4), реализующей API
рисования в Internet Explorer.
Чтобы не писать собственную функцию для проверки того, поддерживается ли в браузере API рисования, прибегните к помощи Modernizr (см. предыдущий раздел):
if (Modernizr.canvas) {
//порисуем!
}else {
//тег <canvas> не поддерживается :(
API рисования текста нужно тестировать особо, о чем и пойдет речь далее.
28 |
Глава 2.. Тестирование функций HTML5 в браузере |
Рисование текста
Если даже ваш браузер поддерживает тег <canvas> и API рисования, в нем может не быть поддержки API рисования текста. Инвентарь функций рисования расширялся постепенно, текстовые функции были добавлены сравнительно поздно, и некоторые браузеры с поддержкой рисования вышли в свет прежде, чем разработка текстового API была завершена.
Протестировать поддержку API рисования текста вновь позволяет способ 2 (см. раздел «Способы тестирования браузера» этой главы). Если рисование текста в вашем браузере поддерживается, то для DOM-объекта, представляющего тег <canvas>, будет определен метод getContext() (см. раздел «Простые фигуры» главы 4), а если нет, то соответствующий DOM-объект не будет располагать свойствами, специфичными для холста. Проверить, работает ли в браузере рисование текста, вам поможет такая функция:
function supports_canvas_text() {
if (!supports_canvas()) { return false; }
var dummy_canvas = document.createElement('canvas'); var context = dummy_canvas.getContext('2d');
return typeof context.fillText == 'function';
}
В начале кода этой функции вызывается ранее написанная нами функция supports_canvas(), которая тестирует поддержку API рисования:
if (!supports_canvas()) { return false; }
Понятно, что, если браузером не поддерживается тег <canvas>, то и рисование текста в нем будет невозможно.
Теперь создадим пустой тег <canvas> и выясним его контекст рисования. Это непременно удастся сделать, так как функция supports_canvas() уже удостоверилась в том, что метод getContext() определен для всех объектов-холстов:
var dummy_canvas = document.createElement('canvas'); var context = dummy_canvas.getContext(‘2d’);
Выясним, наконец, существует ли в контексте рисования функция fillText(). Если да, то API рисования текстом доступен:
return typeof context.fillText == 'function';
Чтобы не писать собственную функцию, прибегните к помощи Modernizr: if (Modernizr.canvastext) {
//порисуем текст!
}else {
//порисовать текст не удастся :(
Видео
В HTML5 появился новый тег <video>, предназначенный для встраивания видео фрагментов в веб-страницы. Раньше это было невозможно без сторонних приложе ний, таких как Apple QuickTime и Adobe Flash.