Compartir a través de

Aplicaciones modernas

  • Artículo

Creación de una interfaz de usuario moderna y que responde bien con CSS para aplicaciones WinJS

Rachel Appel

El trabajo con CSS es frustrante para muchos desarrolladores, ya que está lleno de pequeños detalles. Incluso un cambio menor en un selector o elemento HTML frecuentemente puede propagarse y afectar otras partes. Lograr conservar el CSS limpio y eficaz puede ser bastante difícil si se tiene en cuenta las incontables idiosincrasias, especialmente para que funcione en diferentes exploradores. Afortunadamente, para los desarrolladores de aplicaciones con la Biblioteca de Windows para JavaScript (WinJS), el CSS que viene integrado en las plantillas de proyecto de Visual Studio es flexible, sin sacrificar la congruencia ni la facilidad de mantenimiento. Las plantillas de proyecto de Visual Studio contienen el código que forma los cimientos de un diseño de una interfaz de usuario moderna y que responde bien.

CSS integrado para las aplicaciones de la Tienda Windows

Todas las plantillas de proyecto de las aplicaciones para la Tienda Windows creadas con JavaScript contienen dos hojas de estilos o temas básicos —oscuro (predeterminado) y claro— en los archivos llamados ui-dark.css y ui-light.css, respectivamente. Estos archivos forman parte de un conjunto central de archivos de proyecto en la carpeta CSS bajo el nodo de referencias del proyecto de Visual Studio. Hay casi 4.000 líneas de CSS en los archivos CSS centrales, ya que construyen una interfaz de usuario que sigue todos los principios de diseño de la interfaz de usuario de Windows; por ejemplo, responde a la vista acoplada de Windows y a los cambios en el tipo de medio. Usted no debería tratar de modificar las hojas de estilos integradas directamente (son de solo lectura), sino que debe sobrescribir los estilos integrados en sus propios archivos de CSS.

Para usar el CSS integrado de la aplicación para la Tienda Windows, agregue la siguiente referencia en la sección <head> de cualquier página (tenga en cuenta que “2.0” en el vínculo se refiere a Windows 8.1, mientras que “1.0” serviría para Windows 8):

<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />

Las dos barras diagonales al inicio de la ruta de acceso indican una referencia a la biblioteca central de WinJS (denominada también “biblioteca compartida”, a diferencia de los archivos de proyecto locales en el paquete de la aplicación). Las rutas de acceso en las aplicaciones para la Tienda Windows creadas con JavaScript que comienzan con una sola barra diagonal indican que la ruta comienza en la carpeta raíz del proyecto y una sola barra diagonal se refiere a los archivos de proyecto locales. 

Las aplicaciones de la Tienda Windows creadas con JavaScript emplean muchos prefijos de proveedor (por ejemplo, -ms-grid, -flexbox, etcétera) para hacer uso de las tecnologías de CSS más avanzadas disponibles en las aplicaciones. Otras características de alta tecnología de CSS que encontrará en las aplicaciones WinJS serán los colores RGBA de CSS3, fuentes en formato WOFF (Web Open Font Format) y consultas de medios.

Aplicación de estilo a los controles de WinJS con CSS

Los controles de WinJS son extensiones de elementos HTML, así que el estilo se aplica con CSS, igual que en el caso de cualquier otra etiqueta HTML. Las plantillas de proyecto de Visual Studio contienen referencias al CSS que crea los estilos de interfaz de usuario moderna para todos los elementos HTML y controles de WinJS, tanto en las versiones oscuras como las claras. Por supuesto, no está obligado a usar esos estilos y puede modificarlos con toda libertad para complementar el tema de su empresa o marca de producto. Sin embargo, es importante que conserve cierta coherencia con la nueva interfaz de usuario de Windows para evitar que los usuarios se confundan.

En la figura 1 se enseña el código para varios controles básicos y comunes de HTML y WinJS con el tema oscuro y claro, respectivamente. En la figura 2 se muestra el resultado del código.

Figura 1 Código para algunos controles básicos de HTML y WinJS

<div id="grid">
  <div style="-ms-grid-column: 1; -ms-grid-row: 1">
    <label for="textbox">Textbox:</label>
    <input id="textbox" type="text" />
  </div>                   
  <div style="-ms-grid-column: 2; -ms-grid-row: 1">
    <label for="button">Button:</label>
    <button id="button" value="Button">Clickety Click</button>
  </div>
  <div style="-ms-grid-column: 1; -ms-grid-row: 2">
    <label for="radio">Radio:</label>
    <input type="radio" id="radio" name="radio" />
      <label for="radio">One</label>
    <input type="radio" id="radio" name="radio" />
      <label for="radio">Two</label>
    <input type="radio" id="radio" name="radio" />
      <label for="radio">Three</label>
  </div>                   
  <div style="-ms-grid-column: 2; -ms-grid-row: 2">
    <label for="select">Select:</label>
    <select id="select">
      <option value="One">One</option>
      <option value="Two">Two</option>
      <option value="Three">Three</option>
     </select>
  </div>                                  
  <div style="-ms-grid-column: 2; -ms-grid-row: 3">
    <label for="rating">Rating:</label>
      <div id="rating" data-win-control="WinJS.UI.Rating"></div>
  </div>
  <div style="-ms-grid-column: 1; -ms-grid-row: 3">
    <label for="toggle">Toggle:</label>
    <div id="toggle" data-win-control="WinJS.UI.ToggleSwitch"></div>
  </div>  
  <div style="-ms-grid-column: 1; -ms-grid-row: 4">
    <label for="datepicker">Date Picker:</label>
    <div id="datepicker" data-win-control="WinJS.UI.DatePicker"></div>
  </div>                     
 <div style="-ms-grid-column: 2; -ms-grid-row: 4">
    <label for="timepicker">Time Picker:</label>
    <div id="timepicker" data-win-control="WinJS.UI.TimePicker"></div>
  </div>
</div>

Common HTML and WinJS Controls in Dark Default Style
Common HTML and WinJS Controls in Light Default Style
Figura 2 Controles comunes de HTML y WinJS con los estilos predeterminados oscuro y claro

Como puede apreciar en la figura 2, los estilos predeterminados de los controles reflejan la nueva interfaz de usuario de Windows. Encontrará un listado completo de los controles de HTML y WinJS en el Centro de desarrollo de Windows en bit.ly/w1jLM5.

Para ver la imagen completa de los controles de WinJS, consulte mi columna “Dominio de controles y configuraciones en aplicaciones de la Tienda Windows creadas con JavaScript” en msdn.microsoft.com/magazine/dn296546. Por mientras, analizaremos las pautas para aplicar estilos a unos pocos controles importantes: AppBar, Flyout y ListView.

AppBar La barra de la aplicación es un componente esencial de la interfaz de usuario de cualquier aplicación de la Tienda Windows. Existen selectores CSS para aplicar estilos a todos los aspectos de la barra de una aplicación, inclusive la barra de la aplicación en su conjunto y las etiquetas de los diferentes botones, imágenes y descripciones emergentes, tanto en estado corriente como al mantener el mouse. Esto nos brinda un control total sobre la apariencia y comportamiento de las barras de las aplicaciones. Una vez que aplicamos el estilo al control AppBar mismo al sobrescribir la clase .win-appbar, podemos pasar a los comandos individuales. Como los botones de AppBar son controles de WinJS, el atributo data-win-options contiene toda la información necesaria para poner debidamente a punto los botones de comando al establecer las propiedades label, icon, section y tooltip:

<div id="appbar" class="win-appbar"
  data-win-control="WinJS.UI.AppBar">
  <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{
      id:'addFriend',
      label:'Add Friend',
      icon:'addfriend',
      section:'global',
      tooltip:'Add a friend'}"
    type="button">
  </button>
</div>

