Creare un sito web - Il blog di Alessandro Stella

Come creare un sito web? Ci sono molti siti online che ci consentono di farlo gratis. Ma è davvero utile utilizzarli? Dipende da quale è il nostro obiettivo.

Creare un sito web può essere un’operazione molto semplice perché da molti anni si sono diffusi siti web che ci consentono di creare siti web. Proprio così 🙂 Può sembrare un gioco di parole, ma è esattamente quello che succede. Ci si collega su un sito, si sceglie la grafica, i titoli, la disposizione dei contenuti, si modificano i contenuti, si aggiungono le immagini e il sito produce per noi il nostro sito. Facile! E per di più è anche veloce!
Dobbiamo però porci una domanda: perché mai esistono persone che studiano per anni la programmazione web?

Se fosse tutto davvero così semplice… nessuno si sognerebbe di spendere anni della propria vita a studiare il modo di produrre un sito web quando lo si può produrre in modo del tutto automatico in… mezz’ora.
E allora?

DIPENDE DAGLI OBIETTIVI

Allora dipende dai nostri obiettivi.
Se il sito serve per comunicarlo a nostri amici o ai nostri clienti in modo che possano vedere cosa facciamo e non serve, invece, per acquisire nuovi clienti né per espandere i nostri contatti, allora è decisamente utile utilizzare gli strumenti online che consentono di produrre il sito in mezz’ora.
Se però vogliamo un sito che compaia nelle prime pagine dei risultati dei motori di ricerca quando una persona cerca quello che vendiamo e che sia utile a entrare in contatto con nuovi clienti, allora non è assolutamente indicato creare il sito con tali strumenti.
È chiaro che a questo punto dovrebbe sorgerci una domanda: perché?
La risposta è semplice: perché utilizzando gli strumenti di produzione automatica, non abbiamo alcun controllo sul codice e, di conseguenza, non potremo in alcun modo cambiare/migliorare l’indicizzazione del sito. Questo significa che i nuovi clienti non ci troveranno a meno che non paghiamo Google (o chi per lui) per comparire nei primi posti delle ricerche.
Quindi creiamo un sito gratuito, magari bellissimo, che però ci costringe a pagare bei soldini per renderlo visibile.
Mi sembra una ragione più che valida per evitare l’uso di tali strumenti, no?
Inoltre bisogna sapere che creare un sito web a mano, cioè scrivendo il codice invece di farlo scrivere da un sistema automatico, è un’operazione totalmente gratuita.

Ok, ti ho convinto, vuoi produrre il tuo sito da solo e gratuitamente.
Come di fa?

CREARE IL PROPRIO SITO WEB

Devo essere chiaro: creare un sito web da zero non è una cosa che si impara a fare in 10 minuti. Altrimenti varrebbe la stessa domanda che ci siamo posti all’inizio: perché mai ci sono persone che ci perdono anni di vita?
Tuttavia bisogna anche essere pratici: nella stragrande maggioranza dei casi serve un “sito vetrina” in cui mostrare il modo per entrare in contatto con noi e qualche immagine per mostrare quello che siamo capaci di fare. Non dobbiamo produrre super mega applicazioni web. In questo caso la complessità nella produzione del sito si riduce enormemente. Ed è di questo caso che ci occuperemo nel prosieguo di questo articolo.
Sei pronto?

Facciamo subito un bell’indice di quello che impareremo.

Gli strumenti di sviluppo [vai]
Il codice HTML e CSS [vai]
Vediamo i risultati in tempo reale [vai]
Compriamo un dominio [vai]
Pubblichiamo il sito su internet [vai]
Guardiamo il sito online [vai]
Conclusioni [vai]

Gli strumenti di sviluppo

