WDD 131: Fundamentos da Web Dinâmica

S01 - Atividades de Aprendizagem: Trabalhando com Arquivos

Visão Geral

Ao trabalhar na web, há vários fatores que afetam a operação dos arquivos, como o navegador, o(s) protocolo(s), o sistema operacional, o(s) idioma(s), etc. Embora muitos deles estejam fora do seu controle, você pode manter seu trabalho consistente e gerenciável utilizando convenções de nomenclatura de arquivos e pastas.

Estude essas duas seções a seguir e aplique esse conhecimento durante a execução das atividades do curso.

• Regras e Convenções de Nomenclatura
• Caminhos de Arquivos

Regras e Convenções de Nomenclatura

As convenções de nomenclatura de arquivos e pastas descritas aqui serão consideradas regras de "melhores práticas" para este curso. Essas regras devem ser aplicadas a todos os arquivos e pastas criados durante o curso.

Melhores Práticas:

• Use toda a sintaxe em letras minúsculas.

  Plataformas e sistemas lidam com diferenciação de maiúsculas e minúsculas de forma diferente. A diferenciação entre maiúsculas e minúsculas é um conceito importante a ser entendido ao gerenciar arquivos e pastas.

  Exemplo: produtos.html

• NÃO use espaços nos nomes de arquivos e pastas. Em vez disso, use hifens (-).

  Os espaços são manipulados de forma inconsistente pelos usuários, portanto, não os utilize. O Protocolo de Transferência de Hipertexto (HTTP - Hypertext Transfer Protocol, em inglês) ignora espaços, exceto em nomes de arquivos. Em nomes de arquivos, ele substitui um espaço pela sintaxe "%20", que é confusa. Evite usar espaços e, em vez disso, se quiser criar separação visual, use hifens.

  Exemplo: design-documento.html

• NÃO use caracteres especiais.
  Caracteres especiais geralmente significam símbolos específicos para computadores, então não os use na nomeação de arquivos e pastas.

  Exemplos de caracteres especiais (a serem evitados): <,>, \, /, #, ?, !

• Nomes de arquivos e pastas devem ser tão curtos e significativos (semânticos) quanto possível.

  Nomes curtos evitam que você, outros desenvolvedores e visitantes do site tenham que lembrar de nomes longos e complicados para arquivos e pastas. Quando significativos, os nomes também podem ajudar a prever a finalidade ou a natureza do conteúdo do arquivo ou da pasta.

  Exemplo correto: cenario-inverno-sm.png
  Exemplo incorreto: imagem13-v123523imagemdegalhoquebrado w200x200.png

• Neste curso, os nomes de pasta padrão para subpastas são:
  • estilos - Pastas com este nome contêm arquivos CSS.
  • imagens - Pastas com este nome contêm imagens.

Caminhos de Arquivos

Caminhos de arquivos são usados para criar links para arquivos no seu site. Se um recurso referenciado, por exemplo, um arquivo de imagem ou arquivo CSS, não aparecer na sua página local ou quando você publicar no seu site habilitado para GitHub Pages, verifique o nome do arquivo e o caminho dele.

Etapas de Solução de Problemas

1. Certifique-se de que o arquivo existe e está no lugar desejado.
2. Verifique a ortografia da referência do arquivo, incluindo uso de maiúsculas e minúsculas, para ter certeza de que corresponde ao nome real do arquivo. Compare a referência com a fonte fornecida.

   Exemplo de Erro Comum: Referência de Maiúscula/Minúscula Errada

   Neste exemplo, a referência à imagem encontrada em uma tag âncora dentro do arquivo index.html está incorreta porque o uso de maiúsculas e minúsculas está incorreto.

   <img src="imagens/img_3324.jpg" alt="Um castelo de caça na Alemanha.">

   Além disso, este arquivo de imagem NÃO deve ser deixado neste formato de nomenclatura. O arquivo de imagem deve receber um nome simples e semântico, como "castelo.jpg".

   

3. Verifique o caminho do arquivo para ter certeza de que você não está direcionando para a pasta ou para o local errado.

Exemplos Comuns de Caminhos de Arquivos

Caminho Relativo: Arquivo na mesma pasta
Este exemplo faz referência a um arquivo chamado "sobrenos.html", localizado na mesma pasta que o arquivo HTML de referência que está usando o atributo href de uma tag âncora a. O caminho do arquivo é relativo ao arquivo atual.

<a href="sobrenos.html">Sobre Nós</a>

Outro método para referenciar o diretório atual é usar a notação ./ no início do caminho. Isso normalmente não é necessário porque é implícito e pode levar a erros, ainda mais se você esquecer o ponto ., o que tornaria a referência um caminho relativo à raiz /, gerando diferentes resultados dependendo do servidor.

Caminho Relativo: Arquivo em pasta no mesmo nível
Este exemplo faz referência a uma imagem chamada "perfil.png" em uma subpasta chamada "imagens".

<img src="imagens/perfil.png" alt="Xavier Rodriquez" width="100" height="200">

Neste exemplo, a tag img com atributo src está no arquivo "index.html", que está na mesma pasta (a pasta raiz do site) que a pasta "imagens".

Caminho Relativo: Uma pasta localizada no mesmo nível da pasta de origem.
Este exemplo faz referência a uma imagem chamada "castelo.jpg" localizada em uma pasta raiz chamada "imagens".
A notação ../ é usada para subir uma pasta.

<img src="../imagens/castelo.jpg" alt="Um castelo de caça na Alemanha." width="300">

Neste exemplo, a tag img com atributo src está localizada em um arquivo chamado "santograal.html", que está em uma subpasta chamada "semana02".

Caminho Absoluto:
Referências de fonte absolutas usam recursos externos e começam com um protocolo.
Neste caso, o protocolo é https (Secure Hypertext Transfer Protocol).

<img src="https://recursos.siteexemplo.com/imagens/cafe-da-manha.svg" alt="Comidas típicas de café da manhã">

Resumo do Caminho de Arquivos

• Começar um caminho com "/" indica ir para a pasta raiz e começar ali.
• Iniciar um caminho com "../" indica voltar uma pasta e começar ali.
• Começar um caminho com "../../" indica voltar duas pastas e começar ali (e assim por diante…).
• Iniciar um caminho com "./" indica que deve-se começar na pasta atual.
• Para avançar, comece com a primeira subpasta e continue navegando.