WDD 130: Fundamentos da Web

S01 Atividade de Aprendizagem: Trabalhando com Arquivos e Pastas

Visão Geral

É essencial para desenvolvedores de software ter um entendimento aprofundado sobre arquivos, pastas e caminhos de arquivos. Neste curso, você usará muitos arquivos para criar um único site e precisa se sentir confortável trabalhando com eles e conhecer a relação entre eles.

Esta atividade revisará os fundamentos de caminho de arquivos e definirá as convenções de nomenclatura de arquivo que você precisa seguir neste curso.

Noções Básicas sobre Caminho de Arquivos

Caminhos de arquivos se referem à forma como localizamos um arquivo em um sistema de arquivos, e seu site usa caminhos de arquivos para vincular arquivos, como imagens e folhas de estilo. Se um ativo referenciado, como um arquivo de imagem, não aparecer na sua página, seja localmente no seu computador ou quando você o publicar no GitHub Pages, verifique o arquivo e o caminho do arquivo.

Exemplos Comuns de Caminhos de Arquivos

Caminhos Absolutos

Um caminho absoluto fornece o caminho completo para um arquivo e é usado para recursos externos. Ao usar caminhos absolutos na web, o caminho deve começar com o protocolo, como https:// . Os caminhos absolutos de um recurso são sempre os mesmos, não importa onde o arquivo de origem esteja localizado.

O exemplo a seguir usa um caminho absoluto para uma imagem encontrada em um site externo:

<img src="https://resource.thesite.com/images/breakfast.svg" alt="Comidas típicas de café da manhã">

