Eixo 1 - Microfundamento: Desenvolvimento

Web Front-end

Tema 1 – Fundamentos da Web

HISTÓRICO E EVOLUÇÃO DA WEB

Nesse processo, a forma como a Web é usada passou por diversas transformações. É
importante conhecer um pouco sobre esse histórico não muito distante, pois muito do
que vivenciamos hoje no mundo da tecnologia se relaciona com essas mudanças. Um
fenômeno emblemático na história da Web foi o movimento transformador
denominado de Web 2.0 que impulsionou diversas empresas que conhecemos hoje
como Amazon, Google e Facebook.
Muitas pessoas se confundem na hora de compreender o que é exatamente a Web 2.0,
mas em linhas gerais, trata-se da aplicação de algumas tecnologias específicas e na
compreensão da Web como uma plataforma para a realização de negócios, contando
com a inteligência coletiva. Vale dar uma lida no artigo na sessão de Material
Complementar para entender melhor esse fenômeno.
Mais recentemente, diversos sites começaram a fazer uso de padrões como o XML e os
dados interligados (Linked Data) e organizar seus acervos de dados e informações de
tal forma que, além dos seres humanos, os programas de computadores pudessem
processar as informações de maneira simplificada. Isso dá origem ao que é chamado
de Web Semântica ou, ainda, Web 3.0, permitindo que programas ativos (robôs)
possam monitorar o que acontece na Web e fornecer informações precisas para nós,
os usuários. Um exemplo disso é a busca e comparação de preços de produtos em
diversos sites da Internet. Outro exemplo é a resolução de questões sobre os mais
diversos assuntos de forma estruturada.
W3C E OS PADRÕES DA WEB

O W3C é uma comunidade internacional sem fins lucrativos que mantém os padrões da
Web. A organização é liderada por Tim Berners-Lee, inventor da Web, e conta com uma
rede de mais de 400 organizações afiliadas que contribuem com o seu funcionamento.

Entre os padrões mantidos pelo W3C, podemos citar:

Design e Aplicações Web (HTML, CSS, SVG, Ajax, Acessibilidade);
Arquitetura da Web (Protocolo HTTP, URI);
Web Semântica (Linked Data - RDF, OWL, SPARQL);
Web Services (SOAP, WSDL);
Tecnologia XML (XML, XML Schema, XSLT);
Navegadores e ferramentas de autoria.
Tema 2 – Arquitetura da Web

COMPONENTES DA ARQUITETURA DA WEB

O ambiente cliente ou, mais precisamente, o Cliente Web é um programa ou aplicação
específica, na maioria das vezes um Navegador ou Browser, também conhecido
como agente de usuário (user-agent) que envia requisições via protocolo HTTP(S) a
uma outra aplicação, o Servidor Web através de uma rede de computadores como a
Internet.
O Servidor Web é um programa principal do ambiente servidor que recebe as
requisições HTTP(S), interpreta a URL e em seguida envia resposta ao Cliente Web com
o recurso solicitado (arquivo HTML, CSS, JavaScript, imagens, vídeos, folhas de estilo)
por meio da rede.
A URL (Uniform Resource Locator), é um texto codificado que traz todos os detalhes
sobre o recurso solicitado pelo ambiente cliente. A URL, é um tipo de URI (Uniform
Resorce Identifier), padrão utilizado na Internet para referenciar recursos dos mais
diversos tipos como páginas, imagens, vídeos, até pessoas, produtos e outras
entidades. A URI, seja uma URL ou uma URN, funciona tal qual o CPF para pessoas.
A Internet, como vimos anteriormente, é uma rede mundial de computadores baseada
no protocolo TCP/IP, em que todo computador conectado é
denominado host (hospedeiro) e possui um identificador endereço IP (Internet
Protocol) no padrão A.B.C.D (ex: 200.20.15.22).
Os seres humanos utilizam nomes como www.pucminas.brLinks to an external site. que
são traduzidos em endereços IP antes que ocorra a comunicação.
O protocolo HTTP é a forma como clientes e servidores se comunicam na rede.
As requisições e as respostas obedecem aos padrões estabelecidos pelo protocolo
HTTP.
A requisição HTTP é um pacote de dados enviado através da Internet pelo Cliente
Web para o Servidor Web e identifica o recurso solicitado e como ele deve ser
entregue. A resposta HTTP é formada por pacotes de dados enviados pelo Servidor
Web para o Cliente Web com o recurso solicitado.
URI, URL e URN

URI (Uniform Resource Identifier) é um padrão para o endereçamento de recursos

disponíveis na rede que engloba os conceitos de URL (Uniform Resource Locator)
e URN (Uniform Resource Name).

O URL (Uniform Resource Locator) é um padrão de URI que serve para referenciar um
recurso e sua localização, normalmente na Internet. O URL é composto pelas seguintes
partes:
Esquema – identifica a forma de interação entre um cliente e um servidor, como por
exemplo, http, https, ftp, entre outros;
User:pass – informações de usuário;
Host – nome ou número IP onde se encontra a aplicação servidor;
Porta – identifica a porta TCP/IP associada ao servidor. A porta padrão do HTTP (80)
pode ser omitida;
Caminho – indica o local exato onde o recurso se encontra;
Query – dados não hierárquicos, detalhando a consulta normalmente sob a forma de
pares nome e valor;
Fragmento – identifica uma seção no recurso.
Na URL (Uniform Resource Locator) “http://pucminas.br:80/admin/index.php?
z1=w1&z2=w2”, dada como exemplo, podemos dizer que o
recurso/admin/index.php está disponível no servidor pucminas.br associado à porta
80 e que recebe os parâmetros z1 e z2 com os valores w1 e w2, respectivamente.
O URN (Uniform Resource Name) é um tipo de URI que identifica um recurso
específico (NSS) pelo nome em um namespace (NID), sem expressar a sua localização.
No exemplo “urn:isbn:978-1-491-91866-1”, utilizamos a URN para identificar um livro a
partir do seu código de ISBN, sem dizer onde esse livro está localizado.

PROTOCOLO HTTP
O protocolo HTTP estabelece o padrão para requisições e respostas trocadas entre
cliente e servidor.

Dessa forma, podemos descrever o protocolo HTTP como um conjunto de regras que
definem como as requisições e as respostas devem ser montadas de tal forma que o
servidor possa entender o que o cliente está requisitando e como e, também, o cliente
possa entender aquilo que é devolvido pelo servidor.

REQUISIÇÃO HTTP
A imagem a seguir mostra o formato padrão de uma requisição HTTP e podemos
observar que é dividida em três partes:
Linha da requisição - informa o método da requisição, o recurso e a versão do
protocolo HTTP.
Linhas de Cabeçalhos – inclui informações complementares sobre a requisição no
formato campo e valor, sendo um para cada linha.
Corpo da entidade – carrega dados adicionais passados pelo cliente, tais como: dados
de formulários, arquivos completos em um processo de upload, entre outros.
RESPOSTA HTTP
A imagem a seguir mostra o formato padrão de uma resposta HTTP e podemos
observar que, também, é dividida em três partes:
 Linha da resposta - informa a versão do HTTP praticada pelo servidor, o código
de retorno (status) e uma mensagem explicativa para o código de retorno.
 Linhas de Cabeçalhos – tal qual na requisição, inclui informações
complementares sobre a resposta no formato campo e valor, sendo um para
cada linha.
 Corpo da entidade – traz o recurso solicitado pelo cliente ou dados de resposta
à requisição feita.
Além do código de retorno e do corpo da entidade que traz o conteúdo da resposta,
uma das informações mais importantes de uma resposta HTTP está no
cabeçalho Content-Type que informa o formato do conteúdo enviado. A informação
desse cabeçalho é apresentada conforme os MIME typesLinks to an external site. que
descrevem de forma codificada os tipos de dados trocados entre cliente e servidor. Dê
uma olhada na página do Mozilla Developer Network (MDN) para conhecer os diversos
tipos de MIME types existentes.
CABEÇALHOS HTTP (HEADERS)
Os cabeçalhos incluídos tanto nas requisições quanto nas respostas permitem ao
cliente e ao servidor passar informações adicionais de um lado para o outro. Esses
cabeçalhos podem ser classificados como:
 Request header: informações sobre a requisição feita ou sobre o cliente Web.
 Response header: informações sobre a resposta encaminhada ou sobre o
servidor Web.
 Entity header: informações sobre o conteúdo da entidade trocada como
tamanho e tipo.
 General header: Usado tanto em requisições quanto em respostas.

SERVIDORES WEB

Um site da Internet tem seus arquivos e todas as demais informações mantidas em um

ambiente servidor que é responsável, em primeira instância, por servir essas
informações para os usuários que requisitam o referido site. O ambiente servidor pode
ser composto por várias peças, mas a principal delas é um software ou programa
denominado Servidor Web. Este software é o responsável por processar a requisição
feita por um cliente Web (navegador da Internet ou outra aplicação qualquer) e prover
os recursos solicitados. A imagem a seguir apresenta em mais detalhes a arquitetura
da Web com foco no ambiente Servidor.
FUNÇÕES DO SERVIDOR WEB

O software que atua como servidor Web desempenha diversas tarefas durante o
processamento de uma aplicação Web. São elas:

 Atender requisições HTTP e processar repostas.

 Gerenciar múltiplos sites (Domínios, IPs e Portas).
 Gerenciar arquivos dos sites (File System).
 Integrar com mecanismos de scripts: PHP, PERL, ASPX, Ruby, Python, etc.
 Autenticar usuários.
o Autenticação básica ou digest (Protocolo HTTP)
o Integração com servidores de autenticação (Microsoft Active
Directory, LDAP Servers, Radius Servers)
 Implementar a criptografia na comunicação: HTTPS - TLS/SSL.
 Cache de recursos.
 Auditoria (Logs de acesso, sistema e erros).

SOFTWARE E PROVEDORES

