U.F.1: Trazado y imposición digital

N.F.1: Conceptos previos: aspectos tecnicos.

20/09/2013

Cuando cerramos un archivo para imprimir , que tenemos que tener en cuenta?

- Marcas de corte, sangrado, margenes..

- Medidas del documento.

- Que el documento este en CMYK o que a la hora de hacer el pdf se ponga en CMYK.

- Modo de color.

Modos de color 

RGB: 

Valor: 24 bits/ pixel.

16'7 millones de tonos.

- 3 Colores primarios
- Colores Luz
- Sintesis Aditiva (Emisión)

R: 255
G: 255 → = BLANCO
B: 255

CMYK:

Valor: 32 bits/ pixel.
4295 millones de tonos.

- 3 Colores primarios
- Colores Pigmento
- Sintesis Substractiva (Reflexión)


C: 100
M: 100 → = NEGRO
Y: 100

TINTAS PLANAS:

Las tintas planas son tintas especiales mezcladas previamente que se utilizan en lugar de, o además de, las tintas de cuatricromía 

Que es un perfil de color? Cuando se aplica? 

Un formato A4 con 3mm de sangre por cada lado: que medida hará? 

27/09/2013

Trama: 

Es la descomposición de una imagen en puntos de trama, para simular grises o tonos.

Para que sirve: 

Es la única manera de reproducir imágenes en forma masiva, sin necesidad de utilizar un cuerpo de impresión para cada tono.

Tipos de trama:

• Tramas AM: esta utiliza una especie de cuadricula para la disposición de los puntos de la trama.
  Este tipo de tramas presentan perdida de detalle en las luces y las sombras, en trabajos con lineaturas superiores a 175 lpi, como los que se pueden producir en el proceso CTP.

• Tramas FM: tramas estocásticas, son tramas compuestas de puntos ubicados en forma aleatoria. Este tipo de trama resuelve el problema de la perdida de detalle, ya que los puntos nunca son más pequeños de los que la prensa puede imprimir.
  
  
  Ofrecen mejor calidad respecto que las AM, sin embargo se deben considerar algunas limitaciones como la aparición de grano en algunos colores planos.
  
  
  
  
  

• Tramas XM: Para conseguir una impresión de alta resolución con unos niveles óptimos de calidad, es necesario utilizar tramas de los dos tipos anteriormente mencionados de forma híbrida. Esto significa la aplicación de tramas FM en las luces y sombras para reproducir los detalles más sutiles, y de tramado AM en los medios tonos para conseguir degradados suaves.

Formas de punto:

Cuadrada

Elipse

 

Diamante

Cruz

Redondo

Linea

Angulos de trama:

En la selección del color se utilizan diferentes inclinaciones de trama, que difieren entre si 30º, con la excepción del amarillo. Las más usuales son 45º para el negro, 15º para el cyan, 75º para el magenta y 90º para el amarillo. Girando un inclinómetro sobre el fotolito de selección podemos determinar, observando cuando se produce el efecto “moiré”, su inclinación de trama y por tanto, al color que pertenece.

Lineatura: 

se refiere al nombre de puntos que trama que hay por unidad de medida lineal. Se mide en  l/p lineas por pulgada  o  l/cm  lineas por cm.

Relación entre lineatura y resolución:

Contra más puntos de trama hay en una lineatura más resolución tiene la imagen.

01/10/2013

LPI: "Lines Per Inch" es una medida utilizada para identificar la resolución de una imagen impresa a medio-tono (halftone). 

PPP: "puntos por pulgada" es una unidad de medida para resoluciones de impresión, concretamente, el número de puntos individuales de tinta que una impresora o tóner puede producir en un espacio lineal de una pulgada.

DPI: "dots per inch, puntos por pulgada" unidad de medida de la resolución de una imagen (relacionado con la calidad) de un escáner, una impresora, etc. Sirve para medir la resolución, que es la cantidad de puntos que entran en una pulgada.

Relación entre lpi y ppp

Los ppp són el doble que los lpi. Por ejemplo 300 ppp - 150 lpi.

Relación entre dpi y lpi

Es número de tonos grises = ( resolución de salida / lineatura )² +1.


15/11/2013

Doblegar: doblar, o torçar encorbat.

Pliege:

• Marca que se hace al papel a la hora de plegar
• Pliege de signatura (pliege plegado).
• Papel que se doblará en todas las partes.

Formas de plegar

• Sistema de bosa:

El método se basa en plegar mediante una bolsa y rodillos plegadores. El sistema cuenta con: una bolsa en la que se introduce el pliego, dos rodillos transportadores y dos plegadores que giran en sentido opuesto.

• Sistema de cuchilla:

El plegado lo realiza una cuchilla que baja verticalmente y dos rodillos plegadores que se mueven en sentido contrario.
Primero, el pliego es introducido en plano, hasta ejercer contacto con un tope de registro. La cuchilla entonces desciende y empuja el pliego entre los rodillos plegadores. Estos rodillos forman el pliegue.

Tipos de plegado

Tipos de encuadernación

Pliege casado

La forma de realizar un casado es relativamente fácil, se parte del conocimiento de la cantidad de páginas que va a tener el libro, de sus medidas (largo y ancho) de su formato (prolongado o apaisado) encuadernación (alzada o embuchada) el área de impresión del pliego que tiene la máquina donde se va a realizar la impresión y las características de la plegadora. Con esos datos se realizan simples divisiones para averiguar las páginas que contiene cada pliego y el número de pliegos para la impresión.

PREPS 5

m2m3uf105muñozc

Creamos un documento en Indesign, y mediante cajas, y cajas de texto. Finalmente queda asi:

m2m3uf106muñozc

Después con los respectivos datos, tenemos que ir rellenando.

 

Formas Impresoras

• Offset

Características: impresión con agua y tinta (equilibrio). És el más utilizado

Aplicaciones: impresión en papel, cartulina y cartoncillo, impresos comerciales, publicaciones...

Acabados en línea: Encuadernación (revista), barnizado, numeración y troquelado (en máquina).

Requisitos de preimpresión: Ganancio de punto, equilibrio de color, tipo de fotolito (positivo, negativo, emulsión abajo, densidades reproducibles), grosor de las líneas finas, tramas (lineatura, forma del punto, inclinación), creciente aplicación CTP.

Previsión de crecimiento: baja

• Huecograbado

Características: mucha calidad en impresión de imágenes, rentable en grandes tirajes (elevado coste cilindro o camisa), gran velocidad impresión, tintas líquidas (disolventes), cilindros grandes (bandas anchas).

Aplicaciones: Papel, cartulinas y complejos flexibles (con superficie regular), envase y publicaciones de gran tirada.

Acabados en línea: encuadernación (revista), laminado, barnizado.

Requisitos de preimpresión: características especificas según el sistema de obtención de cilindros, máxima aplicación CTP.

Previsión de crecimiento: moderada.

• Flexografia

Características: proceso sencillo, amplia gama de tintas, económico, diferentes anchos de banda (banda estrecha), mejor calidad (en constante aumento).

Aplicaciones: cualquier soporte, incluso con superficies irregulares (cartón ondulado,...), envase y embalaje (en aumento: publicaciones, impresiones comerciales,...)

Acabados en línea: laminado, barnizado.

Requisitos de preimpresión: ganacia de punto, equilibrio de color, tipo de fotolito (positivo, negativo,..), grosor de las líneas finas, deformación de la imagen, tramas (lineatura, forma del punto, inclinación), poca aplicación CTP.

Previsión de crecimiento: elevada.

• Serigrafia

Características: toda la gama de tintas (mates, brillantes, fosforescentes,...), grosor de tinta, principalmente tintas planas, poco automatizado, baja velocidad, dificultad secado.

Aplicaciones: cualquier soporte, con diversidad de medida y forma, soportes de color, pequeños objetos, impresión en textil, carteles,...

Requisitos de preimpresión: tipo de fotolito (positivo, emulsión invertida, densidades reproducibles), grosor de les líneas finas, tramas (lineatura, forma del punto, inclinación), poca aplicación CTP.

Previsión de crecimiento: moderada, completada con tampografia.

• Impresión digital

Características: rentable en tirajes cortos (eliminación proceso previo), rapidez, calidad variable (según sistema; en aumento), información variable (excepto tipo óffset), dificultad de reproducción de fondos.

Aplicaciones: impresión en papel y cartulinas ( limitaciones de grosor según equipo), publicaciones y trabajos comerciales de corto tiraje, impresos personalizados.

Acabados en línea: encuadernación (espiral, revista, rústica,..)

Requisitos de preimpresión: según cada equipo (controlado por programa específico).

Previsión de crecimiento: muy elevada.

U.F.1: Preparación de archivos, imagenes, videos y sonido

N.F.1

19/09/2013

Diseño de páginas web

Infra estructura de comunicaciones: esta construida por una serie de ordenadores conectados entre si, que pueden compartir datos y recursos.

Una red de ordenadores abiertas: ningún país, organismo, entidad o individuo tiene un control global.

- Red anillo
- Red estrella
- Red en serie

Redes

- LAN: red de area local, los ordenadores están físicamente cerca unos de los otros.
- WAN: red de area extensa. Los ordenadores estan alejados físicamente unos de los otros.

Canal

Cable telefonico, fibra óptica, red electrica, satelites.

Dispositivos electronicos

Servidores, enrutadores, modems, electrodomesticos.

Conjunto de herramientas de software

Sistemas operativos, protocolos, aplicaciones, servidores, visualizadores o navegadores.

-1969: ARPAnet

-1985: NSF net

-1992: www

-1993: MCSA masaic

URL

Uniform Resource Locator

Dominios comerciales

.com

.edu

.net

.gov

.mi

.org

Dominios territoriales

.es

.uk

.jd

.no

.cn

.cu

.mx

.fr

.de

.tu

20/09/2013

Estandares Multimedia

Video: MP4, OGV / ogg

Graficos: gif, png, jpg, vectoriales (swf, sug, pdf)

Audio: mp3, ogg, acc, wma.

Otros formatos

Editores html

- De texto
- Wysiwyg

DNS ( Domain Name System )

Transforma URL a IP.

26/09/2013

Tim Bernens - Lee 

HTTP- Hiper Text Transfer Protocol
HTML- Hiper Text Markup Languaje

W3C

www -> World Wide Web

HTML5

html ( lenguaje marcado semantico) + CSS ( formato, estética, funcionalidad ) + Javascript ( Dinamiza, motor)

Etiquetas

• La mayoría de etiquetas deben cerrarse como se abren, pero con una barra («/») 

<html>:  define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML. 

<head>: define la cabecera del documento HTML; esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario como, por ejemplo, el título de la ventana del navegador. Dentro de la cabecera <head> es posible encontrar:

<title>: define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana.

<link>: para vincular el sitio a hojas de estilo o iconos. Por ejemplo:<link rel="stylesheet" href="/style.css" type="text/css">.

<style>: para colocar el estilo interno de la página; ya sea usando CSS u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta <link>.

<meta>: para metadatos como la autoría o la licencia, incluso para indicar parámetros http (mediante http-equiv="") cuando no se pueden modificar por no estar disponible la configuración o por dificultades con server-side scripting.

<body>: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del cuerpo <body> es posible encontrar numerosas etiquetas:

<h1> a <h6>: encabezados o títulos del documento con diferente relevancia.

<table>: define una tabla.

<tr>: fila de una tabla.

<td>: celda de una tabla (debe estar dentro de una fila).

<a>: hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el parámetro de pasada por medio del atributo href. Por ejemplo: <a href="http://www.example.com" title="Ejemplo" target="_blank" tabindex="1">Ejemplo</a> se representa como Ejemplo).

<div>: división de la página. Se recomienda, junto con css, en vez de <table> cuando se desea alinear contenido.

<img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo: <img src="./imágenes/mifoto.jpg" />. Es conveniente, por accesibilidad, poner un atributo alt="texto alternativo".

<li><ol><ul>: etiquetas para listas.

<b>: texto en negrita (etiqueta desaprobada. Se recomienda usar la etiqueta <strong>).

<i>: texto en cursiva (etiqueta desaprobada. Se recomienda usar la etiqueta <em>).

<s>: texto tachado (etiqueta desaprobada. Se recomienda usar la etiqueta <del>).

<u>: Antes texto subrayado. 

Prácticas

m2m8uf300

Para crear este horario utilizamos  <tr>  </tr> para crear una fila y para crear una columna <td>  </td> .
Después metemos la información que deseamos.
Ponemos en negrita el texto más importante con <b>  </b>, por último le damos color a la caja  por ejemplo  " <td bgcolor="#E2A9F3">P  "



