INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RIO

GRANDE DO NORTE

Matheus Ribeiro da Fonseca

Portfólio Profissional Web

Natal-RN
2020
 Matheus Ribeiro da Fonseca

Portfólio profissional web

Trabalho de conclusão de curso apresentado ao

curso técnico de Informática para Internet do
Instituto Federal de Educação, Ciência e
Tecnologia do Rio Grande do Norte, em
cumprimento às exigências legais como requisito
parcial à obtenção do título de técnico em
informática para internet.

Orientador: Clauber Gomes Bezerra

Natal – RN
2020
 RESUMO
O presente trabalho tem como objetivo documentar o desenvolvimento
de uma página publicada na internet, sendo mais específico um portfólio profissional
web, cujo seu propósito é auxiliar uma parcela da população que está em busca de
emprego ou para aqueles que possuem uma atuação independente e precisem atrair
clientes de alguma forma. Seguindo essa ótica, esse currículo eletrônico irá conter a
junção de tecnologias de desenvolvimento que irão fornecer a estética do portfólio e
informações pessoais do trabalhador, por exemplo, pontos fortes no campo de
atuação profissional, pesquisas e até mesmo seus hobbies, visto que esses elementos
são bastante valorizados em uma entrevista de emprego pelo RH e por clientes que
buscam serviços de profissionais autônomos.
 ABSTRACT
The objective of this present work is to document the development of a
website, begin more specific a professional portfolio, whose purpose is to help a part
of the population that is searching for a job or for those that have an independent
performance and need means to attract customers. From this point of view, this
electronic curriculum will contain the combination of web technologies that will provide
the aesthetics of the portfolio and some personal information of the work, like the
strengths in the professional field, researches and mainly the hobbies, since these
elements are highly valued in a job interview by HR and clients that looking for services
from freelance professionals.
 Sumário
1. INTRODUÇÃO ................................................................................................................... 6
1.1 PROBLEMA ..................................................................................................................... 7
1.2 JUSTIFICATIVA .........................................................................................................................................................7
1.3 OBJETIVOS .................................................................................................................................................................8
1.3.1 OBJETIVO GERAL ..........................................................................................................................................8
1.3.2 OBJETIVO ESPECÍFICO .............................................................................................................................8
2. METODOLOGIA ................................................................................................................ 8
3. REFERENCIAL TEÓRICO ................................................................................................. 11
3.1 EDITOR DE TEXTO.............................................................................................................................................. 11
3.2 HTML ............................................................................................................................................................................ 11
3.3 CSS ............................................................................................................................................................................... 12
3.4 JAVA SCRIPT .......................................................................................................................................................... 12
3.5 PHP ............................................................................................................................................................................... 13
4. DESENVOLVIMENTO ...................................................................................................... 13
4.1 WIREFRAME ............................................................................................................................................................ 14
4.2 APLICANDO O HTML E CSS .......................................................................................................................... 16
4.3 ANIMAÇÕES UTILIZADAS ............................................................................................................................... 18
4.4 SITES DE APOIO ................................................................................................................................................... 20
4.4.1 GOOGLE FONTS .......................................................................................................................................... 20
4.4.2 BENNETTFEELY ........................................................................................................................................... 20
4.4.3 FONT AWESOME ......................................................................................................................................... 21
4.5 APLICANDO O PHP ............................................................................................................................................. 22
4.6 PUBLICAÇÃO .......................................................................................................................................................... 23
5. SISTEMA WEB ................................................................................................................ 24
6. CONCLUSÃO .................................................................................................................. 26
6.1 RECOMENDAÇÕES PARA TRABALHOS FUTUROS ................................................... 26
REFERENCIAS ....................................................................................................................... 29
 6

1. INTRODUÇÃO
A internet está presente no cotidiano de uma grande parcela da população,
sendo local de tráfego de compartilhamento e armazenamento de informações de
inúmeros usuários. A internet que conhecemos hoje, surgiu em uma época hostil e
com a finalidade apenas para uso estratégico militar, como guardar e proteger
informações confidenciais. No entanto, principalmente com a intervenção de
instituições de ensino, essa ferramenta foi se ajustando aos poucos, até que ganhasse
uma nova face, ou seja, disponibilizada para a população comum para usos que não
envolvesse qualquer ação militar.
Contudo, a forma em que a internet é vista pela sociedade contemporânea
é graças aos esforços do cientista Tim Berners-Lee, o qual na década de 80, com a
criação de um sistema de documentos em hipermídia interligados e executados na
internet [1]. Também considerado o principal responsável da criação de uma
linguagem de marcação denominada de HTML e um protocolo de comunicação
chamado de HTTP e com a junção desses elementos se tornou possível criar a
primeira página na internet considerada segura pelos padrões da época, sendo um
site estático e apenas com um caráter informativo [1].
Diante desses fatos, é perceptível uma evolução tecnológica ocorrendo
pelo mundo e o grande número de pesquisas envolvendo essa área vem crescendo
cada vez mais, visto que o número de sites criados com diferentes funcionalidades e
propósitos vem se tornando algo bastante comum e usual, tanto na perspectiva de
lazer, estudo e profissional. Tal realidade, é comprovada pelos dados da empresa de
tecnologia NetCraft, o qual afirma a existência de 1,45 bilhão de sites na internet [2].
Dessa maneira, percebe-se uma popularização significativa da internet e
consequentemente novas formas de desenvolver sites vem surgindo, como a criação
de linguagens de programação e interfaces gráficas que unidas podem estilizar um
site usando noções de design.
Nesse enfoque, é válido salientar a pesquisa feita em 2009 pelo jornal
brasileiro Estadão, o qual comprova que a internet é a fonte mais popular de
informação e a escolha preferencial para obter notícias, adiante de televisões e jornais
[3]. Seguindo essa ótica, formas de divulgar empregos e perfis profissionais acabaram
se tornando mais comuns na internet devido a essa popularização, já que existe
inúmeras redes sociais voltadas ao mercado de trabalho e jornais adaptados a esse
 7

