Imagen Digital 2010

De Casiopea




Asignatura(s)Lenguaje Computacional 2
Año2010
Tipo de CursoRamo Lectivo
ProfesoresJorge Barahona
Profesor(es) Ayudante(s)Dámaris Sepúlveda
Carreras RelacionadasDiseño Gráfico


Clases

Clase 01 - Presentación de los Contenidos y Bits v/s Vectores

Si bien los contenidos a tratar durante el trimestre son pocos, tienen una gran densidad.

Contenidos

  1. Vectores v/s Bits
  2. Imagen digital preprensa e Imagen digital para redes
  3. Tratamiento de la Imagen Digital desde la escánica.
  4. Sistemas y nomenclaturas generales de medición y modificación.
  5. Modificación de la Imagen digital.
  6. Aplicación de conceptos de foto mecánicos tradicionales.
  7. Aplicación de conceptos fotográficos básicos (profundidad de campo, enfoques, sensibilidad de película, diafragma, velocidad).
  8. Fotografía digital v/s análoga.
  9. Conexión con otros programas.

Vectores

Nodo e intensidad. En base a un trazo de un punto a otro, que finalmente se cierra. Compuesto de filete|borde y relleno) Como es un vector, esta imagen tiene un algoritmo matemático que resuelve la imagen, no se daña (no pierde características de filete y relleno) y es totalmente escalable.

Bits

Están constituidas por una retícula cartesiana x y, en donde cada cuadro tiene una dirección en la pantalla.

Foto mecánica

El Principio de Foto mecánica (10 años atrás) trabaja separando los colores de manera manual. Nuestro Oficio está altamente afectado por la Tecnología, en donde el principal cambio tecnológico fue la fotografía, y luego la foto mecánica.

Dirección de Arte en AssetChile

Asset Chile es un banco de inversiones. En la Dirección de Arte de la Empresa, la fotografía fue tratada como delicadeza. En la intimidad del banco, las fotos expresan confianza, a través de los ojos. Estas fotografías en blanco y negro de los socios, ellos miran a la cámara y se encuentran en un primer plano, y el resto se encuentra difuso. Lo importante acá es el concepto para entender el argumento de la venta del trabajo tratada en la delicadeza de la fotografía.

Imágenes Mapa de Bits

Nombre técnico de la fotografía. Está compuesto de miles de cuadros pequeños, llamados bits. Mapa Cartesiano x y Cada cuadro tiene una dirección específica, y no son divisibles por sí mismos.

Como características Tiene sus dimensiones expresadas en pixeles (está directamente relacionado con las pantallas, y, a su vez, con la resolución). Afectado por diversos factores, se traduce a una imagen con un peso específico, expresado en kb.

(ancho x alto) x resolución = genera una imagen en kb | mb

La resolución está ligada a la cantidad de información.

                   img 072 dpi. | Baja resolución | Pantalla
                   img 150 dpi. | Diario o Revista
                   img 300 dpi. | Folletos

La imagen está directamente relacionada con el soporte. La cantidad de colores también es relevante.

Modo

Manera de cómo está compuesta la luz en la fotografía (luz como profundidad de la fotografía). El Modo es la condicionante del color o la luz en la imagen.

1 bit trabaja con blanco y negro, en donde el gris está constituido según la cantidad de negro y blanco. Con 8 bits de profundidad, genera mucho más de 99 colores intermedios. Y así, a mayor cantidad de bits, más colores voy obteniendo.

Profundidad de color Colores posibles Comentarios
1 bit por pixel 2 Arte Lineal (B&N). Modo Mapa de Bits
4 bits por pixel 16 Modo Escala de Grises
8 bits por pixel 256 Modo Escala de Grises. Modo Color Indexado. Cantidad estándar de colores que admiten los formatos GIF y PNG-8, así como muchas aplicaciones multimedia.
16 bits por pixel 65.536 High Color
24 bits por pixel 16.777.216 True Color. Modo RGB 8 bits por canal (8x3=24). Modo Lab 8 bits por canal
32 bits por pixel 4.294.967.296 Modo CMYK

Fuente http://www.desarrolloweb.com/articulos/1779.php

Manera de Cómo se Divide la Luz

RGB (colores básicos) Rojo, Verde y Azul. Colores aditivos que tienden al blanco en su sumatoria. CMYK (colores de pigmento) Cian, Magenta, Amarillo y Negro. offset. tintas translúcidas.

RGB tiene un comportamiento que sirve sólo para las pantallas.

Que modo tiene la imagen, está relacionado con el destino de ella.

En una traducción del RGB al CMYK, la imagen se vuelve más oscura. Es ideal, si el destino de la imagen es el papel, comenzar a trabajar directamente en CMYK.

Canales

Separación de colores que tiene la fotografía ("cuantas planchas voy a quemar"). Origen desde las acuarelas. La cercanía con nuestro oficio en el origen es relevante para entender del punto de vista conceptual lo que vemos.

