Использование технологий 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:

<header>

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

<footer>

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

<nav>

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

<article>

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

<section>

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

<aside>

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

<hgroup>

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

<html>

  <head>

    <title>Mokka mit Schlag </title>

</head>

<body>

<div id="page">

  <div id="header">

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

  </div>

  <div id="container">

    <div id="center" class="column">              

      <div class="post" id="post-1000572">

        <h2><a href=

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

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

        <div class="entry">

          <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>

      </div>

      <div class="post" id="post-1000571">

        <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>

        <div class="entry">

          <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>

      </div>

      </div>

    <div class="navigation">

      <div class="alignleft">

         <a href="/blog/page/2/">&laquo; Previous Entries</a>

       </div>

      <div class="alignright"></div>

    </div>

  </div>

  <div id="right" class="column">

    <ul id="sidebar">

      <li><h2>Info</h2>

      <ul>

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

        <li><a href="/blog/todo-list/">Todo List</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 id="footer">

    <p>Copyright 2007 Elliotte Rusty Harold</p>

  </div>

</div>

</body>

</html>

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

 

<html>

<head>

    <title>Mokka mit Schlag </title>

</head>

<body>

  <header>

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

  </header>

  <section>              

      <article>

        <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>

      <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/">&laquo; Previous Entries</a>

    </nav>

  </section>

  <nav>

    <ul>

      <li><h2>Info</h2>

      <ul>

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

        <li><a href="/blog/todo-list/">Todo List</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>

    <p>Copyright 2007 Elliotte Rusty Harold</p>

  </footer>

</body>

</html>

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

 

 

 

 

 

 

 

 

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

 

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