La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line Andiamo on-line Lezione 3 Conoscere le opportunità per arricchire un sito web.

Presentazioni simili


Presentazione sul tema: "Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line Andiamo on-line Lezione 3 Conoscere le opportunità per arricchire un sito web."— Transcript della presentazione:

1 Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line Andiamo on-line Lezione 3 Conoscere le opportunità per arricchire un sito web

2 2Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line Cosa tratteremo 1.Creatività e sviluppo dell'interfaccia grafica (prerequisiti, i passi, caratteristiche dell’interfaccia e dell’usabilità) 2.Progettazione e sviluppo delle pagine a partire dalla bozza grafica (taglio immagini, progettazione HTML, sviluppo stili grafici CSS) 3.Inserire contenuti diversi: documenti, immagini, animazioni, audio, video, ecc 4.Strumenti per migliorare la collaborazione: calendari, newsletter, forum, ecc 5.Siti dinamici: blog, csm, ecc

3 Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line 3 1 Creatività e sviluppo dell'interfaccia grafica

4 4Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line L’interfaccia e i requisiti Target: –sapere a chi è rivolto il sito è indispensabile per ottimizzare i contenuti e la modalità/facilità dell’usabilità del sito Obiettivi: –concorrono sia a sviluppare alcune funzionalità (un modulo per inviare mail, modulo per iscrizione ad una mailing list…) che a organizzare e scegliere i contenuti Contenuti: –Organizzare i contenuti del sito come un alberatura (es: Home, Chi siamo, I progetti, Le news…) Quando parliamo di Internet, l'interfaccia è quell'insieme di strumenti (immagini, scritte e testi) che consentono la navigazione nel sito. Per progettare un interfaccia è necessario avere un piano di comunicazione che individui: target, obiettivi e contenuti;

5 5Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line Caratteristiche di un’interfaccia I requisiti principali che caratterizzano una buona interfaccia: chiarezza, semplicità e leggerezza. –pagine leggere da caricare; –permettere di individuare le principali aree tematiche; –far orientare il visitatore, cioè far capire dove si trova in ogni momento; –consentire di passare agevolmente da un argomento all'altro con percorsi diretti e rapidi; –Avere una coerenza grafica all’interno del sito e del soggetto / associazione; –l’accessibilità? (in alcuni casi è un requisito); –conoscere gli “standard” (logo in alto a sinistra, menu in alto, menu contestuale destra o sinistra…) Le interfacce sono sviluppate per servire l'utente, non per dimostrare la nostra bravura

6 6Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line La creatività e i passi Osservare i siti “concorrenti”, individuando punti di forza e limiti In base all’albero dei contenuti organizzare la navigazione (main menu, menù contestuali…) tenendo conto dei principi dell’usabilità Creazione di uno o più mockups (pagine interne, schede prodotto, fotogallery) individuando gli ‘ingombri’ Personalizzare il sito dando l’impronta del soggetto Sviluppo del progetto grafico

7 7Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line Esempio di albero del sito Organizzazione grafica dei contenuti e della navigazione

8 8Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line Esempio di mockups Esempio di mockup di una homepage Esempio di mockup di una pagina interna

9 Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line 9 2 Progettazione e sviluppo delle pagine a partire dalla bozza grafica

10 10Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line Progettazione:Il taglio della grafica Suddivisione delle diverse aree grafiche come da mockup Scelta tra grafica e stili Taglio delle immagini

11 11Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line Progettazione: Un caso Testo con sfondo o immagine? Testo Sfondo o immagine?

12 12Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line Progettazione: struttura pagina In base al mockup progettare la struttura dell’HTML della pagina Creare 1 template per ogni mockup

13 13Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line Sviluppo: inclusione immagini e testo Dai templates HTML, iniziare lo sviluppo delle singole pagine aggiungendo contenuti ed immagini.

14 14Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line Sviluppo: formattazione tipografica I contenuti di ogni pagina devono essere organizzati come in un libro rispettando la tipografia ‘tradizionale’ (titolo1, titolo2, paragrafo). Questo permette una buona compatibilità coi motori di ricerca ed un primo passo per l’accessibilità. Provvedere alla formattazione tipografica come da mockup (dimensione testo, colore titoli, spaziatura paragrafi…) attraverso i CSS.

15 15Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line Sviluppo: controllo del sito Testare il sito in locale verificando: –Che tutti i links funzionino; –Che tutto il sito sia visualizzabile sia con IE che con Firefox (ed eventualmente altri browser); –Che eventuali funzionalità funzionino (invio mail, iscrizione a servizi, login); –Che tutte le immagini siano visibili come da template grafico.

16 16Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line Alcune considerazioni Un buon sito deve permettere di raggiungere il contenuto ricercato in massimo 3 click; Non esiste una grafica giusta ed una sbagliata; La grafica/struttura del sito è consigliabile sia gestita attraverso figli stile esterni (CSS); La difficoltà di gestire un sito non sta nello sviluppo ma nel mantenimento e nella creazione di contenuti per tenerlo ‘vivo’. E’ meglio non avere un sito che avere un sito non aggiornato (news del 2006)

17 Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line 17 3 Inserire contenuti diversi

18 18Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line Premessa I browser interpretano solo file HTML ed immagini. Tutto ciò che i browser non riconoscono parte il download del file (tranne se esiste un plugin in grado di interpretare il file richiesto)

19 19Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line Come includere contenuti “diversi” Per includere: – documenti (word, excel, pdf, openoffice, ppt) basta metterli sul server tramite FTP e linkarli dalla pagina, automaticamente partirà il download. –animazioni, audio, video, e altri contenuti multimediali esistono 2 modi: inserirli su siti ‘appositi’ e includere l’HTML nel nostro sito oppure (+ complesso) metterli sul server via FTP e inserire un lettore sul nostro sito.

20 20Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line Esempio video

21 21Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line Inserimento audio Esiste un TAG per inserire l’audio, questo tag funziona solo grazie ad un plugin. Se il plugin non è presente viene proposta l’istallazione.

22 22Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line Condividere contenuti in Facebook Nella sezione developers di facebook trovate molte funzioni per interfacciarvi con facebook, ad esempio come condividere un contenuto sulla vostra pagina FB basta inserire:

Annunci Google