Internet Explorer 9 – Funcionalidades para Desenvolvedores

Internet Explorer 9 BetaPessoal, lançado essa semana o Internet Explorer 9 trás com ele novas funcionalidades muito interessantes para os desenvolvedores, como destaque vou abordar neste post a excelente integração dos sites com as funcionalidades do Windows 7, trazendo cada vez mais a Web para o Desktop.

Bom vamos lá, a primeira funcionalidade que demonstrarei será a de Pinned Sites, ou seja, a opção de “Pinar” (ou em bom português: Fixar) o site atual na sua barra de tarefas do Windows, e com isso passar a contar com um menu de Contexto personalizado pelo site que foi fixado, além de ajustar as cores dos botões do navegador para uma cor mais condizente com nosso site, além da exibição do ícone do mesmo no canto superior/esquerdo tornando nosso site mais integrado e com uma cara de aplicativo.

Bom vamos lá, para quem ainda não entendeu e gostaria de um exemplo pode fixar meu blog (esta página) e clicar com o botão direito no ícone fixado, para fixar é simples utilizando o Internet Explorer 9 clique na aba relativa a meu blog, segure, e arraste até sua barra de tarefas do windows, irá aparecer a mensagem “Fixar em Barra de Tarefas”, então basta soltar e está fixado.

É uma tarefa relativamente simples realizar todas estas integrações com o Windows, estão disponíveis novas meta tags para isto que são as responsáveis por informar o navegador sobre as opções do site e o mesmo ativar tais funcionalidades:

Vamos analisar inicialmente as principais metas, notem que basta definir o name para o item desejado e em content colocar o conteúdo assim como faziamos com outras metas existentes hoje em dia.

Propriedade Descrição
application-name Nome da aplicação (seu site) a ser mostrado tanto no menu inicial quanto no título da janela ao passar o mouse no ícone da barra de tarefas.
msapplication-tooltip Auto-explicativo, contém o valor que sera exibido da tooltip do ícone na barra de tarefas.
msapplication-window Define o tamanho e demais opções relativas ao comportamento da janela do navegador que será aberta ao clicar no ícone fixado.
msapplication-navbutton-color Também auto-explicativo, contém a cor em hexadecimal a ser adicionada aos botões do navegador ao lançar o site através do ícone fixado.

Bom até agora já transformamos nosso simples site em uma aplicação e a mesma já pode ser fixada tanto na barra de tarefas quanto no menu iniciar, caso vocês testem nesse momento irão notar que ficou meio feio apenas com nome e tooltip mais com o icone padrão do Internet Explorer.

Vamos melhorar um pouco isto, podemos definir dois icones um para ser exibido na barra de tarefas e outro para aparecer no navegador na parte superior.

Apenas clareando os comandos acima, adicionamos dois itens link em nossa página um com seu rel (relativo) definido como icon e outro como shortcut (atalho) além do endereço para o icone desejado. A seguir você confere o resultado final:
Pin IE9 CustomizadoAgora que nosso site já está devidamente fixado na barra de tarefas, e com um design agradável, podemos incrementar ainda mais, com outra feature do IE9/Windows 7 chamada de lista de tarefas, percebam que a maioria dos aplicativos Windows hoje em dia já possui esta caracteristica de exibir ao clicar com o botão direito no icone da barra uma lista de tarefas corriqueiras/comuns ao usuário. Agora podemos adicionar tal lista não apenas em aplicativos windows mais também em sites da web.

Para isto contamos com mais uma meta tag muito simples:

Exemplificando a meta acima, assim como as demais definimos a propriedade name contendo o valor msapplication-task informando assim ao navegador que este será um item da lista de tarefas, e no content definimos o name com o titulo da tarefa, o action-uri contendo a url para onde nossa ação de clicar na tarefa nos levará e por fim o icon-uri contendo o icone relativo a tarefa desejada. Lembrando que como se trata de uma lista de tarefas ou seja podemos adicionar diversas metas como esta variando apenas o titulo e a ação. A seguir você confere o resultado:
Resultado PIN IE9Esta foi a Parte 1 de uma série de posts que farei sobre as Funcionalidades para Desenvolvedores do Internet Explorer 9, isto é apenas a ponta do iceberg, ainda pretendo fazer mais duas postagens abordando funcionalidades mais avançadas disponíveis neste primeiro Beta. O Internet Explorer 9 está absolutamente fantástico, abordando os padrões W3C, HTML5, CSS Selectors além da tão aguardada aceleração gráfica via GPU.

Lembrando que tanto estas meta tags quanto os nomes de propriedades e valores podem ser alterados após o lançamento da versão final, mais podemos ir por enquanto nos acostumando, adaptando nossos aplicativos e testando nesta versão Beta.

Por hoje é só, e quem estiver com alguma dúvida, sugestão ou elogio pode deixar nos comentários abaixo ou enviar via email que respondo com o maior prazer.