Navegación jerárquica, de principio a fin (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

Usa un patrón de navegación jerárquica para la aplicación de la Tienda Windows cuando su contenido se pueda separar en secciones o categorías distintas, pero relacionadas, con diferentes niveles de detalle. Es un patrón habitual y conocido que funciona bien con una arquitectura de información relacional, atravesado en una secuencia u orden preferido.

El patrón de navegación que elijas depende de los escenarios que admita tu aplicación. Si la aplicación proporciona varias experiencias y contenidos con una organización y una estructura, es probable que un patrón jerárquico sea el más adecuado. No obstante, si la aplicación no tiene mucha densidad de información o una jerarquía organizada, consulta la navegación plana, de principio a fin, que tiene la finalidad de permitir a los usuarios navegar rápidamente entre un pequeño conjunto de páginas relacionadas.

Aquí, nos centraremos en cómo crear una aplicación de la Tienda Windows con JavaScript que use el patrón de navegación jerárquico y cumpla los requisitos básicos de certificación de la Tienda Windows, de principio a fin. Esto incluye:

• Recursos de imagen para exponer la aplicación en el sistema operativo.
• Barras de la aplicación para admitir la navegación y los comandos.
• Configuración para proporcionar privacidad, ayuda y otros datos de la aplicación.
• Roaming de datos para sincronizar la aplicación entre sesiones y dispositivos.
• Globalización para llegar a clientes de países y regiones de todo el mundo.
• Accesibilidad para ayudar a los usuarios a realizar tareas, independientemente de su capacidad física y dispositivo de entrada.

Aquí se incluye una estructura jerárquica básica a lo largo de una retícula del patrón de navegación jerárquica de una aplicación de la Tienda Windows.

 

El control de la biblioteca de Windows para JavaScript Hub está diseñado específicamente para este tipo de aplicación. De los elementos más generales a los más específicos, este control usa páginas de concentrador, sección y elemento/detalle para que puedas enlazar una serie de información en una estructura intuitiva y coherente.

Página	Descripción
Concentrador	El concentrador es la página de entrada a la aplicación y en él se puede obtener una vista previa de todo el ámbito de la aplicación. Muestra una o más secciones de contenido, cada una de ellas con una pequeña muestra de sus elementos asociados. Se pueden aplicar varios criterios (en función de la aplicación o las preferencias del usuario) para controlar las secciones y los elementos que se muestran. Por lo general, cada elemento mostrará una vista previa, un resumen o una sinopsis de su contenido. Desde esta página, los usuarios pueden ir a una página de detalles de una sección o un elemento. Te recomendamos que diseñes el concentrador con una amplia variedad visual para atraer a los usuarios y llevarlos a las distintas áreas de la aplicación.
Sección	Las páginas de sección son el segundo nivel de una aplicación y en ellas se muestra una vista previa, un resumen o una sinopsis de sus elementos asociados. Los elementos de esta página se pueden mostrar de la manera que mejor represente el escenario y el contenido de la sección. Por lo general, en esta página se muestran más elementos que en la página de concentrador. Cada elemento tiene un vínculo a una página de detalles.
Elemento/detalle	Las páginas de detalles son el tercer nivel de una aplicación y en ellas se muestra la mayoría e incluso todo el contenido o las funciones del elemento seleccionado en la página de concentrador o sección. Algunas aplicaciones, como los lectores de fuentes, podrían estar vinculadas con artículos y sitios de origen si el contenido se considera demasiado amplio para mostrarse dentro de la aplicación. Las páginas de detalles pueden contener mucha información, un solo objeto, como una imagen o un vídeo, u otras funciones de la aplicación.

 

La barra de navegación, que se suele usar en aplicaciones con navegación plana, también puede ser útil para recorrer el contenido de una aplicación jerárquica. Esta barra es un elemento transitorio que se puede mostrar en el borde superior de la pantalla cuando los usuarios deslicen rápidamente desde el borde superior o inferior (clic con el botón derecho del mouse, tecla del logotipo de Windows+Z o tecla de menú con un teclado).

Intenta crear la aplicación de manera que la estructura del contenido lleve a los usuarios de manera intuitiva por la aplicación, sin necesidad de tener una barra de navegación. Cuando esto no sea posible, usa la barra de navegación en lugar de los encabezados de sección de la página de concentrador y para proporcionar controles de navegación globales. Debería mostrarse en todas las páginas y en todos los niveles de la aplicación.

Nota  Asegúrate de que los usuarios puedan navegar en el orden inverso en el que han navegado hasta llegar a la página actual. WinJS proporciona el BackButton, junto con el PageControl, para ello.

 

Con el patrón de navegación correcto, junto con el diseño apropiado de la interfaz de usuario, podrás eliminar la acumulación de controles persistentes y los usuarios se podrán centrar en el contenido importante de tu aplicación.

Muestra de navegación jerárquica

La muestra de navegación jerárquica básica es un punto de partida para rellenar con el contenido y experiencias. Demuestra los principios, las recomendaciones y los detalles de la implementación que se incluyen en este tema en una aplicación que cumple todos los requisitos básicos de certificación de la Tienda Windows. Como puedes ver a continuación, la muestra incluye una página de concentrador con varias secciones, una página de sección controlada por datos (Section 3) y páginas de detalles de elementos para esa sección. Si es necesario, puedes ampliar la aplicación con más páginas. Consulta cómo ponemos en práctica nuestras instrucciones. Podrás ahorrar tiempo y usar esta muestra como base de inspiración.

Cumplimiento de las normas de la Tienda Windows

La Tienda Windows es el medio principal para distribuir aplicaciones de la Tienda Windows a los clientes y conectar estos clientes con el máximo posible de aplicaciones de gran calidad. Las aplicaciones de la Tienda deben cumplir con las Directivas de Windows y de la tienda de Windows Phone.

La muestra complementaria implementa la funcionalidad analizada en este tema y los requisitos básicos que deben cumplir todas las aplicaciones de la Tienda Windows para obtener la certificación, incluidos los siguientes:

• Pantalla de presentación e imágenes de iconos
• Total compatibilidad con la entrada táctil, por medio del mouse y por medio del teclado
• Compatibilidad con varios tamaños de ventana, orientaciones de dispositivo y tamaños de pantalla
• Roaming y estado de sesión
• Optimización para globalización, localización y accesibilidad

A medida que desarrolles tu aplicación, ten en cuenta las Directivas de la Tienda Windows y de la Tienda de Windows Phone e intenta evitar los errores habituales de certificación.

Implementación de la navegación

Abre la muestra de navegación jerárquica o comienza con la plantilla del proyecto de la Aplicación Hub en Visual Studio. Si lo deseas, puedes revisar esta información general de la plantilla: Plantillas de proyecto JavaScript para aplicaciones de Windows Runtime: resume los detalles de implementación sobre el modelo de navegación, el modelo de datos, el control del estado de visualización, etc. Plantillas de elemento JavaScript para aplicaciones de la Tienda Windows: incluye código usado frecuente que puede reducir el tiempo de desarrollo.

Usar la navegación de una página Ofrece información detallada sobre la compatibilidad del objeto PageControl con la navegación de una página. Adición de controles de página explica las distintas maneras en que se pueden implementar. Buscar en la muestra: el objeto PageControl se define en el archivo \js\navigator.js y se usa en \pages\home\home.js y \pages\page2\page2.js.

 

Agregar la interfaz de usuario e imágenes

Especifica los recursos de imagen (activos visuales como la pantalla de presentación y las imágenes de los iconos) de la aplicación en la pestaña IU de la aplicación del manifiesto de la aplicación. Para ello, abre package.appxmanifest desde el Explorador de soluciones. Consulta el tema sobre cómo usar el diseñador de manifiestos.

Nota  La aplicación complementaria incluye imágenes de marcador de posición que cumplen los requisitos de la Tienda Windows. Con fines de demostración, se han incluido con la plantilla imágenes adicionales compatibles con la accesibilidad con varias configuraciones de contraste y la localización en francés (fr-FR). La mayoría de imágenes se proporcionan con varias resoluciones.

 

	Elegir imágenes para representar tu aplicación Especifica imágenes que proporcionen la mejor experiencia posible. Incluye versiones a escala para diferentes resoluciones de pantalla. La aplicación requiere un conjunto básico de imágenes para superar la certificación de la Tienda. Logotipo de la tienda Se muestra junto con la descripción de la aplicación en los resultados de búsqueda y junto con la descripción en la página de descripción. Logo Se muestra en el icono cuadrado de la aplicación en la pantalla Inicio. Consulta Creación de iconos y notificaciones y Ejemplo de iconos y notificaciones de una aplicación. Logotipo pequeño El logotipo pequeño se muestra con el nombre de tu aplicación en los resultados de la búsqueda que se devuelven en la pantalla Inicio. También se muestra en la lista de aplicaciones que admiten búsquedas y cuando se aleja la página Inicio. Pantalla de presentación Se muestra cuando se inicia una aplicación y se descarta en cuanto la aplicación está preparada para recibir interacciones. La pantalla de presentación consta de una imagen y un color de fondo, que puedes personalizar. Consulta el tema Agregar una pantalla de presentación y la muestra de pantalla de presentación.
	Agrega archivos o recursos de imágenes Sigue estas instrucciones para asignar nombres a los recursos de archivos y organizarlos en carpetas.
	Optimizar imágenes para diferentes resoluciones de pantalla Crea recursos de imagen para la aplicación, agrégalos al proyecto e identifícalos en el manifiesto de la aplicación.
	Agregar barras de aplicaciones Presenta la navegación, los comandos y las herramientas a los usuarios a petición. La barra de la aplicación muestra los comandos relevantes para el contexto del usuario, normalmente la página actual o la selección actual. Se puede personalizar. Encontrarás un ejemplo más detallado en Muestra del control AppBar HTML.
	Agregar configuración de aplicaciones Proporciona acceso a toda la configuración relevante para el contexto actual del usuario. Se puede personalizar. Consulta Muestra de la configuración de la aplicación. La aplicación complementaria incluye una política de privacidad y contenido de ayuda, accesibles desde el acceso a Configuración.

 

Datos de aplicaciones de itinerancia

	Administrar datos de aplicaciones Administra los datos de la aplicación que incluyen el estado de tiempo de ejecución, las preferencias del usuario y otras opciones de configuración. Estos datos se crean, leen, actualizan y eliminan durante la ejecución de una aplicación.
	Datos de aplicaciones de itinerancia Mantén los datos y el estado de la aplicación sincronizados en varios dispositivos y reduce las tareas de configuración y el trabajo repetitivo para el usuario en sus otros dispositivos. Windows replica los datos en la nube cuando se actualizan y los sincroniza con los otros dispositivos en los que la aplicación está instalada.

 

Globalizar

Sé coherente con la globalización y asegúrate de que tus capturas de pantalla demuestren que localizaste tu aplicación. Recuerda que los idiomas no son lo mismo que los mercados.

	Obtén información sobre la localización y recursos de la aplicación Diseña aplicaciones de la Tienda Windows para que sus recursos puedan mantenerse y localizarse de manera independiente y también personalizarse para diferentes factores de escala, opciones de accesibilidad y otros contextos de usuario y de máquinas. Consulta Muestra de recursos de la aplicación y localización.
	Localización del manifiesto del paquete Localiza el nombre, la descripción y otras características de identificación de la aplicación, que se describen en el manifiesto de la aplicación.
	Globalizar la aplicación Adapta el software a idiomas, mercados, culturas y regiones adicionales.

 

Compatibilidad con accesibilidad

Declara tu aplicación como accesible solamente si has realizado en ella ingeniería específica y la has probado en escenarios de accesibilidad.

	Probar la accesibilidad de una aplicación Descubre las herramientas de pruebas de accesibilidad incluidas en el Kit de desarrollo de software (SDK) de Windows para Windows 8 que te ayudarán a comprobar la accesibilidad de tu aplicación.
	Declara como accesible a tu aplicación en la Tienda Windows Si probaste la aplicación para comprobar su accesibilidad, puedes indicarlo activando la casilla Accesibilidad en la página Detalles de venta.

 

Últimas acciones

Certifica la aplicación con el Kit para la certificación de aplicaciones en Windows. Ejecuta el Kit para la certificación de aplicaciones en Windows para asegurarte de que la aplicación cumple los requisitos de la Tienda Windows. Hazlo cada vez que agregues funciones importantes a la aplicación.

Has terminado con las tareas de desarrollo y estás listo para enviar la aplicación a la Tienda. Dirige la aplicación al público adecuado antes de enviarla. Haz que la descripción de la aplicación sea lo más detallada posible, de modo tal que represente claramente lo que esta hace. Inicia el proceso de distribución. Usa las herramientas de promoción disponibles a través de la Tienda Windows para ayudar a los clientes a descubrir tu aplicación. Usa los datos de telemetría para analizar los datos de uso y mejorar la calidad y el rendimiento de la aplicación.

 

¿Quieres más información?

Planear aplicaciones de la Tienda Windows

Obtén más información sobre la experiencia que deseas proporcionar a tus usuarios.

Diseño de accesibilidad

Obtén más información sobre la gran variedad de capacidades, discapacidades y preferencias de tus usuarios.

Diseño para diferentes factores de forma

Obtén más información sobre cómo admitir distintos dispositivos, métodos de entrada y orientaciones de pantalla.

Índice de las directrices de la experiencia del usuario

Examina la lista completa de directrices de la experiencia de usuario.

Muestras

• Muestra del control AppBar HTML
• Muestra de navegación e historial de navegación
• Ejemplo de iconos y notificaciones de una aplicación
• Muestra de pantalla de presentación.
• Muestra de la configuración de la aplicación
• Muestra de recursos de la aplicación y localización