IFPA

Curso de Tecnologia em Anlise e Desenvolvimento de Sistemas

Engenharia da Web
- Modelagem UML para Web

Prof. Cludio Martins

claudiomartins2000@gmail.com

1
Objetivos
Apresentar os modelos para projeto web,
utilizando UML com o mtodo WAE.

Definir a proposta da WAE como extenso da

UML para modelagem de aplicaes web.

2
Processo de desenvolvimento de
Aplicaes Web
O processo para desenvolver software para a web, , em sua
fase de requisitos e anlise, semelhante ao processo tradicional.
Levantamento de Requisitos
Identificao das funcionalidades (casos de uso, histrias de usurio,
features)
Modelagem Conceitual (modelo de classes de negcio ou do
domnio da aplicao)
Testes (criar os cenrios de teste para cada funcionalidade e classe
de domnio).
Nas fases seguintes, ocorre uma adaptao ao contexto da
tecnologia web, pois h um tratamento especial para :
Projeto Navegacional
Projeto de Interface com Usurio
Etc.

3
Reviso WAE (Web Application Extensions)

Web Application Extensions (WAE) o mtodo proposto por Conallen

(1999) para modelar aplicaes web, estereotipando as classes UML
para representar componentes do projeto web, e sugere outros
esteretipos, especficos para o contexto da arquitetura web.

WAE prope os esteretipos para modelar a viso lgica do projeto

web:
Esteretipos de classe: client page, server page e form
Esteretipos de associao: link, build, redirect, forward, etc.

Alm desses esteretipos, a WAE prev a definio de valores rotulados

(tag values), representados entre colchetes ([ e ]), e restries
(constraints), representadas entre chaves ({ e }), para alguns elementos
que contenham regras e limites.
4
Sobre a UML e WAE
A UML empregada como um formalismo bsico e
estendido por meio de esteretipos e valores rotulados.
A UML uma linguagem de propsitos gerais, no
possuindo esteretipos (originais da UML) suficientes
para modelar aspectos especficos de aplicaes Web.
A WAE estende a notao UML, trazendo novos
esteretipos com semntica e restries adicionais que
permitem a modelagem de elementos especficos da
arquitetura envolvida numa aplicao Web, e incluindo-
os nos modelos do sistema.
Utilizando a WAE, possvel representar pginas,
links e o contedo dinmico no lado cliente e no
servidor.
5
 Mecanismo de Extenso da UML
Um mecanismo de extenso algo que permite a
modelos UML um refinamento de sintaxe e semntica
para projetos especficos.
Faz parte do mecanismo de extenso:

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.

Leia mais sobre UML: http://www.dainf.ct.utfpr.edu.br/~tacla/UML/Apostila.pdf

6
Esteretipo do Modelo de Anlise
Preocupa-se com os elementos essenciais da
modelagem de alto nvel. Os objetos a serem
modelados so:

Pginas do lado cliente, HTML, frames, etc.

JSP pode ser representado quando contm apenas
interface de apresentao.

Pginas e classes do lado servidor onde est

representada a lgica da controle e de lgica da
aplicao (o prprio caso de uso)
Ex: Servlets e JSP de controle (no recomendado)

Objetos de Classes de dados. Representa os

dados da modelagem de negcio (persistentes e
transientes).
Ex: Classes de negcio (JavaBeans).
7
Regras para o Modelo de Anlise

Permitido No permitido

Dependncia por acesso

8
Modelos de Projeto Web com WAE
- Viso Lgica
- Viso de Componentes

9
WAE (Web Application Extensions) e Projeto
Em essncia, A WAE voltada para modelar o
projeto (design) da aplicao web, pois nessa fase
h a necessidade de especificar detalhes da
soluo (tecnologia web).

A fase de projeto dividida em duas vises:

Viso Lgica, que est em um nvel mais alto de
abstrao, definindo classes e associaes, e
Viso de Componentes, que trata dos arquivos que
efetivamente comporo o sistema implementado
(pginas, pluggins, controles, imagens, pginas,
diretrios, executveis, etc)
10
Viso Lgica da WAE
Para a viso lgica, so definidos trs esteretipos
principais aplicados sobre o elemento classe do meta-
modelo da UML e diversos esteretipos de
associao, como mostram as tabelas a seguir.
Tais esteretipos podem ser utilizados para a
criao de diagramas de classes que representem os
elementos Web que compem o sistema, chegando a
um nvel de detalhes maior do que os diagramas de
classe da fase de anlise (pois j incluem
informaes da plataforma de desenvolvimento), mas
ainda num nvel de abstrao lgico.

11
Tab1: Esteretipos de classe utilizados na
viso lgica do projeto

12
 Esteretipo ServerPage
Uma pgina de servidor representa uma pgina Web que
contm scripts executados no servidor.
Esses scripts interagem com os recursos no servidor (base
de dados, lgica do negcio, arquivos, etc.).
As operaes deste objeto representam as funes em
script e os atributos representam as variveis definidas
na pgina.

Restries: As pginas de servidor apenas podem interagir

com objectos que estejam no servidor.

Na soluo Java temos os Servlets e JSP de controle.

