Pixel eXperience - be creative, be different!

Construir páginas para Web seguindo padrões de acessibilidade pode não ser uma tarefa tão simples quanto a de construir uma página sem essa preocupação. Primeiramente, a maneira como os programas, – cujo objetivo é facilitar a criação de páginas – tratam os códigos, não é muito adequada para o conceitos de códigos válidos.

Pela grande flexibilidade dos navegadores na interpretação de códigos, certas vezes um código incorreto acaba sendo renderizado corretamente em um determinado navegador. Para os desenvolvedores de primeira viagem isso basta, pois acreditam que se estão vendo corretamente, tudo está certo. É aí que entram os padrões da Web, uma página desenvolvida seguindo os Padrões da Web tem a mesma visualização sendo exibida por qualquer tecnologia ou software, já uma página que não segue tais padrões possivelmente terá diferentes apresentações em diferentes meios, isso em certos casos até impede a navegação.

Este artigo tem por objetivo de explicar o que são, suas vantagens, quem está por trás e como passar a utilizar os famosos Web Standards (padrões da web). Uma série de links úteis serão apresentados durante este artigo, vale muito a pena mantê-los nos favoritos do seu navegador, pois servirão de material de consulta para todas as vezes que estiverem desenvolvendo projetos para a internet.

Métodos para construção de páginas:

Existem dois métodos para a construção de páginas para a Web, um deles – o mais utilizado – é com certeza o método gráfico. O método gráfico logicamente é mais prático que o método código, – chamaremos dessa maneira – o primeiro é mais utilizado por um motivo um tanto peculiar em todas as coisas de nossas vidas, é mais fácil aprender por imagem e símbolos do que por palavras.

Mas apenas clicar em botões deixando para que o programa faça toda a inserção do código pode ser bom para o aprendizado, mas não é uma boa maneira de se construir um site. Quando o usuário opta por utilizar o método gráfico, o código de seu web site será escrito e organizado da maneira que o programa em que estiver trabalhando achar conveniente, porém devido a imensa gama de possibilidades que às vezes pode sair de uma única linha de código, o editor utilizado não terá como saber realmente o que estamos buscando com aquele código e pode tanto incluir informações desnecessárias a uma situação como excluir informações importantes.

A melhor maneira de se trabalhar na construção de um web site é utilizar os dois métodos simultaneamente, utilizar o método gráfico para acelerar o processo de criação, – para isso os editores foram feitos – mas sem deixar de lado o código criado. É preciso ficar de olho no que o programa faz, muitas vezes serão necessárias intervenções no código, sejam elas com objetivo de estruturar melhor, adicionar ou até mesmo remover partes dele.

O código e sua importância:

Na internet tudo que é mostrado ao usuário provem de códigos, estes, quando agrupados, formam sintaxes e estas exibem textos, cores, imagens, animações, vídeos e tudo mais que podemos ver na tela do navegador, além de todo o trabalho dinâmico que faz em linguagens como JavaScript, PHP, ASP etc.

Antigamente um web site não era algo tão elaborado quanto hoje, na verdade, em palavras diretas, era algo extremamente simples para os dias atuais, mas era o que antes, – com a tecnologia da época –era possível de se fazer.

E qual é o grande lance?

O grande lance é o seguinte, antigamente com a tecnologia pouco desenvolvida na área de desenvolvimento web, tudo era rudimentar, as sintaxes dos códigos, por exemplo, ainda que maiores no tamanho, – comparada as de hoje – nem chegariam perto da quantidade de códigos que uma página tem atualmente.

A partir do momento em que as coisas começaram a tomar volume, ao mesmo tempo em que a informação também começava cada vez mais a se valer da internet para se propagar, foi necessário além do desenvolvimento de novos códigos e linguagens de programação, alguma coisa que organizasse e padronizasse todos aqueles códigos para que a Web pudesse se desenvolver melhor e de maneira mais uniforme no que diz respeito ao trabalho com os códigos.

Foi aí que em 1994 Tim Berners-Lee fundou o World Wide Web Consortium, o W3C, o qual por meio do desenvolvimento de protocolos comuns fosse possível levar a Web ao seu potencial máximo, assegurando-lhe sua interoperabilidade e acessibilidade. Desde então, o trabalho que vem sendo realizado pelo W3C ao longo dos anos vem possibilitando melhoras significativas tanto para desenvolvedores quanto para usuários.

As vantagens dos padrões na Web:

Algumas das vantagens do desenvolvimento de web sites seguindo os Web Standards são:

• Sites quando desenvolvidos tendo a preocupação com padrões web podem ser acessados a partir de qualquer tecnologia independentemente do hardware ou software utilizado, o que possibilita uma maior acessibilidade, ou seja, seguindo os padrões seu web site pode ser acessado tanto de um computador como de um celular por exemplo.
• Sites escritos de maneira semântica tendem a fornecer informações mais relevantes a mecanismos de busca do que sites não-semânticos. Quando um robô de busca acessa um site semântico ele aproveita da melhor maneira possível a organização proporcionada pelos padrões da web. Uma boa organização dessas informações previamente facilitará lá na frente à obtenção de resultados mais precisos sobre assuntos pesquisados.
• Softwares podem ainda, de maneira muito mais rápida, acessar as informações contidas num documento que segue os padrões do W3C, pois neste estará presente apenas o código necessário às situações. Suprimir o código inútil fará com que o tráfego de dados se reduza além de um carregamento bem mais rápido das informações ao usuário e o servidor será poupado.

“O ESPN consumia 2 Terabytes por dia, que dava um total de 730 Terabytes por ano! Eles conseguiram economizar cada um desses bytes redesenhando o site usando padrões Web. O site do ESPN é um portal de informação que recebe muitas visitas por dia, logo a principal vantagem que eles obtiveram quando adotaram os padrões foi a diminuição de código desnecessário, fazendo com que os arquivos ficassem menores e por sua vez possibilitando uma enorme economia de banda já que os usuários baixavam arquivos muito menores.”

Portando, é um dever de todo desenvolvedor Web respeitar e seguir os padrões de acessibilidade do W3C, pois de outro modo poderá impor barreiras tecnológicas a diversas pessoas, desestimulando e até mesmo impedindo o acesso a suas páginas.

Diferença entre HTML e xHTML:

Uma dúvida que muitos podem ainda não ter conseguido sanar é a diferença entre HTML e xHTML!

O HTML é uma linguagem de marcação amplamente utilizada na Web, essa denominação significa que um conjunto de códigos é estabelecido cuja função deles é adicionar características particulares a textos ou dados. O que ocorre é que desde sua criação o HTML ele vem sendo uma linguagem bem flexível, isso ajuda aqueles que não têm prática com a criação de páginas, mas por outro lado cria um mau hábito difícil de ser perdido. A flexibilidade citada acima, se relaciona também a capacidade dos navegadores de interpretar códigos HTML que estão bem longe de serem considerados válidos.

Já o xHTML não se trata de uma outra linguagem, pois é apenas uma reformulação da linguagem HTML. O xHTML tenta deixar menos flexível o HTML, utilizando regras e padrões faz com que o HTML seja mais simples de ser processado e entendido.

Para esclarecer melhor o que foi dito acima, aqui vão dois exemplos de duas diferenças entre HTML e xHTML, lembrando que existem várias outras.

HTML

<P>Isso é um parágrafo.</P>

xHTML

<p>Isso é um parágrafo.</p>

O que podemos ver aqui é que no HTML não há a preocupação com o código sendo escrito em caixa alta ou baixa. No HTML seria perfeitamente aceitável que o código de tabela fosse escrito <tAbLe></TAblE>.

Outro exemplo é a ordem dos atributos, vamos novamente a dois exemplos:

HTML

<p>Isso é um <em>parágrafo.</p></em>

xHTML

<p>Isso é um <em>parágrafo.</em></p>

Aqui, o que podemos observar aqui é que no HTML tanto faz a ordem do código, estando fechadas as tags, são consideradas válidas. Já no xHTML precisamos ficar atentos para fechar nossas tags na ordem em que forem abertas.

Iniciando com os Web Standards:

Document Type Definition

Para começarmos a utilizar os padrões da Web em nossas páginas devemos ficar atentos para uma linha de código em especial. Essa linha chama-se “Document Type Definition” (Doctype), cuja tradução é Definição do Tipo de Documento, ela dirá para ferramenta que está acessando nosso documento qual é a maneira certa de processá-lo.

Na linha Doctype informamos a linguagem básica que utilizamos em nossa página e a sua versão.

Por não existir apenas um Doctype, quando este não é definido no documento os navegadores ficam perdidos ao tentar reproduzi-los, muitas vezes vão estabelecer erroneamente algum Doctype o que acarretará em maior lentidão no carregamento e possíveis falhas na apresentação do mesmo.

Vou citar apenas os tipos de declaração Doctype do xHTML, pois como vimos, em relação ao HTML é bem melhor a utilização do xHTML para a estruturação básica da página. Vale lembrar que a declaração Document Type Definiton deverá ser a primeira linha do documento, antes de toda e qualquer linha inclusive a tag <head>.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Esta é a mais rígida das declarações. Os documentos xHTML no modo Strict não admitem qualquer item de formatação dentro dos elementos e nem elementos em desuso “deprecated” segundo as recomendações do W3C. São indicados para uso com folhas de estilo em cascata, com marcação totalmente independente da apresentação

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Esta declaração permite uma maior flexibilidade e é indicada para documentos que ainda utilizem elementos em desuso (“deprecated”), regras de apresentação embutidas em tags e também para documentos destinados a exibição em browsers sem suporte para CSS. Não admite qualquer tipo de marcação para frames.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Esta declaração permite tudo da declaração transitional e mais os elementos específicos para frames.

Ainda, dentre as principais, há uma quarta opção de Doctype para xHTML, é a versão 1.1 Strict que é ainda mais rígida que a 1.0 Strict. Para declará-la em seu documento faça da seguinte maneira.

<!DOCTYPE</pre>
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Uma curiosidade sobre as versões Strict do xHTML é que ela não permite o atributo target, ou seja, utilizando essas versões do xHTML não se pode definir por exemplo que uma URL abra em uma nova janela, essa escolha cabe ao usuário e portanto não devemos interferir. Chato? Eu também achava!

Recomendo a todos trabalharem com xHTML 1.0 Strict e caso haja necessidade, – alguns sistemas dinâmicos podem precisar – utilizar xHTML 1.0 Transitional.

Desenvolver códigos seguindo normas:

Tendo sido feita a escolha do Doctype é preciso que o código seja desenvolvido para tal, não adianta simplesmente escolher a declaração mais rígida, sendo que na verdade ele não está.

Para escrever seus códigos de acordo com os padrões estabelecidos é preciso, – enquanto não se tem a prática necessária – consultas constantes a materiais desenvolvidos pelo própria W3C e por usuários. Eles têm o objetivo de mostrar através de guias e validadores qual é a maneira certa de se trabalhar com uma linguagem.

O site http://www.w3.org fornece muitos materiais bem como os guias de referência oficiais das linguagens. Os materiais encontrado lá estarão em inglês, diante disso para aqueles que preferem um material em português, o site do escritório do W3C no Brasil fornece guias de referência CSS e xHTML bem como um link para os documentos oficiais da W3C que tiveram traduções para o português feitas por voluntários.

Validadador de Códigos

O W3C além dos materiais citados ainda disponibiliza, gratuitamente, validadores para documentosxHTML e CSS . A partir de uma URL ou upload de um arquivo o sistema irá analisar e fornecer um relatório completo de erros por ventura existentes. São ótimas ferramentas e essenciais para quaisquer desenvolvedores.

Validador (x)HTML: http://validator.w3.org/
Validador CSS: http://jigsaw.w3.org/css-validator/

Ainda há outros validadores disponíveis, a página onde você poderá encontrar todos os validadores é:
http://www.w3.org/QA/Tools/

Checklists

Outro material muito útil para o desenvolvimento de páginas pode ser encontrado no Blog Web Standards, lá é possível encontrar, além de todo um conteúdo voltado a padrões da Web, duas checklists uma para (x)HTML e outra para CSS. Estas checklists são como aquelas listas que fazemos para viagens quando queremos ter a certeza de que nada será deixado para trás, só que neste caso são para não deixarmos nada para trás quando desenvolvermos nossa página.

Uma parte extremamente útil destas checklist é a ordem dos atributos, como sabemos códigos HTML e CSS trabalham com atributos, o que muitas vezes pode passar despercebido a ordem correta que esses atributos deverão ser escritos:

Checklist para (x)HTML
Checklist para CSS

Links úteis e referências:

• Documentos Oficiais W3C Traduzidos para o Português

  Até a presente data há 60 documentos já traduzidos.

• Manual Oficial W3C do xHTML 1.0 (Traduzido)

  Manual completo com todos as especificações sobre xHTML.

• Manual Oficial W3C do CSS 2.1 (Inglês)

  Manual completo com todos as especificações sobre xHTML.

• Tutorial xHTML

  Tutorial completo sobre xHTML incluindo as diferenças deste para o HTML.

• Uma das Vantagens dos Padrões

  Artigo falando do uso de Web Standards para diminuição de tráfego.

• Quais são as Vantagens de se Adotar os Padrões Web

  Artigo falando sobre vantagens no uso de padrões.

• Não Esqueça o Doctype do seu Documento

  Artigo referente ao uso do Doctype nos documentos.

• Não Obrigue o Usuário a Abrir Link em uma Nova Janela

  Artigo explicando o porquê de não utilizar o atributo traget.