Los canales me permiten manipular una fotografía en su separación de colores, dando una gran libertad en el trato de ella. Debemos tener cuidado cuando existe mucha concentración de color, pues se traducirá en "más mancha". Por ello, acudo al trato de la imagen por medio de los canales.

Si agrego más negro digitalmente, literalmente le agrego más tinta negra.


Escala de Grises

Imágenes que tienen un valor en grises. Permiten trabajar

                                bitmap | grayscale | duotone


Extensión CMYK

.jpg : es el vínculo que encadena la fotografía en otro programa .jpg, .gif, .png : acople de capas que no se puede revertir

.TIFF: extensión que resguarda todos los elementos que modificamos en la fotografía.


Extensión RGB

(Para pantallas). Clásicas y típicas de redes y multimedia. BMP GIF PNG

Resumen

  1. Tamaño (pixeles v/s centímetros)
  2. Resolución (pixels per inch)
  3. Modo (bitmap, escala de grises, RGB, Cuatricomía, Duo-Tri-Cuatritono)
  4. Extensión (TIFF, EPS, JPG, GIF, RAW) (este último, el que rescata más información digital.

Notas

   * Preprensa: Todo el trabajo antes de imprimir en la imprenta. 
   * Las infografías en los diarios están hechas en mapa de bits y en vectores.
   * La fotografía digital y la análoga se comportan como dos mundos complementarios, y no antagónicos.
   * La fotografía es un cúmulo de información.
   * dpi: dots per inch. puntos por pulgada cuadrada
   * Menos dpi, es arriesgarse a que quede con una resolución muy pobre. 
   * El papel resuelve más resolución que como aparece una foto en la pantalla

Alumno Contribuyente Jaime Pérez Moena

Clase 02 - Imágenes Vectoriales

Esta clase en general profundiza las características de las imágenes vectoriales, su uso y la interacción con las imágenes mapa de bits.

Características de las Imágenes Vectoriales

Características Principales

Fondo: Es la tinta que contienen las imágenes

Línea o Filete: Es la línea que delimita el fondo de la imagen con color y espesor, también recibe calidad de perímetro si no queremos que se vea, aplicando espesor con valor cero.

Posición: Es la ubicación de la figura dentro del lienzo, y se expresa de forma cartesiana (x,y)

Estan compuestas de fórmulas matemáticas y de figuras geométricas

Escalables; es posible distorsionar y deformar libremente sin perder su resolución.

Características Técnicas

Líneas, figuras y curvas

Textos: En la tipografía post script mantiene la información de las tipografías en la memoria de la impresora laser, la que lee el lenguaje post script y no la tipografíaa en si, permitiendo imprimir exactamente las tipografías como se ven en el documento digital.

Con la herramienta de illustrator “create outlines” es posible transformar tipografías a vectores, y así deformarlas y distorsionarlas. Impresión escalable

Plotters de corte: El troquel, cuando gráficamente aparece una línea larga seguida de un punto y asi consecutivamente el plotter realiza una hendidura en el papel resultando una especie de canaleta (no es un semicorte, si no una hendidura). En el caso de realizar una línea segmentada el plotter hace un corte segmentado, por ejemplo el utilizado para las lenguetas que están listas para rasgar.

Animaciones: En ocaciones se introducen imágenes en mapa de bits pero normalmente son utilizadas imágenes vectoriales y no usan degradaciones si no que colores puros normalmente. Estos dibujos deben estar terminados (las líneas de contorno deben estar cerradas, unidas) para así poder pintarlos con el tacho de pintura.

Infografía

Grafías que cuentan una historia mezclando imágenes vectoriales y mapa de bits, buscan “decir algo”, dejar explicitado con texto e imágenes un proceso o historia. Universalizan un mensaje, de manera que sean entendibles globalmente, acercándose así a la señalética. Otra característica es su arraigo a las analogías, como por ejemplo la de los circuitos eléctricos (expresada en el mapa del metro de Londres, donde las líneas rectas del mapa no significa que sea real es un “mas o menos”, las distancias no son exactas pero se comprenden así).


Encargo

Realizar una infografía de un proceso, algo que cuente una historia en una sola toma, siendo solventes en cuanto a información. Teniendo en cuenta que debe presentar un principio, desenlace y un final enriquecidos estos puntos agregando por ejemplo el contexto histórico, precios, estadísticas, usos, tiempo dependiendo del caso a representar. Por ejemplo de una de las travesías realizadas por el taller; o cómo hacer un disco de musica, etc.

Para esto es necesario:

  1. Buscar la historia de un proceso
  2. Construir un history telling
  3. Componer el cómo presentar la información de una sola vez, de manera fija, no dinámica.
  4. Subir la infografía a la Wiki Casiopea con fecha tope el día lunes 05 a las 12:00 am
  5. Mezclar imágenes en mapa de bits y vectoriales, tomando prestados elementos de la ilustración, señalética, etc.

--Celeste mardones 23:36 31 ago 2010 (UTC)

Clase 03 - Imágenes Para Web

En esta clase corregimos las infografías entregadas la sesión anterior y posterior a esto, revisamos de cómo es que funcionan las imágenes de mapa de bits para prensa y para web.

De la Corrección de Infografías

Story Telling

Lo que faltó, en general, fue una propuesta rica al componer la Infografía, ya que esta no corresponde solamente al relato de una historia lineal, si no que como la de Marcelo Velásquez, se compone de diversos recursos y detalles que complementan la lectura de un proceso.

Características esenciales de una Infografía

a. Que sea comprendida por todos.

b. Que NO sea exclusivamente lineal.

c. Que Incluya recursos extras.

d. Que posea intencionalidad gráfica.

e. Que se diferencie de un instructivo.

f. Que se base en una analogía.

(Revisar en [1] algunos ejemplos de Infografías)

Dato: Revisar Trabajo de Titulo de la Alumna Damaris Sepúlveda en Blog de la Escuela.

De las imágenes de Mapas de Bits

La imagen en formato Tiff.

Este formato es nativo de CMYK, y permite trabajar la imagen para ser impresa. La calidad de esta imagen suele ser alta (300 dpi), por lo que cuando trabajo las imágenes con este formato quiere decir que necesito mucha información, información existente tanto en los tonos, bordes y nitidez de las imágenes

La imagen para web

Cuando quiero llevar esta imagen a la pantalla debo bajarle la resolución (72 dpi), donde disminuye la dimensión de pixeles y el peso del archivo. El documento ahora tiene formato RGB y lo exporto para la “web y dispositivos”, teniendo cuidado de que al hacer esto no surjan deformaciones en la pantalla.

Al guardar una imagen para la web se debe estar atento al tiempo de transferencia que esta tendrá, tiempo que está relacionado con el peso de este archivo.

Modificaciones del ajuste Preestablecido

Las opciones de optimizado y progresivo se diferencian en que el segundo descarga la imagen “línea por medio”, es decir, dividida una imagen en filas de pixeles, son las filas impares las que primero se visualizan, método que responde a la importancia de dar la sensación de que están sucediendo cosas para que el usuario no abandone el sitio.

¿Cómo se Comporta el Formato Fire Works?

Aquí, todas las imágenes se consideran para Internet. Al igual que en PhotoShop, al momento de exportar una imagen para web me ofrece dos vistas, pero cuando paso con el cursor sobre los colores de las imágenes FW las lee en RGB

Información de los Metadatos

Toda Imagen digital trae consigo una serie de datos “detrás de la imagen” donde se especifica información técnica como el tamaño del archivo, la hora, el lugar donde fue sacada, entre otros (revisar en [2] metadatos de imágenes)

--Maca.alamos 03:13 7 jul 2010 (UTC)


Clase 4 - Herramienta Capas

Herramienta Capas

Uso de Capas

Para la utilización de la Herramienta Capa, se requiere en cada uno la capacidad de distribuir la información y contenidos de una imagen o proyecto que se quiera realizar. El uso de las capas, permite la organización de contenidos dentro del archivo. Las capas conforman un total, que luego permiten la visualización de una sóla imagen.
Gran parte de los Software que utilizamos tienen esta herramienta como: InDesing, Illustrator, Photoshop, Flash, Fireworks, AutoCad, etc.

Capas en Illustrator

Objetivo: Ordenar
Illustrator tiene un concepto de trabajo que separa el tamaño del documento con el tamaño de impresión. Este último está relacionado con el tamaño de impresora que este conectada al computador.

Como vemos en la imagen a la izquierda, en la pantalla tenemos la Mesa de Trabajo, que es el totalidad del espacio en pantalla, ahí podemos modificar el lienzo y ajustar el área de impresión según las necesidades del trabajo, utilizando la herramienta de Mesa de Trabajo que se encuentra destacada.

Las capas tienen la función de organizar la información de una imagen.
Cuando conformamos una capa tenemos distintas opciones para organizarlas, en primer lugar otogarles un Nombre, definir líneas perimetrales, guías, podemos hacer que sean una plantilla, otorgarles opacidad y definir opciones como; si queremos que se muestre o no, que se imprima o no, y además, bloquearlas y desbloquearlas.
Ejemplo:
Al querer reproducir la infografía del Mapa del Metro de Londres, tendríamos que formar varias capas en donde organizamos los distintos contenidos del Mapa, definidas por sus nombre como: Nombres de Estaciones, Líneas Centrales, Líneas X, Texto General, Símbolos.

Capas en Photoshop

Objetivo: Ordenar y Modificar

Color de Fondo y Color de Frente

El uso de las capas resulta fundamental para modificar la imagen completa.
Como vemos en la imagen de la izquierda, en Photoshop, se trabaja con "Color de Frente" y "Color de Fondo". Por ejemplo, si abro una fotografía y escribo en ella, lo hago en el "Color de Frente", cuando borro parte de la imagen emerge el "Color de Fondo".

Cuando borro, estoy sacando información de la imagen, por lo tanto pierdo información
Cuando agrego tinta, estoy colocando información en la imagen, por lo tanto gano.


===Capas en Fireworks=== Las capas en Fireworks funcionan al igual que en Photoshop.

Extensiones y Capas

1. Extensión GIF no se puede trabajar en capas
2. Extensión JPG si permite trabajar en capas, sin embargo no las guarda, ya que es un formato de pérdida.
3. Extensión TIFF si permite trabajar en capas y además, guarda toda la información
4. No puedo trabajar de JPG a TIFF, sin embargo si puedo trabajar de TIFF a JPG, esto debido a la cantidad de información.
5. La extensión TIFF es transversal, no así el archivo nativo de un programa. Por ejemplo, si realizamos un archivo en Illustrator CS5, el archivo nativo no lo podremos ver en Illustrator CS3, sin embargo, si generamos un archivo TIFF, si lo podremos ver.

--Karen.carrera 15:17 30 jul 2010 (UTC)

Clase 05


INTERFACES

Introducción al tema

Definición

"Interfaz es la conexión entre dos ordenadores o máquinas de cualquier tipo dando una comunicación entre ambas(1)."


Además, la palabra interfaz se utiliza en distintos contextos:


1. "Interfaz como instrumento: desde esta perspectiva la interfaz es una "prótesis" o "extensión" (McLuhan) de nuestro cuerpo. El mouse es un instrumento que extiende las funciones de nuestra mano y las lleva a la pantalla bajo forma de cursor. Así, por ejemplo, la pantalla de una computadora es una interfaz entre el usuario y el disco duro de la misma."


2. "Interfaz como superficie: algunos consideran que la interfaz nos trasmite instrucciones ("affordances") que nos informan sobre su uso. La superficie de un objeto (real o virtual) nos habla por medio de sus formas, texturas, colores, etc."


3. "Interfaz como espacio: desde esta perspectiva la interfaz es el lugar de la interacción, el espacio donde se desarrollan los intercambios y sus manualidades."


(1): Según wikipedia.com



Una INTERFAZ es la última capa, la que dialoga directamente con un usuario. Pertenece también a un lenguaje, aquel "que conversa" con el usuario.

El Sistema de Interfaces (formalmente la construcción de un lenguaje), construye una realidad.

Respecto de esta primera aceveración, citamos entre otros a Maturana y Echeverría:

"...A través del lenguaje se construye la realidad..."

Entonces, los diseñadores construímos la realidad.


 DISEÑO - DISEGNARE - DECIDIR - CONSTRUIR EL FUTURO


INTERFAZ = Lenguaje que permite que los sistemas u objetos conversen o dialoguen con su audiencia.


Una interfaz es tan importante que el sitio web de Google es una interfaz. Una interfaz logra ser, hoy en día por su importancia, el producto mismo


Ejemplos:


  • Ejemplo 1:


El fuego tiene una interfaz especial, pues su visualización y lo que sentimos de él, además de su luz, es su calor. Nosotros tenemos una experiencia directa con el fuego, pues al sentir el calor, podemos comportarnos de una u otra forma respecto de cómo recibimos su impacto. Para este caso, es el ser humano quien tiene los sensores).


  • Ejemplo 2:


