Design a site like this with WordPress.com
Get started

Habilitar HTML5 en nuestras herramientas

¿Aún no has hecho nada con HTML 5? ¿Y a qué estas esperando? Desde el SP1 de Visual Studio y de Expression Web 4 podemos hacerlo. En el post de hoy veremos cómo podemos configurar nuestras herramientas para empezar a usar HTML 5 como target de nuestros desarrollos web.

Visual Studio 2010, Expression Web 4 SP1 y Web Matrix

Si no tenemos instalado el SP1 de Visual Studio ya estamos tardando en descargarlo desde aquí.

Ahora podemos empezar a disfrutar de todo lo que incorpora Visual Studio para desarrollar en HTML 5, intellisense, nuevas etiquetas, atributos etc… Tan sólo tenemos que habilitar el esquema de HTML 5 en el menú: Tools/Options/Text Editor/HTML/Validation y seleccionar la opción HTML 5 de la lista desplegable de Target:

Opciones de VS 2010 SP1
Opciones de VS 2010 SP1

También podemos seleccionar HTML5 como esquema predeterminado en la barra de herramientas de la edición de código fuente en cualquier archivo HTML  que abramos:

Documento Html y esquema predeterminado
Documento Html y esquema predeterminado

Una vez configurado, tendremos compatibilidad absoluta en el Intellisense de Visual Studio con las 28 nuevas etiquetas y atributos de HTML 5:

Intellisense y HTML 5
Intellisense y HTML 5

Microsoft actualizó aun más la compatibilidad con HTML 5  en la Web Standards Update para VS 2010 SP1 en junio de 2011. Esta extensión funciona con todas las ediciones de Visual Studio 2010, añade aún más IntelliSense de HTML 5 y validaciones para Visual Studio, incluye IntelliSense de JavaScript para las nuevas capacidades del explorador como ubicación geográfica y almacenamiento DOM, y proporciona IntelliSense de CSS integral y validación. Ya podéis descargar esta extensión que se actualiza regularmente para incorporar las últimas mejoras a nuestras herramientas para el desarrollo con HTML 5. Venga, descárgala desde aquí.

En el caso de Expression Web 4 SP1, tenemos que configurar el esquema HTML 5 en Tools/Page Options. Ofrece el mismo IntelliSense, par aCSS3 para varios módulos como el border-radius, box-shadow, transfrom  y cosas por el estilo.

Si estás usando WebMatrix (web.ms/WebMatrix), habrás  notado que todos los documentos nuevos .html, .cshtml o .vbhtml que crea contienen un marcador predeterminado similar al que aparece en la siguiente imagen:

    1. <!DOCTYPE html>
    2. <html lang=”en”>
    3. <head>
    4. <meta charset=”utf-8″ />
    5. <title></title>
    6. </head>
    7. <body></body>
    8. </html>

Tal como veremos en el siguiente artículo de esta serie, el anterior documento es un documento HTML 5 básico y válido. Lo más llamativo es que las etiquetas doctype y meta charset se han vuelto más sencillas.

WebMatrix hace más sencillo el uso de estos tags al proporcionar un documento HTML 5 de manera predeterminada.

Si estas herramientas no las consideras suficientes – todas desde Enero de 2011 – ASP.NET MVC las tiene tan sólo desde el anuncio en el MIX11 en Abril con ASP.NET MVC 3 Tools Update para nuevos proyectos – y venía con Modernizr 1.7 en el directorio de Scripts de las nuevas aplicaciones que creásemos. Modernizr es una librería JavaScript que hace muy sencillo el desarrollo con HTML 5.

En definitiva, aunque HTML 5 aún está emergiendo en nuestro navegadores, ya tenemos disponibles nuevas herramientas que van apareciendo muy rápidamente, y hasta Microsoft está soportando librerías (como Modernizr) de la comunidad. A día de hoy podemos crear aplicaciones HTML 5 con el soporte de las herramientas de Microsoft, y poco a poco esto irá en aumento con el tiempo.

Espero que sirva.

Autor: Juan María Laó Ramos.

Author: Juanma

Bueno, como reza el título de este blog y de las cosas que iré escribiendo ya os hareis una idea de cómo soy.

2 thoughts on “Habilitar HTML5 en nuestras herramientas”

  1. Hola, quisiera poder implementar HTML5 en Visual Studio 2008 corriendo en SO de 64 bits, algun tutorial? pagina que pueda ver o leer para poder hacer esta implementacion?

    Like

    1. Puedes pasarte por . En realidad no necesitas visual Studio, con el Notepad te vale, de hecho te recomendaría el Notepad++. Pero antes que el Notepad++, Visual Studio 2012 es mucho mejor, trae intellisense y demás cosas que hacen el desarrollo más fácil.
      Espero te sirva.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: