ProgramacaoWeb Unidade01 PDF
ProgramacaoWeb Unidade01 PDF
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:
• Desenvolver sites interativos e aplicativos Web com interface rica (RIA) usando JavaScript e HTML.
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.
3
Programação web | Unidade 1 - Introdução à internet e suas tecnologias
Objetivos de aprendizagem:
• Apresentar o ambiente de desenvolvimento, bem como o primeiro estudo de caso cuja aplica-
bilidade será demonstrada nas unidades seguintes.
Tópicos de estudo:
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
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
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
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).
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.
• 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.
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
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
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.
• 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
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
4
16
og
2.
go
Navegador
16
w.
Cliente
7.
ww
200.80.152.130
17
Internet
Servidor novo
172.217.162.164
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
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)
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
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/
• 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.
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).
É 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.
[Imagem] [Imagem]
Categoria 3 Categoria 4
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:
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;
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).
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.
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.
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.
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