Usando controles HTML para criar excelentes aplicativos estilo Metro

Blog do desenvolvedor de aplicativos do Windows 8

Ideias sobre a criação de aplicativos com o estilo Metro para o Windows 8, da equipe de engenharia do Windows 8

Usando controles HTML para criar excelentes aplicativos estilo Metro

  • Comments 0

Com o Windows 8, você pode usar HTML para criar aplicativos estilo Metro. O que talvez você não perceba é que ao usar controles HTML diretamente, você terá automaticamente a nova experiência do Windows 8. Aprimoramos o HTML para que você possa criar aplicativos de força industrial que tenham capacidade de toque, mantendo ao mesmo tempo a excelente flexibilidade do uso de HTML. Queremos que você crie, rapidamente e eficientemente, aplicativos que se destaquem.

Especificamente, queremos que você continue aproveitando os controles comuns de HTML, como <button>, a fim de que você possa criar excelentes experiências do Windows 8 com seu conhecimento atual. O Windows 8 permite isso com as novas implementações dos controles HTML padrão, que têm experiências do Windows 8 incorporadas neles. Por padrão, todos esses controles padrão têm a nova aparência do Windows 8, uma excelente experiência de toque e um sólido suporte de globalização e localização. Ao usar esses controles HTML padrão, você pode criar excelentes aplicativos de estilo Metro que seus clientes irão adorar, mantendo ao mesmo tempo a flexibilidade que você deseja do HTML.

A equipe do Windows 8 quer facilitar o máximo possível sua criação de excelentes aplicativos que os usuários irão adorar usar. Como um estudo de caso, selecionamos um dos controles mais simples, <button>, e mostraremos a você como o novo <button> no Windows 8 melhora a sua produtividade. Com dicas e sugestões discutidas aqui, nós ajudaremos você a obter o máximo do HTML para Windows 8 para criar um excelente aplicativo estilo Metro.

O botão do Windows 8

Se você já leu algumas de nossas diretrizes de design e conversas, já conhece algumas das diretrizes de design de um excelente aplicativo estilo Metro:

  1. Aplique a aparência do estilo Metro
  2. Desenvolvido para toque
  3. Código com conceitos básicos (por exemplo, globalização e acessibilidade) em mente
  4. Tenha velocidade e fluidez

Os controles HTML atualizados no Windows 8 ajudam você a seguir estas diretrizes de design sem dificuldade, pois queremos que você esteja no topo do sucesso:

O topo do sucesso: em contraste a muitas dificuldades para se ter êxito através de várias tentativas e surpresas, queremos que nossos clientes simplesmente tenham práticas vencedoras ao utilizar nossa plataforma e estruturas. Quando é fácil se envolver em dificuldades, acaba havendo falha.

-Rico Mariani, arquiteto parceiro no Internet Explorer

Então, vamos examinar como o uso do <button> permite que seus aplicativos fiquem no topo do sucesso e atinjam naturalmente os traços de um excelente aplicativo estilo Metro.

Aplique a aparência do estilo Metro

Quisemos tornar o mais fácil para você a criação de uma interface de usuário usando o design de estilo Metro, fornecendo ao mesmo tempo a você a flexibilidade e o poder para personalizar essa aparência para as necessidades e marca exclusiva de seu próprio aplicativo. Se você tiver tentado criar um aplicativo Windows 8 com JavaScript e HTML usando os modelos VS, deve ter observado que todos os controles HTML padrão, como <button>, são fornecidos o design estilo Metro por padrão, como visto aqui:

<button>Windows 8 Rocks!</button>

 

Botão por padrão no Internet Explorer 10
Figura 1: Botão por padrão no Internet Explorer 10
Botão em aplicativos estilo Metro no Windows 8

Figura 2: Botão em aplicativos estilo Metro no Windows 8

Como isso funciona nos bastidores? O Windows 8 fez dois aperfeiçoamentos aqui: Primeiro, aprimoramos as capacidades de estilo fornecidas para os controles HTML, como <button>, para fornecer a você mais flexibilidade do que nunca através de CSS, a fim de oferecer elementos visuais para as diferentes partes e estados visuais que você vê em controles. Depois, fornecemos elementos visuais no estilo Metro padrão para todos os controles HTML através de duas folhas de estilos padrão prontas, que fazem parte do Biblioteca do Windows para JavaScript (WinJS) e estão incluídos por padrão em todos os Modelos do VS.

