html5 aula 01

segunda-feira, 12 de março de 12

HTML5 ESSENCIALFundamentos de todo serviço na Web


• Fundamentos de Web

• Documentos HTML

• Conteúdo

• Hipermídia

• Semântica

• Desempenho

EMENTA

3


• 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

O QUE VEREMOS AGORA

4


Camadas OSICamadas Web

FUNDAMENTOS DE REDE

5

Camada de físicaCamada Física

Camada de Enlace

Camada IP Camada de Rede

Camada TCP Camada de transporte

Camada HTTP

Camada de sessão

Camada de apresentação

Camada de aplicação


PROTOCOLOS WEBHTTPHypertext Transfer ProtocolPorta 80

HTTPSHypertext Transfer Protocol SecurePorta 443

6


DINÂMICA

7


DINÂMICA

1. cliente digitao endereço

no seu navegador

7


DINÂMICA


no seu navegador

2. Sua máqina solicita a um Servidor DNS o endereço IP

do Servidor

7


DINÂMICA


no seu navegador


do Servidor

3. Ele localiza e devolve o IP do servidor solicitado

7


DINÂMICA


no seu navegador


do Servidor


4. O navegador solicita um recurso ao servidor

encontrado

7


DINÂMICA


no seu navegador


do Servidor



encontrado

5A. O servidor localiza / processa o recurso

7


6A. O servidor entrega o recurso requisitado

DINÂMICA


no seu navegador


do Servidor



encontrado


7


6A. O servidor entrega o recurso requisitado

DINÂMICA


no seu navegador


do Servidor



encontrado


7. O navegador interpreta a resposta e

exibe ao cliente

7


DINÂMICA


no seu navegador


do Servidor



encontrado7. O navegador

interpreta a resposta e exibe ao cliente

7


DINÂMICA


no seu navegador


do Servidor





8


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

existe

DINÂMICA


no seu navegador


do Servidor





8


6B. O servidor responde uma mensagem

informando o erro

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

existe

DINÂMICA


no seu navegador


do Servidor





8


• 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

CONTEÚDO

9


• 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)

REQUISIÇÕES

10


• 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

REQUISIÇÕES

11


• 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

REQUISIÇÕES

12


http://www.especializa.com.br


• Exemplo de uma requisição POST

POST /wm-free/ HTTP/1.1





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

REQUISIÇÕES

13




• Exemplo de uma requisição POST

POST /wm-free/ HTTP/1.1





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

REQUISIÇÕES

13

Olha aqui a linha em branco!

Cabeçalhos

Corpo ou Querystring




• 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

RESPOSTAS

14


• 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>

...

RESPOSTAS

15


• 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>

...

RESPOSTAS

15

Olha aí a linha em branco!

Cabeçalhos

Corpo


URLUniform (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=123protocolo://NomeDominioOuIP:Porta/recurso?querystring

16


• 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 porservidores 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

MIME TYPES

17


http://www.iana.org/assignments/media-types/index.html

http://www.iana.org/assignments/media-types/index.html

• 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

HISTÓRICO DA WEB

18


http://www.slideshare.net/anm8tr/the-history-of-html5

http://www.slideshare.net/anm8tr/the-history-of-html5

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


http://portswigger.net/burp/




html5 aula 01

Education