[Перевод] HTML5 и будущее Web

30 декабря 2009 года
Остальное
  • Содержание

Перевод статьи HTML5 and The Future of the Web журнала Smashing Magazine.
 

Некоторые с радостью приняли HTML5, некоторые отбросили его далеко в будущее, а некоторые оставили неиспользуемый стандарт в пользу старой привычки при написании Web-сайтов. Вы, вероятно, слышали про обсуждение в блогах этой "горячей" новости.

Скрипты, подобные плагинам jQuery, изменяющие приемы программирования, и методы разработки развиваются очень быстро в Интернет сообществе. И мы все понимаем: то, что мы узнаем сегодня, может быть устаревшим завтра.

Обычно мы относимся к коду непосредственно, поскольку он, как правило, не меняется долгое время. Поэтому когда приходит время изменять ваш код, для вас - это большое дело, и приходится приложить достаточно усилий. К счастью, по слухам, мы имеем одно незначительное изменение, чтобы беспокоиться о нем.

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

Добро пожаловать в HTML5.

Каковы основы?

DOCTYPE

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

<!DOCTYPE html>

Также было любопытно, почему они выбрали "html" а не "html5"? Казалось, логичный способ сообщить браузеру, что текущий документ был написан в HTML5 и предложить хорошую модель на будущее. Оказывается, <!DOCTYPE html5> переключает IE6 в режим совместимости, поэтому <!DOCTYPE html> довольно хороший выбор (на мой взгляд).

В целом, мне действительно нравится новый DOCTYPE; он короткий, понятный, и, возможно, мы действительно сможем запомнить его наизусть и нам не придется его копировать от сайта к сайту.

Новые элементы, которые вы должны знать

При первом взгляде на HTML5, новые элементы немедленно бросаются в глаза. W3C действительно прислушивался к сообществу и планировал будущее, разрабатывая новые доступные элементы. У нас есть все: от основных структурных элементов, как <header> и <footer>, до таких, как <canvas> и <audio>, которые используют очень мощный API, что дает свободу для создания более удобных приложений, отдаляясь от Flash для хранения данных и анимации.

Новые структурные элементы

  • <header>

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

  • <nav>

Элемент nav зарезервирован для той части документа, которая содержит ссылки на другие страницы или ссылки на разделы страницы. Не все группы ссылок должны быть <nav> элементом, только первичная навигация.

  • <section>

Элемент section представляет собой общий документ или раздел приложения. Он действует так же, как и div, разделяя документ на части.

  • <article>

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

  • <aside>

Aside представляет информацию, которая имеет отношение к главной области документа. Обычно она выражается в боковых панелях, которые содержат элементы, такие как список статей блога, облака тегов, и т.д.

  • <footer>

Элемент footer предназначен для разметки нижней части не только текущей страницы, но и каждого раздела на странице. Таким образом, очень вероятно, что вы будете использовать <footer> несколько раз на одной странице.

Когда Вы посмотрите на эти новые элементы, похоже, что они только заменяют наши общие идентификаторы блоков div. И в некотором смысле, это так. Но, рисунок ниже показывает, что такие элементы, как <header> и <footer>, могут быть использованы более одного раза на одной странице, где они ведут себя больше как классы и обычные элементы HTML, которые можно использовать снова и снова, чтобы сохранить семантическую структуру.

Элементы как <header> и <footer> призваны не просто для обозначения верхней и нижней части текущего документа, они также представляют <header> и <footer> каждого раздела документа, как мы используем и <thead> и <tfoot> в таблицах.

Выгода использования этих структурных элементов в основном связана с тем, что они очень хорошо определены и обеспечивают отличный способ организации семантической структуры документа. Однако, эти элементы должны использоваться осторожно, потому что ими очень легко можно злоупотреблять.

Плавный переход от XHTML

Хотя HTML 4.01, XHTML 1.0 и HTML5 очень похожи, существуют некоторые небольшие различия в синтаксисе, которые легко могут остаться незаметными и сделать код невалидным. Имея это в виду, HTML5 имеет некоторый "резерв", чтобы сделать переход немного легче.

Например, разметка формы HTML5, правильный синтаксис для элементов ввода текста:

<input type="text" id="name">

Но также принято в качестве валидного кода, чтобы облегчить переход заядлых программистов XHTML (как я), которые используют самозакрывающиеся элементы:

<input type="text" id="name"/>