Podemos lograr una apariencia radicalmente diferente de AppBar con la sencilla franja predeterminada a lo ancho del fondo de la pantalla al ajustar los estilos de los siguientes selectores de clase:

  • .win-appbar: estilo de AppBar en su conjunto.
  • .win-command: estilo de un botón individual de AppBar.
  • .win-commandimage: estilo de la imagen del botón de comando.
  • .win-commandring: estilo del anillo en torno al botón de AppBar.
  • .win-commandimage:hover y .win-commandring:hover: estilo de la imagen y del anillo del botón de comando en estado de mantener el mouse.

Como podrá apreciar, hay estilos para todos los aspectos de la barra de la aplicación. 

Flyout Los controles flotantes son ventanas emergentes interactivas. En las aplicaciones para la Tienda Windows, generalmente implementamos los controles flotantes para recoger entradas del usuario, a menudo como parte del acceso de Configuración de la aplicación. Los controles flotantes son una forma excelente para implementar configuraciones o contener datos a los que el usuario solo accede rara vez. Por ejemplo, podemos usarlos para proporcionar una declaración de privacidad, un elemento requerido para que la aplicación se acepte en la Tienda Windows. Para aplicar estilos a un control flotante, basta simplemente con sobrescribir el selector .win-flyout. El CSS del sistema contiene valores para .max-width y .max-height, así que si tiene que recopilar un formulario completo con datos, es posible que tenga que modificar esos valores.

El control flotante es un elemento <div> que permanece oculto y fuera de vista hasta que el usuario lo invoca desde un acceso o un comando de la barra de la aplicación y luego emerge en la pantalla. Aunque haya otros elementos dentro del control flotante, la forma de aplicar un estilo a estos controles no cambia, ya que no es más que HTML común y corriente.

ListView Probablemente el control más complejo de WinJS, ListView ofrece una forma de mostrar diferentes elementos de datos en una cuadrícula o una lista. Los controles ListView también responden a los eventos de toque y mouse iniciados por el usuario, lo que permite que el usuario seleccione un elemento o invoque una acción. A partir de Windows 8.1, el control ListView permite que el usuario arrastre, coloque y reordene los elementos.

Antes de trabajar con el control ListView, debemos saber cómo funciona. El control ListView implica cuatro partes móviles importantes: el ListView mismo, la ventanilla, la superficie y los elementos. Los elementos existen dentro de la superficie, que es la región desplazable del ListView. La superficie reside y se mueve dentro de la ventanilla, así que resulta natural que la ventanilla tenga barras de desplazamiento, tal como se aprecia en la figura 3.

The Viewport and Its Surface Area Combine to Make the ListView Control
Figura 3 La ventanilla y la superficie se combinan para crear el control ListView

Juntos, la ventanilla y la superficie llena de elementos, forman el control ListView. Como el control ListView contiene estas piezas operacionalmente distintas, existen muchas pautas detalladas para aplicar estilos, las cuales se describen en el Centro de desarrollo de Windows en bit.ly/­HopfUg. Por ahora, solo veremos las cosas más importantes que hay que saber para aplicar estilos al control ListView:

  • .win-listview: estilo para todo el ListView.
  • .win-viewport: estilo para la ventanilla del ListView.
  • .win-surface: estilo para la superficie desplazable del ListView.

Estas partes móviles nos permiten realizar cosas como aplicar una imagen de fondo que se desplaza junto con los elementos. Cuando la superficie es de mayor tamaño que la ventanilla, esta presenta barras de desplazamiento (horizontales o verticales, como sea el caso).

Aplicar estilos a los elementos de ListView es sencillo: podemos usar las clases .win-item y .win-container. Cada elemento de un ListView se encuentra en un contenedor que contiene los campos de imagen y texto del elemento. Este contenedor es simplemente una plantilla HTML que define los elementos que se combinan para crear un elemento en un ListView. El código de la figura 4 ilustra cómo definir esta plantilla con el ListView correspondiente. Crea un control WinJS.Binding.Template, que usa el ListView para mostrar datos.

