Einführung

MathBoard auf dem iPad, eine Anwendung von PalaSoftware, ist eine ausgefeilte Anwendung mit vielen subtilen, aber natürlichen Animationen und einem einzigartigen realistischen Erscheinungsbild. Ziel war es, die iPad-Anwendung möglichst genau in HTML5 zu portieren.
N2N-Apps ist ein Softwareentwicklungsunternehmen, das sich auf die Entwicklung der nächsten Generation von Web- und mobilen Anwendungen mit HTML5-Technologie spezialisiert hat. Das Unternehmen wurde 2010 von Jeremy Chone gegründet, der nach 11 Jahren Erfahrung in der Entwicklung und Verwaltung bei Netscape, Oracle und Adobe beschloss, sein Fachwissen mit Unternehmen zu teilen, um hochwertige Web- und mobile Anwendungen zu entwickeln. N2N-Apps legt den Schwerpunkt auf Qualität und Geschwindigkeit der Bereitstellung.
MathBoard für den Chrome Web Store herunterladen MathBoard für den Chrome Web Store herunterladen (kostenlose Version)
Voraussetzungen
Die wichtigsten Anforderungen an dieses HTML5-Portierungsprojekt waren:
- High-Fidelity-Portierung des ursprünglichen Erscheinungsbildes und der Benutzeroberfläche der iPad-Anwendung.
- Sie müssen sich an den Zielformfaktor anpassen (z.B. PC/Mac mit Tastatur/Maus oder Touchscreen).
- 100% der anwendbaren Funktionen implementieren.
- Richten Sie Ihre Anzeigen hauptsächlich auf HTML5-Browser aus.
- Die Anwendung „serverlos“ machen, damit sie vollständig auf dem Client ausgeführt wird und auf einem statischen Server oder einer in Google Chrome verpackten Anwendung gehostet werden kann
- Erstellen Sie in weniger als einem Monat eine Version 1.0 mit allen Funktionen, aber ohne Problemlöser.
Architektur

Aufgrund der Anforderungen haben wir uns für die folgende Architektur entschieden:
- HTML5: Da wir keine Anforderungen an die HTML4-Unterstützung haben, haben wir uns für HTML5 als Basis entschieden.
- jQuery: Auch wenn HTML5 viele der erweiterten Auswahltools bietet, die jQuery so nützlich machen, haben wir uns trotzdem für jQuery entschieden, da es uns eine sehr robuste und ausgereifte Möglichkeit bietet, das DOM und zugehörige Ereignisse zu manipulieren. jQuery ist außerdem DOM-zentrierter, was das Design und die Implementierung einer Anwendung eher an HTML orientiert.
- SnowUI: jQuery bietet eine hervorragende API und Best Practices für die Arbeit mit dem DOM. Für die HTML5-MathBoard-Anwendung benötigten wir jedoch ein MVC- oder MVP-Framework, um alle verschiedenen Ansichten zu orchestrieren. SnowUI ist ein einfaches, aber leistungsstarkes MVC-Framework auf jQuery-Basis. Es bietet einen DOM-zentrierten MVC-Mechanismus und eine flexible Möglichkeit zum Erstellen benutzerdefinierter Komponenten. Gleichzeitig haben die Entwickler die Möglichkeit, jede Widget-/Steuerelementbibliothek oder den benutzerdefinierten Code zu verwenden, den sie für optimal halten.
Hinweise zum Übertragen von Daten vom iPad auf den PC
Bei der Portierung der Anwendung auf HTML5 für die Nutzung auf dem Computer mussten wir mehrere Änderungen am Design und an der Nutzerinteraktion der Anwendung vornehmen.
Bildschirmausrichtung
Das iPad MathBoard ist ausschließlich vertikal ausgerichtet, was für PC-Displays nicht optimal war, da diese in der Regel horizontal verwendet werden. Deshalb haben wir das UI-Design neu organisiert und den Bereich „Einstellungen“ auf die rechte Seite in eine Ansicht verschoben, die sich durch CSS3-Übergänge animieren lässt.

