HTML como traduzir site inteiro!

16 de julho de 2018

Tem alguma ferramenta, plugin ou framework que faça a tradução de um site todo e seu conteúdo para outros idiomas?

sei que usando o lang="pt_BR" , ele define o idioma a ser usado no site, no entanto nunca precisei fazer um site(até o momento) em que se use mais que um idioma.

Seriam os idiomas: Português(todo já feito), Espanhol, Inglês e Alemão (restantes).

Alguém sabe como posso resolver essa equação?

Grato!

navegantenarede · 16 de julho de 2018

@fspjonny, no caso do WordPress, existem alguns plugins que buscam fazer essa tradução automatizada, um deles é o WPML.

Se for um site que não seja com o WordPress, você pode tentar usar o plugin do Google Translator, mas vai exigir a requisição com o servidor do serviço para exibir o conteúdo traduzido.

DiF · 16 de julho de 2018

@fspjonny Você pode criar o mecanismo de tradução você mesmo.

Usando Sessions.

Por exemplo: você cria um arquivo contendo cada frase e/ou palavras do site traduzido para o idioma que desejar e armazena em uma variável.

Aí no seu site, você ao invés de usar as palavras e frases, você usa a variável da session.

Com o PHP você verifica qual o idioma foi selecionado.

Eu já desenvolvi algo assim e funciona muito bem.

Claro, somente se você não estiver usando o wordpress, que eles possuem um plugin para isso.

16 de julho de 2018

26 minutos atrás, DiF disse:

@fspjonny Você pode criar o mecanismo de tradução você mesmo.

Usando Sessions.

Por exemplo: você cria um arquivo contendo cada frase e/ou palavras do site traduzido para o idioma que desejar e armazena em uma variável.

Aí no seu site, você ao invés de usar as palavras e frases, você usa a variável da session.

Com o PHP você verifica qual o idioma foi selecionado.

Eu já desenvolvi algo assim e funciona muito bem.

Claro, somente se você não estiver usando o wordpress, que eles possuem um plugin para isso.

tem algum local com esse exemplo?

Já uso Session para pegar usuários logados, queria ver como isso funciona para tradução!

adicionado 5 minutos depois

será que é algo como isso?

$varArray = [

   'pt'     => [
       'titulo' => 'Produtos',
   ];

   'en'     => [
       'titulo' => 'Products',
   ];

   'es'     => [
       'titulo' => 'Productos',
   ];

   'ge'     => [
       'titulo' => 'Produkte',
   ];

]

include "traducao.php";
$idioma = $_SESSION['idioma']; # pt, en, es ou ge

<h2>
    <?php 
        echo $varArray[$idioma]['titulo'];
    ?>
</h2>

DiF · 16 de julho de 2018

@fspjonny

Basicamente você vai criar uma session com o nome "lang" E nesse session será um array de dados, onde cada variável será uma tradução do idioma.

Então você terá um arquivo php, que faz a verificação da sessão de qual idioma foi selecionado e inclui tudo sobre aquele idioma inclusive se tiver arquivos CSS diferentes.

Vou exemplificar com algumas imagens do meu próprio projeto. Não darei os códigos integralmente em alguns deles, mas serve como ponto de partida para você criar o seu próprio sistema!

No seu INDEX você chama o arquivo que contém a verificação primeiro e depois insere as variáveis com o textos no lugares certos veja esta imagem:

Perceba que eu destaquei em amarelo, na primeira linha abrimos a session e damos um require_once no arquivo de funções que eu criei.

Veja mais abaixo que no menu, ao invés de eu ter colocado o texto, coloquei um echo $lang["MENU_HOSTEL"] e assim sucessivamente nos demais.

Agora veja como eu criei o arquivo functions.php que é responsável por testar a sessão de idioma:

Repare que na primeira linha eu defini um header, é somente um FIX para o IE, nos novos navegadores podes omitir isso.

Criei duas funções para carregar arquivos CSS e javascript. Porque eu tinha CSS diferente para cada idioma.

A partir da linha 20 você vê o teste do idioma e session.

