Hijax - Ajax não obstrutivo

Introdução

Recentemente vi uma apresentação de slides cujo título era Hijax - Progressive Enhancement with Ajax (Hijax - Melhoria Progressiva com Ajax). Por abordar um tema muito interessante, resolvi compartilhar sobre o assunto aqui no blog.

O termo "Hijax" foi proposto por Jeremy Keith, e tem como princípio o planejamento/implementação de soluções com Ajax de forma acessível e não obstrutiva, ou seja, a aplicação se mantém funcional em navegadores com ou sem JavaScript habilitado ou disponível. Embora o tema esteja intimamente relacionado à acessibilidade, ele representa apenas a prática da organização de um documento HTML da forma como deveria ser feito em toda web.

Como um documento HTML deveria ser feito?

HTML é uma linguagem de marcação (utiliza tags) muito fácil de usar, até mesmo por pessoas que não são da área de informática. Porém, mesmo sendo fácil, não é simples organizar um documento HTML como se deveria. Digo que não é simples pelo fato de que muito do que vejo na Web não é montato da forma mais correta possível.

Antes de tudo, devemos nos concentrar em três pilares: o conteúdo, a apresentação e o comportamento. O conteúdo é a estrutura do HTML, ou seja, o código fonte devidamente estruturado de acordo com a semântica de cada elemento. A apresentação é a forma como este conteúdo é mostrado, ou seja, a parte visível do conteúdo. E o comportamento é a forma como o usuário interage com o conteúdo para realizar operações.

Desenvolver um documento HTML deveria, portanto, se basear apenas na criação do conteúdo, seguindo a semântica correta dos elementos utilizados e aplicando classes e ids aos elementos pertinentes. Em seguida, seriam criados os arquivos CSS para cuidar da apresentação deste documento (melhoria incremental). Eventualmente, por alguma restrição da linguagem CSS, poderia haver alguma modificação no conteúdo, mas de forma que não prejudicasse a semântica do mesmo. Por fim, seriam criados os arquivos JavaScript para cuidar do comportamento alternativo da página (mais melhoria incremental).

---

A proposta Hijax

A proposta do Hijax não foge muito do que já foi colocado na sessão anterior. Ela apenas destaca algumas observações importantes, tais como:

• Planejar a criação do JavaScript antes de desenvolver o conteúdo, mas só implementar o JavaScript após todo conteúdo já estar pronto e funcional.
• Criar o conteúdo inicial, sem JavaScript, com refresh ao passar de uma página para outra. Os dados devem ser enviados para o servidor via links ou submissão de formulários, e o servidor deve devolver todo documento.
• Não utilizar estilos ou eventos inline (atributo "style", "onmouseover", "onclick", etc). Ao invés disso, aplicar estilos externos e acoplar (hijack) eventos aos elementos capturados, ou seja, acoplar estilos e comportamentos de forma não obstrutiva. Estes eventos devem disparar requisições Ajax ao servidor, que deve retornar apenas pedaços de HTML que são necessários para atualizar a página. Portanto, requer uma estrutura modularizada no lado do servidor.

A aplicação desta proposta traz vários benefícios. O mais importante que considero é a acessibilidade e, neste caso, não estou me referindo apenas à acessibilidade para humanos. Usando as técnicas do hijax, você permite que uma máquina (como um robô de busca) continue acessando seu conteúdo e indexando, mesmo que o site utilize bruscamente recursos capturados com ajax.

Além disso, o código JavaScript tende a ser menor, visto que não haverá tanto código JavaScript que cria elementos e sim requisições que já buscam elementos prontos, ou então pedaços de elementos.