terça-feira, 11 de setembro de 2007

Para não errar a mão - Desenvolvimento Web Elegante

Continuando a série iniciada no post anterior, vamos falar um pouco sobre como criar um código-fonte elegante, utilizando Web Standards, seguindo conceitos de Web Semântica, JavaScript/AJAX não obstrutivo, tableless, e os cambau, tudo visando tornar o site acessível a todos, rápido e com um código-fonte fácil e ser trabalhado.

No ano passado, quando comecei a trabalhar na Faculdade de Ciências da UNESP de Bauru, tinha a seguinte missão, criar o site da instituição com base no layout imposto pela reitoria da UNESP. Para isso eu tinha arquivos de modelo do layout disponibilizados para mim, mas o código-fonte desses modelos era bastante confuso, o código-fonte HTML das páginas tinha misturado tabelas, com camadas, com diversos arquivos CSS, alguns recursos em JavaScript, e não seguia nenhum padrão. Com isso resolvi desenvolver um código-fonte novo, e com base no conhecimento recém adquirido que tinha, resolvi fazer um site que seguisse os padrões W3C (Web Standards), fosse legível mesmo com o CSS desabilitado, possuísse os conceitos de Web Semântica e possuísse JavaScript não obstrutivo.

Partindo do site da reitoria da UNESP (http://www.unesp.br/), criei o site da Faculdade de Ciências (http://www.fc.unesp.br/) com o mesmo layout, mas código-fonte totalmente novo.

Primeiro passo para escrever o novo site é definir suas partes e ir criando as div's (nada de tabelas) para agrupar o topo, menus laterais, corpo, rodapé e também utilizar todas as tags HTML com base em suas funções de verdade (Web Semântica) sem preocupação com layout, nessa primeira fase o objetivo é fazer um site legível, onde o resultado deve ser um site linear, praticamente texto puro (para ter um exemplo, acesse o site http://www.fc.unesp.br/ e desabilite todos os recursos de CSS, utilize a Web Developer Toolbar do Firefox). Atenção para o uso das tags, títulos devem ser feitos utilizando as tags hn, menus podem ser feitos com combinação ul li, divisões na página podem ser feitas com hr, e assim por diante.

Terminada essa primeira parte você pode validar seu código-fonte no site http://validator.w3.org/ (também presente na Web Developer Toolbar do Firefox), tente sempre fazer um site que possua um código XHTML Transitional ou Strict válido, pois permite uma interpretação mais rápida por parte dos browsers. E você também pode usar um extrator de semântica (http://www.w3.org/2003/12/semantic-extractor.html) para analisar o seu site.

Tendo a "versão texto" do site pronta e validada, é hora de colocar o layout nele, para isso vamos utilizar o CSS. Toda a formatação de texto, posicionamento de conteúdo, e outros deve estar no arquivo CSS, isso criará praticamente duas versões do seu site, uma somente HTML para navegadores bem antigos e uma versão "oficial" com o layout escolhido e visível em navegadores modernos. Ao desenvolver o arquivo CSS você poderá encontrar muitos problemas com a compatibilidade com o Internet Explorer e o Firefox, principalmente se seu layout for muito complicado. Você também pode validar o CSS criado no site http://jigsaw.w3.org/css-validator.

Pronto, você possui um site rápido, seguindo Web Standards, Web Semântica, e que até esse ponto possui um arquivo .html apenas com comandos XHTML válidos, um arquivo .css também válido e os arquivos de imagem, ele não deve possuir nenhuma linha de código JavaScript, pois agora iremos criar todo o código JavaScript para que ele seja não obstrutivo, ou seja, seu site vai funcionar mesmo que o visitante não possua JavaScript na máquina dele.

Esse assunto vou tratar no próximo post, apenas fica uma dica, se você é acostumado a fazer o submit de formulários, utilize a tag input type="submit" para o formulário funcionar mesmo sem JavaScript.

Até mais.

0 comentários: