introdução a programação para a internet

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

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

introdução a programação para a internet

Education