Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

[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

 

HTML5 Visual studio 2010 supportLa 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 :

Browser APIs
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 :

Visual studio 2010 schema HTML5

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

Visual studio 2010 schema HTML5

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

Visual studio 2010 schema HTML5

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 :

Visual studio 2010 HTML5

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

Visual studio 2010 HTML5 Toolbar

Ce qui donne :

Visual Studio 2010 HTML5 Toolbar

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 :

Visual Studio 2010 HTML5 MVC3

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.

Visual Studio 2010 HTML5 input

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 :

Visual Studio 2010 HTML5 Validation

Après mise a jour :

Visual Studio 2010 HTML5 Validation

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

Visual Studio 2010 HTML5 media

  •  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-”.

Visual Studio 2010 HTML5 media 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 ).

Visual Studio 2010 HTML5 Microdata SEO Bings Google Yahoo

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

 

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.

Visual Studio 2010 HTML5 CSS3

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

Visual Studio 2010 HTML5 CSS3 Toolbar

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

Visual Studio 2010 HTML5 -ms -moz -webkitVisual Studio 2010 HTML5 -ms -moz -webkit

Visual Studio 2010 HTML5 -ms -moz -webkit

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

Visual Studio 2010 HTML5 CSS3 properties

  • Support des animations, transformations, transitions 

Visual Studio 2010 HTML5 CSS3 properties transitions tranformations animations

 

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.

Visual Studio 2010 HTML5 Webstorage localstorage

Visual Studio 2010 HTML5 Geolocation Geolocalisation

Visual Studio 2010 HTML5 Selectors javascript API 

 

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.

Publié mardi 21 juin 2011 15:03 par Gio
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

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

Ca va s'avérer bien utile pour tous les développeurs utilisant ces technologies :)

Je partage !

mardi 21 juin 2011 18:00 by nicoboo
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- SharePoint 2013: Préparation de la migration - Création des site Templates dans 2010 et 2013 par Blog Technique de Romelard Fabrice le il y a 15 heures et 35 minutes

- [ #Yammer ] How to change interface language ? Comment changer la langue de l’interface ? par Le blog de Patrick [MVP SharePoint] le il y a 17 heures et 45 minutes

- Onedrive Sync Engine Host : CPU à 100% par Le petit blog de Pierre / Pierre's little blog le 08-06-2014, 22:22

- SharePoint : Bug sur la gestion des permissions et la synchronisation Office par Blog Technique de Romelard Fabrice le 07-10-2014, 11:35

- SharePoint 2007 : La gestion des permissions pour les Workflows par Blog Technique de Romelard Fabrice le 07-08-2014, 11:27

- TypeMock: mock everything! par Fathi Bellahcene le 07-07-2014, 17:06

- Coding is like Read par Aurélien GALTIER le 07-01-2014, 15:30

- Mes vidéos autour des nouveautés VS 2013 par Fathi Bellahcene le 06-30-2014, 20:52

- Recherche un passionné .NET par Tkfé le 06-16-2014, 12:22

- [CodePlex] Projet KISS Workflow Foundation lancé par Blog de Jérémy Jeanson le 06-08-2014, 22:25