Programação Web – Introdução ao Universo Web 1

AUTARQUIA EDUCACIONAL DO VALE DO SÃO FRANCISCO – AEVSF

FACULDADE DE CIÊNCIAS APLICADAS E SOCIAIS DE PETROLINA – FACAPE
CURSO DE CIÊNCIA DA COMPUTAÇÃO
PROFESSOR LUIS NÍCOLAS DE AMORIM TRIGO

APOSTILA DE PROGRAMAÇÃO WEB

Introdução ao Universo Web

Petrolina-PE, 2008
Programação Web – Introdução ao Universo Web 2

PROGRAMA DA DISCIPLINA
Código: 02.03.03.02.59

Nome: Sistemas Distribuídos – Programação Web

C. H.: 60 horas

Créditos: 4 (4 aulas/ semana)

1. Introdução ao Universo Web

1.1. Conceitos Básicos
1.2. Visão Geral
1.3. Principais Modelos e Tecnologias
1.4. Desenvolvimento de Web Sites
2. Programação Web do lado do Cliente
2.1. Tecnologias
Ementa:
2.2. HTML
2.3. CSS
2.4. JavaScript
3. Programação Web do lado do Servidor
3.1. Tecnologias (Apache - PHPTriad)
3.2. PHP
3.3. MySQL

• BOENTE, Alfredo. Programação Web sem Mistérios. São Paulo: Brasport,

2005.
• DEITEL, H.M.; DEITEL, P.J.; NIETO, T.R. Internet & World Wide Web: Como
Programar. 2. ed. Trad. Edson Furmankiewicz. Porto Alegre: Bookman, 2003.
Bibliografia: • MEIRA JR, Wagner; MURTA, Cristina Duarte; et. al. Sistemas de Comércio
Eletrônico: Projeto e Desenvolvimento. Rio de Janeiro: Campus/SBC, 2002.
• RIOS, Rosângela S. H. Projeto de sistemas Web orientados a interface. Rio
de Janeiro: Campus, 2003.
• Demais referências: Documentações das tecnologias utilizadas.

Pré-requisito: 63.03.1.18 – Programação III e 63.03.1.16 – Banco de Dados

Có-requisito: Nenhum

Possibilitar que o aluno tenha o contato com o Universo Web através da

Objetivo da
programação do lado do cliente e do servidor e tenha condições de desenvolver
disciplina:
aplicações via Web.

Recursos: Laboratório 1, quadro branco, computador, projetor multimídia.

Programação Web – Introdução ao Universo Web 3

INTRODUÇÃO AO UNIVERSO WEB

CONCEITOS BÁSICOS

WORLD WIDE WEB

A Internet é um conglomerado de redes em

escala mundial de milhões de computadores que
permite o acesso a informações e todo tipo de
transferência de dados.
A World Wide Web, "a Web" ou "WWW"
("rede de abrangência mundial", traduzindo
literalmente) é uma rede de computadores na Internet
que fornece informação em forma de hipertexto.

Ao contrário do que normalmente se pensa,

Internet não é sinônimo de World Wide Web. Esta
corresponde a uma parte da Internet que utiliza
hipermídia na formação básica. A Web é um dos
muitos serviços oferecidos na Internet. A Web é
um sistema de informação mais recente que
emprega a Internet como meio de transmissão.
Alguns dos serviços disponíveis na
Internet, além da Web, são o acesso remoto a
outras máquinas (Telnet e SSH), transferência de
arquivos (FTP), correio eletrônico (e-mail normalmente através dos protocolos POP3 e SMTP),
boletins eletrônicos (news ou grupos de notícias), bate-papo online (chat), mensagens instantâneas
(ICQ, YIM, Jabber, Messenger, Blogs), etc
A Web (substantivo próprio) é diferente de web (substantivo comum), já que a Web engloba
toda a Internet. Outras webs existem em redes privadas que podem ou não fazer parte da Internet.
A Web foi criada em um projeto na CERN (Conselho Europeu para Investigação Nuclear, do
francês – “Conseil Européen pour la Recherche Nucléaire” –
Atualmente chamado Organização Européia para Investigação
Nuclear), mais ou menos no início de 1989, onde Tim Berners-
Lee, Consultor de Engenharia de Software do CERN, construiu
o sistema protótipo que se tornou um modelo do que hoje é a
World Wide Web. O intento original do sistema foi tornar mais
Tim Berners-Lee: 1990
fácil o compartilhamento de documentos de pesquisas entre os
colegas.
Programação Web – Introdução ao Universo Web 4

WEB SITES

