1LclenguajeCOMPUTACIONAL

VALERIA CERÓN REVECO

indiceLENGUAJECOMPUTACIONAL

clase 1clase 2 clase 3clase 4clase 5clase 6 tarea clase 7clase 8 tarea

Estrategias de Diseño

Estrategias de Diseño (2da parte)

Estudio y Comportamiento del Usuario

La Usabilidad

Arquitectura de la Información

Color e Impresión

Formatos de Color. RGB y CYMK

Escaneo y Formato de Archivos

Pre prensa Digital

Cascada Estilo CSS

27.06clase 1ESTRATEGIAdeDISEÑO I

Lo primero que debe tenerse en cuenta a cercca del Diseño, es que para enfrentarnos al oficio de diseñadores debemos emplear ciertas estrategias puntuales que permitar organizar el trabajo y permitan llevar a cabo el proyecto con éxito.

set evocadoSe refiere al Marketing, a la estrategia para que el usuario recuerde la marca o el producto.

benchmarkanálisis coparativo que permite observar las ventajas y desven-tajas del producto, proyecto.

briefLo fundamental, es la declaración de los clientes sobre temas o pre-guntas a cerca del proyecto.

tadgetConstruir elementos para llegar a una audiencia determinada, a los usuarios.

conversaciones guiadasSon un estilos de “preguntas capciosas” hechas al cliente para desarrollar el proyecto. Es una especie de conversación técnica y objetiva.

coachingLeve explicación a cerca de lo que se hace con el proyecto

los digitaleswww.losdigitales.com

wordpresshttp://lenguaje1.wordpress.com

slidesharewww.slideshare.com

flickrwww.flickr.com

twitterwww.twitter.com

04.07clase 2ESTRATEGIAdeDISEÑO II

USER EXPERIENCEmetodología de trabajo.

Infografía: permite mostrar el procesoEl diseño puede construir una comu-nicación tocando el lado afectivo del usuario.

1. ESTRATEGIA

briefEl cliente cuenta los objetivos del proyecto. Se intenta NO burocratizar la relación con el cliente.Sirve para tener OBJETIVOS CONCRETOSPor ello el Brieff debe ser rico en in-formación PUNTUAL, colaborar en la entrega de la información; el cliente DECLARA los objetivos del proyecto, sus expectativas.

tabla gantAsignación de tareas por persona y distribución del TIEMPO para el pro-yecto.Refleja la disponibilidad de tiempo para realizar el proyecto en cuestión.Se debe considerar el tiempo que el cliente tarde en decidir y las reunio-nes con éste.

benchmarkHerramienta para hacer levantamien-to de VENTAJAS Y DESVENTAJAS en cuanto a la competencia. ANÁLISIS.Se toman ejemplos de la competen-cia y se transversalizan según ciertos puntos para sacar conclusiones.Como se comporta gráficamente, Buenas prácticas, Oportunidades po-sibles graficamente en el mercado.

11.07clase 3COMPORTAMIENTOdelUSUARIO

DISEÑARdiseñador

sociología

sicología

antropología

lenguaje

bibliotecario

estadística

metalinguistica

El diseño es puente para otros conver-sen. El OFICIO impulsa al diseñador a buscar en otras áreas para interactuar de mejor modo y ponerse a nivel del usuario, según sus necesidades e in-quietudes.

18.07clase 4USABILIDAD

Parte importante de la metodología del diseño. Se debe entender que se está trabajando para otros, donde el test es parte de la elaboración de usabilidad.

MEDIR ESTUDIAR ANALIZAR

CONOCER MODIFICAR

La usabilidad se encuentra estrechamente ligada con la ACCESIBILIDAD,de manera que algo se vuelve más útil en la medida en que logro descubrir como acceder al servicio prestado de modo más abierto.Esta usabilidad, comienza por un largo estudio, donde se ubican los conte-nidos que darán forma a una INTERFAZ GRÁFICA apta para cualquier usua-rio. (ej.Google)

Se de resolver cual es la experien-cia del usuario para poder diseñar una interfaz adecuada a su cono-cimiento.Para esto existen SISTEMAS DE EVALUACIÓN DE LA VISUABILIDAD

HEURÍSTICA POR EXPERTOS

TEST DE USUARIOS Laboratorios

EYETRACKING Sistema que siguen el movimiento del ojo por la pantalla

ACCESIBILIDAD Capacidad de los diseños para ser usados

EXPERT REVIEW Análisis experto

25.07clase 5ARQUITECTURAdelaINFORMACIÓN

Se entiende como Arquitectura de la información, el modo en que se analiza y organiza la información para que el usuario sea capaz de manejarla y comprenderla.

La capacidad de almacenar informa-ción de una computadora es mucho mayor que la de el cerebro huma-no, lo que es de suma importancia, pues la información es unaherramienta utilizada desde siem-pre para poder tomar desiciones, de ahí su gran importancia. Por otra parte, la comunicación es un elemento muy importante, Tufte , diseñador y estadístico de la universidad de Yale, plantea que transformar los datos en informa-ción, no es suficiente, por lo que hay que transformar la información en comunicación basándose en unidades discretas.

Estas unidades son elementos de diseño que transforman los datos de modo eficiente para que la comunicación se realice, es decir, que pueda accederse a ella.

Ejemplo de esto, son los widgets,que traen información desde una base de datos y la grafican de de-terminada manera, para así obtener la información deseada.

Otra buen ejemplo es la inven-ción del mapa del metro en Londres, en 1931 por un electricista, Harry Beck con el fin de ayudar a la orientación de las personas. Este consistía en un diseño esquemático y ordenado basa-do en el diagrama de los circuitos eléctricos.

Este fue un diseño muy influyente para lo hecho posteriormente. El usado actualmente aún tiene el diseño que usó Beck, debido a que su eficiencia proviene de la manera en que se organiza el contenido.

Algunos personajes importantes respecto a la Arquitectura del diseño:

Richard Saul Wurman: Creó el concepto de “Arquitectura de la Información”, con el fin de hacer la información comprensi-ble.

Louise Rosenfeld y Pe-ter Morville: Bibliotecólogos y autores del libro que difunde el uso de la arquitectura de la infor-mación.

Jesse James Garret: Director de estrategias para la Experiencia de los Usuarios. Crea un protocolo de dibujos para la navegación.

1. Del Brief. Se bas aen él para ver los objetivos del sitio, y las necesidades del usuario.

2. Requerimiento del Conte-nido. fundamental para que el diseño sea efectivo.

3. Especificaciones Funciona-les, arrojan el requerimiento fun-cional proviniento del usuario. El diseño debe entender y estudiar al usuario.

4. Empleo de la Arquitectura de la Información para construir un espacio digital con ella.

5. Diseño de la Interface, ver como se hace algo para que fun-ciones, sin reinventar, sino que optimizando los elementos.

6. Diseño de la Información, ligado a la interfaz, y al de la na-vegación.

7. Diseño Visual, lo final que será el resultado de este comple-jo proceso de estudio.

01. 08clase 6COLOR eIMPRESIÓN

Pinturas offset. Aprovecha su tras-lucides para construir la ilusión del color, vía puntillismo.

CIÁN AMARILLO MAGENTA y NEGRO

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 presenta un objeto corresponde a la parte de la luz que incide sobre este y que no es absor-bida por el objeto.La cuatricomía, obtiene las impre-siones a partir de cuatro fotolitos, cada uno de los cuatro colores básicos (Cyan, Magenta, Amarillo y Negro).

cuatrinomía

efecto muaréSaturación de los puntos por el giro del ángulo de alguno de las tramas. Se produce un efecto tornasol.

cian 105°amarillo 90°magenta 75°

tintas planasSe pueden separar por tramas desde el 100% al 0%. Donde el 0% es lo total y el 100% es nada, el calado. Se van crean-do matices por la separación de puntos.En el caso de las tintas planas, sólo se utiliza un fotolito para cada uno de los colores planos que se deseen obtener.

Pantona: matices del color tramado.

c o l o rMODELORGB

RGB, del inglés Red, Green and Blue, es un modelo de color basado en la síntesis aditiva, con el que es posible representar un color mediante la mez-cla por adición de los tres colores primarios.

Para indicar con qué proporción mez-clamos cada color, se asigna un valor a cada uno de los colores primarios, de manera, por ejemplo, que el valor 0 sig-nifica que no interviene en la mezcla y, a medida que ese valor aumenta, se entiende que aporta más intensidad. 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 se-gún una escala que va del 0 al 255.

La profundidad de color de una imagen se refiere al número de co-lores diferentes que puede conte-ner cada uno de los puntos o píxe-les que la forman. Depende de la cantidad de información (número de bits) que puede almacenar un píxel.

profundidad del color

Cuanto mayor sea la profundidad de bit en una imagen, mayor será la cantidad de tonos (escala de grises o color) que puedan ser representa-dos, más colores habrá disponibles y más exacta será la representación del color en la imagen digital. Las imágenes digitales se pueden pro-ducir en blanco y negro, a escala de grises o a color.

Canal alfa, valor independiente del color que se asigna a cada píxel de la imagen, utilizado para definir el grado de transpa-rencia de cada punto de la ima-gen.

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.

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

profundidad del color

coloresdisponibles

dpi y ppiSi bien es bastante común utilizar la denominación dpi para especi-ficar diferentes resoluciones, la re-solución del archivo de imagen se debe especificar en ppi (pixeles por pulgada). Más bien los dispositivos de salida usualmente especifican su resolución en dpi (puntos por pulgada) o en lpi (líneas por pulga-da).En algunos casos como por ejem-plo en los monitores de compu-tador, existe una relación de 1:1 entre los ppi y los dpi del archivo de imagen digital y del dispositivo de salida por lo que a veces se acos-tumbra llamarlos indiferentemente como dpi.

¿qué es dpi, lpi y ppi?ppi (pixel per inch): los pixeles por pulgada, miden la cantidad de información tomada por el escaner en la exploración en una pulgada cuadrada.

lpi (lines per inch): líneas por pulgada, conocida como linea-tura, mide la frecuencia de la trama del medio tono usado al imprimir una imagen.

dpi (dots per inch): puntos por pulgada es la medida de la re-solución de salida de un moni-tor, impresora o filmadora.

dpi.lpi.ppiRESOLUCIÓNCOMPRESIÓNIMPRESIÓN

Indica cuánto detalle puede observarse en una imagen. Te-ner 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 conven-ción es describir la resolución de la imagen con dos números ente-ros, donde el primero es la can-tidad de columnas de píxeles (cuántos píxeles tiene la imagen a lo ancho) y el segundo es la can-tidad de filas de píxeles (cuántos píxeles tiene la imagen a lo alto).Otras convenciones incluyen des-cribir la resolución en una unidad de superficie, por ejemplo píxe-les por pulgada,ppi

08. 08clase 7ESCANEOyFORMATOS

Para escalar una imágen al doble, es decir al 200% si la imágen era de 10x10 y quiero que la resolución fi-nal sea de 300 dpi, se debe doblar la cantidad de dpi, es decir, esta debe ser 600. De manera que el porcen-taje a escalar es proporcional al dpi. 10x10 por 2 = 20x20300 dpi por 2 = 600 dpi

10

10

20

20

40

40

300 dpi 600 dpi 1200 dpi

sin perdida de informaciónEs decir, supongamos que to-dos los pixeles de una imágen son del mismo color, se podría guardar simplificada de 2 x 2 pixeles sin compresión y entre-garía una imágen de12 bytes; se podría entonces guardar la imagen de tal manera que se describa como 4 pixeles negros iguales.

Como cada pixel toma 3 bytes para los colores RGB, entonces se necesitará de 3 bytes (basta guardar un solo pixel, los otros 3 son iguales) para almacenar dicha información más uno adicional para indicar cuántos de esos puntos negros iguales tenemos, 4 en este caso. Así, se ha comprimido la imágen de 12 bytes a una de 4 bytes. Lue-go sel archivo se descomprimi-rá al abrirlo y se conseguirá la exactarepresentación de la imágen sin ninguna pérdidad de cali-dad.

de la compresión

perdida de información

