Estruturando um projeto para Aplicação Web

Tags : , , , ,

Desenvolver uma aplicação web pode se tornar um trabalho dificil e complicado onde o desenvolvedor pode gastar muito tempo e no fim não conseguir atingir os resultados esperados.

Isso acontece quando os desenvolvedores não utilizam nenhuma metodologia ou gerenciamento no projeto em desenvolvimento,  e normalmente o projeto acaba sofrendo sérios riscos.

A intenção deste post é ilustrar uma estrutura para um projeto web, fazendo com que o desenvolvedor ganhe tempo e torne o projeto mais eficiente.

Divisão do projeto em Fases

No desenvolvimento de uma aplicação web você vai identificar 5 fases:

EstruturaDeProjeto

1. Definições

2. Design

3. Implementação

4. Testes

5. Publicação

Planejamento e Monitoramento

É o “decorrer do projeto” , está presente em todas as fases. É a parte do projeto que monitora as execuções e define algumas informações para a fase do projeto. Entre elas:

- Responsável ou Responsáveis para determinada fase;
- Duração / Prazo da fase;
- Custos;
- Participantes;

Essas informações estão presentes nas 5 fases do projeto e devem ser revistas no ínicio de cada uma delas.

1. Definições

Nesta primeira etapa de um projeto é definido os escopos para a aplicação web, basicamente falando, é “O que a aplicação vai fazer”.

Após as definições dos escopos, devem ser feitas também as definições técnicas ou necessidades, do tipo: Framework que será utilizado, Bando de dados, linguagem, etc…

img21

Escopos: Definir o que sua aplicação vai fazer, quais processos ela vai trabalhar. É mais importante aqui definir “O que” ela vai fazer e não se preocupar com “Como” ela vai fazer.

Necessidades: É crucial uma análise mais técnica do proejto para definir as necessidades da aplicação. Neste ponto, deve-se preocupar com toda a estrutura técnica do projeto. Tráfego, linguagem, database, webhosting. Esta estas informações serão muito importante para que no meio do projeto não se tenha surpresas com relação a tempo, custos e objetivos.

2. Design

Após a fase de definições, incia-se o “design” da aplicação. Nesta fase irá se identificar os seguintes itens:

img3

Design: Mapa da aplicação

Um mapa da aplicação contém somente as informações essenciais sobre a estrutura da aplicação. Páginas (representado com blocos) e os relacionamentos entre elas. Exemplo:

img4

Neste map nós temos um pequeno exemplo com alguns “lugares”  (páginas) e qual o seu relacionamento conforme o comportamento do usuário. Uma boa análise nesta etapa resultará numa economia de tempo muito grande na hora do desenvolvimento.

Design: Bando de Dados

Nesta etapa será desenhada a base de dados. No geral, define as tabelas, os campos e seus atributos e seus relacionamentos

img5

Design: Estrutura da página

Nesta etapa é desenhado uma estrutura da página mais próxima da realidade, identificando todas as seções usando um nome (exemplo: #cabecalho, #navegacao, #conteudo, #sidebar, #rodape)

img8

Design: Objetos

Ter em mente uma abordagem orientada a objeto para o desenvolvimento da aplicação. Nesta etapa você pode definir suas classes, funções e todas as funcionalidades do lado do servidor que sua aplicação precisará, esta etapa irá funcionar como um guia na hora do desenvolvimento

Design: JS Framework

Nesta etapa será escolhido e definido qual JavaScript Framework (jquery, mootools, scriptaculous…) será utilizado na aplicação. Outro ponto importante é definir quais funcionalidades será utilizado na sua aplicação (drag and drop, animation effects…).

3. Implementação

Despois das etapas de design bem definidas e encerradas, inicia-se a implementação ou Desenvolvimento da aplicação.

img6

Implementação: Bando de dados

Criação do banco de dados, tabelas, view, relacionamentos, etc… Em meus próximos posts eu estarei comentando um pouco mais detalhados como trabalhar com tabelas, relacionamentos, e afins.

Implementação: HTML e CSS

Uso da estrutura da página que ficou definida na fase de Design.

 

<div id=“cabecalho”> </div>
<div id=“navegacao”> </div>
<div id=“conteudo”> </div>
<div id=“sidebar”> </div>
<div id=“rodape”> </div>

 

Implementação: Objetos

Implementar as classes, funções, queries e tudo que requer uma intereação do lado do servidor

Implementação: JavaScript

Implementar as funcionalidades AJAX e JavaScript (drag and drop, animation effects…) utilizando o que foi definido na fase de Design

4. Testes

Durante esta fase você tem que “stressar” a sua aplicação executando códigos em diferentes condições. O objetivo nesta etapa é detectar todo e qualquer erro e corrigí-los. Se necessário peça para alguém de fora do projeto para testar. Uma dica muito importante é: NUNCA ACREDITE NO USUÁRIO, trate todas as informações que ele inserir como informação errada ou incorreta.

img7

Lembre-se, este processo deve ser metódico e exige muita paciência! Teste cada página e cada característica (Neste caso o mapa da aplicação pode ajudá-lo a seguir uma determinada ordem).

5. Publicação

Finalmente a aplicação está pronta para ser liberada! Nesta etapa, como uma forma de proteger ainda mais a aplicação, seria interessante fazer a publicação em uma pasta de teste e solicitar que outra pessoa faça alguns testes, se tudo correr bem, prossiga para versão final!





Comments:

2 Responses to “Estruturando um projeto para Aplicação Web”


  1. Hi, gr8 post thanks for posting. Information is useful!


  2. It’s a masterpiece. I have never thought people can have such ideas and thoughts. You are great.

Leave a Reply