Diego Pessoa

Testando sua aplicação em todas as versões do Internet Explorer

Diego Pessoa — Mon, 12 Oct 2009 21:02:29 +0000

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.

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

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!

II Encontro PHP

Diego Pessoa — Mon, 09 Mar 2009 23:47:28 +0000

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

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):

Para quem ainda não viu…

Diego Pessoa — Mon, 02 Feb 2009 02:44:48 +0000

No último post antes da “parada”, anunciei o I Encontro PHP-PB, que aconteceu em Campina Grande no fim mês de novembro. Agora, para quem ainda não viu, estou disponibilizando os slides da minha palestra “Desenvolvendo MVC com Zend Framework”. Obrigado a todos que compareceram e aguardem, pois, o II Encontro PHP-PB vem aí, e será aqui em João Pessoa.

Desenvolvimento MVC com Zend Framework

Retornando à atividade

Diego Pessoa — Mon, 02 Feb 2009 02:40:37 +0000

Olá pessoal, após um tempo de “pausas forçadas” no Blog devido ao final do curso, transição de trabalho, entre outras coisas, agora estou de volta, e de vez! Neste ano de 2009, pretendo compartilhar com vocês minhas experiências no trabalho e na pesquis.

I Encontro PHP-PB

Diego Pessoa — Sat, 29 Nov 2008 02:19:04 +0000

Olá pessoal, neste sábado, dia 29 de novembro, estará sendo realizado em Campina Grande-PB no auditório da FACISA, o 1° Encontro PHP-PB, segue abaixo a programação.

Programação

08:00 – 09:00	Credenciamento
09:00 – 10:00	Joomla – Hugo Rabelo
10:00 – 11:00	PHP não é coisa de moleque! – Felipe Ribeiro
11:00 – 12:00	Smarty – Desacoplando lógica e layout – Marcus Antonius
12:00 – 14:00	Pausa para almoço
14:00 – 15:00	Segurança com PHP- Theoziran Lima
15:00 – 16:00	Desenvolvimento MVC com Zend Framework – Diego Pessoa
16:00 – 17:00	Desenvolvimento de interfaces ricas com Flex e PHP – Alwin Garside

Logo após a palestra irei postar a minha apresentação.

O evento também será transmitido ao vivo em: www.php-pb.net

Até logo mais!

Chegou a Tela Preta da Morte!

Diego Pessoa — Thu, 06 Nov 2008 19:28:53 +0000

Depois da clássica Tela Azul da Morte, agora, em tentativa de coibir a pirataria, a Microsoft, em atitude radical, resolveu apresentar o usuário à Tela Preta da Morte (Black Screen of Death), esta tela simplesmente é exibida todas as vezes que há a tentativa de iniciar um Windows com instalação irregular, ou seja, quem usa apenas o software pirata, não terá mais o direito nem de ligar seu PC.

Isto realmente existe, já foi colocado em prática na China e está gerando uma enorme polêmica no país, onde, estão classificando a Microsoft como “invasores” ou “maiores hackers da China”, mas, afinal, será que vale mesmo à pena combater diretamente o usuário final, no lugar de ir atrás da origem da pirataria? Isto só aumenta a raiva do usuário perante à empresa, e será que depois de uma dessa, o usuário, frustrado com a Microsoft, irá realmente adquirir o Windows Original? Na china pode até ser que sim, agora, se a Microsoft resolve um dia colocar em prática esta ação no Brasil, creio que seria uma mãozinha para apressar a disseminação e popularização (ainda mais) dos Softwares Livres.

Mas fica aqui uma curiosidade, como seriam essas tais telas pretas?

Imagine você acordar, ligar seu pc e se deparar com uma tela dessa:

Ou que tal esta?

E você? Como acha que pode ser a tela preta da morte?

Participe! Envie abaixo sua sugestão:

Insira um chat do Gtalk no seu blog

Diego Pessoa — Thu, 30 Oct 2008 00:20:25 +0000

Que tal você disponibilizar um chat no seu blog? É uma boa, afinal, você cria a possibilidade de efetuar um contato dinâmico e direto, porém, melhor ainda, se o “chat” do seu site for o bom e velho Gtalk, que você já usa no seu dia-a-dia. Como vocês podem ver, já adicionei na barra lateral o balãozinho do Gtalk, que, ao clicar, levará o usuário a uma janela, na qual ele poderá se comunicar comigo mesmo que não tenha conta ou não esteja logado no Gmail. É importante frisar que o chat só fica disponível caso o meu status no Gtalk seja “On-line”, caso eu esteja ocupado por exemplo, ele avisa que eu não posso atender no momento.

Para adicionar o Gtalk no seu Blog é bem simples, acesse o site:
http://www.google.com/talk/service/badge/New

Depois é só configurar a melhor forma de exibição, a seu gosto, e copiar o código fonte, colocando-o no seu Blog.

TinEye – Procure por imagens similares na web

Diego Pessoa — Wed, 29 Oct 2008 23:48:06 +0000

Quantas vezes você achou uma foto muito legal na web, mas, ela está com uma qualidade péssima, num tamanho muito pequeno, ou alguém colocou alguma logomarca sobreposta a ela? Seus problemas acabaram! Chegou o TinEye, mecanismo de busca de imagens que é capaz de procurar fotografias parecidas.

Site oficial – tineye.com
Façam bom proveito: