No passado, eu fiz algumas codificações HTML, CSS e PHP, mas só trabalhei em coisas que já estavam "concluídas" e nunca iniciei um site do zero. No entanto, recentemente comprei um domínio e alguns serviços de hospedagem barata, e espero melhorar minhas habilidades em HTML, CSS e Javascript para que eu possa me tornar um pouco mais comercializável como desenvolvedor / webmaster.

Normalmente, qual processo você usa para iniciar um site? Você desenha o layout no papel e depois faz o código? Ou você apenas começa a codificar e ajusta a saída ao seu gosto?

Meu processo geralmente se parece um pouco com isso:

1. Recursos . Com lápis e papel, coloque as características / páginas distintas que comporão o site. Isso chega às perguntas gerais sobre o AVC - você está construindo um site simples de informações e gráficos para sua mãe? uma solução de comércio eletrônico para uma pequena empresa? um blog / galeria para um amigo fotógrafo? Sua resposta determinará muito sobre o caminho de construção que você precisará seguir. Esse estágio também pode envolver uma discussão considerável com um cliente ou com quem estiver dirigindo o barco (se não for você).

2. Estrutura de arame . Com todos os recursos necessários definidos, elabore uma estrutura de arame. No papel ou com uma ferramenta como fogos de artifício, que permite criar funcionalidades de navegação muito simples. Se você estiver trabalhando com um CMS como o wordpress, como será tratado o seu conteúdo estático? Esse também pode ser um bom momento para começar a pensar na estrutura do arquivo. Se o seu projeto precisará de um banco de dados personalizado, agora é a hora de começar a planejar seu design e implementação. Esse é um estágio crítico, pois o planejamento inteligente economizará muito retrocesso e retrabalho, caso erros sejam cometidos ou a fluência do projeto aconteça.

3. Tecnologia . Quando o estágio de planejamento estiver relativamente elaborado - escolha suas tecnologias. Você está fazendo html direto? um php cms em um ambiente de lâmpada? .net mvc storefront? Essas perguntas podem influenciar qual ambiente de hospedagem será necessário, bem como os custos para executar a coisa. Se você está fazendo uma vitrine, a segurança é uma preocupação principal aqui (conformidade com SSLs e PCI, por exemplo). Verifique se você possui um ótimo ambiente de teste (localhost ou outro) estabelecido.

4. Projeto / Layout . Quando sua lista de recursos e estrutura de arame estiver bastante bem determinada, você poderá começar a pensar no design do site. Saber o que vai preencher as páginas é, obviamente, um pré-requisito. Gosto de trabalhar no photoshop e fazer uso pesado de pastas como um análogo à sua estrutura de marcação. Eu vou até o ponto de nomeá-los com a marcação pretendida e identificadores css. Embora seja provavelmente sábio fazer algum desenho de forma livre antes de ficar realmente detalhado. Costumo fazer uso de arquivos de "layout" dos quais extrairei elementos e os coloco em arquivos de "processo" - arquivos que eu uso para gerar gráficos de produção.

5. Marcação / CSS . Depois de elaborar um design bastante limpo (já que ele certamente se flexionará um pouco, à medida que você entra no modo de produção), você pode começar a escrever a marcação. Geralmente, gosto de ter um layout padrão que acomoda todo o conteúdo do site. Portanto, limpo e flexível deve ser o ponto chave aqui. A marcação do layout deve estar bastante completa antes de você começar a escrever CSS, mas acho que eles fazem muito para informar um ao outro. Você também fará muita otimização de SEO nesse estágio (nomeação adequada de imagens ou tags A, meta informações, doctypes etc ...) Seja completo.

5.1 Gerenciamento de Tema . Se você estiver trabalhando com um CMS, e seu design será empregado como um tema personalizado, encontre alguns tutoriais sobre como fazer exatamente isso para o aplicativo pretendido. Isso pode ser assustador, francamente;) Eu sempre criarei um layout de marcação estática com CSS bastante completo antes de dividi-lo em elementos do tema.

6. Comportamento . Quando sua marcação e css estão bastante completos, e talvez o tema esteja no lugar, você pode começar a desenvolver comportamentos (rollovers, etc.) O javascript discreto é importante, a menos que você esteja usando recursos que o exijam absolutamente (um padrão ajax galeria ou conteúdo flash orientado a dados). A regra geral é: se alguém visitar seu site com o javascript desativado, o que ele verá? Às vezes, removo elementos estáticos e os substituo por versões interativas em tempo de execução.

7. Conteúdo . A menos que o design seja dependente do conteúdo (as imagens às vezes são conteúdo, por exemplo) = Eu geralmente uso texto / gráficos de espaço reservado até que o design e o comportamento estejam bem estabelecidos. Evite trabalhar mais de uma vez. Se você estiver preenchendo dados do produto, será necessária uma verificação e teste cuidadosos dos erros.

Nesse ponto, sempre parece haver um período de retrabalho, fixação e polimento. Mas, essencialmente, é hora de fazê-lo viver. Então vá fazer um lanche.

Hummm. Eu acho que é mais do que apenas "como começar". Mas talvez ajude de qualquer maneira. Boa sorte!

Ao criar um site, começo perguntando por que?

A primeira parte do meu fluxo de trabalho está perguntando POR QUÊ? Se estou trabalhando com um cliente, preciso garantir que ele tenha uma visão clara e clara do que deseja que o site realize.

1. As perguntas do porquê.

• Conte-me um pouco sobre você e por que você está fazendo isso.

• Quem são os clientes? Qual é a sua necessidade / dor específica? Por favor, seja capaz de me fornecer - alguns exemplos específicos de diferentes tipos de clientes, o que eles precisam, o que o site fará por eles.

• Conte-me sobre o negócio. O que você faz exatamente?

• O que te faz melhor que o próximo cara?

• Se você estivesse procurando pelo serviço que sua empresa fornece, o que VOCÊ digitaria no Google para encontrá-lo?

Se você está construindo o site para si mesmo, é melhor você já saber quais são essas respostas.

Se você determinar, com base nas respostas às perguntas acima, que essas pessoas são sérias e realmente têm uma boa ideia. Em seguida, prossiga (lembre-se de que você ainda não está sendo pago, mas é melhor tirar as meias, se quiser que eles o contratem.)

2. A pesquisa.

Passe algum tempo pesquisando o cliente e seus negócios. Descubra seus sucessos anteriores e quaisquer problemas que tenham encontrado. Você é o terceiro desenvolvedor que eles contrataram? O que aconteceu com os outros dois caras?

Descubra o que o cliente precisa. Para quem você estará construindo este site. O cliente é um veterano aposentado de 60 anos ou um garoto de 16 anos que joga Farmville no Facebook o dia todo.

Descubra quem são os concorrentes. Eles podem nem saber. Faça uma análise competitiva de 5 a 10 competidores e descubra quem é o idiota que precisamos para entrar nos Serps. Este é o estágio em que você precisa saber qual é o objetivo da palavra-chave. Mais tarde e você já está falhando.

2b A proposta

Sopre-os com o seu conhecimento dos negócios deles e crie um contrato / proposta de site e esteja pronto com o seu contrato assim que eles concordarem. Obtenha o contrato assinado e um depósito de 50% e prossiga para a etapa 3.

3. A Missão - Tenha um

Há um tema comum aqui: em todos esses casos, a missão não é sobre o produto como tal. A missão é "apenas" algo que, se você realmente leva a sério, exige que o produto se torne absolutamente incrível, para que você faça isso acontecer. Se você preferir: essas missões são todas as respostas, por que adicionamos esse novo recurso ?, não, que novo recurso estamos adicionando? - Benjamin Pollack.

O cronograma precisa ser estabelecido para que todos tenham suas expectativas em perspectiva.

4. O fluxo de trabalho

É aqui que a maioria das pessoas começa, então eu explicarei meu processo, mas você terá que decidir qual o melhor fluxo de trabalho para sua situação, equipe, cliente etc.

1. Para mim, o conteúdo vem em primeiro lugar. Garanto que o cliente tenha a maioria feita antes de qualquer código ser gravado. Não estamos falando da edição final da prova de rascunho, mas mais ou menos das palavras do texto que estarão nas páginas. Se uma equipe de marketing estiver envolvida, isso pode demorar um pouco.

2. Você já deve ter uma idéia de como será o site. Você deve ter o conteúdo. Agora você precisa trabalhar no layout e nos princípios gerais de design que atingirão o objetivo que você criou na etapa 3.

   ODEIO wireframes, mas entendo que eles são necessários. Só porque você sabe como o site se parece com o seu cliente. Isto é para sua proteção e para os clientes. Quando todos estiverem felizes, faça-os assinar algo que diz "É isso que estamos pagando para você construir".

3. Desenvolvimento de front-end e interface do usuário - HTML, CSS e DESIGN NO BROWSER , a técnica Hardboiled de Andy Clarke. Estou cansado de perder tanto tempo no Photoshop quando sei que pode demonstrar uma maquete mais realista e rápida que também me dá uma vantagem no desenvolvimento.

4b The Codebase

