- •Как мы сюда попали?
- •Приступим
- •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
- •Поток событий
- •«Убей меня поскорее!», или Отладка как одно из изящных искусств
- •Строим офлайновое приложение
- •Для дальнейшего изучения
- •Веб-формы как форма безумия
- •Приступим
- •Подсказывающий текст
- •Поля с автофокусировкой
- •Адреса электронной почты
- •Веб-адреса
- •Числа как счетчики
- •Числа как ползунки
- •Выборщики даты
- •Формы поиска
- •Выборщики цвета
- •И еще об одной вещи
- •Для дальнейшего изучения
- •Микроданные и другие красивые слова
- •Приступим
- •Что такое микроданные?
- •Структура микроданных
- •Разметка данных о человеке
- •Разметка данных об организации
- •Разметка данных о событии
- •Разметка клиентских отзывов
- •Для дальнейшего изучения
- •Приложение. Универсальный почти алфавитный определитель всего на свете
- •Элементы
- •Для дальнейшего изучения
64 |
Глава 3.. Что все это значит? |
2.Первые два тега <div class="w3c_footer-nav"> заменить тегом <nav>, а третий —
<section>.
3.Вместо заголовков <h3> применить <h1>, потому что каждый из них теперь находится внутри раздела (узел в кратком содержании документа создает как <article>, так и <nav>: см. раздел «Рубрикация» этой главы).
Итоговый вариант разметки нижнего колонтитула мог бы быть таким:
<footer>
<nav> <h1>Навигация</h1>
<ul>
<li><a href="/">Главная страница</a></li> <li><a href="/standards/">Стандарты</a></li> <li><a href="/participate/">Участие</a></li>
<li><a href="/Consortium/membership">Членство</a></li> <li><a href="/Consortium/">О Консорциуме</a></li>
</ul>
</nav>
<nav>
<h1>Связь с W3C</h1>
<ul>
<li><a href="/Consortium/contact">Связаться</a></li> <li><a href="/Help/">Справка и ЧаВо</a></li>
<li><a href="/Consortium/sup">Финансовая помощь</a></li> <li><a href="/Consortium/siteindex">Карта сайта</a></li>
</ul>
</nav>
<section>
<h1>Новости W3C</h1>
<ul>
<li><a href="http://twitter.com/W3C">Мы в Twitter</a></li> <li><a href="http://identi.ca/w3c">Мы в Identi.ca</a></li>
</ul>
</section>
<p class="copyright">Copyright © 2009 W3C</p>
</footer>
Для дальнейшего изучения
Используемые в этой главе страницы-образцы:
исходная (в разметке HTML 4): http://diveintohtml5..org/examples/blog-original..html;измененная (в HTML5-разметке): http://diveintohtml5..org/examples/blog-html5..html.
Подробнее о кодировках символов:
«Абсолютный минимум того, что каждый без исключения программист обязан знатьоUnicodeикодовыхтаблицах»(http://www..joelonsoftware..com/articles/Unicode.. html) — статья Джоэля Спольского (Joel Spolsky);
Для дальнейшего изучения |
65 |
«ОценностиUnicode»(http://www..tbray..org/ongoing/When/200x/2003/04/06/Unicode), «О символьных строках» (http://www..tbray..org/ongoing/When/200x/2003/04/13/ Strings), «Символы и байты» (http://www..tbray..org/ongoing/When/200x/2003/04/26/ UTF) — статьи Тима Брея (Tim Bray).
Подробнее о том, как заставить работать HTML5-теги в Internet Explorer:
«Применение стилей к элементам, с которыми не знаком IE» (http://xopus.. com/devblog/2008/style-unknown-elements..html) — статья Сьерда Вишера (Sjoerd Visscher);
HTML5 shiv (http://ejohn..org/blog/html5-shiv/) — проект Джона Ресига (John Resig);
сценарий, включающий поддержку HTML5 (http://remysharp..com/2009/01/07/ html5-enabling-script/), — разработка Реми Шарпа (Remy Sharp).
Подробнее о стандартном режиме и ОТД: «ОТД и переключение режимов браузера» (http://hsivonen..iki..fi/doctype/) — статья Генри Сивонена. В данном предмете следует ориентироваться только на сведения этой статьи. Остальные публикации родственной тематики либо неточны, либо неполны, либо устарели.
Валидатор (X)HTML5 вы можете найти по адресу http://html5..validator..nu.
4 С чистого листа (холста)
Приступим
В HTML5 тег <canvas> (http://bit..ly/9JHzOf) определен как «холст для зависимой от разрешения растровой графики, с помощью которого могут на лету прорисовываться диаграммы, графика игр и прочие изображения». На странице холст имеет вид прямоугольника, в границах которого можно рисовать с помощью JavaScript. Во время написания этой книги базовые возможности холста поддерживались в браузерах, перечисленных в табл. 4.1.
Таблица 4.1. Браузеры, в которых поддерживаются возможности холста
IE* |
Firefox |
Safari |
Chrome |
Opera |
iPhone |
Android |
7..0+ |
3..0+ |
3..0+ |
3..0+ |
10..0+ |
1..0+ |
1..0+ |
*В Internet Explorer поддержку обеспечивает сторонняя библиотека ExplorerCanvas.
Как же выглядит холст? А никак, собственно. У тега <canvas> нет своего содержимого и границ. Пример его кода:
<canvas width="300" height="225"></canvas>
Этот холст показан на рис. 4.1. Граница помечена точками, чтобы наглядно показать его положение.
На одной странице может быть несколько тегов <canvas>. Каждому из них будет соответствовать DOM-объект, и состояние разных холстов независимо. Если приписать каждому из них атрибут id, то для доступа к холстам с помощью JavaScript можно использовать обычный способ.
Включим атрибут id в показанный выше код:
<canvas id="a" width="300" height="225"></canvas>
Теперь данный тег <canvas> легко обнаруживается в DOM: var a_canvas = document.getElementById("a");
Простые фигуры |
67 |
Рис. 4.1. Холст с границей
Простые фигуры
В табл. 4.2 перечислены браузеры, в которых поддерживаются простые фигуры.
Таблица 4.2. Браузеры с поддержкой простых фигур
IE* |
Firefox |
Safari |
Chrome |
Opera |
iPhone |
Android |
7..0+ |
3..0+ |
3..0+ |
3..0+ |
10..0+ |
1..0+ |
1..0+ |
*В Internet Explorer поддержку обеспечивает сторонняя библиотека ExplorerCanvas.
По умолчанию холст пуст. Не порисовать ли нам что-нибудь на нем? Для этого
спомощью обработчика onclick можно вызвать, к примеру, следующую функцию, которая рисует прямоугольник (интерактивный образец ее работы смотрите на сайте http://diveintohtml5..org/canvas..html):
function draw_b() {
var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100);
}
Первая строка в коде этой функции просто находит тег <canvas> в DOM. Интереснее вторая строка. У каждого холста есть «контекст рисования», в котором и происходят все дальнейшие операции. После того как тег <canvas> обнаружен в DOM (методом document.getElementById() или каким-либо другим методом), можно вызвать его метод getContext(), которому следует передать строку "2d":
function draw_b() {
var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext(“2d”); b_context.fillRect(50, 25, 150, 100);
}
68 |
Глава 4.. С чистого листа (холста) |
|
|
Разметка в вопросах и ответах |
|
Вопрос: Существует ли трехмерный холст? |
сования, но ни один из этих интерфейсов не стандарти- |
Ответ: Пока еще нет. Отдельные разработчики экспе- |
зован. Спецификация HTML5 отмечает: «В следующей |
версии спецификации, вероятно, будет определен |
|
риментировали с собственными API трехмерного ри- |
контекст 3d». |
|
|
Итак, даны тег <canvas> и его контекст рисования. В этом контексте определены все методы и свойства, отвечающие за рисование. Так, для черчения прямоугольников имеется целая группа свойств и методов.
Свойство fillStyle задает CSS-цвет, узор или градиент (подробнее о градиентах — далее в этой главе). Значение fillStyle по умолчанию — непрозрачный черный цвет. Программист может определить какой угодно стиль заливки.
Метод fillRect(x, y, width, height) рисует прямоугольник с текущим стилем заливки.
Свойство strokeStyle, как и fillStyle, может задавать CSS-цвет, узор или градиент. Это стиль границ прямоугольника.
Метод strokeRect(x, y, width, height) рисует прямоугольник с текущим стилем границ. При вызове strokeRect содержимое прямоугольника не заполняется.
Метод clearRect(x, y, width, height) очищает пикселы внутри заданного прямоугольника.
Каждый контекст рисования «помнит» определенные в нем свойства, пока страница открыта и данные не стираются после какой-либо операции.
Разметка в вопросах и ответах
Вопрос: Можно ли «перезагрузить» холст? |
а вновь присвоить ей текущее значение, например, |
|
Ответ: Да. Если переназначить ширину или высоту |
так: |
|
var b_canvas = document.getElement |
||
тега <canvas>, его содержимое будет стерто, а все |
||
свойства контекста рисования примут первона- |
ById("b"); |
|
чальные значения. Можно даже не менять ширину, |
b_canvas.width = b_canvas.width; |
|
|
|
Вернемся к коду предыдущего образца:
var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100);
Вызвав метод fillRect(), мы рисуем прямоугольник и заполняем его заливкой текущего стиля. Поскольку значение по умолчанию не менялось, это будет черный цвет. Прямоугольник описывается координатами левого верхнего угла (50, 25), шириной (150) и высотой (100). Для лучшего усвоения этого механизма рассмотрим координатную систему холста.