Creación de pancartas y pancartas dinámicas para las páginas de navegación

Una pancarta es un elemento que aparece en las páginas de navegación de una colección. Existen dos tipos de pancartas:

Pancartas básicas: son imágenes que aparecen en la página de navegación. Al tocar una pancarta, puede que se produzca una acción o que no ocurra nada. Por ejemplo, al tocar una pancarta se puede abrir una página web o un vínculo a otro artículo o colección, o bien enviar un correo electrónico, un mensaje de texto o una llamada de teléfono. Las pancartas también son útiles para mostrar la marca o para actuar como separador visual en una página de navegación.

Pancartas dinámicas: muestran contenido HTML en las páginas de navegación. Por ejemplo, las pancartas dinámicas pueden mostrar valores de bolsa, carruseles de proyección de diapositivas o fuentes de medios sociales. Al aprovechar los complementos de Cordova, se puede sacar partido de las funciones específicas de AEM Mobile, como permitir a los usuarios tocar una diapositiva de una pancarta para acceder a un artículo o mostrar el mensaje de inicio de sesión con asignación de derechos.  

Pancartas básicas

La apariencia de la pancarta está determinada por la tarjeta a la que se ha asignado. La imagen de la pancarta se centra, ajusta y recorta según sea necesario para completar el área de la tarjeta a la que está asignada. Cree una imagen de la pancarta que sea lo suficientemente grande como para mostrarse correctamente dentro de la tarjeta. Consulte Optimización del contenido de aplicaciones de AEM Mobile.

  1. En Contenido y diseños, haga clic en Contenido y, a continuación, en Añadir > Añadir pancarta.

  2. Especifique un nombre de la pancarta exclusivo para el proyecto.

  3. Especifique los metadatos de la pancarta. 

    Es posible que desee añadir metadatos para distinguir la pancarta del resto de los contenidos cuando utilice reglas de asignación para asignar contenido a las tarjetas.

  4. Indique qué ocurre al tocar la pancarta.

    Seleccione Ninguno si no debe suceder nada cuando el usuario toca la pancarta.

    Si desea que la pancarta ejecute una acción, elija una de las siguientes opciones:

    http:// – Abre la página web específica (http: o https:) en un navegador dentro de la aplicación cuando el usuario toca la pancarta.

    Por ejemplo: http://www.adobe.com/es

    navto:// – Salta al artículo o colección específico. Tenga en cuenta que los vínculos a los números de página de un artículo no son compatibles. Para obtener más información acerca de los formatos navto, consulte Hipervínculos en artículos de AEM Mobile.

    Ejemplo: navto://collection/coffeeProducts

    mailto: – Utiliza la aplicación de correo electrónico predeterminada del dispositivo para enviar un mensaje de correo electrónico.

    Ejemplo sencillo: mailto:jane@example.com

    Ejemplo detallado: mailto:jane@example.com?cc=maria@example.com&subject=Thanks%20Again&body=Thank%20you%20for%20your%20support.%0D%0A%0D%0ANew%20line.

    sms: – Utiliza la aplicación de mensajes del dispositivo para enviar un mensaje de texto.

    Ejemplo sencillo: sms:1-206-555-2323

    Ejemplo detallado (iOS): sms:+1206-555-2323&body=Text%20message

    Ejemplo detallado (Android): sms:+1206555-2323?body=Text%20message

    tel: – Utiliza la aplicación móvil del dispositivo para realizar una llamada de teléfono.

    Ejemplo: tel:1-206-555-2323

    Vaya a la colección principal – Lleva al primer artículo o colección de la colección de nivel superior.

    Desplazarse hacia atrás – Lleva a la página de navegación o artículo anteriores en los que el usuario tocó o en los que hizo clic para acceder a la página de navegación actual (las acciones de deslizamiento en dispositivos móviles no se incluyen en la navegación hacia atrás).

    Las acciones mailto, sms y tel solo se admiten en dispositivos móviles. No tienen ningún efecto en el visor web de escritorio.

  5. Utilice la pestaña Imágenes para cargar la imagen de la pancarta.

    Si no desea utilizar una imagen para su pancarta (por ejemplo, si desea mostrar únicamente el título de la pancarta o un color), puede cargar un archivo de imagen y, a continuación, crear una tarjeta que no muestre la imagen.

  6. Añada la pancarta a una colección. Asegúrese de que está colocada de forma adecuada dentro de la colección (por ejemplo, en la parte superior) de forma que aparezca en la ubicación correcta de la página de búsqueda.

  7. Si es necesario, edite una plantilla de diseño para incluir la tarjeta que mostrará la pancarta.

    Por ejemplo, puede crear una tarjeta que abarque toda la anchura del dispositivo; asimismo, puede crear una regla que asigne la tarjeta a cualquier pancarta. Consulte Creación de tarjetas y diseños.

Pancartas dinámicas

Las pancartas dinámicas muestran el contenido HTML en páginas de navegación.

  • Si utiliza distintas pancartas dinámicas en la página de navegación, pruebe cómo es la experiencia en los dispositivos de destino para asegurarse de que el rendimiento es fiable. Si la página de navegación tarda demasiado en cargar o si se producen otros problemas, considere la posibilidad de utilizar menos pancartas dinámicas en la página de navegación.
  • El uso de imágenes en miniatura para las pancartas es opcional. Las imágenes pueden ser útiles si el usuario no está conectado o para que aparezcan detrás del contenido HTML transparente.
  • En caso de usar los complementos de Cordova en la pancarta dinámica, asegúrese de que selecciona Activar las características de extensibilidad en las propiedades de la pancarta dinámica.
  • Al hacer referencia a contenido externo en los archivos HTML, le recomendamos utilizar el protocolo HTTPS en lugar del HTTP. El visor web de escritorio requiere protocolos HTTPS.
  • Puede usar el elemento de <video playsinline autoplay> para realizar una reproducción automática del vídeo en la pancarta dinámica. Si el vídeo se reproduce automáticamente antes de que la pancarta se visualice, plantéese usar JavaScript, que reproduce el vídeo en el evento window.onAppear y pausa el vídeo en el evento window.onDisappear.

 

Vídeo sobre las pancartas dinámicas

Vídeo sobre las pancartas dinámicas

Pancarta de asignación de derechos de ejemplo

Utilice este contenido HTML para crear una pancarta dinámica de asignación de derechos. Si el usuario no ha iniciado sesión, aparecerá un mensaje de inicio de sesión en la pancarta. Si el usuario ha iniciado sesión, aparecerá el botón Cerrar sesión en la pancarta. Cuando cree una pancarta dinámica, asegúrese de seleccionar la opción Activar las características de extensibilidad para activar los complementos de Cordova.

Descargar

Creación de pancartas dinámicas

  1. Cree su contenido HTML y genere un archivo de artículo.

  2. En Contenido y diseños, haga clic en Contenido y, a continuación, en Añadir > Añadir pancarta dinámica.

  3. Especifique un nombre de la pancarta exclusivo para el proyecto.

  4. Especifique los metadatos de la pancarta. 

    Es posible que desee añadir metadatos para distinguir la pancarta del resto de los contenidos cuando utilice reglas de asignación para asignar contenido a las tarjetas.

    Nota:

    Si su contenido HTML incluye referencias a los complementos de Cordova, asegúrese de seleccionar Activar las características de extensibilidad.

  5. Utilice la pestaña Imágenes para cargar la imagen de la pancarta.

    El uso de una imagen de pancarta es opcional. Una imagen de pancarta puede resultar útil si el dispositivo no está conectado o como fondo para el contenido HTML transparente.

  6. Utilice la pestaña Archivo de contenido para cargar el archivo del artículo con el contenido HTML.

  7. Si la pancarta dinámica es un anuncio, utilice la pestaña Anuncio para especificar la información de los datos de análisis.

  8. Añada la pancarta a una colección. Asegúrese de que está colocada de forma adecuada dentro de la colección (por ejemplo, en la parte superior) de forma que aparezca en la ubicación correcta de la página de búsqueda.

  9. Si es necesario, edite una plantilla de diseño para incluir la tarjeta que mostrará la pancarta.

    Por ejemplo, puede crear una tarjeta que abarque toda la anchura del dispositivo; asimismo, puede crear una regla que asigne la tarjeta a cualquier pancarta. Consulte Creación de tarjetas y diseños.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea