Arquivo da categoria ‘IE8’

IE9 Platform Preview

Publicado: 16/03/2010 em IE8

Acaba de ser lançado no MIX o IE9 Platform Preview (IE9PP)!!!!!

Como o próprio nome já diz, é uma olhada rápida no que está por vir na nova versão do Internet Explorer, agora chamado mais abertamente de plataforma.
Esta questão de plataforma é bem extensa, porém é interessante como o navegador começa a passar da condição de mais um programa destktop que acessa recursos remotos para ser uma plataforma de software complementar às diversas que já temos no Windows.

Juntamente com o IE9PP, foi lançado um site feito exclusivamente para o test-drive desta nova versão.
http://ie.microsoft.com/testdrive/

Neste endereço são encontradas páginas desenvolvidas para mostrar os recursos já existentes no IE9PP.
Vejam como é a cara do preview e a home do site de test-drive.

image 

Se este mesmo site for acessado do IE8 por exemplo, os recursos que ele não suporta ficam desabilitados. Dá pra ter uma idéia as melhorias já disponíveis nesta versão preliminar do IE9.

image

Uma das páginas de demonstração mais interessantes é a página de imagens voadoras, onde temos diversas imagens flutuando lado à lado em uma perspectiva tridimensional.
A performance do IE9 em relação aos outros navegadores neste ponto é fantástica, vejam a diferença de FPS entre IE9PP e Chrome.

IE9
image

Chrome
image

Um recurso muito interessante é possibilidade de forçar um Engine do IE para executar uma página utlizando atalhos. Facilita muito para testar o site em todas as versões de IE sem a necessidade de instalação de todos as versões em máquinas diferentes.

image 

Outro recurso muito legal é a Developer Tools que já estava presente no IE8 e agora possui melhorias no IE9PP.
Vale uma olhada com calma na nova aba adicionada à ferramenta: Network. Com esta aba podemos acompanhar o tempo gasto nas requisições feitas durante o carregamento de uma página web.

image

E ainda existe uma visão detalhada, que permite analisar diversos pontos da requisição além do tempo, como requests e responses do servidor.

image

Está com dúvida sobre algum comportamento da sua página no IE9?
Use a Windows Internet Explorer Diagnostic Tool e obtenha mais detalhes do ambiente que está rodando, lingua instalada, versões e muito mais informações.

image

Apesar de não ser focado nos recursos para usuários, este preview dá pra ter uma noção do arsenal de recursos e novidades que virão com o IE9.
Vale a pena começar a preparar suas aplicações para os padrões Web e garantir que na chegada da versão final do IE9, tudo esteja funcionando perfeitamente.

Faça o download do IE9PP em http://ie.microsoft.com/testdrive/
Confira mais detalhes no blog do time do IE HTML5, Hardware Accelerated- First IE9 Platform Preview Available for Developers

A briga dos navegadores vai esquentar bastante este ano!

Divirtam-se

[]s

No final das contas, quem realmente determina qual será o engine utilizado pelo Internet Explorer 8 para executar a página é o Document Mode.
O Document Mode é uma propriedade do objeto document que é o resultado da combinação do Doctype e Tag Meta de Compatbilidade.

Na tabela abaixo está a lista de Document Modes possíveis para o Internet Explorer 8 de acordo com os elementos encontrados na página.

image

O termo Doctype Antigo refere-se à doctypes que especificam padrões antigos, como o HTML 3.2. Um Doctype Recente indica padrões atuais, como HTML 4 ou XHTML.

Um ponto de atenção é o do Document Mode resultante da tag de compatibilidade IE=EmulateIE7, que pode variar de acordo com o Doctype, exatamente como acontecia no IE7 para determinar qual standards mode utilizar.

É possível saber qual é o Document Mode de um determinado documento através de script.

<script type="text/javascript">
// Qual Engine meu documento usa?
document.write("Meu documento usa o Engine do IE" + document.documentMode);
</script>

Referências para o Document Mode

Propriedade DOM
http://msdn.microsoft.com/pt-br/library/cc196988(en-us,VS.85).aspx

IHTMLDocument6
http://msdn.microsoft.com/pt-br/library/cc288665(en-us,VS.85).aspx

Dominando os conceitos da tag de compatibilidade e Document Mode você tem total controle sobre o mecanismo de compatibilidade do Internet Explorer 8 e versões posteriores.

Para mais detalhes veja os dois posts anteriores da série de Compatibilidade com Internet Explorer 8

Compatibilidade com Internet Explorer 8: Parte 1
Compatibilidade com Internet Explorer 8: Parte 2

[]s

Na primeira parte dos posts de compatibilidade de aplicações web, mostrei como o usuário comum do navegador pode se beneficiar e utilizar o mecanismo de compatibilidade do Internet Explorer 8 em sua navegação.

Neste post vou mostrar como os desenvolvedores e IT Pros podem controlar o mecanismo de compatibilidade, e já adianto, estes sim tem controle total sobre o mecanismo.

