Recorrido de Dynamic Media: Conceptos básicos, parte II

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

• Estructura de una URL de Dynamic Media y cómo Dynamic Media entrega el contenido
• Aspectos básicos de la creación de ajustes preestablecidos de imagen para procesar recursos
• Conjuntos de imágenes, conjuntos de giros y conjuntos de medios mixtos

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 el contenido

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 aparecerá el recurso para 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/. Es fácil poder ver un conjunto de imágenes y comprender si Dynamic Media las proporciona simplemente mirando el dominio del servidor. La dirección URL va a ser bastante coherente. Sin embargo, hay algunos clientes de Dynamic Media que han cambiado a un dominio de servidor específico en el que podría estar 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, se llama a la cuenta 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 TIFF piramidal. El TIFF pirámico permite a Dynamic Media crear rápidamente representaciones sobre la marcha.

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

La ruta de URL completa está activa. Pruébelo..

Con la ventana del explorador aún abierta a la URL de Dynamic Media y a la imagen del reloj, veamos más de cerca cómo puede crear representaciones de la imagen solo 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. Pruébelo..

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=500y luego pulse Entrar. Pruébelo..

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

Ahora cambie el valor de anchura de 500 píxeles a 1000 píxeles y luego presione Entrar. Pruébelo..
En el momento en que pulse Entrar, el explorador vuelve al servidor de imágenes de Dynamic Media. Genera una representación completamente nueva del reloj, en función del nuevo valor de anchura que acaba de introducir, devuelve la nueva 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. Puede consulte la lista aquí..

Ahora intente agregar un parámetro de rotación a la imagen del reloj. Y el final de la ruta URL, inmediatamente después de wid=1000, tipo &rotate=90y, a continuación, pulse Entrar. Pruébelo..

El reloj sigue un poco sesgado hacia la izquierda. Cambiar el valor de rotación de 90 hasta 92y, a continuación, pulse Entrar. Pruébelo..

De nuevo, en el momento en que presionas Entrar, se genera una nueva representación del reloj de forma casi instantánea. Puede ver el tipo de rendimiento que obtiene, lo que explica por qué Dynamic Media puede entregar más de 800 000 solicitudes de imagen, por segundo, en un fin de semana ajetreado o en vacaciones importantes.

Aunque es posible cambiar los parámetros de procesamiento de imágenes en una URL imagen por imagen, no es un método eficiente, especialmente si tiene decenas de miles de imágenes que conforman su sitio web. 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

Existen varias formas y lugares en los que querrá crear una imagen o en los que una imagen estará disponible. Tradicionalmente, un creativo entra en Adobe Photoshop y guarda cada una de estas diferentes representaciones como imágenes estáticas.

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

Ahora imaginen que Creative Director 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 tendría que volver a rodar todas estas 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 utilizando ajustes preestablecidos de imagen, como Search_Grid y Thumbnail.

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

• una página de detalles del producto,
• cuadrícula de búsqueda,
• miniatura,
• tarjeta de compra, o
• imagen a pantalla completa

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

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

Creación de un ajuste preestablecido de imagen que comience por la pestaña Básico.

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

El Mediana el ajuste preestablecido de imagen 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. Desde el Formato en el menú desplegable, puede elegir enviar recursos como JPEG, PNG, TIFF o varios otros formatos. Aquí tiene flexibilidad.

Selección de la Avanzadas le ofrece opciones para el espacio de color del recurso. Según el formato seleccionado en la Básico pestaña: en el ejemplo anterior, se seleccionó JPEG . Puede enviar recursos en RGB, escala de grises o CMYK. Desde el Perfil de color en el menú desplegable, puede seleccionar cómo enviar un recurso de imagen CMYK para su uso en impresión. Tenga en cuenta también que hay parámetros adicionales que puede aplicar para enfocar las imágenes. En este caso, Máscara de enfoque se ha aplicado.

Creación de un ajuste preestablecido de imagen seleccionando opciones en la pestaña Avanzado.

Lo recuerda en Estructura de una URL de Dynamic Media anteriormente, había leído acerca de la URL de Dynamic Media y cómo se crea. El Modificador de imagen en el cuadro de texto se 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, el parámetro bgc=451B15 se ha añadido. Es decir, se ha añadido un color de fondo marrón oscuro.

Puede considerar un ajuste preestablecido de imagen como una fórmula para sus imágenes. Entregará todas las imágenes que utilicen el ajuste preestablecido, de forma consistente, cada vez; será el mismo. El parámetro &op_brightness=+10 también se ha añadido 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, queremos aplicar la variable Mediana imagen preestablecida a una imagen de un tazón de chocolate líquido.

Aplicar el ajuste preestablecido de imagen Medio para generar una representación de una imagen.

Copie la dirección URL y péguela en el explorador para comprobar el aspecto de la imagen. Pruébelo..

En el explorador, observe el nombre del ajuste preestablecido de imagen Mediana 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, esto se debe en parte a que con Dynamic Media puede almacenar imágenes de mayor tamaño 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 vuelve a ver la imagen del reloj que aparece a continuación, verá que hay un Cart ajuste preestablecido de imagen, a Grid ajuste preestablecido, a Large ajuste preestablecido, a PDP-page Ajuste preestablecido de (Página de detalles del producto) y varios más.

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

