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. 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. Exemple de DHTML : le mouseover Voici sans doute ce qui se fait de plus simple en DHTML : le mouseover : Et oui notre première page Internet ne fait que...quatre lignes ! Plutôt rassurant comme début, non ? Quelques explications Ici, nous avons deux images img1.png et img2.gif. Dans un premier temps, nous ne voyons que la première d'entre elles. Nous effectuons ensuite deux petites opérations à l'aide d'un JavaScript directement intégré au code HTML. : L'opération onmouseover"this.src'img2.gif'" signifie que si l'utilisateur passe sa souris sur la première image, alors celle-ci sera remplacée par la seconde. L'opération onmouseout"this.src'img1.png'" signifie que si l'utilisateur déplace sa souris en dehors de l'image, alors la situation sera réinitialisée et la seconde image disparaîtra au profit de la première. Notez que les deux images sont présentes dans le code HTML de la page. Cela signifie qu'elles ont été téléchargées dès le début du chargement de la page. C'est l'usage du JavaScript qui rend son agencement dynamique. Voir l'exemple (1a) - Télécharger l'exemple Exemple de DHTML : le menu dynamique Si vous levez les yeux en haut de cette page, vous apercevrez le menu de navigation horizontal de Zebulon.fr. Celui-ci permet de regrouper plusieurs liens et de les organiser dans différentes catégories. Il existe deux possibilités pour écrire un tel menu : soit avec une feuille de style particulière (comme ici) soit avec du DHTML, c'est-à-dire en utilisant du JavaScript. Contrairement à l'exemple précédent, une page en DHTML sera plus véritablement composée d'un fichier HTML et d'un autre fichier JavaScript (.js). Plutôt que de recopier intégralement le script dans le fichier HTML – qui risquerait d'alourdir la page- nous placerons un lien vers ce dernier entre les balises de la même manière que l'on placerait une feuille de style externe : Voici maintenant un exemple de menu vertical présentant les catégories sous formes de panneaux animés à la manière de la barre de navigation de Microsoft Outlook. Voir l'exemple (1b) - Télécharger l'exemple DHTML - Mise en situation avec Léon ! Pour son site, Léon Buz s'est intéressé au DHTML, il nous présente un petit script qu'il a placé au bas de sa page afin de permettre au visiteur de pouvoir facilement changer le style utilisé. Dans le jargon webdev, il s'agit d'un styleswitch, cela donne au webmaster la possibilité de proposer une version imprimable du site, une famille de police plus lisible, voire un agencement général radicalement différent. Voir l'exemple (1c) - Télécharger l'exemple Essayez le styleswitch de Léon. Présentation d'Ajax Lorsque nous surfons sur Internet, nous sommes habitués à un mécanisme très standard qui se développe en trois temps. Quand nous cliquons sur un lien, nous envoyons une requête auprès du serveur. De son côté, le serveur analyse cette demande et renvoi l'information vers le client ; cela se traduit pour nous en un laps d'attente. Enfin, une fois la requête reçue, notre navigateur l'interprète et charge une autre page. Ce processus fonctionne alors en synchronisation avec les attentes du visiteur. Le terme AJAX est utilisé pour décrire un ensemble de technologies Internet qui permettent à l'utilisateur d'avoir une navigation plus ergonomique et plus rapide. Cet acronyme signifie Asynchronous JavaScript and XML, ou, en Français, JavaScript et XML désynchronisés. Du côté utilisateur, le cycle "envoyer une requête et attendre la réponse" n'existe qu'une fois, la page visionnée n'est plus rechargée car celle-ci est mise en cache : cela se traduit donc par un gain de temps. De toute évidence, l'usage d'AJAX présente bien des avantages par rapport à du HTML classique. Puisque qu'il n'y a pas de rafraîchissement de page et donc une rapidité de l'interface utilisateur, cela permet notamment d'économiser de la bande passante. Malgré l'engouement général des développeurs autour d'Ajax, il est important de souligner que cette technologie n'est pas exempte de défauts. En effet, les pages chargées par de l'Ajax ne sont pas ajoutées à l'historique du navigateur. De ce fait, le bouton Précédent n'est pas fonctionnel. Il faudra alors re-cliquer sur le lien adéquat pour retrouver une page déjà visitée, sinon, vous risquez de quitter le site. Comme quoi, le degré d'ergonomie offert par Ajax reste un élément encore discutable. Par ailleurs, il est parfois difficile de sauvegarder une application Ajax à un état donné, c'est-à-dire avec une page particulière chargée par un JavaScript. Dans le même ordre d'idée, si vous avez placé un compteur sur votre site principal alors il faudra modifier ce dernier pour qu'il puisse prendre en charge les pages secondaires car celles-ci sont souvent chargées au travers d'un iframe. Enfin, dans la mesure ou les pages d'un iframe en Ajax ne comportent que les éléments HTML essentiels, c'est-à-dire sans les balises , et , celles-ci seront difficilement repérables par les moteurs de recherche, notamment à cause de l'absence de balises et . Différences entre Ajax et HTML Afin de comprendre le mécanisme d'Ajax, il est intéressant de le comparer à du HTML standard. Dans le premier exemple ci-dessous (2a), nous avons placé un simple lien vers une seconde page statique. Puisque nous passons d'une page à l'autre, l'URL de la barre d'adresse est différent (default.htm et page2.htm). En revanche, dans notre exemple 2b, la requête a été opérée indirectement à l'aide d'un JavaScript qui a pour fonction d'aller chercher la seconde page et de placer son contenu sur la page default.htm. Puisque ce processus est réalisé du côté serveur, nous ne quittons pas la page default.htm, la barre d'adresse est donc identique – ce qui explique pourquoi il est si difficile de sauvegarder une application en Ajax à un état donné. Voici un petit exemple (2a) de page classique - Télécharger l'exemple Voici un petit exemple (2b) de page utilisant Ajax. - Télécharger l'exemple Voici le JavaScript utilisé dans l'exemple 2b dans son intégralité : var http createRequestObject();function createRequestObject() { var objAjax; var browser navigator.appName; if(browser "Microsoft Internet Explorer"){ objAjax new ActiveXObject("Microsoft.XMLHTTP"); }else{ objAjax new XMLHttpRequest(); } return objAjax;}function getNewContent(){ http.open('get','page2.htm'); http.onreadystatechange updateNewContent; http.send(null); return false;}function updateNewContent(){ if(http.readyState 4){ document.getElementById('LeContenu').innerHTML http.responseText; }} Quelques explications : AJAX repose sur un étonnant paradoxe. En effet, la technologie fut introduite en 1998 par le Remote Scripting de Microsoft qui permettait de récupérer certaines données du serveur grâce à un applet Java en communiquant avec un JavaScript. Microsoft a donc développé l'objet XMLHttpRequest dans Internet Explorer 5, vous le connaissez plus vraisemblablement sous le nom d'Active X. Les développeurs ont mis en avant un projet de standardisation de cette technologie auprès du World Wide Web Consortium (W3C). Aujourd'hui, la plupart des navigateurs modernes tels que Firefox, Safari ou même Internet Explorer 7 embarquent une version standard de l'objet XMLHttpRequest. Cependant, par souci de compatibilité avec les versions antérieures d'Internet Explorer, il faudra procéder à une reconnaissance du navigateur utilisé. Dans notre JavaScript, cela correspond à la boucle if...else ci-dessous : var browser navigator.appName; if(browser "Microsoft Internet Explorer"){ objAjax new ActiveXObject("Microsoft.XMLHTTP"); }else{ objAjax new XMLHttpRequest(); } return objAjax;} Le processus général se déroule en trois temps, grâce à trois fonctions introduites en ligne 2, 12 et 18. C'est l'élément XMLHttpRequest (ligne 8) qui va chercher les nouvelles données (HTTP, XML ou TXT) à l'aide d'une commande HTTP. Ici, nous chargeons la seconde page appelée page2.htm. Puisque la requête est effectuée depuis le serveur même, l'action est donc désynchronisée par rapport à l'utilisateur. C'est la fonction updateNewContent(), en ligne 18, qui placera le contenu de page2.htm directement sur default.htm et plus précisément dans la section ( ) identifiée par le mot-clé LeContenu (ligne 20). Exemple d'Ajax : L'iframe Vous connaissez probablement l'iframe ( ) en HTML qui consiste à récupérer une page Internet et la présenter sur votre site dans un cadre. Nous allons procéder de cette manière mais en proposant une solution "ajaxée". En d'autres termes, nos pages se trouveront dans un dossier spécifique, fichiers, et le processus sera opéré à l'aide d'un JavaScript, zebulon.js. function new_xhr(){ var xhr_object null; if(window.XMLHttpRequest) xhr_object new XMLHttpRequest(); else if(window.ActiveXObject){ try { xhr_object new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xhr_object new ActiveXObject("Microsoft.XMLHTTP"); } } else { alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); xhr_object false; } return xhr_object;}function load_page(select) { var xhr2 new_xhr(); xhr2.onreadystatechange function(){ if ( xhr2.readyState 4 ){ if(xhr2.status ! 200){ document.getElementById("content").innerHTML "Error code " + xhr2.status; } else { document.getElementById("content").innerHTML xhr2.responseText; } } else { document.getElementById("content").innerHTML "Chargement en cours ... "; } } xhr2.open("GET", select.split('?')+".html", true); xhr2.send(null);} Quelques explications : Dans un premier temps, de la ligne 1 à 17, nous définissons l'objet XMLHttpRequest (xhr pour les intimes!). De même que pour l'exemple précédent, nous prenons en compte les navigateurs compatibles avec XMLHttpRequest tels que Firefox ou Safari (ligne 3) ainsi que le cas particulier d'Internet Explorer (ligne 5). Puis, nous déterminons la fonction qui va recharger le contenu de la page (lignes 18 à 33). Les fichiers externes chargés par le nouvel élément xhr seront placés dans la section content sur notre index.html. Pendant ce processus, un témoin d'activité apparaîtra, ici il s'agit de l'image loading.gif. Voici maintenant de manière très basique ce à quoi notre index.html ressemble : Page 1 | Page 2 | Page 3 |

