Al giorno d’oggi, creare un sito web è ormai alla portata di tutti: con qualche conoscenza di base e un po’ di fantasia, infatti, chiunque ci può riuscire.
Tuttavia, la maggior parte dei blog e degli strumenti utili alla creazione di un sito includono inglesismi, sigle e “paroloni” poco comuni nel quotidiano.
E dato che anch’io utilizzo alcuni di questi tecnicismi nei miei articoli, non potevo non scrivere qualcosa a riguardo — anche perché so bene quanto sia noioso cercare su Google il significato di ogni parola…
Dunque, in questo articolo, non solo ti elencherò i 19 termini tecnici — relativi al design e alla creazione di siti web — più comunemente utilizzati, ma, per alcuni di essi, ti mostrerò anche i termini derivati e/o strettamente legati.
Termini tecnici sito web: la lista completa dei 19 termini che dovresti conoscere
HTML
Iniziamo questa lista con uno dei termini più importanti per quel che riguarda la progettazione web, ovvero “HTML”.
Dunque, HTML è un acronimo che sta per “Hyper Text Markup Language — Linguaggio a marcatori per ipertesti”. Si tratta di un linguaggio di programmazione nato alla fine degli anni ’80 che, col passare del tempo, è diventato un vero e proprio standard nella creazione di siti e pagine web.
Volendo semplificare al massimo il concetto, potremmo dire che l’HTML rappresenta lo scheletro (o le fondamenta) di un sito. Preso da solo, infatti, l’HTML si presenta molto “grezzo” graficamente parlando, anche se è comunque possibile effettuare personalizzazioni in linea tramite il tag “style”.
Ad ogni modo, senza entrare in questioni troppo complesse, ti basti sapere che l’HTML è ciò che consente di creare e strutturare tutti gli elementi presenti in un sito web, come i testi, i link, i pulsanti, le immagini, ecc.
<!-- HTML -->
<div class="genitore">
<div class="figlio-1">
<p class="testo">
#000000
</p>
</div>
<div class="figlio-2">
<p class="testo">
#f5f5f5
</p>
</div>
</div>
#000000
#f5f5f5
CSS
Nessun sito web è completo senza una buona dose di CSS…
Il “Cascading Style Sheets — Fogli di stile a cascata” è un linguaggio web subordinato all’HTML, nato ufficialmente nel 1996 allo scopo di definire lo stile e la formattazione di quest’ultimo.
Ma qual è la differenza tra HTML e CSS?
Semplice: con il primo, si può tranquillamente creare un sito completo e funzionante — mentre con il secondo, invece, non è possibile farlo in alcun modo (proprio perché si tratta di un linguaggio di stile che funziona solo in presenza dell’HTML).
Non c’è molto altro da dire sul CSS se non che, da esso, discendono i cosiddetti “preprocessori CSS”, ovvero:
- SASS
- LESS
SASS e LESS sono in pratica quasi uguali, ma il SASS consente 2 diverse tipologie di sintassi:
- SASS — noto anche come “sintassi indentata”;
- SCSS — molto più simile al CSS.
Comunque sia, non preoccuparti: per creare un sito web bastano davvero pochi strumenti (e nessuno di questi prevede la conoscenza approfondita di HTML, CSS o JS).
<!-- HTML -->
<div class="genitore">
<div class="figlio-1">
<p class="testo">
#000000
</p>
</div>
<div class="figlio-2">
<p class="testo">
#f5f5f5
</p>
</div>
</div>
<!-- Il tag <style> permette di inserire il CSS direttamente all'interno del file HTML. In questo caso, ho importato il font "Sora" di Google -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');
</style>
/* CSS */
.genitore {
display: flex;
gap: 24px;
}
.figlio-1, .figlio-2 {
width: 100%;
padding: 24px 0;
text-align: center;
border-radius: 10px;
}
.figlio-1 {
background-color: #000;
color: #fff;
}
.figlio-2 {
background-color: #f5f5f5;
color: #000;
border: 1px solid #ddd;
}
.testo {
font-family: 'Sora', sans-serif;
font-size: 14px;
}
#000000
#f5f5f5
JS
C’è chi lo ama e c’è chi lo odia…
Personalmente, il JavaScript a me fa impazzire: si tratta di un linguaggio di scripting — nato dall’idea di Brendan Eich — che “traduce” la sintassi inglese in codice macchina (quest’ultimo è quello che viene eseguito dal browser).
Il JS è ciò che rende possibile azioni come l’apertura e la chiusura dei menu, ma anche tutta una serie di animazioni ed effetti “complessi” che richiedono l’interazione dell’utente.
In generale, possiamo dire che il JavaScript garantisce un’esperienza d’uso coinvolgente e di altissima qualità, grazie a un livello di flessibilità e dinamismo senza pari, nonché a un alta gamma di costrutti condizionali e personalizzazioni che, nel CSS e nelle sue varianti, vengono meno.
Inoltre, dal JS derivano tutta una serie di librerie dedicate a funzioni specifiche, come ad esempio:
- jQuery e Umbrella JS — utilizzati per “manipolare” il contenuto, lo stile e la struttura del Document Object Model (DOM);
- Anime.js e JSTweener — sfruttati per aggiungere animazioni e interazioni che rendono la pagina web più dinamica e interattiva;
- ReactJS e Glimmer.js — librerie in grado di migliorare l’esperienza utente, rendendo il sito più reattivo, coinvolgente e dinamico;
- Typeface.js — libreria molto utilizzata per l’installazione e la gestione dei font (qualunque essi siano).
Queste sono solo alcune delle infinite librerie JavaScript disponibili.
Non mi soffermerò sui framework JS — ovvero tutte quelle applicazioni che permettono di manipolare il codice per adattarlo a esigenze specifiche — in quanto ci addentreremmo in un discorso più complesso e articolato.
<!-- HTML -->
<div id="visibile">
Clicca qui
</div>
<div id="nascosto">
Testo nascosto :)
</div>
<!-- Il tag <script> permette di inserire il JavaScript direttamente all'interno del file HTML. In questo caso, ho implementato le librerie di jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
//JavaScript (jQuery)
$(document).ready(function() {
$('#visibile').click(function() {
$('#nascosto').slideToggle('fast');
});
});
/* CSS */
#visibile, #nascosto {
padding: 6px;
text-align: center;
border: solid 1px #000;
}
#visibile {
background-color: #000;
color: #fff;
}
#nascosto {
background-color: #f5f5f5;
color: #000;
padding: 18px;
display: none;
}
Hosting
La prima cosa da fare per creare un sito web, è scegliere un hosting — ma di cosa si tratta esattamente?
Ebbene, un hosting (o web hosting) è una sorta di hard-disk che ospita tutti i dati e i contenuti di un sito — e permette a quest’ultimo di essere raggiunto dagli utenti tramite i vari motori di ricerca (Google, Bing, DuckDuckGo, ecc.).
Ad oggi, esistono centinaia di servizi di hosting, ognuno con il proprio mercato, le proprie caratteristiche e, ovviamente, i propri prezzi: ne esistono di “gratis” e di eccessivamente cari, ma non tutti sono degni di esser presi in considerazione (e non tutti sono realmente validi)…
A tal proposito, ho già scritto un articolo in cui, oltre a elencare le 3 caratteristiche principali che contraddistinguono un buon servizio di hosting, ti mostro anche qual è la scelta migliore del 2022 (spoiler — non è SiteGround).
Dominio
Hosting e dominio sono strettamente legati tra loro ma, mentre il primo si occupa di ospitare il sito web, il secondo si occupa di “identificare” quest’ultimo.
Detto in termini più semplici, se il tuo sito fosse la casa in cui abiti, allora il dominio corrisponderebbe esattamente al tuo indirizzo abitativo…
In termini tecnici, invece, al dominio corrisponde l’indirizzo IP univoco del sito web, ovvero una sequenza di numeri del tipo “192.168.1.1”.
Tanto per fare un esempio, questo è il dominio del mio sito web:
Come scegliere un dominio efficace per il proprio sito?
Di questo e tanto altro, ne ho già parlato in un articolo dedicato alle 5 + 3 risorse indispensabili per creare un sito web da zero, autorevole e performante…
SSL
SSL, ovvero Secure Sockets Layer, è un certificato digitale che si occupa di:
- Autenticare l’identità di un sito web;
- Instaurare una connessione criptata (e cioè sicura).
In pratica, si tratta di un protocollo di sicurezza che crea un collegamento sicuro tra il server web (hosting) e il browser, garantendo così la sicurezza e la riservatezza delle informazioni fornite dagli utenti (incluse le transazioni).
Per capire se un sito web utilizza SSL, ti basta osservare l’icona presente a sinistra della barra degli indirizzi del browser. Se compare un lucchetto chiuso (o di colore verde), allora il sito web è sicuro, proprio come nell’esempio qui sotto:
Al contrario, se il sito che stai visitando non possiede un certificato SSL, allora comparirà un messaggio di questo tipo:
In breve, quindi, SSL protegge la tua connessione a internet e impedisce ai malintenzionati di accedere, modificare o rubare le informazioni che immetti nei siti web che visiti.
C’è da dire comunque che, ad oggi, la maggior parte dei siti web utilizza TLS, ovvero una versione “corretta” e riprogettata di SSL — ma l’acronimo “SSL” è comunemente utilizzato per fare riferimento sia all’una che all’altra versione del certificato.
CDN
Il Content Delivery Network, generalmente abbreviato in CDN, fa riferimento a una rete di server distribuiti geograficamente, il cui scopo è quello di trasferire velocemente tutte le risorse necessarie al caricamento di un sito.
Una CDN correttamente configurata, inoltre, consente di proteggere i siti web dagli attacchi hacker (come gli attacchi DDoS, ad esempio), ragion per cui aziende del calibro di Meta, Amazon e Netflix, non ne sono sprovviste.
Il fornitore n.1 di servizi CDN è CloudFlare.
UI / UX Design
Per riuscire a creare un sito web professionale e accattivante, è importante avere qualche conoscenza di base in fatto di UI e UX Design — ma che cosa stanno a indicare questi 2 termini?
UI Design
Dunque, il termine UI sta per “User Interface — Interfaccia utente” e, molto banalmente, comprende il modo in cui un sito web si presenta agli utenti, soprattutto dal punto di vista visivo.
Progettare l’UI di un sito, quindi, vuol dire studiare con dovizia di particolari tutti gli elementi grafici di cui si compone l’interfaccia, come i pulsanti, i font, le icone e via dicendo…
Il fine ultimo dell’UI Design?
Facile: aiutare gli utenti a trovare ciò che più gli preme in modo semplice, veloce e intuitivo, grazie a una comunicazione visiva appositamente studiata per esaltare i propri valori, il proprio stile e, ovviamente, il proprio brand.
UX Design
L’UX Design (ovvero la progettazione della “User Experience — Esperienza d’uso”), invece, è quell’ambito che si occupa di rendere più facile e intuitiva sia la navigazione che la consultazione delle pagine di un sito.
Si tratta di una “disciplina” molto più complessa e variegata dell’UI Design — questo perché affonda le sue radici in ambiti molto diversi tra loro, a partire dalle questioni di marketing fino ad arrivare allo studio della psicologia…
Ma la UX si rivela fondamentale soprattutto nei processi di acquisto: grazie agli studi volti a migliorare l’usabilità, infatti, tali processi vengono ottimizzati per diventare più semplici da completare (ad esempio, riducendo il numero di click necessari per compiere un azione — o eliminando gli elementi a schermo che distolgono l’attenzione dell’utente).
Ci sarebbe tanto altro da dire sull’UX Design…
Ad ogni modo, si tratta senza dubbio di uno degli aspetti tecnici più importanti da considerare in un sito web, poiché è proprio da esso che dipende, tra le altre cose, la soddisfazione degli utenti.
Responsive
Con il termine “responsive”, ci si riferisce al modo in cui viene visualizzato un sito web sui vari dispositivi (desktop, tablet, smartphone, ecc.).
Quando un sito è dotato di layout responsive, significa che è stato progettato per offrire un’esperienza d’uso ottimale su qualunque dispositivo, grande o piccolo che sia…
Rendere responsive un sito, vuol dire adattare tutti gli elementi presenti nella pagina web affinché — e questo vale a prescindere dalle dimensioni dello schermo — siano visualizzati nel modo più congeniale possibile.
Il mio sito ad esempio, non solo è dotato di layout responsive, ma è stato progettato a partire dalla versione mobile (per poi essere adattato anche agli schermi più grandi).
Header & Footer
Si tratta di 2 elementi che, pur condividendo la maggior parte delle loro caratteristiche, differiscono in quanto al posizionamento…
Header
L’header altro non è che la parte superiore di un sito web, ovvero quella sezione che contiene il logo e il menu di navigazione. Tanto utile quanto sottovalutato, l’header è una delle prime cose che salta all’occhio degli utenti, in quanto immediatamente visibile al caricamento della pagina.
Per quanto concerne l’UX, esistono 2 tipologie differenti di header, ossia:
- Header sticky, fixed o fisso (che dir si voglia);
- Header a scorrimento.
La differenza tra i 2 è che il primo resta visibile anche dopo lo scorrimento (come accade nel sito web di Apple), mentre il secondo, invece, “scorre” letteralmente via (come accade nel mio sito).
Footer
Il footer, invece, è la parte più bassa presente in un sito — considerabile come una sorta di “ultima spiaggia” — utile a dissuadere gli utenti dall’abbandonare prematuramente la pagina.
Difatti, il footer rappresenta l’ultima opportunità per collegare la pagina ad altri contenuti del sito (o per fornire informazioni supplementari altrimenti non disponibili nello spazio sovrastante).
Ma se già l’header, da molti, viene bollato come un elemento di poca rilevanza, per il footer la situazione è ancora più grave, poiché in certi casi non viene neanche progettato…
Sitemap
Tra i termini tecnici più comuni di un sito, figura anche la parola “sitemap”, che tradotto significa “mappa del sito”.
Essenzialmente, si tratta di una pagina che nasce allo scopo di “comunicare” ai motori di ricerca quali contenuti sono presenti in un sito web — cosicché possano essere indicizzati tra i risultati di ricerca — ma non solo…
Il mio sito, infatti, possiede 2 diverse sitemap:
- Sitemap 1 — accessibile dal footer e creata appositamente per servire i miei utenti (e non Google);
- Sitemap 2 — creata appositamente per Google.
CMS
Un Content Management System, spesso semplicemente abbreviato in CMS, è un software che permette a chiunque — soprattutto a chi non possiede le conoscenze tecniche — di creare un sito web.
Se fino a qualche decennio fa era indispensabile conoscere a fondo HTML, CSS e JS per creare un sito, oggi, grazie ai CMS, l’unico ostacolo da superare riguarda la curva d’apprendimento del software stesso…
Il CMS più famoso in assoluto è WordPress, noto per essere leggero, super ottimizzato e per di più gratuito, ma ne esistono di tanti altri.
C’è un “ma” enorme, però: di WordPress ne esistono 2 versioni, ovvero una versione “buona” e una decisamente “cattiva”. Se ti interessa approfondire la cosa, sappi che ne ho parlato in un paragrafo dedicato di questo articolo.
Tema
Quando si parla di tema, ci si riferisce generalmente a un “tema WordPress”, ovvero a quell’elemento artefice dell’aspetto visivo di un sito web.
Detto in parole povere, un tema è una sorta di pacchetto che, al suo interno, include elementi di stile (CSS), codice JS e tanto altro materiale in grado di cambiare l’UX e la veste grafica: in base al tema scelto, infatti, lo stesso sito avrà un aspetto grafico totalmente differente.
Si tratta di un elemento indispensabile per creare un sito web con WordPress e, a seconda del caso, potrebbe essere gratuito oppure no. Il tema del mio sito ad esempio — Hello Theme — è disponibile gratuitamente; tuttavia, per poter funzionare, ha bisogno di una specifica “condizione” (tra un paio di paragrafi ne saprai di più).
Template
Esiste una differenza molto sottile tra tema e template: il primo, come abbiamo visto, riguarda l’aspetto generale del sito — mentre per quanto riguarda il secondo, invece, la questione è leggermente più tecnica.
Dunque un template, generalmente, è un insieme di pagine (o “blocchi”) pre-costruite che, ereditando le impostazioni stilistiche del tema — come il tipo di font, l’aspetto dei link e dei pulsanti, lo stile del testo e delle intestazioni, ecc. — ha il ruolo di facilitare gli utenti nella costruzione del proprio sito.
Difatti, esistono 2 tipologie di temi:
- Tema “vuoto” — come il già citato Hello Theme;
- Tema “pre-impostato” — ovvero un tema con all’interno vari template che, l’utente, non deve far altro che modificare a seconda delle proprie necessità.
Se ancora non ti fosse chiara la differenza tra tema e template, ti invito a confrontare questo sito con il mio: entrambi utilizziamo il tema “Hello Theme”, ma, come avrai modo di vedere tu stesso, il layout, lo stile e i relativi contenuti differiscono totalmente…
Questo perché un tema “vuoto”, a differenza di un “pre-impostato”, per funzionare ha bisogno di un template già pronto all’uso (scaricabile gratuitamente o a pagamento dai vari fornitori) oppure, come nel mio caso, della creazione di un template personalizzato.
Ora che conosci la differenza tra tema e template, ti invito a dare un’occhiata a “Breakthrough”.
Si tratta di un template che ho creato per mostrarti come dovrebbe essere costruito il sito web di un fotografo ritrattista.
Ti avviso già che, all’interno di Breakthrough, troverai un “piccolo” regalo (disponibile solo per pochi e per un periodo limitato).
Plugin
Out of the box, come si suol dire, WordPress non presenta chissà quante funzionalità — tuttavia, trattandosi di un software completamente open source, è possibile installare degli appositi “pacchetti” (disponibili anche gratuitamente) per integrare funzioni specifiche…
Tali pacchetti prendono il nome di plugin — e ne esistono davvero di ogni tipo: a partire da quelli che aumentano le performance del sito fino ad arrivare a quelli che consentono di gestire i pagamenti online, di creare un forum, di integrare un’area membri e così via.
Page Builder
Tra tutti i termini tecnici di un sito web, “Page Builder” è quello che più getta in confusione i nuovi utenti.
Iniziamo con una semplice definizione: un Page Builder è un plugin che permette a chiunque di costruire un sito web professionale, anche senza avere conoscenze di base in fatto di programmazione web.
Si tratta di un editor visuale che, nel più dei casi, presenta un’interfaccia di tipo “Drag & Drop — Trascinare e rilasciare” e dei controlli simili ai programmi di grafica (come Photoshop e Illustrator, per citarne un paio).
Di base, WordPress possiede già un editor proprietario — denominato Gutenberg — piuttosto ricco di funzionalità, ma decisamente poco elastico e “malleabile” (e questo è un problema non solo per il sottoscritto, ma per qualunque Web Designer).
Ecco perché, nel giro di pochi anni, Elementor si è affermato come il Page Builder n.1 per WordPress: difatti, a fronte di una semplicità a dir poco disarmante, consente di fare praticamente ogni cosa, senza la necessità di dover installare altri plugin esterni.
Elementor sprigiona il meglio di sé quando utilizzato insieme al già citato “Hello Theme”: neanche a farlo apposta, infatti, sia Elementor che Hello Theme sono stati realizzati dalla medesima azienda.
C’è solo un piccolo problema…
Come ho anticipato al termine di questo paragrafo, Hello Theme funziona solo in presenza di una specifica “condizione” — e cioè soltanto se abbinato alla versione a pagamento di Elementor (e non a quella gratuita).
Prima di storcere il naso, però, sappi che il costo annuale di Elementor Pro equivale a poco meno di un caffè a settima (anche se dovrebbe costare almeno il quadruplo per tutto quello che offre…).
Cookie
Detto in parole povere, i cookie sono piccoli file che vengono memorizzati nel dispositivo durante la navigazione di un sito web — e il loro scopo è quello di salvare le tue preferenze, migliorare le prestazioni dei siti web che visiti e fornirti la massima esperienza d’uso possibile.
Ciò detto, esistono 2 tipologie di cookie, ovvero quelli “essenziali” e quelli “non essenziali”…
Per quanto riguarda i primi, essi non vengono mai bloccati, poiché garantiscono il corretto funzionamento di un sito web e, proprio per questo, vengono chiamati anche “cookie tecnici”.
Tra i cookie non essenziali, invece, figurano soprattutto i cosiddetti “servizi di profilazione”, come la geo-localizzazione di Google, i servizi di condivisione dei Social Network e via dicendo.
Cache
Dunque la cache, detto in termini molto generali, altro non è che un sistema di memorizzazione dati che permette di incrementare — talvolta anche in modo significativo — la velocità di visualizzazione di un sito web.
Tra le altre cose, infatti, grazie alla cache è possibile addirittura visualizzare determinati siti web anche quando la connessione risulta assente — ma solo a patto che, i suddetti siti, siano già stati visitati in precedenza (e in un lasso di tempo relativamente breve).
L’applicazione più interessante del caching, però, riguarda il miglioramento delle performance generali del sito e, soprattutto, della velocità di navigazione degli utenti.
Il plugin WordPress d’eccellenza in ambito di performance, cache e tutto ciò che riguarda l’ottimizzazione di un sito web, è il famosissimo WP Rocket.
SEO
Ho lasciato questo termine per ultimo non perché sia meno importante degli altri, anzi: la SEO è un elemento più che fondamentale per il successo di un sito web, poiché è ciò che ne determina il posizionamento su Google.
Ma di cosa si tratta nello specifico?
Ebbene, la “Search Engine Optimization — Ottimizzazione per i motori di ricerca” è una pratica complessa che ambisce a:
- Posizionare un sito web quanto più in alto possibile tra i risultati di ricerca su Google (ottenendo così una sempre maggior visibilità);
- Rendere i contenuti scritti (come ad esempio gli articoli di un blog) più comprensibili per gli utenti, oltre che più elaborati ed esaustivi.
L’ottimizzazione della SEO, quindi, è fondamentale sia per soddisfare appieno gli utenti, sia per indicizzare correttamente il proprio sito, puntando a scalare sempre più il famigerato ranking (ovvero la posizione media nelle classifiche dei motori di ricerca).
Riuscire a ottenere un buon ranking, difatti, significa ottenere in automatico più visite e clienti, ma le strategie SEO sono molto complesse e a dir poco laboriose — ragion per cui, il mio consiglio resta sempre quello di affidarsi a un’agenzia competente nel settore.
Termini tecnici sito web: conclusioni
L’articolo di oggi finisce qui — ma, prima di salutarci, ti lascio come al solito tutti i link più rilevanti che ho citato nel corso dell’articolo:
Articolo — Il miglior hosting WordPress del 2022 (+ sconto)
Articolo — Le 5 + 3 risorse indispensabili per creare il tuo sito web
Breakthrough — Come dovrebbe essere il sito web di un fotografo ritrattista?
Per ogni perplessità, dubbio o chiarimento, lascia pure un commento e sarò più che felice di aiutarti. Se invece, avessi bisogno di una mano con il tuo progetto, ci tengo a ricordarti che per qualsiasi problema o evenienza, puoi sempre contare su di me.
Ti ringrazio per l’attenzione e ti auguro buon lavoro,
— Giovanni
