Criando blocos personalizados para sites do IE11

Crie blocos personalizados e o uso de notificações em sites no Internet Explorer na nova interface do usuário do Windows para aumentar o interesse e o número de cliques de seus usuários. Você pode criar estática personalizada e blocos dinâmicos para o Internet Explorer 11, um processo semelhante aos aplicativos da Windows Store.

Blocos estáticos

Quando um usuário fixa pela primeira vez o seu site, ele é exibido como um bloco estático na tela Inicial. Por padrão, a imagem no bloco é o favicon do seu site ou um logotipo padrão do IE11. Você pode personalizar a imagem adicionando marcas de metadados à marcação da página da Web ou adicionando um arquivo de configuração do navegador.

Blocos pequenos e médios estão disponíveis por padrão na tela Inicial. Uma imagem genérica do IE11 será usada se você não fornecer uma de sua preferência. Para blocos largos e grandes, você deve fornecer a imagem.

Blocos estáticos são mostrados sempre que não há notificações e usam uma imagem para cada um dos quatro tamanhos de blocos que você quer oferecer a seus usuários. Estes são os tamanhos padrão e os tamanho de imagem recomendados para cada um:

Tamanho de blocoDimensões padrão do blocoTamanho mínimo da imagemTamanho de imagem recomendado
Pequeno70 x 7056 x 56128 x 128
Médio150 x 150120 x 120270 x 270
Largo310 x 150248 x 120558 x 270
Grande310 x 310248 x 248558 x 558

 

Observação  O tamanho máximo de todos os blocos é 1024 x 1024.

Veja a aparência deles:

Bloco pequeno 70x70

Imagem de bloco pequeno (70x70) para blocos estáticos

Bloco médio 150x150

Imagem de bloco médio (150x150) para um bloco estático.

Bloco largo 310x150

Imagem de bloco largo (310x150) para um bloco estático.

Bloco largo 310x310

Imagem de bloco grande (310x310) para um bloco estático.

 

Observação  Para abranger uma vasta gama de dispositivos, use uma imagem com 1,8 vezes o tamanho do bloco padrão, para que a imagem possa ser ampliada ou reduzida, conforme necessário.

Para uso como blocos dinâmicos, defina uma imagem média, uma larga e uma grande. A tabela a seguir fornece algumas orientações sobre como utilizar os diferentes tamanhos.

TamanhoDescrição
PequenoO bloco pequeno não dá suporte a notificações e só é exibido como um bloco estático.
MédioCom suporte por padrão. É exibido como estático ou dinâmico. Permitirá que você exiba texto e imagens.
LargoOpcional. É exibido como estático ou dinâmico. Requer que você também defina um bloco de tamanho médio para adicionar um bloco grande.
GrandeOpcional. É exibido como estático ou dinâmico. Requer que você também defina um bloco de tamanho médio e um bloco largo.

 

Se você deixar de fora um tamanho (por exemplo, grande), esse tamanho de bloco não será oferecido para redimensionamento ou notificações. Quando um bloco é fixado, você pode alterar os tamanhos de blocos entre os tamanhos definidos, mas adicionar ou remover tamanhos da lista exige que você altere os seus metadados e peça ao usuário para desafixar e fixar novamente o bloco.

Para configurar o bloco padrão, você pode usar um arquivo XML, definir metadados em seu elemento <head> HTML ou usar chamadas de API JavaScript. O arquivo XML pode ser o mais flexível. Se você tiver várias páginas que usam os mesmos blocos, poderá criar e manter um arquivo, bem como apontar para ele de qualquer página em seu site.

Este exemplo define um arquivo de configuração do navegador XML para definir um bloco de logotipo padrão para todos os quatro tamanhos disponíveis e uma cor da tela de fundo. Facilitamos o teste: basta clicar com o botão direito do mouse, copiar as imagens de caminhões de alimentos mostradas acima e salvá-las localmente com os nomes de arquivos utilizados no exemplo.



<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/smalltile.png"/>
      <square150x150logo src="images/mediumtile.png"/>
      <wide310x150logo src="images/widetile.png"/>
      <square310x310logo src="images/largetile.png"/>
      <TileColor>#009900</TileColor>
    </tile>
  </msapplication>
</browserconfig>



