[AEM Assets]{class="badge positive" title="Aplicável ao AEM Assets)."}

Jornada do Dynamic Media: Noções básicas, parte II dm-journey-part2

Bem-vindo ao Dynamic Media Jornada: Noções básicas, Parte II, onde você pode esperar para saber o seguinte:

Consulte também Jornada do Dynamic Media: Noções básicas, Parte I.

Anatomia de um URL do Dynamic Media e como o Dynamic Media fornece conteúdo dm-journey-d

Depois que os ativos do Dynamic Media forem carregados e publicados, você poderá copiar o URL gerado de um ativo e colá-lo no navegador para ver como o ativo aparece para um cliente. O URL copiado a seguir para uma imagem observada é dividido por cores para facilitar a leitura e a compreensão.

Estrutura de uma URL do Dynamic Media.

A primeira parte do URL em vermelho faz referência ao próprio domínio do servidor. Nesse caso, o Dynamic Media está em execução em um domínio de servidor genérico, que é https://s7d1.scene7.com/is/image/. É possível identificar facilmente se o Dynamic Media fornece um conjunto de imagens verificando o domínio do servidor. A estrutura do URL é consistente. No entanto, alguns clientes do Dynamic Media mudaram para um domínio de servidor dedicado onde ele está name-of-your-company.scene7.com. Um domínio de servidor dedicado é necessário para a Imagem inteligente.

O nome da conta é a parte em roxo. Nesse caso, a conta é chamada jpearldemo.

A ID ou o nome do ativo AdobeStock_28563982 está em verde. Observe que o ativo tem não extensão de arquivo, como .png ou .jpg. Quando os ativos são assimilados no Dynamic Media, a extensão de arquivo é removida e um tipo diferente de arquivo é criado: um arquivo de pirâmide TIFF. A pirâmide TIFF permite que o Dynamic Media crie representações rapidamente.

E finalmente, existem alguns parâmetros de processamento de imagens, ?wid=1000&fmt=jpeg&qlt=85, mostrados em amarelo no final.

O caminho do URL inteiro está ativo. Experimente.

Com a janela do navegador ainda aberta para o URL do Dynamic Media e a imagem observada, verifique como é possível criar representações da imagem alterando o URL.

Renderização da imagem observada por meio do URL

Comece excluindo manualmente apenas as regras de processamento de imagem no caminho do URL; deixe o nome do servidor, o nome da conta e a ID do ativo ou o nome da imagem. Experimente.

Agora adicione um parâmetro de processamento de imagem ao final do URL. No campo URL, à direita do nome da imagem, digite ?wid=500 e pressione Enter. Experimente.

Observe que é gerada uma nova representação da inspeção. Um argumento importante para entender esse simples exercício de alteração da largura da imagem é que a imagem vista é gerada 100% dinamicamente.

Agora altere o valor de largura de 500 pixels para 1000 pixels e pressione Enter. Experimente.
No momento em que você pressiona Enter, o navegador retorna ao Servidor de Imagens do Dynamic Media. Ele gera uma representação da inspeção, com base no novo valor de largura inserido, entrega a imagem no navegador e a armazena em cache.

O Dynamic Media tem vários parâmetros de processamento de imagens que você pode usar para ajustar os ativos de imagem nas páginas da Web. Você pode ver uma lista deles aqui.

Agora, tente adicionar um parâmetro de rotação à imagem observada. Ao final do caminho da URL, imediatamente após wid=1000, digite &rotate=90 e pressione Enter. Experimente.

O relógio ainda está ligeiramente inclinado para a esquerda. Altere o valor de rotação de 90 para 92 e pressione Enter. Experimente.

Novamente, no momento em que você pressiona Enter, uma nova representação do relógio é gerada imediatamente. Você pode ver os níveis de desempenho, o que explica por que o Dynamic Media pode fornecer mais de 800.000 solicitações de imagem, por segundo, durante períodos de alto tráfego.

A alteração de parâmetros de processamento de imagem em um URL imagem por imagem é ineficiente, especialmente para sites com milhares de imagens. Uma abordagem muito melhor é usar predefinições de imagem.

Princípios básicos da criação de predefinições de imagens para renderizar ativos dm-journey-e

Há várias maneiras de criar uma imagem. Você deseja ter uma imagem disponível. Tradicionalmente, um profissional criativo acessa o Adobe Photoshop e salva cada uma dessas representações diferentes como imagens estáticas.

Bom: imagens estáticas, cada uma criada manualmente.

Agora imagine que o líder criativo olha para as imagens e diz:

“Eu realmente queria esta captura para que a mão grande apontasse para as quatro, e a mão pequena apontasse para a 1 para facilitar a visualização do mostrador do relógio.”

O criativo refilma todas as novas imagens estáticas.

Porém, com o Dynamic Media, se você tiver predefinições de imagens diferentes, poderá usá-las sempre que precisar delas. As predefinições de imagens impõem padrões.