Ceci est la page principale

Quelques explications : Dans la tête de la page ( ) nous plaçons un lien vers le JavaScript (ligne 4) et la feuille de style (ligne 3). Par souci de clarté, nous n'avons quasiment pas stylisé la page. De la ligne 7 à 9 nous avons construit trois liens vers trois pages extérieures (zebulon1.html, zebulon2.html et zebulon3.html) localisées dans le dossier fichiers. La fonction Onclick sert à communiquer avec notre JavaScript. Ainsi une fois la page rapatriée, celle-ci sera placée dans la section content comme défini dans zebulon.js. La valeur return false permet de ne pas recharger l'index.html. Remarques : Dans la mesure ou les fichiers extérieurs seront intégrés à index.html, il ne faut pas y inclure les balises , ou , mais seulement son contenu brut. Notre dossier principal contient donc : zebulon.js, style.css, index.html, le dossier fichiers contenant les pages externes. Il ne manque plus qu'à y ajouter notre témoin d'activité, loading.gif. Voir l'exemple 2c - Télécharger l'exemple (Vous noterez qu'une fois les pages chargées par le JavaScript, celles-ci sont accessibles immédiatement par la suite.) Exemple Ajax : Le flux RSS Si vous rêvez de vous fabriquer votre propre lecteur de flux RSS, alors voici une solution plutôt intéressante. En effet, nous allons cette fois charger le contenu d'un flux pour le présenter sur une page HTML classique dans une section prédéfinie. Il sera possible de préciser le nombre de titres que l'on souhaite télécharger, leur date de publication ainsi qu'une brève description. Enfin, le gâteau sur la cerise : une pagination ajaxée du contenu du flux ! Cette opération se déroule en deux temps. Du côté serveur, notre script, RSS Display Box, utilise SimplePie, un analyseur de données écrit en PHP qui se chargera de récupérer le flux RSS. En effet, dans la mesure où ce flux n'est pas local, un simple JavaScript ne saurait être en mesure d'effectuer ce processus. En revanche, une fois le flux récupéré, le JavaScript permet d'utiliser de l'Ajax pour le présenter sur une page HTML. S'il est nécessaire que votre serveur soit capable d‘interpréter le langage PHP, le flux peut être présenté sur n'importe quel type de page .html ou .php. Avant d'entrer dans les détails, voici un exemple (2 d) en action - Télécharger l'exemple. Notre script contient : index.html, un dossier simplepie et un dossier rssbox. a) Commençons par localiser le fichier main.php dans le dossier rssbox. Voici ce qui nous intéresse : $rsslistarray("zebulon" > "http://rss.zebulon.fr/feed/zebulon/actualites"); Ici, nous avons spécifié que le flux RSS de Zebulon.fr était rattaché à l'identifiant "zebulon". b) Entre les balises de notre fichier .html, sur lequel le flux apparaîtra, nous avons construit trois liens. Le premier lien redirige vers une feuille de style, le second lien est nécessaire pour obtenir l'effet de pagination, enfin, le troisième est le plus important, il s'agit du script par lequel le flux RSS sera présenté en Ajax sur notre page. c) Ensuite, sur ce même fichier .html, dans le corps de la page ( ), voici de quelle manière procéder pour personnaliser le flux de Zébulon. //MAIN FUNCTION: rssdisplaybox()var cssdriveboxnew rssdisplaybox("zebulon")cssdrivebox.set_items_shown(10,5) cssdrivebox.set_template("default") cssdrivebox.start() //Required: start script A la ligne 3, nous spécifions quel flux doit être pris en compte à l'aide de son identifiant ("zébulon"). Les valeurs 10 et 5 à la ligne suivante signifient que l'on télécharge les 10 derniers titres d'actualité à défaut de 5 par page. Logiquement, nous avons obtenons un effet de pagination avec 2 pages. d) Enfin, pour une personnalisation plus poussée, rendez-vous dans le dossier rssbox et ouvrez le fichier outputbody ; vous y retrouverez les différents identifiants à utiliser dans votre feuille de style : rsscontainer, rsstitle, rssdate et rssdescription. Ajax - Mise en situation avec Léon Léon a décidé d'utiliser moins de pages HTML statiques. Ainsi pour les pages qu'il juge essentielles, ACCUEIL, BIOGRAPHIE, SERVICES et LIENS, il utilise un iframe. Il s'agit d'un processus très important dans la dynamisation globale de son site Internet car ces pages, une fois chargées, seront donc accessibles instantanément par le visiteur (enfin, le client qui vaut de l'or !). Notez que l'emploi d'Ajax est très discret et à peine perceptible lorsqu'il est utilisé sur des pages légères. Aussi, plutôt que de dresser une liste de liens extérieurs, Léon a décidé de pousser les choses un peu plus loin : intégrer directement dans son site les flux RSS afin d'avoir les dernières actualités simplement et rapidement. Ainsi, non seulement cela lui permettra de personnaliser sa propre page avec les titres de son choix mais aussi de retenir ses visiteurs et les inciter à revenir régulièrement pour lire du contenu mis à jour automatiquement. Dans le fichier main.php du dossier rssbox, Léon a choisit de spécifier trois flux de cette manière : $rsslistarray("zebulon" > "http://rss.zebulon.fr/feed/zebulon/actualites","lemonde" > "http://www.lemonde.fr/rss/sequence/0,2-3208,1-0,0.xml","guillaume" > "http://feeds.feedburner.com/guillaumebelfiore") (Notez qu'il ne faut pas mettre de virgule après le dernier flux !) Puis il a écrit trois pages html en mentionnant à chaque fois quel flux doit être récupéré par SimplePie à l'aide de son identifiant zebulon, lemonde ou guillaume. Pour visualiser ce nouveau type d'Ajax sur le site de Léon, cliquez sur LIENS. La dernière page vous propose de lire les trois flux RSS. Essayez l'Ajax de Léon. Présentation du Drag and Drop Le Drag and Drop est une technologie initialement inventée par Xerox qui consiste à cliquer sur un élément, puis, tout en maintenant le bouton de la souris enfoncé, à le glisser vers une zone cible. C'est Apple qui a popularisé cette technique en l'intégrant dans ses ordinateurs. Aujourd'hui, lorsque l'on parle d'une interface riche du web 2.0, c'est véritablement le Drag and Drop qui transforme un service web standard en une application web. En effet, ce dernier est de plus en plus utilisé pour simuler l'ergonomie d'un programme installé sur une machine. Peut-être certains d'entre vous utilisent-ils une page Internet personnalisée telle que Netvibes, PageFlakes ou My Yahoo! Ces services en ligne vous permettent de choisir les flux RSS de votre choix et de les organiser sur un espace agencé à votre manière. Le principe est simple car il suffit de glisser chacun des modules à l'aide de la souris. Nous retrouvons aussi le Drag and Drop sur les nouvelles interfaces de webmail, tels que Yahoo ! Mail, afin de facilement réorganiser nos messages, d'un dossier à un autre par exemple. Exemple de glisser Comment cela fonctionne-t-il ? La réponse ne vous-t-elle pas évidente ? Avec du JavaScript bien sûr ! Voyons de quelle manière nous pouvons permettre à un élément d'une page d'être déplaçable au clic d'une souris. Ici, nous employons un JavaScript de la librairie de dynamicdrive.com. La première étape consiste à placer le script dans la tête de votre document HTML de cette manière : Ensuite, il suffit d'appeler la fonction Drag.init ( ) et de l'appliquer à l'élément que vous souhaitez pouvoir glisser à l'aide de la souris. Pour cela, nous utilisons un identificateur zebulon. Voici notre page HTML très basique. Drag.init(document.getElementById("zebulon")); Notez que l'élément qui nous intéresse doit être en position relative, dans le cas contraire, le JavaScript ne fonctionnera pas. Voir l'exemple 3a - Télécharger l'exemple Ce qui est intéressant avec ce script c'est qu'il est aussi possible de faire glisser des blocs entiers de texte. Cela fonctionne de la même manière, c'est-à-dire en attribuant un identificateur à l‘élément dans le code de la page.

