Знакомство с HTML5!

Крис Миллз · 14 января 2011 г.

Введение

Большая часть Учебного курса по стандартам web (http://www.opera.com/wsc) создана на последней стабильной версии языка HTML — HTML 4.01. Спецификация HTML 4.01 была завершена в 1999 г., более 10 лет назад на момент написания этой статьи! Но жизнь не стоит на месте и вам должно быть хорошо известно, что в настоящее время существует новая действующая версия HTML — HTML5!

Почему же мы, несмотря на это, учим вас HTML 4.01? В данной статье мы ответим на этот вопрос и на многие другие. Мы сообщаем все необходимые основные сведения о том, почему появился HTML5, и где он находится в настоящий момент. Мы обсудим, как он может вписаться в процесс обучения прямо сейчас, даже если вы являетесь новичком дизайна или разработки web, и мы рассмотрим некоторые основные свойства HTML5, чтобы вы могли увидеть, что он добавляет к уже достаточно мощному языку HTML.

Почему HTML5?

Когда HTML 4 приближался к завершению, консорциум W3C решил (на рабочем семинаре в 1998 г. - http://www.w3.org/MarkUp/future/), что с точки зрения языков разметки будущим Web является XML и XHTML, а не HTML. Поэтому W3C подвел черту под HTML 4.01, и сконцентрировался после этого на спецификации XHTML 1.0, законченной в начале 2000 г. Язык XHTML 1.0 почти такой же, как и HTML 4.01, за исключением того, что использует правила синтаксиса разметки из XML. Вскоре последовал язык XHTML 2.0 (http://www.w3.org/TR/xhtml2/), который добавил целый пакет новых мощных средств и тип mime только для XML, с целью стать следующей основой Web.

Проблема с XHTML 2.0 состояла в том, что он не являлся обратно совместимым с уже имеющейся в Web разметкой – элементы работали по-разному, тип mime XHTML (application/xhtml+xml) вообще не работал в IE, который по-прежнему удерживает большую долю рынка браузеров на время написания, доступные инструменты разработчиков были не готовы для работы с XML, который на самом деле не отражал, что разработчики Web ДЕЙСТВИТЕЛЬНО делали там, в ДИКОЙ, ДИКОЙ сети Web.

В 2004 г., группа одинаково мыслящих разработчиков и исполнителей (включая представителей Opera, Mozilla, и немного позже, Apple) собрались и сформировали отколовшуюся группу по спецификации с названием WHATWG (http://www.whatwg.org/), с целью написать лучшую спецификацию разметки HTML, которая сможет помочь созданию нового поколения приложений Web, не разрушая – что было критически важно – обратной совместимости.

В результате появилась спецификация Web Applications 1.0 (http://www.whatwg.org/specs/web-apps/2005-09-01/), которая документирует существующие совместимые поведение и свойства браузеров, а также новые свойства стека Web, такие как API и новые правила синтаксического анализа DOM. После множества дискуссий между членами консорциума W3C 7 марта 2007 г. работа над HTML была возобновлена новой Рабочей группой HTML в виде открытого процесса участия. За несколько первых дней к процессу присоединились сотни участников для продолжения работы над следующей версией HTML. Одним из первых решений Рабочей группы HTML было принятие спецификации Web Applications 1.0, которую назвали HTML5.

Язык HTML5 является действительно хорошей вещью для разработчиков и дизайнеров Web, так как он:

• Большей частью обратно совместим с тем, что там уже есть — не требуется учить совершенно новые языки для использования HTML5. Новые средства разметки работают таким же образом, как и старые (хотя семантика некоторых элементов изменилась – мы рассмотрим эти различия в будущей статье), и новые API основываются большей частью на том же JavaScript/DOM, который разработчики программировали в течение многих лет.
• Добавляет новые мощные средства в HTML, которые были ранее доступны в Web только с помощью технологии плагинов, такие как Flash, или с помощью сложного кода JavaScript и специальных приемов. Проверка форм и видео являются лучшими примерами.
• Лучше подходит для написания динамических приложений, чем предыдущие версии HTML (HTML был создан первоначально для создания статических документов).
• Имеет четко определенный алгоритм синтаксического анализа, так что все браузеры, реализующие HTML5, будут создавать одинаковое дерево DOM из одной и той же разметки, независимо от правильности. Это огромный выигрыш для совместимости.

Что HTML5 означает для меня?

Для начала давайте ответим на вопрос, который должен вертеться в голове с начала чтения этой статьи - зачем изучать стандарты Web с помощью HTML 4.01, если на горизонте виднеется HTML5? Прежде всего, когда Учебный курс по стандартам Web был впервые опубликован в 2008 г., HTML5 был по большей части в постоянном изменении, в отличие от сегодняшней ситуации, и было бы нежелательно учить что-то, что может измениться в ближайшем будущем.

Второе и более важное, HTML5 обратно совместим – в практическом смысле это означает, что весь материал из HTML 4.01 находится также в HTML5. Поэтому, изучая HTML 4.01, вы изучаете также большую часть HTML5. Эта статья и другие из этого раздела нацелены на то, чтобы заполнить пробелы в ваших знаниях, излагая дополнительные возможности, которые HTML5 добавляет поверх HTML 4.01, например, дополнительные семантические элементы, и новые API, которые позволяют управлять воспроизведением видео и рисовать на холсте. Я предоставлю в конце статьи множество ссылок на дополнительную информацию о таких средствах.

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

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

Свойства HTML5

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

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

Новые семантические элементы: Как вы возможно уже знаете, семантика является очень важной в HTML — мы всегда должны использовать для работы подходящий элемент. В HTML 4.01 мы имеем проблему — да, существует много элементов для определения специальных средств, таких как таблицы, списки, заголовки, и т.д., но существует также много общих свойств web-страницы, которые не имеют элемента для их определения. Представьте верхние и нижние колонтитулы сайта, навигационные меню, и т.д. — до сих пор мы определяли их с помощью <div id="xxx"></div>, которые мы можем понять, но машины не могут, кроме того, различные разработчики web будут использовать различные ID и классы. К счастью, HTML5 содержит новые семантические элементы, такие как <nav>, <header>, <footer> и <article>. Мы познакомимся с ними подробнее в лекции "Новые структурные элементы HTML5".

Новые свойства форм: HTML 4.01 уже позволяет создавать удобные, доступные web-формы, но некоторые общие свойства форм являются не слишком удобными и требуют специальных усилий для реализации. HTML5 предоставляет стандартизованный, простой способ реализации таких свойств, как выбор даты, ползунки и клиентская проверка. Формы HTML5 подробно рассматриваются в лекции "Новые свойства форм в HTML5".

Собственная поддержка видео и аудио: В течение многих лет видео и аудио в Web делалось, вообще говоря, с помощью Flash. Фактическая причина, почему технология Flash стала так популярна на заре 21 века, состояла в том, что открытые стандарты не смогли предоставить для различных браузеров совместимый механизм реализации таких вещей, поэтому различные браузеры реализовали различные конкурирующие способы выполнения одних и тех же вещей (например, <object> и <embed> ), делая тем самым весь процесс действительно сложным. Flash предоставлял высококачественный, легкий способ реализации работы видео в различных браузерах.

HTML5 содержит элементы <video> и <audio> для простой реализации собственных видео и аудио плееров с помощью только открытых стандартов, и также содержит API, позволяющий легко реализовать индивидуальные элементы управления плеером. На сайте dev.opera.com имеется много статей, посвященных видео и аудио в HTML5, но лучшим местом для начала является лекция Брюса Лоусона и Пэто Лауке "Введение в видео HTML5". Также полезно познакомиться с лекцией "Улучшение доступности видео-плеера HTML5".

API рисования на холсте: Элемент <canvas> и соответствующий API позволяют определить на странице область для рисования, и использовать команды JavaScript для рисования линий, фигур и текста, импорта и манипуляций с изображениями и видео, экспорта в различные форматы изображений, и многих других вещей. Больше о холсте в HTML5 можно узнать в лекции Миаи Сукан "Основы холста HTML 5".

Сокеты Web: Этот API (определенный в спецификации Сокеты Web -http://www.w3.org/TR/websockets/, отдельно от спецификации HTML5) позволяет открывать постоянное соединение между сервером и клиентом на определенном порте, и посылать данные в обоих направлениях, пока порт не будет закрыт. Это существенно улучшает эффективность приложений web, так как данные могут непрерывно и аккуратно передаваться между клиентом и сервером без постоянной перезагрузки страницы, и без постоянного опроса сервера, чтобы проверить, нет ли доступных обновлений.

Лекция "Введение в сокеты Web" будет хорошим началом.

Автономные приложения web: HTML5 предоставляет ряд свойств, позволяющих приложениям web выполняться в автономном режиме. Кэши приложений позволяют сохранить копию всех ресурсов и других файлов, необходимых для локального выполнения приложения web, и базы данных Web SQL позволяют сохранить локальную копию данных приложения web. Совместно они позволяют продолжать использовать приложение, когда отсутствует соединение с сетью, и затем синхронизируют изменения с основной версией на сервере, когда сеть снова становится доступной.

Хранилище Web: Cookies предоставляют в какой-то степени локальное хранилище данных, но их использование довольно ограничено. Web хранилище HTML5 позволяет хранить значительно больше данных, и делать с ними значительно больше. Прочтите лекцию Шветанка Диксита "Хранилище Web: более удобное и мощное клиентское хранилище данных", чтобы больше об этом узнать.

Web workers: Общая проблема, встающая перед приложениями web, состоит в том, что их производительность страдает, когда требуется обработать много данных, в связи с тем, что все происходит в одной нити/процессе (только одна последовательность обработки может выполняться в текущий момент). Web Workers смягчают эту проблему, позволяя создавать фоновые процессы для выполнения значительного объема вычислений, позволяя основному процессу продолжить выполнение других задач. Узнать больше о Web Workers можно в лекции Дениела Дэвиса "Web Workers за работой!".

Геолокация: Спецификация геолокации (http://dev.w3.org/geo/api/spec-source.html) (также не являющаяся частью спецификации HTML5) определяет API, который позволяет приложению web легко получить доступ к данным в любом местоположении, которое стало доступным, например, с помощью средств GPS устройства. Это позволяет добавлять в приложения различные полезные свойства, связанные с местоположением, например, выделить контент, который больше подходит для местоположения. Чтобы получить общее представление о возможностях геолокации, прочтите лекцию "Как использовать API геолокации W3C".

Примечание: CSS3 СОВЕРШЕННО ОПРЕДЕЛЕННО НЕ является HTML5, и никогда не будет. Не позволяйте отделу маркетинга говорить вам обратное.

Заключение

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