rodrigoaguas.com

Hello World em JSF

Rodrigo Aguas — Tue, 01 Jun 2010 14:45:47 +0000

Diante da dificuldade de um amigo em encontrar na internet um tutorial que explicasse corretamente como desenvolver um simples “Hello World” utilizando JSF, ele resolveu me enviar o exemplo dele para que fosse publicado aqui. Obrigado Sérgio!

Nesse artigo, focarei no desenvolvimento do exemplo e não me aprofundarei em explicações sobre a utilização do JSF, para isso aconselho a leitura do capítulo sobre JSF do tutorial Java EE da Sun.

O JSF é um framework que roda no lado servidor da aplicação web e disponibiliza mecanismos ao desenvolvedor para facilitar, entre outros, o tratamento de eventos, validações no servidor, conversão de dados, navegação entre páginas e internacionalização da aplicação.

O funcionamento mais simples a ser entendido do JSF é que ele vincula os componentes de tela aos dados no lado servidor. De forma que ao ser digitado um texto numa caixa da tela, aquele texto será “automaticamente” copiado para um atributo da sua classe controladora, chamada de backing bean. Assim como os itens de um elemento select do html podem ser gerados com base em uma lista que está armazenada no seu backing bean. Para possibilitar esse funcionamento precisamos utilizar as tags JSF no lugar das tags HTML em nossas páginas, o que não traz grandes dificuldades já que existe claramente uma relação de um-para-um entre elas.

Vou parar as explicações por aqui para irmos para o lado prático. Antes de mais nada, é necessário criar um projeto JSF para utilizarmos. Além disso, criaremos algumas páginas JSP, um backing bean para controlar nossa tela, regras de navegação e um arquivo de propriedades com os textos utilizados. Segue o passo-a-passo para desenvolver o Hello World em JSF:

1- Criar um arquivo “index.jsp” na pasta “WebContent” com o conteúdo abaixo. Toda aplicação JSF precisa de um página inicial que redirecione para uma url do jsf.

1
2
3
4
5

<html>
<body>
="/formulario.jsf" />
</body>
</html>

2- Criar a classe “PessoaBean” abaixo no pacote “helloworld”. Essa classe será o nosso backing bean.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

package helloworld;

public class PessoaBean {

private String nome = "";

public String getNome() {
return nome;
}

public void setNome(String nome) {
this.nome = nome;
}
}

3- Acrescentar no arquivo “faces-config.xml” o seguinte elemento. Essa é a declaração do nosso backing bean. Nas telas faremos referência a ele utilizando o nome “pessoaBean” que demos ao mesmo. Também definimos que o escopo dele será de requisição.

1
2
3
4
5

pessoaBean>

helloworld.PessoaBean>

request>
>

4- Criar a página “formulario.jsp” na pasta “WebContent” com o conteúdo abaixo. Nela utilizamos a tag loadBundle para carregar um arquivo de propriedades com as mensagens a serem exibidas ao usuário e utilizamos a variável “msg” para referenciar tal arquivo no conteúdo da página. As outras tags utilizadas servem para exibir texto, criar uma caixa de entrada de texto e criar um botão.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

="helloworld.mensagens" var="msg" />

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>rodrigoaguas.com</title>
</head>
<body>

<h1>value="#{msg.titulo}" /></h1>

value="#{msg.pergunta}" />
value="#{pessoaBean.nome}" />
action="bemvindo" value="#{msg.botao}" />
</h:form>

</f:view>
</body>
</html>

5- Criar o arquivo “mensagens.properties” no pacote “helloworld” com o seguinte conteúdo:

1
2
3
4

pergunta = Qual é o seu nome?
botao = Fale Comigo
titulo = Olá Mundo!
boasvindas = Seja bem vindo ao jsf

6- Para fazermos o usuário ser encaminhado para outra página quando apertar o botão, precisamos acrescentar a regra de navegação abaixo no “faces-config.xml”.

1
2
3
4
5
6
7

/formulario.jsp>

bemvindo>

/saudacoes.jsp>
>
>

Assim, nosso arquivo “faces-config.xml” completo fica da seguinte forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

version="1.0" encoding="UTF-8"?>

version="1.2" xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">

pessoaBean>

helloworld.PessoaBean>

request>
>

/formulario.jsp>

bemvindo>

/saudacoes.jsp>
>
>

>

7- Nosso último passo é criar a página “saudacoes.jsp” na pasta “WebContent”. Essa página será exibida após o visitante ter digitado o nome e apertado o botão no formulário da outra página.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

="helloworld.mensagens" var="msg" />

<html>
<head>
<title>rodrigoaguas.com</title>
</head>
<body>

<h3>
value="#{msg.boasvindas}" />,
value="#{pessoaBean.nome}" />!
</h3>

</f:view>
</body>
</html>

Pronto! Agora basta dar deploy em um servidor. Lembrando que o eclipse tem integração com o Tomcat e o JBoss, bastando para dar deploy neles clicar com o botão direito do mouse na pasta do projeto, depois ir em “Run As”, depois “Run on Server”, selecionar o servidor e clicar em “Finish”.

Depois de feito o deploy, acesse http://localhost:8080/hello/ para ver sua aplicação funcionando.

Tutorial básico de JQuery

Rodrigo Aguas — Sat, 01 May 2010 12:30:18 +0000

O JQuery é uma biblioteca Javascript que simplifica extremamente a utilização de ajax, animações, tratamento de eventos e manipulação de elementos html em sites. A forma como se utiliza JQuery é um pouco diferente do que estamos acostumados no Javascript, mas essa mudança trouxe uma simplicidade incrível e compensa qualquer esforço necessário em seu aprendizado.

Uma instrução JQuery é composta por um seletor e um conjunto de operações a serem executadas nos elementos encontrados baseando-se no seletor. O seletor segue uma sintaxe muito parecida com a do CSS, acrescentando a esta alguns recursos. As operações disponíveis são tão variadas que é difícil conhecer todas, alguns exemplos são: acrescentar classe, alterar valor de atributo, replicar elemento, esvaziar conteúdo de um elemento, remover elementos da página, aplicar animações (como fade in e fade out), fazer requisições ajax, etc, etc, etc… Uma lista completa da API pode ser encontrada na documentação do JQuery. O trecho de código abaixo não é funcional, tem como objetivo apenas ilustrar as explicações dadas.

1	$( SELETOR ).operacao();

A palavra SELETOR está representando uma expressão utilizada para encontrar o conjunto de elementos da página que receberão a operação em questão. Ainda ilustrativamente, é comum o uso abaixo, quando são utilizadas diversas operações em um mesmo conjunto de elementos selecionados.

1	$( SELETOR ).operacao1().operacao2().operacao3();

Antes de colocar as mão na massa é necessário importar o arquivo do JQuery colocando o seguinte código no elemento head da sua página:

1	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Nosso primeiro exemplo não é muito interessante, mas explicará uma prática necessária na maioria dos códigos JQuery, e, como não poderia deixar de ser, será o famoso “Hello World”.

1
2
3

$(document).ready( function() {
window.alert("Ola Mundo!");
});

Você deve estar se perguntando que raios de Hello World complicado é esse e lhe dou razão, mas logo logo ficará mais claro. O que anteriormente chamei de seletor é sempre passado como parametro da função $, nesse caso estamos passando ‘document’, ou seja o elemento selecionado é o documento html. A operação utilizada é a ‘ready’, que serve para definir uma função a ser executada quando o documento está pronto (acabou de ser carregado, processado e exibido pelo navegador). Então, passamos como parametro da operação ‘ready’ uma função que exibirá uma janela alert. Os códigos JQuery a serem executados quando a página for carregada devem estar sempre dentro dessa função no código anterior, ou seja:

1
2
3

$(document).ready( function() {
// Código a ser executado na carga da página aqui!
});

Agora estamos prontos para exemplos mais interessantes! No próximo exemplo colocaremos uma tabela com as cores de fundo das linhas alternadas, nos basearemos no seguinte trecho de código html:

1
2
3
4
5
6
7

<table id="listrada">
<tr><td>Nome:</td><td>Joãozinho</td><\tr>
<tr><td>Idade:</td><td>10</td><\tr>
<tr><td>Sexo:</td><td>Masculino</td><\tr>
<tr><td>Pai:</td><td>Desconhecido</td><\tr>
<tr><td>Mae:</td><td>Maria</td><\tr>
</table>

A lógica que utilizaremos é selecionar primeiro os filhos do elemento identificado por ‘listrada’ que estejam nas posições pares e definir uma cor de fundo azul para eles:

1	$("#listrada>*:even").css("background-color", "#0000FF");

Em seguida selecionamos os filhos do elemento identificado por ‘listrada’ que estejam nas posições impares e definimos uma cor de fundo verde para os mesmos:

1	$("#listrada>*:odd").css("background-color", "#00FF00");

Como não podemos esquecer do nosso primeiro exemplo, a versão final do código para a tabela listrada fica assim:

1
2
3
4

$(document).ready( function() {
$("#listrada>*:even").css("background-color", "#0000FF");
$("#listrada>*:odd").css("background-color", "#00FF00");
});

Se preferirmos não colocar estilo diretamente no Javascript, podemos definir estilos no css para as linhas usando classes e alterar o nosso código da seguinte maneira:

1
2
3
4

$(document).ready( function() {
$("#listrada>*:even").addClass("linhaAzul");
$("#listrada>*:odd").addClass("linhaVerde");
});

O próximo exemplo aprofunda as explicações sobre manipulação de eventos dos elementos. Colocaremos em todos os links de uma página qualquer uma janela alert sendo exibida ao usuário quando o mesmo clica sobre o link.

1
2
3
4
5

$(document).ready( function() {
$("a").click( function() {
window.alert("Atenção: você está saindo do site rodrigoaguas.com.");
});
});

O seletor desse exemplo é bem simples, pesquisa por qualquer elemento A do documento html. Então, adiciona aos eventos onclick de todos os elementos selecionados uma chamada para a função que exibe a janela alert. Agora vamos melhorar o nosso código para impedir que a ação padrão do evento seja executada, para isso acrescentaremos um parametro à nossa função para receber um objeto que representa o evento.

1
2
3
4
5
6

$(document).ready( function() {
$("a").click( function(evento) {
window.alert("Atenção: você está tentando sair do site rodrigoaguas.com, mas não vai conseguir.");
evento.preventDefault();
});
});

Depois de ser impedido de sair do site, queremos que o nosso usuário fique impedido de clicar novamente no link, para isso faremos uma animação de Fade Out no link clicado e ele deixará de ser exibido. Precisaremos utilizar o seletor ‘this’ que representa o elemento onde o evento foi disparado.

1
2
3
4
5
6
7

$(document).ready( function() {
$("a").click( function(evento) {
window.alert("Atenção: você está tentando sair do site rodrigoaguas.com, mas não vai conseguir.");
$(this).fadeOut();
evento.preventDefault();
});
});

Nesse tutorial foram tratados os aspectos básicos do JQuery como importação do arquivo da biblioteca, seletores, alteração de estilo, acrescentar classes, manipulação de eventos e animações. Tratarei de Ajax posteriormente em outro tutorial. Abraços!

Configurando Facelets em projeto JSF no eclipse

Rodrigo Aguas — Thu, 11 Feb 2010 01:42:26 +0000

Após termos nosso projeto JavaServer Faces criado no eclipse, iremos configurar o facelets no mesmo. O facelets é um framework de templating feito específicamente para projetos JSF. Ele se integra de tal forma com o ciclo de vida do jsf que resulta numa melhora da performance significativa em comparação ao uso de JSP. Além disso, o facelets funciona em todos os web containers amplamente conhecidos, não impondo restrição alguma ao projeto.

1- Faça o download do facelets na versão 1.1.15, pois a versão 1.2 não é estável (e parece que não ficará tão cedo);

2- Extraia o arquivo “jsf-facelets.jar” para dentro da pasta “WebContent\WEB-INF\lib” do seu projeto JSF. Como estamos utilizando o JBoss nesse exemplo, não é necessário extrair também os outros arquivos JAR da pasta lib do facelets, pois são dependências de bibliotecas que já existem no JBoss;

3- Não basta apenas acrescentarmos a biblioteca do facelets em nosso projeto, devemos configurar algumas outras coisas para que o JSF se integre ao facelets. Acrescente as seguintes linhas ao arquivo faces-config.xml (encontrado em “WebContent\WEB-INF”):

1
2
3

com.sun.facelets.FaceletViewHandler>
>

4- E no mesmo local devemos incluir as seguintes linhas ao arquivo Web.xml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

javax.faces.DEFAULT_SUFFIX>

.htm>
>

facelets.DEVELOPMENT>

true>
>

facelets.SKIP_COMMENTS>

true>
>

com.sun.faces.validateXml>

true>
>

No primeiro parâmetro, indicamos que os arquivos físicos que utilizaremos para a apresentação tem extensão .htm.
Dessa forma, quando o facelets receber uma requisição ao endereço “bemvindo.jsf” buscará pelo arquivo “bemvindo.htm”.
Na prática, não importa a extensão escolhida, costuma-se deixar htm ou html apenas por questões históricas.

O segundo parâmetro indica ao facelets que estamos em ambiente de desenvolvimento, dessa forma ele exibe possíveis erros em uma tela amigável ao desenvolvedor, mas que não deve ser exibida futuramente ao usuário final.

O terceiro parâmetro determina ao facelets que os comentários nos códigos HTML devem ser tratados como comentários. Pois o facelets por padrão não ignora comentários () nos arquivos de apresentação.

O quarto parâmetro faz com que o facelets valide o código html das telas, só permitindo que seja utilizado XHTML.

Pronto! Dessa forma o facelets já está pronto para ser executado em seu projeto.

Configurando Projeto JSF no Eclipse

Rodrigo Aguas — Fri, 18 Dec 2009 21:26:23 +0000

Este tutorial explicará como criar um projeto Java para web utilizando JavaServer Faces (JSF) no Eclipse. É um passo-a-passo de todas as configurações necessárias para ter um projeto pronto para iniciar o desenvolvimento de sistemas web.

Os softwares utilizados serão o ambiente de desenvolvimento integrado Eclipse e o servidor de aplicação JBoss. Basearei as explicações nas versões mais recentes desses softwares no momento em que escrevo este tutorial, que são Eclipse Galileo SR1 e JBoss 5.1.0.GA, mas facilmente as explicações aqui lidas podem ser adaptadas às outras versões. A instalação dos mesmos não será tratada neste tutorial, então instale-os antes de prosseguir na leitura.

Então vamos à criação do projeto no Eclipse:

Clique com o botão direito do mouse no interior da view “Project Explorer”;
Vá na opção “New”;
Clique em “Dynamic Web Project”, uma janela se abrir;
Dê um nome para o projeto no campo “Project Name”;
Na caixa “Target runtime”, clique no botão “New”, abrirá uma outra janela para configuração do servidor no Eclipse;
Selecione na pasta “JBoss” a versão “JBoss v5.0″;
Clique no botão “Next”;
Clique no botão “Browser” e selecione o local onde foi instalado o JBoss em seu computador;
Clique em “Finish” e voltaremos para a janela de criação do projeto;
Confirme do campo “Dynamic web module version” estar selecionada a opção “2.5″;
Em “Configuration”, selecione a opção “JavaServer Faces v1.2 Project”;
Clique no botão “Next”, abrirá uma tela que não faremos nenhuma alteração;
Clique no botão “Next” novamente;
Confirme do marcador “Generate web.xml deployment descriptor” estar selecionado;
Clique no botão “Next” mais uma vez;
Clique no botão “Finish”para efetivamente criar o projeto;

