La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Il progetto web Ing. Guadagno Antonio Inizio 2Introduzione Destinatari: V anno ITIS Programmatori progetto Abacus Prerequisiti: Nozioni di informatica.

Presentazioni simili


Presentazione sul tema: "Il progetto web Ing. Guadagno Antonio Inizio 2Introduzione Destinatari: V anno ITIS Programmatori progetto Abacus Prerequisiti: Nozioni di informatica."— Transcript della presentazione:

1

2 Il progetto web Ing. Guadagno Antonio Inizio

3 2Introduzione 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 dellimportanza 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 allaccessibilità, 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

4 3Introduzione Materiali didattici 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

5 4Indice 1. Struttura di un sito Struttura di un sito 2. Velocità di connessione Velocità di connessione 3. I browser I browser 4. La risoluzione dello schermo La risoluzione dello schermo 5. Accessibilità Accessibilità 6. Stile grafico Stile grafico 7. LHome Page LHome Page 8. Le pagine Le pagine 9. Leggibilità Leggibilità 10. Le immagini digitali Le immagini digitali 11. Promozione del sito Promozione del sito 12. Appendice Appendice 13. Esempi Esempi

6 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).

7 6 Struttura di un sito

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

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

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

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

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

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

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

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

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

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

18 x 768 La risoluzione dello schermo 800 x 600

19 x 768 La risoluzione dello schermo 800 x 600

20 x x 600 La risoluzione dello schermo

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

22 21Accessibilità Un sito web accessibile è un sito che favorisce la fruizione e linterazione rispettando le esigenze e le preferenze degli utenti, senza esclusioni. Lobiettivo principale dellaccessibilità è consentire laccesso al web alle persone che presentino disabilità, le quali generalmente fanno uso di tecnologie assistive per eliminare o ridurre la condizione di svantaggio.

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

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

25 24Accessibilità

26 25Accessibilità

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

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

29 28Accessibilità [Priorità 1] deve 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] dovrebbe 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] può 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.

30 29Accessibilità

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

32 31 Stile Grafico

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

34 33 Stile Grafico

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

36 35 Stile Grafico

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

38 37 Stile Grafico

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

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

41 40 Stile Grafico

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

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

44 43 L'home page

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

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

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

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

49 48 Le pagine

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

51 50 Le pagine

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

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

54 53Leggibilità

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

56 55Leggibilità

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

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

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

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

61 60Leggibilità

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

63 62Leggibilità

64 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).

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

66 65 Le immagini digitali

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

68 67 Promozione del sito

69 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, perché alcuni motori di ricerca leggono solo il contenuto dell'elemento.

70 69 Promozione del sito

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

72 71 Promozione del sito

73 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

74 73 Promozione del sito

75 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".

76 75 Promozione del sito

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

78 77Esempi Ministero della Pubblica Istruzione Layout fisso a tre colonne

79 78Esempi Parco Divertimenti Mirabilandia Ravenna Animazione in flash

80 79Esempi Sito Ufficiale del Calcio Napoli Layout a tre colonne con newsticker

81 80Esempi lastampa.it Layout fluido a tre colonne

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

83 82Esempi Il Portale del Governo Italiano Layout fluido a tre colonne

84 83Esempi.ConStile Layout fluido a tre colonne

85 84Esempi Fiat Filmati e Grafica spinta

86 85Approfondimenti 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

87 86Approfondimenti 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

88 87Domande 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

89 88Domande 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 laccesso 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

90 89Domande 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

91 90Domande Un layout è liquido quando: 1.La pagina è allineata a sinistra 2.La pagina si adatta allo schermo 3.La pagina è unanimazione in flash

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

93 92Domande 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

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

95 94Appendice Il web 2.0

96 95 Il web 2.0

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

98 97 Il web 2.0

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

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

101 100 Il web 2.0

102 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. feed 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.

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

104 103 Il web 2.0

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

106 105 Il web 2.0

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

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

109 108 Il web 2.0


Scaricare ppt "Il progetto web Ing. Guadagno Antonio Inizio 2Introduzione Destinatari: V anno ITIS Programmatori progetto Abacus Prerequisiti: Nozioni di informatica."

Presentazioni simili


Annunci Google