Building Web Solutions with the Rational Unified Process:Unifying the Creative Design Process and the Software Engineering Process

1
Building Web Solutions with the Rational Unified
ProcessUnifying the Creative Design Process and
the Software Engineering Process

• A Rational Software
• Context Integration white paper

2
Construindo Soluções Web Com o RUPUnificando o
processo de desenho criativo e o processo de
engenharia de softwareAdolfo Americano
BrandãoFábio Morais GiordanoRenato César
3
Nova geração de software

• E-commerce
• OLTP
• Supply chain integration
• Conteúdo dinâmico e personalizado

4
Arquiteturas

• Multi-camadas
• Flexíveis
• Robustas
• Escaláveis
• Volumes imprevisíveis de carga
• Tudo afeta a usabilidade
• WEB SOLUTION

5
Web Solution

• Look and feel crítico
• Grande diversidade de interessados
• Marketing e atendimento ao cliente
• Diretores de arte, designers gráficos
• Executivos
• Arquitetos e programadores
• Usuários

6
Mercado de aplicações Web

• Altamente competitivo
• Menores prazos para entrega
• Em muitos casos o que está sendo criado é uma
  forma de mídia, como um DVD
• O consumidor navega pelo produto fazendo um test
  drive e compra se gostar, tomando esta decisão na
  hora
• gt O desenho da interface é uma das chaves para o
  sucesso da aplicação Web

7
Unificando os processos

• É essencial integrar o processo de desenho
  criativo e o processo de engenharia de software.

8
Engenharia de software X desenho criativo

• Diferem em processos
• Diferem em habilidades
• Diferem em culturas
• Divergências podem causar sérios prejuízos
• Integração é vital

9
Casos de Uso

• Língua franca que todos os participantes utilizam
  para entender, descrever e comunicar o projeto
• Especificação unificada

10
Figura 1 Unificando o Processo de Desenho
Criativo e o Processo de Engenharia de Software
11
Requisitos

• Aplicações Web envolvem mais participantes que o
  desenvolvimento tradicional
• gt A comunicação é crítica e deve ser beneficiada
  pelo processo!

12
Visão

• Deve ser definida com a participação e aprovação
  de todos e define
• Os problemas a seres solucionados
• Os limites do sistema
• As funções mais importantes do sistema

13
Usuários e Serviços do Sistema

• Após concluída a Visão, são feitos workshops para
  identificação de usuários e serviços do sistema
• Modelagem através de atores e casos de uso
• Facilita ao usuário final
• a articulação de serviços
• Facilita à equipe de desenvolvimento
• A validação do atendimento dos requisitos de
  forma completa e precisa

14
Re-uso de Casos de Uso

• Em aplicações Web é muito comum a re-incidência
  dos mesmos casos de uso, como em aplicações de
  e-commerce
• Aplicação de padrões também para casos de uso,
  como os padrões de análise e de desenho
• O re-uso de casos de uso é essencial para atender
  os prazos do mercado web!

15
Especificação Suplementar

• Captura e documenta requisitos não-funcionais em
  paralelo ao desenvolvimento dos casos de uso
• Usabilidade, Disponibilidade, Performance,
  Segurança, Hospedagem, Manutenibilidade
• Glossário Captura e documenta a terminologia
  comum necessária ao projeto
• O glossário garante que todos os participantes do
  projeto tenham a mesma visão do significado de
  conceitos importantes.

16
Brief do Desenho Criativo

• Aplicações Web requerem maior foco no desenho
  criativo da interface de usuário
• Em paralelo à modelagem de casos de uso,
  diretivas de interface de usuário são criadas
• As diretivas, ou guidelines, são conhecidas como
  Creative Design Brief

17
Brief do Desenho Criativo

• O humor do site (e.g., autoridade, entretenimento
  ou serviços? conservador ou ousado?)
• Velocidade de conexão dos usuários
• Navegador a ser utilizado
• Uso de frames ou não
• Limitações de cores
• Guia de padrões gráficos (e.g., logo do cliente)
• Adornos (e.g., mouse-overs, aminação, multimedia,
  etc)

18
Mapa de Navegação

• Também conhecido como mapa do site
• Opção pelo termo mapa de navegação por ser mais
  objetivo
• Representação hierárquica em diagrama de árvore
• Cada nível mostra a quantidade de clicks
  necessária para se chegar a ele
• Geralmente as áreas mais importantes estão a um
  click da página principal ou home page.

19
Mapa de Navegação

• Importante artefato de comunicação entre os
  representantes do cliente e a equipe de
  desenvolvimento
• Facilita ao usuário final
• a visualização da navegação
• Facilita à equipe de desenvolvimento
• O entendimento do esquema de navegação

20
Mapa de Navegação

• Tem início pela identificação das janelas ou
  páginas principais de cada caso de uso, em nível
  alto de abstração, pois neste momento não se sabe
  quais serão as páginas.
• Identifica-se páginas lógicas
• É uma variação da técnica de criação de
  storyboards, descrita na atividade Model the User
  Interface, do RUP

21
Mapa de Navegação

• As páginas lógicas identificadas podem ser
  divididas ou mescladas com outras, à medida do
  desenvolvimento da interface.
• Páginas lógicas são representadas na UML como
  classes de fronteira
• ltltboundary classgtgt.
• Adiante no desenvolvimento, páginas HTML e outros
  elementos visuais são representados como
  componentes.
• A cada página lógica identificada, também são
  descritas as informações que elas transportam.

22
Figura 2 Exemplo de um Mapa de
Navegação Completo de um Web Site
23
Figura 3 Exemplo de Mapa de Navegação
Específico para um Ator
24
Opções de Desenho Criativo

