[AEM Assets]{class="badge positive" title="(Se aplica a los AEM Assets)."}

Recorrido de Dynamic Media: Conceptos básicos, parte II dm-journey-part2

Bienvenido a Recorrido de Dynamic Media: Conceptos básicos, parte II, donde aprenderá lo siguiente:

Consulte también Recorrido de Dynamic Media: Conceptos básicos, parte I.

Estructura de una URL de Dynamic Media y cómo Dynamic Media entrega contenido dm-journey-d

Una vez cargados y publicados los recursos de Dynamic Media, puede copiar la URL generada de un recurso y pegarla en el explorador para ver cómo aparece el recurso a un cliente. La siguiente URL copiada para una imagen de reloj se desglosa por color para facilitar su lectura y comprensión.

Estructura de una URL de Dynamic Media.

La primera parte de la dirección URL en rojo hace referencia al propio dominio del servidor. En este caso, Dynamic Media se está ejecutando en un dominio de servidor genérico, que es https://s7d1.scene7.com/is/image/. Puede identificar fácilmente si Dynamic Media sirve un conjunto de imágenes comprobando el dominio del servidor. La estructura de la URL es coherente. Sin embargo, hay algunos clientes de Dynamic Media que han cambiado a un dominio de servidor dedicado donde es name-of-your-company.scene7.com. Se requiere un dominio de servidor dedicado para imágenes inteligentes.

El nombre de la cuenta es la porción en morado. En este caso, la cuenta se llama jpearldemo.

El nombre o ID del recurso AdobeStock_28563982 está en verde. Observe que el recurso tiene no extensión de archivo, como .png o .jpg. Cuando los recursos se incorporan en Dynamic Media, la extensión de archivo se elimina y se crea un tipo diferente de archivo: un archivo piramidal de TIFF. El TIFF piramidal permite que Dynamic Media cree representaciones rápidamente sobre la marcha.

Y finalmente, hay algunos parámetros de procesamiento de imágenes, ?wid=1000&fmt=jpeg&qlt=85, que se muestran en amarillo al final.

La ruta de URL completa está activa. Inténtelo.

Con la ventana del explorador aún abierta a la URL de Dynamic Media y a la imagen del reloj, observe cómo puede crear representaciones de la imagen cambiando la URL.

Representar la imagen del reloj mediante la dirección URL

Comience eliminando manualmente solo las reglas de procesamiento de imágenes en la ruta URL; deje el nombre del servidor, el nombre de cuenta y el ID del recurso o el nombre de la imagen. Inténtelo.

Ahora añada un parámetro de procesamiento de imagen al final de la dirección URL. En el campo URL, a la derecha del nombre de la imagen, escriba ?wid=500 y luego presione Intro. Inténtelo.

Observe que se genera una nueva representación del reloj. Una clave para entender de este sencillo ejercicio de cambiar la anchura de la imagen es que la imagen vista se genera de forma 100 % dinámica.

Ahora cambie el valor de anchura de 500 píxeles a 1000 píxeles y, a continuación, presione Entrar. Pruébelo.
En el momento en que pulse Intro, el explorador volverá al servidor de imágenes de Dynamic Media. Genera una representación del reloj, en función del nuevo valor de anchura introducido, y luego envía la imagen al explorador y la almacena en caché.

Dynamic Media tiene numerosos parámetros de procesamiento de imágenes que puede utilizar para ajustar los recursos de imagen en las páginas web. Puedes ver una lista de ellos aquí.

Ahora intente agregar un parámetro de rotación a la imagen del reloj. Al final de la ruta de la dirección URL, inmediatamente después de wid=1000, escriba &rotate=90 y, a continuación, presione Entrar. Inténtelo.

El reloj sigue un poco sesgado hacia la izquierda. Cambie el valor de giro de 90 a 92 y, a continuación, presione Entrar. Inténtelo.

De nuevo, en el momento en que presione Entrar, se generará inmediatamente una nueva representación del reloj. Puede ver los niveles de rendimiento, lo que explica por qué Dynamic Media puede entregar más de 800 000 solicitudes de imagen, por segundo, durante períodos de mucho tráfico.

Cambiar los parámetros de procesamiento de imágenes en una URL imagen por imagen es ineficiente, especialmente para sitios web con miles de imágenes. Un enfoque mucho mejor es el uso de ajustes preestablecidos de imagen.

Aspectos básicos de la creación de ajustes preestablecidos de imagen para procesar recursos dm-journey-e

Existen varias formas de crear una imagen. Desea tener una imagen disponible. Tradicionalmente, un profesional creativo entra en Adobe Photoshop y guarda cada una de estas representaciones diferentes como imágenes estáticas.

Correcto: imágenes estáticas, cada una creada manualmente.

Ahora imaginen que el líder creativo mira las imágenes y dice:

“Realmente quería esta toma para que la mano grande señale a los cuatro y la mano pequeña señale al 1 para que el dial del reloj sea más fácil de ver.”

El creativo vuelve a rodar todas las nuevas imágenes estáticas.

Sin embargo, con Dynamic Media, si tiene diferentes ajustes preestablecidos de imagen, puede utilizar esas imágenes dondequiera que las necesite. Los ajustes preestablecidos de imagen aplican estándares.

Mejor: un archivo con varias representaciones creadas sobre la marcha mediante ajustes preestablecidos de imagen, como Search_Grid y Thumbnail.

Cada lugar donde necesite tener un tipo particular de imagen, por ejemplo,

Desea que la imagen se envíe con los mismos parámetros dondequiera que se utilicen.

Por un momento, veamos cómo se crea un ajuste preestablecido de imagen en Dynamic Media.

Creando un ajuste preestablecido de imagen a partir de la ficha Básico.

En el ejemplo anterior, puede ver que se creó un nuevo ajuste preestablecido de imagen con el nombre Medium. Dynamic Media utiliza una imagen de ejemplo predeterminada, la mochila, para ayudarle a ver las características del ajuste preestablecido de imagen a medida que lo crea.

El ajuste preestablecido de imagen Medium tiene una anchura de 500 píxeles y una altura de 800 píxeles. En la parte I de este Recorrido, se explica cómo ofrecer recursos en diferentes formatos. En el menú desplegable Formato, puede elegir enviar recursos como JPEG, PNG, TIFF o varios otros formatos. Aquí tiene flexibilidad.

Al seleccionar la pestaña Avanzado, tiene opciones para el espacio de color del recurso. Según el formato seleccionado en la ficha Básico, puede enviar recursos en RGB, Escala de grises o CMYK. Utilice el menú desplegable Perfil de color para seleccionar cómo enviar un recurso de imagen CMYK para su impresión. Tenga en cuenta también que hay parámetros adicionales que puede aplicar para enfocar las imágenes. En este caso, se aplicó máscara de enfoque.

Creando un ajuste preestablecido de imagen seleccionando opciones en la pestaña Avanzado.

Recuerda en Estructura de una URL de Dynamic Media anteriormente, que leíste acerca de la URL de Dynamic Media y cómo se genera. En el cuadro de texto Modificador de imagen es donde puede escribir cualquier parámetro de procesamiento de imagen adicional que desee. Los parámetros se incluyen en el nombre del ajuste preestablecido de la URL cuando se entregan las imágenes mediante el ajuste preestablecido. En la captura de pantalla anterior, se agregó el parámetro bgc=451B15. Es decir, se ha añadido un color de fondo marrón oscuro.

Puede considerar un ajuste preestablecido de imagen como una configuración para sus imágenes. Ofrece todas las imágenes que utilizan el ajuste preestablecido de forma coherente cada vez; es el mismo. También se agregó el parámetro &op_brightness=+10 para aumentar ligeramente el brillo.

Cuando haya terminado, guarde el ajuste preestablecido y ya estará disponible para todas las imágenes que tenga. En este caso, desea aplicar el ajuste preestablecido de imagen Medium a una imagen de un tazón de chocolate líquido.

Para generar una representación de una imagen, aplique el ajuste preestablecido de imagen Medium.

Para comprobar el aspecto de la imagen, copie la dirección URL y péguela en el explorador. Inténtelo.

En el explorador, observe el nombre del ajuste preestablecido de imagen Medium en la ruta de URL completa.

Se puede ver el tipo de claridad que se muestra en la imagen. Esa cualidad se debe en parte a la forma en que el tazón de chocolate fue disparado. Además, se debe en parte a que con Dynamic Media puede almacenar imágenes más grandes que las que se envían a los canales digitales.

Si todo parece satisfactorio para tu tazón de chocolate, pega la URL en tus páginas web donde quieras que aparezca la imagen en tu sitio web.

Si observa de nuevo la siguiente imagen del reloj, verá que hay un ajuste preestablecido de imagen Cart, un ajuste preestablecido de Grid, un ajuste preestablecido de Large, un ajuste preestablecido de PDP-page (página de detalles del producto) y varios más.

Ajustes preestablecidos de imagen estáticos y dinámicos. La imagen del reloj se representó mediante el ajuste preestablecido de imagen PDP-page.

Pero, ¿qué sucede si tiene que cambiar una imagen de su sitio web? Por ejemplo, supongamos que ha realizado algunas pruebas y ha descubierto que la imagen de 120 x 120 (el ajuste preestablecido de imagen Cart) no se percibe como pensaba. Aumente el tamaño de la imagen aumentando la anchura a 175 píxeles y la altura a 175 píxeles. Tradicionalmente, se accede a Adobe Photoshop y se vuelven a crear todas esas imágenes del carro de compras. Sin embargo, con Dynamic Media, puede editar el ajuste preestablecido de imagen actualizando los valores de Anchura y Altura a 175 y guardando el ajuste preestablecido, como se ve en el ejemplo siguiente.

Editando la anchura y altura del ajuste preestablecido de imagen Cart.

Después de cambiar el ajuste preestablecido de imagen y borrar la caché, todas las imágenes se actualizarán y todas las direcciones URL que se estén usando con ese ajuste preestablecido harán not cambio en cualquier lugar. Esto significa que no son necesarios vínculos rotos ni redirecciones de páginas web.

Conjuntos de imágenes, conjuntos de giros y conjuntos de medios mixtos dm-journey-f

