Tutorial- Como fazer um site- Passo-a-passo

Olá!
Bem, vou deixar aqui o meu testemunho em jeito de ajudar e motivar todos aqueles que desejam ter um site pessoal que, de facto, revela-se bem mais interessante do que meramente postar fotos numa galeria onde outras centenas ou milhares submetem. É um gosto pessoal, é algo que tem o nosso toque e que nos permite sentir que de facto temos um espaço só nosso na internet de forma a mostrarmos ao mundo um bocadinho de nós, a nossa arte. Note-se que coloquei este texto nesta secção de conversa por não me ser possível colocá-lo na secção de tutoriais..

Dada a introdução, vamos pôr mãos à obra.

Estruturação

Esta fase é crucial para o desenvolvimento de qualquer site. É aqui que montamos o esqueleto do projecto e que nos permite avançar com ideias definidas permitindo poupar bastante tempo.

- Primeiramente devemos pensar num esquema de cores para o site, algo que nos agrade e que se enquadre com o tema que estamos a expor. Esta fase é pessoal e cada um deve ir de encontro aos seus gostos. Anotemos em papel o que concluimos.

- De seguida, devemos listar também em papel os temas/menus que vão incluir no site assim como o que pensamos fazer em cada tema. Por exemplo tema: galeria --> inclui animais, paisagens, etc.. Estes temas ajudarão a pessoa a estruturar o site, tendo desde já uma ideia de quantos menus e sub páginas vai precisar. Aconselho uma estrutura em arvore.

- Posteriormente a estrutura/desenho. Devemos em papel fazer vários esboços da estrutura do nosso site. Não tem mal se ao principio fica parecido com aquele site que vimos na net e que nos inspirou. Com o tempo vamos dando o gosto pessoal. Note-se que nem todas as pessoas são dotadas de arte e imaginação mas isto não é impedimento para cada um fazer algo coisa própria.

Ferramentas

É agora que vamos definir as ferramentas de trabalho. Para iniciantes, aconçelho vivamente desenvolverem sites unicamente em html e com um pouco de javascript para dar os requintes caso seja necessário. Neste âmbito, e dado que este "tutorial" não se destina a avançados aconçelho:

- Dreamweaver (ferramenta de desenvolvimento gráfico/código)
- Photoshop CS2 (pessoalmente penso ser a melhor opção)
- Browsers Firefox, Netscape e IExplorer
- Dois computadores com resoluções diferentes (facultativo)

Necessitamos de ter instalados os browsers mais utilizados com o objectivo de realizar testes para abranger o maior "público" possível. Note-se que existem bastantes incompatibilidades entre os vários browsers nomeadamente em termos de formatação. Falando de forma mais bruta, uma imagem num browser pode aparecer à esquerda e quando abrimos o site noutro, a mesma imagem pode aparecer à direita.

O facto de termos dois computadores no espaço de trabalho com resoluções diferentes ajuda-nos a compreender e a ajustar o nosso site para, novamente, abrangermos o maior público possível sem problemas. Se for possível ligá-los numa rede local, facilitava o trabalho. (se precisarem de ajuda neste ponto avisem que eu posso facultar).

Desenvolvimento

Tendo o site definido em papel e as ferramentas, temos o principal feito! Acreditem que isto é mesmo verdade .

Nesta fase, temos de traduzir o nosso esboço para pixels. Normalmente tenho sempre como base a definição do ecrã com que estou a trabalhar para ter uma ideia dos tamanhos base das imagens a compor o site. Por exemplo, se o meu ecrã tem 1280px de comprimento, sei que uma imagem que atravesse todo o ecrã terá esse tamanho. Um quadrado centrado na página (muito útil num tipo de design que se vê bastante), vou ter cerca de 1280/2 pixels. Vamos então por partes,

