Gráfica Digital 2011

De Casiopea


Asignatura(s)Gráfica Digital
Año2011
Tipo de CursoRamo Lectivo
TalleresDG 4º
ProfesoresHerbert Spencer
AlumnosBegoña Vargas, Joaquín Martel, Jaime Pérez Moena, Karen Carrera, Macarena Álamos R, Antonia Góngora, Andrea Cifuentes, Diego Reyes, Valeria Cerón
Palabras Clavesoftware, interfaz gráfica, processing, dibujo
Carreras RelacionadasDiseño Gráfico


Introducción

Un fuerte problema del diseño gráfico, es la idea de los SKINS.

La estructura que se diseña, tiene distintas capas de apropiación y personalización, donde existen superficies lisas en un espacio de esta estructura para que la gente se apropie de ella, como por ejemplo los notebook, que proporcionan la posibilidad de adherirle una capa gráfica personalizada.

Esa situación dispone al Diseño Gráfico en la capa más superficial de todas, ya que es algo que se puede cambiar, reemplazar o desechar fácilmente, dándole un carácter cosmético, siendo que el Diseño propiamente tal aborda temas más profundos.

Un ejemplo controversial del año 2003, es proyecto del sitio Zen Garden, donde se disponen más de 100 estilos de páginas por medio de su estructura en HTML para un mismo contenido.

La implicancias más grandes que tiene esto corresponden a la forma y el contenido, ya que se necesita una estructura para poder juntar ambos ítemes, y en el sitio antes nombrado, la forma no propone relación con el contenido.

¿Qué fue lo que sucedió después de esto? comenzó a abogarse por estándares web, lo que provocó que un grupo de diseñadores encabezara un movimiento en forma de respuesta a esta forma de mostrar el diseño.

Referencia de Talleres Anteriores

Con respecto a los proyectos que se han realizado en este curso años anteriores, se han enfocado en un primer momento al desarrollo de propuestas con cascadas de estilos (css).

El 2007 se trabajó sobre proyectos para móviles, algo más parecido al diseño de interacción. En esta ocasión se medita sobre oportunidades para poder desarrollar servicios, dónde la pantalla es soporte y se piensa la gráfica como una expresión de un lenguaje digital, dónde caben las cosas que no puedo hacer a mano. ¿Para qué voy a usar un procesador para hacer algo parecido a lo que no es?

Un buen ejemplo de esto es The 892 unique ways to partition a 3 x 4 grid programa que construye todas las posibilidades de grilla 3 x 4 de forma clasificada. Este caso corresponde a una situación donde el procesador como máquina tiene una realidad, una razón de ser, una propiedad.

Visualización de Datos

La computadora computa, nosotros dibujamos: ¿qué podemos hacer al respecto?

La visualización de la información, prácticas y métodos, comprendidas desde un punto más amplio, tiene que ver con la imagen generada por el computador.

¿Qué es?

Básicamente construcción de comunicación. Tiene que ver con procesar grandes corpus de datos. Estos modelos son modelos que no están generados análogamente de acuerdo a la comprensión de un individuo, si no que de acuerdo a una gramática. Definir las perillas y el movimiento fino para generar algo que se lea. El modelo trata de ser el argumento que llega a otro.

Vamos a hacer una máquina de hacer modelos visuales o herramientas de argumentos gráficos a partir de una historia que mirar. Para visualizar los datos, hay que hacerse una pregunta. Si no tengo una pregunta es muy difícil que lo pueda ver.

Esto corresponde a una herramienta política ya que lo que uno construye son argumentos y tienen potencia de construcciones políticas de la realidad a partir de la pregunta que yo mismo quiero ver. Yo tengo una pre-concepción del mundo y la estoy haciendo extensiva a mis congéneres.

Sobre el Encargo

¿Cuáles son los lenguajes de representación?

La Primera Tarea consiste en que cada uno encuentre/elija un lenguaje de representación, que quede documentado con ejemplos en esta misma wiki.

Estos lenguajes tienen un poco que ver con las metáforas visuales. La idea es comenzar a tener una teoría de cuales son las gramáticas y para que cosas sirven, definir esta la gramática para poder definir una forma de visualización.

Ejemplos

Un ejemplo de gramática visual es la de Lee Byron, quien presenta una especie de gráfico de área donde muestra la historia de lo que ha escuchado en Last.Fm. La potencia de las visualizaciones corresponde a esa áurea que muestran la información de manera neutral. En este ejemplo se define que es lo que se quiere representar y se adjunta a una gramática, se trata de encontrar una situación nueva, para emparejarla con una metáfora correspondiente.

Otro ejemplo corresponde al diccionario Visual Thesaurus, diccionario de sinónimos, donde cada palabra tiene una cantidad de sinónimos, de las cuales algunas, aun siendo sinónimas, tienen definiciones diferentes entre ellas. Esta situación define la proximidad de las cosas: cada palabra tiene un anillo en torno al él, otra palabra tiene el suyo y de esa manera se interceptan disponiendo la posibilidad de navegar entre ellos. Este ejemplo también considera la variable del idioma, de manera que se pueda sobreponer uno sobre otro y establecer nuevas lecturas.

They Rule es otra forma de visualización de datos, pero también de descubrimiento, en este sitio se muestra la representación de cada gran empresa con un anillo de directores.

De otras maneras los datos también se dirigen hacia mapas, esferas de realidad, espacio mustela, como la obra de arte de Jack Lombardi, que tiene que ver con la venta de armas y petróleo.

El problema de la visualización de datos existe ya que esta grafía corresponde a una herramienta para llegar a una verdad. Un ejemplo de esto es cuenco se combina el poder de la computación más la elocuencia gráfica para encontrar el responsable de un crimen.

Nosotros queremos hacer máquinas visuales.

Otros ejemplos son el reloj que vimos que se compone de el escaneo de una brecha de majen, ejemplo que muestra una buena relación biyectiva.

