100% acharam este documento útil (3 votos)
477 visualizações21 páginas

ProgramacaoWeb Unidade01 PDF

Enviado por

william Quadros
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
100% acharam este documento útil (3 votos)
477 visualizações21 páginas

ProgramacaoWeb Unidade01 PDF

Enviado por

william Quadros
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 21

Programação web

Unidade 1
Introdução à internet
e suas tecnologias
Programação web

Unidade 1
Introdução à internet
e suas tecnologias
Programação web | Unidade 1 - Introdução à internet e suas tecnologias

PALAVRAS DO AUTOR
Todos querem um site! É fato que se você tem uma ideia fantástica e deseja atingir milhões de pessoas
no mundo, um dos caminhos é a criação de uma aplicação Web, pois todos que possuem um dispositivo
conectado à internet (com um navegador instalado) podem acessar a sua aplicação. Por este motivo,
o número de sites espalhados pela internet está cada vez maior, porém os programadores Web não
encontram uma formação acadêmica alinhada com as exigências do mercado de trabalho, especial-
mente os desenvolvedores front-end que trabalham com a experiência de visualização dos usuários.
Isso faz com que os desenvolvedores Web estejam entre os profissionais mais procurados na área da
tecnologia, com salários entre R$ 2 mil e R$ 5 mil.

Para preencher essa demanda do mercado, a disciplina forma profissionais alinhados com as novas
tendências tecnológicas, apresentando frameworks e bibliotecas populares, capacitando na construção
de sites e aplicações Web interativas, responsivas e integradas a um back-end e permitindo que você
trabalhe em diferentes empresas e áreas.

Nesta disciplina, você vai adquirir habilidades únicas e necessárias para criar e desenvolver uma varie-
dade de sites e aplicativos Web. Ao final do curso você será capaz de:

• Conhecer a arquitetura das aplicações Web.

• Construir sites responsivos usando CSS, Flexbox e CSS Grid.

• Desenvolver sites interativos e aplicativos Web com interface rica (RIA) usando JavaScript e HTML.

• Conectar um aplicativo Web a um back-end para armazenamento e recuperação de informações.

• Aplicar os principais frameworks do mercado.

Esse é o primeiro passo para se tornar um profissional capaz de trabalhar com toda a pilha de desenvol-
vimento Web, chamado pelo mercado de desenvolvedor fullstack (palavra full significa completo e stack,
pilha), um desenvolvedor com capacidade de trabalhar no front-end e no back-end. Durante o curso
você desenvolverá dois projetos completos, um site e uma aplicação Web, gerando assim uma oportuni-
dade para demonstrar suas habilidades para empregadores e clientes.

Espero que os conhecimentos desta disciplina sejam significativos para você.

Seja bem-vindo e bons estudos!

3
Programação web | Unidade 1 - Introdução à internet e suas tecnologias

Unidade 1 Introdução à internet


e suas tecnologias

Objetivos de aprendizagem:

• Apresentar os aspectos relacionados à internet e suas tecnologias;

• Apresentar os fundamentos das redes de computadores, os conceitos de protocolos de comu-


nicação, a história e o funcionamento da internet, além da diferença entre site e aplicações web;

• Introduzir o aluno nas principais tecnologias da web;

• Apresentar o ambiente de desenvolvimento, bem como o primeiro estudo de caso cuja aplica-
bilidade será demonstrada nas unidades seguintes.

Tópicos de estudo:

• Arquitetura das aplicações web;

• Principais tecnologias da web;

• Ambiente de desenvolvimento e estudo de caso.

Iniciando os estudos:

A história da web inicia em um laboratório de física de partículas (CERN) perto de Genebra, na Suíça. Foi nesse
local que o engenheiro de software Tim Berners-Lee percebeu a dificuldade de compartilhar informações.

Naqueles dias, havia informações diferentes em computadores diferentes, mas era necessário
fazer logon em computadores diferentes para obter informações. Além disso, às vezes você preci-
sava aprender um programa diferente em cada computador. Muitas vezes, era mais fácil perguntar
às pessoas quando elas estavam tomando café... (WORLD WIDE WEB FONDATION, 2019).

Tim achou uma maneira de resolver esse problema utilizando uma tecnologia emergente chamada
hipertexto e viu que sua aplicação poderia ser ainda mais ampla, pois a internet já estava em uso desde
1972 e possuía milhões de computadores conectados.

