Programa Compartim de gestió del coneixement. CEJFE. 26 de setembre de 2011

1. @ignasialcalde
Ignasi Alcalde
Infografia i
visualització
Barcelona CEJFE 26 setembre 2011
1 | Infografia i visualització www.ignasialcalde.es

2. Agenda
• Presentació
• Disseny d’informació
• Infografia i visualització
• Passos per a una bona infografia
• Eines per visualitzar informació
• Many Eyes
Ignasi Alcalde
2 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

3. 1. Presentació: Qui sóc?
Ignasi Alcalde
3 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

4. Qui sóc?
Ignasi Alcalde
•Grau en multimèdia
•Col∙laborador docent UOC
•Consultor d’arquitectura de la
informació, comunitats de pràctica i
treball col∙laboratiu
•“Inquiet digital”, però m'agrada
molt la natura i l'aventura
www.ignasialcalde.es
Ignasi Alcalde
4 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

5. 2. Disseny de la informació
Ignasi Alcalde
5 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

6. Disseny de la informació
Ubiqüitat > On veiem el disseny d'informació?
•A la senyalització viària quan estem conduint
•Al mapa que utilitzem per planificar el viatge
•Al manual d’instruccions d'un producte o servei
•Al flascó del medicament
•A les instruccions de muntatge de nous productes i guies d'ús de les
joguines, mobles…
Ignasi Alcalde
6 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

7. Disseny de la informació
La comunicació visual a través d‘infografia
Utilitza imatges, símbols, colors i paraules per comunicar idees, il∙lustrar
la informació o expressar visualment les relacions.
Això implica:
• Filtrar la informació
• Establir relacions
• Discernir patrons i representar‐los d'una manera que permeti al
consumidor d’informació la construcció de coneixement
significatiu
Ignasi Alcalde
7 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

8. Disseny de la informació
Per què la visualització / infografia?
Dins del cervell hi ha més de trenta àrees (conjunts densament connectats de
neurones) dedicades al processament d’informació recollida pels ulls.
Som animals visuals, i això influeix fins i tot en la forma en què ens expressem.
Si expliquem alguna idea complexa a un angloparlant, en el moment en què
la comprengui, exclamarà amb una expressió d’alleujament i alegria a la cara: I
see! (‘Ja ho entenc’).
La visualització és necessària per passar de la informació a la saviesa.
Ignasi Alcalde
8 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

9. 3. Infografia i visualització
Ignasi Alcalde
9 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

10. Infografia i visualització
Propòsit
L’objectiu central de qualsevol treball de visualització no és la bellesa
ni l’impacte visual per si mateix, sinó ser comprensible primer i bell
després (o ser bell a través d’una exquisida funcionalitat).
El propòsit de la visualització és la comprensió, no la imatge.
‐Ben Shneiderman (1999)
Tot s’ha de fer tan simple com sigui possible, però no senzill.
(Atribuït a Albert Einstein)
Ignasi Alcalde
10 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

11. Infografia i visualització
infografia respecte de visualització
Alguns especialistes marquen una frontera entre aquestes dues disciplines,
basada en el fet que, suposadament, la infografia consisteix a presentar
informació per mitjà de gràfics estadístics, mapes i esquemes, mentre que la
visualització es basa en la creació d’eines visuals (estàtiques i interactives) que
un públic pugui fer servir per explorar, analitzar i estudiar conjunts complexos
de dades.
En la meva opinió la infografia i la visualització tenen una naturalesa comuna
atès que pertanyen a un mateix continu, on els límits de la qual són definits per
les paraules presentació i exploració.
Ignasi Alcalde
11 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

12. Infografia i visualització
infografia respecte de visualització
Alguns gràfics són tot presentació i
gairebé gens d’exploració, per la qual
cosa són “més infografia”.
D’altres permeten un enorme nombre de
lectures, per la qual cosa són “més
visualització”.
http://www.itsbeenreal.co.uk/index.php?/wwwords/literary‐organism/
Projecte de Stefanie Posavec
Ignasi Alcalde
12 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

13. Anatomia d’una infografia
El nucli d’una infografia està compost de tres parts molt importants:
1.visual
codis de color
gràfics
referència de les icones
2.contingut
terminis temporals
estadística
referències
3.coneixement
fets
deduccions
Ignasi Alcalde
13 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

14. Anatomia d’una informació
Com explicar una història amb la informació
http://youtu.be/mkEXx7sDXAI
Ignasi Alcalde
14 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

15. 4. Cinc passos essencials per
a una bona infografia
Ignasi Alcalde
15 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

