Personalização do Visualizador de Imagens Interativo

Toda personalização visual e a maioria dos comportamentos do Visualizador de imagens interativo são feitos com a criação de um CSS personalizado.

O fluxo de trabalho sugerido é pegar o arquivo CSS padrão para o visualizador apropriado, copiá-lo para um local diferente, personalizá-lo e especificar o local do arquivo personalizado no comando style=.

Os arquivos CSS padrão podem ser encontrados no seguinte local:

<s7viewers_root>/etc/dam/viewers/s7viewers/html5/InteractiveImage.css

O arquivo CSS personalizado deve conter as mesmas declarações de classe que a padrão. Se uma declaração de classe for omitida, o visualizador não funcionará corretamente porque não fornece estilos padrão incorporados para elementos da interface do usuário.

Outra maneira de fornecer regras CSS personalizadas é usar estilos incorporados diretamente na página da Web ou em uma das regras CSS externas vinculadas.

Ao criar CSS personalizado, lembre-se de que o visualizador atribui a classe .s7interactiveimage ao elemento DOM do container. Se você estiver usando um arquivo CSS externo transmitido com o comando style=, use a classe .s7interactiveimage como classe pai no seletor descendente para suas regras CSS. Se você estiver adicionando estilos incorporados na página da Web, qualifice adicionalmente este seletor com uma ID do elemento DOM do container da seguinte maneira:

#<containerId>.s7interactiveimage

Criação de CSSprojetado responsivo

É possível público alvo de diferentes dispositivos e tamanhos de incorporação no CSS para fazer com que seu conteúdo seja exibido de forma diferente, dependendo do dispositivo do usuário ou de um layout de página da Web específico. Isso inclui, entre outros, diferentes layouts, tamanhos de elementos da interface do usuário e resolução da arte-final.

O visualizador suporta dois mecanismos de criação de CSS responsivo projetado: Marcadores CSS e query de mídia CSS padrão. Você pode usá-los independentemente ou juntos.

Marcadores CSS

Para auxiliar na criação de CSS responsivo projetado, o visualizador oferece suporte a marcadores CSS. São classes CSS especiais que são atribuídas dinamicamente ao elemento de container do visualizador de nível superior. Eles são baseados no tamanho do visualizador do tempo de execução e no tipo de entrada usado no dispositivo atual.

O primeiro grupo de marcadores CSS contém .s7size_large, .s7size_medium e .s7size_small classes. Eles são aplicados com base na área de tempo de execução do container do visualizador. Por exemplo, se a área do visualizador for igual ou maior que o tamanho de um monitor de área de trabalho comum, use .s7size_large. Se a área estiver próxima a um tablet comum, atribua .s7size_medium. Para áreas semelhantes a telas de telefones celulares, use .s7size_small. O objetivo principal desses marcadores CSS é criar diferentes layouts de interface do usuário para telas e tamanhos de visualizador diferentes.

O segundo grupo de marcadores CSS contém .s7mouseinput e .s7touchinput. O marcador CSS .s7touchinput será definido se o dispositivo atual for capaz de entrada de toque. Caso contrário, .s7mouseinput será usado. Esses marcadores são destinados principalmente a criar elementos de entrada da interface do usuário com tamanhos de tela diferentes para tipos de entrada diferentes, pois normalmente a entrada de toque requer elementos maiores.

A amostra de CSS a seguir define o tamanho do botão para 28 x 28 pixels em sistemas com entrada do mouse e para 56 x 56 pixels em dispositivos de entrada de toque. Se o visualizador for dimensionado ainda menor, ele será definido como 20 x 20 pixels.

.s7interactiveimage.s7mouseinput .s7imagemapeffect .s7icon { 
    width:28px; 
    height:28px; 
} 
.s7interactiveimage.s7touchinput .s7imagemapeffect .s7icon { 
    width:56px; 
    height:56px; 
} 
.s7interactiveimage.s7size_small .s7imagemapeffect .s7icon { 
    width:20px; 
    height:20px; 
}

Para público alvo de dispositivos com densidade de pixel diferente, é necessário usar query de mídia CSS. O seguinte bloco de query de mídia contém CSS específico para telas de alta densidade:

@media screen and (-webkit-min-device-pixel-ratio: 1.5) 
{ 
}

O uso de marcadores CSS é a maneira mais flexível de criar um CSS responsivo projetado, pois permite público alvo não apenas do tamanho da tela do dispositivo, mas do tamanho real do visualizador, que é útil para layouts de design responsivos.

Você pode usar o arquivo CSS do visualizador padrão como exemplo de uma abordagem de marcadores CSS.

Query de mídia CSS

Você também pode realizar a detecção de dispositivos usando query de mídia CSS puros. Tudo o que está incluído em um determinado bloco de query de mídia é aplicado somente quando é executado em um dispositivo correspondente.