Em 1989, ele propôs a adoção de um grande banco de dados com hiperligações, neste momento se
iniciou a World Wide Web (WWW), ou simplesmente web. Um meio de comunicação global no qual usuá-
rios podem ler e escrever através de computadores conectados à internet.

Segundo a matéria History of the Web (WORLD WIDE WEB FONDATION, 2019), “a Web nunca foi um projeto
oficial do CERN, a proposta inicial de Tim não foi aceita pelo seu chefe na época, Mike Sendall. Somente
em setembro de 1990, Mike conseguiu dar tempo a Tim para trabalhar no projeto. Ele começou a traba-
lhar usando um computador NeXT, um dos primeiros produtos de Steve Jobs”. Neste mesmo ano Tim
construiu as ferramentas necessárias para o funcionamento da web (HTML, URI, HTTP), que continuam
sendo a base da web atual. Essa unidade vai entrar em detalhes sobre essas tecnologias, explicando
suas funções e como elas se integram.

4
Programação web | Unidade 1 - Introdução à internet e suas tecnologias

Figura 1 - Tim Berners-Lee inventou a internet em 1989.


Fonte: disponível em: https://bit.ly/2OHqzdQ Acesso em: 12 dez. 2019.

Ao acessar a sua rede social favorita, alguém pode te questionar se você está navegando na internet ou
na web? Parece ser uma pergunta simples de responder e um “tanto faz” é o suficiente. Mas internet
e web são a mesma coisa? O termo web é usado erroneamente como sinônimo da própria internet.
A web é apenas um serviço que utiliza a internet, assim como as mensagens de e-mail. A história da
internet antecede bastante a da web.

5
Programação web | Unidade 1 - Introdução à internet e suas tecnologias

1 ARQUITETURA DAS APLICAÇÕES WEB

Assista
Acesse na plataforma o vídeo: Como funcionam as páginas web?

Quando você faz uma compra pela internet, em um dos diversos sistemas de vendas (Americanas, OLX,
Netshoes, Submarino), você acessa um sistema executado em um computador remoto (servidor) conec-
tado à internet. Você utiliza um dispositivo também conectado à internet, por exemplo: smartphone,
tablet, smart TV, notebook, PC. Seu dispositivo é considerado o cliente e o acesso é feito por meio de um
navegador (browser).

Diferente de aplicações como Word e Excel que executam em seu computador sem a necessidade de se
conectar a outra máquina, sistemas web são distribuídos, ou seja, parte do processamento é executado no
cliente e a outra parte no servidor. Por esse motivo, aplicações web são classificadas como cliente-servidor
(Figura 2 - Arquitetura cliente-servidor).

Navegador

ED+ Content Hub © 2019


Cliente Internet Servidor
(browser)

Figura 2 - Arquitetura cliente-servidor.


Fonte: elaborado pelo autor.

A figura acima ilustra o funcionamento de aplicações web. Um usuário em sua máquina-cliente, instala
um navegador (Mozilla, Chrome ou Internet Explorer). Utilizando esse navegador, o usuário realiza soli-
citações para um servidor remoto, através da internet. Por sua vez, esse servidor recebe e processa as
solicitações. Ao final do processamento, uma resposta é enviada para o usuário.

6
Programação web | Unidade 1 - Introdução à internet e suas tecnologias

Aprofunde-se
Para mais informações sobre sistemas distribuídos e suas categorias, consulte o livro
Sistemas distribuídos: conceitos e projeto, 5ª edição, 2013.
Título: Sistemas distribuídos: conceitos e projeto
https://bit.ly/33M6urh

De 1990 a 1995, os sites eram formados por documentos de hipertexto linkados, com limitações na apre-
sentação de seu conteúdo. O surgimento de plataformas de desenvolvimento (como Java, .Net, PHP)
impulsionaram a capacidade computacional dos sites, suas informações não eram mais estáticas, agora
eram capazes de fornecer e receber novas informações, surgia assim as aplicações baseadas na web
(também chamadas de WebApps) (PRESSMAN; MAXIM, 2016).

E qual a diferença entre aplicativos web e sites web?

O termo site é geralmente utilizado para categorizar aplicações menos interativas, que apenas fornecem
conteúdo. Possuem uma interface mais atrativa e o seu propósito é divulgar as informações de uma
empresa, os dados de um produto ou as notícias de um determinado assunto. Exemplos: blogs, sites de
notícia, sites institucionais, portais, landing pages e hotsites.

