Dicas e tutoriais

Como criar um site pinado compatível com o Internet Explorer 9

Twitter fazendo uso da jumplist do Internet Explorer 9.

O Internet Explorer 9 foi o ápice de toda a web. Pela primeira vez o navegador passou nos testes de compatibilidade com padrões, ganhou um visual bonito e que não interferiu na velocidade de execução e ganhou recursos novos que até então nenhum navegador tinha, como os sites pinados na superbar do Windows 7. É deles que vamos falar neste post.

Twitter fazendo uso da Jump List do Internet Explorer 9.
Twitter fazendo uso da Jump List do Internet Explorer 9.

A fixação de sites no Internet Explorer 9 não funciona apenas fixando o site na barra de tarefas e deixando-o ali como um atalho nos Favoritos. A Microsoft permitiu que os sites se adaptassem exatamente como aplicativos dentro do sistema, com direito até a Jump List com destaques e atalhos para outras páginas relevantes.

A Microsoft disponibiliza um webapp que dá o passo-a-passo para a adaptação do seu site para que funcione totalmente integrado ao Internet Explorer 9. Vejamos então como proceder para criar um site pinado.

1. Entre no site e inicie o assistente online. Há um pequeno preview de como ficará toda a Jump List ao terminar o processo. Enquanto os passos abaixo são concluídos, a visualização será atualizada mostrando o resultado na hora.
2. A primeira coisa que ele pedirá é o nome do site (Site Name), URL (Site URL) e Home Page URL, sendo que este será o site que abrirá ao clicar no botão na barra de tarefas do Windows 7.
2.1 Em Main Site Icon, insira o favicon do site. Para uma melhor adaptação à superbar, dê preferência a um favicon (*.ico) de dimensão 64×64 pixels.
3. Clique em Continue. A seção Add a Jump List abrirá.
3.1. Nesta seção, você pode adicionar links úteis do seu site, como por exemplo ir para uma determinada página ou post destacado do seu site. Fica a seu critério escolher os links que serão postos ali. Cinco links podem ser adicionados em Tasks.

Criando tarefas pro site pinado no IE9.
Criando tarefas pro site pinado no IE9.
  • Coloque um ícone 16×16 em Task Icon (Ícone da Tarefa).
  • Digite o rótulo da tarefa em Task Label. Ele será o link para acesso.
  • Em Task URL (URL da Tarefa), digite o link para o qual o leitor será redirecionado.

4. O próximo passo é adicionar uma Jump List dinâmica (Dynamic Jump List). Diferentemente das Tarefas, as listas dinâmicas se atualizam à medida que o site é atualizado. Para isso, basta apenas ceder o feed RSS em ‘Include a dynamic Jump List using my site’s RSS feed’.
4.1. Em Header Text, digite o título da seção da Jump List. No nosso caso, mostrado no preview acima, decidimos colocar nossas novidades, então demos o nome de “Últimas notícias”.
4.2. Em Generic Task Icon, selecione outro arquivo *.ico, que será como um marcador das entradas do RSS.

Marcador de novos itens em um site pinado.
Marcador de novos itens em um site pinado.

4.3. Se você quiser, pode também marcar a caixa Enable taskbar notifications. Ela coloca um notificador de novidades no ícone do site pinado na barra de tarefas, como na imagem ao lado.

5. Por fim, o site perguntará se você deseja um código que, quando inserido no site, mostra uma barra de notificação na parte superior do seu site, incentivando os usuários do Internet Explorer 9 a fixarem o site na barra de tarefa.
5.1. Se sim, clique em ‘Add a pinning notification bar on the top my web pages’, digite o nome do site e clique em Finish!.
6. Reveja todas as suas configurações e, se tudo estiver certo, clique em Build my Pinned Site!.
7. Será gerado um código com um Javascript. Insira-o antes da tag </body> no template ou na página inicial do seu site. Assim, as pessoas que usam o Internet Explorer 9 podem aproveitar melhor e ter uma experiência bem melhorada.

Tags: Internet, Microsoft

Você também vai gostar

Leia também!