Использование технологий HTML5 для построения десктопных приложений

Однако HTML5 поддерживает два новых элемента <audio> и <video>, которые позволяют Web-разработчикам включать мультимедийный контент, не задумываясь о том, установлены ли в браузере пользователя дополнительные подключаемые модули. Некоторые браузеры, в том числе Mozilla Firefox, Apple Safari и Chrome Google, начали поддерживать эти элементы и предоставлять стандартные средства для управления воспроизведением в браузере – на случай, если пользователь захочет воспользоваться этими средствами. Кроме того, был предоставлен набор стандартных API-интерфейсов JavaScript, позволяющих разработчикам при желании создавать собственные органы управления воспроизведением. Главное преимущество воспроизведения мультимедийного контента средствами самого браузера состоит в том, что теоретически при этом требуется меньше ресурсов центрального процессора, что приводит к экономии энергии.

Атрибут controls предназначен для определения того, нужно ли будет отобразить интерфейс стандартного медиаплеера или нет. Необязательный атрибут poster может быть использован для определения статического изображения, отображаемого в контейнере video до того, как начнется воспроизведение записи. Существуют форматы видео, которые имеют аналогичную встроенную возможность (например, MPEG4), но использование описанного выше подхода позволяет добиться этой функциональности без привязки к конкретному кодеку. Точно таким же образом можно встраивать в документы аудиозаписи с помощью элемента audio. Большинство атрибутов у тегов audio и video совпадают, но у audio по понятным причинам отсутствуют width, height и poster. В стандарте HTML 5 предусмотрен элемент source для вставки ссылок на аудио- и видеофайлы в нескольких альтернативных форматах, из которых браузер сможет делать выбор наиболее предпочтительного варианта, на основе поддерживаемых им кодеков и указанных в коде типов формата контента. При использовании вложенных тегов source, атрибут src контейнеров audio и video должен быть опущен, в противном же случае, теги source будут проигнорированы. Для разработчиков, которые сами желают контролировать функционирование пользовательского интерфейса и обеспечивать лучшее его соответствие общему дизайну страниц, предоставлен специальный API, через который можно управлять процессом воспроизведения. В этом API определены методы play() и pause() (смысл которых понятен из названия), а так же свойство currentTime, которое в следующем примере используется для «перемотки» видеозаписи в начало.

Однако эти новые  мультимедийные элементы порождают  несколько существенных проблем  – это поддержка соответствующих файловых форматов каждым браузером и необходимость лицензирования некоторых кодеков, которыми могут быть закодированы вышеуказанные файлы. Браузеры Mozilla и Opera ориентированы на использование видеоконтейнера и кодека с открытым исходным кодом Theora, который не требует патентного лицензирования для включения соответствующих кодеков в Web-браузере. С другой стороны, компании Apple и Google не удовлетворены качеством кодека Theora, особенно для доставки HD-контента (High Definition) на ресурсах, подобных YouTube. Они предпочитают кодек H.264, которым, как правило, кодируются файлы форматов MP4, MOV и MKV.

Подобные проблемы имеют  место и в области аудиокодеков. Применение форматов MP3 и AAC ограничено патентами – в отличие от формата Vorbis. Проблема аудиоформата Vorbis состоит в его недостаточно широком распространении, поскольку портативные медиаплееры и многие программные медиаприложения не поддерживают этот формат.

В ближайшем будущем  предстоит принять множество  решений в области элементов <video> и <audio> языка HTML5. В настоящее время, если разработчик собирается поддержать все браузеры, для этого нужно предоставить видеоконтент в разных форматах, а в качестве резервного средства следует использовать Flash Video. Поэтому пока в качестве унификации и упрощения разработки эти новые элементы оказываются бесполезными.

Примеры:

<video src="http://www.cafeaulait.org/birds/sora.mov" />

<audio src="spacemusic.mp3" autoplay="autoplay" loop="20000" />

 

 

 

 

 

 

 

Представление документов

 

