Разработка интерактивных приложений с помощью HTML5 и Ajax

Межплатформенные Web-приложения для онлайнового и автономного использования

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

Лиза Дэли, разработчик ПО и владелец компании, Threepress Consulting Inc.

Photo of Liza DalyЛиза Дэли – разработчик программного обеспечения, специализируется на приложениях для издательской индустрии. Она была ведущим разработчиком многих крупных онлайновых продуктов издательств Oxford University Press, O'Reilly Media и других. В настоящее время Лиза является независимым консультантом и основателем проекта Threepress, цель которого – разработка электронных книг.



27.02.2013

HTML5 – это общий термин для целого ряда развивающихся Web-технологий, включая стандартизированные технологии работы с насыщенным мультимедийным контентом и интерактивность. HTML5 также может служить основой для разработки приложений, обеспечивающих надежную работу в автономном режиме. Для опытных Web-разработчиков использование HTML5 является более привлекательным по сравнению с изучением новых транслируемых языков, таких как Objective-C или Java™, однако для разработки HTML5-приложений также необходимо иметь определенный уровень знаний. Из этой статьи вы узнаете, как реализовать в вашем приложении работу с онлайновым содержимым и в то же время предоставить возможность работы пользователям, не подключенным к сети.

Пример приложения

В нашем примере мы рассмотрим приложение, работающее на различных мобильных устройствах. Приложение содержит список рецептов приготовления различных блюд и напитков. Три рецепта являются постоянными и доступны даже при отсутствии подключения к сети, а при подключении к сети пользователи смогут увидеть "рецепт дня", который устройство получает с помощью Web-сервисов Ajax.

Ключ к быстрой разработке Web-приложений – повторное использование технологий. В нашем приложении используются две популярные библиотеки с открытым исходным кодом.

  • jQuery – надежный межплатформенный доступ к JavaScript и DOM
  • jQTouch – инфраструктура для мобильных HTML5-приложений, работающих в браузерах на основе WebKit

Для получения дополнительной информации о jQuery и jQTouch обратитесь к разделу Ресурсы.

Несмотря на то, что HTML5-приложения могут работать в Google Chrome, для достижения наилучших результатов используйте при их разработке браузер Apple Safari версии 4 и выше.

Использование jQTouch

Лучше всего управлять приложениями jQTouch как простыми HTML-документами. Каждая "страница" приложения является отдельным HTML-элементом <div> с уникальным атрибутом id. Базовая схема приложения jQTouch выглядит следующим образом.

  1. HTML-заголовок и раздел импорта.
  2. Начальный элемент <div>.
  3. Необязательные дополнительные страницы в виде элементов <div> с уникальными идентификаторами.

Настройка раздела импорта

В начальной части кода нашего приложения выполняется импорт кода CSS и JavaScript, а также настраивается автономный кэш HTML5. В листинге 1 показано содержимое начального раздела.

Листинг 1 . Заголовки, необходимые для автономной работы jQTouch и HTML5
<!DOCTYPE html>
<html manifest="sample.manifest">
  <head>
    <meta charset="utf-8" />
    <title>Sample recipe application</title>
    <style type="text/css">@import "jqtouch/jqtouch/jqtouch.min.css";</style>
    <style type="text/css">@import "jqtouch/themes/jqt/theme.min.css";</style>
    <style type="text/css">@import "sample.css";</style>
    <script src="jqtouch/jqtouch/jquery.1.3.2.min.js" 
            type="text/javascript"></script>
    <script src="jqtouch/jqtouch/jqtouch.min.js" 
            type="text/javascript"></script>
    <script src="sample.js" type="text/javascript"></script>
  </head>

Включение HTML5

О разметке HTML5

