Livre de recettes de cuisine pour des développements Web à basses calories

Par Christophe Lauer - Décembre 2007

Parfois quand je rencontre des développeurs Web, je m'aperçois que certaines fonctionnalités et possibilités intéressantes, fournies en standard pas ASP.NET depuis sa version 2.0 (sortie en 2005) ou via des composants ou bibliothèques de code tierces, sont méconnues.

Dans cet article, j'ai tenté de rassembler une dizaine de petits trucs qui pourront vous aider à donner à votre site ou à votre application Web un petit air de modernité, pour ne pas dire carrément "un petit air de 2.0" :)

Le principe est le suivant : j'ai fait quelques copies d'écran de sites web dits "2.0" assez connus et populaires, qui d’ailleurs n’utilisent pas nécessairement des technologies Microsoft, et je souligne ici ou là le détail d'une fonctionnalité et vous présente une ou des façons de réaliser des choses équivalentes avec ASP.NET et la plate-forme Microsoft.

Allons-y, c'est parti...

Les URLs simples ("Clean URLs") pour aider vos utilisateurs à mémoriser plus facilement l’url de votre site

Navigation par "Bread Crumbs", ou comment améliorer la navigation dans l’arborescence d’un site web

Le Nuage de Tags, ou encore "Tag Clouds"

Contrôles visuels avancés et coins arrondis

Fenêtre web "modale" et gestion des comptes utilisateurs et rôles

Intégration d’un player vidéo

Cartographie et données géolocalisées

Utiliser des contrôles "CSS Friendly" 

Ajout et consommation de RSS, et Custom OpenSearch Providers

Personnaliser vos pages d’erreur

WebParts, pour donner un air de « site portail » à votre site

Les URLs simples, ou encore "Clean URLs"

L'utilisation de ces adresses URL simples, ou encore de "Clean URLs" comme le disent nos voisins d'outre Atlantique, présente plusieurs avantages.

Le premier est pour les utilisateurs de votre site, qui mémoriseront certainement plus facilement des URLS contenant des noms logiques comme "people" et leur username qu'une URL comme on en voit encore souvent - sans doute par paresse ou par ignorance ? - formées d'un paramètre et de sa valeur, et dans les cas extrêmes la valeur du paramètre peut être un GUID ce qui donne quelque chose de la forme suivante :

http://www.acme.com/fr/profile/user.aspx?userid=B342-2C74-AE38-32B9

Inutile de préciser qu'en outre, ce type d'adresse URL avec un paramètre et sa valeur sont très mal pris en compte par les moteurs de recherche. Aussi, si vous souhaitez avoir de bons résultats d'indexation des différentes pages de votre site, vous devrez mettre en place des URLs simples. C'est un des points fondamentaux des techniques d'optimisation des résultats dans les moteurs de recherche (on parle de SEO, pour Search Engine Optimisation).

Pour produire une URL simple à partir d'une URL complexe - comme l'exemple ci-dessus contenant une sorte de GUID - il faut avoir recours à une technique dite de Réécriture d'URL.

En gros, votre serveur HTTP - soit IIS dans notre contexte - va recevoir une requête entrante portant par exemple sur :

http://www.acme.com/fr/profile/clauer

Et il saura, via une table de correspondances ou par l'accès à une base de données, qu'il y a une correspondance entre le UserID B342-2C74-AE38-32B9 et le UserName "clauer". Il procèdera donc comme s’il avait directement reçu la requête portant sur http://www.acme.com/fr/profile/user.aspx?userid=B342-2C74-AE38-32B9 et retournera le contenu de réponse correspondant au navigateur à l'origine de la requête.

Vous trouverez, à l'adresse suivante sur le blog de Scott Guthrie, un billet qui vous permettra de comprendre et de mettre en oeuvre la réécriture d'URL dans une application ASP.NET sur IIS : http://weblogs.asp.net/scottgu/archive/2007/02/26/tip-trick-url-rewriting-with-asp-net.aspx

Navigation par "Bread Crumbs"

La navigation par "Bread Crumbs" ou "Miettes de pain" permet de se retrouver facilement dans l'arborescence des pages d'un site Web. Généralement, il s'agit d'une suite de noeuds issus de l'arborescence du site et présentés sur une même ligne. Par convention, le premier élément à gauche correspond à celui situé à la racine du site Web.

Pour mettre ceci en oeuvre avec ASP.NET, vous disposez de contrôles de navigation qui réalisent directement l'effet voulu. Les trois articles suivants expliquent la mise en oeuvre des "Bread Crumbs" avec ASP.NET :

