Progettazione di un sito Web
Docente
Ing. Maria Mirto
Ing. Passante Marco
19/12/2015
Corso di Informatica
1/19
Cos’è un sito Web?
• Sito Web: un insieme coordinato di pagine, relative ad uno stesso
tema, che risiedono tipicamente su uno stesso server
• Esistono diversi tipi di siti Web:
 completamente liberi: in cui ogni pagina è diversa dalle altre
 con una struttura regolare nella presentazione delle informazioni, in cui
esistono cioè pagine con la stessa struttura e quindi riconoscibili come
una serie
 dove l'informazione è piuttosto statica
 dove l'informazione è altamente dinamica e quindi una preoccupazione
importante deve essere la frequenza di aggiornamento e la
manutenzione.
19/12/2015
Corso di Informatica
2/19
Siti statici vs siti dinamici
• Dal punto di vista della struttura e della tecnologia utilizzata:
 siti statici
 siti dinamici
• I siti web statici presentano contenuti di sola ed esclusiva lettura.
Solitamente 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). Si tratta
storicamente della prima generazione di siti web.
• I siti web dinamici presentano invece contenuti redatti
dinamicamente (in genere grazie al collegamento con un database)
e forniscono contenuti che possono variare in base a più fattori. I siti
web dinamici sono caratterizzati da un'alta interazione fra sito e
utente;
19/12/2015
Corso di Informatica
3/19
Tipologie di siti
• I siti web vengono poi comunemente divisi in categorie per
inquadrarne il settore di operatività o i servizi offerti:
 Siti a carattere educativo, didattici
 incoraggiare l'esplorazione del sito secondo un filo logico piuttosto che
lasciare la più assoluta libertà nella navigazione.
 Siti a carattere informativo
 È importante la natura delle informazioni che si vogliono fornire, se sono
relativamente stabili o se cambiano spesso;
 E’ importante che siano aggiornate tempestivamente;
 Le informazioni possono essere riconducibili a delle strutture ricorrenti. Se
l'informazione è abbastanza strutturata bisognerà allora prendere in
considerazione la possibilità di mantenere le informazioni in una base di dati
e prevedere meccanismi per la generazione automatica delle pagine.
 Esempi di siti informativi:
– cataloghi
– un sito di un dipartimento universitario che pubblica la lista dei corsi offerti.
19/12/2015
Corso di Informatica
4/19
Tipologie di siti
 Siti di immagine (brochurware) e personali
 fornire un'immagine ad una organizzazione o ad una persona, e allora la
domanda da porsi è qual è l'immagine che si vuole comunicare.
 Siti commerciali
 lo scopo principale del sito è attrarre clienti e quindi bisogna progettarlo
nell'ottica di attrarre visitatori nella fascia di mercato in cui il prodotto si
colloca.
 Siti che offrono servizi
 ad esempio un motore di ricerca o un servizio gratuito di posta elettronica, la
struttura del sito può essere relativamente semplice ma la complessità
risiede nell'applicazione sottostante che realizza il servizio.




Portali
Siti di intrattenimento
Siti di comunità
Siti artistici ...
19/12/2015
Corso di Informatica
5/19
Analisi
• È importante capire di quale tipo di sito si tratta facendo un'analisi
prima di intraprendere il progetto.
• Avere in mente l'obiettivo per cui il sito viene costruito, e le
caratteristiche del contenuto informativo può aiutare a capire le
caratteristiche che il sito stesso deve avere e fare le scelte giuste
nella fase di realizzazione.
19/12/2015
Corso di Informatica
6/19
Caratteristiche non funzionali di un
sito Web
• Fattori di qualità







Navigabilità
Accessibilità
Usabilità
Leggibilità
Affidabilità
Manutenibilità
Sicurezza
19/12/2015
Corso di Informatica
7/19
I linguaggi
•
Il linguaggio più diffuso con cui i siti web sono costruiti è l‘HTML (Hyper Text Markup
Language) e suoi derivati.
 L'HTML viene interpretato da particolari software chiamati web browser
 Es: Firefox e Internet Explorer.
