MEU SITE PESSOAL
http://www.artemanhaweb.com.br
sexta-feira, 7 de junho de 2013
segunda-feira, 13 de maio de 2013
Internacionalização
Público alvo: qualquer pessoa que seja nova na internacionalização e necessite orientação em tópicos a considerar e formas de obter o material no site.
As ‘Dicas rápidas’ seguintes resumem os conceitos chave do desenho Web internacional. Estas dicas não são guias completos, são apenas uma mão cheia de conceitos descritos no subsítioActividade de internacionalização W3C’s.
Esta página lista as dicas em frases bastante sintetizadas que também aparecem nos cartões de referência tipo cartões de visita, seguidas por texto que fornece mais detalhes e explicações. De seguida ligamos a informação no subsitio Internacionalização W3C, quando disponível, onde poderá ler mais.
Esta página será actualizada com alguma frequência.
Dicas rápidas
- Codificação. Utilize Unicode sempre que possível para conteúdo, bases de dados, etc. Declare sempre a codificação do conteúdo.
- A codificação de caracteres que escolhe 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 correctamente 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 incorrectas que possam ser efectuadas pela aplicação ao interpretar o seu texto sobre quantos bytes mapear para os caracteres.
- Dá-me mais informação
- Codificações de caracteres para principiantes explica alguns dos conceitos básicos sobre codificações de caracteres, e porque se deverá preocupar. Introdução de conjuntos de caracteres e codificaçõesfornece uma introdução suave a vários aspectos do tópico.
- Então, como é que faço isto?
- Autores HTML & CSS • Criadores de Especificações• Configuração do servidor
- Saídas. Utilize 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.
- Dá-me mais informação
- Utilização de entidades de caracteres NCRsfornece informação adicional sobre a utilização de saídas em línguagens markup. Em particular, observe que entidades (como á) deverão ser usadas com cuidado.
- Então, como é que faço isto?
- Autores HTML & CSS • Criadores de Especificações • Autores SVG
- 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 correctamente, 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.
- Dá-me mais informação
- Idioma na Webfornece uma introdução suave a vários aspectos do tópico.
- Então, como é que faço isto?
- Autores HTML & CSS • Autores SVG • Autores XML • Criadores de Esquemas • Configuração de servidor
- 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.
- Dá-me mais informação
- Leia as apresentações faladas da apresentação da conferência @media 2007 “Desenho para utilizadores internacionais: Dicas práticas“.
- 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.
- Dá-me mais informação
- Leia as apresentações faladas da apresentação da conferência @media 2007 “Desenho para utilizadores internacionais: Dicas práticas“.
- 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.A forma mais simples de activar isto é usar o Unicode para ambas as páginas que contenham formulários e todo o processamento por trás e armazenamento. Nesse cenário o utilizador pode preencher os dados em que língua e escrita necessitar.Deverá também tentar evitar fazer suposições que coisas como o nome do utilizador e endereço seguirão as mesmas regras de formatação que o seu. Pergunte-se a si mesmo quanto detalhe necessita realmente de partir em campos separados para coisas como endereços. Tenha em mente que nalgumas culturas não há nomes de ruas, noutras o número da casa segue o nome da rua, algumas pessoas necessitam mais do que uma linha para a parte do endereço que precede o nome da vila ou cidade, etc. De facto, nalguns locais o endereço é de cima para baixo desde o mais geral para o mais específico, o que implica uma estratégia de layout muito diferente. Tenha cuidado quando efectuar rotinas de validação com suposições incorrectas sobre comprimentos de códigos de áreas ou de números de telefone. Reconheça que a etiquetagem cuidadosa é necessária para como introduzir datas numéricas, porque há convenções diferentes para a ordenação de dia, mês e ano.Se estiver a reunir informação de pessoas em mais do que um país, é importante desenvolver uma estratégia para endereçamento dos formatos diferentes que as pessoas esperam poder usar. Não é apenas importante para o desenho de formulários que cria, mas também tem um impacto em como irá armazenar tal informação em bases de dados.
- Então, como é que faço isto?
- Autores HTML & CSS • Autores HTML & CSS • Criadores de Especificações
- 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.
- Então, como é que faço isto?
- Autores HTML & CSS
- 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”.
- Então, como é que faço isto?
- Autores HTML & CSS
- Texto da direita para a esquerda. Para XHTML, adicione dir=”etl” à etiqueta html. Utilize-o apenas para mudar a direcçã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 direcção definida na etiqueta html define a direcçã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 direccional.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 bidireccional Unicode. Este algoritmo cuida de muito do texto bidireccional 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 correcto.
- Dá-me mais informação
- Criação de páginas (X)HTML em Árabe & Hebraico fornece uma introdução suave ao básico do tratamento de texto direita-para-a-esquerda em HTML. Os princípios são semelhantes para outras linguagens markup.
- O que necessita saber sobre o algoritmo bidi e markup alinhado fornece uma introdução suave ao básico do tratamento de texto direccional alinhado.
- New to Internationalization ?
- Read the article “Introducing Character sets and Encodings“. This article gives an overview of the topic area, and points to other W3C articles for those who want to explore the topic further.
- Então, como é que faço isto?
- Autores HTML & CSS • Autores SVG • Autores XML • Criadores de Esquemas
- Verifique o seu trabalho. Valide! Utilize técnicas, tutoriais e artigos emhttp://www.w3.org/International/
Outros materiais introdutórios
Publicámos recentemente uma página Guia rápido para o ajudar a encontrar informação do site. A página Guia rápido aponta para uma série de artigos que estão a ser elaborados e que fornecem aos recém-chegados uma introdução suave para tópicos de internacionalização chave e apontam para informação básica no site para o iniciar.
TABELAS ACESSÍVEIS
- Elementos básicos para construção de tabelas:
- table, tr, td
- Lendo uma tabela:
- Pessoas sem problema de visão
- Pessoas portadoras de deficiência visual
- Tabelas Acessíveis:
- caption
- summary
- th
- bbr
- thead, tbody, tfoot
- colgroup, col
- span
- id, header
- scope
- Exemplificar uma tabela não acessível:
- Descrever os problemas que uma pessoa portadora de deficiência visual terá para entender os dados da tabela
- Propor alterações no código da tabela para torna‐la acessível a portadores de deficiência visual
- table, tr, td
- Pessoas sem problema de visão
- Pessoas portadoras de deficiência visual
- caption
- summary
- th
- bbr
- thead, tbody, tfoot
- colgroup, col
- span
- id, header
- scope
- Descrever os problemas que uma pessoa portadora de deficiência visual terá para entender os dados da tabela
- Propor alterações no código da tabela para torna‐la acessível a portadores de deficiência visual
Elementos básicos para construção de tabelas
De um lado a outro da web, usava-se a abusava-se das tabelas HTML pra fazer o layout das páginas. Nós veremos como criar um layout sem tabelas, no Tutorial Avançado de CSS. O uso correto das tabelas é fazer exatamente o que você espera que uma tabela faça – estruturar dados tabulares, tais como descrição de dados estatísticos em geral, agendas, calendários, planilhas em geral e etc.
Existem várias tags usadas em tabelas, e entender completamente como elas funcionam é provavelmente a parte mais difícil do Tutorial Iniciante de HTML.
Adicione o código seguinte à tag “body” em seu documento HTML e então nós veremos o que cada tag está fazendo:
01 | <table> |
02 | <tr> |
03 | <td>Linha 1, Célula 1</td> |
04 | <td>Linha 1, Célula 2</td> |
05 | <td>Linha 1, Célula 3</td> |
06 | </tr> |
07 | <tr> |
08 | <td>Linha 2, Célula 1</td> |
09 | <td>Linha 2, Célula 2</td> |
10 | <td>Linha 2, Célula 3</td> |
11 | </tr> |
12 | <tr> |
13 | <td>Linha 3, Célula 1</td> |
14 | <td>Linha 3, Célula 2</td> |
15 | <td>Linha 3, Célula 3</td> |
16 | </tr> |
17 | <tr> |
18 | <td>Linha 4, Célula 1</td> |
19 | <td>Linha 4, Célula 2</td> |
20 | <td>Linha 4, Célula 3</td> |
21 | </tr> |
22 | </table> |
O elemento table define a tabela.
O elemento tr define uma linha da tabela.
O elemento td define uma célula. Elas precisam estar contidas em tags tr, como foi mostrado acima.
Se você imaginar uma tabela 3×4, que tem 12 células, devem existir quatro elementos tr pra definir as linhas e três elementos td em cada linha, totalizando 12 elementos td.
Lendo uma tabela
Pessoas sem problema de visão
Para ler uma tabela quando não se tem nenhum problema de visão é muito simples, basta entender que a tabela é a organização de informações na forma de linhas e colunas.
Pessoas portadoras de deficiência visual
A leitura de uma tabela para pessoas com deficiência visual é bastante complicada, uma vez que as tabelas quando visualmente são organizadas, o seu código fonte não é tão organizado assim, como hoje os leitores de tela como o JAWS leem o código da pagina e não as palavras que estão impressas na tela, caso uma tabela não esteja formatada corretamente para ser acessível será muito confuso da pessoa que está usando o leitor de tela entender as informações contidas na mesma.
Tabelas Acessíveis
A seguir veremos os elementos e atributos disponíveis para a formatação de tabelas
acessíveis: 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:
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.
acessíveis: 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:
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.
...segue o resto da tabela...
Ex:
TH para identificar os cabeçalhos, TR para linha e TD para dado de tabela.
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. O elemento TR marca a linha da tabela e o elemento TD marca o conteúdo da célula como dado.
Deve-se evitar o uso de colunas com células vazias, pois elas atrapalham a leitura dos dados pelos leitores de tela. As folhas de estilo devem ser utilizadas para fins de apresentação diferenciada da tabela ao invés de colunas e linhas de células vazias.
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. O elemento TR marca a linha da tabela e o elemento TD marca o conteúdo da célula como dado.
Deve-se evitar o uso de colunas com células vazias, pois elas atrapalham a leitura dos dados pelos leitores de tela. As folhas de estilo devem ser utilizadas para fins de apresentação diferenciada da tabela ao invés de colunas e linhas de células vazias.
Ex:
01 | <table sumary="Material escolar - Levantamento comparativo de preços."> |
02 | <caption>Material escolar </caption> |
03 | <tr>...segue o resto da tabela... |
04 | <table sumary="Material escolar - Levantamento comparativo de preços."> |
05 | <caption>Material escolar</caption> |
06 | <tr> |
07 | <th>Estojo caneta hidrocor / loja</th> |
08 | <th>6 unidades</th> |
09 | <th>12 unidades</th> |
10 | <th>24 unidades</th> |
11 | <th>36 unidades</th> |
12 | </tr> |
13 | <tr> |
14 | <th>Lisboa papelaria</th> |
15 | <td>R$ 6,20</td> |
16 | <td>R$ 9,99</td> |
17 | <td>R$ 11,90</td> |
18 | <td>R$ 16,90</td> |
19 | </tr> |
20 | <tr>...segue o resto da tabela... |
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.
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:
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.
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.
1 | <table sumary=&amp;amp;quot;Material escolar - Levantamento comparativo de preços.&amp;amp;quot;> |
2 | <caption>Material escolar</caption> |
3 | <tr> |
4 | <th abbr=”hidrocor”>Estojo caneta hidrocor / loja</th> |
5 | <th>...segue o resto da tabela... |
Ex:
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.
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.
Ex:
01 | <table sumary="...."> |
02 | <caption>.....</caption> |
03 | <thead> |
04 | <tr> ...informação contida no cabeçalho... </tr> |
05 | </thead> |
06 | <tfoot> |
07 | <tr>...informação contida no rodapé... </tr> |
08 | </tfoot> |
09 | <tbody> |
10 | <tr> ...primeira linha de dados do bloco um... </tr> |
11 | <tr> ...segunda linha de dados do bloco um...</tr> |
12 | </tbody> |
13 | <tbody> |
14 | <tr> ...primeira linha de dados do bloco dois... |
15 | <tr> ...segunda linha de dados do bloco dois...</tr> |
16 | <tr> ...terceira linha de dados do bloco dois...</tr> |
17 | </tbody> |
18 | </table> |
19 | <table sumary="..."> |
20 | <caption>…</caption> |
21 | <colgroup span="10"> |
22 | <colgroup span="5"> |
23 | <thead> |
24 | <tr><td> ... |
25 | </table> |
O número de colunas contidas no grupo pode se especificado de duas maneiras diferentes:
Utilizando o atributo “span”;
Utilizando o elemento COL;
Utilizando o atributo “span”;
Utilizando o elemento COL;
Ex: Um grupo de 60 colunas com as mesmas características:
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.
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.
Utilizando o atributo “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.
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.
Utilizando o atributo “span”
<colgroup span="60" id="cor">
</colgroup>
Utilizando o elemento COL
<colgroup>
<col id="cor"/>
<col id="cor"/>…segue até completar 60 elementos col…
</colgroup>
</colgroup>
Utilizando o elemento COL
<colgroup>
<col id="cor"/>
<col id="cor"/>…segue até completar 60 elementos col…
</colgroup>
Ex:
01 | <table summary=&quot;Oferta de cursos - tabela estruturada em: nome do curso, |
02 | professor, resumo da disciplina e carga horária&quot;> |
03 | <caption>Oferta de cursos - Primeiro semestre</caption> |
04 | <tr> |
05 | <th id="t1” abbr="Nome">Nome do Curso</th> |
06 | <th id="t2” >Professor</th> |
07 | <th id="t3” >Resumo</th> |
08 | <th id="t4” abbr="carga”>Carga horária</th> |
09 | </tr> |
10 | <tr> |
11 | <td header=”t1”>Gravura – conceitos básicos</td> |
12 | <td header=”t2”>Eunice Lobato</td> |
13 | <td header=”t3”>História da gravura, estilos, gráfica. Visita aos ateliês. |
14 | </td> |
15 | <td header=”t4”>40h</td> |
16 | </tr> |
17 | <tr> |
18 | <td header=”t1”>Gravura em metal</td> |
19 | <td header=”t2”>Ione Rocha</td> |
20 | <td header=”t3”>Trabalhos práticos de gravura em metal. </td> |
21 | <td header=”t4”>160h</td> |
22 | </tr> |
23 | <tr> |
24 | <td header=”t1”>Xilogravura</td> |
25 | <td header=”t2”>Heli Santos</td> |
26 | <td header=”t3”>Trabalhos práticos em xilogravura.</td> |
27 | <td header=”t4”>160h</td> |
28 | </tr> |
29 | </table> |
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.
O atributo “scope” especifica o grupo de células de dados para qual a célula de cabeçalho (<td></td>) está associada. Este atributo é usado no lugar do atributo “header”, preferencialmente em tabelas de dados simples. O atributo possui os seguintes valores:
· row: Fornece informação de cabeçalho referente a linha que a contém;
· col: Fornece informação de cabeçalho referente a coluna que a contém;
· rowgroup: Fornece informação de cabeçalho referente ao grupo de linhas que a contém;
· colgroup: Fornece informação de cabeçalho referente ao grupo de colunas que a contém.
O atributo “scope” especifica o grupo de células de dados para qual a célula de cabeçalho (<td></td>) está associada. Este atributo é usado no lugar do atributo “header”, preferencialmente em tabelas de dados simples. O atributo possui os seguintes valores:
· row: Fornece informação de cabeçalho referente a linha que a contém;
· col: Fornece informação de cabeçalho referente a coluna que a contém;
· rowgroup: Fornece informação de cabeçalho referente ao grupo de linhas que a contém;
· colgroup: Fornece informação de cabeçalho referente ao grupo de colunas que a contém.
O atributo “scope” também pode ser associado, quando necessário, ao elemento de célula de dados (<td></td>). Os leitores de tela entenderão a célula como o cabeçalho da linha.
Ex:
01 | <table summary="Oferta de cursos - tabela estruturada em: nome do curso, |
02 | professor, resumo da disciplina e carga horária"> |
03 | <caption>Oferta de cursos - Primeiro semestre</caption> |
04 | <tr> |
05 | <th scope="col" abbr="Nome">Nome do Curso</th> |
06 | <th scope="col" >Professor</th> |
07 | <th scope="col">Resumo</th> |
08 | <th scope="col" abbr="carga”>Carga horária</th> |
09 | </tr> |
10 | <tr> |
11 | <td scope="row">Gravura – conceitos básicos</td> |
12 | <td>Eunice Lobato</td> |
13 | <td>História da gravura, estilos, gráfica. Visita aos ateliês. </td> |
14 | <td>40h</td> |
15 | </tr> |
16 | <tr> |
17 | <td scope="row">Gravura em metal</td> |
18 | <td>Ione Rocha</td> |
19 | <td>Trabalhos práticos de gravura em metal. </td> |
20 | <td>160h</td> |
21 | </tr> |
22 | <tr> |
23 | <td scope="row">Xilogravura</td> |
24 | <td>Heli Santos</td> |
25 | <td>Trabalhos práticos em xilogravura.</td> |
26 | <td>160h</td> |
27 | </tr> |
28 | </table> |
Assinar:
Postagens (Atom)