introdução a programação para a internet
Post on 25-Jun-2015
626 Views
Preview:
DESCRIPTION
TRANSCRIPT
INTR
ODUÇÃO AO
DESENVOLVIM
ENTO PA
RA
WEB
PR
OF.
L EO
NA
RD
O S
OA
RE
S
Campus Garanhuns
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
Internet
Browser
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 uso1.Usuário especifica a URL2.Browser conecta com o servidor especificado na URL3.Browser prepara e envia o pedido HTTP4.Servidor busca recurso identificado pela URL5.Servidor prepara resposta HTTP com o recurso e faz o
envio6.Browser processa a resposta e exibe o recurso solicitado7.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
EXERCÍCIO
top related