Batch Forum Index
RegisterSearchFAQMemberlistUsergroupsLog in
Reply to topic Page 1 of 1
Traduction dynamique de vos pages web
Author Message
Reply with quote
Post Traduction dynamique de vos pages web 
Hello les gens,

Pour ceux d'entre vous qui souhaitent que leur pages soient accessible à l'international, je vous ai concocté un petit js sympa !

En s'appuyant sur l'API de traduction YANDEX ( gratuite ), voici de quoi traduire tous vos élément, il suffit pour cela d'ajouter la class="ToTranslate" à l'élément que vous souhaitez.
La langue est détectée dans le JS avec navigator.language, pas besoin de la renseignée Okay

Vous devez vous inscrire gratuitement sur yandex traduction pour obtenir l'API_KEY >> https://passport.yandex.com/auth/welcome?origin=translate&retpath=https…

A modifier à cet endroit:
Code:

var ApiKey = "xxxxx.x.x.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";


fichier exemple HTML: ( l'important étant la class )
Code:

<!DOCTYPE html>
<html>

<header>
   <script src="./trad.js"></script>
</header>
<body>

<div class="ToTranslate">Hello</div>
<div class="ToTranslate">My name is Robert</div>
<p class="ToTranslate">TEST</p>
<p class="ToTranslate"> I have a big family with seven people, my grandparents, parents, two brothers and me. We take care of one another, share housework, and often communicate all together.</p>


</body>
</html>


Fichier JS:
Code:

// PURE JS - NO LIBRARY REQUIRED
// STRYK 31/01/2019

document.addEventListener('DOMContentLoaded', function(){

    var LangToTranslate = navigator.language;
    var LangToTranslate = LangToTranslate.substring(2, 0);

    var ArrayToTranslate = document.getElementsByClassName("ToTranslate");

    for ( var IndexToTranslate in ArrayToTranslate ){

        if ( !isNaN(IndexToTranslate) ){

            TranslateElement(ArrayToTranslate[IndexToTranslate], LangToTranslate);

        } // END IF

    } // END FOR

}); // END DOCUMENT READY FUNCTION

function TranslateElement(ElementToTranslate, LangToTranslate){

    var TextToTranslate = ElementToTranslate.innerHTML;

   var ApiUrl = "https://translate.yandex.net/api/v1.5/tr.json/translate";

    var ApiKey = "xxxxx.x.x.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

    var xhr = new XMLHttpRequest();
   var data = "key="+ApiKey+"&text="+TextToTranslate+"&lang="+LangToTranslate;
   
    xhr.open("POST",ApiUrl,true);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.send(data);
    xhr.onreadystatechange = function(){

        if (this.readyState==4 && this.status==200){

            var result = this.responseText;
            var json = JSON.parse(result);
         
            if ( json.code == 200 ){
         
                ElementToTranslate.innerHTML = json.text[0];
            
            } // END IF
         
        } // END IF
      
    } // END XHR
   
} // END FUNCTION





______________________________________________________


L'ignorance est un fléau qui engendre la haine et la mort
La connaissance est une arme qui surpasse toutes les autres
Partagez votre savoir, sinon il sera perdu à jamais
Post Publicité 
PublicitéSupprimer les publicités ?


Reply with quote
Post Traduction dynamique de vos pages web 
Salut Wink
Je trouve que ce code est très sympa et même on peut l'expoilter aussi dans un fichier HTA ( pour moi je vais utiliser le vbscript dans ce dernier )
Mais je vais l'utiliser comme google translate Mr. Green
Je me demande seulement si cette API n'est pas limitée dans le temps ??

Edit : Aperçu du HTA







______________________________________________________
Reply with quote
Post Traduction dynamique de vos pages web 
Hello Hackoo

écoute à priori ce n'est pas limité dans le temps, juste en terme de caractère ou de mots simultanéments !

Sympa ton hta, y'a moyen de mettre le code ? ( ou crée un sujet si tu veux, c'est interressant ).
Dans l'idée c'est cool de pouvoir sélectionner avec un menu, par contre c'est galère t'as vu il faut tout renseigner dans le select.
( c'est pour ça que j'ai fait une détection de la langue comme un flemmard Laughing Laughing )




______________________________________________________


L'ignorance est un fléau qui engendre la haine et la mort
La connaissance est une arme qui surpasse toutes les autres
Partagez votre savoir, sinon il sera perdu à jamais
Reply with quote
Post Traduction dynamique de vos pages web 
Salut stryk Okay
Oui bien sûr je vais le poster même dans la section de l'aide à la programmation,
car, je me trouve un peu bloqué dans l'encodage des carctères qu'on passe de l'arabe vers une autre langue,
par contre l'inverse it's OK Okay
@+

Edit stryk (à la demande de Hackoo suite problème pour poster )


Code:

<!DOCTYPE html>
<HTA:APPLICATION
APPLICATIONNAME="Translate"
SCROLL="Yes"
ICON="nslookup.exe"
SINGLEINSTANCE="yes"
WINDOWSTATE="maximize"
innerborder="no"
maximizebutton="no"
minimizebutton="yes"
borderstyle="normal"
caption="yes"
contextMenu="no"
sysmenu="yes"
>
<head>
   <meta charset="utf-8" />
   <META HTTP-EQUIV="MSThemeCompatible" CONTENT="YES">
   <title>Translate - Traduire - Tradurre - Traducir - Traduzir  [ by Hackoo 2019 ]</title>
   <style type="text/css">
      body {
      background: lightblue;
      background-image: url('https://www.itespresso.fr/wp-content/uploads/2012/03/langue-684x513.jpg');
      background-repeat:repeat;
         background-color: white;
         font-family: Sans-Serif;
         text-align: center;
      }
      .arrow {
         font-size: 2.0em;
         font-weight: bold;
         margin: 0;
      }
*, body, button, html, input, select, textarea {
   font-family: monospace;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html,body {
   width:100%;height:auto;
   margin:0px;padding:0px;
   font:14px/1.4 monospace;
   overflow:hidden;
   position: relative;
}

textarea { resize:both; } /* none|horizontal|vertical|both */
   </style>
<script type="text/vbscript">
Sub Window_OnLoad()
   input.focus
End Sub
'------------------------------------------------
Function Translate(Text2Translate,Direction)
Text2Translate = document.getElementById("input").value
Direction = document.getElementById("Direction").value
API_KEY = "trnsl.1.1.20130922T110455Z.4a9208e68c61a760.f819c1db302ba637c2bea1befa4db9f784e9fbb8"
API_URL = "https://translate.yandex.net/api/v1.5/tr/translate?key="+ API_KEY +"&text="_
+ escape(Text2Translate) + "&lang="_
+ Direction + ""
Translated_string = Extracting_Translated_Strings(GetSourceCode(API_URL))
Translate = Translated_string
End Function
'-------------------------------------------------
Function GetSourceCode(URL)
   On error resume next
   Dim http
   Set http = CreateObject("Msxml2.XMLHTTP")
   http.open "GET",URL,False
   http.send
   If Err <> 0 Then
      MsgBox "Erreur ==> " & Err.Description,vbCritical,Err.Description
   End If
   GetSourceCode = http.responseText
End Function
'------------------------------------------------
Function Extracting_Translated_Strings(Data)
   Dim regEx, Match, Matches
   Set regEx = New RegExp
   regEx.Pattern = "(?:<text>)([\s\S]*)(?:<\/text>)"
   regEx.IgnoreCase = True
   regEx.Global = True
   Set Matches = regEx.Execute(Data)
   If Matches.Count = 0 Then
        Extracting_Translated_Strings = ""
        Exit Function
    End If
    Extracting_Translated_Strings = Matches(0).SubMatches(0)
End Function
'------------------------------------------------
Sub TranslateIT()
   document.getElementById("output").value = unescape(Translate(Translated_string,Direction))
End Sub
'------------------------------------------------
</script>
</head>
<body>
<p><textarea id="input" cols="70" rows="12" placeholder="Type any text here and choose language for translating" onkeyup="TranslateIT" onchange="TranslateIT">
Please type any text here and choose which language for translating
</textarea></p>
<p class="arrow">↓</p>
<p><select id="Direction" onchange="TranslateIT">
   <option value="en-ar" selected>Anglais-Arabe</option>
   <option value="ar-en" >Arabe-Anglais</option>
   <option value="en-fr">Anglais-Francais</option>
   <option value="en-it">Anglais-Italien</option>
   <option value="en-es">Anglais-Espagnol</option>
   <option value="en-de">Anglais-Allemand</option>
   <option value="en-pt">Anglais-Portugais</option>
   <option value="en-ru">Anglais-Russe</option>
   <option>-----------------</option>
   <option value="fr-ar">Francais-Arabe</option>
   <option value="fr-it">Francais-Italien</option>
   <option value="fr-es">Francais-Espagnol</option>
   <option value="fr-de">Francais-Allemand</option>
   <option value="fr-pt">Francais-Portugais</option>
   <option value="fr-ru">Francais-Russe</option>
   <option>-----------------</option>
   <option value="it-ar">Italien-Arabe</option>
   <option value="it-fr">Italien-Francais</option>
   <option value="it-en">Italien-Anglais</option>
   <option value="it-es">Italien-Espagnol</option>
   <option value="it-de">Italien-Allemand</option>
   <option value="it-pt">Italien-Portugais</option>
   <option value="it-ru">Italien-Russe</option>
   <option>-----------------</option>
   <option value="de-ar">Allemand-Arabe</option>
   <option value="de-fr">Allemand-Francais</option>
   <option value="de-it">Allemand-Italien</option>
   <option value="de-es">Allemand-Espagnol</option>
   <option value="de-en">Allemand-Anglais</option>
   <option value="de-pt">Allemand-Portugais</option>
   <option value="de-ru">Allemand-Russe</option>
   <option>-----------------</option>
   <option value="en-ja">Anglais-Japan</option>
   <option value="en-zh">Anglais-Chinois</option>
</select></p>
<p class="arrow">↓</p>
<p><textarea id="output" cols="70" rows="12"></textarea></p>
</body>
</html>






______________________________________________________
Reply with quote
Post Traduction dynamique de vos pages web 
CC Hacko,

bon tu verras sur ton code j'ai mis une clé publique histoire que tu garde ta clé pour toi Wink

alors, j'ai tenté avec .innerText et .innerHtml à la place de .value et toujour le même souci de caractère !

J'ai testé ce que tu transmet à yandex:


Et ce que te renvoi l'api:


C'est curieux j'ai testé en bricolant le même code que toi mais en html et JS, ça me retourne bien les bons caractères ...
J'imagine que c'est dans la façon d'interpréter l'encodage !
Je ne connais pas le vbs, je passe la main Rolling Eyes

Ah et je ne vois pas pourquoi le placeholder de ton textarea ne s'affiche pas même quand tu supprime le texte des balises ... curieux

( Sinon on peut te faire ça en JS Okay )




______________________________________________________


L'ignorance est un fléau qui engendre la haine et la mort
La connaissance est une arme qui surpasse toutes les autres
Partagez votre savoir, sinon il sera perdu à jamais
Reply with quote
Post Traduction dynamique de vos pages web 
Salut Stryk Wink
Ok ; J'attends alors ta modification du HTA avec un bon JS !
@+




______________________________________________________
Reply with quote
Post Traduction dynamique de vos pages web 
Voilà, modifié quelques trucs Wink

Code:

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="X-UA-Compatible" content="IE=9">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta name="author" content="Hackoo"/>
        <title>Translate - Traduire - Tradurre - Traducir - Traduzir  [ by Hackoo 2019 ]</title>

      <HTA:APPLICATION
      APPLICATIONNAME="Translate"
      SCROLL="Yes"
      ICON="nslookup.exe"
      SINGLEINSTANCE="yes"
      WINDOWSTATE="maximize"
      innerborder="no"
      maximizebutton="no"
      minimizebutton="yes"
      borderstyle="normal"
      caption="yes"
      contextMenu="no"
      sysmenu="yes"
      >

      <style type="text/css">
      
         body {
            background: lightblue;
            background-image: url('https://www.itespresso.fr/wp-content/uploads/2012/03/langue-684x513.jpg');
            background-repeat:repeat;
            background-color: white;
            font-family: Sans-Serif;
            text-align: center;
         }
         
         .arrow {
            font-size: 2.0em;
            font-weight: bold;
            margin: 0;
         }
         
         *, body, button, html, input, select, textarea {
            font-family: monospace;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
         }

         html,body {
            width:100%;height:auto;
            margin:0px;padding:0px;
            font:14px/1.4 monospace;
            overflow:hidden;
            position: relative;
         }

         textarea { resize:both; } /* none|horizontal|vertical|both */
      
      </style>
      
   </head>

   <body>
   
      <p>
         <textarea
         id="input"
         cols="70"
         rows="12"
         onkeyup="TranslateIT();"
         onchange="TranslateIT();">Type any text here and choose language for translating</textarea>
      </p>
      
      <p class="arrow">↓</p>
      
      <p><select id="Direction" onchange="TranslateIT();">
      
         <option value="de">Allemand</option>
         <option value="en" selected="selected">Anglais</option>
         <option value="ar">Arabe</option>
         <option value="zh">Chinois</option>
         <option value="es">Espagnol</option>
         <option value="fr">Francais</option>
         <option value="it">Italien</option>
         <option value="ja">Japonais</option>
         <option value="pt">Portugais</option>
         <option value="ru">Russe</option>

      </select></p>
      
      <p class="arrow">↓</p>
      
      <p><textarea id="output" cols="70" rows="12"></textarea></p>
      
      <script type="text/javascript">

         document.addEventListener('DOMContentLoaded', function(){

            document.getElementById('input').focus();

         }); // END DOCUMENT READY FUNCTION

         function TranslateIT(){
         
            var TextToTranslate = document.getElementById('input').innerText;
            var LangToTranslate = document.getElementById('Direction').value;
            var TextTranslatedArea = document.getElementById('output');

            var ApiUrl = "https://translate.yandex.net/api/v1.5/tr.json/translate";
            // PublicApiKey //
            var ApiKey = "trnsl.1.1.20130922T110455Z.4a9208e68c61a760.f819c1db302ba637c2bea1befa4db9f784e9fbb8";

            var xhr = new XMLHttpRequest();
            var data = "key="+ApiKey+"&text="+TextToTranslate+"&lang="+LangToTranslate;
            
            xhr.open("POST",ApiUrl,true);
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(data);
            xhr.onreadystatechange = function(){

               if (this.readyState==4 && this.status==200){

                  var result = this.responseText;
                  var json = JSON.parse(result);
                  
                  if ( json.code == 200 ){ TextTranslatedArea.innerText = json.text[0]; }
                  
               } // END IF

            } // END XHR

         } // END FUNCTION
      
      </script>

   </body>

</html>


Après tu pourrais inverser le sens des textareas, un bouton clear etc ... Okay

En tous cas l'idée est très sympa Hackoo, j'adore ( le background que tu as choisis aussi !! )
juste avis super personnel: je réserve les HTA aux applications stand-alone qui n'ont besoin de rien d'extérieur ( fichiers, internet, etc)

Et toi qui touche un peu en html css tu devrais te mettre sérieusement au js Wink




______________________________________________________


L'ignorance est un fléau qui engendre la haine et la mort
La connaissance est une arme qui surpasse toutes les autres
Partagez votre savoir, sinon il sera perdu à jamais
Reply with quote
Post Traduction dynamique de vos pages web 
C'est vraiment super Okay

Par contre je ne préconise pas cette méthode même si c'est cool est que ça permet de traduire les pages dynamiquement, ça peut coûter assez cher au niveau du chargement (enfin sa dépend bien sûr du poids de la page)
Le mieux c'est d'avoir plusieurs versions du texte (en français, en anglais,.. etc) et de mettre ça soit dans un fichier externe (pour le hta c'est mieux), sinon tout mettre directement dans la page
Et la traduction est souvent inexacte même s'il y a eu énormément de progrès, c'est pas parfait

Après bien sûr, cela dépend du projet, dans certain cas une traduction dynamique peut vraiment être bien car ça permet d'exporter le projet rapidement à l'international mais c'est pas ce qui est le plus recommandé (enfin c'est mon avis ^^)
Sinon c'est vraiment super Mr. Green




______________________________________________________
la vie est trop courte pour retirer le périphérique USB en toute sécurité...
Si la statue de la liberté lève le bras depuis 125 ans, c'est parce qu'elle cherche du réseau sur son Blackberry Torches...
Grâce à mon nouveau correcteur automatiste sur mon téléphage, je ne fais plus aucune faute d'orthodontie.
Quelqu'un a t il déjà demandé au drapeau japonais ce qu'il enregistre depuis tout ce temps ?
Visit poster’s website
Reply with quote
Post Traduction dynamique de vos pages web 
Hello Flamm,

Oui je suis d'accord avec toi, c'est plus rapide et mieux d'avoir plusieurs langues dans le JS.

Mais dans quelques cas c'est plus simple ce style de méthode, je pense par exemple à un petit site vitrine d'un artisan.
Surtout quand le lien est sur une page facebook, visible par tout un tas de communautés.
Pas besoin de prévoir une version turque ou danoise pour montrer tes créations de bouquets de fleurs et le visiteur sera moins exigeant sur la qualité de traduction.

Wink




______________________________________________________


L'ignorance est un fléau qui engendre la haine et la mort
La connaissance est une arme qui surpasse toutes les autres
Partagez votre savoir, sinon il sera perdu à jamais
Reply with quote
Post Traduction dynamique de vos pages web 
Qui a supprimé la réponse de Hackoo ?

Mort de Rire




______________________________________________________


L'ignorance est un fléau qui engendre la haine et la mort
La connaissance est une arme qui surpasse toutes les autres
Partagez votre savoir, sinon il sera perdu à jamais
Reply with quote
Post Traduction dynamique de vos pages web 
API proposée par notre ami Hackoo --> https://responsivevoice.com/developer-api/




______________________________________________________


L'ignorance est un fléau qui engendre la haine et la mort
La connaissance est une arme qui surpasse toutes les autres
Partagez votre savoir, sinon il sera perdu à jamais
Post Traduction dynamique de vos pages web 


Display posts from previous:
Reply to topic Page 1 of 1
  



Index | Getting a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Copyright 2008 - 2016 // Batch