Diego Pessoa » Web developing http://www.diegopessoa.com Thu, 07 Jan 2010 04:22:03 +0000 http://wordpress.org/?v=2.9 pt-br hourly 1 Testando sua aplicação em todas as versões do Internet Explorer http://www.diegopessoa.com/lang/pt-br/2009/10/12/testando-sua-aplicao-em-todas-as-verses-do-internet-explorer http://www.diegopessoa.com/lang/pt-br/2009/10/12/testando-sua-aplicao-em-todas-as-verses-do-internet-explorer#comments Mon, 12 Oct 2009 21:02:29 +0000 Diego Pessoa http://www.diegopessoa.com/2009/10/12/testando-sua-aplicao-em-todas-as-verses-do-internet-explorer/ Ao desenvolver uma página para Internet ou um sistema web, o desenvlvedor deve ficar atendo a um item crucial: a compatibilidade com os navegadores, em especial o Internet Explorer. Normalmente a aplicação é exibida maravilhosamente no Firefox (navegador mais utilizado pelos desenvolvedores), enquanto no Internet Explorer surgem uma porção de erros, tanto visuais, quanto funcionais.

Esta tarefa de testes no Internet Explorer se torna árdua devido as diferenças entre cada uma de suas versões. Uma página que é exibida corretamente no Internet Explorer 7, não necessariamente aparecerá como deveria na versão 6, como também poderá aparecer diferente na versão 8. Teoricamente, bastaria abrir em um, depois testar em outro para averiguar a existência de falhas, porém, na prática, ao instalar a versão 7 do Internet explorer no Windows, a versão anterior é substituída, e assim sucessivamente.

Para solucionar este problema e auxiliar os desenvolvedores nesta difícil tarefa, existe uma ferramenta chamada IETester. Trata-se de um aplicativo capaz de simular os mecanismos das versões 5.5, 6, 7 e 8 do Internet Explorer simultaneamente. O aplicativo roda numa interface agradável – muito parecida com a do Office 2007 – onde o usuário pode abrir qualquer página e avaliar o comportamento delas em cada uma das situações. Graças ao recurso de abas, podem-se efetuar múltiplos testes simultâneamente e comparar o resultado entre eles.

image

O programa é leve e já possui tradução para o nosso idioma. Por ser uma versão beta, ainda possui algumas limitações como falhas na exibição de elementos em flash na simulação do Internet Explorer 6. Porém, não deixa de ser uma ferramenta essencial para quem desenvolve para a web.

O download do aplicativo pode ser feito no site:

http://my-debugbar.com/wiki/IETester/HomePage

]]> http://www.diegopessoa.com/lang/pt-br/2009/10/12/testando-sua-aplicao-em-todas-as-verses-do-internet-explorer/feed 0 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