Introducción

MathBoard en iPad, una aplicación de PalaSoftware, es una aplicación muy pulida con muchas animaciones sutiles pero naturales y una apariencia realista única. El objetivo era hacer el puerto de mayor fidelidad de la aplicación para iPad a HTML5.
N2N-Apps es una empresa de desarrollo de software que se enfoca en la compilación de la nueva generación de aplicaciones web y para dispositivos móviles con tecnología HTML5. La empresa fue fundada en 2010 por Jeremy Chone, quien, después de 11 años de experiencia en ingeniería y administración en Netscape, Oracle y Adobe, decidió compartir su experiencia con las empresas para crear aplicaciones web y para dispositivos móviles de alta calidad. N2N-Apps se enfoca en la calidad y la velocidad de la entrega.
Descarga MathBoard para Chrome Web Store Descarga MathBoard para Chrome Web Store (versión gratuita)
Requisitos
Los requisitos clave para este proyecto de portabilidad a HTML5 fueron los siguientes:
- Puerto de alta fidelidad del aspecto y la interfaz de usuario de la aplicación original para iPad.
- Adaptarse al factor de forma objetivo (p. ej., PC/Mac con teclado/mouse en comparación con pantalla táctil)
- Implementa el 100% de las funciones aplicables.
- Segmenta tus anuncios principalmente para navegadores HTML5.
- Haz que la aplicación sea "sin servidor" para que se ejecute por completo en el cliente y se pueda alojar en un servidor estático o en una aplicación empaquetada de Google Chrome.
- Crea una versión 1.0 con todas las funciones, excepto el solucionador de problemas, en menos de un mes.
Arquitectura

Teniendo en cuenta los requisitos, decidimos usar la siguiente arquitectura:
- HTML5: Como no tenemos ningún requisito de compatibilidad con HTML4, decidimos usar HTML5 como base.
- jQuery: Si bien HTML5 tiene muchos de los selectores avanzados que hacen que jQuery sea tan buen, decidimos seguir con jQuery de todos modos, ya que nos brindó una forma muy sólida y madura de manipular el DOM y los eventos relacionados. jQuery también tiene el beneficio de estar más centrado en el DOM, lo que tiende a hacer que el diseño y la implementación de una aplicación sean más cercanos al HTML.
- SnowUI: jQuery proporciona una excelente API y prácticas recomendadas para trabajar con el DOM. Sin embargo, para la aplicación de MathBoard HTML5, necesitábamos un framework de estilo MVC o MVP para organizar todas las vistas diferentes. SnowUI es un framework de MVC simple pero potente basado en jQuery. Proporciona un mecanismo de MVC centrado en el DOM y una forma flexible de compilar componentes personalizados, a la vez que le brinda al desarrollador de la aplicación la oportunidad de usar cualquier biblioteca de widgets o controles, o código personalizado que considere óptimo.
Consideraciones para pasar de iPad a PC
Cuando portamos la aplicación a HTML5 para su uso en PC, tuvimos que hacer varias modificaciones en el diseño y la interacción del usuario con la aplicación.
Orientación de la pantalla
La MathBoard para iPad tiene una orientación exclusivamente vertical, lo que no era óptimo para las pantallas de PC, ya que, por lo general, se usan de forma horizontal. En consecuencia, reorganizamos el diseño de la IU y movimos el panel de configuración al lado derecho, en una vista deslizante (animada por transiciones CSS3).

Entrada: Teclado/mouse en comparación con la entrada táctil
Otra diferencia clave entre la versión para iPad y la web es la interfaz de entrada. En el iPad, solo tienes la interfaz táctil, en la PC, debes tener en cuenta el mouse y el teclado.
Los controles de entrada de MathBoard en el iPad están muy pulidos. Queríamos la misma representación de alta fidelidad en la interfaz web. La solución fue agregar compatibilidad con combinaciones de teclas y replicar los controles de la IU con el posicionamiento de CSS. La portabilidad a HTML5 fue perfecta en términos de píxeles:

Al igual que en la interfaz de iPad, permitimos que el usuario haga clic en las flechas hacia la izquierda y hacia la derecha para cambiar el valor de un control. También puedes arrastrar la línea vertical para cambiar los valores rápidamente. Se implementó un comportamiento de repetición para click
y keydown
para que los usuarios puedan acelerar el cambio de valor cuando se presiona el mouse o el teclado.
Se agregó compatibilidad con TAB para pasar de un campo de entrada a otro, y las flechas ← y → alternan los valores.
Una función de la versión para iPad que no tenía mucho sentido para la interfaz de la PC era la mesa de dibujo. Si bien podría haber sido elegante implementarlo, dibujar números con el mouse no es muy práctico. En cambio, decidimos dedicar más tiempo a perfeccionar la interfaz del teclado que a implementar el tablero de dibujo.
Funciones de HTML5
En la versión web de MathBoard, usamos muchas funciones de HTML5:
Almacenamiento local
MathBoard permite a los usuarios guardar sus cuestionarios para volver a reproducirlos más tarde. HTML5 MathBoard implementa esta función con HTML5 localStorage
a través de la interfaz de DAO de SnowUI.
localStorage
fue una opción natural, ya que los datos eran bastante simples y no requerían indexación avanzada. Almacenamos todos los cuestionarios en un formato JSON que JSON.stringify
como texto.
La DAO de snowUI es un wrapper de interfaz CRUD simple que permite que la IU recupere datos sin tener que preocuparse por cómo se almacenan. La implementación de DAO se encarga de los detalles del almacenamiento.
En MathBoard, los requisitos de almacenamiento eran muy simples. Solo necesitábamos almacenar la configuración del usuario y los datos del cuestionario. Ambos se almacenaban como cadenas JSON en localStorage
.
Por ejemplo, el DAO para el valor de configuración se veía de la siguiente manera:
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();
})());
Una vez que este DAO esté registrado para settingValue
, la IU puede realizar la siguiente llamada sin tener que preocuparse por la lógica de la tienda:
var addition = snow.dm.get('settingValue', 'operator_addition');
addition.value = true; // to check the addition checkbox
snow.dm.save('settingValue', addition);
Fuentes CSS3
MathBoard usa fuentes personalizadas. Gracias a la compatibilidad con fuentes CSS3, fue muy fácil incluir la fuente de tipo verdadero “Chalkduster” en nuestra aplicación:
@font-face {
font-family: Chalkduster;
src: url(Chalkduster.ttf);
}
Y, como esta fuente era la predeterminada para casi todo el texto de la aplicación, la hicimos la predeterminada para el cuerpo.
body {
background: #333333;
font-family: Chalkduster;
color: #ffffff;
}
Gradiente, sombra y esquinas redondeadas de CSS3
Todos los gradientes, sombras, transparencias y esquinas redondeadas se realizan con CSS3. Esto fue un verdadero ahorro en comparación con la forma tradicional de crear interfaces de usuario con .png.
También usamos propiedades avanzadas de CSS3 para personalizar el aspecto de la barra de desplazamiento y hacerla más sutil (consulta http://webkit.org/blog/363/styling-scrollbars/ para aplicar diseño a las barras de desplazamiento en navegadores WebKit).
Transiciones de CSS3
Para MathBoard HTML5, replicamos todas las animaciones del iPad y hasta agregamos una nueva para el panel deslizante derecho. Gracias a las transiciones de CSS3, agregar animaciones fue trivial y permitió obtener el mejor rendimiento.
Teníamos tres animaciones principales en las aplicaciones.
1.) El panel deslizante derecho
La primera animación está en el panel derecho (#rightPane
), que se cierra cuando el usuario inicia un cuestionario nuevo y se abre cuando el usuario finaliza un cuestionario.
Para crear este efecto, usamos la siguiente transición de CSS y la activamos
mediante JavaScript. Se abre el estilo predeterminado del panel derecho:
#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;
}
Cuando el usuario inicia un cuestionario, nuestra lógica de JavaScript mueve el panel:
var $rightPane = $('#rightPane');
var left = $rightPane.position().left - 400;
setTimeout(function() {
$rightPane.css('left', left + 'px');
}, 0);
Estas son algunas notas sobre esta implementación:
- Dado que los tamaños de la aplicación son fijos, podríamos haber usado una clase CSS ".close" y codificar la posición de cierre de la misma manera que codificamos la posición abierta.
- También podríamos haber usado “translate” de CSS, que habría tenido un mejor rendimiento que animar la propiedad “left” del panel. Esto es especialmente cierto para los dispositivos móviles (como iOS), en los que las transformaciones 3D se aceleran con hardware.
- El
setTimeout
no es estrictamente necesario en este caso, ya que la posición original se estableció antes de la modificación. Sin embargo, permite que el navegador haga que la animación sea más fluida mostrando el cuestionario justo antes de deslizar el panel derecho.
2.) Animación del cuadro de diálogo de configuración
Cuando el usuario hace clic en un parámetro de configuración de la derecha, el diálogo de configuración aparece desde la parte inferior de la pantalla y se desplaza hacia abajo hasta la sección correspondiente.
Para lograrlo, hicimos una transición similar al panel derecho. Lo único que requirió un poco de tiempo fue resolver la inestabilidad en la primera aparición del diálogo.
Para indicarle al navegador que almacene en caché la IU del diálogo, terminamos mostrándola una vez y desplazándonos hasta ella. Al principio, lo intentamos con display: none
.
Este enfoque fue incorrecto porque el navegador asumió que no es necesario mostrar el diálogo.
La solución fue mostrar la configuración con un z-index: -1
en la inicialización, lo que la hace invisible para el usuario, pero visible para el navegador.
3.) Animación incorrecta del mensaje de éxito o error del cuestionario
La tercera animación es en realidad dos en uno. Cuando aparezca el mensaje "correcto" o "incorrecto", primero escala hasta un punto, espera un poco y, finalmente, escala aún más y desaparece. Para ello, tenemos dos estilos de animación CSS3 y los orquestamos a través de JavaScript en un evento 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);
Etiqueta de audio
Cuando los usuarios responden un cuestionario, la aplicación emite un sonido de éxito o error.
La opción simple fue usar la etiqueta de audio y llamar a play()
.
Estos fragmentos de audio se agregan a la página principal de la aplicación:
<audio id="audioCorrect" src="correct.mp3" preload="auto" autobuffer></audio>
<audio id="audioWrong" src="wrong.mp3" preload="auto" autobuffer></audio>
Conclusión
HTML5 realmente permite una nueva generación de aplicaciones web, para computadoras y para dispositivos móviles. CSS3 fue fundamental para personalizar el aspecto de la aplicación para que coincida con la alta sofisticación de MathBoard para iPad. El almacenamiento de HTML5 fue una opción perfecta para nuestra persistencia de datos, y la simplicidad del audio HTML5 nos permitió replicar de cerca la app para iPad.