1. I siti web dinamici:
loro progettazione e costruzione
prof. P. Losapio
Docente di Informatica

2. STRUTTURA ED OBIETTIVI DEL CORSO
Obiettivo
Costruire un sito web delle cattedrali
andriesi
Struttura
 15 ore (5 lezioni)
 Periodo: Aprile - Giugno

3. ALCUNI TERMINI IMPORTANTI
HTML = Linguaggio di creazione degli
ipertesti (HyperText Markup Language).
Ipertesto = un testo collegato ad altri
testi tramite un legame detto link.
WWW (o Web) = (World Wide Web) la
rete mondiale che permette di pubblicare
documenti, immagini, video, foto ed
ipertesti.

4. ALCUNI TERMINI IMPORTANTI
Pagina Web = un ipertesto costruito con il
linguaggio HTML.
Sito web = un insieme di pagine web legate
tra loro.
Server Web = un computer che contiene uno
o più siti web.
Indirizzo = un insieme di numeri o di lettere
che servono a raggiungere una specifica pagina
web. L’indirizzo inizia sempre HTTP://
ad es. http://www.gazzetta.it/calcio
http://194.20.158.242/calcio

5. ALCUNI TERMINI IMPORTANTI
Browser (si legge ‘broser’) =
programma che serve per cercare e
visualizzare pagine web. Internet
Explorer è un esempio di browser.
Sito web statico = sito web che contiene
pagine web che non cambiano
frequentemente.
Sito web dinamico = sito web che cambia
automaticamente e di frequente

6. La ricerca e la visualizzazione di una
pagina web
1. Si indica nel browser
BROWSER l’indirizzo della pagina web
http://www.gazzetta.it voluta
2. La richiesta arriva al server
web che contiene la pagina
web indicata
3. Il server web risponde
inviando al browser la
pagina web
4. Il browser riceve la pagina
web e la visualizza
SERVER WEB
www.gazzetta.it

7. Come progettare un sito web
I passi e le regole di base da
seguire per progettare un buon
sito web

8. La Gabbia o Griglia di
impaginazione
La gabbia, ovvero l’insieme di regole che
servono per organizzare i contenuti (testo,
immagini, video ecc...) all’interno del
monitor.

9. Griglia a dimensioni fisse
Tutte le componenti della
pagina hanno una larghezza
fissa.
Si può costruire con le
tabelle e con i livelli (layer)

10. Griglia a dimensioni fluide
Tutte le componenti della
pagina hanno una larghezza
espressa in percentuale.
Si può costruire con le
tabelle e con i livelli (layer)

11. La Gabbia o Griglia di
impaginazione
Griglia a larghezza fissa
(indipendente dalla
larghezza massima della
finestra).
La griglia non si adatta
alla dimensione massima
della finestra.

12. La Gabbia o Griglia di
impaginazione
Griglia a larghezza a
tutto schermo
(dipendente dalla
larghezza massima della
finestra).
La griglia si adatta alla
dimensione massima
della finestra.

13. Lo sfondo
Evitate gli sfondi a tinte piatte, possono dare dei
problemi di leggibilità
Evitate un’immagine composta come sfondo, può
creare confusione e mettere in secondo piano il
contenuto della pagina
Se il colore dello sfondo è a tinta unita scegliete
sfumature chiare o pastello
Il contenuto della pagina deve essere sempre posto in
risalto rispetto allo sfondo
In generale, l'occhio umano trova molto gradevoli le forme
irregolari ma uniformi, ma la sua sensibilità riconosce
immediatamente, con disappunto, un motivo standard ripetuto
all'infinito.

14. Esempi di sfondo
Esempio di sfondo a
tinta unita con
colore troppo forte.

15. Esempi di sfondo
Esempio di sfondo
composto troppo
forte.

16. Esempi di combinazione colore testo/
sfondo
Sfondo Sfondo
Sfondo molto mediamente semplice, con
pieno che pieno che pochi colori
rende poco rende che rende
leggibile il abbastanza facilmente
testo leggibile il leggibile il
testo testo

17. Esempi di sfondo
Esempio di sfondo
con contenuto della
pagina posto in
risalto con elementi
di colore diverso
dello sfondo

18. Regole per la composizione della
griglia
Lo schermo può essere suddiviso in aree in base alla loro visibilità, ovvero alla
facilità con la quale vengono viste:
1. L’area in alto è quella che viene vista per prima rispetto all’area sottostante
2. L’area posta a sinistra è quella che viene vista prima rispetto all’area
centrale e destra (sequenza di lettura da sinistra verso destra)
Partendo da queste considerazioni, le aree sono viste nel seguente ordine:
1. L’area in alto a sinistra è quella vista per prima in assoluto (occupata in
genere dal logo aziendale)
2. L’area in alto (a seguire verso destra) contenente la barra del titolo
3. L’area immediatamente sottostante occupata in genera dalla barra del menù
4. L’area immediatamente sotto a sinistra, occupata dal menù di secondo
livello
5. L’area di contenuto centrale e destro
6. Il piè di pagina

