Tutorial Avançado de HTML: Recapitulada nos Padrões

31 05 2008

Símbolo da"Acessibilidade na Web"

Essa página é para quem conhece HTML, mas está meio inseguro em relação aos padrões envolvidos no XHTML e à filosofia de separar conteúdo e apresentação.

Separando conteúdo e apresentação

HTML não foi criado pra ser usado para apresentação, mas alguns navegadores incorporaram elementos que formatavam texto e os desenvolvedores deram um jeito de manipular o layout, e o HTRML começou a ser usado pro fim errado. Com o poder do CSS não é mais necessário cuidar da apresentação usando HTML, e o conteúdo (HTML) agora pode ser completamente separado da apresentação (CSS).

Essa abordagem traz inúmeros benefícios – os arquivos ficam menores, você tem mais flexibilidade com uma folha de estilos central sendo aplicada em todo o website e as páginas são muito mais acessíveis.

Seguir essa filosofia significa apenas que você não deve alterar a apresentação de nada com HTML. Tags como font e atributos como bgcolor não devem ser usados. Nem mesmo o artibuto border dentro da tag img é válido no XHTML 1.1. Isso não é um problema – não existe nenhuma formatação que pode ser feita com HTML e não pode ser feita, e muito melhor, com CSS.

Não basta tirar a apresentação do HTML, o termo conteúdo significa que tags HTML específicas devem ser usadas quando apropriado. Por exemplo, h1, h2, etc. devem ser usados para cabeçalhos – vocâ não pode só usar CSS pra deixar suas fontes maiores.

Um bom guia é ver se um navegador visual, com seu estilo padrão, apresenta o documento corretamente sem uma folha de esstilos.

Tabelas não devem ser usadas para o layout – tabelas foram criadas para mostrar dados tabulares. Essa é provavelmente a técnica mais difícil para HTMLzeiros se acostumarem porque muda completamente o modo como o HTML era tradicionalmente estruturado tempos atrás. Essa abordagem reduz drasticamente o tamanho da página e, devido ao código resultante bem estruturado, a torna muito mais acessível.

Leia a página sobre layout no Tutorial Avançado de CSS pra saber mais sobre isso – e aprender a fazer suas páginas sem usar tabelas.

Tags

No XHTML todas as tags devem estar em mínusculo e precisam ser fechadas. As tags que não tem tags de fechamento (como br e img) precisam se fechar com uma ‘/’ no final (como <br />). É recomendável colocar um espaço antes da barra.

A marcação precisa ser “bem-formada” (well formed), com os elementos aninhados da forma correta (por exemplo, <strong><em>assim</em></strong>, não <strong><em>assim</strong></em>).

Todos os documentos precisam ter os elementos html, head, title e body. Eles também devem começar com uma declaração do tipo do documento.

O corpo do elemento deve começar com p, h1, h2, h3, h4, h5, h6, div, pre, address, ins ou del.

Atributos

Todos os atributos devem estar escritos em mínusculo e seus valores dentro de aspas duplas.

Atributos minimizados não são permitidos (como <input type=”checkbox” checked />). O valor dos atributos que geralmente eram minimizados deve ser igual ao seu nome (como <input type=”checkbox” checked=”checked” />).

O atributo name não é mais válido (exceto em elementos de formulário) e deve ser substituído por id.

O atributo target não é um atributo válido. Ainda bem. Ele era mesmo meio idiota.

O atributo alt na tag img é obrigatório.

Acessibilidade

As razões para construir páginas web acessíveis a usuários com deficiências são bem evidentes. Não é apenas questão de moral, mas beneficia nosso futuro, já que os usuários da web vão envelhecendo e a precisão dos sentidos degenera, e é uma vantagem comercial, já que usuários com deficiências são consumidores. Acessibilidade não é apenas permitir que pessoas com deficiências acessem sua página, é garantir que qualquer pessoa possa acessar sua página e facilitar o acesso de pessoas com leves deficiências, como visão baixa.

Já existem alguns incentivos legais à acessibilidade, como a “Seção 508”, nos Estados Unidos, uma tentativa de forçar certas iniciativas referentes a acessibilidade, e leis no Reino Unido e no Brasil que obrigam todos os sites do governo a serem acessíveis. Quanto tempo vai levar até que leis assim sejam aplicadas para sites comerciais no geral, como são nos edifícios?

Se você seguir as práticas acima, seu HTML já deve ser bastante acessível a pessoas com deficiência. Existem alguns cuidados que podem tornar suas páginas ainda mais acessíveis (por exemplo, veja as páginas Links Acessíveis e Formulários Acessíveis) e isso não é nada difícil.

Páginas Relacionadas

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

Anúncios




Tutorial Avançado de HTML

27 05 2008

"XHTML Válido", "CSS Válido" e "Acessibilidade Brasil"

O objetivo do Tutorial Avançado de HTML é te mostrar como aproveitar ao máximo as características do HTML e como tornar suas páginas mais acessíveis.

Como o Tutorial Iniciante de HTML e o Tutorial Intermediário de HTML ensinam a usar o padrão mais recente do HTML (XHTML 1.0+), alguns aspectos desse guia podem não ser familiares pra muitas pessoas que não leram os tutoriais Iniciante e Intermediário, e é por isso que vamos dar uma recapitulada nos padrões. No geral, as páginas nessa seção assumem que você já conhece HTML e quer usá-lo em seu máximo potencial.

Conteúdos

Páginas Relacionadas

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





meu primeiro microformat

23 05 2008

Sim, eu sei, eu já devia ter feito isso faz um tempo. Como amanhã vou falar em público sobre (entre outras coisas) Microformats, não deu mais pra adiar. Coloquei um hCard na página “Sobre”, e um hCalendar no post do segundo sábado+web. Não levou nem 10 minutos, com o hCard Creator e hCalendar Creator. Daqui pra frente, vou usar mais microformats. Promessa.





segundo sábado+web

23 05 2008

Sábado+web

Vai acontecer amanhã, 24 de maio, o segundo sábado+web. Pra quem ainda não conhece, o +web é um grupo de estudos de desenvolvimento web do cefet/rn. Vai ser no miniauditório do Cefet, 8h da matina. O nosso primeiro encontro aconteceu dia 19 de abril, e foi massa!

Na programação do evento, as palestras:

  • Como funciona a web, por Danilo Augusto,
  • Formulários, Requisições e webForms2, por Jonatas Oliveira, da Digizap,
  • Ferramentas pra web: desenvolvendo fácil, por Pedro Anderson
  • Padrões Web: fazendo certo, por Elomar França (eu!), e
  • Design Web: fazendo bonito, por Evandro Myller.

À tarde, teremos um workshop supervisionado por Evandro e eu. A idéia é ir desde a concepção até a publicação de um mini-site. Quem quiser ir pro workshop tem que chegar cedo – as inscrições pra ele são limitadas e por ordem de chegada.

Se você vai estar em Natal no sábado, aparece por lá! Não precisa se inscrever.