Plugins do Firefox que facilitam o desenvolvimento web

Estes são os plugins do Firefox que utilizo hoje. (no Ubuntu)

Firebug

Web Developer

ColorZilla

Dica sobre o ColorZilla:
ixe os binários do site mozilla.com, e copie “por cima” dos arquivos do firefox que já vem instalado no ubuntu (isto vale tanto para a versão 1.5.* quanto para a versão 2.0 do firefox)

cd

tar zxvf [arquivo_binario_firefox].tar.gz

sudo cp ./firefox/* /usr/lib/firefox

Fonte da dica: http://revolucao.etc.br/archives/versao-definitiva-do-mozilla-firefox-20-disponivel-para-download-agora-mesmo/

Solução para problema de style.top e style.left no Firefox

Você criou uma div bonitinha dinamicamente via Javascript, setou altura e tudo mais dinamicamente, para ficar perto de um elemento qualquer na página, e funcionou no Internet Explorer mas no Firefox não? Simples, é só setar a unidade de medida. Sem a unidade de medida o Internet Explorer interpreta como px(pixels), mas o Firefox não.

Exemplo:

function CriarDiv(fComponenteQueChamou)
{
var nova_div = document.createElement('div');
var corpo = document.getElementBytagName('body);
with( nova_div )
{
style.top = fComponenteQueChamou.offsetTop+20;
style.left = fComponenteQueChamou.offsetLeft+10;
innerHTML += 'Um texto qualquer';
style.backgroundColor = 'red';
style.position = 'absolute';
}
corpo[0].appendChild(nova_div);
}

O exemplo acima funciona maravilhosamente bem no Internet Explorer, mas no Firefox não.

Para funcionar no Firefox altere as seguintes linhas:

style.top = fComponenteQueChamou.offsetTop+20+'px';
style.left = fComponenteQueChamou.offsetLeft+10+'px';


Pronto…funcionando certinho no IE e no Firefox.
Eu usei a criação de div’s dinâmicas em um recurso de busca incremental. Outro dia posto um passo-a-passo sobre como criar uma busca incremental utilizando JSON. Muito legal.

Atualização do artigo: Resolvi colocar aqui a solução de um problema que muitos desenvolvedores enfrentam. Se você utilizar offsetTop em um elemento dentro de uma table, ele retorna o top em relação ao table, e não em relação à página.
Um exemplo: Vamos imaginar que você quer posicionar uma div bem aonde o usuário clicou dentro de uma tabela:

Exemplo da tabela:

<table>
<thead>
<th>Coluna1</th>
</thead>
<tbody>
<tr>
<td onclick="PosicionaDiv(this);"> Conteudo da coluna 1</td>
</tr>
</tbody>
</table>

E a função javascript será essa:

function PosicionaDiv(fOwner)
{
var minha_div = document.getElementById('minha_div') ;
var altura_da_celula = fOwner.offsetTop;
var altura_da_tabela = fOwner.parentNode.parentNode.parentNode.offsetTop ;
minha_div.style.top = (altura_da_celula+altura_da_tabela)+'px'
}

Qualquer dúvida é só postar aí nos comentários.

MySQL – Fazendo backup e restaurando via linha de comando

Fazer backup ou restauração via linha de comando é muito útil quando necessitamos automatizar tarefas, como fazer um backup automático e logo em seguida gravar em CD ou DV, ou mesmo enviar via FTP para outro servidor.

Abaixo listo alguns exemplos de comandos, tomando como exemplo que a senha do usuário root do MySQL seja 123:

Extrair estrutura e dados de todos as bases de dados do seu mysql para o arquivo backup_banco.sql

mysqldump -u root -p123 --all-databases > backup_banco.sql

Se desejar mais detalhes durante a operação, é só adicionar o parâmetro -v no comando

mysqldump -v -u root -p123 --all-databases > backup_banco.sql

Extrair extrutura e dados de um banco somente, neste exemplo o banco banco_exemplo:

mysqldump -u root -p123  --database banco_exemplo > backup_banco.sql

E para restaurar o banco de dados extraído anteriormente, utilize:

mysql -u root -p123 -h localhost banco_exemplo < backup_banco.sql

Instalando Internet Explorer no Ubuntu 7.10 (IE4Linux)

Para quem desenvolve aplicativos web, e não pode se dar ao luxo de ignorar o comportamento de seu site/software no Microsoft Internet Explorer, recomendo a instalação do IE4Linux. Abaixo o link do artigo de Duda Nogueira explicando passo a passo a instalação.

http://planeta.ubuntubrasil.org/post/1352

Eu testei este artigo no Ubuntu 7.10 e funcionou corretamente com o instalador gráfico. No instalador modo texto não consegui instalar.

Vídeo interessante sobre acessibilidade – Seu site é acessível?

Vídeo muito interessante sobre acessibilitade – Seu site é acessível?

Fonte: pinceladasnaweb.com.br