ESCOLA ESTADUAL DE ENSINO MÉDIO PROFª MARIA ROCHA

CURSO TÉCNICO EM INFORMÁTICA INTEGRADO AO ENSINO

MÉDIO

LÉO DENARDIN SALDANHA

WEB CURRÍCULO E PORTIFÓLIO

Santa Maria, RS
2018
 LÉO DENARDIN SALDANHA

WEB CURRÍCULO E PORTIFÓLIO

Relatório Final de Conclusão de Curso

apresentado como requisito parcial para
obtenção do título de Técnico em Informática
da Escola Estadual de Ensino Médio
Professora Maria Rocha

Santa Maria, _____ de ____________de___

BANCA EXAMINADORA

__________________________________________________
Prof.ª Angélica Menegassi da Silveira

__________________________________________________
Prof.ª Orientadora Laísa Quadros da Costa

__________________________________________________
Prof.
 AGRADECIMENTOS

Agradeço primeiramente a minha mãe, os amigos que fiz durante o curso

técnico e ensino médio, e em especial meus amigos Fabio, Guilherme, Gabriel,
Leonardo e Miguel, e aos professores que tive durante essa jornada. Também
agradeço muito a meus amigos da STW.
“Excuse me for my plastic taste,
Excuse me for my plastic taste,
Excuse me for my plastic taste.”
(Joji)
 LISTA DE FIGURAS

Figura 1 - Exemplo de um website sem o uso de CSS ............................................. 11

Figura 2 - Exemplo do mesmo website, mas agora com o uso de CSS. ................... 12
Figura 3 – Comandos do Header .............................................................................. 13
Figura 4 – Comandos do CSS para o Header ........................................................... 14
Figura 5 – Resultado Header .................................................................................... 14
Figura 6 – Comando do HTML para o footer ............................................................. 14
Figura 7 – Comando do CSS para o footer ............................................................... 15
Figura 8 – Resultado do footer .................................................................................. 15
Figura 9 – Primeiro painel ......................................................................................... 16
Figura 10 – Segundo painel ...................................................................................... 17
Figura 11 – Terceiro painel........................................................................................ 17
Figura 12 – Comando HTML painéis......................................................................... 18
Figura 13 – Comandos CSS para o primeiro painel .................................................. 19
Figura 14 – Comandos CSS para o segundo painel ................................................. 20
Figura 15 – Comandos CSS para o segundo painel ................................................. 21
Figura 16 – Resultado Página de contato ................................................................. 22
Figura 17 – Comandos do HTML da Página de contato ........................................... 22
Figura 18 – Comandos do CSS da Página de contato .............................................. 23
 LISTA DE SIGLAS

CSS – Cascading Style Sheets

FGV – Fundação Getúlio Vargas
HTML – Hypertext Markup Language
Site – Website
TCC – Trabalho De Conclusão de Curso
 SUMÁRIO

1 APRESENTAÇÃO .................................................................................................... 8
2 DESENVOLVIMENTO ........................................................................................... 10
2.1 HTML E CSS ....................................................................................................... 10
2.2 EDITORES DE TEXTO ....................................................................................... 12
2.3 CABEÇALHO E RODAPÉ ................................................................................... 13
2.4 CORPO DO SITE ................................................................................................ 15
2.5 PÁGINA DE CONTATO ...................................................................................... 21
3 CONCLUSÃO......................................................................................................... 24
REFERÊNCIAS ......................................................................................................... 26
 8

1 APRESENTAÇÃO

Quando entrei no Curso de Técnico em Informática Integrado ao Ensino

