Étude de cas : MathBoard HTML5

Introduction

Application MathBoard

MathBoard sur iPad, une application PalaSoftware, est une application très soignée avec de nombreuses animations subtiles mais naturelles et un aspect réaliste unique. L'objectif était de réaliser la conversion de l'application iPad vers HTML5 avec la plus grande fidélité possible.

N2N-Apps est une entreprise de développement logiciel spécialisée dans la création de la prochaine génération d'applications Web et mobiles avec la technologie HTML5. L'entreprise a été fondée en 2010 par Jeremy Chorne 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 les entreprises pour créer des applications Web et mobiles de haute qualité. N2N-Apps se concentre sur la qualité et la rapidité de diffusion.

Télécharger MathBoard sur le Chrome Web Store Télécharger MathBoard sur le Chrome Web Store (version sans frais)

Conditions requises

Les principales exigences de ce projet de portage HTML5 étaient les suivantes:

  1. Port haute fidélité de l'interface utilisateur et de l'apparence de l'application iPad d'origine.
  2. Adaptez-vous au facteur de forme cible (PC/Mac avec clavier/souris ou écran tactile, par exemple).
  3. Implémentez 100% des fonctionnalités applicables.
  4. Cibler principalement les navigateurs HTML5
  5. Rendez l'application "sans serveur" afin qu'elle s'exécute entièrement sur le client et qu'elle puisse être hébergée sur un serveur statique ou une application empaquetée Google Chrome.
  6. Créez une version 1.0 avec toutes les fonctionnalités, à l'exception du solveur de problèmes, en moins d'un mois.

Architecture

Architecture

Compte tenu des exigences, nous avons décidé d'opter pour l'architecture suivante:

  1. HTML5: comme nous n'avons aucune exigence de compatibilité avec HTML4, nous avons choisi HTML5 comme base.
  2. jQuery: bien que HTML5 dispose de nombreux sélecteurs avancés qui font la force de jQuery, nous avons décidé de nous en tenir à jQuery, car il nous a fourni un moyen très robuste et mature de manipuler le DOM et les événements associés. jQuery présente également l'avantage d'être plus centré sur le DOM, ce qui tend à rapprocher la conception et l'implémentation d'une application du HTML.
  3. SnowUI: jQuery fournit une excellente API et des bonnes pratiques 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 simple, mais puissant, basé sur 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 au développeur d'applications la possibilité d'utiliser n'importe quelle bibliothèque de widgets/commandes ou code personnalisé qu'il juge optimal.

Points à noter concernant la migration de l'iPad vers un PC

Lors du portage de l'application vers HTML5 pour PC, nous avons dû apporter plusieurs modifications à la conception et à l'interaction utilisateur de l'application.

Orientation de l'écran

Le MathBoard pour iPad est exclusivement orienté verticalement, ce qui n'était pas optimal pour les écrans d'ordinateur, car ils sont généralement utilisés horizontalement. 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 coulissante (animée par des transitions CSS3).

Orientation de l'écran
Orientation de l'écran iPad par rapport à HTML5

Saisie: clavier/souris ou tactile

L'interface de saisie est une autre différence majeure entre la version Web et celle pour iPad. Sur l'iPad, vous n'avez que l'interface tactile, tandis que sur le PC, vous devez tenir compte à la fois de la souris et du clavier.

Les commandes d'entrée du 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 à ajouter la prise en charge des raccourcis clavier et à reproduire les commandes de l'interface utilisateur à l'aide du positionnement CSS. Le port vers HTML5 était parfait:

Commandes de l'interface utilisateur
Paramètres de version iPad et HTML5

Comme dans l'interface de l'iPad, nous permettons à l'utilisateur de cliquer sur les flèches de gauche et de droite pour modifier la valeur d'un contrôle. 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 la modification de la valeur lorsqu'ils appuient sur la souris ou le clavier.

La touche TAB a été ajoutée pour passer d'un champ de saisie à un autre, et les flèches ← et → permettent de faire défiler les valeurs.

