La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Il progetto web Ing. Guadagno Antonio Inizio.

Presentazioni simili


Presentazione sul tema: "Il progetto web Ing. Guadagno Antonio Inizio."— Transcript della presentazione:

1 Il progetto web Ing. Guadagno Antonio Inizio

2 Introduzione Destinatari: V anno ITIS Programmatori progetto Abacus
Prerequisiti: Nozioni di informatica di base. Internet Obiettivi CONOSCENZE Acquisire il concetto di accessibilità e leggibilità relativo alle pagine web Acquisire consapevolezza dell’importanza dello stile grafico in un sito Acquisire conoscenza della relazione tra contenuti multimediali e velocità di connessione COMPETENZE Saper strutturare una pagina web e un sito web in modo ottimale tenendo conto delle problematiche relative all’accessibilità, leggibilità e velocità di connessione Saper promuovere un sito web CAPACITÀ Acquisire la capacità di individuare la migliore rappresentazione tramite web per un particolare tipo di informazione

3 Introduzione Materiali didattici Metodologia Verifiche Tempi
Libro di testo - appunti dalle lezioni - test di valutazione Metodologia A seconda dei casi si farà uso di problem solving, brain-storming o della tradizionale lezione frontale. Verifiche Verifiche 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 Tempi 10 ore

4 Indice Struttura di un sito Velocità di connessione I browser
La risoluzione dello schermo Accessibilità Stile grafico L’Home Page Le pagine Leggibilità Le immagini digitali Promozione del sito Appendice Esempi

5 Struttura di un sito 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).

6 Struttura di un sito

7 Struttura 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.

8 Struttura di un sito Home Page Pagina 1 Pagina 2 Pagina n

9 Struttura di un sito Home Page Macro 1 … Macro n Sotto Macro 1
Pagina1 Sotto Macro 2 Pagina 2 Pagina4 Pagina 3 Pagina 5 Pagina 6 Sotto Macro 3

10 Velocità di connessione
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 secondi. È necessario quindi eseguire il collaudo del sito a varie velocità per evitare di perdere potenziali visitatori.

11 Velocità di connessione
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 KB.

12 Velocità di connessione
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.

13 I 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.

14 I 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 schermo
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 schermo
È 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 La risoluzione dello schermo
800 x 600 1024 x 768

18 La risoluzione dello schermo
800 x 600 1024 x 768

19 La risoluzione dello schermo
800 x 600 1024 x 768

20 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.

21 Accessibilità 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.

22 Accessibilità 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.

23 Accessibilità 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.

24 Accessibilità

25 Accessibilità

26 Accessibilità 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.

27 Accessibilità 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.

28 Accessibilità [Priorità 1] [Priorità 2] [Priorità 3]
Lo sviluppatore di contenuti Web deve 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 dovrebbe 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ò 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.

29 Accessibilità

30 Stile 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.

31 Stile Grafico

32 Stile Grafico 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.

33 Stile Grafico

34 Stile Grafico 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.

35 Stile Grafico

36 Stile Grafico 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.

37 Stile Grafico

38 Stile Grafico 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.

39 Stile Grafico 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.

40 Stile Grafico

41 Stile Grafico 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.

42 L'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.

43 L'home page

44 L'home page 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.

45 L'home page 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.

46 Le 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.

47 Le pagine 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.

48 Le pagine

49 Le pagine 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.

50 Le pagine

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

52 Leggibilità 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.

53 Leggibilità

54 Leggibilità 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).

55 Leggibilità

56 Leggibilità 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.

57 Leggibilità Corsivo - 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.

58 Leggibilità Grassetto - 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.

59 Leggibilità Sottolineato - 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.

60 Leggibilità

61 Leggibilità Testo 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.

62 Leggibilità

63 Le 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).

64 Le immagini digitali 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.

65 Le immagini digitali

66 Promozione 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.

67 Promozione del sito

68 Promozione del sito 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>.

69 Promozione del sito

70 Promozione del sito Per sfruttare il comportamento dei motori di ricerca occorre: 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.

