Capturando una demo interactiva en el editor avanzado WYSIWYG

La función de demostración interactiva permite a los usuarios interactuar con una simulación de producto o una guía en lugar de ver un vídeo estático o leer instrucciones en texto. Ofrece una experiencia práctica donde los usuarios pueden hacer clic, teclear, pasar el cursor y explorar la interfaz en un entorno guiado.

Document360 ofrece demostraciones interactivas integradas y opciones de formato. Puedes capturar tu pantalla, hacer clics con el ratón y mejorar la demo interactiva directamente dentro de tus artículos sin necesidad de herramientas externas.

Por ejemplo, si estás escribiendo un artículo práctico sobre cómo configurar roles de usuario, puedes grabar una demo interactiva que muestre cada paso en acción. Esto ayuda a los lectores a seguir el proceso visualmente y a entender el proceso sin tener que adivinar o depender solo de instrucciones por texto.

NOTA

La función de demostración interactiva está disponible solo para KB Site 2.0.

Acceso a la demo interactiva

Para acceder a la demo interactiva,

1. Navega al artículo deseado en el editor avanzado WYSIWYG.

2. Escribe el comando /Interactive demo Barras y pulsa Enter.

3. Si la extensión demo Document360 Interactive no está instalada, haz clic en Instalar.

   NOTA

   Esta extensión actualmente solo es compatible con el navegador Chrome .

4. En la tienda web de Chrome, haz clic en Añadir a Chrome.

5. Una vez instalado, vuelve al portal de la Base de Conocimiento.

Grabación de la pantalla

      Aparecerá el diálogo de demostración interactiva .

6. En el menú desplegable de audio, selecciona la opción deseada o selecciona No grabar audio sin sonido.

7. Haz clic en Siguiente.

8. Selecciona la pantalla para capturar:

   • Pestaña Chrome: Solo registra la pestaña Chrome seleccionada.

   • Ventana: Solo registra la ventana de aplicación seleccionada.

9. Haz clic en compartir.

   La pantalla seleccionada aparecerá junto con el panel de grabación de pantalla .

10. Elige la resolución recomendada (16:9 o 4:3).

11. Haz clic en Iniciar captura para comenzar la grabación.

12. Haz clic en Desechar para cancelar y volver a la pantalla anterior.

13. En la sección de Desenfoque seleccionado , haz clic en Añadir para ocultar áreas específicas de la pantalla al grabar información sensible.

14. Si es necesario, activa los controles de grabación del Show en el interruptor en pantalla .

    Aparecerá un logo de Document360 en la esquina inferior izquierda de la pantalla de grabación. Al hacer clic en el logo, la grabación se pausa. Este logotipo también será visible en la demo interactiva grabada.

15. Se capturarán clics e interacciones del ratón, y se mostrarán indicadores de clic para facilitar la edición de la guía.

16. Haz clic en Pausa para pausar la grabación y en Grabar para reanudar.

17. Para detener la grabación, haz clic en Detener compartir en el panel flotante o Detener la grabación en el panel de grabación de pantalla .

    Tras grabar, el sistema importará la demo interactiva al artículo. Esto puede llevar unos momentos.

Adición de elementos interactivos

Una vez procesada, la demo interactiva grabada aparece en el panel editor de demos interactivas .

1. Haz clic en el icono de Reproducir () para previsualizar la demo interactiva grabada.

   El editor interactivo de demostraciones proporciona herramientas de formato, incluyendo:

Añadir elementos

a. Llamada a la acción: Para añadir un botón interactivo en la demo

1. En el panel derecho, haz clic en Llamada a la acción.

2. Introduce el título y la descripción.

   NOTA

   En el campo Descripción, selecciona el contenido y puedes usar las herramientas básicas de formato como Negrita (), Cursiva (), Subrayado (), Lista ordenada (), Lista no ordenada () y Hipervínculo ().

3. En la sección Ramas , introduce el nombre del botón y selecciona la acción deseada:

   1. URL externa: Introduce el enlace de destino.

   2. Siguiente paso: Muestra un mensaje o información para el usuario.

4. Haz clic en Añadir nuevo para incluir otro botón.

5. Elige la posición deseada del botón en la sección de Posición .

6. Activa el interruptor de voz en off de IA para añadir narración:

   1. Selecciona una voz en el desplegable.

   2. Aquí entra el guion de narración.

   3. Haz clic en el icono de Reproducir () para previsualizar.

7. Haz clic en Aplicar.

b. Puntos calientes

Los puntos de acceso pueden usarse para mostrar el efecto de clic del ratón en la demo interactiva.

1. Ve a la duración exacta del vídeo y haz clic en Hotspot para añadir.

   En el cuadro de diálogo de Puntos calientes , revisa la lista de puntos calientes existentes (si los hay).

