Por se tratar ainda de um lançamento Alpha (atualmente vem o Alpha 4 juntamente ao navegador Opera 9.6), nem todas as suas funções já foram implementadas, mas vamos falar do que já existe, do que ainda está por vir e sobre suas inovações em relação ao Firebug.O Firebug trata-se apenas de um plugin criado para o Mozilla Firefox e desenvolvido de forma independente, embora alguns membros da Mozilla estejam envolvidos no desenvolvimento do projeto. Em contrapartida, o Dragonfly é uma aplicação baseada em Web utilizando JavaScript, CSS e XML, e nem preciso dizer pra vocês o quanto isso o torna flexível: ele pode ser usado para fazer a depuração no seu PC, no seu celular, na sua TV e quem sabe até na sua geladeira!

O Dragonfly é uma aplicação totalmente client-side, exceto na primeira requisição, onde ele faz o download da aplicação do servidor do Opera Software. Isso foi feito dessa forma para que o desenvolvedor esteja sempre trabalhando com a versão mais atual e sem se preocupar em ficar atualizando e fazendo instalações.

O que eu gostei mesmo foi o console do Javascript. Mesmo sendo algo que já estivesse presente no Firebug anteriormente, eu não usava o Firebug por não ter confiança na equipe do projeto (sorry), mas é ótimo poder digitar suas funções e testá-las sem precisar necessariamente colocar um botão na página para fazer isso. Veja como eu fiz, abaixo, usando a função alert(str) no console, no Opera 10.00 Alpha com Dragonfly Alpha 4:

Exemplo do console de Script do Opera Dragonfly

Apenas digite o seu comando e aperte enter, ponto e vírgula não são necessários.

Outra parte que eu gostei muito foi a aba “DOM”. Nela você pode manipular os objetos presentes atualmente na página, inclusive os que foram criados dinamicamente com AJAX! Isso era tudo o que eu poderia pedir para Deus, pois como muitos de vocês devem saber, se você simplesmente exibir o código fonte de uma página que foi modificada com AJAX, esse código será o da página inicialmente aberta, sem os objetos criados e modificados pelo AJAX. Nesta guia DOM você pode modificar os objetos da página “on-the-fly” mexendo no próprio código HTML, modificando ou simplesmente apagando ele. Quando você passa o mouse sobre o HTML elementos (camadas, elementos de formulário, etc) ele destaca o elemento na página, então você sempre sabe que elemento foi feito a partir de qual código. Veja abaixo como eu modifiquei o menu superior do blog “on-the-fly” :

Modificando menu usando a guia DOM do Opera Dragonfly

Da mesma forma, eu poderia simplesmente ter apagado o HTML e o menu teria sumido. Note que, no painel à direita do dragonfly são exibidos os estilos CSS referentes exatamente ao objeto no qual estou trabalhando (no caso, a tag ul). Sempre são mostrados os estilos referentes ao objeto selecionado, o próprio Dragonfly se ocupa em atualizar o painel de estilos pra você. Esses estilos também podem (e devem!) ser alterados “on-the-fly”. Dessa forma você pode corrigir erros na sua folha de estilo e no posicionamento de objetos com muita velocidade e facilidade, já que os elementos na página serão atualizados de imediato.

A guia Network exibe todas as requisições de página feitas pelo seu navegador, o método utilizado (GET ou POST), o tempo de duração e o status dessa requisição. Em “Error Console” você pode conferir todos os erros nas suas folhas de estilos CSS e nos arquivos de Javascript. A guia “Environment” exibe informações sobre a versão do seu navegador, SO e sobre o próprio Dragonfly. Há também uma grande variedade de configurações que podem ser modificadas na guia “Settings”.

Surpreendeu. Isso é tudo o que eu posso dizer do Dragonfly. A maior reclamação de nós, desenvolvedores web, é justamente sobre o fato de não haverem ferramentas de desenvolvimento para a nossa área e o Opera Software ouviu isso com muito carinho! Lembrando que esta é apenas uma versão Alpha do Dragonfly, e a Opera Software promete ainda muitas novidades e inovações para esse projeto que parece ter caído dos céus.

Are you a MAC? Are you a PC? Don’t matters! We are all Dragonfliers!

AllWebMenus Pro 5.1

Para quem não sabe, o AllWebMenus é uma ferramenta muito simples e intuitiva de se usar. Ele cria menus usando JavaScript e CSS que podem ser adicionados facilmente ao seu site ou sistema e *teoricamente* são compatíveis com todos os navegadores. Ele possui vários templates com cores e estilos diferentes, e você também pode criar as suas próprias imagens para o menu. o AllWebMenus é um software altamente flexível e que permite configuração detalhada de cada aspecto e item do menu.

• Website oficial do AllWebMenus
• Página de exemplos de menus

Recentemente, com o lançamento dos novos navegadores, Google Chrome e Internet Explorer 8 Beta, os menus criados com o AllWebMenus começaram a apresentar alguns problemas. No Google Chrome, por exemplo, os subitens de cada menu aparecem todos abertos no momento em que você carrega a página e só ocultam depois que você passa o mouse sobre os ítens pais. Isso foi um dos problemas consertados no AllWebMenus 5.1 Build 748, que é a versão mais recente até agora (lançada em 5 de setembro de 2008). Contudo, as versões anteriores continuam apresentando o mesmo problema.

Pra quem não pode atualizar essa versão por “diversos motivos”, como por exemplo estar usando uma versão crackeada de um lançamento anterior onde ainda não haviam essas correções, isso torna-se um problema, pois terá seu menu inutilizável nesses 2 navegadores. Para corrigir esse problema, basta atualizar a própria biblioteca do menu que fica na pasta “awdata”  que é criada logo após a compilação do menu, contendo os arquivos “awmlib0.js, awmlib1.js, … awmlib7.js,”. Para isso, apenas substitua os arquivos por esses fornecidos abaixo:

Download Biblioteca do AllWebMenus compatível com Google Chrome e Internet Explorer 8 (134)

Após substituir os arquivos, atualize o seu navegador e tudo deve estar funcionando corretamente. A empresa que desenvolve o AllWebMenus não fornece essa biblioteca separada do programa, então eu simplesmente peguei os arquivos emprestado do site deles =D

Dúvidas? Comente!