Agregar recursos de Dynamic Media a páginas

Para añadir la funcionalidad Dynamic Media a los recursos que utilice en sus sitios web, puede agregar directamente en la página el componente Dynamic Media, Interactive Media, Panoramic Media o Video 360 Media. Introduzca el modo Diseño y active los componentes de Dynamic Media. A continuación, agregue estos componentes a la página y agregue recursos al componente. Los componentes de Dynamic Media son inteligentes: saben si va a añadir una imagen o un vídeo y las opciones de configuración disponibles cambian en consecuencia.

Los recursos de Dynamic Media se agregan directamente a la página si utiliza Adobe Experience Manager como WCM. Si utiliza un tercero para su WCM, link o incruste sus recursos. Para ver un sitio web interactivo de terceros, consulte Distribución de imágenes optimizadas en un sitio interactivo.

NOTA

Asegúrese de publicar los recursos antes de agregarlos a las páginas en Experience Manager. Consulte Publicación de recursos de Dynamic Media.

Añadir un componente de Dynamic Media a una página

Añadir un componente de medios 3D, Dynamic Media, Medios interactivos, Medios panorámicos, Recorte inteligente de vídeo o Vídeo 360 a una página es lo mismo que añadir un componente a cualquier página.

Para añadir un componente de Dynamic Media a una página:

  1. En Experience Manager, abra la página donde desee agregar el componente Dynamic Media.

  2. En el panel izquierdo, seleccione el icono Componentes y, a continuación, filtre para Dynamic Media.

    Si no hay ninguna lista de componentes de Dynamic Media disponible, es probable que deba habilitar los componentes de Dynamic Media que desee utilizar. Consulte Habilitar los componentes de Dynamic Media.

    6_5_360video_wcmcomponent

  3. Arrastre un componente Dynamic Media y suéltelo en la ubicación deseada de la página.

  4. Pase el puntero directamente sobre el componente. Cuando el componente esté rodeado por un cuadro azul, seleccione una vez para mostrar la barra de herramientas del componente. Seleccione el icono Configuración (llave inglesa).

    6_5_360video_wcmcomponentconfigure

  5. Según el componente Dynamic Media que haya colocado en la página, se abre un cuadro de diálogo de configuración. Defina las opciones del componente según sea necesario.

    El ejemplo siguiente muestra el cuadro de diálogo del componente Vídeo 360 Media de Dynamic Media y las opciones disponibles en la lista desplegable Ajuste preestablecido de visor .

    Componente de medios de vídeo 360

    Componente de medios de Dynamic Media Video 360.

  6. Cuando haya terminado, en la esquina superior derecha del cuadro de diálogo, seleccione la marca de verificación para guardar los cambios.

Habilitar componentes de Dynamic Media

Si no hay componentes de Dynamic Media disponibles para agregarlos a una página, es probable que deba habilitar los componentes que desee utilizar.

  1. En Experience Manager, abra la página donde desee agregar el componente Dynamic Media.

  2. A la izquierda de la barra de herramientas, cerca de la parte superior de la página, seleccione el icono Información de página y, a continuación, seleccione Editar plantilla en la lista desplegable.

    edit-template

  3. En el lado derecho de la barra de herramientas, cerca de la parte superior de la página, en la lista desplegable, seleccione Estructura.

    Política

  4. Cerca de la parte inferior de la página, seleccione Contenedor de diseño para abrir su barra de herramientas y, a continuación, seleccione el icono Política .

  5. En la página Contenedor de diseño, en el encabezado Propiedades, asegúrese de que la pestaña Componentes permitidos está seleccionada.

    Componentes permitidos

  6. Desplácese hasta que vea Dynamic Media.

  7. Seleccione el icono > a la izquierda de Dynamic Media y, a continuación, seleccione los componentes de Dynamic Media que desea habilitar.

    Lista de componentes de Dynamic Media

  8. Cerca de la esquina superior derecha de la página Contenedor de diseño, seleccione el icono Listo (marca de verificación).

  9. En el lado derecho de la barra de herramientas, cerca de la parte superior de la página, en la lista desplegable, seleccione Contenido inicial.

  10. Añada un componente Dynamic Media a una página como de costumbre.

Localizar componentes de Dynamic Media