m2m8uf301

1. Organizar el documento en tablas, para poder colocar el texto y imagenes. ( Insertar > tabla )
2. Depende de la fila deberemos de combinar las filas. ( seleccionando celdas y botón derecho combinar celdas )
3. Insertamos imágenes donde respectivamente necesitamos, y texto.
4. Crear los recuadros en photoshop, y colocarlo como imagen y ponerle encima el texto.

m2m8uf302

• Estructuramos la página en una tabla de 3 columnas dándole el valor más ancho a la del medio, y creamos unas 60 filas para organizar el texto por apartados.

• Para el titulo utilizamos un formato de encabezado 1 ( <h1> )

• Para los demás subtítulos utilizamos encabezado 3 ( <h3> ) para que quede proporcional con el título.

• Hay que darle el formato al texto que va de párrafo.

• Poner en cursiva o negrita lo necesario

• Hay que seleccionar las palabras que queremos vincular a una URL ( vínculo ) y en la página te redigira a la página que hayas puesto.

• Utilizamos la herramienta "anclaje con nombre"enlazar a una parte concreta de un documento.

Y en este documento lo hacemos servir para volver desde una región al principio, ponemos un ancla en cada región y otra en la parte del principio y entre si que se enlacen.

• Para hacer que un mapa sea interactivo y que te redirija según la zona que le des vaya al apartado que quieras, hay que utilizar la herramienta "herramienta zona interactiva poligonal"

Seleccionando la imagen le vas dando creando el contorno deseado a lo que quieres vincular, y después le das de nuevo aqui para que no siga creando puntos, y a otra zona para que no afecte a lo seleccionado.

Va quedando asi cuando lo seleccionas:

Y finalmente tienes que poner a donde quieres vincularlo

• Utilizamos background para tener una imagen de fondo la cual no podemos copiar desde la página además de que se puede poner otra imagen, animación, texto.. encima.

Quedaría asi en html: " <td width="675" height="313" background="img/mapa.png"><img src="img/regionsdvd5.gif" width="675" height="313" /></td> "

Para hacer el gif:
- Con photoshop le damos a ventana > animación
- Dejamos "visible" la capa que queremos que parpadee

- Creamos una nueva capa en la cual quitamos la "visibilidad" a la capa, y le damos los parámetros que deseamos los segundos que quieres que dure, y cuantas veces se repite.

m2m8uf303

Esta practica se basa en saber integrar botones, y vincular varias paginas adentro de una misma.

1. Crear botones:

Con photoshop hacemos un botón para cada estado que queramos que actue, por ejemplo para cuando se le pase por encima, para cuando este en la pagina actual, o cuando esta inactivo.
Y los guardamos para web.

2. Integración de botones:

En dreamweaver creamos una pagina llamada inicio, y creamos una tabla con sus correspondientes medidas, columnas y filas.

Para insertar el botón que tenga efecto al pulsarle encima, hay que ir a : insertar > objetos de imagen > Imagen de sustitución.

Hay eliges la imagen original, y la de sustitución es cuando pases por encima, tambien puedes indicarle la URL hacia donde quieres que vaya.

Ahora es hacerlo todas las veces necesarias.

3. Crear apartados:

Creas los HTML necesarios según pestañas tengas en tu inicio y las vinculas a los botones.

4. En cada apartado:

Por ejemplo en el apartado de música, hay sus subapartados y en cada uno crearemos otro html. 

Vinculamos el apartado "punk" a otro html, que profundice más en el tema:

Se vinculan las páginas mediante esta herramienta:

m2m8uf304

Aprendimos a como insertar un frame.

En la practica lo que hicimos fue reemplazar las direcciones de las imagenes y hacer frames.

m2m8uf305

Aprendimos hacer varios css, uno para imprimir y otro para pantalla.

Le ponemos que h1 tiene una clase: 

Y en el css ponemos que esa clase los parámetros que deseamos:

Para crear un nuevo css, es tan simple como ir Archivo > nuevo > CSS:

Así es como queda la practica acabada:

m2m8uf306

Utilizamos la etiqueta span para crear el menu de arriba, que nos redireccionara hasta el apartado que tiene.



Y para apartado hicimos un div:

A cada elemento del div le ponemos si tiene alguna clase, y en el css le ponemos lo que le corresponde.

Así es como queda la practica finalmente:

m2m8uf307

En este documento hicimos varios css, para cada parte del documento: 

Para estructurar el documento utilizaremos div:

Hay lo que hicimos fue hacer el menu superior, dandole una referencia para que fuera rediriccionado:

Posicionamiento CSS

• static: corresponde al posicionamiento normal o estático. Si se utiliza este valor, se ignoran los valores de las propiedades top, right, bottom y left que se verán a continuación.

• relative: corresponde al posicionamiento relativo. El desplazamiento de la caja se controla con las propiedades top, right, bottom y left.

• absolute: corresponde al posicionamiento absoluto. El desplazamiento de la caja también se controla con las propiedades top, right, bottom y left, pero su interpretación es mucho más compleja, ya que el origen de coordenadas del desplazamiento depende del posicionamiento de su elemento contenedor.

• fixed: corresponde al posicionamiento fijo. El desplazamiento se establece de la misma forma que en el posicionamiento absoluto, pero en este caso el elemento permanece inamovible en la pantalla.

m2m8uf308

En esta practica, tenemos como finalidad hacer un diseño personalizado y colocarlo en blogger.

Primero hacemos una previa de como queremos más o menos en photoshop, colocando reglas y haciendo los diferentes apartados.

Podemos poner la imagen de fondo en el Dreamweaver para poder guiarnos al hacer el blog.

Creamos un CSS para el blog, además también ponemos el CSS del reset, y ahora tenemos que crear la estructura donde pondremos las entradas, pie, cabecera...Que seria en este orden:

- div blog : es el que contiene todo el material.
- div cabecera: solo contiene la imagen de la cabecera.
- div principal: que es donde esta el titulo de la entrada, contenido y pie.
- div menu: para tener ordenadas y situadas las etiquetas de cada entrada.

Es cuestión de ir encajando cada div para que queden de forma adecuada, utilizando margin, paddin, y float.

Cuando ya tengo todo como quiero, para pasarlo a -> Blogger

1. Creamos un nuevo blog de pruebas.
2. Plantilla > Editar código HTML de la plantilla.
3. Borramos todo lo que contenga.
4. Abrimos un TextEdit, entonces hay tenemos que juntar la plantilla de blogger y la de dreamweaver.
5. Después de <div id="principal"> le colocamos <Blogger> 
6. Y cuando acaba la entrada ( después del pie ) colocamos </Blogger>
7. Dentro de <div class="titulo"> <BlogItemUrl><a href="<$BlogItemUrlgt;" title="external link"></BlogItemUrl><$BlogItemTitlegt; <BlogItemUrl></a></BlogItemUrl> </div>
8. A continuación <div class="contenido"><p><$BlogItemBody$> </p></div>.

m2m8uf308 ( Diferentes visualizaciones )

Primero creamos los css necesarios y los guardamos con el nombre oportuno en este caso hemos echo estos:

• bloc_mobil.css ( Móvil vertical )
• bloc_mobile_landscape.css ( Móvil apaisado )
• bloc_tablet.css ( Tablet )
• m2m8uf308.css ( Pantalla )
• reset.css

En el HTML le ponemos cada css asi:

Después en cada css le ponemos esto especificándole sus medidas:

• bloc_mobil.css

• bloc_mobile_landscape.css

• bloc_tablet.css

• m2m8uf308.css 

Hype

Es un programa de animación muy similar al flash pero esta dirigido para HTML5.

Para insertar un objeto se hace desde aqui:

Desde esta ventana puedes editar todo el contenido del documento ( tamaño del documento o objeto, color de fondo, letras, tipografia...)

Tenemos una parte donde poder crear nuevos fotogramas clave, para cambiar forma, opacidad, color...

Si le damos al botón de show scenes, podremos ver y editar las diferentes escenas de la animación, y podemos mandar que de una a la otra salte.

Después para poder ponerlo en nuestro blog tenemos que darte a Export as HTML 5 -> Folder:

Después abrimos el archivo .html que nos crea:

Ahora solo tenemos que colocar ese código en el sitio donde queramos que se reproduzca.