il progetto web ing. guadagno antonio inizio 2introduzione destinatari: v anno itis programmatori...

Il progetto web

Ing. Guadagno Antonio

Inizio

2IntroduzioneIntroduzioneDestinatari: V anno ITIS Programmatori progetto Abacus

Prerequisiti: Nozioni di informatica di base. Internet

ObiettiviCONOSCENZEAcquisire il concetto di accessibilità e leggibilità relativo alle pagine webAcquisire consapevolezza dell’importanza dello stile grafico in un sitoAcquisire conoscenza della relazione tra contenuti multimediali e velocità di connessioneCOMPETENZESaper strutturare una pagina web e un sito web in modo ottimale tenendo conto delle problematiche relative all’accessibilità, leggibilità e velocità di connessioneSaper promuovere un sito webCAPACITÀAcquisire la capacità di individuare la migliore rappresentazione tramite web per un particolare tipo di informazione

3IntroduzioneIntroduzione

Materiali didatticiLibro di testo - appunti dalle lezioni - test di valutazione

MetodologiaA seconda dei casi si farà uso di problem solving, brain-storming o della tradizionale lezione frontale.

VerificheVerifiche scritte e orali

Le verifiche scritte potranno essere articolate sia sotto forma di problemi ed esercizi di tipo tradizionale sia sotto forma di test.

Si farà ricorso anche alle tradizionali interrogazioni orali, utili soprattutto per valutare le capacità di ragionamento e i progressi raggiunti nella chiarezza e nelle proprietà di espressione

Tempi10 ore

4IndiceIndice1. Struttura di un sito2. Velocità di connessione3. I browser4. La risoluzione dello schermo5. Accessibilità6. Stile grafico7. L’Home Page8. Le pagine9. Leggibilità10. Le immagini digitali11. Promozione del sito12. Appendice13. Esempi

5Struttura di un Struttura di un sitosito

Un sito web ha una struttura ed una organizzazione tale per cui da una pagina di ingresso si accede alle pagine interne.

Nel gergo della rete si dice che la pagina di ingresso è la "Home" che può essere una pagina completa vera e propria, o una pagina di presentazione (Splash Page).

6Struttura di un sitoStruttura di un sito

7Struttura di un sitoStruttura di un sito

Se il sito ha un numero inferiore o pari a 10 pagine, è possibile prevedere un accesso diretto ad ognuna di esse a partire dalla Home Page.

Se invece il sito ha più di 10 pagine, è preferibile raggrupparle in macro sezioni in modo che dalla Home si giunga alla pagina della macro sezione e da qui alle singole pagine che ne fanno parte.

8Struttura di un sito

Home Page

Pagina 1 Pagina 2 … Pagina n

9Struttura di un sito

Home Page

Macro 1 Macro n

Sotto Macro 1

Sotto Macro 2

Sotto Macro 3

Pagina1

Pagina 2

Pagina 3

Pagina4

Pagina 5

Pagina 6

…

10Velocità di Velocità di connessioneconnessione

La velocità di connessione deve influenzare la progettazione delle pagine web.

La maggior parte dei visitatori, infatti, non sopporta che il caricamento di una pagina richieda più di 25-30 secondi.

È necessario quindi eseguire il collaudo del sito a varie velocità per evitare di perdere potenziali visitatori.


La velocità di visualizzazione delle pagine è influenzata dal numero e dalle dimensioni delle immagini.

Occorre quindi ridurre il numero immagini e la relativa dimensione, che non dovrebbe superare i 20-30 KB.


Si tenga conto della funzionalità cache del browser, riutilizzando le immagini e la grafica il più possibile; in tal modo verrà utilizzata la copia locale delle immagini, evitando di prelevarle di nuovo dal server web.

13I browserI browser

Ogni browser contiene un programma chiamato parser, che interpreta i tag contenuti in un file Html e visualizza i risultati sulla finestra del browser, che tecnicamente è chiamata canvas.

Purtroppo la logica di interpretazione dei tag Html varia da browser a browser e questo comporta differenti interpretazioni per il modo in cui deve essere visualizzato il file Html.

14I browserI browser

A questo punto viene da chiedersi per quale motivo si deve rendere il proprio lavoro compatibile con più browser.

Il motivo è molto semplice: l'obiettivo principale è la realizzazione di pagine accessibili al maggior numero possibile di utenti.

15 La risoluzione dello La risoluzione dello schermoschermo

La risoluzione dello schermo è un fattore su cui il progettista web non ha alcun controllo.

Bisogna allora decidere di realizzare il sito in modo da gestire più risoluzioni.

Si tenga conto che la presenza della barra di scorrimento orizzontale, al contrario di quella verticale, è considerata negativa e scomoda da molti utenti.

16 La risoluzione dello La risoluzione dello schermoschermo

È possibile progettare una pagina web che si adatti alle varie risoluzioni dello schermo; è un'ottima soluzione ma sicuramente più impegnativa rispetto ad un layout dalle dimensioni "fisse".

Si può anche pensare di realizzare diverse versioni del sito per ogni risoluzione, ma si tratta di una tecnica troppo laboriosa e poco usata.

17

1024 x 1024 x 768768

La risoluzione dello La risoluzione dello schermoschermo

800 x 600

18

1024 x 768


800 x 600

19

1024 x 768800 x 600


20AccessibilitàAccessibilità

Un'interfaccia ben progettata dovrebbe essere accessibile a chiunque sceglie di usarla.

Gli utenti possono variare per sesso, età, stili ed abilità; possono presentare limitazioni fisiche o conoscitive, differenze linguistiche o semplicemente di attitudini.


Un sito web accessibile è un sito che favorisce la fruizione e l’interazione rispettando le esigenze e le preferenze degli utenti, senza esclusioni.

L’obiettivo principale dell’accessibilità è consentire l’accesso al web alle persone che presentino disabilità, le quali generalmente fanno uso di tecnologie assistive per eliminare o ridurre la condizione di svantaggio.


Problemi comuni di accessibilità ai siti web includono: immagini senza testo alternativo; uso fuorviante di elementi strutturali nelle pagine;audio o video senza testo descrittivo; mancanza di informazione alternativa per gli utenti che non possono accedere a frames o script; siti con poco contrasto di colore.


L'accessibilità dei siti é strettamente legata, se non proprio fondata, sulla correttezza assoluta del codice (X)HTML e CSS in base alle direttive emesse dal W3C.

Questo comporta che occorre dapprima adeguare il suo (X)HTML e CSS ad un rigore formale non sempre semplice da ottenere.


Le "Linee Guida per l'accessibilità del contenuto web 1.0" sono una specifica del W3C che fornisce una guida per l'accessibilità ai siti web delle persone con disabilità.

La specifica contiene quattordici linee guida che descrivono come applicare quella linee guida a particolari caratteristiche delle pagine web.


La specifica definisce tre "livelli di conformità" per facilitare i riferimenti da parte di altre organizzazioni.

Il livello di conformità "Singola A" include i punti di controllo di priorità uno; il livello "Doppia A" include le priorità uno e due; il livello "tripla A" include le priorità uno, due e tre.

28AccessibilitàAccessibilità[Priorità 1]Lo sviluppatore di contenuti Web devedeve conformarsi al presente punto di controllo. In caso contrario, a una o più categorie di utenti viene precluso l'accesso alle informazioni presenti nel documento.

[Priorità 2]Lo sviluppatore di contenuti Web dovrebbedovrebbe conformarsi a questo punto di controllo. In caso contrario per una o più categorie di utenti risulterà difficile accedere alle informazioni nel documento.

[Priorità 3]Lo sviluppatore di contenuti Web puòpuò tenere in considerazione questo punto di controllo. In caso contrario, una o più categorie di utenti sarà in qualche modo ostacolata nell'accedere alle informazioni presenti nel documento.

30Stile GraficoStile Grafico

Quando una pagina viene visualizzata, appare come una vasta massa di forme e colori, con elementi in primo piano in contrasto con lo sfondo.

Solo secondariamente le informazioni specifiche vengono colte, prima grazie alle immagini, infine con l'analisi del testo.

31Stile Stile GraficoGrafico


La progettazione di un sito web comprende anche lo stile grafico di ogni singola pagina; senza un impatto visivo di forma, colore e contrasto le pagine possono risultare noiose e non attireranno il visitatore.


Una volta che si definisce il layout grafico e lo stile di gestione del testo e delle immagini, è necessario applicarlo a tutte le pagine del sito per creare ritmo e unità.

La coerenza del layout delle pagine consentirà agli utenti di adattarsi rapidamente e di prevedere con sicurezza la posizione delle informazioni.


Ogni pagina deve avere un titolo generale relativo al sito e che si colloca generalmente in alto.

Alcuni affiancano a questo titolo un logo anche molto semplice dove ci sia riferimento al nome del sito.


Altro elemento fondamentale è la barra del menu principale.

Essa è posta generalmente sotto la testata, in orizzontale, in modo da essere ben visibile.

Alcuni designer preferiscono inserire il menu verticalmente, a destra o a sinistra, altri la inseriscono in entrambe le posizioni.


Nel menu devono comparire tutti i collegamenti alle pagine del sito o, nel caso che ci siano decine di pagine, a quelle che fungono da macrosezioni.

In ogni caso, è fondamentale inserire nel menu un richiamo alla pagina principale per garantire all'utente di poter ricominciare la visita dall'inizio.


La parte centrale è quella più liberamente gestibile.

Si può decidere di mettere una mini colonna a destra o a sinistra, inserire due aree principali, produrre due colonne di uguali misure, inserire una terza colonna od effettuare altre scelte a seconda delle finalità del sito.

42L'home pageL'home page

Tutti i siti web sono organizzati attorno ad una home page che ne rappresenta il punto d'ingresso logico e fisico.

Essa è la pagina più visitata di ogni sito e su essa si basa la prima impressione dei navigatori.

Se gli utenti avranno un'impressione negativa, difficilmente continueranno la navigazione delle vostre pagine web.


La maggior parte degli utenti visualizzerà il sito su un monitor con dimensioni da 15 a 17 pollici, ed i 4/5 pollici verticali superiori sono l'unica parte sicuramente visibile sui loro schermi.

Per ottenere una navigazione efficiente, il numero di collegamenti nella parte superiore della home page deve essere massimo.


L'home page richiede una progettazione accurata considerando anche che non deve subire grosse variazioni una volta che il vostro sito è on line in quanto gli utenti resterebbero disorientati se una home page cambia eccessivamente ogni settimana.

46Le pagineLe pagine

Se una pagina web è troppo lunga non potrà essere visualizzata interamente sullo schermo e occorrerà scorrerla verticalmente.

Lo scorrimento verticale può causare la perdita di contesto da parte dell'utente, in quanto gli elementi come i titoli dei documenti, gli identificatori del sito, i link alle altre pagine scompaiono dallo schermo.


Dovendo progettare pagine lunghe è opportuno inserire pulsanti tipo "Torna Su" a intervalli regolari di circa 300 pixel (equivalenti ad una schermata piccola); in tal modo l'utente non dovrà mai scorrere più di metà schermo per trovare un pulsante di navigazione che lo riporti all'inizio della pagina.


Ogni pagina di un sito web dovrebbe contenere titolo, autore, copyright e collegamento alla home page.

Poiché è frequente che le pagine siano stampate o salvate su disco, senza queste informazioni è difficile risalire all'origine di un documento.

51LeggibilitàLeggibilità

La leggibilità dei caratteri sullo schermo del computer è quasi 300 volte inferiore rispetto a quella di una tipica pagina di rivista (1.440.000 punti per pollice quadrato).


Il contrasto visivo tra i vari caratteri e i blocchi di testo, i titoli e lo spazio circostante sono fondamentali per ottenere una buona tipografia.

L'occhio e il cervello del lettore sono attratti da un contrasto forte e da motivi caratteristici che è possibile ottenere solo attraverso un progetto accurato delle pagine.


Il giusto equilibrio tra grafica e testo aiuta il lettore a determinare la giusta posizione e l'organizzazione delle informazioni e ad aumenta la leggibilità del documento.

I margini, usati in modo coerente, aggiungono interesse visivo creando un contrasto tra lo spazio positivo dello schermo (testo, grafica) e lo spazio negativo (sfondo).


Esistono strumenti tipografici che permettono di dare risalto ad un blocco di testo, ma è importante non utilizzarli in modo errato.

A tale scopo si analizzeranno in dettaglio quali sono e quando vanno usati gli strumenti tipografici che permettono di dare risalto al testo.


CorsivoCorsivo - Il corsivo attira l'occhio perché è in contrasto con la forma del corpo del testo e va utilizzato per parole o frasi da enfatizzare.

Poiché la leggibilità del testo in corsivo è inferiore rispetto al testo normale della stessa misure, è preferibile non usarlo per lunghi blocchi di testo.


GrassettoGrassetto - Il testo in grassetto conferisce risalto essendo in contrasto con il colore del testo normale.

Il grassetto è abbastanza leggibile su schermo, ma grossi blocchi di testo in grassetto ne fanno perdere quindi il risalto.


SottolineatoSottolineato - Il testo sottolineato, nei documenti web, ha un significato speciale funzionale, indicando infatti un collegamento ipertestuale.

Se allora si usa testo sottolineato, quasi sicuramente sarà confuso con un collegamento ipertestuale.


Testo ColoratoTesto Colorato - È sconsigliabile usare testo colorato all'interno del testo, perché i lettori penseranno che si tratta di un collegamento ipertestuale.

Tuttavia, il testo colorato funziona bene per dare risalto ai titoli di sezione e di paragrafo.

Scegliere allora colori in contrasto con lo sfondo della pagina e con i colori predefiniti dei collegamenti web.

63Le immagini digitaliLe immagini digitali

Ogni immagine digitale è caratterizzata da tre aspetti:

Risoluzione: rapporto tra dimensioni e qualità visiva dell'immagine;

Profondità di colore: numero massimo di colori possibili; si misura in bit: 16 bit (65mila colori), 24 bit (milioni di colori).

Formato: formato di salvataggio o di codifica del file (BMP, TIFF, GIF, JPEG, PNG).


Ciascuno di questi tre parametri concorre a determinare le dimensioni complessive dell'immagine; ad esempio, a parità di risoluzione, una maggiore profondità di colore produce un file più ingombrante.

Attualmente nel Web vengono usati solo tre formati per le immagini: GIF, JPEG e PNG.

66Promozione del sitoPromozione del sito

Dato che nel web esistono milioni di pagine, può essere difficile farsi notare.

Si deve allora pubblicizzare quanto più possibile il proprio indirizzo URL, utilizzando tutti i mezzi disponibili.

Per cercare informazioni sul web nella maggior parte dei casi si usano i motori di ricerca.


Per sfruttare il comportamento dei motori di ricerca occorre:

Utilizzare titoli significativi; tutte le pagine del sito web devono riportare informazioni efficaci all'interno dell'elemento <TITLE>, perché alcuni motori di ricerca leggono solo il contenuto dell'elemento <TITLE>.



Includere elementi <META>; tali elementi consentono di specificare delle informazioni invisibili all'utente, ma che i motori di ricerca possono leggere queste informazioni per catalogare le pagine del vostro sito.



E' consigliabile inserire l'attributo ALT in tutte le immagini della pagina; alcuni motori di ricerca leggono infatti il contenuto di questo attributo per la catalogazione


Lo scambio link è uno dei sistemi più usati per aumentare la popolarità e il posizionamento sui motori di ricerca.

Il PageRank (detto anche PR) è un valore numerico (che va dallo 0 al 10) che Google attribuisce ad ogni pagina web che indicizza. Il valore del Ranking di una pagina, non indica semplicemente il suo grado di "popolarità" ma si spinge oltre indicandone il grado di "autorevolezza".

76EsempiEsempi

Ufficio Scolastico Provinciale di Benevento

http://www.uspbenevento.it

Layout fisso a due colonne

77EsempiEsempi

Ministero della Pubblica Istruzione

http://www.pubblica.istruzione.it/

Layout fisso a tre colonne

78EsempiEsempi

Parco Divertimenti Mirabilandia Ravenna

http://www.mirabilandia.it/

Animazione in flash

79EsempiEsempi

Sito Ufficiale del Calcio Napoli

http://www.sscnapoli.it/

Layout a tre colonne con newsticker

80EsempiEsempi

lastampa.it

http://www.lastampa.it

Layout fluido a tre colonne

81EsempiEsempi

Mr.Price - 10.000 prodotti a portata di mouse

http://www.misterprice.it/home.asp


82EsempiEsempi

Il Portale del Governo Italiano

http://www.governo.it


83EsempiEsempi

.ConStile

http://www.constile.org/


84EsempiEsempi

Fiat

http://www.fiat.com

Filmati e Grafica spinta

85ApprofondimentiApprofondimenti

1. Come si può strutturare un sito web

2. Cos'è la Home page di un sito

3. Cosa si intende per "leggibilità" di una pagina web

4. Qual è l'importanza della grafica di una pagina web

5. Quali sono i più comuni layout di pagine web

86ApprofondimentiApprofondimenti

6. Quali sono i problemi connessi alla gestione delle immagini in una pagina web

7. Come è opportuno gestire il formato carattere (colore, stile) di una pagina web

8. Cosa si intende per "Promozione di un sito"

9. Come si può "promuovere" un sito

10. Cosa si intende per "accessibilità" di un sito

87DomandeDomande

Per favorire la promozione di un sito tramite un motore di ricerca è opportuno inserire le informazioni sul sito:

1. nella home page