Eingabe: Tastatur/Maus oder Touchscreen
Ein weiterer wichtiger Unterschied zwischen der iPad- und der Webversion ist die Eingabeoberfläche. Auf dem iPad gibt es nur die Touchbedienung, auf dem PC müssen Sie sowohl die Maus als auch die Tastatur berücksichtigen.
Die Eingabesteuerelemente von MathBoard auf dem iPad sind sehr ausgefeilt. Wir wollten dieselbe High-Fidelity-Darstellung in der Weboberfläche. Die Lösung bestand darin, die Unterstützung für Tastenkombinationen hinzuzufügen und die UI-Steuerelemente mithilfe von CSS-Positionierung zu replizieren. Die Umstellung auf HTML5 war pixelgenau:

Wie bei der iPad-Oberfläche können Nutzer auf den linken und rechten Pfeil klicken, um den Wert eines Steuerelements zu ändern. Sie können die vertikale Linie auch ziehen, um schnell Werte zu ändern. Für click
und keydown
wurde ein Wiederholungsverhalten implementiert, damit Nutzer die Wertänderung beschleunigen können, wenn die Maus oder die Tastatur gedrückt wird.
Die TAB-Unterstützung wurde hinzugefügt, um von einem Eingabefeld zum nächsten zu wechseln. Mit den Pfeilen ← und → können die Werte durchgeblättert werden.
Eine Funktion in der iPad-Version, die für die PC-Oberfläche nicht sehr sinnvoll war, war das Zeichenbrett. Es wäre zwar schön gewesen, aber das Zeichnen von Zahlen mit der Maus ist nicht sehr praktisch. Stattdessen haben wir uns entschieden, mehr Zeit darauf zu verwenden, die Tastaturoberfläche zu optimieren, als das Zeichenbrett zu implementieren.
HTML5-Funktionen
In der Webversion von MathBoard werden viele HTML5-Funktionen verwendet:
Lokaler Speicher
Mit MathBoard können Nutzer ihre Quizze speichern, um sie später noch einmal zu spielen. HTML5 MathBoard implementiert diese Funktion mit HTML5 localStorage
über die SnowUI DAO-Schnittstelle.
localStorage
war die naheliegende Wahl, da die Daten einfach genug waren und keine erweiterte Indexierung erforderten. Wir speichern alle Quizze im JSON-Format, das wir als Text JSON.stringify
.
Die snowUI-DAO ist ein einfacher CRUD-Interface-Wrapper, mit dem die Benutzeroberfläche Daten abrufen kann, ohne sich Gedanken über die tatsächliche Speicherung machen zu müssen. Die DAO-Implementierung kümmert sich um die Speicherdetails.
Bei MathBoard waren die Speicheranforderungen sehr einfach. Wir mussten nur die Nutzereinstellungen und die Quizdaten speichern. Beide wurden in localStorage
als JSON-Strings gespeichert.
So sah beispielsweise die DAO für den Einstellungswert aus:
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();
})());
Sobald diese DAO für die settingValue
registriert ist, kann die Benutzeroberfläche den folgenden Aufruf ausführen, ohne sich um die Geschäftslogik kümmern zu müssen:
var addition = snow.dm.get('settingValue', 'operator_addition');
addition.value = true; // to check the addition checkbox
snow.dm.save('settingValue', addition);
CSS3-Schriftarten
MathBoard verwendet benutzerdefinierte Schriftarten. Dank der CSS3-Schriftartunterstützung war es ganz einfach, die TrueType-Schriftart „Chalkduster“ in unsere Anwendung aufzunehmen:
@font-face {
font-family: Chalkduster;
src: url(Chalkduster.ttf);
}
Da diese Schriftart für fast den gesamten Text in der Anwendung standardmäßig verwendet wurde, haben wir sie auch für den Textkörper festgelegt.
body {
background: #333333;
font-family: Chalkduster;
color: #ffffff;
}
CSS3-Gradienten, Schatten, abgerundete Ecken
Alle Farbverläufe, Schatten, Transparenzen und abgerundeten Ecken werden mit CSS3 erstellt. Im Vergleich zur traditionellen .png-Methode für Benutzeroberflächen war das ein echter Gamechanger.
Außerdem haben wir erweiterte CSS3-Eigenschaften verwendet, um das Aussehen des Bildlaufbalkens zu optimieren. Weitere Informationen zum Stilisieren von Bildlaufleisten in WebKit-Browsern finden Sie unter http://webkit.org/blog/363/styling-scrollbars/.
CSS3-Übergänge
Für HTML5 MathBoard haben wir alle Animationen des iPads nachgebildet und sogar eine neue für den rechten Schiebebereich hinzugefügt. Dank CSS3-Übergängen war das Hinzufügen von Animationen ganz einfach und ermöglichte die beste Leistung.
In den Apps gab es drei Hauptanimationen.
1. Der ausziehbare rechte Bereich
Die erste Animation befindet sich im rechten Bereich (#rightPane
). Sie wird geschlossen, wenn der Nutzer ein neues Quiz startet, und geöffnet, wenn er ein Quiz beendet.
Für diesen Effekt haben wir den folgenden CSS-Übergang verwendet und ihn über JavaScript ausgelöst. Der Standardstil des rechten Bereichs ist geöffnet:
#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;
}
Wenn der Nutzer ein Quiz startet, bewegt unsere JavaScript-Logik den Bereich so:
var $rightPane = $('#rightPane');
var left = $rightPane.position().left - 400;
setTimeout(function() {
$rightPane.css('left', left + 'px');
}, 0);
Einige Hinweise zu dieser Implementierung:
- Da die Anwendungsgrößen festgelegt sind, hätten wir die CSS-Klasse „.close“ verwenden und die Position des Schließens genauso hartcodieren können wie die des Öffnens.
- Wir hätten auch die CSS-Funktion „translate“ verwenden können, was leistungsfähiger gewesen wäre als die Animation der Eigenschaft „left“ des Bereichs. Das gilt insbesondere für Mobilgeräte (z. B. iOS), auf denen 3D-Transformationen hardwarebeschleunigt sind.
- In diesem Fall ist
setTimeout
nicht unbedingt erforderlich, da die ursprüngliche Position vor der Änderung festgelegt wurde. Der Browser kann die Animation jedoch flüssiger gestalten, indem das Quiz kurz vor dem Einblenden des rechten Bereichs angezeigt wird.
2.) Animationseffekt für das Dialogfeld „Einstellungen“
Wenn der Nutzer rechts auf eine Einstellung klickt, wird das Einstellungsdialogfeld unten auf dem Bildschirm angezeigt und scrollt zum entsprechenden Bereich.
Dazu haben wir eine ähnliche Umstellung für den rechten Bereich vorgenommen. Das einzige, was etwas Zeit in Anspruch nahm, war die Behebung der Ruckler beim ersten Erscheinen des Dialogfelds.
Um den Browser anzuweisen, die Benutzeroberfläche des Dialogfelds im Cache zu speichern, haben wir sie einmal angezeigt und dorthin gescrollt. Zuerst haben wir es mit display: none
versucht.
Dieser Ansatz war falsch, da der Browser davon ausging, dass das Dialogfeld nicht angezeigt werden muss.
Die Lösung bestand darin, die Einstellungen bei der Initialisierung mit einem z-index: -1
anzuzeigen, sodass sie für den Nutzer unsichtbar, aber für den Browser sichtbar waren.
3.) Animation für Erfolg oder Fehler beim Quiz
Die dritte Animation besteht aus zwei Teilen. Wenn die Meldung „Erfolgreich“ oder „Falsch“ angezeigt wird, verkleinern Sie die Ansicht zuerst, warten Sie einen Moment und vergrößern Sie sie dann, bis die Meldung verschwindet. Dazu haben wir zwei CSS3-Animationsstile, die wir über JavaScript bei einem webkitTransitionEnd
-Ereignis orchestrieren.
.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-Tag
Wenn Nutzer ein Quiz beantworten, gibt die App einen Ton aus, der Erfolg oder Misserfolg signalisiert.
Die einfachste Lösung war, das Audio-Tag zu verwenden und play()
darauf anzuwenden.
Diese Audio-Bits werden der Hauptseite der Anwendung hinzugefügt:
<audio id="audioCorrect" src="correct.mp3" preload="auto" autobuffer></audio>
<audio id="audioWrong" src="wrong.mp3" preload="auto" autobuffer></audio>
Fazit
HTML5 ermöglicht eine neue Generation von Web-, Desktop- und mobilen Anwendungen. CSS3 war entscheidend für die Anpassung des Erscheinungsbildes der Anwendung, damit es genau der hohen Komplexität von MathBoard für iPad entspricht. HTML5-Speicher war eine perfekte Lösung für die Datenspeicherung und die Einfachheit von HTML5-Audio ermöglichte es uns, die iPad-App genau nachzubilden.