Projeto Supervisionado no
Desenvolvimento de Aplicações
Profissionais na Web
Introdução a Aplicações Web
Projeto Supervisionado no Desenvolvimento de Aplicações Profissionais na Web
• Introdução
– Histórico
• História da Internet
– Conceitos básicos
• Aplicações Distribuídas
• Cliente/Servidor
• Aplicação Web
– Aplicação Web
• Protocolo HTTP
Projeto Supervisionado no Desenvolvimento de Aplicações Profissionais na Web
• História da Internet
– 1969 : ARPANET
• Primeira rede a usar transmissão por pacote de dados e roteamento, base do TCP/IP
–
–
–
–
–
–
–
–
–
1981: Padronização do TCP/IP como protocolo
1989: Conceituação da World Wide Web ( Tim Berners-Lee – CERN )
1995: Amazon
1998: Google
1999: Napster ( P2P )
2003: Skype
2004: Facebook
2005: AJAX começa a ser usado em larga escala
2006: Amazon EC2 ( Cloud Computing )
Projeto Supervisionado no Desenvolvimento de Aplicações Profissionais na Web
• História da Internet
– Anos 80 : Era do PC
• Uso do computador como ferramenta pessoal ( fora das empresas )
• Aplicações Standalone
– Anos 90: Web 1.0
•
•
•
•
Aplicações web estáticas, puramente páginas HTML.
Navegadores com pouco poder de processamento
Pouco publicadores de conteúdo
~ sites
– Anos 2000 : Web 2.0
• Aplicações Web complexas
– Melhor interação.
– Navegadores executando scripts
• Compartilhamento de conteúdo / contribuição de usuários
• ~ sites
Projeto Supervisionado no Desenvolvimento de Aplicações Profissionais na Web
• Conceitos Básicos
– Aplicações Distribuídas
• É uma aplicação/sistema cujos componentes são distribuídos em diferentes máquinas,
interligadas por uma rede de computadores
• Aplicação se comporta, ou se apresenta, como um único sistema.
– Normalmente cada maquina/componente é especializado em uma tarefa/objetivo específico
– Ex: Programas para processamento de grande quantidade de dados, aplicações cliente-servidor,
serviços de virtualização de máquinas, etc..
• Aplicações não distribuídas são ditas simples, monolíticas ou standalone.
– Ex: Aplicações puramente desktop.
Projeto Supervisionado no Desenvolvimento de Aplicações Profissionais na Web
• Conceitos Básicos
– Aplicações Cliente-Servidor
• É uma aplicação distribuída que possui pelo menos dois componentes bem definidos,
chamados de cliente e servidor
– Cliente
• Componente que se conecta ao servidor e solicita recursos e/ou serviços
– Servidor
• Componente que espera pelas solicitações do cliente e serve os recursos e/ou serviços
solicitados.
Projeto de Monitoramento de Objetos Moveis
• Conceitos
– Aplicações Web
• Simplesmente uma aplicação Cliente – Servidor onde:
– Cliente : Navegador Web
» Requisita páginas html, imagens, scripts e etc.
– Servidor: Servidor Web
» Serve páginas html, imagens, scripts e etc.
– Ela consiste em uma coleção de scripts (processamento), tanto do lado do cliente
quanto do servidor , páginas HTML e outros recursos.
– Aplicações web modernas fazem uso extensivo de outros recursos mais complexos
» Bancos de dados
» Serviços Web
» etc
Projeto de Monitoramento de Objetos Moveis
• Conceitos
– Aplicações Web
• Os componentes de uma aplicação são interligados pela Internet, a rede global de redes de
computadores interconectadas
– Usa o TCP/IP ( Transmission Control Protocol / Internet Protocol ) como protocolo de comunicação
padrão
– World Wide Web
• Sistema de documentos interconectados, acessados via Internet, através do protocolo HTTP
( Hipert Text Transfer Protocol )
• Esses documentos atualmente contém “hipermidia”: série de textos, videos, imagens e etc,
interligados através de hiperlinks
– Hiperlinks é que forma a estrutura da Internet
Projeto de Monitoramento de Objetos Moveis
• Conceitos
– Vantages das aplicações Web
• Ubiquidade, pois tem o navegador como cliente
– HTML e Javascript são padronizados, não dependem de plataforma.
• Facilidade de manutenção e distribuição
– Não há necessidade de instalação de novas versões em milhares de computadores clientes
– Desvantagens das aplicações Web
• Experiência do usuário não é tão boa quanto em aplicações nativas ( ainda )
• Privacidade e Segurança mais complexas
• Mais difícil de desenvolver por conta do grande número de componentes separados
Projeto de Monitoramento de Objetos Moveis
• Aplicação Web
– A comunicação entre o cliente e o servidor de uma aplicação web é feita através do
protocolo HTTP
– HTTP
• Protocolo responsável por entregar os recursos dos sistemas hipermidia
• O funcionamento básico é de requisições HTTP iniciadas no cliente, tratadas pelo servidor,
que retorna recursos para o navegador.
• Alguns dos recursos transportados por esse protocolo incluem:
–
–
–
–
Documentos de hipertexto/hipermidia
Cascading Style Sheets ( CSS )
Imagens, videos, e etc
Scripts ( Geralmente JavaScript )
Projeto de Monitoramento de Objetos Moveis
• HTTP
– Extremamente leve e simples
– Baseado em texto
– Protocolo “stateless”
• Como não há estado inerente, cada requisição/resposta é processado de forma
independente. Não há dependência com requisições anteriores
• Torna a implementação de aplicações interativas muito dificil
• Necessidade de soluções para criar aplicações web mais ricas
–
–
–
–
Cookies
Sessões
Estado codificado como parâmetros
Etc
Projeto de Monitoramento de Objetos Moveis
• HTTP
– Funcionamento
• Cliente HTTP ( Navegador ) abre uma conexão TCP com o Servidor
– Porta TCP padrão : 80 ( HTTPS é 443 )
• Cliente envia a requisição HTTP ao servidor
– Ex: GET /index.html
• Servidor processa e responde a requisição:
– Ex: HTTP/1.1 200 OK
Projeto de Monitoramento de Objetos Moveis
• HTTP
– Requisição ( Request )
• Identifica um recurso e uma ação (método) a ser aplicada a esse recurso
– O recurso é identificado por uma URI ( Universal Resource Identifier)
• Possui um cabeçalho e um corpo
• Métodos HTTP
– GET – retorna o recurso solicitado
» Usado pelo navegador para navegar entre as páginas/sites
– POST – Submete dados ao servidor através do corpo da requisição
» Usado na submissão de formulários Web
– PUT – Submete um recurso ao servidor
– DELETE – Apaga um recurso do servidor
Projeto de Monitoramento de Objetos Moveis
• HTTP
– Requisição ( Request )
• Cabeçalho HTTP ( HTTP Headers )
–
–
–
–
Contém parâmetros de operação de uma requisição
Formato - > Nome : Valor ( Ex : Accept: text/plain )
Parâmetros podem ter qualquer valor específico para uma aplicação
Há um conjunto de parâmetros padronizado pelo IETF ( Internet Engineering Taks Force)
Projeto de Monitoramento de Objetos Moveis
• HTTP
– Resposta ( Response )
• Identifica a versão do protocolo sendo usada
• Informa um código de status ( status code )
– 200, 404
• Uma frase em inglês descrevendo o status code
• Também possui um cabeçalho e um corpo
Projeto de Monitoramento de Objetos Moveis
• HTTP
– Resposta ( Response )
• Código de Status ( RFC 2616 )
– 1XX – Requer que o cliente tome alguma ação para continuar
» Ex: 101 - Trocar o protocolo de http para https
– 2XX – Sucesso
» Ex: 200
– 3XX – Redirecionamento
» Ex : 302
– 4XX – Erro de requisição
» 404, 401, 403
– 5XX – Erro do servidor
» 500
Projeto de Monitoramento de Objetos Moveis
• HTTP
– Resposta ( Response )
• Cabeçalho ( Response Header )
– Contém informações sobre a resposta
– Formato idêntico ao cabeçalho da requisição
• Corpo ( Response Body )
– Pode ser por exemplo o conteúdo do arquivo solicitado em uma requisição de “GET”