Come progettare e disegnare un sito web? Come creare e pubblicare su Internet un sito web, per renderlo disponibile ad altri utenti? In questo articolo vediamo di spiegarlo, se pur in maniera veloce e introduttiva.
Se non l’hai già fatto, ti consigliamo di leggere i nostri due articoli primi cenni sul web e primi cenni di reti.

Web design

Prima di procedere con la creazione effettiva di un sito web, bisogna investire del tempo nella progettazione e nel design del sito web.
Progettazione e design possono ad esempio includere

  • l’analisi dei competitor:
    • si identificano i propri concorrenti (ossia le aziende che appartengono al tuo stesso mercato, si rivolgono agli stessi clienti, offrono servizi o prodotti simili ai tuoi)
    • si valutano i contenuti dei loro siti, i servizi online offerti, il cosiddetto look&feel (ossia il design e le sensazioni che il sito ci comunica e ci lascia dopo averlo visitato, in termini di usabilità e non solo)
  • la mappa dei contenuti: spesso in forma di mappa concettuale, mostra le informazioni chiave che si vogliono comunicare attraverso il sito
  • la mappa del sito: a volte generata (automaticamente) solamente dopo la realizzazione del sito, mostra schematicamente le varie pagine web, di cui si riconosce solo il titolo, mettendo in evidenza i collegamenti fra le pagine stesse e i collegamenti verso l’esterno
  • il wireframe: ogni pagina del sito viene disegnata (schematicamente, senza colori e con dei segnaposto dove dovrebbero esserci le immagini o i blocchi di testo), così da porre l’enfasi sul layout (ossia sulla disposizione) degli oggetti nella pagina
  • il mockup: ogni pagina viene disegnata come poi sarà visibile sul browser (ossia con font, colori, effetti, mentre i testi di norma non sono inseriti e al loro posto compaiono sequenze casuali di parole e le immagini possono essere sostituite da immagini casuali)
  • la demo navigabile: vengono montati sul mockup testi e immagini, anche se non definitivi, così da mostrare esattamente il risultato finale, a meno delle ultime modifiche; il sito non è ancora online o, se lo è, è in un’area di test non pubblica

A volte, per lo più per ragioni di budget limitato, non vengono effettuate una o più fasi della lista precedente. Eppure sono occasioni molto importanti, nel loro insieme, per ragionare su

  • information design, ossia come preparare le informazioni da presentare
  • information architecture, ossia come presentare le informazioni da comunicare
  • user interface (UI) design, ossia di tutti gli oggetti grafici con cui l’utente interagirà
  • user experience (UX) design, ossia più in generale dell’intera esperienza che l’utente può avere nell’utilizzo del sito web

Inoltre non vanno dimenticate:

  • l’usabilità, ossia la misura della facilità e della soddisfazione con cui un utente porta a termine quanto si era prefisso di fare mediante il sito web
  • l’accessibilità, ossia la facoltà di utilizzo completo del sito web e dei suoi servizi da parte di ogni categoria di utenti, con particolare attenzione alle persone diversamente abili

Creare un sito web

Esistono diverse alternative per creare un sito web, come ad esempio

  • scrivere direttamente il codice in HTML e CSS:
    • l’HTML (HyperText Markup Language) è un linguaggio che permette di qualificare con dei tag parti di testo, per poi visualizzarle su una pagina web assieme a immagini e altri contenuti multimediali, e a collegamenti (link) che contraddistinguono gli ipertesti rispetto ai normali testi;
    • il CSS (Cascade Style Sheet) è un linguaggio che permette di definire le informazioni che riguardano il layout ed altri aspetti grafici e di impaginazione a cui si possono riferire una o più pagine web
  • utilizzare un software di web authoring: si tratta di software che permettono di generare codice HTML e CSS senza dover conoscere questi due linguaggi (come ad esempio Adobe Dreamweaver), consentendo notevole libertà nel design e nel layout del sito che si sta realizzando

I siti web possono essere creati da zero oppure a partire da modelli, detti template, i quali si possono scaricare da Internet, gratuitamente o a pagamento.

Inoltre è possibile utilizzare un CMS (Content Management System): permette anch’esso la creazione di siti web senza conoscere HTML e CSS, ma di norma all’interno di template predefiniti, detti temi. La particolarità dei CMS (WordPress è un CMS fra i più diffusi) è la possibilità di modificare velocemente immagini e testi e di aggiungere pagine o articoli: difatti sono nati per gestire i blog.
Utilizzare un CMS permette di aggiornare molto rapidamente i siti web, ma non bisogna dimenticare

  • di scegliere una password veramente robusta
  • di mantenere costantemente aggiornato il CMS, gli eventuali plugin e il tema
  • di mantenere costantemente aggiornato il sistema che ospita il proprio sito web

Questo perché alcuni CMS sono molto diffusi e questo attira le attenzioni di malintenzionati che cercano sempre nuove vulnerabilità per penetrarne le difese.

Pubblicare un sito web

Una volta creato un sito web, si ha a disposizione una serie di pagine, contenute in diversi file e raggruppate in una o più cartelle sul proprio file system.
Per pubblicare il sito in Internet è necessario prima di tutto disporre di uno spazio sul web. Si tratta del servizio di hosting che dà accesso ad un’area dove depositare i propri file e cartelle, per renderli pubblici.
Inoltre è possibile registrare un dominio, così da associare un indirizzo del tipo www.nomesito.it alla homepage del nuovo sito.
Per effettuare la pubblicazione vera e propria è necessari disporre di un client FTP (o SFTP o SSH) in cui inserire i dati del server (indirizzo e porta) e dell’utente (user e password) in maniera da poter scrivere sulla cartella remota.
Il client FTP (o SFTP o SSH) potrebbe essere integrato nel software di web authoring.
In caso di utilizzo di un CMS invece tutto questo non è necessario: l’interfaccia difatti permette di inserire, aggiornare, eliminare le pagine web direttamente dal CMS, senza dover usare altri programmi.

Browser e responsive design

Nella realizzazione di un sito web vanno definite:

  • la compatibilità del browser, ossia con quali browser e con quali versioni degli stessi sarà possibile vedere le pagine web del sito senza rischio di non visualizzarle correttamente; esistono software appositi per verificare la compatibilità dei vari browser, senza necessità di installarli sul proprio PC;
  • la compatibilità con dispositivi diversi (desktop, tablet, smartphone), ossia con quali dispositivi sarà possibile vedere le pagine web del sito senza rischio di non visualizzarle correttamente; i siti che “si adattano” ad ogni dispositivo sono detti responsive.

Lavorare nella progettazione, design e sviluppo web

Esistono oggi numerosissime nuove professioni digitali, molte delle quali sono legate a Internet e anche al web. Tante di queste le trovi elencate nel nostro articolo Professioni digitali: la famiglia del Development, fra i profili riferiti al Digital Media Specialist.

Immagine di picjumbo.com da Pexels Foto di picjumbo.com: