Файл: История возникновения HTML 5 и Web-технологий.pdf

К основным преимуществам использования HTML 5 относится:

• В основном HTML5 совместим с существующими стандартами для HTML 4. Новые средства разметки работают согласно существующих, новые API основываются на существующих JavaScript / DOM, которые разработчики используются в течение многих лет.

• Добавляет новые мощные средства в HTML, которые были ранее доступны в Интернет только с помощью технологии плагинов, таких как Flash, или с помощью сложного кода JavaScript или иных специальных приемов.

• Более эффективен для написания динамических приложений, чем предыдущие версии HTML.

• Имеет четкий алгоритм синтаксического анализа, поэтому все браузеры, которые реализуют HTML 5, будут создавать одинаковое DOM дерево с одной разметкой, что является огромным плюсом для совместимости.

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

HTML5 должен стать более гибким и устойчивым языком гипертекстовой разметки, как HTML 4.0, поэтому в стандарте большое внимание отводится обратной совместимости. С одной стороны, новый язык не полностью совместим с предыдущими версиями, но, с другой стороны, имеет весомые отличия, например, как XHTML 2.0.

На сегодняшний день HTML5 известен в двух форматах - как разновидность языка XHTML и как оптимизированная модификация HTML. Разработчики web-страниц могут использовать любой из этих форматов в своей деятельности. Согласно первому формату новый язык согласуется с XML 1.0, таким образом разработчикам предоставлены все преимущества языка XML и сопутствующих технологий. Во втором формате HTML5 ликвидирована формальная совместимость с SGML. Все предшествующие стандарты HTML5 претендовали на данную совместимость, однако никакой браузер не мог обработать код HTML со сложными правилами SGML. Вместо этого применялись простые алгоритмы, распознающие набор определенных атрибутов и элементов.

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

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

---

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

Еще одной ключевой особенностью нового стандарта HTML5 является то, что производит описание документа HTML5 в определении объектной модели (DOM). Перед тем, как показывать web-страницы браузер создает древовидную структуру объектов и соответствующих элементов.

Данный этап преднамеренно скрывался в устаревших стандартах, однако HTML5 данный этап демонстрирует в виде соответствующего представления документа.

Это позволяет включить в спецификацию объекты, свойства и методы DOM, которые широко используются с незапамятных времен, однако никогда не были стандартизованы: window.open () alert (), prompt () document.links, document, images, innerHTML, contentEditable и так далее. Наконец, в HTML 5 официально включен элемент embed.

Однако HTML 5 содержит в своем составе не все, что поддерживается в браузерах. Некоторые элементы, наоборот, удалены из стандарта: acronym, applet, basefont, big, center, dir, font, isindex, s, strike, tt, u. Отсутствуют фреймы (frame, frameset, noframes), хотя остался элемент iframe. Нет больше атрибутов, которыми почти никто не пользовался (accesskey, longdesc и др.) или которыми нет смысла пользоваться (align, border, valign, cellpadding, cellspacing и др.). Некоторые старые элементы иначе переосмыслены: например, i и b теперь означают разные формы смыслового выделения, а не курсив и полужирный шрифт; hr отвечает за разрыв в структуре документа.

Введена замена следующих элементов:

• <applet>, <object> заменено тегом <embed> (используется для внедрения объектов);
• <acronym> заменено тегом <abbr> (используется для аббревиатур);
• <bgsound> заменено тегом <audio> (для внедрения проигрывателя на страницу);
• <frame> заменено тегом <iframe>;
• <listing>, <xmp> заменено тегами <pre> и <code> (для вставки листингов программ и кодов);
• <plaintext> - заменено тегом <pre>.

Элемент menu получил второе значение и позволяет создавать настоящее меню, а address ограничен в правах и предназначен строго для контактной информации в узком контексте.

Также в HTML5 введены множество новшеств. Для статей, блогов, документации и подобных материалов будут полезны элементы article и section, а также новая система заголовков и рубрикации. "Шапка" и "подвал", панель навигации и боковая панель описываются элементами header, footer, nav и aside.

Для мультимедийного содержания появились элементы audio и video. Они внедряют в страницу соответствующий ресурс и обеспечивают стандартные элементы управления - кнопки запуска, паузы и остановки, регулятор громкости.

---

Для управления отображением аудио доступны атрибуты, перечисленные в таблице 1.

Таблица 1

Атрибуты тега <audio>

Атрибут	Описание
controls	Показывает или прячет кнопки управления проигрыванием
autoplay	Начинает воспроизведение сразу после отображения браузером
loop	Повторяет воспроизведение аудио-файла
src	URL аудио-файла
preload	Варианты значений для загрузки файла перед воспроизведением: none: не буферизировать файл заранее metadata: загружать метаданные из файла auto: загрузить весь файл до воспроизведения

Разные браузеры отображают управляющие элементы по-разному, так как это не определено в спецификации W3C (рис. 1). К моменту утверждения стандарта разработчики браузеров обещают добавить возможность стилизации элементов управления с помощью CSS-стилей.

Рис.1 Представления элементов управления тега <audio> в разных веб-обозревателях

