Creación de sitios web de alta resolución mediante Adobe Muse

Mejora de Adobe Muse CC 2014.3 | Febrero de 2015

Adobe Muse es compatible con las pantallas HiDPI en las que se ejecuta Windows. Si utiliza hardware HiDPI con Windows, observará que la interfaz de Adobe Muse es notablemente más nítida.

HiDPI (High Dots Per Inch, por sus siglas en inglés), que significa alta resolución de puntos por pulgada, es un término con el que se denominan las pantallas con gran densidad de píxeles o, simplemente, de alta resolución. Con una densidad superior de píxeles, las pantallas HiDPI pueden mostrar texto y gráficos con mayor detalle que una pantalla estándar. Por ejemplo, la pantalla Retina de Apple de la que disponen iPad, iPhone, iPod Touch, algunos dispositivos de Windows, etc. puede mostrar texto y gráficos de alta resolución.

Los diseños web creados en Adobe Muse pueden beneficiarse de la calidad de visualización que ofrecen las pantallas de alta resolución (HiDPI), como las pantallas Retina de Apple.

Para aprovechar HiDPI en Muse, basta con:

• Cambiar la configuración de la resolución del sitio a HiDPI
• Crear imágenes que sean al menos dos veces (2x) el tamaño con el que aparecerán en el sitio

Al cargar o exportar un sitio de HiDPI desde Muse, el código generado incluirá imágenes estándar y 2x, y detectará automáticamente las imágenes que se utilizarán cuando el sitio se visualice en un pantalla de resolución estándar o HiDPI.

Activación de HiDPI en Adobe Muse

El menú de resolución en el nuevo cuadro de diálogo del sitio le permitirá elegir entre Estándar y HiDPI (2x).

Puede modificar la configuración de resolución después de crear un sitio, seleccionando Archivo > Propiedades del sitio.

Creación de activos con datos de imagen 2x

Para aprovechar al máximo las pantallas HiDPI, los activos deben tener una resolución mayor de modo que se puedan mostrar en alta calidad. Como mínimo, el tamaño del activo debe duplicar (2x) el tamaño al que se muestra en el sitio.

La creación de imágenes 2x es sencilla. Un activo 2x debe tener un tamaño al menos dos veces mayor del que aparecerá en la pantalla. Por ejemplo:

Al colocar un activo HiDPI en el lienzo de una página web, Adobe Muse optimiza la imagen reduciendo el tamaño al 50 %. La reducción de tamaño visual sirve para proporcionar una experiencia de diseño más cómoda y eficaz. Las imágenes muestran la indicación "2x" en el panel Activos. Tenga en cuenta que Adobe Muse conserva los datos del activo original para proporcionar una densidad de píxeles mayor cuando el activo se visualice en una pantalla HiDPI. El texto rasterizado, así como los efectos que dan como resultado imágenes, se generan automáticamente en 2x y el tamaño estándar de Adobe Muse al publicar o exportar.

Para asegurarse de que sus activos son 2x y, por tanto, almacenan suficientes datos como para mostrarlos con una mayor calidad, abra el panel Activos (Ventana > Activos). Cuando los activos contienen suficiente información, aparecerá el icono 2x al lado en la lista. Si el icono 2x no aparece junto a su activo, no contiene suficientes datos para mostrarlos a la máxima calidad, y se mostrarán con una resolución estándar.

Exportación de imágenes HiDPI

Hay casos especiales en los que Adobe Muse no exporta una imagen de alta resolución, que es una imagen con datos 2x. Cuando las imágenes se escalan para ajustarse a los contenedores, lo cual se aplica a las páginas con imágenes de fondo, proyecciones de diapositivas a pantalla completa, etc., Adobe Muse no exporta una versión HiDPI de la imagen al publicarla. Concretamente, solo se exporta la versión estándar de la imagen en los siguientes casos:

• Anchura al 100%: Escalar hasta encajar/Escalar hasta rellenar
• Proyección de diapositivas a pantalla completa: Escalar hasta encajar/Escalar hasta rellenar
• Fondo del navegador/de la página: Escalar hasta encajar/Escalar hasta rellenar

Tenga en cuenta también que las imágenes de fondo en mosaico se tratan de forma diferente en comparación con las imágenes de fondo escaladas hasta encajar/rellenar. En el caso de imágenes en mosaico, Adobe Muse proporciona imágenes de resolución alta y estándar para las pantallas HiDPI y estándares, respectivamente, al exportar el sitio web.   Al trabajar con Adobe Muse, si se dispone en mosaico una imagen de alta resolución con datos 2x, se trata como cualquier otra imagen y se coloca en el lienzo de la página web al 50 % del tamaño original. Al exportar, la imagen reducida a la mitad (50 %) se exporta como imagen de resolución estándar y la imagen nativa como imagen de alta resolución con datos 2x.

Visitantes del sitio

Las pantallas HiDPI permiten que los visitantes del sitio vean el contenido web de la más alta calidad visual mediante el uso de más datos de imagen. Los tamaños de imagen dan como resultado archivos de imagen que cuadriplican el tamaño de la imagen de resolución estándar. Para ver el sitio de imágenes HiDPI, los visitantes deben cuadriplicar la carga de datos. Para que el contenido aparezca de forma más rápida en los sitios de HiDPI, Muse exporta los activos de HiDPI, así como los activos de resolución estándar. Los activos de resolución estándar se cargan primero, mientras que los activos de HiDPI se cargan progresivamente encima de las versiones estándar.

Widget de botón (act./desact.) de HiDPI

Aunque la solución de carga progresiva resulta práctica para muchos visitantes del sitio, puede resultar problemática para aquellos visitantes del sitio con un plan de datos limitado u otras conexiones con cuotas de descarga limitadas o costosas. Para los usuarios del sitio, es posible que desee plantearse agregar el widget del botón HiDPI (Act. /Desact.). Cuando el botón HiDPI (Act. /Desact.) se encuentra en una página, esa página cargará inicialmente solo la resolución estándar y el botón de HiDPI aparecerá desactivada. Si el visitante del sitio enciende el botón HiDPI, a partir de ese momento todas las páginas que contienen el botón HiDPI (Act. /Desact.) cargarán las imágenes HiDPI, hasta que el visor del sitio apague el HiDPI, abandone el navegador o borre las cookies. Las páginas que no contienen el botón HiDPI (Act. /Desact.) cargarán siempre imágenes HiDPI cuando se visualicen en una pantalla HiDPI o Retina. Si el sitio no se visualiza en una pantalla HiDPI o dispositivo Retina, el botón permanecerá en el estado no disponible y solo se cargarán las imágenes de resolución estándar.