Aplicaciones adaptables a la resolución

 

Norman-chou nos muestra en este post las diferentes técnicas para adaptar nuestras aplicaciones HTML5 a diferentes resoluciones.  

 

Introducción


 

Uno de los principales pilares en una aplicación de calidad es la capacidad de adaptarse a diferentes entornos y dispositivos.  Y, dentro de estas ‘exigencias’, otra de ellas (fundamental) sería satisfacer el tamaño de pantalla del dispositivo. Es imposible e imprudente codificar todas las resoluciones de pantalla posibles, por lo tanto, es fundamental que una aplicación, de forma automática, pueda ajustarse a cualquier tamaño de pantalla, ya sea en un teléfono inteligente o un escritorio, las aplicaciones pueden ser diseñadas para ser independientes de la resolución de la pantalla.  En este artículo se analizan los diseños de interfaz de usuario para implementar una aplicación con la resolución dinámica.  Vamos a usar HTML5, JavaScript y CSS en esta demo / artículo.

 

Información Técnica


 

La demo básicamente consta de dos partes: la creación de la página con CSS y luego hacer el cambio de tamaño automático usando Javascript.

Parte 1: Configuración de página 

Debemos diseñar y configurar correctamente la página de cambio de tamaño dinámico. Para lograr esto, vamos a utilizar CSS y Javascript.  En primer lugar, debemos elegir el lugar del 'área de juego' dentro de la página. Por lo general, el diseño de aplicaciones usa a menudo la mayor parte de la pantalla con la interacción y una pequeña sección que muestra las estadísticas. Es una muy buena costumbre de diseño utilizar etiquetas div, permitiendo futuras incorporaciones. En la demo, tendremos un área de trabajo que cubrirá la mayor parte de la página y una pequeña área de actualización con un banner en la parte inferior.

Usaremos JavaScript para manipular el actionArea y para lograr esto nos valdremos de algunas propiedades CSS. Estas propiedades establecen la preparación para el cambio de tamaño.  Utilizando left y top al 50%, se ubica el área de acción en el centro de la pantalla.  Utilizamos el porcentaje ya que si trabajamos en pixeles, el pixel central sería único para diferentes resoluciones de pantalla.  Pensar en términos de tamaño de píxel es útil al principio, pero para una buena práctica de diseño final debe ser percibido como porcentaje. El Canvas se extenderá por toda la pantalla, queriendo introducir al mismo tiempo, un pequeño banner en la parte inferior.

 

<div id=”actionArea”>
  <canvas id=”actionCanvas”></canvas>
  <div id=”updateBanner”></div>
</div>

#actionArea {
  position: absolute;
  left:     50%;
  top:      50%;
}

#actionCanvas {
  width: 100%;
  height: 100%;
}
#updateBanner {
  position: absolute;
  width: 100%;
  height: 8%;
  bottom: 0;
  opacity: 0.8;
}

 

 

 

 

Parte 2: Cambiar el tamaño basadose en la relación de aspecto

Al igual que la televisión y el cine, la aplicación debe considerar la relación de aspecto. Hay una variedad de relaciones de aspecto extendidas, pero 4:3 es típicamente la más acertada. Cubre la mayoría de las pantallas en el mercado y con frecuencia es una apuesta segura para mantener una buena apariencia, incluso si el dispositivo dispone de pantalla panorámica.

 


Vamos a crear una función que de forma dinámica puede cambiar el tamaño de la aplicación sobre la base de la relación de aspecto original.  En primer lugar, tenemos que extraer información de la pantalla del dispositivo para obtener el área de acción, definido antes, y también determinar la información de tamaño de la pantalla actual.

 

var actionArea = document.getElementById('actionArea');
var aspectRatio = 4 / 3;
var newWidth = window.innerWidth;
var newHeight = window.innerHeight;
var newWidthToHeight = window.innerWidth / window.innerHeight;

 

 

Ahora debemos calcular las diferencias entre el actionArea y el tamaño de la pantalla del dispositivo. O bien podría haber una diferencia de anchura o una diferencia de altura. En ambos casos, hay que añadir el espacio de relleno en el actionArea donde corresponda.

 

// screen width has extra width, so we add some filler space
if (newWidthToHeight > aspectRatio) 
{
  newWidth = newHeight * aspectRatio;
  actionArea.style.height = newHeight + 'px';
  actionArea.style.width = newWidth + 'px';
} 
else // screen has extra height, so we add some filler space
{ 
  newHeight = newWidth / aspectRatio;
  actionArea.style.width = newWidth + 'px';
  actionArea.style.height = newHeight + 'px';
}

 

 

Con el espacio de relleno completo, tenemos que centrar el área de acción en el centro de la pantalla.

 

actionArea.style.marginTop = (-newHeight / 2) + 'px';
actionArea.style.marginLeft = (-newWidth / 2) + 'px';

 

 

Por último, debemos confirmar estos cambios a la resolución de la aplicación.

 

document.getElementById('actionCanvas').width = newWidth;
document.getElementById('actionCanvas').height = newHeight;

 

 

A continuación se muestra la función de completa:

 

function resizeScreen() {
    var actionArea = document.getElementById('actionArea');
    var aspectRatio = 4 / 3;
    var newWidth = window.innerWidth;
    var newHeight = window.innerHeight;
    var newWidthToHeight = window.innerWidth / window.innerHeight;

    
    // screen width has extra width, so we add some filler space
   if (newWidthToHeight > aspectRatio) 
   {
     newWidth = newHeight * aspectRatio;
     actionArea.style.height = newHeight + 'px';
     actionArea.style.width = newWidth + 'px';
   } 
   else // screen has extra height, so we add some filler space
   { 
     newHeight = newWidth / aspectRatio;
     actionArea.style.width = newWidth + 'px';
     actionArea.style.height = newHeight + 'px';
   }

    
    actionArea.style.marginTop = (-newHeight / 2) + 'px';
    actionArea.style.marginLeft = (-newWidth / 2) + 'px';
    
    document.getElementById('actionCanvas').width = newWidth;
    document.getElementById('actionCanvas').height = newHeight;
    }

 

 

Parte 3: Redimensionar automaticamente

Esta última parte es para asegurarse de que el navegador detecta automáticamente la necesidad de cambiar el tamaño de la aplicación.  Para lograr esto, vamos a añadir listeners que llaman a la función que acabamos de crear.

 

window.addEventListener('resize', resizeScreen, false);
window.addEventListener('orientationchange', resizeScreen, false);

 

Más recursos


 

Esta es una sección para hacer referencia a otros grandes artículos, tutoriales, documentos de referencia, etc ...  Algunos buenos lugares para buscar más información:

 

Artículo original disponible en este link.

Para obter mais informações sobre otimizações de compiladores, consulte Aviso sobre otimizações.