Profa Gisele Alves Santana

Modelagem Web

Web
Um sistema web um conjunto de pginas
interligadas na Internet, onde se armazenam e
disponibilizam informaes.
Normalmente composto por um conjunto de
pginas armazenadas num computador (servidor).

Sistemas Web
So sistemas projetados para utilizao atravs de
um navegador, ou aplicativos desenvolvidos
utilizando tecnologias HTML, JavaScript e CSS.
Podem ser executados a partir de um servidor HTTP
(Web Host) ou localmente, no dispositivo do usurio.

Arquitetura Bsica da Web

Na viso do cliente, uma pgina web um
documento HTML formatado.
No servidor, uma pgina pode manifestar- se de
vrios modos diferentes.
A arquitetura bsica de uma aplicao web inclui:
Browsers
Uma rede
Um servidor de rede

Arquitetura Bsica da Web

Funcionamento
Browsers solicitam pginas ao servidor.
Cada pgina uma mistura de contedo formatado de
instrues expressas em HTML.
Algumas pginas clientes incluem scripts que so
interpretados pelo browser.
Esses scripts definem o comportamento dinmico adicional para a
pgina em exibio e frequentemente interagem com o browser.

Arquitetura Bsica da Web

Funcionamento
O usurio interage com o contedo da pgina.
s vezes o usurio insere a informao em elementos de
campo na pgina e os submete ao servidor para
processamento.
O usurio tambm pode interagir com o sistema,
navegando entre pginas diferentes atravs de hyperlinks.
O usurio a contribuio abastecedora ao sistema que
pode alterar o estado do mesmo.

Arquitetura Web

Arquitetura Web

Arquitetura Web

Arquitetura Web

Servidor Web
A funo do servidor web receber uma solicitao
(requisio) e devolver (resposta) algo para o cliente.
O browser permite ao usurio solicitar um recurso.
O servidor responde a uma solicitao, com recursos
como: pginas HTML, figuras e documento PDF que so
exibidas depois para o usurio.
Geralmente os servidores enviam instrues escritas em
HTML para o browser.
O HTML diz ao browser como apresentar contedo ao
usurio web.

HTTP
Protocolo especial utilizados pelos navegadores e
servidores web.
Especifica como um navegador deve formatar e
enviar uma solicitao para um servidor web.
Essa solicitao consiste na palavra GET, um espao e
o local do documento relativo raiz do sistema de
arquivos de servidor web.
Os documentos so encontrados a partir desse
endereo.

Identificao do Documento
Tambm chamado de URL.
Identifica o protocolo HTTP, o nome da mquina do
host, o nmero da porta e o nome/local do
documento.

Nomes de Domnio
Nome no formato texto usado para procurar um endereo
de Internet.
O sistema de endereamento usado na Internet o IP.
Quando um cliente solicita uma URL, essa solicitao deve
ser feita diretamente ao computador host.
Isso significa que o nome do host identificado na URL deve
ser resolvido em um endereo IP numrico.
Esse processo feito com um servidor de nomes de
domnio (DNS).
Um DNS um computador de rede que o cliente tem
acesso e que um endereo IP reconhecido.

HTML
HTML a sigla de HyperText Markup Language
(Linguagem de Marcao de Hipertexto).
Consiste em uma linguagem de marcao utilizada
para produo de pginas web.
Permite a criao de documentos que podem ser
lidos em praticamente qualquer tipo de computador
e transmitidos pela internet.

ncoras
um link que ir pular para alguma parte da mesma
pgina onde se localiza o link.
Exemplo:
Vrios links no topo da pgina (uma espcie de ndice), e
na mesma pgina todo o contedo. Utilizam-se ncoras
para irem a estes contedos mais rapidamente.

Formulrios
Os formulrios so um estilo de interao para
entrada de dados e so utilizados por todas as
categorias de usurios.
Na interao atravs de um formulrio, o sistema
solicita dados do usurio atravs de campos que
precisam ser preenchidos.
Os recursos necessrios para a interao com
formulrios so somente o teclado e/ou o
dispositivo de seleo e apontamento.

Modelando Pginas Web

Modelos auxiliam a entender
simplificando alguns detalhes.

sistema,

A escolha do que modelar tem um efeito significativo na

compreenso do problema e na busca de sua soluo.

Aplicaes web so representadas, assim como

outros sistemas, com um conjunto de modelos.
Pginas, hyperlinks e contedo dinmico no cliente
e no servidor devem ser modelados.

Modelando Pginas Web

Pginas web, scripts ou pginas compiladas so
elementos em UML.
Um elemento a parte fsica e substituvel do sistema.
Cada pgina web uma classe da UML na viso de
projeto (viso lgica), e suas relaes para outras
pginas (associaes) representam hyperlinks.
Essa abstrao considera que qualquer pgina web pode
representar um conjunto de funes e colaboraes que
s existem no servidor, e um conjunto completamente
diferente que s existe no cliente.

Modelando Pginas Web

O problema de representar sistemas web surge
quando uma pgina web possui scripts a serem
executados no servidor e parte no cliente.
A notao da UML no suficiente para expressar
essas sutilezas!
Para que a UML pudesse se tornar flexvel, seus
criadores definiram mecanismos de extenso.

Introduo
Web Application Extension (WAE)
Mecanismo de Extenso da UML.

Mecanismo de Extenso
algo que permite aos usurios o refinamento de sintaxe
e semntica para projetos especficos, no caso, WEB.
Isso inclui: Esteretipos, Restries e Valores Rotulados.

Conceitos
Esteretipos (Stereotypes)
Definio de novos elementos a partir de outros
j existentes.

Restries (Constraints)
Regras pertinentes aos elementos e propriedades.

Valores Rotulados (Tagged Values)

Novas propriedades para elementos j existentes.

Classes
Uma pgina representada atravs de 2 classes:
Server Page
Client Page

Classes
Server Page <<server page>>
Pgina Web que possui scripts executados no servidor.
Esses scripts interagem com recursos do servidor, como:
banco de dados, lgica de negcios e sistemas externos.

Classes
Client Page <<client page>>
Representa uma pgina web formatada em HTML com
uma mistura de dados de apresentao e lgica.
montada no browser cliente e pode conter scripts que
so interpretados pelo browser.
Essas pginas podem ter associaes com outras pginas
cliente e pginas servidor.

Classes
Form <<form>>
Um formulrio representa uma coleo de campos de
entrada que so parte da pgina cliente.
Cada formulrio especifica a pgina que submetida para
o servidor.

Classes
Formulrios - Relacionamentos
Agregao
Relacionamento utilizado para representar qual pgina contm o
formulrio.

Submit
Necessrio para identificar qual pgina web processa os dados
submetidos por um formulrio.

Classes
Formulrios - Relacionamentos

Classes
Quadro <<frame>>
Abstrai uma pgina HTML que contm um elemento do
conjunto de quadros.
Essa pgina divide a interface com o usurio em quadros
ou regies retangulares, onde cada quadro representado
como uma pgina cliente separada.

Classes
Pgina Esttica <<static page>>
A pgina esttica no executa nada que o lado do servidor
execute e produzida diretamente do sistema de arquivos
para o cliente.

Classes
Pgina Dinmica <<dinamic page>>
Recurso que pode ser solicitado pelo browser do cliente.
Quando solicitado ou apontado atravs de um
relacionamento, acontece o processamento do lado do
servidor.
Os resultados desse processo podem alterar o estado do
servidor e ser usado para construir algo do HTML que
transmitido ao cliente solicitante.
As pginas dinmicas podem aceitar a entrada de
informaes do usurio enviada atravs de formulrios.

Associaes
Link
Ponteiro de uma client page para outra pgina.
Os valores rotulados so os nomes dos parmetros que
so passados durante a requisio da pgina.

Associaes
Submit
Relaciona um formulrio com uma server page.
Os valores rotulados so os nomes dos parmetros que
so passados durante a requisio da pgina.

Associaes
Build
Existe um relacionamento fundamental entre os
esteretipos servidor e cliente de uma pgina web.
Uma pgina servidor geralmente constri o resultado em
uma pgina cliente.
Esse relacionamento representado no modelo atravs de uma
associao estereotipada por <<build>>.

Associaes
Redirect
Existe a possibilidade de uma server page redirecionar a
requisio de um processamento para outra pgina
servidor.
Esse relacionamento representado como uma
associao estereotipada por <<redirect>>.

Atributos
Input
Atributo de um formulrio, representado pela tag HTML
<input>.
Os valores rotulados podem ser o tipo de controle,
tamanho e nmero mximo de caracteres.

Select
Atributo de um formulrio, representado pela tag HTML
<select>.
Os valores rotulados so os nmeros de itens que
sero mostrados.

Atributos
Text Area
Atributo de um formulrio, representado pela tag HTML
<textarea>.
Os valores rotulados so linhas e colunas.

Tabela Resumo de Esteretipos

De: Pgina

Servidor de

Conjunto

de Alvo (Target)

Para:

Cliente

Pginas

Quadros (Frameset)

Pgina Cliente

<<link>>

<<link>>

<<link>>

<<redirect>>

<<redirect>>

<<redirect>>

Servidor de

<<redirect>>

<<redirect>>

<<redirect>>

Pginas

<<build>>

Conjunto de

<<frame

Quadros

content>>

Formulrio

Dependncia

Agregao

No tem

No tem

<<frame

No tem

<<build>>
No tem

<<frame content>>

content>>

(Frameset)
Alvo (Target)

No tem

No tem

No tem

No tem

No tem

Formulrio

Agregao

<<submit>>

No tem

No tem

No tem

Exemplo 1

Exemplo 2

Exemplo 3

Exerccio
Para o sistema web do Estudo de Caso, construa 5
diagramas web (um por Cu), definindo:
Server Pages
Client Pages
Forms
Todos os relacionamentos entre os elementos