Einleitung
MathBoard auf dem iPad, eine PalaSoftware-Anwendung, ist eine ausgefeilte Anwendung mit vielen subtilen, aber natürlichen Animationen und einem einzigartigen, realistischen Design. Das Ziel war es, die Darstellung der iPad-Anwendung mit der höchstmöglichen Qualität in HTML5 umzuwandeln.
N2N-Apps ist ein Softwareentwicklungsunternehmen, das sich auf die Erstellung einer nächsten Generation von Web- und mobilen Apps mit HTML5-Technologie konzentriert. Das Unternehmen wurde 2010 von Jeremy Chone finanziert. Nach elf Jahren Engineering- und Managementerfahrung bei Netscape, Oracle und Adobe teilte er sein Fachwissen mit Unternehmen, um hochwertige Web- und mobile Anwendungen zu erstellen. N2N-Apps konzentriert sich auf Qualität und Liefergeschwindigkeit.
MathBoard für den Chrome Web Store herunterladen MathBoard für den Chrome Web Store herunterladen (kostenlose Version)
Voraussetzungen
Die wichtigsten Anforderungen für dieses HTML5-Portierungsprojekt waren:
- High-Fidelity-Port für das ursprüngliche Design und die Benutzeroberfläche der iPad-Anwendung
- An den Zielformfaktor anpassen (z.B. PC/Mac mit Tastatur/Maus oder Touchscreen).
- Implementieren Sie 100% der anwendbaren Funktionen.
- Sie sollten Ihre Anzeigen hauptsächlich auf HTML5-Browser ausrichten.
- Machen Sie die Anwendung "serverlos", sodass die Anwendung vollständig auf dem Client ausgeführt wird und auf einem statischen Server oder einer gepackten Google Chrome-Anwendung gehostet werden kann.
- Erstelle in weniger als einem Monat eine 1.0-Version mit allen Funktionen, aber mit dem Problemlöser.
Architektur
Aufgrund der Anforderungen haben wir uns für die folgende Architektur entschieden:
- HTML5: Da keine HTML4-Unterstützung erforderlich ist, haben wir uns für HTML5 als Basis entschieden.
- jQuery: HTML5 verfügt zwar über viele der erweiterten Selektoren, die jQuery so großartig machen, aber wir haben uns trotzdem für jQuery entschieden, da es uns eine sehr robuste und ausgereifte Möglichkeit zur Bearbeitung des DOMs und der zugehörigen Ereignisse bietet. jQuery bietet auch den Vorteil, dass es stärker DOM-zentriert ist, was dazu führt, dass Design und Implementierung einer Anwendung näher an HTML sind.
- SnowUI: jQuery bietet eine hervorragende API und Best Practice für die Arbeit mit dem DOM. Für die HTML5-MathBoard-Anwendung war jedoch ein MVC- oder MVP-Stil-Framework erforderlich, um alle verschiedenen Ansichten zu orchestrieren. SnowUI ist ein einfaches, aber leistungsstarkes MVC-Framework, das auf jQuery basiert. Sie bietet einen DOM-zentrierten MVC-Mechanismus und eine flexible Möglichkeit, benutzerdefinierte Komponenten zu erstellen. Der Anwendungsentwickler kann dabei jede beliebige Widget-/Steuerbibliothek oder benutzerdefinierten Code verwenden, den er für optimal hält.
Hinweise von iPad zu PC
Bei der Portierung der Anwendung auf HTML5 für die Nutzung auf dem PC mussten wir mehrere Änderungen am Design und an der Nutzerinteraktion vornehmen.
Bildschirmausrichtung
Das iPad MathBoard ist ausschließlich vertikal ausgerichtet, was für PC-Bildschirme nicht optimal war, da diese im Allgemeinen horizontal verwendet werden. Aus diesem Grund haben wir das UI-Design neu strukturiert und den Einstellungsbereich in einer durch CSS3-Übergänge animierten Ansicht auf die rechte Seite verschoben.
Eingabe: Tastatur/Maus oder Touchscreen
Ein weiterer wichtiger Unterschied zwischen der iPad- und der Webversion ist die Eingabeoberfläche. Beim iPad gibt es nur die Touchoberfläche, beim PC brauchen Sie die Maus und die Tastatur.
Die MathBoard-Eingabesteuerelemente auf dem iPad sind ausgefeilt. Wir wollten die gleiche High-Fidelity-Darstellung in der Weboberfläche. Die Lösung bestand darin, Unterstützung für Tastenkombinationen hinzuzufügen und UI-Steuerelemente mithilfe der CSS-Positionierung zu replizieren. Der Port zu HTML5 war pixelgenau:
Wie bei der iPad-Benutzeroberfläche kann der Nutzer auf den Links- und Rechtspfeil klicken, um den Wert eines Steuerelements zu ändern. Die vertikale Linie kann auch gezogen werden,
um Werte schnell 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.
TAB-Unterstützung für den Wechsel von einem Eingabefeld zum anderen wurde hinzugefügt. Mit den Pfeilen † und → wechseln Sie zwischen den Werten.
Eine Funktion der iPad-Version, die für die PC-Benutzeroberfläche kaum sinnvoll war, war das Zeichenbrett. Die Implementierung wäre zwar aufwendig gewesen, aber das Zeichnen von Zahlen mit der Maus ist nicht sehr praktisch. Stattdessen haben wir uns entschieden, mehr Zeit damit zu verbringen, die Tastatur zu verfeinern, als das Zeichenbrett zu implementieren.
HTML5-Funktionen
In der Webversion von MathBoard nutzen wir viele HTML5-Funktionen:
Lokaler Speicher
Mit MathBoard können Nutzer ihr Quiz speichern, um es später noch einmal abzuspielen. HTML5 MathBoard implementiert diese Funktion mithilfe von HTML5-localStorage und der SnowUI-DAO-Schnittstelle.
localStorage war die natürliche Wahl, da die Daten ausreichend einfach waren und keine erweiterte Indexierung erforderte. Alle Quizze werden in einem JSON-Format gespeichert, das mit JSON.stringify als Text versehen wird.
Der SnowUI-DAO ist ein einfacher CRUD-Schnittstellen-Wrapper, mit dem die Benutzeroberfläche Daten abrufen kann, ohne sich um die tatsächliche Speicherung sorgen zu müssen. Die DAO-Implementierung kümmert sich um die Speicherangaben.
Bei MathBoard waren die Speicheranforderungen sehr einfach. Wir mussten nur die Nutzereinstellungen
und die Quizdaten speichern. Beide werden als JSON-Strings in localStorage gespeichert.
Die DAO für den Einstellungswert sah beispielsweise so 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 dieser DAO für settingValue registriert ist, kann die UI den folgenden Aufruf ausführen, ohne sich um die Speicherlogik 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 Unterstützung von CSS3-Schriftarten war es ein Kinderspiel, die True-Type-Schriftart „Chalkduster“ in unsere Anwendung aufzunehmen:
@font-face {
font-family: Chalkduster;
src: url(Chalkduster.ttf);
}
Da diese Schriftart die Standardeinstellung für fast den gesamten Text in der Anwendung war, haben wir sie als Standardeinstellung für den Textkörper festgelegt.
body {
background: #333333;
font-family: Chalkduster;
color: #ffffff;
}
CSS3-Farbverlauf, Schatten, abgerundete Ecken
Farbverlauf, Schatten, Transparenz und abgerundete Ecken werden mithilfe von CSS3 erstellt. Verglichen mit der herkömmlichen PNG-Version der Benutzeroberfläche war dies ein echter Spielretter.
Wir haben auch erweiterte CSS3-Eigenschaften verwendet, um das Erscheinungsbild der Scrollleiste anzupassen und sie subtiler zu gestalten (siehe http://webkit.org/blog/363/styling-scrollbars/ für die Gestaltung von Bildlaufleisten in WebKit-Browsern).
CSS3-Übergänge
Für HTML5 MathBoard haben wir alle Animationen des iPads repliziert und sogar eine neue Animation für das nach rechts geschobene Steuerfeld hinzugefügt. Dank der CSS3-Übergänge war das Hinzufügen von Animationen ein Kinderspiel und es wurde eine optimale Leistung erzielt.
In den Anwendungen gab es drei Hauptanimationen.
1. Mit dem verschiebbaren rechten Bereich
Die erste Animation befindet sich im rechten Bereich (#rightPane). Sie wird geschlossen, wenn der Nutzer ein neues Quiz startet, und wieder geöffnet, wenn der Nutzer ein Quiz beendet.
Für diesen Effekt haben wir den folgenden CSS-Übergang verwendet und über JavaScript ausgelöst. Der Standardstil von rightPane 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, verschiebt unsere JavaScript-Logik den Bereich:
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 können und die Schließposition genauso hartcodieren wie die offene.
- Wir hätten auch CSS „translate“ verwenden können, das wesentlich leistungsfähiger gewesen wäre als Animieren der „left“-Eigenschaft des Bereichs. Dies gilt insbesondere für Mobilgeräte wie iOS, auf denen 3D-Transformationen hardwarebeschleunigt sind.
setTimeoutist in diesem Fall 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 Einschieben von rightPane angezeigt wird.
2. Animation des Dialogfelds „Einstellungen“
Wenn der Nutzer rechts auf eine Einstellung klickt, wird das Dialogfeld „Einstellungen“ vom unteren Bildschirmrand angezeigt und scrollt nach unten zum entsprechenden Abschnitt.
Um dies zu erreichen, nahmen wir einen ähnlichen Übergang zum rechten Bereich vor. Das Einzige, was einige Zeit gedauert hat, war, das Ruckeln beim ersten Einblenden des Dialogs zu beheben.
Um den Browser anzuweisen, die Dialog-UI im Cache zu speichern, wurde sie einmal angezeigt und gescrollt. Zuerst haben wir es mit display: none versucht.
Diese Vorgehensweise war falsch, da der Browser angenommen hat, dass das Dialogfeld nicht angezeigt werden muss.
Die Lösung bestand darin, die Einstellungen bei der Initialisierung mit einem z-index: -1-Objekt anzuzeigen, sodass sie für den Nutzer nicht, aber für den Browser sichtbar war.
3. Quiz erfolgreich oder falsche Nachrichtenanimation
Bei der dritten Animation
handelt es sich um zwei Elemente. Wenn die Meldung „Erfolg“ oder „Falsch“ angezeigt wird, skalieren Sie zuerst auf einen bestimmten Punkt, warten Sie etwas und skalieren Sie schließlich noch größer und verschwinden dann wieder. Dafür gibt es zwei CSS3-Animationsstile, die über JavaScript in einem webkitTransitionEnd-Ereignis orchestriert werden.
.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 ein Nutzer ein Quiz beantwortet, gibt die App einen Erfolgs- oder Fail-Ton aus.
Die einfache Wahl bestand darin, das Audio-Tag zu verwenden und play() darüber aufzurufen.
Diese Audiobits 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 eröffnet wahrhaft eine neue Art von Web-, Desktop- und mobilen Apps. CSS3 trug entscheidend dazu bei, das Design der App an das ausgefeilte MathBoard für das iPad anzupassen. Der HTML5-Speicher passte perfekt zu unserer Datenpersistenz und die Einfachheit von HTML5-Audio ermöglichte es uns, die iPad-App eng nachzubilden.