O documento resume os principais conceitos da arquitetura da web, incluindo o modelo cliente-servidor, protocolo HTTP, URLs e como as páginas interagem entre o browser e o servidor. Também discute o desenvolvimento de sistemas web usando linguagens como HTML, Java e PHP.
3. ARQUITETURA DA WEB
• A arquitetura da web utiliza o modelo cliente-servidor:
• Servidor web: recebe pedidos e devolve informações
• Cliente web: elemento que faz requisição a um servidor web e
recebe uma resposta de volta
4. ARQUITETURA DA WEB
Browser
Internet A comunicação entre
cliente e servidor na
web é feita utilizando o
protocolo HTTP
5. HTTP – O QUE É?
• HTTP = Hypertext Transfer Protocol
• O protocolo principal da web
• O protocolo usado para comunicação entre os browsers e os
servidores
• Permite a transferência de informações multimídia: texto,
imagens e sons
• Não mantém estado: cada nova requisição precisa abrir outra
conexão
6. CONCEITO DE URL
• Termo usado para identificar/localizar recursos de maneira
única e uniforme
• Especifica tanto o servidor como o recurso que está sendo
requisitado
• Browser especifica a url (servidor+recurso) e recebe o
recurso como resposta
http://www.jarley.com/index.html
servidor recurso
7. INTERAÇÃO BROWSER - SERVIDOR
• Cenário de uso
1.Usuário especifica a URL
2.Browser conecta com o servidor especificado na URL
3.Browser prepara e envia o pedido HTTP
4.Servidor busca recurso identificado pela URL
5.Servidor prepara resposta HTTP com o recurso e faz o envio
6.Browser processa a resposta e exibe o recurso solicitado
7.Browser verifica tags e repete o processo para outros recursos
especificados (ex.: figuras em uma página HTML)
8. PÁGINAS HTML
• Linguagem utilizada para descrever páginas WEB
• Não é uma linguagem de programação, mas uma
linguagem de marcação
• Atualmente é um padrão coordenado pelo W3C
(World Wide Web Consortium)
9. SISTEMAS DESKTOP
• Primeiros sistemas eram desktop:
• Falta de suporte de infraestrutura de rede
• Pessoal da organização alocado em um único local
• Não havia suporte por parte das linguagens de programação
para esse tipo de servidor
10. SISTEMAS WEB
• Aumentou a necessidade em utilizar os sistemas na
web:
• Crescimento das empresas (demanda global e multi-escritórios)
• Facilidade de manutenção
• Possibilidade para ser acessado em qualquer local
• Redução de processamento no cliente
11. COMPUTAÇÃO NA NUVEM
• Termo usado para designar aplicativos dependentes
da Internet
• Tendência natural para as aplicações
13. PROGRAMAÇÃO PARA WEB
• Preparo de uma infraestrutura no servidor
• Instalação do suporte a linguagem a ser desenvolvida
• Preparo do banco de dados
• Disponibilizar através de um servidor WEB
• Apache
• Tomcat
• JBoss
14. MAS, ONDE ENTRA O HTML?
• Visualização da página é feita em HTML (cliente)
• Pode-se usar código de programação nessa
visualização e ele será convertido para HTML
• Lógica do negócio é processado no lado servidor
15. PÁGINA ESTÁTICA VS PÁGINA DINÂMICA
• Página estática:
• Página que não muda o conteúdo
• Mais usada na visualização de informação
• Pode ser feita utilizando somente HTML e CSS
• Página dinâmica
• Capaz de alterar seu comportamento dependendo de alguma
situação
• Depende de uma linguagem de programação para implementar o
algoritmo
16. COMO DISPONIBILIZAR A APLICAÇÃO?
• Hospedagem em um servidor web
• Registro de um domínio
17. A LINGUAGEM HTML
• Representação visual para páginas web
• Formada por tags similares às tags XML
• <tag>conteúdo</tag>
• Exemplo:
• <b>texto em negrito</b>
18. ESTRUTURA DE UMA PÁGINA HTML
• Tags:
• <html>
• <head>
• <body>
Lista de tags:
http://www.truquesedicas.com/tutoriais/html/00007a.htm
19. TAG <HEAD>
• <title> - Usada para determinar o título da página e será exibido
no topo da aplicação
• <style> - Determina parâmetros de estilo CSS a serem aplicados
na página
• <script> - Scripts em javascript a serem utilizados na página
• <meta> - Informações usadas para descrever a página
20. TAGS HTML PARA TEXTOS
• Cabeçalhos:
• <h1> <h2> <h3> <h4> <h5>
• Estilos:
• <b> texto em negrito </b>
• <i> texto em itálico </i>
• Texto <sup> acima </sup>
• Texto <sub> abaixo </sub>
• Texto <small> menor </small>
• Combinação de tags
21. TAGS HTML PARA ESTILOS EM TEXTOS
• <b> texto em negrito </b>
• <i> texto em itálico </i>
• Texto <sup> acima </sup>
• Texto <sub> abaixo </sub>
• Texto <small> menor </small>
22. PARÁGRAFO E QUEBRA DE LINHA
• Utilização de parágrafo em HTML:
• <p> Texto dentro do parágrafo </p>
• Quebra de linha em textos:
• Texto em uma linha <br /> Textro em outra linha