O documento apresenta uma introdução sobre os fundamentos da Web, abordando tópicos como protocolos HTTP e HTTPS, requisições e respostas entre cliente e servidor, URLs, MIME types e uma breve história da evolução da Web e das linguagens HTML.

1. segunda-feira, 12 de março de 12

2. HTML5 ESSENCIAL
Fundamentos de todo serviço na Web
segunda-feira, 12 de março de 12

3. EMENTA
• Fundamentos de Web
• Documentos HTML
• Conteúdo
• Hipermídia
• Semântica
• Desempenho
3
segunda-feira, 12 de março de 12

4. O QUE VEREMOS AGORA
• Fundamentos de Web
• Fundamentos de rede
• Protocolo HTTP e URLs
• Requisições e respostas
• Mimetypes e charsets
• Histórico da Web
• Tecnologias e ferramentas
• Documentos HTML
• Conteúdo
4
segunda-feira, 12 de março de 12

5. FUNDAMENTOS DE REDE
Camadas Web Camadas OSI
Camada de aplicação
Camada HTTP Camada de apresentação
Camada de sessão
Camada TCP Camada de transporte
Camada IP Camada de Rede
Camada de Enlace
Camada de física
Camada Física
5
segunda-feira, 12 de março de 12

6. PROTOCOLOS WEB
HTTP
Hypertext Transfer Protocol
Porta 80
HTTPS
Hypertext Transfer Protocol
Secure
Porta 443
6
segunda-feira, 12 de março de 12

7. DINÂMICA
7
segunda-feira, 12 de março de 12

8. DINÂMICA
1. cliente digita
o endereço
no seu navegador
7
segunda-feira, 12 de março de 12

9. DINÂMICA
2. Sua máqina solicita a um
Servidor DNS o endereço IP
do Servidor
1. cliente digita
o endereço
no seu navegador
7
segunda-feira, 12 de março de 12

10. DINÂMICA
2. Sua máqina solicita a um
Servidor DNS o endereço IP
do Servidor
1. cliente digita 3. Ele localiza e devolve o
o endereço IP do servidor solicitado
no seu navegador
7
segunda-feira, 12 de março de 12

11. DINÂMICA
2. Sua máqina solicita a um
Servidor DNS o endereço IP
do Servidor
1. cliente digita 3. Ele localiza e devolve o
o endereço IP do servidor solicitado
no seu navegador 4. O navegador solicita
um recurso ao servidor
encontrado
7
segunda-feira, 12 de março de 12

12. DINÂMICA
2. Sua máqina solicita a um
Servidor DNS o endereço IP
do Servidor
1. cliente digita 3. Ele localiza e devolve o
o endereço IP do servidor solicitado
no seu navegador 4. O navegador solicita
um recurso ao servidor
encontrado
5A. O servidor localiza /
processa o recurso
7
segunda-feira, 12 de março de 12

13. DINÂMICA
2. Sua máqina solicita a um
Servidor DNS o endereço IP
do Servidor
1. cliente digita 3. Ele localiza e devolve o
o endereço IP do servidor solicitado
no seu navegador 4. O navegador solicita
um recurso ao servidor
encontrado
6A. O servidor entrega o
recurso requisitado
5A. O servidor localiza /
processa o recurso
7
segunda-feira, 12 de março de 12

14. DINÂMICA
2. Sua máqina solicita a um
Servidor DNS o endereço IP
do Servidor
1. cliente digita 3. Ele localiza e devolve o
o endereço IP do servidor solicitado
no seu navegador 4. O navegador solicita
7. O navegador um recurso ao servidor
interpreta a resposta e encontrado
exibe ao cliente
6A. O servidor entrega o
recurso requisitado
5A. O servidor localiza /
processa o recurso
7
segunda-feira, 12 de março de 12

15. DINÂMICA
2. Sua máqina solicita a um
Servidor DNS o endereço IP
do Servidor
1. cliente digita 3. Ele localiza e devolve o
o endereço IP do servidor solicitado
no seu navegador 4. O navegador solicita
7. O navegador um recurso ao servidor
interpreta a resposta e encontrado
exibe ao cliente
7
segunda-feira, 12 de março de 12

