LAB lezione 03

INFORMATICA E GRAFICA PER IL WEB
Psicologia e comunicazione
A.A. 2014/2015
Università degli studi Milano-Bicocca
docente: Diana Quarti
LEZIONE 03
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
01
I CARATTERI TIPOGRAFICI
La scelta del carattere tipografico è molto importante perchè aiuta a definire gran parte
dell’identità di un progetto (sia per il web, sia per stampa).
Quando si sceglie un carattere per un progetto bisogna tenere ben presente:
»» il target di riferimento e il contesto o il tipo di azienda/ente
»» le connotazioni che vogliamo dare: la forma del carattere aiuta a richiamare concetti o
epoche storiche che lo rendono più adatto ad alcuni progetti rispetto ad altri
Per la scelta dei caratteri tipografici vale la regola Less is more: in ogni progetto è
consigliabile usare solo 1 o 2 famiglie di caratteri (usando diversi pesi della stessa famiglia
per caratterizzare diversi titoli, testi, didascalie, parole chiave ecc.).
In internet è possibile trovarare delle font gratuite o open source, non sempre sono però di
buona qualità o sono adatte per tutti i tipi di progetti, soprattutto le font decorative hanno
un’applicazione molto limitata per la scarsa leggibilità e per le connotazioni molto forti.
(Es. www.fontsquirrel.com - www.google.com/fonts - www.dafont.com/it/ )
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
02
TIPOGRAFIA WEB
Inizialmente la tipografia sul web era piuttosto limitata, visto che la scelta delle font
dipendeva da font installate sul computer dell’utente e per ovviare i problemi di
compatibilità tra le diverse piattaforme la scelta doveva ricadere sulle font web-safe
abbinate a delle fallback font (Arial, Courier New, Georgia, Helvetica, Times New Roman,
Verdana, Trebuchet MS, Lucida Sans). Quindi per definire la famiglia di caratteri da usare
veniva definito un carattere principale e poi una serie di caratteri sostitutivi. L’utilizzo di
caratteri non web-safe era limitato su alcuni titoli e menù che non venivano trattati come
testi ma come immagini.
Oggi invece la tipografia web ha ricevuto invece un notevole impulso sia grazie ai css che
defiscono ogni dettaglio della composizione tipografica (peso, stile, interlinea, spaziatura
tra le lettere ecc.) sia grazie alla possibilità di includere i caratteri all’interno del mio codice.
Con la proprietà font-face è possibile, infatti, caricare all’interno delle pagine web font
non standard salvate all’interno della directory del sito web o di una libreria online;
consentendo la visualizzazione del sito in modo corretto su tutti i dispositivi e su tutti i
browser, indipendentemente dal fatto che il carattere sia installato sul computer dell’utente.
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
03
I CARATTERI TIPOGRAFICI: CLASSIFICAZIONE
I caratteri tipografici possono essere classificati per il loro aspetto.
Una prima suddivisione possiamo farla individuando 2 tipi di famiglie:
»» graziati
»» lineari
A queste potremmo aggiungere i caratteri
»» calligrafici
»» fantasia
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
04
I CARATTERI TIPOGRAFICI: CLASSIFICAZIONE NOVARESE
La classificazione di Aldo Novarese (del 1956) suddivise i caratteri derivandone lo stile
dalle loro terminazioni e il nome dalle origini o dall’aspetto di ciascuno:
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
05
I CARATTERI TIPOGRAFICI: CAPACITÀ ESPRESSIVA
CAPACITÀ ESPRESSIVA DEI CARATTERI TIPOGRAFICI
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
M’illumino d’immenso.
BAUER FOTOGRAFO 1°ANNO | Editing e cultura visiva | A.S. 2011/2012 | INFORMATICA
docente: Diana
QuartiPER IL WEB | A.A. 2014/2015 | docente: Diana Quarti 28
E GRAFICA
06
M’illumino d’immenso
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
07
ACITÀ ESPRESSIVA DEI CARATTERI TIPOGRAFICI
VA DEI CARATTERI TIPOGRAFICI
llumino d’immenso.
M’illumino d’immen
mmenso.
M’illumino d’immenso.
umino d’immenso.
M’illumino d’im
.
M’illumino d’immenso.
umino d’immenso.
M’illumino d’immenso
.
M’illumino d’immenso.
umino d’immenso.
M’illumino d’immens
o.
M’illumino d’immenso.
umino d’immenso.
M’illumino d’immen
.
M’illumino d’immenso.
illumino d’immenso.
M’illumino d’imm
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
08
M’illumino
d’immenso
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
09
M’illumino
d’immenso
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
10
M’illumino d’immenso
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
11
M’illumino
d’immenso
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
12
M’illumino d’immenso
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
13
I CARATTERI TIPOGRAFICI. CAPACITÀ ESPRESSIVA: CONTRASTO
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
14
I CARATTERI TIPOGRAFICI. CAPACITÀ ESPRESSIVA: COERENZA
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
15
I CARATTERI TIPOGRAFICI: ACCENNI DI TIPOMETRIA
correzioni ottiche
OCCHIO
SPALLA SUPERIORE
ÈgiplIAx
area delle accentazioni delle maiuscole
ASCENDENTI
altezza maiuscole
X-HEIGHT (occhio medio)
DISCENDENTI
SPALLA INFERIORE
Le dimensioni del carattere tipografico si misura in
verticale e si definisce corpo. Il corpo viene calcolato dalla
spalla superiore alla spalla inferiore (comprende quindi
oltre all’occhio anche l’area delle accentazioni delle
maiuscole). Il nome deriva dall’altezza della faccia dei
vecchi caratteri di fonderia (in piombo).
Tradizionalmente la misura del corpo del carattere si
misura in punti tipografici (1 pt = 0,376 mm).
Nel web invece vengono usate diverse unità di misura:
pixel ed em sono le più usate.
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
16
COMPOSIZIONE TIPOGRAFICA: INTERLINEA
L’interlinea è lo spazio tra 2 linee di testo, indica la distanza tra la linea di base di una riga
e quella della riga successiva. Viene misurata con le stesse unità di misura dei caratteri.
Unt pratem dolorper am quissisl in henibh
ercil ex enisisi tatum zzriliqui eugue mod
et, quisis et, con velessequi tatue dolorpe
ratumsandre.Everumento te voluptam endella
cesequid et parum aceptas senderepta vel
estium laceprem qui optae eum evelibus eic
temporporro tectur, aliaerum repuda acest, con
plit iusandae ommo blaccae voloresto tet a
ex et laut et volores re repudae ptatur solupta
vendi sitatium fugiamet prem fuga. Ectatus
mint ullestis vel eos estiatem eatasped modic
to tem quatibust utestio ribusa nem aut etur,
nobis imint faccull estrunt ibeatem quatenis
a consenet omnis es ullicte voluptio blam,
utem exped essitiur si ut ommolor re exero vel
iliquid eos magnis enimagnam.
Unt pratem dolorper am quissisl in henibh
ercil ex enisisi tatum zzriliqui eugue mod
et, quisis et, con velessequi tatue dolorpe
ratumsandre.Everumento te voluptam endella
cesequid et parum aceptas senderepta vel
estium laceprem qui optae eum evelibus eic
temporporro tectur, aliaerum repuda acest, con
plit iusandae ommo blaccae voloresto tet a
Unt pratem dolorper am quissisl in henibh
ercil ex enisisi tatum zzriliqui eugue mod
et, quisis et, con velessequi tatue dolorpe
ratumsandre.Everumento te voluptam endella
cesequid et parum aceptas senderepta vel
estium laceprem qui optae eum evelibus eic
temporporro tectur, aliaerum repuda acest, con
plit iusandae ommo blaccae voloresto tet a
ex et laut et volores re repudae ptatur solupta
vendi sitatium fugiamet prem fuga. Ectatus
mint ullestis vel eos estiatem eatasped modic
to tem quatibust utestio ribusa nem aut etur,
nobis imint faccull estrunt ibeatem quatenis
a consenet omnis es ullicte voluptio blam,
utem exped essitiur si ut ommolor re exero vel
iliquid eos magnis enimagnam.
ex et laut et volores re repudae ptatur solupta
vendi sitatium fugiamet prem fuga. Ectatus
mint ullestis vel eos estiatem eatasped modic
to tem quatibust utestio ribusa nem aut etur,
nobis imint faccull estrunt ibeatem quatenis
a consenet omnis es ullicte voluptio blam,
utem exped essitiur si ut ommolor re exero vel
iliquid eos magnis enimagnam.
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
17
COMPOSIZIONE TIPOGRAFICA: ALLINEAMENTI E SILLABAZIONE
GIUSTIFICATO
CENTRATO/EPIGRAFE
Il seguente testo è composto
a blocchetto e necessita della
sillabazione altrimenti si creano spazi
tra le parole disomogenei.
Il seguente testo è composto a
epigrafe e non necessita della sillabazione si deve andare a capo a fine
frase e con congiunzioni e articoli.
Il seguente testo è composto a blocchetto e necessita della sillabazione
altrimenti si creano spazi tra le parole
disomogenei.
Il seguente testo è composto
a epigrafe e non necessita
della sillabazione si deve
andare a capo a fine frase
e con congiunzioni e articoli.
BANDIERA SINISTRA
BANDIERA DESTRA
Il seguente testo è composto a bandiera allineata a sinistra e non necessita
della sillabazione si deve andare a
capo a fine frase e con congiunzioni e
articoli.
Il seguente testo è composto
a bandiera allineata a sinistra
e non necessita della sillabazione
si deve andare a capo a fine frase
e con congiunzioni e articoli.
Il seguente testo è composto a bandiera allineata a destra e non necessita
della sillabazione si deve andare a
capo a fine frase e con congiunzioni e
articoli.
Il seguente testo è composto
a bandiera allineata a destra
e non necessita della sillabazione
si deve andare a capo a fine frase
e con congiunzioni e articoli.
COMPOSIZIONE TIPOGRAFICA: VEDOVE E ORFANE
VEDOVA
ORFANA
RIGHINO
magnisc.
Bore custemolor aut aut aute nienimo tem fugitis
aut restiam, quo odit lab ius verrorrori nestium et
lab ilitius niminve restotam, sequam etur, coremo
doluptia quunt renderis luptam non eum elestiam
que sundempossit quas mincim reseque inulpa
cones essi ducium renderis luptam re doluptia
quunt renderis deliqui tem faccusani restor am
As aut volut eius maiorer ibusapero omnist, elitisa
eiuse, andipie nimusa voluptusci re demperis
aturios sitatem. Ehendior adi od uta comnis sandit
occuptatem verero ea nullupt atusam non earum
ventotaspit as expedit renderis luptam qui quiasim
oluptam, sit experum essimus dolecto cum qui
blatest, sequoditi.
Quo quis accatint prepudae et ut diam, venemperi
deles net quod quo il et officiae que nobitatem
luptam non eum elestiam que sundempossit
niminve restotam, sequam etur, coremo doluptia
quunt renderis luptam non eum elestiam que
beatem.
Qui dolupta pellab ideliti ut qui omnis as susam
golessimus, sundit accus recep niminve restotam,
sequam etur, coremo doluptia quunt renderis
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
18
COMPOSIZIONE TIPOGRAFICA: SPAZIATURA
La spaziatura è lo spazio tra le lettere delle parole di una composizione.
Nella stampa il controllo della spaziatura è un modo eccellente per gestire ed eliminare
vedove e orfane o per ottenere effetti particolari sul testo.
Unt pratem dolorper am quissisl in henibh ercil
ex enisisi tatum zzriliqui eugue mod et, quisis et,
vullamet augue facipit vendio con euisit eugiam,
tatue dolorpe ratumsandre. Cus, as magnatquia
doluptam fugiandi cullupt atiorestrum si dolupti
orposam, cum quassun tiasitiis nos nus sin pos iur
aliquia vel moloris doluptur?
Unt pratem dolorper am quissisl in henibh
ercil ex enisisi tatum zzriliqui eugue
mod et, quisis et, vullamet augue facipit
vendio con euisit eugiam, tatue dolorpe
ratumsandre. Cus, as magnatquia doluptam
fugiandi cullupt atiorestrum si dolupti
orposam, cum quassun tiasitiis nos nus sin
pos iur aliquia vel moloris doluptur?
Unt pratem dolorper am quissisl in henibh ercil ex
enisisi tatum zzriliqui eugue mod et, quisis et, vullamet
augue facipit vendio con euisit eugiam, tatue dolorpe
ratumsandre. Cus, as magnatquia doluptam fugiandi
cullupt atiorestrum si dolupti orposam, cum quassun
tiasitiis nos nus sin pos iur aliquia vel moloris doluptur?
Nel web invece viene usata soprattutto per ottenere effetti e aggiustare visivamente un
blocco di testo, migliorarne la leggibilità, visto che la diversità di supporti, di browser e
di dimensioni possono influire leggermente sullo scorrimento del testo.
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
19
COMPOSIZIONE DEGLI ELEMENTI:
TESTI
EPPUR sI PIEGa
di Federico Del Prete
La Graziella compie 50 anni
“B
icicletta pieghevole per favorire il trasporto su di massa, a elevare a status symbol un veicolo che
autovetture”: questo il titolo del brevetto della anno dopo anno perdeva visibilmente mercato. Oltre
Graziella datato 22 dicembre 1964, un prodotto che a vedere l’esordio della Graziella, il 1964 è stato infatti
coniugava efficienza, design e un po’ di snobismo. anche l’ultimo anno nel quale in Italia si sono venduL’origine di questo importante capitolo del costume e te più biciclette che automobili prima del 2012, anno
della storia industriale italiana è legato quindi a dop- della riscossa delle due ruote come veicolo per la mopio filo con la motorizzazione di massa, l’effetto più bilità individuale: almeno nelle vendite.
vistoso del boom economico. Ai quei tempi la mobilità
sostenibile non era neanche una curiosità intellettua- il papà della Graziella: Rinaldo donzelli
le, nonostante di lì a poco iniziassero a levarsi i primi La Graziella delle origini, un successo di portata glogridi di allarme su un paesaggio compromesso dalle bale, è una bici uscita dalla matita di Rinaldo Donzelli
L’uso
della bicicletta, da prota- (1921-1984), grafico e designer brianzolo con una cardi Ginograndi
Cervi infrastrutture.
e Federico Del
Prete
gonista della mobilità quotidiana, fu presto confinato riera punteggiata dall’impegno nelle due ruote. Amico
La passione per la Graziella ha infinite declinazioni. Dai collezionisti-restauratori ai creativi che “customizzano” le loro pieghevoli ridando vita – e che
nel tempo libero. L’automobile si era insinuata nei de- e collaboratore di Bruno Munari, mostro sacro della
vita! – a esemplari abbandonati a fare ruggine nelle cantine; dallo spirito olimpico e goliardico di chi organizza le Grazielliadi alle sfide in salita da
e del
design
made in Italy, donzelli diventò
sideri
degli
italiani
nonQuesta
solo una
come
vettore
di dei
mobiliGuinness dei
Primati
di Franco
Cacciatori.
sintetica
rassegna
Graziellismi,grafica
biodiversità
ciclistiche
da preservare.
tà, ma anche come modello di consumo e garante di presto art director, curando gli allestimenti fieristici e
l’immagine
dei negozi per Gilera e Guzzi. Nella carrieidentità sociale. A sottolineare la dipendenza dal monda cOllEzIONE
da REINVENzIONE
cREaTIVa
do dell’automobile la prima Graziella montava camere
ra del
di 2008
Donzelli
dueThriller
ruote
a motore
convivevano con
Dal settembre
è onlinele
il blog
Graziella
(www.thrillergrazielblog dedicato
alla mitica
pieghevole.
Indianrope
così si fir- arrivare
il pedale,
e nello
stesso
periodo
ecco –quindi
d’aria con valvola schrader, quella che si gonfiala.com),
dal il primo
ma il responsabile
sito – per presentare
suo progetto
scrive:
qualcuanchedelincarichi
simili il per
Bianchi
e «Se
per
la Teodoro
benzinaio. Una volta piegata e riposta nella sua appono negli anni ne supponeva la morte commerciale o ha pensato che non se ne
sita sacca, la Graziella era più adatta a comodi bauli
di Carnielli di Vittorio Veneto, che sarà poi il produttore
sarebbe più vista una, questo blog vuole essere la dura e ferma risposta che
auto di un certo tono, piuttosto che essere affastella- della Graziella. La particolarità del design della Grane sancisce l’ errore. Mi piace pensare che le grazielle che giacciono nei box e
ziella
sta nella
dellesolo
piccole
dimensioni
ta su stracolmi portapacchi simbolo degli esodi estivi
nelle cantine
probabilmente
nonvalorizzazione
sono “morte”, aspettano
sapienti mani
delle
ruote,
16’’,
in undiinsieme
in affollate utilitarie. I prodotti del design industriale
per fare ritorno
dall’ade.
[…]inizialmente
Il mio personale da
intento
è quello
condividereelegante
passione con voicompatibile
e di approfondirne
gli aspetti
tecnici della
e emotivamente
con
l’universo
femminile,
di quegli anni sono rivolti alla classe media che questa
può pieghevole
della customizzazione
scambiandoci informazioni
utili.»
E in
spendere, anche se per un solo articolo alla volta:manutenzione
de- un etarget
allora in espansione
sia come
potere
d’aceffetti nel blog se ne vedono delle belle. Particolare il contest “The Thrillest
quisto sia nell’espressione di una inarrestabile emanvono quindi essere comunque portatili, pratici, come
Grizzly”, dove Grizzly sta a indicare la Graziella modificata, diventata transgei televisori Brionvega che seguivano gli spostamenti cipazione. Il nome della bici conferma questo obbietnica grazie all’irrefrenabile creatività di chi applica alla “docile” pieghevole le
tivo; ema
non deriva,
come
i più eruditi potrebbero
famiglia
dallaGraziella
residenza
alla villeggiatura.
soluzioni tecniche
“artistiche”
più strabilianti.
www.thrillergraziella.com
Una storiadella
emblematica
del revival
può essere
quella di Antonio A conti
la specialità
Graziella
nondiera
tantoe nell’es- supporre, dalla poesia Le due strade di Guido Gozzano
Dembech,fatti,
cicloattivista
della Fiabdella
di Foggia,
collezionista
Graziella
animatore sere
del blog
miticagraziella.wordpress.org,
dal
2008
punto
di
riferipieghevole o pratica, quanto nell’essere riuscita, (1907), dove una non più giovane Graziella va «senmento persfruttando
gli appassionati.
Antonio doveva lasciare
i suoi
due figli
piccoli
za cavalieri in bicicletta». La nostra Graziella prende
l’inarrestabile
traino
della
motorizzazione
Nella composizione del testo è importante:
gRazIEllISmI
»» scelta del carattere
»» gerarchia delle informazioni (titolo 1,
titolo 2, sottotitoli, testo, didascalie ecc.)
dalla suocera, per poi andare a lavorare. Lunghi tratti sprovvisti di trasporto
pubblico, da fare quindi in automobile. Antonio lavora in centro città, dove
34
cycle!
è impossibile trovare parcheggio. Comprò così un catorcio di mountain
bike da lasciare parcheggiata abbastanza lontano dall'ufficio, per poi pedalare l'ultimo miglio in bicicletta. La cosa funzionò per vari mesi, ma un
bel giorno non ritrovò né la bici né il palo, e l'unica possibilità rimasta per
evitare inconvenienti era trovare una bici che entrasse nel bagagliaio della
macchina. La sua prima Graziella, trenta euro, gli ha cambiato la vita, la
seconda (10 euro) è servita a sua figlia, e così via. Adesso ne ha dieci, ma
il suo rammarico di blogger è di aver contribuito a far schizzare verso l'alto
i prezzi: una Graziella restaurata a regola d'arte può costare anche mille
euro. Antonio preferisce usarle tutti i giorni, piuttosto che vederle in una
teca (miticagraziella.wordpress.org).
Diversa la storia di Willy, cento Grazielle in garage e una sterminata erudizione su modelli ufficiali, misteriose varianti e oscuri accessori. Willy
non si ferma davanti alle distanze: la prima volta è andato in Spagna a
prendere un tandem, poi nella campagna di Copenhagen ha raccolto un
altro tandem equipaggiato con il cambio nel mozzo; nel viaggio di ritorno
si è fermato a Francoforte per un Triplet, cioè una Graziella a tre posti, e
così via fino a scoprire, sulle rive del lago Michigan negli USA, un rarissimo
e fin'ora unico esemplare rimasto del Rickshaw, ovvero un risciò a quattro
ruote dato da due Grazielle affiancate, con tanto di parasole. La passione
di Willy deriva dalla Graziella Oro dei suoi quattordici anni, il modello di
punta del catalogo, dotato di contachilometri, cambio 2V a contropedale
»» scelta degli stili, dei pesi, dei colori e delle
dimensioni
in serie con il freno e finitura, neanche a dirlo, dorata. Gli fu regalata dal
padre invece del motorino: una felice usanza che sta tornando di moda.
40
35
Dieci anni in picchiata
di Claudio Gregori
Le scorribande di Marco Pantani, il Pirata
Il Passo di Monte Giovo, 2094 metri,
è un intaglio sulla costa del monte,
tra le Alpi dello Stubai e le Alpi Sarentine. Pascoli ardui e vette regali.
Il Monte Re, il Monte Principe e
la Cima delle Anime. Giganteschi
gendarmi di confine. Marco non li
guarda. Fissa un bersaglio che fugge. La schiena di Pascal Richard gli
scompare davanti, precipitando a
valle. È scollinato tredici secondi
dopo di lui. Dietro, vicino e minaccioso, ha il gruppo.
È il 4 giugno 1994. Mancano quaranta chilometri all’arrivo. È il
quinto passo della Lienz-Merano,
235 chilometri, quattordicesima
tappa del Giro d’Italia. Marco
ha già scalato il Passo di stalle,
il Furcia, il Passo delle Erbe e il
Passo Eores. «scatto del numero
34», aveva annunciato radiocorsa a
un chilometro dal Passo di Monte
Giovo. Ora scende come un falco
in picchiata. Giù per la cresta e,
poi, per la costa del monte. Allungato sopra il telaio, braccia tese,
pancia sulla sella, i glutei che sfiorano la ruota posteriore. Un cuneo
aerodinamico che perfora. Nello
stile acrobatico e pazzo che Stefano Giuliani aveva portato al Giro.
salta Pascal Richard. sprofonda
nel bosco. attraversa radure. sfiora le case sparse di walten. Giù,
a rotta di collo, per la strada tortuosa e stretta. Undici tornanti nel
miagolìo dei freni. Trapassa una
galleria. Giù, lottando con la forza
centrifuga nel frinire delle ruote,
nel tam-tam del cuore. Fa l’equilibrista sul filo. vola per la costa
della Vannestal. Attraversa San
Leonardo e San Martino. Galoppa
sui saliscendi della strada. Irrompe a Merano e le case lo guardano
stupite. Le finestre sono bocche
aperte rosse di gerani. Incredulo, si
volta. Non vede nessuno sul fondo
della strada ed è folgorato da una
certezza: ha vinto. Che gioia! La
prima vittoria. Mentre Bugno brucia Chiappucci a quaranta secondi,
ode la gente gridare il suo nome:
«Pantani».
l’uomo che viene dal mare
L’uomo che viene dal mare vince
tra i monti. Al Giro doma il Mortirolo e si aggiudica due tappe, al
cycle!
Tour infiamma la corsa, non vince
mai, ma va sul podio dopo Indurain
e Ugrumov. è la nuova stella. Una
stella maledetta. E tutta la sua carriera sarà alti e bassi, sconvolta da
trionfi e cadute, incidenti, fatalità. Il
Fato infierisce su di lui. Il 24 maggio 1997, al rientro dopo tre anni
sulla scena del Giro, nella discesa
del Chiunzi un gatto fa cadere lo
svizzero Puttini. Pantani, coinvolto,
è costretto al ritiro. Risorge al Tour
e torna sul podio dietro Ullrich e
Virenque. Entusiasma.
Arriva solo all’Alpe d’Huez e a
Morzine. diventa “il Pirata”. Un
fenomeno mediale. E il 1998 lo
consacra. Pantani conquista Giro e
Tour. Il Tour 33 anni dopo Gimondi. Il Giro e il Tour, la doppietta,
46 anni dopo Coppi. Però è il re
di un ciclismo di naufraghi. Quel
Tour è ferito dallo scandalo Festina, dagli arresti e dai fermi di polizia, dall’espulsione di una squadra
e dall’abbandono di altre cinque,
dallo sciopero. Un ciclismo falsato da un doping duro, all’Epo, che
trasforma i ronzini in purosangue.
Nel 1997 l’Uci, persalvare la pelle
91
»» disposizione e ingombro nella pagina
»» interazione con le immagini
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
20
COMPOSIZIONE TIPOGRAFICA: ESEMPI DI LOGOTIPI TIPOGRAFICI
Anche solo con la tipografia è possibile costruire logotipi efficaci (o meno).
Ma è anche importante valutare come il carattere può interagire con simboli e immagini.
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
21
COMPOSIZIONE DEGLI ELEMENTI: IMMAGINI
Nella composizione delle immagini è importante:
»» scelta del tipo di illustrazione (fotografica, grafica, vettoriali, illustrazioni ecc.)
»» scelta delle immagini
»» colore (bianco e nero, colori, viraggi ecc.) e stile
»» taglio
»» disposizione nella pagina; in gabbia, al vivo
»» sequenza
»» interazione con il testo
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
22
DOMANDE?
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
23
APPENDICE
I CARATTERI TIPOGRAFICI: CLASSIFICAZIONE DI ALDO NOVARESE
LAPIDARI
MEDIEVALI
I caratteri lapidari si rifanno ai caratteri
romani antichi, ispirandosi alle incisioni
su pietra. L’archetipo per questo tipo di
caratteri è l’incisione della colonna traiana,
infatti il carattere più famoso di questa
famiglia si chiama appunto Trajan e ha solo
la forma maiuscola. Hanno grazie triangolari
che formano un angolo acuto con la linea di
base (la forma che lo scalpello da alle grazie
sulla pietra).
I caratteri medievali, chiamati anche
gotici, erano i caratteri tipici del periodo di
Gutenberg, ma oggi di difficile lettura. Hanno
estremità allungate caratterizzate da angoli
accentuati. Le grazie sono definite “a punta
di lancia rivolta verso il basso”. Gutemberg
si ispirò ai caratteri calligrafici usati in quel
periodo nell’area germanica dove viveva per
il carattere che venne usato nella fusione dei
primi caratteri mobili in Europa.
Caratteri: Trajan, Meridien, Augustea
Caratteri: Fraktur, Texture, San Marco
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
24
APPENDICE
I CARATTERI TIPOGRAFICI: CLASSIFICAZIONE DI ALDO NOVARESE
VENEZIANI
TRANSIZIONALI
I caratteri veneziani hanno una forma simile
a quella dei lapidari ma le grazie hanno
l’estremità delle grazie arrotondata e il
piede dell’asta è spesso appena concavo. Il
nome veneziani deriva da alcuni stampatori
attivi nell’area nella seconda metà del ‘400
che disegnarono caratteri di questo tipo
e usarono il primo corsivo per la stampa
(Francesco Griffo, Aldo Manuzio).
I caratteri transizionali hanno grazie
orizzontali e sottili, terminano con un’asta la
cui base ha andamento lineare. Chiamti così
per indicare la transizione tra romani antichi
e romani moderni. Nascono tra la fine del
XVII e l’inizio del XVIII secolo.
Caratteri: Times, Times New Roman,
Baskerville, Caslon, Century
Caratteri: Garamond, Bembo, Jenson
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
25
APPENDICE
I CARATTERI TIPOGRAFICI: CLASSIFICAZIONE DI ALDO NOVARESE
BODONIANI
SCRITTI
I caratteri bodoniani hanno un rapporto di
spessore molto accentuato tra le aste e
l’asse perpendicolare. Hanno grazie molto
sottili che si uniscono con l’asta verticale
della lettera, formando un evidente angolo
retto. Il nome deriva da Giambattista
Bodoni, tipografo italiano attivo dalla fine
del ‘700, a Parma.
I caratteri scritti detti anche calligrafici,
imitano la scrittura a mano. Assumono
pertanto caratteristiche assai eterogenee
in relazione al tipo di strumento di scrittura
che si imita. I calligrafici propriamente
detti sono quelli che imitano una scrittura
fatta con dei pennini tipografici, mentre gli
handwritten determinano i caratteri più
informali che imitano la scrittura a mano.
Caratteri: Bodoni, Didot
Caratteri: Shelley, Zapfino
La classificazione dei caratteri di Aldo Novarese
La classificazione dei caratteri di Aldo Novarese
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
26
APPENDICE
I CARATTERI TIPOGRAFICI: CLASSIFICAZIONE DI ALDO NOVARESE
ORNATI
EGIZIANI
I caratteri ornati sono caratteri con
decorazioni. Formati generalmente dalle
sole lettere maiuscole, utilizzati come
capilettera.
I caratteri egiziani sono riconoscibili per
le grazie ad angolo retto molto spesse,
prendono il nome dai caratteri che venivano
usati su casse di spedizioni (in quell’epoca
che arrivavano o veniva spedite in Egitto).
Sono caratteri con forte impatto visivo.
Caratteri: Romantiques, Rosewood
La classificazione dei caratteri di Aldo Novarese
Caratteri: Rockwell
La classificazione dei caratteri di Aldo Novarese
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
27
APPENDICE
I CARATTERI TIPOGRAFICI: CLASSIFICAZIONE DI ALDO NOVARESE
LINEARI
I caratteri lineari sono detti anche bastoni,
sono privi di grazie e hanno spessori delle
aste uniformi, al giorno d’oggi chiamati
serif (senza
grazie).
Lacomunemente
classificazione sans
dei caratteri
di Aldo
Novarese
Caratteri: Helvetica, Futura, Gill Sans
FANTASIA
I caratteri fantasia, comprendono tutti i
La
classificazione
caratterinelle
di Aldo
Novarese
caratteri
che nondei
rientrano
precedenti
categorie.
Caratteri: Gillies gothic, Playbill
INFORMATICA E GRAFICA PER IL WEB | A.A. 2014/2015 | docente: Diana Quarti
28

Download Report