jueves, 9 de enero de 2014

Compaginación


Tipos de Libros

Los libros se pueden classificar segun como esten hechos fisicamente o por su contenido.
Según la confección hay libros de tapadura o de bolsillo
por ejemplo, mientras que el contenido establece dos grandes tipos de libros: el de ficción y el de o ficción.

Dentro de la ficción se encuentran los grandes generos de la literatura (poesia, narrativa i teatro)
i en canvio los libros de no ficción se dividen en:


Libros de referéncia

  • diccionarios
  • enciclopedias
  • libros de texto

Gran Enciclopedia Temática Planeta
Libros de texto BT (muestra de maquetación)



Libros instructivos

  • guías
  • recetas de cocina
  • manuales

Sony NEX C3 camera user manual leaked online
- ensaño y libro divulgativo
- guias de viaje
- albúm de fotos
- libro de juegos
            . pasatiempos
-biografia, diarios
- recojido de prensas




Partes del libro


.Portada, portada interior o página de título :
Contiene los nombres completos del autor o autores, el título completo del libro, la casa editorial (en la mayoría de los casos el logotipo de ésta), el lugar y el año de impresión, nombre del prologuista, méritos del autor, etc.
.Anteportada o portadilla
Es la hoja anterior a la portada, en la cual sólo se anota el título de la obra.
.Lomo
En ese lugar se imprimen, generalmente, el nombre del autor y título de la obra. Es la parte opuesta al corte de las hojas.
.Contraportada
Es la página que se está en la cara posterior a la portadilla, con el nombre de la serie a que pertenece el libro y otros detalles si este hace parte de una serie o colección, o puede también ir en blanco.
Prefacio, introducción y/o presentación
Es el preámbulo, el proemio o parte que precede al cuerpo principal de la obra. Página(s) destinada(s) al escrito que sirve como preparación para lo que es la materia principal del libro.
.Cuerpo de la obra
Es la parte medular de un libro y puede estar dividido en partes, capítulos, etcétera. Su capítulo final es el de las conclusiones.
.Glosario:
Parte del libro en el cual se definen términos específicos utilizados en la obra.
.Cubiertas:
Son la tapa del libro; los planos y el lomo de papel con que se forma la parte exterior del libro. En la cubierta anterior, también llamada portada exterior, es donde se imprime el título del libro, el nombre del autor y la casa editorial que lo publica.
.Índices y listados:
Pueden ser analíticos, temáticos; onomásticos, cronológicos, geográficos, de mapas, de ilustraciones, de gráficas, de fotografías, etc. y generalmente suelen ir al final de la obra .
.Apéndices o anexos :
Complementos o suplementos del cuerpo principal del libro constituidos por documentos importantes, datos raros, cuadros, etc.
.Camisa o forro:
Es una cubierta suelta de papel con la cual se protege el libro. En ella se imprime, generalmente a color, la portada del libro o el nombre de éste.
.Solapa :
La solapa es una prolongación lateral de la camisa o de la cubierta (si esta es de papel delgado) que se dobla hacia adentro y en la que se imprimen, generalmente, los datos del autor, la foto, otras obras publicadas, etc.
.Guardas :
Hojas de papel en blanco que unen el libro y la tapa (en algunos casos) y sirven para la protección de las páginas interiores.
.Preliminares :
Antiguamente se utilizaba una página anterior al texto e incluía Censuras, Loas, Privilegios, etc. Modernamente está en desuso o bien se utiliza en caso de existir algún texto de agradecimiento.
.Hojas de respeto o cortesía :
Hojas en blanco que se colocan al principio y al final del libro. En ediciones de lujo o especiales se colocan dos o más hojas de cortesía.
.Frontispicio o frontis.
Página anterior a la portada, que suele contener algún grabado, fotografía o viñeta.
.Página legal o de derechos :
Es la página que está en la cara posterior a la portada, donde se anotan los derechos de la obra: el número de la edición y el año, número de reimpresión, el nombre del traductor (si es una obra originalmente escrita en otro idioma), el año en que se reservaron los derechos, representados por el signo © (copyright), el lugar de impresión, la casa editorial, el International Standard Book Number (número internacional normalizador de libros) conocido como ISBN, etc.
.Agradecimientos :
Es la página en la cual el autor del libro da las gracias a quienes colaboraron de alguna forma con la publicación, investigación o elaboración del libro.
.Colofón:
El colofón va generalmente en la última página impar, en la cual se imprime el lugar de impresión, fecha y el nombre de la imprenta. También incluye el número de tirada (copias impresas)y el logotipo o escudo del impresor. Muchas veces se agrega el tipo de letra usado y la clase de papel.
.Epílogo o ultílogo:
Parte añadida al final de una obra literaria en la que se hace alguna consideración general acerca de ella o se da un desenlace a las acciones que no han quedado terminadas.
.Bibliografía :
Listado de las obras consultadas por el autor para la elaboración de su obra.
.Lista de abreviaturas :
Es un listado por orden alfabético que presenta los símbolos y/o abreviaturas utilizadas en el cuerpo de la obra.
.Advertencia:
Palabras con las que se advierte o se pone de manifiesto algo que debe tenerse en cuenta antes de empezar a leer el libro. Cuando se trata de una reimpresión, el autor o el editor aclaran si la obra conserva la estructura de la anterior o si hay alteraciones o ampliaciones notables.
.Prólogo:
El prólogo puede denominarse también prefacio o introducción y se le llama así al texto previo al cuerpo de la obra. El prólogo puede estar escrito por el autor, editor o por alguien que conozca muy bien el tema que ocupa a la obra.
.Índice general o contenido :
Es una relación organizada del contenido del libro. Si se pone al principio se llama
"contenido" -generalmente en las obras científicas- y si va al final se llama "índice" -generalmente en las obras literarias-.
.Epígrafe :
Es la página reservada para la expresión, frase, sentencia o cita que sugiere algo del contenido del libro o lo que lo ha inspirado.
.Dedicatoria:
Es el texto con el cual el autor dedica la obra a alguien en especial, se suele colocar en el anverso de la hoja que sigue a la portada







Proporción van der graaf


El sistema más utilizado es el sistema de Van de Graaf donde se determina el espacio que va a ocupar la caja de texto , donde vamos a escribir el libro. Mediante las diagonales que hacemos a la página, lo sabremos
Con este sistema conseguimos buenas proporciones en cualquier formato dado.






Maquetación libro ( la cripta embrujada)

Eduardo Mendoza


Primero hay que hacer una carpeta, para que vayan todas las imágenes y texto.
Lo segundo es coger y hacer la maquetación del documento, poniendo los márgenes, numero de columnas si necesitas , etc..

Vamos y hacemos una maqueta en página maestra, con los cuadros de texto y de imagen que queramos que aparezcan en cada una de todas nuestras páginas.

Después de hacer la página maestra, cogemos y colocamos el texto, después para el número del capitulo, texto en general, etc... hacemos estilos de párrafo y de carácter.


Tenemos que hacer cada uno de los capitulos iguales y guardarlos.
Luego al tener todos los capitulos vamos a: Nuevo LIBRO.

Hacemos un libro con cada uno de los capítulos y haremos un indice.

Este indice se ara automáticamente sin necesidad de que tu teclees el texto.
iremos a Maquetación > tabla de contenido.

En tabla de contenido tenemos que escoger uno de los estilos creados (por ejemplo estilo de capítulos) y lo incluimos en esta tabla,  en incluir estilos de párrafo. Pero primero tenemos que crear un estilo de párrafo para el indice. al escojer los estilos y añadirlos le das a ok y el indice se ara automáticamente

 y quedara a si!



PDF y PDF/X

PDF siempre ha sido uno de los formatos de archivo con mayor riqueza de gráficos, más flexible  y fiable para representar e intercambiar un diseño de forma digital. Es tan flexible que se pueden representar e intercambiar infinidad de elementos dentro de los archivos con este formato, incluidos
sonidos, películas, enlaces con sitios web, incluso información que puede verse aunque no esté diseñada para su impresión o (en el caso de que se especifique un
color como RGB) que no resulte adecuada para determinados entornos de producción
de impresión. Esta es una de las razones clave por la que se está desarrollando la especificación de archivos PDF/X.
PDF/X, la X significa eXchange(intercambio), es una norma ANSI que está desarrollando CGATS y que, muy probablemente, se convertirá en un estándar ISO, tal y como ha sucedido con TIFF/IT. Técnicamente, se trata de un subconjunto de la especificación PDF 1.3 de Adobe destinado exclusivamente a la producción de preimpresión. 
PDF/X abarca archivos compuestos que incluyen objetos rasterizados y vectores.
Se están desarrollando dos especificaciones PDF/X: archivos PDF/X-1 que la imprenta puede imprimir directamente para facilitar transferencias "ciegas" de los editores y archivos y PDF/X-2 que
requieren ciertas modificaciones, tales como sustitución de imágenes OPI antes de la impresión final.
Dadas las demandas de los anunciantes para reducir los costes y plazos de entrega, y la amplia implantación de CTP, los flujos de trabajo digitales deben sustituir a los flujos basados en película. Aunque TIFF/-IT es un método viable para conseguirlo, en el sector se acepta que PDF/X es el siguiente paso lógico de la evolución del estándar. De hecho, se puede incluir un archivo TIFF/IT en un archivo PDF, aunque esto no garantiza compatibilidad con PDF/X. La especificación PDF/X ofrece un método más eficaz y flexible de asegurarse de que el ciclo de producción, desde la fase creativa hasta la impresión, satisface las expectativas del cliente.




Acrobat Distiller

Adobe Acrobat Distiller es el motor primario utilizado para convertir archivos PostScript (*.ps) en Formato de Documento Portátil (PDF). Se puede acceder a Distiller desde ciertas aplicaciones informáticas, o por sí mismo como un producto autónomo.




Distiller sirve como método para crear archivos PDF. La otra forma es usando PDF Writer.




Distiller generalmente produce PDFs de más alta calidad que PDF Writer. Distiller puede reproducir gráficos y textos complejos de un documento de forma más precisa que PDF Writer. Además, Distiller permite la personalización de impresión trabajos, así como la opción de importar trabajos de impresión desde otras fuentes.




Adobe Acrobat Distiller hizo su primera aparición con Adobe Acrobat 1.0, sacado en 1993 para Macintosh, y más tarde para Windows 3.1 y DOS. En esa época, al no ser incluido driver para impresora, todos los PDFs eran creados usando Distiller. El driver de Distiller para impresora apareció con la Versión 3.0 en 1996, y fue renombrada como Adobe PDF Writer con la Versión 6.0 en 2003.




Cuando los archivos PDF son creados desde aplicaciones informáticas, tales como Excel o Word, el archivo se convierte primero en PostScript y después en PDF por Distiller.




Edición de Formulario de m03

Editamos primero para practicar una imagen de jpg.
Lo recortamos en photoshop y seguidamente ajustamos el nivel del brillo, contraste y intensidad del color. Al hacer ese paso tenemos que coger y ir al acrobat y

hacemos un Reconocimiento de texto (OCR)

Cuando hacemos este paso, nos saldrán campos editables que a podido leer el OCR y en los cuales podemos escribir encima y las zonas que no a captado el OCR donde querríamos texto lo ponemos nosotros en el acrobat.






Segunda practica de edición de PDF


En este caso lo aremos desde INDESIGN, con el documento actual que hicimos en m03 en indesign





Maquetación de Mortadelo:


Maquetación mortadelo en Indesign CS6

Tomar medidas de la hoja que tenemos en la mano y hacerlo exactamente igual.
Medidas con el tipometro de la letra, recorte de la imagen.

Habra que poner numero de columnas, medianil, márgenes, ceñir texto e imagen.




martes, 10 de diciembre de 2013





                                  


 
  Dreamweaver     

Sitio:es la capacidad que te da de gestionar empaquetando en un solo sitio todos los datos y enlaces que uardamos para hacer el trabajo.

Nueva practica:
  1. Crear sitio : ubicación avanzadas -> local / red
                                                                  carpeta img
                                                   subir a Drive en servidores
Documento HTML - color de fondo
                             propiedades de la página
                                  margenes 0 - 0

vinculo - destino blank

  1. Prepara i recojer materiales
  2. Crear pàgina web
  3. Propiedades pàgina
  4. Crear tabla



Imagenes para web






a) 4px negros y 30T(transparentes)
b) 1px negro , 1t , 1px negro, 2t , 2 n2gros y 28T ( transparentes



. Pesa menos si los pixeles pintados son seguidos Ejemplo (a)
 Si el pixel es uno negro otro transparente, la imagen pesara mas para web.
. Guardar las imagenes de web siempre en png
  Al guardar las imagenes editadas en photoshop si la guardas con programa web, pesara menos ej:PNG

GIF- variar la paleta de colores para que no canvie el color de la imagen i obtener distintas variedades i no perder la calidad de la imagen. Con 8 colores ya esta bien 
Si no seria mucha mas cantidad i ocuparía y taparía torosos de la imagen

. Para poder insertar una imagen sobre otra en Dreamweaver no deja.
 Tendrás que poner primero la imagen que va por delante  y detrás la otra
 o aplicar de fondo la segunda imagen y después enganchar encima.

Ejemplo:

Mapa




GIF para una imagen fotográfica no vale


 Imagenes para web 


1.editando en photoshop

Animación - Imagen en transparente en "Capas"
ej : zona de color y otra imagen en transparente - tiempo 0'5segundos

Guardar para web y dispositivos, en formato "Gif" de 8 colores ( mirar el peso del archivo)
 


2. Dreamweaver

Opción de códigos al enganchar una imagen.
Altura de cuadro de imagen ej: 313 mm

1- Seleccionar la celda y:
ej: celda <td  width"675" height ="313" background"

colocar background con la imagen gris primero, después mirar el alto de la celda y arrastrar la animacion hecha en photoshop encima.

Guardar las imagenes bien en el mismo sitio todo lo que contiene el documento.
También se puede arrastrar la imagen desde archivos y engancharla encima de donde le toque a cada región

. La página que estamos haciendo  es a lo rollo de papel  pero se sigue llevando, aunque tambien ahora estan las enlazadas generando una cadena de enlaces, una página que cuando entras y quieres saber informacion de algo haces clic, por ejemplo en musica y entonces te habre la sección de música y alfinal de la página seguramente pondra para volver a inicio para que puedas volver a escojer la información que desees.




  
Enlaces vinculados
 

Mas actual y uno de los mas recomendados ->
  y se utiliza según su necesidad
Click en uno y te abre el siguientes y asi susesivamente, cada una de las paginas están enlazada.
  

Como hacer una Página vinculada en Dreamweaver

  1. Nuevo sitio en HTML  m2m8uf303
  2. Generar nueva carpeta de imágenes  -  nuevo sitio.
  3. Configurar la estructura de la tabla   -  insertar -> 4 columnas y 6 filas - ancho 800 pixeles

Alinear tabla en el centro - HTML align: center (centrar tabla)
Guardar como inicio.htm
- Referencia/ colocar  etiqueta

  Enlazar en la etiqueta


 Illustrator (BOTÓN)

 Documento nuevo : 800 px x 60 
 para web - RGB
. Guias y cuadrículas - pixeles 72ppp

Y   

.Hacer un cuadrado a : 
    ancho - 200  -  altura 50
. Fondo   -  color cualquiera
. Alinear : Mover objeto clave
. Degradado : con una inclinación de 90º
. Guardar como - png 24 para web y ai (illustrator)


Acabar y siguiente paso :


.PHOTOSHOP

. Mostrar reglas / guias inteligentes 
   marcar cada cuadro con las guias 200 / 400 / 600
. Seleccionar el botón activo ( herramienta barita mágica)
. Hacer cada cuadro en capas diferentes
botón activo y de sustitución
 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 cojes y eliges la imagen original, y la de sustitución para que cuando pases por encima, tambien puedes indicarle la URL hacia donde quieres que vaya.(vincularlo)

Y este proceso se hace todas las veces necesarias para que completes tu botonera.



Después de acabar de hacer la botonera, el texto que vaya sobre cada boton tendra que estar vinculado con su tema determinado, para vincular el tema necesitaremos crear un html por cada sector ejemplo: inicio, música, cine, series, etc.. 
Aremos un html para cada sector y pondremos la informacion extendida sobre cada tema


DREAMWEAVER
 Frames = Marcos

Para empezar pincharemos en “Archivo/nuevo”.

Se nos abrirá una ventana en la que elegiremos “Conjunto de marcos” y para este ejemplo elegiremos “Superior fijo, izquierdo anidado” y le daremos a crear.
Y obtendremos como resultado lo siguiente:

 

 En la parte derecha de la ventana de Dreamweaver veremos el panel de Marcos (si no lo viera basta con pinchar en “Ventana/Marcos” y aparecerá).

Teniendo elegido el marco seleccionándolo (si no basta con pinchar con el ratón en la parte que sea más externa,  para que así quede seleccionado el conjunto de marcos), tendremos bajo la vista de la página : ventana de propiedades

En la que podremos elegir si el marco “topframe” tenga borde, de que anchura y de que color, así como la medida que más se ajuste a nuestro gusto.
Del mismo modo, si en el panel de marcos seleccionáramos con el ratón en el rectángulo que conforman el “leftframe” y el “mainframe”.

En donde igualmente nos dará la posibilidad de poner borde, su anchura y color, y el espacio que queramos que ocupe el “leftframe”.
Por ejemplo, bordes en ambos casos con un ancho de 10 y un color azulado. Y dando valor a fila de 125 pixeles, y a la columna de 200 pixeles.

Para guardar , deberemos guardar lo que es el “conjunto de marcos” así como cada uno de los marcos que hayamos puesto, en este caso, el conjunto de marcos lo llamaremos index.html y a los marcos respectivamente titulo.html , menú.html , pagina1.html
Para ello, lo mejor  para estar seguros que lo guardamos correctamente es que teniendo en el panel de marcos elegido el conjunto de todos luego elijamos la opción “guardar conjunto de marcos como” y le pondremos index.html

Y luego eligiendo cada uno de los marcos elegimos “guardar marco como” (acción que se hará con cada uno de los marcos para así estar seguros de que marco guardamos y con que nombre). A cada cual el que le corresponda: titulo.html , menú.html y pagina1.html

Una vez que lo hayamos guardado la primera vez, para el resto de ocasiones que trabajemos con la página bastará con elegir “guardar todo” y guardara las 4 a la vez.
Otro punto a tener en cuenta es el de los enlaces, si queremos que un enlace que este en el marco “leftFrame” al ser pinchado salga en el marco “mainFrame” habrá que una vez seleccionada la palabra u objeto que queremos vincular y luego en “Vínculo” poner la dirección correspondiente y en “Dest” elegir la opción mainframe
Para realizar las páginas que vayan saliendo en el mainframe, basta con hacerlo desde una página básica en html, ya que al pinchar en el enlace hará que se habrán directamente en el mainframe.


 

 Ejercicios de clase

Marcos y vinculaciones con sus respectivas paginas: arts gràfiques , INS Esteve Terradas, Xtec 




m2m8uf304

Correccion de documentos, vincular otra vez

google drive - web_lipantoja ( compartida con pballester, jmora.. ) 
(aqui van las practicas que hay de entregar)

materiales : dvd, paller -   privilegios

  •  Carpeta nueva - m2m8uf304
  •  Crear sitio en CS4 (marcos)
  •  Restablecer vínculos 
            imágenes - buscar y canviar ( buscar y remplazar : sitio local actual completo , código fuente
            objetivo - frames 
Links del menú, en su marco target (destino)
. vincular los links en mainframe ( para que al abrir no se abra en una venana aparte, si no en el mismo sitio)



 




m2m8uf305


CSS

En classe hicimos un css para web y lo imprimimos
crear nuevo CSS
Al entrar al Dreamweaver saldra una ventana donde pondrá los diferentes archivos que puedes hacer en este programa, html, css,...
Eliges css y siguiente paso es:
que en el css que creas tienes que hacer una clase ejemplo para aplicarlo al titulo de la página:

ponemos  que h1 tiene una clase

<h1 class="turquesa" id="titulonoticia">MICKEY MOUSE </h1>
.turquesa {
       color: #fff0
}
  
todo estos estilos son los que aplicamos a la página para que alfinal nos llegara a dar este resultado:
  








m2m8uf306



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

La etiqueta <span> permite agrupar varios elementos en línea seguidos dentro de un mismo bloque (por ejemplo, varias palabras seguidas en un párrafo), para después darles formato con la hoja de estilo.

ej: 

Y para el apartado hicimos un div:


A cada elemento del div le ponemos si tiene alguna clase, y en el css le ponemos las preferencias que queremos para cada id y para cada clase.






m2m8uf307


Este ejercicio es de la pagina web de apple.com 
Loque vamos a hacer se divide en tres partes básicas

Pero lo primero que aremos es:
-crear sitio nuevo
-crear html : crear divs, agregar el texto, aplicar extructura
-crear css
-vincular html y css

#botonera.css
#contenido.css 
#pie.css

 hay que hacer estos tres css y el reset.
Despues de crear los css, tenemos que vincularlos todos en uno solo documento, donde los veremos individualmente para poderlos editar sin tener que abrir uno por uno.


Botonera. css

1. sitio nuevo
2. Botones 

#botonera{
      background-color: #FFO;
      width : 944px;
      paddding: 0px;
      margin - right: auto;
      margin - left:auto
}

#botonera ul 
#botonera ul li
#botonera ul li a
#botonera ul li a: link
#botonera ul li a: active
#botonera ul li a: visited
#botonera ul #cerca
# botonera ul #cerca a:link, #botoneraul#cerca a: hover, #botonera ul#cerca a:active, #botoneraul #cerca a: visited{.....


resultado final este! (colocando imagenes recortadas para hacer el boton, enlaces..) y esto es solo una parte.
poco a poco iremos creando una pagina identica a apple con el programa dreamweaver



Contenido. css

se divide en dos partes 
una de ellas (la mas grande) lleva imagenes y texto enlazado..
La otra parte es para la busqueda de las cosas que desees ver

pie. css




m2m8uf308



En esta practica practicaremos como hacer tu mismo el popio diseño de tu blogger desde html. Primero hacemos un pensa de como queremos nuestro blogger  y cojemos la idea y lo plasmamos en photoshop, mirando las medidas que queremos y colocando reglas para situarnos.
Ponemos 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... y hacemos un blogger de prueba en nuestro blog habitual para prácticar 
las entradas contienen:

  div blog : es el que contiene todo el material de la práctica.
  div cabecera:  contiene el titulo o imagen que desees poner, para que vean que ese blogger es tuyo, sobretodo el nombre y apellido.
  div contingut: que es donde esta el contenido
  div menu: donde va un cuadro pequeño que esta situado a la dercha, donde va el titulo 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

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