12

Qual a ferramenta que vocês têm utilizado para liberar a opção de tradução do conteúdo de um site estático em HTML para outro idioma? Algum plugin jquery, alguma api? Qual é a melhor prática visando desempenho atualmente?

Será que o ideal seria usar algo que capture o IP do usuário e carregue uma página já traduzida no idioma para aquele país?

Serão apenas 4 idiomas: Português, Inglês, Espanhol e Italiano. Para o restante dos países, o idioma padrão poderá ser o inglês.

5

2 Respostas 2

1

Você pode fazer toda tradução via gulp, tem uns módulos interessantes de i18n https://www.npmjs.com/package/gulp-static-i18n

Você precisa de um módulo no gulp que leia seus textos ou elementos html com determinado atributo data/class e que esse módulo jogue tudo num json ou arquivo .mo(muito usado para tradução)

E outra task para buildar as traduções, duplicando os htmls e trocando os textos, assim você poderia subir tudo em um servidor estático do tipo S3 da amazon, que tem baixo custo e assim você não precisa de um server/backend para traduzir texto, é escalável e rápido.

E para o redirect via geolocalizção, talvez dê para fazer via nginx ou htacces, então você precisa de um server só para fazer o redirect, então você terá isso:

User acessa o site -> server com nginx que verifica a língua e redireciona para o path certo do S3 -> S3 com folder /en/ ou /pt/ ou /es/ ou outra língua/pasta.

0

Acho que uma das melhores formas é usar o link, como:

<link rel="alternate" hreflang="en-gb" href="http://en-gb.site.com" />
<link rel="alternate" hreflang="pt-br" href="http://pt-br.site.com" />

Isso já vai fazer com que os buscadores já mostrem o conteúdo na linguagem certa, na maioria dos casos.

Mas, obviamente isso não é suficiente. Para obter a linguagem do usuário, uma boa maneira é obter o window.navigator.language, então usar algum tipo de matcher de BCP-47, assim se o resultado do navegador for en-us ele iria obter o idioma mais próximo disponível, o en-gb, por exemplo. Se não houver um idioma próximo cairá num padrão, que é o que você define.


Esta é a primeira vez que tento fazer um site com multiplos idiomas, então o que vou escrever aqui é o que estou fazendo, mas não foi "testado em produção" e talvez haja outros problemas nesse método.

Estou usando o GopherJS, Golang, portanto apenas copiei o que uso e tentei simplificar, mas será necessário achar funções equivalentes para Javascript.

O que tenho feito é simplesmente:

<div data-text="welcome"></div>

Então, ao iniciar a página se obtêm a linguagem do cliente, usando o window.navigator.language, e existe um dicionário e a lista de idiomas:

var Idiomas = []language.Tag{language.English, language.BrazilianPortuguese}

var Dicionario = texts{
    "welcome": {
       "Welcome",
       "Bem-vindo",
    },
    "another-text": {
        "Another text",
        "Outro texto",
    },
}

Agora, para saber qual conteúdo exibir, eu utilizo o text/language, você deverá achar algum outro para o Javascript. Dessa forma simplesmente se torna:

var idiomaEscolhido string

// Obtêm o idioma do subdominio, se existir
subdominio := strings.Split(js.Global.Get("location").Get("host").String(), ",")
if len(subdominio) > 1 && subdominio[0] != "meusite" {
    idiomaEscolhido = subdominio[0]
}   

// Obtêm o idioma do navegador, se não há definido até então
if idiomaUsuario = "" {
    idiomaUsuario = js.Global.Get("navigator").Get("language").String()
}

// Encontra o idioma mais próximo
 _, index := language.MatchStrings(language.NewMatcher(AvailableLanguages), lang)

O index representa 0 para language.English e 1 para language.BrazilianPortuguese. Primeiro usamos o idioma do subdominio (como en-us.meusite.com), mas se não existir um subdominio (como meusite.com) iremos usar o idioma do navegador. Então, quando carregar a página basta fazer um:

for _, el := range t.QuerySelectorAll("[data-text]") {

    text, ok := Dicionario[el.GetAttribute("data-text")][index]
    if !ok == "" {
        logs.Warn("Não encontramos textos para " + el.GetAttribute("data-text"))
    }

    t.SetText(el, text)
}

A ideia deste código é obter todos os data-text e substituir. Então, se houver data-text="welcome" ele deve pegar o texto que está no mapa do dicionario. Então, o dicionario["welcome"][0] será o inglês, e o dicionario["welcome"][1] será o português.

Isso tem algumas limitações, como formatações de datas ou plurais. Por exemplo, no Brasil, usamos DD/MM/AAAA, enquanto em outros lugares é MM/DD/AAAA. Uma maneira de mitigar isso é usando um padrão internacional, mas isso pode ser estranho em alguns casos.


Já no lado da performance, há como mitigar o impacto. Uma vez que você tem que encontrar todos os data-text e então realizar a inserção do texto, você pode usar o HTMLTemplateElement (o <template>) ou o HTMLSlotElement (o <slot>). Esses dois elementos não são renderizados, exceto quando iniciados. Isso indica que todos os data-text dentro dele não será traduzido e não será obtido. Então, a cada vez que for exibir um template terá que traduzir o texto contido nele.

Isso reduz o impacto, já que apenas o que foi iniciado será traduzido. Então, apenas o que o usuário ver será traduzido, não perderá tempo traduzindo aquilo que o usuário não vai ver.


Já na parte do SEO, você pode realizar o mesmo do JS no lado do servidor. O objetivo aqui é simples. Quando o usuário acessar en-us.site.com o bot já vai ver o conteúdo em inglês, então todos os data-text já vão estar preenchidos antecipadamente, mesmo que o cliente não tenha o Javascript.

Para isso, é possível criar, no meu caso, um http.Handle, nele irá executar um código usando o htmlquery, que usa o XPATH. Então, cria um arquivo index_en_us.html e index_pt_bt.html, ambos tem o conteúdo os data-text já preenchido e já previamente armazenado.

Quando o usuário acessar en-us.site.com ele será servido por index_en_us.html. Porém, se ele clicar em "Português", os efeitos serão imediatos e não precisará esperar uma requisição para o pt-br.site.com, já que a tradução também pode ser feita no cliente.

Caso utilize o NodeJS poderá fazer a mesma coisa, talvez até reutilizar o código do cliente no servidor.

Quando o usuário acessar a página padrão, site.com, ele será servido com o index_en_us.html. Porém, o conteúdo será traduzido no lado do cliente, baseado no idioma do navegador.

Você também poderia ler o cabeçalho de Accept-Language, no servidor, e dar um conteúdo com o melhor idioma. Porém, muitos CDNs (como o CloudFlare) não respeitam o Vary. Então, mesmo que você retorne um cabeçalho de Vary: Accept-Language, para indicar que o conteúdo é outro dependendo do Accept-Language, eles continuam dando o mesmo resultado para qualquer requisição. Por isso, eu preferi por enviar o conteúdo padrão e o cliente, no Javascript, traduzir. A tradução no lado do cliente é positiva por ser imediata, então o usuário pode alternar o idioma quando quiser, sem ter que esperar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .