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