Ирина Эланс

Автор который поможет с любыми образовательными и учебными заданиями

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

Министерство образования Республики Беларусь

Учреждение образования
Белорусский государственный университет
информатики и радиоэлектроники

Факультет компьютерных систем и сетей

Кафедра информатики

Реферат по предмету СТРПО

на тему

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

Студент: П. В. Шелестович

Руководитель: А. А. Волосевич

Минск 2011

Введение

HTML – это язык разметки веб-страниц, который интерпретирует их содержимое для браузеров и отображает пользователям Интернета сайты в нужном виде.

Простота изучения HTML и возможность просмотра исходного кода браузерами увеличила его популярность повсеместно. Привлечение консорциума W3C (World Wide Web Consortium) к стандартизации HTML обеспечило то, что все веб-браузеры в большей или меньшей степени совместимы с одним и тем же диалектом. Появление CSS и связанный с этим рост web-проектов, основанных на этом стандарте как передовом опыте, предотвратило хаос в HTML и привело к улучшению условий работы, как для пользователей, так и для разработчиков.

На данный момент подавляющее большинство сайтов в Сети использует HTML 4й версии, однако в ходе непрерывного развития Интернета, к языку гипертекстовой разметки предъявляется все более серьезные требования. HTML 4 находится в употреблении на протяжении уже более десятка лет, и многочисленные инновации, применяемые сейчас на веб-сайтах, делают ограничения его спецификации все более ощутимыми. Веб-разработчикам давно требуется более широкая функциональность, чем та, которую может представить это стандарт. Новые концепции, появившиеся за последние десять лет (Web 2.0, Rich Internet Application, Semantic Web и т.д.), исчерпали возможности технологий HTML, CSS и JavaScript. Во многих случаях для поддержки таких компонентов, как видео и аудио, а также графически насыщенных и интерактивных приложений приходилось применять специальные подключаемые модули, такие как Adobe Flash. Adobe Flex, платформа Microsoft Silverlight и технология JavaFX. Все эти средства были призваны обеспечить поддержку тех областей, где слабости HTML ограничивали возможности разработчиков. Однако с появлением HTML5 язык разметки выходит на новые позиции. Полная поддержка мультимедийного контента, наличие локального хранилища и поддержка оффлайновых приложений, собственный API-интерфейс 2D-рисования и множество API-интерфейсов для разработки новых приложений – все это служит доказательством того, что технологии HTML, CSS и JavaScript позволяют реализовать мощную фронтальную часть для Web-сайтов и для Web-приложений.

Общий обзор технологии HTML5

Работа над HTML4 была практически закончена в 1999 году, а разработка HTML следующей, пятой версии в группе W3C началась лишь в 2007 году. Группа разработчиков следовала принципу соблюдения максимальной обратной совместимости со старыми браузерами, поэтому в целом HTML остался тем же, никаких революционных изменений не произошло. В тоже время, возможности языка были существенно расширены.

Итак, HTML5 (альтернативное название – Web Applications 1.0) - это пятая версия языка разметки гипертекста используемая при создании веб страниц. Новый стандарт содержит много улучшений, включая более удобную работу с аудио, видео и интерактивными приложениями в сети. Основное отличие нового стандарта HTML5 от сегодняшнего HTML4 состоит в том, что некоторые веб страницы не будут требовать установки мультимедийных плагинов, таких как Microsoft Silverlight или Adobe Flash, для проигрывания аудио или видео клипа. Плагины, возможно, будут необходимы только для игр или потокового видео, которые не могут быть реализованы с помощью HTML5.

Спецификация Web Applications 1.0 только развивается, и некоторые из упоминавшихся функций более полно разработаны, чем остальные. Вот весьма общее описание новых функций:

Новые элементы размещения, в том числе, элемент управления "календарь", адресная карта, гибкая сеть данных, измерители и индикаторы хода выполнения, возможность перетаскивать файлы мышью и меню;
Программные расширения DOM (Document Object Model, объектной модели документа), в том числе передаваемые сервером события DOM;
Формализация фактически стандартного объекта XMLHttpRequest, центрального фрагмента коммуникаций Ajax;
Динамическая растровая графика через элемент canvas.

Многое из описанного выше в современном Интернете нашло свое воплощение в функциях, реализованных в виде единичных разработок на JavaScript.

Большинство новшеств касаются воспроизведения изображений, видео и музыки. Так, благодаря HTML 5 отпадает нужда в использовании самого распространенного в настоящее время формата Adobe Flash и многих дополнительных программ. Кроме того, HTML 5 позволит улучшить отображение текста и значительно облегчит ввод данных при заполнении электронных формуляров. Более подробно рассмотрим особенности и нововведения языка разметки HTML 5:

Семантические элементы

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

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

В стандарте HTML 5 учитывается этот недостаток и предоставляется ряд новых тегов для отдельного описания каждого блока типовой разметки. Контейнеры div заменяются новыми элементами: header, nav, section, article, aside, и footer. Существует ряд причин отдавать предпочтение перечисленным выше новым тегам. Например, при их использовании снимается существовавшее ранее ограничение в шесть уровней заголовков (h1-h6). В спецификации подробно описан алгоритм формирования оглавления, в котором не только учитываются новые структурные элементы, но и сохраняется обратная совместимость с предыдущей версией стандарта. Это нововведение может быть использовано для автоматической генерации оглавлений, что упростит навигацию внутри веб-страниц. Для лучшей совместимости с существующими браузерами, помимо h1 так же возможно использование заголовков других уровней (h2-h6). Когда предназначения секций страницы может быть автоматически определено по специфичным именам тегов, появляется возможность организации более легкой и эффективной навигации по документу. Например, пользователи смогут одним кликом проматывать оглавление, быстро переходя к содержательной части большого документа, или переходить от одной статьи к следующей. При этом становится вовсе необязательным добавление в страницу вспомогательных навигационных ссылок. Код при этом становится менее «захламлен» второстепенными деталями, без которых можно обойтись.

Главные семантические элементы, введенные в HTML5:

С помощью этого элемента задается заголовок для некоторой части Web-страницы, для всей страницы, для элемента <article> или для элемента <section>.

Подобно элементу <header>, этот новый элемент задает нижний колонтитул для определенной части страницы. Нижний колонтитул не обязательно должен присутствовать в конце страницы, статьи или раздела, однако обычно он есть. Такие блоки, как правило, содержат вспомогательную информацию о секции. Например, ссылки на связанные материалы, информацию о правах на копирование и т.д.

<nav>

Это контейнер для основных навигационных ссылок на Web-странице. Элемент <nav> предназначен для навигационных ссылок, что полезно как для межстраничных переходов внутри сайта, так и для внутристраничной навигации (для организации оглавления). Данный элемент не предназначен для использования со всеми группами ссылок и должен применяться только для главных навигационных блоков. Если ваш элемент <footer> содержит навигационные ссылки, вам нет необходимости включать эти ссылки в элемент <nav>, поскольку элемент <footer> вполне самодостаточен.

Элемент <article> используется для задания на странице независимого элемента, который может быть размещен сам по себе. Примеры: новостное сообщение, заметка блога или комментарий. Как правило, такие элементы синдицируются с помощью RSS-потока.

Этот элемент задает раздел документа или приложения (глава/раздел статьи или учебного пособия и т.д.). Обычно элементы <section> имеют заголовок, хотя это не строгое требование. Он интерпретируется как секция общего назначения. Такой секцией может быть, например, параграф.

<aside>

Контейнер aside используется для вспомогательных материалов, например, для определения дополнительных колонок с второстепенным текстом (сайдбаров). Этот новый элемент может использоваться для разметки боковой панели или какого-либо другого контента, который должен быть отделен от окружающего его контента. Характерный пример – рекламные блоки.

В некоторых случаях для страницы, статьи или раздела может потребоваться более одного заголовка (например, может иметься основной заголовок и подзаголовок). Так, данное учебное пособие имеет заголовок «Создание современных Web-сайтов с использованием HTML5 и CSS3» и подзаголовок «Реализация элементов canvas и video в HTML5». Эти элементы могут быть представлены элементом <hgroup> - с помощью элемента <h1> для основного заголовка и элемента <h2> для подзаголовка. Пример для сравнения HTML 4 и HTML 5 разметки приведёны в листингах 1-2:

