IGasparetto

O que é Acessibilidade na Web

igasparetto — Sun, 01 Feb 2009 22:58:45 +0000

Acessibilidade quer dizer dar oportunidades iguais a todos, permitir o acesso a todos. Uma página web acessível é a página que pode ser lida por todos, como nossos irmãos cegos ou com a visão debilitada ou pessoas que não podem usar o mouse porque não têm mãos.

Muita gente pensa que uma página acessível é uma página cujo HTML passa nos testes automáticos da W3C ou no excelente teste da Total Validator. Bom, até pouco tempo atrás se pensava que era isso mesmo, mas desde 11 de Dezembro de 2008 (data de publicação da WCAG 2.0) as coisas mudaram.

Na WCAG1.0, lemos o seguinte:

1.0 Provide equivalent alternatives to auditory and visual content. Que traduzindo quer dizer: fornecer alternativos equivalentes para conteúdo audio e visual.

Muita gente começou a inserir qualquer coisa como texto alternativo para imagens, criando verdadeiras aberrações em termos de conteúdo. Imagens decorativas ganharam nomes: “ângulo direito”, “borda inferior”, “logotipo da empresa”, “imagem de uma moça”. Para a maior parte das pessoas isso não tem importância nenhuma, aliás, provavelmente nunca leremos esses textos. Mas a história muda para quem usa leitores de página automáticos como o Jaws ou o Firevox. Se a imagem não tem significado para nós que temos boa visão, porque ela deve ter para quem é cego?

A primeira diretiva da WICAG 2.0 é que o conteúdo deve ser perceivable ou compreensível e “borda inferior” claramente não adiciona nada ao conteúdo da página, ao contrário, dificulta o entendimento.

Então, não se preocupe se o (X)HTML da sua página web não passar 100% num dos testes automáticos. Escute a página usando um dos leitores automáticos mencionados acima e veja se o resultado faz sentido!

CSS para todos os browsers!

igasparetto — Wed, 08 Aug 2007 22:19:31 +0000

A garotada nova no mundo da programação e da web design entra em crise quando abre o seu site (lindo em Internet Explorer 6 – IE6) em Safari, Opera ou até mesmo em IE7. O que acontece é que cada Browser interpreta o código HTML de uma maneira própria.

Como fazer a nossa página parecer igual em todos os browsers?

Existem duas técnicas:

Usar uma linguagem lado server para detectar o User Agente (o browser) do navegante web e importar a “folha de estilo” correta para o browser em questão.
Usar os comentários condicionais para importar CSS complementares. E é aqui que eu quero me concentrar neste artigo.

O ideal é criar uma página que funcione bem em Firefox porque Firefox segue as regras da WC3. O que não funcionar em outros browsers será, em 99% dos casos, defeitos dos outros!

Digamos que eu tenha que fazer uma correção para qualquer IE. No da nossa página devemos importar o CSS para Firefox e logo em seguida colocar o comentário condicional para importar o nosso band-aid para IE.

…

….

O que acontece é uma sobrescritura do primeiro CSS pelo segundo.

Por exemplo:

Em firefox.css
- .minhaClasse{margin:10px 0 3px 8px;}
Em qualquer_IE.css
- .minhaClasse{margin-top:12px;}

Dessa forma, substituímos os 10px da primeira declaração por um 12px presente na segunda.

Podemos usar ainda paginas especificas para cada IE.

Para Opera e Safari devemos usar outro tipo de curativo. Os band-aids não são suficientes para curar os problemas gráficos destes browsers.

Safari não considera um estilo se na próxima linha tem um ponto flutuante (#). Assim, todos os browsers vão ler a segunda declaração exceto Safari.

#meuID{

/* Para Safari */

padding-top:10px;

}
#meuID{
    /* Safari não lê a próxima linha porque tem um ”sinal de ponto flutuante #” */
    padding-top:12px;
    #
}

Opera 7 ou superior:

Digitamos a seguinte declaração e colocamos o nosso CSS dentro dela. Somente Opera entende o que esta dentro do “@media all”.

body { background: green; }

@media all and (min-width: 550px){
body { background: red; }
}

Para mais informações leia o artigo Making CSS visible for Opera 7 only

Bom trabalho!

O algoritmo do Sudoku

igasparetto — Tue, 07 Aug 2007 15:10:01 +0000

O jogo consiste em uma grade, que normalmente é composta por 81 elementos dispostos em um quadrado 9×9.

Esta grade, por sua vez é dividida em 9 sub-grades 3×3. Cada uma destas pequenas grades possui números de 1 a 9 que não se repetem.

O jogo fica interessante enquanto os números não se repetem nem nas colunas nem nas linhas. E é aqui que o algoritmo para gerar a grade se complica.

A “receita” do programa:

Criar um array com as coordenadas dos números seguindo um dos dois exemplos a seguir ou inventar o teu próprio array:
- Array[sub-grade linha coluna]
- Array[sub-grade][linha coluna];
Povoar os elementos com o número 123456789.
Entrar em um loop recursivo:
1. Verificar se existe pelo menos um número, em toda a grade, composto de mais de um número (78 por exemplo). Se a resposta é sim, continuo, caso contrario saio do loop.
2. Escolher um número presente no menor número em comprimento presente no array.
  - Exemplo: na célula Array[5][32] (quinta sub-grade, terceira linha, segunda coluna) temos o numero “2589″ e este número possui 4 caracteres. Todos os outros sao maiores ou possuem o mesmo número de caracteres. Então escolhemos aleatoriamente um deles: “8″ e o colocamos em substituição do “2589″ presente na célula;
3. Substituir o número escolhido (8) em todos os outros elementos presentes na quinta sub-grade.
  - Para cada elemento do Array[5] diferente de [32] substituir o numero 8 com “” (nada).
4. Substituir o número escolhido (8) em todos os outros elementos presentes na linha.
5. Substituir o número escolhido (8) em todos os outros elementos presentes na coluna.
6. Recomeçar o loop.
Uma vez criado o Array, basta traduzi-lo em HTML.

Vamos brincar!

igasparetto — Mon, 06 Aug 2007 23:42:45 +0000

Programar é brincar de Deus. Espero que esta brincadeira seja tão legal pra você quanto é pra mim.

Bom divertimento,

Ivan Gasparetto Filho