Show Menu
TEMAS×

Tutorial: Crear comunicación interactiva

Este tutorial es un paso en la serie Crear una primera comunicación interactiva. Se recomienda seguir la serie en secuencia cronológica para comprender, realizar y demostrar el caso de uso completo del tutorial.
Una vez que haya creado todos los componentes básicos, como modelo de datos de formulario, fragmentos de documento, plantillas y temáticas para la versión web, puede crear un inicio para crear una comunicación interactiva.
Interactive Communications puede entregarse a través de dos canales: Imprimir y Web. También puede crear una comunicación interactiva con el canal de impresión como maestro. La opción Imprimir como canal Web garantiza que el contenido, la herencia y el enlace de datos del canal Web se deriven del canal Imprimir. También garantiza que los cambios realizados en el canal Imprimir se sincronizan en el canal Web. Sin embargo, los autores de Comunicación interactiva pueden romper la herencia de componentes específicos en el canal web.
Este tutorial le guiará por los pasos para crear comunicaciones interactivas para canales de impresión y Web. Al final de este tutorial, podrá:
  • Crear comunicación interactiva para el canal de impresión
  • Crear comunicación interactiva para el canal web
  • Crear comunicaciones interactivas de impresión y Web con impresión como imagen principal

Crear comunicaciones interactivas para impresión y Web sin sincronización

Crear comunicación interactiva para canal de impresión

A continuación se muestra la lista de recursos que ya se han creado en este tutorial y que son necesarios al crear la comunicación interactiva para el canal de impresión:
Modelo de datos de formulario: FDM_Create_First_IC
Fragmentos de diseño: table_lf
Imágenes: PayNow y ValueAddedServices
  1. Inicie sesión en la instancia de creación de AEM y vaya a Adobe Experience Manager > Formularios > Formularios y Documentos .
  2. Toque Crear y seleccione Comunicación ​interactiva. Se muestra el asistente Crear comunicación interactiva.
  3. Especifique create_first_ic en el campo Título y Nombre . Seleccione FDM_Create_First_IC como modelo de datos de formulario y toque Siguiente .
  4. En el asistente de Canales :
    1. Especifique create_first_ic_print_template como plantilla de impresión y toque Seleccionar . Asegúrese de que la casilla de verificación Usar impresión como Canal principal no está seleccionada.
    2. Especifique la carpeta Create_First_IC_templates > Create_First_IC_Web_Template como plantilla Web y toque Seleccionar .
    3. Toque Crear .
    Se muestra un mensaje de confirmación de que la comunicación interactiva se ha creado correctamente.
  5. Toque Editar para abrir la comunicación interactiva en el panel derecho.
  6. Vaya a la ficha Recursos y aplique el filtro para mostrar solo los fragmentos de documento en el panel izquierdo.
  7. Arrastre y suelte los siguientes fragmentos de documento en sus áreas de destinatario en la Comunicación interactiva:
    Fragmento de documento
    Área de destino
    bill_details_first_ic
    Detalles de la factura
    customer_details_first_ic
    Detalles del cliente
    bill_summary_first_ic
    Resumen de factura
    summary_loads_first_interactive_Communication
    Cargos
  8. Toque destinatario Gráficos y toque + para agregar un componente Gráfico .
  9. Puntee en el componente Gráfico y seleccione (Configurar). Las propiedades del gráfico se muestran en el panel izquierdo:
    1. Especifique un nombre para el gráfico.
    2. Seleccione Circular en la lista desplegable Tipo de gráfico.
    3. Seleccione la propiedad calltype del tipo de objeto del modelo de datos de llamadas en la sección del eje ​X. Tocar .
    4. Seleccione Frecuencia en la lista desplegable Función .
    5. Seleccione la propiedad calltype del tipo de objeto del modelo de datos de llamadas en la sección eje ​Y. Tocar .
    6. Toque para guardar las propiedades del gráfico.
  10. Vaya a la ficha Recursos y aplique el filtro para mostrar solo los fragmentos de diseño en el panel izquierdo. Arrastre el fragmento de diseño table_lf y suéltelo en el área de destinatario Llamadas ​ordenadas.
  11. Seleccione el Campo de texto en la columna Fecha y toque (Configurar).
  12. Seleccione Objeto ​de modelo de datos en la lista desplegable Tipo de enlace y seleccione llamadas > fecha de llamada. Toque dos veces para guardar las propiedades.
    Del mismo modo, cree enlaces con llamada , número de llamada, duración de llamada y cargas de llamada para los campos de texto en las columnas Tiempo , Número, Duracióny Gastos.
  13. Toque Pagar ahora el área de destinatario y toque + para agregar un componente Imagen .
  14. Puntee en el componente Imagen y seleccione (Configurar). Las propiedades de imagen se muestran en el panel izquierdo:
    1. Especifique PayNow como nombre de la imagen en el campo Nombre .
    2. Toque Cargar , seleccione la imagen guardada en el sistema de archivos local y toque Abrir .
    3. Toque para guardar las propiedades de la imagen.
  15. Repita los pasos 13 y 14 para agregar la imagen ValueAddedServices al área de destinatario ValueAddedServices .

