Inicio rápido: uso de recursos de archivos o imágenes (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]
Puedes agregar imágenes y otros recursos de archivos a tu aplicación y hacer referencia a esos archivos desde la aplicación. La compatibilidad con la selección de imágenes basada en la configuración de alto contraste o la escala específica de pantalla se incorpora en Windows en tiempo de ejecución, si sigues las instrucciones que verás a continuación para asignar nombres a los recursos de archivos y organizarlos en carpetas.
Instrucciones
Crear imágenes adaptadas u otros activos de archivos para diferentes configuraciones de pantalla (PPP) y contraste
Crea imágenes con los distintos tamaños recomendados para garantizar que la aplicación tenga una apariencia excelente cuando Windows carga el recurso adecuado. Consulta las Directrices para escalado a la densidad de píxeles.
Crea varias copias de cada imagen:
- Tamaño original que usa un dispositivo típico de 96 PPP. Asigna el nombre name**.scale-100.**ext a este archivo (para esto y todas las instrucciones posteriores, name es el marcador de posición del nombre de recurso elegido, ext es la extensión específica del tipo de archivo. .scale-100 es el segmento del nombre del recurso que introduce el comportamiento de escalado de Windows en tiempo de ejecución; es en esta parte del nombre donde debes usar las convenciones que se documentan aquí.)
- 140 % del tamaño original. Por ejemplo, una imagen de 100 x 100 píxeles debería tener también una versión de imagen de 140 x 140 píxeles. Asigna el nombre name**.scale-140.**ext a este archivo
- 180 % del tamaño original. Por ejemplo, una imagen de 100 x 100 píxeles debería tener también una versión de imagen de 180 x 180 píxeles. Asigna el nombre name**.scale-180.**ext a este archivo
- 240 % del tamaño original, para aplicaciones de Windows Phone. Por ejemplo, una imagen de 100 x 100 píxeles debería tener también una versión de imagen de 240 x 240 píxeles. Asigna el nombre name**.scale-240.**ext a este archivo
- Imagen de alto contraste con fondo negro y primer plano blanco al tamaño original. Asigna el nombre name**scale-100_contrast-black.**ext a este archivo
- Imagen de alto contraste con fondo blanco y primer plano negro al tamaño original. Asigna el nombre name**scale-100_contrast-white.**ext a este archivo
Nota Las imágenes del logotipo de la aplicación también usan recursos, que se especifican en el archivo de manifiesto de la aplicación. Si usas una imagen específicamente para el logotipo de la aplicación, debes crear una copia que sea un 80 % del tamaño original. Por ejemplo, una imagen de logotipo de 100 x 100 píxeles debería tener también una versión de imagen de 80 x 80 píxeles. Asigna el nombre name**.scale-80.**ext a este archivo. Para obtener más información, consulta Elegir las imágenes de la aplicación y Activos visuales de iconos y notificaciones del sistema.
Coloca todas las imágenes en la misma carpeta de la estructura de la aplicación. Por ejemplo:
- images/logo.scale-100.png
- images/logo.scale-140.png
- images/logo.scale-180.png
- images/logo.scale-240.png
- images/logo.scale-80.png
- images/logo.scale-100_contrast-black.png
- images/logo.scale-100_contrast-white.png
Haz referencia a las imágenes en HTML sin los calificadores
Usa el formulario name.ext cuando hagas referencia a este recurso de archivos desde el marcado (estás omitiendo de forma deliberada el segmento que especifica la escala o el contraste; Windows en tiempo de ejecución anexa este segmento internamente cuando recupera el recurso adecuado). Por ejemplo:
<img src="images/logo.png" />Haz referencia a las imágenes en código sin los calificadores
Usa el formulario name.ext cuando hagas referencia a este recurso de archivos desde el código (estás omitiendo de forma deliberada el segmento que especifica la escala o el contraste; Windows en tiempo de ejecución anexa este segmento internamente cuando recupera el recurso adecuado). La diferencia con las instrucciones de marcado anteriores es que el marcado puede inferir el esquema, así como una raíz debido al contexto del archivo de marcado. No obstante, el código no puede inferir esto; los elementos del esquema y la raíz de un Identificador uniforme de recursos (URI) son necesarios para el código cuando se construye un nuevo Uri. Por ejemplo:
var uri = new Windows.Foundation.Uri('ms-appx:///images/logo.png'); var file = Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri);En un archivo de logotipo, haz referencia a la imagen del manifiesto sin los calificadores
Abre el archivo Package.appxmanifest en Microsoft Visual Studio. Abre la ficha Activos visuales.
Edita la referencia al manifiesto para hacer referencia al archivo de recursos. Esto se muestra como un campo de edición de texto de manera predeterminada; cuando especifiques el nombre de archivo de recursos aquí, omite el segmento del calificador. Por ejemplo, hay un campo de Logotipo cuadrado 150x150 donde el valor puede ser:
images\logo.png
Recursos de archivos y globalización
Las instrucciones de este tema se centran en los calificadores de recursos que habilitan la compatibilidad con el contraste y el ajuste de escala. Usan la convención de incluir el calificador en el nombre de archivo. No obstante, es posible que se deban localizar algunas imágenes u otros archivos por motivos distintos a la compatibilidad con el contraste y el ajuste de escalado, en particular si contienen texto o material sensible culturalmente. Los archivos también pueden variar según la ubicación de un usuario, independientemente del idioma. Por ejemplo, un mapa podría tener diferentes fronteras según la ubicación del usuario, pero las etiquetas deberían seguir el idioma preferido del usuario. Para obtener más información sobre por qué esto puede ser necesario, consulta Directrices para globalización y localización.
Si necesitas diferentes recursos por idioma y ubicación, Windows en tiempo de ejecución también admite una convención donde el idioma y la ubicación se pueden determinar en tiempo de ejecución y se cargan diferentes recursos adecuados.. Esta convención usa nombres de carpeta y no nombres de archivo. Por lo tanto, puedes combinar las convenciones de nombres de archivo que se describen aquí junto con las convenciones de carpeta para definir los recursos que admiten cuestiones de localización y contraste/escala. También existe compatibilidad para los recursos específicos de derecha a izquierda, y una convención targetsize que se usa en situaciones especiales, como en las imágenes que muestra el sistema para las asociaciones de archivos. Consulta Cómo asignar nombre a los recursos mediante calificadores para obtener más información sobre la convención de nomenclatura de carpetas para la calificación de recursos y las convenciones de calificación.
Temas relacionados
Cómo asignar nombre a los recursos mediante calificadores