Olá desenvolvedores, hoje iremos compreender a importância de um portfólio de projetos bem como aprenderemos como criar um portfólio, como uma página principal. A ideia é criar uma tela com alguns botões linkando para os respectivos projetos. Assim, seja um amigo ou um recrutador precisará apenas clicar para ser redirecionado para o projeto desejado e poder então interagir com ele.

ESCOLHENDO O TEMPLATE

Para o desenvolvimento deste projeto iremos escolher um template de uma página web que melhor atenda as nossas necessidades. Clicando neste link você poderá fazer o download e utilizar o mesmo template que utilizarei para esta aula.

Após o download, descompacte a pasta porque precisaremos de toda estrutura de pastas sobre a qual o projeto foi organizado para que possamos colocá-lo na hospedagem.

O que faremos é colocar toda a estrutura de pastas dentro do projeto Java e então gerar o arquivo de implantação WAR – Web application ARchive. Assim, no Eclipse crie um projeto JAVA para implementar seu portfólio. Copie para dentro da raiz pasta WebContent toda a estrutura do template que você baixou, e vamos testar.

TESTANDO

Clique com o botão direito sobre o servidor Apache Tomcat >> Add and Remove … Selecione o projeto e mova-o para o painel “Configured” >> Finish. Inicie o servidor.

EDITANDO O TEMPLATE

Começaremos agora a editar o template, primeiro substituiremos a imagem, no meu caso pela logo da minha página de cursos JDev Treinamento. Identificamos no HTML onde a imagem está localizada e o nome dela. Assim poderemos, na pasta imagem substituir por outra imagem com igual nome, assim não precisaremos fazer alteração no código.

Atente-se para a extensão da imagem. O template utiliza uma imagem .jpg, a imagem que escolhi para substituir é .png, assim sendo, se necessário altere a extensão.

Abaixo da imagem altere o texto colocando o seu nome ou o nome da sua página, colocarei “Alex – Jdev Treinamento”. E como não precisamos dos campos de login e senha poderemos excluí-los. Não estamos trabalhando com uma página de login, logo não precisamos destes campos, identifique-os no template e delete-os.

Deixaremos apenas o botão, alterarei o nome do botão para “Projeto JSP + Servlets + JDBC”. Mas como se trata de um template não podemos simplesmente inserir uma tag <a>, isso poderia de alguma forma alterar alguma propriedade.

Utilizaremos então o evento Javascript onclick que ocorre quando o usuário clica em um elemento. Como parâmetro o evento receberá a URL – Uniform Resource Locator, e o local onde a URL deverá ser aberta, isto é, em uma nova aba.

Substitua a palavra url pelo link do seu projeto.

Caso seja necessário ou você queira, poderá duplicar todo o bloco de código do botão e linká-lo a um segundo projeto. E assim você poderá proceder com todos os projetos que criar.

EDITANDO LINKS

Logo abaixo dos campos para “logar” no sistema, tem um link o qual redirecionarei para o curso de Formação Java Web. Você pode excluir ou redirecionar para alguma página ou rede social.

No rodapé da página existe uma opção de link para que o visitante do site possa criar uma nova conta. Como tenho uma página de acesso a algumas aulas que disponibilizo gratuitamente, vou gerar o link para esta página.

Mas no seu caso, com iniciante você pode criar um link para o seu GitHub ou Linkedin, por exemplo. Ou se preferir, você pode excluir esta parte, mas recomendo fortemente que você redirecione o visitante da sua página para um desses dois canais. Abaixo veja como ficou nossa página após as edições.

GERANDO ARQUIVO DE INSTALAÇÃO

E por fim geraremos o arquivo de implantação WAR, caso não lembra como se faz, basta clicar aqui e acessar o tutorial “WAR DE IMPLANTAÇÃO: GERANDO O ARQUIVO”. Acesse a hospedagem e faça o deploy do arquivo ROOT.war.

EM POUCAS PALAVRAS

Este tutorial foi dedicado a criação do portfólio. Como profissional você deve ter um portfólio que mostre seus projetos e que permita que o recrutador interaja com eles. Além dos códigos do GitHub, todo este conjunto pode facilitar o processo de mostrar e provar o profissional que você é.