Nova infraestrutura de controles HTML

Modificamos a forma como os controles são criados do núcleo, a fim de fornecer a você mais flexibilidade para o estilo dos controles. Na verdade, usamos os mesmos aperfeiçoamentos de estilo para definir a aparência padrão para todos os controles HTML no Windows 8.

A maioria dos navegadores atualmente renderiza controles usando imagens geradas anteriormente. Sempre que você aplica um estilo a um controle, o navegador descarta a imagem com código, renderiza novamente o controle em uma aparência de linha de base simples e então aplica o estilo desejado sobre isso.

Para o <button>, você pode ver que, mesmo tendo aplicado somente uma cor da tela de fundo, o segundo botão agora tem uma borda com uma aparência 3D. Essa borda 3D faz parte da aparência da linha de base:

<button>Normal</button>

<button style="background-color: red;">Styled</button>

Estilo do botão

Figura 1: Botões normal e de estilo no Internet Explorer

A aparência padrão através de imagem com código tem limitações em termos de estilo. Você não pode simplesmente aplicar estilo diretamente em um dos novos estilos. Além disso, não é imediatamente evidente o que acontecerá ao estilo quando você aplica um estilo a um bitmap gerado anteriormente. Portanto, o Windows 8 não fornecerá a aparência original de controles HTML através de uma imagem com código. Recriamos todos os controles HTML do zero para serem renderizados usando primitivas baseadas em vetor, CSS, a fim de permitir que você aplique estilo diretamente sobre o controle.

Acrescentamos a flexibilidade para você acessar as partes internas dos controles. Para um controle como a caixa de seleção, você pode selecionar a marca de seleção interna usando os pseudoelementos de -ms-check e estilo nesse elemento interno separadamente da caixa.

input[type=checkbox]::-ms-check
{
background-image: url("myCheckMark.svg");
}

Para obter uma lista completa do que acrescentamos aos controles HTML, consulte Início rápido: controles de estilo (aplicativos estilo Metro usando JavaScript e HTML).

Se você praticar um pouco mais o estilo CSS, agora poderá ter alguns estilos bem interessantes fora dos controles que antes não eram possíveis.

Caixa de seleção
Figura 2: Exemplos de caixa de seleção com estilo

Dê uma olhada nos controles comuns HTMS de amostra e consulte Início rápido: controles de estilo para obter mais informações.

Outra vantagem para criar todos os nossos controles fora de primitivas do CSS é que temos excelente escala. Isso é especialmente importante porque o Windows 8 suporta um ecossistema avançado de dispositivos e é fundamental para os controles para dimensionar para todas as resoluções de tela e DPIs.

O uso de primitivas do CSS permite que todos os nossos controles sejam automaticamente bem dimensionados e exibidos com nitidez para todas as resoluções de tela e DPIs.

Botões vetoriais pequenos, médios e grandes

Figura 3: imagens obtidas com o CSS permanecem nítidas em cada resolução

Então, se você escolher personalizar seus controles, certifique-se de continuar usando tecnologia baseada em vetor, como SVG ou primitivas do CSS. O uso de imagens rasterizadas deixará os controles com aparência de pixel quando dimensionados e seu aplicativo não ficará com uma aparência tão bonita em todos os dispositivos do Windows 8.

Botão pequeno e borrado de rasterizaçãoFigura 4: as imagens aparecerão borradas quando minimizadas
Botão grande de rasterização em pixel

Figura 5: as imagens aparecerão em pixel quando ampliadas

Para obter mais informações sobre como processar dimensionamento, consulte a amostra de SDK de dimensionamento.

O Internet Explorer 10 e HTML para Windows 8 compartilham a mesma plataforma de HTML. Isso significa que todos os controles HTML para Internet Explorer 10 também serão criados usando o CSS e páginas da web, a fim de que também possam ser dimensionados com nitidez em diferentes resoluções de tela e DPIs no Windows 8!

Aparência do estilo Metro por padrão

Fornecemos a nova aparência de estilo Metro de todos os controles através de uma folha de estilos do CSS. Queremos mostrar com transparência como o novo design de estilo Metro no Windows 8 foi implementado e permite que você integre sua própria marca nele, como remover cores dos controles para usar o esquema de cores da marca de seu próprio aplicativo. Aproveite essa flexibilidade! Aqui está um link para a amostra de SDK do rolo de tema, que facilita a aplicação de cores nos controles.

