Definir diseños y vistas (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente
Puedes crear aplicaciones de Windows en tiempo de ejecución 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 un teléfono, 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.
.png "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 Windows en tiempo de ejecución con JavaScript gira en torno a dos factores principales: las vistas que admite la aplicación y los diseños que esta requiere. Para hacer el trabajo se usan las hojas de estilo CSS.
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 estilo CSS, 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 Windows en tiempo de ejecución es necesario que estés familiarizado con HTML, JavaScript y CSS.
En esta sección
| Tema | Descripción |
|---|---|
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. |
Puedes ayudar a tus usuarios a ser más productivos si les permites ver varias funciones independientes en ventanas distintas. |
|
Para proporcionar la interfaz de usuario más flexible y adaptable para los usuarios de tu aplicación de Windows en tiempo de ejecución, 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 CSS de nivel 3 (CSS3) admitidas por las aplicaciones de la Tienda Windows en Windows 8. |
|
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. |