Navegação com o estilo Metro: um mecanismo, duas experiências, nenhum comprometimento

Criando o Windows 8

Nos bastidores com a equipe de engenharia do Windows

Navegação com o estilo Metro: um mecanismo, duas experiências, nenhum comprometimento

  • Comments 0

Estamos muito felizes por termos recebido uma recepção tão calorosa dos desenvolvedores, ontem, quando demos início a uma grande oportunidade com o Windows 8. Agora, nosso foco no B8 partirá para o Developer Preview, o que ele oferece e de que forma ele evolui. Esperamos que os participantes do blog estejam instalando e usando a compilação. Embora ele esteja no início e voltado para os desenvolvedores, seu uso também é bastante divertido. Estou escrevendo todas as postagens da conferência pelo tablet com Preview da Samsung!

Gostaríamos de falar mais sobre a navegação com o estilo Metro e o trabalho que temos realizado para oferecer uma experiência em navegação verdadeiramente flexível. Estamos muito focados no suporte ao HTML5 e nos padrões com o melhor desempenho e confiabilidade, em conjunto com os recursos de segurança bem conceituados do IE. Também continuamos a evoluir e a oferecer a experiência desktop que utiliza as mesmas tecnologias HTML5. É dessa forma que proporcionamos uma experiência em navegação com o IE10 sem abrir mão de nada. Esta postagem descreve o Platform Preview 3 do IE10 no Developer Preview do Windows 8. Dean foi o criador desta postagem. --Steven

Há muito mais a ser feito para evoluir a experiência de navegação do que apenas disponibilizá-la para um dispositivo sensível ao toque. Para proporcionar a melhor navegação em qualquer formato no Windows 8, reimaginamos a experiência do navegador da Web e a arquitetura adjacente.

Nossa abordagem no Windows 8 começa com um excelente mecanismo de navegação HTML5 que origina duas experiências distintas. Esse único mecanismo fornece suporte avançado para padrões da Web, desempenho acelerado de hardware, segurança, privacidade e muito mais. Em seguida, desenvolvemos duas experiências com base nesse mecanismo: uma nova experiência com o estilo Metro, e outra mais tradicional, com navegador de desktop da geração atual com guias e sem distrações visuais.

Como resultado, o usuário pode utilizar um dispositivo, obtendo ambas as experiências sem abrir mão de nada, como em um tablet imersivo e um notebook flexível. Você também pode ter ambas as experiências em um desktop potente com vários monitores, sem abrir mão de nada.

Você terá a melhor experiência imersiva de toque primeiro em sites HTML5 com o navegador com estilo Metro no Windows 8. Se preferir um gerenciamento mais tradicional de guias e janelas, você terá tudo isso em uma forma aprimorada com o IE no desktop. Ambos no mesmo mecanismo do IE10.

Enquanto criávamos uma experiência totalmente nova com o estilo Metro, algo inesperado aconteceu: percebemos que seria a melhor forma de navegar, mesmo com uma tela grande, um computador desktop, um mouse e um teclado. Embora seja um navegador com toque em primeiro lugar, funciona bem com teclado, mouse ou trackpad. Se você tem navegado cada vez mais no celular, já se acostumou com poucas distrações, com um gerenciamento de guias muito mais visual e uma experiência em navegação mais manual e imersiva, com menos “desktop”. É provável que você prefira a nova experiência com estilo Metro do Internet Explorer 10, em comparação com a experiência de desktop.

Um lembrete: o navegador com estilo Metro no atual Windows Developer Preview se destina aos desenvolvedores, e não aos consumidores. Ainda há trabalho a ser feito com a comunidade de desenvolvedores para tornar a experiência pronta para os consumidores (por exemplos, fazer com que os sites atualizem bibliotecas antigas e desatualizadas que não funcionam bem com o IE10, ou garantir que os sites que já são executados sem plug-ins de outros dispositivos trabalhem da mesma forma com o navegador estilo Metro).

Um mecanismo, duas experiências

Devido à importância ao suporte avançado para HTML5 no IE de desktop e no IE com estilo Metro, adaptamos a arquitetura do mecanismo do IE10 para proporcionar ambas as experiências. As duas experiências compartilham o histórico de navegação, os endereços digitados, as configurações e muito mais. O mecanismo comum proporciona uma experiência rápida, segura e potente para os sites atuais e para os aplicativos com estilo Metro:

  • Desempenho. O IE com estilo Metro apresenta o mesmo desempenho líder no mercado que o IE no desktop. Isso inclui aceleração total de hardware de gráficos, vídeo e áudio, JavaScript compilado, otimizações no mecanismo de formatação e novo layout para capacidade de resposta ao toque.
  • Segurança. O IE com estilo Metro apresenta os mesmos recursos líderes no mercado de segurança, privacidade e confiabilidade que o IE no desktop. Isso inclui o SmartScreen, a filtragem XSS e a navegação InPrivate.
  • HTML5. O IE com estilo Metro proporciona o mesmo compromisso com um modelo mais sofisticado de programação em web HTML5 que o IE no desktop. No BUILD, apresentamos novo suporte para sombras de texto CSS, CSS 3D Transforms, IndexedDB, Web Sockets, APIs de arquivos HTML5, histórico de HTML5, hifenização, transições e animações CSS e cache de aplicativos HTML5, além de outros recursos novos mostrados anteriormente em Platform Previews do IE10.

Leia mais sobre o IE de desktop e os detalhes técnicos dos mecanismos de navegação Trident e JavaScript Chakra adjacentes no Blog do IE.

Reimaginando o navegador como um aplicativo com estilo Metro

