Diego Pessoa » Web Standards http://www.diegopessoa.com Thu, 07 Jan 2010 04:22:03 +0000 http://wordpress.org/?v=2.9 pt-br hourly 1 Resolvendo o problema do botão voltar em aplicações Ajax http://www.diegopessoa.com/lang/pt-br/2009/03/09/solving-the-problem-of-back-button-in-ajax-applications http://www.diegopessoa.com/lang/pt-br/2009/03/09/solving-the-problem-of-back-button-in-ajax-applications#comments Tue, 10 Mar 2009 00:18:27 +0000 Diego Pessoa http://www.diegopessoa.com/?p=102 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:

  1. /**
  2. * Ao carregar a página, o temporizador é iniciando para checar se há uma nova âncora ativa a cada 300ms
  3. */
  4. $().ready(function(){
  5. setInterval("checkAnchor()", 300);
  6. });
  7. var currentAnchor = null;
  8.  
  9. /**
  10. * Metodo que checa se há alguma mudança de âncora, se houver, envia a requisição ajax
  11. */
  12. function checkAnchor(){
  13.  
  14. if(currentAnchor != document.location.hash){
  15. currentAnchor = document.location.hash;
  16.  
  17. /**
  18. * Se não há nenhuma âncora ativa, a seção default é carregada
  19. */
  20. if(!currentAnchor)
  21. query = "section=home";
  22. else
  23. {
  24. /**
  25. * Cria a string de resultado. Convertendo a url: URL/#fotos&id=2 em URL/?section=fotos&id=2
  26. * */
  27. var splits = currentAnchor.substring(1).split(‘&’);
  28. var section = splits[0];
  29. delete splits[0];
  30. var params = splits.join(‘&’);
  31. var query = "section=" + section + params;
  32. }
  33. /**
  34. * Envia a requisição
  35. */
  36. $.get("callbacks.php",query, function(data){
  37. $("#bloco_principal").html(data);
  38. });
  39. }
  40. }
  41.  

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:

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

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!

]]> http://www.diegopessoa.com/lang/pt-br/2009/03/09/solving-the-problem-of-back-button-in-ajax-applications/feed 6 II Encontro PHP http://www.diegopessoa.com/lang/pt-br/2009/03/09/ii-php-meeting http://www.diegopessoa.com/lang/pt-br/2009/03/09/ii-php-meeting#comments Mon, 09 Mar 2009 23:47:28 +0000 Diego Pessoa http://www.diegopessoa.com/?p=99 Olá pessoal,

Neste sábado, dia 7 de março, aconteceu no auditório do Shopping Sebrae o II Encontro de usuários PHP da Paraíba. Quero deixar aqui meus mais sinceros parabéns para todos que fizeram parte deste evento, que, vem se tornando cada vez maior, mostrando que a comunidade PHP da Paraíba é ativa e participativa!

Para os que não puderam acompanhar o evento, estou disponibilizando abaixo os slides da minha palestra; “Aplicações Web Acessíveis”.

Aplicações Web Acessíveis

Veja as outras apresentações do evento:

http://www.slideshare.net/tag/ii-encontro-php-pb

]]> http://www.diegopessoa.com/lang/pt-br/2009/03/09/ii-php-meeting/feed 0 WCAG! WCAG! http://www.diegopessoa.com/lang/pt-br/2009/02/02/wcag-wcag http://www.diegopessoa.com/lang/pt-br/2009/02/02/wcag-wcag#comments Mon, 02 Feb 2009 03:47:30 +0000 Diego Pessoa http://www.diegopessoa.com/?p=93 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):

]]> http://www.diegopessoa.com/lang/pt-br/2009/02/02/wcag-wcag/feed 0