Upload
internet
View
114
Download
0
Embed Size (px)
Citation preview
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ãoFábio Morais GiordanoRenato 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çãoCompleto 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/101057.jsp” (current 2 Jan. 2001).
FIM