Projeto para Web

Vou procurar listar neste repositório, uma checklist de ítems a serem cumpridos em um projeto web.

Essas métricas se aplicam a projetos simples, com curto prazo de desenvolvimento, mas ajudam a garantir o mínimo de qualidade para um projeto funcional.

É importante que a cada etapa, sejam gerados artefatos a serem armazenados de acordo com algum padrão. Pode ser com a ajuda de algum software ou até mesmo uma planilha. A forma com que estes dados serão organizados fica a critério de cada equipe.

A seguir os passos para a criação de um Projeto Web:

1. Briefing

Esta é a etapa em que se deve entender o negócio do cliente, suas necessidades, e junto com ele identificar:

Como é seu negócio? Como é o seu produto? Como será o seu serviço?
Qual será o objetivo do website?
Qual será o público-alvo? Quando possível identificar:
Classe Social;
Sexo;
Faixa-etária;
Limitações Técnicas;
Necessitam de algum tipo de Acessibilidade?

Com estas informações, é hora de definir o escopo do projeto. Neste momento é importante definir quais serão as funcionalidades que o website deverá apresentar.

O Briefing pode gerar um Documento de Escopo. Este documento servirá de guia para o desenvolvimento, e é uma garantia por ambas as partes de que o projeto sairá como o combinado.

Um importante artefado que pode ser incluído no Documento de Escopo é o SiteMap, no qual todas as páginas e ligações entre elas estarão identificadas em um diagrama.

2. Coleta dos Colaboradores

É importante saber quais serão as pessoas envolvidas no projeto, por isso é importante catalogar todos os colaboradores que participarão do projeto, armazenando informações como:

Nome Completo;
RG;
CPF;
Redes Sociais;
Endereço;
Telefones;
Emails.

Essas informações serão úteis na elaboração do contrato e na comunicação entre os envolvidos.

Além das informações de cada membro da equipe de desenvolvimento, é imporante coletar os mesmos dados para os contatos responsáveis no cliente.

3. Formalização

Com o Documento de Escopo e as informações dos colaboradores, é o momento de formalizar seu projeto. É nesta etapa que um contrato deve ser elaborado e assinado por ambas as partes.

4. Preparação do Ambiente

Antes de trabalhar, temos que arrumar a mesa.

Então nesta etapa seguirão algumas dicas de como organizar seu projeto antes de começar o seu desenvolvimento.

Comunicação - Defina algum veículo de comunicação entre os colaboradores do projeto e entre o responsável pelo projeto e seu cliente. Isso pode ser feito por Email, Skype, ou alguma ferramenta específica como o Slack;
Repositórios - Trabalhar com repositórios é indispensável para agilizar e manter a equipe sincronizada, é importante nesta etapa criar, e configurar seus repositórios, além dar permissão para os outros colaboradores;
Definir o nome para o domínio e registrá-lo ou transferí-lo;
Contratar um plano de hospedagem que atenda os requisitos técnicos do projeto;
Configurar o servidor para receber o repositório criado;
Se for comércio eletrônico:
Definir as instituições bancárias e formas de pagamento;
Abrir conta, assinar convênios e solicitar serviços de comércio eletrônico;
Definir e criar contas de e-mail. Isso é muito importante pois impulsiona o cliente por já ter uma conta de e-mail no seu próprio domínio;
Definir e criar uma conta de email específica para o site no gmail. Isso é importante para cadastrar Plugins, Serivços e principalmente Analytics;
Criar contas em redes sociais. É importante que um projeto web tenha seu reflexo nas redes sociais, então, dependendo do que foi acordado, este é o momento para definir os nomes e criar as redes sociais, dentre as mais comuns:
Twitter;
YouTube;
FaceBook;
Instagram;
Google Plus;
Criar ou resgatar conta de monitoramento (Google Analytics)
Caso o site já exista:
Fazer um backup de segurança do site antigo;
Fazer um backup de segurança do banco de dados antigo;
Análise de popularidade (Estatísticas de Acesso, Ranking em Ferramentas de Busca). Isso ajudará a mostrar os resultados em comparações com os resultados a serem obtidos com o novo projeto;

5. Documentação

Nesta fase deve-se focar os esforços em projetar o website. Em projetos mais complexos, é nesta etapa em que se deve criar os diagramas de Entidades e Relacionamentos e de Classes, por exemplo.

Em projetos menores, basta uma reunião com a equipe de Design para transformar as funcionalidades descritas no Documento de Escopo em wireframes.

6. Criação

Esta etapa é focada aos Designers, que desenvolverão o layout do website.

Antes da criação do wireframe uma serie de atividades devem ser observadas:

Analisar identidade visual da empresa, produto ou serviço;
Definir seções e blocos de informação;
Desenhar mapa do site e fluxo de navegação;
Estudar e definir a paleta de cores;
Estudar e difinir símbolos e ícones;
Definir tipografia;
Criação/Adaptação de um logotipo da empresa;
Definir efeitos visuais (recursos multimídia);

Com estas etapas definidas e os wireframes prontos, o designer deve iniciar a criação dos arquivos de Imagem (PSD).

Via de regra, não é necessário a criação do layout final de todas as páginas do projeto. A criação da página principal e uma página interna agiliza muito o trabalho de todos os envolvidos.

Em projeto mais complexos, pode ser interessante a criação de um documento de "Guia de Design", no qual o designer define as etapas anteriores em um documento textual, que será o guia do desenvolvedor durante todo o desenvolvimento.

Mas é essencial que, pelo menos as telas mais importantes sejam desenvolvidas. Este será o material a ser aprovado pelo cliente antes da próxima etapa.

7. Desenvolvimento

Após a aprovação do layout pelo cliente, pode-se iniciar o desenvolvimento propriamente dito.

Quase sempre dividimos uma aplicação web em três partes: Front-End, Back-End e Integração.

A parte de Front-End é responsável por transformar a Imagem do site criada pelo Designer em uma página de base codificada (HTML5/JavaScript/CSS) funcional.

A parte de Back-End é responsável por implementar as funcionalidades definidas no Documento de Escopo.

A parte de Integração é responsável por ligar os as funcionalidades do Back-End com o Front-End. Normalmente isso pode ser feito através de integrações JavaScript do Front-End que consomem a API definida no Back-End.

Uma série de passos podem ser seguidos para realizar as três etapas com sucesso:

Criar estrutura de pastas;
Baixar, instalar e configurar dependências (_framework_s, plugins e APIs);
Recortar o layout e criar base codificada (HTML5/JavaScript/CSS);
Criar e organizar Meta-Informações de cada página (MetaTags);
Criar OG (OpenGraph) para cada página;
Criar Schemas (Schemas.org) para cada elemento da página;
Configurar rotas para as páginas (ou .httaccess);
Configurar ferramenta para minificação de CSS e JS;
Criar sitemap.xml;
Criar robots.txt;
Criar páginas com conteúdo estático;
Criar banco de dados;
Popular banco de dados com valores iniciais ou importação de dados pré-existentes;
Criar estrutura de Back-End: Criação dos CRUDS;
Realizar integração Back-End com Front-End;

Ps. A ordem destas tarefas pode ficar a critério de cada equipe.

Todas as funcionalidades devem ser testadas por cada colaborador, até que o sistema chege a um ponto de maturidade no qual precisa de testes mais específicos.

Cada projeto possui uma particularidade de como os testes serão realizados, testes automáticos quase sempre é uma boa opção para projetos maiores, entretanto, para projetos de medio e pequeno porte, o bom e velho teste convencional dá conta do recado. Pois você passará menos tempos testando que escrevendo os casos de teste.

8. Testes

Esta é uma fase importante, e que provavelmente será feita algumas vezes.

Alguns detalhes que não podem ser esquecidos:

Renderização em diferentes navegadores;
Renderização em diferentes versões de navegadores;
Navegação da página;
Leitura do conteúdo;
Desempenho em ambiente de produção;
Funcionalidades respondem como o esperado?
Qualidade das Imagens;

Além disso é importante utilizar algumas ferramentas de testes automáticos como:

9. Publicação

Depois que os testes foram relizados, é a hora de publicar o projeto.

Claro, que seu cliente já deve ter visto uma previa do website em algum ambiente de desenvolvimento, mas é neste momento que o presente deverá ser entregue, então é importante que tudo esteja testado e validado internamente entre a equipe de desenvolvimento antes de ser publicado, para causar uma boa impressão inicial.

E nós sabmos que, quase sempre, quando colocamos em um ambiente de produção, nem tudo ocorre como o esperado. Algum problema com versão da linguagem ou do banco de dados, então é importante refazer todos os testes também no ambiente final.

Um checklist pode ser executado:

Validação de Código;
Meta-informações;
Título das páginas;
Integridade de Links;
Qualidade de Imagens;
Qualidade de Textos;
Funcionamento e navegação de formulários; 8.Pontos de acessibilidade.

É importante lembrar que nesta etapa normalmente se utiliza uma SplashScreen com alguma informação de "Site em Construção" até a etapa de liberação do website.

10. Otimização

Quando o site é efetivamente publicado, ainda temos que fazer alguns ajutes finos para colocar em ação os scripts de monitoramentos statísticos. Então, agora é a hora de configurar o Analytics do Google.

E é claro que o sitemap.xml tem que ser atualizado, e para isso você pode utilizar alguma programação interna ou ferramentas personalizadas.

11. Apresentação ao Cliente

Dependendo da complexidade, essa pode ser a hora para a criação de um manual de utilização do site, explicando passo a passo, como navegar no site, e até mesmo detalhes de sua área administrativa.

Além disso, é importante oferecer um treinamento para as pessoas que serão responsáveis alimentar as informações do website.

12. Liberação

Esta etapa é apenas a retirada da SplashScreen e a liberação do acesso ao público.

13. Divulgação

O site precisa de um empurrão inicial, então alguns pontos podem ser observados:

Realizar parcerias ou trocas de banners ou links, entre sites de amigos ou parceiros de negócios;
Buscar alternativas de publicidades online, como portais de conteúdo (UOL, TERRA, IG, GLOBO.COM), ou sites de conteúdo direcionado;
Buscar alternativas de anúncios pagos em serviços de busca (Links Patrocinados);
Realizar o acompanhamento e mensuração dos resultados de seus investimentos em publicidade de divulgação do site.

Conclusão

Este documento é apenas uma visão pessoal de todo o conhecimento empírico que venho adquirindo ao longo do tempo, e como nunca havia achado um material bacana neste formato, resolvi criar o meu próprio.

Gostou? Gostaria de colaborar?

Entre em contato: diogo@diogocezar.com

Obrigado.