Create Interactive Communication for Web channel

A continuación se muestra la lista de recursos que ya se han creado en este tutorial y que son necesarios al crear la comunicación interactiva para el canal web:
Modelo de datos de formulario: FDM_Create_First_IC
Imágenes: PayNowWeb y ValueAddedServicesWeb
  1. Inicie sesión en la instancia de creación de AEM y vaya a Adobe Experience Manager > Formularios > Formularios y Documentos .
  2. Toque Crear y seleccione Comunicación ​interactiva. Se muestra el asistente Crear comunicación interactiva.
  3. Especifique create_first_ic en el campo Título y Nombre . Seleccione FDM_Create_First_IC como modelo de datos de formulario y toque Siguiente .
  4. En el asistente de Canales :
    1. Especifique create_first_ic_print_template como plantilla de impresión y toque Seleccionar . Asegúrese de que la casilla de verificación Usar impresión como Canal principal no está seleccionada.
    2. Especifique la carpeta Create_First_IC_templates > Create_First_IC_Web_Template como plantilla Web y toque Seleccionar .
    3. Toque Crear .
    Se muestra un mensaje de confirmación de que la comunicación interactiva se ha creado correctamente.
  5. Toque Editar para abrir la comunicación interactiva en el panel derecho.
  6. Toque la ficha Canales del panel izquierdo y toque Web .
  7. Vaya a la ficha Recursos y aplique el filtro para mostrar solo los fragmentos de documento en el panel izquierdo.
  8. Arrastre y suelte los siguientes fragmentos de documento en sus áreas de destinatario en la Comunicación interactiva:
    Fragmento de documento
    Área de destino
    bill_details_first_ic
    Detalles de la factura
    customer_details_first_ic
    Detalles del cliente
    bill_summary_first_ic
    Resumen de factura
    summary_loads_first_interactive_Communication
    Cargos
  9. Puntee en Resumen del área de destinatario Cargos y toque + para agregar un componente Gráfico .
  10. Puntee en el componente Gráfico y seleccione (Configurar). Las propiedades del gráfico se muestran en el panel izquierdo:
    1. Especifique un nombre para el gráfico.
    2. Seleccione Circular en la lista desplegable Tipo de gráfico.
    3. Seleccione la propiedad calltype del tipo de objeto del modelo de datos de llamadas en la sección del eje ​X. Tocar .
    4. Seleccione Frecuencia en la lista desplegable Función .
    5. Seleccione la propiedad calltype del tipo de objeto del modelo de datos de llamadas en la sección eje ​Y. Tocar .
    6. Toque para guardar las propiedades del gráfico.
  11. Seleccione la ficha Fuentes de datos en el panel izquierdo y arrastre y suelte el objeto del modelo de datos de llamadas en el área de destinatario Llamadas ​ordenadas. Todas las propiedades del objeto del modelo de datos de llamadas se muestran como columnas de tabla en el área de destinatario Llamadas ​por elemento del panel derecho.
    En función del caso de uso, se requieren las columnas Fecha de llamada, Hora de llamada, Número de llamada, Duración de llamada y Cargos de llamada en la tabla.
  12. Seleccione el encabezado de la columna de la tabla Móvil y seleccione Más opciones > Eliminar columna . Del mismo modo, elimine la columna Tipo de llamada.
  13. Seleccione el encabezado de la columna de la tabla Calldate y toque (Editar) para cambiar el nombre del texto a Fecha de llamada. Del mismo modo, cambie el nombre de otros encabezados de columna en la tabla.
  14. En función del caso de uso, inserte un botón Pagar ahora en la Comunicación interactiva que proporciona al usuario una opción para realizar el pago haciendo clic en el botón. Siga los pasos siguientes para insertar el botón:
    1. Puntee en el área de destinatario Pagar ahora y toque + para agregar un componente de texto .
    2. Toque el componente de texto y toque (Editar).
    3. Cambie el nombre del texto a Pagar ahora .
    4. Seleccione el texto y toque el icono Hipervínculo.
    5. Especifique la URL de pago en el campo Ruta .
    6. Seleccione Nueva ficha en la lista desplegable Destinatario .
    7. Toque para guardar las propiedades del hipervínculo.
  15. Seleccione Estilo en la lista desplegable situada junto a la opción Previsualización .
  16. Defina el estilo del texto del hipervínculo para que se muestre como un botón en la Comunicación interactiva siguiendo los pasos siguientes:
    1. Toque el componente de texto y seleccione (Editar).
    2. En la sección Borde , especifique 1,5 px como Ancho ​del borde, seleccione Sólido como Estilo ​del borde y especifique 46 pxcomo Radio del borde.
    3. Seleccione Rojo como color de fondo para el botón en la sección Fondo .
    4. En el campo Margen de la sección Dimensiones y posición , toque el icono Editar simultáneamente y defina el margen Derecho como 450 px . Los campos Superior, Inferior e Izquierda se definen como en blanco.
  17. Toque Pagar ahora área de destinatario y toque + para agregar un componente Imagen .
  18. Puntee en el componente Imagen y seleccione (Configurar). Las propiedades de imagen se muestran en el panel izquierdo:
    1. Especifique PayNow como nombre de la imagen en el campo Nombre .
    2. Toque Cargar , seleccione la imagen PayNowWeb guardada en el sistema de archivos local y toque Abrir .
    3. Toque para guardar las propiedades de la imagen.
  19. En función del caso de uso, inserte un botón Suscribirse en la Comunicación interactiva que ofrece al usuario la opción de suscribirse a los servicios de valor añadido haciendo clic en el botón.
    Repita los pasos 13 a 17 para agregar un botón Suscribirse al área de destinatario de servicios ​Valor Añadido y agregar la imagen ValueAddedServicesWeb .