В отличие от предыдущих версий HTML и XHTML, описанных в терминах их собственного синтаксиса, HTML 5 описывается согласно терминам Document Object Model (DOM). Для внутреннего представления документа браузером используется древовидная структура. Такое дерево содержит в себе элемент title в контейнере head, а так же h1 и p в body. Основная причина (и преимущество) выбора DOM для определения стандарта HTML 5 состоит в том, что сам язык в таком случае может быть описан независимо от синтаксиса. Существуют два основных типа синтаксиса, согласно которым может быть представлен HTML документ: HTML-сериализация (так же известная как HTML 5) и XML-сериализация (или XHTML 5). HTML-сериализация основана на обычном для более ранних версий синтаксисе HTML (созданном на базе SGML). Ее определение ориентировано на лучшее соответствие тому, как в действительности браузеры обрабатываю HTML. Как и в предыдущих версиях HTML, некоторые теги остаются опциональными, и их наличие автоматически подразумевается. В отличие от предыдущего примера, здесь присутствует атрибут xmlns, а так же закрывающий тег p (чье наличие в контексте XML обязательно). Для определения разницы между сериализациями, браузеры будут использовать значение MIME-типа. Любой документ, определенный как text/html, должен соответствовать требованиям HTML-сериализации. В случае же если MIME-тип имеет значение application/xhtml+xml, должны быть удовлетворены требования XML-сериализации. Выбор подходящего типа сериализации возлагается на веб-мастера, т.к. ни один из двух возможных вариантов изначально не может считаться предпочтительным абсолютно во всех случаях. Преимущества использования HTML-сериализации:

• Обратная совместимость.
• Хорошо знакомый синтаксис по предыдущим версиям стандарта HTML.
• «Мягкие» синтаксические правила, которые прощают мелкие ошибки. Благодаря этому, пользователи с меньшей вероятностью смогут увидеть сообщение от браузера о невозможности отображения документа (даже если ошибки в нем действительно присутствуют).
• Удобный, лаконичный синтаксис, в котором можно опускать некоторые теги и значения ряда атрибутов. Примечание переводчика: многие из перечисленных преимуществ так же являются и недостатками. В частности, снижение жесткости синтаксических правил автоматически провоцирует порождение небрежного, «грязного» кода. Преимущества применения XHTML-сериализации:
• Жесткие синтаксические правила XML заставляют писать более качественную разметку, что часто облегчает дальнейшую работу с контентом. •Интеграция с другими основанными на XML стандартами (например, SVG и MathML).
• Совместимость со стандартными средствами обработки XML (часто применяется при обработке и публикации материалов).

Локальное хранилище и оффлайновые  приложения

 

Обычно Web-разработчики использовали для сохранения информации на локальной  машине посетителя cookie-файлы, что позволяло Web-странице позднее воспроизводить эту информацию. Хотя cookie-файлы очень удобны для хранения несложных данных, они имеют определенные ограничения: Web-браузер не обязан хранить более 20 cookie-файлов для одного Web-сервера или более 4 КБ данных в одном cookie-файле (с учетом имени и значения). Кроме того, эти файлы отсылаются в Web-сервер с каждым HTTP-запросом, что приводит к расходованию ресурсов.

HTML5 представляет решение  для этих проблем в виде API-интерфейсов  Local Storage (локальное хранилище), который описывается в отдельной спецификации к основному документу по HTML5. Этот набор API-интерфейсов позволяет разработчикам хранить информацию на компьютере посетителя с разумной степенью уверенности в том, что она останется доступной для последующего использования. Кроме того, эта информация доступна в любой момент времени (даже после отображения страницы) и не загружается автоматически при каждом HTTP-запросе. Данная спецификация включает ограничения по происхождению (same-origin), которые не позволяют Web-сайтам читать или изменять данные, сохраненные другими Web-сайтами.

Большинство браузеров  хранит Web-страницы в локальном кэше, что позволяет пользователю просматривать  их даже в оффлайновом режиме. Такой  механизм прекрасно работает для  статических страниц, но неприменим для динамического контента, который обычно находится под управлением баз данных (Gmail, Facebook, Twitter и т.д.). Спецификация HTML5 поддерживает «оффлайновые» приложения – если браузер загружает все файлы, необходимые для взаимодействия с каким-либо приложением в оффлайновом режиме, то в случае работы пользователя с этим приложением в оффлайновом режиме браузер сможет после повторного подключения к Интернету загрузить на сервер любые изменения, сделанные пользователем в процессе своей деятельности.

 

 

 

 

 

 

Совершенствование Web-форм

 

Язык разметки HTML 4 предоставлял набором средств для управления формами, многие из которых реализованы с помощью элемента <input>. В спецификации HTML 4 поддерживаются следующие входные типы:

• button
• checkbox
• file
• hidden
• image
• password
• reset
• radio
• submit
• text

 

Кроме того, в формах используются и некоторые другие элементы, такие  как <select> и <textarea>. Эти средства управления формами поддерживают множество  функций для полей несложных  форм, таких как имя, телефонный номер и адрес, которые часто встречаются в формах для введения контактной информации. Однако к сегодняшнему дню Web-платформа давно прошла ту стадию, когда HTML-формы используются только для предоставления контактной информации. В настоящее время эти формы используются для ввода данных в приложения с целью последующей обработки на стороне сервера. В результате разработчикам Web-приложений непрерывно требуются все более изощренные средства для управления формами, такие как spinner, slider, date/time picker, color picker и т.д.

