Definición de diseños y vistas (aplicaciones de la Tienda Windows con JavaScript y HTML)

Puedes crear aplicaciones de la Tienda Windows que proporcionan una experiencia fluida y armoniosa a través de una diversidad de factores de forma, tamaños de pantalla y estados de visualización a mediante la gestión coherente y predecible de la interfaz de usuario. Quieres que la aplicación tenga un aspecto genial cuando los usuarios la vean en una tableta o en un monitor grande de alta definición, cuando giran la pantalla a la posición vertical y cuando cambian el tamaño de la aplicación. Si realizas la planeación de la interfaz de usuario según los dispositivos y las vistas que eligen los usuarios, puedes hacer que tu interfaz de usuario se redistribuya elegantemente de acuerdo con lo que hayan elegido.

Vistas de pantalla completa horizontal, pantalla completa vertical y tamaño estrecho modificado

La especificación de la interfaz de usuario de una aplicación de la Tienda Windows con JavaScript gira en torno a dos factores principales: las vistas que admite la aplicación y los diseños que esta requiere. Las hojas de estilos en cascada (CSS) se usan para realizar el trabajo.

CSS Describes y administras la interfaz de usuario a través de CSS basadas en estándares, que separan el contenido de la presentación; es decir, separa lo que se muestra de cómo se muestra. Esta separación permite proporcionar una experiencia de usuario coherente, usable y entretenida que admite varios dispositivos, factores de forma, tamaños de pantalla y estados de visualización.

Diseños Los diseños son mecanismos a través de los cuales la aplicación puede acomodar las vistas que admite. Al contenido de la aplicación le defines el estilo, la estructura y la presentación a través de módulos de diseño de hojas de estilos en cascada, nivel 3 (CSS3), como cuadrículas, varias columnas, regiones y cuadros flexibles que pueden adaptarse a la forma en que elija el usuario para ver el contenido.

Una aplicación que incorpora funcionalidad de zoom semántico puede especificar umbrales semánticos donde, según la granularidad y cantidad de información que se presenta, la interfaz de usuario puede cambiar entre un diseño de cuadrícula y un diseño lineal.

Vistas Una vista es la forma en que el usuario tiene acceso al contenido de la aplicación y lo manipula.

  • Orientación horizontal o vertical
  • Pantalla completa o tamaño cambiado
  • Superficies de la UI expandibles, acercables o alejables, ajustables en cuanto a escala y tamaño
  • Elementos de UI específicos, como panel de resultados de búsqueda o la estructura de una carpeta

Para la definición de diseños y vistas para una aplicación de la Tienda Windows es necesario que estés familiarizado con HTML, JavaScript y CSS.

En esta sección

TemaDescripción

Inicio rápido: Definir diseños de aplicaciones

Los diseños de aplicaciones se pueden definir para cualquier orientación o tamaño de ventana.

Inicio rápido: Diseñar aplicaciones para distintos tamaños de ventana

A la hora de diseñar una aplicación que se vea y funcione bien en cualquier tamaño de ventana, debes elegir si quieres crear diseños adicionales para complementar el diseño horizontal a pantalla completa predeterminado.

Cómo agregar funcionalidad a la plantilla de cuadrícula

Puedes ampliar la plantilla Aplicación de cuadrícula de Microsoft Visual Studio para incluir funcionalidades importantes adicionales que aporten valor a tu aplicación.

Elección de un diseño

Para proporcionar la interfaz de usuario más flexible y adaptable para los usuarios de la aplicación de la Tienda Windows, primero debes decidir qué modo de diseño es el más adecuado para el contenido y con qué vistas se puede usar el contenido. En este tema se describen las características de diseño de las hojas de estilos en cascada de nivel 3 (CSS3) admitidas por las aplicaciones de la Tienda Windows en Windows 8.

Diseñar una página de la aplicación

Puedes usar el modelo de diseño descrito en este artículo para diseñar elementos de interfaz de usuario en las páginas de tu aplicación. Seguir patrones coherentes para los márgenes, los encabezados de página, los márgenes internos y otros elementos de este tipo nos ayuda a mantener la unidad en las aplicaciones y permite a los usuarios comprender fácilmente las interacciones en todo el sistema.

 

Temas relacionados

Diseñar la interfaz de usuario
Diseñar una página de la aplicación

 

 

Mostrar:
© 2014 Microsoft. Reservados todos los derechos.