Тег <video> имеет дополнительные атрибуты, позволяя настроить то, как следует отображать видео, однако атрибуты controls, autoplay, loop, src и preload семантически равносильны таким же атрибутам тега <audio>. Дополнительные возможные атрибуты тега перечислены в таблице 2.

Таблица 2

Атрибуты тега < video>

Атрибут	Описание
width	Ширина видео-фрагмента
height	Высота видео-фрагмента
poster	Адрес картинки, которая будет показываться до начала воспроизведения видео файла

Для тех браузеров, где эти элементы не поддерживаются, HTML 5 позволяет дополнить их альтернативным содержанием - например, роликом Flash, с помощью которого сейчас внедряется большинство аудио- и видеозаписей. В продвинутых браузерах полноценно сработает элемент audio или video, а во всех других - альтернативный ролик, так что все пользователи останутся довольны.

Здесь проявляется еще один принцип - новые возможности HTML 5 должны создавать как можно меньше проблем в тех браузерах, где они не поддерживаются. Почти все нововведения языка устроены так, что для старых браузеров можно обеспечить их реализацию с помощью альтернативного содержания, CSS, JavaScript и других технологий. Отдельного внимания заслуживает элемент canvas, предоставляющий область для рисования изображений "на лету "средствами JavaScript.

---

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

Элемент <canvas> и соответствующий API для рисования и анимации. Canvas использует команды JavaScript для создания растровой графики, то есть линий, фигур и текста, импорта и манипуляций с изображениями и видео, экспорта в различные форматы изображений и многих других вещей на странице. Canvas задает прямоугольную область, которая контролируется разработчиком и предназначена для сценариев визуализации двумерных 2D-форм и растровых изображений.

Элемент <canvas> идеально подходит для создания визуальных материалов, которые улучшают пользовательские интерфейсы, диаграммы, фотоальбомы, схемы, графики, анимированные материалы и встроенные графические приложения.

Собственно, массовый интерес к HTML 5 начался после того, как Firefox и Opera решили поддерживать этот элемент.

Формы в HTML5 также претерпели существенные изменения. Стандартные процедуры заполнения и отправки формы, описанные в прежних версиях HTML, уже сейчас не используются, поэтому разработчики сайтов создают собственные расширения интерфейса, средства проверки, новые элементы управления. В HTML 5 эти разработки урегулированы со стандартными элементами, атрибутами и интерфейсами DOM.

Например, input type = "number" - это поле для ввода числа, а input type = "range" - ползунок для регулировки громкости или чего-то похожего. В качестве второстепенных атрибутов данный подвид тега <input> может принимать параметры, определяющие стиль обрисовки и другие характеристики элемента (таблица 3).

Таблица 3

Атрибуты тега <input type = "number">

Атрибут	Описание
value	Значение по умолчанию
min	Минимальное значение, которое может ввести пользователь
max	Максимальное значение, которое может ввести пользователь
step	Шаг увеличения значения

Атрибуты min, max и step определяют диапазон и точность допустимых значений в поле. Элемент datalist обеспечивает поле со списком, а элемент output - область для вывода динамически генерируемых результатов. Атрибут required для элемента управления означает, что этот элемент обязателен для заполнения, без него форма не будет отправлена. Атрибут autofocus позволяет установить фокус ввода в этот элемент.

---

Метод checkValidity () проверяет правильность заполнения полей. До сих пор эти возможности имитировались на сайтах с помощью недоработанных сценариев JavaScript. В стандарте предлагается элемент datagrid для организации динамических структур данных, элемент command предназначен для вызова пользовательских команд, элемент progress - индикатор хода выполнения операции, а также реализованы средства DOM для редактирования содержания прямо на странице, перетаскивания, выделения, работы с буфером обмена.

Атрибут тега <input> – datalist. Выдает список возможных значений в поле, при нажатии клавиши “наверх” или “вниз”. Первый вводимый в поле символ осуществляет фильтрацию значений по этой букве. Данный атрибут может быть полезен в случае как усложненный вариант самостоятельного вписывания решения задачи (текстом), для осуществления проверки на правописание. Отличие данного подхода от использования готовых решений на базе AJAX, когда данные при вводе пользователем подгружаются с сервера в том, что весь список уже заранее подготовлен (скачан) и поиск ведется без использования сетевого подключения.

Атрибуты тега <input> – email, website, phone являются помощниками для мобильных устройств, где, в зависимости от данной пометки, телефоны могут автоматически выбрать специальную раскладку клавиатуры, предназначенную для облегчения ввода данных запрашиваемого формата.

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

Вывод: в данной главе проведен обзор базовых характеристик гипертекста и особенности тегов, используемых в языке гипертекстовой разметки HTML 5.

3. HTML5 как эффективное средство создания Web-приложений: отличия от предыдущих версий

В последнее время все большее признание и развитие в сети Интернет приобретают так называемые браузерные web-приложения. Для решения многих современных задач сегодня нет необходимости обращаться к домашним и офисным стационарным системам, достаточно лишь иметь web-обозреватель и выход в Интернет. Серьезным шагом в этом направлении стало появление языка программирования HTML5.

---