Para ser bem objetivo, no post anterior sobre javascript não-obstrutivo mostrei 2 exemplos, um correto, outro não.

Por que correto?

Este exemplo podemos dizer que é correto por 2 motivos principais:

• Trabalha com camadas, o javascript interage sempre externamente, sem se misturar com html.
• Acessibilidade, se o javascript do navegador estiver desabilitado o visitante verá a informação.

Ok, entendi a teoria, mas onde está isso no código?

No exemplo correto o javascript é carregado de um arquivo externo neste momento:

<script src="jsnobs.js" type="text/javascript">

Todo javascript está neste arquivo jsnobs.js, por meio de eventos ele acessa o html e interage com o mesmo.
O arquivo JS está aqui.

Reparem, existem 2 funções chamadas fadeIn e fadeOut, servem somente para fazer o esmaecimento, ou seja, aparecer e desaparecer as divs.
Mais abaixo temos o que interessa, que é o evento onload, usado neste exemplo para termos certeza que vamos acessar o DOM, o html, somente depois de carregado.
Ali diz que quando o documento for carregado deve executar as instruções que vem na sequência .

window.onload

A parte abaixo pega todos os links da página e os guarda como uma array na variável pegalinks.

pegalinks = document.getElementsByTagName("a");

O laço for percorre todos os links da página.

for(i=0;i<pegalinks.length;i++)

Em cada link comparamos se ele tem o id que procuramos, usei o id neste caso para definir qual link iria trabalhar, pois não iriam repetir, lembrando que o id de cada elemento em uma página deve ser único, caso precise trabalhar com mais links, sugiro usar o atributo “rel”.

if(pegalinks[i].id=="mostra_quadrados")

Caso seja o link que procuramos ele exibe os quadrados chamando a função fadeIn quando este link for clicado.

pegalinks[i].onclick = function(){
fadeIn("q1");
fadeIn("q2");
fadeIn("q3");
return false;
}

Caso seja o outro link procurado, escondo os quadrados usando este código:

pegalinks[i].onclick = function(){
fadeOut("q1");
fadeOut("q2");
fadeOut("q3");
return false;
}

Ok, isso mostra como trabalhamos com camadas, o javascript todo fora do html.
A questão da acessibilidade é que mesmo tendo o javascrip trabalhando em outra camada, eu ainda sim, inseri o link para a página com o conteúdo no html.
Ira exibir de uma forma não tão bela, mas vai exibir, e isso é o mais importante.

<a href="quadrados.htm" id="mostra_quadrados" title="Mostrar quadrados">
Mostrar quadrados</a>

Alguém certamente vai perguntar, mas porque quando o javascript está ativado ele ignora o atributo “href” do link e obedece somente ao javascript?
Reparem a ultima linha do evento “onclick” no javascript:

return false;

Isso indica para fazer o que vem antes daquilo e depois não fazer mais nada, ou seja, ignorar o “href”, pois ele sempre é executado depois do que vem com evento onclick.

Para quem não lembra do post falando sobre camadas, acesse clicando aqui, vai ser útil para o entendimento deste post.
Hoje a camada de comportamento está em destaque, vou passar um exemplo de como utilizar o javascript de forma correta, para que não atrapalhe a acessibilidade.
Um observação apenas, o termo correto é não-obstrutivo, ao contrário do que muitos utilizam “não-obstrusivo”, digo isso não pela terminologia, quem me conhece sabe que não me importo com isso, porém obstrusivo é erro de escrita, de português, é uma palavra que não existe na nossa língua, e ai doi um pouquinho no olho.

O javascript não-obstrutivo nada mais é do que uma forma de montar seu javascript separado da camada de conteúdo, muita gente gosta de usar o famoso “onclick=’javascript:funcao()’”, funciona bem para quem tem o javascript ativado no navegador, porém, no caso de estar desativado, o que acontece? provavelmente nada, não carrega o conteúdo, e ai você diz, 99% tem javascript habilitado, pode ser, mas aquele 1% é pior do que o restante dos 99% para não ter direito a acessar o conteúdo do seu site?
Deixando de lado ainda a acessibilidade, separar o javascript da camada de conteúdo, fora do html, é uma questão organizacional também, pois olhar para aquele código cheio de “onclick” e função para todo lado além de feio é pouco produtivo, atrapalha atualização do mesmo, e ainda dificulta a compreensão de outro desenvolvedor que pegar o mesmo para alterar.

