Andiamo on-line
Lezione 3
Conoscere le opportunità per
arricchire un sito web
Corso 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
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
2
1
Creatività e sviluppo dell'interfaccia grafica
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
3
L’interfaccia e i requisiti
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;
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…)
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
4
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
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
5
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
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
6
Esempio di albero del sito
• Organizzazione grafica dei contenuti e
della navigazione
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
7
Esempio di mockups
Esempio di mockup di una homepage
Esempio di mockup di una pagina interna
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
8
2
Progettazione e sviluppo delle pagine a partire dalla bozza
grafica
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
9
Progettazione:Il taglio della grafica
• Suddivisione delle diverse aree grafiche
come da mockup
• Scelta tra grafica e stili
• Taglio delle immagini
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
10
Progettazione: Un caso
Testo con
sfondo o
immagine?
Testo
Sfondo o
immagine?
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
11
Progettazione: struttura pagina
• In base al
mockup
progettare la
struttura
dell’HTML della
pagina
• Creare 1
template per
ogni mockup
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
12
Sviluppo: inclusione immagini e testo
Dai templates HTML, iniziare lo sviluppo delle singole pagine
aggiungendo contenuti ed immagini.
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
13
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.
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
14
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.
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
15
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)
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
16
3
Inserire contenuti diversi
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
17
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)
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
18
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.
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
19
Esempio video
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
20
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>
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
21
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
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
22
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/)
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
23
4
Strumenti per migliorare la collaborazione:
calendari, newsletter, forum, ecc
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
24
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)
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
25
5
Strumenti per la gestione di siti
dinamici
Corso Web CSV in collaborazione con S.C.Re.T. – Andiamo on-line
26
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.
Web CSV in collaborazione
con S.C.Re.T.
–
27
•Corso
Separano
i contenuti
dall’interfaccia
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.
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
28
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
Pluginscon
e S.C.Re.T.
Componenti
Corso
Web CSV in collaborazione
–
29
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
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
30
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
Corso Web CSV in collaborazione con S.C.Re.T. –
31
Andiamo
on-line

Tantissimi
Plugins e Componenti
WORDPRESS – punti a sfavore
Punti a SFAVORE


Creazione di template/customizzazione grafica un po'
complessa
Molto diffuso: possibili introduzioni di hackers
Corso Web CSV in collaborazione con S.C.Re.T. –
Andiamo on-line
32
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)
Corso Web CSV in collaborazione con S.C.Re.T. –
33

GIMP(editor
grafico)
o
altro
programma
di
Andiamo on-line