Pinned com Internet Explorer 9

Com Internet Explorer 9 você pode personalizar sua aplicação web para se integrar com a área de trabalho de Windows como qualquer aplicação tradicional.

Por Rubén Alvarez


Publicado em: 17/7/12
Valorize este artigo:
Há alguns meses Microsoft publicou a versão beta 1 de seu navegador Internet Explorer 9. Entre outras novidades que esta versão apresenta, encontramos uma que resulta muito interessante para as aplicações Web.

Com Internet Explorer 9 você pode personalizar sua aplicação para se integrar com a área de trabalho de Windows como qualquer aplicação tradicional. Habilitando o modo ancorado da aplicação, os usuários podem adicionar os websites à barra de tarefas de Windows, à área de trabalho ou ao menu Início. A ancoragem de sites facilita o acesso aos sites favoritos e abre funcionalidades parecidas aos atalhos das aplicações para Windows 7.

Isto faz com que nossos usuários possam acessar mais facilmente as áreas que mais lhes interessam, diretamente, sem ter que buscar os vínculos na nossa página de início. Este tipo de acesso fideliza os usuários, já que lhes permite evitar navegações mais ou menos complexas. Ao mesmo tempo, a individualização dos vínculos que mostramos entre a lista de tarefas de uma aplicação em modo ancorado, permite desenvolver uma experiência personalizada para nossos usuários.

Por outra parte, a implementação é muito simples e pode ser feita mediante o uso de tags META ou de JavaScript sem modificar o conteúdo nem os atributos já existentes.

Para ancorar um site, tudo o que temos que fazer é arrastar a barra de Url da Internet Explorer 9 até a barra de tarefas de Windows 7.

A partir desse momento o site estará ancorado à nossa barra de tarefas.

Internet Explorer 9 nos mostrará um aspecto levemente diferente do site.

Para desancorá-lo, tudo o que temos que fazer é clicar com o botão secundário do mouse e selecionar Unpin this program from the taskbar, "Desancorar este programa da barra de tarefas".

Podemos acrescentar comportamento personalizado a este modo ancorado mediante dois grupos de APIs. O primeiro grupo engloba uma série de atributos do site. Estes atributos se estabelecem de forma estática para qualquer usuário do site quando esteja ancorado e se definem mediante o uso de tags META. O segundo grupo de APIs define um conjunto de chamadas que se podem utilizar de forma dinâmica utilizando JavaScript. Este segundo grupo nos permite, se desejarmos, personalizar a experiência de ancoragem para cada usuário.

As APIs de IE9 podem exibir notificações, atualizações, ativar comandos de forma individualizada ou global para todos os usuários e proporcionar acesso rápido às áreas mais interessantes de nosso site.

Em How to Pin a Website (em inglês) se pode encontrar informação a sobre as APIs e os tags META que exibe IE9 em relação ao modo ancorado (em inglês pinned mode) e em Beauty of the Web (também em inglês) se exibem exemplos de sites que utilizam as diferentes funcionalidades novas de IE9, desde a compatibilidade HTML5 até a aceleração hardware dos gráficos.

Neste caso, para simplificar o processo, vamos contar como implementamos o acesso às áreas de interesse especial como Monotemáticos, Seções, Comunidade, Scripts, etc. Para evitar conflitos no tratamento das tags META por parte dos motores de indexação, preferimos utilizar a API de JavaScript.

Estas APIs são muito simples de utilizar.

Vamos por partes. O primeiro é utilizar um mecanismo de detecção de funcionalidades evitando as clássicas comprovações de navegador e versão. Para isso dispomos da função msIsSiteMode. Podemos usá-la da seguinte forma:

try {
    if (window.external.msIsSiteMode) { // se pode fazer modo ancorado
       // nos ancoramos
   }
}
catch(ex)//se nao pode
{
    //nao temos que fazer nada
}

Esta forma de detectar capacidades evita a habitual cascata de verificações de versão e permite que nos centremos em verificar se pode fazer o que queremos.

As APIs de modo ancorado são expostas sob o objeto window.external e têm o padrão de nome msSiteModeXXXXXX. Para criar uma lista de saltos nova utilizaremos:

window.external.msSiteModeCreateJumpList(cabeçalho);

Por exemplo, para nosso site poderíamos escrever algo como:

window.external.msSiteModeCreateJumpList("Desarrollo Web");

Para acrescentar uma entrada a esta lista de saltos utilizaríamos:

window.external.msSiteModeAddJumpListItem(nome, uriAcao, uriIcone);

Ou seja, se quiséssemos acrescentar entradas a Monotemáticos, Seções, Comunidade, Scripts, Artigos Copy-left e Colabora acrescentaríamos as seguintes entradas:

window.external.msSiteModeAddJumpListItem("Monotemáticos","http://desarrolloweb.com/monotematicos/", "http://desarrolloweb.com/favicon.ico");
window.external.msSiteModeAddJumpListItem("Seções","http://desarrolloweb.com/secciones/", "http://desarrolloweb.com/favicon.ico");
window.external.msSiteModeAddJumpListItem("Comunidade","http://desarrolloweb.com/comunidad/", "http://desarrolloweb.com/favicon.ico");
window.external.msSiteModeAddJumpListItem("Scripts","http://desarrolloweb.com/scripts/", "http://desarrolloweb.com/favicon.ico");
window.external.msSiteModeAddJumpListItem("Artigos Copyleft","http://desarrolloweb.com/articulos-copyleft/", "http://desarrolloweb.com/favicon.ico");
window.external.msSiteModeAddJumpListItem("Colabora","http://desarrolloweb.com/colabora/", "http://desarrolloweb.com/favicon.ico");

Uma vez terminemos de acrescentar entradas à nossa lista mostramos os resultados:

window.external.msSiteModeShowJumpList();

Para apagar as listas de saltos:

window.external.msSiteModeCreateJumpList();

Se colocamos todos os elementos juntos:

<script type="text/javascript" >

    try {
       if (window.external.msIsSiteMode()) { // se temos capacidade de ancoragem

       // ficamos com a referencia para escrever menos :)
      var ext = window.external;

      // apagamos a jumpList que houver
      ext.msSiteModeClearJumpList();

      // Criamos nossa jumpList
       ext.msSiteModeCreateJumpList("Desarrollo Web");

       // acrescentamos as entradas
      ext.msSiteModeAddJumpListItem("Monotemáticos","http://desarrolloweb.com/monotematicos/", "http://desarrolloweb.com/favicon.ico");
       ext.msSiteModeAddJumpListItem("Secoes","http://desarrolloweb.com/secciones/", "http://desarrolloweb.com/favicon.ico");
       ext.msSiteModeAddJumpListItem("Comunidade","http://desarrolloweb.com/comunidad/", "http://desarrolloweb.com/favicon.ico");
       ext.msSiteModeAddJumpListItem("Scripts","http://desarrolloweb.com/scripts/", "http://desarrolloweb.com/favicon.ico");
       ext.msSiteModeAddJumpListItem("Artigos Copyleft","http://desarrolloweb.com/articulos-copyleft/", "http://desarrolloweb.com/favicon.ico");
       ext.msSiteModeAddJumpListItem("Colabora","http://desarrolloweb.com/colabora/", "http://desarrolloweb.com/favicon.ico");
       ext.msSiteModeShowJumpList();
       }
    }
   catch (ex) { // se nao temos a capacidade de ancoragem
      // saimos sem fazer nada
   }
</script>

Este é todo o código que estamos utilizando na nossa página de início para implementar o modo ancorado.





Comentários do artigo
Foram enviados 5 comentários ao artigo
5 comentários não revisados
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato