Mejoras de HTML5 con ASP.NET MVC 3 Tools Update

Ya hemos visto algo sobre las nuevas ASP.NET MVC 3 Tools Update, y hemos visto algún detalle como EF Code First y Data Scaffolding con ASP.NET MVC 3 Tools Update.

El post de hoy es una continuación de esta serie y veremos algunas de las nuevas mejoras para HTML 5 de la release de ASP.NET MVC 3 Tools Update.

Soporte de etiquetas semánticas HTML en las plantillas de proyecto

ASP.NET MVC 3 Tools Update añade soporte para que podamos usar etiquetas semánticas HTML5 cuando creamos proyectos ASP.NET MVC 3. Podemos indicarlo marcando la casilla “Use Html5 semantic markup” cuando creamos un nuevo proyecto:

Marcando esta casilla conseguimos dos cosas:

1) Hace que VS 2010 use elementos semánticos HTML5 como <header>, <footer>, <section> y <nav> en el archivo por defecto layout.cshtml que se genera. En lugar de usar elementos <div> para los elementos de header, footer y navigation – que es el comportamiento por defecto si no hemos marcado la casilla de HTML5 (y el mismo comportamiento que había ántes de HTML5).

2) Hace que VS 2010  referencie a la librería modernizr.js por defecto en layout.cshtml – que entre otras cosas nos permite usar CSS para dar estilo a las etiquetas semánticas de HTML5 incluso para navegadores antiguos como IE6 (asegurando que nuestro sitio funciona en navegadores antiguos).

Entendiendo las etiquetas semánticas de HTML

HTML 5 introduce un número de nuevos elementos y APIs que introducen nuevas capacidades de comportamiento (mejoras como <video>, <canvas>, <svg>, etc).

HTML 5 también introduce nuevos elementos(como <section>, <article>, <aside>, <header> y <nav>) que nos permiten enriquecer el significado semántico y estructural de nuestros contenidos y páginas. Estas características nos permiten escribir nuestras páginas de forma que no tenemos que usar elementos oscuros <div> para estructurarlo todo, y en su lugar podemos ofrecer mejores experiencias dotanto de significado a nuestros contenidos. Esto hace que nuestro código sea más limpio de leer, y a largo plazo ayudará a alos navegadores y buscadores a entender mejor tus etiquetas y ofrecer experiencias mucho más ricas.

Cuando creamos un nuevo proyecto ASP.NET MVC 3 con la casilla “Use HTML5 semantic markup” marcada, Visual Studio usará HTML semántico en lugar de elementos <div> (cuando sea oportuno) en el archivo layout.cshtml que se genera para el proyecto. Con esto la parte de arriba de la página estará encerrada entre elementos <header>, los links de navegación con elementos <nav> y el pie con un  elemento <footer>.

Aprender más sobre las etiquetas semánticas HTML5.

Bruce Lawson y Remy Sharp tienen un gran libro de introducción de HTML5 que habla (entre otras nuevas características de HTML5) sobre cómo aprovechar las etiquetas semánticas de HTML5:

También podéis leer el artículo de Emily Lewis Uso de los nuevos tags de HTML5 hoy en el sitio ScriptJunke de MSDN para aprender más sobre el role de las etiquetas semánticas de HTML5 y ver un ejemplo práctico en acción.

Intellisense de HTML5 en VS 2010 SP1

Con VS 2010 SP1, podemos cambiar el “Target Schema for Validation” del editor de texto para que use el intellisense de HTML5:

Cuando seleccionamos HTML5 como sistema de validación, el intellisense del motor de HTML de Visual Studio ofrecerá el intellisense apropieado para los nuevos elementos HTML5 y sus atributos. Esto es válido tanto para elementos de comportamiento como <canvas> y <video> como para elementos semánticos como <article> y <nav>:

Nota: en la próxima release de VS se reconocerá por defecto el <!DOCTYPE> al principio de la página cuando se carge el intellisense, y nos permitirá indicar un comportamiento estándar cuando no esté presente (o cuando estemos editando user controls, o editando plantillas). Con VS 2010 y versiones anteriores tendremos que indicar explícitamente qué versión de HTML queremos usar.

Librería Modernizr.js

Las etiquetas semánticas de HTML 5 están soportadas por todos los navegadores modernos, y podeis usar técnicas estándar de CSS para dar estilos y personalizar vuestras páginas.

El problema es que siguen existiendo navegadores antiguos ahí fuera – y navegadores antiguos como IE6 que por defecto no nos permiten usar elementos semánticos HTMl5 usando CSS. El sistio semántico HTML5 que se ve perfectamente en un navegador nuevo puede no verse bien a menos que usemos una librería que nos permita solucionar esta limitación.

Modernizr.js

Modernizr es una pequeña librería JavaScript y open-source que nos ayuda a aprovechar nuevas tecnologías web (HTML5, CSS3 manteniendo un nivel de compatibilidad con navegadores antiguos que pueden no soportar estas nuevas características. Podéis aprender más sobre Modernizr en el sitio http://modernizr.com.

A partir de ASP.NET MVC 3 Tools Update, estamos entregando Mordernizr con ASP.NET MVC 3, y añadiéndola por defecto en todos los proyectos ASP.NET MVC 3. Si seleccionamos la casilla “Use HTML5 semantic markup” cuando creamos proyectos ASP.NET MVC 3, Visual Studio también añadirá una referencia a la librería Modernizr.js por defecto en la plantilla layout.cshtml:

Modernizr.js y el uso de CSS con semántica HTML5 en navegadores antiguos

La inclusión de la referencia a Modernizr.js nos permitirá usar CSS para dar estilo a elementos semánticos HTML5 – y funcionará tanto en navegadores nuevos (soportado de forma nativa) como en antiguos (incluido IE6). Entre otras cosas, Modernizr es lo suficientemente listo como para ejecutar un pequeño script que hará que los navegadores antiguos sigan las reglas CSS con los elementos desceonocidos que encuentren.

Podéis ver los beneficios de Modernizr ejecutando el proyecto por defecto de ASP.NET MVC 3 que se crea usando IE9. Si usamos el modo de renderización de IE9 (que soporta elementos semánticos HTML5) el sitio se verá de la siguiente forma, y usará el soporte del navegador de CSS para HTML5:

Si habilitáis el modo “Compatibility View” del navegador (el segundo icono en la barra de navegación de IE) – veréis un renderizado diferente de la página (como se vería en IE6/7/8). Modernizr permite que nuestras reglas CSS funcionen en este nivel – aunque los motores antiguos de IE no soporten nativamente elementos como <header>, <footer>, <nav>, <section>, etc:

Si no hemos incluido a Modernizr.js en la página, los visitantes que usen navegadores antiguos verán algo roto como esto:

Como podéis ver – Modernizr ofrece una gran mejora para aquellos usuarios que usen navegadores antiguosque de lo contrario no habrían podido ver bien la página. Lo mejor de todo, no tenemos que escribir ningún código ni hacer una CSS diferente para que esto funcione. Y estamos usando etiquetas semánticas HTML5 en nuestro sitio.

Usando Modernizr para detectar las capacidades del navegador.

El ejemplo anterior es uno de los grandes beneficios que nos ofrece Modernizr.

Modernizr también hace muy fácil comprobar las capacidades de un navegador(sin tener que escribir a fuego versiones de navegadores en el código), y nos permite detectar y comprobar si una característica en concreto es soportada. Podéis aprener más sobre cómo funciona en el sitio http://modernizr.com

Justin Schwartzenberger tiene un gran post en el que nos lo muestra en acción y destaca Cómo usar Modernizr con ASP.NET MVC 3 para guardar datos de usuario a traves del localstorage de HTML5. Su tutorial muestra un ejemplo de principio a fin de ASP.NET MVC 3 en el que usa la característica de HTMl5 localstorage si está disponible, y sólo usa cookies en navegadores antiguos.

Resúmen

ASP.NET MVC 3 Tools Update está llena de bendiciones. Si aún no la habéis descargado e instalado os recomiendo que lo hagáis. Podéis ejecutar el instalador de ASP.NET MVC 3 en el sitio http://asp.net/mvc para aseguraros de que tenéis la última versión.

Las mejoras de las etiquetas semánticas de HTML5 en ASP.NET MVC 3 nos permiten diseñar sitios que se aprovechen de HTML5 y de los nuevos navegadores. Usando Modernizr.js también podéis hacer que estos sitios sigan funcionando en navegadores antiguos, y opcionalmente usar ls características que queráis cuando estén disponibles

Espero que sirva.

Scott.

Traducido por: Juan María Laó Ramos.

Artículo original