Quiz

Que tipo de coisas você deve estar atento ao projetar ou desenvolver para sites multilíngues?

Topics
HTMLInternationalization
Edit on GitHub

Projetar e desenvolver para sites multilíngues faz parte da internacionalização (i18n).

Otimização de Busca (Seo)

  • Use o atributo lang na tag <html>.
  • Incluir a localidade na URL (por exemplo, en_US, zh_CN, etc).
  • Páginas web devem usar <link rel="alternate" hreflang="other_locale" href="url_for_other_locale"> para dizer aos motores de pesquisa que há outra página no href especificado com o mesmo conteúdo, mas para outro idioma/locale.

Entendendo a diferença entre localidade e idioma

As configurações regionais controlam como números, datas e horários são exibidos para sua região: que pode ser um país, ou uma porção de país, ou talvez nem mesmo respeite as fronteiras do país.

O idioma pode diferir entre países

Certos idiomas, especialmente os mais falados, têm diferentes "sabores" em diferentes países (regras de gramática, ortografia, caracteres). É importante diferenciar idiomas para o país de destino e não assumir/forçar a versão de um país de um idioma para todos os países que falam o idioma. Exemplos:

  • en: en-US (Inglês Americano), en-GB (Inglês Britânico)
  • zh: zh-CN (Chinês (Simplificado)), zh-TW (Chinês (Tradicional))

Prever localidade, mas sem restrições

Os servidores podem determinar a localidade/idioma dos visitantes por meio de uma combinação de cabeçalhos HTTP Accept-Language e endereços IP. Com esses, os visitantes podem selecionar automaticamente a melhor configuração regional para o visitante. No entanto, as previsões não são infalíveis (especialmente se os visitantes estiverem usando VPNs) e os visitantes ainda devem ser capazes de mudar seu país/idioma facilmente, sem complicações.

Considere as diferenças no comprimento do texto em diferentes idiomas

Algum conteúdo pode ser mais longo quando escrito em outro idioma. Esteja atento a problemas de layout ou de overflow no design. É melhor evitar projetar onde a quantidade de texto pode fazer ou quebrar um design. A contagem de caracteres entra em jogo com coisas como manchetes, rótulos e botões. Eles são menos importantes com texto livre, como texto do corpo ou comentários. Por exemplo, alguns idiomas, como alemão e francês, tendem a usar palavras e frases mais longas do que o inglês, o que pode causar problemas de layout se você não levar isso em conta.

Direção de leitura do idioma

Idiomas como inglês e francês são escritos da esquerda para a direita, de cima para baixo. No entanto, alguns idiomas, como hebraico e árabe, são escritos da direita para a esquerda. Isso pode afetar o layout do seu site e a colocação de elementos na página, então você deve ter cuidado ao projetar seu site de uma maneira que acomode diferentes direções de texto.

Não concatene strings traduzidas

Não faça nada como "A data de hoje é " + data. Isso pode causar problemas em idiomas com ordens de palavras diferentes. Use uma string de modelo com substituição de parâmetros para cada idioma em vez disso. Por exemplo, observe as duas frases a seguir em inglês e chinês, respectivamente: I will travel on {% date %} e {% date %} 我会出发. Observe que a posição da variável é diferente devido às regras gramaticais do idioma.

Formatação de datas e moedas

As datas do calendário são apresentadas de formas diferentes às vezes. Ex. "May 31, 2012" nos EUA. vs. "31 May 2012" em partes da Europa.

Não coloque texto em imagens

Colocar texto em imagens baseadas em raster (por exemplo, png, gif, jpg, etc.) não é uma abordagem escalável. Colocar texto em uma imagem ainda é uma maneira popular de exibir fontes não padronizadas com boa aparência em qualquer computador. No entanto, para dar suporte à tradução de texto de imagem em outros idiomas, é necessário criar uma imagem separada para cada idioma, o que não é um fluxo de trabalho escalonável para os designers.

Esteja ciente de como as cores são percebidas

As cores são percebidas de maneira diferente em diferentes idiomas e culturas. O design deve usar as cores de forma apropriada.

Referências

Edit on GitHub