Agora, para obter a aparência padrão, você precisa apenas selecionar uma das duas folhas de estilos padrão; a única diferença entre elas são os esquemas de cores nos quais são baseadas. O ui-dark.css contém cores de controle mais adequadas para uma tela de fundo escura e o ui-light.css contém cores de controle mais adequadas para uma tela de fundo clara. Para aplicativos que exibem principalmente imagens ou vídeo, recomendamos usar a folha de estilos escura e para aplicativos que contêm muito texto, recomendamos o uso da folha de estilos clara. (Se você estiver usando um esquema de cores personalizado, use a folha de estilos que parece melhor com a aparência de seu aplicativo.) Você pode escolher um esquema de cores do aplicativo para iniciar simplesmente ao fazer referência a uma dessas folhas de estilos no seu projeto usando este HTML:

<head>

<!-- Dark Style Sheet reference -->

<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">

<!-- or Light Style Sheet reference -->

<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">

<!—Other header content -->

</head>

A forma mais fácil de aprender como aplicar e criar sobre o estilo padrão é, na verdade, abrir a folha de estilos padrão do CSS e consultar os estilos do CSS nela.

Se voltarmos para o exemplo do botão original, quando você tem a mesma linha de código que vimos anteriormente em um aplicativo de estilo Metro, agora você terá isto:

ButtonCSS

Figura 6: botões normal e de estilo

Em aplicativos de estilo Metro, somente os estilos que você tiver aplicado agora serão substituídos. Agora você pode criar facilmente a marca de seu aplicativo, mantendo ao mesmo tempo a nova aparência do estilo Metro.

Como você pode ver, agora você pode utilizar melhor o estilo de seus controles e eles serão automaticamente dimensionados com nitidez em todas as resoluções de tela e DPIs. Queremos facilitar para que você obtenha a aparência que deseja em seu aplicativo, mantendo ao mesmo tempo a aparência do estilo Metro.

Desenvolvido para toque

Para ajudá-lo a criar excelentes aplicativos, queremos simplificar a criação de uma interface de usuário que funcione para toque, mouse e teclado, e forneça aos usuários o conjunto conhecido de interações com as quais eles podem contar ao trabalhar consistentemente no sistema.

Atualmente, os controles HTML já têm excelente suporte a mouse e teclado. Como o toque é um novo modo de interação, precisamos habilitar melhor suporte a toque em todos os controles HTML. Para que a codificação seja melhor para toque, você deve primeiro compreender os desafios únicos da entrada de toque.

O uso dos dedos não é preciso

O uso de dedos é um mecanismo de entrada menos preciso em comparação ao ponteiro do mouse com precisão de pixel.

Figura 7: a imagem mostra que a largura do dedo médio de um adulto é de 11 mm, enquanto a de um bebê é de 8 mm e alguns jogadores de basquete têm dedos com mais de 19 mm!

tamanho_do_dedo

Para melhorar a precisão do toque de usuários, a plataforma HTML do Windows 8 acrescentou estes recursos:

  • Os controles são dimensionados para toque

Por padrão, os controles HTML de estilo Metro são dimensionados para se ajustar aos dedos de tamanho médio. Isso permite que os usuários acertem os controles com confiança. O tamanho de 7x7 mm é um bom tamanho mínimo se o toque no alvo errado puder ser corrigido em um ou dois gestos ou em cinco segundos. Em nossa folha de estilos padrão, todos os controles de botão têm uma altura e largura mínimas que fornecem a você uma área mínima de 7x7 mm. Aqui está um exemplo com os valores da folha de estilos padrão.

button, input[type=button], input[type=reset], input[type=submit] 
{
min-height: 32px;
min-width: 90px;
}
  • Seleção por área de toque

A seleção por área de toque no Windows 8 ajuda os usuários ao fazer com que o sistema localize o controle mais próximo na geometria de contato e selecionar novamente o destino do ponto de toque em direção a ele.

  • Desambiguação de toque

O mecanismo de desambiguação de toque acrescentou itens inteligentes ao sistema, a fim de ajudar a determinar melhor os destinos para usuários quando o dedo cobrir mais de um controle.

Não almeje resposta

