ASP.NET MVC 4 - Renderização adaptativa

Existem algumas melhorias no ASP.NET MVC 4, relacionadas a renderização das telas em dispositivos móveis. Agora veremos quais as principais melhorias para quem deseja desenvolver site compatíveis com iPad, iPhone, Android, Windows Phone, etc.

Algumas dessas melhorias são na verdade mudanças no template padrão de projeto ou criação de novos templates no Visual Studio e outras são a nível de funcionalidades implementadas no próprio ASP.NET MVC.

Renderização adaptável


Quando falamos de renderização adaptável, estamos nos referindo a capacidade exibir de formas diferentes uma página dependendo do dispositivo que esteja sendo utilizado no momento. Um exemplo claro disso é quando temos que exibir a mesma página em tamanhos diferentes (usando um tablet, PC ou um celular).

Tag meta viewport


Adaptar a exibição pode ser bem fácil, quando usamos as capacidades do CSS e HTML. Por exemplo, podemos definir uma tag de metadado na página para fazer o navegador entender que o tamanho da página é diferente de um desktop. Isso é necessário porque por padrão os browsers mobile sempre tentam otimizar a exibição da página se comportando como se fossem um browser desktop, já que a maioria dos sites na internet não são otimizados para o mundo móvel.

Podemos então colocar no cabeçalho da página a tag meta viewport, para habilitar que o tamanho do dispositivo seja levado em consideração ao invés do tamanho padrão de um desktop.

<meta name="viewport" content="width=device-width" />

CSS media queries


Com a tag meta viewport fazemos com que o browser seja sensível a alterações de tamanhos de tela, com isso é possível usar CSS para renderizar certos estilos para determinados tamanhos de tela e mídia que estão sendo utilizados. Esta funcionalidade do CSS chama-se mídia queries e pode ser utilizada de duas maneiras.

Diretamente na tag link, na hora de importação do estilo CSS:

<link rel="stylesheet" media="screen and (min-width: 800px)" href="site-800px.css" />
<link rel="stylesheet" media="screen and (min-width: 1280px)" href="site-1280px.css" />

Ou dentro do próprio código CSS, como se fosse seção que agrupa regras específicas para aquele tipo de dispositivo:


@media screen and (min-width: 800px) {
    body { background-color: blue; }
}
@media screen and (min-width: 1280px) {
    body { background-color: white; }
}

No exemplo acima, a cor de fundo do corpo da página é modificado para azul se a largura do browser for 800px e para branco caso seja 1280px. Para ver a alteração sendo feita, basta diminuir a janela do navegador.


O próprio template de projeto do ASP.NET MVC 4 já adiciona essas capacidades ao seu projeto, para ver no template padrão em ação, basta diminuir e aumentar a janela do seu navegador, observe que o conteúdo se adapta ao novo tamanho.

Segue exemplo, da tela adaptada usando somente as capacidades do HTML e CSS:

Display Modes


Caso seja necessário adicionar capacidades a renderização em dispositivos móveis, que dependam de programação. É possível usar uma funcionalidade do ASP.NET MVC 4 chamada Display Modes. 

No mundo móvel que temos hoje é cada vez mais comum pensarmos em sites que funcionam em todo tipo de dispositivo. O ASP.NET MVC 4 melhora a vida do desenvolvedor tornando simples e padronizado o desenvolvimento de aplicações web que rodam em vários browsers e várias plataformas.

Para saber mais:

 

Aprofunde seus conhecimentos na comunidade de Asp.net

ASP.NET MVC 4 - MSDN

Media types - W3C

Display Modes - Blog Waldyr Felix

Conheça o MID (Most Influential Developer) e faça parte desse time

Exibições: 1141

Comentar

Você precisa ser um membro de DevBrasil para adicionar comentários!

Entrar em DevBrasil

Comentário de Filipe Araujo em 2 outubro 2012 às 14:53

num resultado final prático, qual seria a diferença de usar isso ao invés de um framework css responsive? que já existe de montes e bem documentados...

Comentário de Klenio Silva Ribeiro Leite em 12 setembro 2012 às 12:47

Fala Thiago Diniz, tudo blz? cara eu não tinha muito uma visão correta relacionada a formatação de artigos, até pensei em desistir, contudo perseverei e acreditei na seriedade e palavras dos que fazem - diga-se de passagem: com muita seriedade - a DevBrasil e com o apoio do Márcio Araújo tive a honra de ter um artigo meu publicado (estava muito "à quem" das reais necessidades de formatação (que por sua vez têm toda razão de existir)). Acredite que, com certeza, seu artigo será publicado.

Comentário de Cleiton Felipe de Moraes em 3 agosto 2012 às 17:54

Legal Waldyr muito bom o post....

Comentário de Thiago Diniz em 30 julho 2012 às 13:02

sem problemas. resolvi retirar o artigo. quero por mais coisas no artigo como exemplos.

Comentário de Márcio Araújo em 30 julho 2012 às 10:30

Olá Thiago Diniz, já vi seu artigo até mesmo já passei alguns dados para ser corrigido. Hoje existe uma demora sim, mas é uma demora sadia onde passo um pente fino com outras pessoas para poder liberar de vez. Assim que puder entre em contato comigo via chat !

Comentário de Thiago Diniz em 29 julho 2012 às 14:44

Olá amigo, gostaria de sua ajuda. Fiz um artigo que fala sobre MVC4 mas acho que ficará na geladeira como muitos. Não por erro de portugues, mas pelas regras e formatações de como expor. Em suas mãos sei que ficará legal. Sabe, muitas vezes muitos deixam de aprender por burocracias. Não veja como uma reclamação, estão certos ! é o ambiente deles e suas regras.

se aceitar, me fale. Apenas quero contribuir. A empresa em que trabalho me deixa experimentar e treinar in loco com instrutores maravilhosos do mercado e pretendo acrescentar.

Comentário de William do Nascimento em 21 julho 2012 às 17:29

Alguém sabe de algum Webcast previsto?

Comentário de Márcio Araújo em 19 julho 2012 às 21:12

Legal, tinha visto falando sobre isso em um Post do porta25 : http://www.porta25.com.br/blog/2012/06/13/criacao-de-aplicativos-we...   

Comentário de Thiago Lunardi em 19 julho 2012 às 14:39

Muito legal! Muito legal mesmo! Com a preocupação que tenho desevolvendo web para monitores tradicionais e wide, dipositos móveis com resoluções diversas como celulares e tablet, isso vai ajudar demais!

© 2020   Criado por Ramon Durães.   Ativado por

Badges  |  Relatar um incidente  |  Termos de serviço