SlideShare une entreprise Scribd logo
1  sur  56
Télécharger pour lire hors ligne
Esquemática, Infovis
e Infografías.
Introducción a las explicaciones visuales.




Otoño 2009.


Mtro. Omar Sosa Tzec
http://www.tzek-design.com/blog
Esquemática.
Un esquema puede considerarse como una
representación gráfica o simbólica de las
cosas materiales o inmateriales.



www.rae.es, 2009.
En palabras de Costa, el verbo visualizar se
refiere al hecho de hacer visibles y
comprensibles al ser humano aspectos y
fenómenos de la realidad que no son accesibles
al ojo, y muchos de ellos ni siquiera de naturaleza
visual y está directamente relacionado con el
proceso de transformación de los fenómenos en
información y la información en conocimiento.



La Esquemática. Joan Costa, 1998.
Fenómeno.

Realidad.

No accesible al ojo humano.

Transformar los fenómenos en información.

Información en conocimiento.
fenómeno   información   conocimiento
¿Por qué es importante transformar la
información en conocimiento?
La ecuación del calor.
Representación gráfica de la ecuación del calor.
http://www.tzek-design.com/archivos/OmiTesis_CIMAT.pdf
El tiempo.
El tiempo.
La semiótica.
Los elementos identificadores (semiótica).
La semiótica.
El nivel de iconicidad.
La repetición.
La variación.
La escala.
La visualización de información involucra una
actividad cognitiva y conlleva a la construcción
de modelos internos en la mente…



Según Benjamin Fry, tiene su importancia en la
capacidad de ayudar a las personas a “ver” cosas
que no han sido previamente entendidas en
forma de datos abstractos.



benfry.com
Actividad cognitiva.

Modelos internos de la mente.

Ayudar a ver cosas no entendidas.
Gapminder.

http://www.gapminder.org/
¿Cuáles son los elementos gráficos que ayudan a
entender los fenómenos?

¿Todos tienen que ver con el tiempo?
The art of complex problem solving.

http://www.idiagram.com/CP/cpprocess.html
¿Cuáles son los elementos gráficos que ayudan a
entender los fenómenos?

¿Todos tienen que ver con el tiempo?
¿Y todas las gráficas tienen que ver con
el tiempo?

Es decir, ¿tiene que haber animación?

¿Qué sucede cuando el medio es
estático (impreso)?
Information graphics vinyl stickers for the home.

http://infosthetics.com/archives/2009/09/
information_graphics_stickers_for_the_home.html
50 great examples of infographics.

http://blogof.francescomugnai.com/2009/04/50-
great-examples-of-infographics/
http://www.flickr.com/photos/
ritwikdey/426048360/sizes/l/
http://www.flickr.com/photos/
densitydesign/3409542518/sizes/l/
http://1.bp.blogspot.com/_HRnKzjq-c5g/Sd9vtNArvJI/AAAAAAAAAks/rtrE4u5ZqgU/
s1600-h/Imagen+2.png
http://www.behance.net/Gallery/Information-Matters-Promo/97671
Isometric Ilustrations.

http://vector.tutsplus.com/tutorials/illustration/
working-with-orthographic-projections-and-
basic-isometrics/


http://vector.tutsplus.com/tutorials/illustration/
how-to-create-advanced-isometric-illustrations-
using-the-ssr-method/
Air safety cards.

http://en.wikipedia.org/wiki/Aircraft_safety_card
Jaques Bertin: Variables visuales.
Variables visuales de Jaques Bertin.
http://www.infovis-wiki.net/index.php?title=Visual_Variables
Las dimensiones de los esquemas.
Abstracción
                     Estética                     Información




       Complejidad                                              Inteligibilidad




                     Redundancia                      Semanticidad

                                    Iconicidad


Joan Costa. La Esquemática. 1998.
Pasos básicos para la visualización de
un fenómeno.
La explicación visual de un fenómeno como
se puede ver en los ejemplos anteriores
tiene que ver con la narrativa.



¿Qué explicas? podría equivaler a:

¿Qué estás contando sobre el fenómeno?
* Dentro de la narración de lo que es el fenómeno,
al igual que un cuento, existen ciertas etapas.



* Cada etapa cuenta una parte de la historia.



* Para que la persona no pierda la continuidad en
la historia debes cuidar lo que dices: ¿de qué
hablas? ¿cómo explicas con claridad la historia
para esa etapa? ¿qué es importante mencionar en
el comienzo? ¿a qué idea se debe llegar al final?
* Del fenómeno, identifica cuáles son los sub-
fenómenos o procesos asociados.

* Para cada uno, determina qué elementos
(concretos y abstractos) lo constituyen.

* Identificados estos elementos, identifica cuáles
son las acciones que se llevan a cabo a través del
tiempo.

* Aún más, fíjate, qué se transforma ¿en qué? ¿en
cuántos pasos? ¿cómo se dio la acción en el
tiempo? ¿en forma lineal o no lineal? ¿recursiva o
iterativa?
* Así como enlazas a nivel micro las ideas
relacionadas a cada sub-proceso, piensa después
¿cómo se ligan todas?

* Y ve definiendo a nivel micro ¿cuáles son las
formas de representación que explican la
evolución de los sub-procesos o sub-fenómenos?
Proyecto.
El tema será los videojuegos.

Por equipo seleccionarán un videojuego.

Primero se trabajará a nivel boceto con lápiz y papel
sobre los procesos y características de “jugar ese
videojuego” en particular.
Esta explicación visual será compuesta; es decir,
incluirá muchos “chunks” de información para explicar
el fenómeno.
* ¿Cuál es el objetivo del juego? ¿Cómo se gana?

* ¿Cuáles son los elementos de la interfaz de usuario?

* ¿Cómo se juega el video juego en relación con el
dispositivo de control? (La relación botones o teclas con
respecto a los movimientos)

* ¿Cómo se consiguen altos puntajes?
* Realiza una bitácora de sesiones en 1 semana que
extraiga datos como:

¿Cuántas veces se realizan movimientos desde el
control?

¿Cómo fue el desarrollo de los caracteres, poderes
especiales o algún dato que se requiera incrementar o
decrementar con el fin de ganar el juego?

¿Cómo va la relación de puntaje, avance o
decrecimiento entre los miembros del equipo?
Gracias.

* Manejo de ligas y/o imágenes para demostraciones educativas del tema.

Contenu connexe

Similaire à Intro infovis-infographics-090929030721-phpapp01

La revolución digital en el cine de animación, toy story (1995).pdf
La revolución digital en el cine de animación, toy story (1995).pdfLa revolución digital en el cine de animación, toy story (1995).pdf
La revolución digital en el cine de animación, toy story (1995).pdfAnglica188577
 
Animacion digital
Animacion digitalAnimacion digital
Animacion digitaltorres06
 
C:\Fakepath\El Lenguaje De Los Nuevos Medios De ComunicacióN
C:\Fakepath\El Lenguaje De Los Nuevos Medios De ComunicacióNC:\Fakepath\El Lenguaje De Los Nuevos Medios De ComunicacióN
C:\Fakepath\El Lenguaje De Los Nuevos Medios De ComunicacióNUniversidad Oberta de Catalunya
 
C:\Fakepath\El Lenguaje De Los Nuevos Medios De ComunicacióN
C:\Fakepath\El Lenguaje De Los Nuevos Medios De ComunicacióNC:\Fakepath\El Lenguaje De Los Nuevos Medios De ComunicacióN
C:\Fakepath\El Lenguaje De Los Nuevos Medios De ComunicacióNUniversidad Oberta de Catalunya
 
Esquemática y Diseño de Información
Esquemática y Diseño de InformaciónEsquemática y Diseño de Información
Esquemática y Diseño de InformaciónOmar Sosa-Tzec
 
Periodismo Transmedia. Guía Práctica
Periodismo Transmedia. Guía PrácticaPeriodismo Transmedia. Guía Práctica
Periodismo Transmedia. Guía PrácticaMontecarlo -
 