Chers lecteurs de Zebulon.fr Ceci est un texte que nous glissons sur la page. Celui-cise trouve dans un DIV.

Drag.init(document.getElementById("cadre")); Quelques explications : Ici, le DIV est identifié par cadre (ligne 4). C'est sur ce dernier que la fonction Drag.init (ligne 10) opère sa magie. Voir l'exemple 3b - Télécharger l'exemple Exemple de glisser-déposer en javascript Jusqu'à présent nous sommes intéressés au simple glisser. Voyons un exemple de script permettant d'effectuer un déposer. Pour ce faire, la librairie offerte par Yahoo! (Yahoo User Interface Library) est très riche. Yahoo propose un JavaScript général utilities.js pour différentes actions de glisser-déposer, nous allons donc placer ce dernier entre les balises de notre fichier HTML aux côtés des propriétés de style. Dans cet exemple, nous allons glisser l'élément Source pour le déposer sur l'élément Cible. Chacun sera placé dans un respectif. Enfin nous appellerons certaines variables du JavaScript principal. Voici une portion de notre code placée entre les balises . div id"source" class"dd-demo"> La Source

La Cible

(function() { var dd, dd2, clickRadius 46, startPos, EventYAHOO.util.Event, DomYAHOO.util.Dom; YAHOO.util.Event.onDOMReady(function() { var el Dom.get("source"); startPos Dom.getXY(el); dd new YAHOO.util.DD(el); dd.clickValidator function(e) { var el this.getEl(); var region Dom.getRegion(el); var r clickRadius; var x1 Event.getPageX(e), y1 Event.getPageY(e); var x2 Math.round((region.right+region.left)/2); var y2 Math.round((region.top+region.bottom)/2); Event.preventDefault(e); return ( ((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2)) Quelques explications : En ligne 13, le validateur permet de définir la zone qui sera déplaçable sur la page au clic de la souris. C'est la variable var r clickRadius; qui trace un cercle autour du point Source. Lorsque l'utilisateur clique sur ce champ, les variables X1 et Y1 établissent l'endroit précis du clic de la souris. Par ailleurs, afin d'éviter toute confusion, nous ne souhaitons pas que le texte de la source puisse être sélectionné, c'est l'objet de la commande en ligne 20. Si l'utilisateur ne déplace pas la Source jusqu'à la Cible, la fonction dd.onInvalidDrop function(e) (ligne 26), est activée (la Source retourne à son point initial). Voir l'exemple 3c - Télécharger l'exemple Drag and Drop - Mise en situation avec Léon Et oui ! Léon s'est aussi amusé avec le glisser-déposer ! Il a retravaillé sa page de contact. En plus d'un nouveau formulaire, Léon donne la possibilité au visiteur de choisir l'adresse email à laquelle leur message doit être envoyé. Ainsi, selon la nature de l'email (professionnel ou personnel), il suffit de placer la bonne adresse du destinataire dans le champ approprié sur le formulaire de contact. Essayez l’Ajax de Léon. Conclusion En mélangeant DHTML, Ajax et Drag and Drop, les interfaces riches du web 2.0 sont, pour la plupart, un panaché de plusieurs technologies Internet. Aussi, c'est réellement l'usage du JavaScript qui permet de transformer une simple page statique en une véritable application web. Le DHTML et le Drag and Drop proposent un contenu malléable ; cela favorise l'interaction avec le visiteur. Parce qu'il communique directement avec le serveur, Ajax repousse les limites du simple HTML et offre une interface très réactive dépourvue de rafraîchissements. Il est important de garder en mémoire les avantages et les inconvénients de ces technologies, aussi, selon la nature de votre site Internet, il conviendra donc de les utiliser à bon escient, Le DHTML rajeunira certainement vos pages mais ce script sera-t-il pris en charge dans l'ensemble des navigateurs ? La navigation du site sera facilité par de l'Ajax mais cela affectera-t-il son classement dans les moteurs de recherche ? Bien évidemment, il existe des milliers de scripts à télécharger gratuitement pour aiguiser votre curiosité. Voici quelques liens vers les librairies les plus complètes. Toutjavascript.com : plus de 130 scripts à télécharger. Tous sont notés par la communauté francophone. DynamicDrive : Bien qu'en anglais, il s'agit probablement de la librairie la plus complète avec des exemples de prévisualisation. Puisque cette communauté est très active, les scripts sont testés dans tous les navigateurs. DHTMLGoodies : Une librairie un peu moins dense mais de même qualité. AjaxDaddy : De l'Ajax, rien que de l'Ajax, pour le plaisir des yeux ! Google Web Toolkit et Yahoo! User Interface Library : les applications de Google et Yahoo! n'auront plus de secrets pour vous! Quant à notre cher Léon, après avoir jonglé avec ces différentes technologies, il dispose désormais d'un site entièrement dynamique...reste à savoir si cela lui rapportera plus de clients !

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

Exemple de DHTML : le menu dynamique

Vous aimerez aussi