Pronto! Você está com seu projeto web criado. No próximo tutorial ensinarei a instalar o Facelets, pois aplicações sérias em JSF usam Facelets! Não percam!

Abraço!

Criação de Tabelas e Relacionamentos com SQL

Rodrigo Aguas — Fri, 17 Apr 2009 15:50:49 +0000

Já escrevi sobre a criação de relacionamentos no MySQL anteriormente, então não serei repetitivo em falar sobre as mesmas coisas, mas aconselho a leitura do artigo anterior para os que não tiverem intimidade com relacionamentos de banco de dados.

Neste me concentrarei em mostrar a criação de relacionamentos utilizando apenas comandos SQL, não que isso dispense a utilização de uma interface com o banco de dados para a execução dos mesmos. Para isso, podemos utilizar além do próprio MySQL Query Browser, o phpMyAdmin ou outro programa de sua preferência que permita a execução de códigos SQL na base de dados.

Basearei minhas explicações em exemplos para a criação de um banco de dados para uma “biblioteca” (inventado apenas para nos servir de exemplo, então longe de ser completo o suficiente para uma aplicação real). Iniciaremos, criando a tabela de autores, contendo o nome do mesmo e um identificador:

1
2
3
4

CREATE TABLE autor (
id int,
nome varchar
)

No código anterior contemplamos apenas a estrutura da tabela, ignorando a definição da chave primária e dos campos que não aceitam valores nulos. Então, colocaremos o id como chave primária (primary key, ou apenas pk) e auto incrementada, para que o seu valor seja gerado pelo próprio MySQL. Além disso, o campo nome passa a não aceitar valores nulos, pois o padrão é que qualquer coluna aceite valores nulos. Existem outras sintaxes para esse comando, mas mostrarei apenas a que considero mais simples (mas não possibilita a criação de chaves compostas).

1
2
3
4

CREATE TABLE autor (
id int NOT NULL AUTO_INCREMENT PRIMARY KEY,
nome varchar NOT NULL
)

Então, nossa tabela de autores está pronta. Criaremos agora a tabela de livros. Para simplificar, considerarei que um livro será escrito por apenas um autor, assim teremos que cada livro fará referência a exato um registro da tabela de autores. Armazenaremos, além do autor, apenas ISBN, título e edição do livro.

1
2
3
4
5
6

CREATE TABLE livro (
id int NOT NULL AUTO_INCREMENT PRIMARY KEY,
isbn int NOT NULL,
titulo varchar NOT NULL,
edicao int NOT NULL
)

Já que o ISBN é um identificador único para as edições dos livros, poderíamos utilizá-lo como chave primária, mas não faremos isso, apenas não aceitaremos valores repetidos no ISBN, para isso utilizaremos unique nessa coluna. Além disso, temos ainda que criar uma coluna para o relacionamento com a tabela de autores e constraint de chave estrangeira (foreign key, ou apenas fk).

1
2
3
4
5
6
7
8
9

CREATE TABLE livro (
id int NOT NULL AUTO_INCREMENT PRIMARY KEY,
isbn int NOT NULL UNIQUE,
titulo varchar NOT NULL,
edicao int NOT NULL,
autor int NOT NULL
constraint fk_autor FOREIGN KEY (id) REFERENCES autor(id) ON DELETE restrict ON UPDATE restrict
)
engine = InnoDB

Não comentei sobre a última linha do comando, ela determina o tipo de tabela que o MySQL criará. É necessário acrescentá-la por causa da foreign key, que não é suportada por qualquer tipo de tabela.

A criação das tabelas de autor e livro já foram suficientes para mostrar o básico da sintaxe de criação de tabela e já temos um (mini) banco de dados funcionando. Existem muitos detalhes que não foram comentados nesse artigo, quem quiser pode encontrá-los na documentação do MySQL.

Espero ter respondido aos pedidos feitos nos comentários do outro artigo. Abraços!

Explorar nichos na web? Será?

Rodrigo Aguas — Thu, 15 May 2008 02:47:50 +0000

