[AJAX] [Scriptaculous] Dictionnaire intelligent intégré à un site web

Bonjour à tous,

Je vous écris car je souhaiterai implémenter un dictionnaire à mon site web.

Pour le moment voici comment est présenté mon dictionnaire : La page d'acceuil est un tableau dont les cases sont les 26 lettres de l'alphabet qui sont des liens vers une page contenant tous les mots commençant par cette lettre.

Je trouve cela, certes correct, mais plutôt "archaïque".

J'aimerai un dictionnaire "intelligent" si je puis dire. Par exemple comme dans Google Lab où l'on tape le début d'un mot (ou sa première lettre) et un sous menu s'ouvre en proposant tous les mots commençant par ceci (un genre d'auto-complétion).

Petit plus souhaitable : Quand des mots contenus dans le dico sont utilisés autre part dans le site web, faire de ceux-ci un lien vers leur définition dans le dico avec soit un lien simple, soit une petite bulle qui apparait avec leur définition dedans.

Pour le langage je n'ai pas trop d'idée sur quoi utiliser. J'ai posté ici dans Ajax car je sais que l'on peut faire plein de choses dynamiques et intelligentes avec (comme des calendriers ou autre) donc c'est une piste, maintenant s'il faut du PHP je suis aussi preneur.

Je vous remercie donc d'avance pour tous les conseils que vous pourrez me donner afin de mener à bien mon petit projet. :D

En vous souhaitant une bonne journée !!

Cordialement,

Salut,

Tout d'abord tu peux te faire une idée de la complexité de ton problème
grâce à ce tutoriel

Ensuite, tu peux regarder ce qu'il existe dans des frameworks, par exemple
scriptaculous:

http://demo.script.aculo.us/ajax/autocompleter

En ce qui concerne ton idée de lier les mots du dictionnaire (plutôt un glossaire dans
ton cas je pense), tu as tout intérêt à sauver tes mots dans une base de donnée.

Ensuite, d'un point de vue érgonomique, il faut que les mots qui figurent dans le glossaire soient distinct des autres. Il faut les marquer dans ton code html. Par
exemple:

Code:

---

1 2	Un bout de texte avec un <span class='glossaire'>mot</span> défini

---

Et appliquer un css du genre:

Code:

---

1 2	span.glossaire { color: blue; border-bottom: 1px dotted blue; }

---

Cette phase peut se faire manuellement, ou automatiquement. Pour
l'automatiser une solution serait d'utiliser php et de traiter le texte de toutes
tes pages en vérifiant chaque mot pour savoir si il existe dans le glossaire.
C'est une opération lente, il faut donc éviter de faire ce traitement à chaque
requête (utiliser un système de cache ou de publication)

Du coté de Javascript tu peux dynamiquement lier les mots du glossaire
à une fonctionnalité Ajax permettant de chercher la définition sur le serveur.

En gros, au chargement de ta page tu recherches tous les éléments span de
class glossaire et tu leur ajoute un évènement onmouseover/onmouseout
pour faire apparaitre une bulle d'aide dont le contenu est chargé via Ajax.

Un exemple de bulle d'aide ici http://www.dhtmlgoodies.com/scripts/...x-tooltip.html

Là aussi, l'utilisation d'un framework te facilitera grandement la vie. Je te
recommande de regarder du coté de prototype

Un exemple de comment activer dynamiquement tes mots avec prototype:

Code:

---

1 2 3 4 5 6 7

Event.observe(window, 'load', function() { $$('span.glossaire').each( function(e) { Event.observe(e, 'mouseover', showTooltip); Event.observe(e, 'mouseoout', hideTooltip); }); });

---

La fonction showTooltip doit extraire le mot contenu dans le span, faire une
requête serveur pour obtenir le code html de la définition, placer ce code dans
une div positionnée en absolu près du mot.

hideTooltip, détruit simplement cette div.

Voilà, j'espère que ça t'aide un peu à situer le problème.

En effet c'est assez complexe mais très puissant comme outils de ce que j'ai pu en voir !

Je vais me pencher sur la question et voir ce que je peux en faire.

Merci beaucoup de ton aide en tout cas !!

Je vous tiens au courant de l'avancée de mon projet :)

Salut,

J'ai eu cette demande d'un client pour un site et voici comment j'ai procédé.

En premier lieu il faaut faire attention à protéger certains mots. Par exemple il faut éviter de faire un lien sur un mot déjà dans un lien !

Ensuite il ne faut pas appliquer cet effet sur les mots qui sont dans les src des images !

Le principe est donc le suivant :

Admettons que tu veuille faire un lien vers un petit popup qui affichera la définition.

Dans un tableau tu vas extraire de ta bdd les définition et leurs id dans la base pour avoir un tableau associatif comme suit :

$indexDictionnaire = array("definition" => uid);

Le mot sera en minuscule => strtolower();

J'utilise la variable $GLOBALS pour pouvoir utiliser certaines variables dans différentes fonctions. Si tu a une autre solution n'hésite pas.

Les deux fonctions seront appellées par preg_replace_callback.
Elles permettent d'extraire les données à protéger (liens, images) et de remplacer les mots du dictionnaire par le lien popup.
Adapte la fonction remplaceMotsGlossaire() à ta guise...

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

function stockeExtra($resulteExpreg) { $codeRetour = "<extra>" . $GLOBALS['cptExtra'] . "</extra>"; $GLOBALS['listeExtrasTmpGlossaire'][$codeRetour] = $resulteExpreg[0]; $GLOBALS['cptExtra'] ++; return $codeRetour; }   function remplaceMotsGlossaire($resulteExpreg) {   $idMotDictionnaire = $GLOBALS['indexDictionnaire'][strtolower($resulteExpreg[1])];   $urlPopup = "voir_definition.php?uid=" . $idMotDictionnaire;   return '<a href="#" onclick="Popup(\'' . $urlPopup . '\', 320, 240); return false;" class="lienGlossaire">' . $resulteExpreg[1] . '</a>'; }   //--> VARIABLES UTILISEES POUR LA SAUVEGARDE DES EXTRAS $GLOBALS['listeExtrasTmpGlossaire'] = array(); $GLOBALS['cptExtra'] = 1;   //--> LE DICTIONNAIRE SOUS FORME DE TABLEAU ASSOCIATIF $GLOBALS['indexDictionnaire'] = array( "lorem" => 29, "sollicitudin" => 30,"ultrices" => 31,"commodo" => 32);   //--> LE TEXTE DE TA PAGE $Texte = '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum malesuada mi. Nulla sollicitudin, felis quis lacinia venenatis, nibh leo ultrices nulla, ac hendrerit elit turpis vitae dolor. </p>';   //--> ETAPE 1 -> REMPLACER LES LIENS (On ne va pas faire un lien sur un lien) ! $texteSansExtra = preg_replace_callback('%<a ([^>]*)>(.*?)</a>%i', 'stockeExtra', $Texte);   //--> ETAPE 2 -> REMPLACER LES IMAGES (si le mot fait partie de le source) $texteSansExtra = preg_replace_callback('%<img ([^>]*)>%i', 'stockeExtra', $texteSansExtra);   //--> ETAPE 3 -> REMPLACEMENT DES MOTS $masqueExpreg = '/\\b(' . implode('|', array_keys($GLOBALS['indexDictionnaire'])) . ')\\b/is'; $texteGlossaire = preg_replace_callback($masqueExpreg, 'remplaceMotsGlossaire', $texteSansExtra);   //--> ETAPE 4 -> ON REINJECTE LES EXTRAS $texteFinal = strtr($texteGlossaire, $GLOBALS['listeExtrasTmpGlossaire']);   //--> ON AFFICHE LE TEXTE echo $texteFinal;

---

Voilà.

De mon coté j'ai eu des durées de traitement très satisfaisants :

avec un dictionnaire de 90 mots sur un texte d'environ 8085 caractères le traitement se fait en 0.2 sec environ...

En espérant que ça puisse t'aider :)

@++ Kaimite

Merci beaucoup pour cette aide qui me simplifie la tâche côté popup !!!

Merci encore à toi, oui tu m'as aider :P:king: !