Если вы знакомы с DTD и XML, вам может показаться странным упрощенное объявление типа документа DOCTYPE, поскольку его единственным назначением является включение стандартного режима отображения ("standards mode") в Web-браузерах. Поскольку браузеры никогда не использовали проверку, основанную на DTD (вследствие повсеместной распространенности подхода HTML-кода, написанного в стиле "супа из тегов"), использование строгих объявлений DOCTYPE не дает никаких преимуществ. Если вы разрабатываете Web-приложения с помощью XML-инструментов, вы можете использовать определения DOCTYPE HTML V4.01 или XHTML V1.0, но из-за расширений HTML5 документ не пройдет полную проверку.

Точно так же вам может показаться незнакомым объявление кодировки <meta charset="utf-8">, но оно также является правильным кодом HTML5. Ссылка на обсуждение упрощенного синтаксиса HTML5 содержится в разделе Ресурсы.

Приложение, рассматриваемое в примере этой статьи, может работать в автономном режиме. Это достигается путем использования атрибута manifest. Значением этого атрибута должен являться путь к файлу декларации кэша, как показано ниже.

<html manifest="sample.manifest">

Файл декларации кэша обычно состоит из двух разделов.

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

Несложный синтаксис файла декларации кэша показан в листинге 2.

Листинг 2. Файл декларации кэша для примера этой статьи
CACHE MANIFEST

# Так обозначаются комментарии

# Файлы, необходимые для нашего примера:
sample.js
sample.css

# Файлы, являющиеся частью jQTouch
# (полный список можно найти в разделе "Загрузка"):
jqtouch/jqtouch/jqtouch.min.css

NETWORK:
# Следующие ресурсы будут доступны только при работе в режиме подключения к сети:
sample.json

В первой строке всегда содержится директива CACHE MANIFEST, после которой с новой строки перечисляются все ресурсы, которые могут быть доступны автономно: HTML-страницы, CSS, JavaScript, изображения и прочие файлы. При первом запуске приложения браузер просматривает файл декларации кэша, загружает все перечисленные ресурсы и сохраняет их для последующего автономного использования.

Далее следует директива NETWORK:, после которой перечисляются все ресурсы, доступ к которым можно получить только в онлайновом режиме. Несмотря на то, что в листинге указан файл, можно использовать неполные имена путей к файлам. Например, можно указать путь /online/ и поместить в эту директорию все ресурсы, которые будут доступны только в онлайновом режиме.

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

  • Web-сервер должен обрабатывать файл декларации как файл типа text/cache-manifest.
  • Файл, указывающий на декларацию кэша (в нашем примере это файл sample.html), не нужно включать в список.
  • Элементы, перечисленные в файле декларации кэша, будут повторно загружены только при изменении самого файла декларации, но не при изменении этих элементов.
  • Web-сервер должен обрабатывать файл декларации с использованием заголовков ответа no-cache.
  • Если Web-страница ссылается на недекларированный файл, кэш для автономной работы приложения может не сформироваться. Часто браузеры не сообщают об этой ошибке. В Safari четвертой и более поздних версий все предупреждения можно просмотреть в панели Activity.

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


Разработка приложений с использованием jQTouch

Для использования библиотеки jQTouch необходимо указать в разделе импорта несколько файлов.

  • jqtouch.min.css – CSS для jQTouch.
  • theme.min.css – CSS для текущей темы (в примере этой статьи используется тема по умолчанию).
  • jquery.1.3.2.min.js или более поздних версий – сама библиотека jQuery.
  • jqtouch.min.js – основной JavaScript-файл jQTouch.
  • samples.js – пользовательский код JavaScript, определяющий уникальную функциональность приложения, рассматриваемого в этой статье.

Советы по разработке мобильных Web-приложений

Следуя оптимальным методикам разработки Web-приложений, размещайте раздел импорта в конце HTML-документа, перед закрытием тега <body>. В рассматриваемом примере для простоты понимания этот раздел расположен в теге <head>.

Поскольку скорость беспроводных подключений невелика, на обработку HTTP-операций затрачивается много ресурсов мобильных устройств. По этой причине рекомендуется помещать несколько JavaScript-файлов в одну библиотеку. Это делается с помощью автоматизированной операции компоновки/развертывания; намного проще разрабатывать приложения, используя небольшие, четко определенные отдельные библиотеки.

Также рассмотрите возможность использования спрайтов SCC вместо нескольких изображений. Для упрощения развертывания компонуйте страницы стилей в один документ.

Страницы содержимого jQTouch

Каждая страница в приложении jQTouch является простым HTML-элементом <div>, который подчиняется следующим правилам.

  • Элемент должен содержать уникальный атрибут id.
  • Идентификатор должен быть связан с определенным местом в документе с помощью якоря (обычного HTML-элемента anchor).
  • Домашней страницей приложения jQTouch является элемент <div>, классом которого является current.

Библиотека jQTouch содержит ряд методов для анимации переходов со страницы на страницу. По умолчанию используется переход типа "swipe" с использованием CSS3. Во многих реализациях WebKit эти переходы являются аппаратно ускоренными, благодаря чему работа с приложением выглядит более естественной. В листинге 3 показаны ссылки на страницы jQTouch, располагающиеся на домашней странице приложения.

Листинг 3. Домашняя страница, определенная классом "current"
    <div id="home" class="current">
      <div class="toolbar">
        <h1>HTML5 Sample</h1>
      </div>
      <ul class="rounded">
        <li class="arrow"><a href="#recipe1">Breakfast Circles</a></li>
        <li class="arrow"><a href="#recipe2">Slowhand Jackson</a></li>
        <li class="arrow"><a href="#recipe3">Potato Chip Cookies</a></li>
        <li class="arrow online-required"><a href="#recipe4">Recipe of the Day</a></li>
      </ul>
    </div>

Большинство страниц jQTouch состоят из внешнего элемента <div> с его уникальным идентификатором, за которым следует элемент <div> с атрибутом toolbar, содержащим заголовок страницы. Остальное содержимое компонуется в виде списка или дополнительных абзацев.

Классы rounded и arrow определены в главном стиле темы jQTouch. В зависимости от установленной темы их вид может меняться. В примере приложения этой статьи используется черно-серая тема по умолчанию, показанная на рисунке 1.

Рисунок 1. Домашняя страница в примере нашего приложения
Рисунок 1. Домашняя страница в примере приложения этой статьи

Первые три рецепта являются статическими и определены на одной HTML5-странице. Каждый из них имеет уникальный идентификатор (например, recipe1). Эти идентификаторы используются для перехода с домашней страницы на новую, как показано ниже.

<a href="#recipe1">Breakfast Circles</a></li>

В листинге 4 приведен исходный код для первого рецепта. На рисунке 2 показан вид страницы после HTML-рендеринга.

Листинг 4. Статическое содержимое приложения jQTouch
    <div id="recipe1" class="recipe">
      <div class="toolbar">
        <h1>Breakfast Circles</h1>
        <a class="back" href="#">Back</a>
      </div>
      <ul class="rounded">
        <li>2C flour</li>
        <li>1/2C sugar</li>
        <li>1/2C confectioners sugar</li>
        <li>2T Earl Grey tea leaves (about 6 bags)</li>
        <li>1/2t salt</li>
        <li>1t vanilla</li>
        <li>1/2C butter</li>
        <li>Cold water</li>
      </ul>
      <p>
      Pulse dry ingredients in food processor to pulverize tea leaves. 
      Add vanilla, butter and pulse, adding as little water as 
      necessary to form loose dough. Divide into two 2" logs and roll 
      with parchment paper. Chill 30 min.</p>
      <p>
        Cut into 1/4"-thick wafers and bake at 375 degrees on parchment 
        until edges start to brown, about 12 min.
      </p>
    </div>

Заметьте, что элемент <div> содержит одно новое значение класса: recipe. Таблицы стилей jQTouch по умолчанию не содержат подходящих средств, позволяющих управлять стилем вложенных элементов <p>, которые используются в нашем приложении. Поскольку jQTouch – это всего лишь Web-приложение, вы можете свободно задавать собственные параметры стиля, как в случае использования обычных таблиц CSS.

