Altere as configurações de cores e fontes em aplicativos AEM Mobile.

Personalize seus aplicativos fazendo upload de fontes para uso em cartões de página de navegação, exibições do aplicativo e artigos HTML. Você também pode alterar as cores usadas em diferentes exibições do aplicativo, como o menu do aplicativo, as barras de navegação e os prompts de logon.

 

Usar fontes personalizadas

Você pode usar a seção Fontes e personalização do aplicativo do portal para fazer upload de fontes personalizadas para uso em cartões de layout, artigos HTML e exibições do aplicativo, como o menu do aplicativo.

Para referenciar fontes em artigos HTML. Consulte Criar artigos HTML para o AEM Mobile: Usar fontes compartilhadas.

  1. No portal, clique em Conteúdo e layouts e clique em Fontes e personalização do aplicativo. Selecione a guia Fontes.

    customize_fonts_main
  2. Para adicionar fontes individualmente, clique em Adicionar > Adicionar fonte.

  3. Arraste os arquivos de fonte na seção Adicionar fontes ou clique no botão Procurar e especifique o arquivo de fonte.

    Depois de arrastar e soltar o arquivo de fonte, o Nome da fonte será adicionado automaticamente.

    Para melhorar o desempenho e reduzir o tamanho do aplicativo, recomendamos que você faça upload de fontes apenas para incluir as fontes que planeja usar no seu aplicativo.

    Adicionar fontes
  4. Depois de fazer upload das fontes, especifique a fonte ao editar cartões e layouts, criar artigos HTML ou personalizar exibições do aplicativo.

    Escolher fontes em uma lista suspensa
    Escolhendo uma fonte enviada ao editar um cartão de layout.

  5. Crie ou recrie o aplicativo personalizado para visualizar as fontes.

    O aplicativo AEM Preflight não exibe fontes personalizadas. Sempre que adiciona ou edita fontes, você deve criar ou recriar o aplicativo para ver as alterações.

    Consulte Visualizar conteúdo de projeto em aplicativos AEM Mobile.

Observação:

certifique-se de que você tenha a licença apropriada para usar a fonte no aplicativo.

Adicionar fontes em massa

Em vez de adicionar uma fonte de cada vez, você pode arrastar e soltar várias fontes em uma janela.

  1. Na seção Fontes e Personalização do aplicativo no portal, clique em Adicionar > Adicionar fontes em massa.
  2. Selecione os arquivos de fontes para upload em uma janela do Finder ou do Explorer, depois arraste e solte os arquivos de fonte selecionados no ícone.
  3. Verifique a lista de fontes para upload. Selecione qualquer fonte que você não queira incluir no upload e clique no ícone de subtração (–) que é exibido. Clique em Fazer upload para fazer upload das fontes.

Fontes de dispositivo e fontes da Web

Apenas a fonte de dispositivo é necessária para exibir a fonte em telefones e tablets. No entanto, para cada fonte usada, recomendamos que você faça upload da fonte de dispositivo (OpenType ou TrueType) e da fonte da Web (.woff). Fontes de dispositivo são usadas nas páginas de navegação dos telefones e dos tablets. As fontes da Web são usadas no visualizador da Web para desktop, nos aplicativos do Windows (se os arquivos .otf ou .ttf não forem instalados) e para a visualização de fontes em cartões.

Com a licença da fonte correta, você deve ter acesso à versão .woff da fonte. Ela é geralmente incluída no pacote que você recebe ao licenciar a fonte. Entre em contato com o licenciador da fonte para obter detalhes.

Não é possível fazer upload de fontes cujo acesso foi obtido pelo Adobe Typekit.

 

Observação:

no momento, sempre que você adicionar uma nova fonte, terá de recriar o aplicativo para tornar a nova fonte disponível.

Usando fontes nos aplicativos do Windows

No Windows, é obrigatório seguir as regras de uso de fontes incluídas nas fontes pelo fornecedor. Se a fonte não estiver marcada como “instalável” pelo fornecedor, o sistema operacional Windows não a carregará. Você pode verificar se a fonte está marcada como “Instalável” clicando com o botão direito do mouse nela e exibindo as propriedades. Para obter melhores resultados, inclua uma versão da Web da fonte (.woff) para aplicativos do Windows.

