Creare collegamenti ipertestuali e anchor link in Joomla

«Con 'ipertesto' intendo scrittura non sequenziale, testo che si dirama e consente al lettore di scegliere; qualcosa che si fruisce al meglio davanti a uno schermo interattivo. Così com’è comunemente inteso, un ipertesto è un’insieme di brani di testo tra cui sono definiti legami che consentono al lettore differenti cammini
T. H. Nelson, Litteray machines 90.1, Muzio, Padova 1992 ,p. 2
Parlare di collegamenti e anchor link ci “rimanda” (ed è già questa un’àncora, un collegamento) a un discorso più generale che è quello della scrittura ipertestuale. E quale migliore definizione per descrivere Internet, che si configura appunto come un “gigantesco” ipertesto.
Ma cosa s’intende per ipertestualità?
Dal punto di vista dell’impaginazione, un ipertesto è un testo che può essere letto non soltanto nell'ordine stabilito tipograficamente o elettronicamente, ma anche seguendo rimandi a parti pertinenti sul piano della logica.

Per dirla in altri termini, in un ipertesto troverò un insieme di documenti messi in collegamento tra loro tramite parole chiave. Passare da un documento all'altro rende possibile una lettura non sequenziale dei contenuti. E’ il lettore che sceglie l’ordine della lettura, scegliendo la parola chiave da seguire e aprire di conseguenza altri documenti collegati, altri concetti collegati. All'interno dell'ipertesto, quindi, si possono praticare infiniti percorsi di lettura.

Un libro non è dinamico, ci costringe a seguire un percorso lineare dalla prima all’ultima riga di una pagina, e dalla prima pagina fino all’ultima.

Ecco perché Antonio Calvani (citazione doverosa, nonché a me molto cara) associa l'ipertesto al pensiero "naturale", che procede per salti, per immagini e per connessioni piuttosto che per sviluppo lineare e sequenziale.
Il pensiero è infatti creativo e con l’ipertesto recuperiamo questo aspetto prezioso, in quanto con esso siamo in grado di associare a un termine immagini, testi, approfondimenti.

Il computer ha reso possibile questo tipo di scrittura. I documenti, infatti, sono leggibili a video e le parole chiave in essi contenute appaiono sottolineate in maniera da renderle immediatamente evidenti. Un click del mouse e ci si trova catapultati altrove con la sensazione di rendere via via più ricco il concetto di partenza.

Viene da sé che il tag HTML più importante è quello che consente di creare i collegamenti tra una pagina e l'altra.

In gergo un collegamento diventa “àncora” e viene abbreviato in a.
Forse, e secondo il mio modesto parere, il termine àncora mal rende il concetto di dinamicità e fluidità a cui vi ho abituati nella premessa… dà più il senso della pausa, della staticità. Ma proseguendo la lettura dell’articolo, vi accorgerete che nel linguaggio html il termine assume il giusto senso.