16. DINÂMICA
2. Sua máqina solicita a um
Servidor DNS o endereço IP
do Servidor
1. cliente digita 3. Ele localiza e devolve o
o endereço IP do servidor solicitado
no seu navegador 4. O navegador solicita
7. O navegador um recurso ao servidor
interpreta a resposta e encontrado
exibe ao cliente
8
segunda-feira, 12 de março de 12

17. DINÂMICA
2. Sua máqina solicita a um
Servidor DNS o endereço IP
do Servidor
1. cliente digita 3. Ele localiza e devolve o
o endereço IP do servidor solicitado
no seu navegador 4. O navegador solicita
7. O navegador um recurso ao servidor
interpreta a resposta e encontrado
exibe ao cliente
5B O servidor detecta
alguma falha como por
exemplo o recurso não
existe
8
segunda-feira, 12 de março de 12

18. DINÂMICA
2. Sua máqina solicita a um
Servidor DNS o endereço IP
do Servidor
1. cliente digita 3. Ele localiza e devolve o
o endereço IP do servidor solicitado
no seu navegador 4. O navegador solicita
7. O navegador um recurso ao servidor
interpreta a resposta e encontrado
exibe ao cliente
6B. O servidor responde
uma mensagem
informando o erro
5B O servidor detecta
alguma falha como por
exemplo o recurso não
existe
8
segunda-feira, 12 de março de 12

19. CONTEÚDO
•O que trafega nos pacotes HTTP?
• Toda comunicação é composta de cabeçalho e possivelmente corpo
• Estes são separados por uma linha em branco
• Cada linha separa um item de outro no cabeçalho
• Todo cabeçalho é composto por Nome: Valor
• Cabeçalhos informam o que se quer (requisições) ou o que se tem de volta (respostas)
• Cabeçalhos também trazem informações sobre quem está enviando o pacote
9
segunda-feira, 12 de março de 12

20. REQUISIÇÕES
•O que trafega nos pacotes de requisições HTTP?
• Requisições são regidas por métodos
• O método mais comum é o GET (me dê!)
• Requisições de método GET não possuem corpo (a linha em branco encerra)
• Outro método bastante comum é o POST
• No POST, requisições são enviadas com informações no corpo (área após a linha em
branco)
10
segunda-feira, 12 de março de 12

21. REQUISIÇÕES
• Quais os métodos de requisições?
• Métodos inofensivos: OPTIONS e TRACE (raramente usados, não nos interessam)
• Métodos Safe: GET e HEAD (o segundo consulta apenas cabeçalhos)
• Outros métodos “idempotentes”: PUT (atualizar recurso) DELETE (deletar recurso)
• Método não idempotente: POST
• Na prática, usa-se GET e POST
• GET para consultas ou envio de dados que possam ser registrados no histórico do
navegador
• POST para envio de dados longos ou que não devam ser registrados no histórico
• Certos dados (como upload de arquivos) não podem ser enviados via GET
11
segunda-feira, 12 de março de 12

22. REQUISIÇÕES
• Exemplo de uma requisição
GET /wm-free/ HTTP/1.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8,pt;=0.5,pt-BR;q=0.3
Host: www.especializa.com.br
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/535.11
(KHTML, like Gecko) Chrome/17.0.963.56 Safari/535.11
12
segunda-feira, 12 de março de 12

23. REQUISIÇÕES
• Exemplo de uma requisição POST
POST /wm-free/ HTTP/1.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.8,pt;=0.5,pt-BR;q=0.3
Host: www.especializa.com.br
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/535.11
(KHTML, like Gecko) Chrome/17.0.963.56 Safari/535.11
login=fulano&senha=123&nome=Fulano+de+Tal&email=fulano%40detal.com
13
segunda-feira, 12 de março de 12

24. REQUISIÇÕES
Cabeçalhos
• Exemplo de uma requisição POST
POST /wm-free/ HTTP/1.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.8,pt;=0.5,pt-BR;q=0.3
Host: www.especializa.com.br
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/535.11
(KHTML, like Gecko) Chrome/17.0.963.56 Safari/535.11
Olha aqui a linha em branco!
login=fulano&senha=123&nome=Fulano+de+Tal&email=fulano%40detal.com
Corpo ou Querystring
13
segunda-feira, 12 de março de 12

25. RESPOSTAS
• Respostas podem conter cabeçalho e corpo
• Toda resposta inicia por um código, conheça os principais:
• Sucesso: 2XX
• 200 OK, 201 Created, entre outros
• Redirecionamentos: 3XX
• 301 Moved Permanently, 302 Found, 304 Not Modified (para caches)
• Erros do cliente: 4XX
• 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found
• Erros do servidor: 5XX
• 500 Internal Server Error, 501 Not Implemented, 502 Bad Gateway
14
segunda-feira, 12 de março de 12

26. RESPOSTAS
• Exemplo de uma resposta
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Date: Mon, 05 Mar 2012 04:37:47 GMT
Server: Apache
<!DOCTYPE html>
<html>
<head>
...
15
segunda-feira, 12 de março de 12

27. RESPOSTAS
• Exemplo de uma resposta
HTTP/1.1 200 OK Cabeçalhos
Content-Type: text/html; charset=UTF-8
Date: Mon, 05 Mar 2012 04:37:47 GMT
Server: Apache Olha aí a linha em branco!
<!DOCTYPE html>
Corpo
<html>
<head>
...
15
segunda-feira, 12 de março de 12

28. URL
Uniform (ou universal)
Resource Locator
• Padrão de escrita de endereços na Web
• Um tipo especial de URI ( ... Identifier)
• Caracteres especiais e espaços são codificados
para um formato %numero
Exemplo:
http://www.especializa.com.br:80/wm-free/?teste=123
protocolo://NomeDominioOuIP:Porta/recurso?querystring
16
segunda-feira, 12 de março de 12

29. MIME TYPES
• Multipurpose Internet Mail Extensions
• Catálogo de formatos de conteúdo a serem transmitido por email
• Embora adendo ao protocolo de envio de email (SMTP) o MIME é usado na Web por
servidores HTTP também
• O cabeçalho Content-type é quem determina o tipo do conteúdo. Ex:
• Content-type: text/html (Texto no formato HTML)
• Content-type: image/jpeg (Imagem no formato JPG)
• Content-type: application/x-www-form-urlencoded (Texto codificado querystring)
• Esse é o que o browser normalmente envia quando submetemos um formulário
• Mais formatos: http://www.iana.org/assignments/media-types/index.html
17
segunda-feira, 12 de março de 12

30. HISTÓRICO DA WEB
• Em 1990, Tim Berners-Lee criada a linguagem HTML - Hypertext Markup Language
• Em 1992, a NCSA investe na idéia do Hypertexto de Tim Berners-Lee
• Em 1993, a NCSA cria primeiro browser Web - Mosaic - créditos para Marc Andressen
• Em 1994, sai o HTML2 e são fundadas a Netscape e o W3C (WWW Consortium)
• Em 1995, sai o HTML3 com diversas novas tags e já regido pelo W3C
• Em 1996, é criado o Internet Explorer
• Em 1997, sai o HTML 3.2 a versão que popularizou o HTML
• Em 1998, sai o HTML4, também chamado de DHTML devido aos avanços no JS
• Em 2000, sai o XHTML (XML + HTML) e o HTML foi dado como depreciado
• Essa história está muito mais bem contada aqui:
http://www.slideshare.net/anm8tr/the-history-of-html5
18
segunda-feira, 12 de março de 12

31. BROWSERS
19
segunda-feira, 12 de março de 12

32. FERRAMENTAS
• Plugins: Firebug (FF), YSlow (FF e Chrome), Live
HTTP Headers (FF), Web Developer (FF e
Chrome), Pixel Perfect (FF ou Perfect Pixel no
Chrome), Chrome Sniffer (Chrome)
• Editores: Eclipse, Aptana, Dreamweaver,
NetBeans, Hype (animações HTML5)
• Ferramentas em geral: Burp Suite http://portswigger.net/
burp/
20
segunda-feira, 12 de março de 12