Web 2.0, Democracia 3.0 y otros cuentos de fantasia
Web 2.0, Democracia 3.0 y otros cuentos de fantasiaWeb 2.0, Democracia 3.0 y otros cuentos de fantasia
Web 2.0, Democracia 3.0 y otros cuentos de fantasiaggranieri
 
Fundamentos de la Animación
Fundamentos de la AnimaciónFundamentos de la Animación
Fundamentos de la Animaciónpaoloarevaloortiz
 
Natalys-Rivero-Torre de luz eterna.pptx
Natalys-Rivero-Torre de luz eterna.pptxNatalys-Rivero-Torre de luz eterna.pptx
Natalys-Rivero-Torre de luz eterna.pptxNatalys Rivero
 
Taller Multimedia 210 1
Taller Multimedia  210 1Taller Multimedia  210 1
Taller Multimedia 210 1Alberto Rojas
 
Cb06 diana daza
Cb06 diana dazaCb06 diana daza
Cb06 diana dazaDiana Daza
 
Diseño y elaboración de materiales didácticos multimedia
Diseño y elaboración de materiales didácticos multimediaDiseño y elaboración de materiales didácticos multimedia
Diseño y elaboración de materiales didácticos multimediadaiana7
 

Similaire à Intro infovis-infographics-090929030721-phpapp01 (20)

308sedeno
308sedeno308sedeno
308sedeno
 
Fobias digitales
Fobias digitalesFobias digitales
Fobias digitales
 
Infodes001 110308180935-phpapp02
Infodes001 110308180935-phpapp02Infodes001 110308180935-phpapp02
Infodes001 110308180935-phpapp02
 
La revolución digital en el cine de animación, toy story (1995).pdf
La revolución digital en el cine de animación, toy story (1995).pdfLa revolución digital en el cine de animación, toy story (1995).pdf
La revolución digital en el cine de animación, toy story (1995).pdf
 
Animacion digital
Animacion digitalAnimacion digital
Animacion digital
 
C:\Fakepath\El Lenguaje De Los Nuevos Medios De ComunicacióN
C:\Fakepath\El Lenguaje De Los Nuevos Medios De ComunicacióNC:\Fakepath\El Lenguaje De Los Nuevos Medios De ComunicacióN
C:\Fakepath\El Lenguaje De Los Nuevos Medios De ComunicacióN
 
C:\Fakepath\El Lenguaje De Los Nuevos Medios De ComunicacióN
C:\Fakepath\El Lenguaje De Los Nuevos Medios De ComunicacióNC:\Fakepath\El Lenguaje De Los Nuevos Medios De ComunicacióN
C:\Fakepath\El Lenguaje De Los Nuevos Medios De ComunicacióN
 
Estrategias y actividades
Estrategias y actividadesEstrategias y actividades
Estrategias y actividades
 
Esquemática y Diseño de Información
Esquemática y Diseño de InformaciónEsquemática y Diseño de Información
Esquemática y Diseño de Información
 
Periodismo Transmedia. Guía Práctica
Periodismo Transmedia. Guía PrácticaPeriodismo Transmedia. Guía Práctica
Periodismo Transmedia. Guía Práctica
 
Web 2.0, Democracia 3.0 y otros cuentos de fantasia
Web 2.0, Democracia 3.0 y otros cuentos de fantasiaWeb 2.0, Democracia 3.0 y otros cuentos de fantasia
Web 2.0, Democracia 3.0 y otros cuentos de fantasia
 
Secuencia didactica
Secuencia didacticaSecuencia didactica
Secuencia didactica
 
Fundamentos de la Animación
Fundamentos de la AnimaciónFundamentos de la Animación
Fundamentos de la Animación
 
Stop motion en el cepr Andalucía
Stop motion en el cepr AndalucíaStop motion en el cepr Andalucía
Stop motion en el cepr Andalucía
 
Natalys-Rivero-Torre de luz eterna.pptx
Natalys-Rivero-Torre de luz eterna.pptxNatalys-Rivero-Torre de luz eterna.pptx
Natalys-Rivero-Torre de luz eterna.pptx
 
Taller Multimedia 210 1
Taller Multimedia  210 1Taller Multimedia  210 1
Taller Multimedia 210 1
 