Você pode salvar esse arquivo XML como browserconfig.xml e salvá-lo na raiz do seu servidor. O IE11 lê automaticamente o arquivo quando o usuários fixa o site. Se você quiser especificar um arquivo de configuração personalizado, use um elemento meta na parte <head> da página. Neste exemplo, veja o elemento meta que declara o arquivo de configuração. Se esse elemento meta estiver faltando em sua página e um usuário tentar fixar seu site, o IE11 procurará por um arquivo chamado browserconfig.xml, que contém URLs dos arquivos de notificação individuais (arquivos de esquema de blocos) e instruirá o Windows a buscar esse arquivo nos intervalos que você especificar.



<head>
...
<meta name="msapplication-config" content="ieconfig.xml" />
...
</head>


Para obter informações sobre a definição do bloco padrão usando HTML ou JavaScript, veja Melhorias de sites fixados no guia do desenvolvedor do IE11.

Blocos dinâmicos

Os blocos dinâmicos do IE11 funcionam com o Windows 8.1 para obter dados de notificação de arquivos XML em um site. Quando você fixa um site, veja o que acontece:

  • O IE11 obtém o arquivo browserconfig.xml.
  • O IE11 instrui a plataforma de notificação do Windows 8.1 a obter as notificações de endereços de polling-URI especificados no arquivo browserconfig no intervalo especificado.
  • A plataforma de notificação obtém os arquivos de esquema de blocos e exibe o texto e as imagens em um bloco usando o modelo especificado. Isso se repete a cada intervalo definido no arquivo browserconfig.xml, conforme explicado em Criar um bloco dinâmico.
Diagrama do IE obtendo o arquivo browserconfig, criando o bloco, o Windows obtendo arquivos de notificação e atualizando o bloco dinâmico.

O cliente faz a sondagem do site para obter atualizações e controla se um site foi submetido a sondagem e quantas vezes, em vez de o site enviar o conteúdo ao cliente.

O site atualiza os arquivos de esquema de blocos para fornecer imagens e texto a um bloco dinâmico. Até cinco arquivos de esquema de blocos podem ser definidos para fornecer um bloco dinâmico em constante rolamento. Os arquivos de esquema de blocos são atualizados pelo site à medida que novas notificações se tornam disponíveis, e a plataforma de notificação do Windows move os arquivos para baixo e exibe o conteúdo como blocos dinâmicos.

Você pode especificar os arquivos de esquema de blocos com um arquivo XML browserconfig, marcas meta no elemento <head> ou JavaScript em seu site.

Para especificar uma URI de sondagem, o arquivo browserconfig (ou o código meta HTML ou código meta JavaScript é atualizado) inclui os endereços de arquivo do esquema. Por exemplo, a seguir está uma versão atualizada do arquivo de configuração do navegador anterior. Agora, ele inclui a seção <notification>.


<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/smalltile.png"/>
      <square150x150logo src="images/mediumtile.png"/>
      <wide310x150logo src="images/widetile.png"/>
      <square310x310logo src="images/largetile.png"/>
      <TileColor>#009900</TileColor>
    </tile>
    <notification>
      <polling-uri  src="notifications/contoso1.xml"/>
      <polling-uri2 src="notifications/contoso2.xml"/>
      <polling-uri3 src="notifications/contoso3.xml"/>
      <frequency>30</frequency>
      <cycle>1</cycle>
    </notification>
  </msapplication>
</browserconfig>


Aqui estão os elementos incluídos no arquivo de configuração do navegador:

ElementoDescrição
browserconfigO elemento raiz. Obrigatório.
msapplicationUm elemento específico do fornecedor que define o tipo de aplicativo ao qual o arquivo se aplica (sites fixos). Esse elemento é obrigatório e deve ser declarado como um elemento filho do elemento browserconfig.
blocoDefine a imagem de logotipo padrão do bloco. Inclui até quatro imagens com estes atributos.

  • square70x70logo
  • square150x150logo
  • wide310x150logo
  • square310x310logo
O atributo src de imagem aponta para a imagem referente aos atributos. As imagens devem estar em um formato de arquivo .JPG, .GIF ou .PNG, ter menos que 200 kb e ter tamanho menor que 1024x1024 pixels.

O atributo TileColor usa uma cor de formato RGB, #ff80aa.

notificaçãoDefine as URIs dos arquivos de esquema de bloco. Ele pode incluir:

  • polling-uri
  • polling-uri2
  • polling-uri3
  • polling-uri4
  • polling-uri5

As cinco URIs que podem ser exibidas são apresentadas de forma aleatória. Estes são os arquivos que você atualiza com as notícias e informações mais recentes, que deseja exibir em uma tela Inicial de usuários.