19. Un esempio di home page
Logo in Barra del
alto a dx titolo in
alto
Barra del
Sottomenù menù in alto
a sx
Informazioni
in primo
Informazioni
piano
in secondo
al centro
piano a dx

20. Il tipo di carattere
Il testo deve essere facilmente leggibile ed il tipo
carattere deve essere indipendente dal browser.
Esempi di carattere consigliati:
 Arial, Verdana, Helvetica, Trebuchet, Tahoma
Esempi di carattere sconsigliati:
 Times New Roman, Impact, Comic Sans MS, Georgia

21. La dimensione del carattere
La dimensione deve essere uguale o superiore ai
10pt.
Arial 10 pt Arial 12 pt
Verdana 10 pt Verdana 12 pt
Georgia 10 pt Georgia 12 pt
Trebuchet Ms 10pt Trebuchet Ms 12pt
Courier New 10 pt Courier New 12 pt
Times New Roman 10 pt Times New Roman 12 pt
Impact 10 pt Impact 12 pt
Comic Sans Ms 10 pt Comic Sans Ms 12 pt

22. Lo stile del carattere
Corsivo - Il testo corsivo attira l'occhio perché è in
contrasto con la forma del corpo del testo ma non è
molto leggibile sullo schermo
Grassetto - Il testo in grassetto conferisce risalto. Il
grassetto è leggibile su schermo, ma usate il grassetto
per evidenziare singole parole e non intere frasi.
Sottolineato - È buona norma evitare la sottolineatura
nei documenti web poichè generalmente indica un
collegamento ipertestuale.
Testo colorato – da evitare all’interno di una frase
perchè può essere confuso come link.

23. Esempio di testo con stili non
appropriati
Il 23 Aprile 2009 la Dirigente Scolastica, i docenti e gli alunni
partecipanti al Progetto Comenius “Allevamento eco-compatibile”
accoglieranno in Aula Magna la delegazione del Berufskolleg West
di Essen, partner dell’Ipsia nel progetto europeo. La delegazione,
composta da 14 alunni specializzati in Chimica, Meccanica e
Meccatronica, e da 5 docenti, coordinati dalla prof.ssa Andrea
Metschke, sarà impegnata nella realizzazione di una macchina
selezionatrice di mitili, alimentata da un impianto fotovoltaico.
La visita, che durerà fino al 30 Aprile, comprenderà, oltre alle
attività più inerenti alla costruzione della macchina, anche visite
aziendali e culturali alla scoperta del territorio piceno.
La coordinatrice del progetto, prof.ssa Stefania Talvacchia, augura a
tutti buon lavoro e buona permanenza.

24. Esempio di testo con stili appropriati
Il 23 Aprile 2009 la Dirigente Scolastica, i docenti e gli alunni
partecipanti al Progetto Comenius “Allevamento eco-compatibile”
accoglieranno in Aula Magna la delegazione del Berufskolleg West di
Essen, partner dell’Ipsia nel progetto europeo. La delegazione,
composta da 14 alunni specializzati in Chimica, Meccanica e
Meccatronica, e da 5 docenti, coordinati dalla prof.ssa Andrea
Metschke, sarà impegnata nella realizzazione di una macchina
selezionatrice di mitili, alimentata da un impianto fotovoltaico.
La visita, che durerà fino al 30 Aprile, comprenderà, oltre alle
attività più inerenti alla costruzione della macchina, anche visite
aziendali e culturali alla scoperta del territorio piceno.
La coordinatrice del progetto, prof.ssa Stefania Talvacchia, augura a
tutti buon lavoro e buona permanenza.

25. Il carattere: tipo, dimensione e
colore
Regola generale:
“utilizza sempre pochi font (tre o quattro)
e poche dimensioni, per dare alle pagine un
aspetto più chiaro, inoltre, per dare
uniformità, applica sempre lo stesso tipo di
carattere e la stessa combinazione di stili”

26. Le immagini
Evitate di usare troppe animazioni: creano
confusione
Troppe immagini disturbano il navigatore nella
ricerca delle informazioni
Ogni funzione del sito (ricerca, messaggio da
scrivere, freccia sinistra e destra) devono avere
sempre lo stesso simbolo grafico associato
Inserire nel sito il logo dell’azienda che
permette di tornare alla pagina principale
(home) del sito.

27. Riepilogo
1. Stabilite il layout (gabbia) della pagina
2. Stabilite il contenuto della barra del titolo
(intestazione) con logo aziendale, nome
dell’azienda
3. Stabilite il contenuto della barra del menù,
tenendo conto che va sempre inserita la voce
‘Home’, in prima posizione
4. Stabilite il contenuto del piè di pagina
5. Stabilite il contenuto della homepage e delle
pagine seguenti

28. Riepilogo
6. Non usate troppe immagini soprattutto
animate
7. Usate i caratteri consigliati, non più di
tre o quattro, e con poche dimensioni
diverse
8. Per il testo usate colori che non creano
molto contrasto con lo sfondo
9. Ad ogni funzione del sito associate
sempre la stessa immagine

29. Riepilogo
10.Usate uno sfondo troppo ricco di colori
e di oggetti per evitare di rendere poco
leggibile il testo