•
Alcuni plugin per i browser permettono la visualizzazione di contenuti animati, come
Flash, Shockwave o applet Java.
•
Alcuni contenuti possono essere generati dinamicamente sul browser dell'utente, ad
esempio tramite JavaScript o Dynamic HTML, tecnologie supportate per
impostazione predefinita da tutti i browser recenti.
•
Per la costruzione di siti web dinamici in grado di estrapolare dati da database,
inviare email, gestire informazioni, ecc., i linguaggi di scripting più diffusi sono PHP e
ASP.NET
•
Per la creazione di siti internet molti webmaster utilizzano comunemente strumenti
automatizzati, chiamati web editor, grazie ai quali redigere il codice anche senza
averne un'approfondita conoscenza.
19/12/2015
Corso di Informatica
8/19
HTML
• L’ HTML (HyperText Markup Language) è il linguaggio utilizzato dai
documenti Web.
• Grazie al loro specifico formato, i documenti presenti su Web sono
veri e propri ipertesti.
• Un ipertesto è un documento nel quale alcuni elementi (parole attive
sottolineate) rappresentano dei “legami” con altri documenti.
• La struttura viene definita interattiva in quanto è possibile
selezionare gli elementi attivi per avviare immediatamente il
collegamento al documento di interesse ad esso riferito.
19/12/2015
Corso di Informatica
9/19
HTML
• L’HTML è un linguaggio molto semplice ma nello stesso tempo
molto potente, creato per realizzare pagine ipertestuali da
pubblicare sulla rete Internet, grazie al servizio WWW (World Wide
Web).
• Un documento HTML è composto da un testo intervallato da alcuni
elementi (o tag) che ne indicano la funzione logica oppure
inseriscono dei comandi di formattazione.
• Il linguaggio HTML è caratterizzato da una serie di elementi ed
attributi che sono di riferimento quando viene esaminato il codice
delle pagine realizzate.
19/12/2015
Corso di Informatica
10/19
HTML
•
Tali elementi definiscono le due sezioni di un documento HTML:
 l’intestazione <HEAD>
 il corpo <BODY>
•
Definiscono anche gli elementi specifici del documento (es. titolo,
commenti,...)
 ELEMENTI PRINCIPALI: definiscono i paragrafi e le intestazioni del documento,
creando la struttura principale della pagina
 CARATTERISTICHE DEL TESTO: modificano il ruolo e l’aspetto estetico del
testo contenuto tra l’inizio e la fine
 LISTE (Elenchi)
 COLLEGAMENTI: creano i collegamenti ipertestuali e la specificazione dei
puntamenti
 IMMAGINI
 TABELLE: consentono di formattare i dati e di organizzare in modo complesso la
struttura della pagina
 MODULI (Forms): per la creazione di questionari interattivi
19/12/2015
Corso di Informatica
11/19
HTML: Comandi principali
• Definiscono i paragrafi e le intestazioni del documento, creando la
struttura principale della pagina:




< HTML > Segnala al browser il linguaggio in cui è redatto il documento
< HEAD > Raccoglie le informazioni relative al documento
< TITLE > Assegna un titolo al documento
< BODY > Delimita il contenuto di una pagina HTML
19/12/2015
Corso di Informatica
12/19
HTML: Formattazione del testo
• Modificano il ruolo e l’aspetto estetico del testo contenuto tra l’inizio
e la fine:




< P > Inizia un nuovo paragrafo
< BR > Inserisce un ritorno a capo
< STRONG > Trasforma il testo delimitato in carattere neretto (logico)
< CITE > Inserisce una citazione rientrate nel testo
19/12/2015
Corso di Informatica
13/19
HTML: Liste di elenchi




< UL > Inizio di una lista non numerata
< OL > Inizio di una lista numerata
< LI > Indica l’inizio di una voce di lista
< MENU > Inizio di una lista di tipo a menu
19/12/2015
Corso di Informatica
14/19
HTML: Collegamenti
• Creano i collegamenti ipertestuali e la specificazione dei puntamenti
 < A HREF=“URL” > indica un collegamento ad un’altra pagina. Alcuni
URL possibili sono:
 http://www.esempio.it/homepage.htm
– Puntamento ad una pagina esterna (la pagina risiede su un web server esterno)
 file://c:\sito\pagina.htm
– Puntamento ad una pagina interna (la pagina risiede sul web server interno)
 mailto:nome.utente@provider
– Per spedire una mail al destinatario
 < A HREF=“#ancora” > indica un riferimento all’interno di una stessa
pagina
19/12/2015
Corso di Informatica
15/19
HTML: Immagini
 < IMG SRC=“nomefile.gif” > Inserisce l’immagine nella pagina
 < IMG ALT=“testo alternativo” > Permette di visualizzare del testo
alternativo all’immagine per utenti che utilizzano un browser solo testo
 < IMG ALIGN=“top/middle/bottom” > Indica l’allineamento dell’immagine
rispetto alla riga di testo (alto/centro/basso)
19/12/2015
Corso di Informatica
16/19
HTML: Tabelle
• Consentono di formattare i dati e di organizzare in modo complesso
la struttura della pagina:





< TABLE > Inserisce una tabella
< TR > Indica una nuova riga di tabella
< TD > Indica una singola cella all’interno di una riga di tabella
< CAPTION > Inserisce un titolo per la tabella
< TH > Inserisce una riga per i titoli dei campi della tabella
19/12/2015
Corso di Informatica
17/19
Figure professionali
• Attività complessa che coinvolge più persone e professionalità
 il webmaster, che progetta il sito e ne è il responsabile
 l'esperto di architettura dell’informazione (information architect), che è
responsabile dell'organizzazione dell'intero sito e della struttura di
navigazione
 il content manager, che è responsabile della redazione del contenuto e
della struttura logica
 il webdesigner, che è responsabile dell'aspetto grafico (layout)
 il programmatore o sviluppatore, che è responsabile del comportamento