2. nel titolo

3. In tag <meta>

88DomandeDomande

Rendere un sito web accessibile secondo le raccomandazioni W3C significa :

1. permettere l'accesso all'informazione contenuta nel sito a tutti senza limitazioni hardware o software

2. permettere l'accesso selettivo all'informazione contenuta nel sito al fine di impedire l’accesso ai minori

3. permettere l'accesso all'informazione contenuta nel sito anche a persone con disabilità fisiche di diverso tipo e a chi dispone di strumenti hardware e software limitati

89DomandeDomande

La sigla W3C sta ad indicare:

1. il world wide web

2. una associazione che ha lo scopo di sviluppare degli standard per il web

3. Un protocollo di trasmissione

90DomandeDomande

Un layout è liquido quando:

1. La pagina è allineata a sinistra

2. La pagina si adatta allo schermo

3. La pagina è un’animazione in flash

91DomandeDomande

Il PageRank indica:

1. La classifica dei siti più visti nella settimana

2. Il numero di visitatori giornalieri

3. La popolarità di un sito

92DomandeDomande

Il sottolineato:

1. Può essere usato per dare risalto ad un testo

2. Non deve essere usato per evitare confusione

3. Deve essere usato solo nei titoli

93DomandeDomande

Per ottenere il livello di conformità "Singola A":

1. Lo sviluppatore devedeve rispettare …

2. Lo sviluppatore dovrebbedovrebbe rispettare …

3. Lo sviluppatore puòpuò rispettare …

94AppendiceAppendice

Il web 2.0Il web 2.0

95Il web 2.0Il web 2.0


Originariamente il web è stato concepito come modo per visualizzare documenti ipertestuali statici (creati con l'uso del linguaggio HTML); questo approccio può essere definito come Web 1.0.

In seguito, grazie all'integrazione con database e all'utilizzo di sistemi di gestione dei contenuti (CMS), Internet si è evoluta con siti dinamici, come ad esempio i forum o i blog (diari in rete); questo web dinamico è stato da alcuni definito Web 1.5.


La possibilità di creazione e condivisione di contenuti su Web, tipica del Web 2.0, è data da una serie di strumenti on-line che permettono di utilizzare il web come se si trattasse di una normale applicazione.

In pratica il Web di seconda generazione è un Web dove poter trovare quei servizi che finora erano offerti da pacchetti da installare sui singoli computer.


Esempi di Web 2.0 sono FCKEditor e Writely, veri e propri elaboratori di testi e convertitori di formato, oppure NumSum, una sorta di foglio elettronico. Anche Google ha recentemente lanciato la sua suite di editor, chiamata Google Docs & Spreadsheet, e Microsoft sta per rilasciare una versione online della suite Office.

100 Il web 2.0Il web 2.0


Chi attualmente realizza contenuti fa in modo che questi possano essere fruiti non solo sul sito, ma anche attraverso canali diversi. Un esempio sono i feedfeed, cioè liste di elementi con un titolo (es. notizie di un giornale). I feed possono essere aggiornati e consultati di frequente con programmi appositi e quindi consentono di essere sempre a conoscenza dei nuovi contenuti inseriti su un sito senza doverlo visitare direttamente.


Oltre alla creazione condivisa di contenuto on-line, il Web 2.0 è caratterizzato dalla pubblicazione immediata del contenuto e alla sua classificazione e indicizzazione nei motori di ricerca, in modo che l'informazione sia subito disponibile a beneficio dalla comunità, realizzando in maniera veloce il ciclo di vita del content management.


Per la pubblicazione dei contenuti fanno da padrone sul Web (di oggi) i provider di blog come Blogger, Wordpress e Splinder, ma anche piattaforme commerciali come Microsoft Sharepoint Portal che nella prossima versione (3.0) accentuerà le sue caratteristiche di collaborazione diventando la parte server di Office 12.


Altra applicazione del Web 2.0 sono i cosiddetti web desktop (o webtopwebtop), una sorta di sistema operativo online su cui è possibile eseguire operazioni simili a quelle di un sistema operativo tradizionale.


Nella struttura del Web 2.0 vigono i principi di libera competizione e collaborazione propri dei sistemi Open Source.

Rispettando le stesse norme legali e a parità di know how chiunque può prendere parte alla rete e lo scambio di informazioni utente–utente svela autenticità o fallacia delle informazioni/prodotti quasi in tempo reale.

il progetto web ing. guadagno antonio inizio 2introduzione destinatari: v anno itis programmatori...

Documents