Como construir um site?

Puxa, faz tempo que não escrevo nada, mas após esta postagem irá gerar várias outras e aos poucos vou linkando com o temas principais.
Espero com este artigo poder contribuir com muitas dúvidas e gerar necessidades para saber como buscar mais informações.

Como construir um site?

Na verdade não existe um roteiro específico para a construção de um site, existe o que se deseja fazer e o conhecimento das tecnologias e ferramentas. Mas vou tentar definir alguns passos importantes e relacionar algumas dicas onde vocês podem achar algumas idéias e scripts prontos.
Lembrando que estamos falando da construção de um site informativo, ou seja, sem sistema.
Vamos lá!

1º PASSO: Definir o tema do site.

Considere a cada novo site um projeto, portanto crie uma pasta onde guardará tudo relativo a esse projeto. Inicie escrevendo num arquivo o que deseja desenvolver nesse site como: tema, objetivos, público alvo, menu, descrever o que terá cada item do menu. Crie um organograma se achar necessário. Exemplo:

TEMA: Pousada

OBJETIVO: Expor na internet a pousada mostrando fotos dos chalés, um formulário de contato e outro para reserva de chalés, mapa de localização.

PÚBLICO ALVO: Pessoas no mundo todo que desejam viajar para Florianópolis e se hospedar na pousada.

ITENS DO MENU:

• INÍCIO: conterá um banner animado e grande exibindo fotos, um texto convidando o usuário a visitar o site da pousada, um espaço para expor as promoções de hospedagem.
• A POUSADA: terá um texto falando sobre a história da pousada, descrição de sua localização, um mapa de localização.
• SERVIÇOS: uma lista dos serviços que são oferecidos pela pousada.
• HOSPEDAGEM: uma lista dos nomes e tipos de chalés. Cada chalé terá uma página específica exibindo informações sobre o chalé e um pequeno álbum de fotos.
• RESERVA: um formulário que solicitará do usuário informações para uma pré-reserva, como escolha do chalé, quantidade de adultos e crianças, data de início e fim da estadia, outros.
• FALE CONOSCO: disponibilizar o endereço, telefone, e-mail, Orkut e um formulário de contato.

Assim você gerou uma espécie de diagnóstico do projeto, e fica mais claro na construção de cada página desse projeto. Vamos ao segundo passo.

2º PASSO: Pesquisando o layout.

Antes de iniciar a construção do layout de seu projeto, faça uma pesquisa em sites relacionados ao seu tema ou em sites que disponibilizam templates. Um exemplo de site que disponibilizam template seria o www.templatemonsters.com. A idéia aqui não é comprar um baixar um template free, mas sim observar as tendências e assim você poder ter idéias para desenhar seu layout.
Este é o momento artista do webdesigner, portanto após a pesquisa muitas ideais surgirão, rabisque num papel, isso pode ajudar.

3º PASSO: Criando o layout.

Idéias formadas, e talvez rabiscadas no papel, vamos ao trabalho e ver a possibilidade de construção dessas idéias.
Use um editor de imagens como Fireworks, Photoshop, Corel Draw, o que tiver mais afinidade. Lembrando que os aplicativos Fireworks e Photoshop realizam fatiamento (técnica utilizada para otimizar um site.). Aqui será citado o Fireworks.
Independente de seu site ser em Flash ou em HTML você poderá criar seu layout num desses aplicativos. É importante destacar que você desenvolverá apenas as partes que serão comum em todas a páginas de seu site. Caso for apresentar ao cliente, é importante desenvolver o conteúdo também.
Salve seu arquivo de projeto do layout na pasta que definiu para este projeto. ORGANIZE-SE, pois vários outros arquivos serão gerados.
Vamos lá, este é o momento de abrir seu aplicativo e criar seu layout. Não siga a leitura adiante sem seu layout pronto.

4º PASSO: Fatiamento do layout.

Finalizado seu layout, apresente a alguns amigos ou ao cliente, aceite críticas, tente sempre ver pelo lado positivo e altere o que achar interessante. Definido o desenho do site (layout) você deverá realizar o fatiamento.
Importante: Caso o site for desenvolvido em Flash, não precisará ser fatiado e está pronto para ser utilizado no Flash. Caso o site for desenvolvido em HTML siga adiante.
No Fireworks a ferramenta fatiamento chama-se SLICE, com esta ferramenta fica fácil ir determinando as fatias como desejar.

5º PASSO: Exportando o layout.

No painel OPTIMIZE do Fireworks defina o formato (extensão de arquivo) e qualidade das imagens que serão geradas. Caso você tenha usado fotos, efeitos e gradiência em seu layout escolha o formato JPG.
Para exportar vá em FILE – EXPORTAR. Neste momento será gerado um arquivo HTML e vários arquivos de imagens, portanto é importante você exportar dentro da pasta de seu projeto e na tela de exportação marque a opção que criará uma pasta imagens, assim suas imagens ficarão guardadas nesta pasta.

