Workflow para desenvolvimento web (PHP+Mysql) – Parte 3 de 4

Depois do levantamento inicial, vamos para a parte de design e produção. Devemos criar algumas composições que permitam que você ou seu cliente veja como ficará sua aplicação, e como o usuário irá utilizá-la. Depois das composições iniciais feitas, precisamos otimizar as imagens, e criar o HTML e o CSS.

1-    Crie wireframes

Criar wireframes é a melhor forma de expor as telas inicialmente. No início da criação de sites na FastCom, utilizamos o Balsamiq Mockups (trial de 30 dias, USD 79.00 lifetime), mas você pode utilizar o PowerPoint, um programa gráfico ou uma ferramenta online como o Moqups. Com certeza, a criação de wireframes economizará muito tempo de design e montagem de HTML para apresentar ideias para um cliente.

 

2-    Otimize suas imagens

Otimize suas imagens utilizando Photoshop e Fireworks, um batch específico ou ferramentas online como o Image Optimizer do Dynamic Drive. Combine as imagens da sua aplicação em sprites, assim, a aplicação solicitará apenas um arquivo de imagem ao servidor. Tenho utilizado para combinar imagens o Spritepad, fazendo as classes do CSS manualmente.

 

3-    Monte seu HTML e CSS

Crie primeiro os elementos comuns da sua interface, já utilizando alguns includes para facilitar as criação das próximas telas. Por definição, o HTML deve cuidar da estrutura, cabeçalhos, parágrafos e links, enquanto o CSS cuida da apresentação, cores, fontes, alinhamento e backgrounds.

 

Depois de criar seu HTML e CSS base, valide o código usando http://validator.w3.org/ e http://jigsaw.w3.org/css-validator/. Se sua aplicação envolve relatórios, crie folhas de estilo específicas para impressão. Não esqueça também de criar estilos próprios para erros para ajudar nos debugs.

 

4-    Cuide da navegação

A navegação deve ser simples, intuitiva e coerente, mais isso pode ser muito trabalhoso para conseguir em uma aplicação grande e complexa. Deste modo, organize muito as tarefas e rotinas mais corriqueiras, fazer isso vai diminuir consideravelmente seus custos de suporte.

 

5-    Use templates.

Crie quantos templates forem necessários. Comente o código de forma clara e objetiva, sem abreviações. Ter templates organizados e comentados facilitará muito sua vida quando precisar inserir uma nova página, funcionalidade ou relatório à sua aplicação. Além de ajudar consideravelmente na curva de aprendizado de um novo integrante da sua equipe.

 

6-    Não esqueça do SEO

Indexação em mecanismos de busca é um ponto-chave para o sucesso de qualquer aplicação web. Invista tempo em adicionar recursos de CRUD nas meta tags, cabeçalhos e títulos. Ajude os mecanismos de busca, implementando metadados marcando seu conteúdo por meio da semântica do http://schema.org. Se você já tem uma aplicação pronta e não está ranqueado como gostaria fale com a gente.

Além dos elementos on-page, não se esqueça do conteúdo textual. Lembre-se: a essência de todo mecanismo de busca é classificar páginas através de textos.

 

7-    Social Media

Adicione botões de compartilhamento e outras ações sociais em sua aplicação. Com certeza aumentará muito sua visibilidade.

Na última parte da nossa série, falaremos sobre programação, testes e publicação.

php mysql workflow

Fonte: FastCom

Fonte das imagens: Corbis Images

// Comente!

comentários

eufacoprogramas

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

// 1 Comentário

  • Responder fevereiro 19, 2014

    Marion Deleon

    Em janeiro de 2008 a W3C publicou a especificação do HTML5 , a próxima versão do HTML, como Working Draft. Apesar de sua sintaxe ser semelhante a de SGML , o HTML5 abandonou qualquer tentativa de ser uma aplicação SGML e, definiu explicitamente sua própria serialização “html”, além de uma alternativa baseada em XML , o XHTML5.

// Siga as boas práticas: Comente!