Como dito anteriormente, a instalação do IE8 inclui além do engine novo, os engines antigos do navegador para manter a compatibilidade das páginas desenvolvidas para estas outras versões de Internet Explorer.
Para controlar este mecanismo para que utilize um engine específico para executar uma página o desenvolvedor pode utilizar a tag de compatibilidade, que consiste em uma tag <META> com valores específicos que apenas o Internet Explorer entende.

Tag de Compatibilidade

Este é um exemplo de utilização da tag de compatibilidade:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Esta tag indica ao IE8 que ele deve utilizar o engine do Internet Explorer 7 para executar a página. Assim todos os recursos do IE7 estarão disponíveis, inclusive bugs. Portanto é imprescindível que tome muito cuidado ao tomar a decisão de utilizar a tag de compatibilidade, pois o usuário terá a mesma experiência que ele tinha na versão antiga do Internet Explorer, descartando APIs novas e melhorias na execução de scripts e estilos CSS.

Abaixo a tabela com todas os valores que podem ser utilizandos na tag de compatibilidade.

image 

Existem algumas observações sobre casos especiais relacionado às tags de compatibilidade
1) O modo Quirks assume o comportamento do standards de IE5 e IE6, que não possuem mudanças tão significativas.
2) O modo IE7 Standards + Doctype, resultante da tag EmulateIE7 leva em consideração o doctype da página para determinar como ela será executada, da mesma maneira como acontece no IE7.
3) A tag EDGE faz com que o navegador assuma o engine que atende aos Standards mais atuais, no caso do IE8 é o engine do IE8, mas isto em versões futuras virá a ser IE9, IE10 e assim por diante.

Além de ser possível adicionar esta informação por página, existe ainda a possibilidade de adicionar esta informação através de cabeçalhos HTTP diretamente no servidor web ou através do web.config se a tecnologia de servidor for Asp.Net.

Quando eu falo de servidor não é apenas o IIS da Microsoft, mas também o Apache ou qualquer outro servidor web que suporte cabeçalhos http customizados.

Configurando a tag de compatibilidade no IIS (Inglês)
http://msdn.microsoft.com/en-us/library/cc817572.aspx

Configurando a tag de compatibilidade no Apache (Inglês)
http://msdn.microsoft.com/en-us/library/cc817573.aspx

Com este recurso, tanto Desenvolvedores como IT Pros podem controlar o comportamento dos sites que no momento precisam rodar com o Internet Explorer 8 e não podem se adequar aos padrões web e às mudanças da nova versão.

No próximo post falarei sobre o DocumentMode, o resultado final da combinação de Tag de compatibilidade e Doctypes.

Até a próxima e divirtam-se!

Compatibilidade com Internet Explorer 8: Parte 1
Compatibilidade com Internet Explorer 8: Parte 3

Web Application Toolkit para IE8

Publicado: 28/09/2009 em IE8

Chega à versão 1.0 o Web Application Toolkit para IE8.
Este toolkit é bastante interessante, ele possui uma série de controles para auxiliar na utilização dos novos recursos que o Internet Explorer 8 fornece nas aplicações Asp.Net.

Existe controle Asp.Net para facilmente criar Aceleradores, WebSlices e Busca Visual.
Apesar de o processo de integração destes recursos às páginas web ser extremamente simples, um controle específico para Asp.Net ajuda bastante!

image

Um belo exemplo é a exposição dos recursos de WebSlices pelo controle IE8:WebSliceControlExtender. Com ele é possível especificar uma fonte alternativa de atualização e visualização para WebSlices.

<IE8:WebSliceControl ID="AuctionWebSliceControl" WebSliceId="AuctionWebSlice" runat="server"
            WebSliceTitle="Auction WebSlice"
            TimeToLive="15" Bookmark="~/Auctions/AuctionDetails.aspx?aid={0}">
        <asp:Literal ID="UpdateTimestamp" runat="server" />
</IE8:WebSliceControl>

image 

Além disso o toolkit possui algumas páginas que explicam como funcionam os controles!

Acessem o site, instalem http://code.msdn.microsoft.com/WebAppToolkitIE8/ e divirtam-se!!!

[]s

O Internet Explorer 8 possui um poderoso mecanismo de compatibilidade de com versões anteriores do navegador.
A instalação do IE8 inclui além do engine novo, os engines antigos do navegador para manter a compatibilidade das páginas desenvolvidas para estas outras versões de Internet Explorer.

Existem dois meios de controlar este mecanismo de compatibilidade, uma delas é através da interação do usuário final, a outra é através da configuração da aplicação pelo desenvolvedor ou IT Pro.
Neste post vamos ver como o usuário pode interagir com este mecanismo.

compatbility_view_buttonBotão do Modo de Exibição de Compatibilidade
Ao acessar um site desenvolvido para versões anteriores do Internet Explorer, o IE8 pode exibir o botão que ativa o Modo de Exibição de Compatibilidade ao lado direito da barra de endereços.

