Web Development Cookbook... ou encore Quelques recettes pour des développements Web à basses calories :)
Souvent, 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 ce billet - un peu long j'en conviens - 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 carrément dire "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, 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.
C'est parti...
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 :
https://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 :
https://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 si il avait directement reçu la requête portant sur https://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 : https://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'arborescences des pages d'un site Web. Généralement, il s'agit d'une suite de noeuds dans l'arborescences présentés sur une même ligne. Par convention, le premier élément à gauche correspond à celui situé à la racine sur 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 :
https://www.ondotnet.com/pub/a/dotnet/2004/09/13/site_nav_aspnet20.html
https://www.beansoftware.com/ASP.NET-Tutorials/Web-Site-Navigation.aspx
https://quickstarts.asp.net/QuickStartv20/aspnet/doc/navigation/sitenavcontrols.aspx
Le Nuage de Tags, ou encore "Tag Clouds"
Le nuage de Tags est un des assets caractéristiques des sites dits Web 2.0. L'idée est que la taille et la graisse des polices de caractères représentant un tag sont proportionnelles au nombre d'occurences du tag correspondant. Ainsi, dans l'exemple précédent, le terme "Tektonik" semble être le plus présent, et indique donc un sujet plus populaire.
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 :
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 qui constituent le ASP.NET Ajax Control Toolkit. Les contrôles constituant le ASP.NET Ajax Control Toolkit sont fournis avec leur code source, et peuvent donc être modifiés, adaptés ou étendus.
Télécharger le Ajax Control Toolkit :
https://www.codeplex.com/Release/ProjectReleases.aspx?ProjectName=AtlasControlToolkit
Voir les contrôles du Ajax Control Toolkit en démo live :
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 le Ajax Control Toolkit :
https://asp.net/AJAX/AjaxControlToolkit/Samples/ModalPopup/ModalPopup.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.
Cartographie et données géolocalisées
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, et dont je vous parlais ici : https://blogs.msdn.com/clauer/archive/2006/10/07/Des-frimeurs-dans-Virtual-Earth-_2100_.aspx
Utiliser des contrôles "CSS Friendly"
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 :
Vous voudrez aussi sans doute consulter le billet suivant toujours sur le blog de Scott Guthrie :
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 librarie RssToolkit qui prend en charge l'exposition de RSS : https://www.codeplex.com/ASPNETRSSToolkit
Custom Error Pages
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 ;)
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 :
https://www.ondotnet.com/pub/a/dotnet/2005/01/10/liberty.html
Happy Coding avec ASP.NET, Microsoft Ajax et Silverlight !