GUIDA DI STILE

SITO: SdC Experts At Work - Il Social network

professionale della facoltà di Scienze della
Comunicazione

Autori:
Vincenzo De Simone

Mario Di Bona

Sonia Mendola

Roberta Sanzani

Luigi Tranchina

Versione del documento: 1.0

Data di emissione del documento: 9 Luglio 2008

1
Indice
Indice .............................................................................................................................................. 2
Premessa ........................................................................................................................................ 3
Guida di stile ................................................................................................................................... 3
Logo ............................................................................................................................................ 5
Header ........................................................................................................................................ 5
Appendice: Verifica e convalida del prototipo ................................................................................. 6
Tempi d’accesso .......................................................................................................................... 6
Reperibilità del sito ..................................................................................................................... 6
Compatibilità con diversi browser ............................................................................................... 6
Accessibilità da parte di utenti disabili ......................................................................................... 6

2
Premessa
Il presente documento specifica le linee guida di carattere grafico e tipografico che devono essere
osservate nella realizzazione delle pagine di SdC Experts At Work.

Segue in appendice un breve report sulle verifiche di accessibilità legate al visual design.

Guida di stile
Come si vedrà nel documento dei requisiti, per lo sviluppo di questa prima release si utilizzerà la
piattaforma Ning, la quale offre una vasta gamma di strumenti per la definizione della grafica e dello stile
visivo dei Social network in esso sviluppabili.

Figura 1 - Screenshot del pannello gestisci

All’interno delle opzioni di gestione dell’amministratore è sufficiente ciccare sulla sezione “Aspetto” per
accedere alle varie opzioni di personalizzazione.

La piattaforma offre innanzitutto la possibilità di scegliere fra molteplici stili predefiniti, i quali si
differenziano fra loro non soltanto per tipologia di font utilizzato, temi e colori, ma anche rispetto

3
all’ingombro occupato dai vari costituenti le pagine. Una volta scelto lo stile, è possibile operare delle
modifiche operando scelte nel riquadro successivo:

La sezione “Header, Footer & Sides” consente di personalizzare i corrispondenti elementi, inserendo ad
esempio un proprio logo assieme al nome del Social network, con la possibilità di variare il colore del
carattere e delle fasce lateriali, superiori e inferiori. Nel nostro caso, in riferimento al linguaggio “Sapienza”
si è scelto come colori per Header Background e barre laterali le tonalità di rosso (#822433) e bianco
(#FFFFFF).

Riguardo “Body & Content Area”, mentre il colore di sfondo è stato lasciato il bianco, il font utilizzato è il
Gill Sansper i titoli e il Trebuchet MS per il corpo con interlinea del valore di 1,15. Sono state lasciate di
default le impostazioni relative alle dimensioni del carattere, mentre per quanto riguarda i colori utilizzati
per il testi sono stati impiegate le seguenti tinte:

- Testi = #000066

- Link = #339999

- Subheader color = #822433

- Subheader background = #D99A41

4
 Logo

Per quanto riguarda il logo, esso è stato realizzato secondo i seguenti passi:

- È stato tenuto conto della sigla “Sdc” come elemento di riconoscibilità. Le tre lettere sono state
scritte utilizzando il font Lucida Sans Serif in colore nero e poi composte insieme creando come
un unico carattere;

- Tramite Photoshop è stato creato il riflesso tipico dei loghi Web 2.0;

- È stata aggiunta la scritta “At Work” in carattere Handwriting - Dakota, di colore rosso;

- Sono stati inseriti come elementi caratterizzanti, le figure di tre ingranaggi fra loro collegati, a
rappresentare la sinergia, possibile attraverso il sito, fra studenti, professionisti e docenti
(ognuno simboleggiato da una ruota dentata).

Header

Ai fini di aumentare l’appealing dell’aspetto del social network, è stata realizzata un’illustrazione originale
per l’header rappresentante alcune silhouettes di fronte una città in costruzione. Lo stile riprende ancora
una volta i canoni del Web 2.0 e l’immagine simboleggia l’incontro fra più soggetti (giovani e manager) in
vista di uno sviluppo e di una crescita professionale, nell’attuale scenario informativo e comunicazionale.

La presenza del logotipo Sapienza segnala il patrocinio dell’università all’iniziativa.

5
Appendice: Verifica e convalida del prototipo
Il nostro sito è parte ufficiale della facoltà di Scienze della Comunicazione, pertanto è sottoposto a tutti gli
obblighi legislativi contenuti nella legge Stanca (4/2004), in materia di accessibilità da parte di utenti
disabili. Conformemente al regolamento di attuazione della legge, è prevista una verifica tecnica
accompagnata da una verifica soggettiva, la prima condotta da tecnici ed esperti, la seconda invece svolta
insieme ad un gruppo di utenti (anche disabili) che testeranno servizi già giudicati accessibili nella prima
analisi. A seguire, i risultati di alcuni test condotti a riguardo dei fattori giudicati sensibili ai fini della
valutazione dell’accessibilità del sito

Tempi d’accesso
La homepage ad una prima analisi risulta eccessivamente carica di contenuti. Una pagina sostenibile in
genere pesa tra i 50 e i 100 kb, mentre nel nostro caso si arriva a poco oltre i 200kb. Va quindi tenuto sotto
controllo questo aspetto in particolare, e alleggerito il carico in kb. Le pagine interne tuttavia si comportano
molto meglio, mostrando un peso sempre compreso tra i 20 e i 40 kb, rivelandosi quindi estremamente
leggere. Altri fattori non possono essere tenuti sotto controllo in questa fase. I tempi di accesso infatti
dipendono anche dalle prestazioni dei server, e dalla banda riservata al servizio. Essendo l’intero sito
ospitato da Ning, non siamo in grado di operare modifiche su questo aspetto specifico.

Reperibilità del sito

Per quanto riguarda la reperibilità, è sicuramente da sottolineare come la presenza del suffisso “.ning”
all’interno dell’URL possa inficiare sull’immediatezza e la memorizzazione dello stesso. Tuttavia Ning offre
la possibilità d’acquisto di un nome di dominio autonomo al prezzo di 5$ al mese, (una soluzione che quindi
ci sentiamo di consigliare). Va inoltre prevista un’attività di Search Engine Optimization, compatibilmente
con le possibilità fornite da Ning. Digitando infatti nei principali motori di ricerca il nome del sito,
quest’ultimo non compare mai prima della terza pagina di risultati. Inoltre accompagnando a “ning”
l’acronimo storico che da anni contraddistingue la facoltà (“sdc”), compaiono comunque risultati inerenti a
siti di altre iniziative della facoltà. L’utilizzo di alternative text coerenti potrà senza dubbio favorire e
migliorare l’indicizzazione del sito.

Compatibilità con diversi browser

Il sito risulta attualmente compatibile con diversi browser. Testato con Internet Explorer, Firefox e Safari,
non ha mostrato, infatti, nessuna sostanziale differenza di layout o visualizzazione in generale. Tale
compatibilità si estende anche ai sistemi operativi, dal momento che tanto in Windows Xp, che su un
sistema Linux (distribuzione Ubuntu) e Mac, non si sono riscontrati problemi o differenze di alcun tipo.

Accessibilità da parte di utenti disabili

Per quanto riguarda i colori, è stato effettuato un test sui tre diversi tipi di daltonismo. Le prove per
deuteranopia e pronatopia, (forma simili legate alla difficoltà di distinguere le tinte colori di rosso da quelle
di verde) ha mostrato un alterato senso del colore da parte degli utenti affetti da questa disabilità.

6
Come nei primi due casi, anche per la tritanopia (forma molto rara di cecità ai colori giallo e blu) le
alterazioni appaiono più o meno le stesse.

Va comunque sottolineato come nonostante la falsificata percezione cromatica, la fruizione dei contenuti i
contenuti risulti tuttavia soddisfacente anche da utenti affetti da tali disabilità, con una leggibilità ancora su
ottimi livelli e una chiara distinzione fra le diverse sezioni della pagina. Il sito risulta altresì accessibile anche
per utenti non vedenti, per mezzo di lettura tramite gli appositi browser vocali.

Il layout della pagina è di tipo fisso, ottimizzato per una risoluzione di 1024x768.

Aumentando le dimensioni dei caratteri tramite il browser, dopo due zoom la pagina arriva ad essere quasi
illeggibile, necessitando cioè di uno scrolling verticale anche solo per visualizzare i primi contenuti al di
sotto dell’header.