Clases

Lenguaje Computacional

Francisco Vera Pontificia Universidad Catolica de Valparaiso

2008

IndiceClase 1 Estrategias de Diseño

Clase 2 Elaboración de Estrategia

Clase 3 Estudio y comportamiento de usuarios

Clase 4 La Usabilidad

Clase 5 Arquitectura de la información

Clase 6 Imagen Digital

Clase 7 Digitalización de Imágenes

Clase 8 Pre-prensa Digital Cascadas de Estilo CSS

Lenguaje ComputacionalClase 1 27 junio 2008

Estrategias de Diseño

Francisco Vera Muñoz

Entendemos la estrategia del diseño como un proceso creado para comunicar algo –siendo esta la función en esencia del oficio-, pero que se debe a la relación que existe entre clien-tes para así, ser el diseñador, un traductor del mensaje que se quiere enviar.

Visto de otra forma, el diseñador es quien debe ser capaz de conectar un puente para que emisor y receptor –ambos clien-tes- puedan dialogar sin problema alguno, sin interferir en el mensaje mismo; aun siendo el diseño un oficio que apunta explícitamente a las emociones de sus lectores.

Sin embargo, esta relación creada por el diseña-dor, se rige sobre unos puntos técnicos que en su totalidad llamaremos Estrategia del Diseño:

Estrategia Primer paso correspondiente a analisis y previos estudios.

Estudio de Usuario Visión del diseño en base a la experiencia del usuario

Arquitectura de la Información Estructura interna para el ordenamiento de datos.

Diseño Visual Posicionamiento y elección necesaria para el desarrollo visual del proyecto.

Diseño Front Producción

Nos centraremos primeramente en el primer punto (Estrategia) para desarrollarlo de la siguiente forma:

Brief El cliente tiene que escribir lo que quiere.

Benchmark Ver fuerzas y debilidades de la competencia.

Conversaciones Guiadas conversaciones con las personas a quien va dirigido el producto y a los que realizan el proyecto.

CouchingClara explicación sobre lo que se está haciendo.

Lenguaje ComputacionalClase 2 4 julio 2008

Elaboración de Estrategia


Como hemos visto, existe bajo todo el proceso de di-seño de un proyecto, una metodología que guía el de-sarrollo y la elaboración del mismo.Quedamos en el proceso de Estrategia, que en el puede ser comparado como una sección de estudio centrado en los usuarios –User experience: diseño centrado en la experiencia de los usuarios- y en las necesidades de la empresa en contraste a la competencia dentro del contexto mercado.

Corresponde a una serie de preguntas realizadas a la em-presa para conocer un poco de su historia, sus expectativas como institución, elementos que les gustaría considerar en el proyecto, presupuesto, etc. Todo lo necesario para aden-trarse en el ambiente de la empresa a quien se trabaja.

Brief

Estrategia

Estudio sobre la competencia para recalcar las falen-cias y ventajas que puedan tener estas, siendo con-sideradas en la preparación del diseño y así fortalecer la empresa dentro del área.

Estrategia

Benchmark

Tabla elaborada para la designación de faenas y los tiempos que se acotaran en ella, creando la verdade-ra noción de cuanto va a durar el proyecto y loa fecha de entrega de este.

Tabla Gant

Estrategia


Estudio y comportamiento de usuarios


Si nuestro diseño tiene como fin en la elaboración de un sistema de cajeros automáticos –por ejemplo-, de-bemos crear nuestro proyecto con la forma de anfitrión ante quien hace uso de este. Pero

Todos aquellos puntos que encierren el movimiento del usuario dentro del sistema deben ser exhaustivamente analizados y resueltos por el diseño mismo.

¿Que pasaría si el sistema colapsa en medio de un giro?

¿O si el tamaño de la letra es demasiado pequeño para personas con dificultades visuales?

Lo que es bueno para uno no siempre es bueno para otros; hay que entender las motivaciones y necesidades del usua-rio al momento de querer comprar en una empresa.

Tratar de buscar los fundamentos para decirle algo a al-guien, adaptando el producto a lo que realmente el usuario necesita –dedicando parte del proyecto al estudio exclusivo de este-.

Para esto mismo, el oficio “diseñador” no puede negarse a ir en busca de otras áreas para interactuar y ponerse al nivel del usuario, en el sentido de necesidades e inquietudes.

Todo diseñador debe manejar grandes cantidades de infor-mación y estar conectado con lo que sucede en torno a él.


La Usabilidad


Una de las partes más importantes en la metodología del diseño, corresponde a la Usabilidad, aceptar que estamos trabajando para otros y que el test es parte de la elaboración de la usabilidad.

¿Por que el iPod es tan famoso a nivel internacional? Sabiendo que no fue el primer reproductor música digital?.

Todo lo que el iPod ha logrado conseguir, debe gran parte a la accesibilidad que tiene, en el uso en base a la experiencia de los usuarios; y siendo tan buena la propuesta de Mac, las personas lo aprecian, valoran y algunos lo aman.

Toda usabilidad en nuestro oficio, comienza por un largo proceso de estudio, designación y ubicación de contenidos que finiquitan en una interfaz gráfica apta para todos los es-pectadores (Ej: Goggle).

Pero antes de presentan una interfaz que resuelve y se adapta a lo que los usuarios por experiencia ya entienden, se requiere de una serie de test que son llevadas a cabo por distintos tipos evaluativos:

Heurística por expertos

Test de Usuarios Laboratorios.

Eyetracking Sistema que sigue el movimiento del ojo en la pantalla.

Accesibilidad

Expert Review Revision de Expertos.


Arquitectura dela información


Edgard Tufte es diseñador y también estadístico, dán-dose cuenta y proponiendo que la manipulación de datos de un PC es mayor que la del cerebro humano. Y esta información manejada actualmente dentro del oficio del diseño, se debe emplear como una comuni-cación, que sobre la base de la experiencia del usua-rio construye iconos que se adapten a lo que quere-mos saber, y como lo queremos saber.

Por ejemplo, los widgets, son elementos que por feed llegan a una información determinada para luego transformarla a un elemento gráfico de mayor manejo y legibilidad, por lo tanto de buen acceso visual.

También lo fue el metro de Londres, diseñado por el elec-tricista Harry Beck en el año 1931, de forma esquemática, ordenada, basándose en un lenguaje propio de su oficio y que era fidedigna a lo que físicamente los túneles del metro respondían.

Hoy en día, el esquema del metro de Londres, es copiado y usado en casi todos los países del mundo –incluyendo Chile- demostrando así la su eficiencia y la importancia en la forma de ordenar los contenidos para un buen acceso.

Lenguaje ComputacionalClase 6 01 Agosto 2008

Imagen Digital


Todo el desarrollo del diseño y la elaboración que re-quería por ejemplo una revista, gracias a la tecnología, fueron integrándose dentro de la era computacional y la ventaja de esta misma.

Desde la creación de tipografías en base a mapas de bits, hasta el desarrollo de vectores para Truetype y Postscript, dieron paso para la creación de programas computacionales que resolvieran e hicieran más ac-cesible el desarrollo mismo de una pre-prensa; lo que actualmente se conoce como pre-prensa digital.

De esta forma, los primeros pasos en la construcción de un elemento de diseño digital, requerían de una cantidad de datos dependientes unos de otros pero de una forma ajena entre ellos; por ejemplo, en la diagramación de una revista, los archivos enviados eran las tipografías, las imágenes, y el texto a imprimir.

Es en ese instante cuando Adobe, logra inventar un sistema que englobe estos segmentos y los unifique sin modifica-ción alguna en el ahorro de errores y maquetas que eran devueltas del impresor al diseñador por algún pequeño error de especificación.

aPDF

Nace entonces PDF (Portable Document Format) con su tecnología postscript WYSWYG (What you see, what you get), traducido como lo que vez es lo que obtienes.

Los distintos tipos de resoluciones que se trabajaban antes y después de la pre-prensa digital se miden en base a su dpi (dock per inch = punto por pulgada), y pueden dividirse en tres grandes grupos según el medio en el que se trabaja.

Press –impresión- 300 dpiMédium 150 dpiScreen –pantalla- 75 dpi

Lenguaje ComputacionalClase 7 8 Agosto 2008

Digitalización de Imágenes


El escáner es un hardware creado para grabar y reproducir fidedignamente la información que contiene una imagen ya impresa –del estado físico a un estado digital-, similarmente el OCR (optical carácter recognition = reconocimiento óptico de caracteres) “escanea” cada fuente y en base a una es-tructura propia de la letra, la interpreta mostrándonos la que mas se asemeja a la que esta “grabando”.

Las imágenes digitalizadas –en general- se representan en la pantalla como “bits”, sobre la base de encender y apagar luces (como funcionan los grandes carteles luminosos de los estadios por ejemplo).

Esto quiere decir, que mientras la imagen posea un mayor mapa de bits la información es mayor y tenemos, por lo tanto, una imagen de mejor calidad. Una imagen de 1024 x 768 es mayor que una de 640 x 480, esto quiere decir que horizontalmente, una foto contiene 1024 puntos que se prenden y apagan de cierta manera, mientras que la otra imagen solo posee 640 puntos o bits.

1024 x 768

640 x 480

Las pantallas funcionan de una manera RGB (explicado en la clase anterior) y estos 3 tipos de luces posee cada uno 256 variaciones que al ser mezcladas entre si, generan mas de 1 millos de colores.O sea, si tenemos una imagen de 1 bit, tenemos que de rojo, verde y azul solo existe 1 unidad. Si la imagen tuviera 8 bit; entonces rojo, verde y azul poseen cada uno 8 unida-des, dicho de otra forma 8x3 = 24 unidades.

Pero ¿Cómo determinar si el archivo posee gran cantidad de información, aun siendo de gran tamaño? La resolucion es quien no explica esta variable, medidas por PPI, DPI y LPI.

R G B1 bit

8 bit

Al momento de leer el ordenador nuestra imagen digitaliza-da, se lee a través de ppi (píxel per inch = píxel por pulga-da), pero la salida de esta imagen –medio físico, como una impresión- puede ser medida por dpi (dots per inch = pun-tos por pulgada) o lpi (line per inch = líneas por pulgadas)

En donde dpi mide la cantidad de puntos de colores ubica-dos por una pulgada, y lpi la cantidad de líneas en una pul-gada, que van formando una trama; o sea, si el lpi es ma-yor en una foto, es considerada de tono continuo, puesto que casi no genera el tejido característico de un diario (por ejemplo).

Como se dijo anteriormente, el pdf es un formato que pue-de albergar gran cantidad de información, pero ya hemos dejado bien en claro que es vital en calidad, poseer imáge-nes de una buena resolución. Es al momento de exportar cuando debemos ser minuciosos, si exportamos en un for-mato que se ha ido estandarizado como el JPEG o el GIF, debemos considerar que estos formatos funcionan en la pérdida de información, o sea, que la foto de 1000 bits ex-portada en jpeg va a ser muchísimo menor a ella, y por lo tanto, de una calidad peor.

Los formatos TIF y EPS son los que salvan la imagen tal cual como fue escaneada, sin intervención alguna en la ca-lidad de ésta.

Lenguaje Computacional25 Agosto 2008

Cascadas de EstiloCSS


Las Cascadas de Estilo (Cascading Style Sheets, CSS) son un

lenguaje formal usado para definir la presentación gráfica de un do-

cumento estructurado escrito en HTML (lenguaje para componer y

estructura un sitio web dentro de Internet, como el posicionamien-

to de las letras, párrafos, colores, etc) o XML (y por extensión en

XHTML, otro lenguaje de estructuración de sitios). El W3C (World

Wide Web Consortium, correspondiente a www) es el encargado

de formular la especificación de las hojas de estilo que servirán de

estándar para los agentes de usuario o navegadores (como Inter-

net Explorer, Firefox, Safari, etc).

sitio web

a

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presen-tación.

En esencia el desarrollo de CSS consiste en separar la “estructura” de un documento de su “presentación”

En HTML, por ejemplo, <H1> indica que un bloque de texto es un encabezamiento y que es más importante que un bloque etiquetado como <H2>. Así, en base a esta “codificación” se generan distintos estilos que pue-den ser aplicados a diversos elementos, todo dentro del “código de fuente” que es quien alberga todo este mapa de estilos y presentaciones.

(H1) Título(H2) subtítulo

Cuando se utiliza CSS, la etiqueta <H1> no debería proporcionar infor-mación sobre como va a ser visualiza-do, solamente marca la estructura del documento ya definida en una hoja de estilo ajena a este código.

<H1>: color, fuente, alineación del texto, tamaño, y otras ca-

racterísticas no visuales.

Por ejemplo:

<H1 style=”text-align: center; color: rgb(255, 0, 0);”>

Esto es un encabezado de nivel 1</H1>

Se puede aplicar una misma declaración a varios selectores,

utilizando la coma (,) para separarlos.

Por ejemplo:

H1, H2, H3 {color: red;}

Título subtítulo texto(H1) (H2) (H3)

La información de estilo puede ser adjuntada tanto como

un documento separado o en el mismo documento

HTML. En este último caso podrían definirse estilos gene-

rales en la cabecera del documento o en cada etiqueta

particular mediante el atributo “style”.

h1 { color: white; background: orange; border: 1px solid black padding: 0 0 0 0; font-weight: bold;}

body { background-color:white; color:black; font-family:Arial,sans-serif; magin: 0 4px 0 0; border: 12 px solid;}

codigo de fuente

visualización

Clases

Technology

Transcript of Clases