Analisando o HTTP(Firefox)

Outro ponto que não podia deixar de ser citado são as opções de add-ons do Firefox. Add-ons são extensões feitas para o Firefox que podem ser as mais diversas.

Para analisar também as requisição e resposta HTTP e HTTPs existe o Tamper Data. Ele permite a análise e modificação do cabeçalho e parâmetros de post. Além disso é possível rastrear e ver o tempo das requisições e respostas.

Uma segunda opção, menos específica em relação a HTTP, mas uma ferramenta indispensável para o desenvolvedor WEB é o Firebug. Além da sua página de add-on é possível navegar em sua página específica para ter acesso a impressões de telas e mais documentações:
https://addons.mozilla.org/pt-BR/firefox/addon/1843

O Firebug é para mim a ferramenta mais completa para analisar as informações de cliente WEB.

Analisando o HTTP(Fiddler)

Muitas vezes não será necessário depurar o HTTP, talvez alguns desenvolvedores experientes nem conheçam como efetivamente é uma mensagem HTTP de requisição ou resposta. Mas acho importante este conhecimento ou saber que existe meios para analisá-las.

Recentemente a Google fez uma análise de requisições feitas ao se logar no Gmail. Nesta análise eles usaram diversos programa como o Httpwatch, WireShark, Fiddler e outros internos. Com esta análise eles otimizaram bastante o desempenho desta funcionalidade! A idéia aqui é mostrar apenas o Fiddler, que é um HTTP Debugging Proxy, ou em português Proxy para depurar HTTP.

O Fiddler é grátis e pode ser baixado na seção baixar arquivos de seu site. Será necessário a instalação do .NET framework 2.0. Como ele é um proxy, pode ser usado por diversos programas clientes, como os navegadores Internet Explorer e o Firefox.

Existe um vídeo introdutório excelente sobre o Fiddler, que pode ser baixado neste endereço:
http://www.fiddlertool.com/fiddler/help/video/FiddlerQuickStart.wmv

Este vídeo explica desde sua instalação até a utilização de diversos de seus recursos. De qualquer forma continuarei abaixo mostrando algumas de suas funcionalidades.

Depois de instalado o Fiddler poderá ser iniciado através no Internet Explorer, veja na imagem 1


Imagem 1 - Abrindo o Fiddler

Ao acionar o Fiddler da maneira acima é feito duas coisas, o programa é aberto e é configurado no Internet Explorer o proxy. E é assim que o fiddler funciona, como ele virou o proxy de nossa aplicação ele recebe todas as requisições e respostas feitas pelo Internet Explorer. Assim ele faz o log de TUDO que é trafegado. Veja a configuração do proxy na imagem 2:

Imagem 2 - Configuração do proxy no Internet Explorer

Agora vamos usar o Fiddler, ao requisitar um endereço, por exemplo este:
http://clienteweb.blogspot.com/2008/07/arquitetura-webhttp-parte-3.html

O Fiddler irá mostrar em seu painel esquerdo(Web Sessions) as diversas requisições/respostas feitas para recuperar os recursos daquela url. Pode não ser apenas uma única requisição/resposta porque um HTML pode ter internamente várias imagens ou hiperlinks para outros HTMLs e cada hiperlink é necessário fazer outras requisições.

Na imagem 3, estamos analisando a primeira requisição:


Imagem 3 - Analisando uma requisição no Fiddler

Veja que no painel da direita superior é possível ver os cabeçalhos da requisição, onde há informações como:

• Método e recurso requisitado:
  GET /2008/07/arquitetura-webhttp-parte-3.html HTTP/1.1
  
  
• Cultura e localização(Português Brasil):
  Accept-Language: pt-br
  
  
• Navegador e versão:
  User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)

No painel da direita inferior é possível ver os cabeçalhos da resposta, onde há informações como:

• Protocolo e códigos de status, neste caso 200 é ok:
  HTTP/1.1 200 OK
  
  
