Menu Chiudi

Web design | Creare un sito web

Tecnologia

COME CREARE UN SITO WEB

Webdesign

Se non sei su Internet, oggi, è come se non esistessi. Forse non è proprio così… Ma, se hai un’idea nuova, una passione, un business, una competenza da condividere, perché non provare a metterti online? Un sito creato da un professionista ti darà sicuramente meno filo da torcere, un sito fai-da-te ti offrirà però molte soddisfazioni. Una base di competenze tecniche aiuta senz’altro, ma potrai farcela comunque, usando un buon CMS o un servizio che propone modelli (template) già pronti, facili da modificare.

Gratis o a pagamento? | Il nome a dominio | La registrazione del dominio | Lo spazio web | Costi e pagamenti | Editor html… | …E content management systems | I software per la grafica | I codici dei colori | Il tuo primo template | Il tuo sito è compatibile… | Rinnova il tuo dominio | Quanto sei popolare? | Crea la tua sitemap | Il tuo robots.txt | Il tuo (o la tua) webdesigner

Gratis o a pagamento?

Diversi fornitori di servizi Internet (Libero, Virgilio e così via, per citarne alcuni) offrono la possibilità di ottenere con una semplice registrazione, che in genere comprende una casella di posta elettronica e altri servizi, anche uno spazio web gratuito. Il rovescio della medaglia? Poiché si condivide uno spazio del provider, si dispone quasi sempre di un dominio di terzo livello, dunque di un indirizzo più lungo. Inoltre, i servizi offerti non sono molti, l’assistenza è limitata e si è spesso costretti a tollerare la presenza di banner pubblicitari imposti dal gestore. Alcuni fornitori di spazio web gratuito:

Altervista | Libero Blog | Hosting Virtuale | Virgilio Xoom

Puoi attivare uno spazio di questo tipo agli inizi, per poi passare a un hoster professionale quando avrai migliorato le tue capacità, o ti vorrai rivolgere a un pubblico più ampio. Poiché costruire un sito su uno spazio web gratuito è in genere molto facile – si possono sfruttare gli appositi wizard, programmi che in pochi passi ti consentono di inserire gli elementi chiave del tuo sito – questo tutorial preferisce illustrarti come attivare uno spazio web a pagamento.

Il nome a dominio

Per prima cosa, devi scegliere il nome che darai al tuo sito, ossia un dominio di secondo livello. Per controllare se quello che vorresti è già stato utilizzato, vai su Register.it, inserisci il nome a dominio scelto, seleziona una o più estensioni (ad esempio le ‘classiche’ .it, .com, .net, .org; o le nuove .blog, .design, .online, .site, .space…), o lascia che sia il sistema a indicarti quelle ancora libere, ed effettua la ricerca. Saprai immediatamente se il tuo dominio è ancora disponibile, e con quali estensioni.

Utilità simili sono presenti in tutti i siti di hosting; Register.it, il più importante servizio di hosting italiano, è però un buon punto di riferimento. Esistono moltissime estensioni, ciascuna adatta a un tipo di sito: ad esempio, .edu è usato nel settore dell’istruzione. Le estensioni .com, .net, .org sono le più diffuse; in Italia si usa molto .it, che richiede la sottoscrizione della L.A.R. (Lettera di Assunzione di Responsabilità). Il nome a dominio non rinnovato viene cancellato d’ufficio dopo un anno.

La registrazione del dominio

Ora che hai scelto un nome, devi registrarlo, altrimenti può darsi che qualcuno lo farà prima di te. Devi dunque scegliere un servizio di hosting, che si occuperà della registrazione del tuo dominio e ti fornirà lo spazio web. Non devi acquistare anche quest’ultimo contestualmente (esiste la possibilità di utilizzare il servizio di “parking”dei domini), ma se sei pronta è opportuno farlo.

Lo spazio web

Per scegliere un buon hoster (un’azienda specializzata nella fornitura di spazio web), la cosa migliore è consultare una rivista di informatica o un sito Internet che riporti un articolo sui servizi di hosting e confrontare le varie offerte visitando i siti degli hoster citati: potrai conoscere i piani proposti e renderti conto della serietà dell’hoster. I parametri di cui tenere conto sono i seguenti:

  • Il sito dell’hoster dà un’impressione di serietà, è usabile, i concetti sono espressi chiaramente e in buon italiano? Un’attenta analisi ti permetterà di scartare gli hoster poco affidabili.
  • Quanti Gb di spazio web sono compresi nel piano tariffario che stai per scegliere? Sono sufficienti per le tue esigenze di spazio presenti e future? Sono possibili upgrade successivi?
  • Quante caselle e-mail comprende il piano di hosting che ti interessa? Un umero limitato (3, 5, 10, 50, 100) o è possibile attivarne illimitatamente, cosa indispensabile se intendi fornire caselle di posta ai tuoi utenti? Esiste la possibilità di attivare alias antispam, e se sì sono illimitati?
  • Il pannello di controllo per gestire lo spazio web è ‘amichevole’ (user-friendly) e dotato di ogni servizio che possa servirti? Sono compresi strumenti per attivare forum, chat, blog, siti di e-commerce?
  • Gli strumenti più utili per un webmaster (statistiche, database SQL, supporto Perl/Cgi ecc.)  sono inclusi o a pagamento?
  • Come viene fornita l’assistenza tecnica? Via web (via ticket, form, chat), per e-mail o anche per telefono? In quest’ultimo caso, si tratta di un numero verde o a pagamento?

Per la scelta non vi sono regole generali, ma devi mettere a fuoco le tue esigenze e controllare se il provider le soddisfi, fermo restando che se ti offre un discreto spazio web, caselle di posta illimitate con alias, un buon pannello di controllo inclusivo di statistiche e database (cPanel è probabilmente il migliore) e un’assistenza tecnica telefonica si tratta senz’altro di un buon hoster.

Una scelta di hoster professionali

Costi e pagamenti

La scelta finale può essere determinata dal budget che vuoi stanziare, ma i costi sono ormai piuttosto contenuti, per cui puoi scegliere tra diverse soluzioni di buon livello spendendo davvero poco. In alcuni casi potrai persino ottenere uno spazio web del tutto gratuito, approfittando di un’offerta a scadenza o di una promozione legata a una rivista specializzata.

