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.
- Briefing
- Coleta dos Colaboradores
- Formalização
- Preparação do Ambiente
- Documentação
- Criação
- Desenvolvimento
- Testes
- Publicação
- Otimização
- Apresentação ao Cliente
- Liberação
- Divulgação
- Conclusão
A seguir os passos para a criação de um Projeto Web:
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.
É 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.
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.
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;
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.
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.
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.
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:
https://www.google.com/webmasters/tools/mobile-friendly
https://developers.google.com/structured-data/testing-tool/
http://www.seocentro.com/tools/search-engines/metatag-analyzer.html
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.
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.
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.
Esta etapa é apenas a retirada da SplashScreen e a liberação do acesso ao público.
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.
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
Além disso, uma serie de links podem complementar a sua pesquisa.
Estão neste repositório:
https://github.com/diogocezar/dctb-links
Obrigado.