avanço tecnológico, os quais divulgam online oportunidades e serviços. Além disso,

muitos profissionais esquecem que existem outras formas de chamar atenção no meio
profissional e uma delas é o desenvolvimento de um site próprio, mostrando de forma
objetiva e sucinta as qualidades de uma pessoa, além de poder usar técnicas
responsivas e de design capaz de surpreender qualquer leitor e despertando
curiosidade acerca do responsável do portfólio ou melhor falando, um currículo
eletrônico.

1.1 PROBLEMA
Um dos principais problemas enfrentados pela população é aceitação no
mercado de trabalho, o qual está cada vez mais competitivo de entrar em uma empresa
privada ou vender algo para um determinado cliente, visto que o mercado profissional
se encontra cada vez mais competitivo. Segundo um estudo, estima-se que 24% de
460 trabalhadores brasileiros entrevistados destacam que a principal dificuldade
encontrada para ingressar em uma empresa é elaboração bem feita de um currículo
(Portal de Notícia da Rede Globo, 2013) [4]. Dessa maneira, percebe-se o quão
significativo é a importância de um currículo organizado e bem elaborado para
conseguir uma tão almejada vaga no mercado de trabalho e não apenas isso, também
conseguir apresentar de forma clara e coesa as informações de um currículo, cujo são
elementos imprescindíveis para uma contratação.

1.2 JUSTIFICATIVA

Observando esse cenário social e os avanços tecnológicos que aumentam

cada vez mais, é coerente afirmar que existe à possibilidade de ajudar a população, o
qual está em busca de uma vaga no mercado de trabalho a construir um modelo de
portfólio profissional estruturado e dinâmico, aplicando diversas tecnologias web e de
design. Assim, enfatizando as qualificações, além de surpreender o mercado
profissional com à criatividade, visto que essa é uma das principais qualidades
procurada por inúmeras empresas. Contudo, existe todo um processo organizacional
até chegar ao final do projeto, por exemplo temos a produção do esqueleto inicial do
site chamado de wireframe e um modelo de organização do projeto, cujo é muito
utilizado em empresas denominado de Business Model Canvas, depois de concluir
tais planejamentos, a produção do portfólio será mais organizada e rápida.
 8

1.3 OBJETIVOS

1.3.1 OBJETIVO GERAL

A partir das informações apresentadas até o momento, esse trabalho
possui como objetivo desenvolver uma aplicação voltada ao frontend que junte
conceitos de design, responsividade e o acréscimo de informações relevantes de um
determinado profissional independente de sua profissão.

1.3.2 OBJETIVO ESPECÍFICO

O projeto segue com a ideia de criar um modelo de portfólio, também
podendo ser chamado de currículo para que uma parcela da população possa usar
como base para a criação de modelos semelhantes. Assim, possibilitando uma forma
de amenizar os problemas dos profissionais e estudantes que estejam entrando no
mercado de trabalho pela primeira vez.

2. METODOLOGIA
A presente pesquisa tem finalidade descritiva e também técnica, visto que
foram utilizados ferramentas que auxiliaram o desenvolvimento das ideias e do projeto
em si, como por exemplo a produção de um Business Model Canvas, levantamentos
por meio do questionário produzido pelo Google Forms que ao final geram gráficos a
partir de cálculos estatísticos, além do estudo de diversas tecnologias web e
linguagens de programação para o desenvolvimento do currículo eletrônico.
Inicialmente, para o desenvolvimento da pesquisa acerca do site foi
elaborado um Canvas que é conhecido por ser um esquema visual que possibilita às
pessoas criarem modelos de negócios analisando nove elementos que toda empresa
ou organização deve ter por questões organizacionais: propostas de valor, parcerias
chaves, atividades chave, recursos chave, relacionamento com clientes, segmento de
mercado, canais de distribuição, estrutura de custos e fonte de renda [5].
 9

Figura 1 – Canvas

Fonte: Elaboração própria (2020).

Como parceiros chave tem as próprias empresas que possuem serviços de

criação de sites responsivos, como a Wix.com que possuem inúmeros modelos de
sites, o qual pode servir de inspiração para o desenvolvimento de um determinado
projeto, além de frameworks especializados em ajudar tanto na estética e
organização, por exemplo o Bootstrap, contudo cabe o programador utilizar esse
framework ou optar por estudar sobre suas funcionalidades e fazer algo similar. Os
recursos chaves serão todas ferramentas encontradas na internet e a manutenção
feita pelo próprio desenvolvedor, caso for necessário.
Quanto as atividades chaves teremos a própria elaboração do código fonte,
além da folha de estilo e animações. Em relação aos outros elementos no geral, o
projeto irá suprir uma necessidade real da sociedade com um baixo custo, assim se
tornando algo bem acessível e para ter uma boa relação com o cliente, será utilizado
os artifícios das redes sociais que é algo bastante usual na sociedade. Por fim, a partir
do Canvas acredita-se então pela viabilidade desse projeto no momento de fornecer
maiores oportunidades no meio profissional.
Em seguida, foi elaborado um questionário simples em relação ao projeto,
o qual teve a função de comprovar se existe um problema em relação a criação de
currículos e além da opinião popular sobre o objetivo do projeto. Segue abaixo as
informações que foram coletadas durante o desenvolvimento do projeto:
 10

Figura 2 – Gráfico referente ao questionário

Fonte: Elaboração própria (2020).

