Html5 aula 01
Upcoming SlideShare
Loading in...5
×
 

Html5 aula 01

on

  • 4,950 views

Slides da primeira aula do curso de HTML5.

Slides da primeira aula do curso de HTML5.

Statistics

Views

Total Views
4,950
Views on SlideShare
2,736
Embed Views
2,214

Actions

Likes
4
Downloads
200
Comments
0

2 Embeds 2,214

http://especializa.com.br 2208
http://plus.url.google.com 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5 aula 01 Html5 aula 01 Presentation Transcript

  • segunda-feira, 12 de março de 12
  • HTML5 ESSENCIAL Fundamentos de todo serviço na Websegunda-feira, 12 de março de 12
  • EMENTA • Fundamentos de Web • Documentos HTML • Conteúdo • Hipermídia • Semântica • Desempenho 3segunda-feira, 12 de março de 12
  • 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 4segunda-feira, 12 de março de 12
  • 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 5segunda-feira, 12 de março de 12
  • PROTOCOLOS WEB HTTP Hypertext Transfer Protocol Porta 80 HTTPS Hypertext Transfer Protocol Secure Porta 443 6segunda-feira, 12 de março de 12
  • DINÂMICA 7segunda-feira, 12 de março de 12
  • DINÂMICA 1. cliente digita o endereço no seu navegador 7segunda-feira, 12 de março de 12
  • 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 7segunda-feira, 12 de março de 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 7segunda-feira, 12 de março de 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 7segunda-feira, 12 de março de 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 7segunda-feira, 12 de março de 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 6A. O servidor entrega o recurso requisitado 5A. O servidor localiza / processa o recurso 7segunda-feira, 12 de março de 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 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 7segunda-feira, 12 de março de 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 7. O navegador um recurso ao servidor interpreta a resposta e encontrado exibe ao cliente 7segunda-feira, 12 de março de 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 7. O navegador um recurso ao servidor interpreta a resposta e encontrado exibe ao cliente 8segunda-feira, 12 de março de 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 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 8segunda-feira, 12 de março de 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 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 8segunda-feira, 12 de março de 12
  • 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 9segunda-feira, 12 de março de 12
  • 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) 10segunda-feira, 12 de março de 12
  • 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 11segunda-feira, 12 de março de 12
  • 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 12segunda-feira, 12 de março de 12
  • 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 13segunda-feira, 12 de março de 12
  • 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 13segunda-feira, 12 de março de 12
  • 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 14segunda-feira, 12 de março de 12
  • 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> ... 15segunda-feira, 12 de março de 12
  • 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> ... 15segunda-feira, 12 de março de 12
  • 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 16segunda-feira, 12 de março de 12
  • 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 17segunda-feira, 12 de março de 12
  • 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 18segunda-feira, 12 de março de 12
  • BROWSERS 19segunda-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/ 20segunda-feira, 12 de março de 12