Pero, ¿qué sucede si tiene que cambiar una imagen de su sitio web? Por ejemplo, supongamos que ha realizado algunas pruebas y ha encontrado que la imagen de 120 x 120 (la variable Cart ajuste preestablecido de imagen) no se recibe como pensaba. Para aumentar el tamaño de la imagen, aumente la anchura a 175 píxeles y la altura a 175 píxeles. Tradicionalmente, tendría que entrar en Adobe Photoshop y volver a crear todas esas imágenes del carro de compras. Sin embargo, con Dynamic Media, solo tiene que editar el ajuste preestablecido de imagen actualizando los valores de Anchura y Altura a 175 y guardar el ajuste preestablecido, como se ve en el ejemplo siguiente.

Edición de la anchura y la altura de Cart ajuste preestablecido de imagen.

Después de cambiar el ajuste preestablecido de imagen y vaciar la caché, todas las imágenes se actualizan y todas las direcciones URL que se utilizan con ese ajuste preestablecido, sí no cambiar 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

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. Vea un conjunto de imágenes denominado "En ejecución" que utiliza el visor flotante.

Aquí dentro de Dynamic Media puedes ver varias imágenes de zapatillas de running. Es 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, elija Conjunto de imágenes desde el Crear menú desplegable. Observe en el menú que también hay opciones para crear una Conjunto de medios mixtos, a Conjunto de giros, y a 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. Pruébelo.. Un conjunto de giros simula el acto del mundo real de girar un objeto para examinarlo. Los conjuntos de giros permiten ver los detalles visuales clave desde cualquier ángulo. Pruébelo..

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

El editor de conjuntos de imágenes permite añadir 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 Running Conjunto de imágenes en Experience Manager Assets.

El Running Conjunto de imágenes en Experience Manager Assets, Vista de tarjeta.

Tanto si ha creado un conjunto de imágenes, un conjunto de medios mixtos, un conjunto de giros o cualquier otro medio interactivo, después de crear el conjunto, desea ver cómo aparece y se comporta para un cliente. Dynamic Media tiene numerosos visores integrados que le permiten hacer precisamente eso.

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

El Running Conjunto de imágenes en 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, seleccione Espectadores en el menú desplegable.

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

En este caso, la variable Flyout se seleccionó el visor. En este punto, puede obtener una vista previa del conjunto de imágenes en el visor. Sin embargo, es mejor verlo en su navegador, justo cómo lo ve un cliente. Usted selecciona URL en la parte inferior izquierda, copie la dirección URL y péguela en el explorador. Pruébelo..

La dirección URL única permite utilizar el conjunto de imágenes y el visor donde los necesite en el sitio web. Es posible que haya observado en el ejemplo anterior que Incrustar es a la derecha del botón URL. Al seleccionar Incrustar Además, puede copiar el código de 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 predeterminado y listo para usar 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 a su equipo de ventas y marketing no le gusta 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, simplemente aplique el visor InlineZoom al conjunto de imágenes y copie y pegue su URL en el explorador para ver cómo se comporta. Pruébelo..

Cuando mueve el puntero del mouse sobre el zapato, se acerca a esa imagen y puede ver más detalles a medida que mueve el puntero. Y la razón de esto es simplemente el tamaño de la imagen que se cargó inicialmente en Dynamic Media.

Al considerar la posibilidad de vivir como consumidor, o al trabajar en su función diaria, y al visitar diferentes sitios web, ve cosas como esta. Piense en cómo se está haciendo y cómo puede utilizar el poder de Dynamic Media en su propio trabajo y en el sitio web de su compañía.

Acaba de leer acerca de los conjuntos de imágenes y visores. Veamos un par de otros visores y pruébelos en recursos individuales. Para restablecer el visor, haga clic en el Actualizar en la esquina inferior izquierda.

• ZoomVertical_dark visualizador aplicado a un recurso de imagen. Pruébelo..
• Zoom_light visualizador aplicado a una imagen. Pruébelo..

Opcional: Más información

Si desea obtener más información sobre lo que acaba de leer, utilice los materiales siguientes para explorar conceptos en bueno detalle. De lo contrario, el Recorrido de Dynamic Media se habrá completado.

Temas de ayuda de Dynamic Media

• Cómo crear ajustes preestablecidos de imagen
• Una lista de parámetros de procesamiento de imagen que se puede utilizar en el campo Modificador de imagen al crear un ajuste preestablecido de imagen
• Previsualización de recursos
• Previsualización de recursos 3D
• Cómo crear conjuntos de imágenes
• Cómo crear conjuntos de giros
• Cómo crear conjuntos de medios mixtos

Tutoriales de Dynamic Media

• Uso de Dynamic Media con Experience Manager Assets
• Biblioteca de contenido de Adobe Experience Manager (buscar en Dynamic Media)

Visores de Dynamic Media

• Demostraciones en directo de cada visor

Recursos de Business.Adobe.com