Figura 4 Código para definir una plantilla y el ListView correspondiente

<div id='listviewtemplate' class="itemtemplate" 
  data-win-control="WinJS.Binding.Template">
  <div class="item">
    <img class="item-image" src="#"
      data-win-bind="src: backgroundImage; alt: title" />
    <div class="item-overlay">
      <h4 class="item-title" data-win-bind="textContent: title"></h4>
      <h6 class="item-subtitle win-type-ellipsis"
         data-win-bind="textContent: subtitle"></h6>
    </div>
  </div>
</div>
<div class="groupeditemslist win-selectionstylefilled"
  aria-label="List of groups"
  data-win-control="WinJS.UI.ListView"
   data-win-options="{ selectionMode: 'none' }">
</div>

Como puede apreciar en la figura 4, las plantillas de proyecto de Cuadrícula y Página dividida contienen elementos <div> que componen la plantilla de los elementos de ListView. En tiempo de ejecución, el motor de ejecución de la aplicación inserta las clases .win-container y .win-item en estos elementos, así que no veremos estos selectores durante el desarrollo, pero podemos sobrescribirlos en el archivo CSS para aplicar nuestros propios estilos. En el código de ListView de la plantilla del proyecto, .item, .item-image, .item-title, .item-subtitle y .item-overlay son todos los selectores disponibles que podemos modificar para especificar la apariencia y comportamiento de cada elemento individual dentro de la cuadrícula.

Ninguna lista o cuadrícula está completa sin la posibilidad de ordenar, agrupar y realizar otras acciones que afecten a sus miembros. Por supuesto, hay estilos para elementos agrupados además de individuales. Para aplicar estilos a los encabezados de grupos, sobrescribimos el selector de clase .win-groupheader y para mostrar progreso en el estilo sobrescribimos .win-progress.

El CSS fluido es para las interfaces de usuario que responden bien

Los proyectos Cuadrícula, Página dividida y Navegación en Visual Studio contienen selectores CSS de WinJS que funcionan en conjunto con elementos semánticos de HTML5 para lograr un diseño fluido y moderno. En la figura 5 se muestra el código CSS y HTML necesario para crear el diseño de cuadrícula de la plantilla Cuadrícula. Observe que la clase .fragment define filas y columnas para una cuadrícula mediante los prefijos -ms-grid-columns y -ms-grid-rows. Luego aplica estos prefijos junto con otros selectores a los elementos <div> de la figura 5. Los elementos semánticos <header> y <section> definen claramente qué tipo de contenido va en cada uno.

Figura 5 HTML y CSS fundacional para un fragmento de página

.fragment {
  /* Define a grid with rows for a banner and a body */
  display: -ms-grid;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: 128px 1fr;
  height: 100%;
  width: 100%;
}
  .fragment header[role=banner] {
    /* Define a grid with columns for the back button and page title. */
    display: -ms-grid;-ms-grid-columns: 39px 81px 1fr;
    -ms-grid-rows: 1fr;
  }
  .fragment header[role=banner] .win-backbutton {
    -ms-grid-column: 2;
    margin-top: 59px;
  }
  .fragment header[role=banner] .titlearea {
    -ms-grid-column: 3;
    margin-top: 37px;
  }
  .fragment header[role=banner] .titlearea .pagetitle {
    width: calc(100% - 20px);
  }
  .fragment section[role=main] {
    -ms-grid-row: 2;
    height: 100%;
    width: 100%;
  }
<div class="fragment groupeditemspage">
  <header aria-label="Header content" role="banner">
    <button class="win-backbutton" aria-label="Back"
       disabled type="button"></button>
    <h1 class="titlearea win-type-ellipsis">
      <span class="pagetitle">CSS in Windows Store apps</span>
    </h1>
  </header>
  <section aria-label="Main content" role="main">
    <div class="groupeditemslist win-selectionstylefilled"
       aria-label="List of groups"
       data-win-control="WinJS.UI.ListView"
       data-win-options="{ selectionMode: 'none' }">
  </div>
  </section>
