Opera e Webkit passam no Acid3!

Notícia novinha!

Enquanto o ie8 e o Firefox3beta comemoram o score máximo no Acid2, o Opera (via) e o WebKit (engine do navegador Safari) (via) já passaram no Acid3, que testa o suporte a DOM e SVG, entre outras coisas. O Firefox3 beta4 tirou 68/100, e o Internet Explorer8, 17.

Tá esquentando!

Tutorial Intermediário de HTML: Tags Más

Essa página analisa algumas tags HTML dos mundos de contos de fada e tempos pré-históricos. Más, fedorentas, ou simples coisinhas feias que pertenceram a padrões HTML ultrapassados, tolices proprietárias aleatórias que só quase-funcionam numa sub-versão de algum navegador ou tags que simplesmente foram suplantadas por tags mais novas.

A abordagem do HTML Dog de ensinar HTML e CSS baseado nos padrões web sem fazer barulho nenhum sobre os próprios padrões é uma boa mas, ao fazer isso, usuários (principalmente iniciantes) podem encontrar abordagens diferentes e más-práticas em outros lugares e não saber o que há de errado com elas. Pensando nisso foi criado esse guia sobre o que Não usar.

HTML tentou se mover da apresentação para o significado, conduzindo uma filosofia de separar o conteúdo e significado (HTML) da apresentação (CSS). Essa abordagem geral torna as páginas muito mais enxutas, porque um único conjunto de instruções relativas à apresentação (em um arquivo CSS externo) pode ser aplicado a muitas páginas. Isso também faz com que a manutenção do site se torne muito mais fácil, já que mudanças globais podem ser feitas a partir de uma única origem.

Algumas das “tags más” são apenas tags relativas à apresentação (como small) que devem ser substituídas por alguma coisa com significado ou simplesmente CSS. Outras podem ser não apenas relativas à apresentação, mas desnecessariamente volumosas (como a tag font) ou horrivelmente prejudiciais à usabilidade (como o blink).

Tags

Essas são algumas das tags mais comuns por aí que têm alternativas melhores:

• b pode ser usado pra deixar um elemento em negrito. Usar strong (que quer dizer ênfase forte) em seu lugar adiciona significado. Para adicionar apenas negrito, sem significado especial, a regra CSS font-weight: bold faz o serviço.
• i pode ser usado para deixar um elemento em itálico. Usar em (significa ênfase) em seu lugar adiciona também significado. font-style: italic também pode ser usado pra ajustar apenas a apresentação.
• big pode ser usado pra criar um texto grande. Usar, ao invés disso, cabeçalhos (h1, h2, etc., quando o texto for um cabeçalho genuíno) adiciona significado, ou simplesmente usar a propriedade font-size no CSS te dá mais controle sobre a apresentação.
• small pode ser usado pra criar texto pequeno. CSS (font-size) mais uma vez te dá mais controle.
• hr pode ser usado pra mostrar uma linha na horizontal. De qualquer forma, é raro usar hr numa página feita com CSS; propriedades como border-top e border-bottom ou até mesmo simples imagens fazem o trabalho bem melhor.

Todas as tags mencionadas acima são compatíveis com os últimos padrões HTML, mas elas não aplicam nenhum significado ao conteúdo, coisa que todas as “tags boas” devem fazer. Elas poderiam ser mais úteis, mas elas não são muito prejudiciais, e facilmente poderiam ser confundidas com pequenas criancinhas inocentes e cheias de bondade perto dessas tags imundas abaixo:

• u pode ser usado pra sublinhar elementos. Só que a maioria das pessoas associa texto sublinhado com links (se tá sublinhado, é pra clicar). Por isso essa tag morreu muito tempo atrás - você realmente não quer sublinhar texto que não seja link.
• center pode ser usada pra centralizar um elemento dentro de outro. A propriedade CSS permite os valores não apenas de center, mas também left (esquerda), right (direita) e justify (justificado).
• menu pode ser usado pra criar um menu. Ela faz exatamente o que ul faz, mas como uma “lista não-ordenada” é mais geral, ul permanece de pé sobre o cadáver de menu.
• layer é similar ao elemento div posicionado com CSS. Ela só funciona em versões velhas do navegador Netscape, o que a torna meio inútil.
• blink faz o texto piscar e marquee faz o texto ficar atravessando a página. Apenas digam “NÃO!”, crianças. Elas tem um suporte muito limitado e com certeza foram criadas só pra fazer brincadeiras muito, muito doentes.
• font, que podia ser usada pra definir o nome da fonte, tamanho e cor de um elemento ganhou uma merecida reputação de ser o notoriamente perverso Lord dos Duendes diabólicos da Taglândia. Velhos sites (e até mesmo alguns novos) tem tags font espalhadas por todas as suas páginas como uma praga de cupim. Muita de sua proliferação começou com os softwares de autoria web colocando a tag font ao redor de cada elemento em que o autor aplicava cor ou tamanho. Enquanto a tag font precisa ser aplicada em cada ocorrência de um elemento (digamos, sempre que você usa uma tag p), com CSS você pode aplicar propriedades a todas as ocorrências de um elemento com apenas uma linha de código para todo o seu site. Usando esse método, a página fica bem mais leve que uma página equivalente infestada de tags font. Além disso, mudanças podem ser feitas mais facilmente porque tudo que você precisa fazer é mudar uma linha de CSS ao invés de cada instância da tag font. Isso também aumenta suas chances de manter um design consistente em todo o site. tags font e o uso inapropriado de tabelas são as causas mais comuns de páginas desnecessariamente inchadas.

Atributos

Você pode pensar que, agora que já conhece as tag más e só vai usar as boazinhas, seu HTML está limpo e seguro. Mas existem alguns atributos na estreita esperando pra estragar suas “tags boas”.

• name pode ser usada pra dar um nome a um elemento, o que é perfeitamente aceitável em elementos em formulários como o input, mas em qualquer outro lugar name foi substituído pelo atributo id.
• text e bgcolor podem ser usadas pra especificar a cor base do texto e a cor do background de uma página dentro da tag body de abertura. As propriedades CSS color e background-color podem fazer isso quando aplicadas ao seletor body.
• background pode ser usado dentro da tag body pra especificar uma imagem para o background de uma página. CSS cuida de imagens de background bem melhor com propriedades como background-image.
• link, alink e vlink podem ser usadas na tag body pra especificar a cor dos links (não-visitado, ativo e visitado). CSS, baby - :link, :active e :visited fazem todo o trabalho.
• align pode ser usada pra alinhar o conteúdo de um elemento (como em <div align="center">Stuff</div>), mas, como acontece com a tag center, a propriedade CSS text-align é a nova chefe.
• target pode ser usada pra abrir um link em vários estados, geralmente em uma nova janela (como

<a href="qualquerlugar.html" target="_blank">Ajude me</a>

). Parece legal, mas não está fazendo nenhum favor ao seu site. Usuários não querem que coisas (como novas janelas) apareçam como mágica e a ferramenta de navegação mais usada em um site é o botão “Voltar”, que não vai funcionar se você abrir o link em uma nova janela. target é inválido e inacessível.

Atributos relativos a apresentação como width e height para imagens e cellpading e cellspacing para células ainda tem que ser usados devido a frequência com que diferentes valores precisam ser aplicados a diferentes elementos. Eles não são a solução perfeita, mas se você tem uma página com um grande número de imagens ou tabelas, você pode não ter nenhuma outra escolha sensata.

Os mais desconcertantes atributos relativos a apresentação pertencem a tag textarea, onde os atributos cols (número de colunas) e rows (número de linhas) são não apenas válidos, mas obrigatórios segundo o último padrão HTML.

Tags boas, mau uso

Pra entrar na sua casa você até pode se ajoelhar e se espremer por aquela pequena portinhola de cachorro mas espere! Tem uma porta humana bem grande enfeitada com um aparelho chamado fechadura! Wow! Olhe - a porta, tipo, é do tamanho certo pra um humano passar.

A coleção de tags HTML (as boas) foi feita pra uma razão específica e acredite ou não (acredite), quando você as usa pelos motivos certos, você consegue resultados melhores.

Páginas web são muito mais acessíveis para pessoas com deficiências quando o HTML é semântico (as tags são usadas pelos motivos certos), por que, por exemplo, leitores de tela vão geralmente enfatizar uma lista quando encontram uma tag ul ou ol e um cabeçalho quando encontram um h1 ou h2.

A tag HTML mais usada inapropriadamente é a table. Tabelas são muitas vezes usadas pra fazer o layout, mas elas devem ser usadas apenas pra mostrar dados tabulares, como sempre foi sua intenção. O método de layout sem tabelas não é nenhum tipo de desafio Zen Budista para a iluminação de um verdadeito geek, existe um benefício prático real de não apenas reduzir drasticamente o peso da página, mas também facilitar a manutenção e o redesign. Um bom exemplo disso é o Zen Garden (versão brasileira - Zen Garden do Maujor). Mudando apenas o CSS, você muda o visual do site inteiro. Legal, não é?

Algumas vezes designers usam algumas das tags e atributos mencionados aqui (especialmente tabelas para layout) pra conseguir um design que suporta tanto navegadores antigos (em especial o Netscape 4) quanto os modernos. Tabelas vão efetivamente permitir um controle melhor sobre a apresentação em navegadores que não suportam o CSS, como o Netscape 4, mas existem pouquíssimos usuários desses navegadores e cada vez menos, enquanto o número de usuários onde um layout feito com tabelas é uma grande desvantagem - usuários de dispositivos móveis - cresce. As vantagens de um design livre de tabelas mencionadas acima de longe superam as desvantagens e o resultado são páginas que, embora percam o estilo pra uma minoria, permanecem com todas as suas funcionalidades em todos os navegadores.

Frames (Quadros)

Cachinhos Dourados achou que seria uma ótima idéia comer aquelas tigelas de mingau, mas três mamíferos grandes e carnívoros apareceram e a jogaram pela janela. Frames são tigelas de mingau que pertencem a ursos. Podem parecer legais, mas é bem perigoso andar em algum lugar perto deles.

A maioria dos sites não usa frames e no geral usuários da web estão acostumados com um único documento compondo uma página.

Mas se, por alguma razão, você quer:

• prevenir os usuários de adicionar uma página específica aos seus favoritos;
• prevení-los de recomendar uma página por email ou mensageiro instantâneo;
• adicionar um outro nível de complexidade pra usuários que usam leitores de tela, que vão ter que navegar entre frames ao invés de navegar por uma página
• confundir mecanismos de busca,

vá em frente, use frames.

No geral, frames não fazem nada além de adicionar complexidadade e subtrair usabilidade.

Se você seguir essas receitas de bolo, você não vai errar muito:

1. Se o nome da tag ou atributo pelo menos sussura alguma coisa sugerindo apresentação, não use. Isso é trabalho do CSS. E CSS faz o trabalho bem melhor.
2. Usa a tag pra fazer o que o nome indica. Tabelas são pra dados tabulares. Cabeçalhos pra cabeçalhos. Etcetera etcetera.
3. Quando você tiver algum conteúdo específico, use as tags apropriadas. Listas pra listas, cabeçalhos pra cabeçalho, yada yada yada.

E já que falamos muito de usabilidade e acessibilidade, alguns links pra você ficar mais por dentro do assunto:

• Vídeo sobre acessibilidade na Web.
• Acessbilidade não é altruísmo Artigo do Bruno Torres que explica porque você tem que fazer uma página acessível, caso o vídeo acima não tenha te convencido.
• Algumas noções de acessibilidade na web, publicado no site que é referência no assunto, Acesso Digital.
• DaSilva é um validador de acessibilidade. Vamos ver se você fez tudo direitinho…
• Afinal, o que é Usabilidade? é um texto do Frederick van Amstel. Vai lá, da uma olhada no site dele. Ele é uma das maiores autoridades em Usabilidade no Brasil.
• Usabilidade na Acessibilidade.

Páginas Relacionadas

• Próxima Página: Exercícios
• Página Anterior: Listas de Definição
• Recapitulada nos Padrões - Se livrando de hábitos maus e convertendo pra XHTML compatível com os padrões.

Referência

• Tags de Apresentação - As válidas, mas ainda más, tags.

BlogBlogs Tags: usabilidade, acessibilidade, standards, html, tutorial

Esse material é uma adaptação do HTML Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.