segunda-feira, 13 de maio de 2013

Internacionalização



Técnicas básicas para disponibilizar o conteúdo em um  formato internacional:


CodificaçãoUtilize Unicode sempre que possível para conteúdo, bases de dados, etc. Declare sempre a codificação do conteúdo.

Essa codificação de caracteres que escolhe e determina quantos bytes são mapeados para caracteres no seu texto.
Normalmente as codificações de caracteres limitam-no a uma escrita particular ou conjunto de idiomas. O Unicode permite-lhe lidar simplesmente com a maior parte das escritas e idiomas em utilização à volta do mundo. Desta forma, o Unicode simplifica o manuseamento de conteúdo em vários idiomas, seja dentro de uma única página ou ao longo de um ou mais sítios. O Unicode é particularmente útil quando usado em formulários, escritas e bases de dados, onde necessita frequentemente suportar vários idiomas. O Unicode também torna muito directo adicionar novos idiomas ao seu conteúdo.
A menos que declare corretamente qual a codificação de caracteres que está a usar, os seus utilizadores não conseguem ler o seu conteúdo. Isto deve-se a suposições incorretas que possam ser efetuadas pela aplicação ao interpretar o seu texto sobre quantos bytes mapear para os caracteres.

SaídasUtilize caracteres diferentes das saídas (p.ex.á á ou á) sempre que puder.

Saídas tais como Referências de Caracteres Numéricos (NCRs) e entidades são formas de representação de qualquer caractere Unicode em markup com utilização de caracteres ASCII. Por exemplo, pode representar o caractere "á" em X/HTML como á or á or á.
Tais saídas são úteis para representar claramente caracteres invisíveis ou ambíguos, e para prevenção de problemas com caracteres da sintaxe como o & comercial ou sinais de maior e menor. Também podem ser úteis em ocasiões para representar caracteres não suportados pela sua codificação de caracteres ou indisponível a partir do seu teclado. De outra forma deve sempre usar caracteres em vez de saídas.

Idioma: Declare o idioma dos documentos e indique as alterações internas do idioma.

A informação sobre o idioma (humano) do conteúdo é também importante para acessibilidade, estilo, pesquisa, edição, e outros motivos. Quanto mais e mais conteúdo for etiquetado e etiquetado corretamente, as aplicações que possam detectar informação do idioma irão tornar-se cada vez mais úteis e dominantes.
Quando declarar o idioma, deverá necessitar de expressar informação sobre uma gama específica de conteúdo de uma forma diferente a partir da metadata sobre o documento como um todo. É importante entender esta distinção.

Apresentação vs. conteúdo. Utilize folhas de estilo para apresentação de informação. Restringir marcação a semânticas.

É um princípio importante do desenho da Web manter a forma como o conteúdo é formado ou apresentado para o separar do próprio texto. Isto faz com que seja simples aplicar estilos alternativos para o mesmo texto, por exemplo, de forma a exibir o mesmo conteúdo tanto num navegador convencional como num dispositivo pequeno de mão.
Este princípio é particularmente útil para a localização, porque as escritas diferentes têm necessidades tipográficas diferentes. Por exemplo, devido à complexidade de caracteres Japoneses, pode ser preferível evidenciar em páginas X/HTML Japonesas de outras formas que não negrito ou itálico. É muito mais fácil aplicar tais mudanças se a apresentação for descrita com CSS, e a markup é muito mais limpa e mais gerível se o texto for correcta e inequivocamente etiquetado como "evidenciado" em vez de apenas "negrito".
Poderá poupar tempo e esforço considerável durante a localização para trabalhar com ficheiros CSS em vez de ter de mudar a markup, porque quaisquer alterações necessárias podem ser efectuadas num local único para todas as páginas, e o tradutor pode-se focar no conteúdo em vez de na apresentação.



Imagens, animações & exemplos: Verifique se é traduzível e se tem um desvio cultural inapropriado.

Se desejar que o seu conteúdo comunique realmente com pessoas, necessita falar o seu idioma, não apenas através do texto, mas também através de imagens locais, cores, objectos e preocupações. É fácil ignorar a natureza específica cultural do simbolismo, comportamento, conceitos, linguagem corporal, humor, etc. Deverá obter retorno na adequabilidade e relevância das suas imagens, clips de vídeo, e exemplos de utilizadores de dentro do país.
Deverá também ter cuidado quando incorporar texto em gráficos quando o conteúdo for traduzido. Texto em fundos complexos ou espaços restritos podem provocar problemas consideráveis para o tradutor. Deverá fornecer gráficos para o grupo de localização que tem o texto numa camada separada e deverá ter em mente que o texto em idiomas como o Inglês e o Chinês irá certamente expandir-se na tradução.

Formulários. Utilize uma codificação apropriada em ambos os formulários e servidores. Suporta formatos locais de nomes/endereços, horas/datas, etc.

A codificação usada para uma página HTML que contém um formulário deverá suportar todos os caracteres necessários para introduzir dados nesse formulário. Isto é particularmente importante se o mais provável consistir no facto de os utilizadores introduzirem a informação em vários idiomas.
As bases de dados e escritas que recebem dados de formulários em páginas em vários idiomas devem também conseguir suportar os caracteres para todos aqueles idiomas em simultâneo.

Autorização de textos: Utilize texto simples e conciso. Tenha cuidado quando escrever as frases de vários conjuntos de palavras.

Texto simples e conciso é mais fácil de traduzir. É também mais fácil para ler caso o texto não esteja no seu idioma principal.
Deverá ter um cuidado considerável ao compor mensagens de várias sub-conjuntos de palavras, ou quando inserir textos variáveis em conjuntos de palavras. Por exemplo, suponha que o seu site utiliza escrita JSP e que decide compor certas mensagens seguidas. Poderá criar mensagens juntando sub-conjuntos de palavras separados, como por exemplo "Apenas" ou "Não", "devolva resultados em ", e "qualquer formato" ou "HTML". Porque a ordem do texto nas frases de outros idiomas pode ser muito diferente, a sua tradução poderá apresentar grandes dificuldades.
De forma semelhante, é importante evitar fixar as posições de variáveis no texto como "Página 1 de 10". A sintaxe de outros idiomas poderá necessitar que os números sejam revertidos para fazer sentido. Se usar PHP, isto irá significar a utilização de um conjunto de palavras de formatação como "Página %1\$d de %2\$d.", em vez do mais simples "Página %d de %d.". Este último não é traduzível nalguns idiomas.

Navegação. Inclua em cada página uma navegação claramente visível para páginas ou sites localizados, com o idioma de destino.

Onde tiver versões de uma página ou site num idioma diferente, ou para um país ou região diferente, deverá fornecer uma forma para o utilizador ver a versão que prefere. Isto deverá estar disponível a partir de qualquer página no seu site onde exista uma alternativa.
Quando fornecer ligações a páginas noutros idiomas, use o nome do idioma de destino no idioma e escrita nativos. Não assuma que o utilizador possa ler Inglês. Por exemplo, numa ligação a uma página Francesa, "Francês" seria escrito "français". Isto também se aplica se estiver a orientar o utilizador a uma página específica do país ou região ou site, ex. "Alemanha" deverá ser "Deutschland".

Texto da direita para a esquerda. Para XHTML, adicione dir="etl" à etiqueta html. Utilize-o apenas para mudar a direção base.

Texto em idiomas como o Árabe, Hebraico, Persa e Urdu é lido da direita para a esquerda. Esta ordem de leitura leva tipicamente ao texto alinhado à direita e a imagens de espelho de coisas como configuração de páginas e tabelas. Pode definir o alinhamento padrão e ordenação do conteúdo da página da direita para a esquerda incluindo simplesmente dir='rtl" numa etiqueta html.
A direção definida na etiqueta html define a direção base para o documento que alinha a descer através de todos os elementos da página. Não é necessário repetir o atributo nos elementos de nível inferiores a não ser que deseje mudar explicitamente o fluxo direcional.
Texto embebido em, por exemplo, escrita em Latim ainda corre da esquerda para a direita dentro do fluxo geral da direita para a esquerda. Tam como os números. Se estiver a trabalhar com idiomas da direita para a esquerda, deverá familiarizar-se com o básico do algoritmo bidirecional Unicode. Este algoritmo cuida de muito do texto bidirecional sem a necessidade de intervenção do autor. Existem algumas circunstâncias, porém, onde os caracteres de controlo Unicode ou markup são necessários para assegurar o efeito correto.





segunda-feira, 6 de maio de 2013

Tabelas  Acessíveis

Elementos básicos para construção de tabelas:



Table

Apesar de criado com a finalidade de apresentar dados tabulares, o elemento TABLE é muito utilizado para a diagramação dos elementos visuais das páginas. Com o advento do CSS (folhas de estilo em cascata - linguagem voltada para a formatação visual dos elementos HTML) o uso de tabelas para solucionar o desenho de páginas deveria ter sido descartado. No entanto, tabelas continuam sendo usadas com esse objetivo.


Tr,Td


O elemento TR marca a linha da tabela e o elemento TD marca o conteúdo da célula como dado.


Lendo uma tabela: Pessoas sem problema de visão  e Pessoas portadoras de deficiência visual



Para pessoas sem problemas de visão, as informações contidas na tabela são compreendidas apenas avaliando o conteúdo da tabela, dados específicos são encontrados cruzando visualmente colunas e linhas.
No entanto para pessoas portadoras de deficiência visual, a compreensão e obtenção de dados de uma tabela não é uma tarefa fácil se essa tabela for construída de forma não acessível. Pessoas portadoras de deficiência visual utilizam-se geralmente de leitores de tela. Os leitores de tela não lêem a ‘tela’ e sim decodificam a sua estrutura HTML.
Dessa forma, o uso de elementos HTML que estruturem de forma clara a tabela auxiliam a sua leitura por pessoas que se utilizam leitores de tela.

Tabelas Acessíveis

A. CAPTION para o título da tabela

O elemento CAPTION é o título da tabela. O uso de outros elementos como H1, P, TD ou TH pode ter “visualmente” o sentido de título, mas não são semanticamente corretos, e tampouco, acessíveis.
No código HTML o elemento CAPTION deve ser colocado após a marcação TABLE e antes
de qualquer outra marcação que seguir.
Por padrão, o elemento CAPTION é mostrado centralizado logo acima da tabela. Para
modificações no visual deve ser usado o CSS.

EX:  <table sumary="" >
<caption>Material escolar</caption>
<tr>...segue o resto da tabela...

B. Atributo summary para a finalidade da tabela

Atributo summary para a finalidade da tabela. O atributo “summary” deve vir dentro do elemento TABLE servindo como informação auxiliar para entendimento da tabela para leitores de tela e displays Braille, não sendo visível em navegadores de interface gráfica.
O atributo “summary” descreve a finalidade da tabela e dá uma indicação da estrutura
geral, sendo necessário para compreensão de tabelas complexas.

EX: <table sumary="Material escolar - Levantamento comparativo de preços.">
<caption> Material escolar </caption>
<tr>...segue o resto da tabela...

C.TH para identificar os cabeçalhos


Para tabelas simples, o uso apropriado do elemento TH é essencial para tornar a tabela

acessível. Utilize o elemento TH para a identificação de cabeçalhos em linhas e colunas
pelos leitores de tela.

D. Abbr


O atributo 'abbr' permite a abreviação de um cabeçalho longo de modo que ele não seja lido por inteiro toda vez que o leitor de tela o encontrar, lendo apenas a abreviação nas
demais vezes.

Ex: <table sumary="Material escolar - Levantamento comparativo de preços.">
<caption>Material escolar</caption>
<tr>
<th abbr=”hidrocor”>Estojo caneta hidrocor / loja</th>
<th>...segue o resto da tabela...

E. THEAD, TBODY e TFOOT grupos de linhas para tabelas extensas


Os elementos THEAD, TBODY E TFOOT são necessários em tabelas extensas,
que ocupam mais de uma página.
O elemento THEAD agrupa uma ou mais linhas de cabeçalho da tabela. O elemento TFOOT
agrupa linhas com informações de rodapé. No código HTML o elemento TFOOT deve
aparecer antes do elemento TBODY.
O elemento TBODY define o corpo da tabela que contém as células de dados. Uma tabela
pode conter mais de um elemento TBODY separando os diferentes grupos de dados.
O uso desses elementos permite que:
As linhas contidas nos elementos THEAD e TFOOT sejam fixas no navegador,
permitindo que as células de dados contidas no TBODY ‘rolem’ entre as duas;
Que quando impressas, as tabelas mostrem o cabeçalho e o rodapé em todas
as páginas.
Os elementos THEAD, TFOOT e TBODY de uma tabela devem ter o mesmo número de
colunas.

F. Agrupando colunas – elementos COLGROUP e COL


O elemento COLGROUP cria um grupo/estrutura de colunas, permitindo sua diferenciação.
A tabela do próximo exemplo contém dois grupos de colunas. O primeiro grupo de colunas
contém 10 colunas e o segundo contém 5 colunas.


G. SPAN


O atributo “span” costuma ser mais vantajoso em grupos de colunas com as mesmas
características. O elemento COL é um elemento vazio, sem função estrutural e serve
como suporte para os atributos. O elemento COL pode estar no interior ou no exterior de
um grupo explícito de colunas - COLGROUP.
O atributo “span” também pode ser utilizado no elemento COL, sempre que seja
necessário isolar uma coluna no interior de um grupo.


H.Atributos id e headers - Uma forma de associar cabeçalhos e células de dados


O atributo “headers” é utilizado nas células de tabelas (<td></td>) em conjunto com o
atributo id na célula de cabeçalho (<th></th>) para associar as células de dados aos seus
respectivos cabeçalhos.
O atributo headers é requerido sempre que os cabeçalhos estiverem situados em posições

irregulares, em relação aos dados aos quais eles se referem.


I. Atributo scope -Uma outra forma de associar cabeçalhos e células de dados


De forma semelhante aos atributos “id” e “header”, o uso do atributo scope é uma outra
forma de se agrupar cabeçalhos de colunas com suas respectivas informações e assim

melhorar a acessibilidade das tabelas de dados.