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

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

Par GuillaumeB

Présentation du DHTML

Comme son nom l’indique, le DHTML ou Dynamic HTML permet d’offrir du contenu dynamique sur votre site Internet. En d’autres termes, plutôt que de visiter une page statique et figée, l’utilisateur est maintenant en mesure d’interagir avec cette dernière, voire en changer son apparence. En mélangeant HTML et JavaScript, le DHTML est souvent employé pour construire un menu de navigation dynamique ou pour des effets de mouseover lorsque  l’on passe la souris sur un élément de la page. L’usage le plus répandu consiste à cacher du contenu HTML téléchargé initialement pour le présenter dynamiquement lorsque le visiteur opère une action.

De cette manière, l’usage du DHTML permet d’ajouter certaines subtilités à la page Internet qui ne sont pas visibles au premier abord mais qui offrent une expérience très ergonomique. L’interface de Gmail, par exemple, emploie beaucoup cette technique pour révéler un champ de recherche avancée ou dans la gestion des différentes options du webmail.

Le DHTML présente tout de même quelques inconvénients. En effet, cette technologie était surtout populaire à la fin des année 1990, c’est-à-dire quand les navigateurs tels que Internet Explorer 4 et Netscape n’étaient pas capables de prendre en charge les éventuelles erreurs dans le fonctionnement du JavaScript. Ainsi beaucoup de ces scripts ne fonctionnaient pas dans l’ensemble des navigateurs. C’est la raison pour laquelle, le consortium W3C s’est penché sur une technologie HTML dynamique standardisée qui donnera naissance au DOM (Document Object Model).
Aussi, dans la mesure ou l’intégralité du contenu de la page doit être chargé pour que celle-ci soit fonctionnelle, cela nous oblige à limiter les champs d’action du script sur quelques éléments de la page afin d’éviter un temps de chargement initial trop long. La dynamisation complète du site sera  plutôt opérée grâce à un processus de chargement désynchronisé, l’AJAX.

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

Installation de VirtualBox L'installation du programme est tout ce qu'il y a de plus classique. Après avoir téléchargé VirtualBox, un simple…

Fermer