I siti web si evolvono giorno dopo giorno, man mano che la comunicazione del mondo si avvicina sempre di più. Ogni volta abbiamo bisogno dei nostri sviluppi non solo per essere utilizzati nel mercato locale, ma anche per espanderci sui mercati globali. Uno dei primi modi per farlo è che il nostro sito (o le nostre applicazioni) supportino più lingue. Oggi imparerai come applicare più lingue al tuo sito Web o applicazione.
Come funzionerà il nostro traduttore web
1. Avremo un pulsante sul nostro sito che ci darà la possibilità di cambiare il nostro sito nelle diverse lingue che abbiamo configurato.
2. La traduzione verrà effettuata con javascript estraendo i testi tradotti tramite ajax salvati in file di testo che avremo precedentemente configurato con i tag del nostro sito.
3. Avremo un servizio esterno che ci dirà da quale paese ci stanno visitando e visualizzerà così la lingua ideale per il visitatore. Ci occuperemo di questo tramite l'IP del visitatore.
Vantaggi del nostro traduttore
1. Non è necessario aggiornare il sito per applicare la traduzione, poiché molti siti lo gestiscono in questo modo.
2. Abbiamo una sola versione del nostro fronte, non è necessario avere due o più html per gestire i testi in lingue diverse.
3. Se in seguito vogliamo aggiungere altre lingue, possiamo configurarlo molto facilmente.
4. Facilissimo da applicare per i siti che abbiamo già realizzato e che desideriamo inserire in più lingue.
NotaPer comprendere chiaramente questo tutorial, è consigliabile avere una conoscenza precedente di HTML, CSS, Javascript (soprattutto jQuery), conoscenza di Ajax e un po' di PHP.
1. Sviluppo iniziale
Inizieremo creando una directory chiamata translate, all'interno di questa directory creeremo i file index.html, una directory css e chiamata js. E all'interno di queste due directory metti un file chiamato main.css sì main.js rispettivamente.
Il mio sito multilingue Italiano Caricamento in corso…[color = # a9a9a9] Codice da index.html [/ color]Ciao mondo
.loading-lang {opacità: 0; } .loading-lang.show {opacità: 1; } [color = # 808080] codice main.css [/ color]
Per ora il file main.js è lasciato vuoto. Possiamo testare dal nostro server web locale preferito. È necessario utilizzare un server web poiché in seguito inizieremo a fare richieste ajax.
2. Creazione di file di traduzione
Creeremo sul nostro sito i file dove collocheremo i testi del nostro sito. Inizieremo creando due file per il nostro sito che saranno due lingue. Inglese e spagnolo. Creiamo una directory chiamata lang, all'interno di questa directory posizioniamo due file di testo chiamati es.txt e en.txt (rispettivamente file di testo spagnolo e inglese).
Contenuto del file
es.txttitulo-web => Il mio sito multilingue
benvenuto => benvenuto nel mio sito
ciao => ciao mondo
it.txttitulo-web => Il mio sito multilingue
benvenuto => Benvenuto nel mio sito
ciao => ciao mondo
Spiegherò un po' di questi file come sono strutturati. Ogni frase che usiamo sul nostro sito web deve essere identificata con un ID univoco, che sarà il modo per tradurre ogni frase dove deve essere specificatamente posizionata. Ad esempio, per il titolo del sito utilizziamo l'ID title-web seguito dai caratteri => quindi la frase corrispondente. Ogni frase deve essere su una riga diversa.
In sintesi dobbiamo seguire le seguenti regole
1. ID univoco.
2. Usa sempre dopo l'ID i caratteri =>
3. Separare la frase tradotta dal viso con una riga diversa. (Separato da una nuova riga o \ n).
4. Che i file siano in formato txt.
3. Creare l'Ajax
NotaSe non hai molta conoscenza di jQuery, ti invito a visitare il loro sito web.
$ (document) .ready (function () {var selector = '#translate'; $ (selector) .on ('click', function (e) {e.preventDefault (); startLang ($ (this));} ); var startLang = function (el) {var el = $ (el); var text = el.attr ('data-text'); var file = el.attr ('data-file'); file = file. split (','); text = text.split (','); var index = el.attr ('data-index'); if (index> = file.length) {index = 0;} changeName (el , text [index]); changeIndex (el, index); loadLang (file [index]); $ ('html'). attr ('lang', file [index]);}; var changeName = funzione (el, nome) {$ (el) .html (nome);}; var changeIndex = funzione (el, indice) {$ (el) .attr ('indice-dati', indice ++);}; var loadLang = funzione ( lang) {var processLang = function (data) {var arr = data.split ('\ n'); for (var i in arr) {if (lineValid (arr [i])) {var obj = arr [i] .split ('=>'); AssegnaTesto (oggetto [0], oggetto [1]);}}}; var AssegnaTesto = funzione (tasto, valore) {$ ('[data-lang = "' + tasto + ' " ] '). each (function () {var attr = $ (this) .attr (' data-destine '); if (typeof attr! ==' undefined ') {$ (this) .attr (attr, valore); } else {$ (questo) .html (valore); }}); }; var lineValid = function (line) {return (line.trim(). length> 0); }; $ ('. loading-lang'). addClass ('show'); $ .ajax ({url: 'lang /' + lang + '.txt', errore: function () {alert ('Nessuna traduzione caricata');}, success: function (data) {$ ('. loading-lang ') .removeClass (' mostra '); processLang (dati);}}); }; }); [color = # a9a9a9] codice main.js [/ color]
Dobbiamo anche modificare il nostro html:
Il mio sito multilingue Italiano Caricamento in corso…[color = # a9a9a9] Codice HTML aggiornato [/ color]Ciao mondo
Con questo possiamo verificare che il nostro sito sia già in fase di traduzione.
Spieghiamo un po' cosa abbiamo fatto nel nostro file javascript e cosa abbiamo aggiornato nel nostro html.
Il processo eseguito nel file javascript è tramite il tag che funziona come un pulsante di traduzione, posizioniamo un evento in modo che sia incaricato di effettuare una richiesta ajax estraendo il file della lingua che utilizzeremo al momento.
Abbiamo tre attributi nel nostro pulsante di traduzione chiamato file di dati, indice-dati, dati-testo.
Attributi del pulsante
data-file = "è, inÈ responsabile di avere le diverse lingue che abbiamo sul nostro sito. Per il nostro tutorial è e così via. Se ricordi bene i nostri file di traduzione si chiamano es.txt e en.txt.
indice dati = "1Ha la posizione del file successivo da avere. 0 è essere e 1 dentro, questo significa che il prossimo da portare è dentro. Possiamo vedere questa organizzazione nel nostro attributo del file di dati, immagina solo che il file di dati sia simile a un vettore.
data-text = "Inglese, EspañolÈ responsabile della visualizzazione in quale lingua viene attualmente mostrata la nostra applicazione.
La modifica che abbiamo apportato al nostro codice HTML è stata quella di aggiungere l'attributo data-lang ai tag che andremo a tradurre, con l'ID univoco. Dovresti già sapere che questo ID univoco è configurato nei file en.txt ed es.txt.
Ad esempio
Ciao mondo
Mettiamo alla prova il nostro traduttore e vediamo se ciò che abbiamo sviluppato copre davvero tutto ciò di cui abbiamo bisogno e quanto sia complesso aggiungere una nuova lingua.
Aggiungiamo una nuova lingua. In questa fase del nostro sviluppo dobbiamo renderci conto che dobbiamo fare solo due cose:
1. Crea il nostro nuovo file di lingua.
2. Aggiungi la nuova lingua negli attributi data-file e data-text.
Creiamo la lingua francese per il nostro sito. Creiamo il nostro file di lingua chiamato fr.txt all'interno della directory lang.
Contenuto fr.txttitulo-web => Mon site multilingue
benvenuto => Bienvenue sur mon site
ciao => salut monde
Aggiorniamo il nostro pulsante delle lingue, quindi in index.html l'etichetta è:
ingleseTestiamo il nostro sito con la nuova lingua:
Perfetto! così possiamo aggiungere tutte le lingue di cui abbiamo bisogno ai nostri siti web senza ulteriori complicazioni. Facciamo un secondo test. Viene da chiedersi una cosa, una frase tradotta può essere riutilizzata su un'etichetta e posizionata su un'altra per non dover ripetere la stessa traduzione anche se stampata in posti diversi? La risposta è SI, facciamo l'esempio.
Usiamo il titolo del web con ID univoco title-web che stiamo attualmente utilizzando nella nostra etichetta e lo collocheremo nel piè di pagina del nostro sito. È come segue:
Il mio sito multilingue ©[color = # a9a9a9] Aggiungi al codice index.html [/ color]
Aggiorniamo le nostre pagine e possiamo vedere che abbiamo già tutte e tre le lingue disponibili.
Abbiamo già la maggior parte del nostro codice pronto, dobbiamo solo aggiungere qualcosa di molto importante per averlo sempre sul nostro sito. Sapere da quale paese ci stanno visitando e quindi sapere quale lingua mostrare al visitatore.
4. Rilevatore di paese
Ci sono molti servizi su Internet che ci forniscono queste informazioni, per il nostro tutorial utilizzeremo ipinfodb che ci aiuterà a rilevare da quale paese ci stanno visitando. Tutto quello che devi fare è registrarti su questo sito e ci fornirà una CHIAVE API, che utilizzeremo accompagnata dall'IP del visitatore.
Per prima cosa ci registriamo al sito, dopo questa registrazione ci invierai un messaggio alla mail indicata al momento della registrazione, in questo messaggio ci chiedi di attivare l'account. Quando lo attivi, ci fornisce l'API KEY, che rimane in funzione 10 minuti dopo l'attivazione del nostro account.
Testiamo la nostra chiave utilizzando il seguente link http: //api.ipinfodb… .I_API_KEY & ip = IP, sostituisci dove MI_API_KEY è dato da quello che ti è stato dato e l'IP che vuoi localizzare. Nel mio caso ho provato con il mio IP e questo è stato il risultato.
Se vediamo nell'immagine gli ultimi due dati sono CO; Colombia. Possiamo usare CO, per identificare il paese. Poiché questo è un codice univoco per ogni paese (ISO 3166-2). Una volta che siamo chiari su cosa faremo, usiamo un servizio di linguaggio server, per il tutorial userò PHP.
[color = # a9a9a9] Codice Paese.php [/ color]
Nell'esempio metto che se il codice è CO (Colombia) o ES (Spagna) restituisce 0 che è l'indice della lingua spagnola, se il codice è FR (Francia) restituisce 2 che è l'indice per la lingua francese , e in caso contrario non è nessuno dei due che restituisce 1 che indica la lingua inglese. Nel tutorial lascio di default alla lingua inglese qualsiasi paese che non abbiamo indicato nelle lingue. Ora nel javascript aggiungiamo il seguente codice.
$ .ajax ({url: 'country.php', success: function (data) {$ (selector) .attr ('data-index', data); startLang ($ (selector));}}); [color = # a9a9a9] Aggiungi al codice main.js [/ color]
Facciamo dei test per vedere che risultati otteniamo:
Se stai facendo test locali (come me in questo caso), $ _SERVER ['INDIRIZZO_REMOTO'], restituirà l'ip della nostra rete locale e non quella pubblica. Ecco perché sta restituendo la lingua predefinita inglese, per verificarlo chiaramente possiamo caricare il nostro tutorial su un hosting e il gioco è fatto!
Con questo abbiamo terminato il nostro tutorial, spero vi sia piaciuto molto e possiate applicarlo sui vostri siti web, lascio il codice in un zip qui sotto:
Scarica il codice
translate.zip 3.2K 1459 download