O Google tempos atrás vem inserindo (lentamente) uma nova versão do Gmail, aos poucos os usuários foram recebendo o acesso à ela. Uma das justificativas desse método é que caso algum problema seja encontrado, não terá atingido todos os usuários do serviço, não queimando a imagem da empresa e nem nos prejudicando. Muito interessante.

Mas eu não sei se o Google ainda não percebeu ou está ignorando que essa nova versão do Gmail TRAVA o Firefox a todo momento. Seria isso uma falha da Mozilla no desenvolvimento do Firefox? A culpa já foi até posta no Firebug (o próprio Gmail lhe avisa), mas mesmo com o Firebug desabilitado o problema continua.

Mas calma! Basta clicar em “Versão Mais Antiga” e utilizaremos o velho e bom Gmail! Mas não se empolgue, essa configuração não fica salva no computador, então toda vez que formos ler emails teremos que clicar no “Versão Mais Antiga”. Provavelmente, o Google não deixará tal versão disponível por muito tempo aos usuários, só espero que até lá resolvam o problema do Firefox.

Além disso, os usuários do ainda popular Internet Explorer 6 estão também excluídos da utilização dessa recente atualização. Será que os computadores deles não aguentariam o processamento necessário? É.. acho que o meu também não deve estar aguentando…

Sendo o Google a empresa símbolo da “Web 2.0″, estaria ela dando um passo atrás e focando nas grandes massas? A minoria que fique com o Gmail 1.0 mesmo!

Presente da Nielsen Norman Group: guia de acessibilidade

Rodrigo Aguas — Wed, 09 Jan 2008 01:32:50 +0000

A Nielsen Norman Group está disponibilizando gratuitamente um relatório sobre acessibilidade na Web denominado “Beyond ALT Text: Making the Web Easy to Use for Users With Disabilities”. O download do mesmo está disponível por tempo indeterminado como presente de final de ano. Nele existe um guia de boas práticas abordando muitos aspectos interessantes da acessibilidade, além de falar das tecnologias assistivas, leitores de telas e etc. Aproveitem enquanto é free!

Estatísticas da Mega-sena, ficaremos ricos?

Rodrigo Aguas — Tue, 08 Jan 2008 03:47:25 +0000

Estava cansado de só dar vexame jogando na Mega-sena, então resolvi fazer algo para aumentar minhas chances de lucro. Como sei que meus milhares de leitores (rsrsrs) vão se lembrar de mim quando ganharem, estou divulgando esses gráficos/análises dos resultados da Mega-sena durante toda a história dela. Acessando os gráficos vocês terão essa ótima oportunidade de grandes lucros! Huahauhau. Afinal, a esperança é a última que morre! E eu continuo tentando ganhar meus milhõeszinhos… Abraços!

Atualização do passo-a-passo de como criar relacionamentos no MySQL

Rodrigo Aguas — Tue, 08 Jan 2008 03:31:48 +0000

Observando o grande número de acessos ao artigo de criação de relacionamentos no MySQL, resolvi dar uma melhorada nele acrescentando imagens das telas dos passos indicando a posição de cada ação necessária. Acho que vale a pena aos que se interessam sobre o assunto dar uma olhada. Abraços!

As melhores extensões do Firefox para desenvolvedores Web

Rodrigo Aguas — Sat, 01 Dec 2007 21:30:21 +0000

Nesse artigo indicarei as melhores extensões (ao meu ver) do Firefox para ajudar o trabalho dos desenvolvedores de sites.

Acho muito boa essa abertura que a Mozilla dá aos usuários para desenvolverem novas funcionalidades para o Firefox. O navegador sai ganhando com a conquista de mais usuários e a fidelização dos usuários de certos nichos que as extensões propiciam funcionalidades não aplicáveis a um browser feito para atender o grande público.

Na página de extensões da Mozilla existe uma quantidade enorme de extensões e exatamente por isso resolvi fazer essa seleção das melhores. Então, vamos lá…

A lista abaixo está em ordem alfabética, não há relação alguma com minhas preferências.

ColorZilla

Adiciona uma ferramenta “conta-gotas” na barra de status do Firefox, com ela você descobre o código da cor no ponto em que você apontar o mouse no site.

CSSViewer

Mostra as regras de CSS aplicadas a um determinado elemento que você aponte com o mouse. Muito útil quando você identifica um comportamento estranho e precisa descobrir o que está ocasionando-o ou por questões de aprendizado para entender como foi feito um certo efeito.

Firebug

Essa é uma extensão com funcionalidades que eu não consigo entender muito bem, mas uma única que eu entendo me é extremamente útil, o debugger de Javascript. Um ícone na barra de status do Firefox lhe mostra se ocorreu algum erro no Javascript e lhe mostra onde, lhe permitindo ir direto ao erro.

Fireftp

Tem algo mais necessário do que um cliente ftp para quem trabalho com web? Acho que só conhecimento mesmo (filosofei ahuhuahua). Então, adiciona um cliente ftp ao seu Firefox com controle de contas e tudo mais que nós precisamos. Tah bom… eu prefiro o Filezilla que está sempre no meu pendrive, mas muita gente não troca o Fireftp por nada, então seria injusto não citá-lo.

HTML Validator

Faz a validação do HTML dos sites que são acessados, mostrando warnings e erros, se existirem, acompanhados de explicação e sugestões de como solucionar o problema. Existem nele 3 métodos de validação, o mais rigido é o “Serial” e aos que forem mais flexíveis aconselho o “Tidy”.

IE Tab

Permite que o Firefox exiba sites utilizando a engine de renderização do Internet Explorer, servindo para testar a renderização de CSS no IE sem sair do Firefox. Não funciona no linux, já que não pode haver um Internet Explorer instalado.

JSView

Acrescenta ao menu e à barra de status opções para visualização dos arquivos Javascript e CSS externos, abrindo-os no visualizador de código-fonte do firefox.

LinkChecker

Sendo sincero, nunca utilizei, mas acho a idéia interessante e bastante útil, principalmente naqueles momentos em que você desenvolve algumas páginas correndo e quer ter certeza que não esqueceu de nenhuma. Ah.. a proposta da extensão é verificar os links de uma página atrás de possíveis links quebrados.

MeasureIt

Clicando no ícone que ele acrescenta na barra de status do seu firefox, esta extensão lhe permite medir (em pixels) uma área retangular do site selecionada pelo mouse, lhe informando a largura e a altura separadamente.

Page Validator

Aos que pensaram que estou colocando duas extensões com o mesmo fim, não, isso vai acontecer logo abaixo, mas nesse caso a HTML Validator não funciona exatamente igual a essa. A primeira faz a validação no seu próprio computador, enquanto esta encaminha uma requisição ao validador da W3C, que pode acusar alguns erros antes não acusados.

Save as Image ou o ScreenGrab!

Basicamente servem para gerar arquivos com a screenshot do site que você estiver acessando. Utilizo para guardar layouts que eu ache interessantes em minha galeria. Infelizmente, eles não se dão muito bem com Flash. Eu não gosto de Flash mesmo. =)

Web Developer

Por irônia do destino, esta extensão está em último, mas como dizem que quem ri por último, ri melhor… poisé. Minha vida não seria a mesma sem essa extensão. hahuhuhuhua. Ela adiciona uma barra de ferramentas ao Firefox com diversas funcionalidades (muitas mesmo). Então, só vou listar algumas: desabilitar java, javascript, bloqueador de pop-ups, cache, redirecionamentos, CSS e imagens, limpar cookies e visualizá-los, escolher Media Type do CSS que será carregado, exibir borda, IDs e diversas outras informações nos elementos da página e redimensionar a janela do Firefox para certas resoluções.

É isso pessoal, espero que esse artigo lhes seja útil e quem tiver outras sugestões é só comentar. Agora com as férias (nem tão férias assim) chegando, acho que terei mais tempo de escrever. Abraços!