Na semana passada eu escrevi sobre a nova Atualização das Ferramentas da ASP.NET MVC 3, e depois segui com um post detalhado que cobriu a abordagem de desenvolvimento EF Code First e os novos recursos de Geração Automática de Código (Data Scaffolding) presentes na atualização.
O
post de hoje é uma continuação dessa série e abrange algumas das novas
melhorias da HTML5 que chegam com o lançamento da Atualização das
Ferramentas da ASP.NET MVC 3.
Suporte de Modelos de Projeto para Marcação Semântica HTML5
A
Atualização das Ferramentas da ASP.NET MVC 3 adiciona suporte para que
você opcionalmente use marcação semântica HTML5 ao criar novos projetos
ASP.NET MVC 3. Você pode especificar isto marcando a checkbox "Use
HTML5 semantic markup" (Usar marcação semântica HTML5) ao criar novos
projetos:
Ao selecionar esta checkbox duas coisas acontecem:
1)
Faz com que o VS 2010 use elementos de marcação semântica HTML5 como
<header>, <footer>, <section> e <nav> dentro do
arquivo padrão layout.cshtml que é gerado. Isto substitui os elementos
<div> usados anteriormente para os elementos
header/footer/navigation - que continua sendo o comportamento padrão, se
a checkbox de marcação semântica HTML5 não for selecionada.
2)
Faz com que o VS 2010 referencie a biblioteca JavaScript modernizr.js
por padrão dentro do arquivo layout.cshtml - que entre outras coisas,
permitirá que você use CSS para estilizar elementos de marcação
semântica HTML5, mesmo em navegadores mais antigos como o IE6
(garantindo que seu site ainda funcione em navegadores mais antigos).
Entendendo Marcação Semântica HTML5
A HTML5 introduz uma série de novos elementos e APIs que introduzem novas capacidades comportamentais (recursos como <video>, <canvas>, <svg>, etc).
A
HTML5 também introduz novos elementos (como <section>,
<article>, <aside>, <header> e <nav>) que te
permitem enriquecer o significado e estrutura semântica do seu
conteúdo e páginas. Esses recursos permitem que você escreva suas
páginas de forma que você não tenha que usar elementos opacos
<div> para estruturar tudo, e ao invés disso, estes novos
elementos permitem que você expresse de uma maneira melhor o significado
semântico do seu conteúdo. Isso torna seu código um pouco mais limpo
para leitura, e a longo prazo, esperamos, permita que os browsers e
motores de busca entendam de uma maneira melhor sua marcação HTML e
proporcionem experiências ainda mais ricas.
Quando você cria um
novo projeto ASP.NET MVC 3 com a checkbox "Usar marcação semântica
HTML5" selecionada, o Visual Studio irá usar marcação HTML semântica ao
invés de elementos <div> (onde for apropriado) dentro do arquivo
layout.cshtml que é gerado para o novo projeto. Isso significa que o
topo do site/cabeçalho, é envolto em um elemento <header>, links
de navegação são cercados por um elemento <nav> e o rodapé é
encapsulado dentro de um elemento <footer>.
Aprenda mais sobre a Maração HTML5 Semântica
Bruce Lawson e Remy Sharp tem um excelente livro chamado Apresentando HTML5 (em Inglês) que cobre (entre outros novos recursos da HTML5) como você pode tirar vantagem da marcação semântica da HTML5:
Você também pode ler o artigo da Emily Lewis Usando Hoje as Novas Tags Semânticas da HTML5
(em Inglês) no site ScriptJunkie da MSDN para saber mais sobre o papel
da marcação semântica HTML5 e para ver um exemplo prático da mesma em
ação.
Intellisense para HTML5 no VS 2010 SP1
Com o
VS 2010 SP1, você pode agora alterar a opção da dropdownlist "Target
Schema for Validation" (Esquema Alvo para Validação) na barra de
ferramentas do Editor de Texto para ter como alvo a HTML5:
Quando
você selecionar HTML5 como seu alvo de validação, o motor de
intelliSense HTML dentro do Visual Studio irá prover intellisense
adequada para os novos elementos e atributos da HTML5. Isto é verdade
para ambos os elementos comportamentais, como <canvas> e
<video> bem como elementos semânticos como <article> e
<nav>:
Nota: a próxima versão do VS por padrão honrará o <!DOCTYPE>,
na parte superior da página ao direcionar intellisense, e então
permitirá que você especifique um padrão a ser usado quando ele não
estiver presente (ou quando você estiver editando código dentro de controles do
usuário (user controls) ou modelos parciais). Com o VS 2010 e
versões anteriores do Visual Studio você tem que explicitamente definir
qual é a versão HTML que você quer ter como alvo.
Biblioteca Modernizr.js
Marcação
Semântica HTML5 agora é suportada por todos os fabricantes de
navegadores modernos, e você pode usar as técnicas padrão CSS para
estilizar e personalizar páginas construídas com ela.
Um desafio, porém, é que ainda há um monte de navegadores mais antigos por aí - navegadores como o IE6 por padrão
não permite que você estilize elementos semânticos da HTML5 usando
CSS. O site HTML5 semântico que parece bonito em um navegador moderno
pode acabar parecendo quebrado a menos que você use uma biblioteca que
lhe permita contornar essa limitação.
Modernizr.js
Modernizr
é um pequena e elegante biblioteca JavaScript open-source (código
aberto) que ajuda você a tirar proveito de novas tecnologias web (HTML
5, CSS 3), mantendo um nível de compatibilidade com navegadores mais
antigos que ainda não suportam estas novas capacidades. Você pode
aprender mais sobre a Modernizr no site http://modernizr.com/.
Começando
com a Atualização das Ferramentas da ASP.NET MVC 3, estamos agora
distribuindo a Modernizr com a ASP.NET MVC 3, e a adicionamos por padrão
em todos os novos projetos ASP.NET MVC 3. Se você selecionar a opção
"Usar marcação semântica HTML5" ao criar novos projetos ASP.NET MVC 3, o
Visual Studio irá também adicionar uma referência para a biblioteca
Modernizr.js por padrão dentro do seu modelo layout.cshtml:
Modernizr.js e usando CSS com HTML5 Semântica em Navegadores antigos
Incluindo
a referência de script da Modernizr.js acima lhe permitirá usar CSS
para estilizar elementos semânticos da HTML5 - fazendo com que tais
estilos funcionem tanto em navegadores modernos (onde os novos elementos
são suportado nativamente), bem como nos navegadores mais antigos
(incluindo o IE6). Entre outras coisas, a Modernizr é inteligente o
suficiente para rodar um pequeno script que fará com que os navegadores
mais antigos honrem as regras de CSS em elementos desconhecidos
encontrados por eles.
Você pode ver os benefícios que a Modernizr
traz ao executar o projeto padrão ASP.NET MVC 3 usando o IE9. Se você
usar o modo de renderização padrão do IE9 (que suporta elementos
semânticos da HTML5), o site ficará igual ao mostrado a seguir, e usará o suporte a CSS nativo do navegador para HTML5 semântica:
Se
você habilitar "Compatibility View" (Visão Compatível) dentro do
navegador (o segundo ícone na parte superior da barra de navegação do
IE) - você verá uma renderização da página "com qualidade inferior" (da
mesma forma que os usuários do IE6/7/8 veriam). A Modernizr permite que
nossas regras CSS funcionem nesse modo de qualidade inferior - apesar
de o antigo motor de renderização do IE não suportar nativamente
elementos como <header>, <footer>, <nav>,
<section>, etc:
Se
não tivéssemos incluído a Modernizr.js na página, os visitantes do site
usando navegadores mais antigos teriam visto alguma coisa quebrada
assim:
Como
você pode ver - a biblioteca Modernizr proporciona uma grande melhoria
se compararmos os resultados! O melhor de tudo, não tivemos que escrever
nenhum código ou criar alguma folha de estilos CSS alternativa para que
o site funcione sem quebrar. E nós estamos utilizando marcação
semântica HTML5 em todo o site.
Usando a Modernizr para Detectar Capacidades do Navegador
O exemplo de marcação semântica HTML5 acima é apenas um dos benefícios bacanas que a Modernizr traz.
A
Modernizr também torna mais fácil verificar recursos/capacidades do
navegador (sem que você tenha que escrever código para diferentes
versões de navegador), e permite que você facilmente detecte e sinalize
se um recurso específico é suportado. Você pode aprender mais sobre
como isso funciona no site http://modernizr.com.
Justin Schwartzenberger tem um bom post que mostra isso em ação, e destaca Como usar a Modernizr com a ASP.NET MVC 3 para armazenar dados do usuário via localstorage da HTML5
(em Inglês). Seu tutorial mostra um exemplo ASP.NET MVC 3 completo,
onde ele usa o recurso localStorage da HTML5 caso este recurso esteja
disponível, e recorre ao uso de cookies em navegadores mais antigos
caso localStorage não esteja disponível.
Sumário
A
nova Atualização das Ferramentas da ASP.NET MVC 3 está cheia de coisas
boas. Se você ainda não fez o download e instalou a mesma, eu recomendo
que você faça isso. Você pode executar o instalador da ASP.NET MVC 3
no site http://asp.net/mvc para se certificar que você tem a versão mais recente.
As
melhorias para marcação semântica da HTML5 com a ASP.NET MVC 3 permitem
que você comece a projetar sites que tirem proveito da HTML5 e de
navegadores modernos. Usando a Modernizr.js você também pode fazer com
que esses sites continuem funcionando em navegadores mais antigos, e,
opcionalmente, executar determinado código apenas quando os novos
recursos estiverem habilitados/presentes.
Espero que ajude,
Scott
PS:
Eu também estou agora utilizando o Twitter para atualizações rápidas e
para compartilhar links. Siga-me em: twitter.com/ScottGu
Texto traduzido do post original por
Leniel Macaferi.