Algunos de los usos más populares de Dynamic Media son la capacidad de crear conjuntos de imágenes, conjuntos de giros y conjuntos de medios mixtos.

Los conjuntos de imágenes suelen estar formados por una serie de recursos de imagen que se presentan como una sola entidad. Este tipo de conjuntos proporcionan a los usuarios una experiencia de visualización integrada, en la que pueden ver diferentes vistas de un elemento haciendo clic en una imagen en miniatura. Los conjuntos de imágenes permiten presentar vistas alternativas de algo y el visor ofrece herramientas de zoom para examinar las imágenes de cerca. Ver un conjunto de imágenes llamado “En ejecución” que usa el visor flotante.

Aquí dentro de Dynamic Media puede ver varias imágenes de zapatillas de running. Se trata de una serie de líneas de productos que las ventas y el marketing desean que los clientes vean como una sola presentación: un conjunto de imágenes.

Inicio de la creación de un conjunto de imágenes.

Para crear el conjunto de imágenes, elige Conjunto de imágenes en el menú desplegable Crear. Observe en el menú que también hay opciones para crear un conjunto de medios mixtos, un conjunto de giros y un conjunto de carrusel. Estos conjuntos se crean de forma muy similar a un conjunto de imágenes.

Un conjunto de medios mixtos puede contener imágenes, conjuntos de muestras, conjuntos de giros, vídeos y conjuntos de vídeos adaptables. Inténtelo. Un conjunto de giros permite a los usuarios girar un objeto para examinarlo. Los conjuntos de giros permiten ver los detalles visuales clave desde cualquier ángulo. Inténtelo.

La creación de un conjunto de imágenes es sencilla. Agregue los recursos de imagen que desee incluir en el conjunto.

El editor de conjuntos de imágenes permite agregar recursos de imagen y reordenar su aspecto en el conjunto.

Debe asignar un nombre al conjunto. Elija el nombre con cuidado porque no puede editarlo más adelante. En el ejemplo anterior, el conjunto se llama Running. Cuando haya terminado, guarde el conjunto.

Y aquí está el conjunto de imágenes Running en Experience Manager Assets.

El conjunto de imágenes Running en Experience Manager Assets, vista de tarjeta.

Después de crear un conjunto de imágenes, un conjunto de medios mixtos, un conjunto de giros u otros medios interactivos, obtenga una vista previa de cómo aparece y se comporta para un cliente. Dynamic Media tiene numerosos visores integrados que le permiten hacerlo.

Para empezar, seleccione el conjunto de imágenes para abrirlo en una vista previa, como se muestra en el siguiente ejemplo.

La imagen Running establecida en la vista previa con la opción Visualizadores seleccionada.

Observe en la vista previa que puede seleccionar las muestras de zapatillas de running y acercar y alejar las zapatillas. Para aplicar un visor al conjunto, selecciona Visualizadores en el menú desplegable.

El conjunto de imágenes Running con el visor flotante aplicado.

En este caso, se seleccionó el visor Flyout. En este punto, puede obtener una vista previa del conjunto de imágenes en el visor. Sin embargo, es mejor verlo en el explorador como lo ve un cliente. Selecciona URL en la esquina inferior izquierda, luego copia la URL y péguela en el navegador. Inténtelo.

La dirección URL única permite utilizar el conjunto de imágenes y el visor donde los necesite en el sitio web. Observó en el ejemplo anterior que Embed está a la derecha del botón URL. Seleccionando Incrustar, puede copiar el código para este conjunto/visor de imágenes y añadirlo a una página web o a un componente de Experience Manager Sites.

El visor flotante es un visor estándar predeterminado cuyas propiedades puede editar. O bien, como con la creación de un ajuste preestablecido de imagen, puede crear su propio visor personalizado.

Ahora, supongamos que su equipo de ventas y marketing no prefiere el visor flotante. Les gusta la función de zoom, pero quieren que los clientes vean el efecto de zoom directamente sobre los zapatos. En tal caso, aplique el visor InlineZoom al conjunto de imágenes y copie y pegue su dirección URL en el explorador para ver cómo se comporta. Inténtelo.

Cuando mueve el puntero del mouse sobre el zapato, la imagen amplía y puede ver más detalles a medida que mueve el puntero. Este efecto de zoom se debe al tamaño de la imagen que se cargó inicialmente en Dynamic Media.

Al considerar su papel como consumidor, o al trabajar en su función profesional, y al visitar diferentes sitios web, verá ejemplos de estas funciones. Considere cómo se está haciendo y cómo puede utilizar las capacidades de Dynamic Media en su propio trabajo y en el sitio web de su compañía.

Ha leído sobre los conjuntos de imágenes y los visores. Veamos un par de otros visores y pruébelos en recursos individuales. Para restablecer el visor, haga clic en el botón Actualizar en la esquina inferior izquierda.

Opcional: Más información

Para obtener más información sobre lo que lee, utilice los materiales a continuación para explorar conceptos con mayor detalle. De lo contrario, el Recorrido de Dynamic Media se habrá completado.

Tutoriales de Dynamic Media

Visores de Dynamic Media