Aula 08 – Domínios e Hospedagem

PWR – PROGRAMAÇÃO WEB RESPONSIVA

PROFª LUCIANA AP. O. BETETTO

1
Agenda
1. O que é um domínio?
2. Adquirindo um domínio
3. Sites de Hospedagem
4. Tutorial: 000webhost

2
O que é um domínio?
Um domínio é um nome utilizado para identificar
um endereço da internet (IP, ou Internet Protocol);

Ele funciona como um facilitador para não

precisarmos decorar uma sequência de números.

3
O que é um domínio?
Um domínio é composto por um nome + extensão:

Existem várias extensões que podem ser utilizadas para

registro de um domínio. Segue algumas:

.com.br (destinada para fins comerciais)

.edu.br (destinada a entidades de ensino)
.org.br (destinada para entidades não governamentais)
.rec.br (atividades de entretenimento)
.art.br (atividades relacionadas a artes e folclore)

4
O que é um domínio?
Outras extensões:

• .com
• .info
• .biz
• .org
• .me

Mais informações:
https://registro.br/dominio/categoria.html

5
Adquirindo um domínio
Existem vários sites que podemos usar para adquirir
um domínio. Como exemplo, citaremos dois:

-https://registro.br/
- Só registra domínios terminados em .BR
-https://br.godaddy.com/
- Todos os tipos de extensões

6
Adquirindo um domínio
No site RegistroBR, o primeiro passo é criarmos um
Login.
Podemos então verificarmos se o nome do domínio que
queremos está disponível:

7
Adquirindo um domínio
Se encontrarmos um domínio que esteja disponível,
teremos a opção de registrar esse domínio.

8
Adquirindo um domínio
Se quisermos registrar, basta apertar o botão de
registro.

Se você estiver logado, após confirmar, um e-mail

será enviado com as informações p/ pagamento do
domínio.

9
Contratando uma hospedagem
Para hospedarmos um site, além de precisarmos de
um domínio registrado, é necessário também que
os arquivos do nosso site esteja publicado em
algum servidor.

O nome para esse tipo de serviço chama-se

hospedagem.

10
Contratando uma hospedagem
Quando um usuário acessa o domínio do site, ele deve
ser redirecionado para o servidor que os arquivos do
site estão. As configurações para esse redirecionamento
é realizada pelas empresas que fornecem esse tipo de
serviço.

11
Contratando uma hospedagem
Existem várias empresas que oferecem o serviço de
hospedagem. Seguem alguns exemplos:

Hostgator: https://www.hostgator.com.br/
UOL Hosts: http://www.uolhost.uol.com.br/
e-consulters: https://www.e-consulters.com.br/

12
Contratando uma hospedagem
Dependendo do plano adquirido, existem algumas
vantagens:

- Quantidade de domínios diferentes que o plano aceita

- Limitação de tráfego (muita acessando)
- Contas de e-mail que utilizam o domínio
- Espaço em disco
- Suporte da empresa de hospedagem

13
Tutorial: 000webhost
Iremos agora hospedar o site desenvolvido durante a aula
passada.

1º passo - Vamos acessar o site abaixo:

https://br.000webhost.com/

2º passo – Em seguida, clique

no botão de cadastro

14
Tutorial: 000webhost
3º passo - Agora vamos informar os
nossos dados para criarmos o Login.

4º passo – Abra seu e-mail e confirme

seu cadastro no link que você receber.

15
Tutorial: 000webhost
5º passo: Crie um novo site (caso não tenha) ou selecione o
que tiver registrado

16
Tutorial: 000webhost
6º passo: Informe um nome para o site. Após, copie e
guarde em um bloco de notas a senha que aparecer pois
iremos utilizar mais tarde.

17
Tutorial: 000webhost
Para fazer upload dos arquivos do site, uma opção é pela
própria página do 000webhost.

Porém NÃO SERÁ esse procedimento que iremos fazer

nessa aula. Iremos aprender agora a subir nossos arquivos
utilizando o Dreamweaver.

18
Tutorial: 000webhost
7º passo – Antes de abrirmos o Dreamweaver, acesse a aba
de configurações do seu site:

8º passo – Verifique se a opção FTP Transfer está ativada.