Personalizar exibições do aplicativo

Você pode especificar diferentes cores e fontes para várias exibições que aparecem no aplicativo, incluindo a Barra de navegação, o Menu do app e as telas de logon e de acesso pago. Você também pode mostrar ou ocultar o Menu do app ou a opção Conta no menu do aplicativo e mostrar ou ocultar a barra de navegação.

Observe o seguinte:

  • A imagem de visualização da personalização do aplicativo não fornece uma representação completamente precisa. Certifique-se de testar as cores e as fontes de personalização do aplicativo criando um aplicativo personalizado.
  • As configurações de tema de cores (tema claro, tema escuro ou tema personalizado) são configurações globais que se aplicam a todas as exibições para cada plataforma. O tema claro e o tema escuro são predefinições que não podem ser editadas. Se você alterar qualquer configuração de cores ou de fontes, o tema será alternado para personalizado.
  • Certifique-se de clicar em Salvar para salvar seu trabalho antes de sair da página. Salvar aplica-se apenas à plataforma atual.

Vídeo Personalização de aplicativo

Vídeo Personalização de aplicativo
Este vídeo demonstra os novos recursos de personalização do aplicativo lançados na versão 2016.14 e 2017.1.

  1. No portal, clique em Conteúdo e layouts e clique em Fontes e personalização do aplicativo. Selecione a guia Personalização do aplicativo.

    customize_allscreens
  2. Especifique a plataforma (iOS ou Android).

    As configurações especificadas aplicam-se apenas à plataforma selecionada. No momento, não é possível salvar configurações de personalização, portanto, você terá de especificar configurações de personalização de aplicativo separadamente para iOS e Android.

  3. Selecione a exibição Todas as telas. Para usar uma predefinição, escolha Tema claro ou Tema escuro. Se você alterar as configurações de cores ou de fontes, o Tema personalizado será selecionado automaticamente. Para configurações personalizadas, comece na exibição Todas as telas e selecione as configurações de cores e de fontes que você deseja usar.

    Quando a opção Todas as telas é selecionada, as alterações feitas serão aplicadas a todas as exibições. Você poderá substituir as configurações personalizadas de cores e de fontes para cada exibição.

    Observação:

    as configurações de cores e de fontes estão associadas a cada tema: tema claro, tema escuro e tema personalizado. Quando você seleciona um tema diferente, as configurações de cores e de fontes são redefinidas.

  4. Na visualização Todas as telas, especifique as configurações de gesto para o aplicativo.

    Afaste e aproxime os dedos para ajustar o zoom – especifique se o gesto de afastar e aproximar os dedos para ajustar o zoom deve ser ativado ou desativado para cada tipo de artigo. Se desativar esta opção, os usuários não conseguirão afastar e aproximar os dedos para ajustar o zoom na visualização do artigo.

    • A opção Artigos rasterizados inclui artigos baseados em InDesign e artigos baseados em PDF em que a opção “Ajustar a página inteira à tela” está selecionada.
    • A opção Artigos PDF inclui artigos baseados em PDF em que a opção “Ajustar a página inteira à tela” não está selecionada.
    • A opção Artigos HTML inclui artigos baseados em HTML.

    Pinçar para fechar (apenas para iOS) – no iPad, você pode expandir da sessão procurar páginas para voltar para a visualização anterior. Especifique se esse gesto deve ser ativado ou desativado.

    Gesto bisel (apenas para iOS) – em aplicativos iOS, você pode deslizar do lado esquerdo para voltar para a visualização anterior ou exibir o menu do aplicativo da visualização. Especifique se esse gesto deve ser ativado ou desativado.

    customize_gestures
  5. Selecione a exibição individual do aplicativo escolhendo uma opção do menu ou clicando nas setas de navegação e especifique configurações personalizadas de cores e de fontes para aquela exibição.

    customize_app_appmenu2
  6. Para ocultar o Menu do app ou a opção Conta, navegue até a exibição Menu do app. Clique no ícone Menu do app para ativá-lo ou desativá-lo. Ou clique na opção Fazer logon para ativar ou desativar a opção Conta.

    Quando o Menu do app está desativado, ele não pode ser exibido no aplicativo.

    Quando a opção Fazer logon estiver desativada, a opção “Conta” não aparecerá na parte inferior do menu do app.

    Quando a barra de menus estiver oculta, você poderá usar os formatos navto e goto para fornecer links de navegação e acionar recursos como Pesquisar. Consulte Hiperlinks no AEM Mobile.

    Se você ocultar a opção Fazer logon (opção Conta na interface do usuário) ou a barra de menus, poderá usar HTML e APIs JavaScript do Cordova para permitir que os usuários façam logon e logoff. Para obter um exemplo de código que permite ao usuário fazer logon ou logoff do sistema usando um banner dinâmico, consulte Criar banners e banners dinâmicos: banners dinâmicos.

  7. Para alterar o comportamento da barra de navegação, navegue até a exibição Barra de navegação no aplicativo. Escolha uma das seguintes opções para tablet e telefone.

    Padrão - a barra de navegação é exibida somente quando o usuário toca em uma área não interativa de um artigo. A barra de navegação oculta o conteúdo do artigo enquanto é exibida.

    Sempre visível - se você selecionar essa opção, a barra de navegação será exibida na parte superior das telas de navegação e dos artigos e não poderá ser ocultada. Quando a barra de navegação estiver configurada para aparecer sempre, o conteúdo na parte superior do artigo não ficará oculto. Os artigos HTML começam na parte superior da tela, abaixo da barra de navegação. Os artigos de layout fixo são reduzidos e exibidos em formato letterbox.

    app_customization_example
    Quando a barra de navegação estiver definida como Sempre visível, o conteúdo do layout fixo será reduzido e exibido em formato letterbox.

    Sempre oculto – se você selecionar essa opção, a barra de navegação e a barra de status serão desativadas e ficarão ocultas. Quando a barra de navegação estiver oculta, você poderá usar os formatos navto e goto nos artigos para fornecer links de navegação e acionar recursos como o botão Voltar e as opções de compartilhamento em redes sociais. Consulte Hiperlinks no AEM Mobile.

    Barra de status visível e Barra de navegação oculta – se você selecionar essa opção, a barra de navegação será desativada e ficará oculta e a barra de status sempre será exibida. O conteúdo do artigo é exibido abaixo da barra de status e redimensionado e exibido em formato letterbox, se necessário.

    app_customization_navbars
  8. Clique em Salvar para salvar as configurações para a plataforma atual.

    Clicar em Salvar salva as configurações para a plataforma atual. Se você estiver trabalhando em plataformas Android e iOS ao mesmo tempo, certifique-se de clicar em salvar para cada plataforma.

  9. Crie ou recrie o aplicativo personalizado para exibir as configurações personalizadas de aplicativo.

    As fontes enviadas e as configurações personalizadas são incorporadas no aplicativo. Ao enviar novas fontes ou alterar as configurações de personalização do aplicativo, você terá de recriar o aplicativo para exibir as alterações.

    O aplicativo AEM Preflight não exibe as configurações de personalização do aplicativo.

    Consulte Visualizar conteúdo de projeto em aplicativos AEM Mobile.

Métodos adicionais de personalização do aplicativo

Além de utilizar a seção Fontes e personalização do aplicativo do portal, você também pode fazer outras modificações de personalização.

  • Nas configurações do projeto, você pode especificar uma Imagem da marca que aparece no menu do aplicativo.
  • Ao criar o aplicativo, você pode determinar se o telefone tem orientação dupla (iOS), apenas retrato ou apenas paisagem. Para aplicativos iOS e Android, você também pode determinar se o aplicativo funcionará somente em telefones, somente em tablets ou em ambos.
  • Nas configurações de coleção, você pode determinar se permite o deslizamento horizontal para navegar para diferentes artigos. Você também pode determinar se uma coleção aparece como página de navegação ou se abre para o primeiro item na coleção. Você também pode permitir que os usuários salvem coleções para visualização offline.
  • Use modelos de layout para determinar a aparência das páginas de navegação da coleção.
  • Você pode habilitar recursos como compartilhamento em redes sociais, direito, e pesquisar

 

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online