Cómo hacer un libro con tus mejores posts (II)

Print CSS

Continuando con el post de la semana pasada, en el que vimos lo básico de la especificación “CSS Paged Media”, hoy veremos cómo preparar el CSS de la versión para impresión y cómo generar el PDF a partir de las URL que quieras.

2. Crear el archivo CSS para dar formato “papel” a los posts

Ahora se trata de que abras un editor de texto cualquiera (uno tipo bloc de notas ya sirve) y escribas tu propio CSS. Por otra parte te será muy útil la opción “Inspeccionar” que aparece al hacer click con el botón derecho sobre cualquier punto de una página web.

Para ello, sigue estos pasos:

1) Impide la visualización de todos los elementos que no sean el contenido que quieres imprimir. Eso incluye:

  • Barras laterales (Sidebars)
  • Menús de navegación
  • Áreas de comentarios
  • Áreas tipo “posts recomendados” o similares

Esto lo consigues en CSS aplicando: “display:none !important;” a los selectores que corresponden a esos elementos.

En el caso del blog de Desfaziendo Entuertos, esta parte de la hoja CSS quedaría así:

  header,
 .sidebar,
 .page-title,
 .nav-wrap,
 .post-nav,
 #snippet-box,
 #comments.themeform,
 #footer,
 #cookie-law-info-bar,
 #cookie-law-info-again {
 display:none !important;
 }

2) Modifica la anchura de las capas que sí quieres mostrar. Esto lo consigues con el atributo width (en % o en unidades absolutas).

En nuestro caso basta con utilizar la clase .content de la etiqueta section:

section.content {
 width: 100%;
 max-width: 100%;
 }

3) Define las características de la página (según lo que vimos en el post anterior):

En el CSS para Desfaziendo:

@page {
 size: A4;
 }
@page:right{
 @bottom-right {
 content: counter(page);
 }
 }
@page:left{
 @bottom-left {
 content: counter(page);
 }
 }

4) Aplica formato CSS a los elementos (colores, tamaños, tipografías…) a tu gusto.

Ahora solo nos queda convertir a PDF la unión de nuestro HTML y nuestra hoja de estilos CSS.

3. Generar el PDF a partir del CSS y las URL

La Herramienta Prince XML es una aplicación descargable, disponible para Mac, Windows y Linux (y otros sistemas operativos) que permite generar archivos PDF a partir de una página HTML y una hoja de estilos CSS. ¡Ojo! Es gratuita… pero sólo para usos no comerciales.

Puedes descargarla desde:

https://www.princexml.com/

La instalación es muy sencilla, no necesita más explicación.

Este es el aspecto del programa:

princexml

El funcionamiento también es simple, solo tienes que indicar:

  • La página (o páginas) HTML que quieres convertir >> Click en “Add URL”. No hace falta tener el archivo HTML copiado en tu ordenador, al programa le basta con que indiques la URL.
  • La hoja CSS a aplicar >> botón “Add CSS”

Una vez tenemos la lista de archivos HTML que queremos convertir en PDF, hacemos click en la casilla “Merge all documents into a single document file” si queremos que genere un solo documento PDF. Indicamos dónde queremos guardar y le damos a CONVERT.

Esperamos unos segundos, guardamos el archivo generado, lo abrimos y… voilà!

pag1 pag2

La especificación CSS Paged Media permite incorporar muchos más elementos a nuestra página, tales como índices, notas, saltos de página, etc. Es posible estilizar una página completamente mediante CSS “saltándose” el uso de inDesign, e incluso añadir marcas de corte y registro para impresión. Pero si no quieres profundizar tanto en CSS, una alternativa es importar el o los archivos PDF a InDesign y terminar el trabajo ahí. Así que opcionalmente, el siguiente paso sería…

4. Incorporar los PDF obtenidos a InDesign

Ahora que ya tenemos los artículos en PDF, podemos dar toques finales a nuestro libro incorporándolo a Indesign y añadiéndole otros elementos, como índices, página de créditos, etc., que serían más complejos de generar y personalizar con CSS.

Para importar el PDF de varias páginas puedes servirte del plugin PDF Placer, como se comenta en este post:

Colocar un PDF Multipágina en un trabajo Indesign

También puedes echar un vistazo a este post donde encontrarás herramientas para trabajar con documentos PDF.

https://desfaziendoentuertos.prepress.es/hacer-pdfs-online/

5. Generar el PDF definitivo

Generamos un PDF para impresión desde InDesign, y ya está… ¡Ya tenemos nuestro libro listo para imprimir!

La aplicación de CSS paginado abre otras interesantes posibilidades, por ejemplo una empresa que disponga de tienda virtual puede preparar un CSS que convierta el contenido de una página de producto en un flyer que pueda enviarse a una imprenta. Al seguir todas las páginas de producto la misma plantilla, el tiempo invertido en la preparación del CSS se verá compensado con creces.

Summary
Cómo hacer un libro con tus mejores posts (II)
Article Name
Cómo hacer un libro con tus mejores posts (II)
Description
En este tutorial aprenderás a preparar el CSS de la versión para impresión y cómo generar el PDF a partir de las URL que quieras.
Author
Desfaziendo Entuertos
Cómo hacer un libro con tus mejores posts (II)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *