Benvenuto,

Questo box è un div con classe tech. Tali div vengono utilizzati per spiegare aspetti tecnici. Questa pagina è stata creata per visualizzare tutto il contenuto all’interno di una single-page.

La pagina ha una struttura molto semplificata (navigation, header e footer) lasciando la possibilità all’utente di personalizzarla utilizzando i vari snippet di codice.

All’interno della pagina è possibile vedere una serie di importazioni di variabili che includono il contenuto di file .md che si trovano all’interno della cartella _pages/snippets/ e _pages/snippets/tech/. Questi file contengono il contenuto che verrà visualizzato all’interno della pagina attraverso il layout scelto dall’utente tramite il comando include. Ad ogni include è possibile passare dei parametri che verranno utilizzati all’interno del layout per personalizzare il contenuto.

Aggiunta di testo in una colonna

Il blocco precedente è un testo introduttivo, scritto interamente in markdown. Questo testo è stato scritto nel file introduction.md ed appare in una singola colonna (layout: one-column.html).

Per caricare il paragrafo all’interno della pagina è necessario fare le seguenti operazioni:

• Creare una variabile in single.md che includa il contenuto del file introduction.md utilizzando la seguente sintassi:

{% capture introduction_content %}
{% include_relative introduction.md %}
{% endcapture %}

• Inserire la variabile all’interno del layout one-column.html:

{% include one-column.html dimension="small" content=introduction_content %}

• Inserire le 4 righe di codice appena scritte all’interno del file single.markdown nel punto della pagina in cui si vuole visualizzare il paragrafo.
• Il layout one-column.html è stato creato per visualizzare un solo paragrafo di testo all’interno di una pagina. Questo layout si trova all’interno della cartella _includes

N.B. Il layout one-column.html accetta due parametri:

• dimension: accetta il valore: small. Questo valore definisce la suddivisione della griglia bootstrap secondo lo schema col-md-8 col-offset-2. Questo valore è stato scelto per visualizzare il paragrafo in una colonna centrata all’interno della pagina e garantisce una buona leggibilità del testo.
• container: accetta il valore: fluid. Questo valore definisce la larghezza del contenitore in cui è inserito il paragrafo. Il valore fluid permette di visualizzare il paragrafo a tutta larghezza della pagina e si adatta a grafici complessi.

Modal

Alla fine del paragrafo introduttivo è presente un bottone che apre un modal. Questo bottone è stato creato utilizzando il componente modal-component-intro.html che si trova all’interno della cartella _includes. Per richiamarlo è necessario fare le seguenti operazioni:

• Creare la variabile per includere il contenuto del modal che si trova all’interno di un file.md:

{% capture dataset_details %}
{% include_relative dataset-details.md %}
{% endcapture %}

• Includere lo snippet di codice seguente dove si vuole visualizzarlo (nell’esempio all’interno del file introduction.md):

{% include modal-component-intro.html title="Dettagli del dataset" content=dataset_details %}

• title="Dettagli del dataset" è il testo visualizzato nel bottone che apre il modal.
• size= è la dimensione del modal. Può essere sm, Default, lg, xl.
• img= è l’immagine visualizzata sopra il bottone, utilizzabile anch’essa per aprire il modal (opzionale).

Chart

Per inserire il chart è necessario utilizzare il tag <vegachart> e specificare il percorso del file json contenente lo schema del grafico. Il chart è stato inserito come contenuto nel file chart-timeline.md e richiamato con il componente one-column.html

Per ulteriori dettagli su come incorporare un chart all’interno di una pagina, fare riferimento alla pagina Charts.

Nella sezione qui sopra ci sono differenti esempi di componenti che possono essere utilizzati per realizzare una pagina web.che

Cards Gallery: una galleria di immagini realizzata partendo da un file di dati in formato YAML. Ogni immagine è rappresentata da una card con un’immagine, un titolo e una descrizione.

{% include img-gallery-cards.html width='23%' datasource=site.data.img-selector url='url' name='name' description='description' %}

I parametri accettati da questo componente sono:

• width: la larghezza della card in percentuale.
• datasource: il nome del file YAML contenente i dati.
• url: il campo del file YAML contenente l’URL dell’immagine.
• name: il campo del file YAML contenente il titolo dell’immagine.
• description: il campo del file YAML contenente la descrizione dell’immagine.

Image selector: un selettore di immagini realizzato partendo da un file di dati in formato YAML. Si tratta di un elenco di pulsanti che cambiano l’immagine nel div accanto.

{% include img-selector.html dataset="img-selector" button_name="name" url="url" %}

I parametri accettati da questo componente sono:

• dataset: il nome del file YAML contenente i dati.
• button_name: il campo del file YAML contenente il testo del pulsante.
• url: il campo del file YAML contenente l’URL dell’immagine.

Chart selector: un selettore di grafici realizzato partendo da un file di dati in formato YAML. Si tratta di un elenco di pulsanti che cambiano il grafico nel div sottostante.

{% include chart-selector.html dimension="small" dataset="chart-selector" %}

I parametri accettati da questo componente sono:

• dimension: la dimensione del grafico. Può essere small.
• dataset: il nome del file YAML contenente i dati.

Modal

Questo sopra è un altro esempio di modal in cui è viene utilizzata una immagine per aprirlo (specificando il parametro img). Rispetto al precedente è stata cambiata la dimensione del modal in xl. Attenzione ad assegnare id differenti a differenti modal.