Webdesign e progettazione

Candidato: Massimo D’Ambrogio Relatore: Marco Bozzola

1

2

3

4

L’obiettivo di questa tesi di laurea è quello di fornire una panoramica di quello che significa progettare, contestualizzando il tutto nell’ambito informatico di Internet.

Dato che il WEB è un sistema in continua e rapida evoluzione, occorre aggiornarsi costantemente utilizzando tutti gli strumenti offerti da Internet come Social Network, Forum, Blog o siti specializzati come Stack Overflow, che consentono agli esperti del settore di venire in aiuto dei principianti.

Questa tesi si concentra prevalentemente sulla progettazione del sito IAM., ma affronta anche le fondamenta della progettazione e i principi essenziali che, proprio perchè tali, sono versatili e durevoli nel tempo, utili non solo a chi si occupa di design ma a chiunque abbia il piacere di creare qualche cosa con le proprie mani.

Molti concetti possono sembrare banali o ripetitivi, tuttavia rappresentano una grande risorsa proprio perché semplici da comprendere e applicare.

La prima parte della tesi illustra il centro di ricerca IAM e le basi poste per il progetto svolto con la supervisione del prof. Marco Bozzola. La seconda parte illustra i principi della progettazione e strumenti utili a chi volesse cimentarsi nella realizzazione di un sito web con Wordpress.

Nella terza e ultima sezione viene analizzata, da un punto di vista tecnico e teorico, l’ultima versione del sito IAM. Dato che gli argomenti trattati sono stati approfonditi prevalentemente su testi scritti in inglese, ho cercato di rendere alcuni termini più adatti alla lingua italiana, nei casi in cui non fosse stato possibile, consiglio di consultare il glossario in fondo al libro.

Buona lettura

5

Indice Sommario I.A.M. Istituto di Architettura Montana 8 • La nascita del progetto • Obiettivi di I.A.M • • • • •

Università e montagna Progetti simili a I.A.M.

Cliente

Prodotto Distribuzione

Il sito web esistente • • • • • • • • •

brief

Aspettative

Business Model Struttura del sito Gabbia grafica

Mappa del sito

Flash vs HTML

Analisi “concorrenza” Conclusioni

8 9 11 14 25 26 26

28 29 30 30 31 32 35 36 37 40

Evoluzione del sito passo passo 41 • Problematiche home 6

42

• • • • • • • • • •

47 52 57 58

Problematiche chi siamo Problematiche Archalp

Problematiche “Percorsi” Pagina intro “percorsi”

Problematiche “Percorsi” (Pagina dettaglio) Problematiche “scritti”

Restyle “libri” (Pagina dettaglio) Problematiche “ricerche” Problematiche “biografie” Problematiche “eventi”

61 64 67 69 71 73

Storia del web • • • •

Internet 1996 WORLD EXPOSITION l’evoluzione dei browser contenuti multimediali sul web 1995 DIFFERENZE TRA STAMPA E WEB

77

86 89 94 97

Web e progettazione

104

Web-design Oggi

109

• Human Centered Design (HCD) • Ostacoli di esecuzione e di valutazione • Conformismo aziendale

113 114 115

• Legge di Norman dello sviluppo del prodotto • Influenze esterne

117 120

UXDesign

124

Design e psicologia

131

I meccanismi della mente 141 I meccanismi della lettura 156 memoria 160 Le storie sono importanti in tutti gli ambiti della comunicazione

167 • Flow-state 169 • Il potere della premiazione

171 • FABBISOGNO COGNITIVO 179

• • • •

Principi utili alla progettazione

181

errori comuni e soluzioni

193

Creazione di un sito web

221

• Multimedia

• FTP (file-transfer program)

wordpress - Creazione di un sito

224 225

241

Tecniche base

266

Il nuovo sito iam

270

271 274 275 278 278

• Font • LA nuova veste grafica di Archalp

278 279

Gestione e amministrazione del sito

301

• • • • •

• • • • •

Il 2° restyle di IAM Il 3° e ultimo restyle

Cambiamenti e innovazioni Scelta cromatica Forme e geometrie

Page builder

Widget ad-hoc

Plugins e widget installati I manuali d’uso IAM

Il manuale del sito

303 304 307 314 315

Glossario

318

Utility

325

Bibliografia

330 7

I.A.M. - Istituto di Architettura Montana ■■ La nascita del progetto Nel settembre del 2013 il prof. Marco Bozzola mi propose di collaborare con il Centro di Ricerca I.A.M. per realizzare un progetto di tesi.

Gli ambiti di lavoro erano molteplici, l’Istituto necessitava di un rinnovamento dell’immagine, specialmente sulla rivista Archalp e sul sito web ufficiale. Il progetto proposto mi piacque perché mi consentiva di approfondire argomenti di mio interesse legati, non solo alla progettazione grafica e alle tecnologie informatiche, ma anche all’architettura e alla montagna.

Essendo nato a Biella, ho maturato nel tempo un certo interesse nei confronti della montagna e dell’interazione dell’uomo con essa, per cui ho pensato che collaborare con l’I.A.M. sarebbe stata un’esperienza arricchente e interessante.

In quegli anni inoltre lavoravo presso lo studio E20Progetti di Biella, presso il quale avevo approfondito le mie capacità di impaginazione e di creazione di siti internet, per cui avevo piacere di impiegare le conoscenze apprese in un progetto di utilità sociale.

Inizialmente si valutò un lavoro su entrambi i mezzi di comunicazione, rivista e sito internet, presto però ci si rese conto che seguire entrambi i progetti avrebbe richiesto troppo tempo per una sola persona, quindi si decise di concentrare gli sforzi sullo sviluppo del sito web, definendo un vero e proprio restyling.

8

Nel pomeriggio del il 5 marzo del 2010 A Torino, presso il Castello del Valentino, è stato presentato il rinato Istituto di Architettura Montana, ormai silente da quasi cinquant’anni ma che, negli anni Cinquanta, aveva richiamato il mondo degli architetti al problema del costruire alle alte quote. L’intento allora era essenzialmente quello del trasferimento in montagna dell’architettura moderna in vista di ciò che già stava accadendo: l’urbanizzazione spinta di molte località dedicata essenzialmente agli sport invernali.

Le dotte dissertazioni dei pochi convegni di Bardonecchia sono stati in effetti poi travolte dai vari insediamenti alpini che si susseguirono sull’onda di interessi puramente economici e speculativi.

Interessi che ancora permangono e che ancora gli architetti vorrebbero cercare di imbrigliare e di guidare.

L’imprenditoria edilizia (fatta ormai più da finanziatori che da imprenditori) troppo spesso non mostra interesse per le forme e per il dibattito sull’architettura.

“Non si dimentichi che le vallate alpine stanno ancora facendo i conti con l’imbarazzante eredità dei decenni passati: l’enorme patrimonio di seconde case (nelle sole Alpi italiane le statistiche parlano di 590.000 «gusci vuoti» per la maggior parte dell’anno, pari

a circa il 75% dell’ interacapacità ricettiva) e gli innumerevoli impianti di risalita ora abbandonati disseminati in località minori che non hanno retto la concorrenza dei centri più rinomati. Riguardo a questi temi, un grande sforzo di sensibilizzazione è stato fatto da numerose associazioni ambientaliste, come le«Bandiere Nere» di Legambiente, il W.W.F. con i suoi ricorsi e denunce o Mountain Wilderness CIPRA (Commissione Internazionale per la Protezione delle Alpi), tra i cui risultati si attendono non solo la responsabilizzazione delle amministrazioni locali ma soprattutto l’acquisizione di una maggiore consapevolezza culturale, sia da parte dei cittadini che dei montanari, che consenta di guardare alla montagna come a un territorio da abitare nella complessità dei suoi valori e non come mero scenario a uso e consumo di un turismo arrogante e distratto.”

Roberto Dini Inchiesta curata per Il Giornale dell’Architettura n.75, luglio/agosto 2009 La rinascita dello IAM pone le proprie radici nel Dipartimento di Progettazione Architettonica e di Disegno Industriale, quindi nella didattica della Facoltà di Architettura, a Torino e a Mondovì. È stato costruito un sito informatico apposito, e sono state richiamate all’interno dello IAM tutte le ricerche che sino ad ora si erano sviluppate.

La ricerca scientifica si unisce alla didattica e all’azione progettuale. Molteplici competenze consentono allo IAM di relazionarsi con gli abitanti e con le istituzioni, in un processo continuo di andata e ritorno tra studio e sperimentazione.

■■ Obiettivi di I.A.M Le finalità sono principalmente due: ͽͽ Conoscenza ͽͽ Intervento La montagna è un laboratorio estremamente proficuo e produttivo in termini pedagogici; insegna agli studenti – ma anche ai docenti– a guardare le cose da punti di vista ardui e inaspettati.

Attraverso il progetto del territorio alpino, la scuola con i suoi docenti sperimenta nuove forme e nuovi modi di fare architettura. È una sperimentazione che tocca l’elaborazione di nuovi linguaggi – tema estremamente delicato per le sue relazioni, come si sa, con gli immaginari collettivi e le convenzioni culturali –, come anche il rapporto tra società e architettura, tra sviluppo locale e qualità del paesaggio e dell’abitare. Secondo lo I.A.M. è importante presentare i lavori didattici alpini del Politecnico di Torino, che da sempre costituisce una realtà rilevante nella determinazione di saperi scientifici sulla montagna. Da questo punto di vista, il Politecnico contribuisce in maniera non piccola all’idea e all’identità di Torino come Città delle Alpi.

Qual è il ruolo dell’architettura all’interno dei processi di trasformazione del territorio alpino? Può l’architettura contribuire alla costruzione di un ambiente montano di qualità?

La montagna (le valli piemontesi, dalla Val Tanaro alla Valle d’Aosta) è un ambiente di lavoro immenso, delicato e complicato. Per la provincia di Cuneo si tratta di almeno un terzo dell’intera superficie geografica, con pochissimi abitanti stabili e quindi ormai senza naturale progresso ipotizzabile: sono vere e proprie aree di abbandono.

Per la Valle d’Aosta si tratta invece di aree vitali, abitate con continuità (la quota media della residenza in Valle d’Aosta è da sempre sui 2100 metri s.l.m.).Anche solo il primo obiettivo (conoscere)

9

diventa un impegno di grande ardimento. Si deve dire subito che l’architettura montana (se si vuole, l’edilizia “arcaica” delle valli) è quasi sconosciuta.

Sono più conosciuti i sentieri o le “eventualità valanga”. Si conoscono alcune tipologie “nobili” del Piemonte arcaico, già indagate dal primo Istituto di Architettura Montana (i “rascard”, i “taragn”), altre sono state studiate in seguito (le “caselle”, le “case – villaggio”). Ma qui interessa l’edilizia antica nella sua interezza e quindi anche le tipologie più umili.

A

ddizionando anche pensieri “arcaici” la montagna potrebbe davvero suggerire una nuova architettura.

Ancora mai vista.

Lorenzo Mamino

Ciò che non è mai stato fatto è una mappa, anche sommaria, delle presenze e un ventaglio, anche sommario, delle provenienze e della diffusione di questi tipi abitativi. Andrebbero indagate le derivazioni, le parentele, le varie contaminazioni che si sono prodotte e che sono state sperimentate. Esistono in questo senso edifici molto curiosi: cappelle che sono la combinazione della navata allungata con un vano a pianta centrale, case cresciute in tre direzioni diverse, schiere magrissime ed esili (lungo o a cavallo delle isoipse), ed edifici a piastra estesi nelle due dimensioni. Anche i legami con la storia dell’architettura ufficiale e nota andrebbero meglio indagati.

Molto interessante è la raccolta dei caratteri autoctoni, autentici e distintivi: l’arrangiarsi comunque, il “tut vena a taj”, il “cervello fino”, la “necessità che aguzza l’ingegno”. E cioè le tracce sopravvissute di un pensiero arcaico. C’erano un tempo persone che i piemontesi dicevano “baraventan” e “barivel”. Voleva dire persone che non ci stavano a fare quello che tutti facevano. Erano perciò guardate un po’ con diffidenza e un po’ con sufficienza. Ma a que10

ste persone si faceva ricorso quando le risposte consolidate dall’esperienza non erano soddisfacenti, quando era necessaria un’invenzione non sperimentata.

Anche queste invenzioni andrebbero schedate.

Il grande musicologico, accademico del CAI e resistente Massimo Mila parlava dell’alpinismo «come cultura e forma di conoscenza», ma soprattutto come di un «“conoscere” che è assieme un “fare”», in cui«l’alpinista è colui che conosce agendo»: «per lui il fare è sapere».

Questa visione appare decisiva per provare a interpretare e definire l’architettura alpina e il suo valore pedagogico. Un intreccio inestricabile di fare e conoscere che trasforma la montagna in uno straordinario laboratorio didattico. Il progettare in montagna insegna innanzitutto agli studenti a confrontarsi col tema del LIMITE. Limite in primo luogo geografico, altitudinale, ambientale: uno spazio estremo, dove temperature e precipitazioni,vento ed esposizioni giocano un ruolo cruciale,determinando cantieri talvolta proibitivi e quasi eroici. Ma soprattutto, limite nel senso di un’architettura capace di confrontarsi responsabilmente con i “confini”imposti dalla montagna all’agire umano e alla tecnica,all’impiego di risorse e alla trasformazione dei siti.

Un’architettura quindi che accetta il problema del limite,che si rapporta con esso, fino a tematizzarlo e a farlo diventare un elemento base del progetto. La montagna insegna anche a rapportarsi con la GRAVITÀ. La montagna è destinata a farsi mare e pianura.

La prima azione dell’uomo è quella di sostenere la montagna, di contrastare – o di usare proficuamente– l’energia potenziale delle cose.

Ma la montagna educa soprattutto gli studenti a confrontarsi con la TRIDIMENSIONALITÀ dello spazio e delle cose. Un’interazione tra la dimensione geologica e quella architettonica già colta da Viollet-le-Duc,Ruskin e Bruno Taut. Le grandi coperture delle costruzioni alpine si trasformano in facciate dal valore emblematico e cruciale. Non basta disegnare i prospetti,la scansione geome-

trica delle pelli. Ogni elemento– naturale, minerale, architettonico – assume un rilievo e una materialità decisiva. E ancora, la montagna racconta allo studente l’importanza dell’intrecciare l’architettura con l’idea di MOVIMENTO. In montagna tutto è movimento: lo scorrere delle acque e lo slittamento incessante dei versanti, il susseguirsi repentino di luce e ombra, di sole e di nebbie. Ma anche un muoversi ininterrotto di genti, che per secoli hanno trovato nelle valli alpine protezione e opportunità di vita e abitare, generando un’ibridazione continua di culture e architetture diverse. Tutti questi temi vengono a convergere in quella che forse è l’ontologia massima della montagna, ossia l’idea di RELAZIONALITÀ. Un concetto per prezioso e decisivo, in un mondo ossessionato dal dividere e specializzare qualsiasi cosa.

La montagna ci insegna infatti a non separare la natura dalla costruzione, a depotenziare quella tendenza verso l’assolutizzazione dell’oggetto che domina la modernità. Ma la relazionalità ha luogo anche nei confronti del tempo,e non solo dello spazio. La montagna ci fa intravederla ricchezza di un rapporto “spesso” e inclusivo nei confronti della storia, delle culture materiali, della memoria, evitando il riduzionismo di quell’eterno presente privo di passato e di futuro che sembra avvolgere ogni cosa della nostra contemporaneità. Ancora, ai futuri progettisti la montagna mostra la necessità della GEOMETRIA. Un tema che può sembrare contraddittorio e paradossale dopo l’inno alla relazionalità. Ma se si presta attenzione al paesaggio assolutamente artificiale costruito dall’uomo secolo dopo secolo nelle vallate alpine, non si può fare ameno di notare come la montagna, per poter essere abitata, debba essere ricondotta a figure e geometrie: le linee di canali e bial che rendono fertili i prati,le radure intagliate nel bosco al fine di essere insediate,i versanti trasformati in terrazzamenti di pietra per essere coltivati, fino alle file geometriche del fieno che viene fatto seccare sui campi. Un intreccio di agricoltura e architettura che parla di un prender sicura delle cose per meglio abitare il mondo.

Dietro a queste sei ontologie, infine, un ulteriore insegnamento.

Forse quello massimo. Abitare la montagna,costruire la montagna è un tema di RESPONSABILITÀ. Responsabilità in primo luogo individuale. Messo di fronte alle forze della natura, a uno spazio limite,l’uomo – e il progettista – deve imparare in primo luogo a essere responsabile per se stesso e per gli altri. Attraverso la responsabilità individuale si esercita e si educa allora a essere uomo libero. Solo uomini individualmente responsabili possono infatti dare vita a una comunità di esseri umani realmente libera.

“Ogni lavoro progettuale inizia con una ricerca sulla regione, sul sito di progetto, sulle culture e sulle questioni e problemi riguardanti l’intorno. Non ha senso intervenire senza aver rilevato le problematiche principali nell’intorno allargato. Nella ricerca si richiedono riflessioni chiare e personali riguardo ai temi “ Bellezze locali esistenti”(topografia, vegetazione, identità, specificità locali,qualità spaziali e sensoriali, caratteri speciali della natura come luce, vento , suoni, gusti ecc..)e “culture locali esistenti” (forme insediative, costruzioni,storia ed evoluzione, abitanti e modo di vivere, libertà, religione, vita quotidiana, cultura sociale, opportunità e speranze per il futuro,vita e morte ecc,...). Queste osservazioni sono da intendersi esclusivamente in senso positivo: bisogna supportare il buono e la qualità.”

Conradin Clavuot Architetto, Università del Liechtenstein

■■ Università e montagna “Il territorio montano è oggetto in questi ultimi anni di una nuova e inedita attenzione da parte dei paesi che costituiscono l’arco alpino, tra cui finalmente anche in Italia, che porta a mettere a fuoco visioni per il futuro di questi luoghi: nuovi abitanti e reinsediamenti negli spazi dell’abbandono, nuove forme di turismo sostenibile, attenzione alla valorizzazione del paesaggio, rivitalizzazione dell’agricoltura, rilancio delle tematiche energetiche. Alla crisi

11

delle città e dell’economia contemporanea possono corrispondere nuove e significative opportunità di rilancio per le montagne, che forse meriterebbero maggiori attenzioni soprattutto sul piano politico e amministrativo, come ha recentemente dimostrato con la sua debolezza la XIII Conferenza della Alpi dei ministri europei svoltasi a Torino lo scorso novembre. Tuttavia il fermento del territorio montano, almeno sul piano della sperimentazione di nuovi modelli dell’abitare e su quello delle iniziative culturali, si sta diffondendo e raggiunge anche l’interesse crescente degli studenti in architettura iscritti ai corsi di laurea del Dipartimento di Architettura e Design del Politecnico di Torino, che sempre più spesso si misurano, nei corsi e con le tesi di laurea, con i diversi aspetti del complesso e delicato tema del progetto dell’architettura alpina all’interno dei fenomeni di trasformazione delle terre alte. In parallelo con il crescente successo delle Alpi, dei suoi borghi e del suo paesaggio, come luogo privilegiato di un abitare più consapevole e sostenibile, di stili di vita alternativi a quelli metropolitani, di una ricerca di equilibrio tra utilizzo e rispetto del territorio, questi giovani architetti si sono impossessati di temi di progetto a lungo dimenticati dalle nostre scuole di architettura: il recupero dei borghi e dell’architettura tradizionale, il restauro di edifici contemporanei abbandonati, il progetto di bivacchi e rifugi alpini, il ripensamento di impianti funiviari e infrastrutture di servizio per un turismo sempre più diversificato ed esigente. Tra queste spiccano alcune tesi che si sono recentemente discusse nella aule del Castello del Valentino con il tutoraggio dei docenti Massimo Crotti e Roberto Dini: si tratta del progetto di Michel Chasseur per il recupero di un antico e imponente rascard a Saint Jacques, in Val d’Ayas, e di quello di Stefano Sogno Fortuna per il rifunzionalizzazione di un albergo in abbandono a Chamois, in Valtournenche.”

Massimo Crotti Politecnico di Torino 12

Una delle sfide più importanti per chi abita il territorio alpino è riuscire a mantenere vivo il patrimonio architettonico che caratterizza piccoli e grandi insediamenti con un forte rischio di abbandono per le mutate condizioni socio-economiche e le diverse esigenze di comfort richieste dal vivere contemporaneo. Partire dalla profonda conoscenza delle regole non scritte che hanno guidato un’attenta costruzione dell’architettura vernacolare e del paesaggio alpino e guardare con occhi nuovi questo patrimonio è essenziale per costruire una nuova consapevolezza per il futuro dell’architettura alpina. Pur nelle sue differenze regionali, essa si trova ad affrontare sfide comuni ed è chiamata a condividere idee e progetti innovativi, in grado di integrare gli aspetti legati alla conservazione e l’indispensabile sostenibilità energetica e ambientale.

Già nel primo IAM si parlava di: ͽͽ Modernizzare (anche formalmente) la montagna ͽͽ Difendere la montagna, così com’è (anche nelle forme) come lascito, nella sua sacralità ordinaria e risaputa Il rispetto rigoroso dell’antico necessita di un connubio tra: ͽͽ Architettura Arcaica: costruire con quello che si ha, come si sà, per una necessità di pura difesa ambientale ͽͽ Architettura Moderna: costruire con tecniche e materiali sempre nuovi, con informazioni sempre possibili, per un comfort sempre più sofisticato L’uso di fibre ottiche, solar-tubes, vetro–cellulare, guaine, pannelli fotovoltaici, pompe di calore, fibre di carbonio, colle le più sofisticate andrebbe applicato alla conservazione integrale delle costruzioni antiche, così da garantire il rispetto delle normative attuali (coibenza, rispondenza strutturale, allontanamento reflui e scarichi, allacciamento alle reti radio televisive e dell’informatica).

IAM coinvolge attivamente gli studenti del Politecnico, che andando nelle alte valli, possono vedere pareti interne costruite con rami o liste di castagno, pareti e tetti di paglia e di terra, solai di soli tronchi accostati e voltini di pietra su travi di legno, pavimenti di tronchi d’albero e di pietre di fiume spaccate, costruzioni intere di pertiche e di frasche (messe su con cantieri quasi inesistenti) che nulla hanno da invidiare per novità e modernità (nel senso di un’efficienza arguta) all’involucro elastico usato da Massimiliano Fuksas nella Zenith Music Hall di Strasburgo o all’involucro gonfio, tutto facciata continua in ferro e vetro, di Frank O. Gehry nella Novartis Campus di Basilea.

L’obiettivo è quindi quello di risolvere il conflitto tra edifici “necessari e sufficienti” ed edifici “pretenziosi, preziosi e un po’ inutili”, tra efficienza funzionale e pura retorica pubblicitaria, tra un’architettura schietta e parsimoniosa, e un’architettura sostenuta dalla filosofia dello spreco e dalla frenesia per il nuovo.

“Come lo sono state per la modernità, le alpi possono tornare ad essere un laboratorio in cui, a partire proprio dalle grandi contraddizioni del nostro tempo, possiamo cominciare a immaginare percorsi di vita e di edificazione più articolati e più “intelligenti”. In primis dando vita a modelli insediativi più complessi, in cui le identità locali possano realizzarsi secondo modelli di integrazione tra forme dell’insediamento e pratiche dell’abitare, e non più solo attraverso logiche a-topiche di crescita mascherate da stilemi pseudo-tradizionali, o ancora guardando all’architettura come parte di una filiera produttiva che tra i monti cresce e si sviluppa. Se le pratiche dell’abitare la montagna costituiscono un’alternativa all’obsolescenza dei modi e degli stili di vita urbani allora lo studio del territorio alpino permette di esplorare la contemporaneità molto di più di quanto non ci aspettiamo. Se gli stessi valori del passato sono stati di nuovo

ricaricati di significato, nell’architettura ma non solo, allora questi diventano un riferimento più che mai attuale se guardati non con la nostalgia della tradizione ma con la dirompenza dell’avanguardia.”

Roberto Dini I progetti condotti da IAM svolgono una funzione didattica bidirezionale, da un lato permettendo agli studenti di imparare affrontando temi progettuali reali e ordinari, dall’altro fornendo ai territori affrontati – spesso marginali – nuove prospettive di sviluppo o cambiamento.

Il tema della sostenibilità pare ormai superare la dimensione prettamente tecnologico-prestazionale per includere anche l’architettura ed il paesaggio nelle sue valenze formali e culturali. La montagna anche in questo caso sembra essere un interessante laboratorio per esplorare - con il progetto di architettura- problematiche quali l’ottimizzazione della morfologia del sito, l’ottimizzazione dell’apporto solare, la protezione dalla rigidità del clima, la necessità di migliorare l’isolamento degli edifici, il tutto in una condizione generale di scarsità di mezzi e di risorse, ormai non più soltanto una caratteristica geografica del mondo alpino ma sempre di più dato rilevante della contemporaneità.

Il recupero non solo di edifici, di intere borgate o di parti di esse, ma soprattutto recupero inteso come “riscrittura” alle diverse scale del palinsesto territoriale e architettonico, come reinterpretazione - attraverso gli strumenti progettuali di oggi – di quel grande ”archivio di segni” costituito dal paesaggio e dall’architettura alpina. Recupero inteso dunque come messa in valore della stratificazione storica del tessuto edilizio e paesaggistico, delle sue peculiarità architettoniche ed artistiche, delle configurazioni spaziali e morfologiche delle borgate alpine, dei materiali e delle tecniche costruttive della tradizione, rilette attraverso il progetto, in un confronto continuo tra la profondità storica e le esigenze dell’abitare contemporaneo.

13

PROGETTARE OGGI

La cultura architettonica entra in gioco sia rispetto al tema della tutela, della conservazione, della valorizzazione, sia rispetto a una possibile via di “implementazione”del territorio, capace di coniugare la necessaria innovazione contemporanea con i modi e i tempi della stratificazione che storicamente ha costruito questi paesaggi.

Non è un tema facile. Negli anni cinquanta e sessanta la cultura architettonica italiana parlava già della necessità di tutelare senza imbalsamare. Oggi siamo di fronte, anche nel senso comune, a una forte spinta verso un approccio conservativo,che però molte volte è solamente apparente. Perché apparente? Perché non si tratta, secondo questa posizione,di bloccare le trasformazioni. Esse possono avvenire, purché si “intonino”, stilisticamente, con i caratteri “tradizionali” del territorio. E così, attraverso il ricorso a repertori linguistici di una presunta tradizione, si consumano metamorfosi che in realtà dileguano la vera radice dei luoghi, le loro reali specificità. Altrove si vedono traiettorie alternative. Dove interventi oculati e intelligentemente contemporanei, riescono a conferire valore aggiunto al territorio storico. Fuori da ogni falsa coscienza. Progetti paesaggisticamente contrappuntistici, e al contempo di innovazione figurativa e tecnologica. Si pone un problema di qualità del progetto che deve essere il centro irrinunciabile di ogni discussione e puntuale intervento di modificazione.

14

■■ Altri Enti e Istituzioni per la cultura del progetto montano C.A.U.E.

www.fncaue.com Un istituto simile a IAM esiste in Francia sotto il nome di C.A.U.E. - Fédération Nationale des Conseils d’Architecture, d’Urbanisme et de l’Environnement “Nelle azioni dei C.A.U.E. alpini, dagli anni’80 ad oggi, emerge il passaggio dal mantenimento dell’habitat tradizionale montano con l’adozione di tecnologie appropriate, ad una prospettiva di“développement durable” e di attenzione alla qualità complessiva del paesaggio culturale, attraverso linee guida essenziali di pianificazione paesaggistica, come le“Charte architecturale & paysagère” della Savoie. Oltre la fase pionieristica, il ruolo di promozione della qualità e di verifica non vincolante continua ad essere strategico,In particolare per i piccoli comuni e per le terre di mezzo della media montagna, in cui il recupero e la manutenzione del territorio sono condizioni essenziali per la valorizzazione turistico-culturale.”

Rossella Maspoli

Ambiente italia

www.ambienteitalia.it Ambiente Italia è una fra le principali società di consulenza ambientale italiane, attiva da vent’anni in ambito nazionale ed europeo, protagonista del dibattito tecnico-scientifico sui temi della sostenibilità e nella implementazione di strumenti e di politiche di tutela e gestione delle risorse ambientali e territoriali.

Ambiente Italia nasce nel 1995 con l’obiettivo di realizzare – anche nel nostro Paese – un istituto di ricerca ambientale autorevole e indipendente, sul modello degli eco-istituti che in quegli anni andavano formandosi in numerosi Paesi europei. Raccogliendo l’esperienza di Cooperativa Ecologia, fondata all’inizio degli anni ’80 e attiva a Milano fin dal 1984, Ambiente Italia ha aggregato diverse strutture locali di consulenza (in Veneto, Friuli Venezia Giulia, Toscana, Lazio e Sicilia) per assumere una dimensione nazionale.

Mava

en.mava-foundation.org “Conservation is not the protection of nature against human development, but the preservation of life supporting systems and processes as a basis for a lasting development.”

Luc Hoffmann, MAVA Founder and President Emeritus Fondazione filantropica con sede in Svizzera focalizzata sulla conservazione della biodiversità. Fondata da Luc Hoffmann, MAVA è cresciuta fino a diventare uno dei principali donatori per la conservazione del globo.

L’approccio è sempre quello di lavorare attraverso partnership piuttosto che realizzare progetti propri. Hanno sostenuto più di 750 progetti, realizzati da oltre 300 organizzazioni diverse che includono ONG internazionali e locali, istituti di ricerca, università e, occasionalmente, enti governativi o privati.

Le aree operative sono situate principalmente inSvizzera, nel bacino del Mediterraneo e nell’Africa occidentale.

UNCEM

www.uncem.it È un’organizzazione nazionale presente in ogni regione italiana, che raduna e rappresenta i comuni montani e le comunità montane, oltre ad associare province, consorzi, camere di commercio e altre entità operanti in montagna. UNCEM esiste da più di cinquanta anni ed è rappresentativa di un bacino territoriale pari al 54% di quello italiano e nel quale vivono oltre dieci milioni di abitanti.

Intende favorire il collegamento tra imprese ed enti locali per valorizzare il patrimonio edilizio delle Terre Alte che, secondo le stime, comprenderebbe oltre 20 mila baite in 553 Comuni montani

15

piemontesi ristrutturabili con interventi più o meno radicali. Un vero patrimonio che, secondo importanti esempi di recupero già messi in atto, può favorevolmente collocarsi su un mercato nazionale e internazionale. Baite, case, ricoveri, vecchie fortificazioni, stalle, intere borgate, spesso di proprietà di privati, ma anche direttamente dei Comuni, che oggi possono rivivere grazie all’impegno di imprese e di gruppi di professionisti, con investimenti mirati, ma anche innovative operazioni di marketing territoriale.“In molti Comuni montani del Piemonte – spiega il presidente Lido Riba - stiamo assistendo a un “ritorno”da parte di persone che erano emigrate nei decenni del dopoguerra, che oggi lasciano le città o il fondovalle,per risalire in zone montane dove acquistano e ristrutturano case abbandonate. Molto spesso sono giovani che insediano nuove imprese, non soltanto agricole, artigianali o turistiche, ma anche collegate alle nuove tecnologie, grazie al divario digitale ridottosi negli ultimi anni e alle possibilità del telelavoro”.

Artesella

Arte Sella è un’occasione di sperimentazione e di crescita creativa in continuo dialogo ed ascolto con i mondi della musica, dello spettacolo, della fotografia e della cultura nelle sue molteplici sfaccettature.

Più di 300 artisti si sono avvicendati in questo percorso, consegnando alla Val di Sella ed alle cure dell’Associazione Arte Sella il loro lavoro.

“C’è bisogno di qualcosa di cui innamorarsi del territorio. Spesso ci si innamora di cose che non hanno uno scopo pratico o un senso logico, per questo c’è bisogno dell’arte, perché lascia un segno toccando la parte sensibile delle persone slegata dalla logica e dal raziocinio” 16

cipra

La Commissione Internazionale per la Protezione delle Alpi è un’organizzazione non governativa, autonoma e senza scopo di lucro che si impegna per la protezione e lo sviluppo sostenibile delle Alpi fin dal 1952. Con la sua sede internazionale in Liechtenstein, le rappresentanze in sette Stati alpini e un centinaio circa di organizzazioni e istituzioni aderenti, la CIPRA rappresenta oggi un’importante rete alpina. Grazie a questa larga base siamo all’avanguardia nella proposta di soluzioni ai problemi e alle sfide attuali verso un futuro sostenibile ed ecologico del territorio alpino.

La Convenzione delle Alpi, trattato internazionale vincolante firmato dagli Stati alpini nel 1991, risale a un’iniziativa della CIPRA ed è un leitmotiv per le nostre attività e una piattaforma per la cooperazione internazionale.

LEGAMBIENTE

www.legambiente.it Legambiente è un’associazione senza fini di lucro nata nel 1980, erede dei primi nuclei ecologisti e del movimento antinucleare che si sviluppò in Italia e in tutto il mondo occidentale nella seconda

metà degli anni ’70.

Tratto distintivo dell’associazione è stato fin dall’inizio l’ambientalismo scientifico, ovvero la scelta di fondare ogni progetto in difesa dell’ambiente su una solida base di dati scientifici, uno strumento con cui è possibile indicare percorsi alternativi concreti e realizzabili.

L’approccio scientifico, unito a un costante lavoro di informazione, sensibilizzazione e coinvolgimento dei cittadini, ha garantito il profondo radicamento di Legambiente nella società fino a farne l’organizzazione ambientalista con la diffusione più capillare sul territorio: oltre 115.000 tra soci e sostenitori, 1.000 gruppi locali, 30.000 classi che partecipano a programmi di educazione ambientale, più di 3.000 giovani che ogni anno partecipano ai nostri campi di volontariato, oltre 60 aree naturali gestite direttamente o in collaborazione con altre realtà locali.

ANCSA

L’associazione Nazionale Centri Storico-Artistici è stata costituita nel 1960-61 allo scopo di promuovere iniziative culturali e operative a sostegno dell’azione delle amministrazioni pubbliche per la salvaguardia e la riqualificazione delle strutture insediative esistenti. Sono soci dell’A.N.C.S.A. Regioni, Province e Comuni Italiani, strutture universitarie, enti pubblici e privati, studiosi e cultori.

L’Ancsa per la sua natura di ente strettamente connesso al terri-

torio opera anche a livello locale, principalmente attraverso le sue sezioni regionali, impegnate nel concretizzare le finalità dell’associazione

12tomany

Paluzza, 21 dicembre 2013. Nel cuore delle dolomiti friulane viene sottoscritto il primo contratto di Rete d’imprese della filiera foresta-legno in Alta Carnia. Il primo in Italia.

Un sogno individuale, perché vagheggiato e messo e punto da Samuele Giacometti, l’ingegnere d’origine marchigiana giunto per lavoro in Val Pesarina, dove oggi abita con la sua famiglia nella Casa di Legno Ecosostenibile di Sostasio di Prato Carnico, moderna e confortevole dimora realizzata con legname e da imprese locali secondo le più innovative soluzioni della bioedilizia. Ma anche un sogno collettivo, perché condiviso da quanti si ritrovano in un progetto che SaDiLegno, e cioè di bosco, di etica personale e comune, di contenimento dei cambiamenti climatici, di sviluppo locale e di persone. Presentato dal PEFC International in Brasile nell’ambito di RIO+20 come esempio di reale sostenibilità, il Metodo SaDiLegno® (www.sadilegno.it) è oggi alla base di 12-to-Many, l’innovativo progetto della Rete d’Imprese della filiera Foresta-Legno in alta Carnia cofinanziato dalla Regione Autonoma Friuli Venezia Giulia (Decreto n° SGFPL/ 1408) nell’ambito dell’articolo 16 L.R.26/2005 per l’innovazione nel settore della filiera forestalegno, e patrocinato dall’INEA, dalla Comunità Montana della Carnia e dal PEFC Italia, che vi vedono la via privilegiata per la rinascita del legno italiano, il veicolo irrinunciabile alla costruzione di un futuro realmente sostenibile per l’ambiente, l’economia e la società.

17

Ceipiemonte

■■ Alcune attività svolte Casa Capriata

Primo organismo regionale italiano dedicato all’internazionalizzazione del territorio, è il riferimento per le imprese locali che lavorano o intendono lavorare sui mercati esteri e per gli interlocutori stranieri interessati a conoscere il sistema economico del Piemonte.

Su incarico dei propri Soci, Ceipiemonte opera in diversi settori economici per favorire la crescita dell’innovazione, della competitività e dell’attrattività del Piemonte.

usagedelterritorio

“Usage del territorio” è un progetto congiunto, elaborato da architetti italiani e francesi.

Un progetto che racconta un unico immenso paesaggio ricordando che i confini nazionali, provinciali o comunali, non dovrebbero mai essere visti come limiti, ma come opportunità per crescere e migliorare il proprio territorio.

18

L’iniziativa, avviata nel 2006 dal Dipartimento di Progettazione architettonica e di Disegno industriale del Politecnico di Torino e dall’Ordine degli Architetti della Provincia di Torino, selezionata nel 2007 nell’ambito della prima Biennale della Montagna Alpi365Expo come uno dei 100 progetti di eccellenza per lo sviluppo sostenibile dell’Euroregione Alpi Mediterraneo e divenuta nel 2008 Official Event del XXIII Congresso Mondiale di Architettura UIA promuove la realizzazione di un prototipo sperimentale in legno progettato dall’architetto Carlo Mollino per la X Triennale di Milano (1954). Il progetto, rimasto opera incompiuta, costituisce la reinterpretazione delle architetture walser dell’alta valle di Gressoney analizzate da Carlo Mollino a partire dal 1929.

Roccasparvera

Il workshop estivo di Roccasparvera, in Valle Stura,è uno di quegli esempi virtuosi che ben rappresentale potenziali collaborazioni del mondo universitario con le comunità locali. In questo caso un gruppo di studenti dei corsi di laurea architettura del Politecnico di Torino si è fatto promotore di un cantiere didattico che è stato

finanziato con i fondi per la progettualità studentesca dell’ateneo e sostenuto dall’amministrazione comunale che ha messo a disposizione nell’area di intervento e i propri servizi tecnici;alle due istituzioni si è poi affiancato il contributo dei privati e della Comunità Montana Valle Sturaper la fornitura dei materiali da costruzione.

L’aspetto di originalità di questa tipologia di workshop è proprio quello che gli studenti hanno dapprima progettato l’intervento proposto e successivamente,durante tre settimane di cantiere,hanno realizzato un’opera particolare con la guida e l’aiuto di maestranze locali specializzate. Nel 2011 un’analoga iniziativa degli studenti di architettura aveva permesso di rifare il tetto dello storico forno del paese, ha infatti messo in opera la realizzazione di una copertura in paglia per una vasca in pietra del XV secolo, ormai inutilizzata, da adibire a fontana nella frazione di Tetti Beraudo.

Un cantiere particolare, quindi, che ha permesso agli studenti di “sporcarsi le mani” e di avvicinarsi alla realtà dei cantieri che un giorno saranno chiamati a progettare e a dirigere, ma anche di apprendere e sperimentare una tecnica antica,quella delle coperture in paglia che un tempo si incontrava nei territori rurali e nelle valli cuneesi,e che oggi può essere riproposta per recuperi tradizionali e nuovi interventi.

Ostana, alta valle Po

Laboratorio di architettura alpina a cura di Massimo Crotti, Antonio De Rossi, Marie-Pierre Forsans

Il progetto, in fase di realizzazione, per la riorganizzazione e riqualificazione dell’ingresso del paese, nuova porta di Ostana, con la costruzione di un ufficio del turismo con annessa ala pubblica e di una palestra di roccia outdoor. Un progetto di riqualificazione che messo a punto nelle linee guida dal Dipartimento ha visto la partecipazione degli architetti locali Stefano Beccio e Luisella Dutto.

Nei pressi è in corso di realizzazione anche un Centro benessere e sportivo sempre su progetto del Dipartimento, che servirà a sviluppare le potenzialità del luogo in un’ottica di turismo soft e

dolce. Tutti progetti sono documentati puntualmente nei numeri di Archalp. Qualità architettonica, identità e nuova abitabilità, sostenibilità ambientale, offerta di un turismo pertinente rispetto ai luoghi, sono gli atouts messi a punto da Ostana per i prossimi anni. Una filosofia che recentemente ha permesso a Ostana di entrare nella rete dei “Borghi più belli d’Italia”. Ostana rappresenta un vero e proprio laboratorio di architettura alpina che può essere preso a esempio per le politiche sulla montagna per il futuro.

Render 3D di uno degli edifici progettati per il comune di Ostana

Il progetto strategico della rete ecologica del Parco Fluviale Gesso e Stura

A cura di: prof. Antonio De Rossi (coordinatore), prof. Francesca Governa, arch. Marco Barbieri, arch. Andrea Delpiano, arch. Mattia Giusiano, arch.

Alessia Toldo, arch. Antonio

Cittadino (LARTU).

Nell’estate del 2011 l’Ente Parco Fluviale Gesso Stura (PFGS) commissiona al Politecnico di Torino il “Progetto strategico per la realizzazione della rete ecologica fluviale e perifluviale nell’ambito del parco fluviale gesso e stura e territori limitrofi”.

19

Il Progetto di ricerca si inserisce all’interno del P.I.T. europeo “Spazio Transfrontaliero Marittime Mercantour” che ruota per lo più attorno al Parco del Mercantour per la Francia e a quello delle Alpi Marittime per l’Italia, lasciando un ruolo marginale al giovane PFGS.

Collezione EstBois: segnali di orientamento per territori montani Design C. Germak, M. Bozzola, Politecnico di Torino – DAD

■■ Collaborazioni Dislivelli

www.dislivelli.eu L’Associazione Dislivelli è nata nella primavera 2009 a Torino, dall’incontro di ricercatori universitari e giornalisti specializzati nel campo delle Alpi e della montagna, allo scopo di favorire l’incontro e la collaborazione di competenze multidisciplinari diverse nell’attività di studio, documentazione e ricerca, ma anche di formazione e informazione sulle terre alte.

Dislivelli non si limita allo studio teorico del territorio alpino e dei suoi abitanti, i vecchi e nuovi “montanari”, ma intende impegnarsi direttamente per favorire una visione innovativa della montagna e delle sue risorse, con la costruzione di reti tra ricercatori, amministratori e operatori, la creazione di servizi socio-economici integrati, la proposta di interventi sociali, tecnologici e culturali capaci di futuro.

Schizzi e render progettuali della segnaletica

Università degli Studi di Torino

www.unito.it 20

Politecnico di Torino e l’Università degli studi di Torino con l’in-

tento di costruire una mappa sintetica delle esperienze progettuali realizzate nel corso degli ultimi anni sulle Alpi, hanno avviato un progetto di ri­cerca sul tema delle architetture d’alta quota con par­ticolare riferimento alle esperienze di progettazione e gestione ambientale.

Fondazione Courmayeur

L’Institut Agricole Régional svolge, in Valle d’Aosta, attività di istruzione tecnico-professionale e di formazione professionale, nonché di ricerca e sperimentazione in campo agricolo, anche in riferimento alle esigenze di tutela ambientale e di difesa del territorio proprie dell’ambiente di montagna.

L’attività di ricerca della fondazione si incentra sulla sperimentazione di colture, metodi e tecniche utili allo sviluppo dell’agricoltura regionale ed alla gestione del territorio, secondo le esigenze dell’utenza agricola, dell’assessorato competente in materia di agricoltura e dei programmi autonomi di indagine scientifica della fondazione, in armonia con i principi della politica regionale di settore.

La sperimentazione si effettua anche mediante attività di produzione, conservazione, trasformazione e commercializzazione di prodotti agricoli.

www.fondazionecourmayeur.it La Fondazione Courmayeur Mont Blanc ha lo scopo principale di promuovere, sviluppare, coordinare, principalmente a Courmayeur, le ricerche, gli studi, le sperimentazioni, gli incontri per approfondire e diffondere la conoscenza dei temi giuridici ed economici nella società contemporanea con particolare riguardo ad un’ottica internazionale.

Institut Agricole Régional

Sustainable Built Environment (SBE)

sbe16torino.org Conferenza tenutasi al Politecnico di Torino presso l’edificio del Lingotto, riguardo la transizione verso nuovi tipi di città, a basso tenore di carbonio, nonché sostenibili dal punto di vista ambientale, sociale e economico. Nuovi paradigmi dovranno essere inseriti nell’agenda dei politici per rompere la dipendenza dal carbonio dei nostri sistemi urbani, che ha portato ad avere livelli elevati di gas

21

serra. Tra i partecipanti ci furono anche Ir Cary CHAN Wing-hong , direttore esecutivo dell’ Hong Kong Green Building Council e Serge Salat, Presidente dell’Urban Morphology and Complex Systems Institute.

politiche regionali ͽͽ Partecipa alla crescita del settore dell’edilizia sostenibile e riduce la frammentazione del mercato

C.E.S.B.A.

ͽͽ È un processo olistico per stabilire nuovi standard in materia edilizia e urbanistica in Europa ͽͽ Crea opportunità economiche e sociali e contribuisce allo sviluppo regionale ͽͽ Promuove la contestualizzazione locale e regionale degli strumenti di valutazione ͽͽ Fornisce strumenti e servizi adatti a ogni tipo di utente ͽͽ Promuove strumenti di valutazione semplici da utilizzare, accessibili e economici

CESBA è una strategia politica europea per lo sviluppo dell’edilizia sostenibile.

L’iniziativa CESBA mira a sensibilizzare la popolazione e accrescere la domanda di edifici con migliori performance ambientali, migliorando le conoscenze e le informazioni circa l’utilizzo delle risorse e l’impatto ambientale causato dalla costruzione di edifici.

Pertanto, l’iniziativa CESBA è l’approccio ideale per supportare i processi decisionali nel settore delle costruzioni, dall’estrazione delle materie prime all’utente finale.

22

ͽͽ Promuove un processo di certificazione di massa dal costo accessibile che possa essere standardizzato. ͽͽ Incoraggia un approccio comune nelle strategie di edilizia sostenibile. ͽͽ Promuove l’uso di strumenti di valutazione contestualizzati che tengano in considerazione le specificità locali ͽͽ Promuove l’adozione di un set di indicatori europei affidabili in grado di fornire una valutazione delle prestazioni ambientali degli edifici durante tutto il loro ciclo di vita ͽͽ Rafforza la consapevolezza delle tematiche ambientali nelle

NIMBUS

www.nimbus.it Sito ufficiale della Società Meteorologica Italiana (SMI) la maggiore associazione nazionale per lo studio e la divulgazione di meteorologia, climatologia e glaciologia.

CONSTRUCTIVE ALPS

Parco Nazionale del Gran Paradiso

constructivealps.net Premio internazionale di architettura sostenibile che si propone l’obiettivo di rendere gradualmente le Alpi una regione modello in materia di protezione del clima. Attraverso foto e testi descrittivi dei progetti di costruzione o ristrutturazione, questa mostra, promuove i migliori lavori e progetti presentati al concorso. L’iniziativa gode del patrocinio, tra gli altri, della Convenzione delle Alpi.

CANTIERI D’ALTA QUOTA

pngp.it Il Parco Nazionale Gran Paradiso è un’area protetta istituita dallo Stato al fine di conservare per le generazioni presenti e future gli ecosistemi di rilievo internazionale e nazionale delle valli attorno al massiccio del Gran Paradiso.

Le finalità dell’Ente sono quindi la gestione e la tutela dell’area protetta, il mantenimento della biodiversità di questo territorio e del suo paesaggio, la ricerca scientifica, l’educazione ambientale, lo sviluppo e la promozione di un turismo sostenibile.

www.cantieridaltaquota.eu È un’associazione culturale italiana costituita nel maggio 2012 con sede a Biella, che ha per scopo la ricerca, divulgazione e condivisione delle informazioni storiche, edilizie, progettuali, geografiche, sociali ed economiche sulla realtà dei punti d’appoggio in alta montagna, luoghi ambientalmente “estremi” per eccellenza. L’associazione intende porsi come osservatorio, piattaforma d’interscambio per tutti coloro che operano in montagna, così come per coloro che la frequentano. Come I.A.M. anche Cantieri d’alta quota pubblicano periodicamente una rivista.

Negli ultimi anni, nel territorio del Parco, sono stati realizzati alcuni interventi, che hanno suscitato qualche perplessità da parte di turisti e residenti. Ne è scaturito un dibattito che, interrogandosi sulle corrette modalità di intervento in area alpina, verte sulla contrapposizione “tradizione”e modernità”.Nel 2004 è stata stipulata una convenzione con il Politecnico di Torino con l’obiettivo di instaurare rapporti di mutua collaborazione e favorire eventuali sinergie fra le attività di didattica e ricerca e quelle di tutela dell’area protetta.

23

Iridra

IRIDRA S.r.l. è una società di ingegneria con esperienza ventennale composta da un gruppo multidisciplinare di professionisti, in grado di realizzare tutte le attività legate all’analisi, alla pianificazione, alla progettazione e all’assistenza nella realizzazione di interventi per la gestione ecosostenibile delle risorse idriche. In particolare, IRIDRA S.r.l. è oramai da anni riconosciuta come azienda leader nel settore dei trattamenti naturali e della fitodepurazione

aperto

www.vallecamonicacultura.it/aperto “aperto_art on the border” é una manifestazione di arte pubblica che invita gli artisti a operare in relazione con le comunità, con le forme dell’abitare e il paesaggio alpino, istituendo luoghi d’incontro tra le radici storiche e la cultura contemporanea. È un progetto pluriennale che attiva esperienze artistiche radicate nell’ambiente e fondate sul colloquio con i luoghi, con l’uomo e il suo statuto poetico. Gli artisti, invitati e selezionati tramite bando, sono ospitati in residenza, agiscono come attori culturali motivati realizzando opere context-specific disseminate nel territorio e interventi di carattere relazionale ed esperienziale, evocativi e poetici.

24

Humus Park

Dopo aver sperimentando varie forme d’arte, Vincenzo Sponga e Gabriele Meneguzzi si sono formati nell’elaborazione tecnica di materiali naturali, tanto che nel 1986 aprono un negozio-laboratorio, atelier delle loro opere. Nel 1999, si avvicinano alla Land Art di cui oggi sono tra i massimi esperti in Italia. Per l’evento ricercano gli artisti, coordinano la loro attività: sono un punto di riferimento forte.

Humus Park rappresenta uno dei più importanti eventi italiani di Land Art (da land = terra, territorio, è una forma artistica che utilizza materiali naturali presi da un territorio le cui opere rimangono “in mostra” nel territorio stesso). Alcuni numeri: 13 giorni, 3 location, oltre 80 artisti da 13 paesi del mondo, 8 scuole d’arte e accademie coinvolte.

greentrendesign

GreenTrenDesign Factory offre servizi di consulenza nell’ambito dell’eco design nell’accezione più estesa del termine quali: supporto alla progettazione architettonica ed urbanistica ecosostenibile, design e marketing di prodotti ecosostenibili, editoria nel campo della green economy.

■■ ARCHALP Archalp è il foglio semestrale dell’Istituto di Architettura Montana del Dipartimento di Progettazione Architettonica e di Disegno Industriale del Politecnico di Torino.

Dopo dodici anni passati nella edizione degli “Atlanti dell’edilizia montana nelle alte Valli del Cuneese”, l’Istituto di Architettura Montana ha rinnovato tale pubblicazione, rinominandola Archalp.

L’intento è quello di mostrare un panorama di architetti, al di fuori della ristretta cerchia delle cosiddette “Archistar”, che abbiano saputo affrontare il tema dell’innovazione – tipologica, tecnologica, compositiva – a piccoli passi, muovendosi negli stretti meandri (legati alla burocrazia e alla committenza) delle pratiche ordinarie di costruzione del territorio.

La rivista è una sorta di vetrina per presentare e illustrare progetti architettonici innovativi ma al contempo sobri e integrati con l’habitat alpino. Una carrellata di edifici contemporanei che – come ha saputo fare l’architettura tradizionale alpina – siano in grado di far proprio il carattere dei luoghi interpretando in modo intelligente i temi dell’oggi: risparmio energetico, qualità dello spazio interno ed esterno dell’abitazione, recupero del patrimonio in abbandono, nuovi spazi per nuove funzioni in relazione alle possibilità di ri-abitare la montagna.

In un contesto profondamente segnato dalla storia, dalla stratificazione delle opere naturali e dell’uomo, “piccoli centri alpini” rappresentano un’ottima cartina tornasole per ragionare sul presente e il futuro del territorio montano.

Copertina di Archalp n.3 /2012

Presentare con continuità progetti architettonici virtuosi e di qualità realizzati nei contesti montani da giovani professionisti (al di sotto dei cinquant’anni), in particolare nel settore occidentale delle alpi italiane (Piemonte, Valle d’Aosta,Lombardia). L’intento è quello di

25

mostrare un panorama di architetti, al di fuori della ristretta cerchia delle cosiddette “Archistar”, che abbiano saputo affrontare il tema dell’innovazione – tipologica, tecnologica,compositiva – a piccoli passi, muovendosi negli stretti meandri (legati alla burocrazia e alla committenza)delle pratiche ordinarie di costruzione del territorio.

La rubrica vuole diventare una sorta di vetrina per presentare e illustrare progetti architettonici innovativi ma al contempo sobri e integrati con l’habitat alpino.

Le diverse sessioni tematiche affrontano da differenti punti di vista interni alle discipline accademiche, ma anche relativi a specifici progetti, questioni legate ai sistemi territoriali alpini, ai modelli di sviluppo nelle Alpi, alla tipicità e alle produzioni agroalimentari, ai vecchi e nuovi abitanti della montagna, all’immaginario alpino e alle sue rappresentazioni, alla gestione del suolo, alla biodiversità e ai cambiamenti climatici, alla comunicazione e alle nuove tecnologie.

Non mancano interviste a esperti del settore come quella a Werner Tscholl presente nel numero 6 di Archalp, a cura di Roberto Dini.

Il riaffiorare di alcuni temi, ricorrenti in diverse relazioni,ha evidenziato nodi problematici di attualità per i quali non soltanto è possibile, ma anche auspicabile, una lettura multidisciplinare: l’urbanità in ambiente alpino e la costruzione dei territori attraverso reti lunghe e corte; la ridefinizione di marginalità delle Alpi; la questione delle identità alpine e delle molteplici rappresentazioni della montagna che devono essere ricomposte per una governance responsabile e consapevole; i modelli di sviluppo innovativi che coinvolgano vecchi e nuovi settori produttivi; le esperienze di cittadinanza attiva e le nuove forme di gestione diretta del territorio da parte degli abitanti; la gestione delle risorse e la sperimentazione di nuove tecnologie per la sostenibilità ambientale.

26

Distribuzione La rivista attualmente conta 13 pubblicazioni e viene distribuita sul sito internet di IAM sfruttando la piattaforma ISSUU, per la consultazione online dei PDF.

Copertine di Archalp dalla n.1 alla n.11

■■ Cliente L’Istituto di Architettura Montana (IAM) è un centro di ricerca del Dipartimento di Architettura e Design (DAD) del Politecnico di Torino che ha l’obiettivo di valorizzare e promuovere le ricerche in tema di architettura, design e paesaggio alpino, più precisamente: ͽͽ Promozione e realizzazione di ricerche ͽͽ Formazione di reti di ricerca ͽͽ Supporto delle comunità locali ͽͽ Valorizzazione e divulgazione delle culture architettoniche e tecniche ͽͽ Sviluppo di attività didattiche

Cliente quindi non è un’azienda che ha come fine ultimo il guadagno, ma prima di tutto conoscenza, innovazione e divulgazione scientifica

■■ Prodotto Trattandosi di un centro di ricerca si occupano principalmente di ricerca, divulgazione e insegnamento.

Il prodotto del cliente quindi sono idee, che necessitano di essere: ͽͽ sintetizzate ͽͽ distribuite rapidamente ͽͽ distribuite ad ampio raggio in modo capillare ͽͽ comprensibili per esperti del settore ma anche studenti ͽͽ visibili e avere una certa attrattiva

■■ Distribuzione Al momento del primo incontro con il cliente, esistevano già: ͽͽ Un sito web ͽͽ Una rivista consultabile online ͽͽ Libri ͽͽ Varie pubblicazioni ͽͽ Account Facebook

27

28

Il sito web esistente Il sito ufficiale I.A.M. presentava diverse problematiche. Innanzi tutto era stato sviluppato in Flash Player, tecnologia che in quegli anni cominciava ad essere abbandonata per dare spazio a HTML5 e CSS3: l’accesso al portale sarebbe diventato impossibile nel giro di poco tempo. Alcune sezioni erano già state ricostruite in HTML tramite Wordpress, quindi durante la navigazione si consultavano sia pagine in Flash che in HTML. Il sito inoltre non era responsive, quindi manteneva sempre la stes-

sa struttura e le stesse proporzioni, indipendentemente dal formato dello schermo.

I colori erano spenti e il layout non rispecchiava piĂš le nuove tendenze presenti sul Web. Oltre ai problemi tecnici, il sito presentava delle pagine vuote, prive di contenuti e la mappa del sito rendeva non facilitava la consultazione dei contenuti.

Alcune schermate della versione 1.0 del sito. A partire dalla prima foto vediamo le pagine Laboratori, Convegni e Workshop in fase di caricamento.

29

■■ A spettative L’obiettivo del gruppo di ricerca I.A.M. è: 1. Modernizzare il sito web mantenendo l’aspetto originario, e proporlo in un’interfaccia amministrativa user friendly, che non richieda conoscenze avanzate di webdesign e programmazione.

2. Favorire la diffusione della rivista Archalp tramite il sito internet e i canali social 3. Migliorare l’impostazione grafica della rivista, in modo da renderla adatta anche alla distribuzione su supporto cartaceo

■■ brief L’obiettivo primario del progetto era quello di ricostruire il sito in chiave moderna, realizzandolo con tecnologie all’avanguardia, dandogli un aspetto più appetibile e sopperendo ai contenuti mancanti.

Schizzi progettuali su carta

Le fasi di progettazione erano state divise in: ͽͽ Analisi e studio del cliente (I.A.M.) ͽͽ Analisi e studio della concorrenza e di progetti simili con30

dotti da altri centri di ricerca ͽͽ Analisi delle criticità legate al sito web I.A.M. ͽͽ Studio delle tecnologie più adatte alla realizzazione del nuovo sito ͽͽ Realizzazione di un primo restyling tramite tecnologie più moderne mantenendo un aspetto estetico fedele al sito originale. ͽͽ Realizzazione di un secondo restyling con un aspetto differente dal sito originale e più vicino ai nuovi standard.

Programma di lavoro 1 - Reperimento del materiale Predisposizione e invio call ai componenti IAM per recuperare: ͽͽ biografie aggiornate (+ immagine) ͽͽ ricerche aggiornate (+ immagini, da 1 a 5 max) ͽͽ pubblicazioni aggiornate (abstract + copertina) ͽͽ attività didattiche aggiornate (corsi, workshop) (+ immagini, da 1 a 5 max) 2 - Restyling grafico del sito a fronte di analisi critica del contesto

e stato dell’arte (valori, obiettivi, altri siti, comunicazione digitale, etc..)

3 - Gestione dei contenuti ͽͽ Aggiornamento biografie componenti ͽͽ Aggiornamento ricerche ͽͽ Aggiornamento pubblicazioni ͽͽ Aggiornamento percorsi ͽͽ Aggiornamento News. facendo riferimento a quelle già pubblicate su Facebook

31

■■ Business Model Partner chiave

Propositi

Offerta

Relazioni con i clienti

Università

Ricerca

Sito Web

Associazioni

Formazione

Rivista

Newsletter

Comuni alpini

Supporto delle comunità locali

Libri e pubblicazioni

Social

Valorizzazione e divulgazione delle culture architettoniche e tecniche

Attività didattiche

Studenti

Attività didattiche e Workshop

Risorse chiave Docenti universitari Studenti Rivista ufficiale Internet

Divulgazione notizie Workshop

Distribuzione Sito Web Social ISSUU Rivista semestrale Conferenze

Social network

Costi

32

Ricavi

Target Architetti Designer Ingegneri per l’ambiente Comunità montane Parchi naturali Studenti

■■Struttura del sito Il sito originariamente fu progettato in Flash, successivamente era stata realizzata una home page utilizzando Wordpress, i cui link però continuavano a rimandare al sito originario.

Titolo: IAM - Istituto di Architettura Montana URL: areeweb.polito.it/ricerca/IAM www.polito.it/iam Tecnologie utilizzate: Wordpress

Flash Larghezza: 960px Altezza: non definita Dimensione totale su server: 589019 bytes 960px Larghezza predefinita della homepage in HTML

33

■■ Gabbia grafica La struttura è organizzata principalmente su due colonne e segue gli standard presenti sul web.

In ordine a partire dall’alto troviamo: HEADER - Contiene il logo IAM e quello del Politecnico MENU BAR - Contiene i pulsanti di navigazione necessari alla consultazione del sito. Il sito presenta 9 sezioni principali divise in ulteriori sotto-pagine: Cos’è IAM - ArchAlp - Percorsi - Scritti - Ricerche - Didattica - Eventi- Biografie - Link BOX PRIMO PIANO - Elemento essenziale per ogni sito web, dove inserire i contenuti più recenti e importanti che necessitano di essere messi in risalto. In questo caso viene utilizzato per promuovere l’ultimo numero di Archalp disponibile.

BOX NEWS - Piccolo riquadro contenente uno slider per visualizzare le news più recenti. Perchè un sito desti interesse deve pubblicare regolarmente articoli aggiornati e interessanti. La funzione del BOX NEWS è proprio quella di mettere in risalto questi articoli, presentandoli in un determinato ordine, generalmente cronologico. Dato che la struttura del sito non consente la visualizzazione di più news contemporaneamente sulla homepage, il riquadro è stato dotato di pulsanti di navigazione, utili a scorrere le news. Da un punto di vista estetico, caroselli come quello usato nelle news danno movimento a una pagina, attirando maggiormente l’attenzione del visitatore.

GALLERY - Simile al box news, mostra foto generiche di architetture montane, contestualizzando il sito. Anche questa è dotata di pulsanti di navigazione per lo scorrimento dei contenuti.

FOOTER - Molto sottile e sobrio ma sufficiente a contenere i dati relativi alla proprietà del sito.

34

Logo cliente

Logo Poli.

HEADER MENU BAR

BOX NEWS BOX PRIMO PIANO

GALLERY

FOOTER

35

■■ Mappa del sito

Archalp

Cos’è IAM News Gallery

Cos’è IAM News Gallery

Il moderno

Archalp 1 Archalp 2 Archalp 3 ...

Scheda 1 Scheda 2 Scheda 3 ...

36

Scritti

Percorsi

Cos’è IAM

Turismo di massa

Il contemporaneo

Libri

Ricerche Universitarie

Articoli Scheda 1 Scheda 2 Scheda 3 ...

Scheda 1 Scheda 2 Scheda 3 ...

Collane

Enti locali e U.E.

Progettuali

Didattica

Eventi

Biografie

Link

Workshop

Convegni

Laboratori e Corsi

Mostre

Scheda 1 Scheda 2 Scheda 3 ...

Enti di ricerca e università

Tesi Bibliografia

Suggerimenti Culturali

■■ Flash vs HTML

HTML

Flash

Il sito ha due facce, una in HTML e una in Flash che, sebbene siano simili, presentano delle incongruenze I problemi causati dall’implementazione di Flash sono molteplici, ma quelli più evidenti sono tre: ͽͽ Flash non può essere visualizzato su tutti i dispositivi per l’incompatibilità di Flash con determinati browser. ͽͽ Il sito non è responsive. ͽͽ Le performance rispetto a un sito in HTML sono ridotte

37

Le pagine realizzate con Flash, anche quando hanno pochi contenuti, come del semplice testo senza immagini, obbliga comunque l’utente ad attendere il caricamento prima di poter visualizzare il tutto.

Indicatore della percentuale di caricamento della pagina

Utilizzando sia Wordpress che Flash il sito era costretto a utilizzare due menù di navigazione differenti:

Wordpress - Barra di navigazione superiore

Flash - Barra di navigazione superiore

Come è possibile vedere dalle immagini, i menù non solo hanno un aspetto grafico differente, ma addirittura indicano voci diverse.

38

Tendine del menù di navigazione in Flash e HTML

■■ Analisi “concorrenza” Individuare centri di ricerca che operassero nel medesimo settore di I.A.M. non è stato facile. L’analisi dei siti web è stata ampliata a istituti e centri di ricerca specializzati in Architettura.

Georgia Tech College of Architecture www.coa.gatech.edu

Il sito del GATECH è molto simile a quello I.A.M. come concezione. In homepage sono presenti il menù di navigazione principale in alto e uno secondario più specifico per le facoltà di studio. Curiosamente anche qui sono presenti due box, uno per le news e uno per accedere alla gallery similmente al modulo dei “Percorsi” IAM. Il sito è interamente realizzato in HTML, è responsive e sfrutta egregiamente i contrasti tra i colori per mettere in risalto i diversi link e sezioni. I social sono stati posizionati in alto a destra in corrispondenza del menù principale, della barra di ricerca e del link per iscriversi alla newsletter.

(FCL) Future Cities Laboratory futurecities.ethz.ch

FCL sfrutta una combinazione di colori simile a GATECH, tuttavia la homepage è molto più ricca di elementi. Sostanzialmente c’è un solo menù principale, dotato però di sotto menù a tendina ricchi di voci. In primo piano, sotto forma di galleria fotografica, vengono presentati i progetti di ricerca del laboratorio, mentre notizie in primo piano ed eventi vengono promossi più in basso tramite due moduli. A prima vista la homepage risulta confusa in quanto mostra al visitatore una grande quantità di informazioni contemporaneamente.

39

MIT Architecture architecture.mit.edu

Menù a comparsa

40

Il sito della facoltà di architettura del MIT punta molto sull’essenzialità. Il menù di navigazione è accessibile solamente tramite un pulsante apposito in alto a sinistra. In primo piano, l’intera pagina viene utilizzata per mostrare news e articoli relativi all’attività del dipartimento. Notevole è la compattezza del sito che permette di consultarlo senza dove scorrere verso il basso la pagina web.

Il menù di navigazione è molto articolato e schematico. Per facilitarne la consultazione le diverse sezioni assumono colori differenti quando si passa sopra con il cursore. In alto a destra ci sono i pulsanti per la ricerca, la stampa e l’accesso all’area privata.

I pulsanti per i crediti e i social sono posizionati in basso a destra senza destare troppo nell’occhio La scelta cromatica è sobria puntando principalmente sui contrasti tra diverse gradiazioni di grigio.

Architectural Association School of Architecture aaschool.ac.uk

AASCHOOL ha un’impostazione simile a FCL, tuttavia cerca di mantenere una sobrietà, simile a quella già vista nel sito del MIT. Gli unici colori appariscenti sono quelli delle foto, mentre testi ed elementi del sito adottano unicamente il nero e l’azzurro. Il menù di navigazione è visibile in alto e presenta sia le voci principali che quelle secondarie, senza utilizzare finestre a comparsa.

I contenuti presentati sono tutti accompagnati da testo e immagini e mostrano l’attività dell’associazione in tutti i suoi ambiti. Al contrario del sito del MIT, qui la homepage è molto lunga e occorre scorrerla per visionarla tutta. Anche in questo caso la searchbar è in alto a destra e il footer mantiene un aspetto sobrio.

41

ETH Zurich

www.ethz.ch/en.html

42

ETHZ nella sua schematicità condensa gli aspetti osservati nei siti precedenti. Gli articoli rilevanti occupano il 70% della pagina grazie a un carosello orizzontale simile a quello del MIT. News ed Eventi vengono poi offerti a fondo pagina sotto forma di elenco, senza l’utilizzo di immagini.

Il menù di navigazione dispone di tendine a comparsa per accedere a specifiche sezioni interne del sito.

In alto a destra sono posizionati i pulsanti per la selezione delle lingue, per l’accesso all’area privata, la search bar e un menù secondario specifico per le facoltà.

I social sono nel footer in basso a destra.

Nel complesso il sito utilizza tre colori, verde, grigio e blu senza dimenticare il bianco che viene sfruttato per dare il giusto respiro ai contenuti visualizzati.

■■ Conclusioni I siti mostrati sono solo una selezione di quelli presi in esame durante le fasi di progettazione.

Come è possibile notare, ci sono delle costanti che hanno permesso di determinare il layout dei restyling del sito I.A.M. ͽͽ ͽͽ

LOGO - Il logo è sempre posizionato in alto a sinistra ed è monocolore NAVIGAZIONE - Il menù di navigazione è sempre posizionato vicino al logo, e si distribuisce orizzontalmente. Se la mappa del

ͽͽ

RICERCA - In alto a destra si trovano la barra di ricerca, pulsanti per la selezione delle lingue e l’accesso all’area privata, se presen-

ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ

sito è ricca di contenuti, vengono utilizzate spesso tendine a comparsa per mostrare le sottovoci del menù.

te.

NOTIZIE - Gli articoli in evidenza vengono sempre presentati accompagnati da un’immagine. In molti casi l’immagine degli arti-

coli in rilievo assume un peso più importante dei testi occupando una porzione rilevante della homepage.

CAROSELLI - Vengono sempre utilizzati caroselli o gallerie di immagini per far risaltare le notizie principali e dare più colore alla homepage.

SOCIAL - I pulsanti social non sono molto vistosi e generalmente sono posizionati nel footer in basso a destra. In alternativa possono trovarsi anche in alto a destra nell’header del sito, ma nei siti presi in esame era una soluzione poco frequente.

COLORI - I colori utilizzati sono pochi, difficilmente superano le quattro tonalità.

GERARCHIA - L’uso attento del bianco e degli spazi è fondamentale per gerarchizzare i contenuti offerti e dare il giusto respiro alla grafica, senza disorientare il visitatore.

FOOTER - Il footer ha un peso minimo nella homepage e generalmente contiene solo le informazioni tecniche relativi alla proprietà. e ai contatti.

PROPORZIONI - Se i contenuti da mettere in risalto non sono molti, è preferibile compattare la homepage, evitando di doverla scorrere per consultarla nella sua interezza.

43

RESTYLInG FASE 1: EVOLUZIONE DEL SITO Nelle pagine successive analizzeremo l’evoluzione delle pagine più significative del portale IAM, a partire dal loro design originale, fino alla pubblicazione del rispettivo restyling.

Il sito disponendo già di una homepage abbozzata in Wordpress, è stato ricostruito sfruttando il medesimo CMS; dato che il cliente dimostrava di avere già un po’ di dimestichezza con questo content manager, non aveva senso proporgli una soluzione completamente differente.

Purtroppo per lavorare al progetto si sono presentati due ostacoli non indifferenti: 1. a conferma della Legge di Normann1, i tempi erano sempre molto ristretti poiché il cliente aveva bisogno di promuovere l’uscita del nuovo numero della rivista Archalp al più presto 2. non era possibile accedere al server tramite FTP. Ogni file da caricare sul server doveva essere inviato a un tecnico che disponeva dell’accesso al server.

Rispettare i tempi non è stata cosa facile: trattandosi di un progetto di ricerca universitario, la ricaduta economica in seguito al ritardo per fortuna era minima, il sito infatti non deve promuovere un progetto a scopo di lucro.

Per accorciare i tempi di sviluppo si sono saltati alcuni passaggi di analisi progettuale, così da procedere direttamente allo sviluppo di mockup e prototipi.

Sebbene un procedimento di questo tipo impedisca a un progetto di avere delle solide fondamenta, la disponibilità e la collaborazione del team IAM ha permesso di definire un design coerente con gli argomenti trattati.

44

1

vedi pag. 118

Non avere l’accesso diretto al server è indubbiamente un grande ostacolo per un webdesigner. In certi casi è capitato di commettere errori nella modifica del codice PHP del CMS, impedendo al sito di essere caricato correttamente per ore: dato che il sito era compromesso, non era possibile effettuare le correzioni tramite il pannello di amministrazione del CMS, quindi occorreva contattare il tecnico dotato dell’accesso FTP, in modo che venisse ripristinato il file modificato.

Tramite il content manager inoltre non è possibile accedere a tutti i file contenuti sul server e non è sempre possibile creare directory.

Per bypassare questo problema ho utilizzato degli script PHP in grado di effettuare modifiche sul server, semplicemente tramite l’invio di query da browser.

Per maggiori dettagli vedere l’introduzione al codice PHP. L’analisi del sito che segue presenta più restyle per ogni pagina, così da mostrare come un progetto può evolversi a seconda dei feedback ricevuti dal cliente.

La richiesta iniziale era di rispettare il più possibile il design originario del sito; si trattava quindi di fare una riproduzione del sito in Flash, utilizzando Wordpress.

La struttura o wireframe del sito è rimasto molto fedele, la scelta dei colori invece ha subito alcune variazioni: una combinazione cromatica più chiara e luminosa ha prevalso, andando a sostituire il verde scuro, in modo da dare maggiore respiro e gerarchizzare meglio i contenuti visualizzati.

■■ Problematiche home 1

1

2

Payoff - Squilibrio nel rapporto tra logo e payoff - Corpo TESTO piccolo (7.5pt) - Mancato contrasto con sfondo - Scollegato dall’hyperlink (IAM)

2

3

6

Sfondo - Mancato contrasto con elementi in sovraimpressione

3

4 7

Primo Piano - Immagine grande - Assenza di link al .pdf di riferimento

4

Testo

5

Link

- Manca il titolo - Interlinea troppo grande - Lista creata con tag <p> - Poco evidenziati - Solo testo, nessun icona - Ridurre interlinea

6

5

8

News - testi - Interlinea - Gerarchie paragrafi

7

News - galleria

8

Galleria - Link assente - Fade-in vs traslazione

- Dimensione incostante delle immagini

45

■■ Restyle Home I 1

Payoff - Corpo testo 9pt o superiore - Sfondo a tinta unita per evi- denziare il logo inclusione del paragrafo del payoff all’interno del tag <a> - Collegamento alla home

2

2

1

8

4

Sfondo - Aumentato il contrasto, soprattutto con il logo del Politecnico

3

Primo Piano

3

- Immagine più piccola del 30% - Link dell’immagine al contenuto tramite il tag <a>

4

5

7

Testo - Aggiunto il titolo generico del box che indica il nome della rivista - Riduzione dell’interlinea del testo e aumento della distanza tra le voci dell’elenco - Lista creata con l’apposito tag<ul> <li> - Aumentare dimensione carattere

9

5

Link: - Testo accompagnato da icone - Interlinea ridotto

6

Footer - Collegamenti Facebook e RSS

7

News - testi - Interlinea dei testi corretto - Utilizzo di grassetti e corpi differenti per distinguere i titoli dalle descrizioni

46

6

8

News - galleria - Le immagini sono tutte dello stesso formato - Utilizzo di moduli per il ridimensionamento e il cropping delle immagini

9 Galleria - Immagini collegate ai rispettivi contenuti (link diretto a sezione percorsi) - Traslazione delle immagini da SX a DX come per le news

■■ Restyle Home II 1

Lingue - Pulsanti per consultare i contenuti in inglese o in italiano più in vista e a portata di mano

2

Social

3

Primo Piano

Centro di Ricerca Istituto di Architettura Montana

COS’È IAM

Archalp

4

Link

Ricerche

Didattica

- Allineati con il paragrafo di presentazione della rivista

5 Pulsanti di navigazione

Eventi

Biografie

Link

news

4

Il progetto Thermovacuum del Cnr-Ivalsa di San Michele all’Adige

-- Legno glocal? Il legno nell’architettura valdostana contemporanea -- Una nuova ala di legno a Ostana -- Allestimento del Centro visitatori del Parco Mont Avic -- Costruire nella logica di filiera: l’esperienza SaDiLegno -- Albergo Energy Zero in Trentino -- ll legno così com’è -- Il progetto dell’involucro in legno -- La durabilità dei rivestimenti in legno -- Uso del legno grezzo. Imparare dagli antichi -- Questioni di filiera, e non solo -- BoisLab: la valorizzazione del legno regionale -- Annotazioni sulla didattica, il legno, la costruzione e il paesaggio … e molto altro ancora!

- Sfondo nero per aumentare il contrasto delle informazioni chiave

- Direzione relativa allo scorrimento della gallery - Freccie con forte contrasto su nero per aumentarne la visibilità sul nuovo sfondo bianco

Scritti

Sommario

- Colore bianco con trasparenza del 70%

Titoli

Percorsi

ARCHALP n. 5 2013

- In vista e in linea con i pulsante di selezione delle lingue

4

2

1

Il progetto Thermovacuum del Cnr-Ivalsa di San Michele all’Adige è stato giudicato strategico dall’Europa con 1,8 milioni di euro di finanziamento. Si chiama Termovuoto® ed è un processo...

5

Percorsi di architettura

3 Sfoglia

Scarica pdf

DAD, Dipartimento di Architettura e Design - Politecnico di Torino, Viale Mattioli 39 10125 Torino - Tel. +39 011 090 6599

47

■■ Restyle Home III 1

Lingue

1

- Riallineate con i la barra dei menù per evitare di invadere solo pazio dei loghi

2

Social

3

Link

4

- Inseriti nel footer in quanto non sono ancora usati attivamente e si vuole dare più visibilità ai contenuti del sito

5

- Link per consultazione e download della rivista riallineati con l’immagine e non con il paragrafo, in modo da concentrare gli elementi grafici in un unico punto e dargli una gerarchia diversa rispetto al testo

4

Titoli - Rimozione degli sfondi neri per rendere più uniforme e pulito l’aspetto del sito

5 Pulsanti di navigazione - Ingranditi e in linea con lo schema cromatico del sito

48

4

3

2

■■ Sito pubblicato

Centro di Ricerca Istituto di Architettura Montana

COS’È IAM

Archalp

Percorsi

Scritti

Ricerche

Didattica

Eventi

Biografie

Link

news

ARCHALP n. 5 2013

Il progetto Thermovacuum del CnrIvalsa di San Michele all’Adige

Sommario -- Legno glocal?

Il legno nell’architettura valdostana contemporanea -- Una nuova ala di legno a Ostana -- Allestimento del Centro visitatori del Parco Mont Avic -- Costruire nella logica di filiera: l’esperienza SaDiLegno -- Albergo Energy Zero in Trentino -- ll legno così com’è -- Il progetto dell’involucro in legno -- La durabilità dei rivestimenti in legno -- Uso del legno grezzo. Imparare dagli antichi -- Questioni di filiera, e non solo -- BoisLab: la valorizzazione del legno regionale -- Annotazioni sulla didattica, il legno, la costruzione e il paesaggio … e molto altro ancora!

Sfoglia

Il progetto Thermovacuum del CnrIvalsa di San Michele all’Adige è stato giudicato strategico dall’Europa con 1,8 milioni di euro di finanziamento.

Si chiama Termovuoto® ed è un processo...

Percorsi di architettura

Scarica pdf

DAD, Dipartimento di Architettura e Design - Politecnico di Torino, Viale Mattioli 39 10125 Torino - Tel. +39 011 090 6599

49

■■ Problematiche “chi siamo” 1 Contenuto - Solo testo

2 Box - Elementi persistenti. Le gallery presenti nella home vengono mantenute anche in questa pagina

2

1

50

■■ Restyle chi siamo I Centro di Ricerca Istituto di Architettura Montana

COS’È IAM

Archalp

Percorsi

Scritti

Ricerche

Didattica

Eventi

Biografie

Link

COS’è Iam L’Istituto di Architettura Montana (IAM) nasce per la prima volta presso il Castello del Valentino, sede della facoltà di architettura di Torino, a seguito dei Convegni di architettura di Bardonecchia degli anni ’50, grazie all’opera di figure come Carlo Mollino, Roberto Gabetti, Franco Albini, Paolo Ceresa.

L’IAM rinasce nell’autunno del 2009 presso il Dipartimento di Progettazione Architettonica e di Disegno Industriale del Politecnico di Torino, al fine di valorizzare e promuovere le ricerche in tema di architettura, design e paesaggio alpino.

Dal 2013 l’IAM è un centro di ricerca del Dipartimento di Architettura e Design (DAD) del Politecnico di Torino.

Obiettivi dello IAM sono: -- la PROMOZIONE E REALIZZAZIONE DI RICERCHE di base e applicate nei campi del progetto, dell’architettura, della storia, del restauro, del recupero, del design, della tecnologia e della cultura materiale incentrate sullo spazio alpino e montano; -- la FORMAZIONE DI RETI DI RICERCA con enti e soggetti locali e internazionali sul tema dei luoghi montani; -- il SUPPORTO DELLE COMUNITA’ LOCALI nella messa a punto di ricerche e di progetti finalizzati allo sviluppo locale e alla trasformazione consapevole del territorio montano con l’intento di agevolarne lo sviluppo sostenibile; -- la VALORIZZAZIONE E DIVULGAZIONE DELLE CULTURE architettoniche e tecniche che hanno come fine la qualificazione e lo sviluppo della montagna; -- lo sviluppo di ATTIVITA’ DIDATTICHE in stretta relazione con la ricerca, e aventi come oggetto i luoghi, i paesaggi e gli ambienti montani.

DAD, Dipartimento di Architettura e Design - Politecnico di Torino, Viale Mattioli 39 10125 Torino - Tel. +39 011 090 6599

51

■■ Restyle chi siamo II

52

■■ Restyle chi siamo III

53

■■ Sito pubblicato

Centro di Ricerca Istituto di Architettura Montana

COS’È IAM

Archalp

Percorsi

Scritti

Ricerche

Didattica

Eventi

Biografie

Link

COS’è Iam L’Istituto di Architettura Montana (IAM) nasce per la prima volta presso il Castello del Valentino, sede della facoltà di architettura di Torino, a seguito dei Convegni di architettura di Bardonecchia degli anni ’50, grazie all’opera di figure come Carlo Mollino, Roberto Gabetti, Franco Albini, Paolo Ceresa.

L’IAM rinasce nell’autunno del 2009 presso il Dipartimento di Progettazione Architettonica e di Disegno Industriale del Politecnico di Torino, al fine di valorizzare e promuovere le ricerche in tema di architettura, design e paesaggio alpino.

Dal 2013 l’IAM è un centro di ricerca del Dipartimento di Architettura e Design (DAD) del Politecnico di Torino.

-- la PROMOZIONE E REALIZZAZIONE DI RICERCHE di base e applicate nei campi del progetto, dell’architettura, della storia, del restauro, del recupero, del design, della tecnologia e della cultura materiale incentrate sullo spazio alpino e montano;

Obiettivi dello IAM sono:

-- la FORMAZIONE DI RETI DI RICERCA con enti e soggetti locali e internazionali sul tema dei luoghi montani; -- il SUPPORTO DELLE COMUNITA’ LOCALI nella messa a punto di ricerche e di progetti finalizzati allo sviluppo locale e alla trasformazione consapevole del territorio montano con l’intento di agevolarne lo sviluppo sostenibile; -- la VALORIZZAZIONE E DIVULGAZIONE DELLE CULTURE architettoniche e tecniche che hanno come fine la qualificazione e lo sviluppo della montagna; -- lo sviluppo di ATTIVITA’ DIDATTICHE in stretta relazione con la ricerca, e aventi come oggetto i luoghi, i paesaggi e gli ambienti montani.

DAD, Dipartimento di Architettura e Design - Politecnico di Torino, Viale Mattioli 39 10125 Torino - Tel. +39 011 090 6599

54

■■ Problematiche “Archalp” 1

Menù a tendina

1

- Non adatto a un elevato numero di link - Viene mostrato solo il titolo della rivista. Una breve descrizione o un’immagine thumbnail fornirebbero maggiori indicazioni sul contenuto scaricabile

2

Contenuti - C’è solo testo e una parte delle informazioni andrebbero messe in second piano

3

4 2

Primo Piano - I link non hanno icone, sono solo testuali - Scarsa visibilità e attrattiva

4

Gallery - Elemento persistente dalla home. Avere una gallery di presentazione anche nella pagina Archalp non è più necessario.

3

4

55

■■ Restyle archalp I

56

■■ Restyle archalp II 1 Gallery - La rivista selezionata non compare nella gallery

2 Social share - Condivisione del contenuto sui social network

Centro di Ricerca Istituto di Architettura Montana

COS’È IAM

Archalp

Percorsi

Scritti

Ricerche

Didattica

Eventi

Biografie

Link

Archalp Foglio semestrale dell’Istituto di Architettura Montana -- Legno glocal? Il legno nell’architettura valdostana contemporanea -- Una nuova ala di legno a Ostana -- Allestimento del Centro visitatori del Parco Mont Avic -- Costruire nella logica di filiera: l’esperienza SaDiLegno -- Albergo Energy Zero in Trentino -- ll legno così com’è -- Il progetto dell’involucro in legno -- La durabilità dei rivestimenti in legno -- Uso del legno grezzo. Imparare dagli antichi -- Questioni di filiera, e non solo -- BoisLab: la valorizzazione del legno regionale -- Annotazioni sulla didattica, il legno, la costruzione e il paesaggio … e molto altro ancora!

2

Sfoglia i numeri precedenti

1

DAD, Dipartimento di Architettura e Design - Politecnico di Torino, Viale Mattioli 39 10125 Torino - Tel. +39 011 090 6599

57

■■ Restyle archalp III

Centro di Ricerca Istituto di Architettura Montana

COS’È IAM

Archalp

Percorsi

Scritti

Ricerche

Didattica

Eventi

Biografie

Archalp Foglio semestrale dell’Istituto di Architettura Montana

Foglio semestrale dell’Istituto di Architettura Montana ISSN 2039-1730

Costruire in legno

LP

numero 5 giugno 2013

-- Legno glocal? Il legno nell’architettura valdostana contemporanea -- Una nuova ala di legno a Ostana -- Allestimento del Centro visitatori del Parco Mont Avic -- Costruire nella logica di filiera: l’esperienza SaDiLegno -- Albergo Energy Zero in Trentino -- ll legno così com’è -- Il progetto dell’involucro in legno -- La durabilità dei rivestimenti in legno -- Uso del legno grezzo. Imparare dagli antichi -- Questioni di filiera, e non solo -- BoisLab: la valorizzazione del legno regionale -- Annotazioni sulla didattica, il legno, la costruzione e il paesaggio … e molto altro ancora!

Sfoglia i numeri precedenti

DAD, Dipartimento di Architettura e Design - Politecnico di Torino, Viale Mattioli 39 10125 Torino - Tel. +39 011 090 6599

58

Link

■■ Sito pubblicato

Dettaglio articolo Archalp

59

■■ Problematiche “Percorsi” 1

Menù a tendina - Le voci contenute alla voce “Percorsi” (Il Moderno, Turismo ecc...) dovrebbero comparire come titolo nella pagina selezionata: invece viene solo mostrata la scritta “PERCORSI”

2

Cartina - La mappa del Piemonte, pur presentando dei possibili pulsanti (pallini bianchi), non è interattiva. Non accade nulla cliccandoci sopra

3

1

1

2 4

Introduzione capitolo - In secondo piano e poco visibile - Contenuto accessibile solo dal link in basso “LEGGI TUTTO”

4

60

Testo - Accesso al contenuto solo tramite link testuale “SCHEDA e IMMAGINI” - Icona cursore sbagliata. Su tutto il box relativo all’architettura compare il cursore a forma di mano e non di freccia, come se fosse possibile aprire un link cliccando semplicemente sul box.

3

■■ Pagina intro “percorsi” 1

Menù introduttivo di selezione - Cliccando su una delle tre voci, si accede accede alla pagina contenente la mappa del Piemonte e l’elenco delle architetture - Una breve descrizione sotto al titolo della sezione, ne anticipa il contenuto

2

Introduzione capitolo - Il testo di introduzione al capitolo, presente sotto alla cartina del Piemonte, nella bozza precedente era stato posizionato nella pagina di selezione del capitolo. Praticamente era prevista una pagina introduttiva per ognuna delle tre sezioni, prima di accedere quella con cartina ed elenco delle architetture.

Nella bozza finale si è preferito mantenere solo un breve testo dando più spazio al menù, così da ridurre il numero di click e la profondità del sito

1

2 3

Social - Nella bozza precedente era prevista la condivisione del contenuto sui social network. Trattandosi solo di una pagina introduttiva è stata rimossa questa opzione.

3 2

61

■■ Restyle “Percorsi” 1

Menù di selezione rapida - Menù ad accesso rapido, che risparmia di utilizzare quello a tendina

2

Cartina

5

- Dimensione della cartina aumentata

4

1 3

Lista - L’elenco mostra un maggior numero di architetture selezionabili - L’intero box di ogni architettura è un link diretto al contenuto

4

Frecce di navigazione - Per consultare la lista non occorre cliccare sul numero delle pagine successive, ma è sufficiente scrollare - Frecce di navigazione

5

Alfabeto - Cliccando su una lettera è possibile filtrare i contenuti in modo alfabetico

62

3 2

■■ Sito pubblicato

63

■■ Problematiche “Percorsi” (Pagina dettaglio)

1

Descrizione architettura - Non ci sono link per approfondimenti - Non ci sono collegamenti al numero della rivista Archalp che ne parla

2

Gallery - Non ci sono tasti di navigazione per vedere le altre immagini - Non è possibile vedere l’immagine più grande cliccandoci sopra

3

2

1

Pulsante back - Poco visibile

3

64

■■ Restyle “Percorsi” (Pagina dettaglio)

65

■■ Sito Pubblicato

66

■■ Problematiche “scritti” 1

Menù di consultazione - Ricerca testi difficile - Elenco solo per autore

2

Box - Assenza di contenuti

1 2

67

■■ Restyle “scritti”

68

■■ Sito Pubblicato

69

■■ Restyle “libri” (Pagina dettaglio)

70

■■ Sito Pubblicato

71

■■ Problematiche “ricerche”

72

■■ restyle “ricerche”

73

■■ Problematiche “biografie”

74

■■ restyle “biografie”

75

■■ Problematiche “eventi”

76

■■ restyle “eventi”

77

■■ restyle “eventi” (Pagina dettaglio)

78

■■ Sito Pubblicato

79

Breve Storia del web

80

WorldWideWeb (in seguito ribattezzato Nexus per evitare confusione tra il software e il World Wide Web) è il primo browser per il web e fu realizzatto da Tim Berners Lee, essenzialmente a scopo dimostrativo e di ricerca.

HTML

(Hyper Text Markup Language)

I siti web sono pagine in HTML costituite da una singola colonna di testo verde su sfondo nero per non affatticare la vista

I siti web sono una serie di documenti di testo uniti tra loro da link testuali

1990

Nel 1991 Tim Berners-Lee pubblica il primo sito web in HTML sul World Wide Web

1991 A1

Tabelle

(table based sites) +10Milioni di utenti navigano in internet +600 Website online

A2

Le tabelle consentono di creare pagine web con molteplici colonne, permettendo una migliore organizzazione dei contenuti e dei layout

Le immagini di sfondo vengono divise in piĂš parti da inserire nelle tabelle come un puzzle

Lâ&#x20AC;&#x2122;utilizzo di cornici viene sfruttato per distinguere il corpo del sito dalla barra di navigazione

GIF e testi animati vengono utilizzati per arricchire le pagine web e a fondo pagina compaiono i contatori di visite

1992

Nascono siti come Angelfire, Geocities e Altervista che consentono anche agli utenti di costruire il proprio sito gratuitamente.

A3 Note immagini a pag. 90

Nel 1994 nasce il World Wide Web Consortium.

Il suo compito è quello di trovare gli standard per le tecnologie utilizzate sul web

1993

1994

81

Flash & JAVA CSS

(Cascading Style Sheet)

A4

L’esperienza utente si arricchisce con menù animati e presentazioni che anticipano l’accesso ai siti web. Fanno la loro prima comparsa anche i pop up.

Sebbene i fogli di stile a cascata circolassero già negli anni ‘90, solo nel nuovo millennio cominciano a prendere piede I “frames” consentono di visualizzare più pagine web o elementi multimediali contemporaneamente su una singola finestra del browser

A5

Molti siti Internet diventano una combinazione di template a tabelle arricchiti con elementi multimediali in Flash (Action Script) e JAVA I fogli di stile a cascata permettono ai designer di separare il contenuto dei siti dall’impostazione grafica.

Sfondo, colori, posizionamento degli elementi...possono essere definiti in un file differente da quello dell’HTML

+279 Milioni di utenti navigano in internet +2.2 Milioni di Website online

82

A6

1996

1997

Nel 1998 viene rilasciato PHP3: il linguaggio di scripting permette la creazione dei primi siti web dinamici

JavaScript

1995

1998 I web designer cominciano ad abbandonare la struttura a tabelle in favore della combinazione Javascript e CSS

Nascono menù interattivi animati e sistemi di sicurezza e feedback avanzati che migliorano l’esperienza utente

Nel 2002 quasi tutti i browser supportano pienamente Javascript

Nascono siti che consentono agli utenti personalizzare i propri profili e di caricare contenuti propri da condividere pubblicamente.

Comincia l’era degli User Created Contents

1999

2000

web semantico +782 Milioni di utenti navigano in internet +38 Milioni di Website online

Resource description framework (rdf)

XmL

eXtensible Markup Language Metalinguaggio per la definizione di linguaggi di markup, ovvero un linguaggio marcatore basato su un meccanismo sintattico che consente di definire e controllare il significato degli elementi contenuti in un sito

A7 A8

Web2.0

I contenuti interattivi mantengono le modifiche anche dopo il “refresh” della pagina web.

HTML5 comincia a diventare un’alternativa ai contenuti Flash e ai linguaggi per la programmazione di applicazioni.

Nel 2007 Steve Jobs annuncia di voler abbandonare il supporto per Flash sui dispositivi Apple.

A9

L’obiettivo del Web semantico è quello di rendere le macchine capaci di comprendere le richieste delle persone, risparmiando compiti onerosi in termini di tempo e fatica, fornendo il massimo della gratificazione.

2001

2002

2003 L’Ontology Web Language (OWL) è un linguaggio di markup per rappresentare esplicitamente significato e semantica di termini con vocabolari e relazioni tra gli stessi. Esistono varie versioni del linguaggio come: N-Triples Turtle - N3

L’uso di Javascript asincrono e XML (AJAX) contribuisce a creare contenuti e applicazioni molto simili a quelli disponibili solo su software desktop OpenSource Il design comincia a focalizzarsi sulla produzione di contenuti e non solo sulla vendita di prodotti.

Prolificano Blog, Social Network e Wiki.

2004

2005

2006

2007

2008

83

Web Mobile

Nel 2008 l’accesso a Internet da dispositivi mobili supera quello dei computer desktop A giugno 2014 in Italia ci sono 28 milioni di utenti in rete, di cui 13 milioni tramite PC e più di 15 milioni da mobile.

A10

Grids, Frameworks e CSS3 +2 Miliardi di utenti navigano in internet +240 Milioni di Website online

Adaptive & Responsive A11

Flat design e single page

Bootstrap and Foundation vengono usati ampiamente dai webdesigner. Le pagine web diventano sempre più simili e uniformate.

84

2009

2010

Si diffonde il 960GS, grid system con griglia di 12 o 16 colonne e una larghezza standardizzata a 960px per la sua divisibilità e versatilità.

Per progettare efficacemente su web occorre anche avere conoscenze di programmazione.

I siti possono essere Responsive (client-side) cioè in grado di adattarsi in tempo reale alla dimensione dello schermo oppure Adaptive (server-side), dotati cioè di più fogli di stile CSS per ogni risoluzione.

Siti web e dispositivi comunicano tra loro fornendo informazioni, spesso anche sensibili, utilizzate per questioni di sicurezze, per marketing e per venire incontro all’utente.

W3C introduce un nuovo metodo di impaginazione in CSS tramite il modulo Flexbox.

La teoria del design comincia a influenzare anche la progettazione su web. Si rispettano di più le gabbie grafiche e i contenuti vengono privati di vezzeggiamenti grafici inutili.

Alternative a PHP come Ruby e Python si diffondono dando origine a diversi CMS alternativi ai già diffusi Wordpress, Drupal e Joomla.

A12

I designer sviluppano una versione alternativa dei siti ottimizzata per dispositivi portatili. I contenuti vengono selezionati attentamente, mostrando solo l’essenziale.

2011

2012

2013

2014

2015

2016

■■ Le origini World Wide Web (cui ci si riferisce spesso con gli acronimi WWW o W3) è stato l’ultimo servizio informativo a venire alla ribalta su Internet. Ma il successo della ‘ragnatela mondialÈ è stato tale che attualmente, per la maggior parte degli utenti, essa coincide con la rete stessa.

Il Web è solo una parte delle informazioni presenti su Internet che definisce la rete di infrastrutture collegate e in continua comunicazione tra loro. Il World Wide Web si fonda su un modello di scambio di informazioni basato sul protocollo HTTP, uno dei tanti linguaggi utilizzati su Internet per la trasmissione dei dati.

Tramite applicazioni chiamate browser, come Firefox o Internet Explorer è possibile interpretare le informazioni tramsmesse tramite protocollo HTTP in modo da accedere alle pagine Web, collegate tra di loro tramite hyperlink.

Un’altro protocollo differente da HTTP molto usato è il protocollo di trasferimento file (File Transfer Protocol - FTP), che permette di accedere a dati presenti su Internet altrimenti non accessibili tramite browser; in informatica e nelle telecomunicazioni, FTP è un protocollo per la trasmissione di dati tra host basato su TCP e con architettura di tipo client-server.

dns

ssl http Internet

smtp

Sebbene sia diffusa la convinzione tecnicamente scorretta che Internet e World Wide Web siano la stessa cosa, è indubbio che gran parte dell’esplosione del ‘fenomeno Internet’ a cui abbiamo assistito a partire dagli anni ‘90 sia legata proprio alla diffusione di questo strumento.

Internet

http WWW La storia di World Wide Web inizia nel maggio del 1990, quando Tim Berners Lee, un ricercatore del CERN di Ginevra — il noto centro ricerche di fisica delle particelle — presenta ai dirigenti dei laboratori una relazione intitolata “Information Management: a Proposal”. La proposta di Berners Lee ha l’obiettivo di sviluppare un sistema di pubblicazione e reperimento dell’informazione distribuito su rete geografica che tenesse in contatto la comunità internazionale dei fisici. Nell’ottobre di quello stesso anno iniziano le prime sperimentazioni.

ftp pop

Tim Berners Lee

Per alcuni anni, comunque, World Wide Web resta uno strumento al-

85

quanto esoterico. L’impulso decisivo al suo sviluppo, infatti, viene solo agli inizi del 1993, dal National Center for Supercomputing Applications (NCSA) dell’Università dell’Illinois. Basandosi sul lavoro del CERN, Marc Andressen (che pochi anni dopo fonderà con Jim Clark la Netscape Communication) ed Eric Bina sviluppano una interfaccia grafica multipiattaforma per l’accesso ai documenti presenti su World Wide Web, il famoso Mosaic, e la distribuiscono gratuitamente a tutta la comunità di utenti della rete. World Wide Web, nella forma in cui oggi lo conosciamo, è il prodotto di questa virtuosa collaborazione a distanza. Con l’introduzione di Mosaic, in breve tempo il Web si impone come il servizio più usato dagli utenti della rete, e inizia ad attrarne di nuovi.

86

Mosaic, il browser scritto e rilasciato nel 1992 da NCSA Immagine presente sulla “Computer Desktop Encyclopedia 2004 National Center Supercomputing Applications

Le caratteristiche che hanno fatto del World Wide Web una vera e propria rivoluzione nel mondo della telematica possono essere riassunte nei seguenti punti: ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ

Diffusione planetaria Facilità di utilizzazione delle interfacce Organizzazione ipertestuale Possibilità di trasmettere/ricevere informazioni multimediali Semplicità di gestione delle informazioniper i fornitori

■■ Ipertesto La definizione di questo termine potrebbe richiedere un volume a parte (ed esistono realmente decine di volumi che ne discutono!). La prima formulazione moderna dell’idea di ipertesto si trova in un articolo del tecnologo americano Vannevar Bush, “As We May Think”, pubblicato nel 1945, dove viene descritta una comFoto di Vannevar Bush plicata macchina immaginaria, il Memex (contrazione di Memory extension). Si trattava di una sorta di scrivania meccanizzata dotata di schermi per visualizzare e manipolare documenti microfilmati, e di complicati meccanismi con cui sarebbe stato possibile costruire legami e collegamenti tra unità informative diverse. Secondo Bush un dispositivo come questo avrebbe aumentato la produttività intellettuale perché il suo funzionamento imitava il meccanismo del pensiero, basato su catene di associazioni mentali.

La sintesi tra le suggestioni di Bush e le tecnologie informatiche è stata opera di Ted Nelson, che ha anche coniato il termine ‘ipertesto’, agli inizi degli anni sessanta. Nel suo scritto più famoso e importante, Literary Machines — un vero e proprio manifesto dell’ipertestualità — questo geniale ed anticonformista guru dell’informatica statunitense descrive un potente sistema ipertestuale, battezzato Xanadu. Nella utopica visione di Nelson, Xanadu era la base di un universo informativo globale ed orizzontale — da lui definito docuverse (docuverso) — costituito da una sconfinata rete ipertestuale distribuita su una rete mondiale di computer. Il progetto Xanadu non è mai stato realizzato concretamente, malgrado i molti tentativi a cui Nelson ha dato vita. Ma le sue idee sono confluite molti anni più tardi nella concezione di World Wide Web.

Principio di funzionamento dell’ipertesto

Un ipertesto si basa su un’organizzazione reticolare dell’informazione, ed è costituito da un insieme di unità informative (i nodi) e da un insieme di collegamenti (detti nel gergo tecnico link) che da un blocco permettono di passare ad uno o più altri blocchi. Se le informazioni che sono collegate tra loro nella rete non sono solo documenti testuali, ma in generale informazioni veicolate da media differenti (testi, immagini, suoni, video), l’ipertesto diventa multimediale, e viene definito ipermedia.

I

l lettore (o forse è meglio dire l’iperlettore), dunque, non è vincolato dalla sequenza lineare dei contenuti di un certo documento, ma può muoversi da una unità testuale ad un’altra (o ad un blocco di informazioni veicolato da un altro medium) costruendosi ogni volta un proprio percorso di lettura.

■■ WWW World Wide Web è un sistema ipermediale dove i diversi nodi della rete ipertestuale sono distribuiti sui vari host che costituiscono Internet. Attivando un singolo link si può dunque passare a un documento che si trova su un qualsiasi computer della rete. In questo senso utilizzare uno strumento come Web permette di effettuare una vera e propria navigazione nel ciberspazio, una navigazione che riconsegna il timone nelle mani del (iper)lettore.

Il funzionamento di World Wide Web non differisce molto da quello delle altre applicazioni Internet. Anche in questo caso il sistema si basa su una interazione tra un client ed un server. Il protocollo di comunicazione che i due moduli utilizzano per interagire si chiama HyperText Transfer Protocol (HTTP).

I client Web detti anche Browser sono gli strumenti di interfacciamento tra l’utente ed il sistema; le funzioni principali che svolgono sono: ͽͽ ricevere i comandi dell’utente ͽͽ richiedere ai server i documenti ͽͽ interpretare il formato e presentarlo all’utente.

87

■■ Html

■■ URL - Uniform Resource Locator

HyperText Markup Language (HTML) è il formato in cui sono memorizzati i documenti ipermediali di Web. Si tratta di un linguaggio di marcatura (markup language), appositamente orientato alla descrizione di documenti testuali. HTML si basa sulla sintassi dello Standard Generalized Markup Language (SGML), un metalinguaggio per la definizione di sistemi di markup, di cui parleremo più diffusamente in seguito.

Un aspetto particolare del funzionamento di World Wide Web è la tecnica di indirizzamento dei documenti, ovvero il modo in cui è possibile far riferimento ad un determinato documento tra tutti quelli che sono pubblicati sulla rete.

Ma cosa vuol dire ‘linguaggio di marcatura’? L’idea di ‘markup’ in un documento elettronico si ricollega alla simbologia che scrittori e correttori di bozze utilizzano nella stampa tradizionale per indicare al compositore ed al tipografo come trattare graficamente le parti di testo che svolgono funzioni particolari: ad esempio, la sottolineatura per indicare il corsivo. In modo simile, i linguaggi di marcatura sono costituiti da un insieme di istruzioni, dette tag (marcatori), che servono a descrivere la struttura, la composizione e l’impaginazione del documento. I marcatori sono sequenze di normali caratteri ASCII, e vengono introdotti, secondo una determinata sintassi, all’interno del documento, accanto alla porzione di testo cui si riferiscono.

U

n documento HTML è dunque un file in formato testo che include, insieme al contenuto testuale vero e proprio, i marcatori che ne descrivono la struttura.

La soluzione che è stata adottata per far fronte a questa importante esigenza si chiama Uniform Resource Locator (URL). La ‘URL’ di un documento corrisponde in sostanza al suo indirizzo in rete; ogni risorsa informativa (computer o file) presente su Internet viene rintracciata e raggiunta dai nostri programmi client attraverso la sua URL. Una URL ha una sintassi molto semplice, che nella sua forma normale si compone di tre parti:

tiposerver://nomehost/nomefile ͽͽ La prima parte indica con una parola chiave il tipo di server a cui si punta (può trattarsi di un server gopher, di un server http, di un server FTP, e così via) ͽͽ La seconda indica il dominio (domain), cioè il nome simbolico dell’host su cui si trova il file indirizzato; al posto del nome può essere fornito l’indirizzo numerico. ͽͽ La terza indica nome e posizione (path) del singolo documento o file a cui ci si riferisce. Tra la prima e la seconda parte vanno inseriti i caratteri ‘://’. Un esempio di URL è il seguente:

http://www.liberliber.it/index.htm 88

La parola chiave ‘http’ segnala che ci si riferisce ad un server Web, che si trova sul computer denominato ‘www.liberliber.it’, dal quale vogliamo che ci venga inviato il file in formato HTML il cui nome è ‘index.htm’. Mutando le sigle è possibile fare riferimento anche ad altri tipi di servizi di rete Internet: ͽͽ ftp

→ server FTP

ͽͽ gopher

→ server gopher

ͽͽ telnet

→ i server telnet

ͽͽ wais

→ server WAIS.

89

Note immagini pag. 79-82 A1 - Home page del primo sito web della storia, pubblicato il 20 dicembre 1990 su http://info.cern.ch/hypertext/WWW/TheProject.html A2 - Yahoo! GeoCities (noto anche come GeoCities) è un servizio di web hosting, attualmente disponibile solo in Giappone. È stato fondato nel novembre 1994[1] da David Bohnett e John Rezner, ed era chiamato Beverly Hills Internet (BHI) per un tempo molto breve.[2] Il 28 gennaio 1999, GeoCities è stato acquisito da Yahoo!;[3] a quell’epoca era il terzo sito web più visitato del World Wide - Fonte https://it.wikipedia.org/wiki/Yahoo!_GeoCities A3 - Angelfire è stato uno dei primi servizi di web hosting. Nato nel 1996, la versione originale di Angelfire offriva sia il servizio di realizzazione di siti web che di trascrizione medica - Fonte http://www.angelfire.lycos.com/aboutaf.tmpl A4 - Homestar Runner è un noto sito realizzato interamente in Flash dai fratelli Mike e Matt Chapman, anche conosciuti come The Brothers Chaps. Il sito conteneva una serie di cartoni animati comici con personaggi di fantasia tra cui il famoso Strong Bad, una specie di lottatore di Wrestling.

A5 - AlterVista è una piattaforma web Italiana dove è possibile aprire gratuitamente un sito web, un blog e guadagnare con il proprio traffico web. Fondata nel 2000 da uno studente[1] del Politecnico di Torino, ha fatto parte del gruppo Banzai S.p.A. dal 2006 e fa parte del gruppo Mondadori dal 2016 - Fonte https://it.wikipedia.org/wiki/ AlterVista A6 - Myspace è una comunità virtuale, e più precisamente una rete sociale, creata nel 2003 da Tom Anderson e Chris DeWolfe. Offre ai suoi utenti blog, profili personali, gruppi, foto, musica e video. I server sono a Santa Monica e a New York.- Fonte https://it.wikipedia.org/wiki/Myspace A7 - Lanciata da Jimmy Wales e Larry Sanger il 15 gennaio 2001 Wikipedia è un’enciclopedia online a contenuto libero, collaborativa, multilingue e gratuita, sostenuta e ospitata dalla Wikimedia Foundation, un’organizzazione non a scopo di lucro statunitense. Etimologicamente, Wikipedia significa “cultura veloce”, dal termine hawaiano wiki (veloce), con l’aggiunta del suffisso -pedia (dal greco antico παιδεία, paideia, formazione). - Fonte wikipedia.org/wiki/Wikipedia A8 - La suite di Google consente agli utenti di creare e modificare documenti online e di collaborare con altri utenti in tempo reale. Le applicazioni sono disponibili come applicazioni Web e riprendono tutte le funzioni comuni dei programmi da ufficio (editor di testi, tabelle e presentazioni) A9 - Fondata da Jeff Bezos nel 1994 e lanciata nel 1995, Amazon.com incominciò come libreria online, ma presto allargò la gamma dei prodotti venduti a DVD, CD musicali, software, videogiochi, prodotti elettronici, abbigliamento, mobilia, cibo, giocattoli e altro ancora. È stata tra le prime grandi imprese a vendere merci su Internet e una delle aziende simbolo della bolla speculativa delle dot-com riguardante Internet alla fine degli anni novanta.

A10 - Reddit è un sito Internet di social news e intrattenimento, dove gli utenti registrati (chiamati “redditors”) possono pubblicare contenuti sotto forma di post testuali o di collegamenti ipertestuali (links). Gli utenti, inoltre, possono attribuire una valutazione, “su” o “giù”, ai contenuti pubblicati: tali valutazioni determinano, poi, posizione e visibilità dei vari contenuti sulle pagine del sito. I contenuti del sito sono organizzati in aree di interesse chiamate “subreddits”.

Reddit è stata fondata nel giugno 2005 da Steve Huffman e Alexis Ohanian. Dopo la fusione con la Infogami di Aaron Swartz, avvenuta fra novembre 2005 e gennaio 2006, Reddit, il 31 ottobre 2006, fu acquistata da Condé Nast Publications, la società proprietaria della rivista Wired.

Il 18 giugno 2008 Reddit diventò un progetto open source, con la pubblicazione, sul popolare sito di hosting per progetti software GitHub, dell’intero proprio codice sorgente,[9] ad eccezione dei filtri anti-spam e anti-cheat.- Fonte wikipedia.org/wiki/Reddit A11 - SoundCloud è un sito web che permette ai musicisti di collaborare, promuovere e distribuire la loro musica. Ha il suo quartier generale a Berlino, dove fu fondato nel mese di ottobre 2008 da Alexander Ljung e Eric Wahlforss.- Fonte wikipedia.org/wiki/SoundCloud A12 - Il design responsivo, o responsive web design (RWD), indica una tecnica di web design per la realizzazione di siti in grado di adattarsi graficamente in modo automatico al dispositivo coi quali vengono visualizzati (computer con diverse risoluzioni, tablet, smartphone, cellulari, web tv), riducendo al minimo la necessità dell’utente di ridimensionare e scorrere i contenuti.

Il design responsivo è un importante elemento dell’accessibilità, la quale tiene conto inoltre di numerosi altri fattori, incentrati non solo sui dispositivi ma anche sulle caratteristiche dell’utente (quali: capacità cognitive, vista, difficoltà fisiche, e così via). - Fonte - wikipedia.org/wiki/Design_responsivo

90

Homepage di park.org

91

■■ Internet 1996 WORLD EXPOSITION park.org «This is THE site of the year, it must be!!!»

Carlos Campos - Johannesburg, South Africa “A crusade to transform the Internet computer network into a combination of a global Main Street and digital Library of Alexandria.”

News York Times, December 25, 1995 December 25, 1995 La Internet World Exposition del 1996 aveva lo scopo di far conoscere alla comunità internazionale le meraviglie dell’era dell’informazione.

Con 5 milioni di visitatori (Google oggi detiene circa 970 milioni di visitatori mentre Facebook 648 milioni) e un’immensa infrastruttura, mostrò che il cyberspazio era diventato parte del mondo reale.

L

a costruzione di un villaggio globale attraverso queste nuove reti di comunicazione non è una ragione per trascurare le nostre comunità locali. La tecnologia che ci permette di espandere il mondo, di comunicare istantaneamente attraverso gli oceani, è uno strumento che possiamo utilizzare per preservare la diversità, di comunicare istantaneamente attraverso gli

92

oceani, è uno strumento che possiamo utilizzare per preservare la diversità, per arricchire la nostra comprensione degli altri, e migliorare il nostro senso di comunità.

Carl Malamud

Negli anni ‘90 Internet si è evoluto da semplice strumento di comunicazione a vera piattaforma di condivisione di contenuti multimediali.

Le limitazioni tecniche imposte dai browser e dal bitrate di connessione (in un decennio si è passati da 14.4 kbit/s a 56 kbit/s), non consentivano ancora grandi vezzeggiamenti grafici, tuttavia questi vincoli spinsero i designer a organizzare i contenuti nel modo più efficace anche dovevano sottostare a una certa sobrietà grafica.

Inizialmente si trattava principalmente di pagine HTML, prive di menù animati o elementi a comparsa come accordion, slideshow/ carousel. A causa della mancanza di javascript, l’interazione si limitava allo scroll delle pagine e al click sui link visualizzati sulla pagina.

Il contenuto delle pagine era organizzato in tabelle, quindi non sfruttava in alcun modo, CSS ed era costretto a una specifica risoluzione, senza alcuna possibilità di adattarsi a schermi con risoluzioni differenti.

Se visitiamo oggi il sito dell’esposizione universale di Internet del 1996, lo vedremo molto piccolo.

La mappatura delle immagine era una tecnica molto diffusa negli anni ‘90 in quanto permetteva di creare siti web con l’aspetto accattivante, senza dover per forza sottostare all’organizzazione dei contenuti per tabelle.

L’immagine di sfondo ha una dimensione fissa di 465px × 349px, adatta chiaramente a schermi 4:3 invece che 16:9. Per rendere l’interazione più interessante l’immagine è stata resa interattiva, consentendo di scegliere se visualizzare il sito in base alla velocità della connessione in uso.

Alcune schermate del software MapThis

Molto comune era l’uso di software come MapThis1 per rendere cliccabili aree differenti di un’immagine.

Pagina di selezione di park.org per accedere a una sezione più o meno pesante da caricare.

1

www.abdn.ac.uk/tools/ibmpc/mapthis/

93

Pagina di park.org con menĂš di navigazione, per connessioni lente

94

Pagina di park.org con menĂš di navigazione, per connessioni veloci

L’utilizzo di della mappatura delle immagini di sfondo per l’assegnazione di link web, purtroppo ha reso il sito non navigabile al giorno d’oggi, in quanto i link non conducono più alle rispettive pagine ma avviano il download del file .map allegato.

Questo purtroppo è un problema che continua ad inseguire Internet da anni. Le tecnologie utilizzate per la realizzazione dei siti web si evolvono velocissimamente e la diffusione di codice open source favorisce il proliferare di nuove applicazioni, spesso molto differenti tra loro.

Per di più diverse aziende cercando di offrire prodotti sul mercato, nel tentativo di definire degli standard tramite il proprio monopolio (come era avvenuto con Internet Explorer di Microsoft).

Un esempio molto recente di tecnologia in declino è Flash Player.

A partire dal 1995 con il rilascio di Macromedia Flash Player, Internet ha cominciato la sua trasformazione verso una vera piattaforma multimediale, consentendo ai browser allora in uso di supportare “Rich Internet application”, cioè applicazioni multimediali

interattive.

L’unico vero concorrente, in questo campo, allora era Java di Oracle che consentiva di realizzare interfacce web più ricche e interattive di quanto fosse possibile fare con del semplice HTML.

Homepage del sito originario di Java

Nonostante tutto Java è riuscito a sopravvivere al violento scontro tra i metodi di sviluppo per Internet: negli anni il suo utilizzo per la creazione di vere e proprie pagine web si è ridotto, tuttavia viene ancora ampiamente utilizzato per intefacce grafiche e software, per non parlare del suo uso per componenti di sistemi operativi come Android.

95

■■ l’evoluzione dei browser I browser che hanno contribuito allo sviluppo di Internet sono moltissimi, per motivi di spazio e di sintesi l’elenco qui di seguito ne presenta solo i più conosciuti: Mosaic (1992-1997)

National Center for Supercomputing Applications (NCSA) [Urbana - Illinois]

Logo/Icona del primo browser, Nexus.

WorldWideWeb/NEXUS (1990-1994) Tim Berners-Lee CERN (European Organization for Nuclear Research [Ginevra - Svizzera]

[NA]

Il primo programma a fornire uno strumento leggero di navigazione multimediale per Internet, al fine di fornire servizi informativi.

Sebbene sia stato preceduto da WorldWideWeb (Nexus) nel 1991 e da browser come ViolaWWW o Erwise (Samba) nel 1992, solo con Mosaic è cominciata la diffusione di Internet a livello pubblico.

[NeXTSTEP]

Tim Berners Lee creò il primo client e il primo server chiamandoli entrambi “World Wide Web”; software venne successivamente ribattezzato Nexus per distinguerlo dalla rete vera e propria.

WorldWideWeb era in grado di visualizzare semplici fogli di stile, di scaricare e aprire ogni file compatibile con il sistema NeXT (PostScript, video, e suoni) ed effettuava anche il controllo ortografico dei contenuti. Inizialmente le immagini venivano mostrate su una finestra separata, fino a che non furono creati gli Image Objects.

I bottoni “Previeus” e “Next” per navigare tra le pagine erano già presenti e conteneva pure un editor WYSIWYG, che consentiva di modificare e linkare più pagine simultaneamente.

Il codice sorgente è stato reso pubblico nel 1993.

96

NETSCAPE (1994-2008)

Netscape Communications (Marc Andreessen ex leader NCSA) [Mountain View - California]

[NA]

Il browser più evoluto prima dell’imposizione di Internet Explorer, grazie al suo supporto di JavaScript. È stato fonte di ispirazione per la prima generazione di interfacce grafiche di Java e fu lo strumento grazie al quale le persone poterono conoscere le potenzialità di Internet.

Un’importante innovazione introdotta da Netscape è stata la visualizzazione al volo delle pagine web; il testo e la grafica infatti apparivano su schermo durante il caricamento della pagina, mentre i web browser precedenti spesso costringevano l’utente a fissa-

re una pagina vuota per tutto il tempo di caricamento.

Il 19 maggio 2005 AOL annunciò Netscape 8 basato su Mozilla Firefox contribuendo al futuro successo del browser Open Source.

aver vinto la battaglia contro Netscape, Internet Explorer era diventato il browser più utilizzato sulla rete, raggiungendo una diffusione del 95% tra il 2002 e il 2003. Verso la fine degli anni ‘90, per lo sviluppo di Internet Explorer, venivano spesi oltre cento milioni di dollari all’anno ed erano state impiegate oltre 1000 persone.

Internet Explorer è spesso stato soggetto di condanne antitrust contro Microsoft in quanto si trova preinstallato su tutti si sistemi operativi Windows e non può essere cancellato.

Nel 2015, con l’uscita sul mercato di Windows 10, Internet Explorer viene ufficialmente sosituito dalla sua versione più evoluta, Edge.

Opera (1995) Opera Software [Oslo - Norvegia]

[Presto]

È stato il primo browser a permettere la navigazione di più siti web contemporaneamente in un’unica finestra. Nel 2000 introdusse l’interfaccia a schede (tabbed browsing). Fu anche pioniere della funzione di salvataggio della sessione corrente, di quella di anteprima (in formato “miniatura”) dei vari tab e della possibilità di organizzare le “tab” in cartelle.

Fino al 2005 è stato un browser commerciale, che per essere utilizzato senza licenza obbligava a visualizzare un banner pubblicitario.

Safari (2003)

Apple [Cupertino - California]

[WebKit]

Microsoft Internet explorer (1995-2015) Microsoft [Redmond - Washington]

Prima che Apple sviluppasse un proprio browser si appoggiò inialmente a Netscape Navigator e Cyberdog, per poi utilizzare persino Internet Explorer di Microsoft. Solo a partire dal 2003 cominciò lo sviluppo di Safari che continua ancora oggi anche su dispositivi mobili. Safari come l’iPhone dispone della tecnologia Cover Flow per la visualizzazione della cronologia.

[Trident]

Assieme a Netscape condivide alcune componenti di Mosaic. Dopo

97

Grazie allo sviluppo del sistema operativo Chrome OS, basato sul kernel Linux, Google ha definito il punto di incontro tra le applicazioni desktop e quelle del web 3.0.

Firefox (2002)

Mozilla Foundation, Mozilla Corporation e collaboratori esterni [Mountain View - California]

[Gecko]

Sviluppato con il codice sorgente di Netscape 4, Firefox nasce nel 2002 col nome “Phoenix” e viene ufficialmente rilasciato nel 2004. È un software libero, non commerciale e open source. Grazie all’uso del XUL (User Interface Markup Language), Firefox è un browser modulare sul quale è possibile installare temi ed estensioni.

La sua forza sul mercato è dovuta soprattutto all’ampio supporto multi piattaforma e alla florida comunità che partecipa al suo sviluppo.

chrome (2008)

Google Inc. [Mountain View - California]

[WebKit - Blink]

Chrome è l’evoluzione del progetto open source Chromium: la differenza sta soprattutto nel fatto che contiene anche codice non aperto al pubblico come quello del flash player chiamato Pepper Flash Player. Come Firefox è multi piattaforma e dispone di temi, componenti aggiuntive, a volte vere e proprie applicazioni, installabili tramite il web store raggiungibile da browser.

98

Konqueror(1996)

KDE community [fondatore Matthias Ettrich, Berlino]

[WebKit - KHTML]

È il browser gratuito, open source e multi piattaforma, annesso a tutte le distribuzioni Linux KDE. All’interno del sistema operativo, inizialmente svolgeva anche la funzione di file manager che poi è stata ereditata dal nuovo sistema Dolphin. A causa di questa frattura lo sviluppo di Konqueror è rallentato notevolmente inducendo gli utenti a trovare un’alternativa più all’avanguardia.

L’alternativa migliore è risultata essere Rekonq, browser reso disponibile nel 2010 e sviluppato da Andrea Diamantini.

rienza utente semplice e piacevole da utilizzare.

Midori(2007)

Christian Dywan e collaboratori esterni [N/A]

[WebKit e GTK+2/GTK+3 per l’inerfaccia]

È un browser molto leggero, gratuito e Open Source. Disponibile su molte distribuzioni Linux, offre molte delle funzioni presenti sulle controparti commerciali come tabs, user scripts, interfaccia personalizzabile, salvataggio della sessione, private browsing, estensioni (Adblock, Form history, Mouse gestures), ecc... Il browser è multi piattaforma e dimostra come la comunità FOSS (Free e Open Source Software) sia in grado offrire prodotti di design in grado di offrire un’ottima esperienza utente.

Il grafico di seguito mostra il cambio di tendenza di uso dei browser nel giro di quattro anni.

70%

Internet Explorer Firefox Chrome Safari Opera Mobile vs desktop

60%

50%

40%

30%

Web/epiphany(2005)

GNOME Foundation [Cambridge - Massachusetts]

[WebKitGtk+]

Evoluzione del progetto Galeon (2002), Epiphany è il browser ufficiale del desktop environment GNOME, tuttavia è installabile su tutte le distribuzioni Linux e Mac OS X. Precedentemente il browser usava il motore Gecko di Mozilla ma dalla versione 2.26 usa Usage share dei web browser fino al 2015 per default il nuovo motore WebKitGtk+, il porting su GTK+ di WebKit della Apple. Come Google Chrome anche Epiphany unisce l’interazione Desktop e Web fornendo un interfaccia che permette di interagire sia con le applicazioni installate sul computer che con le WebApp. La recente interfaccia grafica di Ubuntu, Unity come GNOME, sfrutta le potenzialità di Epiphany per garantire un’espe-

20%

10%

0 2009

2010

2011

2012

2013

2014

2015

99

Shumway

.GIF

B1

B2 B3

B5

B4

B6

B7

B8

B9

B10

B11 B12

>1994 100

1995

2005

2006

2009

2010

2011

2014 - 2016

Panoramica cronologica delle tecnologie disponibili su web

■■ contenuti multimediali sul web

Infografiche

en.wikipedia.org/wiki/List_of_web_browsers

www.testking.com/techking/infographics/browser-evolution-the-history-of-web-browsers-infographic/

evolutionofweb.appspot.com/

B13

Nell’inforgrafica della pagina seguente è possibile vedere l’evoluzione delle tecnologie che hanno permesso, e consentono ancora oggi, di condividere contenuti multimediali come immagini animate, filmati, suoni o musica.

Il formato gif accompagna il web praticamente fin dagli esordi e ancora oggi è un formato molto diffuso, soprattutto per la condivisione di brevi animazioni: addirittura sono nati siti come giphy.com che è stato integrato in molti social come Tsu, Facebook o Telegram, così da permettere agli utenti di comunicare non più solo con semplici emoticons, ma utilizzando vere e proprie espressioni animate, tratte da film o video presi dal web.

QuickTime come le gif, ha permesso fin dal dicembre del 1991, di riprodurre audio e video su computer, tuttavia era ancora un’applicazione scollegata dal browser. Per riprodurre un contenuto multimediale occorreva prima trasferirlo sul computer in uso.

Negli stessi anni cominciavano a diffondersi progetti che prevedevano l’interazione con i filmati: nel 1993 uscì sul mercato Myst, un videogioco creato dai fratelli Robyn e RandB14 Miller, interamente realizzato in HyperCard su piattaforma Apple Macintosh. Il gioco consiste principalmente di immagini statiche pre-renderizzate (alcune occasionali animazioni, come ad esempio le farfalle che volano, sono dei filmati QuickTime integrati nell’immagine). HyperCard è stato uno dei primi sistemi per creare ipertesti, in anticipo

101

sull’HTML, che comprendeva un semplice linguaggio di programmazione introdotto sul mercato da Apple Computer nel 1987, assieme al System 6.

Il 1996 rappresentò una svolta per il Web, Macromedia infatti, dopo aver acquisito FutureSplash Animator B15 B16 dalla FutureWave Software, introdusse FlashPlayer.

Animazioni interattive e suoni potevano essere riprodotti direttamente su browser e, sebbene le connessioni fossero molto lente, i tempi di caricamento inferiori rispetto a quelli necessari per filmati MOV o AVI. Negli stessi anni Macromedia acquisì iBand Software, che permise la realizzazione di Dreamweaver uno dei software commerciali più affermati per lo sviluppo WYSIWYG di siti web.

Furono anni di grande sperimentazione. Sembrerà incredibile ma la smart TV nacque proprio in quel periodo. L’azienda WebTV Networks Inc. infatti aveva sviluppato WebTV, un dispositivo dotato di tastiera wireless e telecomando che consentiva di consultare le e-mail e navigare in Internet sul televisore. L’azienda fu poi poi acquisita da Microsoft nel 1997 e il progetto venne rinominato MSN TV. All’interno del progetto erano coinvolti due impiegati di Apple: Andy Rubin, Joe Britt.

All’inizio del nuovo millennio, lo stesso Andy Rubin ha fondato Android Inc. e Danger Inc. l’azienda che sviluppò nel 2002 il Danger Hiptop uno dei primi smartphone di successo sul mercato occidentale che ispirerà l’N-Gage di Nokia.

Nel 2004 Adobe acquisisce Macromedia: è il punto di partenza per la suite grafica di Adobe e quello che conosciamo ancora oggi come Adobe Flashplayer.

Presto numerosi gruppi sostenitori del FOSS cercarono di sviluppare alternative Open Source ad Adobe Flash Player, da poter utilizzare anche su Linux, senza alcun problema di licenza. Creato e mantenuto dal progetto GNU, Gnash risultò uno dei player Open Source meglio riusciti. Anche Microsoft non disdegnò dal creare, Silverlight, la sua alternativa a Flash per la riproduzione di video 102

su browser.

Il monopolio di Flash Player è rimasto saldo fino alla dichiarazione di Steve Jobs del 2010, dove annunciava il completo abbandono della tecnologia Flash su tutti i dispositivi Apple. Questa decisione ha permesso di accelerare lo sviluppo di HTML5 allontanando il Web dalle limitazioni del software commerciale. Nel 2011 Google rilascia Swiffy, un software in grado di convertire i file SWF di Adobe Flash Player in HTML5. Anche Mozilla si mette subito al lavoro su Shumway, il sostituto open-source per Adobe Flash Player, interamente in HTML5.

103

Note immagini pag. 98-100 B1 - GIF (Graphics Interchange Format). introdotto nel 1987 da CompuServe per fornire un formato adatto alle immagini a colori, impiazzando il precedente formato RLE solo in bianco e nero. La caratteristica opzionale di interlacciamento, che memorizza le linee in un ordine tale da rendere riconoscibile un’immagine solo parzialmente scaricata, contribuì ad incrementare la popolarità del GIF, permettendo agli utilizzatori di riconoscere anzitempo gli scaricamenti errati.

B2 - Gnash è un lettore multimediale sviluppato e mantenuto dal progetto GNU, concepito per la riproduzione di files multimediali in formato Shockwave Flash (SWF). È utilizzabile anche come plugin per browser web. Si tratta di software libero pubblicato sotto licenza GPL. - Fonte wikipedia.org/wiki/Gnash B3 - Moonlight è stato un ambiente di runtime open source sviluppato da Novell per eseguire gli applicativi RIA (Rich Internet Application) di Silverlight (Ambiente sviluppato da Microsoft) - Fonte wikipedia.org/wiki/Moonlight_(software) B4 - Lightspark è un Free and Open Source Software distribuito sotto licenza GNU Lesser General Public License il cui intento è la creazione di un riproduttore di file in formato Adobe Flash - Fonte wikipedia.org/wiki/Lightspark B5 - In via di sviluppo da Mozilla dal 2012, Shumway riproduce i contenuti Flash trasformando i contenuti in HTML5, e ActionScript in JavaScript. Supporta sia AVM1 e AVM2, e le versioni di ActionScript 1, 2, e 3 B6 - Loghi fittizi che indicano HTML5, CSS3 e Javascript, tecnologie che hanno permesso di soppiantare tutti gli applicativi per la riproduzione e la creazione di contenuti multimediali.

B7 - Google Swiffy è un semplice tool online che permette la conversione dei file Flash con estensione SWF in codice compatibile con le specifiche HTML5. Il progetto è stato chiuso nel luglio del 2016.

B8 - Fondata nel 1992, Macromedia è stata una software house di prodotti per la grafica digitale e per il web development. Fondata nel 1992, ha cessato di esistere nel 2005, quando è stata acquisita da Adobe Systems.

B9 - Loghi di Flash Player e Actionscript il linguaggio di scripting di Adobe Flash.

B10 - Silverlight è un ambiente di runtime sviluppato da Microsoft per piattaforme Windows e Mac che consente di visualizzare, all’interno del browser, Rich Internet application, ovvero applicazioni multimediali ad alta interattività - Fonte wikipedia.org/wiki/Silverlight B11 - In informatica, QuickTime è il nome che Apple Inc. ha dato all’architettura del suo sottosistema di visualizzazione e al suo formato di file proprietario, molto diffuso su sistemi Macintosh. QuickTime 1.0 per Mac OS, la prima versione dell’architettura, venne pubblicata il 2 dicembre 1991. Nel novembre del 1994, Apple pubblicò QuickTime 2.0 per Microsoft Windows 3.11.

B12 - Nel 2010 Steve Jobs annuncia che Flash Player non verrà più supportato dai dispositivi portatili Apple.

B13 - Myst è un videogioco creato dai fratelli Robyn e Rand Miller, fondatori della Cyan, Inc. (poi, Cyan Worlds, Inc.) nel 1993. Inizialmente realizzato in HyperCard su piattaforma Apple Macintosh, consiste principalmente di immagini statiche pre-renderizzate (alcune occasionali animazioni, come ad esempio le farfalle che volano, sono dei filmati QuickTime Player integrati nell’immagine) B14 - MSN TV (precedentemente noto come WebTV) è un dispositivo elettronico che permette, grazie ad un ricevitore connesso ad una linea telefonica, di navigare su internet utilizzando un televisore. Si tratta di una alternativa economica all’acquisto di un personal computer: il kit, oltre che al dispositivo stesso, comprende una tastiera senza fili e un telecomando. L’azienda ideatrice, WebTV Networks, è stata fondata nel 1995; nel 1997 è stata acquisita da Microsoft. - Fonte wikipedia.org/wiki/MSN_TV B15 - Danger Hiptop è uno smartphone GPRS/EDGE/UMTS prodotto da Danger Incorporated (dal 2008 filiale di Microsoft) tra 2002 e il 2010.

B16 - Andrew Rubin è un informatico, cofondatore e ex-CEO della compagnia che ha sviluppato il sistema operativo Android per smartphone. È stato vicepresidente della sezione ingegneria a Google - Fonte wikipedia.org/wiki/Andy_Rubin

104

■■ 1995 DIFFERENZE TRA STAMPA E WEB Nella tabella di seguito vediamo quali differenze presentava il web come mezzo di comunicazione, rispetto alla stampa.

Come possiamo notare, sebbene faccia riferimento agli anni ‘90, molti problemi sono ancora riscontrabili oggi.

STAMPA

WEB

Le immagini hanno una risoluzione elevata, spesso maggiore Le immagini sono generalmente sgranate e poco dettagliate. rispetto alle capacità visive dell'occhio umano.

Rinunciano alla qualità del colore per un maggiore dettaglio Testo e immagini possono essere osservati contemporanea- Solitamente l'utente vede il testo prima che le immagini siano mente dal lettore caricate. Dare precedenza al testo.

Il designer ha un controllo completo sull'aspetto grafico

Le limitazioni del software e le preferenze dell'utente, condizionano l'impaginazione di testo e immagini.

Il contenuto segue un percorso lineare.

Ha un inizio, una parte centrale e una fine definite.

L'utente può accedere al sito da più parti. La consultazione del contenuto dipende dalla gestione degli hyperlink

Font serif sono più leggibili

Font sans-serif sono più leggibili

Area visibile grande

Area visibile limitata allo schermo

Istantaneo

Richiede tempi di caricamento significativi

Forte impatto

Contenuto ricco

Presentazione su una singola pagina

Link multipli

Grafica statica

Interattivo (clickable graphics)

Telefono o comunicazione via mail

User forms con mail

Distribuzione limitata a librerie, negozi ecc...

Distribuzione su reti globali

Numero di autori limitato

Autori molteplici e in continuo cambiamento

Informazioni validate alla pubblicazione

Informazioni pubblicate in tempo reale

105

imparare dal passato La progettazione di interfacce grafiche affonda le sue radici nelle tecniche utilizzate già nella stampa e nella pubblicità del ‘900. Esistono principi che sono rimasti invariati nel tempo proprio per la loro efficacia e versatilità.

Quelli che trovate di seguito, sono principi già in uso agli albori del design di interfacce informatiche, che rimangono tuttora validi per una progettare correttamente.

Già negli anni ‘90 per realizzare un sito si seguivano regole come: ͽͽ Per favorire la soglia di attenzione, inserisci del testo non troppo lungo. ͽͽ Per impegnare l’attenzione del visitatore durante il caricamento delle immagini ͽͽ Non inserire troppi link nella parte alta del sito o l’utente andrà a visitare altre pagine prima della fine del caricamento. (non a caso oggi si sono diffusi i siti single-page) ͽͽ Limita il numero di colori applicati a testi e immagini a quattro circa.

■■ Gestione dei contenuti Regola dello ZOOM-IN Non importa a quale target si faccia riferimento, la soglia dell’attenzione funziona allo stesso modo per tutti; fai in modo che le prime pagine di un sito siano minimali, con poche informazioni ma accattivanti. A partire dalla homepage fornisci link per pagine contenti informazioni più dettagliate e approfondite.

1. Fatti Which is which? (Chi è chi?) ͽͽ Rappresenta i fatti con immagini 106

ͽͽ Mostra dati, obiettivi, luoghi, tempi ecc...

2. Concept/Definizioni What is it? (Che cos’è?) ͽͽ Usa immagini e fotografie per esprimere idee e concetti ͽͽ Testi brevi e riassuntivi ͽͽ Sottoponi l’utente a giochi, contest e sondaggi 3. Procedure/Steps How do you do it? (Come farlo?) ͽͽ Elenca i passaggi necessari a completare una determinata procedura ͽͽ Usa link per mostrare quali azioni è possibile effettuare ͽͽ Concentrati sulle funzioni, le azioni che deve compiere l’utente, le condizioni e i loro risultati 4. Princìpi/Linee Guida What would an expert do? (Cosa farebbe un’esperto?) ͽͽ Rendi causa ed effetto evidenti ͽͽ Identifica le linee guida ͽͽ Fornisci diversi punti di vista ͽͽ Permetti all’utente di interagire con chat, mail o “newsgroups” Scrivere per il Web ͽͽ Evita lunghe descrizioni, vai alla sostanza ͽͽ La velocità di consultazione è fondamentale. ͽͽ Sfrutta la comunicazione non verbale

ͽͽ Scrivi molte FAQs (fornisci informazioni a piccole dosi) ͽͽ Prendi in considerazione contenuti interattivi ͽͽ Inserisci i contenuti principali nei primi 300 pixel della pagina Gestione della dimensione delle immagini

Posizione sulla pagina Web

Vincoli di dimensione

Immagine di sfondo

4kb

Logo

12kb

Image Map

60kb per FullImageMap

Main Image

30kb per ImageMap con testo

Bullets

30kb

Custom Icons

2kb

Custom Horizontal Rules

10kb

Banner and navigation bars

5-10kb

Photos

30kb

La dimensione delle immagini ai tempi delle connessioni 56K chiaramente doveva rispettare dei limiti oggi forse proibitivi, soprattutto con la diffusione dell’alta definizione. Occorre però sempre cercare di comprimere quanto più possibile lo spazio occupato dal sito sul server, e alleggerire i contenuti, in modo da velocizzarne la navigazione su tutti i dispositivi e le connessioni.

Molti sviluppattori tendono ad arricchire le homepage con popup di video, gif e Javascript, senza rendersi conto di rallentare il caricamento e di infastidire l’utente con funzioni da lui non richieste.

Formato tipico di un sito negli anni ‘90 Indicativamente un sito aveva una larghezza di 500-500 pixels, preferibilmente doveva usare una tavolozza di 64 colori o comunque inferiore ai 220 colori.

Negli anni ‘90 queste limitazioni erano legate anche a questioni tecniche, ma se ci pensiamo una delle regole fondamentali del design è quella di ridurre al minimo indispensabile sfumature e variazioni di colori. Non a caso nel 2015 si è diffuso il Material Design, caratterizzato da tinte piatte, prive di riflessi e sfumature.

Se osserviamo l’evoluzione del logo di Internet Explorer notiamo che il quello 1998-2001 (il secondo nell’immagine) è molto simile all’ultimo del 2012-2015. Al di là delle variazioni di forma per aumentarne la leggibilità, si è tornati all’uso della tinta piatta come colore di riempimento.

Evoluzione del logo di Internet Explorer. Dalle sfumature alla tinta piatta.

■■ TABELLA DEI COLORI Le immagini bitmap su computer non sono altro che mosaici di pixel. Nel caso della grafica 8-bit a ogni pixel corrisponde 1 byte che è costituito a sua volta da 8-bit. I bit sono come interruttori in grado di accendere o spegnere.

Le combinazioni possibili in 8-bit sono 256, quindi ciascun pixel può assumere un valore compreso tra 0 e 255; i colori disponibili in questo caso sono 256.

La grafica 8-bit è caduta in disuso già negli anni ‘90 anche se ha rievocato il proprio fascino nel 2015 con il recupero della cultura New Wave e Pop di fine anni ‘80.

Le successori della grafica 8-bit sono state quella a 24-bit, a 32-bit

107

■■ Ux design - cenni storici Fin dai primi sistemi informatici interattivi, sono state realizzate le linee guida per la progettazione di un’interfaccia ergonomica.

Di seguito vengono elencati gli studi più significativi di questo ambito del design: ͽͽ Cheriton (1976) ͽͽ Norman (1983) formulò regole di design delle interfacce basate sulla psicologia cognitiva ͽͽ Smith and Mosier (1986) scrissero probabilmente le prime vere linee guida per la produzione di interfacce ͽͽ Shneiderman (1987) sono particolarmente importanti le pubblicazioni “Eight Golden Rules of Interface Design” e “Designing the User Interface” ͽͽ Brown (1988) scrisse “Human-Computer Interface Design Guidelines” ͽͽ Nielsen and Molich (1990) formulò una serie di regole per la valutazione euristica delle interfacce ͽͽ Marcus (1991) presentò le linee guida per la progettazione di interfacce web Nel Ventesimo i contributi si allargano a: Stone et al. (2005), Koyani, Bailey, and Nall (2006), Johnson (2007), e Shneiderman and Plaisant (2009).

Microsoft, Apple Computer, and Oracle hanno prodotto diverse guide per la progettazione sulle proprie piattaforme (Apple Computer, 2009; Microsoft Corporation, 2009; Oracle Corporation/Sun Microsystems, 2001).

108

■■ w3c - il World Wide Web Consortium Il World Wide Web Consortium detto anche W3C è l’organizzazione che si prende cura dello sviluppo delle tecnologie web. Il gruppo è stato fondato da Tim Berners-Lee nel 1994 presso il Massachusetts Institute of Technology (MIT). Inizialmente il W3C si occupava principalmente del protocollo HTTP e del suo sviluppo. Ora , il W3C sta ponendo le basi per il futuro del Web attraverso lo sviluppo di decine di tecnologie e protocolli, che devono lavorare insieme in un’infrastruttura solida . Periodicamente il MIT rilascia script e programmi completamente open source e innovativi.

Per la risposta definitiva su ogni questione tecnologia legata al web , il sito del W3C è il posto giusto da visitare:

www.w3.org

<h1>

Tela Totius Terrae </h1>

<h2>

WEB e Progettazione </h2>

109

■■ UXDESIGN - 10 EURISTICHE DELL’USABILITÀ Secondo Jakob Nielsen esistono 10 principi generali per l’Interaction Design. Sono definiti “Euristiche” in quanto sono regole generiche e non specifiche linee guida sull’usabilità.

Visibilità dello stato del sistema

Il sistema dovrebbe sempre tenere informato l’utente su ciò che sta accadendo, in tempi ragionevoli e attraverso un feedback appropriato.

Riconoscere piuttosto che ricordare

Minimizzare il carico mnemonico dell’utente utilizzando oggetti, azioni e opzioni visibili. Il visitatore non deve avere la necessità di ricordare a memoria determinati passaggi per conseguire i propri obiettivi.

Le istruzioni per l’uso del sistema devono essere sempre visibili e facilmente raggiungibili.

Connubio tra sistema e mondo reale

Il sistema dovrebbe comunicare con il linguaggio dell’utente, tramite parole, frasi e concetti a lui familiari, piuttosto che con termini legati al sistema.

Deve attenersi alle convenzioni del mondo reale, facendo apparire le informazioni in un ordine logico e naturale.

ES: Quando incontriamo una persona per strada, la riconosciamo molto velocemente, sappiamo se l’abbiamo già vista in precedenza, tuttavia se cerchiamo ricordarci il nome dobbiamo pensarci più a lungo.

L’efficacia della memoria dipende da tre fattori: Pratica, Prossimità e Contesto.

Coerenza e standards

Design minimale ma bello

Libertà e controllo dell’utente

Aiutare gli utenti a riconoscere, diagnosticare e correggere gli errori

Gli utenti non devono preoccuparsi di sapere se parole o situazioni differenti fanno riferimento alla stessa cosa. Segui le convenzioni già esistenti sulle piattaforme.

Spesso gli utenti effettuano scelte per errore e necessitano di un’ uscita di emergenza ben visibile per fuggire dalla situazione indesiderata senza dover complessi passaggi.

Considera sempre le funzioni di “undo” e “redo”.

Prevenzione degli errori

Un progetto ben realizzato non prevede solo messaggi di errore ma prima di tutto previene il loro verificarsi. Evitare di porre l’utente nella condizione di sbagliare, nel caso fosse inevitabile, avvertire l’utente dei rischi e chiedere conferma prima di proseguire l’azione.

I contenuti non devono offrire informazioni irrilevanti e di poco conto. Ogni informazione aggiunta andrà a inficiare l’apparenza degli altri contenuti diminuendone la visibilità

I messaggi di errore devono essere espressi con parole semplici, indicando il problema con precisione e fornendo una soluzione.

Aiuti e documentazione

Sebbene sia meglio realizzare un sistema che non necessita di documentazione per essere usato, potrebbe essere necessario fornire delle istruzioni. Le informazioni cercate devono essere facili da trovare, focalizzate sulla ricerca dell’utente, elencare schematicamenet i passaggi da seguire e non essere troppo grandi. da Jakob Nielsen - 1 Gennaio, 1995

110

■■ le 12 caratteristiche di un progetto “user Centered” Visibilità

È possibile scoprire immediatamente le azioni possibili e lo stato attuale del dispositivo?

Affordance

Apprensibilità

Facilitare l’apprendimento. Quante difficoltà incontrano gli utenti quando utilizzano l’oggetto/servizio progettato per la prima volta?

Mapping

Intuibilità delle funzioni e delle modalità d’uso del progetto

Un buon mapping e una gabbia grafica determinano la relazione fra i comandi e le rispettive azioni sfruttando la disposizione spaziale e la contiguità temporale.

Feedback

Errori

Un’informazione completa e continua riguardo i risultati delle azioni e lo stato attuale del prodotto o servizio

Quanti errori commette l’utente?

Qual’è la loro gravità? Con quanta facilità riesce a rimediare?

Modello concettuale

Soddisfazione

Il design fornisce le informazioni necessarie per creare un buon modello concettuale del sistema, che favorisca la comprensione e la sensazione di controllo?

Quanto è soddisfacente da usare?

Memorabilità

Vincoli

Quanto è difficile tornare a utilizzare il progetto dopo un lungo periodo di pausa?

Vincoli fisici, logici, semantici e culturali guidano l’azione e facilitano l’interpretazione.

Efficienza

Una volta appresi i principi di funzionamento, quanto tempo impiega l’utente a portare a termine un compito?

Significanti

Un uso efficace dei significanti assicura la visibilità e un feedback efficiente e intelligibile.

111

■■ Premessa

L

e persone non dovrebbero aver bisogno di leggere un manuale per aprire una porta, persino se si trattasse di leggere solo una parola (push/pull) Don Norman Per quanto sia geniale il prodotto, se la gente non riesce a usarlo l’accoglienza sarà cattiva. Tocca al progettista fornire l’informazione adeguata e renderlo comprensibile e usabile.

Sebbene questo libro si concentri sulla progettazione in ambito informatico, i principi che devono seguire i designer sono universali e applicabili a qualunque attività. Che si tratti di creare un disegno di legge, di realizzare un orto cittadino, di programmare un’APP o di crescere un figlio, ci si trova sempre di fronte a un progetto, che può essere portato a termine con maggiore facilità se si rispettano le linee guida della progettazione.

112

Ogni progetto deve essere User Centered, deve cioè mettere al centro dell’attenzione il soggetto coinvolto che dovrà utilizzarlo.

7 PRINCIPI PER LA PROGETTAZIONE DI UN’INTERFACCIA ERGONOMICA: 1. Focalizzarsi sull’utente e sulle sue richieste, non sulla tecnologia 2. Considerare prima la funzione, solo dopo la presentazione/estetica 3. Conformarsi alla visione delle richieste dell’utente 4. Design del caso comune 5. Non distogliere gli utenti dai loro obiettivi 6. Facilitare l’apprendimento 7. Trasmetti informazioni, non semplicemente dati 8. Design per la reattività 9. Collaudalo con l’utente e applica le ultime correzioni

Introduzione all’etica del design ■■ Cosa significa progettare

■■ Design oggi

Un buon progetto deve saper rispondere a due domande: ͽͽ Visibilità È possibile indovinare quali azioni sono possibili e come eseguirle? ͽͽ Comprensibilità Cosa significa tutto questo? Come va usato? Cosa significano tutti i vari comandi?

Benché gli esseri umani abbiano progettato cose fin dalla preistoria, il campo del design è relativamente nuovo; solo a partire dalla fine degli anni ‘80 ha cominciato a definire con maggiore chiarezza i settori in cui si specializza.

L’obiettivo di ogni designer è di rendere i prodotti comprensibili e facili all’uso, curandone anche l’estetica il piacere e il divertimento nell’usarli.

Non dobbiamo soddisfare solo le esigenze tecniche, produttive ed ergonomiche, ma anche tener conto dell’intera esperienza utente, cioè della qualità dell’interazione.

D

esign is not just what it looks like and feels like.

Design is how it works.

Steve Jobs

Dato che ogni cosa nasce da un progetto, il numero dei settori è enorme, dalla cucina all’abbagliamento, dall’arredamento all’orticultura, dalla politica al webdesign ecc...

Nel caso del webdesign i settori principali coinvolti sono: ͽͽ Design industriale: creazione e sviluppo di concetti e specifiche per ottimizzare la funzionalità, il valore e l’aspetto di prodotti e sistemi, con reciproco vantaggio di utenti e produttori. ͽͽ Design dell’interazione: l’attenzione è concentrata sul modo in cui le persone interagiscono con la tecnologia. Lo scopo è migliorare la loro comprensione di ciò che si può fare, ciò che succede e ciò che è appena successo, basandosi su principi psicologici, tecnici ed estetici ͽͽ Design dell’esperienza utente: progettazione di prodotti, processi, servizi, eventi e ambienti, mirando soprattutto alla qualità e alla piacevolezza dell’esperienza complessiva.

113

Web-design Oggi La rapida diffusione di piattaforme come C.M.S. (Wordpress, Drupal, Django ecc...) e Framework ha sicuramente semplificato lo sviluppo di siti Internet negli ultimi anni, facilitando e velocizzando il lavoro dei progettisti, tuttavia ha anche permesso a persone meno esperte del settore, di creare contenuti web.

La rete quindi è diventata un’ecosistema complesso e caotico in continua espansione al quale si sta cercando di dare un’ordine con dei precisi standard (vedi il lavoro svolto dal World Wide Web Consortium - W3C).

Le ragioni delle carenze nell’interazione uomo-macchina sono numerose. ͽͽ Limiti della tecnologia attuale ͽͽ Limitazioni stabilite dai progettisti Es: per abbassare i costi di produzione ͽͽ Incomprensione dei principi di design Un’ulteriore causa di questa deficienza, è che la progettazione di siti web è spesso gestita da ingegneri, esperti di tecnologia ma non di psicologia.

I tecnici fanno l’errore di pensare che sia sufficiente la spiegazione logica: «Basterebbe che leggessero le istruzioni» Sostanzialmente progettano per le persone, come vorrebbero che fossero e non come realmente sono.

114

Riesci a farne almeno una giusta!?

Design antropocentrico

L

a sfida, per i progettisti, è presentare l’informazione circa lo stato del sistema (un dispositivo, un veicolo, un impianto, un’attività) in modo che sia facile da acquisire e interpretare, oltre a fornire spiegazioni e interpretazioni alternative. È utile mettere in discussione le decisioni, ma impossibile farlo se ogni atto od omissione richiede un attento esame. È un problema difficile e non esistono soluzioni scontate.

Ogni giorno ci si trova a dover correggere e superare confusione, errori, frustrazione per non parlare del continuo aggiornamento e manutenzione degli apparecchi.

Nuove tecnologie, nuove applicazioni e nuovi metodi nascono di continuo e non sempre i progressi del design tengono il passo della rapidità dei cambiamenti.

Il buon design parte dalla conoscenza della psicologia e della tecnica. Richiede una buona comunicazione, specialmente dalla macchina alla persona, che indichi quali azioni sono possibili, cosa è successo e cosa sta per succedere. La presenza di un feedback, instaura una comunicazione, fondamentale in particolare quando le cose vanno storte.

I progettisti devono concentrare l’attenzione sui casi in cui le cose vanno storte, non su quelli in cui le cose funzionano secondo i piani.

Le persone hanno bisogno di capire il prodotto o il servizio che intendono usare, cioè i segnali che indicano a che serve, cosa sta succedendo e quali sono le azioni possibili da seguire.

Cercano quindi indizi, segni che servano ad affrontare e comprendere la cosa.

La visibilità di un oggetto nasce dalla corretta applicazione di sei concetti fondamentali:

■■ Affordance Indica la relazione tra un oggetto fisico e una persona e possiamo riassumere le sue caratteristiche in tre punti: 1. Non è una proprietà dell’oggetto ma la relazione che si crea tra l’oggetto e il suo utilizzatore.

Es: un appendiabiti appare fatto apposta per sostenere qualcosa e “invita” ad attaccarvi un abito.

2. Dipende dalla qualità dell’oggetto.

Es: se l’appendiabiti è troppo alto e pesante da spostare non sarà utilizzabile anche da bambini.

3. La presenza di un’affordance dipende dalle proprietà dell’oggetto e dell’agente.

Gli oggetti fisici forniscono informazioni importanti sui modi in cui è possibile interagire con loro. Un affordance visibile è un forte indizio su come funziona una cosa.

115

Le affordance percepite ci aiutano a indovinare quali azioni siano possibili, senza bisogno di cartelli o istruzioni.

■■ Anti-Affordance/ Vincolo Al contrario delle affordance è l’impossibilità di relazionarsi tra oggetto e agente. Non è sempre uno svantaggio, in quanto può essere sfruttata per celare qualcosa o per impedire di svolgere determinate azioni.

Es: Il vetro ha la capacità di lasciar passare la luce ma non gli oggetti fisici. Il fatto che precluda il passaggio è un’anti-affordance.

■■ Significante Sono tutti i segnali e indicatori (visivi, sonori, tattili, olfattivi, gustativi) che mostrano come accedere a un’affordance o come evitarla.

Es: Un buon numero di persone si ferisce tentantando di passare attraverso una porta di vetro chiusa.

Se uno di questi inviti o impedimenti all’uso non è percepibile, c’è bisogno di qualche mezzo per segnalarne la presenza, cioè un significante.

L

a progettazione si concentra soprattutto sui significanti, quindi hanno più importanza delle affordance.

■■ Mapping La corrispondenza logica tra i comandi, le azioni e il risultato voluto.

Es: Se in una stanza devo accendere una luce specifica e il pannello 116

con gli interruttori presenta sei pulsanti tutti uguali uno a fianco all’altro sarà difficile capire quale pulsante corrisponde alla luce interessata. L’unico modo per scoprirlo è andare a tentoni commettendo anche degli errori nel processo.

In alcuni edifici ad esempio per ovviare il problema, dispongono di piccoli display con interfacce grafiche interattive dove l’associazione pulsante, azione e risultato voluto è esplicitata con testi e icone.

■■ Feedback Per feedback si intende la proprietà di comunicare i risultati di un’azione. Mai visto persone che premono ripetutamente il pulsante dell’ascensore o di un semaforo pedonale?

L’impossibilità di vedere gli effetti di un’azione compiuta è disorientante e fa pensare che non sia accaduto nulla.

Il feedback deve essere immediato. Anche un ritardo di un decimo di secondo può essere sconcertante. Se poi è troppo Avviso su vetro che indica la presenza di una porta automatica lungo, spesso rinunciamo e passiamo ad altre attività.

Alcuni feedback, ci dicono che sta accadendo qualcosa ma non forniscono indicazioni precise sull’avvenuto: un segnale luminoso potrebbe non essere visto o un segnale uditivo potrebbe rendere difficile identificarne la provenienza.

Un feedback scadente può anche essere peggio di un feedback assente in quanto distrae, non informa e magari è insistente: pensiamo a sirene antifurto o antincendio eccessivamente sensibili , non solo costituiscono una distrazione ma un vero fastidio.

Tutte le azioni hanno bisogno di una conferma: ci deve essere anche una scala di priorità, tale che l’informazione meno importante venga presentata in modo discreto, mentre i segnali che contano devono catturare l’attenzione.

■■ Modello concettuale Il modo in cui viene pensato e percepito un oggetto o un servizio è il modello concettuale.

M.C.P. (modello concettuale del progettista)

M.C.U. (modello concettuale dell’utente)

I modelli concettuali devono poter essere ipotizzati a partire dall’oggetto stesso; tuttavia molti si tramandano da persona a persona mentre altri provengono da manuali d’uso ed entrano a far parte di quelle che vengono chiamate immagini di sistema Attrezzi di comune uso come le forbici, mostrano chiaramente le proprie componenti permettendo di ricavarne immediatamente il modello concettuale del loro funzionamento.

Osservando un paio di forbici si vede immediatamente che il numero di azioni possibili è limitato. Gli anelli sono lì per infilarci qualcosa, chiaramente le dita: allo stesso tempo sono delle affordance, poichè permettono di introdurre le dita e un significante, indicando dove infilarle. La grandezza degli anelli pone dei vincoli che limitano le possibilità: l’anello più grande suggerisce più dita, quello più piccolo uno solo. Il mapping, cioè la corrispondenza spaziale tra anelli e dita che determina le operazioni possibili, è indicato e vincolato dagli anelli stessi. Il funzionamento inoltre non risente della collocazione delle dita, sebbene sia meno comodo.

Il modello concettuale delle forbici è ovvio e c’è un uso efficace di significanti, affordance e vincoli d’uso.

IMMAGINI DI SISTEMA

Persone diverse possono avere modelli concettuali diversi o addirittura la stessa persona può avere modelli molteplici, coerenti o contraddittori.

Per ogni dispositivo spesso esiste più di un modello concettuale.

Es: il funzionamento della frenata rigenerativa nelle auto a propulsione ibrida è diverso per un automobilista qualunque e per uno tecnicamente preparato.

■■ Differenza tra affordance e significante Questi concetti vengono spesso confusi e usati come sinonimi, occorre quindi chiarirne la differenza. ͽͽ Le affordance sono le innumerevoli possibilità presenti nel

117

mondo che permettono a un agente (uomo, animale o macchina) di interagire con qualcosa. Alcune sono percepibili, altre no. Le affordance sono proprietà intrinseche dell’oggetto e sebbene possano fungere da significanti, in certi casi risultano essere ambigue e poco evidenti. ͽͽ I significanti sono segnali che indicano quali azioni sono possibili, dove e come eseguirle. Alcuni sono cartelli, scritte e disegni collocati nel mondo esterno, come cartelli con scritto “spingere”, “tirare” altri si confondono invece con

affordance percepite come la maniglia di una porta o un interruttore. I significanti devono essere percepibili, altrimenti non funzionano.

Es: Le barre antipanico sono sia affordance visibili che agiscono da vincoli fisici, sia un significante facilmente visibile. Specificano così cosa fare e dove farlo.

■■ Human Centered Design (HCD) Letteralmente significa “Progettazione Incentrata sull’Uomo”.

Questa espressione è stata coniata da Don Norman e indica il metodo di progettazione che tiene conto dei limiti e delle potenzialità dell’essere umano nella sua individualità e diversità.

Prima di arrivare a questo risultato, già nel primo Novecento, cominciarono a essere applicate le conoscenze della psicologia, come aveva fatto il movimento della Bauhaus, che era stato influenzato dai principi della Gestalt, con risultati notevoli, ma un po’ freddi.

Studi simili furono condotti anche in Italia nel secondo dopoguerra da Kanizsa e Petter, nei Convitti Rinascita.

Col passare degli anni si è compreso che bisogna applicare un metodo, che è insieme psicologico ed etno-antropologico, di osservazione del comportamento umano negli ambienti quotidiani d’uso di un prodotto o di un servizio, quando è appena immaginato o quando è solo un prototipo.

Queste osservazioni servono a prevedere gli errori, prima che sia troppo tardi e costoso ripararli.

118

Logo del movimento della Bauhaus

Triangolo di Kanizsa

Il paradosso della tecnologia La tecnologia moltiplicando le funzioni di ogni apparato, spesso finisce per complicare la vita piuttosto che semplificarla, rendendo più difficile comprendere il funzionamento delle nuove invenzioni.

Questo è il paradosso della tecnologia e la sfida di ogni progettista.

In che modo si riesce a capire come funziona una cosa che non abbiamo mai visto prima?

Occorre combinare l’informazione presente nel mondo esterno con quella che abbiamo in testa.

■■ Ostacoli di esecuzione e di valutazione

Per superarel’ostacolo di esecuzione servono significanti, vincoli d’uso, mapping e un modello concettuale.

Per superare l’ostacolo di valutazione occorrono un modello concettuale e il feedback.

Di fronte a un nuovo dispositivo si incontrano due ostacoli: ͽͽ Ostacolo di esecuzione - cerchiamo di capire come usare il dispositivo ͽͽ Ostacolo di valutazione - cerchiamo di capire in che stato si trova il dispositivo e se le nostre azioni conseguono lo scopo

Come lo uso?

Cosa posso fare?

Cosa è successo? È quello che voglio?

MONDO

Ostacolo di valutazione

Significanti Vincoli d’uso Mapping Modello Concettuale

Ostacolo di esecuzione

SCOPO

Modello Concettuale Feedback

119

Conformismo aziendale Prima che i cavi di alimentazione dei dispositivi telefonici si standardizzassero all’ormai diffuso micro usb, sono dovuti passare quasi venti anni.

P

erché un design inelegante dura tanto a lungo? È colpa del retaggio del passato e dei costi che comporterebbe un cambiamento generale.

La scarsa attenzione ai bisogni dell’utente, anche in cose così semplici, è sintomatica di un atteggiamento che ha un impatto grave nel design e nell’interazione tra progettisti e utenti.

«Si è sempre fatto così. Non c’è ragione di preoccuparsi dei consumatori» Alcune aziende cercano di imprigionare la clientela facendo sì che tutti i loro prodotti siano compatibili fra loro, ma incompatibili con quelli della concorrenza. Così, ad esempio, video, musica e libri elettronici di una marca si possono riprodurre solo su lettori di quella marca, mentre non funzionano su apparecchi simili prodotti da altre aziende. Lo scopo è servirsi del design come strategia commerciale: la coerenza interna del sistema prodotto e distribuito da una certa industria significa che, una volta imparato il sistema, i clienti gli resteranno fedeli ed esiteranno a cambiarlo.

La confusione indotta dall’uso di un prodotto di marca diversa dissuade dal cambiamento.

120

Perché essere costretti a scendere compromessi? Non sarebbe difficile per tutti i produttori usare un mapping naturale o almeno

concordare uno standard uniforme?

Alla fine, a perderci sono le persone che per ragioni professionali non possono fare a meno di usare più sistemi. In realtà tutti ci perdono, salvo l’unico produttore che domina il mercato.

G

li standard semplificano la vita a tutti. Nello stesso tempo, tendono a ostacolare lo sviluppo.

Resta il fatto che quando tutto il resto fallisce, la standardizzazione è la via maestra.

■■ Design antropocentrico Supponiamo che io tenti di usare un oggetto comunissimo, ma non ci riesca. Di chi è la colpa, mia o dell’oggetto? In questi casi tendiamo a incolpare noi stessi, ma specialmente se gli altri ci riescono senza problemi.

Ma supponiamo che il difetto sia nel dispositivo stesso, cosicché un sacco di gente incontri gli stessi problemi.

Siccome ognuno è convinto che sia colpa sua, non ammetterà di non riuscire. Si crea così una cospirazione del silenzio, in cui i sentimenti d’incapacità personale sono tenuti nascosti.

La formazione professionale spesso non contempla la task analysis, cioè l’analisi funzionale delle operazioni.

Di chi è la colpa? Probabilmente di nessuno. Trovare un capro espiatorio è raramente utile o giusto. Il problema è dovuto con ogni probabilità alla scarsa coordinazione fra le diverse professioni

che intervengono in un progetto.

mente all’ascensore che si libererà prima.

Un design efficace deve partire dall’attenta osservazione di come sono eseguite nella realtà le operazioni supportate dal sistema, in modo da farvi corrispondere il suo funzionamento. Questo metodo è detto “Task Analysis” e l’intero procedimento progettuale è lo “Human-Centered Design” (HCD), o design antropocentrico.

Le aziende utilizzano principalmente componenti standardizzati, quindi difficilmente un installatore riuscirà a trovare soluzioni ideali per ogni situazione, ma si limiterà a replicare un solo modello adattandolo unicamente per renderlo funzionante, trascurandone l’ergonomia e l’esperienza utente.

Es: In Italia sono diffusi più che altro ascensori con la pulsantiera, per la selezione della destinazione, all’interno della cabina. Sebbene l’interazione sia molto semplice, quando ci si trova in ascensori affollati occorre che qualcuno gestisca lo spostamento per conto di altri, inoltre non tutti devono andare allo stesso piano, quindi se non si crea intesa all’interno del gruppo, si finisce per salire e scendere più volte inutilmente.

Spostando semplicemente la pulsantiera fuori dalla cabina e permettendo di prenotare le chiamate tutti questi problemi sono stati risolti; è sufficiente selezionare il piano interessato e automaticamente l’ascensore gestirà le fermate nella maniera più efficiente. Inoltre, nel caso di palazzi molto alti, se dovessero esserci più cabine a disposizione, la prenotazione viene inviata diretta-

121

■■ Legge di Norman dello sviluppo del prodotto

I

l giorno stesso in cui parte, il processo di sviluppo di un prodotto è in ritardo sui tempi e fuori bilancio.

Il lancio di un prodotto è sempre accompagnato da una previsione di tempi e costi e, molto spesso, queste previsioni superano tempo e budget disponibili.

Ci vuole tempo anche soltanto per far partire il progetto e dato che i manager non possono sforare né nei costi né nei tempi, spesso rinunciano alle fasi analitiche del progetto privilegiando quelle esecutive.

Il modo di superare la strozzatura temporale che impedisce di fare ricerca è separarla dal lavoro della squadra: tenere i ricercatori sempre sul campo e studiare i comportamenti dei consumatori.

Oggi è quasi impossibile ideare o costruire qualcosa di nuovo senza andare a sbattere in brevetti altrui, cosa che obbliga a ridisegnare il percorso progettuale per aggirarli.

■■ La sfida del design Com’è possibile che una stessa persona lavori in tanti campi diversi?

I

l design mira soprattutto ad accertare i reali bisogni della gente e a soddisfarli, mentre il marketing si preoccupa di capire cosa effettivamente la gente comprerà.

Ciò di cui le persone hanno bisogno e quello che comprano sono due cose diverse.

122

Il progettista deve soddisfare i suoi clienti, che non sempre sono utenti finali.

Purtroppo nel mercato i distributori tendono ad avere più importanza e potere dei clienti.

Es: Nel caso degli elettrodomestici, gli articoli spesso vengono acquistati in blocco dalle imprese di costruzione o dai proprietari di immobili.

L’acquirente è interessato principalmente al prezzo, all’aspetto o all’ingombro ma quasi mai alla sua facilità d’uso.

Le esigenze di chi dovrà usarlo, dal punto di vista aziendale sembrano d’importanza secondaria.

Facilità d’uso? Non considerata.

Costi di addestramento del personale? Non considerati.

Manutenzione? Non considerata.

Un prodotto che non risponde a questi quesiti, finirà per costare molto in termine di tempo perso in richieste di assistenza e aggiornamenti rischiando persino di peggiorare il morale e la produttività.

Se la gente protestasse a gran voce, forse la facilità d’uso potrebbe diventare uno dei requisiti indicati nelle specifiche per la proposta d’acquisto e tale esigenza risalirebbe a monte fino ai progettisti.

L

e persone non devono aver bisogno di leggere un manuale per aprire una porta, nemmeno se fosse costituito da due sole parole (spingere/tirare).

Il nostro problema è come possiamo rendere l’utente più gentile e paziente?

■■ Progettare per persone speciali Esiste un branca della scienza specializzata in Antropometria Fisica. I dati raccolti da questa disciplina forniscono indicazioni utili ai progettisti per adattare al meglio i progetti alle esigenze fisiche di una persona media.

Le misurazioni fornite possono corrispondere fino al 90° o addirittura 99° percentile: considerando 300 milioni di abitanti il 5% corrisponderebbe a 15 milioni. Progettando per il 99° percentile significherebbe tagliare fuori 70 milioni di persone.

Un progettista quindi deve comprendere che attenendosi unicamente a statistiche o studi scientifici condotti a posteriori, rischia di escludere un quantitativo sostanziale di persone.

■■ Design inclusivo o universale

Si quello che vedete nell’immagine è un pelapatate con un’impugnatura, a prima vista, esagerata. Il motivo di questa apparenza massiccia non è tanto estetico quanto ergonomico, infatti grazie a un’impugnatura simile è utilizzabile anche da persone con difficoltà nella presa degli oggetti, come chi soffre di artrite.

Un oggetto apparentemente banale, presentava delle difficoltà a una elevata percentuale di persone.

Questo esempio deve insegnarci ad analizzare a fondo il target a cui si rivolge un determinato progetto in modo da evitare di trascurarne anche solo una piccola categoria di persone.

Il deambulatore: un attrezzo brutto, che denuncia a gran voce “DISABILE”. Perché non provare a trasformarlo in un prodotto elegante, magari alla moda?

La soluzione migliore del problema di progettare per tutti è la flessibilità: bisogna consentire alle persone di adattare alle proprie esigenze il prodotto in uso.

Fornendo un buon modello concettuale, le cose complesse cessano di essere complicate perché facili da comprendere e da utilizzare.

123

■■ Fissare gli standard Che ore sono?

pasticcio in quanto includeva troppe varianti.

Ufficializzato lo standard nel 1996 ci vollero altri dieci anni perché l’HDTV fosse accettata. In tutto abbiamo dovuto aspettare 35 anni per avere trasmissioni della stessa qualità di quelle Giapponesi.

Per fortuna stiamo solo parlando di televisori.

La battaglia tra 720p e 1080p ha alimentato una certa concorrenza tra i vari produttori, sebbene in realtà tra un formato e l’altro la differenza fosse quasi impercettibile.

La morale della favola è che per fissare uno standard può volerci tanto di quel tempo, che quando entra nell’uso comune può essere ormai obsoleto.

Questo orologio logico tanto quanto quello standard, salvo che le lancette ruotano in senso inverso e il “12” è spostato. La logica è la stessa quindi, allora perché è tanto difficile leggerlo?

Tramite l’immagine di questo orologio comprendiamo perché sia necessario stabilire degli standard.

Nel 1792, quando fu istituito il sistema metrico decimale, si propose di riformare allo stesso modo la misurazione del tempo, ma il retaggio del passato ha avuto la meglio.

Negli anni ‘70 in Giappone era stato messo a punto un sistema televisivo nazionale che aveva un risoluzione molto più alta di quello in uso negli Stati Uniti.

Nel 1995, venti anni dopo, la Federal Communications Commission (FCC) riconobbe numerose varianti dello standard video: 480p e 480i (definizione standard), 720p e 1080i (alta definizione) e come formati 4:3 e 16:9. Sebbene si trattasse di uno standard fu un po’ un 124

D

esign e marketing non sono importanti come l’ingegneria: essi sono molto più importanti” Dave McClure

■■ design = sviluppare la tecnologia per le persone Il design è una disciplina meravigliosa, che fa incontrare la tecnologia e le persone, gli affari e la politica, la cultura e il commercio.

Le svariate pressioni che agiscono su questa disciplina sono forti e pongono al progettista difficili sfide. Allo stesso tempo il progettista non deve mai dimenticare che i prodotti che crea dovranno essere usati dalle persone. È questo a rendere così stimolante la professione: da un lato, vincoli terribilmente complessi da superare, dall’altro, l’opportunità di sviluppare prodotti e servizi che arricchiscono la vita della gente, arrecandole benefici.

■■ Influenze esterne Lo sviluppo dei prodotti è condizionato da diversi fattori esterni tra cui l’impatto della concorrenza che spinge a introdurre nuove funzioni, talvolta in eccesso provocando casi di “accessorite”, dove si ha un proliferare delle funzioni accessorie.

L’innovazione del design può evolversi in due modi: ͽͽ Graduale - meno appariscente ma più comune ͽͽ Radicale - affascinante, ma raramente riuscita I fattori che permettono di affermarsi sul mercato sono: 1. Il prezzo 2. La rapidità sul mercato rispetto alla concorrenza 3. La ricchezza di funzioni 4. La qualità del prodotto La qualità del prodotto non ha caso è stata messa per ultima, proprio perché tutte le pressioni sopra elencate rendono arduo il processo di design iterativo che porta al miglioramento continuo del prodotto.

A

ffrontare adeguatamente le pressioni sociali, economiche e culturali e correggere le politiche aziendali correnti è la parte più difficile dello sforzo per garantire la sicurezza e la qualità.

In epoca precedente c’era una stretta comunicazione fra progettisti e utenti, che oggi è ostacolata da precise barriere. Alcune aziende proibiscono esplicitamente di lavorare con i clienti, una restrizione bizzarra e insensata. Perché lo fanno? In parte per impedire lo spionaggio industriale, in parte perché le vendite del modello

in quel momento distribuito potrebbero essere compromesse, se i clienti sapessero di un’imminente uscita sul mercato di un prodotto più avanzato.

Sa

iamo circondati da oggetti del desiderio, non da oggetti d’uso.

■■

ccessorite

Dopo qualche tempo che il prodotto è sul mercato, entrano in gioco vari fattori che spingono l’azienda ad arricchirlo di nuove funzioni, avviando un processo di proliferazione strisciante: ͽͽ I clienti richiedono altri accessori, altre funzioni, una potenza maggiore. ͽͽ Un concorrente immette sul mercato prodotti perfezionati. ͽͽ La clientela è soddisfatta ma il mercato è saturo: tutti gli interessati possiedono già il prodotto.

Come afferma “Youngme Moon” nel suo libro “Differente. Il conformismo regna ma l’eccezione domina”, questo tentativo di tenere il passo con la concorrenza fa sì che i prodotti sembrino tutti uguali. Le aziende replicano le novità introdotte dai concorrenti.

La maggior parte delle imprese confronta i vari aspetti dei suoi prodotti con quelli della concorrenza, per vedere quali sono i punti deboli in modo da rimediarvi. Sbagliato, secondo Moon: la strategia migliore è concentrare gli sforzi sugli aspetti in cui si è più forti e cercare di migliorarli ancora, puntando su di essi il marketing e la pubblicità. Questo fa sì che il prodotto emerga dal gregge.

Quanto ai punti deboli, quelli irrilevanti è bene ignorarli. Se il prodotto ha pregi reali, può permettersi di essere appena accettabile sotto altri aspetti.

125

I vertici aziendali sappiano resistere ai responsabili del marketing, che continuano a chiedere di aggiungere questa o quella funzione, questo o quell’accessorio, ritenendoli essenziali. I prodotti migliori nascono concentrandosi sui bisogni reali degli utenti.

■■ Testo vs audio/video La lettura è di gran lunga più efficace dell’ascolto.

Si possono leggere circa 300 parole al minuto, e consente di saltare agilmente avanti e indietro, a un ritmo che può arrivare a migliaia di parole al minuto. L’ascolto è lento, si calcolano circa 60 parole al minuto e non si presta ai salti in avanti e indietro.

■■ L’importanza dei principi Nel corso del tempo i modi di comunicare e interagire cambiano con la tecnologia, ma poichè la psicologia fondamentale degli esseri umani rimane invariata, i principi di design resteranno validi per molti anni se non addirittura per sempre.

■■ Ciclo di vita di un progetto Gran parte della vita quotidiana è dettata da convenzioni vecchie di secoli, che non hanno più senso e le cui origini sono dimenticate da tutti, eccetto che dagli storici.

Anche le tecnologie più moderne seguono lo stesso ciclo: rapide a essere inventate, lente ad essere accettate, ancor più lente a tramontare e morire.

E

ssere i primi non sempre garantisce il successo

Le idee rivoluzionarie il può delle volte fanno fiasco, si sente parlare solo dei rarissimi successi. Nel mondo dell’high-tech il fallimento non è considerato un male.

Es: la Fingerworks era una start-up alle prese con la progettazione di uno schermo capace di distinguere fra più dita, in parole povere “multitouch”. Stava per arrendersi perché a corto di soldi fino a quando la Aplle comprò la start-up. Trent’anni dopo lo schermo multitouch ha invaso il mercato dell’elettronica di consumo.

Le idee troppo in anticipo sui tempi falliscono, anche se alla fine altri le introdurranno con successo.

La gente è conservatrice, i soli a spingere per il cambiamento sono i patiti della tecnica e le industrie produttrici.

Il retaggio del passato, cioè il peso della tradizione, impedisce di cambiare.

La progettazione funziona per ascensione: se un cambiamento peggiora le cose, si rimedia al prossimo giro. I difetti sono eliminati, mentre gli aspetti positivi si conservano.

Salendo bendati non si possono trovare colli più alti, ma solo la vetta di quello da cui si è partiti.

La via dell’innovazione radicale invece suggerisce di cambiare

126

completamente percorso e salire su una nuova vetta, questo però non garantisce che il nuovo colle sia migliore del primo.

L’innovazione radicale è quella che molti ricercano, in quanto è la forma più spettacolare di cambiamento. Ma la maggior parte delle idee rivoluzionarie fallisce e anche quelle che hanno successo possono richiedere decenni per arrivarci.

I perfezionamenti graduali avvengono a milioni ogni anno, le rivoluzioni sono molto più rare.

Non a caso Jean-Baptiste Alphonse Karr affermò: “plus ça change, plus c’est la même chose”

P

iù le cose cambiano, più restano le stesse.

■■ Tecnologia e intelligenza La tecnologia non ci rende più intelligenti, né noi rendiamo intelligente la tecnologia. È la combinazione tra i due, la persona e l’artefatto, a essere intelligente.

Es. Perduta la rubrica del cellulare o del computer, le persone non sono più capaci di mettersi in contatto con gli amici. Alcune senza una tastiera non sanno scrivere e senza un correttore automatico fanno continui errori di ortografia.

Che cosa significa tutto questo? È un bene o un male?

Non è un fenomeno nuovo: toglieteci il gas e l’elettricità e facciamo la fame, toglieteci gli abiti e la casa e moriamo di freddo. Contiamo sugli esercizi commerciali, sui sistemi di trasporto e sui servizi governativi per le cose essenziali alla nostra sopravvivenza. È un male questo?

La collaborazione fra gli esseri umani e la tecnologia ci rende più intelligenti, più forti, più adatti a vivere nel mondo moderno. Abbiamo finito per contare sulla tecnologia e non siamo più capaci di funzionare senza. La dipendenza dalla tecnologia è oggi più grande che mai: da cose fisiche come alloggio, abbigliamento, trasporti, preparazione e conservazione del cibo, essa si è estesa all’informazione (notizie, comunicazione, intrattenimento, istruzione, interazione sociale). Quando tutto va come deve, stiamo bene, informati ed efficienti, ma quando le cose si guastano forse on siamo più in grado di funzionare. Questa dipendenza dalla tecnologia è antichissima, ma ogni decennio il suo impatto si allarga ed attività sempre più numerose.

Mentre la tecnologia introduce di continuo modalità nuove di fare le cose, la gente resiste al cambiamento e non perde le proprie abitudini.

Le necessità fondamentali saranno sempre le stesse, anche se saranno soddisfatte in modi del tutto nuovi.

Una tesi è che la tecnologia ci rende più intelligenti: la memoria e le abilità cognitive sono di gran lunga migliori di quanto siano mai state prima.

L’altra tesi è che la tecnologia ci rende stupidi. Siamo diventati dipendenti dalle nostre tecnologie per orientarci nel mondo, per tener conversazioni sensate, scrivere e ricordare il passato.

Ma nel momento in cui la tecnologia se ne va, siamo ridotti all’impotenza, incapace di svolgere funzioni elementari Già nell’antica Grecia, a quanto racconta Platone, Socrate lamentava l’impatto dei libri, sostenendo che affidarsi al materiale scritto avrebbe danneggiato non solo la memoria, ma lo stesso bisogno di pensare, argomentare e imparare attraverso la discussione.

Nel dialogo, diceva Socrate, si può ribattere, discutere; con il libro è impossibile controbattere.

127

Il fatto che si perda la capacità di memorizzare grandi quantità di informazioni indica forse un decadimento mentale?

Secondo Donald Norman no, anzi, libera la mente dalla meschina tirannia di compiti banali, permettendole di concentrarsi sulle cose che contano.

Il nostro cervello non diventa né migliore né peggiore: sono i compiti che cambiano.

Es: Il miglior giocatore di scacchi del mondo oggi non è né un computer né un essere umano, ma una squadra di uomini e computer che lavorano insieme.

La chiave per vincere non è competere contro le macchine, ma competere insieme con le macchine Il potere reale della mente deriva dall’ideazione di sussidi esterni che ne potenziano le capacità cognitive.

■■ Funzioni inUtili, modelli inutili: bene per il mercato, male per l’ambiente.

Nel mondo dei prodotti di consumo, come per il cibo e le notizie c’è un bisogno continuo di altro cibo e altre notizie.

I clienti sono meglio definiti come “consumatori”.

Quando tutti possiedono quel prodotto, non ce n’è più bisogno, le vendite cessano e l’azienda produttrice chiude.

Negli anni ‘20 gli industriali inventarono l’obsolescenza programmata.

Henry Ford ricomprava le macchine dagli sfasciacarrozze per scoprire quali fossero i pezzi ancora integri. Si potevano ridurre i costi 128

riprogettandoli in modo che cedessero insieme agli altri.

Fare in modo che le cose si guastino entro pochi anni non è l’unico modo di alimentare le vendite. Quello che va di moda quest’anno è fuori moda il prossimo.

Qual è il costo ambientale di tutto il consumo di materiali e di energia per la fabbricazione di nuovi prodotti, per non parlare dello smaltimento dei vecchi modelli?

Gli uomini sono meno sensibili alla moda dell’abbigliamento, tuttavia nutrono interesse per gli ultimi modelli di automobili e le tecnologie più aggiornate.

Un mezzo di lucro relativamente recente molto diffuso è l’abbonamento (TV HD, MMORPG, software di grafica ecc...), che garantisce un flusso continuo di denaro in cambio di un servizio.

■■ Pensiero progettuale Un progetto che nessuno acquista è fallito, per quanto bello che sembri.

Se siete progettisti, contribuite alla battaglia per la facilità d’uso.

Se siete utenti, unite la vostra voce a quella di chi reclama prodotti usabili: scrivete ai produttori, boicottate i prodotti sbagliati, sostenete quelli buoni acquistandoli, anche se ciò significa cambiare abitudini, o magari spendere un po’ di più. E fate sentire il vostro parere ai negozianti - i produttori ascoltano i distributori.

Non esitate a punire i cattivi progettisti e premiate coloro che praticano il buon design.

I

l design delle cose quotidiane rischia di diventare il design di cose superflue, sovraccariche e inutili.

Il compito del UX Designer è comprendere perché l’utente vuole visitare un determinato sito e risolvere i suoi problemi.

■■ AUDIENCE CONSIDERATIONS 1. Individua le categorie dell’audience definendo un target 2. Stabilisci obiettivi e aspettative 3. Identifica le capacità di utilizzo del web 4. Considera un’audience internazionale Definire il target significa rispondere alla domanda: “A quali persone ti rivolgi?”

“Tutte” non è la risposta corretta in quanto impossibile da attuare. Il pubblico del web non è una singola massa omogenea di persone, ma comprende gruppi di individui differenti tra di loro.

Occorre quindi individuare queste categorie, identificandone gli aspetti chiave: ͽͽ Capacità ͽͽ Livello tecnologico ͽͽ Esperienza di navigazione ͽͽ Strategie di ricerca ͽͽ Età dell’utente ed esperienza con il computer

Per venire incontro all’utente: ͽͽ DICHIARA L’OBIETTIVO Mostra subito lo scopo del sito ͽͽ SUDDIVIDI LE INFORMAZIONI IN GRUPPI DI CINQUE O SETTE Con un’azione di “chunking” (spezzettamento) dividi le informazioni in molteplici argomenti. Sostanzialmente è un po’ come sottolineare le parti importanti di un testo ͽͽ MAPPA MENTALE Suddividi le informazioni in categorie e verifica che siano collegate tra di loro e coerenti con l’argomento generale del sito ͽͽ LIMITA LE SCELTE A DISPOSIZIONE

■■ COGNITIVE OVERLOAD (sovraccarico cognitivo) La quantità di stimoli e informazioni che vengono inviati durante la navigazione su web è talmente massiccio che, se non vengono organizzati e gestiti nel modo corretto, non fanno altro che sovraccaricare il cervello, ostacolando la consultazione e la comprensione dei contenuti. È un po’ come un cibo condito con così tante spezie, che alla fine diventa impossibile gustarlo per via dell’eccessivo contrasto tra i sapori.

129

■■ UXDesign - indagine e documentazione Uno degli aspetti fondamentali del designer incentrato sull’utente è l’indagine fatta a monte nella fase di progettazione.

1

Esplorazione È il primo passo per cominciare l’indagine: pensare e porsi domande su ogni dettaglio. È la sola via per la perfezione.

4

Disponbilità immediata Documenti e materiale prodotti sono un ausilio accessibile da tutti i partecipanti al progetto, in ogni momento.

2

Concretizzazione Le idee vanno sviluppate seguendo determinate linee guida in modo da garantirne ordine e coerenza. Per raggiungere questo obiettivo occorre fare bozze, wireframing, prototipazione ecc... la creazione di ogni sorta di documento o modellino permette di concretizzare semplici idee astratte.

5

Comunicazione Rappresentare le idee tramite esempi, bozze e modellini fornisce materiale utile per ottenere un feedback dai colleghi e dai volontari coinvolti nelle indagini.

6

Evoluzione Poter consultare la documentazione prodotta durante la realizzazione di progetto, anche a distanza di anni, è utile per evitare di ripetere gli errori commessi anche in futuro e comprendere quali scelte adottare.

3

130

Ordine e selezione Ogni progetto implica la creazione di numerose idee, bozze prototipi ecc... Arriva il momento in cui occorre selezionare solo i risultati migliori.

■■ Fabbisogno cognitivo Lo schema di seguito sintetizza ciò di cui necessita un utente, perchè un progetto possa soddisfarlo.

Fabbisogno cognitivo

Attributi Chiave

Soluzioni

Interazione con il mondo reale

Efficienza Insicurezza Conflitto

Non perdere tempo Riconosci i limiti Comunica apertamente

Empatia emozionale

Bisogno di riconoscimento Bisogno di sognare Bisogno di identificare

Ricompensa gli utenti Usa la fantasia Identifica l’audience

Divertirsi con l'arte e la scienza

Estetica Cultura Scoperta

Cura l’eleganza Sii internazionale Non dire mai tutto

Apprendimento

Fare qualcosa di nuovo Riconoscere i sistemi Semplicità d’uso Padronanza

Offri diverse procedure Fornisci molte funzioni Rendilo scontato Lascia che sia l’utente a farlo

Gioco

Sfida Regole Vincita

Gioca Illustra le regole Ricompensa gli utenti

131

■■ PRINCIPIO DI LEGGIBILITA (anche per le riviste) Per ogni riga è una buona regola mantenere 40-60 caratteri, cioè circa 11 parole.

■■ LIMITARE IL NUMERO DI CLICK ͽͽ 3 click – limite massimo per le informazioni comuni più importanti ͽͽ 4-5 click – devono condurre all’80% dei contenuti ricercati dall’utente ͽͽ 7 click – devono condurre a un qualunque contenuto sul sito Oggi si parla più che altro di scroll o swipe che di click, tuttavia bisogna sempre a stare attenti a gestire l’interazione uomo macchina, cercando di renderla il più naturale e automatica possibile.

Quando si crea un pannello di navigazione è consigliabile mantenere gli elementi in posizioni fisse in modo da non disorientare il visitatore.

■■ TOC (Table of Content) La tabella dei contenuti di un sito originariamente veniva mostrata direttamente in homepage, soprattutto se si trattava di siti con un elevato numero di argomenti.

Un esempio evidente era Yahoo, che in quanto motore di ricerca, doveva fornire un elenco di “Tassonomie” che rimandassero agli argomenti di interesse.

Oggigiorno l’elenco dei contenuti di un sito continua a esistere ma fa parte della sua mappa e serve principalmente come “esca/punto di riferimento” per i motori di ricerca, in quanto fornisce ai Bot le parole chiave per l’indicizzazione del sito.

132

UXDesign

“

Creare un’applicazione funzionante è ormai diventato un compito relativamente semplice. Avere successo in un mercato altamente competitivo, affollato da utenti, sottoposti a continui stimoli e dotati di una scarsa soglia di attenzione...è tutta un’altra storia” Marcin Treder

La progettazione dell’esperienza utente nell’informatica, è un campo del design che fonda le sue radici negli studi di inizio ‘900, legati all’ergonomia delle interfacce di controllo di dispositivi tecnologici. A partire dagli anni ‘90, quando The Woz (Apple), Bill Gates (Microsoft) e Bill Joy (Sun Microsystems) erano le star del mondo informatico, l’ergonomia delle interfacce utente offerte dai computer subì un notevole combiamento. Grazie alle ricerche compiute da Jakob Nielsen, Steve Krug, Donald Norman, Bruce Tognazzini e Jef Raski cominciarono a essere utilizzati termini come “Usability” e “User experience design”.

La progettazione dell’esperienza utente (abbreviata con gli acronimi UX, UXD), è una disciplina incentrata sull’interazione a 360° tra l’utente e il prodotto.

Progettare un’esperienza significa pianificare e agire su un insieme di azioni, capaci di apportare un cambiamento controllato nel comportamento del proprio target.

Il lavoro di un UX Designer dovrebbe sempre essere mirato a risolvere i problemi delle persone con soluzioni seducenti e stimolanti.

Le conoscenze necessarie a raggiungere risultati soddisfacenti de-

rivano da svariati campi, che vanno dalla psicologia, antropologia, sociologia, alla scienza cognitiva, disegno industriale, scienza informatica ecc...

Q

uando si progetta un’esperienza, si sta di fatto pianificando un modo per condizionare il comportamento di un determinato gruppo di persone.

UXD è a metà strada tra la scienza e l’arte e richiede la capacità di pensare sia in modo analitico che creativo.

Es: nella progettazione di una maniglia per esempio, l’obiettivo sarebbe di trovare la soluzione ideale per le persone che si trovano di fronte al problema di aprire una porta.

Dopo aver realizzato diversi prototipi, è necessario osservare la ricezione da parte degli utenti.

In veste di UX Designer, l’interesse non è solo quello di creare una maniglia funzionale, ma anche curiosa e capace di regalare un’esperienza unica, al punto da spingere le persone a voler aprire la porta più volte.

Una volta trovata la soluzione migliore si cerca di renderla utilizzabile dal un pubblico più vasto, occorre quindi effettuare studi sul comportamento degli utenti difronte all’oggetto realizzato.

UXD fondamentalmente è un’ottimizzazione: una soluzione iterativamente migliorata per rispondere a un problema generico.

U

X design è anche UCD cioè “User Centered Design”, quindi non può esistere senza l’interazione tra utenti e progettista.

133

■■ C-P-S La teoria del C-P-S riassume in tre semplici passaggi, i punti cardine del processo progettuale. Perché un prodotto soddisfi il target a cui è rivolto, occorre analizzare attentamente l’utenza, comprenderne i problemi e trovare una soluzione mirata.

Problema

Cliente

Soluzione

Le domande che ogni progettista dovrebbe porsi sono: C - Il prodotto è adatto al target al quale mi rivolgo?

P - Risolve i suoi reali problemi?

S - La mia soluzione risponde in modo accurato alle necessità del target?

“A problem well stated is a problem half-solved.”

(Un problema individuato correttamente è già risolto per metà) Charles Kettering Per un corretto percorso progettuale sono nati dei modelli di business che consentono di effettuare un’analisi sintetica e schematica del mercato in cui ci si vuole orientare.

Due esempi di “business model” sono BMC (Business Model Canvas) e il Lean Canvas che potete vedere nelle immagini di seguito.

134

■■ PROGRESSIVE ENHANCEMENT e GRACEFUL DEGRADATION - WEB ALLA PORTATA DI TUTTI Progressive enhacement (miglioramento progressivo) e graceful degradation (degradamento aggraziato) sono tecniche di progettazione molto simili tra loro che affrontano lo sviluppo da una prospettiva differente; si può dire che siano facce della stessa medaglia.

Vediamoli in dettaglio: ͽͽ Graceful degradation è la pratica di costruire siti web sfruttano le possibilità offerte dai browser più all’avanguardia, senza però trascurare gli utenti dotati di tecnologie meno moderne, favorendo una riduzione della complessità del sito così da essere supportato anche dai browser più vecchi.

L’esperienza utente con il sito “degradato” ovviamente non è affascinante e completa come sui browser più recenti, ma permette comunque di accedere alle funzionalità base. ͽͽ Progressive enhancement invece di considerare un degrado partendo da un sito completo di tutte le funzioni, procede nella maniera inversa. Comincia lo sviluppo dalle fondamenta stabilendo le funzioni peculiari per il livello base dell’esperienza utente, che dovrà essere accessibile da tutti i browser. Oltre alla versione base del sito viene realizzata una variante più complessa graficamente e più ricca di funzioni che sarà automaticamente disponibile ai browser più recenti. ͽͽ Progressive enhancement è più sofisticato e allo stesso tempo sicuro e stabilità, tuttavia richiede più tempo e sforzi.

Graceful degradation può essere applicata più facilmente, come una toppa per un prodotto già esistente: la manutenzione è più difficile a posteriori ma richiede un inferiore lavoro iniziale.

Il “degrado aggraziato” guarda all’indietro mentre il “miglioramen-

to progressivo” guarda in avanti mettendo i piedi su un terreno battuto e più sicuro.

Graceful degradation può essere utile in queste situazioni: ͽͽ Occorre riadattare un vecchio prodotto e non si hanno tempo o idee per cambiarlo o rimpiazzarlo. ͽͽ Non si ha tempo per portare a termine un prodotto seguendo per intero il suo progressive enhancement (spesso segno di cattiva pianificazione e di scarso budget). ͽͽ Il prodotto è un caso limite, per esempio un sito ad elevato traffico orario dove ogni millisecondo di performance significa fa la differenza su milioni di euro. ͽͽ Il prodotto fa così affidamento sullo scripting che ha più senso mantenere una versione “base” piuttosto che realizzarne una nuova (mappe, client email, feed readers) In tutti gli altri casi il progressive enhancement renderà più felici sia progettisti che utenti finali: ͽͽ Indipendentemente dall’ambiente di lavoro e dal target di riferimento viene sempre rilasciato un prodotto funzionante. ͽͽ Quando viene distribuito un nuovo browser, o un’estensione innovativa viene adottata ampiamente è possibile apportare modifiche al progetto senza dover alterare la soluzione originaria, come accadrebbe invece con la graceful degradation ͽͽ Permette alla tecnologia di essere un aiuto a raggiungere un obiettivo più velocemente e non un dispositivo indispensabile di cui non si può fare a meno. ͽͽ Se occorre aggiungere nuove funzioni, è possibile farlo dopo aver verificato fino a che livello sono supportate, oppure ci si può limitare ad aggiungere le componenti essenziali e aggiornarle progressivamente. Il percorso di progettazione in questo caso è lineare e non costringe a lavorare su due

135

modelli separati.

Es: “Stampa questa pagina” Quando prenotiamo un biglietto per l’aereo o per un concerto, generalmente, una volta effettuato il pagamento, siamo ricondotti alla pagina di stampa della ricevuta e del “ticket”.

Sebbene tutti i browser dispongano di una funzione di stampa, sulla pagina HTML viene sempre fornito un pulsante “print this page”. Questo tipo di pulsante tuttavia non può avviare la funzione di stampa senza appoggiarsi alle possibilità offerte da JavaScript. È sufficiente aggiungere alla finestra il metodo print(): <p id=”printthis”> <a href=”javascript:window.print()”>Stampa questa pagina </a> </p>

Se il browser non dovesse supportare JavaScript, come nel caso di alcuni dispositivi mobili, il link di stampa creato verrebbe visualizzato tuttavia funzionerebbe. Applicando un approccio di “graceful 136

degradation” occorerebbe: 1. Comunicare all’utente che il pulsante potrebbe non funzionare e specificarne le cause.

2. Offrire una soluzione alternativa per raggiungere l’obiettivo.

Una tecnica diffusa è quella di usare l’elemento “noscript”: l’avviso contenuto al suo interno verrà visualizzato solo nel caso in cui JavaScript non fosse disponibile. Il codice quindi sarebbe: <p id=”printthis”> <a href=”javascript:window.print()”>Stampa questa pagina</ a> </p> <noscript> <p class=”scriptwarning”> Per stampare la pagina occorre avere JavaScript abilitato.

Si prega di attivarlo nel browser in uso.

Nel caso non si disponga di Javascript stampare la rice vuta come seugue: - Selezionare l’icona “Print” sul browser - Selezionare la voce “Print” dal menù “File” </p> </noscript>

Questo è un esempio di “graceful degradation”. Spieghiamo all’utente che qualcosa non sta funzionando e che occorre seguire un’altra strada.

Tuttavia questa soluzione utilizza la funzione <noscript> come toppa al problema e presume che i visitatori del sito: ͽͽ Sappiano cos’è Javascript ͽͽ Sappiano come abilitare Javascript ͽͽ Abbiano i permessi e le opzioni per abilitare Javascript ͽͽ Siano felici di attivare JavaScript solo per stampare un documento ͽͽ Utilizzino browser con la funzione di stampa sotto al comando “Print”.

Risolvendo il problema seguendo il progressive enhancement, il primo passo sarebbe quello di trovare una soluzione “non-scripting”, cioè che non faccia uso di specifici linguaggi di scripting.

Senza JavaScript un link per la stampa non è fattibile; se si desidera fornire funzionalità disponibili solo con JavaScript tuttavia si dovrebbe usare i “buttons” e non “links”: per definizione i “buttons” sono studiati appositamente per supportare la funzionalità di scripting.

La definitizione sul sito W3C afferma: “Ogni pulsante può avere script lato client associati con gli attributi di evento di un elemento. Quando si verifica un evento (ad esempio, l’utente preme il pulsante, lo rilascia, ecc.), lo script associato viene attivato.”

Il secondo passo è quello di non dare per scontato che l’utente ha abilitato JavaScript e che il browser può stampare. Occorre semplicemente dire all’utente di stampare il documento: <p id = “printthis”>La ringraziamo per l’ordine effettuato.

La invitiamo a stampare la pagina visualizzata per conservarla come ricevuta</p>

Questa stringa funzionerà in tutte le situazioni. Per i browser supportati, viene impiegato JavaScript in maniera meno invadente, visualizzando il pulsante di stampa solo quando è possibile: <p id=”printthis”>La ringraziamo per l’ordine effettuato. La invitiamo a stampare la pagina visualizzata per conservarla come ricevuta</p> <script type=”text/javascript”> (function(){ if(document.getElementById){ var pt = document.getElementById(‘printthis’); if(pt && typeof window.print === ‘function’){ var but = document.createElement(‘input’); but.setAttribute(‘typÈ,’button’); but.setAttribute(‘valuÈ,’Print this now’); but.onclick = function(){ window.print(); }; pt.appendChild(but); } } })(); </script>

ͽͽ Creando una funzione le variabili restano confinate tutte all’interno del JavaScript senza “inquinare” il resto della pagina HTML. Funziona come una sandbox. ͽͽ Il modello a oggetti del documento DOM, viene testato per verificarne la compatibilità con il pulsante inserito ͽͽ Viene verificato se l’elemento “button” è stato creato, se il browser ha un oggetto “window” e un metodo “print”

137

ͽͽ Se le verifiche riscontrano l’effettiva compatibilità del browser, vengono creati un click button e un apply window. print() come “event handler”. ͽͽ L’ultimo passaggio è l’effettiva creazione del pulsante all’interno del paragrafo.

Grazie al Progressive Enhancement l’utente non viene turbato da alcun messaggio di errore. Non deve sapere che cosa sia Javascript, deve solo preoccuparsi di stampare la pagina.

Progressive Enhancement Javascript attivo

Progressive Enhancement Javascript disattivato

Gli esempi non hanno un aspetto grafico convincente Perché ho voluto mantenere il codice più semplice possibile e le differenze tra i vari approcci restano comunque visibili.

138

Design e psicologia Perché noi progettisti dobbiamo conoscere la mente umana?

Perché le cose sono fatte per essere usate dalle persone e, senza una conoscenza approfondita del funzionamento delle persone, i progetti saranno spesso difettosi, difficili da usare e difficili da capire.

Leo McGinneva nel 1983 e successivamente Theodore Levitt, docente di marketing all’Harvard Business School, affermarono che «La gente non vuole un trapano con una punta da 5mm. Quello che vuole sono buchi da 5mm!».

Il ragionamento di Levitt si ferma troppo presto. Quello che ci interessa è montare scaffali per i libri. Perché allora non pensare scaffalature che non richiedano buchi nel muro? O magari libri che non richiedano scaffali (Ebook).

Conviviamo con noi stessi da quando siamo nati e ci piace pensare di conoscerci. Ma la verità è che non ci capiamo. Il comportamento umano è il risultato di processi subconsci, di cui siamo inconsapevoli; di conseguenza molte delle convinzioni che abbiamo su come si comportano le persone, noi compresi, sono sbagliate.

■■ Memoria La memoria a lungo termine è generalmente divisa in due grosse categorie: M.D. - Memoria Dichiarativa: è esplicita, cioè un tipo di memoria accessibile alla consapevolezza che può essere richiamata alla mente verbalmente e non verbalmente e può quindi essere dichiarata. Essa contiene sia le memorie degli episodi della vita che quelle relative al bagaglio generale dell’individuo, e quindi rappresenta il superamento della dicotomia tra memoria semantica e memoria episodica.

M.P. Memoria Procedurale: è implicita e non verbalizzabile.

Invece di essere una “memoria di qualcosa”, è una memoria che riguarda il fare qualcosa, come andare in bicicletta o disegnare quindi può essere valutata solo mediante le prestazioni.

Tendiamo a credere che tutto il pensiero umano sia conscio e che il pensiero si possa separare dall’emozione, ma non è così.

Cognizione ed emotività non si possono separare. I pensieri suscitano emozioni e le emozioni a loro volta mettono in moto il pensiero.

Ogni azione comporta delle aspettative, aspettative che coinvolgono emozioni. subconscio

- m.p.

conscio

Veloce

Lento

Automatico

Controllato

- m.d.

139

subconscio

- m.p.

Risorse multiple

conscio

- m.d.

Risorse limitate

Controlla il comportamento Richiesto da situazioni nuove; appreso e padroneggiato apprendimento, pericolo, difficoltà

Dati sempre più numerosi indicano che usiamo la logica e la ragione post factum, per giustificare le nostre decisioni a noi stessi (alla nostra mente conscia) e agli altri.

Il pensiero opera per raffronti, trovando la corrispondenza migliore fra l’esperienza passata e la situazione presente.

Emozioni Uno stato emotivo positivo è ideale per il pensiero creativo, ma non è molto adatto per portare a termine un compito. Se è eccessivo, una persona finisce per avere la testa fra le nuvole, salta di palo in frasca ed è incapace di concludere un pensiero perché gliene viene in mente un’altro.

Uno stato emotivo negativo tende a focalizzare il cervello: proprio quello che ci vuole per mantenere l’attenzione su un compito per finirlo. Se è eccessivo, però, abbiamo la visione “a cannocchiale” di persone incapaci di guardare oltre il proprio limitato punto di vista.

Sia lo stato positivo e rilassato, sia quello teso e negativo, sono strumenti preziosi della creatività e delle azioni umane, anche se portati agli estremi possono diventare pericolosi.

■■ Emotional Design Nel libro Emotional Design, Donald Norman afferma che il design deve coprire tre ambiti: ͽͽ Viscerale: permette di rispondere prontamente in maniera subconscia, senza consapevolezza o controllo cosciente. Non 140

ha nulla a che vedere con quanto il prodotto sia efficace, usabile o comprensibile. Si tratta solo di attrazione o repulsione. I tecnici e le persone logiche in genere tendono a considerare la risposta viscerale. ͽͽ Comportamentale: parlando, spesso non sappiamo cosa stiamo per dire, finché la nostra mente riflessiva non ode le parole che abbiamo pronunciato. L’informazione fornita dal feedback conferma o contraddice le aspettative, dando luogo a soddisfazione o sollievo, delusione o frustrazione. ͽͽ Riflessivo: la riflessione è un processo cognitivo lento e profondo e avviene dopo che gli eventi sono accaduti.

Per il progettista il livello riflessivo è forse il più importante dei tre. La riflessione è conscia e le emozioni che si producono a questo livello sono le più durature.

■■ Flusso Uno stato emotivo importante è quello che accompagna l’immersione totale in un’attività: lo psicologo Mihaly Csikszentmihalyi ha definito questo stato psicologico flusso.

Quando ci troviamo in stato di flusso, si perde cognizione del tempo e dell’ambiente esterno. Si è tutt’uno col compito che si sta eseguendo, compito che però deve avere il livello esatto di difficoltà: abbastanza difficile da rappresentare una sfida e richiedere attenzione continua, ma non tanto da indurre ansia e frustrazione.

■■ Osservare da tutte le prospettive

■■ Narrazione Gli esseri umani sono per natura inclini a cercare le cause degli eventi costruendo spiegazioni e racconti; per questa ragione la narrazione è un mezzo persuasivo.

I racconti riecheggiano esperienze vissute e forniscono esempi nuovi. Dalle nostre esperienze e dalle narrazioni altrui tendiamo a formare generalizzazioni su come si comporta la gente e come funzionano le cose.

Tuttavia queste attribuzioni causali sono spesso erronee.

Fondiamo i modelli sulle conoscenze che abbiamo, quali che siano: reali o immaginarie, ingenue o sofisticate.

Ognuno di noi costruisce delle storie (modelli concettuali) per spiegare quello che ha osservato. In assenza di informazioni esterne, si dà libero corso all’immaginazione, purché il modello concettuale arrivi a spiegare i fatti osservati.

Vedete un cerbiatto o una foca? Un elefante o un cigno? Una giraffa o un pinguino?

L’esempio qui di seguito dimostra come il modello concettuale di una persona e la visione limitata possano alterare la realtà: Tom, il terrore dei colleghi di lavoro. Stamani è arrivato in ritardo, imprecando contro i colleghi perché il distributore di caffè era vuoto, poi si è chiuso nel suo ufficio sbattendo la porta. «Ecco, ci risiamo!», è il commento dei colleghi.

Ora prendiamo il punto di vista di Tom: «Che giornataccia! Mi sono svegliato tardi perché la sveglia non ha funzionato e non ho avuto nemmeno il tempo di prendere il caffè. Non ho trovato parcheggio perché ormai era tardi. E nel distributore in ufficio non c’era più caffè. Niente di tutto questo era colpa mia, ho avuto solo una serie di contrattempi. È vero, sono stato un po’ brusco con i colleghi, ma chi non lo sarebbe in queste circostanze?».

Ma i colleghi non hanno accesso al suo mondo interiore e non sanno cosa gli è successo stamani. Quello che vedono è che ha imprecato contro di loro solo perché il distributore di caffè era vuoto. Ciò rammenta a tutti un’altro episodio simile: «Fa sempre così», concludono, «va su tutte le furie per il minimo contrattempo».

141

Chi ha ragione, Tom o i colleghi?

Gli eventi si possono vedere da due prospettive diverse, con due diverse interpretazioni: normali reazioni alle traversie della vita, o manifestazioni di una personalità irascibile e incontrollata.

Ls

a colpa viene sempre additata a un individuo e non alla situazione

■■ bagliare per migliorare

L’idea che quando qualcosa va storto sia colpa di qualcuno è profondamente radicata; per questo stesso motivo si tende a incolpare gli altri e non sé stessi.

O

ccorrerebbe sostituire la parola “insuccesso” con “esperienza di apprendimento”.

Non a caso David Kelly co-fondatore di IDEO ha scelto come motto «Sbaglia spesso, sbaglia presto», proprio perché l’errore è una parte essenziale della ricerca e della creatività.

Siamo creativi e ricchi d’immaginazione, non meccanici e precisi.

Le macchine richiedono esattezza e precisione, noi no.

Il designer libero di sbagliare è più creativo e produce un lavoro più esente da errori. È facile ideare un dispositivo che funzioni bene quando tutto va secondo i piani senza un minimo imprevisto.

La parte più difficile, ma necessaria, del design è far sì che le cose funzionino anche quando qualcosa va storto. ͽͽ Non date la colpa alla gente se non usa correttamente i vostri prodotti ͽͽ Prendete le difficoltà degli utenti come indicazioni dei punti

142

in cui il prodotto può essere migliorato ͽͽ Eliminare dai sistemi elettronici o informatici tutti i messaggi d’errore: fornite piuttosto guida e assistenza. ͽͽ Fate in modo che i problemi si possano correggere partendo direttamente dai messaggi di guida, senza necessità di interrompere il lavoro. Invece di ostacolarlo, facilitare il decorso delle operazioni. Non obbligare mai a ricominciare da capo. ͽͽ Pensate positivo, per voi e per le persone con cui interagite.

Esempio: Durante il collaudo di un nuovo software, ho visto che nell’uso della tastiera bisognava fare attenzione a distinguere il tasto “Return” e il tasto “Enter”: premendo quello sbagliato, gli ultimi minuti di lavoro andavano irrimediabilmente perduti.

L’ho fatto notare al progettista, spiegandogli che io stesso avevo sbagliato spesso e che secondo le mie analisi si trattava di un tipo d’errore probabilmente molto diffuso. La prima risposta dell’ingegnere è stata: «Perché sbagliavi tasto? Non hai letto il manuale?».

Dopo di che si è messo a spiegarmi le diverse funzioni dei due tasti.

«Sì, sì», ho ribattuto,«ho capito, solo che li confondo. Hanno funzioni simili e occupano posizioni contigue sulla tastiera. E come a qualunque buon dattilografo, mi capita spesso di digitare “Return” automaticamente, senza pensarci. Sono certo che anche altri hanno avuto problemi simili».

«Non credo», ha risposto: secondo lui ero l’unica persona a lamentarsi della cosa, eppure i dipendenti dell’azienda usavano il sistema da molti mesi. Ero scettico, sicché siamo andati insieme a interrogarne alcuni: gli era mai capitato di premere per sbaglio “Return” invece di “Enter”, perdendo il lavoro fatto?

«Oh, certo», hanno detto, «un sacco di volte».

Perché nessuno l’aveva mai denunciato? Eppure erano stati invitati a segnalare qualunque problema del sistema. La ragione era semplice: quando il sistema si bloccava o faceva qualcosa di strano,

lo riferivano subito doverosamente, ma quando confondevano i due tasti, la colpa era loro: il manuale parlava chiaro. Avevano semplicemente commesso un errore.

■■ Feedback Il compito del progettista è di ridurre le probabilità di azioni inadeguate, usando affordance, significanti, vincoli e un buon mapping per guidare le azioni dell’operatore. Se si esegue un’azione indebita, il progetto stesso deve far sì che sia prontamente scoperta e corretta. Ciò richiede un feedback immediato e comprensibile, abbinato a un modello concettuale semplice e chiaro.

Il feedback è rassicurante anche quando indica un risultato negativo. L’assenza di feedback suscita un senso di mancanza di controllo.

143

■■ I sette stadi dell’azione: sette principi fondamentali del design

Dalle risposte relative ai sette stadi dell’azione si ricavano sette principi fondamentali del design:

Il modello in sette stadi del ciclo d’azione può essere un prezioso sussidio per il design, in quanto suggerisce una lista di domande fondamentali: 1. Cosa voglio realizzare?

2. Quali sono le sequenze d’azione alternative?

3. Quale azione posso fare ora?

4. Come la faccio?

5. Cosa è successo?

6. Cosa significa?

7. Va bene? Ho realizzato il mio scopo?

1. Quali sono le alternative 2. Cosa posso fare?

3. Come lo faccio?

MONDO

144

3. Va bene così?

2. Cosa significa?

1. Cos’è Successo?

ͽͽ Feedback: c’è un’informazione completa e continua riguardo i risultati delle azioni e lo stato attuale del prodotto o servizio. Dopo aver seguito un’azione, è facile determinare il nuovo stato. ͽͽ Modello concettuale: il design fornisce tutta l’informazione necessaria per creare un buon modello concettuale del sistema, che favorisca la comprensione e la sensazione di controllo. Il modello concettuale potenzia sia la visibilità, sia la valutazione dei risultati. ͽͽ Affordance: affordance corrette sono fatte apposta per rendere possibili le azioni desiderate.

FeedBack

FeedForward

Cosa voglio realizzare

ͽͽ Visibilità: è possibile scoprire immediatamente quali azioni sono possibili e qual’è lo stato attuale del dispositivo

ͽͽ Significanti: un uso efficace dei significanti assicura la visibilità e un feedback efficiente e intelligibile. ͽͽ Mapping: la relazione fra i comandi e le rispettive azioni obbedisce alle regole del buon mapping, sostenuto per quanto possibile dalla disposizione spaziale e dalla contiguità temporale. ͽͽ Vincoli: Fornire vincoli fisici, logici, semantici e culturali guida l’azione e facilita l’interpretazione.

■■ comunicazione

■■ I vincoli aiutano la memoria

Se il risultato sembra cattivo design, la causa potrebbe essere semplicemente la cattiva comunicazione tra le persone coinvolte durante la progettazione.

L’utilizzo di vincoli all’interno di un progetto serve a creare dei percorsi obbligati per l’utente, in modo da evitare di farlo sentire disorientato e, anche da ridurre la possibilità che commetta errori.

Limitare le possibilità di azione, significa anche ridurre lo sforzo mnemonico e mentale, in quanto la concentrazione può essere orientata in una direzione precisa.

Affidarsi unicamente alle proprie capacità è molto rischioso.

Sebbene le nostre conoscenze siano spesso incomplete, ambigue o perfino sbagliate, riusciamo lo stesso a venirne a capo.

Come facciamo? Combinando la conoscenza che abbiamo in testa con quella presente nel mondo esterno.

Dato che il comportamento è guidato da una combinazione di conoscenze e vincoli interni ed esterni, possiamo ridurre al minimo la quantità di nozioni da assimilare, oltre che la completezza, precisione, esattezza e profondità.

Es: la visione periferica e la sensazione tattile della tastiera forniscono qualche informazione sulla posizione dei tasti. Quelli usati più spesso si usano con maggiore agilità, tuttavia finchè scrivendo, occorre guardare la tastiera, la velocità è limitata: la conoscenza risiede ancora quasi tutta nel mondo esterno, non dentro la testa.

La conoscenza di una persona è principalmente data dalla somma di due tipi di conoscenze: ͽͽ Dichiarativa → (sapere che): comprende la conoscenza di fatti e regole. Si noti che conoscere le regole non vuol dire seguirle. ͽͽ Procedurale → (sapere come): è la conoscenza che permette di suonare uno strumento, di muovere la lingua nel modo giusto per pronunciare le parole. È difficile da mettere per iscritto o da insegnare.

In epoca medievale per esempio era molto viva la tradizione orale: i “cantori di storie” sapevano recitare interi poemi senza dover nemmeno consultare il testo. Per aiutarsi a ricordare si utilizzavano le figure retoriche, le rime, il ritmo e il tema dei componimenti, così da riuscire a individuare le parole più idonee.

Es: Veramente quant’ io del regno santo ne la mia mente potei far tesoro, sarà ora materia del mio canto.

10 11 12

La Divina commedia Paradiso, Canto I Dante Alighieri

Le misure tradizionali di memoria a breve termine indicano una gamma di 5-7 elementi, ma nella pratica è meglio attenersi a una stima prudenziale, considerandone da 3 a 5.

I

l modo più efficace per aiutare le persone a ricordare è rendere superflua la memorizzazione

È raro aver bisogno di conoscere con grande precisione il risultato di calcoli complessi.

Per la maggior parte degli scopi, una stima approssimata è accetta-

145

bilissima. Le persone dovrebbero concentrare gli sforzi su questioni di livello superiore: per esempio, le ragioni per cui è necessario ottenere quelle risposte.

La scienza mira alla verità. Di conseguenza, gli scienziati non fanno che discutere, polemizzare e dissentire.

La maggior parte degli scienziati concorda sulle linee generali mentre le controversie spesso vertono su dettagli minimi, importanti per distinguere fra teorie concorrenti, ma irrilevanti nel mondo reale delle applicazioni pratiche.

Nella vita quotidiana non abbiamo bisogno di verità assolute: i modelli approssimativi funzionano altrettanto bene.

I

l modello semplificato della memoria a breve termine, benché impreciso e scientificamente sbagliato, offre indicazioni utili per il design. Ognuna di queste semplificazioni è errata, ma tutte sono preziose per ridurre al minimo il carico di pensiero, producendo risultati rapidi e facili con un’approssimazione accettabile.

■■ Mapping

Un mapping naturale è quello che in cui la relazione fra i comandi e le funzioni comandate è ovvia, grazie all’uso di indicazioni spaziali.

Possiamo distinguere tre livelli di mapping. ͽͽ Ottimale: i comandi sono montati direttamente sull’oggetto comandato.

146

ͽͽ Seconda scelta: i comandi sono il più possibile vicini all’oggetto comandato.

ͽͽ Terza Possibilità: i comandi sono disposti nella stessa configurazione spaziale degli oggetti comandati.

Il mapping ottimale è tra i più chiari e naturali; un buon esempio sono i rubinetti o ii distributori di sapone, dove basta mostrare le mani alla fotocellula per erogare l’acqua o il detergente.

L’unico difetto di questo tipo di mapping è l’assenza di significanti, non sempre infatti si riesce a capire se un rubinetto funziona meccanicamente o tramite fotocellula o se è semplicemente rotto.

■■ Standard e compromessi Il modello concettuale è essenziale per stabilire la funzione, la forma e la posizione di determinati comandi all’interno di un progetto.

Es: Ipotizziamo di dover gestire lo scorrimento delle immagini su schermo tramite un telecomando dotato di due soli pulsanti direzionali.

In questo caso, sebbene per alcuni lettori possa apparire strano, le interpretazioni sul funzionamento possono essere due: 1. La freccia verso l’alto serve ad andare avanti da un’immagine all’altra mentre la freccia indietro fa arretrare l’immagine mostrata. Quindi è come se avessimo il controllo del movimento della vista della telecamera e non dello spostamento delle immagini.

2. Premendo la freccia verso l’alto sono le immagini a venirci incontro. In questo caso quindi è come se la telecamera fosse fissa e spostassimo le foto difronte ad essa.

M.C.1

M.C.2

spingi

avanza

tira

arretra

remote controller

Modelli concettuali a confronto

o la finestra in cui viene visualizzata?

Da più di vent’anni che siamo abituati a premere il tasto di scorrimento in giù o a spostare in basso il mouse per far risalire il testo sullo schermo del computer. Poi sono arrivati gli smartphone e in breve è diventato naturale toccare il testo e spostarlo direttamente con le dita nella direzione interessata.

Non è più la finestra a muoversi ma il testo: non è più una metafora ma un gesto reale.

R

ompere una convenzione e cambiare metafora quindi è possibile, ma bisogna sempre mettere in conto un periodo di confusione, finché gli utenti non avranno assimilato il nuovo sistema.

Non dimentichiamo che l’essere umano è una creatura abitudinaria: rendere un’azione abituale richiede meno tempo e non necessita di essere appresa. Se uno standard è già stato fissato quindi occorre ponderare bene gli effetti dell’innovazione sul pubblico.

Es: fin dagli esordi del web, gli hyperlink vengono colorati di blu.

Oggi questa abitudine sta lentamente cambiando, tuttavia in molte occasioni webdesigner e uxdesigner evitano colori alternativi al blu per indicare collegamenti, così da evitare di disorientare i visitatori.

Come possiamo notare persino da oggetti molto semplici possono scaturire problemi rilevanti a causa dell’uso di modelli mentali differenti.

Un caso simile si è verificato con la visualizzazione del testo su desktop e poi su smartphone.

Se su un browser dobbiamo visualizzare un testo piuttosto lungo, dovremo utilizzare la rotella del mouse o le barre di scorrimento (slider). In tal caso i comandi usati cosa sposteranno? L’immagine

147

■■ vincoli I vincoli sono indizi potenti, che limitano l’insieme delle azioni possibili.

Esistono quattro tipi di vincolo: 1. Fisico: se devo inserire una batteria in un dispositivo la posso mettere solo in un senso perché faccia contatto.

2. Culturale: ogni cultura ha un insieme di azione consentite nelle situazioni sociali. In occidente difficilmente un uomo indosserebbe una gonna salvo eccezioni, in oriente invece il modo di vestirsi può essere molto differente.

3. Semantico: si basano sulla conoscenza della situazione e del mondo. Le luci che indicano l’azionamento del freno di una macchina sono rosse. Per coerenza quindi tutte le auto sono dotate di luci dello stesso colore per indicare la frenata.

Nelle automobili sempre più spesso la chiave è sostituita da una scheda o un telecomando.

Le funzioni obbliganti sono il caso estremo di vincoli per impedire un comportamento indesiderato, prevengono quindi il verificarsi di incidenti.

Tre di questi metodi sono, interlock, lock-in e lockout.

Interlock: blocca il funzionamento quando l’operatore non è in condizione di agire Lock-in: mantiene attiva una funzione impedendo che qualcuno la interrompa prematuramente.

Es: invece di salvare il file e poi uscire è ormai è comune uscire direttamente, contando sul messaggio di avvertimento che suggerisce di salvare prima di chiudere il programma.

4. Logico: il mapping naturale funziona in quanto offre vincoli logici. Un esempio calzante è il gioco per bambini dove occorre far combaciare le forme a disposizione con i rispettivi fori.

Lockout: impedisce l’ingresso in uno spazio pericolo o impedisce che succeda qualcosa.

Es: in alcuni spogliatoi la chiusura delle porte del camerino per cambiarsi, è determinata da una mensola a parete o una piccola seduta, che, se abbassata, impedisce alle ante delle porte di aprirsi. La seduta o la mensola quindi svolgono una funzione obbligante di blocco.

148

I meccanismi della mente ■■ Il triangolo di Kanizsa Spesso ciò che crediamo di vedere non corrisponde a ciò che realmente vedono i nostri occhi

1889 – Illusione ottica di Franz Müller-Lyer, le linee hanno tutte la stessa lunghezza e possono suggerire differenti prospettive.

Osservando le immagini proposte, probabilmente hai subito l’impressione di vedere un triangolo contornato di nero e un triangolo capovolto al di sopra di esso. In realtà sono solo un insieme di linee accompagnate da cerchi parziali.

Il cervello ricava l’immagine di un triangolo capovolto da uno spazio vuoto, perché è ciò che si aspetta di vedere.

Questo tipo di illusione ottica si chiama “Triangolo di Kanizsa” inventata dall’omonimo psicologo italiano Gaetano Kanizsa nel 1955.

L’occhio ha in media 7 milioni di coni, fotorecettori sensibili alla luce diurna e 125 milioni di bastoncelli che trasmettono invece le luci deboli. Essendo i bastoncelli distribuiti nell’area periferica dell’occhio, per una maggiore visibilità notturna è meglio non concetrare la vista in punti specifici.

Riassumendo Ciò che si crede di mostrare alla gente su una pagina web non è detto che corrisponda a ciò che la gente vede veramente. La percezione di una persona dipende dal suo background di conoscenze, dalle aspettative e dalla familiarità incontrata a interagire col sito.

149

Il marchio di computer Sony Vaio cela due simboli: la linea ondulata che riproduce le lettere V e A sono un riferimento al segnale analogico, mentre I e O, leggibili anche come 1 e 0, rappresentano il sistema binario e quindi il segnale digitale.

Come avrete intuito si tratta del gruppo di un’associazione di giornalisti che scrive di cibo.

Il logo unisce coerentemente la forma di un pennino stilografico a quella di un cucchiaio.

150

La freccia gialla nel logo Amazon è un collegamento tra la ‘A’ e la ‘Z’, a simboleggiare la vastità del catalogo della nota azienda.

Inoltre, con la Z, ha la forma di un sorriso, così da rappresentare la soddisfazione dei clienti.

A prima vista può sembrare una riproduzione del continente africano, in realtà si possono scorgere sulla sinistra la figura di un bambino e sulla destra quella di un adulto che si guardano.

FedFex promuove la velocità di consegna e la sua accuratezza all’interno del logo tramite una freccia inclusa tra la ‘È e la ‘X’

Prima di essere acquistata da Oracle era questo il logo.Le lettere che ne compongono il nome, S-U-N, non importa in quale direzione vengano lette, si riesce sempre a vedere la parola SUN. Fu realizzato da Vaughan Pratt.

■■ Il cervello cerca scorciatoie (shortcuts) Il cervello crea scorciatoie, in modo da dare un senso ai milioni di input che riceve ogni secondo dal mondo esterno (circa 40.000.000).

Usa quindi la regola del pollice, basandosi sull’esperienza passata, per cercare di creare idea coerente con gli input ricevuti. Il più delle volte l’immagine rispecchia la realtà ma certe volte fa degli errori Sfruttando le debolezze della mente, è possibile influenzare ciò che le persone vedono o pensano.

Con il semplice uso del colore è possibile portare l’attenzione più su di un concetto piuttosto che un’altro.

■■ LA VISIONE PERIFERICA È PIù UTILIZZATA DI QUELLA CENTRALE PER FARSI UN’IDEA DI CIO che SI VEDE Nelle pagine web la pubblicità generalmente si presenta sotto forma di banner o sfondi, occupando l’area più esterna del sito, tuttavia riesce spesso a richiamare l’attenzione del visitatore.

Adam Larson e Lester Loschky nel 2009, effettuarono un esperimento sulla memoria visiva che consisteva nell’osservare 2 tipi immagini differenti, rappresentanti luoghi differenti.

Alcune di queste immagini erano oscurate al centro, mentre altre mascheravano il contorno dell’immagine mostrandone solo la parte centrale.

I soggetti sottoposti all’esperimento hanno dimostrato di ricordare e di riuscire a identificare più facilmente i luoghi mostrati nelle foto oscurate al centro, proprio perché la visione periferica assume un ruolo più importante nella percezione dell’ambiente.

Visione centrale e visione periferica messe a confronto.

151

Dimitry Bayle nel 2009, misurò i tempi di risposta dell’amigdala, l’area del cervello dedita alle emozioni, in particolar modo alla paura. Un’immagine spaventosa se percepita dalla visione centrale causava una reazione dell’amigdala dopo 140-190 millisecondi, mentre dalla visione periferica impiegava solo 80 millisecondi a rispondere.

Riassumendo I visitatori di un sito un sito web, usano principalmente la visione periferica, infatti ne determinano il contenuto dopo una rapida occhiata.

I contenuti del sito devono attirare l’attenzione e comunicare rapidamente i contenuti del sito sia nell’area centrale che in quella più periferica.

Per favorire la concentrazione su un determinato contenuto è necessario evitare elementi disturbanti intorno ad esso.

I risultati ottenuti mostrando questo video provarono che quando si presta attenzione a qualcosa, è facile perdere di vista o farsi sfuggire eventi e cambiamenti avvenuti in contemporanea.

Inoltre Simons è giunto alla conclusione che: «sapere in anticipo che un evento imprevisto possa verificarsi non impedisce di trascurare altri eventi inaspettati. Chi è a conoscenza dello scopo e delle conclusioni dell’esperimento, cioè che si possono perdere eventi ovvi se l’attenzione è focalizzata altrove, potrebbe non accorgersi di altri eventi evidenti in quello stesso contesto, pur sapendo che l’esperimento è condotto appositamente per ingannarli».

Questo fenomeno viene chiamato “Inattentional blindness” o “change blindness” (cecità attenzionale).

■■ I CAMBIAMENTI POSSONO SFUGGIRE AL CAMPO VISIVO Nel 1999 Christopher Chabris and Daniel Simons pubblicarono il video “The invisible ” di cui vedete lo screenshot.

152

Per determinare dove si concentra la vista di un visitatore, esistono strumenti appositi per l’eye-tracking. Sebbene i dati forniti permettano di studiare le modalità di consultazione di un’interfaccia, alcuni particolari importanti vengono trascurati: 1. L’eye tracking permette di capire dove hanno guardato le persone tuttavia non è possibile dedurre precisamente a cosa abbiano prestato attenzione.

2. L’eye tracking analizza solamente il comportamento della visione centrale, tuttavia la ricerca di Larson and Loschky aveva dimostrato che la visione periferica assume un ruolo più importante.

3. Nel 1967 Alfred Yarbus dimostrò che la concentrazione delle

persone viene condizionata dalle domande che vengono poste, per cui è facile alterare accidentalmente i risultati dell’eye-tracking se vengono fornite istruzioni durante l’analisi.

L

e aspettative sulla probabilità che un evento si ripeta, influiscono l’attenzione

Le persone costruiranno un modello mentale inconscio su quanto di frequente accada un evento Per attirare l’attenzione delle persone su eventi che accadono di rado, occorre usare segnali molto evidenti, altrimenti passano inosservati Riassumendo ͽͽ Mai dare per scontato che tutto ciò che si trova su schermo venga visto dall’utente.

Es. quando si aggiorna lo schermo (refresh) e avviene un cambiamento, non è detto che l’utente lo noti. ͽͽ Per attirare maggiormente l’attenzione sfruttare effetti visivi o suoni. ͽͽ L’eye-tracking offre indicazioni utili ma parziali sul comportamento dell’utenza. ͽͽ Perchè una persona dedichi la propria attenzione a qualcosa deve prima percepirla

■■ LE PERSONE IDENTIFICANO GLI OGGETTI RICONOSCENDOVI SCHEMI E MODELLI Il cervello tende a creare schemi e associazioni in base agli elementi percepiti. Per esempio nella figura sottostante è naturale vedere 4 coppie di punti piuttosto che 8 punti individuali.

Il cervello ha una predisposizione a cercare i pattern.

■■ LA TEORIA DEI GEONI E DEL RICONOSCIMENTO DEGLI OGGETTI Irving Biederman nel 1985 formulò la teoria secondo la quale gli oggetti vengono riconosciuti associandoli a un numero limitato di forme primitive, precisamente 24.

Ogni oggetto riconosciuto non è altro che una combinazione di forme geometriche primitive.

La corteccia visiva primaria viene stimolata sia quando osserviamo qualcosa sia quando la immaginiamo soltanto. Tuttavia per immaginare qualcosa vengono spese più energie in quanto non esiste uno stimolo visivo di partenza.

Riassumendo ͽͽ Durante la creazione di un sito, stabilire sempre una gabbia grafica per un posizionamento efficace degli elementi. ͽͽ Disegnare una gabbia grafica significa fruttare la vicinanza degli elementi e gli spazi bianchi per creare uno schema di lettura del sito. ͽͽ Semplifica il più possibile l’aspetto dei pulsanti e di altri elementi interattivi, così da facilitarne e velocizzarne il

153

riconoscimento. ͽͽ Privilegia elementi bidimensionali a quelli 3D, così da semplificarne l’interpretazione e il riconoscimento.

■■ L’importanza del facial alignement Spesso osservando soggetti non molto definiti, come nuvole o rocce ci capita di scorgere dei visi: questo accade Perché una parte del cervello è unicamente dedita al riconoscimento di facce in tutto ciò che viene osservato.

Esistono studi molto approfonditi su questo aspetto della psicologia umana che in inglese viene chiamato Facial Alignement.

Siamo animali sociali e usiamo la faccia per comunicare il nostro stato d’animo, i nostri sentimenti senza nemmeno pensarci. Questo significa che quando vediamo altre persone, istintivamente le guardiamo in faccia per cercare di decifrarne qualche informazione.

Anche seguire lo sguardo 154

delle persone è nella nostra natura; se vediamo della gente guardare con attenzione in un punto, saremo portati a fare lo stesso per cercare di capire cosa stanno fissando.

I visitatori di un sito Web, se non sono autistici, individuano e riconoscono un viso più velocemente di ogni altra cosa.

Una faccia che guarda verso il visitatore ha un forte impatto emotivo, probabilmente proprio perché gli occhi sono la parte più importante di un viso. Se lo sguardo della persona nell’immagine punta verso uno specifico punto della pagina web, il visitatore inconsciamente seguirà la direzione dello sguardo, quasi come se fosse un cartello con indicazione. Questo non presuppone che il navigatore ponga attenzione a quello che sta guardando, in quanto avviene tutto a livello inconscio.

A livello biologico i neuroni specchio sono responsabili di questo comportamento; per approfondire consiglio di consultare le pubblicazioni di Vilayanur Ramachandran un’autorevole ricercatore che ha approfondito lo studio dei neuroni specchio. www.abc.net.au/radionational/ image/5968634-3x2-700x467.jpg I bambini imitano il comportamento dei loro genitori: se la mamma apre la bocca per far mangiare un neonato, è proprio perché sa che cercherà di imitarla. Lo stesso accade inconsciamente anche per il visitatore di un sito web che viene condizionato da ciò che vede su schermo, specialmente se si tratta di persone.

■■ Above the Fold Il termine “above the fold” deriva dal gergo della carta stampata (letteralmente, in un giornale, “sopra alla piega” ossia nella parte alta e più visibile della prima pagina) ed indica una condizione di

L’80% circa di visitatori, pare che tenda a visionare il sito a partire da 550px. L’area tra i 750px e i 1500px viene vista per un tempo tre volte superiore rispetto alla parte alta del sito, con un picco di attenzione a 750px per circa 13 secondi.

Scorrimento della paggina web

d i v i s i tato r i

100%

P ercen t ua l e

posizionamento migliore di un elemento rispetto ad altri.

Nel web un testo, un banner o un messaggio pubblicitario è da considerarsi above the fold se viene visualizzato come primo (o tra i primi) della pagina, o comunque se risulta visibile senza che l’utente debba utilizzare la barra di scorrimento o la rotellina del mouse.

I contenuti posizionati above the fold hanno un’importanza fondamentale nel decretare il successo o l’insuccesso di una pagina web: studi recenti dimostrano che un utente giudica positivamente o meno una pagina web nel giro di tre secondi. Per questo il colpo d’occhio, il primo impatto ricevuto al momento di aprire la pagina è un fattore determinante, a cui si deve dedicare la massima attenzione.

Secondo lo studio condotto da Josh Schwartz, “Scroll behavior across the web”, visibile su Chartbeat, la prima cosa che le persone fanno all’apertura di un sito è scrollare/scorrere verso il basso.

Questo accade perché generalmente in cima si trovano il logo, la barra di navigazione, il campo di ricerca e le pubblicità, accompagnate magari da una finestra che incoraggia a scaricare l’app: nella parte superiore quindi l’utente, non trovando informazioni utili alla sua ricerca, è portato a scorrere verso il basso il sito, prima ancora che abbia finito di caricare.

i visitatori

75%

50%

Molti visitatori scrollano la pagina

prima ancora che venga caricata tutta

25%

0%

■■ COMPORTAMENTO DEI VISITATORI SUL WEB

L a porzione di pagina above the fold viene osservata da quasi tutti

0

750

P i x el

1500

2250

da ll’ inizio dell a pagin a

3k

Da una campione di 25M di utenti tramite chartbeat

■■ IL MITO DEI CAROSELLI Si definiscono caroselli le immagini a scorrimento (image slider) spesso presenti sulla homepage dei siti.

I clienti li amano, tuttavia il verdetto della comunità di designer non è del tutto a favore. Le immagini non ricevono l’attenzione che dovrebbero avere, inoltre influiscono negativamente sulle performance del sito, perciò dovrebbero essere evitati a tutti i costi.

Il più delle volte hanno un aspetto banale: si tratta semplicemente

155

di immagini sovradimensionate, dotate di pulsanti di navigazione piccoli, sono scarsamente visibili e spesso prive di comandi a forma di freccia per lo scorrimento manuale.

■■ IL CERVELLO IMMAGINA PREVALENTEMENTE IN PROSPETTIVA OBLIQUA Nel 1981 Stephen Palmer chiese a diverse persone del mondo di disegnare una tazzina di caffè. La maggior parte dei disegni rappresentano la tazzina da una prospettiva obliqua, che viene quindi definita “Prospettiva Canonica”. Tramite questo tipo di rappresentazione infatti è possibile mostrare più particolari rispetto alle altre assonometrie.

La stessa tazzina se stilizzata con una vista dall’alto diventa difficilmente riconoscibile.

Riassumendo Le persone riconoscono meglio e più velocemente oggetti rappresentati con la “Prospettiva canonica”.

Nella grafica di un sito o di un applicazione è meglio privilegiare icone con disegni in prospettiva obliqua.

156

■■ LE PERSONE ANALIZZANO LO SCHERMO BASANDOSI SULLE ESPERIENZE PASSATE E SULLE PROPRIE ASPETTATIVE Il visitatore cerca tutti gli indizi che possono aiutarlo nell’impresa, come un investigatore a caccia di una qualunque pista.

La consultazione di una pagina web dipende dal bagaglio culturale e dalle abitudini di una persona, quello che viene chiamato anche modello mentale. Tendenzialmente un occidentale è portato a leggere da sinistra verso destra e dall’alto verso il basso, ma questa convenzione tuttavia è non applicabile invece nei paesi orientali.

Gli angoli sono le aree meno soggette ad attenzione poiché non contengono quasi mai le informazioni principali offerte da un sito.

Un visitatore quindi generalmente comincia a guardare un sito partendo da 2:4 della pagina.

I visitatori non badano agli angoli dello schermo Le persone considerano il punto dove iniziano le informazioni significative, in occidente in alto a sinistra.

Riassumendo ͽͽ Inserire le informazioni di maggiore rilevanza nell’area centrale del sito a due terzi dell’altezza. ͽͽ Evitare di inserire elementi importanti agli angoli della pagina ͽͽ Progettare la pagina in modo che i visitatori possano rispettare il proprio ordine di lettura ͽͽ Evitare una gabbia grafica dove l’utente deve saltare da una parte all’altra per cercare le informazioni.

157

158

■■ LE PERSONE CERCANO SUGGERIMENTI SU COME UTILIZZARE UN OGGETTO (AFFORDANCE)

■■ AFFORDANCE SULLO SCHERMO DI UN COMPUTER

Qualche volta capita che oggetti di uso comune, richiedano un approccio di utilizzo differente da quello previsto.

Un esempio possono essere le maniglie di alcune finestre che permettono di regolarne l’apertura in maniere differenti. In questo caso, chi non avesse già avuto esperienza con questo tipo di finestre, utilizzerebbe la maniglia unicamente per spalancare l’anta e non riuscendoci crederebbe che la maniglia fosse rotta. Queste problematiche, spesso cause di seccature, vengono definite “affordances”. L’idea di “affordance” cioè di accessibilità e praticabilità di un oggetto, compare nel libro di James Gibson “Un approccio ecologico alla percezione visiva” del 1979.

Durante la progettazione di un’applicazione o di un sito web occorre domandarsi che cosa spinga un utente a compiere determinate azioni, come premere un pulsante.

Se osserviamo i pulsanti di un telecomando, noteremo che la loro sporgenza, l’ombra lungo i bordi e il materiale da cui sono costituiti, ne suggeriscono l’utilizzo. Riproducendo questi effetti anche nella grafica dei pulsanti di un interfaccia, si ottiene una maggiore affordance, quindi anche un incremento della fruibilità del servizio.

“Con affordance si definisce la qualità fisica di un oggetto che suggerisce a un essere umano le azioni appropriate per manipolarlo...L’aspetto esterno di una caraffa d’acqua - con manico laterale e beccuccio - permette all’utilizzatore di dedurne intuitivamente le funzionalità, anche senza averla mai vista prima...questo concetto non appartiene né all’oggetto stesso né al suo utilizzatore ma si viene a creare dalla relazione che si instaura fra di essi. È, per così dire, una proprietà “distribuita”.

■■ GLI HYPERLINKS e la scomparsa dei significanti A causa dell’ormai diffuso utilizzo di Internet e di programmi, la necessità di alcuni “suggerimenti” grafici, come l’ombreggiatura dei pulsanti, o il colore blu del testo, diventa sempre meno indispensabile, per cui si sta lentamente abbandonando a favore di un aspetto grafico più piacevole.

In molti casi inoltre i “suggerimenti” compaiono solo in seguito a determinate azioni, come i pulsanti che cambiano aspetto solo quando il cursore staziona su di essi.

Occorre prestare attenzione a queste scelte grafiche in quanto non sono applicabili a tutte le piattaforme. Per esempio sui dispositivi dotati di touchscreen, come tablet e smartphone, non essendoci un cursore, i pulsanti che cambiano aspetto “on hover” (cioè quando il cursore è sopra) non possono offrire alcun suggerimento utile all’utente.

RIASSUMENDO ͽͽ Pensa a quali suggerimenti è possibile fornire all’utente per facilitarne l’approccio. ͽͽ Cura l’aspetto grafico cercando di richiamare le caratteristiche principali di oggetti reali, così da renderli più familiari per l’utente. (ombreggiatura sui pulsanti) ͽͽ Presta attenzione a non fonire suggerimenti sbagliati o fuorvianti. ͽͽ Verifica che i suggerimenti forniti siano applicabili a tutte le piattaforme e dispositivi.

■■ la vicinanza tra due elementi ne determina anche la relazione e il legame Vedere due elementi affiancati fa pensare che ci sia una connessione tra di essi. Questo legame si rafforza a seconda dell’ordine di lettura.

Nella figura sottostante, il testo relativo all’immagine è quello al di sotto di essa, tuttavia, essendo abituati a leggere da sinistra verso destra, potremmo credere che il testo della foto sia quello di destra.

Riassumendo ͽͽ Perché immagini e testo stiano assieme occorre posizionarli vicini tra di loro. ͽͽ Prima di utilizzare linee o box per separare elementi differenti tra di loro, cercare di accentuare gli spazi bianchi, così da ridurre il rumore visivo sulla pagina. ͽͽ Riduci lo spazio tra gli elementi che vanno messi assieme e aumentalo invece per separare quelli tra cui non c’è relazione. Sembra un luogo comune, tuttavia viene facilmente trascurato su alcune interfacce.

159

■■ Chromostereopsis La chromostereopsis è una forma di aberrazione cromatica che si verifica quando il rosso viene affiancato graficamente al blu o al verde. A causa di questa illusione ottica, il rosso sembra essere posizionato a un livello superiore come se fosse in rilievo mentre il blu appare di sfondo. Per una maggiore visibilità e leggibilità si consiglia quindi di evitare la chromostereopsis.

Riassumendo Non utilizzare mai il rosso assieme al blu o al verde.

blue RED

■■ Il 9% degli uomini e l’1,5% delle donne sono daltoniche Il daltonismo è una forma di cecità che impedisce di distinguere tra loro colori come il giallo, il verde e il rosso. Dato che i geni legati ai colori sono presenti principalmente nel cromosoma X, questo tipo di cecità è meno diffuso tra le donne.

In fase di progettazione è necessario prestare attenzione ai colori usati e, se possibile, è consigliabile affiancare al colore anche altre forme grafiche.

Per esempio nel caso di una cartina, è preferibile differenziare i tratti non solo nel colore ma anche nello spessore e nell’aspetto (continuo, tratteggiato, punto linea).

Per verificare se un sito web è consultabile anche da persone parzialmente cieche consiglio di visitare: ͽͽ www.vischeck.com ͽͽ www.color-blindness.com ͽͽ GIMP (occorre scaricare il programma di grafica ma dispone di tutti i filtri necessari gratuitamente) Riassumendo Evitare l’utilizzo di rosso, giallo e blu per le parti più importanti del sito o dell’interfaccia.

160

■■ Il significato dei colori varia in base alla cultura Il colore influenza lo stato d’animo delle persone, tuttavia provoca emozioni differenti a seconda del contesto culturale in cui viene inserito.

L’efficacia del condizionamento dipende dalla diffusione del colore: una stanza interamente colorata di azzurro ha un’effetto rilassante in occidente, mentre vedere semplicemente il colore azzurro su uno schermo ha un effetto quasi insignificante sul visitatore.

David McCandless ha realizzato diverse infografiche dove riassume la diversa percezione dei colori nel mondo: www.informationisbeautiful.net/visualizations/colours-in-cultures Tritanopia (daltonismo sul blu)

Protanopia (daltonismo sul rosso)

DAVID MCCANDLESS - informationisbeautiful

161

■■ RICONOSCIBILITÀ E LEGGiBILITÀ DEI CARATTERI

■■ Consistency - Coerenza

Da oltre un secolo ormai sappiamo che i nostri occhi non si muovono fluidamente, ma compiono dei rapidi scatti. Una parola cattura l’attenzione per circa 200-250ms, dopodichè gli occhi saltano alla parola successiva. Questi movimenti sono chiamati saccadi e impiegano circa 20-35ms. La maggior parte di questi scatti procedono in avanti saltando alle 7 alle 9 parole, tuttavia il 10-15% di questi movimenti è regressivo e torna indietro.

Durante una saccade, il lettore è il lettore non vede, tuttavia il movimento è così rapido da non riuscire ad accorgersene.

In molti manuali di design si ripete con insistenza la parola consistency cioè la coerenza. Nella progettazione occorre che tutti gli elementi in ballo siano coordinati tra di loro per rapporto di colori, dimensioni, immagine aziendale, spazi ecc...

I pulsanti nell’immagine sottostante provengono tutti da un unico sito. Non c’è alcuna coerenza tra loro, sembrano provenire da siti differenti, è il chaos...

Comportamento dello sguardo durante la lettura di un testo

162

Nellâ&#x20AC;&#x2122;immagine qui di seguito invece abbiamo due esempi validi di grafica. I pulsanti sono molti meno, e persino gli schemi di colore non hanno piĂš di quattro varianti. In questa maniera il visitatore necessita di minor concentrazione per individuare i contenuti che gli interessano, comprende piĂš rapidamente il contesto del sito e non viene disorientato da eccessive indicazioni.

163

I meccanismi della lettura ■■ LEGGIBILITÀ E COMPRENSIONE SONO DUE COSE DIFFERENTI Siamo in grado di leggere qualunque testo, ma questo non presuppone che siamo in grado di comprenderne il contenuto.

Flesch-Kincaid ideò una formula apposita per calcolare la leggibilità di un testo.

(

numero di parole 0.39 numero di frasi

)

(

sillabe totali + 11.8 + parole totali

)

- 15.59

La scala di misurazione comprende valori compresi tra -3.4 e i 12; maggiore è il valore maggiore è la leggibilità.

Nel 1972, Roberto Vacca e Valerio Franchina ne propongono un adattamento per la lingua italiana.

F = 206 - (0,65 × S) - P F è la leggibilità misurata secondo questi parametri: S è il numero delle sillabe, calcolato su un campione di 100 parole; P il numero medio di parole per frase.

Alta leggibilità F > 60

Media leggibilità 60 > F > 50 Bassa leggibilità F < 50 Sul web sono disponibili anche strumenti per il calcolo rapido della leggibilità di un testo: https://readability-score.com/ 164

■■ LEGGIAMO QUELLO CHE CREDIAMO CI SIA Il cervello anticipa le parole presenti in un testo prima ancora di leggerle. Per questo motivo riusciamo a leggere le parole anche se hanno le lettere scombinate.

Sceodno una rcircea dlel’Uvitrisenà di Cmbairgde non ipromta l’odirne dlele lrteete in una proala, l’uicna csoa che cntoa è che la pimra e l’utlmia ltetrea saino al psoto gusito. Ttute le atlre lrteete dlela poalra psonoso esrsee itinvtere snzea carere prleobmi alla letutra.

Qstueo acdcae pcherè la mtene non lgege ongi lteetra senigolnarmte ma la proala cmoe un ientro qudini il clrveelo è cnouqmue in gdrao di asblsemare le lterete e iernttaprere la ploara crottrea.

Ciò che ricordiamo dalla lettura dipende dal nostro punto di vista

■■ Ciò che ricordiamo dalla lettura dipende dal nostro punto di vista ͽͽ Gli utenti sono lettori attivi. Comprendono e ricordano in base alle proprie esperienze passate e rispetto al punto di vista mantenuto durante la lettura. ͽͽ Non presumere che le persone ricordino informazioni specifiche di ciò che leggono. ͽͽ Provide a meaningful title or headline. It’s one of the most important things you can do. ͽͽ Confeziona il testo in relazione al target di riferimento,

utilizzando paragrafi brevi e parole semplici in modo che sia accessibile a un pubblico più vasto possibile.

■■ L’aspetto di un font facilita il riconoscimento dei caratteri e la lettura In tutti i campi del design perdura il dibattito se sia meglio utilizzare font serif o sans-serif per una lettura più agevole dei testi.

Diversi studi dimostrano che la scelta non è determinata tanto da queste categorie quanto dall’aspetto grafico più o meno complesso del font.

F

ont troppo complessi o elaborati compromettono la lettura del brano e ne alterano la comprensione

Nel 2008 i dottori Hyunjin Song e Norbert Schwarz fornirono le istruzioni per l’esecuzione di un esercizio giornaliero, in due font differenti, uno più semplice, simile all’Arial e uno serif simile a un Brush Sript. Chi aveva ricevuto le istruzioni in Brush Script aveva previsto un tempo di esecuzione dell’esercizio, proprio perché il cervello era stato condizionato anche dalla difficoltà della lettura del testo.

Font semplice ± 8min Le lettere di queste immagini sono facilmente identificabili sebbene siano molto differenti tra di loro.

I designer usano i font per evocare uno stato d’animo, un marchio, un’associazione o un determinato periodo storico.

Font complesso ± 15min

Riassumendo ͽͽ Font serif e sans serif sono ugualmente leggibili ͽͽ Font decorativi o insoliti possono ostacolare il riconoscimento e lettura delle parole. ͽͽ Se le persone incontrano difficoltà nella lettura di un testo, crederanno che persino il contenuto sia complesso, per cui potrebbe non essere alla loro altezza.

165

■■ Le dimensioni del font contano Indipendetemente dall’età del lettore e dalle sue diottrie, le dimensione del font è importante a rendere un testo più leggibile.

Point Size altezza totale lettere minuscole

Ascendente X-Height Altezza occhio Discendente

Ciò che maggiormente conta nella dimensione di un testo è l’altezza dell’occhio, in inglese X-height cioè l’altezza della lettera più piccola. Un font può apparire più grande e più piccolo indipendetemente dall’altezza totale delle sue lettere.

I font Tahoma e Verdana sono stati progettati proprio per facilitare la lettura su schermo.

I font di questa illustrazione hanno la stessa identica dimensione, tuttavia qualcuno appare più grande degli altri per via della differente altezza dell’occhio di ciascuna famiglia di font. Questo è un Arial.

I font di questa illustrazione hanno la stessa identica dimensione, tuttavia qualcuno appare più grande degli altri per via della differente altezza dell’occhio di ciascuna famiglia di font. Questo è un Times New Roman.

I font di questa illustrazione hanno la stessa identica dimensione, tuttavia qualcuno appare più grande degli altri per via della differente altezza dell’occhio di ciascuna famiglia di font. Questo è un Verdana.

I font di questa illustrazione hanno la stessa identica dimensione, tuttavia qualcuno appare più grande degli altri per via della differente altezza dell’occhio di ciascuna famiglia di font. Questo è un Tahoma.

166

Riassumendo ͽͽ Utilizza una dimensione del testo adatta a tutti gli utenti. ͽͽ Favorisci font con una altezza dell’occhio elevata, così da facilitarne la lettura.

■■ LEGGERE Sullo schermo di UN COMPUTER è più difficile che leggere su carta Gli schermi dei computer si comportano in modo completamente differente dagli Ebook Reader e dalla carta.

Lo schermo di un computer deve aggiornare l’immagine con una certa frequenza ed emette luce, al contrario la carta elettronica e in cellulosa riflettono la luce e le immagini su di esse sono stabili.

Per agevolare la lettura è necessario favorire il contrasto tra testo e sfondo, favorendo il font scuri su sfondi chiari.

Riassumendo ͽͽ Utilizza un elevato punto tipografico così da facilitare la lettura su schermo e non affaticare l’occhio del lettore.. ͽͽ Suddividi il testo in più parti utilizzando elenchi puntati, brevi paragrafi e immagini ͽͽ Favorisci il contrasto tra testo e sfondo.

■■ Un testo distribuito su colonne è più lungo da leggere ma viene preferito dal lettore.

Il numero di parole presenti a ogni riga influiscono sulla lettura di un testo. Paragrafi con righe lunghe, rendono la lettura più rapida (interferiscono meno col movimento delle saccadi) ma hanno una scarsa attrattiva.

Mary Dyson nel 2004 condusse uno studio per determinare la lunghezza di riga ottimale e giunse alla conclusione che la “line lenght” idonea è di 100 caratteri tuttavia un lettore preferisce paragrafi brevi di 45-72 caratteri circa.

Un testo distribuito su più colonne richiede maggior tempo per essere letto, ma ha un’aspetto estetico migliore e viene preferito a testi distribuiti su una singola riga.

■■ come scrivere un messaggio di errore Assumendo il fatto che sia meglio ridurre la possibilità di errore al minimo, è importante informare l’utente se commette uno sbaglio, utilizzando comunicazioni organizzate come segue: ͽͽ Dice alla persona che cosa ha fatto ͽͽ Spiega il problema verificatosi ͽͽ Fornisce istruzioni su come correggere il problema ͽͽ È scritto con un linguaggio semplice e parla in prima persona rivolgendosi direttamente all’interlocutore. ͽͽ Mostra degli esempi.

Di seguito un esempio di un messaggio di errore incompleto: #402: Before the invoice can be paid it is necessary that the invoice payment be later than the invoice create date.

Say instead, “You entered an invoice payment date that is earlier than the invoice create date. Check the dates and reenter so that the invoice payment date is after the invoice create date.

167

■■ memoria Per memorizzare una persona deve fare uno sforzo non indifferente, occorre quindi venirgli in contro il più possibile, in modo da ridurre al minimo la fatica necessaria a utilizzare un determinato servizio.

La psicologia distingue due tipi di memoria: ͽͽ Memoria Prospettica: ricordarsi di fare qualcosa ͽͽ Memoria del Futuro: capacità di fare programmi e prefigurare gli scenari a venire Per aiutarci a ricordare spesso utilizziamo blocco note, diari, postit ecc... I promemoria possono essere distinti in due categorie: ͽͽ Segnale: sapere che devo ricordarmi qualcosa ͽͽ Messaggio: ricordare l’informazione stessa Es. Il nodo al fazzoletto fornisce solo il segnale, ma non dice cosa dobbiamo ricordare.

Memoria collettiva Nel 1985 Daniel Wegner espone la teoria della memoria collettiva chiamata anche «memoria transattiva» ottenuta cioè tramite il dialogo di due o più persone.

Le interazioni che si creano all’interno di una comunità, connettono tra di loro frammenti di memoria che sommati formano la memoria collettiva.

Quando la rete sociale si allarga dai nostri simili alla tecnologia si parla di «cybermente».

168

■■ Non ostacolare la memoria a breve termine Perché il cervello abbia la possibilità di immagazzinare informazioni acquisite recentemente, occorre non sottoporlo a ulteriori stimoli così da favorirne la concentrazione.

S

chematizzare le informazioni favorisce la memorizzazione

■■ Le persone ricordano circa 4 cose alla volta Baddeley nel 1986 e Nelson Cowan nel 2001 condussero una serie di studi sulla memoria umana sulla processazione delle informazioni. Le conclusioni dimostrarono che il cervello propende per la memorizzazione di 4 informazioni per volta.

I siti mono pagina risultano più efficaci infatti, proprio perché tendono a suddividere le informazioni in blocchi di 4 elementi.

Per lo stesso motivo, negli stati uniti i numeri di telefono sono generalmente scritti in blocchi da 3 cifre: xxx-xxx-xxxx.

■■ Intuire è più facile che ricordare Se viene chiesto di ricordare un elenco di parole legate a un determinato contesto, è facile che assieme alle parole ricordate, vengano incluse anche parole non esistenti nell’elenco originario sebbene facciano parte dello stesso contesto.

Per esempio le parole seguenti sono tutte legate all’ufficio, per cui mentalmente saremo portati a ricordare elementi legati a questo tipo di ambiente di lavoro.

“Incontro, lavoro, presentazione, ufficio, scadenza, computer, carta, personale, penna, lavagna, telefono, sedia, mensola, tavolo, segretaria.”

Le parole elencate è come se facessero parte dello schema “Ufficio”.

La memoria è più efficiente quando può ragionare per schemi,

M

emorizzare oggetti concreti (tavolo, montagna...) è più facile che ricordare parole astratte (giustizia, democrazia...).

Per facilitare la consultazione di un sito occorre privilegiare l’utilizzo di icone e di una comunicazione per immagini, in quanto aiuta a concretizzare i concetti più astratti e favorisce l’uso della memoria visiva.

■■ Le persone ricostruiscono i ricordi ogni volta che li rievocano Se si sottopone a un questionario un cliente, occorre formulare le domande con le parole giuste in quanto vanno a condizionare i ricordi della persona intervistata.

Elizabeth Loftus nel 1974 dimostrò che in base alle parole utilizzate per chiedere informazioni su un certo evento, le risposte potevano variare sensibilmente.

“In un esperimento i partecipanti hanno assistito ad un incidente automobilistico simulato, avvenuto ad un incrocio con un segnale di stop; ad alcuni dei partecipanti venne poi detto che era il segnale di dare precedenza. In seguito i soggetti informati della presenza del segnale, dichiararono di essere certi di aver assistito ad un incidente avvenuto ad un incrocio nel quale si doveva dare precedenza; al contrario, il resto del gruppo aveva un ricordo molto più esatto di quanto visto.”

■■ dimenticare ha i suoi benefici Nel 1886, Hermann Ebbinghaus creò una formula per mostrare la degradazione della memoria:

R = e (−t/S) R = ritenzione della memoria S = forza della memoria t = tempo

169

■■ Anche i ricordi più vividi contengono errori

■■ Il cervello assimila più facilmente informazioni fornite a piccoli bocconi

I ricordi correlati a un evento significativo ed emozionante generalmente sono molto vividi e persistenti, tuttavia contengono molti errori e alterazioni.

Questo tipo di memoria viene definito “Flashbulb Memory” che può essere tradotto come memoria fotografica: condizionando il soggetto emotivamente, stimola l’amigdala che, essendo situata vicino all’ippocampo, favorisce la formazione di ricordi a lungo termine.

Dopo eventi dal forte impatto emotivo, come l’esplosione dello shuttle Challenger o il crollo delle Torri Gemelle, furono condotti studi sulla memoria delle persone che hanno assistito a tali eventi e nel giro di pochi giorni, i ricordi assumevano già alterazioni e incongruenze.

Un errore comunemente compiuto dai designer è quello di voler fornire troppe informazioni contemporaneamente, Per una migliore gestione dei contenuti si applica la tecnica della “Progressive disclosure”, analogo alla “Piramide inversa” del giornalismo e all’approccio a spirale degli insegnanti.

Informazioni più significative

Who? What? When? Where? Why? How? Chi? Che cosa? Quando? Dove? Perché? Come?

Dettagli Importanti Altre informazioni generiche

Questa tecnica consiste nel fornire poche informazioni progressivamente, in modo da non assalire l’utente con un unico contenuto di lunga e difficile comprensione. Per esempio nei blog in home page vengono visualizzati solo gli excerpt dei singoli articoli, che possono essere consultati solo dopo aver premuto su pulsanti come “...continua”, “...leggi”, “learn more”.

170

re), visuale (relativa all’osservazione dell’interfaccia presente sullo schermo) e motorie (interazione col sito tramite mouse e tastiera).

Questo genere di azioni in inglese vengono definiti “loads” che potremmo tradurre come “sforzi”; in sostanza creando un sito sottoponiamo i visitatori a compiere 3 sforzi differenti: cognitivi, visuali e motori.

Ciascuno sforzo richiede un livello di concentrazione differente.

Uno sforzo cognitivo è nettamente più impegnativo di quello visuale e motorio, in quanto non ha alcuno stimolo esterno a cui appoggiarsi. In ordine di fatica potremmo disporre i “loads” in questo ordine.

1. Cognitivo 2. Visuale 3. Motorio

■■ ProgressiVE disclosure e numero di click Sebbene le regole di progettazione di un sito invitino a ridurre al minimo i numeri di click necessari a ottenere le informazioni cercate, la Progressive Disclosure contraddice questa teoria, perché porta l’utente a effettuare diversi click per accedere a contenuti sempre più completi.

Tuttavia questa interazione permette all’utente di mantenere una partecipazione attiva.

■■ Alcuni processi mentali sono più impegnativi di altri

■■ BARATTARE CON GLI UTENTI Quando si progettano un sito web o un’applicazione si effettua una sorta di baratto con il visitatore. Se si spingo l’utente a effettuare due click in più per accedere a un determinato contenuto, deve essere fatto per facilitare la consultazione del sito così da ridurre i processi cognitivi necessari ad accedere alle informazioni interessate.

Ogni azione deve essere giustificata, in modo che l’utente riceva quello che si aspetta. Il numero di click deve essere ridotti al minor numero possibile, ma se permettono una consultazione più ordinata e agevole, l’utente non si annoierà ma anzi ne trarrà soddisfazione, in quanto la sua ricerca è guidata e dà i risultati attesi.

Quando accediamo a un servizio tramite un sito web, il nostro cervello deve concentrare mantenere l’attenzione su determinati passaggi e azioni. Principalmente, durante la visita di un sito si compiono 3 tipi di azioni: cognitiva (legata al ricordo e al ragiona-

171

■■ LA legge di fitt e lo sforzo motorio Sebbene gli sforzi motori siano quelli meno impegnativi, occorre comunque cercare di ridurli al minimo. Tramite la formula di Fitt è possibile determinare la dimensione di pulsante ed anche la sua posizione per renderlo agevolmente accessibile.

quella distanza tra i pulsanti che consente un margine di errore, senza che l’utente rischi attivare opzioni indesiderate.

■■ In certi casi può essere necessario chiedere più attenzione Per realizzare un’interfaccia ergonomica, è necessario ridurre i “load” al minimo, ma nel caso in cui si sviluppasse un gioco, in certi casi invece è necessario rendere la sfida più ardua e avvincente, quindi si spinge l’utente a compiere sforzi maggiori.

■■ La mente si distrae il 30% delle volte

T = a + b log2(2D / W) T = tempo necessario a completare l’azione a, b = costanti relative alla velocità del dispositivo D = distanza tra il punto di partenza e il centro dell’ obiettivo W = lunghezza dell’obiettivo, misurata su un asse parallelo a quello di movimento

Osservando la formula si comprende la relazione esistente tra velocità, accuratezza, distanza e dimensione.

In sostanza la legge di Fitt ci dice che se un utente deve cliccare un pulsante piccolo in basso a destra, partendo con il cursore dall’angolo opposto dello schermo, molto probabilmente mancherà il bersaglio al primo tentativo.

Proprio per questo motivo vengono create le “aree di buffer” cioè 172

Spesso capita che durante lo svolgimento di un compito ci si metta a pensare a qualcosa di completamente scollegato da quello che stiamo facendo. Sebbene questo fenomeno assomigli a ciò che accade quando si sogna ad occhi aperti, si distingue in quanto non c’è relazione tra l’azione compiuta e il pensiero.

Una mente distratta è indubbiamente un’ostacolo allo svolgimento lineare di un compito, tuttavia la capacità di riuscire a passare rapidamente da un pensiero all’altro, funge da Multitasking che crea connessioni favorevoli alla creatività e alla ricerca di soluzioni ai problemi.

Riassumendo ͽͽ Le persone si concentrano su di un compito solo per un tempo limitato, il più delle volte divagano. ͽͽ Per sfruttare la propensione della mente a divagare, utilizza gli “hyperlink” così da permettere all’utente di saltare da un topic all’altro agevolmente. La gente ama navigare sul Web proprio perché permette di vagare con la mente molto facilmente ͽͽ Fai in modo che ci sia sempre la possibilità di tornare al

punto di partenza della visita di un sito, così che per gli utenti sia facile tornare al luogo di origine della navigazione.

■■ In media una persona riesce a rimanere attenta dieci minuti In rete si sono diffusi numerosi video guide (tutorial), in media la durata è di dieci minuti, proprio perché oltre questo limite la soglia dell’attenzione di una persona cala drasticamente.

■■ L’ATTENZIONE RENDE SELETTIVI E SI CONCENTRA SU UN ELEMENTO ALLA VOLTA Le persone filtrano le informazioni e si dedicano solo a questioni importanti o legate a i propri interessi.

Esistono dei contenuti che attirano particolarmente l’attenzione: ͽͽ SITUAZIONI DI Pericolo (Es. Titoli dei giornali) ͽͽ cibo ͽͽ sesso ͽͽ ELEMENTI IN movimento (Es. Banner o gif) ͽͽ facce (abbiamo visto come il cervello è propenso a cercare visi e a seguire gli sguardi) ͽͽ storie ͽͽ Suoni (Es. un video che parte automaticamente su una pagina web può attira l’attenzione ma può anche infastidire la navigazione)

■■ UN’AZIONE RIPETITIVA E CONOSCIUTA, NON RICHIEDE PARTICOLARE ATTENZIONE ͽͽ Consenti agli utenti di correggere o annullare le azioni compiute ͽͽ Permetti di effettuare azioni ripetitive con pochi click ͽͽ Semplifica azioni e sequenze di azioni in modo da facilitarne e velocizzarne l’esecuzione e la ripetizione.

■■ l’uomo pensa basandosi su schemi mentali cioè, modelli semplificati della realtà Il modello mentale di una persona, è uno strumento necessario all’interpretazione della realtà; essendo costruito sull’esperienze passate di una persona, è molto personale e differisce di soggetto in soggetto.

L’uomo ha bisogno degli schemi mentali per adattarsi il meglio possibile agli eventi che si trova a vivere, così da riuscire a prevederne anche l’evoluzione.

Nel campo del design una persona che non ha mai letto un libro elettronico, può immaginare come possa essere l’esperienza di leggerlo, tuttavia non avrà mai un’idea reale di come funzioni finché non entrerà in possesso di un Ebook Reader.

■■ Le persone interagiscono con i modelli concettuali La differenza tra modello mentale e modello concettuale è che il primo costituisce una rappresentazione immaginaria mentre il secondo rappresenta la realtà effettiva.

Se non abbiamo mai usato un ebook reader, possiamo solo imma-

173

ginare come funzioni, per cui ci appoggiamo al nostro modello mentale. Nell’istante in cui leggiamo un libro elettronico, stiamo interagendo col modello concettuale cioè con l’interfaccia studiata per il suo utilizzo.

Come rendere accessibili prodotti completamente innovativi?

Se un prodotto è innovativo e introduce funzioni o aspetti mai incontrati prima, sarebbe insensato privarlo di questi aspetti per renderlo più accessibile; se ancora non esiste un modello mentale chiaro di un determinato prodotto, l’unico modo per avvicinare l’utenza al modello concettuale è utilizzando istruzioni, manuali d’uso o video guide.

Formando l’utenza con materiale didattico è possibile plasmarne il modello mentale adattandolo a quello concettuale del prodotto.

■■ Le informazioni vengono accolte più efficacemente se postE sotto forma di storia Perché un prodotto di design venga utilizzato al meglio occorre che il modello concettuale del progetto e il modello mentale del target combacino il più possibile. In caso contrario il prodotto risulterà difficile da usare e di scarso interesse per l’utente.

Questo problema si verifica frequentemente nei team di progettisti dove lavorano unicamente programmatori e non grafici. In tal caso il modello concettuale finirà per combaciare solo al modello mentale di altri programmatori, limitando drasticamente l’utenza.

NO! Non si usa in quella maniera!

174

Il modello base di una storia è diviso in: prologo, conflitto ed epilogo.

All’inizio vengono introdotti i personaggi e la situazione che stanno vivendo. Nella parte centrale i personaggi incontrano un ostacolo da superare, che, dopo un climax di vicende, verrà poi vinto nella parte finale della storia.

Trame comuni Esistono miliardi di film e libri tuttavia è possibile individuare dei temi riccorenti nelle storie raccontate: Il lungo viaggio

L'inganno

Vendetta

Fede

Amore

Caduta in disgrazia

Una battaglia epica

Sacrificio

L'invecchiamento

Mistero

■■ Le storie comportano una causazione Secondo il processo narrativo cronologico, ogni storia è caratterizzata da una serie di eventi legati da un principio di causa effetto, anche se questo non è del tutto evidente.

Un esempio chiaro è presente nel libro di Christopher Chabris and Daniel Simons “The Invisible Gorilla” (2010).

Proviamo a leggere questi due paragrafi: 1. Joey è stato preso a pugni dal fratello maggiore. Il giorno successivo era ricoperto di bolli.

2. La mamma di Joey è impazzita e si è arrabbiata furiosamente con lui. Il giorno dopo il suo corpo era ricoperto di lividi.

Il primo paragrafo è piuttosto chiaro, Joey viene picchiato dal fratello quindi il giorno dopo ha diversi lividi sul corpo. Il secondo passaggio è meno chiaro e molto probabilmente porterà il lettore a rileggere la sequenza dei fatti, in quanto non è chiaro perché Joey sia ricoperto anche dopo la sgridata della madre.

Istintivamente viene da pensare che anche la madre abbia picchiato Joey per rimproverarlo, tuttavia questo particolare non è presente nella storia.

Le persone sono portate naturalmente a cercare o addirittura creare un principio di causa ed effetto per dare un senso logico agli eventi.

■■ Le storie sono importanti in tutti gli ambiti della comunicazione Quando si lavora con clienti istituzionali, che richiedono una certa formalità nell’immagine dell’azienda, si è portati a credere che raccontare una storia non si addica a questo tipo di target.

Questo non è vero, perché esistono storie adatte a ogni situazione e cliente.

Nel caso di un sito per un ospedale o è possibile raccontare la storia

di un paziente, valorizzando l’efficacia e il corretto funzionamento dei reparti dell’ospedale.

Raccontando una storia si crea un collegamento tra gli aspetti etico-emotivi e quelli pragmatico-tecnici, inoltre può essere costruita su fatti realmente accaduti quindi avvicina l’utente alla realtà aziendale presa in esame.

I

mparare dagli esempi è più facile

Riassumendo ͽͽ Le storie sono un modo naturale e da sempre utilizzato per trasmettere informazioni ͽͽ Usa una storia per indurre le persone a creare un principio di causa ed effetto ͽͽ Le storie non sono fatte solo per intrattenere. Indipendentemente dal messaggio che si vuole trasmettere, una storia lo rendereà di facile comprensione, interessante e facile da ricordare.

■■ Le scene pastorali favoriscono il “ripristino dell’attenzione” Mark Berman (2008) basandosi sugli studi di Roger Ulrich (1984) dimostrò che pazienti ricoverati in stanze con vista sulla natura, avevano un bisogno inferiore di antidolorifici e guarivano prima rispetto a pazienti dislocati in stanze in muratura senza panorama.

Peter Kahn (2009) fece lavorare degli impiegati in tre uffici differenti. Il primo era asettico, privo di vista sull’esterno, il secondo presentava uno schermo con video di paesaggi naturali e il terzo invece aveva proprio una finestra con vista sulla natura.

Gli impiegati del primo e del secondo ufficio avevano un battito

175

cardiaco simile, tuttavia i secondi si sentivano meglio per via delle immagini su schermo. Nel terzo caso gli impiegati oltre che sentirsi meglio, avevano un ritmo cardiaco differente dagli altri soggetti.

■■ La propensione a mentire dipende dal mezzo di comunicazione usato La teoria del disimpegno sociale (moral disengagement) di Albert Bandura, uno psicologo sociale della Stanford University, ha ipotizzato che:

l

e persone diventano scorrette in proporzione alla distanza che le separa dalle conseguenze delle loro azioni

Egli ha definito questo comportamento “moral disengagement” (Bandura,1999). È più facile infatti che una persona menta scrivendo via e-mail piuttosto che su una lettera scritta a mano.

■■ Le persone amano classificare Quando si progetta un sito web occorre organizzare le informazioni in modo schematico, così che la sitemap sia il più semplice e ordinata possibile e i contenuti creino dei collegamenti logici, rapidi e di facile comprensione.

Il visitatore, nell’istante in cui entra in un sito, è portato a cercare termini familiari legati al tema del sito. Per esempio su un sito legato all’arte culinaria Indiana cercherà termini inerenti questo argomento come “ricette, ingredienti, spezie, curcuma, chef ecc...)

Se le informazioni fornite non sono divise in categorie e non seguono una gerarchia, l’utente cercherà di farsela da sé, tuttavia questo comporta un maggiore sforzo durante l’interazione che in176

tacca l’ergonomia del sito.

Come spiegato nel capitolo n. 20, il cervello è ottimizzato per elaborare informazioni organizzate in gruppi di 4 segmenti, quindi è consigliabile classificare i contenuti seguendo questa struttura.

■■ Le persone sono più felici se hanno qualcosa di cui occuparsi Immaginiamo di arrivare in aeroporto e di dover ritirare due bagagli.

Nel primo caso ipotizziamo di dover fare 10min di strada e di dover attendere 2min per ritirare il bagaglio.

Nel secondo caso in vece la strada da percorrere è più breve, sono sufficienti 2min, tuttavia dobbiamo aspettare 10min per ricevere il bagaglio.

Sebbene abbiamo impiegato 12min in entrambi i casi per ritirare i bagagli, nel secondo caso saremmo più impazienti perché per 10min non abbiamo nulla da fare se non aspettare.

Riassumendo ͽͽ Le persone detestano aspettare ͽͽ Piuttosto che aspettare gli utenti preferiscono dover svolgere un’attività nell’attesa, purché sia proficua. . ͽͽ People who are busy are happier. ͽͽ Se il sito richiede dei tempi di attesa/caricamente è bene trovare qualcosa di interessante da far fare ai visitatori nel frattempo.

Quando si ha un elevato livello di concentrazione, durante l’esecuzione di un determinato compito, si raggiunge uno stato di flusso (flow-state), una sorta di trance durante la quale l’individuo riesce a dare il meglio di sé senza distrarsi.

Secondo gli studi del dottor Mihaly Csikszentmihalyi alcuni dei presupposti per raggiungere uno stato di flusso sono: ͽͽ Ridurre al minimo le distrazioni ͽͽ Stabilire un obiettivo chiaro e accessibile ͽͽ Gli ostacoli da superare per raggiungere l’obiettivo devono mettere in gioco la persona impegnata, senza però comportare difficoltà troppo difficili da superare, altrimenti finirà per demordere. ͽͽ Ricevere feedback (risposte) costanti sui propri progressi.

Una persona in costante aggiornamento sui progressi conseguiti, sarà più motivata a perseguire gli sforzi. ͽͽ Avere il controllo della situazione ͽͽ Essere rilassati e sentirsi al sicuro

elevata

Eccitazione Ansia

Difficoltà sfida

■■ Flow-state

bassa

Flow Preoccupazione Controllo Apatia Indifferenza

Noia

Capacità

Rilassatezza

elevata

Il tempo durante uno stato di flusso tende a velocizzarsi o a rallentare a seconda della persona coinvolta Il flow state è piacevole ma è completamente soggettivo e ogni individuo lo raggiunge svolgendo un’attività differente; è presente in tutte le culture ed è più difficile da acquisire in caso di problemi come la schizofrenia.

La teoria del flow-state evidenzia tre ulteriori aspetti del comportamento umano: ͽͽ Autonomia e indipendenza motivano le persone ͽͽ Le persone sono più motivate a competere se i concorrenti sono pochi ͽͽ Lo stress riduce la produttività ͽͽ Le persone adoperano le scorciatoie solo se sono facili da utilizzare

177

Compito semplice Rendimento Performance

Compito complesso

In entrambe le tessere i box da timbrare per ottenere lo sconto sono 10, tuttavia la seconda avrebbe stimolerebbe maggiormente l’acquirente a fare ulteriori acquisti perché gli farebbe credere di essere a uno stadio avanzato per il raggiungimento del suo obiettivo.

Stress Arousal

Legge di Yerkes-Dodson

■■ le persone sono più motivate se si avvicinano a un obiettivo da raggiungere Nel 1934 Clark Hull dimostrò che alcuni topi messi in un labirinto, trovavano l’uscita più in fretta se in fondo al percorso veniva messo del cibo.

Ran Kivetz dimostrò che lo stesso concetto è applicabile con l’uomo. Gli elemosinari per esempio non espongono le ciotole per i soldi vuote, ma sovente le riempiono già con qualche moneta.

Un altro esempio sono quelle tessere sconto utilizzate presso alcuni negozi, sulle quali si aggiunge un timbro a ogni acquisto fino a totalizzarne un certo numero.

Analizziamo i due casi: TESSERA 1 – contiene 10 box vuoti, una volta timbrati tutti l’acquirente può usufruire di uno sconto TESSERA 2 – contiene 12 box, di cui 2 vengono timbrati al primo acquisto.

178

Per un breve periodo Dropbox offriva spazio aggiuntivo per chi raggiungeva alcuni obiettivi, anche semplici come condividere una cartella, aggiungere dei file o invitare degli amici a registrarsi al sito di Dropbox. In questa maniera si ottenevano e si concedevano dei vantaggi, tramite un sistema impostato come un gioco.

■■ Il potere della premiazione La concessione di premi permette di avere un maggior controllo sulle persone e sul loro comportamento. Se una persona sa che verrà premiata, ogni volta che raggiungerà un determinato obiettivo, cercherà con determinazione di portare a termine il proprio compito il maggior numero di volte. ͽͽ Questa logica è stata applicata per esempio in Germania per la raccolta differenziata delle bottiglie. Se restituisco una bottiglia vuota al negozio dove l’ho acquistata, mi verrà restituito lo Pfand cioè il costo dell’involucro che avevo inizialmente pagato. Non a caso una delle attività più frequenti dei senza tetto è ritirare le bottiglie dai cestini della spazzatura. ͽͽ Un’altro esempio sono le Slot-Machine. Il giocatore sa che verrà premiato; non sa quando però è consapevole che dopo un certo numero di tentativi, riceverà un premio in denaro.

tempo costante. ͽͽ Fixed ratio: il premio viene concesso al raggiungimento di un’obiettivo o al compimento di una determinata azione.

L’azione da compiere è sempre la stessa.

Es: quando il topolino schiaccia il bottone tre volte, gli viene dato un bocconcino. ͽͽ Variable ratio: il premio viene concesso al raggiungimento di un’obiettivo o al compimento di una determinata azione.

L’azione da compiere varia ogni volta Es: quando il topolino per ottenere il bocconcino deve schiacciare un bottone. Il numero di pressioni per ottenere il premio però cambia ogni volta.

Sostanzialmente esistono due fattori che determinano il comportamento di un persona in relazione al premio. ͽͽ Ratio - cioè il numero di volte che un’azione deve essere compiuta per ottenere il premio ͽͽ Interval - l’intervallo di tempo che bisogna aspettare per ricevere il premio Le relazioni che si vengono a creare tra Ratio, Interval e Premio sono quattro: ͽͽ Fixed interval: il premio viene concesso secondo un intervallo di tempo regolare. Ogni X secondi si consegna il premio. ͽͽ Variable interval: il premio viene concesso dopo un po’ di tempo. Gli intervalli sono variabili quindi non seguono un

Come è possibile osservare dal grafico il “Variable Ratio” induce a un’attività frenetica (number of responses): il soggetto coinvolto sa che deve compiere una determinata azione per essere premiato, ma non sa quante volte deve farlo, quindi insiste ininterrottamente (slot machine). Nel caso del “Fixed Interval” il soggetto sa che deve aspettare X secondi per essere premiato quindi si limita ad aspettare.

179

■■ Eventi inaspettati spingono a cercare ulteriormente Quando il computer emette un suono a noi sconosciuto, la prima cosa che facciamo è cercare di capire cosa l’ha causato.

Un richiamo genera nelle persone un riflesso pavloniano: un suono è sufficiente a stimolare e ad attirare l’attenzione.

Quando il suono viene associato alla sua causa, ogni volta che viene udito, provoca una reazione precisa nell’utente, . ͽͽ Se sentiamo il suono di ricezione di un messaggio sul cellulare ci apprestiamo a prendere in mano il dispositivo per consultare il messaggio ricevuto. ͽͽ Se un cane associa al suono del campanello l’ora del pasto, tutte le volte che udirà il suono comincerà a fare le feste.

■■ LA MOTIVAZIONE di una persona è maggiore se non c’è l’aspettativa per una ricompensa Mark Lepper, David Greene, e Richard Nisbett nel 1973 dimostrarono che un gruppo di bambini era maggiormente invogliato a disegnare se non era messo a conoscenza di una ricompensa finale.

Le persone sono inconsciamente motivate La capacità di una persona di dare precedenza al dovere piuttosto che al piacere è presente fin dalla tenera età.

Una ricerca di Ruud Custers and Henk Aarts nel 2010 dimostrò che l’inconscio delle persone determina un’obiettivo da raggiungere prima ancora che queste ne siano coscienti. Per questo motivo diverse multinazionali sfruttano messaggi subliminali per condizionare la volontà delle persone.

Promettere compensi in denaro rilascia dopamina Brian Knutson nel 2001 ha dimostrato che la promessa di un compenso in denaro causa un rilascio di dopamina allo stesso modo di 180

cocaina, tabacco e qualsiasi altra sostanza che causa dipendenza.

Quando viene rilasciata dopamina, si è più propensi a compiere azioni pericolose o scorrette.

Social network come Facebook hanno dimostrato che bastano semplicemente i “Like” per condizionare le persone e indurle a pubblicare ossessivamente contenuti, per non parlare di altri servizi social come TSū dove a ogni post corrisponde un compenso in denaro...sebbene il premio di pochi centesimi, la qualità dei post spesso scadente.

L

a produzione di dopamina crea dipendenza nelle persone. Un buon design è l’equivalente di una droga, motivo per cui il progettista deve farne un uso responsabile per il bene della comunità.

■■ Progetta siti web per un rapido esame, non per la lettura Facendo un raffronto tra le pagine web di seguito, è possibile capire da subito quali siano più facilmente consultabili e quali risultino più ostiche.

Siti web strutturati in quelli mostrati si stanno estinguendo, ma sono degli ottimi esempi per mostrare quali siano le caratteristiche essenziali facilitare la consultazione dei contenuti.

Sono stati scelti dei siti istituzionali in quanto difficilmente riescono ad avere un aspetto accattivante. Per di più sono tutti siti governativi americani, tanto per sfatare il mito che il webdesign migliore si fa solo oltre oceano.

Un bravo designer deve saper rendere soddisfacente e di facile consultazione qualunque sito, anche se si tratta di pompe funebri o conventi per suore.

181

Logo - l’immagine di una qualsiasi organizzazione non può funzionare senza un logo. Tutti i siti presentati giustamente presentano il proprio logo nell’area superiore della homepage, tuttavia non sono sempre visibili e appariscenti: il sito 3 sembra quasi nascondere il proprio logo sul blu di sfondo, inoltre è graficamente povero e il font serif usato è molto comune e poco caratterizzante. Al contrario il sito 4 pone il proprio logo al centro, con un rosso acceso che contrasta sia con lo sfondo che con la rappresentazione grafica del texas in esso contenuto. Il sito 1 come il 3, pone il logo su uno sfondo colorato e ricco di immagini, tuttavia riesce a distinguersi grazie al font bizzarro e alla rappresentazione grafica dello stato.

3

Contrasti - il contrasto dei colori viene sfruttato per distinguere le varie aree del sito. Nell’immagine 2 ci sono due menù, uno verde in alto e uno blu laterale. L’area delle news è su sfondo bianco distinguendosi dal resto del sito, che pur contenendo troppo testo distingue le proprie componenti. Gli esempi 3 e 4 svolgono un lavoro migliore in generale, in quanto lo sfondo è prevalentemente bianco, aumentando il contrasto con le aree di interesse.

Colori - siti come 1 e 3 hanno puntato su pochi colori in modo da creare un’immagine semplice e definita. L’1 sfrutta le varie gradazioni di blu per creare maggiori contrasti tra le varie aree del sito; l’utilizzo di un solo colore per tutto il sito tuttavia lo rende visivamente statico e noioso, problema risolto dal 4 che ha optato per sfumature più accese e un contrasto tra rosso, blu e bianco. Il sito 3 usa molti colori forse troppi, le icone infatti non sembrano sposarsi con la grafica generale della homepage. Trattandosi di siti istituzionali occidentali chiaramente fanno tutti uso almeno in minima parte del blu.

4 182

Icone - il potere comunicativo delle icone è evidente. Nel sito 3 saltano sicuramente all’occhio le icone che sintetizzano il contenuto della voce a loro associata. Anche senza leggere quello che c’è scritto posso intuire che un link mi condurrà a una media gallery e quello successivo a una mappa. Nel sito 4 l’uso della icone è mi-

gliore in quanto sono state create in linea con la grafica del sito, riprendendo i colori del logo; una semplice “checkbox” richiama il concetto del fare e un missile quello di “scoperta/esplorazione”.

Anche il sito 2 usa delle icone nel menù di sinistra purtroppo però sono piccolissime e messe così in disparte perdono la loro capacità comunicativa.

Immagini - l’uso delle immagini va sempre dosato, sia per questioni di peso in termini di kb, sia per mantenere la grafica pulita. Il sito 2 presenta delle foto a colori nel banner superiore e la varietà delle forme e dei colori in esse contenute, contrastano con l’aspetto generale del sito. Al contrario nel sito 3 l’immagine nel carosello occupa molto spazio sulla homepage, occupando un posto molto importante nella gerarchia dei contenuti: la foto attira l’attenzione e contiene colori in linea con la grafica generale del sito.

Persone - non saranno facce simpatiche, ma in tutte le homepage è presente almeno una persona. In questo caso si tratta dei rispettivi presidenti, se fosse stato un sito di cinema sarebbe bastato mettere almeno una scena di un film o una locandina, con un viso in grado di attirare l’attenzione del visitatore. Identificare un viso su qualcosa di artificiale la umanizza rendendola più familiare, non a caso la Pixar ha realizzato cartoni animati come Cars o Planes.

Sintesi - in questo ambito i siti 1 e 4 hanno la meglio, i testi in essi contenuti infatti sono brevi e distanziati tra di loro. Al contrario il sito 2 ha due menù e testi molto lunghi si nella parte centrale che nella barra laterale destra. In compenso l’uso di grassetti, colori differenti e la divisione in blocchi viene incontro alla consultazione del contenuto.

Spazi - i siti 1 e 4 in questo caso sfruttano lo spazio tra i contenuti per dargli maggiore visibilità e distinguere le diverse aree di interesse. I siti 2 e 3 invece sembrano voler presentare tutti i contenuti possibili direttamente sulla homepage, creando un notevole appesantimento visivo e un conseguente affaticamento da parte

del visitatore.

Animazione - modificare il colore della voce del menù o del link selezionato fornisce un feedback e un punto di riferimento all’utente. Inoltre creare movimento attira l’attenzione del visitatore in una certa direzione e rende il sito meno noioso.

Nella pagina 1 il menù di sinistra evidenzia in azzurro chiaro la voce corrispondente all’area attualmente visibile (in questo caso la Home) e il carosello a ogni cambio di immagine colora il titolo corrispondente sulla destra. Lo stesso avviene per i numeri dello slideshow nella pagina 3.

■■ Un gruppo affiatato non deve contenere troppe persone Nella relazione “Hive Psychology, Happiness, and Public Policy,” Jonathan Haidt (2008) dimostra come l’attività sincronizzata tra diverse persone renda più felici.

Il numero di persone coinvolte tuttavia non deve essere eccessivo; Robin Dunbar (1998) giunse alla conclusione che il numero ideale di membri in una comunità si aggira intorno le 150 persone.

■■ Le persone provano maggiore soddisfazione prima e dopo l’avvenimento di un evento Vivere una grande quantità di esperienze,anche se non del tutto positive, lascia ricordi migliori.

Es. Quando si interrompe un viaggio rimangono sempre dei bei ricordi e nostalgia delle esperienze vissute: più vacanze brevi quindi sono meglio di una unica lunga.

183

Riassumendo ͽͽ Evita di chiedere un parere o un feedback a freddo, la valutazione risulterà migliore dopo aver aspettato qualche giorno.

■■ Una quantità eccessiva di scelte a disposizione, paralizzano la capacità di ragionare JAM study Iyengar e Mark Lepper nel 2000 condussero quello che viene chiamato “jam study” cioè esperimento marmellata: l’obiettivo era dimostrare che le persone con troppe scelte a disposizione finiscono per non scegliere nulla.

L’esperimento si svolse in una drogheria dove i due scienziati si presentarono come negozianti. Su di un tavolo alternarono i barattoli di marmellata disponibili; per la metà del tempo venivano esposte 6 confezioni mentre per l’altra metà erano 24.

Quale situazione avrebbe attratto il maggior numero di acquirenti?

Quando c’erano 24 barattoli di marmellata, il 60% percento delle persone si fermava a guardare e assaggiare, quando invece c’erano sei barattoli, solo il 40% delle persone si fermava ad assaggiare.

Da questo punto di vista si direbbe “Melius abundare quam deficere”.

Molte persone interessate ai barattoli di marmellata si sono limitate ad assaggiare qualche varietà e, indipendentemente che ci fossero 6 o 24 barattoli: gli assaggi non erano mai più di quattro, dopo tutto è psicologicamente dimostrato che le persone difficilmente si concentrano e ricordano più quattro cose contemporaneamente, Quale tavolo quindi ha fatto più vendite?

Il 31% delle persone che si sono fermate al tavolo da sei, hanno fatto un’acquisto. Solo il 3% invece ha comprato una marmellata del tavolo da 24, nonostante avesse avuto il maggior numero di visitatori.

184

Semplificando i risultati dell’esperimento, se 100 persone andassero al tavolo da 24 barattoli, 60 di loro assaggerebbero la marmellata mentre solo 2 la comprerebbero.

Al contrario 40 persone si fermerebbero al tavolo con 6 barattoli, 40 persone si fermerebbero ad assaggiare e 12 di loro acquisterebbero la marmellata.

Maggiori approfondimenti si trovano nel libro di Sheena Iyengar, “The Art of Choosing” (2010)

N

e quid nimis (Less is more)

Le persone istintivamente chiedono di avere una grande quantità di possibilità a disposizione.

Per rendere l’interfaccia più efficiente, limita le scelte a disposizione dell’utente in modo da rendere la navigazione più semplice e guidata.

■■ Le 8 regole d’oro di Shneiderman per il design delle interfacce 1. Coerenza (consistency) 2. Scorciatoie per elementi di uso frequente 3. Feedback esplicativi 4. Le sequenze di azioni devono essere organizzate in gruppi con un inizio e una fine definiti e accompagnati da opportune indicazioni 5. Errori facili da prevenire e correggere 6. Azioni reversibili (undo) 7. Controllo della situazione in tutte le fasi del processo 8. Uso ridotto della memoria a breve termine

L’utente perfetto Capacità di orientamento di un pipistrello

resistenza di un cammello

occhi di falco

■■ L’utente ideale non esiste Sarà una delle “scontatezze” più evidenti, ma ogni progettista deve ricordarsi che lavora in un mondo materiale e imperfetto, quindi che progetti per persone, animali o piante, il caso ideale non esisterà mai nella realtà.

Quindi si tenga sempre presente che normalmente le persone: ͽͽ Sono sottoposte a un certo sforzo per riuscire a rispondere correttamente ͽͽ Utilizzano molti device differenti, spesso anche contemporaneamente ͽͽ Lavorano con dispositivi portatili in posti e situazioni differenti ͽͽ Sono sottposti a un’overdose (orverload) di informazioni ͽͽ Sono sotto pressione e di conseguenza stressate ͽͽ Hanno delle limitazioni o delle incapacità ͽͽ Invecchiano

memoria di un elefante

Agilità di una scimmia

185

■■ Le persone detestano “scrollare” Un’indagine di Jakob Nielsen, mostra che meno di un quarto dei visitatori novelli di un sito web scorrerà (scrollerà) la pagina; più di tre quarti delle persone non scorre mai la pagina web verso il basso. Perché il contenuto abbia un maggiore impatto deve essere “above the fold” cioè in copertina.

Ovviamente non è possibile mettere tutto in copertina, è fisicamente impossibile e creerebbe solo confusione e disordine: occorre quindi selezionare i contenuti più significativi e anteporli.

La proposta deve essere chiara, il visitatore deve capire il contesto del sito, dove si trova e i metodi di accesso alle altre e sezioni del sito devono essere visibili e di facile utilizzo.

■■ Fornisci una search box Viviamo in un’epoca dove poniamo costantemente domande ai motori di ricerca. Quando si utilizzano Google o DuckDuckGo, l’operazione è semplice e automatica; lo stesso deve essere per un sito. Ogni portale deve disporre di una search box cioè di un campo di ricerca efficiente, dove poter trovare rapidamente i contenuti senza doverli cercare per tutto il sito web.

inserisci le parole inserisci le parole che stai cercando

■■ Tempi di caricamento ͽͽ Alcune ricerche mostrano che è opportuno tenersi bassi nelle predizioni, cioè indicare tempi più lunghi di quelli 186

realmente necessari. ͽͽ Fornisci sempre un indicatore di caricamento ͽͽ Per far sembrare un processo più rapido, scomponilo in più step in modo da distribuire e distanziare i tempi di attesa ͽͽ Una maggiore richiesta di concentrazione allunga la percezione del tempo, quindi è consigliabile anche per questo motivo ridurre gli sforzi necessari all’interazione dell’utente.

■■ siate informativi e trasparenti Le pagine dei prodotti spesso sono estremamente sintetiche e povere di dettagli. Per riuscire a “vendere” qualcosa occorre fornire informazioni, così da permettere alle persone di prendere decisioni consapevoli. Anche se i dati non vengono letti, infondono fiducia e sicurezza in quanto fanno capire al visitatore di avere la situazione in mano. Informazioni e dettagli sono di grande aiuto, purchè siano semplici, di rapida lettura, divise in tabelle, grafici, immagini o in brevi paragrafi.

fino ad arrivare ai 48-bit per l’HDMI. Nonostante la grafica 8-bit consentisse un massimo di 256 colori, alcuni formati e programmi limitavano i colori disponibili, per esempio MS Paint consentiva solo il salvataggio di bitmap a 16 colori.

GIF e PNG avevano una palette di colori molto limitata, se le immagini erano in bianco e nero, contenevano cioè 2 colori, era consigliabile salvarle come bitmap da 1-bit.

Numero di Bit

Numero di Colori

1-bit

2

2-bit

4

3-bit

8

4-bit

16

5-bit

32

6-bit

64

7-bit

128

8-bit

256

24-bit (= true color)

16.777.216 (solo Mac)

48 bit

281.5 trilioni (HDMI)

Formati come JPG comprimono l’immagine rimuovendo i dettagli meno visibili all’occhio umano. Ovviamente maggiore sarà il grado di compressione e maggiori saranno i dettagli mancanti.

Già negli anni ‘90 si sconsigliava di usare il JPG per salvare immagini o illustrazioni complesse a causa della bassa qualità.

Piuttosto si usavano in combinazione GIF e PNG.

1-bit graphic (max. 2 colors)

4-bits graphic 8-bits graphics 24-bits graphic (max. 16 colors) (max. 256 colors) (max. 16.777.216 colors)

■■ PNG Il formato PNG (Portable Network Graphic) supporta colori indicizzati, scala di grigi e true color e sfrutta una compressione “lossless” cioè senza perdita di dati come GIF. Non a caso PNG è stato introdotto in sostituzione del formato GIF, offrendo queste nuove caratteristiche: ͽͽ PNG è patent free, cioè privo di brevetto (GIF richiedeva un pagamento delle royalty per ogni suo uso) ͽͽ Canale Alpha con più gradi di trasparenza (GIF consente solo di avere una trasparenza assoluta o nulla). ͽͽ PNG supporta true color, scala di grigi e immagini con colori indicizzati ͽͽ Compressione nettamente migliore di GIF GIF ha continuato tuttavia a offrire alcune funzioni extra acquisite solo più avanti dal formato PNG: ͽͽ GIF supporta le animazioni ͽͽ GIF è molto più supportato e compatibile Entrambi i formati supportano l’interlacciamento, cioè un’immagine viene mostrata man mano che viene caricata.

187

“Adobe Photoshop and even MS Paint support PNG, as does a lot of other image processing software”

File Format

Number of Colors

Lossless

PNG

∞

si

JPG

∞

no

GIF

256

si

I siti web negli anni ‘90 suddividevano le informazioni in tabelle o in gruppi di icone accompagnate da testo.

Oggi la struttura è definita principalmente dai tag <div> e <section> che consentono una disposizione meno rigida e più semplice dei contenuti.

■■ Controllo degli spazi bianchi Organizzazione dello spazio bianco

Separazione dello spazio bianco

LE NECESSITÀ DELL’UTENTE ͽͽ Linguaggio ͽͽ Immagini ͽͽ Numeri (ordine e gerarchia) ͽͽ Logica (causa ed effetto) ͽͽ Colori ͽͽ Consapevolezza degli spazi (corretto uso degli spazi bianchi)

*L’interlinea e lo spazio tra paragrafi poterono essere specificati solo dopo l’introduzione dei fogli di stile (CSS), prima di allora il semplice codice HTML non disponeva degli strumenti necessari a gestire agilmente i testi.

■■ Elementi caduti in disuso

■■ Interazione con il mondo reale

Marque Il termine “Marque” identificava il testo a scorrimento orizzontale (rilasciato da Microsoft per IE 2.0) negli anni ‘90, spesso utilizzato anche come banner pubblicitario Glossario-TOC È l’antenato delle cloud tag e delle site map, era una specie di elenco di tutti i termini chiave del sito. Ovviamente non veniva generato in automatico dal server, ma era scritto a mano dall’autore del sito.

TABELLE E FRAMESET 188

Double-spacing (interlinea)*

Margini esterni

Spazio tra le colonne

Spazio attorno a un singolo elemento grafico

Spazio attorno a molteplici ele- Spazio tra paragrafi* menti grafici

La visione del Web era già molto chiara negli anni ‘90. Nel libro “WebPageDesign” di Mary esMorris-Randy J. Hinrichs si afferma: “Le persone vogliono interagire con il mondo reale tramite il cyberspazio; vendere, comprare, imparare, giocare, socializzare e auto-realizzarsi.”

■■ Empatia Identificati con il target, in modo da condividere esperienze e interessi comuni, così da far sentire l’utente a suo agio, quasi come se il sito fosse stato creato da lui.

Principi utili alla progettazione ■■ Un prodotto deve essere fruibile Un prodotto occorre che sia facile da comprendere, ma anche di rapido utilizzo e relativamente privo di errori, ma soprattutto deve rispondere alle richieste dell’utente.

Un progetto che soddisfa queste caratteristiche inglese viene definito “usable”, letteralmente usabile, cioè fruibile.

Fondamentalmente un buon progetto deve: ͽͽ Fare ciò che gli viene chiesto ͽͽ Agire velocemente e in sicurezza ͽͽ Essere semplice da utilizzare

■■ Focalizzarsi sull’utente e i suoi obiettivi, non sulla tecnologia Il design incentrato sull’utente richiede prima di tutto un’attenta analisi del target di riferimento, cercando la risposta a domande come: Per i chi è progettata l’interfaccia? Chi sono i destinatari?

Chi sono i clienti (non necessariamente il pubblico di riferimento)?

Quale compito svolge il software? Per quale mansione è progettato?

Quali problemi aiuterà a risolvere? Che guadagno procurerà?

Quali nuovi problemi incontreranno gli utenti?

Cosa gradiscono e cosa criticano della nuova interfaccia/aspetto?

Quale sono le capacità e conoscenze degli utenti di riferimento?

Sono propensi a imparare nuove metodologie di lavoro e se sì come? Esistono differenti categorie di utenti con conoscenze e capacità differenti?

Quali sono le metodologie di lavoro preferite dagli utenti? Come si inserisce il nuovo software nelle modalità di lavoro in uso? Come andrà a modificare il modo di lavorare?

Come interagiscono gli utenti con i dati forniti dal software?

Dato che un prodotto sarà inevitabilmente rivolto a diverse categorie di persone è indispensabile identificare le tipologie di utenti maggiormente interessate al prodotto su cui si sta lavorando.

Il consiglio è quello di creare un profilo delle persone coinvolte basandosi su dati reali.

Esamina il lavoro in tutti i suoi aspetti L’analisi dell’utenza, deve essere accompagnata da un’esame delle attività che si vuole sviluppare con il proprio progetto.

Per ottenere le informazioni utili a una corretta progettazione occorre porsi le domande giuste, il passo fondamentale è non concentrarsi sul problema da risolvere, ma studiare il contesto in cui si verifica.

Istintivamente ci chiederemmo: “Che cosa deve fare il nostro prodotto?”

Invece è più importante chiedersi: “Che lavoro svolge il cliente per cui lavoro?”

“Che cosa deve fare il mio prodotto?”

“In che modo può il mio progetto dare supporto al lavoro attualmente svolto?”

L’errore che spesso viene commesso è quello di assumere un approccio tecnocentrico nella progettazione, che privilegia la tecnologia utilizzata per il progetto piuttosto che l’interazione dell’utente con esso.

189

Per esempio secondo la visione tecnocentrica, un ufficio con un computer, è una stanza scura con una luce puntata sul monitor di un computer. L’utente entra nel fascio di luce, usa il computer poi finito il lavoro, se ne va scomparendo nell’oscurità.

Le operazioni che l’utente svolge con il computer vengono considerate disconnesse dall’ambiente circostante.

In realtà in qualunque luogo di lavoro, ogni dipendente svolge diverse operazioni utilizzando svariati programmi e strumenti che coinvolgono più persone contemporaneamente, quindi la visione olistica è più appropriata di quella tecnocentrica.

I

l design delle interfacce richiede un metodo di progettazione sistemico

Per progettare un applicazione occorre conoscere tutti gli aspetti dell’ambiente di lavoro in cui verrà impiegata. Ogni buon designer analizza il sistema nella sua interezza e valuta l’impatto del progetto su di esso e sull’utente.

Le pagine di un sito web devono avere un aspetto coerente, non possono essere scollegate dalla pagina principale.

■■ Prima la funzione poi la presentazione

C

onsidera prima la funzione, poi la presentazione

Dare precedenza alle funzioni piuttosto che all’estetica non significa trascurare l’architettura dell’interfaccia, ma posticipare gli ab190

bellimenti grafici per renderla più attraente.

La progettazione parte sempre con le fasi di sketching e wireframing, in quanto privilegiano la funzione all’estetica.

I concetti trattati saranno nuovi o legati alle mansioni praticate? Se sono nuovi, verranno presentati in modo familiare o si tratterà di concetti estranei provenienti dall’informatica?

Quali dati potrà vedere e manipolare l’utente? Quali informazioni potrà trarre dai dati forniti? Come? Da dove provengono i dati inseriti dall’utente e dove verranno usati una volta elaborati dal software fornito?

Quali opzioni, scelte e impostazioni metterà a disposizione il programma?

Questa domanda non chiede come verranno presentate le opzioni, se con radio button, menu o sliders; la questione riguarda la loro funzione.

Uno degli obiettivi durante lo sviluppo di un modello concettuale è quello di renderlo il più semplice possibile. Meno conoscenze l’utente deve avere per comprendere il modello concettuale del prodotto, maggiore sarà la fruibilità.

L

ess is more Mies van der Rohe

Per esempio un’applicazione che fornisce indicazioni stradali non ha bisogno di dire“gira a nordest” o “gira a nordovest”, è sufficiente la formula “gira a sinistra” e “gira a destra”.

SVILUPPA UN MODELLO CONCETTUALE

Un modello concettuale riassume i compiti che un utente deve eseguire: i contenuti resi disponibili, il modo in cui vengono organizzate le informazioni e le modifiche effettuabili dagli utenti ai contenuti.

Tramite il modello concettuale spieghiamo, astrattamente, le funzioni che deve avere l’applicazione e gli aspetti ai quali gli utenti devono porre attenzione per poterla utilizzare.

Utilizzando come punto di partenza un modello concettuale, la progettazione dell’interfaccia grafica e l’applicazione risultante sarà più pulita e semplice da usare.

In questa fase progettuale si può parlare anche di “Contextual Design”, termine che sottolinea l’importanza di individuare il contesto quindi i dettagli che caratterizzano il target di riferimento: età, carattere, lavoro svolto, obiettivi, abitudini ecc...

L

e persone sono esperte nel proprio lavoro, ma spesso non sono in grado di spiegarlo a qualcun’altro.

Le persone non sono del tutto coscienti del loro comportamento sul lavoro, perché diventa un’attività abituale, quindi non dedicano molta attenzione alle proprie abitudini e capacità lavorative.

Per conoscere meglio il proprio target è quindi necessario osservare come svolge il proprio lavoro ed effettuare delle interviste in modo da far emergere gli aspetti meno evidenti delle pratiche di lavoro, le strategie, le motivazioni.

Tramite un’indagine contestuale, si analizza il cliente nelle sue abitudini e conoscenze lavorative, definendo punti deboli e di forza nella metodologia di lavoro.

■■ Non c’è design senza rappresentazioni esplicite Quando si progetta occorre creare fisiche rappresentazioni dei propri concept, tramite diagrammi, disegni, modellini, in modo da avere materiale tangibile da scambiare, discutere e modificare.

■■ Determinare il lessico Le parole utilizzate all’interno di un interfaccia sono determinanti per la facilità di utilizzo e comprensione.

Due errori frequenti nel lessico di un sito sono: ͽͽ Utilizzo di termini differenti per uno stesso concetto ͽͽ L’uso di uno stesso termine per concetti differenti

■■ Ipotizzare uno scenario Una volta realizzato il modello concettuale è utile immaginare come le persone potranno utilizzare l’applicazione sviluppata. In questo tipo di rappresentazione è importante dare spazio alle azioni svolte dall’utente, senza specificare aspetti tecnici, come quale dispositivo stia utilizzando.

Es: “Massimo usa il programma per verificare il suo conto in banca.

Successivamente deposita un assegno sul conto e trasferisce l’intero importo nel conto di risparmio.”

I punti chiave per la realizzazione di un modello concettuale sono: ͽͽ Task focus: dare rilevanza ai compiti svolti dagli utenti osservando anche la loro interazione sistemica nell’ambiente di lavoro. In questo modo sarà possibile definire quali azioni far svolgere all’utente tramite l’applicazione in progettazione.

191

ͽͽ Consistency/Coerenza: elencando i contenuti e le funzioni offerte da un’applicazione è possibile determinarne l’interazione, facendo emergere azioni condivise da più elementi. In questo modo, è possibile ridurre il numero di azioni necessarie a interagire con determinati contenuti, rendendo l’UI più semplice e coerente. ͽͽ Importance: fare un elenco delle richieste degli utenti così da farne una gerarchia e stabilire le priorità di sviluppo per l’interfaccia. ͽͽ Lexicon: un modello concettuale prevede un lessico, un insieme di termini, riferiti a contenuti e azioni precise. Un lessico semplice e preciso giova la coerenza e la facilità di utilizzo dell’interfaccia. ͽͽ Scenarios: ipotizzare le modalità di utilizzo dell’interfaccia da parte di un utente, evidenziando le azioni da lui svolte. ͽͽ Kick-start development: un’analisi dei contenuti e delle funzioni fornisce le informazioni necessarie a programmare le funzioni dell’interfaccia, prima ancora di disporle su un’interfaccia. (questa fase può essere anche un ricerca delle funzioni all’interno di librerie esistenti, come i moduli di Wordpress o codici JavaScript preconfezionati) ͽͽ Focus team and process: il modello concettuale è il punto focale del team di sviluppo. La progettazione non deve discostarsi troppo dal modello realizzato, ma deve evolversi con esso.

■■ Adegua il linguaggio e il punto di vista a quello del lettore Bisogna sforzarsi di rendere tutto il più naturale possibile.

Un’ analisi dei compiti, permette di vedere quali rientrano nella sfera di competenze dell’utente e quali attività invece sono estranee quindi “innaturali”.

Per comprendere meglio cosa si intende per “comportamento naturale” analizziamo le azioni che si effettuano in una partita a scacchi, indipendemente che si tratti di un software o di una scacchiera Per poter muovere una pedina, il giocatore deve effettuare solo due scelte: 1. Quale pedina muovere 2. Dove muovere la pedina scelta Se un programma per il gioco degli scacchi richiedesse all’utente di fare ulteriori scelte oltre a quelle sopra citate, si rischierebbe di metterlo in difficoltà, costringendolo a uscire dallo schema di pensiero più naturale.

Alcune possibili richieste del programma potrebbero essere: ͽͽ Attivare la modalità di movimento – il programma potrebbe essere dotato di una funzione di chat oltre che di gioco, quindi per poter effettuare un movimento potrebbe essere necessario attivare la modalità di movimento per uscire da quella di conversazione con l’avversario. ͽͽ Assegnare un nome alla mossa – potrebbe essere richiesto all’utente di dare un nome a ogni mossa, in modo da poterla revisionare a posteriori. ͽͽ Specificare le ragioni della mossa – per ogni mossa bisogna scrivere perché la si vuole compiere, così da avere una visione chiara della partita a fine gioco.

192

ͽͽ Specificare per quel scacchiera si sta giocando – se il gioco supportasse il multiplayer con più giocatori contemporaneamente, occorrerebbe specificare su quale scacchiare si vuole muovere la pedina

tente dove determinare gli argomenti appetibili e quelli più ostici.

I contenuti dell’interfaccia devono rispondere unicamente alle richieste del target di riferimento, ogni informazione supplementare deve essere scartata o nascosta.

Sebbene l’azione di movimento di una partita a scacchi sia molto semplice, un software potrebbe complicarla aggiungendo ulteriori funzioni.

Trova il giusto equilibrio tra potere e complessità Gli sviluppatori di software sono inclini a pensare che implementare un grande quantità di funzioni sia avvantaggioso: per contro gli utenti vogliono unicamente le funzioni che rispondono alle loro richieste. La maggior parte delle persone imparano a usare solo parzialmente un programma e ignorano tutte le funzioni che non gli servono.

L’ostacolo all’utilizzo di nuove opzioni potrebbero essere sia l’eccessiva complessità che la necessità di dover imparare troppe cose.

Imporre restrizioni arbitrarie Un’altro modo per violare l’intuitività di un’applicazione è imponendo restrizioni all’utente, come: ͽͽ Limitare i nomi delle persone a 16 caratteri ͽͽ Permettere di creare tabelle con un massimo di tre colonne ͽͽ Abilitare la funzione di ripristino solo per le ultime tre azioni ͽͽ Obbligare a inserire il numero di fax in tutti i campi anche se l’utente non ce l’ha Usa un vocabolario semplice Una delle regole fondamentali per favorire la comunicazione con il target di riferimento, è usare parole di facile comprensione.

Nella fase di progettazione quindi è importante determinare il lessico che verrà usato per i contenuti del programma.

Se non è strettamente necessario evitare quindi il gergo o i tecnicismi, nell’eventualità spiegarne il significato.

Nascondi i dettagli tecnici Un errore frequente è quello di credere che gli utenti abbiano le stesse conoscenze del progettista, quindi si aggiungono all’interfaccia informazioni che servono unicamente allo sviluppatore, che risultano di difficile comprensione a un pubblico non specializzato Per questo motivo occorre definire un modello concettuale dell’u-

Impostazioni predefinite – assicurati che l’impostazioni abbiano dei valori di default in modo che l’utente non debba riconfigurarli ogni volta Soluzioni preconfezione – non obbligare l’utente a ricominciare ogni volta da capo, fornisci funzioni per effettuare azioni complesse rapidamente, riducendo al massimo il numero di passaggi da effettuare.

Percorso guidato (Wizard) – introduci i nuovi utenti con una guida passo a passo, in modo da istruirli, illustrarando tutte le funzioni passo a passo.

Divulgazione progressiva – mantieni l’interfaccia minimale, mostrando unicamente i menù principali.

Comandi generici – usa il minor numero possibile di comandi per compiere azioni nel programma. Per semplificare la comprensione dell’interfaccia, fornisci comandi già usati per convenzione su altre interfaccie come: Create, Open, Move, Copy, Save, Delete, Print, Show/Edit Properties, and Follow Link

193

Task-specific design – piuttosto che sviluppare un’unica applicazione ricca di funzioni, realizza più applicazioni che svolgono pochi compiti specifici.

La grande diffusione delle app sui dispositivi portatili è dovuta proprio a questo concetto di fornire programmi semplicissimi che offrono poche funzioni eseguibili congrande facilità.

Personalizzabilità – permetti all’utente di scegliere come impostare l’interfaccia, in modo da adattarla alle proprie esigenze. Concedere una simile libertà all’utente può essere rischioso, in quanto scarica una parte della responsabilità di progettazione su persone che magari non hanno né le conoscenze né il tempo per migliorare l’interfaccia in uso. È diritto dell’utente adattare il programma alle proprie esigenze, è però preferibile rendere questa funzione accessibile solo da menù di opzioni avanzate.

I browser vengono utilizzati quotidianamente da milioni di persone, è bene quindi che siano visibili sul desktop.

La progettazione di un’applicazione deve basarsi su quattro combinazioni: uso di una funzione

Frequente da molti

Frequente da pochi

Raro da molti

Raro da pochi

Durante la progettazione di un’applicazione è importante ottimizzare tempo ed energie, Alan Cooper (1999) consiglia di evitare i casi margine (dove si verifica un uso raro e da parte di poche persone) in quanto servono solo a distogliere l’attenzione.

Visibile

■■ Quantità di utenti VS Frequenza d’uso In ogni ambito lavorativo ci sono obiettivi più o meno frequenti da raggiungere; differenziare questi obiettivi è importante per una corretta progettazione dell’applicazione.

Un’applicazione che fornisce funzioni di uso frequente sarà progettata differentemente da un’applicazione che viene usata solo in determinate occasioni.

Più è frequente l’uso di un’applicazione, minore deve essere il numero di azioni da eseguire per usarla.

Se devo guardare l’ora sul computer, non devo effettuare alcun click, basta guardare l’angolo dello schermo.

Se invece voglio modellare in 3D, dovrò installare un programma, configurarlo prima di poterlo utilizzare.

La visibilità di una funzione è direttamente proporzionale alla quantità di utenti che la utilizzano 194

Poco visibile

Dalla maggioranza Da pochi Pochi click

Di frequente

Molti click

Di rado

Molto visibile Pochi click

Appena visibile Pochi click

Poco visibile

Nascosto

■■ NON DISTOGLIERE GLI UTENTI DAL LORO obiettivo Un’ interfaccia utente che obbliga l’utente a fermarsi a pensare su cosa deve fare e come deve farlo, è un fallimento. Il libro “Don’t make me think” di Steve Krug vuole rispondere proprio a questo problema, riscontrabile sia su applicazioni desktop che web.

Non aggiungere all’utente ulteriori difficoltà Le persone hanno già una miriade di problemi nelle occupazioni quotidiane, se usano i programmi offerti su computer è proprio

perché cercano di semplificarsi la vita.

Es: ͽͽ Uno studente vuole acquistare una foto su un sito web, ma viene offerta solo in formato TIFF, piuttosto che JPEG o GIF. Per di più non possiede programmi di grafica in grado di convertire file TIFF nei formati interessati. Il suo lavoro è temporaneamente compromesso. ͽͽ Un’insegnante cerca informazioni riguardo ai fatti recenti di un’altro stato. Va sul sito ufficiale dello stato interessato, ma un avviso informa che il browser utilizzato è incompatibile e fornisce il link per scaricare un’altro browser. Il programma suggerito però non è compatibile con il sistema operativo utilizzato dall’insegnante.

L

’utente deve potersi concentrare unicamente sui propri obiettivi senza essere distratto da problemi procurati dal prodotto utilizzato.

Non indurre a ragionare per esclusione ͽͽ Voglio che la numerazione di pagina di questo documento cominciasse da 23 piuttosto che da 1, ma non vedo un comando per farlo.

Ho provato Page Setup settings, Document Layout settings, i comandi del View Header e del Footer ma non c’è nulla di utile. Mi rimane solo il pulsante Insert Page Numbers, ma non voglio inserire numeri di pagina dato che ci sono già.

Lo proverò lo stesso in quanto è l’ultimo comando rimasto. ͽͽ “Hmmm. Questo checkbox si chiama “Align icons horizontally”. Mi chiedo se una volta disattivato le mie icone sarano allineate verticalmente o se semplicemente non saranno

allineate” ͽͽ “Questo servizio di online banking mi richiede un ‘PIN’ ma con la mia carta di credito è stata fornita unicamente una password ma nulla definibile come ‘PIN’. Mi chiedo se vada bene lo stesso...”

■■ FACILITA L’APPRENDIMENTO

T

hink “outside-in,” not “inside-out”

Gli sviluppatori sono propensi a credere che l’utente di riferimento pensi esattamente come loro, quindi non si preoccupano degli ostacoli che una persona può incontrare nell’utilizzo del programma realizzato. Questo è un modo di pensare “inside-out” che considera cioè solo il proprio punto di vista.

Quando una persona utilizza una nuova interfaccia per la prima volta, tutto ciò che può sapere è presente solo su schermo o eventualmente nel manuale di istruzioni.

DoIt

Testo ambiguo Un esempio famoso di “ambiguità testuale” appartiene all’interfaccia LISP del 1985 dove compariva un pulsante con scritto sopra “DoIt” inteso come “do it”. Il font utilizzato senza grazie però portava a leggere la parola “Dolt” cioè stupido, per cui non si comprendeva il senso di un simile pulsante.

Grafica ambigua È bene far vedere le icone realizzate a più persone, in modo da verificare che vengano interpretate correttamente.

L’immagine qui a fianco dovrebbe rappresentare un’antenna, ma molti avranno pensato a un bicchie-

195

re con un drink.

Coerenza Durante l’utilizzo di un programma, l’utente deve poter mantenere la concentrazione, senza essere distratto da problemi o disservizi provocati dall’interfaccia.

In inglese le incoerenze, anche le più piccole, che inducono l’utente a distrarsi vengono chiamate “gotchas”.

Molteplici forme di un comando di “delete”

Definire esattamente cosa si intende per coerenza non è facile in quanto ciò che vale per una persona potrebbe non adattarsi a molte altre.

Per esempio un programmatore potrebbe pensare che se un programma permette solo di aprire e non di selezionare le cartelle, non occorre usare il doppio click per aprire i contenuti.

Tuttavia per convenzione le cartelle vengono aperte con un doppio click, quindi la maggior parte degli utenti risulterebbero confusi e incontrerebbero diversi “gotcha” come aprire cartelle involontariamente, o utilizzare il doppio click anche se non necessario.

Ci sono situazioni in cui preferiamo agire secondo le proprie abitutidini, piuttosto che adattarci a metodi innovativi, anche se promettono un risparmio di tempo ed energie.

La coerenza di un’interfaccia presuppone una progettazione completamente incentrata sull’utente, in quanto occorre conoscerne abitudini e comportamenti.

196

U

n’interfaccia è coerente non solo se utilizza processi logici ma principalmente se le sue funzioni sono prevedibili e di immediata comprensione.

Procura un ambiente di lavoro a basso rischio Errare humanum est. Un’applicazione è pericolosa se induce facilmente gli utenti a commettere errori senza dar loro la possibilità di correggerli oppure permettendogli di rimediare solo perdendo molto tempo.

Quando una persona si trova difronte a una situazione rischiosa, viene scoraggiato a scoprire e provare nuove funzioni o percorsi, preferendo attenersi a vie più sicure e familiari.

Questo fossilizzazione da parte di un utente ostacola anche la possibilità di imparare qualcosa di nuovo.

Al contrario un ambiente sicuro incoraggia l’esplorazione e la sperimentazione.

■■ Fornisci informazioni non solo dati Il computer fornisce una quantità immensa di dati, ma raramente si tratta di informazioni utili.

I dati non sono informazioni. Le persone estraggono informazioni dai dati.

Se per esempio voglio sapere se un negozio è aperto, l’informazione di cui ho bisogno è di 1 solo bit: si o no, 1 o 0. Tuttavia posso trovare la risposta alla mia domanda in diverse maniere: 1. Telefonando al negozio interessato 2. Mandando un’email 3. Visitando il sito web 4. Chiedendo a una persona per strada

Indipedentemente dal metodo utilizzato e dalla quantità di dati trasferiti, io ricevo un solo bit di informazione, assumendo che a me interessa solo sapere se il negozio è aperto o no.

Alcuni software tendono a considerare informazioni semplici dati che a vista dell’utente magari risultano poco significativi o di difficile comprensione.

Design displays carefully; get professional help Una volta stabilite tutte le funzioni che deve offrire l’applicazione in fase di sviluppo, occorre dedicarsi alla loro presentazione , in modo da realizzare un’interfaccia grafica ergonomica.

Per ottenere un risultato soddisfacente è opportuno prestare attenzione ai seguenti aspetti: ͽͽ Ordine e rilevanza: un’interfaccia efficiente non si limita a presentare i contenuti ma indirizza l’attienzione dell’utente su ciò che è importante. ͽͽ Scandibilità: gli utenti solitamente non leggono i contenuti attentamente, vanno unicamente alla ricerca di ciò che potrebbe interessargli. Non usare lunghi paragrafi, scomponi le informazioni in elenchi, titoli, tabelle. Rappresenta le informazioni graficamente con immagini o illustrazioni. ͽͽ Abbina al dispositivo: un errore comune è progettare un’interfaccia senza considerare le limitazioni dell dispositivo su cui si lavora. Un sistema a finestre su uno schermo da 2’’, la funzione punta e clicca per un dispositivo che ha solo tasti freccia, colori e particolari dettagliati per schermi a bassa risoluzione sono esempi di progettazione mal riuscita. ͽͽ Attenzione ai dettagli: progettare un’interfaccia è un lavoro complesso, per cui è bene che se ne occupino designer specializzati, altrimenti si incorrerà in una serie di errori e incongruenze che renderanno il prodotto imperfetto o inefficiente.

Un errore che viene commesso spesso nelle aziende è quello di assegnare sia il lavoro di progettazione del programma che dell’interfaccia a programmatori, che non sempre possiedono le basi per realizzare un’interfaccia efficiente; dato che nessuno chiamerebbe un idraulico per riparare un’auto, lo stesso ragionamento bisogna farlo anche per la progettazione di interfacce.

Lo schermo appartiene all’utente Le ricerche nel campo dell’ UXDesign dimostrano che l’interfaccia deve rimanere invariata il più possibile durante il suo utilizzo a meno che l’utente decida di sua spontanea volontà di apportare delle modifiche.

Un programma non deve assolutamente riorganizzare i contenuti per venire in contro all’utente.

Preserva l’inerzia del display Questo concetto è strettamente correlato a quello visto in precedenza. Quando un programma deve mostrare l’effetto delle azioni impartite dall’utente, deve produrre solo piccoli cambiamenti localizzati sul display.

Se un utente apporta delle modifiche, la maggior parte dell’interfaccia deve rimanere invariata.

Es: ͽͽ se dovessi modificare il nome di una cartella, sarebbe particolarmente fastidioso se venisse spostata secondo l’ordine alfabetico non appena cambio il nome. Proprio per questo motivo la maggior parte dei “File manager” mantengono la cartella nella stessa posizione durante la modifica e la spostano solo una volta che viene confermata la modifica con il tasto “Enter” da parte dell’utente. ͽͽ Un’altro caso è quello di siti come Wikipedia che consentono di cambiare i contenuti. Se una volta effettuata una modifica,

197

la pagina venisse caricata nella posizione iniziale e non in corrispondenza del cambiamento apportato, sarebbe disorientante.

Per fortuna grazie all’ascesa di AJAX le pagine web comunicano con il server in modo asincrono, quindi non necessitano di essere ricaricate ogni volta.

■■ Design e Reattività La fattore più importante per andare incontro alla soddisfazione dell’utente è quello di riuscire a stare al passo senza imporre tempi di attesa.

“

Ciò che più desidera un utente è la velocità. Quando si tratta di usare il computer, un utente odia attendere più di ogni altra cosa.”

Peter Bickford in his book Interface Design [1997]: Bickford spiega inoltre che ci sono due tipi di velocità: reale e percepita: “Il computer è dotato di due tipi di velocità, quella reale effettiva della macchina e quella percepita da chi sta usando la macchina. Quella veramente importante tra queste è la velocità percepita.

Un programma di rendering 3D che mostra l’immagine solo a fine elaborazione, sembrerà più lento di un programma che permette di vedere l’immagine formarsi gradualmente. Gli utenti affermeranno che il programma andava lento semplicemente perché l’attesa era più sofferta.”

Un software più veloce quindi non incrementa solo la produttività ma anche la soddisfazione dell’utente.

Cos’è la Reattività ?

La Reattività è relativa alle prestazioni tuttavia un programma può 198

essere responsivo ma avere basse prestazioni e viceversa.

Le prestazioni sono misurate in termini di velocità computazionale, la Reattività invece si misura in termini di conformità con il tempo e la soddisfazione dell’utente.

Un software reattivo segue l’utente passo passo, anche nei momenti in cui non può rispondere alla richiesta immediatamente.

Fornisce costantemente un feedback basato sulle percezioni motorie e cognitive dell’uomo in modo da informare l’utente su cosa sta facendo e cosa sta succedendo.

Un software non reattivo, comunica poco con l’utente, costringendolo ad attendere per tempi imprevedibili senza sapere se tutto sta funzionando nel modo corretto. ͽͽ Ritarda nei tempi di risposta a ogni click, movimenti di scorrimento o manipolazione di oggetti. ͽͽ Le operazioni richiedono molto tempo e bloccano ogni altro processo, senza poter essere interrotte ͽͽ Non fornisce alcuna informazione sul tempo richiesto dall’operazione in corso ͽͽ Le animazioni sono imprecise e difficili da seguire ͽͽ Ignora gli input dell’utente o esegue azioni non richieste.

Riassumendo la mancanza di Reattività è direttamente proporzionale alla frustrazione dell’utente.

■■ La Reattività sul Web L’ascesa del web nei primi anni novanta è stato un grande balzo in avanti nella comunicazione e nel commercio, ma anche un grande salto indietro nella Reattività e nella progettazione grafica.

Ciò era dovuto a una comunicazione limitata tra i Web browser e i server e a una capacità di rendering grafica povera e limitata.

Tramite codice HTML è possibile caricare solo un intera pagina

alla volta, inoltre è un’operazione lenta, considerando la connessione che veniva utilizzata allora, incapace di fornire all’utente un feedback.

Un questionario/form di una pagina Web statica, non è in grado di verificare la validità dell’input di un utente, per cui non può fornire messaggi di aiuto in caso di errore.

L’unico modo per fornire interfacce più responsive era utilizzare linguaggi di programmazione come Java, ma richiedeva l’utilizzo di un’altro interprete oltre al browser, rendendo lo sviluppo più costoso e meno efficiente.

La presenza di una scarsa Reattività era dovuta anche a una mancanza di studi e conoscenze tra i Web Desogners e gli sviluppatori.

Solo verso la fine degli anni novanta cominciarono a sorgere i primi Web “guru” (Flanders and Willis 1998, Nielsen 1999, King 2003).

Sebbene le applicazioni desktop forniscano spesso interfacce più efficienti di quelle presenti su Web, vincolano le persone all’accesso delle sole funzioni offerte dal programma. Se un utente non si trova del tutto a proprio agio con il programma in uso è più propenso a imparare a usarlo agilmente, piuttosto che cercare un’alternativa altrove.

Su web invece gli utenti sono raramente limitati nella scelta, per cui se non sono soddisfatti di un determinato di sito, fanno presto a cliccare il pulsante “Back” per cercare qualcosa più vicino alle loro aspettative.

Il miglioramento della comunicazione tra browser e server e lo sviluppo di tecniche di programmazione più avanzate, come AJAX, hanno lentamente cancellato il divario presente tra le applicazioni Web e quelle Desktop (Garrett, 2005).

Basti vedere i numerosi siti web sorti di recente, che consentono di effettuare su browser operazioni prima possibili solo su Desktop come: convertire video, modificare tracce audio, disegnare, modificare immagini ecc...

■■ Progettare per la Reattività Perché un utente percepisca un software come responsivo deve: ͽͽ ricevere istantaneamente gli input, anche se fornire una risposta richiederà del tempo ͽͽ permettere di sapere quando quando è o non è occupato ͽͽ permettere di fare altre operazioni durante un’attesa ͽͽ animare con movimenti morbidi ed evidenti ͽͽ permettere di interrompere operazioni lunghe o non desiderate ͽͽ permettere di prevedere quanto tempo richiederà una determinata operazione ͽͽ offrire un ambiente di lavoro personalizzabile

199

■■ Collauda e correggi Il test di “usabilità” è estremamente importante per determinare se un progetto può avere successo.

I risultati dei test possono sorprendere anche i designer più esperti.

Revisionare un programma prima di darlo in mano ad altre persone è indubbiamente importante, tuttavia fornisce risultati relativi unicamente al punto di vista dello sviluppatore, quindi non consente anticipare quei problemi che possono incontrare persone con un’altro background culturale.

Programma il tempo per correggere i problemi sorti nei test I due aspetti del collaudo: Informativo e Sociale I test di agibilità di un programma hanno sia una funzione informativa che sociale.

Informativo È la funzione più comune: individua gli aspetti dell’interfaccia utente che ne ostacolano l’uso e indica l’esatta natura dei problemi suggerendo possibili soluzioni.

Sociale L’aspetto sociale dei test di usabilità è importante tanto quanto quello informativo. Si tratta di riuscire a convincere gli sviluppatori che esistono dei problemi da correggere.

I progettisti sono soliti opporre resistenza difronte a proposte di cambiamento, sia per via della quantità di tempo e fatica già spese, sia perché significa che il lavoro svolto non risulta ancora soddisfacente.

Perché la funzione sociale abbia efficacia, è meglio mostrare i test di usabilità in diretta anche agli sviluppatori: sebbene vedere un utente usare il software possa anche trasmettere una certa agita200

zione, è bene osservare i test in modo oggettivo.

L’aspetto sociale dei test serve a far accettare l’idea che l’agibilità di un programma è un fattore fondamentale che occorre mettere di fronte a più persone possibili.

errori comuni e soluzioni ■■ GUI Control La maggior parte delle applicazioni e dei siti web sono costruiti utilizzando programmi specifici per la realizzazione di interfacce grafiche (GUI).

Per la realizzazione della GUI vengono forniti una serie di strumenti detti anche “widget” che vanno da semplici campi di testo, pulsanti di selezione, slider a foto gallery, form per l’inserimento di commenti, menù animati ecc...

Sebbene questi strumenti aiutino a semplificare e a velocizzare la realizzazione di una GUI, hanno comunque molte limitazioni: Architettura di basso livello: per favorire la massima flessibilità, vengono forniti blocchi o widget molto elementari. Purtroppo strumenti molto semplificati rendono lo sviluppo di applicazioni tedioso, in quanto occorre dedicare molto tempo alla programmazione per l’ampliamento delle funzioni e per la personalizzazione dell’interfaccia.

Carenza di linee guida: le soluzioni che vengono fornite non sono sempre complementari tra di loro in quanto sono basate su stili e modelli concettuali differenti. Non essendoci quindi guida su quali strumenti è meglio adoperare, gli sviluppatori rischiano di creare GUI disordinate, favorendo le funzioni a scapito dell’organizzazione dei contenuti o viceversa favorendo l’aspetto estetico piuttosto che le funzioni richieste dal progetto.

Privilegiamento dell’estetica: il tempo speso a sistemare la presentazione sarebbe meglio dedicarlo alla semantica della GUI, studiando a fondo le richieste dell’utente in modo da pianificare propriamente le funzionalità dell’applicazione. Se per effettuare modifiche sul piano estetico come la sotituzione di bullet con un menù a

tendina, o dei font non deve richiedere ogni volta la riprogrammazione dell’interfaccia ma devono essere particolari già definiti e facilmente correggibili, senza dover alterare il codice già utilizzato.

Gli errori legati agli strumenti di un interfaccia grafica sono principalmente due: 1. Usare lo strumento sbagliato 2. Usare in modo scorretto uno strumento I problemi legati alla GUI inficiano l’agibilità dando l’impressione che il programma sia scadente.

Questo genere di problemi sono generalmente facili da identificare e correggere, purché non si tratti di limitazioni legate al programma di creazione della GUI.

■■ Usare lo strumento sbagliato Confondere checkbox e radio buttons I checkbox sono caselle di selezione, che consentono anche l’attivazione di molteplici box contemporaneamente

201

I radio button consentono la selezione di un unico elemento all’interno di una lista.

Errori comuni: ͽͽ Radiobutton per una sola opzione ͽͽ Checkbox al posto di radiobutton ͽͽ Checkbox che si comportano come radiobutton ͽͽ Bottoni troppo vicini tra di loro Nell’immagine di seguito viene mostrato un form in cui compaiono un chekbox e un solo radiobutton: non ha senso, Perché usare queste funzioni se non ci sono scelte da selezionare?

202

Osserviamo questa seconda immagine. I radiobutton sono vicinissimi tra di loro, e presentati tutti allo stesso modo: con una disposizione simile è facile fare selezioni indesiderate per sbaglio.

Uso corretto dei radiobutton Il numero di opzioni disponibile deve essere compreso tra 2 e 10.

Deve esserci spazio sufficiente per mostrare tutte le opzioni disponibili Se dovessero esserci problemi di spazio o se le opzioni offerte superassero la decina, esistono soluzioni alternative ai radiobuttons.

Dropdown menu (menu a cascata)

Scrolling list box (selezione scrollabile) Ampiamente utilizzati sui dispositivi portatili per la facile adattabilitĂ dello scroll alle azioni di swipe. Sono utili quando si ha spazio limitato e un elevato numero di opzioni da elencare.

List box (selezione scorribile)

Spin box/Cycle buttons Si tratta di pulsanti utili soprattutto per la selezione di dati numerici, specialmente quando occorre farla con precisione.

203

■■ Usare checkbox per valori non contrari

■■ Usare bottoni come pulsanti di selezione

I checkbox sono studiati unicamente per selezioni binarie, quindi per valori opposti tra di loro come “On/Off, True/False, Colore/B&W, Presente/Assente ecc...

Comportandosi come interruttori, è sempre possibile comprendere la funzione svolta da un checkbox.

Utilizzando valori non contrari tra loro, come negli esempi di seguito, è difficile prevedere le conseguenze della disattivazione dei checkbox, quindi contrariamente a quanto visto nel “Principio base 5”, l’utente deve sperimentare i pulsanti e determinarne la funzione ragionando per esclusione.

Sostanzialmente attivano o disattivano la funzione fornita?

I bottoni meglio detti “action controls” a differenza dei checkbox e dei radio button (definiti toggles, cioè interruttori), non cambiano stato quando si interagisce con essi.

Se un utente per esempio dovesse scegliere se attivare o meno il grassetto su un editor di testo, il pulsante di selezione dello stile deve cambiare stato se è attivo o meno, altrimenti l’utente non sarà in grado di ricordarsi sempre quale delle due opzioni è stata attivata.

Uso corretto dei checkbox Nel caso seguente è chiaro che l’accensione e lo spegnimento di ciascun checkbox genera un solo risultato prevedibile. Ogni checkbox potrebbe essere sostituito da due radiobutton o da un dropdown menù; questa soluzione è consigliabile soprattutto quando è necessario mostrare i valori attivabili.

Gli action controls, sono studiati per singoli input, quindi servono ad aprire menù o ad accedere a determinate funzioni.

In caso di necessità, grazie all’evoluzione raggiunta dai browser, è possibile personalizzare graficamente i pulsanti e fare in modo che a ogni click cambino aspetto grafico.

■■ Troppe tab/etichette

204

Spesso capita di dover organizzare le informazioni su più pagine, quindi per la navigazione tra le varie sezioni viene gestita da menù orizzontali.

Questo genere di menù di navigazione presentano delle limitazioni spaziali, in quando devono essere contenuti nella larghezza della pagina, inoltre dispongono gerarchicamente le sezioni, dando più rilevanza a quelle posizionate nella parte più a sinistra del menù.

Quando gli argomenti sono molti, il rischio è di dover creare numerose voci all’interno del menù, costringendo il designer a trovare soluzioni differenti.

Allargare la pagina a cui fa riferimento il menù orizzontale consentirebbe di inserire più tab, però di conseguenza il contenuto della pagina sarebbe insufficiente per occupare equamente tutto lo spazio.

Questo genere di soluzione quindi è un po’ un cane che si morde la coda I pulsanti situati nella parte inferiore dell’interfaccia assumono una minor rilevanza, apparendo meno importanti di quelli superiori.

.

Un’altra variante adottata è quella di disporre i pulsanti di navigazione su più righe o addirittura anche sulla parte inferiore dell’interfaccia. In questo modo non solo la grafica ma anche l’usabilità dell’interfaccia viene intaccata, rendendo tutto più confuso.

Tabelle troppo corte In certe situazioni per riuscire a far stare tutto nelle tab, si abbreviano le voci in esse contenute oppure si usano termini stranieri piuttosto che italiani.

Se si tratta di termini già adottati per convenzione, come “Home” o F.A.Q. è possibile che la maggior parte degli utenti riescano a comprenderli, se si utilizzano però soluzioni di propria invenzione, l’utente potrebbe incontrare difficoltà nella comprensione dei significati.

Inoltre una certa espressione potrebbe non essere chiara in tutte le lingue.

Le tab nell’immagine obbligano a usare sigle che a un normale utente risultano incomprensibili.

205

In caso di voci costituite da due parole, è possibile disporle su più righe, tuttavia è consigliabile farlo solo se lo permettono tutte le tab, altrimenti ha una scarsa resa estetica.

Nell’immagine di seguito solo alcune tab contengono testo su due righe, la resa estetica non è soddisfacente.

Tabs danzanti Disponendo un gran numero di tab su più righe si verifica un problema di visualizzazione causato dalla profondità. Nella visualizzazione su due righe infatti occorre considerare tre livelli di profondità, quello della tab selezionata in primo piano, a seguire quello delle tab appartenenti alla stessa riga della tab selezionata e le tab dell’altra riga.

Quando viene selezionata una tab sul terzo livello, occorre spostarla sul secondo livello e metterla in primo piano in modo da mostrarne il contenuto.

Un esempio di questo tipo di menù è visibile n Windows Media Player 10.

206

Spostare i menù dalla loro posizione originaria è disorientante in quanto rendono l’interfaccia instabile, richiedendo una maggiore attenzione da parte dell’utente.

Se ci limitassimo a considerare solo due livelli e non spostassimo la tab selezionata, il collegamento tra contenuto e voce del menù potrebbe non essere immediato.

Insomma, disporre i pulsanti di navigazione di un menù su più righe è sconsigliabile per la progettazione di un’interfaccia ergonomica.

Contieni il numero di tab Alla base di un progetto risiede un’attenta organizzazione dei contenuti. Prima di disegnare l’interfaccia, è bene creare una mappa dei contenuti, in modo da definirne l’importanza e la posizione nella gerarchia.

Un esempio di organizzazione efficiente dei contenuti è visibile su amazon.com che ha rinunciato all’uso delle tab, preferendo menù a scorrimento verticale.

Per una visione completa dellâ&#x20AC;&#x2122;evoluzione di Amazon consultare la pagina www.lukew.com/ff/entry.asp?178

207

Uso di menù dinamici I menù dinamici presuppongono che un utente sia in grado di imparare rapidamente a usare i menù, comprendendo perché alcune voci compaiono e scompaiono; questa supposizione è sbagliata.

Piuttosto che rimuovere comandi inutilizzabili dal menù è più indicato “disattivarli” e colorarli così da sembrare inattivi (generalmente nelle interfacce desktop si usa il grigio chiaro).

User friendly fields ͽͽ Match field length to data: limita la lunghezza del campo al genere di dati che deve essere inserito. ͽͽ Accept common formats: trattandosi di campi di testo, gli utenti potrebbero inserire i dati in formati differenti. Quando si inserisce una data il mese può essere scritto per esteso o in formato numerico. Occorre quindi imporre un metodo di inserimento definito all’utente, altrimenti il programma deve essere in grado di interpretare entrambe le alternative ͽͽ Accept your own formats: se si richiede l’inserimento di un numero seriale o un codice, è bene che il campo di testo permetta di scriverlo esattamente così com’è stato fornito.

Es: accade a volte che i numeri di carte di credito non vengano accettati perché si aggiungono spazi o trattini tra i caratteri. ͽͽ Beware of rejecting legitimate data: alcuni dati potrebbero non essere accettati pur trattandosi di informazioni corrette.

Per esempio un codice postale risulterà molto differente da uno italiano, occorre quindi che anche questa variante venga accettata ͽͽ Make letter case irrelevant: in molti casi i dati richiesti per convenzione hanno lettere tutte maiuscole o viceversa. Se l’utente inserisce per errore lettere in formato differente, è bene che sia il programma a convertirle nel formato giusto, 208

senza richiedere all’utente di ripetere l’operazione compiuta. ͽͽ Provide a pattern/Structure text fields: stabilisci uno schema di inserimento preciso per il tipo di dato richiesto. Se si tratta di una data per esempio organizza le cifre in campi di testo limitati “GG/MM/AAAA” così da guidare l’utente nell’inserimento corretto delle informazioni e ridurre la possibilità di sbagliare.

Radio Button senza valore predefinito Fornire scelte selezionabili senza un valore predefinito può essere fuorviante, in quanto una volta effettuata la selezione non è possibile tornare allo stato iniziale.

Le scelte fatte da un utente devono essere sempre reversibili e correggibili.

Il lavoro di chi progetta interfacce è quello di permettere agli utenti di raggiungere i propri obiettivi nel modo più semplice possibile. Una maniera per farlo è fornire dei suggerimenti o dei dati predefiniti per la maggior parte dei campi di inserimento e delle scelte offerte, così da doverne cambiare solo una parte per adattarla alle proprie esigenze.

Per permettere all’utente di non scegliere alcuna delle opzioni proposte, aggiungere un ulteriore voce, come nella figura di seguito, il pulsante “none”, che permette appunto di scartare tutte le scelte fornite.

Dropdown menu e radio button devono sempre avere un valore predefinito selezionato, che si avvicini il più possibile alle preferenze dell’utente.

Nei casi di seguito vengono commessi due errori. La data fornita di base è relativa al 2004 sebbene siamo già nel 2015. Il sito in questo modo dimostra di aver ricevuto pochi aggiornamenti nel corso del tempo.

Nel secondo caso invece Microsoft Office permette di esportare in PDF, tuttavia nella pagina di esportazione mantiene il formato del documento d’origine, imponendo all’untente di selezionare l’esportazione PDF sebbene fosse scontata.

209

■■ Checkbox negativi

■■ Girare in tondo

I checkbox presuppongono l’attivazione o la disattivazione di un’opzione. Invertire il loro funzionamento rischia di causare fraintendimenti.

Una stessa richiesta può essere formulata in due maniere differenti: Aggiunge la sottolineatura al testo Rimuove la sottolineatura dal testo La prima affermazione è più naturale, perché l’utente abilitando il checkbox effettivamente aggiunge la sottolineature. Nel secondo caso il processo logico è più contorto, quindi attivando il pulsante in realtà effettuo una rimozione.

Sostanzialmente è come dire di sì mentre si scuote la testa negativamente.

Nielsen and Tahir (2001) formularono la seguente regola: Non includere un link attivo per accedere all’home page, sull’home page stessa Più in generale si può afferamare:

■■ problemi di navigazione Uno dei problemi più comuni è la difficoltà che hanno i visitatori di un sito web, è quello di trovare la strada giusta da seguire per trovare ciò che stanno cercando.

Stando alle osservazioni di Jakob Nielsen, i suggerimenti per una corretta navigazione dicono agli utenti: ͽͽ Dove si trovano ͽͽ Dove sono stati ͽͽ Dove possono andare ͽͽ Se l’obiettivo è più o meno vicino Condurre gli utenti fuori strada e non mostrare la via

210

N

on includere un link attivo per accedere alla pagina corrente

■■ labirinto su più livelli La regola generale è: evita di inserire più di due livelli di navigazione, altrimenti gli utenti si smarriranno. Tecnicamente non bisogna inserire sequenze di link troppo lunghe, altrimenti allontanano troppo il visitatore dalla sorgente cioè la Home.

■■ quale pulsante devo schiacciare?

Non inserire più barre di navigazione su una stessa pagina e non fornire funzioni di ricerca sul web, alternative a quelle già esistenti, se non è strettamente necessario e non porta dei vantaggi.

■■ pollicino e le briciole di pane Nei risultati di ricerca bisogna sempre esplicitare quante pagine e o contenuti sono stati trovati, e permettere a un utente di accedervi direttamente con uno o massimo due click. In inglese questi collegamenti vengono chiamati “breadcrumb” cioè briciole di pane.

■■ less is more L’obiettivo di ogni designer dovrebbe essere di permettere agli utenti di trovare il più rapidamente possibile le informazioni cercate Per fare questo: 1. Mostra ed evidenzia le informazioni importanti e riduci al minimo gli elementi ripetuti 2. Minimizza il numero di click necessari; le persone devono fare click unicamente per accedere al contenuto interessato e non per verificarne la presenza nei risultati della ricerca.

I risultati della ricerca della pagina visualizzata sono tutti uguali e di difficile lettura.

In questo caso invece l’utilizzo corretto dei grassetti, della dimensione dei caratteri e degli spazi ha reso la lettura dei risultati più leggibile.

■■ Terminologia incoerente Un’analisi importante per verificare l’agibilità di un programma è quella relativa alla semantica, in quanto permette di verificare se il linguaggio utilizzato è adatto al target di riferimento e non contiene ripetizioni.

Caroline Jarrett, un’esperta progettista di GUI, ha stabilito una regola molto semplice ma fondamentale per il lessico di ogni interfaccia:

S

ame name, same thing; different name, different thing Caroline Jarrett (www.formsthatwork.com)

211

Il rapporto tra termini e concetti deve essere di 1:1, persino di termini che possono avere molteplici significati, devono fare riferimento a una singola cosa all’interno di un programma.

■■ Termini differenti per uno stesso concetto Una volta stabilito il termine da usare per fare riferimento a un determinato concetto, non bisogna utilizzare altre parole, anche se si tratta di sinonimi.

Proprio come ogni persona ha un nome proprio, così deve essere per ogni funzione di un interfaccia.

Se per esempio su un forum il “nome fittizio” utilizzabile dagli utenti viene chiamato “nickname”, dovrà essere definito tale su tutte le pagine del sito, senza usare termini alternativi come “alias” o “User ID”.

■■ Lo stesso termine per concetti differenti Certi programmi e siti hanno offrono funzioni differenti definendole però con termini simili.

In una versione di Microsoft Word per esempio venivano proposti due comandi che utilizzavano il termine “picture”: 1. Insert → Picture 2. Insert → Object → Microsoft Word Picture Apparentemente entrambi permettono di inserire immagini all’interno del documento, tuttavia li primo permette di caricare immagini dal computer mentre il secondo si limita a creare un box di disegno.

212

Google Docs utilizza una semantica più chiara e il menù è suddiviso in un minor numero di livelli. Le immagini sono definitie come “image” mentre i disegni come “drawing. Entrambi le voci sono accompagnate da un’icona e e sono raggiungibili con un click, subito dopo aver aperto il menù a tendina.

■■ Lessico ambiguo I termini utilizzati per un’interfaccia, se fanno riferimento a un solo concetto possono ancora essere fuorvianti. Il presupposto infatti è che l’utente interpreti correttamente le parole utilizzate e le associ alle rispettive funzioni; tuttavia ci sono termini che assumono molteplici significati a seconda del contesto.

In un programma di compilazione C++ per esempio è stata inserito il comando “Build Window” che consente di aprire la finestra per vedere i risultati della compilazione del codice scritto. La parola “Build” in questo caso però può anche essere intesa come verbo, quindi la maggior parte degli utenti erano convinti che effettivamente il comando “Build Window” generasse il codice per visualizzare una “Finestra” programmata in C++.

Il problema di parole che possono essere intese come sotantivi o come verbi è frequente nella progettazione di interfacce.

Nel caso sottostante è difficile comprendere la differenza tra i pulsanti “Find...” e “Search”.

3 regole base per il lessico ͽͽ Evita i sinonimi ͽͽ Evita termini ambigui

ͽͽ Verifica la terminologia con gli utenti Alcuni errori frequenti sono: ͽͽ Utilizzo di verbi per descrivere l’azione piuttosto che nomi: “Show Details” al posto di “Properties” ͽͽ Usare un linguaggio “telegrafico” eccessivamente succinto “Enter send date” potrebbe essere meglio espresso con la frase “Please specify the date on which the message is to be sent” ͽͽ Utilizzare le maiuscole solo nei titoli “Database Security” trascurandole invece negli altri testi “Database security”. ͽͽ Terminare alcune ma non tutte le frasi con il punto. ͽͽ Nella schermata di avvio di un programma compaiono due scelte “Create New Study” e “Open An Existing Study”. Solo la seconda opzione usa l’articolo “An”. ͽͽ Alcune voci come “Table Name” sono accompagnate dalla parola “name” altre invece come “File” 0X. Entrambe le voci dovrebbero seguire la struttura “........ name” ͽͽ Nel menù i termini “Add” e “Print” sono utilizzati per indicare la stessa azione. ͽͽ “Add Meter”, “Print meter”, “Add Graph”, “Print graph” Non usare più testo del necessario L’utente non legge mai approfonditamente ma si limita a cercare le parole chiave che lo indirizzano verso ciò che più gli interessa.

Occorre quindi privilegare titoletti, breve frasi ed elenchi puntati.

Alcuni dei massimi esponenti dell’UX design come Jakob Nielsen, Steve Krug e Hinny Redish sostengono la sintesi.

Uno dei suggerimenti di Krug è “Sbarazzati della metà delle parole di ogni pagina, poi rimuovine un’ulteriore metà da ciò che è rimasto.

213

Linguaggio gergale o tecnico

✘

Type Mismatch

✘

✓ 214

Es: Il caso “Create Object Wizard”.

Alcuni utenti credevano che il pulsante creasse un’oggetto chiamato Wizard invece che condurre a un menù assistito.

Messaggi di errore Ogni messaggio di errore di un’applicazione dovrebbe seguire una struttura simile a quella di seguito: Simbolo di errore → Problema → Soluzione

messaggi di errore più funzionali

Name contains invalid cha- <Object-type> Il nome non racters. può contenere i seguenti caratteri: ‘-’, ‘/’, ‘@’, ‘#’, or ‘&’ File missing or you don’t have - Il file <filename> non è stato access. trovato Order size not multiple of tra- - Non puoi accedere al file <fiding unit. lename>.

■■ Messaggi di errore Ogni messaggio di errore di un’applicazione dovrebbe seguire una struttura simile a quella di seguito:

Simbolo di errore → Problema → Soluzione Messaggi di errore poco esaustivi

messaggi di errore più funzionali

File.Move() failed. [User tried to save e-mail message, but specified Sent folder as destination by mistake.]

I messaggi non possono essere salvati dentro alla cartella “Inviati”. Salavarli una cartella differente.

JavaScript TypeError: Null va- Attenzione: la pagina contiene lue un'errore di codice. Il contentuto non può essere visualizzato correttamente.

Nesting level too dip.

Messaggi di errore poco esaustivi

Nessun messaggio, la pagina si ricarica automaticamente

Sorry: <stockname> stock must be traded in multiples of <trading unit> shares.

■■ errori di Graphic Design e Layout Gli sviluppatori di software sono generalemente ingegneri informatici e non sempre si accorgono di quanto l’industria digitale si sia avvicinata a quella editoriale, giornalistica, televisiva e cinematografica.

■■ Informazioni ingnorate Se un’informazione viene visualizzata su schermo non è scontato che venga vista dal visitatore.

Le persone filtrano le informazioni Ogni essere umano trascura costantemente delle informazioni. Il nostro sistema percettivo filtra più stimoli di quanti ne riceva. Non è un bug, anzi è una qualità!

Se non funzionasse in questa maniera, non potremmo confrontarci

215

con un mondo in continuo e rapido cambiamento. Saremmo sovraccarichi di stimoli.

Troppo piccolo o semplice Una grafica adatta a schermi di dimensioni ridotte potrebbe contenere elementi eccessivamente piccoli per essere visualizzati su display più grandi. Adattare icone,testi, immagini e pulsanti a tutti i dispositivi offerti dal mercato è una delle maggiori sfide che i Designer devono saper affrontare. Grazie allo sviluppo dei temi responsive come Bootstrap o Foundation questo problema per fortuna è diventato più controllabile e facile da superare.

Fuori dal campo visivo Indicatori di stato e altre informazioni importanti appaiono in aree dove l’utente non sta concentrando la vista. L’acutezza visiva dell’essere umano è situata nella “fovea” l’area centrale dell’occhio dove vengono percepiti anche i colori.

Seppellito dal rumore Le ripetizioni e il rumore visivo addormentano il sistema percettivo, ostacolando la possibilità di cogliere particolari importanti.

Per esempio:

Enter filename and press ENTER

Enter username and press ENTER La sola differenza tra queste due richieste è la seconda parola, tutto il resto è rumore.

La scritta “ENTER” essendo in maiscolo attira l’attenzione, ma è solo rumore. È molto più efficace scrivere:

Filename:

Username Un’altro esempio di rumore è visibile di seguito:

Containing tank: normal Pressure valves: normal 216

Fuel rods: abnormal Discharge pump: normal

I software emettono grandi quantità di informazioni, spesso ripetitive, che l’utente deve setacciare per filtrare quei pochi dati che va cercando.

“I computer offrono una quantità enorme di informazioni, tuttavia forniscono un’overdose di dati”

I

risultati importanti delle ricerche sono spesso seppelliti da contenuti ripetitivi e da rumore visivo.

La questione non è quanto sia efficiente un motore di ricerca a trovare elementi rilevanti, ma come li espone.

SOLUZIONI ͽͽ Construct a visual hierarchy “Sminuzza” le informazioni rendendole di facile e rapida comprensione. ͽͽ Make important information bigger ͽͽ Put important information where the user is looking La visione periferica non è efficiente, mantieni sempre messaggi e informazioni importanti nei punti focali del sito. ͽͽ Use color to highlight ͽͽ Boldness, density, color, saturation ͽͽ Graphics and symbols ͽͽ Dialog boxes and pop ups Vanno usati con cautela in quanto risultano invadenti, tuttavia per comunicazioni importanti possono essere un’ottima soluzione. Per esempio possono avvertire l’utente di aver dimenticato di compilare un campo di un form.

ͽͽ Sound Sfrutta la vibrazione del dispositivo o i suoni per comunicare anche tramite gli altri sensi.

■■ Mischiare finestre di dialogo e pulsanti All’interno di un programma determinati pulsanti servono solo a interagire con le finestre di dialogo mentre altri modificano i contenuti visualizzati. È bene distinguere i pulsanti tra di loro in modo da non mescolarne le funzioni.

■■ Pulsanti di selezione troppo vicini Alcuni form offrono pulsanti di selezione così vicini tra di loro che l’utente rischia di confonderli tra di loro, effettuando scelte sbagliate.

Occorre quindi sfruttare gli spazi bianchi, separatori e raggruppamenti per distribuire ordinatamente le informazioni.

■■ Etichette troppo lontane dai campi di testo Nella creazione di un form occorre evitare i seguenti errori: 1. Etichette all’estrema sinistra e campi di testo all’estrema destra 2. Le etichette sono troppo vicine alle altre opzioni fornite dal form, per cui non si capisce a quali campi di testo fanno riferimento.

3. Non lasciare che che siano i campi più lunghi a determinare l’allineamento dell’intero form 4. La distanza tra i campi di testo e le voci corrispondenti deve essere inferiore a quella che separa gli elementi elencati, in modo che sia facile capire a quale domanda si sta rispon-

dendo.

5. Metti le voci sopra al rispettivo campo di testo

■■ Inconsistent label alignment L’allineamento dei contenuti di un programma e di un sito devono essere coerenti in tutte le pagine visualizzate, per cui se si decide di mantenere l’allineamento a sinistra, occorrerà rispettarlo ovunque.

Alcuni UI designer raccomandano di usare l’allineamento a destra perché permette di mantenere le etichette più vicino ai rispettivi campi di testo, altri designer invece preferiscono l’allineamento a sinistra, così da evitare di creare uno spazio bianco eccessivo a sinistra.

Di per sé non ha molta importanza quale allineamento si è scelto, ma che sia mantenuto uno standard su tutta l’interfaccia.

■■ Font piccoli La visualizzazione dei font dipende principalmente da due fattori: ͽͽ Risoluzione dello schermo: sia la risoluzione massima supportata dallo schermo che le risoluzioni configurabili dal sistema operativo (800×600, 1024×768 …). Maggiore è la risoluzione, più piccolo sarà il testo visualizzato. ͽͽ Dimensione del display: se un display da 15’’ e uno da 24’’ sono impostati alla medesima risoluzione (es. 1024 × 768), un testo di 12 punti apparirà più grande sullo schermo da 24’’. ͽͽ Distanza osservatore/display: occorre sempre considerare se l’interfaccia verrà mostrata su comuni computer d’ufficio o su schermi posizionati in modo differente, per esempio appesi a pareti.

L’obiettivo è rendere i testi leggibili a tutti.

217

Dimensione minima del font 10pt o meglio ancora 12pt Non usare mai font inferiori ai 10pt. Su schermi ad alta risoluzione persino 10pt potrebbero apparire troppo piccoli, quindi meglio adottare come corpo carattere 12pt.

Scegli font adatti a tutte le risoluzioni Se i font sono leggibili alle risoluzioni più elevate, non ci sarà alcun problema per schermi con risoluzioni inferiori.

Permetti la gestione della dimensione dei caratteri La dimensione del carattere dovrebbe essere modificabile dall’utente. Sebbene si tratti di un’insieme di clienti ridotta, alcuni visitatori avranno la necessità di aumentare la dimensione del font rispetto la norma, occorre quindi concedergli questa possibilità.

Gestione del font sul Web Rendere i font regolabili su una pagina web è più semplice che sull’interfaccia di un programma.

Tutto ciò che il designer deve fare è usare unità relative (es. 15em) piuttosto che assolute (es. 15pt).

Oggigiorno non esistono scuse per non creare pagine web fluide e responsive, grazie a CSS e HTML5 infatti la gestione dei contenuti di una pagina web è più efficace rispetto agli anni ‘90.

Progetta per accogliere font grandi Testi più grandi occupano più spazio, quindi occorre gestire il layout in modo che sia in grado di contenere font visualizzati in dimensioni differenti.

218

■■ Errori nell’interazione Abbiamo visto gli errori più comuni riguardo l’aspetto e la grafica di un sito. Vediamo ora quali difficoltà si possono incontrare a livello di interazione .

■■ Mostrare componenti del programma che dovrebbero rimanere nel backend ͽͽ Non allontanarti dagli obiettivi dell’utente ͽͽ Focalizza l’interfaccia sulle sole funzioni utili all’utente ͽͽ Progetta il Front-End principalmente per gli utenti e non per esperti e sviluppatori

■■ Restrizioni inutli Blooper che in realtà possono risultare dei punti di forza, in inglese anche definiti “features”: Twitter per esempio deve il suo successo anche al numero di caratteri limitato imposto durante la composizione dei messaggi.

I lettori DVD dei Macintosh Apple presentavano invece una limitazione che nel tempo risultava un problema. Il Region Code poteva essere cambiato un numero limitato di volte, dopodichè era necessario sceglierne uno definitivo.

■■ Concetti confondibili I visitatori di un sito web presentarono delle perplessità riguardo all’utilizzo di quattro termini molto simili tra loro: ͽͽ Membership: chi ha pagato per avere anche il servizio cliente. ͽͽ Subscription: per iscriversi come utente e ricevere la newsletter ͽͽ Access: area privata accessibile solo dagli utenti registrati ͽͽ Entitlements: servizi forniti per ogni ogni tipo di iscrizione Gli utenti confondevano i quattro elementi sopra elencati Perché troppo simili tra di loro: per migliorare la comprensione occorreva fondere i quattro termini in uno solo.

Il modo migliore per arginare i problemi di fraintendimento è studiare attentamente il modello concettuale del proprio target.

Nel caso si dovessero presentare contenuti simili tra loro, è opportuno cercare di accorparli altrimenti dare loro una definizione che ne distingua nettamente le caratteristiche.

■■ Chiedere di fornire dati o di compiere azioni inutili ͽͽ Ce lo siamo dimenticati. potresti ripeterlo?

Chiedere ogni volta all’utente di reinserire i dati precedentemente richiesti.

Quando si cerca per esempio un treno sul sito di una compagnia ferroviaria, è bene che luogo e data di partenza e arrivo vengano memorizzati per tutta la sessione di ricerca dell’utente.

ͽͽ Domande non necessarie ͽͽ Richiedere dati che potrebbero essere opzionali ͽͽ Richiedere più volte di accedere tramite login, nella stessa sessione

■■ Opzioni inutili ͽͽ Se l’opzione non effettua alcun cambiamento, non proporla. ͽͽ Se gli utenti non possono comprendere la domanda, non porla. ͽͽ Se una scelta è ovvia, rendila già attiva di base. ͽͽ Non mostrare false opzioni che non svolgono la loro effettiva funzione

■■ Appesantire la memoria degli utenti ͽͽ Password assegnate non modificabili ͽͽ Restrizioni insensate per la scelta della password ͽͽ Domande di sicurezza per il recupero della password che non funzionano ͽͽ ID difficili da ricordare

■■ istruzioni Lunghe che scompaiono in fretta Nel libro “GUI Blooper 2.0”, Jeff Johnson definisce questo problema “helicopter door”, in quanto gli elicotteri utilizzati in Vietnam avevano un problema di progettazione; sul portellone infatti erano state stampate le istruzioni per evacuare, tuttavia il primo step da seguire era di far saltare via il portellone. Si presupponeva quindi che i soldati, in una situazione di emergenza, leggessero le istruzio-

219

ni da cima a fondo, facessero saltare il portellone e si ricordassero tutti gli step successivi necessari a completare l’evacuazione.

Lo stesso problema è presente su alcuni programmi o siti web dove vengono fornite istruzioni su una finestra che una volta chiusa non è più recuperabile per una seconda lettura.

La soluzione migliore a questo problema oggi è quello di creare dei Wizard, cioè istruzioni guidate passo a passo che illustrano tramite una serie di step le funzioni del programma utilizzato.

In caso di dubbi, l’utente deve sempre avere la possibilità di ripetere il wizard o di accedere a un manuale di istruzioni.

■■ Funzioni inutli o scarsamente monitorabili Quando un programma fa qualcosa di inaspettato per l’utente, il problema è spesso dovuto al fatto che software si era impostato per una modalità differente da quella prevista dall’utente.

Spesso accade a chi è alle prime armi con Illustrator, di confondere la funzione della freccia bianca con quella nera; di per sé hanno aspetto e funzioni molto simili solo che la freccia nera seleziona e sposta le figure disegnate, mentre la freccia bianca seleziona e sposta i vertici che costituiscono i disegni.

Cosa si intende per modalità e Perché possono rappresentare un problema?

Per compiere determinate azioni in un programma è necessario attivare le relative funzioni. Se voglio scrivere in grassetto attiverò il pulsante con la B in grassetto; per uscire da questa “modalità” sarà sufficiente cliccare nuovamente sullo stesso pulsante.

Spesso le modalità attivate su di un programma non sono facilmente riconoscibili, soprattutto per una mancanza di feedback verso l’utente, che si trova impossibilitato a compiere l’azione voluta.

220

M

ode errors occur frequently in systems that do not provide clear feedback of their current state.

Norman, 1983

Le modalità limitano le azioni eseguibili, l’utente quindi deve essere costantemente consapevole delle possibilità offerte dal programma a seconda della modalità attivata.

Blender è un’ottimo programma di modellazione 3D, tuttavia, trattandosi di un programma complesso dotato di funzioni molto avanzate, presenta diverse difficoltà.

Per selezionare un’oggetto occorre attivare la modalità “Object Mode” mentre per modificarne la forma bisogna attivare passare alla “Edit Mode”. I programmatori hanno correttamente differenziato la visualizzazione dell’oggetto nelle diverse modalità, in modo che l’utente sia consapevole delle opzioni attive.

Per risolvere il problema occorre offrire modalità meno invasive e complesse, un continuo feedback sul loro effetto ed è utile sfruttare finestre modali, che si comportano in maniera differente in base alla modalità attivate. Generalmente durante l’uso di un programma, si aprono diverse finestre per accedere alle varie funzioni e modalità. La finestra principale è detta “Parent Window” tutte le altre finestre aperte tramite i pulsanti presenti sono “Child Windows” cioè finestre figlie. Per guidare l’esperienza dell’utente è bene fare in modo che l’apertura di una “Child Window” ponga delle restrizioni, che possono essere: ͽͽ Parent modal: bloccare l’interazione con la parent window, ma permettere di utilizzare tutte le altre finestre dell’applicazione in uso e di tutti gli altri programmi avviati. ͽͽ Application modal: bloccare l’interazione con tutte le altre funzioni dell’applicazione tranne quella attualmente in uso,

lasciando però la possibilità di lavorare anche sulle altre applicazioni. ͽͽ Modal or system modal: bloccare completamente l’interazione con tutte le finestre tranne che con quella “modale” cioè attualmente in evidenza.

Il proposito delle finestre modali è quello di obbligare l’utente a concentrarsi su quello che sta facendo, leggendo e rispondendo a tutte le richieste prima di proseguire.

Gli ambiti d’uso sono principalmente due: ͽͽ Un problema serio necessita dell’attenzione dell’utente. Se la finestra del messaggio di errore non è modale, l’utente potrebbe non vederla e farla scomparire dietro alle altre finestre aperte. ͽͽ Mentre la finestra di dialogo è aperta non devono essere apportati ulteriori cambiamenti. Se la finestra è pronta a ricevere l’input da parte dell’utente, l’applicazione deve impedire che possano essere applicate altre modifiche finché l’operazione in corso non viene conclusa.

Gli errori commessi dall’utente mentre una finestra modale è aperta diventano innocui, al massimo il computer emette un suono di avvertimento.

L’uso di questa tecnica ovviamente va moderato: imporre delle limitazioni all’utente può causare stress, soprattutto se la finestra di dialogo contiene messaggi come questo:

Le finestre modali ostacolano l’ergonomia di un software in tre maniere: 1. Costringono gli utenti a compiere un ulteriore sforzo mentale per restare al corrente della situazione 2. Inducono a commettere errori 3. Limitano le azioni degli utenti.

I primi due punti sono indubbiamente dei problemi mentre il terzo può anche essere un punto di forza del programma, a seconda di come viene adoperato.

Se possibile, rimuovere dal progetto modalità alternative cercando di rendere tutto pronto all’uso e riducendo le finestre di dialogo. Vediamo quindi come applicare ͽͽ Not modal: il più delle volte ͽͽ Parent modal: se necessario ͽͽ Application modal: occasionalmente ͽͽ Modal or system modal: possibilmente mai In sostanza bisogna evitare di imporre restrizioni e il l’utente deve essere costantemente al informato sullo stato programma in uso.

■■ Privare l’utente del controllo Lo schermo appartiene all’utente Venire incontro all’utente è giusto ma non bisogna esagerare.

Il display è bene che venga gestito dall’utente senza imporre un riordinamento automatico dei contenuti.

Funzioni per la ridisposizione degli elementi possono essere forni-

221

te, ma deve essere l’utente a decidere se usarle.

Preserva l’inerzia del display Preservare l’inerzia del display significa che quando un utente modifica qualcosa, la maggior parte degli elementi presenti su schermo devono rimanere immutati.

Piccoli cambiamenti, localizzati, di dati devono produrre solo piccolo cambiamenti, localizzati, sul display.

Quando sono necessari cambiamenti rilevanti e non localizzati, come la reimpaginazione di un documento o lo scambio di posizione di alcuni elementi), la trasformazione non dovrebbe essere istantane, ma prima dovrebbe essere annunciata chiaramente.

L’utente deve poter: ͽͽ vedere e comprendere i cambiamenti che stanno avvenendo ͽͽ poter continuare a lavorare senza sentirsi disorientato Dopo tutte queste avvertenze verrebbe da chiedersi come mai allora i siti mono pagina, ricchi di animazioni, funzionano.

In questi casi le animazioni vengono incontro all’utente. Non ci sono elementi che vanno ad aggiungersi o a sostituire quelli presenti all’improvviso, ma la pagina osservata muta in modo fluido e continuo. Far assistere l’utente ad animazioni non deve però significare forzarlo a guardare qualcosa di lento e noioso dall’inizio alla fine.

■■ Finestre di dialogo ingombranti L’Unione Europea nel 2015 ha imposto di inserire su tutti i siti web un avviso sul trattamento dei dati personali e dei cookie.

L’inserimento di un avviso simile, ha creato complicazioni sulla consultazione di alcuni siti, in quanto si presenta come un popup che copre eccessivamente la pagina visualizzata o addirittura impedisce di visitarla finché non viene chiuso.

222

In molti casi tuttavia il problema è stato affrontato egregiamente, mostrando l’avviso come una piccola barra a inizio o a fondo schermo, con pulsante di chiusura chiaramente visibile; il testo mostrato è molto sintetico e tramite un link è possibile accedere alla pagina di approfondimento. ͽͽ No “Cancel” Se il software non fornisce alcuna possibilità per interrompere un’operazione, è un chiaro esempio di “intrappolamento dell’utente”. ͽͽ Tutte le strade sono sbagliate Vengono fornite più opzioni, tra cui anche quella di interrompere l’operazione in corso, tuttavia non compare una scelta veramente utile all’utente. ͽͽ Il pulsante usato è inattivo L’opzione interessata pur comparendo tra le scelte disponibili, non è selezionabile. ͽͽ Scelte poco chiare Vengono offerte più opzioni, ma sono così simili tra loro o mal espresse che l’utente non sa cosa scegliere. ͽͽ No, non è “OK” Accade a volte di incontrare problemi senza via di uscita, dove l’unica opzione disponibile è quella di accettare, anche se gli effetti sono del tutto indesiderati.

Un esempio è l’errore di InDesign visualizzato qui di seguito:

■■ Reattività La reattività anche detta “Responsiveness” (responsività) è fondamentale per determinare l’usabilità di un software.

Non si tratta di un sinonimo di performance o velocità, ma qualcosa di più articolato, che copre più aspetti di un software Un software molto reattivo: ͽͽ permette di capire immediatamente se i comandi inviati tramite periferiche o linee di comando sono stati ricevuti ͽͽ mostra quanto tempo richiederà l’operazione per essere portata a termine ͽͽ consente di svolgere altre attività durante le attese ͽͽ gestisce le operazioni in coda, ancora da svolgere, in maniera ordinata e intelligente ͽͽ svolge le operazioni in background ͽͽ anticipa le richieste dell’utente La performance di un programma fa riferimento alla sua potenza e velocità di calcolo; un programma performante è capace di elaborare le operazioni e di produrre i risultati rapidamente.

Un programma può essere responsivo anche se senza essere performante.

■■ Problemi comuni di reattività ͽͽ Il sistema continua a rispondere a comandi del mouse anche se non si sta interagendo con esso. Un sito per esempio potrebbe continuare a scorrere/scrollare verso il basso autonomamente senza il volere del visitatore. ͽͽ I pulsanti rispondono al “click” in ritardo o non del tutto.

Ci sono casi in cui l’area di attivazione dell’animazione del pulsante è superiore a quella effettiva di attivazione, per cui sebbene avvenga l’animazione, il pulsante non invia alcun comando. ͽͽ Menu, sliders e scrollbar scattano o reagiscono in ritardo a ogni azione (lag), rendendo impossibile la coordinazione tra l’occhio e i movimenti del mouse. ͽͽ Moving and sizing operations don’t keep up with your actions and don’t provide temporary “rubber-band” feedback ͽͽ L’applicazione non avverte l’utente che è attualmente impegnata e incapace di svolgere ulteriori operazioni. ͽͽ L’applicazione risulta bloccata e non funzionante, mentre sta svolgento di periodiche operazioni di manutenzione. ͽͽ Non viene mostrato il progresso dell’operazione in corso ͽͽ Non viene fornita la possibilità di cancellare l’operazione in corso ͽͽ L’applicazione si avvia lentamente e anche una volta pronta, impiega parecchio tempo a svolgere i comandi impartiti ͽͽ L’applicazione non fornisce alcuna informazione quando si blocca, lasciando l’utente ignaro di ciò che sta accadendo. ͽͽ Il sito web è ricco di immagini ad alta definizione e animazioni, così che solo connessioni performanti sono in grado di visualizzarlo

223

ͽͽ Il sito ricarica l’intera pagina a ogni minima modifica.

Questo problema è comune quando si attivano dei filtri di ricerca su un sito per esempio di acquisti online; accade spesso che a ogni filtro attivato la pagina viene ricarica per aggiornare la ricerca. Avrebbe più senso affinare i risultati solo dopo aver selezionato tutti i filtri e su richiesta diretta dell’utente.

224

■■ PRINCIPI PER UN PROGRAMMA RESPONSIVO 1. Reattività e performance non sono la stessa cosa Un software può anche responsivo anche quando è lento. Una persona a cui viene posta una domanda, può essere reattiva anche se non conosce la risposta nell’immediato: la sua reattività è persino più significativa, se specifica quando sarà in grado di rispondere.

Al contrario se mi rivolgo a una persona che quasi sicuramente sa rispondere al mio quesito, ma questa mi ignora, in questo caso la reattività è molto scarsa. I computer e le connessioni Internet oggi sono molto veloci, tuttavia sono ancora frequenti problemi di scarsa reattività a causa della cattiva progettazione a monte.

2. L’interfaccia utente opera in tempo reale Perchè un software sia reattivo deve rispettare una certa tempistica a seconda delle richieste che gli vengono inviate. Secondo Nielsen e Robertson nell’interazione uomo-macchina le costanti di tempo da rispettare sono tre.

Costante di tempo

Aspetto del comportamento umano dove è applicabile la costante

Attinenza nella relazione uomo-computer

0.1s

ͽͽ Percezione degli eventi successivi ͽͽ Percezione della causa-effetto ͽͽ Fusione percettiva (percezione delle animazioni fluide)

ͽͽ Feedback per la corretta coordinazione mano-occhio (movimento del puntatore, spostamento e ridimensionamento della finestra, disegno) ͽͽ Feedback che un pulsante è stato cliccato ͽͽ Mostrare indicatori di caricamento ͽͽ Intervallo massimo tra i frame di un’animazione

1s

ͽͽ Scambio di turno nella conversazione (pause tra le affermazioni) ͽͽ Tempo di risposta minimo per eventi inaspettati

ͽͽ Mostrare il progresso dell’operazione (barre di caricamento) ͽͽ Termine della maggior parte delle operazioni richieste dall’utente (aprire una finestra di dialogo) ͽͽ Termine per operazioni non richieste (autosalvataggio)

10s

ͽͽ Concentrazione ininterrotta su di un compito ͽͽ Unit task: completamento di una parte di un compito complesso

ͽͽ Completamento della parte di una operazione complessa (una modifica all’interno di un editor di testo, controllare il conto corrente) ͽͽ Completare un passaggio di un wizard

225

3. Il numero di processi calcolabili è limitato I progettisti di solito hanno la possibilità di lavorare con computer all’avanguardia per garantire la massima qualità del prodotto.

Questa disponibilità induce però a realizzare soprattutto software compatibili con PC recenti e con una certa qualità prestazionale.

Prima di riempire un programma di funzioni aggiuntive, occorre accertarsi che possa essere utilizzato su tutti i dispositivi senza causare problemi.

4. Le attese non sono tutte uguali: il software non ha bisogno di fare tutto subito Le richieste inviate dall’utente hanno diverse priorità. Scrivere con la tastiera o click del mouse richiedono un feedback immediato, ma effettuare una ricerca su Internet o ridimensionare un’immagine prevedono almeno una breve pausa prima di fornire il risultato finale. Anzi in certi casi un feedback fornito troppo velocemente potrebbe essere poco credibile in quanto fa pensare che il computer non abbia elaborato veramente la richiesta 5. Il software deve rispondere alle richieste nell’ordine in cui vengono inviate 6. Il software non deve fare tutto ciò che gli viene chiesto Anche l’utente potrebbe svolgere operazioni non necessarie. Per esempio potrebbe salvare un documento di testo sul quale non sono state apportate modifiche. In tal caso sarebbe sufficiente che il programma mostrasse all’utente che il documento non richiede ulteriori salvataggi.

7. Gli utenti sono essere umani non computer L’utente punta direttamente al risultato. Proprio perché le persone tendono a svolgere più azioni contemporaneamente, l’attenzione solitamente non è incentrata sui comandi impartiti ma sui risultati ottenuti.

226

■■ TECNICHE PER GARANTIRE RESPONSIVITà A UN PROGRAMMA TIMELY FEEDBACK Rispondi subito all’input impartito Anche se il software non è in grado di rispondere immediatamente all’input impartito, deve almeno assicurare l’utente di aver ricevuto il comando.

Fornisci indicatori di caricamento L’utente deve sempre sapere se il programma è pronto a ricevere ulteriori comandi, o se deve ancora terminare i processi in corso.

Per fornire informazioni di questo tipo vengono usate barre di caricamento, dati numerici proporzionali al progresso raggiunto oppure semplicemente animazioni, come la clessidra dei sistemi Windows o la girandola di MacOs. Mostra indicazioni sul progresso di operazioni a lungo termine ͽͽ Mostra il lavoro rimanente, non quello portato a termine ✘ 3 file copiati ✔ 4 file ancora da copiare ͽͽ Mostra il progresso complesso, non quello di una parte del processo. ✘ 5 secondi rimanenti al termine di questo step ✔ 15 secondi rimanenti. ͽͽ Per indicazioni in percentuali, partire sempre da 1% e non da 0% ͽͽ Mostrare 100% solo al termine dell’operazione e solo per breve tempo. Se rimane visualizzato a lungo, l’utente si sente confuso o preso in giro. ͽͽ Mostra un caricamento fluido e progressivo, non avanzamenti improvvisi, altrimenti sembra fittizio il caricamento.

ͽͽ Attenersi a una scala di precisione sommaria e non esatta: ✘ 27 seconds ✔ Less than 1 minute.

Mostra subito le informazioni più importanti Un’applicazione può apparire più veloce semplicemente dando precedenza alle informazioni fondamentali. Non aspettare che la schermata sia renderizzata completamente prima di mostrarla.

Fornisci all’utente qualcosa su cui agire o pensare il più presto possibile.

Esattamente come un illusionista distrae gli spettatori con una mano, mentre prepara il trucco di magia con l’altra, così un’applicazione deve intrattanere l’utente, senza fargli pesare tempi di attesa per il completamento delle operazioni.

Per esempio se dovessimo gestire il caricamento di un’applicazione che mostra l’ora, daremmo innanzi tutto la precedenza alle lancette e alla loro posizione, poi di conseguenza verrebbero mostrate tutte le altre componenti dell’orologio fino ad arrivare agli abbellimenti grafici.

Mostra un’anteprima prima di effettuare l’operazione Se un’operazione prevede lunghi tempi di caricamento, occorre fornire almeno un’anteprima semplificata del risultato finale, in modo che l’utente sia più sicuro di ottenere il risultato desiderato.

Providing timely feedback on the Web ͽͽ Riduci la dimensione delle immagini ͽͽ Fornisci thumbnail, rapidi da caricare e visionare, collegan-

doli a pagine con contenuti più dettagliati o approfonditi. ͽͽ Dividi grandi quantità di dati in parti più piccole e offri la possibilità di navigare agevolmente tra di esse ͽͽ Crea le pagine web utilizzando anche CSS ma anche Javascript, Jquery e AJAX. Parallel Problem Solving Una sofisticazione ormai diffusa è quella di svolgere più operazioni in parallelo, consentendo di lavorare anche durante lo svolgimento di altri processi.

Rimanda i lavori meno urgenti Se occorre svolgere più processi contemporaneamente, il browser rischia di rallentare eccessivamente costringendo l’utente a sopportare lunghe attese o mostrando contenuti di interesse secondario.

Per garantire una migliore interazione, occorre lavorare sulla sincronicità, dando precedenza al caricamento delle informazioni più importanti e facendo calcolare le operazioni più lunghe da portare a termine in background, consentendo all’utente di continuare l’interazione Anticipa operazioni che potrebbe svolegere l’utente Durante l’utilizzo di un programma, ci sono diversi tempi morti, in cui non vengono ricevuti nuovi input in quanto l’utente è impegnato a consultare i contenuti e a pensare alle prossime azioni da svolgere.

Durante queste pause, il programma può svolgere delle operazioni in background, riducendo il futuro impiego di risorse e anticipando eventuali richieste dell’utente.

Sul motore di ricerca di Google per esempio non appena si digita una parola, il programma fornisce immediatamente dei risultati venendo incontro l’utente, anche se non ha ancora finito di scrivere.

227

■■ Gestire la coda di processi Per incrementare la velocità del programma è bene elencare i processi che devono essere svolti e ordinarli a seconda della loro priorità.

In questo modo sarà possibile riordinare le operazioni a seconda delle esigenze; questo tipo di riorganizzazione viene detto “nonsequential input processing”.

In alternativa si potranno interrompere i processi meno importanti.

228

Creazione di un sito web “Web design” coinvolge molteplici discipline: ͽͽ Graphic design ͽͽ Information design ͽͽ Interface design ͽͽ HTML, style sheet, and graphic production ͽͽ Scripting and programming ͽͽ Multimedia Questo significa che se non si vuole diventare dei “Jolly” tuttofare, occorre cercare un team in cui potersi specializzare in un ambito preciso.

■■ Frontend e Backend Lo sviluppo di un sito web comprende principalmente due aspetti.

Frontend design / Client-side “Frontend” fa riferimento a tutto ciò che compare su browser durante la visita del sito. Le discipline che si occupano del frontend prevalmentemente sono: ͽͽ Graphic design ͽͽ Interface design ͽͽ Information design ͽͽ UX Design Per la produzione di questo aspetto del sito occorre conoscere principalmente HTML, CSS e JavaScript.

“Backend” si riferisce a tutti programmi e gli script che entrano in funzione su server dietro al “sipario” del browser.

Lo sviluppo del backend serve a rendere le pagine dinamiche, interattive, fornendole di funzioni utili al visitatore.

Generalmente questo aspetto viene curato da programmatori, ma è bene che anche i designer sappiano destreggiarsi anche con i linguaggi di programmazione. Le discipline coinvolte in questo caso sono: Information design (per l’organizzazione delle informaziuomni su serverr ͽͽ Forms processing ͽͽ Database programming ͽͽ Content management systems Alcuni dei linguaggi di programmazione server-side più diffusi sono: PHP, MySQL, ASP, JSP, Python, Perl/CGI, Ruby on Rails, Java ecc...

■■ Cassetta degli attrezzi I linguaggi coinvolti nella creazione di un sito web hanno complessità differente, generalmente per il solo FrontEnd la difficoltà d’uso non è traumatica, proviamo a elencarli in ordine di difficoltà: ͽͽ HTML/XHTML ͽͽ Style sheets (CSS) ͽͽ JavaScript/DOM scripting ͽͽ Server-side scripting ͽͽ XML ͽͽ Java

Backend design / Server-side

229

HTML/XHTML HTML (HyperText Markup Langage) è il linguaggio necessario a definire la struttura delle pagine web: non è un linguaggio di programmazione, ma di markup (marcatura) infatti serve a identificare e descrivere i diversi elementi di un documento come titoli, paragrafi, liste ecc...

XHTML (eXtensible HTML), non è altro altro che un versione aggiornata di HTML con delle regole più rigide da rispettare per una corretta sintassi.

CSS (Cascading Style Sheet) Mentre XHTML è usato per descrivere il contenuto di una pagina, i fogli di stile (CSS) stabiliscono come vogliamo che i contenuti vengano visualizzati.

Un sito web funziona anche senza foglio di stile, tuttavia in questa maniera deve sottostare allo stile grafico assegnatogli dal browser, che è tutto fuorchè bello a vedersi.

I fogli di stile sono essenziali per uniformare la grafica all’interno di un sito web, infatti un singolo file CSS può essere assegnato a più pagine XHTML contemporaneamente. In questo modo viene automatizzato il lavoro di modifica dell’aspetto grafico di un sito.

Tramite CSS3 è possibile anche controllare la visualizzazione dei documenti su media differenti dal tradizionale display del computer desktop.

Sembrerebbe

che JAVA e Javascript siano JavaScript/DOM scripting collegati tra di loro.

Invece no.

Infatti, JAVA sta a Javascript come il prosciutto sta a un criceto

Il nome può trarre in inganno, ma JavaScript è un linguaggio di scripting che, sebbene abbia una sintassi molto simile a JAVA, non è JAVA, tanto è vero che è stato pure sviluppato da un’azienda differente (Netscape Communications Corporation e non Sun Microsystems ). Javascript viene inserito nelle pagine HTML per gestirne il comportamento e renderle interattive sul lato client.

Alcune funzioni che neccsitano di JavaScript possono essere: ͽͽ Verificare la validità dei dati inseriti su di un form da parte dell’utente ͽͽ Sostituire lo stile di un elemento o di un’intera pagina web in determinate condizioni (cambio di risoluzione) ͽͽ Memorizzare nel browser le informazioni riguardanti l’utente e la sessione corrente per usi futuri.

Esistono anche altri linguaggi di scripting ma il più diffuso è senza dubbio JavaScript che può anche essere chiamato ECMAScript.

Quando si sente parlare di DHTML (Dynamic HTML) o DOM (Document Object Model) scripting, si fa riferimento a tutti gli elementi di una pagina web che possono essere manipolati tramite un linguaggio di scripting.

Scrivere in JavaScript significa programmare, quindi occorre spendere molto tempo per comprenderne il funzionamento, soprattutto se non si ha già una base nell’uso dei linguaggi di programmazione.

Per semplificare la realizzazione di siti web, sono disponibili molti strumenti preconfezionati, che consentono di integrare funzioni programmate in JavaScript in tutta facilità.

Sostanzialmente un sito web è una torta a tre strati (layers).

Structure Layer - XHTML Presentation Layer - CSS Behaviour/Interaction Layer - AJAX

230

Server-side programming Alcuni siti web, detti anche siti vetrina, sono costituiti semplicemente da un insieme di pagine XHTML statiche contenenti testi e immagini.

Tuttavia la maggior parte dei siti commerciali dispongono di funzioni più avanzate come form, aree private per utenti registrati, database, pagine generate dinamicamente, gestione dei pagamenti online ecc...

Tutte queste funzioni vengono gestite da applicazioni avviate sul server. I linguaggi di programmazione che operano su server sono: ͽͽ CGI Scripts (written in C+, Perl, Python, or others) ͽͽ Java Server Pages (JSPs) ͽͽ PHP ͽͽ VB.NET ͽͽ ASP.NET ͽͽ Ruby on Rails

di gestire dati.

Software come Microsoft Office, Adobe Flash, Apple iTunes o Inkscape, funzionano anche grazie all’uso di file XML.

Anche in questo caso esistono soluzioni preconfezionate che consentono di inserire funzioni avanzate in Backend senza troppi grattacapi.

Java JAVA è un linguaggio di programmazione completo, infatti è utilizzabile per creare applicazioni web dette anche “applets”, ma anche per realizzare veri e propri programmi aziendali.

Non è essenziale conoscere JAVA per realizzare siti web, rappresenta comunque una grande risorsa, soprattutto se si intende lavorare anche su piattaforme Android.

XML (eXtensible Markup Language) XML non è un vero e proprio linguaggio ma un insieme di regole per la creazione altri linguaggi di markup.

Per esempio tramite XML potremmo creare un linguaggio di markup personalizzato che include gli elementi <ingredienti>, <ricette>, e <porzioni>, che descrivono accuratamente il contenuto delle informazioni presenti nel documento.

Le “etichette” create per descrivere ciascun contenuto, possono poi essere utilizzate come dati: XML infatti ha dimostrato di essere uno strumento potente per lo scambio di informazioni tra applicazioni.

Sebbene XML sia stato progettato per il Web, si è presto diffuso anche tra le applicazioni desktop proprio grazie alla sua capacità

Sul web XML per esempio viene usato da XHMTL, MathML e dagli RSS (Really Simple Syndication o RDF Site Summary) che permettono di consultare i contenuti di un sito tramite appositi reader.

Persino il formato SVG (Scalable Vector Graphics) sfrutta i tag per descrivere le geometrie e le loro forme.

Ajax (Asynchronous JavaScript and XML) Ajax è una tecnica per creare applicazioni web interattive. Il vantaggio di usare Ajax, è che permette ai contenuti visualizzati nel browser di cambiare, senza la necessità di aggiornare l’intera pagina. Grazie a questa tecnica le pagine web sono asincrone, quindi, non necessitando di essere ricaricate a ogni richiesta, le applicazioni web si comportano come software desktop.

231

■■ Software utili Web authoring Per la scrittura di pagine web (web authoring) esistono una miriade di software, alcuni sono anche WYSIWYG (What You See Is What You), nel senso che mostrano in tempo reale su schermo il sito che si sta creando, in base al codice inserito.

Legenda: L - Linux

W - Windows

X - OSX

Free e/od open source Bluefish Seamonkey Aptana Studio Kompozer Komodo Edit Nvu BlueGriffon Gedit Blocco Note (Windows) Notepad++ NetBeans Advanced Code Editor (Wordpress)

L L-W-X L-W-X L-W-X L-W-X L-W-X L-W-X L W W W-X L-W-X

COMMERCIALI Adobe GoLive Adobe Dreamweaver Microsoft Expression Web Smultron Espresso 232

W-X W-X W X X

Grafica In questo caso i programmi a disposizione sono meno, tuttavia è sempre possibile trovare delle alternative gratuite molto valide.

Dato che il web sta favorendo la diffusione della filosofia FOSS (Free and open source), è bene cercare di dare supporto ai team di sviluppatori che si impegnano a programmare software gratuiti e soprattutto liberi.

Free e/od open source GIMP Inkscape Krita Libre Office Draw Paint.NET MyPaint Blender

L-W-X L-W-X L-W-X L-W-X W L-W-X L-W-X

COMMERCIALI Adobe Photoshop Adobe Illustrator Adobe Fireworks Adobe InDesign CorelDRAW

W-X W-X W-X w-x w-X

■■ Multimedia Free e/od open source

W-X W-X W-X-L

Google Web Designer OpenElement Audacity

COMMERCIALI W-X-L W-X W-X W-X w-x w-X w-X

Pinegrow Adobe After Effects Adobe Flash Adobe Fireworks Adobe Photoshop Tumult Hype Flux

■■ FTP (file-transfer program) Un FTP consente di scambiare file con il server. Per caricare un sito sul server è consigliabile usare un FTP.

Free e/od open source Filezilla FireFTP (Firefox Extension) Cyberduck WinSCP

W-X-L W-X-L W-X W

COMMERCIALI Transmit

X

■■ Database Gui Manager Free e/od open source W-X-L W-X-L W-X W-X-L W-X-L X W W-X-L W-X-L

Workbench phpMyAdmin HeidiSQL Adminer SQuirreL SQL Sequel Pro MyDB Studio DBComparer DBeaver

COMMERCIALI Navicat for MySQL Valentina Studio Skipper DbVis SQLyog SQLWave dbForge Studio

W-X-L W-X W-X-L W-X-L W-L W W

■■ Os e browser Per verificare che un sito web funzioni correttamente è bene disporre di più browser differenti, in modo da effettuare test in più piattaforme possibili. Browser come Internet Explorer o Safari non sono multipiattaforma, cioè non sono installabili su tutti i sistemi operativi, quindi è necessario avere più computer o utilizzare Virtual Machine per disporre di più sistemi per il testing dei siti web.

233

Le distribuzioni Linux sono facilmente installabili su tutti i computer, è possibile cioè affiancare a Windows o a OSX anche una distribuzione Linux come Ubuntu, RedHat, OpenSuse, Fedora ecc...

Apple offre Boot Camp, che permette di installare Windows o Linux a fianco a OSX. Esiste anche Parallels Desktop, una soluzione commerciale che evita di dover riavviare il computer per selezionare un’altro sistema operativo.

Una delle soluzioni migliori per avere più sistemi operativi sullo stesso computer è l’utilizzo di Virtual Machine. Tramite questi programmi è possibile emulare un computer differente da quello in nostro possesso, in modo da poterci installare sistemi differenti, magari anche vecchi di una decina di anni (Windows 95, OSX 10 ecc...).

Per emulare un computer sul proprio sistema operativo è possibile usare Oracle VM VirtualBox oppure VMware.

■■ Setup Google Webmasters Tramite questi strumenti di Google è possibile migliorare la visibilità del proprio sito, ricevendo anche utili consigli tecnici su eventuali difetti e problematiche.

Il servizio chiederà di verificare il sito in una di queste maniere: ͽͽ HTML tag (Aggiungendo un tag <meta> in cima all’index. html) ͽͽ Caricare un il file HTML fornito, contenente un codice di verifica ͽͽ Domain Name (aggiungere un record TXT al dominio del sito) ͽͽ Google Analytics (usare il codice in uso su Google Analytics) 234

ͽͽ Google Tag Manager (usare il codice in uso su Tag manager)

■■ CMS (Content management systems) I CMS sono dei magnifici strumenti per la produzione di siti web, soprattutto per Web Designer novelli che non hanno ancora dimestichezza con i linguaggi di markup e di programmazione.

Principalmente si tratta di programmi dotati di interfaccia, installabili su server. Ognuno di questi programmi offre dei pulsanti per creare pagine, inserire testi, immagini, link, tutto senza dover scrivere una sola riga di codice. Inoltre sono modulari, nel senso che appena installati offrono una quantità limitata di funzioni di base, però permettono di scaricare e installare estensioni che aggiungono nuove funzionalità.

Ovviamente anche utilizzando dei CMS si incontrano alcune difficoltà, soprattutto se si intende realizzare siti web particolarmente complessi o innovativi.

Se intendiamo personalizzare alcuni moduli e funzioni, dobbiamo modificare codice scritto da altre persone, che non è sempre un’operazione semplice. Ma vediamo nel dettaglio pro e contro.

Pro ͽͽ Sono estensibili - A partire dallo scheletro dell’installazione di base è possibile trasformare il sito adattandolo alle proprie esigenze tramite l’aggiunta dei Moduli sviluppati dalla comunità ͽͽ Permettono una rapida prototipazione - Lo sviluppo di un sito tramite un CMS può richiedere poche settimane se non addirittura giorni grazie ai numerosi moduli a disposizione e il forte supporto della comunità ͽͽ Vengono aggiornati costantemente per adattarsi alle nuove tecnologie, garantire maggiore sicurezza e fornire un’interfaccia in linea con il design più in voga

ͽͽ Comunità vasta e molto disponibile, sia sui siti ufficiali del CMS che su social come Stack Overflow ͽͽ Sono facili da ridimensionare e alleggerire, evitando a un sito di diventare troppo lento da caricare ͽͽ Sono versatili e adattabili a piattaforme differenti. L’utilizzo dei principi dell’architettura RESTful, permettono di mantenere il core indipendente dalla piattaforma su cui si lavora, permettendo di riutilizzarlo in situazioni differenti ͽͽ Offrono codice Open Source quindi mettono a disposizione tutti i propri strumenti in completa trasparenza, permettendo ogni sorta di personalizzazione Contro ͽͽ Curva di apprendimento ripida. Occorre comprendere la struttura del CMS e dei singoli plugin e avere una buona conoscenza di JavaScript e PHP, così da essere in grado di fare personalizzazioni e ottimizzazioni. ͽͽ Gli aggiornamenti del core non sono sempre facili da gestire, soprattutto per la mancata retrocompatibilità con certi moduli. In compenso la comunità non fa attendere troppo tempo perchè vengano aggiornati i modali o siano sviluppate nuove soluzioni. ͽͽ I plugin facilitano la realizzazione di un sito, ma contengono anche funzioni di cui non sempre abbiamo bisogno. Installare molti plugin/moduli su CMS causa un rallentamento del sito, quindi occorre selezionare solo quelli indispensabili e soprattutto ottimizzarli. ͽͽ Certi moduli potrebbero contenere codice che va in conflitto con quello di altre estensioni installate: di conseguenza rallentano il sito o ne impediscono il corretto funzionamento. È consigliabile quindi evitare di l’utilizzo di numerosi moduli se non siete esperti programmatori e Web Designer.

Creare siti complessi con i CMS è possibile ma occorre fare numerosi interventi per ottimizzare e snellire il codice.

ͽͽ Richiedono una certa dimestichezza con i linguaggi usati nel Web Design compresi PHP e MySQL, soprattutto per poter essere in grado di ottimizzare al meglio i moduli ͽͽ Sono Open Source...è sicuramente un Pro, ma rappresenta un’arma a doppio taglio. La completa trasparenza infatti permette agli hacker di conoscere l’architettura della maggior parte dei siti costruiti con CMS, facilitando le modalità di attacco.

■■ MVC Il Model-View-Controller (Modello-Vista-Controllo), in informatica, è un pattern architetturale molto diffuso nello sviluppo di sistemi software, in particolare nell’ambito della programmazione orientata agli oggetti, in grado di separare la logica di presentazione dei dati dalla logica di business. ͽͽ MODEL - Fornisce i metodi per accedere ai dati utili all’applicazione; ͽͽ VIEW - Visualizza i dati contenuti nel model e si occupa dell’interazione con utenti e agenti; ͽͽ CONTROLLER - Riceve i comandi dell’utente (in genere attraverso il view) e li attua modificando lo stato degli altri due componenti.

235

Aggiorna l’output per la visualizzazione

Model (Logica -Core)

VIEW (UI - Interfaccia)

Applica le modifiche ai dati

controller

(Input dell’utente)

ͽͽ Offre documenti per lo sviluppo di Temi e Moduli/Plugin ͽͽ La comunità di utenti e sviluppatori è vasta e disponibile ͽͽ Consente di utilizzare “package manager” come Uses Composer o NPM per installare e gestire Moduli/Plugin di terze parti. ͽͽ Il processo di sviluppo del sito è lineare e facile da modificare. ͽͽ Riesce a rendere l’interazione semplice, sia per lo sviluppatore sul lato server che per l’utente sul lato client.

■■ CMS più diffusi Mostra i risultati delle modifiche apportate

Interagisce Utente

La maggior parte dei CMS e dei Framework oggi seguono il modello MVC per permettere alla piattoforma di essere scomponibile, applicabile e riutilizzabile in più situazioni.

■■ Caratteristiche di un buon cms ͽͽ Offre funzioni di “Post Types” che permettono di gestire i contenuti sulle pagine, anche in maniera differente rispetto ai template forniti di base Es. Custom Post Types in WordPress ͽͽ Possibilità di aggiungere Extra Fields o Custom Fields sia da parte dello sviluppatore che dell’utente.

Es. K2 e Extrafields in Joomla o Advanced Custom Fields in WordPress ͽͽ Dispone di una grande varietà di Plugin 236

Per la sua semplicità d’uso è una scelta consigliata per chi non ha ancora molta esperienza nel web design. È un’ottima piattaforma per la creazione di siti web non troppo complessi, blog e negozi.

Essendo nato principalmente per la realizzazione di blog, non ha una struttura basata sul modello MVC. A livello di sicurezza non è molto affidabile in quanto è molto conosciuto e mantiene in memoria informazioni importanti all’interno del Database MySQL. Siti realizzati con WordPress: newyorker.com techcrunch.com bbcamerica.com sonymusic.com beyonce.com blogs.xerox.com bata.com/ rollingstones.com

amc.com/shows/the-walking-dead snoopdogg.com

che operano al di fuori del core di Joomla. Si tratta di applicazioni per il backup, la gestione dei SEO, CCK ecc...

È il CMS con la curva di apprendimento più ripida ma è anche il più potente e il più affidabile in termini di sicurezza.

Siti realizzati con Joomla!; gsas.harvard.edu linux.com guggenheim.org unric.org peugeot.com ww2.media-teca.com/mediateca/ www.jwp24.com philbertphotography.com dezvaluiri.ro hondashellybeach.co.za

Siti realizzati con Drupal: whitehouse.gov louvre.fr ikea.com/ dev.twitter.com economist.com teslamotors.com weather.com brunomars.com aljazeera.com foxnews.com warnerbros.com

Respond è un CMS open source e responsive studiato appositamente per creare siti responsive, infatti sfrutta i framework Bootstrap 3 e AngularJS di Google.

Bootstrap in particolare è noto per essere stato utilizzato nella creazione di Twitter.

Ottimo per l’e-commerce e il social networking, ma richiede un buon livello di conoscenze tecniche. Segue il modello MVC ed è estensibile con tre tipi diversi di contenuti: Plugins, Modules, e Components. I plugins aggiungono piccole funzioni, spesso a livello di backend, i Modules sono l’equivalente dei widget di Wordpress, mentre i Components sono delle vere e proprie applicazioni

237

offerte dai cms specifici. Il punto forte di bbpress è la sua facilità di utilizzo e leggerezza.

Django è un CMS innovativo, basato non più su PHP ma ha un framework basato sul linguaggio di programmazione Python. Non è assolutamente un CMS adatto a chi non ha esperienza in programmazione: la comunità è un continua crescita, tuttavia anche la curva di apprendimento è molto ripida.

Sebbene sia un CMS difficile da usare presenta numerosi vantaggi in termini di prestazione e sicurezza; python infatti è un linguaggio più recente ed efficiente di PHP, non a caso viene utilizzato anche per siti come Google, Dropbox, Youtube, Reddit ecc...

Siti realizzati con djangoCMS; pinterest.com theonion.com instagram.com disqus.com spotify.com mahalo.com washingtonpost.com mozilla.org nasa.gov bitbucket.org prezi.com rdio.com

Bbpress è la soluzione offerta dagli sviluppatori di wordpress per creare un forum perfettamente integrato con il cms principale.

Le funzionalità del forum sono parecchio ridotte rispetto a quelle 238

■■ Alternative ai cms tradizionali

Sfrutta il framework Silex e consente di usare Twig come template engine. è un cms che punta a fornire un’esperienza simile a quella di Wordpress, sfruttando però un core adatto propriamente alla creazione di siti web e non solo blog.

Non dispone ancora di molti plugin, tuttavia gli sviluppatori si stanno impegnando a rendere la piattaforma adatta anche ai meno esperti.

Basato sul framework PHP Laravel, è un CMS con struttura MVC. è ancora giovane per cui si adatta più che altro all’utilizzo da parte di sviluppatori e non aspiranti webdesigner.

Processwire contiene già nel core funzioni di gestione dei contenuti, che in Wordpress sono integrabili solo tramite ACF e Pods. Dispone sia di plugin ufficiali che di terze parti, tuttavia punta molto sui contenuti a pagamento.

■■ Non solo PHP NODE.JS

Magento è un software open source per l’e-commerce sviluppato in PHP. È pubblicato con licenza Open Software License versione 3.0.

PrestaShop è un CMS open source realizzato in PHP, utilizzato per realizzare siti di commercio elettronico.

I temi Prestashop sfruttano il motore di template Smarty, il quale permette una netta separazione tra contenuti, grafica e programmazione. Grazie a questa impostazione, il web designer può occuparsi della grafica del sito lavorando sui file di template e CSS, mentre il developer può intervenire sui files PHP (difatti la documentazione ufficiale è divisa in due sezioni ben distinte, una per i web designer ed una per gli sviluppatori).

Abbiamo visto che esistono anche piattaforme alternative agli standard PHP e MySql come djangoCMS che si basa su Python.

Un’altro linguaggio di programmazione server-side molto giovane è Node.js: sviluppato a partire dal progetto V8 di Google, Node.js sfrutta come linguaggio JavaScript.

Vediamo alcuni progetti conosciuti che sfruttano Node: ghost

Distribuito tramite la licenza MIT, ghost è una piattaforma Open Source per creare Blog. Il progetto è stato finanziato tramite Kickstarter dalla comunità e ha l’obiettivo di diventare la nuova alternativa a Wordpress in quanto è diventato un CMS più complesso di quanto fosse all’inizio. keystone.js

È un CMS basato su Express e MongoDB

239

apostrophe

La particolarità di Apostrophe è quella di poter spostare gli elementi inseriti nella pagina tramite semplcie drag&drop.

Ruby on Rails Ruby on Rails, spesso chiamato RoR o semplicemente Rails, è un framework open source per applicazioni web, costruito con il linguaggio di programmazione Ruby. I suoi obiettivi sono la semplicità e la possibilità di sviluppare applicazioni di concreto interesse con meno codice rispetto ad altri framework. Il tutto con necessità di configurazione minimale.

pencilblue

■■ Code wars

Alternativa a ghost, offre già una ventina di plugin e supporta Custom Fields e Custom Post Type.

Come potete notare dalla lunga lista di CMS a disposizione, è in atto una vera e propria sfida tra linguaggi di programmazione.

I principali protagonisti sono PHP, Python e Ruby, vediamo rapidamente cosa li differenzia.

PHP

Buckets

Buckets

Il concetto alla base di buckets, lo dice il nome, è quello del secchiello. Praticamente i Custom Post Type vengono definiti secchielli da riempire con i contenuti che più si preferisce.

I templates sono basati su Handlebars.

Rappresenta a un’ottima alternativa a ghost in quanto offre già la possibilità di creare Custom Fields.

Pro ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ

240

Free software rilasciato sotto la licenza PHP Facile da imparare Comunità vastissima Supporta database molto capienti Offre un grande numero di estensioni e applicazioni open source Permette l’esecuzione di codice in ambienti limitati Permette di gestire sessioni e API È un’ottima alternativa a Microsoft’s ASP (Active Server Pages) Può essere installato sulla maggior parte dei server Funziona praticamente su ogni piattaforma e sistema operativo

Contro ͽͽ Non è adatto alla creazione di applicazioni desktop ͽͽ Riconoscimento e risoluzione degli errori non sempre facile ͽͽ La semantica del linguaggio usato per i parametri di configurazione globali può cambiare, complicando implementazione e portabilità ͽͽ Semantica Call By Value ͽͽ Meno sicuro di altri linguaggi di programmazione a causa della sua età e della sua diffusione Python Pro ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ

Facile e veloce da imparare È compatibile con molti sistemi e piattaforme La sintassi è ordinata e di facile lettura Supporto per una rapida prototipazione e semantica dinamica.

Comunità molto grande e disponibile Applicazioni facili da realizzare testando e importando funzioni da file esterni Riusabilità implementando packages e moduli Programmazione orientata agli oggetti

Contro ͽͽ Non lavora molto bene su multiprocessori ͽͽ Rispetto agli altri linguaggi, i programmatori che usano Python sono una piccolo gruppo ͽͽ Assenza di supporto commerciale, persino per progetti Open Source (tuttavia la situazione sta cambiando) ͽͽ Limitato accesso al Database access layer

ͽͽ Si ritiene che sia più lento di altri linguaggi come Java RUBY Pro ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ

Open-source È compatibile con molti sistemi e piattaforme Può essere affiancato a codice HTML È un linguaggio di programmazione ad alto livello (VHLL) Permette l’incapsulamento di metodi all’interno di oggetti Programmazione orientata agli oggetti (OOP) Tecniche avanzate per la gestione di testi e stringhe Può allacciarsi facilmente a DB2, MySQL, Oracle, e Sybase Scalabile e facile da mantenere anche su applicazioni complesse Ha una sintassi semplice e pulita che ne facilita l’apprendimento Possibilità di scrivere applicazioni multi-threaded tramite una semplice API Fornisce classi avanzate per array È in grado di scrivere su librerie esterne in Ruby o C Permette di usare “reserved words” come identificatori Ha delle funzioni per la gestione della sicurezza Dispone di un debugger Ha una sintassi flessibile Gestisce molto agilmente le stringhe

Contro ͽͽ Ha una curva di apprendimento abbastanza ripida ͽͽ Non ci sono molte guide e tutorial

241

ͽͽ Tempi di processamento (CPU) lenti rispetto agli altri linguaggi di programmazione ͽͽ Sviluppo e aggiornamenti lenti RIASSUMENDO ͽͽ PHP è il linguaggio più adatto alla creazione di pagine HTML ͽͽ Python è un linguaggio versatilissimo. Può essere usato sia per WebApp, crawler/bot, daemons e applicazioni desktop ͽͽ Ruby è ottimo per la creazione di WebApp semplici che assolvono poche funzioni in modo mirato.

■■ WORDPRESS PLUGINS ACF - Advanced Custom Fields Questo plugin aggiunge un’interfaccia per gestire campi personalizzati per tutte le tipologie di custom post type, di tassonomie, di file multimediali e di utenti.

Una volta scaricato ed attivato, il plugin inserisce una nuova voce nel menu amministrativo, che comprende la pagina per la gestione dei campi, una pagina per l’esportazione e un’altra per l’installazione dei componenti aggiuntivi.

AJAX Page Loader Come suggerisce il nome, permette di implementare facilmente AJAX, caricando post e pagine senza dover ripristinare la pagina per intero.

WP Custom Post Template

Il principio è smile a quello dei plugin per creare custom fields, 242

solo che in questo caso viene aggiunta la possibilità di applicare template personalizzati agli articoli/post.

In Wordpress infatti solo le Pagine permetterebbero l’utilizzo di template differenti per i contenuti.

Single Post Template

Valida alternativa a Wp Custom Post Template.

PODS

Alternativa ad acf permette di creare custom post type e custom fields.

Custom Post Type UI

Questo plugin fornisce un’interfaccia per creare e amministrare i “custom post types” e le tassonomie.

ASYNC

Abilita il caricamento asincrono di file CSS e JavaScript per migliroare le performance del sito.

Meta Box

I meta box sono i blocchi visibili nella schermata di modifica dei post e delle pagine. La loro funzione è quella di permettere all’utente di inserire informazioni aggiuntive al contenuto principale del post.

I metabox possono essere considerati una versione più evoluta dei campi personalizzati.

Per fare qualche esempio, le sezioni pubblica, formato, tags, immagine in evidenza sono tutte metabox.

Meta Box non è altro che un plugin che permette di creare permet-

te di creare meta box e custom fields personalizzati.

Meta Slider

TinyMCE Advanced

Plugin che aggiunge TinyMCE, una piattaforma open source sviluppata in Javascript che permette una modifica WYSIWYG dei testi. A grandi linee è un po’ come aggiungere le funzioni di modifica dei testi di un editor di testo (gestione font, paragrafi, caratteri ecc...)

Recent Posts Slider

Utile nelle homepage per mostrare tramite slider i post più recenti.

Nivo Slider

Plugin per la realizzazione di slider, disponibile anche in jQuery per l’implementazione su siti non realizzati in Wordpress. È open source “Free to Use & Abuse“, infatti è coperto dalla licenza del MIT, quindi può essere usato in qualunque tipo di progetto, commerciale o privato.

NextGEN Gallery Un’altro plugin molto diffuso per la creazione di gallery a scacchiera e slideshow.

Ebbene si, esistono molti plugin per la gestione degli slider. Meta Slider crea responsive slideshows appoggiandosi a strumenti come Nivo Slider, Flex Slider, Coin Slider e Responsive Slides.

EU Cookie Law Compliance Message

Il 2 giugno 2015 è divenuto obbligatorio per i gestori di siti web adeguarsi al Provvedimento “Individuazione delle modalità semplificate per l’informativa e l’acquisizione del consenso per l’uso dei cookie”. Questo plugin semplifica questa operazione, inserendo un messaggio di avviso all’apertura del sito.

Cookie Notice by dFactory

Plugin alternativo per inserire l’informativa riguardo i cookie.

Theme Check

Un modo semplice e veloce per testare il tema e verificare se rispetta tutti i più recenti standard e le pratiche di WordPress. Utile per lo sviluppo di un tema.

Contact Form 7

Permette la creazione di contact forms e delle mail da essi generate. I form creati con questo plugin supportano Ajax, captcha e Akismet. Per l’inserimento dei captcha occorre installare il plugin “Really Simple CAPTCHA”.

243

W3 Total Cache

Plugin che semplifica l’ottimizzazione delle performance del sito (WPO - Web Performance Optimization), sfruttando avanzate tecniche di caching.

WP-Optimize

Strumento di pulizia e ottimizzazione che non necessita di PhpMyAdmin per accedere al database.

WP Super Cache

crea dei files statici HTML che utilizzerà invece di caricare i più pesanti script PHP di WordPress, al fine di migliorare la velocità di caricamento della tua piattaforma.

do statistiche sui visitatori, servizi di sicurezza, velocizzando la visualizzazione di immagini e consentendo di ottenere più traffico.

WP-PageNavi Uno degli strumenti più comuni per l’inserimento della paginazione all’interno delle pagine web.

Yoast SEO

Come lascia intuire il nome, questo plugin serve a ottimizzare la diffusione del sito sui motori di ricerca

Allow PHP in Posts and Pages Google XML Sitemaps

Plugin che consente di creare, in modo totalmente automatizzato, la sitemap XML del proprio sito basato su WordPress.

Akismet

Akismet verifica i commenti attraverso il proprio servizio web, indicando se possono essere considerati spam o se invece sono commenti legittimi.

Jetpack di WordPress.com Jetpack è un plugin gratuito e open source che semplifica la gestione dei siti WordPress offren244

Per questioni di sicurezza Wordpress non consente di inserire codice PHP all’interno delle pagine del sito creato.

Es. [php]

global $user_ID;

if($user_ID == 1){

echo “Hello World”; } [/php]

Questo codice restituirà la frase “Hello World” a tutti gli user con id_#1 e nessun altro.

Auto Thumbnailer

Crea automaticamente i thumbnail di immagini caricate e pubblicate. Include il supporto per Oembed.

Easy FancyBox

FancyBox è uno script per la visualizzazione di immagini, contenuti html e multimediali, con uno stile e un’interazione migliori, simili a quelli adottati da Apple tramite i “lightbox”. Il plugin è stato sviluppato in JQuery con la licenze MIT e GPLTramite questo plugin automaticamente tutti i contenuti multimediali adotteranno FancyBox.

Simple Slideshow Manager

Plugin per la creazione di Slideshow Responsive, visualizzabili tramite Widget, Shortcodes o codice PHP. Supporta anche video di Youtube e Vimeo.

Slideshow

Un’altro plugin per la creazione di slideshow.

Rocket Lazy Load

Nel 2015 è esplosa la moda dei siti a pagina singola, dove i contenuti sono presentati a cascata. La consultazione quindi avviene prevalentemente tramite scroll/swipe e non trime l’uso di menù di navigazione.

Rocket lazy load fa in modo che le vengano caricate solo le immagini visualizzate e non quelle che devono ancora essere raggiunte dall’utente.

List category posts

Questo plugin permette di pubblicare la lista di tutti i post, suddivisi per categoria, con il semplice uso del codice [catlist] Es. [catlist id=1] [catlist name=”news”]

Linchpin - PrevNextPage

Spesso può essere necessario creare pulsanti tipo “Next” “Prev”, per visualizzare i contenuti precedenti o successivi. È sufficiente aggiungere i codici functions next_page_link() e previous_page_link() alla propria pagina per collegarla alle altre pagine imparentate con essa.

Next Page

Alternativa a Linchpin - prevnextpage

Post Type Archive Link

Plugin che genera una meta box nella pagina del menù per poter aggiungere i link che rimandano ai custom post type.

Regenerate Thumbnails

Permette di rigenerare tutti i thumbnail, in modo che abbiano tutti la stessa dimensione.

One-Click Child Theme

Permette di creare un tema child, senza il bisogno di accedere con un client ftp al server.

Advanced Code Editor

Ottimo editor integrato nel pannello di controllo che permette di modificare html e php direttamente da wordpress

CYSTEME Finder, a file explorer

Se non disponete dei dati di accesso al server per client FTP o GIT, tramite questo plugin è possiible vedere, modificare e/o eliminare le cartelle e i file presenti sul server.

245

WP Smush

Riduce la dimensione delle immagini caricate sul sito, migliorando le performance e il ranking sui SEO.

Simple Share Buttons

Come si può intuire dal nome, il plugin permette di aggiungere facilmente al proprio sito i pulsanti per condividere i contenuti sui social.

BuddyPress

Aggiunge le funzioni necessarie a creare un social network.

Woo commerce

■■ ALTRE UTILITY Jquery ui

Celeberrima libreria ricca di script per la creazione di menù interattivi, animazioni e molto altro.

jPList - jQuery Data Grid Controls

Utilissima libreria per la gestione del paging dei contenuti. Ottimma per velocizzare la consultazione di un sito, senza dover ricaricare le pagine a ogni link

Slick Carousel Plugin che permette di creare facilmente siti “single-page” costituiti da molteplici header differenti.

fakeLoader.js Plugin gratuito e open source per l’e-commerce

Per evitare di far spazientire l’utente durante il caricamento della pagina web, può essere utile mostrare una finta pagina di caricamento.

Scrolline BLOG

Per la creazione di semplici blog è sufficiente appoggiarsi a servizi di hosting che forniscono framework preimpostati, che non necessitano una conoscenza approfondita del codice HTML. Blogger TypePad LiveJournal Thumblr 246

Plugin che mostra una linea di scorrimento relativa all’altezza della pagina. Scorrendo la pagina la linea aumenta o diminuisce fornendo un feedback all’utente.

Textures.js

Serve a gestire lo riempimento di figure realizzate in SVG. Grazie a questo plugin potremo inserire un pattern di riempimento direttamente tramite dei codici javascript

jsGrid

Strumento client-side per la gestione di tabulati o modelli continui.

jQuery Mapael

Strumento basato su raphael.js per la visualizzazione di mappe vettoriali dinamiche. Molto utile per realizzare infografiche su cartine geografiche o politiche.

Oh Snap!

Con Oh Snap! si possono creare degli avvisi a scomparsa utili a fornire un feedback o informazioni allâ&#x20AC;&#x2122;utente.

Tipso

Simile a Oh Snap! ma permette di aggiungere messaggi e suggerimenti in corrispondenza della posizione del mouse. Esiste anche un pligin per Wordpress.

vivus

Puramente estetico, permette di animare le linee di contorno di disegni SVG.

payform

Libreria per creare form per la gestione e la validazione di pagamenti tramite carta di credito.

jQuery Scroll Path

Libreria per gestire lo spostamento dei contenuti in relazione allo scorrimento della pagina. Ottima per siti a pagina singola.

letteringjs

Utile per una gestione creativa dei font.

247

Amministrazione di un sito ■■ E-MAIL

■■ Mantieni i contatti

I giorni in cui è maggiormente sconsigliabile mandare e-mail sono lunedì e venerdì.

Durante il weekend e lunedì le caselle email si riempiono già di altri messaggi, spam compreso, quindi l’email inviata da noi potrebbe perdersi in mezzo a tutte le altre.

Il venerdì invece è un giorno di chiusura, quindi a meno a che si tratti di una discussione già incominciata, se si tratta di qualcosa di nuovo molto probabilmente verrà ignorato o se si è fortunati, rimandato alla settimana successiva.

Invia mail di aggiornamento sul tuo stato, le tue conoscenze i nuovi progetti, approssimativamente una volta al mese.

Per condurre email marketing in tutta comodità e sicurezza esistono servizi come MailChimp, Mailerlite, Sendinblue, Moosend, sendy, GetResponse, Freshmail, Sendloop ecc...

Se non si dovessero ricevere risposte è meglio non insistere sugli stessi destinatari. Lo SPAM non è mai positivo per il business.

■■ Google yourself Se fai un sito portfolio, elimina tutti gli scheletri nell’armadio.

Cercandoti su google potresti anche scoprire contenuti che non ti riguardano direttamente, ma che potrebbero causare fraintendimenti in chi cerca informazioni su di te.

■■ Firmati e diffondi ͽͽ Realizza una firma in HTML (html signature) da usare su forum e blog, in modo che ogni tuo messaggio contenga un rimando attraente al tuo sito. ͽͽ Pubblica articoli in ogni dove, e firma ogni tuo contenuto includendo rimandi al tuo sito.

248

■■ SEo - Search engine Optimization È l’attività di ottimizzazione che viene posta in essere affinché un sito web sia trovabile più facilmente tramite i motori di ricerca come (Google, Bing, Yahoo ecc...). Se sentite parlare di Google Panda o Google Penguin, non sono solo nomi buffi ma si tratta degli algoritmi di calssificazione e valutazione (ranking) usati da Google.

La SEO si divide in due macro-aree: ͽͽ ottimizzazione on-page ͽͽ ottimizzazione off-page URL sintetici - l’url del sito non deve essere un nome troppo complesso, ma deve suggerire il contenuto del sito con poche parole.

TAG <title> - oltre ad essere il titolo visualizzato nelle tab del browser e il titolo della pagina quando viene aggiunta ai preferiti, viene mostrato dal motore di ricerca, come titolo nello “snippet” del risultato della ricerca. Non deve superare i 70 caratteri e deve contenere le parole chiave che identificano i contenuti del sito.

Per una migliore pianificazione delle keyword (parole chiave) esistono strumenti come Google KeywordPlanner.

Metatag e descrizione - fornisce una descrizione concisa del contenuto della pagina che viene spesso utilizzata dal motore di ricerca come anteprima nelle SERP (Search Engine Result Page), quindi occorre che sia convincente e concisa.

La lunghezza ottimale della meta descrizione è 155 caratteri.

Heading TAG - <h1>, <h2>, <h3> ecc... sono tag HTML che hanno lo scopo di marcare i titoli e i sottotitoli nella pagina. È importante che all’interno di una pagina vi sia un solo <h1> (titolo principale) e che in esso vi sia la parola chiave, gli altri tag servono principalmente a dare una gerarchia ai vari paragrafi.

Multimedia - per una corretta SEO occorre arricchire le pagine con immagini, infografiche o contenuti multimediali, purchè non danneggino le performance del sito.

Attributo ALT e nome del file - è importante che il nome delle immagini caricate sul sito descriva il loro contenuto e non sia solo una sigla alfanumerica. Ogni tag <img> inoltre deve essere accompagnato dall’attributo “alt” che contiene cioè il testo che descrive l’immagine, ai SEO ma anche a persone disabili come i non vedenti.

Outbound links - I link in uscita dalla nostra pagina sono utili a Google per comprendere meglio l’argomento del sito, purché siano pertinenti al tema trattato. Per una maggiore efficacia è bene che essi siano i più autorevoli possibile: linkare a una pagina di Wikipedia o all’articolo di un quotidiano online miglior la SEO

Condivisione Social - i social network sono un canale fondamentale per la propagazione di un sito web: è bene inserire sempre pulsanti di condisione all’interno delle pagine web.

Contenuti informativi - le landing pages di un sito devono essere sintetiche e di rapida consultazione per attirare gli utenti, tuttavia le pagine di approfondimento devono contenere informazioni approfondite. In media si possono inserire almeno 1.500-2.000 parole per ogni pagina di approfondimento.

Frequenza di rimbalzo - è importante che gli utenti non si limitino ad accedere al nostro sito, ma devono anche spendere del tempo nel consultarlo. Il tempo di visita di ciascun utente influisce sul ranking del sito.

LSI (Latent Semantic Indexing) - i sinonimi della parola chiave principale, che Google utilizza per determinare la rilevanza della pagina e individuare eventuali pagine correlate; è consigliabile osservare anche quali siti web vengono affiancati al proprio sito nei risultati della ricerca.

Mobile first - la maggior parte dei contenuti web vengono consultati da dispositivi mobili. I motori di ricerca premiano tutti i siti responsive o adaptive.

Velocità di caricamento - Abbiamo visto come è possibile ottimizzare una pagina web. Per una corretta SEO il sito deve essere sempre veloce da caricare e garantire ottime prestazioni.

Long Tail - sfruttando dei modificatori testuali è possibile affiancare alle parole chiave di un sito ulteriori parole che ne completano il significato.

249

wordpress - Creazione di un sito ■■ 1. Hosting Se intendiamo coltivare frutta e verdura per conto nostro, dobbiamo acquistare un pezzo di terra dove poter effettuare semina e trapianti. Similmente avviene su internet: per realizzare un qualunque sito web, occorre disporre di uno spazio sul WEB dove poter caricare il portale e tutti i file relativi.

Oggigiorno esistono due modalità di hosting differenti: ͽͽ Housing: hosting tradizionale dove un unico server ospita tanti clienti. Offre unicamente una quantità definita di MB a disposizione per la memorizzazione dei dati relativi al sito.

Lo scambio di dati avviene solitamente tramite un client FTP (es. Filezilla).

Facendo una metafora è l’appartamento di un palazzo dove bisogna condividere spazi e servizi.

I vantaggi sono che: - è preconfigurato - ha un costo fisso definito ͽͽ Cloud: è come casa singola completamente personalizzabile. Le risorse scelte in fase di configurazione iniziale sono riservate all’utente e vengono ospitate su un server che separa nettamente il suo spazio di lavoro da quello degli altri clienti. L’utente può decidere come personalizzare la propria “casa” e se avesse necessità di risorse maggiori o minori, in ogni momento può espandere o diminuire la configurazione a lui riservata a seconda delle tue esigenze operative. Sebbene sia possibile utilizzare anche client FTP, i server Cloud consentono di scambiare i dati tramite GIT. 250

I vantaggi sono: - scalabilità e modularità - metodo di pagamento pay-per-use - GIT Se volete provare gratuitamente un servizio cloud consiglio OpenShift; targato Red Hat dispone di supporto Java, Node.js, Ruby, Python, PHP e Perl e offre tra le altre cose PaaS gratuito per tutti.

Creando un’account su OpenShift avrete la possibilità di creare tre differenti applicazioni/ siti, è possibile cioè preparare tre ambienti di lavoro.

Es. 1 - Per il primo sito preparo un ambiente di lavoro LAMP (Linux Apache, MySql, Php), così da potervi installare un qualunque CMS che sfrutta questa tecnologia (Wordpress, Drupal...)

2 - Oltre a un sito posso realizzare un’applicazione in Python, per cui preparò un ambiente di sviluppo con pre-installato Python 3.3 3 - Se volessi esercitarmi con Ruby, posso ancora installare Ruby on Rails sul terzo spazio a disposizione.

Per provare invece hosting più tradizionali consiglio invece HostingGratis, Altervista o Netsons.

Chiaramente, utilizzando i server offerti gratuitamente, bisogna accettare qualche compromesso, tra cui quello di dover utilizzare un dominio di secondo livello per il proprio sito.

Per esempio un sito invece di chiamarsi semplicemente: www.nomedelmiosito.it (o anche .com, .net, .org ecc...)

Si dovrà chiamare: www.nomedelmiosito.nome_dell’azienda_ospitante.it Ovviamente per “azienda ospitante” si intende l’host, che può essere Altervita, Netsons ecc...

Finché si tratta di un sito di prova, il compromesso è più che accettabile. Se il progetto realizzato dovesse soddisfare le aspettative, nulla vi impedirà di acquistare il servizio di hosting o di trasferire il sito su un’altro server.

Hosting locale Per testare un sito è possibile anche creare un server locale. Praticamente, invece di appoggiarsi a un host esterno tramite internet, è possibile creare un server sul proprio computer.

Per installare un server sulla macchina locale, esistono pacchetti preconfigurati per ogni sistema operativo.

I più comuni sono WAMP, MAMP e LAMP, dove le lettere iniziali stanno per Windows, MacOsx e Linux. Tutti e tre i pacchetti preparano un server locale costituito da Apache, MySql e un terzo componente che può essere PHP, Python o Pearl.

127.0.0.1 sweet 127.0.0.1

A seconda del sistema operativo in uso, una volta installato il server, sarà sufficiente scrivere nella barra degli indirizzi del proprio browser l’IP locale “127.0.0.1”; in alternativa si può scrivere “localhost” (le virgolette non vanno scritte).

Generalmente la pagina aperta riassume le

caratteristiche del server. Il file index.php creato infatti contiene il comando phpinfo(); ed è strutturato come segue: <?php phpinfo(); ?>

La cartella in cui è contenuto il file index.php rappresenta la root del server locale, cioè la cartella madre in cui è possibile inserire tutti file del sito che si vuole andare a creare.

Esistono anche alternative ai server AMP come per esempio XAMP che prepara un’ambiente costituito da Apache, MariaDB (invece di MySQL), PHP e Perl.

■■ 2. Dominio Perchè un sito internet sia raggiungibile sul WEB, occorre che disponga di un dominio, proprio come una macchina deve avere una targa per poter circolare.

In genere l’acquisto di un piano di hosting comprende anche un dominio, tuttavia è possibile anche comprare i servizi separatamente.

Sebbene sia sconsigliabile farlo, per questioni burocratiche e di gestione, è possibile acquistare hosting e dominio da aziende differenti.

Generalmente ogni dominio consente la creazione di più sottodomini.

Per esempio se volessi creare un portale particolarmente approfondito sulla musica, potrei comprare il dominio “musica.com” e generare poi un sottodominio per ogni genere, quindi.

251

www.musica.com www.musica.rock.com

www.musica.jazz.com

www.musica.classica.com

www.musica.ecc.com

L’esempio ovviamente è fittizio, infatti il dominio “musica.com” non è utilizzabile in quanto già acquistato da qualcun’altro: creare un sottodiminio per ogni genere inoltre finirebbe per provocare un gran chaos, sarebbe più opporturno trattare tutti i generi in un unico sito.

I domini ovviamente sono limitati: il nome che si va cercando infatti potrebbe essere già stato acquistato da qualcun’altro. Ovviamente nulla ci impedisce di estendere la ricerca del nome a ogni categoria di dominio: .com - commerciale .it - italiano .net - internet .org - organizzazione ecc...

■■ cdn - Content delivery network Per velocizzare e rendere più sicuro il proprio sito web è possibile appoggiarsi a un CDN. Alcuni di questi offrono anche un piano servizi gratuito, come per esempio Cloudflare e Akamai.

Un CDN utilizza più nodi (server) contemporaneamente, per fare caching dei contenuti, ovvero fa in modo di servire le pagine del vostro sito web più velocemente, in base alla posizione dei vostri visitatori.

252

Oltre alla funzione di caching spesso vengono offerte anche quelle di antispam, difesa dagli attacchi DDos, statistiche dettagliate sul traffico risparmiato, sui visitatori unici, sui bot e crawler.

■■ Spazio web e database Sembrerà una banalità, ma occorre precisare che un sito web, soprattutto al giorno d’oggi, necessità sia dello spazio web dove conservare i file HTML, PHP, CSS ecc... sia di un database dove memorizzare tutte le informazioni inviate tramite Query.

Facendo una metafora lo spazio web è il corpo, mentre il database è la mente. Nel caso di una piattaforma LAMP, il database è scritto in MySQL e interagisce con il sito web tramite il linguaggio PHP. Quando ci registriamo a un sito web, nel momento in cui clicchiamo su “OK” per confermare nome utente e password, avvieremo uno script PHP che invia i dati al database dove verranno memorizzati e possiblimente criptati.

Tutte le volte che accederemo al sito a cui ci siamo registrati, uno script di controllo verificherà l’esistenza dei dati d’accesso inseriti, all’interno del database.

Perchè un CMS funzioni correttamente è indispensabile l’utilizzo di un database. Acquistando un servizio di hosting, vengono fornite anche le credenziali di accesso al database, necessarie per interagire utilizzando programmi come phpMyAdmin.

Per effettuare l’installazione manuale di Wordpress per esempio occorre prima creare sul server, un database e un profilo utente per l’amministratore, che possiederà tutti i permessi di modifica dei dati.

■■ Wordpress Per l’installazione di un CMS come Wordpress è possibile adottare tre modalità differenti: 1. Registrazione diretta sul sito Wordpress.com 2. Installazione del CMS sul server hosting in uso, seguendo wizard come “Softaculous” 3. Caricamento dei file di installazione sul proprio server e installazione manuale Il primo metodo chiaramente è il più semplice ma anche il più limitante. Registrandosi a Wordpress.com, si disporrà automaticamente di dominio, hosting e sito Wordpress.

Le limitazioni sono l’impossibilità di accedere al server e al database per effettuare modifiche dirette.

L’unico modo per interagire è utilizzare la piattaforma fornita da Wordpress e i suoi plugin.

Il secondo e il terzo metodo sono molto simili, tuttavia è meglio sempre seguire l’installazione da capo a fondo manualmente: sebbene l’operazione richieda maggiore attenzione, permette di personalizzare al meglio il proprio sito e induce anche a conoscerne più approfonditamente la struttura.

Non bisogna lasciarsi spaventare, Wordpress è un CMS molto user-friendly, la procedura d’installazione è guidata e richiede poche operazioni per il suo completamento.

Come è possibile intuire dal messaggio di fine installazione, è tutto abbastanza semplice.

Per chi ancora è alle prime armi, Wordpress fornisce una guida di facile consultazione al seguente indirizzo: https://codex.wordpress.org/it:Installare_WordPress

■■ Componenti principali di wordpress area amministratore Vi si accede tramite il link

www.NomeProprioSitoWeb.com/wp-admin L’area dell’amministratore dispone del pannello di controllo tramite il quale è possibile apportare modifiche al sito. tema Il tema è la parte visibile di sito WordPress. È costituito da una singola cartella contenente PHP, CSS, immagini e JavaScript.

Plugins Non sono essenziali per il funzionamento del sito, tuttavia forniscono funzioni avanzate molto utili.

I plugin sono installabili direttamente dal pannello di controllo dell’amministratore, oppure è possibile caricarli dal proprio com-

253

puter Database Il database contiene tutte le informazioni che sono state caricate sul sito.

Per esempio se creiamo e pubblichiamo una pagina con scritto “Ciao Mondo!), il testo “Ciao Mondo!” non è fisicamente memorizzato in un file HTML ma viene memorizzato sul database, così che Wordpress possa andare a “ripescarlo” tutte le volte che viene aperta la pagina creata.

■■ Pratiche comuni su wordpress Attivare la funzione wp_debug Abilitare WP_DEBUG durante l’installazione di WordPress, permette di mostrare tutti gli errori, le notifiche e gli avvisi di PHP. Questo probabilmente modificherà il comportamento predefinito di PHP il quale mostra solo errori fatali e/o mostra la schermata bianca “della morte” quando vengono raggiunti gli errori.

Mostrare tutte le notifiche e gli avvisi di PHP spesso porta a mostrare messaggi di errore per cose che funzionano correttamente ma che non seguono le convenzioni appropriate di validazione dei dati in PHP. Questi avvisi sono facili da sistemare quando il codice problematico è stato identificato Usare un permalink di facile lettura I permalink sono gli url delle pagine create con Wordpress. Ogni pagina verrà distinta dalle altre con un url specifico. Per evitare di disorientare l’utente è bene utilizzare un permalink di facile lettura. Per modificare i permalink è sufficiente andare alla voce “IMPOSTAZIONI → PERMALINK” 254

Es. Invece di usare link come questo: http://example.com/1A2V874CC32894D7E32894 è più sensato visualizzarli in questa maniera: http://example.com/DataDiCreazione/TitoloDelPost utilizzare una child theme Quando si vuole personalizzare un sito creato con Wordpress diventa necessario apportare modifiche al tema di base: per fare ciò però è sconsigliabile modificare i file del tema installato, ma è buona norma crearne una copia detta “child theme”, così, se anche dovessero verificarsi dei problemi, si dispone sempre della matrice intatta da cui poter ripartire. wp_enqueue_script Quando viene inserito un proprio script PHP è bene metterlo in coda tramite la funziona “wp_enqueue_script” che ne verifica il corretto funzionamento e l’assenza di conflitti con altri script.

Es. CODICE INSERITO IN MODO SBAGLIATO <?php

add_action(‘wp_head’, ‘wpb_bad_script’);

function wpb_bad_script() {

echo ‘jQuery goes here’; } ?>

CODICE INSERITO IN MODO CORRETTO <?php

function wpb_adding_scripts() { wp_register_script(‘my_amazing_script’,

plugins_url(‘amazing_script.js’, __FILE__),

array(‘jquery’),’1.1’, true);

wp_enqueue_script(‘my_amazing_script’); }

add_action( ‘wp_enqueue_scripts’, ‘wpb_adding_scripts’ ); ?>

La funzione utilizza 5 parametri: ͽͽ $handle – è il nome scelto per lo script in questo caso “my_amazing_script” ͽͽ $src – src indica la directory in cui è posizionato lo script.

Utilizzando la funzione plugins_url si risale al rispettivo URL del plugin. ͽͽ $deps – sta per dependency cioè dipendenze; dato che lo script usa jQuery, occorre specificare l’utilizzo di questa dependency. ͽͽ $ver – è un parametro facoltativo che indica il numero della versione del link. ͽͽ $in_footer – lo script verrà caricato nel footer quindi occorre che il valore sia impostato come “true”. Per caricare lo script nell’header sarà sufficiente impostare il valore su false.

Usare il tema più adatto al proprio sito Non occorre reinventare ogni volta un nuovo tema, è molto meglio sceglierne uno che assomigli già al sito che intendiamo realizzare.

Personalizzare nell’ordine corretto Quando si apportano piccole modifiche, prima di alterare i file del template è meglio seguire questo procedimento: 1. Verificare se il template consente di apportare la modifica voluta direttamente da pannello di controllo 2. Utilizzare CSS per modificare il design (child theme style.css) 3. Modificare il file functions.php per cabiamenti nella struttura 4. Aggiungere nuovi file template al tema figlio 5. Utilizza un plugin (solo per aggiungere nuove funzioni) functions.php & style.css Il 90% del lavoro di personalizzazione su Wordpress gira intorno i file style.css per l’estetica e functions.php per la struttura.

Per aggiungere uno script nell’ <head>, non occorre modificare il file header.php, basta imparare a usare wp_enqueue_script all’interno di functions.php fare un controllo incrociato sui browser Come regola fondamentale di ogni progetto, il collaudo è fondamentale per verificare il corretto funzionamento del sito su ogni piattaforma.

sfruttare le funzioni incluse nel tema I temi di Wordpress una volta installati aggiungeranno alcune voci al menù di amministrazione, che consentiranno di apportare modifiche e personalizzazioni in maniera più semplice.

Piuttosto che modificare direttamente i file CSS e PHP è più comodo operare direttamente dal pannello di controllo.

255

■■ Struttura dei template wordpress Header

Il mio sito

Content

ͽͽ sidebar.php - in questo file vengono gestite le barre laterali.

Per inserire più sidebar occorre modificare il file functions. php, mentre i contenuti e i widget sono inseribili direttamente dal pannello di controllo dell’amministratore.

menù Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Quiis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus

Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus

Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus

Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDam, que officid magni ilic tecus

mostrare l’intero contenuto del post e uno a fondo pagina per mostrare thumbnail e titoli dei post legati a quello che si sta leggendo.

Sidebar

ͽͽ footer.php - modificando questo file è possibile agire sul footer del sito web.

Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea orumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea doloeliam, que officid magni ilic tecus

■■ Wordpress e tipi di contenuti

Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus

Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus

footer

Footer

ͽͽ header.php - File globale che gestisce la struttura dell’header e del menù di navigazione di tutte le pagine e articoli.

Contiene anche codice HTML ͽͽ Content - contiene i loop cioè il codice PHP usato da Wordpress per mostrare i contenuti del post, nell’area centrale del sito. Ogni codice HTML o PHP all’interno del loop viene ripetuto quindi ricalcolato in ogni post. È una delle parti più importanti dei template Wordpress: è costituito da una query di avvio che determina quali post o pagine, conservate nel database, visualizzare e termina con una dichiarazione (statement) PHP “endwhile”. Tra la query di inizio e l’endwhile è possibile inserire contenuti personalizzati come l’output dei titoli, il contenuto dei post, i metadata, i custom fields ecc...

Es. modificando il file single.php posso inserire due loop, uno per 256

HOME Il mio sito menù Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Quiis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus

Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus

Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus

Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDam, que officid magni ilic tecus

Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea orumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea doloeliam, que officid magni ilic tecus

Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus

Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus

footer

index.php Tramite il file index.php è possibile modificare la home page.

Solitamente è contenuto un loop di query che servono a mostrare i post più recenti, con un pulsante per vedere quelli precedenti in fondo alla lista.

Alternativamente è possibile scegliere una pagina statica dalle “impostazioni” della “lettura”

POSTS Il mio sito menù Qui ratis ulpa eturiti eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui rat am, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores e

single.php Tramite il file single.php si gestisce la visualizzazione dei post.

Contiene un solo loop che richiama con una singola query il post da visualizzare. È possibile aggiungervi barre laterali, in modo da visualizzarlo in modo differente rispetto alle altre pagine del sito.

eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui rat am, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores e a dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus rumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumrumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorum

footer

Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus

Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDam, que officid magni ilic tecus

Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea orumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea doloeliam, que officid magni ilic tecus

footer

PAGES

Qui ratis ulpa eturiti

menù Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Quiis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus

Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus

footer

menù

Il mio sito

Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus

a dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus Qui ratis ulpa eturiti oriores ea dolorumDeliam, que officid magni ilic tecus

Il mio sito

Archivio

page.php A differenza dei post, le pagine possono essere create con un template differente da quello impostato per il sito.

Per crare un template di pagina è sufficiente copiare il file page. php, rinominarlo a piacimento e aggiungere questa stringa in cima al file: <?php /*Template Name: NomeDelTemplate*/ ?>

archive.php category.php tag.php Se non sono stati creati file di archivio, il file di riferimento per l’impaginazione è index.php.

Creando il file archive.php, index. php non viene preso in considerazione per gli archivi.

Creando il category.php è possibile gesire unicamente le categorie, separatamente da archive.php. Il file tag.php chiaramente serve per gestire specificatamente gli archivi di tag.

Per una gestione più capillare dei contenuti, esistono ulteriori file che definiscono le singole parti di una pagina Wordpress. È possibile creare file che specificano il contenuto solo di determinate categorie: questi file devono specificare, nel proprio nome, lo “slug” che generalmente è il nome della categoria della pagina.

Sidebar - sidebar.php (sidebar-slug.php) Come è possibile intuire, permette di definire i contenuti della barra laterale.

Content - content.php (content-slug.php) È il cuore della pagina. Ne definisce il contenuto.

TEMPLATE - template.php (template-slug.php) Definisce la struttura generale della pagina. I file template non hanno molte righe di codice, in quanto indicano solo il posizionamento di header, content, sidebar e footer.

257

■■ Struttura delle query

e l’url del sito. Il css che gestisce la grafica è contenuto principalmente dentro a style.css.

■■ Funzioni extra

Query Post o pagine Start loop Endwhile

Ricomincia il loop o terminalo se tutte le query sono state inviate

A partire da qui tutte le query verranno ripetute nell’output di ogni post

altri tag

Mostra la Esci data di pubblicazione

Mostra l’autore del post

Mostra il titolo del post

the_excerpt

Mostra l’excerpt cioè il breve testo introduttivo

the_content

È possibile visualizzare ulteriori tag aggiuntivi legati alla pagina

the_date the_author

the_title

Mostra il contenuto del post

the_category Mostra le categorie del post

comments.php Se avete abilitato la possibilità di commentare i post, tramite comments.php è possibile gestire l’output dei commenti.

Installando plugins come comments.php, il file comments.php passa in secondo piano. functions.php La modifica di questo file serve a personalizzare gli elementi del core del tema. Generalmente viene modificato per aggiungere le barre laterali, cambiare il numero di caratteri negli excerpt o aggiungere opzioni al menù dell’amministratore. style.css In cima a questo file vengono definiti il nome del tema, dell’autore 258

Plugins custom fields widgets Generalmente sono moduli inseribili nelle barre laterali. Dispongono di funzioni come barre di ricerca, elenco dei posto recenti o pubblicità

■■ Theme Hooks – Actions & Filters Gli hooks di wordpress, letteralmente uncini/ami, permettono di apportare modifiche a un tema, senza alterare i file che lo costituiscono.

Sostanzialmente esistono due tipologie di hooks: ͽͽ Action hooks - principalmente aggiunge degli eventi/azioni a quelle già esistenti. Per esempio wp_enqueue_script è un action hook in quanto aggiunge un’azione di controllo prima dell’esecuzione dello script ͽͽ Filter hooks - servono a modificare elementi presenti nel tema. Come dei filtri, applicano dei cambiamenti a qualcosa che già esiste nel tema, quindi necessitano di essere sempre associati all’oggetto che si vuole modificare.

Gli hooks disponibili sono tantissimi, solo per la versione 3.3 di Wordpress esistevano più di 1500 hooks, che permettevano di modificare ogni singolo aspetto di WordPress.

Una lista completa è visibile a questo indirizzo: http://adambrown.info/p/wp_hooks/version/3.3

■■ Child Themeing Un child theme o “tema figlio” è un tema che eredita le funzionalità di un altro tema, chiamato parent theme o “tema genitore”.

I “Child themes” consentono di personalizzare un tema senza preoccuparsi di perderne le modifiche durante un’aggiornamento.

ES. Se cambio il colore di sfondo modificando il file style.css del tema Twenty Eleven, quando lo aggiornerò a una versione più recente, tutte le modifiche apportate verranno perse.

figlio. Esiste una stringa alternativa per caricare il CSS padre attraverso il file functions.php.

Se si volessero apportare modifiche anche al file functions.php, è sufficiente copiare il file originario dal tema padre all’interno della cartella del child e cancellarne il contenuto tranne l’apertura del codice PHP “<?php” Per caricare il CSS padre tramite il file functions.php occorre scrivere le stringhe seguenti in cima al file: <?php add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ ); function enqueue_parent_styles() { wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ ); }

Per creare un tema figlio, è sufficiente creare una cartella all’interno della directory “wp-content/themes”, e inserire all’interno un file style.css contenente la seguente intestazione: /* Theme Name: Nome del tema Theme URI: http://example.com/nome del tema/ Description: Descrizione del tema Author: Nome autore Author URI: Sito dell’autore Template: nome del tema padre Version: 1.0.0 Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready */ @import url(“../NomeDelTemaPadre/style.css”); /* =Da qui in poi è possibile personalizzare il tema -------------------------------------------------------------- */

La funzione “@import url(“../NomeDelTemaPadre/style. css”);” carica il CSS del tema padre all’interno di quello del

Es. Per aggiungere del contenuto personalizzato nel footer, è sufficiente aggiungere questo codice all’interno di funcitons.php:

}

add_action( ‘wp_footer’, ‘pc_custom_footer’ ); function pc_custom_footer() {

echo “<div style=’text-align:center;’><p>This is my custom footer message!</p></div>”;

Per attivare il tema “child” è sufficiente accedere al menù “Aspetto → Temi” dal pannello di controllo di Wordpress.

■■ Custom Field I custom field, letteralmente campi personalizzati, servono ad ag-

259

giungere ulteriori dettagli ai propri post. Sono una funzione avanzata e compaiono in fondo alla pagina di creazione del post: nel caso non fossero visibili, occorre attivarli dal menù a tendina in alto “Impostazioni schermata”.

La funzione <?php get_post_meta(); ?> va inserita dopo alla stringa <?php the_content(); ?>

■■ Template per categorie di post Per assegnare un template personalizzato a determinate cateogorie di post occrre aggiungere un’action al file functions.php. Lo script di seguito assegna un determinato file template a seconda dello slug assegnato alla categoria dei post.

I file dovranno essere chiamati single-template-slug.php

Le informazioni memorizzate nei custom field vengono chiamate meta-data e sono composti due parti: ͽͽ Key, Chiave (Nome) - il nome del meta-data ͽͽ Value, Valore - il valore che viene assegnato al meta-data e che verrà mostrato quando richiamato sulla pagina Per richiamare i campi personalizzati bisogna utilizzare la funzione PHP get_post_meta($post_id, $key, $single); ͽͽ $post_id - è l’id (valore numerico) del post che si desidera recuperare ͽͽ $key - è il nome del meta-tag che si vuole richiamare ͽͽ $single - può essere true o false. Se è impostata su true la funzione restituisce un singolo risultato come una stringa.

Se è impostato su false la funzione restituisce un’array di campi personalizzati 260

//TEMPLATE POST PER CATEGORIA add_action(‘template_include’, ‘load_single_template’); function load_single_template($template) { $new_template = ‘’; // single post template if( is_single() ) { global $post; if( has_term(‘slug_11’, ‘category’, $post) ) { // use template file single-template-slug_1.php $new_template = locate_template(array(‘single-template-slug_1.php’ )); } if( has_term(‘slug_2’, ‘category’, $post) ) { // use template file single-template-slug_2.php $new_template = locate_template(array(‘single-template-slug_2.php’ )); }

}

}

return (‘’ != $new_template) ? $new_template : $template;

■■ TECNICHE Utilizzare un CMS può semplificare la vita, tuttavia bisogna essere sempre disposti a imparare a utilizzare un minimo i linguaggi web, dato che spesso accade di dover apportare modifiche ai temi o ai plugin installati. Molti temi per Wordpress sono pagamento, quindi prima di acquistarli, è bene verificare che siano il possibile fedeli al progetto che si vuole realizzare, altrimenti si finisce per perdere lo stesso tempo che sarebbe servito ad adattare un comune tema gratuito.

■■ 3 regole base per lavorare in Wordpress Per utilizzare file JavaScript è necessario registrarli e caricarli tramite il comando enqueue, all’interno del file functions.php.

Per aggiungere un qualunque file extra al proprio tema, bisogna agire tramite i comandi dell’API di Wordpress, in particolare “include, require, include_once, require_once” Per modificare il CSS del sito è sufficiente copiare e modificare il file style.css

■■ Avviare un loop Con la parola “loop” si indicano un insieme di istruzioni che, all’interno di un programma, viene ripetuto ciclicamente fino al conseguimento del risultato voluto. Vengono cioè stabiliti un punto di inizio e un di fine e nel mezzo si definiscono le azioni da svolgere.

Esistono principalmente 4 diverse maniere per avviare un loop in Wordpress.

Loop Standard Il tipico loop di Wordpress, che generalmente viene definito nelle pagine del template è strutturato come segue.

Un tema a pagamento inoltre non è per forza migliore di un tema gratuito. Non dimentichiamo che i progetti condivisi senza scopo di lucro, sono relizzati principalmente da persone interessate al proprio progetto, disposte a collaborare attivamente con la comunità di sviluppatori; un progetto fatto per guadagnare invece potrebbe puntare unicamente all’estetica per attirare una maggiore clientela, trascurando l’effettiva qualità tecnica del prodotto.

1) Definisco le condizioni in cui deve essere avviato il loop , utilizzando un operatore condizionale if e tramite l’operatore while avvio il loop.

In questo caso il loop “pescherà” e mostrerà tutti i post, purchè ce ne siano. <?php if (have_posts()) : while (have_posts()) : the_ post(); ?>

261

2)Dopo aver definito le condizioni per far partire il loop, posso inserire tutte le istruzioni che devono essere effettuate al suo interno.

Es. per mostrare tutti i thumbnail dei post del sito, nel formato più piccolo, scriverò: echo get_the_post_thumbnail(‘small’) 3)Una volta definite tutte le istruzioni del loop posso chiuderlo col comando: <?php endwhile; ?> 4)Avendo adoperato un operatore if, occorre anche specificare cosa bisogna visualizzare, se non ci sono le condizioni per avviare il loop: <?php else : ?> 5)Con l’operatore else è come se dicessi, “altrimenti...”. Dopo questo operatore quindi inserisco tutti i dati da visualizzare, nel caso in cui la pagina non soddisfi i requisiti definiti tramite l’operatore IF. ES. Posso anche semplicemente scrivere un messaggio di avvertimento tipo: echo ‘Non è stato trovato alcun contenuto visualizzabile’; <?php endif; ?> 6)L’operatore “endif:” serve semplicemente a chiudere del tutto il loop incominciato.

ͽͽ Nella pagina 2 bisogna visualizzare il messaggio B ͽͽ Se non sono nè nella pagina 1 nè nella 2, mostra il messaggio C In questo caso quindi la logica sarebbe If (pagina 1):

messaggio A elseif (pagina 2):

messaggio B else:

messaggio C

Ovviamente non deve trattarsi per forza di un messaggio, possono anche essere serie di istruzioni come, titolo del post + excerpt + thumbnail.

Loop - query_posts() Tramite query_posts() è possibile sovrascrivere i valori di base della query, con quelli scelti da noi.

Es. <?php global $query_string; // required $posts = query_posts($query_string.’&cat=-9’); //esclude i post della categoria con ID = 9 <?php QUI INSERISCO IL LOOP CHE DEVE UTILIZZARE I PARAMETRI PRECEDENTEMENTE DEFINITI ?> <?php wp_reset_query(); // reset the query ?>

Accade spesso che durante un loop si debbano definire più di due condizioni. In questi casi si usano gli operatori elseif: prima di concludere con else.

L’ultima stringa utilizzata serve semplicemente a resettare il loop, in modo che la variable $posts torni ad avere i valori predifiniti al di fiuori del loop definito.

Per esempio potrei dover dire che: ͽͽ Nella pagina 1 bisogna visualizzare il messaggio A

Loop - WP_Query() Per avere un controllo assoluto del loop, wp_query() è il comando

262

più adatto. Tra le parentesi tonde è possibile definire una serie di parametri che vanno a personalizzare completamente il loop che segue. <?php $custom_query = new WP_Query(‘cat=-9’); // esclude la categoria con ID = 9 while($custom_query->have_posts()) : $custom_query->the_ post(); ?> //CONTENUTO DEL LOOP <div>

<?php the_content(); ?> </div> //CHIUSURA LOOP <?php endwhile; ?> <?php wp_reset_postdata(); // reset query ?>

Alcuni parametri utilizzabili sono: ͽͽ $custom_query = new WP_Query(‘cat=-7,-8,-9’);

Esclude le categorie 7, 8 e 9

ͽͽ $custom_query = new WP_Query(‘posts_per_page=3’);

Limita il numero di post visualizzati a 3 per pagina

ͽͽ $custom_query = new WP_Query(‘order=ASC’);

Inverte l’ordine dei post.

Loop - with get_posts() La maniera più semplice e sicura per creare molteplici loop all’interno di una pagina è usare la funzione get_posts(). <?php global $post; // required $args = array(‘category’ => -9); //esclude la categoria 9 $custom_posts = get_posts($args); foreach($custom_posts as $post) : setup_postdata($post);

//CONTENUTO DEL LOOP endforeach; ?>

È bene notare che get_posts() necessita di un array di parametri per funzionare. Per indicare più parametri contemporaneamente all’interno di un array occorre seguire questa sintassi: $args = array(‘numberposts’=>3, ‘category’=>-6,-9, ‘order’=>’ASC’);

■■ Visualizzare contenuti tramite una funzione Come accennato in precedenza, tramite il file “functions.php”, è possibile definire funzioni che vanno ad agire nel loop della pagina.

Un esempio di inserimento di contenuti tramite l’uso di una funzione è presente nel footer del template Twenty Twelve.

Nel file “footer.php”, che viene richiamato in fondo a ogni pagina Wordpress, è presente la seguente stringa: <?php do_action( ‘twentytwelve_credits’ ); ?>

Praticamente richiama la funzione, precisamente l’action chiamata “twentytwelve_credits” dal file functions.php che infatti contiene la funzione di seguito: add_action( ‘twentytwelve_credits’, ‘copyright_footer’ ); function copyright_footer() { echo ‘<img style=”float:left;” src=”’.content_url(“/uploads/2016/04/IAM_logo_footer.gif”, “https”).’” width=”40” /> Copyright &copy;’.date(‘Y’); }

263

■■ Aggiungere codice JavaScript Per aggiungere codice JavaScript su Wordpress, non è sufficiente includerlo all’interno dell’header, attraverso il file header.php.

Esistono diverse tecniche per aggiungere file esterni a Wordpress, quello più convenzionale utilizza il file functions.php Volendo aggiungere un file chiamato “ilMioCodice.js” occorre registrare il file in questa maniera: function NomeFunzioneDiRegistrazione() { wp_register_script(‘custom_script’, get_stylesheet_directory_uri(); . ‘/js/ilMioCodice.js’, array(‘jquery’)); } add_action(‘admin_init’, ‘NomeFunzioneDiRegistrazione’);

Subito dopo il codice di registrazione occorre inserire quello di caricamento dello script: function NomeDellaMiaFunziones(){ wp_enqueue_script(‘custom_script’); } add_action(‘wp_enqueue_scripts’, ‘NomeDellaMiaFunzione’);

Per aggiungere correttamente i file javascript sono state utilizzate nel file “funtions.php”, due API di Wordpress: ͽͽ wp_register_script() ͽͽ wp_enqueue_script() Entrambe le funzioni richiedono diversi parametri: ͽͽ $handle – (Stringa | Obbligatorio) – Nome dello script ͽͽ $src – (Stringa | Opzionale) – Url dello script ͽͽ $deps – (Array | Opzionale) – Array di collegamento dove lo script deve dipendere ͽͽ $ver – (Stringa | Opzionale) – Specifica la versione dello 264

script ͽͽ $in_footer – (Boolean| Opzionale) – Di solito gli script si trovano nella sezione <head>. Se si vuole incorporare lo script nel footer, quindi dopo il tag <body>, impostare il valore a true. Di default è impostato a false

■■ Aggiungere javascript e css con un unica funzione function scripts_and_styles() { wp_register_script( ‘global’, get_template_directory_uri() . ‘/js/global.js’, array( ‘jquery’ ), 1.0, true ); wp_register_script( ‘home-page’, get_template_directory_ uri() . ‘/js/home-page.js’, array( ‘jquery’ ), 1.0, true ); wp_register_style( ‘global’, get_template_directory_uri() . ‘/style.css’, null, 1.0, ‘screen’ ); wp_register_style( ‘sliders’, get_template_directory_uri() . ‘/css/sliders.css’, null, 1.0, ‘screen’ ); if ( is_home() ) { wp_enqueue_script( ‘home-page’ ); wp_enqueue_style( ‘sliders’ ); } wp_enqueue_script( ‘social-likes’ ); wp_enqueue_script( ‘iam-script’ ); wp_enqueue_style( ‘stile_parent’ ); wp_enqueue_style( ‘social-likes’ ); } add_action( ‘wp_enqueue_scripts’, ‘scripts_and_styles’ );

■■ Verificare se uno script è stato caricato Dopo aver registrato e caricato uno script, è bene verificare che effettivamente sia operativo all’interno del sito.

Per verificarne il funzionamento è possibile testare le funzionalità oppure Wordpress mette a disposizione la funzione wp_script_ is() che si limita a restituire un valore true (1) o false (0), in base alla query che viene inviata.

Es. Per verificare se jquery è attivo sul sito inserirò all’interno di una pagina content la stringa: <?php wp_script_is(‘jquery‘, $list = ‘enqueued’ ); ?> Ricaricando la pagina modificata, se apparirà il numero 1 significherà che jquery è operativo.

Al posto di enqueued è possibile utilizzare anche gli argomenti: ͽͽ registered ͽͽ enqueued / queue ͽͽ done ͽͽ to_do In alternativa è sufficiente usare un codice javascript come il seguente: <?php

echo ‘<script>

if (typeof jQuery != “undefined”) {

alert(“jQuery library is loaded!”); }else{

alert(“jQuery library is not found!”); }</script>’;

Nel caso specifico di jQuery, esiste un bookmarklet, disponibile nel link sottostante, che mostra immediatamente quale versione di jQuery è caricata sul sito in uso.

archetyped.com/know/jquery-check/

■■ Aggiornare Jquery Potrebbe capitare di dover lavorare su un vecchio template, che si appoggia a una versione di JQuery ormai superata.

Per caricare lo script più reecnte è sufficiente aggiungere le seguenti stringhe nel file functions.php, all’interno di una funzione: if( !is_admin() ){

wp_deregister_script(‘jquery’);

wp_register_script(‘jquery’, (“http://code.jquery.com/ jquery-latest.min.js”), false, ‘’);

wp_enqueue_script(‘jquery’); }

■■ aggiungere una sidebar La prima cosa da fare è inserire un nuovo codice nel file function. php, prima di eseguire questa procedura controllate che all’interno del file non sia già presente un codice simile a quello che andremo ad inserire, che serve appunto per richiamare la sidebar già presente nel vostro tema.

Un’altro controllo da eseguire, è ricercare eventuali file dal nome sidebar.php, attenzione perchè a seconda del tema che state utilizzando potrebbero essercene presenti più di uno in cartelle diverse e questo influisce nel codice che dovremo inserire perchè anche in questo caso potrebbe essere già presente un codice uguale che gestisce l’attuale sidebar.

FUNCTIONS.PHP /*AGGIUNGI SIDEBAR*/

265

function twentytwelveIAM_widgets_init() { register_sidebar( array( ‘name’ => __( ‘Mappa Percorsi’, ‘twentytwelve’ ), ‘id’ => ‘sidebar_percorsi’, ‘description’ => __( ‘Barra laterale dei post della categoria Percorsi’, ‘twentytwelve’ ), ‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’, ‘after_widget’ => ‘</aside>’, ‘before_title’ => ‘<h1 class=”widget-title”>’, ‘after_title’ => ‘</h1>’ ) ); } add_action( ‘widgets_init’, ‘twentytwelveIAM_widgets_init’ );

Il codice con i contenuti della sidebar è consigliabile inserirlo in una pagina apposita che si chiamerà sidebar-nome_della_sidebar. php All’interno del file si dovrà inserire il seguente codice: HTML DELLA SIDEBAR <?php if ( is_active_sidebar(‘sidebar_percorsi’) ) { dynamic_sidebar(‘sidebar_percorsi’); } else { echo “<p>La barra laterale non contiene nulla. Aggiungere dei widget.</p>”; } ?>

STRINGA PER RICHIAMARE LE SIDEBAR La funzione get_sidebar() di Wordpress permette di richiamare il contenuto del file sidebar-nome_della_sidebar.php.

Per maggior ordine è stato creato un <div> contenitore che con266

sente di personalizzare a proprio piacimento il CSS della sidebar, consentendo di posizionarla dove si preferisce. <div id=”sidebar_percorsi” class=”widget-area” role=”complementary”> <?php get_sidebar(‘percorsi’); ?> </div><!-- #sidebar_percorsi --> ?>

■■ Cambiare contenuti onHover Per l’uso di schermi touch, modificare l’aspetto delle icone ha poca importanza, il dito infatti le copre quasi completamente; al contrario, utilizzando il puntatore, è un buon feedback mostrare all’utente un cambiamento, in quanto suggerisce la possibilità di interagire.

Tradizionalmente si suggerisce di usare nel codice CSS il selettore :hover tuttavia è preferibile adottare JavaScript o JQuery essendo più flessibili.

Ipotizziamo di voler cambiare il colore di un paragrafo all’interno di un di un “div” di classe “.contenitore”, ogni volta che il mouse ci passa sopra.

Se volessimo applicare le modifiche tramite CSS basterebbe impostare il codice come segue: HTML <div class=”contenitore”>

<p>Questa è la scritta che cambierà colore</p> </div> CSS .contenitore p{

color: #000000; }

.contenitore p:hover{

color: red; } In questa maniera dico al CSS di modificare la proprietà del colore da color: #000000 (nero in esadecimale) a rosso, che in questo caso è stato espresso semplicemente in inglese: questo è un esempio ma è sempre preferibile usare i colori in RGB o esadecimale.

Se cercate alle pseudo-classi come :hover, il sito w3c fornisce una lista completa al seguente indirizzo:

w3schools.com/css/css_pseudo_classes.asp

:hover viene spesso usato per modificare la proprietà background-image, per esempio quando si vuole modificare l’aspetto di un icona al passaggio del mouse. In questo caso l’icona di riferimento deve disporre di 2 immagini caricate si server, quella normale e quella modificata.

Le pseudo classi CSS sono indubbiamente uno strumento potente, tuttavia con l’utilizzo di Javascript è possibile per modificare direttamente qualunque parte dell’HTML o del CSS a proprio piacimento.

HTML <img src=”http://iam.altervista.org/wp-content/uploads/2016/04/ sfoglia.png” onmouseover=”onDownload();” onmouseout=”outDownload();” />

■■ Creare un semplice plugin WordPress You may think that it may be super hard, but it really is not.

ͽͽ All you have to do is create a new folder in the plugins directory. Example: /wp-content/plugins/ yoursitename-plugin/ ͽͽ Open a blank file and save it as “yoursitename-plugin.php” ͽͽ Put the following code in the file: <?php /*Plugin Name: Site Plugin for example.com Description: Site specific code changes for example.com*/ /* Start Adding Functions Below this Line */ /* Stop Adding Functions Below this Line */ ?> ͽͽ Now upload this file into the folder you created in the plugins directory. Then simply activate the plugin.

■■ Mostrare post recenti da categorie specifiche METODO UNO: query_posts <?php query_posts( ‘posts_per_page=1&cat=2’ ); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class=”post” id=”post-<?php the_ID(); ?>”>

<h3><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></h3> </div>

<?php endwhile; ?>

267

?>

<?php twentytwelve_content_nav( ‘nav-below’ ); ?> <?php else : ?> <?php echo (‘La categoria selezionata non esiste’);

<?php endif; ?> METODO DUE: get_posts <?php

$args = array(

‘posts_per_page’ => ‘3’,

‘category’ => ‘2’

/*’offset’ => 0,

‘category_name’ => ‘’,

‘orderby’ => ‘date’,

‘order’ => ‘DESC’,

‘include’ => ‘’,

‘exclude’ => ‘’,

‘meta_key’ => ‘’,

‘meta_value’ => ‘’,

‘post_type’ => ‘post’,

‘post_mime_type’ => ‘’,

‘post_parent’ => ‘’,

‘author’ => ‘’,

‘post_status’ => ‘publish’,

‘suppress_filters’ => true */

);

$posts_array = get_posts( $args );

268

$postslist = get_posts( $args ); foreach ( $postslist as $post ) :

setup_postdata( $post ); ?>

<div>

<?php the_date(); ?>

<br />

<?php the_title(); ?>

<?php the_excerpt(); ?>

<?php the_content(); ?>

</div>

<?php

endforeach;

wp_reset_postdata();

?>

■■ Show Recent Posts from Specific Categories <?php $args = array( ‘posts_per_page’ => 10, ‘order’=> ‘ASC’, ‘orderby’ => ‘title’ ); $postslist = get_posts( $args ); foreach ( $postslist as $post ) : setup_postdata( $post ); ?>

<div>

<?php the_date(); ?>

<br />

<?php the_title(); ?>

<?php the_excerpt(); ?>

</div> <?php endforeach; wp_reset_postdata(); ?>

■■ Regolare la lunghezza dell’excerpt L’excerpt in Wordpress non è altro che un sunto del contenuto di un post. Se non viene attivato l’ecerpt personalizzato nella pagina di editing del post, verranno utilizzate le prime 50 parole del contenuto.

Per quanto possa sembrare assurdo l’excerpt è una delle dimostrazioni che, in certi casi, fare modifiche su un CMS può essere molto difficoltoso. Esistono innumerevoli soluzioni per gestire la lunghezza degli excerpt di Wordpress, però non sono tutte versatili e adatte a ogni template.

Sebbene esistano dei plugin che foniscono di effetturare modifiche tramite GUI, preferiamo procedere direttamente aggiungendo una funzione nel file functions.PHP. FUNCTIONS.PHP <?php function nomeDellaFunzione($limit) { $excerpt = explode(‘ ‘, get_the_excerpt(), $limit); if (count($excerpt)>=$limit) { array_pop($excerpt); $excerpt = implode(“ “,$excerpt).’...’; } else { $excerpt = implode(“ “,$excerpt); } $excerpt = preg_replace(‘`[[^]]*]`’,’’,$excerpt); return $excerpt; } function content($limit) { $content = explode(‘ ‘, get_the_content(), $limit); if (count($content)>=$limit) { array_pop($content); $content = implode(“ “,$content).’...’;

} else { $content = implode(“ “,$content); } $content = preg_replace(‘/[.+]/’,’’, $content); $content = apply_filters(‘the_content’, $content); $content = str_replace(‘]]>’, ‘]]&gt;’, $content); return $content; } ?>

Dopo aver creato la funzione, sarà sufficiente richiamarla all’interno della pagina interessata, affiancandola al codice HTML. Invece di richiamare l’excerpt con la funzione <?php the_ excerpt() ?> occorre scrivere la stringa seguente: <?php echo nomeDellaFunzione(25); ?> Il numero tra parentesi indica il numero di parole che si intende visualizzare.

Alternativa 2 Esiste un’alternativa più sintetica rispetto a quella precedentemente mostrata che sfrutta la funzione wp_trim_words() che può essere applicata a qualunque contenuto, non solo gli excerpt.

Nell’esempio di seguito, il codice mostrerà le prime 25 parole dell’excerpt. In alternativa si poteva usare get_the_content: <?php $excerpt = get_the_excerpt(); echo wp_trim_words( $excerpt , ‘25’ ); ?>

■■ URL contenuti WordPress offre numerose funzioni per determinare l’URL di una cartella. Per testare è sufficiente includerle in una stringa di questo tipo:

269

Multisite <?php echo get_stylesheet_directory_uri(); ?>

Restituisce l’URL del template figlio

get_template_directory_uri()

Restituisce l’URL del template padre

Plugins plugins_url() plugin_dir_url() plugin_dir_path() plugin_basename()

Themes get_template_directory_uri() get_stylesheet_directory_uri() get_stylesheet_uri() get_theme_root_uri() get_theme_root() get_theme_roots() get_stylesheet_directory() get_template_directory()

Site Home home_url() get_home_path()

WordPress admin_url() site_url() content_url() includes_url() wp_upload_dir()

270

get_admin_url() get_home_url() get_site_url() network_admin_url() network_site_url() network_home_url()

■■ Redirect Ci sono casi in cui occorre modificare l’indirizzo a cui è collegato un link. Dato che in un CMS la maggior parte dei contenuti sono generati tramite codice PHP, non è possibile modificare i collegamenti direttamente da HTML: Nel caso di wordpress per agire su di un link occorre aggiungere un’action nel file functions.php Nell’esempio di seguito vengono modificati i link di due categorie.

Nel primo caso tutti i link che rimandano alla pagina della categoria “percorsi” vengono modificati in modo da rimandare alla pagina con ID 65 mentre nel secondo caso, tutti i link che rimandano alla pagina della categoria “contemporaneo” sono collegati alla pagina con ID 95. function templateRedirect() { global $post;

if ( is_category( ‘9’ ) || is_category( ‘percorsi’ )) {

wp_redirect( get_permalink( ‘65’ ) ); exit(); }

if ( is_category( ‘contemporaneo’ )) {

wp_redirect( get_permalink( ‘95’ ) ); exit(); } } add_action(‘template_redirect’, ‘templateRedirect’);

■■ Creare Custom Post Type Sebbene esistano dei plugin per semplificare la creazione di un Post personalizzato, è sempre meglio cercare di evitare di appesantire il CMS installando ulteriori estensioni.

Creare un Custom Post Type non è molto complesso, è sufficiente modificare il file functions.php e inserire il seguente codice: add_action( ‘init’, ‘create_post_type’ ); function create_post_type() { register_post_type( ‘nome_del_tipo_di_post’, array( ‘labels’ => array( ‘name’ => __( ‘Nome dei miei post’ ), ‘singular_name’ => __( ‘Nome del mio post’ ) ), ‘public’ => true, ‘has_archive’ => true, ) ); }

■■ Creare una gallery dinamica Creare una gallery statica in Wordpress è abbastanza semplice. Caricando un Javascript o un Jquery per la gestione delle immagini, è possibile, tramite PHP, richiamare le foto caricate nei MEDIA, e visualizzarle sfruttando lo script dello slider.

In alternativa esistono molteplici plugin che permettono di creare caroselli, tuttavia ricordiamo che i plugin non sono sempre facili da personalizzare, aggiungono codice che appesantisce il sito e spesso riservano le funzioni più utili solo agli utenti paganti.

Se volessimo permettere all’amministratore che si occupa del front-end, di poter scegliere quali immagini caricare all’interno di una gallery, deve avere accesso a un menù di personalizzazione, tramite il pannello di controllo Wordpress.

Di base, durante la creazione di un post, è possibile creare gallery con foto affiancate su una o più colonne.

Queste immagini vengono incluse in una description list, costituita dai tag <dl><dt><dd>.

Se volessimo richiamare queste immagini al di fuori della struttura prestabilita da Wordpress, è sufficiente utilizzare il codice seguente, per visualizzare le foto della gallery appartenente al post: <?php /* The loop */ if ( get_post_gallery() ) : $gallery = get_post_gallery( get_the_ID(), false ); /* Loop through all the image and output them one by one */ foreach( $gallery[‘src’] as $src ) : ?> <li><img src=”<?php echo $src; ?>” class=”my-custom-class” alt=”Gallery image” /> </li> <?php endforeach; endif; ?>

271

Il codice, una volta inserito in un qualunque file che definisce il contenuto della pagina (Es. content-single.php), mostrerà le immagini al di fuori della struttura predefinita dai tag della description list.

Se volessimo inserire le immagini in una unordered list a questo punto è sufficiente aggiungere i tag <ul><li> come segue: <div class=”unslider-percorsi”> <ul> <?php /* The loop */ if ( get_post_gallery() ) : $gallery = get_post_gallery( get_the_ID(), false ); /* Loop through all the image and output them one by one */ foreach( $gallery[‘src’] as $src ) : ?> <li><img src=”<?php echo $src; ?>” class=”my-custom-class” alt=”Gallery image” /> </li> <?php endforeach; endif; ?> </ul> </div>

Oltre ai tag della unordered list, è stato aggiunto anche il <div> con classe ”unslider-percorsi”.

Questo contenitore serve alla gallery “Unslider” per individuare la lista da visualizzare all’interno del carosello.

272

Unslider è una libreria molto leggera che permette di creare slider tramite immagini contenute in una lista.

Richiamando la gallery tramite la funzione di wordpress get_post_ gallery, verranno visualizzate due gruppi di immagini. Uno è quello inserito nel post, l’altro è quello richiamato e personalizzato con unslider.

Occorre quindi nascondere quello inserito tramite post, in modo da non ripetere due volte lo stesso contenuto.

Per nascondere la galleria di Wordpress è sufficiente nascondere la classe tramite css con l’attributo display:none.

Sebbene nascondere gli elementi non sia una pratica consigliata, in questo caso è accettabile, dato che i contenuti della gallery devono essere caricati dal browser in entrambe le gallery.

■■ Resettare il loop Quando si comincia a modificare un template di Wordpress è possibile che certi loop vadano in conflitto con quelli già esistenti, restituendo dati differenti da quelli previsti.

Prima o dopo ogni nuovo loop è consigliabile quindi inserire delle stringhe PHP che interrompono la sua influenza sui cicli di calcolo successivi. ͽͽ wp_reset_postdata() - da usare preferibilmente dopo a loop creati usando il comando WP_Query. Tramite questo comando la variabile globale $post viene ripristinata al valore iniziale.

Es. <?php wp_reset_postdata(); ?> ͽͽ wp_reset_query() - meglio se usato dopo a loop creati con query_posts. Opera in modo simile a wp_reset_postdata() ma è più aggressivo in quanto “distrugge” la query prece-

dente.

Es. <?php wp_reset_query(); ?> ͽͽ rewind_posts() - consigliato per riutilizzare la medesima query nella stessa pagina

■■ Paging Il paging non è altro che il menù di navigazione che serve a vedere le pagine successive di una determinata categoria.

Se negli argomenti della funzione WP_Query() specifichiamo di paginazione, attraverso la funzione paginate_links è possibile avere automaticamente come output i comandi per la navigazione delle pagine.

Es. Definisco le regole di paginazione in una variabile: <?php $paged = ( get_query_var( ‘paged’ ) ) ? absint( get_ query_var( ‘paged’ ) ) : 1; ?>

Definisco le regole/attributi del loop in una variabile. Volendo il paging delle pagine, all’interno degli attributi inserisco anche il valore “paged” legato alla variabile definita in precedenza: <?php $args = array( ‘category_name’ => ‘moderno’, ‘posts_per_page’ => 3, ‘orderby’ => ‘date’, ‘order’ => ‘DESC’, ‘paged’ => $paged ); ?>

Definisco il loop in una variabile, richiamando gli attributi precedentemente definiti nella variabile $args: <?php $loop = new WP_Query( $args ); ?> Inizio il loop <?php while ( $loop->have_posts() ) : $loop->the_post(); /*contenuto del loop*/ endwhile; /*chiusura del loop*/

Dopo aver chiuso il loop richiamo la funzione per il paging: echo paginate_links( array(

‘total’ => $loop->max_num_pages,

‘mid_size’ => 2 ));

Per maggiori informazioni sulla funzione e i comandi disponibili, come sempre, fare riferimento al codex Wordpress online.

■■ PErsonalizzare il menù amministratore Un buon designer si preoccupa anche che il lato amministratore sia di facile consultazione. Diversi plugin, come Advanced Custom Fields, aggiungono campi e opzioni non previsti nell’interfaccia base di Wordpress, per cui può capitare di rendere, la consultazione e l’interazione dei menù poco intuitiva.

Per ovviare a questo problema, è possibile intervenire sul CSS del menù amministratore tramite il file functions.php Es. function my_custom_admin_css() { echo ‘<style>

#acf-autori_iam ul li{

float: left;

width: 180px; }

#acf-autori_iam{

height: 230px;

height: 14rem; } </style>’;

273

} add_action(‘admin_head’, ‘my_custom_admin_css’);

■■ Sicurezza Messaggio di errore di login Se i dati immessi nel login sono sbagliati il messaggio di errore ci avvertirà dicendo se il nome utente non esiste o se semplicemente è stata sbagliata la password. Sebbene siano indicazioni utili per l’utente, in mano a un’hacker potrebbero rappresentare un valido indizio. Per modificare il messaggio di errore di login è sufficiente aggiungere una funzione al file functions.php. function my_login_messages($error) { return ‘<strong>ERROR</strong>: Autenticazione di accesso non valida.’; } add_filter(‘login_errors’,’my_login_messages’);

274

Tecniche base ■■ Position absolute riferito al div padre

■■ Abilitare @media query su IE9

In certi casi occorre posizionare gli elementi arbitrariamente all’interno di un box o di una pagina.

Per evitare che l’elemento impostato con “position: absolute;” consideri come contenitore padre la pagina intera, occorre includerlo all’interno di un “div” impostato con “position: relative”.

Es. ho appena inserito un carosello sulla mia pagina web, ma le frecce per gestire lo scorrimento delle immagini, invece di stare dentro al box delle immagini, sono a bordo schermo. Per sistemare il tutto, includo il codice html del carosello all’interno di un’altro div che ha come stile “style=’position: relative;’”.

Perchè le media query (@media), utilizzate nel CSS per rendere il sito adaptive, funzionino anche su IE9, è necessario disattivare la “compaibility mode” inserendo la stringa seguente in cima all’header, prima di ogni altro meta: <meta http-equiv=”X-UA-Compatible” content=”IE=9”>

#contenitore_padre { position: relative; } #contenitore_figlio { position: absolute; left: 0; } #contenitore_figlio2 { position: absolute; right: 0; }

275

PHP Visualizzare la directory corrente <?php // directory corrente echo getcwd() . “\n”; chdir(‘cvs’); // directory corrente echo getcwd() . “\n”; ?>

VISUALIZZARE IL CONTENUTO DELLA DIRECTORY INDICATA CON opendir <?php echo get_template_directory(); $cartella = opendir(‘/nomedirectory1/nomedirectory2/NomedirectoryDiCuiSiVuoleVedereIlContenuto’); while (false !== ($file = readdir($cartella))) { if ($file != “.” && $file != “..”) { // i punti servono da separatori, in modo che i nomi dei file non vengano scritti tutti attaccati echo “$file................”; } } closedir($cartella); ?>

CREARE UN FILE touch(‘/nomedirectory1/nomedirectory2/NomeFileDaCreare.php’); 276

ALTERNATIVA PER CREARE UN FILE (SCRIPT DA COMPLETARE) fopen(filename,mode,include_path,context) <?php $myfile = fopen(“newfile.txt”, “w”) or die(“Impossibile aprire il file!”); $txt = “Paragrafo Test 1\n”; fwrite($myfile, $txt); $txt = “Paragrafo Test 2\n”; fwrite($myfile, $txt); fclose($myfile); ?>

In questo caso se apriamo il file “newfile.txt” conterrà il testo seguente: Paragrafo Test 1 Paragrafo Test 2

RINOMINARE un file rename(‘/nomedirectory1/nomedirectory2/NomeFileDaRinominare. php’, ‘/nomedirectory1/nomedirectory2/NomeNuovo’);

SPOSTARE un FILE rename(‘/nomedirectory1/nomedirectory2/NomeFileDaSpostare. php’, ‘/nomedirectory1/nomedirectory2/nomedirectory3/NomeFileDaSpostare.php’);

Concatenare condizioni IF <?php if ( is_home() ) :

echo ‘ class=”home”’; else if ( is_page( ‘about’ ) ) :

echo ‘ class=”about”’; else if ( is_page( ‘news’ ) ) :

echo ‘ class=”news”’; endif; ?>

Pescare un valore da un array print_r var_dump 1 foreach(get_the_category($loop->ID) as $category) {

echo $category->cat_name; } 2 $autore_libro = esc_html( $array_autore[1]->name );

277

RESTYLING FASE 2: IL NUOVO SITO IAM Nel 2016 si sono incontrate difficoltà di gestione dell’ultimo restyle, soprattutto a causa di problemi tecnici che rendevano il caricamento delle pagine molto lento e la visualizzazione errata di alcuni contenuti.

La realizzazione effettiva del progetto sul Web era stata affidata a più persone per distribuire il carico di lavoro e ridurre i tempi di sviluppo. Purtroppo durante la creazione del sito è mancata la comunicazione designer e programmatori e non è stato possibile seguire passo a passo le soluzioni adottate per realizzare fedelemente le pagine web come da progetto; di conseguenza sulla piattaforma Wordpress sono stati installati una quantità ingiustificata di Plugin di cui non si conosceva appieno l’utilità.

Si contavano 36 plugin installati di cui 34 attivi.

Molto del codice personalizzato inoltre era stato scritto da persone che per esigenze lavorative avevano dovuto abbandonare il progetto. Questo significò trovarsi difronte a un sito contenente codice personalizzato, di cui non si comprendeva appieno la funzione, in quanto sviluppato da una sola persona e non da un team.

Un’altro problema fu l’utilizzo di un tema child di “Twenty Twelve”, modificato al punto da non essere più responsive. Il sito quindi, nonostante il rinnovamento, non rispondeva a tutti i requisiti tecnici di un sito moderno, tra cui quello di adattarsi a schermi di dimensione differente.

278

■■ Il 2° restyle di IAM Per ovviare ai problemi presentatisi con il primo restyle, ho deciso di rifare da capo il sito, cercando limitare il più possibile parti di codice personalizzate e l’installazione di plugin.

Il sito risultante era sempre sviluppato in Wordpress, si appoggiava a un tema child di “Twenty Twelve” tuttavia conteneva solo 11 plugin di cui 9 installati ed era responsive.

All’indirizzo iam.altervista.org è così cominciato lo sviluppo di un nuovo sito IAM, più pulito, leggero e semplice da utilizzare.

Avendo incontrato difficoltà nella migrazione dei database dai server di Polito a quelli di Altervista, ricreai il sito per intero, rispettando le linee guida definiti nel progetto.

Di primo acchito il nuovo sito realizzato su Altervista appare praticamente identico: l’obiettivo principale infatti è stato quello di rispettare l’estetica del sito già online, risolvendone però i problemi tecnici.

Pagina di amministrazione di Wordpress dove vengono visualizzati i Plugin installati

279

PRIMO RESTYLE

SECONDO RESTYLE

Lo sfondo invece che bianco è in grigio chiaro, per avvicinarsi alla cromia della pagina con i contenuti.

Ai menù era stato dato un maggior contrasto, utilizzando anche gradazioni scure di grigio.

In corrispondenza dell’immagine della rivista erano stati aggiunti due pulsanti con icona, in modo da consentire al visitatore un accesso rapido all’ultimo numero di Archalp.

Il riquadro di promozione della rivista nel secondo restyle è più compatto, in modo da utilizzare solo lo scroll interno e non quello della pagina intera; grazie a questa gestione dello spazio sono stati

aggiunti i pulsanti di condivisione sui social, direttamente visibili sotto al sommario della rivisita.

Nella colonna di destra sono stati mantenuti i caroselli delle News e della Gallery, tuttavia sono stati ricreati con plugin differenti, più versatili e personalizzabili.

Sopra a questi due widget compare anche la “Searchbar” cioè il campo di ricerca generico per tutti i contenuti del sito.

A fondo pagina il footer è stato reso più visibile e distinto dal resto della pagina.

280

Nella pagina di Archalp i numeri della rivista venivano visualizzati correttamente e con l’indicazione in corrispondenza di ogni immagine

Nella pagina dei libri grazie ad AJAX il filtro per nome funzionava in tempo reale senza dover ricaricare ogni volta la pagina. Erano stati aggiunti inoltre il “Campo di ricerca” e il pulsante per ordinare i libri secondo determinati parametri.

Nella pagina dei percorsi la mappa del piemonte era interattiva e permetteva di mostrare, in tempo reale, le architetture presenti in una determinata località o, viceversa, la località di appartenenza di un’architettura.

Per motivi di contingenza, legati principalmente alla promozione di Archalp, i restyle precedenti dovettero limitarsi a poche modifiche, in modo da poter pubblicare il sito il più presto possibile.

Nonostante questa decisione, ci si accorse che pur apportando poche modifiche, riprodurre la struttura e lo stile del sito originario, su tecnologie differenti (Wordpress invece che Flash) richiedeva comunque molto tempo, soprattutto perchè occorreva adattare i template offerti sulla rete alle esigenze di IAM: Nonostante i progressi e i risultati ottenuti, il sito continuava a non convincere. Con il passare del tempo e la decisione di restare fedeli alla struttura originaria del sito, anche il nuovo template utilizzato cominciava a diventare superato.

Si decise quindi di dedicare un’ultimo sforzo alla realizzazione del terzo restyle, apportando maggiori modifiche anche dal punto di vista estetico.

281

■■ Il 3° e ultimo restyle A partire dal 2017 si avviò il progetto per l’ammodernamento tecnologico ed estetico del sito IAM. Si creò un nuovo dominio gratuito, newiam.altervista.org e si cominciò a sviluppare il sito utilizzando template differenti, più moderni e dotati di funzioni di visualizzazione dei contenuti avanzate. Dopo aver testato layout differenti si giunse alla conclusione che solo due layout, tra quelli scelti, si adattavano alle esigenze del sito IAM.

V-Mag aveva delle grosse potenzialità dal lato tecnico, purtroppo però esteticamente non soddisfaceva i requisiti di I.A.M., dimostrando un aspetto troppo commerciale e vivace.

Al contrario il tema Relia di SmartCat Design offriva una soluzione estetica molto elegante e adatta all’immagine del centro di ricerca.

Il primo era V-Mag di AccessPress Themes. un tema studiato per magazine online, che devono quindi pubblicare molte notizie e promuovere la propria rivista.

Il tema pur essendo gratuito con licenza GPL V3, viene aggiornato regolarmente, dispone già di 13 Widget per la visualizzazione dei contenuti, è responsive e ha una struttura flessibile che consente di gestire facilmente i contenuti e il codice.

Anteprima generica del tema Relia

282

Sintesi delle caratteristiche del tema V-Mag

Relia pur disponendo di una versione gratuita, aveva troppe limitazioni nella personalizzazione e sarebbe stato difficile adattarlo alle esigenze di I.A.M. La soluzione quindi è stata adottare il tema V-Mag e integrare al suo interno alcune caratteristiche estetiche di Relia, in modo da fondere le potenzialità tecniche con quelle estetiche.

Questa commistione è particolarmente visibile nella pagina delle Biografie dove le schede dei singoli ricercatori adottano un aspetto importato da Relia.

■■ Cambiamenti e innovazioni La gabbia grafica del nuovo sito IAM resta fedele all’originale, tuttavia i contenuti non vengono più visualizzati all’interno di un riquadro, ma si distribuiscono su tutta la pagina.

In home page si dedica lo spazio centrale è sempre dedicato alla promozione dell’ultimo numero di Archalp disponibile e nella barra laterale di destra vengono mantenuti i moduli per le News e la Gallery Percorsi.

Le barre di scroll sono state rimosse completamente, in modo da evitare di suddividere in un eccessivo numero di riquadri la pagina.

Il metodo di consultazione del sito vuole avvicinarsi a quello dei layout a pagina singola, dove il contenuto della sezione è visualizzabile semplicemente scorrendo verso il basso la pagina senza dover cliccare su ulteriori link.

Il plugin utilizzato nella pagina delle biografie IAM sfrutta codice CSS, HTML e PHP del tema Relia.

283

Fixed width I Restyle

Scrollbar interna per contenere lâ&#x20AC;&#x2122;intera pagina web allâ&#x20AC;&#x2122;interno dello schermo

Pagina distribuita in lunghezza per agevolare la lettura anche su schermi piccoli, tramite scorrimento con swipe

Full width III Restyle

284

Funivia del mottarone

Rifugio Gastaldi

Valle di Lanzo, Ghiacciaio di Pian Gias

285

Il menù di navigazione resta sempre nella parte alta del sito, ma in questo caso è anche al di sopra dell’header dove sono posizionati i loghi dell’istituto e dell’università. In aggiunta è stato inserito il pulsante di ricerca, come nei siti analizzati nella “Concorrenza”.

Il footer mantiene uno stile sobrio, si distingue dal resto del sito per lo sfondo grigio scuro e contiene il modulo di iscrizione alla newsletter.

■■ Forme e geometrie Per creare un’ulteriore punto di contatto con con la rivista Archalp e la montagna, ai titoli di sezione del sito e ad alcuni pulsanti sono state applicate campiture rosse con bordi tagliati.

Queste forme, come quelle presenti nella nuova veste grafica di Archalp, richiamano la segnaletica di montagna, caratterizzata dalla forma irregolare degli gnomi di pietra e delle pennellate.

■■ Scelta cromatica Nelle precedenti versioni del stio, il solo utilizzo di gradazioni di grigio e delle trasparenze non consentiva di dare il giusto peso alle varie sezioni.

L’aspetto generale risultava eccessivamente freddo: seppur il layout delle pagine fosse pulito e agevole per la consultazione, mancava un’ “anima calda” per dare maggiore vitalità al portale.

Il rosso è un colore ricorrente nelle montagne frequentate dall’uomo. Se pensiamo a veicoli come i mezzi di soccorso, i gatti delle nevi, i trenini, le funivie sena dimenticare l’attrezzatura e la segnaletica, il rosso è un colore utilizzatissimo grazie al suo elevato contrasto e alla visibilità che mantiene anche nel mezzo della natura montana.

Inserire questa goccia di colore non ha permesso solo di evidenziare titoli e contenuti rilevanti, ma ha vivacizzato il portale creando una connessione tra naturale e artificiale, montagna e uomo: il sito, che per l’appunto appartiene a un’istituto che si occupa di architettura montana, risulta così maggiormente contestualizzato.

286

Tipico gnomo di montagna con indicazione del sentiero

■■ Font Rispetto alle prime versioni del sito, non è più stata utilizzata la font family Open Sans ma Lato. Sono entrambi font privi di grazie, adatti all’uso su Web, tuttavia dal punto di vista estetico il secondo si adatta meglio all’attuale tema utilizzato (VMag) e va bene pure su carta stampata.

■■ LA nuova veste grafica di Archalp In concomitanza al rinnovamento del sito, anche rivista Archalp è stata ridisegnata nel corso del 2017 da Gabriele Falletto, sempre sotto la supervisione ed il coordinamento del Prof. Marco Bozzola.

In seguit a un’attenta analisi e riprogettato.

Web e “cartaceo” sono mondi molto distanti tra loro a livello di approccio progettuale e d’uso.

Sono stati creati però dei punti di contatto, ovvero degli accorgimenti perlopiù grafici, tipografici e di forma, che anche in forma inconscia, uniscono sotto un unico cappello, le due diverse forme di comunicazione.

Font ISSN 2039-1730

13

N.13 - LUGLIO 2017

ABCDEFGHILMN nopqrstuvwxyz 0123456789

Campiture Come è già stato detto in precedenza, anche nella nuova rivista Archalp ci sono parti di testo accompagnate da campiture di forma irregolare, proprio per ricollegarsi alle geometrie della roccia e della segnaletica di montagna.

Colori Ogni numero di Archalp a partire dal 2017 sarà caratterizzato da un colore specifico, per il n.13 è stato scelto un colore azzurro. I colori sono molto accesi, proprio come il rosso utilizzato sul sito, proprio per richiamare i colori accesi impiegati dall’uomo nell’ambiente montano. Si crea così un collegamento tra i colori più naturali delle foto e quelli più “artificiali” dei titoli.

Sommario La struttura del sommario è similare, sia sulla rivista che sul sito si accompagna al nome dell’articolo il nome dell’autore rispettando le stesse proporzioni e distanze.

ARCHITETTURE DELL’ACQUA Energia, benessere, territori

9

R. Dini

72 76

ACQUA COME PALINSESTO 12

ACQUA COME PALINSESTO

ABCDEFGHILMN nopqrstuvwxyz 0123456789

EDITORIALE

PAESAGGI DELL’ENERGIA ARCHITETTURE DEL BENESSERE APERTURE

16

Condurre l’acqua

84

20

I “ru”

90

26

Calamita/à Project

94

C. Remacle G. Arena, M. Caneve

Rhone 3

100

36

Stormwater design sulle Alpi

110

42

Mulini in Valle Maira

118

32

R. Sega

A. Mazzotta

D. Regis

Centro di Ricerca Istituto di Architettura Montana

Archalp utilizza tre tipologie di font tra cui, a differenza del sito I.A.M. , compare anche un font graziato “Apple Garamond”, utilizzato per i paragrafi di testo interni. I titoli invece utilizzano anch’essi il font bastoni “Lato”. In questa maniera l’eleganza di una rivista cartacea/digitale si unisce all’aspetto più rigido e impostato del sito web.

PAESAGGI DELL’ENERGIA 48

Protesi vascolari

52

Architetture (non) evidenti

56 62 68

G. Azzoni

S. Girodo

Architetture per l’idroelettrico R. Dini

ARCHITETTURE DEL BENESSERE

Acqua dalle Alpi F. Pastorelli L. Mamino

Gli uomini elettrici

Loisir e santé

A. De Rossi, G. Ferrero

Le architetture termali della Valtellina

G. Menini

Architetture contemporanee per le cure termali A. De Rossi. R. Dini

Le acque termali e le architetture per il benessere

M. Vaudetti, S. Canepa

Nuotare a Combloux A. Mazzotta

Acqua, turismo, architettura

D. Regis

Monginevro nuovamente balneabile

122

A. Mazzotta

128

A. Mazzotta

134

A. Mazzotta

Monterosaterme a Champoluc Dal Palais des Sports a Le Palais

L. Bolzoni

Paesaggio idroelettrico alpino

APERTURE

E. Vigliocco

Modernismo elettrico

140

Fabbriche lungo i torrenti

146

R. Dini

M.L. Barelli

Ice Stupa Project

C. Clavuot

Quando il ghiaccio era una risorsa

C. Bertolini Cestari, T. Marzi

287

Immagini Sia su Archalp che sul Web le immagini hanno tutte angoli a spigolo vivo, rispettando gli spazi imposti dalla gabbia grafica.

Le didascalie inoltre sono caratterizzate da scritte in bianco accompagnate da una campitura grigio chiaro.

A,B,C,D. Il corso del Rodano tra Riddes e Saillon rispettivamente nel 1802, 1840, 1915, 1930 (© L. Laigre, E. Reynard, G. Arnaud-Fassetta, L.Baron, D. Glenz).

L’alluvione dell’ottobre del 2000 a Saillon (© Etat du Valais).

F. La sezione attuale del Rodano, G. La sezione di progetto (© Projet Rhone 3).

idraulica del fondovalle, l’aumento della biodiversità del territorio e il riappropriamento del fiume da parte della popolazione, sostenuto dalla realizzazione di numerosi progetti paesaggistici lungo le sue sponde.

Quello auspicato da Rhone 3 è un futuro idil34

Sopra pagina di dettaglio di una specifica architettura, con immagine a destra. In basso zoom sull’immagine della gallery.

288

liaco, in cui l’uomo – ormai consapevole dei rischi – sarà in grado di progettare una convivenza armonica con la natura. Ma se si osservano le tendenze di aumento demografico e i dati dell’Ufficio Federale della Statistica (OFS) relativi al consumo di suolo nel fondovalle, si avverte il pericolo che l’intera macchina idraulica del Rodano, insieme al sistema produttivo agricolo e industriale della valle, saranno comunque messi in difficoltà dal progressivo avanzare di una cieca urbanizzazione del territorio.

Rhone 3 migliorerà sicuramente la situazione attuale, sia dal punto di vista ecologico che idraulico, ma allo stesso tempo sarà necessario monitorare e prevedere gli effetti del progetto sullo sviluppo urbano ed economico della regione, tenendo presente l’impatto prodotto in passato dalle due correzioni sull’assetto spaziale del territorio. Questo “progetto del secolo” dovrebbe essere accompagnato da riflessioni più ampie rispetto all’abitabilità e alla densificazione del territorio alpino. Non è possibile pensare a una convivenza a lungo termine tra uomo e natura se si persevera nel riprodurre in luoghi così delicati un modello urbano di crescita ormai obsoleto. La città-territorio o ville-territoire – per riprendere la definizione che Corboz utilizzò negli anni novanta descrivendo la prospettiva di sviluppo della città del futuro – è una metropoli in progress, identica al territorio, «che contiene una moltitudine di spazi non-urbani chiamati natura»5. Se consideriamo l’urbanizzazione presente e futura del bacino del Rodano come un’unica eterogenea e complessa città-territorio, risulta evidente che il progetto della sua infrastruttura portante – il Rodano – non può dissociarsi da profonde considerazioni sulla sua evoluzione.

Note Il fiume Rodano nasce in Svizzera dall’omonimo ghiacciaio a 2360 m d’altitudine. Dopo aver raccolto le acque di tutti i torrenti tributari delle vallate alpine

1

13

Pagina della nuova versione di Archalp

Panoramica riviste Archalp Su tutti i supporti di comunicazione è possibile accedere a una pagina, dove vengono visualizzate in anteprima tutte le riviste pubblicate dal centro di ricerca I.A.M. : le anteprime sono caratterizzate da piccole miniature delle copertine disposte su una griglia.

SCOPRI TUTTI I NUMERI DI ARCHALP, GLI ARTICOLI E GLI APPROFONDIMENTI SU http://areeweb.polito.it/ricerca/IAM

13

289

A fructibus cognoscitur arbor

* Dal frutto si conosce lâ&#x20AC;&#x2122;albero

290

IAM 1.0

IAM 3.0

291

■■ Gabbia grafica Come è possibile osservare, esiste una stretta correlazione tra il primo e l’ultimo sito IAM. Gli elementi presenti in home page sono gli stessi, ciò che è cambiato principalmente è il peso dato a ognuno di essi.

Legenda ADMIN BAR HEADER MENU BAR CHI SIAMO BOX PRIMO PIANO BOX NEWS GALLERY FOOTER NEWSLETTER SOCIAL

292

IAM 1.0

L’header introduce sempre il sito con la medesima immagine di sfondo della Funivia dei Ghiacciai, accompagnato dai loghi I.A.M. e Politecnico di Torino.

Il menù è stato alzato e ingrandito, in modo da facilitarne la lettura e l’interazione.

La barra laterale è stata spostata a destra, in modo da rispettare il senso di lettura e mettere in primo piano i contenuti principali.

Archalp ora domina al centro della pagina e non occupa più solo uno spazio limitato della sidebar.

I box news e gallery sono rimasti pressochè invariati se non nello stile.

Il footer occupa uno spazio più grande, marcando con più forza il limite inferiore del sito.

Tra gli elementi nuovi compaiono la Admin Bar, cioè la barra degli strumenti, visibile solo dagli amministratori, che permette di accedere alle pagine di modifica del sito.

Nel footer sono stati aggiunti invece i collegamenti social e il modulo di iscrizione alla newsletter.

Nel sito precedente, lo spazio centrale era occupato dalla descrizione di IAM che ora è stata spostata nell’apposita sezione, “Chi Siamo”.

IAM 3.0

293

■■ Header e menù La struttura del nuovo sito riprende fedelmente quella precedente, dando più spazio all’immagine di sfondo che, oltre tutto si distribuisce su tutto lo schermo e senza essere limitata a un box di larghezza definita. I loghi mantengono la loro posizione, ora però sono animati e si ingrandiscono se mouse gli passa sopra.

Il menù di navigazione occupa ora una posizione dominante, in quanto rappresenta lo strumento necessario all’esplorazione del sito. I menù a tendina sono stati mantenuti, tuttavia la dimensione

dei font e il contrasto cromatico sono stati aumentati, così da facilitarne la lettura e l’interazione. Da notare la forma delle campiture, che richiama quelle già presenti anche sulla nuova rivista Archalp.

Sul lato destro è stato aggiunto anche un pulsante di ricerca per poter accedere a specifici contenuti del sito.

In cima al sito, gli amministratori autorizzati, dispongono anche di una barra dei menù aggiuntiva, che permette di accedere al backend.

Menù di navigazione del sito 1.0

Menù di navigazione del sito 3.0

294

■■ Primo piano Nella fase di progettazione di un sito abbiamo visto l’importanza dell’above the fold, cioè l’area che viene subito visualizzata su schermo, al primo caricamento.

Questa porzione del sito deve attirare subito l’attenzione del vistitatore, mostrandone i contenuti principali e i punti di forza.

Il sito precedente puntava più su un approccio didattico, descrivendo a parole IAM. La grande quantità di testo e la mancanza di immagini riducevano la rapidità di consultazione e comprensione del sito a una prima “occhiata”. Durante la progettazione dei restyling è stato appurato che IAM deve promuovere principal-

mente, Archalp, notizie relative all’attavità del centro di ricerca e l’archivio presente sul sito. Nella parte centrale della home page non poteva che comparire Archalp, mettendo in risalto solo le informazioni principali che sono: ͽͽ Numero della rivista ͽͽ Copertina ͽͽ Titolo della rivista ͽͽ Pulsanti per la consultazione ͽͽ Indice con rapido accesso ai contenuti

Descrizione di IAM presente in homepage sul sito 1.0 Contenuto in primo piano nella homepage del sito 3.0

295

■■ Barra laterale La sidebar strutturalmente è rimasta invariata, ciò che cambia è il modo in cui i moduli presenti mostrano i contenuti.

Il pulsante per consultare Archalp è stato rimosso, in quanto la rivista occupa ora un posizione centrale nel sito.

Il modulo news è più compatto, comunica principalmente tramite le immagini e mostra unicamente il titolo, rinunciando invece all’estratto, in modo da non caricare di troppe informazioni il visitatore.

Nel sito precedente per consultare la notizia occorreva cliccare su un piccolo pulsante con scritto “info”, a destra dell’immagine in antemprima. Le dimensioni ridotte rendevano difficile l’interazione, inoltre, nella maggior parte dei siti web, l’intera notizia è un link cliccabile per accedere all’approfondimento.

La Gallery che era stata precedentemente chiamata “Percorsi di architettura” non mostra solo l’immagine dell’architettura, ma anche il suo nome e offre un piccolo menù di navigazione, che consente di rivedere anche le immagini passate; nel sito precedente le immagini precedenti soccrevano automaticamente, senza disporre di alcun menu di navigazione, inoltre non erano collegate alla relativa pagina di approfondimento.

I moduli della sidebar pur mantenendo la stessa posizione, sono maggiormente distanziati tra di loro e sfruttano gli spazi bianchi mettendo in risalto il titolo e mostrando due blocchi distinti.

Sidebar sito 3.0

Sidebar sito 1.0

296

■■ Footer e cookie Sebbene sia l’area a fondo pagina, il footer ha comunque una funzione importante all’interno del sito. Nel sito precedente in modo molto discreto mostrava i dati di I.A.M. con i relativi contatti.

L’aggiunta del modulo newsletter e dei social media richiedeva più spazio ma soprattutto maggiore visibilità.

Il footer nel nuovo sito ha un’altezza maggiore e delimita la fine della pagina con colori di forte contrasto: rosso, grigio scuro e bianco.

Ai dati I.A.M. è stato accompagnato il logo, in modo da lasciar intuire subito al lettore che il testo fa riferimento direttamente al Centro di Ricerca.

La voce “Credits”, precedentemente inserita nel menù di navigazione, è stata spostata in questa area del sito, in quanto contiene informazioni tecniche relative unicamente a IAM e al sito.

Nella giornata del 3 giugno 2015 è entrata in vigore in Italia la tanto discussa cookie law conformemente a quanto stabilito nel provvedimento del Garante per la protezione dei dati personali dell’8 maggio 2014, recante “Individuazione delle modalità semplificate per l’informativa e l’acquisizione del consenso per l’uso dei cookie”. A fondo pagina, quando viene caricato il sito, compare ora la barra che informa l’utente relativamente all’uso di cookie.

A destra sono disponibili i moduli per l’iscrizione alla newsletter e per accedere alla pagina Facebook di IAM.

Footer sito 1.0

Footer sito 3.0

Messaggio di avviso per l’utilizzo di cookie sul sito 3.0

297

■■ Mappa del sito 3.0

Home Cos’è IAM

Archalp

Biografie

Archalp 9 Archalp 8 Archalp 7

Percorsi Il moderno

Scritti Articolo 1 Articolo 2 Articolo 3 ...

Libri

Articolo 1 Articolo 2 Articolo 3 ...

Articolo 1 Articolo 2 Articolo 3 ...

Articoli

Articolo 1 Articolo 2 Articolo 3 ...

Articolo 1 Articolo 2 Articolo 3 ...

Collane

Articolo 1 Articolo 2 Articolo 3 ...

...

Turismo di massa

Il contemporaneo

Sidebar

298

Archalp

News

Ultimo articolo di Archcalp

Articolo 1 Articolo 2 Articolo 3 ...

epage Ricerche Universitarie

Enti locali

Progettuali

Didattica

Eventi

Biografie

Articolo 1 Articolo 2 Articolo 3 ...

Dottorato

Articolo 1 Articolo 2 Articolo 3 ...

Mostre

Articolo 1 Articolo 2 Articolo 3 ...

Articolo 1 Articolo 2 Articolo 3 ...

Laboratori e Corsi

Articolo 1 Articolo 2 Articolo 3 ...

Convegni

Articolo 1 Articolo 2 Articolo 3 ...

Articolo 1 Articolo 2 Articolo 3 ...

Tesi

Articolo 1 Articolo 2 Articolo 3 ...

Scheda 1 Scheda 2 Scheda 3 ...

Footer Credis

Newsletter

Facebook

299

■■ Pagina “Chi siamo” La pagina “Chi siamo” è la prima disponibile sul menù di navigazione.

Subito in primo piano vegono mostrati degli schizzi progettuali di Mollino, comunicando da subito cos’è il Centro di Ricerca IAM e il suo ambito di lavoro.

Più in basso si fornisce una descrizione sintetica ma completa e nella barra laterale si elencano dati specifici riferiti ai membri di IAM e alla sua posizione; per creare un collegamento rapido con le biografie dei ricercatori, è stato aggiunto un pulsante che rimanda alla pagina con l’elenco di tutti i membri.

300

■■ Pagina “Archalp” Archalp disponde di una pagina introduttiva dove si presentano tutti i numeri usciti e i dati relativi alla redazione. Le anteprime delle copertine, accompagnate da numero e anno di pubblicazione, forniscono un’indicazione e un’accesso rapido al contenuto interessato.

La pagina di approfondimento di ciascun numero, riprende la struttura già utilizzata in homepage, fornendo anche i pulsanti per la consultazione online o lo scaricamento del PDF. Anche in questo caso le voci dell’indice sono linkate ai rispettivi capitoli sul sito di ISSUU.

301

■■ Pagina “percorsi” Questa pagina contiene un ricco archivio di architetture. La sua progettazione non è stata semplice e ha subito diverse variazioni.

La pagina generica fornisce un’anteprima del contenuto delle tre sezioni: Il Moderno, Turismo di Massa e Il Contemporaneo.

Elenco dei progetti con immagini animate

Le pagine di approfondimento sono divise in tre parti.

Subito sotto al titolo si mostrano i dati relativi al progetto, già presenti nell’elenco della pagina di sezione; in basso viene descritta l’architettura e nella parte di sinistra è presente una gallery con immagini visualizzabili a tutto schermo.

Pagina introduttiva alla sezione Percorsi

Scelta una sezione, si accede a una pagina divisa in due colonne. A sinistra è presente un breve testo e a destra viene fornito un elenco di tutte le architetture relative.

Ogni progetto viene presentato con un’immagine di anteprima, il suo nome e quello del progettista, il luogo e l’anno di realizzazione.

Le immagini sono animate e sfiorandole con il puntatore fanno uno zoom sul contenuto.

In cima alla lista è disponibile un menù a tendina che consente di ordinare i progetti per titolo, progettista, luogo e anno.

302

■■ Pagina “scritti” Questa pagina contiene un ricco archivio di architetture. La sua progettazione non è stata semplice e ha subìto diverse variazioni.

Gli Scritti si dividono in tre sottosezioni: Libri, Articoli e Collane.

La pagina principale mostra i contenuti di tutte le sezioni in ordine cronologico. Similmente all’elenco già presente nei Percorsi, ogni scritto è presentato da un’immagine di anteprima, titolo e dati relativi alla pubblicazione.

Non mancano ovviamente i pulsanti di condivisione della pagina sui social.

Per facilitare la ricerca di un specifico scritto, in cima alla lista è disponibile una barra di ricerca, dove è possibile digitare la parola da cercare all’interno dell’elenco.

A differenza delle altre pagine di dettaglio, nelle Collane a destra della descrizione è presenta anche una gallery con un’anteprima di tutti i libri contenuti nella collana.

Nella pagina di dettaglio dell’articolo, vengono presentati il titolo, la copertina, con a fianco i dati di pubblicazione e più in basso una breve descrizione.

Pagina di dettaglio di una Collana

303

■■ Pagina “Ricerche ” La struttura della pagina delle Ricerche è la medesima di quella degli Scritti, infatti utilizzano lo stesso modulo “IAM ELENCO CONTENUTI”.

L’unica differenza nella pagina di dettaglio della ricerca è che, similmente alle collane di libri, presenta una gallery a destra della descrizione.

Pagina dettaglio di una Ricerca

304

Immagine della gallery visualizzata a tutto schermo

■■ Pagina “Didattica” Questa sezione si divide nelle pagine Dottorato, Laboratori e Corsi e Tesi.

La prima contiene unicamente un testo di presentazione del progetto “Building the Alps”, mentre le altre due sono strutturate esattamente come gli Scritti e le Ricerche.

Come è possibile notare dalle immagini, ogni pagina del sito IAM offre dei link rapidi per la modifica dei contenuti, senza dover passare dal menù di amministrazione.

A differenza degli altri elenchi, quello presente nella pagina delle tesi non mostra immagine di anteprima per i singoli contenuti; inoltre non c’è alcun collegamento a pagine di approfondimento in quanto non sono necessarie.

305

■■ Pagina “eventi” La pagina Eventi segue la medesima gabbia grafica di Scritti, Ricerche e Didattica, sia per le pagine elenco che quelle di dettagli.

Nella pagina elenco si mantengono in alto il titolo e la barra di ricerca. Ogni elemento elencato presenta sulla sinistra un’immagine di anteprima e sulla destra il pulsante modifica, solo per amministratori, il titolo e i dettagli.

306

Nelle pagine interne di approfondimento vengono mostrati il titolo, i dettagli e su due colonne separate, il testo descrittivo e la gallery con le immagini.

Più in basso vengono visualizzati i pulsanti per la condivisione social e il quello per la modifica rapida dell’amministratore.

■■ Pagina “biografie” La pagina delle biografie ha una gabbia grafica differente da quella proposta nelle altre sezioni.

A sinistra è presente una barra laterale, con un elenco a rapida consultazione di tutti i membri attivi del Centro di Ricerca.

A destra, più dettagliatamente, sono presentati i ricercatori con le rispettive foto.

Proposta n.1

Le pagine di dettaglio sono molto semplici. Inizialmente, durante la progettazione dell’ultimo restyling, si era pensato di includere un elenco di tutti i contenuti legati al ricercatore, suddividendoli per sezione.

Proposta n.2

307

Questo proposte furono bocciate perché inserivano troppe informazioni nella stessa pagina e ripetevano collegamenti a sezioni già raggiungibili dal menù di navigazione.

La soluzione finale è essenziale e presenta unicamente un pulsante di collegamento alla pagina web “porto.polito.it”, dove vengono elencate tutte le pubblicazioni del rispettivo ricercatore.

In questa maniera non solo si offre una risorsa in più, oltre a quelle già presenti sul sito, ma si crea una maggiore connessione tra IAM e il Politecnico di Torino.

Pagina Porto del Politecnico di Torino

308

Gestione e amministrazione del sito Nella realizzazione dell’ultima versione del sito IAM, si è prestata attenzione anche alla facilità di amministrazione del sito.

Per il secondo restyle era stata realizzata una guida di tre pagine, contenente le istruzioni base per gestire le funzioni principali del sito.

IAM ha lamentato però delle difficoltà nell’inserimento di alcuni contenuti, soprattutto quando si trattava di gestire la formattazione dei testi: nella guida infatti non venivano spiegati problemi che potevano verificarsi copiando testi da programmi esterni.

QUICK GUIDE Aggiornamento Sito IAM a cura di Francesco Fortino, info@ffd-web.com

1. Aggiungere un nuovo numero ArchAlp Nella colonna di sinistra, cliccare sulla voce di menu ArchAlp (ed, eventualmente, subito nulla voce “Aggiungi numero” che compare quando si passa sopra con il puntatore del mouse) 4. Modificare i contenuti per della ipagina •3. Aggiungere Compilare il form che compare, secondo le indicazioni vari “ArchAlp” campi. una nuova News ◦ Ulteriori note ed indicazioni: • Nella colonna di sinistra, cliccare sulla voce di menu Pagine. Comparirà l'elenco delle • Nella colonna di sinistra, cliccare sulla voce di menu Articoli (ed, eventualmente, pagine presenti.

Formato del titolo: Archalp n.il XX / ANNO subito▪ nulla voce “Aggiungi nuovo” che compare quando si passa sopra con • Cliccare ora su “ArchAlp” puntatore del mouse) • Compilare il form che compare • Compilare che compare ▪ il form Nell'editor di testo va inserito il sommario come elenco puntato ◦ Ulteriori note ed indicazioni: ◦ Ulteriori note ed indicazioni: ▪ Il campo “Sottotitolo” mostra (ovviamente...) il sottotitolo che compare sotto ▪▪ Formato del titolo: qui va il titoloin dellaevidenza news. Si consiglia diviene non inserirne di la scritta ArchAlp L'immagine impostata in automatico sulla copertina troppo lunghi.

▪ Il campo “Testo Pre-elenco” gestisce il testo che viene visualizzato SOPRA ▪ Nell'editor di testo si possono inserire immagini, testo, link o quel che si l'elenco dei numeri pubblicati dellaa rivista • Cliccare su “Pubblica” o “Aggiorna” sulla colonna di destra, seconda se state preferisce ▪ L'editor di testo successivo, invece, gestisce il testo che viene visualizzato ▪ L'immagine in evidenza viene selezionata in automatico se è stata caricata SOTTO l'elenco dei numeri pubblicati della rivista creando un nuovo uno esistente un'immagine dall'editor di testo,articolo altrimenti usate ilo boxmodificando “Immagine in • Al termine delle modifiche, cliccate su “Aggiorna” •

non direttamente su “Aggiungi Biografia”). Verrà visualizzato l'elenco delle ultime biografie inserite. Cliccando sul singolo nome sarà possibile modificare la voce.

evidenza” sulla colonna di destra ▪ IMPORTANTE: selezionare la categoria NEWS nel box Categorie presente

sulla colonna di destra, altrimenti l'articolo non verrà visualizzato come NB: L'ultimo newsnumero della rivista verrà automaticamente riportato in homepage, senza • Cliccare su “Pubblica” o “Aggiorna” sulla colonna di destra, a seconda se state necessità diunulteriori interventi. creando nuovo articolo o modificando uno esistente NB: Per modificare eventuali news inserite, cliccare solo sulla voce di menu Articoli (e non direttamente su “Aggiungi Nuovo”). Verrà visualizzato l'elenco degli ultimi articoli inserite.

singolo articolo sarà possibile modificare lanumeri voce.

NB2:Cliccando Persulmodificare eventuali inseriti, cliccare solo sulla voce di menu ArchAlp (e non direttamente su “Aggiungi numero”). Verrà visualizzato l'elenco degli ultimi numeri 4. Modificare i contenuti della pagina “Cos'è IAM” inseriti. Cliccando sul singolo numero sarà possibile modificarlo.

• • •

Nella colonna di sinistra, cliccare sulla voce di menu Pagine. Comparirà l'elenco delle pagine presenti.

Cliccare ora su “Cos'è IAM” Compilare il form che compare ◦ Ulteriori note ed indicazioni: ▪ L'editor di testo “Testo Sidebar” identifica il testo che va sulla destra della pagina, sotto l'immagine.

▪ Il secondo editor di testo, invece, identifica i contenuti principali ▪ L'immagine in alto a destra si modifica usando il box “Immagine in evidenza” sulla colonna di destra.

Al termine delle modifiche, cliccate su “Aggiorna”

2. Aggiungere una nuova Biografia •

•

•

•

Nella colonna di sinistra, cliccare sulla voce di menu Biografie (ed, eventualmente, subito nulla voce “Aggiungi Biografia” che compare quando si passa sopra con il puntatore del mouse) Compilare il form che compare Alcune pagine della prima guida realizzata per IAM ◦ Ulteriori note ed indicazioni: ▪ Formato del titolo: Nome Cognome ▪ Nell'editor di testo va inserito solo il testo ▪ L'immagine del membro IAM va caricata nel box “Immagine in evidenza” presente sulla colonna di destra.

Cliccare su “Pubblica” o “Aggiorna” sulla colonna di destra, a seconda se state creando un nuovo articolo o modificando uno esistente

NB: Per modificare eventuali numeri inseriti, cliccare solo sulla voce di menu Biografie (e

2.0

309

Un’altro inconveniente era l’eccessiva automatizzazione dei processi.

Gli sviluppatori avevano creato un sistema che richiedesse il minimo intervento da parte dell’amministratore per inserire o modificare contenuti sul sito: in questa maniera però era stata limitata di molto la personalizzazione.

Ogni articolo e ogni pagina, in base alla categoria di appartenenza, aveva uno specifico form da compilare senza concedere variazioni o alternative, salvo applicando modifiche al codice delle pagine.

Grazie a questa esperienza abbiamo appreso che automatizzare eccessivamente un processo può diventare un ostacolo piuttosto che una comodità; piuttosto è meglio dotare il sistema di maggiore libertà, mettendo a disposizione più strumenti, purchè l’interazione sia resa semplice.

Gli obiettivi per un nuovo restyle quindi erano: ͽͽ Aumentare la versatilità di widget e strumenti ͽͽ Favorire la personalizzazione dei contenuti ͽͽ Facilitare l’utilizzo dell’intefaccia amministratore, permettendo di apportare modifiche con poche e semplici operazioni ͽͽ Dotare il cliente di un manuale chiaro e completo di tutte le informazioni base ed eventualmente anche avanzate, per interagire con il portale messo a disposizione Pagina di aggiunta di un contenuto. Nella sidebar è possibile notare la lunga lista di contenuti personalizzati, mentre al centro si vede un esempio di form preimpostato, per l’inserimento dei dati richiesti prima della pubblicazione.

310

■■ Page builder Con la diffusione di HTML5 e CSS3 si sono diffusi numerosi strumenti che permettono di progettare su Web tramite interfacce grafiche, senza dove intervenire direttamente sul codice.

MotoPress, Visual Composer, SiteOrigin, Beaver Builder sono solo alcuni esempi di strumenti user friendly per la creazione di pagine web.

Per la realizzazione del sito I.A.M. è stato scelto il plugin SiteOrigin Page Builder che amplia le funzioni base di Wordpress.

Pur esistendo anche una versione a pagamento di questo strumento, il pacchetto base fornisce già una quantità notevole di funzioni.

Assieme al plugin Page Builder infatti viene fornito anche un set di 20 widgets chiamato SiteOrigin Widgets Bundle

Punti di forza di Page Builder evidenziati sul sito ufficiale

Le potenzialità di S.O. Page Builder sono: ͽͽ INTERAZIONE DRAG & DROP - le pagine web sono suddivisibili in griglie come con Bootstrap, con un massimo di 12 colonne e un indeterminato numero righe. All’interno di ogni spazio definito è possibile inserire o spostare i widget, semplicemente trascinandoli. ͽͽ THEMES - la gabbia grafica e la struttura di ogni pagina viene salvata e messa a disposizione, in modo da poterla riutilizzare senza doverla ricreare da zero ogni volta. Site Origin inoltre mette a disposizione dei layout precostruiti. ͽͽ WIDGETS - Page Builder permette di inserire contenuti di vario genere attraverso l’utilizzo di widget creati adhoc. Per esempio SiteOrigin Editor serve principalmente a inserire testi, SiteOrigin Button permette di creare pulsanti personalizzati oppure SiteOrigin Hero consente la creazione di un’immagine Hero da inserire nell’Header o in un sito a pagina singola.

RESPONSIVE LAYOUT - tutti i layout creati tramite Page Builder sono responsive, si adattano quindi a schermi di dimensioni differenti, ridisponendo i contenuti all’interno della griglia definita.

311

■■ Widget ad-hoc Per poter garantire una maggiore versatilità, tutte le personalizzazioni che nelle versioni precedenti di IAM caratterizzavano determinate pagine, sono ora state integrate all’interno di specifici widget.

Per esempio per visualizzare un elenco dei libri o delle ricerche, non è più necessario creare una pagina con un template specifico, ma è sufficiente inserire nel layout creato con page builder il widget IAM ELENCO CONTENUTI. Il sito IAM ha un vasto di archivio di documenti e immagini di vario genere, occorreva quindi definire degli strumenti in grado di mostrare i contenuti in specifiche maniere.

In totale sono stati realizzati 6 widget personalizzati, ognuno con una funzione specifica.

Widget IAM PERCORSI

Utilizzando widget personalizzati al posto di specifici template garantiva anhe i seguenti vantaggi: 1. Il codice sorgente deriva da plugin annessi al template Vmag 2. Il codice rimane separato da quello di pagine e articoli, rendendone più semplice la modifica 3. Non sono legati a una specifica pagina, ma sono adattabili e posizionabili ovunque 4. Si da all’utente la possibilità di decidere dove posizionare e dove mostrare determinate informazioni

Widget specifico per le pagine elenco dei percorsi, mostra tutte le architetture presenti nella categoria percorsi visualizzata.

Il plugin è applicato a tutte e tre le pagine: ͽͽ Il Moderno ͽͽ Turismo di Massa ͽͽ Il Contemporaneo Questo plugin non è personalizzabile direttamente da interfaccia utente ed è contenuto nella cartella “iam-percorsi”.

312

Widget IAM Elenco Contenuti

Widget IAM Elenco SENZA IMMAGINI

Visualizza un elenco di tutti gli articoli appartenenti a una determinata categoria, mostrando a sinistra l’immagine in evidenza e a destra le informazioni.

Nel menù di configurazione del plugin è possibile selezionare, tramite un menù a tendina, la categoria da visualizzare.

Analogo al plugin “IAM Elenco Contenuti”, elenca gli articoli della categoria selezionata, senza però mostrarne l’immagine in evidenza e senza linkare il contenuto alla pagina di approfondimento.

Attualmente il plugin viene utilizzato nella pagina “Tesi” della sezione “Didattica”.

313

Widget IAM LISTA ARCHALP Specifico per la sezione “Archalp” questo plugin mostra tutte le riviste Archalp affiancate.

Widget IAM INFO PERCORSI Specifico per la sezione “Percorsi”, questo plugin mostra le informazioni tecniche relative all’architettura visualizzata, all’interno dell’articolo di approfondimento.

314

Widget IAM biografie

■■ Plugins e widget installati Slider Revolution Durante le fasi di restyling del sito IAM si sono spesso incontrare difficoltà nel personalizzare i caroselli presenti in homepage. Tra i plugin distribuiti gratuitamente era difficile trovarne uno che si adattasse allo stile del sito e alle richieste dell’Istituto.

La soluzione è stata dotare il portale di uno dei migliori e più versatili plugin di Wordpress, Slider Revolution di Themepunch.

Tramite un’interfaccia grafica user friendly, è possibile creare da zero qualunque tipo di carosello e personalizzarne ogni singolo aspetto.

Specifico per la sezione “Biografie” questo plugin mostra in un template a griglia, tutti gli articoli contenuti nella sezione Biografie, che corrispondono ai ricercatori I.A.M.

Grazie a Slider Revolution non solo è stato possibile creare dei caroselli specifici per il sito, ma si è anche fornito al team I.A.M. uno strumento di personalizzazione potente e semplice da usare, anche per chi non ha conoscenze di Webdesign.

315

The Newsletter Plugin Tra le richieste di I.A.M. c’era quella di disporre il centro di ricerca di un servizio di newsletter, senza però appoggiarsi a servizi esterni che richiedessero la creazione di account o il pagamento di tariffe.

In questo caso “The Newsletter Plugin” di Web Agile S.a.s. rappresenta la soluzione più adatta alle necessità del team IAM.

Pagina di modifica di uno slider realizzato con Slider revolution. In basso è possibile vedere l’editor visuale con la timeline per le animazioni

316

Gratuitamente infatti, il plugin consente di collegare la propria casella mail tramite SSL, abilitando un servizio di newsletter interno al proprio sito; oltretutto è possibile scrivere le newsletter tramite un’interfaccia interna al plugin, molto semplice da usare, simile a quella utilizzata da Mailchimp. Non mancano strumenti

di statistica per l’analisi delle singole newsletter.

File manager Uno degli ostacoli più grandi alla realizzazione del sito I.A.M., fin dalla sua prima versione, è stata l’impossibilità di accedere via FTP ai file sul server.

Purtroppo, per questioni di sicurezza, i server del Politecnico di Torino possono essere gestiti solo da personale addetto, per cui ogni modifica sul sito doveva prima passare un tecnico che si occupava poi del caricamento dei file.

Per arginare questo grave problema, inizialmente si cercò di interagire con i file presenti sul server tramite query PHP, tuttavia risultava troppo lento e poco sicuro come sistema.

Per la realizzazione dell’ultima release del sito IAM è stato individuato un plugin che ha quasi del tutto permesso di fare a meno dell’accesso FTP. Si tratta di File Manager di Aftabul Islam.

Pagina principale del plugin, con dati statistici di invio e lettura delle newsletter

Erano stati provati altri file manager in precedenza, ma presenta-

317

vano sempre problemi o incompatibilità.

Se i nuovi siti IAM furono sviluppati su server altervista, fu proprio per poter disporre di un server completamente accessibile su cui lavorare.

Dopo il trasferimento dell’ultimo sito IAM sui server del Politecnico tuttavia si era ripresentato il problema dell’accesso FTP e, File Manger, gratuitamente e con una comodissima interfaccia che riproduce la GUI di ogni comune sistema operativo, ha permesso di interagire con i file del sito, garantendo la possibilità di portare a termine un progetto che altrimenti avrebbe rischiato di arenarsi.

■■ Consultazione, Ricerca e paginazione Il sito IAM ha un archivio di contenuti molto ricco e in continua espansione. Per facilitare la consultazione dei contenuti durante i vari restyling sono state adottate diverse soluzioni.

Nella prima versione del sito, gli articoli di ogni sezione erano elencati in ogni sezione e, per evitare di allungare troppo l’altezza della pagina web, erano stati distribuiti a gruppi di quattro. Per passare al gruppo successivo, occorreva cliccare sul numero progressivo della pagina e attenderne il caricamento.

Nella fase di progettazione della seconda versione era stato proposto di mostrare tutti i contenuti su un unica pagina: la lista dei contenuti sarebbe rimasta all’interno del riquadro del sito sfruttando la scrollbar che, per questioni estetiche, sarebbe stata sostituita da due pulsanti a forma di freccia, a destra della lista dei contenuti.

In aggiunta si era proposto di offrire la possibilità di filtrare i contenuti per titolo, in base alla prima lettera presente nel titolo, tuttavia questa soluzione apparve superflua e di scarsa utilità Pagina di navigazione del File Manager. In aspetto e funzione è analoga a Explorer di Windows o a qualunque altro browser

318

di caricarsi completamente da zero ma motrava istaneamente gli articoli successivi.

Numeri di paginazione dei contenuti

Affrontando la problematica legata all’adattabilità del sito su dispositivi portatili, apparve evidente che la paginazione rendeva la consultazione scomoda su schermi touch di dimensioni ridotte.

A partire dalla terza versione del sito si decise di mostrare tutti i contenuti in un’unico elenco, in modo da poterli scorrere tramite scroll o swipe.

Per una migliore lettura, si adottarono diverse tecnologie per filtrare i contenuti.

Per questo scopo fu integrato nel sito il plugin JPlist-jQuery Data Grid Controls di Miriam Zusin.

Elenco dei percorsi con scrollbar personalizzata

La seconda versione del sito, essendo interamente in HTML, poteva avvalersi della tecnologia AJAX, quindi si decise di mantenere i numeri di paginazione. Grazie all’uso di Javascript e PHP, cliccando sui numeretti, la pagina web non necessitava più

319

Come è possibile osservare nello screenshot, all’interno della sezione libri era possibile gestire i contenuti in tre maniere differenti.

1. Filtrare gli articoli in base al nome dell’autore. I nomi venivano presentati sotto forma di elenco, in una colonna apposita sulla sinistra 2. Ordinare gli articoli a seconda di determinati parametri che potevano essere, nome dell’autore, titolo o anno, sia in ordine crescente che discendente 3. Cercare tramite un campo di testo gli articoli contenenti la parola inserita

A sinistra l’elenco degli autori. In alto il menù a tendina “Ordina per” e la barra di ricerca

Nella versione finale del sito si decise inizialmente di mantenere sia la prima che la seconda soluzione, apportando però alcune modifiche.

Il filtro per autore rubava eccessivo spazio alla pagina, si decise 320

quindi di spostarlo all’interno di un menù a tendina, analogo a quello della funzione di ordinamento.

I comandi per la visualizzazione dei contenuti, vista la loro utilità, furono integrati anche nei plugin delle sezioni Ricerche, Didaddica ed Eventi.

A questo punto si incontrarono diverse difficoltà: ͽͽ I dati relativi ai contenuti differivano molto di sezione in sezione. Per esempio non si parlava più solo di autori ma anche di relatori o responsabili di progetto ͽͽ Eventi e Progetti generalmente hanno coinvolto diverse persone, quindi utilizzare lo strumento per l’ordinamento alfabetico per nome diventava complesso se non addirittura inutile ͽͽ Per utilizzare l’ordinamento alfabetico, occorre fare riferimento ai cognomi e non ai nomi. In fase di inserimento dei dati relativi all’articolo, è stato necessario aggiungere un campo, in modo da separare la registrazione di Nome e Cognome sul Database. ͽͽ I nomi degli autori spesso non coincidevano con quelli dei membri I.A.M. Il menù a tendina per filtrare i contenuti in base al nome dell’autore rischiava di diventare troppo lungo e scomodo da utilizzare. ͽͽ La grande quantità di metadati da richiamare tramite PHP rendeva difficile la gestione del codice e del collegamento con il motodo di ricerca.

Sebbene i menù a tendina potessero fornire dei suggerimenti di ricerca al visitatore mostrandogli delle opzioni precise, si stabilì di eliminarli, a causa delle problematica incontrate.

In sostituzione è stato inserito il campo di ricerca proposto inizialmente nella fase progettuale.

In questa maniera non solo il codice è più snello, ma non esistono più vincoli legati alla grande varietà di metadati, quindi il visitatore ha la possibilità di filtrare i contenuti del sito cercando qualsiasi parola.

Per mantenere comunque un ordine di consultazione, i contenuti vengono sempre caricati in ordine cronologico.

321

■■ I manuali d’uso IAM Sia per la nuova veste grafica di Archalp che per il sito sono stati realizzati due manuali d’uso, contenenti le nozioni base per la modifica dei contenuti.

Nel caso della rivista si tratta del trattamento differente delle pagine e dei loro contenuti, per ogni sezione.

Per il sito viene spiegato il funzionamento dei plugin principali e passo a passo vengono indicati i passaggi da seguire per creare o modificare le pagine e gli articoli.

Pagina del manuale per Arhcalp Inserire un articolo con il nuovo numero di Archalp 1. Cliccare su “+ Nuovo” poi su “Articolo”, nella barra degli strumenti in alto.

www 1. Inserire il titolo utilizzando la formula “Archalp xx / anno”.

Cliccare su “Prebuilt Layout” nel riquadro del “Page Builder”.

MANUALE d’uso del sito web I.A.M. http://areeweb.polito.it/ricerca/IAM

Centro di Ricerca Istituto di Architettura Montana

2. Selezionare “Clona: Pagine” a sinistra e scrivere nel campo di ricerca più in alto “archalp”, così la ricerca darà come risultato la pagina “Home” del sito. Selezionare la pagina “Home”, cliccare su “Inserisci” e “Replace current”.

Alternativa: invece di clonare la pagina “Home” è possibile anche clonare un articolo di Archalp già esistente. In questa maniera si manterrà il layout corretto, tuttavia sarà necessario aggiornare di nuovo tutti i dati.

Copertine dei manuali forniti a IAM

322

20

Pagina del manuale per il sito

■■ Il manuale del sito

Area Amministrativa

Il manuale si compone di una cinquantina di pagine ed è diviso in quattro sezioni: Il Sito, Area Amministrativa, Template e Widget e Funzioni Principali.

La copertina è simile a quella del manuale realizzato per la rivista Archalp poichè si tratta di testi riferiti a prodotti strettamente connessi tra di loro.

Al suo interno la struttura è differente, specialmente dove vengono spiegati i vari processi per la modifica dei contenuti.

Si è data molta importanza alla comunicazione tramite screenshots e fotografie, in modo da dare sempre al lettore un riferimento chiaro con le istruzioni.

Qui viene spiegato tecnicamente come accedere all’area amministrativa del sito Wordpress.

ArEA AMMINIstrAtIvA

Per accedere all’area amministrativa: 1. Utilizzare l’url: areeweb.polito.it/ricerca/IAM-new/wp-login.php 2. Inserire “Nome Utente” e “Password” 3. Cliccare su “Login” o premere “Invio”

Una volta effettuato l’accesso si accederà alla pagina seguente, provvista nella colonna a sinistra di tutti gli strumenti di modifica delle funzioni del sito.

Il sito

In questa sezione si spiega molto brevemente come è strutturato un sito realizzato in Wordpress, in modo tale che il lettore comprenda la differenza tra Front-End e Back-End. IL sIto

Template e Widget

Il sito del Centro di Ricerca I.A.M. è stato realizzato interamente su piattaforma C.M.S. Wordpress basata su sistema PHP, MySql. Grazie a questa piattaforma è possibile amministrare il sito web tramite un’interfaccia grafica user-friendly che non obbliga l’utente ad avere conoscenze di programmazione.

FroNt-ENd E bAck-ENd Wordpress si compone di un’interfaccia lato utente anche detta front-end che costituisce la parte di sito visibile al pubblico e un’interfaccia lato amministratore, back-end, che permette di apportare modifiche al sito.

Front-end http://areeweb.polito.it/ricerca/IAM

Per accedere all’area amministrativa occorre aggiungere “/wp-login.php” in fondo all’url del sito.

back-end http://areeweb.polito.it/ricerca/IAM-new/wp-login.php

5

A partire da questo capitolo il lettore può conoscere i plugin principali installati sul sito, partendo dalle loro funzioni: ͽͽ Gestione file e cartelle ͽͽ Mail e newsletter ͽͽ Banner e slider ͽͽ Social sharing ͽͽ Elenco dei contenuti

323 4

Funzioni Principali

Questo è il capitolo principale in quanto vengono presentate, passo a passo, tutte le operazioni da compiere, per assolvere le funzioni principali del sito: ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ

Aggiungere un nuovo numero di Archalp Aggiungere una nuova news Aggiungere Articoli ai percorsi Aggiungere un libro agli scritti Aggiungere un articolo agli scritti Aggiungere una collana agli scritti

ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ

Aggiungere un articolo ricerca Aggiungere un articolo didattica Aggiungere un articolo Eventi Aggiungere una biografia Rimuovere un articolo Gestione della newsletter

Inserire un articolo con il nuovo numero di Archalp 1. Cliccare su “+ Nuovo” poi su “Articolo”, nella barra degli strumenti in alto.

1. Inserire il titolo utilizzando la formula “Archalp xx / anno”.

Cliccare su “Prebuilt Layout” nel riquadro del “Page Builder”.

3. Nel caso si fosse importato il layout di un articolo Archalp la schermata apparirà come segue:

2. Selezionare “Clona: Pagine” a sinistra e scrivere nel campo di ricerca più in alto “archalp”, così la ricerca darà come risultato la pagina “Home” del sito. Selezionare la pagina “Home”, cliccare su “Inserisci” e “Replace current”.

Alternativa: invece di clonare la pagina “Home” è possibile anche clonare un articolo di Archalp già esistente. In questa maniera si manterrà il layout corretto, tuttavia sarà necessario aggiornare di nuovo tutti i dati.

20

324

21

Conclusioni e aspettative per il futuro La progettazione del sito IAM ha dimostrato che anche nel Webdesign occorre condurre indagini molto attente e approfondite riguardo il cliente a cui ci si rivolge e le sue richieste.

Progetti di questo tipo dovrebbero essere condotti da almeno due persone, in modo da dividere il tempo dedicato all’analisi e quello invece incentrato sullo sviluppo tecnico dandogli lo stesso peso.

In ambito sociale o didattico inoltre, non potendo avvalersi di risorse economiche, non è possibile dotarsi degli stessi strumenti utilizzati per lavori commerciali, occorre avere quindi conoscenze di programmazione avanzate, così da essere in grado di realizzare di mano propria funzioni e strumenti.

Per il progetto IAM è stata necessaria la realizzazione di tre versioni per consegnare un prodotto che soddisfacesse il cliente; sono state scritte circa 4000 righe di codice HTML, CSS, Javascript e PHP che hanno permesso di evitare l’acquisto di costosi strumenti avanzati.

Allo stato attuale il sito è nelle condizioni di poter resistere all’invecchiamento e all’evoluzione delle tecnologie del Web per diversi anni.

Sarebbe opportuno tuttavia che per futuri progetti di Web Design vengano coinvolti non solamenti studenti dei corsi di Design ma anche di programmazione e ingegneria informatica.

Sebbene negli ultimi anni siano state sviluppate piattaforme che facilitano di molto la realizzazione di siti Web, è sempre necessaria la presenza di un tecnico specializzato nella modifica del codice.

Adottare soluzioni preconfezionate è utile per progetti a breve termine che richiedono un riscontro immediato, ma nel campo della ricerca i tempi sono totalmente differenti: è bene dedicare

più tempo ed energie allo sviluppo di idee innovative, in grado di offrire soluzioni differenti da quelle già proposte da altri team di sviluppatori.

Purtroppo in Italia mi è capitato spesso di ricevere più incarichi contemporaneamente, che richiedevano un certo livello di specializzazione in competenze molto differenti. Sebbene noi italiani siamo bravi a improvvisare e a destreggiarci in situazioni a noi estranee, dobbiamo comprendere che un Designer non può essere un tuttofare. Un team di progettazione deve sempre essere costituito da personale variegato, che includa persone dotate di competenze differenti e complementari tra di loro.

Nelle pagine seguenti, come anticipato nell’introduzione, verranno presentate le nozioni che si sono dimostrate utili durante le fasi di progettazione e che, indipendentemente dal lavoro che si sta svolgendo, si dimostrano sempre valide.

325

Glossario Accordion Letteralmente, fisarmonica, è il nome dei menù a comparsa che si espandono al passaggio o al click del mouse. Trattandosi di contenuti “comprimibili”, permettono di inserire menù ricchi di voci anche in spazi ristretti. Generalmente vengono realizzati con librerie JavaScript come Jquery UI. Affordance Definisce quali azioni sono possibili.

Per una idea chiara e divertente di oggetti dotati di una scarsa affordance consiglio di vedere le opere dell’artista Jacques Carelman (impossibleobjects.com).

Asset Indica l’insieme degli strumenti necessari a completare un progetto. Generalmente nel web design comprende i testi, le grafiche, le foto, i video, i file, i database ecc... di un sito.

Aspect-Ratio È un sinonimo di formato. Per esempio l’aspect-ratio di uno schermo può essere 1024x768 o 640x480.

Affordance Letteralmente Sebastiano Bagnara lo traduce come “invito”, “autorizzazione”.

Questo concetto fu ideato da J. J. Gibson un 326

eminente psicologo a cui dobbiamo molti progressi nella compressione dei processi percettivi.

Bookmarklet/Favelet È un piccolo programma JavaScript che può essere memorizzato come un normale URL all’interno dei segnalibri (bookmark in inglese) del browser, o all’interno degli hyperlinks di una pagina Web. Lo scopo dei bookmarklet è di poter dare agli utenti, un metodo pratico ed immediato per eseguire una determinata operazione (ad esempio utilizzare un servizio web, o svolgere una specifica operazione sulla pagina che si sta visitando); l’operazione effettuata normalmente è legata al sito che rilascia il bookmarklet, ed è una semplice scorciatoia per utilizzare i servizi web offerti dal sito che ha sviluppato il bookmarklet.

Bot Abbreviazione di robot, indica tutti quei programmi che programmati in modo da svolgere in automatico azioni che generalmente verrebbero svolte da un utente.

Esistono tantissime categorie di bot, alcune molto comuni sono: ͽͽ web-crawler/spider : bot dei motori di ricerca che scandagliano e indicizzano i siti presenti in rete.

ͽͽ BOT IRC : programmi che girano all’interno di una chat room ͽͽ BOT nei videogiochi : automi controllati dal computer o programmi che giocano al posto dell’utente.

Browser Programma che consente di visualizzare immagini e ipertesti. (Es. Firefox, Chrome ecc...).

Cache Parte della memoria in cui un computer immagazzina le informazioni più frequentemente usate, in modo da rileggerle più velocemente senza doverle riscaricare o ricreare.

Critical Path Indica la sequenza di compiti necessari a completare un progetto entro una determinata scadenza.

La sequenza deve essere rispettata, e il rallentamento nell’esecuzione di un compito condiziona tutte le operazioni successive.

Cloud Tag Una nuvola di etichette, o di parole è una rappresentazione visiva di etichette (tag) o parole-chiave usate in un sito web.

C.M.S.(Content Management System) Letteralmente, sistema di gestione dei contenuti, è uno strumento software, installato su un server web, il cui compito è facilitare la gestione dei contenuti di siti web, svincolando il webmaster da conoscenze tecniche specifiche di programmazione Web Cookie I cookie HTTP sono informazioni memorizzate sul proprio computer durante la navigazione in internet, che vengono usate dai server web per poter riconoscere i browser durante comunicazioni con il protocollo HTTP usato per la navigazione web. Tale riconoscimento permette di realizzare meccanismi di autenticazione, usati ad esempio per i login, di memorizzare dati utili alla sessione di navigazione, come le preferenze sull’aspetto grafico o linguistico del sito ecc... Come i dati memorizzati nella cache, possono essere cancellati senza problemi dato che vengono rigenerati a ogni sessione di navigazione a seconda dei siti visitati.

A partire dal 2015 è diventato obbligatorio per tutti i proprietari di siti web, informare l’utente e chiedere il permesso di utilizzare i cookie prima di proseguire nella consultazione della pagina web.

CSSOM (CSS Object Model) È il DOM dei documenti CSS. Default

È il termine che indica il valore base di qualcosa. Quando nel CSS non viene specificato un attributo, il browser manterrà i valori di default di una determinata regola.

Designer - Progettista Dal latino “proiectare” cioè “gettare avanti” è un termine usato per indicare chi si occupa dell’ideazione e della realizzazione di innovazioni utili a migliorare la convivenza reciproca del uomo nell’universo. Nell’era industriale è diventato più sinonimo di grafico o inventore di mode o specchietti per allodole, a causa dell’affermazione di un economia pecuniaria piuttosto che ecologica.

DNS (Domain Name System) Gli indirizzi che digitiamo nei nostri browser per raggiungere i siti Internet (es. google.com) sono delle “semplificazioni” degli indirizzi IP: lunghe sequenze di numeri che corrispondono alle reali coordinate dei siti.

I server DNS sono degli intermediari che “traducono” per noi gli indirizzi che digitiamo nel browser e ci portano verso gli IP corrispondenti.

DOM (Document Object Model) È lo standard ufficiale del W3C per la rappresentazione di documenti strutturati.

La prima cosa da chiarire è che il DOM non è l’HTML, né una versione “strutturata” dell’HTML, ma come dice la parola stessa

(Document Object Model) è un modello, ovvero un modo di rappresentare un documento.

JavaScript è un linguaggio che permette accesso al DOM FeedBack È l’informazione che serve a capire cosa è successo. È il modo in cui un programma fornisce delle risposte all’utente.

FeedForward È l’informazione che serve a rispondere alle domande di esecuzione.

Field Letteralmente “Campo”, genericamente fa riferimento a un contenitore di qualcosa.

Per esempio un tex-field sarà un contenitore come un <div> che contiene del testo.

Flat Design Indica un design semplice e minimal caratterizzato da rappresentazioni bidimensionali, poveri se non addirittura privi di ombre.

Generalmente è costituito principalmente da grafiche realizzate con programmi vettoriali e si distingue diametralmente dallo scheumorfismo.

Form Documento caratterizzato da campi di testo e checkbox da compilare. Generalmente viene utilizzato per durante l’iscrizione a qualche

327

sito/servizio o per effettuare un pagamento online.

Framework Applicazione o insieme di librerie e tools che velocizzano lo sviluppo di un progetto come un sito o un software. Jquery UI è un esempio di framework I framework sono progettati per supportare lo sviluppatore nella creazione di progetti e facilitare il processo di scrittura del codice.

Front-end Indica tutte le funzioni visibili e accessibili dall’utente. Al contrario il back-end si riferisce alle parti di un sito raggiungibili unicamente dallo sviluppatore che non sempre coincide con l’amministratore.

Guerrilla Marketing Termine coniato da Jay Conrad Levinson nel 1984 nel libro “Guerrilla Marketing”.

Guerrilla indica metodi atipici, economici e in qualche maniera aggressivi per raggiungere obiettivi.

GUI (Graphical User Interface) Termine per indicare un’interfaccia grafica, che consente all’utente di interagire con la macchina controllando oggetti grafici convenzionali.

Grunt Grunt è un task runner. Fisicamente è un 328

file Javascript che esegue dei compiti in modo automatizzato. Per funzionare Grunt ha bisogno che sia installato node.js e può essere usato sia in locale che su server tramite linea di comando.

Esistono plugin che svolgono funzioni molto utili come: ͽͽ Aggiungere automaticamente i prefissi -webkit, -moz ecc… su tutto il CSS senza dover scrivere nulla. ͽͽ Compilare un file .less in .css con un click ͽͽ Comprimere e minimizzare un file .css ͽͽ Comprimere ed ottimizzare png, gif e jpeg ͽͽ Spedire tutto online via ftp senza usare programmi esterni Header Parte superiore di un sito web dove solitamente vengono inseriti il logo e il menù di navigazione.

HTTP Header Il browser, ogni volta che si collega ad un web server per aprire una pagina, invia specifiche richieste ed il server gli ritorna delle risposte. Questi messaggi sono chiamati header HTTP e contengono delle informazioni, alcune necessarie ed altre puramente informative come cookies, il software che utilizzate, il tipo di browser, referrer, lingua utilizzata, etc...

Le informazioni si dividono in due categorie: ͽͽ request header - informazioni in uscita, inviate al server ͽͽ response header - informazioni in entrata ricevute dal server Inline Per inline Javascript o inline CSS, si intendono linee di codice scritte direttamente all’interno del file HTML e non su un file esterno.

Material Design Il concetto di materiale è una metafora, che cela l’idea di rendere come “materiali” gli elementi grafici, che quindi non risultano più essere piatti e schiacciati come nel Flat Design, ma con un loro spessore fisico e con una loro ombra. Diventano quindi dei veri e propri oggetti tridimensionali, pur restando molto minimali.

Mise en place Termine della ristorazione che significa “messa sul posto” o “messa a disposizione”.

Indica nelle cucine professionali, la predisposizione di tutto il materiale necessario per un servizio o per una preparazione, prima dell’arrivo dei clienti o degli ospiti.

Mock-up Modello, bozza.

OOD (Object Oriented Design) La progettazione orientata agli oggetti è un approccio alla progettazione di sistemi software fondata sul paradigma a oggetti.

Un sistema software viene descritto da un modello a oggetti, ovvero come sistema di oggetti interconnessi e interagenti l’uno con l’altro. Obiettivo principale della progettazione è identificare un sistema di oggetti la cui interazione complessiva porti a soddisfare i requisiti del sistema software.

zione diventa non trascurabile su applicazioni di larga scala.

Paginazione/Pagination Suddivisione dei contenuti in più pagine.

Utile per evitare di visualizzare per intero tutti gli elementi in un unica pagina.

Pattern Disegno, modello, schema, schema ricorrente, struttura ripetitiva” e, in generale, può essere utilizzato per indicare una regolarità che si riscontra all’interno di un insieme di oggetti osservati (per esempio, le macchie di un ghepardo o la ripetizione di una sequenza di dati), oppure la regolarità che si osserva nel tempo di determinati fenomeni (per esempio, la danza delle api o la circolazione delle masse d’aria calda e fredda nell’atmosfera). Spesso indica il disegno ornamentale di una superficie costituito da figure ripetute.

Pixel-ratio Abbreviazione di pixel aspect ratio (PAR) è il rapporto matematico tra l’altezza e la larghezza di un pixel.

Un PAR 1:1 descrive un pixel quadrato mentre un PAR 2:1 indica un pixel rettangolare con il lato maggiore alla base.

Parser Un processo che analizza un flusso continuo di dati in ingresso (input, letti per esempio da un file o una tastiera) in modo da determinare la sua struttura grazie ad una data grammatica formale. (it.wikipedia.org/wiki/Parsing)

Pooling Significa attivare un insieme di risorse dello stesso tipo (pool) prima delle effettive richieste di utilizzo. Quando un utilizzatore richiede una risorsa, viene reperita una istanza già attiva dal pool.

Tecniche di pooling permettono di accelerare l’accesso a risorse il cui tempo di attiva-

Pixellato Neologismo per indicare un’immagine a bassa risoluzione, dove appunto sono visibili i pixel come grossi quadrati.

Property Letteralmente, proprietà, indica tutte le modifiche apportabili tramite CSS a un

elemento.

Es: color, width, background-image, padding, text-align, font-family, border ecc...

Ranking Sinonimo di punteggio o classifica, nel web design indica il posizionamento di un sito, più o meno favorevole per i motori di ricerca.

Rendering In generale indica la resa grafica finale di un lavoro. In webdesign indica la visualizzazione effettiva del sito quando viene caricato sul browser, nella computer grafica rappresenta l’elaborazione finale di un disegno.

Request Header Vedere la voce HTTP Header.

Le più comunemente usate sono: Accept: specifica l’ordine preferito dal browser relativamente ai MIME types supportati. La stringa “*/*” indica che il browser è in grado di gestire qualunque tipologia di MIME type.

Accept-Encoding: specifica le tipologie di compressioni accettate dal browser Accept-Charset: specifica l’insieme di caratteri che il browser può accettare.

Accept-Language: serve a specificare i codici dei linguaggi standard che il browser preferisce ricevere.

329

Authorization: identifica il livello di autorizzazione per il browser. Quando si utilizza la sicurezza gestita dal container, il servlet container si occupa di impostare questo header in modo automatico.

Connection: indica il tipo di connessione che viene utilizzata dal browser. Nella versione 1.1 del protocollo HTTP tale valore è valorizzato con la stringa “Keep-Alive”.

Cookie: specifica i valori di eventuali cookie inviati dal server nelle precedenti comunicazioni con il browser.

Host: contiene informazioni sull’host e la porta Referer: la url della pagina web cui si fa riferimento. Si noti, per curiosità, l’errore ortografico (la parola corretta sarebbe Referrer) commesso da uno degli autori del protocollo HTTP che si decise di non correggere nelle versioni successive.

User-agent: indica il tipo di browser. Sia Internet Explorer che Netscape Navigator si identificano come “Mozilla” ma il primo include anche la stringa “MSIE” Response Header Vedere la voce HTTP Header.

Le più comunemente usate sono: cache-control: controlla la modalità di caching per una pagina web content-disposition: può essere utilizzato 330

per specificare un file binario in allegato alla response content-length: specifica la lunghezza del body della response, espresso in byte content-type: specifica il MIME type del documento di risposta content-encoding: specifica il tipo di codifica utilizzato nella risposta. Spesso, utilizzare una codifica di tipo GZIP incrementa notevolmente le performance expires: specifica la durata della cache last-modified: indica, in termini temporali, l’ultimo aggiornamento effettuato su una pagina pragma: disabilita la cache sui vecchi browser attraverso l’utilizzo della stringa “no-cache” refresh: specifica il numero di secondi trascorsi i quali il browser deve richiedere un aggiornamento della pagina RTT Round Trip Time: “tempo impiegato da un pacchetto di dimensione trascurabile per viaggiare da un computer della rete ad un altro e tornare indietro (tipicamente, un’andata client-server ed il ritorno server-client)” Wikipedia Sandbox È una piattaforma usata per sperimentare e

sviluppare in tutta sicurezza. Può essere su server locale od online.

Scheumorfismo Deriva dalle parole greche skéuos, σκεῦος (contenitore o attrezzo) e morphḗ, μορφή (forma). È un ornamento fisico o grafico apposto su un oggetto allo scopo di richiamare le caratteristiche estetiche di un altro.

Es: lo sfondo di un sito che richiama una scrivania vista dall’alto con tanto di macchia di caffè e comuni strumenti d’ufficio.

Screenshot Generalmente si usa questo termine per indicare una fotografia dello schermo.

Esistono software e plugin di browser che consentono di fotografare la schermata visualizzata, così da poterla condividere o modificare su un comune programma di grafica.

Screenshot può anche essere usato per indicare la memoria dello stato di un determinato progetto. Nel caso della Visual Regression per esempio vengono effettuati degli screenshot del progetto a ogni modifica, così da poterli poi confrontare per analizzare le differenze.

SEO (Search Engine Optimization) Si intendono tutte quelle attività volte ad ottenere la migliore rilevazione, analisi e lettura del sito web da parte dei motori di ricerca attraverso i loro spider, al fine

di migliorare (o mantenere) un elevato posizionamento nelle pagine di risposta alle interrogazioni degli utenti del web.

Significante Segno o segnale percettibile di ciò che si può fare.

Sitemap È una pagina Web che elenca gerarchicamente tutte le pagine di un sito web. Nata per facilitare la navigazione dell’utente all’interno del sito, ha poi avuto una notevole importanza nell’attività di scansione della Rete da parte dei crawler dei motori di ricerca. Oggi le sitemap sono scritte in XML. Sketching Dal nome “sketch” cioè “schizzo”, indica una rappresentazione sommaria di qualche cosa, generalmente disegnata velocemente.

Slider Letteralmente “scorritore”, è uno strumento che permette di scorrere un contenuto più grande dello schermo in cui viene visualizzato. Generalmente viene visualizzato nella parte destra dello schermo, ed è possibile trascinarlo usando il mouse. Esistono anche slider a scorrimento automatico, con funzione simile a quella dei caroselli per i siti web.

Spider Nome alternativo dei web-crawler, vedi la

voce bot.

Swipe Si traduce con “dare un colpo” e indica l’azione che viene fatta quando si scorre un dito su uno schermo touch.

Generalmente tramite questa azione si effettua il cambio di schermata trascinandola con il dito.

Tag Può essere tradotto come etichetta. Indica una parola chiave o un termine associato a un contenuto (un’immagine, una mappa geografica, un post, un video...), che descrive l’oggetto, rendendo possibile la classificazione e la ricerca di informazioni basata su parole chiave.

Grazie all’uso dei tag, la propagazione di un sito sui search engine avviene più efficacemente.

Task Si può tradurre con compito od operazione.

Quando viene avviato un Javascript questo eseguirà una serie di funzioni che compiono determinate operazioni come modificare il CSS o animare degli elementi di un sito.

Tassonomia/Taxonomy Dal greco taxis ordinamento e nomos norma/regola, la tassonomia non è altro che la classificazione gerarchica dei contenuti presenti nel sito. Le parole chiave che iden-

tificano ogni contenuto vengono utilizzate come etichette/tag.

Thumbnail Tradotto letteralmente come “miniatura”, il thumbnail è un’anteprima di un’immagine più grande, che quindi viene presentata in formato ridotto. Solitamente, cliccando sull’anteprima, è possibile visualizzare l’immagine in un formato più grande.

Toast I toast sono quegli avvisi che compaiono su schermo con un’animazione a scorrimento dal basso verso l’alto. Sono molto comuni sugli smartphone.

Truecolor È un modello di profondità del colore, conosciuto anche come “Milioni di colori” dagli utenti Linux e Macintosh. Tramite questa modalità di memorizzazione delle informazioni dell’immagine il colore di ogni pixel è codificato da tre o più byte, consentendo di ottenere render più fedeli agli originali.

La combinazione delle intensità dei tre canali consente di rappresentare 16.777.216 colori differenti; si ritiene che l’occhio umano sia in grado di distinguere circa 10 milioni di colori.

User Solo due industrie definiscono “users” i propri clienti. Una è quella informatica, l’altra è

331

quella della droga :) User-agent Indentifica un programma che si connette ad un processo server, come browser o lettori multimediali.

Tramite browser è possibile mascherare il proprio user agent in modo da poter accedere a versioni differenti di un sito. Se per esempio configuro come user-agent uno smartphone, visualizzerò la maggior parte dei siti nel formato mobile.

UX - User Experience Letteralmente Esperienza Utente, è termine coniato nei primi anni ‘90 da Donald Norman. L’esperienza utente secondo Peter Morville è caratterizzata da sette elementi fondamentali: useful, desiderable, accessible, credible, findable, usable e soprattutto valuable.

Viewport È la parte visibile all’utente di una pagina web.

Visual Regression Sono una serie di test applicati a un sito in fase di sviluppo o restyling, che scattano uno “screenshot” di ogni componente e avvisano lo sviluppatore quando ci sono delle differenze rispetto allo stato di partenza del lavoro. Spesso capita che modificando del CSS, si danneggiano parti di un sito che non erano nemmeno state prese in considerazione. Tramite questi test è possibile mantenere la situazione sotto controllo, a ogni modifica, grazie a un analisi caomparata del progetto a ogni cambiamento.

Alcune librerie molto utili per la visual regression sono: PhantomJS, SlimerJS, CasperJS, ResembleJS, Grunt Web font Sono font offerti da server presenti sul web come, Google o Fon332

tSquirrel, che possono essere caricati direttamente tramite CSS3: grazie ai web font è possibile usare anche caratteri che non sono presenti sui computer degli utenti.

Wizard È una procedura guidata. Il termine letteralmente significa mago, volendo identificare, appunto come per magia, la semplicità dell’esecuzione della procedura altrimenti molto complessa.

Spesso indica GUI che facilitano operazioni complesse che andrebbero eseguite da terminale tramite codice.

WYSIWYG È l’acronimo che sta per l’inglese What You See Is What You Get (“quello che vedi è quello che ottieni” o “ottieni quanto vedi”). Si riferisce prevalentemente a quegli editor di codice che mostrano istantaneamente e graficamente gli effetti delle modifiche al codice, senza dover passare da un interprete come un browser.

Utility MEDIA QUERIES SU IE7 e IE8 - github.com/scottjehl/Respond COLOR OF THE WEB - webcolourdata.com/ MATERIAL DESIGN GOOGLE - google.github.io/material-design-icons/ CSS SPRITES - github.com/google/material-design-icons/tree/master/sprites - github.com/jkphl/svg-sprite COLOR BLENDER - colorblender.com/ ANALIZE PAGE - westciv.com/xray/ IMMAGINI COME URI - css-tricks.com/data-uris/ FOCUS WRITING - Ommwriter-->LIBRE OFFICE FULLSCREEN PAGE PERFORMANCE TESTING - WebPageTest.org - Whatdoesmysitecost.com - developers.google.com/speed/pagespeed/insights/ - varvy.com/pagespeed/ Ottimo strumento che permette di valutare le performance del sito

su diversi tipi di connessione in paesi differenti. WebPageTest valuta il sito utilizzando speciche unità di misura relative al “first byte time”, “start render time”, speed index e quanto sono state compresse le immagini.

Inoltre fornisce anche consigli su come incrementare le performance del sito.

MOBILE PERFORMANCE TEST - mobitest.akamai.com/m/index.cgi GOOGLE PAGE SPEED MODULE - developers.google.com/speed/pagespeed/module/download gzip - - varvy.com/tools/gzip/ speed - - varvy.com/pagespeed/ CSS FRAMEWORK - purecss.io CSS PRE-PROCESSOR - lesscss.org/ PROTOTYPING - marvelapp.com/ - www.axure.com/ WIREFRAME - balsamiq.com/ - purecss.io/ PROGETTAZIONE PARTECIPATA

333

- www.invisionapp.com/ CALCOLO DIMENSIONE FONT - pxtoem.com/ GRUMPICON - IMPLEMENTAZIONE SVG - www.grumpicon.com SUPPORTO DEI FONT - stateofwebtype.com/ - fontfamily.io di Zach Leatherman - Tinytype16 di Jordan Moore SERVER CONFIGURATION - github.com/h5bp/server-configs FONT OPTIMIZATION - www.fontsquirrel.com/tools/webfont-generator SCOPRIRE SE UN SITO ÈDOWN - downforeveryoneorjustme.com/ MODERNIZR - modernizr.com

- TinyPNG - CompressPNG - PNGGauntlet - ImageOptim - Trimage - ImageAlpha

tinypng.com/ compresspng.com/it/ PNG-Compressor for Windows PNG-Compressor for Mac OS X PNG-Compressor for Linux Lossy PNG-Compressor for Mac OS X

OTTIMIZZAZIONE IMMAGINI SU SERVER - GULP - GRUNT AUTOMATIC SVG MASK - quasimondo.com/ZorroSVG/ SET BREAKPOINTS FOR RESPONSIVE SITES - sizersoze.org/ MOCKUP - www.mockflow.com GRID & TEMPLATE - 960.gs/ (grid system) - www.freehtml5templates.com

È una libreria JavaScript che identifica automaticamente la disponibilità di tecnologie di nuova generazione.

JAVASCRIPT TESTING FRAMEWORK - qunitjs.com/

RESPONSIVE PATTERNS - bradfrost.github.io/this-is-responsive/patterns.html

TEST ROBUSTEZZA - github.com/marmelab/gremlins.js

OTTIMIZZAZIONE IMMAGINI - Trimage - Imageoptim - pngquant.org/ 334

TEST FOR JavaScript THAT MAKES AJAX REQUESTS - sinonjs.org/ CMS

- getgrav.org/downloads RESPONSIVE IMAGES - alistapart.com/article/responsive-images-in-practice - dev.opera.com/articles/responsive-images/

----------------------------------------------------------------------LIBRERIE JAVACRIPT - reactjs.net/

CLASSIFICA E TREND SITI - www.awwwards.com

LOAD CSS ASYNCRONOUSLY - github.com/filamentgroup/loadCSS

CRYTICAL PATH CSS - jonassebastianohlsson.com/criticalpathcssgenerator/

Asynchronous Module Definition (AMD) ASYNCRONOUS JS CURL -> - github.com/cujojs/curl

CRYTICAL CSS BOOKMARKLET - gist.github.com/PaulKinlan/6284142 UN SITO DEVE AVERE LO STESSO ASPETTO SU TUTTI I BROWSER? - dowebsitesneedtolookexactlythesameineverybrowser.com/ TOOLS PER VELOCIZZARE - www.perf-tooling.today/tools HTTP/1 HTTP/2 SPEED TEST - http2.loadimpact.com/entry/ SCRIPT CACHING - addyosmani.com/basket.js/ DETECT BROWSER CAPABILITIES - modernizr.com/ SVG ICON LIBRARIES - fontello.com/ - icomoon.io/

FULL PAGE SITE - alvarotrigo.com/fullPage/ EnhanceJS ------------------------------------------------------------------Strumenti UX Design App: UXPin - uxpin.com • Wireframing • Interactive Prototyping • Responsive wireframing/prototyping • Live collaboration • Full project view (personas, research results etc.)

• Communication in the design process • Reviews • Iterations Wireframing • Balsamiq - balsamiq.com

335

• • • • •

Mockingbird - gomockingbird.com (free) Moqups - moqups.com (free) Mockflow - www.mockflow.com UXPin - uxpin.com Pencil Project - pencil.evolus.vn (free)

Prototyping • Axure - axure.com • FluidUI - fluidui.com • Hotgloo - hotgloo.com • iRise - irise.com • Just In Mind - justinmind.com • Pidoco - pidoco.com • Proto.io - proto.io • Protoshare - protoshare.com • UXPin - uxpin.com Diagramming: • Cacoo - cacoo.com • Creately - creately.com • Draw.io - www.draw.io (free) • Gliffy - www.gliffy.com • Omnigraffle - www.omnigroup.com/products/omnigraffle • Lovely Charts - www.lovelycharts.com • Lucid Chart - www.lucidchart.com Web Analytics: • Adobe Analytics - www.adobe.com/solutions/digital-analytics. html • Google Analytics - google.com/analytics • KissMetrics - kissmetrics.com • MixPanel - mixpanel.com • Piwik - piwik.org 336

Feedback tools: • GetSatisfaction - getsatisfaction.com • Kampala - www.kampyle.com • Survey.io - survey.io • UsabilityTools - usabilitytools.com/tools/feedback-form/#tool-description • UserVoice - uservoice.com • Qualaroo - qualaroo.com • 4Q Survey - www.q4survey.com Session Recording: • Clicktale - www.clicktale.com/default.aspx • GhostRec - www.ghostrec.com • MouseFlow - mouseflow.com • OpenHallway - www.openhallway.com • Tealeaf - www.tealeaf.com • UsabilityTools - usabilitytools.com/tools/ visitor-recording/#tool-description • UserReplay - www.userreplay.co.uk ClickTracking: • Clickheat - www.labsmedia.com/clickheat/index.html • Clicktale - www.clicktale.com/default.aspx • CrazyEgg - www.crazyegg.com • UsabilityTools - usabilitytools.com/tools/click-tracking/#tool-description • UserZoom - www.userzoom.com Remote Usability Testing: • BagelHint - www.bagelhint.com • Chalkmark - www.optimalworkshop.com/chalkmark.htm • Ethnio - ethn.io • Feedback Army - www.feedbackarmy.com • Five Second Test - fivesecondtest.com

• • • • • • •

Keynote - www.keynote.com Loop11 - www.loop11.com TryMyUI - www.trymyui.com UsabilityTools - usabilitytools.com Usabilla - www.usabilla.com Userlytics - www.userlytics.com User Testing - www.usertesting.com

Offline Usability Testing: • Camtasia - www.techsmith.com/camtasia.html • MediaCam - netu2.com • Morae - www.techsmith.com/morae.html • Silverback - silverbackapp.com A/B testing: • Adobe Test and Target - www.adobe.com/products/testandtarget.html • Artisan - useartisan.com • GlobalMaxer - www.globalmaxer.com • Optimizely - optimizely.com • Visual Website Optimiser - visualwebsiteoptimizer.com Grafici & Charts - gionkunz.github.io/chartist-js/ Toast e Note a margine - www.bigfootjs.com/

337

Bibliografia “ Internet ‘97, Manuale per l’uso della rete” di Calvo, Marco; Ciotti, Fabio; Roncaglia, Gino; Zela, Marco A.; Laterza, Bari, 1997.

Molich, R., and Nielsen, J. (1990). Improving a human-computer dialogue, Communications of the ACM 33 , 3 (March), 338-348.

Nielsen, J., and Molich, R. (1990). Heuristic evaluation of user interfaces, Proc. ACM CHI’90 Conf. (Seattle, WA, 1-5 April), 249-256.

Nielsen, J. (1994a). Enhancing the explanatory power of usability heuristics. Proc. ACM CHI’94 Conf. (Boston, MA, April 24-28), 152-158.

Nielsen, J. (1994b). Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.), Usability Inspection Methods, John Wiley & Sons, New York, NY. Alexander C., Ishikawa S., Silverstein M., Jacobson M., Fiksdahl-King I., Angel S., “A Pattern Language”, Oxford University Press, New York, 1977.

Gamma E., Helm R., Johnson R., Vlissides J., “Design Patterns: Elementi per il riuso di software a oggetti, prima versione italiana), Pearson Educational Italia, Milano, 2002 STORIA A World’s Fair for the Global Village Di Carl Malamud - books.google.it/books?id=2ACtZvZhvWcC&printsec=frontcover&hl=it&source=gbs_ge_summary_r&cad=0#v=onepage&q&f=false Webstyleguide

by Patrick J. Lynch and Sarah Horton - webstyleguide.com/wsg3/1-process/6-types-of-sites.html Interface Design: The Art of Developing Easy-To-Use Software13 ago. 1997 di Peter Bickford Donald Norman La caffettiera del masochista. Psicopatologia degli oggetti quotidiani GUI.Bloopers.2.0.Second.Edition.Common.User.Interface.Design.Don’ts.and.Dos UX-design-for-startups-marcin-treder 338

ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ ͽͽ

The Encyclopedia of Human-Computer Interaction, 2nd Ed. Web Pages That Suck [Flanders and Willis, 1998] The Inmates Are Running the Asylum: Why High Tech Products Drive Us Crazy and How to Restore the Sanity 1st Edition

by Alan Cooper (Author) The Art and Science of Web Design, Jeffrey Veen (2000).

Flow by Mihaly Csikszentmihalyi

GRAPHIC DESIGN ͽͽ The Non-Designer’s Web Book, Third Edition by Robin Williams and John Tollett (Peachpit Press, 2005) ͽͽ Design Basics, Sixth Edition by David Lauer and Stephen Pentak (Harcourt College Publishers, 2004) ͽͽ Graphic Design Solutions, Third Edition by Robin Landa (Thomson Delmar Learning, 2005).

Information design ͽͽ Information Architecture for the World Wide Web: Designing Large-Scale WebSites, Third Edition by Lou Rosenfeld and Peter Morville (O’Reilly, 2006) fora good overview. ͽͽ Information Architecture: Blueprints for the Web, by Christina Wodtke (NewRiders, 2002) UX DESIGN ͽͽ Don’t Make Me Think, A Common Sense Approach to Web Usability, Second Edition, by Steve Krug (New Riders, 2005) ͽͽ The Elements of User Experience: User-Centered Design for the Web, by Jesse James Garrett (New Riders, 2002) JAVASCRIPT Learning JavaScript by Shelley Powers (O’Reilly, 2006) ͽͽ Annett, J. , Duncan, K.D. Stammers, R.B. Gray, M.J. (1971) Tas Analysis, Training Information Number 6, HMSO, London. ͽͽ Arbib, M. A. (1989). The Metaphorical Brain 2. New York: John Wiley & Sons. ͽͽ Bagnara S., Rizzo A. (1989) A methodology for the analysis of error processes in human-computer interaction. In Work with Computers: Organizational, Management and Health Aspects, eds M.J. ͽͽ Smith and G. Salvendy, Amsterdam: Elsevier Science, pp. 605-612. ͽͽ Beyer, H. Holtzblatt, K. (1997) Contextual Design.Morgan Kaufmann Publishers, Inc., San Francisco. ͽͽ Card, S.K. Moran, T.P. Newell, A. (1983) The Psychology of Human Computer Interaction, Hillsdale, NJ: Lawrence Erlbaum Associates.

339

ͽͽ Carroll, J.M. (1995) Scenario-based Design, New York: Wiley & Sons. ͽͽ D’Andrade R. (1989). Culturally based reasoning. In Cognitions and social worlds, eds A. Gellantly and D. Rogers Oxford, Eng.: Oxford University Press. ͽͽ Dumas J.S., Redish J.C. (1993). A practical guide to usability testing. Norwood, NJ: Ablex. ͽͽ Erdmann, R.L. Neal, A.S. (1971) Laboratory vs. field experimentation in human factors. An evaluation of an experimental self-service airline ticket vendor. Human Factors, 13, pp 521-531. ͽͽ Girotto V., Light P., Colbourn C.J. (1988) Pragmatic schemas and conditional reasoning in children. Quartely Journal of Experimental Psychology, 40, pp. 342-357. ͽͽ Gould, J.D. Lewis, C.H. (1983) Designing for usability key principles and what designers think. In Proceedings of the 1983 Computer Human Interaction Conference, 50-53. ͽͽ Hewett, T. Baecker, R. Cad, S. Carey, T. Gasen, J. Mantei, M. Perlman, G. Strong, G. Verplank, W. (1992) ACM SIGCHI Curricula for Human-Computer interaction, Report of ACM SIGCHI Curriculum Developm.G. ͽͽ Hooper, Woolsey K., Scott, K. Gayle C. (1996) Vizability PWS Publishing Company, Boston, MA. ͽͽ Houde, S, Hill, C. (1997) What Do Prototypes Prototype?, in Handbook of Human Computer Interaction (2nd Ed.), M. Helander, T. Landauer, and P. Prabhu (eds.): Amsterdam: Elsevier Science B.V, 1997. ͽͽ Hutchins, E. (1995). Cognition in the wild. MIT Press, London. ͽͽ Hutchins E.L., Hollan J.D. and Norman, D.A. (1985). Direct manipulation interfaces. Human-Computer Interaction, 1, 311-338. ͽͽ Johnson-Laird P.N., Legrenzi P., Legrenzi M. (1972). Reasoning and a sense of reality. British Journal of Psychology, 16, 243-275. ͽͽ Kirwan, B., Ainsworth, L.K., (1992) A Guide to Task Analysis. London: Taylor & Francis. ͽͽ Liddle D. (1996). Design of the conceptual model. In Winograd T. (Ed.) Bringing design to software. New York: Addison-Wesley. ͽͽ Marti, P. Rizzo, A. Petroni, L. Tozzi, G. Diligenti, M. (1999) Adapting the museum: a non-intrusive user modeling approach, Proceedings of UM99, Canada. ͽͽ Marti, P. (2000) “The choice of the unit of analysis for modelling real work settings†, Journal of Cognition, Technology and Work, 2:62-74. ͽͽ Marti, P., Gabrielli, L. Pucci, F. (2000) Situated Interaction in Art, Personal Technologies 5/1. ͽͽ Middleton, D. Engestrom, Y. (1996) Cognition and Communication at Work Cambridge: Cambridge University Press. ͽͽ Neisser, U. (1976). Cognition and Reality. San Francisco: Freeman & Co. ͽͽ Nielsen, J. Mack, R.L. (1994) Usability Inspection Methods. New York: John Wiley & Sons. ͽͽ Nielsen, J., Molich, R. (1990). Heuristic evaluation of user interfaces. Proceedings of CHI 90, 249- 256. New York, NY: ACM. 340

ͽͽ Norman, D. A. (1988). The psychology of everyday things. New York: Basic Books. ͽͽ Norman, D.A. (1993). Things that make us smart: Tools. Reading, MA: Addison Wesley. ͽͽ Norman, D.A. and Shallice, T. (1980). Attention to action: Willed and automatic control of behavior. (Tech. Rep. 8006). San Diego: University of California, San Diego. ͽͽ Norman, D. A. (1999). Il computer invisibile. Milano: Apogeo. ͽͽ Polson, P.G., Lewis, C. (1990) Theory-based design for easily learned interfaces. Human-Computer Interface 5, 191-220, ͽͽ Preece, J. Rogers, J. Sharp, H. Benyon, D. Holland, H. Carey, T. (1994) Human-Computer Interaction. Reading, MA: Addison-Wesley. ͽͽ Rizzo, A., Parlangeli, O., Cambiganu, C. Bagnara S. (1993) Complex systems by situated knowledge: implicit learning. In HCI 19b: ed.

M.J. Smith G. Salvendy. Amsterdam: Elsevier Science. ͽͽ Rizzo, A., Parlangeli, O, (1994) Learning strategies and situated knowledge. Behavioral and Brain Sciences. 17, 420-421. ͽͽ Rizzo, A. Marchigiani, E. Andreadis, A. (1998) The AVANTI Project: Prototyping and evaluation with a Cognitive Walkthrough based on the Norman’s model of action Proceedings of DIS, Amsterdam, 1998. ͽͽ Rizzo, A. (1999) Il pensiero nella vita quotidiana. In V. Girotto, P. Legrenzi (A cura di) Psicologia del Pensiero. Bologna: Il Mulino, pp.

203-226. ͽͽ Rizzo, A, Pasquini, A., Di Nucci P. & Bagnara, S. (2000). SHELFS: Managing critical issues through experience feedback. Human Factors and Ergonomics in Manufacturing, 10,1, 83-98. ͽͽ Shneiderman, B. (1998) Designing the User Interface. 3rd Edition. Reading MA: Addison-Wesley. ͽͽ Shneiderman B. (1992). Designing the User interface. Reading MA: Addison Wesley. ͽͽ Suchman, L.A. Trigg, R.H. (1991) Video as a Medium for Reflection and Design. In Greenbaum and Kyng (eds) Cooperative Design of Computer Systems. Hillsdale, New Jersey: Lawrence Erlbaum, pp 65-89. ͽͽ Vygotskij (1974). Storia dello sviluppo delle funzioni psichiche superiori e altri scritti. Firenze: Giunti Barbera. ͽͽ Wharton, C., Rieman, J., Lewis, C., and Polson, P. (1994) The cognitive walkthrough: A practitioner’s guide. In J. Nielsen and R.L. Mack (Eds.), Usability Inspection Methods. John Wiley & Sons, 105-140. ͽͽ Zhang, J., and Norman, D. A. (1994). Representations in Distributed Cognitive Tasks. Cognitive Science 18: 87-122. ͽͽ Letture consigliate ͽͽ Clayton L e Rieman J: Task-Centred User Interface Design: A Practical Introduction. Boulder Colorado: University of Colorado, 1993. ftp.cs.colorado.edu/pub/cs/distribs/clewis/HCI-Design-Book ͽͽ Newman W M e Lamming M G: Interactive System Design. Addison Wesley, Workingham, 1995.

341

Sitografia - it.wikipedia.org/wiki/Ricerca_etnografica - www.microsoft.com/typography/ctfonts/wordrecognition.aspx - www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement - www.interaction-design.org/literature/article/5-simple-usability-tips - www.filamentgroup.com/lab/weight-wait.html - github.com/filamentgroup/loadJS - responsivenews.co.uk/post/18948466399/cutting-the-mustard - jonassebastianohlsson.com/criticalpathcssgenerator/ - trentwalton.com/2014/03/10/device-agnostic/ - www.filamentgroup.com/lab/font-loading.html STORIA - www.liberliber.it/mediateca/libri/c/calvo/internet_97/html/testo/12www01.htm#Introduzione WEBSEMANTICO - www.websemantico.org/articoli/approcciwebsemantico.php - www.html.it/articoli/open-graph-protocol-facebook-e-il-web-semantico-1/ DESIGN LAYOUT LETTURA FONTS LETTERS - www.pressup.it/wordpress/wp-content/uploads/2015/04/3.-evoluzione-font.gif SPEED UP WORDPRESS - www.rackaid.com/blog/wordpress-slow-speed-up/ PHP OpCode CACHING - www.hostingtalk.it/aumentare-la-velocita-di-php-con-un-opcode-cache_-c000000wF/ BROWSER AND GUI CHROME - www.nngroup.com/articles/browser-and-gui-chrome/ RECOGNITION AND RECALL - www.nngroup.com/articles/recognition-and-recall/ BEYOND BLUE LINKS: Making Clickable Elements Recognizable - www.nngroup.com/articles/clickable-elements/ PRINCIPI BASE DI INTERACTION DESIGN - BRUCE TOGNAZZINI 342

- www.10people.net/tutorial/interaction_design-ask_tog/pricipi_di_interaction_design.html BUSINESS MODEL - www.slideshare.net/hugowiz/il-business-model-spiegato-a-mia-nonna The Encyclopedia of Human-Computer Interaction, 2nd Ed. - www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed DON NORMAN - en.wikipedia.org/wiki/Don_Norman - www.nngroup.com/ JAKOB NIELSEN - it.wikipedia.org/wiki/Jakob_Nielsen STYLE TYLE - styletil.es/ BIBBIA DELLE INTERFACCE GRAFICHE - www.aresluna.org/attached/ CACHING - developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=it - www.mobify.com/blog/beginners-guide-to-http-cache-headers/ LAYOUT - learn.shayhowe.com/html-css/positioning-content/ RESPONSIVE O ADAPTIVE - www.alessiopomaro.com/responsive-design-mobile/ @MEDIA QUERIES LIST - cssmediaqueries.com/ RESPONSIVE DESIGN

343

- bradfrost.github.io/this-is-responsive/ AMD - requirejs.org/docs/whyamd.html RESPONSIVE DESIGN BLOG MORE WEIGHT IS NOT MORE WAIT - www.filamentgroup.com/lab/weight-wait.html - responsivenews.co.uk/ RESPONSIVE DESIGN PERFORMANCE - timkadlec.com/2014/07/rwd-is-bad-for-performance-is-good-for-performance/ RESPONSIVE SU IE 9 - github.com/scottjehl/Respond - www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly#1 ALTRO - www.wired.com/2012/04/ff_andreessen/all/ - sixrevisions.com/web_design/the-evolution-of-web-design - www.pushpatechnologies.com/news.php - www.smashingmagazine.com/2012/04/19/why-we-shouldnt-make-separate-mobile-websites/ - interactivehaiku.com/lifeisshort/ - www.w3.org/People/Berners-Lee/Longer.html - www.nsf.gov/about/history/nsf0050/internet/mosaic.htm - www.youtube.com/watch?v=3iVVM_DgWY4 - doi.org/10.1007/s00170-015-7050-1 - www.khronos.org/webgl/ - info.cern.ch/hypertext/WWW/TheProject.html - angelodesignz.com/evolations.html

344

345

Risposta alla domanda di pagina 304

346

347

Posfazione Questa tesi non vuole essere solo una relazione di progetto ma anche un compendio di alcune delle opere più significative riguardo la progettazione e in particolare il web design. Il tentativo di unire teoria e tecnica in un unico manuale non è impresa facile, soprattutto quando si trattano argomenti recenti, vasti e in rapida evoluzione come il webdesign.

L’obiettivo è stato principalmente quello di creare un minimo di ordine, in un ambito dove il continuo proliferare di contenuti ha reso difficile la definizione di standard e la creazione di un percorso formativo lineare, almeno per chi si affaccia al mondo della progettazione per la prima volta.

Internet è una risorsa ciclopica, dove regna ancora una certa libertà (molti saranno in disaccordo con la parola libertà, ma è un discorso complesso e dal momento che il libro non parla di geopolitica è meglio approfondirlo altrove1).

Dove c’è libertà inevitabilmente si crea un certo disordine, che non è assolutamente un aspetto negativo, in quanto è frutto della ricca fermentazione delle idee, tuttavia necessita di una forte attività ordinatrice che raccoglie le idee generate e le incanala in un’unica direzione così da evitare ogni sorta di disorientamento.

1 Esistono molti libri sull’argomento soprattutto successivi ai numerosi leaks avvenuti nel nuovo millennio. ͽͽ Digital Disconnect: How Capitalism is Turning the Internet Against Democracy di Robert W. McChesney ͽͽ On Internet Freedom di Marvin Ammori ͽͽ No Place to Hide: Edward Snowden, the NSA, and the U.S. Surveillance State di Glenn Greenwald 348

Se c’è una caratteristica che indubbiamente segna gli anni dell’era informatica è la dispersione. L’aumento della libertà di espressione e la facilità con cui è possibile scambiarsi le idee e creare nuovi strumenti utili all’uomo (faccio riferimento alle stampanti 3D, ai kit Arduino e Raspberry PI, Unity, i numerosi Content Managent Systems ecc...) ha generato (e continua a generare in questo stesso momento) una quantità enorme di invenzioni e novità. Difronte a una tale ricchezza diventa difficile fare delle scelte e concentrare gli sforzi in un unica direzione.

Come afferma il detto “Chi troppo vuole nulla stringe”: l’unico modo per evitare che ciò accada ovviamente non è limitare la libertà, ma semplicemente dargli un’ordine, raggruppando concetti simili tra di loro, sintetizzando ciò che risulta troppo prolisso o complesso e sostituendo ciò che è vecchio e nocivo con idee innovative e genuine.

Proprio in quanto progettista, il mio intento è quello di raffinare e sintetizzare le conoscenze acquisite, per ridistribuirle in una forma accessibile a tutti più rapidamente e facilmente. Ogni mese vengono rese disponibili decine di libri, tutorial e guide sia digitali che cartacei, ed è improponibile che una persona debba orientarsi in mezzo a una simile quantità di informazioni, alla cieca o sfruttando quei pochi indizi presenti su qualche blog o forum.

La libertà di Internet permette a ogni navigatore di accedere a una quantità enorme di informazioni, ma le capacità e la memoria umana sono limitate e soprattutto non viviamo in eterno (almeno materialmente parlando), quindi occorre strutturare queste informazioni in modo da renderle sintetiche, di facile e rapida comprensione.

Non esiste esempio migliore dell’arte culinaria per spiegare questo

concetto. Potete avere una dispensa ricca di ogni sorta di prelibatezza, ma occorre anche saper cucinare gli ingredienti di cui si dispone, perché gli ospiti siano soddisfatti del pasto. Non è sufficiente mettere un tartufo e del caviale su un piatto in porcellana per creare un pasto squisito. Per una piatto digeribile e nutriente occorre seguire una ricetta dove gli ingredienti siano equilibrati e cotti al punti giusto: solo in questa maniera si otterrà un pasto soddisfacente, di facile consumazione e con il giusto abbinamento di gusti.

Il lato tecnico di questo libro, concentrato nella terza parte, presenta inevitabilmente delle lacune. Come ho già spiegato l’evoluzione dei linguaggi utilizzati per costruire siti web, ha raggiunto una velocità impressionante e nel giro di un mese, pratiche che sembravano essersi affermate, vengono soppiantate da nuove tecniche.

Il lavoro del webdesigner, come ogni lavoro di progettazione, richiede un costante aggiornamento e dato che il disordine presente sulla rete non facilita questo processo, spesso si finisce per passare più tempo a documentarsi che a portare avanti il lavoro cominciato.

D

a grandi poteri derivano grandi responsabilità

Dal momento che viviamo in una società fortemente urbanizzata e interconnessa, il contatto con altri individui è inevitabile, per cui l’autonomia di un individuo, dipende dall’efficienza delle connessioni all’interno della comunità.

I servizi e le tecnologie necessarie a condurre la vita quotidiana devono essere di uso semplice e immediato. All’interno di una società l’autonomia è raggiungibile solo se la progettazione si concentra sulla qualità e la facilità dell’esperienza utente, altrimenti i risultati saranno causa di incidenti, disagi e un continuo bisogno di assistenza.

Perché parlare anche di WebDesign?

Il WebDesign è un’arte progettuale molto recente che, a causa della sua natura “virtuale” e della sua rapida evoluzione, rischia di perdere il legame con le radici della cultura della progettazione.

L’intento è quello di rendere consapevoli i WebDesigner che Internet non è solo un mezzo di intrattenimento, ma di comunicazione, in grado di generare dei sostanziali cambiamenti nella società.

Per sfruttare al meglio questo potenziale occorre quindi avere dei sani e solidi principi e seguire quelle regole che hanno permesso al design di affermarsi nel mondo industriale.

349

ringraziamenti Ringrazio il prof. Marco Bozzola per avermi contattato e proposto questo progetto di tesi, in un periodo in cui trovare un professore di ruolo disponibile era come cercare un ago in un pagliaio.

Nonostante il progetto si sia protratto nel tempo a causa delle mie difficoltà nel condurre parallelamente l’attività universitaria e quella lavorativa, il prof. Marco Bozzola ha sempre dimostrato molta pazienza e disponibilità.

Ringrazio Alessandro Dentis per il supporto tecnico e per la collaborazione, rendendo più agevole il difficile lavoro di interazione con i server messi a disposizione dal Politecnico di Torino.

Non dimentico ovviamente l’aiuto fornito dai membri I.A.M., in particolare quello fornito da Roberto Dini che ha gentilmente raccolto e inviato il materiale da integrare sul sito, suggerendo anche integrazioni e modifiche.

Sebbene abbiano partecipato al progetto solo per un breve periodo, ringrazio Francesco Fortino, Federico Solinas e tutti gli altri studenti del corso di Graphic & Virtual Design che hanno contribuito all’ideazione e alla realizzazione del nuovo sito I.A.M. Per concludere ringrazio tutti i miei amici che mi hanno supportato psicologicamente e la comunità di Wordpress e di Stack Overflow per fornire, ogni giorno e gratuitamente, strumenti e aiuti anche a novizi inesperti, rendendo Internet uno strumento di apprendimento e condivisione straordinario.

350

351

I.A.M. WEBSITE

Riprogettazione e ammodernamento del sito ufficiale dell’Istituto di Architettura Montana del Politecnico di Torino Tesi di progetto del 2017 incentrata sulla progettazione di un nuovo sito web per il centro di ricerca del Politecnico di Torino I.A.M. Dopo un’attenta analisi delle fasi di progettazione e dei risultati ottenuti, vengono presentate regole comuni e nozioni utili in tutti i campi del design, in particolare per quanto riguarda l’ergonomia e la realizzazione di interfacce Web. Teoria e pratica vengono affrontate sullo stesso piano, fornendo informazioni e strumenti utili anche a chi si avvicina ai temi dell’UXDesign e della progettazione su internet per la prima volta.

Progetto di tesi a cura di Massimo D’Ambrogio - Candidato Marco Bozzola - Relatore