Download - Le INFOGRAFICHE (dinamiche)
![Page 1: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/1.jpg)
Andrea Parisi31.05.2012, EDUCAFE, METID – Politecnico di Milano
INFOGRAFICA DINAMICA
![Page 2: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/2.jpg)
TRE FASI x L’EXPERTISE
PRIMA FASEPanoramica sulle infografiche e raccolta link (questa presentazione).
SECONDA FASERealizzazione di una METID INFOGRAPHIC.
TERZA FASEProgettazione e Realizzazione di "un'infografica dinamica".Un'applicazione che si "auto-aggiorna" importando i dati da un database specifico sulla base di un format visuale standard predefinito.
Fattibile? …
![Page 3: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/3.jpg)
DEFINIZIONI
“L'infografica si occupa principalmente dell’organizzazione e della rappresentazione di dati e informazioni in forma grafica“.
Mattia Lissi (Social Media Analyst): l’infographic è lo strumento grazie al quale è possibile comprendere in modo immediato concetti articolati e renderli accessibili ad un pubblico meno esperto.www.lissimattia.com
Pasquale Gangemi (SEO Specialist): l’infografica consiste nella rappresentazione visuale di informazioni, dati o conoscenze attraverso l’uso di diversi elementi grafici. www.pasqualegangemi.com
![Page 4: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/4.jpg)
LA STORIA
Nella preistoria, i nostri antenati hanno creato i primi esempi di infografica: le mappe. La cartografia infatti è di parecchi millenni precedente alla scrittura: le mappe di Çatal Hüyük sono datate all'incirca 7500 a.C.Nel 1626, il gesuita Christoph Scheiner pubblica Rosa Ursina, in cui usa una grande varietà di elementi grafici per rivelare la sua ricerca astronomica sul sole. In quella pubblicazione, Scheiner usa una serie di immagini per spiegare la rotazione del sole nel tempo.Nel 1786, William Playfair pubblica i primi grafici di dati nel suo libro L'Atlante commerciale e politico. Il libro è pieno di grafici statistici che rappresentano l'economia del diciottesimo secolo, usando istogrammi e diagrammi a colonna. Nel 1801, continua ad innovare creando i primi diagrammi ad area nel suo breviary di statistica.Nel 1878, James Joseph Sylvester introduce il termine "grafico" e pubblica una serie di diagrammi rappresentanti la relazione fra legami chimici e proprietà matematiche. Nel 1861, mediante un grafico seminale, venne rappresentata la disastrosa marcia su Mosca di Napoleone. L'autore di questo grafico, Charles Joseph Minard, è riuscito a rappresentare in una singola immagine bidimensionale, quattro diverse variabili che hanno contribuito al fallimento della marcia [ La distanza e la direzione in cui l'esercito viaggiò - le quote d'altitudine a cui viaggiarono le truppe - la quantità di soldati morti di fame e per le ferite - le temperature gelide incontrate durante la marcia.Nel 1936, Otto Neurath introdusse un sistema di pittogrammi progettati come linguaggio visivo internazionale. Isotype (questo il nome del gruppo di pittogrammi) include una serie di figure umane stilizzate che saranno la base per le moderne icone di figure umane al tratto.Nel 1972, Otl Aicher creò, in occasione delle Olimpiadi di Monaco di Baviera, una serie di pittogrammi divenuti molto popolari e che influenzarono (e continuano ad influenzare) lo stile nella stilizzazione della figura umana usata in tutta la segnaletica pubblica.
OGGI, milioni di infografiche nel mondo (e sul web) per ogni tipo di rappresentazione e dato.
![Page 5: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/5.jpg)
OGGI
Le infografiche sono ovunque eutilizzate per tantissimi scopi
Dal raccontare lo sviluppo del web nel tempo alla creazionedi CV personalizzati fino a strumenti automatici che consentono di creare infografiche dinamiche.
Sono utilizzate anche perCreare e Condividere storie
![Page 6: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/6.jpg)
TIPOLOGIE INFOGRAFICHE
tabelle diagrammi di flusso mappe concettuali schemi a blocchi istogrammi grafici mappe mappe topografiche schemi sistemi di segnaletica idee e concetti processi ed evoluzioni cronologie e timeline CV istruzioni altro...
![Page 7: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/7.jpg)
OGGI
Facebook - Relationships
![Page 8: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/8.jpg)
PERCHE’ USARLE E’ UN VANTAGGIO
L'utente medio:- consuma i dati sul web in maniera differente dal contesto tradizionale- percepisce e impara i contenuti in modo diverso
Le infografiche:- supportano questa consultazione di informazioni - aiutano a conservare nel ricordo i messaggi visualizzati.
La comunicazione attraverso le immaginiè un innegabile vantaggio!
![Page 9: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/9.jpg)
L’INFOGRAFICA (DATI + DESIGN)
The Value of Data Visualization
![Page 10: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/10.jpg)
DA CONSIDARARE
Easy to digest, Easy to share, They are cool!
10 ragioni per cui le Infografiche sono importanti:1. It makes info more appealing - Rende le informazioni più attraenti.2. It shows valuable ideas - Mostra le idee di valore.3. It is attention-grabbing - Attira l'attenzione.4. It is easier to understand - E 'più facile da capire.5. It lessens boredom - Si riduce la noia.6. It awakens one’s interest - Risveglia il proprio interesse.7. It is accessible - E 'accessibile.8. It is more persuasive - E 'più convincente.9. It is memorable - E' memorizzabile.10. It can easily relay info - Si può facilmente ritrasmettere.
![Page 11: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/11.jpg)
DA CONSIDARARE
Consigli utili
un concetto = un’immagine - NON esprimere idee diverse all'interno di un'unica immagine.- Più concetti insieme potrebbe complicare la comprensione del dato.- Creare grafica per accogliere le altre idee.
Rendere facile la rappresentazione - Utilizzare molto spazio bianco o cmq alleggerire spazi e ingombri.- Ogni testo deve essere di facile lettura (font puliti e abbastanza grandi ).- Riunire in una sola citazione o frase un insieme di informazioni. - Riassumere graficamente piccoli gruppi di informazione.- Pensare in termini di numeri e aggregatori (5 motivi per… sette cosa da…).
![Page 12: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/12.jpg)
COSA NON FARE
Molte infografiche sono costruite con minuziosa cura dei particolari, ma purtroppo si basano principalmente sull’estetica e danno meno importanzaalla chiarezza con cui vengono trasmesse le informazioni.
Esempi da N N seguire!
![Page 13: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/13.jpg)
COSA NON FARE
1) Il testo dell'infografica non è reso in alcun modo disponibile2) Non vi è alcun aiuto alla lettura come grassetti e corsivi.3) Il pezzo è taggato con termini quali "Bettino Craxi"che neppure ricorrono nel testo dell'articolo, ma solo nell'immagine.4) L'analogia con il Gioco dell'Oca o con un percorso tortuoso rende l'infografica di difficilissima lettura5) Le informazioni sarebbero risultate più chiare in un normale post diviso per paragrafi di testo6) L'unica idea pertinente è la modificazione nel tempo della casa, ci sono solo punto di partenza e arrivo, mentre il percorso manca. (e l’uccellino?)Da Linkiesta Italia 1973-2011, Una repubblica fondata sul condono
![Page 14: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/14.jpg)
IL CONTESTO
TitoloTesto, testo, testo
![Page 15: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/15.jpg)
PUNTI DI VISTA
"Cambiare prospettiva per vedere la realtà di scala del dato"
![Page 16: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/16.jpg)
PUNTI DI VISTA
![Page 17: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/17.jpg)
PUNTI DI VISTA
L'immediatezza dei dati visivi e la sua comprensione rispetto al confronto tra dati a volte ci fà scoprire anche informazioni che non avevamo considerato.
Vulcano islandese e le sue emissioni di CO2
206,465 Tons CO2 saved by 60% cancelled flights across Europe
![Page 18: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/18.jpg)
STRUMENTI ONLINE
http://infogr.am (beta) Crea infografiche online (richiede account Facebook e Twitter).
![Page 19: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/19.jpg)
STRUMENTI ONLINE
Visual.ly Crea infografiche personalizzate, attraverso Facebook e Twitter.Easel.ly Crea infografiche personalizzate sulla base di template predefiniti. Google public Data Explorer Visualizzare grandi serie di dati, analizzarli e comunicarli.Ionz Applicazione web che consente di realizzare un’infografica personale.Vizualize.me Crea un’infografica del proprio curriculum vitae da LinkedIn.Cvgram.me Crea infografiche del proprio CV. Social Memories Realizza il Libro infografico del profilo di Facebook.Indiemapper Servizio web gratuito per creare delle mappe geografiche tematiche.
Tiki-Toki Crea linee temporali con foto, video e notizie.Memolane Timeline personali su avvenimenti di Facebook, Twitter e altri social.
Chartle Web-app per creare grafici con diagrammi, istogrammi, grafici a torta, etc.Hohli Diagrammi di Venn, a torta, a barre, e altri tipi di informazioni grafiche.Tagxedo Strumento per creare tag cloud, con possibilità di personalizzazione.
Presenti sul web anche risorse grafiche free per realizzare infografiche (es. Vector Infographic Kit).
![Page 20: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/20.jpg)
ESEMPI TEMATICI
Education Environment Gaming Geography Social Media Transportation – Travel Tecnology Entertainment Computers – Design Curriculum Vitae Real Info Other – Funny Vertical infographics
Video - Animation
![Page 21: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/21.jpg)
ESEMPI Education
![Page 22: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/22.jpg)
ESEMPI Education
![Page 23: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/23.jpg)
ESEMPI Environment
![Page 24: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/24.jpg)
ESEMPI Gaming
![Page 25: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/25.jpg)
ESEMPI Gaming
![Page 26: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/26.jpg)
ESEMPI Gaming
![Page 27: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/27.jpg)
ESEMPI Geography
![Page 28: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/28.jpg)
ESEMPI Social Media
![Page 29: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/29.jpg)
ESEMPI Transportation - Travel
![Page 30: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/30.jpg)
ESEMPI Tecnology
![Page 31: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/31.jpg)
ESEMPI Tecnology
![Page 32: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/32.jpg)
ESEMPI Entertainment
![Page 33: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/33.jpg)
ESEMPI Computers - Design
![Page 34: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/34.jpg)
ESEMPI Computers - Design
![Page 35: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/35.jpg)
ESEMPI Curriculum Vitae
![Page 36: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/36.jpg)
ESEMPI Curriculum Vitae
![Page 37: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/37.jpg)
ESEMPI Real Info
![Page 38: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/38.jpg)
ESEMPI Other - Funny
![Page 39: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/39.jpg)
ESEMPI Other - Funny
![Page 40: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/40.jpg)
ESEMPI Vertical infographics
H = 14.190 px
SPACE RACE INFOGRAPHIC - bbc
www.bbc.com/future/bespoke/space_infographic
![Page 41: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/41.jpg)
ESEMPI (video and animation)
Liquid infographics
![Page 42: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/42.jpg)
ESEMPI (video and animation)
Move more, move better, move forever.
![Page 43: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/43.jpg)
ESEMPI (video and animation)
This video introduce you to the concepts of data visualization and show online tools
![Page 44: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/44.jpg)
Laboratorio POLIMI
Density Design is a Research Lab in the design department (INDACO) of the Politecnico di Milano. It focuses on the visual representation of complex social, organizational and urban phenomena.
![Page 45: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/45.jpg)
INFO E STACKS
METID web site
BeeP | METID Match
Delicious Staks http://delicious.com/stacks/andrea_parisi
http://beep.metid.polimi.it/web/metid-match
www.metid.polimi.it
![Page 46: Le INFOGRAFICHE (dinamiche)](https://reader034.vdocuments.site/reader034/viewer/2022052208/55859351d8b42ac76d8b4a0d/html5/thumbnails/46.jpg)
GRAZIE.