Tutoriels

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

Outils de création de site InternetLorsque 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 tutorial 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.

Vos commentaires
Laissez un commentaire !
A découvrir également :
  1. dan4 en tant qu'invité
    le 22/02/2012 à 15h09

    C'est super mais ça ne fait pas un vrai iframe.

    Je dois avoir un index avec un autre fichier en iframe ou include qui lui seul se charge quand je clique sur un élément du conteneur.

    répondre
  2. Glups en tant qu'invité
    le 12/04/2009 à 21h39

    Glups a dit :Je n'ai pu faire fonctionner cette application qu'en remplaçant 200 par 0 (au niveau du test sur xhr2.status)
    Ensuite, impeccable.

    (Je parle de l'exemple 2c)

    répondre
  3. Glups en tant qu'invité
    le 12/04/2009 à 21h36

    Je n'ai pu faire fonctionner cette application qu'en remplaçant 200 par 0 (au niveau du test sur xhr2.status)
    Ensuite, impeccable.

    répondre
  4. Invité
    0
    le 10/03/2009 à 14h48

    Tous simplement, comment faire une fonction qui mettent fin à "Drag.init" ?

    je vais faire un onclick="stop_Drag();"

    Mais comment faire ?

    répondre
  5. lucifer en tant qu'invité
    le 10/03/2009 à 12h44

    J'aimerai savoir (l'exemple 3b) comment faire en sorte que les éléments qui ont pour class "exeception" ne puissent pas posséder l'effet du drag and drop ?

    En effet si dans notre div, on a un champ input (par exemple) eh bien on ne peut pas remplir ce champs.

    Sinon c'est un très bon tuto

    répondre
Ecrire un commentaire