Stop motion
Stop motionStop motion
Stop motion
 
Protocolo
ProtocoloProtocolo
Protocolo
 
Cb06 diana daza
Cb06 diana dazaCb06 diana daza
Cb06 diana daza
 
Diseño y elaboración de materiales didácticos multimedia
Diseño y elaboración de materiales didácticos multimediaDiseño y elaboración de materiales didácticos multimedia
Diseño y elaboración de materiales didácticos multimedia
 

Plus de Ana Isabel Gómez Marín

Icex planestrategico2009-2012-100517101520-phpapp02
Icex planestrategico2009-2012-100517101520-phpapp02Icex planestrategico2009-2012-100517101520-phpapp02
Icex planestrategico2009-2012-100517101520-phpapp02Ana Isabel Gómez Marín
 
Guiadeserviciosparalainternacionalizacion 121024060153-phpapp02
Guiadeserviciosparalainternacionalizacion 121024060153-phpapp02Guiadeserviciosparalainternacionalizacion 121024060153-phpapp02
Guiadeserviciosparalainternacionalizacion 121024060153-phpapp02Ana Isabel Gómez Marín
 
Generacion Modelo de Negocio (BBVA Innovation Center)
Generacion Modelo de Negocio (BBVA Innovation Center)Generacion Modelo de Negocio (BBVA Innovation Center)
Generacion Modelo de Negocio (BBVA Innovation Center)Ana Isabel Gómez Marín
 
Plandemarketingypublicidad01 100715200313-phpapp02 (1)
Plandemarketingypublicidad01 100715200313-phpapp02 (1)Plandemarketingypublicidad01 100715200313-phpapp02 (1)
Plandemarketingypublicidad01 100715200313-phpapp02 (1)Ana Isabel Gómez Marín
 
Estudioactividadmarcasenmediossocialesiab2013 130209173909-phpapp02
Estudioactividadmarcasenmediossocialesiab2013 130209173909-phpapp02Estudioactividadmarcasenmediossocialesiab2013 130209173909-phpapp02
Estudioactividadmarcasenmediossocialesiab2013 130209173909-phpapp02Ana Isabel Gómez Marín
 
20101229plandemarketing 101229043522-phpapp02
20101229plandemarketing 101229043522-phpapp0220101229plandemarketing 101229043522-phpapp02
20101229plandemarketing 101229043522-phpapp02Ana Isabel Gómez Marín
 
1fundamentosdelmarkestrategicoyoperativo 120814141906-phpapp01
1fundamentosdelmarkestrategicoyoperativo 120814141906-phpapp011fundamentosdelmarkestrategicoyoperativo 120814141906-phpapp01
1fundamentosdelmarkestrategicoyoperativo 120814141906-phpapp01Ana Isabel Gómez Marín
 
Diccionariomarketingpublicidadysocialmedia 120423090525-phpapp02-130430053513...
Diccionariomarketingpublicidadysocialmedia 120423090525-phpapp02-130430053513...Diccionariomarketingpublicidadysocialmedia 120423090525-phpapp02-130430053513...
Diccionariomarketingpublicidadysocialmedia 120423090525-phpapp02-130430053513...Ana Isabel Gómez Marín
 
Actividad de las Marcas en Medios Sociales
Actividad de las Marcas en Medios SocialesActividad de las Marcas en Medios Sociales
Actividad de las Marcas en Medios SocialesAna Isabel Gómez Marín
 
Panorama interactivo de los Grupos de Prensa y Revistas
Panorama interactivo de los Grupos de Prensa y RevistasPanorama interactivo de los Grupos de Prensa y Revistas
Panorama interactivo de los Grupos de Prensa y RevistasAna Isabel Gómez Marín
 

Plus de Ana Isabel Gómez Marín (20)

Ebusinessworld2013
Ebusinessworld2013Ebusinessworld2013
Ebusinessworld2013
 
Métricas en la Publicidad Online
Métricas en la Publicidad OnlineMétricas en la Publicidad Online
Métricas en la Publicidad Online
 
Tendencias Publicitarias 2013 (IAB)
Tendencias Publicitarias 2013 (IAB)Tendencias Publicitarias 2013 (IAB)
Tendencias Publicitarias 2013 (IAB)
 
Hot topic viajes_iab_abril_2012
Hot topic viajes_iab_abril_2012Hot topic viajes_iab_abril_2012
Hot topic viajes_iab_abril_2012
 
Icex planestrategico2009-2012-100517101520-phpapp02
Icex planestrategico2009-2012-100517101520-phpapp02Icex planestrategico2009-2012-100517101520-phpapp02
Icex planestrategico2009-2012-100517101520-phpapp02
 
Guiadeserviciosparalainternacionalizacion 121024060153-phpapp02
Guiadeserviciosparalainternacionalizacion 121024060153-phpapp02Guiadeserviciosparalainternacionalizacion 121024060153-phpapp02
Guiadeserviciosparalainternacionalizacion 121024060153-phpapp02
 
Elbriefdeagencia1 120621032951-phpapp01
Elbriefdeagencia1 120621032951-phpapp01Elbriefdeagencia1 120621032951-phpapp01
Elbriefdeagencia1 120621032951-phpapp01
 
Generacion Modelo de Negocio (BBVA Innovation Center)
Generacion Modelo de Negocio (BBVA Innovation Center)Generacion Modelo de Negocio (BBVA Innovation Center)
Generacion Modelo de Negocio (BBVA Innovation Center)
 
Plandemarketingypublicidad01 100715200313-phpapp02 (1)
Plandemarketingypublicidad01 100715200313-phpapp02 (1)Plandemarketingypublicidad01 100715200313-phpapp02 (1)
Plandemarketingypublicidad01 100715200313-phpapp02 (1)
 
Fijacindeprecios 121215211350-phpapp01
Fijacindeprecios 121215211350-phpapp01Fijacindeprecios 121215211350-phpapp01
Fijacindeprecios 121215211350-phpapp01
 
Estudioactividadmarcasenmediossocialesiab2013 130209173909-phpapp02
Estudioactividadmarcasenmediossocialesiab2013 130209173909-phpapp02Estudioactividadmarcasenmediossocialesiab2013 130209173909-phpapp02
Estudioactividadmarcasenmediossocialesiab2013 130209173909-phpapp02
 
20101229plandemarketing 101229043522-phpapp02
20101229plandemarketing 101229043522-phpapp0220101229plandemarketing 101229043522-phpapp02
20101229plandemarketing 101229043522-phpapp02
 
1fundamentosdelmarkestrategicoyoperativo 120814141906-phpapp01
1fundamentosdelmarkestrategicoyoperativo 120814141906-phpapp011fundamentosdelmarkestrategicoyoperativo 120814141906-phpapp01
1fundamentosdelmarkestrategicoyoperativo 120814141906-phpapp01
 
Diccionariomarketingpublicidadysocialmedia 120423090525-phpapp02-130430053513...
Diccionariomarketingpublicidadysocialmedia 120423090525-phpapp02-130430053513...Diccionariomarketingpublicidadysocialmedia 120423090525-phpapp02-130430053513...
Diccionariomarketingpublicidadysocialmedia 120423090525-phpapp02-130430053513...
 
Portadas Marcas en Facebook
Portadas Marcas en FacebookPortadas Marcas en Facebook
Portadas Marcas en Facebook
 
Taller analítica web
Taller analítica webTaller analítica web
Taller analítica web
 
Actividad de las Marcas en Medios Sociales
Actividad de las Marcas en Medios SocialesActividad de las Marcas en Medios Sociales
Actividad de las Marcas en Medios Sociales
 
Panorama interactivo de los Grupos de Prensa y Revistas
Panorama interactivo de los Grupos de Prensa y RevistasPanorama interactivo de los Grupos de Prensa y Revistas
Panorama interactivo de los Grupos de Prensa y Revistas
 
La Televisión interactiva
La Televisión interactivaLa Televisión interactiva
La Televisión interactiva
 
Medición de Audiencias Digitales
Medición de Audiencias DigitalesMedición de Audiencias Digitales
Medición de Audiencias Digitales
 

Intro infovis-infographics-090929030721-phpapp01