Abaixo deixo 2 exemplos, o primeiro a forma incorreta de usar javascript em um site, o segundo a correta.
Mas por hora deixo em aberto, vamos ver quem sabe o que tem de diferente nos dois, em um post futuro explico a diferença entre ambos.

Javascript incorreto
Javascript correto

P.S:
Não se apeguem ao nível do exemplo, fiz rapidinho só para mostrar para vocês.

Atualizado:

Clique aqui para acessar o post complementar a esse.

Bom muita gente cai de pára-quedas aqui, e vão reparar que a direita tem ali, assine meus feeds, e provavelmente irão pensar, o que é isso, uns vão clicar para tentar entender, outros, simplesmente vão morrer de curiosidade e medo de clicar e o computador explodir.
Assinar o FEED de algum site, em uma comparação a grosso modo, seria o mesmo que assinar sua revista preferida, receber todo conteúdo que ela oferece sem ter que sair de casa para comprar, porém com uma vantagem: Inteiramente grátis.
Quando você assina um FEED está dizendo: “-Quero receber o conteúdo desse site no meu computador sem ter que acessar o site”.
Poxa legal você deve estar pensando, então quando eu clicar ali do lado meu computador automaticamente recebe tudo que for postado nesse site ou em qualquer outro que libere o tal do FEED?
Se você possui um navegador com suporte a FEEDs como Firefox, Opera, sim!
Ele vai pedir para nominar esse FEED e posteriormente sempre que um novo post for inserido no site que você assina o FEED será possível saber, alguns agregadores(programa/site que gerencia suas assinaturas) de Feeds mostram apenas o título, e se for algo do seu interesse pode entrar no site e ler o artigo completo, outros carregam o post inteiro, alguns avisam quando existe novo post de forma visual ou até com som, outros dependem do usuário acessar e visualizar o que foi atualizado.

Existem os agregadores como ja disse que vem integrados nos navegadores modernos, existem os agregadores que podemos baixar da internet, são programas desktop que gerenciam suas assinaturas, alguns clientes de email como Thunderbird também possuem integrado a eles o agregador de feeds, onde o assinante recebe o novo conteúdo diretamente no email, e por fim, existem ainda os agregadores on-line, sites onde cria-se uma conta, e o mesmo guarda todas suas assinaturas.

Para quem não tem navegador com agregador de feeds integrado, ou que prefere algo em separado, seguem alguns agregadores dos mais conhecidos:

On line:
BlogLines
Google Reader

Programas desktop:
Feedreader
SharpReader

Cliente de email com agregador integrado:
Thunderbird

Não quer um programa separado, ou visitar um site para assinar feeds mas seu navegador é velhinho e não possui agregador integrado?

Baixe agora um navegador moderno e divirta-se assinando os feeds de seus sites preferidos:

Firefox
Opera

Muita gente por ai prega webstandards muitas vezes sem saber o que é.
Independente da palavra em si que serve meramente como referencial, como já disse, as favas com brigas por defender terminologia, chega de fanáticos tecnológicos.
Me empolguei
Voltando ao tema, webstandards não é somente um código xhtml limpo e validado na W3C, o conceito vai muito além, mas eu costumo dizer que para fazer um site corretamente é preciso trabalhar com camadas, lembram as camadas do Photoshop? Certo, nada a ver, mas serve para visualizar o que seria.
As chamadas camadas no desenvolvimento para web são 3, apresentação, comportamento e conteúdo, sendo a última a mais importante, por trazer toda informação contida no site.
Rapidamente vou explicar como funciona cada uma dessas camadas.

Conteúdo

Como escrevi algumas linhas acima esta é a camada mais importante de todas, o conteúdo é o que motiva uma pessoa a acessar um site, o site pode ser feio, lento, mas tendo um conteúdo bom, o visitante retorna, claro, tendo um outro site com conteúdo tão bom quanto o primeiro, mas bonito e rápido de acessar o visitante certamente não pensará duas vezes em abandonar o site bom, mas feio.
Logo, o conteúdo é o mais importante, mas o design também conta e muito.
Para desenvolver essa camada você usará linguagens de marcação de hipertexto, como HTML ou XHTML.
Definido o layout, a montagem do seu site deve começar aqui, não é uma regra, seu site não explodirá se usar outra ordem, mas é o aconselhável.
Digo isso porque antes de começar a pensar na parte visual, devemos estruturar a forma como será exibida a informação a fim de evitar misturar as camadas.
Será difícil porque o layout vai ficar na sua cabeça louco para aparecer na tela, mas resista, pense primeiro na estrutura, lembre-se de definir o que é importante no conteúdo com as tags devidas, isso facilita a acessibilidade, usabilidade, indexação nos mecanismos de busca e ainda facilitará a implementação da parte estética do site, da camada de apresentação.

