Xiper

Берем курс на HTML5 уже сегодня

Автор: Анна Лысак Дата публикации:

курс на HTML5Веб-разработчики в первую очередь хотят знать две вещи: что можно делать с помощью HTML5 и когда я могу начать его использовать? Хорошая новость — при помощи HTML5 ты сможешь делать почти все. Лучшая новость — многое ты можешь делать уже сегодня. Но есть первое и самое главное предостережение — прежде чем приступить к использованию HTML5 тебе необходимо знать свою аудиторию. Если большинство посетителей твоего сайта все еще используют Enternet Explorer 6, то у тебя нет причин торопиться. С другой стороны, если твой сайт в первую очередь для мобильных браузеров на iPhones и iPads, то вопрос уже к тебе: почему до сих пор не используешь HTML5? Но если твой сайт находится где-то по средине (как в общем-то большинство сайтов), то тебе будут полезны некоторые советы относительно того как начинать использовать HTML5.

Какие HTML5 функции можно использовать уже сейчас

Хотя HTML5 спецификация все еще разрабатывается W3C, значительная часть уже представлена в Apple Safari, Google Chrome, Mozilla Firefox (более полное использование ожидается начиная с версии Firefox4), Opera и в ожидающейся версии Enternet Explorer 9 будет также утверждена большая часть спецификации. На caniuse можно посмотреть подробную разбивку, что из новых веб-стандартов поддерживает каждый из популярных браузеров.

Еще один сайт, где можно увидеть оценку браузера на основании количества поддерживаемых им возможностей HTML5 (всего их 300), для этого нужно просто зайти на этот сайт с браузера , который вы хотите протестировать. Этот ресурс очень рекомендует к использованию Джефри Зельдман.

Есть целое ядро особенностей HTML5, которые поддерживают не-IE браузеры, что позволяет многим сайтам использовать новые стандарты и быть открытыми большой веб-аудитории.

Начнем сверху

Ты можешь использовать HTML5 doctype, нет каких-либо причин не делать этого. Ты можешь пройтись по всему сайту, найти вот это :

<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN"
"">
<html xmlns="">

И заменить на это :

<!DOCTYPE HTML>
<html>

Разве так не значительно проще и яснее?

Видео

Значительная часть сообщений в прессе о HTML5 video тэге были о текущих сражениях форматов. Есть четыре конкурента: Flash, H.264, Ogg, и WebM — каждый из них надеется быть форматом будущего и ни одни из них не поддерживается полностью во всех браузерах и на всех платформах. К сожалению, вряд ли в ближайшее время производителям браузеров удастся договориться о едином будущем формате.

Учитывая такие новости, разумно прийти к выводу, что в ближайшее время ситуация с тегом video проще не станет. Гуру HTML предвидели это и сделали так, что у video могут быть различные source теги, благодаря чему в результате все работает хорошо. Если ваш браузер не поддерживает первый вариант, то подойдет второй, или третий или... так далее.

С примером как можно с этим справится можно ознакомится на проекте «видео для всех» (более подробно эту тему мы разберем в ближайшее время).

Поговорим о семантике

Одно из самых больших изменений в HTML5 касается семантических тегов. Скорее всего ваш сайт полон таких тегов, как <div id="header">и <span class="nav">. Забудь об этом. Теперь есть специальные теги: <header> и <nav> и им подобные. С таким раскладом HTML код большинства ресурсов будет однотипным, что облегчит разработчикам поддержку сайтов.

Но погодите, разве вы не говорите все время о том, что ни одна версия IE не поставляется с поддержкой этих элементов, а это огромное количество пользователей? К счастью, этот момент тоже проработали, тебе просто нужно вставить этот фрагмент в <head> каждой страницы :

<!--[if lt IE 9]>
<script type="text/javascript" src=""></script>
<![endif]-->

HTML5 Shiv является проектом с открытым кодом. Он основан на простом решении: если вы создаете новый элемент DOM в IE, вы потом можете стилизировать какие-либо элементы с таким именем. То есть, когда вы создаете новый элемент DOM так: document.createElement("Foo"); — вы можете добавить любое количество тегов <foo> на странице и IE оформит их. HTML5 Shiv поддерживает список всех HTML5 тегов, которые IE не поддерживает (пока), создает их по одному типу, позволяя затем стилизировать их под свои нужды. Вот, для начала, несколько новых семантических HTML5, котрые можно пробовать использовать: article, section, header, footer и nav.

Smart формы

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

<input type="email" />
<input type="url" />
<input type="number" />
<input type="tel" />

А как насчет старых браузеров? Приятный момент: если они видят тип поля, который не понимают, то они создают поле type="text" — тип поля по умолчанию.

Браузеры поддерживающие HTML5 в разной степени понимают значения типов полей, но пока не стоит отказываться от скриптов проверки форм.

Если тебя мучает вопрос, зачем мне беспокоится новых типах полей, если уже есть готовые скрипты, то ты никогда не заполнял веб-форму на iPhone. В iPhone клавиатура ввода меняется в зависимости от того, что требуется ввести: адрес электронной почты сразу получает символ @ и нужно просто добавить остальное, номер телефона получит собственную клавиатуру и так далее. Что бы получить такую функциональность достаточно использовать «правильные» типы полей.

Что бы формы стали еще удобнее и понятнее появился новый атрибут: placeholder. Его значение — реализация замещающегося текста, который пропадет при получении полем фокуса и снова появляется, если уйдя с поля,его оставили незаполненным (а раньше такие фичи приходилось делать на javascript):

<input type="email" placeholder="укажи свой email" />

Что из HTML5 ты сможешь использовать уже скоро