Figura 3 – Gráfico referente ao questionário

Fonte: Elaboração própria (2020).

Figura 4 – Gráfico referente ao questionário

Fonte: Elaboração própria (2020).

 11

Diante dessa pesquisa, é válido enfatizar a importância do desenvolvimento

do projeto e a publicação deste na internet. Na primeira pergunta do questionário
31,4% afirmaram que não sabem desenvolver um currículo e 45,7% se mantém na
dúvida sobre esse questionamento, além de 74,3% dos entrevistados apresentar um
interesse mútuo sobre a criação de um currículo eletrônico que possa ser publicado e
71,4% enfatizam que seria de grande ajuda para os profissionais possuir mais uma
ferramenta de apoio.
Por fim, foi necessário pesquisas em relação as tecnologias web, como
HTML, CSS, Java Script e PHP e também sobre arquitetura de informação, assim
obtendo informações sobre como construir um site responsivo, atraente e com
aplicações. Como por exemplo, um formulário de contato para poder estabelecer uma
comunicação segura com o proprietário do site.

3. REFERENCIAL TEÓRICO
3.1 EDITOR DE TEXTO
O editor escolhido para o desenvolvimento do projeto foi o Visual Studio
Code, criado pela Microsoft em 2015 [7]. Trata-se de uma ferramenta leve e
multiplataforma que está disponível tanto para Windows, quanto Mac OS e Linux, além
de atender a uma grande quantidade de projetos, não apenas ASP.NET, como
também Node.js. Adicionalmente, o editor possibilita o uso da linguagem de marcação
e folha de estilo, ainda possui suporte para algumas linguagens de programação mais
complexas. Além de ser totalmente gratuito e ser anunciado como open source, tem
o seu código disponibilizado no GitHub, assim permitindo para a comunidade técnica
contribuir com o seu desenvolvimento e facilitando a criação de novas funcionalidades
e extensões.

3.2 HTML
De acordo com o portal educacional de tecnologias web W3Schools, o
HTML é uma linguagem de marcação padrão para a criação de documentos na
internet (sites), abreviatura de Hyper Text Markup Language (Linguagem de Marcação
de Hipertexto) [8]. Estrutura as páginas web utilizando diversos marcadores, usa-se
também o conceito de elementos, os quais são representados por tags que são
marcadores de conteúdo, como html, head (cabeça) e body (corpo), além de existir
outras tags dentro dessas citadas, organizadas de forma hierarquicamente para
 12

permitir criações de tabelas, divisões e seções de um site, dessa maneira facilitando

a utilização de técnicas do css, por exemplo classe, pseudo-classe, seletores
hierárquicos, seletor universal, id e entre outros, os quais serão retratados na próxima
seção.
Figura 5 – Logotipo HTML

Fonte: Wikipédia (2020).

3.3 CSS
Abreviação de Cascading Style Sheets (Folha de Estilos em Cascata) é
uma tecnologia imprescindível para o desenvolvimento de páginas publicada na
internet, devido ao número de funcionalidades que ela possui para estilizar
simultaneamente vários documentos e, assim, possibilitando um conceito mais
moderno ao site. Nesse contexto, é coerente destacar as informações do portal
educacional W3Schools, o qual afirma que o CSS descreve como os elementos HTML
serão mostrados na tela pelos navegadores que tendem seguir um padrão para tentar
exibir de fato a interpretação correta do código [9].

Figura 6 – Logotipo CSS

Fonte: Wikipédia (2020).

3.4 JAVA SCRIPT

Essa linguagem de programação foi criada no ano de 1995 por um
programador chamado Brendan Eich, no intuito de oferecer aos desenvolvedores
inúmeras formas de tornar determinados processos de páginas na internet mais
dinâmicos, e assim, deixando o uso do site mais agradável para o usuário [11]. A partir
 13

da utilização dessa linguagem o conceito de estático deixa de existir em um site, visto

que é possível mostrar em tempo real conteúdos atualizados, mapas interativos,
animações gráficas, vídeos, fotos e entre outras funcionalidades.

Figura 7 – Logotipo Java Script

Fonte: Wikipédia (2020).

3.5 PHP
Pode-se dizer que se trata de uma linguagem de script utilizada para a
comunicações com servidores, sendo capaz de lidar com várias funções de backend,
por exemplo coletar informações de formulários, gerenciar arquivos em um servidor e
modificar a base de dados e entre outras funções. Consequentemente, acaba sendo
uma das linguagens mais utilizadas no desenvolvimento web justamente por um
possui um recurso que habilita a integração do PHP em um arquivo HTML.

Figura 8 – Logotipo PHP

Fonte: Wikipédia (2020).

4. DESENVOLVIMENTO
O projeto disponibilizado em produção é um modelo de portfólio publicado
na internet pelo GitHub Pages que disponibiliza esse serviço de forma gratuita e
rápida, tendo suporte apenas para o HTML, CSS e Java Script. Seguindo essa linha
de raciocínio, esses três elementos citados são responsáveis por possibilitar a criação
de um site estruturado, moderno, animado e responsivo, sendo características que se
complementam e permitem ao usuário acessar um site por qualquer dispositivo
 14

eletrônico que tenha internet, como por exemplo celulares e tabletes, os quais possuem
as mesmas animações oferecidas por computadores, com algumas particularidades.
Primeiramente, foram utilizadas ferramentas online que possibilitaram uma
melhor organização do site antes que ele fosse produzido, o principal foi o wireframe,
em termos técnicos é um protótipo usado em design de interface que define uma
ilustração de um determinado site. A partir do modelo feito no wireframe foi possível
começar a desenvolver as primeiras linhas de código no editor Visual Studio Code,
sendo uma ferramenta bastante utilizada no mundo da programação.
Também em contribuição para o desenvolvimento do site foram utilizadas
ferramentas disponibilizadas em sites de apoio a programadores, como o Google
Fonts, Font Awesome e Bennettfeely, que conseguem gerar links para serem
incorporados tanto na parte HTML e CSS do código original. Dessa maneira,
estilizando as fontes do portfólio em diferentes níveis, permitindo certos formatos para
as imagens caso seja aberto o portfólio em dispositivos com telas diferentes e permitir
ícones especiais, os quais possuem o conceito vetorial em sua composição.

4.1 WIREFRAME
Pode-se definir o wireframe como um “esqueleto”, ou seja, um protótipo ou
uma versão inicial de um determinado projeto. Dessa forma, conseguimos visualizar
o passo a passo do desenvolvimento de um site até chegar em sua versão final, a
grande vantagem de começar com o wireframe é justamente a possibilidade do cliente
poder acompanhar esse processo de forma mais eficiente e exigir certas mudanças
no esboço do site, assim, se torna mais fácil também ao programador começar a
desenvolver na linha de comando, visto que na teoria todas as mudanças feitas serão
realizadas no wireframe e aprovadas pelo cliente.
Por conseguinte, durante o desenvolvimento do currículo eletrônico foram
feitos inúmeros modelos de wireframe no MockFlow até chegar no modelo
apresentado logo abaixo. Tal protótipo se encontra bastante fiel ao site em sua versão
final, percebe-se que pela imagem existem cinco seções bem específicas: breve
apresentação, informações sobre o profissional, portfólio, mídias e contatos. A
primeira seção por exemplo denominada de apresentação será a parte inicial do site,
contendo o nome do indivíduo e uma frase de efeito, além de ser adicionado
animações para que cause impacto e instigue a curiosidade do leitor. Na sequência, foi
colocado a seção sobre as informações do profissional, o qual se preocuparia com as
 15

informações gerais do dono do currículo e uma foto de perfil. Depois, foi acrescentado
a parte fundamental do site que é o portfólio, onde se encontra imagens específicas,
as quais mostram diversos tópicos essências de um profissional, como suas
pesquisas, trabalhos, qualidades e hobbies. Por fim, temos a seção das mídias sócias,
mostrando ao leitor do site as principais redes sociais do profissional, no intuito de
saber mais sobre o indivíduo do currículo para ter uma noção mais clara de quem é a
pessoa, além de ter uma caixa de e-mail no final do site para poder se comunicar
diretamente com o profissional.

Figura 9 – Modelo final do site

Fonte: elaboração própria (2020)

À vista disso, é válido salientar que pela estrutura apresentada, o site

elaborado é um modelo on page, ou seja, de uma única página que é algo muito
utilizado em empresas justamente pela leveza do website, o qual preza pela
objetividade e escrita amigável [6]. Também, pode-se destacar a praticidade de se
encontrar algo no site, devido as informações serem distribuídas suavemente na
página, sem falar do auxílio que o menu personalizado possibilita, considerando o uso
touch dos dispositivos móveis foi elaborado um menu para evitar a síndrome do fat-
 16

finger e ,assim, garantir uma maior área de alcance ao dedo de uma pessoa, no intuito
de não ser pressionado duas opções ao mesmo tempo, além de possibilitar um atalho
instantâneo para um usuário que esteja navegando pelo site. Por fim, não podemos
esquecer que esse modelo é conhecido pelo seu caráter responsivo e isso possibilita
duas grandes vantagens, relevâncias nos resultados do Google e melhor experiência
do usuário, em consequência disso, maiores chances de se fechar um negócio.

4.2 APLICANDO O HTML E CSS

O HTML é a base para a criação de um website, justamente por estruturar
os documentos. Primeiramente, foi necessário definir o Doctype HTML, o qual não é
visto como uma tag, mas sim uma forma de informar aos navegadores qual á a versão
do HTML utilizada no arquivo, atualmente tal tecnologia se encontra em sua versão
cinco. Essa declaração para ser validada pelos browsers precisa ser posicionada
antes de todas as tags do site, por isso acaba sendo a primeira linda do código de
qualquer site publicado na internet, depois desse detalhe só basta construir a página
web a partir das tags mais comuns e com o desenvolvimento do projeto houve o
surgimento de outras necessidades foram utilizados outras tags de forma paralela,
assim construindo sistema hierárquico.
Posteriormente, o CSS foi utilizado visto que possui diversas
funcionalidades, as quais não se limitam apenas em estabelecer uma aparência bonita
ao site, mas também um caráter responsivo utilizando seus seletores para tal trabalho.
Primeiramente, para organizar a estrutura do site foram utilizados os próprios
elementos HTML, como body e header respectivamente, já que documentos CSS tem
um caráter de interpretar as instruções na ordem em que foi escrito. Exemplificando
melhor, a utilização do elemento corpo em um documento CSS pode ser passado
inúmeras instruções a ele, como altura, largura, fonte, cores e até o fundo do site, mas
é necessário ser colocado o corpo antes do cabeçalho, devido a questão de
hierarquia, caso não, pode ocorrer problemas na hora do browser interpretar o código.
Contudo, isso não é o suficiente para estilizar e organizar um site, pelo fato
de existir elementos dentro de outros elementos, os quais precisam ter uma ênfase
maior e a solução utilizada foi o conceito de classe que são uma forma de identificar
um grupo de elementos e através dessa identificação pode-se atribuir formatação a
vários elementos de uma vez, também é válido dizer que as classes podem usar as
mesmas instruções e por isso podem compartilhar um mesmo bloco na inciativa de
 17

