Docstoc

Construindo solu__es Web com o RUP - UFMG

Document Sample
Construindo solu__es Web com o RUP - UFMG Powered By Docstoc
					  Building Web Solutions with the
Rational Unified Process:Unifying the
  Creative Design Process and the
    Software Engineering Process


         A Rational Software &
     Context Integration white paper
Construindo Soluções Web Com o RUP

Unificando o processo de desenho criativo e o processo
de engenharia de software


Adolfo Americano Brandão
Fábio Morais Giordano
Renato César
“Nova” geração de software

   E-commerce

   OLTP

   Supply chain integration

   Conteúdo dinâmico e personalizado
Arquiteturas
 Multi-camadas
 Flexíveis
 Robustas
 Escaláveis
 Volumes imprevisíveis de carga
 Tudo afeta a usabilidade


= WEB SOLUTION
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
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

=> O desenho da interface é uma das
 chaves para o sucesso da aplicação
 Web
Unificando os processos


É essencial integrar o processo de
 desenho criativo e o processo de
 engenharia de software.
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
Casos de Uso

   Língua franca que todos os participantes
    utilizam para entender, descrever e
    comunicar o projeto

   Especificação unificada
Figura 1: Unificando o Processo de Desenho Criativo e o
          Processo de Engenharia de Software
Requisitos

   Aplicações Web envolvem mais
    participantes que o desenvolvimento
    tradicional

=> A comunicação é crítica e deve ser
 beneficiada pelo processo!
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
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
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!
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.
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
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)
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”.
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
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
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
    <<boundary class>>.

   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.
Figura 2: Exemplo de um Mapa de Navegação
           Completo de um Web Site
Figura 3: Exemplo de Mapa de Navegação
         Específico para um Ator
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
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
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.
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
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.
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
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
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
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
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
6 Melhores Práticas de
Desenvolvimento favorecidas pelo RUP
e seu relacionamento com aplicações
Web
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.
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.
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.
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.
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/whitepapers/10105
    7.jsp” (current 2 Jan. 2001).
FIM

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:42
posted:11/23/2012
language:English
pages:40