</div>

Como este CSS forma parte de las plantillas de proyecto Cuadrícula y Página dividida, no tenemos que preocuparnos por la tarea tediosa de crear una cuadrícula fluida que cambie en función de los cambios en los datos o el estado de la aplicación: ya viene integrada.

Las plantillas de aplicación JavaScript de la Tienda Windows usan el modelo de cuadros de CSS (consulte el artículo en mi blog, “Guía para la visualización y el posicionamiento de los elementos con el modelo de cuadros de CSS”, en bit.ly/xxATgL) para diagramar la página y el diseño de cuadrícula de CSS (encontrará información más detallada en el sitio de World Wide Web Consortium [W3C] en bit.ly/14yzx2h) para crear una interfaz de usuario que responda bien. Observe que la cuadrícula cambia a un listado vertical y nuevamente a una cuadrícula cuando se alterna entre las vistas acoplada y completa.

La mayoría de las plantillas de proyecto predeterminadas en las aplicaciones de la Tienda Windows hacen uso de las consultas de medios de CSS para entregar una interfaz de usuario sofisticada que responda frente a los cambios en el tamaño, orientación y resolución del dispositivo y el explorador. Si desea obtener más información sobre las consultas de medios, revise el artículo en mi blog, “Creación de diseños de sitios móviles con consultas de medios de CSS”, en bit.ly/1c39mDx.

Otra razón para usar consultas de medios en las aplicaciones de la Tienda Windows es que Windows 8 reconoce cuatro diferentes estados de vista para las aplicaciones: pantalla completa, acoplada, rellena y vertical. Cuando los usuarios ponen una aplicación en vista acoplada o rellena, conceptualmente es lo mismo que acceder a la aplicación desde otro dispositivo, ya que tanto las dimensiones como la orientación del explorador cambian radicalmente. 

Al inspeccionar el CSS integrado, encontrará varias reglas @media para los cuatro estados de vista de aplicación, además de los estados de vista de alto contraste y accesible. Estas son las consultas de medios que detectan los estados de vista acoplada y de pantalla completa vertical:

@media screen and (-ms-view-state: snapped) {}
@media screen and (-ms-view-state: fullscreen-portrait) {}

Generalmente el mismo CSS que funciona para la vista completa funciona también en la vista rellena (tres cuartos de la pantalla). Estas dos consultas representan las dos características de medios más populares en el dominio de las aplicaciones de la Tienda Windows, pero hay muchas funciones de medios más en el sitio de W3C en bit.ly/gnza0F.

Las aplicaciones de la Tienda Windows usan un CSS eficiente y organizado

Eche una mirada a los selectores CSS integrados en las plantillas de Visual Studio y verá que son nítidos y precisos. La especificidad en CSS (de hecho, en todo código) resulta en aplicaciones más fáciles de mantener en el tiempo y con un rendimiento mejor. Cuando vemos “.fragment header[role=banner]” en el código, sabemos exactamente a qué elementos se aplica: en este caso, un elemento <header> que tiene un atributo role con el valor “banner” dentro de un elemento con la clase “fragment”. Tenga en cuenta que los exploradores analizan el CSS de derecha a izquierda, así que los selectores más específicos deberían ir a la derecha para que el explorador encuentre el elemento respectivo más rápido en el DOM.

En vez de emplear scripting para alternar los indicadores visuales, al aprovechar ciertas características de CSS como los seudoselectores para hover, active, disabled, enabled y otros estados visuales, se simplificará la tarea de mantenimiento del código. WinJS define seudoselectores para muchos controles cuando hace falta. Por ejemplo, los elementos TextBox y CheckBox pueden alternar entre los estados habilitado y deshabilitado, y los marcadores pueden alternar entre los estados hover y active. Y en Windows 8.1 hay incluso más animaciones CSS (bit.ly/KDVSPU), así que revíselas antes de recurrir a JavaScript para realizar las mismas animaciones.

