8/3/2019 2 - Web Design

1/68

VOLUME 1

I I co rso pe r im pa ra re a rea l i zzareil p ro prio s ito 0 c re ars i u na p ro fe ss io ne

SOMMARIOWEB DESIGN .Progettazione Grafica

EDIZIONIMASTER

~ -- ~-_ - - - -- - - - -- ---- - --- -- - -

8/3/2019 2 - Web Design

2/68

W eb de s ign

ProgettazioneProgetto 1 - Organizzare Ie pagine di un site 2Progetto 2 - Comunichiamo i valori aziendali 5Progetto 3 - Prototipi per I'interfaccia Web 7Progetto 4 - Accessiblllta: il daltonismo 13Progetto 5 - Sviluppare applicazioni di qualita 15Progetto 6 - La net-semiology: comunicare bene su Internet 17Progetto 7 - Utilita dei motori di ricerca interni 21Progetto 8 - Infografica: come comunicare efficacemente 23Progetto 9 - La navigazione ideale per un site 27

GraficaProgetto 1 - Scegliamo il font giusto per il Web 2Progetto 2 - I colori: fondamenti e comunicazione 5Progetto 3 - I colori per gli oggetti grafici usati sui Web 9Progetto 4 - L'importanza delle sfondo 11Progetto 5 - Come nasce un'icona 17Progetto 6 - Lo stile giusto per i bottoni. 23Progetto 7 - I banner pubblicitari 29Progetto 8 - II giusto formato per Ie immagini usate sui Web 33Progetto 9 - Un banner animato in pochi passi 37

8/3/2019 2 - Web Design

3/68

W eb de sign

p r o g e t t a z i o n e

G uide p ra tic he e c on sig li p e r o rg an iz za re a l m e gliola s tr u ttu ra d i u n s ito W e b

8/3/2019 2 - Web Design

4/68

W eb de s ign _ PROGETT01110rgani~ar~lepag~n:diunsito '"

progetto Internetchiuso in gabbiaS egu ire Ie rego le oppu re a ffida rs i a lia creatrv i ta?Ecco come deve agire un buon p roge ttis ta p e r da r v itaa u n s ito e ffic ace e comun ica tivoE

Siste un m odo corretto di fare proget-tazio ne per ilWeb? L a creativita devenecessariam ente sottostare aU e reg oledi disposizione degli elem enti? N on ci sono

risp oste d efinitiv e a d om and e co me q ueste:e sem pre e soltan to com pito del prog ettistascegliere, in base al tipo di obiettivo ched ev e c en tr ar e, il m etod a utile a rag giu ng e-re il risu ltato. Po ssiam o d ire, tu ttav ia , cheu n b uo n p ro ge ttis ta e in gra do d i eap ireq ua nd o so tt os ta re a e er te r eg ole e q ua nd os pi ng er si u n po ' o lt re , i nf ran ge ndo I e e on -venzioni c on sa pe vo lm en te . V er o e , tuttavia,che alcune reg o le di base ci sono e vannorisp ettate , sop rattu tto q uand o si p arla d i im -p ag in azio ne , si tratti d i u n p ro do tto ed ito ria -le 0 d eU a re alizza zio ne d i p ag in e W eb .P A R T I A M O S U B I T OD A L L ' I M P A G I N A Z I O N EUna volta definiti gli obiettiv i che una co-m unicazion e d ev e av ere, e il momenta dim ettere su carta le idee. n proge tt o gr a fi eod eve essere sin tesi d i creativita, d ev e ri-uscire a eomunieare , m an ten en do ar mo niaed equilibrio tra 9li elem enti. L o stile che sisceglie d efin isce a sua v olta l'im pagin azio-

ne, la disposizione della grafica e del testo .Pe r le p ag in e W eb , p ur p ar ten do dalle stesselog iche di base d eU a g rafica tradizionale. sisegue un p erco rso p arallelo . S u I nte rn et 1 0s pa zio v er tic ale n on e sempre "definite": sideve, s op ra ttu tto , r ic or da re l ' impostazionein l arghe zz a e , d i c on se gu en za , l a d i sposi -z io n e v er ti ea le d e gl i e leme nt i. Lesigenza ela com prensione di cia che si sta leggendo ac ol po d ' oc ch io . Q u in di, i t ito li d elle s ez io nid ev on o essere b en v isib ili e non devonou ti li zz ar e c ar at te ri d iv e rs i, ne p os so no e ss er etroppo elaborati: la grandezza minim a concui si pu o rip ortare u na p arte testu ale e 8punti . Lassetto g ra fic o d ev e e ss er e eoerentee r ieonoscib il e in o gn i se zio ne .C H I U D I A M O L E . . . G A B B lEAffinche una pro du zio ne grafica sia defin i-ta, possiam o pensare di strutturare gli ele-m enti in "qabbie", I n g en ere, s i d ef in is eegabbia la suddivisione in orlzzontale ein v ertie ale d ella sp azio d i u na p ag in a: laseg mentazio ne determ ina d im ension i e p osi-z io ne d i imm ag in i, a ree te stu ali, d id as calie,margini. L a griglia deve riuscire a gestire e a" co ntenere" aree d i testa v ariab ili e, qu ind i,

essere, in un certo senso, "f less ibi le" , evitan-do la sensazione di disordine (figura 1). U navolta scelta la gabbia che si vuole adottare,e sempre bene fare prove, v erificando se lastru tturazione sia in grado di reggere anchein c as i e str em i. L o sp azio b ia ne o n on e une leme n to da s ot to v al ut ar e: la d is tan za d aim argin i e i blo cchi d i testa aiutano a in diriz-zare e a b loccare lo s gu ar do . S te ss o d is co rs oper gli allineamenti, che siano delim itati dafondini 0 lin ee (e , quindi. "esplicit i") 0 invi-s ib ili, r na u gu al me nte in div id ua ti d al l' o cc hio .L 'u te nt e d ev e p er ee pi re omoqeneita nelp ro g et to g ra fi eo che sta aUa base dell'im-paginato, senza che questa sensazione siaesasperata.L E R E G O L E E L E G R IG L I EP en sia mo d i d ov er i mm a gin ar e un a rti co lo ( 0post) in due pagine di form ato A4. Lart ico loe co mp osto da un titolo , un sottotitolo (cate-naccio) e da una parte testuale. Ci sono, poi,tre imm ag in i (fig ura 2) . Un a v olta im p os ta tii m ar gin i d ella p ag in a, e bene suddividerlau lt er io rm e n te in a re e simm e tr ie he . Se sipro cede con la suddiv isione in orizzontalee in verticale , si puo iniziare a indiv iduare

Figura 1 - A lcuni esem pi di creazione di una grig lia Figura 2 - Ecco com e potrebbe apparire un artico lo im paginato

8/3/2019 2 - Web Design

5/68

Org a n iz z a re Ie p ag in e d i u n s ito II PROGETTO 1 W eb de s ignl a g ab bi a a ll 'i nt er no d ell a q ua le in se rir e g lie lem en ti . N a tu ra lm e nt e l e p os sib ili ta s on oi nf in it e: b is og na s ce gli er e l a s ol uz io ne c hec i s em b ra p ili a de gu at a e c he c or ri sp on da a lr i su l tato f inale .Q U A L E IM P A G I N A T O ?P a ss iamo o ra a l d is co rs o Web , in c ui l e r eg o led i b a se , p u r r im a n en d o v a li de , d ev o no e ss er ea d at ta te a ll o s ch e rmo d e l c ompu te r.U n a d el le p rim e d e ci si on i d a p re nd e re i n f as ed i proge ttaz ione e l a s ce lt a d el la r is ol uz io -ne v ideo aU a quale adattare il p rogetto .S i puo sceg liere di progettare la pag ina alarg hezza fissa op pu re im po stare il site al a rghezza v a ri abi le .N e ll 'i rn p ag in a zi on e a l ar gh ez z a f is sa v ie n et ra la sc ia ta la l ar gh ez za d el la f in es tr a b row-ser (che si adatta a quella dello scherm od ell 'u te nt e, c he p uo p os se de re u n 1 6:9 0 un4 :3 ), " fi ss an d o" l e d im ens io n i d i v is ua li zz a -z io ne a q ue ll a r is olu zio ne c he e l a c on ve n-z io n e r ic o no sc iu ta . F in o a p o ch i a n ni q u es tap ro po rz io ne e ra sta bilita a 80 0x 60 0 p ix el(in genere si conteneva ulterio rm ente lal ar gh ez za d el la p ag in a a u na m is ur a i nto rn oa i 77 0 p ixe l), d a q ua lc he a nn a si p ro ge tta a1 0 24 x 76 8 ( co n u n a c o nt ra zi on e i n l ar gh e zz ad i c ir ca 9 00 p ix el ). Q u es ta e , o rm a i, l a s ce l-ta p ili com un e. S i h a p ieno co ntro llo su llav i su a li z zaz ione f in a le : l 'impost az ione de l t e-s to e d el le imm a gin i e p ro gr amm at a in z on eprecise.S e I e im p os ta zi on i s on o s ta te a ss eg na te c or -r ett am e nt e ( ri sp ett o a gl i s ta nd ar d a tt ua li)c on u n C ss a g estio ne d el la yo ut e d el te sto ,n on c i s ara n ess un tip o d i c am bia me nto . In

II- ~. -=-

I

I IF ig ura 3 - C om e d a u na s ud div is on e d ellag ri gl ia ( in a lt o) s i p uc r ic av ar e u na s tr ut tu -r az io ne d el la p ag in a ( in b as so )

C O S ' E L A S E Z I O N E A U R E A ?Con sezione aurea si indica, solitamente in arte e matematica, il rapporto fra duegrandezze disuguali, di cui la maggiore e medio proporzionale tra la minore e laloro somma a+bJ : a = a : bJ.In grafica e nell'impaginazione si puo semplificare dicendo che individuando imargini aurei secondo misurazioni precise (sequenza di Fibonacci> si traccianoIe diagonali che individueranno il punto da cui far partire il testa della pagina.L'utilizzo delle sezioni auree permette di ottenere un equilibrio non solomatematico, rna anche visivo, nell'impaginazione del testa rispetto ai margini dellapagina, una garanzia di equilibrio nella lettura.

'.. , - "~.,.__D

c as o c on tr ar io , l'u te nt e p uo s ce gli er e d i v i-s ua liz za re il c ara tte re d a " mo lto p ic co lo " a"mo lt o g ra n de ", c o sa c he p o tr eb b e, i n p a rt e,r ov in ar e la v is ua li zz az io ne d el la p ag in a, am en o c he tu tto c ia n on s ia s ta te o pp ortu na -men te ca lco la to.N e ll 'i rn p ag in a zi on e a l ar gh ez za v a ri ab il e(q uello ch e si d ice u n sito "flu id o" 0 "U -q uid o" ) le im po sta zio ni d i la rg he zz a so noe sp re ss e i n p e rc en tu a le . E u na sc elta po coc on sid era ta d ai W e b d esig ne r, p ro prio p eru na q ue stio ne d i s ca rs o c on tro llo su l ris ul-ta te fin ale . L o sp az io a d is po siz io ne v ariaa s ec on da d el la l ar gh ez za d el la f in es tr a d elb ro wser e q uin di a secon da d el m on ito r inc u i v i en e v i su a li zz at a. Q u e st o v u ol d ir e c h e,se il no stro uten te p ossiede un 1 6:9 e tienela finestra d el bro wser a tutta p agina, riu-s cir a a l eg ge re il c on te nu to d ell a p ag in a c onmol ta d i f fico lta .D A L L A T A B E L L AA L L A Y O U TA gli in izi e rano Ie tabelle, il cui con cettostesso e le ga to a q ue llo d i g rig lia 0 gabbiat ip og ra fi ca d i im p ag in az io ne . T en er c on tod i q ue sta e le me nto d i " co stru zio ne " d i u nap ag in a in f as e d i p ro ge tta zi on e c om p or ta vau na s ud di vi sio ne d ell e s ez io ni d el la p ag in ab e l d e fi ni te r na , p er a lc u ni a sp e tt i, v e ni va l i-

- F igu r a4Ipo tet ica impagina-z io ne s u tr e c ol on ne ,r is p et tando Ie a r eede l imi ta te da l lagriglia

m i ta ta l a c re at iv it a, s op ra tt ut to n e ll a d is po -s iz io n e d i g ra fi ca u n p o ' p i li e la b or at a. O s se r-v an do u na p ag in a c ostru ita c on u na ta be llae ra p os sib il e i nd iv id ua re l a s ud di vi sio ne inc el le , l a d is po si zi on e d eg li e lem en ti g ra fi ci ,i mp os ta ti c om e s fo nd i r ip et ut i 0 c om e im -m a gin i i ns er ite a ll 'i nt er no d i u na c ell a. O gg ii l t ag < ta b le > e arca ico , ed e s ta t o comp le t a-m en te s os ti tu it o d al l' ut il iz zo d ei f og li d i s ti -l e, c he p erme tto no m a gg io re l ib er ta e sp re s-s iv a n el la d is po si zi on e g ra fi ca e u n magg io recon tro ll o de i s ingo li e lemen ti .U tilizzando i C ss non si parla pin di gri-g Ua , rn a di impostazione di la yo ut. N one sis te p il i u n e lem en to r ig id o d i o rg an iz za -z io ne d eg li s pa zi, rn a c ia n on sig nific a c hen ella fa se p ro ge ttu ale n on s i d eb ba te ne rein con sid er a zione un 'impaq inaz ione che p r e-v ed a u na g ab bi a. C er to , l 'u til iz zo d ei C ss d amagg io r e l ib e rt a e sp re s si v a, r n a l e po s sib il it at ec ni ch e in q ue sto c as o n on d ev on o f ar ci d i-m en tic are le e sig en ze d i fru iz io ne d ei c on -t enu t i i n si eme a l l' armon ia de ll a d i spo s iz ionedegl i e lementi .I T E M P L A T E E L E G A B B lEP er q ua nto r ig ua rd a i l W e b b is og na s ap er d i-s po ne g li e lem en ti in u na g ab bi a " vis iv a"P o ss iamo d ir e c h e l a d is po si zi on e g e ne ra le ed e fi ni ta d al la s ce lt a d e l t emp la te a ll 'i nt er no

8/3/2019 2 - Web Design

6/68

d el q uale, p oi, si disp on gon o gli elem enti" ing abb ia ti". In u no stesso sito W eb po s-s ia mo a nc he ritr ov are d iv ers e tip olo gie d ipag ina , l 'impor tan te e c he r is po nd an o c oe -r en tem en te a u na lo gic a, 0 gabbi a appun to,p re d ef in it a, i n c ui l 'u te n te s ap p ia i nd iv id u a-r e g li e lem en ti f is si e q ue ll i v ar ia bil i, s en zaav e re l 'imp re s sione d i e s se r si p e rs i .D A L L A G R I G L I AA L L ' I M P A G I N A T OImma gi ni am o o ra d i d ov er e se gu ir e it pro-getto d i un site W eb. Prov iam o a vederec om e u n p ro ge tto g ra fi co c am b ia a s ec on dac he s i u si u na g rig lia p iu tto st o c he u n'a ltr a,T e ni amo s emp re i n c o ns id e ra zi on e c h e: il site av ra u n h ead er co ntenen te illo go ; ci sara, po i, un ' area personale per la re-gistrazione;

prevederem o anche un m enu con even-tu al i s o tt omenu ;

b is oq ne ra d are risa lto a u na s erle di fun-zionalita:

in hom e page dov rem o strillare alm enotre news, d i cu i una principale e due dis ec on da ria im p or ta nz a, t ut te c om u nq ue

co rr eda t e da un 'immag ine ; ci sara u n foo ter d i c hiu su ra con i co ntat-t i e l e i nf orm az io n i l eg al i.

O lt re a q ue ste e si ge nz e s ap pi am o c he d ov re -m o a da tta rc i a lla rlso lu zio ne 1 02 4x 76 8.S ec on do q ue ste c ara tte ristic he p ro via moa ip otizzare d ue tip i d i im paginazion e se -g ue nd o d elle g ab bie (fig ura 3 ): la p rim a sutre co lonne (figura 4 ), la seconda su duec o lo n ne ( fi gu ra 5 ).I M P A G IN A Z I O N E I N C O R S OD a u n a p rim a imp os ta zi on e d i m a ss im a , i ni -z iamo a d is po rr e g li e lem en ti s ec on d o ma cr o-aree : ora ciascuna delle tre colonne hau na f un zio na lit a s pe ci fic a. S e p ro vi am o a dapp ro fond ir e i l p a ss agg io, po ss iamo add ir it -t ur a a ss eg n ar e a ll 'i nt emo d i c ia sc u na a re a g lie lem en ti , d ef in en d o q ia c ia c he s ar a b o tt on e,a re a t es tu a le , immag in e g ra fi ca . Q u es to t ip od i s t ru t turaz ione e anche ch iama ta w i re f ra -m e , o tt im a p er d ef in ir e, in f as e p re -p ro ge t-t ua le c o sa c on te rr a c ia sc u na p a gi na d el s it o.U n a v o lt a e se gu it o a nc he q ue st a p as sa gg io ,e o ra d i ste nd ere il p ro ge tto g ra fic o v ero ep ro pr io , t en en do c on to d ell a g ab bia d i p ar -

I N D I V I D U I A M O L A G R I G L I APrendendo come esempio qualche site Web,esaminiamo la disposizione degli elementiindividuando la "qabbia" in cui sono inserit i.Abbiamo scelto un site con un'impostazioneLa~~i'A(www.mtv.iflII sito e suddiviso in un header che con-tiene il menu e due colonne principali.Quella pili grande. a sinistra riporta ungrande lancio a carosello < D e immediata-mente dopo risuddivisa in moduli di dueo quattro lanci che mantengono sempreI'allineamento in verticale (II). La sezionea destra contiene gli special i e I 'ingressoall'area riservata (III). Questa colonnavive di vita propria rispetto a quellaprincipale.

t en za e d e ll e s pe ci fi ch e d e fi ni te n e i p as sa g gip re ce d en ti ( ne p a rl iamo n ei p ro ss im i p ro g e t-til. n p ro ge tto g ra fic o, u na v ol ta t ermi na -t o, d ev e r is pe tta re a lla p er fe zio ne l a g ab bi ac he a bb iam o imm ag in at o. A l l'in te rn o d el las ch erma ta a nd iam o u lt er io rm e nt e a d el im i-t ar e l a g ri gl ia d e gl i e lem en ti . P ro v iamo , p o i,a e ff ett ua re lo s te ss o e se rc iz io s u u na g ab bi ad iv e rs a ( du e c ol on n e) . Pu r ma nt en en do g lie lem en ti g ra fi ci d er iv a ti d al l' im p o st az io n eprecedente, il p rogetto e la sua griglia die lem en ti im pa gi na ti s on o q u el li m o st ra ti .

Figura 5 - Impaginazione con una colonnalatera Ie e una centrale per il contenuto.Anche qui viene rispettata la griglia

grafica allegra e ricco di contenuti come Mtv, unodedicate ai creativi e con notizie, concorsi e belleimmagini come design boom, e Kozyndan, ilsite di due famosi e talentuosi creativi.~esignboomj(www.designboom.comlUna gabbia ben distribuita in senso oriz-zontale con str il late sette news principal i(una per categorial. Immediatamentesotto gli strilli di altre news e sezioni delsito con una disposizione verticale arbitra-ria, nel caso della colonna a sinistra, conaltemanza di dimensione (non semprerispettatal per quanta riguarda la colonnacentrale. L.:intera colonna all'estremadestra e dedicata a focus su competitiono altri eventi di rilievo < D .

1 ~ 1 9 ~ W f f j ~ ~ W I(www.kozyndan.comlmain.phplNonostante I'impostazione incentrata suipersonaggi, e chiaramente percepibile unagriglia che delimita I'ordine degli elementiinseriti nella pagina. I due personaggilanciano Ie ult ime news (di due categoriedifferentil (I), appena sotto il menu con ilink (Ill, nell'area in basso a destra i link apop up e il modulo di iscrizione alia mailinglist

8/3/2019 2 - Web Design

7/68

I v a lo r i a z ie n da li /I PROGETTO 2 W eb des ign

S ito a z ie n d a le ?Comun i c h i amo coslE cco com e p roge tta re un s ito bus ine ss che s iain grado di com unica re co rre ttam e nte glie le m e nti ca ra tte ris tic i e i va lo ri d i un'im p re saD

a ll e p ic co le imp re se f in o a ll a g ra nd ein dustria, qu asi tutte, orrnai, so nod ota te d i u n l og o p ro fe ss io na lm e ntepro gettato , se n on d i u n co mp le to m anu a-

le d ell 'i mm a gi ne c oo rd in at a. L a n ec es si tadeU'azienda e e sse re e on osc iu ta d al p ub -b lie o d estin ata rio d el s uo in te re ss e, d efi-n ito com e targe t. S i tratta d i un m isto dic a ra tt er is ti ch e : f as ci a d i e ta , s es so , a b it ud i-n i, l iv e ll o s oc ia le , c a pa ci ta d i s pe sa , e cc . C o nun 'a t ten ta coo rd inaz ione , g l i e l emen ti comu -n ic at iv i d e ll 'a zi en d a d ev o no e ss er e c oe re n til'un o c on l'altro. in m od o da trasm ettere ig iu sti v alo ri e sa tta me nte a q ue l p ub blie o.Q u e st a u n if orm it a s i r if er is ce a l og h i, c ol or i,c a ra tt e ri t ipog ra f ic i , impag inaz ione e p r es en-t az ione g r af ic a de i documen ti , impost a zionede l la comunicaz ione commerc ia le , packagingd e i p ro d ot ti e s it o u ff ic ia le . L immaq in e c o or -dinata e , q u in d i, i l s is tem a t ram it e it quale,a p re sc in d er e d a l n um er o, d a ll a c omp le ss it ae d al le d im e ns io ni d i q ue st i e lem en ti c om u -

C O L O R I P A N T O N EI Is is tem a P a nt on e. c h e r is al e o ram a iag li ann i 50. e sta to m es so a p un to d allas ta tu ni te ns e P an to ne I nc .. c he s i o cc up ad i t e c no lo g ie g ra fi ch e e c at al og a zi on e d e ico lori . At tua lmente . e c o ns id e ra to u n os ta n da rd d i r if er im e n to i nt em a z io n al e p e rquant a r igua rda l a g r af ic a . D iv er s amen ted a i s is tem i Cmyk e Rgb. i de n ti fi ca ti r is pe t-tiv am en te d a un a q uatem a e u na tem a din u rn e ri , u n c o lo re P a nt on e e identificatod a u n c od ic e c om po sto d a d ue c am pi.d i c u i iI p rim o p uo e ss ere u na p aro la < ade sernpio , " r ed " ) 0 u n n um ero d i d u e c ifre

8/3/2019 2 - Web Design

8/68

W eb de s ign PROGETTO 211 I valori aziendali

~CDDPERTIRES

~")COOPE),.",.Ta'!!!~

ArudiptOl. ... ioMLaIP~z\!)[l

8/3/2019 2 - Web Design

9/68

Pro to tip i p e r I 'in te rfa cc ia W e b 1 / PROGETTO 3 W eb des ign

II progetto vincenteper I'interfaccia WebP r im a d i m e t t e r s i a ll'o p era , e b e n e s o f f e rm a r s is u l l a f a s e d i p r o g e t t a z io n e : e v i t e re m o d i f a ree r r o r i e d o v e r r i p ro g r a m m a re t u t t o d a W in iz io L i v el l o: m ed ioLeggi anche: WebdesigniProget t lZioneiP no ge no 1REQUISITIN

ell'era del Web 2.0 e delle RichInternet Application (RIA), sa-per realizzare interfacce che sidimostrino estremamente funzionali

e allo stesso tempo intuitive e grade-voli diventa uno dei comandamentiprincipali per chi si occupa di rea-

lizzare strumenti di comunicazioneon-line e si ti.Da questa punta di vista, diventaessenziale riuscire ad adottare tee-niche di progettazione evolute, chepermettano di testare siti 0 interfac-ce Web ben prima della lora realizza-

zione. Basti pensare a quante volte cisiamo trovati di fronte a un sito che,nella nostra mente, avrebbe dovutoessere totalmente diverso da quelloche, alla fine, abbiamo realizzato, 0a situazioni in cui un committenteha richiesto profonde modifiche a un

8/3/2019 2 - Web Design

10/68

Weblde s igh: .' p~OGEr;rOi3 /I ~~oto.tipiper.l'interfaccla"o/eb, ". ,',,I..... ~ . _ .,._ '~ .. " ... -.~ ...... ""~~J:..~;.~ ... ~~ ....... ~. .1_ "':: _' ." "o ~" _,~ , __L I.....r~"'. ,I ~~ ... _-{ ",,_. _ _~',.,t_'J~"

R I S O R S E G R A T U IT E :G L I S T E N C I L D I Y A H O O !

lavoro poiche "aveva pensato a tut-ta un'altra cosa" per capire quantopossa essere importante dedicaredel tempo al wireframing e al pro-totyping, ovvero a due tecniche diprogettazione per interfacce Web chepermettono proprio di visualizzare etestare le caratteristiche di un pro-getto ben prima di iniziare a realiz-zarlo completo di grafica e codici.WIRE FRAM INGE PROTOTY P INGSe prima di iniziare ad aprire Dre-amweaver twww.adobe.com/it/pro-ducts/dreamweaver) per creare ta-belle e scrivere il codice avete maidedicato qualche minuto ad abbozza-re su un foglio di carta la strutturadella pagina, 0 se avete effettuatodegli schizzi grafici con frecce cheindicano le azioni da compiere perottenere particolari tipi di risultati.allora avete gia una vaga idea di cosasiano il wireframing e il prototyping.Semplificando al massimo i due con-cetti, si puo dire che il wireframinge quella fase di progettazione di unsito 0 un'applicazione Web in cui sivisualizzano in maniera molto sche-matica le strutture delle pagine Webe le relazioni tra le singole sezionio funzioni, mentre il prototyping euna specifica fase di test delle inte-razioni previste.I documenti che rappresentano il

G i' :J > P SOCII\l

IQd"nhfl',Y~:!,()OHSe utilizziamo programmi specifici a pagamento 0

software grafici pill tradizionali per realizzare wirefra-me, sicuramente potra esserci molto utile scaricare lalibreria di immagini gratuite per la progettazione Webdi Yahoo. Andando all'indirizzo http;lldeveloper.yahoo.com/ypatternslaboutlstencilsl potremo scaricare lalibreria nel formato adatto per Mcrosoft Visio, Omni-graffe, Axura, InDesign, Fireworks oppure Ie versionigeneriche in vettoriale (Pdf, Svg 0 Pnq). Si tratta diun insieme di elementi grafici disponibili per notiprogrammi di grafica che rendono la realizzazione diwireframe di pagina molto pill rapida grazie ai numero-si elementi grafici di alta quallta presenti nella libreria.Grazie a questa libreria, si potranno estendere alcunedelle funzionalita di base dei nostri software graficipreferiti e riadattarli per il wireframing.

I\d U: ts C90.rd.ln Cllf~:JS~~; C~:. i'g a-id rcjcec UI ~~i~;e:;; F ( ) ; 1 1 l :1 1l : ! :) ~r " \~

lo.tl1llilirn. , -' I O ~nee

Muingfll: :; ,-~ [,I N:?

R.totedOIIh~rIA:(u.mflunifOlums.tjl:;g

licen.eA I link http:/ /deve/oper.yahoo.com/ypatternslabouVstencilsle d is p on ib ile u na s e rie d i r is o rs e g ra fic he g ra tu ite

wireframe di un sito non sono al-tro, quindi, che gli schemi che rap-presentano dove saranno collocati icontenuti e le mappe che individua-no quali relazioni esisteranno tra levarie parti del sito stesso, indicando,anche, attraverso quali tasti 0 per-corsi sara possibile accedere a ognielemento del progetto.Ovviamente, riguardando questa faseprogettuale di studio delle funziona-lita del sito, i wireframe saranno pri-vi di ogni elemento grafico, in altreparole visualizzeranno solo l'ossaturae non il vestito del progetto stesso.LAV ORARE SU P RO TO TIP IUna volta terminato il wireframing -cosa che tra l'altro consente di averedei primi documenti su cui confron-tarsi, sia con un eventuale commit-tente, sia con le altre persone chepotrebbero lavorare con noi sul pro-getto - e possibile passare a una faseancora pili specifica di progettazio-ne: il prototyping.In termini pratici, la realizzazione diprototipi consiste nella predisposi-zione di ambienti interattivi, quantopili possibili vicini a quelli del pro-dotto finale, che permettono, peresempio, di sperimentarne l'effetti-va usabilita. Per intenderci, se neiwire f rame di un sito di e-commerceabbiamo ipotizzato che ilmotore diricerca dei prodotti sia utilizzabile

tramite un menu a tendina che ri-porta l'elenco delle categorie mer-ceologiche, la realizzazione del suoprototipo funzionante ci consentiradi sperimentare quanta la nostraipotesi di interazione sia gradita dainavigatori senza dover portare a ter-mine il progetto. Anche in questocaso, come per ilwireframing, grazieal prototyping si riesce a ridurre si-gnificativamente ilnumero di macroerrori progettuali e a produrre unadocumentazione interattiva che, alpari degli studi grafici di layout edelle bozze di contenuti editoriali,puo essere motivo di confronto conil committente del progetto di cui cistiamo occupando.QUANDO E PERCH EOra che sappiamo che ilwireframingpermette di progettare l'architetturadi un progetto Web e il prototypingdi testarne e ridefinirne i sistemidi interazione, non resta che capi-re quando e perche sia davvero utileseguire queste metodologie proget-tuali. Innanzi tutto, occorre sottoli-neare come, grazie ai numerosi stru-menti - molti dei quali gratuiti -, lebarriere che, fino ad oggi, hanno im-pedito a chi progetta siti e interfac-ce di adottare queste di metodologie,devono considerarsi ormai abbattute.I software e le applicazioni online dicui parleremo rendono, infatti, mol-

http://deve/oper.yahoo.com/ypatternslabouVstencilslhttp://deve/oper.yahoo.com/ypatternslabouVstencilsl

8/3/2019 2 - Web Design

11/68

, .Prototipi per I~interfaccia Web, II PROGETTO 3 Web des ign

;twit::t::er I [ " ' m < ' ImJpwp~ sCffings ~Ip SI9nO!J f I~ rnyuSLrMlM

What are you doing?238 24. 6~8I W ait in g fo r the news. I following follow~rs updatuT!'ifttrworks Ie~do.~ D'!',I'I\ interested in SOIIIf.OM. I~ dgri't bc ve t o as k tM irHome pumission to fol low"thc.m. . T:d9n't bcve to ask if tM.y will berf: j rriml: that is SOfI'IdtIit 'Q

~my fri~. wha t I di d to da y. You ~ evolves naturalty CVU' tilM.won't find cut. I bdt @Replies3 mi~ l J 9 0 from w~b

-- . - - - . - Direct Messages[gJ you-know-who I 'm jus t ~v in g l un ch . Favorites3 mittufr5 t J 9 0 from w~b----~ -- - Everyone~

~y product istne but. you gotto try ittWortton invit~?3 mif'Jl./fu ag o from w~b Following

~jg~~~~~~f 'V/f mor ke ti ~fXp! rt Ui. Yo u b ee r fh(. s up er s ec ret n ew s ~~~~~~~~o lrec . . , >Fig ura 1 - P id oc o (https:l lpidoco.comlen) e u n s erv iz io o nlin e p er i l w ire fra m in g

to rapidi e intuitivi i processi di rea-lizzazione di wireframe completi e diprototipi funzionanti di interfacce,il tutto senza dover necessariamenteconoscere nessun linguaggio di pro-grammazione.

PROGETTARE PRIMADI PA SSA RE A LL'OPERARealizzare prototipi e wireframe e.quindi, un'attivita relativamente ve-loce. Considerando proprio il fattorevelocita, ecco il primo significativovantaggio di queste metodologieprogettuali: il risparmio di tempo.Infatti, impiegare qualche ora perrealizzare dei prototipi, spesso, per-mette di risparmiare decine e decinedi ore necessarie per dover rifare dacapo interfacce "improvvisate" 0 sitinon condivisi, In generale, inoltre,wireframing e prototipi aumentanosia la qualita reale sia quella perce-pita dal committente del progetto sucui stiamo lavorando: oltre che per lacomprensibile diminuzione di errori(pensiamo, per esempio, a come conil wireframing si possano preveniremappe di navigazione incomplete 0pagine irraggiungibili), fornire docu-menti di progettazione accurati con-sente, infatti, di offrire un'immaginealtamente professionale del propriometodo di lavoro.La possibilita di condividere punti

di avanzamento, strategia e fasi dilavoro e un ulteriore vantaggio datenere in considerazione: basta pen-sare a come, una volta realizzato unwire frame, si possa utilizzarlo perprocedere parallelamente con le fasirealizzative del progetto, operan-do contemporaneamente su grafica,codici e contenuti per capire qualecpportunita organizzativa offra unacorretta progettazione.SOFTWAREE APPL ICAZION IGRATUITESpesso i progettisti di soluzioni Webadattano alcuni software che nascono

O L T R E I L P R O T O l Y P I N G

A P P L I C A Z I O N I 2 . 0P E R I L W I R E F R A M I N GNegli ultimi mesi si stanno mol-tiplicando Ie applicazioni Webbased per svolgere wireframinge prototyping, Tra questa contia-mo Pidoco (https:llpidoco.comlen), Hotgloo (www.hotgloo.com).Balsamiq (www.balsamiq.com).Per rimanere aggiornati quotidia-namente sulle novita disponibili,e possibile seguire il blog dedi-cato al wireframing disponibileall'indirizzo http://wireframes.linoweki.oe.

con gli scopi pili diversi per abboz-zare schemi progettuali. Non e raro,per esempio, che ci si cimenti nellarealizzazione di wireframe utiliz-zando software di grafica e disegnovettoriale come Illustrator (www,adobe, com/ it/ prod ucts/ illustra tor)o Corel Draw (www.corel.com). 0 chesi tenti di prototipizzare alcune ideedi interfaccia con programmi per ef-fettuare presentazioni come PowerPoint 0, per chi sa programmare inActionScript, con Flash.Si tratta di soluzioni pragmatiche chepossono essere, perc. molto comples-se da gestire e che richiedono tempidi realizzazione lunghissimi.Fortunatamente, esistono numero-se soluzioni software 0 applicazioniWeb, spesso gratuite, pensate speci-ficamente per realizzare velocemente

Adobe ha lanciato nel corso del 2010 la versione commerciale ufficialedi Catalyst (http://labs.adobe.com/technologies/flashcatalyst/), un po-tente programma per il prototyping di interfacce (Web e Ria) che sembrapoter rivoluzionare il concetto stesso di progettazione di interfacce.Grazie infatti alia possibilitil di realizzare interfacce total mente interatti-ve senza dover scrivere una sola riga di codice, Catalyst punta a essereconsiderato 10 strumento di progettazione di interfacce multimediali pereccellenza. La facilita con cui si riescono a definire prototipi perfetta-mente funzionanti di siti e applicazioni Web, la compatibilita degli outputgenerati con ambienti di sviluppo Flash/Flex e la possibilita di utilizzareelementi grafici importati direttamente da Photoshop 0 Illustrator porta-no a considerare Catalyst come un software rivoluzionario nella scenadella progettazione di interfacce.

8/3/2019 2 - Web Design

12/68

W eb des ign PROG ETIO 3 II Pro to t ip i p e r I'in te r fa c c ia W e b

P R O T O T I P IP R O F E S S I O N A L IA C O S T O Z E R OLa dlfficolta nella raccolta dei requisitiper la realizzazione di una applicazioneo di un sito Web e da considerarsi superata:Serene Prototype Composer rappresentauna modalita completamente nuova di raccoltadei requisiti! Questo software permettedi vedere come sara una applicazione e comeessa funziona senza scrivere neancheuna riga di codice.Sara cosi semplicissimo collaborare aliarealizzazione di una simulazione funzionantedell'applicazione stessa

UN NUOVO PROGETTO1opo aver installato e awiato Serene PrototypeComposer, creiamo un nuovo progetto scegliendo lavoce New del menu File e selezionando I'opzioneProject.Cicchiamo in basso a sinistra su Interface e, sue-cessivamente, andiamo nel menu File sulla voce New e poiancora su Interface.

~~~..-;-~r~fi:~::_ _!, _ _ ..II E'"i: WII{WJI~kttur;lW~jl~ --i' TtllCoo: :Wi_~~~~~~=~~ ,L_.I---.---~-__---t I!

---------------------~-x-

!'.'."J~L_~~_

ELEMENTI PER L'INTERFACCIA2Nell'area di lavoro che compare possiamo trasci-nare gli elementi che compongono l'interfacciache stiamo creando. Una volta collocati, possla-mo cliccare due volte su ogni elemento per personaliz-zarlo. Ogni oggetto pub essere personalizzato a secon-da della funzlonalrta svolta.

wireframe e prototipi. Vediamo alcu-ne deUe pili significative tra queUeutilizzabili gratuitamente.SE RE NA P RO TO TY P E C OM PO SE Rhttp://www.serena.com/products/prototype-composer/index. htmlPur essendo un software gratuito, Se-rena Prototype Composer deve consi-derarsi a tutti gli effetti un programmaprofessionale di altissima qualita. Oltrea permettere di realizzare wireframe eprototipi molto complessi, consente diorganizzare risorse e personals. di im-portare siti esistenti su cui effettuarela prototipazione, di gestire progetti

IL PREVIEW3na volta create diverse interfacce ed aver ag-giunto nei menu di personalizzazione Ie funziona-lita di navigazione a tasti e interazioni, per testa-re il funzionamento del progetto basta cliccare sui tastopreview. Utilizzando immagini grafiche, il risultato pubessere decisamente verosimile.

multipli e di testare navigazioni 0 sin-goli prototipi. Un software completo efunzionale che consentira di cambiareit proprio modo di progettare siti e ap-plicazioni. Richiede l'instaUazione delframework .Net in versione 1.1.A DO B E FL ASH C ATA LY SThttp://www.adobe.com/products/flashcatalyst/In attesa della versione ufficiale previstaper meta 2010, la versione beta di AdobeCatalyst e scaricabile e utilizzabile qra-tuitamente con licenza completa dal siteufficiale di Adobe Labs (407MB).Laversione beta disponibile offre gia un

ventaglio molto ampio di funzionalitadi progettazione e. tra le altre cose, per-mette di generare prototipi che possonoessere salvati in formato SWF 0 AIR,quindi distribuibili anche via Web.Gia adesso, si tratta probabilmente delpili potente sistema di progettazione diinterfacce per Rich Internet Applica-tion.PENCILhttps://addons.mozilla.org/en-US/firefox/addon/848 7/Pencil e un sorprendente plug-ingratuito di Firefox pensato per di-segnare wireframe di pagine Web e

http://www.serena.com/products/http://www.adobe.com/products/http://www.adobe.com/products/http://www.serena.com/products/

8/3/2019 2 - Web Design

13/68

Prototipi per I'interfaccia Web /I PROGETTO 3 W eb de s ign

Prototype ComposerBusiness Unhappy? See What You 've Been Mss ingLet s ceo It. g,uherlng requi rements Ise t ten a ll exe rc ise " , IU!II.ty Despite t il e b es t m te nn on s o r everyone mvcrvult lmatcl~ ocuveree oncn OlIc ty reseeetes tnc 101., the buemees O .mer Ini tial ly [nca to express TIle cause 1$ $elll:nlng lind cap' l )f lt llOl requlr1!mt !nlS rely on Icngtny tes t-based ooc~nts - ItHwtng" lot to t ile 'mag!naUonI"e.',"~r" (;0"'1''''''''' "." c urn ll ." .. . " _ . .. .. , of o;:,M, 1 f > V fo:;"".m.n!S F,~",1>.C.. , " ;o , , ", 1< ~ p"a 'l .' " ~ nOWan ' "runaJ~ t.~.".~1, c-..d. IS r.-~,....I!_ Ins, . . . , O ."..n.~,.".. "lyc", CQu!t1~"." .vute"" 'n"", m.Wl r . t' _ " .. *,"01. h ". ~ I~"'O'~'" f ~l y~u,,Id?y.;"",,1f13~u~i"'>~"OGf~"ul.o".".~ c,.,,' ";,,,,,,18_lJ,t"'IClI ~~.~h :!CpioC",""cn,;)U;I~n"1 ' 1 \ " . ( 1 ' ' ' 1 1 ' ' ' " . 'rra

8/3/2019 2 - Web Design

14/68

W eb de s ign PROGETIO 3 II Pro to tip i p e r I'in te rfa c c ia W e b

P R O T O T I P I" I N U N F L A S H "C O N A D O B EF L A S H C A T A L Y S TCol nuovo strumento di progettazione,la creazione di interfacce e contenuti interattivi,sara rapida e intuitiva, considerato ancheche si potranno importare in Catalyst interfaccedisegnate con strumenti cone Photoshope Illustrator. Non si dovra, quindi, scrivereneanche una riga di codice. La realizzazionedi un prototipo funzionante da mostrareal cliente finale favorira di certo I'interazionee la collaborazione e si giungera pilivelocemente a un prodotto definitivo

PERSONALIZZIAMO2A differenza di altri software, Catalyst consentela personalizzazione totale delle interazioni grafi-che. Creando diversi stati (Duplicate statel escegliendo tra Ie diverse interazioni applicabili ai singolioggetti, si puc riprodurre il funzionamento di qualsiasi ap-plicazione 0 elemento di interfaccia.

" " ' t < it . . . . . . . . . , . , . ~ . . . . 1 ! o O J. 1-1..[~::F2 ~. . " ~~,-

[Y; ~ . ,, ' T 0. 4.,/ ",}!),

Ii--

AVVIO DEL PROGETTO1opo aver lanciato Catalyst e aver creato un nuo-vo progetto, possiamo comporre l'interfaccia diun'applicazione da prototipare trascinando i singolielementi presenti nel pannello a destra Wireframe compo-nents e personalizzarli aggiungendo interazioni tramite inpannello Interactions.

I P LOTZ ( FOTOF .P NG )http://iplotz. com/opp/index.pbpLa versione demo dell'applicazioneWeb iPlotz, per quanta limitata ri-spetto a quelle a pagamento, offrenumerosi strumenti di altissima qua-lita per realizzare prototipi e wire-frame.Davvero notevoli i sistemi di ante-prima dei wireframe realizzati. con,addirittura, la possibilita di gene rareHtml completi interattivi del proget-to in fase di studio. Altrettanto inte-ressante la possihilita di progettareinterfacce confrontandosi a distanzacon amici e colleghi.

ESPORTIAMO E TESTIAMO3na volta generato il prototipo, Catalyst e in gradodi esportarlo in formato Flash 0 AIR in modo chesia facilmente distribuibile e testabile attraversoun normale browser. AI momenta dell'esportazione delprogetto, possiamo scegliere quali formati generare conil processo di pubblicazione.

F ig ur a 4 - iPLOTZ , a n che n e lla v er sio ne d em o, p erm ette d i g en era re I 'H tm l d el p ro ge tto

8/3/2019 2 - Web Design

15/68

p a g in e W e b p e r fe t te ?Be lle e a c c e s s ib i l i !Ges tire gli e le m enti gra fic i in m o do da re nde regra devo le un s ito , m a no n lim ita re la nav iga zio nea chi ha p rob lem i di p e rcezione de i co lo r iIa lto nis mo e u n ,e life tto n ella p er ce -zione de i colori. E , normalmente, el io ri gi ne g en et ic a, r na pu o i ns o rg e re a n -ch e a se guito eli d an ni agli occhi, ai nerv ie a l c erv ello . C hi e dalton ico non riesce aid en tifica re co rre ttam en te co lo ri d i d if-fe ren te lu ngh ezza d 'o nd a. A o gg i n on esi-s te u na c ur a d ef in it iv a, r na it daltonico pu oin do ss are s pe cia li le nti c on ettiv e e d ota rei l p ro pr io c om p ut er e li so ft wa re a d h oc . N o ns em p re i l d alt on ism o e d a c on sid er ar si u np ro b lem a . E s is to n o p a rt ic o la ri s it ua zi on i i ncu i e ade li ri tt u ra un v an tagg io . L a normalev isio ne d el c olo re pu o ingannare l'occhioc om un e, rn a n on quello de l daltonico. ch ein te rc etta la d is co ntin uita (fig ur a 1 ). P en -s iamo ai s ol da ti m im e tiz za ti i n u n c am p o e libattaglia 0 a gli a nim ali c he in n atu ra a do t-t ano t e cn i che e l i e li s simu la z ione .COME VEDE UN DA LTONICOP uo e ss ere u tile fa rs i u n'id ea a ll'in diriz zohttp:// colorfilter:wickline.org ( fi gu ra 2 ).S i p uo sc riv ere l'in dirizzo e li u na pa gin aW e b ne lla c ase lla e lite sta T yp e a U rI e , p oi,s ce gl ie re u n f il tr o d al la c as ell a c om b in at ap ic k a c olo r filte r. O gn i f iltro c orrisp on dea u n e life tto e li p erc ez io ne d ei c olo ri. P re -

. .,Figura 1 - Un test per la percezione deicolori: i daltonici non visualizzano un 5rn a un 2

m endo il pu lsante Fetch and Filter si o t-ti en e la p ag in a r ic hi es ta p la sm a ta d al f il tr oim po st at o. Q u a nt o o tt en u to e u n e se mp iod ella v isio ne d i un d alto nico . L a sezion eO ther O ptions perm ette d i ag ire su a ltriq ua tt ro c he ck b ox c he e lis ab il it an o a lt re t-t ant e impost a zioni :1.L e im magin i sono parte sign ifica tiv ad i un docum ento W eb. La prim a voltae u tile p ro vv ed ere a l lo ro c aric am en to .D op o la p rim a v erific a, a meno c he n ons i s ia n o a p po rt at e mo e li fi ch e ai contenu-ti. si pu o v e lo c iz z ar e i l c ar ic am en to d a ll ap ag ina sp un tan do il ch ec k b ox D isab leIm ag e F ilt er in g, c io e e lis at tiv an do i l c a-r ic am en to d e ll e immag in i.

2 . A l lo s ta to a ttu al e i l s er viz io o ff re s ol ta n-to il filtro p er le imm ag in i G if. In te rv e-nendo su l check box D isable N on-G IFIm ag e F ilte rin g si in cre me nta la v elo ci-t a e li c ar ic am e nt o d el la p ag in a, p oic he s iig no ra no c om ple ta me nte le imm ag in i e lif orm at o d iv er so d al G if .

3 . P e r c re are u na v ers io ne d ella p ag in a c henon im pieghi i fog li eli stile , si spun-

REQUISmLivello: medio

Leggi anche: Ammin.e sviluppo/Gestire

e aggiornarelP ro gern 1 e 3

ti il check box Disab le S tylesheets.4. Al c un i s v il up p at or i e li f o g li e li s ti le c om -m etto no e no ri n ella c oe lific a d ei c olo ri.P er 1 0 p il i s ta cc an do il s im b ol o " #" d al r e-s to d e ll a n o ta zi on e "RRGGBB".C io incidesull'applicazione d el f il tr o s ce lt o. P er a p-p ur ar e c om e i d al to ni ci v ed an o la p ag in a,e neces s ar io con sen ti re al p ro gr amm a e liutilita e li f i ltr ar e q ue st i c os tr ut ti. S pu n-ta re il check box Supress Filtering ofB roken C SS C olors significa non per-m e tt er e q u es to f il tr o.

U n altro docum ento degno di m enzio-ne e all'indirizzo http://gmazzocato.altervista. orgl colorwheeljwheel. php?lingua=it. I'u te nte s ce glie d alla ru ota d eico lori qu ello d a ap plica re al testa 0 allos fo n do . App o si ti a lg o ri tm i a g is co n o s u l im i -ta te a re e d ella p ag in a c on 1 0 s copo e l ir ip ro -d un e l a v is io ne e li ch i e c ol pi to d a t re f orm ed i da lt on ismo : deu te r anop ia , l 'i n sen sib il it aa l v e rd e , p ro ta n op ia , l 'i ns en s ib il it a a l r os soe t ri ta n op ia , l 'i ns en s ib il it a a l b lu .COLORI ACCESSIB IL IS cam biare u n co lo re p er u n altro. q uind i.

Colorblind Web Page Filter

Type a URi: lwwwtechit _Typea inu. j """"w. tech. it and thenend """ r-:-,..-,---:;---;--:-cc--;-----c:------;-j pick a color f i l ter: Iprotanopia (redlgre~~ color blindness; n_

8/3/2019 2 - Web Design

16/68

W eb de s ign PROGETIO 4// Accesslblllta: il daltonismo

t : A C C E S S I B I L I T A F A V O R I S C E I L B U S I N E S SDa una recente ricerca del Customer Respect Group (www.customerrespect.com>.emerge che Ie grandi aziende che investono per abbattere Ie barriere digitali trag-gono dall'accessibilita benefici economici. La ricerca analizza 140 sit i, assegnandoloro un punteggio da 1 a 10, in base alia loro accessibilita, La media dei puntiotten uti e pari a 6, rna i pill lodevoli arrivano a 7,9. Non si tratta di mero rispetto dinorme, rna di decisioni che mirano ad attrarre nuovi clienti e a contenere i costi. TraIe aziende intervistate, colossi del calibro di Bank of America, Procter & Gamble,General Electr ic, Wells Fargo & Co. II documento (www.customerrespect.com/Showcase/Showcase.html> presenta casi di studio che dimostrano come la sceltadi un sito pill accessibile sia legata a un'esigenza di business.

compromette la corretta lettura di un sito:la seelta dei colori, della combinazione ot-timale, non e attivita di poco conto. Spessola cura per i dettag li fa la differenza. Adesempio, ileontrasto tra testa e immagini disfondo e abitualmente bistrattato. Un altrocaso e quello del mouseover: a un contrastoadeguato sullo stato normale dei link corri-spondono combinazioni inopportune suglistati hover, active e similari. Per sceglierei colori pili adatti al la visione daltonica, sipuo far riferimento ad alcuni siti Web.Cominciamo ad analizzare it Colour Con-trast Check all'indirizzo www.snook.ca/technical/colour _contrast/colour. himl,in cui la seelta dei eolori di testa e sfondoviene verifieata alla luce delle raccoman-dazioni W3C. Il servizio permette all 'ope-ratore di impostare agevolmente i colori inmodalita Rgb. I colori che superano il testvengono espressamente approvati con unaltisonante Yes! che compare nella caselladi testa Are colours compliant? La rispo-sta trae motivazione empirica dalle formuleindicate dal W3C.Se la differenza di lumi-nosita e di colore e maggiore di una sogliastabilita, la combinazione rispetta l'indiriz-zo del consorzio. Il livello minima fissatodal W3Ce 125 per la luminosita e 500 perla differenza fra i colori.

S T R U M E N T I D E S K T O PProduttori di hardware mettono a disposi-zione strumenti di analisi del contrasto fracolori che impiegano gli algoritmi propostidal consorzio, rna personalizzano i livelliminimi di differenza. Cioaumenta il numerodi possibilita considerate accettabili. Con-trast Analyser 2.0 (www.paciellogroup.com), e in grado di analizzare il contrastotra i colori. Il programma e di semplice uti-lizzo ed e da provare, soprattutto la sezioneche riguarda i filtri (addirittura si riprodu-ce la visione di chi e colpito da cataratta)a disposizione per la manipolazione delleimmagini (figura 3). All'indirizzo http://graybit.com/main.php e a disposizione unservizio che trasforma una pagina a coloriin bianco e nero. Basta introdurre in un ap-posito modulo l'indirizzo della pagina Webche si vuole convertire e premere il pulsan-te Make it Grey. Pochi istanti e la paginarichiesta appare decolorata (figura 3).U N P L U G IN P E R I L B R O W S E RPer la visualizzazione di una pagina si ricer-re a un browser. Trai tanti, citiamo Firefoxche e possibile dotare di un plugin, perfe-zionato nel 2006 da uno sviluppatore bri-tannico di nome Gez Lemon. Integrazioni,migliorie e traduzioni sono state appron-

tate in seguito, come riportato all'indirizzohttp://juicystudio.com/ article/ colour-contrast-analyser-firefox-extension.php.Per scaricare il pluqin, Colour ContrastAnalyser Firefox extension, e necessariodisporre di un account utente e accederealla sezione add-on del sito di Mozina. Il filescaricato. di formato xpi, viene installatoattraverso l'opzione Apri del menu File diFirefox. Il risultato pili immediato e la voceColour Contrast Analyzer nel menu Stru-menti. Il plugin rivela il colore di contrastodi tutt i gli elementi nel DOMe si dimostrautile per valutare e congetturare l'aspettodi un sito risparmiando tempo. In detta-glio, il programma genera una tabella cheelenca le combinazioni di colori utilizzatenel documento corrente. In particolare ilcolore di sfondo, l'indice luminosita con-trasto e le differenze di colore e di lumi-nosita adottati negli algoritmi proposti nel2000 dal W3Ccon il progetto Aert, Acces-sibility evaluation and repair tools. Aneheper l'indice luminosita contrasto e statodefinito un algoritmo di riferimento, utilesoprattutto agli sviluppatori. Lo si puo ve-dere all'indirizzo http://juicystudio.com/services/luminositycontrastratio.php#specify. Ogni elemento (Element) della ta-bella e affiancato ai propri tag e attributi(Parent Nodes) di competenza (figura 4).Cio dovrebbe agevolare l'identificazione de-gli elementi nel documento. Ogni elemen-to che include testa e presente nella lista.Quando una combinazione di colori, sfondoe primo piano, di un elemento non rientranei limiti fissati da Aert, l'intera riga si colo-ra di giallo. Il Colour Contrast Analyser hacomunque qualche limitazione. A comincia-re dalla sola capacita di analizzare la diffe-renza tra i colori in primo piano e quelli disfondo riferiti ad elementi di tipo testuale.Il testo colloeato su un'immagine di sfondoe ignorato. COS!come sono trascurati i cam-biamenti dinamici, come gli effetti hover.

T e c h . ; , ,: , , : : : -.. .. . ~--?::::' :.

Figu ra 3 - ht tp : / /grayb i t . com e u n s erv iz io W e b c he p erm e tted i d ec olo ra re u n s ito F igu ra 4 - L a t ab ella c on Ie c om b ina zio ni d i c olo ri c or re tteg e ne ra ta d a C o ntr as t A na I ys e r

http://www.snook.ca/http://juicystudio.com/http://juicystudio.com/http://graybit.com/http://graybit.com/http://juicystudio.com/http://juicystudio.com/http://www.snook.ca/

8/3/2019 2 - Web Design

17/68

S v ilu p p a re a pp lic az io n i d i quallta 1 / PROGETTO 5 Web des ign

Ap p lic a z io n i W e b ,iI s eg re to de l s u c c e s s oS c o p r ia m o I ' im p o r t a n z a d e g li s t r u m e n t ic h e a iu t a n o g l i s v i lu p p a t o r i n e ll a p r o g e t t a z io n ed i s o f tw a r e e s e r v i z i d i q u a l i t a11mondo della programmazione edello sviluppo, soprattutto quellobasato sul Web, e in continua evo-luzione. Guardando allo sviluppo diqualche anna fa con gli occhi di unosviluppatore di oggi, si potrebbe facil-mente avere la sensazione di trovarsi inun mondo "preistorico", Non sono sta-te solo le tecnologie a cambiare - pen-siamo, per rimanere nel campo del bennote. al cloud computing - rna anche iprocessi. Oggi esistono metodi, procedu-re e approcci che permettono, non solodi semplificare e rendere pili veloce ilprocesso di produzione di un'applicazio-ne, rna, soprattutto, di migliorarne laqualita, Lo sviluppatore che volesse darespessore professionale alla propria att i-vita, non dovrebbe mancare di conosce-re queste pratiche. Per chiarirci le ideeabbiamo scelto tre tecnici provenientida ambiti diversi: Ma rc o T re visa n eesperto di Web design e di tecnologiestandard per il Web, F ra nc es co F ul lo nee sviluppatore Php ( e tra gli organizza-tori del PhpDay, la giornata nazionalededicata a Php), P i et ro B r amb a ti lavoracon strumenti Microsoft. Leloro risposteriflettono il campo in cui sono esperti:per questo motivo i lora contributi sono

I N O S T R I E S P E R T IPietroBrambatiDeveloper Evange-list di Microsoft Ita-lia, ha lavorato nella

divisione servizi di Microsoft Italiasu applicazioni di classe enterprise.(http://blogs.msdn.com/pietrobr)

da interpretare, pili che come approccialternativi, come completamento l'unodegli altri., COS'E LA QUALITA NELLAP RO GETTAZIO NE W EB ? P .B . La qualita del software, in ge-nere, pub contemplare diversi aspetti:alcuni pili legati alla macchina fisica sucui il programma viene elaborato, come,ad esempio, quanta memoria viene im-pegnata, quanto veloce e il codice adessere eseguito. Altri, invece, riguar-dana aspetti legati al software intesocome "prodotto" 0 "processo": possonoincludere. tra gli altri. aspetti come lamanutenibilita e la testabilita del codi-ce 0 la metodologia per implementarlo.Chi sviluppa per il Web, forse, e menoavvezzo a interrogarsi sulla qualita.spesso per ragioni legate ai rapidi tempidi sviluppo richiesti. Negli ultimi anni,perc, anche in questo ambito si comin-cia a parlare di temi legati alla quali-ta del software, ad esempio parlandodi pattern come Model-View-Controller(MVC)e Model-View-ViewModel (MWM),di Test Driven Development (TDD) e dimetodologie Agili in genere, giusto percitare i termini pili noti.

FrancescoFulloneE Ceo di Ideato,azienda che lavorasui Web con Php. E

presidente del GrUSP, I'associazio-ne italiana degli sviluppatori di Php.(www.fullo.netJ

REQUISmUvello: avanzato

Legg i anche: Webdes i gn /Pr oge t t a z i one iP r o g et to 3?......-

F.F . La qualita del software e un concet-to molto particolare e complesso. Ancoradi pili per il Web, dove le discipline perla realizzazione (e riuscita) di un pro-getto sono molte ed eterogenee. Sicu-ramente "qualita" e codice scrit to bene(testate. riutilizzabile, a oggetti ... ), rnae , allo stesso tempo, avere un'applica-zione con una user experience che nonallontani gli utenti, 0 performante escalabile, oppure, ancora, con un ottimolook & feel. Oualita e tutte queste cose.Per averla e necessario un team affia-tato di professionisti che lavora a tut-te le sfaccettature di un prodotto e chesfrutta. in questo processo, pratiche permantenere alti gli standard. La qualitae , pertanto, un investimento (di tempoe di denaro) e, purtroppo, questa spa-venta. Soprattutto quelle aziende chepuntano ad avere tutto. risparmiando ilpili possibile nelle figure da coinvolgeredurante la progettazione e 1 0 sviluppodei loro prodotti, ritrovandosi spessocon progetti fallimentari.M.T . La qualita nella progettazione Webrichiama quei modelli di qualita "tradi-zioriale" esistenti nella comunicazione,nel disegno di interfacce utente e nella

MarcoTrevisanE I'amministratoreunico della societeBazzmann Sri, agen-

zia specializzata in comunicazionee fotografia.(http://bazzmann.itJ

8/3/2019 2 - Web Design

18/68

W eb de s ign PROGETTO 5 II S v ilu p p a re a p p l ic a zio n i d i qualitaprogrammazione software, naturalmentecon gli ingredienti propri del mondoWeb.Questo significa prestare attenzione adargomenti come facilita d'uso, appeal,accessibilita, standard Web, scalabilita,performance, riutilizzo, compatibilita einteroperabilita, tanto per citare alcunidei punti di riferimento nel vasto ocea-no di elementi che si devono tenere inconsiderazione. Soprattutto, mantenereun'alta aderenza al buon senso, speciein caso di "tendenze" 0 di nuove tecno-logie. Significa scegliere con cura quelloche serve davvero, quello che fa funzio-nare meglio la comunicazione e quelloche assicura la migliore resa nel tempo.Naturalmente, su questa percorso influ-iscono molto anche it tempo a disposi-zione e il budget che si puo assegnareall'operazione.

'

IL LIN GUAG GIO C HE USIHA GLI STRUMENTI PER SV ILUPPARE PROGETTJC EN TRATI SULLA QUALITADEL PRODOTTO E DEL PRO -CESSO?P.B. Si pensi ad ASP.NETMVC,l'imple-mentazione del pattern MVCsu ASP.NET,studiato per essere facilmente te-stabile in ogni sua parte. ConWPFpri-ma e Silverlight 4 poi, e stato migliora-to il supporto per sviluppare con MWM.Expression Blend 4 integra, inoltre, untemplate di progetto gia fatto ancheper i designer. It runtime del Framework.NET 4 supporta la programmazioneper contratti, che aiuta a scrivere pro-grammi in modo pili sistematico e pilicorretto. Visual Studio 2010, inoltre,semplifica lo svituppo con TDDcreandoautomaticamente lo stub della classe 0del metoda mentre si sta scrivendo unoUnit Test. Inoltre. la Test Impact Analy-sis che serve per identificare su qualiUnit Test avra impatto una modifica alcodice, la validazione del codice con iLayer Diagram permette di rispettarevincoli architetturali e potrei conti-nuare parlando anche dell'Architectu-ral Explorer e del template per Serume cosi via.F.F.In realta. non esiste un linguaggioche permette pili di altri di avere "qua-lita", quella e intrinseca in chi sviluppail software. Sicuramente, perc. ci sonostrumenti e metodologie di lavoro, chepossono aiutare uno sviluppatore a ga-

rantire una certa qualita nel prodottofinale. ItTest DrivenDevelopment (TDD)e la relativa famiglia xUnit di test suite,sono, appunto, uno di questi strumen-ti. Soprattutto se affiancati a pratichedi refactoring. Esistono anche prodotti.per calcolare le metric he relative alla"bonta" del proprio codice, per PHP adesempio c'e la suite PHP_Depend, averequesti indici generati automaticamen-te, magari all'interno di un software diContinuous Integration, puo dare adun team feedback immediati sull'anda-mento del progetto.M.T.Fortunatamente si: oggi possiamodire che il Web e diventato - e sta di-ventando sempre di pili - un ambien-te maturo dove poter lavorare, in cuipossiamo reperire sufficienti strumentisia in fatto di progettazione, di svilup-po, di collaborazione e di verifica dellaqualita .Tra gli strumenti tecnici consigliosenza dubbio Firebug insieme all 'H'l'-ML Validator - come componenti diFirefox -, gli strumenti di colore pre-senti in Illustrator, Photoshop e inTop Style Pro - che aiutano a gestirecolori complementari, armonici e peripovedenti -, nonche tutti i prodottidi sviluppo adatti ad un uso produtti-vo e consolidato: Drupal e Wordpresscome framework/ems "gia pronti",JQuery per javascript e le interfacceutente, Framework come Zend 0 .Net,editor evoluti come Visual Studio,Eclipse, Zend Studio e PHPEdit. Natu-ralmente, amalgamando il tutto conmetodologie strutturate e non lascia-te al semplice caso., CO SA C ONSIG LIERESTIA UN P ROGRAMMATORE " IN ERBA"?P.B. Penso sia, innanzitutto, unaquestione di mentalita, Inoltre, oggiesistono strumenti gratuiti, rna allostesso tempo molto potenti, messi adisposizione da Microsoft. ComeVisualWeb Developer 2010 Express, che con-sente di scrivere codice con ASP.NETMVCe librerie di testing di terze partiche si integrano in Visual Studio. Glistrumenti gratuiti permettono di usarele librerie della programmazione percontratti e anche i tool per Silverlight4 di Visual Studio 2010 sono gratuiti.Penso che, al giorno d'oggi, le barrie-

re per scrivere codice di qualita findall 'inizio siano pili basse di qualcheanna fa. Spero che questa porti a unanaturale propensione per la qualita,anche quando si sviluppera in teamdi lavoro e sara pili forte I'esigenza diusare metodologie condivise e tool pilisofisticati. Lavorando ogni giorno congli sviluppatori italiani, so bene quan-to siano cari certi temi oggi. Questo esicuramente incoraggiante.F.F. It consiglio che do sempre: "Stu-diare e confrontarsi", Un bravo svilup-patore non smette mai di studiare percercare di migliorarsi e di migliorare ilproprio codice. Saper sviluppare nonsignifica conoscere questa 0 quel lin-guaggio, rna conoscere anche le bestpractice e saperle applicare quando ne-cessarie. Non solo, partecipare a eventie congressi (tecnici) aiuta moltissimoe permette di vedere come problemi si-mili sono stati affrontati da altri esper-ti. Comunque, se dovessi proporre unqualcosa di "concreto e da usare subitoper miqliorarsi", suggerirei di sicuro itlibro di Design Pattern della GoF (De-sign Patterns, Elementi per il riuso disoftware a oggetti, http://tinyurl.com/pattern-go!). E perche no, di parteci-pare al prossimo phpDay!M.T.Un consiglio vecchio come il mon-do, rna sempre valido, e trarre ispira-zione e imparare dai pili esperti, se-guendo - e, dove possibile, chiedendo- e discernendo cia che pili e adatto alproprio percorso professionale. Unita-mente a questo, direi di "non tentaredi invent are nuovamente la niota": cisono gia metodologie e strumenti con-solidati che agevolano il lavoro e per-mettono di mantenere alta e condivisala qualita generale (ad esempio, tuttigli standard Web, processi di sviluppocome la metodologia "agile" nella pro-grammazione, e via dicendo).Ma un po' di sana curiosita e intra-prendenza, naturalmente, non guasta-no maio Vanno, comunque, applicate,anche identificando e affinando quellametodologia personale che garantisca,comunque, la qualita del prodotto fi-nale, magari in tempi pili brevi e conun processo pili affine alla propria in-dole. E, poi, non bisogna mai dare nul-la per scontato, rna verificare sempre ilproprio lavoro.

http://tinyurl.com/http://tinyurl.com/

8/3/2019 2 - Web Design

19/68

PROGETTO 6// La net-semiology W eb des ign

Comun i c a r eb e n e s u In te r n e tI s e g re t i p e r r e a l i z z a r e u n b u o n s i t o . Im p a r ia m oa u s a r e c o r r e t t a m e n t e i s e g n i c o m u n ic a t i v i :c o lo r i , t e s t i e d e le m e n t i d i n a v ig a z io n e

La net-semiology e una discipli-na che miscela tre ingredientifondamentali: semiotica, Webdesign e usabilita. Consiste nelladisamina degli elementi che funzio-nano 0 meno nel Web. Non si tratta,quindi, di semplice teoria, rna di unsistema per analizzare e migliora-re la progettazione di un sito.Per la net-semiology un sito Web e ,in ultima analisi, un testa oggettodi osservazione, un agglomerato disegni (contenuto, grafica, ecc.) dacomprendere. Cosi corne, per la semi-otica, testi sono film, manifestazionisportive e, pili in generale, tutto ciache e capace di diffondere un signifi-cato. Mentre l'usabilita mette l'ope-

ratore al centro del proprio svilup-po, la net-semiology si focalizzasulla comunicazione a prescinderedai soggetti coinvolti. Un sito puoessere usabile, rna deve trasmetterecon precisione il messaggio che leparti intendono comunicare. In sin-tesi, la comunicazione tra mittente edestinatario deve impiegare al me-glio i segni (colori, grafica, testo,elementi di navigazione) di cui siavvale.LA COMUN ICAZ IO NESEMIOLOGICASe un sito non viene compreso daisuoi visitatori, significa che il flus-so comunicativo si e interrotto da

CODICEFunzlon. M.tallngulstlca

CONTATTOFunzlone FAtica

CONTESTOFunzlone R.r.renz.lal.

MESSAGGIOFunzlon. Poetic.

F ig ur a 1 - Lo s che ma d i Ja ko bs on : a o gn i fo rm a d i c om un ic az io n e (m es sa gg io , m it te nte ,d es tin a ta rio , c o nt es to , c a na le e c o d i c e) , c o r ris p o n d on o f at to r i e s s en z ia li ( po e ti ca ,e m o ti va , c o n a ti va , r e fe r en z ia le , Iatica. meta l i ngu i s t i c a )

REQUJSITIL iv e ll o: m e di o

Leggi anche: g li altriprogetti di questo

Cap i to l o

qualche parte. E giunta l'ora di sot-toporlo a una revisione. L'obiettivodell 'analisi e ottimizzare le paginedel situ al fine di renderle funziona-li. informative ed efficaci.n messaggio che il sito intende tra-smettere viene comunemente chia-mato "teste", Col termine "teste" siintende una sequenza di idee, tradue discontinuita della cornunica-zione. In altri termini, e testa siaun giornale sia ogni articolo che 10compone. Qualsiasi testa e caratte-rizzato da diversi elementi cornuni-cativi. In un programma televisivo,ad esempio, la comunicazione siavvale di immagini, suoni e parole.In un Iibro, di parole e immagini. Inun sito Web la comunicazione toccamolti aspetti: parole, grafica, suono,animazione, navigazione, funziona-lita. fruibilita e struttura dellinfer-mazione, relazione tra le inforrnazio-ni. It testa richiede l'attenzione e lapartecipazione del lettore. Compitodel navigatore e l'interpretazione, lacomprensione del messaggio, la pro-duzione di nuova conoscenza. Mit-tente e destinatario contribuisconofattivamente alla definizione delmessaggio veicolato sul Web.MESSAGG I IN RETEI messaggi hanno significato e scopolegati alle funzioni che assolvono.In tal senso va la catalogazione del-le funzioni del linguaggio ascrivibileal filologo russo Roman Jakobson(fiqura 1). In un sito la funzionereferenziale si palesa col tentativodi informare l'utente. La funzioneemotiva riguarda l'impiego dellagrafica per calcare la valenza erne-

8/3/2019 2 - Web Design

20/68

Web des ign PROGETTO 611la ne t - s em i o l ogytiva. Ouella fatica consiste nell'at-trarre interesse con elementi testualie grafici.La funzione conativa (0 persuasiva)imp one la registrazione 0 la compi-lazione di un modulo. Quella meta-linguistic a fa si che un site espongail mezzo comunicativo Internet. Lafunzione estetica ha a che fare conl'implementazione di siti Flash prividi intenti comunicativi.Consideriamo un caso reale: Fa-cebook (figma 2). Oggi tutti sannoche, per riallacciare rapporti perdutinel tempo, non c'e di meglio. Anchese qualcuno gia sfrutta 10 spazio vir-tuale per iniziative commerciali. Lafunzione fatica viene usata in modoprevalente. n contatto non necessi-ta cura particolare nell'eloquio , didescrizioni in dettaglio. Non si deveforzare l'altrui volonta, Al limite,si las c ia che i sentimenti prendanoil sopravvento. n contatto divente-ra relazione solo ricorrendo ad altrimezzi comunicativi: mail, chat 0 in-contro reale.CASE H ISTORY : ANAL ISID I UN SITO ISTITUZ IO N ALEScegliamo un sito "importante" comequello del Governo (www.governo.it) e cerchiamo di comprenderne iregistri comunicativi. Quali usare,come usarli, come e quali affiancare.La nostra, ovvio, e un'analisi esclu-sivamente tecnica.

Solitamente, i registri impiegati inun site Internet sono i seguenti:1. classificazione;2. registro identificativo;3. registro comunicativo strutturale;4. registro comunicativo della rela-zione;5. registro comunicativo della navi-qabilita:6. registro della fruibilita dell'infor-mazione;7. registro comunicativo del testo;8. registro comunicativo della grafica;9. registro comunicativo dell' anima-zione;10. registro comunicativo del suono;11. registro comunicativo della fun-zionalita.A ognuno assegneremo un voto inbase al modo in cui, dal nostro pun-to di vista, viene affrontato. Nel casospecifico abbiamo:1. Classificazione del sitoSito istituzionale.2. Registro identificativoVoto:****~n sito e raggiungibile all'Url www.governo. it. Scelta perfetta per bre-vita, sernplicita, intuitivita e facilememorizzazione. La prospettiva delsito e fondamentalmente endocentri-ca. Le notizie e i documenti a dispo-sizione sono nel sito. n richiamo a

~"_"Ij

Ter'lIl.GIoaIlUK.~P~~.. . , . , . . . , ,"~= a o I _I I I I I .""bbSdI~.""f~"""" Ie~cI;:e2Y.1m 1cri

Qou!tfIb.::"dlffICrbook,"'c.pi~'D,.t."elden~~Aa.~:o:n. ,. . . . .. . . . 1 oO o a ..qwa. " " ' I ! t.... b o ! f t I H o toui(~ MlIO"e"", d orme - ." lk I l t i 1 . . J l!]:;1:"""0$~!a C~ M.~ ConcMiO.-C._:>tDrnDPIkflllo""f:.l .........IO .

~ " O O " . . .:."~1':ti...._...j,,,....~:!-ito:I!i.IJ.~ . ~ ' < ~~"GGI":":IC"~ C"""I!t e- ~:!":r....aor.'ll:'I_ebI,o,l(lIod.,~:S~~: .-:-"~l',e.r.u . : - " " ' . . .. . . ~ ~ mr, .faU5ta Paone

Inprirnoj>l.or.o

;t;"'''i.t~ ~=lOt~:.o. tll~~,!,!".,. QHXttqllku_ve'" !II-.1:>a.1'

8/3/2019 2 - Web Design

21/68

My Video crasstncrte Ga!egon

~' " ' "'~to:L7.76):~

DlI~: 18/MlOOl,:,~:~: 2.2626y:~

00:47!1!!ti!: 21/09/2009\1sto;2.796il~:~

O~tI: 2.0/09/2009~:o:1.8705y:~

eMm: 11/09/1009'!!~:~:3.344;;\:~

Figura 3 - Quando si realizza un sito Internet con contributi filmat i, e opportuno dedicareallo scopo un apposito canale riconducibile al sito stesso

GovefJ J D ll~J~iano/Jlc4',* 'uxz, /d~ ..: ? d , . , ,*

8/3/2019 2 - Web Design

22/68

W eb de s ign PROGETIO 6 lila net-semiology[ ART SEMIOLOGY 1 [ NET SEMIOLOGY 1 [ LOGOSEMIOTICA 1 [ MORFOSEMIOTICA 1

F ig u ra 5 - L a p o lis e ma n tic a e f or ma ta d a v a rie m et od o lo g ie : a rt s e mio lo g y (t es ti v is iv i), n e t s e mio lo g y (W e b), lo g os e mio tic a (p a ro le ,l in g u a ), f o n o sem io t ic a (s u o n i) e m o rf o s em io t ic a (f o rm e )

informazioni sono brevi e chiare. Gliaggiornamenti sono frequenti e co-stanti. L'informazione e fruibile. an-che se si cerca con molta parsimoniadi catturare l'attenzione degli utentie spingerli a rimanere nel sito , a dif-ferenza di cio che accade sulla cartastampata, dove nel titolo e negli oc-chielli si condensa la conclusione diun tema affrontato.7. Registro comunicativodel testaVoto: *****n linguaggio adottato e compren-sibile. Le etiehette sono accurate,COS1 come la struttura linguisticae semantica. I testi sono divisi perparagrafi, facilmente identificabilinella pagina, non partieo larmentearticolati. In genere, esprimono unsolo concetto. La comunicazione eimpersonale, distants. basata sul di-seorso riportato, sul detto da altri.Ad esempio, "il ministro ha parteci-pato al convegno e ha parlato di ... ''.L'esposizione si basa sul raccontodegli accadimenti nell'ordine in cuisi susseguono i fatti. n registro co-municativo del testa e coerente conle finalita che il sito si propone.8. Registro comunicativodella graficaVoto: *****La grafica e omogenea in tutto il

sito. Gli elementi importanti (inte-stazione, strumenti di navigazione)sono posizionati in modo rilevante,cioe nella parte alta della pagina.Le immagini sono poche, di piccoladimensione e peso. Oltre alla fotopermanente del Presidente del consi-glio, si nota la frequente turnazionedi immagini raffiguranti i luoghi disvolgimento dell'attivita di governo.L'amalgama cromatica e idonea aun sito istituzionale. Sobrieta e laparola d'ordine. Lo sfondo e biancoper favorire una buona lettura. nmenu di navigazione a sinistra, sem-pre presente, ha sfondo blu chiaro.L'intestazione e improntata all 'au-torevo lezza. alla serieta. Si trattadi un'immagine caratterizzata dalsimbolo della Repubblica italiana edalla dicitura "Governo italiano" inversione tricolore. Evocativa per ipili sensibili. Solo nella home pageeompaiono ulteriori colori. Peraltro,limitati a sottili etichette collocatein posizione centrale, -che, anche inquesto modo, identificano argomen-ti differenti. A queste si aggiunge lasezione Dossier, che risalta in posi-zione defilata con sfondi pastellati.9. Registro comunicativodell' animazioneVOTO: *****n sito prop one un segmento di ma-teria le audiovisi vo, di cara t tere in-

formativo (vedi conferenze stampa).I filmati sono disponibili in formatieterogenei. La seelta e tra tre pla-yer freeware di largo impiego: QuickTime, Real Player e Windows MediaPlayer. La qualita e , in genere, buonae il tempo di caricamento poco ri-levante. Ma la dotazione tecnologicadei navigatori e incidente. Con unaAdsl non si han no inconvenienti.10. Registro comunicativodel suo noVoto: *****Non ci sono effetti acustici, se non ilsonoro dei filmati.11. Registro comunicativodella funzfonalitaVoto: ****14I registri comunicativi sono suffi-cientemente integrati e coordinati.Finalita prineipale e dare un servi-zio, informazioni sul ruolo e sulleattivita svolte. In realta. l'obiettivoe pili ambizioso: instaurare un rap-porto pili trasparente con il citta-dino. Iniziativa lodevole, rna siamosolo agli inizi. n sito privilegia unrapporto riservato e personale con ilcittadino. Gli utenti sono legati traloro dalla sola newsletter. E l'unicocaso in cui il rapporto diventa diret-to. n sito , in conclusione, raggiungequasi completamente gli intenti eo-municativi.

8/3/2019 2 - Web Design

23/68

L'utilitil dei motoridi ricerca interniPe rc he n on os ta nte mo lti s it i imp leme ntin oun p rop rio s is tema , gli u ten ti c o n tin uan oa p re fe r ire Go ogle ?

MO ltisiti d ispon go no di un m otore d ir ic er ca in te mo . L ob ie ttiv o e agevo-lare il recu pero d i d ati e d ocu me nti.S ov en te , p er o. i r is ulta ti r es titu iti a ll'u te nteso no d i q ualita scad ente, in com pleti 0 pern ulla a ttinenti. T an to basta p er rend ere pre -f er ib ile il r ic or so a m o to ri d i r ic er ca tr ad iz io -n ali, c om e G oo gle, Y ah oo !, ecc., p er ce rc arequalco sa aU 'in tem o d i un sito . Qua li s on oi m otivi d i questo insueeesso? C i so noa sp etti tecn ici e a ltri le gati aU 'in terfacc ia .N orm alm ente i m oto ri d i ricerca in tem i im -p iegan o in dici b asati su algo ritm i div ers i daq ue lli d ei m o to ri g en er alis ti c om e G o og le . P erlo pili, com pilano per ogn i pag ina un indi-c e, u na lis ta d i lem m i asso ciati. La r ic er ca s ib as a s ul l'a na li si d eU ' in d ic e. Q u es to s is te m a ea da tto a lle r ic er ch e le ss ic ali, c io e a lla r ic er cad i un a parola 0 d i una se rie di parole in untes to . C om e per i b log e i Cm s. M a senza te -n ere co nto d ella lem m atizzaz io ne. C osa ch e,in ve ce , f an no i m o to ri d i r ic er ca g en er alis ti.L A L E M M A T IZ Z A Z IO N En term ine d eriv a da lem ma, co n cui si in ten-d e ogn i paro la ch iav e d i un v ocabo la rio . Lal emmat izzaz ione e un in siem e di attivita

e he m i ra no a e on du rr e tu tte le fo rm e lin -g u is ti eh e a l r is p et ti vo l emm a . Ad e sem pi o,le fo rm e "d orm iro" , "do rm iv o" . "d orm iran -n o" , " do rm i" si rid uco no allem m a " do rm ire" ,E co nv en zio ne ita lian a ch e i v erb i sia no in se-riti n ei d izio na ri alla fo rm a co niu gata a ll'in -f in ito p re se nte a ttiv o. P ili 0m en o tu tti, n ellap ratica quo tid iana, u siam o lem mi e fo rm e en e c om pren dia mo la d ifferen za. S em brere b-b e sem plice, rn a l'o sserv azio ne d ella rea ltainduce a riflettere su lle quan tita e qualitad eg li au to matism i ch e o gn un o d i n oi u tilizzaqu an do si esp rim e, e su qu anta sia com plica-to f or ma liz za re q ue sti a uto m atis mi. E sis to nod u e t ip i d i l emm a ti zz az io n e: mor f ol og ie a em orfo-sintattiea.La prim a ana lizza le fo rm e di paro le a pre -s cin de re d al c on te sto s in ta ttic o, r es titu en doi v alo ri p ossib ili in u n sistem a lin gu istico . A desem pio, la fo rm a "lascia" e lemmatizzataco n " las ciare" , M a " la scia" e s ia i nd ic a ti v op resen te che im perativ o . Oppure la fo rm a"insulto" . che p uo essere lem matizza ta co n"insulto" , sostan tiv o singo lare m aschile , eco n "in sultare" . v erbo a ll'in fin ito di p rim ac on iu ga zio ne . Q u ella m o rf o- sin ta ttic a, in ve -ce , an alizz a le fo rm e n el c on te sto sin tattico

.P'. V IR G IL IO I o4 AP rE

REQUISmLivello: avanzatoSe 10 sai e meglio:

c on os ce nz e b as e s uif u n zi o na m e nt o d e imatori di ricerca

in cui son o collocate . N on c'e , q uin di, am bi-q uita , p oich e il con testo ne defin isce v aloree s ig nificato . D alla frase "P ierino lasc ia lascuola" si d edu ce che il lem m a e " lasciare" :d aU a f ra se " L in su lt o e l 'arm a del b arbaro " sie vin ce c he ille mm a e "insulto",U N T E S T O B E N O R G A N I Z Z A T OPerche s i effettua la lem matizzazione? Pero rgan izzare illessico di un testo in m odo daren dem e a gev ole la co nsu ltazio ne. L e c om u-n i ricerche di testa rep erisco no le istanze d iu n lem ma, in q ua lsias i form a si presenti. Em eno co nsu eto ch e la rice rca m iri a rep erireil n um ero d i o cco rren ze d i u na certa fo rm a. nW eb e r ie eo d i a re hiv i d i te sti. M o lti p er cn on s on o l emm a tiz za ti . Ce ch i ritien e ch eu na ricerc a b asa ta su strin g h e d i caratteri siasu ffic ie nte. M a n on e cosi, In alcuni casi ead dirittu ra co ntro pro du cen te. G li in co nv e-n ienti a cu i si puc andare incon tro so no ir i su l ta t i annaequa ti , cioe un outpu t ched ev e ess ere rip ulito d ag li esiti n on co ere nti,e la p e rd it a d i i nf orma z io n e, p er q uan tan on v ie ne tr ov ato .A o gg i la le mma tiz za zio ne e un 'ope raz ionelun ga e com plessa, sia p erch e n on si d ispon e

.......,t

q" J 1 )I. \'! ! \...."-',,' r "..1, I, _\, I! I ,.,'o-" \.-.. I -_

.;1

_K1~1o< .... o" " " " " " , ,~.--~.-.- . _ . . . . _ _ -_ -

F ig ura 1 - II m oto re d i r ic er ca in te rn o p ro po sto d a Vir gi liop e r la r ic e rc a c ar to gr afic a

F igu ra 2 - le F er ro vie d ello s ta tu a do tta no u n m oto re d i r ic erc ain te rn o p e r la p ia n if ic az io n e d eg li it in e ra ri fe rr ov ia ri

8/3/2019 2 - Web Design

24/68

Figura 3 - GoogleMaps ha una sola caselladi testo per la ricerca: interpreta virgole,numeri, indirizzi, relazioni e formati

d i l emma ti z za to ri au toma t ic i comp let amentee ff ic ie n ti , s ia p e rc h e i c ri te ri d i l emma ti zz a-z io n e d e v on o a ff ro n ta re l a v a ri ab il it a l in g ui -stica.LA SEM AN TIC A AL SERV IZIODEL W EBI m o to ri d i ric erc a g en era lis ti si a vv alg on oan ch e d i u n sistem a d i in dicizz azio ne se -m an ti ca (L at en t s em an ti c i nd e xi ng ) . L s i e u ncomp les so a lgo r itmo che v e r if ic a l a p r e senzan ei siti d elle p aro le ch iav e e d i q ue lle affi-ni, p er s ig ni fic at o, a l c on te sto ( ad e sem pioi s in on im i ). G o og le s i d if fe re nz ia d ag li a lt rim o to ri d i r ic er ca p er a v er e r ie la bo ra to e p er -s on al iz za to t al e a lg or it mo , a l p un to d a b re -v e tt ar e l a p ro p ri a v e rs io n e.A n a li zz iam o u n c as o p ra tic o p er i nt en de rc im e gl io . L a p ar ol e " In te r" e " sq ua dr a" tr ov e-r anno a f fi n it a con " camp iona to " ,E v e ros im il -m e nt e c on " ca lc ic " e "Mor att i" , S e a s eg ui tod i u na r ic erc a d elle p ar ole c hia ve , il n os tros ite d i a pp as sio na ti e tifo si in te ris ti n on fi-g ur a n el le p os iz io ni a lte d el la c la ss if ic a d eis iti r es ti tu iti , s ig nif ic a c he i l c on te nu to n one state co nsid erato rilev an te . C ia c i p orta

OocoderM-fSkyHO~~nepr UO

~1~(-,,~_;!,~ -,c-,Q , g

Figura 4 _ Prima, la ricerca sumappy.it ve-niva falta can pili campi. Ora,anche su questaportale c'e unasola casella dove inserire nntol

L A R IC E R C A A V A N Z A T AAlcuni motori di ricerca interni propongono la ricerca avanzata. l.'utihta e eviden-teo Ad esempio, per la ricerca di carline di Virgilio all'indirizzo http://mappe.alice. it, per la ricerca di aziende nel sito di Pagine Gialle (www.paginegialle.it), di orari di mezzi pubblici come i treni delle Ferrovie della Stato (www.ferroviedellostato.it), 0 dei voli aerei Alitalia (www.alitalia.com/ it_it). Tipicamentesi tratta della consultazione di banche dati. Cerlo e che non sempre si avverleI'esigenza di questo livello di cornplessita. Consideriamo il caso di Google Mapsall'indirizzo http://maps.google.it/maps?hl=it&tab=wl. Basta inserire I 'oggettodella rice rca nella sola casella di testo presente. Ad esempio, "Via Mazzini 22,20100 Milano". In questo modo si risparmia all'utente la fatica di muoversi traun campo e I'altro.

a d a ff erm ar e c he l 'o tt im iz za zi on e d i u n s it ep er u n m o to re d i ric erc a ric hie de la s te su rad i s og ge tt i d i p es o, e li mi na nd o 0 riducendoa ll 'e ss en zi al e i l in k a r is or se e ste rn e, q ua n-tu n q ue q ue sti p ossan o e sse re rite nu ti p o-p olari. S on o m olto p iu u tili i lin k a riso rsei nt er ne , c he n on f ramm en ta no i l c on te nu tod el s it o, r na a iu ta no a e ss er e c oe re nt i c on c iac h e s i i nt en d e e sp rim er e.In oltre, la sem an tica m ette il m oto re d i ri-c er ca n ell a c on di zio ne d i c om p re nd er e l 'a r-g om en to affro ntato d al d ocu men to , a sse -g na nd o a o gn un o u na r ile va nz a d if fe re nte .I n g en er al e, s i p uo a ff erm ar e c he l a q ua lit ad ei r is ul ta ti m ig li or a s e it n a v ig a to re d ig i-ta p ill te rm in i d i ric erc a. G oo gle tie ne m e-mo r ia d e ll e p re c ed e nt i r ic e rc h e c o nd o tt e. C i am ig li o ra no tev o lmente i r is u lt a ti o t tenu ti .C he c osa c i asp etta p er it fu tu ro ? I m o to rid i r ic er ca d iv e nt er an no s em p re p iu i nt el li-g e nt i e c ap a ci d i r ep li ca re i l c ompo rt am en tou m an o p er q ua nto c on ce rn e la ric erc a i n I n-t er ne t. L i nt el li qe n za a rt if ic ia le s ar a a d is po -s iz io n e d e i n a v ig a to ri c o nt ro 1 0 s p am ( in c re -m e nt o v o lu to d el n um e ro d i o cc or re nz e i n u nte sto ) e p otr a id en tific are il c on te nu to n onsignificativo.n r ic or so a ll e t ec ni ch e L si e p iu a da tt o a i m o -to ri g en era lis ti c he a q ue lli in te rn i, p oic hep os so no c on ta re s u u n a lt o n um e ro d i p a g in eda ana li z za r e. n b as so n um e ro , i nf at ti , p ro -d u ce r is u lt at i m e n o p re c is i.

g e ne ra li st i h a u n c ompo rt am en to c o ns o li da -t o. N o n c am b iam o c on v en zi on i. U n a s ol a c a-s el la d i t es to , p iu tt os to lu ng a, p er l a r ic er ca ,u n s ol o p ul sa nt e p er a v via re l 'a zi on e, O p ti a-m o p e r l a s emp l ic it a e l 'e s se n zi al it a,N e ss un c om p on en te a gg iu nt iv o : c he ck b o x,c a se l le comb ina t e, e c c . Ev i ti amoche l 'u t en t ei nt er pr et i l 'm t er fa c ci a e s i p o n g a d omand e s ucome ope ra r e .M aga ri a iut iamo lo con de i sug -g e rim en ti . R a rnm ent iamo a ll 'u te n te c h e p e rm ig li or ar e i r is ul ta ti s i p os so no i ns er ir e p iut e rm in i . Lope ra tor e log ico d i de f au l t e r A N D .LOR f a a um en ta re i r is ulta ti. G uin di, il s uoimpiego va ' med it at e, s e s i m i ra a ll 'u s ab il it ad el m o to re . L a p ag in a d ei r is ult at i d ov re bb emo s tr ar e i l t it ol o ( ta g mLE ) d e ll a p a g in a t ro -v at a, c ol le ga to a ll a r is or sa , e u n e st ra tt o d elt es ta d e l d o cument o r ec u pe ra te . i nc lu d en d oin q ua lc he m o do la p ar ola c hia ve . E vitia mol 'u so d el m e ta ta g DE SCR IPTION ,p es so n ons ig ni fi ca tiv o p er tu tt e l e c hi av i d i r ic er ca , ele p erc en tu ali c he in dic an o la rile va nz a d eld oc um e nt o, d al m om en to c he i r is ul ta ti s on og ia p r op o st i i n b a se a ll a l or o im por ta n za .PAG IN E ESTERN E: M EG LIOI MOTORI G ENERALISTII m o to ri g en er al is ti m i su ra no i l g ra dime nt od el le n os tr e p ag in e We b a ttr av er so i l in k c hea e ss e c on du co no . S i p re sum e c he c ol or a c heh an no lin ka to le n os tre p ag in e, 1 0 a bb ia nofa tto a ra gio n v ed uta e c io e p erc he le h an nogiud icate in te ressan ti .E f il os of ia d ei m o to ri d i r ic er ca g en er al is tip ri v il eg ia re l e p a gi ne c h e v a nt an o mo l ti l in kin in gr es so , a p ar ita d i q ua lita d ei r is ulta tic o ns eg u it i c o n l a r ic e rc a , c o ll oc a nd o li p iu i na l to ne ll a c l as s if ic a . n p ro ble ma v ero e ch ei m oto ri d i ricerca in tern i no n im p le me n-t an o m e cc an ism i d i s tir n a d el la r ep ut az io -ne delle pag ine basata su lla conoscenzad ei lin k in in gre ss o. L 'o pe ra zio ne e o ne ro -s a e d i c om p le ss a a ttu az io ne .

M IG LIO RARE LE RIC ERC HEAl la l uc e d e ll e c o ns id e ra zi on i f at te i n p re c e-d en za, si p uo p en sare ch e la p re sen za d i u nm o to re d i r ic er ca i nt er no n on s ia s em p re a z-z e cc a ta . S o p ra tt ut to i n q u ei s it i d o ve i l t as som ed io d i in su cc es so d ella ric er ca e tro pp oa lto . O ua lc he v olta e m eg lio c on ce ntra rs is u ll a s o la n a vi ga z io n e. L a d do v e il m o t or e c 'e ,po s sono e s se r e u t il i a l cune indi c az ion i .In te rfa cc ia : l'u te nte c he tra tta c on i m o to ri

http://maps.google.it/maps?hl=it&tab=wl.http://maps.google.it/maps?hl=it&tab=wl.

8/3/2019 2 - Web Design

25/68

In fo gra fic a : o lt re Ie p a ro le /I PROGETTO 8 W eb de s ign

Qu a n d o Ie p a ro len o n basta no...Pe r com un ic a re un m essa gg io in m odoe ffic a c e e a l m aggio r num e ro d i p e rs o ne ,s i p UG usa re I'in fo gra fic a . E cco com e ...L

'uomo ha cominciato a espri-mersi attraverso le immaginiassai prima di scrivere: la co-municazione grafica affonda le sue

radici nella notte dei tempi. In mol-te situazioni, d'altra parte, le paro-le non bastano per esprimere conefficacia e immediatezza il con-tenuto di un messaggio. Questo aprescindere dal mezzo usato per lacomunicazione, tradizionale, come lacarta, 0 tecnologicamente evoluto,come il Web.INTERPRETAZIONEDELL'INFOGRAFICAI lettori /naviqatori non so no facil-mente catalogabili. Appartengono a"specie" differenti e, come tali, in-trattengono con l'informazione rap-porti eterogenei. L'unica certezza eche tutti mirano a comprendere il si-gnificato del messaggio ricevuto. Laveste grafica consente di svelare echiarire i dettagli occulti del mes-saggio, di filtrare l'informazio ne. diandare oltre cia che si vede e si leg-

REQUISrrIUvello: medioLeggi anche:Web design!

ProgettazioneiProge tt o 6

Figura 1 - Fame, freddo, temperatura, altitudine, distanza, direzione di viaggio: la mappadi Minard spiega i motivi del fallimento della campagna di Napoleone in Russia

ge. Una buona parte dell'infograficae caratterizzata dalla presenza di for-me specialistiche, che rappresentanoinformazioni sofisticate e spessoastratte. La corretta interpretazionedel significato richiede al fruitoreun buon livello di conoscenza gra-fica. A volte la complessita obbligaall'acquisizione di capacita di deco-difica non innate nell'individuo. Una

U N A M A P P A C O M E U N C I R C U I T ONel 1933 I'ingegnere elettronico Henry Beck ha realizzato una mappa del siste-ma metropolitano di Londra, approcciando il progetto come se si trattasse didisegnare un circuito elettrico. Ha utilizzato linee colorate, orizzontali, verticalio inclinate di 45 gradi, per rappresentare i percorsi su cui sono collocate Iestazioni. La riproduzione e approssimativa, rna da una visione coerente di un si-stema complesso. La rete si espande, la mappa subisce nell'arco del tempo di-versi restyling e aggiunte, pur rimanendo fedele all'impianto originale. Peraltro,i nuovi elementi topografici introdotti non creane confusione (vedi la presenzadel fiume Tamigi su alcune rnappe). La mappa soddisfa un bisogno semplice rnafondamentale, quale quello dell'organizzazione di uno spostamento attraversola rete metropolitana.

conoscenza delle convenzioni per ladistribuzione e l'organizzazione deivari elementi raffigurati, agevola lacomprensione. In ultima analisi, lafacilita di rappresentazione e con-traddistinta dal suo livello di astra-zione. Pili la rappresentazione esemplificata e realistica, pili e fa-cile da capire. Pili alto e il livello diastrazione, pili oscuro il significato.

Figura 2 - Un'icona dal semplicemessaggio: vietato fumare

8/3/2019 2 - Web Design

26/68

Figura 3 - l'attuale ramificazione della metropolitana londinesesoddisfaun bisognosemplicernafondamentale: I'organizzazione di unospostamentoattraverso la rete metropolitana

I migliori effetti si ottengono rimuo-venda i dettagli non utili.PROGETTAREUN'INFOGRAFICAGli elementi da considerare nellam-bito della progettazione di un'infor-mazione grafica ben fatta sono tre:1. Comprendere distintamente

la tipologia di informazioneche si cerca di comunicare:spaziale, crono logica.. quantita-tiva oppure, come puo avveni-re, una combinazione di tutte.La tipologia spaziale riguardainformazioni che descrivonoubicazioni, coordinate spazia-

li di un luogo fisico 0 concet-tuale. La tipologia quantitativadescrive informazioni inerenti ascala, proporzione, cambiamen-to e organizzazione di quantitanella spazio 0 nel tempo. Quellacronologica delinea sequenze erelazioni di causa in una lineatemp orale fisica 0 concettuale.2. Concepire una rappresenta-zione in cui l'informazione evista in modo olistico, ossiadove un intero va al di lil. del-la somma delle sue componen-ti. a prescindere dal fatto chesi tratti di diagrammi, grafici,mappe 0 linee temporali. Tra idiagrammi distinguiamo le ico-

Figura 4 - I pittogrammi del designer O tl Aicher ai giochi olimpici del 1972 destinatiad influenzare la stilizzazione della figura umana nella segnaletica pubblica

U N P O ' 0 1 S T O R I AAII'ingegnere scozzese WilliamPlayfair e riconosciuta la pa-tern ita dell' invenzione dei gra-fici a barre e a torta. Nel 1786pubblica The Commercial andPolitical Atlas, la prima raccoltaplanetaria di grafici statistici.Piu recentemente la graficasviluppa un vero e proprio lin-guaggio visivo. Nel 1861 I'inge-gnere francese Charles JosephMinard presenta un grafico concui raffigura Ie innumerevolimotivazioni (fame, freddo, tem-peratura, altitudine, distanza,direzione di viaqqio) per cuifain la marcia di Napoleone suMosca durante la campagna diRussia del 1812. Nel 1920, ilsociologo e filosofo austriacoOtto Neurath, nella cltta diVienna, con I'aiuto dell' il lu-stratore Gerd Arntz, inventaI'lsotype, acronimo di Interna-tional System of TypographicPicture Education, un insiemedi pittogrammi finalizzato aliacomunicazione visuale tra in-segnanti e bambini. In realta, ilsuo impiego si spinse assai piulontano rispetto aile intenzionidi partenza, rivoluzionando lamoderna segnaletica pubblicae I'infografica. Lo scopo socia Iee evidente. Con un'immagine sipossono veicolare consistentiquantitativi di informazioni, aprescindere dal backgroundculturale dei riceventi. La linguaparlata e scritta si rivela menoimmediata e comprensibile.

ne, che semplificano la visio nedella realta, Con i diagrammie possibile rappresentare seriedi eventi, azioni e relazioni dicausa, interazioni spazio-tem-porali 0 sequenziali ed esporreparticolari 0 punti di vista nonpercepibili all' occhio umano. Lemappe hanno il compito di mo-strare la collocazione di qualco-sa in relazione a qualcos'altro ,dati e informazioni quantitativein relazione a una localita geo-

8/3/2019 2 - Web Design

27/68

In fo gra fic a : o lt re Ie p a ro le 1 / PROGETTO 8 W eb de s ign

C O S A U S A R E S E N Z A S P E N D E R E N U L L A ?Gimp (Gnu image manipulation program, www.it.gimp.org) e un softwareparticolarmente indicato per il fotoritocco, la fotocomposizione e la creazionedi immagini bitmap. Ha un sistema batch per I'elaborazione di immagini, unasoluzione per il rendering di immagini, un convertitore tra formati e altro ancora.E compatibile con i piu diffusi sistemi operativi, come Mcrosoft Windows 2000,XP, 2003, Vista, Seven, Linux e MacOS. L'ultima versione, disponibile nel Cdnumero 2 di anchio Siti Web, sezione Web design, necessita di uno spazio sudisco libero per I'installazione non superiore a 80,3 MB. II suo impiego spaziatra la realizzazione di grafici e loghi, il ridimensionamento e taglio (crop) di foto-grafie, la manipolazione 0 correzione dei colori, la fusione 0 sovrapposizione dimolte immagini in una, la rimozione di elementi non vol uti e la conversione traformati. Gimp puo essere adottato anche per la creazione di elementari immagi-ni animate in formato Gif.

grafica, descrizioni schematichee astratte di sequenze e proces-si. I grafici riguardano per 10 piliflussi informativi e la variazionedi dimensioni nel tempo. Ma cisono anche le tradizionali barredi comparazione e le torte concui si analizza la distribuzionedi sing ole parti rispetto all'in-tero. La linea temp