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

1. 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

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 => 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 => 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 <<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.

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/whitepapers/101057.jsp” (current 2 Jan. 2001).

40. FIM