Por: Renato Haddad (rehaddad@msn.com  – www.renatohaddad.com ) é MVP, MCPD e MCTS, palestrante em eventos da Microsoft em diversos países, ministra treinamentos focados em produtividade com o VS.NET 2008, ASP.NET 3.5 e Windows Mobile. Visite o blog http://weblogs.asp.net/renatohaddad

Tecnologias utilizadas: IE8

Resumo:

Neste artigo vou abordar as novidades do Internet Explorer 8 com a finalidade de mostrar os principais recursos para o usuário final e o desenvolvedor.

Introdução

Existem tantos browsers atualmente e cada um com uma particularidade para atender o usuário final, seja na navegação, no visual, na facilidade de encontrar as coisas que o Internet Explorer 8 trás uma série de recursos que visam facilitar, e muito, a navegação e a busca de informações que estão integradas na WEB. Vou citar alguns destaques:

Destaque da URL

Isto é super importante e tem como finalidade dar um destaque exatamente no endereço que você está navegando, não no HTTP ou no .com, .net, .com.br, etc. Isto visa a segurança pois quando você navega em sites cuja URL é extensa, praticamente ninguém fica preocupado se está ou não no site correto ou é uma cópia para um hacker aprontar.

Figura 1

Auto sugestão na URL

Quantas vezes precisamos digitar uma URL e nem lembramos onde foi mesmo? Qual era o endereço? Você anotou num papel, num bloco de notas, afinal, onde foi que guardei tal endereço? Respostas para estas perguntas se encontram aqui. Quando você começar a digitar um endereço o IE8 já abre uma lista com sugestões que você já navegou um dia. Além disso, são mostradas URL existentes no histórico e nos favoritos. Isto facilita e muito não ter que ficar anotando endereços para futuras visitas.

Figura 2

Grupo de TABs

Se você já é usuário do Internet Explorer 6 já deve ter usufruído do excelente recurso de TABs na mesma página, afinal não faz muito sentido ficar abrindo um navegador para cada URL. No IE8 as TABs foram aprimoradas com a finalidade de criar um grupo de TABs, ou seja, quando você clica num link para abri-lo em outra TAB, a cor de fundo do título da TAB ficará em destaque indicando que há um relacionamento com a anterior. No entanto, se você quiser desfazer este vínculo, basta clicar com o botão direito na TAB e selecionar Ungroup This Tab.

Figura 3

Abrir a última sessão

Quantas vezes você não fechou o browser sem querer ou ocorreu um erro e o mesmo foi fechado? Para ajudar o usuário nestas situações existe o Reopen Last Browsing Session, o qual abrirá o browser exatamente no ponto em que estava antes de fechar.

Figura 4

Navegar em modo privado

Agora é possível você navegar em sites em deixar rastro em cookies, histórico, etc. Para isto, selecione a opção Safety / InPrivate Browsing.

Figura 5

Em seguida, digite a URL e pronto. Obviamente tudo isto é configurável, senão muitas pessoas fariam a festa de navegar em sites impróprios.

Figura 6

Mecanismo de busca/sugestões

O IE8 tem um mecanismo de busca baseado em providers. Abra o IE8 e no lado direito superior tem um textbox para que você digite o texto a ser pesquisado. Por exemplo, se o provider for o google, quando você digitar um texto o mesmo já será pesquisado e é exibida uma lista de sugestões, além de pesquisar no histórico.

Figura 7

Ao lado direito da ‘lupa”, tem uma seta para baixo para que você selecione outro provider.

Figura 8

Existe a opção de Find More Providers o qual abre a janela Manage Add-Ons, onde é possível pesquisar outros, adicionar, verificar o status, definir a ordem de exibição e ativar ou não as sugestões.

Figura 9

Configurações do browser

Em relação à configuração do browser, vale ressaltar que na Guia/Tab General tem as configurações dos Tabs.

Figura 10

Em Programs tem o Manage add-ons para gerenciar os Aceleradores, Providers de pesquisa, etc.

Figura 11

O AutoComplete permite definir algumas configurações para endereços, formulários e login.

Figura 12

Web Slices

Web Slices são novidades no IE8 onde permite ter informações atualizadas de blocos de páginas da WEB, e não de uma página completa, e sim blocos ou partes de uma página. Quando você assinar uma Web Slice a mesma ficará disponível na barra de favoritos, é como um atalho. Qualquer site pode ter uma Web Slice, basta seguir alguns requisitos técnicos das classes para implementar. Web Slices são usadas em sites onde você precisa ter a informação atualizada na barra de favoritos, por exemplo, o resultado de um leilão, dados da bolsa de valores, pesquisas instantâneas, canal do tempo, etc.

Figura 13

Os pontos importantes de Web Slices são:

Usuários podem monitorar lotes de conteúdos na Web (Leilões, Canal do Tempo, Notícias, Blogs, etc);

Permite ao usuário registrar um conteúdo diretamente de uma página Web que tenha Web Slice;

Construída sobre a plataforma de Feed (leitura), é a mesma maneira para quem já usa RSS;

Baseada no microformato hAtom - hAtom é um microformato para conteúdo que pode ser lido primeiramente por weblog, mas não exclusivamente. hAtom é baseado no subset do formato Atom (http://www.atomenabled.org/). hAtom será um dos microformatos de padrão aberto.  Atom é um caminho simples de leitura e escrita de informações na web, permitindo manter facilmente rastrear mais sites em menos tempo.

Requer um desenvolvedor para informar as novas classes na página.

Veja um exemplo de como deve ser a estrutura de classes do Web Slice.

<div class="hslice" id="1">
    <p class="entry-title">Titulo do Web Slice</p>
    <div class="entry-content">
        O conteúdo pode ser qualquer tag HTML.<br />
        <img src="ASPNET.jpg">
        <p>Valor do produto: R$ 450,99</p>
    </div>
</div>

Deverá ter uma Div Class chamada hslice o qual define a estrutura do container. Em Seguida, é usada a classe entry-title que define o título do Web Slice que será inserido na barra de favoritos do IE8. Já o conteúdo do Web Slice pode ser qualquer HTML, o que importa é que deve estar na classe entry-content. Com isto, o Web Slice será renderizado exatamente conforme o HTML criado. Desta forma, você pode usar qualquer conteúdo dinâmico, controle do ASP.NET, o que importa é que o produto final será um HTML entendido pelo browser. No http://ie8.ebay.com  você pode encontrar um bom exemplo.

Registrar um Web Slice

Quando você navegar numa página que contenha um Web Slice, ao passar o mouse sobre o local, será identificado automaticamente pelo browser um Web Slice, e o mesmo exibirá um ícone. Ao clicar no mesmo, será aberta uma janela para registrar o Web Slice, e então, basta clicar no botão Add.

Figura 14

Veja na barra de favoritos do IE8 uma página que foi registrada o Web Slice. Quando clica no atalho, o conteúdo é exibido e se for dinâmico você pode atualizar imediatamente. Desta forma a barra de favoritos poderá conter todos os Web Slices de diversas fontes de páginas e Web sites.

Figura 15

Formato hAtom

Uma Web Slice é construída baseada no hAtom, que pode representar um conteúdo estático. Já Web Slice intencionalmente representa um conteúdo dinâmico, reusa propriedades hAtom e adiciona-as para assinatura. hAtom é focada num domínio público usando Creative Commons Public Domain. Neste código a seguir mostram as classes requeridas do hAtom.

<div class="hslice" id="1">
    <p class="entry-title">Titulo do Web Slice</p>
    <div class="entry-content">

Veja as propriedades para hSlice:

hslice (requerida) são as propriedades do Web Slice.

ttl - time-to-live (opcional) é o tempo de vida do conteúdo, que pode expirar. Veja como atribuir um valor ao time-to-live:

<div>Atualizado a cada <span class=”ttl”>60</span>min</div>

feedurl (opcional) é o caminho - Path - alternativo para pegar as atualizações de uma fonte diferente, por exemplo:

<a rel=”feedurl” href=”www.foo.com/feed.xml”>Subscribe</a>

endtime (opcional)  é a data final de expiração do conteúdo, ou seja, você pode definir uma data/hora de expiração, por exemplo, um leilão que tem data/hora para terminar. Uma vez expirado, o status é dado como expirado e o Download Engine para de atualizar. Isto pode ser observado pelo título da Web Slice na barra de favoritos, ora fica itálico, negrito ou normal.

<abbr class=“endtime” title=“2008-03-08T17:18:00-08:00”>March 8th, 5:18 pm</abbr>

Veja as propriedades do formato hAtom:

entry-title (requerida) e representa o título do item.

entry-content (requerida) é a descrição do item.

Em alguns casos, conforme a necessidade você pode desabilitar a publicação da web slice, ou seja, ela existirá na página, porém não estará apta para publicação. Para isto é preciso usar a metatag:

<meta name=“slice” scheme=“IE” content=“off” />

Por outro lado, se você tiver um controle, por exemplo, um botão e quiser atribuir uma web slice direto na barra de favoritos, use a APIaddToFavoritesBar(<path>, <title>, 'slice'):

Quanto à privacidade e autenticação, Feeds ativa dados para usuários e aplicações, e Web Slices são iguais a feeds, os dados ficam no cache da máquina local e o publicador deverá expor dados privados através de autenticação.

A plataforma Feeds suporta autenticação de persistência de cookie baseado em autenticação, ou seja, quando expirado, clique na página para reativar. É baseado na autenticação Http, autenticação básica via SSL, credenciais salvas no download e se falhar, o usuário pode clicar na página para resolver o problema.

Recomendações de uso de Web Slices

Você deve estar questionando qual a diferença entre Feeds e Web Slices, assim como as recomendações. Então, Feeds são indicados para promover novos ítens como artigos, blogs, resultado de pesquisas. Web Slices são ideais para blocos, pedaços de páginas continuamente atualizadas, ex: canais de tempo, leilões, bolsa de valores, bancos, emails.

Web Slice é uma maneira simples dos usuários estarem em contato com o conteúdo Web atualizado. Fácil de implementar e não requer instalação no cliente.

Aceleradores

Aceleradores são opções de menus de contexto que podem rapidamente acessar aplicações ou web services de uma página e retorna um resultado. Você pode ou não passar um parâmetro para um web service. Veja um exemplo que vai te ajudar muito: selecione um bloco de texto em inglês, no ícone do acelerador exibido clique em Translate with Windows Live e note que a tradução é feita imediatamente, sendo possível alterar o idioma.

Figura 16

Outro exemplo fantástico é quando se deseja saber o caminho para se chegar a um determinado endereço, visualizando um mapa. Para isto, selecione o texto com o endereço e chame o acelerador Map with Live Maps o qual já irá exibir na tela o mapa a partir do Virtual Earth.

Figura 17

Neste caso, você pode navegar no mapa tranquilamente dando zoom para melhorar a visualização.

Figura 18

Além disto, veja os demais aceleradores instalados, os quais são passíveis de administração, ou seja, incluir ou excluir.

Figura 19

Componentes do Acelerador

Os aceleradores são compostos por Contexto, que é o conteúdo que a ação vai atuar: (seleção, documento, link) e a categoria, que é uma camada para o grupo de aceleradores. O formato utilizado é o OpenService que é uma estrutura XML com algumas tags específicas. Veja um exemplo:

<?xml version="1.0" encoding="utf-8" ?>
<openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
   <homepageUrl>http://maps.live.com</homepageUrl>
   <display>
      <name>Map with Live Maps</name>
      <icon>http://maps.live.com/favicon.ico</icon>
   </display>
   <activity category="Map">
     <activityAction context="selection">
        <execute method="get“                         action="http://maps.live.com/default.aspx?where1={selection}" />
        <preview method="get" action="http://maps.live.com/geotager.aspx">
          <parameter name="b" value="{selection}" />
              <parameter name="clean" value="true" />
               <parameter name="w" value="320" />
              <parameter name="h" value="240" />
              <parameter name="format" value="full" />
        </preview>
      </activityAction>
  </activity>
</openServiceDescription>

O namespace é o http://www.microsoft.com/schemas/openservicedescription/1.0 e os componentes estão divididos em 3 grupos, sendo: homepageUrl, display e activity.

homepageUrl

A homepageUrl é obrigatório e identifica a URL do acelerador onde o usuário poderá acessar o serviço:

<?xml version="1.0" encoding="utf-8" ?>
<openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
   <homepageUrl>http://maps.live.com</homepageUrl>
   …

Display

O display é o container e é obrigatório. As tags name, icon e description devem estar contidas no display. O name é obrigatório e é o nome do acelerador a ser usado. O icon é opcional e é a URL com uma imagem de 16 x 16 pixel do acelerador. A description é opcional e representa uma breve descrição do acelerador. Veja um bloco de código do display contendo o name e o icon com os respectivos conteúdos.

<display>
      <name>Map with Live Maps</name>
      <icon>http://maps.live.com/favicon.ico</icon>
   </display>

Activity

O activity descreve as funcionalidades do acelerador, sendo:

activity1 – container da funcionalidade

category1 – tipo de categoria (map, blog, define, add, translate)

activityAction 1 – o acelerador pode ter uma ou mais tipos de dados

context 2 – tipo de dado (selection, document, link)

execute 1 – principal funcionalidade quando o usuário chamar o acelerador

action 1 – URI para submeter o HTTP

preview 2 – janela HTML com o resultado exibido

1 – obrigatório   2 - opcional

Veja um bloco de código do activity com algumas funcionalidades:

<activity category="Map">
     <activityAction context="selection">
        <execute method="get“                         action="http://maps.live.com/default.aspx?where1={selection}" />
        <preview method="get" action="http://maps.live.com/geotager.aspx">
          <parameter name="b" value="{selection}" />
              <parameter name="clean" value="true" />
               <parameter name="w" value="320" />
              <parameter name="h" value="240" />
              <parameter name="format" value="full" />
        …

Variáveis

Você pode ainda definir algumas variáveis do acelerador quando submeter o HTTP. As variáveis podem ser: documentDomain, documentTitle, documentUrl, link, linkDomain, linkRel, linkText, linkType, selection. Veja um bloco de código que contém as variáveis e no método get do execute estão definidas o action, que é a página a ser solicitada passando como parâmetro a URL e o Title. Note que as variávies de conteúdo documentUrl e documentTitle estão declaradas. Caso inclua o símbolo ? Na variável significa que a mesma é opcional. Neste código você pode ver duas maneiras de declarar as variáveis.

<execute method="get" action="http://example.com/done.aspx?url={documentUrl}&title={documentTitle?}" />
? Indica que é opcional
<execute method="post" action="http://example.com/done.aspx>
       <parameter name="url" value="{documentUrl}" />
       <parameter name="title" value="{documentTitle?}" />
</execute>

Veja um exemplo de um código XML criado no Visual Studio .NET 2008. É um arquivo XML comum contendo a estrutura básica do acelerador. Portanto, crie um projeto de Web Application ou Web Site, depende da sua familiaridade, e adicione o arquivo GetMap.xml com o código a seguir.

<?xml version="1.0" encoding="UTF-8"?>
<openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
  <homepageUrl>http://maps.live.com</homepageUrl>
  <display>
    <name>Map with Live Maps</name>
    <icon> http://www.live.com/favicon.ico</icon>
  </display>
  <activity category="map">
    <activityAction context="selection" >
      <preview action=" http://maps.live.com/geotager.aspx">
        <parameter name="b" value="{selection}" />
        <parameter name="clean" value="true" />
        <parameter name="w" value="320" />
        <parameter name="h" value="240" />
        <parameter name="format" value="full" />
      </preview>
      <execute action=" http://maps.live.com/default.aspx">
        <parameter name="where1" value="{selection}" type="text" />
      </execute>
    </activityAction>
  </activity>
</openServiceDescription>

 Salve o arquivo e para registrar o acelerador numa página, crie uma nova página .aspx ou .html contendo o código para o botão:

<button onclick="window.external.addService('http://localhost/WebCastIE8/GetMap.xml')">
 Add Map Activity</button>

Em seguida, execute a página .aspx ou .html e clique no botão. Será aberta a janela de instalação do acelerador.

Deploy do Acelerador

Caso você queira verificar se o acelerador já está instalado ou não, use o seguinte código:

Ferramenta para o desenvolvedor

O IE8 contém uma excelente ferramenta de desenvolvimento o qual permite ao usuário avançado vasculhar diversas informações do HTML, CSS, Script, Profiler, além de ter um debug. Assim, você não precisará de nenhuma outra ferramenta externa para verificar estas informações. O melhor de tudo é que roda em qualquer máquina que tenha o IE8. Pressione F12 para abrir a ferramenta e se divirta.

Figura 20

Conclusão

Use os recursos do Internet Explorer 8 trás para facilitar a vida dos usuários, agregar valor as aplicações e oferecer soluções ao mercado através de Web Slices e Aceleradores.