O objetivo desse tutorial é indicar passo-a-passo como dar deploy de uma aplicação Ruby on Rails no Heroku utilizando o mecanismo de repositório remoto do Git. Antes de iniciarmos, você precisa fazer um cadastro no Heroku.

Considerarei que você tem seu ambiente Ruby on Rails configurado e, dessa forma, você só precisa instalar a gem do Heroku.

Depois disso, vá para a pasta do seu projeto existente ou crie um novo projeto.

O deploy para o heroku é feito dando push para um repositório remoto do Git, então precisamos antes criar um repositório local do Git para o projeto. Estando na pasta do projeto, execute:

Para adicionar os arquivos do projeto ao controle de versão:

E depois dar commit:

Antes de começarmos a interagir com o Heroku, precisamos criar uma chave SSH, executando o seguinte comando:

Agora, vamos criar uma aplicação no Heroku. Após executar o comando abaixo, serão solicitados o seu email e a senha utilizados no cadastro do Heroku.

A aplicação é criada com um nome aleatório, então provavelmente você gostará de renomear a aplicação usando:

Antes de darmos deploy da aplicação, precisamos adicionar nossa chave SSH no Heroku com o seguinte comando:

Feito isso, enfim podemos dar deploy de nossa aplicação:

Caso o comando acima dê o erro “Agent admitted failure to sign using the key. Permission denied (publickey). fatal: The remote end hung up unexpectedly”, execute o seguinte comando e tente o anterior novamente:

Nesse momento, basta acessar o endereço http://[nome da sua aplicação].heroku.com/ para visitá-la. Infelizmente, ainda precisamos fazer algumas configurações relativas à banco de dados para seguir desenvolvendo nossas aplicações. O Heroku disponibiliza automaticamente um banco de dados PostgreSQL para cada aplicação, então precisamos acrescentar ao nosso arquivo Gemfile a dependência da gem ‘pg’ para conexão com esse banco de dados. Então, se for utilizar o PostgreSQL em todos os ambientes do seu projeto, altere a linha abaixo pela seguinte.

Instale o banco PostgreSQL na máquina local:

Depois instale a gem do PostgreSQL:

Caso receba o erro “ERROR: Error installing pg: ERROR: Failed to build gem native extension.” ao executar o comando acima, tente instalar os seguintes pacotes e volte a rodar o comando anterior:

E por último atualize o seu projeto:

Mas se preferir utilizar outro banco localmente, você precisará configurar diferentes gems para cada ambiente da seguinte forma:

E quando for atualizar seu projeto deverá utilizar o seguinte comando:

Pronto! Agora sua aplicação está pronta para ser executada no Heroku. A cada deploy novo que for dar é necessário executar o comando git push anteriormente utilizado e depois para executar as migrates no banco do Heroku é só usar:

Se tiver algum problema na aplicação, basta executar o comando abaixo para acessar os logs do servidor:

Para verificar o estado dos processos no servidor, use:

E caso precise executar algum código no ambiente Rails do servidor, executa um terminal remoto do Rails da seguinte forma:

“RVM é uma ferramenta de linha de comando que permite a você facilmente instalar, gerenciar e trabalhar com múltiplos ambientes de interpretadores Ruby e conjuntos de gems.”

Para a instalação do RVM, precisaremos da ferramenta curl. Como essa não vem instalada, instalaremos executando o seguinte comando em um Terminal:

Agora podemos instalar o RVM executando:

Terminada a instalação, usaremos o comando abaixo para acrescentar ao nosso arquivo .bashrc a carga do RVM:

Feito isso, feche o terminal atual e abra um novo para verificarmos se a instalação foi feita corretamente. Execute o seguinte comando:

Deverá aparecer uma mensagem parecida com a abaixo para confirmar o sucesso da instalação. Caso contrário, algo não deu certo na instalação do RVM.

Antes de seguir para a instalação do Ruby 1.9.3, devemos instalar alguns pré-requisitos informados pelo seguinte comando:

Ou seja, devemos executar a seguinte instalação de pacotes:

Agora chegou o momento de instalarmos o Ruby 1.9.3, execute o comando abaixo e aguarde os downloads e o fim da instalação, que pode demorar um pouco.

Depois da instalação, devemos informar ao RVM que essa será a versão do Ruby a ser utilizada por padrão.

