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

Bem-vindo à Jornada do Dynamic Media: Noções básicas, Parte II, onde você pode esperar aprender 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 aparecerá para um cliente. O URL copiado a seguir para uma imagem observada é dividido por cores para facilitar a leitura e a compreensão.

Anatomia 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á sendo executado em um domínio de servidor genérico, que é https://s7d1.scene7.com/is/image/. É fácil ver um conjunto de imagens e entender se elas estão sendo atendidas pelo Dynamic Media apenas observando o domínio do servidor. O URL será bastante consistente. No entanto, alguns clientes da Dynamic Media mudaram para um domínio de servidor dedicado, onde pode ser 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 na Dynamic Media, a extensão de arquivo é removida e um tipo diferente de arquivo é criado: um arquivo de TIFF de pirâmide. O TIFF de pirâmide 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, vamos examinar mais detalhadamente como criar representações da imagem simplesmente 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. Uma vantagem 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 Dynamic Media Image Server. Ele gera uma representação totalmente nova do relógio, com base no novo valor de largura que você acabou de inserir, em seguida, fornece a nova imagem de volta ao 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. E o fim 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 quase instantaneamente. Você pode observar o tipo de desempenho obtido, o que explica por que a Dynamic Media pode fornecer mais de 800.000 solicitações de imagem, por segundo, em um fim de semana movimentado ou feriado importante.

Embora seja possível alterar os parâmetros de processamento de imagem em um URL imagem por imagem, não é um método eficiente, especialmente se você tiver dezenas de milhares de imagens que compõem seu site. 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 e lugares em que você desejará criar uma imagem ou disponibilizar uma imagem. Tradicionalmente, uma Creative entra no Adobe Photoshop e salva cada uma dessas representações diferentes como imagens estáticas.

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

Agora imagine a Creative Director olhando as imagens e dizendo:

"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 teria que refilmar todas as novas imagens estáticas novamente.

Mas, 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 eles 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 - no exemplo acima, JPEG foi selecionado - você pode fornecer ativos em RGB, Escala de cinza ou CMYK. No menu suspenso Perfil de Cores, você pode selecionar como fornecer um ativo de imagem CMYK a ser usado 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 Anatomia 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 fórmula para suas imagens. Ele vai mostrar todas as imagens que usam a predefinição, de forma consistente, sempre; e vai ser o mesmo. 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.

Aplicando o Medium de predefinição de imagem para gerar uma representação de uma imagem.

Você copia o URL e o cola no navegador para verificar a aparência da imagem. 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 recebida como você pensava. É necessário aumentar a imagem, aumentando a largura para 175 pixels e a altura para 175 pixels. Tradicionalmente, você teria que entrar no Adobe Photoshop e recriar todas essas imagens do carrinho. Porém, com o Dynamic Media, basta editar a predefinição de imagem, atualizando os valores de Largura e Altura para 175, e salvar a 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 liberar o cache, todas as imagens são atualizadas e todas as URLs que estão sendo usadas com essa predefinição são alteradas para qualquer lugar. __ 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 da 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 simula o ato do mundo real de virar 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. Basta adicionar 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.

Independentemente de ter criado um conjunto de imagens, um conjunto de mídia mista, um conjunto de rotação ou qualquer outra mídia interativa após a criação do conjunto, você deseja ver como ele aparece e se comporta para um cliente. O Dynamic Media tem vários visualizadores integrados que permitem fazer exatamente isso.

Você começa selecionando o conjunto de imagens criado para abri-lo em uma visualização, como pode ser visto no exemplo a seguir.

O conjunto de imagens Running 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. Porém, é melhor visualizá-lo em seu navegador, exatamente como 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ê pode ter notado 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 pronto para uso cujas propriedades você pode editar. Ou, assim como criar uma predefinição de imagem, você pode criar seu próprio visualizador personalizado.

Suponha que sua equipe de vendas e marketing não goste do 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, basta aplicar o visualizador InlineZoom ao conjunto de imagens e copiar e colar seu URL no navegador para ver como ele se comporta. Experimente.

Quando você move o ponteiro do mouse sobre o sapato, amplia a imagem e vê mais detalhes enquanto move o ponteiro. E a razão para isso é simplesmente o tamanho da imagem que foi inicialmente carregada no Dynamic Media.

Enquanto você considera viver como um consumidor, ou enquanto você trabalha em seu papel diário, e conforme você vai a sites diferentes, você vê coisas como essas. Pense sobre como isso está sendo feito e como você pode usar o poder do Dynamic Media em seu próprio trabalho e no site de sua empresa.

Você leu 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

Se você quiser saber mais sobre o que acabou de ler, use os materiais abaixo para explorar os conceitos com mais detalhes. Caso contrário, sua Jornada do Dynamic Media será concluída!

Tópicos da Ajuda do Dynamic Media

Tutoriais do Dynamic Media

Visualizadores do Dynamic Media