- A melhor maneira de desenvolver um site é por tabelas. Sim, no dreamweaver, como em muitas outras ferramentas, podemos definir tabelas com margem 0, o que nos ajuda a organizar o site em termos de menús e páginas principais. Nesta fase podemos usar "frames", mas pessoalmente para sites de fotografia não costumo necessitar. Apenas de inline-frames como explicarei mais à frente.

Assim, pegando no esboço criamos tabelas que se ajustem ao mesmo e definimos margem zero para elas. Por exemplo se no esboço temos um menu com 3 parametros do lado esquerdo, uma imagem superior e uma página principal definimos uma tabela com 4 linhas e duas colunas. Neste ponto a ferramenta de visualização gráfica do dreamweaver pode-nos ajudar.

- Definimos a cor de fundo do nosso site no programa.

- Photoshop. Agora vamos criar o "eyecandy" do nosso site. No próprio photoshop, antes de cirar qualquer imagem, façamos um registo em papel do código das cores que vamos usar. Vá com o rato à palete de cores, selecçione e passe para papel o código de cada cor. Por exemplo Fundo #FFFFFF; etc. De seguida criamos as imagens e menus a colocar no site com gosto.

- Com as imagens criadas, compomos o nosso site no dreamweaver. Dica: Quando salvarem uma imagem no photoshop, tenham em conta aquela janelinha em baixo que nos diz quanto tempo demorará a carregar a dita imagem consoante o tipo de ligação que o visualizador tem. Muito útil para definirmos prioridades ao carregar imagens no site.

Dicas úteis

- Inline-frames : permitem-nos colocar sub-páginas num site. Bastante útil quando desejamos que os menus permanecam, carregando só a parte que interessa em vez de voltar a carregar a página toda. Isto seria redundante e muito pouco prático.

- Máscaras de imagem : permitem fazermos sujeitos clicáveis numa imagem. Definimos uma zona numa imagem para que possamos clicar e abrir um novo link. Diga-se ligação a uma página.

- javascript : Útil para criar uns efeitos engraçados. Aconçelho a que não exagerem com isto, podem tornar o vosso site cansativo à vista. Aconselho a usar apenas se realmente precisarem de fazer algo que se revele dificil de outra forma.

Alojamento

Precisamos agora de fazer upload do projecto (imagens e páginas) para um servidor ftp (file transfer protocol). Os servidores com este protocolo permitem-nos alojar os nossos ficheiros e que sejam abertos em todo o lado do mundo uma vez que estão sempre ligados/activos. Podemos também criar o nosso próprio servidor FTP com o tamanho que queremos em UNIX, mas deixemos isso para outras conversas.

Todos os que têm um ISP (provedor de serviço de internet) como netcabo, cabovisão, etc têm um espaço com cerca de 15Mb (caso da cabovisão) para alojarem o vosso site. O software? Eu uso o WS-FTP para transferir os meus ficheiros para o servidor ftp://clientes.netvisao.pt bastando posteriormente introduzir o user name e a password para ter acesso aos meus ficheiros. Este programa comunica em rede sob protocolo ftp com o servidor. Se não sabiam que tinham esta conta está na hora de telefonar para o apoio do vosso ISP para obterem mais informações

Conclusões

Reforço a ideia de que este tutorial serve apenas para orientar as pessoas que desejam ter um espaço seu na internet. Sei que existe muita informação, mas por vezes falta o basico: ajudar a delinear as ideias para concretizar um objectivo. É neste âmbito que escrevi este texto um pouco em forma de tutorial .

Estou aberto para alguem que queira esclarecer pontos deste artigo. Devo desde já dizer que não esclareço duvidas especificas de software pois eu também tive de procurar e cresci e aprendi bastante com esse esforço. Acreditem que é para vosso bem que não me disponho a isto. Agora se quiserem saber mais sobre inline-frames, coisas que falo neste texto convido desde já a contactarem-me .

Relembro que nada se faz sem trabalho e esforço próprio. Peço desde já desculpa por qualquer erro ortográfico mas estou com um pouco de pressa..