Elegir un diseño (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

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. Los diseños de cuadros flexibles y de cuadrícula son útiles para crear diseños fluidos para aplicaciones y controles personalizados, mientras que las columnas múltiples y las regiones son más útiles para diseñar texto y otro contenido de lectura.

Diseño de cuadros flexibles

La caja flexible (Flexbox) es un mecanismo de diseño en el que los elementos secundarios se organizan y se ajusta su tamaño mediante un sistema basado en restricciones que admite tanto el ajuste de tamaño flexible y relativo como el ajuste de tamaño intrínseco. Los diseños de cuadros flexibles pueden adaptarse a varios tamaños de pantalla y permitir otros medios como revistas y periódicos digitales, y otros escenarios destinados al consumo de medios de impresión digital.

El diseño Flexbox está destinado al diseño de páginas web complejas, y es especialmente útil para hacer que la posición relativa y el tamaño de los elementos se mantengan constantes, incluso cuando los tamaños de ventana del navegador y la pantalla varían y cambian. Esto puede disminuir la confianza en controles flotantes, cuya correcta ubicación y ajuste de tamaño es más complicada.

El diseño Flexbox considera el espacio disponible cuando define las dimensiones de los cuadros, lo que permite el posicionamiento y el ajuste de tamaño relativos. Por ejemplo, puedes asegurarte de que el espacio en blanco adicional en la ventana de un navegador se distribuya equitativamente entre el tamaño de varios elementos secundarios, y que estos se centren en el medio del bloque que los contiene.

Con el diseño Flexbox puedes:

• Construir un diseño fluido — incluso cuando uses tamaños de pantalla y de ventana del explorador diferentes — pero que contenga elementos (como imágenes o controles) que mantengan su posición y su tamaño relativos.
• Especificar cómo se puede asignar de manera proporcionada el espacio sobrante a lo largo del eje de diseño (horizontal o vertical) de una serie de elementos para aumentar el tamaño de algunos elementos concretos.
• Especificar cómo se puede asignar el espacio sobrante a lo largo del eje de diseño de una serie de elementos para colocarlo antes, después o entre las series de elementos.
• Especificar cómo se puede ajustar el espacio sobrante perpendicular al eje de diseño de un elemento alrededor del elemento — por ejemplo, el espacio extra encima o debajo de botones que se han diseñado en paralelo.
• Controlar la dirección de los elementos situados en la página; por ejemplo, de arriba a abajo, izquierda a derecha, derecha a izquierda o de abajo a arriba.
• Reordenar los elementos de la pantalla con un orden diferente al que especifica el Document Object Model (DOM).c

A diferencia de la cuadrícula, la caja flexible no requiere elementos secundarios para posicionarse explícitamente en el contenedor principal. Seguramente prefieras usar la cuadrícula al diseñar contenedores de elementos ligeros con un número de elementos secundarios determinado de manera dinámica.

Para obtener más información, consulta Diseño de caja flexible ("Flexbox").

Alineación de cuadrícula

La cuadrícula proporciona un mecanismo para que los autores dividan el espacio disponible para la organización en columnas y filas mediante un conjunto de comportamientos de ajuste de tamaño predecible. Así, los autores pueden ubicar y ajustar el tamaño de los elementos del bloque de creación de la aplicación de forma precisa haciendo referencia a las líneas de la cuadrícula entre las columnas y las filas, o definiendo y haciendo referencia a una celda de la cuadrícula, que es un espacio rectangular que cubre una intersección de columnas y filas.

Al igual que Flexbox, la cuadrícula permite lograr una mayor fluidez de diseño de lo que es posible lograr mediante el posicionamiento mediante controles flotantes o un script. Te permite dividir el espacio por regiones principales de una página o aplicación web, y definir la relación entre las partes de un control de HTML en términos de tamaño, ubicación y nivel. Esto elimina la necesidad de crear un diseño fijo, que no puede aprovechar el espacio disponible dentro de la ventana del navegador. Como la cuadrícula te permite alinear los elementos en columnas y filas pero no tiene una estructura de contenido, también permite escenarios que no son posibles con tablas de HTML. Al usar la cuadrícula junto con consultas de medios, puedes permitir que el diseño se adapte sin problemas a cambios en el factor de forma del dispositivo, la orientación, el espacio disponible, etc. Dado que la cuadrícula controla el diseño horizontal y el vertical, puede que prefieras usar la cuadrícula en lugar de la caja flexible para el diseño de tu aplicación de nivel superior.

Para más información, consulta Diseño de cuadrícula.

Diseño multicolumna

Los diseños multicolumna admiten un flujo de contenido de una columna a otra para un número arbitrario de columnas.

El diseño multicolumna permite que el contenido fluya en varias columnas, que conservan un intervalo y una regla opcional entre ellos. También posibilita variar la cantidad de columnas sobre la base del tamaño de la ventana del navegador. W3C define un elemento multicolumna como un elemento cuya propiedad de ancho de columna o número de columnas no es automática y, por lo tanto, actúa como un contenedor para un diseño multicolumna. El diseño multicolumna introduce el cuadro de columna, que se define como un nuevo tipo de contenedor entre el cuadro de contenido y el contenido. Los elementos de columnas múltiples pueden tener varias filas de cuadros de columna. Las filas se dividen por elementos de extensiones de columna (elementos que tienen column-span:all especificado). Las filas se ordenan en dirección al elemento multicolumna. Los cuadros de columnas adyacentes están separados por un intervalo de columna, que opcionalmente pueden contener una regla de columna.

Para obtener más información, consulta Diseño multicolumna.

Diseño de regiones

El diseño de regiones es una característica de diseño de página que toma una sola secuencia de contenido y segmenta esa secuencia en varios contenedores vacíos en una plantilla HTML. Las plantillas HTML son documentos que se encuentran principalmente vacíos de contenido original y, en cambio, se componen principalmente de contenedores vacíos cuya ubicación y tamaño se ajusta para que el contenido de entrada tenga un diseño específico. Puedes usar regiones para que el texto fluya entre varias columnas con tamaños explícitos y posicionadas con hojas de estilos CSS, para crear un diseño de estilo revista o periódico.

Para obtener más información, consulta Regiones.

Laboratorios prácticos de Windows 8

Si quieres intentar trabajar con diseños de la aplicación y otras características clave de Windows 8, descarga los laboratorios prácticos para Windows 8. En ellos, se proporciona una introducción compuesta por módulos paso a paso para crear una aplicación de la Tienda Windows de ejemplo en el lenguaje de programación que prefieras (JavaScript y HTML o C# y XAML).

Temas relacionados

Diseñar la interfaz de usuario

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

Directrices sobre la experiencia del usuario para diseño y escalado