Administración de ajustes preestablecidos de visor de Dynamic Media managing-viewer-presets
Un ajuste preestablecido de visualizador de Dynamic Media es una colección de ajustes que determinan cómo ven los usuarios los recursos de medios enriquecidos en sus pantallas de equipos y dispositivos móviles. Si es un administrador, puede crear ajustes preestablecidos de visor. La configuración está disponible para una matriz de opciones de configuración del visor. Por ejemplo, puede cambiar el tamaño de visualización del visor o el comportamiento de zoom.
Para obtener instrucciones sobre la creación y personalización de sus propios ajustes preestablecidos de visor de HTML5, consulte el Adobe Dynamic Media Documentación de la API del SDK del visor HTML5. El SDK está disponible en el servidor de publicación IS incrustado en el propio SDK. Cada versión de la biblioteca tiene su propia documentación de SDK incluida.
Ruta: <scene7_domain>/s7sdk/<library_version>/docs/jsdocs/index.html.
Por ejemplo, SDK 3.10: https://s7d1.scene7.com/s7sdk/3.10/docs/jsdoc/index.html
Consulte también la Guía de referencia de visores de Dynamic Media de Adobe.
En esta sección se describe cómo crear, editar y administrar ajustes preestablecidos de visualizador. Puede aplicar un ajuste preestablecido de visualizador a un recurso cada vez que lo previsualice. Consulte Aplicación de ajustes preestablecidos de visor.
Accesibilidad de teclado para visualizadores keyboard-accessibility-for-viewers
Todos los visores integrados admiten la accesibilidad del teclado.
Consulte también Navegación y accesibilidad del teclado.
Administración de ajustes preestablecidos de visor de Dynamic Media managing-presets
Puede agregar, editar, eliminar, publicar, cancelar la publicación y previsualizar ajustes preestablecidos de visor en AEM al pulsar Herramientas > Assets > Ajustes preestablecidos de visor.
Compatibilidad del visor con páginas web diseñadas para adaptarse viewer-support-for-responsive-designed-web-pages
Las diferentes páginas Web tienen diferentes necesidades. Por ejemplo, a veces se desea una página web que proporcione un vínculo que abra el visor de HTML5 en una ventana independiente del explorador. En otros casos, puede ser necesario incrustar el visor de HTML5 directamente en la página de alojamiento. En este último caso, la página web puede tener un diseño estático. O puede ser adaptable y mostrar de forma diferente en diferentes dispositivos o para diferentes tamaños de ventana del navegador. Para satisfacer estas necesidades, todos los visores predefinidos y listos para usar del HTML5 que se incluyen con Dynamic Media admiten tanto páginas web estáticas como páginas web diseñadas con capacidad de respuesta.
Consulte Biblioteca de imágenes adaptables en el Ayuda de la API de servicio de imágenes para obtener más información sobre cómo incrustar visores interactivos en sus páginas web.
Consulte Ajustes preestablecidos del visualizador de publicaciones.
Compatibilidad del sistema con ajustes preestablecidos del visor viewer-preset-system-compatibility
Todos los ajustes preestablecidos de visor integrados que se incluyen con Dynamic Media son totalmente compatibles con los siguientes sistemas:
- Equipos de escritorio
- Apple iPhone
- Apple iPad
- Smartphone de Android
- Android Tablet
- Para vídeo, se proporciona compatibilidad adicional con la reproducción de MP4 para BlackBerry y Windows Phone 8.
Tipos de medios enriquecidos para ajustes preestablecidos de visor rich-media-types-for-viewer-presets
Los administradores pueden agregar y personalizar los siguientes tipos de medios enriquecidos al crear nuevos ajustes preestablecidos de visor.
Para que una imagen cargada se califique como un 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 equirectangulares, o esféricas y panorámicas, o esféricas y panorámicas. Consulte Uso de etiquetas.
El visor de zoom vertical le permite maximizar una experiencia de visualización de imágenes de producto para ofrecer a los usuarios la mejor representación de un producto. La ubicación vertical de las muestras hace lo siguiente:
- Garantiza que las muestras estén por encima del pliegue. Con las muestras horizontales, según el tamaño de la pantalla del escritorio usuario, las muestras no eran visibles hasta que el usuario se desplazaba hacia abajo por la página. Al colocar las muestras verticalmente en el visor, se garantiza que sean visibles independientemente del tamaño de pantalla del usuario.
- Maximiza el tamaño de la imagen principal. Con las muestras horizontales, es necesario reservar espacio en la página para garantizar que sean visibles. Esta posición redujo el tamaño de la imagen principal. Sin embargo, con un diseño de muestra vertical, no es necesario asignar este espacio. Como tal, puede maximizar el tamaño de la imagen principal.
Lista de ajustes preestablecidos de visor integrados list-of-out-of-the-box-viewer-presets
La siguiente tabla identifica todos los ajustes preestablecidos de visualizador predefinidos y listos para usar que se incluyen con Dynamic Media.
Consulte también Demostraciones en directo.
Para obtener información sobre las versiones compatibles del navegador web y del sistema operativo de los visores, consulte las Notas de la versión de los visores.
Consulte Notas de la versión de los visores en la tabla de contenido del Guía de referencia de visores.
Consulte Ajustes preestablecidos del visualizador de publicaciones.
Consulte Activación o desactivación de ajustes preestablecidos de visor y Ajustes preestablecidos del visualizador de publicaciones.
Matriz de gestos de visores móviles compatibles supported-mobile-viewers-gestures-matrix
La tabla siguiente identifica los gestos del visor móvil compatibles con los dispositivos iOS, Android 2.x y Android 3.x.
Aumento del número de ajustes preestablecidos de visor de Dynamic Media que se muestran increasing-the-number-of-viewer-presets-that-display
AEM muestra una amplia variedad de ajustes preestablecidos de visor al ver los recursos de Vista de detalles > Visualizadores. Puede aumentar o disminuir el número de visualizadores que se muestran.
Para aumentar el número de ajustes preestablecidos de visualizador de Dynamic Media que se muestran:
-
Vaya a CRXDE Lite (http://localhost:4502/crx/de).
-
Vaya al nodo de lista de ajustes preestablecidos de visor en
/libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist
-
En la propiedad limit, cambie el valor, que se establece en 15 de forma predeterminada, por el número deseado.
-
Vaya a la fuente de datos del ajuste preestablecido de visualizador en
/libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist/datasource
-
En el límite , cambie el número por el número deseado, por ejemplo
{empty requestPathInfo.selectors[1] ? "20" : requestPathInfo.selectors[1]} -
Toque Guardar todo.
Creación de un nuevo ajuste preestablecido de visualizador de Dynamic Media creating-a-new-viewer-preset
La creación de ajustes preestablecidos de visualizador le permite aplicar distintos ajustes para ver e interactuar con los recursos. Sin embargo, no es necesario crear nuevos ajustes preestablecidos de visor. Si lo prefiere, puede utilizar los ajustes preestablecidos de visualizador predeterminados que ya se incluyen con AEM Assets.
Si elige crear un nuevo ajuste preestablecido de visualizador, después de guardarlo, el estado del visualizador se activa automáticamente (establecido en Activado) en el Ajustes preestablecidos de visor página. Este estado significa que está visible en la variable Dynamic Media y Medios interactivos y siempre que se obtiene una vista previa de una imagen o vídeo.
Algunos ajustes preestablecidos de visualizador tienen una configuración exclusiva que puede afectar al uso y al comportamiento general del visualizador. En función del ajuste preestablecido de visualizador que esté creando, es posible que desee tener en cuenta estas consideraciones especiales.
Consulte Consideraciones especiales para crear un ajuste preestablecido de visualizador interactivo.
Para crear un nuevo ajuste preestablecido de visualizador de Dynamic Media:
-
En la esquina superior izquierda de AEM, pulse el logotipo de AEM y, a continuación, en el carril izquierdo, pulse Herramientas > Assets > Ajustes preestablecidos de visor.
-
En el Ajustes preestablecidos de visor página, en la barra de herramientas, pulse Crear.
-
En el Nuevo ajuste preestablecido de visualizador en el Nombre de ajuste preestablecido , introduzca el nombre del nuevo ajuste preestablecido. Elija un nombre con cuidado: no se pueden editar después de pulsar Crear.
Cuando guarde el ajuste preestablecido más adelante en estos pasos, el nombre aparecerá en la página Ajustes preestablecidos de visor, en la sección Título preestablecido encabezado de columna.
-
En el Tipo de medio enriquecido menú desplegable, seleccione el tipo de ajuste preestablecido de visualizador que desea crear y, a continuación, en la esquina superior derecha de la página, pulse Crear.
Consulte Tipos de medios enriquecidos para ajustes preestablecidos de visor.
-
En el Editar ajuste preestablecido de visualizador de la página, pulse Aspecto pestaña .
-
Realice una de las siguientes acciones:
-
En el Tipo seleccionado menú desplegable, seleccione un componente cuyo diseño visual desee personalizar. Como alternativa, puede tocar cualquier elemento visual en el visualizador para seleccionarlo para su configuración.
El editor visual permite ver qué efecto tiene una propiedad determinada en un estilo. Solo tiene que configurar o ajustar cualquier propiedad para ver instantáneamente qué efecto tiene en el visor con la muestra a la izquierda del editor.
Las propiedades de estilo CSS para cada tipo de ajuste preestablecido de visualizador se describen en la sección "Personalización <viewer_name> Tema de ayuda del visualizador Guía de referencia de visores.
Por ejemplo, si está creando un ajuste preestablecido de visualizador del tipo
Mixed_Media, consulte Personalización del visualizador de medios mixtos para obtener una lista y una descripción de cada propiedad. -
Si ha definido la configuración de estilo en un archivo CSS independiente, puede cargar el archivo CSS en AEM Assets. Toque Importar CSS debajo de Tipo seleccionado menú desplegable (puede que necesite desplazar el editor visual hacia arriba para verlo) para encontrar el archivo CSS cargado y asociarlo al ajuste preestablecido de visor.
Al importar un archivo CSS, el editor visual comprueba si el CSS utiliza los marcadores de visor correctos. Por ejemplo, si está creando un visor de zoom, todas las reglas CSS que importe deben definirse con su nombre de clase de visor
.s7mixedmediaviewerse define en un elemento de visualizador principal.Puede importar CSS arbitraria hecha a mano siempre y cuando defina correctamente los marcadores CSS de un visor determinado. (Los marcadores CSS se describen en cualquier "Personalización" <viewer name=""> Tema de ayuda del visualizador Guía de referencia de visores. Por ejemplo, si desea obtener información sobre los marcadores CSS para el visor de zoom, consulte Personalización del visor de zoom.) Sin embargo, es posible que el editor visual no entienda algunos valores de CSS. En estos casos, el editor visual intenta anular los errores para que el CSS pueda seguir funcionando.
note note NOTE Si prefiere editar la CSS directamente en su formulario sin procesar, pulse Mostrar/Ocultar CSS debajo del menú desplegable Tipo seleccionado (puede que necesite desplazar el editor visual hacia arriba para verlo). Al igual que el editor visual, cuando realiza un cambio en una propiedad directamente en el CSS, puede ver instantáneamente qué efecto tiene en la muestra del visor. Y, esa misma propiedad se actualiza automáticamente al mismo tiempo en el editor visual. Como tal, puede utilizar el editor CSS sin procesar o el editor visual, o ambos de forma intercambiable. note note NOTE Para las ilustraciones de botones, elija la imagen 2x y cargue las ilustraciones de alta resolución. Al trabajar con imágenes interactivas y banners de ventas, también puede seleccionar entre una variedad de botones de puntos interactivos predeterminados. -
-
(Opcional) Cerca de la parte superior del Editar ajuste preestablecido de visualizador página, toque Escritorio, Tablet o Teléfono para definir de forma exclusiva estilos visuales para distintos tipos de dispositivos y pantallas.
-
En el Editar ajuste preestablecido de visualizador de la página, pulse Comportamiento pestaña . Como alternativa, puede tocar o hacer clic en cualquier elemento visual del visualizador y seleccionarlo para su configuración.
-
En el menú desplegable Tipo seleccionado, seleccione un componente cuyos comportamientos desee cambiar.
Muchos componentes del editor visual tienen una descripción detallada asociada. Estas descripciones aparecen en cuadros azules al expandir un componente para mostrar sus parámetros asociados.
Algunos tipos de visualizador tienen componentes que permiten especificar comandos del servicio de imágenes en un campo de texto Comando IS. Para obtener una lista de los comandos que puede utilizar, consulte la Referencia de API del servicio de imágenes.
note note NOTE Si utiliza un dispositivo táctil, como un teléfono o una tableta… Después de escribir un valor en el campo de texto, pulse en cualquier parte de la interfaz de usuario para enviar el cambio y cerrar el teclado virtual. Si toca Entrar, no se produce ninguna acción. -
Cerca de la esquina superior derecha de la página, pulse Guardar.
-
Publique el nuevo ajuste preestablecido de visor. Debe publicar el ajuste preestablecido para poder utilizarlo en el sitio web.
Consulte Ajustes preestablecidos del visualizador de publicaciones.
Consideraciones especiales para crear un ajuste preestablecido de visualizador interactivo special-considerations-for-creating-an-interactive-viewer-preset
Acerca de los modos de visualización de las miniaturas de imágenes en el panel
Al crear o editar un ajuste preestablecido de visualizador de vídeo interactivo, tiene la opción de elegir cuál Modo de visualización configuración que se utilizará al seleccionar InteractiveSwatches de la variable Componente seleccionado menú desplegable en la sección Comportamiento pestaña . El modo de visualización que elija afecta a cómo y cuándo aparecerán las miniaturas mientras se reproduce el vídeo. Puede elegir una segmentmodo de visualización (predeterminado) o continuousmodo de visualización.
Comportamiento del desplazamiento automático en el visualizador de vídeo interactivo
El comportamiento de desplazamiento automático de las miniaturas del visor de vídeo interactivo funciona independientemente del modo de visualización que haya elegido.
Al crear o editar un ajuste preestablecido de visualizador de vídeo interactivo, se accede a Desplazamiento automático de la variable Comportamiento pestaña . En la pestaña Comportamiento, en el menú desplegable Componentes seleccionados, pulse Muestras interactivas. La variable Desplazamiento automático la casilla de verificación aparece debajo del campo de texto Comando IS .
Si desactiva el desplazamiento automático (desactive la casilla de verificación) en el ajuste preestablecido de visualizador, durante la reproducción del vídeo por parte del usuario, el panel solo muestra la primera imagen en miniatura durante toda la duración del vídeo. Sin embargo, un usuario puede desplazarse manualmente por las miniaturas utilizando los iconos de flecha arriba y abajo, si lo desea.
Al activar (seleccionar) Desplazamiento automático en el ajuste preestablecido de visualizador, durante la reproducción de vídeo, las imágenes en miniatura asignadas a un segmento de vídeo se desplazan hasta la vista al principio de un segmento. Sin embargo, hay instancias en las que ciertas miniaturas de un segmento se muestran el doble de tiempo que otras miniaturas antes o después de este segmento. Este comportamiento se produce porque el número de miniaturas de un segmento es mayor que el número visible en el panel y no se puede dividir de manera uniforme.
Como ejemplo, supongamos que tiene un segmento de vídeo de 30 segundos. Además, hay un total de nueve miniaturas para mostrar durante los 30 segundos. El tamaño del navegador es tal que hay cuatro posiciones de miniaturas visibles en el panel de visualización. El segmento de vídeo de 30 segundos se divide en tres subsegmentos. La tabla siguiente muestra el desglose de las miniaturas que se muestran para un subsegmento de tiempo determinado:
El subsegmento de vídeo 3 no se extiende más allá de las miniaturas asignadas a él. También observe que las miniaturas 4, 6 y 7 son visibles en el panel el doble de tiempo que las demás miniaturas.
La lógica que utiliza el visor para ver cuántas miniaturas se muestran en el panel en función del número de posiciones disponibles es la siguiente:
-
Número de subsegmentos = redondear al subsegmento siguiente (número de miniaturas/número de espacios visibles en el panel de miniaturas, según el tamaño de la ventana del navegador).
Con el ejemplo de la tabla anterior, 9 miniaturas / 4 ranuras = 2,25; la lógica del visor lo redondea a tres subsegmentos.
-
Número de miniaturas = redondear a la siguiente miniatura (número de miniaturas/número de subsegmentos de vídeo).
Con el ejemplo de la tabla anterior, 9 miniaturas / 3 subsegmentos de vídeo = 3 miniaturas.
-
Duración del subsegmento = duración total del vídeo/número de subsegmentos de vídeo.
Con el ejemplo de la tabla anterior, 30 segundos / 3 subsegmentos de vídeo = 10 segundos de visualización de cada subsegmento de vídeo.
Consideraciones especiales para crear un ajuste preestablecido de visor de titular de carrusel special-considerations-for-creating-a-carousel-banner-viewer-preset
Al crear ajustes preestablecidos de visor de titular de carrusel, se puede acceder a cambiar el estilo de las zonas interactivas de la siguiente manera:
Activación o desactivación de ajustes preestablecidos de visor de Dynamic Media activating-or-deactivating-viewer-presets
Los ajustes preestablecidos de visor disponibles en la interfaz de usuario dependen de los que estén activos en el modo Autor. De forma predeterminada, un ajuste preestablecido de visualizador es Activado después de crearlo. Si desactiva el ajuste preestablecido, no lo verá en modo Autor. Si se publica el ajuste preestablecido. siempre se publicará independientemente de si está activada o desactivada. Puede que desee desactivar los ajustes preestablecidos de visor si la lista es demasiado complicada o si no desea que haya un ajuste preestablecido de visor disponible para su uso.
Para activar o desactivar ajustes preestablecidos de visualizador de Dynamic Media:
-
En la esquina superior izquierda de AEM, pulse el logotipo de AEM y, a continuación, en el carril izquierdo, pulse Herramientas > Assets > Ajustes preestablecidos de visor.
-
En el Ajuste preestablecido de visor en el Estado , pulse el botón de alternancia para activar o desactivar un ajuste preestablecido de visualizador.
Los ajustes preestablecidos de visor que se activan tienen el botón de alternancia a la derecha, dentro de un cuadro azul; los ajustes preestablecidos de visualizador desactivados tienen la opción que aparece a la izquierda, dentro de un cuadro gris claro.
Publicación de ajustes preestablecidos de visualizador de Dynamic Media publishing-viewer-presets
Activación (o giro Activado) el estado de un ajuste preestablecido de visualizador significa que está visible en el componente Dynamic Media, en el componente Medios interactivos y siempre que se visualiza un recurso.
Sin embargo, para entregar un recurso con un ajuste preestablecido de visualizador, también debe publicarse el ajuste preestablecido de visualizador. Todos los ajustes preestablecidos de visor deben activarse y publicado para obtener la URL o el código incrustado de un recurso. Debe activar y publicar todos los ajustes preestablecidos de visualizador integrados que se incluyen con Dynamic Media. Los ajustes preestablecidos de visualizador personalizado que cree y agregue se activan automáticamente, pero también se deben publicar.
Consulte Activación o desactivación de ajustes preestablecidos de visor.
Consulte también Vista previa de recursos.
Para publicar ajustes preestablecidos de visualizador de Dynamic Media:
- En la esquina superior izquierda de AEM, pulse el logotipo de AEM y, a continuación, en el carril izquierdo, pulse Herramientas > Assets > Ajustes preestablecidos de visor.
- Seleccione uno o varios ajustes preestablecidos de visor que desee publicar.
- En la barra de herramientas, pulse el botón Publicación icono.
Clasificación de ajustes preestablecidos de visor de Dynamic Media sorting-viewer-presets
Ordenar los ajustes preestablecidos del visor de Dynamic Media:
- En la esquina superior izquierda de AEM, pulse el logotipo de AEM y, a continuación, en el carril izquierdo, pulse Herramientas (icono de martillo) > Assets > Ajustes preestablecidos de visualizador.
- Haga clic en Título preestablecido, Tipo, Publicado o Estado para ordenar por ese encabezado de la columna. Por ejemplo, haga clic en Tipo para ordenar los tipos de ajustes preestablecidos de visualizador en orden alfabético o alfabético inverso.
Edición de ajustes preestablecidos de visor de Dynamic Media editing-viewer-presets
Tenga en cuenta que al editar ajustes preestablecidos del visor predefinidos y listos para usar no es un escenario compatible. Si edita un ajuste preestablecido de visualizador incorporado, se le pedirá que lo guarde con un nuevo nombre.
Para editar los ajustes preestablecidos del visor de Dynamic Media:
-
En la esquina superior izquierda de AEM, pulse el logotipo de AEM y, a continuación, en el carril izquierdo, pulse Herramientas > Assets > Ajustes preestablecidos de visor.
-
Seleccione un ajuste preestablecido marcando la casilla a la izquierda del título del ajuste preestablecido de visualizador.
-
En la barra de herramientas, pulse Editar.
-
En el Editar ajuste preestablecido de visualizador realice los cambios que desee en el ajuste preestablecido de visualizador.
-
Realice una de las siguientes acciones:
- Toque Guardar para guardar los cambios y volver a la Ajuste preestablecido de visor página.
- Toque Cancelar para anular los cambios realizados y volver a la Ajuste preestablecido de visor página.
Eliminación de ajustes preestablecidos de visualizador de Dynamic Media personalizados deleting-custom-viewer-presets
Puede eliminar los ajustes preestablecidos de visor que haya creado y agregado a Dynamic Media.
Para eliminar ajustes preestablecidos de visualizador de Dynamic Media personalizados:
- En la esquina superior izquierda de AEM, pulse el logotipo de AEM y, a continuación, en el carril izquierdo, pulse Herramientas > Assets > Ajustes preestablecidos de visor.
- En el Ajustes preestablecidos de visor página, marque una Título preestablecido y, a continuación, pulse el botón Papelera icono.
- Pulse Eliminar.
Aplicación de un ajuste preestablecido de visualizador de Dynamic Media a un recurso applying-a-viewer-preset-to-an-asset
Si ya ha publicado el recurso y el visualizador seleccionado, los botones URL e Incrustar aparecerán después de seleccionar un ajuste preestablecido de visualizador.
Aplicar un ajuste preestablecido de visualizador de Dynamic Media a un recurso:
-
Abra el recurso y, cerca de la esquina superior izquierda de la página, pulse el menú desplegable y, a continuación, seleccione Visualizadores.
note note NOTE Si ya ha publicado el recurso y el visualizador seleccionado, los botones URL e Incrustar aparecerán después de seleccionar un ajuste preestablecido de visualizador. -
Seleccione un ajuste preestablecido de visualizador en el panel izquierdo para aplicarlo al recurso.
Puede copiar la dirección URL para compartir con otros usuarios.
Entrega de recursos con ajustes preestablecidos del visor de Dynamic Media delivering-assets-with-viewer-presets
Para obtener las direcciones URL de los ajustes preestablecidos de visor, consulte Vinculación de URL a la aplicación web. Consulte también Incrustación del visualizador de vídeo en una página web.
Si utiliza AEM como WCM, puede añadir recursos utilizando los ajustes preestablecidos de visor directamente en la página. Consulte Adición de recursos de Dynamic Media a las páginas.