IFPA

Curso de Tecnologia em Análise e Desenvolvimento de Sistemas

Engenharia da Web
Padrões de Projeto em Aplicações Web

Prof. Cláudio Martins

claudiomartins2000@gmail.com

1
 Objetivos da Aula

➢ Apresentar o conceito de padrões de projeto

➢ Aplicar o conceito de padrões de projeto no
contexto do desenvolvimento web
➢ Classificar os tipos de padrões encontrados em
desenvolvimento web
➢ Exemplificar alguns padrões (com implementação)

2
Padrões de Projeto
 Padrões de Projeto
➢ Padrões de projeto são boas soluções aplicadas a
boa parte de problemas comuns em um
determinado contexto.
➢ Padrões de projeto beneficiam a construção, a
manutenção e o reuso do código.
➢ Criam uma linguagem compreendida por todos
➢ Facilitam a mentalização da solução
➢ São propostas em alto nível (sem detalhes de
implementação) para problemas recorrentes

4
Padrão de Projeto segundo Gamma (1995)
➢ Gamma (1995) diz que padrões são soluções para
um problema em um determinado contexto, onde
devem ser identificados:
➢ O Contexto – qual se refere ao conjunto de situações
que se repetem, nas quais o padrão de projeto pode ser
aplicado;
➢ O Problema – que trata do conjunto de "forças" –
objetivos e limitações – que ocorrem dentro do contexto;
➢ A Solução – que é uma estrutura formal para ser
aplicada na resolução do problema.

5
 Início histórico: na arquitetura de
construção/urbanismo

Os padrões de projeto surgiram de um conceito

arquitetônico criado pelo arquiteto, urbanista e
matemático Christopher Alexander:

“Cada padrão descreve um problema que ocorre

repetidamente de novo e de novo em nosso ambiente, e
então descreve a parte central da solução para aquele
problema de uma forma que você pode usar esta solução um
milhão de vezes, sem nunca implementa-la duas vezes da
mesma forma.”

ALEXANDER, C. The Timeless Way of Building. Oxford

University Press, 1979.
6
 Breve histórico sobre Padrões

1977
1995

2006

7
 Padrões na arquitetura

Coliseu (Roma, Itália) – Construção da época

do Império Romano 8
 Padrões na arquitetura

Ponte de Nayabashi (Nagóia, Japão) - Ano 56 AD

9
 Padrões na arquitetura

Basilica de Sacré Coeur

Paris, France (1870)
10
 Padrões na arquitetura – em comum...

O Arco
• Um padrão usado para distribuir o peso em estruturas de
construção
• Reutilizável em diferentes contextos
• Um componente de apoio (subjacente)
• Um componente essencial na construção de grandes estruturas 11
 Com o “arco” podemos...

...usá-lo como no Coliseum

12
 Com o “arco” podemos...

...usá-lo como no Coliseum

13
 Com o “arco” podemos...

...usá-lo como na Ponte Nayabashi

14
 Com o “arco” podemos...

...usá-lo como na Basílica de Sacré Coeur

15
Padrões de Projeto em Aplicações Web

16
 Patterns para aplicações web
➢ Na literatura, padrões de projeto para aplicações web
podem ser tratados em pelo menos três dimensões ou
preocupações:
➢ Voltados para o design de interface ou visual – são os
padrões mais “visíveis”, aqueles que trabalham a visualização
dos sistemas na web, focando a apresentação e formatação
do conteúdo.
➢ Voltados para interação e navegação – dizem respeito à
dinâmica da interação do usuário com a aplicação, ponto
crucial para o sucesso da aplicação web
➢ Voltados para a arquitetura de construção – são os padrões
que fornecem a infraestrutura para desenvolvimento do
software da aplicação web, que tratam desde a modelagem e
organização dos componentes de software, até o projeto
(design) da solução.
17
 Exemplo de um padrão para projeto de
Problema interação
Grande volume de dados
a serem exibidos.
Usuário necessita
visualizar os detalhes,
mas deseja ver todos os
dados de uma só vez
(visão geral do todo).

Solução
Painel de visão geral
(topo ou lateral
esquerda)
Painel de detalhe
(rodapé ou lateral
direita) 18
 Exemplo de Padrão em Aplicações Web
(comerciais)
➢ Carrinho de Compras (Shopping Cart)
➢ Problema
➢ Usuários querem comprar produtos em uma loja virtual.
➢ Solução
➢ Crie a metáfora do “carrinho de compras”, onde o usuário pode
selecionar os produtos antes de realizar o pagamento.

Veja a documentação completa dos padrões web de interação em

http://www.welie.com/patterns/showPattern.php?patternID=shopping-cart 19
 Padrões no www.welie.com
➢ Navegação
➢ Atalho de menu, Diretório, Mapa Navegacional, etc.
➢ Busca (Searching)
➢ Pesquisa avançada, Autocomplete, Resultados esperados,
Mapa do Site, etc
➢ Manipulação de Dados (Dealing with data)
➢ Carrossel, Filtros em tabela, Tabuladores, etc.
➢ Além desses, encontramos agrupados padrões em
➢ Personalizing (personalização)
➢ Interações básicas
➢ Shopping (negócios)
➢ etc 20
 Catálogo de Padrões
➢ O primeiro trabalho em catalogar padrões de
projeto (de software) foi Gamma e outros (1995) – a
“Gang dos Quatro” (GoF). Foram identificados 23
padrões em projeto orientado a objetos
➢ Outros autores, em diferentes áreas, também
propuseram identificar padrões.
➢ Padrões específicos para desenvolvimento de
software na web:
➢ http://www.designpattern.lu.unisi.ch/index.htm
(Hypermedia Design Patterns Repository)
➢ http://www.welie.com/ (A Pattern Library for Interaction
Design), e outros.
21
Tipos e Classificação de
Padrões de Software

22
 Tipos de Padrões (Software)
➢ Padrão Arquitetural
➢ Estrutura básica de um sistema de software.
➢ Ex: padrão MVC (Modelo-Visão-Controlador)
➢ Padrão de Projeto
➢ Estrutura recorrente, micro-arquitetura de
componentes organizados para resolver um
problema genérico em um contexto específico.
➢ Ex: padrões OO (Singleton, Command, etc)
➢ Padrões web: padrões de interação, navegação, etc.
➢ Idioma
➢ Padrão específico associado a linguagens de
programação.
➢ Padrão das tecnologias EJB (DTO, Bussiness, etc)
 Classificação de Padrões
➢ Não existe um método rígido para realizar uma
classificação de padrões
➢ Em geral, alguns autores tentam usar abordagens
ligadas aos aspectos do desenvolvimento do ciclo
de vida de uma aplicação web.
➢ Gamma propôs padrões para tratar projeto
orientado a objetos.

24
 Padrões da Gang of Four (GoF)

➢ E. Gamma and R. Helm and

R. Johnson and J. Vlissides.
Design Patterns - Elements of
Reusable Object-Oriented
Software. Addison-Wesley,
1995.

25
 Padrões de Projeto de GoF (Gamma)

➢ Categorias de Padrões do GoF

➢ 23 padrões identificados em:
➢ Padrões de Criação (5)
➢ Padrões Estruturais (7)
➢ Padrões Comportamentais (11)

➢ Obs: veremos exemplos de alguns desses padrões ao

longo da disciplina.
Exemplos em Java: http://www.javacamp.org/designPattern/

➢ 26
 Padrões GoF
➢ Padrões Criacionais
➢ Associados ao processo de criação de objetos
➢ Tornam um sistema independente de como seus
objetos são criados, compostos e representados
➢
 Padrões GoF
➢ Estruturais
➢ Tratam de compor classes e objetos para formar estruturas grandes e
complexas
➢ Associados à maneira como classes e objetos são organizados
estruturalmente
➢ Oferecem formas efetivas para usar conceitos OO, como herança,
agregação e composição
➢ Focam na abstração da estrutura
 Padrões GoF
➢ Comportamentais
➢ Tratam de algoritmos e como atribuir responsabilidades
entre objetos
➢ Associados à maneira que objetos e classes distribuem
suas responsabilidades para realizar uma tarefa
➢ Focam na abstração do comportamento.
 Classificação de Padrões Web
(segundo Gérman, 2000)
➢ Germán (2000) propõe uma classificação em
domínios de aplicações e interesses específicos:
➢ a) Arquitetônico. Padrões que ajudam o desenvolvedor no projeto da
estrutura global da aplicação – sua estrutura gráfica, como: Ciclo, Contraponto,
Mirrorworld, Nó, Seleção, Montagem, elo, vizinhança, Quebra/Ligação
(Split/Join).

➢ b) Construção de componentes. Estes padrões resolvem

problemas relacionados ao modo como são combinados componentes básicos
mais complexos.
➢ Ex: Nó como uma única unidade, componente de Layout, Consistência
Composta.
➢ c) Navegação. Estes padrões tratam problemas relacionados ao modo
como uma aplicação é interligada e o modo como o leitor é orientado:
➢ Referência ativa, Contexto Navegacional, Finta Navegacional,
ObservadorNavigational, Notícias, Nó como uma Única Unidade, Decorador,
Setbased, Navegação, Marco.
30
 Classificação de Padrões Web
(segundo Gérman, 2000)
cont...
➢ d) Apresentação. Padrões relacionados ao modo como o
conteúdo é apresentado ao usuário do sistema quando em
execução, como: Agrupamento de comportamento, Informação-
interação, Acoplamento, Informação-interação, Desacoplamento,
Decorador.
➢ e) Interação de Comportamento/ Usuário: Padrões
que resolvem problemas relacionados ao modo de interação entre
o usuário e a aplicação: Antecipação de comportamento,
Informação sobre Demanda, Link de Anúncio de Destino,
Processo Feed -Back, Coletor.

31
 Atividade

Padrões de Software para

Desenvolvimento Web
Usando o catálogo de padrões
do www.welie.com
● Explique os seguintes ● Processing Page
padrões, com
exemplos
● Product Advisor
● Shortcut Box
● News Box
● Navigation Tree
● Comment Box
● Help Wizard ● Purchase Process
● Paging ● Thumbnail
● Slideshow ● View
● Captcha ● Rating
● Input Error Message ● Send-a-Friend Link
 Referências
➢ GAMMA, R; HELM, R; JOHNSON and J.
VLISSIDES. Design Patterns: elements of reusable
object-oriented software. 1995.
➢ GERMAN, D; COWAN, D. Toward A Unified Catalog
Of Hypermedia Design Patterns. 2000.
➢

34