El sistema de juego de la consola WII de Nintendo tiene otra interfaz peculiar (y radicalmente distinta a la gran mayoría), pues es ésta quein ahora tiene los sensores y no los seres humanos que la manejamos e interactuamos con ella. Pues cada juego se comporta según el movimiento que nosotros ejecutemos y así la consola es quien reacciona ante éstos.


De esta manera, podemos distinguir varias formas de Interfaces:


1.-Interfaces auditivas.


2.-Interfaces táctiles.


3.-Interfaces gestuales.


Tipos de Interfaces

Interfaces auditivas

La podemos apreciar cuando hacemos el ejercicio de accionar o apretar el botón de un objeto o sistema. Los seres humanos necesitamos de un "testigo", algo así como una prueba que certifique de alguna forma que lo que estamos accionando o presionando (en este caso un botón), se realice efectivamente.

Esta manera de comprobar que lo que hacemos efectivamente se está realizando viene de las primeras máquinas, que eran diseñadas desde la mecánica y sus tecnologías eran artefactos que al ser accionados emitían algún tipo de sonido notorio y particular que corespondía al movimiento de la pieza accionada.

Por ejemplo, una máquina de escribir, que al tipear, el sonido de las teclas sobre el papel tiene un peculiar distingo sonoro hasta el día de hoy reconocible (el famoso click!).