Trabaja bajo el principio que el ojo humano solo puede detectar hasta cierto rango los detalles de una imágen, cortando los que escapan por encima de este rango.

Los archivos JPEG están considerados como un for-mato dentro de este tipo de compresión y podrá variar el factor de calidad de 0 a 100%. Mientras más se acerque a 0%, el tamaño de archivo será más pequeño y su imagen perderá más de-talle. El mayor problema con este tipo de compresión es cuando abra y salve nue-vamente el archivo, perde-rá detalle, comportándose como si sacara una fotocopia de otra fotocopia.

de la impresión

Cada tipo de dispositivo (esca-ner, cámara digital, impresora, monitor de computadora) tiene un máximo número de puntos que puede procesar y desple-gar al margen de la cantidad de puntos que estén en la imágen. Por ejemplo en el caso de una impresora láser de 600 dpi puede imprimir hasta 600 pun-tos de información en una pul-gada. Un monitor de computa-dor puede desplegar aprox. 72 dpi, típicamente, de informa-ción por pulgada.

Cuando una imagen tiene más puntos que los que el disposi-tivo soporta, estos puntos son despreciados; es decir incre-mentan el tamaño del archivo pero no mejoran la impresión o imagen de pantalla.Al contrario, cuando la imagen tiene menos puntos que los que el dispositivo puede reproducir, esta puede no ser tan clara. De manera que si imprimo una imá-gen a resolución de pantalla, 72 dpi, en una impresora láser de 600 dpi, la imágen será borro-sa pues la impresora no tendrá suficiente información.

08. 08clase 8PRE PRENSADIGITALSe entiende Pre Prensa Digital como el proceso de edición previo a la impresión, es decir, toda modifica-ción que se hace a un archivo, desde editar un texto, agregar imágenes y cambio de formato.

.tif .eps

img

A} .indd

.qx

PDF

}Pre Prensa Digital(proceso digital)

Rodillos ImpresiónOFFSET

Peliculas

Planchas de impresión

Impresoradigital

o

Per-Flight

Archivodiagramación

tarea CASCADAESTILO

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) 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.

La cascada estilo sirve para dar forma a un texto, de manera que tengo un contenido y pue-do presentarlo separado del diseño. programación semán-tica. Así, crendo un estilo, pue-do cambiar grandes porciones de un archivo facilmente debi-do a que se encuentran relacio-nados.

Podemos definir un estilo a base de definir muchos atributos se-parados por punto y coma.font-size: 10pt; text-decoration: underline; color: black

H1 especifica que se trata de un título mayor.text-align y color son atributos respecto al caracter del título. <html><head> <title>Ejemplo</title> <STYLE type=”text/css”> <!-- H1 {text-decoration: underline; text-align:center} P {font-Family:arial,verdana; color: white; background-color: black} BODY {color:black;background-color: #cccccc; text-indent:1cm} // --> </STYLE></head>

fuentes - font ESTILO CARACTER

nombre del valor posible ejemplo atributo color valor RGB o nombre de color color: #009900; color: red; Indica el color del texto. Lo admiten casi todas las etiqetas de HTML. No todos los nombres de colores son admitidos en el estandar, aconsejable entonces utilizar valor RGB.

font-size xx-small | x-small | small | font-size:12pt; medium | large | x-large | xx-large font-size: x-large; Unidades de CSS Sirve para indicar el tamaño de las fuentes de manera más rígida y con mayor exactitud. font-family serif | sans-serif | cursive font-family:arial,helvetica; fantasy | monospace font-family: fantasy; (todas las fuentes)

Indica la familia de tipografia del texto. Los primeros valores son genéricos, es decir, los exploradores las comprenden y utilizan las fuentes que el usuario tenga en su sistema. Si el nombre de una fuente tiene espacios se utilizan comillas

font-weight normal | bold | bolder | lighter font-weight:bold; 100 | 200 | 300 | 400 | 500 | 600 font-weight: 200; | 700 | 800 | 900 Sirve para definir la anchura de los caracteres. Normal = 400 . Bold y 700 también son iguales.

font-style normal | italic | oblique font-style:normal; font-style: italic; Es el estilo de la fuente, que puede ser normal, itálica u oblícua.