Portuguese (Português) translation by Francisco Freitas (you can also view the original English article)
Existem diversas formas de criar seu site currículo pessoal.
Você pode utilizar um ou muitos construtores de site ou pode optar por um CMS como o Wordpress, Drupal ou similar. Você pode também contratar um desenvolvedor profissional para fazer um para você.
Com tantas opções, pode ser difícil saber por onde começar. Para tornar as coisas ainda mais complicadas, cada uma dessas opções vêm com um conjunto diferente de pós e contras, sem mencionar o nível de dificuldade ou o preço envolvido.
Mas, há uma outra grande forma de criar seu site pessoal em uma razoável quantidade de tempo. E é utilizando um template HTML de currículo. Eles são fáceis de usar e fazer o upload para seu servidor de hospedagem.
Aqui estão alguns benefícios (para navegar rapidamente antes de continuar lendo):
No topo dela, o código por trás de um site currículo profissional está longe de ser complicado para um novato pegar do que as mais complexas linguagens de programação utilizada nos sistemas de gerenciamento de conteúdo.
Nesta parte da serie Criando um Grande Site Currículo Profissional, nós partimos do simples processo de como modificar a subir um template de currículo HTML.
Seguindo este fluxo de trabalho para criar seu site de currículo e customizar para sua própria marca - de forma que você lance seu site em um tempo não apertado.
O que Você Precisa para Tornar seu Site Currículo Vivo?
Antes de iniciar com uma simples modificação com o template do site, vamos ver as ferramentas que você irá precisar para deixar seu HTML de site currículo funcionando.
1. A Empresa de Hospedagem Certa
Comprar o nome de domínio do seu site é apenas o primeiro passo na sua jornada. Você também precisará de um servidor de hospedagem onde enviará os arquivos para o seu site. Encontrando a empresa de hospedagem certa não é fácil, especialmente de que existem muitas delas. Muitos provedores de hospedagem oferecem pacotes básicos de hospedagem entre $5 a $10 por mês. Algumas companhias oferecem largura de banda e espaço ilimitados enquanto outras oferecem planos mais restritos.
O importante de ter em mente é que quase todos os provedores de hospedagem suportam templates HTML. Ao fazer compras (sair às compras) por uma empresa de hospedagem, leia suas FAQs e certifique-se de que a empresa disponibiliza suporte ao cliente, caso precise de ajuda com seu site. Você também deveria fazer uma pequena pesquisa e ler os comentários de uma hospedagem em particular em sites independentes para ver o quanto os clientes estão satisfeitos.
2. Um Cliente FTP
Uma vez que tenha encontrado a empresa de hospedagem, você irá precisar baixar um cliente FTP. Um cliente FTP lhe permitirá enviar seu template para os servidores de hospedagem. A escolha do programa FTP dependerá de qual sistema operacional seu computador utiliza.
Um dos programas mais populares é o FileZilla. Ele é um programa FTP gratuito que é muito fácil de utilizar e é disponibilizado para Windows Mac e Linux.
3. Um Editor de Código
Você também irá precisar de um editor de texto para realizar mudanças nos seus arquivos do template. Você poderia usar desde um Notepad ou TextEdit para fazer mudanças, utilizar um editor de código tornará isso mais fácil. Diferente de editores de texto convencionais, um editor de código inclui ferramentas que facilitam a edição, tais como utilizar diferentes cores para diferentes partes do código o que torna mais fácil de ver o que você está editando.
Para os fins deste tutorial, eu utilizarei o Sublime Text, que pode se usado no Mac, Windows e Linux e a versão de teste pode ser baixada de graça. Leia mais sobre como trabalhar com este popular editor de código.
4. O Template HTML e as Imagens para o seu Site Currículo
As duas últimas coisas que você precisa são seu template HTML do currículo e as imagens que você pretende usar no seu site.
Para os fins deste tutorial, eu utilizarei o Flatrica HTML resume website template, mostrado abaixo:
Você pode encontrar seu template de site na área de Downloads da sua conta no Evanto depois de ter feito sua compra. Uma vez que tenha baixado o HTML do template do site, descompacte a pasta e salve na sua área de trabalho para acesso fácil.
Quando se trata das imagens, você precisará de sua foto de rosto e algumas outras fotos pessoais que você planeja usar. Você também pode utilizar um imagem de fundo ou padrão, desde que tenha certeza de ter todas as imagens armazenadas no seu computador de forma que você possa adicioná-las ao seu template.
Como Editar o Conteúdo do seu Template de Site de Currículo
Agora que você tem tudo no lugar, é hora de personalizar o template com suas informações. Vamos dar uma passada em como customizar o template HTML Flatrica.
1. A Estrutura deste Template HTML de Currículo
Antes de começarmos a modificar os arquivos, vamos dar uma olhada na estrutura deste template HTML. Quando descompactar a pasta, você notará que ela contém duas pastas: uma com a documentação e uma com os arquivos do template.
A pasta com os arquivos to template do site possui diversas subpastas dentro dela:
- Colors, a qual possui todos os códigos de cores e variáveis utilizadas no template do site.
- Fonts, a qual contém todas as fontes e ícones.
- Images com todas as imagens a serem substituídas.
- Uma pasta tem todos os códigos JavaScript necessário para o template funcionar apropriadamente. Na maioria dos casos, você nunca precisará editar esta pasta ou os arquivos nela pois o JavaScript disponibiliza funcionalidade extra tais como mudar o menu para abrir, controlar as animações de slide e validação de formulários.
- Uma pasta PHP quer contém o código PHP necessário para a formulário de contato funcionar. Você terá apenas que editar uma única linha de código aqui para adicionar seu endereço de email.
- A pasta Sass contém todas as variáveis para as folhas de estilo.
- Stylesheets contém todos os arquivos CSS, os quais você irá precisar editar para adicionar seus estilos no template e associar com sua marca.
Ao lado destas pastas, também existem diversos arquivos HTML: index-normal.html, index-video.html, single-blog.html e single-portfolio.html.
Tenha em mente que seu template pode não ter todos estes arquivos e pastas, contudo, na maioria dos casos, você vai encontrar as pastas de folhas de estilo, imagens, JavaScript e PHP. Seu template pode também ter mais ou menos arquivos HTML.
2. Substituindo a Informação do Template HTML Padrão
Dê um clique duplo no index-normal.html (ou index.html caso esteja utilizando um template diferente). Isto irá abrir o arquivo no seu navegador e tornará mais fácil entender quais partes do código você precisa editar e como encontrá-los no seu arquivo de template HTML.
Se você olhar para o template no seu navegador, você verá o que precisa pra editar:
- Seu nome e informações de contato.
- O blurb de testo acima dos botões para baixar o seu CV.
- Diferentes sessões que possuem informações sobre sua educação, habilidades, experiência, portfolio, útlimos clientes e mais.
Uma vez que você sabe o que mudar, você pode começar a procurar pelo código correspondente.
Clique com o botão direito no nome John Doe e selecione Inspect. Você notará que um painel surge na parte inferior que exibe o código HTML que faz parte do seu template.
A linha de código contendo o nome é selecionada no lado esquerdo do painel do Inpector com o estilo correspondente no lado direito.
Como você pode ver pela screenshot acima, o nome está entre as tags <h4> que são tags HTML utilizadas para representar cabeçalhos.
Na maioria dos casos, pares de tag como esta tem uma tag de abertura e uma de fechamento e o conteúdo tem que ser colocado entre estas tags para exibir na página web, como esta:
<h4>John Doe</h4>
Para editar o template, tudo o que você precisa saber é quais tags contêm a parte da página que você quer editar, encontrá-las no código e substitui-las com suas informações.
Abra o Arquivo HTML no Seu Editor
Agora, volta para a pasta de template, clique com o botão direito no index-normal.html e escolha Open with Sublime Text. Você deverá ver agora o código HTML completo que faz parte do seu template.
Para começar a editar o template, você quer encontrar o mesmo código que você viu no painel do Inspector do seu navegador.
Role para baixo até encontrar por volta das linhas 150-151. Então, clique entre as tags <h4> e substitua o nome pelo seu.
Depois disso, clique entre as tags <h6>, apague o texto e digite sua profissão.
Repetindo estes passos várias vezes lhe permitirá substituir todas as informações de exemplo pelas suas próprias.
Há uma sessão no template que você não precisa, simplesmente a exclua. No segundo screenshot abaixo, eu tenho selecionado tudo na tabela de preço e apagado todo o código dela.
Como Substituir as Imagens Você Mesmo
Pra substituir as imagens pelas suas, simplesmente selecione todas as imagens da pasta correspondente, exclua todas, e coloque as suas imagens na mesma pasta. Se você seguiu os conselhos antes, você renomeou suas imagens com os mesmos nomes das imagens a serem substituídas, o que torna mais rápida a edição do template.
Se você quer adicionar mais informações, selecione o código existente na sessão desejada, copie clicando CTRL/CMD + C e então cole logo abaixo com CTRL/CMD + V. Na screenshot abaixo, eu quis adicionar outra barra de habilidade, então eu selecionei o código da quarta barra de habilidade e copiei imediatamente abaixo:
E o resultado final se parece com isso:
Como mudar a Aparência do HTML do Seu Site de Currículo
Uma vez que você tenha substituído todas as informações, é hora de estilizar o template do site currículo a seu gosto. Por padrão, o template HTML Flatrica vem com diversas folhas de estilo diferentes. Se você olhar na pasta de folhas de estilo, verá notará que elas estão nomeadas depois das cores utilizadas:
Você pode ajustar rapidamente a cor substituindo a folha de estilo no cabeçalho do documento como o nome da sua folha de estilo preferida. Procure pela linha de código que diz:
<!-- CUSTOM STYLE -->
<link href="stylesheets/style.css" id="switch_style" rel="stylesheet">
Mudando o nome para style_blue.css dará a nosso template um visual e cor completamente novos:
Se você está se sentindo um aventureiro, você pode editar a folha de estilo principal chamada style.css com fontes e cores de sua escolha. Por exemplo, você pode editar a cor do plano de fundo no style.css digitando um código HEX da sua cor desejada igual a:
background-color: #65b5c1;
Editar CSS pode ser feito da mesma forma que editamos o HTML. Clique com o botão direito no elemento que você quer estilizar e clique em Inspect. Desta vez, você irá querer procurar pelo código no lado direito da aba do Inspector e então encontrar o mesmo código no editor de código.
Como Subir Seus Arquivos do Site para o Servidor
Depois que você modificou os arquivos de template do site a seu gosto, você precisará envia-los para seu servidor de hospedagem. Você deve ter recebido um email de sua hospedagem contendo as informações necessárias para transferir os arquivos via FTP.
Para iniciar o processo de envio, execute seu programa de FTP. Neste caso, eu estou utilizando o FileZilla. Digite a informação fornecida por sua hospedagem na barra do topo e então clique em QuickConnect:
Localize a pasta com seu template no seu computador no lado esquerdo da tela, e clique nela para expandir. No lado inferior esquerdo, selecione todos os arquivos e pastas e arraste todos para o lado direito da tela.
Tenha certeza de enviar todos para a pasta raiz do seu servidor de hospedagem na pasta public_html.
Uma vez que todos os seus arquivos tenham sido enviados, abra seu navegador e digite seu nome de domínio. Parabéns, seu novo site currículo está vivo agora!
Quatro Dicas Rápidas para Tornar Seu Site de Currículo Fantástico
Agora que você sabe como usar um template HTML de currículo, aqui estão quatro dicas que irão lhe ajudar a fazer seu site pessoal ainda mais fantástico:
- Comprima Suas Imagens - Antes de enviar seus arquivos para seu servidor de hospedagem, tenha certeza de reduzir o tamanho dos arquivos de suas imagens otimizando-as. Isto irá lhe ajudar a aumentar a velocidade do seu site. Você pode utilizar uma ferramenta como a TinyJPG para comprimir as imagens sem afetar sua qualidade.
- Considere Minificar Seus Arquivos de Folhas de Estilo e JavaScript - Assim como as imagens, reduzir o tamanho de arquivos ajudará seu site a carregar mais rápido. Ferramentas como CSS Minifier e JSCompress farão o trabalho por você.
- Adicione Seu Site nos Seus Perfis de Redes Sociais - Você trabalhou duro para criar seu site, agora é hora de deixar o mundo saber sobre ele. Aumente sua visibilidade adicionando seu site nos seus perfis das redes sociais.
- Utilize-o como uma Parte da Sua Assinatura de Email - Uma das melhores formas de promover seu site é adicioná-lo à sua assinatura de email. É simples, grátis, e leva poucos segundos para configurar, ainda mais que os benefícios são numerosos.
Configure o Seu HTML do Template de Currículo
Editar um template HTML pode parecer entimidador de início, mas não é difícil uma vez que você entendo como o template é estruturado e o que precisa para ser editado. Se você também tiver um tempo para ler alguns tutoriais, você irá dominar HTML e CSS em pouco tempo. Utilize o guia acima para modificar seu template de site resumo e aumentar suas chances de ser contratado.
