0

Guia de bolso #2 - Caminhos relativos

Josélio Júnior
Josélio Júnior

  Oi pessoal!!! Espero que estejam bem!!!

  Vamos entender melhor como funcionam os caminhos relativos com base nos caminhos absolutos.


Link para o artigo no GitHub: https://github.com/joseliojunior/library/blob/main/guia-de-bolso/02-caminhos-relativos


Caminhos absolutos

    São caminhos onde são definidos o começo, o meio e o fim. Temos como exemplo os caminhos do computador ou mesmo links diretos na internet.


Caminho do computador

C:\Users\You\Project\index.html

C: ↴
  Users ↴
       You ↴
          Project ↴
                 index.html


    Uma coisa importante é que caminhos do computador usam \ que é diferente de quando vamos fazer a mesma referência em algum arquivo, sendo específico para endereçamento dentro da máquina.

    Aqui iniciamos nosso caminho em C:, ou seja, na unidade de disco principal da máquina. E então continuamos seguindo o fluxo de pastas (diretórios) até chegar ao arquivo alvo, nesse caso o index.html.

    Como nosso caminho tem o início, meio e fim definidos, então se trata de um caminho absoluto.

    Agora vamos ver um caminho que podemos considerar absoluto para internet.


Caminho da internet

https://raw.githubusercontent.com/you/project/main/index.html

https:// ↴
        raw.githubusercontent.com ↴
                                 you ↴
                                    project ↴
                                           main ↴
                                               index.html


    Observe que as subpastas (subdiretórios) são separados por / diferentemente do caminho anterior no computador, sendo este tipo de caminho que trataremos daqui para frente.

    Podemos considerar esse caminho absoluto uma vez que inicie com algum padrão http, seja ele http:// ou https://, pois significa um começo de link. Logo após segue o corpo do link que finaliza no index.html.

    É comum utilizarmos caminhos absolutos da internet quando precisamos nos referenciar a arquivos que estão fora do escopo do nosso projeto.

    Um exemplo é quando colocamos uma imagem que está em algum outro endereço da internet, daí precisaremos utilizar o caminho absoluto.


Exemplo em arquivo .html de referência a uma imagem

<img src="https://sitedasimagens.com/imagem.png" alt="imagem" />


    Entretanto, se a imagem ou outro arquivo estiver dentro do escopo do nosso projeto é mais interessante que utilizemos o caminho relativo.


Caminhos relativos

    Agora sim chegou a ora de falar deles!!!

    Caminhos relativos são dependentes de escopo, ou seja, dependem do contexto de onde são chamados. Desse modo, o mesmo caminho pode se referir a arquivos diferentes dependendo do contexto.

    Para exemplificar usarei projetos no repositório do GitHub.

    Teremos o projeto scorpions e o projeto pink-floyd. E em cada um deles vamos fazer uma referência a uma imagem da capa do disco dentro do index.html.


Árvore de pastas de ambos os projetos

projeto
    ↳ src
        ↳ capa-do-disco.png
    ↳ index.html


Utilizando caminhos absolutos

scorpions

<img src="https://raw.githubusercontent.com/you/scorpions/main/src/capa-do-disco.png" alt="Capa do disco do Scorpions"/>

pink-floyd

<img src="https://raw.githubusercontent.com/you/pink-floyd/main/src/capa-do-disco.png" alt="Capa do disco do Pink Floyd"/>


    Perceba que utilizamos o endereço base https://raw.githubusercontent.com/, depois referenciamos ao nosso nome de usuário do GitHub you, depois ao nome do projeto, pasta main (principal) e por fim a pasta da imagem e a imagem.

    Como nossos projetos tem a mesma estrutura, basta mudar o nome do projeto no link para que possamos fazer a referência correta. Apesar disso é mais interessante que utilizemos o caminho relativo nestes casos, vamos ver o porquê.


Utilizando caminhos relativos

scorpions

<img src="./src/capa-do-disco.png" alt="Capa do disco do Scorpions"/>

pink-floyd

<img src="./src/capa-do-disco.png" alt="Capa do disco do Pink Floyd"/>


    O que acontece aqui é que o caminho relativo abstrai toda a base do endereço e considera que você esteja fazendo a referência a partir do seu próprio projeto, ou seja, a pasta (repositório) do projeto é considerada como a base do link automaticamente.


Exemplo

https://raw.githubusercontent.com/you/pink-floyd/main/src/capa-do-disco.png


    É o mesmo que o endereço abaixo no contexto do projeto pink-floyd.


./src/capa-do-disco.png


    Porém passa a ser diferente no contexto do projeto scorpions, apesar da escrita ser a mesma.

    Para reforçar, imagine que o ./ sintetizasse a ideia que:


"A partir deste repositório que estou, aponte para este caminho a seguir."


    No próximo artigo vamos ver como podemos nos "movimentar" dentro dos caminhos relativos, mas se ficou alguma dúvida não deixe de comentar para que possamos enriquecer o conteúdo deste ou dos próximos artigos.

    É isso pessoal. Sucesso nas nossas jornadas!!!

0
0

Comentários (1)

0
Josué Oliveira

Josué Oliveira

01/09/2021 03:38

Dr......outro conteúdo magnífico!


Vai guardando para logo logo lança um livro!... O título já está quase encaminhado.


Parabéns!


Pra cima...AVANTE!

Sou um estudante de Nutrição que mergulhou no mundo da programação em março de 2020.          > github: github.com/joseliojunior

Brasil