Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line Andiamo on-line Lezione 3...
-
Upload
elettra-mauri -
Category
Documents
-
view
213 -
download
0
Transcript of Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line Andiamo on-line Lezione 3...
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
Andiamo on-lineLezione 3
Conoscere le opportunità per arricchire un sito web
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
3Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
1Creatività e sviluppo dell'interfaccia grafica
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 sitoObiettivi:
– 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;
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
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
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
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
9Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
2Progettazione e sviluppo delle pagine a partire dalla bozza
grafica
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
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?
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
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.
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.
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.
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)
17Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
3Inserire contenuti diversi
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)
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.
20Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
Esempio video
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.
<embed src=“musica.mp3" autostart="true"></embed>
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:
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript"></script>
<a name="fb_share" type="icon_link" share_url="YOUR_URL">Pubblica sul tuo profilo Facebook</a>
Per FB: http://developers.facebook.com/docs/share
Per Twitter:http://twitter.com/about/resources/tweetbutton
23Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
Animazioni e web 2.0
Esistono dei semplicissimi script (javascript) che permettono animazioni e funzionalità anche molto avanzate.
Ogni tipo di script che trovate gratuitamente è solitamente accompagnato dalla documentazione necessaria ad usarlo:
Gallerie di immagini: lightbox 2 (http://www.huddletogether.com/projects/lightbox2/)
Funzionalità WEB 2.0: scriptacoulous: (http://madrobby.github.com/scriptaculous/)
24Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
4 Strumenti per migliorare la collaborazione:
calendari, newsletter, forum, ecc
25Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
Strumenti di collaborazione
• Il web non deve essere visto solo come contenitore di siti per comunicazione o per informazioni.
• Esistono tanti strumenti a supporto di attività di collaborazione:– Mailing List/Newsletter (www.newsletter.it / www.yahoo.it)
– Calendari/Gestione eventi (www.google.com / www.yahoo.it)
– Condivisione documenti (www.yahoo.it / www.4shared.com)
– Facebook (www.facebook.it)
26Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
5 Strumenti per la gestione di siti
dinamici
27Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
Siti dinamici: cosa sono e caratteristiche
• Sono siti i cui contenuti vengono aggiornati con maggiore frequenza, con maggiore interattività (dagli utenti), senza la necessità di conoscere i linguaggi e la struttura che stanno dietro al sito.
• Sono fatti tipicamente con softwares chiamati CMS (content management system) che hanno un’interfaccia visibile a tutti, una di amministrazione e un database.
• Separano i contenuti dall’interfaccia
28Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
Siti dinamici: cosa serve?
Esistono molti softwares open source. Non ne esiste uno migliore ma + adatto all’esigenza.(Joomla, Drupal, Wordpress...)
Hosting per il caricamento dei files e dei documenti o con software precaricato;
Servizio database per il salvataggio dei contenuti e delle opzioni;
Webmaster che conosca il prodotto per la customizzazione.
29Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
JOOMLA punti a favore
Punti a FAVORE Ha un back end di amministrazione in cui
è possibile gestire sia i contenuti che buona parte dell'organizzazione grafica
Ha template molto semplici (1 pagina) Tantissimi template gratuiti Ha una grande diffusione: Miglior
possibilità di chiusira dei bugs Tantissimi Plugins e Componenti Ottimo per la facilità di gestione, per la
duttilità e per le possibilità di ampliare le funzionalità base
Facilissimo da installare e da rendere operativo
30Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
JOOMLA punti a sfavore
Punti a SFAVORE Ha una grande diffusione:Maggior pericolo
di intrusione (hacking) Non ha una gestione approfondita delle
utenze
31Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
WORDPRESS – punti a favore
Più affine alla funzionalità di BLOG ma può essere usato anche come CMS
Punti a FAVORE Facilissimo da installare e rendere
operativo Tantissimi template gratuiti Tantissimi Plugins e Componenti Ottimo per la facilità di gestione,
per la duttilità e per le possibilità di ampliare le funzionalità base
Facilissimo da installare e da rendere operativo
Amministrazione molto semplice Possibilità di creare multisiti con
una stessa installazione Ha una grande diffusione: Miglior
possibilità di chiusura dei bugs Buona gestione delle utenze
32Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
WORDPRESS – punti a sfavore
Punti a SFAVORE Creazione di template/customizzazione grafica un po'
complessa Molto diffuso: possibili introduzioni di hackers
33Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
Compiti per il laboratorio
Il prossimo incontro prevede lo sviluppo vero e proprio del sito, preparare:
Albero dei contenuti Mockups Template grafici
Da avere installati: NVU (editor HTML) GIMP(editor grafico) o altro programma di
grafica FTPZilla (trasferimento FTP)
E' necessario inoltre avere uno spazio HOSTING su cui pubblicare il sito