Um site ou sítio, mais conhecido pelo nome inglês site, de website ou Web site, é um
conjunto de páginas Web, isto é, de hipertextos acessíveis geralmente pelo protocolo HTTP na
Internet. O conjunto de todos os sites públicos existentes compõe a World Wide Web.

WEB SITES ESTÁTICOS

São web sites que não existem nenhum tipo de personalização. Toda e qualquer informação
está disponível para o público em geral.

WEB SITES DINÂMICOS

Ao contrário dos web sites estáticos, web sites dinâmicos são web sites que trabalha com
personalização. Isso quer que as informações e serviços disponíveis no web site serão
tratados de forma pessoal, com características que atenda o visitante.

NAVEGAÇÃO

Para ver a informação na Web, pode-se usar um software

chamado navegador (browser) para descarregar informações (chamadas
"documentos" ou "páginas") de servidores de internet (ou "sites") e mostrá-
los na tela do usuário. O usuário pode então seguir os links (ligações) na
página para outros documentos ou mesmo enviar informações de volta
para o servidor para interagir com ele. O ato de seguir links é comumente
chamado de "navegar" ou "surfar" na Web.

VISÃO GERAL
Programação Web – Introdução ao Universo Web 5

MODELOS E TECNOLOGIAS PRINCIPAIS

Os principais modelos e tecnologias são:

• Modelo Cliente-Servidor
• Protocolo HTTP
• Estrutura URI
• Hipertexto

MODELO CLIENTE-SERVIDOR

ESTRUTURA URI

Cada recurso disponível na World Wide Web tem um endereço que pode ser codificado por
um Identificador Universal de Recursos, ou "URI" (iniciais inglesas de Universal Resource Identifier).
Um URI corresponde a uma seqüência de caracteres (strings) cujo conteúdo permite identificar
elementos da rede, sejam eles físicos (servidores, roteadores, etc.) ou virtuais (programas e dados).
Apesar de haver detalhes do formato e conteúdo de um URI que são dependentes do
protocolo referenciado, certos elementos básicos e caracteres especiais são adotados com
interpretação comum. O caractere “/” (uma barra) representa níveis na hierarquia de endereços e o
caractere “//” (duas barras) representa uma raiz comum a todos endereços na Internet. Precedendo
essa raiz em todo URI, um prefixo identifica o protocolo de acesso a ser utilizado. Exemplos de
protocolos são HTTP, FTP, etc.
Nessa disciplina será discutido apenas o protocolo HTTP, o qual é considerado o mais
importante atualmente. Para solicitar os recursos através deste protocolo, um URI se inicia com os
caracteres “http:”, que se trata da identificação do protocolo a ser utilizado; seguido de “//” e pelo
endereço do recurso, que pode ser dividido em duas partes: a primeira indica um nome de máquina
que pode ser traduzido para o endereço IP de um servidor (por exemplo: “200.164.233.154”) ou para
o domínio (por exemplo: “www.facape.br”), podendo acrescentar a porta utilizada para o acesso
antecedido por dois-pontos “:” (portas utilizadas pelo protocolo 80 e 8080); e a segunda identifica o
destino real, geralmente identificado por um arquivo que é precedido pelo caminho dele partindo da
raiz.
Programação Web – Introdução ao Universo Web 6

Para facilitar este detalhamento, o URI basicamente consiste de três partes:

• O esquema de nomenclatura do mecanismo usado para acessar o recurso.
• O nome da máquina hospedeira do recurso.
• O nome do próprio recurso, fixado como um nome-de-caminho.

Exemplo de URI utilizando o protocolo HTTP:

Exemplo de URI com o protocolo HTTP.

A URL (“Universal Resource Locator” – Localizador Universal de Recursos) corresponde a um

subconjunto do URI. O URL trata-se do sistema de endereçamento da Web, já o URI é a sintaxe ao
qual a URL é baseada.

PROTOCOLO HTTP

HTTP significa HyperText Transfer Protocol (Protocolo de Transferência de Hipertexto) e é o

protocolo utilizado por clientes e servidores para transferência de dados hipermídia (imagens, sons e
textos) na World Wide Web.
Este protocolo tem sido usado pela WWW desde 1990. A primeira versão de HTTP, chamada
HTTP/0.9, era um protocolo simples para a transferência de dados no formato de texto ASCII pela
Internet, através de um único método de requisição, chamado GET. A versão HTTP/1.0 foi
desenvolvida, entre 1992 e 1996, para suprir a necessidade de transferir não apenas texto. Com essa
versão, foi implementado um novo método de requisição, chamado POST. No HTTP/1.1 (versão atual
do protocolo) foi desenvolvido um conjunto de implementações adicionais ao HTTP/1.0, como por
exemplo: o uso de conexões persistentes; o uso de servidores proxy que permitem uma melhor
organização da cache; novos métodos de requisições; entre outros.
Quando uma mensagem de solicitação de serviço é enviada a um servidor, este recebe, além
do URI do recurso desejado, a indicação de um método a ser aplicado sobre o recurso e a versão do
protocolo utilizada. Os métodos que serão abordados e utilizados nesta disciplina são:
Programação Web – Introdução ao Universo Web 7

GET
Método que solicita ao servidor o envio de um recurso; é o serviço essencial para o
protocolo. O resultado do recurso é retornado através do URI.
Por exemplo: http://www.google.com.br/imghp?hl=pt-BR&tab=wi&q=

POST
Método que permite que o cliente envie mensagens e conteúdo de formulários para
servidores que irão manipular a informação de maneira adequada.

HIPERTEXTO

Modelo para estruturar documentos de maneira não-linear, usando os conceitos de nós, elos e
âncoras.

NÓ
Uma unidade de conteúdo do documento que faz a elo: uma página, um
parágrafo, etc.

ELO
Ligação entre dois nós.

ÂNCORA
Ponto do documento onde inicia (âncora-origem) ou termina (âncora-
destino) um elo.

MODELO DE TRANSAÇÃO

Na Web, o usuário utilizando um browser como cliente solicita um recurso de um servidor,

fornecendo o URL. Quando o servidor identifica a solicitação, é enviado de volta a resposta da
solicitação para o cliente, através de documentos.
Programação Web – Introdução ao Universo Web 8

TRANSAÇÃO CLIENTE-SERVIDOR

O browser faz uma solicitação HTTP a um servidor HTTP. Utilizando o protocolo HTTP, o
browser comunica-se com o software de TCP/IP, que se comunica com o hardware cliente via
protocolo TCP. Através de uma ligação física entre o cliente e o servidor a comunicação ocorre
através da Internet. Quando chega no hardware servidor, este se comunica com o software de
TCP/IP, utilizando o protocolo TCP, e este se comunica com o Servidor HTTP através do protocolo
HTTP. Quando o servidor responde a solicitação, a resposta percorre o caminho semelhante ao de
solicitação.

EXEMPLO DE SESSÃO WEB

• O usuário solicita http://www.facape.br/

• O browser faz a conexão e envia a solicitação em HTTP
o GET http://www.facape.br/
o Accept: text/html, image/gif, image/jpeg
o User-Agent: Mozilla/3.0 (Browser)

• O servidor recebe a solicitação e procura pelo recurso (como a URL do exemplo não tem
identificação do arquivo solicitado, por default neste servidor, o arquivo corresponde ao
‘index.php’)
• Servidor responde:
o HTTP/1.1 200 OK
o Date: Wed, 24 Mar 1999 23:23:45 GMT
o Server: Apache
o Connection: close
o Content-Type: text/html
o Content-length: 648
o + o código HTML

• O browser apresenta o resultado na tela.

Programação Web – Introdução ao Universo Web 9

PROPÓSITOS DE WEB SITES

Web sites, do inglês “local na teia” (web = teia; site = local, lugar), corresponde a um local na
Internet para armazenar documentos que podem ser compartilhados. Mesmo sabendo que o conceito
de web site corresponde a um local, será adotado como um conjunto de documentos que ocupa um
local na Internet.

Um web site pode atender a três

necessidades:
• Um web site pode ser
Informativo, prestando
informações.
• Um web site pode ser funcional,
oferecendo serviços.
• Um web site pode ser de
entretenimento, servindo como
diversão para as pessoas.

COMPLEXIMENTO DE WEB SITES

PROBLEMAS COMUNS NO DESENVOLVIMENTO

Existem alguns problemas no processo de desenvolvimento como:

• Web sites que não foram bem definidos e bem projetos.
• Necessidade de atualizar as informações constantemente: vive “EM CONSTRUÇÃO!”
• Evolução extremamente rápida da tecnologia.
• Planejamento errado e estouro de prazos.
Programação Web – Introdução ao Universo Web 10

• Equipes mal organizadas

• Falta de documentação e dificuldades de implementação e manutenção.

DESENVOLVIMENTO DE WEB SITES

PROCESSO DE DESENVOLVIMENTO

Os Web sites são desenvolvidos de maneira “ad hoc”, ou seja, implementar e testar. As
pessoas pensam que é só saber um pouco de HTML ou saber utilizar o FrontPage, etc. Para a
construção de web sites é necessário planejamento. Deve-se definir antes do desenvolvimento os
objetivos, requisitos, estrutura, design, etc.

Basicamente, as fases de desenvolvimento são formadas por:

• Análise dos dados

• Modelagem do BD
• Arquitetura
• Navegação Design
• Programação no lado
Cliente
• Programação no lado
Servidor
• Testes e Avaliação

ESTRUTURA DA DOCUMENTAÇÃO DO RELATÓRIO

DEFINIÇÃO DO PROBLEMA

Descrever o problema respondendo a seguinte questão: Por que a construção da aplicação é

necessária? Responder a questão, destacando o problema e a solução proposta para atender este
problema.

PÚBLICO ALVO

Descrever sobre a população atendida, destacando as características abaixo:

• Função – Atitudes e atividades exercidas pelo público alvo (ex. alunos do ensino médio,
funcionários de uma hidrelétrica, docentes de Instituições de Ensino Superior, etc.)
Programação Web – Introdução ao Universo Web 11

• Audiência – característica de acesso às informações (ex. Acesso totalmente restrito,

parcialmente restrito ou aberto).

REQUISITOS

Os requisitos necessários na documentação são:

• Requisitos de Conteúdo (Quais tipos de informações são disponibilizados?).
• Requisitos Funcionais (Quais são os tipos de serviços disponíveis?)
• Requisitos de Desenvolvimento (Descrever equipe com suas respectivas funções e
atividades; equipamentos e softwares utilizados durante o desenvolvimento, desde a análise
até a avaliação).

MODELAGEM DO BANCO DE DADOS

Na modelagem do banco de dados, deverá ser utilizado o material sobre Dicionário de Dados
da disciplina Engenharia de Software, do professor Jocelio Passos. O link para baixar o material
segue abaixo:
http://www.facape.br/jocelio/es/material_em_pdf_conceitual/ESDicionario.pdf.

ARQUITETURA DO WEB SITE

Descrever sobre os elementos do Web Site e suas principais funções. Estes elementos
correspondem a arquivos dos seguintes tipos: documentos/páginas, imagens, programas, etc.

NAVEGAÇÃO

Descrever os elos, também conhecidos como ligações, entre os documentos do Web Site e
as formas de organizações utilizadas. Existem três principais tipos de organização, que são:

• Hierárquica – Este tipo é

dividido em duas partes:
Profunda e Larga. A
Hierárquica Profunda
corresponde à forma de
navegação que atravessa
vários níveis de ligações
entre o documento raiz até
a última ramificação. A
Programação Web – Introdução ao Universo Web 12

Hierárquica Larga corresponde a forma de navegação em que, a partir do documento raiz,

existe ligações para vários documentos do nível seguinte.

• Linear – Este tipo é dividido também em

duas partes: Linear Pura e Linear com
Alternativas. Linear Pura corresponde a
uma ligação a cada dois documentos. A
Linear com Alternativas é semelhante a
Linear Pura acrescentando um documento
ligando entre os outros dois documentos,
criando outro caminho como alternativa,
como diz o próprio nome. A diferença entre
ele e a Hierárquica Profunda é que esta não “fecha” as
ligações, não gera um círculo de ligações, já na Linear com
Alternativas percebe que entre os três documentos existem
ligações entre um e os outros dois.

• Em Rede – Este tipo descreve que existem N – 1 ligações entre

um documento e os demais documentos que fazem parte do
Web Site, sabendo que N corresponde ao total de documentos
do Web Site.

DESIGN DE WEB SITE

• Aspectos visuais e estéticos do web site.

• Diagramação (layout) do web site.
• Dicas para utilização de cores:
o Cores claras para background
o Não sobrecarregar com várias cores quentes.
o Cores quentes: vermelho, laranja, amarelo, etc. Cores frias: azul, verde, violeta, etc.
Cores neutras: branco, cinza, preto.
• Cuidado com as imagens serrilhadas!
• Evite criar a barra de rolagem na horizontal.

IMPLEMENTAÇÃO

• Criação do BD e de suas tabelas.

• Código HTML, junto com CSS e Javascript.
• Código dos programas, linguagens do lado servidor.
Programação Web – Introdução ao Universo Web 13

TESTE E AVALIAÇÃO

As principais formas de se testar e/ou avaliar um web site desenvolvidos recentemente são:
• Correção de conteúdo – Estrutura, ortografia, concordância.
• Verificação das ligações – Cuidado com: Not Found – Página não encontrada!
• Teste de Navegação – verificar se as ligações são intuitivas.
• Teste de Portabilidade – verificar se funciona em todos os browsers.

ESTRUTURA DO RELATÓRIO

A documentação do projeto deverá seguir a estrutura abaixo:

1. Capa 6. Modelagem do B.D.
2. Sumário 7. Arquitetura
3. Definição do problema 8. Navegação
4. Público Alvo 9. Design
5. Requisitos