Estendere HTML creando Tag personalizzati

Italian (Italiano) translation by Francesco Turlon (you can also view the original English article)

In questo tutorial vi mostreremo quanto è facile estendere il linguaggio HTML con tag personalizzati. I tag personalizzati possono essere utilizzati per implementare diversi comportamenti, quindi sono un metodo molto comodo per scrivere meno codice e conservare i documenti HTML più facilmente.

Cos'è un Tag HTML personalizzato?

Con HTML si utilizza il tag <b>, ad esempio, per mostrare il testo in grassetto. Se avete bisogno di un elenco, utilizzerete il tag <ul> con relativo tag <li> per ogni elemento dell'elenco. I tags vengono interpretati dal browser e, insieme al CSS, determinano come viene visualizzato il contenuto di una pagina web e anche come si comportano parti del contenuto.

A volte, utilizzare semplicemente un tag HTML non è sufficiente per le funzionalità necessarie nelle applicazioni web. Di solito ciò è risolto utilizzando più tag HTML con JavaScript e CSS, ma questa soluzione non è troppo elegante.

Una soluzione più elegante sarebbe quella di utilizzare un tag personalizzato — un identificatore racchiuso tra <> che viene interpretato dal browser per eseguire il rendering della funzionalità desiderata. Come con i normali tags HTML, dovremmo essere in grado di utilizzare un tag personalizzato più volte in una pagina, e dovremmo anche essere in grado di disporre degli attributi di tag e sub-tag per aiutare la funzionalità del tag personalizzato. Vediamo quindi un esempio!

Esempio #1: Creazione di un Tag HTML Gravatar personalizzato

Creiamo un tag personalizzato che consente di visualizzare l'immagine Gravatar per un certo indirizzo e-mail. Chiameremo questo tag <codingdude-gravatar>, e passeremo l'indirizzo email come attributo chiamato email.

È possibile denominare i tags personalizzati nel modo che ritenete più opportuno, ma una cosa da notare è che in questo esempio il nome del tag personalizzato inizia con codingdude-. È consigliabile utilizzare i prefissi come questo per tags personalizzati al fine di evitare conflitti di nomi con altri tag personalizzati. Inoltre, è ovviamente una buona idea non utilizzare nomi di tag che sono già definiti da HTML.

Per implementare e testare il nostro tag, dovremo creare un paio di cose:

Una cartella contenente i file di progetto; chiamiamo questa cartella gravatar-custom-tag.
Un file HTML index.html all'interno della cartella gravatar-custom-tag. Questo file conterrà il codice HTML.
Un file JS codingdude-gravatar.js all'interno della cartella gravatar-custom-tag. Questo file conterrà codice JavaScript che implementerà il tag personalizzato.

Modifichiamo il file index.html e inseriamo il seguente contenuto:

<html>
    <head>
        <script type="text/javascript" src="codingdude-gravatar.js"></script>
    </head>
<body>
    This is my Gravatar picture: 
    <codingdude-gravatar email="admin@coding-dude.com"></codingdude-gravatar>
</body>
</html>

Se carichiamo ora index.html nel browser, il risultato non sarà granché perché dobbiamo ancora implementare il codice per il nostro tag personalizzato:

Una cosa da notare è che il browser è molto indulgente, così sarà possibile avere tags sconosciuti in un documento e il browser semplicemente li ignorerà. Per fare in modo che il nostro tag personalizzato visualizzi l'immagine Gravatar per l'email, dobbiamo prima capire come funziona Gravatar.

Gravatar funziona convertendo un indirizzo di posta elettronica in un URL di un'immagine PNG che l'utente ha selezionato. La traduzione viene effettuata calcolando l'hash MD5 dell'indirizzo email. L'URL dell'immagine Gravatar assomiglia a questo: https://www.gravatar.com/avatar/EMAIL_MD5_HASH.png. Quindi prima abbiamo bisogno di una funzione per calcolare l'hash MD5 di una stringa. Per questo useremo una libreria open-source che aggiungeremo al file index.html in questo modo:

<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.7.0/js/md5.min.js"></script>
        <script type="text/javascript" src="codingdude-gravatar.js"></script>
    </head>
<body>
    This is my Gravatar picture: <codingdude-gravatar email="admin@coding-dude.com" />
</body>
</html>

