Введение

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, и гибкий способ создания пользовательских компонентов, оставляя при этом разработчику приложения возможность использовать любую библиотеку виджетов/элементов управления или собственный код, который он или она считает оптимальным.
Рекомендации по подключению iPad к ПК
При портировании приложения на HTML5 для использования на ПК нам пришлось внести несколько изменений в дизайн и взаимодействие с пользователем приложения.
Ориентация экрана
iPad MathBoard ориентирован исключительно вертикально, что не оптимально для дисплеев ПК, поскольку они обычно используются горизонтально. Следовательно, мы реорганизовали дизайн пользовательского интерфейса и переместили панель настроек в правую сторону в скользящем виде (анимированном переходами CSS3).

Ввод: клавиатура/мышь или сенсорный ввод
Еще одно ключевое различие между iPad и веб-версией — интерфейс ввода. На iPad у вас есть только сенсорный интерфейс, на ПК вам придется использовать и мышь, и клавиатуру.
Элементы управления вводом MathBoard на iPad доведены до совершенства. Нам хотелось иметь такое же высококачественное представление в веб-интерфейсе. Решением было добавление поддержки сочетаний клавиш и репликация элементов управления пользовательского интерфейса с использованием позиционирования CSS. Порт на HTML5 был идеальным до пикселя:

Как и в интерфейсе iPad, мы разрешаем пользователю нажимать на стрелки влево и вправо, чтобы изменить значение элемента управления. Вертикальную линию также можно перетаскивать для быстрого изменения значений. Для click
и keydown
было реализовано повторяющееся поведение, чтобы пользователи могли ускорить изменение значения при нажатии мыши или клавиатуры.
Была добавлена поддержка TAB для перехода от одного поля ввода к другому, а стрелки ← и → циклически перемещаются по значениям.
Одной из особенностей версии для iPad, которая не имела особого смысла для интерфейса ПК, была доска для рисования. Хотя реализовать такую возможность можно было бы весьма необычно, рисование чисел с помощью мыши не очень практично. Вместо этого мы решили потратить больше времени на доработку интерфейса клавиатуры, чем на реализацию чертежной доски.
Возможности 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.