[HTML5] Mise à jour du support de HTML5 dans Visual Studio 2010

Petit surprise venu directement de la Visual Web Developer Team, Jeudi dernier,  une nouvelle mise à jour du support de HTML5 dans Visual Studio 2010 SP1, ou plutôt la première mise à jour des standards Web W3C pour VS 2010.

Nous avions pu voir un premier effort lors de la sortie du SP1 pour VS 2010 il y a quelques mois, comprenant une mise à jour de l'IntelliSense, avec quelques nouveaux markups, nouveaux events et, première prise en charge de CSS3. Puis l’arrivée avec les Tools updates ASP.NET MVC3 lors du MIX 2011, importante évolution basée principalement sur l’apparition des markups de zones (header, footer, article section etc.) dans les templates de projets MVC3, ainsi que l’ajout d’une librairie de “Features detecting” : Modernizr. 

La Visual Web Developper Team, coordonnée par Mads Kristensen, nous propose ici une mise à jour de l’IntelliSense et de la validation de VS, selon les nouvelles spécifications des standards Web du W3C, ainsi que quelques corrections de bugs liés au premier support de HTML5 pour le SP1. 

Celle-ci apporte un support plus complet de l’HTML5, de CSS3, ainsi que du JavaScript.

Cette initiative est très intéressante, puisqu’elle nous amène à penser, vu le caractère encore très évolutif de HTML5, qu’à période régulière nous aurons de nouvelles mises à jour lors de nouvelles spécifications / updates du W3C. Effectivement, c’est ce qu’a annoncé Mads Kristensen, tous les trimestres environ.

Petite note également importante : “This release has been made possible by the hard work of some of our team members in their spare time and isn’t an official Microsoft release.” Donc soyez indulgents, il subsiste certainement quelques bugs, n’hésitez donc pas à les remonter, et grand Merci à la VWDTeam.

                              Pour le télécharger, vous le trouverez ici : Web standards update.

Listing du contenu de ce Web Standard Update  ( Source ):

Fonctionnalités HTML 5 :

• Video & tags associés
• Audio & tags associés
• Nouveaux types input ( Email, Url, Date … )

• Support du Drag & Drop support
• Outils d’accessibilité WAI-ARIA

• Microdata
• Schema.org & outils pour le SEO

Browser APIs

• Geo-Location
• Local Storage

CSS3

HTML 5 & Visual Studio

A l’arrivée du support de HTML5 dans notre éditeur favori, on a pu remarquer l’arrivée de nouveaux schémas dans le répertoire système de Visual Studio. (Pour rappel, un schéma est un fichier.xsd, composé de règles, suivant un standard ( ici (X)HTML5 ), et exploité par Visual Studio à travers l'IntelliSense, mais aussi par les processus de validations de pages par exemple).  Vous pouvez trouver ces fichiers dans votre répertoire de Visual Studio , Common7/Packages/Schemas/Html.

Petite screenshot à l’époque de la sortie du SP1 Beta :

On remarque bien, qu’à l’installation du “Web standards update”, les schémas HTML5 sont mise à jours.

Par exemple l’ajout du support de l’attribut “Source” pour un media element :

Dans Visual Studio, vous pouvez choisir quelle version de HTML vous voulez supporter, à plusieurs endroits :

• Tout d’abord,  aller dans Tools –> Options , puis dans Text Editor -> HTML -> Validation :

• Ou directement à l’aide de la barre d’outils HTML Source Editing. Si celle-ci n’est pas présente, vous pouvez l’afficher :

Ce qui donne :

Note : Depuis les “ToolsUpdates” de MVC3,  vous pouvez directement créer une application Web MVC3 avec support de HTML5,  dès l’interface de création :

Attention, votre web application MVC3 utilisera alors les templates de projets HTML5. Ce qui implique entre autre l’utilisation des nouveaux semantics markups et l’import de Modernizr.

Concernant les évolutions :

Les nouveaux inputs étaient déjà prise en compte dès le SP1, pas de changement à ce niveau.

Les nouveaux évènements étaient partiellement pris en compte dès le SP1, pas de changement non plus à ce niveau. 

Pour rappel :

• Support des nouveaux windows events ( mis à part les OnPageHide et Show).
• Support des nouveaux forms events
• Supports des nouveaux mouse events, OnDragEnd maintenant disponible.
• Support des nouveaux médias events

• Correction de quelques bugs de validation, notamment sur les attributs ne nécessitant pas forcément de valeurs :

A l’arrivée du SP1 :

Après mise a jour :

• Support de l’attribut Source sur les Media Element (audio et video) :

•  Support complet de l’accessibilité WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications). Pour rappel, ARIA définit des moyens afin de permettre à des personnes invalides, d’avoir une expérience utilisateur adaptée, les attributs sont préfixés par “aria-”.

• Support des microdatas, avec IntelliSense des schemas basée sur schema.org  ( Exemple ), très utile pour le SEO. Pour rappel, les microdatas permettent différents éléments de votre page web, à des meta datas, directement exploité par les moteurs de recherches ( Bings, Yahoo, Google l’utilisent ).

• Petit détail également, plus besoin de l’attribut “Type” sur les balises scripts.

CSS3 & Visual Studio

On peut remarquer une nette évolution de l’IntelliSense avec cette mise à jour, l’arrivée du support des différents moteurs de rendus spécifiques, des animations, transformations etc., avec en prime les infos-bulles IntelliSense pour chaque nouveautés. Sachant que les spécifications CSS3 changent constamment, c’est d’ailleurs pour cela que le SP1 était très incomplet sur le support de CSS3.

Voyons ça en détails :

Tout d’abord, passer en mode de validation CSS3.

Si vous n’avez pas la barre d’outils  “StyleSheet” :

• Support des différents moteurs de rendus ( –ms, –webkit, –moz )

• Support des nouvelles propriétés CSS3, comme par exemple les borders ( radius etc.), les columns ( columns-fulls, columns-fill, multi etc.)

• Support des animations, transformations, transitions 

JavaScript API & Visual Studio

Gros manque lors de la sortie du SP1, le support des nouvelles APIs arrivées avec HTML5. Cette update arrive alors comme notre sauveur puisque celle-ci ajoute un grand nombre de fonctionnalités à l’IntelliSense,  correspondant aux APIs principales présentes avec ECMAScript5.

• Support du Localstorage ou appelé également WebStorage. Pour rappel, le Localstorage permet de stocker des informations, à l’aide du navigateur Web. Cette information est stockée dans une zone mémoire du navigateur. Elles sont uniquement accessibles que par le navigateur qui a lui-même enregistrer cette donnée.

• Support de la Géolocalisation :

• Support de nouveaux sélecteurs :

Cette mise à jour des standards Web liée aux spécifications HTML5 se reposent principalement sur une évolution de l’IntelliSense et de la validation dans Visual Studio. Celle-ci reste très utile pour les développeurs souhaitant se lancer dans l’expérience HTML5, et découvrir en live les nouvelles fonctionnalités disponibles. Point important : Cette mise à jour est annoncée comme trimestrielle d’ après Mads Kristensen, ce qui permettra d’avoir votre Visual Studio à jour par rapport aux nouvelles spécifications que ce soit en HTML5 ou CSS3.