DHTML, Ajax, Drag and Drop : Dynamisez votre site Internet !

Lorsque l’on souhaite évoquer le domaine des nouvelles technologies Internet, nous faisons souvent référence à l’usage d’Ajax. Mais non enfin ! Pas le fameux détergent de Mamie ! Il s’agit plutôt d’un ensemble de technologies visant à augmenter l’ergonomie générale d’un site Internet pour le transformer en une véritable application. Pourtant, lorsque l’on y regarde de plus près, on s’aperçoit que d’autres technologies complètent Ajax, notamment le DHTML et le Drag and Drop. Leur point commun ? Elles sont toutes basées sur du JavaScript.

Introduction

Chacune de ces techniques est vouée à un usage particulier afin de répondre à un besoin précis. En effet, plusieurs critères doivent être pris en compte et il ne s’agit pas de placer plusieurs scripts sur une même page si au final, malgré leurs plus beaux effets, ils alourdissent considérablement le chargement du site.

Puisque désormais vous avez créé votre propre page web, voyons de quelle manière nous pouvons optimiser son ergonomie. Les exemples mentionnés ci-après appartiennent à différentes librairies de JavaScript. Par souci de clarté, nous avons modifié certains d’entre eux. Bien sûr, vous découvrirez une démonstration pour chacun de ces scripts. Aussi, puisqu’un exemple n’est pas forcément très parlant hors contexte, nous avons travaillé en équipe avec un certain Léon Buz qui, souhaitant dynamiser son site Internet, en a profité pour y intégrer plusieurs éléments dynamiques que nous expliquerons au fil des pages.

Mais qui est Léon Buz ?
Léon Buz est un avocat indépendant. Après ses études de Droit International, le voilà plongé dans la vie active  Il n’a pas encore les moyens d’ouvrir son propre cabinet alors il s’est associé à quelques confrères de sa région. Pour bien démarrer sa carrière, Léon s’est familiarisé avec plusieurs techniques de marketing. C’est en lisant un tutoriel sur le XHTML et le CSS qu’il eût l’idée d’un site Internet promotionnel.

Le site est écrit de manière très classique, c’est-à-dire avec des pages HTML statiques et une feuille de style. La barre de navigation permet de passer d’une page à l’autre.

Voici à quoi ressemble le site Internet de Léon.

Si à priori tout semble organisé autour d’une architecture uniforme, cela pose cependant au moins deux problèmes. D’une part, lorsque Léon rajoute une page, il doit modifier la barre de navigation de toutes les pages. D’autre part, la navigation étant synchronisée avec les requêtes du visiteur, le site n’est pas optimisé en termes de performances. Il souhaiterait mettre en place un contenu dynamique afin d’automatiser certaines tâches et augmenter l’ergonomie générale de l’interface. Enfin Léon aimerait bien rajeunir l’interface générale afin d’offrir une nouvelle expérience pour ses visiteurs. Car, comme il a l’habitude de le dire : “Chaque visiteur peut être un client, et client vaut de l’or !”

Voyons maintenant de quelle manière nous pouvons dynamiser son site Internet.