Inicio rápido: definir diseños de aplicaciones (HTML)

Artículo
12/12/2015

[ 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

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

Consulta esta característica como parte de nuestra serie Características de aplicaciones, de principio a fin: Interfaz de usuario de aplicaciones de la Tienda Windows, de principio a fin

Objetivo: Después de leer este artículo comprenderás claramente cómo usar HTML, las hojas de estilos CSS y JavaScript para crear una interfaz de usuario fluida que luzca grandiosa y funcione correctamente en todos los estados de visualización.

Requisitos previos

Ten un diseño en mente para tu aplicación.

Para aprender a planear y diseñar una aplicación de Windows en tiempo de ejecución, consulta el artículo para definir la visión.
Familiarízate con las ventanas redimensionables de Windows 8.1.

Puedes aprender más sobre los estados de visualización en las Directrices sobre la experiencia del usuario para diseño y escalado.
Comprende las consultas de medios CSS.

Las consultas de medios se definen en la especificación de las consultas de medios del World Wide Web Consortium (W3C). Puedes ver consultas de medios en acción en la Muestra de consultas de medios CSS.
Conoce cómo usar las características de diseño avanzadas de hojas de estilos CSS de nivel 3 (CSS3), especialmente la alineación de cuadrícula CSS3.

Puedes aprender sobre las características de diseño avanzadas de CSS3 y la alineación de cuadrícula en el tema sobre CSS.

Muestra de diseño adaptativo con CSS

Este artículo describe los conceptos básicos que implica definir diseños de la aplicación mediante la descripción del modo en que se implementan los diseños en la muestra de diseño adaptativo con CSS. Esta muestra es una aplicación de información meteorológica simulada que muestra el tiempo del día actual y un pronóstico de diez días. Demuestra cómo usar CSS y HTML, la cuadrícula de CSS, el control ListView y las consultas multimedia CSS para crear un diseño de la aplicación fluido.

Antes de entrar en detalles, observemos la estructura de la muestra de diseño adaptativo con CSS. La aplicación consta de tres páginas HTML. La primera es una página de nivel superior llamada App.html que define la superficie principal para los elementos de interfaz de usuario de la aplicación. Incluye un botón Atrás, un título y un subtítulo, un menú de la aplicación, los botones de la barra de la aplicación y un área para mostrar el contenido (el área blanca de la siguiente imagen).

Página principal de la aplicación de muestra

Las otras dos páginas HTML, Current.html y TenDay.html, definen la estructura del contenido que se muestra en el área de contenido de la página principal. La página Current.html muestra detalles sobre el tiempo del día actual:

Página del tiempo actual

La página TenDay.html muestra detalles sobre el pronóstico de diez días:

Página del pronóstico de diez días

Nos centraremos en las partes de la muestra de diseño adaptativo con CSS que definen el diseño de la página principal de la aplicación y el diseño del pronóstico de diez días.

Así es como se ve la página principal de la aplicación cuando se muestra el pronóstico de diez días en una pantalla de 10,6" con una resolución de 1366 x 768 en las orientaciones vertical y horizontal a pantalla completa, así como colocada en paralelo con otra aplicación, con el tamaño cambiado a un diseño estrecho y un diseño más ancho.

diseños vertical, horizontal, estrecho y ancho

Asegurarse de que la aplicación rellene el área disponible en la pantalla

Una aplicación bien diseñada tiene una superficie de interfaz de usuario que ocupa toda el área disponible en la pantalla. Al principio, esto puede parecer un desafío complicado debido a la amplia gama de factores de forma, resoluciones y orientaciones de los dispositivos a los que debe ajustarse una aplicación. Afortunadamente, CSS lo facilita.

Para garantizar que la aplicación ocupe toda el área disponible en la pantalla:

Usa un elemento div como contenedor de nivel superior para todos los demás elementos de interfaz de usuario de la página.
```
<body>
    <div class="win-ui-dark appGrid">
        
    </div>
</body>
```
Usa las propiedades CSS, vw y vh, para establecer las propiedades width y height del div correspondiente a la ventanilla. Por ejemplo, usa 100vw (ancho de la ventanilla) y 100vh (alto de la ventanilla) para rellenar la ventanilla, como se muestra aquí.
```
.appGrid {
    width: 100vw;
    height: 100vh;
    /* TODO: Add other styles here. */
}
```
vw y vh se pueden especificar para cualquier elemento, independientemente de su posición dentro de la jerarquía. Como el contexto de ajuste de tamaño de la ventanilla no varía, no es necesario tener en cuenta el ajuste de tamaño heredado.

Nota En el ejemplo, las propiedades width y height se establecen en 100%.

Definir el diseño básico de la página principal

Al diseñar la interfaz de usuario de tu aplicación, es mejor comenzar con la orientación horizontal. Una vez que has definido el diseño horizontal, es más fácil adaptarlo al vertical y a diseños estrechos y anchos.

Usar HTML para definir los elementos de interfaz de usuario de la página

La interfaz de usuario de una aplicación por lo general contiene elementos, como botones de navegación, encabezados, menús, controles, etc. Agrega estos elementos de interfaz de usuario como elementos HTML secundarios del elemento div de nivel superior de la página.

El siguiente HTML define los elementos de interfaz de usuario de la página de nivel superior de la aplicación de muestra de diseño adaptativo con CSS. Los elementos incluyen el botón Atrás, el título y el subtítulo, el menú de la aplicación, el área de contenido principal y los botones de la barra de la aplicación.

<body>
    <div class="win-ui-dark appGrid">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="win-type-xx-large titlecontainer" tabindex="0"><span class="pagetitle">Mountains</span><span class="win-type-x-large chevron">&#xE099</span></span>
                <span class="win-type-x-large pagesubtitle">Rainer</span>
            </h1>
        </header>
        <div id="headerFlyout" data-win-control="WinJS.UI.Menu">
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'rainierMenuItem', label:'Rainier'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'stHelensMenuItem', label:'St. Helens'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'olympusMenuItem', label:'Olympus'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'bakerMenuItem', label:'Baker'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'adamsMenuItem', label:'Adams'}"></button>
        </div>
        <div class="appViewContentMask">
            <div class="appViewContent">
                <div id="current-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/current.html', data: FluidAppLayout.Data.mountains[0].weatherData[0]}"></div>
                <div id="ten-day-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/tenDay.html', data: FluidAppLayout.Data.mountains[0].weatherData}"></div>
            </div>
        </div>
    </div>
    <div id="appbar" class="win-ui-dark appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'current', label: 'Current', icon: 'calendarday', type: 'toggle', onclick: FluidAppLayout.transitionPivot, selected: 'false', tooltip: 'Get the current report'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'tenDay', label: 'Ten day', icon: 'calendarweek', type: 'toggle', onclick: FluidAppLayout.transitionPivot, selected: 'false', tooltip: 'Get the ten day report'}"></button>
    </div>