Для задействования средств управления подобного типа разработчикам приходилось применять внешнюю JavaScript-библиотеку, которая предоставляла бы соответствующие компоненты пользовательского интерфейса, или альтернативную инфраструктуру разработки, например, Adobe Flex, Microsoft Silverlight или JavaFX. Спецификация HTML5 призвана ликвидировать некоторые пробелы, оставленные ее предшественниками в этой области, предоставив широкий ассортимент новых типов форм ввода.

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

 

На данный момент поддержка  этих новых полей в формах весьма ограничена. К примеру, браузер Mobile Safari для платформы iPhone использует некоторые  из этих новых типов для изменения  типа клавиатуры, представляемой пользователю (к примеру, для типа e-mail будут отображаться символы @ и клавишные комбинации быстрого вызова .com). Кроме того, браузер Opera предоставляет несколько новых виджетов для многих из этих средств управления, в том числе spinner для чисел и calendar date picker для типов, связанных со сбором календарных данных. Наиболее широко применяемая разновидность этих новых предложений – тип range, который в браузерах Opera, Safari и Google Chrome предоставлен в виде ползунка (slider).

В дополнение к вышеописанным  новым входным типам спецификация HTML5 поддерживает два новых важных усовершенствования для полей формы. Первое из этих усовершенствований – функция autofocus, которая после рендеринга страницы дает браузеру указание автоматически установить фокус на определенном поле формы без использования JavaScript-кода. Второе усовершенствование – атрибут placeholder, позволяющий разработчику задать текст, который будет появляться в поле текстового элемента управления в случае отсутствия в нем необходимого контента. Пример – блок поиска, когда разработчик не хочет использовать метку за пределами этого блока. Атрибут placeholder позволяет разработчику задать текст, который будет демонстрироваться при пустом управляющем окошке и при отсутствии фокуса этого окошка.

Элемент canvas

 

Элемент <canvas> (холст) был разработан компанией Apple для использования в виджетах Mac OS X Dashboard и в Web-браузере Safari. Позднее он стал использоваться в Web-браузерах Mozilla® и Opera®. Этот элемент был стандартизирован и включен в спецификацию HTML5 вместе с набором API-интерфейсов 2D-рисования, которые позволяют создавать фигуры, текст, переходы и анимацию внутри элемента.

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

Хотя язык масштабируемой векторной графики Scalable Vector Graphics (SVG) W3C уже предоставляет способ показа иллюстраций внутри браузера, canvas предлагает другой подход. Вместо того, чтобы реализовать декларативный документ, как SVG, он предоставляет чистую поверхность для рисования при помощи JavaScript. Эта модель императивной графики гораздо больше обязана своим появлением рисованию в стиле OpenGL, чем декларативному Интернету.

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

Пример элемента <canvas> для отрисовки квадрата в красной рамке:

<html>

  <head>

    <title>Canvas demo</title>

    <script type="text/javascript">

      function draw () {

        var canvas = document.getElementById ('hello');

        if (canvas.getContext) {

          var ctx = canvas.getContext('2d');

          ctx.fillRect (25, 25, 50, 50);

        }

      }

    </script>

    <style type="text/css">

      canvas { border: 2px solid red; }

    </style>

  </head>

  <body onload="draw ();">

    <canvas id="hello" width="100" height="100"></canvas>

  </body>

</html>

Листинг 3. Пример использования <canvas>

 

Другие новые функции

 

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

Фоновое исполнение

Функция Web worker позволяет  настраивать JavaScript-код на исполнение в фоновом процессе, благодаря чему облегчается разработка многопоточных приложений. Основное преимущество Web worker с точки зрения разработчика – интенсивные вычисления могут быть выполнены в фоновом режиме, без отрицательного влияния на скорость пользовательского интерфейса.

Геолокация

Спецификация HTML5 содержит API-интерфейс Geolocation, позволяющий Web-приложению определять текущее географическое местоположение пользователя – при  условии, что его целевое устройство имеет функции для получения  такой информации (например, GPS на сотовом телефоне). Если у вас нет устройства, которое поддерживало бы эту функцию (такого как iPhone или смартфон на базе Android 2.0), вы можете воспользоваться браузером Firefox и загрузить подключаемый модуль, которое позволит вам устанавливать свое местоположение в ручном режиме.