Ora passiamo all'implementazione del tag personalizzato. Avremo bisogno di implementare il codice che identifica innanzitutto il nostro tag personalizzato nel documento, e quindi avremo bisogno di implementare la funzionalità del nostro tag personalizzato. Tutto ciò andrà nel nostro file codingdude-gravatar.js e sarà simile a questo:

function customTag(tagName,fn){
  document.createElement(tagName);
  //find all the tags occurrences (instances) in the document
  var tagInstances = document.getElementsByTagName(tagName);
  	//for each occurrence run the associated function
		for ( var i = 0; i < tagInstances.length; i++) {
            fn(tagInstances[i]);
		}
}

function codingdudeGravatar(element){
		//code for rendering the element goes here
		if (element.attributes.email){
			//get the email address from the element's email attribute
			var email = element.attributes.email.value;
			var gravatar = "http://www.gravatar.com/avatar/"+md5(email)+".png";
			element.innerHTML = "<img src='"+gravatar+"'>";
		}
}	

customTag("codingdude-gravatar",codingdudeGravatar);

Guardando il codice, vediamo la funzione customTag() che cerca le occorrenze di un tag personalizzato dal nome (il parametro tagName) ed esegue la funzionalità connessa con quel tag personalizzato (tramite il parametro fn).

La chiamata a document.createElement(tagName) è necessaria per alcuni browser (IE in particolare) per informare il browser che si utilizzerà un tag personalizzato con il nome tagName, altrimenti il tag potrebbe non funzionare.

Il parametro fn è la funzione che implementa quello che dovrebbe fare il tag personalizzato. Nel nostro caso, fn è codingdudeGravatar(). Questa funzione accetta come parametro un riferimento all'elemento di tag personalizzato. Se il tag personalizzato ha un attributo denominato email passerà tale valore alla funzione md5() dalla nostra libreria open-source. Il risultato verrà quindi utilizzato per comporre l'URL dell'immagine Gravatar, che verrà aggiunto tramite un elemento <img> all'interno del nostro elemento tag personalizzato.

L'ultima riga dello script chiama la funzione customTag() con il nome del tag personalizzato e la sua funzione di implementazione associata. La funzione di tag personalizzato può essere riutilizzata per qualsiasi tipo di tag personalizzato; si dovrà solo implementare la funzione che fa quello che volete.

Ora, se carichiamo il nostro file index.html in un browser, vedremo il Gravatar per la nostra e-mail:

Esempio #2: Tag HTML personalizzato avanzato per disegnare un grafico a torta

Nell'esempio precedente, abbiamo visto una semplice implementazione personalizzata di tag HTML. È possibile utilizzare lo stesso approccio per implementare qualsiasi tag personalizzato desideriate.

Vediamo come implementare un tag personalizzato più avanzato, uno che possiamo usare per disegnare un grafico a torta. Creiamo i file necessari per questo tag personalizzato:

Create una cartella e nominatela piechart-custom-tag. Questa sarà la nostra cartella di progetto.
All'interno della cartella piechart-custom-tag, create un file HTML e nominatelo index.html. Questo file conterrà il codice HTML.
Create inoltre un file JavaScript codingdude-piechart.js che conterrà l'implementazione del nostro tag personalizzato.

I tags personalizzati sono molto spesso utilizzati come contenitori per varie funzionalità. Nel nostro caso, utilizzeremo il tag <codingdude-piechart> come contenitore per disegnare un grafico a torta. Se avete perso il tutorial How to Draw Charts Using JavaScript and HTML5 Canvas, vorrete dargli una rapida occhiata. Useremo il codice da quel tutorial per dare funzionalità al nostro tag personalizzato.

Modificate il file codingdude-piechart.js e aggiungete le seguenti funzioni dal tutorial:

drawLine()
drawArc()
drawPieSlice()
Piechart()

Ora modificate il file index.html e inserite il tag personalizzato per disegnare il grafico a torta in questo modo:

<html>
    <head>
        <script type="text/javascript" src="codingdude-piechart.js"></script>
    </head>
<body>
    <codingdude-piechart width="200" height="200" colors="#fde23e,#f16e23, #57d9ff,#937e88">
      <codingdude-data category="Classical music">10</codingdude-data>
      <codingdude-data category="Alternative rock">14</codingdude-data>
      <codingdude-data category="Pop">2</codingdude-data>
      <codingdude-data category="Jazz">12</codingdude-data>
    </codingdude-piechart>
</body>
</html>

L'intento qui è quello di impostare la larghezza e l'altezza del grafico a torta utilizzando gli attributi width e height. L'attributo colors consente di impostare i colori utilizzati per le sezioni del grafico a torta.

Come accennato prima, questo tag personalizzato è un po' più complesso dal momento che utilizzeremo delle sub-tags. Utilizzeremo i sub-tags <codingdude-data> per impostare i dati per il grafico. Diamo ora un'occhiata a come implementare il codice per questo tag personalizzato.

Modificate il file codingdude-piechart.js e, dopo le funzioni prelevate dal tutorial del grafico a torta, inserite il codice seguente:

//here you should add the function from the tutorial
//How to Draw Charts Using JavaScript and HTML5 Canvas
//...
function customTag(tagName,fn){
  document.createElement(tagName);
        //find all the tags occurrences (instances) in the document
        var tagInstances = document.getElementsByTagName(tagName);
		//for each occurrence run the associated function
		for ( var i = 0; i < tagInstances.length; i++) {
            fn(tagInstances[i]);
		}
}

function PiechartTag(element){
    //add the canvas where to draw the piechart
    var canvas = document.createElement("canvas"); 
    //get the width and height from the custom tag attributes
    canvas.width = element.attributes.width.value;
    canvas.height = element.attributes.height.value;
    element.appendChild(canvas);
    
    //get the colors for the slices from the custom tag attribute
    var colors = element.attributes.colors.value.split(",");
    
    //load the chart data from the <codingdude-data> sub-tags
    var chartData = {};
    var chartDataElements = element.querySelectorAll("codingdude-data");
    for (var i=0;i<chartDataElements.length;i++){
        chartData[chartDataElements[i].attributes.category.value] = parseFloat(chartDataElements[i].textContent);
        //remove the data sub-tags
        chartDataElements[i].parentNode.removeChild(chartDataElements[i]);
    }
  
    //call the draw() function
    new Piechart(
        {
        canvas:canvas,
        data:chartData,
        colors:colors
        }
    ).draw();
}

customTag("codingdude-piechart",PiechartTag);

La funzione customTag() è la stessa utilizzata nell'Esempio #1. L'implementazione del tag personalizzato <codingdude-piechart> è contenuta nella funzione PiechartTag(). Questa funzione si occupa dei seguenti aspetti:

Crea l'elemento <canvas> dove il grafico verrà disegnato, e lo aggiunge all'interno del tag personalizzato. La larghezza e l'altezza del canvas sono ricavati dagli attributi del tag personalizzato.
Cerca l'attributo colors dell'elemento e lo trasforma in un array di colori usati per le sezioni del grafico a torta.
Carica gli elementi <codingdude-data> uno a uno nella struttura dati passata al grafico a torta. Dal momento che gli elementi hanno contenuto di testo, il browser ne farà il rendering e il testo verrà mostrato. Dal momento che non vogliamo ciò, possiamo semplicemente rimuovere gli elementi dopo aver preso i dati.
Infine, chiameremo il costruttore Piechart() con le opzioni richieste e chiameremo poi la funzione draw() per disegnare il grafico a torta.

Se caricate index.html potete vedere che il tag personalizzato viene renderizzato come grafico a torta e dovrebbe assomigliare a questo:

The custom tag is rendered as a pie chart

Ed ecco un bellissimo grafico a torta. Cambiando gli attributi di <codingdude-data> cambierà in accordo anche il grafico a torta. Questa tecnica di tag personalizzati è stata utilizzata per lo sviluppo della libreria Infographic Charts & Graphics HTML Tags Library di CodeCanyon.

Infographic charts and graphics HTML tags library — Libreria di grafici di CodeCanyon

La libreria contiene tag personalizzati non solo per i grafici a torta, ma anche per i grafici a linee, grafici a barre e altri tipi di grafici.

Considerazioni finali

In questo tutorial, abbiamo visto due esempi su come creare tag HTML personalizzati per due differenti funzionalità. Utilizzando la funzione customTag(), si può facilmente sviluppare il proprio tag personalizzato.

Se vi è piaciuto questo tutorial, abbiamo anche una vasta gamma di tutorial riguardanti HTML5 e le tecnologie correlate, quindi non esitate a controllare.