Не все из HTML5 спецификации можно уже использовать (и нет, не все эти причины только из-за IE), но на которые следует обратить внимание уже сейчас.

Fancy шрифты

Иногда каждый веб-дизайнер хочет, чтобы все пользователи могли посещать его сайт и видеть его любимый нестандартный шрифт. C CSS3 @font-face ты будешь иметь такую возможность. «Несогласными» по этому вопросу долгое время были Firefox (до версии 3.5) и Mobile Safari (до 4 IOS). Если, конечно, у тебя много пользователей на этих браузерах, то можешь немного повременить с нововведениями.

Однако нет никаких причин, почему ты должен пытаться для каждого пользователя делать идентичный сайт. Можно просто отображать разные шрифты в разных браузерах. Если же ты хочешь предложить нестандартный шрифт и для менее продвинутых браузеров — javascript и Cufon тебе в помощь.

Тени и кривые

Следующими, приятными для разработчика особенностями, ожидаемыми в будущем, будут текстовые тени, тени блока, скругленные углы блока. Опять же, это применимо, если не принципиально, чтобы сайт был попиксельно идентичный в каждом браузере. Заценить некоторые возможности CSS3 можно на css3generator.

Что из HTML5 можно будет когда-то использовать

Эта категория включает элементы и функции, которые разработчики и веб-дизайнеры ждут уже в течении нескольких лет. К сожалению, может пройти ещё несколько лет, прежде чем мы получим реальную поддержку, которая даст возможность полностью использовать их.

Brilliant forms

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

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

<input type="range" min="0" max="100" step="2" value="50" />

Выброр цвета :

<input type="color" />

Поле даты (допустимые значения по типу month, week, time, datetime, и datetime-local):

<input type="date" />

Если тебе нужно что-то особенное, не соответствующее ни одному из этих стандартных полей, можно создать свое собственное с RegExp (regular expression) моделями. Вот пример для кредитных карт:

<input type="text" pattern="[0-9]{13,16}" />

И, наконец, как сказать браузеру, что это поле обязательно для заполнения:

<input type="text" required />

Ни один из этих тегов еще не имеет кроссбраузерной и кроссплатформенной поддержки, необходимой для реального использования. Но мы будем с нетерпением ждать, когда ситуация изменится.

Print-like layouts

Другая особенность CSS3, которая сэкономит годы жизни дизайнерам — многоколоночный макет (multiple column layouts.). Сейчас в качестве эксперимента есть поддержка в Firefox и Safari.

-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;

Location detection (обнаружение места)

С ростом интереса к таким услугам, как Gowalla и Foursquare, для браузера полезно знать, месторасположение пользователя. По очевидным причинам, впервые такая возможность была реализована в мобильных браузерах, но Firefox 3.5 и Safari 5 начали оказывать поддержку геолокации (в Chrome геолокация осуществляется при помощи Gears и находится сейчас на стадии постепенного перехода к HTML5).

Работа в автономном режиме из локального хранилища

Сохранение данных в «облаке» (cloud) — это замечательная идея, пока ты не окажешься без доступа в Интернет. Может быть, у тебя есть веб-приложение, работающее с большими объемами данных и обращениями к серверу чаще, чем хочется. Или, возможно, у тебя ограниченный пакет данных на мобильном устройстве и ты хочешь всю работу сделать автономно. Какой бы ни был вопрос, ответ заключается в использовании автономных веб-приложений с местным хранением данных и возможностью синхронизации, когда ты подключешься к сети.

Браузеры которые сейчас поддерживают способность к работе в автономном режиме: Firefox 3.5 +, Safari Mobile 3.1 +, Safari 4 + и Chrome 4+.

Canvas, анимация и трансформация

Одна из обещанных возможностей HTML5 — полностью анимированный и иллюстрированный Интернет с использованием элемента canvas и различных свойств CSS3. Вот как обстоят дела на середину июля:

Спецификация

Описание

IE

Firefox

Сафари

Хром

canvas

Динамическая графика

9

3

3.2

3

canvas text API

Отображение текста на холсте

9

3.5

4

3

Transitions

Анимация свойства элементов (простые)

?

4

3.2

3

Animation

Анимация свойств элементов ( комплекс)

?

?

4

3

3D canvas graphics/WebGL

Динамические 3D-графики с аппаратным ускорением

?

4

5

5

Transforms

Поворот и масштаб элементов

?

3.5

3.2

3

3D Transforms

Преобразования через третье измерение

?

?

5

?

Быстрый доступ к передовым разработкам HTML5

Если ты слишком нетерпелив и тебе не хочется ждать, пока IE8 умрет от старости (а также IE6 и 7), есть несколько способов пойти дальше (но не забывай об особенностях аудитории твоего сайта). Например, Google's Chrome Frame Когда IE-пользователи установили GCF, можно вызвать его использование этим маленьким дополнением в head страницы :

<meta http-equiv="X-UA-Compatible" content="chrome=1" />

Плюс небольшой javascript (предоставленный Google) перенаправляет пользователей без установленного GCF. Это все дает возможность работать без ограничений IE.

Элементы, перечисленные в этой статье, всего малая часть из тех, что в настоящее время включены в HTML5 и CSS3. Если есть огромное желание использовать новинки — существуют проекты, где рассказано и показано как заставить это понимать более понятливым браузерам.

Большинство средств массовой информации в вопросах касательно HTML5 сосредоточились на политике, перспективах будущего, на том, что полная поддержка будет ещё не скоро, что HTML5 станет «убийцей Flash» и т.д. Для меня же главное то, что HTML5 это очень необходимое и давно назревшее обновление HTML4. И самое главное, что его можно начинать применять уже сегодня.

Материалы

  • infoworld