Apresentação

Como o próprio nome diz e vocês devem imaginar, essa camada diz respeito a forma como o site é exibido na tela, é a parte visual, é aqui que vamos definir as propriedades visuais dos elementos da página com o tão famoso CSS
Lembrem-se menos as vezes é mais, e a ordem do dia aqui é simplicidade, muita gente gosta de montar um CSS cheio de código proprietário, como por exemplo o “filter” da Microsoft, lembrem-se que isso afeta a experiência e a acessibilidade do seu visitante.
Hacks não são proibidos, mas não são também recomendados, fuja de todos se possível, se não for, use o mínimo, prefira os comentários condicionais para carregar um css a parte do principal somente com os ajustes.
Fuja da coceirinha, é, quem nunca durante a montagem do HTML não sentiu coçar a mão para definir alguma propriedade do elemento diretamente nas tags html, parecia tão mais simples, tão fácil, até se lembrar que um dia aquilo vai precisar de atualização, não misture as camadas, o html diz respeito somente a camada de conteúdo, caso contrário você certamente no futuro se perderá no próprio código.

Comportamento

Muita gente adora essa camada, é a parte das ditas “frescuras”, aqui a linguagem normalmente utilizada é Javascript interagindo com o esqueleto do site, com o HTML, com a árvore de elementos do HTML, para os íntimos simplesmente DOM.
Essa camada tem má fama pelo uso exagerado por parte de alguns desenvolvedores dos recursos que oferece, é também por ser a única das 3 camadas dispensável, seu site pode tranquilamente viver sem ela
Um exemplo de código javascript que interage com a DOM:

document.getElementById(id)

Esse código seleciona algum elemento da árvore DOM para ser manipulado.
Nesta camada que surgem efeitos muito vistos em alguns sites, como o esmaecimento de textos, imagens que somem, aparecem, que mudam de lugar, validação de formulários, a sugestão aqui é o bom senso como sempre.
Essa camada é importante por melhorar a forma de interagir como o visitante do site, mas os recursos usados em excesso ou de forma errada, podem afetar a acessibilidade e a boa experiência do usuário.

Para finalizar, não esqueça o principal, teste no maior número possível de browsers o seu site, garanta a acessibilidade do mesmo e a felicidade do seu visitante, tem coisa mais chata do que entrar em um site escrito:

Melhor visualizado na resolução 800×600, com Internet Explorer, monitor Samsung, e sentado inclinado ligeiramente a direita.

Hoje uma mensagem dessas pega muito mal, mas seja sincero, quem aí que desenvolvia no tempo das trevas da internet nunca usou esse recurso extremamente agradável.

O prazo dado pela Google para os usuários do Analytics migrarem para nova interface é 18 de julho de 2007.
E o fato é, a nova interface ainda tem problemas.
Vários usuários relatam erros ao gerenciar as datas usando os mais diversos navegadores e sistemas operacionais, logo, não é um problema isolado.
Eu pessoalmente nunca tive esse problema, mas para alguém que está sempre perdido em centenas de feeds é fácil perceber o burburinho que se forma, com alguns mais radicais inclusive anunciando abandonar definitivamente o sistema da Google.
A parte dos problemas ainda vem a interface, esta atual que ainda permanece no ar por mais 1 mês é absurdamente simples de usar, boa parte das pessoas que permito acesso ao sistema não necessita de grandes explicações para usa-lo, com esta nova interface não posso dizer o mesmo, os poucos que já tiverem contato com ela literalmente se perderam.
O serviço é bom, a Google é competente, porém essa mudança com certeza está lhe causando muitas dores de cabeça, muito mais do que ela poderia imaginar, por sorte tem “ainda” 1 mês para resolver esses problemas que assombram sua ferramenta.
Quanto ao layout da interface… o jeito é me acostumar.

Alguém mais por aí descontente? >:/