Para criar os arquivos HTML de origem para seus artigos, você pode usar um sistema do CMS como Adobe Experience Manager ou usar qualquer ferramenta, como Dreamweaver, CMS ou editor de HTML. Recomendamos que você use folhas de estilo em cascata (CSS) na criação de conteúdo de fluxo controlável para tablets e para telefones de tamanhos diferentes.

Observação:

em alguns casos, você pode usar o Adobe Muse para criar artigos HTML iniciais. No entanto, na maioria dos casos, é necessário ter conhecimento avançado em HTML para modificar os artigos usados no AEM Mobile.

Criar vídeos de artigos HTML

Criar vídeos de artigos HTML
Este vídeo foi gravado originalmente para a Adobe Digital Publishing Solution. O processo se aplica da mesma forma ao AEM Mobile.
Adobe

Preparar arquivos HTML para upload

Use o HTML Article Packager para criar arquivos de artigos para conteúdo HTML. Quando você arrasta a pasta que contém seus arquivos HTML para o ícone do Article Packager, o utilitário cria um arquivo manifest.xml e compacta os arquivos em um arquivo de artigo o qual você pode fazer upload.

Para baixar o HTML Article Packager, consulte Instalação e configuração do AEM Mobile.

  1. Baixe e instale o HTML Article Packager.

    No Mac OS, clique duas vezes no arquivo .dmg e arraste o arquivo HTML Article Packager para a pasta Aplicativos.

  2. Adicione o arquivo HTML principal e os ativos necessários a um pasta. Mude o nome do arquivo HTML principal para index.html. Abra a pasta no Finder ou no Explorer.

    Inclua apenas os arquivos referenciados em seu código HTML. Se forem incluídos arquivos não referenciados, como imagens em PSD, você aumenta desnecessariamente o tamanho do arquivo.

  3. Em uma janela separada do Finder ou do Explorer, abra a pasta que contém o utilitário HTML Article Packager (como a pasta Aplicativos no Mac OS).

  4. Arraste e solte a pasta HTML no ícone do HTML Article Packager.

    HTML Article Packager

    Observação:

    no Windows, a pasta que contém o artigo deve estar na mesma unidade em que o HTML Article Packager está instalado.

    O arquivo do artigo é criado no mesmo nível da pasta HTML.

  5. No portal sob demanda (https://aemmobile.adobe.com), edite o artigo e faça upload do arquivo de artigo.

    Para obter detalhes, consulte Gerenciamento de artigos no AEM Mobile.

Plug-ins para sistemas CMS

Criação no Adobe Experience Manager (AEM)

Configurar o AEM para trabalhar com o AEM Mobile

Sistemas CMS de terceiros

Criação baseada na web

 

Otimizar conteúdo HTML para dispositivos móveis

O conteúdo HTML que executa bem em navegadores de desktop pode não ser executado tão bem em dispositivos móveis. Ao criar artigos HTML, faça o seguinte:

  • Otimize imagens para dispositivos móveis. Uma imagem de 12000x8000 pixels com 300 dpi leva mais tempo para processar do que uma imagem de 800x600 com 72 dpi. Evite usar imagens desnecessariamente grandes para economizar espaço e melhorar o desempenho.
  • Otimize arquivos de áudio e vídeo para reduzir o tamanho e melhorar o desempenho.
  • Simplifique seu código para navegadores móveis e teste.

Para obter detalhes, consulte Otimizar conteúdo para aplicativos do AEM Mobile.

Usar fontes compartilhadas em artigos HTML

Você pode fazer referência às fontes que são enviadas dos artigos HTML ao aplicativo. Ao fazer referência às fontes que são enviadas ao aplicativo, você aprimora a velocidade de download e o desempenho do artigo.

 

 

Observação:

As fontes compartilhadas usadas em artigos HTML são compatíveis apenas com aplicativos móveis, não com o visualizador da Web para desktop. Para disponibilizar as fontes no visualizador da Web para desktop, você pode incluir as fontes no artigo HTML ou usar as APIs para disponibilizá-las por meio do conteúdo compartilhado.

  1. Faça upload das fontes no portal sob demanda (Conteúdo e layouts > Fontes e personalização do aplicativo). Consulte Personalizar aplicativos AEM Mobile: usando fontes personalizadas.

  2. Na seção Fontes e personalização do aplicativo do portal, crie ou edite as fontes que deseja referenciar. Verifique se o campo Nome do arquivo de fonte está preenchido. Se necessário, faça o upload dos arquivos de fonte novamente.  

     

    Se você adicionar ou editar fontes, atualize e envie novamente o aplicativo para usar as fontes.

  3. Na seção Fontes e personalização do aplicativo no portal, clique no ícone para mostrar os arquivos de fonte e clique em Copiar.

  4. No arquivo HTML de origem, adicione referências às fontes enviadas.

    Artigo HTML de exemplo que referencia fontes do aplicativo

  5. Crie um artigo HTML e adicione-o ao projeto.

  6. Crie um aplicativo personalizado que inclua as fontes às quais está fazendo referência. Teste o artigo para garantir que as fontes sejam exibidas corretamente.

Noções básicas de como os gestos são manipulados nos visualizadores

Por padrão, tocar em uma área não interativa exibe as barras de navegação em visualizadores e deslizar navega para o artigo ou a página anterior ou seguinte. Em artigos HTML, os visualizadores não exibem as barras de navegação para elementos HTML interativos conhecidos como: <a/>, <video/>, <audio/>, <textarea/>, <input/> e <button/>. Tocar em outros elementos exibe as barras de navegação.

Para ter maior controle sobre a manipulação de gestos em conteúdo interativo avançado, como jogos ou apresentações, use as HTML Gesture APIs personalizadas.

Usar HTML Gesture APIs

Usando as HTML Gesture APIs, você pode ajudar a garantir uma boa experiência do usuário para elementos HTML interativos mais avançados. Por exemplo, se você tiver uma apresentação de slides em tela cheia, poderá personalizar a experiência para permitir que os usuários deslizem para o artigo seguinte no último slide. Se você tiver um desafio do HTML, é possível configurá-lo para que tocar na tela exiba as barras de navegação enquanto tocar uma peça do quebra-cabeça não exibe as barras de navegação.

Observe que o relinquishCurrentGesture () não é suportado em aplicativos do Windows. Todos os outros gestos são suportados em todas as plataformas.

Consulte o arquivo de exemplo para mais detalhes (apenas em inglês).

Se você estiver usando o Adobe Muse para criar artigos HTML, recomenda-se que adicione a Gestures API ao projeto do Muse. A Bates Creative criou um mucow para esse propósito. O código e as instruções estão localizados aqui:

AEM Mobile Gestures API para Adobe Muse

 

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