delle pagine
 l‘esperto di webmarketing, che si occupa della promozione del sito nel
web
 il responsabile SEO (search engine optimization), che si occupa del
posizionamento del sito all'interno degli indici dei motori di ricerca
 il sistemista, che gestisce la rete, l‘hardware e il software di base del
web server in cui è ospitato il sito.
19/12/2015
Corso di Informatica
18/19
Struttura di un sito Web
• Home Page
 Punto di ingresso nel sito
 Posto migliore per inserire un menù di
collegamenti o un sommario del sito
 Non soggetta a grosse variazioni
• Pagine
 Differenti per lunghezza e contenuti
19/12/2015
Corso di Informatica
19/19
Accesso alle pagine web
• Le pagine di un sito web sono accessibili tramite una radice comune
(detta “nome di dominio", per esempio "www.google.it"), seguita da
una serie opzionale di "sotto cartelle" e dal nome della pagina. Il
nome completo di ogni pagina è detto "indirizzo web" o, più
tecnicamente, URI (o URL).
• Per esempio, nell'indirizzo
www.w3c.org/Consortium/Offices/role.html
 www.w3c.org/ è la radice, o nome di dominio
 Consortium/Offices/ sono le sottocartelle, separate dal simbolo "/"
 role.html è il nome della pagina
• L‘home page di un sito è la prima pagina che si ottiene digitando il
solo nome di dominio.
19/12/2015
Corso di Informatica
20/19
Come creare un sito web
• Usufruire dei moltissimi servizi gratuiti su internet
 GOOGLE SITES
WEEBLY
BLOGGER
ALTERVISTA.ORG
NETSONS
• Vantaggio
 Creare pagine web con pochi clic, senza installare nulla nel proprio
computer e senza conoscere nessun linguaggio di programmazione.
• Svantaggio
 Forniscono un nome di dominio di terzo livello
 Ovvero, del tipo "miosito.sitospite.it"
19/12/2015
Corso di Informatica
21/19
Come creare un sito web
• Svantaggio
 Forniscono un nome di dominio di terzo livello
 Ovvero, del tipo "miosito.sitospite.it“
– Ad esempio, se scegli come nome del sito “informatica", su uno spazio gratuito,
l'indirizzo del sito sarà:
informatica.altervista.org, oppure
web.tiscali.it/informatica, oppure
sites.google.com/site/informatica, oppure
informatica.weebly.com oppure
informatica.blogspot.com, e così via.
 leggere bene le clausole per capire i limiti della pubblicazione
 Ad esempio molti servizi gratuiti chiedono che venga usato lo spazio messo
a disposizione, per fini personali e non aziendali o commerciali
19/12/2015
Corso di Informatica
22/19
Come creare un sito web
• Per ottenere un dominio di secondo livello, del tipo pcdazero.it o
cocacola.com, occorre acquistarlo.
 Quanto costa un dominio? Pochissimo! Circa 10 euro all'anno.
• Acquistare solo il nome del dominio non basta per creare un sito.
 Occorre uno spazio dove ospitarlo (servizio di Hosting).
 Es: Netsons
• Cosa me ne faccio di un dominio senza spazio ?
 E’ possibile registrare solo il nome del dominio affinchè non venga
registrato da qualcun altro. Successivamente dopo 1 mese, 1 anno o
più, potrai acquistare lo spazio.
 Si potrebbe anche non acquistare lo spazio ed ospitare il sito
direttamente sul proprio computer di casa o ufficio. Ma la cosa
diventerebbe troppo complicata da gestire.
19/12/2015
Corso di Informatica
23/19
Come creare un sito web
• Si può scegliere di:
 Creare direttamente online le tue pagine web.
 puoi creare direttamente online le tue pagine web usando un semplice Editor
HTML
 potrai usufruire di un potente strumento, che ti permette con pochi clic di
installare un CMS
 Creare e salvare le tue pagine web sul tuo PC ed in seguito caricarle sul
sito online.
 Puoi creare un intero sito web dal tuo PC usufruendo di programmi che non
richiedono conoscenze di programmazione
– FrontPage, Dreamweaver
 Impari a conoscere i linguaggi di programmazione (HTML, CSS, PHP, etc.)
per creare "mattone su mattone", il tuo sito web
19/12/2015
Corso di Informatica
24/19
CMS
•
CMS è un acronimo, e sta per "Content management system", ovvero
"Sistema di gestione dei contenuti".
 è una categoria di software che serve a organizzare e facilitare la creazione
collaborativa di siti Internet.
•
Installando un CMS sul tuo spazio web, potrai creare pagine web,
direttamente online.
 È formato da un’applicazione e da un database
•
Un CMS non richiede la conoscenza di linguaggi di programmazione, ed
inoltre offre la possibilità di creare un sito web altamente professionale e
graficamente eccellente.
•
Esempi: Joomla, Magento, WordPress (per i blog), ecc…
19/12/2015
Corso di Informatica
25/19