A exibição deste botão não significa que a página está quebrada ou que não funciona no IE8, mas sim que a página foi feita para versões anteriores do navegador e pode conter algum problema de compatibilidade e o usuário decide se ativa o modo de exibição de compatibilidade ou não.

Ao clique no botão pelo usuário, o IE8 ativa o modo de exibição de compatibilidade que ativa o engine do Internet Explorer 7 e altera o user agent string do IE8 para IE7.

User Agent String do IE8 sem o modo de exibição de compatibilidade ativado:
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)

User Agent String do IE8 com o modo de exibição de compatibilidade ativado:
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)

Com isto, além de garantir que o IE8 vai processar o html/scripts/estilos da página como o IE7, garante também que o código do servidor que não suporta ainda a versão 8 do Internet Explorer possa ser executado normalmente. Isto evita mensagens de navegador não suportado vindas do servidor web.

O usuário também consegue gerenciar os domínios adicionados ao Modo de Exibição de Compatibilidade utilizando a janela de Configurações do Modo de Exibição de compatibilidade.

image

Nesta janela o usuário também determinar que todos os sites da zona Intranet, ou que todos os sites acessados sejam executados em Modo de Exibição de compatibilidade. Esta última opção não é recomendada.
Ainda nesta janela, existe a opção de incluir a lista de compatibilidade que é mantida pela Microsoft.
Esta lista, é resultado de testes em milhares de sites ao redor do mundo onde foram identificados e marcados sites que necessitam, em um primeiro momento, ser exibidos ao usuário em modo de compatibilidade para evitar problemas em sua utilização.

Quando um site está nesta lista e a opção está ativada pelo usuário, o botão do modo de compatibilidade não é exibido e o usuário não percebe que o site está sendo exibido utilizando a versão mais antiga do Internet Explorer.

Estas são as opções que o usuário final tem para controlar o mecanismo de compatibilidade do Internet Explorer 8. Na Parte 2 deste assunto mostrarei como os desenvolvedores controlam este mecanismo.

Divirtam-se!

Compatibilidade com Internet Explorer: Parte 2
Compatibilidade com Internet Explorer 8: Parte 3

O Internet Explore 8 possui uma poderosa ferramenta para desenvolvedores em sua instalação.
Com ela é possível inspecionar os elementos de uma página html, visualizar e editar as propriedades CSS e obter o resultado instantaneamente.
É possível também debugar scripts, adicionando breakpoints e visualizar os valores das variáveis de uma maneira que lembra o debugger do Visual Studio.

A ferramenta está disponível no menu Ferramentas ou pelo atalho de teclado F12
image

A ferramenta pode ficar flutuando lado a lado com o Internet Explorer ou “dockada” na parte inferior. Ela lembra bastante a conhecida Dev Toolbar. Porém o fato de ser um recurso do navegador e não uma toolbar, é possível uma economia de recursos muito grande, principalmente devido ao novo modelo de isolamento de processos do Internet Explorer 8.

image

Existe dois recursos que gosto bastante nesta ferramenta que são uma exclusividade do Internet Explorer, o Profiler e o Modo de Documento.
O Profiler permite uma análise detalhada da execução dos scripts da página, permitindo que o desenvolvedor encontre funções que estão causando lentidão na execução por exemplo, o que pode comprometer todo o funcionamento da aplicação web.

Vejam abaixo um pouco de profiler no site do Bing:

image

Outro recurso interessante é a possibilidade de visualizar a mesma página nos vários engines de Internet Explorer disponíveis no IE8.
Sem a necessidade de instalar outras versões de navegador, é possível saber como o site se comportará nas versões anteriores ao IE8.
Vejam a comparação que fiz no site do Bing, a diferença é o tamanho das fontes:

O Bing por padrão utiliza o engine do IE7:
image

Ele ficaria assim no IE5 e IE6:
image

E assim utilizando o IE8:
 image

Este resultado de visualização do site em várias versões do IE é o mesmo que adicionar a tag meta de compatibilidade para cada uma das versões.

Para saber TUDO sobre a ferramenta para desenvolvedores acesse o link http://msdn.microsoft.com/en-us/library/dd565622(VS.85).aspx Terá uma descrição detalhada dos recursos e tutoriais de como utilizar a ferramenta no dia-a-dia.

Divirtam-se

Pessoal, segue um exemplo de como identificar a versão do Internet Explorer adequadamente.

Este método já inclui as verificações pelo engine assumido pelo IE8 por meio de combinações de tags de compatibilidade e/ou doctypes:

var engine = null;

if (window.navigator.appName == "Microsoft Internet Explorer")
{
   // Este navegador é IE, mas qual???
   if (document.documentMode) // IE8 pois o objeto document tem a propriedade documentMode
      engine = document.documentMode;
   else // Entre IE5 e IE7
   {
      engine = 5; // Assumindo o IE5 até que alguém prove o contrário. IE5 e IE6 são muito parecidos então pode assumir o 5
      if (document.compatMode)
      {
         if (document.compatMode == "CSS1Compat")
            engine = 7; // IE 7
      }
   }
}

Divirtam-se!