Introdução a programação para a Internet

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

ARQUITETURA DA WEB

Browser

Internet A comunicação entre
cliente e servidor na
web é feita utilizando o
protocolo HTTP

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

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

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)

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)

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

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

COMPUTAÇÃO NA NUVEM
• Termo usado para designar aplicativos dependentes
da Internet
• Tendência natural para as aplicações

PROGRAMAÇÃO PARA WEB
• Linguagens de programação para web

• Java
• PHP
• Python
• Ruby

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

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

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

COMO DISPONIBILIZAR A APLICAÇÃO?
• Hospedagem em um servidor web
• Registro de um domínio

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>

ESTRUTURA DE UMA PÁGINA HTML
• Tags:

• <html>
• <head>
• <body>

Lista de tags:
http://www.truquesedicas.com/tutoriais/html/00007a.htm

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

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

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>

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

Introdução a programação para a Internet

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Introdução a programação para a Internet

Ähnlich wie Introdução a programação para a Internet (20)

Mehr von Leonardo Soares

Mehr von Leonardo Soares (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Introdução a programação para a Internet