Crear comunicaciones interactivas para impresión y Web con sincronización automática

También puede crear una comunicación interactiva habilitando la sincronización automática entre canales impresos y Web. Para habilitar la sincronización automática, seleccione la opción Imprimir como formato al crear la comunicación interactiva. Al seleccionar la opción Imprimir como formato, se garantiza que el contenido, la herencia y el enlace de datos del canal Web se deriven del canal Imprimir. También garantiza que los cambios realizados en el canal Imprimir se reflejen en el canal Web.
Ejecute los siguientes pasos para derivar el contenido del canal web mediante el canal de impresión:
  1. Inicie sesión en la instancia de creación de AEM y vaya a Adobe Experience Manager > Formularios > Formularios y Documentos .
  2. Toque Crear y seleccione Comunicación ​interactiva. Se muestra el asistente Crear comunicación interactiva.
  3. Especifique create_first_ic en el campo Título y Nombre . Seleccione FDM_Create_First_IC como modelo de datos de formulario y toque Siguiente .
  4. En el asistente de Canales :
    1. Especifique create_first_ic_print_template como plantilla de impresión y toque Seleccionar .
    2. Active la casilla de verificación Usar Imprimir como Canal principal para Web.
    3. Especifique la carpeta Create_First_IC_templates > Create_First_IC_Web_Template como plantilla Web y toque Seleccionar .
    4. Toque Crear .
    Se muestra un mensaje de confirmación de que la comunicación interactiva se ha creado correctamente.
  5. Toque Editar para abrir la comunicación interactiva en el panel derecho.
  6. Ejecute los pasos 6 a 15 de la sección Crear comunicación interactiva para el canal de impresión.
  7. Toque la ficha Canales del panel izquierdo y toque Web para generar automáticamente contenido para el canal web desde el canal Imprimir.
  8. Como la casilla de verificación Usar impresión como Canal principal para Web está seleccionada en el paso 4, el contenido y los enlaces se generan automáticamente para el canal Web desde el canal Imprimir.
    El contenido del canal de impresión se inserta debajo del contenido de la plantilla de canal web. Para modificar el contenido del canal web que se ha generado automáticamente desde el canal de impresión, puede cancelar la herencia de cualquier área de destinatario.
    Pase el ratón sobre el área de destinatario relevante en el canal web, seleccione (Cancelar herencia) y, a continuación, en el cuadro de diálogo Cancelar herencia , toque .
    Si ha cancelado la herencia de un componente, puede volver a activarlo. Para volver a habilitar la herencia, pase el ratón sobre el límite del área de destinatario correspondiente, que incluye el componente, y toque .
  9. Seleccione la ficha Contenido en el panel izquierdo.
  10. Arrastre y suelte el contenido del canal web generado automáticamente en los paneles existentes de la plantilla web mediante el árbol de contenido. A continuación se muestra la lista de los componentes que deben reorganizarse:
    • Componente Detalles de la factura al panel Detalles de la factura
    • Componente Detalles del cliente al panel Detalles del cliente
    • Componente Resumen de Facturación al panel Resumen de Facturación
    • Resumen del componente Cargos al panel Resumen de Cargos
    • Fragmento de diseño (tabla) al panel Llamadas por elemento
  11. Repita los pasos 13 a 18 de Crear comunicación interactiva para canal web para insertar los hipervínculos Pagar ahora y Suscribirse en el canal web de la comunicación interactiva.