71 Promozione del sito <META name="keywords" CONTENT="ferrari, ferrari world, ferrari on line, ferrari logo, ferrari maranello, ferrari auto, enzo ferrari, ferrari days, ferrari challenge, ferrari club, ferrari trofeo pirelli, ferrari coppa shell, ferrari community, ferrari official community, you&ferrari, you & ferrari, cavallino rampante, ferrari maranello, ferrari corse clienti, ferrari official community, auto ferrari, ferrari enzo, ferrari fxx, ferrari 360 Challenge, ferrari F430 Challenge, ferrari enzo, ferrari F430, ferrari enzo, ferrari F50, ferrari testarossa, ferrari modena, ferrari enzo, ferrari 360, ferrari 355, ferrari 360 modena, ferrari 575m maranello, ferrari superamerica, ferrari F430 spyder, ferrari 612 Scaglietti, ferrari spyder, ferrari mondial, ferrari gto, scuderia ferrari, ferrari f1, ferrari schumacher, schumacher ferrari, michael schuhmacher ferrari, acer ferrari, ferrari racing days, wallpaper ferrari, ferrari wallpaper, ferrari bilder, ferrari modellauto, ferrari modelle, ferrari formel 1, ferrari kufstein, ferrari aufkleber, formel 1 team ferrari, ferrari store, ferrari shop, formel 1 ferrari, ferrari fanshop, lego ferrari">

72 Promozione del sito Per sfruttare il comportamento dei motori di ricerca occorre: 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

73 Promozione del sito

74 Promozione del sito 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".

75 Promozione del sito

76 Esempi Ufficio Scolastico Provinciale di Benevento
Layout fisso a due colonne

77 Esempi Ministero della Pubblica Istruzione
Layout fisso a tre colonne

78 Esempi Parco Divertimenti Mirabilandia Ravenna
Animazione in flash

79 Esempi Sito Ufficiale del Calcio Napoli http://www.sscnapoli.it/
Layout a tre colonne con newsticker

80 Esempi lastampa.it Layout fluido a tre colonne

81 Esempi Mr.Price - 10.000 prodotti a portata di mouse
Layout fluido a tre colonne

82 Esempi Il Portale del Governo Italiano http://www.governo.it
Layout fluido a tre colonne

83 Esempi .ConStile Layout fluido a tre colonne

84 Esempi Fiat Filmati e Grafica spinta

85 Approfondimenti Come si può strutturare un sito web
Cos'è la Home page di un sito Cosa si intende per "leggibilità" di una pagina web Qual è l'importanza della grafica di una pagina web Quali sono i più comuni layout di pagine web

86 Approfondimenti Quali sono i problemi connessi alla gestione delle immagini in una pagina web Come è opportuno gestire il formato carattere (colore, stile) di una pagina web Cosa si intende per "Promozione di un sito" Come si può "promuovere" un sito Cosa si intende per "accessibilità" di un sito

87 Domande Per favorire la promozione di un sito tramite un motore di ricerca è opportuno inserire le informazioni sul sito: nella home page nel titolo In tag <meta>

88 Domande Rendere un sito web accessibile secondo le raccomandazioni W3C significa : permettere l'accesso all'informazione contenuta nel sito a tutti senza limitazioni hardware o software permettere l'accesso selettivo all'informazione contenuta nel sito al fine di impedire l’accesso ai minori 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

89 Domande La sigla W3C sta ad indicare: il world wide web
una associazione che ha lo scopo di sviluppare degli standard per il web Un protocollo di trasmissione

90 Domande Un layout è liquido quando: La pagina è allineata a sinistra
La pagina si adatta allo schermo La pagina è un’animazione in flash

91 Domande Il PageRank indica:
La classifica dei siti più visti nella settimana Il numero di visitatori giornalieri La popolarità di un sito

92 Domande Il sottolineato: Può essere usato per dare risalto ad un testo
Non deve essere usato per evitare confusione Deve essere usato solo nei titoli

93 Domande Per ottenere il livello di conformità "Singola A":
Lo sviluppatore deve rispettare … Lo sviluppatore dovrebbe rispettare … Lo sviluppatore può rispettare …

94 Appendice Il web 2.0

95 Il web 2.0

96 Il 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.

97 Il web 2.0

98 Il web 2.0 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.

99 Il web 2.0 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.0

101 Il 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 feed, 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.

102 Il web 2.0 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.

103 Il web 2.0

104 Il web 2.0 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.

105 Il web 2.0

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

107 Il web 2.0 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.

108 Il web 2.0


Scaricare ppt "Il progetto web Ing. Guadagno Antonio Inizio."

Presentazioni simili


Annunci Google