Observe que o caminho do arquivo começa com o protocolo (neste caso, https://) e contém a referência completa ao arquivo.

Caminhos Relativos

Um caminho de arquivo relativo define como encontrar um arquivo em relação ao local do arquivo de origem. Por exemplo, ele pode estar no mesmo diretório ou em um diretório pai ou em um subdiretório em comparação ao arquivo de origem.

Se o arquivo de destino estiver no mesmo diretório, você pode listar o diretório do nome do arquivo ou pode começar com um ponto . que indica o diretório atual. Use dois pontos .. para se referir ao diretório pai e coloque uma barra / entre os nomes dos diretórios.

Então, para referenciar um arquivo que está no diretório atual, você usaria outro.html ou ./outro.html. Para referenciar um arquivo no diretório pai, você usaria ../outro.html. Para referenciar um arquivo que está abaixo de dois subdiretórios, você usaria pasta1/pasta2/outro.html.

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 contém a tag âncora <a>.

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

Observe que o caminho do arquivo não começa com um protocolo, ou seja, ele é relativo ao HTML que contém a tag. Como o caminho do arquivo não começa com um ponto . ou uma barra /, o computador espera encontrar a página sobrenos.html no mesmo diretório do arquivo que a referencia.

Outro método que pode ser usado para referenciar o diretório atual é adicionar a notação ./ no início do caminho. O exemplo a seguir é equivalente ao anterior: ambos procuram o arquivo sobrenos.html no diretório atual.

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

Caminho Relativo: Arquivo na subpasta
O exemplo a seguir faz referência a uma imagem chamada perfil.png em uma subpasta chamada imagens (e a pasta imagens está na mesma pasta principal que o arquivo html de origem).

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

Caminho Relativo: Uma pasta que está localizada em uma pasta pai ou em um nível superior
Neste exemplo, um arquivo na pasta semana02 faz referência a uma imagem chamada castelo.jpg, mas essa imagem está em uma pasta chamada imagens localizada no nível raiz (um nível superior à pasta semana02).
A notação ../ é usada para subir uma pasta.

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

Resumo do Caminho de Arquivos

• Começar um caminho com "/" levará até a pasta raiz e começará ali.
• Começar um caminho com "../" avançará uma pasta e começará ali.
• Começar um caminho com "../../" avançará 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 ou descer em uma subpasta, comece com a primeira subpasta e inclua uma "/" após cada nome de subpasta.

Padrões de Nomenclatura de Arquivos e Pastas

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

Convenções de Nomenclatura

• Use toda a sintaxe em letras minúsculas.

  Algumas 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 inválido: Produtos.html
  ✅ Exemplo válido: produtos.html
• NÃO use espaços em nomes de arquivos e pastas. Em vez disso, use hifens -.

  Navegadores e outras ferramentas podem interpretar espaços de maneira inconsistente; por isso, evite usá-los. O Protocolo de Transferência de Hipertexto (HTTP ou 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 espaço visual, use hifens.

  ❌ Exemplo inválido: documentos de design.html
  ✅ Exemplo válido: documento-de-design.html

• NÃO use caracteres especiais. Caracteres especiais geralmente significam coisas específicas 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 inválido: imagem13-v123523imagensdevidadegalhoquebrado w200x200.png
  ✅ Exemplo válido: cena-de-inverno-pequena.png
• Use nomes padrão para pastas. Nesta classe, 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.

Instruções da Atividade

Revisão das Convenções de Nomenclatura

Examine cada um dos seguintes arquivos e pastas e determine se eles seguem as convenções de nomenclatura do curso.

1. Sobre.html
   Resposta

   ❌ Não, esse nome não segue o padrão. Ele usa "S" maiúsculo, o que não é permitido.
   Em vez disso, deveria ser sobre.html.

2. informacoes da empresa.html
   Resposta

   ❌ Não, esse nome não segue o padrão. Ele usa espaços no nome do arquivo, o que não é permitido.
   Em vez disso, deveria ser informacoes-da-empresa.html.

3. exibição-do-produto.jpg
   Resposta

   ✅ Sim, esse nome segue o padrão. Está escrito em letras minúsculas e usa hifens (-) para separar as palavras.

4. cronograma_do_trem.html
   Resposta

   ❌ Não, esse nome não segue o padrão. Ele usa sublinhados _, que é um caractere especial não permitido. Usar sublinhados para separar nomes de arquivos é comum em alguns sites, mas não é permitido por nossas orientações. Em vez disso, deveria ser cronograma-do-trem.html.

5. produto4.png
   Resposta

   ✅ Sim, esse nome segue o padrão. Números são permitidos em nomes de arquivos.

6. templo-grande (copia).webp
   Resposta

   ❌ Não, esse nome não segue o padrão. Ele usa um espaço e caracteres especiais, neste caso parênteses ( ), que não são permitidos. Se a palavra "cópia" for desejada, o nome do arquivo deverá ser templo-grande-copia.webp.

Praticando com Caminhos de Arquivos

Esta atividade ajudará você a praticar caminhos de arquivos relativos e absolutos.

Você abrirá um arquivo HTML que contém três imagens de templos. As tags img já estão inclusas e têm o nome de arquivo correto, mas faltam as demais informações de caminho necessárias para que elas apareçam. Você precisa atualizar o atributo src de cada uma dessas tags img para que elas sejam exibidas na página.

1. No VS Code, abra a pasta do repositório do curso wdd130.
2. Navegue até a pasta semana01 e abra o arquivo caminhos-de-arquivos.html.
3. Clique com o botão direito do mouse no nome do arquivo e abra-o com o Live/Five Server para visualizá-lo no navegador. Observe que as três imagens do templo não estão funcionando:

   

4. Localize e corrija a tag img para os seguintes exemplos:
   • aba-templo-da-nigeria.jpeg: Este arquivo está localizado na subpasta de imagens.
     (Dica: você precisa adicionar esta subpasta ao atributo src para acompanhar o nome do arquivo que já está lá.)
   • templo-de-salt-lake.jpg: Este arquivo está localizado na pasta de imagens que está no nível raiz do repositório.
     (Dica: você precisará subir um diretório primeiro no caminho do arquivo.)
   • aba-templo-da-nigeria.jpeg: Este arquivo está localizado na web: https://content.churchofjesuschrist.org/templesldsorg/bc/Temples/photo-galleries/anchorage-alaska/320x180/anchorage-temple-lds-253274-wallpaper.jpg
     (Dica: você não deve baixar este arquivo, mas deve referenciá-lo diretamente usando este caminho absoluto completo.)

Quando terminar, sua página deverá mostrar os três templos da seguinte maneira:

Envio

Para esta atividade de aprendizagem, você ainda não precisa enviar nada. Você pode postar perguntas e discutir com seus colegas e o instrutor no canal do Fórum da Semana 01 no Microsoft Teams.

Quando terminar as atividades de aprendizagem restantes desta semana, você precisará voltar ao Canvas para relatar seu progresso.