Podemos verificar a eficácia do comando anterior analisando a saída do seguinte comando:

A última instalação que precisamos é da própria gem do Rails:

Para finalizar, criaremos um projeto utilizando o banco de dados sqlite3 (que é o padrão do Rails). Abra um console e vá até a pasta onde deseja criar o projeto, executando o comando abaixo será criada uma pasta com o nome do projeto e toda a estrutura de um projeto Rails dentro.

Caso queira utilizar bancos de dados MySQL em seu projeto, execute os comandos abaixo para instalar o servidor, o cliente e a gem MySQL. Será solicitada uma senha de acesso para o usuário root do banco.

A criação do projeto utilizando MySQL deverá ser feita com o seguinte comando:

Entretanto, as pessoas utilizam o Google Analytics quase como se fosse apenas um contador de acesso um pouco mais avançado, onde você pode selecionar um intervalo de tempo e ver os acessos nele ou saber algumas informações a mais dos usuários, como navegador de internet, resolução de tela e etc.

Vou explicar nesse artigo como utilizar o Google Analytics para mensurar o retorno das suas campanhas de marketing online, ou seja, ter métricas eficazes sobre os acessos gerados por cada esforço de marketing. Além disso, possibilitar a comparação entre diferentes abordagens, chamado de teste A/B, e tomar decisões de marketing de forma a ter o melhor retorno de visitantes nas campanhas online baseando-se em números e não na intuição.

Tudo que veremos nesse artigo será relacionado à tela de Campanhas do Google Analytics, que fica dentro do item Origens em Fontes de Tráfego no menu lateral. Por enquanto essa tela estará vazia se você nunca utilizou campanhas, como a que segue abaixo. Mas ao fim já teremos dados de uma divulgação no Twitter e Facebook. Então vamos lá!

A estratégia utilizada para esse tipo de acompanhamento é introduzir em todos os links das campanhas de marketing online parâmetros com informações extras que serão utilizadas pelo Google Analytics para coletar e monitorar as estatísticas desejadas por nós. Esses parâmetros são: utm_medium, utm_source, utm_campaign e utm_content.

O utm_campaign define a qual campanha de marketing o link que estamos criando se refere. Uma campanha pode envolver diversas mídias e fontes de tráfego, como uma conjunto de propagandas em alguns sites, promoções em redes sociais e envío de newsletters, tudo fazendo parte de um único esforço de marketing. Os valores para utm_campaign são definidos por nós, mas aconselha-se a inclusão de algum formato de data para facilitar na análise dos relatórios. Podemos citar como exemplo: divulgacao-artigo-2011-11-20, newsletter-2011-12-07, twittada-2011-10-21, blog-rodrigoaguas e promocao-natal-2011.

O utm_medium é utilizado para definir a mídia utilizada. Ou seja, qual é o meio de comunicação ou mecanismo que estamos utilizando para atingir o nosso público e que conterá aquele link que estamos produzindo. Os valores podem ser definidos por nós mesmos, lembrando que eles serão exibidos nos relatórios. Alguns exemplos de utm_medium podem ser: email, banner, cpc (pay per click) e socialnetwork (compartilhamento em redes sociais).

O utm_source serve para definirmos exatamente de qual fonte pertence aquele tráfego, ou seja, considerando uma campanha online, em qual domínio aquele link foi publicado. Também podemos interpretar o utm_source como “quem” gerou aquele tráfego. Os valores também são definidos por nós mesmos. Exemplos de valores de utm_source podem ser: newsletter, twitter, facebook e rodrigoaguas.com.

O utm_content é um parâmetro opcional, mas muito interessante para experimentarmos estratégias ou abordagens distintas para uma mesma propaganda. Por exemplo, pequenas diferenças no texto enviado ou tamanho e posicionamento do banner. Essa técnica é chamada de teste A/B e tem como objetivo definir qual abordagem de propaganda dá melhor retorno. Seguem alguns exemplos: img-vertical-direita, banner-600×200, pergunta-retorica, afirmacao-positivista, texto-colorido e link-rodape.

Vamos então ao exemplo prático! Criarei uma campanha de divulgação no Twitter e no Facebook do último artigo desse blog, sobre virtualização de máquinas Ubuntu. O link original do artigo é http://www.rodrigoaguas.com/blog/virtualizacao-na-pratica-com-vmware-e-ubuntu/, mas tenho que acrescentar os parâmetros explicados acima para que o Google Analytics receba as informações sobre essa campanha de marketing. Utilizarei para divulgação no Twitter os seguintes valores:
Origem da campanha (utm_source): twitter
Mídia da campanha (utm_medium): social
Nome da campanha (utm_campaign): post-virtualizacao-ubuntu-2011-10-11