Aprofunde-se
Para mais informações sobre que tipos de sites você pode criar, acesse o site do Hostgator:
https://bit.ly/2PagpBx

Já o termo aplicações web é utilizado para categorizar aplicações mais interativas, que fornecem e/ou
recebem conteúdo. Possuem interface mais fácil de usar e o seu propósito é controlar as atividades de
uma organização. Porém não há uma definição exata que diferencie claramente sites e aplicações web.
Os tópicos discutidos na disciplina são importantes tanto para o desenvolvimento de sites quanto para
o desenvolvimento de aplicações web.

7
Programação web | Unidade 1 - Introdução à internet e suas tecnologias

Aprofunde-se
Para saber como eram os layouts de sites antigos, acesse o endereço: https://bit.ly/2rVKXPp
Lá você informa o endereço do site e escolhe uma determinada data. Por exemplo, veja
como era a página do Google em 02/12/1998.

Figura 3 - Página do Google em 02/12/1998.


Fonte: disponível em: https://bit.ly/2RfLC96 Acesso em: 16 dez. 2019.

Mas desenvolver WebApps possui as suas desvantagens:

• HTML é bom para telas estáticas, mas ruim para criar telas dinâmicas.

• A comunicação é sempre do cliente para o servidor, então para saber se alguma informação foi
alterada no servidor, o cliente deve realizar uma nova requisição para o servidor.

• Existe uma diferença de comportamento entre os navegadores. Antigamente, essas diferenças


eram maiores. Com o passar do tempo, os navegadores ficaram cada vez mais parecidos nesse
aspecto. Contudo, os desenvolvedores web ainda devem tomar cuidado com essas diferenças.

• Diferentes dispositivos (computadores, tablets, celulares, televisores), com diferentes reso-


luções e tamanhos de telas. Fala-se muito de design responsivo, aplicações web são ditas
responsivas se elas estão preparadas para diferentes tamanhos de tela.

Porém mesmo com essas desvantagens, entre 1999 e 2001, houve a explosão na criação dos sites. Mas
então, por que todo mundo quer um aplicativo web?

• Acesso universal: todos já possuem um navegador instalado, precisa apenas estar conectado
à internet para acessar a aplicação.

8
Programação web | Unidade 1 - Introdução à internet e suas tecnologias

• Atualização de versão automática: o conteúdo vem de um servidor central, então se você


atualizar a versão nesse servidor, todos os clientes imediatamente receberam essa nova versão.

As vantagens dos WebApps superam suas desvantagens. Por esse motivo, as empresas ainda investem
nesse tipo de aplicação.

Reflita
Você teve uma ideia de um aplicativo para a web que vale milhões. Só tem um porém, você
não tem as informações dos seus clientes, pois eles estão fora da internet.
Problema: quais navegadores, suas versões, sistemas operacionais e resoluções seu
aplicativo deve atender?
Solução: a W3C Schools cataloga essas informações. Você pode se basear nestes dados
para tomar a melhor decisão.
https://bit.ly/2OMhXD1
https://bit.ly/2Pd7b7J
https://bit.ly/2LyGNUX

2 PRINCIPAIS TECNOLOGIAS DA WEB


Como descrito no tópico anterior, a web usa uma arquitetura cliente-servidor, o que permite a troca de
informações entre computadores de todo o mundo. Nesse modelo, o cliente solicita informações por
meio de um endereço virtual e o servidor responde à solicitação com a resposta ao pedido enviado
(MILETO; BERTAGNOLLI, 2014).

Esse endereço virtual é conhecido como URI (Uniform Resource Identifier). É um tipo de endereço exclu-
sivo e usado para identificar os recursos na web. Também é comumente chamado de URL (Uniform
Resource Locator), endereço para localizar os recursos na web.

Esse endereço virtual é informado na barra de endereços do seu navegador e possui a seguinte sintaxe:

protocolo://dominio:porta/caminho/arquivo

Exemplos:

9
Programação web | Unidade 1 - Introdução à internet e suas tecnologias

Assista
Acesse na plataforma o vídeo: A dinâmica da web

Da mesma forma que nós humanos criamos as linguagens (inglês, português, espanhol) para nos comu-
nicarmos, as máquinas precisam de um padrão de comunicação. Esse padrão é chamado de protocolo.

Os protocolos são responsáveis pelas seguintes tarefas (ALVES, 2014):

• Sincronização entre o transmissor e o receptor;

• Estabelecimento e término de conexões entre os dispositivos;

• Controle do fluxo de dados;

• Detecção e correção de erros;

• Retransmissão dos dados em caso de erro;

• Endereçamento de dispositivos.

O foco será no protocolo HTTP (HyperText Transfer Protocol), utilizado para a transferência de docu-
mentos de hipermídia (hipertexto).

protocolo://dominio:porta/caminho/arquivo

Aprofunde-se
Para mais informações sobre os demais protocolos disponíveis na internet, consulte o livro
Desenvolvimento e Design de Sites, 1ª edição, página 15.
https://bit.ly/386DHBc

Após o protocolo, você deve identificar a máquina-servidora que contém o seu site ou aplicação web. Os
dispositivos-clientes e as máquinas-servidoras são identificadas na rede através de endereços formados
por sequências de números. Esses endereços são chamados de endereços IP. A princípio, para acessar
uma página na web você deve conhecer o endereço IP do servidor. Por melhor que seja a sua memória,
é praticamente impossível decorar o IP dos seus sites favoritos. A solução deste problema é associar
endereços IP a domínios, que são nomes mais fáceis de memorizar, por exemplo:

172.217.162.164 = www.google.com.br

208.80.154.224 = www.wikipedia.org

Os domínios são controlados por organizações geralmente vinculadas ao governo. Por exemplo, os
domínios com o final .br são controlados e disponibilizados pelo Registro de Domínios para a Internet

10
Programação web | Unidade 1 - Introdução à internet e suas tecnologias

no Brasil (www.registro.br). Já a tradução do domínio para o endereço IP correspondente é feita pelos


servidores DNS (Domain Name System).

Reflita
Você foi contratado para criar um site de uma empresa. Sua primeira tarefa é registrar um
domínio para o seu site. Para isso, entre no www.registro.br e pesquise as possibilidades
de nomes de domínios que ainda não foram registrados. Lembre-se que:
• A escolha de nome para o domínio deve ser compartilhada com o seu cliente;
• Escolha um nome fácil de memorizar, para facilitar o acesso dos seus usuários;
• Escolha um período de cobrança (1, 2, 3, 4, 5, 6, 7, 8, 9 ou 10 anos);
• Informe o valor cobrado para esse registro, pois seu cliente deve planejar o
pagamento das renovações.
Para os dois últimos itens, acesse: https://registro.br/ajuda/pagamento-de-dominio/

Outra grande vantagem dos domínios é a transparência na troca de servidores. Veja a figura abaixo
(Figura 4 - Compreendendo o funcionamento do domínio):

Servidor

ED+ Content Hub © 2019


DNS
r
.b
mo
.c
le

4
16
og

2.
go

Navegador
16
w.

Cliente
7.
ww

(browser) Servidor antigo


21
2.

200.80.152.130
17

Internet

Servidor novo
172.217.162.164

Figura 4 - Compreendendo o funcionamento do domínio.


Fonte: elaborado pelo autor.

11
Programação web | Unidade 1 - Introdução à internet e suas tecnologias

Em alguns casos, é necessário trocar o servidor que hospeda a sua aplicação web. Como o seu cliente
não utiliza IP para acessar esse servidor, essa troca é simples, você apenas troca o IP associado ao
domínio no servidor DNS.

protocolo://dominio:porta/caminho/arquivo

Por fim, você deve informar o caminho do arquivo no servidor (diretórios e o nome do próprio arquivo).
Esse arquivo pode ser uma imagem, um áudio, um vídeo, um HTML, um CSS, um JavaScript, um PHP,
um binário etc.

Aprofunde-se
Para mais informações sobre os Identificadores de Recursos (URI), consulte o site MDN
Web Docs - Identificando recursos na web.
https://mzl.la/2LnxnLD

O infográfico abaixo resume a dinâmica da web, todas as etapas que ocorrem quando um usuário
digita uma URL no seu navegador.

12
Programação web | Unidade 1 - Introdução à internet e suas tecnologias



ED+ Content Hub © 2019


 
1 2
Cliente digita a URL É solicitado a um servidor DNS o
(o endereço) no seu endereço IP do servidor
navegador

3
Devolve o IP do
7 servidor solicitado

O navegador interpreta a
resposta e exibe ao cliente 4
O navegador solicita
um recurso (página)
ao servidor encontrado
(via HTTP ou HTTPS)

6 5
O servidor responde à O servidor localiza e
requisição (com HTML, processa a requisição
CSS, JavaScript e outros) (utilizando linguagens
como C# , Java e PHP)

Infográfico 1 - Etapas de uma requisição no navegador.


Fonte: elaborado pelo autor.

Reflita
Eu posso criar uma aplicação web que rode somente na rede local (LAN) da minha
empresa?
A resposta é sim, esse tipo de aplicação é comum nas empresas, principalmente por
causa dos benefícios de atualização de versão e por não precisar instalar softwares nas
máquinas-clientes. Lembre-se, para uma aplicação ser considerada como web ela deve ter
um servidor central e ser acessada por um navegador.

13
Programação web | Unidade 1 - Introdução à internet e suas tecnologias

3 AMBIENTE DE DESENVOLVIMENTO E ESTUDO DE CASO

Assista
Acesse na plataforma o vídeo: Chega de conversa, agora é mão na massa

Durante o curso, você vai criar e executar códigos na IDE Repl.it, uma poderosa, simples e gratuita plata-
forma para programação. Foi criada para educadores, alunos e desenvolvedores. Poderosa por permitir
a programação em mais de 50 tipos de linguagens. Simples por executar diretamente no seu navegador,
sem a necessidade de instalar nenhum outro software. Acesse a IDE no endereço: https://repl.it/

Outras vantagens de se utilizar o Repl.it:

• Fácil instalação e configuração (Trabalho/Laboratório/Casa). Você precisa de um navegador.

• Padronização: sua máquina será idêntica ao do professor e dos demais alunos, evitando assim
os problemas causados por diferenças de sistemas operacionais e/ou configurações de máquina.

• Sem restrições na rede (Proxy, Firewall etc.) que você pode encontrar no seu ambiente de
trabalho.

• Ambiente colaborativo: você pode compartilhar o código com o professor ou com outros
alunos para resolução de problemas ou para trabalhos em grupo.

Figura 5 - Página inicial da ferramenta Repl.it.


Fonte: disponível em: https://repl.it/ Acesso em: 12 dez. 2019.

14
Programação web | Unidade 1 - Introdução à internet e suas tecnologias

Recomenda-se criar um usuário na ferramenta, para isso clique em Sign up. Dessa forma seus projetos
serão gravados e você pode retornar a eles para estudos futuros ou apresentação para seus emprega-
dores e clientes.

A IDE possui os 3 componentes necessários para o desenvolvimento web: (1) um navegador de sistema
de arquivos, (2) um editor de texto e (3) um terminal que exibe o resultado do nosso código (Figura 6 -
Componentes da IDE Repl.it).

Figura 6 - Componentes da IDE Repl.it.


Fonte: disponível em: https://repl.it/ Acesso em: 12 dez. 2019.

Você pode compartilhar seu código através do botão .

E pode visualizar o resultado clicando no botão .

É neste ambiente que você vai implementar o seu primeiro estudo de caso, um site para a divulgação de
produtos. Esse site possui uma representação online dos produtos que são vendidos na loja física. Há
quatro categorias (games, telefonia, PCs e eletrônicos) e vários produtos para cada categoria, onde os
compradores online podem navegar. Os detalhes de cada produto devem ser fornecidos (ou seja, nome,
imagem, descrição, preço).

Aprofunde-se
Uma aplicação web pode ser classificada de diferentes maneiras. O estudo de caso descrito
acima, por exemplo, é um site de conteúdo. Para saber mais sobre as outras categorias,
consulte o livro Desenvolvimento de Software II – Introdução ao desenvolvimento Web
com HTLM, CSS, JavaScript e PHP. Página 9.
https://integrada.minhabiblioteca.com.br/books/9788582601969

15
Programação web | Unidade 1 - Introdução à internet e suas tecnologias

Aprofunde-se
Repl.it é um dos vários IDEs que você pode utilizar para desenvolver sites e/ou aplicações
Web. Outro exemplo de IDE online é a Cloud9: https://aws.amazon.com/pt/cloud9/ Adquirida
pela Amazon e totalmente integrada com os demais serviços da sua plataforma (AWS).
Também há IDEs offline, que você instala em seu computador, por exemplo: WebStorm,
Visual Studio Code, Atom IDE, Brackets e Komodo Edit. Você encontra um estudo comparativo
delas no endereço: http://tiny.cc/dmichz

O sistema deve operar em ambiente multi-browser com compatibilidade mínima nos seguintes
ambientes: Google Chrome e Mozilla Firefox.

Abaixo, é exibido o protótipo da tela principal do site:

Logo Título do site

Caixa de texto Categoria 1 Categoria 2

[Imagem] [Imagem]

Categoria 3 Categoria 4

Texto que introduz o negócio e o serviço para o


usuário e permite ao usuário navegar para
qualquer uma das quatro categorias de produtos.
[Imagem] [Imagem]

© COPYRIGHT 2019, INSTITUTO CULTURAL NEWTON PAIVA FERREIRA LTDA.

Figura 7 - Tela inicial do estudo de caso.


Fonte: elaborado pelo autor.

16
Programação web | Unidade 1 - Introdução à internet e suas tecnologias

A página inicial do site é o ponto de entrada para o aplicativo. Ela introduz o negócio e o serviço para o
usuário e permite ao usuário navegar para qualquer uma das quatro categorias de produtos. Ao clicar
em uma das categorias, o usuário é enviado para a segunda tela:

Logo Título do site

[Nome do produto] [Preço] [Ação comprar]


Categoria 1 [Imagem do produto]
[Descrição do produto]
[Nome do produto] [Preço] [Ação comprar]
[Imagem do produto]
[Descrição do produto]
Categoria 2
[Nome do produto]
[Imagem do produto] [Preço] [Ação comprar]
[Descrição do produto]
Categoria 3 [Nome do produto]
[Imagem do produto] [Preço] [Ação comprar]
[Descrição do produto]
[Nome do produto]
Categoria 4 [Imagem do produto] [Preço] [Ação comprar]
[Descrição do produto]

© COPYRIGHT 2019, INSTITUTO CULTURAL NEWTON PAIVA FERREIRA LTDA.

Figura 8 - Listagem de produtos.


Fonte: elaborado pelo autor.

A página de listagem de produtos exibe os produtos da categoria selecionada. A partir desta página, um
usuário pode visualizar todas as informações do produto e adicionar qualquer um dos produtos listados
no carrinho de compras. Um usuário também pode navegar para qualquer uma das categorias fornecidas.

17
Programação web | Unidade 1 - Introdução à internet e suas tecnologias

Aprofunde-se
A fase inicial de um projeto de software envolve a coleta de informações para compreender
o problema que deve ser resolvido, essa fase é chamada de levantamento de requisitos.
Existem diversos métodos e técnicas para extrair as informações dos clientes a fim de
atender as suas expectativas e necessidades. Dentre eles está a Prototipagem, um método
simples e muito efetivo, que gera uma grande quantidade de informação visual e impede
que fatores importantes não sejam esquecidos.
Se você gostou do método de Prototipagem, saiba que existem ferramentas que
auxiliam na criação de protótipos interativos. Seguem abaixo alguns exemplos e os seus
respectivos sites:
• Sketch: https://www.sketchapp.com/
• AdobeXD: http://tiny.cc/wwmchz
• Invision: https://www.invisionapp.com/
• Marvel: https://marvelapp.com/
• Zeplin: https://zeplin.io/
Para saber mais sobre a Prototipagem, consulte o livro Engenharia de Software, página 45:
http://tiny.cc/tmjchz

18
Programação web | Unidade 1 - Introdução à internet e suas tecnologias

CONSIDERAÇÕES FINAIS
Parabéns, você concluiu a unidade 1 desta disciplina e deu o primeiro passo para a criação de sites web.
Nesta unidade você aprendeu:

• Sobre os desafios de se construir aplicações web e as vantagens de se ter esse tipo de apli-
cação na internet e/ou intranet;

• O formato das URIs/URLs;

• O que é um protocolo de comunicação e sua importância para os sistemas distribuídos;

• As etapas de uma requisição HTTP;

• Como registrar um domínio para o seu site.

Além de ter o primeiro contato com a IDE Repl.it e de se familiarizar com o estudo de caso que vamos
construir nas próximas unidades. Agora, siga em frente!

19
Programação web | Unidade 1 - Introdução à internet e suas tecnologias

GLOSSÁRIO
Blog: é um espaço de conteúdo com uma estrutura mais simples, mas que pode conter vários recursos
de mídia para apresentação das informações (HOSTGATOR, 2019).

CSS (Cascading Style Sheets): são utilizados para descrever a aparência ou apresentar o conteúdo da
página web (MDN WEB DOCS, 2019).

Hotsites: sites com o objetivo de divulgar um produto/serviço/evento de maneira específica.

HTML (HyperText Markup Language): é a linguagem usada para descrever e definir o conteúdo de uma
página web em um formato estruturado (MDN WEB DOCS, 2019).

IDE (Ambiente de Desenvolvimento Integrado): é um software que auxilia nas tarefas de desenvolvi-
mento de software.

Internet: a internet é, na verdade, um agrupamento de diversas redes WAN (ALVES, 2014).

Java: é uma linguagem de programação e plataforma computacional lançada pela primeira vez pela Sun
Microsystems em 1995. Essa tecnologia é usada para desenvolver aplicações que tornam a web mais
divertida e útil. O Java não é a mesma coisa que o javascript., que é uma tecnologia simples, usada para
criar páginas web e só é executado no seu browser (JAVA, 2019).

JavaScript: é uma linguagem de script, desenvolvida em 1995 por Brendan Eich, da Netscape, com
base em outra linguagem, denominada EMACScript. Inicialmente ela foi chamada de LiveScript. Essa
linguagem é utilizada na criação de pequenas rotinas (scripts) que podem ser inseridas no corpo de
documentos HTML (ALVES, 2014).

LAN: rede em que os dispositivos estão localizados em uma área delimitada e geralmente concen-
trados no mesmo local, como uma pequena empresa, um escritório ou uma casa. Essa rede possui uma
distância de 10 metros a 1 quilômetro (ALVES, 2014).

Landing pages: em tradução livre “páginas de aterrissagem”, são sites com a função de contribuir para
a execução e sucesso de uma campanha de marketing digital. A página deve ser leve, abrir rapidamente,
possuir uma estrutura bem simples e manter seu foco na captação dos dados (HOSTGATOR, 2019).

MAN: rede em que os dispositivos existem em maior número (milhares) e ocupam uma área maior,
como uma cidade. Essa rede possui uma distância de 3 a 10 quilômetros (ALVES, 2014).

.Net: é um ambiente de execução gerenciado para Windows que oferece uma variedade de serviços aos
aplicativos em execução (MICROSOFT, 2019).

PHP: é uma linguagem de programação em formato de script, muito utilizada na construção de sites
dinâmicos e que é executada no lado do servidor (server side) (ALVES, 2014).

WAN: rede em que os dispositivos não possuem delimitação de área, estendendo-se além de cidades,
estados e países (ALVES, 2014).

WWW (World Wide Web ou Ampla Rede Mundial): chamada frequentemente somente pelo termo “web”,
é um meio de comunicação global no qual usuários podem ler e escrever através de computadores
conectados à internet.

20
Programação web | Unidade 1 - Introdução à internet e suas tecnologias

REFERÊNCIAS
ALVES, W. P. Desenvolvimento e Design de Sites. 1. ed. São Paulo: Érica, 2014.

HOSTGATOR. Tipos de sites, 2019. Disponível em: https://www.hostgator.com.br/blog/tipos-de-sites/


Acesso em: 09 nov. 2019.

JAVA. O que é o Java? Disponível em: https://java.com/pt_BR/about/whatis_java.jsp Acesso em: 11 out. 2019.

MDN WEB DOCS. Tecnologia para desenvolvedores web. Disponível em: https://developer.mozilla.org/
pt-BR/docs/Web Acesso em: 13 out. 2019.

MICROSOFT. Introdução ao .NET Framework, 2019. Disponível em: https://docs.microsoft.com/pt-br/


dotnet/framework/get-started/ Acesso em: 11 out. 2019.

MILETO, E.; BERTAGNOLLI, S. de C. Desenvolvimento de Software II: Introdução ao desenvolvimento


Web com HTML, CSS, JavaScript e PHP. [S.l.]: Bookman, 2014.

PRESSMAN, R. S.; MAXIM, B. R. Engenharia de software: Uma abordagem profissional. 8. ed. São Paulo:
Bookman, 2016.

WORLD WIDE WEB FONDATION. History of the Web. Disponível em: https://webfoundation.org/about/
vision/history-of-the-web/ Acesso em: 05 out. 2019.

21

Você também pode gostar