Présentation
MathBoard sur iPad, une application PalaSoftware, est une application très soignée dotée de nombreuses animations subtiles, mais naturelles, et d'une apparence réaliste unique. L'objectif était de faire passer le port le plus fidèle de l'application iPad sur HTML5.
N2N-Apps est une entreprise de développement de logiciels qui se concentre sur la création d'applications Web et mobiles nouvelle génération avec la technologie HTML5. L'entreprise a été financée en 2010 par Jeremy Chone qui, après 11 ans d'expérience en ingénierie et en gestion chez Netscape, Oracle et Adobe, a décidé de partager son expertise avec des entreprises pour créer des applications Web et mobiles de haute qualité. N2N-Apps se concentre sur la qualité et la rapidité de livraison.
Télécharger MathBoard pour le Chrome Web Store Télécharger MathBoard pour le Chrome Web Store (version sans frais)
Conditions requises
Les principales exigences pour ce projet de portage HTML5 étaient les suivantes:
- Port haute fidélité de l'interface utilisateur et de l'aspect général de l'application iPad.
- Adaptez-vous au facteur de forme cible (PC/Mac avec clavier/souris ou écran tactile, par exemple).
- Implémentez 100% des fonctionnalités applicables.
- Ciblez principalement les navigateurs HTML5.
- L'application doit être "sans serveur" de sorte qu'elle s'exécute entièrement sur le client et puisse être hébergée sur un serveur statique ou dans une application empaquetée Google Chrome.
- Créer une version 1.0 avec toutes les fonctionnalités, mais une solution qui résout les problèmes en moins d'un mois.
Architecture
Compte tenu des exigences, nous avons opté pour l'architecture suivante:
- HTML5: comme nous n'avons aucune exigence de compatibilité HTML4, nous avons décidé d'utiliser HTML5 comme base.
- jQuery: même si HTML5 dispose de nombreux sélecteurs avancés qui font de jQuery, nous avons décidé de nous en tenir à jQuery, car il nous permettait de manipuler le DOM et les événements associés de façon très efficace et mature. JQuery a également l'avantage d'être davantage centré sur le DOM, ce qui tend à rendre la conception et l'implémentation d'une application plus proches du langage HTML.
- SnowUI: jQuery fournit une API et des bonnes pratiques de qualité pour travailler avec le DOM. Toutefois, pour l'application MathBoard HTML5, nous avions besoin d'un framework de style MVC ou MVP pour orchestrer toutes les différentes vues. SnowUI est un framework MVC à la fois simple et puissant, qui s'ajoute à jQuery. Il fournit un mécanisme MVC centré sur le DOM et un moyen flexible de créer des composants personnalisés tout en laissant le développeur de l'application à la possibilité d'utiliser n'importe quel widget/bibliothèque de commandes ou code personnalisé qu'il juge optimal.
Considérations relatives à l'iPad vers PC
Lors du portage de l'application vers HTML5 pour une utilisation sur ordinateur, nous avons dû apporter plusieurs modifications à la conception et à l'interaction utilisateur de l'application.
Orientation de l'écran
L'iPad MathBoard est exclusivement orienté verticalement, ce qui n'était pas optimal pour les écrans de PC, car ils sont généralement utilisés de manière horizontale. Par conséquent, nous avons réorganisé la conception de l'interface utilisateur et déplacé le panneau des paramètres sur le côté droit, dans une vue glissante (animée par des transitions CSS3).
Saisie: clavier/souris ou tactile
Une autre différence clé entre l'iPad et la version Web réside dans l'interface de saisie. Sur l'iPad, vous n'avez que l'interface tactile. Sur PC, vous devez prendre en compte à la fois la souris et le clavier.
Les commandes de saisie de MathBoard sur l'iPad sont très soignées. Nous voulions la même représentation haute fidélité dans l'interface Web. La solution consistait à prendre en charge les raccourcis clavier et à répliquer les commandes d'interface utilisateur à l'aide du positionnement CSS. Le port vers HTML5 était parfait:
Comme dans l'interface iPad, nous permettons à l'utilisateur de cliquer sur les flèches vers la gauche et vers la droite pour modifier la valeur d'une commande. Vous pouvez également faire glisser la ligne verticale pour modifier rapidement les valeurs. Un comportement de répétition a été implémenté pour click et keydown afin que les utilisateurs puissent accélérer le changement de valeur lorsque l'utilisateur appuie sur la souris ou le clavier.
La compatibilité avec TAB a été ajoutée pour passer d'un champ de saisie à un autre, et les flèches ← et → font défiler les valeurs.
La planche à dessin était une fonctionnalité de la version iPad qui n'avait pas beaucoup d'intérêt pour l'interface du PC. Même s'il aurait été difficile de l'implémenter, dessiner des chiffres avec une souris n'est pas très pratique. Au lieu de cela, nous avons décidé de passer plus de temps à peaufiner l'interface du clavier qu'à implémenter la planche à dessin.
Fonctionnalités HTML5
Dans la version Web de MathBoard, nous utilisons de nombreuses fonctionnalités HTML5:
Stockage local
MathBoard permet aux utilisateurs d'enregistrer leur quiz pour le revoir plus tard. HTML5 MathBoard implémente cette fonctionnalité en utilisant le localStorage HTML5 à l'aide de l'interface DAO de SnowUI.
localStorage était un choix naturel, car les données étaient suffisamment simples et ne nécessitaient pas d'indexation avancée. Nous stockons tous les questionnaires dans un format JSON que nous JSON.stringify sous forme de texte.
Le DAO SnowUI est un wrapper d'interface CRUD simple qui permet à l'UI de récupérer des données sans avoir à se soucier de leur stockage. L'implémentation DAO s'occupe des détails du stockage.
Dans MathBoard, les exigences de stockage étaient très simples. Nous devions stocker uniquement les paramètres utilisateur et les données du quiz. Les deux étaient stockés sous forme de chaînes JSON dans localStorage.
Ainsi, par exemple, le DAO pour la valeur du paramètre ressemblait à ceci:
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();
})());
Une fois ce DAO enregistré pour settingValue, l'UI peut effectuer l'appel suivant sans avoir à se soucier de la logique du magasin:
var addition = snow.dm.get('settingValue', 'operator_addition');
addition.value = true; // to check the addition checkbox
snow.dm.save('settingValue', addition);
Polices CSS3
MathBoard utilise des polices personnalisées. Grâce à la prise en charge des polices CSS3, l'inclusion de la police "Chalkduster" dans notre application a été simple:
@font-face {
font-family: Chalkduster;
src: url(Chalkduster.ttf);
}
Et comme cette police était la police par défaut pour presque tout le texte de l'application, nous l'avons définie comme police par défaut pour le corps.
body {
background: #333333;
font-family: Chalkduster;
color: #ffffff;
}
Dégradé CSS3, ombre et angles arrondis
Tous les dégradés, ombres, transparence et angles arrondis sont exécutés avec CSS3. Il s'agissait d'une véritable économie de jeu par rapport à la méthode traditionnelle de création d'interfaces utilisateur au format .png.
Nous avons également utilisé des propriétés CSS3 avancées pour personnaliser l'apparence de la barre de défilement et la rendre plus subtile (consultez la page http://webkit.org/blog/363/styling-scrollbars/ pour styliser les barres de défilement dans les navigateurs WebKit).
Transitions CSS3
Pour HTML5 MathBoard, nous avons répliqué toutes les animations de l'iPad et en avons même ajouté une nouvelle pour le panneau coulissant de droite. Grâce aux transitions CSS3, l'ajout d'animations était simple et permet d'optimiser les performances.
Nous avions trois animations principales dans les applications.
1.) Volet coulissant vers la droite
La première animation se trouve dans le volet de droite (#rightPane), qui s'ouvre lorsque l'utilisateur lance un nouveau quiz et s'ouvre à la fin.
Pour créer cet effet, nous avons utilisé la transition CSS suivante et l'avons déclenchée via JavaScript. Par défaut, le style du panneau "rightPane" est ouvert:
#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;
}
Lorsque l'utilisateur démarre un quiz, notre logique JavaScript déplace le panneau:
var $rightPane = $('#rightPane');
var left = $rightPane.position().left - 400;
setTimeout(function() {
$rightPane.css('left', left + 'px');
}, 0);
Quelques remarques sur cette implémentation:
- Étant donné que les tailles de l'application sont fixes, nous aurions pu utiliser une classe CSS ".close" et coder en dur la position de fermeture de la même manière que nous codions en dur la position ouverte.
- Nous aurions également pu utiliser CSS "translate", qui aurait été plus performant que d'animer la propriété "left" du volet. Cela est particulièrement vrai pour les appareils mobiles (tels que iOS) où les transformations 3D sont accélérées par le matériel.
- Dans ce cas, la valeur
setTimeoutn'est pas strictement nécessaire, car la position d'origine a été définie avant la modification. Toutefois, cela permet au navigateur d'améliorer la fluidité de l'animation en affichant le quiz juste avant de faire glisser le panneau droit vers l'intérieur.
2.) Animation de la boîte de dialogue "Paramètres"
Lorsque l'utilisateur clique sur un paramètre à droite, la boîte de dialogue des paramètres s'affiche en bas de l'écran et fait défiler la page jusqu'à la section appropriée.
Pour ce faire, nous avons effectué une transition similaire vers le volet de droite. La seule chose qui a pris du temps, c'était de résoudre les saccades à la première apparition de la boîte de dialogue.
Pour demander au navigateur de mettre en cache l'interface utilisateur de la boîte de dialogue, nous avons fini par l'afficher une fois, puis nous avons fait défiler la page jusqu'à elle. Au début, nous avons essayé avec display: none.
Cette approche était incorrecte, car le navigateur a supposé que la boîte de dialogue n'avait pas besoin d'être affichée.
La solution consistait à afficher les paramètres avec un z-index: -1 lors de l'initialisation, afin de les rendre invisibles pour l'utilisateur, mais visibles par le navigateur.
3.) Réussite du questionnaire ou animation de message incorrecte
La troisième animation
est en fait deux en une. Lorsque le message "réussite" ou "incorrect" apparaît, effectuez d'abord la mise à l'échelle jusqu'à un point, patientez un peu, puis évoluez encore plus grandement avant de disparaître. Pour cela, nous avons deux styles d'animation CSS3, que nous orchestrerons via JavaScript sur un événement 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);
Tag audio
Lorsque les utilisateurs répondent à un quiz, l'application émet un son indiquant que l'utilisateur a réussi ou échoué.
Le choix le plus simple consistait à utiliser la balise audio et à appeler play() sur celles-ci.
Ces bits audio sont ajoutés à la page principale de l'application:
<audio id="audioCorrect" src="correct.mp3" preload="auto" autobuffer></audio>
<audio id="audioWrong" src="wrong.mp3" preload="auto" autobuffer></audio>
Conclusion
Le HTML5 contribue véritablement à un nouveau type d'applications Web, de bureau et mobiles. CSS3 a joué un rôle déterminant dans la personnalisation de l'application afin qu'elle corresponde étroitement à la sophistication élevée de MathBoard pour iPad. Le stockage HTML5 était parfaitement adapté à la persistance des données, et la simplicité de l'audio HTML5 nous a permis de reproduire fidèlement l'application iPad.