Jonathan Lamim } jlamim

Debugbar é uma extensão do Internet Explorer com utilidades para programadores, tais como: inspetor de código, HTML, CSS, DOM, Scripts e outros componentes de páginas web.

Vamos comentar as possibilidades de uma extensão do Internet Explorer muito interessante para programadores, já que nos permite utilizar diversos recursos que resultarão em um aumento de produtividade.

Asseguro que grande parte dos leitores já saberá do que se trata, pois ela é uma extensão muito similar ao Firebug, uma extensão para o Firefox e que é muito utilizada por programadores hoje em dia.

Além de funcionar como uma extensão, ela também serve para controlar tudo o que está ocorrendo em uma página web, o estado dos elementos, seus atributos, CSS, etc. Assim como o Firebug, a extensão DebugBar também serve de apoio nas tarefas de depuração de código em páginas web.

DebugBar está repleta de utilizadades muito interessantes e bastante engenhosas. Em um primeiro contato com DebugBar parece que há muitos botões, painéis e ações estranhas que podem ser realizadas nas páginas. Mas se já temos experiência com esse tipo de extensão, então em pouco tempo exploraremos a maioria de seus recursos.

Para obter informações detalhadas e instalar a DebugBar podemos acessar o seguinte endereço:

http://www.debugbar.com

Uma vez instalada a extensão e reiniciado o Internet Explorer, teremos a nossa disposição a barra de ferramentas DebugBar. Para ativá-la podemos utilizar o menu Exibir > Barra de Ferramentas > DebugBar.

Agora veremos um menu divido em duas partes, uma barra horizontal e um painel vertical. Na barra encontraremos opções diversas, uma mais interessante que a outra, como por exemplo uma ferramenta para dar zoom na página, realçar o texto, simular a página em outras versões do Internet Explorer (necessita de outra extensão chamada IETester), etc.

A parte mais interessante aparecerá no painel vertical que aparece à esquerda, que tem um completo inspetor de código e elementos da página. Esse painel também poderá estar oculto, já que há um botão na barra horizontal para exibi-lo ou ocultá-lo.

No painel lateral poderemos encontrar excelentes opções para inspecionar todo o código que está sendo processado pelo Internet Explorer, as comunicações HTTP, scripts, um verificador de HTML, assim como informações gerais da página.

O inspetor de elementos inclui a seleção dos mesmos diretamente na página e através da árvore de elementos da página, o DOM, que é totalmente navegável. Quando temos um elemento selecionado, podemos ver seu código HTML, os estilos aplicados sobre ele e que ele herda, atributos HTML e etc.

Durante nossa navegação para a inspeção de elementos na página também teremos acesso a uma lista de todos os elementos mais importantes da página classificados por tipo, todas as imagens, todos os links, todos os scripts…

Em definitivo, uma ferramenta que vale a pena ter em mãos, pelo menos menos para nos ajudar na etapa de depuração de nossas páginas web no navegador Internet Explorer.

Depois de muito sofrer com a renderização de PNGs transparentes no IE6, resolvi buscar na internet uma solução para o problema. Mas quais seriam esses problemas?

• <img> com fundo transparente (HTML)
• background-image com transparência (CSS)

Como na internet se encontra de tudo, encontrei muita coisa que não resolvia o problema, mas achei a solução que eu procurava também.

É um simples script JavaScript (DD_belatedPNG) que permite informar, através de parâmetros em uma função, quais os elementos HTML ou CSS deverão ser renderizados com fundo transparente no IE6. O mais interessante é que nos demais browsers ele não causa nenhuma diferença, já que opera por uma condicional.

Veja abaixo como é simples utilizar este script e faça o download do arquivo .js  no final dete post.

<!--[if IE 6]>

<script src="local_do_arquivo/DD_belatedPNG.js"></script>

<script>DD_belatedPNG.fix('.nome_da_classe');</script>

<![endif]-->

A função aceita como parâmetros:

• a classe do elemento (.nome_da_classe)
• o ID do elemento (#id_do_elemento)
• identificação de um elemento dentro da estrutura do DOM (#content div)

Para evitar alguns problemas, veja abaixo algumas instruções:

1. elementos<tr> e <td> ainda não são bem renderizados pela função, o que pode causar erros. Evite usá-los.
2. <input type=”imagem”> ainda não é suportado.

Mais informações sobre o script podem ser encontradas em clicando aqui.

Download do arquivo

Os plugins são uma forma de ampliar o poder da framework, criando assim novos métodos e funcionalidades ao objeto jQuery, proporcionando aos desenvolvedores novas funcionalidades para suas páginas. Na hora de criar um plugin para a biblioteca jQuery é preciso se atentar para algumas normas básicas, normas estas que irão assegurar que o plugin funcionará como deve e possa ser utilizado por qualquer desenvolvedor em qualquer página web.

Veja abaixo algumas normas, mas que são muito importantes:

As regras acima são suficientes para o desenvolvimendot de plugins simples, embora talvez em cenários mais complexos seja necessário aplicar outras normas para garantir que tudo funcione corretamente.

Para matar a curiosidade de muitos, vamos ver um pequeno exemplo de como seria a montagem de um plugin.

Abra o seu editor de código e crie um arquivo chamado jquery.primeiroplugin.js. Em seguida digite o código abaixo:

jQuery.fn.ocultar = function(){
    this.each(function(){
        jqElem = $(this);
        jqElem.hide();
    });
    return this;
};

Está pronto o plugin. Agora basta fazer a inclusão do plugin na página e chamá-lo da seguinte forma dentro do seu arquivo de funções javascript ou na própria página onde será utilizado:

$(document).ready(function(){
    $('#ocultar').click(function(){
        $('.txtadicional').ocultar();
    });
})

Este exemplo foi o simples do simples, mas você pode fazer um plugin robusto que controle operações importantes, desde formulários de dados até a visualização e manipulação de objetos do DOM.

Continuem acompanhando os artigos, muita coisa legal está por vir.