Accueil » Dossiers » Tutoriaux » DHTML, Ajax, Drag and Drop : Dynamisez votre site Internet !

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

Par GuillaumeB

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.

5 Commentaires
0

Vous aimerez aussi

5
Poster un Commentaire

avatar
5 Fils de commentaires
0 Réponses de fil
0 Abonnés
 
Commentaire avec le plus de réactions
Le plus populaire des commentaires
0 Auteurs du commentaire
dan4Glups0lucifer Auteurs de commentaires récents
  S’abonner  
plus récent plus ancien Le plus populaire
Notifier de
lucifer
Invité
lucifer

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 😛

Anonyme
Invité
Anonyme

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

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

Mais comment faire ?

Glups
Invité
Glups

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

Glups
Invité
Glups
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)

dan4
Invité
dan4

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.

Plus dans Tutoriaux
Tutoriel VirtualBox : créer une machine virtuelle

Lorsque l'on souhaite faire fonctionner simultanément différents systèmes d'exploitation sur la même machine, il est alors nécessaire de créer une…

Fermer