Resolvendo o problema do botão voltar em aplicações Ajax

Diego Pessoa — Tue, 10 Mar 2009 00:18:27 +0000

Quem aqui sempre sonhou em fazer aplicações em Ajax na qual o usuário pode navegar livremente utilizando o botão voltar e avançar, e além disso, pode adicionar seções específicas ao seu bookmark. Na teoria, isto não seria possível, visto que, o “Ajax” em si, utilizando pela maioria, é utilizado para recarregar apenas alguns blocos da página, mantendo aquela página ativa, e consequentemente, impossibilitando o uso do botão voltar ou de bookmarks, do contrário teríamos a boa e velha requisição da página inteira.

Mas então, como o GMAIL funciona? Ele é totalmente em ajax e mesmo assim, você consegue navegar utilizando o botão voltar, e se colocar um link como http://mail.google.com/mail/#compose na barra de endereços, ele irá abrir a tela de composição de e-mails normalmente. O grande segredo está nas #âncoras.
Navegação Orientada a Âncoras

Uma coisa muito interessante das chamadas Âncoras, é que elas permitem que você use o botão voltar e avançar, por exemplo, sem gerar nenhuma requisição e sem precisar sair daquela página, então, o que poderíamos fazer?

A primeira coisa seria criar um arquivo Javascript que irá ficar toda hora verificando se alguma âncora está ativa, caso esteja, ele envia a requisição ajax chamando a seção específica, baseada no nome da âncora, que será carregada dentro do bloco principal, simples não?

Como já é de praxe para Javascript hoje em dia, usaremos Jquery, portanto, lembrem-se de incluir o arquivo da biblioteca na sua aplicação.

Teríamos então, um arquivo de nome “core.js”, assim:

/**
* Ao carregar a página, o temporizador é iniciando para checar se há uma nova âncora ativa a cada 300ms
*/
$().ready(function(){
setInterval("checkAnchor()", 300);
});
var currentAnchor = null;
/**
* Metodo que checa se há alguma mudança de âncora, se houver, envia a requisição ajax
*/
function checkAnchor(){
if(currentAnchor != document.location.hash){
currentAnchor = document.location.hash;
/**
* Se não há nenhuma âncora ativa, a seção default é carregada
*/
if(!currentAnchor)
query = "section=home";
else
{
/**
* Cria a string de resultado. Convertendo a url: URL/#fotos&amp;id=2 em URL/?section=fotos&amp;id=2
* */
var splits = currentAnchor.substring(1).split(‘&amp;’);
var section = splits[0];
delete splits[0];
var params = splits.join(‘&amp;’);
var query = "section=" + section + params;
}
/**
* Envia a requisição
*/
$.get("callbacks.php",query, function(data){
$("#bloco_principal").html(data);
});
}
}

Ok, o conteúdo será carregando no eleme nto de ID “bloco_principal” através do resultado das requisições Ajax que estão sendo enviadas para a página “callbacks.php” em formato de querystring GET.
Para pegarmos, teríamos algo desse tipo:

$section = addslashes(strip_tags($_GET[’section’]));
$pagina = "paginas/".$section.".php";
if (file_exists($pagina)) {
include($pagina);
}

Com isso, bastaria uma pasta “paginas” contendo as páginas com os mesmos nomes das âncoras.

E para chamar cada seção, bastaria uma simples página html com links do tipo:

http://meusite.com/#fotos

que seria detectado pelo método “checkAnchor()” do javascript, que chamará uma requisição php carregando a página de nome fotos.php dentro do diretorio paginas, que será exibida dentro do bloco #bloco_principal que está contido na mesma página do link clicado, e o melhor de tudo, você pode voltar, avançar e adicionar as seções que quiser aos favoritos, à vontade.

Para ilustrar melhor o exemplo, fiz uma cópia descarada (haha), do site do evento php-pb.net, com a única diferença de possuir navegação em ajax através de âncoras (o original possui navegação normal). Acessem pelo link: http://www.diegopessoa.com/php-pb-ajax

Se quiserem baixar o exemplo funcionando, cliquem aqui!

WCAG! WCAG!

Diego Pessoa — Mon, 02 Feb 2009 03:47:30 +0000

Neste começo de 2009 a W3C anunciou novos padrões que ajudarão os desenvolvedores web a criar sites que atendem de maneira mais adequada às necessidades dos portadores de deficiências e usuários idosos. Trata-se da segunda versão do WCAG (Web Content Accessibility Guidelines) ou (Diretrizes de Acessibilidade a Conteúdo Web, este novo padrão produzido pela Iniciativa de Acessibilidade Web (WAI) da W3C atenderá uma largo faixa de conteúdos (tais como texto, imagens, áudio e vídeo) e aplicações web, permitindo melhores testes de verificação e ainda proverá mais flexibilidade e maior potencial de inovação para desenvolvedores web. O WCAG 2.0 é mais fácil de entender e usar juntamente como o material educacional e técnico disponível.

O WCAG 2.0 ataca as dificuldades de acesso a web experimentadas por pessoas com limitações visuais, auditivas, físicas, cognitivas e neurológicas e por usuários idosos com necessidades de acessibilidade a web. Seguindo quatro princípios:

Perceptível (por exemplo, fornecer textos alternativos a imagens, modo “caption” para áudio, apresentar conteúdo adaptável a diferentes maneiras de ser apresentado e usar contraste de cores);
Operável (por exemplo, prover acesso às funcionalidades pelo teclado, contraste de cores, oferecer tempo adequado para ler e entrar com dados, evitar imagens que causem convulsões e melhor navegabilidade);
Compreensível (por exemplo, prover conteúdos legíveis e previsíveis e ajudar o usuário a evitar e corrigir erros); e
Robusto (por exemplo, prover compatibilidade com tecnologias assistidas)

[texto adaptado do site oficial da W3C]

Para quem já quer começar a estudar as novas diretrizes, acesse o guia de referência.

Para animar vocês, vejam o vídeo com o tema da WCAG 2 (lembrem-se de ativar o recurso de legendas do player do youtube):

Diego Pessoa » Web Accessibility

Resolvendo o problema do botão voltar em aplicações Ajax

WCAG! WCAG!