Portal PUC-Minas consonante com a W3C

Conhecendo a W3C

A W3C (World Wide Web Consortium) é o orgão não governamental que normatiza e regulariza as tecnologias utilizadas na internet (atualmente o responsável pelo órgão é Tim Berners Lee, criador da WWW) ela tem a grande responsabilidade de padronizar as tecnologias impedindo que a WEB vire uma enorme "Torre de Babel" com cada empresa querendo "impor" seus padrões (Como visto há algum tempo com os navegadores de internet, vide Netscape x I.E 6.0)

A Importancia de prover Acessibilidade

"A expressão acessibilidade, presente em diversas áreas de atividade, tem também na informática um importante significado.

Representa para o nosso usuário não só o direito de acessar a rede de informações, mas também o direito de eliminação de barreiras arquitetônicas, de disponibilidade de comunicação, de acesso físico, de equipamentos e programas adequados, de conteúdo e apresentação da informação em formatos alternativos."[4]

Algumas das recomendacoes W3C

[1] '"Use folhas de estilo para controlar a apresentação e o layout"
"Não use tabelas para o layout, a menos que a tabela faça algum sentido quando linear. Por outro lado, se a tabela não faz sentido proporcione uma alternativa equivalente ( a qual deve ser uma versão linear)"

Convertendo o portal da PUC-MG

Em algumas horas, insipirado na idéia criada pelo site TableLess, foi efetuada a conversão do código da página principal do portal da PUCMinas para os padrões da W3C, deixando-o totalmente sem tabelas, com código mais limpo e mais semântico.

A conversão do website da PUC-Minas seguiu os parâmetros da técnica [2]TableLess (Técnica conhecida por não utilizar tabelas nos layouts das páginas) e trouxe alguns benefícios importantes e válidos que devem ser considerados.

A principal vantagem é a otimização do código, a página atual possui 62kb enquanto a página sem tabelas possui 19kb, uma economia de 70%, com isto consegue-se diminuir o tempo de carregamento das páginas e principalmente economizar utilização de tráfego do servidor. Nos períodos onde o website recebe muitas requisições (geralmente em finais de semestre) sempre verificamos a página da PUC-Minas muito lenta, sem dúvida, se a página estivesse de acordo com os padrões da W3C, essa lentidão seria minimizada.

Economia de Banda

Suponhamos que o website da PUC-MG possua uma média de 9.000 acessos diários.

No Website atual: 9.000 X 62kb = 558.000 kb/d (kbytes por dia)

No Website consonante com a W3C: 9.000 X 19kb = 171.000 kb/d (kbytes por dia)

Com o website consonante com os padrões, teríamos em média uma economia de 387 megas por dia na utilização do tráfego dos servidores.

 

Leitura do Codigo:

Outra vantagem é a facilidade de leitura, e consequentemente a manutenção do código. Os dois códigos abaixo imprimem a mesma mensagem na tela do navegador.

HTML da página com tabelas:

<tr>
    <td valign='top'><font class='title'><a href='#' class='navcapanormal'
 onmouseover=" className='navcapaativo'" 
    onmouseout="className='navcapanormal'" >:: </td>

    <td valign='top'><font class='title'><a href='#' class='navcapanormal'
 onmouseover=" className='navcapaativo'" 
    onmouseout="className='navcapanormal'" >Encontro PUC Minas dos 
    Universitários de Turismo</td>
</tr>

HTML sem Tabelas

  <p><a href="#" Title="Encontro PUC Minas">:: 
  Encontro PUC Minas dos Universit&aacute;rios de Turismo</a></p> 

Percebe-se claramente a discrepância entre os dois códigos.

O 1°, despadronizado, utiliza-se inadequadamente de tags e atributos (tags font, tr,td e atributo valign) para formatação da página (layout), além de eventos em javascript desnecessários.

0 2° utiliza-se de tags semânticas ao conteúdo e deixa o layout da página por conta da folha de estilos (CSS).

É fato que o 1° código é muito mais difícil de ler e consequentemente de realizar manutenções, mesmo que estas sejam esporádicas.

Mais vantagens sobre o desenvolvimento de websites utilizando padrões podem ser vistas em http://www.codigonet.com.br/artigos/seybold/3.htm

Quadro Comparativo

Abaixo foi feito um quadro comparativo entre as duas versões do site (Atual e Padronizado).

 

	Padronizado	Original
Tamanho do HTML	19kb	62kb
Tamanho total HTML+CSS+IMAGENS	19kb + 3kb + 89kb = 111kb	62kb + 5kb + 89kb = 156kb
Velox 256	3 segundos	7 segundos
Válido pelo W3C?	SIM	Não
Compatibilidade com Navegadores	Ópera, Mozilla, I.E 6.0 (No I.E 5.0 exibe com pequena deformidade)	Ópera, Mozilla, I.E 5.0 / 6.0
1 Válido pelo DaSilva	SIM	Não
2 Porcentagem de Conteúdo	24.89 %	5.37 %
Conferir	Padronizado	Original

1 - O Software DaSilva é um Avaliador de acessibilidade para websites portugueses que segue as orientações da W3C, a validação foi conforme as prioridades 1 e 3 da W3C

2 - Mostra a porcentagem do código do site que realmente é conteúdo, o resto é formatação (tags font, border, color, td, tr, table, etc...), consequentemente o site que tiver uma maior porcentagem de conteúdo terá uma chance maior de ser indexado pelas ferramentas de busca

Estudo inspirado e baseado nas referências do website TableLess.

Referencias:

[1] - Técnicas CSS para acessibilidade a conteúdo web - Diretrizes 1.0
http://www.maujor.com/w3c/tec_css_acess.html

[2] Tableless [ Design CSS XHTML HTML Web Standards ]
http://www.tableless.com.br/

[3] Porque utilizar tabelas para layout é estúpidez:
http://www.codigonet.com.br/artigos/seybold/1.htm

[4] Texto extraído do website AcessoBrasil.org
http://www.acessobrasil.org.br/index.php?itemid=45

Obs: Layout baseado no Script sIFR 2.0b