Ao usar um mouse, os usuários podem primeiro almejar o cursor, garantir que o ponto de tamanho de 1 pixel seja preciso naquilo que eles querem ativar e então clicar. Mas com o toque, você precisa parar sobre a tela sem resposta para indicar se aquilo no qual você parou é preciso. Quando você fizer contato com a tela, ativará imediatamente a IU. Isso significa, com um mouse você está pronto, almeje e vá em frente. Enquanto com o toque, você simplesmente vai em frente. Como você não precisa almejar, a margem de erro do toque é muito maior.

Para permitir que os usuários utilizem o toque com confiança, o Windows 8 definiu um conjunto de declarações visuais interativas para controles, que indica quando os usuários estão prestes a invocar um controle. Por exemplo, o usuário verá os mesmos elementos visuais para permitir que eles saibam o que foi ativado e novamente quando tiverem cancelado com êxito a ativação se mudarem de ideia. O Windows 8 criou esses elementos visuais diretamente nos controles por meio da folha de estilos padrão. O Windows 8 fez isso ao mapear estados do CSS para os estados de interação de toque. Aqui está um exemplo do mapeamento do CSS para <button>:

Mapeamento do CSS de estados de interação de toqueFigura 8: mapeamento do CSS de estados de interação de toque

Vejamos mais detalhadamente o conjunto de estados de interação e como criamos os elementos visuais nos controles.

Estado pressionado

Os controles agora fornecem resposta visual sólida quando pressionados, a fim de que o usuário tenha confiança em para qual botão o sistema foi destinado.

Estado de toque do botão

Figura 9: estado de toque do botão

Quando um usuário pressiona o botão, aplicamos ambos os pseudoestados do CSS :hover e :active ao botão, e fornecemos resposta visual ao aplicar cor da tela de fundo ao estilo e cor de fonte no CSS:

button:hover:active {
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
}

Mapeamos :hover e :active para toque e não simplesmente o estado :active, a fim de que possamos usar um modelo de programação que seja semelhante ao mouse. Dessa forma, você poderá facilmente usar o mesmo código para ambos os tipos de entrada. Quando você usa o mouse para clicar em um botão, o mouse geralmente já está na parte superior do botão e já está no estado :hover. Quando você clica em um botão com o mouse, um :active adicional será acrescentado.

Cancelando

Se o usuário vir que ele tocou no botão errado, ele poderá retirar seu dedo para cancelar. Desde que o botão esteja fora do botão, ele voltará ao seu estado normal para indicar que a interação será cancelada.

Para atingir o visual desativado, mantemos :active aplicado ao botão e invalidamos o estado :hover, quando o usuário soltou o botão. Como não há estilo para o estado :active em si, o controle volta para o estilo normal, que se parece como quando o botão retorna ao seu estado de repouso. Isso fornece ao usuário uma indicação visual de que a ação do botão foi cancelada. Isso é realmente o comportamento existente com mouse. No IE9, isso era atingido por uma troca de bitmap de tema privado. No IE10, expomos a alteração através de estados públicos do CSS, a fim de que você possa atingir o mesmo efeito quando estilizar o controle.

Ao usar controles de estilo, certifique-se de que não apenas usar o estilo do estado :active para seu estilo pressionado, pois esse estado representa o comportamento de cancelamento e, portanto, deve ser o mesmo estilo do estado normal. O estado correto para uso para ativar é o estado :hover:active.

Estado de cancelamento de botão

Figura 10: estado de cancelamento de botão

Você não quer que os usuários se preocupem com o fato de retirar o dedo para evitar ativar acidentalmente outro controle. Por exemplo, se os botões OK e CANCELAR estiverem próximos um do outro e o usuário tiver tocado no botão OK por engano e quiser soltar, ele não deve ser preocupar em acionar acidentalmente o botão CANCELAR. O botão CANCELAR não deve ser ativado com seu estilo ativo nesse caso.

Isso funciona por padrão na plataforma HTML, pois o <button> captura a entrada de toque. Portanto, desde que o toque para baixo esteja ativo no botão, o usuário poderá confortavelmente soltar sem se preocupar em acionar algo mais por engano.

Mais de um clique

O toque permite que os usuários tenham mais de um ponteiro na tela a qualquer momento; isso é conhecido como multitoque, e a direção e a velocidade da entrada de toque, conhecidos como gestos, têm significado específico. Por exemplo, um dedo tocando em um lado da tela e movendo-se horizontalmente na tela é conhecido como um passagem de dedo.

