Обновляем сайт до HTML 5. Часть 1.
- modified:
- reading: 8 minutes
Недавно я выступал на нашей Ярославской User Group с докладом о HTML5, не потому что, я в этом профессионал, а просто решил поведать, раз недавно читал книгу о HTML5 и даже перевел свой сайт на HTML5, а еще потому, что никто у нас в Ярославле так и не собрался сделать доклад про HTML5. Посмотреть и скачать презентацию доклада можно с SkyDrive. Мой доклад был небольшой реферативной работой на книгу Html 5: Up and Running, либо DIVE INTO HTML5 (что на самом деле одно и тоже). Сегодня же я хочу сделать небольшую памятку о том, как перевести сайт с HTML4 на HTML5, основанную на докладе и книгах (опять же реферативная работа) для дальнейшего пользования мной же, ну и может быть кому-нибудь тоже будет полезно.
Определяем возможности браузера
Текущие браузеры поддерживают не полностью HTML5, и более того, каждый браузер поддерживает только определенный набор фич, потому если хочется использовать побольше HTML5 у себя, и есть понимание того, что не все посетители сайта будут обладать определенным браузером(ами), которые поддерживают фичу, которую так хочется внедрить, то приходится делать проверку на то, поддерживает его браузер или нет, и как-то бороться. Так, например, если хочется нарисовать canvas, то проверить поддерживает ли браузер это, можно при помощи такой функции:
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}
Чтобы не писать на каждую фичу отдельную функцию, можно скачать уже готовую библиотеку modernizr, которая умеет определять как HTML5 фичи, так и CSS3, ну и проверять поддержку того же canvas становится проще:
if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}
Более того библиотека opensource, поэтому можно выдрать именно те проверки, которые нужны именно вам на сайте. И еще modernizr предоставляет возможность создать свой собственный билд с определенным набором проверок, для этого идем по этой ссылке Customize your Modernizr download.
Обновляем сайт
Итак, с чего же начать обновление сайта на HTML 5? Вообще, можно это сделать при помощи замены всего лишь одной строчки, если вы ваш сайт верстали с поддержкой XHTML 1.1. HTML 5 – это объединение стандартов HTML 5 и XHTML 2, потому подразумевается, что верстая на HTML 5 нужно придерживаться принципа закрытия каждого элемента (должен быть валидный XML). С другой стороны иногда ходят фразы о XHTML 5, который это обязует делать. В общем-то, разница между ними как я понял просто в том, что некоторые случаи пропуска закрывающих тегов будут распознаваться по-разному: HTML 5 может принять, XHTML 5 ругнется. К чему это я? Когда в той же Visual Studio создаешь новый сайт, то на вверху каждой страницу можно встретить DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Вы же помните его наизусть? Как нет? Ну ладно, тогда теперь можно писать так:
<!DOCTYPE html >
Вот, в принципе, и все, у вас сайт уже воспринимается как HTML5, тестируем в браузерах, проверяем, что ничего не разъехалось, а если разъехалось, то исправляем. В HTML5 по умолчанию подключено xmlns пространство, потому в root элементе вместо
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Пишем просто
<html lang="en">
Язык, конечно же, зависит от вашего сайта, для кого вы там его пишите. Дальше можно немного облегчить head элемент, объявление charset облегчилось, теперь вместо:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Можно написать просто
<meta charset="utf-8" />
Облегчить теперь можно еще и Link Relations, так, например, ссылку на CSS файл можно облегчить с
<link rel="stylesheet" href="style-original.css" type="text/css" />
на
<link rel="stylesheet" href="style-original.css" />
Для CSS так возможно, потому как не бывает других типов для stylesheet элементов (ну или они не так распространены?), потому можно выбрать один из по умолчанию. С другой стороны для rel="alternate" такого сделать нельзя. В конечном счете у нас заготовка HTML5 странички будет выглядеть следующим образом:
<!DOCTYPE html >
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>My Weblog Page</title>
<link rel="stylesheet" href="style-original.css" />
<link rel="alternate" type="application/atom+xml" title="My Weblog feed" href="/feed/" />
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
</body>
</html>
Кстати language="JavaScript" так же можно выкидывать из тега script.
Можно сказать еще пару слов об остальных relations links, вообще их не мало, и полный список можно посмотреть, например, здесь Link types. В HTML5 добавилось только несколько, раньше были rel type start, prev и next, но так как разработчики сами додумывали типы, вроде first, last, up, а вместо prev писали previous, то и их тоже добавили просто в стандарт.
Новые элементы в HTML5
В HTML5 появилось несколько новых секционных элементов, более того, теперь стало намного проще использовать старые элементы. Рекомендую почитать по этому поводу статью Новые элементы в HTML 5 (на сайте ibm). Я же расскажу вам на примере того, как я сделал у себя на сайте. В общем-то теперь есть возможность использовать несколько h1 заголовков у себя на сайте. В книжке DIVE INTO HTML5 приводится хороший пример, почему раньше это было небольшой проблемой.
Предположим у нас сайт (как у меня он и есть) – это просто набор статьей (блогпостов), так вот для них теперь есть специальный тег article. И давайте поймем, какая была раньше проблема в разметке. Я создал сайт, на master странице (шаблонной) я поместил тег h1 для заголовка, написал там свой ник/фамилию/о чем блог. Дальше по разметке я больше не могу использовать тег h1, это противоречит стандарту HTML4. Предположим, я даже не использовал в заголовке h1, решив его оставить для заголовка статьи/блогпоста. Я использую MVC/ASP.NET для разработки своего сайта, и мне бы хотелось бы иметь единый CustomControl/PartialView, который бы умел рендерить блогпост на страничку везде, хоть на странице списка блогпостов, идущих один за одним, хоть на странице просто с одним блогпостом. Соответственно, если я сделаю разметку такой:
<div class="article">
<h1>Article Title</h1>
<h3>Article subtitle/abstract</h3>
....
<h2>Article Subtitle 1</h2>
....
<h2>Article Subtitle 2</h2>
...</div>
То я не смогу ее использовать, когда буду делать список статьей на одной странице, HTML4 этого не позволяет (h1 может быть только один). Теперь же этого можно избежать (точнее теперь можно использовать), просто помещая такие штуки в определенные секционные элементы, например, для статьи это будет article:
<article>
<h1>Article Title</h1>
<h3>Article subtitle/abstract</h3>
....
<h2>Article Subtitle 1</h2>
....
<h2>Article Subtitle 2</h2>
...</article>
Другая проблема, которая здесь есть – это расположение заголовков в самой статье. Мы используем h3 для обозначения подзаголовка для статьи, с другой стороны в статье может быть будут отделены некоторые части при помощи h3 друг от друга (главы/подглавы), что тоже не очень хорошо, ведь визуально наша структура выглядит не структурированной. Для этого мы можем использовать hgroup элемент так (теперь h3 подзаголовка не будет размещаться в одном дереве с h2 элементами в этом примере):
<article>
<hgroup>
<h1>Article Title</h1>
<h3>Article subtitle/abstract</h3>
</hgroup>
....
<h2>Article Subtitle 1</h2>
....
<h2>Article Subtitle 2</h2>
...</article>
Для обозначения дат, а так же даты публикации теперь можно так же указывать дату и время в специальном теге time, выглядеть это будет следующим образом:
<article>
<hgroup>
<h3><time datetime="2011-01-16T21:13:55.0700000" pubdate="pubdate">16.01.2011 21:13 UTC</time></h3>
<h1>Article Title</h1>
<h2>Article subtitle/abstract</h2>
</hgroup>
....
<h2>Article Subtitle 1</h2>
....
<h2>Article Subtitle 2</h2>
...</article>
Тег pubdate обозначает именно, то, что текущая статья опубликована в это время.
Собственно, может возникнуть вопрос, а зачем вообще это нужно, все эти новые элементы? Ну во-первых, HTML код должен стать попроще, во-вторых упрощение варианта использования шаблонов (при динамических страницах), в-третьих нужно ждать от браузеров и поисковиков, когда они будут все больше и больше удивлять нас возможностями, реализованными в HTML5, так, например, мой Kindle 3 умеет находить на странице article тег и из него делать статью, которую удобно читать на устройстве (без этого тега он тоже умеет что-то делать: вырывает просто текст, но все же).
В HTML5 добавились не только article, time и hgroup. А так же появились элементы header (заголовок, либо страницы, либо статьи), section (определенная секция чего-нибудь, например, комментария), nav (в этой секции список ссылок), aside (обычно на каждом сайте бывает что-то сбоку, вот все это располагаем теперь в этом элементе), footer (соответственно футер страницы или статьи). В общем-то для каждого из них более или менее понятно расположение, их я и использовал на сайте. А еще есть mark, meter, progress, и еще может чего-нибудь, элементы, которые я пока не понял зачем они мне нужны.
Остается вопрос, что делать с IE8 и ниже, ведь они эти элементы просто пропускают? Все оказалось достаточно просто, нужно просто при помощи JavaScript создать элемент используемого типа, и тогда парсер IE8 и ниже будут добавлять элементы этих типов в DOM, сделать это можно очень просто:
<!--[if lt IE 9]>
<script>
var e = ("abbr,article,aside,audio,canvas,datalist,details," +
"figure,footer,header,hgroup,mark,menu,meter,nav,output," +
"progress,section,time,video").split(',');
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]—>
Либо можно подключить к себе на сайт внешний скрипт, который это сделает:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Ну а дальше можно валидировать свою страницу при помощи http://html5.validator.nu.
Кстати, чтобы использовать HTML5 в Visual Studio нужно поставить SP1 Beta и переключить валидатор:
Canvas
Canvas – это хороший конкурент совместно с HTML5 для Flash и Silverlight. Так, например, раньше, когда даже в enterprise приложении нужно было бы сделать интерактивный график, то в голову сразу же бы пришел Flash или Silverlight, при помощи которых это было бы намного проще реализовать, чем на голом HTML. Теперь же график может быть нарисован при помощи JavaScript и элемента Canvas. Единственное, что остается большим плюсом в Silverlight и Flash – средства разработки, отладки и т.п. В общем-то, о canvas не понятно что рассказывать, достаточно все просто, надо будет использовать кладем элемент и рисуем при помощи JavaScript:
<canvas id="a" width="300" height="225"></canvas>
<script type="text/javascript">
function draw_b() {
var b_canvas = document.getElementById("a");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
}
</script>
Этот код нарисует на элементе canvas квадрат. Как видно из canvas берется context типа 2d, возникает вопрос насчет 3d: пока его нет, энтузиасты реализуют плагины, но пока только псевдо 3D графика. C canvas можно работать и с картинками: загрузить, например, одну и расплодить ее на элементе canvas.
Возникает вопрос опять про IE8 и ниже. Для них существует библиотека http://code.google.com/p/explorercanvas/ (инструкция по-применению тут).
Будет продолжение: Обновляем сайт до HTML 5. Часть 2.