Multiplexado

No texto passado escrevi uma introdução sobre o Vocabulário Visual de Jesse James Garrett. Pela leitura somente textual, fica um pouco difícil de acompanhar as coisas. Então, resolvi desenhar.

Comecei a elaborar um diagrama de um sistema hipotético de Fórum. É um sistema igualzinho a esses que temos espalhados na Web. A escolha desse tipo de sistema foi proposital. Com a descrição de uma estrutura de sistema já conhecida por todos, podemos nos focar no entendimento da notação, esquecendo um pouquinho a necessidade de entender um novo tipo de sistema.

Atenção: Sobre o diagrama abaixo, vale alertar que observações em vermelho não fazem parte da Notação de Garrett. Foram colocadas nesse exemplo para fins de orientação.

Apresentando um exemplo de diagrama
Escopo:
a) Apresentar interfaces envolvidas no processo de autenticação.
b) Apresentar suporte aos perfis de acesso "Usuário padrão" e "Usuário moderador"

Desenho:

(Clique na imagem para abrir com mais detalhe)
Update: Agradecimentos a Felipe Vaz por indicar correção no ponto de entrada da área de fluxo de Autenticação. ;)

Simplesmente olhando a estrutura, já dá para ter uma noção do que se trata. Reparem que as formas por si só são muito intuitivas. Resumindo: Ler e entender é muito fácil =).

Desenhar um diagrama também não é nenhum bicho de sete cabeças. Vamos percorrer as observações em vermelho para adicionar alguns comentários sobre as formas utilizadas no desenho.

Obs.A):
Iniciamos o desenho com um ponto de conexão. Esse tipo de ligação é muito útil para criar atalhos entre diversas áreas do diagrama. Com isso não precisamos manter todo desenho em única página gigante. Bacana, não?

No caso específico do nosso fórum, esse ponto de conexão será chamado posteriormente para implementar a função de "Sair do fórum", a ser colocada mais para frente nas telas onde o usuário estará autenticado. "Sair do fórum" chamará este ponto de conexão, permitindo que o usuário volte para a tela de entrada da aplicação.

Obs.B):
Este é um tipo de conector especial. É o conector barrado. Esse tipo de desenho indica que o fluxo de navegação entre um ponto e outro não permite volta. A única direção permitida é a indicada na seta.

Em nosso caso, um usuário autenticado que selecione a opção "Sair do fórum" não poderá mais voltar telas na interface. A única maneira de prosseguir será "logar" novamente para ganhar uma nova permissão do sistema de segurança.

Obs.C):
Este é o elemento página. É representado por um retângulo simples, contendo em seu interior uma identificação textual. É o elemento fundamental do Diagrama de Garrett (e também da arquitetura web como um todo).

No fórum, implementa a página de entrada. Esta página contem informações para os usuários que ainda não estão identificados no sistema.

Obs.D):
Este é o conector simples. Esse tipo de conector indica um fluxo preferencial de navegação entre os objetos que estão conectados. A direcionalidade estabelecida pela seta indica uma maior tendência de movimentação em um determinado sentido. Mas o usuário poderá fazer um fluxo contrário ao estabelecido pela seta sem problemas.

Obs.E):
Esse elemento - essa espécie de retângulo com os cantos amassados - é um dos recursos mais poderosos da notação. É chamado de área de fluxo, e permite representar rotinas mais complexas de maneira simplificada, detalhando essa complexidade em separado.

Em nosso caso, colocamos as funções de autenticação dentro da área de fluxo. O detalhamento da área de fluxo será explicado pelas demais observações dessa sequência.

Obs.F):
O ramo condicional é utilizado quando um sistema possui vários caminhos, e o usuário poderá trilhar um e somente um deles, dependendo da condição descrita na nota de rodapé em anexo.

Para a nossa aplicação, serão dois os perfis de acesso: um para usuário padrão e outro para moderador. Dependendo da informação retornada pelo sistema de autenticação, o usuário seguirá por um dos ramos dessa árvore.

Obs.G):
Mais uma vez fiz o uso de um ponto de conexão para o detalhamento posterior dos perfis de acesso do fórum. Esse conector direcionará o usuário para uma sequência de telas que ainda não estão explícitas nessa versão do diagrama.

Obs.H):
Temos uma estrutura bem parecida com um ponto de conexão, mas essa é um pouco mais especializada: Este é um ponto de entrada para uma área de fluxo.

As áreas de fluxo necessitam de ter uma entrada e saída bem definidas para que possam ser livremente reutilizadas. Repare que o ponto de entrada se liga diretamente na interface "Login", e não simplesmente no arame da referência do fluxo.

Obs.I):
Interface de login, onde o usuário digitará seu e-mail e sua senha como chaves de autenticação. Apesar de já sabermos dessa informação, os campos que irão compor a identificação do usuário não são importantes na notação de Garrett. O objetivo é detalhar os fluxos de navegação entre as interfaces, e não detalhar os campos. Isso é preocupação futura.

Obs.:J):
Este é um ponto de decisão. De acordo com a regra textual que descreve o ponto na nota de rodapé, a navegação tomará uma das saídas especificadas.

Em nosso caso específico, se as informações de logon forem corretas, o usuário receberá uma mensagem de sucesso na autenticação. Caso contrário, receberá uma mensagem de descrição do erro ocorrido. Note que não é objetivo do diagrama descrever mensagens, mas sim alertar para a necessidade de tratamento desse tipo de feedback ao usuário.

Obs.K):
Esse arame em volta define uma área comum. Ela serve para abraçar interfaces que tenham algum tipo de atributo comum. Para o nosso forum, descreve que aquilo deverá aparecer como uma mensagem na tela. Você pode criar esses novos padrões de acordo com a necessidade do seu projeto.

Obs.L):
Olha o ponto de saída aí. Ele define o momento onde saímos de uma área de fluxo para voltar para o fluxo principal do sistema.

Obs.M):
Essas são as notas de rodapé que dão apoio à descrições textuais dos elementos. Aqui podem ser colocadas observações diversas sobre os elementos desenhados. As notas são utilizadas também para implementar as regras das estruturas de decisão que a notação permite.

Finalizando..

Conforme o retorno de interesse que vocês demonstrarem pelo assunto, detalharei esse sistema de fórum hipotético para apresentar mais recursos da notação. Como esse é um ponto muito específico dos recursos que temos para aprimorar a Experiência do Usuário, o feedback fica como um termômetro para que eu possa escrever mais sobre o assunto (ou não). =)

Para os que já usam a notação, caso encontrem alguma correção a ser feita no desenho, por favor entrem em contato. Terei prazer de corrigir e de apontar as contribuições. Quem sabe até arrumo alguém para desenvolver esses diagramas comigo, para testarmos a capacidade de uso dessa técnica para o trabalho em equipe ;).

Muito obrigado pela atenção, espero que esse material seja útil para vocês.