Date post: | 12-Nov-2014 |
Category: |
Education |
Upload: | departament-de-justicia-generalitat-de-catalunya |
View: | 757 times |
Download: | 0 times |
Infografia i visualització www.ignasialcalde.es1 |
Ignasi Alcalde
@ignasialcalde
Infografia i
visualització
Barcelona CEJFE 26 setembre 2011
Infografia i visualització www.ignasialcalde.es2 |Ignasi Alcalde @ignasialcald
Agenda
• Presentació
• Disseny d’informació
• Infografia i visualització
• Passos per a una bona infografia
• Eines per visualitzar informació
• Many Eyes
Infografia i visualització www.ignasialcalde.es3 |Ignasi Alcalde @ignasialcald
1. Presentació: Qui sóc?
Infografia i visualització www.ignasialcalde.es4 |Ignasi Alcalde @ignasialcald
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
Infografia i visualització www.ignasialcalde.es5 |Ignasi Alcalde @ignasialcald
2. Disseny de la informació
Infografia i visualització www.ignasialcalde.es6 |Ignasi Alcalde @ignasialcald
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…
Infografia i visualització www.ignasialcalde.es7 |Ignasi Alcalde @ignasialcald
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 coneixementsignificatiu
Infografia i visualització www.ignasialcalde.es8 |Ignasi Alcalde @ignasialcald
Disseny de la informació
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: Isee! (‘Ja ho entenc’).
La visualització és necessària per passar de la informació a la saviesa.
Per què la visualització / infografia?
Infografia i visualització www.ignasialcalde.es9 |Ignasi Alcalde @ignasialcald
3. Infografia i visualització
Infografia i visualització www.ignasialcalde.es10 |Ignasi Alcalde @ignasialcald
Infografia i visualització
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)
Propòsit
Infografia i visualització www.ignasialcalde.es11 |Ignasi Alcalde @ignasialcald
Infografia i 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ó.
infografia respecte de visualització
Infografia i visualització www.ignasialcalde.es12 |Ignasi Alcalde @ignasialcald
Infografia i 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
infografia respecte de visualització
Infografia i visualització www.ignasialcalde.es13 |Ignasi Alcalde @ignasialcald
Anatomia d’una infografia
El nucli d’una infografia està compost de tres parts molt importants:
1.visualcodis de colorgràficsreferència de les icones
2.contingutterminis temporalsestadísticareferències
3.coneixementfetsdeduccions
Infografia i visualització www.ignasialcalde.es14 |Ignasi Alcalde @ignasialcald
Anatomia d’una informació
http://youtu.be/mkEXx7sDXAI
Com explicar una història amb la informació
Infografia i visualització www.ignasialcalde.es15 |Ignasi Alcalde @ignasialcald
4. Cinc passos essencials per a una bona infografia
Infografia i visualització www.ignasialcalde.es16 |Ignasi Alcalde @ignasialcald
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
Infografia i visualització www.ignasialcalde.es17 |Ignasi Alcalde @ignasialcald
5 passos essencials per a una bona infografiaEsquelet 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.
Infografia i visualització www.ignasialcalde.es18 |Ignasi Alcalde @ignasialcald
5 passos essencials per a una bona infografiaL'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.
Infografia i visualització www.ignasialcalde.es19 |Ignasi Alcalde @ignasialcald
5 passos essencials per a una bona infografiaGrà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.
Infografia i visualització www.ignasialcalde.es20 |Ignasi Alcalde @ignasialcald
5 passos essencials per a una bona infografiaRecerca 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.
Infografia i visualització www.ignasialcalde.es21 |Ignasi Alcalde @ignasialcald
5 passos essencials per a una bona infografiaConeixement
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.
Infografia i visualització www.ignasialcalde.es22 |Ignasi Alcalde @ignasialcald
5. Eines per visualitzar informació
Infografia i visualització www.ignasialcalde.es23 |Ignasi Alcalde @ignasialcald
Eines per crear infografies
Stat Planet: Permet crear algunes visualitzacionsinteractives 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.
Infografia i visualització www.ignasialcalde.es24 |Ignasi Alcalde @ignasialcald
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é ésinteressant la possibilitat d'incloure un bloc, web o Delicious.
Tableau Públic: Genera gràfics bastant acolorits. Ésun programari de codi obert per a Windows.
Inkscape: Eina d'ús lliure per crear gràfics vectorials. Suporta diferents plataformes.
Infografia i visualització www.ignasialcalde.es25 |Ignasi Alcalde @ignasialcald
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órmulesmatemàtiques, icones i gràfics estadístics. Pel que fa alsdinàmics, es poden llegir dades de bases de dades Oracle o fulls de càlcul de Google i representar‐los en imatgesdinàmiques.
Gapminder: És un programa gratuït Adobe Air (multiplataforma). Permet crear visualitzacions permultipropò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 visualitzacionsd’aquestes estan molt ben dissenyades i tenen una aparençaforça professional.
Infografia i visualització www.ignasialcalde.es26 |Ignasi Alcalde @ignasialcald
6. Many Eyes Visualitzar informació
Infografia i visualització www.ignasialcalde.es27 |Ignasi Alcalde @ignasialcald
Many EyesObjectius
• Registrar‐se en el lloc
• Crear un conjunt de dades
• Fer un núvol de paraules
• Incrustar la visualització en altres llocs
Infografia i visualització www.ignasialcalde.es28 |Ignasi Alcalde @ignasialcald
Many EyesRegistrar‐se
Fem clic a “Register”
Infografia i visualització www.ignasialcalde.es29 |Ignasi Alcalde @ignasialcald
Many EyesRegistrar‐se
Escrivim la nostraadreça de correu
electrònic
Escrivim el codi en el camp de text
Finalment, fem clic a “Send Email” per
rebre la confirmació
Nota
Ens arribarà un correuelectrònic de confirmacióque no sempre el rebrem en la nostra safata d'entrada. Per tant, cal comprovar, en cas de dubte, la carpeta de correuelectrònic no desitjat.
Nota
Ens arribarà un correuelectrònic de confirmacióque no sempre el rebrem en la nostra safata d'entrada. Per tant, cal comprovar, en cas de dubte, la carpeta de correuelectrònic no desitjat.
Infografia i visualització www.ignasialcalde.es30 |Ignasi Alcalde @ignasialcald
Many EyesRegistrar‐se
Nota
Many Eyes vol que la nostra contrasenya tingui lletres i nombres.
Nota
Many Eyes vol que la nostra contrasenya tingui lletres i nombres.
Fem clic en l’opció “Yes, I agree” per acceptar les condicions del servei
Emplenem el nom d'usuari i la contrasenyaFinalment fem clic a
“Register”
Infografia i visualització www.ignasialcalde.es31 |Ignasi Alcalde @ignasialcald
Many EyesCrear un conjunt de dades
Omplir nom d 'usuari i la contrasenya
1. Anem a “Create a visualization”.
2. Posteriorment podemescollir entre pujar la nostra informació o amb la informació ja creada.
En el nostre cas escollirem “Upload your owndata“ per introduir la informació que desitgem.
1. Anem a “Create a visualization”.
2. Posteriorment podemescollir entre pujar la nostra informació o amb la informació ja creada.
En el nostre cas escollirem “Upload your owndata“ per introduir la informació que desitgem.
Infografia i visualització www.ignasialcalde.es32 |Ignasi Alcalde @ignasialcald
Many EyesCrear 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ó
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ó
Infografia i visualització www.ignasialcalde.es33 |Ignasi Alcalde @ignasialcald
Many EyesCrear 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 éspública.
Posteriorment fem clic a “Visualize”.
Nota
Així és com quedaria la informació una vegada introduïda. Hem de tenir present que la informacióuna vegada introduïda éspública.
Posteriorment fem clic a “Visualize”.
Infografia i visualització www.ignasialcalde.es34 |Ignasi Alcalde @ignasialcald
Many EyesVisualitzar 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
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
Infografia i visualització www.ignasialcalde.es35 |Ignasi Alcalde @ignasialcald
Many EyesVisualitzar la informació
En el cas de l’exemple s’haseleccionat “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.
En el cas de l’exemple s’haseleccionat “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.
Infografia i visualització www.ignasialcalde.es36 |Ignasi Alcalde @ignasialcald
Many EyesVisualitzar la informació
Una vegada enregistrat, disposem de força opcionssocials per compartir aquesta informació a la xarxa.
Una vegada enregistrat, disposem de força opcionssocials per compartir aquesta informació a la xarxa.
Infografia i visualització www.ignasialcalde.es37 |Ignasi Alcalde @ignasialcald
Many EyesVisualitzar la informació
Diverses opcions socials per compartir aquesta informació a la xarxa.
Cal destacar
•Imatge estàtica
•Visualització en viu i dinàmica.
Diverses opcions socials per compartir aquesta informació a la xarxa.
Cal destacar
•Imatge estàtica
•Visualització en viu i dinàmica.
Infografia i visualització www.ignasialcalde.es38 |Ignasi Alcalde @ignasialcald
Many EyesVisualitzar la informació
Infografia i visualització www.ignasialcalde.es39 |Ignasi Alcalde @ignasialcald
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
Infografia i visualització www.ignasialcalde.es40 |Ignasi Alcalde @ignasialcald
Contacte
www.ignasialcalde.es
@ignasialcalde