bitácora

lenguaje computacional

javiera burgos FicaLC1

ÍNDICE

• CLASE 1 Estrategia de diseño

• CLASE 2 Construir comunicación

• CLASE 3 Estudio y comportamiento de usuarios

• CLASE 4 Usabilidad

• CLASE 5 Arquitectura de la información

• CLASE 6 Impresión y color

• CLASE 7 Imagen digital

• CLASE 8 Preprensa digital

• Cascadas de Estilo

EstrategiaDe Diseño

El diseño al igual que muchas disciplinas requiere de una estrategia específica que nos ayude a vislumbrar cómo se enfrenta al mundo correctamente. Por ello debe basarse en una investigación y desarro-llo de acuerdo con las características de cada proyecto, siendo esta estrategia la que nos lleve a trabajar para los demás; como traductores de un lenguaje social implícito, como puentes de conexión en-tre el usuario y el público, y como parte del aprendizaje propio basado en el en-sayo y el error.

La metodología del diseño centrada en el usuario está basada en los siguientes aspectos:

• Estrategia

• Estudio del Usuario

• Arquitectura de la Información

• Diseño Visual

• Diseño Front (producción)

La característica más importante de esta serie gradual que puede seguir un pro-yecto, es que una vez que se llega a la ul-tima fase del proceso éste no termina, ya que las características se van apropian-do y probando en el tiempo cuando se requiera, mostrándose como un proceso cíclico que no queda cerrado sino abierto a más posibilidades.

Es una primera instancia debemos defi-nir muy bien el proyecto y conocer todos los parámetros que estén en juego. Para ello hay ciertos elementos que podemos utilizar:

• Briefing

• Benchmark

• Coaching

• Conversaciones Guiadas

Briefing

Cuando necesitamos recopilar informa-ción y establecerla como la base para un nuevo proyecto recurrimos al cliente y le preguntamos que es lo que el necesita.Un “brief” es un documento escrito que garantiza a través de preguntas que

Clase 1

realizamos al cliente, todos los paráme-tros necesarios para la realización del proyecto.

Benchmark

Un estudio benchmark es un análisis comparativo, de fortalezas y debilidades ya sean del usuario mismo o de su com-petencia, del cual podemos obtener in-formación útil para la correcta realización del proyecto.

Coaching

Podemos explicar al cliente el proyecto mediante el proceso Coaching, que bus-ca el camino más eficaz para alcanzar los objetivos fijados usando las propias habi-lidades y recursos.

Conversaciónes Guiadas

Otro método para informarnos sobre un proyecto es a través de una conversación guiada con el cliente, en la cual mediante preguntas capciosas podemos obtener más información sobre el propósito a rea-lizar, basada principalmente en elemen-tos objetivos.

Clase 1

ConstruirComunicación

Todo proyecto de diseño gráfico tiene dentro de sus funcionalidades la capaci-dad de construir comunicación a través de determinados elementos. La metodo-logía del diseño centrada en el usuario es una manera de realizar las cosas que esta íntimamente ligada con la comuni-cación. Ciertamente el diseño construye comunicación con el lado sensible de las personas, y es capaz de llegar a los pen-samientos y sentimientos (refiriéndose a lo sensitivo y sensorial del ser humano) en segundos, a través de colores, formas, tipografías y métodos que el hombre ha diseñado a lo largo del tiempo y que el cliente ha asociado de manera rápida y eficiente, como también ha rechazado los modelos que no se adaptan efectivamen-te a sus necesidades.

Compromiso del cliente

Anteriormente mencione herramientas que nos pueden servir para comenzar correctamente un proyecto. Muchas fa-llas en un objeto de diseño se deben a la no claridad de las condiciones iniciales y al poco compromiso de las personas con sus responsabilidades finales.

Para realizar entonces de manera obje-tiva el proyecto, debemos construir una relación técnica con el cliente. Para esto un documento “brief” que constate lo que el cliente quiere es fundamental. A través de un brief reconocemos los objetivos del proyecto, los recursos de la empresa, y no menos importante un contexto mediante el cual se desarrollará el proyecto. Esta declaración escrita que realiza el cliente es un compromiso que puede darnos una visión del tiempo necesario para realizar la labor.

Objetivos

Recursos

Contexto

Público (Target)

Información objetiva

Información puntual

Tabla Gantt

La tabla gantt es una herramienta que permite distribuir el tiempo necesario y responsabilidades a personas, las cua-les quedarán encargadas de dicha tarea. Esta visión del tiempo es relevante para precisar los costos totales y la distribu-ción de las tareas específicas en cada

Clase 2

Brie

nfing

área dentro del proyecto.

Estudio Benchmark

El estudio benchmark es un análisis de la competencia en base a las ventajas y desventajas que presenta. En el proce-so podemos tomar ejemplos de compe-tencias que son estudiadas de acuerdo a un criterio específico que servirá para nuestro proyecto. A través de este pro-cedimiento se realiza un informe para el cliente en el cual incluimos un análi-sis “FODA”, que habla directamente de las fortalezas y debilidades del proyecto mismo en base a los buenos y malos ele-mentos de la competencia.

Clase 2

Estudio y Comportamientode Usuarios

Existen muchos factores que determinan el tipo de usuario al cual va dirigido nues-tro proyecto. El diseño debe saber cono-cer a los clientes a través de estudios, lle-gando a sus motivaciones, necesidades, acciones diarias e intereses, todos estos factores que nos darán un perfil de la per-sona a la que queremos dirigirnos.

Motivaciones

Necesidades

Intereses

Toda esta recopilación de información tiene como finalidad encontrar los funda-mentos para comunicarle algo a la per-sona. Muchas veces, los productos son sometidos a pruebas con los usuarios (focogroup) para verificar que nuestro es-tudio ha sido traducido a las necesidades del consumidor correctamente. Así el pro-ducto se va adaptando a lo que el cliente quiere y nuestro proyecto se consolida.

Muchos de los estudios del ser huma-no son disciplinas paralelas y lejanas al área de diseño. Sin embargo el diseña-dor debe comprender estas materias y poder relacionarse con ellas para aden-trarse completamente en el contexto del cliente. Entonces, el diseñador se vuel-ve interdisciplinario y es capaz de llevar muchas materias a su oficio con el fin de encontrar elementos que sirvan para el proyecto, siempre manteniendo el foco en el diseño.

• Bibliotecología

• Antropología

• Psicología

• Sociología

• Estadísticas

• Marqueting

• Lingüística

Clase 3

Usu

ario

Áre

as y

Dis

iplin

as

Usabilidad

¿Qué es la usabilidad?

Usabilidad se define como la facilidad de uso, ya sea de una página web, una apli-cación informática o cualquier otro siste-ma que interactue con un usuario.

La Organización Internacional para la Es-tandarización (ISO) dispone de dos defi-niciones:

• ISO/IEC 9126:

“La usabilidad se refiere a la capacidad de un software de ser comprendido, apren-dido, usado y ser atractivo para el usua-rio, en condiciones específicas de uso”

• ISO/IEC 9241:

“Usabilidad es la efectividad, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico”

La usabilidad corresponde a una parte importante de la metodología del dise-ño. ¿Podemos decir que la usabilidad es cientificar el diseño?

Ciertamente la usabilidad corresponde a un método que requiere de ciertos facto-res provenientes de la ciencia, y necesita de las medidas de ensayo y error para hacer más efectivo el uso del producto.

• Medir

• Estudiar

• Analizar

• Conocer

• Modificar

En la industria el diseño se manifiesta como el producto mismo. Esto quiere demostrarnos que el diseño es un factor muy determinante cuando se habla de comprar un producto, mostrándose como innovación. En la industria digital sucede la misma situación, pero lo que estamos viendo explícitamente en la pantalla es el producto. Sea cual fuere la dimensión del producto, su facilidad de uso arroja resultados a través del estudio y la ob-servación en relación al usuario, siendo la usabilidad la herramienta efectiva para comprobar esto.

Clase 4

Efe

ctiv

idad

de

un S

iste

ma

Evaluación de la Usabilidad

Existen tipos de evaluación que nos per-miten medir la usabilidad de un sistema.

• Heurística por expertos • Test de usuarios

• Eyetracking

• Accesibilidad

• Expert Review

Heuristica por Expertos

Esta evaluación se realiza mediante un test basado en una lista de preguntas que el usuario debe responder de acuerdo a su experiencia con el sistema. Nielsen, un destacado personaje en el tema de la usabilidad, muestra estudios que hablan de la curva 75-5. El estudio verifica que 5 evaluadores es suficiente para tener un criterio de hasta el 75% de los resulta-dos, ya que luego de este incremento la curva tiende al mismo valor y no alcan-zará el 100% con más evaluadores, sino que arrojará los mismos resultados.

Test de Usuarios

Nos permite verificar la usabilidad a tra-vés de evaluaciones realizadas en labo-ratorios, en los cuales los usuarios inte-ractúan directamente con el sistema y se enfrentan con las problemáticas del proyecto mientras son observados por diseñadores que estudian su comporta-miento.

Accesibilidad

La accesibilidad se refiere a la capacidad de un sistema de ser utilizado por mu-cha gente. Este estudio evalúa cómo los usuarios logran acceder al contenido y cómo puede el sistema ser captado por una cantidad amplia de usuarios.

Clase 4

Eyetracking

Este estudio lo realiza una maquina espe-cializada que es capaz de detectar el mo-vimiento de los ojos. Así podemos evaluar las secciones de un sistema que son más visibles, y la valoración de los elementos en cuestión (lo que se ve primero, lo que ve luego, etc.)

Expert Review

Para este análisis se llama a gente exper-ta en el sistema que lo evalúa de acuerdo a su criterio y conocimiento. Como estas pruebas se basan en lo ya conocido para el experto, la evaluación puede dejar en claro un estándar de elementos que ne-cesitan ser comunes o de fácil acceso en comparación con la competencia.

Clase 4

Arquitectura de la Información

Esta disciplina nos ayuda a analizar, or-ganizar, disponer y estructurar la infor-mación de un sistema para que sea más eficiente su interacción con el usuario. Edward Tufte, reconocido diseñador de los últimos 30 años, toma como principio una comparación entre la mente huma-na y una computadora, afirmando que la cantidad de datos que puede manipular una computadora es infinitamente mayor a la que podría manipular la mente huma-na.

Desde siempre, el hombre ha utilizado la información para tomar dediciones. A lo largo de la historia se ha buscado la ma-nera de obtener esa información que pue-da sernos útil, y nosotros lo hemos hecho recopilando datos que luego podamos transformar en información. Tufte frente a la situación humana plantea que los me-dios de computación deben transformar la información en comunicación por me-dio de unidades discretas. Éstas, vistas como elementos de diseño, son capaces de transformar los datos en información conectadas a grandes bases de datos re-lacionando elementos específicos

para crear comunicación. Así esta or-ganización de la información se conecta con el estudio de la comunicación.

¿Cómo transformar la información en comunica-ción?

Como ejemplo de unidad discreta exis-ten los widgets, aplicaciones capaces de traer información de una base de datos y graficarla de una manera determinada. La ventaja de estos elementos es que son capaces de dar fácil acceso a funciones usadas frecuentemente y proveer de in-formación visual. Por ejemplo, pueden crear ventanas con información del tiem-po, relojes, calendarios, etc., e interactuar con el usuario visualmente.