Com o multitoque na plataforma HTML do Windows 8, agora permitirmos que mais de um controle tenha o estado :active e eventos de clique ao mesmo tempo, a fim de que quando um usuário tocar na tela ele possa ativar mais de um controle ao mesmo tempo. Um controle simples como o <button> pode ser usado para cenários como teclas em um aplicativo de teclado ou controles para um jogo!

Além disso, a detecção de gesto nos permite reconhecer os diferentes gestos e atribuir significado a eles para controles HTML. Por exemplo, uma passagem de dedo na parte superior de um botão é rapidamente convertida para movimento panorâmico da página. E uma passagem de dedo na parte superior do controle deslizante, <input type=”range”>, é interpretada como entrada para o controle. Esse trabalho ajudará os aplicativos a reagirem tranquilamente a gestos de toque, independentemente de quais controles você use.

Ao tornar todos os nossos controles HTML o padrão para uma excelente experiência de toque com bons indicadores visuais, integrar aprimoramentos de seleção por área de toque, oferecer suporte a multitoque e reação harmoniosa ao gesto de toque, seu aplicativo estilo Metro HTML estará automaticamente habilitado para toque se você usar os controles e seguir as dicas e sugestões discutidas aqui!

Funções básicas: globalização e acessibilidade

Um excelente aplicativo deve atingir o maior número de pessoas possível. Isso significa que o aplicativo precisa ser globalizado e acessível. Para ajudá-lo a atingir essa meta, integramos essas partes de funções básicas em todos os controles HTML.

Suporte de fonte

Incorporamos o suporte direto de fonte nos controles HTML. Mesmo se você não pretende localizar seu aplicativo, seu aplicativo ainda poderá exibir o texto localizado em qualquer um dos idiomas para os quais o Windows 8 oferece suporte. Isso é especialmente útil sempre que seu aplicativo precisar exibir texto com base na entrada dos usuários, por exemplo, em um controle de caixa de texto. Seu aplicativo poderá exibir corretamente o texto, pois realizamos o trabalho para garantir que o controle use a fonte compatível com esses caracteres. Além disso, fornecemos a fonte de estilo Metro preferida, que corresponde corretamente à versão localizada do Windows. O Windows seleciona a fonte de estilo Metro preferida para todos os idiomas. Resumindo, retiramos o trabalho de adivinhação do suporte da fonte.

Se você quiser saber como fizemos isso, poderá simplesmente abrir a folha de estilos padrão novamente para ver que, para muitos idiomas, definimos automaticamente uma lista de fontes de fallback. No próximo exemplo, para japonês, a primeira fonte selecionado é Meiryo UI. Mas se seu aplicativo tiver quaisquer caracteres Unicode que a fonte Meiryo UI não cubra, então a próxima fonte de fallback será a Segoe UI e se isso não for suficiente usamos a Ebrima e assim por diante. Portanto, para a maioria dos cenários, seus caracteres serão cobertos pelas fontes preferidas de estilo Metro do Windows. Mesmo se não tivermos uma fonte padrão para um idioma específico, teremos o padrão para fonte de fallback na plataforma na web. Portanto, os usuários nunca verão caracteres de espaço reservado em seus controles!

body:lang(ja), .win-type-xx-large:lang(ja), .win-type-x-large:lang(ja), .win-type-large:lang(ja), .win-type-medium:lang(ja), .win-type-small:lang(ja),

.win-type-x-small:lang(ja), .win-type-xx-small:lang(ja), input:lang(ja),textarea:lang(ja),

.win-textarea:lang(ja), button:lang(ja), select:lang(ja), option:lang(ja)
{
font-family: "Meiryo UI", "Segoe UI", "Ebrima", "Nirmala UI", "Gadugi", "Segoe UI Symbol", "Khmer UI", /* etc.*/
}

Além disso, como você pode ver do exemplo anterior, não apenas acrescentamos isso ao elemento <body> ou apenas os controles HTML> Estamos fornecendo uma lista de estilos tipográficos que você pode aplicar ao seu conteúdo de aplicativo, a fim de que possa obter essa seleção de fonte inteligente automaticamente. Para obter mais informações, consulte Classes CSS WinJS para tipografia.