Ora, c’è la possibilità di creare àncore esterne (tra una pagina e l'altra) e àncore interne (tra un punto e un altro nella stessa pagina).

Vediamo dapprima la seconda tipologia.

Quando abbiamo la necessità di creare un collegamento interno?  
Questi tipi di collegamenti si usano solitamente se abbiamo una pagina lunga, in modo da permettere all’utente di tornare agilmente all’inizio. Oppure se vogliamo creare un indice, per cui l’utente clicca e si ritrova nella sezione della pagina corrispondente alla voce indicata. Questi sono i casi più frequenti. Ma possiamo usare lo stesso sistema per creare manualmente le FAQ, un questionario con le relative risposte e quant’altro.

Per creare un collegamento interno (ancoraggio) abbiamo bisogno appunto di un àncora e di un link che punta ad essa. L’àncora ci servirà per sapere dov'è il nostro collegamento.

Vediamo come utilizzare le àncore in Joomla creando proprio un indice.
Ipotizziamo di voler creare questo tipo di struttura:
------------------------------------
Indice
Capitolo 1
Capitolo 2
Capitolo 3
Conclusioni


Capitolo 1
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Torna all'indice

Capitolo 2
Fusce elit. Cras a turpis non eros viverra rhoncus. Aliquam cursus mauris vel augue. Sed venenatis odio a ante. In hac habitasse platea dictumst. Donec id massa. Praesent pharetra laoreet arcu. Nam purus. In ut lacus vitae risus porttitor tempus. Proin vulputate lobortis lorem.

Torna all'indice

Capitolo 3

Sed suscipit, leo sed ullamcorper egestas, lorem metus egestas orci, id placerat orci ligula vel dolor. Mauris ut lorem quis libero mattis accumsan. Nulla sodales. Aenean iaculis magna ut orci. Duis euismod ante ac sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum est. Fusce tincidunt, mauris vitae malesuada feugiat, dolor libero consequat ligula, nec laoreet est urna ut enim. Nunc venenatis. Phasellus at neque ac neque ultrices lacinia. Aliquam rutrum lorem eget nisl. Ut vestibulum tortor quis magna. In hac habitasse platea dictumst. Donec viverra luctus diam.

Torna all'indice

Conclusioni
Lorem Ipsum, or Lipsum for short, is simply dummy text of the printing and typesetting industry. Lipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only four centuries, but now the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lipsum.  

Torna all'indice
------------------------------------

Quello che dovremo usare per creare i collegamenti è uno strumento che troviamo nell’editor di Joomla (in questo caso uso quello di default, TinyMCE 2.0):


Allora per prima cosa vogliamo che, quando clicchiamo sulla voce “Capitolo 1”, veniamo indirizzati alla sezione corrispondente. Dobbiamo quindi mettere un’àncora alla voce “Capitolo 1” come indicato nella figura:


Per farlo, selezioniamo “Capitolo1” (per intenderci, dobbiamo selezionare il primo capitolo, non la relativa voce dell’indice), clicchiamo sull’icona a forma di àncora nella barra degli strumenti e si aprirà un pop-up come questo:


Inseriremo in esso il nome da dare alla nostra àncora che ci servirà per trovarla in un secondo momento (scriviamo, ad esempio, capitolo1) e clicchiamo su “Inserisci”.
Comparirà un simboletto raffigurante l’àncora appena creata.
Ora dobbiamo creare il link per puntare all’àncora. Quindi, questa volta selezioneremo la voce “Capitolo 1” contenuta nell’indice:

Una volta selezionata, clicchiamo su un’altra icona presente nella barra degli strumenti, ovvero questa:

Si aprirà una nuova pop-up in cui presteremo attenzione al campo “Ancora”.

Apriamo quindi il menu a tendina e selezioniamo l’àncora creata poco fa (capitolo1), lasciando il resto come sta.

Clicchiamo perciò su “Inserisci”.

Ecco creato il primo collegamento. Faremo questo con tutte le altre voci.

Non ci resta che creare anche un rimando all’indice, in modo tale che l’utente risalga all’inizio della pagina in maniera pratica e veloce.
Per farlo, selezioniamo la voce “Torna all’indice” e poniamo in questo punto una nuova àncora che chiameremo, ad esempio, “indice”.
Ora selezioniamo la voce “Indice” all’inizio della pagina e diamo vita al link che condurrà a questo punto preciso con la stessa procedura di prima (utilizzando il secondo strumento e sostituendo questa volta il nome dell’àncora, che sarà “indice”).

Passerò ora velocemente a descrivere il procedimento per creare collegamenti esterni, quelli che puntano a pagine diverse da quella nella quale ci troviamo (come può essere una pagina che si trova su un altro dominio).
Dunque, useremo il secondo strumento che abbiamo usato poco fa:

Facciamo un esempio. Mettiamo di voler segnalare un sito nella seguente frase:
"troverete la risorsa specificata qui"
Non ci resta che selezionare la parola “qui” e cliccare sullo strumento di cui sopra. Si aprirà questo pop-up:

-    Inseriremo in URL LINK l’indirizzo del sito a cui puntare (es. http://www.chicchessia.it)
-    Lasceremo il resto dei campi come sta, mentre in TARGET è possibile specificare in quale finestra la pagina linkata deve essere aperta.
Ecco quello che succederà a seconda della scelta di un TARGET o di un altro:
1.    con “Apri in questa finestra/frame” il sito linkato verrà aperto nella stessa finestra di navigazione ma con l’inconveniente di eclissare il vostro sito. Il che vuol dire che l’utente, per tornare al vostro sito, deve usare il tasto “indietro” del browser o digitare di nuovo il vostro indirizzo;
2.    con “Apri in una nuova finestra(_blank)” il sito linkato verrà aperto in una nuova finestra dando la possibilità all’utente di rimanere collegato al vostro e avere a disposizione, in una nuova finestra, il sito a cui lo rimandate.

Possiamo utilizzare i collegamenti ipertestuali anche per linkare ad altri contenuti presenti sul nostro dominio. Lo strumento "crea àncora", infatti, ci consente di creare legami solo all'interno della stessa pagina. Ma se vogliamo indirizzare il nostro utente ad un articolo presente comunque nel nostro sito? Ecco, non ci resta che usare lo stesso strumento dei collegamenti ipertestuali con un accorgimento particolare.

Mi spiegherò con un esempio. Mettiamo di avere due articoli: l'articolo 1 che vuole rimandare all'articolo 2. Dopo averli creati entrambi, andrò nel Menu principale (o chi per esso) e darò vita alla voce di menu (che posso anche non pubblicare):


Farò lo stesso per l'articolo 2, ma questa volta presterò attenzione alla voce "LINK" e la copierò annotandola dove preferisco:



Torno così al mio articolo 1 perchè voglio disporre una relazione tra i due documenti, tipo quella che segue:

-Articolo 1-
Vi invito a leggere l'articolo presente in questa sezione del sito.

Selezionerò la parola "questa" e utilizzerò lo strumento dei collegamenti .

Mi si aprirà il solito pop-up e questa volta, alla voce URL Link, incollerò il Link che avevo annotato qualche passaggio fa. Nel mio caso, il link all'articolo 2 è questo: index.php?option=com_content&view=article&id=49. Quindi lo inserisco come nell'immagine seguente:



Siamo giunti così a vedere come gestire sia link interni che esterni e abbiamo avuto l’ennesima conferma che tutto questo si può ottenere, come in ogni cosa con il nostro grande CMS Joomla, senza conoscere neanche queste poche nozioni che sarebbero alla base del linguaggio HTML.

Che dire di più, gettate l’àncora nel mare di Joomla e la sosta sarà piacevole come sempre.

Buon lavoro!

Angela Munno
-Cassy-
CommentaCommenta questo articolo sul forum