Se abbiamo deciso di scrivere il codice per i fatti nostri, allora dobbiamo utilizzare IDE appositi. Un IDE è un software che ci aiuta nella scrittura del codice e per creare un sito web è opportuno il suo utilizzo. Sul mercato ce ne sono davvero tanti, ognuno con caratteristiche peculiari. Noi, in questa sede, utilizzeremo ATOM.
Quindi andiamo sul sito ufficiale [https://atom.io/], scarichiamo l’IDE e procediamo con l’installazione.
IMPORTANTE: se non siamo in grado di installare un software sul sistema operativo, allora non dobbiamo proseguire nella lettura!

Il codice HTML e CSS

Questo è il momento della crisi totale! Lo so! Inutile che ti nascondi dietro il monitor! 😀
Come diavolo si scrive il codice di programmazione di un sito?
Non è che è una roba troppo complessa?
In effetti creare un sito web da zero tramite un semplice articolo trovato sul web potrebbe non essere una roba troppo credibile. Ma invece lo diventerà perché io, che sono buono e magnifico 😀 , posso comprendere la complessità della faccenda per chi si avvicina per la prima volta alla programmazione. E quindi? Quindi il codice l’ho scritto tutto io! Proseguendo nella lettura sarà possibile scaricarlo sul PC e utilizzarlo come meglio si crede. Aggratisse! E daje! 😀 A partire dal mio codice, impareremo insieme a cambiare ciò che è utile cambiare per personalizzare il codice rispetto alle singole esigenze 🙂
Vi piace vincere facile, eh? Confessate! 😀
Iniziamo…

Il nostro futuro sito dovrà contenere alcune sezioni necessarie. Servirà un sezione introduttiva di accoglienza del cliente, una in esprimiamo, in poche parole, le peculiarità della nostra attività, una in cui invitiamo il cliente a chiamarci/contattarci (si chiama Call-To-Action), una in cui descriviamo un pochino più a fondo il nostro lavoro e, infine una in cui comunichiamo il nostro indirizzo utilizzando le mappe di Google in modo che sia facile raggiungere il nostro ufficio. Alla fine verrà fuori qualcosa del genere (premere su Result per vedere il risultato in tempo reale – sul telefonino si potrebbe vedere male, ma non ti preoccupare).

Non è male no?
Nella realtà però il codice è incompleto e deve pure essere suddiviso in 2 file distinti: uno per il codice HTML e l’altro per il codice CSS.
Tra poco vedremo come procedere per creare i file. Intanto aggiungiamo una parte di codice che sarà utile più avanti e che riguarda il tag <head>.

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Titolo del sito</title>
        <meta name="description" content="Qui dobbiamo inserire una descrizione di circa 180 caratteri in cui descriviamo in breve la nostra attività">
        <meta name="keywords" content="singole, parole, o anche brevi frasi, divise, da, virgole, che, descrivono, il, nostro, lavoro">
        <meta property="og:title" content="Titolo del sito" />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://www.nomedominio.estensione/"/>
        <meta property="og:image" content="https://www.nomedominio.estensione/immagine.jpg"/>
        <meta property="og:site_name" content="Qui dobbiamo inserire una descrizione di circa 180 caratteri in cui descriviamo in breve la nostra attività" />
        <meta property="og:description" content="Qui dobbiamo inserire una descrizione di circa 180 caratteri in cui descriviamo in breve la nostra attività" />
        <meta name="twitter:card" content="summary"/>
        <meta name="twitter:description" content="Qui dobbiamo inserire una descrizione di circa 180 caratteri in cui descriviamo in breve la nostra attività"/>
        <meta name="twitter:title" content="Titolo del sito"/>
        <meta name="twitter:site" content="@accountTwitter"/>
        <meta name="twitter:image" content="https://www.nomedominio.estensione/immagine.jpg"/>
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <link rel="shortcut icon" href="favicon.png">
        <link rel="canonical" href="https://www.nomedominio.estensione/" />
    </head>

Bene, adesso abbiamo a disposizione tutto il codice necessario a creare un sito web. Non ci resta che trascriverlo sul PC e visionarlo nel nostro browser 🙂
Nessuna paura…
Poiché tale operazione potrebbe essere complicata per chi non ha confidenza con il codice, ho preparato un bel “pacco regalo” per i lettori di questo articolo… 😉
Innanzitutto ho creato un file zip in cui troverete tutto il codice pronto e funzionante. Poi ho anche registrato una serie di video in cui vi mostrerò come utilizzare ATOM per modificare il testo del sito in modo che possa essere conforme alla vostra attività. Intanto iniziamo a scaricare tutto il codice del sito cliccando sul seguente bottone.

SCARICA INTERO CODICE

I risultati in tempo reale

Scaricato il file, passiamo a visionare i video che seguono.
Nel primo impareremo a configurare ATOM per l’utilizzo successivo.
Nel secondo decomprimeremo il file zip e apriremo il progetto in ATOM.
Nel terzo ci occuperemo del tag <head> e, quindi, dei social e dell’indicizzazione del sito.
Nell’ultimo impareremo a modificare i contenuti in modo che rispecchino il nostro lavoro.

Avvio e configurazione di ATOM.

Decomprimere il file mioSito.zip e aprire il progetto in ATOM.

Modificare le informazioni nel tag HEAD.

Modificare il testo di una pagina web.

Ora però, dopo aver ottenuto sul nostro PC quello che vogliamo sia online, dobbiamo spostarlo sulla rete, altrimenti lo possono vedere soltanto coloro che sono vicino a noi, davanti al nostro PC. Non va bene. Dobbiamo pubblicare su internet il nostro lavoro. Come fare? Ci basta comprare un dominio e copiare i file sul computer “remoto” (si chiama così il server su cui saranno ospitati i nostri file).

Compriamo un dominio

Cosa diavolo è un dominio?
Ma niente, è soltanto il nome del nostro sito. Il dominio delle Poste è poste.it. La parte dopo il punto prende il nome di “estensione”, quindi l’estensione del dominio delle Poste è “.it”.
Fine. Non c’è altro da sapere.
Adesso però dobbiamo scegliere il nostro dominio.
Come si sceglie un dominio?
Ci sono alcune caratteristiche che il nostro dominio dovrebbe possedere:

nome non più lungo di 30 caratteri
nome che richiami il nostro lavoro
estensione .it se lavoriamo soltanto in Italia

Sei un commercialista? Il tuo cognome è Rossi? Allora il dominio commercialistarossi.it potrebbe essere un’ottima scelta. Chiaramente la cosa si può estendere a un medico, un avvocato, un imbianchino e così via… 🙂

Ok, è arrivato il momento di comprare il dominio.
Per comprare un dominio possiamo rivolgerci a decine e decine di aziende denominate ISP (Internet Service Provider). Quale scegliere? Per il progettino di base che abbiamo realizzato vanno bene tutte, quindi scegliamo quella che ci fa spendere di meno. Possiamo scrivere una semplice email all’ISP scelto, comunicare che abbiamo bisogno di un dominio e che il sito sarà scritto in HTML e CSS senza linguaggi lato server e senza database. A fronte di tali caratteristiche, tra dominio e servizi, non dovremmo spendere più di 25 euro l’anno tutto incluso (incluso anche almeno un indirizzo email del tipo info@commercialistarossi.it). Se ci chiedono oltre 25 euro l’anno le cose sono due: o non abbiamo ben spiegato all’ISP cosa vogliamo o ci stanno fregando! 😀
Probabilmente per chi non ha mai comprato un dominio, potrebbe essere utile iniziare con Aruba (aruba.it). Bisogna ricordare che il dominio è una cosa, i servizi associati sono un’altra cosa. Il servizio di “hosting” consente al nostro dominio e al nostro sito di essere “ospitati” sui server dell’ISP. Per esempio, possiamo visitare questa pagina di Aruba per trovare il piano hosting “BASIC” di Aruba che ha già tutto quello che ci serve.
Mi preme chiarire che non percepisco nessuna remunerazione da Aruba né da terzi. Ho indicato Aruba come ISP perché lo ritengo la scelta più semplice per i principianti.

Pubblichiamo il sito

Per pubblicare un sito “serio” si ha bisogno necessariamente di utilizzare un protocollo denominato FTP. Serve anche un software in grado di farci utilizzare tale protocollo in modo semplice e trasparente. Ma il nostro sito è davvero semplice, è composto da 2 cartelle e 7 file! Non abbiamo bisogno di imparare anche l’utilizzo di un altro software. Ogni ISP mette a disposizione un software denominato file manager che ci consente di spostare una piccola quantità di dati utilizzando direttamente il Browser. È questa la strada qui consigliata: è veloce, è semplice e non comporta ulteriore dispendio di energie. Quindi, una volta che abbiamo ottenuto l’accesso ai servizi messi a disposizione dall’ISP scelto, cerchiamo il “file manager” e impariamo ad utilizzarlo. Ad esempio, Aruba mette a disposizione una breve guida per utilizzare il suo file manager. Al seguente link possiamo vedere come copiare i file dal nostro hard disk al server di Aruba:
https://guide.hosting.aruba.it/hosting/linux/servizi-inclusi-creazione-sito-web/file-manager-upload-di-un-file.aspx

Il sito online

Una volta che abbiamo pubblicato il sito online, possiamo facilmente verificare se abbiamo fatto tutto bene o meno. Ci basta infatti puntare il nostro Browser sull’indirizzo web (dominio) che abbiamo comprato. Quindi, se abbiamo comprato il dominio commercialistarossi.it, ci basta inserire tale indirizzo sulla barra degli indirizzi del nostro Browser e premere invio.

Conclusioni

Arrivati a questo punto ci si potrebbe chiedere: ma per quale motivo fare tutta questa fatica invece di utilizzare uno dei citati sistemi automatici che fanno tutto online?
Una buona e ragionevole domanda. E infatti non è per niente detto che tu debba utilizzare questa strada per pubblicare il tuo sito 😀 Devi invece seguire questa strada se vuoi avere un’idea di cosa stai pubblicando anche quando utilizzi gli strumenti automatici.
Dopo aver letto questo articolo avrai, con ogni probabilità, un’idea molto più chiara di cosa è un sito web e dei motivi per cui può o non può essere indicizzato correttamente da un motore di ricerca.
Ti sembra poco?
Non lo è! 😉
In pratica, adesso la tua scelta sarà molto più consapevole.

Bene.
Siamo arrivati alla fine di questo articolo che ha cercato di mostrare come creare un sito web…
Come va? Sei ancora vivo o chiamo il 118? 😀
Se hai turbe importanti… puoi utilizzare i commenti per raccontarle… 😀

Come dici?
Ti piacerebbe imparare a programmare in HTML e CSS? 😯
Ma guarda che produco video corsi specifici per principianti! Se ti interessano, eccoti i link:
VIDEO CORSO HTML+CSS
VIDEO CORSO HTML+CSS+JAVASCRIPT
VIDEO CORSO JAVASCRIPT