frequênciaA frequência (em minutos) entre as solicitações de consulta. Deve ser uma das seguintes opções: 30, 60, 360, 720 ou 1440.
cicloControla como a exibição das mensagens é alternada.

  • 0: (padrão para apenas uma notificação) Não alternar.
  • 1: (padrão para várias notificações) Alternar notificações para todos os tamanhos de blocos.
  • 2: Alternar notificações apenas para blocos médios.
  • 3: Alternar notificações apenas para blocos largos.
  • 4: Alternar notificações apenas para blocos grandes.
  • 5: Alternar notificações apenas para blocos médios ou largos.
  • 6: Alternar notificações apenas para blocos médios ou grandes.
  • 7: Alternar notificações apenas para blocos largos ou grandes.

 

Observação  Os URIs de sondagem apontam para arquivos de esquema de bloco baseados em XML que definem um modelo do Windows para cada tamanho de bloco (médio, largo e grande) Os modelos fornecem um formato para exibir a notificação em um bloco dinâmico.

Criando um arquivo de esquema de bloco

Um arquivo de esquema de blocos contém a imagem e o texto para uma única notificação e um modelo que mostra como exibir as informações. Os arquivos de esquema são atualizados periodicamente para fornecer notificações alteradas para seus usuários. Você pode definir até três tamanhos diferentes (em um modelo por tamanho). O tamanho do modelo é correspondido ao tamanho do bloco sendo exibido atualmente no Windows 8.1. Por exemplo, se o tamanho atual do bloco estiver definido como 310x150, você poderá usar qualquer modelo que tenha 310x150 no nome, como TileWide310x150ImageAndText01.

Aqui está um exemplo de um arquivo de esquema em XML:


<tile>
  <visual lang="en-US" version="2">  
    <binding template="TileSquare150x150PeekImageAndText04" branding="name">
      <image id="1" src="images/2.jpg"/>
      <text id="1">Serving Today: Samosas</text> 
    </binding>

    <binding template="TileWide310x150ImageAndText01" branding="name">
      <image id="1" src="images/2.jpg"/> 
      <text id="1">Serving Today: Samosas</text>
    </binding>
 
    <binding template="TileSquare310x310ImageAndText01" branding="name">
      <image id="1" src="images/2jpg"/>
      <text id="1">Serving Today: Samosas</text>
    </binding>
  </visual>
</tile>

Estes elementos compõem um esquema de arquivo típico:

ElementoDescrição
blocoO elemento raiz necessário.
visualInstrui o Windows 8.1 a usar os nomes de modelos da versão 2. Aplicattivos do Windows 8 da Windows Store dão suporte a modelos como a versão 1. Para o Windows 8.1, os nomes foram mudados e se chamam versão 2. Você precisa especificar a versão 2 para usar blocos dinâmicos com o IE11.
associaçãoDefine o modelo, a imagem e o texto para um único tamanho de bloco. Os atributos incluem:
  • modelo — um dos modelos do Windows 8.1 predefinidos. Os modelos estão disponíveis apenas para tamanhos de bloco médio, largo e grande.
  • marca - define o formato que o bloco deve usar para exibir a marca do aplicativo (nenhum, logotipo, nome).
imagemFornece estes atributos

  • src — a URL da imagem a ser usada.
  • id — uma ID exclusiva opcional para diferenciar imagens.
As imagens devem ser menores que 200 kb e podem estar nos formatos de arquivo .JPG, .GIF ou .PNG.
textoFornece uma linha de texto e um atributo ID. Se houver mais do que uma linha de texto para uma associação, vários elementos de texto com IDs exclusivos serão usados.

 

Embora só existam modelos para três tamanhos de bloco compatíveis com blocos dinâmicos, você tem muitas opções de modelo. Por exemplo, um bloco quadrado de 310x310 pixeis pode ter texto simples com ou sem um título grande, uma imagem pequena e uma grande quantidade de texto, uma imagem grande e texto, e vários outros formatos. Os modelos são definidos pelo Windows 8.1 e não podem ser alterados. Para saber mais sobre modelos, veja Escolhendo um modelo. Para ver a lista completa, vá para o Catálogo de Modelos de Bloco.

Reunindo tudo

Agora que você tem os formatos de arquivo, vamos tentar a codificação, como em Criar um bloco dinâmico.

Tópicos relacionados

Criar um bloco dinâmico
Escolhendo um modelo
Melhorias em sites fixos
Catálogo de modelos de bloco
Usando a fila de notificações

 

 

Mostrar:
© 2015 Microsoft