2. Navega hasta la ubicación deseada en el vídeo y haz clic en Añadir nuevo para añadir un punto de interés a la línea de tiempo.

3. Puedes arrastrar el punto caliente a la posición deseada.

4. Activa el interruptor de Mostrar punto de acceso para mostrar el punto de activación.

5. En el campo Tiempo , introduce el tiempo deseado. Utiliza la opción Ajuste fino de milisegundos () para ajustes precisos.

6. Introduce un título en el campo Título .

7. Introduce la descripción en el campo Descripción .

   NOTA

   En el campo Descripción , selecciona el contenido y puedes usar las herramientas básicas de formato como Negrita (), Cursiva (), Subrayado (), Lista ordenada (), Lista no ordenada () y Hipervínculo ().

8. En la configuración de Burbujas, ajusta la posición del punto caliente eligiendo el punto exacto de la cuadrícula entre las opciones dadas.

9. En la sección de efectos , activa el interruptor Activar zoom si es necesario.

10. Para añadir narración de voz, activa el interruptor de voz de la IA .

    1. Selecciona la voz deseada e introduce el contenido en el campo de texto.

    2. Haz clic en el botón Reproducir () junto al contenido para previsualizarlo en la voz seleccionada.

11. Haz clic en Aplicar para guardar los cambios.

    

12. El texto se añadirá a la lista. Pasa el cursor sobre cualquier texto para:

    • Haz clic en el icono Editar () para modificar.

    • Haz clic en el icono de Más () y selecciona Borrar para eliminar.

    

c. Desenfoque:

Para ocultar información sensible en la demo interactiva:

1. En el panel derecho, haz clic en Desenfoque.

2. Si antes no se han añadido desenfoques, haz clic en Añadir para añadir un nuevo desenfoque.

   Si ya hay muchos desenfoques, haz clic en Añadir nuevos para añadir nuevos desenfoques.

3. Haz clic en Añadir nuevo para añadir una zona de desenfoque.

4. Asegúrate de activar el interruptor de mostrar desenfoque .

5. Introduce un nombre para el desenfoque.

6. Selecciona la hora de inicio y la hora de fin para el desenfoque. Utiliza la opción Ajuste fino de milisegundos () para ajustes precisos.

     NOTE

   Puedes usar el control deslizante del vídeo para ajustar la hora de inicio y fin del vídeo. Y puedes redimensionar la dimensión de desenfoque arrastrando los bordes en el vídeo interactivo.

7. Elige una forma: Círculo o Rectángulo.

8. Ajusta el control deslizante de Intensidad para modificar la opacidad.

9. Haz clic en Aplicar para guardar los cambios.

   

   El desenfoque se añadirá a la lista.

10. Pasa el cursor sobre cualquier elemento de desenfoque, haz clic en el icono Más () y selecciona Eliminar para eliminar.

d. Imagen

Aparece la lista de imágenes existentes.

1. Si no se han añadido imágenes antes, haz clic en Añadir para añadir una nueva imagen.

   Si ya hay muchas imágenes, haz clic en Añadir nuevas para añadir nuevas imágenes.

2. En el campo Tiempo , introduce el tiempo deseado. Utiliza la opción Ajuste fino de milisegundos () para ajustes precisos.

3. Haz clic en Imagen para importar imágenes y emojis predefinidos categorizados por nombre.

   Para aplicar tu propia imagen, haz clic en el icono e importa la imagen deseada desde tu explorador de archivos local.

4. Una vez subida, esta imagen se colocará encima del vídeo grabado.

   Puedes realizar las siguientes acciones en la imagen subida:

5. Tiempo: En el campo Tiempo , actualiza el tiempo deseado. Utiliza el icono de Ajuste fino de milisegundos () para ajustes precisos.

6. Cambiar imagen: Haz clic en Reemplazar imagen para reemplazar la imagen subida. Los formatos compatibles son JPG o PNG.

7. Tamaño y posición: Selecciona Libre Forma para ajustar la posición de la imagen usando el arrastre del ratón.

   1. En el campo de grado , introduce el valor deseado para rotar la imagen.

   2. Usa los iconos de Rotar a la izquierda o Girar a la derecha .

   O bien, selecciona Ajustar a la pantalla para ajustar la imagen al tamaño de pantalla.

8. En la sección de Comportamiento , puedes seleccionar:

   1. Quédate por: Conserva la imagen durante un tiempo determinado. Introduce el número de segundos en el campo de Sec .

   2. Botón Siguiente: Mantén la imagen visible hasta que se pulse el botón Siguiente .

   3. CTA: Enlace a un llamado a la acción.

9. En la sección de Voz en off :

   1. Activa el interruptor de Voz en off .

   2. Selecciona la voz deseada en el desplegable (según tu acento preferido).

   3. En el campo Contenido , introduce el texto de voz en off deseado.

   4. Haz clic en el icono de Reproducir () para previsualizar el contenido con la voz seleccionada.