Il pagamento può essere in genere effettuato online on carta di credito o PayPal (bada che compaia sulla barra degli indirizzi la scritta https:// invece di http://, che identifica le connessioni sicure). Una volta acquistato il tuo pacchetto, diventi proprietaria di un dominio di secondo livello (del tipo http://www.ilmiosito.net) e, dopo poche ore, ti viene attivato il tuo spazio web. Auguri!

Editor html…

Sia che tu conosca il linguaggio HTML o che sia del tutto a digiuno di codici, puoi creare il tuo sito web utilizzando un editor HTML. Infatti, se sei in grado di operare con programmi professionali ad alto livello e di padroneggiare ASP, PHP, AJAX, JAVA ed altri linguaggi, non stai certo leggendo questo tutorial. A seconda delle tue competenze, puoi creare il tuo sito web con un software professionale (Macromedia Dreamwaver, Adobe GoLive…) o con uno più amichevole (Microsoft FrontPage, Easy Web Editor, Coffee Cup…). I software migliori sono in genere a pagamento, ma è sempre disponibile una versione dimostrativa, dalle funzionalità e/o dalla licenza limitata. Inoltre, dopo le nuove release dei programmi, le versioni superate vengono a volte distribuite gratuitamente in allegato alle riviste di settore.

«Wowwww!!! Ce l’ho fatta! Il collegamento dell’immagine adesso linka al sito giusto! Grazie perché non avevo pensato di modificare le scritte dentro il codice, era così semplice!» Virginia 🙂

Software a pagamento, disponibili in versione dimostrativa o beta

…E content management systems

In alternativa, puoi avvalerti di un CMS (Content Management System), un sistema online che ti aiuta a organizzare i contenuti di siti e portali dinamici pur senza conoscere alcun codice. Il CMS più noto è senza’altro WordPress, che ha avuto un enorme successo per la sua flessibilità e le sue infinite aplicazioni; è inoltre ricco di plugin. Altri nomi importanti sono Joomla, Drupal, ModX e Typo3. Un CMS particolarmente semplice da usare è EZ Platform; altri CMS sono più complessi e professionali.

I software per la grafica

Per poter lavorare sulla grafica del tuo sito, hai bisogno di alcuni software di creazione e fotoritocco delle immagini, e magari anche dei video. È consigliabile averne più d’uno, perché alcune operazioni possono essere rese più semplici e rapide da un programma piuttosto che da un altro. Qualche esempio:

Software per la grafica web

  • App Desktop di Adobe Creative Cloud® suite di app desktop e cloud per la fotografia, il web design, il montaggio video, la creazione di contenuti web e altro. A pagamento, su abbonamento

Software di disegno e fotoritocco

Software per la creazione e identificazione dei colori

I codici dei colori

Per ottenere il colore desiderato per il design di un sito web (o per un qualsiasi altro progetto grafico), devi tenere presente che ogni colore è il risultato di una combinazione di tre valori. Essi possono essere espressi con vari sistemi: HEX, HTML, RGB, CMYK, HSV. Ad esempio, il bianco sarà così definito:

HEX 0xFFFFFF | HTML #FFFFFF | RGB 255,255,255 | CMYK  0,0,0,0 | HSV 0,0,100

Come puoi notare, nel sistema RGB [R=Red (rosso), G=Green (verde) e B=Blue (blu)], CMYK e HSV i valori sono solo tre e per ottenere un colore basta variare i numeri. Nei sistemi HEX e HTML, invece, il codice è a 6 cifre, cioè due per colore: le prime due cifre rappresentano un colore, le seconde due un altro e le ultime due il terzo colore. Le tre coppie di valori vanno da 00 (colore assente=nero) a FF (colore al massimo=bianco); l’abbinamento di questi valori ti consente di ottenere i diversi colori.

Come ottenere, a questo punto, una ben precisa tonalità? I principali software di grafica, creazione e ritocco delle immagini consentono di scegliere i colori da una palette di colori predefiniti, di modificarli o di crearne di nuovi inserendo i codici RGB, Hex ecc. Un interessante e completo tutorial sui colori è stato scritto da Claire Broadley su Digital.com.

Se vuoi identificare con precisione il codice corrispondente a un colore che ti piace, ma che non sai come ottenere, scarica e installa un software gratuito, piccolo ma utilissimo: Pixie. Per utilizzarlo, basta indicare con il puntatore del mouse il punto esatto del colore che vuoi riprodurre, leggere su Pixie il codice espresso nei cinque sistemi e inserire il codice nel programma di ritocco. Puoi anche avvalerti di uno strumento base per il web designer, la Tabella dei colori HTML (Complete Html true color chart). 

Il tuo primo template

Hai acquistato un dominio e uno spazio sul web, ti sei procurata i programmi per lavorare su testi e immagini e comporre il tuo sito: ora non ti resta che iniziare. Se non hai già molta pratica, sappi che non sarà una passeggiata, ma di certo ce la puoi fare. Per prima cosa, riordina le idee.

Ti occorre un template (modello) di sito sviluppato in larghezza, o in lunghezza? Quest’ultimo sarà più facilmente compatibile con gli schermi di differente grandezza. Come dovranno essere suddivisi i contenuti? Con quale tipo di menu saranno collegate le pagine, e quante pagine inizialmente ti servono? Quali vorresti che fossero i colori del tuo progetto grafico?

Una volta decisi questi punti fondamentali, sei pronta, utilizzando il tuo editor HTML, a costruire un primo modello di pagina web, che potrai salvare in formato .htm e conservare per riferimento. Probabilmente all’inizio farai molti errori, ma vedrai che pian piano diventerai padrona della materia. E, se tutto manca, potrai sempre fare un salto su un sito di risorse gratuite per il webdesign e scegliere un template già pronto., o usare un servizio con un wizard per le pagine web.

IL SERVIZIO | PrintWhatYouLike
Vuoi creare un pdf delle tue pagine web, salvandone solo alcune sezioni? Con PrintWhatYouLike puoi scegliere esattamente cosa visualizzare nella stampa del pdf. In più, puoi inserire un pulsante print-friendly nel sito.

Il tuo sito è compatibile…

…con i browser Edge, Firefox, Internet Explorer, Opera, Safari, Mozilla, Camino, Tor e con quelli dei dispositivi mobili, come il Samsung browser? E, se sì, come viene visualizzato nelle differenti versioni dei singoli browser, per ogni sistema operativo? Per non parlare della risoluzione degli schermi: 640×480, 800×600, 1024×768, 1152×764, 1600×1200 ecc…!

Il problema della cross-compatibilità (in pratica, se il sito web viene visualizzato correttamente in tutti, o nella maggior parte, dei browser in uso tra i navigatori) forse non sarà all’inizio tra le tue priorità, ma prima o poi dovrai prenderlo in considerazione. Un sito che ti appare perfetto mentre è visualizzato sul pc su cui lo hai creato, infatti, potrebbe visualizzarsi male su un computer con sistema operativo e risoluzione dello schermo differente. Per testare tutte le opzioni, ci vorrebbero ore. Persino per i veri webmaster è un problema! Tu, però, puoi usare alcuni siti web che lavorano per te!

Servizi per testare gratis la cross-compatibilità di un sito

Per una migliore compatibilità con tutti i browser e i sistemi operativi cerca di non usare font (caratteri tipografici) troppo fantasiosi, ma attieniti ai font Unicode (UTF-8), che sono visualizzati correttamente in tutti i casi: Arial – Courier New – Times New Roman – Verdana. I moderni CMS consentono comunque di usare una grande varietà di font, che i browser ormai riescono quasi sempre a interpretare.

Rinnova il tuo dominio

Il tuo sito ti ha soddisfatto e intendi continuare ad aggiornarlo. Dopo un anno dall’attivazione, però, lo spazio web che hai acquistato presso il tuo hoster necessita di rinnovo e dunque di un nuovo pagamento. Sarà il tuo hoster stesso a ricordartelo, via mail, suggerendoti alcuni sistemi di pagamento (in genere, bonifico bancario o carta di credito).

Quanto sei popolare?

L’indice di popolarità di un sito può essere calcolato approssimativamente, studiando le statistiche del sito (nessuno usa più il “contatore” dei visitatori inserito nella pagina), ma tecnicamente esso sarà indicato da un valore da 0 a 10, che Google ha definito Page Rank. Dal 2016 Google non fornisce più un punteggio pubblico di popolarità, ma continua a usare il page rank nel suo algoritmo.

I tuoi testimonial

Il modo più ‘evidente’ per dimostrare la popolarità del tuo sito è attraverso i suoi testimonial! Puoi creare una pagina a sé con le foto e le frasi di chi ha apprezzato i tuoi prodotti e/o servizi, inserire le testimonianze in riquadri nella parte centrale della tua landing page o creare una bacheca social di utenti soddisfatti con un servizio gratuito come la Wall of Love di Shoutout.

Crea la tua sitemap

Google indicizza comunque il tuo sito, ma se gli fornisci una sitemap (una mappa .xml della struttura del sito) lo aiuti: i suoi spider – i Googlebot – troveranno subito tutte le pagine da visitare. Creare la sitemap di un sito, inoltre, aiuta Google a formare i sitelinks, utili scorciatoie alle sezioni interne del sito, visibili nei risultati di ricerca.
Per produrre la tua sitemap in pochi secondi, puoi usare il servizio XML-Sitemaps, che ti permette di creare e scaricare il file .xml della mappa, che dovrai caricare nella cartella principale del tuo sito; dovrai poi inserire l’URL della sitemap (http://www.nomesito/sitemap.xml) nell’apposita sezione “Sitemap” di Google Search Console, un insieme di servizi SEO per chi ha un account Google. Aggiorna spesso la tua sitemap: se aggiungi nuovi contenuti al tuo sito, modifichi gli URL o elimini alcune pagine, Google Search Console riscontrerà errori, dovuti alla sitemap obsoleta.

Il tuo robots.txt

Il file robots.txt è un piccolo file di testo, non indispensabile ma utile, che indica ai robot (bot) dei motori di ricerca quali sezioni del tuo sito scansionare, o ignorare. Puoi creare facilmente il robots.txt del tuo sito con un file di blocco note, caricandolo poi nella root del sito (la cartella public_html). La sintassi di base permette a tutti i bot (*) di visitare tutto il sito (allow):

User-agent: * Allow: /

Hai sviluppato il sito con WordPress? Puoi caricare lo stesso, nella directory principale, un tuo file robots.txt. Prima che tu lo faccia, per agevolare l’indicizzazione delle pagine web, WordPress ne produce comunque uno fittizio, che non risiede sul tuo dominio ma viene richiamato all’occorrenza, con www.nomedelsito.it/robots.txt. Tale file è già ottimizzato per WordPress; lo puoi modificare attraverso il plugin Yoast SEO, o sostituire con il tuo robots.txt personalizzato.

User-agent: * Disallow: /wp-admin/ Allow: /wp-admin/admin-ajax.php

Vuoi far sapere ai Googlebot, e ad altri spider, che hai una sitemap? Dopo averla creata e caricata come ti ho spiegato, puoi inserire nel tuo robots.txt la riga:

Sitemap: http://www.ilmiosito.com/sitemap.xml

Il tuo (o la tua) webdesigner

Per costruire e gestire il tuo sito preferisci affidarti a qualcuno che sia già esperto? Su Course Creator Lab trovi una bacheca virtuale di freelancers – specializzati in progettazione, copywriting, social media marketing, webdesign e altro – pronti ad aiutarti.