Criar banners e banners dinâmicos

Pesquisar
Experience Manager Mobile Guia do Usuário

Nesta página

Aplica-se a: Experience Manager Mobile

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Criar banners e banners dinâmicos para páginas de navegação

Um banner é um item que aparece na página de navegação de uma coleção. Há dois tipos de banners:

Banner básicos – um banner básico é uma imagem que aparece na página de navegação. Tocar em um banner pode desencadear uma ação ou não fazer nada. Por exemplo, tocar em um banner pode abrir uma página da Web, vincular para outro artigo ou coleção, enviar um email ou uma mensagem de texto ou fazer uma chamada telefônica. Os banners também são úteis para exibir anúncios ou fornecer um divisor visual em uma página de navegação.

Banners dinâmicos – um banner dinâmico exibe conteúdo HTML em uma página de navegação. Por exemplo, os banners dinâmicos podem exibir cotações de ações, apresentações de slides do tipo carrossel ou feeds de redes sociais. Com os plug-ins do Cordova, você aproveita recursos específicos do AEM Mobile, como permitir que os usuários toquem em um slide em um banner para navegar para um artigo ou exibir o prompt de logon de direito.  

Banners básicos

A aparência do banner é determinada pelo cartão ao qual está atribuído. A imagem do banner é centralizada, dimensionada e cortada conforme necessário para se ajustar à área do cartão em que ela está vinculada. Crie uma imagem de banner grande o bastante para ser exibida adequadamente dentro do cartão. Consulte Otimizar conteúdo para o AEM Mobile.

  1. Em Conteúdo e layouts, clique em Conteúdo e clique em Adicionar > Adicionar banner.

  2. Especifique o nome do banner que será exclusivo para o projeto.

  3. Especifique os metadados para o banner.

    Provavelmente, você vai querer adicionar metadados para diferenciar o banner de outro conteúdo ao usar as regras de mapeamento para vincular conteúdo a cartões.

  4. Indique o que acontece quando o banner é tocado.

    Selecione Nenhum se o banner não faz nada quando o usuário o toca.

    Se você quiser que o banner execute uma ação, escolha uma das seguintes opções:

    http:// – abre a página da Web específica (http: ou https:) em um navegador do aplicativo quando o usuário toca o banner.

    Exemplo: http://www.adobe.com/br

    navto:// – vai para o artigo ou a coleção especificada. Observe que não há suporte a links para números de página em um artigo. Para obter informações sobre formatos navto, consulte Hiperlinks em artigos do AEM Mobile.

    Exemplo: navto://collection/coffeeProducts

    mailto: – usa o aplicativo de email padrão do dispositivo para enviar uma mensagem de email.

    Exemplo simples: mailto:jane@example.com

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

    sms: – usa o aplicativo de mensagens do dispositivo para enviar uma mensagem de texto.

    Exemplo simples: sms:1-206-555-2323

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

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

    tel: – usa o aplicativo de telefone do dispositivo para fazer uma chamada telefônica.

    Exemplo: tel:1-206-555-2323

    Navegar para coleção de início – retorna ao primeiro artigo ou à primeira coleção na coleção de nível superior.

    Voltar – retorna à página ou ao artigo anterior do navegador nos quais o usuário tocou ou clicou para navegar até a página de navegação atual. (Gestos de deslizamento em dispositivos móveis não estão incluídos na navegação de retorno.)

    Ações de mailto, sms e tel são compatíveis apenas com dispositivos móveis. Elas não têm efeito no visualizador da Web para desktop.

  5. Use a guia Imagens para fazer upload da imagem do banner.

    Se não quiser usar uma imagem para seu banner (por exemplo, se quiser exibir somente o título do banner ou uma cor), você pode fazer upload de qualquer arquivo de imagem e criar um cartão que não exibe a imagem.

  6. Adicione o banner a uma coleção. Certifique-se de que ele está posicionado adequadamente dentro da coleção (por exemplo, na parte superior) para que apareça no local adequado na página de navegação.

  7. Se necessário, edite um modelo de layout para incluir um cartão que exiba o banner.

    Por exemplo, é possível criar um cartão que inclua a largura do dispositivo, bem como uma regra que vincule o cartão a qualquer banner. Consulte Criar cartões e layouts.

Banners dinâmicos

Os banners dinâmicos exibem conteúdo HTML em páginas de navegação.

  • Se você usar vários banners dinâmicos em uma página de navegação, teste a experiência em seus dispositivos de destino para ter certeza de que o desempenho é confiável. Se a página de navegação demorar muito para carregar ou se você encontrar outros problemas, use menos banners dinâmicos na página de navegação.
  • Usar imagens em miniatura para os banners é opcional. As imagens podem ser úteis se o usuário estiver offline ou para aparecerem atrás de conteúdo HTML transparente.
  • Se você usar plug-ins do Cordova no banner dinâmico, selecione Ativar recursos de extensibilidade nas propriedades do banner dinâmico.
  • Ao referenciar conteúdo externo em seus arquivos HTML, recomendamos que use o protocolo HTTPS em vez de HTTP. O visualizador da Web para desktop requer protocolos HTTPS.
  • Você pode utilizar o elemento de <reprodução automática de vídeo playsinline> para reproduzir um vídeo automaticamente no banner dinâmico. Se o vídeo começar a reprodução automática antes de o banner poder ser visualizado, considere utilizar um JavaScript que reproduza o vídeo no evento window.onAppear e pause o vídeo no evento window.onDisappear.

 

Vídeo sobre banners dinâmicos

Vídeo sobre banners dinâmicos

Exemplo de banner de direito

Use esse conteúdo HTML para criar um banner dinâmico de direito. Se o usuário não estiver conectado, será exibido um prompt de logon no banner. Se o usuário estiver conectado, o botão Fazer logoff será exibido no banner. Ao criar o banner dinâmico, selecione Ativar recursos de extensibilidade para ativar plug-ins do Cordova.

Download

Obter arquivo
Amostra de banner de direito

Criar banners dinâmicos

  1. Crie conteúdo HTML e gere um arquivo de artigo.

    Consulte Criar artigo HTML para o AEM Mobile.

  2. Em Conteúdo e layouts, clique em Conteúdo e clique em Adicionar > Adicionar banner dinâmico.

  3. Especifique o nome do banner que será exclusivo para o projeto.

  4. Especifique os metadados para o banner.

    Provavelmente, você vai querer adicionar metadados para diferenciar o banner de outro conteúdo ao usar as regras de mapeamento para vincular conteúdo a cartões.

    Observação:

    Se o conteúdo HTML incluir referências aos plug-ins do Cordova, selecione Ativar recursos de extensibilidade.

  5. Use a guia Imagens para fazer upload da imagem do banner.

    Usar uma imagem de banner é opcional. Uma imagem de banner pode ser útil se o dispositivo estiver offline ou como plano de fundo para conteúdo HTML transparente.

  6. Use a guia Arquivo de conteúdo para fazer upload do arquivo de artigo com o conteúdo HTML.

  7. Se o banner dinâmico for um anúncio, use a guia Anúncio para especificar informações para dados de análise.

  8. Adicione o banner a uma coleção. Certifique-se de que ele está posicionado adequadamente dentro da coleção (por exemplo, na parte superior) para que apareça no local adequado na página de navegação.

  9. Se necessário, edite um modelo de layout para incluir um cartão que exiba o banner.

    Por exemplo, é possível criar um cartão que inclua a largura do dispositivo, bem como uma regra que vincule o cartão a qualquer banner. Consulte Criar cartões e layouts.