Quando reimaginamos o navegador como um aplicativo com estilo Metro, vimos uma forma totalmente nova de evoluir a Web.

Por exemplo, o estilo Metro é imersivo. Em uma página da Web no IE com estilo Metro, não há distração visual nenhuma. Você pode usar ações padrão para obter a funcionalidade que, em outro produto, o distrairia da Web. É possível pesquisar e compartilhar no IE com estilo Metro usando “símbolos do evento”, assim como você faz em outros aplicativos desse estilo. Você pode usar o símbolo do evento Dispositivos, por exemplo, para reproduzir e projetar vídeos de páginas da Web em dispositivos externos. Você pode alternar o IE lado a lado com outro aplicativo estilo Metro. O uso conjunto de sites e aplicativos estilo Metro é fácil, porque nós os criamos para trabalharem juntos.

O novo estilo Metro é muito mais que um design visual. Ele permite, por exemplo, que você acesse sites importantes digitando menos. Você verá uma lista visual de fácil uso com toque, com seus sites fixos e frequentes, ao abrir uma nova guia ou a barra de endereços:

Imagem mostrando vários sites lado a lado sob o cabeçalho "Frequentes", e vários sites sob o cabeçalho "Fixos" e, abaixo, a barra de endereços da Web com o teclado na tela
Uma
lista visual de fácil uso com toque, com seus sites fixos e frequentes no navegador estilo Metro

Quando o usuário digita na barra de endereço, a lista é filtrada. Quando você exibe suas guias abertas, a barra de endereço é disponibilizada imediatamente, para que você acesse o site desejado, caso ainda não esteja aberto:

Imagem do navegador com estilo Metro aberto no site do BUILD, com várias guias abertas acima da página da Web, e a barra de endereço na parte inferior da tela.
Abrir guias na barra de endereço no navegador com estilo Metro

A verificação ortográfica e o preenchimento automático também reduzem a necessidade de digitar, no acesso aos sites. Repare que você pode até mesmo navegar com o InPrivate e a Proteção contra Rastreamento.

Para facilitar o acesso aos seus sites favoritos, você pode fixá-los na tela inicial do novo Windows 8, da mesma forma que fixa aplicativos estilo Metro.

Fixando um site na tela inicial
Fixando um site na tela inicial

O IE10 oferece controles (como caixas de seleção e botões de opção) com mais espaço ao redor, para facilitar o uso da função de toque. Os desenvolvedores podem tornar suas páginas da Web muito mais fáceis de usar com a função de toque, com padrões da Web como CSS, para controles de estilo. No exemplo abaixo, apresentamos um controle de tipo de entrada de intervalos com uma imagem em plano de fundo personalizada:

Controle HTML5 com imagem em segundo plano no IE10, no Chrome e no Mozilla Firefox
Controle HTML5 com imagem em segundo plano personalizada no IE10 (acima), no Chrome (embaixo à esquerda),
e no Mozilla Firefox (embaixo à direita)

O IE com estilo Metro oferece suporte para movimento panorâmico e toque para controlar o zoom. As páginas são rápidas e fluidas como o resto do sistema, porque o mecanismo HTML5 utiliza a aceleração total de hardware. Isso pode ser visto no desempenho de rolagem e no movimento panorâmico.

Apresentamos uma demonstração do desempenho e de outras partes da experiência de navegação:


Baixe este vídeo para assisti-lo no seu reprodutor de mídia favorito:
MP4 de alta qualidade | MP4 de qualidade inferior

IE com estilo Metro: indo mais além

Enxergamos novas oportunidades para evoluir a Web, como resultado dessa nova experiência de navegação. Há muito trabalho a ser feito com os desenvolvedores de sites, para que esses benefícios sejam realmente aproveitados. O recurso de toque é muito importante, assim como a experiência imersiva. As oportunidades nesse setor são imensas, considerando o tempo que as pessoas gastam na Web hoje em dia.

O Windows Developer Preview atual se destina aos desenvolvedores, e não para os consumidores. Há trabalho a ser feito, por exemplo, para garantir que os sites que já são executados sem plug-ins de outros dispositivos possam trabalhar da mesma forma no IE10. Por outro lado, alguns sites podem precisar atualizar bibliotecas que não funcionem bem com o IE10. Também é importante incluir o navegador estilo desktop para proporcionar a compatibilidade que os usuários esperam de um lançamento do Windows.

Os pessimistas poderão criticá-lo, chamando de “dois navegadores”. Há somente um mecanismo de navegação, que você pode usar com duas “skins” diferentes. Com o passar do tempo, a experiência com o estilo Metro servirá a um número de cenários de navegação cada vez mais amplo, mesmo que o navegador desktop continue desempenhando um papel importante na vida de muitas pessoas. Você pode definir seu padrão com qualquer um dos estilos e alternar entre eles sem dificuldade, ou usar qualquer outro navegador de sua preferência no Windows 8.

Os pessimistas também poderão tentar debater o quanto precisam ou não precisam de diferentes aspectos de cada um dos estilos de navegador. Você poderá se manter permanentemente imerso no mundo Metro, se preferir. O desktop nem será exibido, e o Windows não carregará o código, a menos que você decida executá-lo explicitamente. No entanto, se a experiência do desktop for importante para você, no controle preciso, no gerenciamento avançado de arquivos e janelas, e na compatibilidade com plug-ins, esses recursos estarão ao alcance de um toque. Na arquitetura e no design, fizemos questão de proporcionar uma experiência que não comprometa suas necessidades, mesmo que você utilize apenas um dispositivo. Então, navegue onde se sentir mais à vontade.

Dean Hachamovitch