Routing delle Risorse

Introduzione al Routing delle Risorse

Il sistema di routing delle risorse su un sito web consente di gestire e navigare tra i vari contenuti. È essenziale comprendere la differenza tra indirizzi relativi e assoluti e come utilizzare link esterni correttamente. Queste conoscenze sono fondamentali per costruire pagine web strutturate e facili da navigare.

Concetto di Radice

Il concetto di radice (o root) si riferisce alla directory principale di un sito web, da cui partono tutti i percorsi assoluti interni al sito. In altre parole, la root è il livello più alto della struttura delle cartelle del sito. Quando si utilizza un percorso che inizia con una barra (/), significa che si sta facendo riferimento alla radice del sito. Questo tipo di riferimento è molto utile per garantire la coerenza dei collegamenti, indipendentemente da dove ci si trova all’interno della struttura delle cartelle.

Ad esempio, se la struttura del sito è la seguente:

progetto-web/
├── index.html
├── about.html
├── css/
│   └── stile.css
├── js/
│   └── script.js
├── immagini/
│   └── logo.png
└── contatti/
    └── contact.html
  • La directory root in questo esempio è progetto-web/.
  • Quando si utilizza un percorso come /css/stile.css, si sta indicando di cercare il file stile.css all’interno della cartella css, partendo dalla root del sito.
  • Questo significa che, indipendentemente dalla pagina HTML in cui ci si trova, il percorso /css/stile.css funzionerà sempre per collegarsi a quel file.

Indirizzi Relativi e Assoluti

Indirizzi Assoluti

Un indirizzo assoluto specifica l’intero percorso di una risorsa, compreso il protocollo (http:// o https://), il dominio e il percorso completo della risorsa. Ad esempio:

<a href="https://www.example.com/about.html">Chi Siamo</a>
  • Questo link si collega alla pagina about.html del sito https://www.example.com, indipendentemente dalla posizione della pagina corrente.
  • Gli indirizzi assoluti sono utili quando si devono creare collegamenti a pagine che si trovano su siti diversi dal proprio o per garantire che il link funzioni correttamente indipendentemente dalla posizione della pagina corrente.
  • Si considerano indirizzi assoluti anche quelli che iniziano dalla radice del sito (/). Questi link indicano percorsi che partono sempre dalla directory principale del sito, il che rende la gestione delle risorse coerente a prescindere dalla posizione della pagina corrente. Ad esempio:
<a href="/css/stile.css">Stile CSS</a>
  • Questo link cerca il file stile.css all’interno della directory css partendo dalla root del sito.
  • Per risorse comuni come JavaScript e CSS, è consigliabile usare percorsi assoluti che partono dalla root (/css/ o /js/) per evitare problemi di navigazione o percorsi rotti.

Indirizzi Relativi

Un indirizzo relativo definisce il percorso della risorsa rispetto alla posizione della pagina corrente. Gli indirizzi relativi sono particolarmente utili quando si sviluppa un sito che potrebbe essere spostato o riorganizzato, poiché questi link sono flessibili e non dipendono da un dominio fisso. Esistono diversi tipi di indirizzi relativi:

  1. Percorso Relativo Semplice: Si riferisce a una risorsa nella stessa directory o in una sottodirectory.

    <a href="about.html">Chi Siamo</a>
    • Questo link si collega alla pagina about.html nella stessa directory del documento attuale.

  2. Percorso Relativo al Livello Superiore: Utilizza .. per risalire alle directory superiori.

    <a href="../contact.html">Contatti</a>
    • Questo link si collega a contact.html, risalendo di un livello dalla directory corrente.

  3. Navigazione in Cartelle Annidate: Per gestire risorse all’interno di diverse sottodirectory o risalire a cartelle superiori, è possibile creare percorsi relativi più complessi:

    <a href="../immagini/logo.png">Logo</a>
    • Questo link si collega all’immagine logo.png che si trova in una directory superiore rispetto alla pagina corrente.

Struttura delle Cartelle e Navigazione

Per comprendere meglio l’uso degli indirizzi relativi, è utile conoscere come organizzare le risorse all’interno delle cartelle. Vediamo un esempio di struttura di una cartella di progetto web:

progetto-web/
├── index.html
├── about.html
├── css/
│   └── stile.css
├── js/
│   └── script.js
├── immagini/
│   └── logo.png
└── contatti/
    └── contact.html

In questa struttura:

  • index.html è la pagina principale.
  • about.html è una pagina separata nella stessa directory di index.html.
  • css/stile.css è il file di stile.
  • js/script.js è il file JavaScript.
  • immagini/logo.png contiene un’immagine del logo.
  • contatti/contact.html è una pagina di contatto in una sottodirectory chiamata contatti.

Esempi di utilizzo degli indirizzi relativi:

  1. Da index.html a about.html: 
    <a href="about.html">Scopri di più</a>
  2. Da index.html a contact.html nella directory contatti: 
    <a href="contatti/contact.html">Contattaci</a>
  3. Da contact.html a stile.css (file CSS nella cartella css): 
    <link rel="stylesheet" href="../css/stile.css">
    • Si risale di un livello (..) dalla directory contatti per accedere alla directory principale e poi alla directory css.
  4. Da about.html a logo.png nella cartella immagini: 
    <img src="immagini/logo.png" alt="Logo">
    • immagini è una sottodirectory della stessa directory di about.html.

Un link esterno punta a una risorsa ospitata su un dominio diverso da quello corrente. È spesso utilizzato per collegarsi a siti esterni o per fornire riferimenti esterni.

  • Di solito, i link esterni utilizzano target="_blank" per aprire il link in una nuova scheda del browser, mantenendo l’utente sulla pagina originale del sito: 
    <a href="https://www.google.com" target="_blank">Visita Google</a>
  • Questo approccio migliora l’esperienza utente, poiché il visitatore non lascia il sito originale, facilitando il ritorno al contenuto principale.

Ancore

Le ancore vengono utilizzate per creare collegamenti all’interno della stessa pagina o verso una sezione specifica di un’altra pagina. Le ancore sono particolarmente utili per navigare in documenti lunghi, migliorando l’usabilità e l’accessibilità del sito.

Per creare un’ancora, è necessario aggiungere un attributo id all’elemento di destinazione e quindi creare un link che punti a quell’id. Ad esempio:

  1. Creazione dell’elemento di destinazione con un id: 
    <h2 id="sezione1">Sezione 1</h2>
<p>Questa è la prima sezione del documento.</p>
  2. Creazione del link all’ancora: 
    <a href="#sezione1">Vai alla Sezione 1</a>
    • Questo link porterà l’utente direttamente alla sezione del documento con id="sezione1".

Le ancore possono essere utilizzate anche per collegarsi a sezioni specifiche di altre pagine. Ad esempio:

<a href="about.html#team">Scopri il nostro team</a>
  • Questo link porterà l’utente alla sezione #team della pagina about.html, se quella sezione è identificata da un id="team".

Risorse Consigliate