• Um número de opções de design gráfico,
  originalmente chamados de Creative Design Comps
• Imagens estáticas
• Adiam o custoso processo de criação de protótipos
  HTML, até que haja consenso na direção gráfica
  específica do site
• O fato de serem apenas imagens também evita o mal
  entendido de que o protótipo já esteja completo

25
Opções de Desenho Criativo

• Extensão da atividade Prototype the User
  Interface, do RUP
• Para o caso de uso mais importante, são
  produzidas no mínimo 10 opções de design para o
  look and feel (LAF)
• Apenas 3 são selecionadas e apresentadas aos
  usuários

26
Opções de Desenho Criativo

• Permitem a produção de feedback dos usuários
• Geralmente consomem 3 iterações
• Constituem um processo criativo e iterativo
• Produzem um consenso com relação ao aspecto
  visual do produto
• Evoluem para um protótipo funcional de interface
  de usuário.

27
Elementos do Desenho Web

• Conjunto consistente de imagens gráficas
  padronizadas apresentadas nas páginas do site
• Sua produção deve ser iniciada juntamente com as
  diretivas de interface (Creative Design Brief)
  precocemente no projeto
• Devem garantir a consistência da experiência do
  usuário

28
Elementos do Desenho Web

• Benefícios
• Consistência
• Redução de prazo
• Redução do custo de desenvolvimento
• Maior qualidade
• Entrega de um conjunto menor de componentes
  de maior qualidade.

29
Elementos do Desenho Web

• Os Elementos do Desenho Web são criados com o
  protótipo inicial da interface de usuário
• As Opções de Desenho servem de insumo para a
  criação inicial dos Elementos do Desenho Web
• À medida em que o protótipo é aprovado, os
  elementos são finalizados e aprovados
• A identificação dos componentes de interface no
  RUP é feita em Workflow Detail Design Components

30
Protótipo Inicial da Interface Web

• Originalmente chamado de Initial Web UI Prototype
• O visual do protótipo é baseado na Opção do
  Desenho Criativo
• Prototipa-se apenas os casos de uso mais
  importantes e representativos
• Gera melhoria na comunicação do projeto tanto
  sobre o aspecto criativo quanto sobre o aspecto
  funcional
• Garante feedback dos usuários antes que maiores
  investimentos sejam feitos
• No RUP é feito na atividade Prototype the User
  Interface, utilizando os Elementos do Desenho Web

31
Diretivas da Interface de Usuário

• Originalmente chamadas de UI Guidelines
• São desenvolvidas a partir do protótipo inicial
  completo
• Orientam o desenvolvimento da interface
• Aplicação dos Elementos do Desenho Web, esquemas
  de cores, fontes, folhas de estilo,
  posicionamento de elementos, etc.
• No RUP são desenvolvidas na atividade Develop
  User Interface Guidelines

32
Protótipo Integral da Interface Web

• Originalmente chamado de Full Web UI Prototype
• Criado a partir do Protótipo Inicial da Interface
  Web
• Apresenta navegação completa entre as telas e o
  comportamento dos elementos gráficos
• Sofre refinamentos contínuos durante as iterações
  de construção
• Deve produzir um consenso com relação ao escopo e
  à natureza de cada página entre os interessados
• É baseado na diretiva do RUP Use-Case Storyboard

33
Mapa de Navegação Completo

• Criado após concluído o Protótipo Integral da
  Interface Web
• Baseado no Mapa de Navegação e nos detalhamentos
  dos casos de uso
• Deve incluir todas as páginas e telas conhecidas
  e identificadas no Protótipo Integral da
  Interface Web

34
6 Melhores Práticas de Desenvolvimento
favorecidas pelo RUP e seu relacionamento com
aplicações Web
35
Melhores práticas

• Desenvolvimento iterativo Descoberta, criação e
  implementação contínua Mitigação de riscos
  Associação direta com aplicações Web devido ao
  seus curtos e rápidos ciclos.
• Gerência de requisitos Elucidar, organizar,
  comunicar e gerenciar mudanças nos requisitos
  Aplicações Web estão sujeitas a tendências de
  mercado.

36
Melhores práticas

• Arquiteturas de componentes Estruturas e padrões
  de integração e interação de componentes
  Aplicações Web são essencialmente extensíveis,
  escalares e devem se adaptar facilmente a
  componentes de terceiros.
• Modelos visuais Elucidam o problema e a solução
  em termos de uma simplificação da realidade
  Sistemas Web são de natureza complexa. A notação
  UML oferece mecanismos para expressar arquitetura
  e desenho de aplicações Web.

37
Melhores práticas

• Garantia da qualidade De processo e de produto
  Aplicações Web são tipicamente para exposição
  pública Falhas podem ser fatais Testes
  precoces, constantes e automatizados são
  cruciais.
• Gerência de Configurações Sistemas Web são
  compostos por objetos que podem ser criados e
  modificados por muitas pessoas, mesmo
  paralelamente Múltiplos releases de um produto
  podem ocorrer simultâneamente Requer-se, assim,
  uma gerência rigorosa de configurações e mudanças
  durante o desenvolvimento do ciclo de vida do
  produto.

38
Conclusão

• O RUP é uma boa fundação para o desenvolvimento
  de aplicações Web. Através da sua integração com
  o processo de desenho criativo e aplicando
  corretamente o processo, é possível fabricar
  soluções Web de uma maneira efetiva e predizível.

39
Referência Bibliográfica

• 1 S. Ward and P. Kroll, "Building Web Solutions
  with the Rational Unified Process Unifying the
  Creative Design Process and the Software
  Engineering Process, www.rational.com/products/wh
  itepapers/101057.jsp (current 2 Jan. 2001).

40
FIM