В нашем примере файл sample.css содержит несколько простых модификаций, включая div.recipe p { margin: 1em; }, которые позволяют сформировать аккуратно выглядящее поле с текстом рецепта.

Рисунок 2. Домашняя страница тестового приложения
Рисунок 2. Домашняя страница тестового приложения

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


Работа в онлайновом режиме

Последний рецепт (элемент списка, показанный в листинге 5) содержит дополнительный HTML-класс online-required.

Листинг 5. Элемент отображается только при работе в онлайновом режиме
<li class="arrow online-required">
  <a href="#recipe4">Recipe of the Day</a>
</li>

В настройках CSS значением свойства .online-required этого приложения является display: none. Это означает, что по умолчанию приложение должно работать в автономном режиме, и онлайновые ресурсы скрыты.

Как же приложение узнает о том, что было выполнено подключение к сети? Код этой функциональности содержится в пользовательском JavaScript-сценарии sample.js, показанном в листинге 6.

Листинг 6. Код JavaScript для управления онлайновыми ресурсами
/* Инициализация jQTouch при запуске. 
 [ Полный листинг приведен в разделе "Ресурсы" ] */

// Стандартный метод jQuery для выполнения кода по 
// завершении загрузки браузером всех ресурсов
jQuery(document).ready(function () {
  
  // Отображение всех онлайновых ресурсов при подключении к сети
  if (window.navigator.onLine) {
    jQuery('.online-required').show();
  }
  ...

В коде HTML5 определяется значение параметра API-интерфейса JavaScript window.navigator.onLine. Когда это значение истинно, браузер подключен к сети и находится в онлайновом режиме. Когда это значение ложно, браузер может получить доступ только к автономным ресурсам, перечисленным в файле декларации кэша. В нашем примере, если приложение работает в онлайновом режиме, будут отображены все DOM-элементы класса online-required.

Тестирование параметра window.navigator.onLine

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

Получение онлайновых данных

Эффективным методом загрузки онлайновых данных в приложение jQTouch является заблаговременное создание каркасов страниц, предназначенных для их хранения. В листинге 7 показан элемент <div> для рецепта, доступного только в онлайновом режиме.

Листинг 7. Страница-заглушка jQTouch для онлайнового рецепта
<div id="recipe4" class="recipe">
  <div class="toolbar">
    <h1>Recipe of the Day</h1>
    <a class="back" href="#">Back</a>
  </div>
  <!-- Здесь будет размещен рецепт -->
</div>

Теперь в пользовательском сценарии JavaScript необходимо создать обработчик события для получения рецепта и размещения результатов на HTML-странице. Очевидно, можно было бы определить обработчик события onclick для объекта с идентификатором #recipe4.

Однако jQTouch замещает данное событие, выполняя свои собственные переходы со страницы на страницу. Поэтому вместо определения обработчика вы можете воспользоваться тем фактом, что при переходах CSS3 генерируются события начала и завершения операции. С помощью jQuery можно выполнить привязку кода к этим событиям, даже если эти события к jQuery не относятся. Это делается следующим образом.

jQuery('#recipe4').bind('pageAnimationStart', function () {
  ...
});

Отсутствие эффекта скольжения при смене страниц или загрузке Ajax

На момент написания этой статьи только браузеры Safari версии 4 и 5, а также Mobile Safari могли отображать визуальные эффекты при переходе со страницы на страницу и запускать событие pageAnimationStart. Если вам требуется поддержка этой функциональности в других браузерах на основе WebKit, используйте другие события.

Событие pageAnimationStart запускается почти сразу же после щелчка мыши. По завершении перехода запускается событие pageAnimationEnd. Я предпочитаю назначать большинство действий событиям запуска, поскольку пока пользователь видит анимированный переход, браузер располагает некоторым временем для сбора данных.

Получение данных с помощью Ajax

Нам осталось лишь добавить в наше приложение некоторые Ajax-взаимодействия. В нашем примере предполагается, что результирующий формат будет представлять собой JSON-данные. В этом случае данные берутся непосредственно из JSON-файла sample.json, показанного в листинге 8.

Листинг 8. Данные JSON, содержащие рецепт дня
[ { "title" : "Doggie Delight", "ingredients" :  \
["1 cup dry kibble", "1 pound butter",  "1 beef bouillon cube", \
"2 tbsp oregano" ], "instructions": "Combine all ingredients in bowl.\
 Season to taste. Serve immediately." }]

В листинге 9 представлен код для получения данных и их вставки в указатель места заполнения <div>.

Листинг 9. Вставка JSON-данных в страницу-заглушку
jQuery.ajax({ url: "sample.json",
  success: function (data) {

    // Задаем название рецепта
    jQuery('#recipe4 h1').text(data[0].title);


    // Создаем маркированный список UL и добавляем в него ингредиенты
    var ul = jQuery('<ul class="rounded">');
    jQuery.each(data[0].ingredients, function (index, item) {
      jQuery('<li>').text(item).appendTo(ul);
    });

    // Добавляем текст рецепта
    jQuery('#recipe4').append(ul).append(
      jQuery('<p>').text(data[0].instructions));

На рисунке 3 показан окончательный вид динамических данных.

Рисунок 3. Динамический рецепт в браузере
Рисунок 3. Динамический рецепт в браузере

Заключение

С каждым днем на рынке появляется все больше мобильных устройств. Хотя приложения можно разрабатывать отдельно для каждой вновь появляющейся платформы и аппаратной конфигурации, для небольших динамичных групп разработчиков более предпочтительна возможность создавать межплатформенные мобильные Web-приложения с сопоставимыми рабочими характеристиками. Для разработчиков, знакомых с HTML, JavaScript и CSS, мобильные Web-приложения привлекательны тем, что могут создаваться как прототипы более серьезных специализированных приложений, а также как самостоятельные первоклассные системы.

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

Web-разработчики не должны оставаться в стороне от разработки мобильных приложений. Ваших знаний может оказаться вполне достаточно, чтобы начать создавать приложения для смартфонов, нетбуков и планшетных устройств.


Загрузка

ОписаниеИмяРазмер
Пример для этой статьиos-html5data-app-code-samples.zip4 КБ

Ресурсы

Научиться

  • Оригинал статьи: Data-driven interactive applications with HTML5 and Ajax (EN).
  • Обзор HTML5 (EN) – ознакомьтесь с терминологией и связанными API-интерфейсами HTML и XHTML на Web-сайте консорциума W3C.
  • Посетите страницу WebKit (EN) и узнайте больше об Open Source-проекте WebKit и доступных браузерах для различных платформ.
  • В статье Building iPhone Apps with HTML, CSS, and JavaScript (EN) подробно описываются различные приемы разработки мобильных Web-приложений.
  • Не забудьте прочесть книгу Dive into HTML5 (EN), в которой проводится глубокий анализ и даются практические примеры кода для разработчиков HTML5.
  • Узнайте больше об инфраструктуре jQuery (EN), необходимой для написания JavaScript-приложений, работающих во всех современных браузерах, включая мобильные браузеры.
  • Библиотека jQTouch (EN) предназначена для разработки Web-приложений для Apple iPhone, но может использоваться и для устройств под управлением Android и webOS.
  • В разделе подкастов на сайте developerWorks (EN) можно слушать интересные интервью и обсуждения, ориентированные на разработчиков программного обеспечения.
  • Следите на последними новостями на портале Web-трансляций и технических мероприятий developerWorks (EN).

Обсудить

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Open source
ArticleID=859767
ArticleTitle=Разработка интерактивных приложений с помощью HTML5 и Ajax
publish-date=02272013