Jornada do Dynamic Media: Noções básicas, parte II

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

• Anatomia de um URL do Dynamic Media e como o Dynamic Media fornece conteúdo
• Princípios básicos da criação de predefinições de imagens para renderizar ativos
• Conjuntos de imagens, conjuntos de rotação e conjuntos de mídia mista

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

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 um 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 do Dynamic Media mudaram para um domínio de servidor dedicado em que ele pode estar 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, mostrado 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, depois 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ê pressionar Enter, o navegador volta para o 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 veja uma lista deles aqui.

Agora, tente adicionar um parâmetro de rotação à imagem observada. E o fim do caminho do URL, seguindo imediatamente wid=1000, tipo &rotate=90e pressione Enter. Experimente.

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

Novamente, no momento em que você pressionar Enter, uma nova representação do relógio é gerada quase instantaneamente. Você pode ver o tipo de desempenho obtido, o que explica por que o 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

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 essa tomada para que a mão grande apontasse para os quatro, e a mão pequena apontasse para o 1 para facilitar a visualização do mostrador do relógio."

O criativo teria que refilmar todas essas 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,

• uma página de detalhes do produto,
• grade de pesquisa,
• miniatura,
• cartão de compra, ou
• imagem herói

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.

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

No exemplo acima, é possível 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 variável Medium a predefinição de imagem 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 Formato no menu suspenso, você pode optar por fornecer ativos como JPEG, PNG, TIFF ou vários outros formatos. Você tem flexibilidade aqui.

Selecionar o Avançado fornece opções para o espaço de cores do ativo. Dependendo do formato selecionado no campo Básico guia - no exemplo acima, JPEG foi selecionado - você pode fornecer ativos em RGB, Escala de cinza ou CMYK. No Perfil de cor menu suspenso, é possível 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. Nesse caso, Tirar nitidez da máscara foi aplicada.

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

Você se lembra em Anatomia de um URL do Dynamic Media anteriormente, que você leu sobre o URL do Dynamic Media e como ele é criado. A variável Modificador de imagem A caixa de texto é 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; vai ser o mesmo. O parâmetro &op_brightness=+10 também foi adicionado para aumentar ligeiramente o brilho.

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

Aplicação da predefinição de imagem Média 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 do 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 novamente a imagem do relógio abaixo, verá que há uma Cart predefinição de imagem, uma Grid predefinição, uma Large predefinição, uma PDP-page (Página de detalhes do produto) e vários outros.

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

Mas e se você tiver que mudar uma imagem no seu site? Por exemplo, suponha que você tenha feito alguns testes e descoberto que a imagem de 120 x 120 (a variável Cart predefinição de imagem) não está sendo recebida tão bem quanto 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.

Editar a largura e a altura da Cart predefinição de imagem.

Depois de alterar a predefinição de imagem e liberar o cache, todas as imagens são atualizadas e todos os URLs que estão sendo usados com essa predefinição fazem não mude em 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

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. Exibir um conjunto de imagens chamado "Em execução" que usa o visualizador de imagem suspensa.

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 vejam 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 do Criar menu suspenso. Observe no menu que também há opções para criar uma Conjunto de mix de mídia, um Grupo de rotação, e uma Conjunto do Carousel. 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 de Running. Quando terminar, salve o conjunto.

E aqui está o Running Imagem definida no Experience Manager Assets.

A variável Running Imagem 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.

A variável Running Imagem 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.

A variável Running Imagem definida com o visualizador Flyout aplicado.

Neste caso, o Flyout o visualizador 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, copie o URL e cole-o 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 desse conjunto/visualizador de imagens 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ê acabou de ler um pouco 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.

• ZoomVertical_dark visualizador aplicado a um ativo de imagem. Experimente.
• Zoom_light visualizador aplicado a uma imagem. Experimente.

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

• Como criar predefinições de imagens
• Uma lista de parâmetros de processamento de imagem que você pode usar no campo Modificador de imagem ao criar uma predefinição de imagem
• Como visualizar ativos
• Como visualizar ativos 3D
• Como criar conjuntos de imagens
• Como criar conjuntos de rotação
• Como criar conjuntos de mídia mista

Tutoriais do Dynamic Media

• Usar o Dynamic Media com o Experience Manager Assets
• Biblioteca de conteúdo do Adobe Experience Manager (pesquisar em Dynamic Media)

Visualizadores do Dynamic Media

• Demonstrações ao vivo de cada visualizador

Recursos do Business.Adobe.com