6º PASSO: Otimizando o arquivo HTML.

Existem diversos editores de HTML mas o que iremos citar será o Dreamweaver.
A primeira coisa é configurar o Dreamweaver para pasta de seu projeto. Para isso vá ao menu SITE – NEW SITE e siga os passos da configuração. Finalizada a configuração você já verá os arquivos no painel FILE do Dreamweaver.
Abra o arquivo HTML exportado do fireworks e:

• delete as imagens que podem ser substituídas por código de cor;
• centralize o layout;
• tire as margens do arquivo HTML;
• digite o título do site;
• outros que achar necessário.

7º PASSO: Criando o template (modelo).

O template é um arquivo no formato DWT que servirá para manter o padrão do layout em todas as páginas do site.
Para criar seu template, abra o arquivo que você otimizou no passo anterior e vá ao menu FILE – SAVE AS TEMPLATE, na janela seguinte dê um nome para seu template e confirme.
Observação: Um site pode ter vários templates.
Agora, vamos criar as regiões editáveis. As regiões editáveis servem para criar um ou mais espaços editáveis que serão espaços com informações diferenciadas em cada arquivo HTML. Para criar uma região editável clique com o botão direito do mouse na posição desejada do layout, depois e clique em TEMPLATES – EDITABLE REGION.
Salve mais uma vez seu arquivo.
8º PASSO: Aplicando o template nas páginas.
Primeiro crie os arquivos HTML conforme sua lista de menu. Abra um arquivo e aplique o template: vá no menu MODIFY, depois em TEMPLATE, e clique em APPLY TEMPLATE TO PAGE.
Faça o mesmo para todas as páginas.

8º PASSO: Desenvolvendo o conteúdo

Neste momento você já está com o site praticamente pronto, basta desenvolver o conteúdo. Portanto irá abrir página por página e pensar na disposição do conteúdo de cada uma.
Alguns cuidados:

• Cuidado com textos longos;
• Use letras não serifadas (Uma letra com serifa seria a Times New Roman) ;
• Cuidado com o contraste das cores de texto com fundo é importante que o texto esteja legível. O ideal é que o fundo que contiver o texto importante seja branco;
• Não exagere no tamanho das letras, um tamanho 12 é o máximo, use tamanhos maiores para títulos ou algum texto que deseja dar destaque;
• Evite cores de fundo muito forte, se precisar, use tons claros.

Não tenha pressa em desenvolver o conteúdo de cada página, este é um momento que demora afinal cada página poderá ter disposição de conteúdos diferente e é importante que seja bem planejado.
Ao finalizar o conteúdo, você finaliza o desenvolvimento do site, neste momento é importante apresentar ao cliente, e fazer as alterações caso sejam necessárias.

9º PASSO: Hospedando o site

Tudo aprovado, vamos fazer a hospedagem do site. Aqui é importante você já ter definido domínio e local para hospedar.
Para cadastrar um domínio você pode acessar o site www.registro.br, para registros nacionais. O valor da anuidade é R$ 30,00.
Para hospedar o site, você precisará contratar um serviço com uma empresa que seja servidor, existem várias no mercado que oferecem diversos tipos de vantagens algumas bem conhecidas são:

• www.locaweb.com.br
• www.uol.com.br
• www.terra.com.br
• www.grupolg.com.br
• Etc.

Existem os servidores gratuitos também como www.000webhost.com, basta acessar o site e realizar seu cadastro.
Ao contratar o serviço de hospedagem, entre várias informações que são passadas existem três que são importantes para realizar o FTP(File Transfer Protocol) , são elas:

• Hostname ou apenas host;
• Login ou usuário;
• Password ou senha.

Diante dessas informações vamos ao Dreamweaver realizar a confituração do FTP.
Vá a configuração do site que fizemos lá no início: menu SITE – MANAGE SITES, na janela que abrir clique em EDIT pois queremos alterar informações e não criar nova configuração.
Chegando na tela do FTP preencha os campos, conforme as informações que você recebeu de seu servidor.

10º PASSO: Transferindo seus arquivos.

Site e configurações de FTP prontos, mãos a obra.
No Dreamweaver tem um botão onde você pode fazer a conexão com o FTP.
Agora é só selecionar todos os arquivos e clicar no botão Upload. Ou você pode clicar e arrastar os arquivos para o outro lado.

FIM

Feito, acesse seu domínio e lá está seu site.
Aproveite para testar, clicar em cada link, caso algo não funcionar como em sua máquina, abra os arquivos, confira, altere e faça o upload dos arquivos novamente.

---

Desenvolvido por Luciana Schmitz – 2009 – luciana_schmitz@hotmail.com
Este documento só pode ser utilizado para fins didáticos, não poderá ser reproduzido e agregado em outros materiais a menos que se peça autorização e seja feita referência ao documento.