31. Conteúdos estáticos e
dinâmicos
Quero uma página
URL: http://google.com?q=abobrinha
Aplicação
Browser Servidor web
Usuários
25
32. Conteúdos estáticos e
dinâmicos
Quero uma página
URL: http://google.com?q=abobrinha
Aplicação
Browser Servidor web
Usuários
25
33. Conteúdos estáticos e
dinâmicos
Processa em seu banco de
dados uma busca por elementos
relacionados a abobrinha
Aplicação
Browser Servidor web
Usuários
26
34. Conteúdos estáticos e
dinâmicos
Processa em seu banco de
dados uma busca por elementos
relacionados a abobrinha
Aplicação
Browser Servidor web
Usuários
26
35. Conteúdos estáticos e
dinâmicos
Resposta com os códigos HTML, CSS e JS
gerados pela aplicação
Aplicação
Browser Servidor web
Usuários
27
36. Conteúdos estáticos e
dinâmicos
Resposta com os códigos HTML, CSS e JS
gerados pela aplicação
Aplicação
Browser Servidor web
Usuários
27
37. Conteúdos estáticos e
dinâmicos
• Vantagens do conteúdo estático
• mais rápido visto que não exige
processamento no servidor
• possui políticas de cache mais agressivas
• compatível com qualquer servidor
28
38. Conteúdos estáticos e
dinâmicos
• Vantagens do conteúdo dinâmico
• permite que os conteúdos sejam
atualizados mais rapidamente
• permite que o conteúdo se adeque ao
perfil do usuário
29
41. Conteúdos estáticos e
dinâmicos
Quais linguagens de programacão pode ser utilizadas
para desenvolver a aplicação referida?
Aplicação
Pergunta pegadinha ha
32
42. Conteúdos estáticos e
dinâmicos
Quais linguagens de programacão pode ser utilizadas
para desenvolver a aplicação referida?
TODAS que forem suportadas
pelo seu servidor web
Aplicação
33
43. Conteúdos estáticos e
dinâmicos
Quais linguagens de programacão pode ser utilizadas
para desenvolver a aplicação referida?
TODAS que forem suportadas
pelo seu servidor web
Aplicação
Existe uma ampla variedade de servidores web
34
48. Arquitetura Cliente/Servidor
• Arquitetura Distribuída de Cliente/Servidor
• Cliente: considera as partes da
aplicação que são executadas dentro do
navegador
• Servidor: considera as partes da
aplicação que são executadas no servidor
39
50. HTTP, HTML e
Navegadores Web
Rede
HTML
Aplicação
JavaScript CSS
Cliente Servidor
41
51. HTTP, HTML e
Navegadores Web
Rede
Como funciona a comunicação
entre Cliente/Servidor?
42
52. HTTP, HTML e
Navegadores Web
Rede
Como funciona a comunicação
entre Cliente/Servidor?
HTTP - HyperText Transport Protocol
43
53. HTTP, HTML e
Navegadores Web
• HTTP
• HyperText Transfer Protocol
• Padrão utilizado na www - World Wide
Web
• Utiliza IP/TCP, atuando no nível da
aplicação (Modelo OSI)
• Utilizado para transmitir Recursos (URL -
Unified Resources Location)
44
54. HTTP, HTML e
Navegadores Web
> GET / HTTP/1.1
> User-Agent: curl/7.27.0
Requisição HTTP
> Host: www.google.com
> Accept: */*
45
55. HTTP, HTML e
Navegadores Web
> GET / HTTP/1.1
> User-Agent: curl/7.27.0
Requisição HTTP
> Host: www.google.com
> Accept: */*
< HTTP/1.1 302 Found
< Location: http://www.google.com.br/
< Cache-Control: private
< Content-Type: text/html; charset=UTF-8
46
56. HTTP, HTML e
Navegadores Web
> GET / HTTP/1.1
> User-Agent: curl/7.27.0
Requisição HTTP
> Host: www.google.com
> Accept: */*
< HTTP/1.1 302 Found
< Location: http://www.google.com.br/
Resposta HTTP
< Cache-Control: private
< Content-Type: text/html; charset=UTF-8
47
57. HTTP, HTML e
Navegadores Web
< HTTP/1.1 302 Found
< Location: http://www.google.com.br/
< Cache-Control: private
< Content-Type: text/html; charset=UTF-8
Status da Resposta
HTTP
48
58. HTTP, HTML e
Navegadores Web
• Tipos de Status
• 1xx indica uma mensagem informacional
• 2xx indica sucesso na transação
• 3xx redireciona o cliente para outra URL
• 4xx indica um erro por parte do cliente
• 5xx indica um erro por parte do servidor
49
59. HTTP, HTML e
Navegadores Web
Completa especificação dos possíveis estados:
http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
50
60. HTTP, HTML e
Navegadores Web
> GET / HTTP/1.1
> User-Agent: curl/7.27.0 Cabeçalhos da
> Host: www.google.com requisição
> Accept: */*
< HTTP/1.1 302 Found
< Location: http://www.google.com.br/
< Cache-Control: private
< Content-Type: text/html; charset=UTF-8
51
61. HTTP, HTML e
Navegadores Web
> GET / HTTP/1.1
> User-Agent: curl/7.27.0 Cabeçalhos da
> Host: www.google.com resposta
> Accept: */*
< HTTP/1.1 302 Found
< Location: http://www.google.com.br/
< Cache-Control: private
< Content-Type: text/html; charset=UTF-8
52
62. HTTP, HTML e
Navegadores Web
> GET / HTTP/1.1
> User-Agent: curl/7.27.0 Tipos de requisição
> Host: www.google.com HTTP
> Accept: */*
< HTTP/1.1 302 Found
< Location: http://www.google.com.br/
< Cache-Control: private
< Content-Type: text/html; charset=UTF-8
53
63. HTTP, HTML e
Navegadores Web
• GET Tipos de requisição
HTTP
• POST
• DELETE
• PUT
• HEAD
54
64. HTTP, HTML e
Navegadores Web
Tipos de requisição
HTTP
• Envio de parâmetros para transação em
formato x-www-urlencoded
http://www.google.com?q=alguma_coisa_para_buscar
55
65. HTTP, HTML e
Navegadores Web
> GET /?q=abobrinha HTTP/1.1
> User-Agent: curl/7.27.0
> Host: google.com
> Accept: */*
56
66. HTTP, HTML e
Navegadores Web
> GET /?q=abobrinha HTTP/1.1
> User-Agent: curl/7.27.0
> Host: google.com
> Accept: */*
<?php
echo $_GET[‘q’];
?>
Servidor web
57
67. HTTP, HTML e
Navegadores Web
• GET => parâmetros na URL
• POST => parâmetros no corpo
• DELETE => parâmetros na URL
• PUT => parâmetros no corpo
• HEAD => parâmetros na URL
Freqüentemente
58
68. HTTP, HTML e
Navegadores Web
• GET => parâmetros na URL
• POST => parâmetros no corpo
• DELETE => parâmetros na URL
• PUT => parâmetros no corpo
• HEAD => parâmetros na URL
Únicos métodos aceitos no navegador
59
69. HTTP, HTML e
Navegadores Web
• Método GET
• Utilizado para enviar parâmetros de
busca e leitura ao servidor
• Os dados são enviados na URL seguindo
o formato da query string
70. HTTP, HTML e
Navegadores Web
• Método POST
• Utilizado para enviar parâmetros de
escrita ao servidor
• Os dados são enviados no corpo da
requisição HTTP seguindo o formato da
query string
71. HTTP, HTML e
Navegadores Web
• Método HEAD
• Utilizado para pesquisar meta-dados de
recursos disponíveis em URLs
• Por exemplo: utilizado para fazer a
verificação se um arquivo em cache foi
alterado no servidor.
73. HTTP, HTML e
Navegadores Web
Como o navegador utiliza o HTTP?
<a href=”http://www.google.com?
q=abobrinha”>procurar abobrinha</a>
> GET /?q=abobrinha HTTP/1.1
> User-Agent: curl/7.27.0
> Host: google.com
> Accept: */*
74. HTTP, HTML e
Navegadores Web
Como o navegador utiliza o HTTP?
<a href=”/?q=abobrinha”>procurar
abobrinha</a>
> GET /?q=abobrinha HTTP/1.1
> User-Agent: curl/7.27.0
> Host: dominio.alegre.com
> Accept: */*
utilizando um endereço relativo
75. HTTP, HTML e
Navegadores Web
<form method=”GET” action=”http://google.com”>
Como o navegador utiliza o HTTP?
<label for=”q”>Procurar:</label>
<input type=”text” id=”q” name=”q”></input>
<input type=”submit” value=“submit”></input>
</form>
> GET /?q=abobrinha HTTP/1.1
> User-Agent: curl/7.27.0
> Host: google.com
> Accept: */*
76. HTTP, HTML e
Navegadores Web
<form method=”POST” action=”http://google.com”>
Como o navegador utiliza o HTTP?
<label for=”q”>Procurar:</label>
<input type=”text” id=”q” name=”q”></input>
<input type=”submit” value=“submit”></input>
</form>
> POST / HTTP/1.1
> User-Agent: curl/7.27.0
> Host: google.com
> Accept: */*
q=abobrinha
77. HTTP, HTML e
Navegadores Web
Como o navegador utiliza o HTTP?
<img src=”figura_legal.png” alt= “super legal”></img>
<link rel="stylesheet" href="master.css" type="text/css"
media="screen" charset="utf-8" />
<script type=“text/javascript” src=“jquery.js” />
78. HTTP, HTML e
Navegadores Web
Como o navegador utiliza o HTTP?
Também existem outras formas de realizar essas
requisições utilizando JavaScript e a linguagem de
programação do lado do servidor