A Rational Software & Context Integration white paper

Apresentação em tema: "A Rational Software & Context Integration white paper"— Transcrição da apresentação:

1 A Rational Software & Context Integration white paper
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 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

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, “ (current 2 Jan. 2001).

40 FIM