COLÉGIO ANALISE

Daniel de Freitas Esótico

SITE INFORMATIVO
Vikings

São Paulo
2016
Daniel de Freitas Esótico

Site Informative: Vikings

Trabalho de conclusão de curso apresentado pelo
acadêmico Daniel de Freitas Esótico como
exigência parcial do curso Técnico em Informática
do Colégio Análise sob a orientação da professora
Kátia Striitzel.

São Paulo
2016
 3

Daniel de Freitas Esótico

Vikings

Para avaliação final deste, foram considerados o trabalho escrito e a apresentação a Banca
Examinadora, como requisito parcial para a obtenção do título de Técnico em Informática,
pelo curso de Informática com 150 horas de duração do Colégio Análise desta forma,
considerar o aluno descrito acima como APROVADO.

São Paulo,____ outubro de 2016.

Nota: __________

ORIENTADOR

_________________________

Kátia Striitzel
 4

DEDICATÓRIA

Dedico este trabalho a Deus, ele está presente em todo meu caminho e a minha
professora Kátia e o professor Jefferson, por ter paciência na orientação ao qual ajudaram na
conclusão deste trabalho.
 5

AGRADECIMENTOS

Agradeço a todos que fizeram parte diretamente ou indiretamente influenciando no

término do trabalho e do curso, eu fico muito contente ter passado mais um ano com vocês,
muito obrigado.
 6

“Que os vossos esforços desafiem as

impossibilidades, lembrai-vos de que as
grandes coisas do homem foram
conquistadas do que parecia impossível”.
Charles Chaplin.
 7

RESUMO

Este trabalho teve como objetivo a criação de um site informativo. As páginas da web
se tornaram uma fonte de conhecimento ilimitado, de certa forma, ele auxilia a novos
descobrimentos mais rapidamente, e utilizarei do mesmo para a conclusão do trabalho de
curso, sobre um povo nórdico antigo, onde muitos deveriam conhecer.
Os Vikings tem uma cultura muito rica em conhecimento, e fizeram diversas coisas
que o mundo deveria saber. Tendo em mente, grandes guerreiros ao qual não temiam a morte,
onde dominaram e saquearam grande parte da Europa. Tais feitos deveriam ser lembrados e
visto como eram grandiosos, por tal motivo a finalidade de demonstrar a tradição e cultura
dos Vikings por um site informativo.
Para o mesmo ser desenvolvido, ele teve a base a partir do HTML (HyperText Merkup
Language), onde utiliza códigos no Notpad++, um software responsável por auxiliar a
codificação juntamente com o CSS (Cascading Style Sheets) ajuda a deixar as páginas mais
“redondas”, deixando a sua navegação mais interativa. Serve para auxiliar e facilitar o usuário
na hora da criação de suas páginas da web.

Palavras chaves: CSS, HTML, Informativo e Site.

 8

ABSTRACT

This study aimed to create an informative website. Web pages have become a source
of unlimited knowledge, in a way, it helps the new discoveries more quickly, and will use the
same to complete the course work on an ancient Nordic people, where many should know.
The Vikings have a very rich culture knowledge, and did several things that the world
should know. Bearing in mind, great warriors which did not fear death, which dominated and
plundered much of Europe. Such deeds should be remembered and were seen as grandiose,
therefore the purpose of demonstrating the tradition and culture of the Vikings by an
informative website.
For it to be developed, it was the base from the HTML (HyperText Merkup
Language), which uses codes in Notpad ++ a software responsible for assisting the coding
along with CSS (Cascading Style Sheets) helps make the most "round pages ", leaving its
more interactive navigation. It serves to assist and facilitate the user at the time of creating
your web pages.

Key words: CSS, HTML, Informative and Website.

 9

LISTA DE GRÁFICO

Gráfico 1- Estudo de Campo..................................................................................................23

Gráfico 2- Estudo de Campo..................................................................................................23

Gráfico 3- Estudo de Campo..................................................................................................24

Gráfico 4- Estudo de campo...................................................................................................24

Gráfico 5- Gráfico de Gantt...................................................................................................31

 10

Lista de Figuras

Figura 1- Notpad++...................................................................................................................21

Figura 2- Editor Online.............................................................................................................21

Figura 3- Photoshop..................................................................................................................22

Figura 4- Gantt Project..............................................................................................................22

Figura 5- Sigla HTML..............................................................................................................22

Figura 6- Sigla CSS...................................................................................................................22

Figura 7- Excel..........................................................................................................................22

Figura 8- Home (site)................................................................................................................25

Figura 9- Temporadas (site)......................................................................................................26

Figura 10- Os Vikings (site)......................................................................................................27

Figura 11- Loja (site)................................................................................................................28

Figura 12- Fale Conosco (site)..................................................................................................29

Figura 13- Diagrama de Caso de Uso.......................................................................................32

 11

SUMÁRIO

1. Introdução......................................................................................................................1
2
2. História do
HTML.........................................................................................................14
3. História do CSS.............................................................................................................15
4. História do Vikings.......................................................................................................16
5. Problemática..................................................................................................................17
6. Objetivo Geral...............................................................................................................18
6.1. Objetivo Específico....................................................................................18
7. Como Funciona.............................................................................................................19
8. Justificativa....................................................................................................................2
0
9. Metodologia..................................................................................................................21
10. Estudo de Campo..........................................................................................................23
11. Site.................................................................................................................................2
5
12. Código Site....................................................................................................................30
13. Diagrama de Caso de Uso.............................................................................................32
14. Gráfico de Gantt............................................................................................................33
15. Conclusão......................................................................................................................34
16. Webgrafia......................................................................................................................35
 12

1. INTRODUÇÃO

O HTML (HyperText Markup Leanguage) tem facilidade de manipulação é um tipo de

linguagem computacional capaz de criar o que nós chamamos de sites.
Juntamente com ele, temos o CSS ( ), que seria uma implementação do HTML, pois
ele auxilia a facilitar todos os códigos e a deixar o site mais “redondo”. Ou seja, seria uma
linguagem onde daria forma para o seu site, deixando-o mais atrativo e fazendo a pessoa
navegar por ele. E com auxílio de tudo isso, foi desenvolvido um site onde é mostrada a
cultura Nórdica e sobre o seriado Vikings, pois há dificuldade de achar informações sobre os
assuntos abordados em um mesmo site.
Os Vikings é um seriado lançado em 2013, criado por Michael Hirst. A mesma relata
sobre um grande herói chamado Ragnar Lothbrok, o primeiro Nórdico a fazer expedições
rumo ao oeste.
Em sua primeira temporada, Ragnar é apenas um agriculto que jurou serviços a
Haraldson, sendo assim, ele obedeceria apenas ao lorde. Todos os anos eles iam para o leste,
contudo Ragnar deu uma ideia de ir para o oeste, onde haveria mais riquezas e terras. O
Haraldson o menosprezou, ignorou o pedido. Depois de pedido negado, Ragnar foi atrás do
artesão Floki, onde pediu para construir um barco e viajaria rumo a oeste, chamando os
melhores guerreiros para ir junto. Após longos dias de viagens, eles chegam a Nortúmbria,
onde saqueiam o templo dos monges, conseguindo muito ouro, prata e escravos. O escravo
Althelstan foi levado pelo próprio Ragnar para ser seu, e ao longo da história eles irão
desenvolvendo uma grande amizade.
Em seu segundo ato, irá acontecer uma grande batalha, onde o rei Horik, declara
guerra contra Jarl Borg, e com seu aliado Rollo, pois o mesmo estava cansado de viver na
sombra do irmão Ragnar, amargurado ele ataca seus amigos, ferindo muitos e matando um.
Após todos ver Rollo atacando Floki, todos param a guerra e fazem uma trégua, onde o lorde
Ragnar e os reis conversaram e decidiram juntar forças para poder ir dominar o oeste.
Posteriormente quatro anos com o retorno do filho de Ragnar que foi embora, iniciaram as
 13

