HTML5 Fundamentos Web

segunda-feira, 12 de março de 12

HTML5 ESSENCIAL
Fundamentos de todo serviço na Web


EMENTA
• Fundamentos de Web

• Documentos HTML

• Conteúdo

• Hipermídia

• Semântica

• Desempenho

3

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

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

PROTOCOLOS WEB
HTTP
Hypertext Transfer Protocol
Porta 80

HTTPS
Hypertext Transfer Protocol
Secure
Porta 443

6

DINÂMICA

7

DINÂMICA

1. cliente digita
o endereço
no seu navegador

7

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

DINÂMICA
do Servidor

1. cliente digita 3. Ele localiza e devolve o
o endereço IP do servidor solicitado
no seu navegador

7

DINÂMICA
do Servidor

no seu navegador 4. O navegador solicita
um recurso ao servidor
encontrado

7

DINÂMICA
do Servidor

encontrado

5A. O servidor localiza /
processa o recurso

7

DINÂMICA
do Servidor

encontrado

6A. O servidor entrega o
recurso requisitado

processa o recurso

7

DINÂMICA
do Servidor

7. O navegador um recurso ao servidor
interpreta a resposta e encontrado
exibe ao cliente
6A. O servidor entrega o
recurso requisitado

processa o recurso

7

DINÂMICA
do Servidor

exibe ao cliente

7

DINÂMICA
do Servidor

exibe ao cliente

8

DINÂMICA
do Servidor

exibe ao cliente

5B O servidor detecta
alguma falha como por
exemplo o recurso não
existe

8

DINÂMICA
do Servidor

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

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

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

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

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,deﬂate,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

REQUISIÇÕES
• Exemplo de uma requisição POST
POST /wm-free/ HTTP/1.1





login=fulano&senha=123&nome=Fulano+de+Tal&email=fulano%40detal.com

13

REQUISIÇÕES
Cabeçalhos
• Exemplo de uma requisição POST
POST /wm-free/ HTTP/1.1




Olha aqui a linha em branco!

login=fulano&senha=123&nome=Fulano+de+Tal&email=fulano%40detal.com

Corpo ou Querystring

13

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 Modiﬁed (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

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

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

URL
Uniform (ou universal)
Resource Locator

• Padrão de escrita de endereços na Web
• Um tipo especial de URI ( ... Identiﬁer)
• Caracteres especiais e espaços são codiﬁcados
para um formato %numero

Exemplo:
http://www.especializa.com.br:80/wm-free/?teste=123
protocolo://NomeDominioOuIP:Porta/recurso?querystring

16

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 codiﬁcado 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

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

BROWSERS

19

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

HTML5 Fundamentos Web

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (19)

Mais de Jose Berardo

Mais de Jose Berardo (12)

Último

Último (20)

HTML5 Fundamentos Web