Lenguaje computacional

Pre Prensa Editorial

Javier Muñoz TavolariSegundo Trimestre - 2007

IndicePortadas de Diarios:::29Junio.........................5

Color e Impresión:::06Julio...............................9

Herramientas InDesign:::13Julio................15

Extensiones de Imágenes:::20Julio..............19

PostScript y Trupetype:::27Julio...................27

Diseño Semántico:::03Agosto.........................31

Arquitectura del Diseño:::10Agosto.........35

:::17Agosto................39

:::24Agosto...............43

:::31Agosto...............47

29 Junio

Portadas de Diarios

Contenido básico

Tarea1:Reconocer distintas

maneras de disponer el contenido en una

portada de un periódico internacional.

La diagramación es un juego de geometría, más importante que el diseño es el contenido.

Se diseña para colocar contenido.

Jakob Nielsen (1957-, Copenhague) expone que lo habitual es que un usuario no lea con detalle ni siquiera una mínima parte de los textos de una página web. En su lugar, y por economía de tiempo, el usuario se limita a hojear la página. Es decir, el usuario realiza un rápido barrido visual de cada página buscando elementos que llamen su atención. Por tanto es fundamental la utilización de elementos como:

* Palabras resaltadas mediante negrita y cambios de color o de tamaño. En este sentido los hipervínculos actúan como elementos de atracción visual pues se destacan del resto del texto. * Listas de elementos con viñetas o numeradas. * Títulos de sección y titulares breves intercalados (también llamados ‘ladillos’).

Debido a esta economía de lectura, según Nielsen, el contenido de un texto debe organizarse correctamente para ganar la atención del lector. Por ejemplo las ideas más importantes deben aparezcer al principio, y luego la argumentación de la misma. De esta forma, nos aseguramos que el posible lector recuerde mejor la información.

http://www.newseum.org/todaysfrontpages/default.asphttp://www.garcia-media.com.ar/

http://www.useit.com/alertbox/

Jakob Nielsen

06 Julio

Color e Impresión

En los colores encontramos los colores primarios RBG (red, blue, green) y los colores secundarios CMYK (cyan, magenta, yellow, key color).

Con estos últimos se forma la cuatricromía, que es la impresión de CMYK atraves de puntos lo cual da la ILUSION DEL COLOR.

Color

RGBModelo Aditivo

CMYKModelo Substractivo

Espectro visible y gamas de color

Con Tinta Negra

En Cuatricromía

Tramas de Semitono

La trama de semitono en cuatricromía, cuando estan en su ángulo correcto (cian a 105º, amarillo a 90º, magenta a 75º, negro a 45º) surge un motivo poligonal que recuerda a una flor, llamado “roseta”.

Efecto MoirèEs un efecto óptico que aparece cuando las direcciones de trama se superponen de manera errónea, formando rosetas irregulares.

En apariencia son como unas aguas que se forman en la fotografía, distorsionando el resultado y eliminando los detalles.

Colores de Cuatricromía

Trapping o Reventado

Es el descalce del color y es ajustar cómo imprimen los colores de las diferentes planchas para corregir los defectos visuales que producirán los inevitables pequeños fallos en el registro de las planchas al imprimir.

El orden de impresión en Cuatricromía es Cyan – Magenta – Amarillo

– Negro. Al imprimir un color sobre otro se van

formando la variedad de colores necesarios para la imagen que se quiere

imprimir.

Tarea2:Tomar el diario de

Tarea No.1 y sobre la base de la geometría y

descubrimientos del Diseño hacer una réplica del diario en un archivo de InDesign.

Reserva o Sobreimpresión

La sobreimpresión es imprimir una tinta encima de otra. Es decir, imprimir los colores de todos los elementos sin tener en cuenta los colores que puedan tener elementos que haya debajo, sumando así los valores de todos ellos donde coincidan.

13 Julio

Algunas Herramientasde InDesign

QuarkXPress es un programa de Autoedición para computadores Mac OS X y Windows.Una de las primeras tecnologías que hicieron despuntar al programa fue el uso de XTensiones que permiten a desarrolladores externos implantar su propio software mediante el uso de extensiones creadas por ellos mismos.QuarkXPress es el único, junto a Adobe InDesign, que está considerado como una herramienta verdaderamente profesional, dentro del gremio de editores, impresores y fotomecánicos.

Importando ImágenesSi traemos imágenes al documento de la forma Drag&Drop, estás le suman peso innecesario al archivo, por lo que se utiliza la herramienta Place (Ctrl+D), la cual hace una referencia del archivo ubicado en una carpeta expecifica. Se recomienda que esta carpeta contenga todas las imágenes necesarias, y que se ubique dentro de la carpeta que contiene el documento.

Lo mismo se recomienda para las fuentes, en otra carpeta.

Tarea3:Crear una Bitácora Digital de las Clases en InDesign.Valorizar, tomar apuntess

e investigar, ser productivo al proponer ideas,

uso permantente de Herramientas Digitales.

www.quark.comhttp://www.adobe.com/es/products/acrobat/adobepdf.html

http://mashable.com/2007/07/25/pdf-toolbox/

PDF (Portable Document Format) es un formato de almacenamiento de documentos, desarrollado por la empresa Adobe Systems. Es multiplataforma, puede integrar cualquier combinación de texto, gráficos, imágenes e incluso música, es uno de los formatos más extendidos en Internet para el intercambio de documentos, y, entre otras cosas, es una especificación abierta.

Checkeo de Links Selector

Herramienta que sirve para seleccionar uno o más objetos contenidos

en alguna parte del documento. También se pueden agrupar con la

función Ctrl+G.

Para verificar que todas las imágenes estén bien vinculadas al documento, se usa el Linker (Shift+Ctrl+D), el cual entrega el estado de cada imagen, junto con su ubicación dentro del documento. Por lo mismo, es recomendable que cada imagen tenga un nombre claro y explícito de su contenido.

20 Julio

Extensiones de Imágenes

EPS Encapsulated PostScript

EPS es un formato de archivo gráfico PostScript que satisface 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. Se usa cuando transformamos una imagen RGB a CMYK y crea 5 separaciones de color.

PSD Photoshop Document

PSD es un formato que guarda una imagen como un grupo de capas, métodos de fusión, colores, textos, máscaras, canales de color, canales alfa, trazados, formas, configuración de tonos, entre otras. Este formato permite trabajar con distintas capas después de haber cerrado el programa, al contrario que el jpeg, pero ocupa mucho más espacio y es necesario tener Photoshop, ya que no se puede abrir con programas como el visor de imágenes y fax de Windows.

TIFF Tagged Image File Format

