Caminhos absolutos, relativos e relativos á raiz

Os caminhos dos arquivos e links em um website ainda causa muita confusão entre os desenvolvedores. Apesar muitos terem a consciência da real diferença entre caminho absoluto e caminho relativo, poucos têm familiaridade sobre a diferença entre caminhos relativos e relativos á raiz. Este post tem o objetivo de esclarecer de uma vez por todas as diferenças, de modo a não causar mais confusão.

Caminhos absolutos:

Os caminhos absolutos fornecem o endereço ou URL completo do documento vinculado, incluindo: protocolo que está sendo utilizado, nome do domínio, e caminho do arquivo. Em geral, não devemos utilizar caminhos absolutos quando estamos nos referindo a arquivos que estão hospedados no mesmo servidor e no mesmo projeto (e que utilizam o mesmo domínio). Os caminhos absolutos são úteis para referenciar sites, ou arquivos que estão hospedados em outro servidor, ou que dizem respeito a outro projeto de um outro domínio.  Por que eu recomendo que não seja utilizado para referenciar arquivos de um mesmo projeto/domínio? Muito simples. Caso você decida mover o seu projeto para um outro domínio ou servidor, ou mudar de nome, por exemplo, você terá que sair caçando nos arquivos de seu projeto todos os lugares que você utilizou caminhos absolutos, o que não é legal.

Exemplo de caminhos absolutos:

http://www.geovanneborges.com.br/wp-content/uploads/2013/09/facebook1.png

http://www.geovanneborges.com.br/caminhos-absolutos-relativos-e/


http://www.lojaninha.com.br/

Caminhos relativos:

Na maioria dos sites essa é a maneira mais adequada para representar caminhos a arquivos ou endereços que são locais, ou seja, encontram-se no mesmo domínio, hospedados fisicamente no mesmo servidor, no mesmo contexto de seu projeto. A ideia desses caminhos é omitir parte dos endereços absolutos, como protocolo utilizado e dominio, fornecendo apenas a parte diferente do caminho. Veja a figura abaixo, retirada do site da Adobe:

ln_contentsfile

Para vincular conteúdo.html com horas.html (ambos na mesma pasta), use o caminho relativo horas.html.

Para vincular de contents.html a tips.html (na subpasta recursos), use o caminho relativo resources/tips.html. Em cada barra (/), você desce um nível na hierarquia de pastas.

Para vincular de contents.html a index.html (na pasta pai, um nível acima de contents.html), use o caminho relativo ../index.html. Dois pontos e uma barra (../), move um nível acima na hierarquia de pastas.

Para vincular de contents.html a catalog.html (em uma subpasta diferente da pasta pai), use o caminho relativo ../products/catalog.html. Aqui, ../ move acima para a pasta pai, e produtos/ move abaixo para a subpasta produtos.

Ao mover arquivos como um grupo (por exemplo, ao mover uma pasta inteira, de modo que todos os arquivos dessa pasta mantenham os mesmos caminhos relativos entre si), você não precisa atualizar os links relativos a documentos entre esses arquivos. No entanto, ao mover um arquivo individual que contém links relativos a documentos ou um arquivo individual de destino de um link relativo a documentos, você precisa atualizar esses links. (Se você mover ou renomear arquivos usando o painel Arquivos, o Dreamweaver atualizará todos os links relevantes automaticamente.) [trecho retirado do site da adobe]

Exemplo de caminhos relativos:

uploads/2013/09/facebook1.png
caminhos-absolutos-relativos-e/

Caminhos relativos à raiz do site:

Os caminhos relativos à raiz do site descrevem o caminho completo do arquivo, á partir da raiz do seu site. Um caminho relativo à raiz de um site vai sempre começar com um barra “/” na frente do endereço. Eu gosto desse método, pois essa é a melhor maneira de referenciar arquivos nos quais você move com frequência, mesmo estando hospedado no mesmo projeto. Desse modo, mesmo que eu tenha movido um arquivo html que referenciava muitas images com caminhos relativos, tudo continuará funcionando.

Exemplo de caminhos relativos à raiz:

/wp-content/uploads/2013/09/facebook1.png
/caminhos-absolutos-relativos-e/
/

Note a “/” sempre antes dos caminhos. Essa barra significa “volte para a raiz do site”.

Espero que tenha esclarecido possíveis confusões.