16. 5 passos essencials per a una bona infografia
1.Esquelet i diagrames de flux
2.L'elaboració d'un esquema de color
3.Gràfics
4.Recerca de dades
5.Coneixement
http://www.flowtown.com/blog/wp‐content/uploads/2010/04/social‐media‐demographics9.png
Ignasi Alcalde
16 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

17. 5 passos essencials per a una bona infografia
Esquelet i diagrames de flux
• Enfocament d'una infografia com ho faria
qualsevol altra forma de disseny.
• Muntar un esquelet de paraules i fletxes,
agrupació de dades rellevants entre si i
visualitzar el flux d'informació a través de
diagrames de flux.
• Com que les infografies són en general
complexes, els diagrames de flux
simplifiquen el procés i permeten
connectar‐ho tot.
Ignasi Alcalde
17 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

18. 5 passos essencials per a una bona infografia
L'elaboració d'un esquema de color
• Un esquema de color és molt important
per transmetre una àmplia gamma de
missatges mentre es manté el lector
confinat dins de la infografia.
• Els lectors es confondran ràpidament si no
tenen els colors que lliguin els seus
pensaments visualment.
• Podem tenir‐ne 2, 3 o 10, però hem de
pensar l'assignació de colors abans de
començar a dissenyar.
Ignasi Alcalde
18 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

19. 5 passos essencials per a una bona infografia
Gràfics
Hi ha dos tipus de gràfics en una infografia: gràfic principal i gràfics de referència.
• El gràfic principal o plantilla és la definició
visual del disseny i, en general, és el que
sempre s'inclou en la infografia. L’elecció del
gràfic principal permet al lector saber amb un
cop d'ull quins són els coneixements que
desitja compartir.
• Els gràfics de referència no són obligatoris en
el disseny. En general, són icones que
s'utilitzen com a indicadors visuals per evitar
carregar en excés el disseny quan s’ha de
representar una gran quantitat de contingut.
Poden substituir paraules.
Ignasi Alcalde
19 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

20. 5 passos essencials per a una bona infografia
Recerca de dades
No cal dir que, a totes les infografies, hem d’investigar a fons i les dades presentades han
d'estar basades en fets comprovats.
• Esbrinar quines dades hem de
condensar i decidir quines dades són les
més rellevants i com les presentarem. La
relació de les dades dels gràfics funciona
millor si és d’1:1.
• Un altre punt molt important a recordar
és la demografia. Qui utilitzarà la seva
infografia? Segons el públic objectiu,
hem d'adaptar els colors, icones,
coneixement i complexitat de la
infografia.
Ignasi Alcalde
20 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

21. 5 passos essencials per a una bona infografia
Coneixement
Mostrar el contingut important per provocar fàcilment deduccions és tot un art. El
coneixement ja és poderós en si mateix, però la transmissió d'aquest coneixement
hauria de ser‐ho més.
• Si la infografia és concèntrica, hauríem de
situar al mig els continguts més importants,
tant visuals com relatius a fets.
• Si la infografia és horitzontal, els extrems de
la dreta i de l’esquerra són els punts inicial i
final de les deduccions i pensaments del
lector.
• L'elecció dels colors i les imatges és de vital
importància atès que, per exemple, el color
vermell s'associa normalment a perill.
Ignasi Alcalde
21 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

22. 5. Eines per visualitzar
informació
Ignasi Alcalde
22 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

23. Eines per crear infografies
Stat Planet: Permet crear algunes visualitzacions
interactives de força qualitat, que després es
poden utilitzar tal qual o crear una imatge
estàtica. La imatge es pot descarregar
gratuïtament.
Creately Permet crear fàcilment esquemes i
diagrames de flux. També podem triar entre una
sèrie de tipus de diagrames dissenyats per
defecte i afegir‐hi ràpidament dades per fer el
nostre propi gràfic. El resultat final és bastant
professional i té algunes opcions col∙laboratives.
Molt recomanable.
Ignasi Alcalde
23 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

24. Eines per crear infografies
Google Public Data: Utilitza dades públiques i les
converteix en una infografia.
Wordle: Permet crear visualitzacions amb el text que
es vulgui. Ofereix diversos dissenys. També és
interessant la possibilitat d'incloure un bloc, web o
Delicious.
Tableau Públic: Genera gràfics bastant acolorits. És
un programari de codi obert per a Windows.
Inkscape: Eina d'ús lliure per crear gràfics vectorials.
Suporta diferents plataformes.
Ignasi Alcalde
24 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