TIFF es un formato de fichero para imágenes. Su nombre (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. Trabaja con todo tipo de imágenes en profundidades de bit desde 1 a 32. Un aspecto muy práctico del formato TIFF es que permite almacenar más de una imagen en el mismo archivo. Además, es capaz de manejar distintas gamas de colores como el CMYK.

Imagen Original,Sin Comprimir (108,5KB)

Compresion Baja,84% menos de

Informacion (9,37 KB)

Compresion Media,92% menos de

Informacion (4,82 KB)

Compresion Alta,98% menos de

Informacion (1,14 KB)

JPEG Joint Photographic Experts Group

JPEG es un algoritmo diseñado para comprimir imágenes con 24 bits de profundidad o en escala de grises. Es un algoritmo de compresión con pérdida, Esto significa que al descomprimir la imagen no obtenemos exactamente la misma imagen que teníamos antes de la compresión.

Lossy compressionSe denomina algoritmo de compresión con pérdida

a cualquier procedimiento de codificación que tenga como objetivo representar

cierta cantidad de información utilizando

una menor cantidad de la misma, siendo imposible

una reconstrucción exacta de los datos

originales.

La compresión con pérdida sólo es útil

cuando la reconstrucción exacta no es indispensable para que la información

tenga sentido.

JPG al 1600%

JPG con mayor compresión a la derecha

Es el formato más utilizado para almacenar y transmitir archivos de fotos en la Web, pero la compresión con pérdida del formato no conviene a diagramas que incluyen textos y líneas. Una de las características que hacen muy flexible el JPEG es el poder ajustar el grado de compresión. Si especificamos una compresión muy alta se perderá una cantidad significativa de calidad, pero obtendremos archivos de pequeño tamaño. Con una tasa de compresión baja obtenemos una calidad muy parecida a la del original, y un archivo mayor.

PNG Portable Network GraphicsPNG es un formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps. Este formato fue desarrollado en buena parte para solventar las deficiencias del formato GIF y permite almacenar imágenes con una mayor profundidad de color y transparencias (hasta 4 canales, RGB + alfa). PNG comprime mejor que el formato GIF, también proporciona unos rangos de color mucho más ricos y precisos, pero no es capaz de soportar animaciónes.

GIF Compuserve Graphics Interchange Format

GIF es un formato sin pérdida de calidad, siempre que partamos de imágenes de 256 colores o menos. Una imagen de alta calidad, como una imagen de color verdadero debería reducir literalmente el número de colores mostrados para adaptarla a este formato, y por lo tanto existiría una pérdida de calidad. Permite transparencia de 1 bit, de tal forma que cada pixel de la imagen puede ser o no transparente. Sus últimas versiones permiten hacer animaciones simples, aunque la compresión es muy deficiente.

Al convertirse a GIF una imagen de más de 256bit, se obtiene un resultado

granulado

Comparación de resolución entre JPG y

PNG

Bitmap Vs. Vector

Los Bitmaps son imágenes en mapas de bits, los cuales mapean las coordenadas X y Y junto con el color de cada pixel contenido.

Luego dibujaremos un círculo en un Mapa de Bits:

Cada pixel contendiro dentro de un mapa de bits contiene 3 datos, su ubicación en X, su

ubicación en Y, y el color que lleva.

En el caso de la primera imagen, la información almacenada es (8,8,0)

(8,4,0) (7,5,0) (8,5,0) (9,5,0) (6,6,0) (7,6,0) (8,6,0) (9,6,0) (10,6,0) (5,7,0) (6,7,0) (7,7,0) (8,7,0) (9,7,0) (10,7,0) (11,7,0) (4,8,0) (5,8,0) (6,8,0) (7,8,0) (8,8,0) (9,8,0) (10,8,0) (11,8,0) (12,8,0) (5,9,0) (6,9,0) (7,9,0) (8,9,0) (9,9,0) (10,9,0) (11,9,0) (6,10,0) (7,10,0) (8,10,0) (9,10,0) (10,10,0) (7,11,0) (8,11,0) (9,11,0) (10,11,0) (8,12,0)

http://aralbalkan.com/759http://www.prepressure.com/image/bitmapvector.htm

En vez de mapear cada pixel, una imagen vectorial usa una ecuación matemática para definir las secciones o vectores de una imagen.

A simple vista ambas extensiones son iguales, pero la diferencia está al tratar de agrandarlos. Al hacerlo, La imagen vectorial sólo cambia las coordenadas, no la función, por lo que no importa la medida de la imagen, siempre se verá igual. Un mapa de bits no puede generar más pixeles de los que ya tiene, entonces, para compensar, replica los existentes entregando un nuevo tamaño, pero cada vez más borroso.

Los vectores pesan mucho menos que los bitmaps, y aunque tienen facilidad al ser escalados, no se pueden comparar con la calidad y realismo fotográfico que entrega un Mapa de Bits.

En vez de los 3 datos del Bitmap, el dibujo vectorial toma dos medidas y una

funcion para hacer el dibujo.

(X1,Y1,X2,Y2,Función)Donde:

X1,Y1 es el pto. de inicio,X2,Y2 es el pto. de término,

Función es la función usada para crear el objeto.

27 Julio

PostScript y TrueType

Es un lenguaje de descripción digital de página, es decir, un lenguaje que proporciona instrucciones para que cualquier máquina sepa qué y cómo se debe imprimir o representar una página. Puede contener tanto textos como imágenes en mapa de bits o vectoriales. Su gran ventaja está en que es independiente del dispositivo y resolución ya que lo único que se necesita es que la máquina sea compatible con postscript, es decir, que entienda e interprete esas instrucciones. Esto permite poder diseñar una página en un ordenador y poderlo imprimir en cualquier impresora postscript de cualquier marca o modelo.Fue desarrollado por Adobe Systems en 1984 y adaptado por Apple un año más tarde convirtiéndose en el sistema estándar de las principales máquinas y programas digitales de diseño e impresión.

PostScript

John Warnock.

Los fundadores de Adobe e inventores del lenguaje

PostScript.

Charles Geschke

http://gusgsm.com/que_es_postscripthttp://www.truetype-typography.com/tthist.htm

http://www.postscript.org/FAQs/language/FAQ.html

Una fuente truetype es simplemente un conjunto de dibujos vectoriales (que se pueden escalar sin pérdida de calidad: más información en nuestros artículos sobre diseño gráfico digital), guardados dentro de un fichero, con el formato: nombre_fuente.ttf

Este tipo de fuentes fue creada por Apple Computer, Inc. a finales de 1980.

TrueType

También existe una versión en inglés de

cómo se creó TrueType desde el punto de vista de

Microsoft.

http://www.microsoft.com/typography/TrueTypeHistory.mspx

Las primeras fuentes TrueType creadas son

Times Roman, Helvetica y Courier, por Sampo

Kaasila.

03 Agosto

Diseño Semántico

Semántica viene del griego ‘semantikos’, que significa “significado relevante”. Aplicado al término web semántica: tiene que ver con el significado de las cosas, y de las relaciones de unas con otras.

El contenido no es lo único que tiene un significado; el código que se usa para estructurar y presentar un contenido también lo tiene, y es importante que esté en consonancia con el contenido. Esta es la base fundamental de la web semántica.

El (X)HTML es un lenguaje que da estructura a un documento a través de etiquetas.

Ej. al poner las etiquetas <p> y </p> alrededor de un texto, estamos designando ese texto como un párrafo y al usar las etiquetas <strong> y </strong> denotamos énfasis.

Diseño SemánticoMuchos desarrolladores

y diseñadores no ponemos mucha atención

a estos elementos, simplemente tratamos

de que la estructura sea visible en la página, sin

preocuparnos por el codigo.

<p>un texto</p><p>otro texto</p>

se ve practicamente igual que

un texto <br><br> otro texto

Sin embargo, el primer bloque tiene

un significado que el segundo no tiene.

Ventajas

http://www.maximiliano.cl/http://www.csszengarden.com/

http://www.ilovejackdaniels.com/cheat-sheets/css-cheat-sheet/http://www.w3c.es

* Describe el contenido.

* Se independiza de la forma en que es presentado (eso permite, por ejemplo, poder tener diferentes estilos para un mismo documento).

* Más fácil encontrar elementos y cambiarlos para su mantenimiento.

* Es más accesible, porque los navegadores de solo texto, lectores de pantalla, y navegadores viejos, o sin javascript u otras tecnologías pueden entenderlo.

* El código semántico es más simple, por lo tanto las páginas cargan más rápido.

Las hojas de estilo en cascada (CSS) son un lenguaje formal

usado para definir la presentación de un

documento estructurado escrito en HTML o XML.El W3C es el encargado

de formular la especificación de las

hojas de estilo que servirá de estándar para los agentes de usuario o

navegadores.

La idea que se encuentra detrás del desarrollo

de CSS es separar la estructura de un documento de su

presentación.

10 Agosto

Arquitectura del Diseño

1. Observar y análizar el medio en el cual se desenvuelve el ser humano, descubriendo alguna necesidad.

2. Planear y proyectar proponiendo un modo de solucionar esta necesidad, por medio de planos y maquetas, tratando de descubrir la posibilidad y viabilidad de la(s) solución(es).

3. Construir y ejecutar llevando a la vida real la idea inicial, por medio de materiales y procesos productivos.

Estos tres actos, se van haciendo uno tras otro, y a veces continuamente. Algunos teóricos del diseño no ven una jerarquización tan clara, ya que estos actos aparecen una y otra vez en el proceso de diseño.

Hoy por hoy, y debido al mejoramiento del

trabajo del diseñador, podemos destacar otro acto fundamental en el

proceso:

4. Evaluar, ya que es necesario saber cuando el diseño está finalizado.

Diseñar como acto cultural implica conocer

criterios de diseño como presentación,

producción, significación, socialización, costos, mercadeo, entre otros.

Estos criterios son innumerables, pero son contables a medida que el encargo aparece y se

define.

Arquitectura del Diseño - Fases

Marshall McLuhan (1911-1980)

Tarea4:Diseño y Construcción

sobre soporte digital de Revista Escuela

Marshall MacLuhan, considerado el “Santo

Patrono” por la Revista WIRED

McLuhan es reverenciado como uno de los fundadores de los estudios sobre los medios y ha pasado a la posteridad como uno de los grandes visionarios de la presente y futura sociedad de la información. Durante el final de los años 60 y principios de los 70, McLuhan acuñó el término “aldea global” para describir la interconectividad humana a escala global generada por los medios electrónicos de comunicación.

El pensamiento de McLuhan respecto a los medios de comunicación se inicia a partir de las siguientes ideas: * Somos lo que vemos * Formamos nuestras herramientas y luego éstas nos forman

En esta línea, podría afirmarse que veía en los medios antes agentes de ‘posibilidad’ que de ‘conciencia’: así, los medios podrían compararse a caminos y canales antes que obras de valor artístico o modelos de conducta a seguir.