Programação WEB - BackEND

Prof. Dr. Tavares

Histórico da web
Histórico da web
Histórico da web
Evolução dos Browsers
Evolução dos Browsers
Evolução dos Browsers

Jnjr: Modem de 16 kbps é Google maps: No mínimo 10

suficiente Mbps...
Processo do ovo e galinha

• Os recursos de infra se tornam melhores

– As ficam mais pesadas, o número de usuários
aumenta e a infra não dá conta
• Os recursos de infra se tornam melhores
– As ficam mais pesadas, o número de usuários aumenta
e a infra não dá conta
» Os recursos de infra se tornam melhores
• ...
• ...
• ...
• ....
Evolução dos Browsers
W3C

• O World Wide Web consortium (W3C) é uma

comunidade internacional que mantém e
evolui os padrões da Web.
Padrões tais como:
– Design e Aplicações Web (HTML, CSS, SVG, Ajax,
Acessibilidade, ...)
– Arquitetura da Web (Protocolo HTTP, URI, ...)
– Web Semântica (Linked Data - RDF, OWL, SPARQL
....)
– Tecnologia XML (XML, XML Schema, XSLT, ...)
– Entre outros.
Arquitetura WEB

Ambiente Cliente Ambiente Servidor

requisição

resposta

HTTP | HTTPS
Arquitetura WEB

• Cliente é um programa ou aplicação

específica, na maioria das vezes um Browser
Web, que envia requisições via protocolo
HTTP(S) a uma outra aplicação, o Servidor,
que é executado normalmente em um host
remoto na rede.

– Exemplo:
• Quando um usuário insere um URL (Uniform Resource
Locator) no Browser Web, ele está realizando uma
requisição a um servidor Web
• O servidor, por sua vez, interpreta o URL e em seguida
envia resposta ao cliente com o recurso solicitado
(arquivo html, aplicação web, serviço web, etc).
Arquitetura WEB – Modelo OSI

Nível Camada Protocolos

HTTP, SMTP, SNMP, FTP, Telnet, SSH, NFS,
7 Aplicação
DNS
6 Apresentação XDR, ASN.1, SMB, AFP
5 Sessão LS, SSH, RPC, NetBIOS, ASP
4 Transporte TCP, UDP, RTP, SCTP, SPX, ATP
IP, ICMP, IGMP, X.25, CLNP, ARP, RARP, BGP,
3 Rede
OSPF, RIP, IPX
Ethernet, Token Ring, PPP, HDLC, Frame
2 Link de Dados
Relay, ISDN, ATM, Wi-Fi
1 Física Elétrico, radio, laser
Arquitetura WEB – Modelo OSI
Arquitetura WEB – Modelo OSI
Protocolo HTTP

• O Hypertext Transfer Protocol (HTTP) é um protocolo

da camada de aplicação para sistemas distribuídos e
colaborativos de informação no formato de
hipertextos.
• RFC - 2068
• Características
– A comunicação entre o cliente/servidor é realizada através
de conexões TCP/IP
– Normalmente utilizando a porta 80
– Protocolo que não guarda estado do cliente (stateless)
– Atualmente possui duas versões ativas HTTP 1.0 e HTTP
1.1 compatíveis entre si
– O HTTP 1.1 usa conexões TCP persistentes diferentemente
do HTTP 1.0
Processo de navegação

1. Usuário informa a URI (ex.

http://www.exemplo.com.br) para o browser
2. O browser identifica que está sendo solicitado
um recurso via requisição HTTP
3. A autoridade responsável pelo
www.exemplo.com.br gera a resposta para a
requisição
4. A resposta é interpretada pelo browser, que
identificada que é uma página HTML e envia
automaticamente novas requisições para objetos
aninhados
5. Durante o processo o browser imprime a página,
incluindo links para outras páginas
Formato da requisição

Linha de
Requisição
método SPC url SPC versão HTTP CR LF

campo cabeçalho: SPC valor CR LF

Linhas de
Cabeçalho ...
campo cabeçalho: SPC valor CR LF

Linha em
CR LF
branco

Corpo da
entidade
Evolução da WEB

40

35

30

25

20

15

10

0
Período para atingir 50 milhões de usuários
Rádio TV Computador Internet
Evolução da WEB

• Década de 60 (guerra fria)

– Transmissão de dados entre computadores
(necessidade de compartilhamento e criptografia)

• ARPANET (Advanced Research Projects Agency

Network) - 1969
– Foi a primeira rede operacional de computadores à
base de comutação de pacotes, e o precursor da
Internet foi criada só para fins militares
– Existiam incríveis 100 sites disponíveis
Evolução da WEB

• MILNET (Military Network) – 1989

– Foi uma expansão da ARPANET
• Para fins acadêmicos... Universidades
americanas possuíam BBS (Bulletin
board system)
– Utilização de e-mails
Evolução da WEB

• Internet
– Rede que conecta diversas redes de
computadores pelo mundo (inter – entre /
net – rede)
• Web
– É uma das várias ferramentas de acesso a
essas redes
Evolução da WEB

• WWW – World Wide Web

– Projeto de compartilhamento de textos
científicos criado pelo CERN (fr: Conseil
Européen pour la Recherche Nucléaire);
• Criação da W3C
• Modernização do browser Netscape
Evolução da WEB

• Primeiro site na web

(http://info.cern.ch/hypertext/WWW/TheProject.html)
Evolução da WEB

• Web 1.0
– O primeiro conceito surgiu em 1990, por Tim
Berners Lee;
– Junção de três tecnologias simples:
Evolução da WEB

• Web 1.0
– 1998: Google descomplica pesquisas na
Web
Evolução da WEB

• Wayback machine
Evolução da WEB

• Wayback machine
Evolução da WEB

• Web 2.0
– Termo cunhado em 2004 para designar
web bidirecional;
Evolução da WEB

• Web 2.0
– Mais de 100 milhões de sites ativos;
– Mais de 1 bilhão de pessoas acessam a
internet;
– Transição de “Hiperlinkagem de
documentos” para “Conteúdo dinâmico”,
gerado pelos usuários.
Evolução da WEB

• Web 2.0
– Redes sociais (Texto, foto, vídeo, ...)
– BLOGS (Vlogs, Photologs, Pocasts, ...)
– Wiki
– RSS
Evolução da WEB

Web 1.0 Web 2.0

Leitura Leitura/Escrita

Empresas Comunidade

Cliente/Servidor Peer to Peer

Dados proprietários Dados compartilhados

Formulários Web Aplicações Web

Evolução da WEB
Evolução da WEB

Tim Berners Lee, 1999

• "Eu tenho um sonho para Web, em

que os computadores irão tornar-se
capazes de analisar todos os dados na
rede - o conteúdo, links e transações
entre pessoas e computadores...“
Evolução da WEB

• Web 3.0 ou Web Semântica

– “A Web Semântica é uma extensão da Web
atual onde a informação terá um significado
bem definido, permitindo que computadores e
pessoas trabalhem melhor em cooperação.”
• Tim Berners-Lee e Eric Miller
Evolução da WEB

• Web 3.0 ou Web Semântica

– Tornar a web legível por máquina e não
apenas por seres humanos;
– Semântica da informação seja disponível de
maneira estruturada e explícita;
– Permitir buscas mais complexas e eficazes;
– Transformar a web de documentos em uma
web de dados.
Evolução da WEB

• Web 3.0 ou Web Semântica

Evolução da WEB

• Projeto Web 4.0

Dado
Informação
Registro de um
evento Conhecimento
Conjunto de dados
Objetivo com significado Resultado de ações
“Assignificativo” Contextual / sujeito-objeto e
Relacional sujeito-sujeito
Evolução da WEB
Evolução da WEB
Tecnologias envolvidas

• HTTP/0.9 (pré 1993)

– Usava simples formato de texto ASCII
através do único método de requisição GET
– Não havia modificadores de requisição
– Sem resposta de metadata
Tecnologias envolvidas

• HTTP/1.0 (1993 ~ 1996)

– Criado a partir da necessidade de transferir
não apenas texto
– Implementação dos métodos de requisição
POST e GET
Tecnologias envolvidas

• HTTP/1.1 (Versão atual do protocolo)

– O uso de conexões persistentes
– Novos métodos de requisições
– Servidores proxy quer permitem melhor
organização da cache
Tecnologias envolvidas

• HTML (HyperText Markup Language)

– Documentos HTML podem ser
interpretados pelos navegadores
– Especificações formais feitas na década de
90
Tecnologias envolvidas

• Cookie
– Grupo de dados trocados entre o navegador
e o servidor de páginas, colocado num
arquivo de texto criado no computador do
usuário
– A sua função principal é a de manter a
persistência de sessões HTTP
Tecnologias envolvidas

• SSL (Secure Sockets Layer)

– Protocolos criptográficos que conferem
segurança de comunicação na Internet para
serviços como email (SMTP), navegação
por páginas (HTTP) e outros tipos de
transferência de dados;
– Desenvolvida pela equipe Netscape;
– Uso do HTTPs
Tecnologias envolvidas

• JavaScript
– JavaScript foi originalmente desenvolvido
por Brendan Eich da Netscape sob o nome
de Mocha;
– Mocha > LiveScript > JavaScript
– Ampla aceitação como linguagem de script
client-side de páginas web
Tecnologias envolvidas

• JSON
– JavaScript Object Notation - é um formato de
padrão aberto que utiliza texto legível a
humanos para transmitir objetos de dados
consistindo de pares atributo-valor. É o
formato de dados mais comumente utilizado
para comunicação assíncrona
navegador/servidor, substituindo amplamente
o XML
Tecnologias envolvidas

• XML
– (eXtensible Markup Language) - Uma
recomendação da W3C para gerar
linguagens de marcação.
Tecnologias envolvidas

• CSS
– Cascading Style Sheets
– Linguagem de estilo utilizada para definir a
apresentação de documentos escritos em uma
linguagem de marcação, como HTML;
– Principal benefício é prover a separação entre
o formato e o conteúdo de um documento
Tecnologias envolvidas
Tecnologias envolvidas

• AJAX - Asynchronous Javascript and

XML
– AJAX é uma maneira (técnica) de troca de
dados com o servidor, atualizando partes
de uma página Web sem a necessidade de
recalega-lá inteira.
Tecnologias envolvidas

• Um dia Jobs disse:

– “Conclui que o desenvolvimento do HTML5 tornaria o
Adobe Flash não mais necessário, tanto para assistir
vídeo ou mesmo exibir qualquer conteúdo web.”
• http://www.apple.com/hotnews/thoughts-on-flash/
Tecnologias envolvidas

• Um dia Jobs disse:

– First, there’s “Open”
• Adobe’s Flash products are
100% proprietary.
– Second, there’s the “full
web”
• Adobe has repeatedly said
that Apple mobile devices
cannot access “the full web”
because 75% of video on
the web is in Flash
Tecnologias envolvidas

• Um dia Jobs disse:

– Third, there’s reliability,
security and performance
• Symantec recently highlighted
Flash for having one of the
worst security records in 2009.
– Fourth, there’s battery life
• To achieve long battery life
when playing video, mobile
devices must decode the video
in hardware; decoding it in
software uses too much
power.
Tecnologias envolvidas

• Um dia Jobs disse:

– Fifth, there’s Touch
• Flash was designed for PCs
using mouse, not for touch
screens using fingers
– Sixth, the most important
reason
• Adobe also wants
developers to adopt Flash
to create apps that run on
our mobile devices
Tecnologias envolvidas

• Um dia Jobs concluiu:

– Flash was created during the
PC era – for PCs and mouse.
Flash is a successful
business for Adobe, and we
can understand why they
want to push it beyond PCs.
But the mobile era is about
low power devices, touch
interfaces and open web
standards – all areas where
Flash falls short.
• Steve Jobs (April, 2010)