A través de un simple golpe de vista so-mos capaces de asimilar muchísima infor-mación. Esto es, parte del proceso comu-nicacional, que se inicia con la capacidad de abstraer un sistema y transformarlo en un objeto visual que el usuario logre en-tender.

Podemos pensar en esta capacidad de abstraer como algo habitual que necesita el hombre para facilitar los sistemas. El primer mapa del metro de Londres fue di-señado en 1931 por Harry Beck, un elec-tricista. La necesidad surge cuando las

Clase 5

personas deseban orientarse en el lugar, pero lo característico de este mapa es que está basado en diagramas utiliza-dos para circuitos eléctricos, los cuales poseen formas simples que llevaron a la idea de un ordenamiento esquematiza-do. Este hombre conocía a la perfección el metro, y por tanto sabía que lo que el estaba diseñando podía respaldarlo con su experiencia. Aquí entendemos una parte importante del diseño centrado en el usuario, ya que el ordenamiento de la información que va a ser comunicada debe relacionarse estrechamente con las personas a las cuales nos dirigimos.

Autores Fundamentales

• Jesse James Garrett

• Louise Rosenfeld

• Meter Morville

• Nathan Shedroff

• Richard Saul Wurman

Jesse James Garrett

este autor dice que la arquitectura de la información define como las personas procesan la información y construye rela-ciones entre sus diferentes elementos.

A través de diferentes etapas muestra y define elementos en la creacion de un protocolo de dibujos para la navegación:

Clase 5

Etapa 1

• Objetivos del Sitio

• Necesidades del Usuario

Etapa 2

• Requerimientos del contenido

• Especificaciones funcionales

Etapa 3

• Arquitectura de la información

• Diseño de la interacción

Etapa 4

• Diseño de la información

• Diseño de la navegación

• Diseño de la Interfaz

Etapa 5

• Diseño visualCulminación

Concepción

Abstracto

Concreto

Tiempo

Clase 5

Impresión y Color

Formato PDFPDF (Portable Document Format: formato portátil de documento) es un formato de almacenamiento de documentos, desa-rrollado por la empresa Adobe Systems.Este formato es de tipo compuesto (ima-gen vectorial, mapa de bits y texto), y está especialmente ideado para documentos susceptibles de ser impresos.

Muchos de los problemas generados anteriormente a la utilización de PDF te-nían relación con el proceso de impresión utilizado hasta ese entonces, ya que se requerían archivos de imágenes, archi-vos de texto y de tipografías específicas, cada uno por separado para llevarlos a la imprenta. Este formato junta los ele-mentos necesarios y especifica toda la información para la presentación final del documento, determinando todos los de-talles de cómo va a quedar, no requirién-dose procesos anteriores de ajuste ni de maquetación.

Clase 6

Documento PDF

Imagen

texto

tIPograFía

Clase 6

Modelos de Color

CMYKEl modelo CMYK (Cyan, Magenta, Yellow y Key) es un modelo de colores sustrac-tivo que se utiliza en la impresión a colo-res. Este modelo se basa en la mezcla de pigmentos de los siguientes colores para crear otros más:

• C = Cyan • M = Magenta • Y = Yellow • K = Black ó Key

La mezcla de colores CMY ideales es sustractiva (pues imprimir cian, magenta y amarillo en fondo blanco resulta en el color negro). El modelo CMYK se basa en la absorción de la luz. El color que pre-senta un objeto corresponde a la parte de la luz que incide sobre este y que no es absorbida por el objeto.

mescla sustractIva De colores

Clase 6

Modelos de Color

RGBEl modelo RGB (Red, Green, Blue) de un color hace referencia a la composición del color en términos de la intensidad de los colores primarios con que se forma: el rojo, el verde y el azul. Es un modelo basado en la síntesis aditiva, con el que es posible representar un color mediante la mezcla por adición de los tres colores luz primarios.