Ao criar uma aplicação Web, é possível instalar um software que desempenha o papel
de servidor Web na sua máquina local, ou em um servidor da sua empresa, ou utilizar
um ambiente provido por terceiros. Entre os softwares utilizados como servidor Web,
podemos destacar:

 Apache HTTP Server | Apache Web Server

O Apache HTTP Server é um software gratuito e de código aberto que
funciona nos mais diversos sistemas operacionais. Ele permite executar uma
infinidade de ambientes como PHP, PERL, entre outros. Uma forma
simplificada de instalar o Apache é por meio do XAMPP, um pacote que
integra o Apache Web Server, o banco de dados MySQL e o ambiente PHP.
o Site do ApacheLinks to an external site.
o Site do XAMPPLinks to an external site.
 Microsoft Internet Information Server (IIS)
O servidor da Microsoft permite o desenvolvimento de aplicações Web a
partir da plataforma .NET além de hospedar sites estáticos. O servidor IIS
está disponível juntamente com o sistema operacional Windows e pode ser
instalado a partir da opção “Adicionar ou remover programas”.

Os provedores disponíveis na Internet para a hospedagem de sites são numerosos e cada

um oferece um conjunto de vantagens diferente. Listamos a seguir apenas alguns que
são muito utilizados por sites da Internet:

 Servidores de Nuvem (Cloud Computing) – Ambientes profissionais de

hospedagem de sites.
o Microsoft AzureLinks to an external site.
 o HerokuLinks to an external site.
o Amazon AWSLinks to an external site.
 Editores Online – Ferramentas que permitem o desenvolvimento
dos sites online ao mesmo tempo em que eles ficam disponíveis para acesso
pela Internet.
o Repl.itLinks to an external site.
o CodeSandBoxLinks to an external site.
o GlitchLinks to an external site.

 Outras opções
o GitHub PagesLinks to an external site.

DINÂMICA DE APLICAÇÕES WEB

Uma página HTML é o ponto de partida para a apresentação de um site ou de uma

aplicação da Web. A página HTML é o arquivo que indica os elementos necessários
para que o navegador da Web possa apresentar o site para o Usuário.
Na imagem a seguir, vemos um exemplo de página HTML (index.html) que faz
referências (links) para três outros arquivos que serão utilizados pelo navegador para
apresentar a página inicial de um site hipotético. Nesse arquivo podemos verificar três
linhas que indicam a necessidade dos outros arquivos. São elas:

 <link rel="stylesheet" href="style.css">

 <script src="app.js"></script>
 <img src="logo.jpg" alt="Logotipo">

Os arquivos indicados são necessários para que o navegador possa montar e apresentar
o site adequadamente.

A LINGUAGEM HTML
 SINTAXE DA LINGUAGEM HTML
Os elementos são a estrutura básica de um documento HTML, marcados por meio de
tags que são delimitadas pelos símbolos < e >. Os elementos são formados,
normalmente, por uma tag de abertura e outra de fechamento compreendendo seu
conteúdo. Nos entanto, elementos vazios não requerem a tag de fechamento. Veja o
exemplo do elemento <body> que compreende o conteúdo visível do documento
HTML:
<body> [conteúdo] </body>
Dentro da tag de abertura de um elemento HTML podem existir atributos que são
modificadores do elemento e que podem tratar diversos aspectos dos elementos em
que são colocados. Os atributos são representados por um par nome e valor, conforme
o exemplo abaixo para o elemento <input> que representa um campo de um
formulário:
<input disabled name="Nome_Usuario" value="rommelcarneiro">
O documento HTML é organizado conforme apresentado a seguir. Inicialmente, é
informada a versão da linguagem HTML utilizada no documento por meio do
preâmbulo DOCTYPE. Na sequência, é colocado o elemento <html> que compreende
todo o conteúdo do documento. Dentro do elemento <html> são colocados dois outros
elementos, <head> e <body>. O primeiro, o <head>, estabelece um espaço para
configurações relacionadas com a página em questão. O segundo, o <body>,
compreende, essencialmente, o conteúdo visível da página.

O preâmbulo DOCTYPE, apresentado na primeira linha do documento indica ao

Navegador qual a versão da Linguagem HTML está sendo utilizada. A existência ou não
do preâmbulo faz com que o Navegador alterne entre os modos quirks mode e strict
mode. No primeiro, o quirks mode, pela inexistência do preâmbulo, o Navegador utiliza
um conjunto mesclado de regras para a apresentação da página HTML, enquanto no
segundo, o strict mode, o Navegador utiliza as regras específicas da versão mencionada
no DOCTYPE. É altamente recomendado que a página traga o preâmbulo especificando
o padrão seguido.

As versões mais comumente utilizadas e seus respectivos preâmbulos são:

HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
O cabeçalho é a primeira parte do arquivo HTML, representada pela tag <head>, que
inclui informações sobre o documento (metadados), referências a scripts e folhas de
estilo (CSS) que complementam o documento.

Javascript
document. – indica a seleção da página (DOM), para realizar alterações, inclusões,
dentre outros.

O <script></script> pode ser usado no início da página, basta incluir o atributo “defer”.
Exemplo: