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);

«Оценности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. Браузеры, в которых поддерживаются возможности холста

*В 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");

Рис. 4.1. Холст с границей

Простые фигуры

В табл. 4.2 перечислены браузеры, в которых поддерживаются простые фигуры.

Таблица 4.2. Браузеры с поддержкой простых фигур

*В 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);

}

Итак, даны тег <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.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100);

Вызвав метод fillRect(), мы рисуем прямоугольник и заполняем его заливкой текущего стиля. Поскольку значение по умолчанию не менялось, это будет черный цвет. Прямоугольник описывается координатами левого верхнего угла (50, 25), шириной (150) и высотой (100). Для лучшего усвоения этого механизма рассмотрим координатную систему холста.