Melhor: um arquivo com várias representações criadas em tempo real usando predefinições de imagem, como Search_Grid e Thumbnail.

Cada local necessário para ter um tipo específico de imagem, por exemplo,

Essa imagem deve ser entregue com os mesmos parâmetros onde quer que sejam usados.

Por um momento, vamos examinar como uma predefinição de imagem é criada no Dynamic Media.

Criando uma predefinição de imagem começando com a guia Básico.

No exemplo acima, você pode ver que uma nova predefinição de imagem foi criada com o nome Medium. O Dynamic Media usa um exemplo de imagem pronta para uso - a mochila - para ajudá-lo a ver as características da predefinição de imagem ao criá-la.

A predefinição de imagem Medium tem uma largura de 500 pixels e uma altura de 800 pixels. Na Parte I desta Jornada, você lê sobre como fornecer ativos em diferentes formatos. No menu suspenso Formatar, você pode optar por fornecer ativos como JPEG, PNG, TIFF ou vários outros formatos. Você tem flexibilidade aqui.

Selecionar a guia Avançado fornece opções para o espaço de cores do ativo. Dependendo do formato selecionado na guia Básico, você pode fornecer ativos no RGB, em Tons de Cinza ou CMYK. Use o menu suspenso Perfil de Cores para selecionar como fornecer um ativo de imagem CMYK para impressão. Observe também que há parâmetros adicionais que você pode aplicar para ajustar a nitidez das imagens. Neste caso, Tirar nitidez da máscara foi aplicada.

Criando uma predefinição de imagem selecionando opções na guia Avançado.

Você lembra em Estrutura de um URL do Dynamic Media anteriormente, que leu sobre o URL do Dynamic Media e como ele é criado. A caixa de texto Modificador de Imagem é onde você pode digitar os parâmetros de processamento de imagem adicionais desejados. Os parâmetros são incluídos no nome predefinido do URL quando as imagens são entregues, usando a predefinição. Na captura de tela acima, o parâmetro bgc=451B15 foi adicionado. Ou seja, uma cor de fundo marrom-escuro foi adicionada.

Pense em uma predefinição de imagem como uma configuração para suas imagens. Ela fornece sempre todas as imagens que usam a predefinição de forma consistente. Ela é a mesma. O parâmetro &op_brightness=+10 também foi adicionado para aumentar um pouco o brilho.

Quando terminar, salve a predefinição e ela agora estará disponível para todas as imagens que você tiver. Neste caso, você deseja aplicar a predefinição de imagem Medium a uma imagem de uma tigela de chocolate líquido.

Para gerar uma representação de uma imagem, aplique a Medium de predefinição de imagem.

Para verificar a aparência da imagem, copie o URL e cole-o no navegador. Experimente.

Em seu navegador, observe o nome da predefinição de imagem Medium no caminho completo da URL.

Você pode ver o tipo de clareza que é exibida na imagem. Essa qualidade é em parte devido ao modo como a tigela de chocolate foi filmada. Além disso, em parte porque, com o Dynamic Media, você pode armazenar imagens maiores do que o que está sendo entregue aos canais digitais.

Se tudo parece satisfatório para o seu prato de chocolate, você cola o URL em suas páginas da web onde você deseja que a imagem apareça em seu site.

Se você observar a imagem abaixo novamente, verá que há uma predefinição de imagem Cart, uma predefinição Grid, uma predefinição Large, uma predefinição PDP-page (Página de detalhes do produto) e várias outras.

Predefinições de imagens estáticas e dinâmicas. A imagem observada foi renderizada usando a predefinição de imagem PDP-page.

Mas e se você tiver que mudar uma imagem no seu site? Por exemplo, suponha que você tenha feito alguns testes e descobriu que a imagem de 120 x 120 (a predefinição de imagem Cart) não está sendo percebida como você pensava. Aumente o tamanho da imagem aumentando a largura para 175 pixels e a altura para 175 pixels. Tradicionalmente, você acessa o Adobe Photoshop e recria todas as imagens do carrinho. Porém, com o Dynamic Media, você edita a predefinição da imagem atualizando os valores de Largura e Altura para 175 e salva sua predefinição, como visto no exemplo abaixo.

Editando a Largura e a Altura da predefinição de imagem Cart.

Depois de alterar a predefinição de imagem e limpar o cache, todas as imagens são atualizadas e todas as URLs que estão sendo usadas com essa predefinição são alteradas em qualquer lugar. não. Isso significa que não há links quebrados nem redirecionamentos de página da Web necessários.

Conjuntos de imagens, conjuntos de rotação e conjuntos de mix de mídia dm-journey-f

Alguns dos usos mais populares do Dynamic Media são a capacidade de criar conjuntos de imagens, conjuntos de rotação e conjuntos de mídia mista.