não deixar o documento CSS extenso. Ainda falando de classes, existe o conceito de
pseudo-classe que é uma palavra-chave adicionada a seletores que especifica um
estado especial do elemento selecionado. Por exemplo, o termo hover pode ser usado
para alterar a cor de um botão quando um usuário passar o cursor por cima ou em
caso de um celular o dedo do usuário, em consequência disso, facilitando uma melhor
visualização do site.
Além disso, outra alteração feita foi a utilização do seletor universal que tem
o propósito de representar todos os elementos do documento HTML pelas instruções
colocadas no bloco. No caso do projeto, foi usado para deixar o site mais enxuto,
fazendo com que o HTML não colocasse a margin e o padding automaticamente e,
assim, possibilitando um controle mais eficiente do site.
Ademais, em preocupação ao design do site foi usado uma metodologia
denominada de mobile first criado por Luke Wroblewski, segundo ele, organizar uma
solução digital por dispositivos móveis primeiro irá fornecer uma nova perspectiva e
uma delas é perceber informações irrelevantes ao site [15]. Nesse enfoque, é válido
salientar algumas vantagens que esse método disponibiliza para o usuário, uma delas
é a redução de gastos, já que em teoria todos os padrões em teoria serão traçados e
serão respeitados em todo site, sendo mobile ou desktop e, dessa maneira, será
necessário menores adaptações do site em ambos dispositivos. Também pode-se
dizer que o carregamento do site será mais veloz, o qual é uma qualidade de
extremamente requisitado pela sociedade.
Seguindo para os termos técnicos, foi preciso de uma tag bem específica
no documento HTML, chamado de janela de exibição que varia de acordo com o
dispositivo e será menor em dispositivos móveis em relação a tela de um computador.
No entanto, não é uma técnica perfeita, visto que os navegadores apenas diminuem
a página web para se encaixar em uma tela de celulares, então é necessário a
utilizações de condições no código, o qual é representado pelo símbolo de @, a partir
disso é possível controlar o tamanho adequado do computador e de inúmeros
aparelhos, uma ferramenta bastante utilizada de apoio nessa aplicação foi o devtools
do navegador Firefox, permitindo o teste em alguns modelos de Iphones, Samsung e
Motorola.
Também é válido enfatizar a presença do id, o qual é bem similar a uma
classe, mas possui certas peculiaridades que as diferem e uma delas é a questão de
identidade, um id deve ser algo único para cada elemento do código e uma classe não
 18

precisa dessa restrição. Graças a essa característica os ids é algo bastante utilizado
em menus de sites, justamente para inserir cada id em uma seção específica, e assim,
facilitando o processo de navegação de websites.

4.3 ANIMAÇÕES UTILIZADAS

Atualmente as animações em websites vão além de simples detalhes e
muitas empresas utilizam esses efeitos em suas marcas, como é o caso do Google
que preza muito por essa funcionalidade. Em uma página web, diversos elementos
podem ser animados caso tenha um bom planejamento e na maioria das vezes
acontece quando o usuário executa uma determinada ação, como em clicar em uma
imagem, passar pelos botões de um menu e até mesmo quando o site for carregado
pelo navegador. Dessa maneira, as animações são trocas de estados onde pode-se
visualizar como algo foi de um ponto A para um ponto B, com essa ideia é possível
animar o background, ainda manipular a largura e altura de certos elementos. Tudo
isso que foi citado é graças ao elemento transition, o qual é a base das animações do
arquivo CSS, outro elemento compatível é o transform que pode aplicar diferentes
comportamentos ao um elemento como sua escala e alterar a posição.
Nesse contexto, tanto o transition e o transform foram usados no código
para fornecer um efeito para a primeira seção do site (breve apresentação), tal ideia
foi usado para chamar atenção de qualquer usuário que acesse o portfólio, falando do
efeito usado em questão, tanto o conteúdo e a imagem parecem que vem do fundo
do site até fixar na tela corretamente. Contudo essa animação é possível ser
controlada por instruções, os quais manipulam o tempo de duração do efeito, ao
aplicar um segundo por exemplo todas a propriedades de um seletor específico será
afetado, por isso deve especificar com clareza qual será o seletor, e assim, evitando
gargalos de performance.
Outro efeito utilizado foi a partir do Java Script que permitiu uma digitação
automática chamada de máquina de escrever na seção breve apresentação, o qual
se encontra a animação CSS descrita anteriormente, dessa maneira esses efeitos
juntos possibilitaram uma inovação e suavização do site. Em termos técnicos, foi
utilizado a função typewrite que é responsável por fazer essa animação e dentro dessa
desse elemento vai ser colocado várias instruções, por exemplo definir a frase, colocar
em uma lista, segmentar cada letra da frase e por fim estabelecer o tempo de aparição
de cada letra, assim montando a frase original.
 19

Posteriormente, foi pesquisado uma forma de mostrar os dados de forma

distinta de tal forma que causasse impacto positivo quando o leitor estivesse no site.
O efeito estabelecido foi uma percepção em 3d, o qual foi colocado tanto na seção de
breve apresentação em uma imagem para fins ilustrativos e na seção de portfólio, cujo
possui uma função ilustrativa e fornecer informações sobre o usuário de forma rápida,
quando o usuário seleciona tal figura.
Seguindo com a parte técnica, para ativar o espaço 3D em um elemento é
necessário de perspectiva e isso pode ser aplicado de duas maneiras, uma delas seria
utilizando diretamente a propriedade perspective ou adicionando um valor de
perspectiva na propriedade transform. Esses dois meios acionam o espaço 3D e
produzem quase o mesmo resultado visual, ou seja, possui uma certa diferença, visto
que utilizando a propriedade perspective é possível fazer os elementos compartilhar
o mesmo espaço, o qual é uma qualidade não vista no outro método citado e a partir
disso é possível evitar a interrupção do evento visual [10]. Pode-se dizer também que
o valor perspective determina a intensidade do efeito presente em qualquer elemento.
Nesse enfoque, é coerente destacar que o espaço 3D possui três
dimensões espaciais (X, Y, Z). Essa informação é de extrema importância, devido a
compatibilidade com a função rotate, cujo tem a capacidade de girar um elemento ao
longo de um eixo horizontal (X) ou vertical (Y), no caso do programa desenvolvido foi
escolhido o eixo vertical das figuras para sofrer a rotação. Lembrando que essas
funcionalidades só foram possíveis graças as mudanças feitas no documento HTML,
onde foram colocados inúmeras tags de divisões para segmentar as imagens em duas
regiões, a frente e o verso.

Figura 10 – Exemplificação da rotação das imagens

Fonte: 3dtransforms.desandro
 20

4.4 SITES DE APOIO

4.4.1 GOOGLE FONTS

O Google Fonts é um diretório de fontes grátis hospedado pela empresa
Google que possui uma gama de estilo de letras, os quais os desenvolvedores e
designers utilizam em seus projetos, podendo ser baixado do site ou utilizar o link
HTML e CSS que o próprio Google Fonts disponibiliza automaticamente ao
profissional [12]. No projeto do portfólio foi usado duas fontes específicas, a primeira
denominada de Kalam para destacar cada seção e a segunda utilizada para o texto
corrido, chamado de Courier Prime, assim causando uma padronização no estilo das
palavras no site em geral.

Figura 11 – Escrita Kalam

Fonte: Google Fonts (2016.)

Figura 12 – Escrita Courier Prime

Fonte: Google Fonts (2016.)

4.4.2 BENNETTFEELY
Por questões responsivas é usado técnicas que sejam capazes de adaptar
o formato de imagens, isso garante a uma página web mais organização pelo fato de
permitir diferentes visualizações em telas distintas, como é o caso de computadores
e celulares. Atualmente, existem inúmeros sites que fornecem meios para essa
adaptação, um deles é o Bennettfeely, o qual possui uma variedade de formatos de
figuras, graças a essa funcionalidade o projeto em questão possui duas formas, uma
para o celular e outra para os computadores.
 21

Figura 12 – Formato da imagem no computador

Fonte: Bennettfeely

Figura 13 – Formato da imagem no celular

Fonte: Bennettfeely

Essa funcionalidade foi aplicada na seção sobre do site, o qual descreve

mais detalhadamente sobre o autor do portfólio. Já que nessa parte do currículo
eletrônico existe tanto a imagem e um resumo da pessoa, foi usado o formato de seta
na imagem do autor para apontar em direção a parte escrita, já o círculo foi pensado
para telas menores como os celulares, pois esse formato ocupa menos espaço na
tela. Também é válido observar que na extremidade e no centro desses formatos é
possível alterar sua composição caso for de interesse em criar uma adaptação única.
Ademais, para inserir essa funcionalidade no código desenvolvido foi bastante
simples, pelo fato de gerar automaticamente uma instrução que seja entendida por
um seletor CSS.

4.4.3 FONT AWESOME

Fornece ao programador uma cadeia de ícones em um estado vetorial, ou
seja, imagens compostas por cálculos matemáticos feitos pelo próprio computador,
mantendo a proporção da imagem original [13]. Tal estado é algo bastante utilizado
em sites, na tentativa de evitar imagens em bitmaps que são constituídos por pixels,
pois caso tenham suas dimensões aumentadas sofrem um processo de deformação
 22

e algumas vezes acabam se tornando ilegíveis. Desse modo, foram criados inúmeros
softwares, como o Adobe Illustrator para transformar imagens compostas por pixels
em vetores e também sites que disponibilizam de forma gratuita essas imagens sem
precisar de um programa, graças a isso questões de gastos e tempo de
desenvolvimento diminuíram consideravelmente e aumentando a produtividade. O site
Font Awesome é bastante similar aos outros sites de apoio em seu funcionamento,
pelo fato de gerar automaticamente um link para o documento HTML.

Figura 14 – Exemplo de imagem vetorial

Fonte: Font Awesome

Esse recurso foi utilizado para colocar os ícones das redes sociais
utilizadas pelo profissional do portfólio. Essas imagens receberam um tratamento CSS
para poderem ser distanciadas e também ganhar um efeito de sombra ao serem
pressionadas, depois de fazer essa ação uma página web será aberto
automaticamente correspondente a rede social que o usuário pressionou.

4.5 APLICANDO O PHP

A melhoria feita por essa linguagem de programação foi a criação de um
campo de comunicação simples para que os usuários, os quais estejam navegando
no site possam se comunicar de forma direta com o profissional, nesse campo de e-
mail possui apenas três elementos: nome, correio eletrônico e o texto do usuário.
Contudo, graças a inserção desse campo de e-mail no projeto houve algumas
complicações na publicação do projeto na grande rede, tais problemas serão
retratados na próxima seções.
 23

4.6 PUBLICAÇÃO
A princípio a primeira publicação do projeto foi feita pelo GitHub Pages,
considerado um serviço de hospedagem estático com suporte apenas ao HTML, CSS,
e Java Script. Os requisitos para a publicação de um site são bastante simples,
primeiramente é necessário um conta no GitHub, depois criar um repositório e “puxar”
os arquivos local pelo git (sistema de controle de versões distribuído) para o repositório
criado. Por fim, tudo o que foi desenvolvido vai ser salvo e ao ser finalizado essa etapa
o site oferece em configurações um recurso de hospedagem, onde pega as
informações que precisa nos arquivos encontrados no repositório [14].
Além disso, esse recurso disponibiliza o protocolo HTTPS (Hyper Text
Transfer Protocol Secure) em todo site publicado. A partir desse protocolo é
adicionado uma camada de proteção (criptografia) que impede outras pessoas de
interceptar ou adulterar o tráfego do site. Contudo, é necessário que o repositório
esteja aberto ao público para ser publicado na internet, isso em sua versão gratuita,
caso o código da aplicação seja algo sigiloso a versão paga do GitHub permite publicar
o site mesmo com o repositório fechado ao público externo.
No entanto, pelo fato do GitHub Pages não possuir suporte à linguagem
PHP a função do campo de e-mail ficou obsoleta, mesmo que o código esteja correto
o navegador apenas lia essa informação e mostrava ao usuário, o qual era claramente
um erro gravíssimo e por isso houve a necessidade de procurar um outro serviço de
hospedagem que suportasse o PHP. Desse modo, o serviço de hospedagem
escolhido foi o WebHost da Hosting, visto que possui suporte às linguagens dinâmicas
de desenvolvimento, ou seja, o campo de e-mail finalmente pode ser implementado e
o usuário poderá enviar e-mail sem que haja problemas. Outra qualidade desse
serviço é que é bastante acessível, pois é disponibilizado de forma gratuita e fornece
uma interface para colocar os arquivos html, css, php e pastas que contenham
imagens e, assim, organizando esse conteúdo de forma hierárquica para que a pagina
possa ser publicada e carregada na internet. No entanto, por ser um serviço gratuito
possui certas instabilidades de conexão e funcionamento do css, mas nada que
interfira o serviço de e-mail.
 24

Figura 15: Mensagem entregue na caixa de entrada

Fonte: Produção própria (2020).

5. SISTEMA WEB
Figura 16: Home do Site

Fonte: Produção própria (2020).

Figura 17: Sobre o proprietário

Fonte: Produção própria (2020).

 25

Figura 18: Portfólio do site

Fonte: Produção própria (2020).

Figura 19: Mídias do site

Fonte: Produção própria (2020).

Figura 20: Seção de contato

Fonte: Produção própria (2020).

 26

6. CONCLUSÃO
Frente as adversidades enfrentadas durante o desenvolvimento do projeto
foi uma experiência bastante significativa, única e vasta de conhecimento envolvendo
aplicações e ferramentas de desenvolvimento de sites. A partir desse trabalho o
repertório técnico aumentou consideravelmente, além da questão social e pessoal.
Portanto, é válido afirmar que esse projeto é algo fundamental, o qual pode auxiliar
uma grande parcela da população no meio trabalhista, pois oferece um recurso a mais
para esses indivíduos utilizarem no mercado de trabalho pelo fato de promover o
trabalho de cada um de forma objetiva e coesa, além de proporcionar uma sensação
de confiança tanto para o cliente, empresas e o próprio profissional. Por fim, pode-se
dizer que durante o final do desenvolvimento desse artigo foi possível criar um modelo
de currículo web prático e responsivo.

6.1 RECOMENDAÇÕES PARA TRABALHOS FUTUROS

Primeiramente, graças ao início desse projeto é válido enfatizar que a partir
dele é possível motivar o desenvolvimento de diversas melhorias em sua estrutura e
o acréscimo de novas aplicações que permite o usuário, o qual esteja acessando o
site tenha mais conforto ao navegar nos conteúdos e também possibilitar um canal
mais confiável e rápido de comunicação para clientes ou empresas que possam querer entrar
em contato com o proprietário da página.
Uma mudança significativa e necessária para o projeto seria a questão de
uma migração do serviço de hospedagem gratuito para um pago, pelo fato dele
promover inúmeras vantagens em relação ao um serviço gratuito, por exemplo a
rapidez do carregamento do site, criptografia mais segura, possibilidade de escolher
o domínio do site e prover suporte às linguagens utilizadas. Muitos serviços possuem
essas características e muito mais, o grande exemplo é a própria Hosting, o qual não
possui apenas um serviço de hospedagem de graça, mas também outros serviços
pagos, claro que caberá uma análise aprofundada sobre o que o cliente vai querer e
a questão orçamentária.
Nesse enfoque, a questão da migração de serviços de hospedagem é algo
necessário para que o site possa ser publicado e executar todas as suas tecnologias,
pelo fato dos serviços gratuitos possuírem certas limitações, como por exemplo o
GitHub Pages, cujo não possui suporte às linguagens dinâmicas, ou seja, mesmo que
o código de uma determinada aplicação esteja coerente e no momento que o site é
 27

colocado na internet, infelizmente o serviço que essa aplicação deseja executar não
irá acontecer. No caso do projeto desenvolvido, houve um problema em relação a
linguagem PHP e o serviço do GitHub, cujo não tem suporte para linguagens
dinâmicas, assim os navegadores não conseguiam compreender o código da
aplicação e apenas imprimia o código todo para o usuário. Segue a baixo o envio não
executado da mensagem do campo de e-mail do site:

Figura 21: Falha no envio do e-mail

Fonte: Produção própria (2020).

Além disso, outro fator que pode ser abordado é a questão do framework.
Basicamente, é um template com diversas funções que podem ser utilizadas pelo
programador para agilizar o trabalho na criação de um site e também poder gerenciar
de forma mais rápida o projeto, assim caso tenha algum erro ou instabilidade vai ser
mais rápido para o desenvolvedor fazer um diagnóstico da aplicação e prover soluções
para diferentes problema que venham ocorrer no futuro. Pode-se dizer que essa
tecnologia possui uma grande variedade de parâmetros e dessa maneira permitindo
a possibilidade de personalizações de acordo com a necessidade do site em questão.
Por fim, o termo framework é extremamente imenso pelo fato de existir
 28