Para indicar con qué proporción mezcla-mos cada color, se asigna un valor a cada uno de los colores primarios, de manera, por ejemplo, que el valor 0 significa que no interviene en la mezcla y, a medida que ese valor aumenta, se entiende que apor-ta más intensidad a la mezcla. Aunque el intervalo de valores podría ser cualquiera (valores reales entre 0 y 1, valores enteros entre 0 y 37, etc.), es frecuente que cada color primario se codifique con un byte (8 bits). Así, de manera usual, la intensidad de cada una de las componentes se mide según una escala que va del 0 al 255.

mescla aDItIva De colores

Imagen DigitalUna imagen digital, también llamada grá-fico digital, es una representación bidi-mensional de una imagen utilizando bits(unos y ceros). Las imágenes digitales se pueden obtener de varias formas:

• Por medio de dispositivos de conver sión analógica-digital como los escáne-res y las cámaras digitales.

• Directamente mediante programas in-formáticos, como por ejemplo realizando dibujos con el ratón (informática) o me-diante un programa de renderización 2D.

Scanner

Un scanner es un dispositivo de entrada que digitaliza una imagen de un papel u otra superficie, y la almacena en la me-moria de una computadora.

La resolución de un scanner indica la cantidad de puntos que este puede ex-plorar en cada pulgada de una imagen. La resolución se mide en PPP (puntos por pulgada) o DPI (dots per inch).

Clase 7

Resolución

La resolución de imagen indica cuánto de-talle puede observarse en una imagen. El término es comúnmente utilizado en rela-ción a imágenes de fotografía digital, pero también se utiliza para describir cuán ní-tida (como antónimo de granular) es una imagen de fotografía convencional (o foto-grafía química). Tener mayor resolución se traduce en obtener una imagen con más detalle o calidad visual. Para las imágenes digitales almacenadas como mapa de bits, la convención es describir la resolución de la imagen con dos números enteros, donde el primero es la cantidad de columnas de píxeles (cuántos píxeles tiene la imagen a lo ancho) y el segundo es la cantidad de filas de píxeles (cuántos píxeles tiene la imagen a lo alto).

Una imagen rasterizada, también llamada bitmap, imagen matricial o pixmap, es una estructura o fichero de datos que represen-ta una rejilla rectangular de pixeles o puntos de color, denominada raster, que se puede visualizar en un monitor de ordenador, pa-pel u otro dispositivo de representación.

A las imágenes rasterizadas se las suele caracterizar técnicamente por su altura y anchura (en pixels) y por su profundidad de color (en bits por pixel), que determina el número de colores distintos que se pueden almacenar en cada pixel, y por lo tanto, en gran medida, la calidad del color de la ima-gen.

4 x 4 12 x 12

30 x 30 150 x 150

Clase 7

Bit

El bit es la unidad mínima de almacena-miento empleada en informática, en cual-quier dispositivo digital, o en la teoría de la información. Con él, podemos repre-sentar dos valores cuales quiera, como verdadero o falso, abierto o cerrado, blanco o negro, norte o sur, masculino o femenino, amarillo o azul, etc. Basta con asignar uno de esos valores al estado de “apagado” (0), y el otro al estado de “en-cendido” (1).

1 Byte = 8 Bits

Pixel

Un píxel o pixel (del inglés picture ele-ment, “elemento de imagen”) es la menor unidad homogénea en color que forma parte de una imagen digital, ya sea esta una fotografía, un fotograma de vídeo o un gráfico.

En las imágenes de mapa de bits o en los dispositivos gráficos cada píxel se codifi-ca mediante un conjunto de bits de longi-tud determinada (la llamada profundidad de color).

Por ejemplo, puede codificarse un píxel con un byte (8 bits), de manera que cada píxel admite 256 variaciones (28 variacio-nes con repetición de 2 valores posibles en un bit tomados de 8 en 8). En las imá-genes de color verdadero, se suelen usar tres bytes para definir un color, es decir, en total podemos representar un total de 224 colores, que suman 16.777.216 op-ciones de color.

Clase 7

Cada pixel tiene su propio color; las imá-genes en el modelo de color RGB, por ejemplo, están formadas por pixeles de tres bytes — un byte para cada uno de los colores: rojo, verde y azul. Las imáge-nes más sencillas requieren menos infor-mación por pixel; por ejemplo, una ima-gen compuesta únicamente por pixeles negros y blancos sólo requiere un bit para cada pixel ( 1 si es negro, 0 si es blanco).

Clase 7

Formatos gráficos

Dentro de la variedad de formatos exis-tentes para archivos e imágenes, debe-mos distinguir que no siempre los forma-tos populares son aquellos adecuados para nuestros archivos y originales.

Generalmente se utiliza para imágenes el formato JPEG, GIF o PNG. Sin embargo formatos como TIF o EPS son aquellos que pueden ser más útiles a la hora de rescatar información:

JPEG, GIF, PNG

El formato JPEG (Joint Photographic Ex-perts Groupes) es un algoritmo diseñado para comprimir imágenes con 24 bits de profundidad o en escala de grises.

JPEG es un algoritmo de compresión con pérdida. Esto significa que al descompri-mir la imagen no obtenemos exactamen-te la misma imagen que teníamos antes de la compresión.

La ventaja de este formato es que al ser más pequeño puede utilizarse para las transimiciones por redes, lo que hace a este formato muy recurrente.

GIF (Compuserve GIF o Graphics Inter-change Format) es un formato gráfico utilizado ampliamente en la World Wide Web, tanto para imágenes como para animaciones.

GIF es un formato sin pérdida de calidad para imágenes con hasta 256 colores, li-mitados por una paleta restringida a este número de colores. Por ese motivo, con imágenes con más de 256 colores (pro-fundidad de color superior a 8 bits), la imagen debe adaptarse reduciendo sus colores, produciendo la consecuente pér-dida de calidad.

PNG (Portable Network Graphics) es un formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps no sujeto a patentes. Este formato fue desarrollado en buena parte para solven-tar las deficiencias del formato GIF y per-mite almacenar imágenes con una mayor profundidad de contraste y otros impor-tantes datos.

Clase 7

TIFF, EPS, RAW

Estos formatos tienen como ventaja res-catar más información del archivo, a di-ferencia de los formatos mencionados anteriormente.

TIFF (Tagged Image File Format) es un formato de fichero para imágenes. La de-nominación en inglés “Tagged Image File Format” (formato de archivo de imágenes con etiquetas) se debe a que los ficheros TIFF contienen, además de los datos de la imagen propiamente dicha, “etiquetas” en las que se archiva información sobre las características de la imagen, que sirve para su tratamiento posterior.

PostScript encapsulado, o EPS, es un formato de archivo gráfico. Un archivo EPS es un archivo PostScript que satis-face algunas restricciones adicionales. Estas restricciones intentan hacer más fácil a programas de software el incluir un archivo EPS dentro de otro documento PostScript.

RAW (en inglés crudo) es un formato de archivo digital de imágenes que contiene la totalidad de los datos de la imagen tal y como ha sido captada por el sensor di-gital de la cámara fotográfica. El formato RAW no suele llevar aplicada compresión (sea con o sin pérdidas) como ocurre con el popular JPEG, aunque en algunos ca-sos sí se emplea.

Debido a que RAW contiene la totalidad de los datos de la imagen captada por la cámara y una mayor profundidad de co-lor (por lo general 30 ó 36 bits/píxel), sus ficheros tienen un tamaño de archivo muy grande.

El formato RAW se usa en aquellos casos en los que interesa archivar una fotografía tal como ha sido captada por el sensor di-gital, sin ningún tipo de manipulación por la cámara, para poder procesarla poste-riormente en el ordenador mediante un programa de tratamiento de imágenes.

Por asociación con la fotografía analógi-ca, también suele conocerse el formato RAW como negativo digital.

Clase 7