html5 aula 01
Post on 29-Jun-2015
5.784 Views
Preview:
DESCRIPTION
TRANSCRIPT
segunda-feira, 12 de março de 12
HTML5 ESSENCIALFundamentos de todo serviço na Web
segunda-feira, 12 de março de 12
• Fundamentos de Web
• Documentos HTML
• Conteúdo
• Hipermídia
• Semântica
• Desempenho
EMENTA
3
segunda-feira, 12 de março de 12
• 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
segunda-feira, 12 de março de 12
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
segunda-feira, 12 de março de 12
PROTOCOLOS WEBHTTPHypertext Transfer ProtocolPorta 80
HTTPSHypertext Transfer Protocol SecurePorta 443
6
segunda-feira, 12 de março de 12
DINÂMICA
7
segunda-feira, 12 de março de 12
DINÂMICA
1. cliente digitao endereço
no seu navegador
7
segunda-feira, 12 de março de 12
DINÂMICA
1. cliente digitao endereço
no seu navegador
2. Sua máqina solicita a um Servidor DNS o endereço IP
do Servidor
7
segunda-feira, 12 de março de 12
DINÂMICA
1. cliente digitao endereço
no seu navegador
2. Sua máqina solicita a um Servidor DNS o endereço IP
do Servidor
3. Ele localiza e devolve o IP do servidor solicitado
7
segunda-feira, 12 de março de 12
DINÂMICA
1. cliente digitao endereço
no seu navegador
2. Sua máqina solicita a um Servidor DNS o endereço IP
do Servidor
3. Ele localiza e devolve o IP do servidor solicitado
4. O navegador solicita um recurso ao servidor
encontrado
7
segunda-feira, 12 de março de 12
DINÂMICA
1. cliente digitao endereço
no seu navegador
2. Sua máqina solicita a um Servidor DNS o endereço IP
do Servidor
3. Ele localiza e devolve o IP do servidor solicitado
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
6A. O servidor entrega o recurso requisitado
DINÂMICA
1. cliente digitao endereço
no seu navegador
2. Sua máqina solicita a um Servidor DNS o endereço IP
do Servidor
3. Ele localiza e devolve o IP do servidor solicitado
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
6A. O servidor entrega o recurso requisitado
DINÂMICA
1. cliente digitao endereço
no seu navegador
2. Sua máqina solicita a um Servidor DNS o endereço IP
do Servidor
3. Ele localiza e devolve o IP do servidor solicitado
4. O navegador solicita um recurso ao servidor
encontrado
5A. O servidor localiza / processa o recurso
7. O navegador interpreta a resposta e
exibe ao cliente
7
segunda-feira, 12 de março de 12
DINÂMICA
1. cliente digitao endereço
no seu navegador
2. Sua máqina solicita a um Servidor DNS o endereço IP
do Servidor
3. Ele localiza e devolve o IP do servidor solicitado
4. O navegador solicita um recurso ao servidor
encontrado7. O navegador
interpreta a resposta e exibe ao cliente
7
segunda-feira, 12 de março de 12
DINÂMICA
1. cliente digitao endereço
no seu navegador
2. Sua máqina solicita a um Servidor DNS o endereço IP
do Servidor
3. Ele localiza e devolve o IP do servidor solicitado
4. O navegador solicita um recurso ao servidor
encontrado7. O navegador
interpreta a resposta e exibe ao cliente
8
segunda-feira, 12 de março de 12
5B O servidor detecta alguma falha como por exemplo o recurso não
existe
DINÂMICA
1. cliente digitao endereço
no seu navegador
2. Sua máqina solicita a um Servidor DNS o endereço IP
do Servidor
3. Ele localiza e devolve o IP do servidor solicitado
4. O navegador solicita um recurso ao servidor
encontrado7. O navegador
interpreta a resposta e exibe ao cliente
8
segunda-feira, 12 de março de 12
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
1. cliente digitao endereço
no seu navegador
2. Sua máqina solicita a um Servidor DNS o endereço IP
do Servidor
3. Ele localiza e devolve o IP do servidor solicitado
4. O navegador solicita um recurso ao servidor
encontrado7. O navegador
interpreta a resposta e exibe ao cliente
8
segunda-feira, 12 de março de 12
• 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
segunda-feira, 12 de março de 12
• 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
segunda-feira, 12 de março de 12
• 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
segunda-feira, 12 de março de 12
• 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
segunda-feira, 12 de março de 12
• 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
REQUISIÇÕES
13
segunda-feira, 12 de março de 12
• 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
REQUISIÇÕES
13
Olha aqui a linha em branco!
Cabeçalhos
Corpo ou Querystring
segunda-feira, 12 de março de 12
• 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
segunda-feira, 12 de março de 12
• 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
segunda-feira, 12 de março de 12
• 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
segunda-feira, 12 de março de 12
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
segunda-feira, 12 de março de 12
• 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
segunda-feira, 12 de março de 12
• 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
segunda-feira, 12 de março de 12
BROWSERS
19
segunda-feira, 12 de março de 12
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
top related