expedições. Foi longos dias de viagens, tendo uma tempestade ao qual mudou o rumo dos
Vikings para Wessex, onde era o rei Ecbert.
A terceira temporada já inicia com o Ragnar se tornando rei, e começa com uma
grande responsabilidade seus ombros. Depois de muita conversa com o rei Ecbert, ele deu um
pedaço de terra aos Vikings, fazendo assim, os guerreiros voltarem para suas terras, deixando
apenas agricultores no local. Logo ao chegar a casa, o rei Ragnar se vê apreensivo, querendo
não só ouro e prata, mais conquistas. Althelstan lhe fala de um local impenetrável, chamado
de Paris, onde existem muros enormes e grandes guerreiros a protegem, chamando a atenção
do rei. Após conseguir reunir aliados, Ragnar ataca Paris, e fracassa, perdendo muitos
homens. Vendo que realmente era impenetrável, o rei pensa em uma estratégia que somente
ele e seu filho Bjorn irão saber.
 14

2. HISTÓRIA DO HTML

O HTML foi criado em meados de 1991, por Tim-Benners Lee no CERN (European
Council for Nuclear Research). Inicialmente, o HTML foi criado para conseguir interligar as
pesquisas próximas e facilitar o compartilhamento de documentos. Em 1992, foi criado o
WWW (Word Wide Web), que foi liberado mundialmente para todas as pessoas conseguir
utilizar. Conseguindo compartilhar arquivos com outros.

O HTML é uma linguagem de marcação. Estas linguagens são constituídas de códigos

específicos para determinados conteúdos. Estes códigos definem tudo o que pode ser feito no
HTML: criar tabelas, mudar as letras, cor, tamanho, entre outros.
 15

3. HISTÓRIA DO CSS

O CSS (Cascading Style Shets) foi mostrado pela primeira vez em outubro de 1994,
com o propósito de facilitar toda a programação de um site, na época era muito mais
complexa que as de hoje em dia. Em 1995 foi criado o CSS 1, foi desenvolvido pela empresa
de informática W3C, fazendo somente sucesso entre os programadores em 1997 a 1999. O
CSS é uma linguagem que determina o layout da página, e também facilita os códigos dentro
do HTML.
 16

4. HISTÓRIA DO VIKINGS

Os Vikings são uma civilização muito antiga, originada da região Escandinávia. São
conhecidos como nórdicos ou normandos eles tem uma rica cultura que se desenvolveu graças
as práticas agrícolas, artesanato e comercio marítimo. Com a vida voltada para a maré, a
pirataria também se tornou comum entre eles, tornando uma atividade econômica. Em várias
expedições voltadas para a Europa, eles saquearam e conquistaram a região da Bretanha
(Reino Unido atualmente).

A vida dos vikings era totalmente diferente das vidas atuais, tinham costumes de
adorarem diferentes deuses e fazer diferentes rituais de sacrifício tanto com humanos quanto
com os animais. Toda vez que precisavam que algo importante eles ofereciam um animal a o
deus, como por exemplo, Thor para que eles tenham uma boa viagem ou Frey para uma
pessoa melhorar de uma doença ou ter um filho saudável.

Eram pessoas muito agressivas contra as pessoas que não seguiam sua religião ou
zombavam dela. São famosos por conquistarem diversos territórios ao logo da sua história.

O local onde moravam eram simples, as dos residentes e trabalhadores eram de

madeira com palha, já algumas casas dos lordes ou reis eram feitas de pedra.
 17

5. PROBLEMÁTICA

Fazendo pesquisas em sites de busca, percebi ao visitar: existem poucos sites que
contém a cultura Nórdica e o seriado Vikings como complementação, consequente não há
informações completas em um mesmo local.

Com base nisso, desenvolvi um site a base de HTML e CSS para reunir todas as
informações, facilitando quem estiver pesquisando sobre o mesmo.
 18

6. OBJETIVO GERAL

Cumprir a necessidade de suprir a curiosidade de diversas pessoas que procuram

informações sobre os Vikings e os Nórdicos, sempre buscando o máximo de informações e
mantendo atualizado para ficarem por dentro das novidades do seriado.

6.1 OBJETIVOS ESPECÍFICOS

Utilizando a linguagem HTML e CSS, foi desenvolvido um site abordando todos os

tipos de informação sobre os Vikings e os Nórdicos, facilitando a pesquisa e a busca de
informações sobre o mesmo.
 19

7. COMO FUNCIONA

O site funciona em base de um tipo de linguagem de marcação de texto chamada

HTML mais o CSS que é um tipo de formatação, utilizando diversos códigos, deixando mais
interativo para o usuário.
No site, temos total dinâmica com o internauta, deixando a navegação mais fluida e
facilitando todo o entendimento do conteúdo ao qual passamos para quem estiver pesquisando
sobre os Vikings e Nórdicos.
O site é dividido em cinco partes, sendo elas: Home, Temporadas, Os Vikings, Loja e
Fale Conosco. No Home teremos a abertura do site, mostrando tudo contém. Em Temporadas
temos a sinopse de todos os andamentos da série até o atual. Os Vikings mostra sobre a
cultura nórdica e algumas curiosidades do mesmo. A loja, o local onde está em exposição
diversos itens Vikings para vender ao usuário. E o contato, para qualquer dúvida ou melhoria
dentro do site e orçamentos.
 20

8. JUSTIFICATIVA

Este site foi criado para quem gosta da cultura Nórdica ou somente gosta do próprio
seriado Vikings.
O site aborda todo tipo de informação dos Nórdicos e do seriado Vikings, mostrando
todo conteúdo sobre o mesmo, facilitando o trabalho das pesquisas sobre eles.
 21

9. METODOLOGIA

Neste trabalho, foram utilizadas diversas ferramentas para desenvolvimento do site.

Utilizando o NotePad++ juntamente com o HTML e CSS, para criação do site.
O NotePad++ seria um Bloco de Notas mais atualizado, facilitando a utilização dos
códigos, deixando muito mais fácil.
O Editor Online é um editor de fotos, somente aumentando ou diminuindo imagens,
ou somente tirando o fundo, deixando ela em PNG.
O aplicativo do PhotoShop adobe foi utilizado para maiores edições nas imagens, para
conseguir trazer algo mais gracejado dentro do site.
Utilizei o Excel para montagem de gráficos, onde fiz a pesquisa de campo.
Gantt Project foi utilizado acompanhamento das tarefas do site.

Fonte: http://mrcruwys.com/media/images/npplusplus_logo.png Fontehttp://www.clickgratis.com.br/blog-clickgratis/wp-

Figura 1 content/uploads/2014/04/Photoshop_Online_thumb31.png

Figura 2
 22

https://pixabay.com/p-1065296/?no_redirect
Figura 4

https://repo.openpandora.org/files/pnd/ganttproject/01.jp
Figura 3

http://simplificandoaweb.com/wp-
content/uploads/2015/02/css_cascading_style_sheet.jpg
Figura 6

http://www.kerodicas.com/wp-content/uploads/2008/01/logo-
html.jpg

Figura 5

http://imageframe.co.uk/wp-
content/uploads/2014/04/AppsLogo_rgb_Excel_Grn348.png

Figura 7
 23

10. ESTUDO DE CAMPO

A pesquisa foi realizada com vinte pessoas em agosto de 2016.

Fonte:Fonte Própria.

Fonte: Fonte Própria.

 24

Fonte:Fonte Própria.

Fonte: Fonte Própria.

 25

11. SITE

O site foi desenvolvido em HTML e CSS, utilizando o editor Notepad++, ambos

escolhidos por conta de afinidade.

Figura 1 – Homepage (site):

Fonte: Fonte própria.

Figura 8
 26

Figura 2 – Temporadas (site):

Fonte: Fonte própria.

Figura 9
 27

Figura 3 – Os Vikings (site):

Fonte: Fonte própria.

Figura 10
 28

Figura 4 – Loja (site):

 29

Fonte: Fonte própria.

Figura 11
 30

Figura 5 – Fale Conosco (site):

Fonte: Fonte própria.

Figura 12
 31

12. CÓDIGO SITE

 32

<html> Tag para começar a trabalhar com o HTML;

________________________________________________________________________________________
<head> Cabeça do HTML;
________________________________________________________________________________________
<meta http-equiv="content-type" content="text"; charset="utf-8"/> Tag para funcionamento do envio de
mensagem do “fale conosco”;
________________________________________________________________________________________
<title>Os Vikings</title> Título do site;
_______________________________________________________________________________________
<link href="estilo.css" rel="stylesheet"
type="text/css"/> Linkando o CSS no HTML;
_______________________________________________________________________________________

<body> Corpo do HTML, onde se localiza o conteúdo;

_______________________________________________________________________________________
<div id="principal"> Divisão da parte principal do site das demais;
_______________________________________________________________________________________
<div id="topo"> Divisão da parte do topo do site;
________________________________________________________________________________________

</div> Fechamendo da divisão;

________________________________________________________________________________________
<div id="menu"> Divisão da parte menu do site;
________________________________________________________________________________________
<table width="900" border="0"> Montando uma tabela e especificando seu tamanho e a borda;
________________________________________________________________________________________
<tr> Coluna da tabela;
________________________________________________________________________________________
<td><a href="index.html">Home</a></td> Linkando a página index.html a palavra “Home”;
________________________________________________________________________________________
<td><a href="temporadas.html">Temporadas</a></td> Linkando a página temporadas.hmlt a palavra
“Temporadas”;
________________________________________________________________________________________
<td><a href="vikings.html">Os Vikings</a></td> Linkando a pagina Vikings.html a palavra “Os Vikings”;
________________________________________________________________________________________
<td><a href="loja.html">Loja </a></td> Linkando a pagina loja.html a palavra “Loja”;
________________________________________________________________________________________
<td><a href="fale-conosco.html">Fale Conosco</a></td> Linkando a pagina fale-conosco.html a palavra
“Fale Conosco”;
________________________________________________________________________________________
</tr> Coluna da tabela;
________________________________________________________________________________________
</table> Fechamento da tabela;
________________________________________________________________________________________
</div> Fechamento da divisão;
________________________________________________________________________________________
<div id="conteudo"> Divisão da parte do conteúdo;
________________________________________________________________________________________
<h2 class="titulo"><center>Deixe seu comentário para a melhoria do site.</center></h2> Título da parte do
conteúdo;
________________________________________________________________________________________
<p class="paragrafo"> Tag para dar parágrafo;
________________________________________________________________________________________
</p> Fechamento do parágrafo;
________________________________________________________________________________________
33
 34

<br><br><center><a id="foxyform_embed_link_158758">
<script type="text/javascript">
(function(d, t){
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = "http://br.foxyform.com/js.php?id=158758&sec_hash=0bee02de2ae&width=350px";
s.parentNode.insertBefore(g, s);
}(document, "script"));
</script></center> Tag complete para funcionamento do fale conosco;
________________________________________________________________________________________
</div> Fechamento da divisão;
________________________________________________________________________________________
<div id="lateral"> Divisão da parte lateral do site;
________________________________________________________________________________________
<div id="redesocial"> Divisão da redes sociais do site;
________________________________________________________________________________________
<h2><span class="titulo"> redes Sociais</span></h2>
<a href="https://www.facebook.com/VikingsSeriesBrasil/?fref=ts"> <img src="facebook.png"
alt="facebook"></a> Linkando o site do facebook com a imagem facebook;
________________________________________________________________________________________
<a href="https://twitter.com/historyvikings?lang=pt"><img src="twitter.png" alt="twitter"><a>
<img src="wapp.jpg" alt="wapp"> Linkando o twitter com a imagem do twitter;
________________________________________________________________________________________
</div> Fechamento da divisão;
________________________________________________________________________________________
<div id="ferramentas"> Divisão ferramentas, dentro da div lateral;
________________________________________________________________________________________
<h2><span class="titulo">Enquete</span></h2>
<form id="form1" methot="post"
action=""> Montando a esquete.
________________________________________________________________________________________
<p>Qual foi a melhor temporada dos Vikings?</p>

<input type="radio" name="radio" id="1temporada" value="1temporada"/>

1ªTemporada<br>

<input type="radio" name="radio" id="2temporada" value="2temporada"/>

2ªTemporada<br>

<input type="radio" name="radio" id="3temporada" value="3temporada"/>

3ªTemporada<br>

<input type="radio" name="radio" id="4temporada" value="4temporada"/>

4ªTemporada<br>

<br/><br/> Tags para organizar as perguntas, e montar as bolinhas para seleção;

________________________________________________________________________________________
<input name="enviar" type="submit" id="enviar" value="Enviar"/> Tag para criar o botão enviar;
________________________________________________________________________________________
</form> Fechamento da enquete;
________________________________________________________________________________________
</div>
</div> Fechamento das divisões abertas;
________________________________________________________________________________________
 35

13. DIAGRAMA DE CASO DE USO

O diagrama mostra quais as relações do administrador com o Site. Ele terá acesso a
todas as abas mostradas pelo diagrama, deixando mais fácil o entendimento do site para o
usuário.

Fonte: Fonte Própria. Figura 13

 36

14. GRÁFICO DE GANTT 2016

O gráfico de Gantt é responsável por representar as etapas de um projeto, destacando

seu início, duração e término, através de sua análise e possível observar andamento do
trabalho, traçar planos com consciência do tempo e progresso, ou seja, o gráfico de Gantt e de
grande importância, pois auxilia na organização.
Logo abaixo estão os gráficos de Gantt que mostram o desenvolvimento do Trabalho
de Conclusão de Curso e o site informativo.

Fonte: Fonte própria.

 37

15. CONCLUSÃO

Concluo através de pesquisas e deste trabalho como os Vikings e os Nórdicos são uma
civilização muito antiga que tiveram feitos inimagináveis, através dos tempos ficaram
marcados na história por seus grandes atos. No site sobre o mesmo, utilizamos uma
linguagem HTML juntamente com o CSS para conseguir fazer um site interativo informando
todos que queiram saber mais sobre o tema.
Fazendo uma pesquisa de campo, descobrimos que as pessoas ainda se interessam
pelos Nórdicos e também o seriado Vikings.
 38

16. WEBGRAFIA

DEUSES DA MITTOLOGIA
Disponível em: http://deusesdasmitologias.blogspot.com.br/p/nordicos.html
Acesso em:01/08/2016

DEUSES NÓRDICOS
Disponível em:http://mundoestranho.abril.com.br/materia/quais-sao-os-principais-deuses-
nordicos
Acesso em: 01/08/2016

DIAGRAMAS
Disponível em: http://www.dsc.ufcg.edu.br/~sampaio/cursos/2007.1/Graduacao/SI-
II/Uml/diagramas/usecases/usecases.htm
Acesso em:21/08/2016

GRAFICO DE GANTT
Disponível em: http://landing.runrun.it/voce-quer-gerenciar-seu-projeto-com-grafico-de-
gantt/?utm_source=google&utm_medium=cpc&utm_campaign=BR%20-%20Search%20-
%20Gantt&gclid=CKmUn_2Kv88CFRWAkQodr0sAYA
Acesso em: 21/08/2016

HISTÓRIA DO HTML
Disponível em: http://www.frontendbrasil.com.br/artigos/a-historia-do-html/
Acesso em: 20/08/2016

HISTÓRIA DO CSS
Disponível em: http://tableless.com.br/uma-breve-historia-do-css/
Acesso em: 20/08/2016

MITOLOGIA NÓRDICA
Disponível em: http://www.infoescola.com/mitologia/mitologia-nordica/
Acesso em: 15/08/2016
 39

MITOLOGIA NÓRDICA
Disponível em: http://www.suapesquisa.com/mitologianordica/
Acesso em: 15/08/2016

NÓRDICOS
Disponível em: https://pt.wikipedia.org/wiki/N%C3%B3rdico
Acesso em: 03/08/2016

NÓRDICOS
Disponível em: https://pt.wikipedia.org/wiki/Mitologia_n%C3%B3rdica
Acesso em: 03/08/2016

VIKINGS BRASIL
Disponível em: http://vikingsbrasil.com.br/
Acesso em: 14/08/2016