Будьте готовы к прекращению использования сторонних файлов cookie в Chrome. Проверьте свой сайт сегодня на наличие поломок . Будьте готовы к прекращению использования сторонних файлов cookie в Chrome. Проверьте свой сайт сегодня на наличие поломок . Будьте готовы к прекращению использования сторонних файлов cookie в Chrome. Проверьте свой сайт сегодня на наличие поломок .

Эта страница переведена с помощью Cloud Translation API.

Практический пример — HTML5 MathBoard

Jeremy Chone

Введение

MathBoard для iPad , приложение PalaSoftware , представляет собой тщательно продуманное приложение со множеством тонких, но естественных анимаций и уникальным реалистичным внешним видом. Целью было максимально точно перенести приложение iPad на HTML5.

N2N-Apps — компания по разработке программного обеспечения, специализирующаяся на создании веб-приложений и мобильных приложений нового поколения с использованием технологии HTML5. Компания была профинансирована в 2010 году Джереми Чоуном, который после 11 лет инженерного и управленческого опыта в Netscape, Oracle и Adobe решил поделиться своим опытом с предприятиями для создания высококачественных веб- и мобильных приложений. N2N-Apps фокусируется на качестве и скорости доставки.

Загрузите MathBoard для Интернет-магазина Chrome Загрузите MathBoard для Интернет-магазина Chrome (бесплатная версия)

Требования

Ключевые требования к этому проекту переноса HTML5 были следующими:

Высококачественный порт оригинального приложения для iPad, внешний вид и пользовательский интерфейс.
Адаптируйтесь к целевому форм-фактору (например, ПК/Mac с клавиатурой/мышью или сенсорным экраном).
Реализуйте 100% применимых функций.
Ориентируйтесь в основном на браузеры HTML5.
Сделайте приложение «бессерверным», чтобы оно полностью работало на клиенте и могло размещаться на статическом сервере или в упакованном приложении Google Chrome.
Сделайте версию 1.0 со всеми функциями, но с решением проблем, менее чем за месяц.

Архитектура

Учитывая требования, мы решили использовать следующую архитектуру:

HTML5: поскольку у нас нет каких-либо требований к поддержке HTML4, мы решили использовать HTML5 в качестве основы.
jQuery: хотя в HTML5 имеется множество расширенных селекторов, которые делают jQuery таким замечательным, мы все равно решили придерживаться jQuery, поскольку он дает нам очень надежный и зрелый способ манипулировать DOM и связанными с ним событиями. Преимущество jQuery также состоит в том, что он больше ориентирован на DOM, что приближает проектирование и реализацию приложения к HTML.
SnowUI : jQuery предоставляет отличный API и лучшие практики для работы с DOM, однако для приложения HTML5 MathBoard нам потребовалась структура стиля MVC или MVP для координации всех различных представлений. SnowUI — это простой, но мощный фреймворк MVC поверх jQuery. Он обеспечивает механизм MVC, ориентированный на DOM, и гибкий способ создания пользовательских компонентов, оставляя при этом разработчику приложения возможность использовать любую библиотеку виджетов/элементов управления или собственный код, который он или она считает оптимальным.

Возможности HTML5

В веб-версии MathBoard мы используем множество функций HTML5:

Локальное хранилище

MathBoard позволяет пользователям сохранять свои тесты, чтобы позже воспроизвести их. HTML5 MathBoard реализует эту функцию с помощью HTML5 localStorage и интерфейса SnowUI DAO.

localStorage был естественным выбором, поскольку данные были достаточно простыми и не требовали расширенной индексации. Мы храним все тесты в одном формате JSON, который мы JSON.stringify как текст.

SnowUI DAO — это простая оболочка интерфейса CRUD, которая позволяет пользовательскому интерфейсу извлекать данные, не беспокоясь о том, как они на самом деле хранятся. Реализация DAO заботится о деталях хранения.

В MathBoard требования к хранению были очень простыми. Нам нужно было хранить только пользовательские настройки и данные теста. Оба хранятся в виде строк JSON в localStorage .

Так, например, DAO для значения настройки выглядело так:

snow.dm.registerDao('settingValue', (function() {

  var _settingValues = null;

  function SettingValueDao() {};

  // ------ DAO CRUD Interface ------ //
  // get
  SettingValueDao.prototype.get = function(objectType, id) {
    return $.extend({},getSettingValues()[id]);
  };

  // find, remove

  // save
  SettingValueDao.prototype.save = function(objectType, data) {
    var storeValue = getSettingValues('settingValue')[data.id];
    if (!storeValue) {
      storeValue = {};
      getSettingValues()[data.id] = storeValue;
    }

    $.extend(storeValue, data);
    saveSettingValues();
  };
  // ------ /DAO CRUD Interface ------ //

  function getSettingValues() {
    if (_settingValues == null) {
      var settingValuesString = localStorage.getItem('settingValues');
      if (settingValuesString) {
        _settingValues = JSON.parse(settingValuesString);
      } else{
        _settingValues = {};
      }
    }

    return _settingValues;
  }

  function saveSettingValues(){
    var settingValues = getSettingValues();
    if (settingValues != null) {
      localStorage.removeItem('settingValues');
      localStorage.setItem('settingValues', JSON.stringify(settingValues)); 
    }
  }

  return new SettingValueDao();
})());

Как только этот DAO будет зарегистрирован для settingValue , пользовательский интерфейс сможет выполнить следующий вызов, не беспокоясь о логике хранилища:

var addition = snow.dm.get('settingValue', 'operator_addition');
addition.value = true; // to check the addition checkbox
snow.dm.save('settingValue', addition);

CSS3-шрифты

MathBoard использует собственные шрифты. Благодаря поддержке шрифтов CSS3 включить в наше приложение шрифт истинного типа «Chalkduster» было тривиально:

@font-face {
  font-family: Chalkduster;
  src: url(Chalkduster.ttf);
}

А поскольку этот шрифт использовался по умолчанию практически для всего текста в приложении, мы сделали его шрифтом по умолчанию для основного текста.

body {
  background: #333333;
  font-family: Chalkduster;
  color: #ffffff;
}

CSS3 градиент, тень, закругленные углы

Все градиенты, тени, прозрачность и закругленные углы выполняются с помощью CSS3. Это была настоящая экономия по сравнению с традиционным способом создания пользовательских интерфейсов в формате .png.

Мы также использовали расширенные свойства CSS3, чтобы настроить внешний вид полосы прокрутки и сделать ее более утонченной (см. http://webkit.org/blog/363/styling-scrollbars/ для оформления полос прокрутки в браузерах WebKit).

CSS3-переходы

Для HTML5 MathBoard мы скопировали всю анимацию iPad и даже добавили новую для выдвижной правой панели. Благодаря переходам CSS3 добавление анимации стало тривиальным и позволило добиться максимальной производительности.

У нас в приложениях было три основных анимации.

1.) Сдвижная правая панель

Первая анимация находится на правой панели ( #rightPane ), которая закрывается, когда пользователь начинает новый тест, и открывается, когда пользователь завершает тест. Чтобы создать этот эффект, мы использовали следующий CSS-переход и активировали его с помощью JavaScript. Стиль правой панели по умолчанию открыт:

#rightPane {
  /* look and feel, and layout property */
  position: absolute;
  width: 370px;
  height: 598px;
  top: 28px;
  left: 720px; /* open */
  -webkit-transition: all .6s ease-in-out;
}

Когда пользователь запускает тест, наша логика JavaScript перемещает панель:

var $rightPane = $('#rightPane');
var left = $rightPane.position().left - 400;
setTimeout(function() {
  $rightPane.css('left', left + 'px');
}, 0);

Несколько замечаний по поводу этой реализации:

Учитывая, что размеры приложения фиксированы, мы могли бы использовать класс CSS «.close» и жестко запрограммировать позицию закрытия так же, как мы жестко запрограммировали позицию открытия.
Мы также могли бы использовать CSS-перевод, который был бы более производительным, чем анимация свойства левой панели. Это особенно актуально для мобильных устройств (таких как iOS), где 3D-преобразования ускоряются аппаратно.
В этом случае setTimeout не является строго необходимым, поскольку исходная позиция была установлена до изменения. Однако это позволяет браузеру сделать анимацию более плавной, отображая тест непосредственно перед перемещением правой панели.

2.) Анимация диалогового окна настроек.

Когда пользователь нажимает на настройку справа, диалоговое окно настроек появляется в нижней части экрана и прокручивается вниз до соответствующего раздела.

Для этого у нас был аналогичный переход на правую панель. Единственное, что потребовало некоторого времени, — это устранение дерганий при первом появлении диалога. Чтобы указать браузеру кэшировать диалоговый пользовательский интерфейс, мы отобразили его один раз и прокрутили до него. Сначала мы попробовали display: none . Этот подход был неправильным, поскольку браузер предполагал, что диалоговое окно не нужно показывать. Решением было отображение настроек с z-index: -1 при инициализации, что делало их невидимыми для пользователя, но видимыми для браузера.

3.) Успех викторины или неправильная анимация сообщения.

Третья анимация на самом деле два в одном. Когда появится сообщение «успех» или «неправильно», сначала масштабируйтесь до точки, подождите немного и, наконец, масштабируйте еще больше и исчезните. Для этого у нас есть два стиля анимации CSS3, и мы оркестрируем их с помощью JavaScript в событии webkitTransitionEnd .

.quiz-result > div.anim1 {
  opacity: 0.8;
  -webkit-transform: scale(6,6);
}
.quiz-result > div.anim2{
  opacity: 0;
  -webkit-transform: scale(9,9);
}

setTimeout(function() {
  $msg.addClass("anim1");
  $msg.bind("webkitTransitionEnd", function(){
    if ($msg.hasClass("anim1")) {
      setTimeout(function() {
        $msg.removeClass("anim1");
        $msg.addClass("anim2");
      }, 300);
    } else {
      $msg.remove();
      displayNextItem();
      freezeInput = false;
    }
  });
}, 0);

Аудио тег

Когда пользователи отвечают на викторину, приложение издает звук успеха или неудачи. Простой выбор заключался в том, чтобы использовать тег audio и вызвать для него play() . Эти аудиобиты добавляются на главную страницу приложения:

<audio id="audioCorrect" src="correct.mp3" preload="auto" autobuffer></audio>
<audio id="audioWrong" src="wrong.mp3" preload="auto" autobuffer></audio>

Заключение

HTML5 действительно открывает возможности для создания веб-приложений, настольных и мобильных приложений нового поколения. CSS3 сыграл важную роль в настройке внешнего вида приложения, чтобы он максимально соответствовал высокому уровню сложности MathBoard для iPad, хранилище HTML5 идеально подходило для сохранения наших данных, а простота аудио HTML5 позволила нам точно воспроизвести приложение для iPad.