13
 Esteretipo Client Page
Uma pgina de cliente uma pgina Web que utiliza tags HTML.

As pginas HTML so visualizadas pelo browser de cliente e

podem conter scripts que so interpretados pelo browser.

As operaes deste objeto correspondem a funes

de script e os atributos correspondem a variveis
definidas nessas funes.
As pginas cliente podem ter associaes com outras
pginas, quer sejam de cliente ou de servidor.

14
 Esteretipo Form

Uma classe com esteretipo <<form>> um

conjunto de campos de entrada que fazem parte
de uma pgina HTML.
Os atributos representam os campos de entrada (text
areas, radio buttons, check boxes)
Qualquer funo que interaja com o form deve ser
considerada como uma operao (mtodo) da pgina que
contm o form.

15
Tab2: Esteretipos de associao utilizados
na viso lgica do projeto

16
 Associao com Link

Um link um apontador de uma pgina de cliente para

outra pgina
Num diagrama de classes um link uma associao
entre uma <<client page>> e outra <<client page>> ou
<<server page>>

link
{prodId}

17
 Associao com Submit
A associao <<submit>> sempre utilizada entre um
form e uma pgina de servidor
O form envia os dados existentes nos campos para serem
processados por uma pgina de servidor
O servidor Web processa a pgina de servidor que aceita e
utiliza os dados provenientes do form submetido

18
 Associao com Build
A associao <<build>> uma relao especial que serve de ponte
entre as pginas de cliente e de servidor
As pginas de servidor apenas existem no servidor e so utilizadas
para construir pginas cliente.
A associao <<build>> identifica quais as pginas de servidor
responsveis por construir pginas cliente
Esta associao unidireccional no sentido da pgina servidor para
a de cliente
Uma pgina servidor pode construir vrias pginas
cliente, mas uma pgina cliente apenas pode ser
construda por uma pgina de servidor Build

19
Associao com Redirect
Representa uma associao unidirecional para
indicar o redirecionamento de navegao de uma
pgina para outra (tanto client, quanto server).
Causa uma atualizao do endereo na pgina
resultado no browser.

<<redirect>>

20
 Associao com Forward
Semelhante ao <<Redirect>>, porm no
retorna a resposta para uma pgina cliente que
exibida ou atualizada no browser, mas sim uma
chamada direta pgina no prprio servidor que,
ento, repassa para o browser a resposta.

serverPage serverPage
<<forward>>

21
Outros esteretipos
Outras classes
script, frame, frameset, target
Outras associaes
script
target link
include
frame content
Outros componentes
object
JSP Page
servlet
bean
22
Exemplo (estudo de caso): Login
O estudo de caso, a ser usado nos exemplos, diz
respeito s funcionalidade de autenticao (Login).
Uma Tela de Login possui um texto de abertura como
contedo gerenciado por algum sistema de gerncia de
contedo (Ex: um Content Management System CMS).
Nessa tela possvel que o usurio efetue seu login no
sistema por meio da operao de autenticao e do
Formulrio de Login, que possui dois campos de texto:
login e senha.
Caso o acesso (login e senha) esteja correto, o
sistema apresenta a pgina de Homepage (Home).
Caso o acesso esteja incorreto, o sistema apresenta
uma pgina de erro (ErroLogin), que permite retornar
Tela de Login.
23
Exemplo de diagrama de viso lgica da
camada Web

Esse exemplo diz respeito uma funcionalidade de Autenticao

24 (Login)
Viso de Componentes

25
WAE e a viso de componentes
Para a viso de componentes, a modelagem WAE
(extenso UML para aplicaes web) so definidos
trs esteretipos a serem utilizados no diagrama de
componentes da UML:
<<static page>>, componente que representa pginas
estticas, ou seja, sem processamento no lado do servidor;
<<dinamic page>>, componente que representa pginas
dinmicas; e
<<physical root>>, pacote de componentes representando
uma abstrao de uma hierarquia de arquivos que contm
recursos disponveis solicitao no servidor Web.

26
Viso de Componentes da WAE

Por meio de diagramas de componentes (da

UML), a viso de componentes busca modelar o
mapeamento entre os arquivos fsicos
(representados pelos componentes com os trs
esteretipos citados) e as representaes lgicas
apresentadas na viso lgica (representadas por
classes estereotipadas, conforme discutido
anteriormente).

27
Definio de componente na UML
Um Diagrama de Componentes permite
visualizar a organizao dos softwares que
constituem o Sistema, tambm chamada viso
fsica do modelo.
Contm informaes sobre os componentes de
software, arquivos, executveis e bibliotecas para
o Sistema.
Ele exibe a organizao e dependncias entre os
componentes de software, incluindo cdigo-fonte,
cdigo-binrio e componentes executveis.

28
Exemplos de Diagrama de
Componentes (com pacotes)
Em um alto nvel de abstrao (usando
pacotes):

29
Exemplos de Diagrama de
Componentes (usando componentes)

30
Exemplos de Diagrama de
Componentes
Um sistema Vendas depende
de dois componentes: driver
JDBC (oracle) e biblioteca
log4j

O componente Dicionrio expe

duas interfaces para ser usado:
spell-check (corretor) e
synonyms (lista de sinnimos)

31
Exemplo de diagrama de componentes ligando
a viso lgica aos componentes fsicos

Esse exemplo diz respeito uma funcionalidade de Autenticao

32 (Login)
Outros elementos fsicos de projeto
Alm dos esteretipos bsicos, para o projeto
avanado, Conallen (WAE) define tambm:
biblioteca de script (componente com esteretipo <<script
library>>)
raiz virtual (pacote com esteretipo <<virtual root>>)
recurso HTTP (componente com esteretipo <<HTTP
resource>>)
biblioteca de tags JSP (pacote com esteretipo <<JSP tag
library>>)
Tag JSP (classe com esteretipo <<JSP tag>>)
composta por um elemento que representa o corpo da tag
(dependncia com esteretipo <<tag>>) e
opcionalmente um elemento que rene informaes extras
(dependncia com esteretipo <<tei>> - tag extra info).
33
Modelo de Experincia do Usurio (UX)

34
Modelagem de Experincia do Usurio (UX)
O modelo de experincia do usurio (User
Experience UX) visa apoiar a elaborao de
modelos de anlise
O modelo UX define a aparncia de uma
aplicao Web, seus caminhos de navegao
e a estrutura das pginas
O modelo UX composto de dois artefatos:
mapas de navegao e
roteiros.

35
Modelagem de Experincia do Usurio (UX)

Mapas de navegao mostram as telas que compem

o sistema.
Uma tela (screem) algo que apresentado ao
usurio, contendo uma infra-estrutura padro de
interface Web (texto, links, formulrios etc.) e
possuindo nome, descrio, contedo (esttico, de
lgica de negcio ou gerenciado), campos de entrada
e possveis aes a serem executadas.
Telas so modeladas como classes estereotipadas:
Uma tela comum recebe o esteretipo <<screen>>
Um compartimento de tela (ex.: um frame ou div HTML)
modelado como <<screen compartment>> (bloco)
e um formulrio recebe a denominao <<input form>>

36
Exemplo de um modelo UX (login)
Seguindo o estudo de caso do Login...
A navegao modelada por associaes.
Por exemplo, se o cliente for corretamente identificado,
segue para a tela Home, que possui dois
compartimentos:
Menu e Tela Inicial.
Esta ltima possui um texto de boas-vindas, esttico (a
incluso de contedo esttico no modelo opcional), e
exibe a foto do cliente, que um contedo do tipo lgica
de negcio, ou seja, proveniente da camada de
negcio.
Telas podem ter associadas classes normais do
domnio do problema, como o caso da associao
entre Tela Inicial e CarrinhoCompras, simbolizando
que os itens do carrinho podem ser exibidos nessa tela.
37
Exemplo de mapa de navegao do modelo de UX

38
Roteiro de Navegao
Um roteiro (cenrio) uma maneira de contar
uma histria (cenrio) de um caso de uso.
Um roteiro pode ser capturado por um
diagrama de colaborao (comunicao,
na UML 2) da UML, por se parecer mais com
um roteiro tradicional (enfatizando a
seqncia temporal, passo a passo da
execuo das operaes),
Pode tambm ser modelado por meio de
diagramas de seqncia ou de atividade.
39
Exemplo de roteiro/cenrio

40
Exemplo 2: Micro Blog

41
Mapeamento de Interface com Usurio (UX)

42
Modelo Conceitual + Modelagem de
Experincia
(Interface com Usurio)

43
 Principais esteretipo WAE para o
MicroBlog

Modelagem
Conceitual
(UX -
Experincia do
Usurio)

Modelagem
do Projeto
Web

44
 Passagem de parmetros em Link
Classifica postagem por <a href=blogger?order=author> AUTOR </a>
Ou por <a href=blogger?order=title> TITULO </a>

45
Roteiro usando diagrama de sequncia para
o cenrio Atualizar MicroBlog

46
Atividade/Exerccio
Considere o seguinte cenrio para um sistema de
webmail (como Hotmail ou Gmail), onde o usurio
acessa a homepage, clica em Criar nova conta, em
seguida o sistema apresenta um formulrio de cadastro.
Ao finalizar o processo de cadastramento, o sistema
entra na pgina de webmail.
Elaborar os seguintes modelos:
VISO LGICA de classes (UML/Web) para
representar um site de inscrio de conta de email.
Modelagem de Experincia do Usurio (UX), para
modelar as telas utilizadas na navegao do exemplo
citado.
Complete a modelagem para o cenrio onde o usurio j possui
conta de acesso.
47
Referncias
Modeling Web Application Architectures with UML, por Jim
Conallen, Rational Software, em junho de 1999.
- Disponvel na edio de outubro de 1999 (volume 42, nmero
10) da Communications of the ACM.
http://www.wthreex.com/rup/papers/pdf/webapps.pdf(10/04/2011).

CONALLEN, Jim. Desenvolvimento de aplicaes Web com
UML (2a. edio). Rio De Janeiro: Campus, 2003. 476

48