come creare un sito web - tutorial

"Siate affamati, siate folli, perché solo coloro che sono abbastanza folli da pensare di poter cambiare il mondo lo cambiano davvero"

Steve Jobs - fondatore di Apple Inc.

 

Abbiamo già pubblicato un post tutorial con i suggerimenti per creare e personalizzare un blog, un logo e un biglietto da visita.

*v. post

la Home Page del nostro BLOG

e un altro su come  creare, personalizzare e pubblicare gratis un e-book

*v. post

i nostri tre e-book gratuiti

A richiesta, adesso, proviamo a  dare qualche consiglio sui siti web.

Non è semplice perchè ci sono moltissime informazioni e certamente non è possibile esaurire il discorso con un post (noi ci abbiamo messo anni prima di acquisire l'esperienza necessaria e continuiamo ancora ad aggiornarci e studiare), però, anche in questo caso (come per i blog) si possono  utilizzare  dei servizi online gratuiti o a pagamento che permettono di realizzare un sito web in modo abbastanza semplice, anche senza avere molte competenze tecniche, informatiche e grafiche (cosa invece indispensabile per realizzare un sito web da soli). 

Per la realizzazione di un sito web senza avvalersi di servizi online, occorre avere almeno  una conoscenza di base  di alcuni  linguaggi di programmazione come ad esempio: HTML, CSS, PHP, SQL; Javascript e grafiche; il CMS, e anche sapere cosa sono l'FTP, il SEO, le norme legali su  cookie policy e  trattamento dei dati, il design reponsive (template= aspetto grafico del sito in un'unica versione che consente di adattarsi  a vari dispositivi come pc, tablet, cellulari) ecc...

Solitamente si occupano della costruzione e messa in rete di un sito web singoli esperti professionisti o apposite agenzie di web design. 

Ciò non toglie che possiamo provarci! Chi sia appassionato e interessato all'argomento,  che abbia la  voglia di mettersi in gioco e di imparare, di cominciare a documentarsi, studiare, magari di  seguire dei corsi anche online e gratuiti, sappia comunque  che  occorrono tanta passione, pazienza, perseveranza, tempo,  capacità intuitive e logiche e l'umiltà per  riflettere e imparare dai propri errori.

Difficile ma non impossibile!

 

 Perchè un sito web?

Per cominciare ad "apparire" sul web, con vari obiettivi come: mostrare le  proprie abilità creative, raccontare di se stessi e delle proprie esperienze, farsi conoscere ecc... oltre ai social, può essere semplice e abbastanza facile cominciare dall'apertura di un blog personale (*v.post). Come abbiamo già scritto nel post citato, se ne trovano  già pronti e gratuiti, solo da personalizzare come abbiamo fatto noi con il nostro blog che, seppure con qualche limitazione, compie il suo dovere. 

Ci sono delle situazione nelle quali un blog o i social non bastano più e si ha la necessità o il desiderio di avere un proprio sito web personale che illustri l'attività che si gestisce o sia voce di un'associazione o di un progetto.  

Cominciamo a fare un po' di chiarezza!

 

fonte web

 tipologie di siti web:  

 statici, dinamici,  e-commerce, responsive

1. siti web statici  (o vetrina):  sono siti adatti a chi vuole pubblicizzare la propria attività professionale fornendo le principali informazioni riguardanti l'azienda come fosse una specie di biglietto da visita. Uno spazio web per farsi conoscere, pubblicizzarsi ed essere  indicizzati dai motori di ricerca. Solitamente questi siti hanno poche pagine, ma  offrono ai visitatori tutte le informazioni principali e i contatti per farsi 'trovare'. Un sito vetrina deve essere gradevole graficamente, funzionale e di qualità. 

Un sito statico è costituito da contenuti HTML e per realizzarlo o fare modifiche, occorre almeno un programma di base per editare l'HTML, un programma di grafica per le immagini e un programma FTP per trasferire i file modificati dal proprio computer al server.

2. siti web dinamici:  sono il passo successivo ai siti statici e utilizzano un database e uno script per modificare più facilmente e velocemente  i contenuti.

Il sito dinamico è basato sul linguaggio PHP, su un database e il supporto di un CMS (Content Management System) il quale è uno strumento per la gestione del contenuto di un sito web. L'interfaccia di amministrazione del CMS consente di gestire vari aspetti del sito web, senza che si debbano necessariamente conoscere linguaggi di programmazione web, infatti, con un CMS non è necessario modificare il file HTML per poi caricarlo su un server, ma si può scrivere il contenuto, fare modifiche, aggiungere immagini, caricare video direttamente in un'interfaccia  semplice e intuitiva che somiglia agli strumenti di uso di Microsoft Word (il più conosciuto è WordPress). La creazione di siti web dinamici richiede maggiori competenze tecniche. 

3. siti e-commerce (commercio elettronico) sono siti in cui si vendono prodotti.  Il modo migliore, vista la difficoltà di realizzazione, è quella di utilizzare una piattaforma per siti e-commerce per la vendita e l'elaborazione degli ordini ricevuti online dai clienti. I siti e-commerce possono essere collegati tramite link  a siti vetrina o dinamici.  

 

4.  siti web  responsive

Oggi è impossibile procedere alla costruzione di un sito senza la certezza che sia responsive, cioè adattato ad essere visualizzato correttamente sui vari dispositivi e in particolare sugli smarphone (mobile). Questo perchè da qualche anno è aumentata moltissimo la visualizzazione del web dai cellulari per cui è fondamentale avere un sito che sia visibile correttamente sugli schermi pc e sugli schermi degli smarphone. Un sito web responsive si definisce tale  quando si presenta con un contenuto "che cambia" e si adatta ai diversi dispositivi: le immagini si ridimensionano in proporzione e gli spazi con i testi  assumono una forma in base alle esigenze, il menu si riduce e comprime ecc...

Per riuscire ad avere un sito web che si adatti perfettamente a tutti i dispositivi va usato un template che lo consenta e per questo occorre ricorrere ad un design responsive che ha una tecnica di progettazione  grazie alla quale ogni elemento della pagina si adatta automaticamente per essere correttamete visualizzato.

Solitamente le piattaforme citate nel post  mettono a disposizione siti e template responsive, per cui ci si può affidare a questi. 

Per quanto riguarda il "fai da te" occorre documentarsi e studiare qui *v. una guida e/o utilizzare templati responsive già pronti in rete  (spesso gratuiti) esempio  su Joomla; template monster;  bootstrap

 

alcune piattaforme che  permettono di creare un sito web  gratuito in pochi passi (con  versioni anche a pagamento) 

Mettono a diposizione  CMS, hosting e domini di terzo livello: https://www. nome del servizio. nomedelsito. it

1.Google Sites 

2. WordPress

3. WIX

4. One Minute Site 

5.Site123 

6. Webador 

7. Shopify

8. Web.com 

Hai deciso che vuoi partire con la  progettazione fai da te? 

cosa occorre:

1. documentarsi e studiare 

2. un computer per lavorare collegato a internet

2. programma per editare testi o programma più complesso  per creare  pagine web

3.programma di grafica per elaborare le immagini 

in un secondo momento: 

4.programma FTP

5.Hosting e Dominio

 Hosting e dominio Web

Se non vuoi appoggiarti ad una piattaforma on line con pacchetti all inclusive, occorrerà acquistare presso un provider: Hosting e dominio Web, questo  rappresenta un  passo da effettuare quando si vuole pubblicare in rete  un nuovo sito Internet

 

fonte web

1. Hosting cioè lo spazio necessario che ospita i file del sito Web, insieme al server già configurato, in grado di renderli operativi occorre acquistare un Hosting su siti di provider rivenditori ad  esempio Aruba, Register ecc.. solitamente insieme ad un Dominio

2. Dominio cioè l'indirizzo (il nome del sito) che le persone digitano nel browser per raggiungere un sito. I nomi del dominio sono indicati come URL (Universal Resource Locator): la forma base di un dominio è formata dal nome + l'estensione (.it; .com; .eu; ecc...)  

*v. Aruba Hosting e Domini

Una volta pubblicato il sito web avrà, ad esempio,  questa forma:

https://www.nomedelsito. it

 

specialmente per principianti   prima di acquistare l'Hosting e Dominio conviene documentarsi e studiare bene, magari inizialmente  anche leggere il nostro post fino in fondo e soprattutto è importante cominciare a fare delle prove, sperimentando e visualizzando con "anteprima di pagina" e il proprio browser . Dopo di che valutare e decidere se sia  il caso di andare avanti.

 

adesso è il momento di iniziare a progettare tecnicamente  la prima pagina web in  HTML

 come si fa? 

Diciamo che è veramente impossibile scrivere sinteticamente tutto ciò che riguarda l'HTML come è impossibile dare le dritte per la costruzione di una pagina completa, cercheremo di fornirvi solo qualche informazione basilare per principianti che permetta di iniziare a sperimentare o magari solo per incuriosire.

 tre definizioni  fondamentali

- il linguaggio HTML è il linguaggio che permette di scrivere la pagina, definisce la sua struttura e l'organizzazione (puoi vederlo in opera guardando qualsiasi codice di una pagina web andando su: visualizza sorgente pagina)

*v. guida HTML

*v.guida HTML5 ( ultima versione di HTML)

