Os sites evoluem dia após dia, à medida que a comunicação do mundo está cada vez mais próxima. Todas as vezes, precisamos que nossos desenvolvimentos não sejam apenas usados no mercado local, mas também para expandir para mercados globais. Uma das primeiras maneiras de fazer isso é nosso site (ou aplicativos) oferecer suporte a vários idiomas. Hoje voce vai aprender como aplicar vários idiomas ao seu site ou aplicativo.
Como nosso tradutor da web funcionará
1. Teremos um botão em nosso site que nos dará a possibilidade de mudar nosso site para os diferentes idiomas que configuramos.
2. A tradução será feita em javascript extraindo os textos traduzidos através de ajax salvos em arquivos de texto que teremos configurado previamente com as tags do nosso site.
3. Teremos um serviço externo que nos indicará de que país estão nos visitando e assim visualizaremos o idioma ideal para o visitante. Faremos isso pelo IP do visitante.
Vantagens do nosso tradutor
1. Não é necessário atualizar o site para aplicar a tradução, pois muitos sites fazem isso dessa forma.
2. Temos apenas uma versão da nossa frente, não é necessário ter dois ou mais html para lidar com os textos em diferentes idiomas.
3. Se mais tarde quisermos adicionar outros idiomas, podemos configurá-lo muito facilmente.
4. Super fácil de se inscrever para sites que já fizemos e queremos colocar em vários idiomas.
ObservaçãoPara compreender este tutorial de forma clara, é aconselhável ter conhecimentos prévios de HTML, CSS, Javascript (especialmente jQuery), conhecimentos de Ajax e um pouco de PHP.
1. Iniciando o desenvolvimento
Começaremos criando um diretório chamado translate, dentro deste diretório iremos criar os arquivos index.html, um diretório css e chamado js. E dentro desses dois diretórios coloque um arquivo chamado main.css Y main.js respectivamente.
Meu site multilíngue Carregando…[color = # a9a9a9] Código de index.html [/ color]Olá mundo
.loading-lang {opacidade: 0; } .loading-lang.show {opacidade: 1; } [color = # 808080] código main.css [/ color]
Por enquanto, o arquivo main.js está vazio. Podemos testar em nosso servidor da web local preferido. É necessário usar um servidor web, pois mais tarde começaremos a fazer solicitações ajax.
2. Criação de arquivos de tradução
Criaremos em nosso site os arquivos onde colocaremos os textos de nosso site. Começaremos criando dois arquivos para nosso site em dois idiomas. Inglês e espanhol. Criamos um diretório chamado lang, dentro deste diretório colocamos dois arquivos de texto chamados es.txt e en.txt (arquivo de texto em espanhol e inglês respectivamente).
Conteúdo do arquivo
es.txttitulo-web => Meu site multilíngue
bem-vindo => bem-vindo ao meu site
olá => olá mundo
en.txttitulo-web => Meu site multilíngue
bem-vindo => Bem-vindo ao meu site
olá => olá mundo
Vou explicar um pouco sobre esses arquivos como eles estão estruturados. Cada frase que usamos em nosso site deve ser identificada com um ID único, que será a forma de traduzir cada frase onde ela precisa ser especificamente colocada. Por exemplo, para o título do site, usamos o ID title-web seguido dos caracteres => e, em seguida, a frase correspondente. Cada frase deve estar em uma linha diferente.
Em resumo, devemos seguir as seguintes regras
1. ID único.
2. Sempre use após o ID os caracteres =>
3. Frase separada traduzida por uma linha diferente. (Separado por uma nova linha ou \ n).
4. Que os arquivos estão no formato txt.
3. Criando Ajax
ObservaçãoSe você não tem muito conhecimento sobre jQuery, convido você a visitar o site deles.
$ (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 = function (el, nome) {$ (el) .html (nome);}; var changeIndex = function (el, index) {$ (el) .attr ('data-index', ++ index);}; var loadLang = function ( lang) {var processLang = function (data) {var arr = data.split ('\ n'); for (var i in arr) {if (lineValid (arr [i])) {var obj = arr [i] .split ('=>'); assignText (obj [0], obj [1]);}}}; var assignText = function (chave, valor) {$ ('[data-lang = "' + chave + ' "] '). each (function () {var attr = $ (this) .attr (' data-destino '); if (typeof attr! ==' undefined ') {$ (this) .attr (atr, valor); } else {$ (this) .html (valor); }}); }; var lineValid = function (line) {return (line.trim (). length> 0); }; $ ('.lang de carregamento'). addClass ('show'); $ .ajax ({url: 'lang /' + lang + '. txt', erro: function () {alert ('Nenhuma tradução carregada');}, sucesso: função (dados) {$ ('. loading-lang ') .removeClass (' show '); processLang (data);}}); }; }); [color = # a9a9a9] código main.js [/ color]
Também precisamos modificar nosso html:
Meu site multilíngue Carregando…[color = # a9a9a9] Código HTML atualizado [/ color]Olá mundo
Com isso podemos testar se nosso site já está sendo traduzido.
Vamos explicar um pouco o que fizemos em nosso arquivo javascript e o que atualizamos em nosso html.
O processo realizado no arquivo javascript é por meio da tag que funciona como um botão de tradução, colocamos um evento para que se encarregue de fazer uma solicitação ajax extraindo o arquivo do idioma que vamos usar no momento.
Temos três atributos em nosso botão de tradução chamados arquivo de dados, índice de dados, data-text.
Atributos de botão
data-file = "é, emÉ responsável por ter os diferentes idiomas que temos em nosso site. Para o nosso tutorial é e assim por diante. Se você se lembra bem, nossos arquivos de tradução são chamados es.txt e en.txt.
índice de dados = "1Ele tem a posição do próximo arquivo a ser obtido. 0 é ser e 1 dentro, isso significa que o próximo a ser trazido está dentro. Podemos ver essa organização em nosso atributo de arquivo de dados, imagine que o arquivo de dados é semelhante a um vetor.
data-text = "inglês, espanholÉ responsável por visualizar em qual idioma nosso aplicativo está sendo mostrado no momento.
A modificação que fizemos em nosso código HTML foi adicionar o atributo data-lang às tags que vamos traduzir, com o ID exclusivo. Você já deve saber que esse ID exclusivo está configurado nos arquivos en.txt e es.txt.
Por exemplo
Olá mundo
Vamos colocar nosso tradutor à prova e ver se o que desenvolvemos realmente cobre tudo o que precisamos e como é complexo adicionar um novo idioma.
Vamos adicionar um novo idioma. Nesta fase do nosso desenvolvimento, devemos perceber que só temos que fazer duas coisas:
1. Crie nosso novo arquivo de idioma.
2. Adicione o novo idioma nos atributos de arquivo de dados e texto de dados.
Criamos o idioma francês para nosso site. Criamos nosso arquivo de idioma chamado fr.txt dentro do diretório lang.
Conteúdo Fr.txttitulo-web => Mon site multilíngue
bem-vindo => Bienvenue sur mon site
olá => salut monde
Atualizamos nosso botão de idiomas, então em index.html o rótulo é:
inglêsVamos testar nosso site com o novo idioma:
Perfeito! para que possamos adicionar todos os idiomas de que precisamos aos nossos sites sem mais complicações. Vamos fazer um segundo teste. Alguém pode se perguntar: será que uma frase traduzida pode ser reutilizada em uma etiqueta e colocada em outra para não ter que repetir a mesma tradução, mesmo que seja impressa em locais diferentes? A resposta é SIM, vamos fazer o exemplo.
Vamos usar o título da web com Unique ID title-web que estamos usando atualmente em nosso rótulo, e vamos colocá-lo no rodapé de nosso site. É o seguinte:
Meu site multilíngue ©[color = # a9a9a9] Adicione ao código index.html [/ color]
Atualizamos nossas páginas e podemos ver que já temos os três idiomas disponíveis.
Já temos a maior parte do nosso código pronto, só precisamos adicionar algo muito importante para tê-lo sempre em nosso site. Saiba de que país nos visitam e assim saiba em que língua mostrar ao visitante.
4. Detector de país
Existem muitos serviços na Internet que nos fornecem esta informação, para o nosso tutorial usaremos o ipinfodb que nos ajudará a detectar de que país nos visitam. Basta se cadastrar neste site e ele nos fornecerá uma API KEY, que utilizaremos acompanhada do IP do visitante.
Primeiramente nos cadastramos no site, após este cadastro você nos enviará uma mensagem para o e-mail indicado no momento do cadastro, nesta mensagem você nos solicitará a ativação da conta. Ao ativá-lo, dá-nos a API KEY, que permanece em funcionamento 10 minutos após a ativação da nossa conta.
Testamos nossa chave usando o seguinte link http: //api.ipinfodb… .I_API_KEY & ip = IP, substitua onde MI_API_KEY é fornecido pelo que você recebeu e o IP que deseja localizar. No meu caso tentei com meu próprio IP e esse foi o resultado.
Se virmos na imagem, os dois últimos dados são CO; Colômbia. Podemos usar CO, para identificar o país. Uma vez que este é um código único para cada país (ISO 3166-2). Assim que estivermos claros sobre o que faremos, usaremos um serviço de linguagem de servidor, para o tutorial usarei PHP.
[color = # a9a9a9] Código Country.php [/ color]
No exemplo que coloco se o código for CO (Colômbia) ou ES (Espanha) ele retorna 0 que é o índice da língua espanhola, se o código é FR (França) ele retorna 2 que é o índice da língua francesa e, se não for, nenhum dos dois retorna 1 indicando o idioma inglês. No tutorial, deixo como padrão para o idioma inglês qualquer país que não tenhamos indicado nos idiomas. Agora no javascript adicionamos o seguinte código.
$ .ajax ({url: 'country.php', sucesso: função (dados) {$ (seletor) .attr ('índice de dados', dados); startLang ($ (seletor));}}); [color = # a9a9a9] Adicionar ao código main.js [/ color]
Fazemos testes para ver quais resultados obtemos:
Se você estiver fazendo testes locais (como eu neste caso), $ _SERVER ['REMOTE_ADDR'], ele retornará o ip da nossa rede local e não a pública. É por isso que está retornando o idioma padrão inglês, para verificar claramente isso podemos fazer o upload do nosso tutorial para um hosting e pronto!
Com isso finalizamos nosso tutorial, espero que tenham gostado e possam aplicá-lo em seus sites, deixo o código em um zip abaixo:
Baixar código
translate.zip 3.2K 1459 downloads