La planche à dessin de la version iPad n'avait pas beaucoup de sens pour l'interface PC. Bien qu'il aurait été possible de l'implémenter de manière élégante, dessiner des chiffres avec une souris n'est pas très pratique. Nous avons donc décidé de consacrer plus de temps à l'amélioration de l'interface du clavier qu'à l'implémentation du tableau de 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é à l'aide de localStorage HTML5 à l'aide de l'interface DAO SnowUI.

localStorage était un choix naturel, car les données étaient assez simples et ne nécessitaient pas d'indexation avancée. Nous stockons tous les quiz dans un format JSON que nous JSON.stringify en tant que 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 la façon dont elles sont réellement stockées. L'implémentation de la DAO s'occupe des détails de stockage.

Dans MathBoard, les exigences de stockage étaient très simples. Nous ne devions stocker que les paramètres utilisateur et les données du quiz. Les deux étaient stockés sous forme de chaînes JSON dans localStorage.

Par exemple, le DAO de la valeur du paramètre se présentait comme suit:

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 se soucier de la logique de 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, il a été facile d'inclure la police TrueType "Chalkduster" dans notre application:

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

Comme cette police était celle par défaut pour la quasi-totalité du 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, coins arrondis

Tous les dégradés, ombres, transparences et coins arrondis sont réalisés avec CSS3. Cela a été un véritable sauvetage 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 afin de la rendre plus subtile (consultez http://webkit.org/blog/363/styling-scrollbars/ pour découvrir comment styliser les barres de défilement dans les navigateurs WebKit).

Transitions CSS3

Pour MathBoard HTML5, nous avons reproduit toutes les animations de l'iPad et même ajouté une nouvelle animation pour le panneau coulissant de droite. Grâce aux transitions CSS3, l'ajout d'animations était simple et permettait d'obtenir les meilleures performances.

Les applications comportaient trois animations principales.

1.) Volet de droite coulissant

La première animation se trouve dans le volet de droite (#rightPane), qui se ferme lorsque l'utilisateur commence un quiz et s'ouvre lorsque l'utilisateur termine un quiz. Pour créer cet effet, nous avons utilisé la transition CSS suivante et l'avons déclenchée via JavaScript. Le style par défaut de 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 lance 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);

Voici quelques remarques concernant cette implémentation:

  1. Étant donné que les tailles des applications 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 codons en dur l'ouverture.
  2. Nous aurions également pu utiliser la propriété CSS "translate", qui aurait été plus performante que l'animation de la propriété "left" du volet. Cela est particulièrement vrai pour les appareils mobiles (comme iOS), où les transformations 3D sont accélérées par matériel.
  3. setTimeout n'est pas strictement nécessaire dans ce cas, car la position d'origine a été définie avant la modification. Toutefois, cela permet au navigateur d'améliorer l'animation en affichant le quiz juste avant de faire glisser le volet droit.

2.) Animation de la boîte de dialogue des 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 défile jusqu'à la section appropriée.

Pour ce faire, nous avons effectué une transition similaire dans le volet de droite. La seule chose qui a pris un certain temps a été de résoudre les à-coups lors de la première apparition de la boîte de dialogue. Pour demander au navigateur de mettre en cache l'UI de la boîte de dialogue, nous avons fini par l'afficher une fois et à y faire défiler le contenu. Au début, nous avons essayé avec display: none. Cette approche était incorrecte, car le navigateur supposait 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, ce qui les rendait invisibles pour l'utilisateur, mais visibles pour le navigateur.

3.)  Animation du message de réussite ou incorrecte du quiz

La troisième animation est en fait deux en une. Lorsque le message "Success" (Réussite) ou "Incorrect" (Incorrect) s'affiche, commencez par effectuer un zoom avant, attendez un peu, puis effectuez un zoom arrière et disparaissez. Pour ce faire, nous utilisons deux styles d'animation CSS3 et les coordonnons 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 de réussite ou d'échec. Le choix le plus simple était d'utiliser la balise audio et d'appeler play() dessus. 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

HTML5 permet de créer de nouvelles applications Web, pour ordinateur et mobiles. Le CSS3 a été essentiel pour personnaliser l'apparence de l'application afin qu'elle corresponde étroitement à la sophistication de MathBoard pour iPad. Le stockage HTML5 était parfaitement adapté à la persistance de nos données, et la simplicité de l'audio HTML5 nous a permis de reproduire fidèlement l'application iPad.