Eficiencia significa una organización adecuada de los archivos, además de un código eficiente. En la carpeta \css se encuentra un archivo llamado default.css, y todas las páginas integradas de HTML contienen referencias a este. El CSS que vemos en la figura 5 reside en este archivo, junto con reglas de estilo corrientes y consultas de medios. Puede modificar o eliminar default.css, a diferencia de los archivos ui-dark.css y ui-light.css.

Las plantillas de proyecto de Visual Studio organizan los archivos en carpetas que contienen los elementos afines, como groupedItems.html, grouped­Items.js y groupedItems.css en la carpeta \pages\groupedItems, junto con otras estructuras similares. Puede seguir organizando los archivos de este mismo modo, pero también puede reordenar los archivos de la manera que prefiera. Quizás tenga que reorganizar la estructura del proyecto porque desea usar el patrón Model-View-ViewModel (MVVM) y, en este caso, los archivos CSS podrían ir en otra carpeta. O quizás prefiera arrojar todo el CSS dentro de una sola carpeta. No importa realmente, mientras la organización de los archivos se adecúe a las necesidades de su proyecto y no dificulte el mantenimiento.

Por motivos de legibilidad, reparta el CSS en archivos independientes, organizados por característica o función. Por ejemplo, puede tener CSS para un solo control usado por varias páginas como un control flotante. Ese archivo podría ir en una carpeta para CSS común o podría ir en la misma carpeta que el control flotante. No hay nada peor que tener que revisar un archivo CSS lleno de líneas y más líneas que no tienen nada que ver con las páginas que hacen referencia a este. Por ejemplo, el CSS que cumple los siguientes criterios merece ir en un archivo propio:

  • CSS para un control flotante o página de configuración específicos.
  • CSS que solo contiene colores y aspectos estéticos, ya que esto permite crear temas. Así podrá poner y quitar archivos CSS como si fueran muestras de colores, en función de las necesidades.
  • CSS en consultas de medios para una situación específica como la vista acoplada o rellena. Este CSS puede ir en su propio archivo en la misma carpeta que la página que hace referencia a este.

De este modo, puede usar cada unidad funcional del CSS en la medida que se usa, en vez de cargar todo el CSS para cada página, sin importar si este lo usa o no. Recuerde, estas son solo pautas; cada proyecto es único y puede tener requerimientos diferentes.

Los proyectos de aplicaciones de la Tienda Windows ejecutan el código que es local en el dispositivo en vez de descargar el CSS o script primero, así que no hace falta unir ni minimizar el CSS y los scripts como en el caso de un proyecto web. Por supuesto la aplicación debe cargar el código en memoria antes de ejecutarlo, así que por motivos de rendimiento y legibilidad queremos evitar de todos modos el código abotagado.

Enfoque en el desarrollo de la aplicación

Aplicar estilos a los numerosos controles integrados de WinJS es muy fácil, debido a que el marco proporciona las características más avanzadas de CSS3 y HTML5. El CSS central de WinJS crea una interfaz de usuario moderna, fluida y flexible que responde frente a los cambios en el estado de vista de la aplicación cuando el usuario alterna entre las vistas completa y acoplada. Gracias al CSS central de WinJS que viene listo para usar, usted puede concentrarse en desarrollar la aplicación en vez de tener que alterar el CSS estructural para crear una interfaz de usuario con un estilo moderno.

Rachel Appel es consultora, autora, mentora y anteriormente empleada de Microsoft con más de 20 años de experiencia en la industria de TI. Es oradora en las más importantes conferencias de la industria, como Visual Studio Live!, DevConnections, MIX y más. Su experiencia residen en el desarrollo de soluciones que se alineen a los negocios y tecnología, enfocándose en la pila de desarrollo de Microsoft y en la web abierta. Para obtener más información sobre Appel, visite su sitio web en rachelappel.com.

Gracias al siguiente experto técnico por su ayuda en la revisión de este artículo: Eric Schmidt (Microsoft)