Você finalmente se diverte. Para o seu e para os clientes, configure o VERSION CONTROL antes de começar. Desde o seu controle de versão, você deve prosseguir e configurar o BUG TRACKING enquanto estiver nele.

4c. Edição de cópias

Lembra do conteúdo que temos? Agora é quando deve ser copiado e editado. Eu sou péssima com isso, então tento contratar outra pessoa ou garantir que muita gente a leia. Verifique e verifique se as palavras-chave mencionadas na etapa 2 estão otimizadas para SEO. Se nosso conteúdo é ótimo e realmente trata dessas palavras-chave, isso deve ocorrer naturalmente.

5. Teste Beta e UI

Faça com que alguns seres humanos com vida real se sentem em frente ao seu site e comece a usá-lo. Eu gosto de alistar minha mãe, que às vezes liga e quer saber por que a impressora não imprime (a ficha mãe, ela precisa ser conectada primeiro). Esse tipo de usuário precisa ser capaz de navegar no site, a não ser, é claro, que você esteja usando o exemplo de garoto de 16 anos com espinhas acima.

6. Manutenção e Plano de SEO

Certifique-se de que todos saibam quem está encarregado de combater as bestas do servidor .

Em um mês, refira-se à análise competitiva que fizemos e compare nosso site com os que analisamos. Use esses dados para criar seu plano de SEO e NÃO, eu não estou falando sobre o SEO de óleo de cobra, estou falando sobre garantir que você ainda esteja gerando conteúdo relevante, os sites estão vinculados naturalmente a você (porque você é incrível) e suas tags de título corresponder ao texto do corpo. O SEO é um processo longo, a menos que seu Stack Overflow e tenha um exército de 14,1 milhões de usuários para gerar conteúdo de qualidade para você.

Há uma grande diferença entre o conteúdo de qualidade e o que você encontra no "site hifenizado", que não vou vincular. (Para impedir que o suco de não seguir pingue sobre eles).

7. Lançamento

Tudo funciona? A missão de construir grandiosidade foi alcançada? Tenha um plano de lançamento e execute-o.

Se você fez tudo certo nas etapas 1 a 6, seu lançamento será muito fácil , pois você poderá ter problemas. Apenas esteja pronto para eles e corrija os erros.

Envie a fatura, enxágue e repita.

Eu gosto de começar <!DOCTYPE html>

Sério, porém ... primeiras prioridades:

1. Descubra o que o cliente deseja. Faça um esboço para o layout básico, crie um esquema de cores, etc.
2. Faça uma simulação básica de navegação e layout (estática) e trabalhe com o cliente para refiná-lo.
3. Produção real. Obtenha CMS e / ou conteúdo estático no local. Converse com o cliente novamente para garantir que é o que eles estão procurando e que possam lidar com o CMS / o CMS pode atender às suas necessidades.
4. Refine e repita 3 até o cliente ficar satisfeito.
5. ????
6. Lucro!

Antes de tudo, eu desenharia o layout básico e o projetaria em papel antes de iniciar a codificação. Depois de concluir o design básico no papel, é fácil codificá-lo de maneira modular.Offcourse php & css seria a melhor maneira de personalizá-lo.

Eu sempre gosto de começar fazendo uma maquete usando algum tipo de software de photoshop para que ele possa incorporar toda e qualquer imagem no seu site.

A maioria das respostas já é aprofundada, deixe-me acrescentar que você deve usar alguma estrutura ou modelos para não perder tempo reescrevendo o básico.

Existem muitas estruturas PHP disponíveis por aí ( Kohana é o meu favorito) ou muitas pessoas usam o Wordpress como base. Além disso, você pode usar uma estrutura CSS, novamente existem muitos por aí, um dos mais populares é o sistema de grade 960

Ao criar um site, como você costuma começar ?

Como você, encontrei a necessidade de me vender como desenvolvedor / designer da web há alguns anos. Eu achei o meu ponto de partida para entender, em minha opinião, quais informações, imagem e mensagem eu quero oferecer aos visitantes que visitam meu site? e o que eu queria que o usuário realizasse / fizesse enquanto visitava meu site .

Uma vez que compreendi que o processo de design ficou muito mais claro. Isso me permitiu anotar os elementos da minha página inicial e das páginas subseqüentes que comunicariam esses itens.

Por exemplo, eu estava muito interessado em tornar meu currículo facilmente acessível e disponível para download. Assim, ao projetar meu site, assegurei que as informações sobre o meu currículo e onde elas pudessem ser encontradas onde estivessem prontamente disponíveis.

A moral da história deve ser relevante. Tudo no seu site deve servir a um propósito; caso contrário, é apenas um ruído desnecessário.