Selecionando os recursos certos

Criamos um carregador de recursos que facilita para que você localize seus aplicativos. Use-o para carregar o conjunto certo de cadeias localizadas para seu aplicativo que funcione perfeitamente para todos os controles HTML. O carregador de recursos fornece mecanismo de fallback, a fim de que você não precise se preocupar com a matriz de idiomas para as quais precisa oferecer suporte. Agora você pode mencionar declarativamente seus recursos em seu HTML e o carregador de recursos selecionará automaticamente o recurso certo para você.

<button data-win-res="{textContent: ‘string2’}">OK</button>

Acessibilidade incorporada

Para ajudar seu aplicativo a atingir um conjunto amplo de público-alvo, todos os controles HTML têm infraestrutura de acessibilidade incorporada.

Em primeiro lugar, como todos os controles HTML têm significado semântico, incorporamos suporte a leitor de tela e narrador. O objetivo de uma tela é identificar e interpretar elementos visuais na tela para usuários com necessidades visuais especiais. Para um <button>, um leitor de tela pode permitir que o usuário saiba que o aplicativo espera uma ação, e um botão com aparência semelhante incorporado usando um <div> não. Então para que leitores de tela e narrador trabalhem devidamente com um <div>, você precisa adicionar seus próprios atributos ARIA.

Em segundo lugar, garantimos que todos os controles HTML continuam oferecendo suporte a alto contraste. O alto contraste foi desenvolvido para pessoas que tenham necessidades visuais especiais. Os esquemas de cor de alto contraste podem tornar a tela mais fácil para visualização para alguns usuários ao aumentar o contraste de tela com combinações alternativas de cor.

Incorporamos essas cores na folha de estilos padrão e os controles alternam automaticamente para cores de alto contraste quando o Windows está definido para aparecer em temas de alto contraste, permitindo que seu aplicativo esteja em conformidade com alto contraste por padrão. Então, mesmo se você tiver aplicado estilo e atualizado as cores dos controles intrínsecos padrão, desde que os seletores usem a mesma especificidade, o Windows garante que as cores de alto contraste certas sejam exibidas. Você pode aprender mais sobre isso em nosso vídeo Stand out in styling for your HTML app do BUILD talk.

Atingimos alternância de alto contraste simplesmente ao adicionar uma consulta de mídia para modo de alto contraste e definindo todas as cores necessárias para cada um dos controles intrínsecos na folha de estilos padrão. Se você tiver curiosidade em saber quais são as cores, basta abrir a folha de estilos padrão e dar uma olhada.

@media (-ms-high-contrast) 
{
/* high contrast definition */
}

Ao incluir excelente suporte de fonte, um carregador de recursos para ajudá-lo a selecionar os recursos localizados certos e ao incorporar acessibilidade, facilitamos o máximo possível para que seus aplicativos atinjam o amplo conjunto de usuários do Windows.

Torne seu aplicativo rápido e fluido

Para garantir que seu aplicativo HTML tenha excelente desempenho em todos os dispositivos do Windows 8 (incluindo ARM), queremos garantir que os blocos de criação de seus aplicativos, os controles, tenham ótimo desempenho.

O Windows 8 inclui um mecanismo HTML que melhora as experiências de navegação (a do estilo Metro e da área de trabalho), bem como aplicativos estilo Metro que usam HTML5 e JavaScript. O mecanismo HTML comum oferece um forte suporte para os padrões da Web e um modelo de programação da Web sempre rápido, seguro e avançado para as duas experiências de navegador, bem como para aplicativos estilo Metro. Isso significa que os aplicativos estilo Metro de HTML todos têm os benefícios de desempenho do IE10. Aqui estão alguns dos destaques que afetam controles HTML:

  • Aceleração de hardware Direct2D

Como os controles são nativos para a plataforma HTML, foi possível utilizar a aceleração de hardware Direct2D da plataforma HTML. Agora podemos usar a GPU para todos os elementos gráficos e texto em seu aplicativo HTML do Windows 8. A GPU pode usar hardware especializado para atualizar a tela eficientemente. Ao usar a GPU para renderização visual, liberamos a CPU para realizar outras opções como compilação JIT(Just-in-time) de seu código JavaScript, que pode aprimorar ainda mais o desempenho de seu aplicativo.

  • Toque independente

