01 août 2008
Personnaliser Yahoo! Babelfish
Etiquettes: babelfish, traduction, yahoo
Mise à jour 20 janvier 2009
Je viens de constater un souci que je ne m'explique pas encore avec ce tuto: si je recrée un nouveau code les traductions n'ont pas l'air de fonctionner correctement, pourtant mon code exemple de ce tuto fonctionne parfaitement, alors qu'il est basé sur exactement la même chose.
Si vous avez essayé d'utiliser ce tuto, merci de me faire part de vos retours.
Yahoo Babelfish est un service de traduction automatique.
Il propose un outil à insérer dans son site, pour proposer à ses visiteurs de traduire directement la page sur laquelle ils sont.
Evidemment, cet outil a tous les défauts d'un traducteur automatique, au mot par mot. Mais ça peut servir quand même.
Côté design, c'est pas folichon, Yahoo propose une seule apparence par défaut, celle-ci:
Et c'est là que vous me remerciez d'exister car je vais vous dire comment personnaliser tout ça pour mieux l'intégrer à votre site :)
Cela va se faire en plusieurs étapes:
1) Récupérer le fichier à personnaliser
2) Modifier le fichier et les images
3) Héberger le nouveau fichier
4) Modifier le code de l'outil
1) Récupérer le fichier à personaliser
Pour insérer cet outil, Yahoo nous donne le code suivant à mettre dans nos pages html:
<script type="text/javascript" charset="UTF-8" language="JavaScript1.2" src="http://fr.babelfish.yahoo.com/free_trans_service/babelfish2.js?from_lang=fr®ion=fr"></script>
Et c'est quoi là-dedans qu'on va pouvoir personnaliser, hein?
Là, pas grand chose. Mais dans le fichier javascript qui est appelé par ce script, plein de choses.
Donc, première étape, récupérer le fichier babelfish2.js, surtout son contenu. Vous embêtez pas, je l'ai fait pour vous.
document.write('<div style="background:#7F9DB9;width:131px;padding-bottom:1px"> <img src="http://us.i1.yimg.com/us.yimg.com/i/us/bf/b/bf_badge2.gif" border="0"> <div style="background:#FFF;margin:0 1px 0px 1px;padding:2px;"> <div style="font:12px arial">Choisissez une <b>langue de traduction</b></div> <img src="http://us.i1.yimg.com/us.yimg.com/i/us/bf/gr/bf_wave_s.gif" border="0"> <br> <select name="to_lang" onchange="trurl=location.href; lp=this.options[this.selectedIndex].value; if(lp!=\'\') window.location=\'http://fr.babelfish.yahoo.com/translate_url?doit=done&fr=bf-badge&trurl=\'+trurl+\'&lp=\'+lp;" style="font:11px arial;width:127px" align="center"> <option value=\'\'>Choisir la langue</option><option value="en_en">anglais</option><option value="en_de">allemand</option><option value="en_el">grec</option><option value="en_es">espagnol</option><option value="en_it">italien</option><option value="en_nl">néerlandais</option><option value="en_pt">portugais</option> </select> </div></div>')<!-- fe01.bff.search.re1.yahoo.com uncompressed/chunked Fri Aug 1 12:29:11 PDT 2008 -->
Si vous tenez à savoir comment faire: vous vous rendez à l'adresse http://fr.babelfish.yahoo.com/free_trans_service/babelfish2.js qui est indiquée dans le code de Yahoo, et vous faites afficher la source.
2) Modifier le fichier et les images
On voit dans ce fichier babelfish2.js qu'il génère en fait un code html, celui qui va faire afficher l'outil de traduction.
Voici ce code, mis en forme:
<div style="background:#7F9DB9;width:131px;padding-bottom:1px">
<img src="http://us.i1.yimg.com/us.yimg.com/i/us/bf/b/bf_badge2.gif" border="0">
<div style="background:#FFF;margin:0 1px 0px 1px;padding:2px;">
<div style="font:12px arial">Choisissez une <b>langue de traduction</b>
</div>
<img src="http://us.i1.yimg.com/us.yimg.com/i/us/bf/gr/bf_wave_s.gif" border="0"><br>
<select name="to_lang" onchange="trurl=location.href; lp=this.options[this.selectedIndex].value; if(lp!=\'\') window.location=\'http://fr.babelfish.yahoo.com/translate_url?doit=done&fr=bf-badge&trurl=\'+trurl+\'&lp=\'+lp;" style="font:11px arial;width:127px" align="center">
<option value=\'\'>Choisir la langue</option>
<option value="en_en">anglais</option>
<option value="en_de">allemand</option>
<option value="en_el">grec</option>
<option value="en_es">espagnol</option>
<option value="en_it">italien</option>
<option value="en_nl">néerlandais</option>
<option value="en_pt">portugais</option>
</select>
</div>
</div>
Et voilà la structure en image:
Le logo Yahoo, c'est http://us.i1.yimg.com/us.yimg.com/i/us/bf/b/bf_badge2.gif.
L'image du poisson, c'est http://us.i1.yimg.com/us.yimg.com/i/us/bf/gr/bf_wave_s.gif.
Pour changer ces images, il suffit de modifier les adresses pour mettre celles de ses propres images.
On peut aussi purement et simplement les supprimer en supprimant les codes correspondants<img src="http://us.i1.yimg.com/us.yimg.com/i/us/bf/b/bf_badge2.gif" border="0"> et<img src="http://us.i1.yimg.com/us.yimg.com/i/us/bf/gr/bf_wave_s.gif" border="0"><br>
Mais on peut aller plus loin. En effet, vous remarquerez qu'un attribut style est déclaré dans chaque div, on va pouvoir modifier ces attributs, en enlever, en ajouter... Il suffit de connaître un peu le css.
Je vous conseille de créer un fichier html où vous copierez le code, en l'ouvrant avec votre navigateur vous verrez directement ce que ça donne. Vous pouvez ainsi faire tous vos essais en local.
Pour l'exemple, voici le code que j'ai utilisé (en gras ce qui est modifié):
<div style="background:#324B65;width:150px;padding:1px 0 1px 0;">
<img src="http://sd-1.archive-host.com/membres/up/152282661762569155/yahoo_babelfish/babelfish.png" border="0">
<div style="background:#F7F9FF;margin:0px 2px 2px 2px;padding:2px;">
<div style="font:12px arial">Traduire en:
</div>
<!--<img src="http://us.i1.yimg.com/us.yimg.com/i/us/bf/gr/bf_wave_s.gif" border="0"><br>--image supprimée-->
<select name="to_lang" onchange="trurl=location.href; lp=this.options[this.selectedIndex].value; if(lp!=\'\') window.location=\'http://fr.babelfish.yahoo.com/translate_url?doit=done&fr=bf-badge&trurl=\'+trurl+\'&lp=\'+lp;" style="font:11px arial;width:127px" align="center">
<option value=\'\'>Choisir la langue</option>
<option value="fr_en">english</option>
<option value="fr_de">deutsch</option>
<option value="fr_el">ελληνικός</option>
<option value="fr_es">español</option>
<option value="fr_it">italiano</option>
<option value="fr_nl">nederlands</option>
<option value="fr_pt">portugueses</option>
</select>
</div>
</div>
Note: pour que les caractères spéciaux (grec, lettres accentuées) apparaissent bien, il faut que votre fichier soit encodé en UTF-8, chose totalement impossible avec le bloc-note basique de windows. C'est (entre autres) pour ça que pour tout ce qui est développement web, il faut utiliser un bloc-note plus évolué (personnellement j'utilise Notepad++).
Une fois que vous avez fait vos modifications, vous mettez tous sur une seule ligne (important) et vous ajoutez document.write(' au début et ') à la fin, et vous enregistrez ce nouveau fichier avec une extension .js.
Voilà ce que ça donne pour moi:
document.write('<div style="background:#324B65;width:150px;padding:1px 0 1px 0;"> <img src="http://sd-1.archive-host.com/membres/up/152282661762569155/yahoo_babelfish/babelfish.png" border="0"> <div style="background:#F7F9FF;margin:0px 2px 2px 2px;padding:2px;"><div style="font:12px arial">Traduire en:</b></div> <select name="to_lang" onchange="trurl=location.href; lp=this.options[this.selectedIndex].value; if(lp!=\'\') window.location=\'http://fr.babelfish.yahoo.com/translate_url?doit=done&fr=bf-badge&trurl=\'+trurl+\'&lp=\'+lp;" style="font:11px arial;width:127px" align="center"> <option value=\'\'>Choisir la langue</option> <option value="fr_en">anglais</option> <option value="fr_de">allemand</option> <option value="fr_el">grec</option> <option value="fr_es">espagnol</option> <option value="fr_it">italien</option> <option value="fr_nl">néerlandais</option> <option value="fr_pt">portugais</option> </select> </div></div>')
3) Héberger le nouveau fichier
Il faut maintenant héberger ce nouveau fichier sur un hébergement qui nous permette d'avoir une adresse directe. Pour les utilisateurs de Canalblog, ça marche très bien avec l'insertion de fichier (voir d'autres solutions ici).
4) Modifier le code de l'outil
Enfin, il ne reste plus qu'à mettre l'adresse de notre nouveau fichier dans le code du script de Yahoo.
Par exemple, pour moi:
<script type="text/javascript" charset="UTF-8" language="JavaScript1.2" src="http://sd-1.archive-host.com/membres/up/152282661762569155/yahoo_babelfish/w_babelfish.js?from_lang=fr&region=fr"></script>
Et voilà le résultat:
Commentaires
Poster un commentaire
Rétroliens
URL pour faire un rétrolien vers ce message :
http://www.canalblog.com/cf/fe/tb/?bid=445046&pid=10107458
Liens vers des weblogs qui référencent ce message :
les personnalisation
tu sais que dans les règle inscrit sur yahoo il est formellement de modifier le bloc ainsi que le logo si tu veux mon avis enléve vite se tuto tu pourrais et etre poursuivi en justice
Posté par guillamot, 11 mai 2009 à 20:20