1

IFPACurso de Tecnologia em Análise e Desenvolvimento de Sistemas

Engenharia da Web

Padrões de Projeto em Aplicações Web Prof. Cláudio Martinsclaudiomartins2000@gmail.com

2

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)

Padrões de Projeto

4

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

5

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.

6

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

Os padrões de projeto surgiram de um conceitoarquitetô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. OxfordUniversity Press, 1979.

7

Breve histórico sobre Padrões

1977

1995

2006

8

Padrões na arquitetura

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

9

Padrões na arquitetura

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

10

Padrões na arquitetura

Basilica de Sacré Coeur Paris, France (1870)

11

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

12

Com o “arco” podemos...

...usá-lo como no Coliseum

13

Com o “arco” podemos...

...usá-lo como no Coliseum

14

Com o “arco” podemos...

...usá-lo como na Ponte Nayabashi

15

Com o “arco” podemos...

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

16

Padrões de Projeto em Aplicações Web

17

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.

18

Exemplo de um padrão para projeto de interaçãoProblema

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)

19

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

20

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

21

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.

22

Tipos e Classificação de Padrões de Software

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)

24

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.

25

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.

26

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/

➢

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.

30

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.

31

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.

Atividade

Padrões de Software para Desenvolvimento Web

Usando o catálogo de padrões do www.welie.com

● Explique os seguintes padrões, com exemplos● Shortcut Box● Navigation Tree● Help Wizard● Paging● Slideshow● Captcha

● Input Error Message

● Processing Page● Product Advisor● News Box● Comment Box● Purchase Process● Thumbnail● View● Rating● Send-a-Friend Link

34

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.

➢