números modelos, praticamente cada linguagem de programação possui um

framework distinto, com suas peculiaridades, vantagens e desvantagens. Temos o
próprio Bootstrap que é específico para o front-end, ou seja, prover mecanismos de
moldar a estética do site, sem se importar com o banco de dados. Outro exemplo é o
Django que é escrito pela linguagem python e possui um foco mais para o back-end,
o qual se preocupa com o que tem por trás de uma determinada aplicação. Portanto,
cabe ao programador pesquisar qual framework mais se adeque a aplicação que ele
deseja construir. Contudo, antes é necessário ter um domínio razoavelmente da
linguagem de programação do framework escolhido, pois usa-se funções dessas
tecnologias, as quais muitas vezes estão relacionadas aos conceitos de orientação a
objetos de cada linguagem.
 29

REFERENCIAS

[1] L, Andrei. A história da internet – Do início ao status atual de rede. Weblink.

Disponível em: < https://www.weblink.com.br/blog/historia-da-internet/ > Acesso
em 17 de jun. de 2020.

[2] NOGEUIRA, Luiz. Dados mostram o crescimento impressionante da internet

em 10 anos. Olhar digital. Disponível em: <
https://olhardigital.com.br/noticia/dados-%20mostram-o-crescimento-
impressionante-da-internet-em-
10%20anos/85914#:~:text=Segundo%20dados%20da%20Netcraft%2C%20at%C
3%A9,do%20%20que%20h%C3%A1%20dez%20anos.> Acesso em 17 de jun. de
2020.

[3] Internet é a fonte de informação mais popular para pesquisas. Cultura Estado
Disponível em: <https://cultura.estadao.com.br/noticias/geral,internet-e-a-fonte-
de- informacao-mais-popular-pesquisa,388819 > Acesso em 17 de jun. de 2020.

[4] Dificuldade em currículo é obstáculo para conseguir emprego, diz pesquisa. G1 globo.
Disponível em: <http://g1.globo.com/concursos-e-
emprego/noticia/2013/06/dificuldade-em-curriculo-e-obstaculo-para-conseguir-
emprego-diz-pesquisa.html> Acesso em 17 de jun. de 2020.

[5] Crie novos modelos de negócios com o Sebrae Canvas. Sebrae Canvas.
Disponível em: < https://sebraecanvas.com/#/ > Acesso em 17 de jun. de 2020.

[6] O que é um site on page? Conheça 3 vantagens e desvantagens. Webrain.

Disponível em: < https://webrain.com.br/blog/site-one-page/ > Acesso em 17 de
jun. de 2020.

[7] JOSÉ, Edson. Introdução ao Visual Studio Code. Devmedia. Disponível em: <
https://www.devmedia.com.br/introducao-ao-visual-studio-code/34418>. Acesso
em 17 de jun. de 2020.
 30

[8] HTML Introduction. W3schools. Disponível em:

<https://www.w3schools.com/html/html_intro.asp.> Acesso em 17 de jun. de 2020.

[9] CSS Introduction. W3schools. Disponível em:

<https://www.w3schools.com/css/css_intro.asp> Acesso em 17 de jun. de 2020.

[10] Intro to CSS 3D transforms. 3dtransforms desandro. Disponível em: <

https://3dtransforms.desandro.com/perspective> Acesso em 17 de jun. de 2020.

[11] SILVA, Giancarlo. O que é e como funciona a linguagem javascript?.

Canaltech. Disponível em: <https://canaltech.com.br/internet/O-que-e-e-como-
funciona-a-linguagem-
JavaScript/#:~:text=Assim%20sendo%2C%20o%20JavaScript%20fornece,propor
cionada%20pelo%20CSS%20nessas%20p%C3%A1ginas.> Acesso em 17 de
jun. de 2020.

[12] METRING, Ricardo. Como utilizar o Google Fonts – passo a passo ilustrado.
Metring. Disponível em: < https://metring.com.br/como-utilizar-o-google-fonts >
Acesso em 17 de jun. de 2020.

[13] O que é uma imagem vetorial? quando e porque utilizar esse tipo de arquivo.
Afixgraf. Disponível em: < http://www.afixgraf.com.br/o-que-e-uma-imagem-
vetorial/ > Acesso em 17 de jun. de 2020.

[14] Trabalhar com o GitHub Pages. Help github. Disponível em: <
https://help.github.com/pt/github/working-with-github-pages > Acesso em 17 de jun.
de 2020.

[15] DELAVY, Eduarda. Mobile First: o que é e quais as vantagens de utilizar essa
técnica para criar um site. HostGator. Disponível em: <
https://www.hostgator.com.br/blog/mobile-first-o-que-e/ > Acesso em 17 de jun. de
2020.
Cópia de documento digital impresso por Fabio Silva (1364680) em 11/12/2020 09:40.

Documento Digitalizado Público

TCC do Aluno atualizado

Assunto: TCC do Aluno atualizado

Assinado por: Clauber Bezerra
Tipo do Documento: Documento de Oficialização de Demanda
Situação: Finalizado
Nível de Acesso: Público
Tipo do Conferência: Cópia Simples

Documento assinado eletronicamente por:

Clauber Gomes Bezerra, PROFESSOR ENS BASICO TECN TECNOLOGICO, em 02/12/2020 13:02:59.

Este documento foi armazenado no SUAP em 02/12/2020. Para comprovar sua integridade, faça a leitura do QRCode ao lado ou acesse
https://suap.ifrn.edu.br/verificar-documento-externo/ e forneça os dados abaixo:

Código Verificador: 681401

Código de Autenticação: 51d3653b7b

Página 1 de 1