HTML5 новые тэги time, figure, video, audio, canvas

html5.jpeg Добавим к предыдущей статье о новых тэгах в HTML5 еще несколько описаний нововведений.

Итак, новые тэги: time, figure, video, audio и canvas

time — позволяет однозначно кодировать время и дату по грегорианскому календарю с учетом всех возможных смещений часовых поясов. Состоит данный тэг из т.н. «считываемой» части и контентной. Что это значит?

Рассмотрим пример:

<time datetime=2012-02-20>20 февраля 2012</time>

Здесь атрибут datetime со значением 2012-02-20 и является считываемой частью, которую считывает как браузер, так и всевозможные агрегаторы. На основе этих данных они могут, например, занести в календарь пользователя определенную дату или создавать временные шкалы с указанием точек-событий. А вторая часть (контентная) — это то, что видит пользователь на экране. Если запись и там и там должна быть одинаковая (например, время в формате 24-часовом), то можно ограничиться вот такой записью:

<time>11:00</time>

Данный тэг может иметь расширенный вариант, в котором указана как дата и время, так и часовой пояс. Чтобы показать одновременно дату и время необходимо между ними вставить префикс в виде латинской буквы Т. При этом необходимо указывать часовой пояс: либо буквой Z (всемирное время), либо смещением относительно всемирного времени на нужное число с соответствующим знаком + или —

<time datetime=2012-02-20Т11:00Z>

или

<time datetime=2012-02-20Т11:00+02:00>

Есть у этого тэга еще один дополнительный параметр, который выглядит как pubdate и прописывается после атрибута datetime таким образом:

<time datetime=2012-02-20Т11:00Z pubdate>

Данная запись однозначно определяет дату и время публикации статьи. Зачем это нужно? Например, в статье есть другая дата, означающая анонс какого-нибудь события, и автору нужно, чтобы эту дату тоже считывали агрегаторы или встроенный в браузер календарь. Как определить, какая из этих двух дат является датой публикации? А вот как раз при помощи дополнительного параметра pubdate.

figure — теперь для подписи и заголовков к картинкам не нужно городить огород из кучи блочных и строковых тэгов, а достаточно воспользоваться элегантными тэгами figure и figcaption. Выглядеть это может так:

<figure>
<img src=kartinka.jpg alt="">
<figcaption>
Красивая картинка
<small>рисовал не я</small>
</figcaption>
<figure>

Здесь figure означает блок с картинкой и текстом к нему, а figcaption служит одновременно и заголовком и описанием. Чтобы отделить описание от заголовка, его поместили в тэг small, который в HTML5 теперь просто означает «мелкий текст» и нужен для всякой служебной инфы, не являющейся по сути контентом.

video — служит для простой вставки видео на страницы сайта. То есть, код вставки может быть до безобразия простым:

<video src=kinoshka.ogv></video>

Без всяких сторонних плееров, жутких object и embed. Красота! Кроме того, в этот код можно добавить либо автозапуск (autoplay), либо элементы управления (controls). В первом случае ролик запустится сам при открытии страницы (не есть хорошо), а во втором браузер предоставит собственные элементы управления воспроизведением.

Также можно добавить размеры окна проигрывателя в пикселах и картинку-заставку (poster). Выглядеть это может так:

<video src=kinoshka.ogv width=600 height=400 poster=kinoshka.jpg controls></video>

audio — также предназначен для простой вставки медиа-контента на страницы сайта. На этот раз, как несложно догадаться, речь идет об аудио. Все в принципе похоже на работу с видео. Точно также просто добавляется аудио-файл, к которому можно пристегнуть элементы управления controls.

<audio src=pestnya.ogg controls></audio>

Все это замечательно, конечно, но на данный момент времени все упирается в кодеки. Разные браузеры поддерживают разные кодеки: Opera и FF — ogv и ogg, Safari — H.246 и MP3, а Google Chrom — и тех и других. Поэтому сейчас приходится на сайте прописывать несколько вариантов файлов и использовать для этого специальный тэг source. Пример:

<video controls>
<source src=kinoshka.ogv type='video/ogg; codecs="theora, vorbis"'>
<source src=kinoshka.mp4 type='video/mp4; codecs="avcl.42E01E, mp4a.40.2"'>
</video>

canvas — попросту говоря, рисовалка на сайте. Хоть графики, хоть каляки-маляки всякие в духе MS Paint. Элемент canvas предоставляет посетителям сайта интерфейс для двумерного рисования: линии, заливки, формы, текст и пр. Вот отличный пример — Harmony.

По умолчанию тэг canvas создает на странице невидимую область размерами 300 на 150 пикселей. Размеры, разумеется, можно переопределить.

Чтобы начать рисовать, не достаточно просто прописать этот тэг. Нужен еще специальный JavaScript:

<canvas width="600 height=400></canvas>
<script type="text/javascript">
var ctx = document.querySelector('canvas')
getContext('2d');
ctx.fillRect (10, 20, 50, 50);
</script>

Эта жуткая на вид штука нарисует на площадке 600х400 пикселей квадрат со сторонами 50х50 пикселей. первые два значения (10 и 20) это соответственно координаты x и y верхнего левого угла квадрата.

Возможностей у данного тэга масса, нужно только знать, как использовать JavaScript, а это уже тема для отдельной обширной статьи с примерами.

HTML5 Введение
HTML5 первые шаги
HTML5 новые тэги header, footer, nav, aside, section, article, hgroup, main
HTML5 новые тэги time, figure, video, audio, canvas

20.02.2012

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 5,00 out of 5)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

Оставить комментарий: