Andiamo on-line
Corso di formazione
Elementi base per la
costruzione di un sito web
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
Lezione 1
Cosa serve per partire
 Concetti di base: pagina web, siti, html,
browser, open source.
 Scegliere gli strumenti da usare per
scrivere pagine web (editor html)
 Trovare lo spazio su web che ospiti il sito
 Preparare e organizzare i contenuti.
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
Concetti di base
Pagina web
• Una pagina web è il modo in cui vengono rese
disponibili all'utente finale le informazioni del
World Wide Web tramite un browser.
• Queste informazioni sono di solito contenute in
ipertesti in formato HTML che consentono di
accedere ad altre pagine web o altri contenuti
informativi tramite collegamenti ipertestuali
(link).
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
3
Concetti di base
Siti web
• Un insieme di pagine web, tra loro relazionate secondo una
gerarchia e una struttura ipertestuale e riferibili costituiscono
un sito web.
• I siti web si possono distinguere sommariamente in due
tipologie principali: siti statici e siti dinamici.
• I siti web statici presentano contenuti di sola lettura,
vengono aggiornati con una bassa frequenza e sono
mantenuti da una o più persone che agiscono direttamente
sul codice della pagina (tramite appositi editor web) .
• I siti web dinamici presentano invece contenuti redatti
dinamicamente e sono caratterizzati da un'alta interazione fra
sito e utente.
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
4
Concetti di base
Browser web
• Un browser web (navigatore) è un software che
consente agli utenti di visualizzare e interagire con
testi, immagini e altre informazioni, tipicamente
contenute in una pagina web di un sito.
• Il browser è in grado di interpretare il codice HTML
e visualizzarlo in forma di ipertesto.
• Tra i browser più diffusi citiamo Internet Explorer e
Mozilla Firefox (open source).
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
5
Concetti di base
HTML
• L'HTML (HyperText Markup Language: linguaggio di
marcatura per ipertesti) è un linguaggio usato per
descrivere la struttura dei documenti ipertestuali
disponibili nel World Wide Web ossia su Internet.
• L'HTML non è un linguaggio di programmazione, ma
un linguaggio di markup, ossia descrive il
contenuto, testuale e non, di una pagina web.
• Punto HTML (.html) o punto HTM (.htm) è anche
l'estensione comune dei documenti HTML.
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
6
Concetti di base
Open source
• Open source (sorgente aperto) indica un software i cui autori
ne permettono, anzi ne favoriscono il libero studio e l'apporto
di modifiche da parte di altri programmatori indipendenti,
mediante l'applicazione di apposite licenze d'uso.
• La collaborazione di più parti (in genere libera e spontanea)
favorita da internet permette al prodotto finale di raggiungere
una complessità e qualità maggiore di quanto potrebbe
ottenere un singolo gruppo di lavoro.
• A tale filosofia si ispira anche il movimento open content: in
questo caso ad essere liberamente disponibile non è il codice
sorgente di un software ma contenuti editoriali quali testi,
immagini, video e musica.
• Open Source non sempre coincide con Gratuito
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
7
Concetti di base
Free software
• Il software libero è software rilasciato con una licenza che
permette a chiunque di utilizzarlo e che ne incoraggia la
redistribuzione.
• Per le sue caratteristiche, si contrappone al software
proprietario ed è differente dalla concezione open source,
incentrandosi sulla libertà dell'utente e non solo sull'apertura
del codice sorgente.
• Su internet è possibile trovare un gran numero di software
liberi / open source che rispondono alle nostre necessità.
• In generale proponiamo di aderire a questa filosofia
utilizzando questo tipo di software e condividendo i propri
contenuti [license Creative Commons].
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
8
Strumenti
Editor html /1
• Per creare una pagina web c'è bisogno di un editor
HTML per la sua scrittura.
• Principalmente esistono due tipi di editor HTML:
editor testuali e visuali, quest'ultimi sono anche
chiamati editor WYSIWYG che sta per What You
See Is What You Get, ovvero ciò che vedi è ciò che
ottieni.
• Un editor visuale consente di creare la pagina
usando un'interfaccia e senza conoscere
nemmeno le basi di HTML.
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
9
Strumenti
Editor html /2
• Su internet è disponibile una miriade di editor
html, dai più professionali ai più semplici, sia
open source che free.
• Per questo corso proponiamo l’editor visuale
NVU, ma ognuno può trovare e provare altri
prodotti.
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
10
Strumenti
Programma FTP
• Per mettere on-line una pagina web c'è bisogno di
un programma FTP con cui effettuare l'upload
della pagina verso lo spazio web dove viene
ospitato il sito.
• In pratica le pagine web che compongono il nostro
sito vengono create sul nostro PC: il programma
FTP permette di spostarle sullo spazio web da cui
saranno accessibili via internet.
• Nel corso useremo FileZilla, un programma FTP
open source molto diffuso.
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
11
Strumenti
Grafica / immagini
• Una parte rilevante su cui si basa la qualità di un
sito web è la sua veste grafica, che in
particolare si compone di immagini e di stili.
• L’utilizzo di immagini può riguardare loghi,
elementi di abbellimento, foto, animazioni, ecc. I
formati maggiormente usati sul web sono jpeg e
gif (anche animati), ed esistono molti software
per la manipolazione delle immagini da usare
per le pagine web.
• Nel corso proponiamo l’uso del programma GIMP.
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
12
Strumenti
Grafica / stili
• Una pagina web è formata fondamentalmente da due elementi:
i contenuti veri e propri e la formattazione ovvero l'aspetto
con cui i contenuti sono mostrati all'utente.
• Una grande potenzialità per costruire pagine web flessibili ,
gradevoli e coerenti sta nell’utilizzo degli stili, tramite i CSS
(Cascading Style Sheets: fogli di stile a cascata) che si
affiancano alle pagine HTML per definirne la rappresentazione.
• In sostanza con i CSS è possibile definire le modalità con cui
rappresentare i contenuti, e l’uso di fogli di stile diversi
permette di cambiare sostanzialmente l’aspetto di uno stesso
sito.
• Esistono vari editor CSS che ne facilitano la scrittura, ma l’uso
degli stili richiede già un buon livello di competenza.
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
13
Strumenti
Andare on-line
• Per mettere on-line una pagina web è necessario
effettuare l'upload della pagina (tramite programma FTP)
verso uno spazio web dove venga ospitato il sito.
• E’ quindi necessario individuare lo spazio web che
ospiti il nostro sito, idoneo alle nostre necessità.
• Per definire le nostre necessità bisogna fare riferimento
al piano di comunicazione a cui si riferisce la
costruzione di un sito web.
• Con questo corso non approfondiamo “perchè vogliamo
andare on-line”, ma vediamo opportunità e criteri sul
“come andare on-line”.
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
14
Strumenti
Servizio di hosting
• Trovare uno spazio web che ospiti un sito significa
individuare un servizio di hosting (ospitare) che permetta di
allocare su un server web le pagine del sito, rendendole cosí
accessibili in Internet.
• Un server web, definito host, è connesso ad Internet per
garantire l'accesso alle pagine del sito mediante browser, con
identificazione dei contenuti tramite dominio.
• Un server web è un processo (e il computer su cui è in
esecuzione) che si occupa di fornire ai browser le pagine web
richieste, che viaggiano in rete trasportate dal protocollo
HTTP (Hyper Text Transfer Protocol).
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
15
Strumenti
Hosting gratuito
• Esiste un grande ventaglio di offerte di hosting, gratuite e
a pagamento, in funzione dell'uso che si vuole fare
del sito web.
• L’hosting gratuito è in genere offerto dagli Internet
provider, come servizio elementare, in previsione di un
passaggio a quello a pagamento.
• Comprende un certo quantitativo di spazio web, spesso
con l'obbligo di banner pubblicitario.
• Tra gli svantaggi dell'hosting gratuito vi sono la non
garanzia del servizio ed una larghezza di banda contesa
tra numerosi utenti.
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
16
Strumenti
Hosting a pagamento
• Un servizio tipico per un sito statico può
comprendere
•
•
•
•
la registrazione di un nome di dominio
indirizzi di posta elettronica
un determinato quantitativo di spazio web
una quantità di banda per il traffico generato dal sito
adeguata.
• Un servizio per un sito dinamico comprende inoltre
• il supporto ad uno o più linguaggi di scripting (PHP, ASP)
• il supporto ad un database on line (MySql, Postgres)
• software per la gestione dinamica di siti (CMS)
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
17
Strumenti
Scegliere l’hosting
• Un servizio di hosting gratuito molto diffuso, che
useremo durante il corso, è
• http://www.altervista.org
• Esistono inoltre svariati servizi per la realizzazione
di siti dinamici su spazi gratuiti (es. CMS, blog, wiki,
forum)
• Tra gli hosting a pagamento più diffusi segnaliamo:
•
•
•
•
http://www.tophost.it
http://www.aruba.it/
http://we.register.it/
http://www.eticoweb.it/
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
per cominciare
per risparmiare
per fare sul serio
per una scelta “alternativa”
18
Contenuti
Piano di comunicazione
• La creazione di un sito web dovrebbe essere
inserita in un piano di comunicazione in cui si
valutano più elementi e criteri:
• quali sono i contenuti che si vogliono comunicare
• quale è il formato - anche grafico – in cui si
inseriscono i contenuti
• a chi ci si rivolge, e con quali obiettivi
• con quale livello di interazione
• con quali capacità di investimento (coinvolgimento), in
particolare in termini di competenze e di dimanicità
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
19
Contenuti
Tipologia di sito
• In base a questi criteri si può decidere
l’approccio con cui realizzare il proprio sito web,
affinché sia adeguato agli obiettivi, sostenibile
rispetto alla capacità di mantenimento, flessibile
rispetto a sviluppi successivi.
• Con questo corso di base proponiamo:
• degli strumenti per la realizzazione di semplici siti
statici
• un primo orientamento per valutare come
realizzare siti avanzati e dinamici
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
20
Contenuti
Preparazione
• Una parte importante nella realizzazione di un sito
riguarda la preparazione e organizzazione dei
contenuti che lo comporranno.
• Possiamo individuare in particolare:
• I testi che contengono le principali informazioni che si
intende inserire
• Gli elementi grafici di cui si comporrà il sito, in particolare
facendo riferimento a loghi e materiali già realizzati
• I documenti che si vogliono rendere scaricabili dal sito
• altre informazioni (es. link, eventi, indirizzi) che possono
arricchire il sito e contribuire alla comunicazione
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
21
Contenuti
Organizzazione logica
• Passaggio successivo sta nella organizzazione
logica dei contenuti:
• Individuare argomenti e informazioni principali
• Disegnare una mappa logica di queste informazioni
• Organizzare una struttura che rappresenti la
navigabilità delle informazioni nel sito
• Questa fase di “disegno” serve a definire parti
rilevanti di un sito quali i menù che ne
permettono la navigazione.
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
22
Contenuti
Struttura del sito
• Aree importanti che possono essere individuate:
• Area soggetto:
•
•
•
•
chi siamo
cosa facciamo (in generale)
dove siamo
come contattarci
• Area progetti:
• cosa facciamo, nel dettaglio delle singole attività
• Area comunicazione:
• eventi, notizie, newsletter
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
23
Compiti per casa
• Raccogliere i contenuti
• Pensare ad una struttura logica
• Individuare in internet dei siti (semplici) ai quali
ispirarsi
• Scaricare ed installare i software proposti:
• NVU: editor HTML
• FileZilla: programma FTP
• GIMP: trattamento immagini
I materiali e i link agli strumenti qui discussi sono
disponibili sul sito del corso
http://corsowebcsv.altervista.org
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
24