El documento presenta las notas de 10 clases de un curso de Lenguaje Computacional 1. Cada clase cubre temas relacionados con diagramación, color, impresión y herramientas de software. Incluye definiciones, contenido de clase, datos adicionales y ejercicios propuestos.
2. Indice
PRIMERA CLASE PAGINA 1
29 JUNIO
SEGUNDA CLASE PAGINA 4
6 JULIO
TERCERA CLASE PAGINA 7
13 JULIO
CUARTA CLASE PAGINA 9
20 JULIO
QUINTA CLASE PAGINA 12
27 JULIO
SEXTA CLASE PAGINA 24
3 AGOSTO
SEPTIMA CLASE PAGINA 28
10 AGOSTO
PAGINA
OCTAVA CLASE
FECHA
PAGINA
NOVENA CLASE
FECHA
PAGINA
DECIMA CLASE
FECHA
4. CONTEXTO
CLASE
A partir de una portada
de diario, hacer un estu- Diagramación para prensa, tiene que ver con cómo se
dio de la diagramación va a imprimir en la impresora. Del contenido al medio
del diario y poder establ- impreso. Diseño de prensa, proceso producto condi-
ecer relaciones sobre los cionante del diseño. El diseño va teniendo límites. Par-
espacios entre los párra- te de un proceso productivo. Comprender lo macro.
fos y los títulos. También, Inserto
ver las diferentes tipo- en algo comercial. Responder a necesidades corpora-
grafías y ver su incidencia tivas.
sobre la lectura. Diario antiguamente: tipos móviles. Plomo se derretía
(lineotipia) y se escribía, entonces se hacían cajas que
imprimían las palabras.
Tipos móviles de metal,
usaban pelos porque el
tipo móvil tendían a jun-
tarse y hacían los pelos. La
manera de cómo las per-
sonas leen aprovechar el
tiempo contenido.
Primera clase 2
5. DATOS: Ti pos moviles de Gutenberg
En vez de usar las habituales tablillas de madera confeccionó moldes en madera
de cada una de las letras del alfabeto y posteriormente rellenó los moldes con
hierro, creando los primeros “tipos móviles” Tenía que unir una a una las letras que
.
sujetaba en un ingenioso soporte, mucho más rápido que el grabado en madera.
Como plancha de impresión, amoldó una vieja prensa de vino a la que sujetaba
el soporte con los “tipos móviles” dejando el hueco para letras capitales y dibujos.
Estos, posteriormente serían añadidos mediante el viejo sistema xilográfico y ter-
minados de decorar manualmente.
DEFINICIONES
Pelos: líneas que acom- y quedaban estos pelos a de los textos y fotos.
pañan a los textos, estos los lados. Imagen: comprende a
nacen de la impresión Barras laterales: co- todo el diario constituido
que se hacía antigua- lumnas a los lados que por fotos y textos.
mente. acompañan a la noticia Heather: títulos, avisos,
Antes, al imprimir letras, central. flecha.
se acomodaban en una Diario: Que el usuario Body: títulos, noticias,
caja las cuales bordea- acceda al contenido. información.
ban el texto y al pasar la
Grillas: siguen una ley Footer: publicidad.
tinta se manchaba
constante de disposición
Primera clase 3
6. Logo: Es la marca, es decir el el nombre del diario y
cada cual tiene su particularidad. Por esto, siguen con
el tiempo y son reconocidos posteriormente por el
lector.
Primera clase 4
8. DEFINICIONES
CONTEXTO
Exposición de 2 tareas anteriores. Cuatricromia: cyan, magenta, ama-
Estudio del color y la impresión. rillo, negro.
Papel de diario: papel Bío Bío.
CONTENIDO
CLASE
Espectros de luz
Color RGB: tendencia a los
Aditivos: rojo, verde, azul (RGB; colores de pantalla). verdes.
Tienden al blanco. CMAN: cuatricromía.
Sustractivos: cyan, magenta, amarillo (CMAN; colores
de impresión). Tienden al negro. Tramas de semitonos
Trabajando con tintas ne-
gras, se representa me-
diante escala de grises
con ‘puntos’. Se mide en
grados donde 45º da un
separación de puntos
equivalente a un cierto
gris y 100º da un gris más
oscuro, ya que los puntos
CYMK están más unidos.
RGB
Segunda clase 6
9. Cuatricromia
Los colores están juntos pero no calzan uno encima de otro, sino que uno al lado
de otro.
Tintas planas y matices
Va del 100% donde cada punto está al lado de otro, formando una textura plana
o plena. Luego, a medida que se va disminuyendo el porcentaje, se van formando
distintos modos de grises.
que las cruces de calce Imágenes mapa de bits y
Cuatricromia
estén en todas las pági- resolución
Los colores pare ser im-
nas. Al imprimir una tinta DPI: dots per image (pun-
presos deben estar sepa-
sobre otra da otro color, tos por imagen).
rados. Para hacer que cal-
por lo tanto para ser fiel al La resolución de la ima-
cen los colores y por cada
color que se quiere usar, gen no es la misma que
película (5 colores) se im-
se debe dejar un espacio la de salida, ya que puede
primen cruces de calce
en el lugar donde se qui- variar el dpi (ppi).
que hace que las plan-
ere imprimir dicho color.
chas calcen. También, se
Al hacer esto, a veces se
imprime un negro de
producen descalces, lla-
registro que siempre está
mados tapping.
en las películas. Éste hace
Segunda clase 7
10. Lineatura o frecuencia de trama
Punta de la forma, denominación a partir de la linea-
tura. Existe la línea baja y la línea baja, siendo la línea
alta un punto más pequeño y la línea baja es un punto
más grande. Línea trama no es lo mismo que la linea-
tura ya que una está insertada en otra.
Tono continuo
Se trata de imágenes dig-
italizadas, es decir, que se
construyen con vectores.
Segunda clase 8
12. CONTEXTO
Uso de herramientas del programa InDesign para hac-
er una portada con la diagramación de un diario.
DEFINICIONES
Cutter: espacio entre columnas.
Shift: presionarlo para achicar y agran-
dar imágenes.
InDesign: para diagramar.
Photoshop: mapa de bits.
Illustrator: trabajar con vectores
Tercera clase 11
13. CONTENIDO
CLASE
Paso 1: en el escritorio hacer una
carpeta con imágenes.
Paso 2: se eligen columnas y se
hacen 4 con cutter de 1 cm.
En la barra de herramientas, se pu-
eden sacar las guías para ver cómo
se ve sin las guías.
Paso 3: place/import para
insertar fotos.
Paso 4: copiar la foto y
después pegarla adentro
del cuadrado.
Paso 5: para copiar el mis-
mo color de un texto se
selecciona el texto que
se quiere copiar se poner
cuenta gotas y se copia el
color.
Paso 6: exportar al PDF.
Paso 7: comprimir a may-
or o menor grado. Con-
figurar imágenes.
Tercera clase 12
15. CONTEXTO
A partir de la clases hacer una bitácora que contenga todo lo que se considere nec-
esario e importante. Corrección de la bitácora en cuanto a diagramación, uso de
herramientas.
CONTENIDO
CLASE
En las bitácoras, se debe hacer
diferenciaciones de títulos y tex-
tos. La idea es formar una cierta
jerarquía mediante recursos grá-
fico.
Imágenes: se deben vincular
para agregarlas al documento, de
esta manera no es tan pesado. Por
lo tanto, siempre se debe tener un
respaldo de las fotos y de las fuen-
tes también ya que puede suced-
er que no siempre esté la fuente
deseada en otro programa.
Cuarta clase 14
16. DEFINICIONES
Formato de imagen: formato para visualizar, almacenar o escanear imágenes,
como pueden ser BMP, TIFF, GIF, JPEG o JPEG progresivo entre otros.
Formato BMP (Bit Map): tiene la dificultad de la escasa compresión que realiza
en los archivos.
A raíz de Internet y del trabajo con herramientas gráficas, la importancia prima en
la compresión que a su vez respete a la calidad, de forma que formatos como el
GIF y el JPEG se han comido rápidamente el mercado.
Formato GIF,(Graphics Interchange Format): formato de imágenes comprimi-
das diseñado para minimizar el tiempo de transferencia de archivos sobre las
líneas telefónicas. Es el formato más utilizado para mostrar gráficos de colores
indexados e imágenes en documentos HTML (hypertext markup language)
obre World Wide Web y otros servicios online.
Formato JPEG (Joint Photographic Experts Group): formato que se utiliza
comúnmente para almacenar fotografías y otras imágenes de tono continuo, y
también se utiliza en documentos HTML para Internet. A diferencia del formato
GIF, JPEG guarda toda la información referente al color en RGB.
Formato TIFF,(Tagged-Image File Format): se utiliza para intercambiar archi-
vos entre distintas aplicaciones y plataformas del computador.
Cuarta clase 15
18. CONTEXTO
Segunda corrección de las bitácoras. Se toma en cuen-
ta el uso de las herramientas del progama, valorizar
los apuntes tomados y la investigación que se hace a
propósito de los temas hablado en clases.
CONTENIDO
CLASE
Los archivos al contener impresión y no basarse script porque éste es un
hartas imágenes, tienen en los colores que se ven archivo de impresión y
un gran tamaño, por lo en la pantalla, porque de- muestra cómo se verían
tanto, la idea es reducir- pende del perfil de ésta. los colores si estuvieran
los para que no pesen por lo mismo, existen los impresos.
tanto. El formato PDF jus- dos modos de trabajar
tamente es un sistema de el color, basando en el
compresión; sin embargo, RGB (colores de pantal-
configura los colores, en- la) y el CYMK (colores de
tonces se deben separar impresión). La solución
los colores en cuanto a la sería guardarlo en post-
Quinta clase 17
19. DATOS: Sobre el Postscri pt
el código que reciben.
qué debe imprimir. Los
PostScript es un “len-
Puede contener dentro
documentos PostScript
guaje de descripción de
datos de todo tipo: Tex-
se destinan a imprimirse
página” es decir, es un len-
,
tos, Imágenes binarias y
en aparatos PostScript,
guaje de programación
descripciones mátemáti-
es decir, en aparatos que
que se usa para decirle
cas de gráficos (es decir, “
tienen un dispositivo in-
a una máquina desti-
dibujos vectoriales “).
terno capaz de descifrar
nada a imprimir cómo y
Antes, para pasar documentos de un sistema a otro para imprimir, las calidades y
resoluciones variaban según los aparatos y había que adaptar los documentos a
cada uno. Para esto, necesita un procesador que actúe como intérprete traductor
entre el código PostScript “universal” y la máquina. Eso es lo que se llama “intérprete
PostScript” También se le denomina RIP (Raster Image Processor).
.
Quinta clase 18
20. Archivo de alta calidad de impre-
PDF PS
sión
Por lo tanto, realiza descripciones de operaciones matemáticas para que se eje-
cuten, un lenguaje básicamente “vectorial” Entonces, puede incrustar “dentro” de
.
sus ficheros objetos de mapas de bits (es decir, imagenes formadas por series or-
denadas de bits muy grandes). Eso quiere decir que un fichero con pocos Kbs de
instrucciones pueden llevar incrustados ficheros de megas y megas de tamaño
Quinta clase 19
21. DEFINICIONES
Opciones al guardar un
Fichero PostScri pt Codificacion:
fichero PostScri pt
Es un conjunto de código ASCII: En este caso, los
Previsualizar: Las op-
PostScript que describe datos van como código
ciones son básicamente
generalmente un con- ASCII (es decir: texto del
tres: (a) Ninguna, (b) 1 Bit
tenido destinado a la im- más básico). Es la opción
(Blanco y negro) (c) 8 Bit
presión. con la que los ficheros
(color), pero con ciertas ocupan más sitio
variantes. Binaria: Aquí, los datos
Fichero EPS (Post-
Tiff: . Puede ser de ima- se codifican en forma
Scri pt Encapsulado)
gen de línea (1 bit / Píxel: binaria. Ocupan mucho
Es un tipo concreto de bitmap de blanco y ne- menos que en el caso
fichero PostScript. Es gro) o de color indexado anterior
monopágina. Está obliga- (8 bits / Píxel: 256 tonos JPEG: En esta tercera vía,
do a contener unos pará- de color). La resolución los datos se comprimen
metros PostScript deter- “por omisión” es 72 ppp usando el algoritmo
minados que describen JPEG, que es un sistema
Jpeg: fichero de color en
su tamaño de compresión “con pér-
formato jpeg de 72 ppp
didas”.
Quinta clase 20
22. Incluir trama de semitonos: Lo que hace es “incrustar” una trama de semitonos
PostScript concreta (incluidos todos sus parámetros: Lineatura, ángulo de trama,
función del punto,…).
Incluir función de transferencia: Esto permite incrustar “curvas de transferencia”
de tinta dentro de un archivo (que el 10% de tinta cian se imprima como 8%, por
ejemplo).
Gestión de color PostScri pt: Esta opción es técnicamente un poco compleja, ya
que implica cierto conocimiento de la Gestión del color PostScript.
Blancos transparentes: Esta opción sólo aparece disponible con ficheros de
mapa de bits. Si la marcas, al colocar el fichero en otro programa, lo que es blanco
se mostrará e imprimirá como transparente.
Incluir datos vectoriales: En Photoshop, esta opción sólo aparece activa si inten-
tas guardar un fichero EPS conservando capas de texto o las formas vectoriales
como tales (sin interpretar (rasterize)).
Quinta clase 21
23. Fuentes True Type
Son fuentes vectoriales, pero no PostScript, de alta calidad que emplean funciones
cuadráticas, más rápidas en su procesamiento que las PostScripts, aunque ocupan
más cantidad de memoria y contiene hints para la mejora de la visualización a bajas
resoluciones.
Quinta clase 22
25. CONTEXTO DEFINICIONES
Semantica: Se dedica al estudio del
Corrección de bitácoras. Introduc-
significado de los signos lingüísticos
ción a la arquitectura del diseño.
y de sus combinaciones, desde un
punto de vista sincrónico o diacróni-
co.
CONTENIDO
CLASE
Lo que hace el diseño, es su contenido, ya que sin contenido no hay diseño. Por lo
tanto, es importante ver el contenido separado del diseño. Por ejemplo, la diagram-
ación, los párrafos sin los estilos de letras, sino que como una aspecto general de lo
que se va a construir. A partir del contenido se puede ir probando distintas formas
de verlo. De esta manera, se organiza la información para luego, convertirla al dis-
eño, construyendo así, las inetrefases entre usuario y contendo como un medio de
comunicación.
Sexta clase 24
26. DATOS
Arquitectura de la informacion
La Arquitectura de Información es la disciplina encargada del estudio, análisis, plan-
ificación y fundamentación de la organización, disposición y estructuración de es-
pacios de información, y de la selección y presentación de los datos contenidos en
los sistemas de información interactivos. Su principal objetivo es facilitar al máximo
las tareas que ejecutan los usuarios y los procesos de comprensión y asimilación
de la información que se les presenta, de acuerdo a los objetivos planteados en la
fundamentación del proyecto.
Origen
del usuario y se produzca
Wurman, arquitecto de a los ciudadanos en gen-
un fenómeno de persua-
profesión, estaba inte- eral. Era una concepción
sión, conocimiento o in-
resado en la clase de más próxima al mundo
formación simbiótica,que
interacción que se pro- del diseño gráfico y a la
se traspasa de un sistema
ducía entre las personas Visualización de infor-
a otro, según sean los ob-
y su ámbito urbano, y en mación que al medio
jetivos del proyecto en
el tipo de medios que digital.
general y los objetivos
podían ayudar a trans- Trata de que interactivi-
iniciales del usuario al in-
mitir la información de dad, navegación y con-
teractuar con la interfaz.
estos entornos a los pro- tenido, sinérgicamente,
fesionales de la arquitec- permitan una integración
tura, ingenieros, turistas y sistémica con el cerebro
Sexta clase 24
27. Diseno semantico <div id=”principal”>
La semántica, aplicada a la web, tendría que ver con el <div id=”header”>
significado de las cosas, y de las relaciones de unas con <h1>Mi Pagina</
h1>
otras. el contenido no es lo unico que tiene un signifi-
</div>
cado. El codigo que se usa para estructurar y presentar
<div
este contenido también lo tiene, y es importante que id=”navegacion”>
esté de acuerdo con el contenido. <ul>
El html es un lenguaje que da estructura a un docu- <li>Inicio </
mento a través de etiquetas. li>
<li>Seccion 1
La coherencia entre los significados de contenido y
</li>
código creará una estructura lógica que hará que el
<li>Seccion 2
contenido sea entendido más fácilmente indepen- </li>
dientemente de la presentación, medio o estilo en el <li>Seccion 3
que se vea. Además hará mucho más facil el crear y </li>
<li>Seccion 4
mantener el código
</li>
<li>Seccion 5
#principal{ body{
</li>
width:600px; background-
</ul>
background-color: color:#efefef;
</div>
white; color:#666666;
<div
} font:11px/16px Ari-
id=”contenido”>
#contenido{ al, Helvetica,sans-
<h2>El titulo de
width:400px; serif;
este contenido</h2>
} }
<p>Lorem ipsum
#navegacion{ #principal{ back-
dolor sit amet, con-
width:150px; ground-color:white;
sectetuer adipiscing
} }
elit.
#header{
height:60px;
Sexta clase 25
28. CHARLA: Codigos de Programacion
Lo que uno ve en la pantalla, en realidad no existe, ya que los colores, las letras, etc.
están basados en códigos visualizados.
Cascadas de estilos ----- Cascading Style Sheets (CSS)
Consiste en definir códigos.
W3C, agregar esiloes a la web
WIKI, agregar estilos a html
IBM, que genere un len- GML (lenguaje de marcas gener-
guaje/documento alizado
SGML, mismo lenguaje más es-
tandarizado.
HTML, lenguaje de marcación
<> hipertextual
SMGL, más simplificado
CSS nivel 1, recomendación ofi-
Código para un tag que
cial cascadas de estilos
define la estructura de un
documento.
CSS nivel 2,segunda recomen-
dación oficial
Sexta clase 25
29. Codigos
h1 (color: #F00;)
selector propiedad valor
<H1>
Título para la página. Después, se van a definir fuen-
tes, tamaños, etc.
De esta manera, se define el color del título (h1). h1(color:#F00,)
Selectores basicos *{...}
universal
tipo o etiquetada
contenido principal
p{...} Todos los ‘a’ dentro de un
p a{color:#F00;}
párrafo son rojos
Descendentes
p*s{color:#F00;}
p span {...} El link es de color rojo
Sexta clase 26
30. CLASE
Estilos
Estilos de parrafos Estilos de objeto
Estilos de letras
Sirve para hacer fondos y
Basic character styles
Cuál es el estilo de letra
cuadrados atrás.
Character styles
que se va a usar:
Basic character formats
Advance character for-
mats
Character colors
Sexta clase 27
32. CONTEXTO
Correción de tarea en la cual se debía hacer un levantamiento de la revista Wired y
hacer una lenvantamiento de las actividades de la Escuela.
Tarea de levantamiento de la revista
A partir de la revista, hice un esquema de los temas más importante (en forma
general) que se encuentran en la revista.
Portada 1 FOTO TÍTULO
FECHA
NOTICIAS
Indice
FECHAS
9 FOTOS
CONTENIDO
1 PAGINA
Septima clase 29