I contenuti del sito

Sommario:
Questa pagina e` una continuazione della guida Come creare un sito da zero

Ora che avete imparato a creare le pagine, vediamo come inserire i vari contenuti..

Le immagini:

Per prima cosa, dovete creare una cartella, all'interno della cartella del sito, in cui mettere tutte le immagini utilizzerete. Anzi, meglio ancora se create due cartelle, naturalmente con nomi diversi, per esempio una cartella "img" e una cartella "immagini". Nella prima potete mettere tutte le immagini che fanno parte della grafica del sito, mentre nella seconda metterete le immagini che servono per i contenuti. Ricordatevi che l'ordine e la precisione sono indispensabili per un buon lavoro.
Tutte le immagini, prima di essere caricate, dovranno essere ridimensionate e compresse. La dimensione, in pixel, dovrà essere quella sufficiente e necessaria al risultato che si vuole ottenere. È inutile caricare immagini troppo grandi e pesanti. Oltre a ciò le immagini vanno compresse. La compressione, se fatta con un buon programma, non incide sulla qualità. Vi consiglio questi programmi: "Riot", per Windows e Image Optim. per Mac

La compressione delle immagini è molto importante per la velocità del sito e dovete effettuarla su tutte le immagini dalle più piccole alle più grandi.

Quando le immagini saranno pronte e messe nella loro cartella, dovrete collegarle alla pagina nella quale devono apparire.
La stringa da usare è la seguente :

<a href="URLcollegamento" target="_blank"><img src="URLimmagine" alt="Descrizione" title="Titolo"><a />

(Naturalmente, non è indispensabile mettere un collegamento, ma "pare" che anche questo possa favorirne l'indicizzazione.)

Il tag "alt" serve ad inserire la descrizione dell'immagine per i motori di ricerca.

Il tag "title" serve ad inserire il titolo dell'immagine ed ha anch'esso importanza per i motori di ricerca, se pur minore.

Il tag  target="_blank" fa aprire il link in una nuova scheda del browser. Se non volete questo, potete toglierlo.

Importante: scrivete il nome delle immagini in lettere minuscole e senza spazi vuoti. Se il nome contiene più parole, queste possono essere separate da trattini.

Es: gita-al-mare.jpg

Per una semplice galleria di immagini, potete consultare la guida: Semplice galleria di immagini con lightbox

Tag "Alt" e tag "Title" approfondimento:

Tutti e due i tag hanno una loro funzione e il consiglio è di implementarli entrambi.
Il tag Alt, specialmente, è fondamentale per l'indicizzazione e va sempre inserito. Descrive l'immagine in funzione del contesto e serve a mostrare un testo alternativo qualora l'immagine non venisse visualizzata.Viene utilizzato anche dagli screen-reader dei browser per le persone ipovedenti, tramite i quali viene letto ad alta voce. Il numero dei caratteri contenuti nel tag Alt non deve essere maggiore di 300. Il consiglio è di utilizzare una descrizione breve.
Il tag Title dovrebbe contenere il titolo dell'immagine a cui è attribuito e la sua importanza ai fini dell'indicizzazione non è chiara.
Molti sostengono l'equivalenza dei due tag e consigliano di inserire il medesimo contenuto in entrambi. Come ho detto, la questione è controversa. Una motivazione valida per inserirli tutti e due è data dal fatto che alcuni browser leggono il tag ALT e altri leggono il tag TITLE. La lettura dei tag, sempre a livello di browser, permette di visualizzare il contenuto del tag stesso in un tooltip quando si passa il mouse sopra l'immagine.
Omettendo i tag, qualora l'immagine non venisse visualizzata, in alcuni browser apparirebbe, al suo posto, una antiestetica casellina bianca.

Esempio di implementazione:

<img src =" URLimmagine " alt ="Contenuto del tag alt" title="Contenuto del tag title"/>

Il testo e il font:

La prima cosa da dire è che l'HTML è un linguaggio e come tale ha una sua ortografia. Per scrivere correttamente in HTML senza commettere errori, la cosa più semplice è utilizzare un editor. Potete scaricarlo, o utilizzarlo online, ma la cosa importante è che sia aggiornato. Personalmente, utilizzo questo editor professionale:

https://github.com/froala/wysiwyg-editor

Utilizzabile anche online:

https://www.froala.com/online-html-editor

Potete trovare alcune indicazioni sulla scrittura leggendo la guida: Scrivere in html.

La dimensione del font può essere stabilita in pixel, o in em, o in rem (o anche in percentuale, ma non lo esaminerò in questa guida). I pixel sono una dimensione assoluta, mentre em e rem sono dimensioni relative e consentono di stabilire relazioni tra le dimensioni dei contenitori. Dopo aver stabilito il tipo di font (leggi anche: Il font), una buona soluzione può essere quella di impostare, nel foglio di stile, la dimensione di base del testo, fissa, in pixel, nel body.

Es: body {font-size: 16px}

Per poi definire, se necessario, le dimensioni del testo per i contenitori specifici utilizzando em, o rem.

Es: div {font-size: 2.0em;}, oppure: div {font-size: 2.0rem}

Differenza tra em e rem:

Utilizzando gli em, la dimensione del font dell'elemento figlio viene calcolata in rapporto alla dimensione del font del contenitore genitore più prossimo e non in rapporto a quella dell'elemento contenitore di base. Tale dimensione, quindi, subirà variazioni secondo il grado di annidamento dei vari elementi.
I rem hanno le stesse caratteristiche degli em, ma fanno sempre riferimento al valore dell'elemento principale (per es il body). La dimensione del font (dipendentemente dal valore dato) rimane, quindi, costante negli elementi annidati, perchè il valore del font-size non viene calcolato sulla base della dimensione ereditata dal suo genitore, ma viene calcolato sulla base delle dimensioni del font dell'elemento di base.

I link:

I link devono essere inseriti usando questa stringa: <a href="https://www.lachiavenelpozzo.com">La chiave nel pozzo</a>

Naturalmente sostituirete i dati del mio sito con i vostri.
È importante, però, anche aggiungere alcuni tag quando si tratta di link che portano a pagine esterne, che non si trovano nel dominio del vostro sito, ma in un altro dominio. Vediamoli:
  • target="_blank"
  • rel="nofollow"
  • rel="nofollow noopener noreferrer"

Il tag target="_blank" ordina al browser di aprire il collegamento in una nuova scheda. Questo è importante al fine di non allontanare il visitatore dal sito.
Il tag rel="nofollow noopener noreferrer" assembla tre comandi insieme. Esaminiamoli:

Il comando "nofollow"  comunica ai motori di ricerca di non seguire quel determinato  link. È consigliato utilizzarlo per tutti i link in uscita esclusi quelli verso siti autorevoli*, perchè se i motori di ricerca (Google in primis)  dovessero sospettare che sul vostro sito possa esserci un "commercio" di link al  fine di influenzare la serp, potreste essere pesantemente penalizzati.
Il comando "noopener" serve a proteggere i link in uscita in cui è inserito il target=”_blank”, per evitare il phishing (per info sul phishing: Wikipedia).
Il comando "noreferrer" indica ai motori di ricerca di non trasmettere i dati relativi alla fonte dalla quale deriva il collegamento. Inviando traffico dal proprio sito ad un altro attraverso un link, si da la possibilità di identificare anche il sito di origine (cioè il nostro) e questo favorisce il fenomeno dei “Ghost” **.
NOTA: aggiungere il tag noreferrer ai link dei servizi di affiliazione potrebbe impedire il tracciamento dei dati necessari ai conteggi.

Ricordate che i lnk esterni vanno sempre segnalati affinchè il visitatore sappia che sta lasciando il vostro sito sotto la sua responsabiltà.

* Per siti autorevoli si intendono i siti di grande e affermata reputazione, linkando i quali non penalizzate il vostro sito, ma, anzi, gli conferite valore e guadagnate in posizionamento. Qui trovate la lista dei siti web più autorevoli: http://www.alexa.com/topsites.

** Un referrer è la fonte della pagina da cui, tramite collegamento, un utente arriva su una pagina web appartenente ad un altro sito. Il referrer può essere modificato da persone che vogliono aumentare il traffico su determinati siti.
Ciò si chiama "referrer spam" ed è, naturalmente, un'attività illegale che deve essere ostacolata.
I nuovi referrer spammer vengono chiamati "Ghost", perchè non si trovano realmente nel sito "vittima", ma, semplicemente, ne utilizzano l'ID di monitoraggio di Google Analytics inserendolo in pagine estranee.
Oltre ad utilizzare il tag sopra indicato, in rete trovate molte guide utili per la configurazione di Google Analytics contro i Ghost.



Potete trovare altri consigli e guide utili per i contenuti del vostro sito leggendo la guida "Cose utili per il sito web" e gli altri argomenti correlati.






Fammi sapere se questo argomento ti è stato utile.
Se non ti è stato utile, potrai inviare le tue osservazioni. Grazie
Ti è stato utile questo argomento?
Si
No



Continua con: Come includere contenuti tramite file esterni

Elenco argomenti di questa guida:
Torna alla pagina principale:Creare un sito da zero ->>


E molto altro ancora se leggi:
Tutti gli argomenti