1) O documento apresenta o método WAE para modelagem de aplicações web utilizando a linguagem UML, definindo novos estereótipos para representar elementos específicos da arquitetura web. 2) Apresenta os estereótipos de classe, como páginas do cliente e servidor, e de associação, como link e submit, utilizados na visão lógica do projeto web. 3) Discutem a visão de componentes da WAE, mapeando os elementos lógicos aos arquivos físicos por meio de diagram

1. 1
IFPA
Curso de Tecnologia em Análise e Desenvolvimento de Sistemas
Engenharia da Web
- Modelagem UML para Web
Prof. Cláudio Martins
claudiomartins2000@gmail.com

2. 2
Objetivos
 Apresentar os modelos para projeto web,
utilizando UML com o método WAE.
 Definir a proposta da WAE como extensão da
UML para modelagem de aplicações web.

3. 3
Processo de desenvolvimento de
Aplicações Web
➔O processo para desenvolver software para a web, é, em sua
fase de requisitos e análise, semelhante ao processo tradicional.
➔ Levantamento de Requisitos
➔ Identificação das funcionalidades (casos de uso, histórias de usuário,
features)
➔ Modelagem Conceitual (modelo de classes de negócio ou do
domínio da aplicação)
➔ Testes (criar os cenários de teste para cada funcionalidade e classe
de domínio).
➔Nas fases seguintes, ocorre uma adaptação ao contexto da
tecnologia web, pois há um tratamento especial para :
➔ Projeto Navegacional
➔ Projeto de Interface com Usuário
➔ Etc.

4. 4
Revisão – WAE (Web Application Extensions)
➔ Web Application Extensions (WAE) é o método proposto por Conallen
(1999) para modelar aplicações web, estereotipando as classes UML
para representar componentes do projeto web, e sugere outros
estereótipos, específicos para o contexto da arquitetura web.
➔ WAE propõe os estereótipos para modelar a visão lógica do projeto
web:
 Estereótipos de classe: client page, server page e form
 Estereótipos de associação: link, build, redirect, forward, etc.
Além desses estereótipos, a WAE prevê a definição de valores rotulados
(tag values), representados entre colchetes ([ e ]), e restrições
(constraints), representadas entre chaves ({ e }), para alguns elementos
que contenham regras e limites.

5. 5
Sobre a UML e WAE
➔A UML é empregada como um formalismo básico e
estendido por meio de estereótipos e valores rotulados.
➔A UML é uma linguagem de propósitos gerais, não
possuindo estereótipos (originais da UML) suficientes
para modelar aspectos específicos de aplicações Web.
➔A WAE estende a notação UML, trazendo novos
estereótipos com semântica e restrições adicionais que
permitem a modelagem de elementos específicos da
arquitetura envolvida numa aplicação Web, e incluindo-
os nos modelos do sistema.
➔Utilizando a WAE, é possível representar páginas,
links e o conteúdo dinâmico no lado cliente e no
servidor.