Os conjuntos de imagens normalmente são compostos de uma série de ativos de imagem que são apresentados como uma única entidade. Esses tipos de conjuntos oferecem aos usuários uma experiência de visualização integrada, em que os usuários podem ver diferentes visualizações de um item clicando em uma imagem em miniatura. Os conjuntos de imagens permitem apresentar visualizações alternativas de algo e o visualizador oferece ferramentas de zoom para examinar as imagens de perto. Exiba um conjunto de imagens chamado “Em execução” que usa o visualizador Flyout.

Aqui dentro do Dynamic Media você pode ver várias imagens de tênis de corrida. É uma série de linhas de produtos que as equipes de vendas e marketing desejam que os clientes visualizem como uma única apresentação: um conjunto de imagens.

O início da criação de um conjunto de imagens.

Para criar o Conjunto de imagens, escolha Conjunto de imagens no menu suspenso Criar. Observe no menu que também há opções para criar um Conjunto de mídias mistas, um Conjunto de rotação e um Conjunto de carrossel. Esses conjuntos são criados da mesma forma que um conjunto de imagens.

Um conjunto de Mídia mista pode conter imagens, conjuntos de amostras, conjuntos de rotação, vídeos e conjuntos de Vídeo adaptável. Experimente. Um conjunto de rotação permite que os usuários girem um objeto para examiná-lo. Os conjuntos de rotação permitem visualizar os principais detalhes visuais de qualquer ângulo. Experimente.

Criar um conjunto de imagens é simples. Adicione os ativos de imagem que deseja incluir no conjunto.

O Editor do Conjunto de Imagens permite adicionar ativos de imagem e reordenar sua aparência no conjunto.

É necessário dar um nome ao conjunto. Escolha o nome com cuidado porque não é possível editá-lo posteriormente! No exemplo acima, o conjunto é chamado Running. Quando terminar, salve o conjunto.

E aqui está a imagem Running definida no Experience Manager Assets.

A imagem Running definida no Experience Manager Assets, Exibição de Cartão.

Depois de criar um Conjunto de imagens, Conjunto de mídias mistas, Conjunto de rotação ou outra mídia interativa, visualize como ele aparece e se comporta para um cliente. O Dynamic Media tem vários visualizadores integrados que permitem fazer isso.

Você começa selecionando o conjunto de imagens para abri-lo em uma visualização, como mostra o exemplo a seguir.

A imagem Running definida na visualização com a opção Visualizadores selecionada.

Observe na visualização que é possível selecionar as amostras de sapato de corrida e aplicar mais ou menos zoom nos sapatos. Para aplicar um visualizador ao conjunto, selecione Visualizadores no menu suspenso.

O conjunto de imagens Running com o visualizador Flyout aplicado a ele.

Nesse caso, o visualizador Flyout foi selecionado. Nesse ponto, é possível visualizar o conjunto de imagens no visualizador. Mas é melhor vê-lo no navegador da maneira que um cliente o vê. Você seleciona URL no canto inferior esquerdo, copia a URL e a cola no navegador. Experimente.

O URL único permite usar o conjunto de imagens e o visualizador onde você precisa deles em seu site. Você observou no exemplo anterior que Incorporar está à direita do botão URL. Ao selecionar Incorporar, você pode copiar o código deste conjunto de imagens/visualizador e adicioná-lo a uma página da Web ou a um componente do Experience Manager Sites.

O visualizador Flyout é um visualizador padrão cujas propriedades você pode editar. Ou, como criar uma predefinição de imagem, você pode criar seu próprio visualizador personalizado.

Agora, suponha que sua equipe de vendas e marketing não prefira o visualizador de Flyout. Eles gostam do recurso de zoom, mas querem que os clientes vejam o efeito de zoom diretamente sobre os sapatos. Nesse caso, você aplica o visualizador InlineZoom ao conjunto de imagens e copia e cola o URL no navegador para ver como ele se comporta. Experimente.

Quando você move o ponteiro do mouse sobre o sapato, a imagem aumenta o zoom e você pode ver mais detalhes ao mover o ponteiro. Esse efeito de zoom é devido ao tamanho da imagem que foi carregada inicialmente no Dynamic Media.

Ao considerar sua função como consumidor, ou ao trabalhar em sua função profissional, e ao visitar sites diferentes, você vê exemplos desses recursos. Considere como isso está sendo feito e como você pode usar os recursos do Dynamic Media em seu próprio trabalho e no site da empresa.

Você lê sobre conjuntos de imagens e visualizadores. Vamos analisar outros visualizadores e testá-los em ativos únicos. Para redefinir o visualizador, clique no botão Atualizar no canto inferior esquerdo.

Opcional - Saiba mais

Para saber mais sobre o que você lê, use os materiais abaixo para explorar os conceitos com mais detalhes. Caso contrário, sua Jornada do Dynamic Media estará concluída!

Tutoriais do Dynamic Media

Visualizadores do Dynamic Media