</body>

Usar cuadrículas de CSS para ubicar los elementos de interfaz de usuario en la página HTML

Una de las mejores formas de lograr un diseño de interfaz de usuario fluido y adaptable es mediante cuadrículas CSS. Esto se debe a que la cuadrícula puede expandirse automáticamente para rellenar el espacio que se le ha proporcionado, y expone un amplio conjunto de propiedades que facilitan la adaptación del diseño de la interfaz de usuario para diferentes tamaños de ventana. Puesto que la posición de los elementos en una cuadrícula es independiente del orden en el que se especifican (es decir, su posición la impone exclusivamente CSS y no el orden en el formato HTML), es fácil disponer los elementos de diferente manera en distintos tamaños de pantalla o en diferentes orientaciones, o incluso para evitar por completo que se muestren ciertos elementos en algunos diseños.

Diseñar la página principal

La aplicación de muestra de diseño adaptativo con CSS aplica una cuadrícula de CSS al elemento div de nivel superior de la página App.html estableciendo la propiedad display de div -ms-grid. Esta cuadrícula de nivel superior define la estructura global para ubicar los elementos de interfaz de usuario en la página principal de la aplicación.
Después, la aplicación de muestra define las columnas y las filas de la cuadrícula estableciendo el valor de las propiedades -ms-grid-columns y -ms-grid-rows.

El siguiente código CSS aplica una cuadrícula al div de nivel superior de la página principal de la muestra. Esta cuadrícula se usa para ubicar los elementos que componen el encabezado de la aplicación (el botón Atrás, el título y el subtítulo, y el menú de la aplicación) y para establecer la posición del área de contenido principal.
```
.appGrid {
    display: -ms-grid;
    -ms-grid-columns: 120px 1fr;
    -ms-grid-rows: 120px 1fr; 

    /* Other properties omitted for clarity. */

}
```
El código CSS anterior crea una cuadrícula con dos columnas y dos filas. El ancho de la primera columna es de 120 píxeles y el de la segunda columna es de una "unidad fraccionaria". Esto significa que el ancho de la columna se expande automáticamente para ocupar el espacio disponible que no ocupa la primera columna. Las filas se definen de forma similar.

Esta figura muestra cómo la cuadrícula divide la página principal de la aplicación:
Posteriormente, la muestra de diseño adaptativo con CSS establece la posición de los elementos de interfaz de usuario asignando cada elemento a una celda determinada de la cuadrícula. Para ello, la muestra aplica las propiedades -ms-grid-column y -ms-grid-row a los elementos de la página. La cuadrícula CSS admite varias propiedades adicionales para colocar los elementos en relación con los límites de la celda, permitiéndoles ocupar varias columnas o filas. Para más información, consulta Diseño de cuadrícula.

El siguiente código CSS ubica el elemento header de la página principal de la aplicación de muestra en la columna 1, fila 1 de la cuadrícula de nivel superior y le permite ocupar ambas columnas de la cuadrícula. El código también crea una cuadrícula "secundaria" dentro de la columna 1, fila 1 de la cuadrícula de nivel superior. La cuadrícula secundaria se usa para ubicar los elementos individuales que componen el encabezado (el botón Atrás, el título y el subtítulo, y el menú de la aplicación).
```
header[role=banner] {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-column-span: 2;

    /* Child grid for positioning header items.*/
    display: -ms-grid;
    -ms-grid-columns: 120px 1fr;
    -ms-grid-rows: 1fr;
}
```
El código anterior crea una cuadrícula en el área resaltada en azul de la siguiente imagen.

La muestra de diseño adaptativo con CSS usa elementos div anidados para definir el área de contenido principal donde aparecen el pronóstico actual y el pronóstico de diez días:
```
<div class="appViewContentMask">
    <div class="appViewContent">
        <div id="current-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/current.html', data: FluidAppLayout.Data.mountains[0].weatherData[0]}"></div>
        <div id="ten-day-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/tenDay.html', data: FluidAppLayout.Data.mountains[0].weatherData}"></div>
    </div>
</div>
```
Observa en el ejemplo anterior que el control HtmlControl de la biblioteca de Windows para JavaScript se usa para incluir dinámicamente las páginas HTML de los pronósticos actual y de diez días. Para más información sobre los controles de WinJS, consulta Inicio rápido: Agregar controles y estilos de WinJS.

El siguiente código CSS ubica el div appViewContentMask en la columna 2, fila 2 de la cuadrícula de nivel superior. También establece propiedades para garantizar que el contenido ocupe toda la celda de la cuadrícula y se oculte el contenido que no entra en la celda.
```
.appViewContentMask {
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Other properties omitted for clarity. */

}
```
El siguiente código CSS transforma el div appViewContent en una cuadrícula secundaria que contiene una sola celda que rellena el área definida por el div appViewContentMask. El uso de una cuadrícula secundaria facilita la redistribución del contenido cuando el estado de visualización cambia el tamaño o la orientación de la aplicación.
```
.appViewContent {
    width: 100%;
    height: 100%;
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
}
```
El código CSS asigna la cuadrícula del área de contenido al área resaltada en azul:

Definir el diseño básico del pronóstico de diez días

El pronóstico de diez días es una colección de elementos que se administran y se muestran mediante un control ListView de WinJS. Cada elemento consta de una imagen y un conjunto de cadenas, incluidas la fecha, las temperaturas alta y baja, la sensación térmica y las probabilidades de nieve:

Diseño de elementos en el pronóstico de diez días

La siguiente página HTML define la interfaz de usuario para los elementos del pronóstico de diez días. La muestra de diseño adaptativo con CSS usa las plantillas y el enlace de datos de WinJS para suministrar datos al control ListView. Este tema se centra en el diseño de la interfaz de usuario, por lo que no se abordarán las plantillas y el enlace de datos. Para más información sobre las plantillas y el enlace de datos, consulta Cómo usar plantillas para enlazar datos.

<body>
    <div class="tenDayPage">
        <div id="tenDayTemplate" class="tenDayTemplate" data-win-control="WinJS.Binding.Template">
            <div class="tenDayGrid">
                <div class="win-type-x-large tenDayDate" data-win-bind="innerHTML: date">
                </div>
                <div class="tenDayImg">
                    <img data-win-bind="src: imgSrc" />
                </div>
                <div class="win-type-x-large tenDayHighLow">
                    <span class="tenDayHigh" data-win-bind="innerHTML: hi"></span>
                    <span>/</span>  
                    <span class="tenDayLow" data-win-bind="innerHTML: low"></span>
                </div>
                <div class="tenDayFeelsLike">
                    <span>Feels like </span>
                    <span data-win-bind="innerHTML: feelsLike"></span>
                </div>
                <div class="tenDayChanceOfSnow">
                    <span>Chance of snow is </span>
                    <span data-win-bind="innerHTML: chanceOfSnow"></span>
                </div>
            </div>
        </div>
        <div id="tenDayListView" class="tenDayListView" data-win-control="WinJS.UI.ListView" data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>
    </div>
</body>

Observa que el ejemplo anterior usa WinJS CSS classes for typography especiales para establecer un tamaño de fuente extra grande para las cadenas de fecha y temperaturas alta y baja. Eso es lo que significa class="win-type-x-large" en los elementos div tenDayDate y tenDayHighLow.

La aplicación de muestra usa el siguiente código CSS para garantizar que la página TenDay.html y su control ListView rellenen el contenedor primario (el área de contenido de la página principal de la aplicación).

/* Size Page to full size of parent container */
.tenDayPage
{
    height: 100%;
}

/* List View Control */
.tenDayListView
{
    width: 100%;
    height: 100%;
}

Usar consultas de medios CSS para aplicar estilos y diseños específicos de la vista

Con las consultas multimedia CSS, puedes definir fácilmente distintos estilos para aplicarlos a los elementos HTML de tu aplicación según el tamaño de la ventana. Puedes usar una consulta multimedia independiente para cada diseño diferente, o bien puedes combinar las consultas multimedia para aplicar el mismo conjunto de estilos a varios diseños. Aquí describimos las consultas de medios que usa la muestra de diseño adaptativo con CSS para diseñar su página principal y los elementos del pronóstico de diez días.

Diseñar la página principal para un diseño estrecho

Si usas la aplicación de ejemplo, notarás que el tamaño y el diseño de los elementos de interfaz de usuario no se modifican demasiado entre los diseños vertical, horizontal y los diseños anchos cuyo tamaño cambia. Cuando el tamaño de la aplicación se cambia hasta un ancho menor que 500 píxeles, sin embargo, se apreciarán los siguientes cambios:

Los elementos de interfaz de usuario del encabezado de la aplicación se achican.
El diseño cambia de dos columnas y dos filas a una sola columna donde el encabezado ocupa la primera fila y el área de contenido principal ocupa la segunda fila.

El diseño del encabezado es diferente entre los diseños estrecho y ancho.

Estos cambios se aplican mediante una consulta multimedia CSS que define un conjunto diferente de estilos exclusivamente para tamaños estrechos:

@media (max-width:499px) {
    .appGrid {
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 120px 1fr;
        width: 100%;
        height: 100%;
    }

    header[role=banner] {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        -ms-grid-columns: 60px 1fr;
        -ms-grid-rows: 1fr;
        display: -ms-grid;
    }

        header[role=banner] .win-backbutton {
            -ms-grid-column: 1;
            -ms-grid-row: 1;
            margin-left: 20px;
            margin-top: 75px;
        }

        header[role=banner] .titlearea {
            -ms-grid-column: 2;
            -ms-grid-row: 1;
            margin-top: 69px;
            max-width: 260px;
        }

    .appViewContentMask {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
    }

En el código CSS anterior, un nuevo valor de la propiedad –ms-grid-columns cambia la cuadrícula principal de la aplicación (appGrid) de dos columnas a una sola. El código CSS también define una nueva cuadrícula secundaria para los elementos del encabezado de la aplicación y ubica estos elementos en la nueva cuadrícula. Por último, el código mueve el área de contenido (appViewContentMask) de la columna 2, fila 2 de la cuadrícula antigua a la columna 1, fila 2 de la nueva cuadrícula.

Diseñar el pronóstico de diez días para un diseño estrecho

Notarás cambios en el diseño de los elementos individuales del pronóstico de diez días cuando cambies el tamaño de la aplicación a un ancho menor que 500 píxeles. Cuando el ancho es mayor que 500 píxeles, los elementos se disponen verticalmente con una cuadrícula de una sola columna. Cuando el ancho es menor que 500 píxeles, los elementos cambian a una orientación horizontal con una cuadrícula de dos columnas.

La siguiente imagen muestra cómo se ven unos elementos en el pronóstico de diez días en los distintos diseños.

Diferencias en el diseño de elementos entre diseños estrecho y ancho

Para lograr los distintos diseños, la muestra usa consultas multimedia CSS para aplicar estilos basados en el estado de visualización actual. La muestra define un conjunto de estilos que son comunes a todos los estados de visualización y otro conjunto solo para los diseños cuando el ancho es menor que 500 píxeles:

/* Styles that are common across all view states */
    .tenDayGrid
    {
        width: 190px;
        height: 250px;
        overflow: hidden;
        padding: 10px;
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: (auto)[5];
    }

    .tenDayDate
    {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
    }

    .tenDayImg
    {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
    }

    .tenDayHighLow
    {
        -ms-grid-column: 1;
        -ms-grid-row: 3;
    }

    .tenDayFeelsLike
    {
        -ms-grid-column: 1;
        -ms-grid-row: 4;
    }
    .tenDayChanceOfSnow
    {
        -ms-grid-column: 1;
        -ms-grid-row: 5;
    }
}

/* Define the template for the width less than 500px */
@media (max-width:499px)
{
    .tenDayDate
    {
        font-weight: 600;
    }

    .tenDayDate > .day
    {
       font-weight: 200;
    }

    .tenDayHighLow
    {
        font-weight: 300;
    }

    .tenDayFeelsLike, .tenDayChanceOfSnow
    {
        font-weight: 300;
    }

    .tenDayGrid
    {
        width: 250px;
        height: 150px;
        overflow: hidden;
        padding: 10px;
        display: -ms-grid;
        -ms-grid-columns: auto 1fr;
        -ms-grid-rows: (auto)[4];
    }

    .tenDayDate
    {
        -ms-grid-column: 1;
        -ms-grid-row: 1;
        -ms-grid-column-span: 2;
    }

    .tenDayImg
    {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
        -ms-grid-row-span: 3;
    }

    .tenDayHighLow
    {
        -ms-grid-column: 2;
        -ms-grid-row: 2;
    }

    .tenDayFeelsLike
    {
        -ms-grid-column: 2;
        -ms-grid-row: 3;
    }
    .tenDayChanceOfSnow
    {
        -ms-grid-column: 2;
        -ms-grid-row: 4;
    }
}

Usar JavaScript para procesar eventos de cambio de tamaño de ventana, si es necesario

Lo mejor es definir la mayor cantidad del diseño de la aplicación posible mediante CSS y consultas de medios. Pero, a veces, deberás usar JavaScript para lidiar con problemas de diseño que CSS no puede solucionar.

Por ejemplo, la aplicación de ejemplo usa un control ListView de WinJS para mostrar los elementos del pronóstico de diez días y alterna ListView entre los modos de cuadrícula y de lista en función del ancho de la aplicación. Cuando la aplicación de ejemplo tiene 500 píxeles o más de ancho, ListView usa el modo de cuadrícula para distribuir los elementos de forma vertical y horizontal para que rellenen el contenedor primario. Cuando la aplicación tiene menos de 500 píxeles, ListView usa el modo de lista para disponer los elementos en una lista vertical.

Para crear diseños específicos de la vista en JavaScript, registra una escucha de eventos para el evento de cambio de tamaño de ventana. En el código de la escucha de eventos, consulta la propiedad clientWidth y configura el diseño en consecuencia.

En el siguiente ejemplo, la muestra de diseño adaptativo con CSS establece ListView en el modo de cuadrícula. Si el ancho de la ventana es menor que 500 píxeles, ListView cambia al modo de lista. La escucha de eventos de la aplicación escucha el evento de cambio de tamaño y, después, consulta la propiedad clientWidth y cambia ListView como corresponda.

function ready(element, options) { 
        element.winControl = this; 
        var that = this; 
        WinJS.UI.process(element).done(function () { 
            that.listView = element.querySelector(".tenDayListView").winControl; 
            var itemTemplate = element.querySelector(".tenDayTemplate"); 
            var listViewLayout = new WinJS.UI.GridLayout(); 
 
            if (document.body.clientWidth <= 499) { 
                listViewLayout = new WinJS.UI.ListLayout(); 
            } 
            else { 
                element.style.opacity = "0"; 
            } 
 
            // ... 
 
            window.addEventListener("resize", tenDayResize, false); 
        }); 
    } 
 
    function tenDayResize(e) { 
 
        var listview = document.querySelector(".tenDayListView").winControl; 
 
        if (document.body.clientWidth <= 499) { 
            if (!(listview.layout instanceof WinJS.UI.ListLayout)) { 
                listview.layout = new WinJS.UI.ListLayout(); 
            } 
        } 
        else { 
            if (listview.layout instanceof WinJS.UI.ListLayout) { 
                listview.layout = new WinJS.UI.GridLayout(); 
            } 
        } 
    }

Resumen

En este punto ya deberías saber usar HTML, CSS y JavaScript para crear una interfaz de usuario fluida para tu aplicación que se vea bien y funcione correctamente en todos los tamaños de ventana.