6. 6
Mecanismo de Extensão da UML
➔Um mecanismo de extensão é algo que permite a
modelos UML um refinamento de sintaxe e semântica
para projetos específicos.
➔Faz parte do mecanismo de extensão:
– Estereótipos (Stereotypes) = Definição de novos
elementos a partir de outros já existentes.
– Restrições (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

7. 7
Estereótipo do Modelo de Análise
Preocupa-se com os elementos essenciais da
modelagem de alto nível. Os objetos a serem
modelados são:
Páginas do lado cliente, HTML, frames, etc.
JSP pode ser representado quando contém apenas
interface de apresentação.
Páginas e classes do lado servidor onde está
representada a lógica da controle e de lógica da
aplicação (o próprio caso de uso)
Ex: Servlets e JSP de controle (não recomendado)
Objetos de Classes de dados. Representa os
dados da modelagem de negócio (persistentes e
transientes).
Ex: Classes de negócio (JavaBeans).

8. 8
Regras para o Modelo de Análise
Não permitidoPermitido
Dependência por acesso

9. 9
Modelos de Projeto Web com WAE
- Visão Lógica
- Visão de Componentes

10. 10
WAE (Web Application Extensions) e Projeto
✗ Em essência, A WAE é voltada para modelar o
projeto (design) da aplicação web, pois nessa fase
há a necessidade de especificar detalhes da
solução (tecnologia web).
✗A fase de projeto é dividida em duas visões:
✗ Visão Lógica, que está em um nível mais alto de
abstração, definindo classes e associações, e
✗ Visão de Componentes, que trata dos arquivos que
efetivamente comporão o sistema implementado
(páginas, pluggins, controles, imagens, páginas,
diretórios, executáveis, etc)

11. 11
Visão Lógica da WAE
✗Para a visão lógica, são definidos três estereótipos
principais aplicados sobre o elemento classe do meta-
modelo da UML e diversos estereótipos de
associação, como mostram as tabelas a seguir.
✗Tais estereótipos podem ser utilizados para a
criação de diagramas de classes que representem os
elementos Web que compõem o sistema, chegando a
um nível de detalhes maior do que os diagramas de
classe da fase de análise (pois já incluem
informações da plataforma de desenvolvimento), mas
ainda num nível de abstração lógico.

12. 12
Tab1: Estereótipos de classe utilizados na
visão lógica do projeto

13. 13
Estereótipo «ServerPage»
Uma página de servidor representa uma página Web que
contém scripts executados no servidor.
• Esses scripts interagem com os recursos no servidor (base
de dados, lógica do negócio, arquivos, etc.).
• As operações deste objeto representam as funções em
script e os atributos representam as variáveis definidas
na página.
Restrições: As páginas de servidor apenas podem interagir
com objectos que estejam no servidor.
Na solução Java temos os Servlets e JSP de controle.

14. 14
Estereótipo «Client Page»
Uma página de cliente é uma página Web que utiliza tags HTML.
As páginas HTML são visualizadas pelo browser de cliente e
podem conter scripts que são interpretados pelo browser.
– As operações deste objeto correspondem a funções
de script e os atributos correspondem a variáveis
definidas nessas funções.
– As páginas cliente podem ter associações com outras
páginas, quer sejam de cliente ou de servidor.

15. 15
Estereótipo «Form»
Uma classe com estereótipo <<form>> é um
conjunto de campos de entrada que fazem parte
de uma página HTML.
➔Os atributos representam os campos de entrada (text
areas, radio buttons, check boxes)
➔Qualquer função que interaja com o form deve ser
considerada como uma operação (método) da página que
contém o form.

16. 16
Tab2: Estereótipos de associação utilizados
na visão lógica do projeto

17. 17
Associação com «Link»
➔Um link é um apontador de uma página de cliente para
outra página
➔Num diagrama de classes um link é uma associação
entre uma <<client page>> e outra <<client page>> ou
<<server page>>
«link»
{prodId}

18. 18
Associação com «Submit»
➔A associação <<submit>> é sempre utilizada entre um
form e uma página de servidor
➔O form envia os dados existentes nos campos para serem
processados por uma página de servidor
➔O servidor Web processa a página de servidor que aceita e
utiliza os dados provenientes do form submetido

19. 19
Associação com «Build»
➔A associação <<build>> é uma relação especial que serve de ponte
entre as páginas de cliente e de servidor
➔As páginas de servidor apenas existem no servidor e são utilizadas
para construir páginas cliente.
➔A associação <<build>> identifica quais as páginas de servidor
responsáveis por construir páginas cliente
➔Esta associação é unidireccional no sentido da página servidor para
a de cliente
➔Uma página servidor pode construir várias páginas
cliente, mas uma página cliente apenas pode ser
construída por uma página de servidor Build

20. 20
Associação com «Redirect»
➔Representa uma associação unidirecional para
indicar o redirecionamento de navegação de uma
página para outra (tanto “client”, quanto “server”).
➔Causa uma atualização do endereço na página
resultado no browser.
<<redirect>>

21. 21
Associação com «Forward»
➔Semelhante ao <<Redirect>>, porém não
retorna a resposta para uma página cliente que é
exibida ou atualizada no browser, mas sim uma
chamada direta à página no próprio servidor que,
então, repassa para o browser a resposta.
<<forward>>
«serverPage» «serverPage»

22. 22
Outros estereótipos
➔Outras classes
– script, frame, frameset, target
➔Outras associações
– script
– target link
– include
– frame content
➔Outros componentes
– object
– JSP Page
– servlet
– bean

23. 23
Exemplo (estudo de caso): Login
➔ O estudo de caso, a ser usado nos exemplos, diz
respeito às funcionalidade de autenticação (Login).
➔Uma Tela de Login possui um texto de abertura como
conteúdo gerenciado por algum sistema de gerência de
conteúdo (Ex: um Content Management System – CMS).
➔Nessa tela é possível que o usuário efetue seu login no
sistema por meio da operação de autenticação e do
Formulário de Login, que possui dois campos de texto:
login e senha.
➔ Caso o acesso (login e senha) esteja correto, o
sistema apresenta a página de Homepage (Home).
➔ Caso o acesso esteja incorreto, o sistema apresenta
uma página de erro (ErroLogin), que permite retornar à
Tela de Login.

24. 24
Exemplo de diagrama de visão lógica da
camada Web
Esse exemplo diz respeito à uma funcionalidade de Autenticação (Login)

25. 25
Visão de Componentes

26. 26
WAE e a visão de componentes
 Para a visão de componentes, a modelagem WAE
(extensão UML para aplicações web) são definidos
três estereótipos a serem utilizados no diagrama de
componentes da UML:
 <<static page>>, componente que representa páginas
estáticas, ou seja, sem processamento no lado do servidor;
 <<dinamic page>>, componente que representa páginas
dinâmicas; e
 <<physical root>>, pacote de componentes representando
uma abstração de uma hierarquia de arquivos que contém
recursos disponíveis à solicitação no servidor Web.

27. 27
Visão de Componentes da WAE
➔Por meio de diagramas de componentes (da
UML), a visão de componentes busca modelar o
mapeamento entre os arquivos físicos
(representados pelos componentes com os três
estereótipos citados) e as representações lógicas
apresentadas na visão lógica (representadas por
classes estereotipadas, conforme discutido
anteriormente).

28. 28
Definição de componente na UML
➔Um Diagrama de Componentes permite
visualizar a organização dos softwares que
constituem o Sistema, também chamada visão
física do modelo.
➔Contém informações sobre os componentes de
software, arquivos, executáveis e bibliotecas para
o Sistema.
➔Ele exibe a organização e dependências entre os
componentes de software, incluindo código-fonte,
código-binário e componentes executáveis.

29. 29
Exemplos de Diagrama de
Componentes (com pacotes)
➔Em um alto nível de abstração (usando
pacotes):

30. 30
Exemplos de Diagrama de
Componentes (usando componentes)

31. 31
Exemplos de Diagrama de
Componentes
Um sistema “Vendas” depende
de dois componentes: driver
JDBC (oracle) e biblioteca
“log4j”
O componente “Dicionário” expõe
duas interfaces para ser usado:
“spell-check” (corretor) e
“synonyms” (lista de sinônimos)

32. 32
Exemplo de diagrama de componentes ligando
a visão lógica aos componentes físicos
Esse exemplo diz respeito à uma funcionalidade de Autenticação (Login)

33. 33
Outros elementos físicos de projeto
 Além dos estereótipos básicos, para o projeto
avançado, Conallen (WAE) define também:
 biblioteca de script (componente com estereótipo <<script
library>>)
 raiz virtual (pacote com estereótipo <<virtual root>>)
 recurso HTTP (componente com estereótipo <<HTTP
resource>>)
 biblioteca de tags JSP (pacote com estereótipo <<JSP tag
library>>)
 Tag JSP (classe com estereótipo <<JSP tag>>)
 composta por um elemento que representa o corpo da tag
(dependência com estereótipo <<tag>>) e
 opcionalmente um elemento que reúne informações extras
(dependência com estereótipo <<tei>> - tag extra info).

34. 34
Modelo de Experiência do Usuário (UX)

35. 35
Modelagem de Experiência do Usuário (UX)
 O modelo de experiência do usuário (User
Experience – UX) visa apoiar a elaboração de
modelos de análise
 O modelo UX define a aparência de uma
aplicação Web, seus caminhos de navegação
e a estrutura das páginas
 O modelo UX é composto de dois artefatos:
 mapas de navegação e
 roteiros.

36. 36
Modelagem de Experiência do Usuário (UX)
 Mapas de navegação mostram as telas que compõem
o sistema.
 Uma tela (screem) é algo que é apresentado ao
usuário, contendo uma infra-estrutura padrão de
interface Web (texto, links, formulários etc.) e
possuindo nome, descrição, conteúdo (estático, de
lógica de negócio ou gerenciado), campos de entrada
e possíveis ações a serem executadas.
 Telas são modeladas como classes estereotipadas:
 Uma tela comum recebe o estereótipo <<screen>>
 Um compartimento de tela (ex.: um “frame” ou “div” HTML) é
modelado como <<screen compartment>> (bloco)
 e um formulário recebe a denominação <<input form>>

37. 37
Exemplo de um modelo UX (login)
 Seguindo o estudo de caso do “Login”...
 A navegação é modelada por associações.
 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, estático (a
inclusão de conteúdo estático no modelo é opcional), e
exibe a foto do cliente, que é um conteúdo do tipo lógica
de negócio, ou seja, proveniente da camada de
negócio.
 Telas podem ter associadas classes normais do
domínio do problema, como é o caso da associação
entre Tela Inicial e CarrinhoCompras, simbolizando
que os itens do carrinho podem ser exibidos nessa tela.

38. 38
Exemplo de mapa de navegação do modelo de UX

39. 39
Roteiro de Navegação
 Um roteiro (cenário) é uma maneira de contar
uma história (cenário) de um caso de uso.
 Um roteiro pode ser capturado por um
diagrama de colaboração (comunicação,
na UML 2) da UML, por se parecer mais com
um roteiro tradicional (enfatizando a
seqüência temporal, passo a passo da
execução das operações),
 Pode também ser modelado por meio de
diagramas de seqüência ou de atividade.

40. 40
Exemplo de roteiro/cenário

41. 41
Exemplo 2: “Micro Blog”

42. 42
Mapeamento de Interface com Usuário (UX)

43. 43
Modelo Conceitual + Modelagem de
Experiência
(Interface com Usuário)

44. 44
Principais estereótipo WAE para o
MicroBlog
Modelagem
Conceitual
(UX -
Experiência do
Usuário)
Modelagem
do Projeto
Web

45. 45
Passagem de parâmetros em “Link”
Classifica postagem por <a href=blogger?order=author> AUTOR </a>
Ou por <a href=blogger?order=title> TITULO </a>

46. 46
Roteiro usando diagrama de sequência para
o cenário “Atualizar MicroBlog”

47. 47
Atividade/Exercício
➔Considere o seguinte cenário para um sistema de
webmail (como Hotmail ou Gmail), onde o usuário
acessa a homepage, clica em “Criar nova conta”, em
seguida o sistema apresenta um formulário de cadastro.
Ao finalizar o processo de cadastramento, o sistema
entra na página de webmail.
➔Elaborar os seguintes modelos:
➔VISÃO LÓGICA de classes (UML/Web) para
representar um site de inscrição de conta de email.
➔Modelagem de Experiência do Usuário (UX), para
modelar as telas utilizadas na navegação do exemplo
citado.
➔Complete a modelagem para o cenário onde o usuário já possui
conta de acesso.

48. 48
Referências
➢Modeling Web Application Architectures with UML, por Jim
Conallen, Rational Software, em junho de 1999.
- Disponível na edição de outubro de 1999 (volume 42, número
10) da Communications of the ACM.
http://www.wthreex.com/rup/papers/pdf/webapps.pdf(10/04/2011).
➔
➢CONALLEN, Jim. Desenvolvimento de aplicações Web com
UML (2a. edição). Rio De Janeiro: Campus, 2003. 476