El ejemplo de stacy greene`s lipsticks (1981) da pie para pensar en instancias donde hay una colección de cosas con las que uno puede establecer correspondencia a otra realidad que no está presente, pero que deja una huella. "Small Multiplies". Tiene mucha información de algo que está tomado de la cartera simplemente, ordenado bajo un criterio que está revelando algo y se tiene la astucia para reunir cosas que no están.

Otros ejemplos a investigar:

  • Lobachevsky
  • Smart Money
  • Jason Salavon
  • Caras de Chernoff

Comparto el siguiente documento: La visualización de datos como nueva abstracción y antisublime de Lev Manovich

--Maca.alamos 20:05 16 jun 2011 (CLT)

Metodología

Construir visualizaciones es construir una máquina gráfica. Existen leyes de correspondencia para permutar datos por valores visuales. Se pasa de algo cuantitativo a lo cualitativo logrando hacer aparecer el relato que estaba oculto. Es por esto que se trata de un diseño de segundo orden, se crean maquinas que diseñaran las visualizaciones.

Matemáticamente corresponde a una función inyectiva, de la tabla con los datos puedo ir a la visualización pero difícilmente me puedo devolver. Es un algoritmo.

Culturalmente corresponde a una herramienta de persuasión, se construyen argumentos sólidos que tienen un autoridad aparentemente más fuerte. Esto abre preguntas éticas para el oficio.

Ben Fry, diseñador gráfico e informático, desarrolla una metodología en Computational Information Desig, su tesis doctoral, en la que plantea 7 pasos para construir la visualización:

  1. Hacking - Informática
    1. Adquisición, qué es y cómo se obtiene el dato. El dato es el reflejo de un instrumento, tiene relación con la herramienta con que se extrae. Ocurrirá constantemente que obtener los datos no es fácil, no estan completamente disponibles, por lo que hay que utilizar otros métodos, a la fuerza, para sacarlos.
    2. Análisis de los datos obtenidos.
  2. Matemáticas - Estadística
    1. Filtrado, en el que se saca lo no relevante, lo que sobra.
    2. Minería, cuando existe demasiada información hay que destacar lo relevante de ella, hallar el oro, se interroga al cuerpo de datos.
  3. Diseño Gráfico, en esta etapa comienza el cambio de lo cuantitativo a lo cualitativo, es el salto que construye la visualización.
    1. Representación, se escoge una gramática y se establecen criterios para darle forma a los datos.
    2. Refinación, ajustes.
    3. Interacción, si es la visualización vive en el soporte digital, ya no es un poster, una lámina, se transforma en herramienta de descubrimiento para el que la esta usando.
  1. Inteligencia Poética
    Abstracción semántica y espacial,
  2. Inteligencia Técnica
    Abstracción sistemática, esta más ligada al diseño de software y a las matemáticas, matemáticas como lenguaje abstracto.
  3. Inteligencia Retórica
    Abstracción simbólica, esta es la pregunta a la que se dirigen los datos, la visualización.
  4. Inteligencia Dialéctica
    Abstracción ontológica, refinación entre vacíos, "verdad" entre las personas.

La visualización tiene tanto del lado divergente como convergente, es un pregunta que vive en los dos espacios, el de los datos "duros" y el de lo que se hace con eso, lo plástico.

Hitos en la historia de la visualización de datos

A continuación se muestran hitos en la historia de la visualización de datos, que provocan un giro en la percepción del mundo, a una medida abstracta de el. Vivimos en una época donde se ha comprimido el espacio tiempo.

La grilla de Ptolomeo; Mercator

Se realiza una primera imagen del mundo, a partir de una grilla que vincula coordenadas. Establece una coreografía; donde el dibujo es sensible de los terrenos, del espacio, donde se privilegian los datos. Los datos se van tejiendo en una notación espacial. La coreografía es distinta de la cartografía; que es una imagen del total, tiene inferencias. Leyes sistemáticas.

La grilla Ptolomeica deformada, es la primera vez que se tienen una imagen de un total; principio de la visualización de datos. Tiene una racionalización cartesiana; una persona hace el trabajo mental para volver a configurarlo. Todas las ideas son formas de control.

Minard Map por Charles Joseph Minard

En el contexto de guerras napoleónicas, campañas en las que les fue mal. Minard estableció una potente capacidad de síntesis y resolución de muchos datos como: mapa cartográfico, dirección del ejército, los hitos, gráfico de temperaturas, tropas, entre otros. Es un gran referente de un hito gráfico.

Minard Map

Mapa de muertes a causa del cólera por John Snow

El contexto es un brote de muertes y se registran por día, se encontraban todos los datos, pero éstos estaban ordenados cronológicamente. Snow los ordena por espacio, y cada raya es una muerte en la dirección señalada. Entonces se descubre que las muertes se organizaban en torno a la bomba de agua. A partir de otra forma de ver la información, se logra encontrar la causa de las cóleras. O sea, la visualización de información es un instrumento para conocer la realidad.

Map of Cholera

Rerefencias

Ejemplos de autores y sus trabajos

Gramáticas

A continuación se presentan las distintas formas existentes en las que se pueden presentar los datos. En ellas se distingue la familia o categoría de la que proviene, sus dimensiones y sus usos.

Ejemplos y familias de gramáticas se pueden encontrar en A Periodic Table of Visualization Methods.

  1. Análisis y visualización de palabras
  2. Cartografía - Data Maps
  3. Chernoff Faces
  4. Diagramas de Arco
  5. Star Plot
  6. Tree Maps
  7. Árbol radial e hiperbólico


Preguntas para Visualizar

¿Qué proyección tienen las distintas realidades?

Se presenta el universo total de alumnos con respecto a los tipos de establecimientos educacionales secundarios y su respectivo proceso desde que se inscriben para dar la Prueba de Selección Universitaria (PSU), aquellos que efectivamente la rinden, los que postulan (mínimo 450 puntos promedio entre las pruebas de Lenguaje y Comunicación y Matemáticas), los seleccionados (acto por medio del cual un postulante queda en condiciones de matricularse, en razón de sus puntajes), hasta aquellos que finalmente quedan matriculados en distintas Universidades del Consejo de Rectores.

Fuentes

¿Cual es la efectividad de los beneficios estudiantiles?

A partir del total de los alumnos de educación superior en universidades tradicionales, privadas, centros de formación técnica e institutos profesionales, se pretender mostrar los alumnos beneficiados, identificando las distintas becas y créditos, y cómo éstos últimos van evolucionando respecto a la deuda de las personas, para luego comprobar la efectividad de los beneficios estudiantiles.

Fuentes

¿Cual es la relación entre el costo de la carrera y el arancel de referencia?

¿Podemos hablar de movilidad social en educación?

Proyectos

  1. Begoña Vargas: Modelo Visual Gobierno Estudiantil (Alumnos Begoña Vargas)
  2. Coordenadas Paralelas, Lineales y Radiales (Alumnos Joaquín Martel)
  3. Jaime Perez: Modelos Visuales de Gobierno Estudiantil (Alumnos Jaime Pérez Moena)
  4. Karen Carrera: Modelo Visual de Gobierno Estudiantil (Alumnos Karen Carrera)
  5. Macarena Álamos: Modelos Visuales de Gobierno Estudiantil (Alumnos Macarena Álamos R)
  6. Modelos Visuales de Gobierno Estudiantil (Alumnos Macarena Álamos R, Antonia Góngora, Begoña Vargas, Karen Carrera, Andrea Cifuentes, Jaime Pérez Moena, Joaquín Martel, Diego Reyes, Valeria Cerón)
  7. Modelos de Gobierno Estudiantil: Joaquín Martel (Alumnos Joaquín Martel)
  8. Valeria Cerón: Proyecto GD 2011 (Alumnos Valeria Cerón)
  9. Valeria Cerón: Visualización Modelos de Gobierno Estudiantil (Alumnos Valeria Cerón)
  10. ¿Cómo han variado los resultados PSU en los últimos cinco años? (Alumnos Jaime Pérez Moena)


Láminas Proyecto Final

Bibliografía