Médio providenciado pela Escola Estadual de Ensino Médio Professora Maria Rocha
tive a oportunidade de aprender inúmeras disciplinas relacionadas a informática,
desde aprender e mexer com o hardware de um computador, que seriam as partes
físicas dele, e também com software como programação e banco de dados, e até
disciplinas como Direito e Segurança do Trabalho, isso me mostrou inúmeras coisas
que eu não conhecia sobre essas disciplinas, mesmo já entendendo um pouco sobre
computadores.
Mesmo que eu tenha sido um aluno infrequente que teve muitas faltas,
Programação Web, que foi uma matéria ensinada pela professora Glaucia Lorenzi,
foi uma das principais disciplinas, que me chamou bastante atenção e que eu tive
certa facilidade e vontade de aprender mais e buscar conhecimento nessa área.
Sempre gostei de usar a internet para qualquer coisa, gostava de vários
sites pelo simples fato de terem um design bonito, fluididade e ser responsivo sua
navegação, e o fato de poder aprender e conseguir fazer isso é algo que me cativou,
então decidi usar essa disciplina para fazer meu Trabalho de Conclusão de Curso e
criar algo como oque me fez gostar da internet.
Um site, ou website é, segundo Significados.com (acessado em 2018) “uma
página ou a um agrupamento de páginas relacionadas entre si, acessível na internet
através de um determinado endereço.”.
Em meu website usarei principalmente as linguagens de programação HTML
(HyperText Markup Language) e CSS (Cascading Style Sheets). HTML, segundo
Significados.com (acessado em 2018) “Consiste em uma linguagem de marcação
utilizada para produção de páginas na web, que permite a criação de documentos
que podem ser lidos em praticamente qualquer tipo de computador e transmitidos
pela internet.” e CSS, segundo w3.org (acessado em 2018) é "Cascading Style
Sheets (CSS) é um simples mecanismo para adicionar estilo (cores, fontes,
espaçamento, etc.) a um documento web”.
Com o uso dessas e outras ferramentas como um editor de texto para
coding, como o Sublime Text 3, que é usado para editar o código HTML e CSS com
mais facilidade, pretendo nesse trabalho de conclusão de curso criar um site com as
 9

principais funcionalidades que eu acho importantes em um website, pois vejo muitos

websites que poderiam ser ótimos, mas que tem uma usabilidade ruim, o que em
minha opinião acaba diminuindo seu número de visitas e com isso diminuindo o
número de pessoas que irão ver seu trabalho.
Segundo a Fundação Getúlio Vargas (FGV) o número de pessoas com
algum tipo de dispositivo conectado a internet é de 306 milhões, e segundo a
empresa de consultoria Gartner existe uma projeção que diz que até 2020
chegaremos a ter 50 bilhões de dispositivos conectados a internet.
Por causa desses dados acho importante a criação de um website com uma
usabilidade e funcionamento bom e didático.
 10

2 DESENVOLVIMENTO

Decidi criar um portfolio e currículo como o website para o TCC, pois é

importante para alguém que quer seguir na área de desenvolvimento para web ter
um portfolio em mídia digital, para que possa expor seu trabalho para possíveis
empregadores. Além disso, ter um portfolio da uma ideia de progressão, pois você
pode ver como seus primeiros projetos são em contraste com os mais novos.

Comecei com um objetivo, criar um site com design limpo e fácil de navegar,
após isso procurei sites portfolio de pessoas que trabalham na área de
desenvolvimento para web, para ter uma ideia dos padrões usados por eles, e
estuda-los para entender como uma pessoa olhando o site se sentiria e o que
chamaria mais atenção.

Para o melhor entendimento do trabalho e o tema a ser trabalhado primeiro

precisamos entender alguns conceitos básicos sobre internet e web development.

2.1 HTML E CSS

Segundo Silva (2018) “HTML é a sigla em inglês para HyperText Markup

Language, que, em português, significa linguagem para marcação de hipertexto”. E
hipertexto é “Todo texto inserido em um documento para a web e que tem como
principal característica a possibilidade de se interligar a outros documentos da web.”,
e segundo w3.org CSS é "Cascading Style Sheets (CSS) é um simples mecanismo
para adicionar estilo (cores, fontes, espaçamento, etc.) a um documento web”.
 11

Figura 1 - Exemplo de um website sem o uso de CSS

Fonte: Do autor (2018)

A figura 2 mostra a página com os comandos do CSS.

O CSS foi usado para dar uma aparência às informações contidas no website, e
deixar o website com um visual bonito, para engajar os visitantes e ajudar em ver as
informações.
 12

Figura 2 - Exemplo do mesmo website, mas agora com o uso de CSS.

Fonte: Do autor (2018)

2.2 EDITORES DE TEXTO

Para utilizarmos o HTML e CSS precisamos somente de um editor de texto,

pode ser utilizado, por exemplo, o editor padrão de texto do Windows, Bloco de
Notas. Mas alguns editores são criados especialmente para programação em certas
linguagens, podendo facilitar e melhorar sua fluidez na criação, podendo auto
completar tags, mostrar erros em cores chamativas parar poderem ser resolvidos
rapidamente.

Usarei dois editores de texto para completar esse projeto, chamados de

Sublime Text 3 e Brackets, ambos serão usados apenas por preferência pessoal,
pois não afetaram o produto final.
 13

2.3 CABEÇALHO E RODAPÉ

O Header da página foi construído com intuito de ser visualmente agradável

aos olhos, e funcional, sem muitas distrações.

Sua construção começou primeira com o HTML, criando assim sua base. A
figura 3 mostra as tags utilizadas para criação, sendo elas <header> que cria o
cabeçalho em si, <center> é utilizado para centralizar as tags <a>, que seriam os
links.

Figura 3 – Comandos do Header

Fonte: Do autor (2018)

CSS foi utilizado para sua estilização, continuando o tema de ser visualmente
limpo e simples.

A figura 4 mostra toda a estilização do cabeçalho, utilizo o CSS para

posicionar o cabeçalho na página, modificar seu tamanho mínimo, a cor dos links
dentro dele, sua imagem e borda, entre outras pequenas modificações.
 14
Figura 4 – Comandos do CSS para o Header

Fonte: Do autor (2018)

A figura 5 mostra o resultado final após todas as modificações.

Figura 5 – Resultado Header

Fonte: Do autor (2018)

O rodapé segue a mesma ideia de simplicidade, contendo somente a

identificação do criador.

A figura 6 mostra o como o rodapé foi codificado usando HTML.

Figura 6 – Comando do HTML para o footer

Fonte: Do autor (2018)

 15

A figura 7 mostra a estilização do rodapé.

Figura 7 – Comando do CSS para o footer

Fonte: Do autor (2018)

A figura 8 mostra como o rodapé aparece pronto no website.

Figura 8 – Resultado do footer

Fonte: elaborado pelo autor (2018)

2.4 CORPO DO SITE

O corpo do site conta com 3 painéis, cada um contendo informações

especificas, o primeiro painel é utilizado como uma introdução para a ideia do site,
mostrando meu nome e a descrição do site.

O formato e estilização dos painéis seguem um padrão, com títulos utilizando

letras mais grossas, e subtítulos utilizando letras mais finas, e o no fundo conta com
 16

imagens retiradas do site pexels.com, que trazem imagens em alta qualidade e

resolução para uso pessoal e comercial, sem precisar pagar.

Essa estilização dá ao site um bom contraste entre os elementos e cria uma

estética agradável aos olhos.

Todos os painéis usam 100% da largura do monitor do usuário visualizando o

site.

A figura 9 mostra o primeiro painel.

Figura 9 – Primeiro painel

Fonte: Do autor (2018)

O segundo painel é utilizado para listar as áreas de conhecimento que tenho

adquiridos no curso e fora dele, além de dizer o nível aproximado de conhecimento
que tenho sobre cada item. A figura 10 mostra o segundo painel.
 17

Figura 10 – Segundo painel

Fonte: Do autor (2018)

Uso o último painel para listar onde adquiri os conhecimentos, mostrados no

segundo painel, que variam do curso ate a sites educacionais na internet, e também
expor uma foto minha.

A figura 11 mostra o terceiro e último painel.

Figura 11 – Terceiro painel

Fonte: Do autor (2018)

A codificação do site, na parte de HTML, é relativamente simples, contando

com poucos elementos.

A figura 12 mostra o código em HTML, nele utilizo as tags <div> para definir
as divisões de painéis dentro do site, cada painel tem uma identificação própria para
poder estiliza-los no CSS sem afetar os outros.
 18

Figura 12 – Comando HTML painéis

Fonte: Do autor (2018)

 19

A parte em CSS foi mais complicada, pois cada painel precisava de

estilização individual e especificas.

Para o primeiro painel usei 3 classes, 2 para estilizar o texto, mudando a fonte
padrão para uma retirada do site fonts.google.com, e mudando seus tamanhos, cor
e alinhamento.

A última classe foi usada para regular o tamanho do painel, o alinhamento dos
itens dentro do painel, e também para mudar a foto de fundo.

A figura 13 mostra o código utilizado.

Figura 13 – Comandos CSS para o primeiro painel

Fonte: Do autor (2018)

O segundo e terceiro painel são bem similares, ambos contam com a mesma
codificação e estilização de texto, seguindo o mesmo padrão. A maior diferença está
 20

no tamanho do painel, o segundo painel tem um tamanho menor pois conta com
pouco conteúdo, já o terceiro tem a altura maior, pois tem uma lista em texto.

As figuras 14 e 15 mostram o código para seus respectivos painéis.

Figura 14 – Comandos CSS para o segundo painel