Repare que na linha 32, faço um switch case, onde se a pessoa escolher o português, será carregado os textos em português, se ele escolher o inglês, será carregado os textos em inglês e naturalmente o css da parte inglês. Como eu mencionei, neste projeto em específico eu tive que criar um fragmento de CSS para cada idiioma, pois mudavam algumas coisas, então pode ser que você não precise criar estes CSSs, bastando apenas o arquivo php de tradução.

Vou mostrar como fica os arquivos que contem os textos.

Para não ficar muito grande, vou mostrar só em português e em inglês.

Em português:

Agora o mesmo em inglês:

Perceba que as variáveis nos arquivos de tradução são os mesmos, o que muda é o texto!

Por fim, no lugar onde você clica para mudar o idioma o link que você usará é:

index.php?lang=br

index.php?lang=en

index.php?lang=deu

Enfim é por aí a coisa.

16 de julho de 2018

1 hora atrás, DiF disse:

@fspjonny

Basicamente você vai criar uma session com o nome "lang" E nesse session será um array de dados, onde cada variável será uma tradução do idioma.

Então você terá um arquivo php, que faz a verificação da sessão de qual idioma foi selecionado e inclui tudo sobre aquele idioma inclusive se tiver arquivos CSS diferentes.

Vou exemplificar com algumas imagens do meu próprio projeto. Não darei os códigos integralmente em alguns deles, mas serve como ponto de partida para você criar o seu próprio sistema!

No seu INDEX você chama o arquivo que contém a verificação primeiro e depois insere as variáveis com o textos no lugares certos veja esta imagem:

Perceba que eu destaquei em amarelo, na primeira linha abrimos a session e damos um require_once no arquivo de funções que eu criei.

Veja mais abaixo que no menu, ao invés de eu ter colocado o texto, coloquei um echo $lang["MENU_HOSTEL"] e assim sucessivamente nos demais.

Agora veja como eu criei o arquivo functions.php que é responsável por testar a sessão de idioma:

Repare que na primeira linha eu defini um header, é somente um FIX para o IE, nos novos navegadores podes omitir isso.

Criei duas funções para carregar arquivos CSS e javascript. Porque eu tinha CSS diferente para cada idioma.

A partir da linha 20 você vê o teste do idioma e session.

Repare que na linha 32, faço um switch case, onde se a pessoa escolher o português, será carregado os textos em português, se ele escolher o inglês, será carregado os textos em inglês e naturalmente o css da parte inglês. Como eu mencionei, neste projeto em específico eu tive que criar um fragmento de CSS para cada idiioma, pois mudavam algumas coisas, então pode ser que você não precise criar estes CSSs, bastando apenas o arquivo php de tradução.

Vou mostrar como fica os arquivos que contem os textos.

Para não ficar muito grande, vou mostrar só em português e em inglês.

Em português:

Agora o mesmo em inglês:

Perceba que as variáveis nos arquivos de tradução são os mesmos, o que muda é o texto!

Por fim, no lugar onde você clica para mudar o idioma o link que você usará é:

index.php?lang=br

index.php?lang=en

index.php?lang=deu

Enfim é por aí a coisa.

Show, amanhã eu vou ler isso com calma! Obrigado!

18 de julho de 2018

@DiF fiz um pequeno teste aqui com base no que me mostrou e funcionou muito bem!

Muito obrigado por enriquecer meu conhecimento com seu código, ví que já estava bem completo e de fácil entendimento(bom entendedor um pingo é letra!).

Mais uma vez Obrigado!

18 de julho de 2018

Quis postar aqui o resultado de duas telas antes de passar ao projeto final, mostrando o idioma alterado e o resultado do código do @DiF

Para o Inglês

Obrigado a todos que ajudaram!

20 de julho de 2018

Boa tarde! Desculpe reabrir o tópico, mas é que pintou outra dúvida do mesmo assunto.

Como poderia ser feito a tradução em relação aos campos vindos de uma tabela que precisam ser traduzidos?

A pessoa teria que cadastrar as informações 4x ? tipo: Pt-Br, En, Es, Ge ?

Porque tem campos que o nome vem da Tabela( Categorias Cadastradas) : LIVROS, REVISTAS, NOTICIÁRIOS, como pegar isso e traduzir?

Vejam esse trecho de código:

echo "
<span class='badge badge-pill badge-primary'>{ $info['ano_inicial'] }</span> - { $info['titulo'] } - { $info['situacao'] } <span class='badge badge-pill badge-info'>{ $info['ano_final'] }</span>
";

/* Preciso aplicar a tradução do campo para:

$info['titulo']
$info['situacao']

*/

O Pior ainda seria a tradução das informações pessoais digitadas como um currículum online, que varia as palavras e não tem como montar um dicionário.

Então não é viávél traduzir informação dinâmica ? ou é, mas seria um dicionário gigantesco?

DiF · 20 de julho de 2018

@fspjonny A sugestão que dei, serve mais para quando você tem dados estáticos. Onde você possui um arquivo contendo cada palavra ou frase dento de um array.

No caso do banco de dados, o que podes fazer é: Definir um idioma padrão, em que todos usem o mesmo, seja português ou inglês e aí caberia a pessoa mesmo entender o que está escrito....

Ou você implementar o tradutor de sites apenas para os dados no banco de dados. Eu acho tosco isso, porque o tradutor não é 100% confiável, se o usuário escrever com gírias não traduzirá ou pior ainda mudará o sentido pela tradução literal.

Eu acho muito inviável fazer cadastro das coisas traduzidas... seu banco de dados fica extenso demais.

Eu recomendaria que você defina um idioma aceito. Embora possui outros idiomas.

Por exemplo aqui no fórum não aceitamos postagens em outro idioma. Logo, o usuário estrangeiro é obrigado a usar o tradutor de sites se quiser ler algo aqui ou aprender o português.

20 de julho de 2018

1 hora atrás, DiF disse:

Citação

A sugestão que dei, serve mais para quando você tem dados estáticos.

Exatamente, foi uma ajuda e tanto, até porque eu nunca a tinha feito algo assim antes e não imaginava ser tão simples.

Citação

No caso do banco de dados, o que podes fazer é: Definir um idioma padrão, em que todos usem o mesmo, seja português ou inglês e aí caberia a pessoa mesmo entender o que está escrito....

É inviável!, os idiomas vão variar, e o cliente de certo modo já está convencido que dados dinâmicos, não possuem tradução imediata, ou vão ter que ter o retrabalho de cadastrar pesquisas, publicações e artigos em 4 idiomas(eles queriam evitar isso), falei do BD gigante com o passar de poucos anos, exemplifiquei com outros sites que mantém o idioma nativo e a tradução é só do estático.

Como é um laboratório de pesquisas, eles usam muito o Inglês e o Português, no entanto algumas comunidades científicas que participam dos projetos Brasileiros tem acesso ao material publicado(Espanha e Alemanha).

Sugeri gerar arquivos PDF com essas publicações e disponibilizar de acordo com o idioma para leitura ou download, para mim é fácil indexar esses arquivos e distribuir na aplicação de acordo com o idioma, já até tenho isso feito para o Inglês e o Português.

Mas valeu! Obrigado @DiF, pelos esclarecimentos!

fredkissfree · 24 de julho de 2018

@fspjonny e @DiF

Estou tentando fazer o mesmo procedimento mas o não abre o site, segue os prints:

Tenho esse index onde coloquei o primeiro comando do DiF do session_start, esta index abre o header (que é o primeiro que estou tentando traduzir) e o footer através do include.

Esse meu header, tentei substituir para testar o texto Sobre do meu navbar.

Na parte de baixo no IDIOMAS está meu drop menu que vou usar para substituir o idioma, nele usei o trecho do DiF também.

Segue meu functions

Segue meus langs.

Fiz somente o sobre primeiro para testar.

Por favor se puderem me ajudar.

DiF · 24 de julho de 2018

@fredkissfree Não sei está influenciando no problema, mas você tem ali dois Doctype e tags de html

onde um está no index e outro no header.php.

Provavelmente o header.php só deve conter tags html da parte do header, sem <html> sem <doctype>

Faça o experimento:

Crie um arquivo index simples e faça o mesmo procedimento como descrevi. Tem que funcionar!

fredkissfree · 24 de julho de 2018

@DiF Vou fazer isso, e o

<?php session_start(); require_once 'functions.php'; ?>

fica onde? em todos os .php? todos os meus links, index.php, contato.php, etc... tem include header.php e footer.php

DiF · 24 de julho de 2018

@fredkissfree Não, você só precisa incluir uma vez isso no seu index.php

Lembre que mesmo que seja um include header ou include footer, eles só devem ter a estrutura HTML da parte não pode colocar as tags iniciais:

Exemplo:

<!DOCTYPE html>
  <html>
<head>
<title>Title of the document</title>
</head>

<body>
  <?php include 'header.php' ?>
  
  <div>Conteúdo do site</div>
  
  <?php include 'footer.php' ?>
</body>

</html>

header.php:

<div class="header">
  
   aqui dentro vai o conteúdo do header, apenas isso.
  
</div>

footer.php

<div class="footer">
  
   aqui dentro vai o conteúdo do footer, apenas isso.
  
</div>

Você deve deixar o index como o controlador, então é nele que você vai chamar seus scripts javascripts, CSS, PHP... e etc

Como mencionei, faça um teste simples criando estruturas simples com seus includes, fazendo o lance de traduzir uma palavra, se funcionar, aplique no seu projeto.

O código que passei nesse tópico é 100% funcional

fredkissfree · 25 de julho de 2018

@DiF o erro foi que esqueci de um ; no endif;

Está abrindo o site, arrumei graças a tu o header e o footer, são coisas que nem passava na minha cabeça.

Ficou 2 problemas:

1- O

 <?php session_start(); require_once 'functions.php'; ?>

vou ter que colocar em cada .php meu? por exemplo contato.php, sobre.php...?

2- Ele não está aparecendo o texto que escrevi, quando está em português ele escreve "B" e quando está em Inglês escreve "E", por que será?

https://fredkissfree.000webhostapp.com/

Para tu ver o resultado.

adicionado 12 minutos depois

Percebi uma coisa:

// Este é o lang br

$lang['NAV_SOBRE']	= "Sobre";
$lang['NAV_ENSINO']	= "Ensino";

// Este é o lang en

$lang['NAV_SOBRE']	= "Sobre";
$lang['NAV_ENSINO']	= "Ensino";

No meu header coloquei:

<?php echo $lang['NAV_SOBRE'];?>
<?php echo $lang['NAV_ENSINO'];?>
<?php echo $lang['NAV_PROJETOS'];?>

Ou seja, o "projetos" não existe nem no lang br nem no en.

Quando carreguei o site, puxou tudo como B ou E.

Ou seja, acredito que ele não está conseguindo puxar do lang.br.php e do lang.en.php as palavras, então ele trás B se for br ou E se for en.

adicionado 29 minutos depois

Obs: não coloquei aquele loadCSS e nem o loadJS

fredkissfree · 25 de julho de 2018

Meu botão do header que muda os idiomas:

<li class="dropdown nav-item">
  <a href="index.php?lang=br" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false"><img src="library/img/flags/BR.png"></a>
  <div class="dropdown-menu dropdown-menu-right dropdown-danger">
    <a class="dropdown-item" href="index.php?lang=br"><img src="library/img/flags/BR.png"> Português(BR)</a>
    <a class="dropdown-item" href="index.php?lang=en"><img src="library/img/flags/US.png"> English(US)</a>
  </div>
</li>

DiF · 25 de julho de 2018

7 horas atrás, fredkissfree disse:
1- O
 <?php session_start(); require_once 'functions.php'; ?> 
vou ter que colocar em cada .php meu? por exemplo contato.php, sobre.php...?

Você coloca isso APENAS, no index e uma vez!

7 horas atrás, fredkissfree disse:

Ou seja, o "projetos" não existe nem no lang br nem no en.

Quando carreguei o site, puxou tudo como B ou E.

Ou seja, acredito que ele não está conseguindo puxar do lang.br.php e do lang.en.php as palavras, então ele trás B se for br ou E se for en.

Não entendi essa parte... você definiu que na tradução brasileira apareceria um B e se for em inglês aparece E... pelo que relata, está funcionando como deveria.. não?

Pelas imagens, os textos das traduções estão no mesmo idioma.

7 horas atrás, fredkissfree disse:

Obs: não coloquei aquele loadCSS e nem o loadJS

Isso não é necessário. Eu coloquei porque eu usava uma fração de CSS diferente para cada idioma.

fredkissfree · 25 de julho de 2018

@DiF O certo seria assim:

Mas está aparecendo:

Eu não escrevi esses "B" e quando eu passo para o inglês no lugar do "B" fica "E"

No servidor eu apaguei os arquivos lang.br e lang.en para ver o que dava, e continuou retornar o "B", ou seja, ele não está chegando no lang.br.

Meu functions.php ta assim:

Copiei igualzinho o seu e mesmo assim não funciona, já troquei o index, fiz um teste.php e mesmo assim continua esses "B", não sei de onde ele está puxando isto.

adicionado 2 minutos depois

Meu lang.br.php está assim:

Deixei propositalmente sem o NAV_PROJETOS para ver se estava puxando a variável.

DiF · 25 de julho de 2018

@fredkissfree Eu to achando que isso pode ser problema de cache. Ele deve estar com isso na memória..

Experimenta zerar com o CTRL + F5, aperte umas duas ou 3 vezes... na maioria das vezes resolve.

Já tentou fazer um experimento extremamente simples fora do seu projeto?

Crie um menu e tente fazer as tradução em localhost primeiro.

Um detalhe: colocando o $lang["NAV_PROJETOS"] lá no seu menu, e se não tiver valor no arquivo de array, pode apresentar problemas pois ele não vai encontrar valor algum.

25 de julho de 2018

@fredkissfree

Montei um pequeno teste aqui para voce ver na íntegra o funcionamento!

index.php = Onde ficará o inicio de sessão(session_start) e o menu do site e as demais informações estáticas do site.

<?php 
session_start();
require_once "funcao.php";
?>
<!DOCTYPE html>
<html lang="pt_BR">

<head>
<meta name="Author" content="Fábio Pedro"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tradução</title>	
</head>

<body>
	<label>Selecione o Idioma: </label>
		<a href="index.php?lang=pt">[Português-Brasil]</a> - <a href="index.php?lang=en">[Inglês]</a>
	
<hr>	
	<ul>	
		<li><?php echo $lang['ITEM1'];?></li>
		<li><?php echo $lang['ITEM2'];?></li>
		<li><?php echo $lang['ITEM3'];?></li>
		<li><?php echo $lang['ITEM4'];?></li>
		<li><?php echo $lang['ITEM5'];?></li>
		<li><?php echo $lang['ITEM6'];?></li>
	</ul>	
</body>
</html>

Um arquivo PHP contendo a função que vai "chavear" os idiomas, ou seja, alternar eles.

funcao.php

<?php 

if(isset($_GET['lang'])):
$lang = $_GET['lang'];

$_SESSION['lang'] = $lang;
setcookie('lang', $lang, time() + (3600 * 24 * 30));

elseif(isset($_SESSION['lang'])): $lang = $_SESSION['lang'];
elseif(isset($_COOKIE['lang'])): $lang = $_COOKIE['lang'];
else: $lang = "pt";
endif;


switch ($lang) {

default:
		
	include "lang_Pt_Br.php";
break;

case "pt":
	include "lang_Pt_Br.php";
break;

case "en":
	include "lang_Eng.php";
break;
		
}

?>

e agora segue abaixo propriamente o arquivo PHP que conterá os idiomas que queira traduzir no site.

PT-BR lang_ptbr.php

<?php

$lang = array();


/* LISTA NÃO ORDENADA  */

$lang ['ITEM1'] = "Início";
$lang ['ITEM2'] = "Relatórios";
$lang ['ITEM3'] = "Consultas";
$lang ['ITEM4'] = "Cadastros";
$lang ['ITEM5'] = "Contatos";
$lang ['ITEM6'] = "Acesso Privado";
?>

ENG lang_eng.php

<?php

$lang = array();

/* LISTA  NÃO ORDENADA */

$lang ['ITEM1'] = "Begin";
$lang ['ITEM2'] = "Reports";
$lang ['ITEM3'] = "Inquiries";
$lang ['ITEM4'] = "Register";
$lang ['ITEM5'] = "Contact Us";
$lang ['ITEM6'] = "Private Access";
?>

Coloque para fins de teste esse 4 arquivos na mesma pasta e execute o index.php.

adicionado 7 minutos depois

Verá algo como isso aqui

Traduzindo

DiF · 26 de julho de 2018

@fspjonny Só um adento, não que esteja errado atualmente, mas a sintaxe do switch case, o default sempre põe no final!

Pelo menos é assim que se encontra no manual do php e quando usa os recursos da IDE para inserir a estrutura.

Fora isso, o exemplo é perfeito.

Espero que assim seja mais fácil de entender!

26 de julho de 2018

25 minutos atrás, DiF disse:

@fspjonny Só um adento, não que esteja errado atualmente, mas a sintaxe do switch case, o default sempre põe no final!

Pelo menos é assim que se encontra no manual do php e quando usa os recursos da IDE para inserir a estrutura.

Fora isso, o exemplo é perfeito.

Espero que assim seja mais fácil de entender!

sim, via de regra o switch case executa linha por linha, ou seja, declaração por declaração, na primeira lida das declarações nada é executado até que se ache um case correspondente, como o default é uma ação a ser executada caso entre os cases nenhum deles ocorra, o default prevalece.

Mas na prática você pode economizar ciclos de processamento, pois se você sabe que no inicio nenhum case ocorrer mesmo, porque então eu preciso fazer o looping novamente, para só lá no final executar o default?

É um vício antigo que eu tenho adquirido de outros programadores com quem trabalhei e que tinham esse vício otimizar código para economizar ciclos e tornar as execuções mais rápidas, por exempplo em linguagem C e Cobol era necessário ter uma leitura mais rápida do código.

Mas sua observação está corretíssima! Eu é que tenho vícios de cão velho....

fredkissfree · 26 de julho de 2018

@fspjonny e @DiF Deu certo!

Muito obrigado, o problema estava no meu Switch.

Não sei o porque o do DiF não funcionou no meu código:

switch ($lang) :
case 'br':
	$lang_file = 'lang.br.php';
	break;

case 'en':
	$lang_file = 'lang.en.php';
	break;

default:
	$lang_file = 'lang.br.php';
	break;
	
	endswitch;
	
	include_once 'lang/'.$lang_file;

O do @fspjonny foi :

switch ($lang) {

default:
		
	include "lang.br.php";
break;

case "br":
	include "lang.br.php";
break;

case "en":
	include "lang.en.php";
break;
		
}

Vi que o Switch do DiF não usa {} e usa um endswitch; não sei a diferença mas...

Obrigado

26 de julho de 2018

15 minutos atrás, fredkissfree disse:
@fspjonny e @DiF Deu certo!

Muito obrigado, o problema estava no meu Switch.

Não sei o porque o do DiF não funcionou no meu código:
switch ($lang) :
case 'br':
	$lang_file = 'lang.br.php';
	break;

case 'en':
	$lang_file = 'lang.en.php';
	break;

default:
	$lang_file = 'lang.br.php';
	break;
	
	endswitch;
	
	include_once 'lang/'.$lang_file;
O do @fspjonny foi :
switch ($lang) {

default:
		
	include "lang.br.php";
break;

case "br":
	include "lang.br.php";
break;

case "en":
	include "lang.en.php";
break;
		
}
Vi que o Switch do DiF não usa {} e usa um endswitch; não sei a diferença mas...

Obrigado

Eu não testei, mas o PHP deixa usar sintaxe alternativa para algumas estruturas de controle como: if, for, foreach, while ,switch.

A sintaxe alternativa consiste em trocar as chaves de abertura e fechamento { }, pelo sinal de dois pontos : para abrir e usar para fechamento os respectivos: endif, endfor, endforeach, endwhile, endswitch.

No entanto essa estrutura de abertura e fechamento ela é mais "rígida" em relação a espaços em branco(não tolera), é recomendado fazer a quebra de linha sem inserir espaços em branco entre um switch e o primeiro case, pois isso poderá resultar em erro de sintaxe.

Não testei o switch do Dif, mas na hora em que você escreveu o seu, isso pode ter ocorrido(espaço em branco) e talvez por isso o seu não funcionou!

No meu switch usando as chaves normais { } de abertura e fechamento, os espaço em brancos dentro dessa estrutura não são levados em conta.