Bitacora

BITÁCORALENGUAJECOMPUTACIONAL 1

Sofía Savoy AnguitaDiseño Gráfico II

Clases• Clase 1 Estrategias para enfrentar el Diseño• Clase 2 La estrategia detallada• Clase 3 Estudio y comportamiento del usuario• Clase 4 La Usabilidad• Clase 5 Arquitectura de la información:

Organizando un sitio web• Clase 6 Color e Impresión• Clase 7 Escaneo y formatos de archivos• Clase 8 Preprensa digital y sus formatos -Tarea- “Cascadas de estilo”

Clase 127 de Junio, 2008

Estrategias para enfrentar el DiseñoLa primera noción que debemos

conocer al tener presente el dise-ño, es que para poder enfrentarnos a la situación que viviremos como diseñadores, ocuparemos ciertas estrategias puntuales que organi-zan nuestro camino y que se con-vierten en fortalezas para el desa-rrollo de un proyecto.

Tenemos en la primera face al-gunos elementos y conceptos que nos ayudan a construir nuestra es-trategia:

• Set evocado: se refiere al mar-keting, a la estrategia para que el usuario recuerde la marca o el pro-ducto.

• Benchmark: es un análisis comparativo que permite observar las ventajas y desventajas del pro-

ducto.

• Brief: (fundamental) es la decla-ración de los clientes sobre temas o preguntas sobre el proyecto.

• Tadget: Construir elementos para llegar a la audiencia, a los usuarios.

• Conversaciones guiadas: son un estilo de “preguntas capciosas” hechas al cliente para desarrollar el proyecto. Es una especie de con-versación técnica y objetiva.

• Coaching: es una leve explica-ción acerca de lo que se hace en el proyecto.

Para entender e insertarnos en lo que la red y los programas nos ofrecen, es importante que seamos

Clase 127 de Junio, 2008

centrados en lo que estos signifi-can, por lo que abriremos cuentas en los siguientes portales web:

• http://www.losdigitales.com• http://lenguaje1.wordpress.com• http://www.slideshare.net• http://twitter.com• http://www.flickr.com

Y además para el desarrollo de nuestros trabajos y proyectos, uti-lizaremos:

• Google Docs• Tablas Gantt y Agendas• InDesign

Clase 24 de Julio, 2008

La estrategia detalladaHablamos anteriormente so-

bre los elementos que posee la estrategia para enfrentar el dise-ño, ahora profundizaremos más sobre como esta estrategia nos permite construir un proyecto de diseño gráfico.

La gran tarea que esto proyecta, es la de construir comunicación: esto se da a partir de la metodo-logía centrada en el usuario, pues nuestro trabajo es llevar lo que el cliente quiere, a un nivel en el que el usuario se desenvolverá y será captado. Muchas veces esto se dará cuando el diseño construye la comunicación, tocando el lado afectivo del usuario.

Dentro de los pasos dados para la estrategia, tenemos los más importantes:

• BriefEl brief corresponde a unas

cuantas hojas en donde el clien-te cuenta cuales son las ideas, los objetivos y los recursos que la empresa tiene para desarro-llar el proyecto. A través de este nos relacionamos con el “usua-rio técnico”, por lo que el brief debe entregar la mayor cantidad de información puntual soble el objetivo.

• Tabla GanttLuego de tener toda la infor-

mación presente en el brief, nos dirigimos a distribuir y asignar el tiempo a las tareas y faenas (cada una con su responsable). Así tenemos una línea de tiempo que permite tener una organiza-ción precisa para tener un desa-rrollo controlado y bien comple-


mentado.

• BenchmarkEl benchmark es una herramien-

ta para hacer un “levantamiento” de ventajas y desventajas. Este análisis de la competencia es presentado en un informe, para mostrar los pro y los contra de poseer o no distintos elementos en un proyecto, tratando de se-leccionar los más valiosos para desarrollar un proyecto exitoso.

Llevamos a la práctica los pun-tos de la estrategia, organizán-donos en grupos y desarrollando un proyecto que debía contener una cotización, un portal y una imagen corporativa.

La cotización es otro punto im-portante, ya que con esto eva-

luamos la situación de tiempo, trabajo y capital, que nos dejara una cierta cantidad de ingresos presupuestados según lo que se haya planteado.


Estudio y comportamiento del usuario

Para entender las necesidades, las motivaciones y los intereses, entre otros, de los uruarios, es que se desarrolla este estudio del usuario en base a como se com-porta frente a ciertos elementos (como por ejemplo portales web, softwares o hardwares).

Cuando comenzamos a estu-diar el comportamiento del usua-rio, y digitalizamos el diseño, es ahí cuando nos converimos en investigadores, pues tomamos diferentes áreas del conocimien-to para comprender la proble-mática que el usuario plantea en esta situación. Entre estas zonas tenemos:

• Antropología• Bibliotecología• Marketing• Estadísticas• Sociología• Psicología


La UsabilidadPodemos definir lo que signi-

fica la usabilidad, sobre la base de que es una parte importante de la metodología del diseño, ya que este requiere de algunos fac-tores de la ciencia, que arrojan el “prueba y error” (desarrollo y re-sultados de las pruebas y tests):

• Medir• Estudiar• Analizar• Conocer• Modificar

El diseño es innovación, y no-sotros nos desenvolvemos en este campo. De esta manera es claro que diseñamos para otros y que creamos cosas que no exis-ten, cosas que representan el fu-turo, y todo esto desde la base de “plantearnos un sueño”, de

tener una idea que desarrollamos al ir descubriendo cosas median-te el estudio, la investigación, los análisis, etc., y que se visualiza como la “frontera del diseño”.

Volviendo a lo que trata la usa-bilidad, sabemos que la susten-tación de este negocio es el di-seño, como factor determinante de la compra o no compra del producto. Mediante el estudio del usuario logramos evaluar la facilidad que este tiene para in-teractuar con el producto (con-cluyendo el nivel de usabilidad que posee).

La ISO (Organización Interna-cional para la Estandarización), que trata las normas de la garan-tía de calidad, define la usabili-dad segun dos criterios:


• ISO/IEC 9126: esta se refiere al tema de comprensión y uso de un software, además de lo exter-no que atrae al usuario.

• ISO/IEC 9241: esta se refiere a la efectividad con que el usua-rio se desenvuelve en el uso del software.

Jakob Nielsen es considerado uno de los personajes más im-portantes en el tema de la usa-

bilidad, y define características que la identifican:

• Entendible• Novedoso• Comprensible• Inteligente• Atractivo

Ahora, la manera en que medi-mos la usabilidad, es mediante distintos tipos de evaluaciones:

• Heurística por expertosEsta evaluación es hecha por

especialistas en usabilidad, que determinan los elementos buenos y malos de una interfaz, usando ciertos criterios. Basta que par-ticipen 5 evaluadores para obte-ner un 75% de los problemas de la interfaz puesta a prueba.


• Test de usuariosEsta evaluación es hecha en la-

boratorios en los que se observa el comportamiento del usuario, respecto de la interfaz, y los pro-blemas con los que se encuen-tra.

• Eye TrackingAquí se evalúa, con unas má-

quinas especiales, el movimien-to de los ojos; hacia dónde y de qué manera el usuario observa la interfaz.


• AccesibilidadEn este test se evalúa que los

usuarios logren acceder a la in-terfaz y a su contenido (sin im-portar el entorno), observando también la capacidad que tienen los diseños para ser usados.

• Expert ReviewEs el análisis hecho por exper-

tos en los que no es necesario la presencia de usuarios, ya que complementa al resto de las eva-luaciones de usabilidad.

Finalmente todas estas evalua-ciones nos permiten medir que el sistema este bien diseñado y que tenga estética, para atraer y agradar al usuario; que sea efi-caz, visible y que cumpla con los estándares impuestos; que el usuario lo comprenda, tenga control sobre él y que disponga de ayudas; y que a partir de lo evaluado exista una prevención de errores, que es uno de los cri-terios mas estudiados.


Arquitectura de la información:Organizando un sitio web

Entendemos por arquitectura de la información, la manera en que analizamos y organizamos la información para que el usua-rio sea capaz de comprenderla y manejarla.

Para convertirnos en arquitec-tos de la información, vamos a tomar como ejemplo a Edward Tufte, diseñador y estadístico de

la Universidad de Yale. Él se dio cuenta de que la capacidad de almacenamiento de las compu-tadoras era mucho mayor que la del cerebro y que, el ser humano, desde siempre ha usado la infor-mación para tomar decisiones y ha construído elementos para tener y transformar datos en in-formación.

Pero otro elemento muy impor-tante es la comunicación, y Tufte plantea que transformar los datos en información, no es suficiente, por lo que hay que transformar la información en comunicación, basándonos en unidades dis-cretas.

Las unidades discretas son ele-


mentos de diseño capaces de formar los datos y transformar-los eficientemente para producir la comunicación.

Un ejemplo claro de esto son los widgets, que traen informa-ción desde una base de datos y la grafican de una manera deter-minada, para obtener la informa-ción del dato.

Otro ejemplo de esto, fue la in-vención del mapa del metro de Londres. Este fue creado en 1931 por un electricista llamado Harry Beck, y consistía en un diseño esquemático y ordenado, basa-do en el diagrama de los circui-tos eléctricos, para que la gente pudiera ubicarse.


Su diseño fue muy influyente para los mapas que se diseñarían después, incluso el actual, tiene el mismo diseño que usó Beck, siendo muy importante que su eficacia proviene de la manera en que se organiza el contenido.

Algunos personajes importan-tes en la arquitectura del diseño son:

• Richard Saul Wurman: ar-quitecto que creó el concepto de “arquitectura de la información”, con el fin de hacer la información comprensible.

• Louise Rosenfeld y Peter Morville: ambos bibliotecólogos y autores del libro que difunde el uso de la arquitectura de la infor-

mación.

• Jesse James Garrett: es director de estrategias para la experiencia de los usuarios, y muestra esto en la creación de un protocolo de dibujos para la navegación:

1º Parte en base al brief, para ver los objetivos del sitio, y las ne-cesidades del usuario.

2º Se basa en el requierimien-to del contenido, que es funda-mental para que el diseño sea efectivo.

3º Sigue con las especifica-ciones funcionales que arrojan el requerimiento funcional pro-veniente del usuario. El diseño


debe ser capaz de entender y estudiar al usuario.

4º Se emplea la arquitectura de la información para construir un espacio digital con esta informa-ción.

5º Luego se hace el diseño de la interacción, para ver cómo se hace algo para que funcione, sin reinventar, sino que optimizando los elementos.

6º Llegando al final tenemos el diseño de la información, que está ligado al de la interfaz y al de la navegación.

7º Finalmente obtendremos el diseño visual, que será el resul-tado de este proceso complejo.

Clase 61 de Agosto, 2008

Color e ImpresiónDentro del diseño, existen fac-

tores importantes y fundamenta-les que son aplicados a diferen-tes dimensiones; una de estas es la impresión.

La imprenta se desarrolla en base a diferentes cambios y pro-gresos, desde algo tan básico y fundamental como los tipos mó-viles, hasta la imprenta digital que conocemos hoy en día.

Un ejemplo concreto y co-mún, es el uso del “PDF” (Por-table Document Format). Adobe es una empresa de softwares, que inventa una tecnología post-crip “WYSWYG” (What You See is What You Get) que es “lo que ves es lo que obtienes”, y den-tro de esta tecnología, está PDF, que entre sus variables, está la

de la impresión como concepto importante. Así, permite definir el uso que se le dará al archivo se-gún las resoluciones.

En el siguiente esquema se mostrará una idea de cómo era antes la transmisión de archivos a una imprenta, y como es ahora con PDF.

IND

PDF

Foto

Texto

Archivo {archivo

foto

texto


Otro punto importante y signifi-cativo en todo este asunto, es el de las llamadas resoluciones.

Tendremos tres tipos de reso-luciones como base:

•Nivel de Impresión, que corres-ponde a los 300 DPI (dots per inch - puntos por pulgada)

•Nivel Medio, que corresponde a los 150 DPI

•Nivel Pantalla, que corresponde a los 72 DPI

Con esto queda claro que la impresión es un ejercicio muy delicado y muy complejo. Pero no se queda en los elementos a imprimir, ni en la forma en que estos se imprimirán; existe otra

dimensión que le otorga un nue-vo sentido a todo esto, que es precisamente el color.

Pensemos el color de dos ma-neras, como “aditivo” y “sustrac-tivo”.

MODELO ADITIVO

MODELO SUSTRACTIVO

RGB

CMYK


El modelo aditivo, que en este caso es RGB (rojo, verde y azul) trabaja con los pixeles de la pan-talla, mientras que el modelo sustractivo CMYK (cian, magen-ta, amarillo y negro) trabajan con los puntos impresos.

Con el sistema sustractivo, aparece una forma de impresión más fiel a lo que observamos, que es la cuatricromía; esta se basa en la conformación de la imagen según los colores cian, magenta, amarillo y la suma de estos, que es el negro.

Nombraremos algunos ele-mentos acerca del espectro visi-ble y las gamas de color, como por ejemplo:

• El área de tono continuo se refiere a la manera de presentar dónde estan todos los tonos, y que también corresponden a las imágenes digitalizadas.

• Las tramas de semitonos, responden a las hechas con tinta negra y a la cuatricromía.

• El “efecto Moiré” es el efecto de saturación de los puntos sobre los giros de los colores base.

• Las tintas planas son permiten la impresión de colores específi-cos (las más usadas son las Pan-tone). Estas se diferencian de la técnica de cuatricromía, ya que el color no se conforma a partir de cuatro colores, como en el ejemplo que se muestra:

Color Directo Cuatricromía



Escaneo y formatos de archivosPara defendernos en el mundo

del diseño, debemos manejar un ótimpo lenguaje técnico, que es fundamental en nuestro desem-peño.

Por ejemplo, el conocido “http” de internet, significa “Hypertext Transfer Protocol” (Protocolo de Transferencia de Hipertexto), que define el orden, modo y signifi-cado que utilizan los softwares de comunicación en la web; y “https” significa “Hypertext Transfer Protocol Secure “ (Pro-tocolo Seguro de Transferencia de Hipertexto), que está basado en el anterior, pero que se desti-na para una transferencia segura de datos.

Si queremos otros ejemplos, el escaner nos los puede dar.

El escaner es un dispositi-vo que “lee”, de cierta forma, una imagen o documento de tal manera de poder digitalizarlos. Otros escaners, como los que usan la técnica de OCR (Optical Carácter Recognition o Recono-cimiento Óptico de Caracteres), son capaces de leer la tipografía para luedo editarla.


Los archivos digitalizados, los observamos gracias a los bits. Un bit es un dígito binario (Binary digit) que manda una señal elec-trónica que puede estar encen-dida (1) o apagada (0), la unidad mínima de almacenamiento di-gital. Por lo tanto, mientras más bits se tengan, mayor informa-ción habrá en la imagen.

Cada bit puede representar uno de los números y hacer cua-tro combinaciones.

Para las imagenes, correspon-de una “imagen bitmap” o “mapa de bits”, compuesto por píxeles con valores de color e ilumina-ción propios, que en conjunto componen la imagen total.

Para el color en las imagenes, tenemos ciertas cantidades de bits por píxeles, por ejemplo, una imagen en escala de grises, va-ría entre 2 bits (4 tonos) a 8 bits (256 tonos) o más. Para el color, se varía entre 8 y 32 bits, dando

0 0 0 1

1 11 0


dad de tener entre 65.536 a 4.294.967.296 colores.

La resolución en la imagen es algo muy importante, nos indica la cantidad de pixeles que hay en una determinada medida de longitud. Para esto, existen tres términos que son comunes de confundir: PPI, DPI y LPI.

La resolución del archivo de una imagen, se debe especifi-car en PPI (“Pixels Per Inches” o “Píxeles Por Pulgada”). Pero los dispositivos de salida ahora especifican su resolución en DPI (“Dots Per Inches” o “Puntos Por Pulgada”) o en LPI (“Lines Per Inches” o “Líneas Por Pulgada”).

En el siguiente ejemplo, obser-varemos las distintas resolucio-nes de una imagen:

1 bit por pixel 8 bits por pixel(escala grises)

8 bits por pixel 24 bits por pixel


La medida de LPI, es en base a las tramas, o cuando la imagen trae lineatura. Por ejemplo, las imprentas pueden utilizar desde 65 LPI para producir imagenes granuladas como en los periódi-cos antiguos, hasta 300 LPI para reproducir algo muy cercano a una fotografía de tono continuo.

72 DPI 50 DPI

30 DPI 15 DPI

10 DPI 5 DPI

Foto de tono continuo

Foto tramada


Las imagenes también poseen un formato específico. Algunos de estos son JPG o JPEG, GIF, TIF o TIFF, EPS, PNG y RAW en-tre otros.

Los formatos JPEG (“Joint Photographic Experts Group” o “Grupo Unido de Expertos en Fotografía”) y GIF (“Graphics In-terchange Format” o “Formato Gráfico de Intercambio”) son los más usados para las imágenes.

EL formato más fiel y rico en información de la imagen es el TIFF (“Tagged Image File For-mat” o “Formato de Archivo de Imágenes con Etiquetas”).

Pero el formato más “podero-so” y más complejo en informa-ción, es RAW. Este formato tam-

bién es conocido como “negati-vo digital”. La razón por la que es tán rico en información, es porque contiene todos los datos originales obtenidos por de la cámara fotográfica digital. Esta imagen posee varias capas por lo que permite tener más infor-mación a propósito de los bits, ya que trabaja con una profundidad de color de 30 a 36 bits. Por lo general no lleva compresión (sea con o sin pérdida), y fue inventa-do, por decir de una manera, en la medida en que el TIFF ya no era suficiente.


Entendamos por preprensa di-gital, toda modificación y pro-ceso digital antes de imprimir el archivo final. En el esquema se mostrará el proceso completo:

Preprensa digital y sus formatos

.indd

.qx

A{

img

TIFFEPSJPG*

Archivo de diagramación

PDF

Preprensa(Proceso Digital)

Películas

Planchas de impresión

Rodillos de impresión(Ej; OFFSET)

ó

Impresora digital

(Per Flight)


Los formatos que se utilizan en preprensa digital, son aquellos que no proporcionan pérdida de información, como por ejemplo el formato TIFF, que es para imáge-nes que tengan al menos 24 bits y soporta las aplicaciones de la manipulación de imágenes; esto se refiere a que con esto la pér-dida de información es mínima, al igual que con el otro formato usado: EPS.

Este formato es un encapsula-do postcript que puede contener tanto gráficos vectoriales como mapa de bits, y lo admiten prác-ticamente todos los programas.

El formato JPG también podría usarse, pero para esta situación implica mucha pérdida de infor-

mación, por lo que generalmente se prefieren los otros formatos.

Cascadas de estilo T A R E ALas cascadas de estilo, son un lenguaje formal usado para definir la pre-

sentación de un documento estructurado sobre la base de una escritura.

Partamos por lo más simple para llegar a la totalidad más compleja. Los estilos son abreviaciones que uno hace para que una tipografía pueda ser modificada. Si vamos a Microsoft Word, podemos ver un claro ejemplo de cómo podemos determinar un estilo de carácter y de párrafo.


Por ejemplo, aquí deter-minamos los valores para el párrafo; nombramos el esti-lo, el tipo, definimos la tipo-grafía, como esta irá alinea-da, su color, su tamaño, su formato (si será cursiva, ne-grita, subrayada) de manera que decidimos que la tipo-grafía se comporte de esa manera cuando utilicemos nuestro estilo de párrafo.


Y en este otro caso, determinaremos los valores para los carácteres; nombramos el estilo, el tipo, volvemos a definir la tipografía, su tamaño, su color y su formato, de manera que cuando escribamos un texto y le quera-mos cambiar la tipografía para un uso ya determinado, tendremos nuestro estilo hecho y definido.

T A R E A


La parte más “compleja” a la que me refería anteriormente, era a que estos estilos se aplicaban en un lenguaje llamado CSS: Hojas de Estilo en Cascada (Cascading Style Sheets).

Así como vimos en el ejemplo de Word, este lenguaje describe cómo se verá un documento, mediante una los valores que se declaran en el escrito.

Este lenguaje se aplica en la crea-ción de sitios web, mediante una página HTML (HyperText Markup Language), que significa “Lenguaje de Marcas de Hipertexto”; lo que nos lleva a pensar que mediante estas cascadas de estilos, decimos cámo queremos que aparezcan los distinos parrafos y caracteres, y

mediante el HTML, lo incertamos para que se aplique en conjunto con el resto de los elementos de una página. Así no se tiene que es-tar declarando una y otra vez los estilos del texto, porque ya estarán previamente definidos.

Con las siguientes imágenes ob-servaremos el comportamiento de las cascadas de estilos, y como estos últimos se definen:

T A R E A


T A R E A

Estilo del cuerpo (body) aplicada a toda la página.

Estilo del párrafo aplicada por defecto a todos los párrafos.

Estilo del párrafo (tipo especial)

CSS

HTML


T A R E A

CSS

Resultado de la aplicación de una cascada de estilo a

un párrafo

e.[ad]- Escuela de Arquitectura y Diseño PUCV -

2008

Bitacora

Documents

Transcript of Bitacora