Lidando com arquivos

« Previous Next »

Um site consiste de muitos arquivos: conteúdo em texto, código, folhas de estilo, conteúdo em mídia e por aí vai. Quando você está construindo um site, você precisa guardar esses arquivos, ter certeza que eles conversam entre si e ter certeza que todo o conteúdo está certo antes de fazer o upload para um servidor. Lidando com Arquivos discute algumas questões às quais você deve estar ciente para montar essa estrutura.

Onde seu site vive no seu computador?

Quando você está trabalhando em um site localmente no seu próprio computador, você deve manter todos os arquivos relacionados em uma mesma pasta que reflete a estrutura dos arquivos do site publicado em um servidor. Essa pasta pode estar em qualquer lugar que você quiser, mas você deve colocá-la em algum lugar de fácil acesso, talvez no Desktop, na sua pasta Home, ou no root do seu HD.

Escolha um lugar para guardar seus projetos de site. Aqui, crie uma nova pasta chamada projetos-web (ou algo do tipo). Essa é a pasta onde seus projetos de site viverão.
Dentro dessa pasta, crie outra pasta para guardar seu primeiro site. Chame ela de site-teste (ou algo mais criativo).

Deixando de lado as maiúsculas e o espaço

Você vai perceber no decorrer desse artigo que nós pedimos para que você denomine pastas e arquivos completamente em letras minúsculas e sem espaços. Isso acontece porque:

Muitos computadores, particularmente servidores web, são case-sensitive. Então, por exemplo, se você colocar uma imagem no seu site em site-teste/MyImage.jpg, e então em um outro arquivo você tentar chamar site-teste/myimage.jpg, não vai funcionar.
Browsers, servidores web e linguagens de programação não lidam bem com espaços. Por exemplo, se você usa espaços no nome do seu arquivo, alguns sistemas vão tratar o nome do arquivo como dois nomes. Alguns servidores vão substituir os espaços no nome do arquivo por "%20" (o código para espaço em URLs), quebrando seus links. É melhor separar palavras com traços ou underscores (sublinhados): meu-arquivo.html or meu_arquivo.html.

Por essas razões, é melhor ter o hábito de escrever os nomes de suas pastas e arquivos em minúsculas e sem espaços, pelo menos até que você saiba exatamente o que está fazendo. Dessa maneira, você vai evitar muitos problemas.

Qual estrutura seu site tem?

A seguir, vamos ver qual estrutura seu site teste deve ter. As coisas mais comuns que temos em qualquer projeto de site que criamos são um arquivo HTML index e pastas que contem imagens, arquivos de estilo e scripts. Vamos criá-los agora:

index.html: Esse arquivo vai geralmente conter o conteúdo da sua página, ou seja, textos e imagens que as pessoas veem quando vão ao site. Usando seu editor de texto, crie um novo arquivo chamado index.html e salve dentro da sua pasta site-teste.
pasta imagens: Essa pasta vai conter todas as imagens que você vai usar no seu site. Crie uma pasta chamada imagens, dentro da sua pasta site-teste.
pasta estilos: Essa pasta vai conter os códigos CSS usados para dar estilo ao seu conteúdo (por exemplo, indicando cor de texto e de fundo). Crie uma pasta chamada estilos, dentro da pasta site-teste.
pasta scripts: Essa pasta vai conter todos os códigos JavaScript para adicionar funcionalidades interativas para seu site (ex.: botões que carregam dados quando clicados). Crie uma pasta chamada scripts, dentro da sua pasta site-teste.

Nota: No Windows, você deve ter problemas em ver os nomes dos arquivos, porque porque o Windows tem uma irritante opção chamada Ocultar as extensões dos tipos de arquivo conhecidos ligadas por padrão. Geralmente você pode desligar essa opção indo no Windows Explorer, selecionando a opção Opções de pasta..., desmarque o box Ocultar as extensões dos tipos de arquivo conhecidos, e clique em OK. Para mais informação sobre sua versão de Windows, procure no Yahoo!

Caminhos de arquivo

Para fazer arquivos conversarem entre si, você tem que fornecer um caminho de arquivo entre eles — basicamente uma rota para que um arquivo saiba onde outro está. Para demonstrar isso, nós vamos inserir um pouco de HTML no nosso arquivo index.html, e fazer mostrar a imagem que você escolheu no artigo "Com o que seu site vai parecer?"

Copie a imagem que você escolheu antes para sua pasta imagens.
Abra seu arquivo index.html e insira o seguinte código exatamente como está escrito. Não se preocupe com o significado — nós vamos olhar com mais detalhes essa estrutura posteriormente.
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="" alt="My test image">
  </body>
</html> 
```
A linha <img src="" alt="My test image"> é o código HTML que vai inserir uma imagem na página. Nós precisamos dizer ao HTML onde a imagem está. A imagem está dentro da pasta imagens, no mesmo diretório do index.html. Para trilhar o caminho de index.html para nossa imagem, o caminho é imagens/nome-da-sua-imagem. Por exemplo, nossa imagem é chamada firefox-icon.png, então, nosso caminho é imagens/firefox-icon.png.
Insira o caminho dentro do seu código HTML, dentro das aspas do código src="".
Salve seu arquivo HTML, então carregue em seu web browser (dê um duplo-clique no arquivo). Você deve ver sua nova página mostrando seu arquivo.

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

Algumas regras gerais para caminhos de arquivo:

Para linkar para um arquivo no mesmo diretório do arquivo HTML, apenas use o nome do arquivo, ex.: my-image.jpg.
Para linkar um arquivo em um sub-diretório, escreva o nome do diretório na frente, mais uma barra, ex.: subdirectory/my-image.jpg.
Para linkar um arquivo abaixo do arquivo HTML, use dois pontos. Então, por exemplo, se index.html estiver dentro de uma subpasta de site-teste and my-image.png estiver dentro de site-teste, você pode fazer referência a my-image.png em index.html usando ../my-image.png.
Você pode combinar isso como você preferir ../subdiretorio/outro-subdiretorio/my-image.png.

Por agora, isso é tudo o que precisamos saber.

Nota: Os arquivos Windows tendem a usar barras inversas, não barras normais , ex.: C:\windows. Isso não improta — mesmo se você estiver desenvolvendo seu site no Windows, você ainda usar barras normais no seu código.

O que mais deve ser feito?

Por agora, é isso. Sua pasta deve parecer algo do tipo:

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file