25. Eines per crear infografies
Google Chart Tools Permet crear gràfics estàtics o dinàmics.
Dins dels estàtics, es poden crear codis QR, fórmules
matemàtiques, icones i gràfics estadístics. Pel que fa als
dinàmics, es poden llegir dades de bases de dades Oracle o
fulls de càlcul de Google i representar‐los en imatges
dinàmiques.
Gapminder: És un programa gratuït Adobe Air
(multiplataforma). Permet crear visualitzacions per
multipropòsit. A més, compta amb una base de dades.
Many Eyes: Permet carregar les pròpies dades o dades ja
emmagatzemades en aquest web. Les visualitzacions
d’aquestes estan molt ben dissenyades i tenen una aparença
força professional.
Ignasi Alcalde
25 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

26. 6. Many Eyes
Visualitzar informació
Ignasi Alcalde
26 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

27. Many Eyes
Objectius
• Registrar‐se en el lloc
• Crear un conjunt de dades
• Fer un núvol de paraules
• Incrustar la visualització en altres llocs
Ignasi Alcalde
27 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

28. Many Eyes
Registrar‐se
Fem clic a
“Register”
Ignasi Alcalde
28 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

29. Many Eyes
Registrar‐se
Nota
Escrivim la nostra Ens arribarà un correu
adreça de correu electrònic de confirmació
electrònic que no sempre el rebrem
en la nostra safata
d'entrada. Per tant, cal
Escrivim el codi en comprovar, en cas de
el camp de text dubte, la carpeta de correu
electrònic no desitjat.
Finalment, fem clic a
“Send Email” per
rebre la confirmació
Ignasi Alcalde
29 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

30. Many Eyes
Registrar‐se
Nota
Fem clic en l’opció “Yes, Many Eyes vol que la
I agree” per acceptar les nostra contrasenya tingui
condicions del servei lletres i nombres.
Emplenem el nom
Finalment fem clic a d'usuari i la contrasenya
“Register”
Ignasi Alcalde
30 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

31. Many Eyes
Crear un conjunt de dades
1. Anem a “Create a
visualization”.
2. Posteriorment podem
escollir entre pujar la
nostra informació o
amb la informació ja
creada.
En el nostre cas escollirem
“Upload your own
data“ per introduir la
informació que
Omplir nom d 'usuari i desitgem.
la contrasenya
Ignasi Alcalde
31 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

32. Many Eyes
Crear un conjunt de dades
1. Escollim text lliure o
taula de dades.
2. Enganxem les dades a
“Paste data”.
3. Informem sobre
l’origen de les dades
• Títol
• Font
• URL
• Etiquetes
• Descripció
Ignasi Alcalde
32 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

33. Many Eyes
Crear un conjunt de dades
Nota
Així és com quedaria la
informació una vegada
introduïda. Hem de tenir
present que la informació
una vegada introduïda és
pública.
Posteriorment fem clic a
“Visualize”.
Ignasi Alcalde
33 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

34. Many Eyes
Visualitzar la informació
Després d’introduir les
dades, hem de decidir com
les visualitzem, en funció
de l’origen d’aquestes,
s’ha d’escollir:
•Analitzar text
•Comparar valors
•Cercar relacions
•Cercar parts
•Traçar pujades / baixades
Ignasi Alcalde
34 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

35. Many Eyes
Visualitzar la informació
En el cas de l’exemple s’ha
seleccionat “word tree”
amb el text introduït.
Clarament ajuda a cercar la
informació relacionada amb
la paraula clau introduïda.
Finalment li donem un títol
a la informació que volem
visualitzar.
Ignasi Alcalde
35 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

36. Many Eyes
Visualitzar la informació
Una vegada enregistrat,
disposem de força opcions
socials per compartir
aquesta informació a la
xarxa.
Ignasi Alcalde
36 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

37. Many Eyes
Visualitzar la informació
Diverses opcions socials
per compartir aquesta
informació a la xarxa.
Cal destacar
•Imatge estàtica
•Visualització en viu i
dinàmica.
Ignasi Alcalde
37 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

38. Many Eyes
Visualitzar la informació
Ignasi Alcalde
38 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

39. Webs de referència
en la visualització d’informació
•http://www.informationisbeautiful.net/
•http://www.visualopolis.com/
•http://www.visualcomplexity.com
•http://www.coolinfographics.com/
•http://infographicworld.com/
•http://dailyinfographic.com/
•http://www.infographicsshowcase.com/
•http://www.infographiclabs.com/
Vídeo recomanat
•http://www.youtube.com/watch?v=_l‐Dby7‐JG4
Ignasi Alcalde
39 | Infografia i visualització www.ignasialcalde.es
@ignasialcald

40. Contacte
www.ignasialcalde.es
info@ignasialcalde.es
@ignasialcalde
Ignasi Alcalde
40 | Infografia i visualització www.ignasialcalde.es
@ignasialcald