http://www.ondotnet.com/pub/a/dotnet/2004/09/13/site_nav_aspnet20.html
http://www.beansoftware.com/ASP.NET-Tutorials/Web-Site-Navigation.aspx
http://quickstarts.asp.net/QuickStartv20/aspnet/doc/navigation/sitenavcontrols.aspx

Le Nuage de Tags, ou encore "Tag Clouds"

Le nuage de Tags est une des caractéristiques des sites dits Web 2.0. L'idée est que la taille et la mise en gras des polices de caractères représentant un tag sont proportionnelles au nombre d'occurrences du tag correspondant. Ainsi, dans l'exemple précédent, le terme "Tecktonik" semble être le plus présent, et indique donc un sujet bien plus populaire que « football », signe d’une autre époque sans doute ;)

Il existe différents contrôles tiers réalisant ceci pour ASP.NET, l'un d'eux fait l'objet d'un article sur le site CodeProject : http://www.codeproject.com/useritems/cloud.asp

C’est d’ailleurs à nouveau le composant de Nuage de Tags que l’on avait retenu et intégré dans notre site de démonstration www.Frimr.com utilisé pendant le tour Mini Mix en 2006. Vous retrouverez la liste de tous les webcasts du Tour MiniMix 2006 dans ce billet sur mon blog : http://blogs.msdn.com/clauer/archive/2006/12/20/webcasts-mini-mix.aspx

Contrôles visuels avancés et coins arrondis

Qu'il s'agisse du contrôle représentant les cinq étoiles permettant à un utilisateur de donner une note d'appréciation sur le contenu proposé, ou de celui permettant d'ajouter l'effet "coins arrondis" à une DIV, ils font partie d'une collection de contrôles dits « Adapteurs » rassemblés au sein de l’ASP.NET Ajax Control Toolkit. Les contrôles constituant l’ASP.NET Ajax Control Toolkit sont fournis avec leur code source, et peuvent donc être modifiés, adaptés ou étendus.

Pour télécharger l’Ajax Control Toolkit :

http://www.codeplex.com/Release/ProjectReleases.aspx?ProjectName=AtlasControlToolkit

Pour voir les contrôles de l’Ajax Control Toolkit en démo live :

http://asp.net/ajax/ajaxcontroltoolkit/samples/

Fenêtre web "modale" et gestion des comptes utilisateurs et rôles

Un contrôle permettant de réaliser une fenêtre de dialogue modale dans une page Web est également présent dans l’Ajax Control Toolkit :

http://asp.net/AJAX/AjaxControlToolkit/Samples/ModalPopup/ModalPopup.aspx

Concernant les contrôles gérant la création de comptes utilisateur, le fait qu’un utilisateur soit authentifié ou pas, le fait qu’un utilisateur appartienne à un rôle ou pas, ou encore les contrôles permettant de réinitialiser le mot de passe de l’utilisateur en cas d’oubli, sachez que tout ceci fait partie des contrôles standards proposés par ASP.NET depuis sa version 2.0. Je vous renvoie à nouveau vers le blog de Scott Guthrie dans lequel figure un billet qui vous explique comment ajouter une gestion des utilisateurs avec gestion des rôles, etc… en moins de 24 lignes de code. C’est ici :

http://weblogs.asp.net/scottgu/archive/2005/10/18/427754.aspx

Pour aller plus loin au sujet de cette gestion des rôles et des utilisateurs dans ASP.NET 2.0, vous trouverez un nombre impressionnant de ressources et de pointeurs dans ce billet toujours sur le blog de Scott Guthrie :

http://weblogs.asp.net/scottgu/archive/2006/02/24/ASP.NET-2.0-Membership_2C00_-Roles_2C00_-Forms-Authentication_2C00_-and-Security-Resources-.aspx

Player vidéo

Sans grande surprise, la technologie rêvée pour réaliser un player vidéo à vos couleurs et avec le design de votre choix, c'est Silverlight. De nombreux tutoriels expliquent comment réaliser des players vidéos, des plus simples aux plus évolués. Des modèles de players évolués sont d'ailleurs fournis en tant que templates avec Expression Encoder.

Pour un tutoriel détaillé sur la réalisation d’un player vidéo très simple en Silverlight 1.0, vous voudrez sans doute vous reporter à ce « Hands on Lab » qui ne vous prendra que 45 minutes pour aller au bout (hors temps d’installation et de configuration de Silverlight et d’Expression Blend 2) : http://msdn2.microsoft.com/fr-fr/silverlight/bb870530.aspx

Cartographie et données géolocalisées

L’utilisation de contrôles de cartographie pour réaliser des applications de type « mash-up » est une grande tendance dans le domaine des applications dites « Web 2.0 ». La grande majorité (plus de 50%) des applications de « mash-up » intègrent un contrôle de cartographie et des données géolocalisées. C’est le cas de la copie d’écran ci-dessus qui affiche les différentes stations de Vélib dans la ville de Paris.

Une solution simple pour intégrer un contrôle de cartographie dans une page Web consiste à utiliser le contrôle Virtual Earth. Il s'agit d'un contrôle client qui ne nécessite que quelques lignes de code Javascript. Tous les exemples sont fournis dans l'excellent Visual SDK de ce contrôle.

C'est d'ailleurs ce que nous avions utilisé dans notre site de démonstration www.frimr.com l'an dernier à l’occasion du Tour Mini Mix 2006, et dont je vous parlais ici : http://blogs.msdn.com/clauer/archive/2006/10/07/Des-frimeurs-dans-Virtual-Earth-_2100_.aspx

Utiliser des contrôles "CSS Friendly" 

Les contrôles ASP.NET 1.0 et 1.1 ne sont pas réputés pour être très sympas avec les styles hérités de feuilles de styles CSS. En effet, la majorité de ces contrôles serveur génèrent leur rendu HTML sous la forme de tables HTML pour le positionnement – le contrôle MonthCalendar est très représentatif de ceci. Or, utiliser des tables pour gérer le positionnement et le layout du contenu, c’est « mal » quand on veut utiliser des CSS pour définir les styles visuels de l’application.

Là encore, pour rendre les contrôles ASP.NET standard plus "CSS Friendly", vous pouvez utiliser un ensemble « d'adapteurs » justement nommés "CSS Friendly Adapters", et dont vous trouverez la documentation et les téléchargements ici : http://www.asp.net/cssadapters/

Vous voudrez aussi sans doute consulter le billet suivant toujours sur le blog de Scott Guthrie, qui en explique la mise en oeuvre :

http://weblogs.asp.net/scottgu/archive/2006/11/29/tip-trick-use-the-asp-net-2-0-css-control-adapters-for-css-friendly-html-output.aspx

Ajout et consommation de RSS, et Custom OpenSearch Providers

Pour exposer du RSS, plusieurs possibilités s'offrent à vous. Vous pouvez très bien imaginer tout réaliser à la main, ou bien générer votre RSS au moyen de XLinq comme expliqué dans cet article.

De façon plus simple, vous pouvez aussi utiliser la librairie RSSToolkit qui prend en charge l'exposition de RSS : http://www.codeplex.com/ASPNETRSSToolkit 

Le billet suivant vous présente les fonctionnalités proposées par la version v. 2 de ce RSSToolkit de façon très claire et détaillée. Je vous invite à le parcourir si vous avez des besoins d’exposition de RSS depuis votre application ASP.NET : http://blogs.msdn.com/shahpiyush/archive/2007/06/16/3331941.aspx

Personnaliser vos pages d’erreur

Les articles suivants expliquent comment mettre en oeuvre des pages d'erreur personnalisées pour vos applications ASP.NET, à l'instar de ce que l'on trouve de plus en plus souvent sur les sites Web 2.0 à la mode. Il ne vous reste plus qu'à trouver une mascotte sympathique à placer dans votre page d'erreur ;)

http://support.microsoft.com/kb/306355

WebParts

Enfin, si vous voulez donner à votre application Web un petit air de site portail, ou de page personnalisable à la Live.com, Bubbletop ou encore Netvibes, sachez que ASP.NET 2.0 propose nativement cette fonctionnalité au moyen de contrôles WebPartManager et WebPartZone. L'article suivant sur OnDotNet en explique les principes de fonctionnement : http://www.ondotnet.com/pub/a/dotnet/2005/01/10/liberty.html

Le mot de la fin

Voilà pour un premier tour d’horizon. J’espère que ceci vous aura donné envie d’aller plus loin et, pourquoi pas, de créer vous-même votre site Web « à la sauce Web 2.0 » en tirant parti de tous ces composants et bibliothèques qui vous feront gagner un temps précieux au moment de l’implémentation. Tout en donnant à votre application un « look and feel » très professionnel, et en améliorant aussi au passage l’expérience utilisateur.

Happy Coding avec ASP.NET, Microsoft Ajax et Silverlight !