• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Guida Di Stile:SdcExpert@Work
 

Guida Di Stile:SdcExpert@Work

on

  • 839 views

 

Statistics

Views

Total Views
839
Views on SlideShare
838
Embed Views
1

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 1

http://robertasanzani.blogspot.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Guida Di Stile:SdcExpert@Work Guida Di Stile:SdcExpert@Work Document Transcript

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