Sites fixos no Windows 8
A tela inicial do Windows 8 é o melhor local para localizar todos os seus conteúdos e aplicativos favoritos e ficar conectado a eles. Os blocos de aplicativos são dinâmicos, com atividades e mostram conteúdo atualizado e personalizado, para que você fique sabendo das novidades que acontecem no seu mundo.
Já escrevemos sobre a experiência de navegação estilo Metro do Internet Explorer 10 no Windows 8. Esta postagem descreve em detalhes os sites fixos do IE10 e sua disponibilidade na tela inicial do Windows 8 — complementados com notificações e recursos visuais centrados no site que informam quando há novo conteúdo. Também percorreremos os detalhes de desenvolvedor da Web para dar suporte aos sites fixos.
O vídeo a seguir mostra sites fixos em ação no Windows 8 Consumer Preview.
Sites fixos no Windows 8
Sites fixos – Mais do que favoritos
Os consumidores do Windows passam a maior parte do tempo na Web e sabemos, pela telemetria opcional (oficialmente, o Programa de Aperfeiçoamento da Experiência do Usuário Microsoft), que eles voltam ao mesmo conjunto de sites com frequência. Com os sites fixos no Windows 8, o acesso aos seus sites se torna fácil e imediato. Com as notificações, os blocos dos sites se tornam dinâmicos, com informações atualizadas que permitem que você saiba quando novos conteúdos estiverem disponíveis.
Os desenvolvedores podem utilizar os sites fixos para conectar melhor seu site aos usuários e promover a marca do site diretamente na tela inicial do Windows. Descobrimos que os sites que usaram esse recurso com o IE9 no Windows 7 experimentam um aumento de 15 a 50% no número de visitas ao site. No Windows 8, a experiência para os consumidores é ainda melhor com as atualizações dos blocos dos sites, mesmo quando o site não está aberto no navegador.
As duas capturas de tela a seguir ilustram os blocos de sites fixos e as notificações.
Sites fixos na tela inicial mostrando recursos visuais centrados no site e notificações
Exemplo de notificação no bloco de um site fixo
Recurso visual centrado no site no bloco do site fixo
Como desenvolvedor da Web, você pode oferecer um ícone de site (favicon) a ser usado pelo IE10 em todo o navegador para representar o site, na barra de endereços, na nova página da guia e na tela inicial. O IE10 usa o ícone de site grande (32 x 32 pixels) para identificar o site quando fixado na tela inicial assim como o IE9 fazia para fixá-lo na barra de tarefas.
Captura de tela da fixação de um site com o IE10 estilo Metro mostrando o bloco do site
O IE10 extrai a cor dominante do ícone para usá-la automaticamente como cor da tela de fundo do bloco da tela inicial.
Uma ferramenta de criação de ícones é o x-icon editor. Use para criar o ícone de 32 x 32 do seu site. Ele também pode converter uma imagem para o formato de arquivo de ícone (.ico). E depois associar o .ico usando a marcação de favicon tradicional:
<link href="testdrive.ico" rel="shortcut icon" />
Notificações que são atualizadas na tela de fundo
O Windows 8 pode fazer a sondagem das atualizações em blocos fixos na tela inicial. Isso funciona bem para pequenas notificações, como novas mensagens de outros usuários (email e rede social), novos descontos em um site de compras, novos artigos em um news feed etc.
Com o Internet Explorer 10 e o Windows 8, você pode oferecer notificações diretamente nos seus blocos de sites fixos. Isso significa que o usuário recebe atualizações dos sites sem que eles estejam abertos no navegador. Como exemplo, fixe a demonstração de novos tweets usando o IE10 no Windows 8 Consumer Preview. O bloco do site fixo recebe atualizações regularmente e notifica o usuário quando há novos tweets disponíveis.
As notificações em segundo plano exigem componentes fornecidos pelo site. São eles: (1) XML da notificação, uma resposta em XML que descreve a notificação para o Windows e (2) Marcas META do site fixo, marcação de página da Web que aponta para o local em que o Windows deve fazer a sondagem das notificações e a frequência da sondagem.
XML da notificação
O Windows cuida da sondagem e do recebimento das notificações. O Windows faz a sondagem do XML da notificação que descreve os recursos visuais do bloco do site fixo. O esquema XML da notificação define essa resposta em XML simples. Por exemplo, para atualizar o bloco com o número “3,” você enviaria este XML:
<?xml version="1.0" encoding="utf-8" ?>
<badge value="3"/>
As notificações podem ser números ou glifos, como indicadores de "nova mensagem" e "alerta". Para ver uma lista completa do que uma notificação pode exibir, consulte Choosing a badge image (Escolhendo uma imagem de notificação) no MSDN.
Marcas META do site fixo
A próxima etapa é associar o XML da notificação à página da Web. O IE10 usa a marca META “application-name” para determinar se a página da Web dá suporte a funcionalidades de sites fixos, como notificações e listas de atalhos. Para dar suporte a notificações, é necessário incluir uma nova marca META na sua marcação com a URL do XML da notificação e a frequência com que o Windows deve solicitá-la. O IE verifica se a marca META “msApplication-badge” está presente na página no momento da fixação, bem como nas inicializações subsequentes do site a partir do bloco do site fixo.
<meta name="msapplication-badge" value="frequency=360;polling-uri=http://ietestdrive2.com/PinnedSites/TweetCounter/microsoft/360" />
O parâmetro de valor tem duas partes: polling-uri (obrigatório) e frequency (opcional).
O polling-uri é o URI absoluto a que o Windows solicita o documento XML simples definido acima.
frequency é o número opcional de minutos entre atualizações e deve ser uma destas opções:
- 30 (o Windows faz a sondagem do URI a cada 30 minutos)
- 60 (1 hora)
- 360 (6 horas)
- 720 (12 horas)
- 1440 (1 dia. Esse é o padrão.)
Quando frequency é omitido ou tem um valor diferente dos listados acima, é considerado o padrão de atualizações diárias (1440 minutos).
APIs de desenvolvedor para a atualização de notificações
Você também pode limpar e atualizar a notificação do bloco do site diretamente na página da Web para garantir a atualização do bloco do site.
Quando um usuário inicia o bloco do site fixo pela tela inicial, o site está em execução na sua própria sessão chamada SiteMode e pode usar as funções de JavaScript a seguir para atualizar a notificação.
O window.external.msSiteModeClearBadge() limpa a notificação no bloco. Na demonstração de novos tweets, quando o usuário recebe uma notificação e toca no bloco para iniciar o navegador, a página da Web usa o msSiteModeClearBadge() para limpar a notificação do bloco. Na próxima vez em que o bloco se acende com uma atualização de notificação, o usuário fica sabendo que há novo conteúdo.
window.external.msSiteModeRefreshBadge() chama o Windows para atualizar a notificação no site usando a URI de sondagem. Por exemplo, o usuário vê um bloco de site fixo indicando três mensagens não lidas e clica no bloco para retornar ao site. Se ele lê somente a primeira atualização, você pode emitir uma atualização para que a notificação reflita o número correto de mensagens não lidas: 2.
No Windows 8 Consumer Preview, essas duas APIs somente funcionam em sites em execução na intranet local ou em zonas de sites confiáveis. Isso será corrigido no próximo pré-lançamento. Para testar essas APIs no seu próprio site com o Consumer Preview, adicione seu domínio à lista de sites confiáveis da guia Segurança da caixa de diálogo Propriedades da Internet.
Notificações da barra de tarefas da área de trabalho
As notificações que aparecem como sobreposições de ícone dos sites fixos na barra de tarefas da área de trabalho continuarão funcionando no Windows 8 e IE10 na área de trabalho. Essa forma de notificação não está disponível no site fixo da tela inicial do Windows 8. O Windows 8 cuida das notificações de todos os blocos na tela inicial e faz isso consumindo pouca bateria.
Listas de atalhos para navegação rápida no site
Muitos dos principais sites, como NYTimes.com, CNN.com e Amazon.com dão suporte a recursos de sites fixos no IE9, como as listas de atalhos para acesso a uma tarefa específica ou parte de um site. Com o IE10, as listas de atalhos ficam disponíveis como parte da barra de navegação, como uma forma amigável de usar o toque para navegar no site.
Quando o usuário inicia o site na tela inicial, o botão de fixar mostra que há listas de atalhos disponíveis para o site:
Captura de tela mostrando a lista de atalhos da demonstração de novos tweets
A lista de atalhos exibida é a mesma que o IE9 exibe na barra de tarefas do Windows 7.
Você pode adicionar tarefas estáticas à lista de atalhos do seu site por meio de marcação da página (saiba mais) ou baseando-se de forma dinâmica nas interações do usuário (saiba mais). A notificação e as listas de atalhos no Windows 8 são recursos centrados no site. Cada nome de domínio totalmente qualificado pode ter somente um conjunto de dados de sondagem e de lista de atalhos.
Conclusão
O Internet Explorer 10 coloca os sites no centro da experiência por meio da integração com a tela inicial do Windows 8. Os desenvolvedores da Web podem criar recursos visuais centrados no site para blocos de sites fixos, compartilhar quando houver novas atualizações disponíveis para o site e oferecer listas de atalhos para navegação rápida em todo o site.
Esperamos ansiosos para que você adicione esses recursos simples ao seu site para maximizar seu impacto no Windows 8.
—Rahul Lalmalani, gerente de programas, Internet Explorer