Quando aplicado aos Visualizadores móveis, use quatro query de mídia CSS, definidos em seu CSS, na ordem listada abaixo:

  1. Contém apenas regras específicas para todos os dispositivos de toque.

    @media only screen and (max-device-width:13.5in) and (max-device- 
    height:13.5in) and (max-device-width:799px),  
    only screen and (max-device-width:13.5in) and (max-device-height:13.5in)  
    and (max-device-height:799px) 
    { 
    }
    
  2. Contém apenas regras específicas para tablets com telas de alta resolução.

    @media only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-width:799px) and (-webkit-min-device-pixel-ratio:1.5), 
    only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-height:799px) and (-webkit-min-device-pixel-ratio:1.5)  
    { 
    }
    
  3. Contém apenas regras específicas para todos os telefones celulares.

    @media only screen and (max-device-width:9in) and (max-device-height:9in) 
    { 
    }
    
  4. Contém apenas regras específicas para telefones celulares com telas de alta resolução.

    @media only screen and (max-device-width:9in) and (max-device-height:9in) and (-webkit-min-device-pixel-ratio: 1.5), 
      only screen and (device-width:720px) and (device-height:1280px) and (-webkit-device-pixel-ratio: 2), 
      only screen and (device-width:1280px) and (device-height:720px) and (-webkit-device-pixel-ratio: 2) 
    { 
    }
    

Usando uma abordagem de query de mídia, você deve organizar o CSS com detecção de dispositivos da seguinte maneira:

  • Primeiro, a seção específica da área de trabalho define todas as propriedades que são específicas da área de trabalho ou comuns a todas as telas.
  • Em segundo lugar, os quatro query de mídia seguem a ordem definida acima e fornecem regras de CSS específicas para o tipo de dispositivo correspondente.

Não há necessidade de duplicado do CSS do visualizador inteiro em cada query de mídia. Somente as propriedades específicas a determinados dispositivos são redefinidas em um query de mídia.

sprites CSS

Muitos elementos da interface do usuário do visualizador têm estilo usando arte-final bitmap e mais de um estado visual distinto. Um bom exemplo é um botão que normalmente tem pelo menos três estados diferentes: up, over e down. Cada estado requer sua própria arte-final de bitmap atribuída.

Com uma abordagem clássica ao estilo, o CSS teria uma referência separada ao arquivo de imagem individual no servidor para cada estado do elemento da interface do usuário. A seguir está um exemplo de CSS para estilizar um botão de zoom:

.s7interactiveimage .s7imagemapeffect .s7icon { 
background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_up_touch.png); 
} 
.s7interactiveimage .s7imagemapeffect .s7icon:hover { 
background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_over_touch.png); 
}

A desvantagem dessa abordagem é que o usuário final sofre oscilações ou retardamento da resposta da interface do usuário quando o elemento é interagido pela primeira vez. Essa ação ocorre porque a arte-final da imagem para o novo estado do elemento ainda não foi baixada. Além disso, essa abordagem pode ter um impacto negativo no desempenho devido ao aumento no número de chamadas HTTP para o servidor.

Os sprites CSS são uma abordagem diferente na qual a arte-final de imagem para todos os estados do elemento é combinada em um único arquivo PNG chamado de "sprite". Tal "sprite" tem todos os estados visuais para um determinado elemento posicionado um após o outro. Ao estilizar um elemento da interface do usuário com sprites, a mesma imagem de sprite é referenciada para todos os estados diferentes no CSS. Além disso, a propriedade background-position é usada para cada estado para especificar qual parte da imagem "sprite" é usada. Você pode estruturar uma imagem "sprite" de qualquer maneira adequada. Os visualizadores normalmente o têm empilhado verticalmente.

A seguir está um exemplo baseado em "sprite" de como estilizar o mesmo botão de zoom anteriormente:

.s7interactiveimage .s7imagemapeffect .s7icon { 
background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_up_touch.png); 
background-position: -0px -56px; width: 56px; height: 56px; 
} 
.s7interactiveimage .s7imagemapeffect .s7icon:hover { 
background-position: -0px -0px; width: 56px; height: 56px; 
}

Notas e conselhos gerais sobre estilo

  • Ao personalizar a interface do usuário do visualizador com CSS, o uso da regra !IMPORTANT não é compatível com elementos do visualizador de estilo. Especificamente, a regra !IMPORTANT não deve ser usada para substituir qualquer estilo padrão ou de tempo de execução fornecido pelo visualizador ou pelo SDK do visualizador. Isso pode afetar o comportamento de componentes apropriados. Em vez disso, você deve usar seletores de CSS com a especificidade adequada para definir as propriedades de CSS documentadas neste guia de Referência dos visualizadores.
  • Todos os caminhos para ativos externos dentro do CSS são resolvidos em relação ao local do CSS, não ao local da página HTML do visualizador. Esteja ciente dessa regra ao copiar o CSS padrão para um local diferente. Copie também os ativos padrão ou atualize todos os caminhos no CSS personalizado.
  • O formato preferido para a arte-final bitmap é PNG.
  • A arte-final bitmap é atribuída aos elementos da interface do usuário usando a propriedade background-image.
  • As propriedades width e height de um elemento da interface do usuário definem seu tamanho lógico. O tamanho do bitmap passado para background-image não afeta seu tamanho lógico.
  • Para usar a alta densidade de pixels de telas de alta resolução, como Retina, especifique a arte-final bitmap duas vezes maior que o tamanho do elemento lógico da interface do usuário. Em seguida, aplique a propriedade -webkit-background-size:contain para dimensionar o plano de fundo para baixo no tamanho do elemento da interface do usuário lógica.
  • Para remover um botão da interface do usuário, adicione display:none à sua classe CSS.
  • Você pode usar vários formatos para valores de cor compatíveis com CSS. Se precisar de transparência, use o formato rgba(R,G,B,A). Caso contrário, você pode usar o formato #RRGGBB.

Elementos comuns da interface do usuário

A seguir estão os elementos da interface do usuário que fazem referência à documentação que se aplica ao Visualizador de imagens de vídeo:

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free