Puede localizar los componentes de Dynamic Media de una de las dos maneras siguientes:

  • En una página web de Sites, abra Propiedades y seleccione la pestaña Avanzadas. Seleccione el idioma que desee para la localización.

    chlimage_1-172

  • En el selector de sitio, seleccione la página o el grupo de páginas que desee. Seleccione Properties y seleccione la pestaña Advanced. Seleccione el idioma que desee para la localización.

    NOTA

    No todos los idiomas disponibles en el menú Idioma tienen tokens asignados actualmente.

Componentes de Dynamic Media disponibles

Los componentes de Dynamic Media están disponibles cuando selecciona el icono Componentes y luego filtra en Dynamic Media.

Los componentes de Dynamic Media disponibles son los siguientes:

  • Dynamic Media: Se utiliza para recursos como imágenes, vídeos, catálogos electrónicos y conjuntos de giros.
  • Medios interactivos : se utiliza para cualquier recurso interactivo, como vídeo interactivo, imágenes interactivas o conjuntos de carrusel.
  • Medios panorámicos : se utilizan para imágenes panorámicas o recursos de imagen panorámica VR.
  • Medios de vídeo 360 : utilice para recursos de vídeo de 360 y vídeo de 360 VR.
NOTA

Estos componentes no están disponibles de forma predeterminada y deben estar disponibles mediante el editor de plantillas antes de su uso. Una vez que estén disponibles en el editor de plantillas, puede añadir los componentes a la página como lo haría con cualquier otro componente Experience Manager.

6_5_dynamicmediawcmcomponents

Componente: Dynamic Media

El componente Dynamic Media es inteligente. Ya sea que añada una imagen o un vídeo, tiene varias opciones. El componente admite ajustes preestablecidos de imagen, visores basados en imágenes, como conjuntos de imágenes, conjuntos de giros, conjuntos de medios mixtos y vídeo. Además, el visor es interactivo: el tamaño de la pantalla cambia automáticamente según el tamaño de la pantalla. Todos los visores son visores HTML5.

NOTA

Si la página web tiene lo siguiente:

  • Varias instancias del componente Dynamic Media que se utilizan en la misma página.
  • Cada instancia utiliza el mismo tipo de recurso.

No se admite la asignación de un ajuste preestablecido de visualizador diferente a cada componente de Dynamic Media de esa página.

Sin embargo, puede utilizar el mismo ajuste preestablecido de visualizador para todos los componentes de Dynamic Media que utilicen recursos del mismo tipo en la página.

Cuando se añade el componente de Dynamic Media y la opción Configuración de Dynamic Media está vacía o no puede añadir un recurso correctamente, compruebe lo siguiente:

  • La imagen tiene un archivo TIFF piramidal. Las imágenes que se importan antes de activar Dynamic Media no tienen un archivo tiff piramidal.

Uso de imágenes

El componente de Dynamic Media permite añadir imágenes dinámicas, como conjuntos de imágenes, conjuntos de giros y conjuntos de medios mixtos. Puede acercar, alejar y, si procede, girar una imagen en un conjunto de giros o seleccionar una imagen de otro tipo de conjunto.

También puede configurar el ajuste preestablecido de visor, el ajuste preestablecido de imagen o el formato de imagen directamente en el componente. Para que una imagen sea interactiva, puede establecer puntos de interrupción o aplicar un ajuste preestablecido de imagen interactiva.

Puede editar la siguiente Configuración de Dynamic Media seleccionando el icono Editar en el componente y luego Configuración de Dynamic Media.

Configuración de ajustes preestablecidos de imagen de Dynamic Media

NOTA

De forma predeterminada, el componente de imagen Dynamic Media es adaptable. Si desea que tenga un tamaño fijo, configúrelo en el componente de la pestaña Avanzado con la anchura y la altura apropiadas.

  • Ajuste preestablecido de visualizador : seleccione un ajuste preestablecido de visualizador existente en la lista desplegable. Si el ajuste preestablecido de visualizador que está buscando no está visible, debe hacerlo visible. Consulte Administración de ajustes preestablecidos de visor. No se puede seleccionar un ajuste preestablecido de visualizador si se utiliza un ajuste preestablecido de imagen y, a la inversa,

    Esta opción es la única disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos. Los ajustes preestablecidos de visor que se muestran también son ajustes preestablecidos de visor relevantes de solo inteligencia.

  • Modificadores del visualizador : Los modificadores del visualizador toman la forma de par nombre=valor con un delimitador & y permiten cambiar los visualizadores como se describe en la Guía de referencia del visualizador. Un ejemplo de modificador de visor es posterimage=img.jpg&caption=text.vtt,1, que establece una imagen diferente para la miniatura del vídeo y asocia un archivo de subtítulo/subtítulo/subtítulo cerrado con el vídeo.

  • Ajuste preestablecido de imagen : seleccione un ajuste preestablecido de imagen existente en la lista desplegable. Si el ajuste preestablecido de imagen que está buscando no está visible, debe hacerlo visible. Consulte Administración de ajustes preestablecidos de imagen. No se puede seleccionar un ajuste preestablecido de visualizador si se utiliza un ajuste preestablecido de imagen y, a la inversa,

    Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.

  • Modificadores de imagen : puede aplicar efectos de imagen suministrando más comandos de imagen. Estos comandos se describen en Ajustes preestablecidos de imagen y en la referencia Comando de servicio de imágenes .

    Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.

  • Puntos de interrupción : si utiliza este recurso en un sitio interactivo, debe agregar los puntos de interrupción de la imagen. Los puntos de interrupción de la imagen deben separarse con comas (,). Esta opción funciona cuando no se ha definido ninguna altura o anchura en el ajuste preestablecido de una imagen.

    Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.

    Puede editar la siguiente Configuración avanzada seleccionando Editar en el componente.

  • Optimizar para dispositivos de mayor resolución: seleccione (predeterminado) la casilla de verificación para permitir la optimización del RGPD (proporción de píxeles del dispositivo).

    La opción Optimizar para dispositivos de mayor resolución solo se muestra cuando se cumple el siguiente criterio:

    • En Tipo de ajuste preestablecido, Ajuste preestablecido de imagen está seleccionado y RESS_IP está seleccionado en la lista desplegable Ajuste preestablecido de imagen.

    ajuste de la proporción de píxeles del dispositivo para el ajuste preestablecido de imagen

    Consulte también Acerca de la optimización de la proporción de píxeles del dispositivo.

    Se omiten los valores del RGPD de imágenes inteligentes de Dynamic Media Experience Manager.

  • Título : cambie el título de la imagen.

  • Texto alternativo : agregue un título a la imagen para los usuarios que tengan los gráficos desactivados.

    Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.

  • URL, Abrir en : puede configurar un recurso para abrir un vínculo. Defina la dirección URL y, en Abrir en, indique si quiere que se abra en la misma ventana o en una nueva.

    Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.

  • Anchura : introduzca el valor en píxeles si desea que la imagen tenga un tamaño fijo. Dejar este valor en blanco hace que el recurso sea adaptable.

  • Altura : introduzca el valor en píxeles si desea que la imagen tenga un tamaño fijo. Dejar este valor en blanco hace que el recurso sea adaptable.

Uso de vídeos

Utilice el componente Dynamic Media para añadir vídeo dinámico a las páginas web. Al editar el componente, puede elegir utilizar un ajuste preestablecido de visualizador de vídeo predefinido para reproducir el vídeo en la página.

chlimage_1-173

Puede editar la siguiente Configuración de Dynamic Media seleccionando Editar en el componente.

NOTA

De forma predeterminada, el componente de vídeo de Dynamic Media es adaptable. Si desea que tenga un tamaño fijo, configúrelo en el componente con la Anchura y Altura en la pestaña Avanzado.

  • Ajuste preestablecido de visualizador : seleccione un ajuste preestablecido de visualizador de vídeo existente en la lista desplegable. Si el ajuste preestablecido de visualizador que está buscando no está visible, debe hacerlo visible. Consulte Administración de ajustes preestablecidos de visor.

  • Modificadores del visor : los modificadores del visor toman la forma de name=value pares con un & delimitador. Permiten cambiar los visores como se describe en la Guía de referencia de visores de Adobe. Un ejemplo de modificador de visor es posterimage=img.jpg&caption=text.vtt,1

    Con los modificadores del visor puede, por ejemplo, hacer lo siguiente:

    • Asocie un archivo de rótulo con un vídeo: subtítulo

    • Asocie un archivo de navegación con un vídeo: navegación

      Puede editar la siguiente Configuración avanzada seleccionando Editar en el componente.

  • Título : cambie el título del vídeo.

  • Anchura : introduzca el valor en píxeles si desea que la imagen tenga un tamaño fijo. Dejar este valor en blanco hace que el recurso sea adaptable.

  • Altura : introduzca el valor en píxeles si desea que la imagen tenga un tamaño fijo. Dejar este valor en blanco hace que el recurso sea adaptable.

Trabajar con Recorte inteligente

Utilice el componente Dynamic Media para añadir recursos de imagen de recorte inteligente a sus páginas web. Al editar el componente, puede elegir utilizar un ajuste preestablecido de visualizador de vídeo predefinido para reproducir el vídeo en la página.

Consulte Uso del Recorte inteligente con recursos de Experience Manager Dynamic Media

Consulte también Perfiles de imagen.

Configuración de recorte inteligente de Dynamic Media

Puede editar la siguiente configuración de Dynamic Media seleccionando Editar en el componente.

NOTA

De forma predeterminada, el componente de imagen Dynamic Media es adaptable. Si desea que tenga un tamaño fijo, configúrelo en el componente de la pestaña Avanzado con la anchura y la altura apropiadas.

  • Modificadores de imagen : puede aplicar efectos de imagen suministrando más comandos de imagen. Estos comandos se describen en Ajustes preestablecidos de imagen y en la referencia Comando de servicio de imágenes .

    Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.

    Puede editar la siguiente Configuración avanzada seleccionando Editar en el componente.

  • Habilitar coincidencia de relación de aspecto : para permitir que Dynamic Media elija una representación de recorte inteligente con una relación de aspecto que coincida mejor con la relación de aspecto de la imagen original, seleccione esta opción.

  • Optimizar para dispositivos de mayor resolución: seleccione (predeterminado) la casilla de verificación para permitir la optimización del RGPD (proporción de píxeles del dispositivo).

    La opción Optimizar para dispositivos de mayor resolución solo se muestra cuando se cumple el siguiente criterio:

    • En Tipo de ajuste preestablecido, la opción Recorte inteligente está seleccionada.

    configuración de la proporción de píxeles del dispositivo para el recorte inteligente

    Consulte también Acerca de la optimización de la proporción de píxeles del dispositivo.

    Se omiten los valores del RGPD de imágenes inteligentes de Dynamic Media Experience Manager.

  • Título : cambie el título de la imagen de recorte inteligente.

  • Texto alternativo : agregue un título a la imagen de recorte inteligente para los usuarios que tengan los gráficos desactivados.

    Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.

  • URL, Abrir en : puede configurar un recurso para abrir un vínculo. Defina la dirección URL y, en Abrir en, indique si quiere que se abra en la misma ventana o en una nueva.

    Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.

  • Anchura : introduzca el valor en píxeles si desea que la imagen tenga un tamaño fijo. Dejar este valor en blanco hace que el recurso sea adaptable.

  • Altura : introduzca el valor en píxeles si desea que la imagen tenga un tamaño fijo. Dejar este valor en blanco hace que el recurso sea adaptable.

Componente: Medios interactivos

El componente de Medios interactivos es para los recursos que tienen elementos interactivos integrados en ellos, como puntos interactivos o mapas de imágenes. Si tiene una imagen interactiva, un vídeo interactivo o un titular de carrusel, utilice el componente de Medios interactivos.

El componente de Medios interactivos es inteligente. Ya sea que añada una imagen o un vídeo, tiene varias opciones. Además, el visor es interactivo: el tamaño de la pantalla cambia automáticamente según el tamaño de la pantalla. Todos los visores son visores HTML5.

NOTA

Si la página web tiene lo siguiente:

  • Varias instancias del componente de Medios interactivos que se utilizan en la misma página.
  • Cada instancia utiliza el mismo tipo de recurso.

No se admite la asignación de un ajuste preestablecido de visualizador diferente a cada componente de Medios interactivos de esa página.

Sin embargo, puede utilizar el mismo ajuste preestablecido de visualizador para todos los componentes de Medios interactivos que utilicen recursos del mismo tipo en la página.

chlimage_1-174

Puede editar la siguiente configuración General seleccionando Editar en el componente.

  • Ajuste preestablecido de visualizador : seleccione un ajuste preestablecido de visualizador existente en la lista desplegable. Si el ajuste preestablecido de visualizador que está buscando no está visible, debe hacerlo visible. Los ajustes preestablecidos de visor se deben publicar para que se puedan usar. Consulte Administración de ajustes preestablecidos de visor.

  • Título : cambie el título del vídeo.

  • Anchura : introduzca el valor en píxeles si desea que la imagen tenga un tamaño fijo. Dejar este valor en blanco hace que el recurso sea adaptable.

  • Altura : introduzca el valor en píxeles si desea que la imagen tenga un tamaño fijo. Dejar este valor en blanco hace que el recurso sea adaptable.

    Puede editar la siguiente configuración Agregar al carro seleccionando Editar en el componente.

  • Mostrar recurso de producto : de forma predeterminada, este valor está seleccionado. El recurso del producto muestra una imagen del producto, según se ha definido en el módulo Commerce. Desactive la casilla para no mostrar el recurso del producto.

  • Mostrar precio del producto : de forma predeterminada, se selecciona este valor. El precio del producto muestra el precio del artículo, según se ha definido en el módulo Commerce. Desactive la casilla para no mostrar el precio del producto.

  • Mostrar formulario de producto : de forma predeterminada, este valor no está seleccionado. En el formulario del producto se incluye las variantes de producto, como talla y color. Desactive la casilla para no mostrar las variantes del producto.

Componente: Medios panorámicos

El componente Panoramic Media es para aquellos recursos que son imágenes panorámicas esféricas. Estas imágenes proporcionan una experiencia de visualización de 360° de una habitación, propiedad, ubicación o paisaje. Para que una imagen pueda calificarse como panorama esférico, debe tener una o ambas de las siguientes opciones:

  • Una relación de aspecto de 2:1.
  • Etiquetado con las palabras clave equirectangular o (spherical + panorama) o (spherical + panoramic). Consulte Uso de etiquetas.

Tanto la proporción de aspecto como los criterios de palabra clave se aplican a los recursos panorámicos para la página de detalles de recursos y el componente WCM de medios panorámicas.

NOTA

Si la página web tiene lo siguiente:

  • Varias instancias del componente Panoramic Media que se están utilizando en la misma página.
  • Cada instancia utiliza el mismo tipo de recurso.

No se admite la asignación de un ajuste preestablecido de visualizador diferente a cada componente Medios panorámicos de esa página.

Sin embargo, puede utilizar el mismo ajuste preestablecido de visualizador para todos los componentes de medios panorámicos que utilicen recursos del mismo tipo dentro de la página.

Ajuste preestablecido del visor de medios panorámicos

Puede editar la siguiente configuración seleccionando Configurar en el componente.

  • Ajuste preestablecido de visualizador : seleccione un visualizador existente en la lista desplegable Ajuste preestablecido de visualizador.

Si el ajuste preestablecido de visualizador que está buscando no está visible, compruebe que se ha publicado. Publicar ajustes preestablecidos de visualizador antes de usarlos. Consulte Administrar ajustes preestablecidos de visor.

Componente: Medios de vídeo 360

Utilice el componente Video 360 Media para procesar un vídeo equirectangular en la página web. Al hacerlo, se garantiza una experiencia de visualización inmersiva de una habitación, propiedad, ubicación, paisaje o procedimiento médico.

Durante la reproducción en una pantalla plana, el usuario controla el ángulo de visualización; la reproducción en dispositivos móviles suele utilizar sus controles giroscópicos integrados.

El visor incluye compatibilidad nativa con la entrega de 360 recursos de vídeo. De forma predeterminada, no es necesaria ninguna configuración adicional para la visualización o reproducción. El vídeo 360 se entrega con extensiones de vídeo estándar como .mp4, .mkv y .mov. El códec más común es H.264.

6_5_360video_wcmcomponent-1

Puede editar la siguiente configuración seleccionando Configurar en el componente.

  • Ajuste preestablecido de visualizador : seleccione un visualizador existente en la lista desplegable Ajuste preestablecido de visualizador. Utilice Video360VR para usuarios finales que utilicen lentes de realidad virtuales. Incluye controles básicos de reproducción de vídeo y funciones de medios sociales. Utilice Video360_social, que incluye controles básicos de reproducción de vídeo. El procesamiento de vídeo se realiza en modo estéreo. El control de punto de vista manual está desactivado, pero el control giroscópico está activado. No hay características de medios sociales.

Si el ajuste preestablecido de visualizador que está buscando no está visible, compruebe que se ha publicado. Publicar ajustes preestablecidos de visualizador antes de usarlos. Consulte Administrar ajustes preestablecidos de visor.

Utilizar HTTP/2 para enviar recursos de Dynamic Media

HTTP/2 es el nuevo protocolo web actualizado que mejora la forma en que se comunican los exploradores y los servidores. Proporciona una transferencia de información más rápida y reduce la cantidad de potencia de procesamiento necesaria. La entrega de recursos de Dynamic Media ahora puede realizarse a través de HTTP/2, lo que proporciona una mejor respuesta y tiempos de carga.

Consulte Entrega HTTP2 de contenido para obtener información detallada sobre cómo empezar a utilizar HTTP/2 con su cuenta de Dynamic Media.

En esta página