- il CSS (Cascading Style Sheets - fogli di stile a cascata) è un linguaggio che defisce lo stile usato (la formattazione, l'aspetto ecc. ), permette di separare il contenuto dalla sua rappresentazione e dà indicazioni al proprio browser (esempio Chrome) su cosa e come  visualizzare

Lo stile può essere in linea definito di volta in volta per i vari elementi 

esempio:

 <p style="color: red;"></p>

incorporato  tramite il tag <style>  inserito nella sezione <head> </head> della pagina 

esempio:

<head> 

<style type="text/css">
     p { color: red; }
</style>

 </head>

o  su file esterno richiamato  da un link situato  sempre nella sezione <head> </head> 

esempio:

<head> 

<link href="stile_prova.css" rel="stylesheet">

</head>

o anche:

<style type="text/css">
@import url(stile_prova.css);
</style>

il foglio di stile esterno per vari motivi è il sistema migliore 

Il linguaggio HTML e il CSS  lavorano insieme

*v. guida CSS di base 

 

- Javascript è un linguaggio per programmare e per creare  vari effetti

*v. guida Javascript

 

Per lavorare occorre procurarsi un editor di testo adatto a scrivere il codice HTML, in rete se ne trovano vari sia per PC che per Mac anche gratuiti, anche lo stesso Blocco Note di Windows , oppure si possono usare programmi più completi per la creazione di pagine web  come ad esempio i  conosciuti Dreamweaver di Adobe, Microsoft Frontpage  ecc...

Quando non si usano i CSS e si lavora alla creazione di una pagina web con programmi  di editor più complessi,  lo stile e la formattazione vengono aggiunti automaticamente nel codice html, funziona ugualmente, anche se con opzioni più limitate di quello che si può definire con i CSS,  la pagina però talvolta viene  appesantita da stringhe di codice ripetuto più volte e diventa   più lungo e difficoltoso fare modifiche  

esempio se scrivo:

provo lo stile 

che voglio scrivere: con il font verdana, dimensione 18pt, colore rosso, e in grassetto 

automaticamente il codice  html sarà: 

<p><b><font face="verdana"><font size="5" color="#FF0000">provo lo stile</font></font></b> </p>

come si vede viene ripetuto più volte  il font: font face, font size , viene aggiunto <b> per definire il grassetto e color per il colore del font

se invece uso un CSS ( incorporato o meglio esterno)* posso scrivere li tutte le informazioni sul font ( font size = dimensione, font face =carattere, <b>=grassetto, color= #colore ) e il codice html della pagina sarà più semplice e pulito:

<p>provo lo stile</p>

* per lo stile in linea , incorporato o esterno v.  paragrafo precedente del post       

 caratteristiche della pagina HTML

La pagina HTML (Hyper Text Markup Language) è suddivisa in tag che corrispondono a determinati tipi di contenuto (i tag sono uno di inizio racchiuso tra due < > e uno di fine di chiusura </>)

il primo tag che si trova è sempre :

 <!DOCTYPE html> il quale dichiara che il file contiene un codice html

 a seguire :

<html> inizio della parte del codice che verrà espressa con il linguaggio HTML

<head> parte della pagina nella quale sono situate  le informazioni (che non si vedono dal dispositivo usato) con cui la pagina viene  gestita, ad esempio il titolo della pagina, i metatag, il richiamo ai file CSS ecc.

</head>fine dell'informazioni con cui la pagina 

viene gestita 

<body>inizio del corpo della pagina con tutti gli elementi che verranno mostrati  quando si guarda la pagina con un dispositivo (pc, tablet, cellulare) esempio testata, tabelle, colonne, titoli, testi, immagini, div ecc...

</body>fine del corpo della pagina 
</html> fine pagina html 

 esempio di codice della pagina "prova "

1. file html

<!doctype html>

 <html >

 <head>
<title>prova  </title>

<link href="stile_prova.css" rel="stylesheet">
</head>

 <body>
<h1> provo a scrivere una pagina</h1>
<h2>non so come verrà</h2>
<p>ciao, sto provando a scrivere la mia prima pagina

 html, spero che si legga bene </p>

<img src="gattino.jpg" 

width="300" height="200"  />
 <p>questo è il mio gatto  </p>
</body>
</html>

2.codice CSS file "stile_prova.css"

body{font: 76% Verdana, Arial, sans-serif; background-color: #FFF} 

h1{color:#FFBA3F} 

h2{color:#508738}

p{color:#0000FF}

a. come si nota nell'esempio, il richiamo al file CSS viene inserito nella sezione <head> </ head> della pagina con il codice HTML; 

b. nel file CSS sono stati definiti i colori della pagina    (body) e dei  vari tag (<h1>- <h2>-<p>).

- <p> sono i paragrafi </>

- <h1> titolo del paragrafo o del contenuto </h1>

- <h2> capitoli e sezioni </h2> 

c. i codici dei colori sono esagesimali (sei numeri e lettere) e sono preceduti dal simbolo # 

*v. tabella codici colori

Questo è un esempio proprio minimo di stile; nel CSS si possono aggiungere le dimensioni e il tipo dei font, il loro colore, la disposizione a destra, centro, sinistra, lo spazio tra i paragrafi, ecc...

 

questa è la pagina "prova"  

come  si vedrà  una volta visualizzata con il comando del programma editor "vedi anteprima nei browser" o quando viene  caricata in rete

  ______________________________________

provo a scrivere una pagina

non so come verrà

ciao, sto provando a scrivere la mia prima pagina html, spero che si legga bene

questo è il mio gatto 

 ______________________________________

 

se  usate un editor di testo semplice ad esempio notepad di windows potete fare una verifica facile  subito senza usare programmi complessi o caricarlo in rete -  seguite passo passo le indicazioni:

 

1. aprite una  nuova cartella sul desktop

 

2.aprite notepad e copiateci tutto il file html scritto sopra ( da <!doctype html> a </html>)

 

3. fate salva con nome -  nella pagina che si apre sostituite  nel primo campo ( nome file)   la scritta *.txt con prova.html e nella secondo campo ( salva come)  dove c'è scritto documento di testo(*.txt) cliccando sulla freccina a destra scegliete  tutti i file(*.*)

 

4.salvate il file nella nuova cartella creata (sarà il file chiamato prova.html)

 

5.  aprite di nuovo notepad e questa volta copiateci tutto il contenuto del  codice CSS file "stile_prova.css"scritto sopra

 

6. fate salva con nome sostituendo  nel campo (nome file) la scritta  *.txt con stile_prova.css

e nel campo (salva come) come avete fatto sopra,  dove c'è scritto documento di testo(*.txt) cliccando sulla freccina a destra scegliete tutti i file(*.*)

 

7. salvate il file nella nuova cartella  ( sarà un file chiamato stile_prova.css)

 

8. inserite nella cartella anche la foto del gattino:gattino.jpg 

 

9. a questo punto nella cartella ci saranno 3 file:

• prova.html
• stile_prova.css
• gattino.jpg 

10.fate doppio clic  sul file prova.html e si aprirà la pagina del vostro browser predefinito, dove vedrete l'anteprima della pagina "prova" con le varie scritte colorate e la foto del gattino

 

altri  codici

1.immagine: 

<img src=" nome e percorso dell'immagine " 

width=" larghezza in px" height=" altezza in px" />

2.link:

questo è il link del nostro blog
https://vitadashabby.blogspot.com/ 

codice html del link:

<p>questo è il link del nostro blog</p>

 <a title="link del nostro blog " 

href="https://vitadashabby.blogspot.com/">
https://vitadashabby.blogspot.com/</a>

3. div:

dopo l'introduzione dei CSS per organizzare al meglio la pagina HTML è stato introdotto  un altro elemento tag:  <div> </div> che serve per  indicare al browser  quando e dove applicare una certa personalizzazione grafica stabilita con i CSS; i <div> sono collocati nel corpo della pagina HTML all'interno del tag <body> e  definiti nelle caratteristiche e nella formattazione nel foglio di stile CSS

 

div principali: 

<!doctype html>

 <html >

 <head>

</head>

 <body>

<div id="container">

<div id="header">

<div id="nav"> 

</div><--fine nav-->

</div>    <-- fine header-->

<div id="main"> 

</div>   <-- fine main-->

<div id="sidebar"> 

</div> <-- fine sidebar-->

<div id="footer"> 

</div> <--fine footer-->

</div> <-- fine container-->

</body>
</html>

* v. la struttura di una pagina web con div e css

* v. cosa è l'elemento <div>  

Consigli 

Sia che  ci si affidi a una piattaforma o  si utilizzi un template già pronto o programmi di editor più complessi (che spesso inseriscono automaticamante stringhe inutili di codice o ripetizioni) consigliamo di controllare sempre il codice HTML per evitare di appesantire la pagina con conseguenti rallentamenti nel caricamento o generare errori e malfunzionamenti; per non avere difficoltà a leggerlo e controllarlo per fare modifiche o capire se ci sono errori; per l'accessibilità;  per posizionarsi più in alto nella ricerca su Google. Per tutti questi motivi è necessario mantenere un codice il più pulito e snello possibile,  ordinato  e senza troppi spazi ed è altresì importante  caricare immagini che siano ottimizzate per il web.

ricordarsi di

1. controllare sempre i tag e verificare le loro chiusure. 

2.non dimenticare la dichiarazione “doctype” ad inizio pagina. Il suo scopo è di aiutare il browser a visualizzare correttamente un sito web.

3.inserire l'attributo "title" per i link allo scopo di migliorare l'usabilità e l'accessibilità; ha altri vantaggi   riguardanti anche l'indicizzazione positiva sui motori di ricerca

esempio:

link sulla pagina

vita da shabby 

se aggiungo l'attributo "title" quando l'utente ci passa sopra con la freccetta del mouse, compare un testo aggiuntivo  che  informa sullo scopo del collegamento 

 il codice  html sarà:

<a href= “https://www.vitadashabby.blogspot.com " title= “ pagina home del blog vita da shabby ”>vita da shabby</a>

3. aggiungere l'attributo "ALT" alle immagini, ossia un testo alternativo all'immagine utile nel caso che l'immagine non venisse visualizzata per qualche motivo, o per i lettori che navigano con browser testuali (es. Lynx), o i non vedenti che utilizzano gli Screen Reader: software che leggono il testo delle pagine web; questi software non possono descrivere le immagini e le foto presenti, ma hanno bisogno dell'attributo ALT testuale che definisca l'immagine a parole.

esempio 

riprendiamo la foto del nostro gattino

il codice con l'aggiunta di ALT sarà:

<img src="gattino.jpg"  width="300" height="200" 

 alt=" foto di gattino tigrato" border="0" /> 

*v. la guida rendiamo un sito accessibile 

*v. linee guida per l'accessibilità W3C 

 

i siti della pubblica amministrazione devono rispettare le normative sull'accessibilità

 

salvare e pubblicare

Una volta completata la pagina va salvato il file con nome.html,  in questo caso sarà: prova.html e va trasferito sul server insieme al file CSS collegato in questo caso: stile_prova.css e all'immagine del gattino utilizzata: gattino.jpg

Se tutto è stato fatto nel modo giusto scrivendo nella barra del browser l'indirizzo dell'hosting web con l'aggiunta della /pagina  

esempio: https://www.nomedelsito.it/prova.html

si vedrà la pagina creata. 

vediamo ora come pubblicare la  pagina 

"prova" 

 

Senza avvalersi degli strumenti presenti nelle piattaforme, o utilizzare il file manager che solitamente si trova  sui siti dei provider (es. Aruba)  dove si acquistano l'hosting e il dominio, occorrerà procurarsi un programma FTP (File Transfer Protocol) cioè client FTP che permette a dispositivi elettronici di comunicare tra di loro e consente il trasferimento di file da una dispositivo (esempio un pc) a un server e viceversa. 

L’ FTP quindi  può  essere utilizzato per caricare file da un computer a un account di web hosting. In rete è possibile trovare anche gratuitamente programmi FTP da configurare con semplici passaggi  ad esempio:

• FileZilla (Windows/macOS)
• Cyberduck (Windows/macOS/Linux)
• Cute FTP (Windows/macOS)
• FlashFxp(Windows)

 

altre informazioni

Tralasciamo di approfondire in questo post, tutte quelle premesse necessarie  per la progettazione di un sito web e che riguardano: 

1. la scelta del nome del dominio, è importante perchè poi sarà quella che verrà intercettata dai motori di ricerca; occorre controllare che non sia già stata scelta da altri e  che ci caratterizzi.

2. l'analisi degli obiettivi da raggiungere e del target 

3. l'organizzazione delle informazioni per ottimizzare l'alberatura e la struttura del sito 

4.  la palette di colori da usare e i font (caratteri adatti da usare)

5. le immagini (che siano personali o royalty-free  ricordandosi del copywriter) 

6. i contenuti e i testi controllando grammatica e sintassi

7. documentarsi sulla legislazione  per non incorrere in sanzioni, riguardanti le linee guida sui cookie e la privacy  *v. garante della privacy * v. Jubenda 

 

A questo punto ci fermiamo qui sperando di avere fornito qualche informazione utile e di aver creato qualche curiosità... Consigliamo, se siete interessati, di visionare e studiare testi adeguati o le guide html, css, javascript (ad esempio quelle che abbiamo segnalato più sopra nel post) e di cominciare a fare delle prove; se riscontrate un errore o qualcosa non funziona ricontrollate e riprovate senza scoraggiarvi, facendo così alla fine comincerete a entrare piano piano nell'argomento.

Se invece non avete interesse e voglia di imparare a fare da soli, potete utilizzare le piattaforme per le quali non occorrono competenze informatiche anche se almeno le basi minime è meglio averle per sapere dove mettere le mani!

Per altre informazioni e chiarimenti potete scriverci ...

vitadashabby@gmail.com