6

Lembro de ter visto algo parecido na faculdade, mas devido já ter passado muito anos me esqueci.

Qual diagrama devo usar para representar o fluxo entre páginas?

Seria semelhante para representar a estrutura geral do website. Exemplo: na página X o usuário pode ter acesso a tais outras páginas. Como se trata de um sistema web, dependendo do perfil do usuário ele pode ter acesso a página e eu posso diferenciar no diagrama com uma cor relativa ao perfil que tem acesso. É mais ou menos isso, para eu poder documentar as páginas e o fluxo.

5
  • 2
    Seu objetivo é representar o fluxo de dados entre certas páginas, a estrutura geral do website ou o que? Porque, dependendo do objetivo, dá pra usar um ou outro diagrama UML. Por exemplo, você poderia usar o diagrama de sequência para representar a ordem planejada em que o usuário navega pelo site (muito embora mais comumente se use pra isso wireframes - leia esta outra pergunta para mais informações). Se você quer representar os "gatilhos" que fazem as páginas serem trocadas, talvez o Diagrama de Estados seja mais interessante. Commented 26/07/2015 às 15:34
  • Este "resumo" que eu achei agora pode lhe ser útil: profissionaisti.com.br/2011/07/… Commented 26/07/2015 às 15:34
  • 1
    Eu apostei no diagrama de atividade, pois me parece isso que ele está procurando. Commented 26/07/2015 às 15:54
  • Poderia dar um exemplo do quer fazer? o fluxo teria condicionais? informe mais detalhes.
    – rray
    Commented 26/07/2015 às 15:59
  • Luiz Vieira, seria tipo para representar a estrutura geral do website. Exemplo: na página X o usuário pode ter acesso a tais outras páginas. Como se trata de um sistema web, dependendo do perfil do usuário ele pode ter acesso a página e eu posso diferenciar no diagrama com uma cor relativa ao perfil que tem acesso. É mais ou menos isso, para eu poder documentar as páginas e o fluxo. Commented 26/07/2015 às 16:16

3 Respostas 3

5

Após a sua edição, ficou mais claro entender o que você precisa. Nesse caso, eu não acho que um Diagrama de Sequência seja a melhor escolha. O diagrama de sequência modela as comunicações (ou transições, no seu caso) ao longo do tempo entre as entidades envolvidas. Assim, o seu grande uso é representar a sequência lógica em que as ações, geralmente em um caso de uso específico, se realizam por todos os envolvidos (usuários e componentes de um sistema).

Pelo que eu entendi, o seu interesse é mais no sentido de representar duas coisas:

  1. A estrutura lógica do website, isto é, quais páginas estão ligadas a quais outras páginas
  2. Propriedades de certas transições, como por exemplo, se apenas um perfil é capaz de fazer/permitir certa transição.

Assim, eu concordo mais com a resposta do colega @rray, sobre o uso do Diagrama de Estados. Nele você pode representar cada página como um estado do seu sistema, e nas transições adicionar informações (até mesmo a cor, que você mesmo sugeriu) para indicar suas propriedades.

Wireframes, que eu mencionei em comentários, seriam mais úteis se você quiser entrar em um nível de detalhe maior (mas não final - isto é, de muito baixo nível) a respeito de quais áreas de cada página deverão permitir as transições. Isso te ajuda não somente a planejar as transições como também outros aspectos da interação com o usuário. Nesse tipo de diagrama, mais informal, você pode desenhar as setas de transição partindo de áreas específicas de um rascunho da tela, para por exemplo indicar se o usuário deve sempre clicar em uma mesma região para navegar, em colunas laterais para ter acesso a ferramentas, etc.

Cabe notar que apesar de eu achar que o Diagrama de Sequencias não é o mais apropriado, isso não quer dizer que você não possa utilizá-lo. Você provavelmente só terá que fazer vários deles, para cada cenário de navegação. E, mesmo eu respondendo esta sua pergunta com o melhor que eu consigo inferir com base na minha experiência, eu ainda acho que ela é um pouco baseada em opinião, pois não há verdadeiramente uma resposta mais correta.

5
  • 1
    concordo com a sua visão. Commented 26/07/2015 às 19:31
  • O Wireframe me agradou bastante para o que eu preciso, boa dica! Porém, eu imaginei em termos de documentação e padrões de projeto usando UML. É perfeitamente útil Wireframes para o que eu preciso, unir todos e montar o fluxo. Commented 27/07/2015 às 14:37
  • UML é apenas uma ferramenta, uma linguagem visual criada para auxiliar a modelagem de sistemas orientados a objeto. Ela tem a vantagem de ser um padrão mais amplamente conhecido no desenvolvimento de software, mas Wirefremes (que também é uma linguagem visual) também são bastante populares entre o design de interfaces. Como qualquer um tem seus guias e você pode mesmo assim customizá-los para a sua necessidade, na prática você escolhe e usa o que achar melhor pra documentar o seu projeto. Commented 27/07/2015 às 14:50
  • E, btw, assim como para a UML, também existem para Wireframes uma série de ferramentas de apoio à criação. Por exemplo: webdesignledger.com/tools/… (eu particularmente gosto bastante da Balsamiq Mockups e da Cacoo). Commented 27/07/2015 às 14:52
  • 1
    Tomei a liberdade de corrigir a URL. Removi apenas a palava "Novo" pois mudaram o diretório. Commented 18/03/2018 às 11:40
1

Seria o Diagrama de Sequencia.

O Diagrama de Sequência é uma das ferramentas UML usadas para representar interações entre objetos de um cenário, realizadas através de operações ou métodos (procedimentos ou funções). Este diagrama é construído a partir do Diagrama de Casos de Usos. Primeiro, define-se qual o papel do sistema (Use Cases), depois, é definido como o software realizará seu papel (Sequência de operações).

fonte wikipedia

inserir a descrição da imagem aqui

1

Para exibir essas informações existem dois candidatos, são elas o diagrama de estados ou de atividades.

Diagrama de estado ou máquina de estados serve para exibir transições de objetos, sistemas ou protocolos.

Diagrama de atividades, serve para modelar fluxos de trabalhos, processos algoritmos, muito parecido com um fluxograma a diferença é que o último não suporta atividades paralelas.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .