Documentação Web Application Fluxo / iteraction [fechado]

Question

O que artefatos / diagramas de fazer uso para documentar o fluxo de uma tomada de aplicações web em conta as ligações entre páginas estáticas e como dinâmica componentes vista (html formas, JSP, Ajax, etc) interagem com componentes do lado do servidor (ações Servlets, Struts , etc)? Fazer diagramas UML uso?

Answer 1

Nós usamos diagramas de classe UML usando uma variação do ensaio de Conallen Modeling Web Design Aplicação com UML . Você vai encontrar este ensaio evoluiu para encarnações diferentes ao redor do net e tornou-se mesmo um livro edifício de aplicações web-UML-2 .

O meu 2 centavos de turismo da abordagem que usamos:

A seguir papel de Conallen, definimos um novo UML entidades (estereótipos) para representar uma página web ou parte de uma página para que pudéssemos distinguiu o código do lado do servidor (por exemplo, Java servlet ou JSP] do lado do cliente HTML / javascript / AJAX que gerou Por exemplo:.

• [página web]
• [nav bar]
• [page-content]
• [cabeçalho]
• [rodapé]

Houve nova associationss tais como:

• [constrói] - relaciona código do lado do servidor para a página de web ou página fragmento que gerou
• [aparente-link] - usado entre páginas do cliente no mapa do site diagrama
• [link] - link de URL, ou seja pedido GET
• [submete] - formulário de postagem de volta ao servidor, ou seja, solicitação POST
• [client-redirect] - do lado do cliente redirecionamento
• [server-redirect] - duh

Finalmente, alguns novos diagramas (principalmente apenas especializações de diagramas de classe), tais como:

• [Mapa] -> como um diagrama de classes - mostra estática relacionamentos ([aparente-link] s) entre [página web] é do ponto de vista do usuário
• [página geração] -> como um diagrama de classes - mostra as classes estaticamente relacionadas com a exibição de uma página específica da web: o código gerado-lo, o código de alças do pós submissão
• [página-composição] - como um diagrama de classes - mostra as coisas que compõem um dado [página web]
• [sequência diagramas] -. A única outra mudança foi que os diagramas de sequência poderia agora incluir entidades do lado do cliente como atores

A boa notícia:

• encontramos Rational Rose ícone extensões que precisávamos para fazer os diagramas olhar semi-decente.

A má notícia:

• essa abordagem era uma obra muito - que agora tinha o dobro das entidades a modelo com uma vez que foram agora modelagem das entidades do lado do cliente, além das aulas do lado do servidor
.

Leia um dos papéis Conallen para fotos do que eu estou falando, mas como eu disse, não seguir a sua abordagem estritamente - só tiramos as peças que precisávamos. Espero que isso ajude.

Answer 2

Eu costumava diagramas de estado UML para documentar navegação de página para aplicações web no passado.

Answer 3

Eu recomendo tomar as 37signals abordagem para o desenvolvimento da aplicação.

Cada página precisa ter um propósito. Focus on essa finalidade primeira e design tudo em torno dele.

Processo:

• esboçar as principais partes com um sharpie e papel
• item da lista
• ignorar os detalhes cedo (eles só ficam no caminho)
• criar algo real o mais cedo possível (ie. Criar alguns arquivos HTML com links que levam a outras páginas para mostrar como a aplicação irá fluir
• Uma vez que o fluxo do site é definido em seguida, adicione os componentes do projeto e iniciar a programação

É muito mais fácil para adicionar a programação para algo que já foi concebido e pensado vs projetar um aplicativo para o trabalho em torno de programação (que na maioria dos casos requer código que ser reescrito para se adaptar ao design existente / fluir questões que foram perdidas no começando).

Answer 4

Os casos de uso como parte de diagramas de atividades são usados ??por alguns dos colegas da mina, mas isso é bom talvez para alguns Visão geral de navegação de alto nível estático.

Estou prestes a desenvolver DSL personalizado, que será semelhante formato cenário BDD usado em Pepino com Webrat, IMHO tais cenários contêm informações suficientes para criar modelos de página web interactionand.