Então, o link a ser divulgado no Twitter fica:
http://www.rodrigoaguas.com/blog/virtualizacao-na-pratica-com-vmware-e-ubuntu/?utm_source=twitter&utm_medium=social&utm_campaign=post-virtualizacao-ubuntu-2011-10-11

Para o Facebook, basta trocarmos o valor do utm_source para facebook e temos o link a ser divulgado no Facebook:
http://www.rodrigoaguas.com/blog/virtualizacao-na-pratica-com-vmware-e-ubuntu/?utm_source=facebook&utm_medium=social&utm_campaign=post-virtualizacao-ubuntu-2011-10-11

Agora, podemos divulgá-los nas respectivas redes sociais:

Feito isso, basta aguardar os acessos e acessar o Google Analytics para saber o retorno da sua campanha. Caso queira testar imediatamente o funcionamento dos links, você precisa selecionar um  intervalo de datas no Google Analytics que contenha o dia atual ou utilizar a nova funcionalidade de tempo real. Abaixo, seguem as telas do Google Analytics com os relatórios desse exemplo prático. Na primeira temos listado as campanhas dessa conta, nesse caso, apenas a campanha de divulgação do post de virtualização utilizado no exemplo. Na segunda vemos mais detalhes da campanha, como o número de acessos por origem. Por último, temos uma tela do relatório de visitas em tempo real.

Para facilitar essa tarefa de criação de links, o Google disponibilizou uma ferramenta bem simples para criação desses links. Espero que tenham gostado e façam bom uso! Abraços.

Mostrarei nesse artigo como virtualizar uma máquina com o sistema operacional Ubuntu utilizando o software de virtualização VMWare. Basearei esse tutorial na versão 4 do VMWare Player, para baixá-lo gratuitamente é necessário fazer o cadastro no site. Além dele, você deve baixar a imagem do disco de instalação do Ubuntu ou ter um em mãos.

Concluídos os downloads, o passo seguinte é instalar o VMWare. Não entrarei em detalhes dos passos para a instalação por depender do ambiente utilizado, mas no windows ela é no formato de wizard, ou seja, basicamente basta clicar em next, next, next…

Instalado o VMWare, execute-o e clique em “Create a New Virtual Machine” na tela inicial. Nela você deve escolher a origem dos arquivos de instalação do Ubuntu. Se você tem o disco de instalação, coloque ele na unidade de cd, escolha a primeira opção e selecione a unidade correta. Caso tenha baixado a imagem do disco, marque a segunda opção e selecione o arquivo. Clique no botão “Next”.

O VMWare identificará que você está instalando o Ubuntu e utilizará um modo automático de instalação para facilitar e agilizar a instalação. Na tela exibida, você deve informar seu nome completo e definir um nome de usuário e senha a serem utilizados no Ubuntu. Clique em “Next”.

Na próxima tela você deve escolher um nome para a máquina virtual que está criando e o local onde ela será armazenada no seu computador. Esse nome será utilizando pelo VMWare para se referir à máquina virtual. Clique em “Next”.

Agora você deve definir o tamanho máximo a ser utilizado do disco rígido, além disso esse espaço será utilizado como tamanho do disco rígido da máquina virtual, mas não será reservado para ela. A outra escolha é se a máquina virtual será armazenada em um único arquivo ou em vários. Sugiro deixar ambos da forma como é sugerido (20Gb para o Ubuntu e dividir o disco virtual em multiplos arquivos). Clique em “Next”.

Por fim, os detalhes da máquina virtual a ser criada são exibidos, permitindo personalizar características de hardware dela, como número de processadores e memória RAM utilizada, clicando no botão “Customize Hardware”. Clique em “Finish” para finalizar o wizard de criação da máquina virtual.

Após o fim do wizard, o VMWare seguirá com a instalação do Ubuntu de forma automática.

Pode ser que a janela abaixo seja apresentada durante a instalação com a opção de instalar o VMWare Tools, que acrescenta funcionalidades de integração entre a máquina virtual e a máquina hospedeira, tais como copy e paste de arquivos entre elas e ajuste automático da resolução. Sugiro a instalação clicando em “Download and Install”.

Aguarde até o fim da instalação do Ubuntu (isso pode demorar) e pronto! Temos nossa máquina virtual para rodar Ubuntu virtualizado dentro de outro sistema operacional qualquer. Agora basta entrar com a senha definida durante o wizard de instalação.

A primeira coisa a se fazer é verificar se de fato o site não está no Google, pois dependendo da pesquisa que foi feita ele pode não estar aparecendo nas primeiras páginas, causando a impressão de que não está lá. Pequise no google pelo seu domínio, no meu caso seria da seguinte forma: site:rodrigoaguas.com. Caso tenha encontrado o seu site, significa que ele está indexado pelo Google, porém não consegue aparecer entre os primeiros resultados para as pesquisas feitas. Nessa situação é necessário otimizar o site para buscadores, um bom livro sobre o assunto é o “Search Engine Optimization (SEO): An Hour a Day“.

No meu caso, o site realmente não estava sendo exibido no Google. Após algumas pesquisas, percebi que o meu site não tinha um arquivo robots.txt na raiz. Esse arquivo indica aos crawlers dos mecanismos de busca quais páginas do seu site podem ou não podem ser exibidas por eles. Segue um exemplo de arquivo robots.txt:

Colocando esse arquivo na hospedagem, tentei novamente a busca no Google e lá estava o resultado!

A versão do JBoss Tools a ser instalada deve ser compatível com a versão do Eclipse utilizado, baseando-se na página de download. Dê preferência pelas “Stable Releases”, só escolha uma versão “Development Milestones” se houver necessidade. Por exemplo, no momento em que escrevo este post, a última versão do Eclipse lançada é a Helios e não há uma versão estável do JBoss Tools compatível com este, então precisarei utilizar o JBoss Tools 3.6.0 ainda em desenvolvimento.

Então, vamos ao passo-a-passo:

1- Abra o Eclipse

2- Vá ao menu “Help” e clique em “Install New Software”

3- Clique no botão “Add” ao lado do campo “Work with”

4- Preencha o campo “Name” com “JBoss Tools 3.6.0″ (sem aspas)

5- Preencha o campo “Location” com o endereço encontrado na página de download. No meu caso é “http://download.jboss.org/jbosstools/updates/development/” (novamente, sem aspas)

6- Clique em “OK”

7- Marque os componentes desejados (ou todos, se preferir). Por exemplo, alguns bastante utilizados são: Hibernate Tools, JBossAS Tools e JBoss Tools RichFaces.

8- Clique em “Next”

9- Clique novamente em “Next”

10- Marque a opção “I accept the terms of the license agreements”

11- Clique no botão “Finish”

12- Aguarde o processo de instalação, aparecerá uma janela com título “Security Warning”, clique em “OK”

13- Aguarde novamente e clique em “Restart Now” na janela que aparecerá

Pronto! Seu Eclipse já está com JBoss Tools instalado.

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.

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

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.

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.

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

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”.

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

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.

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.

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.

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.

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:

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”.

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:

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:

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:

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:

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

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:

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.

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.

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.

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!

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

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

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.

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:

1. Clique com o botão direito do mouse no interior da view “Project Explorer”;
2. Vá na opção “New”;
3. Clique em “Dynamic Web Project”, uma janela se abrir;
   
4. Dê um nome para o projeto no campo “Project Name”;
5. Na caixa “Target runtime”, clique no botão “New”, abrirá uma outra janela para configuração do servidor no Eclipse;
6. Selecione na pasta “JBoss” a versão “JBoss v5.0″;
   
7. Clique no botão “Next”;
8. Clique no botão “Browser” e selecione o local onde foi instalado o JBoss em seu computador;
   
9. Clique em “Finish” e voltaremos para a janela de criação do projeto;
10. Confirme do campo “Dynamic web module version” estar selecionada a opção “2.5″;
11. Em “Configuration”, selecione a opção “JavaServer Faces v1.2 Project”;
    
12. Clique no botão “Next”, abrirá uma tela que não faremos nenhuma alteração;
13. Clique no botão “Next” novamente;
    
14. Confirme do marcador “Generate web.xml deployment descriptor” estar selecionado;
    
15. Clique no botão “Next” mais uma vez;
    
16. 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!