En nuestros días podemos observar que las tecnologías se dirigen cada vez con más fuerza hacia los objetos táctiles o de interfaces digitales táctiles. Tanto así que nos encontramos con todo tipo de aparatos cotidianos que cuentan con esta tecnología, por ejemplo los iphones, los ipods y toda clase de celulares o libros electr{onicos con interfaces digitales táctiles.


Para estos casos el famoso click! se reemplaza por dos opciones:

- Para el caso de ciertas aplicaciones, se mantiene el sonido y se graba en el aparato una reproducción exacta de cómo sonaría tal aplicación (el click! original se reproducería tal cual como un clck! fidedigno). Esto pasa porque necesitamos a veces de analogías fieles para poder entender tales aplicaciones.


- Para el caso de otras aplicaciones, el sonido es reemplazado por algún cambio visual en la conducta del botón. Podemos verificar que en estas interfaces digitales (como un sitio web), si accionamos un link, éste cambia de color o se agranda (incluso a veces también viene acompañado de sonidos).


Interfaces táctiles

Usualmente este tipo de interfaces vienen acompañados también de la experiencia sonora, es decir se trataría más bien de "interfaces táctiles auditivas".

Un ejemplo de este caso sería comparar un celular común con un iphone de última generación:



celular común
iphone touch


celular común:

- Áptico. - Táctil. - Interfaz táctil. - Diseñado para hablar. - No es necesario mirarlo para poder manipularlo. - Se reconoce sólo con los dedos. - Es a la medida de la mano. - Tiene un peso pensado para sentirlo, por ejemplo, en los bolsillos.


iphone touch:

- óptico. - Visual- táctil. - Interfaz visual, táctil. - Diseñado para jugar y entretenerse...y para hablar. - Hay que necesariamente mirarlo para manipularlo. - Se reconoce sólo al mirarlo. - Es liviano, lo que lo hace sumamente "perdible".



Interfaces gestuales

Comparemos el hecho de manejar un automovil real, con el de manejar un automóvil ficticio de un videojuego de la consola WII de Nintendo:


Experiencia de manejar un auto real
Manejando en la consola Nintendo WII



  • Experiencia real:


- El auto es la interfaz. Pese a que somos nosotros quienes le dámos las órdenes para manejarlo, somos nosotros mismo quienes respondemos a sus respuestas. El diálogo viene desde el auto hacia nosotros.


  • Nintendo WII:

- En este caso, existe un cambio radical del paradigma en el diálogo entre usuario y máquina. La WII, es una interfaz gestual que responde fente a los estímulos que nosotros le damos. Es decir el diálogo con la máquina es desde nosotros hacia ella.


Algunas características

Diseño de objetos

En la industria de objetos o del diseño industrial, las interfaces suelen ser más "duras" o "feas" (estéticamente hablando, pues sabemos la belleza es subjetiva y un objeto puede incorporar un tipo de belleza en sí mismo).

Esto se debe a que el punto de enfoque de esta industria es a partir del objeto mismo, desde su funcionalidad, la eficacia con que puede ejecutar lo que debe ejecutar (de la mejor manera posible), para que la experiencia del usuario sea positiva. Esta experiencia es más mecánica que visual.


Diseño gráfico

En cambio, desde la industria digital, las interfaces se crean para aportar una experiencia más amable en su estética de presentación. Es decir para que el diálogo sea más "amable" con el usuario y más eficaz desde su usabilidad.

Para este caso, la experiencia es de carácter visual.


  • Moraleja: En ambos casos el concepto es el mismo, lograr que el usuario tenga una experiencia positiva.



ICONOGRAFÍA

Introducción al tema

Definiciones
  • Iconografía: "La iconografía (palabra compuesta de icono y grafe -descripción-) es la descripción de las temáticas de las imágenes y también el tratado o colección de éstas."(1)


  • Ícono: "Un icono o ícono (del griego εἰκών, eikon: ‘imagen’) es una imagen, cuadro o representación; es un signo o símbolo que sustituye al objeto mediante su significación, representación o por analogía, como en la semiótica.!"


"En informática, un icono es un pequeño gráfico en pantalla que identifica y representa a algún objeto (programa, comando, documento o archivo), usualmente con algún simbolismo gráfico para establecer una asociación.(2)"


(1)-(2): Definiciones obtenidas de wikipedia.com


La iconografía es una parte de la interfaz.

Para construirla, siempre se parte de algo que ya existe. Esto es para poder preservar el lenguaje ya establecido.


Ejemplos

Ejemplo 1

El lenguaje de un teclado para manipular los aparatos que permitían grabar o reproducir sonidos, como podemos apreciar enla figura a continuación:


Iconos play.png


El botón PLAY, se simboliza apuntando hacia la derecha. Esto es a que en nuestra culturra occidental, la lectura se realiza de izquierda a derecha.

Mientras que el botón REC (grabar), se simboliza con el color rojo. Esto quiere decir "precaución, atención, tener cuidado...".


Ejemplo 2

Otra analogía o ejemplo es observando el ícono de "prender-apagar", como en la figura:


Apagar.png


Este ícono viene de la forma de las perillas de volumen de las radios antiguas, que recordemos eran de la siguiente forma:


Apagar2.png


Apuntes

  • El ser humano necesita que la máquina dialogue con él. Este diálogo es tanto visual como sonoro.
  • La relación se da por el sonido y la visualización (del botón, icono o acción a ejecutarse), que aparece o cambia cuando se ejecuta tal acción.
  • Esta relación se podía representar como:


 EJECUTAR-ABRIR-----CLICK!----O----DESLIZAR HACIA LA DERECHA
 TERMINAR-CERRAR----CLICK!-CLICK!-----O O------DESLIZAR HACIA LA IZQUIERDA


 MORALEJA: Los íconos y las interfaces siempre buscan una "analogía" de algo existente.


  • La realización de íconos tiene que ver con: de qué manera se puede comunicar y visualizar la acción que se va a ejecutar.
  • Los íconos son un lenguaje que traducen los verbos. Es decir, las acciones que se realizan en una interfaz.
  • La iconografía responde también a un asunto de estética, pues deben de visualizarse de forma clara y precisa. Para esto, los íconos deben pertenecer a una misma clase de tipología o construcción estética(familia iconográfica).


CONCLUSIONES

  • Una INTERFAZ recrea un lenguaje, un diálogo entre la máquina u objeto y el ser humano.
  • La INTERFAZ necesita de analogías para que el usuario pueda reconocer lo que la máquina u objeto quiera decir.
  • Estas analogías se recrean mediante la ICONOGRAFÍA.
  • Los ÍCONOS son dibujos o esquemas pequeños que simulan virtualmente lo que alguna vez fue mecánico o tangible. Por esto es que el usuario puede reconocer en ellos las acciones y se logra la interacción.
  • La INTERFAZ, entonces, mediante todos los recursos gráficos, como los ÍCONOS, logran recrear una realidad específica, con el fin de dialogar con el usuario cuyo fin último es otorgar una bella experiencia.
  • Cada INTERFAZ se diseña para cada target o público específico.
  • También existen interfaces diseñadas para todo tipo de público. Mediante un lenguaje universal, cualquier persona en el planeta podría interactuar sin problemas. Incluso si no entendiese el idioma.


ENCARGO

  • Diseñar una familia de íconos para un software cuyo objetivo es hacer cartas gantt y gestión de proyectos. Tomar como referencia Microsoft Proyects.

Para esto, trabajar el lenguaje, la estética, la simpleza y la visualización, tanto como la capacidad de recrear una buena analogía.

  • Se entrega en la wiki:

1)Una carpeta con todos los íconos con extensión (.PNG) incorporados en ella. Esta carpeta debe estar comprimida en (ZIP).


2)Una galería de imágenes con los íconos con extensión (.jpeg).

  • Fecha de entrega: hasta el mediodía del lunes 27 de julio.


--Mvelasquez 15:03 27 jul 2010 (UTC)


Clase 6

El diseño de iconos tiene que ver con construcción de lenguajes La iconografia reune 4 características:

   · Es un sistema
   · Trabaja con convenciones
   · Transmite Información

El lenguaje es una construcción de significados. El ojo reconoce rápidamente el ruido, y ese ruido puede llenar de significados lo que se esta presentando, por ejemplo una foto de dos personas una blanca y una negra, traerá como consecuencias una interpretación racial, antes que cualquier otra cosa que se quería mostrar. Una de las cosas importantes del lenguaje es que requiere interpretación.

la iconografía construye un lenguaje con ciertas características, entrega una interpretación, comunica y nombra las cosas por si solas. Este lenguaje tiene que ser parte de un sistema si no construye un sistema...no sirve.

Antes de diseñar, construyo una referencia con un dibujo a mano alzada, un croquis, para poder construir una analogía, primero tenemos que pensarlo. Ademas para que el icono sea parte de una familia de iconos, debe tomar en cuenta ciertas convenciones, tener cosas en común, por ejemplo un trazo en común o todos inscritos en un cuadrado igual, pero todas las analogías son en base a cosas que ya conozco, cosas que ya he visto.

Escala Existe un juego que tiene que ver con las proporciones, todo queda dentro de un mismo contenedor, y bajo la misma ley, por lo que se comprenden como parte de un todo.

la analogía no hace cambiar la expresión del dibujo la analogía debe ser fundamental

Para hacer iconos, mas que la factoría del dibujo tiene que haber detrás una capacidad para construir lenguaje

Elementos importantes son el uso del color y el color de fondo (cuidar que no vibren,etc.), los degradados, cuidar las sutilezas como que va a delante y que va detrás Recordar siempre que la iconografía es una parte de la interfaz.

¿que hace que una familia iconografica sea mejor que otra? Camino de efectividada solvente, respeto absoluto de la familia, eso refleja un sistema detras que construye un lenguaje específico. No solo construye un set de ordenes, sino que tiene que ver con una cosa emocional, convertir algo que no es agradable (como un software) en otra cosa mas amigable. Una interfaz puede lograr una desintermediacion de las tareas, que el trabajo que hace una persona sea mas rapido, solvente y efectivo (porque eliges este software y no otro), la simplesa todo esto tiene que estar bien ejecutado (factoria) de lo contrario el sistema pierde credibilidad y puede destruirlo, puede ser incomprensible.

Reflexión Anterior a hacer el icono, pensar el gesto de las cosas, la posicion del observador, la ley generada por el argumento, y como se construye esta, generá analogías, el argumento hace posible la construcción de la analogía. La analogía depende siempre de la simplesa para poder comunicarlo


Si construyo interfaces que no solo hagan la tarea mas rápida sino también mas humana, diseño para habilidad de la persona, las interfaces pueden hacer que esa tarea (odiosa) sea mas grata y a traves de eso hacerlo mas rapido, la predisposicion positiva que puede generar una interfaz bien diseñada.

Resumen: no caer en la confusion de que inerfaz es igual a icono, el icono es parte de la interfaz de usuario la iconografia es un lenguaje y por eso tiene 4 características: - ser parte de un sistema - establecer convenciones visuales - tiene que tener significado - entrega interpretaciones

factores generales: tiene que comunicar, ser capaz de nombrar y permitir interacción y recordar que cuando se genera lenguaje estamos construyendo realidad (un circulo con corbata = señor)

--Alejandrasv 03:26 28 jul 2010 (UTC)

Clase 7

Lo que estamos viendo en el Taller de Construcción lo traemos a Lenguaje Computacional.


Siempre que se plantee un proyecto primero hay que plantearse su problema, no el producto. Hay que pensar en que es lo que quiere resolver mi proyecto antes del como. Conocer el qué de mi proyecto es fundamental, cuando este se define se hace infinitamente más sencillo hacer un proyecto. Después del qué resuelvo el cómo y el quienes. Para enclarecer todo esto es fundamental hacer un buen brief.


Mental Models (Modelos Mentales) de Indi Young habla de lo que piensa una persona cuando esta realizando distintas acciones para saber así lo que la persona quiere lograr con la acción. Por ejemplo en qué piensa una persona cuando se esta sirviendo un baso de agua, piensa en el vaso o en las moléculas del agua, la persona piensa simplemente en que tiene sed.


En la exposición El Greco to Picasso en el Guggenhim de Nueva York en el año 2007 se ven las conecciones entre las obras de los artistas, se encuentra los puntos de cohincidencias, lo que muestra como lo que alguna vez estuvo vuelve.

Así mismo Steve Jobs, en su discurso en Standford dice que uno en la vida hace cosas que no se las plantea como sumatoria, la vida tiene un resumen de puntos que uno capta después.


Hay que ir al objetivo, preguntar que problemáticas tiene el usuario. Las respuestas tienen que ser certeras para lograr obtener objetivos y metas claros. El por qué, para qué y para quiénes tiene que estar definido.

--Antonia.gongora 13:33 10 ago 2010 (UTC)


Clase 8

Qué es una interfaz?

tomamos como ejemplo una chaqueta. La interfaz de una chaqueta tiene un ruido. Al ponerse una chaqueta, ésta emite un ruido al cerrarla.

En el caso de un reloj, éste tiene una interfaz en la correa, en todo. Todo en sí es una interfaz. Todos los objetos tienen una interfaz. Tienen una manera de decirnos algo.

Las luces de algo por ejemplo, también son interfacez. Hay doble interfaz. Cuándo? cuando algo no se entiende con sólo una interfaz. En el caso de un error en algo, y se enciende una luz roja, esa es otra interfaz. Cuando las interfacez se transforman en el producto. Qué es un Ipod? Es interfaz pura.

La interfaz es la manera de cómo el sistema conversa conmigo. Las interfaces tienen muchas condicionantes.

Google también tiene interfaz. Qué es google? Para qué sirve? Para encontrar. Cómo hicieron con google para hacerlo multicultural? La clave está en el verbo.

La interfaz está directamente relacionada al cumplimiento de las aspiraciones que uno tiene. En google la promesa es que uno va a encontrar rápidamente lo que está buscando.

James Garrett habla de la Arquitectura de la Información. Él habla del rol fundamental que cumplen las interfacez y las deriva de una manera singular.

En el caso de las interfacez digitales Garrett dice que en el caso de la más próxima que vemos, la "tela de la cebolla" es la capa que conversa con el usuario. Pero antes de llegar a esa capa que conversa con uno, tenemos que pasar por otras cosas antes. Y para esto es clave la organización de los contenidos. Sino, se eliminan requisitos fundamentales, como la distribución de los contenidos.

Las interfacez no son un problema estético, sino de comunicación.

Garrett habla sobre lo que hay entre la etapa de la concepción y la abstracción.

¿Qué pasa al usar un sistema y éste no funciona como se espera? Uno necesita eficiencia.

Acrobat002.jpg


Garrett dice que entre abstracción y concepción está el diseño visual, lo que uno ve, pero anterior a él deben especificarse la información del diseño, su arquitectura, su interacción, las especificaciones de los requerimientos, y los objetivos para cumplir las necesidades de los usuarios.

La interfaz de Google es una patente registrada. El diseño de su sitio está patentado.

Garrett dice que para poder construir experiencia, ésta está construida sobre la base de las interfaces. Una buena interfaz es producto de un buen pensamiento sobre la base de la experiencia.

Lo primero a preguntarse es qué es lo que la gente necesita. Al diseñar una interfaz se diseña un lenguaje, que tiene un sistema para comunicarse con los usuarios que lo necesitan. La interfaz tiene que ser robusta, sólida y hablar en todos los idiomas.

La interfaz digital, que nosotros conocemos en los medios digitales, como internet, wii, gps, etc. tienen un producto.

La interfaz es la tangibilización del sistema.

Cómo se transforma una experiencia?

Los sistemas requieren de una interfaz apropiada, que construya una experiencia única y apropiada.

Encargo

Buscar interfaces cotidianas. Como los pasamanos por ejemplo. Traer fotos o dibujos. Interfaces interesantes.

--Plopezb 21:37 11 ago 2010 (UTC)

Clase 9

Trabajo en base a un concepto: Oportunidad de mostrar la idea a los usuarios/clientes. De esta manera, el prototipo es el espacio que se da para que el diseñador pueda dar a conocer su proyecto y de que éste puede ser totalmente realizable y factible de llevar a cabo.

Algunos casos de compañía que le dan una viva relevancia a la etapa de "prototipeado" son Frog design e Ideo.

Frog Design

Ideo

Hemos de trabajar conceptos para móbiles, considerando éstos desde el celular más básico hasta el Ipad.


Analizamos a el sistema Morph de la empresa Nokia:

Morph

  • Un storyboard que relata una posible situación futura real.
  • El trabajo que se hace con el punto anterior, creando un video y que éste logre dar la perspectiva al usuario que el proyecto pueda adquirir vida a mediano plazo.


Nokia N97

Asímismo, vemos el como se realizó el Nokia N97, donde la interfaz es lo primordial: Ver en una primera instancia el diseño y el concepto que hay tras él, y luego analizar si éste proyecto es en realidad realizable.

En el presente proyecto de Nokia, se da énfasis en el usuario y la capacidad de personalización e interacción que se mantiene entre él y su móbil. Investigación de las personas y la información que éste le brinda al equipo desarrollador del proyecto.


Utilización del entorno en actividades distintas Thoughtlessacts - Jane Fulton

Nuevas oportunidades en elementos que se utilizan/ven a diario, de manera tal que éstos adquieren un nuevo sentido, modificando nuestro entorno.

Jane Fulton desarrolla su observación estudiando al humano, descubriendo ciertos fenómenos que pasan desapercibidos, pero que al ser levemente modificados son completamente nuevos.

Como diseñadores debemos desarrollar nuestra capacidad de observación: Inventamos el futuro, y para hacerlo de una forma correcta hay que analizar el presente.

Móbiles conceptuales - Feria de Las Vegas

En esta importante feria se muestran algunos móbiles conceptuales que basan su desarrollo en la interfaz y como ésta se vincularía a un posible usuario.


Servicios Públicos - Encargo

  • Hallar un problema en el Servicio Público y solucionarlo con un smartphone.
  • Realizar una lámina y desarrollar un concepto.

Encontrar el problema - Wireframe - Concepto. --Joaquinmartel 23:47 17 ago 2010 (UTC)

Clase 10

De la revisión de los Dispositivos Móviles para Servicios Públicos


  • El tema de este año en LC2 trata principalmente de Imágenes mapa de bit imágenes en vectores; ¿Para qué nos sirve aprender esto?, para desarrollar ideas, son herramientas que si son utilizadas correctamente pueden dar como fruto grandes trabajos
  • A la hora de desarrollar una idea; en este caso el dispositivo móvil; se debe pensar en "hacer una cosa" pero hacerla bien, es decir, no se debe pretender abarcar tanto porque generalmente se pierde el sentido y el objetivo de lo que se quiere llevar a cabo
  • Se deben pensar proyectos acotados para evitar quedarse estancados en la idea
  • El diseñador reflexiona,y cuando lo hace, lo hace con lápiz y papel, porque ahí esta la esencia de la idea
  • Lo que interesa es lo que se muestra a base de la idea que se sueña, los elementos tienen que tener sentido para comunicar la idea
  • Utilizar el negro como fondo cansa la vista porque cuesta mas decodificarla información que se muestra


Del ejercicio de creatividad


Enunciado: "tengo una pelota de golf en un hoyo en la tierra, lo suficientemente profundo como para que mi brazo no alcance a sacarlo"

El ejercicio trata de dar 10 ideas para sacar la pelota en un minuto. Esto sirve para sonsacar la creatividad de alguna manera, al creativo se le ocurren las ideas, siempre existen personas:


· Ideadoras: a las que se le ocurren las ideas, pero por lo general no llegan a concretarlas


· Multiplicadoras: son los que de una idea sacan sus similares, creando los llamados "los hermanitos"


· Realizadoras: son las que concretan lo que las ideadoras piensan


Aurora, James Garret


Adaptive Path,Aurora En este video, Garret muestra una idea, "un sueño de un nuevo navegador" a través de una conversación de dos personas interactuando con esta interfaz. Muestra su idea en una sucesión de fotos haciendo un video mas liviano.

--Begovargas 13:53 26 ago 2010 (UTC)