Uma das áreas nas quais aprimoramos o desempenho da plataforma na web é o movimento panorâmico e zoom. Trabalhamos bastante para garantir que os controles funcionem perfeitamente com as otimizações que fizemos para movimento panorâmico e zoom. Por exemplo, se você usar um controle de botão padrão em uma região de movimento panorâmico e o usuário começar a aplicar movimento panorâmico, o sistema processará a ação de toque na região do movimento panorâmico e o botão em paralelo. Portanto, os usuários finais não terão lentidão, pois temos controles extras para processar e o movimento panorâmico, na verdade, sendo o movimento panorâmico tão rapidamente como seria se não houvesse um botão lá. Trabalhamos para garantir que o uso dos controles não cause qualquer prejuízo na velocidade, ao contrário do que poderia ter acontecido com algumas implementações mais simples de controles.

  • Robustez de toque para controles

Para garantir excelente desempenho para toque, fizemos ajustes no sistema para que seja mais robusto. Um exemplo é que no <button> introduzimos um retardo em mostrar o estado pressionado para permitir outro gesto relacionado a toque, como toque ou passagem de dedo no <button> seja processado primeiro. Dessa forma, não precisamos fazer imediatamente os cálculos de layout principal complicados e que exigem muito da CPU para cada interação. O resultado é que se os usuários pretendem tocar apenas o botão, então o botão se moverá para dentro e para fora do estado pressionado rapidamente e de volta ao normal, sem precisar de contêineres pai para atualizar seu layout. Pequenos ajustes como esse ajudam na robustez geral de seus aplicativos HTML.

Ferramentas integradas

Além de todos os excelentes recursos de plataforma que descrevemos aqui, também fornecemos ferramentas de primeira classe para os controles HTML.

Aqui estão os destaques de algumas das melhorias em ferramentas em nossas ferramentas Visual Studio e Blend:

  • No Visual Studio e Blend, você tem intellisense de primeira classe para HTML, CSS e JavaScript. Por exemplo, no Visual Studio, quando você indica que quer definir uma cor da tela de fundo, em vez de intellisense com base no texto, agora temos um seletor de cores.

Seleção de cor embutida no BlendFigura 11: seleção de cor embutida no Blend

  • No Blend, agora você pode arrastar e soltar todos os controles da caixa de ferramentas diretamente na superfície de design. Além disso, agora você pode criar o layout e redimensionar os controles diretamente na superfície de design. Dessa forma, você pode distribuir o layout visualmente dos controles em seu aplicativo.

Botão na superfície de design do BlendFigura 12: botão na superfície de design do Blend

  • No Blend, você pode aplicar estilo aos controles usando o painel de estilo.

Por exemplo, você pode usar o seletor de cor integrado para definir cor da tela de fundo e primeiro plano.

painel_de_estilo

Figura 13: o painel de estilo com seletor de cor no Blend

Ou você pode fazer ações mais complicadas, como definir transações no controle.

Painel de propriedades de transição no BlendFigura 14: painel de propriedades de transição no Blend

Para obter mais informações sobre o que é fornecido nas ferramentas, consulte Blog do Soma.

Resumo

Nesta postagem, conversamos muito sobre o controle <button>, mas toda a excelente funcionalidade que se aplica ao <button> se aplica a todos os outros controles nativos também.

Fizemos muitos investimentos para ajustar controles HTML para que você crie aplicativos estilo Metro. Esses controles agora funcionam muito bem em uma ampla variedade de fatores forma, podem oferecer aos usuários uma excelente experiência e aumentam o alcance de seu aplicativo. Alguns dos principais aplicativos disponíveis no Release Preview usam principalmente controles HTML, como o Windows 8 App Store e os aplicativos Email, Calendário e Foto. Ao usar esses controles, seu aplicativo pode obter a aparência de estilo Metro gratuitamente e você pode se concentrar no valor principal de seu aplicativo.

Para obter mais informações, consulte:

Adicionando controles e conteúdo

Diretrizes de UX de controle para aplicativos estilo Metro

Amostras de SDK:

Estilo do CSS: criando sua amostra de aplicativo com a sua marca

Amostra de controle em HTML

E //BUILD/ talks sobre controle e estilo.

-- Kathy Kam, gerente sênior de programas, Windows


  • Loading...
Leave a Comment
  • Please add 2 and 5 and type the answer here:
  • Post