Те же правила применяются к <meta> и другим самозакрывающиеся элементам. Унаследованные элементы как <b> и <i> были также оставлены, чтобы помочь тем, которые переходят от HTML 4.01.

В чем преимущества?

Любая новая технология должна иметь выгоду, иначе зачем ее использовать? Если ваш старый код работает так же хорошо и эффективно, как новый, нет никаких причин обновлять его.

К счастью, HTML5 содержит новые замечательные функции, методы уменьшения кода и много других вещей, которые я бы назвал очень полезными. Большинство из них относятся к новым API и дереву DOM.

Расширение API

Наиболее очевидные преимущества, встроенные в HTML5, - многочисленные API и возможности, которые они открывают для будущих Web-приложений, и возможности хранения данных. Google Gears позволил нам хранить данные оффлайн, Flash познакомил нас с возможностью применения кэш-памяти. В HTML5, эти возможности теперь доступны для использования прямо в языке и легко могут быть расширены с помощью JavaScript.

HTML5 опирается на light scripting. Впервые стало возможно, что одна фронт-енд технология (помимо JQuery) полностью знает о другой. Конечно, мы связываем их с классами и идентификаторами, но до сих пор они воспринимались отдельно. Но так как Интернет развивается, нам нужно единство.

Автономное хранение данных

Самая важная роль HTML5, безусловно, возможности хранения данных. Такие программы, как Outlook и Thunderbird (а теперь и GMail в определенной степени) позволят вам просматривать ваши старые данные, находясь в автономном режиме. В HTML5, вы будете иметь ту же функциональность, только и в браузере. Это первый серьезный шаг на пути к сокращению разрыва между компьютером и Интернетом, а также открывает всевозможные двери для будущего Web-приложений.

W3C взял лучшие части различных Web-технологий и собрал их в то, что называется самым мощным языком разметки, на сегодняшний день.

Некоторые другие возможности HTML5 API

  • Drag & Drop

Drag & Drop API определяет систему перетаскивания на основе событий. Тем не менее, она не определяет сами "перетаскивания". API требует JavaScript для полноценной работы.

  • Video и Audio

Видео и Аудио API предназначен для вставки медиа вложений. Хотя поддержка сейчас ограничена, никогда не было ничего проще, чем:

<video width="400" height="360" src="vid.mp4">
  • Geolocation

Объект Geolocation может быть использован для определения местоположения пользователя (например, мобильного устройства).

Где я могу его использовать?

Даже с учетом очень ограниченной поддержки HTML5, Web слишком прогрессивнен, чтобы не создать условия для поддержки. В настоящее время, Safari является лучшей платформой для тестирования, так как она поддерживает большинство новых элементов и API. Конечно, это может измениться в любое время, поэтому следите за Opera, Chrome и Firefox и т.д.

Вы можете думать, что так как Safari - WebKit браузер, то все Webkit браузеры будут поддерживать одинаковые элементы, но, к сожалению, это не так. Хотя многие HTML5 элементы поддерживаются в Webkit, существуют те, которые не поддерживаются, например, <video>.

Мобильные устройства

Чтобы сейчас эффективно начать использовать HTML5, мы должны контролировать обстановку, в которой он используется. С поддержкой не все так хорошо, как хотелось бы, поэтому нелогично использовать его в полной мере. Но так как Webkit - лидер на пути к HTML5, можно смело сосредоточиться на устройствах на базе Webkit.

3 модных мобильных устройства: Palm Pre, iPhone 3G и новый Google Android - используют браузеры Webkit.

Safari лидирует в области мобильного HTML5, iPhone (с последним обновлением) является единственным устройством, который правильно рендерит <audio> элемент. Поскольку эти устройства очень молодые и все используют одинаковый движок, вероятность быстрого обновления их программного обеспечения довольно высока.

Сейчас можно с уверенностью использовать многие HTML5 функции в iPhone при разработке Web-приложений и в основном можно ожидать, что и Android последует примеру Apple.

Каким образом мы можем развиваться?

Даже с учетом восхищения HTML5, переход от HTML4.01 & XHTML1.0 будет очень медленным. Потребуется время, чтобы разработчики смогли протестировать все функции, браузеры смогли наверстать упущенное, а пользователи, что самое длительное, перешли со старых браузеров. И мы должны найти законный способ продвинуться вперед, не разрушая прошлое.

Пока мы не можем сделать полный переход и нет никакого смысла указывать тем, кто развивает Web. Мы все знаем, что любой ответственный разработчик не откажется от поддержки браузеров, которые все еще активно используется. Поэтому вместо того, ругаться на всех, вот некоторые вещи, которые могут помочь нам продвинуться в правильном направлении:

Имена блоков div

Семантическое соответствие имен ваших div блоков и новых HTML5 элементов поможет вам привыкнуть к названиям, а также новым функциональным возможностям. Это похоже на обучение вступления Enter Sandman (пример для гитаристов), - не очень сложно, но требует немного практики, чтобы играть естественно.

Прежде чем приступить писать сайты на HTML5, я рекомендую попробовать мягкий переход с незначительным изменением имен ваших div элементов. В этом приеме нет недостатков, вы можете даже использовать новый DOCTYPE с очень маленькими последствиями.

Работа с JavaScript

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

Создание новых элементов в JavaScript

Работать в jQuery здорово, но, как выясняется, в JavaScript есть встроенная функция для создания новых элементов:

document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('aside');
document.createElement('nav');
document.createElement('article');
document.createElement('figure');
document.createElement('time');

... и так далее, что сейчас в моде.

Это позволит вам применить стили к этим элементам в Internet Explorer. Опять же, недостаток использования этого метода заключается в том, что без JavaScript сайт будет не только без стилей, но и все непризнанные элементы по умолчанию будут в линию. Таким образом, дизайн вашего сайта буквально распадется.

Client side JavaScript не является решением проблемы в использовании HTML5. Server Side JavaScript - вот это совсем другая история...

Построение приложений

Построение Web-приложений под конкретный браузер вполне допустимо. Как я уже говорил выше, если мы можем контролировать окружение, мы можем гораздо лучше управлять особенностями приложения. Google в настоящее время пытается сделать это с Google Wave.

Идеей нового продукта является революция в общении, и Google применяет новейшие технологии для ее реализации. Google Wave построен на HTML5 и пока не используется во всех браузерах. Но все в порядке, так как они контролируют посетителей, выпуская версии разработчикам для тестирования.

Благодаря Wave, Google продвигает HTML5 как можно дальше. Они делают блоги, вики, чат, электронную почту, объединяя их в одном месте.

Вот как выглядит раздел Входящие в Google Wave.

Ниже - своего рода вики/чат со всеми видами общения в реальном времени.

Google Wave, разработанный с использованием HTML5, - определенно большой шаг вперед, который мы видели в этой области. Они проделали огромную работу, объединив творческий и инновационный продукт.

Фокусируясь на мобильных устройствах

Так же, как Google выборочно выпускает различные версии Google Wave разработчикам, мы можем делать то же при работе с мобильными устройствами. Получая информацию от user agent, мы можем разработать конкретные приложения, использующие HTML5 для поддерживаемых устройств.

Ориентироваться на user agent устройства - не идеальный метод разработки, но когда мы нацеливаемся на конкретное устройство, например iPhone, до Pre или Android, - это хороший способ.

В настоящий момент лучшая мобильная платформа для тестирования - это iPhone. После установки недавнего обновления программного обеспечения, он имеет практически полную поддержку. Но, если вы просто хотите использовать новые элементы, подойдет любая из трех указанных выше мобильных платформ. Если вы ищете API поддержку, я предлагаю iPhone.

Заключение

Несмотря на крепкий фундамент, установленный предыдущими версиями (X)HTML, и большое сообщество, окружающее Web-стандарты, мы вступаем в новую эпоху с богатыми знаниями и возможностью учиться на своих ошибках (и делать новые). HTML5 будет очень мощным языком разметки, и все зависит от нас, как получить пользу от его использования.

Есть так много замечательных особенностей, с нетерпением ожидаемых от API. Мы можем делать данные доступными в автономном режиме, легко сочетать технологии и создавать очень сложные анимации. Если у вас есть время, я призываю вас просмотреть всю спецификацию и познакомиться поближе с новыми "фишками" (а их много), так что мы можем использовать HTML, чтобы сделать Web-приложения крепче, богаче на многие годы.

Ура, HTML5! На него возлагаются большие надежды.

Понравилась статья? Подпишись на RSS.

Коллекции Mootools скриптов Создание иконок и прелоадеров

Комментарии

  • Владимир написал 30 октября 2010 года

    Хорошая и полезная обзорная статья. Хотелось бы ещё увидеть примеры использования.

    Ответить