Fonte: Do autor (2018)

 21

Figura 15 – Comandos CSS para o segundo painel

Fonte: Do autor (2018)

2.5 PÁGINA DE CONTATO

A segunda e ultima Página do site é dedicada a mostrar meios para me

contatar.
 22

A Página é bem simples, tendo apenas uma foto de fundo, uma foto minha e
o link para meu Facebook e endereço de e-mail.

A figura 16 mostra a parte da Página que contem conteúdo, mostrando o

background, textos de contato e foto.

Figura 16 – Resultado Página de contato

Fonte: Do autor (2018)

Como a Página é bem simples, seu código também é simples, o cabeçalho e

rodapé da página são os mesmos da página principal, sendo somente copiado para
a segunda. A figura 17 mostra o código em HTML para a página de contato.

Figura 17 – Comandos do HTML da Página de contato

Fonte: Do autor (2018)

A figura 18 mostra o código em CSS para estilização da página, é um código

bem simples, mudando apenas o fundo da página, estilizando o texto para seguir no
padrão da Página inicial e dando uma sombra para o texto.
 23

Figura 18 – Comandos do CSS da Página de contato

Fonte: Do autor (2018)

 24

3 CONCLUSÃO

O objetivo desse TCC era a criação de um currículo e portfólio dentro de um

website, mantendo sempre um design limpo e agradável. Nos dias atuais, acho de
extrema importância alguém que queira seguir no ramo de desenvolvedor de sites
ter um portfólio online, para expor seus trabalhos passados, dando assim uma ideia
ao consumidor do que ele possa esperar como resultado após contratar esse
profissional.
Como tenho interesse em continuar seguindo esse caminho, decidi criar um
site base para um portfólio e currículo, podendo expandir ele sempre que criar um
projeto novo.
Durante a criação desse site tive a oportunidade de aprimorar meus
conhecimentos de HTML e CSS, aprendendo como fazer inúmeras coisas que não
sabia ate então, melhorei meu entendimento do uso da tag <div> para conter outros
objetos e edita-los sem mexer em outros objetos.
Também entendi melhor como funciona a criação de um site do inicio ao fim,
juntando tudo que tinha aprendido ate então em um só projeto, e a importância de
organizar seu código para poder arrumar problemas mais efetivamente, pois sabia
exatamente onde cada parte do site estava.
Percebi também que criar um padrão para seu site e segui-lo sempre é
importante para dar uma ideia de continuidade para quem esteja acessando o site,
pois seguindo sempre o mesmo padrão, mesmo que você não tenha visto uma
Página ainda, o usuário pode ter uma ideia de onde encontrar a informação que esta
procurando, sem ficar perdido.
Desenvolver esse site me fez perceber que programação para web é algo que
eu gostaria de aprender mais sobre, e talvez seguir como uma profissão, ou pelo
menos aprofundar meu conhecimento, pois no momento ainda estou no começo
desse aprendizado. Além disso, acredito que aprender programação é algo que
melhore meu aprendizado em geral, pois me faz abordar tudo de uma maneira
diferente, tentando entender como as coisas funcionam ao invés de simplesmente
faze-las.
Outra coisa que o curso me fez perceber, é que devo contar mais com as
pessoas para me ajudar a resolver problemas que eu não esteja conseguindo, em
 25

inúmeros momentos do curso, não estava conseguindo resolver algum problema, ou

meu código não funcionava, ou funcionava de um jeito diferente do que eu estava
esperando, e não conseguia resolver, mas pedir a opinião de uma pessoa ajudava,
pois trazia um ponto de vista diferente, ajudando assim a resolver o problema,
concertar o código, ou somente entender o porquê de não funcionar.
 26

REFERÊNCIAS

CSS. Disponível em: < https://www.w3.org/Style/CSS/Overview.en.html >. Acessado

em: 18/11/2018.

SIGNIFICADO DE HTML. Disponível em: < https://www.significados.com.br/html/>.

Acessado em: 18/11/2018.

SIGNIFICADO DE WEBSITE. Disponível em: <

https://www.significados.com.br/website/>. Acessado em: 18/11/2018.

SILVA, MAURICIO SAMY. Fundamentos de HTML5 e CSS3, 304 paginas.

Novatec, 2015.

FGV. Pesquisa em:

<https://eaesp.fgv.br/sites/eaesp.fgv.br/files/pesti2018gvciappt.pdf>. Acessado em:
18/11/2018