<html>

<head>

<title>Mokka mit Schlag </title>

</head>

<body>

<h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>

</div>

<h2><a href=

"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">

Spring Comes (and Goes) in Sussex County</a></h2>

<p>Yesterday I joined the Brooklyn Bird Club for our

annual trip to Western New Jersey, specifically Hyper

Humus, a relatively recently discovered hot spot. </p>

</div>

<h2><a href=

"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">

But does it count for your life list?</a></h2>

<p>Seems you can now go <a

href="http://www.wired.com/science/discoveries/news/

2007/04/cone_sf">bird watching via the Internet</a>.p>

</div>

<a href="/blog/page/2/">« Previous Entries</a>

</div>

</div>

<ul>

<li><a href="/blog/comment-policy/">Comment Policy</a></li>

</ul></li>

<li><h2>Archives</h2>

<ul>

<li><a href='/blog/2007/04/'>April 2007</a></li>

<li><a href='/blog/2007/01/'>January 2007</a></li>

</ul>

</li>

</ul>

</div>

</div>

</body>

</html>

Листинг 1. Типичная запись в блоге на HTML 4

<html>

<head>

<title>Mokka mit Schlag </title>

</head>

<body>

<h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>

</header>

<h2><a href=

"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">

Spring Comes (and Goes) in Sussex County</a></h2>

<p>Yesterday I joined the Brooklyn Bird Club for our

annual trip to Western New Jersey, specifically Hyper

Humus, a relatively recently discovered hot spot. </p>

</article>

<h2><a href=

"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">

But does it count for your life list?</a></h2>

<p>Seems you can now go <a

href="http://www.wired.com/science/discoveries/news/

2007/04/cone_sf">bird watching via the Internet</a>. I

haven't been able to test it out yet (20 user

limit apparently) but this is certainly cool. p>

</article>

<nav>

<a href="/blog/page/2/">« Previous Entries</a>

</nav>

</section>

<nav>

<ul>

<ul>

<li><a href="/blog/comment-policy/">Comment Policy</a></li>

</ul></li>

<li><h2>Archives</h2>

<ul>

<li><a href='/blog/2007/04/'>April 2007</a></li>

<li><a href='/blog/2007/03/'>March 2007</a></li>

<li><a href='/blog/2007/02/'>February 2007</a></li>

<li><a href='/blog/2007/01/'>January 2007</a></li>

</ul>

</li>

</ul>

</nav>

</footer>

</body>

</html>

Листинг 2. Та же запись в блоге на HTML 5

Аудио- и видеоматериалы

В последние годы популярность сайтов для обмена видеоконтентом, таких как YouTube, и платформ доставки контента, таких как Hulu, привела к бурному росту использования Интернета для потоковой трансляции мультимедийного контента. Но Интернет создавался без расчета на подобный контент, в результате чего поддержка видео и аудио, как правило, обеспечивается файловым форматом Flash Video (.flv) и платформой Adobe Flash. Выбор этой технологии обычно обоснован тем, что Flash на данный момент имеет наиболее широкую поддержку среди браузеров, по сравнению с альтернативными технологиями, с помощью которых можно было бы обеспечить воспроизведение мультимедиа-контента (QuickTime, Windows Media). Огромное количество мультимедиа-плееров, написанных на Flash, является подтверждением того, что разработчики чаще всего предпочитают самостоятельно формировать их интерфейс, не смотря на то, что в большинстве случаев пользователям предоставляется одна и та же функциональность (воспроизведение, пауза, перемотка и управление громкостью).

Однако 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. Поэтому пока в качестве унификации и упрощения разработки эти новые элементы оказываются бесполезными.

Примеры:

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

В отличие от предыдущих версий 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>

function draw () {

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

if (canvas.getContext) {

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

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

}

</script>

canvas { border: 2px solid red; }

</style>

</head>

</body>

</html>

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

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

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

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

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

Геолокация

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

Использование технологий HTML5 для построения десктопных приложений 📙 Реферат → 🆔 105948