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 [email protected]
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.
➢
Top Related