19
Tutorial: 000webhost +
Dreamweaver
9º passo - Agora abra QUALQUER UM dos projetos (sites)
que desenvolvemos durante a aula.
10º passo – Agora precisamos RENOMEAR a página
principal (inicial) do nosso site para index.html.

20
Tutorial: 000webhost +
Dreamweaver
11º passo – Acesse a opção “Manage Sites...” e clique duas
vezes sobre o nome do seu site.

21
Tutorial: 000webhost +
Dreamweaver
12º passo – Na aba Servers, clique no botão “Add new
Server” ou “+”

22
 13º passo – Na janela que aparecer, preencha os dados com
as informações do FTP (localizadas no mesmo lugar que
verificamos a opção FTP Transfer no site)

Observação:
Preencha o campo
Root Directory com o
valor /public_html

Esse valor indica a

pasta raiz do site,
que é definida pelo
000webhost

23
Tutorial: 000webhost +
Dreamweaver
14º passo – Após salvar essas informações, podemos dizer
que terminamos o processo de configuração.

Clique com o botão direito

na pasta do seu site na aba
Files e acesse a opção
“Synchronize...”

24
Tutorial: 000webhost +
Dreamweaver
15º passo – No campo “Synchronize:”, escolha a opção
“Entire ‘<nome do seu site>’ Site”.
Após, clique no botão “Preview...”

25
Tutorial: 000webhost +
Dreamweaver
16º passo – Espere carregar os itens. Após irá aparecer a
janela abaixo. Clique no botão “OK”

26
Tutorial: 000webhost +
Dreamweaver
17º passo – Depois de finalizar o processo, devemos testar o
nosso site. Acesse a URL e veja se funcionou corretamente.

27
Tutorial: 000webhost + Visual
Studio Code
Repetir os passos 1, 2, 3 e 4, pois eles servem para criar a
conta no 000webhost .

Agora, vamos ver o procedimento para subir os arquivos

utilizando o Visual Studio Code.

28
Tutorial: 000webhost + Visual
Studio Code
5º passo - Antes de irmos para o VS Code, volte no menu
Home e acesse a opção Configurações do Site > Geral

29
Tutorial: 000webhost + Visual
Studio Code
6º passo - Verifique se a opção FTP Transfer está ativada.

30
Tutorial: 000webhost + Visual
Studio Code
7º passo - Agora abra o projeto
(site) que deseja publicar no VS
Code.

8º passo - Confirme se a página

principal (inicial) do nosso site é a
index.html. Caso não seja,
renomeie com esse nome.

31
Tutorial: 000webhost + Visual
Studio Code
9º passo – Na aba “Extensões”, pesquise por ftp-simple. Clique
no botão “Instalar”.

32
Tutorial: 000webhost + Visual
Studio Code
10º passo – Para configurar o ftp-simple: tecla [F1] no teclado,
Digite ‘ftp-simple: config” e aperte [ENTER]

22

33
Tutorial: 000webhost + Visual
Studio Code
11º passo – No arquivo de configuração, informe as
configurações do servidor FTP (localizadas no mesmo lugar que
verificamos a opção FTP Transfer no site)

22

Observação:
Preencha o campo path com o valor /public_html
Esse valor indica a pasta raiz do site, que é definida pelo 000webhost 34
 Tutorial: 000webhost + Visual
Studio Code
12º passo – Após salvar
essas informações,
podemos dizer que
terminamos o processo
de configuração.

Clique com o botão direito

em uma área vazia
dentro da pasta do seu
projeto (ver imagem ao
lado) e acesse a opção “ftp-
simple: Save...”

35
22
Tutorial: 000webhost + Visual
Studio Code
13º passo – Selecione as opções semelhantes com as abaixo:

22

36
Tutorial: 000webhost + Visual
Studio Code
14º passo – Depois de finalizar o processo, podemos testar o
nosso site.
Primeiramente, no site, acesse o menu Home > Ferramentas >
Gerenciador de Arquivos. Clique no botão “Upload de Arquivos”.

37
Tutorial: 000webhost + Visual
Studio Code
15º passo – Verifique se os arquivos estão corretos.

38
Tutorial: 000webhost + Visual
Studio Code
16º passo – Acesse a URL e veja se tudo está correto.

39