I siti web dinamici: loro progettazione e costruzione

prof. P. LosapioDocente di Informatica

STRUTTURA ED OBIETTIVI DEL CORSO

ObiettivoCostruire un sito web delle cattedrali

andriesi

Struttura 15 ore (5 lezioni) Periodo: Aprile - Giugno

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.

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

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

La ricerca e la visualizzazione di una pagina web

1. Si indica nel browser l’indirizzo della pagina web 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

BROWSERhttp://www.gazzetta.it

SERVER WEBwww.gazzetta.it

Come progettare un sito web

I passi e le regole di base da seguire per progettare un buon

sito web

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.

Griglia a dimensioni fisse

Tutte le componenti della pagina hanno una larghezza fissa.

Si può costruire con le tabelle e con i livelli (layer)

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)

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.

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.

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.

Esempi di sfondo

Esempio di sfondo a tinta unita con colore troppo forte.

Esempi di sfondo

Esempio di sfondo composto troppo forte.

Esempi di combinazione colore testo/ sfondo

Sfondo molto pieno che rende poco leggibile il testo

Sfondo mediamente pieno che rende abbastanza leggibile il testo

Sfondo semplice, con pochi colori che rende facilmente leggibile il testo

Esempi di sfondo

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

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

Un esempio di home page

Logo in alto a dx

Barra del titolo in

alto

Barra del menù in altoSottomenù

a sx

Informazioni in secondo piano a dx

Informazioni in primo

pianoal centro

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

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

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.

Esempio di testo con stili non appropriatiIl 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.

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.

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”

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.

Riepilogo

1. Stabilite il layout (gabbia) della pagina2. 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 pagina5. Stabilite il contenuto della homepage e delle

pagine seguenti

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

Riepilogo

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