• Informaçõe do servidor:
  Server: GFE/1.3
  

Repare que nesta visão o Fiddler faz um tratamento das mensagens para formata-las, mas podemos também ver as mensagem sem nenhum tratamento, da forma como realmente foram trocadas, basta clicar na guia raw, conforme Imagem 4:

Imagem 4 - Analisando toda a requisição

Desta forma vemos que o cabeçalho de resposta e o HTML é separado apenas por caracteres como a quebra de linha.

O Fiddler então é um excelente programa para conhecer as diversas requisições feitas para requisitar um determinado recurso. Vale a pena fazer diversas requisições para ver como funciona requisições HTTPs, redirecionamentos, requisições de arquivos que estão em cache e por aí vai!

Caso queira, veja também a especificação do HTTP 1.1 e analise cabeçalho códigos de resposta. Isto é uma excelente oportunidade de praticar este tanto de teoria.

Referências:
http://www.fiddlertool.com/fiddler/
http://gmailblog.blogspot.com/2008/05/need-for-speed-path-to-faster-loading.html
http://www.w3.org/Protocols/rfc2616/rfc2616.html

Arquitetura WEB(HTTP) - Parte 3

Vamos agora falar sobre o principal protocolo da arquitetura web. O HTTP que também está na imagem 01:

Imagem 01 - Arquitetura Web

Um protocolo é uma convenção ou padrão que controla ou permite a conexão, comunicação e transferência de dados através de dois pontos computacionais. Eles podem ser implementados por hardware ou software ou a combinação dos dois.

Os protocolos em geral implementam as seguintes funcionalidades:

• detecção da conexão física subjacente ou a existência de um nó;
  handshaking (aperto de mão);


• negociação de várias características de uma conexão;


• como iniciar e finalizar uma mensagem;


• como formatar uma mensagem;


• o que fazer com mensagens corrompidas ou mal formatadas;


• como detectar perda inesperada de conexão e o que fazer em seguida;


• término de sessão ou conexão

HTTP(HyperText Transfer Protocol) é o protocolo Aplicação, do Modelo OSI, utilizado para transferência de dados na rede mundial de computadores, WWW(World Wide Web), veja na Imagem 2.

Imagem 2 - Modelo OSI

Ou seja, o HTTP é um protocolo em cima de outros protocolos, como por exemplo o TCP, isto é possível observar na Imagem 3.


Imagem 3 - Modelo OSI, algumas implementações

O HTTP, atualmente na versão 1.1, é um protocolo sem estado, ou seja, o cliente não fica sempre conectado ao servidor, faz esta conexão a cada requisição de um determinado recurso. Sua comunicação é feita através de requisições e respostas(Request/Response) e é feita através de uma mensagem que é composta de um cabeçalho e corpo.

As mensagens de requisição e de resposta têm informações diferentes. A mensagem HTTP de requisição é feita por um cliente, na maioria dos casos um navegador, que informa dentre outros dados qual o recurso solicitado e qual o método de requisição, os mais comuns são:

• GET
• POST

A mensagem HTTP de resposta é a resposta do servidor à requisição em seu cabeçalho está disponível o código de status e em seu corpo o texto do recurso solicitado, se for um HTML, estará o próprio HTML.

Existe também uma implementação segura, critptografada, do HTTP, chamada HTTPs. O HTTPs é implementado sobre uma camada SSL(Secure Sockets Layer) ou TLS (Transport Layer Security). Com ele é possível trafegar informações seguras entre cliente e servidor, garantindo assim que as mensagens que forem interceptadas sejam praticamente impossíveis de serem descriptografadas sem as chaves.

Para saber quando estamos em um site seguro, que implementa HTTPs, basta se atentar ao navegador. A url deverá estar iniciada com "https://" e um cadeado é comumente exibido, veja isto no internet explorer, na imagem 4 e no firefox na imagem 5.


Imagem 4 - Conexão segura no Internet Explorer


Imagem 5 - Conexão segura no Firefox