10. Haz clic en Aplicar para guardar los cambios.

    

    La imagen se añadirá a la lista.

11. Pasa el cursor sobre cualquier elemento de la imagen, haz clic en el icono Más () y selecciona Borrar para eliminar.

    

e. Destacado: Destacar áreas importantes en la demo interactiva

1. En el panel derecho, haz clic en Destacado.

2. Haz clic en Añadir para crear un destacado.

3. Introduce un Nombre para el centro de atención.

4. Selecciona la hora de inicio y la hora de fin. Utiliza la opción Ajuste fino de milisegundos () para ajustes precisos.

5. Elige una forma: círculo o rectángulo.

6. Haz clic en Aplicar para guardar los cambios.

   

f. Cámara

Mientras editas, puedes grabar un vídeo desde tu cámara y añadirlo a tu demo interactiva.

1. Haz clic en cámara.

   El panel de Grabación aparece con una lista de vídeos pregrabados (si los hay).

2. Haz clic en Crear.

   • Si antes no se han añadido vídeos, haz clic en Crear.

   • Si ya hay muchos vídeos, haz clic en Añadir nuevo para añadir otro.

3. En el panel Añadir nueva grabación , elige uno de los siguientes:

   • Grabar nuevo: Graba un vídeo directamente usando tu cámara.

   • Seleccionar vídeo: Sube un vídeo ya grabado.

4. En el campo Tiempo , introduce el tiempo deseado. Utiliza la opción Ajuste fino de milisegundos () para ajustes precisos.

5. Selecciona la cámara y el micrófono deseados, luego haz clic en Iniciar grabación.

6. Tras la cuenta atrás de 3 segundos, comienza la grabación.

   1. Usa Pause y Recurre según sea necesario.

   2. Haz clic en el icono de Recuperar para empezar de nuevo.

   3. Haz clic en Descartar para borrar la grabación actual.

   4. Haz clic en Detener para terminar la grabación.

7. Después de parar, haz clic en Guardar y continuar. El sistema procesará y añadirá el vídeo a la demo.

8. Si es necesario, haz clic en Grabar de nuevo para crear una nueva grabación.

9. El vídeo grabado se superpondrá sobre la demo interactiva. Desde el panel derecho, puedes:

   • Haz clic en Reemplazar vídeo para cambiar el original.

   • Haz clic en el icono de Reproducir () para previsualizar.

   • Haz clic en Grabar nuevo para capturar un vídeo fresco.

10. En la sección de Forma , elige una forma de pantalla: Círculo, Cuadrado, Ancho o Retrato.

11. En la sección de Posición , selecciona dónde debe aparecer el vídeo en la demo.

12. Activa el interruptor de Subtítulos para generar subtítulos automáticamente si se detecta voz.

13. Haz clic en Aplicar para guardar los cambios.

14. Todos los vídeos grabados están listados en el panel. Para eliminar uno, pasa el cursor sobre él, haz clic en el icono de Más () y selecciona Eliminar.

  NOTE

No puedes crear dos vídeos grabados con la misma marca de tiempo.

g. Texto

Puedes añadir superposiciones de texto a tu demo interactiva.

1. Haz clic en Texto.

   • Si antes no se han añadido mensajes, haz clic en Añadir.

   • Si ya existen textos, haz clic en Añadir nuevo.

2. En el campo Tiempo , establece cuándo debe aparecer el texto. Utiliza la opción Ajuste fino de milisegundos () para ajustes precisos.

3. Introduce el texto deseado en el campo Texto .

4. Elige la fuente y el tamaño de la fuente.

5. Selecciona un color de texto de la paleta o introduce un código hexadecimal.

6. En el campo Grado , introduce un valor para rotar la posición del texto.

7. En la sección de Comportamiento , elige uno:

   • Quédate: Introduce el número de segundos en que el texto permanece visible.

   • Mostrar hasta que: Introduce el tiempo hasta el cual el texto permanece visible.

8. Si seleccionaste Quedarte para, puedes activar la voz en off de IA:

   1. Activa el interruptor de voz en off de IA .

   2. Selecciona una voz en el desplegable.

   3. Aquí entra el contenido de locución.

   4. Haz clic en reproducir para ver la vista previa.

9. Haz clic en Aplicar para guardar.

El texto se añadirá a la lista. Pasa el cursor sobre cualquier texto para:

• Haz clic en el icono Editar () para modificar.

• Haz clic en el icono Más () y selecciona Borrar para eliminar.

h. Aspectos destacados

Puedes usar los resaltos para llamar la atención sobre elementos específicos de la demo.

1. Haz clic en Resaltar.

   • Si no hay resaltos, haz clic en Añadir.

   • Si ya existen los resaltos, haz clic en Añadir nuevo.

2. En el campo Nombre , introduce un nombre. Esto no aparecerá en la demo.

3. Selecciona la hora de inicio y la hora de fin para el momento destacado. Utiliza la opción Ajuste fino de milisegundos () para ajustes precisos.

4. En el desplegable Forma , elige Rectángulo o Círculo.

5. En la sección de Color , selecciona un color de resalto.

6. Haz clic en Aplicar para guardar.

   

   El destacado se añadirá a la lista. Para eliminar un resaltado, pasa el cursor sobre él, haz clic en el icono Más y selecciona Eliminar.

   

Edición

i. Cultivo

Para recortar cualquier parte del vídeo:

1. En el panel derecho, haz clic en recortar.

2. Selecciona una relación de aspecto: Original, Personalizado, Cuadrado, Horizontal o Retrato.

3. Puedes ver la salida de recorte (ancho y alto) según la proporción seleccionada.

4. Haz clic en el icono Borrar () para eliminar el recorte aplicado.

5. Haz clic en Aplicar para guardar los cambios.

   Una vez recortada, solo la parte recortada será visible cuando se guarde el vídeo.

j. Acabados:

Para recortar cualquier parte del vídeo:

1. En el panel derecho, haz clic en Recorte.

2. Haz clic en Añadir ahora para añadir un nuevo acabado a la demo interactiva.

   Si ya existen acabados, haz clic en Añadir nuevo para añadir otro acabado.

3. Establece los tiempos de De y To .

   Haz clic en Aplicar y haz clic en Listo.

k. Música:

Para añadir música a la demo interactiva

1. Activa el interruptor Activar música de fondo para añadir música de fondo a la demo interactiva.

2. Haz clic en Elegir entre Galary para subir un archivo.

   NOTA

   Formatos de audio compatibles: .mp3, .aac (tamaño máximo de archivo: 5 MB).

3. En la pestaña de Presets , puedes usar opciones de música preinstaladas.

4. Selecciona cualquier música y haz clic en Insertar.

5. Una vez subido, haz clic en Reemplazar audio para cambiar la pista seleccionada.

6. Ajusta el control deslizante de volumen para controlar el volumen.

7. La opción Fade In/Fade Out hace que la música empiece y termine suavemente durante estas interacciones.

8. Activa la opción de Pausa en Interacción si es necesario. Cuando el usuario añade música de fondo, la opción Pausar la interacción pausará temporalmente la música añadida cada vez que el usuario haga clic en puntos de acceso o interactúe con el vídeo.

9. Una vez terminado, haz clic en Aplicar.

   

Voz

Puedes elegir cómo se narra la demo interactiva:

12. Voz original: Utiliza la voz de fondo original.

13. Voz con IA: Permite locuciones generadas por IA en varios idiomas.  

    Voz en off de IA: Para seleccionar la voz en off de IA deseada entre varios idiomas. El guion de vídeo se renderizará en la sección de Guion .

14. Sin voz: No se aplicará voz en off.

15. Subtítulos: Haz clic en Subtítulos para añadir subtítulos a la demo interactiva. Si el vídeo tiene voz en off, los subtítulos generados automáticamente aparecerán aquí y podrás editarlos según lo necesites.

    Alternativamente, puedes introducir manualmente tu guion de voz en off. Activa la casilla de Mostrar subtítulos para mostrar subtítulos en la demo interactiva.

16. Elementos añadidos: Puedes ver los elementos añadidos en la demo de Interactide. Desde aquí, haz clic en el icono Editar () para editar el elemento deseado. Haz clic en el icono Borrar () junto a los elementos para eliminar.

17. Haz clic en Cerrar para guardar los cambios.

    

Edición de la demo interactiva grabada

Una vez añadida la demo interactiva a un artículo, puedes aplicar las siguientes opciones de formato:

1. Alinear a la izquierda: Alinea la demo interactiva a la izquierda.

2. Centro: Alinea la demo interactiva con el centro.

3. Alinear a la derecha: Alinea la demo interactiva hacia la derecha.

4. Inline left: Coloca la demo interactiva en línea a la izquierda.

5. Bloque en línea: Muestra la demo interactiva como un elemento de bloque en línea.

6. En línea derecha: Coloca la demo interactiva en línea a la derecha.

7. Redimensionar: Ajusta las dimensiones interactivas de la demostración.

8. Copiar: Copia la demo interactiva al portapapeles para reutilizarla en otro artículo o categoría dentro del mismo proyecto.  

9. Edición: Permite modificaciones adicionales, incluyendo:

   • Añadir elementos: Desenfoque y Foco

   • Edición: Recorte, recorte y música

   • Voz: Voz original, voz de IA y Sin voz