Navegación plana, 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 plana para la aplicación de la Tienda Windows cuando tenga una pequeña cantidad de páginas y su información no esté organizada de manera jerárquica. Es decir, cuando las páginas, las pestañas y los modos sean elementos lógicos del mismo nivel.

La aplicación debe permitir a los usuarios centrarse en la importancia del contenido de la aplicación, no en la ubicación ni en el motivo. Si la aplicación no tiene una gran densidad de información, muchas páginas o escenarios que requieran una estructura o jerarquía, elige una estructura plana que permita a los usuarios ir rápidamente de una página a otra. No obstante, si la aplicación proporciona varias experiencias y distintos contenidos con una organización y una estructura que deban recorrerse en una secuencia o un orden concretos, consulta el tema sobre la navegación jerárquica, de principio a fin.

Vamos a describir cómo crear una aplicación de la Tienda Windows con JavaScript que use el patrón de navegación plana y que cumpla con todos los requisitos de certificación básicos 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 plana básica a lo largo de una retícula del patrón de navegación plana de una aplicación de la Tienda Windows.

Como demuestran estas imágenes, la estructura plana de contenido definida por este patrón requiere que cada página de la aplicación sea accesible desde las demás páginas. Un usuario se puede desplazar adelante y atrás aleatoriamente por las páginas, sin bifurcaciones.

Usa la barra de la aplicación de navegación (mostrada en la retícula anterior) para cambiar rápidamente entre páginas en aplicaciones con navegación plana. 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).

La aplicación Calculadora implementa el patrón de navegación plana de la siguiente manera. Observa que se utiliza una barra de navegación persistente en lugar de la barra de navegación transitoria estándar. Este es un ejemplo de cómo se puede adaptar la plataforma de aplicaciones de la Tienda Windows a distintos escenarios exclusivos de tus aplicaciones.

Página de calculadora estándar	Página de calculadora científica	Página de calculadora de conversión

Con el patrón de navegación correcto, junto con el diseño apropiado de la interfaz de usuario (consulta Interfaz de usuario de aplicaciones, de principio a fin), 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 plana

La muestra de navegación plana 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 contiene dos páginas: una página principal que presenta la aplicación y una segunda página donde puedes disponer tu material. 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 plana

Abre la muestra de navegación plana o comienza con la plantilla del proyecto de la aplicación de navegación 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.

Agregar 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 en 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