Outros personagens muitas vezes encontrados na arquitetura WEB é o Firewall e o Proxy. O Firewall é o responsável por barras requisições não desejáveis a um computador. Proxy é um tipo de servidor que atua nas requisições dos seus clientes executando os pedidos de conexão a outros servidores.

Referências:
http://en.wikipedia.org/wiki/OSI_model
http://www.novell.com/info/primer/prim05.html

Arquitetura WEB(Navegador, HTML, URL) - Parte 1

A idéia aqui é explicarmos a arquitetura WEB, pois para se desenvolver aplicações WEB é muito importante conhecer quais conceitos são envolvidos.

A arquitetura web pode ser esquematizada conforme a imagem 01:


Imagem 01 - Arquitetura Web

Neste modelo podemos ver os seguintes conceitos:

• Navegador
• URL
• HTTP(Request/Response)
• Servidor WEB
• HTML

O Navegador é o programa onde os usuários da web navegam na internet, requisitando URLs(Uniform Resource Locator) e o responsável por interpretar o conteúdo enviado pelo servidor WEB e montar um resultado gráfico. Esta comunicação entre o navegador e o servidor WEB se dá através do protocolo HTTP, principalmente. Os dois navegadores mais utilizados hoje em dia são o Internet Explorer e o Firefox.

A imagem 02, mostra uma pesquisa feita pela Net Applications sobre a utilização dos navegadores pelos usuários. A imagem foi capturada com os valores baseados em 12 de julho de 2008, mas o link utilizado é http://marketshare.hitslink.com/report.aspx?qprid=0#.


Imagem 02 - Uso de navegadores

URL(Uniform Resource Locator)

A url define o endereço de um recurso na rede, esta é definida conforme o seguinte modelo:
protocolo://servidor[:porta][caminho]

Onde:

• protocolo define o protoco9lo a ser utilizado, por exemplo HTTP
• servidor é o endereço/nome do servidor
• porta é opcional, no caso do HTTP se omitido é assumido a porta 80
• caminho define algum recurso em específico naquele servidor

Alguns exemplos de URLs por protocolo/esquema:

HTTP
htttp://servidor:porta/caminho?querystring
http://clienteweb.blogspot.com:80
O padrão http é a porta 80, não é necessário digitá-la
http://aplicacoesweb.blogspot.com

FTP
ftp://ftp.site.com/caminho

E-mail
mailto:joao_da_silva@hotmail.com


As URLs ainda podem ser absolutas. Ou seja, tem a informação completa para se acessar um recurso, ou seja, indenpendente da onde o usuário esteja navegando, poderá acessar aquele recurso, desde que tenha acesso, exemplo de url absoluta:
http://clienteweb.blogspot.com/2008/06/introduo.html

As URLs também podem ser relativas, desta forma sua informação é relativa a um determinado local conhecido, estando neste endereço, http://clienteweb.blogspot.com/, Poderíamos acessar o mesmo recurso acima definindo o seguinte endereço relativo:
./2008/06/introduo.html

HTML(HyperText Markup Language)

Um dos formatos de documento entendido pelo navegador e enviado pelo servidor WEB é o HTML. O HTML é uma linguagem de marcação de hipertexto, onde há definido principalmente informações sobre seu conteúdo e algumas outras informações sobre sua formatação. Ela é muito parecida com o XML e existe até o caso do XHTML que é uma especialização de XML. Atualmente estão trabalhando em sua versão 5.0.

Um exemplo básico de sua estrutura é :

<html>
<head>
<title> Titulo do documento </title>
</head>
<body>

conteúdo do documento

</body>
</html>


Referências:
http://marketshare.hitslink.com/report.aspx?qprid=0#
http://www.w3.org/Addressing/URL/url-spec.html
http://www.w3.org/Addressing/URL/4_1_HTTP.html
http://www.w3.org/TR/REC-html40/
http://www.w3.org/MarkUp/Guide/